.mic-report--filled {
  padding-top: clamp(20px, 4vw, 28px);
  padding-bottom: clamp(20px, 4vw, 28px);
}

.mic-report--filled>*:first-child {
  margin-top: 0;
}

.mic-report--filled>*:last-child {
  margin-bottom: 0;
}

.mic-report {
  width: min(640px, 100%);
  margin-inline: auto;
  text-align: left;
  display: grid;
  gap: 0;
  padding: clamp(18px, 4vw, 26px) clamp(12px, 2vw, 18px);
  border-radius: var(--radius-md);
  background: rgba(11, 13, 22, 0.88);
  border: 1px solid rgba(91, 138, 255, 0.16);
  box-shadow: inset 0 0 16px rgba(91, 138, 255, 0.06);
}

.mic-report>* {
  margin-top: 0;
  margin-bottom: 0;
}

.mic-report>*+* {
  margin-top: 8px;
}

.mic-report__header {
  display: grid;
  gap: 6px;
}

.mic-report__header h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.25rem, 2.4vw, 1.9rem);
  margin-bottom: 0;
}

.mic-report__header p {
  color: rgba(243, 244, 247, 0.7);
  margin: 0;
}

.mic-report__confidence {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.5);
}

.mic-report__summary {
  font-size: 0.92rem;
  line-height: 1.32;
  color: rgba(243, 244, 247, 0.82);
  margin: 0;
}

.mic-report__header+.mic-report__summary {
  margin-top: 8px;
}

.mic-report__focus {
  font-size: 0.9rem;
  color: rgba(243, 244, 247, 0.82);
  background: rgba(32, 40, 78, 0.12);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin: 0;
}

.mic-report__summary+.mic-report__focus,
.mic-report__header+.mic-report__focus {
  margin-top: 8px;
}

.mic-report__lists {
  display: grid;
  gap: 0;
  margin: 0;
}

.mic-report__lists>*+* {
  margin-top: 8px;
}

.mic-report__summary+.mic-report__lists,
.mic-report__focus+.mic-report__lists,
.mic-report__header+.mic-report__lists {
  margin-top: 8px;
}

.mic-report__block {
  display: grid;
  gap: 0;
}

.mic-report__block>*+* {
  margin-top: 4px;
}

.mic-report__block--list {
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  background: rgba(20, 24, 42, 0.32);
  border: 1px solid rgba(91, 138, 255, 0.12);
  margin: 0;
}

.mic-report__block h4 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.55);
  margin: 0;
}

.mic-report__block ul {
  list-style: none;
  display: grid;
  gap: 0;
  color: rgba(243, 244, 247, 0.74);
  font-size: 0.87rem;
  padding: 0;
  margin: 0;
}

.mic-report__block ul li+li {
  margin-top: 2px;
}

.mic-report__block ul li {
  position: relative;
  padding-left: 9px;
}

.mic-report__block ul li::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 0;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(91, 138, 255, 0.6);
}

.mic-report__fit {
  font-size: 0.88rem;
  color: rgba(243, 244, 247, 0.68);
  margin: 0;
  line-height: 1.5;
}

.mic-report__date {
  font-size: 0.75rem;
  color: rgba(243, 244, 247, 0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0;
}

.mic-report__excerpt {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.88rem;
  line-height: 1.28;
  color: rgba(243, 244, 247, 0.78);
  background: rgba(32, 40, 78, 0.12);
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  margin: 0;
}

.mic-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mic-report__raw {
  font-size: 0.78rem;
  color: rgba(243, 244, 247, 0.5);
}

.mic-report__raw pre {
  margin-top: 10px;
  max-height: 200px;
  overflow: auto;
  padding: 12px 16px;
  background: rgba(9, 9, 16, 0.76);
  border-radius: var(--radius-sm);
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  line-height: 1.35;
}

.mic-report p {
  margin: 0;
}

@media (min-width: 900px) {
  .mic-report__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.analyse {
  background: radial-gradient(circle at center, rgba(7, 9, 18, 0.95), rgba(5, 5, 12, 0.98));
  padding: clamp(96px, 16vw, 160px) clamp(24px, 6vw, 140px);
}

.analyse__container {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

.analyse__intro {
  text-align: center;
  display: grid;
  gap: 14px;
}

.analyse__intro h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
}

.analyse__intro p {
  color: rgba(243, 244, 247, 0.7);
  max-width: 640px;
  margin: 0 auto;
}

.analyse__panel {
  background: rgba(9, 10, 18, 0.92);
  border-radius: clamp(26px, 5vw, 40px);
  border: 1px solid rgba(91, 138, 255, 0.26);
  backdrop-filter: blur(22px);
  box-shadow: 0 40px 120px rgba(5, 9, 30, 0.4);
  padding: clamp(26px, 5vw, 42px);
  display: grid;
  gap: 20px;
  margin-bottom: clamp(32px, 8vw, 60px);
}

.analyse__form {
  display: grid;
  gap: 18px;
}

.analyse__form label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(243, 244, 247, 0.55);
}

.analyse__form input,
.analyse__form textarea {
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(91, 138, 255, 0.32);
  background: rgba(15, 18, 32, 0.78);
  color: #f5f6fb;
  padding: 14px 18px;
  font-size: 0.95rem;
  font-family: "Inter", sans-serif;
  transition: border 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
  box-shadow: inset 0 12px 24px rgba(5, 8, 20, 0.35);
}

.analyse__form textarea {
  resize: vertical;
  min-height: 110px;
}

.analyse__form input[type="file"] {
  padding: 12px 18px;
  border-radius: 18px;
  border: 1px dashed rgba(91, 138, 255, 0.35);
  background: rgba(15, 18, 32, 0.65);
  color: rgba(243, 244, 247, 0.75);
  cursor: pointer;
}

.analyse__form input[type="file"]:hover {
  border-color: rgba(91, 138, 255, 0.65);
  background: rgba(15, 18, 32, 0.82);
}

.analyse__form input::placeholder,
.analyse__form textarea::placeholder {
  color: rgba(243, 244, 247, 0.35);
  text-transform: none;
  letter-spacing: 0.01em;
}

.analyse__form input:focus,
.analyse__form textarea:focus {
  outline: none;
  border-color: rgba(121, 163, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(91, 138, 255, 0.18), inset 0 6px 18px rgba(5, 8, 20, 0.4);
  background: rgba(15, 18, 32, 0.92);
}

.analyse__note {
  font-size: 0.78rem;
  color: rgba(243, 244, 247, 0.53);
  text-align: center;
}

.mic-report--empty {
  display: grid;
  gap: 6px;
  font-size: 0.9rem;
  color: rgba(243, 244, 247, 0.6);
  text-align: center;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap");

:root {
  color-scheme: dark;
  --color-bg: #050509;
  --color-surface: rgba(12, 12, 22, 0.75);
  --color-surface-strong: rgba(17, 17, 30, 0.92);
  --color-card: rgba(18, 18, 30, 0.88);
  --color-accent: #5b8aff;
  --color-accent-strong: #4a6ee0;
  --color-text: #f3f4f7;
  --color-muted: rgba(243, 244, 247, 0.72);
  --color-highlight: rgba(91, 138, 255, 0.3);
  --shadow-soft: 0 50px 120px rgba(6, 9, 20, 0.65);
  --shadow-card: 0 30px 80px rgba(0, 0, 0, 0.45);
  --radius-lg: 36px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --radius-pill: 999px;
  --border-glow: 1px solid rgba(91, 138, 255, 0.35);
  --grad-hero: linear-gradient(160deg, rgba(12, 12, 22, 0.65), rgba(5, 5, 9, 0.1));
  --grad-card: linear-gradient(160deg, rgba(27, 36, 67, 0.6), rgba(16, 18, 31, 0.95));
  --grad-btn: linear-gradient(135deg, #5b8aff, #9b6bff);
  font-size: clamp(16px, 0.9vw, 18px);
}

body.theme-cyan {
  --color-bg: #01121b;
  --color-surface: rgba(1, 30, 41, 0.78);
  --color-surface-strong: rgba(0, 18, 27, 0.95);
  --color-card: rgba(0, 32, 45, 0.92);
  --color-accent: #34d8ff;
  --color-accent-strong: #1ca8ff;
  --color-text: #ecfcff;
  --color-muted: rgba(236, 252, 255, 0.7);
  --color-highlight: rgba(52, 216, 255, 0.35);
  --border-glow: 1px solid rgba(52, 216, 255, 0.45);
  --grad-hero: linear-gradient(165deg, rgba(8, 35, 54, 0.15), rgba(0, 12, 18, 0.1));
  --grad-card: linear-gradient(160deg, rgba(0, 47, 66, 0.86), rgba(0, 27, 38, 0.95));
  /* Darkened for better contrast with white text */
  --grad-btn: linear-gradient(135deg, #0089b3, #00a8cc);
  background: radial-gradient(circle at 20% 20%, rgba(15, 95, 120, 0.35), rgba(0, 8, 14, 0.9));
  color: var(--color-text);
}

body.theme-cyan .hero-video::after {
  background: linear-gradient(180deg, rgba(0, 18, 27, 0.1) 20%, rgba(0, 10, 16, 0.8) 80%);
}

body.theme-cyan .hero {
  color: #f5ffff;
}

body.theme-cyan .hero::after {
  background: var(--grad-hero);
}

body.theme-cyan section,
body.theme-cyan header,
body.theme-cyan footer {
  background: none;
}

body.theme-cyan .analyse__panel,
body.theme-cyan .register__card,
body.theme-cyan .science-card,
body.theme-cyan .metric-card,
body.theme-cyan .journey-card,
body.theme-cyan .pricing-card,
body.theme-cyan .form-success,
body.theme-cyan .form-error,
body.theme-cyan .mic-report {
  background: var(--color-card);
  border-color: rgba(52, 216, 255, 0.35);
  box-shadow: 0 35px 90px rgba(4, 45, 60, 0.45);
}

body.theme-cyan .hero__content {
  background: none;
  border: none;
  box-shadow: none;
}

body.theme-cyan .science__stat strong {
  color: #34d8ff;
}

body.theme-cyan .science__quote {
  border-left-color: #34d8ff;
  background: rgba(52, 216, 255, 0.12);
}

body.theme-cyan .mic-report__focus,
body.theme-cyan .mic-report__excerpt {
  background: rgba(52, 216, 255, 0.08);
}

body.theme-cyan .mic-launcher,
body.theme-cyan .cta-form input,
body.theme-cyan .modal__form input,
body.theme-cyan .modal__form textarea,
body.theme-cyan .register-form input,
body.theme-cyan .register-form select,
body.theme-cyan .register-form textarea,
body.theme-cyan .analyse__form input,
body.theme-cyan .analyse__form textarea {
  background: rgba(0, 24, 33, 0.75);
  border-color: rgba(52, 216, 255, 0.4);
  color: var(--color-text);
  box-shadow: inset 0 12px 24px rgba(1, 20, 29, 0.35);
}

body.theme-cyan .btn--primary {
  background: var(--grad-btn);
  box-shadow: 0 18px 42px rgba(52, 216, 255, 0.35);
}

body.theme-cyan .btn--ghost {
  border-color: rgba(236, 252, 255, 0.25);
  color: var(--color-text);
  background: rgba(0, 43, 55, 0.7);
}

body.theme-cyan .btn--ghost:hover {
  border-color: rgba(52, 216, 255, 0.65);
  background: rgba(52, 216, 255, 0.2);
}

body.theme-cyan .pricing-card.is-featured {
  background: linear-gradient(150deg, rgba(0, 60, 80, 0.95), rgba(0, 26, 36, 0.8));
  border-color: rgba(106, 241, 255, 0.65);
}

body.theme-cyan .brand {
  background: rgba(0, 28, 40, 0.65);
  border-color: rgba(52, 216, 255, 0.35);
}

body.theme-cyan .global-nav a {
  background: transparent;
  border-color: transparent;
}

body.theme-cyan .global-nav a:hover {
  background: rgba(52, 216, 255, 0.22);
  border-color: rgba(52, 216, 255, 0.5);
}

body.theme-cyan .mic-visualizer__bar {
  background: linear-gradient(180deg, rgba(52, 216, 255, 0.95), rgba(121, 249, 255, 0.75));
}

body.theme-cyan .mic-launcher__status {
  background: rgba(52, 216, 255, 0.15);
  border-color: rgba(52, 216, 255, 0.25);
  color: rgba(236, 252, 255, 0.8);
}

body.theme-cyan .footer {
  background: radial-gradient(circle at top, rgba(0, 48, 61, 0.85), rgba(0, 12, 18, 0.95));
}

body.theme-cyan .key-metrics {
  background: linear-gradient(210deg, rgba(0, 28, 40, 0.95), rgba(0, 10, 16, 0.92));
}

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

html,
body {
  width: 100%;
  min-height: 100%;
  scroll-behavior: smooth;
  background: radial-gradient(ellipse at top, rgba(19, 25, 52, 0.65), rgba(5, 5, 9, 0.92));
  color: var(--color-text);
  font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  line-height: 1.6;
}

body {
  position: relative;
  overflow-x: hidden;
}

video {
  display: block;
}

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

section,
header,
footer {
  padding: clamp(72px, 13vw, 160px) clamp(24px, 6vw, 140px);
  position: relative;
  isolation: isolate;
}

.tag {
  display: none;
  /* Hidden as requested */
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 0.95rem;
  backdrop-filter: blur(10px);
}

.btn--primary {
  background: var(--grad-btn);
  border: none;
  color: #fff;
  box-shadow: 0 15px 35px rgba(91, 138, 255, 0.4);
}

.btn--primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 35px 65px rgba(91, 138, 255, 0.28);
}

.btn--ghost {
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: var(--color-text);
  background: rgba(15, 18, 32, 0.35);
}

.btn--ghost:hover {
  border-color: rgba(91, 138, 255, 0.55);
  background: rgba(91, 138, 255, 0.18);
  transform: translateY(-1px);
}

.btn--large {
  padding: 18px 42px;
  font-size: 1.05rem;
}

.btn--full {
  width: 100%;
}

.cursor-loader {
  position: fixed;
  inset: 0;
  background: rgba(5, 5, 10, 0.85);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.cursor-loader.hidden {
  opacity: 0;
  visibility: hidden;
}

.cursor-loader span {
  width: 8px;
  height: 32px;
  border-radius: 6px;
  background: var(--grad-btn);
  animation: loader 1.2s ease-in-out infinite;
}

.cursor-loader span:nth-child(2) {
  animation-delay: 0.15s;
}

.cursor-loader span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes loader {

  0%,
  100% {
    transform: scaleY(0.3);
    opacity: 0.4;
  }

  50% {
    transform: scaleY(1);
    opacity: 1;
  }
}

/* Hero Video Refactored */
.hero-video {
  /* Position handling moved to inline or specific context if needed, 
     defaulting to block flow here to reset previous fixed styles */
  display: block;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  /* Pull video up to overlap/sit behind hero content if needed, 
     or just close the gap. */
  margin-top: -100px;
  position: relative;
  z-index: 0;
}

.hero-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(120%) contrast(105%) brightness(85%);
}

/* Remove old pseudo-element if it conflicts, or adapt it */
.hero-video::after {
  content: none;
}

.global-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  padding: clamp(16px, 2vw, 32px) clamp(20px, 4vw, 50px);
  z-index: 20;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.brand {
  display: inline-flex;
  align-items: center;
  pointer-events: auto;
  padding: 8px 14px;
  background: rgba(5, 6, 12, 0.45);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(91, 138, 255, 0.18);
  box-shadow: 0 12px 32px rgba(5, 9, 30, 0.35);
}

.brand img {
  height: clamp(34px, 4vw, 54px);
  width: auto;
  filter: drop-shadow(0 12px 28px rgba(5, 9, 30, 0.55));
}

.hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-top: clamp(80px, 12vh, 120px);
  padding-bottom: 20px;
  /* Drastically reduced from 60-100px */
  color: #fff;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(12, 12, 22, 0.65), rgba(5, 5, 9, 0.1));
  z-index: -1;
}

.hero__layout {
  width: min(1200px, 94vw);
  display: flex;
  flex-direction: column;
  gap: clamp(20px, 3vw, 28px);
  margin: 0 auto;
}

.hero__content {
  text-align: center;
  padding: clamp(24px, 5vw, 40px);
  background: rgba(3, 6, 18, 0.45);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(91, 138, 255, 0.2);
  box-shadow: 0 40px 120px rgba(4, 8, 24, 0.55);
  margin: 0 auto;
  width: 100%;
}

.hero__eyebrow {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: rgba(243, 244, 247, 0.6);
}

.hero__tag {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  opacity: 0.75;
}

.hero h1 {
  margin: 16px 0 20px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.5rem, 5.8vw, 4.2rem);
  line-height: 1.1;
  text-shadow: 0 10px 30px rgba(2, 6, 12, 0.45);
}

.hero__lead {
  color: var(--color-muted);
  font-size: 1.08rem;
  margin-bottom: 50px;
  text-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-bottom: 24px;
  /* Reduced from 50px */
}

.hero__micro {
  margin-top: 10px;
  /* Reduced from 40px */
  color: rgba(243, 244, 247, 0.7);
  font-size: 0.9rem;
  text-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  margin-bottom: 0;
}

.hero__system {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  margin: 0 0 20px;
  padding: 0;
}


/* --- RESPONSIVE BOOK PAGE HERO --- */
.hero-book-section {
  padding: 120px 20px 80px;
  min-height: 60vh;
  display: flex;
  align-items: center;
}

.hero-book-container {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.hero-book-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 80px;
  align-items: center;
}

.book-3d-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1500px;
  height: 500px;
  /* Removed fixed translateX to let flex center it properly */
}

/* Typography classes for the book hero */
.book-subtitle {
  color: #34d8ff;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 700;
}

.book-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  color: #fff;
  margin-bottom: 20px;
  line-height: 1.1;
}

