/* Oltheo Labs — design system. Palettes Ivoire (jour) + Nuit, typo Geist
   (display + body) + Geist Mono (labels) — même typo qu'Athéna et
   Alexandrie pour la cohérence maison Oltheo. */

/* ── Tokens · palette Ivoire (jour) ─────────────────────────────────── */
:root,
[data-theme="ivory"] {
  --bg: #efece4;
  --surface: #f6f3eb;
  --surface2: #ffffff;
  --fg: #171411;
  --fg2: #5a544c;
  --fg3: #9b9387;
  --line: rgba(23, 20, 17, 0.08);
  --lineStrong: rgba(23, 20, 17, 0.16);

  --accent: #1e3a5f;      /* bleu d'encre, identité Oltheo */
  --accentInk: #11253f;
  --accentSoft: #d8dee7;

  /* Couleur secondaire chaude : rose argileux. Désaturé, terre cuite,
     "peau ou argile". Crée un duo chaud/froid avec le bleu d'encre.
     Usage : Grande Tache du mark, tagline italique, accents émotionnels. */
  --blush: #cfa090;
  --blushSoft: #f1d8cb;
  --blushInk: #a87765;

  --athena: #b8431a;      /* terra-cotta produit Athéna */
  --athenaSoft: #ecdfd3;
  --alex: #4d5f33;        /* olive produit Alexandrie */
  --alexSoft: #dde3cf;

  --navBg: rgba(239, 236, 228, 0.78);
}

/* ── Tokens · palette Nuit ──────────────────────────────────────────── */
[data-theme="night"] {
  --bg: #0e0d0b;
  --surface: #181612;
  --surface2: #211e19;
  --fg: #ede7d8;
  --fg2: #a8a193;
  --fg3: #6b6557;
  --line: rgba(237, 231, 216, 0.08);
  --lineStrong: rgba(237, 231, 216, 0.18);

  --accent: #a6c4e0;
  --accentInk: #c4d6e8;
  --accentSoft: #1a2536;

  /* Blush en mode nuit : ton un peu plus clair pour rester chaud sur fond
     sombre, sans devenir flashy. */
  --blush: #e0b3a3;
  --blushSoft: #2a201c;
  --blushInk: #f0c5b5;

  --athena: #d99060;
  --athenaSoft: #2a201a;
  --alex: #a8b87a;
  --alexSoft: #1f2418;

  --navBg: rgba(14, 13, 11, 0.78);
}

/* ── Typo ───────────────────────────────────────────────────────────── */
/* Geist partout (display + body) pour un ton sans-serif doux et cohérent
   avec Athéna et Alexandrie. Geist Mono pour les eyebrows et labels.
   Les variantes italiques (utilisées sur les leded et les accents) sont
   rendues par le navigateur en oblique : plus discret qu'un faux serif
   éditorial, plus en ligne avec le reste de la maison Oltheo. */
:root {
  --fDisp: "Geist", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --fBody: "Geist", -apple-system, "Helvetica Neue", system-ui, sans-serif;
  --fMono: "Geist Mono", ui-monospace, Menlo, monospace;
  --fDispW: 500;
  --fDispLs: -0.025em;
  /* Hauteur approximative de la nav sticky : utilisée pour que le hero
     plein écran atteigne exactement le bas du viewport sans dépasser
     (la nav consomme cette hauteur dans le flow). */
  --nav-h: 66px;
}
@media (max-width: 720px) { :root { --nav-h: 50px; } }

