/* ==========================================================================
   KOCIAL — Design System
   Cinematic / game-HUD visual language. Zero build step, zero 3rd-party CSS.
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable, latin subset) ---------- */
@font-face{
  font-family:'Inter';src:url('../fonts/Inter-var.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Space Grotesk';src:url('../fonts/SpaceGrotesk-var.woff2') format('woff2');
  font-weight:300 700;font-style:normal;font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  /* surfaces */
  --void:#05060b;
  --bg:#070911;
  --surface:#0c1020;
  --surface-2:#121830;
  --elevated:#18203c;
  --line:rgba(150,175,255,.11);
  --line-strong:rgba(150,175,255,.22);

  /* type */
  --ink:#f2f5ff;
  --ink-dim:#c0cbe0;
  --ink-mute:#98a8c3;

  /* brand */
  --brand:#25e5ff;
  --brand-2:#a855f7;
  --brand-grad:linear-gradient(115deg,#25e5ff 0%,#6d8cff 42%,#a855f7 100%);

  /* divisions */
  --qocial:#25e5ff;
  --media:#a855f7;
  --agency:#ff3d57;
  --astro:#ffc93c;

  /* the accent any given section adopts */
  --accent:var(--brand);
  --accent-soft:color-mix(in srgb,var(--accent) 16%,transparent);
  --accent-line:color-mix(in srgb,var(--accent) 34%,transparent);
  --accent-glow:color-mix(in srgb,var(--accent) 44%,transparent);

  /* metrics */
  --nav-h:64px;
  --pad:clamp(18px,4.2vw,44px);
  --maxw:1240px;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:26px;

  /* type scale — fluid */
  --t-hero:clamp(2.15rem,5.1vw,4.1rem);
  --t-h1:clamp(2.1rem,5.2vw,4rem);
  --t-h2:clamp(1.65rem,3.6vw,2.85rem);
  --t-h3:clamp(1.18rem,2vw,1.55rem);
  --t-body:clamp(1rem,1.05vw,1.09rem);
  --t-sm:.875rem;
  --t-xs:.76rem;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --shadow:0 24px 60px -22px rgba(0,0,0,.9);
  --shadow-glow:0 0 0 1px var(--accent-line),0 18px 60px -24px var(--accent-glow);

  color-scheme:dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:'Inter',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:var(--t-body);line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
h1,h2,h3,h4{font-family:'Space Grotesk',ui-sans-serif,system-ui,sans-serif;
  line-height:1.06;letter-spacing:-.025em;margin:0;font-weight:700;text-wrap:balance}
p{margin:0;text-wrap:pretty}
a{color:inherit;text-decoration:none}
ul,ol{margin:0;padding:0;list-style:none}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:4px}
::selection{background:color-mix(in srgb,var(--brand) 34%,transparent);color:#fff}

/* ---------- Layout ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}
.wrap-wide{max-width:1500px}
.stack{display:flex;flex-direction:column}
.gap-xs{gap:8px}.gap-sm{gap:14px}.gap{gap:24px}.gap-lg{gap:40px}
.grid{display:grid;gap:clamp(16px,2.2vw,26px)}
/* Explicit column counts beat auto-fit for fixed-length card sets:
   auto-fit happily leaves a 4-item grid as 3 + 1 orphan. */
.grid--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:1120px){ .grid--4{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:1000px){ .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:680px){ .grid--4,.grid--3,.grid--2{grid-template-columns:minmax(0,1fr)} }
.center{text-align:center}
.hide{display:none !important}
@media (max-width:860px){ .md-hide{display:none !important} }
@media (min-width:861px){ .md-only{display:none !important} }

/* ---------- Ambient FX layers ---------- */
.fx-grain{
  position:fixed;inset:-120px;z-index:9998;pointer-events:none;opacity:.025;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
  mix-blend-mode:overlay;will-change:transform;animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-6%,4%)}40%{transform:translate(4%,-6%)}
  60%{transform:translate(-4%,-3%)}80%{transform:translate(5%,5%)}100%{transform:translate(0,0)}
}
.fx-vignette{
  position:fixed;inset:0;z-index:9997;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%,transparent 42%,rgba(0,0,0,.55) 100%);
}
.fx-scan{
  position:fixed;inset:0;z-index:9996;pointer-events:none;opacity:.10;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px);
}
@media (prefers-reduced-motion:reduce){ .fx-grain{animation:none} }

