/* ========================================================================
   String Tension AI — Stylesheet
   ======================================================================== */

/*  TABLE OF CONTENTS
    ─────────────────────────────────────────────
    1.  Reset & Custom Properties ............  39
    2.  Skip Nav (Accessibility) .............  88
    3.  Navigation ........................... 108
    4.  Section Layout ....................... 270
    5.  Floating Icons ....................... 343
    6.  Hero ................................. 398
    7.  Features ............................. 639
    8.  Mockup Components .................... 759
    9.  How It Works ......................... 889
   10.  Big Feature Sections ................. 937
   11.  Insights / Advisor Panel ............ 1114
   12.  Audience Section .................... 1234
   13.  Stats Bar ........................... 1287
   14.  Use-Cases Band ...................... 1327
   15.  Science Section ..................... 1356
   16.  FAQ ................................. 1413
   17.  Final CTA ........................... 1510
   18.  Footer .............................. 1526
   19.  Why Tension Matters (Impact Grid) ... 1567
   20.  Competitive Context (Comparison) .... 1620
   21.  Testimonials ........................ 1662
   22.  Science Summary ..................... 1741
   23.  CTA Trust Micro-Text ................ 1765
   24.  Mini Chart .......................... 1787
   25.  Scroll Reveal Animations ............ 1809
   26.  Background Utilities ................ 1834
   27.  Legal Pages ......................... 1885
   28.  Ultra-Wide (1440px+) ............... 2041
   29.  Responsive .......................... 2185
   30.  Reduced Motion ...................... 2476
   ───────────────────────────────────────────── */

/* ── RESET & CUSTOM PROPERTIES ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg-start: #f0f4fa;
  --bg-mid: #e8eef8;
  --bg-end: #f5f7fb;
  --text-primary: #0a0e1a;
  --text-secondary: #5a6178;
  --text-muted: #8b92a8;
  --accent: #4a7aff;
  --accent-light: #6b94ff;
  --accent-bg: #eef3ff;

  /* Semantic surfaces (3 glass tiers) */
  --surface-1: rgba(255, 255, 255, 0.55);  /* resting cards */
  --surface-2: rgba(255, 255, 255, 0.72);  /* elevated: stats, hero preview, advisor, scroll prompt, float pills */
  --surface-3: rgba(255, 255, 255, 0.88);  /* chrome: nav scrolled, modals */

  /* Shadows */
  --shadow-sm: 0 2px 8px rgba(10, 14, 26, 0.06), 0 1px 2px rgba(10, 14, 26, 0.04);
  --shadow-md: 0 8px 32px rgba(10, 14, 26, 0.10), 0 2px 8px rgba(10, 14, 26, 0.05);
  --shadow-lg: 0 20px 56px rgba(10, 14, 26, 0.12), 0 4px 12px rgba(10, 14, 26, 0.06);
  --shadow-float: 0 16px 48px rgba(10, 14, 26, 0.12), 0 4px 12px rgba(10, 14, 26, 0.05);
  --shadow-accent: 0 4px 20px rgba(74, 122, 255, 0.30), 0 1px 3px rgba(74, 122, 255, 0.20);
  --shadow-accent-sm: 0 4px 12px rgba(74, 122, 255, 0.20);
  --shadow-accent-lg: 0 12px 36px rgba(74, 122, 255, 0.40), 0 2px 6px rgba(74, 122, 255, 0.25);

  /* Card hover — layered: subtle wet-glass top + hairline edge + soft accent glow + dark elevation */
  --shadow-card-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    0 1px 0 rgba(255, 255, 255, 0.45),
    0 24px 40px -14px rgba(74, 122, 255, 0.18),
    0 12px 28px rgba(10, 14, 26, 0.08);
  --shadow-card-hover-sm:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 rgba(255, 255, 255, 0.4),
    0 14px 24px -10px rgba(74, 122, 255, 0.14),
    0 6px 16px rgba(10, 14, 26, 0.06);

  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 24px;

  /* Spacing scale (8px base) */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 140px;

  /* Z-index scale */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Motion scale */
  --dur-micro: 150ms;       /* hover, press, focus ring */
  --dur-base: 250ms;        /* nav links, button color/bg */
  --dur-transition: 350ms;  /* card lift, accordion, tab swap */
  --dur-reveal: 600ms;      /* scroll-into-view */
  --dur-ambient: 6s;        /* float-bob, wave-pulse, cycle */

  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --status-green: #1a8a4a;
  --status-amber: #c47f17;
  --star: #f5a623;

  /* Tennis accent layer (secondary, restrained) */
  --accent-tennis: #d4ed3a;        /* optic yellow */
  --accent-tennis-soft: #f3f9c2;   /* yellow tint for badges/pills */
  --court: #2a7a4a;                /* court green — "fresh strings" */
  --court-soft: #e6f3ec;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-start);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ── SKIP NAV (Accessibility) ── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 200;
  padding: 12px 24px;
  background: var(--text-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  transition: top var(--dur-base) var(--ease-out-expo);
}

.skip-link:focus {
  top: 0;
}

/* ========================================================================
   NAVIGATION
   ======================================================================== */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 48px;
  background: rgba(240, 244, 250, 0.72);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  transition: background var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo);
}

#navbar.scrolled {
  background: rgba(240, 244, 250, 0.88);
  box-shadow: 0 1px 20px rgba(10, 14, 26, 0.08), 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 20px;
  color: var(--text-primary);
  text-decoration: none;
  letter-spacing: -0.3px;
}

