/* ==========================================================================
   Female Energy — Design System
   Layout-Vorbild: "Visitors" white blueprint · Farben: Female Energy Rosé
   ========================================================================== */
:root {
  /* Neutrale Achse — warmes Grau statt kühlem Blaugrau */
  --color-carbon: #22161b;
  --color-paper-white: #ffffff;
  --color-linen: #faf8f8;
  --color-mist: #f5f1f1;
  --color-fog: #e9e2e3;
  --color-ash: #9a9091;
  --color-graphite: #6a5f61;

  /* Marke — Roségold aus dem Logo */
  --color-rose: #b56576;        /* Aktionsfarbe: gefüllte CTAs */
  --color-rose-deep: #9c4f60;   /* Tiefere Rosé: Nav-Button, Hover */
  --color-blush: #f2e2e5;       /* Zarte Fläche */

  /* Kategoriefarben — je Kategorie genau eine */
  --color-gold: #c2924f;
  --color-mauve: #8d6484;
  --color-sage: #5f8a6a;
  --color-sage-wash: #e9f0ea;

  /* Typografie */
  --font-display: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --text-caption: 12px;
  --leading-caption: 1.33;
  --tracking-caption: -0.32px;
  --text-body: 16px;
  --leading-body: 1.5;
  --tracking-body: -0.32px;
  --text-subheading: 18px;
  --leading-subheading: 1.33;
  --tracking-subheading: -0.32px;
  --text-heading-sm: 24px;
  --leading-heading-sm: 1.17;
  --tracking-heading-sm: -0.31px;
  --text-heading: 36px;
  --leading-heading: 1.22;
  --tracking-heading: -0.61px;
  --text-heading-lg: 48px;
  --leading-heading-lg: 1;
  --tracking-heading-lg: -0.34px;
  --text-display: 60px;
  --leading-display: 1.13;
  --tracking-display: -3px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Layout */
  --page-max-width: 1200px;
  --card-padding: 32px;

  /* Radius */
  --radius-tags: 9999px;
  --radius-cards: 16px;
  --radius-images: 8px;
  --radius-inputs: 8px;
  --radius-tables: 24px;
  --radius-buttons: 9999px;

  /* Shadows */
  --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
  --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px;
  --shadow-float: rgba(34, 22, 27, 0.10) 0px 12px 40px 0px, rgba(34, 22, 27, 0.06) 0px 2px 8px 0px;

  /* Surfaces */
  --surface-canvas: #ffffff;
  --surface-linen-band: #faf8f8;
  --surface-mist-fill: #f5f1f1;
  --surface-soft-wash: #e6efe8;   /* Salbei */
  --surface-blush-wash: #f9e7ea;  /* Rosé */
  --surface-sand-wash: #f8efdf;   /* Sand/Gold */
  --surface-mauve-wash: #efe6f0;  /* Mauve */
  --surface-deep: #2b1a20;        /* Dunkles Plum */

  /* Atmosphärisches Mesh hinter der schwebenden Karte */
  --mesh-base: #e7d3d8;
  --mesh:
    radial-gradient(50% 60% at 12% 22%, #dcbcc8 0%, rgba(220, 188, 200, 0) 62%),
    radial-gradient(45% 55% at 82% 16%, #c9a1b4 0%, rgba(201, 161, 180, 0) 62%),
    radial-gradient(65% 70% at 62% 92%, #b8879b 0%, rgba(184, 135, 155, 0) 66%),
    radial-gradient(42% 52% at 32% 78%, #f0d9de 0%, rgba(240, 217, 222, 0) 60%);
  /* Kräftiges Band für Flächen mit weißer Schrift */
  --gradient-band: linear-gradient(120deg, #a8566b 0%, #8d6484 100%);
}

/* ==========================================================================
   Playful Theme — knalliges Pink, dicke Schriften, verspielt
   ========================================================================== */
[data-theme="playful"] {
  --color-carbon: #33071f;
  --color-linen: #fff3f9;
  --color-mist: #ffe9f4;
  --color-fog: #ffc7e3;
  --color-ash: #b4779b;
  --color-graphite: #7a1450;

  --color-rose: #ff2f97;
  --color-rose-deep: #e6007e;
  --color-blush: #ffe1f1;

  --color-gold: #ffb300;
  --color-mauve: #b23bff;
  --color-sage: #12b981;
  --color-sage-wash: #ffe1f1;

  --font-display: "Fredoka", "Poppins", ui-sans-serif, system-ui, sans-serif;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 600;

  --tracking-display: -1.5px;

  --radius-cards: 28px;
  --radius-tables: 30px;
  --radius-inputs: 16px;
  --radius-images: 20px;

  --surface-linen-band: #fff3f9;
  --surface-mist-fill: #ffe9f4;
  --surface-soft-wash: #d9fbec;
  --surface-blush-wash: #ffdcef;
  --surface-sand-wash: #ffeecc;
  --surface-mauve-wash: #f0dcff;
  --surface-deep: #3d0a26;

  --mesh-base: #ffd6ec;
  --mesh:
    radial-gradient(50% 60% at 12% 22%, #ff8ec9 0%, rgba(255, 142, 201, 0) 62%),
    radial-gradient(45% 55% at 82% 16%, #ffb300 0%, rgba(255, 179, 0, 0) 62%),
    radial-gradient(65% 70% at 62% 92%, #ff2f97 0%, rgba(255, 47, 151, 0) 66%),
    radial-gradient(42% 52% at 32% 78%, #ffe1f1 0%, rgba(255, 225, 241, 0) 60%);
  --gradient-band: linear-gradient(120deg, #ff2f97 0%, #ffb300 100%);
}

/* ==========================================================================
   Base
   ========================================================================== */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  letter-spacing: var(--tracking-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-carbon);
  background: var(--surface-canvas);
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.35s ease, color 0.35s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: var(--font-weight-semibold);
  color: var(--color-carbon);
  margin: 0 0 var(--spacing-16);
}
h1 { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-heading); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
h3, h4 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading);
  font-weight: var(--font-weight-medium);
}
p { margin: 0 0 var(--spacing-16); color: var(--color-graphite); }

.container {
  max-width: var(--page-max-width);
  margin: 0 auto;
  padding: 0 var(--spacing-24);
}

/* Section-Label */
.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 6px 12px;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  background: var(--surface-canvas);
  font-size: var(--text-caption);
  line-height: 1;
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  text-transform: uppercase;
  margin-bottom: var(--spacing-20);
}
.section-label .num { color: var(--color-rose); font-weight: var(--font-weight-semibold); }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-buttons);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  line-height: 1.4;
  cursor: pointer;
  transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.btn-primary {
  background: var(--color-rose);
  color: var(--color-paper-white);
  box-shadow: var(--shadow-subtle);
}
.btn-primary:hover { transform: translateY(-1px); background: var(--color-rose-deep); }
.btn-ghost {
  background: var(--surface-canvas);
  color: var(--color-graphite);
  box-shadow: var(--shadow-subtle-2);
}
.btn-ghost:hover { background: var(--surface-mist-fill); color: var(--color-carbon); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--spacing-12); align-items: center; }

/* ==========================================================================
   Schwebende dunkle Pill-Navigation
   ========================================================================== */
.site-header {
  position: absolute;
  top: var(--spacing-20);
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  padding: 0 var(--spacing-24);
}
.nav-pill {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 8px 8px 8px 10px;
  border-radius: var(--radius-tags);
  background: var(--color-carbon);
  box-shadow: var(--shadow-float);
}
.nav-mark {
  width: 30px; height: 30px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-paper-white);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.4px;
}

.nav-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}
  flex-shrink: 0;
}
.nav-links { display: flex; align-items: center; gap: var(--spacing-4); }
.nav-links a {
  padding: 6px 10px;
  border-radius: var(--radius-tags);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-links a:hover { color: var(--color-paper-white); background: rgba(255, 255, 255, 0.1); }
.nav-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, 0.16); margin: 0 var(--spacing-4); }
.nav-text-link {
  padding: 6px 10px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: rgba(255, 255, 255, 0.82);
}
.nav-text-link:hover { color: var(--color-paper-white); }
.nav-btn {
  padding: 7px 14px;
  border-radius: var(--radius-tags);
  background: var(--color-rose-deep);
  color: var(--color-paper-white);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: background-color 0.2s ease;
}
.nav-btn:hover { background: var(--color-rose); }
.burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.burger span { width: 18px; height: 1.5px; background: var(--color-paper-white); border-radius: 2px; }

