/*
Theme Name: Washa
Theme URI: https://washa.app
Author: Washa
Author URI: https://washa.app
Description: Thème WordPress sur mesure pour Washa — la landing de l'app de lavage premium à la demande en Suisse romande. Tous les blocs texte et image de la page d'accueil sont éditables depuis Apparence → Personnaliser. Configuration verrouillée : XML-RPC, commentaires et énumération d'utilisateurs désactivés.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: washa
Tags: one-page, landing-page, custom-logo, custom-menu, theme-options
*/

/* ─────────────────────────────────────────────────────────────
   Washa — design tokens & landing styles.
   Tokens reflètent ../washa/src/tokens/. Voir CLAUDE.md.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Background gradient */
  --bg-top:    #191D3E;
  --bg-mid:    #2E358B;
  --bg-bottom: #202869;

  /* Cobalt */
  --cobalt-900: #1A2A78;
  --cobalt-700: #2E5DC4;
  --cobalt-500: #4A8FF5;
  --cobalt-400: #7CB1FF;
  --cobalt-300: #B0D0FF;
  --cobalt-200: #CFDEFF;
  --cobalt-100: #EAF1FF;

  /* Ink */
  --ink-900: #0B1024;
  --ink-700: #1A2040;
  --ink-500: #3A406B;

  /* Lime — micro-accent */
  --lime-400: #4CFFB0;
  --lime-soft: rgba(76, 255, 176, 0.22);

  /* Glass surfaces */
  --glass-tint:         rgba(11, 16, 36, 0.55);
  --glass-tint-strong:  rgba(11, 16, 36, 0.78);
  --glass-tint-soft:    rgba(11, 16, 36, 0.32);
  --glass-tint-pressed: rgba(11, 16, 36, 0.42);
  --glass-tint-inset:   rgba(11, 16, 36, 0.42);

  /* Rings */
  --ring:        rgba(164, 182, 255, 0.18);
  --ring-strong: rgba(164, 182, 255, 0.34);
  --ring-soft:   rgba(164, 182, 255, 0.10);

  /* Highlights */
  --highlight:      rgba(255, 255, 255, 0.18);
  --highlight-soft: rgba(255, 255, 255, 0.10);

  /* Text */
  --text-primary:   #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.78);
  --text-muted:     rgba(255, 255, 255, 0.62);
  --text-faint:     rgba(255, 255, 255, 0.42);
  --text-accent:    #B0D0FF;

  /* Spacing */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-xxl: 32px;
  --space-3xl: 48px;
  --space-4xl: 72px;

  /* Section rhythm — fluid padding so every section breathes the same. */
  --section-pad: clamp(72px, 9vw, 120px);
  --section-head-gap: clamp(40px, 5vw, 64px);

  /* Title scale (Work Sans). Used so every section H2 matches. */
  --title-xl:  clamp(34px, 6.5vw, 88px);   /* hero only */
  --title-lg:  clamp(28px, 4.8vw, 60px);   /* section H2 (features, testimonials, footer) */
  --title-md:  clamp(26px, 3.8vw, 48px);   /* sub-section H2 (pricing, cinematic, legal) */
  --title-sm:  clamp(22px, 2.6vw, 32px);   /* card/block H3 (club, track-step) */

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-2xl: 20px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-drop-soft:   0 10px 18px rgba(6, 9, 26, 0.42);
  --shadow-drop:        0 14px 22px rgba(6, 9, 26, 0.50);
  --shadow-drop-strong: 0 22px 32px rgba(6, 9, 26, 0.65);
  --shadow-halo:        0 12px 22px rgba(74, 143, 245, 0.45);
  --shadow-halo-strong: 0 0   22px rgba(74, 143, 245, 0.60);

  /* Typography */
  --font-title: 'Work Sans', system-ui, -apple-system, sans-serif;
  --font-body:  'Manrope',   system-ui, -apple-system, sans-serif;

  /* Layout — container scale.
     --container       : single source of truth for content sections.
                         Use everywhere unless a section is intentionally
                         full-width (hero glow, marquees, footer-hero bg).
     --container-wide  : larger gutter for cinematic photo only.
     --container-pad-x : horizontal page padding. Min 24px so content
                         never touches the device edge on mobile. */
  --container:        1240px;
  --container-wide:   1400px;
  --container-pad-x:  clamp(24px, 4vw, 40px);

  /* Aliases kept for backwards-compat with the .container helper */
  --container-max:     var(--container);
  --container-padding: var(--container-pad-x);
}

/* ─── Reset minimal ──────────────────────────────────────────── */

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

html {
  scroll-behavior: smooth;
  overflow-x: clip;
  width: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.45;
  color: var(--text-primary);
  background: var(--bg-top);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  width: 100%;
  max-width: 100vw;
}

img, svg { display: block; max-width: 100%; }

ul, ol { padding: 0; margin: 0; list-style: none; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
  color: inherit;
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

/* ─── Accessibility — focus + skip-link ─────────────────────── */

/* Skip-link visible only when focused */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-120%);
  background: var(--cobalt-500);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 1000;
  transition: transform 200ms ease;
  text-decoration: none;
}
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--cobalt-300);
  outline-offset: 2px;
}

/* Global keyboard focus indicator — cobalt ring, never on mouse click */
*:focus { outline: none; }
*:focus-visible {
  outline: 2px solid var(--cobalt-400);
  outline-offset: 3px;
  border-radius: 4px;
}
.btn:focus-visible,
.store-btn:focus-visible {
  outline: 3px solid var(--cobalt-300);
  outline-offset: 3px;
}
.store-btn--whatsapp:focus-visible {
  outline-color: #25D366;
}

/* ─── Background — ink + bottom cobalt glow ─────────────────── */

body {
  background:
    radial-gradient(ellipse 1100px 700px at 50% 95%, rgba(46, 93, 196, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 900px 600px at 50% 110%, rgba(74, 143, 245, 0.22) 0%, transparent 55%),
    #06081A;
  background-attachment: fixed;
}

.bg { display: none; }

/* ─── Container ─────────────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* ─── Typography helpers ────────────────────────────────────── */

.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: var(--space-md);
}

.section-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: var(--space-lg);
  max-width: 680px;
}

.lede {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
  max-width: 580px;
}

/* ─── Card primitive ────────────────────────────────────────── */

.card {
  position: relative;
  background: var(--glass-tint);
  border: 1px solid var(--ring);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-drop);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: var(--space-xl);
}

.card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, var(--highlight-soft), transparent 28%);
  opacity: 0.6;
}

