/* ============================================
   INTIMO - "Ocean Calm" Design System
   Blue palette matching the app's primary theme.
   Volumetric depth, layered shadows, glass effects.
   ============================================ */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Ocean Calm blue palette — from the app */
  --color-bg: #f7fbff;
  --color-surface: #ffffff;
  --color-surface-tint: #f9fdff;
  --color-text: #0f172a;
  --color-text-secondary: #44566f;
  --color-text-muted: #7b8fa6;
  --color-primary: #3a7bd5;
  --color-primary-dark: #2a65b8;
  --color-primary-deeper: #1d4f94;
  --color-primary-light: #eef6ff;
  --color-primary-glow: rgba(58, 123, 213, 0.18);
  --color-accent: #5b9bd5;
  --color-accent-light: #e8f0fa;
  --color-border: #d5e5f7;
  --color-border-light: #e8f0fa;
  --color-footer-bg: #0f172a;
  --color-footer-text: #94a3b8;

  /* Gradients */
  --gradient-hero: linear-gradient(160deg, #ffffff 0%, #eef6ff 35%, #e8f0fa 60%, #f0eef8 85%, #f7fbff 100%);
  --gradient-button: linear-gradient(135deg, #4a8de0, #2a65b8);
  --gradient-button-hover: linear-gradient(135deg, #5a9bef, #3a75c8);
  --gradient-glow-1: radial-gradient(circle, rgba(58, 123, 213, 0.14) 0%, transparent 70%);
  --gradient-glow-2: radial-gradient(circle, rgba(91, 155, 213, 0.10) 0%, transparent 70%);
  --gradient-glow-3: radial-gradient(circle, rgba(100, 120, 200, 0.08) 0%, transparent 70%);
  --gradient-card: linear-gradient(180deg, #ffffff 0%, #f9fdff 100%);
  --gradient-shine: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 60%);

  /* Layered shadows */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 2px 6px rgba(58, 123, 213, 0.04);
  --shadow-md:
    0 2px 4px rgba(15, 23, 42, 0.03),
    0 6px 16px rgba(58, 123, 213, 0.06),
    0 12px 32px rgba(15, 23, 42, 0.03);
  --shadow-lg:
    0 4px 8px rgba(15, 23, 42, 0.03),
    0 12px 28px rgba(58, 123, 213, 0.08),
    0 24px 56px rgba(15, 23, 42, 0.04);
  --shadow-xl:
    0 8px 16px rgba(15, 23, 42, 0.04),
    0 20px 40px rgba(58, 123, 213, 0.10),
    0 40px 80px rgba(15, 23, 42, 0.06);
  --shadow-button:
    0 2px 4px rgba(42, 101, 184, 0.2),
    0 6px 20px rgba(58, 123, 213, 0.25);
  --shadow-button-hover:
    0 4px 8px rgba(42, 101, 184, 0.2),
    0 10px 32px rgba(58, 123, 213, 0.3),
    0 20px 48px rgba(42, 101, 184, 0.1);
  --shadow-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.6);
  --shadow-inset-border: inset 0 0 0 1px rgba(255, 255, 255, 0.5);

  /* Design tokens */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --max-width: 780px;
  --max-width-wide: 1080px;
  --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-smooth: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background-color: var(--color-bg);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

::selection {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

h1, h2, h3 {
  font-family: var(--font-display);
}

/* Skip navigation (accessibility) */
.skip-nav {
  position: absolute;
  top: -100px;
  left: 16px;
  background: var(--color-primary);
  color: #fff;
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  font-size: 0.9rem;
  z-index: 10001;
  text-decoration: none;
  transition: top 0.2s;
}
.skip-nav:focus {
  top: 8px;
}

/* Focus-visible styles */
a:focus-visible,
button:focus-visible,
[data-demo]:focus-visible,
textarea:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition: opacity 0.5s ease, transform 0.5s ease;
  will-change: opacity, transform;
}
.reveal.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.site-header.scrolled {
  background: #faf8f5;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.8),
    0 4px 16px rgba(15, 23, 42, 0.06);
}

.header-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  padding: 0 32px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: -0.01em;
  transition: opacity var(--transition-fast);
}

.logo:hover { opacity: 0.8; }

.logo-mark {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow:
    0 2px 6px rgba(42, 101, 184, 0.3),
    var(--shadow-inset-highlight);
}

.logo-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.nav-links {
  display: flex;
  gap: 4px;
  list-style: none;
}

.nav-links a {
  display: inline-block;
  padding: 8px 18px;
  text-decoration: none;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
  position: relative;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 20px;
  height: 2px;
  background: var(--color-primary);
  border-radius: 1px;
  transition: transform var(--transition-smooth);
}

.nav-links a:hover {
  color: var(--color-primary);
  background: var(--color-primary-light);
  box-shadow: var(--shadow-xs);
}

.nav-links a.active { color: var(--color-primary); }
.nav-links a.active::after { transform: translateX(-50%) scaleX(1); }

/* Language switcher */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 8px;
  padding: 3px;
  background: rgba(15, 23, 42, 0.04);
  border-radius: 999px;
  border: 1px solid var(--color-border);
}

.lang-switch a {
  display: inline-block;
  padding: 4px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text-muted);
  border-radius: 999px;
  letter-spacing: 0.03em;
  transition: all var(--transition-fast);
}

.lang-switch a.active {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 4px rgba(58, 123, 213, 0.3);
}

.lang-switch a:hover:not(.active) {
  color: var(--color-text);
}

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  color: var(--color-text);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.menu-toggle:hover { background: var(--color-primary-light); }
.menu-toggle svg { width: 22px; height: 22px; }

main { flex: 1; }

/* ============================================
   HERO
   ============================================ */

.hero {
  position: relative;
  padding: 48px 32px 44px;
  text-align: center;
  background: #0f172a;
  overflow: hidden;
}

/* Blurred photo background behind gradient */
.hero-bg-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero-bg-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
}

/* Connection rings */
.connection-symbol {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  height: 60px;
}

.ring {
  display: block;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2.5px solid transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: ringPulse 4s ease-in-out infinite;
}

.ring-1 {
  border-color: var(--color-primary);
  left: calc(50% - 38px);
  opacity: 0.6;
  box-shadow: 0 0 20px rgba(58, 123, 213, 0.15);
}

.ring-2 {
  border-color: var(--color-accent);
  left: calc(50% - 18px);
  opacity: 0.6;
  animation-delay: 0.6s;
  box-shadow: 0 0 20px rgba(91, 155, 213, 0.12);
}

@keyframes ringPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.6; }
  50% { transform: translateY(-50%) scale(1.08); opacity: 0.9; }
}

