:root{
  --paper:#ECE8DF;
  --paper-2:#E2DDD1;
  --ink:#111110;
  --ink-2:#2A2926;
  --mute:#6E6A62;
  --line:#1111101f;
  --sig:#FF4A17;
  --sig-ink:#C93300;
  --night:#0E0E0D;
  --night-2:#1A1A18;
  --night-line:#ffffff1a;
  --night-mute:#8C887F;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --sans:"Archivo",system-ui,sans-serif;
  --gut:clamp(16px,4vw,56px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
::selection{background:var(--sig);color:#fff}

/* grain */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.wrap{padding:0 var(--gut);max-width:1480px;margin:0 auto}

/* ---------- NAV ---------- */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);mix-blend-mode:difference;color:#fff}
.logo{font-weight:900;font-variation-settings:"wdth" 125;font-size:22px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px}
.logo i{width:12px;height:12px;background:var(--sig);display:inline-block;border-radius:50%;mix-blend-mode:normal}
nav ul{display:flex;gap:28px;list-style:none}
nav ul a{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
nav ul a:hover{opacity:1}
@media(max-width:760px){nav ul{display:none}}

/* ---------- HERO ---------- */
.hero{min-height:100svh;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:40px;padding-top:90px;padding-bottom:40px;position:relative}
.hero-kicker{display:flex;gap:12px;align-items:center;margin-bottom:28px;color:var(--mute)}
.hero-kicker b{width:8px;height:8px;border-radius:50%;background:var(--sig);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.2}}
h1{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(64px,10.5vw,168px);line-height:.84;letter-spacing:-.02em;text-transform:uppercase}
h1 .wide{font-variation-settings:"wdth" 125;font-size:.62em;display:block;letter-spacing:-.03em;line-height:.95}
h1 .sig{color:var(--sig)}
.hero-sub{margin-top:30px;max-width:520px;font-size:clamp(17px,1.4vw,20px);line-height:1.45;color:var(--ink-2)}
.pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.pill{border:1px solid var(--ink);padding:8px 14px;border-radius:99px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;transition:.25s}
.pill:hover{background:var(--ink);color:var(--paper)}
.cta-row{display:flex;gap:14px;margin-top:38px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:12px;padding:18px 26px;font-weight:700;font-size:15px;border-radius:2px;transition:.25s;cursor:pointer;border:none;font-family:var(--sans)}
.btn-sig{background:var(--sig);color:#fff}
.btn-sig:hover{background:var(--ink)}
.btn-ghost{border:1.5px solid var(--ink);color:var(--ink);background:transparent}
.btn-ghost:hover{background:var(--ink);color:var(--paper)}
.btn .arr{transition:transform .25s}
.btn:hover .arr{transform:translateX(5px)}

.twin-box{position:relative;aspect-ratio:1;width:100%;max-width:640px;justify-self:center}
#twin{width:100%;height:100%;overflow:visible}
.twin-label{position:absolute;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.twin-label.tl{top:0;left:0}.twin-label.br{bottom:0;right:0;text-align:right}
.twin-label .n{color:var(--ink);font-weight:700}

@media(max-width:960px){.hero{grid-template-columns:1fr;padding-top:110px}.twin-box{max-width:520px}}

/* ---------- TICKER ---------- */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;border-top:1px solid var(--ink);white-space:nowrap}
.ticker-track{display:inline-flex;animation:tick 38s linear infinite;padding:22px 0}
.ticker span{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(22px,3vw,40px);text-transform:uppercase;letter-spacing:-.02em;padding-right:40px;display:inline-flex;align-items:center;gap:40px}
.ticker span::after{content:"";width:14px;height:14px;background:var(--sig);border-radius:50%}
@keyframes tick{to{transform:translateX(-50%)}}

/* ---------- SECTION ---------- */
section{position:relative}
.sec{padding:clamp(80px,12vw,160px) 0}
.sec-head{display:grid;grid-template-columns:200px 1fr;gap:30px;margin-bottom:clamp(40px,6vw,80px);align-items:start}
.sec-num{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute);padding-top:12px;border-top:1px solid currentColor}
h2{font-weight:900;font-variation-settings:"wdth" 70;font-size:clamp(44px,7vw,108px);line-height:.88;text-transform:uppercase;letter-spacing:-.015em}
h2 em{font-style:normal;color:var(--sig)}
.lede{margin-top:22px;max-width:640px;font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--ink-2)}
@media(max-width:760px){.sec-head{grid-template-columns:1fr;gap:16px}}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- MODEL (4 quadrants) ---------- */
.quad{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--ink)}
.q{padding:34px 26px 40px;border-right:1px solid var(--line);position:relative;min-height:380px;display:flex;flex-direction:column;transition:background .35s,color .35s;cursor:default;overflow:hidden}
.q:last-child{border-right:none}
.q .qn{font-family:var(--mono);font-size:12px;color:var(--mute);transition:color .35s}
.q h3{margin-top:auto;font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(24px,2.2vw,34px);text-transform:uppercase;letter-spacing:-.02em}
.q ul{list-style:none;margin-top:16px;display:flex;flex-direction:column;gap:6px}
.q li{font-size:16px;color:var(--ink-2);transition:color .35s;display:flex;gap:10px;align-items:center}
.q li::before{content:"";width:6px;height:6px;background:var(--sig);border-radius:50%}
.q .glyph{position:absolute;top:60px;right:-10px;width:170px;height:170px;opacity:.9;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.q:hover{background:var(--ink);color:var(--paper)}
.q:hover li,.q:hover .qn{color:#cfcac0}
.q:hover .glyph{transform:rotate(-12deg) scale(1.08)}
.q .glyph *{stroke:currentColor}
@media(max-width:1000px){.quad{grid-template-columns:1fr 1fr}.q:nth-child(2){border-right:none}.q{border-bottom:1px solid var(--line)}}
@media(max-width:560px){.quad{grid-template-columns:1fr}.q{border-right:none;min-height:300px}}

.statement{margin-top:clamp(60px,9vw,120px);display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap}
.statement p{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(40px,6vw,92px);line-height:.88;text-transform:uppercase}
.statement p span{color:var(--sig)}
.statement small{max-width:340px;color:var(--mute);font-size:15px;line-height:1.5}

/* ---------- FACTORY (dark) ---------- */
.dark{background:var(--night);color:var(--paper)}
.dark .sec-num{color:var(--night-mute)}
.dark .lede{color:#bdb8ae}
.chain{display:flex;gap:0;margin-bottom:60px;border:1px solid var(--night-line);overflow-x:auto}
.chain div{flex:1;min-width:150px;padding:22px 20px;border-right:1px solid var(--night-line);position:relative}
.chain div:last-child{border-right:none}
.chain .mono{color:var(--night-mute)}
.chain b{display:block;margin-top:8px;font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(18px,1.8vw,26px);text-transform:uppercase}
.chain div::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--sig);transition:width 1s}
.chain.lit div::after{width:100%}
.chain.lit div:nth-child(2)::after{transition-delay:.25s}
.chain.lit div:nth-child(3)::after{transition-delay:.5s}
.chain.lit div:nth-child(4)::after{transition-delay:.75s}
.chain.lit div:nth-child(5)::after{transition-delay:1s}

.stack{border-top:1px solid var(--night-line)}
.row{display:grid;grid-template-columns:110px 1fr 40px;align-items:center;gap:20px;padding:26px 0;border-bottom:1px solid var(--night-line);cursor:pointer;position:relative}
.row .ab{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(28px,3vw,44px);letter-spacing:-.02em;color:var(--sig)}
.row .nm{font-weight:700;font-size:clamp(18px,2vw,28px);text-transform:uppercase;font-variation-settings:"wdth" 90}
.row .plus{width:34px;height:34px;border:1px solid var(--night-line);border-radius:50%;display:grid;place-items:center;transition:.35s;font-family:var(--mono)}
.row .det{grid-column:2/4;max-height:0;overflow:hidden;transition:max-height .5s cubic-bezier(.2,.7,.2,1)}
.row .det-in{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.row .det-in span{border:1px solid #ffffff33;padding:8px 14px;border-radius:99px;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:#dcd7cd}
.row.open .det{max-height:200px}
.row.open .plus{background:var(--sig);border-color:var(--sig);transform:rotate(45deg)}
.row:hover .nm{color:#fff}
@media(max-width:600px){.row{grid-template-columns:70px 1fr 34px}.row .det{grid-column:1/4}}

.flowline{margin-top:80px;position:relative;padding:40px 0 10px}
.flowline .track{height:2px;background:var(--night-line);position:relative}
.flowline .fill{position:absolute;left:0;top:0;height:2px;background:var(--sig);width:0}
.flowline .stops{display:flex;justify-content:space-between;margin-top:-7px}
.flowline .stop{display:flex;flex-direction:column;align-items:center;gap:14px;width:0}
.flowline .stop i{width:12px;height:12px;border-radius:50%;background:var(--night);border:2px solid var(--sig)}
.flowline .stop span{white-space:nowrap;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#cfcac0}
.flowline .stop:first-child{align-items:flex-start}.flowline .stop:last-child{align-items:flex-end}
.flowline .box{position:absolute;top:31px;left:0;width:22px;height:22px;background:var(--sig);border-radius:3px;transform:translateX(-50%)}
.flowline h4{font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:clamp(18px,2vw,26px);margin-bottom:30px}
@media(max-width:600px){.flowline .stop span{font-size:9px}}

/* ---------- AGENTS ---------- */
.agents-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.term{background:var(--ink);color:#d8d3c9;border-radius:6px;overflow:hidden;box-shadow:0 30px 80px -30px #0007}
.term-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid #ffffff14}
.term-bar i{width:10px;height:10px;border-radius:50%;background:#ffffff26}
.term-bar i:first-child{background:var(--sig)}
.term-bar span{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--night-mute);display:flex;align-items:center;gap:8px}
.term-bar span::before{content:"";width:7px;height:7px;border-radius:50%;background:#4BD06A;animation:blink 1.4s infinite}
.log{height:420px;overflow:hidden;padding:16px;font-family:var(--mono);font-size:13px;line-height:1.55;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;mask-image:linear-gradient(to bottom,transparent,#000 30%)}
.ln{display:grid;grid-template-columns:64px 118px 1fr;gap:10px;animation:up .5s cubic-bezier(.2,.7,.2,1)}
.ln .t{color:#6f6b63}
.ln .a{color:var(--sig);text-transform:uppercase;font-size:11px;letter-spacing:.06em;padding-top:2px}
.ln .ok{color:#7ad48c}
.ln .hold{color:#f2c14e}
@keyframes up{from{opacity:0;transform:translateY(14px)}}
@media(max-width:600px){.ln{grid-template-columns:1fr;gap:2px}.log{height:460px}}

.rules{display:flex;flex-direction:column;gap:0}
.rule{display:flex;gap:18px;align-items:baseline;padding:24px 0;border-bottom:1px solid var(--line)}
.rule:first-child{border-top:1.5px solid var(--ink)}
.rule .mono{color:var(--mute);min-width:34px}
.rule b{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(22px,2.4vw,34px);text-transform:uppercase;letter-spacing:-.02em}
.fns{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.fns .pill{border-color:var(--ink-2)}

/* ---------- FUNCTIONS ---------- */
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.fcard{background:var(--paper-2);padding:32px 28px;border-radius:4px;position:relative;overflow:hidden;transition:transform .4s cubic-bezier(.2,.7,.2,1)}
.fcard:hover{transform:translateY(-6px)}
.fcard .mono{color:var(--mute)}
.fcard h3{font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(24px,2.4vw,34px);text-transform:uppercase;margin:14px 0 22px;letter-spacing:-.02em}
.fcard dl{display:flex;flex-direction:column;gap:16px}
.fcard dt{font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.fcard dd{color:var(--mute);font-size:15px;line-height:1.45;margin-top:3px}
.fcard::after{content:"";position:absolute;right:-40px;top:-40px;width:120px;height:120px;border-radius:50%;background:var(--sig);transform:scale(0);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.fcard:hover::after{transform:scale(1)}
@media(max-width:960px){.fgrid{grid-template-columns:1fr}}

/* ---------- COMMS ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1.5px solid var(--ink)}
.step{padding:30px 24px 36px;border-right:1px solid var(--line);position:relative}
.step:last-child{border-right:none}
.step .big{font-weight:900;font-variation-settings:"wdth" 62;font-size:clamp(70px,8vw,120px);line-height:.8;color:transparent;-webkit-text-stroke:1.5px var(--ink);transition:.4s}
.step:hover .big{color:var(--sig);-webkit-text-stroke-color:var(--sig)}
.step h3{margin-top:24px;font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:22px;letter-spacing:-.01em}
.step .sub{font-family:var(--mono);font-size:11px;letter-spacing:.08em;color:var(--sig-ink);text-transform:uppercase;margin-top:4px}
.step p{margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.5}
.step .tags{margin-top:16px;font-family:var(--mono);font-size:11px;color:var(--mute);line-height:1.8;text-transform:uppercase;letter-spacing:.04em}
@media(max-width:1000px){.steps{grid-template-columns:1fr 1fr}.step{border-bottom:1px solid var(--line)}.step:nth-child(2){border-right:none}}
@media(max-width:560px){.steps{grid-template-columns:1fr}.step{border-right:none}}

.inbox{margin-top:60px;display:grid;grid-template-columns:240px 1fr;background:#fff;border:1.5px solid var(--ink);border-radius:6px;overflow:hidden;min-height:340px}
.inbox aside{border-right:1px solid var(--line);padding:18px 0;background:#F7F5F0}
.inbox aside div{padding:10px 20px;font-size:14px;display:flex;justify-content:space-between;color:var(--ink-2);cursor:pointer}
.inbox aside div.on{background:var(--ink);color:#fff}
.inbox aside div em{font-style:normal;font-family:var(--mono);font-size:11px;opacity:.7}
.threads{padding:8px 0}
.th{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);animation:up .5s}
.th .av{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:#fff;background:var(--ink)}
.th .who{font-weight:700;font-size:15px}
.th .msg{font-size:14px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.th .ch{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:99px;border:1px solid var(--line)}
.th .ch.ai{background:var(--sig);color:#fff;border-color:var(--sig)}
@media(max-width:700px){.inbox{grid-template-columns:1fr}.inbox aside{display:flex;overflow-x:auto;padding:0;border-right:none;border-bottom:1px solid var(--line)}.inbox aside div{white-space:nowrap;gap:8px}}

/* ---------- LOOP ---------- */
.loop-wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
#loop{width:100%;max-width:560px;justify-self:center;overflow:visible}
.loop-list{list-style:none;counter-reset:l}
.loop-list li{padding:20px 0;border-bottom:1px solid var(--night-line);display:grid;grid-template-columns:180px 1fr;gap:20px;transition:.3s;opacity:.45}
.loop-list li.on{opacity:1}
.loop-list li b{font-weight:900;font-variation-settings:"wdth" 125;text-transform:uppercase;font-size:20px}
.loop-list li.on b{color:var(--sig)}
.loop-list li span{color:#bdb8ae;font-size:15px;line-height:1.5}
@media(max-width:960px){.loop-wrap{grid-template-columns:1fr}.loop-list li{grid-template-columns:1fr;gap:4px}}

/* ---------- CTA ---------- */
.final{padding:clamp(100px,14vw,200px) 0 60px;text-align:left}
.final h2{font-size:clamp(56px,11vw,190px);font-variation-settings:"wdth" 62}
.final .row2{display:flex;justify-content:space-between;align-items:end;margin-top:50px;gap:30px;flex-wrap:wrap}
.final p{max-width:460px;font-size:18px;line-height:1.5;color:var(--ink-2)}
footer{border-top:1.5px solid var(--ink);padding:28px 0 40px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
footer .big{font-weight:900;font-variation-settings:"wdth" 125;font-size:clamp(80px,18vw,300px);line-height:.8;letter-spacing:-.04em;width:100%;color:var(--ink)}
footer .big span{color:var(--sig)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv{opacity:1;transform:none}}

/* ---------- shared additions ---------- */
footer .big{font-size:clamp(56px,12.5vw,210px)}
.sols{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.sol{background:var(--paper-2);padding:30px 26px;border-radius:4px;display:flex;flex-direction:column;min-height:340px;transition:background .35s,color .35s,transform .4s cubic-bezier(.2,.7,.2,1)}
.sol .mono{color:var(--mute)}
.sol h3{margin-top:auto;font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(24px,2.3vw,32px);text-transform:uppercase;letter-spacing:-.02em;line-height:.95}
.sol p{margin-top:14px;color:var(--ink-2);font-size:15px;line-height:1.45}
.sol b{margin-top:22px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sig-ink)}
.sol:hover{background:var(--ink);color:var(--paper);transform:translateY(-6px)}
.sol:hover p,.sol:hover .mono{color:#cfcac0}
.sol:hover b{color:var(--sig)}
@media(max-width:1000px){.sols{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.sols{grid-template-columns:1fr}}
.page-hero{min-height:88svh;display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;padding-bottom:60px}
.page-hero .hero-sub{max-width:640px}
.crumb{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:24px}
.crumb a{border-bottom:1px solid currentColor}
.dark .pill{border-color:#ffffff55;color:#dcd7cd}
.dark .pill:hover{background:var(--paper);color:var(--ink)}
.dark .statement small{color:var(--night-mute)}
.next{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:50px 0;border-top:1.5px solid var(--ink);flex-wrap:wrap}
.next a{font-weight:900;font-variation-settings:"wdth" 110;font-size:clamp(28px,4vw,56px);text-transform:uppercase;letter-spacing:-.02em}
.next a:hover{color:var(--sig)}