/* ─── Buttons ───────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  min-height: 48px;
  border-radius: var(--radius-xl);
  transition: transform 160ms ease, box-shadow 220ms ease, background-color 160ms ease, opacity 160ms ease;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}

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

.btn--primary {
  background: var(--cobalt-500);
  color: #fff;
  box-shadow: var(--shadow-halo);
}

.btn--primary:hover {
  background: #5C9CFF;
  box-shadow: var(--shadow-halo-strong);
}

.btn--secondary {
  background: var(--glass-tint);
  border: 1px solid var(--ring);
  color: var(--text-primary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.btn--secondary:hover { background: var(--glass-tint-strong); }

.btn--ghost {
  color: var(--text-secondary);
  padding-inline: var(--space-md);
}

.btn--ghost:hover { color: var(--text-primary); }

.btn--sm { min-height: 44px; padding: 10px 18px; font-size: 14px; border-radius: var(--radius-full); }

.btn--lg { min-height: 56px; padding: 16px 32px; font-size: 16px; border-radius: var(--radius-full); }

.btn-icon { width: 18px; height: 18px; }

/* Outlined pill — header CTA */
.btn--outline {
  background: transparent;
  color: var(--text-primary);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--radius-full);
  font-weight: 500;
}
.btn--outline:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Pale pill — hero CTA (Blues style, adapté Washa cobalt-icy) */
.btn--pill {
  background: linear-gradient(180deg, #EAF1FF 0%, #CFDEFF 100%);
  color: #0B1024;
  border-radius: var(--radius-full);
  font-weight: 600;
  box-shadow:
    0 14px 30px rgba(74, 143, 245, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  min-height: 56px;
  padding: 18px 38px;
  font-size: 16px;
  letter-spacing: -0.005em;
}
.btn--pill:hover {
  background: linear-gradient(180deg, #FFFFFF 0%, #DCE7FF 100%);
  box-shadow:
    0 18px 38px rgba(74, 143, 245, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

/* ─── Site header ───────────────────────────────────────────── */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: var(--space-xl);
  padding: 20px 40px;
  margin: 0 auto;
  background: rgba(6, 8, 26, 0.6);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(124, 177, 255, 0.08);
}

.site-header > * { max-width: 1400px; }

.brand { display: inline-flex; align-items: center; }

.brand-logo {
  height: 32px;
  width: auto;
  display: block;
}

.brand-mark {
  font-family: var(--font-title);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--text-primary);
}

.brand-mark--sm { font-size: 18px; }

.site-nav {
  display: flex;
  gap: 36px;
  margin-left: auto;
  margin-right: var(--space-lg);
}

.nav-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-primary);
  transition: color 160ms ease, opacity 160ms ease;
  opacity: 0.92;
}

.nav-link:hover { opacity: 1; color: var(--cobalt-300); }

@media (max-width: 880px) {
  .site-header { padding: 20px var(--container-padding); }
  .site-nav { display: none; }
  /* Nav hidden → push the Télécharger button to the right edge. */
  .site-header .brand { margin-right: auto; }
}

/* ─── Hero (Blues-style centered) ───────────────────────────── */

.hero {
  position: relative;
  min-height: 100vh;
  padding: 140px 0 0;
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.hero-glow {
  position: absolute;
  left: 50%;
  bottom: -200px;
  transform: translateX(-50%);
  width: 1200px;
  height: 800px;
  background: radial-gradient(ellipse at center, rgba(74, 143, 245, 0.28) 0%, rgba(46, 93, 196, 0.12) 35%, transparent 65%);
  pointer-events: none;
  z-index: -1;
  filter: blur(20px);
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--container-padding);
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* App-store chip */
.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  background: rgba(74, 143, 245, 0.08);
  border: 1px solid rgba(124, 177, 255, 0.35);
  color: var(--cobalt-200);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  margin-bottom: 36px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-chip-label { color: var(--cobalt-200); }
.hero-chip-stars {
  display: inline-flex;
  gap: 3px;
  color: var(--cobalt-300);
}
.hero-chip-stars svg { width: 13px; height: 13px; }
.hero-chip-rating { color: #fff; font-weight: 600; }

.hero-title {
  font-family: var(--font-title);
  font-size: var(--title-xl);
  line-height: 1.02;
  font-weight: 500;
  letter-spacing: -0.035em;
  color: #fff;
  margin-bottom: 28px;
  max-width: 980px;
}

.hero-subtitle {
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: 36px;
  max-width: 520px;
}

/* ─── Phones fan ───────────────────────────────────────────── */

.phones {
  position: relative;
  margin-top: 56px;
  width: 100%;
  max-width: 1100px;
  height: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone {
  position: absolute;
  width: 290px;
  transition: transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Side phones flank the parallax phone (at viewport center).
   Slight downward offset + rotation for the cinematic fan look. */
.phone--left {
  left: 50%;
  top: 50%;
  transform: translate(-118%, -50%) rotate(-8deg);
  z-index: 1;
  opacity: 0.92;
}

.phone--right {
  left: 50%;
  top: 50%;
  transform: translate(18%, -50%) rotate(8deg);
  z-index: 1;
  opacity: 0.92;
}

.phone--center {
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  z-index: 2;
}

.phone-frame {
  position: relative;
  aspect-ratio: 722 / 1470;
  width: 100%;
  filter: drop-shadow(0 32px 50px rgba(6, 9, 26, 0.65));
}

/* Real iPhone frame image (Framer asset) — on top, with built-in
   notch and bezel. Screen content sits underneath and is masked
   by the bezel's opaque area. */
.phone-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/mockups/iphone.webp') no-repeat center / 100% 100%;
  z-index: 3;
  pointer-events: none;
}

.phone-notch { display: none; }

.phone-screen {
  position: absolute;
  inset: 2.2% 4.4%;
  background: #0B1024;
  border-radius: 11.6% / 5.7%;
  padding: 14% 8% 6%;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  z-index: 1;
}

/* Status bar is hidden — the frame image already has the
   dynamic island, and our content starts below it. */
.phone-status { display: none; }

.phone-status-right {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}

.dot-tiny {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fff;
}

.phone-eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
  text-transform: lowercase;
  margin: 0;
}

.phone-h {
  font-family: var(--font-title);
  font-size: 22px;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.phone-score {
  font-family: var(--font-title);
  font-size: 92px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.05em;
  color: #fff;
  margin: 4px 0 8px;
}

.phone-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 8px 0;
}

.phone-row,
.phone-stat {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  padding: 6px 0;
}

.phone-day,
.phone-stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.68);
  margin: 0 0 2px;
}

.phone-label,
.phone-stat-meta {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}

.phone-time,
.phone-stat-value {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px 4px;
  margin-top: 8px;
}

.cal-h {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
  padding: 4px 0;
}

.cal-d {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  text-align: center;
  padding: 6px 0;
  border-radius: 50%;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cal-d.cal-on {
  background: #fff;
  color: #0B1024;
  font-weight: 700;
}

/* ─── Washa app mockup components (live status, stepper, …) ── */

.phone-eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.phone-eyebrow--accent {
  color: var(--lime-400);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.1em;
  font-size: 10px;
}

.phone-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--lime-400);
  box-shadow: 0 0 0 3px rgba(76, 255, 176, 0.22);
  animation: phone-pulse 1.6s ease-in-out infinite;
  flex-shrink: 0;
}

@keyframes phone-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.7); opacity: 0.55; }
}

