/* ============================================================
   onSync — shared stylesheet
   Contains tokens + base + nav + footer + buttons + reveal
   that are identical across index.html and /cases/*.html.
   Page-specific styles remain inline in each HTML file.
   ============================================================ */

/* ========== TOKENS ========== */
:root{
  /* Default "aurora" — clean white + futuristic pastel duotone */
  --bg:        oklch(0.985 0.004 260);
  --bg-1:      oklch(0.975 0.006 260);
  --bg-2:      oklch(0.965 0.008 260);
  --bg-3:      oklch(0.94 0.012 260);
  --bg-4:      oklch(0.90 0.015 260);
  --glass:     oklch(1 0 0 / 0.65);
  --line:      oklch(0.88 0.012 260 / 0.9);
  --line-2:    oklch(0.76 0.025 265 / 0.9);
  --fg:        oklch(0.22 0.035 275);
  --fg-2:      oklch(0.42 0.04 275);
  --fg-3:      oklch(0.56 0.035 275);
  --fg-4:      oklch(0.72 0.025 270);

  --c-violet:  oklch(0.58 0.22 300);
  --c-violet-2:oklch(0.72 0.20 305);
  --c-cyan:    oklch(0.68 0.15 200);
  --c-cyan-2:  oklch(0.78 0.14 195);
  --c-amber:   oklch(0.78 0.15 75);
  --c-pink:    oklch(0.70 0.22 15);
  --accent:    var(--c-violet);
  --accent-2:  var(--c-cyan);
  --accent-ink: oklch(0.99 0.004 260);
  --good:      oklch(0.60 0.16 150);
  --warn:      var(--c-amber);
  --bad:       var(--c-pink);

  --grad-aurora:
    radial-gradient(900px 600px at 12% 8%, oklch(0.72 0.20 305 / 0.18), transparent 65%),
    radial-gradient(1000px 700px at 92% 18%, oklch(0.78 0.14 195 / 0.18), transparent 65%),
    radial-gradient(800px 500px at 50% 110%, oklch(0.82 0.16 75 / 0.09), transparent 65%);
  --grad-duo:   linear-gradient(135deg, var(--c-violet), var(--c-cyan));
  --grad-iri:   conic-gradient(from 200deg, var(--c-violet), var(--c-cyan), var(--c-amber), var(--c-pink), var(--c-violet));

  --f-sans:  "Space Grotesk", ui-sans-serif, -apple-system, Segoe UI, Roboto, sans-serif;
  --f-serif: "Instrument Serif", ui-serif, Georgia, serif;
  --f-mono:  "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --maxw: 1320px;
  --pad:  clamp(20px, 3.5vw, 40px);
  --rhythm: 140px;
  --radius: 20px;
  --radius-sm: 12px;
}

/* ========== BASE ========== */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{ scroll-behavior:smooth; }
body{
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-sans);
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: var(--grad-aurora); opacity:.9;
}
body > .grid-bg{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image: radial-gradient(oklch(0.70 0.025 270 / 0.35) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 75%);
  opacity:.5;
}
a{ color:inherit; text-decoration:none;}
::selection{ background: var(--accent); color: var(--accent-ink);}
img{ max-width:100%; display:block;}

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); position:relative; z-index:2;}
.section{ padding: var(--rhythm) 0; position:relative;}

/* ========== CHIPS + MONO ========== */
.chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 11px;
  font-family:var(--f-mono); font-size:11px; color:var(--fg-2); text-transform:uppercase;
  border-radius:999px; background: var(--glass);
  border:1px solid var(--line); backdrop-filter: blur(10px);
  letter-spacing:.02em;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-2);
  box-shadow: 0 0 0 2px oklch(from var(--accent-2) l c h / 0.2), 0 0 12px var(--accent-2);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.5;}}

.mono{ font-family:var(--f-mono); font-size:11px; color:var(--fg-3); text-transform:uppercase; letter-spacing:.02em;}
.mono.fg{ color:var(--fg);}

/* ========== BUTTONS ========== */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 18px; border-radius:12px; border:1px solid var(--line-2);
  background: var(--glass); color:var(--fg); backdrop-filter: blur(14px);
  font-family: inherit; font-size:13.5px; font-weight:500;
  cursor:pointer; transition: all .2s cubic-bezier(.2,.7,.2,1);
  white-space:nowrap; position:relative; overflow:hidden;
}
.btn:hover{ border-color: var(--accent-2); transform: translateY(-1px);}
.btn .arr{ transition: transform .2s;}
.btn:hover .arr{ transform: translateX(3px);}
.btn.primary{
  background: linear-gradient(135deg, var(--c-violet), var(--c-cyan));
  color: var(--accent-ink); border-color: transparent;
  box-shadow: 0 8px 32px -8px oklch(from var(--c-violet) l c h / 0.6),
              0 0 0 1px oklch(from var(--c-violet) l c h / 0.2) inset;
  font-weight:600;
}
.btn.primary:hover{
  box-shadow: 0 12px 40px -8px oklch(from var(--c-violet) l c h / 0.7),
              0 0 0 1px oklch(from var(--c-cyan) l c h / 0.4) inset;
}
.btn.ghost{ background: transparent;}
.btn.lg{ padding:16px 24px; font-size:15px; border-radius:14px;}
.btn.sm{ padding:8px 13px; font-size:12.5px;}

