*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --w-xl:   1600px;   /* Navbar + full-width sections    */
  --w-wide: 1400px;   /* Content grids, pillars, cards   */
  --w-regular-small: 1100px;
  --w-regular: 1200px;
  --px: 32px;
  --bg:#050A12;--bg2:#080F1A;--bg3:#0C1525;--bg4:#0F1D30;
  --teal:#00C896;
  --teal2:#00A87D;
  --teal3:rgba(0,200,150,.10);
  --teal4:#014635; 
  --or:#FF7A35;--pu:#7C6FFF;--am:#FFC107;
  --t1:#F0F4F8;--t2:#8DA5C0;--t3:#6B8FAD;--t4:#4A6A87;
  --bdr:rgba(255,255,255,.06);--bdr2:rgba(0,200,150,.15);

  --ln:   rgba(255,255,255,.06);
  --ln2:  rgba(255,255,255,.10);
  --ln3:  rgba(255,255,255,.16);

  --ds-green-400-value: 153, 100%, 40%;
  --border:  1px solid var(--ln);
  --border2: 1px solid var(--ln2);
  --border3: 1px solid var(--ln3);
}
html{scroll-behavior:smooth;overflow-x:hidden;max-width:100%;}
body{font-family:'Bricolage Grotesque','IBM Plex Sans','DM Sans',system-ui,sans-serif;max-width: 100%;background:var(--bg);color:var(--t1);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.45;}
.f-syne{font-family:'Bricolage Grotesque',sans-serif;}.f-mono{font-family:'IBM Plex Mono',monospace;}
.w-wide{
  max-width:var(--w-regular);
  margin:0 auto;
  padding:0 32px;}
@media(max-width:768px){.w-wide{padding:0 20px;}}
@media(max-width:480px){.w-wide{padding:0 16px;}}

/* ═══════════════════════════════════════════════════
   NAV — transparent au top · opaque au scroll
═══════════════════════════════════════════════════ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 72px;

  /* Au top : transparent */
  background: rgba(5, 10, 18, 0);
  border-bottom: 1px solid transparent;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);

  transition:
    background .35s ease,
    border-color .35s ease,
    backdrop-filter .35s ease,
    box-shadow .35s ease,
    transform .35s ease;
}

/* Scrolled : fond opaque + bordure */
.nav--scrolled {
  background: rgba(5, 10, 18, 0.92);
  border-bottom: 1px solid var(--bdr);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, .25);
}

.nav--hidden {
  transform: none;
}

/* Inner layout */
.nav__in {
  padding: 0 32px;
  max-width: 1280px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--t1);
  text-decoration: none;
  letter-spacing: -.5px;
  flex-shrink: 0;
}

/* LOGO IMAGE */
.logo-img {
  width: auto;
  height: 48px;
  display: block;
  object-fit: contain;
  border-radius: 8px;
  transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-logo:hover .logo-img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

/* Accent */
.nav-logo-accent {
  color: var(--teal);
}

/* Liens */
.nav-links {
  display: flex;
  align-items: center;
  gap: 22px;
}

.nav-links a {
  font-size: 13px;
  font-weight: 600;
  color: var(--t2);
  text-decoration: none;
  transition: color .18s;
  position: relative;
  letter-spacing: .01em;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0; right: 0;
  height: 1px;
  background: var(--teal);
  transform: scaleX(0);
  transition: transform .2s ease;
  transform-origin: left;
}

.nav-links a:hover { color: var(--t1); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Droite */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.btn-lang {
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
  border: 1px solid var(--bdr);
  color: var(--t2);
  background: rgba(255,255,255,.02);
  cursor: pointer;
  border-radius: 999px;
  font-family: inherit;
  transition: border-color .2s, color .2s;
}

.btn-lang:hover {
  border-color: var(--teal);
  color: var(--teal);
}

.btn-primary--nav {
  font-size: 13px;
  padding: 10px 18px;
  min-height: 40px;
  white-space: nowrap;
  box-shadow: none;
}

/* Hamburger button — hidden on desktop */
.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 8px;
  background: none;
  border: 1px solid var(--bdr);
  border-radius: 8px;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--t1);
  border-radius: 2px;
  transition: transform .25s, opacity .25s;
}
.nav--open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav-burger span:nth-child(2) { opacity: 0; }
.nav--open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile dropdown menu */
.nav-mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  flex-direction: column;
  background: rgba(5,10,18,0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--bdr);
  padding: 16px 20px 24px;
  gap: 4px;
  z-index: 999;
}
.nav-mobile-menu a {
  font-size: 16px;
  font-weight: 600;
  color: var(--t2);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: color .2s;
}
.nav-mobile-menu a:last-child { border-bottom: none; }
.nav-mobile-menu a:hover { color: var(--t1); }
.nav-mobile-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 16px;
  font-size: 15px;
  padding: 14px 20px;
  box-sizing: border-box;
}

/* Mobile */
@media (max-width: 768px) {
  .nav-links { display: none; }
  .btn-primary--nav { display: none !important; }
  .nav { position: fixed; }
  .btn-primary--mobile-cta { display: inline-flex !important; }

  .nav__in {
  padding: 0 32px; padding: 0 20px; }
  .nav-logo { font-size: 18px; }
  .logo-img { height: 40px; }
  .nav-right { gap: 8px; }

  /* Hamburger */
  .nav-burger { display: flex; }

  /* Mobile menu open */
  .nav--open .nav-mobile-menu { display: flex; }

  /* Sur mobile : fond toujours visible */
  .nav {
    background: rgba(5, 10, 18, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--bdr);
  }
}
/* HERO */
.hero{width:100%;margin:0 auto;display:flex;align-items:center;position:relative;overflow:hidden;padding-top:72px;}
.hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 68% 50%,rgba(0,200,150,.08) 0%,transparent 60%),radial-gradient(ellipse 40% 40% at 15% 80%,rgba(255,122,53,.04) 0%,transparent 50%),var(--bg);z-index:0;}
.hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1180px;
  margin:0 auto;
  padding:96px 48px 68px;
  display:grid;
  align-items:center;
  gap:24px;
}
.hero-text {
  text-align: center;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto;
  min-width: 0;
}
@keyframes fadeUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:translateY(0);}}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.8);}}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--teal);border:1px solid rgba(0,200,150,.25);padding:7px 14px;border-radius:999px;background:rgba(0,200,150,.06);margin-bottom:24px;animation:fadeUp .8s ease both;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;}
.hero-eyebrow::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--teal);animation:pulse 2s infinite;}
.hero-h1{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(32px,3.6vw,52px);font-weight:800;line-height:.98;letter-spacing:-2.6px;color:var(--t1);margin-bottom:18px;animation:fadeUp .8s .1s ease both;width:100%;min-width:0;}
.hero-h1 .line1{display:block;}
.hero-h1 .accent{display:block;background:linear-gradient(135deg,var(--teal),#73ffd9);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.hero-h1 .line2{display:block;color:var(--t2);font-size:.4em;font-weight:500;line-height:1.22;letter-spacing:-.02em;width:100%;margin:14px auto 0;}
.hero-sub{max-width:700px;width:100%;display:block;font-size:clamp(15px,1.5vw,18px);color:var(--t2);font-weight:300;line-height:1.75;margin:0 auto 28px;animation:fadeUp .8s .2s ease both;}
.hero-sub strong{color:var(--t1);font-weight:500;}
.hero-ctas{display:flex;align-items:center;gap:14px;flex-wrap:wrap;animation:fadeUp .8s .3s ease both;margin-bottom:40px;justify-content:center;}
.btn-primary{display:inline-flex;align-items:center;gap:8px;font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:700;padding:13px 24px;background:var(--teal);color:var(--bg);border:none;border-radius:999px;cursor:pointer;text-decoration:none;transition:all .22s;}
.btn-primary:hover{background:var(--teal2);transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,200,150,.3);}
.btn-primary svg{width:16px;height:16px;}
.btn-secondary{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;padding:13px 24px;color:var(--t2);border:1px solid var(--bdr);border-radius:999px;cursor:pointer;text-decoration:none;background:transparent;transition:all .22s;}
.btn-secondary:hover{border-color:rgba(255,255,255,.15);color:var(--t1);}
.hero-proof{animation:fadeUp .8s .35s ease both;margin:0 auto 26px;max-width:760px;}
.hero-proof-label{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--t4);margin-bottom:12px;}
.hero-proof-grid{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:nowrap;}
.hero-proof-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--bdr);border-radius:999px;background:rgba(255,255,255,.02);color:var(--t1);font-size:13px;font-weight:600;white-space:nowrap;flex-shrink:0;}
.hero-proof-chip::before{content:'';width:6px;height:6px;border-radius:999px;background:linear-gradient(135deg,var(--teal),#73ffd9);box-shadow:0 0 0 4px rgba(0,200,150,.08);}
.hero-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;border:1px solid var(--bdr);border-radius:20px;overflow:hidden;animation:fadeUp .8s .4s ease both;max-width:760px;margin:0 auto;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01));}
.hero-stat{padding:18px 16px;text-align:center;}
.hero-stat-sep{width:1px;background:var(--bdr);}
.hs-val{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(20px,2.2vw,28px);font-weight:800;color:var(--t1);line-height:1;margin-bottom:8px;letter-spacing:-.04em;}
.hs-lbl{font-size:10px;color:var(--t3);font-family:'IBM Plex Mono',monospace;letter-spacing:1.2px;text-transform:uppercase;line-height:1.4;}


@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.hero-proof-track {
  display: inline-flex;
  gap: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.hero-proof-grid--marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);
  mask-image: linear-gradient(to right,transparent 0,black 40px,black calc(100% - 40px),transparent 100%);
}
.hero-proof-grid--marquee .hero-proof-track {
  animation: marquee 16s linear infinite;
}

/* HERO CARDS 3D */
.hero-3d {
  padding: 0 0 80px;
  position: relative;
}

.hero-visual{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  margin-bottom: 4vh;
  padding: 20px 0;
}
/* HeroDash Section */

/* ═══════════════════════════════════════════
   HERODASH v5 — 3D Stage + roles
   Desktop-first, responsive après
═══════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   HERODASH — screenshot browser mockup
   ═══════════════════════════════════════════════ */
.herodash {
  padding: 0 0 80px;
  position: relative;
  overflow: hidden;
}
.herodash::before {
  content: '';
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 1200px; height: 900px;
  background: radial-gradient(ellipse at 50% 35%,
    rgba(0,200,150,.1) 0%, rgba(0,200,150,.03) 50%, transparent 70%);
  pointer-events: none; z-index: 0;
}
@media (max-width: 540px) { .herodash { padding: 40px 0 60px; } }

/* ── Header ── */
.herodash-header {
  text-align: center; margin-bottom: 48px; position: relative; z-index: 1;
}
.herodash-title {
  font-size: clamp(26px, 3vw, 42px); font-weight: 800; line-height: 1.1;
  letter-spacing: -1px; color: var(--t1); margin-bottom: 16px;
}
.herodash-title em { font-style: italic; color: #00C896; }
.herodash-sub {
  font-size: clamp(13px, 1.2vw, 15px); color: var(--t2); font-weight: 300;
  line-height: 1.8; max-width: 600px; margin: 0 auto;
}

/* ── Accordion header/body (mobile-only concept) ── */
.hd-acc-header { display: none; } /* hidden on desktop */
.hd-acc-body   { display: block; } /* always open on desktop */
.hd-acc-stats  { display: none; } /* mobile stat bar hidden on desktop */

/* ── Segmented control ── */
.hd-seg-wrap {
  display: flex; justify-content: center; gap: 2px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 40px; padding: 4px; width: fit-content; margin: 0 auto 52px;
  position: relative; z-index: 1;
}
.hd-seg-btn {
  padding: 9px 30px; border-radius: 36px; border: none; background: none;
  color: var(--t3); font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: color .2s, background .25s; letter-spacing: .1px;
}
.hd-seg-btn:hover { color: var(--t2); }
.hd-seg-btn.on { background: rgba(0,200,150,.14); color: #00C896; }

/* ── Tabs wrapper ── */
.hd-tabs-wrap {
  position: relative; z-index: 1;
  max-width: 1060px; margin: 0 auto 56px;
}

/* ── Single tab (one at a time — desktop) ── */
.hd-tab {
  display: none;
  position: relative;
  animation: hd-tabIn .42s cubic-bezier(.22,.61,.36,1) both;
}
.hd-tab--active { display: block; }
@keyframes hd-tabIn {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Browser mockup ── */
.hd-browser {
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow:
    0 0 0 1px rgba(0,200,150,.18),
    0 40px 120px rgba(0,0,0,.72),
    0 0 80px rgba(0,200,150,.08),
    inset 0 1px 0 rgba(255,255,255,.08);
}
.hd-browser-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 16px;
  background: #0d1e36;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.hd-browser-dots { display: flex; gap: 6px; flex-shrink: 0; }
.hd-browser-dots span {
  display: block; width: 11px; height: 11px; border-radius: 50%;
}
.hd-browser-url {
  flex: 1; display: flex; align-items: center; gap: 6px;
  background: rgba(255,255,255,.06); border-radius: 7px;
  padding: 5px 12px; font-family: 'IBM Plex Mono', monospace;
  font-size: 11px; color: rgba(255,255,255,.38); max-width: 520px; margin: 0 auto;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hd-browser-url svg { width: 12px; height: 12px; flex-shrink: 0; }
.hd-browser-acts { flex-shrink: 0; }
.hd-browser-live {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 20px;
  background: rgba(0,200,150,.1); border: 1px solid rgba(0,200,150,.22);
  font-size: 9px; font-weight: 700; letter-spacing: .6px; color: #00C896;
}
.hd-browser-live span {
  display: block; width: 5px; height: 5px; border-radius: 50%;
  background: #00C896; animation: hd-pulse 1.8s ease-in-out infinite;
}
.hd-browser-screen {
  background: #F0F2F7; line-height: 0;
  height: 530px; overflow: hidden; position: relative;
}
.hd-browser-screen iframe {
  display: block; width: 1440px; height: 900px; border: none;
  transform: scale(0.735); transform-origin: top left;
  pointer-events: none;
}

/* ── Floating badge top-left ── */
.hd-float-badge {
  position: absolute; top: 58px; left: -18px;
  display: flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 30px;
  background: rgba(10,28,58,.9); border: 1px solid rgba(0,200,150,.3);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5), 0 0 0 1px rgba(0,200,150,.08);
  font-size: 12px; font-weight: 600; color: var(--t1);
  animation: hd-float 5s ease-in-out infinite;
  white-space: nowrap; z-index: 3;
}
.hd-float-badge-icon {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 8px;
  background: rgba(0,200,150,.15); color: #00C896; flex-shrink: 0;
}

/* ── Floating stats card (bottom-right) ── */
.hd-float-stats {
  position: absolute; bottom: -18px; right: -18px;
  display: flex; align-items: center; gap: 0;
  padding: 14px 20px;
  background: rgba(10,28,58,.92); border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px; backdrop-filter: blur(20px);
  box-shadow: 0 16px 50px rgba(0,0,0,.55), 0 0 0 1px rgba(0,200,150,.1);
  animation: hd-float 6s ease-in-out infinite .8s;
  z-index: 3;
}
.hd-fstat { text-align: center; padding: 0 16px; }
.hd-fstat-n {
  font-size: 22px; font-weight: 800; color: #00C896; line-height: 1;
  font-family: 'Bricolage Grotesque', sans-serif; margin-bottom: 3px;
}
.hd-fstat-l { font-size: 9.5px; color: var(--t3); white-space: nowrap; }
.hd-fstat-sep { width: 1px; height: 36px; background: rgba(255,255,255,.08); }

/* ── Floating live ticker (bottom-left) ── */
.hd-float-live {
  position: absolute; bottom: 40px; left: -10px;
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(10,28,58,.88); border: 1px solid rgba(0,200,150,.2);
  backdrop-filter: blur(16px);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
  font-size: 11px; color: var(--t2); font-weight: 500;
  animation: hd-float 7s ease-in-out infinite 1.4s;
  white-space: nowrap; z-index: 3;
}
.hd-float-live-dot {
  width: 7px; height: 7px; border-radius: 50%; background: #00C896; flex-shrink: 0;
  animation: hd-pulse 1.8s ease-in-out infinite;
}

/* ── Shared animations ── */
@keyframes hd-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}
@keyframes hd-pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .35; transform: scale(.6); }
}

