/* ============================================================
   PIBO MONEY — site.css v3.0  |  Dark-first cinematic redesign
   ============================================================ */

/* ── 1. FONTS ─────────────────────────────────────────────── */
@font-face { font-family:"Manrope";  src:url("/assets/fonts/Manrope-400.ttf")  format("truetype"); font-weight:400; font-display:swap; }
@font-face { font-family:"Manrope";  src:url("/assets/fonts/Manrope-500.ttf")  format("truetype"); font-weight:500; font-display:swap; }
@font-face { font-family:"Manrope";  src:url("/assets/fonts/Manrope-600.ttf")  format("truetype"); font-weight:600; font-display:swap; }
@font-face { font-family:"Manrope";  src:url("/assets/fonts/Manrope-700.ttf")  format("truetype"); font-weight:700; font-display:swap; }
@font-face { font-family:"Manrope";  src:url("/assets/fonts/Manrope-800.ttf")  format("truetype"); font-weight:800; font-display:swap; }

/* ── 2. DESIGN TOKENS ─────────────────────────────────────── */
/* ── SCROLL PROGRESS BAR ──────────────────────────────────── */
#scroll-progress {
  position:fixed;
  top:0; left:0;
  height:2px;
  background:linear-gradient(to right, var(--mint-deep), var(--mint), var(--mint-bright));
  z-index:9999;
  width:0%;
  transition:width 0.1s linear;
  box-shadow:0 0 8px rgba(77,255,210,0.6);
}

/* Register animated CSS custom properties */
@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

:root {
  --font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: var(--font-ui);

  /* Dark (default) palette */
  --bg:            #060e0c;
  --bg-1:          #091410;
  --bg-2:          #0e1e1a;
  --bg-3:          #152924;
  --surface:       rgba(14,28,24,0.72);
  --surface-solid: #0f1f1c;
  --border:        rgba(128,205,190,0.12);
  --border-mid:    rgba(128,205,190,0.20);
  --border-strong: rgba(128,205,190,0.30);

  --mint:        #80cdbe;
  --mint-bright: #4dffd2;
  --mint-deep:   #2d8b69;
  --mint-glow:   rgba(77,255,210,0.15);
  --gold:        #ffd88a;
  --gold-glow:   rgba(255,216,138,0.15);
  --rose:        #ff8ca8;

  --ink:   #e8f4f0;
  --ink-2: #a8bfba;
  --ink-3: #6b8580;
  --ink-4: #3d5550;

  --shadow-sm:  0 2px 8px  rgba(0,0,0,0.4);
  --shadow:     0 8px 32px rgba(0,0,0,0.5);
  --shadow-lg:  0 24px 80px rgba(0,0,0,0.6);
  --shadow-xl:  0 40px 120px rgba(0,0,0,0.7);
  --glow-mint:  0 0 60px rgba(77,255,210,0.12), 0 0 120px rgba(77,255,210,0.06);
  --glow-gold:  0 0 60px rgba(255,216,138,0.12);

  --radius-sm:  8px;
  --radius:     16px;
  --radius-lg:  24px;
  --radius-xl:  36px;
  --radius-2xl: 48px;

  --header-h:   68px;
  --content-w:  1200px;
  --ease:       cubic-bezier(0.22,1,0.36,1);
  --ease-back:  cubic-bezier(0.34,1.56,0.64,1);
  --dur:        280ms;
}

[data-theme="light"] {
  --bg:            #f0ebe0;
  --bg-1:          #f7f3ea;
  --bg-2:          #fdfaf4;
  --bg-3:          #ffffff;
  --surface:       rgba(255,255,255,0.72);
  --surface-solid: #ffffff;
  --border:        rgba(14,35,28,0.10);
  --border-mid:    rgba(14,35,28,0.16);
  --border-strong: rgba(14,35,28,0.24);

  --mint:        #2d8b69;
  --mint-bright: #1a6b50;
  --mint-deep:   #0e3d2b;
  --mint-glow:   rgba(45,139,105,0.12);

  --ink:   #0d1e1a;
  --ink-2: #2d4a45;
  --ink-3: #4a6660;
  --ink-4: #a8bfba;

  --shadow-sm:  0 2px 8px  rgba(0,0,0,0.06);
  --shadow:     0 8px 32px rgba(0,0,0,0.10);
  --shadow-lg:  0 24px 80px rgba(0,0,0,0.14);
  --shadow-xl:  0 40px 120px rgba(0,0,0,0.18);
  --glow-mint:  0 0 40px rgba(45,139,105,0.10);
}

/* ── 3. RESET + BASE ──────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-ui);
  line-height: 1.6;
  min-width: 320px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Grain texture overlay — purely decorative, must sit behind chrome */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-size: 256px 256px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.28;
  mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
  body::after { display: none; }
}

a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
ul,ol { list-style: none; }
button,input,textarea,select { font: inherit; }
p { line-height: 1.7; }

/* ── 4. FOCUS + INTERACTION ───────────────────────────────── */
/* Native cursor is preserved for accessibility and trust.
   Custom cursor experiments removed — they suppressed system focus,
   blocked pointer assistive features, and read as gimmickry on a
   privacy-first finance product. */

:where(a, button, [role="button"], summary, [tabindex]):focus { outline: none; }

:where(a, button, [role="button"], summary, [tabindex]):focus-visible {
  outline: 2px solid var(--mint-bright, #4dffd2);
  outline-offset: 3px;
  border-radius: 10px;
  box-shadow: 0 0 0 4px rgba(77,255,210,0.18);
}

[data-theme="light"] :where(a, button, [role="button"], summary, [tabindex]):focus-visible {
  outline-color: var(--mint-deep, #0e3d2b);
  box-shadow: 0 0 0 4px rgba(45,139,105,0.18);
}

/* Inputs and form controls — same focus contract */
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--mint-bright, #4dffd2);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(77,255,210,0.18);
}

/* ── 5. SKIP LINK ─────────────────────────────────────────── */
.skip-link {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mint);
  color: #000;
  padding: 12px 24px;
  border-radius: var(--radius);
  font-weight: 700;
  z-index: 10001;
  transition: top 0.3s;
}
.skip-link:focus { top: 16px; outline: none; }

/* ── 6. SITE HEADER ───────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  z-index: 900;
  transition: background 0.4s var(--ease), box-shadow 0.4s var(--ease), backdrop-filter 0.4s;
}

.site-header.is-scrolled {
  background: rgba(6,14,12,0.80);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 1px 0 var(--border), 0 8px 32px rgba(0,0,0,0.4);
}

[data-theme="light"] .site-header.is-scrolled {
  background: rgba(247,243,234,0.82);
}

.site-nav {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 32px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 32px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.brand-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
}

.brand-icon img { width: 100%; height: 100%; object-fit: cover; }

.brand-icon::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
  pointer-events: none;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.brand-tagline {
  font-size: 0.7rem;
  color: var(--ink-3);
  font-weight: 500;
  display: block;
  line-height: 1;
  margin-top: 2px;
}

.nav-panel {
  display: flex;
  align-items: center;
  gap: 32px;
  margin-left: auto;
  flex: 1;
  justify-content: flex-end;
  min-width: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.nav-links a {
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink-2);
  transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
  position: relative;
}

.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 4px; left: 14px; right: 14px;
  height: 1.5px;
  background: var(--mint);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--ease);
  border-radius: 2px;
}

.nav-links a:hover { color: var(--ink); }
.nav-links a:hover::after,
.nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a[aria-current="page"] { color: var(--ink); }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.lang-switch {
  display: flex;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 3px;
  gap: 2px;
}

.lang-switch a {
  padding: 4px 10px;
  border-radius: 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  transition: background 0.2s, color 0.2s;
}

.lang-switch a.is-active,
.lang-switch a:hover {
  background: var(--bg-3);
  color: var(--ink);
}

.theme-toggle {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-2);
  color: var(--ink-2);
  font-size: 0.95rem;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur), color var(--dur), border-color var(--dur), transform 0.3s var(--ease-back);
}
.theme-toggle:hover { background: var(--bg-3); color: var(--ink); transform: rotate(20deg) scale(1.1); }

/* Mobile nav toggle */
.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  border-radius: var(--radius-sm);
  color: var(--ink);
  font-size: 1.1rem;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  transition: background var(--dur);
}

/* ── 7. BUTTONS ───────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.01em;
  border: none;
  transition: transform 0.2s var(--ease-back), box-shadow 0.3s var(--ease), background 0.2s, opacity 0.2s;
  position: relative;
  overflow: hidden;
}

.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.08) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform 0.5s ease;
}

.btn:hover::after { transform: translateX(100%); }
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: translateY(0) scale(0.98); }

.btn-primary {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-bright) 100%);
  color: #0a1a15;
  box-shadow: 0 4px 24px rgba(77,255,210,0.25), 0 0 0 0 rgba(77,255,210,0.3);
}

.btn-primary:hover {
  box-shadow: 0 8px 40px rgba(77,255,210,0.35), 0 0 0 0 rgba(77,255,210,0.2);
}

.btn-ghost {
  background: var(--bg-2);
  color: var(--ink);
  border: 1px solid var(--border-mid);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  background: var(--bg-3);
  border-color: var(--border-strong);
  color: var(--ink);
}
[data-theme="light"] .btn-ghost {
  background: var(--bg-3);
  color: var(--ink);
  border-color: rgba(14,35,28,0.18);
}
[data-theme="light"] .btn-ghost:hover {
  background: #ffffff;
  border-color: rgba(14,35,28,0.28);
}

.btn-sm { padding: 9px 18px; font-size: 0.82rem; }
.btn-lg { padding: 17px 34px; font-size: 1rem; }

/* Apple App Store badge */
.appstore-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px;
  min-height: 48px;
  background: var(--ink);
  color: var(--bg);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.95rem;
  transition: transform 0.2s var(--ease-back), box-shadow 0.3s var(--ease), opacity 0.2s, border-color 0.2s;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.08);
}