.phone-eta-card {
  background: linear-gradient(180deg, rgba(74, 143, 245, 0.18), rgba(74, 143, 245, 0.06));
  border: 1px solid rgba(124, 177, 255, 0.32);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.phone-eta-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  color: var(--cobalt-300);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.phone-eta-value {
  font-family: var(--font-title);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  line-height: 1;
}

.phone-operator {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(11, 16, 36, 0.55);
  border: 1px solid rgba(164, 182, 255, 0.18);
  border-radius: 12px;
  padding: 9px 11px;
}
.phone-op-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cobalt-500), var(--cobalt-700));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.phone-op-info { flex: 1; min-width: 0; }
.phone-op-name {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.phone-op-meta {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  margin: 2px 0 0;
}

.phone-actions {
  display: flex;
  gap: 7px;
  margin-top: 2px;
}
.phone-action {
  flex: 1;
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  padding: 8px 8px;
  border-radius: 9999px;
  border: 1px solid rgba(164, 182, 255, 0.28);
  color: #fff;
  background: rgba(11, 16, 36, 0.55);
}
.phone-action--primary {
  background: var(--cobalt-500);
  border-color: var(--cobalt-500);
  box-shadow: 0 6px 18px rgba(74, 143, 245, 0.42);
}

.phone-timer {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0 6px;
  gap: 3px;
}
.phone-timer-label {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.phone-timer-value {
  font-family: var(--font-title);
  font-size: 42px;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.phone-stepper {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.phone-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  position: relative;
}
.phone-step + .phone-step::before {
  content: '';
  position: absolute;
  left: 6.5px;
  top: -7px;
  width: 1px;
  height: 9px;
  background: rgba(164, 182, 255, 0.22);
}
.phone-step-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid rgba(164, 182, 255, 0.32);
  background: transparent;
  flex-shrink: 0;
  position: relative;
}
.phone-step-dot--done {
  background: var(--cobalt-500);
  border-color: var(--cobalt-500);
}
.phone-step-dot--done::after {
  content: '';
  position: absolute;
  inset: 0;
  display: block;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3 6l2 2 4-4.2' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 70% no-repeat;
}
.phone-step-dot--active {
  border-color: var(--lime-400);
  background: rgba(76, 255, 176, 0.18);
  box-shadow: 0 0 0 3px rgba(76, 255, 176, 0.14);
}
.phone-step-dot--active::after {
  content: '';
  position: absolute;
  inset: 3.5px;
  background: var(--lime-400);
  border-radius: 50%;
}
.phone-step-text {
  font-family: var(--font-title);
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.68);
  letter-spacing: -0.01em;
}
.phone-step--done .phone-step-text { color: rgba(255, 255, 255, 0.86); }
.phone-step--active .phone-step-text { color: #fff; font-weight: 700; }
.phone-step-meta {
  margin-left: auto;
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.62);
}

.phone-score-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.phone-score-suffix {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
  margin-bottom: 8px;
}

.phone-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--lime-400);
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: -2px;
}

.phone-formula {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(74, 143, 245, 0.10);
  border: 1px solid rgba(124, 177, 255, 0.28);
  border-radius: 12px;
  padding: 10px 12px;
}
.phone-formula-badge {
  font-family: var(--font-title);
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  background: var(--cobalt-500);
  padding: 3px 8px;
  border-radius: 9999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.phone-formula-text { flex: 1; min-width: 0; }
.phone-formula-name {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.1;
}
.phone-formula-meta {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  margin: 1px 0 0;
}
.phone-formula-price {
  font-family: var(--font-title);
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.phone-hint {
  font-family: var(--font-body);
  font-size: 10px;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
  margin: auto 0 0;
  line-height: 1.4;
}

/* Phone responsive */
@media (max-width: 880px) {
  .phones { height: 520px; margin-top: 48px; }
  .phone { width: 200px; }
  .phone--left { transform: translateX(-105%) rotate(-7deg); top: 50px; }
  .phone--right { transform: translateX(5%) rotate(7deg); top: 50px; }
}

@media (max-width: 640px) {
  .hero { padding-top: 110px; }
  /* Hide the side phones on small mobile — they overflow the
     viewport. The parallax center phone stays as the hero anchor. */
  .phones { display: none; }
  .hero-subtitle { font-size: 16px; }
  .hero-cta-row { width: 100%; flex-direction: column; align-items: stretch; }
  .hero-cta-row .store-btn { justify-content: center; width: 100%; }
}

/* ─── Parallax scope (hero + track) — one continuous phone ──── */

.parallax-scope {
  position: relative;
  isolation: isolate;
}

/* The parallax phone pin spans the whole scope. The phone inside is
   sticky and stays at viewport center while parallax-scope is in view.
   The pin is absolute so it doesn't add height; the phone visually
   "descends" from the hero's center slot into the track section. */
.parallax-phone-pin {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.phone--parallax {
  position: sticky;
  top: 50vh;
  transform: translateY(-50%);
  width: 290px;
  z-index: 5;
  will-change: transform;
}

/* On small viewports, shrink the parallax phone and push it lower so
   it doesn't cover the hero CTA buttons. */
@media (max-width: 720px) {
  .phone--parallax {
    width: 230px;
    top: 65vh;
  }
}
@media (max-width: 480px) {
  .phone--parallax {
    width: 200px;
    top: 68vh;
  }
}

/* When inside parallax-scope, the legacy hero .phones container only
   has left + right phones — adjust justify to keep them flanking the
   parallax phone evenly. */

/* ─── Track section — text steps only (phone is parallax) ──── */

.track {
  position: relative;
  z-index: 1;
  padding: 80px 0 0;
  /* Breathing room before the next section so the parallax phone
     exits the viewport cleanly. */
  margin-bottom: 220px;
}

/* The cinematic section starts a new stacking context and visually
   "covers" the phone as it exits, so the phone never overlaps the
   next-section content. */
.cinematic,
.testimonials,
.features,
.pricing,
.site-footer {
  position: relative;
  z-index: 2;
  background: var(--bg-fallback);
}

/* Fade-out gradient at the bottom of the track so the phone
   appears to dissolve into the next section instead of clipping. */
.track::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 30vh;
  background: linear-gradient(180deg, transparent, var(--bg-fallback) 75%);
  z-index: 3;
  pointer-events: none;
}

.track-stage {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--container-padding);
}

/* Subtle purple glow behind the pinned phone, à la Blues */
.track::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(74, 95, 230, 0.32) 0%, transparent 70%),
    radial-gradient(ellipse 80% 40% at 50% 80%, rgba(46, 53, 139, 0.45) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* Sticky pin pattern: wrap is a 100vh "scene" that sticks while the
   track-stage is in view. Negative margin-bottom prevents the scene
   from adding height to the parent, so steps overlay on top.
   Opacity is driven by JS so the phone fades out cleanly when the
   track section finishes (no overlap with the cinematic section). */
.track-phone-wrap {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  margin-bottom: -100vh;
  opacity: 1;
  transition: opacity 220ms ease-out;
}

.track-phone-wrap.is-hidden { opacity: 0; }

.phone--solo {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 320px;
  z-index: 5;
}

/* Track screens — sit inside the iPhone frame cutout. Same inset
   as the base .phone-screen so they line up with the bezel. */
.track-screen {
  position: absolute;
  inset: 2.2% 4.4%;
  background: #0B1024;
  border-radius: 11.6% / 5.7%;
  padding: 14% 8% 6%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(8px) scale(0.985);
  transition: opacity 480ms ease, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  z-index: 1;
}

.track-screen.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* The solo phone uses aspect-ratio from .phone-frame — no fixed height. */
.phone--solo .phone-frame { width: 100%; }

/* Progress bar inside step 1 */
.track-progress { margin-top: 4px; }

.track-progress-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-bottom: 8px;
}