/* ========== NAV ========== */
.nav{
  position: fixed; top:14px; left:50%; transform:translateX(-50%);
  z-index:60; width: min(calc(100% - 28px), 1180px);
  background: var(--glass); backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border:1px solid var(--line); border-radius:18px;
  display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:24px;
  padding:10px 14px;
  box-shadow: 0 20px 50px -20px oklch(0.50 0.10 275 / 0.18),
              0 2px 8px -2px oklch(0.50 0.10 275 / 0.08);
}
.nav::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background: var(--grad-iri); opacity:.3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}
.nav .brand{ display:flex; align-items:center; gap:10px; font-weight:600; letter-spacing:-0.01em; position:relative;}
.brand-logo{ height:32px; width:auto; display:block; }
.nav ul{ list-style:none; padding:0; margin:0; display:flex; gap:2px; justify-self:center;}
.nav ul a{
  display:block; padding:8px 13px; font-size:13.5px; color:var(--fg-2); border-radius:10px;
  transition: background .15s ease, color .15s ease;
}
.nav ul a:hover{ background: oklch(from var(--bg-3) l c h / 0.7); color:var(--fg);}
.nav .end{ display:flex; align-items:center; gap:8px;}

/* ========== FOOTER ========== */
footer{
  border-top:1px solid var(--line); padding: 48px 0 32px;
  display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:48px;
  font-size:14px; color: var(--fg-2); position:relative; z-index:2;
}
footer h6{ margin:0 0 16px; font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase; font-weight:500;}
footer ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
footer ul a:hover{ color: var(--fg);}
footer .fbrand p{ max-width:34ch; color: var(--fg-3); font-size:13.5px; margin-top:16px; line-height:1.6;}
footer .bottom{
  grid-column:1 / -1; margin-top:32px; padding-top:20px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;
}

/* ========== SHARED MOBILE RULES ========== */
@media (max-width: 980px){
  .nav ul{ display:none;}
  footer{ grid-template-columns: 1fr 1fr;}
}