[data-theme="dark"] .appstore-badge { background: var(--ink); color: var(--bg); }
[data-theme="light"] .appstore-badge { background: #000; color: #fff; }

.appstore-badge:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--shadow-lg), 0 18px 48px -16px rgba(128,205,190,0.55), inset 0 1px 0 rgba(255,255,255,0.12);
  border-color: rgba(128,205,190,0.45);
}
.appstore-badge:active { transform: scale(0.98); }
.appstore-badge:focus-visible {
  outline: 2px solid var(--mint-bright, #4dffd2);
  outline-offset: 3px;
  box-shadow: var(--shadow-lg), 0 0 0 4px rgba(77,255,210,0.18);
}

.appstore-badge-icon { display:block; flex-shrink:0; }
svg.appstore-badge-icon { width:20px; height:24px; }
.appstore-badge-text { display: flex; flex-direction: column; line-height: 1.1; }
.appstore-badge-sub { font-size: 0.65rem; font-weight: 500; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.06em; }
.appstore-badge-main { font-size: 1.05rem; font-weight: 800; }

/* ── 8. HERO ──────────────────────────────────────────────── */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero {
  min-height: 100svh;
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
}

/* Multi-layer background */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 72% 42%, rgba(77,255,210,0.09) 0%, transparent 65%),
    radial-gradient(ellipse 55% 75% at 18% 82%, rgba(45,139,105,0.10) 0%, transparent 60%),
    radial-gradient(ellipse 45% 45% at 88% 12%, rgba(255,216,138,0.06) 0%, transparent 60%),
    radial-gradient(ellipse 30% 30% at 50% 50%, rgba(77,255,210,0.03) 0%, transparent 70%);
  pointer-events: none;
}

/* Noise grain texture for depth */
.hero::after {
  content:"";
  position:absolute; inset:0;
  opacity:0.025;
  pointer-events:none;
  z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:200px 200px;
}

.hero-grid {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 40px 32px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
  position: relative;
  z-index: 2;
  width: 100%;
}

.hero-content {
  max-width: 560px;
  position: relative;
  /* subtle dark glass behind text to keep it readable over particles */
  isolation: isolate;
}
.hero-content::before {
  content: "";
  position: absolute;
  inset: -32px -40px -32px -32px;
  background: radial-gradient(ellipse 80% 80% at 30% 50%, rgba(6,14,12,0.62) 30%, transparent 100%);
  pointer-events: none;
  z-index: -1;
}

[data-theme="light"] .hero-content::before {
  background: radial-gradient(ellipse 85% 85% at 30% 50%, rgba(247,243,234,0.92) 30%, rgba(247,243,234,0) 100%);
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(77,255,210,0.08);
  border: 1px solid rgba(77,255,210,0.18);
  color: var(--mint-bright);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 50px;
  margin-bottom: 28px;
  animation: eyebrow-in 0.8s var(--ease) 0.1s both;
}

.hero-eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--mint-bright);
  border-radius: 50%;
  animation: pulse-dot 2s ease-in-out infinite;
}

.hero-h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 5.8rem);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin-bottom: 28px;
  color: var(--ink);
}

.hero-h1 .line { display: block; overflow: hidden; }
.hero-h1 .line-inner { display: block; animation: line-up 0.9s var(--ease) both; }
.hero-h1 .line:nth-child(1) .line-inner { animation-delay: 0.2s; }
.hero-h1 .line:nth-child(2) .line-inner { animation-delay: 0.35s; }
.hero-h1 .line:nth-child(3) .line-inner { animation-delay: 0.5s; }

.hero-h1 .text-gradient {
  background: linear-gradient(135deg, var(--mint) 0%, var(--mint-bright) 50%, var(--gold) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200% 200%;
  animation: gradient-shift 4s ease infinite;
  filter: drop-shadow(0 0 32px rgba(77,255,210,0.35));
}

[data-theme="light"] .hero-h1 .text-gradient,
[data-theme="light"] .text-gradient {
  background: linear-gradient(135deg, var(--mint-deep) 0%, var(--mint-bright) 55%, var(--mint-deep) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: none;
}

.hero-desc {
  font-size: 1.1rem;
  color: var(--ink-2);
  max-width: 460px;
  margin-bottom: 36px;
  line-height: 1.75;
  animation: fade-up 0.9s var(--ease) 0.6s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 52px;
  animation: fade-up 0.9s var(--ease) 0.7s both;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  animation: fade-up 0.9s var(--ease) 0.8s both;
}

.hero-proof-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--ink-3);
  background: var(--bg-2);
  border: 1px solid var(--border);
  padding: 6px 12px;
  border-radius: 50px;
}

.hero-proof-item .icon { font-size: 0.95rem; }

/* ── HERO DEVICE / PHONE ──────────────────────────────────── */
.hero-device {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fade-up 1s var(--ease) 0.3s both;
}

.hero-device-inner {
  position: relative;
}

