/* ═══════════════════════════════════════════════════════════
   NETRA — Compliance Intelligence
   Design system: ink · ivory · champagne gold
   ═══════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Ancola";
  src: url("../assets/ancola-regular.woff2") format("woff2"),
       url("../assets/ancola-regular.ttf") format("truetype"),
       url("../assets/ancola-regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink: #0b0c10;
  --ink-2: #101218;
  --ink-3: #161923;
  --ivory: #ede9e0;
  --muted: #9a968c;
  --faint: #6b675e;
  --gold: #c9a962;
  --gold-soft: #e8d5a3;
  --gold-deep: #8f7434;
  --line: rgba(201, 169, 98, 0.16);
  --line-soft: rgba(237, 233, 224, 0.08);
  --ok: #59b98c;
  --warn: #e0a83c;
  --bad: #e05e5e;
  --info: #7ba7d9;
  --radius: 18px;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", -apple-system, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body {
  background: var(--ink);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(201, 169, 98, 0.35); color: #fff; }

/* scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #2a2c36; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

/* ── atmosphere ─────────────────────────────────────────── */
.grain {
  position: fixed; inset: -50%;
  width: 200%; height: 200%;
  pointer-events: none; z-index: 3; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation: grain 9s steps(10) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0);} 20% { transform: translate(-3%,2%);}
  40% { transform: translate(2%,-3%);} 60% { transform: translate(-2%,-2%);}
  80% { transform: translate(3%,3%);}
}
.orb {
  position: fixed; border-radius: 50%; filter: blur(110px);
  pointer-events: none; z-index: 0; opacity: 0.5;
}
.orb-a {
  width: 620px; height: 620px; top: -220px; right: -160px;
  background: radial-gradient(circle, rgba(201,169,98,0.22), transparent 65%);
  animation: drift-a 26s ease-in-out infinite alternate;
}
.orb-b {
  width: 540px; height: 540px; bottom: -260px; left: -180px;
  background: radial-gradient(circle, rgba(90,110,160,0.16), transparent 65%);
  animation: drift-b 32s ease-in-out infinite alternate;
}
@keyframes drift-a { to { transform: translate(-120px, 140px) scale(1.15); } }
@keyframes drift-b { to { transform: translate(140px, -110px) scale(1.1); } }

/* ── reveal on scroll ───────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d2 { transition-delay: 0.14s; }
.reveal.d3 { transition-delay: 0.28s; }
.reveal.d4 { transition-delay: 0.42s; }

/* ── scroll progress bar ────────────────────────────────── */
.scroll-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  box-shadow: 0 0 10px rgba(201,169,98,0.5);
  will-change: transform;
}
.hero-inner { width: 100%; will-change: transform, opacity; }

/* ── nav ────────────────────────────────────────────────── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  transition: background 0.5s, border-color 0.5s, backdrop-filter 0.5s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled {
  background: rgba(11, 12, 16, 0.72);
  backdrop-filter: blur(18px);
  border-bottom-color: var(--line);
}
.nav-inner {
  max-width: 1220px; margin: 0 auto; padding: 18px 32px;
  display: flex; align-items: center; gap: 34px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ivory); }
.brand-mark { color: var(--gold); font-size: 18px; animation: mark-glow 4s ease-in-out infinite; }
.brand-logo {
  width: 34px; height: 34px; border-radius: 50%; object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(201,169,98,0.35));
  animation: mark-glow-img 4s ease-in-out infinite;
}
@keyframes mark-glow-img {
  0%,100% { filter: drop-shadow(0 0 3px rgba(201,169,98,0.25)); }
  50% { filter: drop-shadow(0 0 12px rgba(201,169,98,0.7)); }
}
@keyframes mark-glow { 0%,100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 18px rgba(201,169,98,0.8); } }
.brand-word { font-family: "Ancola", var(--font-display); font-weight: 400; letter-spacing: 0.02em; font-size: 16px; }
.brand-sub { font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  color: var(--muted); text-decoration: none; font-size: 13px; letter-spacing: 0.06em;
  position: relative; transition: color 0.3s;
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -5px; height: 1px; width: 0;
  background: var(--gold); transition: width 0.4s var(--ease);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after { width: 100%; }

/* ── buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 30px; border-radius: 100px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none; cursor: pointer; border: none;
  position: relative; overflow: hidden; transition: transform 0.35s var(--ease), box-shadow 0.35s;
}
.btn-sm { padding: 10px 20px; font-size: 12px; }
.btn-gold { background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep)); color: #14110a; }
.btn-gold::before {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-20deg); transition: left 0.7s var(--ease);
}
.btn-gold:hover::before { left: 130%; }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 42px rgba(201,169,98,0.28); }
.btn-ghost { background: transparent; color: var(--ivory); border: 1px solid var(--line); }
.btn-ghost:hover { transform: translateY(-3px); border-color: var(--gold); color: var(--gold-soft); }
.btn .arr { transition: transform 0.35s var(--ease); }
.btn:hover .arr { transform: translateX(5px); }

/* ── hero ───────────────────────────────────────────────── */
.hero {
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  text-align: center; position: relative; padding: 140px 24px 80px; z-index: 1;
  overflow: hidden;
}
/* ── hero cinematic background video ── */
.hero-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
  will-change: opacity;
}
.hero-video.ready { opacity: 0.55; }
/* legibility + brand scrim over the footage */
.hero-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 30%, rgba(11,12,16,0.55) 78%, rgba(11,12,16,0.92) 100%),
    linear-gradient(180deg, rgba(11,12,16,0.7) 0%, rgba(11,12,16,0.2) 30%, rgba(11,12,16,0.35) 62%, var(--ink) 100%);
}
/* slow-breathing gold vignette that plays over the video */
.hero-grid-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 42%, rgba(201,169,98,0.12), transparent 70%);
  animation: hero-glow 9s ease-in-out infinite;
}
@keyframes hero-glow { 0%,100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } }

.hero-kicker {
  font-size: 12px; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold);
  margin-bottom: 34px; display: inline-flex; align-items: center; gap: 12px;
}
.kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 0 rgba(201,169,98,0.6); animation: kicker-pulse 2.4s ease-in-out infinite; }
@keyframes kicker-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,169,98,0.55); } 50% { box-shadow: 0 0 0 8px rgba(201,169,98,0); } }
.hero-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(56px, 9.5vw, 128px); line-height: 1.02; letter-spacing: -0.015em;
}
.hero-title .line { display: block; overflow: hidden; }
.hero-title .line span { display: inline-block; transform: translateY(110%); animation: rise 1.3s var(--ease) forwards; }
.hero-title .line:nth-child(2) span { animation-delay: 0.18s; }
@keyframes rise { to { transform: translateY(0); } }
.gold-ink {
  font-style: italic; font-weight: 400;
  background: linear-gradient(110deg, var(--gold-soft) 15%, var(--gold) 45%, #f2e5bd 65%, var(--gold-deep));
  background-size: 220% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: rise 1.3s var(--ease) 0.18s forwards, shimmer 7s linear 1.6s infinite;
}
@keyframes shimmer { to { background-position: 220% center; } }
.hero-sub { max-width: 80%; margin: 38px auto 0; color: var(--muted); font-size: 17px; }
.hero-actions { margin-top: 44px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.hero-stats { margin-top: 74px; display: flex; align-items: center; justify-content: center; gap: 40px; }
.stat b { display: block; font-family: var(--font-display); font-size: 34px; font-weight: 400; color: var(--gold-soft); }
.stat span { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.stat-div { width: 1px; height: 42px; background: var(--line); }
.hero-scroll { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 24px; height: 40px; border: 1px solid var(--line); border-radius: 14px; }
.hero-scroll span { position: absolute; top: 8px; left: 50%; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 3px; background: var(--gold); animation: scroll-dot 2.2s ease-in-out infinite; }
@keyframes scroll-dot { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

/* ── marquee ────────────────────────────────────────────── */
.marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 18px 0; position: relative; z-index: 1; background: rgba(255,255,255,0.012); }
.marquee-track { display: flex; gap: 46px; width: max-content; animation: marquee 46s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.marquee-track i { color: var(--gold); font-style: normal; font-size: 10px; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ── sections ───────────────────────────────────────────── */
.section { max-width: 1220px; margin: 0 auto; padding: 130px 32px 40px; position: relative; z-index: 1; }
.section-head { margin-bottom: 64px; }
.eyebrow { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.section-head h2 { font-family: var(--font-display); font-weight: 300; font-size: clamp(36px, 5vw, 60px); line-height: 1.1; }
.section-head h2 em { font-style: italic; color: var(--gold-soft); }

/* how */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.step {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  padding: 40px 32px; background: rgba(255,255,255,0.015);
  transition: transform 0.5s var(--ease), border-color 0.5s, background 0.5s;
}
.step:hover { transform: translateY(-8px); border-color: var(--line); background: rgba(201,169,98,0.04); }
.step-num { font-family: var(--font-display); font-size: 15px; color: var(--gold); letter-spacing: 0.2em; margin-bottom: 22px; }
.step h3 { font-family: var(--font-display); font-weight: 400; font-size: 26px; margin-bottom: 14px; }
.step p { color: var(--muted); font-size: 14.5px; }

/* ── console ────────────────────────────────────────────── */
.console-section { padding-bottom: 60px; }
/* ── ambient video band — footage pinned to the viewport while
      scrolling from “The method” through “Your voice” ── */
.ambient-band { position: relative; }
/* absolute wrapper spanning the band (no overflow:hidden here — that would
   break the sticky frame) with a sticky full-viewport frame inside that
   rides the viewport for the whole band, then stops at the band's end */
.ambient-media { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ambient-frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.console-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.console-video.ready { opacity: 0.34; }
.console-scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(95% 85% at 50% 45%, rgba(11,12,16,0.38) 30%, rgba(11,12,16,0.82) 100%),
    linear-gradient(180deg, rgba(11,12,16,0.5) 0%, rgba(11,12,16,0.3) 20%, rgba(11,12,16,0.3) 80%, rgba(11,12,16,0.5) 100%);
}
/* soften the band's start and end so the footage dissolves into the page */
.ambient-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--ink) 0, transparent 240px),
    linear-gradient(0deg, var(--ink) 0, transparent 240px);
}
.console {
  border: 1px solid var(--line); border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(16,18,24,0.92), rgba(11,12,16,0.96));
  backdrop-filter: blur(4px);
  box-shadow: 0 40px 120px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,255,255,0.02) inset;
}
.console.drag { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,98,0.18), 0 40px 120px rgba(0,0,0,0.55); }
.console-bar {
  display: flex; align-items: center; gap: 18px;
  padding: 16px 22px; border-bottom: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.02);
}
.console-dots { display: flex; gap: 7px; }
.console-dots i { width: 11px; height: 11px; border-radius: 50%; background: #2c2f3a; }
.console-dots i:first-child { background: rgba(224,94,94,0.6); }
.console-dots i:nth-child(2) { background: rgba(224,168,60,0.6); }
.console-dots i:last-child { background: rgba(89,185,140,0.6); }
.console-title { font-size: 12.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.console-status { margin-left: auto; font-size: 11.5px; color: var(--ok); display: flex; align-items: center; gap: 8px; letter-spacing: 0.08em; }
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(89,185,140,0.5);} 50% { box-shadow: 0 0 0 7px rgba(89,185,140,0);} }