/* ========== REVEAL ANIMATION ========== */
[data-reveal]{ opacity:0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
[data-reveal="in"]{ opacity:1; transform: translateY(0);}

/* ========== CARD (CMS page base component) ========== */
.card{
  background: var(--glass); backdrop-filter: blur(16px);
  border:1px solid var(--line); border-radius: var(--radius);
  position:relative; overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background: var(--grad-iri); opacity:.2;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events:none;
}

/* ========== COMPONENT STYLES (moved from index.html inline) ========== */

/* Alt palettes */
[data-palette="mint"]{
  --bg: oklch(0.985 0.008 170); --bg-1: oklch(0.975 0.010 170); --bg-2: oklch(0.96 0.013 170);
  --bg-3: oklch(0.93 0.016 170); --bg-4: oklch(0.88 0.020 170); --glass: oklch(1 0 0 / 0.65);
  --line: oklch(0.86 0.018 170 / 0.9); --line-2: oklch(0.74 0.028 175 / 0.9);
  --c-violet: oklch(0.62 0.18 295); --c-violet-2: oklch(0.74 0.16 300);
  --c-cyan: oklch(0.72 0.14 165); --c-cyan-2: oklch(0.82 0.12 165);
  --accent: var(--c-violet); --accent-2: var(--c-cyan); --accent-ink: oklch(0.99 0.008 170);
  --grad-aurora: radial-gradient(900px 600px at 12% 8%, oklch(0.72 0.16 300 / 0.16), transparent 65%), radial-gradient(1000px 700px at 92% 18%, oklch(0.82 0.12 165 / 0.20), transparent 65%);
}
[data-palette="peach"]{
  --bg: oklch(0.985 0.010 55); --bg-1: oklch(0.975 0.012 55); --bg-2: oklch(0.965 0.014 55);
  --bg-3: oklch(0.935 0.018 55); --bg-4: oklch(0.89 0.022 55); --glass: oklch(1 0 0 / 0.6);
  --line: oklch(0.87 0.020 55 / 0.9); --line-2: oklch(0.76 0.030 55 / 0.9);
  --c-violet: oklch(0.60 0.20 320); --c-violet-2: oklch(0.72 0.18 325);
  --c-cyan: oklch(0.76 0.16 45); --c-cyan-2: oklch(0.84 0.14 50);
  --accent: var(--c-violet); --accent-2: var(--c-cyan); --accent-ink: oklch(0.99 0.010 55);
  --grad-aurora: radial-gradient(900px 600px at 12% 8%, oklch(0.72 0.18 325 / 0.18), transparent 65%), radial-gradient(1000px 700px at 92% 18%, oklch(0.84 0.14 50 / 0.20), transparent 65%);
}
[data-palette="nebula"]{
  --bg: oklch(0.14 0.035 275); --bg-1: oklch(0.17 0.04 275); --bg-2: oklch(0.20 0.045 275);
  --bg-3: oklch(0.24 0.05 275); --bg-4: oklch(0.30 0.06 275); --glass: oklch(0.22 0.045 275 / 0.55);
  --line: oklch(0.32 0.05 280 / 0.55); --line-2: oklch(0.42 0.08 285 / 0.7);
  --fg: oklch(0.97 0.015 280); --fg-2: oklch(0.78 0.02 280); --fg-3: oklch(0.58 0.03 280); --fg-4: oklch(0.42 0.04 280);
  --c-violet: oklch(0.72 0.22 305); --c-cyan: oklch(0.88 0.17 175);
  --accent: var(--c-violet); --accent-2: var(--c-cyan); --accent-ink: oklch(0.14 0.035 275);
  --grad-aurora: radial-gradient(800px 500px at 15% 10%, oklch(0.72 0.22 305 / 0.28), transparent 60%), radial-gradient(900px 600px at 90% 20%, oklch(0.88 0.17 175 / 0.18), transparent 60%);
}
[data-density="dense"]{ --rhythm:100px;}
[data-density="airy"]{ --rhythm:180px;}

body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
[data-palette="nebula"] body::after{ opacity:.03; mix-blend-mode:overlay;}

/* Iridescent border helper */
.iri{ position:relative; background: var(--bg-1); border-radius: var(--radius);}
.iri::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background: var(--grad-iri); opacity:.3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.iri-strong::before{ opacity:.6;}

/* Kinetic display type */
.display{
  font-family: var(--f-sans); font-weight:500;
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.88; letter-spacing: -0.045em; color: var(--fg);
}
.display .soft{ color: var(--fg-3); font-weight:300;}
.display .italic{ font-family: var(--f-serif); font-style: italic; font-weight:400; letter-spacing:-0.02em;}
.display .grad{
  background: var(--grad-duo); -webkit-background-clip: text; background-clip: text; color: transparent;
  font-style: italic; font-family: var(--f-serif); font-weight:400;
}

/* Shared grad/soft text helpers */
.grad{
  background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.soft{ color: var(--fg-3);}

/* NAV brand extras */
.brand-mk{
  width:28px; height:28px; border-radius:9px; position:relative;
  background: var(--grad-duo); display:flex; align-items:center; justify-content:center;
  box-shadow: 0 4px 20px -4px oklch(from var(--c-violet) l c h / 0.6);
}
.nav .brand .name{ font-size:15px;}

/* HERO */
.hero{ padding-top: 140px; position:relative; overflow:hidden;}
.hero-topline{ display:flex; justify-content:space-between; align-items:flex-end; gap:20px; padding-bottom:24px; flex-wrap:wrap;}
.hero-topline .tl{ display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.hero-topline .tr{ display:flex; gap:24px; align-items:baseline; font-family:var(--f-mono); font-size:11px; color:var(--fg-3);}
.hero-topline .tr .unit{ display:flex; align-items:baseline; gap:6px;}
.hero-topline .tr .unit .v{ color: var(--fg); font-size:12.5px;}
.hero h1{ margin:16px 0 0;}
.hero-cta-row{
  margin-top:48px; display:grid; grid-template-columns: 1.3fr 1fr auto; gap:40px;
  align-items:center; padding:24px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.hero-cta-row .lede{ color: var(--fg-2); font-size:17px; line-height:1.5; max-width:56ch; margin:0;}
.hero-cta-row .stack{ display:flex; gap:12px; align-items:baseline; font-family:var(--f-mono); font-size:11.5px; color:var(--fg-3);}
.hero-cta-row .stack .block{ display:flex; flex-direction:column; gap:4px; text-align:left;}
.hero-cta-row .stack .block .n{ font-family:var(--f-sans); font-size:22px; font-weight:500; letter-spacing:-0.02em; color:var(--fg); line-height:1;}
.hero-cta-row .stack .block .n .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-cta-row .stack .div{ width:1px; align-self:stretch; background:var(--line);}
.hero-cta-row .ctas{ display:flex; flex-direction:column; gap:10px; align-items:flex-end;}
.hero-cta-row .ctas .tiny{ font-family:var(--f-mono); font-size:10.5px; color:var(--fg-3); text-transform:uppercase;}

/* BENTO */
.bento{
  margin-top:56px; display:grid;
  grid-template-columns: 1.7fr 1fr 1fr; grid-template-rows: 280px 240px;
  grid-template-areas: "scan stat1 stat2" "scan recs ticker";
  gap:14px; min-height:534px;
}
.b-scan{ grid-area:scan;} .b-stat1{ grid-area:stat1;} .b-stat2{ grid-area:stat2;} .b-recs{ grid-area:recs;} .b-ticker{ grid-area:ticker;}
.tile{
  position:relative; border-radius: var(--radius); padding:20px;
  background: var(--glass); backdrop-filter: blur(20px) saturate(150%);
  border:1px solid var(--line); overflow:hidden;
  transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s;
}
.tile:hover{ border-color: var(--line-2);}
.tile::before{
  content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
  background: var(--grad-iri); opacity:.25;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;
}
.tile .head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.tile .head h4{ margin:0; font-size:13px; font-weight:500; color:var(--fg-2); font-family:var(--f-mono); text-transform:uppercase; letter-spacing:.04em;}
.tile .head .pill{ font-family:var(--f-mono); font-size:10.5px; padding:3px 8px; border-radius:999px; background: oklch(from var(--accent-2) l c h / 0.15); color: var(--accent-2); border: 1px solid oklch(from var(--accent-2) l c h / 0.3);}
.b-scan{ display:flex; flex-direction:column;}
.b-scan::after{
  content:""; position:absolute; left:0; right:0; top:0; height:120px;
  background: linear-gradient(180deg, transparent, oklch(from var(--c-cyan) l c h / 0.12), transparent);
  animation: scan 3.8s ease-in-out infinite; pointer-events:none; z-index:2;
}
@keyframes scan{ 0%{ transform:translateY(-100px); opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{ transform:translateY(620px); opacity:0;}}
.findings{ display:flex; flex-direction:column; gap:6px; flex:1;}
.finding{ display:grid; grid-template-columns: 26px 1fr auto 64px; gap:12px; align-items:center; padding:10px 12px; border-radius:10px; background: var(--bg-2); border:1px solid var(--line); transition: transform .2s;}
.finding:hover{ transform: translateX(2px); border-color: var(--line-2);}
.finding .ic{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:11px; font-weight:500; background: oklch(from var(--bad) l c h / 0.15); color: var(--bad); border:1px solid oklch(from var(--bad) l c h / 0.3);}
.finding.warn .ic{ background: oklch(from var(--warn) l c h / 0.15); color: var(--warn); border-color: oklch(from var(--warn) l c h / 0.3);}
.finding.ok .ic{ background: oklch(from var(--good) l c h / 0.15); color: var(--good); border-color: oklch(from var(--good) l c h / 0.3);}
.finding .txt{ font-size:13px;} .finding .txt .t{ color: var(--fg); font-weight:500;} .finding .txt .s{ color: var(--fg-3); font-size:11px; font-family:var(--f-mono);}
.finding .val{ font-family:var(--f-mono); font-size:12px; color: var(--fg-2); font-weight:500;}
.finding .bar{ height:6px; border-radius:4px; background: var(--bg-3); overflow:hidden;}
.finding .bar i{ display:block; height:100%; background: linear-gradient(90deg, var(--bad), oklch(from var(--bad) calc(l + 0.1) c h));}
.finding.warn .bar i{ background: linear-gradient(90deg, var(--warn), oklch(from var(--warn) calc(l + 0.05) c h));}
.finding.ok .bar i{ background: linear-gradient(90deg, var(--good), oklch(from var(--good) calc(l + 0.05) c h));}
.stat-tile{ display:flex; flex-direction:column; justify-content:space-between;}
.stat-tile .value{ font-family:var(--f-sans); font-weight:500; font-size: clamp(44px, 6vw, 72px); line-height:0.92; letter-spacing:-0.045em; color: var(--fg);}
.stat-tile .value .grad{ background: var(--grad-duo); -webkit-background-clip: text; background-clip: text; color: transparent;}
.stat-tile .sub{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase; margin-top:8px;}
.stat-tile .spark{ height:42px; position:relative; margin-top:6px;}
.stat-tile .spark svg{ position:absolute; inset:0; width:100%; height:100%;}
.b-recs{ display:flex; flex-direction:column; gap:8px;}
.recs-list{ display:flex; flex-direction:column; gap:6px; flex:1;}
.rec{ display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center; font-size:12.5px; padding:8px 10px; border-radius:8px; background: var(--bg-2); border:1px solid var(--line);}
.rec .ic{ width:22px; height:22px; border-radius:7px; display:flex; align-items:center; justify-content:center; background: var(--grad-duo); color: var(--accent-ink); font-weight:600;}
.rec .tag{ font-family:var(--f-mono); font-size:10px; color: var(--fg-3); padding:2px 6px; border-radius:4px; background: var(--bg-3);}
.b-ticker{ display:flex; flex-direction:column; gap:10px;}
.b-ticker .stream{ flex:1; display:flex; flex-direction:column; gap:5px; font-family:var(--f-mono); font-size:11.5px; line-height:1.5; overflow:hidden; position:relative;}
.b-ticker .stream .ln{ color: var(--fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.b-ticker .stream .ln b{ color: var(--accent-2); font-weight:500;}
.b-ticker .stream .ln.now{ color: var(--fg);}
.b-ticker .stream::after{ content:""; position:absolute; bottom:0; left:0; right:0; height:40px; background: linear-gradient(180deg, transparent, var(--bg-1)); pointer-events:none;}
.b-ticker .caret{ display:inline-block; width:7px; height:12px; background: var(--accent-2); vertical-align:-1px; animation:blink 1s steps(2) infinite;}
@keyframes blink{ 50%{opacity:0;}}

/* MARQUEE */
.marquee{ margin-top:64px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); overflow:hidden; position:relative;}
.marquee::before,.marquee::after{ content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;}
.marquee::before{ left:0; background: linear-gradient(90deg, var(--bg), transparent);}
.marquee::after{ right:0; background: linear-gradient(-90deg, var(--bg), transparent);}
.marquee-inner{ display:flex; gap:48px; white-space:nowrap; animation: marq 60s linear infinite; font-family:var(--f-mono); font-size:12.5px; color:var(--fg-3); text-transform:uppercase;}
.marquee-inner span{ display:inline-flex; align-items:center; gap:48px;}
.marquee-inner i{ width:6px; height:6px; border-radius:50%; background: var(--accent); display:inline-block; box-shadow: 0 0 12px var(--accent);}
.marquee-inner i:nth-child(2n){ background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2);}
@keyframes marq{ from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* SECTION HEAD */
.head{ display:grid; grid-template-columns: 1fr auto; gap:40px; align-items:end; padding-bottom:56px;}
.head .l{ display:flex; flex-direction:column; gap:20px;}
.head .l .chip{ align-self:flex-start;}
.head h2{ margin:0; font-family: var(--f-sans); font-weight:500; font-size: clamp(40px, 6vw, 84px); line-height:0.96; letter-spacing:-0.035em;}
.head h2 .soft{ color: var(--fg-3); font-weight:300;}
.head h2 .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent; font-family: var(--f-serif); font-style:italic; font-weight:400;}
.head .r{ max-width:42ch; color: var(--fg-2); font-size:15.5px; line-height:1.55;}

/* SERVICES */
.svcs{ display:grid; grid-template-columns: 1.35fr 1fr 1fr; gap:14px;}
.svc{
  padding:28px; border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(16px);
  border:1px solid var(--line); min-height:440px; display:flex; flex-direction:column; gap:20px;
  position:relative; overflow:hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s;
}
.svc:hover{ transform: translateY(-3px); border-color: var(--line-2);}
.svc::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.25; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;}
.svc .row{ display:flex; justify-content:space-between; align-items:center;}
.svc .row .n{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}
.svc .tag{ padding:4px 10px; border-radius:999px; font-family:var(--f-mono); font-size:10.5px; background: var(--grad-duo); color: var(--accent-ink); text-transform:uppercase; font-weight:600;}
.svc h3{ margin:0; font-size: clamp(24px, 2.4vw, 30px); font-weight:500; letter-spacing:-0.02em; line-height:1.08;}
.svc h3 .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;}
.svc p{ margin:0; color: var(--fg-2); font-size:14.5px; line-height:1.55;}
.svc .foot{ margin-top:auto; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline;}
.svc .foot .price{ font-family:var(--f-mono); font-size:13px; color:var(--fg); font-weight:500;}
.svc .foot .arr{ font-size:18px; color:var(--fg-2); transition: transform .2s;}
.svc:hover .foot .arr{ color: var(--accent-2); transform: translateX(4px);}
.svc.feat{ background: radial-gradient(500px 300px at 100% 0%, oklch(from var(--c-violet) l c h / 0.18), transparent), var(--glass);}
.svc.feat::before{ opacity:.55;}
.svc .viz{ height:130px; border-radius:12px; padding:14px; background: var(--bg-2); border:1px solid var(--line); overflow:hidden; position:relative;}
.svc .viz.audit{ display:flex; align-items:flex-end; gap:4px;}
.svc .viz.audit b{ flex:1; background: var(--line-2); border-radius:3px; display:block;}
.svc .viz.audit b.acc{ background: var(--grad-duo);}
.svc .viz.build{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:6px;}
.svc .viz.build .tlb{ background: var(--bg-3); border:1px solid var(--line); border-radius:8px; position:relative;}
.svc .viz.build .tlb::after{ content:""; position:absolute; left:8px; top:8px; width:30%; height:4px; background: var(--fg-4); border-radius:2px;}
.svc .viz.build .tlb.hl{ background: oklch(from var(--c-violet) l c h / 0.12); border-color: oklch(from var(--c-violet) l c h / 0.4);}
.svc .viz.build .tlb.hl::after{ background: var(--accent);}
.svc .viz.run{ display:flex; flex-direction:column; gap:7px; justify-content:space-around;}
.svc .viz.run .ln{ display:grid; grid-template-columns: auto 1fr auto; gap:10px; align-items:center; font-family:var(--f-mono); font-size:11px;}
.svc .viz.run .ln .d{ width:8px; height:8px; border-radius:50%; background: var(--good); box-shadow: 0 0 8px var(--good);}
.svc .viz.run .ln .d.warn{ background: var(--warn); box-shadow: 0 0 8px var(--warn);}
.svc .viz.run .ln .nm{ color: var(--fg-2);} .svc .viz.run .ln .t{ color: var(--fg-4);}

/* AUDIT */
.audit-wrap{ padding:56px 48px; border-radius:28px; background: radial-gradient(600px 400px at 90% 10%, oklch(from var(--c-violet) l c h / 0.18), transparent), radial-gradient(500px 350px at 10% 100%, oklch(from var(--c-cyan) l c h / 0.12), transparent), linear-gradient(180deg, var(--bg-1), var(--bg)); border:1px solid var(--line); position:relative; overflow:hidden;}
.audit-wrap::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.3; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;}
.audit-top{ display:grid; grid-template-columns: 1fr auto; gap:48px; align-items:end; margin-bottom:48px;}
.audit-top h2{ margin:0; font-size: clamp(44px, 6.4vw, 92px); font-weight:500; line-height:0.94; letter-spacing:-0.035em;}
.audit-top h2 .soft{ color: var(--fg-3); font-weight:300;}
.audit-top h2 .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent; font-family: var(--f-serif); font-style:italic; font-weight:400;}
.price-card{ padding:24px 28px; border-radius:18px; background: var(--glass); backdrop-filter: blur(16px); border:1px solid var(--line); min-width:260px; display:flex; flex-direction:column; gap:10px; align-items:flex-end; position:relative; overflow:hidden;}
.price-card::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.4; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;}
.price-card .row{ display:flex; align-items:baseline; gap:6px;}
.price-card .pre{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}
.price-card .price{ font-family:var(--f-sans); font-weight:500; font-size:72px; line-height:1; letter-spacing:-0.04em; background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;}
.price-card .vat{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3);}
.price-card .note{ text-align:right; font-size:12.5px; color: var(--fg-2); max-width:32ch; margin:0;}
.audit-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:40px;}
.audit-steps{ display:flex; flex-direction:column; gap:6px;}
.audit-step{ display:grid; grid-template-columns: 44px 1fr auto; gap:18px; align-items:center; padding:18px 16px; border-radius:14px; border:1px solid transparent; transition: background .2s, border-color .2s;}
.audit-step:hover{ background: var(--glass); border-color: var(--line);}
.audit-step .n{ width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:12px; color: var(--fg); background: var(--bg-2); border:1px solid var(--line); transition: all .2s;}
.audit-step:hover .n{ background: var(--grad-duo); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 20px -6px oklch(from var(--c-violet) l c h / 0.6);}
.audit-step h4{ margin:0 0 4px; font-size:17px; font-weight:500; letter-spacing:-0.01em;}
.audit-step p{ margin:0; color: var(--fg-2); font-size:13.5px; line-height:1.5; max-width:52ch;}
.audit-step .t{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3);}
.audit-panel{ padding:28px; border-radius:18px; background: var(--glass); backdrop-filter: blur(16px); border:1px solid var(--line); display:flex; flex-direction:column; gap:24px; align-self:start;}
.audit-panel h5{ margin:0 0 14px; font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase; font-weight:500;}
.spec-row{ display:grid; grid-template-columns: 120px 1fr; gap:16px; padding:10px 0; border-bottom:1px solid var(--line); align-items:baseline;}
.spec-row:last-of-type{ border-bottom:0; padding-bottom:0;}
.spec-row .k{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}
.spec-row .v{ font-size:14px;}
.deliver{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px;}
.deliver li{ display:grid; grid-template-columns: 20px 1fr; gap:10px; font-size:14px; color: var(--fg); align-items:baseline;}
.deliver li::before{ content:"✓"; width:16px; height:16px; margin-top:3px; border-radius:5px; background: var(--grad-duo); color: var(--accent-ink); display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:700;}