.nav-logo img {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  object-fit: cover;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a:not(.nav-cta) {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out-expo);
  position: relative;
  padding-bottom: 4px;
}

.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transition: width var(--dur-transition) var(--ease-out-expo), left var(--dur-transition) var(--ease-out-expo);
}

.nav-links a:not(.nav-cta):hover::after,
.nav-links a:not(.nav-cta).nav-active::after {
  width: 100%;
  left: 0;
}

.nav-links a:not(.nav-cta):hover,
.nav-links a:not(.nav-cta).nav-active {
  color: var(--text-primary);
}

.nav-links a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(74, 122, 255, 0.15);
}

.nav-links a:not(.nav-cta).nav-active {
  font-weight: 600;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 10px;
  background: var(--text-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out-expo);
}

.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(10, 14, 26, 0.2);
}

.nav-cta:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(10, 14, 26, 0.12);
  transition-duration: var(--dur-micro);
}

.nav-cta:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(74, 122, 255, 0.15);
}

.nav-cta svg {
  width: 16px;
  height: 16px;
}

/* ── MOBILE MENU TOGGLE ── */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text-primary);
  border-radius: 2px;
  transition: transform var(--dur-transition) var(--ease-out-expo), opacity var(--dur-transition) var(--ease-out-expo), border-radius var(--dur-transition) var(--ease-out-expo);
}

.nav-toggle[aria-expanded="true"] span {
  border-radius: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  transform: scale(0);
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ========================================================================
   SECTION LAYOUT
   ======================================================================== */
section {
  position: relative;
  padding: 140px 48px;
  overflow: hidden;
}

/* Subtle gradient divider between adjacent sections */
section + section::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(80%, 800px);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(10, 14, 26, 0.08), transparent);
  z-index: 3;
  pointer-events: none;
}

/* Opt out sections with distinct backgrounds or special treatment */
.big-feature::after,
.bg-accent-subtle::after,
#final-cta::after {
  display: none;
}

.section-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* ── HEADINGS ── */
.section-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2.5px;
  color: var(--text-primary);
  margin-bottom: 24px;
}

.section-subtitle {
  font-size: clamp(17px, 1.8vw, 20px);
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 640px;
}

.text-center {
  text-align: center;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* ========================================================================
   CARD ACCENT RING (perimeter — counterclockwise stroke draw)
   A conic-gradient ring on a pseudo-element that traces the card's
   perimeter. `from -45deg` puts the start at the upper-left direction;
   the colored sector grows backwards from 100% so the leading edge sweeps
   counterclockwise. A delayed halo box-shadow lights up just as the
   stroke lands, giving the ring a "lit" finish.
   ======================================================================== */
@property --ring-draw {
  syntax: '<percentage>';
  initial-value: 0%;
  inherits: false;
}

.feature-card,
.audience-card,
.impact-card,
.comparison-card,
.testimonial-card {
  position: relative;
}

.feature-card::after,
.audience-card::after,
.impact-card::after,
.comparison-card::after,
.testimonial-card::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--radius-lg) + 1px);
  padding: 2px;
  background: conic-gradient(
    from -45deg,
    transparent 0%,
    transparent calc(100% - var(--ring-draw)),
    var(--accent) calc(100% - var(--ring-draw)),
    var(--accent) 100%
  );
  /* Mask trick: keep only the 2px padding ring, hide the inner area.
     Without @property support the value jumps 0→100% instead of
     interpolating — an acceptable degradation. */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  /* Halo at rest: 0 spread + transparent so it can BLOOM (grow + brighten)
     into place rather than just fading in at fixed size. */
  box-shadow:
    0 0 0 0 rgba(74, 122, 255, 0),
    0 0 0 3px rgba(74, 122, 255, 0);
  pointer-events: none;
  /* Exit transition: brisk, clean retraction when the cursor leaves. */
  transition:
    --ring-draw 520ms cubic-bezier(0.4, 0, 0.6, 1),
    box-shadow 340ms cubic-bezier(0.4, 0, 0.6, 1);
}

.feature-card:hover::after,
.audience-card:hover::after,
.impact-card:hover::after,
.comparison-card:hover::after,
.testimonial-card:hover::after {
  --ring-draw: 100%;
  box-shadow:
    0 0 0 1px rgba(74, 122, 255, 0.22),
    0 0 0 9px rgba(74, 122, 255, 0.09);
  /* Entry transition: deep ease-out (easeOutQuint-style) for a fluid,
     ink-flowing draw; halo blooms with a slight delay so it lights up
     the ring just as the stroke nears completion. */
  transition:
    --ring-draw 1500ms cubic-bezier(0.19, 1, 0.22, 1),
    box-shadow 1050ms cubic-bezier(0.16, 1, 0.3, 1) 450ms;
}

/* ========================================================================
   FLOATING ICONS
   ======================================================================== */
.float-icon {
  position: absolute;
  z-index: var(--z-base);
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif;
  background: var(--surface-2);
  box-shadow: var(--shadow-float);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.75);
  animation: float-bob 6s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

/* Tennis ball pills get a soft optic-yellow glow ring */
.float-icon--ball {
  box-shadow:
    0 0 0 6px rgba(212, 237, 58, 0.18),
    var(--shadow-float);
}

.float-icon.lg {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  font-size: 40px;
}

.float-icon.sm {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  font-size: 24px;
}