.track-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cobalt-400), var(--cobalt-300));
  border-radius: inherit;
  box-shadow: 0 0 12px rgba(124, 177, 255, 0.55);
}

.track-progress-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
}

.phone-time--accent {
  color: var(--cobalt-300);
  font-size: 20px;
  line-height: 1;
}

/* Steps column */
.track-steps {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  z-index: 1;
  pointer-events: none;
}

.track-step {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 380px;
  padding: var(--space-3xl) 0;
  opacity: 0.25;
  transform: translateY(20px);
  transition: opacity 560ms ease, transform 560ms cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: auto;
}

.track-step.is-active { opacity: 1; transform: translateY(0); }

.track-step--right { margin-left: auto; text-align: left; }
.track-step--left  { margin-right: auto; text-align: left; }

.track-step-num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cobalt-300);
  margin-bottom: var(--space-md);
}

.track-step-title {
  font-family: var(--font-title);
  font-size: var(--title-sm);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin-bottom: var(--space-lg);
}

.track-step-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 880px) {
  /* On mobile we stack the phone above each step, no pinning. */
  .track { padding: 60px 0; }
  .track-phone-wrap { position: relative; top: 0; height: auto; margin-bottom: 32px; }
  .phone--solo { width: 260px; }
  .track-step { min-height: auto; max-width: 100%; padding: 32px 0; opacity: 1; transform: none; }
  .track-step--right, .track-step--left { margin: 0; text-align: left; }
}

/* ─── Cinematic section + stats ─────────────────────────────── */

.cinematic {
  padding-block: var(--section-pad);
  padding-inline: clamp(16px, 3vw, 48px);
}

.cinematic-photo {
  position: relative;
  margin: 0 auto 80px;
  border-radius: clamp(20px, 2.5vw, 36px);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-drop-strong);
}

.cinematic-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.cinematic-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 16, 36, 0.10) 0%,
    rgba(11, 16, 36, 0.10) 38%,
    rgba(11, 16, 36, 0.55) 70%,
    rgba(11, 16, 36, 0.88) 100%);
}

.cinematic-text {
  position: absolute;
  inset-inline-start: clamp(28px, 5vw, 64px);
  inset-block-end: clamp(28px, 5vw, 64px);
  max-width: min(620px, calc(100% - 96px));
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.cinematic-title {
  font-family: var(--font-title);
  font-size: var(--title-md);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: 620px;
  text-wrap: balance;
}

/* Outlined-light pill (over photo) */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius-full);
  font-weight: 500;
  padding: 12px 26px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn--outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

@media (max-width: 720px) {
  .cinematic-photo { aspect-ratio: 4 / 5; }
}

/* Stats row */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
}

.stat {
  position: relative;
  text-align: center;
  padding-block: 32px;
  padding-inline: 12px;
  border-right: 1px solid var(--ring-soft);
}

.stat:last-child { border-right: 0; }

/* Soft cobalt halo glow behind each stat */
.stat::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 220%;
  height: 220%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(74, 143, 245, 0.55) 0%,
    rgba(74, 143, 245, 0.18) 35%,
    transparent 70%);
  pointer-events: none;
  z-index: 0;
  filter: blur(24px);
}

.stat > * { position: relative; z-index: 1; }
.stats { overflow: visible; }

.stat-value {
  font-family: var(--font-title);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.stat-label {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  color: var(--text-muted);
  margin: 0 auto;
  max-width: 240px;
  text-wrap: balance;
}

@media (max-width: 720px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-right: 0; border-bottom: 1px solid var(--ring-soft); }
  .stat:last-child { border-bottom: 0; }
}

/* ─── Testimonials marquee ──────────────────────────────────── */

.testimonials {
  padding-block: var(--section-pad);
  overflow: hidden;
}

