/* ============================================================
   Mobile Money® — World-class landing
   Gradient: #8432FF (purple) → #00D5FF (cyan)
   Dark / Light mode via [data-theme] on <html>
   ============================================================ */

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

/* ===== LIGHT MODE (default) ===== */
:root {
  --gp: #8432FF;
  --gc: #00D5FF;
  --gm: #5A6BFF;

  --bg:     #FFFFFF;
  --bg2:    #F7F7FA;
  --bg3:    #EEEEF3;
  --ink:    #0D0D0E;
  --ink2:   #6B7280;
  --ink3:   #9CA3AF;
  --border: rgba(0,0,0,.08);
  --card-bg: #F7F7FA;
  --card-border: rgba(0,0,0,.08);
  --nav-bg: rgba(255,255,255,.88);
  --shadow-card: 0 4px 24px rgba(0,0,0,.06);
  --shadow-phone: 0 40px 80px rgba(0,0,0,.5), 0 10px 20px rgba(0,0,0,.25);

  --footer-link: var(--gp);
  --footer-link-hover: var(--gm);
  --footer-social-hover-bg: var(--gp);

  /* ARRONDIS (ordre du fondateur, 14/09/2026) : UNE échelle de coins pour les quatre sites, définie ICI seulement.
     Carte, image de une, vignette : --r-card. Bloc moyen : --r-md. Petit : --r-sm. Plus petit : --r-xs.
     Pastilles et boutons ronds : --r-pill (ou 50 %). Hors de cette feuille, un jeton s'emploie AVEC son repli.

     ☠️ 20/09/2026 — LES VALEURS REMONTENT, ET CET ORDRE ANNULE CELUI DU 15/09. Verbatim du fondateur :
     « Je propose que tu revienne sur un border radius comme avant sur les 4 sites internet car maintenant les
     carreaux sont trop carres, il faut revenir aux coins arrondis du rayon d'avant avec des rondeurs un peu plus
     grande que maintenant ». La règle « blocs = angles vifs » du 15/09 NE VAUT PLUS pour les blocs : ne la
     rétablissez pas. Avant le 15/09 les cartes valaient 16 px et 14 px ; le 15/09 les avait divisées par ~3 (6 px).
     ☠️ CE QUI NE CHANGE PAS : le NOMBRE de jetons (cinq) et leurs NOMS. C'est l'échelle qui tient les quatre
     sites ensemble ; y ajouter ou en retirer un rouvrirait la dispersion que le 15/09 avait fermée. On change des
     VALEURS, point. Les pastilles (--r-pill), les ronds (50 %) et les boutons à 100 px ne bougent pas : le
     fondateur parle des CARREAUX.
     ☠️ LES REPLIS SUIVENT : hors de cette feuille un jeton s'écrit var(--r-card, 16px). Les pages qui ne
     chargent PAS site.css (Kongossas, la 404 commune, /verify, les pages de partage) ne voient QUE ce repli : un
     repli laissé à 6 px y garderait les angles vifs en silence. Garde : arrondisEchelle.test.ts ③. */
  --r-card: 16px;
  --r-md: 12px;
  --r-sm: 8px;
  --r-xs: 5px;
  --r-pill: 999px;
  --r: var(--r-card);
  --max: 1120px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ===== DARK MODE ===== */
[data-theme="dark"] {
  --bg:     #09090B;
  --bg2:    #111113;
  --bg3:    #1A1A1E;
  --ink:    #F2F2F4;
  --ink2:   #9B9BA8;
  --ink3:   #6B6B78;
  --border: rgba(255,255,255,.07);
  --card-bg: #111113;
  --card-border: rgba(255,255,255,.07);
  --nav-bg: rgba(9,9,11,.88);
  --shadow-card: 0 4px 24px rgba(0,0,0,.4);
  --shadow-phone: 0 40px 80px rgba(0,0,0,.8), 0 10px 20px rgba(0,0,0,.5);

  /* Footer links: cyan accent reads better than brand purple on dark bg */
  --footer-link: #67E8F9;
  --footer-link-hover: #BAF8FF;
  --footer-social-hover-bg: #22D3EE;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background .3s, color .3s;
}

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

/* ===== GRADIENT TEXT ===== */
.g-text, .eyebrow {
  background: linear-gradient(90deg, var(--gp), var(--gc));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.eyebrow {
  display: inline-block;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow-light { -webkit-text-fill-color: rgba(255,255,255,.65); background: none; }

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 100px;
  font-family: var(--font); font-weight: 600; font-size: .9rem;
  border: none; cursor: pointer; white-space: nowrap;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, opacity .2s;
  text-decoration: none; color: inherit;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }

.btn-gradient {
  background: linear-gradient(135deg, var(--gp), var(--gm), var(--gc));
  color: #fff; box-shadow: 0 4px 20px rgba(132,50,255,.28);
}
.btn-gradient:hover { box-shadow: 0 8px 32px rgba(132,50,255,.42); color: #fff; }

.btn-ghost {
  background: var(--bg3); color: var(--ink);
  border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--bg2); color: var(--ink); }

.btn-white { background: #fff; color: var(--gp); }
.btn-white:hover { box-shadow: 0 8px 28px rgba(0,0,0,.15); color: var(--gp); }

.btn-sm  { padding: 8px 18px; font-size: .82rem; }
.btn-lg  { padding: 15px 32px; font-size: 1rem; }
.btn-xl  { padding: 18px 42px; font-size: 1.05rem; }

/* ===== NAV ===== */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 200;
  transition: background .3s, box-shadow .3s;
}
.nav.scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 var(--border);
}
.nav-inner {
  max-width: var(--max); margin: 0 auto;
  padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; color: var(--ink); flex-shrink: 0;
}
.brand-name {
  font-size: 1.1rem; letter-spacing: -.02em;
}
.brand sup, h1 sup, h2 sup, .ph-logo sup, .footer-brand sup {
  font-size: .5em; vertical-align: super; line-height: 0; font-weight: inherit;
}

.nav-links {
  display: flex; align-items: center; gap: 28px;
}
.nav-links a:not(.btn) {
  font-size: .875rem; font-weight: 500; color: var(--ink2);
  transition: color .2s;
}
.nav-links a:not(.btn):hover { color: var(--ink); }

/* Right controls group */
.nav-controls {
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}

/* Theme toggle */
.theme-btn {
  width: 38px; height: 38px; border-radius: 100px;
  background: var(--bg3); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: var(--ink2);
  transition: background .2s, color .2s, border-color .2s;
  flex-shrink: 0;
}
.theme-btn:hover { background: var(--bg2); color: var(--ink); }
.icon-sun  { display: block; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* Language dropdown */
.lang-drop { position: relative; }
.lang-drop-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 100px;
  background: var(--bg3); border: 1px solid var(--border);
  font-family: var(--font); font-size: .82rem; font-weight: 600;
  color: var(--ink); cursor: pointer;
  transition: background .2s, border-color .2s;
}
.lang-drop-btn:hover { background: var(--bg2); }
/* LANGUE-SANS-GLOBE (23/09/2026) : plus de globe ; le seul SVG du bouton est le chevron (`.lang-caret`). */
.lang-drop-btn .lang-flag { flex-shrink: 0; }
.lang-caret { color: var(--ink3); flex-shrink: 0; transition: transform .2s; }
.lang-drop[open] .lang-caret { transform: rotate(180deg); }

.lang-drop-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 6px;
  min-width: 148px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
  z-index: 300;
  animation: drop-in .15s ease;
}
[data-theme="dark"] .lang-drop-menu { box-shadow: 0 8px 32px rgba(0,0,0,.5); }

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.lang-opt {
  display: flex; align-items: center; gap: 9px;
  width: 100%; padding: 9px 12px; border: none;
  background: none; border-radius: var(--r-md);
  font-family: var(--font); font-size: .85rem; font-weight: 500;
  color: var(--ink); cursor: pointer;
  transition: background .15s;
}
.lang-opt:hover { background: var(--bg3); }
.lang-opt.active {
  background: linear-gradient(135deg, rgba(132,50,255,.1), rgba(0,213,255,.1));
  color: var(--gp);
}
.lang-opt span { font-size: 1.1rem; }