.chat { height: 560px; overflow-y: auto; padding: 30px 26px; display: flex; flex-direction: column; gap: 22px; scroll-behavior: smooth; }

.msg { display: flex; gap: 14px; max-width: 86%; animation: msg-in 0.6s var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.avatar {
  flex: 0 0 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-size: 15px;
  background: radial-gradient(circle at 30% 30%, rgba(201,169,98,0.32), rgba(201,169,98,0.08));
  border: 1px solid var(--line); color: var(--gold);
}
.msg.user .avatar { background: rgba(255,255,255,0.05); color: var(--muted); border-color: var(--line-soft); }
.avatar img { width: 82%; height: 82%; object-fit: contain; border-radius: 50%; }
.bubble {
  padding: 18px 22px; border-radius: 18px; font-size: 14.5px;
  background: rgba(255,255,255,0.028); border: 1px solid var(--line-soft);
  min-width: 0;
}
.msg.user .bubble { background: rgba(201,169,98,0.09); border-color: var(--line); }
.bubble p + p { margin-top: 10px; }
.bubble .hint-line { color: var(--faint); font-size: 13px; }
.bubble .file-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 4px 6px 2px 0;
  font-size: 12.5px; padding: 6px 13px; border-radius: 100px;
  background: rgba(255,255,255,0.05); border: 1px solid var(--line-soft); color: var(--muted);
}
.bubble .file-pill b { color: var(--ivory); font-weight: 500; }

/* analysis progress */
.progress-card { display: flex; flex-direction: column; gap: 11px; min-width: 300px; }
.p-step { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--faint); transition: color 0.4s; }
.p-step .p-ico {
  width: 20px; height: 20px; border-radius: 50%; flex: 0 0 20px;
  border: 1px solid var(--line-soft); display: grid; place-items: center; font-size: 10px;
  transition: all 0.4s;
}
.p-step.active { color: var(--ivory); }
.p-step.active .p-ico { border-color: var(--gold); }
.p-step.active .p-ico::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  border: 2px solid var(--gold); border-top-color: transparent;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.p-step.done { color: var(--muted); }
.p-step.done .p-ico { background: rgba(89,185,140,0.14); border-color: rgba(89,185,140,0.5); color: var(--ok); }
.p-step.done .p-ico::after { content: "✓"; animation: none; border: 0; width: auto; height: auto; }