.book-tagline {
  font-size: 1.5rem;
  color: rgba(243, 244, 247, 0.8);
  margin-bottom: 40px;
  font-weight: 400;
  line-height: 1.4;
}

.book-description {
  font-size: 1.1rem;
  color: rgba(243, 244, 247, 0.85);
  line-height: 1.7;
  margin-bottom: 40px;
}

.book-actions {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

/* RESPONSIVE STYLES FOR BOOK HERO */
/* RESPONSIVE STYLES FOR BOOK HERO */
@media (max-width: 900px) {
  .hero-book-section {
    padding: 100px 20px 60px !important;
    min-height: auto !important;
  }

  .hero-book-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    text-align: center !important;
    align-items: center !important;
  }

  .book-3d-wrapper {
    height: 380px !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 10px !important;
    transform: scale(0.75) !important;
    transform-origin: center center !important;
    /* Ensure no horizontal overflow */
    overflow: visible !important;
  }

  /* Make sure the text content is full width and prioritized */
  .hero-book-content {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
  }

  .book-actions {
    justify-content: center !important;
  }

  .book-title {
    font-size: 2.2rem !important;
  }

  .book-tagline {
    font-size: 1.2rem !important;
    margin-bottom: 30px !important;
  }
}

@media (max-width: 480px) {
  .book-3d-wrapper {
    height: 300px !important;
    transform: scale(0.6) !important;
    margin-top: -40px !important;
    margin-bottom: -20px !important;
  }

  .hero-book-section {
    padding-top: 90px !important;
  }
}


.hero__system strong {
  display: block;
  font-size: 1.6rem;
  color: #fff;
}

.hero__system span {
  font-size: 0.9rem;
  color: rgba(243, 244, 247, 0.7);
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 28px;
}

.hero__fact {
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: rgba(20, 40, 80, 0.45);
  border: 1px solid rgba(91, 138, 255, 0.28);
}

.hero__fact strong {
  display: block;
  font-size: 1.4rem;
  color: #fff;
}

.hero__fact span {
  color: rgba(243, 244, 247, 0.76);
  font-size: 0.9rem;
}

.transition-video {
  width: 100%;
  min-height: 100vh;
  padding: 0;
  background: transparent;
  position: relative;
  overflow: hidden;
}

.transition-video__container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  overflow: hidden;
}

.transition-video__wrapper {
  position: relative;
  width: clamp(1100px, 80vw, 1600px);
  transition: width 0.5s ease, transform 0.5s ease, box-shadow 0.5s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: clamp(32px, 6vw, 80px);
  background: transparent;
}

.transition-video__player {
  width: 100%;
  max-width: 1440px;
  height: min(85vh, 1440px * 9 / 16);
  display: block;
  object-fit: cover;
  border: none;
  border-radius: clamp(12px, 2vw, 28px);
  background: transparent;
  position: relative;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.25s ease 0.05s;
}

.transition-video__poster {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.transition-video__poster::after {
  content: "";
  width: 100%;
  height: 100%;
  border-radius: clamp(12px, 2vw, 28px);
  background: url("assets/casque_sans_fond.png") center/contain no-repeat;
  filter: drop-shadow(0 30px 80px rgba(0, 0, 0, 0.35));
}

.transition-video__wrapper.is-playing .transition-video__poster {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.transition-video__wrapper.is-playing .transition-video__player {
  opacity: 1;
  transition: opacity 0.25s ease 0.08s;
}

.transition-video__mask {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, transparent 45%, rgba(3, 22, 46, 0.85) 70%, #021427 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.transition-video.is-immersive .transition-video__mask {
  opacity: 1;
}

.transition-video.is-immersive .transition-video__wrapper {
  width: min(1700px, 95vw);
  transform: scale(1.03);
  box-shadow: 0 80px 220px rgba(0, 0, 0, 0.85);
}

.transition-video.is-immersive .transition-video__container {
  position: fixed;
  inset: 0;
  z-index: 40;
}

body.is-immersive {
  background: #000;
}

body.is-immersive .global-header {
  opacity: 0;
  pointer-events: none;
}

body.is-immersive .hero-video {
  opacity: 0;
}

.transition-video__caption {
  position: absolute;
  left: clamp(24px, 5vw, 100px);
  bottom: clamp(24px, 5vw, 80px);
  background: rgba(0, 0, 0, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 16px 22px;
  font-size: 0.92rem;
  color: rgba(243, 244, 247, 0.9);
  backdrop-filter: blur(8px);
  max-width: min(420px, 70vw);
}

.transition-video__caption span {
  display: block;
  margin-top: 6px;
  font-size: 0.82rem;
  color: rgba(243, 244, 247, 0.65);
}

.experience-grid {
  padding: clamp(80px, 14vw, 140px) clamp(24px, 6vw, 140px);
  background: linear-gradient(200deg, rgba(3, 5, 14, 0.94), rgba(4, 9, 24, 0.98));
}

.experience-grid__intro {
  max-width: 760px;
  margin-bottom: clamp(40px, 7vw, 70px);
}

.experience-grid__intro h2 {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
}

.experience-grid__wrapper {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

@media (max-width: 1100px) {
  .experience-grid__wrapper {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 800px) {
  .experience-grid__wrapper {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .experience-grid__wrapper {
    grid-template-columns: 1fr;
  }
}

.experience-card {
  padding: clamp(20px, 4vw, 30px);
  border-radius: var(--radius-md);
  background: rgba(6, 8, 20, 0.65);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 25px 80px rgba(3, 5, 14, 0.55);
  display: grid;
  gap: 10px;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

.experience-card:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 138, 255, 0.4);
  background: rgba(6, 8, 20, 0.85);
}

.experience-card span {
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.55);
}

.focus-mode {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 5vw, 60px);
  align-items: center;
  padding: clamp(40px, 6vw, 60px) clamp(24px, 6vw, 140px);
  background: radial-gradient(circle at top right, rgba(18, 40, 74, 0.8), rgba(2, 4, 12, 0.95));
}

.focus-mode+.focus-mode {
  padding-top: 0;
}

.focus-mode__content h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 18px;
}

.focus-mode__tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.focus-mode__tiles .tile {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  aspect-ratio: 1;
}

.focus-mode__tiles .tile--filled {
  display: grid;
  place-items: center;
  font-weight: 700;
  color: #fff;
  background: rgba(52, 216, 255, 0.12);
  border-color: rgba(91, 138, 255, 0.35);
}

.focus-mode__content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 10px;
}

.focus-mode__content li {
  padding-left: 16px;
  position: relative;
  color: rgba(243, 244, 247, 0.75);
}

.focus-mode__content li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.focus-mode__cta {
  display: grid;
  gap: 6px;
}

.focus-mode__visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(91, 138, 255, 0.2);
  box-shadow: 0 35px 120px rgba(2, 4, 12, 0.6);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.focus-mode__visual video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  object-position: center center;
  border-radius: var(--radius-lg);
}

/* --- FORCES SECTION (Was Ecosystem) --- */
.forces {
  padding: clamp(80px, 14vw, 140px) clamp(24px, 6vw, 140px);
  background: linear-gradient(200deg, rgba(5, 7, 16, 0.96), rgba(6, 10, 22, 0.96));
}

.forces__intro {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  margin-bottom: clamp(36px, 6vw, 60px);
}

.forces__intro h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
}