/* Mobile hamburger */
.nav-menu {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.nav-menu span {
  display: block; width: 22px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: all .25s;
}

/* ===== HERO ===== */
.hero {
  min-height: 100svh; display: flex; align-items: center;
  position: relative; overflow: hidden; padding-top: 80px;
}
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.orb { position: absolute; border-radius: 50%; filter: blur(72px); }
.orb-1 {
  width: 640px; height: 640px;
  background: radial-gradient(circle, rgba(132,50,255,.13), transparent 68%);
  top: -160px; right: -80px;
}
.orb-2 {
  width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(0,213,255,.09), transparent 68%);
  bottom: -80px; left: -60px;
}
.orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(90,107,255,.08), transparent 68%);
  top: 40%; left: 40%;
}
.hero-inner {
  max-width: var(--max); margin: 0 auto; padding: 80px 28px 100px;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 64px; width: 100%;
}
.hero-text h1 {
  font-size: clamp(2.5rem, 4.8vw, 4rem);
  font-weight: 900; line-height: 1.06; letter-spacing: -.035em;
  margin-bottom: 20px; color: var(--ink);
}
.hero-text h1 em {
  font-style: normal;
  background: linear-gradient(105deg, var(--gp) 0%, var(--gm) 50%, var(--gc) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  /* Honour \n in i18n strings as a visual line break */
  white-space: pre-line;
}
.hero-lead {
  font-size: 1.08rem; color: var(--ink2);
  max-width: 440px; margin-bottom: 32px; line-height: 1.7;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.hero-footnote { font-size: .8rem; color: var(--ink3); margin-top: 12px; }

/* ===== COUNTDOWN ===== */
.countdown {
  display: flex; align-items: center; gap: 6px;
  margin-bottom: 20px; flex-wrap: wrap;
}
.cd-unit { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.cd-num {
  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 900; letter-spacing: -.04em; line-height: 1;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  background-color: var(--card-bg);
  border: 1.5px solid var(--card-border);
  border-radius: var(--r-card); padding: 12px 16px; min-width: 68px; text-align: center;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), var(--shadow-card);
  transition: box-shadow .3s;
}
[data-theme="dark"] .cd-num { box-shadow: inset 0 1px 0 rgba(255,255,255,.06), var(--shadow-card); }
.cd-label { font-size: .64rem; font-weight: 700; letter-spacing: .12em; color: var(--ink3); text-transform: uppercase; }
.cd-sep {
  font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  opacity: .45; margin-bottom: 20px; margin-top: 8px;
}
.cd-progress-wrap { margin-bottom: 26px; max-width: 380px; }
.cd-progress-bar { height: 4px; background: var(--bg3); border-radius: 100px; overflow: hidden; margin-bottom: 7px; }
.cd-progress-fill { height: 100%; background: linear-gradient(90deg, var(--gp), var(--gc)); border-radius: 100px; transition: width 1s ease; width: 0%; }
.cd-progress-labels { display: flex; justify-content: space-between; font-size: .72rem; font-weight: 600; color: var(--ink3); }

.hero-signup { max-width: 460px; margin-bottom: 16px; }
.hero-signup-label { font-size: .88rem; font-weight: 600; color: var(--ink2); margin-bottom: 12px; }

/* ===== PHONE MOCKUP ===== */
/* Top-align the phone so it feels anchored at the top of the hero — not floating in the middle */
.hero-device {
  display: flex; justify-content: center; align-items: flex-start;
  position: relative;
  align-self: start;   /* overrides the parent grid's align-items:center for this column */
  padding-top: 8px;    /* subtle offset from the very top of the hero-inner padding */
}
.phone { position: relative; z-index: 1; }
.phone-shadow {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 80%, rgba(132,50,255,.22), transparent 65%);
  filter: blur(32px); z-index: 0; pointer-events: none;
}
.phone-frame {
  width: 290px; background: #16181C; border-radius: 50px; padding: 10px 10px 6px;
  position: relative; z-index: 1;
  box-shadow: 0 0 0 1px rgba(255,255,255,.09), var(--shadow-phone), inset 0 1px 0 rgba(255,255,255,.08);
}
.phone-island {
  width: 92px; height: 26px; background: #16181C;
  border-radius: 0 0 18px 18px;
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); z-index: 4;
}
.phone-screen { background: #0D0D10; border-radius: 42px; overflow: hidden; position: relative; }
.phone-bar { width: 96px; height: 4px; background: rgba(255,255,255,.18); border-radius: 2px; margin: 8px auto 4px; }

.phone-screen--placeholder {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 18px; height: 100%; min-height: 500px;
  background: #0A0A0C; position: relative; overflow: hidden;
}
.ph-glow {
  position: absolute; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(132,50,255,.32) 0%, rgba(0,213,255,.12) 50%, transparent 72%);
  top: 50%; left: 50%; transform: translate(-50%,-56%);
  filter: blur(28px); pointer-events: none;
  animation: pulse-glow 4s ease-in-out infinite;
}
@keyframes pulse-glow {
  0%,100% { opacity: .7; transform: translate(-50%,-56%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%,-56%) scale(1.1); }
}
.ph-logo { display: flex; flex-direction: column; align-items: center; gap: 12px; position: relative; z-index: 1; }
.ph-logo img { width: 56px; height: 56px; filter: drop-shadow(0 0 16px rgba(132,50,255,.65)); }
.ph-logo span { font-size: 14px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.ph-hint { font-size: 11px; color: rgba(255,255,255,.32); font-weight: 500; position: relative; z-index: 1; letter-spacing: .03em; }
.ph-greeting-rotator {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  position: relative; z-index: 1; text-align: center;
  padding: 0 20px; min-height: 72px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .55s ease, transform .55s ease;
}
.ph-greeting-rotator.is-visible { opacity: 1; transform: translateY(0); }
.ph-greeting-text {
  font-size: 20px; font-weight: 300; font-style: italic;
  color: rgba(255,255,255,.88); line-height: 1.35;
  letter-spacing: .01em;
}
.ph-greeting-meta {
  font-size: 11px; font-weight: 500;
  color: rgba(255,255,255,.55); max-width: 240px;
}
.ph-greeting-region {
  font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(0,213,255,.72);
}
.ph-dots { display: flex; gap: 7px; position: relative; z-index: 1; }
.ph-dots span {
  display: block; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  animation: dot-pulse 1.6s ease-in-out infinite;
}
.ph-dots span:nth-child(2) { animation-delay: .25s; }
.ph-dots span:nth-child(3) { animation-delay: .5s; }
@keyframes dot-pulse {
  0%,100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}

/* ===== MARQUEE ===== */
.marquee-wrap {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--bg2); overflow: hidden; padding: 13px 0;
}
.marquee-track { overflow: hidden; }
.marquee {
  display: flex; align-items: center; gap: 22px; white-space: nowrap;
  animation: marquee 32s linear infinite;
  font-size: .82rem; font-weight: 600; color: var(--ink2); width: max-content;
}
.marquee b {
  background: linear-gradient(90deg, var(--gp), var(--gc));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight: 700;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== FEATURES ===== */
.features { max-width: var(--max); margin: 0 auto; padding: 96px 28px; }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head h2 {
  font-size: clamp(1.9rem, 3vw, 2.8rem); font-weight: 900;
  letter-spacing: -.03em; line-height: 1.15; color: var(--ink);
  white-space: pre-line;
}

/* Bento */
/* ☠️ ORDRE DU FONDATEUR (22/09/2026) : sur www « un bloc reste seul sur sa ligne » — la carte « More services ».
   C'est le MEME defaut que la grille de Culture, corrigee le 21/09 (« avoir un 5e bloc seul sur une ligne comme ca
   n'est pas beau »), et il se corrige de la MEME maniere : un rail dont chaque rangee est PLEINE.
   MESURE AVANT (rail de 3 pistes, 8 cartes dont deux larges aux places 1 et 4) : [large+1] [1+large] [1+1+1] puis
   « More services » SEULE sur la quatrieme rangee, une piste sur trois occupee. Au-dessous de 961 px il n'y avait
   deja pas d'orpheline (2 pistes puis 1) : le defaut est EXCLUSIVEMENT au-dessus de 960 px.
   LA REGLE : un rail de SIX pistes, comme Culture et Kongossas. Une carte normale en occupe 2 (trois par rangee,
   la meme largeur qu'avant), une carte large 4 (deux tiers, la meme qu'avant) — et la DERNIERE prend toute la
   rangee au lieu d'y rester seule. Rangees : 4+2 | 2+4 | 2+2+2 | 6. Aucune n'est trouee.
   ☠️ Cette derniere regle vaut POUR CETTE SUITE DE CARTES : elle est juste tant que la derniere carte serait
   orpheline. Le banc `wwwBentoSansOrpheline` lit la suite REELLE de `public/index.html` et recalcule les rangees —
   ajouter ou retirer une carte le fait ROUGIR en nommant la rangee trouee, au lieu de laisser le defaut revenir. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.bcard {
  grid-column: span 2;
  background: var(--card-bg); border: 1px solid var(--card-border);
  border-radius: var(--r); padding: 28px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
  overflow: hidden;
}
.bcard:hover {
  border-color: rgba(132,50,255,.25);
  box-shadow: 0 12px 48px rgba(132,50,255,.09);
  transform: translateY(-3px);
}
[data-theme="dark"] .bcard:hover {
  box-shadow: 0 12px 48px rgba(132,50,255,.18);
}
.bcard-wide {
  grid-column: span 4;
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center;
}
/* ☠️ LA DERNIERE CARTE NE RESTE PAS SEULE : au-dessus de 960 px elle prend la rangee entiere. Palier DISJOINT des
   deux autres (min-width) : aucune regle n'a a en vaincre une autre par la specificite. */
@media (min-width: 961px) {
  .bento > .bcard:last-child { grid-column: 1 / -1; }
}

/* Icons */
.bcard-icon {
  width: 56px; height: 56px; border-radius: var(--r-card);
  background: var(--bg); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px; box-shadow: 0 2px 12px rgba(0,0,0,.08); overflow: hidden;
}
[data-theme="dark"] .bcard-icon { background: var(--bg3); box-shadow: 0 2px 12px rgba(0,0,0,.3); }
.bcard-icon img { width: 42px; height: 42px; object-fit: contain; }
.bcard-icon--lg { width: 64px; height: 64px; border-radius: var(--r-card); margin-bottom: 18px; }
.bcard-icon--lg img { width: 50px; height: 50px; }

.bcard h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); margin-bottom: 9px; }
.bcard p { font-size: .88rem; color: var(--ink2); line-height: 1.65; }

