/* ==========================================================================
   GAYA — design system
   Palette et typographie reprises du site 2021 (gaya.marketing), modernisées.
   Aucune dépendance externe : la police est servie depuis le domaine.
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('../fonts/montserrat-latin.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Marque (reprise de l'existant) */
  --green: #6cb540;
  --green-dot: #6bb54a;
  --green-dark: #4c9520;
  --blue: #1a4c6f;
  --ink-logo: #1d1d1b;
  --darkGray: #2c2c2c;
  --lightGray: #f3f3f3;

  /* Étendu pour la refonte */
  --blue-900: #0d2333;
  --blue-800: #123a56;
  --blue-100: #e9f0f5;
  --ink: #10151a;
  --body: #33414d;
  --muted: #64748b;
  --paper: #ffffff;
  --bg: #f7f9fa;
  --border: rgba(26, 76, 111, 0.14);
  --border-strong: rgba(26, 76, 111, 0.28);
  --error: #c0392b;

  --radius: 10px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(13, 35, 51, 0.06);
  --shadow: 0 1px 2px rgba(13, 35, 51, 0.06), 0 10px 28px rgba(13, 35, 51, 0.08);

  --wrap: 1140px;
  --gutter: clamp(18px, 4vw, 40px);
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --------------------------------------------------------------- reset ---- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--blue-800); }
button { font: inherit; }

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  margin: 0 0 0.5em;
  font-weight: 700;
  letter-spacing: -0.02em;
  text-wrap: balance;      /* évite les titres à un mot orphelin sur la dernière ligne */
}
h1 { font-size: clamp(32px, 5vw, 56px); }
h2 { font-size: clamp(26px, 3.4vw, 38px); }
h3 { font-size: clamp(19px, 2vw, 23px); }
p { margin: 0 0 1em; }
ul { margin: 0 0 1em; padding-left: 1.2em; }
strong { font-weight: 600; color: var(--ink); }
/* Identifiants techniques cités en clair (clés de traceurs, noms de fichiers). */
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--blue-100);
  color: var(--blue-800);
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--blue);
  color: #fff;
  padding: 10px 16px;
  z-index: 999;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------- layout ----- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tight { padding: clamp(40px, 5vw, 64px) 0; }