.testimonials-head {
  text-align: center;
  margin-bottom: var(--section-head-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

/* Section eyebrows — mirror the hero chip's pill (.hero-chip): same
   padding, background, ring, blur, color and typography. */
.chip-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(124, 177, 255, 0.35);
  background: rgba(74, 143, 245, 0.08);
  color: var(--cobalt-200);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-transform: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.testimonials-title {
  font-family: var(--font-title);
  font-size: var(--title-lg);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: 820px;
  text-wrap: balance;
}

/* Marquee — horizontal scrolling row, infinite loop via duplication */
.marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 12px 0;
  /* Fade edges so cards don't pop in/out abruptly. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee + .marquee { margin-top: 24px; }

.marquee-track {
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}

.marquee-track--left  { animation: marquee-left  72s linear infinite; }
.marquee-track--right { animation: marquee-right 84s linear infinite; }

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

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

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

@media (prefers-reduced-motion: reduce) {
  .marquee-track--left, .marquee-track--right { animation: none; }
}

/* Testimonial card */
.testimonial {
  flex: 0 0 auto;
  width: 420px;
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.testimonial-head {
  display: flex;
  align-items: center;
  gap: 14px;
}

.testimonial-avatar { display: none; }

.testimonial-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.testimonial-stars {
  font-size: 14px;
  letter-spacing: 2px;
  color: var(--cobalt-300);
  line-height: 1;
}

.testimonial-name {
  font-family: var(--font-title);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.testimonial-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--ring-soft);
}

@media (max-width: 560px) {
  .testimonial { width: 320px; padding: 20px 22px; }
}

/* ─── Features — clickable carousel (3 phones) ──────────────── */

.features {
  padding-block: var(--section-pad);
  position: relative;
  overflow: hidden;
}

.features-head {
  text-align: center;
  margin-bottom: var(--section-head-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.features-title {
  font-family: var(--font-title);
  font-size: var(--title-lg);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: 820px;
  text-wrap: balance;
}

.features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

@media (max-width: 980px) {
  .features-grid {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 560px;
    margin-inline: auto;
  }
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.feature-item {
  text-align: left;
  padding: 28px 32px;
  border-radius: var(--radius-xl);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 320ms ease, border-color 320ms ease, opacity 320ms ease;
  color: inherit;
  font: inherit;
  width: 100%;
}

.feature-item:hover { background: rgba(255, 255, 255, 0.02); }

.feature-item.is-active {
  background: linear-gradient(180deg, rgba(74, 95, 230, 0.18), rgba(74, 95, 230, 0.06));
  border-color: rgba(124, 177, 255, 0.28);
  box-shadow: 0 14px 40px rgba(46, 53, 139, 0.35);
}

.feature-title {
  font-family: var(--font-title);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 10px;
}

.feature-body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
  max-width: 460px;
}

.feature-item:not(.is-active) .feature-body { opacity: 0.55; }

/* Vertical image carousel — active card always centered.
   The 2 adjacent cards peek above + below behind a soft fade
   mask on both sides. Clicking a tab translates the track so
   the new active card slides into the centered position. */
.features-carousel {
  position: relative;
  overflow: hidden;
  height: 660px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.features-track {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: stretch;
  width: 100%;
  max-width: 500px;
  transition: transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
  will-change: transform;
}

.features-slide {
  flex: 0 0 auto;
  width: 100%;
  opacity: 0.45;
  transform: scale(0.92);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.features-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

.feature-image {
  position: relative;
  margin: 0;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 5 / 4;
  background: var(--ink-700);
  border: 1px solid var(--ring);
  box-shadow:
    0 0 0 1px rgba(124, 177, 255, 0.10),
    0 28px 60px rgba(11, 16, 36, 0.55);
}

.feature-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.feature-image-caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 28px 24px 24px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(11, 16, 36, 0.55) 50%,
    rgba(11, 16, 36, 0.92) 100%);
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}

.feature-image-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt-300);
}

.feature-image-title {
  font-family: var(--font-title);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

@media (max-width: 980px) {
  .features-carousel { height: 600px; }
  .features-track { max-width: 440px; }
}

@media (max-width: 560px) {
  .features-carousel { height: 520px; }
  .features-track { max-width: 340px; }
}

/* Marquee grid — 3 columns, each scrolls downward (reverse) */
.features-marquee {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding-inline: var(--container-padding);
  height: clamp(560px, 80vh, 760px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

@media (max-width: 880px) {
  .features-marquee { grid-template-columns: repeat(2, 1fr); }
  .feat-col--hide-md { display: none; }
}

@media (max-width: 560px) {
  .features-marquee { grid-template-columns: 1fr; }
}

.feat-col {
  position: relative;
  overflow: hidden;
}

.feat-stream {
  display: flex;
  flex-direction: column;
  gap: 18px;
  will-change: transform;
}

/* Reverse direction = scroll from top to bottom (content enters from top) */
.feat-stream--down-slow { animation: feat-down 38s linear infinite; }
.feat-stream--down-fast { animation: feat-down 28s linear infinite; }

@keyframes feat-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .feat-stream { animation: none; }
}

/* Pause on hover */
.feat-col:hover .feat-stream { animation-play-state: paused; }

/* Cards — varied sizes for visual rhythm */
.feat-card {
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 20px;
  flex-shrink: 0;
}

.feat-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.feat-h {
  font-family: var(--font-title);
  font-size: 19px;
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0;
}

.feat-body {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.feat-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
  margin: 0;
}

.feat-price {
  font-family: var(--font-title);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 4px 0 0;
}

.feat-unit {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
}

/* Score card — big number */
.feat-card--score {
  background: linear-gradient(180deg, rgba(74, 95, 230, 0.22), var(--glass-tint));
  border-color: var(--ring-strong);
  align-items: flex-start;
}

.feat-score {
  font-family: var(--font-title);
  font-size: 64px;
  line-height: 0.95;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 6px 0 4px;
}

/* Plan / progress bar */
.feat-bar {
  height: 6px;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  margin-top: 6px;
}
.feat-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--cobalt-400), var(--cobalt-300));
  border-radius: inherit;
  box-shadow: 0 0 10px rgba(124, 177, 255, 0.5);
}

/* Photo grid mini */
.feat-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-bottom: 8px;
}
.feat-photo-grid > div {
  aspect-ratio: 1;
  background:
    linear-gradient(135deg, rgba(74, 143, 245, 0.4), rgba(46, 93, 196, 0.6)),
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.2), transparent 60%);
  border-radius: 10px;
  border: 1px solid var(--ring);
}
.feat-photo-grid > div:nth-child(2) { background: linear-gradient(135deg, rgba(124, 177, 255, 0.35), rgba(74, 143, 245, 0.55)); }
.feat-photo-grid > div:nth-child(3) { background: linear-gradient(135deg, rgba(46, 93, 196, 0.55), rgba(26, 42, 120, 0.7)); }
.feat-photo-grid > div:nth-child(4) { background: linear-gradient(135deg, rgba(176, 208, 255, 0.35), rgba(74, 143, 245, 0.55)); }

/* Map pin */
.feat-card--map { padding-block: 18px; }
.feat-pin {
  width: 100%;
  height: 80px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 60%, rgba(74, 143, 245, 0.35) 0%, transparent 50%),
    linear-gradient(180deg, rgba(11, 16, 36, 0.4), rgba(11, 16, 36, 0.7));
  border: 1px solid var(--ring);
  position: relative;
  margin-bottom: 8px;
}
.feat-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--cobalt-300);
  box-shadow: 0 0 14px var(--cobalt-300), 0 0 0 6px rgba(124, 177, 255, 0.25);
  transform: translate(-50%, -50%);
}

/* Review */
.feat-stars {
  color: var(--cobalt-300);
  letter-spacing: 2px;
  font-size: 14px;
}

/* Toggle */
.feat-toggle-led,
.feat-toggle-on {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--lime-400);
  box-shadow: 0 0 10px var(--lime-400);
  display: inline-block;
  margin-bottom: 4px;
}
.feat-toggle-on { background: var(--cobalt-300); box-shadow: 0 0 10px var(--cobalt-300); }

/* Calendar mini grid */
.feat-cal-mini {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 6px 0 8px;
}
.feat-cal-mini > span {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}
.feat-cal-mini > span.on {
  background: #fff;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.3);
}

/* Big card variant */
.feat-card--big { padding: 24px 24px 22px; }

/* ─── Pricing ───────────────────────────────────────────────── */

.pricing {
  padding-block: var(--section-pad);
}

.pricing-head {
  text-align: center;
  margin-bottom: var(--section-head-gap);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.pricing-title {
  font-family: var(--font-title);
  font-size: var(--title-md);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  max-width: 760px;
  text-wrap: balance;
}

.pricing-subtitle {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.3vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  max-width: 600px;
}
.pricing-subtitle strong { color: #fff; }

/* ─── Formula grid — 2×2 layout, full container width. */

.formula-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
}

@media (max-width: 640px) {
  .formula-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
    gap: var(--space-lg);
  }
}

.formula-card {
  position: relative;
  padding: var(--space-xxl) var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-radius: var(--radius-xl);
  transition:
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    border-color 360ms ease,
    box-shadow 360ms ease;
}

.formula-card:hover {
  transform: translateY(-4px);
  border-color: var(--ring-strong);
  box-shadow:
    0 0 0 1px rgba(124, 177, 255, 0.18),
    0 24px 50px rgba(11, 16, 36, 0.55),
    0 0 40px rgba(74, 143, 245, 0.14);
}

.formula-card--featured {
  background: linear-gradient(180deg,
    rgba(74, 95, 230, 0.20),
    rgba(46, 53, 139, 0.10));
  border-color: rgba(124, 177, 255, 0.34);
  box-shadow:
    0 0 0 1px rgba(124, 177, 255, 0.22),
    0 24px 60px rgba(46, 53, 139, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.formula-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--cobalt-500);
  padding: 5px 12px;
  border-radius: 9999px;
  box-shadow: 0 6px 14px rgba(74, 143, 245, 0.42);
  white-space: nowrap;
  z-index: 2;
}