/* PROCESS */
.process{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px; position:relative;}
.step{ padding:26px; border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(16px); border:1px solid var(--line); display:flex; flex-direction:column; gap:16px; min-height:280px; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s; position:relative; overflow:hidden;}
.step::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.2; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;}
.step:hover{ transform: translateY(-3px); border-color: var(--line-2);}
.step .nrow{ display:flex; justify-content:space-between; align-items:baseline;}
.step .big{ font-family: var(--f-sans); font-weight:300; font-size:64px; line-height:0.85; letter-spacing:-0.05em; color: var(--fg);}
.step .big .dot{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;}
.step .dur{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}
.step h4{ margin:0; font-size:18px; font-weight:500; letter-spacing:-0.015em;}
.step p{ margin:0; font-size:13.5px; color: var(--fg-2); line-height:1.55;}
.step .tick{ display:flex; gap:4px; margin-top:auto;}
.step .tick i{ flex:1; height:3px; border-radius:2px; background: var(--bg-3);}
.step:nth-child(1) .tick i:nth-child(-n+1){ background: var(--grad-duo);}
.step:nth-child(2) .tick i:nth-child(-n+2){ background: var(--grad-duo);}
.step:nth-child(3) .tick i:nth-child(-n+3){ background: var(--grad-duo);}
.step:nth-child(4) .tick i{ background: var(--grad-duo);}