/* ── Base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--fBody);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}
a { color: inherit; }
button {
  font-family: inherit;
  cursor: pointer;
}

/* ── Nav sticky ─────────────────────────────────────────────────────── */
.o-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--navBg);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.o-nav-row {
  margin: 0 auto;
  padding: 18px 4vw;
  display: flex;
  align-items: center;
  gap: 24px;
}
.o-nav-brand {
  text-decoration: none;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.o-nav-items {
  display: flex;
  gap: 4px;
  margin-left: 24px;
}
.o-nav-item {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-family: var(--fBody);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--fg2);
  position: relative;
  transition: color 0.15s ease;
}
.o-nav-item:hover { color: var(--fg); }
.o-nav-item.is-active { color: var(--fg); }
.o-nav-item::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 4px;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.o-nav-item.is-active::after { opacity: 0.9; }
.o-nav-item:hover::after { opacity: 0.3; }
.o-nav-item.is-active:hover::after { opacity: 0.9; }
.o-nav-toggles {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.o-toggle-lang {
  background: transparent;
  border: 1px solid var(--lineStrong);
  color: var(--fg2);
  height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 5px;
}
.o-toggle-lang span { font-weight: 600; color: var(--fg3); }
.o-toggle-lang span.is-active { color: var(--fg); }
.o-toggle-lang .sep { opacity: 0.4; font-weight: 400; color: var(--fg3); }
.o-toggle-theme {
  background: transparent;
  border: 1px solid var(--lineStrong);
  color: var(--fg);
  height: 30px;
  width: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Layout commun de page ──────────────────────────────────────────── */
.o-page {
  padding: 96px 4vw 96px;
  margin: 0 auto;
  min-height: 60vh;
  animation: oltheoFade 0.42s ease both;
}
@keyframes oltheoFade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.o-eyebrow {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 28px;
}

/* ── Home : shader showcase (mesh gradient + glass + gooey + pulsing orb) ── */

/* Conteneur principal de la home : full-bleed, le hero est plein écran ;
   la section produits sous le hero a son propre padding latéral 4vw. */
.o-home-shader { padding: 0; }

/* SVG defs invisibles (filtres glass/gooey/glow) */
.o-svg-defs { position: absolute; width: 0; height: 0; pointer-events: none; }

/* Hero plein écran avec mesh gradient en fond, contenu aligné bas-gauche.
   La hauteur exclut la nav sticky pour atteindre EXACTEMENT le bas du
   viewport visible (sinon la nav pousse le hero et on dépasse). */
.o-hero-shader {
  position: relative;
  min-height: calc(100vh - var(--nav-h));
  min-height: calc(100dvh - var(--nav-h));
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 64px 4vw 56px;
  background: var(--bg);
}

/* ── Mesh gradient : 3 blobs radial-gradient qui dérivent lentement ── */
.o-mesh {
  position: absolute;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.85;
}
.o-mesh-blob {
  position: absolute;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  opacity: 0.65;
  will-change: transform;
}
.o-mesh-blob-1 {
  top: -10%;
  left: -5%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 65%);
  animation: oMeshFloat 26s ease-in-out infinite;
}
.o-mesh-blob-2 {
  top: 20%;
  right: -10%;
  background: radial-gradient(circle, var(--blush) 0%, transparent 60%);
  animation: oMeshFloat 30s ease-in-out -8s infinite;
}
.o-mesh-blob-3 {
  bottom: -15%;
  left: 25%;
  background: radial-gradient(circle, var(--blushInk) 0%, transparent 65%);
  animation: oMeshFloat 34s ease-in-out -15s infinite;
}
@keyframes oMeshFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(-8%, 6%, 0) scale(1.12); }
  66%      { transform: translate3d(7%, -5%, 0) scale(0.92); }
}

/* ── Contenu du hero (texte aligné bas-gauche) ── */
.o-hero-content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: oFadeUp 0.9s 0.1s ease both;
}
@keyframes oFadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Chip "Studio belge" en glass blur */
.o-glass-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px 9px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  width: max-content;
}
[data-theme="ivory"] .o-glass-chip {
  background: rgba(23, 20, 17, 0.04);
  border-color: rgba(23, 20, 17, 0.10);
}
.o-glass-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blush);
  box-shadow: 0 0 12px var(--blush);
  animation: oDotPulse 2s ease-in-out infinite;
}
@keyframes oDotPulse {
  0%, 100% { opacity: 0.65; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.25); }
}

/* H1 du hero : 'Oltheo' (gradient animé dominant) + 'Labs' discret à côté */
.o-hero-title {
  margin: 0;
  font-family: var(--fDisp);
  font-weight: 500;
  line-height: 0.92;
  color: var(--fg);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.18em;
}
/* 'Oltheo' : grand, gradient animé blush↔accent qui traverse le texte */
.o-hero-title .line-1 {
  font-size: clamp(56px, 8.8vw, 132px);
  letter-spacing: -0.04em;
  background: linear-gradient(110deg,
    var(--blushInk) 0%, var(--accent) 35%, var(--blush) 65%, var(--blushInk) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oTitleGradient 9s ease-in-out infinite;
}
/* 'Labs' : à côté, beaucoup plus petit, couleur neutre, pas de gradient */
.o-hero-title .line-2 {
  font-size: clamp(20px, 2.4vw, 36px);
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--fg);
  opacity: 0.55;
}
@keyframes oTitleGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