.forces__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.force-card {
  padding: 26px;
  border-radius: var(--radius-md);
  background: rgba(6, 8, 18, 0.6);
  border: 1px solid rgba(91, 138, 255, 0.15);
  box-shadow: 0 20px 70px rgba(2, 4, 12, 0.3);
  backdrop-filter: blur(10px);
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.force-card:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 138, 255, 0.4);
  background: rgba(6, 8, 18, 0.8);
}

.force-card h3 {
  margin-bottom: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  color: #fff;
}

.force-card p {
  color: rgba(243, 244, 247, 0.7);
  font-size: 0.95rem;
  line-height: 1.5;
}

.force-card strong {
  color: var(--color-accent);
}

.immersive-motion {
  padding-top: clamp(110px, 16vw, 200px);
  padding-bottom: clamp(120px, 18vw, 220px);
  background: linear-gradient(200deg, rgba(7, 9, 17, 0.95), rgba(4, 5, 12, 0.95));
}

.immersive-motion__intro {
  max-width: 720px;
  margin: 0 auto clamp(40px, 8vw, 70px);
  text-align: center;
  display: grid;
  gap: 14px;
}

.immersive-motion__wrapper {
  display: grid;
  gap: clamp(60px, 8vw, 120px);
}

.motion-step {
  display: grid;
  gap: clamp(24px, 5vw, 50px);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  position: relative;
}

.motion-step::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: -24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(140deg, rgba(98, 134, 255, 0.15), rgba(12, 14, 30, 0));
  opacity: 0;
  transition: opacity 0.6s ease;
  z-index: -1;
}

.motion-step:hover::after {
  opacity: 1;
}

.motion-step__media {
  position: relative;
  padding-top: 55%;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.motion-step__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10, 14, 33, 0), rgba(10, 14, 33, 0.65));
  opacity: 0;
  transition: opacity 0.6s ease;
}

.motion-step:hover .motion-step__media::after {
  opacity: 1;
}

.motion-step__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(118%) contrast(105%);
  transform: scale(1.02);
  transition: transform 0.8s ease;
}

.motion-step:hover .motion-step__image {
  transform: scale(1.08);
}

.motion-step__content h2,
.motion-step__content h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  margin-bottom: 16px;
}

.motion-step__content p {
  color: var(--color-muted);
  max-width: 480px;
}

.profil {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(40px, 7vw, 80px);
  background: linear-gradient(180deg, rgba(9, 9, 16, 0.9), rgba(17, 19, 36, 0.95));
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 80px);
}

@media (max-width: 768px) {
  .profil {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }

  .profil__visual {
    order: -1;
  }
}

.profil__content {
  display: grid;
  gap: 20px;
}

.profil__content h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0;
  line-height: 1.2;
}

.profil__content p {
  color: var(--color-muted);
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.6;
}

.profil__cta {
  margin-top: 8px;
  display: grid;
  gap: 12px;
}

.profil__sub {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(243, 244, 247, 0.6);
  line-height: 1.5;
}

.profil__visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.profil__visual-inner {
  width: clamp(260px, 36vw, 420px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(91, 138, 255, 0.12), rgba(12, 12, 22, 0.9));
  border: var(--border-glow);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow: 0 50px 120px rgba(11, 12, 30, 0.55);
}

.profil__ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(91, 138, 255, 0.28);
  animation: pulse 5s ease-in-out infinite;
}

.profil__ring--1 {
  width: 55%;
  height: 55%;
  animation-delay: 0s;
}

.profil__ring--2 {
  width: 80%;
  height: 80%;
  animation-delay: 1s;
}

.profil__ring--3 {
  width: 100%;
  height: 100%;
  animation-delay: 2s;
}

@keyframes pulse {

  0%,
  100% {
    transform: scale(0.96);
    opacity: 0.5;
  }

  50% {
    transform: scale(1.04);
    opacity: 1;
  }
}


/* --- ORATOR TYPES VISUAL --- */
.orator-types-visual {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  position: relative;
  max-width: 400px;
  margin: 0 auto 30px;
}

.type-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 20px 10px;
  text-align: center;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: transform 0.4s ease, border-color 0.4s ease;
}

.type-card:hover {
  transform: translateY(-5px);
  border-color: rgba(91, 138, 255, 0.5);
  background: rgba(255, 255, 255, 0.08);
}

.type-card--1 {
  transform: rotate(-2deg) translateY(10px);
}

.type-card--2 {
  transform: rotate(2deg);
}

.type-card--3 {
  transform: rotate(1deg) translateY(10px);
}

.type-card--4 {
  transform: rotate(-1deg);
}

/* --- RADAR / TOILE INTERACTIVE --- */
.radar-container {
  position: relative;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

#radar-canvas {
  width: 100%;
  height: 100%;
  display: block;
  /* filter: drop-shadow(0 0 20px rgba(91, 138, 255, 0.2)); */
}

/* --- VOICE WAVE --- */
.voice-wave-container {
  width: 100%;
  height: 80px;
  margin-bottom: 24px;
  border-radius: 12px;
  background: rgba(91, 138, 255, 0.03);
  border: 1px solid rgba(91, 138, 255, 0.1);
  overflow: hidden;
  position: relative;
}

#wave-canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* --- SOFTEN TRANSITIONS (FIX) --- */

/* Hero video fade out smoothly at the bottom */
.hero-video {
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

/* Experience Grid: No background, let it float over the fading video */
.experience-grid {
  background: transparent;
  /* Removed the dark gradient */
  padding-top: 0;
  margin-top: -60px;
  position: relative;
  z-index: 10;
}

/* Glass effect for cards to pop against the video */
.experience-card {
  background: rgba(6, 8, 20, 0.65);
  /* More transparent */
  backdrop-filter: blur(20px);
  /* Stronger blur */
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.experience-grid__intro {
  margin-top: 60px;
}

/* Smooth gradient start for the next section */
.focus-mode {
  /* Start dark blue/black seamlessly */
  background: linear-gradient(180deg, rgba(1, 2, 4, 0) 0%, rgba(2, 4, 12, 1) 20%);
  padding-top: 40px;
}


.science {
  background: linear-gradient(160deg, rgba(6, 6, 12, 0.96), rgba(18, 18, 30, 0.94));
}

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

@media (max-width: 968px) {
  .science__layout {
    grid-template-columns: 1fr;
    gap: clamp(32px, 6vw, 48px);
  }
}

.science__heading {
  max-width: none;
}

.science__heading h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-top: 20px;
  margin-bottom: 40px;
}

.science__stats {
  display: grid;
  gap: clamp(24px, 4vw, 32px);
  margin-top: clamp(32px, 5vw, 48px);
  margin-bottom: clamp(32px, 5vw, 48px);
}

.science__stat {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: 1.6;
  color: rgba(243, 244, 247, 0.85);
  margin: 0;
}

.science__stat strong {
  color: var(--color-accent);
  font-weight: 600;
}

.science__source {
  display: block;
  font-size: 0.85rem;
  color: rgba(243, 244, 247, 0.55);
  font-style: italic;
  margin-top: 8px;
}

.science__quote {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-style: italic;
  color: rgba(243, 244, 247, 0.9);
  margin: 0;
  padding: clamp(20px, 4vw, 32px);
  border-left: 3px solid var(--color-accent);
  background: rgba(91, 138, 255, 0.08);
  border-radius: var(--radius-sm);
  line-height: 1.5;
}

.science__profil {
  display: grid;
  gap: 20px;
}

.science__profil h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  margin: 0;
  line-height: 1.2;
}

.science__profil p {
  color: var(--color-muted);
  font-size: 1.02rem;
  margin: 0;
  line-height: 1.6;
}

.science__cta {
  margin-top: 8px;
  display: grid;
  gap: 12px;
  justify-items: center;
  /* Center button */
  text-align: center;
  /* Center text below button */
}

.science__sub {
  margin: 0;
  font-size: 0.9rem;
  color: rgba(243, 244, 247, 0.6);
  line-height: 1.5;
}

.science__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 4vw, 36px);
  margin-top: clamp(40px, 6vw, 60px);
}

.science__right {
  display: grid;
  gap: clamp(32px, 5vw, 48px);
}

.science-card {
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-md);
  background: var(--grad-card);
  border: 1px solid rgba(51, 66, 125, 0.4);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(15px);
}

.science-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.4rem;
  margin-bottom: 12px;
}

.science-card p {
  color: rgba(243, 244, 247, 0.7);
}

.key-metrics {
  background: linear-gradient(200deg, rgba(1, 12, 18, 0.96), rgba(5, 24, 34, 0.9));
  padding-top: clamp(90px, 14vw, 160px);
  padding-bottom: clamp(90px, 14vw, 160px);
}

/* --- KEY METRICS SPLIT LAYOUT --- */
.key-metrics__layout {
  max-width: 1100px;
  margin: 0 auto clamp(40px, 6vw, 80px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 8vw, 100px);
  align-items: center;
}

@media (max-width: 900px) {
  .key-metrics__layout {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
  }
}

.key-metrics__content {
  display: grid;
  gap: 20px;
}

.key-metrics__content h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.1;
  margin: 0;
}

.key-metrics__content p {
  color: rgba(243, 244, 247, 0.75);
  font-size: 1.05rem;
  line-height: 1.6;
}

.key-metrics__content strong {
  color: var(--color-accent);
}

.science-testimonial__author strong {
  display: block;
  font-size: 1rem;
  color: #0f172a;
  /* Dark color for white background */
}

.science-testimonial__author span {
  font-size: 0.85rem;
  color: #475569;
  /* Muted dark color for white background */
}

.key-metrics__content h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.3rem;
  color: #5b8aff;
  margin-bottom: 10px;
}

.key-metrics__content ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: grid;
  gap: 8px;
}

.key-metrics__content ul li {
  padding-left: 18px;
  position: relative;
  font-size: 1.05rem;
  color: rgba(243, 244, 247, 0.85);
}

.key-metrics__content ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-accent);
}

/* Ajustement Radar dans ce contexte */
.radar-container {
  width: 100%;
  max-width: 450px;
  aspect-ratio: 1;
  margin: 0 auto;
  /* Centré mobile, ou aligné droite desktop via grid */
}

.key-metrics__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(24px, 4vw, 36px);
}

.metric-card {
  padding: clamp(24px, 4vw, 36px);
  border-radius: var(--radius-md);
  border: 1px solid rgba(91, 138, 255, 0.22);
  background: rgba(9, 14, 26, 0.85);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 16px;
}

.metric-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.35rem;
}

.metric-card ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  color: rgba(243, 244, 247, 0.78);
  font-size: 0.95rem;
}

.metric-card ul li strong {
  font-size: 1.05rem;
  color: var(--color-accent);
}

.journeys {
  background: linear-gradient(200deg, rgba(4, 5, 9, 0.96), rgba(12, 12, 24, 0.92));
}

.journeys__intro {
  max-width: 620px;
  margin-bottom: clamp(40px, 6vw, 70px);
}

.journeys__intro h2 {
  margin-top: 16px;
  margin-bottom: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
}

.journeys__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(24px, 4vw, 40px);
}

.journey-card {
  background: rgba(12, 12, 24, 0.85);
  border-radius: var(--radius-md);
  padding: clamp(24px, 4vw, 36px);
  border: 1px solid rgba(73, 93, 185, 0.35);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(10px);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.journey-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
}

.journey-card p {
  color: rgba(243, 244, 247, 0.7);
}

.journey-card ul {
  list-style: none;
  display: grid;
  gap: 10px;
  color: rgba(243, 244, 247, 0.72);
  font-size: 0.95rem;
}

.journey-card ul li::before {
  content: "•";
  margin-right: 8px;
  color: rgba(91, 138, 255, 0.8);
}

.cta-form {
  display: grid;
  gap: 12px;
}

.cta-form label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(243, 244, 247, 0.6);
}

.cta-form__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
}

.cta-form input,
.modal__form input,
.modal__form textarea {
  background: rgba(9, 9, 16, 0.78);
  border: 1px solid rgba(91, 138, 255, 0.35);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 14px 18px;
  font-size: 0.95rem;
  transition: border 0.3s ease, box-shadow 0.3s ease;
}

.modal__form textarea {
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 120px;
  background: rgba(9, 9, 16, 0.78);
}

.cta-form input:focus,
.modal__form input:focus,
.modal__form textarea:focus {
  outline: none;
  border-color: rgba(91, 138, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(91, 138, 255, 0.18);
}

.cta-form__note {
  font-size: 0.8rem;
  color: rgba(243, 244, 247, 0.55);
}

.cta-form__hint {
  font-size: 0.85rem;
  color: rgba(243, 244, 247, 0.6);
  margin: 0;
}

.register {
  background: linear-gradient(200deg, rgba(7, 9, 22, 0.94), rgba(12, 14, 30, 0.96));
}

.register__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(32px, 6vw, 80px);
  align-items: stretch;
}