.hero-inner {
  max-width: 680px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 44px 48px 40px;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.04),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.hero-badge {
  display: inline-block;
  padding: 6px 16px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-primary);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.hero h1 {
  font-size: 2.8rem;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.035em;
  color: var(--color-text);
  margin-bottom: 18px;
}

.hero h1 .em {
  background: var(--gradient-button);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ============================================
   BUTTONS — volumetric depth
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  border-radius: var(--radius-md);
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-smooth),
    background var(--transition-fast);
  cursor: pointer;
  border: none;
  letter-spacing: -0.01em;
  position: relative;
}

.btn:active { transform: scale(0.97) translateY(1px); }

.btn-primary {
  background: var(--gradient-button);
  color: #fff;
  box-shadow: var(--shadow-button);
}

/* Inner highlight for 3D effect */
.btn-primary::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(180deg, rgba(255,255,255,0.18) 0%, transparent 50%);
  pointer-events: none;
}

.btn-primary:hover {
  background: var(--gradient-button-hover);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-3px);
}

.btn-outline {
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm), var(--shadow-inset-highlight);
  backdrop-filter: blur(12px);
}

.btn-outline:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* ============================================
   TRUST STRIP
   ============================================ */

.trust-strip {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 28px 32px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 -8px 24px rgba(15, 23, 42, 0.06);
}

.trust-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.trust-icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
}

/* ============================================
   HOW IT WORKS
   ============================================ */

.how-it-works {
  padding: 40px 32px 120px;
  background: var(--color-footer-bg);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Bottom fade: dark → light, tall zone to fully dissolve */
.how-it-works::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(247, 251, 255, 0.02) 8%,
    rgba(247, 251, 255, 0.06) 16%,
    rgba(247, 251, 255, 0.12) 24%,
    rgba(247, 251, 255, 0.20) 32%,
    rgba(247, 251, 255, 0.32) 40%,
    rgba(247, 251, 255, 0.45) 50%,
    rgba(247, 251, 255, 0.60) 60%,
    rgba(247, 251, 255, 0.75) 70%,
    rgba(247, 251, 255, 0.87) 80%,
    rgba(247, 251, 255, 0.95) 90%,
    var(--color-bg) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* Ambient glow */
.how-it-works::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(58, 123, 213, 0.12) 0%, transparent 65%);
  border-radius: 50%;
  top: -180px;
  left: -120px;
  pointer-events: none;
}

.how-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 56px;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.section-header p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 520px;
  margin: 0 auto;
}

/* Dark variant overrides */
.how-it-works .section-header p {
  color: var(--color-footer-text);
}

.steps-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
}

.steps-grid::before {
  content: '';
  position: absolute;
  top: 28px;
  left: 16%;
  right: 16%;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 0%, rgba(58, 123, 213, 0.3) 50%, rgba(255,255,255,0.06) 100%);
  z-index: 0;
}

.step-card {
  text-align: center;
  position: relative;
  z-index: 1;
}

.step-number {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-footer-bg);
  border: 2px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--color-primary);
  transition: all var(--transition-smooth);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  position: relative;
  z-index: 1;
}

.step-card:hover .step-number {
  background: var(--gradient-button);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-button);
  transform: scale(1.08);
}

.step-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.02em;
  color: #fff;
}

.step-card p {
  font-size: 0.9rem;
  color: var(--color-footer-text);
  line-height: 1.6;
  max-width: 280px;
  margin: 0 auto;
}

/* ============================================
   FEATURES — elevated glass cards
   ============================================ */

.features {
  padding: 80px 32px;
}

.features-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.features-header {
  text-align: center;
  margin-bottom: 56px;
}

.features-header h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 12px;
}

.features-header p {
  font-size: 1.05rem;
  color: var(--color-text-secondary);
  max-width: 500px;
  margin: 0 auto;
}

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

.feature-card {
  border: 1.5px solid rgba(58, 123, 213, 0.15);
  border-radius: var(--radius-lg);
  padding: 36px 30px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth),
    border-color var(--transition-smooth);
}

/* Gradient accent line on hover */
.feature-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--gradient-button);
  opacity: 0;
  transition: opacity var(--transition-smooth);
}

