/* ============================================================
   DICA LANDING — v5 refonte
   Mirror of brand-book.html tokens + components.
   Body font = system. Sora reserved for display. JBM for meta.
   ============================================================ */

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

/* Smooth anchor scroll. Padding-top offsets the sticky header pill (~80px).
   Respects prefers-reduced-motion below. */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

:root {
  /* === Backgrounds === */
  --bg-primary: #080A04;
  --bg-secondary: #10130A;
  --bg-tertiary: #181C11;
  --bg-card: #171B0E;
  --bg-elevated: #232819;
  --stroke-hairline: #2B311F;

  /* === Brand === */
  --brand-primary: #C6FF00;
  --brand-light: #D4FF40;
  --brand-dark: #9DCC00;
  --brand-muted: rgba(198, 255, 0, 0.12);
  --brand-glow: rgba(198, 255, 0, 0.20);
  --brand-tint-active: rgba(198, 255, 0, 0.06);

  /* === Accents === */
  --accent-correction: #FFFFFF;
  --accent-shadow: #000000;

  /* === Text === */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255, 255, 255, 0.70);
  --text-tertiary: rgba(255, 255, 255, 0.55);
  --text-muted: rgba(255, 255, 255, 0.50);
  --text-inverse: #080A04;

  /* === Borders === */
  --border-default: #27272A;
  --border-light: #3F3F46;
  --hairline: rgba(198, 255, 0, 0.08);
  --hairline-soft: rgba(255, 255, 255, 0.04);

  /* === States === */
  --error: #F87171;
  --error-muted: rgba(248, 113, 113, 0.15);
  --error-border: rgba(248, 113, 113, 0.55);
  --success: #C6FF00;

  /* === Glass / overlay === */
  --glass-bg: rgba(17, 20, 8, 0.85);
  --overlay-dark: rgba(0, 0, 0, 0.75);

  /* === Radii === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-full: 9999px;

  /* === Spacing === */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  --space-5xl: 48px;
  --space-6xl: 56px;
  --space-7xl: 64px;
  --space-8xl: 80px;

  /* === Motion === */
  --t-fast: 150ms;
  --t-base: 200ms;
  --t-slow: 320ms;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  /* === Parallax === */
  --scroll-y: 0px;
}

html, body {
  background: var(--bg-primary);
  color: var(--text-primary);
  /* Body in system font. Sora applied explicitly to display selectors only. */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  min-height: 100vh;
  /* overflow-x: clip prevents horizontal scroll bleed without creating a scroll container
     that would break `position: sticky` on the header pill. */
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body { position: relative; }

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

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

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

::selection { background: var(--brand-primary); color: var(--text-inverse); }

/* ============================================================
   ATMOSPHERE + GRAIN
   ============================================================ */
.atmosphere {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  overflow: hidden;
}
.atmosphere::before,
.atmosphere::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(180px);
  will-change: transform, opacity;
  transition: transform 800ms var(--ease);
}
.atmosphere::before {
  width: 720px; height: 720px;
  top: -240px; left: -200px;
  background: rgba(198, 255, 0, 0.10);
  transform: translate3d(0, calc(var(--scroll-y) * 0.08), 0);
}
.atmosphere::after {
  width: 600px; height: 600px;
  bottom: -240px; right: -180px;
  background: rgba(198, 255, 0, 0.06);
  transform: translate3d(0, calc(var(--scroll-y) * -0.06), 0);
}

.grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 1;
  opacity: 0.4;
  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.025 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 2;
}

main { position: relative; z-index: 2; }

/* ============================================================
   HEADER
   Top state: open bar, container-aligned, nav centered between
   brand and right cluster via flex `space-between`.
   Scrolled state: rounded pill bg with blur + lime hairline.
   No content shrink on scroll — sizes stay constant.
   ============================================================ */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: transparent;
  padding: 32px 0;
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 10px;
  padding-bottom: 10px;
  transition:
    background 220ms var(--ease),
    outline-color 220ms var(--ease),
    box-shadow 220ms var(--ease);
}
.brand-mark { display: inline-flex; align-items: center; gap: 10px; }
.brand-mark svg {
  width: 30px; height: 38px; flex-shrink: 0;
  filter: drop-shadow(0 0 14px rgba(198, 255, 0, 0.45));
}
.brand-mark .word {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 22px;
  letter-spacing: -0.04em;
  color: var(--text-primary);
  line-height: 1;
}

