/* ════════════════════════════════════════════════════════════
   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: smooth; }
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: 700; /* above the mobile-menu overlay (600) so the burger/✕ stays clickable */
  height: var(--nav-h);
  transition: background 380ms ease, border-color 380ms ease;
  border-bottom: 1px solid transparent;
}
.nav.is-solid {
  /* Keep the fixed layer opaque: backdrop blur forces a viewport repaint on
     every scroll frame and was the main source of scroll jank. */
  background: rgba(6, 5, 4, 0.97);
  border-bottom-color: var(--line);
}

.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: 26px; }
.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.98);
  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); }

/* ── Nav dropdown (Verifyco Web) — same language as the lang menu ────── */
.navdrop { position: relative; display: flex; align-items: center; }
.navdrop-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14.5px; font-weight: 500;
  color: var(--ink-2);
  transition: color 220ms ease;
}
.navdrop-btn .car { width: 9px; height: 9px; transition: transform 240ms ease; }
.navdrop-btn:hover, .navdrop.open .navdrop-btn { color: var(--cream); }
.navdrop.open .navdrop-btn .car { transform: rotate(180deg); }
.navdrop-menu {
  position: absolute;
  top: calc(100% + 16px); left: 50%;
  width: 200px;
  margin-left: -100px;
  background: rgba(13, 11, 9, 0.98);
  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);
}
.navdrop.open .navdrop-menu { opacity: 1; visibility: visible; transform: none; }
.navdrop-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink-2);
  transition: background 160ms ease, color 160ms ease;
}
.navdrop-menu a:hover { background: var(--bronze-soft); color: var(--cream); }
.navdrop-menu a:first-child { color: var(--bronze-2); }

/* 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(135deg, #F7E7D2 0%, #E0BC98 46%, #CBA079 100%);
  color: #1A120A;
  box-shadow: 0 10px 30px -12px rgba(214, 172, 134, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-fill::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.5) 48%, transparent 64%);
  transform: translateX(-130%); transition: transform 720ms var(--ease); pointer-events: none;
}
.btn-fill:hover { transform: translateY(-2px); box-shadow: 0 20px 46px -14px rgba(214, 172, 134, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.btn-fill:hover::after { transform: translateX(130%); }
@media (prefers-reduced-motion: reduce) { .btn-fill::after { transition: none; } }
.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;
  /* Fully opaque: any page bleed-through behind the big links reads as mess. */
  background: #060504;
  display: flex;
  flex-direction: column;
  /* Start below the fixed header (the nav stays visible above the overlay)
     and scroll internally when links + language pills exceed the viewport.
     `justify-content: center` overflowed equally top AND bottom, pushing the
     first links up underneath the brand. The auto-margins on nav/foot below
     re-center the group only when there is room. */
  justify-content: flex-start;
  padding: calc(var(--nav-h) + 18px) 34px 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 360ms ease, visibility 360ms ease;
}
.mmenu > nav { margin-top: auto; }
.mmenu .mmenu-foot { margin-bottom: auto; }
body.menu-open .mmenu { opacity: 1; visibility: visible; }
/* Keep the header bar opaque while the menu is open, so scrolled menu
   links pass cleanly under it instead of colliding with the brand. */
body.menu-open .nav { background: #060504; }
.mmenu a.mlink {
  display: block;
  font-size: clamp(24px, 6.4vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--ink);
  padding: 12px 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); }

/* Verifyco Web quick links inside the mobile menu — compact pill row */
.mmenu-web { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mmenu-web-h {
  width: 100%;
  font-family: var(--f-mono); font-size: 9.5px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--bronze-2);
}
.mmenu-web a {
  font-size: 13px; font-weight: 500;
  padding: 8px 14px;
  border: 1px solid rgba(214, 172, 134, 0.28);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(214, 172, 134, 0.06);
}

/* ════════════════════════════════════════════════════════
   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; }

/* ── Store badges — one shared shape so App Store / Web / Android read as
   a matched set. Only the accent differs; Android stays muted but never
   looks broken. ─────────────────────────────────────────────────────── */
.appstore, .webapp, .androidsoon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 60px;
  padding: 0 24px;
  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, .webapp: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.42);
}
/* Icon: bare glyph in a fixed 26px slot, so all three align identically. */
.appstore .as-ic, .webapp .wa-ic, .androidsoon .wa-ic,
.appstore > svg {
  width: 26px; height: 26px; flex: none;
  display: grid; place-items: center;
}
.appstore svg { width: 26px; height: 26px; color: var(--ink); flex: none; }
.webapp .wa-ic svg { width: 24px; height: 24px; color: var(--bronze-2); }
.androidsoon .wa-ic svg { width: 24px; height: 24px; color: var(--ink-3); }

.appstore .as-l, .webapp .as-l, .androidsoon .as-l { display: grid; line-height: 1.16; text-align: start; }
.appstore .as-s, .webapp .as-s { font-size: 11px; color: var(--ink-2); font-weight: 400; }
.appstore .as-b, .webapp .as-b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }

/* Web app — same shape, a whisper of bronze so it pairs with App Store. */
.webapp {
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(188, 142, 100, 0.16) 0%, transparent 55%),
    linear-gradient(180deg, #191613 0%, #0A0807 100%);
  border-color: rgba(214, 172, 134, 0.26);
}

/* Android — deliberately inactive, but a clean muted twin (no dashed/broken look). */
.androidsoon { cursor: default; opacity: 0.82; }
.androidsoon .as-s { font-size: 11px; color: var(--ink-3); font-weight: 400; }
.androidsoon .as-b { font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink-2); display: flex; align-items: center; gap: 9px; }
.androidsoon .soon { font-family: var(--f-mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-2); border: 1px solid rgba(214, 172, 134, 0.32); border-radius: 999px; padding: 2px 8px; }

.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; } }

/* Vera "Preview" badge — used in nav/footer on the landing (self-contained
   here so it renders without vera.css; vera.css restyles it identically). */
.pill-preview {
  display: inline-flex; align-items: center; gap: 4px;
  margin-left: 7px; padding: 3px 8px 3px 6px;
  border: 1px solid rgba(159, 196, 218, 0.32); border-radius: 999px;
  font-family: var(--f-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: #EAF4FA;
  background: linear-gradient(180deg, rgba(159, 196, 218, 0.16), rgba(159, 196, 218, 0.06));
  vertical-align: middle; transform: translateY(-1px);
}
.pill-preview i { width: 5px; height: 5px; border-radius: 50%; background: #9FC4DA; box-shadow: 0 0 7px #9FC4DA; animation: pulse 2.2s ease-in-out infinite; }
.foot-col .pill-preview { transform: none; font-size: 8px; }
@media (prefers-reduced-motion: reduce) { .pill-preview i { animation: none; } }

/* 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); }

/* Rotating analysis beam — a light that travels the phone's frame, as if
   the screenshot is being scanned. Mobile-only (enabled in the media query);
   the beam is a conic gradient spinning inside a thin ring mask, so only a
   2px band of travelling light is ever painted. */
.ph-beam {
  display: none;
  position: absolute;
  inset: -3px;
  border-radius: clamp(40px, calc(var(--phw, 300px) * 0.165), 55px);
  padding: 2px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite: exclude;
  pointer-events: none;
  z-index: 3;
}
.ph-beam i {
  position: absolute;
  inset: -78%;
  background: conic-gradient(from 0deg,
    transparent 0 60%,
    rgba(214, 172, 134, 0.0) 66%,
    rgba(214, 172, 134, 0.75) 84%,
    rgba(246, 227, 200, 1) 92%,
    transparent 97%);
  animation: phBeam 4.6s linear infinite;
}
@keyframes phBeam { to { transform: rotate(360deg); } }

/* Verdict chip — the left-hand companion of the AUTHENTIC 98 chip on
   mobile: the three classes the engine decides between, REAL lit. */
/* Double-class so this always beats the generic `.chip` display rule below
   (same-specificity order bit us here once already). */
.chip.chip--verdict { display: none; }
.chip--verdict .cv-h {
  font-size: 8px; letter-spacing: 0.22em; color: var(--ink-3);
  padding-bottom: 2px; border-bottom: 1px solid var(--line);
}
.chip--verdict .cv-row {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; letter-spacing: 0.16em; color: var(--ink-3);
}
.chip--verdict .cv-row i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(139, 126, 112, 0.45); flex: none;
}
.chip--verdict .cv-row.is-on { color: var(--green); }
.chip--verdict .cv-row.is-on i { background: var(--green); box-shadow: 0 0 9px var(--green); animation: pulse 2.2s ease-in-out infinite; }

/* floating chips */
.chip {
  position: absolute;
  /* Above the phone (z 2) and its beam (z 3): a chip half-swallowed by the
     phone frame reads as a glitch — the floating card must sit on top. */
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 16px;
  border-radius: 13px;
  /* Solid fill instead of backdrop-blur: these chips float continuously, and
     re-blurring the backdrop every frame was a major hero-scroll jank source. */
  background: rgba(15, 12, 10, 0.94);
  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; } }

/* [hidden] is a UA style that any author display rule overrides — restore it
   for the panels/notes so the inactive platform is actually hidden. */
.plans[hidden] { display: none; }
[data-ppanel-note][hidden] { display: none; }

