/* ==========================================================================
   Insuralyzer landing — style.css
   Vanilla CSS, token-driven, dark default / light via [data-theme="light"].
   ========================================================================== */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[class], ol[class] { list-style: none; padding: 0; }
img, picture, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }

/* ---------- Tokens ---------- */
:root{
  --bg:#07090d; --bg-2:#0b0e14; --surface:#0f131a; --surface-2:#141a23;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --text:#e8ecf2; --muted:#9aa4b2; --faint:#78828f;
  --brand:#ff1a72; --brand-fill:#e6005f; --on-brand:#ffffff; --brand-glow:rgba(255,26,114,.28);
  --signal:#22d3ee; --ok:#34d399; --warn:#f5b342; --danger:#f87171;
  --grid:rgba(255,255,255,.035);
  --radius-sm:2px; --radius-md:3px; --radius-lg:4px; --nav-h:64px; /* rectilinear, Palantir-calibrated */
  --wrap:min(1440px, 100% - 48px); --measure:62ch;
  --font-sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --bg:#f6f7f9; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#eef1f5;
  --line:rgba(15,23,42,.08); --line-strong:rgba(15,23,42,.16);
  --text:#0f172a; --muted:#4b5563; --faint:#6b7280;
  --brand:#d1005a; --brand-fill:#e6005f; --on-brand:#ffffff; --brand-glow:rgba(230,0,95,.18);
  --signal:#0e7490; --ok:#047857; --warn:#b45309; --danger:#b91c1c;
  --grid:rgba(15,23,42,.05);
  color-scheme:light;
}

/* Blanket transition while the theme swaps (removed by JS after 300ms) */
.theme-transitioning, .theme-transitioning *{
  transition: background-color .3s ease, border-color .3s ease, color .3s ease !important;
}

/* ---------- Base ---------- */
html{ scroll-behavior:smooth; }
body{
  background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
main{ display:block; }
::selection{ background:var(--brand); color:var(--on-brand); }

h1,h2,h3{ color:var(--text); }
h1{
  font-size:clamp(3.2rem, 7.4vw, 5rem); line-height:0.98; font-weight:420;
  letter-spacing:-0.042em; font-variation-settings:"wght" 420;
}
h1 em{ font-style:normal; color:var(--brand); }
h2{
  font-size:clamp(2rem, 4vw, 3rem); line-height:1.05; font-weight:450;
  letter-spacing:-0.03em; font-variation-settings:"wght" 450;
}
h3{ font-size:1.125rem; font-weight:550; letter-spacing:-0.01em; font-variation-settings:"wght" 550; }
.lede{ font-size:clamp(1.1rem, 1.7vw, 1.3rem); font-weight:400; color:var(--muted); max-width:var(--measure); }
.lede strong{ color:var(--text); font-weight:600; }

/* A small number of "hook" lines (the two rewritten H2s, two use-case
   bodies) carry real weight on purpose — a deliberate exception to the
   H1/H2 "never bold" rule, not a general pattern. */
.punchline{ font-weight:700; }
.bold-body{ color:var(--text); font-weight:600; }
p{ color:var(--muted); }

.mono{ font-family:var(--font-mono); }
/* Display-scale section index — not a small label chip. The numeral+dash
   (wrapped in .eyebrow-num by the i18n dictionary) carries the brand colour;
   the rest of the line is full text colour. A hairline sits above, generous
   space below before the section's own title/content. */
.eyebrow{
  display:block; position:relative;
  font-family:var(--font-mono); text-transform:uppercase;
  /* Tuned so the longest title in either language (ES "02 — FUENTES REVISADAS
     EN CADA EJECUCIÓN", 40 mono chars) fits one line, unwrapped, at 768/1080/
     1440 viewport widths — verified empirically against the rendered page,
     not just font-metric estimates. */
  font-size:clamp(1.75rem, 3.6vw, 3.4rem); font-weight:500; line-height:1.08;
  letter-spacing:.04em; color:var(--text);
  padding-top:28px; margin-bottom:40px;
}
.eyebrow::before{
  content:""; position:absolute; top:0; left:0; width:48px; height:1px; background:var(--line-strong);
}
.eyebrow .eyebrow-num{ color:var(--brand); }

/* Section eyebrows (not the hero's, which stays in the narrower hero-copy
   column and wraps safely there) go single-line once there's room for the
   longest title to fit without overflowing. */
@media (min-width:768px){
  .section-head .eyebrow{ white-space:nowrap; }
}

/* ---------- Layout utilities ---------- */
.wrap{ width:var(--wrap); margin-inline:auto; }
.bg-grid{
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
          mask-image:linear-gradient(to bottom, transparent, black 8%, black 92%, transparent);
}
.section{
  position:relative;
  padding-block:clamp(72px, 9vw, 120px);
  border-bottom:1px solid var(--line);
}
.section:last-of-type{ border-bottom:none; }
.section-head{ margin-bottom:48px; }
.section-head h2{ max-width:var(--measure); margin-bottom:14px; }
.section-head > .lede{ max-width:var(--measure); }

.reveal{ opacity:0; transform:translateY(16px); transition:opacity .6s ease-out, transform .6s ease-out; }
.reveal.in{ opacity:1; transform:none; }

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

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 20px; min-height:48px; border-radius:var(--radius-sm);
  font-weight:500; font-size:.95rem; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, transform .15s ease, opacity .15s ease;
}
.btn-primary{ background:var(--brand-fill); color:var(--on-brand); }
.btn-primary:hover{ opacity:.92; }
.btn-primary:active{ transform:translateY(1px); }
.btn-ghost{ border:1px solid var(--line-strong); color:var(--text); background:transparent; }
.btn-ghost:hover{ border-color:var(--brand); }
.btn-link{ height:auto; padding:0; color:var(--signal); font-weight:600; gap:6px; }
.btn-link:hover{ text-decoration:underline; text-underline-offset:3px; }
.btn svg{ width:16px; height:16px; flex:none; }

