/* ── PHISHGUARD — Design Concept ────────────────────────────────────────────
   Theme: Deep water / fishing hook metaphor
   - Background: near-black deep ocean navy (#080c12)
   - Accent "lure": warm amber-orange (#e8913a) — the bait
   - Secondary: cold electric teal (#1de9b6) — the detection signal
   - Texture: subtle horizontal scanlines (depth strata)
   - Typography: Space Grotesk (geometric, technical) + Space Mono (terminal)
   - Motion: depth lines drifting slowly downward; hook SVG bobbing
──────────────────────────────────────────────────────────────────────────── */

:root {
  /* Palette */
  --bg:         #080c12;
  --bg-2:       #0d1219;
  --bg-3:       #111820;
  --bg-card:    #0f1520;
  --border:     rgba(255,255,255,0.07);
  --border-2:   rgba(255,255,255,0.12);

  --text:       #c8cdd8;
  --text-muted: #5a6478;
  --text-faint: #2e3545;
  --text-inv:   #080c12;

  /* The lure — amber orange (bait) */
  --lure:       #e8913a;
  --lure-dim:   rgba(232, 145, 58, 0.12);
  --lure-border:rgba(232, 145, 58, 0.25);
  --lure-glow:  rgba(232, 145, 58, 0.06);

  /* The catch — electric teal (detection signal) */
  --catch:       #1de9b6;
  --catch-dim:   rgba(29, 233, 182, 0.08);
  --catch-border:rgba(29, 233, 182, 0.2);

  /* Danger */
  --danger:      #e85c5c;
  --danger-dim:  rgba(232, 92, 92, 0.1);
  --danger-border:rgba(232, 92, 92, 0.2);

  /* Fonts */
  --font-body:  'Space Grotesk', 'Helvetica Neue', sans-serif;
  --font-mono:  'Space Mono', 'Courier New', monospace;

  /* Type scale */
  --t-xs:   clamp(0.7rem,  0.65rem + 0.2vw,  0.8rem);
  --t-sm:   clamp(0.82rem, 0.75rem + 0.3vw,  0.95rem);
  --t-base: clamp(0.95rem, 0.9rem  + 0.25vw, 1.05rem);
  --t-md:   clamp(1.1rem,  1rem    + 0.5vw,  1.35rem);
  --t-lg:   clamp(1.4rem,  1.1rem  + 1.2vw,  2rem);
  --t-xl:   clamp(2rem,    1.2rem  + 2.8vw,  3.8rem);
  --t-hero: clamp(2.6rem,  0.8rem  + 5.5vw,  5.8rem);

  /* Space */
  --s1:  0.25rem;
  --s2:  0.5rem;
  --s3:  0.75rem;
  --s4:  1rem;
  --s5:  1.25rem;
  --s6:  1.5rem;
  --s8:  2rem;
  --s10: 2.5rem;
  --s12: 3rem;
  --s16: 4rem;
  --s20: 5rem;
  --s24: 6rem;

  --wrap: 1080px;
  --r-sm: 0.375rem;
  --r-md: 0.6rem;
  --r-lg: 1rem;
  --r-xl: 1.25rem;
}

/* ── Reset ─────────────────────────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}
body {
  min-height: 100dvh;
  font-family: var(--font-body);
  font-size: var(--t-base);
  color: var(--text);
  background: var(--bg);
  line-height: 1.65;
  overflow-x: hidden;
}
h1,h2,h3,h4 { text-wrap: balance; line-height: 1.1; font-weight: 600; }
p, li { text-wrap: pretty; max-width: 68ch; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
em { font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Depth texture scanlines ───────────────────────────────────────────────── */
.depth-overlay {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(255,255,255,0.012) 3px,
    rgba(255,255,255,0.012) 4px
  );
}