/* Visuals */
.bcard-vis { border-radius: var(--r-card); overflow: hidden; }
.bcard-vis-social {
  background: var(--bg); border: 1px solid var(--border);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
[data-theme="dark"] .bcard-vis-social { background: var(--bg3); }
.s-post { display: flex; align-items: center; gap: 10px; }
.s-av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--gp), var(--gc)); flex-shrink: 0; }
.s-lines { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.s-line { height: 8px; background: var(--bg3); border-radius: 4px; }
.s-body { display: flex; flex-direction: column; gap: 6px; }
/* Shimmer skeleton animation */
.s-shimmer {
  background: linear-gradient(90deg, var(--bg3) 25%, var(--bg2) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
  animation: s-wave 1.8s ease-in-out infinite;
}
[data-theme="dark"] .s-shimmer {
  background: linear-gradient(90deg, var(--bg3) 25%, rgba(255,255,255,.07) 50%, var(--bg3) 75%);
  background-size: 200% 100%;
}
@keyframes s-wave {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.s-react { display: flex; gap: 10px; font-size: 11px; color: var(--ink2); }

/* ===== Kongossas AUDIO POST mock — reproduces the in-app gradient player ===== */
/* The widget sets its own inline alignment: a centred host section must not reach inside it. */
[data-kp-post] { text-align: start; }
.bcard-vis-audio { gap: 12px; }
.kp-head { display: flex; align-items: center; gap: 10px; }
.kp-av {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  /* The face is an <img>: crop it to the disc, and keep the gradient as the only fallback. */
  object-fit: cover;
}
.kp-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kp-name { font-size: 12.5px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.kp-sub  { font-size: 10.5px; font-weight: 600; color: var(--gp); line-height: 1.1; }
[data-theme="dark"] .kp-sub { color: var(--gc); }

/* gradient shell */
.kp-audio {
  position: relative;
  border-radius: var(--r-card);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: linear-gradient(120deg, var(--gp), var(--gc));
  box-shadow: 0 10px 26px rgba(132,50,255,.28);
}
.kp-audio::before {                       /* top-left white radial glow */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 120% at 22% 18%, rgba(255,255,255,.22), transparent 55%);
  pointer-events: none;
}

/* timer pill (top-left) + language badge (top-right) */
.kp-timer, .kp-lang {
  position: absolute; top: 10px; z-index: 3;
  font-size: 10px; font-weight: 700; color: #fff;
  background: rgba(0,0,0,.45); border-radius: 999px;
  padding: 3px 9px; letter-spacing: .2px; backdrop-filter: blur(2px);
}
.kp-timer { left: 10px; font-variant-numeric: tabular-nums; }
.kp-lang  { right: 10px; }

/* play button — HEARTBEAT (double-beat) while idle to invite a tap; the beat
   stops once playback starts (the spectrum then carries the motion). */
.kp-play {
  position: absolute; top: 42%; left: 50%;
  width: 64px; height: 64px; transform: translate(-50%, -50%);
  border-radius: 50%; background: rgba(255,255,255,.25);
  display: flex; align-items: center; justify-content: center; z-index: 2;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  animation: kp-heartbeat 1.6s ease-in-out infinite;
}
.kp-play:hover { background: rgba(255,255,255,.34); }
.kp-play:active { animation: none; transform: translate(-50%, -50%) scale(.94); }
.kp-play svg { width: 34px; height: 34px; margin-left: 3px; pointer-events: none; }
/* a real pause has two centred bars, so kill the play-triangle's optical offset */
.kp-audio.is-playing .kp-play svg { margin-left: 0; }
/* once playing, the play button settles (no heartbeat) */
.kp-audio.is-playing .kp-play { animation: none; }
@keyframes kp-heartbeat {
  0%, 42%, 100% { transform: translate(-50%, -50%) scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,.32); }
  12%           { transform: translate(-50%, -50%) scale(1.17); }
  24%           { transform: translate(-50%, -50%) scale(1.02); }
  34%           { transform: translate(-50%, -50%) scale(1.12); box-shadow: 0 0 0 15px rgba(255,255,255,0); }
}

/* waveform — a bit larger spectrum */
.kp-wave {
  position: absolute; left: 50%; bottom: 52px; transform: translateX(-50%);
  width: 90%; height: 64px; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: 4px;
}
.kp-wave span {
  width: 4.5px; border-radius: 2.5px; height: var(--h);
  background: rgba(255,255,255,.30);
  transition: background .18s ease, transform .18s ease;
}
/* PLAYBACK PROGRESS — bars to the LEFT of the playhead are bright; the JS demo
   advances `.played` left→right so the spectrum visually "fills" as it plays. */
.kp-wave span.played { background: #fff; }
.kp-audio.is-playing .kp-wave span.played { animation: kp-eq .9s ease-in-out infinite; }
.kp-audio.is-playing .kp-wave span.played:nth-child(2n) { animation-delay: .15s; }
.kp-audio.is-playing .kp-wave span.played:nth-child(3n) { animation-delay: .30s; }
.kp-audio.is-playing .kp-wave span.played:nth-child(4n) { animation-delay: .45s; }
@keyframes kp-eq { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1.12); } }

/* bottom controls: PiP (left) · 1.25× (center) · volume (right) */
.kp-ctl {
  position: absolute; bottom: 12px; z-index: 3;
  height: 30px; min-width: 30px; border-radius: 999px;
  background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 11px; font-weight: 700;
}
.kp-ctl svg { width: 17px; height: 17px; }
.kp-pip   { left: 12px;  width: 30px; }
.kp-speed { left: 50%; transform: translateX(-50%); padding: 0 11px; letter-spacing: .3px; }
.kp-vol   { right: 12px; width: 30px; }

/* rotating local-language name in the speaker line */
.kp-lang-rot { font-weight: 800; color: var(--gp); }
[data-theme="dark"] .kp-lang-rot { color: var(--gc); }

/* engagement bar (just under the gradient) — ICON ONLY, app order:
   Comment · Rekongoss · Like · Views · Bookmark · Share */
.kp-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 4px; padding: 6px 2px 0;
}
.kp-act {
  position: relative;
  display: flex; align-items: center; gap: 4px; color: var(--ink2);
  cursor: pointer; user-select: none;
}
.kp-act svg { width: 19px; height: 19px; }
.kp-act-count { font-size: 11px; font-weight: 700; color: var(--ink2); font-variant-numeric: tabular-nums; }
.kp-act-like { color: #ec1c46; }                   /* heart "just pressed" = solid red */
[data-theme="dark"] .kp-act-like { color: #ec1c46; }

/* animated reaction bubble — pops ABOVE the Like button (a real like-press) */
.kp-react {
  position: absolute; bottom: calc(100% + 8px); left: -4px; z-index: 5;
  display: flex; gap: 5px; padding: 5px 9px;
  background: rgba(255,255,255,.98); border-radius: 999px;
  box-shadow: 0 10px 26px rgba(0,0,0,.22);
  transform-origin: bottom left;
  animation: kp-bubble-in 3.6s ease-in-out infinite;
}
.kp-react::after {                                  /* little tail pointing at Like */
  content: ""; position: absolute; left: 16px; bottom: -5px;
  width: 10px; height: 10px; background: inherit;
  border-radius: 2px; transform: rotate(45deg);
  box-shadow: 3px 3px 6px rgba(0,0,0,.10);
}
[data-theme="dark"] .kp-react { background: rgba(28,28,32,.98); }
.kp-react span {
  font-size: 16px; line-height: 1; display: inline-block;
  animation: kp-bob 1.6s ease-in-out infinite;
}
.kp-react span:nth-child(2) { animation-delay: .12s; }
.kp-react span:nth-child(3) { animation-delay: .24s; }
.kp-react span:nth-child(4) { animation-delay: .36s; }
.kp-react span:nth-child(5) { animation-delay: .48s; }
.kp-react span:nth-child(6) { animation-delay: .60s; }
/* keep it up while hovering the Like button — like a held press */
.kp-act-like:hover .kp-react { animation-play-state: paused; opacity: 1; }
@keyframes kp-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes kp-bubble-in {
  0%      { opacity: 0; transform: translateY(8px) scale(.78); }
  12%, 74%{ opacity: 1; transform: translateY(0)   scale(1);   }
  90%,100%{ opacity: 0; transform: translateY(6px) scale(.85); }
}

/* comment-mode strip */
.kp-modes {
  font-size: 11px; font-weight: 600; color: var(--ink2);
  text-align: center; letter-spacing: .2px;
}

@media (prefers-reduced-motion: reduce) {
  .kp-play, .kp-wave span.played, .kp-audio.is-playing .kp-wave span.played, .kp-react, .kp-react span { animation: none; }
  .kp-react { opacity: 1; }
}

.bcard-vis-chat {
  background: var(--bg2); padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.chat-b { padding: 8px 13px; border-radius: var(--r-card); font-size: 11.5px; max-width: 82%; }
.chat-in { background: var(--bg); border: 1px solid var(--border); color: var(--ink); align-self: flex-start; }
[data-theme="dark"] .chat-in { background: var(--bg3); }
.chat-out {
  display: flex; align-items: center; gap: 5px;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  color: #fff; font-weight: 600; align-self: flex-end;
}

.bcard-vis-card { display: flex; align-items: center; justify-content: center; padding: 8px 0; }
.vcard {
  width: 100%; max-width: 210px; height: 122px;
  border-radius: var(--r-card);
  background: linear-gradient(135deg, var(--gp) 0%, var(--gm) 50%, var(--gc) 100%);
  padding: 16px 18px; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 8px 28px rgba(132,50,255,.32);
}
.vcard-top { display: flex; justify-content: space-between; align-items: center; }
.vcard-type { font-size: 8.5px; font-weight: 700; opacity: .8; letter-spacing: .1em; text-transform: uppercase; }
.vcard-chip { opacity: .9; }
.vcard-num { font-size: 12.5px; font-weight: 600; letter-spacing: .12em; }
.vcard-bot { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; opacity: .9; }

.bcard-vis-billions {
  background: var(--bg); border: 1px solid var(--border);
  padding: 14px; display: flex; flex-direction: column; gap: 10px;
}
[data-theme="dark"] .bcard-vis-billions { background: var(--bg3); }
/* BILLIONS map SVG — Africa left, China right */
.b-map-svg {
  width: 100%; height: 82px; display: block;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, rgba(132,50,255,.04), rgba(0,213,255,.04));
}
[data-theme="dark"] .b-map-svg {
  background: linear-gradient(135deg, rgba(132,50,255,.07), rgba(0,213,255,.07));
}
/* Legacy rules kept for any lingering markup, harmless if unused */
.b-globe { height: 82px; position: relative; border-radius: var(--r-md); overflow: hidden; }
.b-arc-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.b-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.b-tags span {
  font-size: 11px; font-weight: 600; padding: 4px 10px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 100px; color: var(--ink2);
}
[data-theme="dark"] .b-tags span { background: var(--bg); }

/* ===== PREMIUM ===== */
.premium {
  background: linear-gradient(135deg, var(--gp) 0%, var(--gm) 48%, var(--gc) 100%);
  padding: 88px 28px; position: relative; overflow: hidden;
}
.premium-bg-ring {
  position: absolute; width: 600px; height: 600px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.1);
  top: 50%; right: -180px; transform: translateY(-50%); pointer-events: none;
}
.premium-bg-ring::before {
  content: ''; position: absolute; inset: 60px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.07);
}
.premium-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  align-items: center; gap: 64px; position: relative;
}
.premium-copy h2 {
  font-size: clamp(1.7rem, 2.8vw, 2.6rem); font-weight: 900; color: #fff;
  letter-spacing: -.03em; line-height: 1.2; margin-bottom: 14px;
}
.premium-line1 { font-size: clamp(1.7rem, 2.8vw, 2.6rem); display: block; opacity: .9; }
.premium-line2 {
  font-size: clamp(1.3rem, 2.2vw, 1.9rem);
  display: block; letter-spacing: .04em;
  font-weight: 900;
}
.premium-copy p { color: rgba(255,255,255,.78); font-size: 1.05rem; margin-bottom: 32px; line-height: 1.7; }