.feature-card:hover {
  transform: translateY(-6px);
  border-color: rgba(58, 123, 213, 0.3);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

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

/* Per-card accent tint in bottom corner */
/* Desire Bank - green */
.feature-card[data-demo="swipe"] {
  background: linear-gradient(160deg, #ffffff 0%, #fcfefc 50%, #f7fbf7 100%);
}
/* Activity Planner - blue */
.feature-card[data-demo="planner"] {
  background: linear-gradient(160deg, #ffffff 0%, #fcfdff 50%, #f6f9fe 100%);
}
/* Daily Intimacy - violet */
.feature-card[data-demo="daily"] {
  background: linear-gradient(160deg, #ffffff 0%, #fcfbff 50%, #f8f6fe 100%);
}
/* Emotional Barometer - green */
.feature-card[data-demo="barometer"] {
  background: linear-gradient(160deg, #ffffff 0%, #fcfefc 50%, #f7fbf7 100%);
}
/* Deep Connection - blue */
.feature-card[data-demo="questions"] {
  background: linear-gradient(160deg, #ffffff 0%, #fbfdff 50%, #f5f9fd 100%);
}
/* Cycle Tracker - rose */
.feature-card[data-demo="cycle"] {
  background: linear-gradient(160deg, #ffffff 0%, #fffcfc 50%, #fef7f8 100%);
}

.feature-icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 1.35rem;
  position: relative;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.8) inset,
    0 -1px 0 rgba(0, 0, 0, 0.04) inset;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.feature-icon-blue { background: linear-gradient(180deg, #f0f7ff, #dceafc); }
.feature-icon-sky { background: linear-gradient(180deg, #f0f6fc, #dbe8f5); }
.feature-icon-violet { background: linear-gradient(180deg, #f4f0ff, #e6dff8); }
.feature-icon-green { background: linear-gradient(180deg, #f0f8ef, #ddefda); }
.feature-icon-teal { background: linear-gradient(180deg, #edf7f5, #d9efeb); }
.feature-icon-rose { background: linear-gradient(180deg, #fef0f2, #fcdde2); }

.feature-card h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 10px;
  letter-spacing: -0.02em;
}

.feature-card p {
  font-size: 0.9rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

/* Demo badge on interactive feature cards */
.feature-card[data-demo] {
  position: relative;
}

.demo-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 5px 14px 5px 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #fff;
  background: linear-gradient(135deg, #4a8de0, #2a65b8);
  border-radius: 999px;
  box-shadow:
    0 3px 10px rgba(42, 101, 184, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: transform 0.2s, box-shadow 0.2s;
}

/* Play triangle inside badge */
.demo-badge::before {
  content: '';
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #fff;
  flex-shrink: 0;
}

/* Hover glow on card */
.feature-card[data-demo]:hover .demo-badge {
  transform: scale(1.08);
  box-shadow:
    0 4px 14px rgba(42, 101, 184, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Attention blink — 3 pulses then stops */
.demo-badge {
  animation: badgeBlink 0.6s ease-in-out 3;
  animation-delay: 1.5s;
  animation-fill-mode: both;
}

/* Re-trigger blink when card scrolls into view */
.feature-card.visible .demo-badge {
  animation: badgeBlink 0.6s ease-in-out 3;
  animation-fill-mode: both;
}

@keyframes badgeBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.12); }
}

/* Feature demo prompt */
.demo-prompt-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: demoPromptIn 0.3s ease;
}

@keyframes demoPromptIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.demo-prompt {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: var(--shadow-xl);
  animation: demoPromptCard 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes demoPromptCard {
  from { opacity: 0; transform: translateY(16px) scale(0.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.demo-prompt h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  margin-bottom: 8px;
  color: var(--color-text);
}

.demo-prompt p {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  margin-bottom: 24px;
  line-height: 1.5;
}

.demo-prompt-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.demo-prompt-btn {
  padding: 12px 28px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.demo-prompt-btn.primary {
  background: var(--gradient-button);
  color: #fff;
  box-shadow: var(--shadow-button);
}

.demo-prompt-btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-button-hover);
}

.demo-prompt-btn.secondary {
  background: var(--color-primary-light);
  color: var(--color-text-secondary);
}

.demo-prompt-btn.secondary:hover {
  background: var(--color-border-light);
}

/* Try-it badge replica in post-demo message */
.demo-tryit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px 4px 9px;
  background: linear-gradient(135deg, #4a8de0, #2a65b8);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 999px;
  box-shadow: 0 3px 10px rgba(42, 101, 184, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.2);
  vertical-align: middle;
}

.demo-tryit-play {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 7px;
  border-color: transparent transparent transparent #fff;
  flex-shrink: 0;
}

/* "Got it" button - green */
.demo-prompt-btn.gotit {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #fff;
  box-shadow: 0 4px 16px rgba(34, 197, 94, 0.3);
}

.demo-prompt-btn.gotit:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(34, 197, 94, 0.4);
}

/* ============================================
   SOCIAL PROOF — testimonials
   ============================================ */

.social-proof {
  padding: 72px 32px;
  background: var(--color-bg);
}

.social-proof-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

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

.testimonial-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  position: relative;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

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

.testimonial-quote {
  font-size: 0.94rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin-bottom: 20px;
  position: relative;
  padding-left: 20px;
}

.testimonial-quote::before {
  content: '\201C';
  position: absolute;
  left: 0;
  top: -4px;
  font-size: 2rem;
  font-family: var(--font-display);
  color: var(--color-primary);
  opacity: 0.3;
  line-height: 1;
}

.testimonial-author {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  font-weight: 500;
}

@media (max-width: 768px) {
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .social-proof {
    padding: 56px 20px;
  }
}

/* ============================================
   VISUAL BREAK — atmospheric photo band
   ============================================ */

.visual-break {
  position: relative;
  height: 360px;
  overflow: hidden;
}

.visual-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
}

/* Top + bottom gradient fades into surrounding sections */
/* Default: light top → dark bottom (before dark section) */
.visual-break::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      var(--color-bg) 0%,
      rgba(247, 251, 255, 0.7) 8%,
      rgba(247, 251, 255, 0.35) 20%,
      rgba(247, 251, 255, 0.12) 32%,
      rgba(15, 23, 42, 0.05) 44%,
      rgba(15, 23, 42, 0.15) 56%,
      rgba(15, 23, 42, 0.32) 68%,
      rgba(15, 23, 42, 0.52) 80%,
      rgba(15, 23, 42, 0.72) 90%,
      var(--color-footer-bg) 100%
    );
  z-index: 1;
  pointer-events: none;
}

/* Light variant: both sides fade to light bg */
.visual-break--light::before {
  background:
    linear-gradient(180deg,
      var(--color-bg) 0%,
      rgba(247, 251, 255, 0.6) 10%,
      rgba(247, 251, 255, 0.2) 25%,
      rgba(15, 23, 42, 0.08) 40%,
      rgba(15, 23, 42, 0.14) 50%,
      rgba(15, 23, 42, 0.08) 60%,
      rgba(247, 251, 255, 0.2) 75%,
      rgba(247, 251, 255, 0.6) 90%,
      var(--color-bg) 100%
    );
}

.visual-break-text {
  position: absolute;
  bottom: 40px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  color: #fff;
}

.visual-break-text p {
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
  max-width: 500px;
  margin: 0 auto;
  line-height: 1.5;
}

.visual-break-text span {
  display: block;
  font-size: 0.82rem;
  font-weight: 500;
  opacity: 0.7;
  margin-top: 6px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================
   TRINITY SPOTLIGHT — dark volumetric
   ============================================ */

.spotlight {
  padding: 96px 32px;
  background: var(--color-footer-bg);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.spotlight::before {
  content: '';
  position: absolute;
  width: 650px;
  height: 650px;
  background: radial-gradient(circle, rgba(58, 123, 213, 0.15) 0%, transparent 65%);
  border-radius: 50%;
  top: -250px;
  right: -180px;
  pointer-events: none;
}

.spotlight::after {
  content: '';
  position: absolute;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(91, 155, 213, 0.08) 0%, transparent 65%);
  border-radius: 50%;
  bottom: -180px;
  left: -120px;
  pointer-events: none;
}

.spotlight-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.spotlight-content h2 {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
  line-height: 1.2;
}

.spotlight-content h2 .em {
  background: var(--gradient-button);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.spotlight-content p {
  color: var(--color-footer-text);
  font-size: 1rem;
  line-height: 1.75;
  margin-bottom: 16px;
}

.spotlight-visual {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.trinity-bubble {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  font-size: 0.92rem;
  line-height: 1.65;
  color: var(--color-footer-text);
  position: relative;
  backdrop-filter: blur(12px);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.trinity-bubble::before {
  content: 'Trinity';
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary);
  margin-bottom: 10px;
}

.trinity-bubble-highlight {
  background: rgba(58, 123, 213, 0.08);
  border-color: rgba(58, 123, 213, 0.2);
  box-shadow:
    0 4px 16px rgba(0, 0, 0, 0.15),
    0 0 40px rgba(58, 123, 213, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.trinity-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.trinity-tag {
  display: inline-block;
  padding: 5px 14px;
  font-size: 0.72rem;
  font-weight: 600;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--color-footer-text);
  letter-spacing: 0.03em;
  background: rgba(255, 255, 255, 0.03);
}

/* ============================================
   PRIVACY SECTION
   ============================================ */

.privacy-section {
  padding: 80px 32px;
}

.privacy-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
}

.privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.privacy-card {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition:
    transform var(--transition-smooth),
    box-shadow var(--transition-smooth);
}

/* Inner glow */
.privacy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.8), transparent);
}

.privacy-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

.privacy-card-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--color-primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: var(--shadow-xs);
}

.privacy-card h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}

.privacy-card p {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

/* ============================================
   PRICING SECTION
   ============================================ */

.pricing {
  padding: 80px 32px 100px;
  background: var(--color-footer-bg);
  color: #fff;
  position: relative;
  overflow: hidden;
}

/* Top fade light→dark */
.pricing::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(180deg,
    var(--color-bg) 0%,
    rgba(247, 251, 255, 0.95) 8%,
    rgba(247, 251, 255, 0.87) 16%,
    rgba(247, 251, 255, 0.75) 24%,
    rgba(247, 251, 255, 0.60) 34%,
    rgba(247, 251, 255, 0.45) 44%,
    rgba(247, 251, 255, 0.32) 54%,
    rgba(247, 251, 255, 0.20) 64%,
    rgba(247, 251, 255, 0.10) 76%,
    rgba(247, 251, 255, 0.03) 88%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Bottom fade dark→lighter */
.pricing::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 100px;
  background: linear-gradient(180deg, transparent 0%, rgba(15,23,42,0.5) 100%);
  pointer-events: none;
  z-index: 1;
}

.pricing-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.pricing .section-header h2 {
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.pricing .section-header p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.12rem;
  max-width: 560px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.3);
}

/* Toggle switch */
.pricing-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 48px;
}

.pricing-toggle-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-footer-text);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.pricing-toggle-label.active { color: #fff; font-weight: 600; }

.pricing-toggle-switch {
  width: 48px;
  height: 26px;
  border-radius: 13px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  position: relative;
  transition: background var(--transition-fast);
}

.pricing-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
  transition: transform var(--transition-fast);
}

.pricing-toggle-switch.yearly::after {
  transform: translateX(22px);
}

.pricing-toggle-switch.yearly {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.pricing-save {
  font-size: 11px;
  font-weight: 700;
  color: #10B981;
  background: rgba(16,185,129,0.12);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

/* Cards grid */
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 32px;
}

/* Card base */
.pricing-card {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  backdrop-filter: blur(16px);
  position: relative;
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}

/* Popular card highlight */
.pricing-card.popular {
  background: rgba(58,123,213,0.08);
  border-color: rgba(58,123,213,0.3);
  box-shadow: 0 0 40px rgba(58,123,213,0.08);
}

.pricing-card.popular::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: var(--gradient-button);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.pricing-popular-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 18px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  background: var(--gradient-button);
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(42,101,184,0.35);
}

.pricing-plan-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-footer-text);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 4px;
}

.pricing-price-amount {
  font-size: 40px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-display);
  line-height: 1;
}

.pricing-price-period {
  font-size: 14px;
  color: var(--color-footer-text);
  font-weight: 500;
}

.pricing-price-yearly {
  font-size: 13px;
  color: var(--color-footer-text);
  margin-bottom: 24px;
  min-height: 20px;
}

.pricing-divider {
  height: 1px;
  background: rgba(255,255,255,0.08);
  margin-bottom: 24px;
}

.pricing-includes {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-footer-text);
  margin-bottom: 16px;
}

.pricing-card.popular .pricing-includes {
  color: #5b9bd5;
  font-size: 14px;
  font-weight: 700;
  padding: 8px 14px;
  background: rgba(58, 123, 213, 0.08);
  border-radius: 8px;
  border-left: 3px solid #3a7bd5;
}

/* Feature list */
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
}

.pricing-features li svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
}

.pricing-check { color: #10B981; }
.pricing-card.popular .pricing-check { color: #5b9bd5; }

/* CTA button */
.pricing-cta {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  cursor: default;
  text-align: center;
  letter-spacing: 0.02em;
}

.pricing-cta.soon {
  background: rgba(255,255,255,0.08);
  color: var(--color-footer-text);
  border: 1px solid rgba(255,255,255,0.1);
}

.pricing-card.popular .pricing-cta.soon {
  background: rgba(58,123,213,0.15);
  color: #5b9bd5;
  border-color: rgba(58,123,213,0.25);
}

.pricing-cta.notify {
  background: rgba(255,255,255,0.1);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.15);
  text-decoration: none;
  display: block;
  width: 100%;
  cursor: pointer;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.pricing-cta.notify:hover {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.3);
}

.pricing-card.popular .pricing-cta.notify {
  background: var(--gradient-button);
  color: #fff;
  border: none;
  box-shadow: 0 4px 16px rgba(42,101,184,0.3);
}

.pricing-card.popular .pricing-cta.notify:hover {
  box-shadow: 0 6px 24px rgba(42,101,184,0.4);
}

/* Free note */
.pricing-free-note {
  text-align: center;
  font-size: 13px;
  color: var(--color-footer-text);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

.pricing-free-note strong {
  color: #fff;
  font-weight: 600;
}


/* Feature descriptions inside list items */
.pricing-features li small {
  display: block;
  font-size: 12px;
  color: rgba(255,255,255,0.45);
  margin-top: 2px;
  line-height: 1.4;
}

/* Price analogy */
.pricing-analogy {
  text-align: center;
  font-size: 13px;
  color: rgba(255,255,255,0.5);
  margin-top: 16px;
  line-height: 1.5;
}

.pricing-analogy strong {
  color: rgba(255,255,255,0.75);
  font-weight: 600;
}

/* Discount perk line */
.perk-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 14px;
  padding: 6px 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #22c55e;
  letter-spacing: 0.01em;
}

.perk-line svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Dark background variant (beta section) */
.beta-card .perk-line {
  color: #4ade80;
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .pricing { padding: 56px 24px 80px; }
  .pricing-grid { grid-template-columns: 1fr; gap: 32px; }
  .pricing-card { padding: 28px 24px; }
  .pricing-price-amount { font-size: 32px; }
}

/* ============================================
   CTA HERO — image background + glass card
   ============================================ */

.cta-hero {
  position: relative;
  overflow: hidden;
  padding: 80px 32px 72px;
  text-align: center;
}

.cta-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
}

.cta-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      var(--color-bg) 0%,
      rgba(247, 251, 255, 0.92) 4%,
      rgba(247, 251, 255, 0.80) 8%,
      rgba(247, 251, 255, 0.60) 13%,
      rgba(247, 251, 255, 0.38) 18%,
      rgba(247, 251, 255, 0.18) 24%,
      rgba(247, 251, 255, 0.06) 30%,
      rgba(15, 23, 42, 0.06) 36%,
      rgba(15, 23, 42, 0.16) 44%,
      rgba(15, 23, 42, 0.30) 54%,
      rgba(15, 23, 42, 0.45) 64%,
      rgba(15, 23, 42, 0.58) 74%,
      rgba(15, 23, 42, 0.70) 84%,
      rgba(15, 23, 42, 0.80) 100%
    );
  pointer-events: none;
}

.cta-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0 auto;
}

.cta-hero-tagline {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #fff;
  margin-bottom: 28px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 40px rgba(0, 0, 0, 0.3);
}

.cta-card {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(28px) saturate(1.3);
  -webkit-backdrop-filter: blur(28px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-xl);
  padding: 48px 44px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

.cta-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}

.cta-card h2 {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-bottom: 10px;
  color: var(--color-text);
  position: relative;
}

.cta-card p {
  color: var(--color-text-secondary);
  margin-bottom: 28px;
  font-size: 0.95rem;
  position: relative;
}

.cta-card .btn { position: relative; }

/* ============================================
   FAQ ACCORDION
   ============================================ */

.faq-section {
  padding: 80px 32px;
  background: var(--color-bg);
}

.faq-inner {
  max-width: var(--max-width);
  margin: 0 auto;
}

.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: var(--gradient-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.faq-item:hover {
  border-color: rgba(58, 123, 213, 0.3);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--color-primary);
}

.faq-question svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--transition-smooth);
}

