/* ============================================================
   ReconOS — public website
   Design system + sections. Zero external dependencies.
   ============================================================ */

:root{
  /* color */
  --bg:#0A0B0C; --bg-1:#0E0F11; --panel:#121316; --panel-2:#16181C; --raise:#1B1E22;
  --line:rgba(244,242,236,.09); --line-strong:rgba(244,242,236,.16);
  --warm-depth:#1C1206;
  --paper:#F3F1EB; --muted:#9A9B98; --muted-2:#74757A;
  --amber:#F87818; --amber-2:#FF8A2B; --amber-deep:#B45410; --amber-wash:rgba(248,120,24,.12);
  --verify:#5FB37A; --critical:#E5544B; --olive:#5C5A3E;
  /* type */
  --f-sans:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:ui-monospace,"SFMono-Regular","Cascadia Code",Consolas,"Roboto Mono",monospace;
  /* layout */
  --container:1200px; --radius:14px; --radius-sm:8px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:64px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); background:var(--bg)}
body{
  margin:0; background:var(--bg); color:var(--paper);
  font-family:var(--f-sans); font-size:17px; line-height:1.62;
  font-weight:400; letter-spacing:.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; cursor:pointer; border:0; background:none}
h1,h2,h3,h4{margin:0; font-weight:800; line-height:1.06; letter-spacing:-.015em}
p{margin:0}
ul{margin:0; padding:0; list-style:none}
::selection{background:var(--amber); color:#160a02}

/* ---- accessibility helpers ---- */
.skip{position:absolute; left:-9999px; top:0; z-index:200; background:var(--amber); color:#160a02;
  padding:10px 16px; border-radius:0 0 8px 0; font-weight:700}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--amber-2); outline-offset:3px; border-radius:4px}