.mobile-panel {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--color-carbon);
  z-index: 200;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-24);
  font-size: var(--text-heading-sm);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-heading-sm);
  color: var(--color-paper-white);
}
.mobile-panel.open { display: flex; }
.mobile-panel a { color: var(--color-paper-white); }
.mobile-close {
  position: absolute;
  top: 20px; right: 20px;
  width: 36px; height: 36px;
  border-radius: var(--radius-tags);
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: transparent;
  color: var(--color-paper-white);
  font-size: 1.2rem;
  cursor: pointer;
}
body.nav-open { overflow: hidden; }

/* ==========================================================================
   Hero — zentrierter Stack
   ========================================================================== */
.hero {
  background: var(--surface-canvas);
  padding: 136px 0 var(--spacing-48);
  text-align: center;
}
.hero-inner { max-width: 820px; margin: 0 auto; }
.announce-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 5px 12px 5px 6px;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  background: var(--surface-canvas);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  margin-bottom: var(--spacing-24);
  transition: box-shadow 0.2s ease;
}
.announce-chip:hover { box-shadow: var(--shadow-subtle-2); }
.announce-chip .tag {
  padding: 3px 8px;
  border-radius: var(--radius-tags);
  background: var(--color-blush);
  color: var(--color-rose-deep);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caption);
}
.hero h1 { margin-bottom: var(--spacing-20); }
.hero .lead {
  font-size: var(--text-subheading);
  line-height: 1.5;
  color: var(--color-graphite);
  max-width: 560px;
  margin: 0 auto var(--spacing-32);
}
.hero .cta-row { justify-content: center; }