.faq-item.open .faq-question svg {
  transform: rotate(45deg);
  color: var(--color-primary);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}

.faq-item.open .faq-answer {
  max-height: 300px;
}

.faq-answer p {
  padding: 0 24px 20px;
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  line-height: 1.65;
}

@media (max-width: 700px) {
  .faq-section {
    padding: 56px 20px;
  }
  .faq-question {
    padding: 16px 20px;
    font-size: 0.95rem;
  }
  .faq-answer p {
    padding: 0 20px 16px;
  }
}

/* ============================================
   POLICY PAGES
   ============================================ */

/* Breadcrumb navigation */
.breadcrumb {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 32px 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb .breadcrumb-sep {
  margin: 0 8px;
  opacity: 0.4;
}

.policy-header {
  padding: 48px 32px 48px;
  text-align: center;
  background: var(--gradient-hero);
  position: relative;
  overflow: hidden;
}

.policy-header::before {
  content: '';
  position: absolute;
  width: 500px;
  height: 500px;
  background: var(--gradient-glow-1);
  border-radius: 50%;
  top: -200px;
  right: -100px;
  pointer-events: none;
}

.policy-header::after {
  content: '';
  position: absolute;
  width: 400px;
  height: 400px;
  background: var(--gradient-glow-2);
  border-radius: 50%;
  bottom: -200px;
  left: -100px;
  pointer-events: none;
}

.policy-header h1 {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}

.policy-meta {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.policy-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 56px 32px 96px;
}

.policy-content h2 {
  font-size: 1.3rem;
  font-weight: 700;
  margin-top: 52px;
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-light);
  letter-spacing: -0.02em;
  color: var(--color-text);
  position: relative;
}

