/* ============================================================
   Secur8 — Cinematic dark · Pay & Unlock
   Immersive, Apple-calm. Void background, blue light, big type.
   Flat color (light/glow is luminance, not gradient fills).
   ============================================================ */

:root {
  --void:   #05070C;
  --void-2: #080B12;
  --panel:  #0D121C;
  --panel-2:#111826;
  --blue:   #2E7DFF;
  --blue-2: #5B9AFF;
  --blue-dim: rgba(46,125,255,.14);
  --ice:    #EDF2FB;
  --fog:    #9AA6BC;   /* secondary text */
  --fog-2:  #5F6B82;   /* muted / captions */
  --line:   rgba(255,255,255,.09);
  --line-2: rgba(255,255,255,.14);

  --f: "General Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;

  --fs-micro: .74rem;
  --fs-sm:  .9375rem;
  --fs-base: clamp(1rem, .97rem + .18vw, 1.1rem);
  --fs-lead: clamp(1.15rem, 1rem + .7vw, 1.6rem);
  --fs-h3:  clamp(1.25rem, 1.05rem + .8vw, 1.7rem);
  --fs-h2:  clamp(2rem, 1.3rem + 3vw, 4rem);
  --fs-h1:  clamp(3rem, 1.6rem + 6vw, 8.5rem);

  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem;
  --s6:4.5rem; --s7:7rem; --s8:10rem;

  --maxw: 1240px;
  --gutter: clamp(1.5rem, 5vw, 5.5rem);
  --r: 18px;
  --ease: cubic-bezier(.22,1,.36,1);
  --header-h: 74px;
}