.formula-icon {
  width: 88px;
  height: 88px;
  object-fit: contain;
  display: block;
  filter:
    drop-shadow(0 4px 8px rgba(11, 16, 36, 0.5))
    drop-shadow(0 8px 22px rgba(74, 143, 245, 0.28));
  transition: transform 480ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.formula-card:hover .formula-icon {
  transform: translateY(-3px) rotate(-3deg) scale(1.04);
}

.formula-eyebrow {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #fff;
}

.formula-tagline {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

.formula-price-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin-top: var(--space-xs);
}

.formula-price {
  font-family: var(--font-title);
  font-size: 44px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.formula-from {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
}

.formula-unit {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
}

.formula-duration {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cobalt-300);
  margin: 0;
}

.formula-divider {
  height: 1px;
  background: rgba(164, 182, 255, 0.12);
  margin: var(--space-xs) 0;
}

.formula-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 1;
}

.formula-features li {
  position: relative;
  padding-left: 20px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
}
.formula-features li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cobalt-400);
}
.formula-features li strong { color: #fff; font-weight: 600; }
.formula-card--featured .formula-features li::before { background: var(--lime-400); }

.pricing-note {
  margin: 32px auto 0;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  max-width: 720px;
}
.pricing-note a {
  color: var(--cobalt-300);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.pricing-note a:hover { color: #fff; }

/* ─── Washa Club featured banner ───────────────────────────── */

.club-section {
  margin-top: var(--space-4xl);
}

.club-card {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 0;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(ellipse 60% 80% at 0% 0%, rgba(74, 143, 245, 0.32) 0%, transparent 60%),
    radial-gradient(ellipse 80% 60% at 100% 100%, rgba(46, 53, 139, 0.5) 0%, transparent 60%),
    var(--glass-tint-strong);
  border: 1px solid var(--ring-strong);
  box-shadow:
    0 0 0 1px rgba(124, 177, 255, 0.18),
    0 32px 80px rgba(11, 16, 36, 0.6);
}

@media (max-width: 880px) {
  .club-card { grid-template-columns: 1fr; }
}

.club-content {
  padding: 40px 44px 40px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 560px) {
  .club-content { padding: 32px 28px; }
}

.club-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.club-shield {
  width: 48px;
  height: 48px;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(74, 143, 245, 0.32));
}
.club-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--lime-400);
}

.club-title {
  font-family: var(--font-title);
  font-size: var(--title-sm);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}

.club-subtitle {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 480px;
}

.club-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 22px;
  margin: 8px 0 4px;
  padding: 0;
  list-style: none;
}

@media (max-width: 560px) {
  .club-features { grid-template-columns: 1fr; }
}

.club-features li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  padding-left: 20px;
}
.club-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-400);
  box-shadow: 0 0 0 3px rgba(76, 255, 176, 0.18);
}

.club-feat-title {
  font-family: var(--font-title);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.club-feat-meta {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.club-cta-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  align-items: flex-start;
}
.club-trust {
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.62);
}

.club-price-block {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 40px 32px;
  background: linear-gradient(180deg, rgba(74, 143, 245, 0.18), rgba(46, 53, 139, 0.32));
  border-left: 1px solid var(--ring-strong);
  text-align: center;
}

@media (max-width: 880px) {
  .club-price-block { border-left: 0; border-top: 1px solid var(--ring-strong); padding: 28px 24px; }
}

.club-price-from {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}
.club-price {
  font-family: var(--font-title);
  font-size: clamp(56px, 6vw, 88px);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  margin: 0;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.club-price-unit {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.62);
  letter-spacing: 0;
}
.club-price-savings {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--lime-400);
  font-weight: 600;
}

/* ─── Washa Pro thin callout ───────────────────────────────── */

.pro-callout {
  margin-top: var(--space-xxl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  padding: 22px 26px;
  border-radius: 18px;
  background: var(--glass-tint);
  border: 1px solid var(--ring);
  flex-wrap: wrap;
}

.pro-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cobalt-300);
  display: block;
  margin-bottom: 4px;
}
.pro-title {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.pro-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  margin: 4px 0 0;
}

.btn--block {
  display: flex;
  width: 100%;
  text-align: center;
  margin-top: auto;
}

/* ─── Site footer (cinematic CTA + giant wordmark + columns) ── */

.site-footer {
  position: relative;
  background: var(--bg-fallback);
  margin-top: 0;
}

/* Cinematic CTA hero — bigger section/image, normal title */
.footer-hero {
  position: relative;
  min-height: clamp(620px, 78vh, 820px);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(80px, 12vh, 140px);
  margin: 0;
}

.footer-bg-wrap {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.footer-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: scale(1.08);
  transform-origin: 50% 50%;
  will-change: transform;
}

.footer-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    /* Cobalt halo rising from below — signature brand glow */
    radial-gradient(ellipse 90% 75% at 50% 108%,
      rgba(74, 143, 245, 0.45) 0%,
      rgba(74, 143, 245, 0.18) 32%,
      transparent 62%),
    /* Side vignette — pulls focus to center, darkens edges */
    radial-gradient(ellipse 85% 110% at 50% 50%,
      transparent 28%,
      rgba(11, 16, 36, 0.55) 100%),
    /* Vertical scrim — top hairline + clean fade into next section */
    linear-gradient(180deg,
      rgba(11, 16, 36, 0.62) 0%,
      rgba(11, 16, 36, 0.18) 22%,
      rgba(11, 16, 36, 0.22) 55%,
      rgba(11, 16, 36, 0.82) 88%,
      var(--bg-fallback) 100%);
}

.footer-hero-overlay::before,
.footer-hero-overlay::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}
.footer-hero-overlay::before {
  top: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(176, 208, 255, 0.42) 50%,
    transparent);
}
.footer-hero-overlay::after {
  bottom: 0;
  background: linear-gradient(90deg,
    transparent,
    rgba(176, 208, 255, 0.24) 50%,
    transparent);
}

/* Subtle film grain — adds a tactile, premium feel to the photo */
.footer-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.08;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}

.footer-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding: 0;
  margin: 0;
  /* No own max-width: inherits .container (1080) for site-wide consistency. */
}

.footer-eyebrow {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cobalt-300);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.footer-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lime-400);
  box-shadow: 0 0 0 4px rgba(76, 255, 176, 0.18);
}

.footer-title {
  font-family: var(--font-title);
  font-size: var(--title-lg);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
  max-width: 760px;
  text-wrap: balance;
}

.footer-subtitle {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 580px;
}

.footer-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}

.footer-trust {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.footer-trust strong { color: #fff; font-weight: 600; }
.footer-trust-stars {
  display: inline-flex;
  gap: 2px;
  color: var(--cobalt-300);
  font-size: 13px;
  letter-spacing: 1px;
}
.footer-trust-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  display: inline-block;
}

.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px 12px 20px;
  background: #fff;
  color: #0B1024;
  border-radius: var(--radius-full);
  min-height: 56px;
  transition: transform 200ms ease, box-shadow 240ms ease;
  box-shadow: 0 14px 30px rgba(6, 9, 26, 0.45);
}
.store-btn:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(6, 9, 26, 0.6); }

