/* ════════════════════════════════════════════════════════════
   VERIFYCO — landing redesign "Fable"
   Dark forensic-instrument aesthetic · bronze on near-black
   ════════════════════════════════════════════════════════════ */

:root {
  --bg: #060504;
  --bg-2: #0B0908;
  --surface: #110E0B;
  --card: #151109;
  --line: rgba(214, 172, 134, 0.13);
  --line-2: rgba(214, 172, 134, 0.28);

  --cream: #F2DDC2;
  --cream-2: #E7C9A4;
  --bronze: #BC8E64;
  --bronze-2: #D6AC86;
  --bronze-soft: rgba(188, 142, 100, 0.12);

  --ink: #EDE6DC;
  --ink-2: #A2978A;
  --ink-3: #6E6558;

  --green: #57A878;
  --red: #C2553F;

  --f-sans: "Geist", -apple-system, "Segoe UI", sans-serif;
  --f-serif: "Instrument Serif", Georgia, serif;
  --f-mono: "JetBrains Mono", "SF Mono", monospace;

  --nav-h: 76px;
  --rad: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

::selection { background: rgba(188, 142, 100, 0.35); color: #FFF6EA; }

:focus-visible { outline: 2px solid var(--bronze-2); outline-offset: 3px; border-radius: 4px; }

/* HD image rendering */
.ph img, .icon-img { image-rendering: auto; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* Film grain — a single static, viewport-sized composited layer.
   (Was 200%×200% = 4× the viewport, needless memory/paint.) */
.grain {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 2000;
  opacity: 0.032;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── Type helpers ──────────────────────────────────────── */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--bronze-2);
}
.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--bronze);
}

.t-display {
  font-family: var(--f-sans);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}

.hl {
  background: linear-gradient(118deg, #F6E3C8 10%, #D6AC86 55%, #B07F52 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
  text-wrap: pretty;
  max-width: 60ch;
}

.mono-note {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ── Layout ────────────────────────────────────────────── */
.wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
@media (max-width: 640px) { .wrap { width: calc(100% - 40px); } }

.sec { padding: clamp(88px, 11vw, 150px) 0 0; }
.sec-head { display: grid; gap: 22px; max-width: 760px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head .t-display { font-size: clamp(34px, 4.6vw, 60px); }

/* ════════════════════════════════════════════════════════
   NAV
   ════════════════════════════════════════════════════════ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 500;
  height: var(--nav-h);
  transition: background 380ms ease, border-color 380ms ease, backdrop-filter 380ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  /* Solid fallback everywhere. A live backdrop-filter on a fixed bar forces
     the browser to re-blur the page behind it on every scroll frame — the
     single biggest scroll-jank source on phones — so the blur is added back
     only on larger, hover-capable devices below. */
  background: rgba(6, 5, 4, 0.94);
  border-bottom-color: var(--line);
}
@media (min-width: 861px) {
  .nav.is-solid {
    background: rgba(6, 5, 4, 0.78);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
  }
}

.nav-in {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  font-size: 27px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--cream);
  line-height: 1;
  display: inline-flex;
  transition: opacity 200ms ease;
}
.brand:hover { opacity: 0.85; }
.brand em {
  font-family: var(--f-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--bronze-2);
}

.nav-links { display: flex; align-items: center; gap: 34px; }
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.01em;
  position: relative;
  padding: 6px 0;
  transition: color 220ms ease;
}
.nav-links a:hover, .nav-links a.is-here { color: var(--cream); }
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--bronze-2);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 320ms var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }

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

