/* ============================================================
   ConnGuard — light infographic (restored)
   Soft lavender canvas, navy headings, colored flow lines,
   white signal discs, glassy engine + outcome cards.
   ============================================================ */
:root{
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --ink:#141a2e; --ink-hi:#10172b; --ink2:#46506a; --muted:#8089a1;

  --card:#ffffff;
  --hair:rgba(20,24,46,.08);
  --bg1:#ffffff; --bg2:#ffffff; --band:#f7f8fc;
  --node-bg:#ffffff; --node-border:rgba(20,24,46,.05);
  --node-shadow:0 18px 40px -18px rgba(40,40,90,.30), 0 4px 12px -6px rgba(40,40,90,.16);
  --pill-bg:#ece9fd; --pill-ink:#6d4ef0;

  --indigo:#5b4ef0; --indigo2:#4f6ef7; --link:#3f64f4;

  --c-device:#7c3aed;
  --c-conn:#2f6bf6;
  --c-browser:#1faa55;
  --c-behave:#f3920f;
  --c-allow:#1faa55;
  --c-captcha:#f3920f;
  --c-block:#ef4444;

  --b1:0; --b1draw:0; --b1split:0; --b1wire:0;
  --csig:0; --sigshift:0; --igs:1;
  --beng:0; --b2txt:0; --b2meta:0; --b2draw:0; --b2draw2:0; --b3:0; --b2inop:0;
  --blyr:0; --b3down:0; --camy:450; --engz:0;
  --camx:0; --fit:1;
}

/* ---- automatic night theme (system preference) ---- */
@media (prefers-color-scheme: dark){
  :root{
    --ink:#eef1fb; --ink-hi:#ffffff; --ink2:#b6bed6; --muted:#7c87a3;
    --card:#121728; --hair:rgba(255,255,255,.10);
    --bg1:#06080f; --bg2:#06080f; --band:#0b0f1c;
    --node-bg:#161c30; --node-border:rgba(255,255,255,.07);
    --node-shadow:0 18px 44px -18px rgba(0,0,0,.66), 0 0 0 1px rgba(255,255,255,.02);
    --pill-bg:rgba(124,92,246,.20); --pill-ink:#b9a9ff;
    --indigo:#6d5cff; --indigo2:#5b8bff; --link:#86a0ff;
    --c-device:#a78bfa; --c-conn:#5b8bff; --c-browser:#34d27f; --c-behave:#ffb24d;
    --c-allow:#34d27f; --c-captcha:#ffb24d; --c-block:#ff6b6b;
  }
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--bg2);}
body{
  font-family:var(--font); color:var(--ink);
  background:var(--bg1);
  -webkit-font-smoothing:antialiased;
}

/* ---------- nav (hidden over hero; appears once past it) ---------- */
.nav{position:fixed; inset:0 0 auto 0; height:88px; z-index:60; display:flex; align-items:center; gap:40px; padding:0 clamp(20px,4vw,56px);
  opacity:0; transform:translateY(-12px); pointer-events:none; transition:opacity .35s, transform .35s, background .35s;}
body.in-after .nav{opacity:1; transform:none; pointer-events:auto;}
.brand{display:flex; align-items:center; gap:12px; font-weight:800; font-size:23px; letter-spacing:-.02em; color:var(--ink-hi);}
.brand .logo{width:38px; height:38px; flex:0 0 auto;}
.nav-links{display:flex; gap:38px; margin-left:auto; align-items:center;}
.nav-links a{color:var(--ink2); text-decoration:none; font-size:16px; font-weight:600; opacity:.9; transition:color .2s,opacity .2s;}
.nav-links a:hover{opacity:1; color:var(--ink-hi);}
.nav-burger{display:none; margin-left:auto; width:44px; height:44px; flex-direction:column; justify-content:center; align-items:center; gap:5px; background:none; border:none; cursor:pointer; padding:0;}
.nav-burger span{display:block; width:24px; height:2px; border-radius:2px; background:var(--ink-hi); transition:transform .25s, opacity .25s;}
body.nav-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-burger span:nth-child(2){opacity:0;}
body.nav-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.btn-login{border:1.5px solid var(--hair); background:rgba(255,255,255,.7); color:var(--ink); font-weight:700; font-size:15.5px; padding:11px 22px; border-radius:12px; cursor:pointer; transition:border-color .2s,transform .2s;}
.btn-login:hover{border-color:color-mix(in oklab,var(--indigo) 55%, var(--hair)); transform:translateY(-1px);}

/* ---------- snap hero (tall sticky section; native scroll drives + snaps) ---------- */
.scroll-outer{position:relative; height:460vh; z-index:2;}
.sticky{position:sticky; top:0; height:100vh; height:100dvh; overflow:hidden;}
/* centered dotted-globe backdrop — only on the start screen; bleeds past edges */
.globe-bg{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(144vh,144vw); height:auto; max-width:none; z-index:0; opacity:calc(.7 * var(--globeop, 1)); pointer-events:none;
  -webkit-user-select:none; user-select:none; transition:opacity .25s linear;}
/* live connection points — full-viewport layer, points placed in safe flank zones */
.globe-points{position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:var(--globeop, 1); transition:opacity .25s linear;}
.globe-points.gone{pointer-events:none !important;}
.gp{position:absolute; transform:translate(-50%,-50%); pointer-events:auto; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; gap:7px;
  opacity:0; transition:opacity .8s ease;}
.gp.show{opacity:1;}
.gp-dot{width:12px; height:12px; border-radius:50%; position:relative;
  background:var(--c);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--c) 16%, transparent), 0 0 12px 1px color-mix(in oklab,var(--c) 55%, transparent);}
/* refined "radar blip" — two staggered sonar rings sweeping outward */
.gp-dot::before, .gp-dot::after{content:""; position:absolute; left:50%; top:50%; width:12px; height:12px;
  border-radius:50%; border:1.5px solid var(--c); transform:translate(-50%,-50%) scale(1); opacity:0;
  animation:gpSonar 2.8s cubic-bezier(.22,.61,.36,1) infinite;}
.gp-dot::after{animation-delay:1.4s;}
@keyframes gpSonar{0%{transform:translate(-50%,-50%) scale(.9); opacity:.85;} 80%{opacity:0;} 100%{transform:translate(-50%,-50%) scale(4.4); opacity:0;}}
.gp-label{display:flex; align-items:center; gap:7px; white-space:nowrap;
  background:rgba(255,255,255,.92); border:1px solid var(--hair); border-radius:999px;
  padding:5px 11px 5px 9px; font-size:12.5px; font-weight:700; color:var(--ink2);
  box-shadow:0 10px 24px -14px rgba(40,40,90,.5); backdrop-filter:blur(6px);
  opacity:0; transform:translateY(4px); transition:opacity .2s, transform .2s; pointer-events:none;}