.header-nav {
  display: none;
}
.header-nav a {
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.005em;
  color: var(--text-secondary);
  padding: 8px 4px;
  transition: color var(--t-fast) var(--ease);
}
.header-nav a:hover { color: var(--text-primary); }
.header-nav a:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 4px;
}
@media (min-width: 768px) {
  .header-nav {
    display: inline-flex;
    align-items: center;
    gap: 32px;
  }
}

.header-right {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

/* Scrolled state — pill bg appears underneath the same layout.
   Width, padding, element positions all stay identical to the open
   state; only background, outline, radius, blur and shadow change.
   Outline (with negative offset) is used in place of border so the
   box does not shift by 1px when the chrome turns on. */
.header[data-scrolled="true"] .header-inner {
  background: rgba(8, 10, 4, 0.78);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  outline: 1px solid rgba(198, 255, 0, 0.12);
  outline-offset: -1px;
  border-radius: 999px;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.3),
    0 12px 32px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* ============================================================
   CHIPS (lang switcher + nav-style)
   ============================================================ */
.chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  transition:
    transform var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease),
    color var(--t-fast) var(--ease),
    border-color var(--t-fast) var(--ease),
    box-shadow var(--t-fast) var(--ease);
  user-select: none;
  white-space: nowrap;
}
.chip:hover {
  transform: scale(1.02);
  color: var(--text-primary);
  border-color: var(--brand-muted);
  background: var(--brand-tint-active);
}
.chip:active { transform: scale(0.98); }
.chip:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.chip[aria-selected="true"] {
  background: var(--brand-primary);
  color: var(--text-inverse);
  border-color: var(--brand-primary);
  box-shadow: 3px 3px 0 var(--accent-shadow);
}
.chip[aria-selected="true"]:hover {
  transform: scale(1.02);
  box-shadow: 4px 4px 0 var(--accent-shadow);
}
.chip svg { width: 12px; height: 12px; }

/* Lang switcher — discrete inline text, no pill */
.lang-switcher {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0;
  border: none;
  background: transparent;
}
.lang-option {
  padding: 0;
  background: transparent;
  border: none;
  font-family: 'Sora', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.lang-option:hover { color: var(--text-secondary); }
.lang-option:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: 2px;
}
.lang-option[aria-selected="true"] {
  color: var(--text-primary);
  font-weight: 600;
}
.lang-sep {
  color: var(--text-tertiary);
  opacity: 0.45;
  font-size: 13px;
  line-height: 1;
  user-select: none;
}

/* Header CTA — mirror app's Button primary
   Sora 700, sentence-case, lime fill, no sticker shadow. */
.header-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: -0.015em;
  text-transform: none;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.header-cta:hover { background: var(--brand-light); transform: translateY(-1px); }
.header-cta:active { background: var(--brand-dark); transform: translateY(0); }
.header-cta:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}

/* ============================================================
   SECTION PRIMITIVES
   ============================================================ */
.sec-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--brand-primary); text-transform: uppercase;
  margin: 0 0 12px;
  display: inline-block;
}

.sec-title {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 38px; line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 16px;
  max-width: 720px;
}
.sec-title .lime { color: var(--brand-primary); }

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

section { padding: 80px 0; position: relative; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding: 128px 0 144px;
  position: relative;
}
.hero-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 56px;
  align-items: center;
  width: 100%;
}
.hero-content { max-width: 580px; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-tint-active);
  border: 1px solid var(--brand-muted);
  color: var(--brand-primary);
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 24px;
}
.hero-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--brand-primary);
  box-shadow: 0 0 8px var(--brand-primary), 0 0 14px rgba(198, 255, 0, 0.4);
  animation: pulse-dot 1.8s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(1.25); }
}

.hero-title {
  font-family: 'Space Grotesk', 'Sora', sans-serif; font-weight: 700;
  font-size: 56px; line-height: 1.0;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: 24px;
}
.hero-title-row { display: block; }
.hero-title .lime { color: var(--brand-primary); }

.hero-subtitle {
  font-size: 18px; line-height: 1.5;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 520px;
}

/* iPhone mockup with video loop + floating correction bubbles */
.hero-visual {
  display: flex;
  justify-content: center;
  position: relative;
  min-height: 480px;
}
.hero-visual::before {
  content: '';
  position: absolute;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(198,255,0,0.22) 0%, transparent 70%);
  filter: blur(60px);
  z-index: 0;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
}
.hero-mockup {
  position: relative;
  width: 280px;
  aspect-ratio: 280 / 580;
  background: #000;
  border-radius: 40px;
  border: 12px solid #0a0a0a;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.5),
    0 0 0 1px var(--hairline);
  overflow: hidden;
  z-index: 1;
}
.hero-mockup::before {
  content: '';
  position: absolute;
  top: 8px; left: 50%;
  transform: translateX(-50%);
  width: 100px; height: 28px;
  background: #000;
  border-radius: var(--radius-full);
  z-index: 2;
}
.hero-mockup video,
.hero-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
}