/* Language dropdown */
.lang { position: relative; }
.lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-2);
  transition: border-color 220ms ease, color 220ms ease;
}
.lang-btn:hover { border-color: var(--line-2); color: var(--cream); }
.lang-btn svg { width: 15px; height: 15px; }
.lang-btn .car { width: 9px; height: 9px; transition: transform 240ms ease; }
.lang.open .lang-btn .car { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(230px, calc(100vw - 28px));
  max-height: min(384px, calc(100svh - var(--nav-h) - 24px));
  overflow: auto;
  background: rgba(13, 11, 9, 0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transition: all 240ms var(--ease);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8);
}
.lang.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu button {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  transition: background 160ms ease, color 160ms ease;
  text-align: start;
}
.lang-menu button:hover { background: var(--bronze-soft); color: var(--cream); }
.lang-menu button.on { color: var(--bronze-2); background: var(--bronze-soft); }
.lang-menu .cd { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 24px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: transform 240ms var(--ease), box-shadow 240ms ease, border-color 240ms ease, background 240ms ease;
  overflow: hidden;
}
.btn-fill {
  background: linear-gradient(160deg, #F2DDC2 0%, #D6AC86 100%);
  color: #1A120A;
  box-shadow: 0 14px 34px -14px rgba(214, 172, 134, 0.5);
}
.btn-fill:hover { transform: translateY(-2px); box-shadow: 0 22px 44px -16px rgba(214, 172, 134, 0.65); }
.btn-line {
  border: 1px solid var(--line-2);
  color: var(--cream);
  background: rgba(188, 142, 100, 0.04);
}
.btn-line:hover { border-color: var(--bronze-2); background: var(--bronze-soft); transform: translateY(-2px); }
.btn-sm { height: 38px; padding: 0 18px; font-size: 13.5px; border-radius: 10px; }

/* Burger */
.burger {
  display: none;
  width: 42px; height: 42px;
  border: 1px solid var(--line);
  border-radius: 10px;
  position: relative;
  z-index: 620;
}
.burger span {
  position: absolute;
  left: 12px; right: 12px;
  height: 1.6px;
  background: var(--cream);
  transition: transform 320ms var(--ease), opacity 200ms ease, top 320ms var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 20px; }
.burger span:nth-child(3) { top: 25px; }
body.menu-open .burger span:nth-child(1) { top: 20px; transform: rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { top: 20px; transform: rotate(-45deg); }

/* Mobile menu overlay */
.mmenu {
  position: fixed; inset: 0;
  z-index: 600;
  background: rgba(6, 5, 4, 0.97);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 90px 34px 44px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 360ms ease;
}
body.menu-open .mmenu { opacity: 1; visibility: visible; }
.mmenu a.mlink {
  display: block;
  font-size: clamp(30px, 7.5vw, 40px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
  opacity: 0;
  transform: translateY(22px);
}
.mmenu a.mlink em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: var(--bronze-2); font-size: 0.62em; vertical-align: super; margin-left: 6px; }
.mmenu-foot { margin-top: 34px; display: grid; gap: 20px; opacity: 0; }
.mmenu-langs { display: flex; flex-wrap: wrap; gap: 8px; }
.mmenu-langs button {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-2);
}
.mmenu-langs button.on { border-color: var(--bronze-2); color: var(--bronze-2); background: var(--bronze-soft); }

/* ════════════════════════════════════════════════════════
   HERO
   ════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 30px) 0 40px;
  overflow: clip;
}

.hero-bg {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 52% 44% at 74% 38%, rgba(188, 142, 100, 0.13) 0%, transparent 70%),
    radial-gradient(ellipse 40% 36% at 18% 80%, rgba(188, 142, 100, 0.05) 0%, transparent 70%);
}
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(214, 172, 134, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(214, 172, 134, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(ellipse 75% 64% at 50% 38%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 64% at 50% 38%, #000 20%, transparent 78%);
}

.hero-in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.85fr);
  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}

.hero-copy { display: grid; gap: 26px; justify-items: start; }

.hero-h1 {
  font-size: clamp(42px, 6.4vw, 88px);
  max-width: 12ch;
}
.hero-h1 .w { display: inline-block; overflow: clip; vertical-align: bottom; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.hero-h1 .wi { display: inline-block; transform: translateY(115%); }

.hero-sub { max-width: 50ch; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 6px; }

/* App Store badge */
.appstore {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  height: 60px;
  padding: 0 26px;
  border-radius: 15px;
  background: linear-gradient(180deg, #191613 0%, #0A0807 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 18px 40px -18px rgba(0, 0, 0, 0.9);
  transition: transform 240ms var(--ease), border-color 240ms ease, box-shadow 240ms ease;
}
.appstore:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 172, 134, 0.5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 24px 48px -18px rgba(188, 142, 100, 0.4);
}
.appstore svg { width: 26px; height: 26px; color: var(--ink); flex: none; }
.appstore .as-l { display: grid; line-height: 1.16; text-align: start; }
.appstore .as-s { font-size: 11px; color: var(--ink-2); font-weight: 400; }
.appstore .as-b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }

.hero-ticker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 8px;
}
.hero-ticker::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 10px var(--green);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Phone stage */
.hero-stage {
  position: relative;
  display: flex;
  justify-content: center;
  perspective: 1600px;
}

.halo {
  position: absolute;
  inset: -12% -16%;
  pointer-events: none;
}
.halo svg { width: 100%; height: 100%; }

/* Phone frame */
.ph {
  position: relative;
  width: var(--phw, 300px);
  border-radius: clamp(38px, calc(var(--phw, 300px) * 0.155), 52px);
  padding: 9px;
  background: linear-gradient(165deg, #2A2118 0%, #15100B 45%, #20180F 100%);
  box-shadow:
    inset 0 0 0 1px rgba(214, 172, 134, 0.22),
    0 50px 110px -30px rgba(0, 0, 0, 0.85),
    0 24px 60px -20px rgba(188, 142, 100, 0.22);
}
.ph-scr {
  position: relative;
  border-radius: clamp(30px, calc(var(--phw, 300px) * 0.125), 43px);
  overflow: hidden;
  background: #000;
  aspect-ratio: 1290 / 2796;
}
.ph-scr img { width: 100%; height: 100%; object-fit: cover; }

/* scanline sweep on hero phone */
.ph-scan {
  position: absolute;
  left: 0; right: 0;
  height: 34%;
  top: -40%;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(214, 172, 134, 0.06) 35%,
    rgba(214, 172, 134, 0.16) 78%,
    rgba(246, 227, 200, 0.65) 99%,
    transparent 100%);
  pointer-events: none;
}

.hero-ph { transform: rotateY(-8deg) rotateX(2deg) rotateZ(-1.6deg); }

/* floating chips */
.chip {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 13px;
  background: rgba(13, 11, 9, 0.85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line-2);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.8);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.chip b { font-weight: 600; color: var(--cream); font-size: 15px; letter-spacing: 0; }
.chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 10px var(--green); }
.chip--v { top: 13%; right: -7%; color: var(--green); }
.chip--s { bottom: 17%; left: -13%; color: var(--ink-2); flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 18px; }
.chip--s .bars { display: flex; gap: 4px; align-items: flex-end; height: 18px; }
.chip--s .bars i {
  width: 5px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--bronze-2), var(--bronze));
  animation: eq 1.5s ease-in-out infinite;
}
.chip--s .bars i:nth-child(1) { height: 60%; animation-delay: 0s; }
.chip--s .bars i:nth-child(2) { height: 100%; animation-delay: 0.15s; }
.chip--s .bars i:nth-child(3) { height: 45%; animation-delay: 0.3s; }
.chip--s .bars i:nth-child(4) { height: 80%; animation-delay: 0.45s; }
.chip--s .bars i:nth-child(5) { height: 55%; animation-delay: 0.6s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.6); } 50% { transform: scaleY(1); } }