.premium-pills { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ppill {
  display: flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18);
  border-radius: 100px; padding: 10px 18px;
  color: #fff; font-weight: 600; font-size: .88rem;
  backdrop-filter: blur(12px); transition: background .2s, transform .2s;
  cursor: default;
}
.ppill:hover { background: rgba(255,255,255,.2); transform: scale(1.025); }
.ppill img { width: 24px; height: 24px; border-radius: var(--r-sm); object-fit: contain; }

/* ===== INVITE BLOCK ===== */
.invite-block {
  max-width: 480px; margin-bottom: 16px;
}
.invite-badge {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: #D97706;
  background: rgba(217,119,6,.1);
  border: 1px solid rgba(217,119,6,.3);
  border-radius: 100px;
  padding: 5px 14px;
  margin-bottom: 14px;
}
.invite-badge::before {
  content: '●'; font-size: .5em; color: #F59E0B;
  animation: dot-pulse 2.5s ease-in-out infinite;
}
[data-theme="dark"] .invite-badge {
  color: #FCD34D;
  background: rgba(253,211,77,.1);
  border-color: rgba(253,211,77,.22);
}
[data-theme="dark"] .invite-badge::before { color: #FCD34D; }

/* ===== FORMS ===== */
.wl-form { display: flex; flex-direction: column; gap: 10px; }
.wl-fields { display: flex; flex-direction: column; gap: 6px; margin-bottom: 4px; }
.wl-or {
  text-align: center; align-self: center;
  font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink3); padding: 2px 0;
}
.wl-input {
  width: 100%;
  padding: 14px 20px;
  /* Deliberately more opaque than --border so the field is clearly visible in both themes */
  border: 1.5px solid rgba(0,0,0,.22);
  border-radius: 100px;
  font-family: var(--font); font-size: .95rem;
  background: var(--bg); color: var(--ink);
  outline: none; transition: border-color .2s, box-shadow .2s;
}
[data-theme="dark"] .wl-input { border-color: rgba(255,255,255,.22); }
.wl-input:focus { border-color: var(--gp); box-shadow: 0 0 0 3px rgba(132,50,255,.18); }
.wl-input::placeholder { color: var(--ink3); }
.wl-status { font-size: .88rem; min-height: 1.4em; }
.wl-status.ok  { color: #16A34A; }
.wl-status.err { color: #DC2626; }
[data-theme="dark"] .wl-status.ok  { color: #4ADE80; }
[data-theme="dark"] .wl-status.err { color: #F87171; }

/* ===== PRESS SECTION ===== */
.press-section {
  padding: 44px 28px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--bg2);
}
.press-inner {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
}
.press-label {
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--ink3);
}
.press-logos {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: center;
}
.press-logo-link {
  display: flex; align-items: center; padding: 10px 20px;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--r-card);
  opacity: .75; transition: opacity .2s, transform .2s, box-shadow .2s;
}
.press-logo-link:hover {
  opacity: 1; transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0,0,0,.1);
}
[data-theme="dark"] .press-logo-link:hover { box-shadow: 0 6px 24px rgba(0,0,0,.4); }
.press-logo-img { height: 38px; max-width: 148px; object-fit: contain; }