/* SECTORS */
.sectors{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.sector{ padding:22px; border-radius:18px; background: var(--glass); backdrop-filter: blur(16px); border:1px solid var(--line); display:flex; flex-direction:column; gap:14px; min-height:180px; transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .2s; position:relative; overflow:hidden;}
.sector:hover{ transform: translateY(-2px); border-color: var(--line-2);}
.sector::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.2; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;}
.sector .top{ display:flex; justify-content:space-between; align-items:center;}
.sector .ic{ width:38px; height:38px; border-radius:12px; display:flex; align-items:center; justify-content:center; color: var(--fg); background: var(--bg-3); border:1px solid var(--line); transition: all .2s;}
.sector:hover .ic{ background: var(--grad-duo); color: var(--accent-ink); border-color: transparent; box-shadow: 0 6px 20px -6px oklch(from var(--c-violet) l c h / 0.5);}
.sector .count{ font-family:var(--f-mono); font-size:10.5px; color: var(--fg-4); text-transform:uppercase;}
.sector h5{ margin:0; font-size:16px; font-weight:500; letter-spacing:-0.01em;}
.sector p{ margin:0; font-size:13px; color: var(--fg-3); line-height:1.5;}

/* CASES */
.cases{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.case{ border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(16px); border:1px solid var(--line); overflow:hidden; display:flex; flex-direction:column; transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .2s; position:relative;}
.case:hover{ transform: translateY(-3px); border-color: var(--line-2);}
.case::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.2; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; z-index:3;}
.case .thumb{ height:200px; padding:14px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.case .thumb.ui{ background: radial-gradient(300px 180px at 30% 100%, oklch(from var(--c-violet) l c h / 0.18), transparent), radial-gradient(300px 180px at 80% 20%, oklch(from var(--c-cyan) l c h / 0.1), transparent), var(--bg-2); display:flex; flex-direction:column; gap:10px;}
.case .thumb.photo{ background: radial-gradient(400px 200px at 50% 50%, oklch(from var(--c-pink) l c h / 0.18), transparent), linear-gradient(135deg, var(--bg-3) 1px, transparent 1px) 0 0/14px 14px, var(--bg-2); display:flex; align-items:flex-end;}
.case .thumb .uichrome{ display:flex; justify-content:space-between; align-items:center;}
.case .thumb .uichrome .t{ font-family:var(--f-mono); font-size:10.5px; color: var(--fg-3);}
.case .thumb .uichrome .dots{ display:flex; gap:4px;}
.case .thumb .uichrome .dots i{ width:7px; height:7px; border-radius:50%; background: var(--bg-4);}
.case .thumb .cols{ display:grid; grid-template-columns: 1fr 2fr; gap:8px; flex:1; min-height:0;}
.case .thumb .card{ background: var(--bg-1); border:1px solid var(--line); border-radius:8px; padding:8px; display:flex; flex-direction:column; gap:6px;}
.case .thumb .rw{ height:6px; border-radius:3px; background: var(--bg-3);} .case .thumb .rw.s{ width:60%;} .case .thumb .rw.xs{ width:30%;} .case .thumb .rw.acc{ background: var(--grad-duo); width:45%;}
.case .thumb .chart{ flex:1; display:flex; align-items:flex-end; gap:3px; margin-top:auto;}
.case .thumb .chart b{ flex:1; background: var(--line-2); border-radius:2px;} .case .thumb .chart b.hl{ background: var(--grad-duo);}
.case .thumb .ph-tag{ font-family:var(--f-mono); font-size:10px; color: var(--fg-3); background: var(--bg-1); padding:4px 8px; border-radius:4px; border:1px solid var(--line); text-transform:uppercase;}
.case-body{ padding:22px; display:flex; flex-direction:column; gap:14px; flex:1;}
.case-body .sec-tag{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}
.case-body h4{ margin:0; font-size:19px; font-weight:500; letter-spacing:-0.015em; line-height:1.25;}
.case-body .metrics{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); display:grid; grid-template-columns: 1fr 1fr; gap:14px;}
.case-body .m .n{ font-size:28px; font-weight:500; letter-spacing:-0.025em; line-height:1;}
.case-body .m .n .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;}
.case-body .m .l{ margin-top:4px; font-family:var(--f-mono); font-size:10.5px; color: var(--fg-3); text-transform:uppercase;}
.case-body .case-show{ padding-top:14px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase; letter-spacing:.02em; transition: color .2s;}
.case-body .case-show:hover{ color: var(--fg);}
.case-body .case-show .arr{ font-size:14px; transition: transform .2s; color: var(--fg-3);}
.case-body .case-show:hover .arr{ transform: translateX(4px); color: var(--accent-2);}
.case-body .case-show .ext{ color: var(--fg-4); font-size:11px; margin-left:4px;}