/* ── result card ────────────────────────────────────────── */
.result { width: 100%; }
.result .bubble { padding: 0; overflow: hidden; width: 100%; }
.res-head {
  display: flex; gap: 28px; align-items: center; padding: 28px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(120deg, rgba(201,169,98,0.05), transparent 60%);
  flex-wrap: wrap;
}
.score-wrap { position: relative; width: 118px; height: 118px; flex: 0 0 118px; }
.score-wrap svg { transform: rotate(-90deg); }
.score-track { fill: none; stroke: rgba(255,255,255,0.07); stroke-width: 7; }
.score-arc { fill: none; stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.6s var(--ease); }
.score-val {
  position: absolute; inset: 0; display: grid; place-items: center; text-align: center;
}
.score-val b { font-family: var(--font-display); font-size: 34px; font-weight: 400; line-height: 1; }
.score-val span { display: block; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-top: 4px; }
.res-verdict { flex: 1; min-width: 240px; }
.verdict-tag {
  display: inline-block; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 7px 16px; border-radius: 100px; margin-bottom: 12px; border: 1px solid;
}
.res-verdict h4 { font-family: var(--font-display); font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.res-verdict p { color: var(--muted); font-size: 13.5px; }
.sev-counts { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.sev-pill { font-size: 11.5px; padding: 5px 12px; border-radius: 100px; border: 1px solid var(--line-soft); color: var(--muted); }
.sev-pill i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 7px; font-style: normal; }

.res-body { padding: 10px 28px 24px; }
.res-group-title {
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--faint);
  margin: 22px 0 10px; display: flex; align-items: center; gap: 12px;
}
.res-group-title::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.finding { border: 1px solid var(--line-soft); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.3s; }
.finding[open], .finding:hover { border-color: var(--line); }
.finding summary {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  cursor: pointer; list-style: none; font-size: 14px; user-select: none;
}
.finding summary::-webkit-details-marker { display: none; }
.sev-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 9px; }
.finding summary .f-title { flex: 1; font-weight: 400; }
.finding summary .f-caret { color: var(--faint); transition: transform 0.35s var(--ease); font-size: 11px; }
.finding[open] summary .f-caret { transform: rotate(180deg); }
.f-detail { padding: 2px 18px 18px 41px; font-size: 13.5px; color: var(--muted); }
.f-detail .f-cite {
  margin-top: 10px; padding: 10px 14px; border-left: 2px solid var(--gold);
  background: rgba(201,169,98,0.05); font-size: 12.5px; font-style: italic; border-radius: 0 8px 8px 0;
}
.f-detail .f-fix { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(89,185,140,0.06); border: 1px solid rgba(89,185,140,0.18); font-size: 13px; color: #bfe3d1; }
.f-detail .f-fix b { color: var(--ok); font-weight: 600; letter-spacing: 0.06em; font-size: 11px; text-transform: uppercase; display: block; margin-bottom: 5px; }

/* scope + authorities */
.scope-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.scope-chip {
  font-size: 12px; color: var(--muted); border: 1px solid var(--line-soft);
  background: rgba(255,255,255,0.025); padding: 7px 13px; border-radius: 10px;
  display: inline-flex; flex-direction: column; gap: 1px; min-width: 0;
}
.scope-chip b {
  font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold); font-weight: 600;
}
.authorities { border: 1px solid var(--line-soft); border-radius: 14px; margin-bottom: 10px; overflow: hidden; transition: border-color 0.3s; }
.authorities[open], .authorities:hover { border-color: var(--line); }
.authorities summary {
  display: flex; align-items: center; gap: 14px; padding: 15px 18px;
  cursor: pointer; list-style: none; font-size: 14px; user-select: none;
}
.authorities summary::-webkit-details-marker { display: none; }
.authorities summary .f-title { flex: 1; font-weight: 400; }
.authorities summary .f-caret { color: var(--faint); transition: transform 0.35s var(--ease); font-size: 11px; }
.authorities[open] summary .f-caret { transform: rotate(180deg); }
.auth-body { padding: 2px 18px 16px; }
.auth-item { display: flex; flex-direction: column; gap: 2px; padding: 9px 0 9px 14px; border-left: 2px solid var(--gold); margin-bottom: 8px; }
.auth-item b { font-size: 12.5px; font-weight: 500; color: var(--ivory); }
.auth-item span { font-size: 12px; color: var(--muted); line-height: 1.55; }
.auth-item.aside { border-left-color: rgba(255,255,255,0.14); opacity: 0.75; }
.auth-divider {
  font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--faint);
  margin: 14px 0 10px; display: flex; align-items: center; gap: 10px;
}
.auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.pass-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.pass-item { font-size: 12.5px; color: #a9cdbb; border: 1px solid rgba(89,185,140,0.22); background: rgba(89,185,140,0.05); padding: 6px 13px; border-radius: 100px; }
.pass-item::before { content: "✓ "; color: var(--ok); }

.rewrite-block {
  margin-top: 8px; border: 1px dashed var(--line); border-radius: 14px;
  background: rgba(201,169,98,0.035); padding: 18px; position: relative;
}
.rewrite-block pre {
  white-space: pre-wrap; font-family: var(--font-body); font-size: 13px; color: var(--ivory); line-height: 1.7;
}
.copy-btn {
  position: absolute; top: 12px; right: 12px; font-size: 11px; letter-spacing: 0.1em;
  background: transparent; color: var(--gold); border: 1px solid var(--line);
  border-radius: 100px; padding: 5px 13px; cursor: pointer; transition: all 0.3s;
}
.copy-btn:hover { background: var(--gold); color: #14110a; }

.res-actions { display: flex; gap: 12px; padding: 4px 28px 26px; flex-wrap: wrap; }
.dl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: #14110a; border: none; padding: 14px 26px; border-radius: 100px;
  font-family: var(--font-body); font-size: 13.5px; font-weight: 600; letter-spacing: 0.04em;
  cursor: pointer; transition: transform 0.35s var(--ease), box-shadow 0.35s;
  position: relative; overflow: hidden;
}
.dl-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(201,169,98,0.3); }
.dl-btn:disabled { opacity: 0.6; cursor: wait; transform: none; }
.res-note { padding: 0 28px 24px; font-size: 11.5px; color: var(--faint); line-height: 1.6; }