.scroll-cue {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.scroll-cue i {
  width: 1px; height: 34px;
  background: linear-gradient(180deg, var(--bronze-2), transparent);
  animation: drip 2s var(--ease) infinite;
  transform-origin: top;
}
@keyframes drip { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ════════════════════════════════════════════════════════
   MARQUEE
   ════════════════════════════════════════════════════════ */
.mq {
  margin-top: clamp(70px, 9vw, 120px);
  border-block: 1px solid var(--line);
  padding: 19px 0;
  overflow: clip;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.mq-track {
  display: flex;
  width: max-content;
  gap: 54px;
  animation: mq 30s linear infinite;
}
.mq-track span {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 54px;
  white-space: nowrap;
}
.mq-track span::after { content: "◆"; font-size: 7px; color: var(--bronze); }
@keyframes mq { to { transform: translateX(-50%); } }

/* ════════════════════════════════════════════════════════
   SHOWCASE — phone shelf
   ════════════════════════════════════════════════════════ */
.shelf-wrap { position: relative; }
.shelf {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(14px, 2vw, 26px);
  align-items: start;
}
.shelf .ph { --phw: 100%; width: 100%; }
.shelf-item { display: grid; gap: 16px; justify-items: center; }
.shelf-item:nth-child(2) { margin-top: 44px; }
.shelf-item:nth-child(3) { margin-top: 10px; }
.shelf-item:nth-child(4) { margin-top: 58px; }
.shelf-item:nth-child(5) { margin-top: 22px; }
.shelf-cap {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.shelf-cap::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--bronze); }

@media (max-width: 860px) {
  .shelf {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 4px 20px 22px;
    margin: 0 -20px;
    scrollbar-width: none;
  }
  .shelf::-webkit-scrollbar { display: none; }
  .shelf-item { flex: 0 0 58vw; max-width: 250px; scroll-snap-align: center; margin-top: 0 !important; }
}

/* ════════════════════════════════════════════════════════
   SIGNALS — forensic rows
   ════════════════════════════════════════════════════════ */
.sig-rows { border-top: 1px solid var(--line); }
.sig-row {
  display: grid;
  grid-template-columns: 70px 56px 1fr 1.25fr;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
  padding: clamp(26px, 3.6vw, 40px) 8px;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: background 320ms ease;
}
.sig-row:hover { background: linear-gradient(90deg, var(--bronze-soft), transparent 65%); }
.sig-num {
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  color: var(--ink-3);
}
.sig-ic {
  width: 52px; height: 52px;
  border: 1px solid var(--line-2);
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--bronze-2);
  background: rgba(188, 142, 100, 0.05);
}
.sig-ic svg { width: 25px; height: 25px; }
.sig-ic svg path, .sig-ic svg circle, .sig-ic svg rect { stroke-dasharray: 120; stroke-dashoffset: 120; }
.sig-row.lit .sig-ic svg path, .sig-row.lit .sig-ic svg circle, .sig-row.lit .sig-ic svg rect {
  animation: draw 1.1s var(--ease) forwards;
}
@keyframes draw { to { stroke-dashoffset: 0; } }
.sig-t { font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.sig-d { color: var(--ink-2); font-size: 15px; line-height: 1.6; text-wrap: pretty; }

@media (max-width: 760px) {
  .sig-row { grid-template-columns: 44px 1fr; grid-template-rows: auto auto; row-gap: 10px; }
  .sig-num { display: none; }
  .sig-ic { width: 44px; height: 44px; border-radius: 12px; grid-row: 1; }
  .sig-t { grid-column: 2; grid-row: 1; align-self: center; }
  .sig-d { grid-column: 1 / -1; }
}

/* ════════════════════════════════════════════════════════
   DEEPDETECT+ TEASER
   ════════════════════════════════════════════════════════ */
.dd-panel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 30px;
  overflow: clip;
  background:
    radial-gradient(ellipse 60% 90% at 82% 50%, rgba(188, 142, 100, 0.1) 0%, transparent 65%),
    linear-gradient(120deg, #0E0B08 0%, #090706 100%);
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: 30px;
  padding: clamp(36px, 5vw, 72px);
}
.dd-copy { display: grid; gap: 22px; justify-items: start; }
.dd-copy .t-display { font-size: clamp(30px, 3.8vw, 52px); }
.dd-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px;
  border-radius: 999px;
  border: 1px solid rgba(214, 172, 134, 0.4);
  background: var(--bronze-soft);
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bronze-2);
}
.dd-badge svg { width: 12px; height: 12px; }