.vh{position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---- layout primitives ---- */
.container{width:min(var(--container),92vw); margin-inline:auto}
.section{position:relative; padding-block:clamp(4.5rem,9vh,8rem)}
.band-alt{background:linear-gradient(180deg,var(--bg-1),var(--bg))}
.section-head{max-width:62ch}
.eyebrow{font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.2em;
  font-size:12.5px; color:var(--amber); display:inline-flex; align-items:center; gap:.6em; margin-bottom:18px}
.eyebrow::before{content:""; width:22px; height:1px; background:var(--amber); opacity:.7}
h2.h{font-size:clamp(1.95rem,3.7vw,3rem); margin-bottom:18px; max-width:20ch}
.lede{font-size:clamp(1.05rem,1.4vw,1.22rem); color:var(--muted); max-width:60ch}
.kicker{color:var(--paper)}
.amber{color:var(--amber)}

/* ---- buttons ---- */
.btn{display:inline-flex; align-items:center; gap:.55em; padding:13px 22px; border-radius:10px;
  font-weight:650; font-size:15.5px; letter-spacing:.01em; transition:.2s var(--ease);
  border:1px solid transparent; white-space:nowrap}
.btn .ar{transition:transform .2s var(--ease)}
.btn:hover .ar{transform:translateX(3px)}
.btn-primary{background:var(--amber); color:#160a02; box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 10px 30px -12px rgba(248,120,24,.6)}
.btn-primary:hover{background:var(--amber-2)}
.btn-ghost{border-color:var(--line-strong); color:var(--paper); background:rgba(255,255,255,.015)}
.btn-ghost:hover{border-color:var(--amber); color:var(--paper); background:var(--amber-wash)}
.btn-lg{padding:15px 26px; font-size:16.5px}

/* ---- chips / labels ---- */
.chip{display:inline-flex; align-items:center; gap:.5em; font-family:var(--f-mono);
  font-size:11.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:6px 12px; background:rgba(255,255,255,.012)}
.chip .dot{width:7px;height:7px;border-radius:50%}
.dot-amber{background:var(--amber); box-shadow:0 0 0 3px var(--amber-wash)}
.dot-verify{background:var(--verify); box-shadow:0 0 0 3px rgba(95,179,122,.16)}
.demo-mark{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted-2)}

/* ============================================================
   HEADER / NAV
   ============================================================ */
.site-header{position:fixed; inset:0 0 auto 0; height:var(--header-h); z-index:100;
  display:flex; align-items:center; transition:background .3s var(--ease),border-color .3s var(--ease),backdrop-filter .3s}
.site-header::after{content:""; position:absolute; inset:0; border-bottom:1px solid transparent; pointer-events:none; transition:border-color .3s}
.site-header.scrolled{background:rgba(10,11,12,.78); backdrop-filter:blur(12px) saturate(1.1)}
.site-header.scrolled::after{border-bottom-color:var(--line)}
.nav{width:min(var(--container),94vw); margin-inline:auto; display:flex; align-items:center; gap:24px}
.brand{display:flex; align-items:center; gap:11px; padding:6px 0}
.brand .mk{width:34px; height:34px; flex:none}
.wordmark{font-weight:800; font-size:20px; letter-spacing:.01em; line-height:1}
.wordmark .os{color:var(--amber)}
.brand .tag{display:block; font-family:var(--f-mono); font-size:8.5px; letter-spacing:.22em;
  color:var(--muted-2); text-transform:uppercase; margin-top:3px}
.nav-links{display:flex; align-items:center; gap:4px; margin-left:8px}
.nav-links a{font-size:14.5px; color:var(--muted); padding:9px 13px; border-radius:8px; transition:.18s; position:relative}
.nav-links a:hover{color:var(--paper); background:rgba(255,255,255,.03)}
.nav-actions{margin-left:auto; display:flex; align-items:center; gap:12px}
.mobile-menu{display:none}
.nav-toggle{display:none; width:42px; height:42px; border:1px solid var(--line); border-radius:9px; align-items:center; justify-content:center}
.nav-toggle span{position:relative; width:18px; height:2px; background:var(--paper); transition:.2s}
.nav-toggle span::before,.nav-toggle span::after{content:""; position:absolute; left:0; width:18px; height:2px; background:var(--paper); transition:.2s}
.nav-toggle span::before{top:-6px}.nav-toggle span::after{top:6px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0; transform:rotate(-45deg)}

/* ============================================================
   BACKGROUND TEXTURE
   ============================================================ */
.grid-bg{position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:calc(100%/12) 100%; opacity:.5; mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent)}
.brackets{position:absolute; inset:18px; pointer-events:none; z-index:1}
.brackets span{position:absolute; width:18px; height:18px; border:1px solid var(--line-strong)}
.brackets .tl{top:0;left:0;border-right:0;border-bottom:0}
.brackets .tr{top:0;right:0;border-left:0;border-bottom:0}
.brackets .bl{bottom:0;left:0;border-right:0;border-top:0}
.brackets .br{bottom:0;right:0;border-left:0;border-top:0}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative; padding-top:calc(var(--header-h) + clamp(2.5rem,6vh,5rem)); padding-bottom:clamp(3rem,7vh,6rem); overflow:hidden}
.hero-glow{position:absolute; top:-12%; right:-8%; width:62vw; height:62vw; max-width:760px; max-height:760px;
  background:radial-gradient(circle at 50% 50%,var(--warm-depth) 0%,rgba(28,18,6,.35) 38%,transparent 66%);
  z-index:0; pointer-events:none}
.hero-cursor{position:absolute; width:520px; height:520px; left:0; top:0; z-index:0; pointer-events:none;
  background:radial-gradient(circle at center,rgba(248,120,24,.10),transparent 60%);
  transform:translate(-50%,-50%); opacity:0; transition:opacity .4s}
.hero-contours{position:absolute; inset:0; z-index:0; opacity:.5; pointer-events:none;
  mask-image:radial-gradient(circle at 70% 40%,#000,transparent 75%)}
.hero-inner{position:relative; z-index:3; display:grid; grid-template-columns:1.02fr 1.18fr; gap:clamp(28px,4vw,64px); align-items:center}
.hero-copy{max-width:620px}
.hero h1{font-size:clamp(2.5rem,5.6vw,4.7rem); letter-spacing:-.022em; margin:14px 0 0}
.hero h1 .em{color:var(--amber)}
.hero-sub{font-size:clamp(1.06rem,1.5vw,1.28rem); color:var(--muted); margin-top:22px; max-width:54ch}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; margin-top:30px}
.hero-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
.hero-figure{position:relative}
.hero-figure svg{width:100%; height:auto; border-radius:var(--radius);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.9),0 0 0 1px var(--line)}
.trustbar{position:relative; z-index:3; margin-top:clamp(2.5rem,5vh,4rem); padding-top:24px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:22px 40px; align-items:center}
.trustbar .t{display:flex; align-items:center; gap:10px; color:var(--muted); font-size:14px}
.trustbar .t svg{width:18px;height:18px;flex:none;color:var(--amber)}