.register__content h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.1rem, 4vw, 3.1rem);
  margin: 18px 0 18px;
}

.register__content p {
  color: rgba(243, 244, 247, 0.7);
  margin-bottom: 20px;
  max-width: 520px;
}

.register__list {
  list-style: none;
  display: grid;
  gap: 12px;
  color: rgba(243, 244, 247, 0.75);
}

.register__list li::before {
  content: "•";
  color: rgba(91, 138, 255, 0.8);
  margin-right: 10px;
}

.register__card {
  background: rgba(9, 10, 18, 0.9);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 5vw, 40px);
  border: 1px solid rgba(91, 138, 255, 0.26);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 20px;
}

.register__card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
}

.register-form {
  display: grid;
  gap: 16px;
}

.register-form label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(243, 244, 247, 0.55);
}

.register-form input,
.register-form select,
.register-form textarea {
  width: 100%;
  background: rgba(9, 9, 16, 0.78);
  border: 1px solid rgba(91, 138, 255, 0.35);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 14px 18px;
  font-size: 0.95rem;
  transition: border 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
}

.register-form textarea {
  border-radius: var(--radius-md);
  resize: vertical;
  min-height: 120px;
}

.register-form select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 1L6 6L1 1' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px;
}

.register-form input:focus,
.register-form select:focus,
.register-form textarea:focus {
  outline: none;
  border-color: rgba(91, 138, 255, 0.75);
  box-shadow: 0 0 0 3px rgba(91, 138, 255, 0.18);
}

.register__legal {
  font-size: 0.75rem;
  color: rgba(243, 244, 247, 0.45);
  text-align: center;
}

.form-success {
  display: grid;
  gap: 10px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: rgba(32, 40, 78, 0.22);
  border: 1px solid rgba(91, 138, 255, 0.28);
  box-shadow: inset 0 0 20px rgba(91, 138, 255, 0.12);
  color: rgba(243, 244, 247, 0.78);
}

.form-success__link {
  display: inline-block;
  color: var(--color-accent);
  font-weight: 600;
  word-break: break-all;
}

.form-error {
  display: grid;
  gap: 10px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: rgba(120, 32, 32, 0.22);
  border: 1px solid rgba(255, 91, 91, 0.35);
  box-shadow: inset 0 0 20px rgba(255, 91, 91, 0.12);
  color: rgba(255, 196, 196, 0.85);
}

.mic-launcher__container {
  display: grid;
  justify-items: center;
  gap: 16px;
  text-align: center;
}

.mic-launcher__container--inline {
  margin-top: 16px;
  justify-items: stretch;
  gap: 12px;
}

.mic-launcher {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(91, 138, 255, 0.35);
  background: rgba(15, 18, 32, 0.65);
  color: var(--color-text);
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.mic-launcher:hover {
  transform: translateY(-2px);
  background: rgba(91, 138, 255, 0.18);
  box-shadow: 0 18px 42px rgba(91, 138, 255, 0.25);
}

.mic-launcher.is-active {
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 20px 50px rgba(91, 138, 255, 0.35);
}

.mic-launcher__icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid currentColor;
  position: relative;
  display: inline-block;
}

.mic-launcher__icon::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 999px;
  background: currentColor;
  mask: radial-gradient(circle at center, transparent 45%, black 46%);
}

.mic-launcher__icon::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 6px;
  border-radius: 0 0 8px 8px;
  background: currentColor;
}

.mic-visualizer {
  display: grid;
  grid-template-columns: repeat(16, minmax(4px, 8px));
  gap: 6px;
  align-items: end;
  justify-content: center;
  width: 100%;
  max-width: 240px;
  height: 56px;
  margin-top: 12px;
}

.mic-visualizer__bar {
  --bar-scale: 0.2;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(91, 138, 255, 0.85), rgba(155, 107, 255, 0.55));
  transform-origin: bottom;
  transform: scaleY(var(--bar-scale));
  transition: transform 0.12s ease;
  opacity: 0.9;
}

.mic-timer {
  font-size: 0.9rem;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: 0.12em;
  color: rgba(243, 244, 247, 0.62);
  margin-top: 6px;
}

.mic-launcher__status {
  font-size: 0.85rem;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(91, 138, 255, 0.12);
  color: rgba(243, 244, 247, 0.78);
  border: 1px solid rgba(91, 138, 255, 0.25);
  transition: background 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.mic-launcher__meta {
  display: inline-block;
  margin-top: 4px;
  font-size: 0.72rem;
  color: rgba(243, 244, 247, 0.48);
}

.mic-launcher__status[data-variant="success"] {
  background: rgba(68, 199, 143, 0.2);
  border-color: rgba(68, 199, 143, 0.4);
  color: rgba(213, 255, 235, 0.9);
}

.mic-launcher__status[data-variant="error"] {
  background: rgba(215, 86, 86, 0.2);
  border-color: rgba(215, 86, 86, 0.45);
  color: rgba(255, 200, 200, 0.88);
}

/* Règle dupliquée supprimée - utilise la définition en haut du fichier */

.mic-report__header h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.4rem;
  margin-bottom: 6px;
}

.mic-report__header {
  display: grid;
  gap: 8px;
}

.mic-report__header p {
  color: rgba(243, 244, 247, 0.7);
}

.mic-report p {
  margin: 0;
  line-height: 1.55;
}

.mic-report__confidence {
  margin-top: 8px;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.5);
}

.mic-report__summary {
  font-size: 1rem;
  color: rgba(243, 244, 247, 0.84);
}

.mic-report__focus {
  font-size: 0.96rem;
  color: rgba(243, 244, 247, 0.82);
}

.mic-report__fit {
  font-size: 0.88rem;
  color: rgba(243, 244, 247, 0.68);
  margin: 0;
  line-height: 1.5;
}

.mic-report__date {
  font-size: 0.75rem;
  color: rgba(243, 244, 247, 0.45);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mic-report__block h4 {
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.55);
  margin-bottom: 8px;
}

/* Règle dupliquée supprimée - utilise la définition en haut du fichier */

/* Règle dupliquée supprimée - utilise la définition en haut du fichier */

/* Règle dupliquée supprimée - utilise la définition en haut du fichier */

.mic-report__block ul li {
  position: relative;
  padding-left: 16px;
}

.mic-report__block ul li::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(91, 138, 255, 0.65);
}

/* Règle dupliquée supprimée - utilise la définition en haut du fichier */

.mic-report__lists .mic-report__block--list {
  margin: 0;
}

.mic-report__lists .mic-report__block--list ul {
  gap: 0;
}

.mic-report__lists .mic-report__block--list ul li+li {
  margin-top: 2px;
}

.mic-report__lists .mic-report__block--list ul li::before {
  top: 7px;
}

.mic-report__lists .mic-report__block--list ul li {
  padding-left: 14px;
}

.mic-report__lists .mic-report__block--list h4 {
  margin-bottom: 6px;
}

.mic-report__lists .mic-report__block--list ul li strong {
  font-weight: 600;
}

/* Règle dupliquée supprimée - utilise la définition en haut du fichier */

.mic-report__summary {
  font-size: 1rem;
  color: rgba(243, 244, 247, 0.84);
}

.mic-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.mic-report__raw {
  font-size: 0.8rem;
  color: rgba(243, 244, 247, 0.5);
}

.mic-report__raw pre {
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
  padding: 12px 16px;
  background: rgba(9, 9, 16, 0.76);
  border-radius: var(--radius-sm);
  font-family: "Space Grotesk", monospace;
  font-size: 0.75rem;
  line-height: 1.5;
}

.mic-report__lists {
  gap: 18px;
}

.mic-report__lists .mic-report__block--list ul li {
  padding-left: 14px;
}

.mic-report__excerpt {
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.92rem;
  line-height: 1.35;
  color: rgba(243, 244, 247, 0.78);
  background: rgba(32, 40, 78, 0.12);
  padding: 12px 16px;
  border-radius: var(--radius-sm);
}

@media (min-width: 900px) {
  .mic-report__lists {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Specific override for theme-cyan to ensure background is visible and padding is tight but comfortably below header */
/* Specific override for theme-cyan to ensure background is visible and padding is tight */
body.theme-cyan .pricing {
  background: linear-gradient(220deg, rgba(7, 7, 15, 0.94), rgba(16, 17, 30, 0.96)) !important;
  padding-top: 80px !important;
  /* Reduced for tighter fit */
  padding-bottom: 20px;
}

.pricing {
  background: linear-gradient(220deg, rgba(7, 7, 15, 0.94), rgba(16, 17, 30, 0.96));
  padding-top: 80px;
  padding-bottom: 20px;
}


.pricing__header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 24px;
  /* Reduced from 40px */
  padding-top: 0;
}

.pricing__grid {
  display: block;
  /* changed from flex to simple block to allow table and banner to stack properly */
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* VR Packs Carousel Override */
/* VR Packs Grid - Desktop Default */
#vr-packs .pricing__grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center;
  gap: clamp(20px, 2vw, 24px);
  padding-top: 40px;
  /* Add padding to prevent badge truncation on desktop hover too */
}

/* VR Packs Carousel - Mobile Override */
@media (max-width: 900px) {
  #vr-packs .pricing__grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto;
    gap: 20px;
    padding-bottom: 20px;
    /* Space for scrollbar */
    padding-top: 40px;
    /* Space for top badges/shadows so they aren't clipped */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* Ensure start alignment for scrolling */
  }

  #vr-packs .pricing-card {
    flex: 0 0 300px;
    /* Fixed width for carousel items */
    scroll-snap-align: start;
  }
}


/* Ensure cards don't stretch indefinitely in flex mode */
.pricing-card {
  flex: 1 1 280px;
  max-width: 320px;
  width: 100%;
  background: rgba(8, 9, 16, 0.82);
  border: 1px solid rgba(91, 138, 255, 0.22);
  border-radius: var(--radius-md);
  padding: clamp(24px, 4vw, 36px);
  /* Added padding-top extra for featured cards or generally to be safe? 
     Better to target is-featured specifically if possible, 
     but let's see where the badge rule is. */
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  box-shadow: var(--shadow-card);
}

.pricing-card.is-featured {
  padding-top: 50px;
  /* Ensure space for the badge */
  border-top: 1px solid rgba(91, 138, 255, 0.6);
}

.pricing-card.is-featured::before {
  content: 'Le plus populaire';
  position: absolute;
  top: -12px;
  /* Position strictly on top border */
  left: 0;
  right: 0;
  margin: 0 auto;
  /* Center horizontally robustly */
  width: fit-content;
  /* Ensure width hugs content */
  background: #5b8aff;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 12px;
  text-transform: uppercase;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(91, 138, 255, 0.3);
}

.pricing__header h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  /* Reduced size */
  margin-top: 0;
  margin-bottom: 12px;
  line-height: 1.1;
}

.pricing__header p {
  color: rgba(243, 244, 247, 0.7);
  margin-bottom: 12px;
  /* Reduced from 16px */
  font-size: 1rem;
  /* Reduced from 1.1rem */
}

.billing-switch {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: rgba(15, 18, 32, 0.6);
  border: 1px solid rgba(91, 138, 255, 0.2);
  backdrop-filter: blur(12px);
}

.billing-switch__label {
  font-size: 0.85rem;
  color: rgba(243, 244, 247, 0.7);
}

.billing-switch__toggle {
  width: 60px;
  height: 30px;
  border-radius: var(--radius-pill);
  border: none;
  background: rgba(91, 138, 255, 0.25);
  position: relative;
  cursor: pointer;
  transition: background 0.3s ease;
}

.billing-switch__toggle.is-monthly {
  background: rgba(155, 107, 255, 0.4);
}

.billing-switch__slider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b8aff, #9b6bff);
  transition: transform 0.3s ease;
}

.billing-switch__toggle.is-monthly .billing-switch__slider {
  transform: translateX(30px);
}

.billing-switch__info {
  display: none;
  /* Hidden to reduce vertical space */
}





.pricing-card.is-featured {
  border: 1px solid rgba(155, 107, 255, 0.55);
  background: linear-gradient(160deg, rgba(15, 18, 28, 0.92), rgba(49, 28, 77, 0.65));
  transform: translateY(-12px);
}

.pricing-card.is-featured::before {
  content: "Plus populaire";
  position: absolute;
  top: -18px;
  left: 32px;
  padding: 6px 18px;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 20px 45px rgba(91, 138, 255, 0.4);
}

.pricing-card h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
}

/* .pricing-card.is-custom {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px 24px;
  align-items: flex-start;
} */
/* Disabled special styling for custom card to ensure uniform flex layout */

.pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: "Space Grotesk", sans-serif;
  font-size: 2.2rem;
}

.pricing-card__period {
  font-size: 0.95rem;
  color: rgba(243, 244, 247, 0.6);
}