/* Float icon positions — Hero */
.float-icon--hero-1 { top: 15%; left: 6%; animation-delay: -1s; }
.float-icon--hero-2 { top: 10%; right: 8%; animation-delay: -3s; }
.float-icon--hero-3 { top: 55%; left: 3%; animation-delay: -2s; }
.float-icon--hero-4 { top: 65%; right: 5%; animation-delay: -4.5s; }
.float-icon--hero-5 { bottom: 12%; left: 12%; animation-delay: -0.5s; }
.float-icon--hero-6 { bottom: 8%; right: 10%; animation-delay: -2.5s; }

/* Float icon positions — CTA */
.float-icon--cta-1 { top: 12%; left: 8%; animation-delay: -1.5s; }
.float-icon--cta-2 { top: 18%; right: 12%; animation-delay: -3.5s; }
.float-icon--cta-3 { bottom: 15%; left: 10%; animation-delay: -0.8s; }
.float-icon--cta-4 { bottom: 20%; right: 8%; animation-delay: -2.2s; }

@keyframes float-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  33% { transform: translateY(-12px) rotate(2deg); }
  66% { transform: translateY(4px) rotate(-1deg); }
}

/* ========================================================================
   HERO
   ======================================================================== */
#hero {
  padding-top: 200px;
  padding-bottom: 160px;
  text-align: center;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

#hero .section-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#hero .section-subtitle {
  max-width: 680px;
  margin: 0 auto 44px;
  text-align: center;
}

/* ── CTA BUTTONS ── */
.hero-cta-row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out-expo);
  box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-accent-lg);
}

.btn-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: var(--shadow-accent-sm);
  transition-duration: var(--dur-micro);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: var(--shadow-accent), 0 0 0 6px rgba(74, 122, 255, 0.15);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 32px;
  border-radius: 14px;
  background: transparent;
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border: 2px solid rgba(10, 14, 26, 0.15);
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-out-expo), border-color var(--dur-base) var(--ease-out-expo), background var(--dur-base) var(--ease-out-expo);
}

.btn-secondary:hover {
  transform: translateY(-3px);
  border-color: rgba(10, 14, 26, 0.3);
  background: rgba(10, 14, 26, 0.04);
  box-shadow: 0 8px 24px rgba(10, 14, 26, 0.08);
}

.btn-secondary:active {
  transform: translateY(1px) scale(0.98);
  border-color: rgba(10, 14, 26, 0.2);
  background: rgba(10, 14, 26, 0.06);
  box-shadow: none;
  transition-duration: var(--dur-micro);
}

.btn-secondary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 6px rgba(74, 122, 255, 0.15);
}

/* ── HERO HEADLINE (H1 wrapper) ── */
.hero-headline {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  margin: 0;
}

/* ── HERO CYCLING TEXT ── */
.hero-cycle-wrap {
  font-size: clamp(40px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -2.5px;
  margin-bottom: 8px;
}

.hero-cycle-wrap--last {
  margin-bottom: 12px;
}

.cycle-muted { color: #c8cdd8; }
.cycle-bold { color: var(--text-primary); }

.cycle-container {
  display: block;
  overflow: hidden;
  height: 1.4em;
}

.cycle-inner {
  display: flex;
  flex-direction: column;
  animation: cycle-scroll 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cycle-item {
  flex-shrink: 0;
  height: 1.4em;
  display: flex;
  align-items: center;
  justify-content: center;
}

@keyframes cycle-scroll {
  0%, 18% { transform: translate3d(0, 0, 0); }
  25%, 43% { transform: translate3d(0, -25%, 0); }
  50%, 68% { transform: translate3d(0, -50%, 0); }
  75%, 100% { transform: translate3d(0, -75%, 0); }
}

/* ── HERO APP PREVIEW ── */
.hero-app-preview {
  margin-top: 64px;
  width: 100%;
  max-width: 420px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 24px;
  padding: 28px 28px 20px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  text-align: left;
}

.preview-question {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.preview-question .sparkle { color: var(--accent); }

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

.preview-body strong {
  color: var(--text-primary);
  font-weight: 700;
}

.preview-cta {
  margin-top: 16px;
  font-size: 14px;
  color: var(--text-secondary);
}

.preview-cta strong {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── SCROLL PROMPT ── */
.scroll-prompt-wrapper {
  text-align: center;
  padding-bottom: 40px;
  background: var(--bg-start);
}

.scroll-prompt {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 16px;
  background: var(--surface-2);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-sm);
  border: 1px solid rgba(255, 255, 255, 0.75);
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

.scroll-prompt .sparkle,
.preview-question .sparkle {
  color: var(--accent);
}

.scroll-arrow {
  display: inline-flex;
  color: var(--accent);
  animation: bounce-down 2s ease-in-out infinite;
}

@keyframes bounce-down {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ========================================================================
   FEATURES
   ======================================================================== */
.feature-label-hero {
  font-size: 14px;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 16px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.feature-title-hero {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -1.5px;
  color: var(--text-primary);
  max-width: 700px;
}

.feature-title-hero--narrow {
  max-width: 540px;
}

.feature-title-hero--advisor {
  max-width: 520px;
}

/* ── FEATURE GRID (2-col) ── */
.feature-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 56px;
  text-align: left;
}

.feature-card {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo), border-color var(--dur-transition) var(--ease-out-expo), background var(--dur-transition) var(--ease-out-expo);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-card-hover);
  background: var(--surface-2);
}

.feature-card h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  margin-bottom: 12px;
}

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

/* Feature card with inner mockup */
.feature-card-visual {
  background: linear-gradient(135deg, #e8eef8, #dce6f5);
  border-radius: var(--radius-lg);
  padding: 48px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
  position: relative;
  overflow: hidden;
}

.feature-card-visual--alt {
  background: linear-gradient(135deg, #eaeff8, #dfe6f3);
}

/* Feature list items (checkmarks) */
.feature-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 24px;
}

.feature-list-item {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 15px;
  color: var(--text-secondary);
}

.feature-list-item .check-icon {
  flex-shrink: 0;
  margin-top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  background: #e8f8ee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.feature-list-item .check-icon svg {
  width: 12px;
  height: 12px;
  color: var(--status-green);
}

/* ========================================================================
   MOCKUP COMPONENTS
   ======================================================================== */

/* ── WAVEFORM ANIMATION ── */
.waveform-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  height: 80px;
  padding: 16px 0;
}

.wave-bar {
  width: 4px;
  border-radius: 2px;
  background: var(--accent);
  animation: wave-pulse 1.2s ease-in-out infinite;
}

@keyframes wave-pulse {
  0%, 100% { height: 12px; opacity: 0.4; }
  50% { height: var(--h, 48px); opacity: 1; }
}

/* ── SETTINGS MOCKUP ── */
.settings-mockup {
  background: #fff;
  border-radius: 20px;
  padding: 24px;
  box-shadow: var(--shadow-md);
  width: 340px;
}

.settings-title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.setting-item { text-align: center; }

.setting-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: #f0f4fa;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 22px;
  position: relative;
}

.setting-icon .check {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

.setting-icon .check svg {
  width: 10px;
  height: 10px;
  color: #fff;
}

.setting-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-primary);
}

.setting-status {
  font-size: 10px;
  color: var(--text-muted);
}

/* ── SHORTCUT / FLOW MOCKUP ── */
.shortcut-mockup {
  display: flex;
  align-items: center;
  gap: 12px;
}

.key-cap {
  background: #fff;
  border-radius: 12px;
  padding: 14px 20px;
  box-shadow: var(--shadow-md), inset 0 -2px 0 rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.key-cap .key-symbol {
  font-size: 20px;
  color: var(--text-primary);
}

.key-cap .key-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
}

.key-plus {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 300;
}

/* ========================================================================
   HOW IT WORKS
   ======================================================================== */
.steps-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}