/* ── Platform switch (iPhone ⇄ Web) ─────────────────────────────────── */
.price-switch {
  position: relative;
  display: flex;
  width: fit-content;
  margin: 6px auto 44px;
  padding: 5px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(170deg, #0E0B09, #0A0807);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.ps-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 11px 22px; border-radius: 999px;
  font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--ink-3); white-space: nowrap;
  transition: color 260ms ease;
}
.ps-btn svg { width: 16px; height: 16px; }
.ps-btn.is-on { color: #1A120A; }
.ps-glider {
  position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 0;
  width: 0; border-radius: 999px;
  background: linear-gradient(120deg, #F2DDC2, #D6AC86);
  box-shadow: 0 8px 24px -10px rgba(214, 172, 134, 0.6);
  transition: transform 380ms var(--ease), width 380ms var(--ease);
}
@media (prefers-reduced-motion: reduce) { .ps-glider { transition: none; } }

/* ── Web plan extras — description, chips and a clean spec table ─────── */
.plan-once, .plan-cyc { font-weight: 500; letter-spacing: 0; color: var(--ink-3); }
.plan-cyc { font-size: 16px; margin-inline-start: 6px; }
.plan-once {
  display: inline-block; vertical-align: middle;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze-2); border: 1px solid rgba(214, 172, 134, 0.32);
  border-radius: 999px; padding: 3px 8px; margin-inline-start: 10px;
}
.plan-desc { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin: 14px 0 0; text-wrap: pretty; }
.plan-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 16px 0 2px; }
.plan-chip {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.03em;
  padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(214, 172, 134, 0.3); color: var(--bronze-2);
  background: rgba(214, 172, 134, 0.07);
}
.plan-chip.ghost { border-color: var(--line-2); color: var(--ink-3); background: transparent; }
.plan-spec { margin: 18px 0 24px; display: grid; }
.plan-spec > div {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--line);
  font-size: 13px;
}
.plan-spec > div:last-child { border-bottom: 1px solid var(--line); }
.plan-spec dt { color: var(--ink-3); }
.plan-spec dd { margin: 0; color: var(--ink); font-weight: 500; }
.plan-spec dd.yes { color: var(--bronze-2); }
.plan-spec dd.no { color: var(--ink-3); opacity: 0.55; }

.price-foot { text-align: center; margin-top: 28px; font-size: 12.5px; color: var(--ink-3); }
.price-foot a { color: var(--bronze-2); border-bottom: 1px solid rgba(214, 172, 134, 0.4); }

/* ── Verifyco Web · for teams — three linked cards, detail lives on web ── */
.webx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .webx { grid-template-columns: 1fr; } }
.webx-card {
  display: grid; gap: 12px; align-content: start;
  padding: 28px 26px;
  border: 1px solid var(--line);
  border-radius: var(--rad);
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(188, 142, 100, 0.09), transparent 52%),
    linear-gradient(170deg, #0E0B09 0%, #0A0807 100%);
  transition: transform 260ms var(--ease), border-color 260ms ease, box-shadow 260ms ease;
}
.webx-card:hover {
  transform: translateY(-4px);
  border-color: rgba(214, 172, 134, 0.5);
  box-shadow: 0 24px 48px -28px rgba(188, 142, 100, 0.35);
}
.webx-ic {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 12px;
  border: 1px solid rgba(214, 172, 134, 0.26);
  background: linear-gradient(180deg, rgba(214, 172, 134, 0.13), rgba(214, 172, 134, 0.04));
  color: var(--bronze-2);
}
.webx-ic svg { width: 21px; height: 21px; }
.webx-card h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); }
.webx-card p { font-size: 14px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; }
.webx-card p em { font-style: normal; color: var(--bronze-2); }
.webx-go {
  margin-top: 4px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.08em;
  color: var(--bronze-2);
  transition: color 200ms ease;
}
.webx-card:hover .webx-go { color: var(--cream); }
.webx-inline { color: var(--bronze-2); border-bottom: 1px solid rgba(214, 172, 134, 0.4); }
.webx-inline:hover { color: var(--cream); }

/* ════════════════════════════════════════════════════════
   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
   ════════════════════════════════════════════════════════ */
/* Collapse to the hamburger BEFORE the 7 links can cram/wrap — the longest
   language (Turkish/German) needs the full bar width, so switch early. */