.pricing-card__detail {
  color: rgba(243, 244, 247, 0.65);
  font-size: 0.85rem;
}

.pricing-card__include {
  margin-top: 16px;
  display: grid;
  gap: 12px;
}

.pricing-card__include h4,
.pricing-card__options h4 {
  font-size: 0.9rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.6);
}

.pricing-card__bullet {
  display: flex;
  gap: 10px;
  color: rgba(243, 244, 247, 0.78);
  font-size: 0.95rem;
}

.pricing-card__bullet::before {
  content: "•";
  color: rgba(155, 107, 255, 0.8);
}

.pricing-card__options {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.pricing-card .btn {
  margin-top: auto;
}

.testimonials {
  background: linear-gradient(180deg, rgba(7, 7, 14, 0.9), rgba(16, 16, 30, 0.96));
}

.testimonials__headline {
  max-width: 600px;
  margin-bottom: clamp(40px, 6vw, 60px);
}

.testimonials__headline h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3.8vw, 3.1rem);
  margin-top: 16px;
}

.testimonials__scroller {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(280px, 360px);
  gap: 24px;
  overflow-x: auto;
  padding-bottom: 12px;
  scrollbar-width: none;
}

.testimonials__scroller::-webkit-scrollbar {
  display: none;
}

.testimonial-card {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--radius-md);
  background: rgba(12, 12, 24, 0.75);
  border: 1px solid rgba(91, 138, 255, 0.2);
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(8px);
}

.testimonial-card p {
  font-size: 0.95rem;
  color: rgba(243, 244, 247, 0.75);
  margin-bottom: 18px;
}

.testimonial-card__author {
  font-size: 0.82rem;
  color: rgba(243, 244, 247, 0.45);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.footer {
  background: linear-gradient(200deg, rgba(3, 3, 8, 0.98), rgba(10, 10, 18, 0.95));
  padding: clamp(60px, 12vw, 120px) clamp(24px, 6vw, 140px) clamp(32px, 6vw, 64px);
}

.footer__cta {
  max-width: 620px;
  margin-bottom: clamp(40px, 7vw, 72px);
}

.footer__cta h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 3.6vw, 3rem);
  margin-bottom: 16px;
}

.footer__cta p {
  color: rgba(243, 244, 247, 0.65);
  margin-bottom: 24px;
}

.footer__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: rgba(243, 244, 247, 0.45);
  border-top: 1px solid rgba(91, 138, 255, 0.12);
  padding-top: 22px;
}

.modal {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(3, 5, 14, 0.68);
  backdrop-filter: blur(18px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  z-index: 99;
}

.modal[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
}

.modal__overlay {
  position: absolute;
  inset: 0;
}

.modal__content {
  position: relative;
  background: rgba(10, 10, 18, 0.95);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 5vw, 40px);
  border: 1px solid rgba(91, 138, 255, 0.32);
  box-shadow: 0 45px 120px rgba(4, 6, 18, 0.6);
  max-width: min(560px, 90vw);
  width: 100%;
}

.modal__close {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 1.5rem;
  background: none;
  border: none;
  color: rgba(243, 244, 247, 0.65);
  cursor: pointer;
}

.modal__body h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
  margin-bottom: 12px;
}

.modal__body p {
  color: rgba(243, 244, 247, 0.7);
  margin-bottom: 24px;
}

.modal__form {
  display: grid;
  gap: 16px;
}

.modal__form label {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(243, 244, 247, 0.55);
}

.modal__note {
  display: block;
  margin-top: 18px;
  font-size: 0.75rem;
  color: rgba(243, 244, 247, 0.45);
}

[data-animate] {
  opacity: 0;
  transform: translateY(45px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate="slide-up"] {
  transform: translateY(60px);
}

[data-animate="scale-up"] {
  transform: scale(0.95);
}

[data-animate="scale-up"].is-visible {
  transform: scale(1);
}

[data-animate="fade-in"] {
  transform: translateY(40px);
}

.hero[data-animate="fade-in"].is-visible {
  transform: none;
}

@media (max-width: 920px) {
  .hero {
    align-items: center;
    padding-bottom: 120px;
  }

  .hero__content {
    padding: 24px;
    border-radius: var(--radius-md);
  }

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

  .pricing-card.is-featured {
    transform: none;
  }
}

@media (max-width: 720px) {

  section,
  header,
  footer {
    padding: clamp(54px, 10vw, 72px) clamp(18px, 6vw, 28px);
  }

  .cta-form__row {
    grid-template-columns: 1fr;
  }

  .register__card {
    border-radius: var(--radius-md);
  }

  .billing-switch {
    flex-direction: column;
    gap: 8px;
  }

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

  .footer__meta {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }
}

@media (max-width: 540px) {
  .hero {
    padding-top: 110px;
  }

  .hero h1 {
    font-size: clamp(2.2rem, 9vw, 3rem);
  }

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

/* Apple-inspired refresh */
body.apple-style {
  color-scheme: light;
  background: #f5f5f7;
  color: #0b0d12;
  font-family: "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif;
}

body.apple-style ::selection {
  background: rgba(15, 110, 255, 0.15);
  color: #05060a;
}

.apple-style main {
  background: none;
  padding: 0 clamp(1.5rem, 4vw, 4rem) clamp(4rem, 8vw, 6rem);
}

.apple-style main>section {
  background: #fff;
  border-radius: 36px;
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  box-shadow: 0 45px 120px rgba(15, 17, 30, 0.08);
  border: 1px solid rgba(15, 17, 30, 0.04);
}

.apple-style .global-header {
  position: sticky;
  top: 0;
  padding: 18px clamp(1.5rem, 4vw, 4rem);
  background: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid rgba(15, 17, 30, 0.08);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}

.apple-style .brand {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

.apple-style .brand img {
  filter: none;
  height: 42px;
}

.apple-style .global-nav a {
  background: transparent;
  border: none;
  padding: 6px 12px;
  color: #0b0d12;
  font-weight: 500;
  border-radius: 999px;
}

.apple-style .global-nav a:hover {
  background: rgba(15, 17, 30, 0.08);
  color: #05060a;
}

.apple-style .hero {
  background: radial-gradient(circle at top right, rgba(90, 131, 255, 0.15), rgba(255, 255, 255, 0.95));
  border-radius: 48px;
  padding: clamp(2.5rem, 5vw, 5rem);
  margin: clamp(5rem, 12vh, 7rem) auto clamp(2rem, 6vh, 4rem);
  box-shadow: 0 60px 140px rgba(15, 17, 30, 0.12);
  color: #05060a;
}

.apple-style .hero__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(2rem, 4vw, 5rem);
  align-items: center;
}

.apple-style .hero__content {
  text-align: left;
  padding: 0;
}

.apple-style .hero__eyebrow {
  font-size: 0.9rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(5, 6, 12, 0.55);
  margin-bottom: 16px;
}

.apple-style .hero h1 {
  color: #05060a;
  text-shadow: none;
  font-size: clamp(2.8rem, 5.6vw, 4.6rem);
}

.apple-style .hero__lead {
  color: rgba(5, 6, 12, 0.7);
  font-size: 1.15rem;
  margin-bottom: 1.75rem;
}

.apple-style .hero__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}

.apple-style .hero__chips span {
  padding: 8px 16px;
  border-radius: 999px;
  background: rgba(5, 6, 12, 0.05);
  border: 1px solid rgba(5, 6, 12, 0.08);
  font-size: 0.9rem;
  color: #05060a;
}

.apple-style .hero__ctas {
  justify-content: flex-start;
}

.apple-style .hero__micro {
  color: rgba(5, 6, 12, 0.55);
}

.apple-style .hero__visual {
  background: #fff;
  border-radius: 34px;
  padding: 24px;
  box-shadow: inset 0 0 0 1px rgba(15, 17, 30, 0.04), 0 30px 80px rgba(15, 17, 30, 0.12);
  display: grid;
  gap: 20px;
}

.apple-style .hero__device {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #07080d;
}

.apple-style .hero__device img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.apple-style .hero__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.85);
  color: #05060a;
  font-size: 0.85rem;
  font-weight: 600;
}

.apple-style .hero__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
}

.apple-style .hero__stat {
  padding: 16px;
  border-radius: 24px;
  background: rgba(5, 6, 12, 0.04);
  text-align: center;
}

.apple-style .hero__stat strong {
  display: block;
  font-size: 1.8rem;
  color: #05060a;
}

.apple-style .hero__stat span {
  font-size: 0.9rem;
  color: rgba(5, 6, 12, 0.6);
}

.apple-style .btn--ghost {
  border: 1px solid rgba(5, 6, 12, 0.2);
  color: #05060a;
  background: transparent;
}

.apple-style .btn--ghost:hover {
  background: rgba(5, 6, 12, 0.08);
}

.apple-style .immersive-motion {
  background: none;
  padding: 0;
  box-shadow: none;
}

.apple-style .immersive-motion__intro h2 {
  font-size: clamp(2.1rem, 4vw, 3rem);
  color: #05060a;
}

.apple-style .immersive-motion__wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.apple-style .motion-step {
  background: #fff;
  border-radius: 26px;
  padding: 1.5rem;
  box-shadow: 0 30px 90px rgba(15, 17, 30, 0.07);
  border: 1px solid rgba(15, 17, 30, 0.05);
}

.apple-style .motion-step__image {
  border-radius: 22px;
}

.apple-style .profil,
.apple-style .science,
.apple-style .key-metrics,
.apple-style .journeys,
.apple-style .register,
.apple-style .testimonials {
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 40px 120px rgba(15, 17, 30, 0.08);
}

.apple-style .profil__visual-inner {
  background: radial-gradient(circle, rgba(90, 131, 255, 0.15), rgba(255, 255, 255, 0));
  border-radius: 50%;
}

.apple-style .science__grid,
.apple-style .key-metrics__grid,
.apple-style .journeys__grid {
  gap: 1.5rem;
}

.apple-style .science-card,
.apple-style .metric-card,
.apple-style .journey-card {
  background: #fdfdfd;
  border-radius: 28px;
  border: 1px solid rgba(15, 17, 30, 0.05);
  box-shadow: 0 20px 60px rgba(15, 17, 30, 0.06);
  padding: 1.75rem;
}

.apple-style .journey-card h3 {
  color: #05060a;
}

.apple-style .journey-card p,
.apple-style .journey-card li {
  color: rgba(5, 6, 12, 0.65);
}

.apple-style .register__card {
  background: #fbfbfb;
  border: 1px solid rgba(15, 17, 30, 0.05);
  box-shadow: 0 25px 70px rgba(15, 17, 30, 0.07);
}

.apple-style .register-form input,
.apple-style .register-form textarea,
.apple-style .register-form select {
  background: #fff;
  border: 1px solid rgba(15, 17, 30, 0.12);
  color: #05060a;
  box-shadow: none;
}

.apple-style .register-form input::placeholder,
.apple-style .register-form textarea::placeholder {
  color: rgba(5, 6, 12, 0.35);
}

.apple-style .cta-form__row input {
  border: 1px solid rgba(15, 17, 30, 0.12);
  background: #fff;
  color: #05060a;
}

.apple-style .testimonials {
  background: #fefefe;
}

.apple-style .testimonial-card {
  border-radius: 24px;
  border: 1px solid rgba(15, 17, 30, 0.05);
  background: #fff;
  box-shadow: 0 20px 60px rgba(15, 17, 30, 0.06);
  color: #05060a;
}

.apple-style .testimonial-card__author {
  color: rgba(5, 6, 12, 0.5);
}

.apple-style .footer {
  background: transparent;
  border-top: 1px solid rgba(15, 17, 30, 0.08);
  color: rgba(5, 6, 12, 0.6);
}

.apple-style .footer__cta h2,
.apple-style .footer__cta p {
  color: #05060a;
}

.apple-style .footer__meta {
  border-top-color: rgba(5, 6, 12, 0.12);
  color: rgba(5, 6, 12, 0.55);
}

/* ... existing css ... */

/* --- GUIDE PDF SECTION --- */
.guide-section {
  padding: clamp(40px, 8vw, 80px) clamp(24px, 6vw, 140px);
  /* Reduced from 80-140px */
  background: linear-gradient(180deg, rgba(7, 9, 22, 0.9), rgba(5, 7, 16, 0.95));
  display: flex;
  justify-content: center;
}

.guide-card {
  width: 100%;
  max-width: 980px;
  background: rgba(12, 16, 30, 0.75);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(91, 138, 255, 0.25);
  padding: clamp(32px, 6vw, 60px);
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: clamp(40px, 8vw, 80px);
  align-items: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.45);
  overflow: hidden;
  position: relative;
}