.gp-label .led{width:8px; height:8px; border-radius:50%; background:var(--c); box-shadow:0 0 8px 1px color-mix(in oklab,var(--c) 70%, transparent);}
.gp:hover .gp-label, .gp.sel .gp-label{opacity:1; transform:translateY(-2px);}
.gp.sel .gp-dot{box-shadow:0 0 0 6px color-mix(in oklab,var(--c) 30%, transparent), 0 0 26px 4px color-mix(in oklab,var(--c) 75%, transparent);}
.gp.sel .gp-label{color:var(--ink-hi); border-color:color-mix(in oklab,var(--c) 50%, var(--hair));}
@media (prefers-reduced-motion: reduce){ .gp-dot::before, .gp-dot::after{animation:none;} }
.stage{position:absolute; inset:0; overflow:hidden;}
.canvas{width:2900px; height:900px; position:absolute; left:50%; top:50%; transform-origin:center center; transform:translate(-50%,-50%) scale(var(--fit)) translate(calc((730 - var(--camx)) * 1px), calc((450 - var(--camy, 450)) * 1px));}

/* ---------- atoms ---------- */
.pill{display:inline-flex; align-items:center; gap:8px; white-space:nowrap; background:var(--pill-bg); color:var(--pill-ink); font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; padding:9px 18px; border-radius:999px;}
.h-display{font-weight:800; letter-spacing:-.025em; line-height:1.04; font-size:62px; color:var(--ink-hi); margin:0;}
.grad{color:var(--ink-hi);}
.lede{font-size:20px; line-height:1.55; color:var(--ink2); margin:0; font-weight:450;}