@media (max-width: 1200px) {
  .nav-links { display: none; }
  .burger { display: block; }
}
@media (max-width: 860px) {
  .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; }
  .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); }

  /* Mobile analysis composition: no boxes, no frames — bare annotation
     text in the theme bronze, tied to the device by thin light leader
     lines that dive into its frame (the same light language as the
     travelling beam). The screen itself stays fully unobstructed. */
  .ph-beam { display: block; }
  .hero { padding-bottom: 84px; }

  .chip--v {
    z-index: 1;
    top: -52px; right: 6%;
    padding: 0; background: none; border: none; box-shadow: none;
    gap: 9px;
    color: var(--bronze-2);
  }
  .chip--v .dot { background: var(--bronze-2); box-shadow: 0 0 10px rgba(214, 172, 134, 0.85); }
  .chip--v b { font-size: 17px; }
  /* leader line: from the text down, plugging into the device's shoulder */
  .chip--v::after {
    content: "";
    position: absolute;
    top: calc(100% + 6px); right: 26px;
    width: 1.5px; height: 52px;
    background: linear-gradient(180deg, rgba(246, 227, 200, 0.9), rgba(214, 172, 134, 0.2));
  }

  .chip.chip--verdict {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    gap: 20px;
    z-index: 1;
    top: auto; bottom: -52px; left: 0; right: 0;
    padding: 0; background: none; border: none; box-shadow: none;
  }
  .chip--verdict .cv-h { display: none; }
  .chip--verdict .cv-row { gap: 7px; font-size: 9.5px; color: rgba(139, 126, 112, 0.8); }
  .chip--verdict .cv-row i { background: rgba(139, 126, 112, 0.4); }
  .chip--verdict .cv-row.is-on { color: var(--cream); }
  .chip--verdict .cv-row.is-on i { background: var(--bronze-2); box-shadow: 0 0 10px rgba(214, 172, 134, 0.9); }
  /* leader line: out of the device's chin, down to the verdict words */
  .chip--verdict::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 6px); left: 50%; margin-left: -1px;
    width: 1.5px; height: 44px;
    background: linear-gradient(180deg, rgba(214, 172, 134, 0.2), rgba(246, 227, 200, 0.9));
  }
  .chip--s { display: none; }
}
@media (max-width: 400px) {
  .hero-ph { --phw: 235px; }
  .chip--s { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .ph-beam { display: none; }
  .chip--verdict .cv-row.is-on i { animation: none; }
}

/* 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; }

/* Ambient motion only runs while its section is near the viewport. */
.is-ambient-paused .mq-track,
.is-ambient-paused .chip--s .bars i,
.is-ambient-paused .dd-core,
.is-ambient-paused .hero-ticker::before,
.is-ambient-paused .scroll-cue i { animation-play-state: paused; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .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; }
}

/* ════════════════════════════════════════════════════════
   2026 PRODUCT + PERFORMANCE PASS
   Corporate iOS/Web platform story, finite motion and
   evidence-led product previews. The original palette stays.
   ════════════════════════════════════════════════════════ */

/* Skip rendering work for long, off-screen sections without affecting SEO. */
@supports (content-visibility: auto) {
  .sec {
    content-visibility: auto;
    contain-intrinsic-size: auto 900px;
  }
  footer {
    content-visibility: auto;
    contain-intrinsic-size: auto 560px;
  }
}

.hero-in { z-index: 2; }
.hero-stage { isolation: isolate; }
.hero-ph { z-index: 2; }
.halo { z-index: -1; }

/* Lightweight reveal system; replaces GSAP/ScrollTrigger. */
html.js [data-rv] {
  transition: opacity 680ms var(--ease), transform 680ms var(--ease);
}
html.js [data-rv].is-visible {
  opacity: 1;
  transform: none;
}
html.js .hero-ready [data-hero-el],
html.js .hero-ready [data-hero-ph],
html.js .hero-ready [data-chip],
html.js .hero-ready .hero-h1,
html.js .hero-ready .scroll-cue {
  opacity: 1;
  transform: none;
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
}
html.js .hero:not(.hero-ready) [data-hero-el] { transform: translateY(18px); }
html.js .hero:not(.hero-ready) [data-hero-ph] { transform: translateY(34px) rotateY(-8deg) rotateZ(-1.6deg); }

/* iOS UFO port: a single inline SVG, one finite run, compositor-only motion. */
.hero-ufo {
  position: absolute;
  z-index: 1;
  top: 8%;
  left: 50%;
  width: clamp(190px, 27vw, 420px);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(-92vw, 9vh, 0) scale(.72) rotate(0deg);
  transform-origin: center;
}
.hero-ufo svg { width: 100%; overflow: visible; }
.hero-ufo.is-flying {
  will-change: transform, opacity;
  animation: ufoFlight 7.2s var(--ease) 850ms 1 both;
}
.ufo-beam {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: 50% 0;
}
.hero-ufo.is-flying .ufo-beam { animation: ufoBeam 7.2s ease 850ms 1 both; }
@keyframes ufoFlight {
  0%   { opacity: 0; transform: translate3d(-92vw, 9vh, 0) scale(.72) rotate(0deg); }
  10%  { opacity: .15; }
  18%  { opacity: .32; transform: translate3d(-44vw, 4vh, 0) scale(.78) rotate(1.5deg); }
  34%  { opacity: .42; transform: translate3d(8vw, 12vh, 0) scale(.92) rotate(.4deg); }
  38%  { opacity: .42; transform: translate3d(8vw, 12vh, 0) scale(.92) rotate(0deg); }
  52%  { opacity: .36; transform: translate3d(28vw, 1vh, 0) scale(.86) rotate(1.5deg); }
  68%  { opacity: .31; transform: translate3d(-4vw, 10vh, 0) scale(.9) rotate(-1.5deg); }
  84%  { opacity: .25; transform: translate3d(2vw, 8vh, 0) scale(.86) rotate(0deg); }
  92%  { opacity: .25; transform: translate3d(2vw, 8vh, 0) scale(.86) rotate(0deg); }
  100% { opacity: 0; transform: translate3d(2vw, 8vh, 0) scale(.84) rotate(0deg); }
}
@keyframes ufoBeam {
  0%, 31%, 40%, 100% { opacity: 0; transform: scaleY(.12) scaleX(.45); }
  34%, 38% { opacity: .42; transform: scaleY(1) scaleX(1); }
}