.hero-bubble {
  position: absolute;
  padding: 10px 14px;
  border-radius: 18px;
  display: flex; flex-direction: column;
  gap: 2px;
  z-index: 3;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
  font-size: 14px;
  max-width: 200px;
  animation: bubble-float 4s ease-in-out infinite;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-bubble-user {
  top: 18%;
  left: 4%;
  background: rgba(35, 40, 25, 0.94);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--text-primary);
  --rot: -3deg;
  transform: rotate(var(--rot));
  animation-delay: 0.2s;
}
.hero-bubble-ai {
  top: 56%;
  right: -2%;
  background: var(--brand-primary);
  color: var(--text-inverse);
  border: 1px solid rgba(8,10,4,0.20);
  --rot: 2.5deg;
  transform: rotate(var(--rot));
  animation-delay: 1.4s;
  box-shadow: 0 10px 30px rgba(198,255,0,0.25), 0 4px 12px rgba(0,0,0,0.4);
}
.bubble-eye {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 9px; letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}
.hero-bubble-ai .bubble-eye { opacity: 0.55; }
.bubble-text { font-weight: 500; line-height: 1.3; }
.hero-bubble-ai .bubble-text { font-weight: 600; }
.hero-bubble-ai .bubble-text strong {
  font-weight: 800;
  background: rgba(8,10,4,0.16);
  padding: 1px 6px;
  border-radius: 6px;
}
@keyframes bubble-float {
  0%, 100% { transform: rotate(var(--rot)) translateY(0); }
  50% { transform: rotate(var(--rot)) translateY(-6px); }
}

/* ============================================================
   WAITLIST FORM
   ============================================================ */
.waitlist-form {
  width: 100%;
  max-width: 480px;
}
.form-embed {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full);
  transition: border-color var(--t-fast) var(--ease);
}
.form-embed:focus-within {
  border-color: var(--brand-primary);
}
.email-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 16px;
  color: var(--text-primary);
  min-width: 0;
}
.email-input::placeholder { color: var(--text-muted); }

.cta-button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px 20px;
  border-radius: var(--radius-full);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em;
  white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
  box-shadow: 3px 3px 0 var(--accent-shadow);
}
.cta-button:hover { background: var(--brand-light); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--accent-shadow); }
.cta-button:active { transform: translate(0, 0); box-shadow: 2px 2px 0 var(--accent-shadow); }
.cta-button:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
}
.cta-button:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-loader {
  width: 16px; height: 16px;
  border: 2px solid rgba(8, 10, 4, 0.3);
  border-top-color: var(--text-inverse);
  border-radius: 50%;
  animation: spin 700ms linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

.form-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-tertiary);
  padding-left: 4px;
}

.form-message {
  margin-top: 12px;
  padding: 10px 14px;
  border-radius: var(--radius-md);
  font-size: 14px;
}
.form-message.error {
  background: var(--error-muted);
  color: var(--error);
  border: 1px solid var(--error-border);
}

.form-confirmation {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 24px;
  background: var(--brand-muted);
  border: 1px solid var(--brand-primary);
  border-radius: var(--radius-xl);
  color: var(--text-primary);
}
.confirmation-icon {
  color: var(--brand-primary);
  margin-bottom: 12px;
}
.confirmation-title {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 20px;
  margin-bottom: 6px;
}
.confirmation-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
}

/* ============================================================
   STICKER CARDS (pain section)
   ============================================================ */