/* ============================================================
   PROBLEM — converging inputs
   ============================================================ */
.problem-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,60px); align-items:center; margin-top:42px}
.friction{display:grid; gap:14px; margin-top:30px}
.friction li{display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start;
  padding:16px 18px; border:1px solid var(--line); border-radius:12px; background:var(--panel)}
.friction .fl{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--amber); padding-top:3px; white-space:nowrap}
.friction b{font-weight:650}
.friction p{color:var(--muted); font-size:14.5px; margin-top:3px}

/* ============================================================
   WORKFLOW / MISSION LOOP
   ============================================================ */
.loop-wrap{margin-top:46px}
.loop-track{position:relative; display:grid; grid-template-columns:repeat(6,1fr); gap:14px}
.loop-line{position:absolute; left:0; right:0; top:34px; height:2px; background:var(--line); z-index:0}
.loop-line i{position:absolute; left:0; top:0; height:100%; width:0; background:var(--amber); transition:width .4s var(--ease)}
.phase{position:relative; z-index:1; border:1px solid var(--line); background:var(--panel); border-radius:14px;
  padding:18px 16px 18px; transition:.3s var(--ease)}
.phase .pn{width:30px;height:30px;border-radius:8px; background:var(--bg-1); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:13px; color:var(--muted); margin-bottom:36px}
.phase h3{font-size:1.06rem; margin-bottom:8px; letter-spacing:-.01em}
.phase .do{color:var(--muted); font-size:13.6px; margin-bottom:12px}
.phase .out{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-2);
  border-top:1px dashed var(--line); padding-top:10px}
.phase .out b{color:var(--verify); font-weight:600}
.phase.active{border-color:var(--amber); background:linear-gradient(180deg,var(--amber-wash),var(--panel))}
.phase.active .pn{background:var(--amber); border-color:var(--amber); color:#160a02; box-shadow:0 0 0 4px var(--amber-wash)}
.loop-foot{margin-top:22px; font-family:var(--f-mono); font-size:12px; letter-spacing:.06em; color:var(--muted);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.loop-foot .seq{color:var(--muted-2)}
.loop-foot .seq b{color:var(--amber); font-weight:600}

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.showcase{display:grid; gap:clamp(28px,5vh,64px); margin-top:48px}
.show-row{display:grid; grid-template-columns:1fr 1.12fr; gap:clamp(26px,4vw,56px); align-items:center}
.show-row.flip .show-media{order:-1}
.show-copy .ix{font-family:var(--f-mono); font-size:12px; letter-spacing:.16em; color:var(--amber); text-transform:uppercase}
.show-copy h3{font-size:clamp(1.4rem,2.1vw,1.85rem); margin:10px 0 14px}
.show-copy p{color:var(--muted); max-width:48ch}
.show-list{margin-top:18px; display:grid; gap:10px}
.show-list li{display:grid; grid-template-columns:auto 1fr; gap:11px; align-items:start; font-size:15px}
.show-list .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted-2); padding-top:4px; white-space:nowrap}
.show-list .k.op{color:var(--paper)}
.show-list .k.os{color:var(--amber)}
.show-list .k.ot{color:var(--verify)}
.show-media{position:relative}
.show-media .frame{border:1px solid var(--line); border-radius:var(--radius); background:var(--panel-2); padding:12px;
  box-shadow:0 30px 70px -45px rgba(0,0,0,.9)}
.show-media svg{width:100%; height:auto; border-radius:8px; display:block}
.show-media .cap{margin-top:10px; display:flex; justify-content:space-between; align-items:center; gap:10px}

/* ============================================================
   CAPABILITIES (operator) grid
   ============================================================ */