/* PRICING */
.pricing{ display:grid; grid-template-columns: repeat(3, 1fr); gap:14px;}
.price-tile{ padding:28px; border-radius: var(--radius); background: var(--glass); backdrop-filter: blur(16px); border:1px solid var(--line); min-height:500px; display:flex; flex-direction:column; gap:20px; position:relative; overflow:hidden; transition: transform .3s cubic-bezier(.2,.7,.2,1);}
.price-tile:hover{ transform: translateY(-2px);}
.price-tile::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.25; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;}
.price-tile.feat{ background: radial-gradient(500px 300px at 50% 0%, oklch(from var(--c-violet) l c h / 0.2), transparent), var(--glass);}
.price-tile.feat::before{ opacity:.6;}
.price-tile .phead{ display:flex; justify-content:space-between; align-items:center;}
.price-tile .ph-label{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}
.price-tile .badge{ padding:4px 10px; border-radius:999px; font-family:var(--f-mono); font-size:10.5px; background: var(--grad-duo); color: var(--accent-ink); text-transform:uppercase; font-weight:600;}
.price-tile h3{ margin:0; font-size:24px; font-weight:500; letter-spacing:-0.015em;}
.price-tile .amount{ display:flex; align-items:baseline; gap:8px;}
.price-tile .amount .num{ font-size:60px; font-weight:500; letter-spacing:-0.035em; line-height:1;}
.price-tile.feat .amount .num{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent;}
.price-tile .amount .u{ font-family:var(--f-mono); font-size:12px; color: var(--fg-3);}
.price-tile .desc{ color: var(--fg-2); font-size:14px; line-height:1.55;}
.price-tile ul{ margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:10px; font-size:13.5px;}
.price-tile ul li{ display:grid; grid-template-columns: 18px 1fr; gap:10px; color: var(--fg); align-items:baseline;}
.price-tile ul li::before{ content:""; width:14px; height:14px; margin-top:3px; border-radius:50%; background: oklch(from var(--c-cyan) l c h / 0.18); border:1px solid var(--c-cyan);}
.price-tile .pcta{ margin-top:auto;}