.policy-content h2::before {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 40px;
  height: 2px;
  background: var(--gradient-button);
  border-radius: 1px;
}

.policy-content h2:first-child { margin-top: 0; }

.policy-content h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 32px;
  margin-bottom: 14px;
  color: var(--color-text);
}

.policy-content p {
  margin-bottom: 18px;
  color: var(--color-text-secondary);
  line-height: 1.75;
}

.policy-content ul {
  margin: 0 0 22px 0;
  padding-left: 0;
  list-style: none;
}

.policy-content li {
  margin-bottom: 10px;
  color: var(--color-text-secondary);
  line-height: 1.7;
  padding-left: 24px;
  position: relative;
}

.policy-content li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  opacity: 0.4;
}

.policy-content a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 123, 213, 0.25);
  transition: border-color var(--transition-fast), color var(--transition-fast);
}

.policy-content a:hover {
  color: var(--color-primary-dark);
  border-bottom-color: var(--color-primary-dark);
}

.policy-content .section-intro {
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.8;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 48px 20px;
  margin-top: auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.footer-inner {
  max-width: var(--max-width-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}

.footer-logo {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(42, 101, 184, 0.3);
}

.footer-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.footer-links {
  display: flex;
  gap: 28px;
  list-style: none;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  color: var(--color-footer-text);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  transition: color var(--transition-fast);
}

.footer-links a:hover { color: #fff; }

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .hero {
    padding: 32px 16px 28px;
  }

  .hero-inner {
    padding: 32px 24px 28px;
    border-radius: var(--radius-lg);
  }

  .hero h1 { font-size: 1.7rem; }
  .hero p { font-size: 0.92rem; }

  .connection-symbol { margin-bottom: 20px; height: 52px; }
  .ring { width: 42px; height: 42px; }
  .ring-1 { left: calc(50% - 28px); }
  .ring-2 { left: calc(50% - 12px); }

  .features { padding: 56px 24px; }
  .features-grid { grid-template-columns: 1fr; gap: 16px; }
  .features-header h2 { font-size: 1.6rem; }

  .trust-inner { gap: 24px; }

  .steps-grid { grid-template-columns: 1fr; gap: 28px; }
  .steps-grid::before { display: none; }

  .how-it-works { padding: 32px 24px 150px; }

  .spotlight-inner { grid-template-columns: 1fr; gap: 40px; }
  .visual-break { height: 260px; }
  .visual-break-text p { font-size: 1.1rem; }

  .spotlight { padding: 64px 24px; }
  .spotlight-content h2 { font-size: 1.6rem; }

  .privacy-grid { grid-template-columns: 1fr; }

  .policy-header { padding: 56px 24px 36px; }
  .policy-header h1 { font-size: 1.85rem; }
  .policy-content { padding: 36px 24px 72px; }
  .policy-content h2 { font-size: 1.15rem; margin-top: 40px; }

  .cta-hero { padding: 56px 20px 48px; }
  .cta-card { padding: 32px 24px; }
  .cta-card h2 { font-size: 1.3rem; }

  .footer-inner { flex-direction: column; text-align: center; }

  .menu-toggle { display: block; }

  .nav-links {
    display: none;
    position: absolute;
    top: 68px;
    left: 0;
    right: 0;
    background: rgba(247, 251, 255, 0.97);
    border-bottom: 1px solid var(--color-border);
    flex-direction: column;
    padding: 8px 24px 16px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(24px);
  }

  .nav-links.open { display: flex; }
  .nav-links a { padding: 14px 16px; }
  .nav-links a::after { display: none; }
  .header-inner { position: relative; padding: 0 24px; }
  .lang-switch { margin-left: 0; margin-top: 8px; align-self: center; }
}

@media (max-width: 480px) {
  .hero h1 { font-size: 1.4rem; }

  .hero-inner {
    padding: 28px 20px 24px;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn { justify-content: center; padding: 14px 24px; }

  .trust-inner {
    flex-direction: column;
    gap: 16px;
    align-items: center;
  }

  .features-header h2 { font-size: 1.4rem; }
  .section-header h2 { font-size: 1.4rem; }
}

/* ============================================
   STARS — SVG 4-point stars with glow halos
   3 layers: bright (stars div), medium (::before),
   tiny glows (::after). All inline SVG data URIs.
   ============================================ */

/* Star SVGs as CSS custom properties for reuse */
:root {
  /* Bright 4-point star with glow halo */
  --star-bright: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='a'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.9'/%3E%3Cstop offset='35%25' stop-color='%23ddeeff' stop-opacity='0.25'/%3E%3Cstop offset='100%25' stop-color='%23ddeeff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23a)'/%3E%3Cpath d='M10 2.5L10.7 8.3L16.5 10L10.7 11.7L10 17.5L9.3 11.7L3.5 10L9.3 8.3Z' fill='%23fff' opacity='0.9'/%3E%3C/svg%3E");
  /* Medium 4-point star, subtler */
  --star-medium: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3CradialGradient id='b'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.7'/%3E%3Cstop offset='45%25' stop-color='%23ddeeff' stop-opacity='0.15'/%3E%3Cstop offset='100%25' stop-color='%23ddeeff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='8' cy='8' r='8' fill='url(%23b)'/%3E%3Cpath d='M8 2L8.5 6.8L13 8L8.5 9.2L8 14L7.5 9.2L3 8L7.5 6.8Z' fill='%23fff' opacity='0.75'/%3E%3C/svg%3E");
  /* Tiny soft glow dot */
  --star-tiny: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cdefs%3E%3CradialGradient id='c'%3E%3Cstop offset='0%25' stop-color='%23fff' stop-opacity='0.8'/%3E%3Cstop offset='50%25' stop-color='%23ddeeff' stop-opacity='0.2'/%3E%3Cstop offset='100%25' stop-color='%23ddeeff' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='4' cy='4' r='4' fill='url(%23c)'/%3E%3C/svg%3E");
}

.starfield {
  position: relative;
}

.starfield > .stars {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Layer 1 — bright 4-point stars (14) */
.starfield > .stars {
  background-image:
    var(--star-bright), var(--star-bright), var(--star-bright),
    var(--star-bright), var(--star-bright), var(--star-bright),
    var(--star-bright), var(--star-bright), var(--star-bright),
    var(--star-bright), var(--star-bright), var(--star-bright),
    var(--star-bright), var(--star-bright);
  background-position:
    115px 20px,  580px 15px,   950px 95px,
    50px 140px,  510px 125px,  1000px 130px,
    180px 250px, 680px 270px,  1150px 220px,
    90px 370px,  430px 235px,  820px 380px,
    280px 160px, 750px 155px;
  background-size:
    14px 14px, 16px 16px, 13px 13px,
    11px 11px, 12px 12px, 14px 14px,
    12px 12px, 11px 11px, 12px 12px,
    14px 14px, 15px 15px, 12px 12px,
    15px 15px, 13px 13px;
  background-repeat: no-repeat;
  animation: twinkle1 8s ease-in-out infinite alternate;
}

/* Layer 2 — medium 4-point stars (19) */
.starfield > .stars::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    var(--star-medium), var(--star-medium), var(--star-medium),
    var(--star-medium), var(--star-medium), var(--star-medium),
    var(--star-medium), var(--star-medium), var(--star-medium),
    var(--star-medium), var(--star-medium), var(--star-medium),
    var(--star-medium), var(--star-medium), var(--star-medium),
    var(--star-medium), var(--star-medium), var(--star-medium),
    var(--star-medium);
  background-position:
    200px 35px,  700px 40px,   1200px 55px,
    380px 105px, 840px 110px,  60px 210px,
    530px 220px, 1000px 235px, 160px 310px,
    640px 305px, 1100px 315px, 250px 420px,
    730px 415px, 450px 80px,   960px 95px,
    140px 120px, 600px 135px,  400px 330px,
    980px 435px;
  background-size:
    10px 10px, 11px 11px, 10px 10px,
    11px 11px, 10px 10px, 10px 10px,
    11px 11px, 10px 10px, 9px 9px,
    10px 10px, 9px 9px,   10px 10px,
    9px 9px,   8px 8px,   9px 9px,
    8px 8px,   9px 9px,   8px 8px,
    11px 11px;
  background-repeat: no-repeat;
  animation: twinkle2 11s ease-in-out infinite alternate;
}

/* Layer 3 — tiny glow dots for depth (24) */
.starfield > .stars::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny),
    var(--star-tiny), var(--star-tiny), var(--star-tiny);
  background-position:
    80px 28px,   440px 22px,   790px 30px,
    1130px 42px, 170px 115px,  530px 130px,
    890px 125px, 40px 195px,   420px 210px,
    780px 215px, 1140px 205px, 120px 290px,
    500px 300px, 860px 310px,  200px 390px,
    740px 400px, 260px 55px,   610px 72px,
    950px 62px,  350px 98px,   710px 105px,
    1070px 100px,310px 275px,  690px 280px;
  background-size:
    5px 5px, 6px 6px, 4px 4px,
    6px 6px, 4px 4px, 6px 6px,
    5px 5px, 6px 6px, 4px 4px,
    5px 5px, 5px 5px, 6px 6px,
    4px 4px, 6px 6px, 5px 5px,
    6px 6px, 4px 4px, 5px 5px,
    4px 4px, 5px 5px, 4px 4px,
    4px 4px, 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  animation: twinkle3 14s ease-in-out infinite alternate;
}