/* focus rings everywhere */
a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible{
  outline:2px solid var(--brand); outline-offset:3px; border-radius:4px;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:fixed; top:-60px; left:12px; z-index:1000;
  background:var(--brand-fill); color:var(--on-brand);
  padding:10px 18px; border-radius:var(--radius-sm); font-weight:600;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

/* ---------- Icons ---------- */
.icon{
  width:18px; height:18px; flex:none;
  stroke:currentColor; fill:none;
  stroke-width:1.75px; stroke-linecap:round; stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

/* Full-colour brand badges (Google/Facebook/Instagram/LinkedIn/TikTok/website
   favicon) — fixed fills baked into the symbol, no currentColor/stroke rules. */
.badge{ width:18px; height:18px; flex:none; border-radius:50%; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:100; height:var(--nav-h);
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:none;
  border-bottom:1px solid var(--line);
}
.nav-inner{
  width:var(--wrap); margin-inline:auto; height:100%;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.nav-logo{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-logo .brand-spy{ height:28px; width:28px; flex:none; border-radius:6px; }
.nav-logo .brand-word{ height:20px; width:auto; }

/* Theme-swapped wordmark PNGs (cennairus mechanism): dark-bg gets the white-ink
   file, light-bg gets the navy-ink file. The spy icon itself is theme-neutral. */
.logo-on-light{ display:none; }
:root[data-theme="light"] .logo-on-dark{ display:none; }
:root[data-theme="light"] .logo-on-light{ display:block; }

.nav-links{ display:none; align-items:center; gap:28px; }
.nav-links a{
  font-size:.9rem; font-weight:500; color:var(--muted);
  transition:color .15s ease;
}
.nav-links a:hover{ color:var(--text); }

.nav-right{ display:flex; align-items:center; gap:14px; }

.lang-pill{
  display:flex; align-items:center; border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); overflow:hidden; font-family:var(--font-mono); font-size:12px;
  font-weight:600; letter-spacing:.04em; flex:none;
}
.lang-pill button{
  padding:8px 13px; min-height:40px; display:inline-flex; align-items:center;
  color:var(--faint); transition:color .15s ease, background-color .15s ease;
}
.lang-pill button[aria-pressed="true"]{ background:var(--brand-fill); color:var(--on-brand); }
.lang-pill button:not([aria-pressed="true"]):hover{ color:var(--text); }

.theme-toggle{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--line-strong);
  color:var(--text); flex:none;
}
.theme-toggle:hover{ border-color:var(--brand); }
.theme-toggle svg{ width:16px; height:16px; }
.theme-toggle .i-sun{ display:none; }
:root[data-theme="light"] .theme-toggle .i-moon{ display:none; }
:root[data-theme="light"] .theme-toggle .i-sun{ display:block; }

.nav-cta{ display:none; }

.nav-burger{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:var(--radius-sm); border:1px solid var(--line-strong);
  color:var(--text);
}
.nav-burger svg{ width:20px; height:20px; }
.nav-burger .i-x{ display:none; }
.nav-burger[aria-expanded="true"] .i-menu{ display:none; }
.nav-burger[aria-expanded="true"] .i-x{ display:block; }

.nav-sheet{
  position:fixed; inset:var(--nav-h) 0 0 0; z-index:99;
  background:var(--bg); border-top:1px solid var(--line);
  padding:32px 24px; display:flex; flex-direction:column; gap:8px;
  transform:translateY(-8px); opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  overflow-y:auto;
}
.nav-sheet.open{ opacity:1; transform:none; pointer-events:auto; }
.nav-sheet a{
  font-size:1.25rem; font-weight:600; padding:14px 4px; border-bottom:1px solid var(--line);
  color:var(--text);
}
.nav-sheet .btn{ margin-top:20px; width:100%; }

@media (min-width:900px){
  .nav-links{ display:flex; }
  .nav-cta{ display:inline-flex; }
  .nav-burger, .nav-sheet{ display:none; }
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative; padding-top:clamp(56px, 8vw, 96px); padding-bottom:clamp(64px, 8vw, 100px);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 70% 20%, var(--brand-glow), transparent 70%);
}
.hero-grid-bg{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-inner{ position:relative; z-index:1; display:grid; gap:48px; }

.hero-copy{ max-width:640px; }
/* The giant eyebrow IS the hero's h1 now (no separate prose headline) —
   tighter gap beneath it than the mid-page eyebrows get, and the lede reads
   a step larger so the eyebrow -> lede -> CTAs stack doesn't feel hollow. */
.hero-copy h1.eyebrow{ margin-bottom:24px; }
.hero-copy .lede{ font-size:clamp(1.2rem, 2vw, 1.45rem); margin-bottom:32px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:36px; }
.hero-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11px; font-weight:600; letter-spacing:.08em;
  color:var(--faint); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:7px 12px; text-transform:uppercase;
}
.chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--ok); flex:none; }