body.theme-cyan .guide-card {
  background: rgba(4, 28, 38, 0.75);
  border-color: rgba(52, 216, 255, 0.35);
  box-shadow: 0 40px 120px rgba(0, 20, 30, 0.45);
}

.guide-card::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 70%;
  height: 200%;
  background: radial-gradient(circle, rgba(91, 138, 255, 0.08), transparent 70%);
  z-index: -1;
}

body.theme-cyan .guide-card::before {
  background: radial-gradient(circle, rgba(52, 216, 255, 0.08), transparent 70%);
}

.guide-content h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 20px;
  line-height: 1.1;
}

.guide-content p {
  color: var(--color-muted);
  font-size: 1.05rem;
  margin-bottom: 32px;
  max-width: 480px;
}

.guide-visual {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.pdf-mockup {
  width: clamp(200px, 30vw, 280px);
  aspect-ratio: 1 / 1.4;
  background: linear-gradient(135deg, #e0e5ec, #ffffff);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  transform: rotate(-3deg);
  transition: transform 0.4s ease;
}

.pdf-mockup:hover {
  transform: rotate(0deg) scale(1.02);
}

.pdf-mockup::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.4) 45%, transparent 50%);
  pointer-events: none;
}

.pdf-header {
  height: 20px;
  width: 60px;
  background: var(--color-accent);
  border-radius: 4px;
}

.pdf-body {
  display: grid;
  gap: 12px;
}

.pdf-line {
  height: 8px;
  background: #d1d5db;
  border-radius: 4px;
  width: 100%;
}

.pdf-line:nth-child(2) {
  width: 80%;
}

.pdf-line:nth-child(3) {
  width: 90%;
}

.pdf-footer {
  text-align: right;
  font-size: 0.75rem;
  color: #9ca3af;
  font-weight: 600;
  font-family: sans-serif;
}

@media (max-width: 900px) {
  .guide-card {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 40px 24px;
  }

  .guide-content p {
    margin-left: auto;
    margin-right: auto;
  }

  .guide-content .btn {
    width: 100%;
  }
}

/* --- CUSTOM PROGRAM & CONTACT --- */
.custom-program {
  padding: clamp(70px, 12vw, 120px) clamp(24px, 6vw, 140px);
  background: radial-gradient(circle at top left, rgba(52, 216, 255, 0.18), transparent 35%),
    linear-gradient(220deg, rgba(3, 8, 18, 0.95), rgba(1, 18, 27, 0.9));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 5vw, 40px);
  align-items: center;
}

.custom-program__text h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 12px;
}

.custom-program__text p {
  color: rgba(243, 244, 247, 0.78);
  margin-bottom: 18px;
}

.custom-program__cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  /* Increased from 140px */
  gap: 12px;
}

.custom-program__card {
  padding: 20px 12px;
  /* Reduced vertical/horizontal padding */
  border-radius: var(--radius-md);
  border: 1px solid rgba(91, 138, 255, 0.22);
  background: rgba(12, 18, 32, 0.7);
  text-align: center;
  font-weight: 700;
  font-size: 1.15rem;
  /* Slightly reduced from 1.25rem */
  color: #fff;
  overflow-wrap: break-word;
  /* Prevent overflow */
  hyphens: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.thierry {
  padding: clamp(70px, 12vw, 120px) clamp(24px, 6vw, 140px);
  background: linear-gradient(160deg, rgba(3, 6, 16, 0.95), rgba(1, 12, 22, 0.95));
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(24px, 5vw, 36px);
  align-items: center;
}

.thierry__eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(243, 244, 247, 0.55);
}

.thierry h2 {
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 8px 0 14px;
}

.thierry p {
  color: rgba(243, 244, 247, 0.76);
}

.thierry ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  gap: 8px;
  color: rgba(243, 244, 247, 0.78);
}

.thierry__visual {
  position: relative;
  display: grid;
  place-items: center;
}

.thierry__portrait {
  width: min(320px, 80vw);
  height: auto;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(91, 138, 255, 0.35);
  box-shadow: 0 30px 120px rgba(2, 6, 12, 0.6);
  object-fit: cover;
}

.contact {
  padding: clamp(70px, 12vw, 110px) clamp(24px, 6vw, 140px);
  background: radial-gradient(circle at 70% 10%, rgba(52, 216, 255, 0.18), transparent 30%),
    linear-gradient(200deg, rgba(2, 6, 14, 0.95), rgba(1, 16, 24, 0.95));
  text-align: center;
}

.contact p {
  color: rgba(243, 244, 247, 0.76);
  margin-bottom: 16px;
}

/* ========================================= */
/* GLOBAL NAVIGATION                         */
/* ========================================= */
.global-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  pointer-events: auto;
  background: rgba(5, 6, 12, 0.45);
  padding: 8px 24px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(91, 138, 255, 0.18);
}

.global-nav a {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(243, 244, 247, 0.8);
  transition: color 0.3s ease;
}

.global-nav a:hover {
  color: #fff;
}

@media (max-width: 768px) {
  .global-nav {
    display: none;
    /* Simple hide for mobile for now, or use hamburger if requested later */
  }
}

/* ========================================= */
/* PRODUCT DEMO (LARGE SCREEN)               */
/* ========================================= */

.product-demo {
  padding: 0 clamp(24px, 5vw, 40px);
  margin-top: -60px;
  /* Overlap Hero slightly */
  margin-bottom: 80px;
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
}

.product-demo__container {
  position: relative;
  width: 100%;
  max-width: 1080px;
}

.macbook-window {
  background: #0d1117;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow:
    0 40px 80px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
  z-index: 2;
  aspect-ratio: 16 / 9;
}

.macbook-header {
  height: 36px;
  background: rgba(20, 24, 33, 0.95);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  padding-left: 16px;
  gap: 8px;
}

.macbook-header .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.macbook-header .red {
  background: #ff5f56;
}

.macbook-header .yellow {
  background: #ffbd2e;
}

.macbook-header .green {
  background: #27c93f;
}

.macbook-content {
  width: 100%;
  height: calc(100% - 36px);
  background: #000;
}

.macbook-content video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.product-demo__glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120%;
  height: 120%;
  background: radial-gradient(ellipse at center, rgba(91, 138, 255, 0.25) 0%, transparent 60%);
  z-index: 1;
  pointer-events: none;
  filter: blur(40px);
}



/* Override for VR Interaction inside Focus Section */
.focus-mode__visual .transition-video {
  min-height: 0;
  height: auto;
  margin-top: 0;
  padding: 0;
  overflow: visible;
}

.focus-mode__visual .transition-video__container {
  min-height: 0;
  height: auto;
  aspect-ratio: 1;
  /* Keep it square-ish or let content dictate */
}

.focus-mode__visual .transition-video__wrapper {
  width: 100%;
  max-width: none;
}

/* VR Modal Styles */
.modal-video {
  border: none;
  background: transparent;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  padding: 0;
  margin: 0;
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.85);
  z-index: 9999;
}

.modal-video[open] {
  display: flex;
  /* Override dialog default block */
}

.modal-video::backdrop {
  background: transparent;
  /* Handled by modal itself for blur support */
}

.modal-video__content {
  position: relative;
  width: 90%;
  max-width: 1200px;
  aspect-ratio: 16 / 9;
}

.modal-video__content video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.modal-video__close {
  position: absolute;
  top: -40px;
  right: -10px;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  cursor: pointer;
}

/* Updated Vignette Styles */
.focus-mode__visual .transition-video {
  min-height: 0;
  height: auto;
  margin-top: 0;
  padding: 0;
  overflow: visible;
}

.focus-mode__visual .transition-video__container {
  min-height: 0;
  height: auto;
  aspect-ratio: 1;
}

.focus-mode__visual .transition-video__wrapper {
  width: 100%;
  max-width: none;
  transition: transform 0.3s ease;
}

.focus-mode__visual .transition-video__wrapper:hover {
  transform: scale(1.02);
}

.focus-mode__visual .transition-video__mask {
  display: none;
}

.focus-mode__visual .transition-video__mask {
  display: none;
  /* Hide mask in this context if it interferes with the card layout */
}

/* Immersive Overlay Styles */
.immersive-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1);
  display: flex;
  align-items: center;
  justify-content: center;
}

.immersive-overlay.is-active {
  opacity: 1;
  pointer-events: auto;
}

.immersive-overlay video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  transition: transform 10s ease-out;
}

.immersive-overlay.is-active video {
  transform: scale(1);
}

.immersive-close {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1010;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
  transition: background 0.3s ease, transform 0.3s ease;
}

.immersive-close:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.1);
}

/* --- FLOATING DEMO CTA --- */
.floating-demo {
  position: fixed;
  right: 30px;
  /* Initial position at top, handled by JS later for smooth effect */
  top: 130px;
  z-index: 900;
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(15, 18, 32, 0.85);
  border: 1px solid rgba(91, 138, 255, 0.35);
  border-radius: 999px;
  padding: 14px 24px;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(91, 138, 255, 0.1);
  text-decoration: none;
  /* Add transition for top property to animate smooth movement */
  transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), top 0.1s linear;
  overflow: hidden;
  max-width: 100px;
  height: 54px;
  transform: translateY(0);
}


.floating-demo:hover {
  max-width: 240px;
  background: var(--color-accent);
  border-color: var(--color-accent);
  box-shadow: 0 10px 50px rgba(91, 138, 255, 0.4);
}

/* Smoother transition avoiding display:none */
.floating-demo__short {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  transition: opacity 0.2s ease, transform 0.2s ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.floating-demo__long {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.3s ease 0.1s;
}

.floating-demo:hover .floating-demo__short {
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
}

.floating-demo:hover .floating-demo__long {
  opacity: 1;
}

/* --- POURQUOI GOODSPEAKVR SECTION --- */
.why-goodspeak {
  padding: clamp(40px, 10vw, 100px) clamp(24px, 6vw, 140px);
  background: linear-gradient(180deg, rgba(3, 5, 12, 0) 0%, rgba(5, 7, 16, 0.4) 100%);
  position: relative;
}

.why-goodspeak__container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: grid;
  gap: clamp(40px, 8vw, 60px);
}

.why-goodspeak__header h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
  line-height: 1.1;
  margin-bottom: 20px;
}

.why-goodspeak__subtitle {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--color-muted);
  max-width: 600px;
  margin: 0 auto;
}

.why-problem-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.why-problem-card {
  background: rgba(255, 60, 60, 0.05);
  border: 1px solid rgba(255, 60, 60, 0.15);
  padding: 24px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  transition: transform 0.3s ease, border-color 0.3s ease;
}

.why-problem-card:hover {
  transform: translateY(-5px);
  border-color: rgba(255, 60, 60, 0.35);
  background: rgba(255, 60, 60, 0.08);
}

.problem-icon {
  font-size: 2rem;
  filter: grayscale(100%);
  opacity: 0.7;
}

.why-problem-card p {
  color: rgba(255, 200, 200, 0.8);
  font-weight: 500;
  margin: 0;
}

.why-solution {
  padding: clamp(30px, 5vw, 50px);
  background: radial-gradient(circle at center, rgba(91, 138, 255, 0.08), transparent 70%);
  border-radius: var(--radius-lg);
  display: grid;
  gap: 16px;
}

.why-solution h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  color: #fff;
}

.why-solution p {
  font-size: 1.1rem;
  color: var(--color-muted);
}

.why-solution__list {
  list-style: none;
  padding: 0;
  margin: 20px auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.why-solution__list li {
  padding: 10px 18px;
  background: rgba(91, 138, 255, 0.1);
  border: 1px solid rgba(91, 138, 255, 0.25);
  border-radius: var(--radius-pill);
  color: #fff;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}

.why-solution__list li::before {
  content: "✓";
  color: var(--color-accent);
  font-weight: bold;
}

.why-stats {
  text-align: left;
  background: rgba(9, 14, 26, 0.6);
  backdrop-filter: blur(12px);
  padding: clamp(32px, 5vw, 48px);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(91, 138, 255, 0.2);
  box-shadow: var(--shadow-card);
}

.why-stats h4 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.5rem;
  color: var(--color-accent);
  margin-bottom: 24px;
  text-align: center;
}

.why-stats ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.why-stats ul li {
  position: relative;
  padding-left: 24px;
  font-size: 1.05rem;
  color: rgba(243, 244, 247, 0.8);
  line-height: 1.6;
}

.why-stats ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 10px var(--color-accent);
}

.why-stats ul li strong {
  color: #fff;
  font-weight: 600;
}

/* --- GLOBAL SECTION SPACING ADJUSTMENT --- */
/* Reduce padding for tighter layout as requested */
.why-goodspeak {
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 140px);
}

.focus-mode {
  padding: clamp(60px, 8vw, 100px) clamp(24px, 6vw, 140px);
  gap: clamp(24px, 4vw, 48px);
}