.store-btn-icon { width: 26px; height: 26px; flex-shrink: 0; }

.store-btn-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1;
  font-family: var(--font-body);
}
.store-btn-text small {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}
.store-btn-text strong {
  font-size: 17px;
  font-weight: 600;
  margin-top: 2px;
  letter-spacing: -0.01em;
}

/* WhatsApp variant — official green */
.store-btn--whatsapp {
  background: #25D366;
  color: #fff;
  box-shadow: 0 14px 30px rgba(37, 211, 102, 0.42);
}
.store-btn--whatsapp:hover {
  box-shadow: 0 20px 40px rgba(37, 211, 102, 0.6);
}
.store-btn--whatsapp .store-btn-text small { opacity: 0.85; }

/* Compact size for in-flow placement (hero) */
.store-btn--sm {
  gap: 9px;
  padding: 9px 18px 9px 14px;
  min-height: 46px;
  box-shadow: 0 10px 24px rgba(6, 9, 26, 0.4);
}
.store-btn--sm.store-btn--whatsapp {
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.4);
}
.store-btn--sm .store-btn-icon { width: 20px; height: 20px; }
.store-btn--sm .store-btn-text small { font-size: 9px; }
.store-btn--sm .store-btn-text strong { font-size: 14px; margin-top: 1px; }

/* Hero CTA row */
.hero-cta-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 8px;
}

/* Trust signal line below the hero CTA */
.hero-trust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}
.hero-trust strong {
  color: #fff;
  font-weight: 600;
}
.hero-trust-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  display: inline-block;
}

/* On small viewports the parallax phone overlaps the trust line.
   Hide it there — the value props are surfaced elsewhere on the page. */
@media (max-width: 720px) {
  .hero-trust { display: none; }
}

/* Footer bottom: brand line + legal line. Landing-only, kept slim. */
.footer-bottom-wrap {
  background: var(--bg-fallback);
  padding-block: 32px 20px;
  border-top: 1px solid var(--ring-soft);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.footer-brand-mini {
  display: inline-flex;
  align-items: center;
}
.footer-brand-mini img {
  height: 28px;
  width: auto;
  display: block;
}

.footer-bottom-social {
  display: inline-flex;
  gap: 8px;
}
.footer-bottom-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 16, 36, 0.5);
  border: 1px solid var(--ring);
  color: rgba(255, 255, 255, 0.78);
  transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
.footer-bottom-social a:hover {
  background: rgba(74, 143, 245, 0.18);
  color: #fff;
  transform: translateY(-1px);
}
.footer-bottom-social svg { width: 16px; height: 16px; }

.footer-legal {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 24px;
  padding-top: 20px;
  border-top: 1px solid var(--ring-soft);
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
}

.footer-legal-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-legal-links a {
  color: rgba(255, 255, 255, 0.62);
  transition: color 160ms ease;
}
.footer-legal-links a:hover { color: #fff; }

/* ─── Sections (common, legacy unused selectors) ────────────── */

.how,
.services,
.coverage,
.cta-final {
  padding: var(--space-4xl) 0;
}

/* ─── How it works ──────────────────────────────────────────── */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xxl);
}

@media (max-width: 880px) {
  .steps { grid-template-columns: 1fr; }
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.step-number {
  font-family: var(--font-title);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--text-accent);
  margin-bottom: var(--space-sm);
}

.step-title {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.step-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ─── Services ──────────────────────────────────────────────── */

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xxl);
}

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

@media (max-width: 560px) {
  .services-grid { grid-template-columns: 1fr; }
}

.service {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.service:hover {
  transform: translateY(-2px);
  border-color: var(--ring-strong);
  box-shadow: var(--shadow-drop-strong);
}

.service--featured {
  background: linear-gradient(180deg, rgba(74, 143, 245, 0.22), var(--glass-tint));
  border-color: var(--ring-strong);
  box-shadow: var(--shadow-halo), var(--shadow-drop);
}

.service-eyebrow { margin-bottom: 0; color: var(--text-accent); }

.service--featured .service-eyebrow { color: var(--lime-400); }

.service-title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.service-price {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  font-family: var(--font-title);
  color: var(--text-primary);
  margin: var(--space-xs) 0 var(--space-sm);
}

.price-from {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 400;
}

.price-value {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.price-unit {
  font-size: 13px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.service-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
  border-top: 1px solid var(--ring-soft);
  padding-top: var(--space-md);
}

.service-features li {
  font-size: 14px;
  color: var(--text-secondary);
  padding-left: 20px;
  position: relative;
}

.service-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lime-400);
  box-shadow: 0 0 6px rgba(76, 255, 176, 0.55);
}

/* ─── Coverage ──────────────────────────────────────────────── */

.coverage-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-xxl);
  align-items: center;
}

@media (max-width: 880px) {
  .coverage-grid { grid-template-columns: 1fr; }
}

.cities {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-xl);
}

.cities li {
  font-size: 15px;
  color: var(--text-secondary);
  padding: var(--space-sm) var(--space-md);
  background: var(--glass-tint-soft);
  border: 1px solid var(--ring-soft);
  border-radius: var(--radius-full);
  text-align: center;
}

.coverage-card { display: flex; flex-direction: column; gap: var(--space-md); }

.map-pin {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, rgba(74, 143, 245, 0.3), rgba(74, 143, 245, 0.1));
  border: 1px solid var(--ring-strong);
  color: var(--cobalt-300);
  box-shadow: var(--shadow-halo);
  margin-bottom: var(--space-sm);
}

.map-pin svg { width: 26px; height: 26px; }

.coverage-card-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.coverage-card-body {
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.coverage-form {
  display: flex;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
}

.input {
  flex: 1 1 220px;
  min-height: 48px;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: var(--glass-tint-inset);
  border: 1px solid var(--ring);
  border-radius: var(--radius-lg);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.input::placeholder { color: var(--text-faint); }

.input:focus {
  outline: none;
  border-color: var(--cobalt-500);
  box-shadow: 0 0 0 3px rgba(74, 143, 245, 0.25);
}

/* ─── CTA final ─────────────────────────────────────────────── */

.cta-final { padding-bottom: var(--space-4xl); }

.cta-card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-xxl);
  align-items: center;
  padding: var(--space-xxl);
  background: linear-gradient(135deg, rgba(74, 143, 245, 0.28), var(--glass-tint));
  border-color: var(--ring-strong);
  box-shadow: var(--shadow-halo), var(--shadow-drop-strong);
}

@media (max-width: 720px) {
  .cta-card { grid-template-columns: 1fr; }
}

.cta-card .section-title { margin-bottom: var(--space-sm); }

.cta-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 200px;
}

/* Legacy footer rules removed — replaced by .footer-bottom-wrap above. */

/* ─── Legal pages (privacy / cookies / mentions) ────────────── */

.legal-page {
  padding-block: clamp(80px, 12vh, 140px) 0;
  min-height: 60vh;
}

.legal-content {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.legal-back {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cobalt-300);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  transition: color 160ms ease, transform 160ms ease;
}
.legal-back:hover { color: #fff; transform: translateX(-2px); }

.legal-title {
  font-family: var(--font-title);
  font-size: var(--title-md);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 8px 0 0;
  text-wrap: balance;
}

.legal-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 16px;
}