/* Proof-Zeile unter den CTAs */
.proof-row {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-32);
  margin-top: var(--spacing-64);
}
.proof-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.23px;
  color: var(--color-ash);
}
.proof-item .dot {
  width: 6px; height: 6px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
  opacity: 0.55;
}

/* ==========================================================================
   Mesh-Band mit Tab-Leiste und schwebender Karte
   ========================================================================== */
.showcase {
  position: relative;
  background-color: var(--mesh-base);
  background-image: var(--mesh);
  padding: 0 0 var(--spacing-64);
  overflow: hidden;
}
.showcase-tabs-wrap { display: flex; justify-content: center; }
.showcase-tabs {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  padding: var(--spacing-12) var(--spacing-20) var(--spacing-16);
  background: var(--surface-canvas);
  border-radius: 0 0 var(--radius-tables) var(--radius-tables);
}
.showcase-tab {
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius-tags);
  background: transparent;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.23px;
  color: var(--color-ash);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.showcase-tab:hover { color: var(--color-graphite); }
.showcase-tab.active { color: var(--color-carbon); background: var(--surface-mist-fill); }

.showcase-card {
  max-width: 940px;
  margin: var(--spacing-48) auto 0;
  background: var(--surface-canvas);
  border-radius: var(--radius-tables);
  box-shadow: var(--shadow-float);
  overflow: hidden;
}
.showcase-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  padding: var(--spacing-16) var(--spacing-24);
  border-bottom: 1px solid var(--color-fog);
}
.showcase-brand {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
}
.showcase-brand .dot {
  width: 20px; height: 20px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
}
.showcase-chip {
  padding: 4px 10px;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}
.showcase-panel { display: none; padding: var(--spacing-32) var(--spacing-24) var(--spacing-48); }
.showcase-panel.active { display: block; }
.showcase-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-48);
  padding-bottom: var(--spacing-32);
  border-bottom: 1px solid var(--color-fog);
  margin-bottom: var(--spacing-32);
}
.metric { display: flex; flex-direction: column; gap: 2px; }
.metric .label {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}
.metric .value {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
}
.metric .note {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-sage);
  font-weight: var(--font-weight-medium);
}
.showcase-panel h3 { margin-bottom: var(--spacing-8); }
.showcase-panel p { max-width: 60ch; margin: 0; }
.showcase-steps { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-24); }
.showcase-cta { text-align: center; margin-top: var(--spacing-48); }
.showcase-cta p {
  font-size: 14px;
  letter-spacing: -0.23px;
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  margin-bottom: var(--spacing-16);
}
.showcase-cta .cta-row { justify-content: center; }