.phone-scene {
  perspective: 1200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.phone-outer {
  animation: phone-float 7s ease-in-out infinite;
  filter: drop-shadow(0 40px 120px rgba(0,0,0,0.85)) drop-shadow(0 0 120px rgba(77,255,210,0.22));
  transition: filter 0.4s;
}

.phone-outer:hover {
  filter: drop-shadow(0 50px 140px rgba(0,0,0,0.9)) drop-shadow(0 0 160px rgba(77,255,210,0.35));
}

.phone-frame {
  width: 272px;
  height: 580px;
  background: linear-gradient(150deg, #1e302c 0%, #0d1a17 55%, #101f1c 100%);
  border-radius: 52px;
  padding: 12px;
  position: relative;
  transform: perspective(1100px) rotateY(-14deg) rotateX(4deg) rotateZ(-0.5deg);
  transform-style: preserve-3d;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 0 0 1.5px rgba(128,205,190,0.22),
    0 0 0 1px rgba(0,0,0,0.6),
    0 2px 4px rgba(0,0,0,0.5),
    0 40px 100px rgba(0,0,0,0.65);
  transition: transform 0.6s var(--ease);
}

.phone-frame:hover {
  transform: perspective(1100px) rotateY(-8deg) rotateX(2deg) rotateZ(-0.5deg);
}

/* Power button + volume buttons */
.phone-frame::before {
  content:"";
  position:absolute; right:-3px; top:130px;
  width:3px; height:56px;
  background: linear-gradient(to bottom, #1a2b28, #0d1917);
  border-radius:0 3px 3px 0;
  box-shadow: inset -1px 0 0 rgba(255,255,255,0.04);
}
.phone-frame::after {
  content:"";
  position:absolute; left:-3px; top:100px;
  width:3px; height:36px;
  background: linear-gradient(to bottom, #1a2b28, #0d1917);
  border-radius:3px 0 0 3px;
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.04);
}

.phone-volume-up,.phone-volume-dn {
  position:absolute; left:-3px; width:3px;
  background: linear-gradient(to bottom, #1a2b28, #0d1917);
  border-radius:3px 0 0 3px;
}
.phone-volume-up { top:155px; height:32px; }
.phone-volume-dn { top:200px; height:32px; }

.phone-screen {
  --phone-screen-radius:36px;
  width:100%; height:100%;
  border-radius:var(--phone-screen-radius);
  overflow:hidden;
  -webkit-clip-path:inset(0 round var(--phone-screen-radius));
  clip-path:inset(0 round var(--phone-screen-radius));
  background:#000;
  position:relative;
  isolation:isolate;
  contain:paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.phone-screen-img {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--phone-screen-radius);
  -webkit-clip-path:inset(0 round var(--phone-screen-radius));
  clip-path:inset(0 round var(--phone-screen-radius));
  opacity:1;
  z-index:1;
  transition:opacity 0.7s ease;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:opacity;
}
/* Outgoing image holds fully opaque beneath the incoming, then snaps to 0 once
   the fade-in finishes — avoids a muddy two-screen double-exposure crossfade. */
.phone-screen-img:not(.is-active) { opacity:0; transition:opacity 0s linear 0.7s; }
.phone-screen-img.is-active { opacity:1; z-index:2; }

/* Reflection on phone */
.phone-reflection {
  position:absolute; top:0; left:0; right:0;
  height:50%; border-radius:var(--phone-screen-radius) var(--phone-screen-radius) 0 0;
  background:linear-gradient(180deg,rgba(255,255,255,0.04) 0%,transparent 100%);
  pointer-events:none; z-index:4;
}

/* Floating badge pills */
.badge-pill {
  position:absolute;
  background:rgba(14,28,24,0.80);
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  border:1px solid var(--border-mid);
  border-radius:50px;
  padding:10px 16px;
  font-size:0.8rem; font-weight:600;
  color:var(--ink);
  display:flex; align-items:center; gap:8px;
  white-space:nowrap;
  box-shadow:var(--shadow), 0 0 0 1px rgba(128,205,190,0.06);
  pointer-events:none;
}

[data-theme="light"] .badge-pill { background:rgba(255,255,255,0.85); }

.badge-pill .pill-dot {
  width:8px; height:8px; border-radius:50%;
  flex-shrink:0;
}
.badge-pill .pill-dot--green { background:var(--mint-bright); box-shadow:0 0 8px var(--mint-bright); }
.badge-pill .pill-dot--gold  { background:var(--gold); box-shadow:0 0 8px var(--gold); }
.badge-pill .pill-dot--rose  { background:var(--rose); }

.badge-pill--1 { top:8%;  left:-44%;  animation:badge-float-a 4.2s ease-in-out infinite; }
.badge-pill--2 { bottom:22%; right:-40%; animation:badge-float-b 5.1s ease-in-out infinite 0.5s; }
.badge-pill--3 { top:52%;  left:-48%;  animation:badge-float-c 3.8s ease-in-out infinite 1s; }
.badge-pill--4 { top:2%;   right:-36%; animation:badge-float-a 4.8s ease-in-out infinite 0.8s; }

/* Glow ring behind phone */
.phone-glow {
  position:absolute; inset:-80px;
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(77,255,210,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(45,139,105,0.12) 0%, transparent 60%);
  animation:glow-breathe 4s ease-in-out infinite;
  pointer-events:none; z-index:0;
}

[data-theme="light"] .phone-glow {
  background:
    radial-gradient(ellipse 70% 80% at 50% 50%, rgba(45,139,105,0.16) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 50% 80%, rgba(45,139,105,0.10) 0%, transparent 60%);
}

[data-theme="light"] .phone-outer {
  filter: drop-shadow(0 30px 80px rgba(14,35,28,0.22)) drop-shadow(0 0 80px rgba(45,139,105,0.18));
}
[data-theme="light"] .phone-outer:hover {
  filter: drop-shadow(0 40px 110px rgba(14,35,28,0.28)) drop-shadow(0 0 110px rgba(45,139,105,0.26));
}
[data-theme="light"] .phone-frame {
  background: linear-gradient(150deg, #d8e3df 0%, #b8c8c2 55%, #c2d2cc 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.6),
    inset 0 0 0 1.5px rgba(45,139,105,0.30),
    0 0 0 1px rgba(14,35,28,0.18),
    0 2px 4px rgba(14,35,28,0.10),
    0 30px 80px rgba(14,35,28,0.18);
}

/* Orbit ring */
.orbit-ring {
  position:absolute; inset:-60px;
  border:1px dashed rgba(77,255,210,0.14);
  border-radius:50%; animation:spin-slow 30s linear infinite;
  pointer-events:none;
  box-shadow: inset 0 0 60px rgba(77,255,210,0.03);
}
.orbit-ring--2 { inset:-110px; animation-duration:52s; animation-direction:reverse; border-style:dotted; opacity:0.6; border-color: rgba(128,205,190,0.12); }

/* ── 9. TRUST MARQUEE ─────────────────────────────────────── */
.trust-marquee {
  background:var(--bg-2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:16px 0;
  overflow:hidden;
  position:relative;
}

.trust-marquee::before,
.trust-marquee::after {
  content:""; position:absolute; top:0; bottom:0; width:120px; z-index:2; pointer-events:none;
}
.trust-marquee::before { left:0; background:linear-gradient(to right, var(--bg-2) 0%, transparent 100%); }
.trust-marquee::after  { right:0; background:linear-gradient(to left, var(--bg-2) 0%, transparent 100%); }

.marquee-track {
  display:flex; gap:48px; align-items:center;
  animation:marquee 24s linear infinite;
  width:max-content;
}

.marquee-track:hover { animation-play-state:paused; }

.marquee-item {
  display:flex; align-items:center; gap:10px;
  font-size:0.82rem; font-weight:600;
  color:var(--ink-3); white-space:nowrap;
  flex-shrink:0;
}
.marquee-item .m-icon { font-size:1rem; }
.marquee-sep { width:4px; height:4px; background:var(--border-mid); border-radius:50%; flex-shrink:0; }

/* ── 10. SECTION SHELLS ───────────────────────────────────── */
.section {
  padding:96px 32px;
  position:relative;
}

.section--sm { padding:72px 32px; }
.section--lg { padding:140px 32px; }

.container {
  max-width:var(--content-w);
  margin:0 auto;
}

.section-head {
  max-width:720px;
  margin:0 auto 72px;
  text-align:center;
}

.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--mint);
  margin-bottom:16px;
}

.eyebrow::before,
.eyebrow::after {
  content:"";
  flex:1; height:1px; width:24px;
  background:linear-gradient(to right, transparent, var(--mint));
  min-width:20px;
}
.eyebrow::after { background:linear-gradient(to left, transparent, var(--mint)); }

.section-h2 {
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1.1;
  letter-spacing:-0.025em;
  color:var(--ink);
  margin-bottom:20px;
}

.section-h2 em { font-style:italic; color:var(--mint); }

.section-desc {
  font-size:1.05rem;
  color:var(--ink-2);
  line-height:1.75;
  max-width:600px;
  margin:0 auto;
}

/* ── Launch video showcase ─────────────────────────────────── */
.demo-video-section { overflow:hidden; }

.demo-video-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.demo-video-glow {
  position:absolute;
  width:min(560px, 94vw);
  height:min(560px, 94vw);
  border-radius:50%;
  background:radial-gradient(circle, var(--mint-glow) 0%, transparent 66%);
  pointer-events:none;
  z-index:0;
}

.demo-video-frame {
  position:relative;
  z-index:1;
  width:clamp(244px, 74vw, 316px);
  padding:12px;
  border-radius:48px;
  background:linear-gradient(150deg, #1e302c 0%, #0d1a17 55%, #101f1c 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.09),
    inset 0 0 0 1.5px rgba(128,205,190,0.22),
    0 0 0 1px rgba(0,0,0,0.6),
    0 30px 90px rgba(0,0,0,0.6),
    0 0 90px rgba(77,255,210,0.16);
  animation:phone-float 7s ease-in-out infinite;
}

.demo-video-screen {
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:34px;
  overflow:hidden;
  background:#000;
  -webkit-clip-path:inset(0 round 34px);
  clip-path:inset(0 round 34px);
}

.demo-video-el {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.demo-video-cta {
  display:flex;
  justify-content:center;
  margin-top:40px;
}

@media (prefers-reduced-motion: reduce) {
  .demo-video-frame { animation:none; }
}

/* Section dividers */
.section-divider {
  height:1px;
  background:linear-gradient(to right, transparent, var(--border-mid), transparent);
  margin:0 32px;
}

/* ── 11. FEATURES GRID ────────────────────────────────────── */
.features-section {
  background:var(--bg-1);
  position:relative;
  overflow:hidden;
}

.features-section::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 50% at 50% 100%, rgba(77,255,210,0.04) 0%, transparent 70%);
  pointer-events:none;
}

.features-section::after {
  content:"";
  position:absolute; inset:0;
  background-image:radial-gradient(circle, rgba(128,205,190,0.07) 1px, transparent 1px);
  background-size:36px 36px;
  pointer-events:none;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 80% 80% at 50% 50%, black 20%, transparent 80%);
}

.features-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.feature-card {
  position:relative;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:36px;
  overflow:hidden;
  transition:
    transform 0.4s var(--ease),
    box-shadow 0.4s var(--ease),
    border-color 0.3s;
  transform-style:preserve-3d;
  will-change:transform;
}

.feature-card::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at var(--mx,50%) var(--my,50%), rgba(77,255,210,0.08) 0%, transparent 70%);
  opacity:0;
  transition:opacity 0.4s;
  pointer-events:none;
  border-radius:inherit;
}

.feature-card:hover::before { opacity:1; }

.feature-card::after {
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1px;
  /* Gradient *border* with a fully transparent center (mask-composite), so the
     hover overlay can never paint over the card's text — the previous
     padding-box bg fill blanked the card under transform-style:preserve-3d. */
  background:linear-gradient(135deg, rgba(77,255,210,0.3), rgba(77,255,210,0), rgba(255,216,138,0.2));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:0;
  transition:opacity 0.4s;
  pointer-events:none;
}

.feature-card:hover::after { opacity:1; }
.feature-card:hover { transform:translateY(-6px); box-shadow:0 24px 80px rgba(0,0,0,0.4), var(--glow-mint); border-color:transparent; }

.feature-card--wide { grid-column:span 2; }

.feature-card-icon {
  width:56px; height:56px;
  border-radius:var(--radius);
  background:var(--bg-3);
  border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem;
  margin-bottom:24px;
  position:relative;
  transition:transform 0.3s var(--ease-back), box-shadow 0.3s;
}

.feature-card:hover .feature-card-icon {
  transform:scale(1.1) rotate(-3deg);
  box-shadow:0 8px 24px rgba(77,255,210,0.15);
}

.feature-card-icon::after {
  content:"";
  position:absolute; inset:-1px;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(77,255,210,0.25), transparent);
  opacity:0;
  transition:opacity 0.3s;
}
.feature-card:hover .feature-card-icon::after { opacity:1; }

.feature-card-title {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.2rem;
  letter-spacing:-0.02em;
  margin-bottom:10px;
  color:var(--ink);
}

.feature-card-desc { font-size:0.9rem; color:var(--ink-2); line-height:1.65; }

.feature-card-tag {
  display:inline-block;
  margin-top:16px;
  font-size:0.72rem;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--mint);
  background:rgba(77,255,210,0.08);
  border:1px solid rgba(77,255,210,0.15);
  padding:4px 10px;
  border-radius:50px;
}

/* Corner glow decoration */
.feature-card-glow {
  position:absolute; top:-40px; right:-40px;
  width:160px; height:160px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(77,255,210,0.08) 0%, transparent 70%);
  pointer-events:none;
  transition:opacity 0.4s;
  opacity:0;
}
.feature-card:hover .feature-card-glow { opacity:1; }

/* ── 12. WORKFLOW SECTION ─────────────────────────────────── */
.workflow-section {
  background:var(--bg);
  position:relative;
  overflow:hidden;
}

/* Diagonal grid lines for workflow */
.workflow-section::before {
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(128,205,190,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(128,205,190,0.04) 1px, transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events:none;
}

.workflow-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.workflow-phone {
  position:relative;
  display:flex; align-items:center; justify-content:center;
}

.workflow-phone-frame {
  width:240px; height:515px;
  background:linear-gradient(150deg, #1e302c 0%, #0d1a17 55%, #101f1c 100%);
  border-radius:44px;
  padding:10px;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.06),
    inset 0 0 0 1.5px rgba(128,205,190,0.12),
    0 40px 100px rgba(0,0,0,0.65),
    var(--glow-mint);
  position:relative;
  animation:phone-float 8s ease-in-out infinite 1s;
}

.workflow-phone-screen {
  --workflow-screen-radius:34px;
  width:100%; height:100%;
  border-radius:var(--workflow-screen-radius); overflow:hidden;
  -webkit-clip-path:inset(0 round var(--workflow-screen-radius));
  clip-path:inset(0 round var(--workflow-screen-radius));
  background:#000; position:relative;
  isolation:isolate;
  contain:paint;
  transform:translateZ(0);
  backface-visibility:hidden;
}

.workflow-shot {
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  border-radius:var(--workflow-screen-radius);
  -webkit-clip-path:inset(0 round var(--workflow-screen-radius));
  clip-path:inset(0 round var(--workflow-screen-radius));
  opacity:1;
  z-index:1;
  transition:opacity 0.6s ease;
  transform:translateZ(0);
  backface-visibility:hidden;
  will-change:opacity;
}
/* Same opaque-hold crossfade as the hero phone (see .phone-screen-img). */
.workflow-shot:not(.is-active) { opacity:0; transition:opacity 0s linear 0.6s; }
.workflow-shot.is-active { opacity:1; z-index:2; }

/* Progress bar inside phone UI */
.workflow-phone-progress {
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; z-index:5;
}

.workflow-phone-progress-dot {
  width:6px; height:6px; border-radius:50%;
  background:rgba(255,255,255,0.25);
  transition:background 0.3s, transform 0.3s;
}
.workflow-phone-progress-dot.is-active {
  background:var(--mint-bright);
  transform:scale(1.3);
}

.workflow-steps { display:flex; flex-direction:column; gap:4px; }

.workflow-step {
  display:flex; gap:20px; align-items:flex-start;
  padding:24px 28px;
  border-radius:var(--radius-lg);
  border:1px solid transparent;
  background:transparent;
  text-align:left;
  transition:background 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
  position:relative;
  overflow:hidden;
}

.workflow-step::before {
  content:"";
  position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(to bottom, var(--mint), var(--mint-bright));
  transform:scaleY(0); transform-origin:top;
  transition:transform 0.4s var(--ease);
  border-radius:0 2px 2px 0;
}

.workflow-step.is-active {
  background:var(--bg-2);
  border-color:var(--border-mid);
  box-shadow:var(--shadow-sm);
}
.workflow-step.is-active::before { transform:scaleY(1); }

.workflow-step-num {
  font-family:var(--font-display);
  font-size:2rem;
  font-weight:800;
  color:var(--border-mid);
  line-height:1;
  flex-shrink:0;
  transition:color 0.3s;
  min-width:2ch;
}
.workflow-step.is-active .workflow-step-num { color:var(--mint); }

.workflow-step-title {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
  color:var(--ink-3);
  margin-bottom:6px;
  transition:color 0.3s;
}
.workflow-step.is-active .workflow-step-title { color:var(--ink); }

.workflow-step-desc { font-size:0.88rem; color:var(--ink-3); line-height:1.6; transition:color 0.3s; }
.workflow-step.is-active .workflow-step-desc { color:var(--ink-2); }

/* ── 13. PRIVACY SECTION ──────────────────────────────────── */
.privacy-section {
  background:var(--bg-1);
  position:relative;
  overflow:hidden;
}

.privacy-section::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 50% 60% at 15% 50%, rgba(77,255,210,0.04) 0%, transparent 70%),
    radial-gradient(ellipse 30% 40% at 85% 20%, rgba(255,216,138,0.03) 0%, transparent 70%);
  pointer-events:none;
}