.dd-orb { position: relative; aspect-ratio: 1; max-width: 360px; margin-inline: auto; width: 100%; }
.dd-orb svg { width: 100%; height: 100%; }
.dd-core {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 40%, #F6E3C8 0%, #D6AC86 42%, #6E4E30 78%, transparent 100%);
  box-shadow: 0 0 50px 10px rgba(214, 172, 134, 0.4), 0 0 110px 30px rgba(188, 142, 100, 0.18);
  animation: corePulse 4.4s ease-in-out infinite;
}
.dd-core svg { width: 40%; height: 40%; }
/* Pulse via transform (composited) instead of animating box-shadow, which
   repaints a large blurred region every frame. The static glow scales with
   the element, so it still "breathes". */
@keyframes corePulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.05); }
}

@media (max-width: 860px) {
  .dd-panel { grid-template-columns: 1fr; }
  .dd-orb { max-width: 270px; order: -1; }
}

/* ════════════════════════════════════════════════════════
   PRIVACY BAND
   ════════════════════════════════════════════════════════ */
.priv { text-align: center; display: grid; justify-items: center; gap: 22px; }
.priv .t-display { font-size: clamp(36px, 5.4vw, 72px); max-width: 16ch; }
.priv .sub { margin-inline: auto; }

.priv-stats {
  margin-top: clamp(36px, 5vw, 60px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
  border-block: 1px solid var(--line);
}
.priv-stat {
  padding: clamp(28px, 4vw, 48px) 18px;
  display: grid;
  gap: 10px;
  justify-items: center;
}
.priv-stat + .priv-stat { border-inline-start: 1px solid var(--line); }
.priv-n {
  font-family: var(--f-mono);
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--cream);
}
.priv-l { font-size: 13.5px; color: var(--ink-3); max-width: 22ch; text-align: center; }

@media (max-width: 640px) {
  .priv-stats { grid-template-columns: 1fr; }
  .priv-stat + .priv-stat { border-inline-start: 0; border-top: 1px solid var(--line); }
}

/* ════════════════════════════════════════════════════════
   PRICING
   ════════════════════════════════════════════════════════ */