.showcase-steps span {
  padding: 6px 12px;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

/* ==========================================================================
   Sections & Surfaces
   ========================================================================== */
.section { padding: 96px 0; }
.section-canvas { background: var(--surface-canvas); }
.section-linen { background: var(--surface-linen-band); }
.section-soft { background: var(--surface-soft-wash); }
.section-blush { background: var(--surface-blush-wash); }
.section-sand { background: var(--surface-sand-wash); }
.section-mauve { background: var(--surface-mauve-wash); }

/* Farbige Flächen mit weißer Schrift */
.section-gradient { background: var(--gradient-band); color: var(--color-paper-white); }
.section-dark { background: var(--surface-deep); color: var(--color-paper-white); }
.section-gradient h2, .section-gradient h3, .section-gradient h4,
.section-dark h2, .section-dark h3, .section-dark h4 { color: var(--color-paper-white); }
.section-gradient p,
.section-dark p { color: rgba(255, 255, 255, 0.78); }
.section-gradient .section-label,
.section-dark .section-label {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.26);
  color: var(--color-paper-white);
}
.section-gradient .section-label .num,
.section-dark .section-label .num { color: var(--color-paper-white); }

/* Feature-Cards auf dunkler Fläche */
.section-dark .feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32) var(--spacing-24);
}

/* Akzentfarbe des Section-Labels variieren */
.section-label.gold .num { color: var(--color-gold); }
.section-label.mauve .num { color: var(--color-mauve); }
.section-label.sage .num { color: var(--color-sage); }

.section-head { max-width: 720px; margin: 0 auto var(--spacing-48); text-align: center; }
.section-head h2 { margin-bottom: var(--spacing-12); }
.section-head p { margin: 0; }

/* ==========================================================================
   Feature Cards
   ========================================================================== */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-32); }
.feature-card { padding: var(--spacing-32) var(--spacing-16); text-align: center; }
.feature-icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-tags);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--spacing-20);
  color: var(--color-paper-white);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  background: var(--color-rose);
}
.feature-icon.gold { background: var(--color-gold); }
.feature-icon.mauve { background: var(--color-mauve); }
.feature-card h4 { margin-bottom: var(--spacing-8); }
.feature-card p { margin: 0; }

/* Pain-Point-Split */
.pain-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--spacing-64); align-items: center; }
.pain-visual {
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-images);
  background: var(--surface-mist-fill);
  border: 1px solid var(--color-fog);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ash);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}
.pain-points { display: grid; gap: var(--spacing-12); margin-top: var(--spacing-24); }
.pain-point {
  display: flex;
  gap: var(--spacing-16);
  padding: var(--spacing-20);
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
}
.pain-point .icon {
  flex-shrink: 0;
  width: 40px; height: 40px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
  color: var(--color-paper-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}
.pain-point .icon.gold { background: var(--color-gold); }
.pain-point .icon.mauve { background: var(--color-mauve); }
.pain-point h4 { margin-bottom: var(--spacing-4); }
.pain-point p { margin: 0; font-size: 14px; letter-spacing: -0.23px; }

/* ==========================================================================
   Split-Layout (Zyklus-Intro, Über mich)
   ========================================================================== */
.split-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--spacing-64); align-items: center; }
.split-grid.reverse .about-visual { order: -1; }

/* Zyklus-Ring */
.cycle-visual { text-align: center; }
.cycle-ring { width: 100%; max-width: 300px; margin: 0 auto; height: auto; }
.cycle-ring .ring-num {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: var(--font-weight-semibold);
  letter-spacing: -2px;
  fill: var(--color-carbon);
}
.cycle-ring .ring-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  letter-spacing: 1.5px;
  fill: var(--color-ash);
}
.cycle-visual-note {
  max-width: 30ch;
  margin: var(--spacing-24) auto 0;
  font-size: 14px;
  letter-spacing: -0.23px;
}