.privacy-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.privacy-shield {
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

.shield-svg {
  width:240px; height:auto;
  filter:drop-shadow(0 0 40px rgba(77,255,210,0.15)) drop-shadow(0 20px 60px rgba(0,0,0,0.4));
  animation:shield-float 5s ease-in-out infinite;
}

.privacy-trust {
  display:flex; flex-direction:column; gap:0;
}

.trust-item {
  display:grid;
  grid-template-columns:40px 1fr;
  gap:20px;
  align-items:start;
  padding:28px 0;
  border-bottom:1px solid var(--border);
  position:relative;
}
.trust-item:last-child { border-bottom:none; }

.trust-item-num {
  font-family:var(--font-display);
  font-size:1.4rem;
  font-weight:800;
  color:var(--mint);
  opacity:0.4;
  line-height:1;
  padding-top:3px;
}

.trust-item-title {
  font-family:var(--font-display);
  font-weight:700;
  font-size:1rem;
  color:var(--ink);
  margin-bottom:6px;
}

.trust-item-desc { font-size:0.875rem; color:var(--ink-2); line-height:1.65; }

/* ── 14. AI DEMO SECTION ──────────────────────────────────── */
.ai-section {
  background:var(--bg);
  position:relative;
  overflow:hidden;
}

.ai-section::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(77,255,210,0.04) 0%, transparent 70%);
  pointer-events:none;
}

.ai-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
}

.chat-window {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  overflow:hidden;
  box-shadow:var(--shadow-xl), var(--glow-mint);
}

.chat-header {
  background:var(--bg-3);
  border-bottom:1px solid var(--border);
  padding:16px 20px;
  display:flex; align-items:center; gap:12px;
}

.chat-header-icon {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg, var(--mint-deep), var(--mint));
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; color:#000; font-weight:700;
}

.chat-header-info { flex:1; }
.chat-header-name { font-weight:700; font-size:0.9rem; }
.chat-header-status {
  font-size:0.72rem; color:var(--mint-bright); font-weight:600;
  display:flex; align-items:center; gap:5px;
}
.chat-header-status::before {
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--mint-bright);
  animation:pulse-dot 2s infinite;
}

.chat-body {
  padding:20px;
  display:flex; flex-direction:column; gap:14px;
  min-height:320px;
}

.chat-bubble {
  max-width:85%; padding:12px 16px;
  border-radius:18px;
  font-size:0.875rem; line-height:1.5;
  opacity:0; transform:translateY(12px);
  transition:opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.chat-bubble.is-visible { opacity:1; transform:translateY(0); }

.chat-bubble--user {
  align-self:flex-end;
  background:linear-gradient(135deg, var(--mint-deep), var(--mint));
  color:#fff; border-bottom-right-radius:4px;
}

.chat-bubble--ai {
  align-self:flex-start;
  background:var(--bg-3);
  color:var(--ink); border-bottom-left-radius:4px;
  border:1px solid var(--border);
}

.chat-bubble--draft {
  align-self:flex-start;
  background:linear-gradient(135deg, rgba(77,255,210,0.06), rgba(77,255,210,0.02));
  border:1px solid rgba(77,255,210,0.2);
  color:var(--ink);
  border-radius:16px;
  padding:16px;
  max-width:100%;
}

.chat-draft-row {
  display:flex; justify-content:space-between;
  font-size:0.82rem; padding:4px 0;
  border-bottom:1px solid rgba(77,255,210,0.1);
}
.chat-draft-row:last-child { border-bottom:none; }
.chat-draft-label { color:var(--ink-3); }
.chat-draft-val { font-weight:600; color:var(--ink); }

.chat-draft-actions {
  display:flex; gap:8px; margin-top:14px;
}
.chat-draft-btn {
  flex:1; padding:8px;
  border-radius:var(--radius-sm); font-size:0.8rem; font-weight:700;
  border:none; transition:background 0.2s, transform 0.15s;
}
.chat-draft-btn--save { background:var(--mint); color:#000; }
.chat-draft-btn--skip { background:var(--bg); border:1px solid var(--border); color:var(--ink-2); }
.chat-draft-btn:hover { transform:scale(1.02); }

.chat-typing {
  align-self:flex-start;
  background:var(--bg-3); border:1px solid var(--border);
  padding:12px 16px; border-radius:18px; border-bottom-left-radius:4px;
  display:flex; gap:5px; align-items:center;
}

.typing-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--ink-3);
  animation:typing-bounce 1.2s ease-in-out infinite;
}
.typing-dot:nth-child(1) { animation-delay:0s; }
.typing-dot:nth-child(2) { animation-delay:0.15s; }
.typing-dot:nth-child(3) { animation-delay:0.3s; }

/* ── 15. PRICING SECTION ──────────────────────────────────── */
.pricing-section {
  background:var(--bg-1);
  position:relative;
  overflow:hidden;
}

.pricing-section::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 40% at 50% 0%, rgba(77,255,210,0.05) 0%, transparent 70%);
  pointer-events:none;
}

.pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:stretch;
}

.pricing-card {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  padding:36px;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}

.pricing-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* Cards stretch to equal height; pin the CTA to the bottom so the row aligns. */
.pricing-card > .btn { margin-top:auto; }

.pricing-card--featured {
  background:linear-gradient(160deg, rgba(9,20,16,0.98) 0%, rgba(14,28,24,0.98) 100%);
  border-color:transparent;
  box-shadow:0 0 0 1px rgba(77,255,210,0.12), var(--shadow-lg), var(--glow-mint);
  position:relative;
  overflow:hidden;
}
.pricing-card--featured:hover { transform:translateY(-4px); }

/* The featured card is an intentionally dark "premium island" in BOTH themes.
   Re-map the palette tokens locally so its text resolves to the dark-theme
   (light-on-dark) values even when the page is in light mode — otherwise the
   price, description and feature list render dark-on-dark and disappear. */
.pricing-card--featured {
  color:#e8f4f0;
  --ink:#e8f4f0;
  --ink-2:#a8bfba;
  --ink-3:#6b8580;
  --ink-4:#3d5550;
  --mint:#80cdbe;
  --mint-bright:#4dffd2;
  --mint-deep:#2d8b69;
  --bg-3:#152924;
  --border:rgba(128,205,190,0.12);
  --border-mid:rgba(128,205,190,0.20);
}

/* Animated conic gradient border via box-shadow layering */
.pricing-card--featured::before {
  content:"";
  position:absolute; inset:-2px;
  border-radius:calc(var(--radius-xl) + 2px);
  background:conic-gradient(
    from var(--angle, 0deg),
    rgba(77,255,210,0) 0%,
    rgba(77,255,210,0.8) 15%,
    rgba(255,216,138,0.5) 30%,
    rgba(77,255,210,0.8) 45%,
    rgba(77,255,210,0) 60%,
    rgba(77,255,210,0) 100%
  );
  z-index:0;
  animation:border-spin 5s linear infinite;
}

/* Inner mask to create "border" illusion — sits on top of conic */
.pricing-card--featured::after {
  content:"";
  position:absolute; inset:2px;
  border-radius:calc(var(--radius-xl) - 1px);
  background:linear-gradient(160deg, #090f0d 0%, #0c1410 100%);
  z-index:1;
}

/* All children sit above the mask */
.pricing-card--featured > * { position:relative; z-index:2; }

.pricing-badge {
  position:absolute; top:20px; right:20px;
  background:linear-gradient(135deg, var(--mint), var(--mint-bright));
  color:#000; font-size:0.7rem; font-weight:800;
  letter-spacing:0.06em; text-transform:uppercase;
  padding:4px 12px; border-radius:50px;
  box-shadow:0 0 16px rgba(77,255,210,0.4), 0 0 32px rgba(77,255,210,0.15);
  animation:badge-pulse 2.5s ease-in-out infinite;
}

@keyframes badge-pulse {
  0%,100% { box-shadow:0 0 16px rgba(77,255,210,0.4), 0 0 32px rgba(77,255,210,0.15); }
  50%      { box-shadow:0 0 24px rgba(77,255,210,0.7), 0 0 48px rgba(77,255,210,0.25); }
}

/* Shimmer sweep on featured card */
.pricing-card--featured .pricing-shimmer-layer {
  content:"";
  position:absolute; top:-100%; left:-60%;
  width:40%; height:300%;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%);
  animation:card-shimmer 5s ease-in-out infinite 2s;
  pointer-events:none;
}

.pricing-tier {
  font-size:0.76rem; font-weight:700;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--mint); margin-bottom:12px;
}