/* Logos with transparent backgrounds designed for light mode (e.g. Alibaba orange, WIPO blue)
   need a white pill inner wrap in dark mode so the colors remain legible. */
.press-logo-pill {
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--r-sm); padding: 4px 10px;
}
/* Light mode: pill is transparent — logo shows on card's var(--bg) background */
[data-theme="light"] .press-logo-pill { background: transparent; padding: 0; }
/* Dark mode: wrap in white pill so orange/blue logos stay visible */
[data-theme="dark"] .press-logo-pill { background: #fff; }
.press-divider {
  width: 1px; height: 40px; background: var(--border); flex-shrink: 0;
}
.press-disclaimer {
  font-size: .68rem; color: var(--ink3); text-align: center;
  max-width: 480px; line-height: 1.5; font-style: italic;
}

/* ===== VERIFIED ID — IDENTITY & KYC ===== */
.rek-section {
  padding: 96px 28px;
  background: var(--bg2);
  border-top: 1px solid var(--border);
  overflow: hidden;
  position: relative;
}
/* Ambient orb behind card */
.rek-section::before {
  content: '';
  position: absolute;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132,50,255,.10) 0%, rgba(0,213,255,.05) 45%, transparent 70%);
  filter: blur(56px);
  top: 50%; left: 16%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rek-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  /* Align the Verified ID badge + sanctions constellation to the TOP of the row rather
     than vertically centred — visually cleaner, the badge no longer floats. */
  align-items: start;
  position: relative;
}

/* ── Left visual column ── */
.rek-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
/* Card */
.rek-card {
  width: 288px;
  /* White body + 4 px gradient stripe at the top via background-image.
     background-image is always clipped by border-radius (CSS spec §14.2),
     so no bleeding is possible — no ::before hack needed. */
  background-color: #fff;
  background-image: linear-gradient(90deg, var(--gp), var(--gm), var(--gc));
  background-size: 100% 4px;
  background-repeat: no-repeat;
  background-position: top center;
  border-radius: var(--r-card);
  padding: 26px 20px 18px; /* extra 4 px top padding to clear the stripe */
  box-shadow:
    0 2px 0 rgba(132,50,255,.08),
    0 8px 24px rgba(0,0,0,.08),
    0 32px 72px rgba(0,0,0,.12),
    0 0 0 1px rgba(0,0,0,.06);
  position: relative;
  z-index: 1;
  transition: transform .3s ease, box-shadow .3s ease;
}
.rek-card:hover {
  transform: translateY(-6px) rotate(.4deg);
  box-shadow:
    0 2px 0 rgba(132,50,255,.12),
    0 16px 40px rgba(0,0,0,.12),
    0 48px 96px rgba(132,50,255,.14),
    0 0 0 1px rgba(0,0,0,.06);
}
/* Card header */
.rek-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}
.rek-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: .9rem;
  letter-spacing: -.02em;
  box-shadow: 0 4px 12px rgba(132,50,255,.35);
}
.rek-id {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.rek-name {
  font-size: .88rem;
  font-weight: 800;
  color: #0D0D0E;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -.025em;
  line-height: 1.2;
}
.rek-verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .7rem;
  font-weight: 700;
  color: #059669;
  background: rgba(5,150,105,.08);
  border-radius: 100px;
  padding: 2px 8px 2px 5px;
  width: fit-content;
}
/* QR code — fixed dimensions, no aspect-ratio */
.rek-qr {
  background: #FAFAFA;
  border-radius: var(--r-card);
  padding: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(0,0,0,.06);
  margin-bottom: 14px;
}
.rek-qr-svg {
  display: block;
  width: 212px;
  height: 212px;
  flex-shrink: 0;
}
/* Card footer */
.rek-card-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.rek-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  color: #fff;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 13px;
  border-radius: 100px;
}
.rek-tag::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255,255,255,.85);
  animation: rek-dot-blink 1.4s ease-in-out infinite;
}
@keyframes rek-dot-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 4px rgba(255,255,255,.6); }
  50%       { opacity: .15; box-shadow: none; }
}
/* Decorative floating dots */
.rek-visual::before {
  content: '';
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,213,255,.12) 0%, transparent 70%);
  bottom: -40px; right: -20px;
  pointer-events: none;
}
.rek-visual::after {
  content: '';
  position: absolute;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(132,50,255,.10) 0%, transparent 70%);
  top: -30px; left: -10px;
  pointer-events: none;
}

/* ── Sanctions-screening "planets" orbiting the Verified ID badge ─────────
   Four sanctions bodies (UN / EU / US Treasury / UK HM Treasury) that every
   Verified ID is screened against, revolving on a single ring AROUND the card.
   Radius 264px > the card's half-diagonal, so the coins sweep fully around the
   badge WITHOUT ever overlapping it. Motion = a rotating carrier (transform:
   rotate, supported everywhere); each coin counter-rotates by the same amount
   so it stays upright while it revolves. Sits above the card (z-index). */
.rek-orbits {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;           /* centred origin = card centre */
  pointer-events: none;           /* never block the card; planets re-enable below */
  z-index: 5;                     /* above .rek-card (z-index 1) */
}
/* The visible orbital ring = the exact circle the coins travel on. */
.rek-ring {
  position: absolute;
  top: 50%; left: 50%;
  width: 528px; height: 528px;
  margin: -264px 0 0 -264px;
  border-radius: 50%;
  border: 1px dashed rgba(132,50,255,.20);
}
/* Rotating carrier — a zero-size point at the card centre that spins. Each planet is
   placed on the ring by its positioner (rotate by its --a angle, push out by the radius,
   then un-rotate so the coin frame is level), and the coin itself counter-rotates the
   carrier's spin so it always stays upright. Works for any number of evenly-spaced coins. */
.rek-orbit {
  position: absolute;
  top: 50%; left: 50%;
  width: 0; height: 0;
  animation: rek-spin 80s linear infinite;
}
.rek-planet-pos {
  position: absolute;
  top: 0; left: 0;
  transform: rotate(var(--a)) translateY(-264px) rotate(calc(-1 * var(--a)));
}
.rek-planet {
  position: absolute;
  top: 0; left: 0;
  width: 48px; height: 48px;
  margin: -24px 0 0 -24px;        /* centre the coin on its ring anchor point */
  text-decoration: none;
  pointer-events: auto;           /* clickable even though the container isn't */
  animation: rek-spin-rev 80s linear infinite;  /* counter-rotate → stays upright */
}
@keyframes rek-spin     { to { transform: rotate(360deg); } }
@keyframes rek-spin-rev { to { transform: rotate(-360deg); } }

.rek-planet-coin {
  display: block;
  width: 48px; height: 48px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0,0,0,.20), 0 0 0 2px #fff, 0 0 0 3px rgba(132,50,255,.18);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rek-planet-coin img { display: block; width: 48px; height: 48px; border-radius: 50%; }
.rek-planet:hover .rek-planet-coin {
  transform: scale(1.14);
  box-shadow: 0 10px 24px rgba(132,50,255,.34), 0 0 0 2px #fff, 0 0 0 4px rgba(132,50,255,.45);
}
.rek-planet-code {
  position: absolute;
  top: 52px; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: .56rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #fff;
  background: rgba(26,21,48,.82);
  padding: 1px 7px;
  border-radius: 100px;
}

/* Scale the whole badge+orbit unit together on smaller screens so the orbit
   keeps clearing the card and never overflows the viewport. */