/* ── suggest chips ──────────────────────────────────────── */
.suggest { display: flex; gap: 10px; padding: 0 22px 14px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; color: var(--muted); background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-soft); border-radius: 100px; padding: 8px 16px;
  cursor: pointer; transition: all 0.3s; font-family: var(--font-body);
}
.chip:hover { color: var(--gold-soft); border-color: var(--gold); transform: translateY(-2px); }
/* marquee mode — chips drift right-to-left, pause on hover/focus */
.suggest.marquee-on {
  flex-wrap: nowrap; overflow: hidden; padding-inline: 0;
  mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 36px, #000 calc(100% - 36px), transparent);
}
.suggest-track { display: flex; width: max-content; animation: suggest-marquee 32s linear infinite; }
/* margins (not gap) keep the -50% loop point exact */
.suggest-track .chip { flex: 0 0 auto; margin-right: 10px; }
.suggest.marquee-on:hover .suggest-track,
.suggest.marquee-on:focus-within .suggest-track { animation-play-state: paused; }
@keyframes suggest-marquee { to { transform: translateX(-50%); } }

/* ── composer ───────────────────────────────────────────── */
.composer { border-top: 1px solid var(--line-soft); padding: 16px 22px 18px; background: rgba(255,255,255,0.015); }
.attach-tray { display: flex; flex-wrap: wrap; gap: 8px; }
.attach-tray:not(:empty) { margin-bottom: 12px; }
.a-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 12.5px; padding: 7px 8px 7px 14px; border-radius: 100px;
  background: rgba(201,169,98,0.08); border: 1px solid var(--line); color: var(--ivory);
  animation: msg-in 0.4s var(--ease);
}
.a-pill .a-kind { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.a-pill button {
  background: transparent; border: none; color: var(--faint); cursor: pointer;
  font-size: 14px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
  transition: all 0.25s;
}
.a-pill button:hover { color: var(--bad); background: rgba(224,94,94,0.12); }
.composer-row { display: flex; align-items: flex-end; gap: 12px; }
.icon-btn {
  flex: 0 0 46px; height: 46px; border-radius: 50%;
  background: transparent; border: 1px solid var(--line); color: var(--gold);
  cursor: pointer; display: grid; place-items: center; transition: all 0.3s;
}
.icon-btn:hover { background: rgba(201,169,98,0.1); transform: translateY(-2px); }
#input {
  flex: 1; min-width: 0; resize: none; background: rgba(255,255,255,0.035);
  border: 1px solid var(--line-soft); border-radius: 23px;
  color: var(--ivory); font-family: var(--font-body); font-size: 14.5px; font-weight: 300;
  padding: 13px 20px; line-height: 1.5; min-height: 48px; max-height: 160px; outline: none;
  overflow-y: auto; scrollbar-width: none;
  transition: border-color 0.3s, background 0.3s;
}
#input::-webkit-scrollbar { width: 0; height: 0; display: none; }
#input:focus { border-color: var(--gold); background: rgba(255,255,255,0.05); }
#input::placeholder { color: var(--faint); text-overflow: ellipsis; }
.send-btn {
  flex: 0 0 46px; height: 46px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, var(--gold-soft), var(--gold) 55%, var(--gold-deep));
  color: #14110a; display: grid; place-items: center;
  transition: transform 0.3s var(--ease), box-shadow 0.3s;
}
.send-btn:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 26px rgba(201,169,98,0.35); }
.send-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }
.composer-note { margin-top: 11px; font-size: 11px; color: var(--faint); letter-spacing: 0.04em; text-align: center; }

/* ── coverage ───────────────────────────────────────────── */
.coverage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.coverage-grid .cov:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.cov {
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 32px 28px;
  background: rgba(255,255,255,0.015); position: relative; overflow: hidden;
  transition: transform 0.5s var(--ease), border-color 0.5s;
}
.cov::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0; transition: opacity 0.5s;
}
.cov:hover { transform: translateY(-6px); border-color: var(--line); }
.cov:hover::before { opacity: 1; }
.cov h4 { font-family: var(--font-display); font-weight: 400; font-size: 19px; margin-bottom: 10px; color: var(--gold-soft); }
.cov p { color: var(--muted); font-size: 13.5px; }

/* ── library ────────────────────────────────────────────── */
.lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 18px; }
.lib {
  border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 28px 26px;
  background: rgba(255,255,255,0.015); display: flex; flex-direction: column; gap: 8px;
  transition: transform 0.5s var(--ease), border-color 0.5s, background 0.5s;
}
.lib:hover { transform: translateY(-5px); border-color: var(--line); background: rgba(201,169,98,0.035); }
.lib-no { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 20px; }
.lib h5 { font-size: 15px; font-weight: 500; line-height: 1.4; }
.lib p { color: var(--muted); font-size: 12.5px; }