.section--alt { background: var(--bg); }
.section--blue { background: var(--blue-900); color: #dbe6ee; }
.section--blue h2, .section--blue h3 { color: #fff; }

.section-head { max-width: 760px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-dark);
  margin-bottom: 0.75em;
}
.lead { font-size: clamp(18px, 1.6vw, 21px); color: var(--body); }
.section--blue .lead { color: #b9cddc; }

/* ------------------------------------------------------------ boutons ----- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.2s ease-in-out, background 0.2s ease-in-out,
              color 0.2s ease-in-out, border-color 0.2s ease-in-out,
              box-shadow 0.2s ease-in-out;
}
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:hover { background: var(--green-dark); color: #fff; }
.btn--ghost { background: transparent; color: var(--blue); border-color: var(--border-strong); }
.btn--ghost:hover { border-color: var(--blue); background: var(--blue-100); }
.btn--onblue { background: #fff; color: var(--blue-900); }
.btn--onblue:hover { color: var(--blue-900); filter: brightness(0.92); }
.btn--outline-white { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45); }
.btn--outline-white:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 15px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.btn-row--center { justify-content: center; }

/* ------------------------------------------------------------- header ----- */
/* Les ancres vers une rubrique doivent s'arrêter sous l'en-tête collant, pas derrière lui. */
[id] {
  scroll-margin-top: 92px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 72px;
}
.brand {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  /* Les liens sont soulignés par défaut sur ce site : la signature porte déjà son trait. */
  text-decoration: none;
}

/* Signature : GAYA en capitales, dans la police du site, souligné d'un trait vert.
   Le trait est un vrai soulignement : sa position se mesure depuis la ligne de base, alors
   qu'une bordure ou un fond se mesurent depuis le bas de la boîte — dont la place réservée
   au jambage ne dit rien de la hauteur réelle des capitales. */
.brand-word {
  display: inline-block;
  /* Calée sur la hauteur d'un bouton du site (.btn--sm : 40 px), en-tête compris. */
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--green);
  text-decoration-thickness: 3px;
  text-underline-offset: 6px;
}

.nav { margin-left: auto; }
.nav-list {
  display: flex;
  align-items: center;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-link {
  position: relative;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  padding: 6px 0;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 2px;
  background: var(--green);
  transition: right 0.2s ease-in-out;
}
.nav-link:hover::after, .nav-link.is-active::after { right: 0; }
.nav-link.is-active { font-weight: 600; }

.nav-mobile { display: none; }
.header-cta { flex-shrink: 0; }

/* --------------------------------------------------------------- hero ----- */
.hero {
  position: relative;
  background: var(--blue-900);
  color: #e2ecf3;
  overflow: hidden;
  padding: clamp(56px, 9vw, 108px) 0 clamp(48px, 7vw, 88px);
}
.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto auto;
  width: 60vw;
  height: 60vw;
  max-width: 820px;
  max-height: 820px;
  background: radial-gradient(circle at 50% 50%, rgba(108, 181, 64, 0.16), transparent 62%);
  pointer-events: none;
}
.hero-inner { position: relative; max-width: 880px; }
.hero h1 { color: #fff; margin-bottom: 0.35em; }
.hero h1 em {
  font-style: normal;
  color: var(--green);
}
.hero-sub {
  font-size: clamp(18px, 1.9vw, 22px);
  color: #b9cddc;
  max-width: 720px;
  margin-bottom: 1.8em;
}
.hero-sub strong { color: #fff; font-weight: 600; }

/* --------------------------------------------------------- bandeau preuves */
.proof {
  background: var(--paper);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.proof-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  color: var(--muted);
}
.proof-list li { display: inline-flex; align-items: center; gap: 8px; }
.proof-list svg { width: 17px; height: 17px; color: var(--green); flex-shrink: 0; }
.proof-list strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------- cartes --- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
/* Deux colonnes garanties : en auto-fit, quatre cartes se rangent sur trois colonnes dès que la
   largeur le permet (1080 px de contenu / 320 px = 3), et la quatrième reste seule sur sa ligne. */
.grid--2x2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .grid--2x2 { grid-template-columns: 1fr; }
}
/* ------------------------------------------ tableau comparatif des parcours --- */
/* Le seul tableau du site : les deux parcours ligne à ligne, sur les critères qui les
   distinguent vraiment. Il se lit d'un coup d'œil, ce qu'une liste de cartes ne permet pas.
   Sur un écran étroit il défile horizontalement plutôt que d'écraser ses colonnes. */
.compare-wrap { overflow-x: auto; }
.compare {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}
.compare caption {
  padding-bottom: 14px;
  text-align: left;
  color: var(--muted);
  font-size: 15px;
}
.compare th,
.compare td {
  padding: 15px 20px;
  border-bottom: 1px solid var(--border);
  font-size: 15.5px;
  line-height: 1.5;
  text-align: left;
  vertical-align: top;
}
.compare thead th {
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-strong);
  color: var(--blue-800);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.compare tbody th {
  width: 24%;
  color: var(--ink);
  font-weight: 600;
}
.compare tbody tr:last-child th,
.compare tbody tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------- punchline --- */
/* La signature de l'offre : pleine largeur, sous les trois blocs. */
.punch {
  margin: clamp(30px, 4vw, 44px) 0 0;
  font-size: clamp(20px, 2.3vw, 27px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--green-dark);
}

/* ------------------------------------------------- points de carte -------- */
.card-points {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.card-points li {
  position: relative;
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.card-points li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--green);
}

/* ------------------------------------------------ bandeau signaux --------- */
.signaux-band {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  margin-top: clamp(32px, 5vw, 52px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 1px solid var(--border);
}
.signaux-band h3 {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .signaux-band { grid-template-columns: 1fr; }
}

.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease-in-out, transform 0.2s ease-in-out,
              border-color 0.2s ease-in-out;
}
.card--link { display: block; color: inherit; text-decoration: none; }
.card--link:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  border-color: var(--border-strong);
  color: inherit;
}
.card h3 { margin-bottom: 0.4em; }
.card p:last-child { margin-bottom: 0; }
.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--blue-100);
  color: var(--blue);
  margin-bottom: 16px;
}
.card-icon svg { width: 22px; height: 22px; }
/* Vignettes : même tuile, dessin plus large qu'une icône de trait. */
.card-icon--illu { background: var(--blue-100); }
.card-icon--illu svg { width: 30px; height: 30px; }
.card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 15px;
  color: var(--green-dark);
}
.card-more::after { content: '→'; transition: transform 0.2s ease-in-out; }
.card--link:hover .card-more::after { transform: translateX(3px); }

/* ------------------------------------------------------------ fondateurs --- */
.founder-photo {
  display: block;
  width: 128px;
  height: 128px;
  border-radius: var(--radius);
  margin-bottom: 18px;
}
.founder h3 { margin-bottom: 2px; }
.founder-role {
  margin: 0 0 12px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --------------------------------------------------------------- étapes --- */
.steps { counter-reset: step; display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.steps--v { grid-template-columns: 1fr; gap: 22px; }
.step { position: relative; padding-top: 8px; }
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 14px;
}
.step h3 { font-size: 19px; }
.step p { font-size: 16px; margin-bottom: 0; }
.steps--v .step { padding-left: 52px; padding-top: 0; }
.steps--v .step-num { position: absolute; left: 0; top: 2px; margin-bottom: 0; }
/* Jalon daté : le même marqueur, élargi pour porter une année. */
.step-num--year { width: auto; padding: 0 12px; border-radius: 999px; letter-spacing: 0.02em; }

/* --------------------------------------------------------- bloc en avant --- */
.feature {
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  grid-template-columns: 1.05fr 0.95fr;
  align-items: start;
}
.feature > aside {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(22px, 2.6vw, 32px);
}
.feature > aside h3 { font-size: 17px; text-transform: uppercase; letter-spacing: 0.04em; }
@media (max-width: 900px) {
  .feature { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------- chips ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
}
.chip {
  position: relative;
  display: inline-block;
  padding: 7px 13px 7px 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
}
.chip::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-radius: 2px;      /* rappel du point carré du logo */
  background: var(--green);
}

/* ---------------------------------------------------------- livraisons ---- */
.delivery { display: grid; gap: 10px; margin-bottom: 22px; }
.delivery-item {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
}
.delivery-item strong { font-size: 15px; }
.delivery-item span { font-size: 14px; color: var(--muted); line-height: 1.45; }

/* ------------------------------------------------------------- schéma ----- */
.schema { margin: 0; }
.schema svg { width: 100%; height: auto; display: block; }
.schema figcaption {
  margin-top: 14px;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
}
/* Deux variantes : horizontale (large) et verticale (étroit). Jamais l'une écrasée. */
.schema--narrow { display: none; }

@media (max-width: 760px) {
  .schema--wide { display: none; }
  .schema--narrow { display: block; }
  .schema figcaption { font-size: 15px; text-align: left; }
}

/* ------------------------------------------------------------- secteurs --- */
.sector {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--paper);
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  font-size: 16px;
}
a.sector:hover { border-color: var(--border-strong); color: var(--blue); }
.sector svg { width: 20px; height: 20px; color: var(--blue); flex-shrink: 0; }