.sticker-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 32px;
}
.sticker-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  box-shadow: 3px 3px 0 var(--accent-shadow);
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.sticker-card:hover {
  transform: translate(-2px, -2px);
  border-color: var(--brand-muted);
}
.sticker-icon {
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  background: var(--brand-muted);
  color: var(--brand-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.sticker-icon svg { width: 22px; height: 22px; }
.sticker-card-body { flex: 1; min-width: 0; }
.sticker-card h3 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 17px; line-height: 1.3;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  color: var(--text-primary);
}
.sticker-card p {
  font-size: 14px; line-height: 1.55;
  color: var(--text-secondary);
}

/* ============================================================
   DEMO CARDS (solution / how it works, numbered)
   ============================================================ */
.demo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 32px;
}
.demo-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.demo-card:hover {
  transform: translateY(-2px);
  border-color: var(--brand-muted);
}
.demo-card-eye {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--brand-primary); text-transform: uppercase;
  margin-bottom: 16px;
}
.demo-card h4 {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 19px; line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.demo-card p {
  font-size: 14.5px; line-height: 1.55;
  color: var(--text-secondary);
}

/* ============================================================
   ANTI-CHIPS (what dica is not)
   ============================================================ */
.anti-row {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.anti-chip {
  padding: 8px 14px;
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: 13px;
  color: var(--text-secondary);
  box-shadow: 2px 2px 0 var(--accent-shadow);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.anti-chip:nth-child(6n+1) { transform: rotate(-2deg); }
.anti-chip:nth-child(6n+2) { transform: rotate(1.5deg); }
.anti-chip:nth-child(6n+3) { transform: rotate(-1deg); }
.anti-chip:nth-child(6n+4) { transform: rotate(2deg); }
.anti-chip:nth-child(6n+5) { transform: rotate(-1.5deg); }
.anti-chip:nth-child(6n+6) { transform: rotate(1deg); }
.anti-chip:hover {
  transform: rotate(0) translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--accent-shadow);
}
.anti-chip::before {
  content: '\00d7';
  color: var(--error);
  margin-right: 8px;
  font-weight: 700;
}

/* ============================================================
   BRAND CARDS (DNA)
   ============================================================ */
.brand-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 18px;
  margin-top: 32px;
}
.brand-card {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-2xl);
  padding: 28px 24px;
  position: relative;
  overflow: hidden;
}
.brand-card-num {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 10px; letter-spacing: 0.18em;
  color: var(--brand-primary); text-transform: uppercase;
  margin-bottom: 14px;
}
.brand-card h3 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 18px; line-height: 1.25;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  color: var(--text-primary);
}
.brand-card p {
  font-size: 14px; line-height: 1.6;
  color: var(--text-secondary);
}

/* ============================================================
   FAQ
   ============================================================ */
/* FAQ section: center eyebrow + title + cards on the same horizontal axis. */
#faq .container { text-align: center; }
#faq .sec-eyebrow,
#faq .sec-title { display: block; }
#faq .sec-title { margin-left: auto; margin-right: auto; }
.faq-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 780px;
  margin: 32px auto 0;
  text-align: left;
}
.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-xl);
  padding: 22px 26px;
  transition:
    border-color var(--t-base) var(--ease),
    background var(--t-base) var(--ease);
}
.faq-item:hover { border-color: rgba(198, 255, 0, 0.16); }
.faq-item[open] {
  border-color: var(--brand-primary);
  background: var(--bg-elevated);
}
.faq-item summary {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 17px; line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}
.faq-item summary::after {
  content: '+';
  width: 28px; height: 28px;
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--brand-muted);
  color: var(--brand-primary);
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: 22px;
  line-height: 1;
  transition:
    transform var(--t-base) cubic-bezier(0.34, 1.56, 0.64, 1),
    background var(--t-base) var(--ease);
}
.faq-item[open] summary::after {
  content: '\2212'; /* minus sign */
  transform: rotate(180deg);
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.faq-item p {
  margin-top: 16px;
  font-size: 15px; line-height: 1.65;
  color: var(--text-secondary);
  max-width: 640px;
}

@media (min-width: 768px) {
  .faq-item { padding: 26px 30px; }
  .faq-item summary { font-size: 18px; }
}

/* ============================================================
   FINAL CTA — huge logo + lime glow + email
   ============================================================ */
.cta-bottom {
  text-align: center;
  padding: 120px 0 112px;
  position: relative;
  overflow: hidden;
}
.cta-bottom-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
.cta-logo-wrap {
  position: relative;
  width: 140px; height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}
.cta-logo {
  width: 88px;
  height: auto;
  position: relative;
  z-index: 2;
  filter: drop-shadow(0 6px 18px rgba(198,255,0,0.45));
}
.cta-glow {
  position: absolute;
  inset: -60%;
  background: radial-gradient(circle, var(--brand-glow) 0%, var(--brand-muted) 28%, transparent 65%);
  filter: blur(50px);
  z-index: 0;
  animation: glow-breathe 4.5s ease-in-out infinite;
}
@keyframes glow-breathe {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.1); }
}
.cta-eyebrow {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em;
  color: var(--brand-primary); text-transform: uppercase;
  margin-bottom: 16px;
}
.cta-title {
  font-family: 'Space Grotesk', 'Sora', sans-serif; font-weight: 700;
  font-size: 48px; line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--text-primary);
  margin-bottom: 14px;
  max-width: 760px;
}
.cta-subtitle {
  font-size: 16px; line-height: 1.5;
  color: var(--text-tertiary);
  margin-bottom: 32px;
}
.cta-bottom .waitlist-form { margin: 0 auto; }