/* ── Benefits strip ── */
.hd-benefits {
  display: flex; justify-content: center;
  border: 1px solid var(--bdr); border-radius: 14px; overflow: hidden;
  position: relative; z-index: 1;
}
.hd-ben-sep { display: none; }
.hd-ben {
  flex: 1; padding: 32px 20px 28px; border-right: 1px solid var(--bdr);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: 8px;
}
.hd-ben:last-child { border-right: none; }
.hd-ben-ic {
  width: 44px; height: 44px; border-radius: 12px;
  background: rgba(0,200,150,.08); border: 1px solid rgba(0,200,150,.18);
  display: flex; align-items: center; justify-content: center;
  color: #00C896; margin-bottom: 4px;
}
.hd-ben-ic svg { width: 20px; height: 20px; }
.hd-ben-title { font-size: 14px; font-weight: 700; color: var(--t1); letter-spacing: -.1px; }
.hd-ben-desc  { font-size: 12px; color: var(--t3); line-height: 1.5; }

/* ── Tablet ── */
@media (max-width: 1140px) and (min-width: 541px) {
  .hd-float-badge { display: none; }
  .hd-float-stats { right: 0; bottom: -14px; }
  .hd-float-live  { left: 0; }
  .hd-benefits { margin-top: 32px; }
}

/* ── Show/hide desktop vs mobile views ── */
.hd-mobile-view { display: none; }
.hd-desktop-view { display: block; }

/* ── Mobile accordion ── */
@media (max-width: 540px) {
  .hd-desktop-view { display: none; }
  .hd-mobile-view  { display: block; margin-bottom: 32px; }

  /* Accordion wrapper */
  #hd-accordion {
    display: flex; flex-direction: column; gap: 10px;
  }

  /* Each accordion item */
  .hd-acc-item {
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(8,14,28,.85);
    transition: border-color .25s;
  }
  .hd-acc-item--open {
    border-color: rgba(0,200,150,.3);
  }

  /* Header row */
  .hd-acc-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; cursor: pointer; user-select: none;
    background: none; border: none; width: 100%;
    -webkit-tap-highlight-color: transparent;
  }
  .hd-acc-role {
    display: flex; align-items: center; gap: 10px;
  }
  .hd-acc-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,.2); flex-shrink: 0;
    transition: background .25s;
  }
  .hd-acc-item--open .hd-acc-dot { background: #00C896; }
  .hd-acc-name {
    font-size: 14px; font-weight: 700; color: var(--t2); letter-spacing: -.1px;
    transition: color .2s;
  }
  .hd-acc-item--open .hd-acc-name { color: #00C896; }

  /* Right side of header */
  .hd-acc-meta { display: flex; align-items: center; gap: 10px; }
  .hd-acc-live-badge {
    display: flex; align-items: center; gap: 5px;
    padding: 3px 8px; border-radius: 20px;
    background: rgba(0,200,150,.08); border: 1px solid rgba(0,200,150,.2);
    font-size: 9px; font-weight: 700; letter-spacing: .5px; color: #00C896;
    opacity: 0; transition: opacity .25s;
  }
  .hd-acc-item--open .hd-acc-live-badge { opacity: 1; }
  .hd-acc-live-dot {
    width: 5px; height: 5px; border-radius: 50%; background: #00C896;
    animation: hd-pulse 1.8s ease-in-out infinite;
  }
  .hd-acc-arrow {
    width: 18px; height: 18px; flex-shrink: 0;
    stroke: var(--t3); fill: none; stroke-width: 2.2;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .28s cubic-bezier(.4,0,.2,1), stroke .2s;
  }
  .hd-acc-item--open .hd-acc-arrow { transform: rotate(180deg); stroke: #00C896; }

  /* Body: collapsed by default, open on active */
  .hd-acc-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .3s cubic-bezier(.4,0,.2,1);
  }
  .hd-acc-item--open .hd-acc-body { grid-template-rows: 1fr; }
  .hd-acc-body-inner { overflow: hidden; }

  /* Inner padding wrapper */
  .hd-acc-url {
    display: flex; align-items: center; gap: 6px;
    padding: 0 16px 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 10px; color: rgba(255,255,255,.35);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .hd-acc-url svg { width: 11px; height: 11px; flex-shrink: 0; }

  /* Stats row */
  .hd-acc-stats {
    display: flex; gap: 0; margin: 0 12px 12px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 10px; overflow: hidden;
  }
  .hd-acc-stat {
    flex: 1; padding: 10px 8px; text-align: center;
    border-right: 1px solid rgba(255,255,255,.07);
    background: rgba(8,14,28,.7);
  }
  .hd-acc-stat:last-child { border-right: none; }
  .hd-acc-stat-sep { width: 1px; background: rgba(255,255,255,.07); }
  .hd-acc-stat-n {
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 16px; font-weight: 800; color: #00C896;
    line-height: 1; margin-bottom: 2px;
  }
  .hd-acc-stat-l { font-size: 9px; color: var(--t3); }

  /* Live ticker */
  .hd-acc-ticker {
    display: flex; align-items: center; gap: 7px;
    padding: 0 16px 14px;
    font-size: 11px; color: var(--t3);
  }

  /* Benefits: column */
  .hd-benefits { flex-direction: column; border-radius: 12px; }
  .hd-ben {
    border-right: none; border-bottom: 1px solid var(--bdr);
    padding: 18px 16px; flex-direction: row;
    text-align: left; align-items: center; gap: 14px;
  }
  .hd-ben:last-child { border-bottom: none; }
  .hd-ben-ic { flex-shrink: 0; margin-bottom: 0; }
}
/*End of herodash styles*/
/* ── Hero cards (3D layered) ── */
/* ── Scene ── */

.hero-cards-wrapper{
  display:flex;justify-content:center;align-items:center;
  height:520px;position:relative;
  animation:hcFloat 7s ease-in-out infinite;
}
@keyframes hcFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}

.hero-cards-wrapper-inner{
  transform-style:preserve-3d;
  width:420px;height:420px;
  margin:0 auto;position:relative;
  transform:skew(1deg,-20deg) perspective(2000px) rotateX(-12deg) rotateY(39deg) rotateZ(4deg);
  will-change:transform;
}

/* ── Carte 01 — Moodle ── */
.hero-card-01{
  padding:28px;gap:14px;transform-style:preserve-3d;
  background:linear-gradient(135deg,#00c896 0%,#00a07a 50%,#007a5e 100%);
  border-radius:20px;flex-flow:column;justify-content:flex-end;align-items:flex-start;
  width:360px;height:340px;display:flex;position:absolute;
  transform:skew(1deg) translate3d(0,-12px,-345px);
  box-shadow:-10px -8px 0 var(--teal4), 0 24px 64px rgba(0,200,150,.25);
  transition:transform .35s cubic-bezier(.34,2.4,.64,1),filter .35s ease,box-shadow .35s ease;
  cursor:pointer;
}
.hero-card-01:hover{
  transform:skew(1deg) translate3d(0,-40px,-345px);
  filter:brightness(1.08);
  box-shadow:-12px -10px 0 var(--teal4), 0 32px 80px rgba(0,200,150,.35);
}

/* ── Carte 02 — WordPress ── */
.hero-card-02{
  padding:28px;gap:14px;
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  transform-style:preserve-3d;
  background:linear-gradient(135deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.18);
  border-radius:20px;flex-flow:column;justify-content:flex-end;align-items:flex-start;
  width:360px;height:340px;display:flex;position:absolute;
  transform:skew(1deg) translate3d(0,20px,-100px);
  box-shadow:-8px -7px 0 rgba(0,200,150,.35), 0 20px 56px rgba(0,0,0,.35);
  transition:transform .35s cubic-bezier(.34,2.4,.64,1),filter .35s ease,box-shadow .35s ease;
  cursor:pointer;
}
.hero-card-02:hover{
  transform:skew(1deg) translate3d(0,-12px,-100px);
  filter:brightness(1.1);
  box-shadow:-10px -9px 0 rgba(0,200,150,.45), 0 28px 70px rgba(0,0,0,.4);
}

/* ── Carte 03 — Keycloak ── */
.hero-card-03{
  padding:28px;gap:14px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  transform-style:preserve-3d;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;flex-flow:column;justify-content:flex-end;align-items:flex-start;
  width:360px;height:340px;display:flex;position:absolute;
  transform:skew(2deg) translate3d(0,50px,100px);
  box-shadow:-8px -7px 0 rgba(0,200,150,.25), 0 16px 48px rgba(0,0,0,.28);
  transition:transform .35s cubic-bezier(.34,2.4,.64,1),filter .35s ease,box-shadow .35s ease;
  cursor:pointer;
}
.hero-card-03:hover{
  transform:skew(2deg) translate3d(0,18px,100px);
  filter:brightness(1.12);
  box-shadow:-10px -9px 0 rgba(0,200,150,.35), 0 24px 60px rgba(0,0,0,.35);
}

/* ── Carte 04 — Mini-grid ── */
.hero-card-04{
  column-gap:14px;row-gap:14px;
  transform-style:preserve-3d;border-radius:20px;
  grid-template-rows:auto auto;grid-template-columns:1fr 1fr;grid-auto-columns:1fr;
  width:360px;height:340px;display:grid;position:absolute;
  transform:skew(4deg) translate3d(0,77px,300px);
}
.hero-card-041{
  padding:18px 14px 18px 18px;
  background:linear-gradient(135deg,#00c896 0%,#00a07a 60%,#007a5e 100%);
  border-radius:18px;flex-flow:column;justify-content:space-between;display:flex;
  box-shadow:-6px -6px 0 var(--teal4), 0 12px 32px rgba(0,200,150,.2);
  transition:transform .35s cubic-bezier(.34,2.4,.64,1),filter .35s ease;
  cursor:pointer;
}
.hero-card-041:hover{transform:translateY(-14px) translateX(5px);filter:brightness(1.1);}
#hc-mentoor{grid-area:span 2/span 1/span 2/span 1;}
.hero-card-042{
  padding:22px;row-gap:36px;
  background:linear-gradient(135deg,#00c896 0%,#00a07a 60%,#007a5e 100%);
  border-radius:18px;flex-flow:column;justify-content:flex-end;display:flex;
  box-shadow:-6px -6px 0 var(--teal4), 0 12px 32px rgba(0,200,150,.2);
  transition:transform .35s cubic-bezier(.34,2.4,.64,1),filter .35s ease;
  cursor:pointer;
}
.hero-card-042:hover{transform:translateY(-14px) translateX(5px);filter:brightness(1.1);}

/* ── Hero3D stack label ─────────────────────────── */
.hero3d-stack {
  text-align: center;
  padding: 0 20px 72px;
  margin-top: 48px;
}

.hero3d-stack-label {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--t3);
  position: relative;
  padding: 0 32px;
  margin-bottom: 32px;
  white-space: nowrap;
}

@media (max-width: 540px) {
  .hero3d-stack { margin-top: 12px; padding-bottom: 24px; }
  .hero3d-stack-label {
    font-size: 9px;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
  }
}

.hero3d-stack-label::before,
.hero3d-stack-label::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--bdr));
}
.hero3d-stack-label::before { right: 100%; margin-right: -32px; background: linear-gradient(to left, transparent, var(--bdr)); }
.hero3d-stack-label::after  { left:  100%; margin-left:  -32px; }

/* ── Logos grid — static, no scroll ─────────────────── */
.hero3d-logos {
  position: relative;
  width: 100%;
  margin-top: 24px;
}

.hero3d-marquee-track {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 48px;
}

.hero3d-logo-item {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity .3s ease;
}

.hero3d-logo-item:hover {
  opacity: 1;
}

.hero3d-logo-img {
  height: 32px;
  width: auto;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
}

/* MinIO logo has a stray left border artifact — clip it */
.hero3d-logo-item[data-logo="minio"] .hero3d-logo-img {
  clip-path: inset(0 0 0 4px);
}

/* Cloudflare logo has a stray top border artifact — clip it */
.hero3d-logo-item[data-logo="cloudflare"] .hero3d-logo-img {
  clip-path: inset(4px 0 0 0);
}

@media (max-width: 640px) {
  .hero3d-marquee-track { gap: 16px; }
  .hero3d-logo-img { height: 22px; }
}
/* End Hero3d Visual */
/* ── Typographie cartes ── */
.hc-label{font-size:11px;color:rgba(255,255,255,.7);margin-bottom:6px;font-weight:600;font-family:'IBM Plex Mono',monospace;letter-spacing:1.5px;text-transform:uppercase;}
.hc-label--dim{color:rgba(255,255,255,.55);}
.hc-label--dimmer{color:rgba(255,255,255,.45);}
.hc-title{color:#fff;font-family:'Bricolage Grotesque',sans-serif;font-size:28px;font-weight:700;line-height:1.2;letter-spacing:-.5px;}
.hc-sub{color:rgba(255,255,255,.7);font-size:14px;letter-spacing:.2px;line-height:1.6;margin-top:4px;}
.hc-sub--dim{color:rgba(255,255,255,.5);}
.hc-sub--dimmer{color:rgba(255,255,255,.4);}
.hc-mini-title-wrap{flex:1;display:flex;align-items:flex-end;}
.hc-mini-title{font-family:'Bricolage Grotesque',sans-serif;font-size:16px;line-height:1.3;font-weight:600;color:#fff;}

/* ── Blocs logo ── */
.card-logo{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);border-radius:12px;padding:6px;margin-bottom:8px;
  backdrop-filter:blur(4px);
}
.card-logo svg{width:100%;height:100%;}
.card-logo img{width:100%;height:100%;object-fit:contain;}
.card-logo-sm{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.2);border-radius:10px;padding:5px;
}
.card-logo-sm svg{width:100%;height:100%;}