/* ── NAV ───────────────────────────────────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8, 12, 18, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
  transition: transform 280ms cubic-bezier(0.16,1,0.3,1);
}
.nav__inner {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--s8);
  height: 56px;
  display: flex;
  align-items: center;
  gap: var(--s8);
}
.nav__logo {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--t-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  flex-shrink: 0;
  transition: color 180ms ease;
}
.nav__logo:hover { color: var(--lure); }
.nav__hook { color: var(--lure); transition: transform 400ms ease; }
.nav__logo:hover .nav__hook { transform: rotate(-15deg); }
.nav__links {
  display: flex;
  gap: var(--s6);
  margin-left: var(--s6);
}
.nav__links a {
  font-size: var(--t-sm);
  color: var(--text-muted);
  transition: color 160ms ease;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
}
.nav__links a:hover { color: var(--text); }
.nav__badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  letter-spacing: 0.06em;
}
@media (max-width: 640px) {
  .nav__links, .nav__badge { display: none; }
  .nav__inner { padding: 0 var(--s5); }
}

/* ── HERO ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 1;
  min-height: calc(100dvh - 56px);
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s20) var(--s8) var(--s16);
  display: grid;
  grid-template-columns: 1fr 420px;
  align-items: center;
  gap: var(--s16);
}

/* ── Depth lines (drifting water currents) ──────────────────────────────────*/
.depth-lines {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.depth-line {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(29,233,182,0.04) 40%, rgba(29,233,182,0.04) 60%, transparent 100%);
  animation: drift linear infinite;
}
.depth-line:nth-child(1) { top: 15%; animation-duration: 22s; animation-delay: 0s; }
.depth-line:nth-child(2) { top: 32%; animation-duration: 28s; animation-delay: -8s; opacity: 0.6; }
.depth-line:nth-child(3) { top: 52%; animation-duration: 19s; animation-delay: -4s; opacity: 0.4; }
.depth-line:nth-child(4) { top: 70%; animation-duration: 33s; animation-delay: -14s; opacity: 0.3; }
.depth-line:nth-child(5) { top: 88%; animation-duration: 25s; animation-delay: -6s; opacity: 0.5; }

@keyframes drift {
  from { transform: translateY(0); }
  to   { transform: translateY(80px); }
}

/* ── Floating hook ──────────────────────────────────────────────────────────*/
.hero__lure {
  position: absolute;
  right: -40px;
  top: -30px;
  width: 120px;
  height: 320px;
  opacity: 0.55;
  z-index: 0;
  animation: bob 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(14px); }
}
.hook-path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: drawHook 1.8s 0.4s cubic-bezier(0.16,1,0.3,1) forwards;
}
@keyframes drawHook {
  to { stroke-dashoffset: 0; }
}

/* ── Hero inner ─────────────────────────────────────────────────────────────*/
.hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s6);
}
.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  letter-spacing: 0.1em;
}
.eyebrow__tag {
  background: var(--lure-dim);
  border: 1px solid var(--lure-border);
  color: var(--lure);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 0.68rem;
  letter-spacing: 0.08em;
}
.eyebrow__sep { color: var(--text-faint); }