/* ------------------------------------------------------------ audience ---- */
.audience { border-left: 3px solid var(--green); padding-left: 18px; }
.audience h3 { font-size: 18px; margin-bottom: 0.3em; }
.audience p { font-size: 16px; margin-bottom: 0.6em; }
.audience .quote {
  font-style: italic;
  color: var(--blue);
  font-size: 16px;
  margin: 0;
}

/* ----------------------------------------------------------- bandeau CTA -- */
.cta-band {
  background: var(--blue);
  color: #dce8f0;
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}
.cta-band h2 { color: #fff; margin-bottom: 0.25em; font-size: clamp(22px, 2.6vw, 30px); }
.cta-band p { margin-bottom: 0; color: #c6d8e5; max-width: 620px; }
.cta-band .btn-row { flex-shrink: 0; }

/* -------------------------------------------------------------- footer ---- */
.site-footer {
  background: var(--darkGray);
  color: #c9cdd1;
  padding: clamp(40px, 5vw, 64px) 0 24px;
  font-size: 15px;
}
.site-footer h2 { color: #fff; font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 0.9em; }
.site-footer a { color: #e4e7ea; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; gap: 32px; grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.footer-brand .brand-word {
  font-size: 30px;
  color: #fff;
  text-underline-offset: 5px;
  margin-bottom: 14px;
}
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: #9aa1a8;
}

/* -------------------------------------------------------------- formulaires */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 3px rgba(26, 76, 111, 0.12); }
.field--error input, .field--error textarea, .field--error select { border-color: var(--error); }
.field-error { display: none; color: var(--error); font-size: 13px; margin-top: 5px; }
.field--error .field-error { display: block; }
.form-note { font-size: 13px; color: var(--muted); }
/* Un formulaire seul dans la page : un champ de saisie ne s'étire pas sur toute la largeur. */
.form-contact { max-width: 620px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ----------------------------------------------------------------- blog ---- */
.article { padding: clamp(48px, 7vw, 88px) 0; }
.article-head { max-width: 760px; }
.article-meta { color: var(--muted); font-size: 0.92rem; margin: 0; }
/* Un article se lit : la colonne reste courte même quand l'écran est large. */
.article-body { max-width: 720px; }
.article-body > *:first-child { margin-top: 0; }
.article-body > p:first-child { font-size: 1.12rem; color: var(--ink); }
.article-body > h2 { font-size: clamp(22px, 2.6vw, 30px); margin: 2.2em 0 0.6em; }
.article-body > h3 { margin: 1.9em 0 0.5em; }
.article-body ul { padding-left: 1.25em; }
.article-body li { margin-bottom: 0.4em; }
.article-body blockquote {
  margin: 1.7em 0;
  padding-left: 18px;
  border-left: 3px solid var(--green);
  color: var(--ink);
  font-weight: 500;
}
.card .article-meta { margin-bottom: 0.55em; }

/* -------------------------------------------------------------- utilitaires */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ------------------------------------------------------------ responsive -- */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .nav-mobile {
    display: block;
    margin-left: auto;
    position: relative;
  }
  .nav-mobile > summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-size: 15px;
    font-weight: 600;
    color: var(--ink);
  }
  .nav-mobile > summary::-webkit-details-marker { display: none; }
  .nav-mobile[open] > summary { border-color: var(--blue); }
  .nav-mobile .nav-list {
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    min-width: 230px;
    background: var(--paper);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 10px;
    z-index: 120;
  }
  .nav-mobile .nav-link { display: block; padding: 10px 12px; border-radius: 8px; }
  .nav-mobile .nav-link::after { display: none; }
  .nav-mobile .nav-link:hover { background: var(--blue-100); }
  .header-cta { display: none; }
}

@media (max-width: 600px) {
  body { font-size: 16px; }
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .btn { width: 100%; }
  .btn-row { width: 100%; }
  .proof-list { justify-content: flex-start; }
}