/* MOBILE PASS v7 — pixel scroll budgets; all mobile numbers live in "MOBILE TUNING PANEL" below */
/* ============================================================
   SortedSam — v10 "Master" · recycled from v1–v9 per review
   v1 dots · v4/v5 type (Geist) · v5 sections · v8 engine/chrome
   ============================================================ */

/* Self-hosted (not loaded from Google's CDN, to avoid sending visitor IPs to Google on every page load) */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("assets/fonts/geist-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html { scroll-behavior: auto; overflow-anchor: none; }
html, body {
  margin: 0; padding: 0; max-width: 100%; background: #0A0A0A;
  overflow-x: hidden;
  overflow-x: clip;
}
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  font-family: 'Geist', 'Helvetica Neue', sans-serif;
  color: #F8F9FA;
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

a { color: #F0C808; text-decoration: none; }
a:hover { color: #D9B507; }
::selection { background: #F0C808; color: #000000; }

.mono { font-family: 'Geist Mono', monospace; }
.gold { color: #F0C808; font-style: normal; }
.dim { color: #808285; }

/* ---------- background layers: particles (v8/v9) + dots (v1) ---------- */
#fx {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none;
}
.grain {
  position: fixed; inset: -50%; width: 200%; height: 200%;
  z-index: 95; pointer-events: none; opacity: 0.05;
  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='240' height='240' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
  animation: grainShift 0.9s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0, 0); }
  25% { transform: translate(-2%, 1.4%); }
  50% { transform: translate(1.6%, -1%); }
  75% { transform: translate(-1%, -2%); }
  100% { transform: translate(0, 0); }
}

/* ---------- custom cursor (v8) ---------- */
.cursor-dot, .cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 99; pointer-events: none;
  border-radius: 999px; will-change: transform;
}
.cursor-dot { width: 6px; height: 6px; background: #F0C808; margin: -3px 0 0 -3px; }
.cursor-ring {
  width: 42px; height: 42px; margin: -21px 0 0 -21px;
  border: 1px solid rgba(240, 200, 8, 0.55);
  box-shadow: 0 0 24px rgba(240, 200, 8, 0.18), inset 0 0 14px rgba(240, 200, 8, 0.07);
  transition: width 0.25s ease, height 0.25s ease, margin 0.25s ease, opacity 0.25s ease;
}
.cursor-ring.is-hover {
  width: 68px; height: 68px; margin: -34px 0 0 -34px;
  border-color: rgba(240, 200, 8, 0.9);
}
@media (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none; }
}
@media (pointer: fine) {
  body { cursor: none; }
  a, button { cursor: none; }
}

/* ---------- nav + progress (v8) ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 90;
  transition: background 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
  background: rgba(10, 10, 10, 0); border-bottom: 1px solid rgba(51, 51, 51, 0);
}
.nav-inner {
  max-width: 1320px; margin: 0 auto; padding: 0 32px; height: 68px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.nav-brand { display: flex; align-items: center; gap: 11px; color: #F8F9FA; }
.nav-brand img { width: 30px; height: 30px; border-radius: 8px; display: block; }
.nav-brand span { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 28px; font-size: 14px; font-weight: 500; }
.nav-links a { color: #B9C0C7; transition: color 0.2s; }
.nav-links a:hover { color: #F8F9FA; }
.nav-cta {
  background: #F0C808; color: #000000 !important; font-weight: 700;
  padding: 9px 18px; border-radius: 999px; display: inline-block;
}
.nav-cta:hover { background: #D9B507; }
.progress-track { height: 2px; background: rgba(30, 30, 30, 0.8); }
.progress-bar { height: 2px; width: 0%; background: #F0C808; box-shadow: 0 0 12px rgba(240, 200, 8, 0.7); }

/* ---------- side section dots (v8, clickable) ---------- */
.side-dots {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 89; display: flex; flex-direction: column; gap: 12px;
}
.side-dots button {
  width: 9px; height: 9px; border-radius: 999px; background: #333333;
  border: none; padding: 0; cursor: none; transition: background 0.3s, transform 0.3s;
}
.side-dots button:hover { background: #808285; }
.side-dots button.on { background: #F0C808; transform: scale(1.45); }
@media (pointer: coarse) { .side-dots button { cursor: pointer; } }

/* ---------- shared layout ---------- */
.wrap { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
.eyebrow {
  font-family: 'Geist Mono', monospace; font-size: 12px;
  letter-spacing: 0.22em; color: #F0C808;
}
.pin { position: relative; z-index: 0; }
.pin-view {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: clip;
}
h2 { margin: 16px 0 0 0; font-size: clamp(36px, 4.4vw, 66px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.02; }
.feat-p { margin: 24px 0 0 0; font-size: 18px; line-height: 1.6; color: #B9C0C7; max-width: 560px; }

/* ---------- phone frames ---------- */
.phone {
  position: relative; width: 300px; background: #121212;
  border: 1px solid #333333; border-radius: 44px; padding: 11px;
  transform-style: preserve-3d; will-change: transform;
}
.phone img { display: block; width: 100%; border-radius: 34px; }
.phone-shine {
  position: absolute; inset: 11px; border-radius: 34px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(248, 249, 250, 0.14) 46%, rgba(248, 249, 250, 0.02) 54%, transparent 70%);
  background-size: 260% 100%; background-position: 120% 0;
  will-change: background-position;
}

/* ---------- hero (v5 layout) ---------- */
.hero-view { display: flex; align-items: center; justify-content: center; }
.hero-grid {
  position: relative; z-index: 2; max-width: 1280px; width: 100%;
  padding: 110px 32px 60px 32px;
  display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 40px;
}
.hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.18em;
  color: #808285; border: 1px solid #333333; border-radius: 999px;
  padding: 8px 16px; margin-bottom: 34px;
}
.hero-badge i {
  width: 7px; height: 7px; border-radius: 999px; background: #25D366;
  display: inline-block; animation: dotPulse 2.4s ease-in-out infinite;
}
@keyframes dotPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.hero-h1 {
  margin: 0; font-size: clamp(54px, 7.4vw, 118px); line-height: 0.98;
  letter-spacing: -0.045em; font-weight: 900; perspective: 900px;
}
.hero-h1 .hl { display: block; white-space: nowrap; }
.hero-h1 .w { display: inline-block; white-space: nowrap; }
.hero-h1 .ch { display: inline-block; will-change: transform, opacity, filter; }
.hero-h1 .accent { color: #F0C808; }
.hero-sub {
  margin: 34px 0 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.55;
  color: #B9C0C7; max-width: 520px;
}
.hero-ctas { display: flex; align-items: center; gap: 16px; margin-top: 38px; flex-wrap: wrap; }
.btn-solid {
  background: #F0C808; color: #000000 !important; font-weight: 700; font-size: 16px;
  padding: 15px 30px; border-radius: 999px; display: inline-block; will-change: transform;
}
.btn-solid:hover { background: #D9B507; }
.btn-ghost {
  color: #F8F9FA !important; font-weight: 600; font-size: 16px; padding: 15px 24px;
  border-radius: 999px; border: 1px solid #333333; display: inline-block; will-change: transform;
}
.btn-ghost:hover { border-color: #F0C808; color: #F0C808 !important; }
.hero-note { margin: 22px 0 0 0; font-size: 12.5px; color: #808285; }
.hero-phone-col { position: relative; display: flex; justify-content: center; perspective: 1400px; }
.hero-phone { width: min(480px, 40vh); animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50% { transform: translateY(-16px) rotate(-3deg); }
}
.hero-hint {
  position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  font-size: 11px; letter-spacing: 0.22em; color: #808285;
}
.hero-hint i {
  display: block;
  width: 9px; height: 32px;
  background: linear-gradient(#808285, rgba(128, 130, 133, 0.3));
  clip-path: polygon(4px 0, 5px 0, 5px 24px, 9px 24px, 4.5px 32px, 0 24px, 4px 24px);
  animation: bob 1.8s ease-in-out infinite;
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }

/* ---------- manifesto (v5) ---------- */
.manifesto-view { display: flex; align-items: center; justify-content: center; }
.phrase {
  position: absolute; inset: 0; margin: 0; padding: 0 32px;
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: clamp(44px, 6.5vw, 96px); font-weight: 900; letter-spacing: -0.04em;
  color: #F8F9FA; opacity: 0; will-change: transform, opacity;
}
.phrase em { font-style: normal; }
.phrase.big { font-size: clamp(48px, 7vw, 108px); line-height: 1.05; }

/* ---------- feature grids (search / shared) ---------- */
.feat-grid, .shared-grid, .labels-grid {
  max-width: 1280px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: center; gap: 48px;
}
.feat-grid { height: 100%; }
.feat-phone-col { display: flex; justify-content: center; perspective: 1400px; }
.feat-phone { width: 210px; transition: transform 0.15s linear; }

/* 01 instant search — v7 spotlight, split layout */
.spot-wrap {
  height: 100%; max-width: 1320px; margin: 0 auto; padding: 96px 32px 0 32px;
  display: grid; grid-template-columns: 0.85fr 1.15fr; align-items: center; gap: 56px;
}
.spot-bar { margin: 0 0 18px; max-width: none; width: 100%; }
.spot-hint { display: none; align-items: center; gap: 6px; margin: 14px 0 0; font-size: 12px; letter-spacing: 0.04em; color: #808285; }
.spot-hint-arrow { display: inline-block; animation: bob 1.8s ease-in-out infinite; }
.spot-stage { position: relative; }
.spot-light {
  position: absolute; width: 640px; height: 640px; margin: -320px 0 0 -320px;
  left: 50%; top: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 200, 8, 0.13), rgba(240, 200, 8, 0.04) 45%, transparent 70%);
}
.spot-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.spot-card {
  position: relative; border: 1px solid #333333; border-radius: 14px;
  background: #121212; padding: 18px; opacity: 0.22;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.spot-card p { margin: 0; font-weight: 700; font-size: 15px; }
.spot-card small { display: block; margin-top: 5px; font-size: 10.5px; color: #808285; letter-spacing: 0.04em; }
.spot-badge {
  position: absolute; top: -14px; right: -10px; background: #F0C808; color: #000000;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.1em;
  border-radius: 999px; padding: 6px 12px; opacity: 0; transition: opacity 0.3s;
}
.search-bar {
  display: flex; align-items: center; gap: 12px; background: #1E1E1E;
  border: 1px solid #333333; border-radius: 999px; padding: 12px 18px; font-size: 15px;
}
.search-bar .status { margin-left: auto; color: #808285; font-size: 11px; letter-spacing: 0.1em; }
.caret {
  display: inline-block; width: 8px; height: 18px; background: #F0C808;
  animation: caretBlink 0.9s steps(1) infinite;
}
.caret.small { width: 6px; height: 13px; }
@keyframes caretBlink { 50% { opacity: 0; } }

/* ---------- temp option banners ---------- */
.temp-banner {
  position: relative; z-index: 2; margin: 0 auto; max-width: 900px;
  border: 2px dashed #F0C808; border-radius: 14px; background: rgba(240, 200, 8, 0.07);
  color: #F0C808; font-size: 12.5px; letter-spacing: 0.08em; line-height: 1.6;
  padding: 14px 22px; text-align: center;
  margin-top: 40px; margin-bottom: 40px;
}

/* ---------- structure sections ---------- */
.struct-grid {
  position: absolute; inset: 0; max-width: 1360px; margin: 0 auto; padding: 0 32px;
  display: grid; grid-template-columns: 1fr 320px; align-items: center; gap: 48px;
}
.struct-right { display: flex; flex-direction: column; }
.struct-right .struct-title { font-size: clamp(22px, 1.9vw, 30px); margin: 10px 0 26px 0; white-space: nowrap; }
.struct-caption {
  position: absolute; bottom: 44px; left: 0; right: 0; margin: 0;
  text-align: center; font-size: 16px; color: #808285;
}

/* option A: zoom cards (v5) */
.zoom-stage { position: relative; height: 78vh; }
.zoom-stage::before {
  content: ''; position: absolute; inset: -12% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 58% 58% at 50% 50%, rgba(240, 200, 8, 0.08), transparent 72%);
}
.zoom-layer {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  opacity: 0; will-change: transform, opacity;
}
.zoom-card {
  position: relative; width: min(60vw, 740px); border: 2px solid #333333;
  border-radius: 32px; background: linear-gradient(165deg, #171717, #101010);
  padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: clamp(16px, 2vw, 26px);
  box-shadow: 0 34px 80px -30px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.zc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.zc-top-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.zc-title { font-size: clamp(24px, 2.7vw, 38px); font-weight: 800; letter-spacing: -0.03em; }
.zc-title small { font-size: 14px; font-weight: 500; color: #808285; }
.zc-meta { font-size: 13px; color: #808285; flex-shrink: 0; }
.zc-qr {
  width: clamp(30px, 2.6vw, 38px); height: clamp(30px, 2.6vw, 38px); flex-shrink: 0;
  display: block; border: 1px solid #333333; border-radius: 8px; padding: 4px; background: #1A1A1A;
}
.zc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(10px, 1.3vw, 16px); }
.zc-cell {
  border: 1px solid #333333; border-radius: 14px; padding: clamp(14px, 1.6vw, 20px) clamp(16px, 1.8vw, 22px);
  color: #B9C0C7; font-weight: 600; background: #1E1E1E; font-size: clamp(15px, 1.3vw, 17px);
  display: flex; align-items: center; min-height: clamp(56px, 6vw, 76px);
  transition: border-color 0.3s, color 0.3s;
}
.zc-cell.hot { border-color: #F0C808; color: #F8F9FA; }
.zc-cell.empty { background: transparent; border-style: dashed; border-color: #262626; }
.zoom-found { text-align: center; max-width: 720px; padding: 0 24px; }
.zoom-found h3 { margin: 24px 0 0 0; font-size: clamp(40px, 4.6vw, 80px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.02; }
.zoom-found p { margin: 20px 0 0 0; font-size: clamp(12px, 1.2vw, 16px); color: #B9C0C7; }
.found-pill {
  display: inline-flex; align-items: center; gap: 9px; font-size: 12px; letter-spacing: 0.18em;
  color: #25D366; border: 1px solid rgba(37, 211, 102, 0.35); background: rgba(15, 47, 32, 0.6);
  border-radius: 999px; padding: 8px 16px;
}
.found-pill i { width: 7px; height: 7px; border-radius: 999px; background: #25D366; display: inline-block; }

/* step list (v6 overview: done dark, current lit, upcoming greyed) */
.step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.step-list li {
  display: flex; align-items: center; gap: 14px;
  border: 1px solid #1E1E1E; border-radius: 14px; padding: 13px 16px;
  background: rgba(18, 18, 18, 0.6); transition: all 0.35s ease;
  opacity: 0.45;
}
.step-list .sl-num {
  width: 28px; height: 28px; border-radius: 999px; border: 1px solid #333333;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #808285; flex-shrink: 0; transition: all 0.35s ease;
}
.step-list b { display: block; font-size: 15px; font-weight: 700; }
.step-list small { display: block; font-size: 12px; color: #808285; margin-top: 1px; }
.step-list li.done { opacity: 0.8; }
.step-list li.done .sl-num { background: #1E1E1E; color: #B9C0C7; }
.step-list li.act {
  opacity: 1; border-color: #F0C808; background: #17150A;
}
.step-list li.act .sl-num { background: #F0C808; border-color: #F0C808; color: #000000; font-weight: 600; }

/* option B removed — option A chosen */

/* ---------- QR labels (v5 + v2 scan framing) ---------- */
.labels {
  position: relative; padding: 160px 0; border-top: 1px solid #1E1E1E; border-bottom: 1px solid #1E1E1E;
  background: #0A0A0A; overflow: clip; z-index: 2; isolation: isolate;
}
.labels .labels-grid {
  grid-template-columns: 460px 1fr;
  grid-template-areas: "qr text" "qr minis";
  align-items: start;
}
.label-stage { grid-area: qr; display: flex; justify-content: center; }
.label-copy { grid-area: text; }
.labels .mini-cards { grid-area: minis; }
.scan-frame { position: relative; padding: 26px; }
.scan-frame i {
  position: absolute; width: 34px; height: 34px; border: 3px solid #F0C808; opacity: 0.9;
}
.scan-frame .c1 { top: 0; left: 0; border-right: none; border-bottom: none; border-radius: 10px 0 0 0; }
.scan-frame .c2 { top: 0; right: 0; border-left: none; border-bottom: none; border-radius: 0 10px 0 0; }
.scan-frame .c3 { bottom: 0; left: 0; border-right: none; border-top: none; border-radius: 0 0 0 10px; }
.scan-frame .c4 { bottom: 0; right: 0; border-left: none; border-top: none; border-radius: 0 0 10px 0; }
.label-card {
  position: relative; background: #F8F9FA; border-radius: 20px; padding: 30px; width: 320px;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.5); overflow: hidden;
}
.qr-big { width: 82%; aspect-ratio: 1; display: block; margin: 0 auto; }
.label-meta { margin: 0 0 20px 0; display: flex; align-items: center; justify-content: space-between; }
.label-meta .lname { margin: 0; color: #111315; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.label-meta .lloc { margin: 3px 0 0 0; color: #63666A; font-size: 10px; }
.label-meta img { width: 34px; height: 34px; border-radius: 8px; }
.qr-wrap { position: relative; }
.scan-line {
  position: absolute; left: 0; width: 100%; height: 3px; top: 0;
  background: #F0C808;
  box-shadow: 0 0 24px 4px rgba(240, 200, 8, 0.55);
  animation: scanMove 2.4s ease-in-out infinite alternate;
}
@keyframes scanMove {
  0% { top: 0%; }
  100% { top: calc(100% - 3px); }
}
.mini-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 36px; max-width: 560px; }
.mini-card { border: 1px solid #333333; border-radius: 16px; padding: 20px; background: #121212; }
.mini-card p { margin: 0; font-size: 14px; line-height: 1.5; color: #808285; }
.mini-card p:first-child { margin-bottom: 7px; font-size: 16px; color: #F8F9FA; }

/* ---------- shared home ---------- */
.shared { position: relative; padding: 160px 0; background: #0A0A0A; z-index: 1; }
.avatar-row { display: flex; align-items: center; gap: 14px; margin-top: 30px; }
.avatars { display: flex; }
.avatars span {
  width: 44px; height: 44px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; border: 2px solid #0A0A0A;
}
.avatars span + span { margin-left: -12px; }
.avatars .more { background: #252525; color: #B9C0C7; font-weight: 700; font-size: 13px; }
.avatar-note { font-size: 14px; color: #808285; }

/* ---------- trust ---------- */
.trust { position: relative; padding: 60px 0 160px 0; background: #0A0A0A; z-index: 1; }
.trust-head { text-align: center; margin-bottom: 56px; }
.trust-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.trust-card { border: 1px solid #1E1E1E; border-radius: 20px; padding: 30px; background: #121212; }
.ticon {
  display: inline-flex; width: 42px; height: 42px; border-radius: 12px;
  align-items: center; justify-content: center; font-size: 19px;
}
.trust-card p { margin: 8px 0 0 0; font-size: 14.5px; line-height: 1.6; color: #808285; }
.trust-card p:nth-child(2) { margin-top: 18px; font-size: 17px; color: #F8F9FA; }
.trust-note { text-align: center; margin: 40px 0 0 0; font-size: 12px; letter-spacing: 0.18em; color: #808285; }

/* ---------- gallery marquee (v2) ---------- */
.gallery { position: relative; padding: 110px 0 130px 0; border-top: 1px solid #1E1E1E; background: rgba(13, 13, 13, 0.6); overflow: hidden; z-index: 1; }
.gallery-head { text-align: center; max-width: 720px; margin: 0 auto 60px; padding: 0 24px; }
.gallery-head p { font-size: 17px; color: #B9C0C7; margin: 16px 0 0 0; }
.marquee-track {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee { display: flex; width: max-content; gap: 28px; padding: 0 14px; will-change: transform; }
.mini-phone {
  width: 230px; flex-shrink: 0; background: #121212; border: 1px solid #333333;
  border-radius: 34px; padding: 9px 9px 14px 9px; text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.mini-phone img { width: 100%; border-radius: 26px; display: block; }
.mini-phone small { display: block; margin-top: 11px; font-size: 10px; letter-spacing: 0.2em; color: #808285; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
  .marquee { animation: marqueeScroll 44s linear infinite; }
}
.marquee:hover { animation-play-state: paused; }
/* pagination dots for the mobile swipe carousel (built by script.js) */
.gallery-dots { display: none; justify-content: center; gap: 10px; margin-top: 26px; }
.gallery-dots button {
  width: 9px; height: 9px; border-radius: 999px; background: #333333;
  border: none; padding: 0; cursor: pointer; transition: background 0.3s, transform 0.3s;
}
.gallery-dots button.on { background: #F0C808; transform: scale(1.4); }
@media (max-width: 480px) { .gallery-dots { display: flex; } }

/* ---------- stats + pricing (v5) ---------- */
.pricing { position: relative; padding: 130px 0 160px 0; background: #0A0A0A; z-index: 1; }
.stats-grid {
  max-width: 1100px; margin: 0 auto 140px auto;
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; text-align: center;
}
.stat { margin: 0; font-size: clamp(56px, 6vw, 92px); font-weight: 900; letter-spacing: -0.04em; }
.stat-label { margin: 8px 0 0 0; font-size: 13px; letter-spacing: 0.16em; color: #808285; }
.pricing-head { text-align: center; margin-bottom: 56px; }
.bill-toggle {
  display: inline-flex; margin-top: 30px; border: 1px solid #333333;
  border-radius: 999px; padding: 4px; gap: 4px;
}
.bill-toggle button {
  border: none; cursor: none; font-family: 'Geist', sans-serif; font-weight: 600;
  font-size: 14px; padding: 9px 22px; border-radius: 999px;
  background: transparent; color: #B9C0C7; transition: background 0.25s, color 0.25s;
}
.bill-toggle button.on { background: #F0C808; color: #000000; }
.bill-toggle .save { opacity: 0.75; font-weight: 500; }
@media (pointer: coarse) { .bill-toggle button { cursor: pointer; } }
.plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.plan-card {
  position: relative; border: 1px solid #333333; border-radius: 20px;
  background: #121212; padding: 30px; display: flex; flex-direction: column;
}
.plan-card .tier { font-size: 12px; letter-spacing: 0.18em; color: #808285; }
.plan-card .tier.gold { color: #F0C808; }
.pprice { margin: 18px 0 0 0; font-size: 44px; font-weight: 900; letter-spacing: -0.03em; }
.pprice small { font-size: 17px; font-weight: 500; color: #808285; }
.pdesc { margin: 4px 0 0 0; font-size: 14px; color: #808285; }
.prule { margin: 24px 0; height: 1px; background: #333333; }
.pfeat { margin: 0; font-size: 15px; color: #B9C0C7; line-height: 1.9; }
.pbtn { margin-top: auto; display: block; text-align: center; border-radius: 999px; padding: 12px; font-weight: 600; font-size: 15px; }
.pbtn.ghost { border: 1px solid #333333; color: #F8F9FA !important; margin-top: 28px; }
.pbtn.ghost:hover { border-color: #F0C808; color: #F0C808 !important; }
.pbtn.solid { background: #F0C808; color: #000000 !important; font-weight: 700; padding: 13px; margin-top: 28px; }
.pbtn.solid:hover { background: #D9B507; }
.plan-card.popular {
  border-color: #F0C808;
}
.plan-card.popular .prule { background: rgba(240, 200, 8, 0.25); }
.pop-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: #F0C808; color: #000000; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.1em; border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
.pricing-note { text-align: center; margin: 34px 0 0 0; font-size: 13.5px; color: #808285; }

/* ---------- final CTA + footer ---------- */
.cta {
  position: relative; padding: 190px 32px 90px 32px; border-top: 1px solid #1E1E1E;
  background: #121212; overflow: clip; text-align: center; z-index: 1;
}
.cta-glow {
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px; pointer-events: none;
  background: radial-gradient(closest-side, rgba(240, 200, 8, 0.1), transparent 70%);
}
.cta h2 {
  position: relative; margin: 0; font-size: clamp(48px, 7.5vw, 118px);
  font-weight: 900; letter-spacing: -0.045em; line-height: 1;
}
.cta h2 .ch { display: inline-block; will-change: transform, opacity, filter; }
.cta h2 .accent { color: #F0C808; }
.cta-actions { position: relative; display: flex; justify-content: center; gap: 16px; margin-top: 44px; flex-wrap: wrap; }
.cta-sub { position: relative; margin: 20px 0 0 0; font-size: 12.5px; color: #808285; }
.footer {
  position: relative; max-width: 1320px; margin: 130px auto 0 auto;
  border-top: 1px solid #333333; padding-top: 36px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
}
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-brand img { width: 26px; height: 26px; border-radius: 7px; }
.footer-brand b { font-weight: 700; font-size: 15px; }
.footer-brand span { color: #808285; font-size: 13px; }
.footer-links { display: flex; align-items: center; gap: 26px; font-size: 13.5px; }
.footer-links a { color: #808285; }
.footer-links a:hover { color: #F0C808; }

/* ---------- reveal defaults ---------- */
[data-reveal] { opacity: 0; transform: translateY(44px); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav-links a:not(.nav-cta) { display: none; }
  .side-dots { right: max(10px, env(safe-area-inset-right)); gap: 10px; }
  .hero-view { align-items: flex-start; }
  /* ══════════════════════════════════════════════════════════════
     MOBILE TUNING PANEL — every number worth touching lives here.
     Nothing below this block needs editing to move things around.

     HOW THE PINNED SECTIONS WORK NOW
     Each scroll-animated section (hero, manifesto, 01 search, 02
     structure) has one "screen" that stays put while you scroll past
     it. That screen follows the currently visible browser area, while
     the outer section uses the stable largest viewport as its base.
     The manifesto stays centred; the 01 and 02 headings stay at the
     visible top edge.
     ══════════════════════════════════════════════════════════════ */
  :root {
    /* ---------- 1. HEIGHT OF A PINNED SCREEN ----------
       Follow the part of the screen that is actually visible. The outer
       section keeps a stable 100lvh base, so browser-bar changes do not move
       the animation timeline itself. */
    --pin-height: 100dvh;

    /* ---------- 2. SPACE BETWEEN SECTIONS ---------- */
    --gap-sections: 152px;      /* same gap everywhere */
    --gap-before-manifesto: 48px;
    --gap-before-cta: 100px;    /* deliberately bigger, above "Stop searching." */

    /* ---------- 3. ANIMATION BUDGETS, IN PIXELS OF SCROLLING ----------
       Read once at page load by script.js. Every animation is now
       measured in real scrolled pixels, so it behaves identically on
       every load, on every device, in both directions. The section's
       scroll length is COMPUTED from these numbers — you never set a
       section height by hand again.

       Manifesto, per term:  fade-in -> hold -> fade-out.
       One term therefore costs (fade-in + hold + fade-out) px. */
    --px-hero-fade: 620px;        /* headline disintegration */

    --px-lead-in: 80px;           /* short pause before term 1 */
    --px-term-fade-in: 90px;
    --px-term-hold: 320px;
    --px-term-fade-out: 110px;
    --px-manifesto-tail: 260px;   /* how long the last line holds */

    --px-search-lead: 220px;      /* blank before the search demo starts */
    --px-search-run: 1500px;      /* the demo itself */
    --px-search-tail: 320px;      /* holds on the result */

    --px-structure-lead: 220px;
    --px-structure-step: 430px;   /* per zoom level (5 of them) */
    --px-structure-tail: 320px;

    /* ---------- 4. §02 STRUCTURE CARD SIZE ----------
       Affects how balanced that section looks vertically. */
    --structure-card-height: min(34dvh, 280px);
  }

  /* --- wiring (leave alone) --- */
  .pin-view {
    position: sticky;
    top: 0;
    height: var(--pin-height, 100dvh);
    transform: none;
    will-change: auto;
  }
  [data-pin="hero"] .pin-view {
    transform: none;
  }
  [data-pin="manifesto"] .pin-view {
    contain: paint;
    transform: none;
  }
  [data-pin="search"] .pin-view,
  [data-pin="zoomA"] .pin-view { transform: none; }
  .zoom-stage { height: var(--structure-card-height); }
  /* the top bar is gone on phones, so no section needs to clear it */
  .nav { display: none; }
  .hero-grid { padding-top: 28px; padding-bottom: 28px; }
  .spot-wrap { position: relative; padding-top: 0; }
  .struct-right { padding-top: 0; }
  .struct-grid { padding-bottom: 0; }
  [data-pin="search"] .section-heading,
  [data-pin="zoomA"] .section-heading {
    position: absolute;
    top: max(18px, env(safe-area-inset-top));
    left: 32px;
    right: 32px;
    z-index: 4;
  }
  [data-pin="search"] .section-heading h2,
  [data-pin="zoomA"] .section-heading h2 {
    margin-top: 8px;
  }
  .manifesto-view { align-items: center; }
  .phrase {
    padding: 0 24px;
    line-height: 1.08;
    text-wrap: balance;
    backface-visibility: hidden;
  }
  .phrase.big { line-height: 1.06; }
  /* the hero headline disintegrates letter by letter on phones too (the mirror
     of the final CTA assembling) — transforms only, never filter:blur() */
  .hero-h1 .ch { will-change: transform, opacity; }
  .hero-phone-col { will-change: opacity; }
  /* the bar (and its progress line) are gone entirely on phones — see below */
  /* full-viewport animated grain is one of the most expensive composited layers
     while scrolling a phone; keep the texture, drop the churn */
  .grain { animation: none; opacity: 0.045; }
  .hero-grid { grid-template-columns: 1fr; text-align: center; gap: 18px; margin: auto 0; }
  .hero-badge { margin-bottom: 20px; padding: 6px 13px; font-size: 11px; }
  .hero-h1 { font-size: clamp(30px, 9vw, 78px); }
  /* allow the headline to wrap instead of clipping if text is scaled up
     (accessibility text-scaling / narrow devices); still one line each at 100% */
  .hero-h1 .hl { white-space: normal; }
  .hero-sub { margin: 20px auto 0 auto; font-size: 16px; }
  .hero-ctas { justify-content: center; margin-top: 24px; gap: 12px; }
  .btn-solid, .btn-ghost { font-size: 15px; padding: 12px 22px; }
  .hero-note { margin-top: 14px; }
  /* also cap by vh (screenshot is a tall 352x776 image) so the phone
     can't outgrow the copy above it and get clipped by .pin-view's
     overflow on short/stacked mobile layouts */
  .hero-phone-col .phone { width: min(240px, 55vw, 30vh); border-radius: 26px; padding: 7px; }
  .hero-phone-col .phone img, .phone-shine { border-radius: 20px; }
  .hero-hint { display: none; }
  .shared-grid, .labels-grid { grid-template-columns: 1fr; gap: 30px; }
  .spot-wrap { grid-template-columns: 1fr; gap: 22px; align-content: center; }
  .spot-copy h2 { font-size: clamp(28px, 7.5vw, 44px); }
  .spot-copy .feat-p { font-size: 15px; margin-top: 14px; }
  .spot-hint { display: flex; margin: 12px 0 0; }
  .spot-bar { margin: 0 0 14px; padding: 10px 16px; font-size: 14px; }
  .spot-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .spot-card { padding: 12px 14px; }
  .spot-card p { font-size: 13.5px; }
  .spot-card small { font-size: 9.5px; }
  .spot-card:nth-child(n+7) { display: none; }
  .spot-light { width: 380px; height: 380px; margin: -190px 0 0 -190px; }
  .feat-phone-col { display: none; }
  .shared .feat-phone-col { display: flex; }
  .shared .feat-phone { width: min(160px, 42vw); border-radius: 24px; padding: 6px; }
  .shared .feat-phone img { border-radius: 18px; }
  .labels .labels-grid { grid-template-columns: 1fr; grid-template-areas: "text" "qr" "minis"; }
  .label-card { width: min(300px, 78vw); }
  .struct-grid {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 10px;
    padding-top: max(104px, calc(env(safe-area-inset-top) + 86px));
  }
  .struct-right { order: -1; }
  .struct-right .struct-title { margin-bottom: 14px; white-space: normal; }
  .zoom-card { width: min(88vw, 520px); padding: 20px; }
  .struct-caption { display: none; }
  .step-list { gap: 5px; }
  .step-list li { padding: 6px 12px; }
  .mini-cards { grid-template-columns: 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: 1fr; gap: 44px; }
  .temp-banner { margin-left: 20px; margin-right: 20px; }

  /* Pricing: horizontal swipe through plan cards instead of a tall single
     column — a stacked column here left the 4 cards in an awkward, clipped
     vertical-scroll box. Base scroll-snap layout for the whole mobile/tablet
     range; the small-phone tier below trims the gutters/card size further. */
  .plan-grid {
    display: flex; grid-template-columns: none; overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    gap: 14px; padding: 28px 32px 10px 32px; margin: 0 -32px;
  }
  .plan-card { flex: 0 0 clamp(280px, 34vw, 320px); scroll-snap-align: center; }
  .plan-grid .plan-card[data-reveal] { transform: none; }
  .pricing .gallery-dots { display: flex; }

  /* ---------- ONE uniform gap between every section ----------
     Section spacing used to be a pile of one-off paddings (132/172/96/80/72…).
     Now every section carries the same top gap and no vertical padding of its
     own, so hero -> manifesto -> 01 -> 02 -> … all breathe identically. */
  #manifesto, #search, #structure-a, .labels, .shared, .trust, .gallery, .pricing {
    margin-top: var(--gap-sections);
  }
  #manifesto { margin-top: var(--gap-before-manifesto); }
  .labels, .shared, .trust, .pricing, .gallery { padding: 0; }
  /* the final CTA deliberately breaks the uniform rhythm — extra air above
     "Stop searching." so the closing line lands on its own */
  .cta {
    margin-top: 150px;
    padding: var(--gap-before-cta) 32px var(--gap-sections) 32px;
  }
  /* ---------- one continuous background ----------
     Every non-hero section was painting its own flat fill (#0A0A0A, #121212,
     rgba(13,13,13,.6)) plus divider borders, so the backdrop visibly changed
     from section to section. Drop them: the whole page now sits on the same
     drifting particle field (the flying item names stay hero-only). */
  .labels, .shared, .trust, .gallery, .pricing, .cta {
    background: transparent;
    border-top: none;
    border-bottom: none;
  }
  .stats-grid { margin-bottom: var(--gap-sections); gap: 40px; }
  .trust-head { margin-bottom: 40px; }
  .pricing-head { margin-bottom: 40px; }
  .footer { margin-top: var(--gap-sections); }

  /* comfortable touch targets */
  .nav-cta { padding: 12px 20px; }
  .bill-toggle button { padding: 12px 20px; }
  .footer-links { gap: 20px; }
  .footer-links a { padding: 6px 0; }
}

/* ---------- small phones (portrait) ---------- */
@media (max-width: 480px) {
  /* tighter gutters so content isn't squeezed by 32px of padding */
  .nav-inner { padding: 0 18px; }
  .wrap { padding: 0 20px; }
  .feat-grid, .shared-grid, .labels-grid { padding: 0 20px; }
  .hero-grid { padding-left: 20px; padding-right: 20px; }
  .spot-wrap { padding-left: 20px; padding-right: 20px; }
  .struct-grid { padding-left: 20px; padding-right: 20px; }
  [data-pin="search"] .section-heading,
  [data-pin="zoomA"] .section-heading {
    left: 20px;
    right: 20px;
  }
  .cta { padding-left: 20px; padding-right: 20px; }
  .gallery-head { padding: 0 20px; }

  /* headline: shrink so each line stays on one row without clipping */
  .hero-h1 { font-size: clamp(26px, 8.2vw, 48px); }
  .hero-sub { font-size: 15px; max-width: 420px; }
  h2 { font-size: clamp(28px, 8vw, 60px); }
  .cta h2 { font-size: clamp(30px, 9vw, 96px); }

  /* stack the hero CTAs — they overflow side by side on phones */
  .hero-ctas { flex-direction: column; align-items: center; gap: 12px; }
  .hero-ctas .btn-solid, .hero-ctas .btn-ghost { width: 100%; max-width: 360px; text-align: center; padding: 14px 20px; }

  /* instant search: brighter spotlight glow + a slightly narrower search bar */
  .spot-light { background: radial-gradient(closest-side, rgba(240, 200, 8, 0.34), rgba(240, 200, 8, 0.14) 45%, transparent 72%); }
  .spot-bar { max-width: 300px; }

  /* §3 QR labels & §4 shared home: tighter so more fits on one screen
     (vertical spacing comes from --sec-gap only — see the 980px tier) */
  .labels .labels-grid, .shared-grid { gap: 22px; }
  .scan-frame { padding: 16px; }
  .scan-frame i { width: 26px; height: 26px; border-width: 3px; }
  .label-card { width: min(230px, 64vw); padding: 20px; border-radius: 16px; }
  .label-meta { margin-bottom: 14px; }
  .label-meta .lname { font-size: 17px; }
  .mini-cards { gap: 10px; margin-top: 22px; }
  .mini-card { padding: 16px; }
  .shared .feat-phone { width: min(140px, 40vw); border-radius: 20px; padding: 5px; }
  .shared .feat-phone img { border-radius: 16px; }
  .avatar-row { margin-top: 20px; }

  /* "Inside the app": no auto-marquee on phones — manual horizontal swipe */
  .marquee-track {
    overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: none; mask-image: none; padding-bottom: 6px;
  }
  .marquee { animation: none !important; gap: 16px; padding: 0 20px; }
  .mini-phone { scroll-snap-align: center; width: 200px; }

  /* Pricing: tighter gutters + smaller cards for phone widths
     (base scroll-snap layout is set at the 980px tier above) */
  .plan-grid { padding: 28px 20px 10px 20px; margin: 0 -20px; }
  .plan-card { flex-basis: 78%; max-width: 300px; }
}

/* short viewports (landscape only — portrait phones ~718px tall must not trigger this) */
@media (max-height: 720px) and (orientation: landscape) {
  .hero-grid { padding-top: 84px; padding-bottom: 40px; gap: 14px; }
  .hero-badge { margin-bottom: 16px; }
  .hero-sub { margin-top: 16px; }
  .hero-ctas { margin-top: 20px; }
  .hero-hint { display: none; }
  .spot-wrap { padding-top: 80px; gap: 32px; }
  .spot-copy h2 { font-size: clamp(24px, 6.5vh, 44px); }
  .spot-copy .feat-p { font-size: 14px; margin-top: 12px; }
  .spot-bar { margin: 0 0 12px; padding: 9px 15px; font-size: 13px; }
  .spot-card { padding: 10px 13px; }
  .spot-card p { font-size: 13px; }
  .spot-card small { font-size: 9px; margin-top: 3px; }
}
@media (max-height: 720px) and (min-width: 981px) {
  .hero-h1 { font-size: clamp(44px, 6.2vw, 84px); }
  .hero-phone-col .phone { width: min(420px, 38vh); }
}
/* short + narrow (landscape phones): height-based sizing for pinned sections */
@media (max-height: 720px) and (max-width: 980px) and (orientation: landscape) {
  .hero-grid { padding-top: 16px; padding-bottom: 16px; gap: 10px; }
  /* no top bar on phones: drop the nav clearance the shared short-viewport
     block adds (that block also covers short desktop windows, where the bar
     still exists, so it must keep its 80px) */
  .spot-wrap { padding-top: 0; }
  .hero-h1 { font-size: clamp(30px, 7.5vh, 60px); }
  .hero-sub { font-size: 14px; margin-top: 12px; max-width: 440px; }
  .hero-note { display: none; }
  .hero-phone-col .phone { width: min(150px, 18vh); }
  .struct-right { padding-top: 0; }
  .struct-right .struct-title { font-size: clamp(20px, 5vh, 30px); margin-bottom: 10px; }
  .spot-wrap { grid-template-columns: 0.9fr 1.1fr; gap: 28px; align-content: stretch; align-items: center; }
  .spot-hint { display: none; }
  .spot-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .spot-card:nth-child(n+7) { display: block; }
  .spot-card:nth-child(n+10) { display: none; }
  .struct-grid { padding-bottom: 24px; gap: 12px; }
  .zoom-stage { height: 30vh; }
  .zoom-card { width: min(58vh, 88vw); padding: 14px; border-radius: 18px; }
  .zc-title { font-size: 17px; }
  .zc-cell { padding: 8px 11px; font-size: 12px; border-radius: 10px; min-height: 34px; }
  .zc-grid { gap: 8px; }
  .zoom-found h3 { font-size: clamp(26px, 6vh, 44px); margin-top: 12px; }
  .zoom-found p { font-size: 11px; margin-top: 10px; }
  .step-list { gap: 5px; }
  .step-list li { padding: 6px 12px; border-radius: 10px; gap: 10px; }
  .step-list .sl-num { width: 21px; height: 21px; font-size: 10px; }
  .step-list b { font-size: 13px; }
  .step-list small { display: none; }
}
@media (max-height: 600px) and (max-width: 980px) and (orientation: landscape) {
  .hero-phone-col { display: none; }
}