/* Platform CTAs: one compact 2x2 system with a consistent visual hierarchy. */
.platform-actions {
  width: min(480px, 100%);
  display: grid;
  gap: 10px;
}
.platform-primary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}
/* One family, one theme: every platform card shares the same warm espresso
   glass, bronze-lit icon chip and bright title — no washed-out blue/green
   odd ones out. Identity lives in the glyph, not in a clashing tint. */
.platform-card,
.platform-card.appstore,
.platform-card.webapp {
  min-width: 0;
  width: 100%;
  height: auto;
  min-height: 66px;
  padding: 11px 13px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 14px;
  align-items: center;
  gap: 11px;
  border-radius: 15px;
  text-align: left;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(188, 142, 100, 0.13), transparent 52%),
    linear-gradient(155deg, rgba(29, 24, 19, .98), rgba(10, 8, 6, .98));
  border: 1px solid rgba(214, 172, 134, .32);
  box-shadow: inset 0 1px 0 rgba(246, 227, 200, .09), 0 22px 48px -30px #000;
  transform: none;
  transition: transform 220ms var(--ease), border-color 220ms ease, box-shadow 220ms ease;
}
.platform-card:hover,
.platform-card.appstore:hover,
.platform-card.webapp:hover {
  transform: translateY(-2px);
  border-color: rgba(214, 172, 134, .6);
  box-shadow: inset 0 1px 0 rgba(246, 227, 200, .12), 0 22px 48px -26px rgba(188, 142, 100, .38);
}
.platform-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(214, 172, 134, .26);
  background: linear-gradient(180deg, rgba(214, 172, 134, .14), rgba(214, 172, 134, .05));
  color: var(--bronze-2);
}
.platform-card .platform-icon svg,
.platform-card.appstore .platform-icon svg { width: 19px; height: 20px; color: currentColor; }
.platform-copy { min-width: 0; display: grid; gap: 2px; }
.platform-kicker {
  font: 500 8.5px/1.2 var(--f-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--bronze-2);
}
.platform-copy strong { color: var(--cream); font-size: 14.5px; line-height: 1.2; letter-spacing: -.01em; }
.platform-copy small { color: var(--ink-3); font-size: 10.5px; line-height: 1.3; }
.platform-go { color: var(--ink-3); font-size: 17px; transition: transform 200ms ease, color 200ms ease; }
.platform-card:hover .platform-go { color: var(--cream); transform: translate(2px, -2px); }
.android-credit {
  max-width: 96ch;
  margin: -16px 0 28px;
  color: rgba(139, 126, 112, .72);
  font-size: 9px;
  line-height: 1.55;
}
.android-credit a { color: rgba(183, 159, 134, .82); text-decoration: underline; text-underline-offset: 2px; }
.platform-card--android,
.platform-card--android.androidsoon {
  display: grid;
  min-height: 66px;
  padding: 11px 13px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 11px;
  cursor: default;
  opacity: 1;
}
/* Inactive, not alien: same family card, slightly dimmed. */
.platform-card--android .platform-copy strong { color: var(--ink-2); }
.platform-icon--android { width: 38px; height: 38px; }
.platform-icon--android .android-mark,
.platform-card .platform-icon--android .android-mark {
  width: 26px;
  height: auto;
}
/* The robot mark joins the theme (the CC-BY licence allows modification);
   CSS `fill` wins over the SVG's presentation attribute. */
.android-mark path[fill="#34A853"] { fill: var(--bronze-2); }
.platform-status {
  padding: 4px 8px;
  border: 1px solid rgba(214, 172, 134, .34);
  border-radius: 999px;
  color: var(--bronze-2);
  background: rgba(214, 172, 134, .07);
  font: 600 7.5px/1 var(--f-mono);
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
}
.platform-card--workflow .platform-icon { color: var(--bronze-2); }