.step-card { text-align: center; }

.step-num {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  margin: 0 auto 20px;
  background: var(--accent);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-accent-sm);
  transition: transform var(--dur-transition) var(--ease-spring), box-shadow var(--dur-transition) var(--ease-out-expo);
}

.step-card:hover .step-num {
  transform: scale(1.1);
  box-shadow: var(--shadow-accent);
}

.step-card h3 {
  font-size: 22px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.step-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 320px;
  margin: 0 auto;
}

/* ========================================================================
   BIG FEATURE SECTIONS
   ======================================================================== */
.big-feature {
  padding: 140px 48px;
}

.big-feature .section-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.big-feature.reverse .section-inner {
  direction: rtl;
}

.big-feature.reverse .section-inner > * {
  direction: ltr;
}

/* ── PRODUCT MOCKUP ── */
.product-mockup {
  background: #fff;
  border-radius: 20px;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.04);
  max-width: 380px;
}

.mockup-topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid #f0f2f5;
}

.mockup-topbar-title {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

.mockup-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.mockup-dot.r { background: #ff5f57; }
.mockup-dot.y { background: #febc2e; }
.mockup-dot.g { background: #28c840; }

.mockup-body { padding: 24px; }

/* ── TENSION READING ── */
.tension-display {
  text-align: center;
  padding: 32px 0;
}

.tension-value {
  font-size: 72px;
  font-weight: 800;
  letter-spacing: -3px;
  color: var(--text-primary);
}

.tension-unit {
  font-size: 24px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 4px;
}

.tension-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
}

.tension-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-top: 12px;
}

.tension-badge.good { background: #e8f8ee; color: var(--status-green); }
.tension-badge.warn { background: #fff5e6; color: var(--status-amber); }

.confidence-bar {
  margin-top: 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.conf-track {
  flex: 1;
  height: 6px;
  background: #f0f2f5;
  border-radius: 3px;
  overflow: hidden;
}

.conf-fill {
  height: 100%;
  width: 94%;
  background: linear-gradient(90deg, var(--accent), #6dd5a0);
  border-radius: 3px;
}

.confidence-value {
  font-weight: 600;
  color: var(--text-primary);
}

/* ── MEASUREMENT META GRID ── */
.measure-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 20px;
}

.meta-item {
  background: #f7f9fc;
  border-radius: 10px;
  padding: 12px;
  text-align: center;
}

.meta-item .meta-val {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
}

.meta-item .meta-key {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* ── BADGE PILLS ── */
.badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.badge.blue { background: #eef3ff; color: var(--accent); }
.badge.green { background: #e8f8ee; color: var(--status-green); }
.badge.amber { background: #fff5e6; color: var(--status-amber); }

/* ========================================================================
   INSIGHTS / ADVISOR PANEL
   ======================================================================== */
.insights-panel {
  background: #fff;
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  max-width: 360px;
}

.insights-tabs {
  display: flex;
  border-bottom: 1px solid #f0f2f5;
}

.insights-tab {
  flex: 1;
  padding: 14px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-base) var(--ease-out-expo), border-bottom-color var(--dur-base) var(--ease-out-expo);
  background: none;
  border-top: none;
  border-left: none;
  border-right: none;
  font-family: var(--font);
}

.insights-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.insights-tab.active {
  color: var(--text-primary);
  border-bottom-color: var(--text-primary);
}

.insights-body { padding: 20px; }

/* Advisor header */
.advisor-header {
  text-align: center;
  padding: 16px 0 20px;
}

.advisor-label {
  font-size: 12px;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.advisor-value {
  font-size: 48px;
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--text-primary);
}

.advisor-unit {
  font-size: 18px;
  color: var(--text-muted);
  font-weight: 500;
  margin-left: 2px;
}

/* Adjustment factors */
.factors-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.factor-entry {
  margin-bottom: 12px;
}

.factor-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-bottom: 4px;
}

.factor-name { color: var(--text-secondary); }
.factor-value--positive { color: var(--status-green); font-weight: 600; }
.factor-value--negative { color: var(--status-amber); font-weight: 600; }

.factor-track {
  height: 4px;
  background: #f0f2f5;
  border-radius: 2px;
  overflow: hidden;
}

.factor-fill {
  height: 100%;
  border-radius: 2px;
}

.factor-fill--green { background: var(--status-green); }
.factor-fill--amber { background: var(--status-amber); }

.insight-suggestion {
  background: #eef6ff;
  border: 1px solid #d4e5ff;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--accent);
  line-height: 1.55;
  margin-top: 20px;
}

/* ========================================================================
   AUDIENCE SECTION
   ======================================================================== */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.audience-card {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo), border-color var(--dur-transition) var(--ease-out-expo);
}

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

.audience-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-accent-sm);
}

.audience-card h3 {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: -0.3px;
}

.audience-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ========================================================================
   STATS BAR
   ======================================================================== */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  margin-top: 64px;
  background: var(--surface-2);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: var(--radius-lg);
  padding: 56px 48px;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--shadow-md);
}

.stat-item { text-align: center; }

.stat-value {
  font-size: clamp(36px, 4vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--accent);
}

.stat-suffix {
  font-size: 0.55em;
  font-weight: 700;
  color: var(--text-secondary);
  margin-left: 4px;
  vertical-align: 0.18em;
  letter-spacing: 0;
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
  margin-top: 4px;
  font-weight: 500;
}

/* ========================================================================
   USE-CASES BAND
   ======================================================================== */
.use-cases-band {
  padding: 100px 48px;
}

.use-cases-headline {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 24px;
  margin-bottom: 48px;
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -1.5px;
}

.use-case-muted {
  color: #c8cdd8;
  transition: color var(--dur-reveal) var(--ease-out-expo);
}

.use-case-muted.use-case-highlight {
  color: var(--text-primary);
}


/* ========================================================================
   SCIENCE SECTION
   ======================================================================== */
.science-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 48px;
}

.science-step {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  padding: 28px 24px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo);
  position: relative;
}