/* ── disclaimer ─────────────────────────────────────────── */
.disclaimer-section { padding-bottom: 90px; }
.disclaimer-card {
  border: 1px solid var(--line); border-radius: 22px; padding: 52px;
  background: linear-gradient(140deg, rgba(201,169,98,0.05), rgba(255,255,255,0.012) 55%);
}
.disclaimer-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 30px; margin-bottom: 20px; color: var(--gold-soft); }
.disclaimer-card p { color: var(--muted); font-size: 13.5px; max-width: 900px; }
.disclaimer-card p + p { margin-top: 14px; }
.disclaimer-card .statutory { color: var(--ivory); font-style: italic; border-top: 1px solid var(--line-soft); padding-top: 18px; margin-top: 22px; }

/* ── feedback ───────────────────────────────────────────── */
.feedback-section { padding-bottom: 40px; }
.feedback-card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 48px;
  border: 1px solid var(--line); border-radius: 22px; padding: 48px;
  background: linear-gradient(150deg, rgba(201,169,98,0.05), rgba(255,255,255,0.012) 55%);
}
/* ambient gold-mesh video behind the card */
.feedback-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.feedback-video {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  min-width: 100%; min-height: 100%; width: auto; height: auto; object-fit: cover;
  opacity: 0; transition: opacity 1.6s var(--ease);
}
.feedback-video.ready { opacity: 0.3; }
.feedback-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(120deg, rgba(11,12,16,0.94) 30%, rgba(11,12,16,0.72) 60%, rgba(11,12,16,0.86) 100%),
    radial-gradient(80% 120% at 100% 0%, rgba(201,169,98,0.08), transparent 60%);
}
.feedback-card > .feedback-intro, .feedback-card > .feedback-form { position: relative; z-index: 1; }
/* the word "Netra" in the brand typeface, wherever it appears in body copy.
   Ancola's glyphs sit larger than the surrounding fonts at the same em, so
   scale it down to read at the same size as the rest of the sentence.
   (The nav/footer logo wordmark uses .brand-word and is unaffected.) */
/* em values measured so Ancola's cap-height matches the surrounding font:
   ~0.69em against the Inter body text, ~0.67em against the Fraunces headings */
.brand-name { font-family: "Ancola", var(--font-display); letter-spacing: 0.01em; font-size: 0.69em; }
.feedback-intro h3 .brand-name { font-size: 0.67em; }

.feedback-intro h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 26px;
  color: var(--gold-soft); margin-bottom: 16px;
}
.feedback-intro p { color: var(--muted); font-size: 14.5px; margin-bottom: 14px; }
.feedback-direct { color: var(--ivory) !important; }
.feedback-direct a, .feedback-privacy a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.feedback-direct a:hover, .feedback-privacy a:hover { color: var(--gold); }
.feedback-privacy { font-size: 12.5px !important; color: var(--faint) !important; margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line-soft); }

.feedback-form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); font-weight: 500; }
.field input, .field textarea {
  background: rgba(255,255,255,0.035); border: 1px solid var(--line-soft); border-radius: 12px;
  color: var(--ivory); font-family: var(--font-body); font-size: 15px; font-weight: 300;
  padding: 13px 16px; outline: none; transition: border-color 0.3s, background 0.3s; width: 100%;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field textarea:focus { border-color: var(--gold); background: rgba(255,255,255,0.05); }
.field.invalid input, .field.invalid textarea { border-color: rgba(224,94,94,0.6); }
.field-err { font-size: 12px; color: var(--bad); min-height: 0; transition: min-height 0.2s; }
.field.invalid .field-err { min-height: 16px; }

.field-opt { color: var(--faint); text-transform: none; letter-spacing: 0.02em; font-size: 10px; font-weight: 400; margin-left: 6px; }

/* optional file attachment */
.file-drop {
  display: flex; align-items: center; gap: 13px; padding: 15px 16px;
  border: 1px dashed var(--line); border-radius: 12px; cursor: pointer;
  color: var(--muted); background: rgba(255,255,255,0.02);
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}
.file-drop:hover, .file-drop.drag { border-color: var(--gold); color: var(--ivory); background: rgba(201,169,98,0.05); }
.file-drop svg { color: var(--gold); flex: 0 0 auto; }
.file-drop-text { font-size: 10px; line-height: 1.3; }
.file-drop-sub { display: block; font-size: 8.5px; color: var(--faint); margin-top: 3px; }
.file-chip {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px;
  background: rgba(201,169,98,0.08); border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; color: var(--ivory);
}
.file-chip[hidden] { display: none; }  /* the class display must not override the hidden attribute */
.file-chip svg { color: var(--gold); flex: 0 0 auto; }
.file-chip .file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .file-size { color: var(--faint); font-size: 12px; flex: 0 0 auto; }
.file-chip button {
  background: transparent; border: none; color: var(--faint); cursor: pointer;
  font-size: 18px; line-height: 1; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; transition: all 0.25s; flex: 0 0 auto;
}
.file-chip button:hover { color: var(--bad); background: rgba(224,94,94,0.12); }

.feedback-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 4px; }
.feedback-status { font-size: 13px; color: var(--ok); }
.feedback-status.err { color: var(--bad); }