.cap-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:44px}
.cap{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:22px 20px; transition:.25s var(--ease)}
.cap:hover{border-color:var(--line-strong); background:var(--panel-2); transform:translateY(-3px)}
.cap .ic{width:38px;height:38px;border-radius:10px; background:var(--amber-wash); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.cap .ic svg{width:20px;height:20px;color:var(--amber)}
.cap h3{font-size:1.04rem; margin-bottom:8px}
.cap p{color:var(--muted); font-size:14px}

/* ============================================================
   TAK flow
   ============================================================ */
.tak-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:40px; position:relative}
.tak-step{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:22px 20px; position:relative}
.tak-step .n{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; color:var(--amber); text-transform:uppercase}
.tak-step h3{font-size:1.05rem; margin:10px 0 8px}
.tak-step p{color:var(--muted); font-size:13.8px}
.tak-step .arrow{position:absolute; right:-11px; top:50%; transform:translateY(-50%); z-index:2; color:var(--muted-2)}
.tak-note{margin-top:22px; padding:16px 18px; border:1px solid var(--line); border-left:2px solid var(--amber);
  border-radius:0 10px 10px 0; background:var(--panel); color:var(--muted); font-size:14px; max-width:78ch}

/* ============================================================
   OFFLINE — honesty columns
   ============================================================ */
.offline-cols{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:40px}
.ocol{border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:24px 22px}
.ocol .st{display:inline-flex; align-items:center; gap:8px; font-family:var(--f-mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; padding:6px 10px; border-radius:999px; margin-bottom:16px}
.ocol.now .st{color:var(--verify); border:1px solid rgba(95,179,122,.3); background:rgba(95,179,122,.08)}
.ocol.pack .st{color:var(--amber); border:1px solid rgba(248,120,24,.3); background:var(--amber-wash)}
.ocol.dev .st{color:var(--muted); border:1px solid var(--line-strong); background:rgba(255,255,255,.02)}
.ocol h3{font-size:1.06rem; margin-bottom:12px}
.ocol li{display:grid; grid-template-columns:auto 1fr; gap:10px; color:var(--muted); font-size:14px; padding:7px 0; border-top:1px solid var(--line)}
.ocol li:first-of-type{border-top:0}
.ocol li svg{width:15px;height:15px;margin-top:4px;flex:none}

/* ============================================================
   FOUNDER
   ============================================================ */
.founder{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(28px,4vw,60px); align-items:center; margin-top:40px}
.founder-card{border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg,var(--panel-2),var(--panel)); padding:30px; position:relative; overflow:hidden}
.founder-card .corner{position:absolute; inset:10px; pointer-events:none}
.founder-portrait{display:flex; align-items:center; gap:18px; margin-bottom:22px}
.founder-portrait .ins{width:74px;height:74px;border-radius:14px;border:1px solid var(--line-strong);
  background:var(--bg-1); display:flex;align-items:center;justify-content:center; flex:none}
.founder-portrait .ins svg{width:42px;height:42px}
.founder-portrait .nm b{display:block; font-size:1.18rem}
.founder-portrait .nm span{color:var(--muted); font-size:14px; font-family:var(--f-mono); letter-spacing:.04em}
.creds{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px}
.creds .c{font-family:var(--f-mono); font-size:11px; letter-spacing:.06em; color:var(--muted);
  border:1px solid var(--line); border-radius:6px; padding:5px 9px; background:rgba(255,255,255,.015)}
.founder blockquote{margin:0 0 18px; font-size:clamp(1.15rem,1.8vw,1.5rem); line-height:1.35; font-weight:650; letter-spacing:-.01em}
.founder blockquote .em{color:var(--amber)}
.founder p{color:var(--muted); margin-bottom:14px; max-width:54ch}
/* founder credential card (redesigned) */
.founder-card{position:relative; overflow:hidden}
.fc-corner span{position:absolute; width:14px; height:14px; border:1px solid var(--line-strong)}
.fc-corner span:nth-child(1){top:12px;left:12px;border-right:0;border-bottom:0}
.fc-corner span:nth-child(2){top:12px;right:12px;border-left:0;border-bottom:0}
.fc-corner span:nth-child(3){bottom:12px;left:12px;border-right:0;border-top:0}
.fc-corner span:nth-child(4){bottom:12px;right:12px;border-left:0;border-top:0}
.fc-top{display:flex; align-items:center; gap:16px}
.fc-ins{width:62px; height:62px; border-radius:14px; border:1px solid var(--line-strong); background:var(--bg-1); display:flex; align-items:center; justify-content:center; flex:none}
.fc-id{flex:1; min-width:0}
.fc-role{font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--amber)}
.fc-name{display:block; font-size:1.5rem; letter-spacing:-.01em; margin-top:4px; line-height:1.1}
.fc-flag{font-family:var(--f-mono); font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted-2); border:1px solid var(--line); border-radius:6px; padding:6px 9px; align-self:flex-start; white-space:nowrap}
.fc-rule{height:1px; background:var(--line); margin:22px 0 16px}
.fc-label{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-2)}
.fc-creds{margin-top:14px; display:grid; grid-template-columns:1fr 1fr; gap:11px 20px}
.fc-creds li{display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:start; color:var(--paper); font-size:14.5px}
.fc-creds li::before{content:""; width:7px; height:7px; border-radius:2px; background:var(--amber); margin-top:6px}
@media (max-width:520px){ .fc-creds{grid-template-columns:1fr} .fc-name{font-size:1.3rem} .fc-flag{display:none} }

/* ============================================================
   CTA + form
   ============================================================ */
.cta{position:relative; overflow:hidden}
.cta-inner{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:start}
.cta h2{font-size:clamp(2rem,3.6vw,3rem)}
.cta .lede{margin-top:16px}
.cta-direct{margin-top:26px; display:grid; gap:14px}
.cta-direct a.maillink{display:inline-flex; align-items:center; gap:10px; font-size:1.05rem; color:var(--paper)}
.cta-direct a.maillink:hover{color:var(--amber)}
.cta-actions{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.form{border:1px solid var(--line); border-radius:18px; background:var(--panel); padding:26px}
.form .row{display:grid; gap:7px; margin-bottom:16px}
.form .row.two{grid-template-columns:1fr 1fr; gap:14px}
.form label{font-family:var(--f-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.form input,.form select,.form textarea{width:100%; background:var(--bg-1); border:1px solid var(--line-strong);
  border-radius:9px; color:var(--paper); padding:12px 13px; font:inherit; font-size:15px; transition:.18s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none; border-color:var(--amber); box-shadow:0 0 0 3px var(--amber-wash)}
.form textarea{resize:vertical; min-height:92px}
.form .submit{width:100%; justify-content:center; margin-top:4px}
.form .fineprint{margin-top:14px; font-size:12.5px; color:var(--muted-2); line-height:1.5}
.form-status{margin-top:12px; font-size:14px; color:var(--verify); display:none}
.form-status.show{display:block}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{border-top:1px solid var(--line); padding-block:clamp(3rem,6vh,4.5rem); background:var(--bg-1)}
.foot-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px}
.foot-brand .wordmark{font-size:22px}
.foot-brand p{color:var(--muted); font-size:14px; margin-top:14px; max-width:34ch}
.foot-col h4{font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-2); margin-bottom:14px; font-weight:600}
.foot-col a,.foot-col span{display:block; color:var(--muted); font-size:14.5px; padding:5px 0; transition:.16s}
.foot-col a:hover{color:var(--amber)}
.foot-bottom{margin-top:36px; padding-top:22px; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between}
.foot-bottom small{color:var(--muted-2); font-size:12.5px; line-height:1.6}
.foot-uncl{font-family:var(--f-mono); font-size:11px; letter-spacing:.12em; color:var(--muted-2); text-transform:uppercase}

/* ============================================================
   REVEAL ANIMATION
   ============================================================ */
/* progressive enhancement: content is visible by default; only the .js root hides it to animate */
.reveal{transition:opacity .65s var(--ease),transform .65s var(--ease)}
.js .reveal{opacity:0; transform:translateY(18px)}
.js .reveal.in{opacity:1; transform:none}
.reveal[data-d="1"]{transition-delay:.07s}
.reveal[data-d="2"]{transition-delay:.14s}
.reveal[data-d="3"]{transition-delay:.21s}
.reveal[data-d="4"]{transition-delay:.28s}
.reveal[data-d="5"]{transition-delay:.35s}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .hero-inner{grid-template-columns:1fr; gap:36px}
  .hero-figure{order:2; max-width:680px}
  .loop-track{grid-template-columns:repeat(3,1fr); gap:12px}
  .loop-line{display:none}
  .cap-grid{grid-template-columns:repeat(2,1fr)}
  .tak-flow{grid-template-columns:repeat(2,1fr)}
  .tak-step .arrow{display:none}
  .offline-cols{grid-template-columns:1fr}
  .founder{grid-template-columns:1fr}
  .cta-inner{grid