.key-metrics {
  padding-top: clamp(70px, 10vw, 120px);
  padding-bottom: clamp(70px, 10vw, 120px);
}

.forces {
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 140px);
}

.science {
  padding: clamp(60px, 10vw, 100px) clamp(24px, 6vw, 140px);
}

/* Specific adjustment for Pour Qui -> Test Profil gap */
.forces[data-animate]+.science {
  margin-top: -30px;
  /* Pull them closer explicitly if needed, or rely on reduced padding above */
}

/* Tighten gap between Science (Profil) and Guide */
.science {
  padding-bottom: clamp(40px, 6vw, 60px) !important;
}

.guide-section {
  padding-top: clamp(40px, 6vw, 60px) !important;
}

/* --- SCIENCE: TESTIMONIAL --- */
.science-testimonial {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 30px;
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(12px);
  margin-bottom: 24px;
}

.science-testimonial::before {
  content: "“";
  position: absolute;
  top: -10px;
  left: 20px;
  font-family: serif;
  font-size: 8rem;
  color: rgba(91, 138, 255, 0.15);
  line-height: 1;
  pointer-events: none;
}

.science-testimonial__content p {
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(243, 244, 247, 0.9);
  line-height: 1.6;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

.science-testimonial__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.science-testimonial__author img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(91, 138, 255, 0.3);
}

.science-testimonial__author div {
  display: flex;
  flex-direction: column;
}

.science-testimonial__author strong {
  font-family: "Space Grotesk", sans-serif;
  color: #fff;
  font-size: 0.95rem;
}

.science-testimonial__author span {
  font-size: 0.8rem;
  color: rgba(243, 244, 247, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* --- ABONNEMENTS SECTION --- */
.abonnements {
  padding: clamp(60px, 8vw, 80px) clamp(24px, 6vw, 140px);
  /* Reduced padding */
  text-align: center;
  /* background: linear-gradient(to bottom, rgba(5,7,16,0.95), rgba(7,9,22,0.9)); */
}

.abonnements__content {
  max-width: 800px;
  margin: 0 auto;
}

.abonnements__content h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 2.5rem);
  margin-bottom: 24px;
  line-height: 1.1;
}

.abonnements__content p {
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  margin-bottom: 32px;
  color: var(--color-muted);
  line-height: 1.4;
}

/* --- CUSTOM PROGRAM CENTERED --- */
/* Override existing grid to center content */
.custom-program {
  /* Keep grid but center the items if they don't fill width */
  justify-content: center;
  /* Or switch to column layout if desired, but user likely wants 'centered block' visually */
}

.custom-program__text {
  text-align: center;
  /* Center the text content */
  margin: 0 auto;
  /* Ensure block is centered if width < 100% */
  max-width: 800px;
  /* Constrain width for readability */
}

.custom-program__text ul {
  text-align: left;
  /* Keep list left-aligned but centered block? */
  display: inline-block;
  /* allows margin: 0 auto to work on ul */
  margin: 20px auto;
  text-align: left;
}

.custom-program__cards {
  justify-content: center;
  /* Center cards in grid */
}

/* --- GLOBAL CENTERING TWEAKS --- */
.force-card {
  text-align: center;
}

.force-card ul {
  /* Keep list items readable but centered block */
  display: inline-block;
  text-align: left;
  margin: 0 auto 20px;
}

.science__stat {
  text-align: center;
}

.science__sub {
  text-align: center;
}

/* Swap order for Science Section to place Text on Right (Zig-Zag flow) */


.science__heading {
  order: 2;
  text-align: left;
  /* Keep text left-aligned within the right column? Or centered? */
  /* User said "globalement centre", so maybe center text content too? 
     Let's start with standard left align in the right column, 
     but maybe center it if it looks better. 
     Actually, previous step I added global centering to force-card.
     Let's keep science__heading aligned to the content flow. */
}

.science__right {
  order: 1;
}

/* Ensure mobile stacking order remains logical (Text first? Or Visual first?) */
@media (max-width: 968px) {
  .science__heading {
    order: 0;
    /* Reset for mobile to keep heading on top */
  }

  .science__right {
    order: 1;
  }
}

/* --- DEMO MODAL --- */
.demo-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.demo-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.demo-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
}

.demo-modal__container {
  position: relative;
  width: min(500px, 90vw);
  background: #141824;
  border: 1px solid rgba(91, 138, 255, 0.2);
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
  transform: translateY(20px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 10;
}

.demo-modal.is-active .demo-modal__container {
  transform: translateY(0);
}

.demo-modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.2s;
}

.demo-modal__close:hover {
  color: #fff;
}

.demo-modal__header {
  text-align: center;
  margin-bottom: 30px;
}

.demo-modal__header h3 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
  margin-bottom: 10px;
}

.demo-modal__header p {
  color: rgba(243, 244, 247, 0.7);
  font-size: 0.95rem;
}

/* Form Styles */
.demo-modal__form {
  display: grid;
  gap: 16px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-group label {
  display: block;
  font-size: 0.85rem;
  color: rgba(243, 244, 247, 0.8);
  margin-bottom: 8px;
}

.form-group input,
.form-group select {
  width: 100%;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 12px;
  color: #fff;
  font-family: inherit;
  font-size: 0.95rem;
  transition: border-color 0.2s;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-accent);
  background: rgba(255, 255, 255, 0.08);
}

/* --- SCIENCE SECTION REFACTOR --- */
.science__heading {
  text-align: left !important;
  /* Force Left align */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.science__grid {
  /* Ensure spacing is clean */
  align-items: center;
}

.science__stat {
  text-align: left !important;
  /* override center from previous global tweak if applied */
  color: rgba(243, 244, 247, 0.85);
  font-size: 1.1rem;
}

.science__sub {
  text-align: left !important;
  margin-top: 10px;
  font-size: 0.85rem;
  color: rgba(243, 244, 247, 0.5);
}

.science__cta {
  /* Reset grid/center properties if inherited */
  display: block !important;
  text-align: left !important;
}

.science__cta .btn {
  display: inline-flex;
  /* Normal button behavior */
}

/* Fix title alignment specifically */
.science__heading h2 {
  text-align: left;
  margin-bottom: 16px;
}

.science__stats h3 {
  text-align: left;
}

/* --- FIX SCIENCE LAYOUT (Text Left, Testimonial Right) --- */
.science__layout {
  /* Ensure grid is active */
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  /* Center vertically */
  max-width: 1000px;
  /* Constrain width to "center" content more */
  margin-left: auto;
  margin-right: auto;
  gap: 60px;
  /* Reasonable gap */
}

.science__heading {
  order: 1 !important;
  /* Text on Left */
  text-align: left !important;
  max-width: 480px;
  /* Prevent text from stretching too wide */
  justify-self: end;
  /* Push text block towards center */
}

.science__right {
  order: 2 !important;
  /* Testimonial on Right */
  justify-self: start;
  /* Push content towards center */
  width: 100%;
  max-width: 450px;
}

.science-testimonial {
  margin: 0;
  /* Reset margins */
}

/* Mobile adjust */
@media (max-width: 968px) {
  .science__layout {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }

  .science__heading {
    order: 1 !important;
    justify-self: center;
    text-align: center !important;
    align-items: center;
  }

  .science__right {
    order: 2 !important;
    justify-self: center;
  }

  .science__cta {
    text-align: center !important;
    justify-items: center !important;
  }

  .science__heading h2,
  .science__stats h3,
  .science__stat,
  .science__sub {
    text-align: center !important;
  }
}

/* --- HYBRID ROTATOR (Plein Pot) --- */
.hybrid-rotator {
  grid-column: 1 / -1;
  width: 100%;
  margin: 60px 0 20px;
  background: rgba(15, 23, 42, 0.95);
  /* Dark navy to match title block */
  border-radius: 20px;
  padding: 40px 20px;
  text-align: center;
  border: 1px solid rgba(52, 216, 255, 0.2);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.hybrid-rotator__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  color: #34d8ff;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.9;
}

.hybrid-rotator__container {
  position: relative;
  /* Grid stacking technique to overlay items exactly */
  display: grid;
  grid-template-areas: "stack";
  align-items: center;
  justify-items: center;
  min-height: 140px;
  /* Ensure space for content */
}

.hybrid-rotator__item {
  grid-area: stack;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

.hybrid-rotator__item.is-active {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.hybrid-big {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  text-shadow: 0 0 30px rgba(52, 216, 255, 0.4);
}

.hybrid-desc {
  font-size: clamp(1rem, 2vw, 1.4rem);
  color: rgba(243, 244, 247, 0.7);
  max-width: 600px;
}

/* --- NEW FOCUS TYPOGRAPHY --- */
.focus-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.2;
}

.focus-text {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  /* Bigger body text */
  line-height: 1.6;
  color: rgba(243, 244, 247, 0.95);
  /* Higher contrast */
  margin-bottom: 24px;
}

.focus-text strong {
  color: #fff;
  font-weight: 700;
}

.focus-list {
  font-size: 0.95rem !important;
  /* Reduced size global override */
  color: rgba(243, 244, 247, 0.95);
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
  margin-bottom: 30px;
  text-align: left;
}

.focus-list li {
  position: relative;
  display: flex;
  align-items: baseline;
  /* Use baseline for perfect alignment */
  gap: 12px;
  line-height: 1.6;
  /* Consistent line height for alignment */
}

.focus-list li::before {
  content: "";
  width: 6px;
  /* Slightly smaller for cleaner look */
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
  margin-top: 0.45em;
  /* Fine-tuned for perfect alignment */
  flex-shrink: 0;
  display: inline-block;
  position: relative;
  top: -0.1em;
  /* Micro-adjustment for perfect vertical alignment */
}

/* --- COMPACT WHY SECTION --- */
.why-goodspeak__container {
  max-width: 900px;
  margin: 0 auto;
}

.why-compact-card {
  background: rgba(18, 18, 30, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  margin-bottom: 40px;
  backdrop-filter: blur(10px);
}

.why-compact__left {
  border-right: 1px solid rgba(255, 255, 255, 0.1);
  padding-right: 20px;
}

.why-compact__right {
  padding-left: 20px;
}

.why-compact__header h2 {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.8rem;
  margin-bottom: 10px;
  color: #fff;
}

.why-compact__header p {
  color: rgba(243, 244, 247, 0.6);
  margin-bottom: 30px;
}

.why-problems-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 16px;
}

.why-problem-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(243, 244, 247, 0.7);
  font-size: 0.95rem;
}

.problem-icon {
  font-size: 1.2rem;
  opacity: 0.8;
}

.why-compact__title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.6rem;
  color: var(--color-accent);
  margin-bottom: 20px;
}

.why-solution-list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: 12px;
}

.why-solution-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 1.05rem;
  color: #fff;
}

.check-icon {
  color: var(--color-accent);
  font-weight: bold;
}

@media (max-width: 800px) {
  .why-compact-card {
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 30px 20px;
  }

  .why-compact__left {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-right: 0;
    padding-bottom: 30px;
  }

  .why-compact__right {
    padding-left: 0;
  }
}