/* FAQ */
.faq{ border-top:1px solid var(--line);}
.faq details{ border-bottom:1px solid var(--line);}
.faq summary{ display:grid; grid-template-columns: 48px 1fr auto; gap:24px; align-items:center; padding:24px 4px; cursor:pointer; list-style:none; user-select:none;}
.faq summary::-webkit-details-marker{ display:none;}
.faq summary .n{ font-family:var(--f-mono); font-size:12px; color: var(--fg-3);}
.faq summary .q{ font-size: clamp(18px, 2vw, 22px); font-weight:500; letter-spacing:-0.015em;}
.faq summary .plus{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; color: var(--fg-2); transition: transform .25s ease, background .2s ease, color .2s ease; border:1px solid var(--line); background: var(--glass);}
.faq details[open] summary .plus{ transform:rotate(45deg); background: var(--grad-duo); color: var(--accent-ink); border-color: transparent;}
.faq .ans{ padding:0 4px 28px 76px; max-width:70ch; color: var(--fg-2); font-size:15px; line-height:1.65;}

/* FOUNDER */
.founder{ display:grid; grid-template-columns: 1fr 1.3fr; gap:56px; align-items:start;}
.founder-img{ aspect-ratio:4/5; border-radius:24px; background: radial-gradient(400px 200px at 40% 30%, oklch(from var(--c-violet) l c h / 0.22), transparent), radial-gradient(400px 250px at 70% 80%, oklch(from var(--c-cyan) l c h / 0.14), transparent), linear-gradient(135deg, var(--bg-3) 1px, transparent 1px) 0 0/14px 14px, var(--bg-2); border:1px solid var(--line); display:flex; align-items:flex-end; padding:18px; position:relative; overflow:hidden;}
.founder-img::before{ content:""; position:absolute; inset:0; padding:1px; border-radius:inherit; background: var(--grad-iri); opacity:.3; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none;}
.founder-img .ph-tag{ font-family:var(--f-mono); font-size:10.5px; color: var(--fg-3); background: var(--bg-1); padding:4px 8px; border-radius:4px; border:1px solid var(--line); text-transform:uppercase;}
.founder-img .corner{ position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:12px; background: var(--grad-duo); color: var(--accent-ink); display:flex; align-items:center; justify-content:center; font-weight:700; box-shadow: 0 6px 20px -4px oklch(from var(--c-violet) l c h / 0.6);}
.founder-text h3{ margin:0 0 28px; font-size: clamp(28px, 3.2vw, 44px); font-weight:500; letter-spacing:-0.025em; line-height:1.1;}
.founder-text h3 .soft{ color: var(--fg-3); font-weight:300;}
.founder-text h3 .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent; font-family: var(--f-serif); font-style:italic; font-weight:400;}

/* ============================================================
   LEGAL PAGES + COOKIE BANNER (compliance module)
   ============================================================ */

.legal-page .legal-meta{
  font-family: var(--f-mono); font-size:12px; color:var(--fg-3);
  text-transform:uppercase; letter-spacing:.05em; margin:0 0 24px;
}
.legal-body h2{
  margin:40px 0 12px; font-size:1.35rem; font-weight:600;
  color:var(--fg); letter-spacing:-0.01em;
}
.legal-body h3{
  margin:28px 0 10px; font-size:1.1rem; font-weight:600; color:var(--fg);
}
.legal-body p{ margin:0 0 14px;}
.legal-body ul, .legal-body ol{ margin:0 0 16px 22px; padding:0;}
.legal-body li{ margin:0 0 8px;}
.legal-body a{ color:var(--fg); text-decoration:underline; text-underline-offset:3px;}
.legal-body a:hover{ color:var(--accent);}
.legal-body strong{ color:var(--fg); font-weight:600;}
.legal-body em{ font-style:italic;}
.legal-body .legal-table{
  width:100%; margin:16px 0 24px; border-collapse:collapse;
  font-size:.9rem; background:var(--bg-1); border-radius:12px; overflow:hidden;
  border:1px solid var(--line);
}
.legal-body .legal-table th,
.legal-body .legal-table td{
  text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  vertical-align:top;
}
.legal-body .legal-table th{
  background:var(--bg-2); font-family:var(--f-mono); font-size:11px;
  text-transform:uppercase; color:var(--fg-3); letter-spacing:.04em; font-weight:500;
}
.legal-body .legal-table tr:last-child td{ border-bottom:none;}