/* ── Hero title — spoofed text reveal ──────────────────────────────────────*/
.hero__title {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.hero__line { display: block; }

/* The fake domain sits above the real title, strikethrough + fades */
.hero__line--spoof {
  position: relative;
  font-family: var(--font-mono);
  font-size: clamp(0.85rem, 0.7rem + 1vw, 1.1rem);
  margin-bottom: var(--s1);
}
.spoof__fake {
  display: inline-block;
  color: var(--danger);
  opacity: 0;
  text-decoration: line-through;
  text-decoration-color: var(--danger);
  letter-spacing: 0.02em;
  animation: spoof-in 0.4s 0.2s ease forwards, spoof-out 0.3s 1.6s ease forwards;
}
.spoof__swap {
  color: var(--lure);
  font-weight: 700;
}
.spoof__real {
  position: absolute;
  left: 0;
  top: 0;
  color: var(--catch);
  opacity: 0;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(0.9rem, 0.75rem + 1vw, 1.15rem);
  letter-spacing: -0.01em;
  animation: real-in 0.5s 2s cubic-bezier(0.16,1,0.3,1) forwards;
}

@keyframes spoof-in  { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@keyframes spoof-out { from { opacity:1; } to { opacity:0; } }
@keyframes real-in   { from { opacity:0; transform:translateX(-6px); } to { opacity:1; transform:none; } }

.hero__line--main {
  font-size: var(--t-hero);
  font-weight: 700;
  color: #eef0f4;
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-top: var(--s2);
}
.hero__desc {
  font-size: var(--t-base);
  color: var(--text-muted);
  max-width: 52ch;
  line-height: 1.72;
  margin-top: var(--s2);
}
.hero__meta {
  display: flex;
  gap: var(--s8);
  padding-top: var(--s5);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.meta__col { display: flex; flex-direction: column; gap: 2px; }
.meta__k {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.meta__v { font-size: var(--t-sm); color: var(--text); font-weight: 500; }

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  background: var(--lure-dim);
  border: 1px solid var(--lure-border);
  color: var(--lure);
  font-size: var(--t-sm);
  font-weight: 500;
  padding: var(--s3) var(--s5);
  border-radius: var(--r-md);
  transition: background 180ms ease, border-color 180ms ease;
  align-self: flex-start;
  margin-top: var(--s2);
}
.hero__cta:hover {
  background: rgba(232,145,58,0.2);
  border-color: rgba(232,145,58,0.4);
}

/* ── Hero inbox card ────────────────────────────────────────────────────────*/
.hero__inbox {
  position: relative;
  z-index: 1;
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04) inset;
  transform: perspective(800px) rotateY(-4deg) rotateX(2deg);
  transition: transform 400ms ease;
}
.hero__inbox:hover { transform: perspective(800px) rotateY(-1deg) rotateX(1deg); }

.inbox__chrome {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s3) var(--s4);
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
}
.inbox__dot {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--border-2);
}
.inbox__addr {
  margin-left: var(--s2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
}
.inbox__rows { padding: var(--s2) var(--s3); display: flex; flex-direction: column; gap: 2px; }
.inbox__row {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s3);
  border-radius: var(--r-md);
  border: 1px solid transparent;
}
.inbox__row--bait {
  background: rgba(232,92,92,0.05);
  border-color: rgba(232,92,92,0.12);
}
.inbox__from {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  min-width: 9.5rem;
  flex-shrink: 0;
}
.spoof-char { color: var(--lure); font-weight: 700; }
.inbox__subj { flex: 1; font-size: 11px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.inbox__tag {
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.inbox__tag--crit  { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger-border); }
.inbox__tag--clear { background: var(--catch-dim);  color: var(--catch);  border: 1px solid var(--catch-border); }

.inbox__ai {
  margin: var(--s2) var(--s3) var(--s3);
  padding: var(--s4);
  background: linear-gradient(135deg, rgba(29,233,182,0.05), rgba(29,233,182,0.02));
  border: 1px solid var(--catch-border);
  border-radius: var(--r-md);
}
.inbox__ai-head {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  color: var(--catch);
  letter-spacing: 0.1em;
  margin-bottom: var(--s3);
}
.inbox__ai p {
  font-size: 11px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: none;
}
.inbox__ai em { color: var(--text); font-style: italic; }
.inbox__ai-policy {
  display: flex;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--catch-border);
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--catch);
}
.ai-policy__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--catch);
  flex-shrink: 0;
  box-shadow: 0 0 6px var(--catch);
}

@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: var(--s12);
  }
  .hero__inbox { display: none; }
  .hero__lure  { display: none; }
}

/* ── Wrap ──────────────────────────────────────────────────────────────────── */
.wrap {
  max-width: var(--wrap);
  margin: 0 auto;
  padding-inline: var(--s8);
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.section {
  position: relative;
  z-index: 1;
  padding-block: clamp(var(--s16), 8vw, var(--s24));
  border-top: 1px solid var(--border);
}
.section--deep {
  background: var(--bg-2);
}
.section__hd {
  margin-bottom: var(--s12);
}
.section__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--lure);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--s3);
}
.section__h {
  font-size: var(--t-xl);
  font-weight: 700;
  color: #eef0f4;
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: var(--s5);
}
.section__sub {
  font-size: var(--t-base);
  color: var(--text-muted);
  max-width: 58ch;
  line-height: 1.72;
}
.section__sub em { color: var(--lure); font-style: normal; font-weight: 600; }

/* ── Pipeline ──────────────────────────────────────────────────────────────── */
.pipeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--s16);
}
.pipeline__spine {
  position: absolute;
  left: 23px;
  top: 40px;
  bottom: 40px;
  width: 1px;
  background: linear-gradient(to bottom, var(--lure) 0%, var(--catch) 100%);
  opacity: 0.25;
  z-index: 0;
}
.pipeline__step {
  position: relative;
  display: flex;
  gap: var(--s8);
  padding: var(--s8) 0 var(--s8);
  border-bottom: 1px solid var(--border);
}
.pipeline__step:last-child { border-bottom: none; }
.step__node {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease;
}
.pipeline__step:hover .step__node { border-color: var(--lure-border); }
.step__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  color: var(--lure);
  letter-spacing: 0.04em;
}
.step__body { flex: 1; padding-top: var(--s1); }
.step__body h3 {
  font-size: var(--t-md);
  color: #eef0f4;
  margin-bottom: var(--s3);
  font-weight: 600;
}
.step__body p {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.7;
  max-width: none;
  margin-bottom: var(--s4);
}
.step__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}
.step__tags span {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  padding: 2px 8px;
  border-radius: var(--r-sm);
}