/* Aurora / nebula wash used behind hero + section heads */
.aura{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.aura::before,.aura::after{
  content:'';position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;
}
.aura::before{width:60vw;height:60vw;left:-16vw;top:-22vw;
  background:radial-gradient(circle,var(--accent) 0%,transparent 68%)}
.aura::after{width:52vw;height:52vw;right:-14vw;bottom:-26vw;
  background:radial-gradient(circle,var(--brand-2) 0%,transparent 68%);opacity:.3}

/* Grid floor line pattern */
.mesh-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(90% 70% at 50% 40%,#000 10%,transparent 78%);
  -webkit-mask-image:radial-gradient(90% 70% at 50% 40%,#000 10%,transparent 78%);
}

/* ---------- brand + burger (used by the app bar and sheet) ---------- */
.brand{display:flex;align-items:center;gap:10px;font-family:'Space Grotesk';font-weight:700;
  font-size:1.14rem;letter-spacing:-.03em;flex-shrink:0}
.brand__mark{width:28px;height:28px;flex-shrink:0}
.brand__tm{font-size:.62em;vertical-align:super;color:var(--ink-mute);font-weight:500}

.nav__drop{position:relative}
.nav__panel{
  position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 8px;min-width:330px;
  background:color-mix(in srgb,var(--surface) 96%,transparent);
  border:1px solid var(--line);border-radius:var(--radius);padding:8px;
  box-shadow:var(--shadow);opacity:0;visibility:hidden;
  transition:opacity .22s var(--ease),translate .22s var(--ease),visibility .22s;
  backdrop-filter:blur(20px);z-index:30;
}
.nav__drop:hover .nav__panel,.nav__drop:focus-within .nav__panel,
.nav__drop[data-open="true"] .nav__panel{opacity:1;visibility:visible;translate:-50% 0}

/* The start menu hangs off the right-hand CTA, so it anchors to that edge
   rather than centring and running off the viewport. */
.nav__drop--start{position:relative}
.nav__drop--start .nav__panel{left:auto;right:0;translate:0 8px;min-width:336px;max-width:min(94vw,392px)}
.nav__drop--start:hover .nav__panel,.nav__drop--start:focus-within .nav__panel,
.nav__drop--start[data-open="true"] .nav__panel{translate:0 0}
.nav__drop--start > .btn{display:inline-flex;align-items:center;gap:6px}
.nav__drop--start > .btn svg{width:13px;height:13px;transition:rotate .22s var(--ease)}
.nav__drop--start[data-open="true"] > .btn svg{rotate:180deg}

.nav__panel--start{max-height:min(74vh,560px);overflow-y:auto;overscroll-behavior:contain}
/* Below the burger breakpoint the sheet carries these same destinations, so
   the hover panel is removed outright rather than hidden — a 336px panel
   anchored off the right edge overhangs a phone viewport. */
@media (max-width:1040px){ .nav__panel--start{display:none} }
.nav__group{
  font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);
  padding:10px 11px 5px;
}
.nav__group:first-child{padding-top:4px}
.nav__item--start{align-items:center}
.nav__item--start > div{min-width:0;flex:1 1 auto}
.nav__item--start em{
  font-style:normal;flex:0 0 auto;font-size:.66rem;color:var(--ink-mute);
  padding:3px 7px;border-radius:6px;border:1px solid var(--line);
  max-width:40%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.nav__item--start:hover em{color:var(--ink-dim);border-color:var(--line-strong)}

/* the sheet mirrors the same rows on mobile */
.sheet a em{
  font-style:normal;font-size:.68rem;color:var(--ink-mute);margin-left:auto;
  padding-left:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:50%;
}
.sheet a:has(em){display:flex;align-items:center;gap:8px}
.nav__item{display:flex;gap:12px;padding:10px 11px;border-radius:11px;transition:background .18s}
.nav__item:hover{background:rgba(255,255,255,.05)}
.nav__item i{width:9px;height:9px;border-radius:50%;margin-top:7px;flex-shrink:0;
  background:var(--c);box-shadow:0 0 12px var(--c)}
.nav__item b{display:block;font-size:.88rem;font-weight:600;color:var(--ink)}
.nav__item span{display:block;font-size:.76rem;color:var(--ink-mute);line-height:1.45}

.burger{display:none;width:38px;height:38px;border:1px solid var(--line);border-radius:10px;
  background:rgba(255,255,255,.03);cursor:pointer;padding:0;place-items:center;flex-shrink:0}
.burger span{display:block;width:16px;height:1.5px;background:var(--ink);border-radius:2px;
  transition:.3s var(--ease);position:relative}
.burger span::before,.burger span::after{content:'';position:absolute;left:0;width:16px;height:1.5px;
  background:var(--ink);border-radius:2px;transition:.3s var(--ease)}
.burger span::before{top:-5.5px}.burger span::after{top:5.5px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;rotate:45deg}
.burger[aria-expanded="true"] span::after{top:0;rotate:-45deg}

.crumb{display:flex;gap:8px;align-items:center;font-size:var(--t-xs);color:var(--ink-mute);
  letter-spacing:.06em;flex-wrap:wrap}
.crumb a:hover{color:var(--brand)}
.crumb span{opacity:.45}

@media (max-width:1040px){
  .bar__nav{display:none}
  .burger{display:grid}
}

/* ==========================================================================
   BUTTONS / CHIPS
   ========================================================================== */
.btn{
  --_bg:var(--accent);
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:12px 22px;border-radius:11px;font-size:.925rem;font-weight:600;
  border:1px solid transparent;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .2s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease);
  white-space:nowrap;text-align:center;
}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--primary{background:var(--brand-grad);color:#04060f;font-weight:700;
  box-shadow:0 10px 34px -12px var(--accent-glow)}
.btn--primary:hover{box-shadow:0 16px 46px -12px var(--accent-glow)}
.btn--accent{background:var(--accent);color:#04060f;font-weight:700;
  box-shadow:0 10px 34px -12px var(--accent-glow)}
.btn--ghost{background:rgba(255,255,255,.045);border-color:var(--line-strong);color:var(--ink)}
.btn--ghost:hover{background:rgba(255,255,255,.09);border-color:var(--accent-line)}
.btn--line{background:transparent;border-color:var(--accent-line);color:var(--accent)}
.btn--line:hover{background:var(--accent-soft)}
.btn--sm{padding:9px 16px;font-size:.85rem;border-radius:9px}
.btn--lg{padding:15px 30px;font-size:1rem;border-radius:13px}
.btn--block{width:100%}

.chip{
  display:inline-flex;align-self:flex-start;align-items:center;gap:8px;padding:6px 13px;border-radius:99px;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent);
}
.chip__dot{width:6px;height:6px;border-radius:50%;background:currentColor;
  box-shadow:0 0 0 0 currentColor;animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 color-mix(in srgb,currentColor 70%,transparent)}
  70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}
}
@media (prefers-reduced-motion:reduce){ .chip__dot{animation:none} }