/* ═══════════════════════════════════════════════════
   STATS STRIP — Chiffres clés style Vercel
   Remplace la section .logos
═══════════════════════════════════════════════════ */

.stats-strip {
  border-top: 1px solid var(--bdr);
  border-bottom: 1px solid var(--bdr);
  background: var(--bg2);
}

.stats-inner {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1216px;
  margin: 0 auto;
}

/* Chaque bloc stat */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px 20px;
  flex: 1;
  text-align: center;
  transition: background .2s;
}

.stat-item:hover {
  background: rgba(255, 255, 255, .02);
}

/* Séparateur vertical */
.stat-sep {
  width: 1px;
  height: 56px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* Valeur — grand chiffre bold */
.stat-val {
  font-size: clamp(28px, 3.5vw, 48px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--t1);
  line-height: 1;
}

/* Label — uppercase mono petit */
.stat-lbl {
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--t1);
  line-height: 1;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1024px) and (min-width: 541px) {
  .stats-inner {
    display: flex;
    flex-wrap: wrap;
  }

  .stat-sep {
    display: none;
  }

  .stat-item {
    flex: 0 0 50%;
    width: 50%;
    box-sizing: border-box;
    padding: 24px 20px;
    border-bottom: 1px solid var(--bdr);
  }

  /* Left column: children 1 & 5 (stat-seps are hidden but still in DOM at positions 2,4,6) */
  .stat-item:nth-child(1),
  .stat-item:nth-child(5) {
    border-right: 1px solid var(--bdr);
  }

  /* Last row: no bottom border */
  .stat-item:nth-child(5),
  .stat-item:nth-child(7) {
    border-bottom: none;
  }

  .stat-val {
    font-size: clamp(24px, 4vw, 40px);
    letter-spacing: -1px;
  }

  .stat-lbl {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    font-size: 9px;
    letter-spacing: 1px;
  }
}

@media (max-width: 540px) {
  .stats-inner {
    display: flex;
    flex-direction: column;
    max-width: 100%;
    padding: 0;
  }

  .stat-sep {
    display: none;
  }

  .stat-item {
    width: 100%;
    box-sizing: border-box;
    padding: 20px 16px;
    border-bottom: 1px solid var(--bdr);
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  .stat-item:nth-child(odd) {
    border-right: none;
  }

  .stat-val {
    font-size: 28px;
    letter-spacing: -1px;
  }
}

/* ── Responsive ── */
@media(max-width:960px){
  .hero-inner{grid-template-columns:1fr;padding:76px 32px 56px;gap:36px;}
  .hero-visual{order:2;}
  .hero-cards-wrapper{height:360px;}
  .hero-cards-wrapper-inner{transform:skew(1deg,-20deg) perspective(2000px) rotateX(-12deg) rotateY(39deg) rotateZ(4deg) scale(.75)!important;}
  .hero-h1{font-size:clamp(38px,7vw,64px);}
  .hero-sub{max-width:680px;}
  .hero-proof{max-width:680px;margin:0 auto 26px;}
}

@media(max-width:768px){
  .hero{width:100%;padding-top:72px;overflow-x:hidden;}
  .hero-inner{width:100%;padding:64px 16px 48px;box-sizing:border-box;overflow-x:hidden;}
  .hero-text{width:100%;max-width:100%;text-align:center;box-sizing:border-box;}
  .hero-eyebrow{white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:9px;letter-spacing:1px;padding:6px 12px;}
  .hero-h1{font-size:clamp(32px,9vw,46px);letter-spacing:-1.4px;width:100%;}
  .hero-h1 .line2{max-width:100%;margin-top:10px;font-size:.38em;}
  .hero-sub{font-size:14px;text-align:center;max-width:100%;width:100%;}
  .hero-ctas{flex-direction:column;align-items:stretch;width:100%;}
  .hero-ctas .btn-primary,
  .hero-ctas .btn-secondary{justify-content:center;width:100%;box-sizing:border-box;}
  .hero-proof{margin-bottom:22px;max-width:100%;width:100%;overflow:hidden;}
  .hero-proof-chip{font-size:12px;padding:8px 12px;white-space:nowrap;flex-shrink:0;}
  .hero-stats{grid-template-columns:1fr 1fr;max-width:100%;width:100%;}
  .hero-stat-sep{display:none;}
  .hero-stat{padding:16px 12px;border-bottom:1px solid var(--bdr);}
  .hero-stat:nth-child(odd){border-right:1px solid var(--bdr);}
  /* .hero-stat:nth-last-child(-n+2){border-bottom:none;} */
}
@media(max-width:420px){
  .nav-logo span{display:none;}
  .hero-eyebrow{font-size:9px;letter-spacing:1px;padding:6px 10px;}
  .hero-proof-label{font-size:9px;}
  .hs-val{font-size:18px;}
  .hs-lbl{font-size:9px;letter-spacing:1px;}
  .hero-stats{grid-template-columns:1fr;}
  .hero-stat{border-right:none!important;border-bottom:1px solid var(--bdr);}
  .hero-stat:last-child{border-bottom:none;}
}

/* ── Mobile hero3d — same 3D look, scaled to fit ── */
@media(max-width:540px){
  .hero-3d { padding: 0 0 16px; }
  .hero-visual {
    display: flex !important;
    height: 340px !important;
    overflow: visible !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
  }
  .hero-cards-wrapper {
    height: 340px !important;
    overflow: visible !important;
    animation: none !important;
  }
  /* Rotated more toward viewer on mobile */
  .hero-cards-wrapper-inner {
    transform: skew(1deg,-10deg) perspective(2000px) rotateX(-6deg) rotateY(22deg) rotateZ(2deg) scale(0.52) !important;
    transform-origin: center center !important;
    margin-top: 0 !important;
  }
  /* Tighter Z spacing — mobile only */
  .hero-card-01 { transform:skew(1deg) translate3d(0,-50px,-220px)  !important; }
  .hero-card-02 { transform:skew(1deg) translate3d(0,10px,-30px)    !important; }
  .hero-card-03 { transform:skew(2deg) translate3d(0,70px,120px)    !important; }
  .hero-card-04 { transform:skew(1deg) translate3d(0,120px,233px)   !important; }
}


/* LOGOS */
.logos{padding:34px 0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);background:var(--bg2);}
.logos-label{text-align:center;font-size:10px;font-family:'IBM Plex Mono',monospace;letter-spacing:2px;text-transform:uppercase;color:var(--t4);margin-bottom:20px;}
.logos-row{display:flex;align-items:center;justify-content:center;gap:40px;flex-wrap:wrap;padding:0 48px;}
.logo-item{display:flex;align-items:center;gap:8px;opacity:.3;transition:opacity .2s;}
.logo-item:hover{opacity:.55;}
.logo-item svg{width:17px;height:17px;fill:var(--t2);}
.logo-item span{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:700;color:var(--t2);}

/* SECTION HELPERS */
.section-eyebrow{font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--teal);text-align:center;margin-bottom:13px;}
.section-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(24px,3.2vw,46px);font-weight:800;letter-spacing:-1.5px;text-align:center;color:var(--t1);line-height:1.1;margin-bottom:13px;}
.section-sub{text-align:center;color:var(--t2);font-size:16px;font-weight:300;max-width:520px;margin:0 auto 52px;line-height:1.7;}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease;}
.reveal.visible{opacity:1;transform:translateY(0);}
.reveal-delay-1{transition-delay:.1s;}.reveal-delay-2{transition-delay:.2s;}
.s-chip{font-size:10.5px;padding:3px 9px;border-radius:3px;font-family:'IBM Plex Mono',monospace;border:1px solid var(--bdr);color:var(--t3);}
.pv-chip{display:inline-flex;align-items:center;gap:4px;font-size:10px;padding:3px 8px;border-radius:3px;font-family:'IBM Plex Mono',monospace;}
.chip-green{background:rgba(0,200,150,.12);color:var(--teal);}
.chip-blue{background:rgba(41,128,185,.12);color:#5DADE2;}
.chip-orange{background:rgba(255,122,53,.12);color:var(--or);}

/* PILLARS */
.pillars{padding:110px 0;position:relative;}
.pillars-bg{position:absolute;inset:0;background:linear-gradient(to bottom,transparent,var(--bg2) 30%,var(--bg2) 70%,transparent);}
.pillars-timeline{position:relative;max-width:880px;margin:0 auto;padding:0 48px;}
.pillars-line{position:absolute;left:50%;top:40px;bottom:40px;width:1px;background:linear-gradient(to bottom,transparent,var(--bdr2) 20%,var(--bdr2) 80%,transparent);transform:translateX(-50%);}
@media(max-width:768px){.pillars-line{display:none;}.pillars-timeline{padding:0 20px;}}
.pillar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;margin-bottom:70px;position:relative;}
.pillar:last-child{margin-bottom:0;}
.pillar.right .pillar-content{order:3;}.pillar.right .pillar-visual{order:1;}.pillar.right .pillar-node{order:2;}
.pillar-num{font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--teal);letter-spacing:2px;margin-bottom:7px;}
.pillar-name{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.5vw,28px);font-weight:800;letter-spacing:-1px;color:var(--t1);line-height:1.1;margin-bottom:11px;}
.pillar-name em{font-style:normal;color:var(--teal);}
.pillar-desc{font-size:13.5px;color:var(--t2);font-weight:300;line-height:1.75;}
.pillar-node{width:42px;height:42px;background:var(--bg);border:2px solid var(--teal);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;z-index:1;}
.pillar-node::before{content:'';position:absolute;width:68px;height:68px;background:rgba(0,200,150,.06);border-radius:50%;}
.pillar-node svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:1.5;}
.pillar-visual{background:var(--bg3);border:1px solid var(--bdr);border-radius:10px;padding:16px;min-height:125px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden;}
.pillar-visual::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);}
.pv-row{display:flex;align-items:center;gap:7px;margin-bottom:7px;}
.pv-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.pv-bar{flex:1;height:3px;border-radius:2px;background:var(--bg4);overflow:hidden;}
.pv-fill{height:100%;border-radius:2px;background:var(--teal);}
.pv-label{font-size:9.5px;color:var(--t3);font-family:'IBM Plex Mono',monospace;white-space:nowrap;}
.mock-stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:7px;}
.mock-stat{background:var(--bg4);border-radius:3px;padding:6px 4px;text-align:center;}
.mock-stat-n{font-family:'Bricolage Grotesque',sans-serif;font-size:13px;font-weight:800;color:var(--t1);line-height:1;}
.mock-stat-l{font-size:7px;color:var(--t3);font-family:'IBM Plex Mono',monospace;}
.mock-row{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.mock-avatar{width:22px;height:22px;border-radius:50%;background:var(--teal3);display:flex;align-items:center;justify-content:center;font-size:8px;font-weight:700;color:var(--teal);flex-shrink:0;}
.mock-prog{height:3px;border-radius:2px;background:var(--bg4);overflow:hidden;flex:1;}
.mock-prog-fill{height:100%;border-radius:2px;background:var(--teal);}
@media(max-width:768px){
  .pillar,.pillar.right{grid-template-columns:1fr;}
  .pillar.right .pillar-content,.pillar.right .pillar-visual,.pillar.right .pillar-node{order:unset;}
  .pillar-node{display:none;}
}

/* PRODUCT TABS */
.prod-section{padding:100px 0 108px;position:relative;overflow:hidden;}
.prod-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 60% at 18% 50%,rgba(0,200,150,.05) 0%,transparent 55%),var(--bg2);}
.prod-head{position:relative;z-index:2;margin-bottom:44px;}
.prod-inner{position:relative;z-index:2;max-width:1060px;margin:0 auto;padding:0 48px;display:grid;grid-template-columns:230px 1fr;gap:0;}
.prod-tabs{padding:8px 0;border-right:1px solid var(--bdr);padding-right:0;}
.prod-tab{display:flex;align-items:center;gap:11px;padding:14px 20px 14px 0;cursor:pointer;border:none;background:none;text-align:left;width:100%;position:relative;transition:all .25s;border-right:2px solid transparent;margin-right:-1px;}
.prod-tab:hover .pt-name{color:var(--t1);}
.prod-tab.active{border-right-color:var(--teal);}
.prod-tab.active .pt-icon{background:var(--teal);border-color:var(--teal);}
.prod-tab.active .pt-icon svg{stroke:var(--bg);}
.prod-tab.active .pt-name{color:var(--t1);}
.prod-tab.active .pt-num{color:var(--teal);}
.pt-icon{width:32px;height:32px;flex-shrink:0;border-radius:7px;border:1px solid var(--bdr);background:var(--bg3);display:flex;align-items:center;justify-content:center;transition:all .25s;}
.pt-icon svg{width:14px;height:14px;stroke:var(--t3);fill:none;stroke-width:1.5;transition:stroke .25s;}
.pt-num{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--t4);margin-bottom:1px;transition:color .25s;}
.pt-name{font-family:'Bricolage Grotesque',sans-serif;font-size:12.5px;font-weight:700;color:var(--t3);line-height:1.2;transition:color .25s;}
.prod-panel{padding-left:34px;position:relative;min-height:430px;}
.prod-slide{position:absolute;inset:0;opacity:0;transform:translateX(10px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;display:flex;flex-direction:column;justify-content:center;}
.prod-slide.active{opacity:1;transform:translateX(0);pointer-events:auto;position:relative;}
.ps-tag{font-family:'IBM Plex Mono',monospace;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--teal);margin-bottom:9px;}
.ps-title{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(19px,2.3vw,30px);font-weight:800;letter-spacing:-.8px;color:var(--t1);line-height:1.15;margin-bottom:11px;}
.ps-desc{font-size:13.5px;color:var(--t2);font-weight:300;line-height:1.8;max-width:440px;margin-bottom:18px;}
.ps-chips{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:20px;}
.ps-mock{background:var(--bg3);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;position:relative;}
.ps-mock::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);opacity:.4;}
.ps-mock-bar{background:var(--bg4);padding:8px 11px;display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--bdr);}
.ps-mock-bar .dot{width:7px;height:7px;border-radius:50%;}
.ps-mock-url{flex:1;height:15px;background:var(--bg3);border-radius:3px;font-size:9px;color:var(--t4);display:flex;align-items:center;padding:0 7px;font-family:'IBM Plex Mono',monospace;}
.ps-mock-body{padding:16px;}
.arc-timer{height:2px;background:var(--bg4);border-radius:1px;overflow:hidden;margin:14px auto 0;max-width:1060px;padding:0 48px;}
.arc-timer-inner{height:100%;border-radius:1px;width:0;background:var(--teal);}

/* SECTION WRAPPER */
.faq {
  padding: 120px 0;
  position: relative;
}

.faq .section-title {
  margin-bottom: 40px;
}