/* ── Toggle block ──────────────────────────────────────────────────────────── */
.toggle-block {
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  background: var(--bg-card);
  overflow: hidden;
}
.toggle-block__hd {
  padding: var(--s6) var(--s8);
  border-bottom: 1px solid var(--border);
}
.toggle-block__hd h3 {
  font-size: var(--t-md);
  color: #eef0f4;
  margin-bottom: var(--s2);
}
.toggle-block__hd p {
  font-size: var(--t-sm);
  color: var(--text-muted);
  max-width: none;
}
.toggle-block__ctrl {
  display: flex;
  align-items: center;
  gap: var(--s4);
  padding: var(--s5) var(--s8);
  border-bottom: 1px solid var(--border);
}
.toggle-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  letter-spacing: 0.06em;
}
.toggle-sw {
  position: relative;
  width: 50px;
  height: 28px;
  background: var(--bg-3);
  border: 1px solid var(--border-2);
  border-radius: 100px;
  cursor: pointer;
  transition: background 250ms ease, border-color 250ms ease;
  flex-shrink: 0;
  outline: none;
}
.toggle-sw:focus-visible { outline: 2px solid var(--lure); outline-offset: 3px; }
.toggle-sw.on { background: var(--lure-dim); border-color: var(--lure-border); }
.toggle-sw__knob {
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: transform 250ms cubic-bezier(0.16,1,0.3,1), background 250ms ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.toggle-sw.on .toggle-sw__knob { transform: translateX(22px); background: var(--lure); }

.toggle-block__output { padding: var(--s8); }

/* ── Views ─────────────────────────────────────────────────────────────────── */
.tview { animation: fade-up 200ms ease; }
.tview.hidden { display: none; }
@keyframes fade-up { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

.tview__hd {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s5);
}
.risk-badge {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: var(--r-sm);
  letter-spacing: 0.06em;
}
.risk-badge--high { background: var(--danger-dim); color: var(--danger); border: 1px solid var(--danger-border); }
.tview__score {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
}
.ai-chip {
  display: flex;
  align-items: center;
  gap: var(--s1);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--catch);
  background: var(--catch-dim);
  border: 1px solid var(--catch-border);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  letter-spacing: 0.04em;
}

.signal-list { list-style: none; display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
.signal-list li {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: var(--t-sm);
  color: var(--text-muted);
  max-width: none;
}
.sig { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.sig--red   { background: var(--danger); box-shadow: 0 0 6px var(--danger); }
.sig--amber { background: var(--lure); box-shadow: 0 0 6px var(--lure); }

.tview__note {
  font-size: var(--t-xs);
  color: var(--text-faint);
  font-style: italic;
  max-width: none;
  font-family: var(--font-mono);
  border-top: 1px solid var(--border);
  padding-top: var(--s4);
}

.tview__verdict {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.75;
  margin-bottom: var(--s6);
  max-width: none;
}
.tview__actions {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--s5) var(--s6);
  margin-bottom: var(--s6);
}
.actions__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s4);
}
.tview__actions ol {
  padding-left: var(--s5);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}
.tview__actions li {
  font-size: var(--t-sm);
  color: var(--text-muted);
  max-width: none;
}
.tview__evidence { border-top: 1px solid var(--border); padding-top: var(--s5); }
.evidence__label {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--s4);
}
.evidence__card {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3) var(--s4);
  background: var(--catch-dim);
  border: 1px solid var(--catch-border);
  border-radius: var(--r-md);
  margin-bottom: var(--s2);
}
.evidence__domain {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--catch);
  flex-shrink: 0;
}
.evidence__title { font-size: var(--t-sm); color: var(--text-muted); }