.pricing-price {
  font-family:var(--font-display);
  font-weight:800;
  line-height:1;
  margin-bottom:8px;
}
.pricing-price .amount { font-size:3rem; }
.pricing-price .period { font-size:0.9rem; color:var(--ink-3); font-family:var(--font-ui); font-weight:500; }
.pricing-annual {
  font-family:var(--font-ui);
  font-size:0.78rem;
  color:var(--ink-3);
  margin:-2px 0 14px;
  display:flex; align-items:center; gap:6px;
  font-weight:500;
  letter-spacing:0.01em;
}
.pricing-annual strong { color:var(--ink-2); font-weight:600; }
.pricing-annual .save {
  display:inline-flex; align-items:center;
  background:rgba(77,255,210,0.12);
  color:var(--mint-bright);
  padding:1px 7px; border-radius:999px;
  font-size:0.66rem; font-weight:700;
  letter-spacing:0.04em; text-transform:uppercase;
  border:1px solid rgba(77,255,210,0.22);
}
[data-theme="light"] .pricing-annual .save {
  background:rgba(45,139,105,0.10);
  color:var(--mint-deep);
  border-color:rgba(45,139,105,0.28);
}
/* Keep the save badge legible on the always-dark featured card in light mode. */
[data-theme="light"] .pricing-card--featured .pricing-annual .save {
  background:rgba(77,255,210,0.12);
  color:#4dffd2;
  border-color:rgba(77,255,210,0.22);
}

.pricing-desc {
  font-size:0.875rem; color:var(--ink-2);
  margin-bottom:28px; line-height:1.6;
}

.pricing-features { list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }

.pricing-feature-item {
  display:flex; gap:10px; align-items:flex-start;
  font-size:0.875rem; color:var(--ink-2); line-height:1.4;
}

.pricing-feature-item::before {
  content:"✓";
  flex-shrink:0;
  width:18px; height:18px;
  background:rgba(77,255,210,0.12);
  border:1px solid rgba(77,255,210,0.2);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:0.62rem; color:var(--mint-bright); font-weight:900;
  margin-top:1px;
}

.pricing-feature-item.is-dim { color:var(--ink-4); }
.pricing-feature-item.is-dim::before { background:var(--bg-3); border-color:var(--border); color:var(--ink-4); content:"–"; }

/* ── 16. FAQ SECTION ──────────────────────────────────────── */
.faq-section { background:var(--bg); }

.faq-list { max-width:760px; margin:0 auto; display:flex; flex-direction:column; gap:8px; }

.faq-item {
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:border-color 0.3s, box-shadow 0.3s;
}

.faq-item:hover { border-color:var(--border-mid); }
.faq-item.is-open { border-color:rgba(77,255,210,0.25); box-shadow:0 0 0 1px rgba(77,255,210,0.06), -2px 0 0 var(--mint-bright); }

.faq-question {
  width:100%;
  background:none; border:none; color:var(--ink);
  padding:20px 24px;
  text-align:left;
  font-size:0.95rem; font-weight:600;
  display:flex; justify-content:space-between; align-items:center;
  gap:16px;
  transition:color 0.2s;
}
.faq-question:hover { color:var(--mint); }
.faq-item.is-open .faq-question { color:var(--mint); }

.faq-icon {
  flex-shrink:0; width:24px; height:24px;
  border-radius:50%;
  background:var(--bg-3); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.8rem; color:var(--ink-3);
  transition:transform 0.35s var(--ease), background 0.2s, border-color 0.2s;
  font-weight:300;
}
.faq-item.is-open .faq-icon {
  transform:rotate(45deg);
  background:rgba(77,255,210,0.1);
  border-color:rgba(77,255,210,0.25);
  color:var(--mint-bright);
}

.faq-answer {
  max-height:0; overflow:hidden;
  transition:max-height 0.45s var(--ease), padding 0.3s;
}
.faq-item.is-open .faq-answer { max-height:300px; }

.faq-answer-inner {
  padding:0 24px 24px;
  font-size:0.9rem; color:var(--ink-2); line-height:1.7;
  border-top:1px solid var(--border);
  padding-top:20px;
}

/* ── 17. CTA SECTION ──────────────────────────────────────── */
.cta-section {
  background:var(--bg-1);
  position:relative; overflow:hidden;
}

.cta-section::before {
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 80% 80% at 50% 50%, rgba(77,255,210,0.13) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 20% 20%, rgba(255,216,138,0.07) 0%, transparent 60%),
    radial-gradient(ellipse 40% 40% at 80% 80%, rgba(77,255,210,0.07) 0%, transparent 60%);
  pointer-events:none;
  animation:aurora-breathe 8s ease-in-out infinite;
}

/* Concentric glow rings */
.cta-section::after {
  content:"";
  position:absolute; top:50%; left:50%;
  width:900px; height:900px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(circle at center, transparent 24%, rgba(77,255,210,0.08) 26%, transparent 28%),
    radial-gradient(circle at center, transparent 38%, rgba(77,255,210,0.06) 40%, transparent 42%),
    radial-gradient(circle at center, transparent 52%, rgba(77,255,210,0.04) 54%, transparent 56%),
    radial-gradient(circle at center, transparent 65%, rgba(77,255,210,0.025) 67%, transparent 69%);
  animation:ring-pulse 6s ease-in-out infinite;
  pointer-events:none;
}

.cta-inner {
  text-align:center;
  position:relative; z-index:1;
  max-width:680px;
  margin:0 auto;
}

.cta-h2 {
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2.4rem, 5.5vw, 4.5rem);
  line-height:1.06;
  letter-spacing:-0.03em;
  margin-bottom:24px;
  color:var(--fg);
}

.cta-h2 .text-gradient {
  background:linear-gradient(135deg, var(--mint) 0%, var(--mint-bright) 50%, var(--gold) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  background-size:200%;
  animation:gradient-shift 5s ease infinite;
}

.cta-desc { font-size:1.05rem; color:var(--ink-2); margin-bottom:40px; line-height:1.7; }

.cta-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:16px; }

.cta-note { font-size:0.78rem; color:var(--ink-3); margin-top:20px; }

/* ── 18. FOOTER ───────────────────────────────────────────── */
.site-footer {
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:64px 32px 48px;
}

.footer-grid {
  max-width:var(--content-w); margin:0 auto;
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:48px;
  margin-bottom:48px;
}

.footer-brand { }
.footer-brand-logo {
  display:flex; align-items:center; gap:10px; margin-bottom:16px;
}
.footer-brand-logo img { width:36px; height:36px; border-radius:10px; }
.footer-brand-name {
  font-family:var(--font-display); font-weight:700; font-size:1rem;
}
.footer-brand-desc { font-size:0.875rem; color:var(--ink-3); line-height:1.6; max-width:280px; }

.footer-col-title {
  font-size:0.75rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--ink-3); margin-bottom:16px;
}

.footer-links { display:flex; flex-direction:column; gap:10px; }

.footer-links a {
  font-size:0.875rem; color:var(--ink-2);
  transition:color 0.2s;
}
.footer-links a:hover { color:var(--mint); }

.footer-bottom {
  max-width:var(--content-w); margin:0 auto;
  padding-top:32px;
  border-top:1px solid var(--border);
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:16px;
}

.footer-copy { font-size:0.82rem; color:var(--ink-3); }

.footer-legal {
  display:flex; gap:20px; flex-wrap:wrap;
}
.footer-legal a { font-size:0.82rem; color:var(--ink-3); transition:color 0.2s; }
.footer-legal a:hover { color:var(--mint); }

/* ── 19. SUBPAGES ─────────────────────────────────────────── */
/* Page hero (privacy/support) */
.page-hero {
  padding:calc(var(--header-h) + 80px) 32px 80px;
  text-align:center;
  position:relative;
  overflow:hidden;
  background:var(--bg-1);
  border-bottom:1px solid var(--border);
}

.page-hero::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 80% at 50% 50%, rgba(77,255,210,0.05) 0%, transparent 70%);
  pointer-events:none;
}

.page-hero-eyebrow { margin-bottom:16px; }

.page-hero-h1 {
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(2rem, 5vw, 3.5rem);
  letter-spacing:-0.025em;
  line-height:1.1;
  margin-bottom:16px;
}

.page-hero-desc {
  font-size:1.05rem; color:var(--ink-2);
  max-width:560px; margin:0 auto; line-height:1.7;
}

.breadcrumb {
  display:flex; align-items:center; gap:8px;
  justify-content:center;
  font-size:0.8rem; color:var(--ink-3);
  margin-bottom:24px;
}
.breadcrumb a { color:var(--mint); transition:opacity 0.2s; }
.breadcrumb a:hover { opacity:0.8; }
.breadcrumb-sep { opacity:0.4; }

/* Prose content */
.prose-section {
  max-width:760px;
  margin:0 auto;
  padding:80px 32px;
}

.prose-section h2 {
  font-family:var(--font-display);
  font-weight:700; font-size:1.5rem;
  letter-spacing:-0.02em;
  margin:48px 0 16px;
  color:var(--ink);
  padding-top:48px;
  border-top:1px solid var(--border);
}
.prose-section h2:first-of-type { margin-top:0; padding-top:0; border-top:none; }

.prose-section h3 {
  font-family:var(--font-display);
  font-weight:600; font-size:1.15rem;
  margin:28px 0 10px;
  color:var(--ink);
}

.prose-section p { font-size:0.95rem; color:var(--ink-2); line-height:1.75; margin-bottom:16px; }

.prose-section ul, .prose-section ol {
  padding-left:0; list-style:none;
  display:flex; flex-direction:column; gap:10px;
  margin-bottom:24px;
}

.prose-section ul li, .prose-section ol li {
  font-size:0.95rem; color:var(--ink-2); line-height:1.65;
  display:flex; gap:12px; align-items:flex-start;
}

.prose-section ul li::before {
  content:"→"; color:var(--mint); flex-shrink:0; font-weight:700; margin-top:1px;
}

.prose-section a { color:var(--mint); text-decoration:underline; text-decoration-color:rgba(77,255,210,0.3); }
.prose-section a:hover { text-decoration-color:var(--mint-bright); }

.prose-section strong { color:var(--ink); font-weight:700; }

.prose-meta {
  font-size:0.82rem; color:var(--ink-3);
  padding:16px 20px;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--radius);
  margin-bottom:48px;
  display:flex; gap:24px; flex-wrap:wrap;
}

/* Support page specifics */
.support-contact {
  background:linear-gradient(135deg, rgba(77,255,210,0.06), rgba(77,255,210,0.02));
  border:1px solid rgba(77,255,210,0.2);
  border-radius:var(--radius-xl);
  padding:40px;
  text-align:center;
  margin-top:64px;
}

.support-contact h3 {
  font-family:var(--font-display);
  font-weight:700; font-size:1.4rem;
  margin-bottom:12px;
}