.eyebrow{font-size:var(--t-xs);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);display:flex;align-self:flex-start;align-items:center;gap:11px}
.eyebrow::before{content:'';width:26px;height:1px;background:currentColor;opacity:.6}
.eyebrow.center{justify-content:center;align-self:center}

/* ==========================================================================
   CARDS / PANELS
   ========================================================================== */
.panel{
  position:relative;background:linear-gradient(165deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
  border:1px solid var(--line);border-radius:var(--radius);padding:clamp(20px,2.6vw,30px);
  overflow:hidden;transition:border-color .3s var(--ease),transform .3s var(--ease);
}
.panel:hover{border-color:var(--accent-line)}
.panel--pad-lg{padding:clamp(26px,3.4vw,44px)}

/* HUD corner brackets — the "gaming" tell */
.hud{position:relative}
.hud::before,.hud::after{
  content:'';position:absolute;width:16px;height:16px;pointer-events:none;
  border:1.5px solid var(--accent);opacity:.55;transition:.35s var(--ease);
}
.hud::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:var(--radius-sm) 0 0 0}
.hud::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 var(--radius-sm) 0}
.hud:hover::before,.hud:hover::after{width:26px;height:26px;opacity:1}

/* Division card */
.dcard{
  position:relative;display:flex;flex-direction:column;gap:16px;
  padding:clamp(22px,2.6vw,32px);border-radius:var(--radius-lg);
  background:linear-gradient(168deg,color-mix(in srgb,var(--accent) 11%,var(--surface)) 0%,var(--surface) 55%);
  border:1px solid var(--line);overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease-out),border-color .35s,box-shadow .45s var(--ease-out);
}
.dcard::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(90% 70% at 22% 0%,var(--accent-soft),transparent 72%);
}
.dcard:hover{transform:translateY(-6px);border-color:var(--accent-line);
  box-shadow:0 30px 70px -34px var(--accent-glow)}