/* ---------- Console ---------- */
.console-wrap{ min-width:0; }
.console-livechip{
  display:inline-flex; align-items:center; gap:8px; margin-bottom:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; color:var(--faint);
  text-transform:uppercase;
}
.console-livechip .dot{ width:6px; height:6px; border-radius:50%; background:var(--danger); animation:pulse 1.6s ease-in-out infinite; }
.console-prompt{
  font-family:var(--font-mono); font-size:13px; color:var(--muted);
  margin-bottom:14px; overflow-wrap:anywhere;
}
.console-prompt .chevron{ color:var(--brand); margin-right:8px; }

.console{
  background:var(--surface); border:1px solid var(--line);
  border-radius:6px; /* product realism exception — kept larger than the site's rectilinear scale */
  overflow:hidden; box-shadow:0 24px 60px -30px rgba(0,0,0,.55);
}
.console-header{
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid var(--line); background:var(--surface-2);
}
.console-header .mark-tile{
  width:32px; height:32px; border-radius:var(--radius-sm); flex:none;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:color-mix(in srgb, var(--brand) 16%, transparent);
}
.console-header .mark-tile img{ width:100%; height:100%; object-fit:cover; }
.console-header-text{ flex:1; min-width:0; }
.console-header-text .title{ font-size:.95rem; font-weight:600; color:var(--text); }
.console-header-text .subtitle{ font-size:.75rem; color:var(--faint); margin-top:1px; }
.console-timer{
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--signal);
  background:color-mix(in srgb, var(--signal) 14%, transparent);
  border-radius:var(--radius-sm); padding:5px 10px; flex:none;
}
.console-ghosts{ display:none; align-items:center; gap:6px; margin-left:6px; }
.console-ghosts span{
  font-family:var(--font-mono); font-size:11px; color:var(--faint);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:5px 9px;
}
@media (min-width:560px){ .console-ghosts{ display:flex; } }