.support-contact p { font-size:0.95rem; color:var(--ink-2); margin-bottom:24px; }

/* ── 20. 404 PAGE ─────────────────────────────────────────── */
.page-404 {
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:32px;
  background:var(--bg);
  position:relative; overflow:hidden;
}

.page-404::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 50% 50%, rgba(77,255,210,0.06) 0%, transparent 70%);
  pointer-events:none;
}

.four-oh-four-num {
  font-family:var(--font-display);
  font-size:clamp(8rem, 20vw, 18rem);
  font-weight:800;
  line-height:1;
  letter-spacing:-0.05em;
  background:linear-gradient(135deg, rgba(77,255,210,0.15) 0%, rgba(128,205,190,0.08) 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  position:relative; z-index:1;
  animation:float-slow 4s ease-in-out infinite;
}

.page-404-title {
  font-family:var(--font-display);
  font-weight:700; font-size:1.8rem;
  margin-bottom:12px; position:relative; z-index:1;
}

.page-404-desc {
  font-size:1rem; color:var(--ink-2);
  margin-bottom:36px; max-width:400px;
  position:relative; z-index:1;
}

/* ── 21. SCROLL REVEAL ────────────────────────────────────── */
[data-reveal] {
  opacity:0;
  transform:translateY(32px);
  transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

[data-reveal].is-visible { opacity:1; transform:translateY(0); }

[data-reveal][data-reveal-delay="1"] { transition-delay:0.1s; }
[data-reveal][data-reveal-delay="2"] { transition-delay:0.2s; }
[data-reveal][data-reveal-delay="3"] { transition-delay:0.3s; }
[data-reveal][data-reveal-delay="4"] { transition-delay:0.4s; }
[data-reveal][data-reveal-delay="5"] { transition-delay:0.5s; }
[data-reveal][data-reveal-delay="6"] { transition-delay:0.6s; }

[data-reveal-scale] {
  opacity:0;
  transform:scale(0.92);
  transition:opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
[data-reveal-scale].is-visible { opacity:1; transform:scale(1); }

/* ── 22. KEYFRAMES ────────────────────────────────────────── */
@keyframes eyebrow-in { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:none; } }
@keyframes line-up { from { transform:translateY(100%); opacity:0; } to { transform:translateY(0); opacity:1; } }
@keyframes fade-up { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fade-in { from { opacity:0; } to { opacity:1; } }

@keyframes phone-float {
  0%,100% { transform:translateY(0) rotate(-0.5deg); }
  50%      { transform:translateY(-14px) rotate(0.5deg); }
}

@keyframes shield-float {
  0%,100% { transform:translateY(0) scale(1); }
  50%      { transform:translateY(-10px) scale(1.02); }
}

@keyframes float-slow {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

@keyframes glow-breathe {
  0%,100% { opacity:0.6; }
  50%      { opacity:1; }
}

@keyframes pulse-dot {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:0.5; transform:scale(0.75); }
}

@keyframes badge-float-a {
  0%,100% { transform:translateY(0) rotate(-2deg); }
  50%      { transform:translateY(-12px) rotate(1deg); }
}
@keyframes badge-float-b {
  0%,100% { transform:translateY(0) rotate(1.5deg); }
  50%      { transform:translateY(-9px) rotate(-1deg); }
}
@keyframes badge-float-c {
  0%,100% { transform:translateY(0) rotate(-1deg); }
  50%      { transform:translateY(-11px) rotate(2deg); }
}

@keyframes gradient-shift {
  0%,100% { background-position:0% 50%; }
  50%      { background-position:100% 50%; }
}

@keyframes card-shimmer {
  0%   { transform:translateX(-100%) skewX(-20deg); opacity:0; }
  30%  { opacity:1; }
  70%  { opacity:1; }
  100% { transform:translateX(300%) skewX(-20deg); opacity:0; }
}

@keyframes marquee {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }
}

@keyframes spin-slow {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

@keyframes typing-bounce {
  0%,60%,100% { transform:translateY(0); opacity:0.4; }
  30%          { transform:translateY(-6px); opacity:1; }
}

/* Conic border rotation — uses CSS custom property on element */
@keyframes border-spin {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* CTA aurora breathe */
@keyframes aurora-breathe {
  0%,100% { opacity:0.7; transform:scale(1); }
  50%      { opacity:1; transform:scale(1.05); }
}

/* CTA concentric rings pulse */
@keyframes ring-pulse {
  0%,100% { transform:translate(-50%,-50%) scale(1); opacity:0.6; }
  50%      { transform:translate(-50%,-50%) scale(1.15); opacity:1; }
}

/* ── 23. RESPONSIVE ───────────────────────────────────────── */
/* Desktop default sits in the rules above. These cascade DOWN.        */
/* Tablet breakpoint (<=1024) stacks the hero + privacy + AI sections. */
@media (max-width:1024px) {
  .features-grid { grid-template-columns:1fr 1fr; }
  .feature-card--wide { grid-column:span 1; }
  .privacy-layout { grid-template-columns:1fr; gap:56px; }
  .ai-layout { grid-template-columns:1fr; gap:56px; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:40px; }
  .hero-grid { grid-template-columns:1fr; }
  .hero-content { order:1; }
  .hero-device { order:2; }
  .phone-frame { transform:perspective(1100px) rotateY(-8deg) rotateX(2deg); }
  .workflow-layout { grid-template-columns:1fr; gap:56px; }
  .pricing-grid { grid-template-columns:1fr 1fr; }
  .pricing-card--featured { transform:none; }
  .pricing-card--featured:hover { transform:translateY(-4px); }
}

/* Mobile + small tablet (<=768): adapt — never amputate */
@media (max-width:768px) {
  :root { --header-h:60px; }
  .section { padding:64px 20px; }
  .section--sm { padding:48px 20px; }
  .section--lg { padding:80px 20px; }
  .section-head { margin-bottom:48px; }
  .features-grid { grid-template-columns:1fr; }
  .pricing-grid { grid-template-columns:1fr; max-width:420px; margin:0 auto; }
  .nav-links,.nav-actions { display:none; }
  .nav-toggle { display:flex; }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px; }
  .footer-bottom { flex-direction:column; text-align:center; gap:12px; }
  .ai-layout { grid-template-columns:1fr; gap:32px; }

  /* HERO — content first, device supportive */
  .hero { min-height:auto; }
  .hero-grid {
    padding:24px 20px 40px;
    gap:24px;
    grid-template-columns:1fr;
  }
  .hero-content { order:1; max-width:100%; }
  .hero-content::before { display:none; }
  .hero-device { order:2; padding:0; }
  .hero-eyebrow { margin-bottom:16px; font-size:0.72rem; }
  .hero-h1 { font-size:2.6rem; margin-bottom:16px; }
  .hero-desc { font-size:0.95rem; margin-bottom:24px; line-height:1.65; max-width:100%; }
  .hero-actions { margin-bottom:20px; }

  /* HERO PROOF — compact 2-col pill grid */
  .hero-proof {
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:8px;
    margin-top:0;
  }
  .hero-proof-item {
    width:100%;
    justify-content:flex-start;
    padding:8px 10px;
    font-size:0.75rem;
    min-height:40px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* HERO DEVICE — much smaller phone, no glow/orbit excess */
  .phone-frame { width:180px; height:385px; transform:none; border-radius:40px; }
  .phone-frame:hover { transform:none; }
  .phone-screen { --phone-screen-radius:28px; }
  .phone-glow { inset:-40px; }
  .phone-outer { filter:drop-shadow(0 20px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 60px rgba(77,255,210,0.15)); }
  .phone-outer:hover { filter:drop-shadow(0 20px 60px rgba(0,0,0,0.7)) drop-shadow(0 0 60px rgba(77,255,210,0.15)); }

  /* ORBIT RINGS — tighter, subtler */
  .orbit-ring { inset:-24px; animation-duration:60s; opacity:0.4; }
  .orbit-ring--2 { inset:-52px; opacity:0.25; }

  /* BADGE PILLS — 2x2 grid under device, no absolute overflow */
  .hero-device-inner {
    display:flex; flex-direction:column; align-items:center; gap:12px;
    padding-bottom:0;
  }
  .badge-pill {
    position:static !important;
    display:inline-flex;
    margin:0;
    animation:none !important;
    font-size:0.68rem;
    padding:6px 10px;
    white-space:nowrap;
    max-width:calc(50vw - 24px);
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-device-inner::after { display:none; }
  /* Wrap pills into 2-col flex */
  .hero-device-inner {
    flex-wrap:wrap; flex-direction:row; justify-content:center;
  }

  /* STATS — compact on mobile */
  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-cell { padding:20px 16px; }
  .stat-number { font-size:2rem; }
  .stat-label { font-size:0.75rem; }

  /* FEATURE CARDS — tighter padding */
  .feature-card { padding:24px; }
  .feature-card-icon { width:44px; height:44px; font-size:1.2rem; margin-bottom:16px; }
  .feature-card-title { font-size:1.05rem; }
  .feature-card-desc { font-size:0.85rem; }

  /* WORKFLOW */
  .workflow-layout { gap:32px; }
  .workflow-phone-frame { width:180px; height:385px; border-radius:36px; padding:8px; }
  .workflow-phone-screen { --workflow-screen-radius:28px; }
  .workflow-step { padding:16px 20px; gap:14px; }
  .workflow-step-num { font-size:1.5rem; }
  .workflow-step-title { font-size:0.95rem; }
  .workflow-step-desc { font-size:0.82rem; }

  /* CHAT WINDOW — keep visible, narrow it, tighten chat bubbles */
  .chat-window { max-width:100%; }
  .chat-body { padding:16px; gap:10px; min-height:240px; }
  .chat-bubble { font-size:0.82rem; padding:10px 14px; max-width:90%; }
  .chat-draft-row { font-size:0.78rem; }

  /* PRIVACY */
  .privacy-layout { gap:32px; }
  .privacy-shield { min-height:120px; }
  .privacy-shield .shield-svg { width:120px; height:auto; }
  .trust-item { padding:20px 0; gap:14px; }
  .trust-item-title { font-size:0.92rem; }
  .trust-item-desc { font-size:0.82rem; }

  /* PRICING — compact cards */
  .pricing-card { padding:28px 24px; border-radius:var(--radius-lg); }
  .pricing-price .amount { font-size:2.4rem; }
  .pricing-desc { font-size:0.82rem; margin-bottom:20px; }
  .pricing-features { gap:8px; margin-bottom:20px; }
  .pricing-feature-item { font-size:0.82rem; }
  .pricing-badge { font-size:0.65rem; padding:3px 10px; top:16px; right:16px; }
  .pricing-card--featured { transform:none; }
  .pricing-card--featured:hover { transform:translateY(-4px); }

  /* FAQ */
  .faq-question { padding:16px 20px; font-size:0.88rem; }
  .faq-answer-inner { padding:0 20px 20px; font-size:0.85rem; padding-top:16px; }

  /* CTA */
  .cta-h2 { font-size:clamp(1.8rem, 6vw, 2.8rem); }
  .cta-desc { font-size:0.92rem; margin-bottom:28px; }

  /* FOOTER */
  .site-footer { padding:48px 20px 32px; }

  /* TRUST MARQUEE — stays visible, gets smaller text + slower scroll */
  .trust-marquee { padding:12px 0; }
  .marquee-item { font-size:0.75rem; }
  .marquee-track { gap:28px; animation-duration:60s; }

  /* Prevent ANY horizontal overflow */
  .hero, .section, .trust-marquee, .site-footer, main { max-width:100vw; overflow-x:hidden; }
}

@media (max-width:480px) {
  .hero-h1 { font-size:2.2rem; line-height:1.08; }
  .btn-lg { padding:14px 24px; font-size:0.9rem; }
  .cta-actions { flex-direction:column; align-items:stretch; }
  .cta-actions > * { width:100%; justify-content:center; }
  .hero-actions { flex-direction:column; align-items:stretch; gap:10px; }
  .hero-actions > * { width:100%; justify-content:center; }
  .appstore-badge { justify-content:center; }
  /* Marquee: even smaller, slower — but never display:none */
  .trust-marquee { padding:10px 0; }
  .marquee-item { font-size:0.7rem; }
  .marquee-track { gap:20px; animation-duration:80s; }
  /* Hero proof single-col below 480 */
  .hero-proof { grid-template-columns:1fr; gap:6px; }
  /* Phone even smaller on narrow screens */
  .phone-frame { width:160px; height:342px; border-radius:36px; }
  .phone-screen { border-radius:24px; }
  .workflow-phone-frame { width:160px; height:342px; border-radius:32px; padding:7px; }
  .workflow-phone-screen { border-radius:24px; }
  /* Tighter section rhythm */
  .section { padding:48px 16px; }
  .section--sm { padding:36px 16px; }
  .section--lg { padding:64px 16px; }
  .section-head { margin-bottom:36px; }
  /* Footer single col */
  .footer-grid { grid-template-columns:1fr; gap:24px; }
  /* Stats even tighter */
  .stat-cell { padding:16px 12px; }
  .stat-number { font-size:1.7rem; }
}

/* Wide-desktop tier (>=1440): give hero/features/pricing more breathing room */
@media (min-width:1440px) {
  :root { --content-w:1320px; }
  .hero-grid { gap:72px; padding:48px 48px 96px; }
  .hero-h1 { font-size:5.4rem; }
  .section { padding:140px 48px; }
  .section--lg { padding:180px 48px; }
  .features-grid { gap:24px; }
  .pricing-grid { gap:28px; }
  .footer-grid { gap:64px; }
  .phone-frame { width:296px; height:632px; }
}

/* Ultra-wide cap (>=1920): prevent text from looking miniature on big monitors */
@media (min-width:1920px) {
  :root { --content-w:1440px; }
  .hero-h1 { font-size:6rem; }
  .section-h2 { font-size:3.4rem; }
}

/* Reduced motion — neutralize ALL transition/animation niceties + ensure reveal-on-scroll content stays visible.
   This was a real a11y bug pre-polish: [data-reveal] starts opacity:0 and only IO can flip it,
   so anyone with prefers-reduced-motion would see blank sections. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal], [data-reveal-scale], .chat-bubble {
    opacity: 1 !important;
    transform: none !important;
  }
  .marquee-track { animation: none !important; }
  .orbit-ring { animation: none !important; }
}

/* JS-failure / no-JS fallback — same fix as above for the IO-gated reveals.
   The site uses a defer'd <script>; if it 404s or is blocked, content must still appear. */
.no-js [data-reveal],
.no-js [data-reveal-scale],
.no-js .chat-bubble {
  opacity: 1 !important;
  transform: none !important;
}

/* Global focus-visible ring — every interactive element gets a clear ring for keyboard users */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
.faq-question:focus-visible,
.nav-toggle:focus-visible,
.theme-toggle:focus-visible {
  outline: 2px solid var(--mint-bright);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Touch-target floor: 44pt minimum on coarse pointers */
@media (pointer: coarse) {
  .nav-links a,
  .nav-actions a,
  .nav-actions button,
  .footer-links a,
  .faq-question,
  .pricing-card .btn,
  .lang-switch a,
  .theme-toggle,
  .nav-toggle {
    min-height: 44px;
  }
}

/* ── MOBILE NAV PANEL ─────────────────────────────────────── */
@media (max-width:768px) {
  .nav-panel {
    position:fixed;
    top:calc(var(--header-h) + 8px);
    left:12px;
    right:12px;
    bottom:auto;
    max-height:calc(100svh - var(--header-h) - 24px - env(safe-area-inset-bottom));
    background-color:rgba(8,20,16,0.985);
    background-image:
      linear-gradient(180deg, rgba(23,47,40,0.99) 0%, rgba(8,20,16,0.975) 100%);
    -webkit-backdrop-filter:blur(38px) saturate(190%) brightness(0.74);
    backdrop-filter:blur(38px) saturate(190%) brightness(0.74);
    border:1px solid rgba(128,205,190,0.34);
    border-radius:28px;
    box-shadow:0 30px 100px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.10);
    padding:24px 22px calc(24px + env(safe-area-inset-bottom));
    display:flex; flex-direction:column; gap:8px;
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s var(--ease), transform 0.3s var(--ease);
    z-index:800;
    overflow-y:auto;
    color:var(--ink);
  }

  .nav-panel::before {
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:
      linear-gradient(180deg, rgba(6,16,13,0.16), rgba(6,16,13,0.26)),
      radial-gradient(ellipse at 20% 0%, rgba(128,205,190,0.11), transparent 52%);
    pointer-events:none;
  }

  .nav-panel > * {
    position:relative;
    z-index:1;
  }

  [data-theme="light"] .nav-panel {
    background-color:rgba(255,252,246,0.985);
    background-image:
      linear-gradient(180deg, rgba(255,255,255,0.995) 0%, rgba(248,244,236,0.975) 100%);
    -webkit-backdrop-filter:blur(38px) saturate(170%) brightness(1.04);
    backdrop-filter:blur(38px) saturate(170%) brightness(1.04);
    border-color:rgba(14,35,28,0.22);
    box-shadow:0 30px 100px rgba(14,35,28,0.24), inset 0 1px 0 rgba(255,255,255,0.95);
  }

  [data-theme="light"] .nav-panel::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,0.28), rgba(247,243,234,0.34)),
      radial-gradient(ellipse at 20% 0%, rgba(45,139,105,0.10), transparent 52%);
  }

  @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
    .nav-panel {
      background-color:#081410;
      background-image:none;
    }
    [data-theme="light"] .nav-panel {
      background-color:#fffcf6;
      background-image:none;
    }
  }

  .site-header.is-nav-open {
    background:rgba(6,14,12,0.72);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    backdrop-filter:blur(20px) saturate(160%);
  }

  [data-theme="light"] .site-header.is-nav-open {
    background:rgba(247,243,234,0.72);
  }

  .site-header.is-nav-open .nav-panel {
    opacity:1; transform:translateY(0); pointer-events:auto;
  }

  .nav-links,
  .nav-actions { display:flex !important; flex-direction:column; }

  /* Reset the desktop right-alignment (margin-left:auto / shrink-wrap) so the
     dropdown links span the full panel width and read left-aligned. */
  .nav-links { margin-left:0; width:100%; align-items:stretch; }
  .nav-actions { width:100%; justify-content:flex-start; }

  .nav-links a { display:block; padding:14px 0; font-size:1rem; border-bottom:1px solid var(--border); width:100%; }
  .nav-links a::after { display:none; }
  .nav-actions { flex-direction:row; flex-wrap:wrap; padding-top:16px; }
}

/* ── LIGHT MODE ADJUSTMENTS ───────────────────────────────── */
[data-theme="light"] .phone-frame {
  background:linear-gradient(150deg, #c8d5d2 0%, #b0c0bc 55%, #b8c8c4 100%);
}

[data-theme="light"] .feature-card { background:var(--bg-3); }
[data-theme="light"] .feature-card::after {
  background:linear-gradient(135deg, rgba(45,139,105,0.3), rgba(45,139,105,0), rgba(255,216,138,0.2));
}

[data-theme="light"] .chat-window { background:var(--bg-3); }
[data-theme="light"] .chat-bubble--ai { background:var(--bg-2); }
[data-theme="light"] .workflow-step.is-active { background:var(--bg-2); }
[data-theme="light"] .pricing-card:not(.pricing-card--featured) { background:var(--bg-3); }
[data-theme="light"] .faq-item { background:var(--bg-3); }

/* ── COUNTER NUMBERS ──────────────────────────────────────── */
.counter { display:inline-block; }

/* ── STATS GRID ───────────────────────────────────────────── */
.stats-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--border);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
}

.stat-cell {
  background:var(--bg-2);
  padding:36px 32px;
  text-align:center;
  position:relative;
  transition:background 0.3s;
  overflow:hidden;
}

.stat-cell::after {
  content:"";
  position:absolute;
  bottom:0; left:20%; right:20%; height:2px;
  background:linear-gradient(to right, transparent, var(--mint-bright), transparent);
  opacity:0;
  transition:opacity 0.4s;
}

.stat-cell:hover { background:var(--bg-3); }
.stat-cell:hover::after { opacity:1; }

.stat-number {
  font-family:var(--font-display);
  font-weight:800;
  font-size:3rem;
  letter-spacing:-0.04em;
  line-height:1;
  margin-bottom:8px;
  background:linear-gradient(135deg, var(--mint), var(--mint-bright));
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
}

.stat-label { font-size:0.82rem; color:var(--ink-3); font-weight:600; letter-spacing:0.02em; }

@media (max-width:768px) {
  .stats-grid { grid-template-columns:repeat(2,1fr); }
}

/* Highlight text */
.text-mint { color:var(--mint); }
.text-gold { color:var(--gold); }
.text-gradient {
  background:linear-gradient(135deg, var(--mint) 0%, var(--mint-bright) 50%, var(--gold) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
  background-size:200%;
  animation:gradient-shift 4s ease infinite;
}

/* Final mobile overrides must live after late base blocks (stats/light tweaks).
   They also disable the fixed grain overlay on mobile; Chromium can composite that
   blend layer as white over lower tiles in very tall full-page screenshots. */
@media (max-width:768px) {
  body::after { display:none; }
  html,
  body {
    background:var(--bg);
    min-height:100%;
  }

  .stats-grid { grid-template-columns:repeat(2,1fr); }
  .stat-cell { padding:20px 16px; }
  .stat-number { font-size:2rem; }
  .stat-label { font-size:0.75rem; }

  .pricing-section,
  .faq-section,
  .cta-section,
  .site-footer {
    position:relative;
    z-index:0;
  }
}

@media (max-width:480px) {
  .stat-cell { padding:16px 12px; }
  .stat-number { font-size:1.7rem; }
}

/* ── TYPOGRAPHY REFRESH: MINIMALIST PRODUCT SANS ─────────────
   Manrope is self-hosted and verified for EN + Vietnamese diacritics.
   These late overrides retire the old editorial serif feel without
   requiring new font assets or external font providers. */
html { font-synthesis-weight:none; }
body { letter-spacing:-0.006em; }

.brand-name,
.footer-brand-name {
  letter-spacing:-0.015em;
}

.hero-h1,
.section-h2,
.cta-h2,
.page-hero-h1,
.four-oh-four-num,
.page-404-title {
  letter-spacing:-0.05em;
  line-height:1.06;
}

.section-h2,
.cta-h2,
.page-hero-h1 {
  letter-spacing:-0.04em;
}

.feature-card-title,
.workflow-step-title,
.trust-item-title,
.prose-section h2,
.prose-section h3,
.support-contact h3 {
  letter-spacing:-0.018em;
  line-height:1.2;
}

.section-h2 em,
.cta-h2 em,
.page-hero-h1 em {
  font-style:normal;
}

.eyebrow,
.hero-eyebrow,
.pricing-tier,
.pricing-badge,
.appstore-badge-sub,
.footer-col-title {
  letter-spacing:0.075em;
}

.pricing-price,
.stat-number,
.workflow-step-num,
.trust-item-num,
.four-oh-four-num {
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}

:lang(vi) .hero-h1,
:lang(vi) .section-h2,
:lang(vi) .cta-h2,
:lang(vi) .page-hero-h1 {
  letter-spacing:-0.025em;
  line-height:1.12;
}

:lang(vi) .eyebrow,
:lang(vi) .hero-eyebrow,
:lang(vi) .pricing-tier,
:lang(vi) .pricing-badge,
:lang(vi) .footer-col-title {
  letter-spacing:0.055em;
}

/* ── ICONOGRAPHY: monoline SVG icon family ────────────────────
   One icon family for chrome (proof pills, marquee, feature cards,
   footer). Strokes inherit from currentColor so each surface tints
   the icon to its own palette. Emoji is reserved for chat content. */

.gicon {
  display: inline-block;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.gicon--lg { width: 22px; height: 22px; }
.gicon--xl { width: 28px; height: 28px; }

/* Slim, mint-tinted variant for hero proof pills and marquee */
.feature-card-icon .gicon { width: 28px; height: 28px; color: var(--mint); }

/* Icon definitions — Heroicons-style outline, 1.5px, 24x24 viewbox */
.gicon--lock {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2.5'/><path d='M8 10V7a4 4 0 1 1 8 0v3'/><circle cx='12' cy='15.5' r='1.2' fill='%23000' stroke='none'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='4' y='10' width='16' height='11' rx='2.5'/><path d='M8 10V7a4 4 0 1 1 8 0v3'/><circle cx='12' cy='15.5' r='1.2' fill='%23000' stroke='none'/></svg>");
}
.gicon--chat {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H10l-4 4v-4H7a3 3 0 0 1-3-3V7Z'/><path d='M8.5 10h7M8.5 13h4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 7a3 3 0 0 1 3-3h10a3 3 0 0 1 3 3v7a3 3 0 0 1-3 3H10l-4 4v-4H7a3 3 0 0 1-3-3V7Z'/><path d='M8.5 10h7M8.5 13h4'/></svg>");
}
.gicon--globe {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c2.8 3.2 2.8 14 0 18c-2.8-3.8-2.8-14.8 0-18Z'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><path d='M3 12h18'/><path d='M12 3c2.8 3.2 2.8 14 0 18c-2.8-3.8-2.8-14.8 0-18Z'/></svg>");
}
.gicon--export {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v12'/><path d='m7 9 5-5 5 5'/><path d='M5 18v1.5A1.5 1.5 0 0 0 6.5 21h11A1.5 1.5 0 0 0 19 19.5V18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v12'/><path d='m7 9 5-5 5 5'/><path d='M5 18v1.5A1.5 1.5 0 0 0 6.5 21h11A1.5 1.5 0 0 0 19 19.5V18'/></svg>");
}
.gicon--offline {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8.5C5 6 8.4 4.7 12 4.7c3.6 0 7 1.3 10 3.8'/><path d='M5.5 12c2-1.6 4.2-2.5 6.5-2.5'/><path d='M14 11.5c1.4.4 2.7 1 3.7 1.8'/><path d='M9 15.5c.9-.6 1.9-1 3-1'/><circle cx='12' cy='18.7' r='1.2' fill='%23000' stroke='none'/><path d='M3 3l18 18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M2 8.5C5 6 8.4 4.7 12 4.7c3.6 0 7 1.3 10 3.8'/><path d='M5.5 12c2-1.6 4.2-2.5 6.5-2.5'/><path d='M14 11.5c1.4.4 2.7 1 3.7 1.8'/><path d='M9 15.5c.9-.6 1.9-1 3-1'/><circle cx='12' cy='18.7' r='1.2' fill='%23000' stroke='none'/><path d='M3 3l18 18'/></svg>");
}
.gicon--sparkle {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v4M12 17v4M3 12h4M17 12h4'/><path d='M5.6 5.6 8 8M16 16l2.4 2.4M5.6 18.4 8 16M16 8l2.4-2.4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v4M12 17v4M3 12h4M17 12h4'/><path d='M5.6 5.6 8 8M16 16l2.4 2.4M5.6 18.4 8 16M16 8l2.4-2.4'/></svg>");
}
.gicon--shield {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4 6v6c0 4.5 3.4 8.4 8 9c4.6-.6 8-4.5 8-9V6l-8-3Z'/><path d='m9 12 2 2 4-4'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3 4 6v6c0 4.5 3.4 8.4 8 9c4.6-.6 8-4.5 8-9V6l-8-3Z'/><path d='m9 12 2 2 4-4'/></svg>");
}
.gicon--bank {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10 12 4l9 6'/><path d='M5 10v8M9 10v8M15 10v8M19 10v8'/><path d='M3 20h18'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 10 12 4l9 6'/><path d='M5 10v8M9 10v8M15 10v8M19 10v8'/><path d='M3 20h18'/></svg>");
}
.gicon--eye-off {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3 21 21'/><path d='M7 7C4.5 8.5 3 11 3 12c1.5 3 5 6 9 6c1.5 0 2.9-.4 4.2-1'/><path d='M10.6 5.1A9.3 9.3 0 0 1 12 5c4 0 7.5 3 9 6c-.5 1-1.4 2.2-2.6 3.2'/><path d='M9.5 9.5a3.5 3.5 0 0 0 4.9 4.9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 3 21 21'/><path d='M7 7C4.5 8.5 3 11 3 12c1.5 3 5 6 9 6c1.5 0 2.9-.4 4.2-1'/><path d='M10.6 5.1A9.3 9.3 0 0 1 12 5c4 0 7.5 3 9 6c-.5 1-1.4 2.2-2.6 3.2'/><path d='M9.5 9.5a3.5 3.5 0 0 0 4.9 4.9'/></svg>");
}
.gicon--phone {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.5'/><path d='M11 18.5h2'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='6.5' y='2.5' width='11' height='19' rx='2.5'/><path d='M11 18.5h2'/></svg>");
}
.gicon--chart-bar {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V12'/><path d='M10 20V8'/><path d='M16 20V14'/><path d='M22 20V4'/><path d='M3 20h19'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20V12'/><path d='M10 20V8'/><path d='M16 20V14'/><path d='M22 20V4'/><path d='M3 20h19'/></svg>");
}
.gicon--chart-line {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 19h18'/><path d='M4 16l5-6 4 3 7-9'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 19h18'/><path d='M4 16l5-6 4 3 7-9'/></svg>");
}
.gicon--scan {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8V6a2 2 0 0 1 2-2h2'/><path d='M16 4h2a2 2 0 0 1 2 2v2'/><path d='M20 16v2a2 2 0 0 1-2 2h-2'/><path d='M8 20H6a2 2 0 0 1-2-2v-2'/><path d='M7 12h10'/></svg>");
          mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M4 8V6a2 2 0 0 1 2-2h2'/><path d='M16 4h2a2 2 0 0 1 2 2v2'/><path d='M20 16v2a2 2 0 0 1-2 2h-2'/><path d='M8 20H6a2 2 0 0 1-2-2v-2'/><path d='M7 12h10'/></svg>");
}

/* Hero proof pills tint icon mint */
.hero-proof-item .gicon { color: var(--mint); }
[data-theme="light"] .hero-proof-item .gicon { color: var(--mint-deep); }

/* Marquee tint icon mint, soft */
.marquee-item .gicon { color: var(--mint); width: 14px; height: 14px; }
[data-theme="light"] .marquee-item .gicon { color: var(--mint-deep); }

/* Feature card icon container — keep current chip but center the SVG */
.feature-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── SECTION RHYTHM: vary the eyebrow ornament ───────────────
   Six identical eyebrow rules in a row reads as repetition.
   Drop the side lines on sections that lead with strong copy. */
.privacy-section .eyebrow::before,
.privacy-section .eyebrow::after,
.faq-section .eyebrow::before,
.faq-section .eyebrow::after,
.cta-section .eyebrow::before,
.cta-section .eyebrow::after { content: none; }

.privacy-section .eyebrow,
.faq-section .eyebrow,
.cta-section .eyebrow { gap: 0; }

/* Section dividers — used between content shifts to give the page
   a chapter rhythm without adding hard rules everywhere. */
.section + .section-divider,
.section-divider + .section { margin-top: 0; }