/* Cookie banner — minimal bottom bar */
.cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  background:var(--glass); backdrop-filter:blur(12px);
  border:1px solid var(--line); border-radius:14px;
  box-shadow: 0 10px 40px -10px oklch(0.22 0.035 275 / 0.25);
  padding:16px 20px;
  display:flex; gap:16px; align-items:center; flex-wrap:wrap;
  font-size:.9rem;
}
.cookie-banner[hidden]{ display:none;}
.cookie-banner__text{ flex:1 1 320px; color:var(--fg-2); line-height:1.5; margin:0;}
.cookie-banner__text a{ color:var(--fg); text-decoration:underline;}
.cookie-banner__actions{
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.cookie-banner button{
  font-family:var(--f-sans); font-size:.85rem; font-weight:500;
  padding:8px 14px; border-radius:8px; cursor:pointer;
  border:1px solid var(--line); background:var(--bg-1); color:var(--fg);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.cookie-banner button:hover{ background:var(--bg-2); border-color:var(--line-2);}
.cookie-banner button.primary{
  background:var(--grad-duo); color:var(--accent-ink); border:none;
}
.cookie-banner button.primary:hover{ filter:brightness(1.06);}
.cookie-banner__prefs{
  flex-basis:100%; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--line); display:flex; gap:14px; align-items:center; flex-wrap:wrap;
}
.cookie-banner__prefs[hidden]{ display:none;}
.cookie-banner__prefs label{
  display:flex; align-items:center; gap:8px; color:var(--fg-2); font-size:.85rem;
}
.cookie-banner__prefs input[type=checkbox]{ accent-color:var(--accent);}
.cookie-banner__prefs .muted{ color:var(--fg-3); font-size:.8rem;}
@media (max-width: 640px){
  .cookie-banner{ left:8px; right:8px; bottom:8px; padding:14px;}
}

/* GDPR form checkbox — reusable partial */
.gdpr-checkbox{
  display:flex; align-items:flex-start; gap:10px;
}
.gdpr-checkbox input[type=checkbox]{
  margin-top:3px; flex-shrink:0; accent-color:var(--accent);
}
.gdpr-checkbox label{
  font-size:.875rem; color:var(--fg-2); line-height:1.5;
}
.gdpr-checkbox label a{
  color:var(--fg); text-decoration:underline;
}

.founder-text p{ color: var(--fg-2); font-size:16px; line-height:1.65; margin:0 0 16px; max-width:56ch;}
.founder-sig{ margin-top:36px; padding-top:20px; border-top:1px solid var(--line); display:flex; justify-content:space-between; align-items:baseline;}
.founder-sig .nm{ font-family: var(--f-serif); font-style:italic; font-size:22px;}
.founder-sig .rl{ font-family:var(--f-mono); font-size:11px; color: var(--fg-3); text-transform:uppercase;}

/* FINAL CTA */
.final{ padding: calc(var(--rhythm) * 1.2) 0; position:relative; overflow:hidden;}
.final::before{ content:""; position:absolute; inset:auto 0 -30% 0; height:80%; background: radial-gradient(800px 400px at 30% 50%, oklch(from var(--c-violet) l c h / 0.28), transparent 70%), radial-gradient(700px 400px at 70% 90%, oklch(from var(--c-cyan) l c h / 0.22), transparent 70%); pointer-events:none;}
.final h2{ margin:0 0 48px; font-family: var(--f-sans); font-weight:500; font-size: clamp(64px, 11vw, 188px); line-height:0.88; letter-spacing:-0.05em; max-width:14ch; position:relative;}
.final h2 .soft{ color: var(--fg-3); font-weight:300;}
.final h2 .grad{ background: var(--grad-duo); -webkit-background-clip:text; background-clip:text; color:transparent; font-family: var(--f-serif); font-style:italic; font-weight:400;}
.final-row{ display:grid; grid-template-columns: 1fr auto; gap:56px; align-items:end; padding-top:36px; border-top:1px solid var(--line); position:relative;}
.final-row p{ max-width:48ch; color: var(--fg-2); font-size:17px; line-height:1.5; margin:0;}
.final-row .cta-stack{ display:flex; gap:10px; flex-wrap:wrap;}
.cta-stack{ display:flex; gap:10px; flex-wrap:wrap;}

/* MOBILE — page-specific */
@media (max-width: 980px){
  .hero-cta-row{ grid-template-columns:1fr; gap:20px;}
  .hero-cta-row .ctas{ align-items:flex-start;}
  .bento{ grid-template-columns:1fr; grid-template-rows:auto; grid-template-areas: "scan" "stat1" "stat2" "recs" "ticker"; min-height:auto;}
  .b-scan{ min-height:380px;}
  .head{ grid-template-columns:1fr; gap:20px;}
  .svcs,.cases,.pricing,.process,.sectors{ grid-template-columns:1fr; gap:12px;}
  .audit-wrap{ padding:32px 24px;}
  .audit-top{ grid-template-columns:1fr; gap:24px;}
  .audit-grid{ grid-template-columns:1fr; gap:24px;}
  .founder{ grid-template-columns:1fr;}
  .final-row{ grid-template-columns:1fr; gap:24px;}
}