.dcard:hover::before{opacity:1}
.dcard__num{font-family:'Space Grotesk';font-size:.8rem;font-weight:700;letter-spacing:.16em;
  color:var(--accent);opacity:.85}
.dcard__ico{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;
  background:var(--accent-soft);border:1px solid var(--accent-line);color:var(--accent)}
.dcard__ico svg{width:26px;height:26px}
.dcard h3{font-size:var(--t-h3)}
.dcard p{color:var(--ink-dim);font-size:.95rem}
.dcard__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:6px}
.dcard__tags span{font-size:var(--t-xs);padding:4px 10px;border-radius:7px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);color:var(--ink-dim)}
.dcard__go{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.9rem;
  color:var(--accent);margin-top:4px}
.dcard__go svg{width:15px;height:15px;transition:translate .25s var(--ease)}
.dcard:hover .dcard__go svg{translate:4px 0}

/* Feature / value tiles */
.tile{display:flex;flex-direction:column;gap:11px;padding:clamp(18px,2.2vw,26px);
  border-radius:var(--radius);border:1px solid var(--line);background:rgba(255,255,255,.02);
  transition:.3s var(--ease)}
.tile:hover{background:rgba(255,255,255,.045);border-color:var(--accent-line);transform:translateY(-3px)}
.tile__ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-line)}
.tile__ico svg{width:21px;height:21px}
.tile h3{font-size:1.06rem;letter-spacing:-.015em}
.tile p{font-size:.9rem;color:var(--ink-dim);line-height:1.6}

/* Stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stat{background:var(--surface);padding:clamp(18px,2.4vw,28px);text-align:center}
.stat b{display:block;font-family:'Space Grotesk';font-size:clamp(1.7rem,3.6vw,2.6rem);
  font-weight:700;line-height:1;background:var(--brand-grad);-webkit-background-clip:text;
  background-clip:text;color:transparent;letter-spacing:-.03em}
.stat span{display:block;margin-top:8px;font-size:var(--t-xs);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-mute);font-weight:600}

/* Prose (legal + help pages) */
.prose{max-width:78ch}
.prose h2{font-size:var(--t-h3);margin:44px 0 12px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.02rem;margin:26px 0 8px;font-weight:600}
.prose p{color:var(--ink-dim);margin-bottom:14px}
.prose ul{margin:0 0 18px;padding-left:4px;display:flex;flex-direction:column;gap:9px}
.prose ul li{color:var(--ink-dim);padding-left:24px;position:relative}
.prose ul li::before{content:'';position:absolute;left:6px;top:.62em;width:6px;height:6px;
  border-radius:50%;background:var(--accent);opacity:.8}
.prose a{color:var(--brand);text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb,var(--brand) 40%,transparent)}
.prose a:hover{text-decoration-color:var(--brand)}
.prose strong{color:var(--ink);font-weight:600}
.prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;
  background:rgba(255,255,255,.07);padding:2px 7px;border-radius:6px;color:var(--brand)}