@keyframes twinkle1 {
  0%   { opacity: 1; }
  100% { opacity: 0.65; }
}

@keyframes twinkle2 {
  0%   { opacity: 0.75; }
  100% { opacity: 1; }
}

@keyframes twinkle3 {
  0%   { opacity: 0.9; }
  100% { opacity: 0.5; }
}

/* ============================================
   SUBTLE GRAIN TEXTURE
   ============================================ */

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 512px 512px;
}

/* ============================================
   BETA SIGNUP SECTION — premium dark starfield
   ============================================ */

.beta-banner {
  position: relative;
  padding: 72px 32px 72px;
  background: var(--color-footer-bg);
  color: #fff;
  text-align: center;
  overflow: visible;
  margin-bottom: 0;
  z-index: 2;
}

/* Decorative divider: sits on the exact seam, no own background */
.beta-divider {
  position: relative;
  z-index: 3;
  height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* Gradient line */
.beta-divider::before {
  content: '';
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(58, 123, 213, 0.12) 15%,
    rgba(58, 123, 213, 0.3) 35%,
    rgba(91, 155, 213, 0.5) 50%,
    rgba(58, 123, 213, 0.3) 65%,
    rgba(58, 123, 213, 0.12) 85%,
    transparent 100%
  );
}

/* Soft glow behind line */
.beta-divider::after {
  content: '';
  position: absolute;
  top: -6px;
  left: 20%;
  right: 20%;
  height: 12px;
  background: radial-gradient(ellipse at center, rgba(58, 123, 213, 0.1) 0%, transparent 70%);
  filter: blur(4px);
}