/* LISTE */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ITEM */
.faq-item {
  background: var(--bg2);
  border: 1px solid var(--bdr);
  border-radius: 8px;
  padding: 18px 22px;
  cursor: pointer;
  transition: border-color .25s ease, background .25s ease;
}

.faq-item:hover {
  border-color: var(--teal);
}

/* QUESTION */
.faq-q {
  font-size: 16px;
  font-weight: 600;
  color: var(--t1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* FLECHE */
.faq-arrow {
  width: 18px;
  height: 18px;
  stroke: var(--t3);
  stroke-width: 1.5;
  transition: transform .25s ease, stroke .25s ease;
}

/* REPONSE */
.faq-a {
  font-size: 14px;
  line-height: 1.55;
  color: var(--t2);
  margin-top: 12px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .35s ease, opacity .25s ease;
}

/* ÉTAT OUVERT */
.faq-item.open {
  border-color: var(--teal);
  background: var(--bg3);
}

.faq-item.open .faq-arrow {
  transform: rotate(180deg);
  stroke: var(--teal);
}

.faq-item.open .faq-a {
  max-height: 600px;
  opacity: 1;
}

.faq-a p {
  margin: 0 0 8px;
}

.faq-a p:last-child {
  margin-bottom: 0;
}

.faq-a ul {
  margin: 4px 0 10px 18px;
  padding: 0;
  list-style: disc;
}

.faq-a ul li {
  margin-bottom: 4px;
  line-height: 1.5;
}

/* RESPONSIVE */
@media (max-width: 640px) {
  .faq {
    padding: 80px 0;
  }

  .faq-item {
    padding: 16px 18px;
  }

  .faq-q {
    font-size: 15px;
  }

  .faq-a {
    font-size: 13px;
  }
}

@media(max-width:900px){
  .prod-inner{grid-template-columns:1fr;padding:0 20px;}
  .prod-tabs{border-right:none;border-bottom:1px solid var(--bdr);padding-bottom:10px;margin-bottom:18px;display:flex;overflow-x:auto;gap:0;scrollbar-width:none;}
  .prod-tabs::-webkit-scrollbar{display:none;}
  .prod-tab{flex-direction:column;align-items:center;text-align:center;padding:10px 12px;border-right:none;border-bottom:2px solid transparent;flex-shrink:0;margin-right:0;margin-bottom:-1px;}
  .prod-tab.active{border-right-color:transparent;border-bottom-color:var(--teal);}
  .pt-num{display:none;}
  .prod-panel{padding-left:0;}
  .arc-timer{padding:0 20px;}
}

/* COLONNES */
.pillars-cols{padding:100px 0 0;position:relative;overflow:hidden;background:var(--bg);}
.cols-bg{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(0,200,150,.12) 0%,transparent 60%);}
.cols-inner{position:relative;z-index:2;max-width:840px;margin:0 auto;padding:0 48px;text-align:center;}
.cols-wrap{display:flex;align-items:flex-end;justify-content:center;gap:11px;margin-top:50px;height:260px;position:relative;}
.cols-wrap::after{content:'';position:absolute;bottom:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--teal),transparent);box-shadow:0 0 28px 5px rgba(0,200,150,.15);}
.col-item{display:flex;flex-direction:column;align-items:center;flex:1;max-width:125px;}
.col-bar{width:100%;border-radius:6px 6px 0 0;position:relative;overflow:hidden;background:linear-gradient(to top,rgba(0,200,150,.07),var(--bg3));transition:filter .3s;}
.col-bar::after{content:'';position:absolute;top:0;left:10%;right:10%;height:1px;background:var(--teal);box-shadow:0 0 10px 2px rgba(0,200,150,.3);}
.col-item:hover .col-bar{filter:brightness(1.3);}
.col-icon{width:38px;height:38px;background:var(--bg);border:1px solid rgba(0,200,150,.32);border-radius:50%;display:flex;align-items:center;justify-content:center;position:absolute;top:-19px;left:50%;transform:translateX(-50%);box-shadow:0 0 14px rgba(0,200,150,.18);}
.col-icon svg{width:17px;height:17px;stroke:var(--teal);fill:none;stroke-width:1.5;}
.col-label{margin-top:15px;font-family:'Bricolage Grotesque',sans-serif;font-size:11.5px;font-weight:700;color:var(--t2);text-align:center;line-height:1.3;}
.col-sub{font-size:9.5px;color:var(--t3);font-family:'IBM Plex Mono',monospace;margin-top:2px;}
.col-item:nth-child(1) .col-bar{height:126px;}
.col-item:nth-child(2) .col-bar{height:175px;}
.col-item:nth-child(3) .col-bar{height:222px;}
.col-item:nth-child(4) .col-bar{height:175px;}
.col-item:nth-child(5) .col-bar{height:126px;}
@media(max-width:580px){.cols-wrap{height:180px;gap:7px;}.col-item:nth-child(1) .col-bar{height:80px;}.col-item:nth-child(2) .col-bar{height:116px;}.col-item:nth-child(3) .col-bar{height:152px;}.col-item:nth-child(4) .col-bar{height:116px;}.col-item:nth-child(5) .col-bar{height:80px;}.col-icon{width:30px;height:30px;top:-15px;}.col-icon svg{width:12px;height:12px;}.col-label{font-size:10px;}.col-sub{display:none;}.cols-inner{padding:0 14px;}}

/* SECURITY */
.security{padding:78px 0;border-top:1px solid var(--bdr);border-bottom:1px solid var(--bdr);background:var(--bg2);}
.sec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:8px;overflow:hidden;margin-top:38px;}
.sec-item{background:var(--bg2);padding:24px 20px;display:flex;flex-direction:column;gap:9px;}
.sec-icon{width:33px;height:33px;background:var(--teal3);border-radius:6px;display:flex;align-items:center;justify-content:center;}
.sec-icon svg{width:16px;height:16px;stroke:var(--teal);fill:none;stroke-width:1.5;}
.sec-name{font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;color:var(--t1);}
.sec-desc{font-size:12.5px;color:var(--t3);line-height:1.55;}
@media(max-width:900px){.sec-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:460px){.sec-grid{grid-template-columns:1fr;}}

/* PRICING */
.pricing{padding:110px 0;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--bdr);border:1px solid var(--bdr);border-radius:10px;overflow:hidden;margin-top:52px;}
.plan{background:var(--bg2);padding:32px 26px;position:relative;}
.plan.featured{background:var(--bg3);}
.plan.featured::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--teal),transparent);}
.plan-badge{display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;font-family:'IBM Plex Mono',monospace;padding:3px 9px;border-radius:2px;background:rgba(0,200,150,.12);color:var(--teal);margin-bottom:16px;}
.plan-name{font-family:'Bricolage Grotesque',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.5px;color:var(--t1);margin-bottom:4px;}
.plan-tagline{font-size:12.5px;color:var(--t3);margin-bottom:22px;}
.plan-price{font-family:'Bricolage Grotesque',sans-serif;font-size:38px;font-weight:800;letter-spacing:-2px;color:var(--t1);line-height:1;margin-bottom:3px;}
.plan-price span{font-size:17px;font-weight:400;color:var(--t3);}
.plan-period{font-size:11px;color:var(--t4);margin-bottom:22px;}
.plan-students{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-family:'IBM Plex Mono',monospace;color:var(--t3);padding:4px 9px;border:1px solid var(--bdr);border-radius:3px;margin-bottom:22px;}
.plan-features{list-style:none;margin-bottom:26px;}
.plan-features li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--t2);padding:6px 0;border-bottom:1px solid var(--bdr);}
.plan-features li:last-child{border-bottom:none;}
.plan-features li::before{content:'';width:14px;height:14px;border-radius:50%;background:var(--teal3);background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='%2300C896' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:9px;background-repeat:no-repeat;background-position:center;flex-shrink:0;margin-top:2px;}
.plan-cta{display:block;width:100%;text-align:center;font-family:'Bricolage Grotesque',sans-serif;font-size:13.5px;font-weight:700;padding:10px;border-radius:4px;text-decoration:none;cursor:pointer;transition:all .2s;border:none;font-family:inherit;}
.plan-cta.outline{border:1px solid var(--bdr);color:var(--t2);background:transparent;}
.plan-cta.outline:hover{border-color:var(--teal);color:var(--teal);}
.plan-cta.filled{background:var(--teal);color:var(--bg);}
.plan-cta.filled:hover{background:var(--teal2);}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}}

/* COMPARE */
.compare{border:1px solid var(--bdr);border-radius:10px;overflow:hidden;margin-top:16px;}
.compare.collapsed tr.compare-hide{display:none;}
.compare-table{width:100%;border-collapse:collapse;}
.compare-table th,.compare-table td{padding:12px 16px;text-align:center;border-bottom:1px solid var(--bdr);font-size:12.5px;}
.compare-table th{background:var(--bg3);font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:13px;color:var(--t1);}
.compare-table th:first-child,.compare-table td:first-child{text-align:left;font-size:12.5px;color:var(--t2);width:38%;}
.compare-table th.featured-col{color:var(--teal);}
.compare-table tr:last-child td{border-bottom:none;}
.compare-table tr:hover td{background:rgba(255,255,255,.012);}
.compare-cat{background:var(--bg4) !important;}
.compare-cat td{font-family:'IBM Plex Mono',monospace;font-size:9.5px !important;letter-spacing:1.5px;text-transform:uppercase;color:var(--t4) !important;padding:7px 16px !important;}
.c-yes{color:var(--teal);font-size:14px;}
.c-no{color:var(--t4);font-size:14px;}
.c-partial{font-size:10.5px;color:var(--t3);font-family:'IBM Plex Mono',monospace;}
.compare-toggle{display:flex;align-items:center;justify-content:center;gap:8px;background:none;border:1px solid var(--bdr);color:var(--t3);font-size:11.5px;font-weight:500;font-family:'IBM Plex Mono',monospace;letter-spacing:.5px;padding:9px 20px;border-radius:4px;cursor:pointer;transition:all .2s;width:100%;margin-top:11px;}
.compare-toggle:hover{border-color:var(--teal);color:var(--teal);}
.compare-toggle svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;transition:transform .3s;}
.compare-toggle.open svg{transform:rotate(180deg);}

/* FINAL CTA */
.final-cta{padding:108px 48px;text-align:center;position:relative;overflow:hidden;background:var(--bg2);border-top:1px solid var(--bdr);}
.final-cta-bg{position:absolute;inset:0;background:radial-gradient(ellipse 50% 80% at 50% 50%,rgba(0,200,150,.07) 0%,transparent 70%);}
.final-cta h2{font-family:'Bricolage Grotesque',sans-serif;font-size:clamp(26px,4.2vw,54px);font-weight:800;letter-spacing:-2px;color:var(--t1);margin-bottom:16px;position:relative;z-index:1;}
.final-cta p{font-size:16px;color:var(--t2);font-weight:300;margin-bottom:34px;position:relative;z-index:1;}
.final-cta .ctas{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;position:relative;z-index:1;}
@media(max-width:600px){.final-cta{padding:72px 20px;}}

/* FOOTER */
/* ── FOOTER ─────────────────────────────────────────── */
.site-footer {
  padding: 80px 0 0;
  background: var(--bg2);
  border-top: var(--border);
}

.footer-inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

/* Top grid */
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 56px;
}

/* Brand column */
.footer-brand-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  margin-bottom: 20px;
}

.footer-logo {
  height: 28px;
  width: auto;
}

.footer-wordmark {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -.02em;
}

.footer-accent {
  color: var(--teal);
}

.footer-tagline {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.35;
  margin-bottom: 14px;
  letter-spacing: -.02em;
}

.footer-desc {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.7;
  margin-bottom: 20px;
  max-width: 300px;
}

.footer-email {
  font-size: 13px;
  color: var(--teal);
  text-decoration: none;
  margin-bottom: 16px;
  transition: opacity .2s;
}
.footer-email:hover { opacity: .75; }

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}
.footer-social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(255,255,255,.07);
  color: var(--t2);
  transition: background .2s, color .2s;
  text-decoration: none;
}
.footer-social-link:hover {
  background: rgba(0,200,150,.15);
  color: #00c896;
}
.footer-social-link svg {
  width: 16px;
  height: 16px;
}

.footer-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t3);
  border: 1px solid rgba(107,143,173,.3);
  border-radius: 99px;
  padding: 4px 12px;
  margin-top: 4px;
}

/* Nav columns */
.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-acc-btn {
  display: none; /* hidden on desktop */
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--ln);
  padding: 16px 0;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.footer-acc-icon {
  width: 16px;
  height: 16px;
  stroke: var(--t3);
  flex-shrink: 0;
  transition: transform .25s ease;
}

.footer-accordion.is-open .footer-acc-icon {
  transform: rotate(180deg);
}

.footer-col-heading {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t2);
  margin-bottom: 20px;
}

/* On desktop the heading is an h4 inside the btn — keep margin 0 */
.footer-acc-btn .footer-col-heading {
  margin-bottom: 0;
}

.footer-col-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col-link {
  font-size: 14px;
  color: var(--t3);
  text-decoration: none;
  transition: color .2s;
}
.footer-col-link:hover { color: var(--teal); }

/* Legacy nav (unused now but keep for safety) */
.footer-nav { display: none; }
.footer-nav-link { display: none; }

.footer-sep {
  width: 100%;
  height: 1px;
  background: var(--ln);
}

.footer-legal {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 20px 0 28px;
  font-size: 11.5px;
  color: var(--t4);
  font-family: 'JetBrains Mono', monospace;
}

.footer-heart {
  font-size: 11.5px;
  color: var(--t4);
  letter-spacing: .3px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.footer-heart--end {
  margin-left: auto;
}
.footer-heart-icon {
  width: 13px;
  height: 12px;
  flex-shrink: 0;
  vertical-align: middle;
}

.footer-legal-links {
  display: flex;
  gap: 20px;
}

.footer-legal-links a {
  color: var(--t4);
  text-decoration: none;
  transition: color .2s;
}

.footer-legal-links a:hover {
  color: var(--t2);
}

@media (max-width: 900px) {
  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 28px 20px;
  }
  .footer-brand-col {
    grid-column: 1 / 2;
  }
  .footer-tagline { font-size: 15px; }
  .footer-desc { font-size: 12px; max-width: 100%; }
  .footer-col-heading { font-size: 11px; letter-spacing: 0.08em; }
  .footer-col-link { font-size: 13px; }
}

@media (max-width: 600px) {
  .footer-inner {
    padding: 0 20px;
  }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .footer-brand-col {
    grid-column: 1 / -1;
    align-items: center;
    text-align: center;
    padding-bottom: 32px;
    border-bottom: 1px solid var(--ln);
    margin-bottom: 4px;
  }
  .footer-brand-col .footer-desc,
  .footer-brand-col .footer-tagline {
    max-width: 100%;
  }
  /* Accordion: show button, hide static heading */
  .footer-acc-btn {
    display: flex;
  }
  .footer-col-list {
    display: none;
    padding: 16px 0 8px;
  }
  .footer-accordion.is-open .footer-col-list {
    display: flex;
  }
  .footer-col {
    width: 100%;
    border-bottom: none; /* btn handles border */
  }
  .footer-social {
    justify-content: center;
    padding: 12px 0 4px;
  }
  .footer-legal {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
  }
  .footer-heart--end {
    margin-left: 0;
  }
}

