:root{
    /* Light Alpine palette */
    --bg:        #f4f1e8;     /* warm cream */
    --bg-2:      #ebe5d7;     /* deeper cream */
    --paper:     #fbf9f3;
    --ink:       #1a1f2c;     /* deep navy ink */
    --ink-dim:   #5a6273;
    --ink-mute:  #8b91a0;
    --line:      #d8d2c2;
    --line-2:    #c2bba7;
    --accent:    #c8311a;     /* swiss red, deeper for light bg */
    --alpine:    #3d6e9c;     /* alpine blue */
    --moss:      #5e7a4a;     /* alpine forest */
    --gold:      #c8954a;
    --snow:      #fbfaf7;
    /* sky — plein jour joyeux par défaut */
    --sky-top:   #9cd4f0;
    --sky-mid:   #c2e2f0;
    --sky-bot:   #e0eef3;
    /* mountains — plus chaudes et colorées */
    --mt-far:    #b9b3d4;
    --mt-mid:    #6e7eab;
    --mt-near:   #4d6b48;
    /* lake */
    --lk-top:    #8ec4d8;
    --lk-bot:    #426a90;
    /* celest */
    --celest:        radial-gradient(circle at 38% 38%, #fff8e8, #ffe7a8 38%, #ffc880 62%, #f5a655 88%);
    --celest-glow:   rgba(255,210,150,.55);
    --stars-opacity: 0;
    /* hero text — varie de jour à nuit */
    --hero-ink:     var(--ink);
    --hero-ink-dim: var(--ink-dim);
    --hero-ink-mute:var(--ink-mute);
  }

  .mono{font-family:'Geist Mono',ui-monospace,monospace;}
  .uc{text-transform:uppercase;letter-spacing:.12em;}
  .serif{font-family:'Fraunces',serif;}

  /* ─────────────────────── ALPINE HERO ─────────────────────── */
  .hero{
    position:relative;
    /* Full-bleed : déborde de tout parent centré pour occuper 100vw */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    height:100vh; min-height:720px;
    overflow:hidden;
    background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 38%, var(--sky-bot) 78%, var(--lk-top) 100%);
    transition: background 1.6s ease;
  }
  .hero-grain{
    position:absolute; inset:0; pointer-events:none; opacity:.22; mix-blend-mode:multiply;
    background-image:
      radial-gradient(circle at 20% 30%, rgba(0,0,0,.08), transparent 40%),
      radial-gradient(circle at 80% 80%, rgba(0,0,0,.05), transparent 40%);
  }

  /* SUN / MOON */
  .sun{
    position:absolute; left:62%; top:18%;
    width:120px; height:120px; border-radius:50%;
    background: var(--celest);
    box-shadow:0 0 80px var(--celest-glow), 0 0 160px rgba(255,180,120,.25);
    animation: sunBob 12s ease-in-out infinite;
    transition: background 1.6s ease, box-shadow 1.6s ease, left 1.6s ease, top 1.6s ease;
  }
  .sun::after{
    content:""; position:absolute; inset:-30px; border-radius:50%;
    background:radial-gradient(circle, rgba(255,210,160,.25), transparent 65%);
  }
  @keyframes sunBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }

  /* CLOUDS — formes SVG variées et organiques */
  .cloud{
    position:absolute;
    left: -15%;
    will-change: transform;
    filter: drop-shadow(0 6px 14px rgba(40,60,90,.08));
    animation: drift-cloud var(--dur, 70s) linear infinite;
    animation-delay: var(--delay, 0s);
    pointer-events: none;
  }
  .cloud svg{ display:block; width:100%; height:auto; }
  @keyframes drift-cloud {
    0%   { transform: translateX(0); }
    100% { transform: translateX(130vw); }
  }

  /* BATS — chauves-souris en mode crépuscule/nuit */
  .bats{
    position:absolute; inset:0;
    pointer-events:none;
    z-index: 6;
    opacity: var(--bats-opacity, 0);
    transition: opacity 1.6s ease;
  }
  .bat{
    position:absolute;
    width: 26px; height: 12px;
    top: var(--bat-top, 18%);
    left: -10%;
    animation: bat-fly var(--bat-dur, 30s) ease-in-out infinite;
    animation-delay: var(--bat-delay, 0s);
    will-change: transform, left;
  }
  .bat svg{ width:100%; height:100%; display:block; }
  .bat svg path{
    animation: bat-flap 0.18s ease-in-out infinite;
    transform-origin: center;
    animation-delay: var(--bat-flap-delay, 0s);
  }
  @keyframes bat-flap{
    0%, 100% { transform: scaleY(1); }
    50%      { transform: scaleY(0.45); }
  }
  @keyframes bat-fly{
    0%   { left: -8%;   transform: translateY(-10px) scale(0.85); }
    25%  { left: 25%;   transform: translateY(25px)  scale(1); }
    50%  { left: 50%;   transform: translateY(-20px) scale(0.9); }
    75%  { left: 78%;   transform: translateY(15px)  scale(1.05); }
    100% { left: 108%;  transform: translateY(-5px)  scale(0.85); }
  }

  /* Affiliate button */
  .hero-cta{
    display: flex; flex-direction: column; gap: 14px;
    align-items: flex-end;
  }
  .cta-row{ display:flex; gap:12px; align-items:center; flex-wrap: wrap; justify-content: flex-end; }
  .btn-affiliate{
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(8px);
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 11px 18px;
    font-family: 'Geist Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .14em;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 10px;
    transition: all .25s;
    line-height: 1.15;
    font-weight: 600;
    text-align: left;
    box-shadow: 0 4px 14px rgba(200,49,26,.18), 0 0 0 1px rgba(200,49,26,.08) inset;
  }
  .btn-affiliate:hover{
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
    box-shadow: 0 8px 24px rgba(200,49,26,.4);
    transform: translateY(-1px);
  }
  .btn-affiliate .ba-label{ display:flex; flex-direction:column; gap:3px; }
  .btn-affiliate .ba-sub{
    font-size: 10px;
    letter-spacing: .12em;
    opacity: .72;
    font-weight: 500;
  }
  .btn-affiliate .arrow{
    font-size: 14px;
    transition: transform .25s ease;
  }
  .btn-affiliate:hover .arrow{
    transform: translateX(3px);
  }

  /* Crosshair cursor partout dans le héros quand on s'approche d'un oiseau */
  .hero.aiming{ cursor: crosshair; }
  .hero.aiming .bird,
  .hero.aiming .bat{ cursor: crosshair; }

  /* CIBLE — petit réticule qui suit la souris */
  .crosshair{
    position: fixed;
    width: 56px; height: 56px;
    pointer-events: none;
    z-index: 1000;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity .15s ease;
    mix-blend-mode: difference;
  }
  .crosshair.show{ opacity: 1; }
  .crosshair::before, .crosshair::after{
    content:""; position: absolute; background: #fff;
  }
  .crosshair::before{ left:0; right:0; top:50%; height:1px; transform:translateY(-50%); }
  .crosshair::after { top:0; bottom:0; left:50%; width:1px; transform:translateX(-50%); }
  .crosshair .ring{
    position:absolute; inset:14px;
    border:1px solid #fff; border-radius:50%;
  }
  .crosshair .dot{
    position:absolute; left:50%; top:50%;
    width:3px; height:3px;
    background: var(--accent);
    border-radius:50%;
    transform:translate(-50%,-50%);
  }

  /* BIRDS — chaque oiseau a sa propre trajectoire indépendante */
  .bird{
    position: absolute;
    width: 28px; height: 14px;
    left: -10%;
    top: var(--bird-top, 20%);
    cursor: crosshair;
    pointer-events: auto;
    z-index: 5;
    animation: var(--bird-anim, bird-fly-ltr) var(--bird-dur, 28s) linear var(--bird-delay, 0s) infinite;
    will-change: transform, left;
    transition: filter .15s ease;
  }
  /* Élargit la zone cliquable autour des oiseaux sans changer leur taille visuelle */
  .bird::before{
    content:""; position:absolute; inset:-14px; border-radius:50%;
  }
  .bird:hover{ filter: drop-shadow(0 0 5px #ffd96a) drop-shadow(0 0 2px var(--accent)); }
  .bird svg{ width:100%; height:100%; display:block; }
  .bird svg path{
    animation: flap var(--bird-flap, 0.42s) ease-in-out infinite;
    animation-delay: var(--bird-flap-delay, 0s);
    transform-origin:center;
  }
  @keyframes flap {
    0%,100% { transform: scaleY(1);   }
    50%     { transform: scaleY(0.35);}
  }
  @keyframes bird-fly-ltr{
    0%   { left: -8%;   transform: scaleX(1) translateY(0); }
    25%  { left: 25%;   transform: scaleX(1) translateY(var(--bird-amp1, -20px)); }
    50%  { left: 50%;   transform: scaleX(1) translateY(var(--bird-amp2, 15px));  }
    75%  { left: 78%;   transform: scaleX(1) translateY(var(--bird-amp3, -10px)); }
    100% { left: 108%;  transform: scaleX(1) translateY(0); }
  }
  @keyframes bird-fly-rtl{
    0%   { left: 108%;  transform: scaleX(-1) translateY(0); }
    25%  { left: 75%;   transform: scaleX(-1) translateY(var(--bird-amp1, -20px)); }
    50%  { left: 50%;   transform: scaleX(-1) translateY(var(--bird-amp2, 15px));  }
    75%  { left: 22%;   transform: scaleX(-1) translateY(var(--bird-amp3, -10px)); }
    100% { left: -8%;   transform: scaleX(-1) translateY(0); }
  }
  .bird.falling{
    animation: birdFall 2.6s cubic-bezier(.4,0,.85,.4) forwards !important;
    cursor: default;
    pointer-events: none;
  }
  .bird.falling svg path{ animation: none; }
  @keyframes birdFall{
    0%   { transform: translateY(0) rotate(0); opacity: 1; }
    8%   { transform: translateY(0) rotate(180deg); }
    100% { transform: translateY(440px) rotate(900deg); opacity: 0; }
  }

  /* STARS — visible at night via --stars-opacity */
  .stars{
    position:absolute; inset:0 0 35% 0; pointer-events:none;
    opacity: var(--stars-opacity, 0);
    transition: opacity 1.6s ease;
    background-image:
      radial-gradient(1px 1px at 12% 18%,  #fff, transparent),
      radial-gradient(1px 1px at 26% 32%,  #fff, transparent),
      radial-gradient(1.5px 1.5px at 38% 12%, #fff, transparent),
      radial-gradient(1px 1px at 52% 28%,  #fff, transparent),
      radial-gradient(1px 1px at 64% 8%,   #fff, transparent),
      radial-gradient(1.5px 1.5px at 76% 22%, #fff, transparent),
      radial-gradient(1px 1px at 88% 14%,  #fff, transparent),
      radial-gradient(1px 1px at 18% 8%,   #fff, transparent),
      radial-gradient(1px 1px at 44% 38%,  #fff, transparent),
      radial-gradient(1.5px 1.5px at 8% 28%,  #fff, transparent),
      radial-gradient(1px 1px at 92% 30%,  #fff, transparent),
      radial-gradient(1px 1px at 32% 22%,  #fff, transparent),
      radial-gradient(1.5px 1.5px at 70% 34%, #fff, transparent);
    background-size: 100% 100%;
    animation: twinkle 6s ease-in-out infinite;
  }
  @keyframes twinkle{
    0%,100%{ filter: brightness(.85); }
    50%    { filter: brightness(1.15); }
  }

  /* Petit drapeau suisse planté sur le sommet principal — nesté dans .mt-mid pour suivre le parallax */
  .flag{
    position:absolute;
    /* peak Matterhorn = x:1100/1920 = 57.3%, y:80/500 = 16% du conteneur */
    left: 57.3%;
    top: 16%;
    /* on remonte le drapeau de toute sa hauteur pour que la base du mât touche le sommet */
    transform: translate(-50%, -100%);
    width:30px; height:40px; pointer-events:none;
    z-index:2;
  }
  .flag .pole{ position:absolute; left:50%; top:0; width:1.5px; height:40px; background:#3a3a48; transform:translateX(-50%);}
  .flag .cloth{
    position:absolute; left:calc(50% + 1px); top:2px; width:15px; height:11px;
    background:var(--accent);
    transform-origin: left center;
    animation: wave 2.6s ease-in-out infinite;
    box-shadow: 1px 1px 0 rgba(0,0,0,.12);
  }
  .flag .cloth::before, .flag .cloth::after{ content:""; position:absolute; background:#fff; }
  .flag .cloth::before{ left:6px; top:2px; width:3px; height:7px; }
  .flag .cloth::after { left:4px; top:4px; width:7px; height:3px; }
  @keyframes wave{
    0%,100%{ transform: skewX(0deg) scaleX(1); }
    50%    { transform: skewX(-14deg) scaleX(0.92); }
  }

  /* Brume d'horizon — voile léger sous les lointains pour donner la profondeur atmosphérique */
  .haze{
    position:absolute; left:0; right:0; bottom:38%;
    height:120px;
    pointer-events:none; z-index:2;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,.18) 60%, rgba(255,255,255,.32));
    mix-blend-mode: screen;
    opacity: var(--haze-opacity, .55);
    transition: opacity 1.6s ease;
  }

  /* MOUNTAIN LAYERS */
  .mt{ position:absolute; left:0; right:0; width:100%; pointer-events:none; will-change:transform; }
  .mt-far { bottom:38%; height:30%;  z-index:2; }
  .mt-mid { bottom:32%; height:36%;  z-index:3; }
  .mt-near{ bottom:30%; height:24%;  z-index:4; }

  .mt svg{ width:100%; height:100%; display:block; }

  /* LAKE */
  .lake{
    position:absolute; bottom:0; left:0; right:0; height:30%;
    background:linear-gradient(180deg, var(--lk-top) 0%, var(--lk-bot) 100%);
    overflow:hidden;
    z-index:5;
  }
  .lake::before{
    content:""; position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(255,255,255,.18) 0%, transparent 30%),
      repeating-linear-gradient(180deg,
        transparent 0px, transparent 14px,
        rgba(255,255,255,.06) 14px, rgba(255,255,255,.06) 15px);
  }
  /* moving shimmer */
  .lake::after{
    content:""; position:absolute; inset:0;
    background:repeating-linear-gradient(90deg,
      transparent 0px, transparent 80px,
      rgba(255,255,255,.18) 80px, rgba(255,255,255,.18) 82px,
      transparent 82px, transparent 200px);
    animation: shimmer 14s linear infinite;
    opacity:.5;
    mix-blend-mode:overlay;
  }
  @keyframes shimmer { 0%{transform:translateX(0)} 100%{transform:translateX(-200px)} }

  /* LAKE REFLECTION (mountains, flipped) */
  .reflection{
    position:absolute; top:0; left:0; right:0; height:60%;
    transform: scaleY(-1);
    transform-origin: top;
    opacity:.28;
    filter: blur(2px);
  }
  .reflection svg{ width:100%; height:100%; }

  /* BOATS — pilotés par variables CSS pour la profondeur du lac */
  .boat{
    position:absolute;
    bottom: var(--bottom, 8%);
    width:46px; height:38px;
    z-index: var(--z, 6);
    will-change: transform, left;
    animation: var(--anim, sail-right) var(--dur, 80s) linear infinite;
    animation-delay: var(--delay, 0s);
  }
  .boat .hull{
    width:100%; height:100%; display:block;
    transform: scale(var(--scale, 1)) scaleX(var(--flip, 1));
    transform-origin: center;
    animation: bob 3.2s ease-in-out infinite;
    animation-delay: var(--bob, 0s);
  }
  .boat svg{ width:100%; height:100%; display:block;
    filter: drop-shadow(0 3px 4px rgba(40,60,90,.18));
  }
  @keyframes sail-right{
    0%   { left:-8%; }
    100% { left:108%; }
  }
  @keyframes sail-left{
    0%   { left:108%; }
    100% { left:-8%; }
  }
  @keyframes bob{
    0%,100% { transform: scale(var(--scale,1)) scaleX(var(--flip,1)) translateY(0) rotate(-1.2deg); }
    50%     { transform: scale(var(--scale,1)) scaleX(var(--flip,1)) translateY(-2px) rotate(1.2deg); }
  }

  /* ─────────── BUNKERS (easter egg quand la souris est dans le héros) ─────────── */
  .bunker{
    position: absolute;
    width: 42px; height: 26px;
    z-index: 4;
    pointer-events: auto;
    cursor: help;
    transform: translate(-50%, -50%) rotate(var(--tilt, 0deg));
    transform-origin: center;
    transition: filter .2s;
  }
  .bunker:hover{ filter: drop-shadow(0 0 6px rgba(255,200,80,.6)); }
  .bunker .concrete{
    position: absolute; inset: 0;
    background: linear-gradient(180deg, #524c44 0%, #2c2823 100%);
    border-top: 1px solid #6a6358;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.3), 0 1px 0 rgba(0,0,0,.2);
    border-radius: 1px 1px 0 0;
  }
  .bunker .interior{
    position: absolute; left: 3px; right: 3px; top: 3px; bottom: 0;
    background: linear-gradient(180deg, #0e1810 0%, #050a06 100%);
    overflow: hidden;
  }
  .bunker .soldier{
    position: absolute;
    bottom: -14px; left: 50%;
    width: 22px; height: 22px;
    transform: translateX(-50%);
  }
  .bunker .helmet{
    position: absolute; top: 0; left: 2px;
    width: 18px; height: 8.5px;
    background: linear-gradient(180deg, #3a4623 0%, #2a341a 100%);
    border-radius: 9px 9px 1px 1px;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.4), 0 1px 0 rgba(0,0,0,.3);
  }
  .bunker .helmet::after{
    /* swiss cross hint */
    content:""; position:absolute; left:7.5px; top:2px;
    width:3px; height:3px; background: var(--accent);
    opacity:.95;
  }
  .bunker .face{
    position: absolute; top: 7px; left: 5.5px;
    width: 11px; height: 3.5px;
    background: #d9b08a;
    border-radius: 1px;
  }
  .bunker .body{
    position: absolute; top: 11px; left: 3px;
    width: 16px; height: 10px;
    background: linear-gradient(180deg, #4a5a2e 0%, #364423 100%);
    border-radius: 1.5px;
  }
  .bunker .rifle{
    position: absolute; top: 13.5px; left: 15px;
    width: 14px; height: 2px;
    background: linear-gradient(180deg, #6a5a4a 0%, #2a2018 100%);
    transform-origin: 0% 50%;
    transform: rotate(var(--aim, -6deg));
    border-radius: .5px;
  }
  .bunker .rifle.firing{ transform: rotate(calc(var(--aim, -6deg) + 8deg)) translateX(-1px); }
  .bunker .doors{
    position: absolute; inset: 0;
    pointer-events: none;
    overflow: hidden;        /* clip doors quand elles glissent → taille stable */
  }
  .bunker .door{
    position: absolute;
    top: 0; height: 100%; width: 50%;
    background: linear-gradient(180deg, #6a6358 0%, #3c372f 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.1), inset 0 -2px 0 rgba(0,0,0,.4);
    border-right: 1px solid rgba(0,0,0,.35);
  }
  .bunker .door-l{ left: 0;  border-right: 1px solid rgba(0,0,0,.35); }
  .bunker .door-r{ right: 0; border-left:  1px solid rgba(0,0,0,.35); border-right: none;}
  .bunker .flash{
    position: absolute;
    top: 12px; left: calc(50% + 14px);
    width: 20px; height: 20px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255,250,200,1) 0%, rgba(255,180,60,.85) 35%, transparent 70%);
    opacity: 0; pointer-events: none;
    transform: translate(0,-50%) scale(0);
  }
  .bunker .flash.firing{
    animation: muzzleFlash .26s ease-out;
  }
  @keyframes muzzleFlash{
    0%   { opacity: 0; transform: translate(0,-50%) scale(.3); }
    25%  { opacity: 1; transform: translate(0,-50%) scale(1.4); }
    100% { opacity: 0; transform: translate(0,-50%) scale(.8); }
  }
  .bunker-tip{
    position: absolute;
    bottom: calc(100% + 10px); left: 50%;
    transform: translateX(-50%);
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--line-2);
    padding: 8px 12px;
    font-family: 'Geist Mono';
    font-size: 10px; letter-spacing:.12em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .25s;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    z-index: 12;
  }
  .bunker-tip::after{
    content:""; position:absolute; left:50%; top:100%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: var(--paper);
  }
  .bunker:hover .bunker-tip{ opacity: 1; }

  /* Score / message easter egg */
  .score-badge{
    position: absolute;
    top: 88px; right: 32px;
    z-index: 12;
    background: rgba(251,249,243,.94);
    border: 1px solid var(--line-2);
    padding: 10px 14px;
    font-family: 'Geist Mono';
    font-size: 11px; letter-spacing:.14em;
    text-transform: uppercase;
    color: var(--ink);
    pointer-events: none;
    opacity: 0; transform: translateY(-10px);
    transition: opacity .35s ease, transform .35s ease;
    max-width: 280px;
    line-height: 1.45;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
  }
  .score-badge.show{ opacity: 1; transform: translateY(0); }
  .score-badge .count{ color: var(--accent); font-size: 14px; }

  /* ─────────── Responsive ─────────── */
  @media (max-width: 900px){
    .hero{ min-height: 620px; }
    .hero-text{ padding: 88px 24px 0; }
    .bunker{ display: none; }
    .score-badge{ display: none; }
    .flag{ display: none; }
    .haze{ opacity: calc(var(--haze-opacity, .55) * .7); }
  }
  @media (max-width: 560px){
    .hero{ min-height: 560px; }
    .sun{ width: 80px; height: 80px; }
    .scroll-tip{ display: none; }
    .reflection{ display: none; }
  }

  /* HERO TEXT */
  .hero-text{
    position:absolute; inset:0; z-index:10;
    display:grid; grid-template-rows: 1fr auto auto;
    padding: 88px 48px 0;
    max-width:1280px; margin:0 auto;
  }
  .hero-kicker{
    grid-row:1;
    display:flex; align-items:center; gap:14px;
    font-family:'Geist Mono'; font-size:11px; letter-spacing:.16em;
    text-transform:uppercase; color:var(--hero-ink-dim);
    align-self:start; margin-top:32px;
    transition: color 1.6s ease;
  }
  .hero-kicker .dot{ width:8px; height:8px; background:var(--accent); display:inline-block; }
  .hero-h1{
    grid-row:2;
    font-family:'Fraunces', serif;
    font-size: clamp(60px, 9.2vw, 160px);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: -0.035em;
    margin: 0 0 20px;
    color: var(--hero-ink);
    text-wrap: balance;
    max-width: 1100px;
    transition: color 1.6s ease;
  }
  .hero-h1 .it{ font-style:italic; font-weight:400; }
  .hero-h1 .accent{ color:var(--accent); }
  .hero-sub{
    grid-row:3;
    display:flex; justify-content:space-between; align-items:flex-end;
    padding-bottom: 6%;
    gap:48px; flex-wrap:wrap;
  }
  .hero-sub .lead{
    font-family:'Geist', sans-serif;
    font-size: 19px; line-height:1.5;
    color: #f4ede0; max-width:520px;
    margin:0;
    font-weight: 500;
    padding: 16px 20px;
    background: rgba(20,25,34,.32);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: color 1.6s ease, background 1.6s ease;
  }
  .hero-sub .lead em{ font-family:'Fraunces',serif; font-style:italic; color:#ffb59a; font-weight:500; }
  .hero-cta{ display:flex; gap:12px; align-items:center; }
  .btn{
    font-family:'Geist'; font-size:15px; padding:14px 22px;
    border:none; cursor:pointer; border-radius:0;
    transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    font-weight:500; letter-spacing:-0.005em;
  }
  .btn:hover{ transform:translateY(-1px); }
  .btn-accent{
    background: var(--accent); color:#fff;
    box-shadow: 0 6px 22px rgba(200,49,26,.32), 0 0 0 1px rgba(255,255,255,.15) inset;
  }
  .btn-accent:hover{
    background: #b32916;
    box-shadow: 0 10px 28px rgba(200,49,26,.45), 0 0 0 1px rgba(255,255,255,.2) inset;
  }
  .btn-ink{
    background: var(--ink); color:var(--paper);
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
  }
  .btn-ghost{
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(8px);
    color: var(--ink);
    border:1px solid rgba(26,31,44,.18);
    box-shadow: 0 4px 14px rgba(40,30,10,.08);
  }
  .btn-ghost:hover{
    background:#fff;
    border-color: rgba(26,31,44,.35);
    box-shadow: 0 8px 20px rgba(40,30,10,.14);
  }

  /* scroll indicator */
  .scroll-tip{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    font-family:'Geist Mono'; font-size:10px; letter-spacing:.2em;
    text-transform:uppercase; color:#1a1f2c;
    font-weight: 600;
    text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 0 10px rgba(255,255,255,.5);
    display:flex; flex-direction:column; align-items:center; gap:10px;
    z-index:11;
    animation: scrollHint 2s ease-in-out infinite;
    transition: color 1.6s ease;
  }
  .scroll-tip .line{ width:1px; height:36px; background:rgba(26,31,44,.55); transition: background 1.6s ease; }
  @keyframes scrollHint{ 0%,100%{transform:translateX(-50%) translateY(0); opacity:.8} 50%{transform:translateX(-50%) translateY(6px); opacity:1} }

  /* ── Reveal animations ── */
  @media (prefers-reduced-motion: no-preference){
    .rv{opacity:0; transform:translateY(28px); filter:blur(6px); transition: opacity .9s cubic-bezier(.2,.7,0,1), transform .9s cubic-bezier(.2,.7,0,1), filter .9s ease;}
    .rv.in{opacity:1; transform:translateY(0); filter:blur(0);}
    .rv-up{opacity:0; transform:translateY(40px); transition: opacity .8s cubic-bezier(.2,.7,0,1), transform .8s cubic-bezier(.2,.7,0,1);}
    .rv-up.in{opacity:1; transform:translateY(0);}
    .rv-fade{opacity:0; transition: opacity 1.1s ease;}
    .rv-fade.in{opacity:1;}
    .rv-scale{opacity:0; transform:scale(.96); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,0,1);}
    .rv-scale.in{opacity:1; transform:scale(1);}
  }

  /* top ribbon (above topbar, NOT sticky — scrolls away with page) */
  .top-ribbon{
    position:relative; z-index:31;
    background:#0d1118; color:rgba(251,249,243,.78);
    border-bottom:1px solid rgba(251,249,243,.08);
    font-family:'Geist Mono', monospace;
    font-size:11px; letter-spacing:.04em;
  }
  .top-ribbon-inner{
    max-width:1280px; margin:0 auto;
    padding:0 32px;
    display:flex; align-items:stretch;
    height:34px;
  }
  .top-ribbon .tr-cell{
    display:flex; align-items:center; gap:10px;
    padding:0 16px;
    border-right:1px solid rgba(251,249,243,.08);
    white-space:nowrap;
  }
  .top-ribbon .tr-cell:first-child{ padding-left:0; }
  .top-ribbon .tr-cell:last-child{ border-right:0; padding-right:0; }
  .top-ribbon .tr-cell.grow{ flex:1; min-width:0; overflow:hidden; }
  .top-ribbon .tr-k{
    color:rgba(251,249,243,.38);
    text-transform:uppercase; font-size:9.5px; letter-spacing:.22em;
  }
  .top-ribbon .tr-v{ color:rgba(251,249,243,.92); }
  .top-ribbon .tr-v.ip{ font-variant-numeric:tabular-nums; }
  .top-ribbon .tr-dot{
    width:6px; height:6px; border-radius:50%;
    background:#5dd29f; box-shadow:0 0 0 3px rgba(93,210,159,.18);
    animation: trPulse 2.2s ease-in-out infinite;
  }
  @keyframes trPulse{
    0%,100%{ box-shadow:0 0 0 3px rgba(93,210,159,.18); }
    50%   { box-shadow:0 0 0 6px rgba(93,210,159,.04); }
  }
  .top-ribbon .tr-marquee{
    display:inline-flex; gap:48px;
    animation: trScroll 42s linear infinite;
  }
  .top-ribbon .tr-marquee span{ opacity:.62; }
  @keyframes trScroll{
    from { transform:translateX(0); }
    to   { transform:translateX(-50%); }
  }
  @media (max-width: 900px){
    .top-ribbon-inner{ padding:0 16px; height:auto; }
    .top-ribbon .tr-cell{ padding:8px 12px; }
    .top-ribbon .tr-cell.hide-sm{ display:none; }
  }

  /* topbar */
  .topbar{
    position:sticky; top:0; left:0; right:0; z-index:30;
    background:rgba(244,241,232,.78); backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(216,210,194,.6);
  }
  .topbar-inner{ max-width:1280px; margin:0 auto; padding:14px 32px;
    display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:32px;}
  .brand{ display:flex; align-items:center; gap:10px; cursor:pointer; text-decoration:none; color:var(--ink); }
  .nav{ display:flex; gap:4px; justify-content:center; }
  .nav a{ padding:8px 14px; font-size:14px; color:var(--ink-dim); cursor:pointer; text-decoration:none; border-bottom:1px solid transparent; transition:color .15s; }
  .nav a:hover{ color:var(--ink); }
  .nav a.active{ color:var(--ink); border-bottom-color:var(--accent); }
  .topbar-cta{ display:flex; gap:8px; align-items:center; }

  /* sections */
  .section{ max-width:1280px; margin:0 auto; padding:120px 32px; }
  .section-divider{ border-top:1px solid var(--line); }
  h2.display{ font-family:'Fraunces',serif; font-weight:400; font-size:clamp(40px,5vw,72px); letter-spacing:-0.025em; line-height:1.02; margin:0; }
  h2.display .it{ font-style:italic; }
  h2.display .accent{ color:var(--accent); }
  .eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; }
  .eyebrow .sq{ width:8px; height:8px; background:var(--accent); display:inline-block; }
  .eyebrow span{ font-family:'Geist Mono'; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }

  /* pillars */
  .pillars{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line); border-left:1px solid var(--line); margin-top:24px; }
  .pillar{ padding:28px; min-height:240px; border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    display:flex; flex-direction:column; background:transparent; transition: background .25s; }
  .pillar:hover{ background:var(--paper); }
  .pillar h3{ font-family:'Fraunces',serif; font-weight:400; font-size:28px; letter-spacing:-0.015em; margin:0 0 10px; line-height:1.1; }
  .pillar p{ font-size:14px; color:var(--ink-dim); margin:0; line-height:1.55; }
  .pillar .num{ font-family:'Geist Mono'; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:var(--ink-mute); margin-bottom:56px; }
  .pillar:hover .num{ color:var(--accent); }

  /* ═════════════════════════ FOOTER V2 ═════════════════════════ */
  footer{
    background: var(--ink); color: var(--paper);
    margin-top: 0; position: relative; overflow: hidden;
    border-top: 1px solid var(--ink);
  }
  footer::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 12% 80%, rgba(200,49,26,.14), transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(61,110,156,.10), transparent 50%);
    pointer-events: none;
  }

  .foot-mark{
    position: relative;
    padding: 110px 32px 70px;
    max-width: 1280px; margin: 0 auto;
    text-align: left;
    border-bottom: 1px solid rgba(251,249,243,.10);
  }
  .foot-mark .lockup{
    font-family:'Fraunces',serif; font-weight: 300;
    font-size: clamp(80px, 14vw, 220px);
    line-height: 0.86;
    letter-spacing: -0.045em;
    color: var(--paper);
    margin: 0;
    text-wrap: balance;
  }
  .foot-mark .lockup .it{ font-style: italic; }
  .foot-mark .lockup .accent{ color: #ff7a5e; font-style: italic; }
  .foot-mark .lockup .dim{ color: rgba(251,249,243,.32); }
  .foot-mark .meta{
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px;
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid rgba(251,249,243,.10);
  }
  .foot-mark .credo{
    font-family:'Geist Mono', monospace; font-size: 11px;
    letter-spacing: .22em; text-transform: uppercase;
    color: rgba(251,249,243,.55);
    margin: 0;
  }
  .foot-mark .credo span{ color: var(--paper); }
  .foot-mark .credo .sep{ color: rgba(251,249,243,.25); margin: 0 14px; }
  .foot-mark .signature{
    font-family:'Fraunces',serif; font-style: italic; font-weight: 300;
    color: rgba(251,249,243,.55);
    font-size: 17px;
  }

  .foot-cols{
    position: relative;
    max-width: 1280px; margin: 0 auto;
    padding: 72px 32px 52px;
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
    gap: 56px;
    border-bottom: 1px solid rgba(251,249,243,.10);
  }
  .foot-cols .brand-col{ max-width: 360px; }
  .foot-cols .brand-mark{
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 22px;
  }
  .foot-cols .brand-mark span{ font-weight: 600; font-size: 16px; color: var(--paper); letter-spacing: -0.01em; }
  .foot-cols .brand-col p{
    color: rgba(251,249,243,.65);
    font-size: 13.5px; line-height: 1.65;
    margin: 0 0 28px;
  }
  .foot-cols .legal-id{
    display: grid; grid-template-columns: 1fr; gap: 6px;
    padding: 16px 18px;
    border: 1px solid rgba(251,249,243,.14);
    font-family:'Geist Mono', monospace;
    font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(251,249,243,.5);
  }
  .foot-cols .legal-id strong{ color: var(--paper); font-weight: 600; letter-spacing: .16em; }
  .foot-cols h5{
    font-family:'Geist Mono', monospace;
    font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
    color: rgba(251,249,243,.45);
    margin: 0 0 22px;
    font-weight: 500;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(251,249,243,.10);
  }
  .foot-cols ul{
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 12px;
  }
  .foot-cols ul a{
    color: rgba(251,249,243,.78);
    text-decoration: none;
    font-size: 13.5px;
    cursor: pointer;
    transition: color .15s;
    display: inline-flex; align-items: center; gap: 10px;
    white-space: nowrap;
  }
  .foot-cols ul a::before{
    content: ""; width: 0; height: 1px; background: var(--accent);
    transition: width .2s ease;
  }
  .foot-cols ul a:hover{ color: var(--paper); }
  .foot-cols ul a:hover::before{ width: 14px; }
  .foot-cols ul a .badge{
    font-family:'Geist Mono', monospace;
    font-size: 9px; letter-spacing: .14em;
    padding: 2px 7px; background: var(--accent); color: #fff;
    text-transform: uppercase;
  }
  .foot-cols ul a .badge.soon{ background: transparent; color: rgba(251,249,243,.5); border: 1px solid rgba(251,249,243,.22); }

  .foot-status{
    position: relative;
    max-width: 1280px; margin: 0 auto;
    padding: 24px 32px 28px;
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 24px;
    font-family:'Geist Mono', monospace;
    font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
    color: rgba(251,249,243,.55);
  }
  .foot-status .dot{
    display: inline-flex; align-items: center; gap: 10px;
    color: rgba(251,249,243,.85);
  }
  .foot-status .dot::before{
    content: ""; width: 7px; height: 7px; border-radius: 50%;
    background: #6fa86a;
    box-shadow: 0 0 0 3px rgba(111,168,106,.18);
    flex-shrink: 0;
  }
  .foot-status .pipe-sep{ display: inline-block; width:1px; height:14px; background: rgba(251,249,243,.18); flex-shrink: 0; }
  .foot-status .spacer{ flex: 1; }
  .foot-status .lang{
    display: inline-flex; gap: 4px;
    padding: 4px;
    border: 1px solid rgba(251,249,243,.18);
  }
  .foot-status .lang > span{
    padding: 4px 10px;
    cursor: pointer;
    color: rgba(251,249,243,.5);
    transition: all .15s;
  }
  .foot-status .lang > span.active{
    background: var(--paper);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: .18em;
  }
  .foot-status .lang > span:not(.active):hover{ color: var(--paper); }
  /* Inherit on inner edit-mode wrappers so they don't override the visible color */
  .foot-status .lang > span > span{ color: inherit; }

  @media (max-width: 1100px){
    .foot-cols{ grid-template-columns: repeat(4, 1fr); gap: 36px 32px; }
    .foot-cols .brand-col{ grid-column: 1 / -1; max-width: 600px; margin-bottom: 16px; }
  }
  @media (max-width: 760px){
    .foot-cols{ grid-template-columns: 1fr 1fr; gap: 32px 24px; padding: 56px 24px 40px; }
    .foot-cols .brand-col{ grid-column: 1 / -1; }
    .foot-mark{ padding: 64px 24px 44px; }
    .foot-mark .meta{ flex-direction: column; }
    .foot-status{ padding: 20px 24px 24px; gap: 14px; }
    .foot-status .pipe-sep{ display: none; }
    .foot-status .spacer{ flex-basis: 100%; height: 0; }
  }

  /* HOW-IT-WORKS — diagramme avant/après */
  .how-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 24px;
    margin-top: 48px;
  }
  .how-card{
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 32px;
    position: relative;
    min-height: 380px;
    display: flex; flex-direction: column;
  }
  .how-card.bad{ background: linear-gradient(180deg, #fef0ec 0%, #fdf6f3 100%); border-color: #e9c7be; }
  .how-card.good{ background: linear-gradient(180deg, #eef4ee 0%, #f6faf6 100%); border-color: #bdd3bf; }
  .how-card h3{
    font-family:'Fraunces',serif; font-weight:400; font-size:32px;
    margin: 0 0 6px; letter-spacing:-0.015em;
  }
  .how-card .label{
    font-family:'Geist Mono'; font-size:10px; letter-spacing:.16em;
    text-transform:uppercase; color: var(--ink-mute); margin-bottom: 28px;
  }
  .how-card.bad .label::before{ content:"× "; color:#c8311a; font-weight:700; }
  .how-card.good .label::before{ content:"✓ "; color:#5e7a4a; font-weight:700; }
  .pipe{
    flex: 1; display:flex; flex-direction:column; gap: 10px;
    margin-top: 12px;
  }
  .pipe-node{
    display:grid; grid-template-columns: 32px 1fr auto; gap:14px; align-items:center;
    padding:14px 16px;
    background: rgba(255,255,255,.6);
    border:1px solid var(--line);
  }
  .how-card.bad .pipe-node[data-spy="1"]{ background: #fbe2dc; border-color:#e9a99c; }
  .pipe-icon{
    width:32px; height:32px; display:grid; place-items:center;
    border:1px solid var(--line-2);
    font-family:'Geist Mono'; font-size:11px; color:var(--ink);
    background:var(--snow);
  }
  .pipe-label{ font-size:13px; line-height:1.35; }
  .pipe-label small{ display:block; color:var(--ink-mute); font-family:'Geist Mono'; font-size:10px; letter-spacing:.08em; margin-top:2px; text-transform:uppercase; }
  .pipe-tag{
    font-family:'Geist Mono'; font-size:10px; letter-spacing:.1em;
    text-transform:uppercase; padding:4px 8px;
  }
  .pipe-tag.danger{ background:#c8311a; color:#fff; }
  .pipe-tag.ok{ background:#5e7a4a; color:#fff; }
  .pipe-tag.muted{ background:transparent; color:var(--ink-mute); border:1px solid var(--line-2); }
  .pipe-arrow{
    width: 1px; height: 14px; margin: 0 auto;
    background: var(--line-2);
  }

  /* THREAT MODEL */
  .threat-grid{
    display:grid; grid-template-columns: 1fr 1fr; gap: 0;
    margin-top: 48px; border-top:1px solid var(--line); border-left:1px solid var(--line);
  }
  .threat-col{
    padding: 36px 32px;
    border-right:1px solid var(--line); border-bottom:1px solid var(--line);
    min-height: 480px;
  }
  .threat-col h3{
    font-family:'Fraunces',serif; font-weight:400; font-size: 28px;
    margin:0 0 4px; letter-spacing:-0.015em;
  }
  .threat-col .heading{
    display:flex; align-items:center; gap:14px; margin-bottom:28px;
    padding-bottom: 18px; border-bottom: 1px solid var(--line);
  }
  .threat-col .heading-num{
    font-family:'Geist Mono'; font-size:11px; letter-spacing:.14em;
    text-transform:uppercase;
  }
  .threat-col.yes .heading-num{ color:#5e7a4a; }
  .threat-col.no  .heading-num{ color:#c8311a; }
  .threat-col ul{
    list-style:none; padding:0; margin:0;
    display:flex; flex-direction:column; gap: 18px;
  }
  .threat-col li{
    display:grid; grid-template-columns: 22px 1fr; gap:14px;
    font-size: 14.5px; line-height: 1.5;
  }
  .threat-col li .glyph{
    font-family:'Geist Mono'; font-weight:700; font-size: 16px; line-height:1.4;
  }
  .threat-col.yes li .glyph{ color:#5e7a4a; }
  .threat-col.no  li .glyph{ color:#c8311a; }
  .threat-col li strong{ display:block; font-weight:500; margin-bottom:2px; }
  .threat-col li span.desc{ color: var(--ink-dim); font-size: 13.5px; }

  /* NETWORK / SERVERS */
  .network-grid{
    display:grid; grid-template-columns: 1.4fr 1fr; gap: 64px;
    align-items:start; margin-top: 48px;
  }
  .map-wrap{
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 32px;
    position:relative;
  }
  .map-wrap svg{ width:100%; height:auto; display:block; }
  .map-pin{
    fill: var(--accent);
    transform-origin: center;
  }
  .map-pin.pulse{
    animation: pinPulse 2.4s ease-in-out infinite;
  }
  @keyframes pinPulse{
    0%, 100% { opacity: 1; }
    50%      { opacity: .4; }
  }
  .server-list{
    border-top: 1px solid var(--line);
  }
  .server-row{
    display:grid; grid-template-columns: 28px 1fr auto auto;
    gap: 16px; align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    font-size: 14px;
  }
  .server-row .flag{
    position: static; width:22px; height:14px;
    transform: none;
    box-shadow: 0 1px 0 rgba(0,0,0,.1);
    display:grid; place-items:center;
    font-family:'Geist Mono'; font-size:10px; font-weight:700;
    background: var(--line);
    color: var(--ink-dim);
  }
  .server-row .city{ font-weight:500; }
  .server-row .city small{ color: var(--ink-mute); display:block; font-family:'Geist Mono'; font-size:10px; letter-spacing:.1em; text-transform:uppercase; margin-top: 1px; }
  .server-row .ping{ font-family:'Geist Mono'; font-size:12px; color: var(--ink-dim); }
  .server-row .status{
    width:8px; height:8px; border-radius:50%;
    background: #5e7a4a;
    box-shadow: 0 0 0 3px rgba(94,122,74,.18);
  }

  /* COMPARISON TABLE */
  .cmp-wrap{
    margin-top: 48px;
    border: 1px solid var(--line);
    overflow: hidden;
    background: var(--paper);
  }
  .cmp-table{
    width:100%; border-collapse: collapse;
    font-size: 14px;
  }
  .cmp-table th, .cmp-table td{
    padding: 16px 20px;
    text-align: left;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
  }
  .cmp-table thead th{
    font-family:'Geist Mono'; font-size: 10px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--ink-mute);
    font-weight: 500;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line-2);
  }
  .cmp-table thead th.us{
    background: var(--ink); color: #fbf9f3;
    border-bottom-color: var(--ink);
  }
  .cmp-table tbody td:first-child{
    font-weight: 500; font-size: 14.5px;
  }
  .cmp-table tbody td.us{
    background: rgba(200,49,26,.04);
    border-left: 2px solid var(--accent);
    border-right: 1px solid var(--line);
  }
  .cmp-glyph{
    font-family:'Geist Mono'; font-weight:700; font-size: 14px;
  }
  .cmp-glyph.yes{ color: #5e7a4a; }
  .cmp-glyph.no{ color: #c8311a; }
  .cmp-glyph.meh{ color: var(--gold); }
  .cmp-table td small{ display:block; color: var(--ink-mute); font-size: 11px; margin-top:2px; }

  /* DEVICE MOCKUP */
  .device-section{
    display:grid; grid-template-columns: 1fr 1.1fr; gap: 64px;
    align-items: center; margin-top: 48px;
  }
  .phone{
    width: 280px; height: 560px;
    background: #15161a; border-radius: 38px;
    padding: 10px;
    box-shadow:
      0 30px 60px -20px rgba(0,0,0,.35),
      0 0 0 1px #2a2c33,
      inset 0 0 0 2px #2a2c33;
    margin: 0 auto;
    position: relative;
  }
  .phone .notch{
    position: absolute; top: 18px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 24px; background: #15161a;
    border-radius: 16px; z-index: 2;
  }
  .phone .screen{
    width: 100%; height: 100%;
    border-radius: 30px;
    background: var(--paper);
    overflow: hidden;
    position: relative;
    display: flex; flex-direction: column;
  }
  .phone .statusbar{
    display:flex; justify-content:space-between; align-items:center;
    padding: 14px 22px 6px; font-family:'Geist Mono'; font-size:11px; font-weight:600;
    color: var(--ink);
  }
  .phone .app-head{ padding: 32px 22px 12px; }
  .phone .app-head .h{ font-family:'Fraunces',serif; font-size:22px; letter-spacing:-0.01em; }
  .phone .app-head .s{ font-family:'Geist Mono'; font-size:9px; letter-spacing:.14em; color: var(--ink-mute); text-transform:uppercase; margin-top:4px; }
  .phone .big-toggle{
    margin: 22px 22px 8px;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background:
      radial-gradient(circle at 38% 38%, #5e7a4a 0%, #3d6e9c 65%, #3a5d85 100%);
    display: grid; place-items: center;
    box-shadow:
      0 0 0 1px rgba(255,255,255,.4) inset,
      0 0 60px rgba(94,122,74,.55),
      0 16px 30px -10px rgba(0,0,0,.25);
    position: relative;
  }
  .phone .big-toggle::before{
    content:""; position:absolute; inset:-14px;
    border-radius:50%;
    border: 1px solid rgba(94,122,74,.35);
    animation: ringPulse 2.6s ease-in-out infinite;
  }
  @keyframes ringPulse{
    0%,100%{ transform: scale(1); opacity: 1; }
    50%    { transform: scale(1.08); opacity: .35; }
  }
  .phone .toggle-text{ text-align:center; color:#fff; }
  .phone .toggle-text .state{
    font-family:'Geist Mono'; font-size:9px; letter-spacing:.2em; opacity:.85; text-transform:uppercase;
  }
  .phone .toggle-text .ip{
    font-family:'Fraunces',serif; font-size:26px; margin-top:6px; letter-spacing:-0.01em;
  }
  .phone .meta{
    margin: 16px 22px 0;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    font-family:'Geist Mono'; font-size:10px; color: var(--ink-dim);
  }
  .phone .meta strong{ color: var(--ink); font-weight: 600; }
  .phone .nav-pill{
    margin: auto 22px 22px;
    display:flex; gap:6px;
    padding: 8px;
    background: var(--bg-2);
    border-radius: 999px;
  }
  .phone .nav-pill > div{
    flex:1; text-align:center;
    font-family:'Geist Mono'; font-size:9px;
    letter-spacing:.12em; text-transform:uppercase;
    padding: 8px; color: var(--ink-mute);
    border-radius: 999px;
  }
  .phone .nav-pill > div.active{
    background: var(--ink); color: #fbf9f3;
  }

  .device-bullets{ display:flex; flex-direction:column; gap: 22px; }
  .device-bullets .b{
    display:grid; grid-template-columns: 36px 1fr; gap:18px;
    padding: 16px 0; border-top: 1px solid var(--line);
  }
  .device-bullets .b:last-child{ border-bottom: 1px solid var(--line); }
  .device-bullets .b .n{
    font-family:'Geist Mono'; font-size:11px; color: var(--accent); letter-spacing:.14em;
  }
  .device-bullets .b h4{
    font-family:'Geist',sans-serif; font-size:15px; font-weight:500;
    margin: 0 0 4px;
  }
  .device-bullets .b p{
    margin:0; font-size: 13.5px; color: var(--ink-dim); line-height: 1.55;
  }

  /* FAQ ACCORDION */
  .faq-grid{
    display:grid; grid-template-columns: 1fr 2fr; gap: 64px;
    margin-top: 48px; align-items:start;
  }
  .faq-list{ border-top: 1px solid var(--line); }
  .faq-item{
    border-bottom: 1px solid var(--line);
  }
  .faq-q{
    width:100%; background:none; border:none; text-align:left;
    padding: 22px 0;
    font-family:'Geist',sans-serif; font-size: 17px; color: var(--ink);
    cursor:pointer;
    display:grid; grid-template-columns: 40px 1fr 24px; gap:16px; align-items:center;
    letter-spacing: -0.005em;
  }
  .faq-q .num{ font-family:'Geist Mono'; font-size:11px; color: var(--ink-mute); letter-spacing:.12em; }
  .faq-q .plus{
    width: 18px; height: 18px; position: relative;
    justify-self: end;
  }
  .faq-q .plus::before, .faq-q .plus::after{
    content:""; position:absolute; left:50%; top:50%;
    background: var(--ink);
    transition: transform .3s ease;
  }
  .faq-q .plus::before{ width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
  .faq-q .plus::after { width: 1.5px; height: 14px; transform: translate(-50%,-50%); }
  .faq-item.open .faq-q .plus::after{ transform: translate(-50%,-50%) rotate(90deg); opacity:0; }
  .faq-a{
    max-height: 0; overflow: hidden;
    transition: max-height .4s ease;
  }
  .faq-item.open .faq-a{ max-height: 400px; }
  .faq-a-inner{
    padding: 0 0 24px 56px; max-width: 720px;
    color: var(--ink-dim); font-size: 14.5px; line-height: 1.65;
  }
  .faq-a-inner code{
    font-family:'Geist Mono'; font-size:13px;
    background: var(--bg-2); padding: 1px 6px;
    border:1px solid var(--line);
  }

  /* TRUST STRIP (sous le hero) — full-bleed, sans bordure pour enchaîner sans couture */
  .trust-strip{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
  }
  .trust-inner{
    max-width: 1280px; margin: 0 auto; padding: 22px 32px;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  }
  .trust-cell{
    display: grid; grid-template-rows: auto 1fr; gap: 6px;
    padding-left: 16px; border-left: 1px solid rgba(251,249,243,.18);
  }
  .trust-cell:first-child{ border-left: none; padding-left: 0; }
  .trust-cell .k{
    font-family:'Geist Mono'; font-size:10px;
    text-transform:uppercase; letter-spacing:.16em;
    color: rgba(251,249,243,.55);
  }
  .trust-cell .v{
    font-family:'Fraunces',serif; font-size: 22px; font-weight:400;
    letter-spacing:-0.01em;
    color: var(--paper);
  }
  .trust-cell .v em{ color: #ff9988; font-style:italic; font-family:'Fraunces',serif; }
  @media (max-width: 900px){
    .trust-inner{ grid-template-columns: 1fr 1fr; gap:18px; }
    .how-grid, .threat-grid, .network-grid, .device-section, .faq-grid{ grid-template-columns: 1fr !important; gap: 32px; }
    .pillars{ grid-template-columns: 1fr 1fr; }
    .cmp-table{ font-size: 12px; }
    .cmp-table th, .cmp-table td{ padding: 12px 10px; }
  }
  @media (max-width: 560px){
    .pillars{ grid-template-columns: 1fr; }
    .trust-inner{ grid-template-columns: 1fr; }
  }

  /* ─────────── HOW-ANIM v2 — minimal, typographique, "tunnel" comme métaphore ─────────── */
  .how-anim{
    display:flex; flex-direction:column; gap: 28px;
    margin-top: 56px;
    /* Stage layout constants — partagés entre wire / nodes / packets */
    --lane-pad-x: 7%;
    --col-pct: calc((100% - 2 * var(--lane-pad-x)) / 3);
    --col-1: var(--lane-pad-x);
    --col-2: calc(var(--lane-pad-x) + var(--col-pct));
    --col-3: calc(var(--lane-pad-x) + 2 * var(--col-pct));
    --col-4: calc(100% - var(--lane-pad-x));
  }
  .lane{
    background: transparent;
    border: none;
    padding: 0;
    position: relative;
  }
  .lane + .lane{
    padding-top: 32px;
    border-top: 1px solid var(--line);
  }
  .lane-head{
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 24px;
    margin-bottom: 26px;
  }
  .lane-tag{
    font-family:'Geist Mono'; font-size:10px; letter-spacing:.18em;
    text-transform: uppercase;
    color: var(--ink-mute);
    padding: 5px 10px;
    border: 1px solid var(--line-2);
  }
  .lane.good .lane-tag{
    color: var(--paper);
    background: var(--ink);
    border-color: var(--ink);
  }
  .lane-head h3{
    font-family:'Fraunces',serif; font-weight:400; font-size: 30px;
    letter-spacing:-0.015em; margin:0;
    color: var(--ink);
  }
  .lane-head h3 .it{ font-style:italic; }
  .lane.bad  .lane-head h3 .accent{ color: #c8311a; font-style: italic; }
  .lane.good .lane-head h3 .accent{ color: var(--ink); font-style: italic; }
  .lane-meta{
    font-family:'Geist Mono'; font-size:10px; letter-spacing:.14em;
    text-transform: uppercase;
    color: var(--ink-mute);
    text-align: right;
    line-height: 1.6;
  }
  .lane-meta b{ color: var(--ink-dim); font-weight: 500; }
  .lane-meta .pulse{
    display:inline-block; width:6px; height:6px; border-radius:50%;
    background: #c8311a;
    margin-left: 8px; vertical-align: middle;
    animation: leak-pulse 1.3s ease-in-out infinite;
  }
  .lane.good .lane-meta .pulse{ background: #5e7a4a; animation-duration: 2s; }
  @keyframes leak-pulse{
    0%,100%{ opacity: 1; transform: scale(1); }
    50%    { opacity: .35; transform: scale(.7); }
  }

  /* ── Stage ───────────────────────────────────────────────── */
  .lane-stage{
    position: relative;
    height: 240px;
    /* warm hairline frame instead of tinted fill */
    background:
      linear-gradient(180deg, rgba(0,0,0,.012), transparent 40%, rgba(0,0,0,.012)),
      var(--paper);
    border: 1px solid var(--line);
    overflow: hidden;
  }
  /* extreme left/right gutters — appareil & site visité — subtle warm tint */
  .lane-stage::before{
    content:""; position:absolute; top:0; bottom:0; left:0; width: var(--lane-pad-x);
    background: linear-gradient(90deg, var(--bg-2), transparent);
    pointer-events:none;
  }
  .lane-stage::after{
    content:""; position:absolute; top:0; bottom:0; right:0; width: var(--lane-pad-x);
    background: linear-gradient(270deg, var(--bg-2), transparent);
    pointer-events:none;
  }

  /* ── Wire — hairline running through all 4 nodes ── */
  /* Wire / tunnel / packets / dots all sit on a raised midline so labels can sit below */
  .lane-wire{
    position: absolute;
    top: 36%; transform: translateY(-50%);
    left: 0; right: 0;
    height: 0;
    z-index: 0;
    pointer-events: none;
  }
  .lane-wire::before{
    content:"";
    position: absolute;
    left: var(--col-1); right: calc(100% - var(--col-4));
    top: 0; height: 1px; transform: translateY(-.5px);
    background: var(--line-2);
  }
  /* dashed motion overlay — direction of flow */
  .lane-wire::after{
    content:"";
    position: absolute;
    left: var(--col-1); right: calc(100% - var(--col-4));
    top: 0; height: 1px; transform: translateY(-.5px);
    background: repeating-linear-gradient(90deg,
      var(--ink-dim) 0 5px, transparent 5px 12px);
    background-size: 12px 1px;
    opacity: .5;
    animation: wire-flow 1.2s linear infinite;
  }
  @keyframes wire-flow{ to { background-position: 12px 0; } }

  /* ── The tunnel — only on .good lane, between col-2 and col-3 ── */
  /* Outline version: hairline frame on transparent/paper, lets nodes read clearly */
  .tunnel{
    --tunnel-border: #3a3731;    /* warm dark stone for stroke */
    --tunnel-fg: var(--ink);
    --tunnel-accent: #6b5e3a;
    position: absolute;
    left: calc(var(--col-2) - var(--col-pct) / 2);
    right: calc(100% - var(--col-3) - var(--col-pct) / 2);
    top: 36%;
    height: 100px;
    transform: translateY(-50%);
    background:
      /* very faint warm tint inside */
      linear-gradient(180deg, rgba(58,55,49,.04), rgba(58,55,49,.02));
    border: 1.5px solid var(--tunnel-border);
    z-index: 1;
    box-shadow:
      inset 0 0 0 1px rgba(58,55,49,.06),
      0 2px 8px -6px rgba(0,0,0,.12);
  }
  /* Tunnel portals — small triangle wedges at entry / exit showing direction */
  .tunnel::before,
  .tunnel::after{
    content:"";
    position: absolute;
    top: 50%;
    width: 0; height: 0;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 4;
  }
  .tunnel::before{
    left: -7px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 8px solid var(--tunnel-border);
  }
  .tunnel::after{
    right: -7px;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 8px solid var(--tunnel-border);
  }
  .tunnel-inner{
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
  }
  /* tunnel scan lines + sliding shimmer — clipped inside .tunnel-inner */
  .tunnel-inner{
    position: absolute; inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
  }
  .tunnel-inner::before{
    content:"";
    position: absolute; inset: 0;
    /* Light perspective hint — just vertical rails, very subtle */
    background:
      linear-gradient(180deg, rgba(58,55,49,.10) 0 1px, transparent 1px 100%),
      linear-gradient(0deg,   rgba(58,55,49,.10) 0 1px, transparent 1px 100%),
      repeating-linear-gradient(90deg,
        rgba(58,55,49,.08) 0 1px, transparent 1px 80px);
  }
  .tunnel-inner::after{
    content:"";
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
      transparent 0%, rgba(58,55,49,.06) 50%, transparent 100%);
    background-size: 200% 100%;
    animation: tunnel-shimmer 4s linear infinite;
  }
  @keyframes tunnel-shimmer{
    0%   { background-position: -100% 0; }
    100% { background-position:  100% 0; }
  }
  .tunnel-label,
  .tunnel-end{
    position: absolute;
    top: -8px;
    background: var(--paper);
    padding: 2px 8px;
    font-family:'Geist Mono'; font-size: 9px;
    letter-spacing: .18em; text-transform: uppercase;
    border: 1px solid var(--line-2);
    z-index: 5;
    line-height: 1;
    white-space: nowrap;
  }
  .tunnel-label{ left: 12px; color: var(--ink); }
  .tunnel-end  { right: 12px; color: var(--ink-mute); }

  /* ── Nodes (positioned by absolute %, identical between lanes) ── */
  .lane-nodes{
    position: absolute; inset: 0;
    z-index: 2;
    pointer-events: none;
  }
  .ln-node{
    position: absolute;
    top: 36%;
    transform: translate(-50%, -50%);
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
  }
  .ln-node[data-pos="1"]{ left: var(--col-1); }
  .ln-node[data-pos="2"]{ left: var(--col-2); }
  .ln-node[data-pos="3"]{ left: var(--col-3); }
  .ln-node[data-pos="4"]{ left: var(--col-4); }
  .ln-dot{
    width: 38px; height: 38px;
    background: var(--paper);
    border: 1px solid var(--ink-dim);
    display: grid; place-items: center;
    font-family:'Geist Mono'; font-size: 12px;
    color: var(--ink);
    position: relative;
    transition: all .3s;
  }
  .ln-lab{
    position: absolute;
    top: calc(100% + 36px);
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
    font-family:'Geist Mono'; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-dim);
    text-align: center;
    white-space: nowrap;
    line-height: 1.4;
  }
  .ln-lab small{
    display: block;
    font-size: 9px; letter-spacing: .1em;
    color: var(--ink-mute);
    margin-top: 2px;
    text-transform: none;
    font-family:'Geist Mono'; font-weight: 400;
  }
  /* nodes inside the tunnel — keep light treatment, just outline them in stone */
  .lane.good .ln-node[data-pos="2"] .ln-dot,
  .lane.good .ln-node[data-pos="3"] .ln-dot{
    background: var(--paper);
    color: var(--ink);
    border-color: #3a3731;
  }
  .lane.good .ln-node[data-pos="2"] .ln-lab,
  .lane.good .ln-node[data-pos="3"] .ln-lab{
    color: var(--ink);
  }
  .lane.good .ln-node[data-pos="2"] .ln-lab small,
  .lane.good .ln-node[data-pos="3"] .ln-lab small{
    color: var(--ink-dim);
  }
  /* spy nodes — small red eye glyph beside dot, restraint */
  .ln-node.spy .ln-dot{
    border-color: #c8311a;
    color: #c8311a;
  }
  .ln-node.spy .ln-dot::after{
    content:"";
    position: absolute; top: -3px; right: -3px;
    width: 8px; height: 8px;
    background: #c8311a;
    border: 1.5px solid var(--paper);
    border-radius: 50%;
    animation: spy-blink 1.4s ease-in-out infinite;
  }
  @keyframes spy-blink{
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: .25; transform: scale(.7); }
  }
  .ln-node.spy .ln-lab{ color:#c8311a; }
  /* "blind" node in tunnel — little dot on its corner */
  .lane.good .ln-node[data-pos="2"] .ln-dot::after{
    content:"";
    position: absolute; top: -3px; right: -3px;
    width: 8px; height: 8px;
    background: #6b5e3a;
    border: 1.5px solid var(--paper);
    border-radius: 50%;
  }

  /* ── Packets ─────────────────────────────────────────────── */
  .packets{
    position: absolute; inset: 0;
    z-index: 3;
    pointer-events: none;
  }
  .packet{
    position: absolute;
    top: calc(36% + var(--track, 0px));
    transform: translate(-50%, -50%);
    font-family:'Geist Mono'; font-size: 12px;
    letter-spacing: .02em;
    white-space: nowrap;
    will-change: left;
    animation: pkt-flow var(--dur, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
    display: inline-flex; align-items: stretch;
    height: 28px;
  }
  @keyframes pkt-flow{
    0%   { left: var(--col-1); opacity: 0; }
    3%   { opacity: 1; }
    97%  { opacity: 1; }
    100% { left: var(--col-4); opacity: 0; }
  }

  .packet .ptag{
    display: inline-flex; align-items: center;
    padding: 0 9px;
    font-size: 10px; letter-spacing: .16em;
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
  }
  .packet .ptxt{
    display: inline-flex; align-items: center;
    padding: 0 12px;
    flex: 1;
  }

  /* Bad packet — single clear style throughout */
  .packet.bad{
    background: var(--paper);
    border: 1px solid var(--ink);
    color: var(--ink);
    box-shadow:
      0 6px 14px -6px rgba(0,0,0,.18),
      0 2px 4px -2px rgba(200,49,26,.18);
  }
  .packet.bad .ptag{
    background: var(--ink);
    color: var(--paper);
  }
  /* tiny "captured" indicator passing in front of spies */
  .packet.bad::after{
    content:"⌖";
    position: absolute;
    right: -18px; top: 50%;
    transform: translateY(-50%);
    font-size: 11px; color: #c8311a;
    opacity: 0;
    animation: cap-flash var(--dur, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
  }
  @keyframes cap-flash{
    0%, 28%, 36%, 60%, 68%, 100% { opacity: 0; }
    32%, 64% { opacity: 1; }
  }

  /* Good packet — three phases mapped to the wire/tunnel positions */
  .packet.good{ width: 240px; height: 28px; position: absolute; }
  .packet.good .phase{
    position: absolute; inset: 0;
    display: inline-flex; align-items: stretch;
    border: 1px solid;
    overflow: hidden;
    animation: var(--dur, 18s) linear infinite;
    animation-delay: var(--delay, 0s);
  }
  .packet.good .phase .ptag,
  .packet.good .phase .ptxt{
    display: inline-flex; align-items: center;
  }
  .packet.good .phase .ptag{ padding: 0 9px; flex-shrink: 0; font-size: 10px; letter-spacing: .14em; }
  .packet.good .phase .ptxt{ padding: 0 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; }

  .packet.good .phase-plain{
    background: var(--paper); color: var(--ink); border-color: var(--ink);
    animation-name: ph-plain;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.15);
  }
  .packet.good .phase-plain .ptag{ background: var(--ink); color: var(--paper); }

  .packet.good .phase-cipher{
    background: var(--paper); color: var(--ink);
    border-color: #3a3731;
    animation-name: ph-cipher;
    letter-spacing: .03em;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.12);
  }
  .packet.good .phase-cipher .ptag{
    background: #3a3731;
    color: var(--paper);
    letter-spacing: .14em;
  }

  .packet.good .phase-clean{
    background: var(--paper); color: var(--ink); border-color: var(--ink);
    animation-name: ph-clean;
    box-shadow: 0 4px 10px -4px rgba(0,0,0,.15);
  }
  .packet.good .phase-clean .ptag{
    background: #5e7a4a; color: var(--paper);
  }
  /* Phase timings — synced to entering/exiting the tunnel (33% & 66% of stage width) */
  @keyframes ph-plain  { 0%, 12% { opacity: 1; } 17%, 100% { opacity: 0; } }
  @keyframes ph-cipher { 0%, 14% { opacity: 0; } 19%, 81% { opacity: 1; } 86%, 100% { opacity: 0; } }
  @keyframes ph-clean  { 0%, 83% { opacity: 0; } 88%, 100% { opacity: 1; } }

  /* ── Lane caption ─────────────────────────────────────────── */
  .lane-caption{
    margin-top: 26px;
    padding-left: 22px;
    border-left: 4px solid var(--ink);
    font-size: 14px;
    color: var(--ink-dim);
    line-height: 1.6;
    max-width: 920px;
  }
  .lane.bad  .lane-caption{ border-left-color: #c8311a; }
  .lane.good .lane-caption{ border-left-color: var(--ink); }
  .lane-caption em{ font-family:'Fraunces',serif; font-style: italic; color: var(--ink); }
  .lane-caption strong{ font-weight: 500; color: var(--ink); }

  /* ── Inline data legend ─────────────────────────────── */
  .how-legend{
    display: flex; flex-wrap: wrap; gap: 8px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .how-legend-label{
    font-family:'Geist Mono'; font-size: 10px;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--ink-mute);
    align-self: center;
    margin-right: 6px;
  }
  .how-legend .chip{
    font-family:'Geist Mono'; font-size: 10px;
    letter-spacing: .14em; text-transform: uppercase;
    padding: 4px 9px;
    border: 1px solid var(--line-2);
    color: var(--ink-dim);
    background: var(--paper);
  }

  /* ═════════════════════════ DORA — CONFORMITÉ ═════════════════════════ */
  .dora-sec{
    background:#0d1118;
    color:var(--paper);
    border-top:1px solid #000;
    border-bottom:1px solid #000;
    position:relative;
    overflow:hidden;
  }
  .dora-sec::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(circle at 80% 15%, rgba(200,49,26,.10), transparent 45%),
      radial-gradient(circle at 12% 90%, rgba(61,110,156,.06), transparent 50%);
    pointer-events:none;
  }
  .dora-sec .section{ position:relative; padding:140px 32px; }
  .dora-sec .eyebrow span{ color:rgba(251,249,243,.55); }

  .dora-hero{
    display:grid;
    grid-template-columns: 1.25fr 1fr;
    gap:80px;
    align-items:start;
    margin-top:24px;
  }
  .dora-hero h2.display{
    color:var(--paper);
    font-size:clamp(56px, 8vw, 124px);
    line-height:.92;
    letter-spacing:-.035em;
  }
  .dora-hero h2.display .dora-word{
    color:#ff7a5e;
    font-style:italic;
    position:relative;
    display:inline-block;
  }
  .dora-hero h2.display .dora-word::after{
    content:"";
    position:absolute; left:0; right:0; bottom:.04em;
    height:2px;
    background:#ff7a5e;
    opacity:.4;
  }
  .dora-hero .dh-intro{
    font-size:18px; line-height:1.6;
    color:rgba(251,249,243,.75);
    max-width:560px;
    margin:36px 0 0;
  }
  .dora-hero .dh-intro strong{ color:var(--paper); font-weight:500; }
  .dora-hero .dh-intro em{ font-family:'Fraunces',serif; font-style:italic; color:#ff9988; }

  /* Stamp panel — feels like an official compliance document */
  .dora-stamp{
    border:1px solid rgba(251,249,243,.18);
    background:
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,.10)),
      rgba(255,255,255,.012);
    padding:0;
    font-family:'Geist Mono', monospace;
    position:relative;
  }
  .dora-stamp::before{
    content:"";
    position:absolute; left:0; right:0; top:0;
    height:3px;
    background:#c8311a;
  }
  .ds-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 24px 16px;
    border-bottom:1px solid rgba(251,249,243,.12);
    font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  }
  .ds-tag{ color:rgba(251,249,243,.5); }
  .ds-status{
    color:#ff9988;
    padding:4px 9px;
    border:1px solid rgba(255,153,136,.55);
    letter-spacing:.16em;
    display:inline-flex; align-items:center; gap:7px;
  }
  .ds-status::before{
    content:""; width:6px; height:6px; border-radius:50%;
    background:#ff9988;
    box-shadow:0 0 0 3px rgba(255,153,136,.18);
    animation: ds-pulse 2.2s ease-in-out infinite;
  }
  @keyframes ds-pulse{ 0%,100%{opacity:1} 50%{opacity:.4} }
  .ds-title{
    font-family:'Fraunces', serif;
    font-size:24px;
    letter-spacing:-.012em;
    margin:0;
    color:var(--paper);
    font-weight:400;
    padding:24px 24px 6px;
  }
  .ds-title .it{ font-style:italic; }
  .ds-sub{
    padding:0 24px 22px;
    font-size:10px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:rgba(251,249,243,.4);
    border-bottom:1px solid rgba(251,249,243,.10);
  }
  .ds-meta{
    display:grid; grid-template-columns:1fr 1fr;
    gap:0;
    border-bottom:1px solid rgba(251,249,243,.10);
  }
  .ds-meta > div{
    padding:14px 24px;
    border-right:1px solid rgba(251,249,243,.10);
    border-bottom:1px solid rgba(251,249,243,.10);
    display:flex; flex-direction:column; gap:6px;
  }
  .ds-meta > div:nth-child(2n){ border-right:none; }
  .ds-meta > div:nth-last-child(-n+2){ border-bottom:none; }
  .ds-meta .ds-k{
    font-size:8.5px; letter-spacing:.18em; text-transform:uppercase;
    color:rgba(251,249,243,.42);
  }
  .ds-meta .ds-v{
    font-size:12px; color:var(--paper);
    letter-spacing:.02em;
    line-height:1.35;
    font-weight:500;
  }
  .ds-foot{
    padding:12px 24px;
    display:flex; justify-content:space-between; align-items:center;
    font-size:9px; letter-spacing:.18em;
    color:rgba(251,249,243,.32);
    background:rgba(0,0,0,.15);
  }
  .ds-foot .stamp{
    color:rgba(255,153,136,.55);
    border:1px solid rgba(255,153,136,.35);
    padding:3px 7px;
    transform:rotate(-2deg);
    font-weight:600;
    letter-spacing:.22em;
  }

  /* Bridge */
  .dora-bridge{
    margin-top:96px;
    padding:32px 36px;
    border:1px solid rgba(251,249,243,.14);
    background:rgba(255,255,255,.015);
    display:grid;
    grid-template-columns:1fr auto 1fr;
    gap:32px;
    align-items:center;
  }
  .db-side{ display:flex; flex-direction:column; gap:8px; }
  .db-side:last-child{ text-align:right; align-items:flex-end; }
  .db-kicker{
    font-family:'Geist Mono', monospace;
    font-size:10px; letter-spacing:.18em;
    text-transform:uppercase;
    color:rgba(251,249,243,.45);
  }
  .db-title{
    font-family:'Fraunces', serif;
    font-size:22px;
    font-style:italic;
    line-height:1.2;
    color:var(--paper);
    letter-spacing:-.005em;
  }
  .db-detail{
    font-family:'Geist Mono', monospace;
    font-size:10px; letter-spacing:.12em;
    color:rgba(251,249,243,.45);
    text-transform:uppercase;
  }
  .db-arrow{
    display:flex; flex-direction:column; align-items:center; gap:10px;
    padding:14px 22px;
    font-family:'Geist Mono', monospace;
    font-size:10px; letter-spacing:.24em;
    color:#ff7a5e;
    border:1px solid rgba(255,122,94,.4);
    background:rgba(255,122,94,.04);
  }
  .db-arrow .glyph{
    font-size:18px;
    color:#ff7a5e;
    line-height:1;
    animation: arrow-bob 2.4s ease-in-out infinite;
  }
  @keyframes arrow-bob{
    0%,100%{ transform:translateY(0); opacity:1; }
    50%    { transform:translateY(3px); opacity:.6; }
  }

  /* 5 pillars */
  .dora-pillars-head{
    display:flex; align-items:center; gap:16px;
    margin-top:96px; margin-bottom:24px;
  }
  .dora-pillars-head .line{
    flex:1; height:1px; background:rgba(251,249,243,.18);
  }
  .dora-pillars-head .label{
    font-family:'Geist Mono', monospace;
    font-size:10px; letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(251,249,243,.55);
  }
  .dora-pillars{
    display:grid;
    grid-template-columns: repeat(5, 1fr);
    gap:0;
    border-top:1px solid rgba(251,249,243,.14);
    border-left:1px solid rgba(251,249,243,.14);
  }
  .dora-pillar{
    padding:28px 22px 26px;
    border-right:1px solid rgba(251,249,243,.14);
    border-bottom:1px solid rgba(251,249,243,.14);
    background:rgba(255,255,255,.01);
    display:flex; flex-direction:column; gap:16px;
    transition:background .25s;
    min-height:340px;
  }
  .dora-pillar:hover{ background:rgba(255,255,255,.035); }
  .dp-num{
    font-family:'Geist Mono', monospace;
    font-size:11px; letter-spacing:.22em;
    color:#ff7a5e;
    padding-bottom:14px;
    border-bottom:1px solid rgba(251,249,243,.14);
    font-weight:600;
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .dp-num .roman{
    font-family:'Fraunces',serif;
    font-style:italic;
    font-size:22px;
    color:#ff7a5e;
    letter-spacing:0;
    font-weight:400;
  }
  .dp-k{
    font-family:'Fraunces', serif;
    font-size:19px; font-weight:400; letter-spacing:-.012em;
    color:var(--paper);
    line-height:1.2;
    margin:0;
  }
  .dp-d{
    font-size:12.5px; line-height:1.55;
    color:rgba(251,249,243,.62);
    margin:0;
  }
  .dp-m{
    margin-top:auto; padding-top:14px;
    border-top:1px solid rgba(251,249,243,.10);
    font-size:12px; line-height:1.55;
    color:#ff9988;
    font-family:'Fraunces', serif;
    font-style:italic;
  }
  .dp-m::before{
    content:"↪ ";
    font-family:'Geist Mono', monospace;
    font-style:normal;
    color:rgba(255,153,136,.6);
    margin-right:4px;
  }

  /* Closer */
  .dora-closer{
    margin-top:72px;
    padding-top:36px;
    border-top:1px solid rgba(251,249,243,.14);
    display:grid; grid-template-columns:auto 1fr; gap:48px;
    align-items:start;
  }
  .dora-closer .closer-label{
    font-family:'Geist Mono', monospace;
    font-size:10px; letter-spacing:.22em;
    text-transform:uppercase;
    color:rgba(251,249,243,.45);
    padding-top:6px;
    white-space:nowrap;
  }
  .dora-closer p{
    margin:0;
    font-family:'Fraunces', serif;
    font-size:clamp(22px, 2.6vw, 32px);
    line-height:1.32;
    letter-spacing:-.01em;
    color:rgba(251,249,243,.85);
    font-weight:300;
    max-width:880px;
  }
  .dora-closer p em{ font-style:italic; color:#ff9988; }
  .dora-closer p strong{
    font-family:'Geist', sans-serif;
    font-weight:500;
    font-style:normal;
    color:var(--paper);
    font-size:.78em;
    display:inline-block;
    margin-left:6px;
    padding:2px 10px;
    border:1px solid rgba(251,249,243,.3);
    letter-spacing:.04em;
    vertical-align:middle;
  }

  @media (max-width: 1024px){
    .dora-hero{ grid-template-columns:1fr; gap:48px; }
    .dora-pillars{ grid-template-columns: repeat(2, 1fr); }
    .dora-pillar{ min-height:auto; }
  }
  @media (max-width: 768px){
    .dora-sec .section{ padding:80px 20px; }
    .dora-hero h2.display{ font-size:clamp(40px, 11vw, 64px); }
    .dora-hero .dh-intro{ font-size:15.5px; margin-top:24px; }
    .ds-meta{ grid-template-columns:1fr; }
    .ds-meta > div{ border-right:none; }
    .dora-bridge{
      grid-template-columns:1fr;
      gap:16px;
      padding:24px;
      margin-top:56px;
    }
    .db-side:last-child{ text-align:left; align-items:flex-start; }
    .db-arrow{ width:100%; flex-direction:row; justify-content:center; }
    .dora-pillars{ grid-template-columns:1fr; }
    .dora-pillars-head{ margin-top:56px; }
    .dora-closer{ grid-template-columns:1fr; gap:18px; }
    .dora-closer p{ font-size:18px; }
  }

  /* Pause animations if the user prefers reduced motion */
  @media (prefers-reduced-motion: reduce){
    .packet, .packet.good .phase,
    .lane-wire::after, .tunnel::after,
    .ln-node.spy .ln-dot::after, .packet.bad::after{
      animation: none !important;
    }
    .packet{ left: 50% !important; opacity: 1 !important; }
    .packet.good .phase-cipher{ opacity: 1 !important; }
    .packet.good .phase-plain, .packet.good .phase-clean{ opacity: 0 !important; }
  }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE — Tablet (≤ 1024) · Mobile (≤ 768) · Small (≤ 480)
     ═══════════════════════════════════════════════════════════ */

  /* ─── Tablet ─── */
  @media (max-width: 1024px){
    .section{ padding: 96px 28px; }
    .topbar-inner{ padding: 14px 24px; gap: 20px; }
    .topbar .nav{ gap: 0; }
    .topbar .nav a{ padding: 8px 10px; font-size: 13px; }

    /* Pillars 2x2 */
    .pillars{ grid-template-columns: 1fr 1fr; }

    /* About + Network + Device → 1 col on tablet */
    .device-section{ grid-template-columns: 1fr !important; gap: 48px; }
    .device-section .phone{ margin: 0 auto; }
  }

  /* ─── Mobile (≤ 768px) ─── */
  @media (max-width: 768px){
    /* Global: tighter sections, no horizontal overflow */
    html, body{ overflow-x: hidden; }
    .section{ padding: 64px 20px; }
    h2.display{ font-size: clamp(34px, 8vw, 48px); }

    /* Topbar — brand + single CTA */
    .topbar-inner{
      padding: 12px 18px;
      gap: 12px;
      grid-template-columns: 1fr auto;
    }
    .topbar .nav{ display: none; }
    .topbar .brand span:nth-of-type(2){ display: none; }   /* hide "GVA · CH" pill */
    .topbar .topbar-cta .btn-ghost{ display: none; }       /* hide "Se connecter" */
    .topbar .topbar-cta .btn-ink{ padding: 9px 14px; font-size: 12px; }

    /* HERO — softer text, stacked buttons */
    .hero-text{ padding: 96px 20px 0; }
    .hero-h1{
      font-size: clamp(44px, 12vw, 72px);
      line-height: 0.96;
      letter-spacing: -0.025em;
    }
    .hero-kicker{ margin-top: 16px; font-size: 10px; }
    .hero-sub{
      flex-direction: column;
      align-items: stretch;
      gap: 18px;
      padding-bottom: 32px;
    }
    .hero-sub .lead{ font-size: 16px; max-width: none; padding: 14px 16px; }
    .hero-cta{ align-items: stretch; }
    .cta-row{ flex-direction: column; gap: 10px; align-items: stretch; width: 100%; }
    .btn-affiliate{ justify-content: center; padding: 14px 18px; }
    .btn{ padding: 14px 18px; font-size: 14px; text-align: center; }
    .scroll-tip{ display: none; }
    .score-badge{ display: none; }

    /* TRUST STRIP — 2 col on tablet, 1 col on small */
    .trust-strip{ overflow: visible; }
    .trust-inner{ grid-template-columns: 1fr 1fr; gap: 20px; padding: 22px 20px; }
    .trust-cell{ padding-left: 14px; }
    .trust-cell .v{ font-size: 17px; }
    .trust-cell .k{ font-size: 9px; }

    /* PILLARS — 1 col */
    .pillars{ grid-template-columns: 1fr; }
    .pillar{ min-height: auto; padding: 24px; }
    .pillar h3{ font-size: 24px; }

    /* SECTION EYEBROW */
    .eyebrow{ margin-bottom: 14px; }

    /* HOW-ANIM — readable on small screens */
    .how-anim{
      --lane-pad-x: 8%;
      gap: 24px; margin-top: 36px;
    }
    .lane + .lane{ padding-top: 24px; }
    .lane-head{
      grid-template-columns: 1fr;
      gap: 8px;
      margin-bottom: 18px;
    }
    .lane-head h3{ font-size: 22px; }
    .lane-meta{ text-align: left; font-size: 9px; }
    .lane-tag{ justify-self: start; }
    .lane-stage{ height: 210px; }
    .tunnel{ height: 84px; }
    .ln-dot{ width: 32px; height: 32px; font-size: 11px; }
    .ln-lab{ font-size: 9px; letter-spacing: .1em; top: calc(100% + 28px); bottom: auto; }
    .ln-lab small{ display: none; }
    .packet{ font-size: 10px; height: 24px; }
    .packet .ptag{ font-size: 8px; padding: 0 6px; }
    .packet .ptxt{ padding: 0 8px; }
    .packet.good{ width: 170px; height: 24px; }
    .packet.good .phase .ptag{ font-size: 8px; padding: 0 6px; }
    .packet.good .phase .ptxt{ padding: 0 8px; }
    /* Tighter tracks so the two rows still fit comfortably */
    .lane-caption{ font-size: 13px; padding-left: 16px; margin-top: 18px; }
    .how-legend{ margin-top: 18px; padding-top: 16px; gap: 6px; }
    .how-legend .chip{ font-size: 9px; padding: 3px 7px; }
    .how-legend-label{ flex-basis: 100%; margin-bottom: 4px; }

    /* THREAT MODEL */
    .threat-grid{ grid-template-columns: 1fr; }
    .threat-col{ min-height: auto; padding: 28px 24px; }
    .threat-col h3{ font-size: 22px; }
    .threat-col .heading{ margin-bottom: 20px; padding-bottom: 14px; }
    .threat-col li{ font-size: 13.5px; }

    /* NETWORK */
    .network-grid{ grid-template-columns: 1fr; gap: 36px; }
    .map-wrap{ padding: 20px; }
    .server-row{ font-size: 13px; gap: 12px; padding: 12px 0; grid-template-columns: 24px 1fr auto auto; }

    /* MANIFESTO */
    .section[style*="padding:140px"]{ padding: 80px 20px !important; }

    /* COMPARISON — horizontal scroll */
    .cmp-wrap{ overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 0; }
    .cmp-table{ min-width: 620px; font-size: 12.5px; }
    .cmp-table th, .cmp-table td{ padding: 12px 14px; }
    .cmp-table td small{ font-size: 10.5px; }

    /* ABOUT */
    .section > div[style*="grid-template-columns:1fr 1.4fr"]{
      grid-template-columns: 1fr !important;
      gap: 40px !important;
    }
    .section > div[style*="grid-template-columns:1fr 1.1fr"]{
      grid-template-columns: 1fr !important;
      gap: 48px !important;
    }
    .section > div[style*="grid-template-columns:auto 1fr"]{
      grid-template-columns: 1fr !important;
      gap: 24px !important;
    }
    /* Passport */
    div[style*="max-width:380"][style*="padding:24"]{
      max-width: 100% !important;
    }

    /* DEVICE MOCKUP */
    .device-section{ grid-template-columns: 1fr !important; gap: 40px; }
    .phone{ width: 240px; height: 480px; }
    .device-bullets .b{ grid-template-columns: 32px 1fr; gap: 12px; padding: 14px 0; }

    /* 3 STEPS */
    .section > div[style*="grid-template-columns:auto 1fr"] > div[style*="white-space:nowrap"]{
      white-space: normal !important;
    }

    /* PRICING — stacked, smaller numbers */
    .section[style*="grid-template-columns:1fr 1.1fr"]{
      grid-template-columns: 1fr !important;
      padding: 80px 20px !important;
      gap: 48px !important;
    }

    /* FAQ */
    .faq-grid{ grid-template-columns: 1fr; gap: 32px; }
    .faq-q{ font-size: 15px; grid-template-columns: 32px 1fr 20px; gap: 12px; padding: 18px 0; }
    .faq-a-inner{ padding: 0 0 20px 44px; font-size: 13.5px; }

    /* FINAL CTA */
    section[style*="padding:180px"]{ padding: 100px 20px !important; }

    /* FOOTER mark */
    .foot-mark{ padding: 64px 20px 44px; }
    .foot-mark .lockup{ font-size: clamp(56px, 12vw, 80px); }
    .foot-mark .meta{ margin-top: 32px; padding-top: 22px; flex-direction: column; gap: 16px; }
    .foot-mark .signature{ font-size: 15px; }
  }

  /* ─── Small mobile (≤ 480px) ─── */
  @media (max-width: 480px){
    .section{ padding: 52px 16px; }
    .topbar-inner{ padding: 10px 14px; }
    .hero-text{ padding: 84px 16px 0; }
    .hero-h1{ font-size: clamp(40px, 13vw, 56px); }
    .hero-sub .lead{ font-size: 15px; padding: 12px 14px; }

    /* Trust 1 col */
    .trust-inner{ grid-template-columns: 1fr; gap: 14px; }
    .trust-cell{ padding-left: 0; border-left: none; padding-top: 14px; border-top: 1px solid rgba(251,249,243,.18); }
    .trust-cell:first-child{ padding-top: 0; border-top: none; }

    /* How-anim tightening */
    .how-anim{ --lane-pad-x: 6%; }
    .lane-stage{ height: 170px; }
    .tunnel{ height: 78px; }
    .ln-dot{ width: 28px; height: 28px; font-size: 10px; }
    .ln-lab{ font-size: 8.5px; }
    .packet.good{ width: 144px; }
    .packet .ptxt, .packet.good .phase .ptxt{ padding: 0 6px; }
    .packet .ptag, .packet.good .phase .ptag{ padding: 0 5px; font-size: 7.5px; }

    /* Phone smaller */
    .phone{ width: 220px; height: 440px; }
    .phone .big-toggle{ margin: 16px 18px 6px; }
    .phone .toggle-text .ip{ font-size: 22px; }

    /* Pricing big number */
    .section[style*="grid-template-columns:1fr 1.1fr"] [class~="serif"] [style*="font-size:200"]{
      font-size: 140px !important;
    }
  }

/* ═════════════════════════ TUNNEL AI SHIELD + AURA ═════════════════════════ */
/* Badge "IA · Cipher Guard" au-dessus du tunnel + aura concentrique de répulsion.
   Extrait depuis index_beta.html pour que index.html (HowItWorks monté via
   hero-bootstrap) bénéficie aussi des styles. */
.tunnel-aiwatch{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 6px);
  max-width: calc(100vw - 48px);
  pointer-events: none;
  z-index: 6;
  display: flex;
  justify-content: center;
}
.taw-badge{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 5px 11px 6px;
  background: var(--snow);
  border: 1px solid var(--tunnel-border);
  font-family: 'Geist Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(58,55,49,.10);
  position: relative;
  max-width: 100%;
}
.taw-badge::after{
  content: "";
  position: absolute;
  left: 50%; top: 100%;
  width: 1px; height: 9px;
  background: repeating-linear-gradient(180deg,
    var(--tunnel-border) 0 2px, transparent 2px 4px);
  transform: translateX(-50%);
}
.taw-dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: #c8311a;
  box-shadow: 0 0 0 3px rgba(200,49,26,.18);
  animation: trPulseAi 1.8s ease-in-out infinite;
}
.taw-name{ font-weight: 600; }
.taw-stat{
  color: var(--ink-mute);
  letter-spacing: .1em;
  padding-left: 10px;
  margin-left: 2px;
  border-left: 1px solid var(--line-2);
  font-weight: 500;
}
.taw-stat::before{
  content: "✓ ";
  color: #5e7a4a;
  font-weight: 700;
  margin-right: 2px;
}

.tunnel-aura{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.tunnel-aura .aura-ring{
  position: absolute;
  inset: 0;
  border: 1.5px solid var(--accent);
  opacity: 0;
  animation: tunnelRepulse 3.6s cubic-bezier(.3,.0,.4,1) infinite;
  will-change: inset, opacity, border-width;
}
.tunnel-aura .aura-ring:nth-child(1){ animation-delay:  0s;    }
.tunnel-aura .aura-ring:nth-child(2){ animation-delay: -1.2s;  }
.tunnel-aura .aura-ring:nth-child(3){ animation-delay: -2.4s;  }
@keyframes tunnelRepulse{
  0%   { inset: -2px;  opacity: .55; border-width: 1.6px; }
  65%  {                opacity: .18; }
  100% { inset: -16px; opacity: 0;   border-width: 0.6px; }
}
@keyframes trPulseAi{
  0%,100%{ box-shadow:0 0 0 3px rgba(200,49,26,.22); }
  50%   { box-shadow:0 0 0 6px rgba(200,49,26,.06); }
}
@media (prefers-reduced-motion: reduce){
  .tunnel-aura .aura-ring{ animation: none !important; inset: -3px; opacity: .25; }
  .taw-dot{ animation: none !important; }
}
@media (max-width: 1024px){
  .taw-badge{ font-size: 9px; padding: 4px 10px 5px; gap: 8px; letter-spacing: .12em; }
  .taw-stat{ padding-left: 8px; }
}
@media (max-width: 768px){
  .taw-badge{ font-size: 8.5px; padding: 3px 8px; gap: 6px; letter-spacing: .1em; }
  .taw-stat{ display: none; }
  @keyframes tunnelRepulse{
    0%   { inset: -2px;  opacity: .55; border-width: 1.3px; }
    65%  {                opacity: .18; }
    100% { inset: -10px; opacity: 0;   border-width: 0.5px; }
  }
}
@media (max-width: 480px){
  .taw-badge{ font-size: 8px; padding: 3px 7px; gap: 5px; }
}

/* ═════════════════════════ LANE.AI — GARDE IA SENTINELLE ═════════════════════════ */
/* Extrait depuis index_beta.html pour que index.html (qui monte HowItWorks via
   hero-bootstrap.jsx, lequel contient <AiSentinel/>) bénéficie aussi des styles. */
.lane.ai{ position: relative; }
.lane.ai .lane-tag{
  background: #0d1118;
  color: var(--paper);
  border-color: #0d1118;
}
.lane.ai .lane-head h3 .accent{
  color: var(--ink);
  font-style: italic;
}
.lane.ai .lane-head h3 .glow{
  background: linear-gradient(90deg, var(--ink) 0%, #3d6e9c 60%, var(--accent) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic;
}
.lane.ai .lane-meta b{
  color: var(--ink);
  background: var(--snow);
  border: 1px solid var(--line);
  padding: 2px 8px;
  font-family: 'Geist Mono';
  font-size: 9.5px; letter-spacing:.14em;
  text-transform: uppercase;
  margin-right: 6px;
}

/* ── Pipeline souverain ── */
.ai-pipeline{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 28px;
  background: var(--paper);
  position: relative;
}
.ai-pipeline::after{
  content:""; position:absolute; left:5%; right:5%; top:50%;
  height: 1px; transform: translateY(-50%);
  background-image: linear-gradient(90deg, var(--line-2) 50%, transparent 50%);
  background-size: 10px 1px;
  pointer-events: none;
  animation: pipeFlow 14s linear infinite;
  opacity: .55;
}
@keyframes pipeFlow{
  from { background-position: 0 0; }
  to   { background-position: -200px 0; }
}
.ai-step{
  padding: 22px 24px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 8px;
  background: transparent;
  position: relative;
  z-index: 1;
}
.ai-step:last-child{ border-right: none; }
.ai-step .ai-step-n{
  font-family:'Geist Mono'; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; align-items: center; gap: 8px;
}
.ai-step .ai-step-n::after{
  content:""; flex:1; height:1px;
  background: var(--line);
  margin-left: 2px;
}
.ai-step h4{
  font-family:'Fraunces', serif; font-weight: 400;
  font-size: 19px; letter-spacing:-.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.ai-step h4 .it{ font-style: italic; }
.ai-step p{
  margin: 0; font-size: 12.5px; line-height: 1.5;
  color: var(--ink-dim);
}
.ai-step .ai-step-stat{
  margin-top: auto; padding-top: 10px;
  font-family:'Geist Mono'; font-size: 10.5px;
  letter-spacing: .04em; color: var(--ink);
}
.ai-step .ai-step-stat b{
  color: #5e7a4a; font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ── Sentinel dome above the tunnel ── */
.ai-dome{
  position: relative;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(13,17,24,.02) 0%, transparent 50%),
    var(--snow);
  padding: 18px 22px 22px;
  margin-bottom: 28px;
}
.ai-dome::before{
  content:""; position: absolute; left:0; right:0; top:0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--accent) 45%, var(--accent) 55%, transparent);
  opacity: .55;
  animation: aiScan 5.5s linear infinite;
}
@keyframes aiScan{
  0%   { transform: translateY(0); opacity: .55; }
  48%  { transform: translateY(118px); opacity: .55; }
  50%  { transform: translateY(118px); opacity: 0; }
  52%  { transform: translateY(0); opacity: 0; }
  54%  { opacity: .55; }
  100% { transform: translateY(0); opacity: .55; }
}
.ai-dome-head{
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 10px 18px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  font-family:'Geist Mono'; font-size: 10px;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-dim);
}
.ai-dome-head .left{ display:flex; align-items:center; gap:10px; }
.ai-dome-head .pulse-dot{
  width: 7px; height: 7px; border-radius: 50%;
  background: #5e7a4a;
  box-shadow: 0 0 0 3px rgba(94,122,74,.18);
  animation: trPulse 2s ease-in-out infinite;
}
.ai-dome-head .right{ color: var(--ink); }
.ai-dome-head .right b{
  font-family:'Geist Mono'; font-weight: 600;
  color: var(--accent);
}
.ai-sentinels{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.ai-sent{
  padding: 14px 18px;
  border-right: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px;
  position: relative;
}
.ai-sent:last-child{ border-right: none; }
.ai-sent:first-child{ padding-left: 0; }
.ai-sent .ai-sent-name{
  display: flex; align-items: center; gap: 10px;
  font-family:'Fraunces', serif;
  font-size: 15px; letter-spacing: -.005em;
  color: var(--ink);
}
.ai-sent .ai-sent-name .badge{
  font-family:'Geist Mono';
  font-size: 8.5px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
  background: var(--ink); color: var(--paper);
}
.ai-sent .ai-sent-name .badge.alert{ background: var(--accent); }
.ai-sent p{
  margin: 0; font-size: 12px; line-height: 1.5;
  color: var(--ink-dim);
}
.ai-sent .ai-sent-tick{
  font-family:'Geist Mono'; font-size: 10px;
  color: var(--ink-mute); letter-spacing: .06em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.ai-sent .ai-sent-tick b{ color: #5e7a4a; font-weight: 600; }

/* ── Live terminal feed ── */
.ai-feed{
  margin-top: 28px;
  border: 1px solid #0d1118;
  background: #0d1118;
  color: rgba(251,249,243,.85);
  font-family:'Geist Mono';
  font-size: 12.5px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
.ai-feed-head{
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(251,249,243,.10);
  background: rgba(255,255,255,.02);
  font-size: 10px; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(251,249,243,.55);
}
.ai-feed-head .dots{ display: inline-flex; gap: 6px; }
.ai-feed-head .dots span{
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(251,249,243,.16);
}
.ai-feed-head .dots span.live{
  background: #5e7a4a;
  box-shadow: 0 0 0 3px rgba(94,122,74,.22);
  animation: trPulse 2s ease-in-out infinite;
}
.ai-feed-head .right{ color: rgba(251,249,243,.78); }
.ai-feed-body{
  height: 220px;
  padding: 14px 18px;
  position: relative;
  overflow: hidden;
}
.ai-feed-body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:70px;
  background: linear-gradient(180deg, transparent, #0d1118);
  pointer-events: none;
}
.ai-line{
  display: grid;
  grid-template-columns: auto 110px 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding: 4px 0;
  line-height: 1.45;
  animation: aiLineIn .25s cubic-bezier(.2,.7,0,1);
}
@keyframes aiLineIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to  { opacity: 1; transform: translateY(0); }
}
.ai-line .ts{
  color: rgba(251,249,243,.4);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.ai-line .src{
  color: #ff9988;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.ai-line .msg{
  color: rgba(251,249,243,.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ai-line .msg em{
  font-family: 'Fraunces', serif;
  font-style: italic;
  color: rgba(251,249,243,.6);
  font-size: 11.5px;
}
.ai-line .stat{
  font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1px solid currentColor;
}
.ai-line .stat.ok{ color: #8fc78a; }
.ai-line .stat.blk{ color: #ff8a72; background: rgba(255,138,114,.08); }
.ai-line .stat.inf{ color: #88b8e0; }
.ai-line .stat.act{ color: #ffd197; }

/* ── Sovereignty footer ── */
.ai-foot{
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px 22px;
  border: 1px solid var(--line);
  background: var(--paper);
}
.ai-foot p{
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  letter-spacing: -.005em;
}
.ai-foot p em{ font-style: italic; color: var(--accent); }
.ai-foot p strong{ font-weight: 500; }
.ai-foot .stamps{
  display: flex; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
}
.ai-foot .stamps span{
  font-family:'Geist Mono'; font-size: 9.5px;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 5px 9px;
  border: 1px solid var(--line-2);
  color: var(--ink-dim);
}
.ai-foot .stamps span.swiss{ background: var(--accent); color: #fff; border-color: var(--accent); }

/* ── Responsive ── */
@media (max-width: 1024px){
  .ai-pipeline{ grid-template-columns: 1fr 1fr; }
  .ai-pipeline .ai-step:nth-child(2){ border-right: none; }
  .ai-pipeline .ai-step:nth-child(1),
  .ai-pipeline .ai-step:nth-child(2){ border-bottom: 1px solid var(--line); }
  .ai-sentinels{ grid-template-columns: 1fr 1fr; gap: 0; }
  .ai-sentinels .ai-sent:nth-child(2){ border-right: none; }
  .ai-sentinels .ai-sent:nth-child(1),
  .ai-sentinels .ai-sent:nth-child(2){ border-bottom: 1px solid var(--line); padding-bottom: 14px; }
  .ai-sentinels .ai-sent:nth-child(3),
  .ai-sentinels .ai-sent:nth-child(4){ padding-top: 14px; }
  .ai-sentinels .ai-sent:nth-child(3){ padding-left: 0; }
}
@media (max-width: 768px){
  .ai-pipeline{ grid-template-columns: 1fr; }
  .ai-pipeline .ai-step{ border-right: none; border-bottom: 1px solid var(--line); padding: 18px 18px; }
  .ai-pipeline .ai-step:last-child{ border-bottom: none; }
  .ai-pipeline::after{ display: none; }
  .ai-sentinels{ grid-template-columns: 1fr; }
  .ai-sentinels .ai-sent{
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding: 12px 0;
  }
  .ai-sentinels .ai-sent:last-child{ border-bottom: none; }
  .ai-line{ grid-template-columns: auto 1fr auto; gap: 10px; font-size: 11.5px; }
  .ai-line .src{ display: none; }
  .ai-foot{ grid-template-columns: 1fr; padding: 16px; }
  .ai-foot .stamps{ justify-content: flex-start; }
  .ai-feed-body{ height: 200px; }
}