.beta-divider-rings {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}

.beta-divider-ring {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid rgba(91, 155, 213, 0.4);
  box-shadow: 0 0 8px rgba(58, 123, 213, 0.12);
  background: var(--color-footer-bg);
}

.beta-divider-ring:last-child {
  margin-left: -6px;
}

.beta-divider-diamond {
  width: 5px;
  height: 5px;
  background: rgba(91, 155, 213, 0.35);
  transform: rotate(45deg);
  margin: 0 16px;
  box-shadow: 0 0 6px rgba(58, 123, 213, 0.15);
}

@media (max-width: 700px) {
  .beta-divider-diamond {
    margin: 0 10px;
  }
}

/* Ambient glow orbs — use extra elements to not conflict with starfield ::before/::after */
.beta-banner > .stars {
  z-index: 1;
}

.beta-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.beta-glow-1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(58, 123, 213, 0.18) 0%, transparent 65%);
  top: -200px;
  right: -150px;
  animation: betaGlow 6s ease-in-out infinite alternate;
}

.beta-glow-2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(91, 155, 213, 0.12) 0%, transparent 65%);
  bottom: -180px;
  left: -120px;
  animation: betaGlow 6s ease-in-out infinite alternate-reverse;
}

@keyframes betaGlow {
  0% { opacity: 0.6; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}

/* Glass card container */
.beta-inner {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  z-index: 2;
}

.beta-card {
  background: rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 52px 48px 48px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.2),
    0 2px 8px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* Gradient border glow — like popular pricing card */
.beta-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-xl);
  padding: 1px;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.5), rgba(91, 155, 213, 0.2), rgba(58, 123, 213, 0.5));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* Top shine line */
.beta-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  pointer-events: none;
}

/* Animated connection rings */
.beta-rings {
  display: flex;
  justify-content: center;
  margin-bottom: 24px;
  position: relative;
  height: 52px;
}

.beta-ring {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid transparent;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  animation: betaRingPulse 4s ease-in-out infinite;
}

.beta-ring-1 {
  border-color: rgba(58, 123, 213, 0.6);
  left: calc(50% - 32px);
  box-shadow: 0 0 20px rgba(58, 123, 213, 0.15);
}

.beta-ring-2 {
  border-color: rgba(91, 155, 213, 0.6);
  left: calc(50% - 16px);
  animation-delay: 0.6s;
  box-shadow: 0 0 20px rgba(91, 155, 213, 0.12);
}

@keyframes betaRingPulse {
  0%, 100% { transform: translateY(-50%) scale(1); opacity: 0.6; }
  50% { transform: translateY(-50%) scale(1.1); opacity: 1; }
}

/* Badge */
.beta-badge {
  display: inline-block;
  padding: 6px 18px;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.2), rgba(91, 155, 213, 0.15));
  border: 1px solid rgba(58, 123, 213, 0.35);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7eb8ff;
  margin-bottom: 20px;
}

/* Heading — large, bold, gradient accent */
.beta-banner h2 {
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.15;
  margin-bottom: 18px;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.15);
}

.beta-banner h2 .em {
  background: linear-gradient(135deg, #7eb8ff 0%, #a8d4ff 50%, #5b9bd5 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.beta-banner p {
  font-size: 1.12rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

/* Spots counter */
.beta-spots {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 20px;
  letter-spacing: 0.02em;
}

.beta-spots-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);
  animation: betaDotPulse 2s ease-in-out infinite;
}

@keyframes betaDotPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* CTA button — volumetric */
.btn-beta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 40px;
  background: var(--gradient-button);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-button);
  position: relative;
  letter-spacing: -0.01em;
}

/* Inner highlight for 3D depth */
.btn-beta::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
  pointer-events: none;
}

.btn-beta:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-button-hover);
  background: var(--gradient-button-hover);
}

.btn-beta:active {
  transform: scale(0.97) translateY(1px);
}

.btn-beta svg {
  width: 20px;
  height: 20px;
}

/* ============================================
   BETA MODAL — glass elevated card
   ============================================ */

.beta-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  z-index: 10000;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.beta-overlay.open {
  display: flex;
}

.beta-modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  max-width: 480px;
  width: 100%;
  padding: 44px 40px;
  position: relative;
  max-height: 85vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  animation: betaModalIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow:
    0 8px 32px rgba(15, 23, 42, 0.12),
    0 2px 8px rgba(15, 23, 42, 0.06),
    0 24px 64px rgba(15, 23, 42, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.beta-modal::-webkit-scrollbar {
  display: none;
}

/* Top shine line */
.beta-modal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent);
  pointer-events: none;
}

@keyframes betaModalIn {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.beta-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--color-primary-light);
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  color: var(--color-text-secondary);
}

.beta-modal-close:hover {
  background: var(--color-border);
  transform: scale(1.05);
}

.beta-modal h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--color-text);
}

.beta-modal .beta-modal-sub {
  font-size: 0.9rem;
  color: var(--color-text-muted);
  margin-bottom: 28px;
}

.beta-field {
  margin-bottom: 18px;
}

.beta-field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
}

.beta-field input[type="text"],
.beta-field input[type="email"] {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  box-shadow: var(--shadow-inset-highlight);
}

.beta-field input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow), var(--shadow-inset-highlight);
}

.beta-field input::placeholder {
  color: var(--color-text-muted);
}

.beta-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 24px 0;
  cursor: pointer;
}

.beta-checkbox input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--color-primary);
  cursor: pointer;
}