.cta-row{display:flex; gap:16px; align-items:center; justify-content:center;}
.btn{display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-weight:700; font-size:17px; border-radius:14px; padding:15px 26px; border:1.5px solid transparent; transition:transform .2s,box-shadow .2s,background .2s,border-color .2s;}
.btn svg{width:19px; height:19px; transition:transform .2s;}
.btn:hover svg{transform:translateX(4px);}
.btn-primary{color:#fff; border:none; background:linear-gradient(120deg, var(--indigo2), var(--link)); box-shadow:0 14px 30px -10px color-mix(in oklab,var(--link) 65%, transparent);}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 20px 38px -10px color-mix(in oklab,var(--link) 72%, transparent);}
.btn-ghost{color:var(--link); background:rgba(255,255,255,.6); border:1.5px solid color-mix(in oklab,var(--link) 34%, var(--hair));}
.btn-ghost:hover{transform:translateY(-2px); border-color:var(--link); background:var(--card);}

/* ---------- signal discs (icon size adapts to screen via --igs) ---------- */
.sig{position:absolute; width:calc(108px * var(--igs)); height:calc(108px * var(--igs)); transform:translate(-50%, calc(-50% + (var(--sigshift) * 1px))); z-index:6; opacity:var(--csig);}
.sig .disc{width:100%; height:100%; border-radius:50%; background:var(--node-bg); border:1px solid var(--node-border); box-shadow:var(--node-shadow); display:grid; place-items:center; position:relative; transition:transform .25s ease;}
.sig .disc::after{content:""; position:absolute; inset:-7px; border-radius:50%; box-shadow:0 0 0 7px color-mix(in oklab, var(--c) 12%, transparent); opacity:0; transition:opacity .25s;}
.sig:hover .disc{transform:translateY(-4px) scale(1.03);}
.sig:hover .disc::after{opacity:1;}
.sig .disc svg{width:calc(44px * var(--igs)); height:calc(44px * var(--igs)); color:var(--c);}

.sig .meta{position:absolute; left:calc(100% + 20px); top:50%; transform:translateY(-50%); width:200px; opacity:var(--b2meta);}
.sig .meta .t{font-size:17px; font-weight:800; color:var(--ink-hi); letter-spacing:-.01em; white-space:nowrap;}
.sig .meta .d{font-size:14px; color:var(--muted); line-height:1.4; margin-top:4px;}

/* ---------- headers ---------- */
.head{position:absolute; transform:translateX(-50%); text-align:center; z-index:5;}
.b1head{left:720px; top:286px; width:580px;}
.b1head .pill{opacity:var(--b1); transform:translateY(calc((1 - var(--b1)) * 14px));}
.b1head h1{margin:24px 0 0; opacity:var(--b1); transform:translateY(calc((1 - var(--b1)) * 20px)); text-shadow:0 0 18px rgba(247,247,253,.92), 0 0 40px rgba(247,247,253,.7);}
.b1head .lede{margin:24px auto 0; max-width:480px; opacity:var(--b1); transform:translateY(calc((1 - var(--b1)) * 18px)); text-shadow:0 0 14px rgba(247,247,253,.95), 0 0 30px rgba(247,247,253,.7);}
.b1head .cta-row{margin-top:34px; opacity:var(--b1); transform:translateY(calc((1 - var(--b1)) * 18px));}

.b2head{left:1620px; top:128px; width:800px;}
.b2head h2{font-size:58px;}
.b2head .pill{opacity:var(--b2txt); transform:translateY(calc((1 - var(--b2txt)) * 14px));}
.b2head h2{margin:22px 0 0; opacity:var(--b2txt); transform:translateY(calc((1 - var(--b2txt)) * 18px));}
.b2head .lede{margin:22px auto 0; max-width:580px; opacity:var(--b2txt); transform:translateY(calc((1 - var(--b2txt)) * 16px));}

/* ---------- engine card ---------- */
.engine{
  position:absolute; left:1800px; top:279px; width:272px;
  background:var(--card); border:1px solid var(--hair); border-radius:24px;
  box-shadow:0 30px 70px -30px rgba(40,40,90,.42);
  padding:30px 26px 26px; z-index:4; transform-origin:50% 50%;
  opacity:calc(var(--beng) * (1 - var(--engz,0)));
  transform:translateY(calc((1 - var(--beng)) * 16px)) scale(calc(.97 + var(--beng)*.03 + var(--engz,0) * 0.55));
}
.engine .e-ic{width:78px; height:78px; border-radius:20px; margin:0 auto 16px; display:grid; place-items:center;
  background:linear-gradient(150deg, color-mix(in oklab,var(--indigo) 15%, #fff), color-mix(in oklab,var(--c-device) 13%, #fff));}
.engine .e-ic svg{width:42px; height:42px; color:var(--indigo);}
.engine h3{margin:0; text-align:center; font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--ink-hi);}
.engine .e-sub{margin:5px 0 20px; text-align:center; font-size:14.5px; color:var(--muted);}
.engine ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px;}
.engine li{display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600; color:var(--ink2);}
.engine li svg{width:20px; height:20px; flex:0 0 auto;}

.score-tag{position:absolute; left:2072px; top:556px; transform:translateX(-50%); text-align:center; z-index:5; opacity:var(--b2);}
.score-tag .k{font-size:13.5px; font-weight:700; color:var(--muted); line-height:1.3;}
.score-tag .v{font-size:13.5px; font-weight:700; color:var(--muted); line-height:1.3;}

/* ---------- architecture / filter layers (camera pans DOWN here) ---------- */
.layers{position:absolute; left:1936px; top:880px; width:660px;
  transform:translateX(-50%) scale(calc(.66 + .34 * var(--blyr,0))); transform-origin:50% 6%;
  display:flex; flex-direction:column; gap:11px; z-index:4; opacity:var(--blyr,0);
  transition:none;}
.lyr-ip{background:var(--card); border:1px solid var(--hair); border-radius:18px; padding:14px 22px;
  box-shadow:0 18px 40px -26px rgba(40,40,90,.4); display:flex; flex-direction:column; gap:7px;
  transform:translateY(calc((1 - var(--blyr,0)) * 20px));}
.lyr-iprow{display:flex; align-items:center; gap:10px; font-size:16px; color:var(--ink2);}
.lyr-iprow .lk{color:var(--muted); font-weight:600; min-width:78px;}
.lyr-iprow b{color:var(--ink-hi); font-weight:800;}
.risk-tag{margin-left:auto; font-size:12.5px; font-weight:800; color:var(--c-block);
  background:color-mix(in oklab,var(--c-block) 12%, #fff); border:1px solid color-mix(in oklab,var(--c-block) 24%, transparent);
  padding:3px 11px; border-radius:999px;}
.lyr-rail{display:none;}

/* "more below" teaser — ghost rows + label suggesting further checks continue */
.lyr-more{position:relative; margin-top:1px; height:96px; pointer-events:none;
  transform:translateY(calc((1 - var(--blyr,0)) * 26px));}
.lyr-ghost{position:absolute; left:0; right:0; height:58px; border-radius:18px;
  background:var(--card); border:1px solid var(--hair); box-shadow:0 18px 40px -30px rgba(40,40,90,.34);}
.lyr-ghost{top:0; opacity:.6;}
.lyr-ghost.g2{top:14px; transform:scaleX(.94); opacity:.32; z-index:-1;}
.lyr-more::after{content:""; position:absolute; left:-10px; right:-10px; bottom:0; height:74px;
  background:linear-gradient(180deg, transparent, var(--bg2) 78%); border-radius:18px;}
.lyr-more-tag{position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:1;
  display:inline-flex; align-items:center; white-space:nowrap; font-size:13px; font-weight:700; color:var(--muted);
  background:var(--card); border:1px solid var(--hair); border-radius:999px; padding:7px 16px;
  box-shadow:0 10px 26px -16px rgba(40,40,90,.4);}

.lyr-step{position:relative; background:var(--card); border:1px solid var(--hair); border-radius:18px;
  box-shadow:0 18px 40px -28px rgba(40,40,90,.38); overflow:hidden;
  transform:translateY(calc((1 - var(--blyr,0)) * 26px));}
.lyr-step.open{box-shadow:0 26px 60px -30px color-mix(in oklab,var(--c) 45%, rgba(40,40,90,.4));}
.lyr-node{position:absolute; left:-22px; top:38px; width:11px; height:11px; border-radius:50%;
  background:var(--c); box-shadow:0 0 0 4px color-mix(in oklab,var(--c) 16%, transparent);}
.ls-head{display:flex; align-items:center; gap:16px; padding:14px 20px;}
.ls-ic{width:54px; height:54px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab,var(--c) 10%, #fff); border:1px solid color-mix(in oklab,var(--c) 20%, var(--hair));}
.ls-ic svg{width:26px; height:26px; color:var(--c);}
.ls-tt{display:flex; flex-direction:column; gap:1px;}
.ls-n{font-size:14px; font-weight:800; color:var(--c); letter-spacing:.04em;}
.ls-h{font-size:19px; font-weight:800; color:var(--ink-hi); letter-spacing:-.01em;}
.ls-badge{margin-left:auto; font-size:13px; font-weight:800; padding:6px 13px; border-radius:999px;}
.ls-badge.bad{color:var(--c-block); background:color-mix(in oklab,var(--c-block) 11%, #fff); border:1px solid color-mix(in oklab,var(--c-block) 22%, transparent);}
.ls-badge.risk-c{color:var(--c); background:color-mix(in oklab,var(--c) 12%, #fff); border:1px solid color-mix(in oklab,var(--c) 24%, transparent);}
.ls-badge.score-c{color:var(--muted); background:var(--band); border:1px solid var(--hair);}
.ls-chev{width:38px; height:38px; flex:0 0 auto; border-radius:11px; display:grid; place-items:center;
  background:var(--band); border:1px solid var(--hair); color:var(--muted);}
.ls-chev svg{width:18px; height:18px; transition:transform .2s;}
.ls-chev.up svg{transform:rotate(180deg);}

.ls-body{padding:0 20px 16px; border-top:1px solid var(--hair); margin-top:-2px;}
.ls-brow{display:flex; align-items:center; justify-content:space-between; padding:13px 2px 11px;}
.ls-warn{display:flex; align-items:center; gap:9px; font-size:15px; font-weight:800; color:var(--c-block);}
.ls-warn svg{width:18px; height:18px;}
.ls-score{font-size:15px; font-weight:700; color:var(--indigo);}
.ls-score b{color:var(--indigo); font-weight:800;}
.ls-table{display:flex; flex-direction:column;}
.ls-tr{display:grid; grid-template-columns:150px 1fr auto; align-items:center; gap:14px; padding:7px 2px; border-top:1px solid color-mix(in oklab,var(--hair) 60%, transparent);}
.ls-tr:first-child{border-top:none;}
.ls-key{font-size:14.5px; font-weight:700; color:var(--ink2);}
.ls-val{font-size:14.5px; color:var(--muted);}
.ls-st{justify-self:end; font-size:12px; font-weight:800; padding:3px 10px; border-radius:999px; white-space:nowrap;}
.ls-st.sus{color:#c2410c; background:#fff3ea; border:1px solid #ffd9bf;}
.ls-st.mis{color:var(--c-block); background:color-mix(in oklab,var(--c-block) 10%, #fff); border:1px solid color-mix(in oklab,var(--c-block) 20%, transparent);}
.ls-verdict{display:flex; align-items:center; gap:13px; margin-top:12px; padding:12px 16px; border-radius:14px;
  background:color-mix(in oklab,var(--c-block) 6%, #fff); border:1px solid color-mix(in oklab,var(--c-block) 16%, transparent);}
.ls-verdict .lv-label{font-size:14.5px; font-weight:700; color:var(--ink2); margin-right:auto;}
.lv-ic{width:34px; height:34px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; color:var(--c-block);}
.lv-ic svg{width:22px; height:22px;}
.lv-text{display:flex; flex-direction:column; gap:1px; text-align:right;}
.lv-text b{font-size:15.5px; font-weight:800; color:var(--c-block);}
.lv-text span{font-size:13px; color:var(--muted);}

/* observed-FP row on the IP card + highlighted passive TCP fingerprint */
.lyr-iprow .obs{color:var(--c-block); font-weight:700;}
.ls-pcap{margin-top:12px; padding:13px 15px; border-radius:14px;
  background:color-mix(in oklab,var(--c-block) 7%, #fff); border:1px solid color-mix(in oklab,var(--c-block) 24%, transparent);}
.ls-pcap-h{display:flex; align-items:center; gap:9px; font-size:13.5px; font-weight:800; color:var(--c-block);}
.ls-pcap-h svg{width:17px; height:17px;}
.ls-pcap-c{display:block; margin:9px 0 7px; font-family:var(--mono); font-size:14.5px; font-weight:700; letter-spacing:.01em;
  color:#7a1020; background:color-mix(in oklab,var(--c-block) 13%, #fff); border:1px dashed color-mix(in oklab,var(--c-block) 40%, transparent);
  border-radius:9px; padding:9px 12px; overflow-x:auto; white-space:nowrap;}
.ls-pcap-n{font-size:12.5px; color:var(--ink2);}
.ls-pcap-n b{color:var(--c-block); font-weight:800;}

/* ---------- outcome cards ---------- */
/* ---------- outcome: mini-browser showing the Block verdict ---------- */
.out-bw{position:absolute; left:2300px; top:1270px; transform:translateY(-50%); width:380px; z-index:4;
  background:var(--card); border:1px solid var(--hair); border-radius:16px; overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(40,40,90,.46); opacity:var(--b3);}
.obw-bar{display:flex; align-items:center; gap:8px; padding:13px 16px; background:var(--band); border-bottom:1px solid var(--hair);}
.obw-dot{width:11px; height:11px; border-radius:50%; background:color-mix(in oklab,var(--muted) 45%, transparent);}
.obw-url{margin-left:12px; display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--muted);
  background:var(--card); border:1px solid var(--hair); border-radius:8px; padding:5px 12px; flex:1;}
.obw-url svg{width:14px; height:14px; color:var(--muted);}
.obw-body{padding:38px 28px 34px; display:flex; flex-direction:column; align-items:center; text-align:center;
  background:linear-gradient(180deg, color-mix(in oklab,var(--c-block) 7%, var(--card)), var(--card) 70%);}
.obw-ic{width:78px; height:78px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in oklab,var(--c-block) 13%, var(--card)); border:1px solid color-mix(in oklab,var(--c-block) 26%, transparent);}
.obw-ic svg{width:40px; height:40px; color:var(--c-block);}
.obw-t{margin-top:20px; font-size:24px; font-weight:800; letter-spacing:-.02em; color:var(--c-block);}
.obw-d{margin-top:10px; font-size:15px; line-height:1.5; color:var(--ink2);}
.obw-code{margin-top:18px; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--c-block);
  background:color-mix(in oklab,var(--c-block) 11%, var(--card)); border:1px solid color-mix(in oklab,var(--c-block) 24%, transparent);
  border-radius:8px; padding:7px 14px;}

.b2cta{position:absolute; left:2490px; top:1500px; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:16px; z-index:5; opacity:var(--b3);}
.watch{display:flex; align-items:center; gap:9px; color:var(--link); font-weight:700; font-size:16px; cursor:pointer; background:none; border:none;}
.watch svg{width:22px; height:22px;}

/* ---------- connectors ---------- */
.wires{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none; z-index:2;}
.wire{fill:none; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;}
.b1wires{opacity:var(--b1wire);}
.b1wires .trunk{stroke-dashoffset:calc(1 - var(--b1draw));}
.b1wires .branch{stroke-dashoffset:calc(1 - var(--b1split));}
.b2wires .wire-in{stroke-dashoffset:calc(1 - var(--b2draw));}
.b2wires .wire-down{stroke-dashoffset:calc(1 - var(--b3down));}
.b2wires .b3down{opacity:var(--b3down);}
.b2wires .wire-out{stroke-dashoffset:calc(1 - var(--b2draw2));}
.b2wires .b2in{opacity:var(--b2inop);}
.b2wires .b2out{opacity:var(--b2draw2);}

/* ---------- decorative ---------- */
.diamond{position:absolute; width:10px; height:10px; border-radius:2px; transform:rotate(45deg); opacity:.5; z-index:1;}

/* ---------- chrome ---------- */
.hint{position:fixed; left:50%; bottom:30px; transform:translateX(-50%); z-index:55; display:flex; align-items:center; gap:11px; color:var(--muted); font-weight:600; font-size:14px; letter-spacing:.04em; transition:opacity .4s; pointer-events:none;}
.hint .track-mini{width:46px; height:2px; background:var(--hair); border-radius:2px; position:relative; overflow:hidden;}
.hint .track-mini::after{content:""; position:absolute; left:0; top:0; height:100%; width:18px; background:var(--indigo); border-radius:2px; animation:slidehint 1.8s ease-in-out infinite;}
@keyframes slidehint{0%{left:-18px}100%{left:46px}}

.steps{position:fixed; right:clamp(20px,4vw,48px); bottom:32px; z-index:55; display:grid; align-items:end; justify-items:end; transition:opacity .35s, transform .35s;}
body.in-after .steps{opacity:0; transform:translateY(12px); pointer-events:none;}
body.in-after .nav{background:color-mix(in oklab, var(--bg1) 88%, transparent); backdrop-filter:blur(10px); box-shadow:0 1px 0 var(--hair);}
/* all dots stack in the same cell; only the active one shows → a single bar that swaps */
.step-dot{grid-area:1 / 1; display:flex; align-items:center; gap:11px; white-space:nowrap; cursor:pointer; background:none; border:none; color:var(--ink-hi); font-weight:700; font-size:13px; letter-spacing:.04em;
  opacity:0; transform:translateY(6px); pointer-events:none; transition:opacity .35s, transform .35s;}
.step-dot .num{font-variant-numeric:tabular-nums; opacity:1;}
.step-dot .bar{width:54px; height:3px; border-radius:3px; background:var(--indigo); transition:none;}
.step-dot.active{opacity:1; transform:none; pointer-events:auto;}

@media (max-width:760px){
  /* mobile: show hamburger; nav-links become a dropdown */
  .nav-burger{display:flex;}
  .nav-links{position:absolute; top:100%; right:14px; left:14px; flex-direction:column; align-items:stretch; gap:0;
    background:var(--card); border:1px solid var(--hair); border-radius:14px; padding:8px; gap:2px;
    box-shadow:0 24px 50px -24px rgba(0,0,0,.4); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .25s, transform .25s;}
  body.nav-open .nav-links{opacity:1; transform:none; pointer-events:auto;}
  .nav-links a{display:block; padding:13px 14px; border-radius:9px; font-size:16px;}
  .nav-links a:hover{background:var(--band);}
  .nav{gap:0; padding:0 18px;}

  /* the camera frames a tighter window on phones (bigger overall); bump the
     dense text so it stays readable once the scene is scaled to fit */
  .h-display{font-size:64px;}
  .lede{font-size:30px; line-height:1.5;}
  .btn{font-size:25px; padding:18px 30px; border-radius:18px; gap:12px;}
  .btn svg{width:26px; height:26px;}

  .sig .meta{left:calc(100% + 24px); width:230px;}
  .sig .meta .t{font-size:25px;}
  .sig .meta .d{font-size:20px; line-height:1.35;}

  .engine{width:330px;}
  .engine h3{font-size:31px;}
  .engine .e-sub{font-size:19px;}
  .engine li{font-size:21px; gap:14px;}
  .engine li svg{width:26px; height:26px;}
  .engine .e-ic{width:84px; height:84px;}
  .engine .e-ic svg{width:44px; height:44px;}

  .out-bw{width:400px;}
  .obw-t{font-size:28px;}
  .obw-d{font-size:18px; line-height:1.45;}

  .watch{font-size:23px;}
  .watch svg{width:30px; height:30px;}
}
@media (prefers-reduced-motion: reduce){ .hint .track-mini::after{animation:none;} }

/* =====================================================================
   AFTER THE HERO — normal vertical scroll sections
   ===================================================================== */
.after{position:relative; z-index:3;}

/* ---------- "How it works" — light, on-brand process section ---------- */
.proc{
  position:relative; overflow:hidden; isolation:isolate;
  padding:clamp(88px,12vh,150px) clamp(20px,6vw,80px) clamp(80px,11vh,130px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:var(--ink);
  border-top:1px solid var(--hair);
  background:linear-gradient(180deg, #f1f0fb 0%, #f7f7fd 38%, #eef0fb 100%);
}
/* subtle on-brand background: faint grid + soft signal-color blooms */
.proc-bg{position:absolute; inset:0; z-index:-1; overflow:hidden;}
.proc-bloom{position:absolute; border-radius:50%; filter:blur(70px); opacity:.5;}
.proc-bloom.b-a{width:46vw; height:46vw; left:-8vw; top:-10vw;
  background:radial-gradient(circle, color-mix(in oklab,var(--c-device) 22%, transparent), transparent 68%);
  animation:procFloat 22s ease-in-out infinite alternate;}
.proc-bloom.b-b{width:50vw; height:50vw; right:-12vw; bottom:-16vw;
  background:radial-gradient(circle, color-mix(in oklab,var(--c-conn) 20%, transparent), transparent 68%);
  animation:procFloat 26s ease-in-out infinite alternate-reverse;}
.proc-grid{position:absolute; inset:0;
  background-image:linear-gradient(rgba(20,24,46,.04) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(20,24,46,.04) 1px, transparent 1px);
  background-size:58px 58px;
  -webkit-mask-image:radial-gradient(76% 70% at 50% 40%, #000 30%, transparent 84%);
          mask-image:radial-gradient(76% 70% at 50% 40%, #000 30%, transparent 84%);}
@keyframes procFloat{0%{transform:translate3d(0,0,0) scale(1);} 100%{transform:translate3d(4%,3%,0) scale(1.12);}}

.proc-inner{width:100%; max-width:1120px; text-align:center;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--pill-ink); padding:9px 18px; border-radius:999px; background:var(--pill-bg);}
.proc h2{font-size:clamp(34px,4.6vw,58px); line-height:1.05; letter-spacing:-.028em; font-weight:800; margin:24px 0 0; color:var(--ink-hi);}
.proc h2 .accent{background:linear-gradient(100deg,var(--indigo),var(--c-conn)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.proc-desc{max-width:720px; margin:22px auto 0; font-size:clamp(16px,1.5vw,20px); line-height:1.7; color:var(--ink2);}
.proc-desc strong{color:var(--ink-hi); font-weight:700;}

/* process timeline */
.flow{margin:clamp(56px,8vh,84px) auto 0; max-width:1040px; position:relative;
  display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(18px,2.4vw,30px);}
.flow::before{content:""; position:absolute; left:11%; right:11%; top:48px; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--c-device), var(--c-conn), var(--c-browser), var(--c-behave)); opacity:.32;}
.flow::after{content:""; position:absolute; left:11%; top:48px; height:2px; width:78%; border-radius:2px;
  background:linear-gradient(90deg, transparent, color-mix(in oklab,var(--indigo) 90%, #fff) 50%, transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  filter:drop-shadow(0 0 6px color-mix(in oklab,var(--indigo) 55%, transparent));
  animation:flowTravel 3.6s linear infinite;}
@keyframes flowTravel{0%{background-position:-22% 0;} 100%{background-position:122% 0;}}

.pstep{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center;}
.pnode{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  background:var(--node-bg); border:1.5px solid color-mix(in oklab,var(--c) 38%, var(--node-border));
  box-shadow:0 0 0 7px color-mix(in oklab,var(--c) 9%, transparent), var(--node-shadow);
  animation:nodePulse 3.6s ease-in-out infinite;}
.flow .pstep:nth-child(1) .pnode{animation-delay:0s;}
.flow .pstep:nth-child(2) .pnode{animation-delay:.9s;}
.flow .pstep:nth-child(3) .pnode{animation-delay:1.8s;}
.flow .pstep:nth-child(4) .pnode{animation-delay:2.7s;}
@keyframes nodePulse{0%,100%{box-shadow:0 0 0 7px color-mix(in oklab,var(--c) 8%, transparent), var(--node-shadow);} 50%{box-shadow:0 0 0 12px color-mix(in oklab,var(--c) 15%, transparent), 0 22px 44px -18px color-mix(in oklab,var(--c) 55%, transparent);}}
.pnode svg{width:40px; height:40px; color:var(--c);}
.pn{margin:18px 0 0; font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--c);}
.pstep h3{margin:8px 0 0; font-size:19px; font-weight:800; color:var(--ink-hi); letter-spacing:-.01em;}
.pstep p{margin:8px 0 0; font-size:14.5px; line-height:1.55; color:var(--muted); max-width:210px;}

/* trust badges */
.proc-tags{margin:clamp(40px,6vh,60px) auto 0; display:flex; gap:12px; align-items:center; justify-content:center; flex-wrap:wrap;}
.ptag{display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:var(--ink2);
  background:#fff; border:1px solid var(--hair); padding:9px 16px; border-radius:999px; box-shadow:0 6px 16px -12px rgba(40,40,90,.4);}
.ptag svg{width:16px; height:16px; color:var(--muted);}
.ptag-x{color:var(--pill-ink); background:var(--pill-bg); border-color:transparent;}
.ptag-x svg{color:var(--pill-ink);}

.proc-foot{margin:clamp(40px,6vh,60px) auto 0; display:flex; gap:16px; align-items:center; justify-content:center; flex-wrap:wrap;}

.proc .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.proc .reveal.in{opacity:1; transform:none;}

@media (max-width:760px){
  .flow{grid-template-columns:repeat(2,1fr); gap:38px 16px;}
  .flow::before, .flow::after{display:none;}
  .pstep p{max-width:240px;}
}
@media (prefers-reduced-motion: reduce){
  .proc-bloom, .flow::after, .pnode{animation:none;}
  .proc .reveal{opacity:1; transform:none;}
}

/* ---------- 04 comparison (two-column: heading + table) ---------- */
.compare{position:relative; padding:clamp(80px,10vh,128px) clamp(20px,5vw,72px) clamp(80px,11vh,130px);
  display:flex; flex-direction:column; align-items:center; gap:clamp(40px,6vh,64px); border-top:1px solid var(--hair);
  background:var(--bg1);}
.compare .eyebrow{background:none; border:none; padding:0; color:var(--c-conn); letter-spacing:.22em; font-weight:800;}
.compare .reveal{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.compare .reveal.in{opacity:1; transform:none;}

.cmp-top{width:100%; max-width:1180px; display:grid; grid-template-columns:0.85fr 1.15fr; gap:clamp(28px,4vw,64px); align-items:center;}
.cmp-head{text-align:left;}
.cmp-head h2{font-size:clamp(34px,3.6vw,52px); line-height:1.02; letter-spacing:-.03em; font-weight:800; margin:18px 0 0; color:var(--ink-hi);}
.cmp-head h2 .accent{color:var(--c-conn);}
.cmp-head p{margin:22px 0 0; max-width:380px; font-size:16px; line-height:1.7; color:var(--ink2);}

/* comparison table */
.cmp-table{position:relative; background:transparent; border:none; border-radius:22px;
  box-shadow:none; padding:8px 10px;}
.ct-colhl{position:absolute; top:4px; bottom:4px;
  left:41%; width:27%; background:color-mix(in oklab,var(--c-conn) 6%, var(--card));
  border:1px solid color-mix(in oklab,var(--c-conn) 22%, transparent); border-radius:18px; z-index:0;}
.ct-head, .ct-row{display:grid; grid-template-columns:40% 30% 30%; align-items:center; position:relative; z-index:1;}
.ct-head{padding:18px 16px 16px;}
.ct-head span{text-align:center; font-size:18px; font-weight:800; color:var(--muted); letter-spacing:-.01em;}
.ct-head .ct-feat{text-align:left;}
.ct-head .ct-cg{display:inline-flex; align-items:center; justify-content:center; gap:9px; color:var(--c-conn);}
.ct-shield{width:24px; height:24px; fill:var(--c-conn); stroke:none;}
.ct-head .ct-bl{color:var(--muted);}
.ct-row{padding:7px 16px; border-top:1px solid color-mix(in oklab,var(--hair) 65%, transparent);}
.ct-row .ct-feat{text-align:left; font-size:15.5px; font-weight:600; color:var(--ink2); padding:14px 0;}
.ct-cg, .ct-bl{display:flex; justify-content:center;}
.mk-yes, .mk-no{width:30px; height:30px; border-radius:50%; display:grid; place-items:center;}
.mk-yes{background:color-mix(in oklab,var(--c-allow) 15%, #fff); color:var(--c-allow);}
.mk-no{background:color-mix(in oklab,var(--c-block) 12%, #fff); color:var(--c-block);}
.mk-yes svg, .mk-no svg{width:17px; height:17px;}

/* why JS isn't enough — two-column text + method cards */
.cmp-js{width:100%; max-width:1180px; display:grid; grid-template-columns:0.78fr 1.22fr; gap:clamp(28px,4vw,56px);
  align-items:start; padding-top:clamp(28px,4vh,44px); border-top:1px solid var(--hair);}
.jsr-left h4{margin:0; font-size:23px; font-weight:800; letter-spacing:-.02em; color:var(--ink-hi);}
.jsr-left p{margin:16px 0 0; font-size:15px; line-height:1.7; color:var(--ink2);}
.jsr-chips{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
.mcard{display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; text-align:center;
  background:var(--card); border:1px solid var(--hair); border-radius:16px; padding:22px 12px 18px; min-height:128px;
  box-shadow:0 14px 32px -26px rgba(40,40,90,.36);}
.mcard svg{width:30px; height:30px; color:var(--c-conn); stroke:var(--c-conn);}
.mcard b{font-size:14px; font-weight:700; color:var(--ink2); line-height:1.3;}

/* "built for performance and scale" block */
.perf{width:100%; max-width:1180px; background:var(--band); border:1px solid var(--hair);
  border-radius:20px; padding:clamp(26px,3vw,38px) clamp(26px,4vw,52px);}
.perf-title{margin:0 0 22px; font-size:21px; font-weight:800; letter-spacing:-.02em; color:var(--ink-hi);}
.perf-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,5vw,72px);}
.pcard{display:flex; align-items:center; gap:20px;}
.pcard-ic{width:64px; height:64px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center; background:var(--card); border:1px solid var(--hair);}
.pcard-ic svg{width:38px; height:38px;}
.pcard-ic.rust{background:none; border:none; width:64px; height:64px;}
.pcard-ic.rust svg{color:#2a2a2a; stroke:#2a2a2a;}
.rust-logo{width:62px; height:auto; display:block;}
.pcard-ic.ebpf{background:none; border:none; width:64px; height:64px;}
.pcard-ic.ebpf svg{color:#f59e0b; stroke:#2a2a2a;}
.ebpf-logo{width:60px; height:auto; display:block;}
.pcard-tx{display:flex; flex-direction:column; gap:5px;}
.pcard-tx b{font-size:19px; font-weight:800; color:var(--ink-hi); letter-spacing:-.01em;}
.pcard-tx span{font-size:15px; color:var(--muted); line-height:1.5;}
@media (prefers-color-scheme: dark){
  .rust-logo, .ebpf-logo{filter:invert(1) hue-rotate(180deg);}
  /* hero text: dark shadow (the globe is bright behind it), not white halo */
  .b1head h1{text-shadow:0 2px 22px rgba(4,7,16,.92), 0 0 44px rgba(4,7,16,.8);}
  .b1head .lede{text-shadow:0 2px 16px rgba(4,7,16,.95), 0 0 32px rgba(4,7,16,.8);}
  /* passive-fingerprint block: muted dark-red, not bright white */
  .ls-pcap{background:color-mix(in oklab,var(--c-block) 14%, var(--card)); border-color:color-mix(in oklab,var(--c-block) 30%, transparent);}
  .ls-pcap-c{color:#ffc9cf; background:color-mix(in oklab,var(--c-block) 20%, var(--card)); border-color:color-mix(in oklab,var(--c-block) 42%, transparent);}
  .ls-verdict{background:color-mix(in oklab,var(--c-block) 14%, var(--card)); border-color:color-mix(in oklab,var(--c-block) 30%, transparent);}
  .btn-ghost{background:var(--card); border-color:color-mix(in oklab,var(--link) 45%, var(--hair));}
  /* dotted globe backdrop is bright on dark — dim it so the hero text leads */
  .globe-bg{opacity:calc(.28 * var(--globeop, 1));}
  .gp-label{background:rgba(16,22,42,.92); border-color:rgba(255,255,255,.12);}
}

@media (max-width:880px){
  .cmp-top, .cmp-js{grid-template-columns:1fr; gap:28px;}
  .cmp-head{text-align:center;}
  .cmp-head h2 br{display:none;}
  .cmp-head p{max-width:none; margin-left:auto; margin-right:auto;}
  .jsr-chips{grid-template-columns:repeat(4,1fr);}
  .perf-grid{gap:20px 40px;}
}
@media (max-width:560px){
  .perf-grid{grid-template-columns:1fr; gap:18px;}
  .jsr-chips{grid-template-columns:repeat(2,1fr);}
  /* table scrolls horizontally inside itself instead of cramping */
  .cmp-table{overflow-x:auto; -webkit-overflow-scrolling:touch; padding:6px 6px 12px;}
  .ct-head, .ct-row{min-width:660px; grid-template-columns:50% 25% 25%;}
  .ct-colhl{display:block; left:336px; width:165px; right:auto;}
  .ct-head{padding:14px 14px 12px;}
  .ct-head span{font-size:15px;}
  .ct-head .ct-cg{gap:6px;}
  .ct-shield{width:18px; height:18px;}
  .ct-row .ct-feat{font-size:14.5px; padding:13px 0;}
}

/* ---------- 05 pricing ---------- */
.pricing{position:relative; padding:clamp(80px,10vh,128px) clamp(20px,6vw,80px) clamp(80px,10vh,120px);
  display:flex; justify-content:center; border-top:1px solid var(--hair); background:var(--bg1);}
.pricing-inner{width:100%; max-width:760px; text-align:center;}
.pricing .eyebrow{background:none; border:none; padding:0; color:var(--c-conn); letter-spacing:.22em; font-weight:800;}
.pricing h2{font-size:clamp(32px,4.2vw,52px); line-height:1.04; letter-spacing:-.028em; font-weight:800; margin:18px 0 0; color:var(--ink-hi);}
.pricing h2 .accent{color:var(--c-conn);}
.pricing-lede{max-width:560px; margin:20px auto 0; font-size:clamp(16px,1.5vw,19px); line-height:1.65; color:var(--ink2);}
.pricing .reveal{opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}

.price-card{margin:clamp(40px,6vh,56px) auto 0; max-width:480px; text-align:center;
  background:var(--card); border:1px solid var(--hair); border-radius:24px; padding:38px 34px 34px;
  box-shadow:0 30px 70px -34px rgba(40,40,90,.4);}
.pc-tag{display:inline-block; font-size:13px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--pill-ink); background:var(--pill-bg); padding:7px 15px; border-radius:999px;}
.pc-price{display:flex; align-items:baseline; justify-content:center; gap:9px; margin:22px 0 0;}
.pc-price .pc-from{font-size:18px; font-weight:600; color:var(--muted);}
.pc-price b{font-size:60px; font-weight:800; letter-spacing:-.03em; color:var(--ink-hi); line-height:1;}
.pc-price .pc-unit{font-size:18px; font-weight:700; color:var(--ink2);}
.pc-note{margin:14px auto 0; max-width:380px; font-size:14.5px; line-height:1.55; color:var(--muted);}
.pc-list{list-style:none; margin:24px 0 0; padding:0; display:flex; flex-direction:column; gap:13px; text-align:left;}
.pc-list li{display:flex; align-items:center; gap:12px; font-size:15.5px; font-weight:600; color:var(--ink2);}
.pc-list li svg{width:20px; height:20px; flex:0 0 auto; color:var(--c-allow);}
.pc-cta{margin-top:28px; display:inline-flex; text-decoration:none; width:100%; justify-content:center;}

/* ---------- 05 contact ---------- */
.contact{position:relative; padding:clamp(80px,10vh,128px) clamp(20px,6vw,80px) clamp(80px,10vh,120px);
  display:flex; justify-content:center; border-top:1px solid var(--hair);
  background:var(--band);}
.contact-inner{width:100%; max-width:1180px; text-align:center;}
.contact h2{font-size:clamp(32px,4.6vw,58px); line-height:1.05; letter-spacing:-.03em; font-weight:800; margin:22px 0 0; color:var(--ink-hi);}
.contact-lede{max-width:640px; margin:22px auto 0; font-size:clamp(16px,1.5vw,20px); line-height:1.55; color:var(--ink2);}

.contact-grid{margin:clamp(44px,6vh,64px) auto 0; display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:20px; text-align:center;}
.ccard{display:flex; flex-direction:column; align-items:center; gap:0; text-decoration:none; position:relative; overflow:hidden;
  background:linear-gradient(180deg, color-mix(in oklab,var(--c) 4%, var(--card)), var(--card) 70%);
  border:1px solid var(--hair); border-radius:24px; padding:38px 28px 32px;
  box-shadow:0 20px 50px -32px rgba(40,40,90,.4); transition:transform .2s, box-shadow .2s, border-color .2s;}
.ccard:hover{transform:translateY(-4px); border-color:color-mix(in oklab,var(--c) 40%, var(--hair));
  box-shadow:0 30px 60px -30px color-mix(in oklab,var(--c) 40%, rgba(40,40,90,.5));}
.ccard-ic{width:96px; height:96px; border-radius:50%; display:grid; place-items:center; position:relative; z-index:1;
  background:color-mix(in oklab,var(--c) 13%, var(--card));}
.ccard-ic svg{width:42px; height:42px; color:var(--c); stroke:var(--c);}
.ccard-ic.ic-fill svg{fill:var(--c); stroke:none; color:var(--c);}
.ccard-trail{position:absolute; top:30px; right:18%; width:120px; height:84px; color:color-mix(in oklab,var(--c) 55%, var(--hair)); z-index:0; pointer-events:none;}
.ccard-t{margin-top:22px; font-size:27px; font-weight:800; color:var(--ink-hi); letter-spacing:-.02em;}
.ccard-d{margin-top:10px; font-size:16px; color:var(--muted); line-height:1.4;}

/* featured email card — full-width primary button */
.ccard-lg{padding-bottom:30px;}
.ccard-btn{margin-top:26px; width:100%; max-width:420px; display:inline-flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(120deg,#2f6bf6,#3b59f0); color:#fff; font-size:19px; font-weight:700;
  padding:18px 28px; border-radius:14px; box-shadow:0 16px 34px -14px rgba(47,107,246,.6); transition:transform .2s, box-shadow .2s;}
.ccard-btn svg{width:20px; height:20px; color:#fff; transition:transform .2s;}
.ccard-lg:hover .ccard-btn{transform:translateY(-2px); box-shadow:0 22px 42px -14px rgba(47,107,246,.7);}
.ccard-lg:hover .ccard-btn svg{transform:translateX(4px);}

/* small chat cards — circular "go" button */
.ccard-go{margin-top:22px; width:48px; height:48px; border-radius:50%; display:grid; place-items:center;
  background:var(--card); border:1px solid var(--hair); box-shadow:0 8px 20px -12px rgba(40,40,90,.5); transition:transform .2s, border-color .2s;}
.ccard-go svg{width:21px; height:21px; color:var(--c);}
.ccard:hover .ccard-go{transform:translateY(-2px); border-color:color-mix(in oklab,var(--c) 50%, var(--hair));}

/* feature strip */
.contact-feats{margin:clamp(48px,7vh,72px) auto 0; display:grid; grid-template-columns:repeat(3,1fr); gap:0; text-align:left;}
.cfeat{display:flex; align-items:flex-start; gap:14px; padding:6px 26px;}
.cfeat + .cfeat{border-left:1px solid var(--hair);}
.cfeat-ic{width:48px; height:48px; flex:0 0 auto; display:grid; place-items:center; color:var(--c-conn);}
.cfeat-ic svg{width:38px; height:38px;}
.cfeat-tx{display:flex; flex-direction:column; gap:3px;}
.cfeat-tx b{font-size:16px; font-weight:800; color:var(--ink-hi); letter-spacing:-.01em;}
.cfeat-tx span{font-size:14px; color:var(--muted); line-height:1.4;}

.contact .eyebrow{background:none; border:none; padding:0; color:var(--c-conn); letter-spacing:.22em; font-weight:800;}
.contact .reveal{opacity:0; transform:translateY(22px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1);}
.contact .reveal.in{opacity:1; transform:none;}

@media (max-width:760px){
  .jsr-left p{font-size:15px;}
}
@media (max-width:920px){
  .contact-grid{grid-template-columns:1fr 1fr; }
  .ccard-lg{grid-column:1 / -1;}
  .contact-feats{grid-template-columns:repeat(2,1fr); gap:24px 0;}
  .cfeat:nth-child(odd){border-left:none;}
}
@media (max-width:600px){
  .contact-grid{grid-template-columns:1fr 1fr;}
  .ccard-lg{grid-column:1 / -1;}
  .ccard{padding:30px 22px 26px;}
  .ccard-ic{width:80px; height:80px;}
  .ccard-ic svg{width:36px; height:36px;}
  .ccard-t{font-size:23px; margin-top:18px;}
  .ccard-btn{font-size:17px; padding:16px 22px;}
  .contact-feats{grid-template-columns:1fr; gap:20px;}
  .cfeat{border-left:none !important; padding:0 4px;}
}

/* ---------- footer ---------- */
.site-foot{background:var(--band); border-top:1px solid var(--hair); color:var(--ink2);
  padding:clamp(48px,7vh,72px) clamp(20px,6vw,80px) 28px;}
.sf-inner{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:2fr 1fr 1fr; gap:clamp(28px,4vw,56px);}
.sf-logo{display:flex; align-items:center; gap:11px; font-weight:800; font-size:21px; color:var(--ink-hi); letter-spacing:-.01em;}
.sf-tag{margin:16px 0 0; font-size:14.5px; line-height:1.6; color:var(--ink2); max-width:340px;}
.sf-legal{margin:16px 0 0; font-size:13px; line-height:1.6; color:var(--muted); max-width:340px;}
.sf-col h5{margin:0 0 16px; font-size:13px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.sf-col a, .sf-reg{display:block; font-size:14.5px; color:var(--ink2); text-decoration:none; margin-bottom:11px; line-height:1.4;}
.sf-col a{transition:color .2s;}
.sf-col a:hover{color:var(--c-conn);}
.sf-reg{color:var(--muted); font-family:var(--mono); font-size:13px;}
.sf-bottom{max-width:1180px; margin:clamp(36px,5vh,52px) auto 0; padding-top:22px; border-top:1px solid var(--hair);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13px; color:var(--muted);}
@media (max-width:760px){
  .sf-inner{grid-template-columns:1fr 1fr; gap:32px 24px;}
  .sf-brand{grid-column:1 / -1;}
  .sf-tag{max-width:none;}
}
@media (max-width:480px){
  .sf-inner{grid-template-columns:1fr;}
}