.o-hero-sub {
  margin: 0;
  font-family: var(--fBody);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--fg2);
  max-width: 580px;
}

.o-hero-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.o-cta {
  height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--fBody);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.o-cta:hover { transform: translateY(-1px); }
.o-cta-primary {
  background: linear-gradient(110deg, var(--blushInk), var(--accent));
  color: #fff;
  box-shadow: 0 8px 24px -8px rgba(30, 58, 95, 0.5);
}
.o-cta-primary:hover {
  background: linear-gradient(110deg, var(--blush), var(--accentInk));
  box-shadow: 0 12px 32px -8px rgba(168, 119, 101, 0.4);
}
.o-cta-glass {
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg);
  border-color: rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
[data-theme="ivory"] .o-cta-glass {
  background: rgba(23, 20, 17, 0.04);
  border-color: rgba(23, 20, 17, 0.16);
}
.o-cta-glass:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.3);
}
[data-theme="ivory"] .o-cta-glass:hover {
  background: rgba(23, 20, 17, 0.08);
}

/* ── Pulsing orb (bas-droite) : ♃ au centre + texte rotatif autour ── */
.o-orb {
  position: absolute;
  bottom: 40px;
  right: 40px;
  z-index: 3;
  width: 140px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.o-orb-ring {
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    var(--blush), var(--accent), var(--blushInk),
    var(--blush), var(--accent), var(--blush));
  filter: blur(6px);
  opacity: 0.55;
  animation: oOrbPulse 2.4s ease-in-out infinite, oOrbSpin 14s linear infinite;
}
@keyframes oOrbPulse {
  0%, 100% { transform: scale(0.96); opacity: 0.45; }
  50%      { transform: scale(1.08); opacity: 0.70; }
}
@keyframes oOrbSpin {
  to { transform: rotate(360deg); }
}
.o-orb-mark {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid rgba(255, 255, 255, 0.10);
}
[data-theme="ivory"] .o-orb-mark { border-color: rgba(23, 20, 17, 0.08); }
.o-orb-text {
  position: absolute;
  inset: 0;
  animation: oOrbSpin 18s linear infinite reverse;
}
.o-orb-text text {
  font-family: var(--fMono);
  font-size: 6px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  fill: var(--fg3);
}

/* Variante "page" : orb fixe en bas-droite des pages secondaires.
   Plus petite, légèrement plus discrète pour ne pas gêner la lecture,
   visible en permanence pendant le scroll comme signature studio. */
.o-orb-page {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 40;
  width: 110px;
  height: 110px;
  opacity: 0.92;
}
.o-orb-page .o-orb-mark {
  width: 64px;
  height: 64px;
}
.o-orb-page .o-orb-ring { inset: 18px; }
@media (max-width: 720px) {
  .o-orb-page {
    width: 80px;
    height: 80px;
    bottom: 16px;
    right: 16px;
    opacity: 0.85;
  }
  .o-orb-page .o-orb-mark { width: 46px; height: 46px; }
  .o-orb-page .o-orb-ring { inset: 12px; }
}

/* Section produits sous le hero (scroll naturel) */
.o-products-section { padding: 96px 4vw; }

/* ── Pages secondaires (Products, Manifesto, Contact) : ton shader ───── */
/* Header de page avec mesh gradient subtil + glass-chip eyebrow + H1
   typo home (gradient blush↔accent sur le mot-clé). Crée la continuité
   visuelle avec la home. */