.beta-checkbox span {
  font-size: 0.88rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.btn-beta-submit {
  width: 100%;
  padding: 15px;
  background: var(--gradient-button);
  color: #fff;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-button);
  position: relative;
  letter-spacing: -0.01em;
}

/* Inner 3D highlight */
.btn-beta-submit::before {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius-md) - 1px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, transparent 50%);
  pointer-events: none;
}

.btn-beta-submit:hover:not(:disabled) {
  background: var(--gradient-button-hover);
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-2px);
}

.btn-beta-submit:active:not(:disabled) {
  transform: scale(0.97) translateY(1px);
}

.btn-beta-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.beta-error {
  color: #d44060;
  font-size: 0.85rem;
  margin-top: 8px;
  display: none;
}

.beta-error.visible {
  display: block;
}

.beta-success {
  text-align: center;
  padding: 36px 8px 24px;
  animation: betaSuccessFadeIn 0.5s ease;
}

@keyframes betaSuccessFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Gradient icon circle */
.beta-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(58, 123, 213, 0.1), rgba(34, 197, 94, 0.1));
  border: 1px solid rgba(34, 197, 94, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  position: relative;
}

.beta-success-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: betaSuccessPulse 2s ease-in-out infinite;
}

@keyframes betaSuccessPulse {
  0%, 100% { transform: scale(1); opacity: 0.6; }
  50% { transform: scale(1.15); opacity: 1; }
}

.beta-success-icon svg {
  width: 32px;
  height: 32px;
  color: #22c55e;
  filter: drop-shadow(0 2px 6px rgba(34, 197, 94, 0.3));
}

.beta-success-badge {
  display: inline-block;
  padding: 5px 14px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 16px;
}

.beta-success h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
  color: var(--color-text);
}

.beta-success-text {
  color: var(--color-text-secondary);
  font-size: 0.92rem;
  line-height: 1.65;
  max-width: 360px;
  margin: 0 auto 24px;
}

/* Divider line — matching site style */
.beta-success-divider {
  width: 40px;
  height: 2px;
  background: var(--gradient-button);
  border-radius: 1px;
  margin: 0 auto 20px;
  opacity: 0.5;
}

.beta-success-note {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  text-align: left;
  padding: 14px 16px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.beta-success-note svg {
  width: 16px;
  height: 16px;
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 700px) {
  .beta-banner {
    padding: 52px 20px 60px;
  }
  .beta-card {
    padding: 36px 28px 32px;
  }
  .beta-banner h2 {
    font-size: 1.8rem;
  }
  .beta-modal {
    padding: 32px 24px;
    border-radius: var(--radius-lg);
  }
}

/* ============================================
   EARLY INTEREST (Notify Me) — reuses beta modal styles
   ============================================ */

.beta-field textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 0.95rem;
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  outline: none;
  box-shadow: var(--shadow-inset-highlight);
  resize: vertical;
  min-height: 80px;
  max-height: 160px;
  line-height: 1.5;
}

.beta-field textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-glow), var(--shadow-inset-highlight);
}

.beta-field textarea::placeholder {
  color: var(--color-text-muted);
}

.interest-plan-label {
  display: inline-block;
  padding: 4px 12px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 4px;
}

/* ============================================
   MOBILE: 480px and below — tighter spacing
   ============================================ */

@media (max-width: 480px) {
  .beta-banner { padding: 48px 16px 48px; }

  .beta-card { padding: 28px 20px 24px; }

  .beta-banner h2 { font-size: 1.5rem; }
  .beta-banner p { font-size: 0.95rem; }

  .beta-modal { padding: 28px 20px; }
  .beta-modal h3 { font-size: 1.25rem; }

  .demo-prompt { padding: 28px 20px; max-width: calc(100vw - 32px); }
  .demo-prompt h3 { font-size: 1.1rem; }
  .demo-prompt p { font-size: 0.85rem; }
  .demo-prompt-btn { padding: 11px 20px; font-size: 0.85rem; }

  .cta-card { padding: 28px 20px; }
  .cta-card h2 { font-size: 1.3rem; }

  .beta-divider-diamond { margin: 0 8px; }

  .faq-question { padding: 16px 18px; font-size: 0.92rem; }
  .faq-answer p { padding: 0 18px 16px; font-size: 0.88rem; }

  .testimonial-card { padding: 24px 20px; }
  .testimonial-quote { font-size: 0.88rem; }

  .perk-line { font-size: 0.72rem; }

  .social-proof { padding: 48px 16px; }

  .spotlight-content h2 { font-size: 1.4rem; }
  .spotlight-content p { font-size: 0.9rem; }

  .privacy-card { padding: 20px 16px; }
  .privacy-card h3 { font-size: 0.95rem; }
  .privacy-card p { font-size: 0.85rem; }

  .pricing-card { padding: 24px 20px; }

  .breadcrumb { padding: 16px 20px 0; }

  .beta-overlay { padding: 12px; }

  .demo-prompt-overlay { padding: 12px; }

  /* Hide decorative glows that overflow */
  .how-it-works::before,
  .spotlight::before,
  .policy-header::before { display: none; }
  .beta-glow { display: none; }

  /* Kill backdrop-filter on mobile - too heavy for GPU */
  .hero-inner,
  .btn-outline,
  .beta-card,
  .beta-overlay,
  .beta-modal,
  .cta-card,
  .demo-prompt-overlay,
  .spotlight-card,
  .nav-links {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ============================================
   MOBILE: 375px and below — minimal padding
   ============================================ */

@media (max-width: 375px) {
  .hero-inner { padding: 24px 14px 20px; }
  .hero h1 { font-size: 1.2rem; }
  .hero p { font-size: 0.88rem; }
  .hero-badge { font-size: 0.65rem; padding: 5px 12px; }

  .beta-card { padding: 24px 16px 20px; }
  .beta-banner h2 { font-size: 1.3rem; }

  .beta-modal { padding: 24px 16px; }

  .demo-prompt { padding: 24px 14px; }
  .demo-prompt-actions { flex-direction: column; gap: 8px; }
  .demo-prompt-btn { width: 100%; }

  .cta-card { padding: 24px 16px; }

  .feature-card { padding: 24px 18px; }
  .feature-card h3 { font-size: 0.95rem; }
  .feature-card p { font-size: 0.82rem; }

  .step-card p { font-size: 0.82rem; }
  .step-card h3 { font-size: 0.95rem; }
  .step-number { width: 44px; height: 44px; font-size: 0.95rem; }

  .pricing-plan-name { font-size: 16px; }

  .faq-question { padding: 14px 16px; font-size: 0.88rem; gap: 12px; }

  .footer-inner { padding: 0 16px; flex-direction: column; text-align: center; gap: 16px; }
  .footer-left { flex-wrap: wrap; justify-content: center; font-size: 0.8rem; }
  .footer-links { gap: 16px; }
}