/* Phasen-Karten */
.phase-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--spacing-16); }
.phase-card {
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-top: 3px solid var(--color-rose);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24) var(--spacing-20);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.phase-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-subtle-3); }
.phase-card.gold { border-top-color: var(--color-gold); }
.phase-card.sage { border-top-color: var(--color-sage); }
.phase-card.mauve { border-top-color: var(--color-mauve); }
.phase-days {
  display: inline-block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--spacing-8);
}
.phase-card h4 { margin-bottom: var(--spacing-8); }
.phase-card > p { font-size: 14px; letter-spacing: -0.23px; margin-bottom: var(--spacing-16); }
.phase-facts {
  margin: 0;
  padding-top: var(--spacing-16);
  border-top: 1px solid var(--color-fog);
  display: grid;
  gap: var(--spacing-4);
}
.phase-facts dt {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ash);
}
.phase-facts dd {
  margin: 0 0 var(--spacing-8);
  font-size: 14px;
  letter-spacing: -0.23px;
  color: var(--color-carbon);
}
.phase-facts dd:last-child { margin-bottom: 0; }

/* Benefit-Karte */
.benefit-card {
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tables);
  padding: var(--spacing-48) var(--spacing-32);
}
.benefit-card h3 { margin-bottom: var(--spacing-20); }

/* Über mich */
.about-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-images);
  background: var(--surface-mist-fill);
  border: 1px solid var(--color-fog);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-ash);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}
.about-chips { display: flex; flex-wrap: wrap; gap: var(--spacing-8); margin-top: var(--spacing-24); }
.about-chips span {
  padding: 6px 12px;
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tags);
  background: var(--surface-canvas);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
}

/* ==========================================================================
   Vorher/Nachher
   ========================================================================== */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-24); }
.compare-col {
  border-radius: var(--radius-tables);
  border: 1px solid var(--color-fog);
  background: var(--surface-canvas);
  padding: var(--spacing-48) var(--spacing-32);
}
.compare-col.after { background: var(--surface-soft-wash); border-color: transparent; }
.compare-col h3 { margin-bottom: var(--spacing-20); }
.compare-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-12); }
.compare-list li {
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
  font-size: 14px;
  letter-spacing: -0.23px;
  color: var(--color-graphite);
}
.compare-list .mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--radius-tags);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  margin-top: 2px;
}
.compare-col.before .mark { background: var(--surface-mist-fill); color: var(--color-ash); }
.compare-col.after .mark { background: var(--color-sage); color: var(--color-paper-white); }
.compare-col.after li { color: var(--color-carbon); }

/* ==========================================================================
   Quote Band
   ========================================================================== */
.quote-band { text-align: center; max-width: 820px; margin: 0 auto; }
.quote-band blockquote {
  margin: var(--spacing-24) 0;
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-heading);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
}
.quote-band cite {
  font-style: normal;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ash);
}

/* ==========================================================================
   Testimonial-Videos
   ========================================================================== */
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
.video-card {
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  overflow: hidden;
  background: var(--surface-canvas);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.video-card:hover { box-shadow: var(--shadow-subtle-3); transform: translateY(-2px); }
.video-thumb {
  aspect-ratio: 4 / 3;
  background: var(--surface-mist-fill);
  border-bottom: 1px solid var(--color-fog);
  display: flex; align-items: center; justify-content: center;
}
.play-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
  color: var(--color-paper-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  box-shadow: var(--shadow-subtle);
}
.video-caption { padding: var(--spacing-16) var(--spacing-20); }
.video-caption .name {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
  letter-spacing: -0.23px;
}
.video-caption .role { font-size: var(--text-caption); letter-spacing: var(--tracking-caption); color: var(--color-ash); }

/* ==========================================================================
   Selbstcheck
   ========================================================================== */
.selfcheck-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--spacing-64); align-items: center; }
.selfcheck-list { list-style: none; padding: 0; margin: var(--spacing-24) 0 var(--spacing-32); display: grid; gap: var(--spacing-12); }
.selfcheck-list li {
  display: flex;
  gap: var(--spacing-12);
  align-items: flex-start;
  padding: var(--spacing-16) var(--spacing-20);
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  font-size: 14px;
  letter-spacing: -0.23px;
  color: var(--color-graphite);
}
.selfcheck-list .q-mark {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--radius-tags);
  background: var(--color-gold);
  color: var(--color-paper-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  margin-top: 2px;
}
.selfcheck-visual {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-images);
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-ash);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

/* ==========================================================================
   Pricing
   ========================================================================== */
.booking-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-24); }
.booking-card {
  position: relative;
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-tables);
  padding: var(--spacing-64) var(--spacing-32);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}