/* Accordion (FAQ) */
.acc{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:rgba(255,255,255,.02)}
.acc + .acc{margin-top:10px}
.acc summary{
  padding:18px 22px;cursor:pointer;font-weight:600;font-size:1rem;list-style:none;
  display:flex;align-items:center;gap:14px;transition:background .2s;
}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{background:rgba(255,255,255,.035)}
.acc summary::after{
  content:'';margin-left:auto;width:9px;height:9px;flex-shrink:0;
  border-right:2px solid var(--ink-mute);border-bottom:2px solid var(--ink-mute);
  rotate:45deg;transition:.3s var(--ease);translate:0 -2px;
}
.acc[open] summary::after{rotate:-135deg;translate:0 2px;border-color:var(--accent)}
.acc[open] summary{color:var(--accent)}
.acc__body{padding:0 22px 20px;color:var(--ink-dim);font-size:.94rem;line-height:1.65}
.acc__body p + p{margin-top:10px}

/* Code block */
.code{
  position:relative;background:#05070f;border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;
}
.code__bar{display:flex;align-items:center;gap:10px;padding:10px 14px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.025)}
.code__bar b{font-size:var(--t-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:600}
.code__copy{margin-left:auto;background:rgba(255,255,255,.06);border:1px solid var(--line);
  border-radius:7px;padding:5px 11px;font-size:var(--t-xs);font-weight:600;cursor:pointer;
  color:var(--ink-dim);transition:.2s}
.code__copy:hover{background:rgba(255,255,255,.12);color:var(--ink)}
.code__copy[data-done="true"]{color:#4ade80;border-color:rgba(74,222,128,.4)}
.code pre{margin:0;padding:16px 18px;overflow-x:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.83rem;line-height:1.7;color:#cfd8f0;-webkit-overflow-scrolling:touch}
.code .k{color:#ff7bac}.code .s{color:#8ce99a}.code .a{color:#7cc3ff}.code .c{color:#5f6b8a}

/* Table */
.tbl{width:100%;overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius)}
.tbl table{width:100%;border-collapse:collapse;min-width:420px;font-size:.9rem}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-bottom:1px solid var(--line)}
.tbl th{font-size:var(--t-xs);letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-mute);font-weight:700;background:rgba(255,255,255,.025)}
.tbl tr:last-child td{border-bottom:0}
.tbl td{color:var(--ink-dim)}
.tbl td code{font-family:ui-monospace,Menlo,monospace;font-size:.85em;color:var(--brand)}

/* Forms */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:var(--t-sm);font-weight:600;color:var(--ink-dim)}
.field input,.field textarea,.field select{
  width:100%;padding:12px 15px;border-radius:11px;background:rgba(255,255,255,.04);
  border:1px solid var(--line);color:var(--ink);transition:.2s var(--ease);font-size:.95rem;
}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--accent);background:rgba(255,255,255,.07);
  box-shadow:0 0 0 3px var(--accent-soft)}
.field textarea{resize:vertical;min-height:130px}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute)}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
[data-reveal]{opacity:0;translate:0 22px;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out)}
[data-reveal].is-in{opacity:1;translate:0}
[data-reveal][data-d="1"]{transition-delay:.08s}
[data-reveal][data-d="2"]{transition-delay:.16s}
[data-reveal][data-d="3"]{transition-delay:.24s}
[data-reveal][data-d="4"]{transition-delay:.32s}
[data-reveal][data-d="5"]{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  [data-reveal]{opacity:1 !important;translate:0 !important;transition:none !important}
}

/* Gradient text util */
.grad{background:var(--brand-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent;padding-right:.06em}
.accent{color:var(--accent)}
.dim{color:var(--ink-dim)}
.mute{color:var(--ink-mute)}
.lead{font-size:clamp(1.02rem,1.5vw,1.2rem);color:var(--ink-dim);line-height:1.7;max-width:64ch}

/* Skip link */
.skip{position:absolute;left:-9999px;top:0;z-index:9999;padding:12px 20px;
  background:var(--brand);color:#000;font-weight:700;border-radius:0 0 10px 0}
.skip:focus{left:0}


/* Ambient section canvases (interior page headers) */
.scene{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.1s var(--ease-out)}
.scene[data-gl="ready"]{opacity:1}
.scene canvas{width:100%;height:100%;display:block}

/* Canvas host */
.gl{position:absolute;inset:0;z-index:1;pointer-events:none}
.gl canvas{width:100%;height:100%;display:block}
.gl[data-interactive="true"]{pointer-events:auto}