@media (max-width: 1024px) { .rek-visual { transform: scale(.82); } }
@media (max-width: 640px)  { .rek-visual { transform: scale(.64); } }
@media (max-width: 400px)  { .rek-visual { transform: scale(.52); } }

/* ── Right text column ── */
.rek-text {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.rek-eyebrow {
  display: inline-flex;
  align-items: center;
  background: linear-gradient(135deg, rgba(132,50,255,.12), rgba(0,213,255,.10));
  border: 1px solid rgba(132,50,255,.22);
  border-radius: 100px;
  padding: 5px 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--gp);
  width: fit-content;
}
[data-theme="dark"] .rek-eyebrow {
  background: linear-gradient(135deg, rgba(132,50,255,.18), rgba(0,213,255,.12));
  border-color: rgba(132,50,255,.28);
}
.rek-title {
  font-size: clamp(3rem, 5.5vw, 5rem);
  font-weight: 900;
  letter-spacing: -.05em;
  line-height: .95;
  background: linear-gradient(105deg, var(--gp) 0%, var(--gm) 48%, var(--gc) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0;
}
/* In dark mode, the base purple (#8432FF) is too dim on #09090B.
   Shift to lighter, high-contrast lavender → sky tones. */
[data-theme="dark"] .rek-title {
  background: linear-gradient(105deg, #C084FC 0%, #818CF8 46%, #38BDF8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.rek-lead {
  font-size: .98rem;
  color: var(--ink2);
  line-height: 1.78;
  max-width: 480px;
}
.rek-lead em {
  font-style: normal;
  font-weight: 700;
  color: var(--ink);
}
.rek-points {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 4px;
}
.rek-point {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  font-size: .92rem;
  color: var(--ink2);
  line-height: 1.55;
  font-weight: 500;
}
.rek-point-check {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: .65rem;
  font-weight: 900;
  margin-top: 1px;
  box-shadow: 0 3px 10px rgba(132,50,255,.28);
}

/* ── Verified ID Responsive ── */
@media (max-width: 960px) {
  .rek-section { padding: 80px 28px; }
  .rek-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .rek-visual { order: -1; }
  .rek-text { align-items: center; }
  .rek-lead { margin: 0 auto; }
  .rek-points { text-align: left; max-width: 440px; }
  .rek-section::before { left: 50%; }
}
@media (max-width: 640px) {
  .footer-grid { grid-template-columns: 1fr; }
  .footer-col-brand { grid-column: span 1; }

  .rek-section { padding: 60px 18px; }
  .rek-card { width: 268px; }
  .rek-qr-svg { width: 196px; height: 196px; }
}
@media (max-width: 380px) {
  .rek-card { width: 248px; padding: 18px 16px 14px; }
  .rek-qr-svg { width: 176px; height: 176px; }
}

/* ===== TRUST SECTION ===== */
.trust-section {
  padding: 80px 28px;
  background: var(--bg);
  border-top: 1px solid var(--border);
}
.trust-inner {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center;
}
.trust-main {
  display: flex; flex-direction: column; gap: 20px;
}
.trust-shield {
  width: 56px; height: 56px; flex-shrink: 0;
}
.trust-title {
  font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900;
  letter-spacing: -.03em; color: var(--ink); line-height: 1.15;
}
.trust-body {
  font-size: 1rem; color: var(--ink2); line-height: 1.7; max-width: 460px;
}
.trust-badges {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px;
}
.trust-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 100px; padding: 6px 14px;
  font-size: .82rem; font-weight: 600; color: var(--ink2);
}
/* CNI Card */
.trust-cni-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 32px 28px;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-card);
  position: relative; overflow: hidden;
}
.trust-cni-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(132,50,255,.06) 0%, rgba(0,213,255,.04) 100%);
  pointer-events: none;
}
.trust-cni-icon {
  font-size: 2.4rem; line-height: 1;
}
.trust-cni-title {
  font-size: 1.15rem; font-weight: 800;
  color: var(--ink); letter-spacing: -.02em; line-height: 1.3;
}
.trust-cni-body {
  font-size: .9rem; color: var(--ink2); line-height: 1.65;
}
.trust-cni-steps {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 4px;
}
.trust-cni-step {
  display: flex; align-items: center; gap: 12px;
  font-size: .88rem; color: var(--ink2); font-weight: 500;
}
.trust-cni-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  border-radius: 50%;
  font-size: .75rem; font-weight: 800; color: #fff;
}

/* Trust section responsive */
@media (max-width: 960px) {
  .trust-inner { grid-template-columns: 1fr; gap: 36px; }
  .trust-main { align-items: center; text-align: center; }
  .trust-body { margin: 0 auto; }
  .trust-badges { justify-content: center; }
}
@media (max-width: 640px) {
  .trust-section { padding: 60px 18px; }
  .trust-cni-card { padding: 24px 20px; }
  .trust-title { font-size: clamp(1.4rem, 6vw, 1.8rem); }
}

/* ===== INTL-TEL-INPUT — ce qui est PROPRE au champ en pilule de l'accueil ===== */
/* ☠️ 11/09 — le menu des pays (drapeaux ronds, coins arrondis, recherche, clair/sombre, arabe) vit
   dans /css/phone-input.css, PARTAGÉ avec mm-phone.js et countryPicker.js : une seule feuille. Ne
   reste ici que la pilule du formulaire d'invitation, en propriétés LOGIQUES (en arabe, le drapeau
   et son indicatif passent à droite : la bibliothèque 18.5.3 le fait d'elle-même). */
.wl-fields .iti { --mmp-field-radius: 100px; }
.iti input[type="tel"].wl-input { border-radius: 100px; }
/* With separateDialCode the library injects the start padding via JS; keep a minimum. */
.iti--separate-dial-code input[type="tel"].wl-input {
  padding-inline-start: 108px !important; /* flag(~36) + dial-code(~52) + gap(~20) */
}
/* ☠️ MENU-MOBILE-5 ① (16/09/2026) — EN ARABE, LE REMBOURRAGE PASSE DE L'AUTRE CÔTÉ, SINON LE NUMÉRO DÉBORDE.
   MESURÉ (banc local, 375 x 667, `?lang=ar`) AVANT : padding-left 108px ET padding-right 108px, zone utile 95px sur 311 ;
   671234567 depassait de 2px, 12025550187 de 22px — le debut du numero sortait du champ. TEMOIN en francais, meme page,
   meme champ : 108 / 6, zone utile 197, debordement 0. APRES : 6 / 106, zone utile 199, debordement 0, hauteur 49px.
   CAUSE : la bibliotheque decide du cote du drapeau sur l'ANCETRE (`[dir=rtl]` dans sa feuille, `closest("[dir=rtl]")`
   dans son script, qui pose lui-meme `padding-right` EN LIGNE) ; or la `direction` PROPRE de tout `input[type="tel"]`
   vaut `ltr` (feuille de l'agent utilisateur, MESURE), donc la regle ci-dessus rembourrait toujours la GAUCHE — le cote
   ou il n'y a RIEN sur une page arabe — en ecrasant par son `!important` le `padding-left: 6px` de la bibliotheque.
   Le drapeau, lui, RESTE a droite en arabe : c'est le miroir voulu, deja ecrit plus haut dans cette feuille.
   Proprietes LOGIQUES seulement (garde phoneFlagsCircle ⑦). Gardes : champTelRembourrageRtl.test.ts (propriete, sur les
   4 sites et les 2 hotes) et intlTelInputVendorise ⑪ (les 5 copies portent la meme declaration). */
[dir="rtl"] .iti--separate-dial-code input[type="tel"].wl-input {
  padding-inline-start: 6px !important; /* le drapeau est a DROITE : la gauche reste nue */
}


/* ===== VERIFIED ID QR CODE — MODULE BLINK ANIMATION ===== */
/* Selected data-module rects fade in/out like a scanner charging up */
@keyframes qrModBlink {
  0%, 100% { opacity: 1; }
  48%       { opacity: 0.06; }
  52%       { opacity: 0.06; }
}
.qr-ma {
  animation: qrModBlink 2.8s ease-in-out infinite;
}
/* each animated module has its own delay via inline style */