.science-step::before {
  content: attr(data-step);
  position: absolute;
  top: -14px;
  left: 20px;
  background: var(--accent);
  color: #fff;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  box-shadow: var(--shadow-accent-sm);
}

.science-step h3 {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 6px;
  margin-top: 4px;
}

.science-step p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.science-step:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-card-hover-sm);
}

/* ========================================================================
   FAQ
   ======================================================================== */
.faq-list {
  max-width: 720px;
  margin: 48px auto 0;
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 8px 32px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
}

.faq-item {
  border-bottom: 1px solid #e8ecf2;
}

.faq-question {
  width: calc(100% + 32px);
  font-size: 18px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  user-select: none;
  letter-spacing: -0.2px;
  padding: 24px 16px;
  margin: 0 -16px;
  background: none;
  border: none;
  border-radius: 12px;
  color: var(--text-primary);
  font-family: var(--font);
  text-align: left;
  transition: background-color var(--dur-base) var(--ease-out-expo);
}

.faq-question:hover {
  background: rgba(74, 122, 255, 0.04);
}

.faq-item.open .faq-question {
  background: rgba(74, 122, 255, 0.04);
}

.faq-question:active {
  transform: scale(0.995);
  transition-duration: var(--dur-micro);
}

.faq-question:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: 4px;
  box-shadow: 0 0 0 6px rgba(74, 122, 255, 0.15);
}

.faq-icon {
  flex-shrink: 0;
  font-size: 24px;
  font-weight: 300;
  color: var(--text-muted);
  transition: transform var(--dur-transition) var(--ease-out-expo), color var(--dur-transition) var(--ease-out-expo);
  line-height: 1;
}

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

.faq-item.open .faq-icon,
.faq-item[open] .faq-icon {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--dur-reveal) var(--ease-out-expo), padding var(--dur-transition) var(--ease-out-expo);
}

.faq-item.open .faq-answer {
  max-height: 400px;
  padding-bottom: 24px;
}

.faq-answer p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  text-align: left;
}

/* ========================================================================
   FINAL CTA
   ======================================================================== */
#final-cta {
  text-align: center;
  background: linear-gradient(180deg, var(--bg-start), #e0e8f5);
}

#final-cta .section-subtitle {
  margin: 0 auto 40px;
}

#final-cta .hero-cta-row {
  margin-top: 40px;
}

/* ========================================================================
   FOOTER
   ======================================================================== */
footer {
  padding: 64px 48px;
  text-align: center;
  background: linear-gradient(180deg, var(--bg-start), #e4ecf5);
  border-top: none;
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  border-radius: 1px;
}

footer p {
  font-size: 14px;
  color: var(--text-muted);
}

footer p + p {
  margin-top: 8px;
}

footer a {
  color: var(--accent);
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}

/* ========================================================================
   WHY TENSION MATTERS (Impact Grid)
   ======================================================================== */
.tension-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.impact-card {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 36px 28px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo), border-color var(--dur-transition) var(--ease-out-expo);
}

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

.impact-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin: 0 auto 16px;
  box-shadow: var(--shadow-accent-sm);
}

.impact-card h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 8px;
}

.impact-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ========================================================================
   COMPETITIVE CONTEXT (Comparison Grid)
   ======================================================================== */
.comparison-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.comparison-card {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo), border-color var(--dur-transition) var(--ease-out-expo);
  text-align: left;
}

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

.comparison-card h3 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.comparison-card p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* ========================================================================
   TESTIMONIALS
   ======================================================================== */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 56px;
}

.testimonial-card {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 52px 32px 40px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-transition) var(--ease-out-expo), box-shadow var(--dur-transition) var(--ease-out-expo), border-color var(--dur-transition) var(--ease-out-expo);
  text-align: left;
  position: relative;
  display: flex;
  flex-direction: column;
}

.testimonial-card::before {
  content: '\201C';
  position: absolute;
  top: 24px;
  left: 32px;
  font-size: 48px;
  font-weight: 800;
  line-height: 1;
  color: var(--accent);
  opacity: 0.15;
  font-family: Georgia, serif;
}

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

.testimonial-stars {
  font-size: 18px;
  color: var(--star);
  letter-spacing: 2px;
  margin-bottom: 16px;
}

.testimonial-quote {
  font-size: 16px;
  color: var(--text-secondary);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: 20px;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  margin-top: auto;
}

.testimonial-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--text-primary);
}

.testimonial-detail {
  font-size: 13px;
  color: var(--text-muted);
}

/* ========================================================================
   SCIENCE SUMMARY
   ======================================================================== */
.science-summary {
  max-width: 680px;
  margin: 24px auto 40px;
  background: #eef6ff;
  border: 1px solid #d4e5ff;
  border-radius: var(--radius);
  padding: 24px 28px;
  text-align: left;
}

.science-summary p {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.science-summary strong {
  color: var(--accent);
  font-weight: 700;
}

/* ========================================================================
   CTA TRUST MICRO-TEXT
   ======================================================================== */
.cta-micro-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.cta-micro-text .separator {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--text-muted);
  opacity: 0.5;
}

/* ========================================================================
   MINI CHART
   ======================================================================== */
.mini-chart {
  display: flex;
  align-items: end;
  gap: 6px;
  height: 48px;
  margin-top: 12px;
}

.mini-bar {
  flex: 1;
  border-radius: 4px 4px 0 0;
  background: var(--accent);
  opacity: 0.7;
  transition: opacity var(--dur-micro) var(--ease-out-expo);
  cursor: pointer;
}

.mini-bar:hover { opacity: 1; }

/* ========================================================================
   SCROLL REVEAL ANIMATIONS
   ======================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Wider stagger for science pipeline steps */
.science-steps .science-step.reveal-delay-1 { transition-delay: 0.15s; }
.science-steps .science-step.reveal-delay-2 { transition-delay: 0.3s; }
.science-steps .science-step.reveal-delay-3 { transition-delay: 0.45s; }
.science-steps .science-step.reveal-delay-4 { transition-delay: 0.6s; }

/* ========================================================================
   BACKGROUND UTILITIES
   ======================================================================== */
.bg-gradient-1 {
  background: linear-gradient(180deg, #f0f4fa 0%, #e6ecf6 50%, #f0f4fa 100%);
}

.bg-gradient-2 {
  background: linear-gradient(180deg, #f0f4fa 0%, #eaf0f8 100%);
}

.bg-accent-subtle {
  background: linear-gradient(180deg, #edf2fe 0%, #f0f4fa 100%);
}

.bg-orb {
  position: relative;
  overflow: hidden;
}

.bg-orb::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 122, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.bg-orb-left {
  position: relative;
  overflow: hidden;
}

.bg-orb-left::before {
  content: '';
  position: absolute;
  top: -200px;
  left: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 122, 255, 0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* ========================================================================
   LEGAL PAGES (Privacy, Terms)
   ======================================================================== */

/* ── Legal Header ── */
.legal-header {
  padding: 180px 48px 60px;
  text-align: center;
}

.legal-effective-date {
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
  margin-top: 8px;
}

/* ── Legal Body ── */
.legal-body {
  padding: 80px 48px 120px;
}

.legal-content {
  max-width: 760px;
  margin: 0 auto;
}

/* ── Table of Contents ── */
.legal-toc {
  background: var(--surface-1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-lg);
  padding: 32px 36px;
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: var(--shadow-sm);
  margin-bottom: 64px;
}

.legal-toc-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
  letter-spacing: -0.3px;
}

.legal-toc ol {
  list-style: none;
  counter-reset: toc-counter;
  padding: 0;
  margin: 0;
}

.legal-toc li {
  counter-increment: toc-counter;
  margin-bottom: 10px;
}

.legal-toc li:last-child {
  margin-bottom: 0;
}

.legal-toc li::before {
  content: counter(toc-counter) ".";
  color: var(--accent);
  font-weight: 700;
  margin-right: 8px;
  font-size: 14px;
}

.legal-toc a {
  font-size: 15px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  transition: color var(--dur-base) var(--ease-out-expo);
}

.legal-toc a:hover {
  color: var(--text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Legal Sections ── */
.legal-section {
  margin-bottom: 64px;
}

.legal-section:last-child {
  margin-bottom: 0;
}

.legal-section h2 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--text-primary);
  margin-bottom: 20px;
  padding-top: 32px;
  border-top: 2px solid var(--accent-bg);
}

.legal-section:first-of-type h2 {
  border-top: none;
  padding-top: 0;
}

.legal-content h3 {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.3px;
  color: var(--text-primary);
  margin-top: 28px;
  margin-bottom: 12px;
}

.legal-content p {
  font-size: 16px;
  font-weight: 400;
  color: var(--text-secondary);
  line-height: 1.75;
  margin-bottom: 16px;
}

.legal-content ul,
.legal-section ol {
  margin: 16px 0 24px;
  padding-left: 24px;
}

.legal-section li {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 8px;
}

.legal-content a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur-base) var(--ease-out-expo);
}

.legal-content a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-content strong {
  font-weight: 700;
  color: var(--text-primary);
}

/* ========================================================================
   ULTRA-WIDE (1440px+)
   ======================================================================== */
@media (min-width: 1440px) {
  .section-inner {
    max-width: 1320px;
  }

  section {
    padding: 160px 80px;
  }

  #navbar {
    padding: 16px 64px;
  }

  /* ── Hero ── */
  #hero {
    padding-top: 220px;
    padding-bottom: 180px;
  }

  #hero .section-subtitle {
    max-width: 720px;
  }

  .hero-app-preview {
    max-width: 460px;
  }

  /* ── Section subtitle ── */
  .section-subtitle {
    max-width: 680px;
  }

  /* ── Feature grid ── */
  .feature-grid-2 {
    gap: 32px;
  }

  .feature-card {
    padding: 56px 48px;
  }

  .feature-title-hero {
    max-width: 760px;
  }

  /* ── Big features ── */
  .big-feature {
    padding: 160px 80px;
  }

  .big-feature .section-inner {
    gap: 80px;
  }

  /* ── Steps ── */
  .steps-row {
    gap: 40px;
  }

  /* ── Audience ── */
  .audience-grid {
    gap: 32px;
  }

  .audience-card {
    padding: 48px 36px;
  }

  /* ── Impact grid ── */
  .tension-impact-grid {
    gap: 32px;
  }

  /* ── Comparison grid ── */
  .comparison-grid {
    gap: 32px;
  }

  /* ── Testimonials ── */
  .testimonial-grid {
    gap: 32px;
  }

  /* ── Stats ── */
  .stats-bar {
    gap: 40px;
    padding: 64px 56px;
  }

  /* ── Science ── */
  .science-steps {
    gap: 28px;
  }

  .science-summary {
    max-width: 740px;
  }

  /* ── FAQ ── */
  .faq-list {
    max-width: 800px;
  }

  /* ── Use-cases band ── */
  .use-cases-band {
    padding: 120px 80px;
  }

  /* ── Float icons: push outward on wider screens ── */
  .float-icon--hero-1 { left: 8%; }
  .float-icon--hero-2 { right: 10%; }
  .float-icon--hero-3 { left: 5%; }
  .float-icon--hero-4 { right: 7%; }
  .float-icon--hero-5 { left: 14%; }
  .float-icon--hero-6 { right: 12%; }

  .float-icon--cta-1 { left: 10%; }
  .float-icon--cta-2 { right: 14%; }
  .float-icon--cta-3 { left: 12%; }
  .float-icon--cta-4 { right: 10%; }

  /* ── Final CTA ── */
  #final-cta .section-subtitle {
    max-width: 700px;
  }

  /* ── Footer ── */
  footer {
    padding: 72px 80px;
  }

  /* ── Legal pages ── */
  .legal-header {
    padding: 200px 80px 70px;
  }

  .legal-body {
    padding: 80px 80px 140px;
  }
}

/* ========================================================================
   RESPONSIVE
   ======================================================================== */
@media (max-width: 1024px) {
  .feature-grid-2 {
    grid-template-columns: 1fr;
  }

  .big-feature .section-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .big-feature.reverse .section-inner {
    direction: ltr;
  }

  .science-steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
  }

  .product-mockup {
    max-width: 100%;
  }

  .tension-impact-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

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

@media (max-width: 768px) {
  #navbar {
    padding: 14px 20px;
  }

  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: #f0f4fa;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    padding: 0;
    box-shadow: 0 8px 24px rgba(10, 14, 26, 0.08);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: max-height 0.4s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo), padding 0.3s var(--ease-out-expo), visibility 0s 0.4s;
  }

  .nav-links.open {
    max-height: 400px;
    opacity: 1;
    padding: 8px 0;
    pointer-events: auto;
    visibility: visible;
    transition: max-height 0.4s var(--ease-out-expo), opacity 0.3s var(--ease-out-expo), padding 0.3s var(--ease-out-expo), visibility 0s 0s;
  }

  .nav-links a {
    padding: 14px 24px;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  }

  .nav-links a:not(.nav-cta)::after {
    display: none;
  }

  .nav-links .nav-cta {
    margin: 12px 24px;
    width: calc(100% - 48px);
    justify-content: center;
  }

  section {
    padding: 100px 24px;
  }

  /* ── Floating icons: hide on mobile to prevent content overlap ── */
  .float-icon {
    display: none;
  }

  /* ── Hero mobile fixes ── */
  #hero {
    padding-top: 120px;
    padding-bottom: 80px;
    min-height: auto;
  }

  .hero-cycle-wrap {
    font-size: clamp(28px, 8vw, 40px);
    letter-spacing: -1.5px;
  }

  .hero-app-preview {
    margin-top: 40px;
    padding: 20px 20px 16px;
  }

  .big-feature {
    padding: 100px 24px;
  }

  .steps-row {
    grid-template-columns: 1fr;
    gap: 40px;
  }

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

  .audience-icon,
  .impact-icon {
    margin-left: auto;
    margin-right: auto;
  }

  .science-steps {
    grid-template-columns: 1fr;
  }

  .tension-impact-grid {
    grid-template-columns: 1fr;
  }

  .cta-micro-text {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  .stats-bar {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    padding: 36px 24px;
  }

  .use-cases-band {
    padding: 80px 24px;
  }

  .use-cases-headline {
    gap: 4px 16px;
  }

  .faq-list {
    padding: 4px 20px;
  }

  .hero-cta-row {
    flex-direction: column;
  }

  .feature-list-grid {
    grid-template-columns: 1fr;
  }

  .shortcut-mockup {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .shortcut-mockup .key-plus {
    transform: rotate(90deg);
  }

  .feature-card-visual {
    min-height: auto;
    padding: 32px 20px;
  }

  /* ── Feature cards: reduce padding for mobile ── */
  .feature-card {
    padding: 32px 24px;
  }

  .feature-card h3 {
    font-size: 20px;
  }

  /* ── Settings mockup: breathable 2x2 grid on mobile ── */
  .settings-mockup {
    width: 100%;
    max-width: 100%;
    padding: 20px 16px;
  }

  .settings-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .setting-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
  }

  /* ── Comparison cards: tighter padding on mobile ── */
  .comparison-card {
    padding: 28px 24px;
  }

  /* ── Audience cards: tighter padding on mobile ── */
  .audience-card {
    padding: 28px 24px;
  }

  /* ── Testimonial cards: tighter padding on mobile ── */
  .testimonial-card {
    padding: 28px 24px;
  }

  /* ── Insights panel: constrain to container on mobile ── */
  .insights-panel {
    max-width: 100%;
  }

  /* ── Product mockup: constrain tension value ── */
  .tension-value {
    font-size: 56px;
    letter-spacing: -2px;
  }

  .advisor-value {
    font-size: 40px;
  }

  /* ── Science summary: reduce padding on mobile ── */
  .science-summary {
    padding: 20px 22px;
  }

  /* ── Final CTA mobile fixes ── */
  #final-cta {
    padding: 80px 24px;
  }

  footer {
    padding: 48px 24px;
  }

  /* ── Legal pages mobile ── */
  .legal-header {
    padding: 120px 24px 40px;
  }

  .legal-body {
    padding: 60px 24px 80px;
  }

  .legal-toc {
    padding: 24px 28px;
    margin-bottom: 48px;
  }

  .legal-section {
    margin-bottom: 48px;
  }

  .legal-section h2 {
    font-size: 22px;
  }
}

/* ========================================================================
   TENNIS ACCENTS
   ======================================================================== */

/* "Fresh strings" court-green badge variant */
.tension-badge.court {
  background: var(--court-soft);
  color: var(--court);
}

/* Hero string-grid lattice (desktop only, very faint) */
#hero {
  background-image:
    repeating-linear-gradient(0deg, rgba(10, 14, 26, 0.025) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(10, 14, 26, 0.025) 0 1px, transparent 1px 24px);
  background-position: center;
}

@media (max-width: 768px), (prefers-reduced-data: reduce) {
  #hero {
    background-image: none;
  }
}

/* ========================================================================
   PAGE-LOAD ORCHESTRATION
   (Inline script in <head> adds .is-loading to <html> immediately and removes
    it on DOMContentLoaded with a safety timeout. If JS is disabled or the
    script fails to run, the class is never set, so elements stay visible.)
   ======================================================================== */
.load-step {
  transition: opacity var(--dur-reveal) var(--ease-out-expo), transform var(--dur-reveal) var(--ease-out-expo);
}

html.is-loading .load-step {
  opacity: 0;
  transform: translateY(12px);
}

.load-step--1 { transition-delay: 80ms; }
.load-step--2 { transition-delay: 160ms; }
.load-step--3 { transition-delay: 240ms; }
.load-step--4 { transition-delay: 320ms; }
.load-step--5 { transition-delay: 400ms; }

/* ── Reduced motion preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  /* Freeze the hero cycling text on the first phrase */
  .cycle-inner {
    animation: none !important;
    transform: none !important;
  }

  /* Static waveform bars (mid-height, full opacity) */
  .wave-bar {
    animation: none !important;
    height: 24px !important;
    opacity: 0.7 !important;
  }

  /* Static floating icons and scroll arrow */
  .float-icon,
  .scroll-arrow {
    animation: none !important;
    transform: none !important;
  }

  /* Page-load orchestration: skip the entry */
  html.is-loading .load-step {
    opacity: 1 !important;
    transform: none !important;
  }
}