.legal-toc {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--glass-tint);
  border: 1px solid var(--ring);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.legal-toc-title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
  margin: 0 0 8px;
}
.legal-toc a {
  font-family: var(--font-body);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.86);
  padding: 4px 0;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  transition: color 160ms ease;
}
.legal-toc a:hover { color: var(--cobalt-300); }

.legal-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-margin-top: 100px;
}

.legal-section h2 {
  font-family: var(--font-title);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 24px 0 4px;
}

.legal-section h3 {
  font-family: var(--font-title);
  font-size: 17px;
  font-weight: 600;
  color: #fff;
  margin: 12px 0 0;
}

.legal-section p,
.legal-section ul {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 65ch;
}

.legal-section ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.legal-section li {
  padding-left: 20px;
  position: relative;
}
.legal-section li::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 0.7em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cobalt-400);
}

.legal-section a {
  color: var(--cobalt-300);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.legal-section a:hover { color: #fff; }

.legal-section strong { color: #fff; font-weight: 600; }

.legal-callout {
  background: rgba(74, 143, 245, 0.08);
  border: 1px solid rgba(124, 177, 255, 0.28);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.86);
}
.legal-callout strong { color: #fff; }

/* ─── Réduit-mouvement ──────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .slide.is-active { transform: none; }
}

/* ─── Generic page + 404 / fallback ───────────────────────────── */

.fallback-main,
.legal-main {
  padding-block: clamp(80px, 12vw, 160px);
  min-height: 60vh;
}

.fallback-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  max-width: 640px;
}

.fallback-title,
.legal-title {
  font-family: var(--font-title);
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: #fff;
  margin: 0;
}

.fallback-body,
.legal-body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.legal-content {
  max-width: 780px;
}

.legal-header {
  margin-bottom: var(--space-xxl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--ring-soft);
}

.legal-body p,
.legal-body ul,
.legal-body ol {
  margin: 0 0 var(--space-md);
}

.legal-body h2 {
  font-family: var(--font-title);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 600;
  color: #fff;
  margin: var(--space-xxl) 0 var(--space-md);
  letter-spacing: -0.015em;
}

.legal-body h3 {
  font-family: var(--font-title);
  font-size: 18px;
  font-weight: 600;
  color: #fff;
  margin: var(--space-xl) 0 var(--space-sm);
}

.legal-body a {
  color: var(--cobalt-300);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(124, 177, 255, 0.4);
}
.legal-body a:hover { text-decoration-color: var(--cobalt-300); }

.legal-body strong { color: #fff; font-weight: 600; }

/* ─── Mobile overrides — final polish pass ────────────────────── */

@media (max-width: 720px) {

  /* ── Hero parallax → static fan center phone ───────────────── */
  /* JS moves .phone--parallax into .phones; pin is hidden. */
  .parallax-phone-pin { display: none !important; }
  .phones .phone--parallax {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 230px;
    z-index: 2;
  }

  /* The 220px clearance under .track existed for the parallax exit;
     on mobile, the parallax is gone, so cut the void. */
  .track { margin-bottom: 32px; }

  /* ── Testimonials — vertical stack, no marquee animation ────── */
  .marquee {
    overflow: visible;
    scroll-snap-type: none;
    -webkit-mask-image: none;
            mask-image: none;
    padding-inline: var(--container-padding);
  }
  .marquee + .marquee { margin-top: 14px; }
  .marquee-track--left,
  .marquee-track--right {
    animation: none !important;
    width: 100%;
    flex-direction: column;
    gap: 14px;
  }
  .testimonial {
    width: 100% !important;
    flex: 0 0 auto;
  }
  /* Duplicates hidden (aria-hidden) + limit each row to 3 unique → 6 total. */
  .testimonial[aria-hidden="true"] { display: none; }
  .marquee-track--left  > .testimonial:not([aria-hidden="true"]):nth-of-type(n+4),
  .marquee-track--right > .testimonial:not([aria-hidden="true"]):nth-of-type(n+4) { display: none; }

  /* ── Features — single image visible, click-to-swap ───────── */
  .features-carousel {
    height: auto;
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
    display: block;
    margin-top: 8px;
  }
  .features-track {
    transform: none !important;
    flex-direction: column;
    gap: 0;
    max-width: 100%;
  }
  .features-slide {
    display: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .features-slide.is-active { display: block !important; }
  .features-slide--clone { display: none !important; }

  /* ── Club card — keep everything inside the rounded card ──── */
  .club-card { grid-template-columns: 1fr; overflow: hidden; }
  .club-content {
    padding: 28px 22px;
    gap: 16px;
    min-width: 0;
  }
  .club-content > * { max-width: 100%; min-width: 0; }
  .club-title { font-size: clamp(22px, 6vw, 28px); }
  .club-subtitle { font-size: 14px; }
  .club-features { gap: 12px 16px; }
  .club-feat-title { font-size: 14px; line-height: 1.25; }
  .club-feat-meta { font-size: 12px; }
  .club-cta-row {
    width: 100%;
    align-items: stretch;
  }
  .club-cta-row .btn--pill {
    width: 100%;
    white-space: normal;
    line-height: 1.25;
    min-height: 56px;
    padding: 14px 18px;
    font-size: 14.5px;
    text-align: center;
    justify-content: center;
  }
  .club-trust { font-size: 12px; text-align: center; }
  /* Price block — redundant with the CTA on mobile. */
  .club-price-block { display: none; }

  /* ── Pro callout — same gutters as the Club card ──────────── */
  .pro-callout {
    padding: 20px 22px;
    gap: 14px;
  }
  .pro-callout > div { flex: 1 1 100%; min-width: 0; }
  .pro-callout .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .pro-title { font-size: 15px; }
  .pro-meta { font-size: 12px; }

  /* ── Footer hero — boost contrast + tidy stack ──────────── */
  .footer-hero { padding-block: clamp(64px, 14vh, 110px); }
  .footer-hero-overlay {
    background:
      radial-gradient(ellipse 90% 75% at 50% 108%, rgba(74, 143, 245, 0.36), transparent 60%),
      linear-gradient(180deg,
        rgba(11, 16, 36, 0.72) 0%,
        rgba(11, 16, 36, 0.62) 35%,
        rgba(11, 16, 36, 0.82) 70%,
        rgba(11, 16, 36, 0.95) 100%);
  }
  .footer-title { font-size: clamp(28px, 7vw, 38px); }
  .footer-subtitle { font-size: 14px; line-height: 1.55; max-width: 92%; }
  .footer-cta-row { width: 100%; align-items: stretch; }
  .footer-cta-row .store-btn { justify-content: center; width: 100%; }
  .footer-trust {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 10px;
    font-size: 12px;
  }

  /* Footer bottom — socials + brand + legal stack neatly. */
  .footer-bottom { gap: 18px; justify-content: center; }
  .footer-legal {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
  .footer-legal-links { justify-content: center; }
}

@media (max-width: 480px) {
  .phones .phone--parallax { width: 200px; }
}