.booking-card.featured { border-color: var(--color-rose); }
.booking-card .badge {
  position: absolute;
  top: -11px; left: var(--spacing-32);
  background: var(--color-rose);
  color: var(--color-paper-white);
  padding: 4px 12px;
  border-radius: var(--radius-tags);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-caption);
}
.booking-card h3 { margin: 0; }
.booking-card .price {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: var(--tracking-heading-lg);
  font-weight: var(--font-weight-medium);
  color: var(--color-carbon);
}
.booking-card .price .unit {
  font-size: 14px;
  letter-spacing: -0.23px;
  color: var(--color-ash);
  font-weight: var(--font-weight-regular);
}
.booking-card p { margin: 0; font-size: 14px; letter-spacing: -0.23px; }
.booking-card ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-8); }
.booking-card li {
  display: flex;
  gap: var(--spacing-8);
  font-size: 14px;
  letter-spacing: -0.23px;
  color: var(--color-graphite);
}
.booking-card li::before { content: "✓"; color: var(--color-sage); font-size: 12px; }
.booking-card .btn { margin-top: var(--spacing-8); align-self: flex-start; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-list { max-width: 820px; margin: 0 auto; display: grid; gap: var(--spacing-12); }
.faq-item {
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.faq-question {
  width: 100%;
  text-align: left;
  padding: var(--spacing-20) var(--spacing-24);
  background: none;
  border: none;
  font-family: var(--font-display);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-body);
  color: var(--color-carbon);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-16);
  cursor: pointer;
}
.faq-question .plus { color: var(--color-rose); font-size: var(--text-subheading); transition: transform 0.25s ease; }
.faq-item.open .plus { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; padding: 0 var(--spacing-24); }
.faq-answer p { font-size: 14px; letter-spacing: -0.23px; margin: 0; }
.faq-item.open .faq-answer { max-height: 400px; padding-bottom: var(--spacing-20); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
.contact-card {
  background: var(--surface-canvas);
  border: 1px solid var(--color-fog);
  border-radius: var(--radius-cards);
  padding: var(--spacing-32);
  text-align: center;
}
.contact-card .icon {
  width: 40px; height: 40px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
  color: var(--color-paper-white);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--spacing-16);
  font-size: 14px;
}
.contact-card .icon.gold { background: var(--color-gold); }
.contact-card .icon.mauve { background: var(--color-mauve); }
.contact-card .label {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-ash);
  margin-bottom: var(--spacing-4);
}
.contact-card a {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.23px;
  color: var(--color-carbon);
}
.contact-card a:hover { color: var(--color-rose); }

/* ==========================================================================
   E-Books
   ========================================================================== */
.ebook-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-24); }
.ebook-card {
  background: var(--color-paper-white);
  border-radius: var(--radius-cards);
  overflow: hidden;
  box-shadow: var(--shadow-subtle-3);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}
.ebook-card:hover { transform: translateY(-3px); }
.ebook-cover {
  aspect-ratio: 3 / 2;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-paper-white);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  font-weight: var(--font-weight-medium);
  text-align: center;
  padding: var(--spacing-20);
  background: var(--color-rose);
}
.ebook-cover.gold { background: var(--color-gold); }
.ebook-cover.mauve { background: var(--color-mauve); }
.ebook-body { padding: var(--spacing-24); display: flex; flex-direction: column; gap: var(--spacing-8); flex: 1; }
.ebook-body h4 { margin: 0; color: var(--color-carbon); }
.ebook-body p { font-size: 14px; letter-spacing: -0.23px; margin: 0; color: var(--color-graphite); }
.ebook-body .btn { margin-top: auto; align-self: flex-start; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: var(--surface-deep);
  color: rgba(255, 255, 255, 0.72);
  padding: var(--spacing-64) 0 var(--spacing-32);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--spacing-48);
  padding-bottom: var(--spacing-48);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.footer-logo {
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.5px;
  color: var(--color-paper-white);
  margin-bottom: var(--spacing-8);
}
.footer-logo span { color: var(--color-rose); }
.footer-grid p {
  font-size: 14px;
  letter-spacing: -0.23px;
  max-width: 30ch;
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
}
.footer-grid h5 {
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  font-weight: var(--font-weight-medium);
  margin-bottom: var(--spacing-12);
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--spacing-8); }
.footer-grid li a { font-size: 14px; letter-spacing: -0.23px; color: rgba(255, 255, 255, 0.72); }
.footer-grid li a:hover { color: var(--color-paper-white); }
.footer-bottom {
  padding-top: var(--spacing-20);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--spacing-12);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: rgba(255, 255, 255, 0.5);
}
.footer-bottom a:hover { color: var(--color-paper-white); }