/* --- SUPERIOR HERO RENDERING --- */
.hero h1 {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  font-size: clamp(2.8rem, 6vw, 4.8rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 30px;
  text-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.hero-highlight {
  background: linear-gradient(to right, #ffffff, #8be2ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
}

.hero__subtitle {
  font-family: "Inter", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  line-height: 1.6;
  color: rgba(236, 252, 255, 0.85);
  /* Much brighter/cleaner */
  font-weight: 400;
  max-width: 700px;
  /* Constrain width for readability */
  margin: 0 auto;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hero__content {
  /* Enforce premium glass effect with center alignment */
  background: radial-gradient(100% 100% at 50% 0%, rgba(20, 25, 45, 0.8) 0%, rgba(5, 8, 15, 0.6) 100%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 40px 80px -20px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.hero__eyebrow {
  margin-bottom: 24px;
  display: inline-block;
  padding: 6px 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 99px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-weight: 600;
  color: var(--color-accent);
  letter-spacing: 0.15em;
  font-size: 0.75rem;
}

/* --- FORCE CARDS REFACTOR --- */
.force-card {
  position: relative;
  margin-top: 40px;
  /* Space for the badge popping out */
  overflow: visible;
  /* Allow badge to be outside */
  background: rgba(18, 18, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 24px;
  padding: 40px 30px 30px;
  display: flex;
  flex-direction: column;
}

.force-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #34d8ff, #1ca8ff);
  color: #000;
  font-weight: 800;
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.2rem;
  padding: 8px 32px;
  border-radius: 50px;
  /* Oval shape */
  box-shadow: 0 10px 20px rgba(52, 216, 255, 0.3);
  z-index: 2;
  border: 4px solid #050510;
  /* Match background to create "cutout" effect if needed, or just contrast */
}

/* --- HYBRID ROTATOR REDESIGN --- */
/* --- HYBRID ROTATOR REDESIGN --- */
/* --- HYBRID ROTATOR REDESIGN --- */
.hybrid-rotator {
  grid-column: 1 / -1;
  width: 100%;
  margin: 0;
  /* Balanced spacing - no extra margin */
  background: rgba(15, 23, 42, 0.95);
  border: 1px solid rgba(52, 216, 255, 0.2);
  border-radius: 24px;
  padding: 80px 40px 60px;
  /* Reduced bottom padding for balance */
  text-align: center;
  position: relative;
  /* Add subtle glow or shine */
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
}

.hybrid-rotator__container {
  min-height: 280px;
  margin-top: 10px;
  position: relative;
  /* Ensure container has width for centering */
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hybrid-rotator__item {
  display: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.hybrid-rotator__item.is-active {
  display: block;
  opacity: 1;
  animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hybrid-card {
  background: rgba(255, 255, 255, 0.98);
  /* White background for better contrast */
  border: 1px solid rgba(52, 216, 255, 0.3);
  border-radius: 24px;
  padding: 40px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), inset 0 0 0 1px rgba(52, 216, 255, 0.1);
  backdrop-filter: blur(10px);
  max-width: 700px;
  margin: 0 auto;
  transition: all 0.3s ease;
  height: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.hybrid-card:hover {
  border-color: rgba(52, 216, 255, 0.5);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(52, 216, 255, 0.2);
}

.hybrid-stat {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  color: #34d8ff;
  /* Cyan to match CTA buttons */
  margin-bottom: 10px;
  text-shadow: 0 0 30px rgba(52, 216, 255, 0.5);
}

.hybrid-context {
  font-family: var(--font-heading);
  font-size: clamp(1.2rem, 3vw, 1.5rem);
  color: #0f172a;
  margin-bottom: 12px;
  font-weight: 600;
}

.hybrid-desc {
  font-family: var(--font-body);
  font-size: 1.1rem;
  color: rgba(15, 23, 42, 0.7);
  font-weight: 300;
  line-height: 1.6;
  max-width: 500px;
}

.hybrid-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
  /* Reduced from 30px */
}

.hybrid-nav__btn {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.hybrid-nav__btn:hover {
  background: rgba(91, 138, 255, 0.2);
  border-color: rgba(91, 138, 255, 0.4);
  color: #fff;
}

.hybrid-nav__dots {
  display: flex;
  gap: 8px;
}

.hybrid-nav__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.hybrid-nav__dot.is-active {
  background: #5b8aff;
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(91, 138, 255, 0.5);
}

/* Cocogoose Pro Fonts */
@font-face {
  font-family: 'Cocogoose Pro';
  src: url('assets/fonts/Cocogoose-Pro-Semilight.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Cocogoose Pro';
  src: url('assets/fonts/Cocogoose-Pro-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-heading: 'Cocogoose Pro', 'Space Grotesk', sans-serif;
  --font-body: 'Cocogoose Pro', 'Inter', sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero__eyebrow,
.focus-title,
.hybrid-big,
.hybrid-stat,
.hybrid-context,
.force-badge,
.btn,
.benefits-title,
.hybrid-rotator__title {
  font-family: var(--font-heading) !important;
  font-weight: 700;
}

body,
p,
li,
.hero__subtitle,
.hybrid-desc,
.focus-text {
  font-family: var(--font-body) !important;
  font-weight: 300;
}

/* --- TESTIMONIALS LAYOUT --- */
.science__right {
  display: flex !important;
  gap: 30px;
  overflow-x: auto;
  padding-bottom: 20px;
  /* Space for scrollbar if any, though hidden usually preferred */
  max-width: 100vw;
  /* Allow overflow */
  margin-right: -20px;
  /* Negative margin to pull to edge on mobile */
  padding-right: 20px;
}

.science__profil {
  display: flex !important;
  /* Force flex row */
  gap: 30px;
  width: max-content;
  /* Allow content to dictate width */
}

.science-testimonial {
  min-width: 320px;
  max-width: 400px;
  flex-shrink: 0;
}

/* --- CUSTOM PROGRAM REDESIGN --- */
.custom-program__text {
  max-width: 1000px !important;
  text-align: center !important;
}

.custom-program__cards {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 20px !important;
  margin-top: 50px;
}

.custom-program__card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 30px 20px;
  border-radius: 16px;
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 600;
  transition: transform 0.3s ease, background 0.3s ease;
}

.custom-program__card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--color-accent);
}

/* --- FOUNDER SECTION DESIGN --- */
/* --- FOUNDER SECTION DESIGN --- */
.thierry {
  padding: 100px 0;
  width: 100%;
  /* Ensure background spans full width */
}

.thierry__layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  gap: 80px;
  padding: 0 20px;
  /* Add padding for smaller screens */
}

.thierry__content {
  text-align: left;
}

.thierry__eyebrow {
  color: var(--color-accent);
  font-family: var(--font-heading);
  letter-spacing: 0.2em;
  font-size: 0.85rem;
  margin-bottom: 20px;
  text-transform: uppercase;
  font-weight: 700;
}

.thierry h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 30px;
  color: #fff;
}

.thierry__bio {
  font-family: var(--font-body);
  /* Changed to use Cocogoose body logic if desired, or keep Inter for legibility */
  font-size: 1.15rem;
  line-height: 1.7;
  color: rgba(243, 244, 247, 0.85);
  /* Slightly brighter */
}

.thierry__bio p {
  margin-bottom: 24px;
}

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

.thierry__quote {
  border-left: 3px solid var(--color-accent);
  padding-left: 24px;
  font-style: italic;
  font-size: 1.25rem;
  color: #fff;
  margin: 40px 0;
  line-height: 1.6;
}

.thierry__visual {
  position: relative;
}

.thierry__portrait {
  width: 100%;
  max-width: 500px;
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  /* Make image black and white and slightly grainy for cool effect */
  filter: grayscale(100%) contrast(1.1);
  transition: all 0.5s ease;
}

.thierry__portrait:hover {
  filter: grayscale(0%);
}

@media (max-width: 900px) {
  .thierry {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 40px;
    padding: 60px 20px;
  }

  .thierry__content {
    text-align: center;
    order: 2;
    /* Put text below image on mobile usually? or keep above. Let's keep existing order or swap. */
  }

  .thierry__quote {
    border-left: none;
    border-top: 3px solid var(--color-accent);
    padding-left: 0;
    padding-top: 24px;
  }
}

.science__right {
  display: block !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.science__profil {
  display: flex !important;
  flex-direction: column !important;
  gap: 30px;
  width: 100% !important;
}

.science-testimonial {
  max-width: 100% !important;
  width: 100%;
}

/* Force bottom alignment for Force Cards buttons */
.force-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ensure cards take full height of grid row */
}

.force-card .btn,
.force-card span[style*="background"],
.force-card a~span {
  /* Target the 'ouverture prochaine' span which might not have a style attribute initially if relying on inline, better to target specifically */
  margin-top: auto !important;
}

/* Specific fix for the span button-lookalike */
.force-card>span:last-child {
  margin-top: auto !important;
  display: block;
  text-align: center;
  background: rgba(255, 255, 255, 0.1);
  padding: 12px 24px;
  border-radius: 50px;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Align badges */
.force-badge {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

/* --- BENEFITS GRID (Successor to Why Compact) --- */
.benefits-section {
  margin-bottom: 0;
}

.benefits-title {
  text-align: center;
  margin-top: 0;
  padding-top: 0;
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  margin-bottom: 25px;
  color: #fff;
}

.benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
}

.benefit-card {
  background: rgba(18, 18, 30, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 30px;
  transition: transform 0.3s ease, background 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.benefit-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(91, 138, 255, 0.3);
}

.benefit-card h3 {
  color: #fff;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  line-height: 1.4;
  margin-bottom: 12px;
  position: relative;
  padding-left: 15px;
}

.benefit-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 4px;
  height: 1em;
  background: var(--color-accent);
  border-radius: 2px;
}

.benefit-card p {
  color: rgba(243, 244, 247, 0.7);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0;
  /* flex-grow: 1; if we want bottom alignment */
}

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

/* --- ANALYSIS SECTION REDESIGN --- */

.key-metrics__content {
  /* Ensure content is well positioned */
  position: relative;
  z-index: 2;
}

/* Title Redesign */
.analysis-heading {
  margin-bottom: 40px;
}

.analysis-heading h2 {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 5vw, 3.5rem);
  color: #fff;
  margin-bottom: 10px;
  line-height: 1.1;
}

.analysis-heading h3 {
  font-family: 'Space Grotesk', sans-serif;
  /* Fallback or specific */
  font-size: clamp(1.2rem, 3vw, 2rem);
  background: linear-gradient(90deg, #34d8ff, #8884ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 300;
  margin-bottom: 30px;
  display: inline-block;
}

/* Feature Cards "Startup" Style */
.analysis-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 30px;
  margin-top: 60px;
}

.analysis-feature-card {
  background: rgba(13, 15, 28, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Subtle border */
  border-radius: 24px;
  /* More rounded */
  padding: 35px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.analysis-feature-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(52, 216, 255, 0.5), transparent);
  opacity: 0.5;
}

.analysis-feature-card:hover {
  transform: translateY(-8px);
  background: rgba(13, 15, 28, 0.8);
  border-color: rgba(52, 216, 255, 0.3);
  box-shadow: 0 20px 60px rgba(52, 216, 255, 0.15);
}

.analysis-card-icon {
  width: 50px;
  height: 50px;
  background: rgba(52, 216, 255, 0.1);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  color: #34d8ff;
}

.analysis-feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: #fff;
  margin-bottom: 20px;
}

.analysis-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.analysis-feature-list li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 12px;
  color: rgba(243, 244, 247, 0.7);
  font-size: 0.95rem;
  line-height: 1.5;
}

.analysis-feature-list li::before {
  content: "";
  /* Custom checkmark could go here, or simple dot */
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34d8ff;
  box-shadow: 0 0 8px rgba(52, 216, 255, 0.6);
}

/* Enhance existing key-metrics layout if needed */
.key-metrics__content {
  order: 2;
  /* Ensure visual can be placed nicely if using grid elsewhere, but standard is fine */
}

/* ========================================
   RESPONSIVE VIDEO FIXES
   ======================================== */

/* Dual Video Showcase - Responsive */
.dual-video-showcase {
  padding: clamp(40px, 6vw, 80px) clamp(16px, 4vw, 60px);
}

.dual-video__container {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(20px, 4vw, 40px);
  justify-content: center;
  align-items: stretch;
}

.dual-video__card {
  flex: 1 1 400px;
  max-width: 600px;
  min-width: 280px;
}

.dual-video__media {
  width: 100%;
  overflow: hidden;
}

.dual-video__media video {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* Focus Mode Video Responsive Fixes */
@media (max-width: 900px) {
  .focus-mode {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .focus-mode__visual {
    order: -1;
    /* Video first on mobile */
  }

  .focus-mode__visual video {
    width: 100%;
    height: auto;
  }
}

@media (max-width: 768px) {
  .dual-video__container {
    flex-direction: column;
    align-items: center;
  }

  .dual-video__card {
    max-width: 100%;
    width: 100%;
  }

  .focus-mode__visual {
    border-radius: 12px;
  }

  .focus-mode__visual video {
    width: 100%;
    height: auto;
  }

  /* Reduce video overflow on mobile */
  .focus-mode__visual,
  .dual-video__media {
    overflow: hidden;
    border-radius: 16px;
  }
}

@media (max-width: 520px) {
  .dual-video-showcase h2 {
    font-size: 1.5rem !important;
  }

  .dual-video__card h3 {
    font-size: 1.2rem !important;
  }

  .focus-mode {
    padding: 40px 16px;
  }

  .focus-mode__visual {
    margin: 0 -8px;
    /* Allow slight bleed for better edge-to-edge */
    border-radius: 8px;
  }

  .focus-mode__visual video {
    width: 100%;
    height: auto;
  }

  /* MacBook window responsive */
  .macbook-window {
    margin: 0 -10px;
    border-radius: 12px;
  }

  .macbook-content video {
    max-height: 300px;
  }
}

/* Hero video responsive */
@media (max-width: 768px) {

  .hero video,
  #hero-bg-video {
    object-position: center center;
  }

  .product-demo__container {
    padding: 0 10px;
  }
}

/* Ensure videos never overflow their containers */
video {
  max-width: 100%;
}

section video {
  max-width: 100%;
  height: auto;
}

/* Fix aspect ratio issues with inline styled videos */
.dual-video__media[style*="aspect-ratio"] video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}