.o-page-shader { padding: 0; }
.o-page-header {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 10vh, 120px) 4vw clamp(48px, 8vh, 80px);
  background: var(--bg);
}
/* Mesh gradient atténué (vs hero home) : 2 blobs au lieu de 3, opacité 0.55 */
.o-page-mesh {
  position: absolute;
  inset: -8%;
  z-index: 0;
  pointer-events: none;
  filter: blur(50px);
  opacity: 0.55;
}
.o-page-mesh .o-mesh-blob-1 {
  top: -15%;
  left: -8%;
  width: 60%;
  height: 60%;
  background: radial-gradient(circle, var(--accent) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0.55;
  animation: oMeshFloat 28s ease-in-out infinite;
}
.o-page-mesh .o-mesh-blob-2 {
  top: 10%;
  right: -10%;
  width: 55%;
  height: 70%;
  background: radial-gradient(circle, var(--blush) 0%, transparent 60%);
  border-radius: 50%;
  opacity: 0.5;
  animation: oMeshFloat 32s ease-in-out -10s infinite;
}

.o-page-header-inner {
  position: relative;
  z-index: 2;
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  animation: oFadeUp 0.8s 0.1s ease both;
}
.o-page-h1 {
  margin: 0;
  font-family: var(--fDisp);
  font-weight: 500;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  color: var(--fg);
  text-wrap: balance;
}
/* Le mot-clé du H1 prend le gradient animé blush↔accent (signature home) */
.o-h-accent {
  background: linear-gradient(110deg,
    var(--blushInk) 0%, var(--accent) 35%, var(--blush) 65%, var(--blushInk) 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: oTitleGradient 9s ease-in-out infinite;
}
.o-page-intro {
  margin: 8px 0 0;
  font-family: var(--fDisp);
  font-style: italic;
  font-size: clamp(18px, 1.8vw, 26px);
  line-height: 1.4;
  color: var(--blushInk);
  max-width: 720px;
}

/* Corps de page sous le header (cartes, sections, etc.) */
.o-page-body {
  padding: clamp(48px, 8vh, 96px) 4vw clamp(72px, 12vh, 128px);
  max-width: 1480px;
  margin: 0 auto;
  animation: oFadeUp 0.9s 0.25s ease both;
}

@media (max-width: 900px) {
  .o-page-header { padding: 48px 5vw 40px; }
  .o-page-body { padding: 48px 5vw 64px; }
}

@media (max-width: 900px) {
  .o-hero-shader { padding: 72px 5vw 48px; }
  .o-orb { bottom: 24px; right: 24px; width: 110px; height: 110px; }
  .o-orb-mark { width: 64px; height: 64px; }
  .o-orb-ring { inset: 18px; }
  .o-products-section { padding: 72px 5vw; }
}
@media (max-width: 540px) {
  .o-hero-title .line-1, .o-hero-title .line-2 { font-size: clamp(48px, 14vw, 80px); }
  .o-orb { width: 90px; height: 90px; }
  .o-orb-mark { width: 52px; height: 52px; }
  .o-orb-ring { inset: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .o-mesh-blob, .o-orb-ring, .o-orb-text,
  .o-hero-title .line-1, .o-glass-chip .dot,
  .o-hero-content { animation: none; }
}

/* Anciennes classes home gardées en fallback (split horizontal) */
.o-home { padding: 56px 4vw 96px; }

/* Split hero : texte gauche / mark droite. Sur mobile, on stack (mark
   en premier pour ouvrir sur l'identité visuelle, puis le texte). */
.o-hero-split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 1fr);
  gap: 96px;
  align-items: center;
  padding: 56px 0 112px;
}
.o-hero-text {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
  max-width: 680px;
}
.o-hero-mark {
  display: flex;
  align-items: center;
  justify-content: center;
}
.o-eyebrow-hero {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg3);
  margin: 0;
}
.o-wordmark-hero {
  margin: 0;
  font-family: var(--fDisp);
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 56px);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--fg);
}
.o-tagline-hero {
  margin: 0;
  font-family: var(--fDisp);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 24px);
  color: var(--blushInk);  /* rose chaud pour adoucir le bleu d'encre froid */
  line-height: 1.4;
  letter-spacing: -0.01em;
}
.o-sub-soft {
  margin: 0;
  font-family: var(--fDisp);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--fg2);
  font-weight: 400;
  text-wrap: pretty;
  max-width: 560px;
}
.o-services {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-top: 8px;
}
.o-services-item { display: inline-flex; align-items: center; gap: 18px; }
.o-services .dot { color: var(--fg3); }
.o-ctas {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.o-products-section { padding-top: 24px; }

/* Responsive du split */
@media (max-width: 900px) {
  .o-hero-split {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 32px 0 64px;
    text-align: center;
  }
  .o-hero-mark { order: -1; }  /* mark en premier sur mobile */
  .o-hero-text {
    align-items: center;
    text-align: center;
    max-width: 100%;
  }
  .o-sub-soft { max-width: 100%; }
  .o-services { justify-content: center; }
  .o-ctas { justify-content: center; }
}
@media (max-width: 540px) {
  /* À l'extrême : le mark plus petit pour rester équilibré */
  .o-hero-mark svg { width: 160px !important; height: 160px !important; }
}
.o-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--lineStrong);
  background: transparent;
  color: var(--fg);
  font-family: var(--fBody);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.005em;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
  text-decoration: none;
}
.o-btn:hover { transform: translateY(-1px); background: var(--surface); }
.o-btn.is-primary {
  border: none;
  background: var(--accent);
  color: #fff;
}
.o-btn.is-primary:hover { background: var(--accentInk); }
.o-btn.is-product {
  background: var(--btn-bg, var(--accent));
  color: #fff;
  border: none;
  height: 48px;
  padding: 0 20px;
}
.o-btn.is-product:hover { filter: brightness(1.08); }