@media (max-width: 860px) {
  .feedback-card { grid-template-columns: 1fr; gap: 34px; padding: 34px 26px; }
}
@media (pointer: coarse), (max-width: 640px) {
  .field input, .field textarea { font-size: 16px; }  /* prevent iOS zoom */
}

/* ── legal pages (privacy policy) ───────────────────────── */
.legal-head { padding-top: 150px; padding-bottom: 10px; }
.legal-title {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(40px, 6vw, 68px); line-height: 1.08; margin-bottom: 18px;
}
.legal-title em { font-style: italic; color: var(--gold-soft); }
.legal-sub { color: var(--muted); font-size: 17px; max-width: 620px; }
.legal-date { margin-top: 16px; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }

.legal-body { padding-top: 40px; max-width: 860px; }

.legal-highlight {
  border: 1px solid var(--line); border-radius: 18px; padding: 32px 30px; margin-bottom: 56px;
  background: linear-gradient(140deg, rgba(201,169,98,0.06), rgba(255,255,255,0.012) 60%);
}
.legal-highlight h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 22px;
  color: var(--gold-soft); margin-bottom: 16px;
}
.legal-highlight ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.legal-highlight a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.legal-highlight a:hover { color: var(--gold); }
.legal-highlight li { color: var(--ivory); font-size: 14.5px; padding-left: 24px; position: relative; }
.legal-highlight li::before { content: "◆"; position: absolute; left: 0; top: 1px; color: var(--gold); font-size: 9px; }
.legal-highlight strong { color: var(--gold-soft); font-weight: 500; }

.legal-section { margin-bottom: 44px; }
.legal-section h2 {
  font-family: var(--font-display); font-weight: 400; font-size: 24px;
  margin-bottom: 14px; display: flex; align-items: baseline; gap: 14px;
}
.legal-no {
  font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.1em;
  color: var(--gold); border: 1px solid var(--line); border-radius: 50%;
  width: 28px; height: 28px; flex: 0 0 28px;
  display: inline-flex; align-items: center; justify-content: center;
}
.legal-section p { color: var(--muted); font-size: 14.5px; margin-bottom: 12px; }
.legal-section ul { list-style: none; margin: 6px 0 14px; display: flex; flex-direction: column; gap: 9px; }
.legal-section li { color: var(--muted); font-size: 14.5px; padding-left: 20px; position: relative; }
.legal-section li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.legal-section strong { color: var(--ivory); font-weight: 500; }
.legal-section a { color: var(--gold-soft); text-decoration: none; border-bottom: 1px solid var(--line); }
.legal-section a:hover { color: var(--gold); }
.legal-note {
  border-left: 2px solid var(--gold); background: rgba(201,169,98,0.05);
  padding: 14px 18px; border-radius: 0 10px 10px 0; color: var(--ivory) !important;
}
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em; color: var(--gold-soft); }

.legal-disclaimer { margin-top: 60px; padding: 38px 32px; }
.legal-back { margin-top: 44px; text-align: center; }

@media (max-width: 640px) {
  .legal-head { padding-top: 120px; }
  .legal-highlight { padding: 24px 20px; }
  .legal-section h2 { font-size: 20px; gap: 10px; }
}

/* ── footer ─────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--line); position: relative; z-index: 1; background: rgba(255,255,255,0.012); }
.footer-inner { max-width: 1220px; margin: 0 auto; padding: 54px 32px; text-align: center; }
.footer-brand {
  font-family: "Ancola", var(--font-display); letter-spacing: 0.02em; font-size: 15px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
}
.footer-brand .brand-mark { letter-spacing: 0; margin-right: 6px; }
.footer-brand .brand-logo { width: 38px; height: 38px; }
.footer-dim { color: var(--faint); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; font-family: var(--font-body); }
.footer-copy { font-size: 13px; color: var(--ivory); letter-spacing: 0.05em; }
.footer-links { margin-top: 12px; font-size: 12.5px; display: flex; gap: 10px; justify-content: center; align-items: center; }
.footer-links a { color: var(--muted); text-decoration: none; transition: color 0.3s; }
.footer-links a:hover { color: var(--gold-soft); }
.footer-links span { color: var(--faint); }
.footer-fine { margin-top: 12px; font-size: 10.5px; color: var(--faint); margin-inline: auto; }
/* keep the fine print on a single line wherever there is comfortably room */
@media (min-width: 900px) {
  .footer-fine { white-space: nowrap; }
}

/* ── responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .steps, .coverage-grid { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .chat { height: 480px; }
  .section { padding: 90px 20px 30px; }
  .disclaimer-card { padding: 34px 26px; }
  .msg { max-width: 96%; }
  .hero-stats { gap: 22px; }
}

/* phones — Android & iOS */
@media (max-width: 640px) {
  .nav-inner { padding: 12px 16px calc(12px); gap: 14px; }
  .brand-sub { display: none; }
  .brand-word { font-size: 13px; letter-spacing: 0.24em; }
  .nav-cta { margin-left: auto; }

  /* mobile hero: align to top so the headline is always visible; tighter rhythm */
  .hero { padding: 108px 18px 56px; align-items: flex-start; min-height: 100svh; }
  .hero-kicker { font-size: 10px; letter-spacing: 0.3em; margin-bottom: 20px; }
  .hero-sub { font-size: 15px; margin-top: 24px; }
  .hero-actions { margin-top: 32px; }
  .hero-actions .btn { padding: 14px 24px; font-size: 13px; }
  .hero-stats { margin-top: 40px; gap: 14px; flex-wrap: wrap; }
  .stat b { font-size: 26px; }
  .stat span { font-size: 9.5px; }
  .stat-div { height: 34px; }
  .hero-scroll { display: none; }
  /* keep the footage a touch dimmer on phones for text contrast + battery */
  .hero-video.ready { opacity: 0.42; }

  .section-head { margin-bottom: 40px; }
  .step, .cov { padding: 28px 22px; }

  .console { border-radius: 18px; margin-inline: -4px; }
  .console-bar { padding: 12px 14px; gap: 10px; }
  .console-title { display: none; }
  .console-status { font-size: 10.5px; }
  .chat { height: min(62svh, 520px); padding: 20px 14px; gap: 16px; }
  .avatar { flex-basis: 32px; height: 32px; flex-grow: 0; flex-shrink: 0; font-size: 13px; }
  .bubble { padding: 14px 16px; font-size: 14px; }
  .msg { max-width: 100%; gap: 10px; }

  .res-head { padding: 20px 16px; gap: 18px; }
  .score-wrap { width: 96px; height: 96px; flex-basis: 96px; margin-inline: auto; }
  .score-wrap svg { width: 96px; height: 96px; }
  .res-verdict { min-width: 100%; text-align: center; }
  .sev-counts { justify-content: center; }
  .res-body, .res-actions { padding-left: 16px; padding-right: 16px; }
  .res-note { padding: 0 16px 20px; }
  .f-detail { padding-left: 18px; }
  .dl-btn { width: 100%; justify-content: center; }

  .suggest { padding: 0 14px 12px; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .suggest::-webkit-scrollbar { display: none; }
  .chip { flex: 0 0 auto; }

  .composer { padding: 12px 12px calc(14px + env(safe-area-inset-bottom, 0px)); }
  .composer-note { display: none; }
  /* give the input more room: tighter gaps, smaller round buttons */
  .composer-row { gap: 8px; align-items: flex-end; }
  .icon-btn { flex: 0 0 42px; width: 42px; height: 42px; }
  .send-btn { flex: 0 0 42px; height: 42px; }
  #input { padding: 11px 16px; min-height: 44px; }
  .footer-inner { padding: 44px 20px calc(44px + env(safe-area-inset-bottom, 0px)); }

  /* lighter atmosphere on small GPUs */
  .orb { filter: blur(70px); opacity: 0.35; }
  .grain { display: none; }
}

/* prevent iOS Safari auto-zoom on focus: inputs must be ≥16px on touch */
@media (pointer: coarse), (max-width: 640px) {
  #input { font-size: 16px; }
}

/* very narrow devices */
@media (max-width: 360px) {
  .hero-title { font-size: 44px; }
  .btn { padding: 13px 20px; }
}

/* ── motion polish ──────────────────────────────────────── */
/* gold light-sweep across cards on hover */
.step, .lib { position: relative; overflow: hidden; }
.step::after, .lib::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(201,169,98,0.10), transparent);
  transform: skewX(-18deg); transition: left 0.75s var(--ease); pointer-events: none;
}
.step:hover::after, .lib:hover::after { left: 130%; }

/* hero stat hover — lift the number, brighten */
.stat { transition: transform 0.4s var(--ease); }
.stat:hover { transform: translateY(-4px); }
.stat:hover b { text-shadow: 0 0 22px rgba(201,169,98,0.5); }
.stat b, .stat span { transition: text-shadow 0.4s, color 0.4s; }

/* nav CTA breathing glow */
.nav-cta { position: relative; }
.nav-cta::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(201,169,98,0.45); animation: cta-pulse 3.4s ease-in-out infinite; pointer-events: none;
}
@keyframes cta-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(201,169,98,0.35); } 50% { box-shadow: 0 0 0 6px rgba(201,169,98,0); } }

/* eyebrow labels get a tiny animated gold rule */
.eyebrow { position: relative; display: inline-block; padding-left: 30px; }
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 22px; height: 1px; background: var(--gold);
  transform-origin: left; animation: rule-grow 1.4s var(--ease) both;
}
@keyframes rule-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-video { opacity: 0.4 !important; }
  .hero-inner { transform: none !important; opacity: 1 !important; }
  .scroll-progress { display: none; }
}