/* Interactive iOS gallery. */
.showcase-hint { display: flex; align-items: center; gap: 8px; color: var(--ink-3); font: 500 10px/1.4 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; }
.showcase-hint > span[aria-hidden] { color: var(--bronze-2); }
.screen-trigger { cursor: zoom-in; border-radius: 24px; transition: transform 260ms var(--ease); }
.screen-trigger:hover { transform: translateY(-6px); }
.screen-trigger:focus-visible { outline-offset: 8px; }
.screen-dialog {
  width: min(920px, calc(100% - 32px));
  max-height: calc(100svh - 32px);
  padding: 0;
  color: var(--ink);
  border: 1px solid var(--line-2);
  border-radius: 24px;
  background: #090706;
  box-shadow: 0 50px 120px rgba(0,0,0,.85);
}
.screen-dialog::backdrop { background: rgba(3,2,2,.88); }
.screen-dialog-card { min-height: 0; }
.screen-dialog-top { height: 52px; padding: 0 16px 0 20px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); font: 500 9px/1 var(--f-mono); letter-spacing: .15em; color: var(--ink-3); }
.screen-dialog-top > span { display: flex; align-items: center; gap: 8px; }
.screen-dialog-top i { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.screen-dialog-close { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 10px; font-size: 22px; line-height: 1; color: var(--ink-2); }
.screen-dialog figure { margin: 0; padding: clamp(18px, 4vw, 38px); display: grid; grid-template-columns: minmax(210px, 340px) 1fr; align-items: center; justify-content: center; gap: clamp(24px, 5vw, 58px); }
.screen-dialog figure img { width: min(340px, 100%); max-height: calc(100svh - 150px); object-fit: contain; border-radius: 34px; box-shadow: 0 28px 70px -24px #000; }
.screen-dialog figcaption { font-size: clamp(27px, 4vw, 48px); line-height: 1.08; letter-spacing: -.035em; color: var(--cream); }

/* DeepDetect+: evidence instrument instead of a decorative orbit. */
.dd-panel { grid-template-columns: minmax(0, .9fr) minmax(420px, 1.1fr); }
.dd-visual {
  min-width: 0;
  padding: 14px;
  border: 1px solid rgba(214,172,134,.18);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(23,17,12,.98), rgba(7,6,5,.98));
  box-shadow: 0 38px 80px -45px #000, inset 0 1px 0 rgba(255,255,255,.045);
  contain: layout paint;
}
.dd-visual-top { display: flex; align-items: center; justify-content: space-between; padding: 2px 2px 12px; border-bottom: 1px solid var(--line); font: 500 8.5px/1 var(--f-mono); letter-spacing: .12em; color: var(--bronze-2); }
.dd-visual-top span { display: flex; gap: 7px; align-items: center; }
.dd-visual-top i { width: 5px; height: 5px; border-radius: 50%; background: var(--green); }
.dd-visual-top b { font-weight: 400; color: var(--ink-3); }
.dd-scan-stage { position: relative; min-height: 290px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 50% 45%, rgba(188,142,100,.09), transparent 56%); }
.dd-face-map { position: absolute; inset: 16px 6% 20px; width: 88%; height: calc(100% - 36px); stroke: rgba(214,172,134,.34); stroke-width: 1; }
.dd-face-map .dd-contour { stroke: rgba(231,201,164,.55); }
.dd-face-map .dd-mesh { stroke: rgba(188,142,100,.26); fill: rgba(214,172,134,.65); }
.dd-face-map .dd-anomaly { stroke: #d77858; stroke-width: 3; filter: drop-shadow(0 0 6px rgba(215,120,88,.45)); }
.dd-corner { position: absolute; width: 24px; height: 24px; border-color: rgba(231,201,164,.65); }
.dd-corner--tl { top: 18px; left: 18px; border-top: 1px solid; border-left: 1px solid; }
.dd-corner--tr { top: 18px; right: 18px; border-top: 1px solid; border-right: 1px solid; }
.dd-corner--bl { bottom: 18px; left: 18px; border-bottom: 1px solid; border-left: 1px solid; }
.dd-corner--br { bottom: 18px; right: 18px; border-bottom: 1px solid; border-right: 1px solid; }
.dd-scanline { position: absolute; left: 8%; right: 8%; top: 12%; height: 1px; opacity: 0; background: linear-gradient(90deg, transparent, #f2ddc2, transparent); box-shadow: 0 0 10px rgba(242,221,194,.5); }
.dd-visual.is-active .dd-scanline { animation: ddScan 1.9s ease-out 1 both; }
@keyframes ddScan { 0% { opacity: 0; transform: translateY(0); } 12% { opacity: .8; } 82% { opacity: .55; } 100% { opacity: 0; transform: translateY(205px); } }
.dd-region { position: absolute; right: 18px; top: 44%; padding: 7px 9px; border: 1px solid rgba(215,120,88,.32); background: rgba(26,11,7,.86); border-radius: 7px; font: 500 7.5px/1 var(--f-mono); letter-spacing: .08em; color: #d78a6d; }
.dd-region b { color: #f0b194; }
.dd-verdict { position: absolute; left: 18px; bottom: 18px; width: 176px; padding: 12px; display: grid; gap: 4px; border: 1px solid rgba(214,172,134,.22); background: rgba(9,7,6,.92); border-radius: 10px; }
.dd-verdict small { font: 500 7px/1 var(--f-mono); letter-spacing: .14em; color: var(--ink-3); }
.dd-verdict strong { font-size: 13px; color: #e1b090; }
.dd-verdict span { font: 8px/1 var(--f-mono); color: var(--ink-3); }
.dd-evidence { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; padding-top: 11px; }
.dd-evidence > span { min-width: 0; display: grid; grid-template-columns: 7px 1fr; gap: 3px 7px; padding: 9px; border: 1px solid var(--line); border-radius: 9px; }
.dd-evidence i { grid-row: 1 / 3; align-self: center; width: 6px; height: 6px; border-radius: 50%; background: #d77858; }
.dd-evidence b { font: 500 8px/1 var(--f-mono); color: var(--cream-2); }
.dd-evidence em { font: 7.5px/1 var(--f-mono); font-style: normal; color: var(--ink-3); white-space: nowrap; }

/* Vera gets a full product card with its own glacial identity. */
.vera-teaser {
  position: relative;
  margin-top: 22px;
  padding: clamp(30px, 5vw, 62px);
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr);
  align-items: center;
  gap: clamp(30px, 5vw, 72px);
  overflow: hidden;
  border: 1px solid rgba(159,196,218,.19);
  border-radius: 30px;
  background:
    radial-gradient(circle at 78% 15%, rgba(87,165,207,.13), transparent 38%),
    linear-gradient(135deg, #090d11, #050709 72%);
  contain: layout paint;
}
.vera-teaser::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(159,196,218,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(159,196,218,.025) 1px, transparent 1px); background-size: 38px 38px; -webkit-mask-image: linear-gradient(90deg, transparent, #000); mask-image: linear-gradient(90deg, transparent, #000); }
.vera-teaser-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 19px; }
.vera-teaser-eyebrow { display: flex; align-items: center; gap: 8px; font: 500 9px/1 var(--f-mono); letter-spacing: .17em; text-transform: uppercase; color: #9fc4da; }
.vera-teaser-eyebrow i { width: 6px; height: 6px; border-radius: 50%; background: #9fc4da; }
.vera-teaser h3 { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -.04em; color: #eef7fb; }
.vera-teaser h3 em { font-family: var(--f-serif); font-weight: 400; color: #9fc4da; }
.vera-teaser-copy > p { max-width: 48ch; color: #8fa2ad; font-size: 15.5px; line-height: 1.65; }
.vera-teaser-proof { display: flex; flex-wrap: wrap; gap: 7px; }
.vera-teaser-proof span { padding: 6px 9px; border: 1px solid rgba(159,196,218,.17); border-radius: 999px; font: 500 8px/1 var(--f-mono); letter-spacing: .06em; color: #86a9bd; }
.vera-teaser-cta { display: inline-flex; align-items: center; gap: 9px; padding-bottom: 5px; border-bottom: 1px solid rgba(159,196,218,.45); color: #d7e9f4; font-size: 13px; font-weight: 600; }
.vera-teaser-cta svg { transition: transform 180ms ease; }
.vera-teaser-cta:hover svg { transform: translateX(3px); }
.vera-teaser-workspace { position: relative; z-index: 1; padding: 14px; border: 1px solid rgba(159,196,218,.2); border-radius: 18px; background: linear-gradient(155deg, rgba(15,22,27,.98), rgba(5,8,10,.98)); box-shadow: 0 35px 80px -45px #000; }
.vera-mini-top,.vera-mini-file,.vera-mini-answer,.vera-mini-foot { display: flex; align-items: center; }
.vera-mini-top { justify-content: space-between; padding: 2px 2px 12px; border-bottom: 1px solid rgba(159,196,218,.11); font: 500 8px/1 var(--f-mono); letter-spacing: .11em; color: #9fc4da; }
.vera-mini-top span { display: flex; align-items: center; gap: 7px; }
.vera-mini-top i { width: 5px; height: 5px; border-radius: 50%; background: #7bc9a2; }
.vera-mini-top b { font-weight: 500; color: #5d7481; }
.vera-mini-file { gap: 11px; padding: 14px 2px; }
.vera-mini-thumb { width: 54px; height: 39px; border-radius: 8px; border: 1px solid rgba(159,196,218,.13); background: linear-gradient(140deg, #192832, #080c0f); position: relative; }
.vera-mini-thumb::before { content: ""; position: absolute; left: 21px; top: 8px; width: 12px; height: 13px; border: 1px solid rgba(159,196,218,.37); border-radius: 50% 50% 42% 42%; }
.vera-mini-file > span:last-child { display: grid; gap: 3px; }
.vera-mini-file b { font-size: 10.5px; color: #d7e9f4; }
.vera-mini-file small { font: 8px/1.2 var(--f-mono); color: #617783; }
.vera-mini-question { margin: 2px 0 9px 18%; padding: 10px 12px; border: 1px solid rgba(159,196,218,.14); border-radius: 11px 11px 3px 11px; background: rgba(89,139,168,.08); color: #b7cfdd; font-size: 11px; }
.vera-mini-answer { align-items: flex-start; gap: 10px; padding: 12px; border: 1px solid rgba(159,196,218,.16); border-radius: 3px 12px 12px 12px; background: rgba(255,255,255,.018); }
.vera-mini-answer > span { flex: none; width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid rgba(159,196,218,.28); border-radius: 8px; color: #bfe0f1; font-weight: 700; font-size: 11px; }
.vera-mini-answer p { color: #8fa5b1; font-size: 10.5px; line-height: 1.55; }
.vera-mini-answer b { color: #d7e9f4; }
.vera-mini-foot { justify-content: space-between; padding: 11px 2px 0; font: 500 7.5px/1 var(--f-mono); color: #607783; }

/* Pricing polish: clearer platform grouping and calmer interaction. */
.plans { gap: 16px; }
.plan { min-width: 0; box-shadow: 0 24px 55px -44px #000; }
.plan--web { border-color: rgba(118,177,209,.16); background: linear-gradient(170deg, #0c1114, #07090a); }
.plan--web .plan-name,
.plan--web .plan-chip { color: #9fc4da; }
.plan--web .plan-feats li::before { background: #9fc4da; }
.plan:hover { transform: translateY(-3px); }

@media (max-width: 1050px) {
  .hero-in { grid-template-columns: minmax(0, 1fr) minmax(330px, .72fr); gap: 60px; }
  .chip--s { left: 0; }
  .platform-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card, .platform-card.appstore, .platform-card.webapp { min-height: 66px; }
  .dd-panel,
  .vera-teaser { grid-template-columns: 1fr; }
  .dd-visual,
  .vera-teaser-workspace { width: min(680px, 100%); margin-inline: auto; }
}

@media (max-width: 860px) {
  .hero-in { grid-template-columns: 1fr; gap: 64px; }
  .platform-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stage { min-height: 520px; align-items: center; }
  .dd-panel { grid-template-columns: 1fr; }
  .dd-visual { order: -1; }
  .screen-dialog figure { grid-template-columns: 1fr; justify-items: center; }
  .screen-dialog figcaption { display: none; }
}

@media (max-width: 620px) {
  .grain { display: none; }
  .platform-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .platform-card,
  .platform-card.appstore,
  .platform-card.webapp { min-height: 62px; padding: 10px; grid-template-columns: 31px minmax(0, 1fr) 12px; gap: 8px; }
  .platform-icon { width: 31px; height: 31px; }
  .platform-copy strong { font-size: 13px; }
  .platform-card--android,
  .platform-card--android.androidsoon { min-height: 62px; padding: 10px; grid-template-columns: 31px minmax(0, 1fr) auto; gap: 8px; }
  .platform-icon--android { width: 31px; height: 31px; }
  .platform-icon--android .android-mark,
  .platform-card .platform-icon--android .android-mark { width: 24px; }
  .platform-status { padding-inline: 5px; font-size: 7px; }
  .hero-stage { min-height: 430px; }
  .hero-ufo { top: 15%; width: clamp(160px, 58vw, 220px); }
  .hero-ufo .ufo-beam { display: none; }
  .screen-trigger:hover { transform: none; }
  .screen-dialog { width: calc(100% - 20px); max-height: calc(100svh - 20px); }
  .screen-dialog figure { padding: 14px; }
  .screen-dialog figure img { max-height: calc(100svh - 100px); border-radius: 25px; }
  .dd-visual { padding: 10px; }
  .dd-scan-stage { min-height: 240px; }
  .dd-evidence { grid-template-columns: 1fr; }
  .dd-evidence > span { grid-template-columns: 7px 1fr auto; }
  .dd-evidence i { grid-row: auto; }
  .vera-teaser { padding: 28px 20px; }
  .vera-mini-foot { gap: 10px; align-items: flex-start; }
}

/* Narrow phones (≤360px CSS — very common): keep the tidy 2×2 grid and make
   the cards more compact instead of collapsing into four stacked slabs. */
@media (max-width: 360px) {
  .platform-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .platform-card,
  .platform-card.appstore,
  .platform-card.webapp { min-height: 56px; padding: 9px 10px; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .platform-card--android,
  .platform-card--android.androidsoon { min-height: 56px; padding: 9px 10px; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .platform-go { display: none; }
  .platform-icon, .platform-icon--android { width: 28px; height: 28px; border-radius: 8px; }
  .platform-card .platform-icon svg,
  .platform-card.appstore .platform-icon svg { width: 16px; height: 17px; }
  .platform-icon--android .android-mark,
  .platform-card .platform-icon--android .android-mark { width: 21px; }
  .platform-copy strong { font-size: 12px; }
  .platform-status { padding: 3px 5px; font-size: 6.5px; }
}

@media (hover: none) {
  .platform-card:hover,
  .screen-trigger:hover,
  .plan:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ufo { opacity: .12; transform: translate3d(-50%, 7vh, 0) scale(.82); }
  .hero-ufo.is-flying,
  .hero-ufo.is-flying .ufo-beam,
  .dd-visual.is-active .dd-scanline { animation: none; }
  .ufo-beam { display: none; }
  html.js [data-rv] { transition: none; }
}