/* Develop CSS */
/* ═══════════════════════════════════════════════════
   DEVELOP SECTION — Vercel-style
═══════════════════════════════════════════════════ */

.develop {
  padding: 0 0 80px;
  position: relative;
  padding-top: 10px;
  background: radial-gradient(ellipse 50% 60% at 18% 50%, rgba(0, 200, 150, .05) 0%, transparent 55%), var(--bg2);
}
.develop-step-intro{
  text-align: center;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 64px;
  margin-top: 64px;

}
/* ── Step indicator ─────────────────────────────── */
.develop-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 28px;
  position: relative;
  z-index: 1;
}

/* Ligne fine depuis le haut de section */
.step-line-top {
  width: 1px;
  height: 80px;
  background: var(--teal);
}

/* Cercle rempli — gradient teal */
.step-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #00C896, #00A0FF);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Bricolage Grotesque', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 6px rgba(0, 200, 150, .08),
              0 0 0 14px rgba(0, 200, 150, .04);
}

/* ── Header ─────────────────────────────────────── */
.develop-header {
  text-align: center;
  margin-bottom: 72px;
  padding: 0 20px;
  position: relative;
  z-index: 1;
}

.develop-eyebrow {
  color: var(--teal);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
  margin-bottom: 12px;
  display: block;
}

.develop-title {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -2px;
  color: var(--t1);
  line-height: 1.05;
  margin: 0 0 18px;
}

.develop-sub {
  font-size: 17px;
  color: var(--t2);
  font-weight: 300;
  line-height: 1.7;
  max-width: 540px;
  margin: 0 auto;
}

/* ── Grid ───────────────────────────────────────── */
.develop-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;
}
.develop-left {
  padding-right: 48px;
}

/* New CSS for the left side for develop section */
/* DEVELOP LEFT — overlap */
.develop-left {
  position: relative;
  height: 600px;
}
.dev-mock {
  position: absolute;
  width: 90%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.07);
}
.dev-mock img {
  width: 100%;
  display: block;
}
.dev-mock--back {
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
}
.dev-mock--front {
  bottom: 100px;
  right: 0;
  z-index: 2;
}
/* Carte commune */
.dev-card {
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
.develop-card {
  position: relative;
  margin-bottom: 12vh; /* pour créer de l'espace en bas, même avec l'overlap */
}
.preview-card {
  position: relative;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .08);
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .55);
}
/* ── Code editor card ── */
.dev-card-code {
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  background: #0d1117;
}

/* ── Browser card — overlap en bas à droite ── */
.dev-card-browser {
  bottom: 0;
  left: 60px;   /* décalé à droite comme dans l'image */
  right: 0;
  z-index: 2;
  background: var(--bg3);
}

/* Barre de titre (traffic lights) */
.dev-card-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #1a1d23;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.dev-card-bar-browser {
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
}

/* Dots traffic light */
.dev-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green  { background: #28CA41; }

/* Tab filename */
.dev-tab {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .06);
  padding: 3px 12px;
  border-radius: 4px;
}

/* Address bar */
.dev-addressbar {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 5px;
  padding: 3px 10px;
  max-width: 220px;
  margin: 0 auto;
}
.dev-url {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}
.dev-reload {
  width: 12px;
  height: 12px;
  color: rgba(255, 255, 255, .3);
  flex-shrink: 0;
}

/* Corps des cartes */
.dev-card-body {
  padding: 18px 16px;
}

/* Preview area vide */
.dev-card-preview {
  height: 160px;
  background: var(--bg3);
  padding: 0;
}

/* ── Code syntax ── */
.dev-code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  line-height: 2;
  user-select: none;
}
.code-line {
  display: flex;
  align-items: baseline;
  gap: 3px;
}
.ln {
  width: 24px;
  color: rgba(255, 255, 255, .18);
  font-size: 11px;
  flex-shrink: 0;
  text-align: right;
  margin-right: 16px;
  user-select: none;
}
/* Syntax colors — neutres (proches du vrai éditeur) */
.kw { color: #C678DD; }   /* keyword : export default */
.fn { color: #61AFEF; }   /* function name */
.va { color: #E06C75; }   /* variable : data */
.pu { color: #ABB2BF; }   /* punctuation : {}() */

/* Curseur clignotant */
.cursor-blink {
  color: var(--teal);
  font-weight: 300;
  animation: blink 1.1s step-end infinite;
  margin-left: 20px;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ── Right : Feature blocks ─────────────────────── */
/* .develop-right {
  display: flex;
  flex-direction: column;
  gap: 36px;
} */
.develop-right {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: flex-start;
  padding-left: 48px;
}

.dev-block {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.dev-block-num {
  display: none;
}

.dev-block-inner-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.dev-icon {
  width: 52px;
  height: 52px;
  background: rgba(255,255,255,.08);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: none;
  margin-top: 0;
}

.dev-icon svg {
  width: 28px;
  height: 28px;
  stroke: rgba(255,255,255,.75);
  stroke-width: 1.5;
  fill: none;
}

.dev-text {
  min-width: auto;
  flex: initial;
}

.dev-block-title {
  font-family: 'Syne', sans-serif;
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  color: var(--t1);
  line-height: 1.25;
  margin-bottom: 6px;
}

.dev-block-desc {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--t3);
  font-weight: 300;
  line-height: 1.75;
  max-width: 420px;
  overflow-wrap: normal;
  word-break: normal;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
  .develop-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .develop-left {
    height: auto;
    display: flex;
    justify-content: center;
    padding-right: 0;
  }
  

  .dev-card-browser {
    left: 32px;
  }
}

@media (max-width: 540px) {
  .develop-left {
    height: auto;
    display: flex;
    justify-content: center;
    padding-right: 0;
  }

  .dev-card-browser {
    left: 16px;
  }

  .dev-code {
    font-size: 11px;
  }
}
/* Preview CSS */

/* ═══════════════════════════════════════════════════
   PREVIEW SECTION — Step 2 — Vercel-style
═══════════════════════════════════════════════════ */

/* ── Step variants (couleur par step) ────────────── */
.step-line-pu {
  background: linear-gradient(to bottom, var(--teal), var(--pu));
}
.step-circle-pu {
  background: linear-gradient(135deg, var(--pu), #C084FC);
}
.step-line-or {
  background: linear-gradient(to bottom, var(--pu), var(--or));
}
.step-circle-or {
  background: linear-gradient(135deg, #FF9E5E, var(--or));
}
.pv-eyebrow {
  color: var(--pu) !important;
}
.pv-next-label {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .5px;
}
.pv-next-title {
  font-size: clamp(26px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -1.5px;
  color: var(--t1);
  margin-top: 10px;
}
.pv-step-next {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Section ──────────────────────────────────────── */
.preview-section {
  padding: 0 0 2px;
  position: relative;
  background: radial-gradient(ellipse 50% 60% at 18% 50%, rgba(0, 200, 150, .05) 0%, transparent 55%), var(--bg2);
}

/* Spine line: top/height driven by JS — starts at first card, ends at "3" circle top */
.pv-spine-line {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--pu) 6%,
    rgba(124, 111, 255, 0.4) 35%,
    rgba(0, 200, 150, 0.4) 65%,
    var(--or) 100%
  );
  pointer-events: none;
  z-index: 0;
}



/* ── 3-column layout: cards | spine | text ───────── */
.pv-cols {
  display: flex;
  align-items: flex-start;
  gap: 0;
  position: relative;
  z-index: 1;
}

/* LEFT: stacked cards */
.pv-col-cards {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 56px;
}
.pv-col-card {
  width: 100%;
}

/* CENTER: spine — fixed width, full height, relative for absolute dots */
.pv-col-spine {
  width: 80px;
  flex-shrink: 0;
  position: relative;
  align-self: stretch;
}
.pv-spine-dot {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  /* top set by JS */
}

/* RIGHT: stacked text blocks, top offset set by JS */
.pv-col-text {
  flex: 1;
  position: relative;
}
.pv-text-block {
  position: absolute;
  left: 0;
  right: 0;
  /* top set by JS */
}

/* Carte générique partagée avec develop.css */
.pv-card {
  width: 100%;
  margin-bottom: 0;
}

/* ── Shared card header helpers ── */
.pv-dash-header-right {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pv-dash-brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--t2);
}
.pv-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-family: 'IBM Plex Mono', monospace;
  color: #3FB950;
  background: rgba(63,185,80,.1);
  border: 1px solid rgba(63,185,80,.25);
  padding: 2px 7px;
  border-radius: 20px;
}
.pv-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #3FB950;
  animation: pv-pulse-green 2s ease-in-out infinite;
}
@keyframes pv-pulse-green {
  0%,100% { opacity: 1; box-shadow: 0 0 0 0 rgba(63,185,80,.5); }
  50%     { opacity: .7; box-shadow: 0 0 0 4px rgba(63,185,80,0); }
}

/* ── Card 1 : Dashboard ── */
.pv-card-dash { margin-bottom: 20px; }
.pv-dash-body { padding: 14px 16px; }
.pv-dash-row {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border: 1px solid var(--bdr);
  border-radius: 6px;
  overflow: hidden;
}
.pv-dash-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 8px;
  border-right: 1px solid var(--bdr);
  background: var(--bg3);
}
.pv-dash-stat:last-child { border-right: none; }
.pv-dash-stat-alert .pv-dash-num { color: var(--am) !important; }
.pv-dash-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 20px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 4px;
}
.pv-dash-lbl {
  font-size: 9px;
  color: var(--t3);
  text-align: center;
  letter-spacing: .3px;
  text-transform: uppercase;
}
/* Progress list (student completion) */
.pv-dash-progress-list { display: flex; flex-direction: column; gap: 7px; }
.pv-dash-prog-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
}
.pv-dash-prog-label {
  width: 60px;
  flex-shrink: 0;
  color: var(--t2);
  font-family: 'IBM Plex Mono', monospace;
}
.pv-dash-prog-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--bg4);
  overflow: hidden;
}
.pv-dash-prog-fill {
  height: 100%;
  width: var(--w, 0%);
  background: var(--teal);
  border-radius: 3px;
  transition: width 1s cubic-bezier(.4,0,.2,1);
}
.pv-dash-prog-fill-warn { background: var(--am); }
.pv-dash-prog-pct { color: var(--t3); font-family: 'IBM Plex Mono', monospace; width: 28px; text-align: right; }
.pv-dash-prog-warn { color: var(--am) !important; }
.pv-dash-num-pct::after { content: '%'; font-size: 12px; font-weight: 400; color: var(--t3); }

/* ── Card 2 : CSV Import ── */
.pv-card-import { margin-bottom: 20px; }
.pv-import-body { padding: 14px 16px; }
.pv-import-dropzone {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--bdr);
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
  background: var(--bg3);
}
.pv-import-icon {
  width: 22px;
  height: 22px;
  stroke: var(--teal);
  flex-shrink: 0;
}
.pv-import-filename {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--t1);
}
.pv-import-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--t3);
  margin-left: auto;
}
.pv-import-progress-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.pv-import-progress-bar {
  flex: 1;
  height: 5px;
  border-radius: 3px;
  background: var(--bg4);
  overflow: hidden;
}
.pv-import-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--teal);
  border-radius: 3px;
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}
.pv-import-progress-fill.animated { width: 100%; }
.pv-import-status {
  font-size: 10px;
  color: var(--t2);
  white-space: nowrap;
  font-family: 'IBM Plex Mono', monospace;
}
.pv-ready { color: #3FB950; }
.pv-import-preview { border: 1px solid var(--bdr); border-radius: 6px; overflow: hidden; }
.pv-import-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  border-bottom: 1px solid var(--bdr);
  font-size: 10px;
}
.pv-import-row:last-child { border-bottom: none; }
.pv-import-name { color: var(--t1); font-weight: 500; }
.pv-import-dept { color: var(--t3); font-family: 'IBM Plex Mono', monospace; }
.pv-import-row-more { color: var(--t4); font-family: 'IBM Plex Mono', monospace; justify-content: center; }

/* ── Card 3 : Monitoring ── */
/* .pv-card-monitor { } */
.pv-monitor-body { padding: 14px 16px; }
.pv-monitor-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--bdr);
  font-size: 11px;
}
.pv-monitor-row:last-of-type { border-bottom: none; margin-bottom: 12px; }
.pv-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pv-status-ok   { background: #3FB950; box-shadow: 0 0 5px rgba(63,185,80,.5); }
.pv-status-warn { background: var(--am); box-shadow: 0 0 5px rgba(255,191,0,.4); animation: pv-pulse-warn 1.8s ease-in-out infinite; }
@keyframes pv-pulse-warn {
  0%,100% { box-shadow: 0 0 4px rgba(255,191,0,.5); }
  50%     { box-shadow: 0 0 10px rgba(255,191,0,.8); }
}
.pv-monitor-name { flex: 1; color: var(--t2); }
.pv-monitor-val  { font-family: 'IBM Plex Mono', monospace; font-size: 10px; color: var(--t3); }
.pv-monitor-warn { color: var(--am) !important; }
.pv-monitor-alert {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(255,191,0,.08);
  border: 1px solid rgba(255,191,0,.2);
  border-radius: 6px;
  padding: 9px 12px;
  animation: pv-slide-in .5s ease 1.5s both;
}
@keyframes pv-slide-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pv-alert-icon { font-size: 13px; color: var(--am); flex-shrink: 0; margin-top: 1px; }
.pv-alert-text { display: flex; flex-direction: column; gap: 2px; }
.pv-alert-title { font-size: 11px; font-weight: 600; color: var(--t1); }
.pv-alert-time  { font-size: 10px; color: var(--t3); font-family: 'IBM Plex Mono', monospace; }

/* Contenu du block */
.preview-tl-line-drawn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: linear-gradient(to bottom, var(--pu), var(--teal));
  z-index: 0;
  pointer-events: none;
}

/* Dot on the spine — hollow circle, outline only */
.preview-tl-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--bg2);
  border: 1.5px solid rgba(255,255,255,.3);
  transition: background .3s, border-color .3s, box-shadow .3s;
  z-index: 2;
  position: relative;
  flex-shrink: 0;
}
.preview-spine-dot.tl-active .preview-tl-dot,
.pv-spine-dot.tl-active .preview-tl-dot {
  background: var(--bg2);
  border-color: var(--teal);
  box-shadow: 0 0 8px rgba(0,200,150,.6);
}

/* ── Responsive ──────────────────────────────────── */