.plans {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: stretch;
}
.plan {
  position: relative;
  display: grid;
  gap: 0;
  align-content: start;
  padding: 30px 26px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background: linear-gradient(170deg, #0E0B09 0%, #0A0807 100%);
  transition: transform 300ms var(--ease), border-color 300ms ease;
}
.plan:hover { transform: translateY(-5px); border-color: var(--line-2); }
.plan-name {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.plan-amt {
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -0.04em;
  color: var(--cream);
  line-height: 1;
}
.plan-amt small { font-size: 20px; font-weight: 500; color: var(--ink-2); margin-inline-end: 2px; }
.plan-per { font-size: 13px; color: var(--ink-3); margin-top: 8px; }
.plan-feats { margin-block: 24px 26px; display: grid; gap: 11px; }
.plan-feats li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.45;
}
.plan-feats li::before {
  content: "";
  flex: none;
  width: 14px; height: 14px;
  margin-top: 3px;
  background: var(--bronze-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .btn { width: 100%; margin-top: auto; }

.plan--hot {
  border-color: transparent;
  background:
    linear-gradient(170deg, #15100A 0%, #0D0A07 100%) padding-box,
    linear-gradient(160deg, rgba(246, 227, 200, 0.75), rgba(188, 142, 100, 0.25) 55%, rgba(246, 227, 200, 0.5)) border-box;
}
.plan--hot:hover { border-color: transparent; }
.plan-badge {
  position: absolute;
  top: -12px;
  inset-inline-start: 24px;
  padding: 5px 13px;
  border-radius: 999px;
  background: linear-gradient(120deg, #F2DDC2, #D6AC86);
  color: #1A120A;
  font-family: var(--f-mono);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

@media (max-width: 1060px) { .plans { grid-template-columns: repeat(2, 1fr); gap: 16px; } }
@media (max-width: 560px) { .plans { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════
   LANGUAGES
   ════════════════════════════════════════════════════════ */
.langs { text-align: center; display: grid; justify-items: center; gap: 22px; }
.langs .t-display { font-size: clamp(32px, 4.6vw, 56px); }
.lang-cloud {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 880px;
}
.lang-cloud button {
  padding: 10px 19px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 14.5px;
  color: var(--ink-2);
  transition: all 240ms ease;
}
.lang-cloud button:hover { border-color: var(--bronze-2); color: var(--cream); transform: translateY(-2px); }
.lang-cloud button.on {
  border-color: var(--bronze-2);
  color: #1A120A;
  background: linear-gradient(120deg, #F2DDC2, #D6AC86);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════
   DOWNLOAD CTA
   ════════════════════════════════════════════════════════ */
.dl {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 26px;
  padding: clamp(70px, 9vw, 120px) 24px;
  border: 1px solid var(--line);
  border-radius: 34px;
  overflow: clip;
  background:
    radial-gradient(ellipse 60% 70% at 50% 0%, rgba(188, 142, 100, 0.14) 0%, transparent 65%),
    linear-gradient(180deg, #0D0A08 0%, #080606 100%);
}
.dl-icon {
  width: clamp(86px, 11vw, 116px);
  height: auto;
  aspect-ratio: 1;
  border-radius: 23.5%;
  box-shadow:
    0 36px 80px -22px rgba(188, 142, 100, 0.55),
    0 0 0 1px rgba(214, 172, 134, 0.2);
}
.dl .t-display { font-size: clamp(34px, 5vw, 64px); max-width: 14ch; }

/* ════════════════════════════════════════════════════════
   FOOTER
   ════════════════════════════════════════════════════════ */
footer { margin-top: clamp(90px, 11vw, 150px); border-top: 1px solid var(--line); }
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px;
  padding: clamp(48px, 6vw, 72px) 0 54px;
}
.foot-brand { font-size: 30px; }
.foot-tag { margin-top: 16px; font-size: 14px; color: var(--ink-3); max-width: 30ch; line-height: 1.6; }
.foot-dom { margin-top: 16px; }
.foot-col h4 {
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.foot-col ul { display: grid; gap: 11px; }
.foot-col a { font-size: 14.5px; color: var(--ink-2); transition: color 200ms ease; }
.foot-col a:hover { color: var(--cream); }
.foot-bot {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: space-between;
  padding: 22px 0 30px;
  border-top: 1px solid var(--line);
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

@media (max-width: 860px) {
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .foot-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE — hero & nav
   ════════════════════════════════════════════════════════ */
@media (max-width: 1020px) {
  .nav-links { display: none; }
}
@media (max-width: 860px) {
  .burger { display: block; }
  .nav-right .btn { display: none; }
  /* Language switcher stays pinned in the bar on every breakpoint so the
     visitor can always reach it — it auto-selects their language on arrival. */
  .nav-right { gap: 10px; }
  .lang-btn { height: 38px; padding: 0 12px; }

  .hero { min-height: auto; padding-top: calc(var(--nav-h) + 44px); }
  .hero-in { grid-template-columns: 1fr; gap: 64px; }
  .hero-copy { justify-items: center; text-align: center; }
  .hero-h1 { max-width: 14ch; }
  .hero-ctas { justify-content: center; }
  .hero-stage { --phw: 264px; }
  .hero-ph { --phw: 264px; }
  .chip--v { right: 0; }
  .chip--s { left: -2%; }
  .scroll-cue { display: none; }
  /* Drop the live blur on the floating chips too — solid bg is free. */
  .chip { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(13, 11, 9, 0.95); }
}
@media (max-width: 400px) {
  .hero-ph { --phw: 235px; }
  .chip--s { display: none; }
}

/* ════════════════════════════════════════════════════════
   VERA teaser + preview pill (Vera research page lives at /vera)
   Ice accent on purpose — bronze is today, ice is what's next.
   ════════════════════════════════════════════════════════ */
.pill-preview {
  display: inline-block;
  vertical-align: 2px;
  margin-left: 7px;
  padding: 2.5px 7px;
  border: 1px solid rgba(159, 196, 218, 0.32);
  border-radius: 999px;
  font-family: var(--f-mono);
  font-size: 8.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9FC4DA;
  background: rgba(159, 196, 218, 0.10);
}

.vera-teaser {
  margin-top: clamp(56px, 7vw, 90px);
  border: 1px solid rgba(159, 196, 218, 0.17);
  border-radius: 22px;
  overflow: clip;
  background:
    radial-gradient(ellipse 55% 90% at 85% 50%, rgba(159, 196, 218, 0.09) 0%, transparent 65%),
    linear-gradient(120deg, #090C0E 0%, #070909 100%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  padding: clamp(24px, 3.5vw, 38px) clamp(24px, 4vw, 44px);
  flex-wrap: wrap;
}
.vera-teaser-copy { display: grid; gap: 9px; min-width: min(100%, 420px); flex: 1; }
.vera-teaser-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.26em; text-transform: uppercase; color: #9FC4DA;
}
.vera-teaser-eyebrow::before { content: ""; width: 22px; height: 1px; background: #5E86A0; }
.vera-teaser-eyebrow i {
  width: 6px; height: 6px; border-radius: 50%;
  background: #9FC4DA; box-shadow: 0 0 9px #9FC4DA;
  animation: pulse 2.2s ease-in-out infinite;
}
.vera-teaser h3 { font-size: clamp(21px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.vera-teaser h3 em { font-family: var(--f-serif); font-style: italic; font-weight: 400; color: #D7E9F4; }
.vera-teaser p { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); max-width: 52ch; }
.vera-teaser-cta {
  flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  height: 46px; padding: 0 24px;
  border: 1px solid rgba(159, 196, 218, 0.32);
  border-radius: 12px;
  font-size: 15px; font-weight: 600;
  color: #D7E9F4;
  background: rgba(159, 196, 218, 0.06);
  transition: transform 240ms var(--ease), border-color 240ms ease, background 240ms ease;
}
.vera-teaser-cta:hover { border-color: #9FC4DA; background: rgba(159, 196, 218, 0.12); transform: translateY(-2px); }

/* Reveal base state (JS animates in; visible if no JS) */
[data-rv] { opacity: 1; }
html.js [data-rv] { opacity: 0; transform: translateY(28px); }
html.js.no-anim [data-rv] { opacity: 1; transform: none; }

/* Hero entrance — with the splash gone, the hero animates in on load.
   Hide the entrance pieces until JS hydrates so nothing flashes in at
   full opacity before GSAP takes over. Every code path that runs the
   hero adds either `.hero-ready` (animate / reduced-motion) or
   `.no-anim` (no GSAP), so the content is always revealed. */
html.js .hero-h1,
html.js [data-hero-el],
html.js [data-hero-ph],
html.js [data-chip],
html.js .hero .scroll-cue { opacity: 0; }

html.hero-ready .hero-h1,
html.hero-ready [data-hero-el],
html.hero-ready [data-hero-ph],
html.hero-ready [data-chip],
html.hero-ready .hero .scroll-cue,
html.js.no-anim .hero-h1,
html.js.no-anim [data-hero-el],
html.js.no-anim [data-hero-ph],
html.js.no-anim [data-chip],
html.js.no-anim .hero .scroll-cue { opacity: 1; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mq-track { animation: none; }
  .chip--s .bars i, .dd-core, .hero-ticker::before, .scroll-cue i { animation: none; }
  html.js [data-rv] { opacity: 1; transform: none; }
}