.console-body{
  min-height:360px; max-height:460px; overflow-y:auto;
  padding:18px 16px; font-family:var(--font-mono); font-size:13px; line-height:1.5;
  background:var(--bg-2);
}
.console-boot{
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:10px;
  padding:28px 0;
}
.console-boot img{
  width:96px; height:96px; opacity:.8;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.console-boot .boot-label{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); }

.console-log{ display:flex; flex-direction:column; gap:2px; }
.console-line{
  display:flex; align-items:flex-start; gap:10px; min-height:26px; padding:3px 0;
  color:var(--muted);
}
.console-line .icon{ width:15px; height:15px; margin-top:3px; color:var(--faint); flex:none; }
.console-line .txt{ overflow-wrap:anywhere; }
.console-line a{ color:var(--signal); text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; }
.console-line a:hover{ color:var(--text); }
.console-line.tone-start{ color:var(--text); font-weight:600; }
.console-line.tone-start .icon{ color:var(--signal); }
.console-line.tone-warn{ color:var(--warn); }
.console-line.tone-warn .icon{ color:var(--warn); }
.console-line.tone-done{ color:var(--ok); font-weight:700; }
.console-line.tone-done .icon{ color:var(--ok); }
.console-line.tone-summary{ color:var(--text); font-weight:600; }
.console-line.tone-summary .icon{ color:var(--brand); }
.cursor{
  display:inline-block; width:7px; height:14px; background:var(--signal);
  margin-left:2px; animation:blink 1s step-end infinite; vertical-align:-2px;
}
.console-log[aria-busy="false"] .cursor{ display:none; }

.console-summary-card{
  margin-top:14px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:18px 18px 16px;
  opacity:0; transform:translateY(-10px);
  max-height:0; overflow:hidden; padding-top:0; padding-bottom:0; border-width:0;
  transition:opacity .4s ease, transform .4s ease, max-height .4s ease, padding .4s ease, border-width .4s ease, margin .4s ease;
}
.console-summary-card.in{
  opacity:1; transform:none; max-height:420px;
  padding:18px 18px 16px; border-width:1px;
}
.console-summary-grid{
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 16px; margin-bottom:14px;
}
.console-summary-grid dt{
  font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); margin-bottom:3px;
}
.console-summary-grid dd{ font-size:12.5px; color:var(--text); font-family:var(--font-mono); }
.console-summary-card .score-gauge{ color:var(--ok); font-weight:700; }
.console-replay-btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-mono); font-size:12px; font-weight:600; color:var(--signal);
  border:1px solid var(--line-strong); border-radius:var(--radius-sm); padding:8px 14px;
}
.console-replay-btn:hover{ border-color:var(--signal); }
.console-replay-btn svg{ width:14px; height:14px; }

@keyframes blink{ 0%,49%{opacity:1;} 50%,100%{opacity:0;} }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

@media (min-width:1080px){
  .hero-inner{ grid-template-columns:5fr 7fr; align-items:center; gap:56px; }
}

/* ==========================================================================
   SOURCES BAND
   ========================================================================== */
.sources .section-head{ margin-bottom:32px; }
.sources-row{ display:flex; flex-wrap:wrap; gap:10px; }
.source-chip{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; color:var(--muted);
  border:1px solid var(--line); border-radius:var(--radius-sm); padding:9px 14px 9px 12px;
  background:var(--surface);
}
.source-chip .icon{ width:15px; height:15px; color:var(--brand); }

/* ==========================================================================
   HOW IT WORKS
   ========================================================================== */
.how-steps{ display:grid; gap:20px; grid-template-columns:1fr; position:relative; }
.how-step{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; position:relative;
}
.how-step:hover{ border-color:var(--line-strong); }
.how-step .num{
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--brand);
  letter-spacing:.05em; margin-bottom:14px; display:block;
}
.how-step h3{ margin-bottom:8px; }
.how-step p{ font-size:.92rem; }
@media (min-width:900px){
  .how-steps{ grid-template-columns:repeat(4,1fr); gap:0; }
  .how-step{ border-radius:0; border-left:none; }
  .how-step:first-child{ border-left:1px solid var(--line); border-radius:var(--radius-lg) 0 0 var(--radius-lg); }
  .how-step:last-child{ border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
}

/* ==========================================================================
   WHAT YOU GET — bento grid
   ========================================================================== */
.bento{ display:grid; grid-template-columns:1fr; gap:16px; }
.bento-tile{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; transition:border-color .15s ease;
}
.bento-tile:hover{ border-color:var(--line-strong); }
.bento-tile .icon-badge{
  width:38px; height:38px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--brand) 14%, transparent); color:var(--brand); margin-bottom:16px;
}
.bento-tile .icon-badge svg{ width:19px; height:19px; }
.bento-tile h3{ margin-bottom:6px; }
.bento-tile p{ font-size:.9rem; }
.bento-tile .gauge{
  font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--ok);
  margin-top:12px; display:inline-block;
}
@media (min-width:640px){ .bento{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){
  /* 5 tiles, first spanning 2, in 3 columns: row 1 = Business(wide,2)+
     People(1) = 3 exactly; row 2 = Footprint+Insurance+Score = 3 exactly.
     Both rows flush, no dangling gap (7-tile layout used 4 columns). */
  .bento{ grid-template-columns:repeat(3,1fr); }
  .bento-tile.wide{ grid-column:span 2; }
}

/* ==========================================================================
   SCREENS
   ========================================================================== */
.screens-caption{ margin-bottom:36px; }
.screens-strip{
  display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding-bottom:6px; margin:0 -24px; padding-inline:24px;
}
.screen-frame{
  flex:0 0 82%; scroll-snap-align:center; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.screen-frame .shot{
  aspect-ratio:16/10; background:var(--surface-2);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.screen-frame .shot img{ width:100%; height:100%; object-fit:cover; }
.screen-frame .cap{
  font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--faint); padding:12px 16px; border-top:1px solid var(--line);
}
@media (min-width:900px){
  .screens-strip{ overflow:visible; grid-template-columns:repeat(3,1fr); display:grid; margin:0; padding:0; }
  .screen-frame{ flex:none; }
}

/* ==========================================================================
   USE CASES
   ========================================================================== */
.usecases-grid{ display:grid; grid-template-columns:1fr; gap:16px; }
.usecase-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px;
}
.usecase-card:hover{ border-color:var(--line-strong); }
.usecase-card h3{ margin-bottom:8px; }
.usecase-card p{ font-size:.92rem; }
@media (min-width:640px){ .usecases-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .usecases-grid{ grid-template-columns:repeat(4,1fr); } }

/* ==========================================================================
   TRUST
   ========================================================================== */
.trust-list{ display:grid; grid-template-columns:1fr; gap:20px 40px; }
.trust-point{ display:flex; gap:16px; }
.trust-point .icon-badge{
  width:34px; height:34px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--ok) 16%, transparent); color:var(--ok);
}
.trust-point .icon-badge svg{ width:17px; height:17px; }
.trust-point h3{ margin-bottom:4px; font-size:1rem; }
.trust-point p{ font-size:.9rem; }
@media (min-width:900px){ .trust-list{ grid-template-columns:repeat(2,1fr); } }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-section{ padding-block:clamp(72px, 9vw, 120px); }
.cta-panel{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(40px, 6vw, 72px); text-align:center;
}
.cta-panel::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(60% 80% at 50% 0%, var(--brand-glow), transparent 70%);
}
.cta-panel > *{ position:relative; z-index:1; }
.cta-panel h2{ margin-bottom:14px; }
.cta-panel .lede{ margin-inline:auto; margin-bottom:32px; }
.cta-actions{ display:flex; flex-wrap:wrap; gap:20px; align-items:center; justify-content:center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer{
  background:var(--bg-2); border-top:1px solid var(--line);
  padding-top:64px; padding-bottom:32px;
}
.footer-grid{
  display:grid; grid-template-columns:1fr; gap:40px;
  padding-bottom:40px;
}
.footer-col-brand{ display:flex; flex-direction:column; gap:16px; max-width:340px; }
.brand-lockup{ display:flex; align-items:center; gap:10px; }
.brand-lockup .brand-spy{ height:26px; width:26px; flex:none; border-radius:6px; }
.brand-lockup .brand-word{ height:18px; width:auto; }
.footer-col-brand p{ font-size:.9rem; }
.email-chip{
  display:inline-flex; align-items:center; width:fit-content;
  font-size:12.5px; color:var(--text); border:1px solid var(--line-strong);
  border-radius:var(--radius-sm); padding:8px 12px;
  transition:border-color .15s ease, color .15s ease;
}
.email-chip:hover{ border-color:var(--brand); color:var(--brand); }

.footer-col-heading{
  font-family:var(--font-mono); font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.14em; color:var(--faint); margin-bottom:18px;
}
.footer-links{ display:flex; flex-direction:column; gap:14px; }
.footer-links a{ font-size:15px; color:var(--muted); width:fit-content; }
.footer-links a:hover{ color:var(--text); }
.footer-controls{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.footer-region{ font-size:12px; letter-spacing:.06em; color:var(--faint); }

.footer-divider{ margin:0; }
.footer-bottom{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px;
  padding-top:24px;
  font-size:13px; color:var(--faint);
}

@media (min-width:640px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
}
@media (min-width:900px){
  .footer-grid{ grid-template-columns:1.6fr 1fr 1fr 1fr; gap:32px; }
  .site-footer{ padding-top:96px; padding-bottom:48px; min-height:480px; display:flex; flex-direction:column; justify-content:space-between; }
}

/* ==========================================================================
   404
   ========================================================================== */
.notfound{
  min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:20px; padding:24px;
}
.notfound .code{ font-family:var(--font-mono); font-size:13px; color:var(--brand); letter-spacing:.1em; }

/* NOTE: content-visibility:auto was tried here as a below-fold perf hint but
   dropped — it re-skips rendering of a section's children whenever the user
   scrolls away again, which can race with the one-shot .reveal
   IntersectionObserver and leave content invisible. Not worth the risk. */

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

/* ==========================================================================
   Small-viewport type & spacing tweaks
   ========================================================================== */
@media (max-width:639px){
  .console-body{ min-height:300px; max-height:400px; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .hero-actions .btn{ width:100%; }
  /* the spy+wordmark lockup is wider than the old compact mark — tighten the
     nav row so it still fits next to the lang pill/theme toggle/burger */
  .nav-inner{ gap:10px; }
  .nav-logo{ gap:7px; }
  .nav-logo .brand-word{ height:15px; }
  .nav-right{ gap:8px; }
  .lang-pill button{ padding:8px 10px; }
}