/* ==========================================================================
   Theme Toggle
   ========================================================================== */
.theme-toggle {
  position: fixed;
  right: var(--spacing-24);
  bottom: var(--spacing-24);
  z-index: 500;
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 10px 20px;
  border: none;
  border-radius: var(--radius-buttons);
  background: var(--color-carbon);
  color: var(--color-paper-white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  letter-spacing: -0.32px;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform 0.2s ease, background-color 0.2s ease;
}
.theme-toggle:hover { transform: translateY(-1px); background: var(--color-rose-deep); }
.theme-toggle .theme-toggle-icon { font-size: 14px; line-height: 1; }

/* ==========================================================================
   Scroll Reveal
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal.d1 { transition-delay: 0.06s; }
.reveal.d2 { transition-delay: 0.12s; }
.reveal.d3 { transition-delay: 0.18s; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Opt-in-Funnel (Unterseiten) — ein Viewport, kein Scroll
   ========================================================================== */
.optin-body {
  min-height: 100dvh;
  overflow: hidden;
  background-color: var(--mesh-base);
  background-image: var(--mesh);
  display: flex;
  flex-direction: column;
}
.optin-shell {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 1180px;
  width: 100%;
  margin: 0 auto;
  padding: var(--spacing-16) var(--spacing-24) var(--spacing-16);
}

/* Direct-Response-Kopf */
.optin-head { text-align: center; max-width: 880px; margin: 0 auto var(--spacing-20); }
.optin-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: 5px 14px;
  border-radius: var(--radius-tags);
  background: var(--color-carbon);
  color: var(--color-paper-white);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--spacing-16);
}
.optin-head h1 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -1.8px;
  font-weight: var(--font-weight-bold);
  margin-bottom: var(--spacing-12);
}
.optin-head h1 em {
  font-style: normal;
  color: var(--color-rose-deep);
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 5px;
}
.optin-head .subhead {
  font-size: 15px;
  line-height: 1.45;
  color: var(--color-graphite);
  max-width: 62ch;
  margin: 0 auto;
}

/* Zwei Spalten: Video links, Formularkarte rechts */
.optin-cols { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: var(--spacing-24); align-items: center; }

/* Video im Rahmen mit Tilt-Hover */
.optin-video {
  perspective: 1200px;
}
.optin-frame {
  position: relative;
  border-radius: var(--radius-cards);
  background: var(--color-paper-white);
  padding: var(--spacing-12);
  box-shadow: var(--shadow-float);
  transform: rotateY(4deg) rotateX(2deg);
  transition: transform 0.45s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.45s ease;
  will-change: transform;
}
.optin-frame:hover {
  transform: rotateY(-3deg) rotateX(-2deg) translateY(-6px) scale(1.015);
  box-shadow: rgba(34, 22, 27, 0.18) 0px 28px 60px 0px, rgba(34, 22, 27, 0.08) 0px 4px 12px 0px;
}
.optin-frame video,
.optin-frame .video-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}
.optin-frame .video-placeholder {
  background: var(--surface-mist-fill);
  border: 1px solid var(--color-fog);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-12);
  text-align: center;
  color: var(--color-graphite);
  font-size: 14px;
  font-weight: var(--font-weight-medium);
}
.optin-video-caption {
  margin: var(--spacing-12) 0 0;
  text-align: center;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  color: var(--color-graphite);
}