/* Tablet (768–900px): scale down cards/text slightly, keep 3-col layout */
@media (max-width: 900px) {
  .pv-col-cards { gap: 40px; }
  .pv-col-spine { width: 56px; }
  .pv-card { font-size: 13px; }
  .pv-dash-num { font-size: 20px !important; }
  .pv-monitor-name, .pv-monitor-val { font-size: 11px; }
  .pv-dash-prog-label, .pv-dash-prog-pct { font-size: 11px; }
  .pv-import-filename { font-size: 12px; }

  .develop-right { gap: 0; padding-left: 0; }
  .dev-block {
    flex-direction: column;
    gap: 14px;
    padding: 24px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    width: 100%;
  }
  .dev-block:first-child {
    border-top: none;
    padding-top: 0;
  }
  .dev-block:last-child {
    padding-bottom: 0;
  }
  .dev-block-num {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--teal);
    letter-spacing: 0.08em;
    opacity: 0.75;
    margin-bottom: 2px;
  }
  .dev-block-inner-row {
    gap: 16px;
    min-width: 0;
  }
  .dev-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    border: 1px solid rgba(255, 255, 255, .09);
    background: rgba(255, 255, 255, .04);
    margin-top: 1px;
  }
  .dev-text {
    min-width: 0;
    flex: 1 1 0;
  }
  .dev-block-title { font-size: 14px; }
  .dev-block-desc {
    font-size: 13px;
    line-height: 1.65;
    max-width: none;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}

/* Mobile: stack to single column */
@media (max-width: 640px) {
  .pv-cols {
    flex-direction: column;
  }
  .pv-col-spine {
    display: none;
  }
  .pv-spine-line {
    display: none;
  }
  .pv-col-text {
    position: static;
  }
  .pv-text-block {
    position: static;
    padding-left: 0;
    margin-top: 24px;
  }
}
.pv-block-inner {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  min-width: 0;
}

.pv-block-inner .dev-text {
  min-width: 0;
  flex: 1 1 0;
}

/* Badge "New" */
.pv-badge-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  margin-top: 12px;
  border: 1px solid rgba(253, 253, 253, 0.15);
  padding: 6px 10px;
  border-radius: 32px;
  width: fit-content;
}
.pv-badge-new {
  font-size: 10px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(0,200,150,.15);
  color: var(--teal);
  border: 1px solid rgba(0,200,150,.2);
  flex-shrink: 0;
}
.pv-badge-text {
  font-size: 11px;
  color: var(--t3);
  font-family: 'IBM Plex Mono', monospace;
  white-space: normal;
}

/* Ship CSS */

/* ═══════════════════════════════════════════════════
   SHIP SECTION — Globe.gl Africa / World Dots
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   SHIP SECTION — Globe.gl / immersive map
═══════════════════════════════════════════════════ */

.ship-section {
  position: relative;
  overflow: hidden;
  padding: 0;
  min-height: 680px;
    background: radial-gradient(ellipse 50% 60% at 18% 50%, rgba(0, 200, 150, .05) 0%, transparent 55%), var(--bg2);
}

.ship-title-wrap {
  text-align: center;
  padding: 0 20px;
  margin-bottom: 68px;
}

.ship-title {
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 800;
  letter-spacing: -3px;
  color: var(--t1);
  line-height: 1;
}

/* ── Layout ─────────────────────────────────────── */
.ship-grid {
  display: grid;
  grid-template-columns: minmax(420px, 520px) minmax(420px, 520px);
  gap: 24px;
  align-items: start;
  justify-content: space-between;
}

.ship-left {
  padding-right: 16px;
  padding-bottom: 80px;
}

.ship-h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1.4;
  margin-bottom: 14px;
  letter-spacing: -0.3px;
}

.ship-p-large {
  font-size: 16px;
  color: var(--t1);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 14px;
}

.ship-p-small {
  font-size: 13.5px;
  color: var(--t3);
  font-weight: 300;
  line-height: 1.7;
  margin-bottom: 34px;
}

.ship-blocks {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.ship-block {
  align-items: flex-start;
}

.ship-badge-new {
  background: rgba(255, 100, 34, 0.20) !important;
  color: var(--or) !important;
  border-color: rgba(255, 100, 34, 0.25) !important;
  border-radius: 32px !important;
}

/* ── Right / Globe ─────────────────────────────── */
.ship-right {
  position: relative;
  display: flex;
  justify-content: flex-end;
}

.ship-globe-wrap {
  position: relative;
  width: min(100%, 640px);
  min-height: 560px;
  margin-left: -40px;
}

/* map container */
.ship-map,
#shipMapContainer {
  width: 100%;
  height: 560px;
  margin-bottom: -80px;
  background: transparent;
  overflow: visible;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

/* Globe canvas */
#shipMapContainer canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: scale(1.06) translateX(-7%);
  transform-origin: center center;
}

/* subtle glow behind globe */
.ship-globe-wrap::before {
  content: "";
  position: absolute;
  right: 10%;
  top: 12%;
  width: 380px;
  height: 380px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.06) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    transparent 72%
  );
  filter: blur(32px);
  pointer-events: none;
  z-index: 1;
}

/* fade / masking overlay */
.ship-globe-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent !important;
  pointer-events: none;
  z-index: 5;
}
.ship-fallback {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.ship-fallback img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transform: scale(1.04) translateX(-4%);
  opacity: 0.96;
  filter: contrast(1.04) brightness(0.96);
}
/* ── Responsive ─────────────────────────────────── */
@media (max-width: 1100px) {
  .ship-grid {
    grid-template-columns: minmax(280px, 390px) minmax(380px, 1fr);
    gap: 20px;
  }

  .ship-globe-wrap {
    width: min(100%, 580px);
    margin-left: -24px;
  }

  #shipMapContainer canvas {
    transform: scale(1.04) translateX(-5%);
  }
}

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

  .ship-right {
    order: -1;
    justify-content: center;
  }

  .ship-globe-wrap {
    width: 100%;
    max-width: 620px;
    min-height: 380px;
    margin-left: 0;
  }

  .ship-map,
  #shipMapContainer {
    height: 380px;
    margin-bottom: 0;
  }

  #shipMapContainer canvas {
    transform: scale(1.03) translateX(0);
  }

  .ship-globe-wrap::before {
    right: 50%;
    top: 18%;
    transform: translateX(50%);
    width: 280px;
    height: 280px;
  }

  .ship-globe-wrap::after {
    background: transparent !important;
  }

  .ship-left {
    padding-right: 0;
    padding-bottom: 40px;
  }
}

@media (max-width: 540px) {
  .ship-section {
    min-height: auto;
    padding-top: 44px;
    overflow: hidden;
  }

  .ship-title {
    letter-spacing: -2px;
  }

  .ship-map,
  #shipMapContainer {
    height: 290px;
  }

  #shipMapContainer canvas {
    transform: scale(1.02);
  }

  .ship-h3 {
    font-size: 16px;
  }

  .ship-p-large {
    font-size: 15px;
    line-height: 1.7;
  }

  .ship-p-small {
    font-size: 13px;
  }

  .ship-blocks {
    gap: 22px;
  }

  .pv-badge-row {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    gap: 8px;
    width: auto;
    max-width: 100%;
    padding: 5px 10px;
  }

  .pv-badge-text {
    white-space: normal;
    word-break: break-word;
    font-size: 10px;
    line-height: 1.4;
  }
}

/* test */
/* ═══════════════════════════════════════════════════
   PROVISIONING MOCK — Style CampusSuite
   À coller à la FIN de styles.css
═══════════════════════════════════════════════════ */

.prov-card {
  background: var(--bg3);
  border: 1px solid var(--bdr);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .45);
  position: relative;
}

.prov-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--teal), transparent);
  opacity: .5;
  z-index: 2;
}

/* ── Barre titre ────────────────────────────────── */
.prov-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  background: var(--bg2);
  border-bottom: 1px solid var(--bdr);
}

.prov-dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.prov-dots .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.dot-red    { background: #FF5F57; }
.dot-yellow { background: #FFBD2E; }
.dot-green  { background: #28CA41; }

.prov-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--t3);
  background: rgba(255,255,255,.04);
  border: 1px solid var(--bdr);
  border-radius: 4px;
  padding: 4px 12px;
  max-width: 340px;
}

.prov-url-right {
  flex-shrink: 0;
}

.prov-tag-live {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--teal);
  background: rgba(0, 200, 150, .1);
  border: 1px solid rgba(0, 200, 150, .2);
  padding: 3px 8px;
  border-radius: 3px;
  letter-spacing: .5px;
}

/* ── Body ───────────────────────────────────────── */
.prov-body {
  padding: 20px 22px 18px;
}

/* ── Header université ──────────────────────────── */
.prov-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--bdr);
}

.prov-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.prov-head-icon {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--teal);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.prov-head-icon svg {
  stroke: currentColor;
}

.prov-head-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--t1);
  letter-spacing: -.2px;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prov-head-sub {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--t3);
  letter-spacing: .2px;
}

.prov-head-right {
  flex-shrink: 0;
}

.prov-timer {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.prov-timer-val {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: .5px;
  line-height: 1;
}

.prov-timer-lbl {
  font-size: 9px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

/* ── Progress bar ───────────────────────────────── */
.prov-progress-wrap {
  margin-bottom: 18px;
}

.prov-progress-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--t2);
}

.prov-progress-pct {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--teal);
}

.prov-progress-bar {
  height: 4px;
  background: var(--bg2);
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.prov-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--teal2), var(--teal));
  border-radius: 2px;
  position: relative;
  transition: width .5s ease;
  box-shadow: 0 0 8px rgba(0, 200, 150, .4);
}

.prov-progress-fill::after {
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 30px;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3));
  animation: provShimmer 1.5s ease-in-out infinite;
}

@keyframes provShimmer {
  0%   { transform: translateX(-20px); opacity: 0; }
  50%  { opacity: 1; }
  100% { transform: translateX(10px); opacity: 0; }
}

/* ── Steps list ─────────────────────────────────── */
.prov-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
}

.prov-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  transition: background .2s;
  position: relative;
}

.prov-step.active {
  background: rgba(0, 200, 150, .06);
  border: 1px solid rgba(0, 200, 150, .15);
  padding: 9px 11px;
}

.prov-step.pending {
  opacity: .55;
}

/* ── Step status icon ── */
.prov-step-status {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.prov-step.done .prov-step-status {
  background: rgba(0, 200, 150, .18);
  color: var(--teal);
}

.prov-step.done .prov-step-status svg {
  stroke: currentColor;
}

.prov-step.active .prov-step-status {
  background: rgba(0, 200, 150, .1);
}

.prov-step.pending .prov-step-status {
  background: rgba(255,255,255,.04);
  border: 1px dashed var(--bdr);
}

.prov-step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--t4);
}

/* ── Spinner ── */
.prov-spinner {
  width: 12px;
  height: 12px;
  border: 1.5px solid rgba(0, 200, 150, .2);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: provSpin .8s linear infinite;
}

@keyframes provSpin {
  to { transform: rotate(360deg); }
}

/* ── Step content ── */
.prov-step-content {
  flex: 1;
  min-width: 0;
}

.prov-step-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 2px;
}

.prov-step-name {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
}

.prov-step.pending .prov-step-name {
  color: var(--t2);
  font-weight: 500;
}

.prov-step-time {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--t3);
  flex-shrink: 0;
}

.prov-step-time-active {
  color: var(--teal);
  font-weight: 600;
}

.prov-step-desc {
  font-size: 11.5px;
  color: var(--t3);
  line-height: 1.5;
}

.prov-step.active .prov-step-desc {
  color: var(--t2);
}

/* ── Footer summary ─────────────────────────────── */
.prov-footer {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--bdr);
}

.prov-footer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  flex: 1;
}

.prov-footer-val {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  line-height: 1;
  letter-spacing: -.3px;
}

.prov-footer-lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.prov-footer-sep {
  width: 1px;
  height: 24px;
  background: var(--bdr);
  flex-shrink: 0;
}

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 540px) {
  .prov-body {
    padding: 16px 14px 14px;
  }

  .prov-head-title {
    font-size: 14px;
  }

  .prov-head-sub {
    font-size: 10px;
  }

  .prov-timer-val {
    font-size: 16px;
  }

  .prov-step-name {
    font-size: 12.5px;
  }

  .prov-step-desc {
    font-size: 11px;
  }

  .prov-footer-val {
    font-size: 15px;
  }

  .prov-footer-lbl {
    font-size: 9px;
    letter-spacing: .5px;
  }

  .prov-url {
    font-size: 10px;
    max-width: 180px;
  }
}
/* ═══════════════════════════════════════════════════════════
   WAITLIST PRICING SECTION
═══════════════════════════════════════════════════════════ */

.wlp {
  position: relative;
  padding: 140px 0 160px;
  background: #050810;
  overflow: hidden;
}

/* Background atmosphere */
.wlp-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.wlp-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: .12;
}

.wlp-glow--1 {
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, var(--teal), transparent 70%);
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  animation: wlpGlow1 8s ease-in-out infinite alternate;
}

.wlp-glow--2 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, #7C6FFF, transparent 70%);
  bottom: -100px;
  right: 10%;
  opacity: .07;
  animation: wlpGlow2 11s ease-in-out infinite alternate;
}

@keyframes wlpGlow1 {
  from { opacity: .10; transform: translateX(-50%) scale(1); }
  to   { opacity: .16; transform: translateX(-50%) scale(1.08); }
}

@keyframes wlpGlow2 {
  from { opacity: .05; transform: scale(1); }
  to   { opacity: .10; transform: scale(1.12); }
}

.wlp-rings {
  position: absolute;
  width: 900px;
  height: 900px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.wlp-rings circle {
  fill: none;
  stroke: rgba(0,200,150,.045);
  animation: wlpRingPulse 6s ease-in-out infinite;
}

.wlp-rings circle:nth-child(2) { animation-delay: .8s; }
.wlp-rings circle:nth-child(3) { animation-delay: 1.6s; }
.wlp-rings circle:nth-child(4) { animation-delay: 2.4s; }

@keyframes wlpRingPulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

/* Layout */
.wlp-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 64px;
}

/* Header */
.wlp-header {
  max-width: 680px;
}

.wlp-title {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  color: var(--t1);
  letter-spacing: -.03em;
  white-space: nowrap;
  margin: 20px 0 24px;
}

.wlp-title-em {
  display: block;
  font-style: italic;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  color: var(--teal);
  letter-spacing: -.02em;
}

.wlp-desc {
  font-size: 16px;
  color: var(--t3);
  line-height: 1.75;
  max-width: 540px;
  margin: 0 auto;
}

/* Access card */
.wlp-card {
  position: relative;
  width: 100%;
  max-width: 520px;
}

.wlp-card-ring {
  position: absolute;
  inset: -1px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(0,200,150,.35), rgba(124,111,255,.15), transparent 60%);
  z-index: 0;
  animation: wlpRing 6s ease-in-out infinite alternate;
}

@keyframes wlpRing {
  from { opacity: .7; }
  to   { opacity: 1; }
}

.wlp-card-inner {
  position: relative;
  z-index: 1;
  background: rgba(8, 14, 28, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 48px 48px 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}

/* Badge */
.wlp-access-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(0,200,150,.08);
  border: 1px solid rgba(0,200,150,.2);
  padding: 7px 16px;
  border-radius: 100px;
}