/* ============================================================
   FOOTER — 3-col desktop, stack centered mobile
   ============================================================ */
.footer {
  position: relative; z-index: 2;
  padding: 64px 0 48px;
  border-top: 1px solid var(--hairline);
}
.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
  text-align: center;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.footer-mark {
  display: inline-flex; align-items: center; gap: 8px;
}
.footer-mark svg { width: 22px; height: 28px; flex-shrink: 0; }
.footer-word {
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 18px;
  letter-spacing: -0.04em;
  color: var(--brand-primary);
  line-height: 1;
}
.footer-tagline {
  font-family: 'Sora', sans-serif; font-weight: 500;
  font-size: 13px;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}

.footer-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 520px;
}
.footer-privacy-notice {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.55;
  margin: 0;
}
.legal-links {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: 'Sora', sans-serif; font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-transform: none;
}
.legal-links a {
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease);
}
.legal-links a:hover { color: var(--brand-primary); }
.legal-sep { color: var(--text-tertiary); opacity: 0.6; }

.footer-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.footer-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border: 1px solid var(--hairline);
  color: var(--text-secondary);
  border-radius: var(--radius-full);
  font-family: 'Sora', sans-serif; font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.005em;
}
.footer-badge svg { width: 12px; height: 12px; color: var(--brand-primary); }

.footer-credit {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.12em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin: 0;
}

/* Footer stays stacked + centered on all viewports for consistency with
   centered FAQ/CTA stacking above. */

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (min-width: 600px) {
  .container { padding: 0 32px; }
  section { padding: 96px 0; }
  .sec-title { font-size: 44px; }
  .hero-title { font-size: 72px; }
  .cta-title { font-size: 64px; }
}

@media (min-width: 1024px) {
  .hero-inner {
    grid-template-columns: 1.05fr 1fr;
    gap: 72px;
  }
  .hero-mockup { width: 300px; }
  .hero-title { font-size: 88px; }
  .sec-title { font-size: 48px; }
  .cta-title { font-size: 72px; }
  .cta-logo-wrap { width: 170px; height: 170px; }
  .cta-logo { width: 104px; }
}

@media (max-width: 599px) {
  .header { padding: 22px 0; }
  .brand-mark svg { width: 26px; height: 33px; }
  .brand-mark .word { font-size: 20px; }
  .header-right { gap: 14px; }
  .hero { padding: 96px 0 104px; }
  .hero-title { font-size: 48px; }
  .hero-visual { min-height: 420px; }
  .hero-bubble { font-size: 12px; padding: 8px 12px; max-width: 160px; }
  .hero-bubble-user { left: 0; top: 16%; }
  .hero-bubble-ai { right: -6px; }
  .cta-bottom { padding: 80px 0 88px; }
  .cta-title { font-size: 40px; }
}

@media (max-width: 359px) {
  .hero-visual { display: none; }
}

/* ============================================================
   LEGAL PAGES
   ============================================================ */