/* Formularkarte */
.optin-card {
  background: var(--color-paper-white);
  border-radius: var(--radius-tables);
  box-shadow: var(--shadow-float);
  padding: var(--spacing-24);
}
.optin-card-head { text-align: center; margin-bottom: var(--spacing-16); }
.optin-card-head h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-heading-sm);
  margin-bottom: var(--spacing-4);
}
.optin-card-head p {
  font-size: 14px;
  letter-spacing: -0.23px;
  margin: 0;
}
.optin-form { display: grid; gap: var(--spacing-8); }
.optin-form label {
  display: block;
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
  margin-bottom: var(--spacing-4);
}
.optin-form input {
  width: 100%;
  padding: 11px 14px;
  border-radius: var(--radius-inputs);
  border: 1px solid var(--color-fog);
  background: var(--surface-canvas);
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: -0.23px;
  color: var(--color-carbon);
}
.optin-form input::placeholder { color: var(--color-ash); }
.optin-form input:focus {
  outline: none;
  border-color: var(--color-rose);
  box-shadow: 0 0 0 3px rgba(181, 101, 118, 0.16);
}
.optin-form .btn {
  width: 100%;
  margin-top: var(--spacing-4);
  padding: 13px 24px;
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}
.optin-fineprint {
  margin: var(--spacing-12) 0 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: var(--tracking-caption);
  color: var(--color-ash);
}
.optin-bullets {
  list-style: none;
  padding: var(--spacing-16) 0 0;
  margin: var(--spacing-16) 0 0;
  border-top: 1px solid var(--color-fog);
  display: grid;
  gap: var(--spacing-8);
}
.optin-bullets li {
  display: flex;
  gap: var(--spacing-8);
  align-items: flex-start;
  font-size: 14px;
  letter-spacing: -0.23px;
  color: var(--color-graphite);
}
.optin-bullets .mark {
  flex-shrink: 0;
  width: 18px; height: 18px;
  margin-top: 2px;
  border-radius: var(--radius-tags);
  background: var(--color-sage);
  color: var(--color-paper-white);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px;
}
.optin-trust {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--spacing-20);
  margin-top: var(--spacing-12);
}
.optin-trust span {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  font-size: var(--text-caption);
  letter-spacing: var(--tracking-caption);
  font-weight: var(--font-weight-medium);
  color: var(--color-graphite);
}
.optin-trust .dot {
  width: 5px; height: 5px;
  border-radius: var(--radius-tags);
  background: var(--color-rose);
}

@media (prefers-reduced-motion: reduce) {
  .optin-frame { transform: none; transition: none; }
  .optin-frame:hover { transform: none; }
}

@media (max-width: 980px) {
  .optin-body { overflow: auto; }
  .optin-shell { padding: var(--spacing-24) var(--spacing-16) var(--spacing-32); }
  .optin-cols { grid-template-columns: 1fr; gap: var(--spacing-24); }
  .optin-frame { transform: none; }
  .optin-head { margin-bottom: var(--spacing-24); }
  .optin-card { padding: var(--spacing-24); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1080px) {
  .nav-links { display: none; }
  .nav-divider { display: none; }
  .nav-text-link { display: none; }
  .burger { display: flex; }
}
@media (max-width: 980px) {
  :root {
    --text-display: 40px;
    --tracking-display: -1.5px;
    --text-heading: 28px;
    --text-heading-lg: 36px;
  }
  .hero { padding: 120px 0 var(--spacing-32); }
  .section { padding: 64px 0; }
  .proof-row { gap: var(--spacing-16); margin-top: var(--spacing-32); }
  .showcase-tabs { padding: var(--spacing-8) var(--spacing-12) var(--spacing-12); overflow-x: auto; max-width: 92vw; }
  .showcase-metrics { gap: var(--spacing-24); }
  .feature-grid { grid-template-columns: 1fr; }
  .phase-grid { grid-template-columns: 1fr 1fr; }
  .split-grid { grid-template-columns: 1fr; }
  .split-grid.reverse .about-visual { order: -1; }
  .about-visual { aspect-ratio: 16 / 10; }
  .pain-grid { grid-template-columns: 1fr; }
  .pain-visual { aspect-ratio: 16 / 9; }
  .compare-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr 1fr; }
  .selfcheck-grid { grid-template-columns: 1fr; }
  .selfcheck-visual { order: -1; aspect-ratio: 16 / 9; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-card { padding: var(--spacing-48) var(--spacing-24); }
  .contact-grid { grid-template-columns: 1fr; }
  .ebook-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .optin-wrap { grid-template-columns: 1fr; height: auto; }
  .optin-body { height: auto; overflow: auto; }
  .optin-video { min-height: 40vh; padding: var(--spacing-24); }
  .optin-form-col { padding: var(--spacing-32) var(--spacing-24); }
}
@media (max-width: 620px) {
  .phase-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .theme-toggle { right: var(--spacing-16); bottom: var(--spacing-16); }
}