*,*::before,*::after { box-sizing:border-box; }
* { margin:0; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--void); }
body {
  font-family:var(--f); font-size:var(--fs-base); line-height:1.65;
  color:var(--ice); background:var(--void);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg,canvas { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; color:inherit; }
ul { list-style:none; padding:0; }
::selection { background:var(--blue); color:#fff; }
:focus-visible { outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

/* Layout */
.wrap { max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.section { padding-block:clamp(5rem,12vw,9rem); position:relative; }
.section--tight { padding-block:clamp(3.5rem,7vw,5.5rem); }

/* Typography */
h1,h2,h3,h4 { font-weight:600; line-height:1.02; letter-spacing:-.035em; overflow-wrap:break-word; }
h1 { font-size:var(--fs-h1); letter-spacing:-.05em; line-height:.95; }
h2 { font-size:var(--fs-h2); letter-spacing:-.04em; }
h3 { font-size:var(--fs-h3); line-height:1.15; letter-spacing:-.02em; }
.lead { font-size:var(--fs-lead); line-height:1.45; color:var(--fog); font-weight:400; letter-spacing:-.01em; }
.muted { color:var(--fog); }
.dim { color:var(--fog-2); }

.eyebrow {
  font-family:var(--mono); font-size:var(--fs-micro); font-weight:500;
  letter-spacing:.24em; text-transform:uppercase; color:var(--blue-2);
  display:inline-flex; align-items:center;
}

.grad-line { height:1px; background:var(--line); border:0; }

/* Buttons */
.btn {
  --bg:var(--ice); --fg:var(--void); --bd:var(--ice);
  display:inline-flex; align-items:center; gap:.6em;
  padding:.95em 1.7em; font-size:var(--fs-sm); font-weight:600;
  color:var(--fg); background:var(--bg); border:1px solid var(--bd);
  border-radius:100px;
  transition:transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), box-shadow .3s var(--ease);
}
.btn .arrow { transition:transform .3s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }
.btn:active { transform:translateY(1px); }
.btn--primary { --bg:var(--blue); --fg:#fff; --bd:var(--blue); }
.btn--primary:hover { --bg:#4A8CFF; --bd:#4A8CFF; }
.btn--ghost { --bg:transparent; --fg:var(--ice); --bd:var(--line-2); }
.btn--ghost:hover { --bd:var(--ice); }
.btn-row { display:flex; flex-wrap:wrap; gap:var(--s2); }

.tlink { display:inline-flex; align-items:center; gap:.5em; font-weight:600; font-size:var(--fs-sm); color:var(--blue-2); }
.tlink .arrow { transition:transform .3s var(--ease); }
.tlink:hover .arrow { transform:translateX(4px); }

/* Header */
.site-header {
  position:sticky; top:0; z-index:100;
  background:rgba(5,7,12,.6); backdrop-filter:saturate(160%) blur(16px);
  border-bottom:1px solid var(--line);
}
.site-header__in { height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:var(--s3); }
.brand { display:inline-flex; align-items:center; }
.brand__logo { height:26px; width:auto; display:block; }
@media (max-width:520px){ .brand__logo { height:22px; } }

.nav { display:flex; align-items:center; gap:clamp(1.5rem,3vw,2.5rem); }
.nav a { font-size:var(--fs-sm); font-weight:500; color:var(--fog); position:relative; padding-block:.4em; transition:color .2s var(--ease); }
.nav a:hover, .nav a[aria-current="page"] { color:var(--ice); }
.nav a[aria-current="page"]::after { content:""; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--blue); }

.h-actions { display:flex; align-items:center; gap:var(--s2); }
.nav__cta { display:none; }

/* Language */
.lang { position:relative; }
.lang__btn { display:inline-flex; align-items:center; gap:.5em; padding:.5em .8em; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.08em; color:var(--ice); background:transparent; border:1px solid var(--line-2); border-radius:100px; transition:border-color .2s var(--ease); }
.lang__btn:hover { border-color:var(--ice); }
.lang__btn .chev { transition:transform .25s var(--ease); }
.lang[data-open="true"] .chev { transform:rotate(180deg); }
.lang__menu { position:absolute; right:0; top:calc(100% + 8px); min-width:150px; background:var(--panel); border:1px solid var(--line-2); border-radius:12px; box-shadow:0 24px 60px rgba(0,0,0,.5); padding:5px; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s; }
.lang[data-open="true"] .lang__menu { opacity:1; visibility:visible; transform:translateY(0); }
.lang__menu button { display:flex; width:100%; align-items:center; justify-content:space-between; gap:1em; padding:.65em .8em; background:transparent; border:0; border-radius:8px; font-size:var(--fs-sm); color:var(--fog); text-align:left; transition:background .15s,color .15s; }
.lang__menu button:hover { background:var(--panel-2); color:var(--ice); }
.lang__menu button[aria-selected="true"] { color:var(--ice); font-weight:600; }
.lang__menu .tick { opacity:0; color:var(--blue-2); }
.lang__menu button[aria-selected="true"] .tick { opacity:1; }

.nav-toggle { display:none; flex-direction:column; gap:5px; padding:8px; background:transparent; border:0; }
.nav-toggle span { width:22px; height:2px; background:var(--ice); transition:transform .3s var(--ease), opacity .2s; }
@media (max-width:880px){
  .nav-toggle { display:flex; }
  .h-actions > .btn--primary { display:none; }
  .nav { position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0; background:var(--void-2); border-bottom:1px solid var(--line); padding:var(--s2) var(--gutter) var(--s4); transform:translateY(-120%); transition:transform .4s var(--ease); box-shadow:0 24px 48px rgba(0,0,0,.5); max-height:calc(100dvh - var(--header-h)); overflow-y:auto; }
  body[data-nav="open"] .nav { transform:translateY(0); }
  .nav a { width:100%; padding:1em 0; font-size:1.1rem; border-bottom:1px solid var(--line); }
  .nav a[aria-current="page"]::after { display:none; }
  .nav__cta { display:inline-flex; justify-content:center; margin-top:var(--s3); color:#fff; }
  body[data-nav="open"] .nav-toggle span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  body[data-nav="open"] .nav-toggle span:nth-child(2){ opacity:0; }
  body[data-nav="open"] .nav-toggle span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* ===== HERO — 2 columns: text left, living ∞ right ===== */
/* fill exactly the space under the sticky header, and center content in it */
.hero { position:relative; min-height:calc(100svh - var(--header-h)); display:flex; align-items:center; overflow:hidden; }
.hero__grid { position:relative; z-index:2; width:100%; display:grid; gap:var(--s5); align-items:center; padding-block:var(--s5); }
@media (min-width:920px){ .hero__grid { grid-template-columns:1.05fr .95fr; gap:var(--s6); } }
.hero__copy { max-width:40rem; }
.hero .eyebrow { font-size:.82rem; letter-spacing:.26em; }
/* one line, a touch smaller than the giant default */
.hero__title { font-size:clamp(2.5rem, 1.6rem + 3.4vw, 5rem); white-space:nowrap; margin-block:.32em 0; line-height:1; }
.hero h1 .accent { color:var(--blue-2); }
.hero__sub { color:var(--fog); font-size:var(--fs-lead); line-height:1.4; max-width:34ch; margin-top:var(--s3); font-weight:400; letter-spacing:-.01em; }
.hero .btn-row { margin-top:var(--s5); }
@media (max-width:560px){
  .hero .eyebrow { font-size:.66rem; letter-spacing:.14em; }
  .hero__title { font-size:clamp(2.6rem, 2rem + 6vw, 4rem); }
  .hero .btn-row .btn { flex:1 1 auto; justify-content:center; }
}

/* living infinity stage (right column) */
.hero__inf { position:relative; aspect-ratio:1/1; width:100%; display:block; }
.hero__inf-glow { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:80%; height:60%; border-radius:50%; background:var(--blue); filter:blur(120px); opacity:.24; z-index:0; }
.hero__inf canvas { position:absolute; inset:0; width:100%; height:100%; z-index:1; }
@media (max-width:919px){ .hero__inf { max-width:460px; margin-inline:auto; } }
@media (max-width:600px){ .hero__inf { max-width:320px; } }

/* scroll cue */
.scroll-cue { position:absolute; left:50%; bottom:var(--s4); transform:translateX(-50%); z-index:3; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.2em; text-transform:uppercase; color:var(--fog-2); display:flex; flex-direction:column; align-items:center; gap:.6em; }
.scroll-cue .bar { width:1px; height:34px; background:linear-gradient(var(--fog-2), transparent); }

/* Section head */
.sec-head { max-width:60ch; margin-bottom:clamp(3rem,6vw,5rem); }
.sec-head h2 { margin-top:var(--s3); }
.sec-head p { margin-top:var(--s3); }
.sec-head--center { margin-inline:auto; text-align:center; }
.sec-head--center .eyebrow { justify-content:center; }

/* Split */
.split { display:grid; gap:var(--s5); align-items:center; }
@media (min-width:920px){ .split { grid-template-columns:1fr 1fr; gap:var(--s7); } .split--flip>:first-child { order:2; } }

/* Glass panel visual */
.panel {
  position:relative; aspect-ratio:4/3; border-radius:var(--r); overflow:hidden;
  background:var(--panel); border:1px solid var(--line); display:grid; place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 40px 80px -40px rgba(0,0,0,.8);
}
.panel__glow { position:absolute; width:60%; height:60%; border-radius:50%; background:var(--blue); filter:blur(90px); opacity:.18; }
.panel svg { position:relative; width:50%; height:auto; }
.panel__tag { position:absolute; left:var(--s3); bottom:var(--s3); font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; color:var(--fog-2); }

/* Device / phone image area — you drop a real phone-mockup PNG here.
   Portrait aspect, glow behind, so a transparent PNG sits cleanly. */
.device {
  position:relative; border-radius:calc(var(--r) + 6px); overflow:hidden;
  background:var(--panel); border:1px solid var(--line);
  display:grid; place-items:center; min-height:clamp(360px, 46vw, 560px); padding:var(--s5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04), 0 50px 100px -50px rgba(0,0,0,.85);
}
.device__glow { position:absolute; width:62%; height:56%; border-radius:50%; background:var(--blue); filter:blur(100px); opacity:.2; pointer-events:none; }
.device__img { position:relative; z-index:1; max-height:100%; width:auto; max-width:78%; object-fit:contain; }
/* placeholder shown until a real PNG replaces .device__img src */
.device__ph { position:relative; z-index:1; text-align:center; color:var(--fog-2); font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; text-transform:uppercase; line-height:2; border:1px dashed var(--line-2); border-radius:26px; width:min(58%,220px); aspect-ratio:9/19; display:grid; place-items:center; padding:var(--s3); }
.device__tag { position:absolute; left:var(--s4); bottom:var(--s4); z-index:2; font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.12em; color:var(--fog-2); }


/* Steps — a drawn timeline */
.beats { display:grid; gap:var(--s5); position:relative; }
@media (min-width:820px){ .beats { grid-template-columns:repeat(3,1fr); gap:var(--s4); } }
.beat { position:relative; padding-top:var(--s5); }
.beat::before { content:""; position:absolute; top:0; left:0; width:100%; height:1px; background:var(--line); }
.beat::after { content:""; position:absolute; top:-4px; left:0; width:9px; height:9px; border-radius:50%; background:var(--blue); box-shadow:0 0 16px var(--blue); }
.beat__n { font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.14em; color:var(--blue-2); }
.beat h3 { margin-block:var(--s3) var(--s2); font-size:clamp(1.6rem,3vw,2.4rem); }
.beat p { color:var(--fog); font-size:var(--fs-sm); }

/* Feature cards — glowing on hover */
.feat { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:640px){ .feat { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .feat--4 { grid-template-columns:repeat(4,1fr); } }
@media (min-width:900px){ .feat--3 { grid-template-columns:repeat(3,1fr); } }
.f { background:var(--void); padding:var(--s5) var(--s4); transition:background .4s var(--ease); position:relative; }
.f:hover { background:var(--panel); }
.f__ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--blue-2); margin-bottom:var(--s4); transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.f:hover .f__ic { border-color:var(--blue); box-shadow:0 0 24px -6px var(--blue); }
.f h3 { font-size:var(--fs-h3); margin-bottom:var(--s2); }
.f p { color:var(--fog); font-size:var(--fs-sm); }
.ic { width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }

/* Modules grid (Platform) — 6 module cards + a portal image filling bottom-right */
.mod-grid { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.mod-grid .f { background:var(--void); padding:var(--s5) var(--s4); transition:background .4s var(--ease); }
.mod-grid .f:hover { background:var(--panel); }
.mod-shot { margin:0; background:var(--panel-2); overflow:hidden; padding:0; }
.mod-shot img { display:block; width:100%; height:100%; object-fit:cover; }
/* layout: 2 cols on small, 4 cols on large with image spanning last 2 (bottom-right) */
@media (min-width:560px){ .mod-grid { grid-template-columns:repeat(2,1fr); } .mod-shot { grid-column:1 / -1; min-height:260px; } }
@media (min-width:1000px){
  .mod-grid { grid-template-columns:repeat(4,1fr); }
  /* 6 cards occupy row1 (4) + row2 first 2; image spans cols 3-4 of row2 */
  .mod-shot { grid-column:3 / 5; grid-row:2; min-height:auto; }
}

/* About photo */
.about-shot { margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); }
.about-shot img { display:block; width:100%; height:100%; object-fit:cover; }

/* Console shot (Solutions → platform section) — matches the left column height */
.console-shot { margin:0; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); box-shadow:0 40px 80px -40px rgba(0,0,0,.9); height:100%; }
.console-shot img { display:block; width:100%; height:100%; object-fit:cover; }
/* stretch the split cells so the image can fill the row height */
#platform .split { align-items:stretch; }
#platform .split > .reveal:last-child { display:flex; }
@media (max-width:919px){ .console-shot { height:auto; } .console-shot img { height:auto; } }

/* Sectors — icon grid (Solutions) */
.sectors { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:560px){ .sectors { grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .sectors { grid-template-columns:repeat(3,1fr); } }
@media (min-width:1140px){ .sectors { grid-template-columns:repeat(4,1fr); } }
.sector { background:var(--void); padding:var(--s5) var(--s4); transition:background .4s var(--ease); min-height:200px; display:flex; flex-direction:column; }
.sector:hover { background:var(--panel); }
.sector__ic { width:46px; height:46px; border-radius:12px; display:grid; place-items:center; border:1px solid var(--line-2); color:var(--blue-2); margin-bottom:auto; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); }
.sector:hover .sector__ic { border-color:var(--blue); box-shadow:0 0 24px -6px var(--blue); }
.sector h3 { font-size:1.4rem; margin-top:var(--s4); }
.sector p { color:var(--fog); font-size:var(--fs-sm); margin-top:.5em; }
/* concept photo filling the last (bottom-right) grid cell */
.sector-shot { margin:0; padding:0; overflow:hidden; background:var(--panel-2); min-height:200px; }
.sector-shot img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }

/* Industries — cinematic rows that light up */
.rows { border-top:1px solid var(--line); }
.ind { display:grid; gap:.5rem var(--s4); padding-block:var(--s5); border-bottom:1px solid var(--line); align-items:baseline; transition:padding .3s var(--ease); position:relative; }
@media (min-width:720px){ .ind { grid-template-columns:.16fr .44fr 1.4fr; align-items:center; } }
.ind__n { font-family:var(--mono); font-size:var(--fs-micro); color:var(--fog-2); letter-spacing:.12em; }
.ind h3 { font-size:clamp(1.6rem,3.5vw,2.6rem); font-weight:600; letter-spacing:-.03em; transition:color .3s var(--ease); }
.ind p { color:var(--fog); font-size:var(--fs-sm); }
.ind:hover h3 { color:var(--blue-2); }

/* Stats */
.stats { display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
@media (min-width:640px){ .stats { grid-template-columns:repeat(3,1fr); } }
.stat { background:var(--void); padding:var(--s5) var(--s4); }
.stat__v { font-size:clamp(2.6rem,5vw,3.8rem); font-weight:600; letter-spacing:-.04em; }
.stat__v .u { color:var(--blue-2); }
.stat__k { font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--fog); margin-top:.6em; }

/* Ticks */
.ticks { display:grid; gap:.8em; margin-top:var(--s3); }
.ticks li { font-size:var(--fs-sm); color:var(--fog); padding-left:1.7em; position:relative; }
/* proper checkmark: a short-left/long-down corner rotated 45° */
.ticks li::before { content:""; position:absolute; left:1px; top:.42em; width:6px; height:10px; border:2px solid var(--blue); border-top:0; border-left:0; transform:rotate(45deg); }

/* Badges */
.badges { display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3); }
.badge { font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.08em; padding:.5em 1em; border:1px solid var(--line-2); border-radius:100px; color:var(--fog); }

/* CTA */
.cta { text-align:center; position:relative; overflow:hidden; }
.cta__glow { position:absolute; left:50%; top:50%; width:70%; height:120%; transform:translate(-50%,-50%); background:var(--blue); filter:blur(140px); opacity:.12; pointer-events:none; }
.cta h2 { max-width:16ch; margin-inline:auto; position:relative; }
.cta .lead { max-width:44ch; margin:var(--s3) auto 0; position:relative; }
.cta .btn-row { justify-content:center; margin-top:var(--s5); position:relative; }

/* Forms */
.form { display:grid; gap:var(--s3); }
.field { display:grid; gap:.5em; }
.field label { font-size:var(--fs-sm); font-weight:600; }
.field .req { color:var(--blue-2); }
.field input,.field select,.field textarea { font:inherit; font-size:var(--fs-sm); padding:.9em 1em; color:var(--ice); background:var(--panel); border:1px solid var(--line-2); border-radius:12px; width:100%; transition:border-color .2s var(--ease), box-shadow .2s var(--ease); }
.field input::placeholder,.field textarea::placeholder { color:var(--fog-2); }
.field input:focus,.field select:focus,.field textarea:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px var(--blue-dim); }
.field select { color:var(--ice); }
.field select option { background:var(--panel); }
.field textarea { resize:vertical; min-height:130px; }
.field--row { display:grid; gap:var(--s3); }
@media (min-width:640px){ .field--row { grid-template-columns:1fr 1fr; } }
.consent { display:flex; gap:.75em; align-items:flex-start; font-size:var(--fs-sm); color:var(--fog); }
.consent input { width:18px; height:18px; margin-top:.2em; accent-color:var(--blue); }
.note { font-family:var(--mono); font-size:var(--fs-micro); color:var(--fog-2); letter-spacing:.03em; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.g-recaptcha { min-height:78px; }
.form-note { font-size:var(--fs-sm); line-height:1.45; padding:.85em 1em; border-radius:12px; border:1px solid var(--line-2); background:var(--panel); color:var(--fog); }
.form-note[data-state="ok"] { border-color:var(--blue); color:var(--ice); }
.form-note[data-state="error"] { border-color:#C4453D; color:#F3B4B0; }
.btn[disabled] { opacity:.55; pointer-events:none; }

.clist { display:grid; }
.clist .addr { font-size:var(--fs-base); line-height:1.8; margin-bottom:var(--s3); }
.clist .r { display:grid; grid-template-columns:6.5rem 1fr; gap:.3rem 1rem; padding-block:var(--s2); border-bottom:1px solid var(--line); align-items:baseline; }
.clist .r:first-of-type { border-top:1px solid var(--line); }
.clist dt { font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.08em; text-transform:uppercase; color:var(--fog-2); }
.clist dd { font-size:var(--fs-sm); }

/* Footer */
.site-footer { background:var(--void-2); border-top:1px solid var(--line); padding-block:var(--s7) var(--s4); }
.site-footer a { color:var(--fog); transition:color .2s var(--ease); }
.site-footer a:hover { color:var(--ice); }
.f-grid { display:grid; gap:var(--s5); }
@media (min-width:720px){ .f-grid { grid-template-columns:2fr 1fr 1fr; } }
.f-brand p { color:var(--fog); font-size:var(--fs-sm); max-width:32ch; margin-top:var(--s3); }
.f-col h4 { font-family:var(--mono); font-size:var(--fs-micro); font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fog-2); margin-bottom:var(--s3); }
.f-col li { margin-bottom:.7em; font-size:var(--fs-sm); }
.f-bot { display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:space-between; align-items:center; margin-top:var(--s6); padding-top:var(--s3); border-top:1px solid var(--line); }
.f-bot p { font-family:var(--mono); font-size:var(--fs-micro); letter-spacing:.03em; color:var(--fog-2); }

/* Interior hero */
.page-hero { padding-block:clamp(4rem,9vw,7rem) clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.page-hero__glow { position:absolute; right:-10%; top:-40%; width:50%; height:160%; background:var(--blue); filter:blur(160px); opacity:.1; pointer-events:none; }
.page-hero h1 { font-size:clamp(2.6rem,1.6rem+4vw,5.5rem); margin-top:var(--s3); position:relative; }
.page-hero .lead { margin-top:var(--s3); max-width:52ch; position:relative; }

/* Reveal */
.reveal { opacity:0; transform:translateY(30px); transition:opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.1s; } .reveal[data-d="2"]{ transition-delay:.2s; } .reveal[data-d="3"]{ transition-delay:.3s; }

/* Utils */
.skip { position:absolute; left:-999px; top:0; z-index:200; background:var(--ice); color:var(--void); padding:.75em 1.25em; border-radius:10px; }
.skip:focus { left:var(--gutter); top:var(--s2); }
[hidden]{ display:none!important; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important; }
  .reveal { opacity:1; transform:none; }
}