.legal-content {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 0 96px;
}
.legal-back {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 32px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1px solid var(--hairline);
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-secondary);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.legal-back:hover { color: var(--brand-primary); border-color: var(--brand-muted); }
.legal-back:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.legal-content h1 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 36px; line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.legal-meta {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 11px; letter-spacing: 0.16em;
  color: var(--text-tertiary);
  text-transform: uppercase;
  margin-bottom: 40px;
}
.legal-content h2 {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 22px; line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-top: 36px;
  margin-bottom: 12px;
}
.legal-content p {
  font-size: 16px; line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 14px;
}
.legal-content ul {
  margin: 0 0 18px 18px;
  padding: 0;
}
.legal-content li {
  font-size: 16px; line-height: 1.7;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.legal-content p a,
.legal-content li a {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-content p a:hover,
.legal-content li a:hover { color: var(--brand-light); }

@media (min-width: 600px) {
  .legal-content h1 { font-size: 44px; }
  .legal-content h2 { font-size: 24px; }
}

/* ============================================================
   STORY — How it works, scroll-locked 4-act (mobile-first)
   Mobile: stacked steps, each with inline mini phone screen.
   Desktop >=1024: sticky phone right, IntersectionObserver swaps screens.
   ============================================================ */
.story { padding: 80px 0; position: relative; }
.story-head { margin-bottom: 8px; }
.story-grid { display: grid; grid-template-columns: 1fr; gap: 0; }
.story-steps { display: flex; flex-direction: column; gap: 64px; }

.story-step {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.step-eye {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em;
  color: var(--brand-primary); text-transform: uppercase;
}
.story-step h3 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 28px; line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
}
.story-step p {
  font-size: 16px; line-height: 1.55;
  color: var(--text-secondary);
  max-width: 540px;
}

/* Mobile: inline mini phone per step */
.story-phone-inline {
  align-self: flex-start;
  width: 100%;
  max-width: 220px;
  margin-top: 8px;
}
.story-phone-sticky { display: none; }

/* Phone frame (used both inline + sticky) */
.phone-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 280 / 580;
  background: #000;
  border-radius: 32px;
  border: 10px solid #0a0a0a;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.55),
    0 0 0 1px var(--hairline);
  overflow: hidden;
}
.phone-frame::before {
  content: '';
  position: absolute;
  top: 6px; left: 50%;
  transform: translateX(-50%);
  width: 80px; height: 22px;
  background: #000;
  border-radius: var(--radius-full);
  z-index: 2;
}
.phone-frame-lg { /* desktop variant inside sticky */
  max-width: 320px;
}

/* Phone screen placeholder (replace with real screenshot later) */
.phone-screen {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-tertiary) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px 20px;
  text-align: center;
  border-radius: 20px;
}
.phone-screen::before {
  content: '';
  position: absolute;
  inset: 16px;
  border: 1px dashed var(--brand-muted);
  border-radius: 14px;
  pointer-events: none;
}
.ph-eye {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em;
  color: var(--brand-primary); text-transform: uppercase;
  position: relative; z-index: 1;
}
.ph-text {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 14px; line-height: 1.35;
  color: var(--text-secondary);
  max-width: 180px;
  position: relative; z-index: 1;
}