/* Cartes produit (preview home) */
/* min(380px, 100%) : sur écran <380px (mobile), la card prend 100% au lieu
   de déborder. Sur desktop, repeat(auto-fit, ...) répartit en 2 colonnes
   dès qu'on a 760px+. */
.o-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr));
  gap: 24px;
}
.o-product-preview {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 32px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s ease, border-color 0.25s ease;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 240px;
  font-family: inherit;
  color: inherit;
}
.o-product-preview:hover {
  transform: translateY(-3px);
  border-color: var(--lineStrong);
}
.o-product-preview .head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
}
.o-product-preview .mark-block {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.o-product-preview .url {
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.o-product-preview .name {
  font-family: var(--fDisp);
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.o-product-preview .kind {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.o-product-preview p {
  margin: 0;
  color: var(--fg2);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ── Products : carte large + mocks + pipeline ──────────────────────── */
.o-products-h1 {
  font-family: var(--fDisp);
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.98;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 20px;
  max-width: 980px;
  text-wrap: balance;
}
.o-products-intro {
  font-family: var(--fDisp);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 26px);
  color: var(--fg2);
  line-height: 1.4;
  margin: 0 0 96px;
  max-width: 760px;
  text-wrap: pretty;
}
.o-product-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.o-product-card .text {
  padding: 56px;
  display: flex;
  flex-direction: column;
}
.o-product-card .head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}
.o-product-card .mark-block {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.o-product-card .name {
  font-family: var(--fDisp);
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.02em;
}
.o-product-card .kind {
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 4px;
}
.o-product-card h3 {
  font-family: var(--fDisp);
  font-size: clamp(28px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 18px;
  text-wrap: balance;
}
.o-product-card .body {
  margin: 0 0 28px;
  color: var(--fg2);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}
.o-product-card ul {
  list-style: none;
  padding: 0;
  margin: 0 0 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.o-product-card li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--fg);
  font-size: 14px;
}
.o-product-card li .bullet {
  margin-top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}
.o-product-card li span:last-child { line-height: 1.45; }
.o-product-card .cta-row {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.o-product-card .cta-row .url {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg3);
}
.o-product-card .mock {
  padding: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px solid var(--line);
}

/* Mock Athéna (faux téléphone) */
.o-mock-athena {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 9 / 16;
  background: #efece4;
  color: #171411;
  border-radius: 28px;
  border: 1px solid rgba(23, 20, 17, 0.1);
  box-shadow: 0 30px 60px -30px rgba(23, 20, 17, 0.25), 0 10px 30px -20px rgba(23, 20, 17, 0.18);
  padding: 36px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  position: relative;
}
.o-mock-athena .head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(23, 20, 17, 0.08);
  margin-bottom: 0;
}
.o-mock-athena .name {
  font-family: "Geist", -apple-system, sans-serif;
  font-size: 22px;
  line-height: 1;
  letter-spacing: -0.01em;
}
.o-mock-athena .meta {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  color: #9b9387;
  margin-top: 3px;
}
.o-mock-athena .bubble {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(23, 20, 17, 0.06);
  border-radius: 16px;
  padding: 14px 16px;
  font-family: "Geist", -apple-system, sans-serif;
  font-size: 18px;
  line-height: 1.35;
  color: #171411;
  text-wrap: pretty;
}
.o-mock-athena .bubble.accent { font-size: 17px; }
.o-mock-athena .bubble .accent { color: #b8431a; }
.o-mock-athena .chips {
  margin-top: auto;
  display: flex;
  gap: 6px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 11px;
}
.o-mock-athena .chip {
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(23, 20, 17, 0.12);
  color: #5a544c;
}
.o-mock-athena .input-bar {
  height: 38px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(23, 20, 17, 0.08);
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  color: #9b9387;
  justify-content: space-between;
}
.o-mock-athena .send-btn {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #b8431a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Mock Alexandrie (fiche) */
.o-mock-alex {
  width: 100%;
  max-width: 460px;
  background: #fffdf6;
  color: #1a1d15;
  border-radius: 8px;
  border: 1px solid rgba(20, 19, 18, 0.12);
  box-shadow: 0 30px 60px -30px rgba(20, 19, 18, 0.25), 0 10px 30px -20px rgba(20, 19, 18, 0.18);
  font-family: "Geist Mono", ui-monospace, monospace;
  overflow: hidden;
}
.o-mock-alex .head {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(20, 19, 18, 0.1);
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(20, 19, 18, 0.03);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #52584a;
}
.o-mock-alex .head .pip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4d5f33;
}
.o-mock-alex .head .ver { margin-left: auto; }
.o-mock-alex .body {
  padding: 22px 24px;
  font-family: "Geist", -apple-system, sans-serif;
}
.o-mock-alex .study {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #4d5f33;
  margin-bottom: 12px;
}
.o-mock-alex h4 {
  font-family: "Geist", -apple-system, sans-serif;
  font-size: 26px;
  line-height: 1.18;
  margin: 0 0 22px;
  letter-spacing: -0.015em;
  font-weight: 500;
}
.o-mock-alex .finding {
  margin: 0 0 14px;
  font-size: 15px;
  line-height: 1.5;
  color: #1a1d15;
}
.o-mock-alex .practical {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #52584a;
  font-style: italic;
}
.o-mock-alex .footer {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed rgba(20, 19, 18, 0.15);
  display: flex;
  justify-content: space-between;
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 10px;
  color: #8a907f;
  letter-spacing: 0.05em;
}

/* Sous-section éditoriale (ex : Athéna pour les pros) : variante plus modeste
   de o-product-card — pas de mark, pas de CTA, padding réduit, h3 plus court. */
.o-product-subcard {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}
.o-product-subcard .text {
  padding: 40px 48px;
  display: flex;
  flex-direction: column;
}
.o-product-subcard h3 {
  font-family: var(--fDisp);
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 12px 0 16px;
  text-wrap: balance;
}
.o-product-subcard .body {
  margin: 0 0 24px;
  color: var(--fg2);
  font-size: 15px;
  line-height: 1.55;
  text-wrap: pretty;
}
.o-product-subcard ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.o-product-subcard li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--fg);
  font-size: 14px;
}
.o-product-subcard li .bullet {
  margin-top: 6px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex: none;
}
.o-product-subcard li span:last-child { line-height: 1.45; }
.o-product-subcard .mock {
  padding: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 1px solid var(--line);
}
@media (max-width: 900px) {
  .o-product-subcard { grid-template-columns: 1fr; }
  .o-product-subcard .text { padding: 36px 28px 28px; }
  .o-product-subcard .mock { border-left: none; border-top: 1px solid var(--line); padding: 28px; }
}

/* Mock « Mes patientes » — fac-similé de la vue praticien·ne d'Athéna :
   liste des patientes avec sRPE 7 j + carte « Code à partager ». */
.o-mock-pros {
  width: 100%;
  max-width: 340px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(23, 20, 17, 0.1);
  box-shadow: 0 12px 28px -16px rgba(23, 20, 17, 0.15);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  color: #171411;
}
.o-mock-pros .head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid rgba(23, 20, 17, 0.06);
  padding-bottom: 10px;
}
.o-mock-pros .head .title {
  font-family: var(--fDisp);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.o-mock-pros .head .count {
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b6b66;
}
.o-mock-pros .rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.o-mock-pros-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-radius: 8px;
}
.o-mock-pros-row .ini {
  width: 28px;
  height: 28px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--fDisp);
  font-size: 12px;
  font-weight: 600;
  background: var(--athenaSoft);
  color: var(--athena);
}
.o-mock-pros-row .meta .n {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.o-mock-pros-row .meta .last {
  font-family: var(--fMono);
  font-size: 10px;
  color: #6b6b66;
  margin-top: 2px;
}
.o-mock-pros-row .load {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: #171411;
  text-align: right;
}
.o-mock-pros-row[data-tone="warning"] .load { color: #9a7d1f; font-weight: 500; }
.o-mock-pros-row[data-tone="positive"] .load { color: #3d6b3d; }
.o-mock-pros .code-card {
  background: var(--athenaSoft);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.o-mock-pros .code-card .label {
  font-family: var(--fMono);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--athena);
}
.o-mock-pros .code-card .value {
  font-family: var(--fMono);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #171411;
}
.o-mock-pros .code-card .foot {
  font-family: var(--fMono);
  font-size: 9.5px;
  color: #6b6b66;
}

/* Pipeline diagram */
.o-pipeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
}
.o-pipeline-step {
  padding: 36px 28px 32px;
  border-right: 1px solid var(--line);
  position: relative;
}
.o-pipeline-step:last-child {
  border-right: none;
  background: var(--alexSoft);
}
.o-pipeline-step .n {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--alex);
  margin-bottom: 14px;
}
.o-pipeline-step .t {
  font-family: var(--fDisp);
  font-size: 26px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
}
.o-pipeline-step .d {
  color: var(--fg2);
  font-size: 13.5px;
  line-height: 1.5;
}
.o-pipeline-step .arrow {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

/* ── Manifeste ──────────────────────────────────────────────────────── */
.o-manifesto-h1 {
  font-family: var(--fDisp);
  font-size: clamp(48px, 6.4vw, 104px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 0 0 36px;
  max-width: 1100px;
  text-wrap: balance;
}
.o-manifesto-lede {
  font-family: var(--fDisp);
  font-style: italic;
  font-size: clamp(22px, 2vw, 32px);
  line-height: 1.35;
  color: var(--fg2);
  margin: 0 0 96px;
  max-width: 880px;
  text-wrap: pretty;
}
.o-manifesto-section {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 56px;
  padding: 48px 0;
  border-top: 1px solid var(--line);
}
.o-manifesto-section:last-of-type { border-bottom: 1px solid var(--line); }
.o-manifesto-section .roman {
  font-family: var(--fDisp);
  font-style: italic;
  font-size: 48px;
  line-height: 1;
  color: var(--accent);
}
.o-manifesto-section h3 {
  font-family: var(--fDisp);
  font-size: clamp(26px, 2.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin: 0 0 16px;
  text-wrap: balance;
}
.o-manifesto-section p {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg2);
  text-wrap: pretty;
  max-width: 760px;
}

.o-process-title {
  font-family: var(--fDisp);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 128px 0 16px;
}
.o-process-intro {
  font-family: var(--fDisp);
  font-size: clamp(18px, 1.6vw, 24px);
  color: var(--fg2);
  margin: 0 0 56px;
  max-width: 680px;
}
.o-process {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 24px;
  overflow: hidden;
  background: var(--surface);
}
.o-process-step {
  padding: 40px 32px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.o-process-step .n {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 24px;
}
.o-process-step .t {
  font-family: var(--fDisp);
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.o-process-step .d {
  color: var(--fg2);
  font-size: 14px;
  line-height: 1.55;
}

/* ── Contact ────────────────────────────────────────────────────────── */
.o-contact-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.4fr);
  gap: 80px;
}
.o-contact-block .label {
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 12px;
}
.o-contact-block .value { font-size: 16px; color: var(--fg); }
.o-contact-block .value a {
  color: var(--blushInk);
  text-decoration: none;
  font-family: var(--fDisp);
  font-style: italic;
  font-size: 30px;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--blush);
  padding-bottom: 2px;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.o-contact-block .value a:hover {
  color: var(--blush);
  border-bottom-color: var(--blushInk);
}
.o-contact-form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 28px;
  padding: 36px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.o-contact-form .form-label {
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
}
.o-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.o-field { display: flex; flex-direction: column; gap: 8px; }
.o-field .lbl {
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg3);
}
.o-field input,
.o-field textarea {
  background: var(--surface2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: var(--fBody);
  font-size: 15px;
  color: var(--fg);
  outline: none;
  resize: vertical;
}
.o-field textarea { min-height: 120px; }
.o-field input:focus,
.o-field textarea:focus { border-color: var(--lineStrong); }
.o-contact-sent {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--accentSoft);
  color: var(--accentInk);
  font-size: 14px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.o-contact-err {
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--athenaSoft);
  color: var(--athena);
  font-size: 14px;
}

/* ── Footer ─────────────────────────────────────────────────────────── */
.o-footer {
  border-top: 1px solid var(--line);
  padding: 64px 4vw 56px;
  margin-top: 96px;
  background: var(--surface);
}
.o-footer-grid {
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.o-footer-col .title {
  font-family: var(--fMono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg3);
  margin-bottom: 14px;
}
.o-footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.o-footer-col a,
.o-footer-col button {
  color: var(--fg);
  text-decoration: none;
  font-family: var(--fBody);
  font-size: 14px;
  background: transparent;
  border: none;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.o-footer-col .ext-mark {
  margin-left: 6px;
  font-family: var(--fMono);
  font-size: 10px;
  color: var(--fg3);
}
.o-footer-tag {
  margin-bottom: 0;
  color: var(--fg2);
  font-size: 14px;
  line-height: 1.55;
  max-width: 340px;
  margin-top: 18px;
}
.o-footer-bottom {
  margin: 48px auto 0;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--fMono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--fg3);
  text-transform: uppercase;
}

/* ── Logo wordmark ──────────────────────────────────────────────────── */
.o-wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.36em;
  color: currentColor;
}
.o-wordmark .name {
  font-family: var(--fDisp);
  font-weight: var(--fDispW);
  letter-spacing: var(--fDispLs);
  white-space: nowrap;
  line-height: 1;
}
.o-wordmark .labs {
  font-family: var(--fMono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
  font-weight: 500;
}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .o-page { padding: 72px 4vw 64px; }
  .o-hero-row {
    grid-template-columns: 1fr;
    gap: 32px;
    margin: 56px 0 96px;
  }
  .o-product-card {
    grid-template-columns: 1fr;
  }
  .o-product-card .mock {
    border-left: none;
    border-top: 1px solid var(--line);
  }
  .o-product-card .text { padding: 40px; }
  .o-pipeline { grid-template-columns: 1fr 1fr; }
  .o-pipeline-step:nth-child(odd) { border-right: 1px solid var(--line); }
  .o-pipeline-step:nth-child(even) { border-right: none; }
  .o-pipeline-step:nth-child(1),
  .o-pipeline-step:nth-child(2) { border-bottom: 1px solid var(--line); }
  .o-pipeline-step .arrow { display: none; }
  .o-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
}

@media (max-width: 720px) {
  .o-page { padding: 56px 5vw 56px; }
  .o-nav-row { padding: 14px 5vw; gap: 10px; flex-wrap: wrap; }
  .o-nav-items {
    margin-left: 0;
    width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .o-nav-items::-webkit-scrollbar { display: none; }
  .o-nav-toggles { margin-left: auto; }
  .o-product-card .text { padding: 32px 24px; }
  .o-product-card .mock { padding: 24px; }
  .o-manifesto-section { grid-template-columns: 1fr; gap: 16px; padding: 36px 0; }
  .o-contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .o-field-row { grid-template-columns: 1fr; }
  .o-footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .o-footer-bottom { flex-direction: column; gap: 8px; }
}

@media (max-width: 420px) {
  .o-nav-item { padding: 6px 10px; font-size: 13px; }
  .o-process { grid-template-columns: 1fr; }
}

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