.wlp-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  animation: wlpBlink 2s ease-in-out infinite;
}

@keyframes wlpBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: .3; }
}

/* Price block */
.wlp-price-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.wlp-price-from {
  font-size: 12px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--t3);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.wlp-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.wlp-price-amount {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(38px, 6vw, 56px);
  font-weight: 800;
  color: var(--t1);
  letter-spacing: -.03em;
  line-height: 1;
}

.wlp-price-period {
  font-size: 16px;
  color: var(--t3);
  font-weight: 400;
}

.wlp-price-desc {
  font-size: 12px;
  color: var(--t3);
  font-family: 'IBM Plex Mono', monospace;
  line-height: 1.8;
}

/* Separator */
.wlp-card-sep {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
}

/* Benefits */
.wlp-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  text-align: left;
}

.wlp-benefit {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--t2);
  line-height: 1.5;
}

.wlp-benefit-icon {
  width: 16px;
  height: 16px;
  stroke: var(--teal);
  flex-shrink: 0;
}

/* CTAs */
.wlp-ctas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.wlp-cta-primary {
  width: 100%;
  padding: 17px 28px;
  background: var(--teal);
  color: #050810;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: -.01em;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 0 40px rgba(0,200,150,.2);
}

.wlp-cta-primary:hover {
  background: #00dea8;
  transform: translateY(-1px);
  box-shadow: 0 0 60px rgba(0,200,150,.35);
}

.wlp-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--t3);
  text-decoration: none;
  transition: color .2s;
  font-family: 'IBM Plex Mono', monospace;
}

.wlp-cta-secondary svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.wlp-cta-secondary:hover {
  color: var(--t1);
}

.wlp-cta-secondary:hover svg {
  transform: translateX(3px);
}

/* Exclusivity note */
.wlp-exclusivity {
  font-size: 13px;
  color: var(--t4);
  font-family: 'IBM Plex Mono', monospace;
  max-width: 480px;
  line-height: 1.7;
  letter-spacing: .02em;
}

/* Responsive */
@media (max-width: 1024px) {
  .wlp {
    padding: 100px 0 120px;
  }
  .wlp-title {
    font-size: clamp(30px, 5vw, 48px);
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .wlp-card-inner {
    padding: 32px 20px 28px;
  }
  .wlp {
    padding: 80px 0 100px;
  }
  .wlp-inner {
    gap: 40px;
  }
  .wlp-price-amount {
    font-size: clamp(30px, 8vw, 42px);
  }
  .wlp-header {
    width: 100%;
    padding: 0 4px;
  }
  .wlp-title {
    font-size: clamp(26px, 8vw, 36px);
  }
  .wlp-desc {
    font-size: 14px;
  }
  .wlp-card {
    width: 100%;
  }
  .wlp-exclusivity {
    font-size: 12px;
    max-width: 100%;
    padding: 0 4px;
  }
}

/* ═══════════════════════════════════════════════════════════
   WLP — RESPONSIVE PRICING LAYOUT (mobile-first)
═══════════════════════════════════════════════════════════ */

/* Grid wrapper — stacked on mobile */
.wlp-pricing-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 980px;
}

/* ── PRICE BLOCK (left / top) ── */
.wlp-price-block {
  background: rgba(8,14,28,.96);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,200,150,.07), 0 24px 64px rgba(0,0,0,.5), 0 0 60px rgba(0,200,150,.06);
}
.wlp-price-block::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(0,200,150,.07), transparent 65%);
  pointer-events: none;
}

.wlp-plan-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 6px;
}

.wlp-price-from {
  font-size: 13px;
  color: var(--t3);
  margin-bottom: 4px;
}

.wlp-price-main {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-bottom: 4px;
}

.wlp-price-amount {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: var(--t1);
  line-height: 1;
  letter-spacing: -.03em;
}

.wlp-price-currency {
  font-size: 16px;
  font-weight: 600;
  color: var(--t2);
  margin-bottom: 8px;
  letter-spacing: -.3px;
}

.wlp-price-period {
  font-size: 13px;
  color: var(--t3);
  margin-bottom: 24px;
}

.wlp-card-divider {
  height: 1px;
  background: rgba(255,255,255,.07);
  margin-bottom: 20px;
}

.wlp-includes-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 14px;
}

.wlp-benefits {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}

.wlp-benefit {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: var(--t2);
  line-height: 1.4;
  text-align: left;
}
.wlp-benefit strong { color: var(--t1); font-weight: 600; }

.wlp-benefit-check {
  width: 18px; height: 18px;
  border-radius: 50%; flex-shrink: 0;
  background: rgba(0,200,150,.12);
  border: 1px solid rgba(0,200,150,.2);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.wlp-benefit-check svg {
  width: 9px; height: 9px;
  stroke: var(--teal); fill: none; stroke-width: 2.5;
}

/* CTAs */
.wlp-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.wlp-cta-primary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 17px 24px;
  background: var(--teal);
  color: #050810;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px; font-weight: 700;
  border: none; border-radius: 12px; cursor: pointer;
  letter-spacing: -.01em;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 0 40px rgba(0,200,150,.2);
  -webkit-tap-highlight-color: transparent;
}
.wlp-cta-primary:hover {
  background: #00dea8;
  transform: translateY(-1px);
  box-shadow: 0 0 60px rgba(0,200,150,.35);
}
.wlp-cta-primary svg {
  width: 13px; height: 13px;
  stroke: currentColor; fill: none; stroke-width: 2.5;
}

.wlp-cta-secondary {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  background: transparent; color: var(--t2);
  font-size: 14px; font-weight: 500;
  padding: 15px 24px;
  border: 1px solid rgba(255,255,255,.12);
  cursor: pointer; border-radius: 12px;
  transition: border-color .2s, color .2s;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wlp-cta-secondary:hover { border-color: rgba(255,255,255,.25); color: var(--t1); }
.wlp-cta-secondary svg {
  width: 12px; height: 12px;
  stroke: currentColor; fill: none; stroke-width: 2;
}

/* ── PERKS CARD (right / bottom) ── */
.wlp-perks-card {
  background: #0a1c36;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.wlp-right-title {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 20px; font-weight: 700;
  color: var(--t1); line-height: 1.2;
  margin-bottom: 4px; letter-spacing: -.3px;
  white-space: pre-line;
}
.wlp-right-sub {
  font-size: 13px; color: var(--t3);
  margin-bottom: 20px; line-height: 1.55;
}

.wlp-perks { display: flex; flex-direction: column; gap: 0; }

.wlp-perk {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.wlp-perk:first-child { padding-top: 0; }
.wlp-perk:last-child { border-bottom: none; padding-bottom: 0; }

.wlp-perk-ic {
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.wlp-perk-ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.wlp-pic-teal   { background: rgba(0,200,150,.18);   color: #00C896; }
.wlp-pic-blue   { background: rgba(99,102,241,.18);  color: #818CF8; }
.wlp-pic-amber  { background: rgba(245,158,11,.18);  color: #FCD34D; }
.wlp-pic-purple { background: rgba(124,111,255,.18); color: #A78BFA; }

.wlp-perk-title { font-size: 13px; font-weight: 700; color: var(--t1); margin-bottom: 3px; }
.wlp-perk-desc  { font-size: 12px; color: var(--t3); line-height: 1.5; }

/* Desktop-only footer note inside perks card */
.wlp-right-footer {
  display: none;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.wlp-right-footer-txt { font-size: 11.5px; color: var(--t3); line-height: 1.6; }
.wlp-right-footer-txt strong { color: var(--t2); font-weight: 500; }

/* ── VALUE NOTE (mobile only) ── */
.wlp-value-note {
  background: rgba(0,200,150,.06);
  border: 1px solid rgba(0,200,150,.12);
  border-radius: 14px;
  padding: 16px 18px;
  margin-top: 12px;
  font-size: 13px; color: var(--t2); line-height: 1.6;
  position: relative; z-index: 1;
}
.wlp-value-note strong { color: var(--t1); font-weight: 600; }

/* ── TABLET (641px–899px): 2-col side-by-side ── */
@media (min-width: 641px) and (max-width: 899px) {
  .wlp-pricing-grid {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,200,150,.08), 0 24px 60px rgba(0,0,0,.5);
  }

  .wlp-price-block {
    flex: 1;
    border: none; border-radius: 0;
    padding: 36px 28px;
    box-shadow: none;
  }

  .wlp-perks-card {
    width: 300px; flex-shrink: 0;
    border: none; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0;
    padding: 36px 24px;
  }

  .wlp-price-amount { font-size: 44px; }
  .wlp-benefit { font-size: 13px; }
  .wlp-cta-primary  { font-size: 15px; padding: 15px 24px; }
  .wlp-cta-secondary { font-size: 13px; padding: 14px 24px; }
  .wlp-right-title { font-size: 17px; }

  .wlp-right-footer { display: block; }
  .wlp-value-note   { display: none; }
}

/* ── DESKTOP (≥900px): 2-col grid ── */
@media (min-width: 900px) {
  .wlp-pricing-grid {
    flex-direction: row;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0,200,150,.08), 0 40px 100px rgba(0,0,0,.5), 0 0 80px rgba(0,200,150,.06);
  }

  .wlp-price-block {
    flex: 1;
    border: none; border-radius: 0;
    padding: 48px 52px;
    box-shadow: none;
  }

  .wlp-perks-card {
    width: 380px; flex-shrink: 0;
    border: none; border-left: 1px solid rgba(255,255,255,.1); border-radius: 0;
    padding: 48px 40px;
  }

  .wlp-price-amount { font-size: 62px; }
  .wlp-benefit { font-size: 14px; }
  .wlp-cta-primary  { font-size: 17px; padding: 18px 32px; }
  .wlp-cta-secondary { font-size: 14px; padding: 16px 32px; }

  /* Show desktop footer note, hide mobile value note */
  .wlp-right-footer { display: block; }
  .wlp-value-note   { display: none; }
}

/* ── MOBILE adjustments ── */
@media (max-width: 640px) {
  .wlp-price-amount { font-size: 40px; }
  .wlp-price-block  { padding: 24px 20px 20px; }
  .wlp-perks-card   {
    padding: 24px 20px;
    background: #0a1c36;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 18px;
    margin-top: 2px;
  }
  .wlp-right-title  { font-size: 20px; }
  .wlp-right-sub    { font-size: 12.5px; margin-bottom: 16px; }
  .wlp-perk { padding: 13px 0; gap: 14px; }
  .wlp-perk-ic { width: 38px; height: 38px; border-radius: 11px; }
  .wlp-perk-ic svg { width: 17px; height: 17px; }
  .wlp-perk-title { font-size: 13.5px; }
}

/* New CSS for Africa.ja & Demo.js components */
/* ═══════════════════════════════════════════════════════════
   AFRICA SECTION
═══════════════════════════════════════════════════════════ */

.africa {
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.africa::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 10% 50%, rgba(0,200,150,.05) 0%, transparent 70%),
    radial-gradient(ellipse 40% 60% at 90% 30%, rgba(124,111,255,.04) 0%, transparent 70%);
  pointer-events: none;
}

.africa-header {
  text-align: center;
  max-width: 720px;
  margin: 0 auto 64px;
}

.africa-title {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--t1);
  margin-bottom: 20px;
  white-space: pre-line;
}

.africa-sub {
  font-size: 17px;
  color: var(--t2);
  line-height: 1.7;
}

/* Stats row */
.africa-stats {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: var(--border2);
  margin-bottom: 48px;
}

.africa-stat {
  flex: 1;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.africa-stat-sep {
  width: 1px;
  background: var(--bdr2);
  flex-shrink: 0;
}

.africa-stat-val {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  color: var(--teal);
  line-height: 1;
}

.africa-stat-lbl {
  font-size: 13px;
  color: var(--t2);
  line-height: 1.5;
  flex: 1;
}

.africa-stat-src {
  font-size: 11px;
  color: var(--t3);
  font-family: 'JetBrains Mono', monospace;
}

/* Opportunity block */
.africa-opportunity {
  background: linear-gradient(135deg, rgba(0,200,150,.06) 0%, rgba(124,111,255,.04) 100%);
  border: 1px solid rgba(0,200,150,.15);
  padding: 40px 48px;
  margin-bottom: 48px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 40px;
  align-items: center;
}

.africa-opp-badge {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(0,200,150,.1);
  padding: 6px 14px;
  white-space: nowrap;
  align-self: flex-start;
}

.africa-opp-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 10px;
}

.africa-opp-text {
  font-size: 15px;
  color: var(--t2);
  line-height: 1.7;
}

.africa-opp-markets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 200px;
}

.africa-market {
  display: flex;
  align-items: center;
  gap: 10px;
}

.africa-market-flag { font-size: 18px; }

.africa-market-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--t1);
  min-width: 90px;
}

.africa-market-tag {
  font-size: 11px;
  color: var(--teal);
  background: rgba(0,200,150,.08);
  padding: 2px 8px;
  white-space: nowrap;
}

/* Pillars */
.africa-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 32px;
}

.africa-pillar {
  padding: 32px;
  border: var(--border);
  background: rgba(255,255,255,.02);
  transition: border-color .2s, background .2s;
}

.africa-pillar:hover {
  border-color: rgba(0,200,150,.2);
  background: rgba(0,200,150,.03);
}

.africa-pillar-num {
  font-size: 12px;
  color: var(--teal);
  margin-bottom: 14px;
  letter-spacing: .1em;
}

.africa-pillar-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 12px;
}

.africa-pillar-text {
  font-size: 14px;
  color: var(--t2);
  line-height: 1.7;
}

.africa-source {
  font-size: 11px;
  color: var(--t3);
  text-align: center;
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════
   DEMO SECTION
═══════════════════════════════════════════════════════════ */

.demo {
  padding: 120px 0;
  position: relative;
  background: var(--bg2);
  border-top: var(--border);
  border-bottom: var(--border);
}

.demo-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* Left */
.demo-title {
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.1;
  color: var(--t1);
  margin-bottom: 20px;
  white-space: pre-line;
}

.demo-sub {
  font-size: 16px;
  color: var(--t2);
  line-height: 1.7;
  margin-bottom: 32px;
}

.demo-promises {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

.demo-promise {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--t2);
}

.demo-promise-bullet {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Deploy log terminal */
.demo-log {
  background: #0a0f1a;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  overflow: hidden;
}

.demo-log-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.demo-log-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--t3);
  margin-left: 6px;
}

.demo-log-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.demo-log-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: var(--t2);
}

.demo-log-line--dim {
  opacity: 0.35;
}

.demo-log-ok {
  color: #3FB950;
  font-size: 13px;
}

.demo-log-spin {
  color: var(--teal);
  animation: termSpin 1.2s linear infinite;
  display: inline-block;
}

@keyframes termSpin {
  0%   { content: '◎'; opacity: 1; }
  50%  { opacity: .4; }
  100% { opacity: 1; }
}

.demo-log-wait {
  color: var(--t3);
}

.demo-log-time {
  margin-left: auto;
  color: var(--t3);
  font-size: 11px;
}