/* ===== BILLIONS STAT PILLS ===== */
.b-stats {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 14px; margin-bottom: 2px;
}
.b-stat {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: 100px; padding: 3px 10px;
  font-size: .72rem; font-weight: 700; color: var(--ink2);
  white-space: nowrap;
}
.b-stat strong { color: var(--ink); }
.b-stat-sum {
  background: linear-gradient(135deg, rgba(132,50,255,.1), rgba(0,213,255,.1));
  border-color: rgba(132,50,255,.22);
  color: var(--gp);
}
.b-stat-sum strong { color: var(--gp); }

/* ===== SUBMIT BUTTON LOADING SPINNER ===== */
.btn-loading {
  position: relative;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  pointer-events: none;
}
.btn-loading::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  border: 2.5px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btnSpin .7s linear infinite;
}
@keyframes btnSpin { to { transform: rotate(360deg); } }

/* ===== SUCCESS OVERLAY ===== */
.success-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(9,9,11,.8);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlayIn .3s ease;
}
.success-overlay[hidden] { display: none; }
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.success-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 52px 44px 44px;
  max-width: 540px; width: 100%;
  text-align: center;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(132,50,255,.14),
    0 8px 40px rgba(132,50,255,.12),
    0 32px 100px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation: panelUp .4s cubic-bezier(.22,1,.36,1);
}
@keyframes panelUp {
  from { opacity: 0; transform: translateY(28px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.success-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--ink2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.success-close:hover { background: var(--bg2); color: var(--ink); }

.success-arabic {
  font-size: 3.2rem; line-height: 1;
  background: linear-gradient(135deg, var(--gp), var(--gc));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 6px;
  font-weight: 900;
  letter-spacing: .02em;
  direction: rtl;
}
.success-title {
  font-size: clamp(2.2rem, 6vw, 3.6rem);
  font-weight: 900; letter-spacing: -.045em; line-height: 1.06;
  background: linear-gradient(105deg, var(--gp) 0%, var(--gm) 50%, var(--gc) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  margin-bottom: 8px;
}
[data-theme="dark"] .success-title {
  background: linear-gradient(105deg, #C084FC 0%, #818CF8 48%, #38BDF8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.success-subtitle {
  font-size: 1.05rem; font-weight: 700; color: var(--ink);
  margin-bottom: 22px; line-height: 1.4;
}
.success-icon-ring {
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(132,50,255,.1), rgba(0,213,255,.1));
  border: 1.5px solid rgba(132,50,255,.25);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  animation: ringPop .5s cubic-bezier(.22,1,.36,1) .25s both;
}
@keyframes ringPop {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
.success-body {
  font-size: .9rem; color: var(--ink2); line-height: 1.75;
  margin-bottom: 16px;
  max-width: 420px; margin-left: auto; margin-right: auto;
}
.success-note {
  font-size: .78rem; color: var(--ink3); line-height: 1.6;
  font-style: italic;
  margin-bottom: 28px;
  max-width: 380px; margin-left: auto; margin-right: auto;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,.045);
  border-left: 3px solid var(--accent);
}
[data-theme="light"] .success-note {
  background: rgba(0,0,0,.04);
}
.success-ok-btn { min-width: 160px; }

@media (max-width: 480px) {
  .success-panel { padding: 44px 24px 36px; border-radius: var(--r-card); }
  .success-arabic { font-size: 2.4rem; }
  .success-title { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* ===== SERVICE INFO — discreet (?) + universal explainer popup ===== */
/* Title row: keeps the service heading inline with its small (?) trigger
   without disturbing the heading's own spacing. */
.svc-title-row { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.svc-title-row > h3 { margin-bottom: 0; }
/* Verified ID uses a flex-gap column, so the row just sits as one gapped child. */
.rek-text .svc-title-row { margin-bottom: 0; }

.svc-help {
  flex: 0 0 auto;
  width: 19px; height: 19px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; margin: 0;
  font-size: .68rem; font-weight: 800; line-height: 1;
  font-family: inherit;
  color: var(--ink3);
  background: transparent;
  border: 1px solid var(--border);
  cursor: pointer;
  opacity: .65;
  transition: opacity .2s, color .2s, border-color .2s, background .2s;
}
.svc-help:hover, .svc-help:focus-visible {
  opacity: 1;
  color: var(--gp);
  border-color: rgba(132,50,255,.5);
  background: rgba(132,50,255,.08);
  outline: none;
}

/* Universal explainer popup — same visual language as .success-overlay */
.svc-modal-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(9,9,11,.8);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: overlayIn .3s ease;
}
.svc-modal-overlay[hidden] { display: none; }
.svc-modal-panel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  padding: 44px 40px 36px;
  max-width: 560px; width: 100%;
  max-height: 86vh; overflow-y: auto;
  text-align: left;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(132,50,255,.14),
    0 8px 40px rgba(132,50,255,.12),
    0 32px 100px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.06);
  animation: panelUp .4s cubic-bezier(.22,1,.36,1);
}
.svc-modal-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--ink2); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s;
}
.svc-modal-close:hover { background: var(--bg2); color: var(--ink); }
.svc-modal-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; padding-right: 28px; }
.svc-modal-icon {
  flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: var(--r-card);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(132,50,255,.12), rgba(0,213,255,.10));
  border: 1px solid rgba(132,50,255,.22);
}
.svc-modal-icon img { width: 30px; height: 30px; object-fit: contain; }
.svc-modal-icon[hidden] { display: none; }
.svc-modal-title {
  font-size: clamp(1.5rem, 4vw, 2rem);
  font-weight: 900; letter-spacing: -.03em; line-height: 1.1;
  background: linear-gradient(105deg, var(--gp) 0%, var(--gm) 50%, var(--gc) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
[data-theme="dark"] .svc-modal-title {
  background: linear-gradient(105deg, #C084FC 0%, #818CF8 48%, #38BDF8 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.svc-modal-body { font-size: .94rem; color: var(--ink2); line-height: 1.75; }
.svc-modal-points { list-style: none; margin: 18px 0 0; padding: 0; }
.svc-modal-points li {
  position: relative; padding-left: 26px; margin-bottom: 11px;
  font-size: .9rem; color: var(--ink2); line-height: 1.6;
}
.svc-modal-points li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--gp); font-weight: 800;
}
[data-theme="dark"] .svc-modal-points li::before { color: #C084FC; }
.svc-modal-points[hidden] { display: none; }
.svc-modal-ok { margin-top: 28px; min-width: 150px; }

@media (max-width: 480px) {
  .svc-modal-panel { padding: 38px 22px 30px; border-radius: var(--r-card); }
  .svc-modal-icon { width: 44px; height: 44px; }
  .svc-modal-icon img { width: 26px; height: 26px; }
}

/* ===== DOWNLOAD ===== */
.download {
  text-align: center; padding: 80px 28px 120px;
  background: var(--bg2); position: relative; overflow: hidden;
}
.dl-orb {
  position: absolute; width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(132,50,255,.08), transparent 68%);
  top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none;
}
.dl-orb-2 { width: 300px; height: 300px; background: radial-gradient(circle, rgba(0,213,255,.06), transparent 68%); top: 20%; left: 20%; }
.download h2 { font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 900; letter-spacing: -.03em; margin-bottom: 10px; position: relative; color: var(--ink); }
.download p { color: var(--ink2); font-size: 1rem; margin-bottom: 36px; position: relative; }
.download .btn { position: relative; }

/* ===== FOOTER ===== */
.footer {
  border-top: 1px solid var(--border);
  background: var(--bg2);
  padding: 64px 28px 0;
}
.footer-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}
.footer-col-brand {}
.footer-brand {
  display: flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: 1rem; color: var(--ink);
  margin-bottom: 14px;
}
.footer-tagline {
  font-size: .82rem; color: var(--ink3); line-height: 1.6;
  max-width: 300px; margin-bottom: 20px;
}
.footer-social {
  display: flex; gap: 10px; align-items: center;
}
.footer-social-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bg3); border: 1px solid var(--border);
  color: var(--ink2); transition: background .2s, color .2s, border-color .2s;
}
.footer-social-link:hover {
  background: var(--footer-social-hover-bg);
  color: #fff;
  border-color: var(--footer-social-hover-bg);
}
[data-theme="dark"] .footer-social-link:hover { color: #041014; }
.footer-col-nav h4 {
  font-size: .72rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink3); margin-bottom: 16px;
}
.footer-col-nav ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col-nav ul li a {
  font-size: .88rem; color: var(--ink2); transition: color .2s;
}
.footer-col-nav ul li a:hover { color: var(--ink); }
.footer-bottom {
  max-width: var(--max);
  margin: 0 auto;
  border-top: 1px solid var(--border);
  padding: 20px 0 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.footer-copy { font-size: .78rem; color: var(--ink3); }
.footer-acs-link { color: var(--footer-link); font-weight: 600; }
.footer-acs-link:hover { color: var(--footer-link-hover); text-decoration: underline; }
.footer-legal {
  display: flex; gap: 16px; flex-wrap: wrap;
}
.footer-legal a { font-size: .78rem; color: var(--ink3); transition: color .2s; }
.footer-legal a:hover { color: var(--ink); }
.footer-tm {
  font-size: .7rem; color: var(--ink3); letter-spacing: .01em;
  max-width: 100%; line-height: 1.6;
}
.footer-tm-link { color: var(--ink2); text-decoration: underline; }
.footer-tm-link:hover { color: var(--ink); }
.footer-domain { font-size: .76rem; font-weight: 700; letter-spacing: .07em; color: var(--ink2); }
.footer-note { font-size: .8rem; color: var(--ink3); max-width: 480px; line-height: 1.5; }

/* ===== ANIMATIONS ===== */
.fade-up {
  opacity: 0; transform: translateY(28px);
  transition: opacity .65s ease, transform .65s ease;
  transition-delay: var(--delay, 0s);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ===== RESPONSIVE ===== */

/* ── 960px: Tablet landscape ── */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }
  .footer-col-brand { grid-column: span 2; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 60px 28px 72px;
    gap: 48px;
  }
  .hero-lead { margin: 0 auto 28px; }
  .hero-actions { justify-content: center; }
  .countdown { justify-content: center; }
  .cd-progress-wrap { margin-left: auto; margin-right: auto; }

  /* Phone mockup — reset top-align when stacked (single-column) */
  .hero-device { align-self: auto; align-items: center; padding-top: 0; }

  /* Invite block — center in single-column layout */
  .invite-block {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .wl-form { align-items: stretch; }
  .wl-or { align-self: center; }
  #interest-submit { align-self: center; min-width: 240px; }

  /* Bento grid — deux cartes par rangee (3 pistes sur 6), une large en prend une entiere. Aucune orpheline. */
  .bcard { grid-column: span 3; }
  .bcard-wide { grid-column: span 6; grid-template-columns: 1fr; }

  /* Premium */
  .premium-inner { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .premium-pills { grid-template-columns: repeat(3, 1fr); }
}

/* ── 768px: Tablet portrait ── */
@media (max-width: 768px) {
  .nav-inner { padding: 14px 20px; }
  .features { padding: 72px 20px; }
  .premium { padding: 72px 20px; }
  .hero-device { order: -1; } /* Phone above text on tablet portrait */
}

/* ── 640px: Mobile landscape / large phones ── */
@media (max-width: 640px) {
  /* Nav */
  .nav-links { display: none; }
  .nav-menu { display: flex; }
  .nav-inner { padding: 13px 18px; }
  .nav-controls { gap: 6px; }
  /* LANGUE-SANS-GLOBE (23/09/2026) : sous 640px, le LIBELLE tombe, le drapeau RESTE (voir site-header.css). */
  .lang-drop-btn #lang-drop-label > span { display: none; }

  /* Hero */
  .hero-inner { padding: 52px 18px 64px; gap: 36px; }
  .hero-text h1 { font-size: clamp(2.1rem, 8.5vw, 2.9rem); }
  .hero-lead { font-size: 1rem; margin-bottom: 24px; }

  /* Countdown */
  .countdown { gap: 5px; }
  .cd-num { min-width: 58px; padding: 11px 13px; font-size: clamp(1.6rem, 7.5vw, 2.2rem); }
  .cd-progress-wrap { max-width: 100%; }

  /* Invite form */
  .invite-block { max-width: 100%; padding: 0; }
  .hero-signup-label { font-size: .84rem; }
  #interest-submit { width: 100%; justify-content: center; }
  .wl-input { padding: 13px 18px; font-size: .9rem; }

  /* Phone mockup */
  .phone-frame { width: 248px; }

  /* Bento — une colonne : toutes les rangees se ressemblent. */
  .bento { gap: 12px; }
  .bcard { grid-column: 1 / -1; }
  .bcard-wide { grid-column: 1 / -1; grid-template-columns: 1fr; }
  .bcard { padding: 22px 18px; }
  .bcard-vis-social,
  .bcard-vis-billions { margin-top: 16px; }

  /* Premium */
  .premium { padding: 60px 18px; }
  .premium-inner { gap: 32px; }
  .premium-pills { grid-template-columns: 1fr 1fr; gap: 8px; }
  .ppill { padding: 9px 14px; font-size: .84rem; }

  /* Press */
  .press-section { padding: 32px 18px; }
  .press-logos { gap: 10px; flex-direction: column; align-items: center; }
  .press-divider { display: none; }
  .press-logo-link { padding: 8px 18px; }
  .press-logo-img { height: 32px; }

  /* Download */
  .download { padding: 60px 18px 80px; }

  /* Footer */
  .footer { padding: 32px 18px 48px; }
  .footer-tm { font-size: .68rem; }
}

/* ── 480px: Standard phones ── */
@media (max-width: 480px) {
  .brand-name { font-size: 1rem; }

  .hero-inner { padding: 44px 16px 52px; gap: 32px; }
  .hero-text h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .hero-footnote { font-size: .75rem; }

  /* Countdown boxes smaller */
  .countdown { gap: 4px; }
  .cd-num {
    min-width: 52px;
    padding: 9px 10px;
    font-size: clamp(1.4rem, 7vw, 1.9rem);
    border-radius: var(--r-card);
  }
  .cd-sep { font-size: 1.2rem; margin-bottom: 16px; margin-top: 6px; }
  .cd-label { font-size: .58rem; letter-spacing: .1em; }

  /* Phone mockup */
  .phone-frame { width: 220px; }
  .phone-island { width: 78px; height: 22px; }
  .phone-screen--placeholder { min-height: 400px; }
  .ph-logo img { width: 46px; height: 46px; }

  /* Premium pills tighter */
  .ppill { padding: 8px 10px; font-size: .78rem; gap: 7px; }
  .ppill img { width: 20px; height: 20px; }
  .premium-copy h2 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
  .premium-copy p { font-size: .95rem; }

  /* Bento cards */
  .bcard { padding: 18px 16px; }
  .bcard-icon { width: 48px; height: 48px; border-radius: var(--r-card); margin-bottom: 14px; }
  .bcard-icon img { width: 36px; height: 36px; }
  .bcard-icon--lg { width: 54px; height: 54px; }
  .bcard-icon--lg img { width: 42px; height: 42px; }

  /* Download CTA */
  .btn-xl { padding: 15px 28px; font-size: .95rem; }
}

/* ── 380px: Very small phones (Galaxy Fold open, etc.) ── */
@media (max-width: 380px) {
  .nav-inner { padding: 12px 14px; }
  .brand-name { font-size: .9rem; }

  .hero-inner { padding: 40px 14px 48px; }
  .hero-text h1 { font-size: clamp(1.75rem, 8vw, 2.2rem); }

  .cd-num { min-width: 46px; padding: 8px 8px; font-size: 1.3rem; }
  .cd-sep { font-size: 1.1rem; }

  .phone-frame { width: 195px; }
  .phone-screen--placeholder { min-height: 360px; }

  .premium-pills { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ppill { padding: 7px 8px; font-size: .74rem; gap: 5px; }
  .ppill img { width: 18px; height: 18px; }
}

/* ── Pre-launch suspense landing (before June 25, 2026) ── */
html:not(.launch-live) body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html:not(.launch-live) main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
html:not(.launch-live) .hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
html:not(.launch-live) .footer {
  margin-top: auto;
}
html:not(.launch-live) .footer-bottom {
  border-top: 1px solid var(--border-subtle, rgba(255,255,255,.08));
  padding-top: 20px;
}
html:not(.launch-live) .nav-links:empty,
html:not(.launch-live) .nav-links:not([data-open]) {
  /* Nav links hidden pre-launch — keep controls aligned */
  gap: 0;
}

/* sr-only */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }