/* ============================================================
   CoDash marketing site - codash.co.uk
   Brand: azure #2472E8 · deep #143A8F · ink #1E2140 · night #0E1124
   Space Grotesk display · Inter body · JetBrains Mono data
   ============================================================ */

:root{
  --azure:#2472E8;
  --azure-bright:#4D93FF;
  --deep:#143A8F;
  --ink:#1E2140;
  --slate:#5B6577;
  --mist:#F6F7FB;
  --line:#E7E9F1;
  --night:#0E1124;
  --white:#FFFFFF;

  /* semantic (light) */
  --bg:var(--mist);
  --surface:#FFFFFF;
  --surface-2:#FDFDFF;
  --text:var(--ink);
  --text-2:var(--slate);
  --border:var(--line);
  --border-strong:#D9DDEA;
  --link:var(--azure);
  --accent:var(--azure);
  --accent-soft:#E8F0FE;
  --accent-soft-2:#F1F6FF;
  --shadow:0 1px 2px rgba(30,33,64,.04), 0 12px 32px -12px rgba(20,58,143,.14);
  --shadow-lg:0 2px 4px rgba(30,33,64,.05), 0 32px 64px -24px rgba(20,58,143,.22);
  --ok:#1F9D57;
  --warn:#C77414;

  /* night-band internals (fixed, both themes) */
  --n-surface:#171B38;
  --n-border:#262B52;
  --n-text:#EBEEFA;
  --n-text-2:#9AA3C7;

  --font-display:"Space Grotesk","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  --font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
  --wrap:1160px;
}

@media (prefers-color-scheme: dark){
  :root{
    --bg:#0B0E1E;
    --surface:#141834;
    --surface-2:#171C3C;
    --text:#EBEEFA;
    --text-2:#9AA3C7;
    --border:#242A52;
    --border-strong:#2E3560;
    --link:var(--azure-bright);
    --accent:var(--azure-bright);
    --accent-soft:#1B2450;
    --accent-soft-2:#161E44;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.5);
    --shadow-lg:0 2px 4px rgba(0,0,0,.35), 0 32px 64px -24px rgba(0,0,0,.6);
    --ok:#3DBE79;
    --warn:#E09A3E;
  }
}

/* ---------- reset & base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:84px; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; font-family:var(--font-body); font-size:16px; line-height:1.6;
  color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
a{ color:var(--link); text-decoration:none; }
a:hover{ text-decoration:underline; text-underline-offset:3px; }
h1,h2,h3,h4{ font-family:var(--font-display); letter-spacing:-.02em; line-height:1.12; margin:0; color:var(--text); }
p{ margin:0; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
::selection{ background:var(--azure); color:#fff; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding-inline:clamp(20px,5vw,48px); }
.skip{
  position:absolute; left:-9999px; top:0; z-index:200; background:var(--azure); color:#fff;
  padding:10px 18px; border-radius:0 0 10px 0; font-weight:600;
}
.skip:focus{ left:0; }

/* ---------- shared type ---------- */
.eyebrow{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent); font-weight:500; display:flex; align-items:center; gap:12px;
}
.eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent); border-radius:2px; flex:none; }
.sec-h{ font-size:clamp(28px,4vw,44px); font-weight:700; margin-top:14px; text-wrap:balance; }
.sec-sub{ color:var(--text-2); font-size:clamp(16px,1.6vw,18px); margin-top:14px; max-width:58ch; }
.sec-head{ margin-bottom:clamp(32px,5vw,56px); }

section{ padding-block:clamp(64px,9vw,120px); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.01em;
  padding:13px 24px; border-radius:12px; border:1px solid transparent;
  cursor:pointer; transition:transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn:hover{ text-decoration:none; transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:var(--azure); color:#fff; box-shadow:0 8px 20px -8px rgba(36,114,232,.55); }
.btn-primary:hover{ background:#1E63D0; box-shadow:0 12px 26px -8px rgba(36,114,232,.6); }
.btn-ghost{ background:transparent; color:var(--text); border-color:var(--border-strong); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }
.btn-onnight{ background:rgba(255,255,255,.06); color:var(--n-text); border-color:rgba(255,255,255,.18); }
.btn-onnight:hover{ border-color:var(--azure-bright); color:#fff; background:rgba(77,147,255,.12); }
.btn .arr{ transition:transform .16s ease; }
.btn:hover .arr{ transform:translateX(3px); }
.btn-lg{ padding:16px 30px; font-size:17px; border-radius:14px; }

/* ---------- header ---------- */
.site-head{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background .25s ease;
}
.site-head.scrolled{ border-bottom-color:var(--border); }
.site-head .bar{ display:flex; align-items:center; justify-content:space-between; gap:20px; height:68px; }
.nav-links{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav-links a{
  display:block; padding:8px 14px; border-radius:10px; color:var(--text-2);
  font-weight:500; font-size:14.5px;
}
.nav-links a:hover{ color:var(--text); background:color-mix(in srgb, var(--accent) 9%, transparent); text-decoration:none; }
.head-ctas{ display:flex; align-items:center; gap:10px; }
.head-ctas .btn{ padding:9px 18px; font-size:14px; }
.nav-burger{
  display:none; background:none; border:1px solid var(--border-strong); border-radius:10px;
  width:42px; height:42px; place-items:center; color:var(--text); cursor:pointer;
}

/* ---------- logo lockup ---------- */
.codash-logo{
  font-family:var(--font-display); font-weight:700; letter-spacing:-.03em; line-height:1;
  display:inline-flex; align-items:center; font-size:24px; color:var(--text);
}
.codash-logo:hover{ text-decoration:none; }
.codash-logo .co{ color:var(--azure); }
.codash-logo .dash{ color:var(--text); }
.codash-logo .pulse{ width:2.15em; height:1em; margin-left:.26em; overflow:visible; flex:none; }
.codash-logo .pulse path{
  fill:none; stroke:url(#codashPulse); stroke-width:6; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100; animation:codash-flow 2.6s ease-in-out infinite;
}
.on-night .codash-logo .dash{ color:#fff; }
.on-night .codash-logo .pulse path{ stroke:url(#codashPulseDark); }
@media (prefers-color-scheme: dark){
  .codash-logo .pulse path{ stroke:url(#codashPulseDark); }
}
.codash-logo--under{ flex-direction:column; align-items:flex-start; gap:.06em; }
.codash-logo--under .word{ display:inline-flex; }
.codash-logo--under .pulse{ width:100%; height:.42em; margin:0; }
@keyframes codash-flow{ 0%{stroke-dashoffset:100} 45%,55%{stroke-dashoffset:0} 100%{stroke-dashoffset:-100} }
@media (prefers-reduced-motion:reduce){
  .codash-logo .pulse path{ animation:none; stroke-dashoffset:0; }
}

/* ============================================================
   HERO - night surface in both themes
   ============================================================ */
.hero{
  position:relative; background:var(--night); color:var(--n-text); overflow:hidden;
  padding-block:clamp(76px,10vw,140px) 0;
}
.hero::before{ /* radial glow */
  content:""; position:absolute; inset:-20% -10% auto; height:90%;
  background:
    radial-gradient(52% 60% at 72% 18%, rgba(36,114,232,.34), transparent 68%),
    radial-gradient(40% 48% at 12% 62%, rgba(20,58,143,.45), transparent 70%);
  pointer-events:none;
}
.hero::after{ /* dot grid */
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(rgba(122,140,200,.16) 1px, transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  mask-image:linear-gradient(to bottom, rgba(0,0,0,.9), transparent 78%);
  pointer-events:none;
}
.hero > .wrap{ position:relative; z-index:2; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(32px,5vw,72px); align-items:center; }

.hero-copy .eyebrow{ color:var(--azure-bright); }
.hero-copy .eyebrow::before{ background:var(--azure-bright); }
.hero h1{
  color:#fff; font-size:clamp(38px,5.6vw,66px); font-weight:700; letter-spacing:-.03em;
  margin-top:20px; text-wrap:balance;
}
.hero h1 .hl{
  color:var(--azure-bright);
  background:linear-gradient(120deg,#6AA8FF,#2472E8);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}
.hero-sub{ color:var(--n-text-2); font-size:clamp(16.5px,1.8vw,19px); margin-top:22px; max-width:52ch; }
.hero-ctas{ display:flex; flex-wrap:wrap; gap:14px; margin-top:36px; }

.demo-chip{
  margin-top:26px; display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px 14px;
  padding:10px 16px; border:1px solid rgba(122,140,200,.3); border-radius:12px;
  background:rgba(23,27,56,.6); font-size:13px; color:var(--n-text-2);
}
.demo-chip .seg{ white-space:nowrap; }
.demo-chip .dot{ width:8px; height:8px; border-radius:50%; background:#3DBE79; box-shadow:0 0 0 4px rgba(61,190,121,.18); flex:none; }
.demo-chip code{ font-family:var(--font-mono); font-size:12.5px; color:#CFE0FF; background:rgba(77,147,255,.12); padding:2px 8px; border-radius:6px; }

/* big background pulse line across hero */
.hero-pulse{ position:absolute; left:0; right:0; bottom:16%; z-index:1; opacity:.5; pointer-events:none; }
.hero-pulse svg{ width:100%; height:120px; overflow:visible; }
.hero-pulse path{
  fill:none; stroke:url(#codashPulseWide); stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:100; stroke-dashoffset:100; animation:codash-flow 7s ease-in-out infinite;
}
@media (prefers-reduced-motion:reduce){ .hero-pulse path{ animation:none; stroke-dashoffset:0; } }

/* hero stats strip */
.hero-stats{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:clamp(20px,4vw,54px);
  margin-top:clamp(48px,6vw,80px); padding:26px 0 30px;
  border-top:1px solid rgba(122,140,200,.22);
}
.hstat .n{ font-family:var(--font-mono); font-size:22px; color:#fff; }
.hstat .n b{ color:var(--azure-bright); font-weight:500; }
.hstat .l{ font-size:12.5px; color:var(--n-text-2); letter-spacing:.04em; margin-top:2px; }

/* ============================================================
   Browser-frame mockups (all CSS, no screenshots)
   ============================================================ */
.frame{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); overflow:hidden; font-size:11.5px; line-height:1.4;
}
.hero .frame{ background:var(--n-surface); border-color:var(--n-border); color:var(--n-text); }
.frame-bar{
  display:flex; align-items:center; gap:8px; padding:10px 14px;
  border-bottom:1px solid var(--border); background:var(--surface-2);
}
.hero .frame-bar{ border-color:var(--n-border); background:rgba(255,255,255,.03); }
.frame-bar .d{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
.hero .frame-bar .d{ background:#33395F; }
.frame-bar .url{
  margin-left:8px; flex:1; max-width:260px; font-family:var(--font-mono); font-size:10px;
  color:var(--text-2); background:var(--bg); border:1px solid var(--border);
  border-radius:7px; padding:3.5px 10px; display:flex; align-items:center; gap:6px;
}
.hero .frame-bar .url{ background:rgba(14,17,36,.55); border-color:#2A3057; color:var(--n-text-2); }
.frame-bar .url::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
.frame-body{ padding:16px; }

/* --- hero dashboard mock --- */
.mock-dash{ display:grid; grid-template-columns:120px 1fr; min-height:328px; }
.mock-side{
  border-right:1px solid var(--n-border); padding:14px 10px; display:flex; flex-direction:column; gap:3px;
  background:rgba(14,17,36,.4);
}
.mock-side .mlogo{ font-family:var(--font-display); font-weight:700; font-size:13px; margin:0 4px 12px; letter-spacing:-.02em; color:#fff; }
.mock-side .mlogo .co{ color:var(--azure-bright); }
.mnav{ display:flex; align-items:center; gap:7px; padding:5.5px 8px; border-radius:7px; color:var(--n-text-2); font-size:10.5px; }
.mnav svg{ width:11px; height:11px; flex:none; }
.mnav.on{ background:rgba(36,114,232,.28); color:#fff; }
.mock-main{ padding:14px; display:flex; flex-direction:column; gap:10px; }
.mock-hello{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.mock-hello .hi{ font-family:var(--font-display); font-weight:600; font-size:14px; color:#fff; letter-spacing:-.01em; }
.mock-hello .date{ font-family:var(--font-mono); font-size:9px; color:var(--n-text-2); }
.mock-cards{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.mcard{
  background:rgba(255,255,255,.045); border:1px solid var(--n-border); border-radius:11px; padding:11px 12px;
}
.mcard .t{ font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--n-text-2); font-family:var(--font-mono); }
.mcard .big{ font-family:var(--font-display); font-weight:700; font-size:19px; color:#fff; margin-top:5px; }
.mcard .sm{ font-size:10px; color:var(--n-text-2); margin-top:2px; }
.mcard .ok{ color:#3DBE79; }
.spark{ display:flex; align-items:flex-end; gap:3px; height:34px; margin-top:8px; }
.spark i{ flex:1; border-radius:2.5px 2.5px 0 0; background:linear-gradient(to top,#1D3E85,#4D93FF); opacity:.9; }
.avrow{ display:flex; margin-top:8px; }
.av{
  width:20px; height:20px; border-radius:50%; border:2px solid var(--n-surface);
  display:grid; place-items:center; font-size:7.5px; font-weight:700; color:#fff; margin-left:-5px;
  font-family:var(--font-display);
}
.av:first-child{ margin-left:0; }
.av.more{ background:#2B3160; font-size:7px; }
.mock-feeditem{
  display:flex; gap:9px; background:rgba(255,255,255,.045); border:1px solid var(--n-border);
  border-radius:11px; padding:10px 12px; align-items:flex-start;
}
.mock-feeditem .txt{ color:var(--n-text-2); font-size:10.5px; }
.mock-feeditem .txt b{ color:#fff; font-weight:600; }
.mock-feeditem .reacts{ display:flex; gap:5px; margin-top:6px; }
.mock-feeditem .reacts span{
  font-size:9px; background:rgba(36,114,232,.18); border:1px solid rgba(77,147,255,.28);
  border-radius:999px; padding:1.5px 7px; color:#CFE0FF;
}

/* hero frame placement */
.hero-visual{ position:relative; }
.hero-visual .frame{ transform:rotate(.6deg); }
.hero-visual .float-kudos{
  position:absolute; right:-14px; bottom:-24px; width:min(240px,78%);
  background:var(--n-surface); border:1px solid var(--n-border); border-radius:14px;
  box-shadow:0 24px 48px -16px rgba(0,0,0,.55); padding:12px 14px; font-size:11px;
  transform:rotate(-1.4deg);
}
.float-kudos .fk-head{ display:flex; align-items:center; gap:8px; }
.float-kudos .fk-head .emoji{ font-size:16px; }
.float-kudos .fk-head b{ color:#fff; font-family:var(--font-display); font-size:11.5px; }
.float-kudos p{ color:var(--n-text-2); margin-top:5px; font-size:10.5px; }

/* generic avatar colors */
.av-1{ background:#2472E8; } .av-2{ background:#7C4DD8; } .av-3{ background:#0F8B8D; }
.av-4{ background:#C7532F; } .av-5{ background:#B03A72; } .av-6{ background:#4E7A1F; }

/* ============================================================
   Feature story sections
   ============================================================ */
.story{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,6vw,84px); align-items:center; }
.story + .story{ margin-top:clamp(72px,10vw,128px); }
.story.flip .story-copy{ order:2; }
.story.flip .story-visual{ order:1; }
.story h3{ font-size:clamp(24px,3vw,34px); font-weight:700; margin-top:14px; text-wrap:balance; }
.story .lead{ color:var(--text-2); margin-top:14px; font-size:16.5px; }
.story .num{ font-family:var(--font-mono); font-size:12px; color:var(--accent); letter-spacing:.18em; }
.featlist{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:11px; }
.featlist li{ display:flex; gap:11px; align-items:flex-start; font-size:15px; color:var(--text-2); }
.featlist li b{ color:var(--text); font-weight:600; }
.featlist .tick{
  flex:none; width:19px; height:19px; margin-top:2.5px; border-radius:6px;
  background:var(--accent-soft); color:var(--accent); display:grid; place-items:center;
}
.featlist .tick svg{ width:11px; height:11px; }

.story-visual{ position:relative; }
.story-visual::before{
  content:""; position:absolute; inset:12% -6% -8% 10%;
  background:radial-gradient(60% 60% at 50% 50%, color-mix(in srgb, var(--azure) 16%, transparent), transparent 72%);
  z-index:0; pointer-events:none;
}
.story-visual .frame{ position:relative; z-index:1; }

/* --- time-off calendar mock --- */
.mock-cal .cal-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.mock-cal .cal-head b{ font-family:var(--font-display); font-size:13px; color:var(--text); letter-spacing:-.01em; }
.mock-cal .cal-head .mono{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-2); }
.calgrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.calgrid .dow{
  font-family:var(--font-mono); font-size:8.5px; color:var(--text-2); text-align:center;
  text-transform:uppercase; letter-spacing:.08em; padding-bottom:3px;
}
.day{
  aspect-ratio:1/.82; border:1px solid var(--border); border-radius:7px;
  font-size:9.5px; color:var(--text-2); padding:4px 5px; background:var(--surface-2);
  position:relative;
}
.day.mut{ opacity:.38; }
.day.bh{ background:var(--bg); border-style:dashed; }
.day.bh::after{ content:"BH"; position:absolute; right:4px; bottom:3px; font-family:var(--font-mono); font-size:6.5px; color:var(--text-2); }
.day.sel{
  background:linear-gradient(135deg,var(--azure),#1E63D0); border-color:transparent; color:#fff;
}
.day.sel-start{ border-radius:7px 3px 3px 7px; }
.day.sel-mid{ border-radius:3px; }
.day.sel-end{ border-radius:3px 7px 7px 3px; }
.day.sel .half{ position:absolute; right:4px; bottom:3px; font-family:var(--font-mono); font-size:6.5px; opacity:.85; }
.day.away::before{
  content:""; position:absolute; left:5px; right:5px; bottom:4px; height:3.5px; border-radius:2px;
  background:color-mix(in srgb, var(--warn) 65%, transparent);
}
.cal-footer{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; align-items:center; }
.chip{
  display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:4px 11px;
  font-size:10px; font-weight:500; border:1px solid var(--border);
  background:var(--surface-2); color:var(--text-2);
}
.chip .sw{ width:8px; height:8px; border-radius:3px; flex:none; }
.chip-cap{ border-color:color-mix(in srgb, var(--ok) 40%, transparent); color:var(--ok); background:color-mix(in srgb, var(--ok) 9%, transparent); }
.capbar{ margin-top:12px; }
.capbar .lbl{ display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:9px; color:var(--text-2); margin-bottom:5px; }
.capbar .track{ height:7px; border-radius:99px; background:var(--bg); border:1px solid var(--border); overflow:hidden; }
.capbar .fill{ height:100%; width:76%; border-radius:99px; background:linear-gradient(90deg,var(--azure-bright),var(--azure)); }

/* --- feed / kudos mock --- */
.mock-feed{ display:flex; flex-direction:column; gap:10px; }
.fcard{ border:1px solid var(--border); border-radius:12px; padding:12px 14px; background:var(--surface-2); }
.fcard .fhead{ display:flex; align-items:center; gap:9px; }
.fcard .fhead .who b{ color:var(--text); font-weight:600; font-size:11.5px; }
.fcard .fhead .who span{ display:block; color:var(--text-2); font-size:9.5px; }
.fcard .av{ width:26px; height:26px; margin:0; border:none; font-size:9px; }
.fcard p{ color:var(--text-2); font-size:11px; margin-top:8px; }
.fcard p b{ color:var(--text); }
.fcard .tag{
  margin-left:auto; font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); background:var(--accent-soft); border-radius:6px; padding:2.5px 7px;
}
.fcard .reacts{ display:flex; gap:6px; margin-top:9px; }
.fcard .reacts span{
  font-size:10px; border:1px solid var(--border); background:var(--surface); border-radius:999px; padding:2px 8px; color:var(--text-2);
}
.fcard .reacts span.on{ border-color:color-mix(in srgb,var(--azure) 45%,transparent); background:var(--accent-soft); color:var(--accent); }
.fcard.celebrate{ position:relative; overflow:hidden; border-color:color-mix(in srgb,var(--azure) 30%,var(--border)); }
.fcard.celebrate::before{
  content:""; position:absolute; inset:0 0 auto; height:44px; opacity:.5; pointer-events:none;
  background:
    radial-gradient(circle 3px at 12% 30%, var(--azure-bright) 98%, transparent),
    radial-gradient(circle 2px at 30% 60%, #F5B83D 98%, transparent),
    radial-gradient(circle 2.5px at 52% 25%, #E4604E 98%, transparent),
    radial-gradient(circle 2px at 68% 55%, var(--azure) 98%, transparent),
    radial-gradient(circle 2.5px at 85% 30%, #3DBE79 98%, transparent),
    radial-gradient(circle 2px at 94% 62%, #B03A72 98%, transparent);
}
.pollrow{ margin-top:8px; display:grid; gap:5px; }
.pollrow .opt{ position:relative; border:1px solid var(--border); border-radius:8px; padding:5px 9px; font-size:10.5px; color:var(--text-2); overflow:hidden; }
.pollrow .opt i{ position:absolute; inset:0; background:var(--accent-soft); z-index:0; font-style:normal; }
.pollrow .opt span{ position:relative; z-index:1; display:flex; justify-content:space-between; }
.pollrow .opt span b{ font-family:var(--font-mono); font-weight:500; font-size:9.5px; color:var(--accent); }

/* --- performance mock --- */
.mock-perf{ display:grid; gap:10px; }
.goal{ border:1px solid var(--border); border-radius:11px; padding:11px 13px; background:var(--surface-2); }
.goal .g-top{ display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.goal .g-top b{ font-size:11.5px; color:var(--text); font-weight:600; }
.goal .g-top .pct{ font-family:var(--font-mono); font-size:10px; color:var(--accent); }
.goal .track{ height:6px; border-radius:99px; background:var(--bg); border:1px solid var(--border); margin-top:8px; overflow:hidden; }
.goal .fill{ height:100%; border-radius:99px; background:linear-gradient(90deg,var(--azure-bright),var(--azure)); }
.goal .meta{ font-family:var(--font-mono); font-size:8.5px; color:var(--text-2); margin-top:6px; }
.oneone{ border:1px solid var(--border); border-radius:11px; padding:11px 13px; background:var(--surface-2); }
.oneone .o-head{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--text); font-weight:600; }
.oneone .o-head .when{ margin-left:auto; font-family:var(--font-mono); font-size:9px; color:var(--text-2); font-weight:400; }
.oneone ul{ list-style:none; margin:8px 0 0; padding:0; display:grid; gap:5px; }
.oneone li{ display:flex; gap:7px; font-size:10.5px; color:var(--text-2); align-items:center; }
.oneone li::before{ content:""; width:6px; height:6px; border-radius:2px; background:var(--accent); opacity:.55; flex:none; }
.oneone li.done{ text-decoration:line-through; opacity:.55; }

/* ============================================================
   Bento - everything else
   ============================================================ */
.bento{ display:grid; grid-template-columns:repeat(12,1fr); gap:14px; margin-top:clamp(32px,5vw,52px); }
.bcard{
  grid-column:span 4; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:22px 22px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden;
  transition:transform .18s ease, border-color .18s ease;
}
.bcard:hover{ transform:translateY(-3px); border-color:color-mix(in srgb, var(--azure) 38%, var(--border)); }
.bcard.w6{ grid-column:span 6; }
.bcard .bico{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:14px;
}
.bcard .bico svg{ width:19px; height:19px; }
.bcard h4{ font-size:16.5px; font-weight:600; letter-spacing:-.015em; }
.bcard p{ color:var(--text-2); font-size:13.8px; margin-top:7px; line-height:1.55; }
.bcard .mono-tag{
  position:absolute; top:18px; right:18px; font-family:var(--font-mono); font-size:9px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--text-2); opacity:.7;
}

/* ============================================================
   Privacy - night band
   ============================================================ */
.privacy{ background:var(--night); color:var(--n-text); position:relative; overflow:hidden; }
.privacy::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(46% 60% at 84% 8%, rgba(36,114,232,.22), transparent 70%),
    radial-gradient(40% 52% at 8% 92%, rgba(20,58,143,.3), transparent 70%);
  pointer-events:none;
}
.privacy > .wrap{ position:relative; }
.privacy .eyebrow{ color:var(--azure-bright); } .privacy .eyebrow::before{ background:var(--azure-bright); }
.privacy .sec-h{ color:#fff; }
.privacy .sec-sub{ color:var(--n-text-2); }
.priv-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center; }

/* the k-gate diagram */
.gate{ display:grid; gap:12px; }
.gate-card{
  background:var(--n-surface); border:1px solid var(--n-border); border-radius:14px; padding:16px 18px;
}
.gate-card .g-head{ display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--n-text-2); }
.gate-card .g-head .lock{ width:15px; height:15px; color:var(--azure-bright); }
.gate-card .g-body{ margin-top:12px; }
.gate-ok .trend{ display:flex; align-items:flex-end; gap:5px; height:52px; }
.gate-ok .trend i{ flex:1; border-radius:3px 3px 0 0; background:linear-gradient(to top,#1D3E85,#4D93FF); }
.gate-ok .g-meta{ display:flex; justify-content:space-between; margin-top:9px; font-family:var(--font-mono); font-size:9.5px; color:var(--n-text-2); }
.gate-ok .g-meta b{ color:#3DBE79; font-weight:500; }
.gate-no{ border-style:dashed; border-color:#343B6B; }
.gate-no .blurred{
  filter:blur(7px); opacity:.45; user-select:none; pointer-events:none;
  display:flex; align-items:flex-end; gap:5px; height:52px;
}
.gate-no .blurred i{ flex:1; border-radius:3px; background:#3A4278; }
.gate-no .g-msg{
  margin-top:-34px; position:relative; text-align:center; font-size:12px; color:var(--n-text);
  background:rgba(14,17,36,.82); border:1px solid var(--n-border); border-radius:9px;
  padding:8px 12px; backdrop-filter:blur(2px);
}
.gate-no .g-msg code{ font-family:var(--font-mono); font-size:10.5px; color:#CFE0FF; }
.priv-points{ list-style:none; margin:26px 0 0; padding:0; display:grid; gap:16px; }
.priv-points li{ display:flex; gap:14px; }
.priv-points .pico{
  flex:none; width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:rgba(77,147,255,.13); color:var(--azure-bright); border:1px solid rgba(77,147,255,.22);
}
.priv-points .pico svg{ width:17px; height:17px; }
.priv-points b{ display:block; color:#fff; font-family:var(--font-display); font-weight:600; font-size:15.5px; letter-spacing:-.01em; }
.priv-points p{ color:var(--n-text-2); font-size:13.8px; margin-top:3px; }

/* ============================================================
   Built for 20–200
   ============================================================ */
.fit-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:clamp(30px,5vw,48px); }
.fit-card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--shadow);
}
.fit-card .fnum{ font-family:var(--font-mono); font-size:11px; color:var(--accent); letter-spacing:.15em; }
.fit-card h4{ font-size:19px; font-weight:600; margin-top:10px; letter-spacing:-.015em; }
.fit-card p{ color:var(--text-2); font-size:14.5px; margin-top:9px; }

/* ============================================================
   Pricing
   ============================================================ */
.pricing{ background:linear-gradient(to bottom, transparent, color-mix(in srgb, var(--azure) 4%, var(--bg)) 30%, transparent); }
.tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; align-items:stretch; }
.tier{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  padding:30px 28px; display:flex; flex-direction:column; box-shadow:var(--shadow); position:relative;
}
.tier .tname{ font-family:var(--font-display); font-weight:700; font-size:20px; letter-spacing:-.02em; }
.tier .tdesc{ color:var(--text-2); font-size:13.5px; margin-top:6px; min-height:2.6em; }
.tier .price{ margin-top:20px; display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.tier .price .amt{ font-family:var(--font-display); font-weight:700; font-size:40px; letter-spacing:-.03em; }
.tier .price .per{ color:var(--text-2); font-size:13.5px; }
.tier .peruser{
  font-family:var(--font-mono); font-size:12px; color:var(--accent);
  background:var(--accent-soft); border-radius:8px; padding:4px 10px; align-self:flex-start; margin-top:10px;
}
.tier ul{ list-style:none; margin:22px 0 26px; padding:22px 0 0; border-top:1px solid var(--border); display:grid; gap:10px; flex:1; }
.tier li{ display:flex; gap:10px; font-size:14px; color:var(--text-2); align-items:flex-start; }
.tier li.head{ color:var(--text); font-weight:600; font-size:13px; }
.tier li .tick{ flex:none; width:17px; height:17px; margin-top:2px; border-radius:5px; background:var(--accent-soft); color:var(--accent); display:grid; place-items:center; }
.tier li .tick svg{ width:10px; height:10px; }
.tier .btn{ width:100%; }
.tier.popular{
  border-color:color-mix(in srgb, var(--azure) 55%, var(--border));
  box-shadow:0 0 0 1px color-mix(in srgb, var(--azure) 45%, transparent), var(--shadow-lg);
}
.tier .flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:linear-gradient(120deg,var(--azure-bright),var(--azure)); color:#fff;
  font-family:var(--font-display); font-weight:600; font-size:12px; letter-spacing:.02em;
  padding:5px 16px; border-radius:999px; white-space:nowrap; box-shadow:0 6px 16px -6px rgba(36,114,232,.6);
}
.annual-note{
  display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  margin:0 0 30px; font-size:14px; color:var(--text-2);
}
.annual-note .pill{
  font-family:var(--font-mono); font-size:11.5px; color:var(--ok); font-weight:500;
  border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  background:color-mix(in srgb,var(--ok) 8%,transparent); border-radius:999px; padding:3px 11px;
}
.custom-tier{
  margin-top:16px; border:1px dashed var(--border-strong); border-radius:var(--r-lg);
  padding:26px 28px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background:color-mix(in srgb, var(--surface) 55%, transparent);
}
.custom-tier .ct-copy{ flex:1 1 380px; }
.custom-tier h4{ font-size:19px; font-weight:600; letter-spacing:-.015em; }
.custom-tier p{ color:var(--text-2); font-size:14.5px; margin-top:8px; max-width:70ch; }
.pricing-faq{ margin-top:clamp(36px,5vw,56px); display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.pfq b{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--text); letter-spacing:-.01em; }
.pfq p{ color:var(--text-2); font-size:13.5px; margin-top:6px; }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width:780px; }
.faq-list details{
  border-bottom:1px solid var(--border);
}
.faq-list details:first-of-type{ border-top:1px solid var(--border); }
.faq-list summary{
  cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 4px; font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-.015em;
  color:var(--text);
}
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary .plus{
  flex:none; width:26px; height:26px; border-radius:8px; border:1px solid var(--border-strong);
  display:grid; place-items:center; color:var(--accent); transition:transform .2s ease, background .2s ease;
}
.faq-list summary .plus svg{ width:12px; height:12px; }
.faq-list details[open] summary .plus{ transform:rotate(45deg); background:var(--accent-soft); border-color:transparent; }
.faq-list .fa{ padding:0 4px 22px; color:var(--text-2); font-size:15px; max-width:64ch; }
.faq-list .fa a{ font-weight:500; }

/* ============================================================
   Final CTA + footer
   ============================================================ */
.cta-final{ padding-block:clamp(64px,8vw,110px); }
.cta-panel{
  position:relative; overflow:hidden; border-radius:var(--r-xl);
  background:var(--night); color:#fff; text-align:center;
  padding:clamp(52px,7vw,90px) clamp(24px,5vw,80px);
}
.cta-panel::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(55% 70% at 50% 118%, rgba(36,114,232,.5), transparent 72%),
    radial-gradient(rgba(122,140,200,.14) 1px, transparent 1px);
  background-size:auto, 24px 24px; pointer-events:none;
}
.cta-panel > *{ position:relative; }
.cta-panel h2{ color:#fff; font-size:clamp(28px,4.4vw,48px); font-weight:700; text-wrap:balance; letter-spacing:-.025em; }
.cta-panel p{ color:var(--n-text-2); margin:16px auto 0; max-width:52ch; font-size:16.5px; }
.cta-panel .hero-ctas{ justify-content:center; }
.cta-panel .demo-chip{ margin-top:30px; }

.site-foot{ border-top:1px solid var(--border); padding:clamp(40px,6vw,64px) 0 48px; }
.foot-grid{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.foot-brand p{ color:var(--text-2); font-size:13.5px; margin-top:14px; max-width:34ch; }
.foot-cols{ display:flex; gap:clamp(32px,6vw,80px); flex-wrap:wrap; }
.foot-col b{ display:block; font-family:var(--font-display); font-size:13px; font-weight:600; letter-spacing:.02em; color:var(--text); margin-bottom:12px; }
.foot-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.foot-col a{ color:var(--text-2); font-size:13.5px; }
.foot-col a:hover{ color:var(--accent); }
.foot-base{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; align-items:center;
  margin-top:clamp(36px,5vw,56px); padding-top:24px; border-top:1px solid var(--border);
  color:var(--text-2); font-size:12.5px;
}
.foot-base .mono{ font-family:var(--font-mono); font-size:11px; }

/* ============================================================
   Scroll reveal (JS adds .in; no-JS pages stay visible)
   ============================================================ */
.js .reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.65,.25,1), transform .7s cubic-bezier(.2,.65,.25,1); }
.js .reveal.in{ opacity:1; transform:none; }
.js .reveal.d1{ transition-delay:.08s; } .js .reveal.d2{ transition-delay:.16s; } .js .reveal.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  .btn, .bcard{ transition:none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1020px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-visual{ max-width:640px; }
  .hero-visual .float-kudos{ right:6px; }
  .story, .story.flip{ grid-template-columns:1fr; gap:30px; }
  .story.flip .story-copy{ order:1; } .story.flip .story-visual{ order:2; }
  .story-visual{ max-width:640px; }
  .priv-grid{ grid-template-columns:1fr; }
  .bcard, .bcard.w6{ grid-column:span 6; }
  .tiers{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; }
  .tier.popular{ order:-1; }
  .custom-tier{ max-width:520px; margin-inline:auto; margin-top:16px; }
  .fit-grid{ grid-template-columns:1fr; max-width:560px; }
  .pricing-faq{ grid-template-columns:1fr; gap:18px; max-width:560px; }
}
@media (max-width:820px){
  .nav-links{
    position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:var(--bg); border-bottom:1px solid var(--border); padding:10px 20px 18px; gap:2px;
    display:none; box-shadow:var(--shadow-lg);
  }
  .nav-links.open{ display:flex; }
  .nav-links a{ padding:12px 14px; font-size:16px; }
  .nav-burger{ display:grid; }
  .head-ctas .btn-ghost{ display:none; }
  .hero-stats{ gap:18px 32px; }
  .hstat .n{ font-size:18px; }
}
@media (max-width:560px){
  .bcard, .bcard.w6{ grid-column:span 12; }
  .hero-ctas .btn{ flex:1 1 auto; }
  .mock-dash{ grid-template-columns:1fr; }
  .mock-side{ display:none; }
  .hero-visual .float-kudos{ position:static; width:auto; margin-top:12px; transform:none; }
  .tier .price .amt{ font-size:34px; }
  .demo-chip{ border-radius:16px; }
  .calgrid{ gap:3px; }
}