/* ── Adversarial cards ─────────────────────────────────────────────────────── */
.adv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s4);
  margin-bottom: var(--s12);
}
.adv-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--s7, 1.75rem) var(--s6);
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  transition: border-color 200ms ease, transform 200ms ease;
  position: relative;
  overflow: hidden;
}
.adv-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--lure), transparent);
  opacity: 0;
  transition: opacity 200ms ease;
}
.adv-card:hover { border-color: var(--border-2); transform: translateY(-2px); }
.adv-card:hover::before { opacity: 1; }
.adv-card__num {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--lure);
  font-weight: 700;
  letter-spacing: 0.08em;
}
.adv-card__type {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.adv-card__name {
  font-size: var(--t-md);
  color: #eef0f4;
  font-weight: 600;
}
.adv-card__miss, .adv-card__ai {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
}
.adv-card__miss { background: var(--danger-dim); border: 1px solid var(--danger-border); }
.adv-card__ai   { background: var(--catch-dim);  border: 1px solid var(--catch-border); }
.miss-label, .ai-label {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.miss-label { color: var(--danger); }
.ai-label   { color: var(--catch); }
.miss-val, .ai-val {
  font-size: var(--t-xs);
  line-height: 1.55;
  max-width: none;
}
.miss-val { color: var(--text-muted); }
.ai-val   { color: var(--text); }

@media (max-width: 640px) {
  .adv-grid { grid-template-columns: 1fr; }
}

/* ── Stats ─────────────────────────────────────────────────────────────────── */
.stats-row {
  display: flex;
  align-items: center;
  gap: var(--s8);
  padding: var(--s8) var(--s10);
  background: var(--bg-card);
  border: 1px solid var(--border-2);
  border-radius: var(--r-xl);
  flex-wrap: wrap;
}
.stat { display: flex; flex-direction: column; gap: var(--s1); }
.stat__n {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 1rem + 2.5vw, 3rem);
  color: #eef0f4;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
}
.stat__slash { color: var(--lure); }
.stat__l { font-size: var(--t-xs); color: var(--text-muted); max-width: 18ch; line-height: 1.4; }
.stat__div { width: 1px; height: 3rem; background: var(--border-2); align-self: center; }

/* ── Documents ─────────────────────────────────────────────────────────────── */
.docs-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s5);
}
.doc {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  padding: var(--s7, 1.75rem) var(--s6);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
.doc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 120%, rgba(232,145,58,0.05), transparent 70%);
  opacity: 0;
  transition: opacity 300ms ease;
  pointer-events: none;
}
.doc--report {
  border-color: rgba(var(--lure-rgb, 232, 145, 58), 0.35);
}
.doc--report .doc__kicker {
  color: var(--lure);
}
.doc--report:hover {
  border-color: var(--lure);
}

.doc:hover { border-color: var(--lure-border); transform: translateY(-3px); box-shadow: 0 12px 40px rgba(0,0,0,0.4); }
.doc:hover::after { opacity: 1; }
.doc:hover .doc__icon { color: var(--lure); }

.doc__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.doc__icon { color: var(--text-muted); transition: color 200ms ease; }
.doc__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--lure);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.doc__title {
  font-size: var(--t-md);
  color: #eef0f4;
  font-weight: 600;
  line-height: 1.25;
}
.doc__desc {
  font-size: var(--t-sm);
  color: var(--text-muted);
  line-height: 1.65;
  flex: 1;
  max-width: none;
}
.doc__dl {
  display: flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-muted);
  padding-top: var(--s4);
  border-top: 1px solid var(--border);
  transition: color 200ms ease;
}
.doc:hover .doc__dl { color: var(--lure); }

@media (max-width: 760px) { .docs-row { grid-template-columns: 1fr; } }
@media (min-width: 761px) and (max-width: 960px) { .docs-row { grid-template-columns: 1fr 1fr; } }

/* ── Footer ────────────────────────────────────────────────────────────────── */
.footer {
  position: relative;
  z-index: 1;
  border-top: 1px solid var(--border);
  padding-block: var(--s8);
}
.footer__inner {
  display: flex;
  align-items: center;
}
.footer__l {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  color: var(--text-faint);
}
.footer__l span:first-of-type { font-weight: 600; color: var(--text-muted); }
.footer__sep { color: var(--border-2); }

/* ── Scroll reveal ─────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.reveal.visible { opacity: 1; transform: none; }