/* Desktop: sticky phone with screens that fade based on active step */
@media (min-width: 1024px) {
  /* Pull grid up so title sits visually right above step 1 instead of way at
     the top while step 1 + phone center at viewport center. Negative
     margin-bottom cancels most of the .story-steps padding-top calc. */
  .story-head { margin-bottom: calc(-1 * ((100vh - 480px) / 2) + 64px); }
  .story-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .story-steps {
    gap: 80px;
    /* padding-top aligns step 1 center with viewport center at the exact
       moment grid.top reaches viewport top (i.e. when sticky aside kicks
       in). Formula: (viewport - step_height) / 2 where step_height = 480.
       Without this, step 1 center is at grid.top + 240 while aside center
       is at grid.top + 50vh — they only align mid-scroll, never at the
       moment step 1 first becomes active. */
    padding-top: calc((100vh - 480px) / 2);
    /* padding-bottom: same idea on the way out — keeps sticky context
       alive when step 4 reaches viewport center. */
    padding-bottom: calc((100vh - 480px) / 2);
  }
  /* Praktika-style scroll-locked: compact slide blocks (~480px each, text
     centered within), phone sticks at top:108px while user scrolls through
     them. The phone stays in the upper-middle of the viewport while each
     slide's text passes its vertical center. */
  .story-step {
    min-height: 480px;
    justify-content: center;
    padding: 0;
    opacity: 0.35;
    transition: opacity 400ms var(--ease);
  }
  .story-step[data-active="true"] { opacity: 1; }
  .story-step h3 { font-size: 36px; }
  .story-phone-inline { display: none; }

  /* Phone sticky in a 100vh wrapper, vertically centered inside.
     Phone center == viewport center while user scrolls through slides.
     The text inside each 480px slide also centers vertically, so the
     active slide's text passes viewport center precisely as the phone
     stays in place. Star = the phone screen, as Steve wants. */
  .story-phone-sticky {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .story-phone-sticky .phone-frame {
    width: 280px;
    aspect-ratio: 280 / 580;
  }
  .story-phone-sticky .phone-screen {
    opacity: 0;
    transition: opacity 500ms var(--ease);
  }
  .story-phone-sticky .phone-screen[data-active="true"] { opacity: 1; }
}

/* ============================================================
   WHY DICA — bento grid (mobile-first, 1 -> 2 -> 12 col)
   ============================================================ */
.why-bento { padding: 80px 0; }
.bento {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 32px;
}
.bento-card {
  border-radius: 24px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 16px;
  min-height: 200px;
  position: relative;
  overflow: hidden;
  transition: transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.bento-card:hover { transform: translateY(-2px); }

.bento-eye {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 10px; letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
}
.bento-card h3 {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 22px; line-height: 1.2;
  letter-spacing: -0.015em;
}
.bento-card p {
  font-size: 14.5px; line-height: 1.5;
}

/* Card A — lime fill big (Promise) */
.bento-a {
  background: var(--brand-primary);
  color: var(--text-inverse);
  min-height: 260px;
  padding: 32px 28px;
}
.bento-a .bento-eye { color: var(--text-inverse); opacity: 0.65; }
.bento-a h3 {
  font-family: 'Space Grotesk', 'Sora', sans-serif;
  font-size: 34px; font-weight: 700;
  letter-spacing: -0.028em;
  line-height: 1.05;
}
.bento-a p {
  color: rgba(8, 10, 4, 0.78);
  font-size: 16px;
  line-height: 1.5;
  max-width: 460px;
}

/* Card B — dark with lime levels (A1 -> C1) */
.bento-b {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  color: var(--text-primary);
}
.bento-b p { color: var(--text-secondary); }
.bento-levels {
  display: flex; align-items: center;
  gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.bento-levels span {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 13px;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--brand-muted);
  color: var(--brand-light);
}
.bento-levels .lvl-arrow {
  background: transparent;
  color: var(--text-tertiary);
  padding: 0;
  font-size: 14px;
}

/* Card C — bg-secondary with lime hairline */
.bento-c {
  background: var(--bg-secondary);
  border: 1px solid var(--brand-muted);
  color: var(--text-primary);
}
.bento-c .bento-eye { color: var(--brand-primary); }
.bento-c p { color: var(--text-secondary); }

/* Card D — lime outline + big number 100% */
.bento-d {
  background: transparent;
  border: 1.5px solid var(--brand-primary);
  color: var(--text-primary);
  align-items: flex-start;
}
.bento-d .bento-eye { color: var(--brand-primary); }
.bento-d .bento-big {
  font-family: 'Space Grotesk', 'Sora', sans-serif;
  font-weight: 800;
  font-size: 84px;
  line-height: 0.9;
  color: var(--brand-primary);
  letter-spacing: -0.04em;
  margin-top: auto;
}
.bento-d .bento-d-desc {
  color: var(--text-secondary);
  font-size: 13px;
}

/* Card E — dark with subtle lime corner glow (no top stripe) */
.bento-e {
  background: var(--bg-card);
  border: 1px solid var(--hairline);
  color: var(--text-primary);
  position: relative;
  overflow: hidden;
}
.bento-e::before {
  content: '';
  position: absolute;
  top: -40%; right: -20%;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--brand-glow) 0%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
}
.bento-e > * { position: relative; z-index: 1; }
.bento-e .bento-eye { color: var(--brand-primary); }
.bento-e p { color: var(--text-tertiary); font-size: 14px; line-height: 1.5; }

@media (min-width: 600px) {
  .bento { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .bento-a { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento {
    grid-template-columns: repeat(12, 1fr);
    gap: 18px;
  }
  .bento-a {
    grid-column: span 7;
    grid-row: span 2;
    min-height: 320px;
    padding: 40px 36px;
  }
  .bento-a h3 { font-size: 48px; letter-spacing: -0.03em; }
  .bento-a p { font-size: 17px; }
  .bento-b {
    grid-column: span 5;
    min-height: 132px;
  }
  .bento-c {
    grid-column: span 5;
    min-height: 132px;
  }
  .bento-d {
    grid-column: span 4;
    min-height: 220px;
  }
  .bento-d .bento-big { font-size: 96px; }
  .bento-e {
    grid-column: span 8;
    min-height: 220px;
  }
  .bento-e h3 { font-size: 26px; max-width: 480px; }
}

/* ============================================================
   COMPARE duel — Dica vs subscription apps
   Mobile: stacked Dica on top. >=768: side-by-side.
   ============================================================ */
.compare { padding: 80px 0 96px; }
.compare-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 32px;
}
.compare-card {
  border-radius: 28px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.compare-dica {
  background: var(--brand-primary);
  color: var(--text-inverse);
}
.compare-other {
  background: var(--bg-card);
  border: 1px solid var(--brand-muted);
  color: var(--text-primary);
}
.compare-head {
  display: flex; align-items: center; gap: 14px;
}
.compare-logo { width: 36px; height: auto; flex-shrink: 0; }
.compare-icon-generic {
  width: 36px; height: 36px;
  border-radius: 12px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  flex-shrink: 0;
  position: relative;
}
.compare-icon-generic::before,
.compare-icon-generic::after {
  content: '';
  position: absolute;
  background: var(--text-tertiary);
}
.compare-icon-generic::before {
  width: 14px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
}
.compare-icon-generic::after {
  width: 14px; height: 2px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.compare-meta { display: flex; flex-direction: column; gap: 2px; }
.compare-card h3 {
  font-family: 'Sora', sans-serif; font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.02em;
  margin: 0;
}
.compare-price {
  font-family: 'JetBrains Mono', monospace; font-weight: 700;
  font-size: 12px; letter-spacing: 0.05em;
  opacity: 0.8;
}
.compare-dica .compare-price { color: var(--text-inverse); opacity: 0.7; }
.compare-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  margin: 0;
}
.compare-list li {
  display: flex; gap: 12px; align-items: flex-start;
  font-size: 15px; line-height: 1.4;
}
.compare-list .check, .compare-list .cross {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}
.compare-dica .check {
  background: rgba(8, 10, 4, 0.16);
  color: var(--text-inverse);
}
.compare-other .cross {
  background: var(--error-muted);
  color: var(--error);
}
.compare-cta {
  margin-top: auto;
  padding: 14px 22px;
  background: var(--text-inverse);
  color: var(--brand-primary);
  border-radius: var(--radius-full);
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 15px; letter-spacing: -0.01em;
  text-align: center;
  align-self: stretch;
  transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.compare-cta:hover { background: #000; transform: translateY(-1px); }
.compare-cta:focus-visible {
  outline: 2px solid var(--text-inverse);
  outline-offset: 3px;
}

@media (min-width: 768px) {
  .compare-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .compare-card { padding: 36px 32px; }
  .compare-card h3 { font-size: 26px; }
}
@media (min-width: 1024px) {
  .compare-grid { gap: 24px; }
  .compare-card { padding: 40px 36px; }
}

/* ============================================================
   FOUNDER bio — Steve, product-first, human
   Mobile: photo top, content below. Desktop >=1024: photo left, content right.
   ============================================================ */
.founder {
  padding: 96px 0;
  background: var(--bg-secondary);
  position: relative;
}
.founder-inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: center;
}

.founder-photo-wrap {
  position: relative;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}
.founder-photo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid var(--hairline);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);
  display: block;
}

.founder-content { max-width: 600px; margin: 0 auto; }
.founder-title {
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 24px; line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin-bottom: 20px;
}
.founder-para {
  font-size: 16px; line-height: 1.65;
  color: var(--text-secondary);
  margin-bottom: 16px;
  max-width: 540px;
}
.founder-para-strong {
  color: var(--text-primary);
  font-weight: 500;
  border-left: 2px solid var(--brand-primary);
  padding-left: 16px;
  margin-top: 24px;
}

.founder-sig {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}
.founder-sig-name-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  transition: color var(--t-fast) var(--ease);
  margin-bottom: 4px;
}
.founder-sig-name-link:hover { color: var(--brand-primary); }
.founder-sig-name-link:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 3px;
  border-radius: 4px;
}
.founder-sig-name {
  font-family: 'Sora', sans-serif; font-weight: 700;
  font-size: 16px;
  color: inherit;
}
.founder-sig-icon {
  width: 14px; height: 14px;
  color: var(--text-tertiary);
  flex-shrink: 0;
  transition: color var(--t-fast) var(--ease);
}
.founder-sig-name-link:hover .founder-sig-icon { color: var(--brand-primary); }
.founder-sig-role {
  font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 12px; letter-spacing: 0.04em;
  color: var(--text-tertiary);
}

@media (min-width: 768px) {
  .founder-title { font-size: 28px; }
  .founder-photo-wrap { max-width: 520px; }
}
@media (min-width: 1024px) {
  .founder-inner {
    grid-template-columns: 5fr 7fr;
    gap: 72px;
    align-items: center;
  }
  .founder-photo-wrap { max-width: 100%; margin: 0; }
  .founder-content { margin: 0; }
  .founder-title { font-size: 32px; line-height: 1.12; }
  .founder-para { font-size: 17px; }
}

/* ============================================================
   FAQ refresh — better hierarchy, lime accent on open
   ============================================================ */

/* ============================================================
   PREFERS REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .atmosphere::before, .atmosphere::after { transition: none; transform: none; }
  .reveal { opacity: 1; transform: none; }
}