.demo-log-live {
  color: var(--teal);
}

.demo-log-cursor .demo-log-prompt {
  color: var(--teal);
  animation: blink .8s step-end infinite;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Right — terminal form */
.demo-form-wrap {
  background: #0a0f1a;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  overflow: hidden;
}

.demo-term-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 11px 16px;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.demo-term-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--t3);
  margin-left: 6px;
}

.demo-term-body {
  padding: 24px 28px 28px;
}

.demo-term-intro {
  margin-bottom: 20px;
}

.demo-t-comment {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  color: rgba(0,200,150,.5);
}

.demo-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.demo-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.demo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.demo-label {
  font-size: 11px;
  font-family: 'IBM Plex Mono', monospace;
  color: var(--t3);
}

.demo-input {
  background: rgba(255,255,255,.03);
  border: none;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--t1);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  padding: 10px 30px 10px 4px; /* right padding for check icon */
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
  border-radius: 0;
}

.demo-input::placeholder {
  color: rgba(255,255,255,.18);
  font-style: italic;
}

.demo-input:focus {
  border-bottom-color: var(--teal);
  background: rgba(0,200,150,.03);
}

/* ── Validation states ── */
.demo-input--valid {
  border-bottom-color: #00C896 !important;
}
.demo-input--error {
  border-bottom-color: #FF5032 !important;
  animation: demo-shake .3s ease;
}
@keyframes demo-shake {
  0%, 100% { transform: translateX(0); }
  25%       { transform: translateX(-4px); }
  75%       { transform: translateX(4px); }
}

/* ── Input wrapper for check icon ── */
.demo-input-wrap {
  position: relative;
}
.demo-check {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(0,200,150,.15);
  border: 1px solid rgba(0,200,150,.3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s, transform .2s;
  pointer-events: none;
  flex-shrink: 0;
}
.demo-check svg {
  width: 8px; height: 8px;
  stroke: #00C896; stroke-width: 2.5;
}
.demo-input-wrap--valid .demo-check {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.demo-input-wrap--error .demo-check {
  opacity: 0;
}
/* Adjust check icon position for textarea */
.demo-input-wrap:has(textarea) .demo-check {
  top: 16px;
  transform: none;
}

/* Error wrap label tint */
.demo-input-wrap--error ~ .demo-label,
.demo-field:has(.demo-input-wrap--error) .demo-label {
  color: rgba(255,80,50,.8);
}

.demo-select {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300C896' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 28px center; /* leave room for check icon */
  background-size: 14px;
  padding-right: 50px;
}

.demo-select option {
  background: #0a0f1a;
  color: var(--t1);
}

.demo-textarea {
  resize: vertical;
  min-height: 72px;
}

.demo-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  padding: 14px 20px;
  font-size: 13px;
  font-weight: 700;
  font-family: 'IBM Plex Mono', monospace;
  cursor: pointer;
  border: 1px solid var(--teal);
  background: rgba(0,200,150,.08);
  color: var(--teal);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background .2s, color .2s;
  letter-spacing: .03em;
}

.demo-submit:hover {
  background: var(--teal);
  color: #0a0f1a;
}

.demo-submit svg {
  width: 20px;
  height: 20px;
}

.demo-form-legal {
  font-size: 11px;
  color: var(--t3);
  text-align: center;
  line-height: 1.6;
  font-family: 'IBM Plex Mono', monospace;
}

/* Success state */
.demo-success {
  text-align: center;
  padding: 60px 20px;
}

.demo-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0,200,150,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.demo-success-icon svg {
  width: 28px;
  height: 28px;
  stroke: var(--teal);
}

.demo-success h3 {
  font-size: 24px;
  color: var(--t1);
  margin-bottom: 12px;
}

.demo-success p {
  font-size: 15px;
  color: var(--t2);
  line-height: 1.7;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1024px) {
  .africa-opportunity {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .africa-opp-markets {
    flex-direction: row;
    flex-wrap: wrap;
    min-width: unset;
  }
}

@media (max-width: 960px) {
  .demo-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .demo-title {
    text-align: center;
  }
  .demo-field-row {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .africa-stats {
    flex-direction: column;
  }
  .africa-stat-sep {
    width: 100%;
    height: 1px;
  }
  .africa-pillars {
    grid-template-columns: 1fr;
  }
  .africa-opportunity {
    padding: 28px 24px;
  }
  .demo-field-row {
    grid-template-columns: 1fr;
  }
  .demo-term-body {
    padding: 20px 16px 24px;
  }
}

/* ── new-sections.css ── */
/* ═══════════════════════════════════════════════════════════════
   new-sections.css
   CSS pour : .problem-section + .demo-cta-section
   Respecte le design system existant :
   - var(--t1/t2/t3/t4), var(--bdr)
   - border-radius pills/cards cohérents avec le reste du site
   - font Bricolage Grotesque + IBM Plex Mono
   - couleur teal #00C896
═══════════════════════════════════════════════════════════════ */


/* ╔═══════════════════════════════════════════════════════════╗
   ║  PROBLEM SECTION                                          ║
   ╚═══════════════════════════════════════════════════════════╝ */

.problem-section {
  padding: 80px 0 100px;
  position: relative;
  overflow: hidden;
}

/* Subtle red/orange tint — symbolise le problème, pas le produit */
.problem-section::before {
  content: '';
  position: absolute;
  top: 10%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 600px;
  background: radial-gradient(ellipse at 50% 30%,
    rgba(255,80,50,.05) 0%,
    transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ── Header ── */
.prob-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 64px;
  position: relative; z-index: 1;
}
.prob-title {
  font-size: clamp(26px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--t1);
  margin-bottom: 18px;
  white-space: nowrap;
}
.prob-sub {
  font-size: clamp(13px, 1.2vw, 15px);
  color: var(--t2);
  line-height: 1.8;
  font-weight: 300;
}

/* ── 3 blocks ── */
.prob-blocks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--bdr);
  border: 1px solid var(--bdr);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 64px;
  position: relative; z-index: 1;
}
.prob-block {
  background: var(--surface, rgba(255,255,255,.02));
  padding: 36px 32px 38px;
}
.prob-block-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 20px;
}
.prob-icon {
  width: 44px; height: 44px;
  background: rgba(255,80,50,.08);
  border: 1px solid rgba(255,80,50,.18);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #FF5032;
}
.prob-icon svg { width: 20px; height: 20px; }
.prob-num {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--t4, rgba(255,255,255,.2));
  letter-spacing: 1px;
}
.prob-block-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--t1);
  margin-bottom: 10px;
  letter-spacing: -.2px;
}
.prob-block-desc {
  font-size: 13px;
  color: var(--t3);
  line-height: 1.65;
  font-weight: 300;
}

/* ── Before / After comparison ── */
.prob-vs {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 24px;
  align-items: center;
  position: relative; z-index: 1;
}
.prob-vs-before,
.prob-vs-after {
  border: 1px solid var(--bdr);
  border-radius: 18px;
  padding: 28px 28px 24px;
}
.prob-vs-after {
  border-color: rgba(0,200,150,.22);
  background: rgba(0,200,150,.03);
}
.prob-vs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--t3);
  margin-bottom: 18px;
  font-family: 'IBM Plex Mono', monospace;
}
.prob-vs-label--after { color: #00C896; }
.prob-vs-items { display: flex; flex-direction: column; gap: 10px; }
.prob-vs-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
}
.prob-vs-bad  { color: var(--t3); }
.prob-vs-good { color: var(--t2); }
.prob-vs-x {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(255,80,50,.1);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #FF5032;
  flex-shrink: 0;
}
.prob-vs-check {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,200,150,.14);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #00C896;
  flex-shrink: 0;
}
.prob-vs-arrow {
  display: flex; align-items: center; justify-content: center;
}
.prob-vs-arrow svg { width: 40px; height: 40px; }

/* ═══════════════════════════════════════════════════════════════
   DEMO CTA SECTION
═══════════════════════════════════════════════════════════════ */

.demo-cta-section {
  padding: 80px 0 120px;
  position: relative;
  overflow: hidden;
}
.demo-cta-section::before {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse at 50% 80%,
    rgba(0,200,150,.09) 0%,
    transparent 65%);
  pointer-events: none; z-index: 0;
}

/* ── 2-col layout ── */
.dcta-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
  position: relative; z-index: 1;
}

/* ── Copy ── */
.dcta-title {
  font-size: clamp(28px, 3vw, 44px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -1px;
  color: var(--t1);
  margin-bottom: 18px;
}
.dcta-title em { font-style: italic; color: #00C896; font-weight: 300; }
.dcta-sub {
  font-size: 15px;
  color: var(--t2);
  line-height: 1.75;
  font-weight: 300;
  margin-bottom: 36px;
}

/* Checklist */
.dcta-checklist {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px;
}
.dcta-check-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--t2);
  line-height: 1.5;
}
.dcta-check-icon {
  width: 22px; height: 22px;
  background: rgba(0,200,150,.12);
  border: 1px solid rgba(0,200,150,.22);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.dcta-check-icon svg { width: 11px; height: 11px; }

/* CTA buttons */
.dcta-btns {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.dcta-btn-primary {
  /* inherits btn-primary styles */
  font-size: 14px;
}
.dcta-link {
  /* inherits btn-secondary styles */
  font-size: 13px;
}
.dcta-link:hover { border-color: rgba(255,255,255,.25); color: var(--t1); }

/* ── Form card ── */
/*.dcta-form-wrap {} */
.dcta-form-card {
  background: linear-gradient(160deg, rgba(14,34,64,.8) 0%, rgba(8,20,44,.85) 100%);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 24px;
  padding: 36px;
  backdrop-filter: blur(20px);
  box-shadow:
    0 0 0 1px rgba(0,200,150,.12),
    0 40px 100px rgba(0,0,0,.5),
    0 0 60px rgba(0,200,150,.06);
}

.dcta-form-header { margin-bottom: 28px; }
.dcta-form-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,200,150,.1);
  border: 1px solid rgba(0,200,150,.22);
  border-radius: 40px;
  padding: 6px 14px;
  font-size: 11px;
  font-weight: 700;
  color: #00C896;
  letter-spacing: .3px;
  margin-bottom: 8px;
}
.dcta-badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00C896;
  animation: hd-pulse 1.8s ease-in-out infinite;
  flex-shrink: 0;
}
.dcta-form-note {
  font-size: 11px;
  color: var(--t3);
  font-family: 'IBM Plex Mono', monospace;
}

/* Fields */
.dcta-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dcta-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.dcta-field { display: flex; flex-direction: column; gap: 6px; }
.dcta-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--t3);
  letter-spacing: .4px;
  text-transform: uppercase;
}
.dcta-input {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding: 12px 40px 12px 14px; /* right padding for check icon */
  font-size: 13px;
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--t1);
  outline: none;
  transition: border-color .2s, background .2s;
  width: 100%;
  appearance: none;
}
.dcta-input::placeholder { color: var(--t4, rgba(255,255,255,.22)); }
.dcta-input:focus {
  border-color: rgba(0,200,150,.4);
  background: rgba(0,200,150,.04);
}

/* ── Validation states ── */
.dcta-input--valid {
  border-color: rgba(0,200,150,.5) !important;
  background: rgba(0,200,150,.04) !important;
}
.dcta-input--error {
  border-color: rgba(255,80,50,.55) !important;
  background: rgba(255,80,50,.04) !important;
  animation: dcta-shake .3s ease;
}
@keyframes dcta-shake {
  0%,100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

/* ── Input wrapper + check icon ── */
.dcta-input-wrap {
  position: relative;
}
.dcta-check {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(0,200,150,.15);
  border: 1px solid rgba(0,200,150,.35);
  display: flex; align-items: center; justify-content: center;
  color: #00C896;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
  flex-shrink: 0;
}
.dcta-check svg { width: 8px; height: 8px; stroke: #00C896; }
.dcta-input-wrap--valid .dcta-check {
  opacity: 1;
}
/* keep select arrow visible + push arrow left when valid */
.dcta-select {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 6l4 4 4-4' stroke='rgba(255,255,255,.3)' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 36px center;
  background-size: 16px;
  cursor: pointer;
  padding-right: 56px;
}
.dcta-select option { background: #0C1E36; color: #fff; }

/* textarea: check icon anchored top-right, not vertically centered */
.dcta-input-wrap:has(.dcta-textarea) .dcta-check {
  top: 14px;
  transform: none;
}
.dcta-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Optional label hint */
.dcta-optional {
  font-size: 11px;
  color: var(--t4, rgba(255,255,255,.3));
  font-weight: 400;
}

/* Submit */
.dcta-submit {
  width: 100%;
  justify-content: center;
  margin-top: 4px;
  border-radius: 12px !important;
  font-size: 14px;
  font-weight: 700;
  transition: all .22s, opacity .2s;
}
.dcta-submit:disabled {
  opacity: .65;
  cursor: not-allowed;
  transform: none !important;
}
@keyframes dcta-spin {
  to { transform: rotate(360deg); }
}
.dcta-privacy {
  text-align: center;
  font-size: 11px;
  color: var(--t4, rgba(255,255,255,.22));
  line-height: 1.5;
}

/* Success state */
.dcta-success {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  gap: 16px;
}
.dcta-success-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--t1);
  font-family: 'Bricolage Grotesque', sans-serif;
}
.dcta-success-sub {
  font-size: 14px;
  color: var(--t2);
  line-height: 1.65;
}


/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet: garder les 3 blocs en grille et le VS horizontal */
@media (max-width: 960px) and (min-width: 541px) {
  .problem-section { padding: 64px 0 80px; }

  /* 3 blocs en 3 colonnes compactes */
  .prob-blocks {
    grid-template-columns: repeat(3, 1fr);
    gap: 1px;
  }
  .prob-block { padding: 24px 20px 26px; }
  .prob-block-title { font-size: 15px; }
  .prob-block-desc  { font-size: 12.5px; }

  /* VS comparison : garder horizontal, réduire gaps */
  .prob-vs {
    grid-template-columns: 1fr 40px 1fr;
    gap: 16px;
  }
  .prob-vs-before,
  .prob-vs-after { padding: 22px 22px 20px; }
  .prob-vs-item { font-size: 12.5px; }
}

/* Mobile : 1 colonne, VS vertical */
@media (max-width: 540px) {
  .prob-blocks {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .prob-block { padding: 28px 24px; }

  .prob-vs {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .prob-vs-arrow { transform: rotate(90deg); }
}

@media (max-width: 540px) {
  .problem-section, .demo-cta-section { padding: 60px 0 72px; }
  .prob-title { font-size: 24px; white-space: normal; }
  .dcta-title { font-size: 26px; text-align: center; }
  .dcta-form-card { padding: 24px 20px; border-radius: 18px; }
  .dcta-field-row { grid-template-columns: 1fr; }
  .dcta-btns { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 960px) {
  .dcta-title { text-align: center; }
}

/* DemoCTA responsive */
@media (max-width: 960px) {
  .dcta-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
}