/* ============================================================
   Agentic AI SEO — "Ink & Signal"
   cool-blue agents · warm-gold citations
   ============================================================ */
:root{
  --ink:#0A0B12; --ink-2:#0f111c; --panel:#12141f; --line:#20243440;
  --line-solid:#20243a;
  --blue:#5B8CFF; --blue-2:#7aa0ff; --blue-dim:#3a4a7a;
  --gold:#F3B44C; --cyan:#46E4C4;
  --fg:#ECEEF7; --muted:#8A90A8; --muted-2:#5b6076;
  --radius:16px; --maxw:1180px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --f-display:"Space Grotesk",system-ui,sans-serif;
  --f-body:"Inter",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ink);color:var(--fg);
  font-family:var(--f-body);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
h1,h2,h3{font-family:var(--f-display);font-weight:600;line-height:1.05;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
em{font-style:normal;color:var(--gold)}
.mono{font-family:var(--f-mono);font-size:.8em;letter-spacing:.02em}
.grad{background:linear-gradient(100deg,var(--blue-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.skip{position:absolute;left:-999px;top:0;background:var(--blue);color:#000;padding:10px 14px;border-radius:8px;z-index:100}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- background layers ---------- */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}
/* constellation kept faint + masked away from the centre so it never fights the copy */
#constellation{position:absolute;inset:0;width:100%;height:100%;opacity:.4;
  -webkit-mask-image:radial-gradient(ellipse 58% 46% at 50% 34%,transparent 32%,#000 80%);
          mask-image:radial-gradient(ellipse 58% 46% at 50% 34%,transparent 32%,#000 80%)}
.bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:72px 72px;-webkit-mask-image:radial-gradient(circle at 50% 26%,#000 0%,transparent 68%);
  mask-image:radial-gradient(circle at 50% 26%,#000 0%,transparent 68%);opacity:.3}
/* cool + warm aurora — the brand's two signals, very soft */
.bg-glow{position:absolute;inset:0}
.bg-glow::before,.bg-glow::after{content:"";position:absolute;border-radius:50%;filter:blur(64px)}
.bg-glow::before{top:-14%;left:50%;width:820px;height:600px;transform:translateX(-52%);
  background:radial-gradient(circle,rgba(91,140,255,.2),transparent 62%)}
.bg-glow::after{top:14%;left:50%;width:520px;height:420px;transform:translateX(20%);
  background:radial-gradient(circle,rgba(243,180,76,.1),transparent 64%)}
.bg-grain{position:absolute;inset:0;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- layout helpers ---------- */
section{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.sec-head{max-width:720px;margin:0 auto 56px;text-align:center}
.kicker{font-family:var(--f-mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--blue-2);margin-bottom:18px}
.sec-head h2{font-size:clamp(30px,4.4vw,52px)}
.lead{margin-top:20px;color:var(--muted);font-size:clamp(16px,2vw,19px)}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:24px;
  max-width:var(--maxw);margin:0 auto;padding:16px 24px}
.nav::before{content:"";position:absolute;inset:0;backdrop-filter:blur(12px);
  background:linear-gradient(var(--ink),rgba(10,11,18,.4));-webkit-mask:linear-gradient(#000 60%,transparent);z-index:-1}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:600}
.brand-mark{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;
  color:#05060c;background:linear-gradient(150deg,var(--blue-2),var(--blue));box-shadow:0 0 20px rgba(91,140,255,.5)}
.brand-name{letter-spacing:-.01em}
.brand-dim{color:var(--muted)}
.nav-links{display:flex;gap:26px;margin-left:auto;font-size:14.5px;color:var(--muted)}
.nav-links a:hover{color:var(--fg)}
.nav-cta{margin-left:8px}
.nav-toggle{display:none;background:none;border:1px solid var(--line-solid);border-radius:9px;width:40px;height:36px;flex-direction:column;gap:4px;justify-content:center;align-items:center;cursor:pointer}
.nav-toggle span{width:16px;height:2px;background:var(--fg);border-radius:2px;transition:.3s}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:15px;
  padding:12px 20px;border-radius:11px;border:1px solid transparent;cursor:pointer;transition:transform .2s var(--ease),background .2s,box-shadow .3s}
.btn-primary{color:#05060c;background:linear-gradient(150deg,var(--blue-2),var(--blue));box-shadow:0 8px 30px -8px rgba(91,140,255,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 40px -8px rgba(91,140,255,.75)}
.btn-ghost{color:var(--fg);border-color:var(--line-solid);background:rgba(255,255,255,.02)}
.btn-ghost:hover{border-color:var(--blue-dim);background:rgba(91,140,255,.08);transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{position:relative;padding-top:clamp(64px,10vw,128px);padding-bottom:84px;text-align:center;max-width:1080px}
.hero::before{content:"";position:absolute;top:6%;left:50%;width:min(760px,90%);height:340px;transform:translateX(-50%);z-index:-1;
  background:radial-gradient(60% 60% at 50% 40%,rgba(91,140,255,.16),transparent 70%);filter:blur(20px);pointer-events:none}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);border:1px solid var(--line-solid);border-radius:100px;padding:8px 16px;background:linear-gradient(rgba(91,140,255,.06),rgba(255,255,255,.01))}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.hero-title{font-size:clamp(37px,6.3vw,74px);font-weight:700;line-height:1.08;letter-spacing:-.025em;margin:26px 0 0;text-wrap:balance}
.hero-title .line{display:block}
.hero-title em{color:var(--gold);text-shadow:0 0 22px rgba(243,180,76,.26)}
.hero-title .grad{filter:drop-shadow(0 0 16px rgba(91,140,255,.22))}
.hero-sub{max-width:760px;margin:28px auto 0;color:#aab0c6;font-size:clamp(17px,2.1vw,20px);text-wrap:pretty}
.hero-cta{display:flex;gap:14px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.hero-proof{display:flex;gap:22px;justify-content:center;flex-wrap:wrap;margin-top:26px;font-family:var(--f-mono);font-size:12.5px;color:var(--muted-2);letter-spacing:.02em}
.hero-proof span{display:inline-flex;align-items:center;gap:7px}
.hero-proof svg{color:var(--gold)}

/* hero result preview */
.hero-demo{max-width:520px;margin:44px auto 0;border:1px solid var(--line-solid);border-radius:16px;text-align:left;overflow:hidden;
  background:linear-gradient(180deg,rgba(18,20,31,.92),rgba(12,13,20,.92));box-shadow:0 44px 100px -54px rgba(91,140,255,.6),inset 0 1px 0 rgba(255,255,255,.03)}
.hd-bar{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line)}
.hd-bar i{width:9px;height:9px;border-radius:50%}
.hd-bar i:nth-child(1){background:#ff5f56}.hd-bar i:nth-child(2){background:#ffbd2e}.hd-bar i:nth-child(3){background:#27c93f}
.hd-bar .mono{margin-left:6px;font-size:11.5px;color:var(--muted-2)}
.hd-body{display:flex;align-items:center;gap:20px;padding:20px}
.hd-lines{flex:1;display:flex;flex-direction:column;gap:9px}
.hd-l{height:9px;border-radius:5px;background:linear-gradient(90deg,var(--line-solid),transparent)}
.hd-l--title{height:13px;width:82%;background:linear-gradient(90deg,var(--blue-dim),transparent)}
.hd-l--short{width:62%}
.hd-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.hd-chips span{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);border:1px solid var(--line-solid);border-radius:6px;padding:3px 8px}
.hd-chip--gold{color:var(--gold);border-color:rgba(243,180,76,.4);background:rgba(243,180,76,.06)}
.hd-ring{position:relative;width:96px;height:96px;flex-shrink:0;display:grid;place-items:center}
.hd-ring svg{width:96px;height:96px;transform:rotate(-90deg)}
.hd-track{fill:none;stroke:var(--line-solid);stroke-width:6}
.hd-arc{fill:none;stroke:var(--gold);stroke-width:6;stroke-linecap:round;stroke-dasharray:226;stroke-dashoffset:226;filter:drop-shadow(0 0 6px rgba(243,180,76,.5))}
.js .hd-arc{animation:arc 1.5s var(--ease) .7s forwards}
@keyframes arc{to{stroke-dashoffset:18}}
.hd-score{position:absolute;display:flex;flex-direction:column;align-items:center;line-height:1}
.hd-score b{font-family:var(--f-display);font-size:27px;color:var(--gold)}
.hd-score .mono{font-size:9px;color:var(--muted-2);margin-top:3px}
.js .hero-demo{animation:rise .8s var(--ease) .84s both}
.statusline{display:inline-flex;align-items:center;gap:12px;margin-top:40px;padding:11px 18px;border:1px solid var(--line-solid);border-radius:100px;color:var(--muted);background:rgba(10,11,20,.5);flex-wrap:wrap;justify-content:center}
.statusline .sep{color:var(--muted-2)}
.pulse{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(243,180,76,.6);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(243,180,76,.5)}70%{box-shadow:0 0 0 12px rgba(243,180,76,0)}100%{box-shadow:0 0 0 0 rgba(243,180,76,0)}}

/* ---------- trust strip ---------- */
.strip{max-width:100%;padding:26px 0;margin:20px 0 40px;border-block:1px solid var(--line);overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.strip-track{display:flex;gap:34px;white-space:nowrap;width:max-content;font-family:var(--f-mono);font-size:14px;color:var(--muted-2);letter-spacing:.04em;animation:marquee 34s linear infinite}
.strip-track span{opacity:.85}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- pipeline: the agent procedure ---------- */
.pipeline{padding:70px 24px}
.proc{position:relative;max-width:720px;margin:6px auto 0}
.proc-spine{position:absolute;left:19px;top:16px;bottom:34px;width:2px;background:var(--line-solid);border-radius:2px;overflow:hidden}
.proc-fill{position:absolute;left:0;top:0;width:100%;height:0;background:linear-gradient(var(--blue),var(--cyan),var(--gold));box-shadow:0 0 16px var(--blue);transition:height 2.4s cubic-bezier(.33,1,.68,1)}
.proc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.pstep{position:relative;padding-left:54px}
.pdot{position:absolute;left:11px;top:22px;width:18px;height:18px;border-radius:50%;background:var(--ink-2);border:2px solid var(--line-solid);transition:.5s var(--ease);z-index:1}
.pstep.lit .pdot{border-color:var(--blue);background:radial-gradient(circle,var(--blue-2),var(--blue));box-shadow:0 0 0 5px rgba(91,140,255,.12),0 0 18px var(--blue)}
.pcell{border:1px solid var(--line-solid);border-radius:14px;padding:16px 18px;background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);transition:opacity .5s var(--ease),transform .5s var(--ease),border-color .5s,box-shadow .5s}
.js .pstep .pcell{opacity:.5;transform:translateY(8px)}
.pstep.lit .pcell{opacity:1;transform:none;border-color:var(--blue-dim);box-shadow:0 0 0 1px rgba(91,140,255,.18),0 22px 50px -34px rgba(91,140,255,.7)}
.pcell-top{display:flex;align-items:center;gap:11px}
.pnum{font-family:var(--f-mono);font-size:12px;color:var(--blue-2);letter-spacing:.06em}
.pcell-top h3{font-size:17px;margin:0}
.mchip{margin-left:auto;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:100px;border:1px solid var(--line-solid);color:var(--muted)}
.mchip--sonnet{color:var(--blue-2);border-color:rgba(91,140,255,.4);background:rgba(91,140,255,.08)}
.mchip--haiku{color:var(--cyan);border-color:rgba(70,228,196,.35);background:rgba(70,228,196,.07)}
.mchip--rest{color:var(--muted);border-color:var(--line-solid);background:rgba(255,255,255,.02)}
.pcell p{color:var(--muted);font-size:14px;line-height:1.55;margin:10px 0 0}
.pcell b{color:var(--fg);font-weight:600}
.pout{display:inline-block;margin-top:12px;font-family:var(--f-mono);font-size:12px;color:var(--gold);border:1px dashed rgba(243,180,76,.32);border-radius:8px;padding:5px 11px}
.pout--live{color:#7fe3b0;border-color:rgba(70,228,150,.35)}
.ploop{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-family:var(--f-mono);font-size:12px;color:var(--cyan);border:1px solid rgba(70,228,196,.25);border-radius:8px;padding:5px 11px;background:rgba(70,228,196,.05)}

/* before / after */
.transform{display:grid;grid-template-columns:1fr auto 1.35fr;align-items:center;gap:22px;margin-top:60px}
.pcard{border:1px solid var(--line-solid);border-radius:var(--radius);padding:22px;background:var(--panel)}
.pcard--before{opacity:.7}
.pcard--after{border-color:var(--blue-dim);box-shadow:0 0 0 1px rgba(91,140,255,.2),0 30px 70px -40px rgba(91,140,255,.6);background:linear-gradient(180deg,rgba(91,140,255,.05),var(--panel))}
.pcard-tag{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.pcard-tag--win{color:var(--gold)}
.pcard-title{font-family:var(--f-display);font-weight:600;margin-top:12px;line-height:1.25}
.pcard--before .pcard-title{color:var(--muted)}
.pcard-thin{color:var(--muted-2);font-size:14px;margin-top:10px}
.pcard-bul{margin:14px 0 0;padding-left:18px;color:var(--muted);font-size:14px}
.pcard-bul li{margin:4px 0}
.pcard-faq{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:13px;color:var(--muted-2);font-family:var(--f-mono)}
.pcard-score{display:flex;align-items:baseline;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.pcard-score b{font-family:var(--f-display);font-size:30px;color:var(--gold)}
.transform-arrow{color:var(--blue)}

/* ---------- ai search ---------- */
.aisearch{padding:90px 24px}
.fan{border:1px solid var(--line-solid);border-radius:22px;background:radial-gradient(circle at 20% 50%,rgba(91,140,255,.06),transparent 55%),var(--ink-2);padding:10px;overflow:hidden}
.fan-svg{width:100%;height:auto;display:block}
.fan-q rect{fill:rgba(91,140,255,.12);stroke:var(--blue-dim)}
.fan-q text{fill:var(--fg);font-family:"JetBrains Mono",monospace;font-size:12px;text-anchor:middle}
.fan-edges path{fill:none;stroke:url(#edge);stroke-width:1.5;stroke-dasharray:600;stroke-dashoffset:600}
.fan-node rect{fill:var(--panel);stroke:var(--line-solid)}
.fan-node text{fill:var(--muted);font-family:"JetBrains Mono",monospace;font-size:11px;text-anchor:middle;dominant-baseline:middle}
.fan-node.win rect{fill:rgba(243,180,76,.14);stroke:var(--gold)}
.fan-node.win text{fill:var(--gold)}
.aisearch-tags{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:34px}
.tag{font-family:var(--f-mono);font-size:13px;color:var(--muted);border:1px solid var(--line-solid);border-radius:100px;padding:8px 15px;background:rgba(255,255,255,.02)}
.tag--gold{color:var(--gold);border-color:rgba(243,180,76,.4);background:rgba(243,180,76,.06)}

/* ---------- features bento ---------- */
.features{padding:90px 24px}
.bento{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.cell{border:1px solid var(--line-solid);border-radius:var(--radius);padding:28px;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.cell:hover{transform:translateY(-4px);border-color:var(--blue-dim);box-shadow:0 30px 60px -40px rgba(91,140,255,.5)}
.cell--wide{grid-column:span 2}
.cell h3{font-size:20px;margin:16px 0 10px}
.cell p{color:var(--muted);font-size:15px}
.cell-ic{width:44px;height:44px;border-radius:12px;border:1px solid var(--line-solid);background:rgba(91,140,255,.08);position:relative}
.cell-ic::before,.cell-ic::after{content:"";position:absolute;inset:0;margin:auto}
.cell-ic[data-ic="gauge"]::before{width:20px;height:20px;border:2px solid var(--blue);border-bottom-color:transparent;border-radius:50%;transform:rotate(45deg)}
.cell-ic[data-ic="grid"]::before{width:18px;height:18px;background:
  linear-gradient(var(--blue),var(--blue)) 0 0/7px 7px no-repeat,
  linear-gradient(var(--blue),var(--blue)) 11px 0/7px 7px no-repeat,
  linear-gradient(var(--gold),var(--gold)) 0 11px/7px 7px no-repeat,
  linear-gradient(var(--blue),var(--blue)) 11px 11px/7px 7px no-repeat}
.cell-ic[data-ic="spark"]::before{width:6px;height:20px;background:var(--gold);box-shadow:-7px 0 var(--blue),7px 0 var(--blue);border-radius:2px}
.cell-ic[data-ic="shield"]::before{width:16px;height:19px;background:var(--blue);clip-path:polygon(50% 0,100% 22%,100% 60%,50% 100%,0 60%,0 22%)}
.cell-ic[data-ic="link"]::before{width:20px;height:10px;border:2px solid var(--blue);border-radius:10px}
.cell-ic[data-ic="link"]::after{width:14px;height:2px;background:var(--gold)}

/* ---------- how ---------- */
.how{padding:80px 24px}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:s}
.step{border:1px solid var(--line-solid);border-radius:var(--radius);padding:30px 26px;background:var(--panel);position:relative;overflow:hidden}
.step::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--blue),transparent);opacity:.5}
.step-n{font-family:var(--f-mono);font-size:13px;color:var(--blue-2);letter-spacing:.1em}
.step h3{font-size:19px;margin:14px 0 10px}
.step p{color:var(--muted);font-size:15px}

/* ---------- cta ---------- */
.cta{padding:60px 24px 100px}
.proof{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:40px}
.stat{text-align:center;border:1px solid var(--line);border-radius:14px;padding:26px}
.stat b{display:block;font-family:var(--f-display);font-size:clamp(36px,5vw,54px);font-weight:700;line-height:1;background:linear-gradient(150deg,var(--fg),var(--blue-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{color:var(--muted);font-size:14px}
.cta-card{text-align:center;border:1px solid var(--blue-dim);border-radius:26px;padding:clamp(40px,7vw,72px) 24px;
  background:radial-gradient(circle at 50% 0%,rgba(91,140,255,.14),transparent 60%),var(--ink-2)}
.cta-card h2{font-size:clamp(34px,6vw,64px);font-weight:700}
.cta-card p{color:var(--muted);margin:18px auto 30px;max-width:460px}
.cta-card .hero-cta{justify-content:center}

/* ---------- footer ---------- */
.foot{max-width:var(--maxw);margin:0 auto;padding:34px 24px 56px;display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid var(--line);flex-wrap:wrap}
.foot-l{display:flex;flex-direction:column;gap:10px}
.foot-note{font-family:var(--f-mono);font-size:.8em;color:var(--muted-2)}
.foot-credit{font-size:13.5px;color:var(--muted)}
.foot-credit a{color:var(--blue-2);font-weight:600}
.foot-credit a:hover{color:var(--gold);text-decoration:underline}

/* ---------- hero load animation (guaranteed on paint, robust) ---------- */
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.js .hero .eyebrow{animation:rise .7s var(--ease) both}
.js .hero-title .line{animation:rise .75s var(--ease) both}
.js .hero-title .line:nth-child(1){animation-delay:.10s}
.js .hero-title .line:nth-child(2){animation-delay:.20s}
.js .hero-title .line:nth-child(3){animation-delay:.30s}
.js .hero-sub{animation:rise .7s var(--ease) .40s both}
.js .hero-cta{animation:rise .7s var(--ease) .52s both}
.js .statusline{animation:rise .7s var(--ease) .64s both}
.js .hero-proof{animation:rise .7s var(--ease) .74s both}

/* one-time "jolt": the punch word snaps + flashes once after the heading settles */
@keyframes impactPop{
  0%{transform:scale(1) rotate(0);text-shadow:0 0 22px rgba(243,180,76,.26)}
  26%{transform:scale(1.18) rotate(-2.2deg);text-shadow:0 0 36px rgba(243,180,76,.62)}
  52%{transform:scale(.965) rotate(1.4deg);text-shadow:0 0 28px rgba(243,180,76,.4)}
  74%{transform:scale(1.05) rotate(-.6deg)}
  100%{transform:scale(1) rotate(0);text-shadow:0 0 22px rgba(243,180,76,.26)}
}
.hero-title .pop{display:inline-block;transform-origin:center}
.js .hero-title .pop{animation:impactPop .62s cubic-bezier(.34,1.56,.64,1) 1.05s both}

/* ---------- reveal animation (progressive: content is visible without JS) ---------- */
.js [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js [data-reveal].in{opacity:1;transform:none}
.js [data-reveal][data-delay="1"]{transition-delay:.07s}
.js [data-reveal][data-delay="2"]{transition-delay:.14s}
.js [data-reveal][data-delay="3"]{transition-delay:.21s}
.js [data-reveal][data-delay="4"]{transition-delay:.28s}
.js [data-reveal][data-delay="5"]{transition-delay:.35s}

/* ---------- responsive ---------- */
@media(max-width:920px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav[data-open] .nav-links{display:flex;position:absolute;top:64px;left:16px;right:16px;flex-direction:column;gap:2px;
    background:var(--ink-2);border:1px solid var(--line-solid);border-radius:16px;padding:12px}
  .nav[data-open] .nav-links a{padding:12px}
  .agents{grid-template-columns:repeat(2,1fr)}
  .pipe-rail{display:none}
  .bento{grid-template-columns:1fr 1fr}
  .cell--wide{grid-column:span 2}
}
@media(max-width:640px){
  body{font-size:16px}
  .transform{grid-template-columns:1fr;gap:14px}
  .transform-arrow{transform:rotate(90deg);justify-self:center}
  .agents{grid-template-columns:1fr 1fr}
  .bento,.steps,.proof,.effort-grid,.safe-list{grid-template-columns:1fr}
  .safe-head{gap:14px}
  .cell--wide{grid-column:auto}
  .foot{flex-direction:column;text-align:center}
}

/* ---------- effortless section ---------- */
.effort{padding:20px 24px 24px}
.effort-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;max-width:1080px;margin:0 auto}
.ecard{background:var(--panel);border:1px solid var(--line-solid);border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:8px}
.ecard-viz{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  border:1px solid var(--line);border-radius:14px;background:radial-gradient(120% 100% at 50% 0,rgba(91,140,255,.06),transparent 70%)}
.ev{width:92%;height:100%}
.ecard h3{font-size:18px}
.ecard p{color:var(--muted);font-size:14.5px;line-height:1.5}

/* viz 1 · expertise gauge → none */
.g-track{fill:none;stroke:var(--line-solid);stroke-width:10;stroke-linecap:round}
.g-needle line{stroke:var(--gold);stroke-width:4;stroke-linecap:round}
.g-needle circle{fill:var(--gold)}
.g-needle{transform:rotate(-74deg);transform-origin:100px 108px}
.ecard.in .g-needle{animation:needleSwing 1.4s cubic-bezier(.34,1.4,.5,1) both}
.g-min,.g-max{fill:var(--muted-2);font-family:var(--f-mono);font-size:11px}
.g-min{text-anchor:start}.g-max{text-anchor:end}
@keyframes needleSwing{0%{transform:rotate(70deg)}62%{transform:rotate(-84deg)}100%{transform:rotate(-74deg)}}

/* viz 2 · autopilot toggle + self-completing run */
.tg-track{fill:rgba(70,228,196,.14);stroke:var(--cyan);stroke-width:1.5}
.tg-lab{fill:var(--cyan);font-family:var(--f-mono);font-size:12px;font-weight:700;text-anchor:middle;letter-spacing:.08em}
.tg-knob{fill:var(--cyan)}
.ecard.in .tg-knob{animation:knobOn .7s cubic-bezier(.34,1.5,.5,1) both}
@keyframes knobOn{0%{transform:translateX(-56px)}100%{transform:translateX(0)}}
.pb-track{fill:var(--ink-2);stroke:var(--line-solid)}
.pb-fill{fill:var(--blue);transform-box:fill-box;transform-origin:left center}
.ecard.in .pb-fill{animation:fillX 1.3s cubic-bezier(.33,1,.68,1) .25s both}
.pb-check{fill:none;stroke:var(--cyan);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:26;stroke-dashoffset:0}
.ecard.in .pb-check{animation:draw .45s ease 1.35s both}
.pb-lab{fill:var(--muted-2);font-family:var(--f-mono);font-size:10.5px}
@keyframes draw{from{stroke-dashoffset:26}to{stroke-dashoffset:0}}

/* viz 3 · time + cost saved */
.s-lab{fill:var(--muted);font-family:var(--f-mono);font-size:12px}
.s-manual{fill:rgba(243,180,76,.16);stroke:rgba(243,180,76,.32);stroke-width:1;transform-box:fill-box;transform-origin:left center}
.s-agent{fill:var(--blue);transform-box:fill-box;transform-origin:left center}
.ecard.in .s-manual{animation:fillX 1s ease both}
.ecard.in .s-agent{animation:fillX .8s cubic-bezier(.34,1.4,.5,1) .45s both}
.s-cap{fill:var(--muted-2);font-family:var(--f-mono);font-size:10.5px}
@keyframes fillX{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ---------- video ---------- */
.video{padding:58px 24px 26px}
.video-frame{position:relative;max-width:920px;margin:0 auto;aspect-ratio:16/9;border-radius:20px;overflow:hidden;
  border:1px solid var(--line-solid);background:#000;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt{position:absolute;inset:0;cursor:pointer;display:grid;place-items:center}
.yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.72) saturate(1.04);transition:filter .3s var(--ease),transform .5s var(--ease)}
.yt:hover .yt-thumb,.yt:focus-visible .yt-thumb{filter:brightness(.58);transform:scale(1.03)}
.yt-play{position:relative;z-index:2;width:86px;height:86px;border-radius:50%;display:grid;place-items:center;color:#0A0B12;padding-left:6px;
  background:linear-gradient(135deg,#5B8CFF,#7aa0ff);box-shadow:0 12px 44px rgba(91,140,255,.5);transition:transform .25s var(--ease)}
.yt:hover .yt-play,.yt:focus-visible .yt-play{transform:scale(1.08)}
.yt:focus{outline:0}
.yt:focus-visible{outline:2px solid var(--blue-2);outline-offset:4px}

/* ---------- comparison table ---------- */
.compare{padding:66px 24px 26px}
.ctable-wrap{max-width:920px;margin:0 auto;overflow-x:auto;border:1px solid var(--line-solid);border-radius:18px;-webkit-overflow-scrolling:touch}
.ctable{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px}
.ctable th,.ctable td{padding:14px 18px;text-align:center;border-bottom:1px solid var(--line)}
.ctable thead th{font-family:var(--f-display);font-size:15px;color:var(--fg);font-weight:600;border-bottom:1px solid var(--line-solid)}
.ctable tbody th{text-align:left;color:var(--muted);font-weight:500;font-family:var(--f-body);white-space:nowrap}
.ctable td{color:var(--muted)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ct-no{color:var(--muted-2);font-size:16px}
.ct-mid{color:var(--muted-2)}
.ct-yes{color:var(--cyan)!important;font-weight:600}
th.ct-win{background:rgba(91,140,255,.14);color:var(--fg);border-top:2px solid var(--blue);border-top-left-radius:0}
td.ct-win{background:rgba(91,140,255,.06);color:var(--fg);font-weight:600}

/* ---------- safe band ---------- */
.safe{padding:34px 24px}
.safe-card{max-width:920px;margin:0 auto;border:1px solid var(--line-solid);border-radius:20px;padding:clamp(24px,4vw,36px);
  background:radial-gradient(130% 100% at 0 0,rgba(70,228,196,.07),transparent 58%),var(--panel)}
.safe-head{display:flex;gap:18px;align-items:center;margin-bottom:24px}
.safe-badge{flex:0 0 auto;width:54px;height:54px;display:grid;place-items:center;border-radius:15px;color:var(--cyan);
  background:rgba(70,228,196,.1);border:1px solid rgba(70,228,196,.32)}
.safe-head .kicker{margin-bottom:4px}
.safe-head h2{font-size:clamp(20px,3vw,27px)}
.safe-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:18px 30px}
.safe-list li{position:relative;padding-left:28px;color:var(--muted);font-size:14.5px;line-height:1.55}
.safe-list li::before{content:"";position:absolute;left:0;top:6px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle,var(--cyan) 0 38%,transparent 40%);box-shadow:0 0 0 1px rgba(70,228,196,.3)}
.safe-list b{color:var(--fg);font-weight:600}

/* ---------- faq ---------- */
.faq{padding:34px 24px 72px}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{border:1px solid var(--line-solid);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .2s var(--ease)}
.faq-item[open]{border-color:var(--blue-dim)}
.faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;
  font-family:var(--f-display);font-weight:600;font-size:16.5px;color:var(--fg)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-family:var(--f-mono);font-size:24px;color:var(--blue-2);transition:transform .25s var(--ease);line-height:1;flex:0 0 auto}
.faq-item[open] summary{color:var(--blue-2)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-a{padding:0 22px 20px;color:var(--muted);font-size:15px;line-height:1.62}
.faq-a p{max-width:66ch}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
  .js [data-reveal]{opacity:1;transform:none}
  .js .pstep .pcell{opacity:1;transform:none}
  .fan-edges path{stroke-dashoffset:0}
  .hd-arc{stroke-dashoffset:18}
}