/* ===================================
   NODECOVE - v2 - Proton-inspired
   Clean · Bold · Trustworthy
   =================================== */

:root, [data-theme='light'] {
  --text-xs: clamp(0.75rem, 0.7rem + 0.15vw, 0.8125rem);
  --text-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
  --text-base: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --text-xl: clamp(1.375rem, 1.1rem + 1.1vw, 2rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.25rem);
  --text-hero: clamp(2.5rem, 1rem + 5vw, 4.5rem);

  --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem;
  --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem; --sp-10: 2.5rem;
  --sp-12: 3rem; --sp-16: 4rem; --sp-20: 5rem; --sp-24: 6rem;

  --rad-sm: 6px; --rad-md: 10px; --rad-lg: 16px; --rad-xl: 22px; --rad-full: 9999px;
  --trans: 160ms cubic-bezier(0.16,1,0.3,1);
  --max-w: 1120px;

  /* LIGHT */
  --bg: #ffffff;
  --bg-alt: #f6f7fb;
  --surface: #ffffff;
  --surface-2: #f0f1f6;
  --border: #e3e4ec;
  --text: #0d0e1a;
  --text-2: #4a4b5e;
  --text-3: #9394a8;
  --text-inv: #ffffff;

  --primary: #6d4aff;
  --primary-h: #5a35f0;
  --primary-s: #ede8ff;
  --primary-s2: #ddd6ff;

  --green: #00b87c;
  --green-s: #e0f7ef;
  --orange: #f7931a;
  --orange-s: #fff3e0;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.07);
  --shadow-md: 0 4px 20px rgba(0,0,0,.09);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.13);
  --shadow-card: 0 2px 12px rgba(109,74,255,.12);

  /* Font stacks defined once in /fonts/fonts.css */
  --font: var(--nc-sans);
  --mono: var(--nc-mono);
}

[data-theme='dark'] {
  --bg: #0c0d18;
  --bg-alt: #111220;
  --surface: #161728;
  --surface-2: #1d1e32;
  --border: #272840;
  --text: #e8e9f8;
  --text-2: #9394b8;
  --text-3: #555672;
  --text-inv: #0c0d18;

  --primary: #8b6fff;
  --primary-h: #a48fff;
  --primary-s: #1e1840;
  --primary-s2: #251e4a;

  --green: #00d68f;
  --green-s: #0d2e22;
  --orange: #ffad3b;
  --orange-s: #2a1a00;

  --shadow-sm: 0 1px 3px rgba(0,0,0,.3);
  --shadow-md: 0 4px 20px rgba(0,0,0,.4);
  --shadow-lg: 0 16px 48px rgba(0,0,0,.5);
  --shadow-card: 0 2px 16px rgba(139,111,255,.15);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:#0c0d18; --bg-alt:#111220; --surface:#161728; --surface-2:#1d1e32;
    --border:#272840; --text:#e8e9f8; --text-2:#9394b8; --text-3:#555672;
    --text-inv:#0c0d18; --primary:#8b6fff; --primary-h:#a48fff;
    --primary-s:#1e1840; --primary-s2:#251e4a; --green:#00d68f;
    --green-s:#0d2e22; --orange:#ffad3b; --orange-s:#2a1a00;
    --shadow-sm:0 1px 3px rgba(0,0,0,.3); --shadow-md:0 4px 20px rgba(0,0,0,.4);
    --shadow-lg:0 16px 48px rgba(0,0,0,.5); --shadow-card:0 2px 16px rgba(139,111,255,.15);
  }
}

/* BASE */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-padding-top:calc(var(--nc-barre, 80px) + 24px)}
html.nc-lisse{scroll-behavior:smooth}
body{font-family:var(--font);font-size:var(--text-base);color:var(--text);background:var(--bg);line-height:1.65;min-height:100dvh}
img,svg{display:block;max-width:100%}
ul[role='list']{list-style:none}
input,button,select{font:inherit;color:inherit}
h1,h2,h3{text-wrap:balance;line-height:1.15}
p,li{text-wrap:pretty;max-width:66ch}
button{cursor:pointer;background:none;border:none}
a{color:inherit;text-decoration:none}
a,button,input{transition:color var(--trans),background var(--trans),border-color var(--trans),box-shadow var(--trans),opacity var(--trans)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:var(--rad-sm)}

.container{width:100%;max-width:var(--max-w);margin-inline:auto;padding-inline:clamp(var(--sp-5),5vw,var(--sp-12))}

/* ===== HEADER ===== */
.header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(20px);border-bottom:1px solid transparent;transition:border-color var(--trans),box-shadow var(--trans)}
.header.scrolled{border-bottom-color:var(--border);box-shadow:var(--shadow-sm)}
.header-inner{display:flex;align-items:center;height:68px;gap:var(--sp-8)}
.logo{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-base);font-weight:700;letter-spacing:-0.02em;flex-shrink:0}
.logo-img{height:28px;width:auto}
/* Dark theme (default) : logo blanc */
.logo-img--dark{display:block!important}
.logo-img--light{display:none!important}
/* Light theme : logo noir */
[data-theme='light'] .logo-img--dark{display:none!important}
[data-theme='light'] .logo-img--light{display:block!important}
@media(prefers-color-scheme:light){
  :root:not([data-theme]) .logo-img--dark{display:none!important}
  :root:not([data-theme]) .logo-img--light{display:block!important}
}
.nav{display:flex;align-items:center;gap:var(--sp-8);font-size:var(--text-sm);color:var(--text-2)}
@media (hover: hover) { .nav a:hover {color:var(--text)} }
.nav-dashboard{background:var(--primary);color:#fff!important;padding:6px 14px;border-radius:var(--rad-md);font-weight:600;transition:background var(--trans)}
@media (hover: hover) { .nav-dashboard:hover {background:var(--primary-h);color:#fff!important} }
.header-actions{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto}
.theme-toggle{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:var(--rad-md);color:var(--text-2)}
@media (hover: hover) { .theme-toggle:hover {background:var(--surface-2);color:var(--text)} }

/* ===== BUTTONS ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:600;border-radius:var(--rad-full);padding:10px 22px;border:2px solid transparent;white-space:nowrap;cursor:pointer;line-height:1}
.btn-xl{padding:14px 32px;font-size:var(--text-base)}
.btn-full{width:100%}
.btn-primary{background:var(--primary);color:#fff;border-color:var(--primary)}
@media (hover: hover) { .btn-primary:hover {background:var(--primary-h);border-color:var(--primary-h);transform:translateY(-1px);box-shadow:0 6px 20px color-mix(in srgb,var(--primary) 35%,transparent)} }
.btn-outline{background:transparent;color:var(--text);border-color:var(--border)}
@media (hover: hover) { .btn-outline:hover {border-color:var(--text-2)} }
.btn-ghost{background:transparent;color:var(--text-2);border-color:transparent}
@media (hover: hover) { .btn-ghost:hover {color:var(--text);background:var(--surface-2)} }

/* ===== HERO ===== */
.hero{padding-block:clamp(var(--sp-16),10vw,var(--sp-24));text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);color:var(--primary);font-weight:600;margin-bottom:var(--sp-6)}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 3px var(--green-s);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px var(--green-s)}50%{box-shadow:0 0 0 6px var(--green-s)}}
.hero-h1{font-size:var(--text-hero);font-weight:700;letter-spacing:-0.035em;color:var(--text);margin-bottom:var(--sp-5);max-width:16ch;margin-inline:auto}
.hero-p{font-size:var(--text-lg);color:var(--text-2);margin-bottom:var(--sp-8);line-height:1.6;max-width:52ch;margin-inline:auto}
.hero-cta{display:flex;align-items:center;justify-content:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-4)}
.hero-reassure{font-size:var(--text-xs);color:var(--text-3)}

/* HERO VISUAL */
.hero-visual{margin-top:var(--sp-12);max-width:640px;margin-inline:auto}
.visual-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-xl);padding:var(--sp-6);box-shadow:var(--shadow-lg);text-align:left}
.visual-card-header{display:flex;align-items:center;gap:var(--sp-3);font-size:var(--text-xs);color:var(--text-2);margin-bottom:var(--sp-5);font-weight:500}
.vc-dot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0}
.vc-electrum{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-family:var(--mono);color:var(--text-2);background:var(--surface-2);border:1px solid var(--border);border-radius:4px;padding:2px 7px;cursor:pointer;line-height:1.4;transition:color .15s,border-color .15s;white-space:nowrap}
@media (hover: hover) { .vc-electrum:hover {color:var(--primary);border-color:var(--primary)} }
.vc-electrum.copied{color:var(--green);border-color:var(--green)}
.vc-live{margin-left:auto;color:var(--green);font-weight:600}
.visual-stats{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:0;margin-bottom:var(--sp-5);background:var(--bg-alt);border-radius:var(--rad-lg);padding:var(--sp-4) var(--sp-5)}
.vstat{text-align:center}
.vstat-val{font-size:var(--text-lg);font-weight:700;color:var(--text);letter-spacing:-0.02em}
.vstat-label{font-size:var(--text-xs);color:var(--text-3);margin-top:2px}
.vstat-divider{width:1px;height:36px;background:var(--border)}
.visual-vpn-row{display:flex;align-items:center;justify-content:space-between;background:var(--bg-alt);border-radius:var(--rad-md);padding:var(--sp-3) var(--sp-4)}
.vpn-loc{display:flex;align-items:center;gap:var(--sp-3)}
.flag{font-size:1.4rem;line-height:1}
.vpn-city{font-weight:600;font-size:var(--text-sm);color:var(--text)}
.vpn-status{font-size:var(--text-xs);color:var(--text-3);margin-top:2px}
.vpn-status.connected{color:var(--green)}
.vpn-shield{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-xs);font-weight:600;color:var(--green);background:var(--green-s);padding:var(--sp-2) var(--sp-3);border-radius:var(--rad-full)}
.vpn-shield.unprotected{color:#ef4444;background:rgba(239,68,68,.12)}
.vpn-status.not-connected{color:#ef4444}
.vpn-connect-btn{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--primary);background:color-mix(in srgb,var(--primary) 12%,transparent);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent);padding:4px 10px;border-radius:var(--rad-full);text-decoration:none;margin-top:var(--sp-2);transition:background .15s}
@media (hover: hover) { .vpn-connect-btn:hover {background:color-mix(in srgb,var(--primary) 20%,transparent)} }

/* ===== TRUST BAR ===== */
.trust-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-alt);padding-block:var(--sp-4)}
.trust-inner{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6)}
.trust-item{display:flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:500;color:var(--text-2)}
.trust-item svg{color:var(--primary);flex-shrink:0}
.trust-sep{width:1px;height:18px;background:var(--border)}

/* ===== BETA BANNER ===== */
.beta-banner{padding-block:clamp(var(--sp-16),8vw,var(--sp-20));background:var(--bg)}
.beta-box{display:grid;grid-template-columns:1fr 420px;gap:var(--sp-16);align-items:start;background:linear-gradient(135deg,var(--primary-s) 0%,var(--bg-alt) 100%);border:1px solid var(--primary-s2);border-radius:var(--rad-xl);padding:clamp(var(--sp-10),5vw,var(--sp-16))}
.beta-tag{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:700;color:var(--primary);margin-bottom:var(--sp-4)}
.beta-box-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-0.03em;color:var(--text);margin-bottom:var(--sp-4)}
.beta-box-sub{font-size:var(--text-base);color:var(--text-2);margin-bottom:var(--sp-6);line-height:1.7}
.beta-perks{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:0}
.beta-perks li{display:flex;align-items:flex-start;gap:var(--sp-3);font-size:var(--text-sm);color:var(--text-2)}
.beta-perks li svg{color:var(--green);flex-shrink:0;margin-top:2px}

/* BETA FORM */
.beta-form-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--rad-xl);padding:var(--sp-8);box-shadow:var(--shadow-md)}
.form-title{font-size:var(--text-lg);font-weight:700;color:var(--text);margin-bottom:var(--sp-2)}
.form-sub{font-size:var(--text-sm);color:var(--text-2);margin-bottom:var(--sp-5)}
.beta-form{display:flex;flex-direction:column;gap:var(--sp-3)}
.form-input{padding:var(--sp-4) var(--sp-5);background:var(--bg-alt);border:1.5px solid var(--border);border-radius:var(--rad-md);font-size:var(--text-sm);color:var(--text)}
.form-input:focus{outline:none;border-color:var(--primary)}
.form-input::placeholder{color:var(--text-3)}
.form-note{font-size:var(--text-xs);color:var(--text-3);text-align:center}
.beta-success{display:none;align-items:flex-start;gap:var(--sp-3);padding:var(--sp-4) var(--sp-5);background:var(--green-s);border:1px solid color-mix(in srgb,var(--green) 30%,transparent);border-radius:var(--rad-md);font-size:var(--text-sm);color:var(--green);margin-bottom:var(--sp-4)}
.form-stats{display:flex;align-items:center;justify-content:space-between;margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.fstat{text-align:center}
.fstat strong{display:block;font-size:var(--text-lg);font-weight:700;color:var(--text);letter-spacing:-0.02em}
.fstat span{font-size:var(--text-xs);color:var(--text-3)}
.fstat-sep{width:1px;height:32px;background:var(--border)}

/* ===== SECTIONS ===== */
.section{padding-block:clamp(var(--sp-16),8vw,var(--sp-24))}
.section-alt{background:var(--bg-alt)}
.section-label{font-size:var(--text-xs);font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--primary);margin-bottom:var(--sp-3)}
.section-h2{font-size:var(--text-2xl);font-weight:700;letter-spacing:-0.03em;color:var(--text);margin-bottom:var(--sp-4)}
.section-p{font-size:var(--text-base);color:var(--text-2);margin-bottom:var(--sp-10);line-height:1.7}

/* ===== PLANS ===== */
.plans-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:stretch;margin-top:20px;margin-bottom:var(--sp-8)}
.plan{position:relative;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rad-xl);padding:var(--sp-8);display:flex;flex-direction:column;gap:var(--sp-5);transition:box-shadow var(--trans),border-color var(--trans)}
@media (hover: hover) { .plan:hover {box-shadow:var(--shadow-md)} }
.plan-highlight{border-color:var(--primary);box-shadow:var(--shadow-card)}
@media (hover: hover) { .plan-highlight:hover {box-shadow:0 8px 32px color-mix(in srgb,var(--primary) 25%,transparent)} }
.plan-popular{position:absolute;top:-20px;left:50%;transform:translateX(-50%);background:var(--primary);color:#fff;font-size:var(--text-xs);font-weight:700;padding:4px 16px;border-radius:var(--rad-full);white-space:nowrap;letter-spacing:0.04em;text-transform:uppercase}
.plan-name{font-size:var(--text-sm);font-weight:700;letter-spacing:0.06em;text-transform:uppercase;color:var(--primary)}
.plan-price-wrap{display:flex;align-items:baseline;gap:4px}
.plan-price{font-size:var(--text-2xl);font-weight:700;letter-spacing:-0.04em;color:var(--text)}
.plan-period{font-size:var(--text-sm);color:var(--text-2)}
.plan-tagline{font-size:var(--text-sm);color:var(--text-2);line-height:1.5;flex-shrink:0}
.plan-top{display:flex;flex-direction:column;gap:var(--sp-5);min-height:220px}
.plan-cta{margin-top:0}
.plan-guide-link{display:block;text-align:center;font-size:.8rem;color:var(--text-2);text-decoration:none;margin:10px 0 4px;opacity:.75;transition:color .2s,opacity .2s}
@media (hover: hover) { .plan-guide-link:hover {color:var(--primary);opacity:1;text-decoration:none} }
.plan-list{display:flex;flex-direction:column;gap:var(--sp-3);padding-top:var(--sp-2)}
.plan-list li{font-size:var(--text-sm);color:var(--text-2);display:flex;align-items:flex-start;gap:var(--sp-2);max-width:none}
.plan-list li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--primary);flex-shrink:0;margin-top:7px}
.plan-list em{color:var(--text-3);font-style:normal;font-size:var(--text-xs)}
.plans-note{text-align:center;font-size:var(--text-sm);color:var(--text-2);background:var(--primary-s);border:1px solid var(--primary-s2);border-radius:var(--rad-lg);padding:var(--sp-4) var(--sp-8)}

/* ===== FEATURES ===== */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-8) var(--sp-10)}
.feat{display:flex;flex-direction:column;gap:var(--sp-4)}
.feat-icon{width:48px;height:48px;border-radius:var(--rad-lg);background:var(--primary-s);color:var(--primary);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.feat h3{font-size:var(--text-base);font-weight:700;color:var(--text)}
.feat p{font-size:var(--text-sm);color:var(--text-2);line-height:1.65}
.feat-link-btn{display:inline-block;margin-top:4px;padding:7px 14px;border-radius:8px;background:var(--primary-s);color:var(--primary);font-size:13px;font-weight:600;text-decoration:none;transition:background 0.15s,color 0.15s;align-self:flex-start}
@media (hover: hover) { .feat-link-btn:hover {background:var(--primary);color:#fff} }

/* ===== REFERRAL ===== */
.referral-section{background:var(--bg)}
.referral-inner{display:grid;grid-template-columns:1fr 380px;gap:var(--sp-16);align-items:center}
.referral-compare{display:flex;align-items:center;gap:var(--sp-5);margin-block:var(--sp-8)}
.ref-tier{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rad-xl);padding:var(--sp-6) var(--sp-8);text-align:center}
.ref-tier.ref-beta{border-color:var(--primary);background:var(--primary-s)}
.ref-label{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-2);margin-bottom:var(--sp-2)}
.ref-rate{font-size:clamp(2rem,4vw,3rem);font-weight:700;letter-spacing:-0.04em;color:var(--primary)}
.ref-rate.muted{color:var(--text-3)}
.ref-desc{font-size:var(--text-xs);color:var(--text-2);margin-top:var(--sp-2)}
.ref-arrow{font-size:1.5rem;color:var(--text-3);flex-shrink:0}
.ref-example-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rad-xl);padding:var(--sp-8);box-shadow:var(--shadow-md)}
.rec-title{font-size:var(--text-sm);font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--primary);margin-bottom:var(--sp-3)}
.rec-scenario{font-size:var(--text-sm);color:var(--text-2);margin-bottom:var(--sp-5);padding-bottom:var(--sp-5);border-bottom:1px solid var(--border)}
.rec-math{display:flex;flex-direction:column;gap:var(--sp-3);margin-bottom:var(--sp-5)}
.rec-row{display:flex;justify-content:space-between;font-size:var(--text-sm);color:var(--text-2)}
.rec-earn{color:var(--green);font-weight:700}
.rec-note{font-size:var(--text-xs);color:var(--text-3);text-align:center}

/* ===== DESTINATIONS ===== */
.dest-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5)}
.dest{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--rad-xl);padding:var(--sp-8)}
.dest-soon{opacity:.6}
.dest-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp-4)}
.dest-flag{font-size:2.2rem;line-height:1}
.dest-status{font-size:var(--text-xs);font-weight:700;padding:4px 12px;border-radius:var(--rad-full);background:var(--surface-2);color:var(--text-3);border:1px solid var(--border)}
.dest-status.live{background:var(--green-s);color:var(--green);border-color:color-mix(in srgb,var(--green) 30%,transparent)}
.dest-status.soon{background:var(--orange-s);color:var(--orange);border-color:color-mix(in srgb,var(--orange) 30%,transparent)}
.dest-city{font-size:var(--text-xl);font-weight:700;letter-spacing:-0.02em;color:var(--text);margin-bottom:var(--sp-2)}
.dest-detail{font-size:var(--text-sm);color:var(--text-2)}
.dest-meta{display:flex;align-items:center;gap:var(--sp-4);margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border)}
.dest-meta-item{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-3);font-weight:500}
.dest-meta-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex-shrink:0;box-shadow:0 0 0 2px var(--green-s)}
.dest-meta-dot.offline{background:var(--text-3);box-shadow:none}
.dest-meta-val{color:var(--text-2)}
.dest-ping-badge{flex:1;text-align:center;font-size:var(--text-sm);font-weight:700;color:var(--text-3);font-variant-numeric:tabular-nums;letter-spacing:.01em}
.dest.dest-offline{opacity:.55}
.dest.dest-offline .dest-status.live{background:var(--surface-2);color:var(--text-3);border-color:var(--border)}

/* ===== FOOTER ===== */
.footer{padding-block:var(--sp-12) var(--sp-8);border-top:1px solid var(--border);background:var(--bg-alt)}
.footer-inner{display:grid;grid-template-columns:1fr auto;gap:var(--sp-16);padding-bottom:var(--sp-10);border-bottom:1px solid var(--border)}
.footer-brand{display:flex;flex-direction:column;gap:var(--sp-4)}
.footer-brand p{font-size:var(--text-sm);color:var(--text-2);max-width:30ch}
.footer-cols{display:flex;gap:var(--sp-12)}
.footer-col{display:flex;flex-direction:column;gap:var(--sp-3)}
.fcol-title{font-size:var(--text-xs);font-weight:700;text-transform:uppercase;letter-spacing:0.08em;color:var(--text-3);margin-bottom:var(--sp-2)}
.footer-col a{font-size:var(--text-sm);color:var(--text-2)}
@media (hover: hover) { .footer-col a:hover {color:var(--text)} }
.footer-bottom{padding-top:var(--sp-6)}
.footer-bottom p{font-size:var(--text-xs);color:var(--text-3);max-width:none}

/* ===== RESPONSIVE ===== */
/* ── Hamburger button ── */
.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  padding:6px;
  background:none;
  border:1px solid rgba(255,255,255,0.12);
  border-radius:8px;
  cursor:pointer;
  flex-shrink:0;
}
.hamburger span{
  display:block;
  width:100%;
  height:2px;
  background:var(--text);
  border-radius:2px;
  transition:transform 0.25s,opacity 0.25s;
  transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width: 960px) {
  .beta-box{grid-template-columns:1fr}
  .referral-inner{grid-template-columns:1fr}
  .plans-grid{grid-template-columns:1fr;max-width:420px;margin-inline:auto}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .dest-grid{grid-template-columns:1fr}
  .footer-inner{grid-template-columns:1fr}
  .footer-cols{flex-wrap:wrap;gap:var(--sp-8)}
  .trust-sep{display:none}
  /* Hamburger switch at 960px */
  .nav{display:none}
  .header-actions .btn{display:none}
  .header-actions .lang-switcher{display:none}
  .header-actions .theme-toggle{display:none}
  .hamburger{display:flex}
}
@media (max-width: 640px) {
  .features-grid{grid-template-columns:1fr}
  .hero-cta{flex-direction:column;align-items:center}
  .visual-stats{grid-template-columns:1fr auto 1fr;row-gap:var(--sp-4)}
  .visual-stats .vstat:nth-child(6),.visual-stats .vstat:nth-child(7){display:none}
  .referral-compare{flex-direction:column;align-items:flex-start}
  .ref-arrow{transform:rotate(90deg)}
}

/* hamburger defined before the media queries above */

/* ── Mobile menu overlay + panel ── */
.mobile-menu{
  position:fixed;
  top:68px;
  left:0;
  right:0;
  bottom:0;
  z-index:200;
  flex-direction:column;
  /* Hidden by default on all screens */
  visibility:hidden;
  pointer-events:none;
  opacity:0;
}
.mobile-menu.open{
  visibility:visible;
  pointer-events:auto;
  opacity:1;
  display:flex;
}
/* On desktop (> 960px): never visible even if .open is there by mistake */
@media(min-width:961px){
  .mobile-menu, .mobile-menu.open{
    visibility:hidden !important;
    pointer-events:none !important;
    opacity:0 !important;
    display:none !important;
  }
}

/* Dark overlay behind the panel */
.mobile-menu::before{
  content:'';
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0.75);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}

/* White/dark contrasted panel */
.mobile-menu-panel{
  position:relative;
  margin-top:0;
  background:#0f1117;
  border-bottom-left-radius:20px;
  border-bottom-right-radius:20px;
  padding:28px 24px 36px;
  display:flex;
  flex-direction:column;
  gap:0;
  box-shadow:0 16px 48px rgba(0,0,0,0.6);
  border:1px solid rgba(255,255,255,0.1);
  border-top:none;
}
[data-theme="light"] .mobile-menu-panel{
  background:#ffffff;
  border-color:rgba(0,0,0,0.1);
  box-shadow:0 16px 48px rgba(0,0,0,0.2);
}

.mobile-nav{
  display:flex;
  flex-direction:column;
  gap:0;
  margin-bottom:24px;
}
.mobile-nav-link{
  font-size:1.1rem;
  font-weight:600;
  color:#ffffff;
  padding:16px 4px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:10px;
  transition:color 0.15s;
}
[data-theme="light"] .mobile-nav-link{color:#0f1117;border-bottom-color:rgba(0,0,0,0.08);}
.mobile-nav-link:last-child{border-bottom:none}
@media (hover: hover) { .mobile-nav-link:hover {color:var(--primary)} }

.mobile-lang{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:24px;
  padding-top:8px;
  border-top:1px solid rgba(255,255,255,0.08);
}
[data-theme="light"] .mobile-lang{border-top-color:rgba(0,0,0,0.08);}

.mobile-cta{
  width:100%;
  justify-content:center;
  font-size:1rem;
  padding:15px;
  border-radius:12px;
}

/* ── Referral free subscription highlight ── */
.rec-free-box{
  display:flex;
  align-items:flex-start;
  gap:14px;
  margin-top:20px;
  padding:16px 20px;
  background:linear-gradient(135deg, rgba(99,102,241,0.12), rgba(20,184,166,0.08));
  border:1px solid rgba(99,102,241,0.3);
  border-radius:14px;
}
.rec-free-icon{
  font-size:1.6rem;
  line-height:1;
  flex-shrink:0;
}
.rec-free-text{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.rec-free-text strong{
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--primary);
}
.rec-free-text span{
  font-size:var(--text-xs);
  color:var(--text-2);
  line-height:1.5;
}


/* ── Plan pills (Shield / Spark) ── */
.plan-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:0.72rem;
  font-weight:700;
  padding:4px 10px;
  border-radius:20px;
  margin-bottom:8px;
  letter-spacing:0.02em;
  width:100%;
  box-sizing:border-box;
}
.plan-pill-green{
  background:rgba(16,185,129,0.12);
  color:#10b981;
  border:1px solid rgba(16,185,129,0.25);
}
.plan-pill-blue{
  background:rgba(99,102,241,0.12);
  color:#818cf8;
  border:1px solid rgba(99,102,241,0.25);
}

/* ── Referral Spark free box ── */
.rec-free-box-spark{
  margin-top:10px;
  background:linear-gradient(135deg, rgba(251,191,36,0.08), rgba(245,158,11,0.05));
  border-color:rgba(251,191,36,0.25);
}
.rec-free-box-spark .rec-free-text strong{
  color:#f59e0b;
}

/* ── Hero price line ── */


/* ═══════════════════════════════════════════════════
   TUNNEL TABS
════════════════════════════════════════════════════*/
.tunnel-tabs {
  display: flex;
  gap: 8px;
  margin: 40px auto 0;
  max-width: 720px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 6px;
}
.tunnel-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid transparent;
  background: none;
  color: var(--text-2);
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  transition: all .18s;
  letter-spacing: 0.04em;
}
@media (hover: hover) { .tunnel-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,0.04);
} }
.tunnel-tab.active[data-tab="vpn"] {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.45);
  color: #c084fc;
}
.tunnel-tab.active[data-tab="shadow"] {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.45);
  color: #c084fc;
}
.tunnel-tab.active[data-tab="ghost"] {
  background: rgba(139,92,246,0.12);
  border-color: rgba(139,92,246,0.45);
  color: #c084fc;
}
.tunnel-tab-icon { font-size: 1rem; }

/* Panel show/hide */
.tunnel-panel { display: none; }
.tunnel-panel.active { display: block; }

/* Plan intro card */
.tunnel-plan-intro {
  max-width: 720px;
  margin: 24px auto 8px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1.5px solid var(--border);
  background: var(--surface);
}
.tunnel-plan-intro p {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.6;
  margin: 8px 0 12px;
}
.tunnel-plan-intro-vpn  { border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.06); }
.tunnel-plan-intro-shadow { border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.06); }
.tunnel-plan-intro-ghost  { border-color: rgba(139,92,246,0.35); background: rgba(139,92,246,0.06); }

.tunnel-plan-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.35);
  color: #c084fc;
}
.tunnel-plan-badge-shadow { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.35); color: #c084fc; }
.tunnel-plan-badge-ghost  { background: rgba(139,92,246,0.12); border-color: rgba(139,92,246,0.35); color: #c084fc; }

/* Plan feature pills row */
.tunnel-plan-limits {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.tunnel-limit-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(239,68,68,0.08);
  border: 1px solid rgba(239,68,68,0.25);
  color: #f87171;
}
.tunnel-limit-badge-green {
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.25);
  color: #34d399;
}

/* ═══════════════════════════════════════════════════
   SOVEREIGNTY TUNNEL: vertical timeline
════════════════════════════════════════════════════*/
.tunnel-timeline {
  position: relative;
  max-width: 720px;
  margin: 56px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each step row */
.tunnel-step {
  display: grid;
  grid-template-columns: 56px 24px 1fr;
  align-items: stretch;
  gap: 0 16px;
  position: relative;
}

/* Icon circle */
.tunnel-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 56px;
  flex-shrink: 0;
}
.tunnel-icon {
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0.12);
  border: 1.5px solid rgba(139,92,246,0.3);
  border-radius: 50%;
  font-size: 1.4rem;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
/* NodeCove step glow */
.tunnel-step-highlight .tunnel-icon {
  background: rgba(139,92,246,0.25);
  border-color: var(--primary);
  box-shadow: 0 0 24px rgba(139,92,246,0.4);
}
/* Final step */
.tunnel-step-final .tunnel-icon {
  background: rgba(16,185,129,0.15);
  border-color: #10b981;
}

/* Step number badge */
.tunnel-step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--primary);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  letter-spacing: 0;
}
.tunnel-step-final .tunnel-step-num {
  background: #10b981;
}

/* Vertical connector line */
.tunnel-connector {
  width: 2px;
  background: linear-gradient(to bottom, rgba(139,92,246,0.5), rgba(139,92,246,0.15));
  min-height: 32px;
  align-self: stretch;
  margin: 4px auto;
  grid-column: 1;
  /* push it to be the bottom part of the icon column */
}

/* Override grid layout: icon wraps connector inside it */
.tunnel-step {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
  padding-bottom: 0;
}
.tunnel-icon-wrap {
  position: relative;
  align-items: center;
}
/* The connector is a pseudo-line drawn below the icon */
.tunnel-step:not(.tunnel-step-final) .tunnel-icon-wrap::after {
  content: '';
  display: block;
  width: 2px;
  flex: 1;
  min-height: 40px;
  background: linear-gradient(to bottom, rgba(139,92,246,0.45), rgba(139,92,246,0.08));
  margin: 4px auto 0;
}
/* Remove connector div since we use ::after */
.tunnel-connector { display: none; }

/* Content card */
.tunnel-content {
  flex: 1;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 22px 20px;
  margin-bottom: 16px;
  transition: border-color .2s;
}
@media (hover: hover) { .tunnel-content:hover {
  border-color: rgba(139,92,246,0.4);
} }
.tunnel-step-highlight .tunnel-content {
  border-color: rgba(139,92,246,0.5);
  background: rgba(139,92,246,0.06);
  box-shadow: 0 4px 32px rgba(139,92,246,0.12);
}
.tunnel-step-final .tunnel-content {
  border-color: rgba(16,185,129,0.35);
  background: rgba(16,185,129,0.05);
}

/* Tag pill */
.tunnel-tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #a78bfa;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 8px;
}
.tunnel-tag-orange { color: #fb923c; background: rgba(251,146,60,0.1); border-color: rgba(251,146,60,0.25); }
.tunnel-tag-violet { color: #c084fc; background: rgba(192,132,252,0.12); border-color: rgba(192,132,252,0.35); }
.tunnel-tag-green  { color: #34d399; background: rgba(52,211,153,0.1);  border-color: rgba(52,211,153,0.25); }
.tunnel-tag-blue   { color: #60a5fa; background: rgba(96,165,250,0.1);   border-color: rgba(96,165,250,0.25); }

/* Title */
.tunnel-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.3;
}

/* Description */
.tunnel-desc {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 10px;
}
.tunnel-content .tunnel-desc:last-child { margin-bottom: 0; }

/* Chips row */
.tunnel-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.tunnel-chip {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text);
  text-decoration: none;
  transition: all .18s;
}
@media (hover: hover) { a.tunnel-chip:hover {
  border-color: rgba(139,92,246,0.5);
  color: #c084fc;
  background: rgba(139,92,246,0.08);
} }
.tunnel-chip-muted {
  color: var(--text-muted);
  border-color: rgba(255,255,255,0.06);
}
.tunnel-chip-green {
  color: #34d399;
  border-color: rgba(52,211,153,0.3);
  background: rgba(52,211,153,0.06);
}
@media (hover: hover) { a.tunnel-chip-green:hover {
  background: rgba(52,211,153,0.12);
  border-color: #34d399;
} }

/* Info box */
.tunnel-infobox {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(139,92,246,0.08);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  font-size: 0.82rem;
  color: #c4b5fd;
  line-height: 1.5;
}

/* CTA button inside highlight step */
.tunnel-cta-btn {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;
  background: var(--primary);
  color: #fff;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  text-decoration: none;
  transition: opacity .18s, transform .18s;
}
@media (hover: hover) { .tunnel-cta-btn:hover {
  opacity: .88;
  transform: translateY(-1px);
} }

/* Final badge */
.tunnel-final-badge {
  display: inline-block;
  margin-top: 12px;
  padding: 8px 18px;
  background: rgba(16,185,129,0.1);
  border: 1px solid rgba(16,185,129,0.3);
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 700;
  color: #34d399;
  letter-spacing: 0.02em;
}

/* Danger chip: red with border */
.tunnel-chip-danger {
  color: #f87171;
  background: rgba(239,68,68,0.08);
  border-color: rgba(239,68,68,0.35);
  font-weight: 700;
}
@media (hover: hover) { a.tunnel-chip-danger:hover {
  background: rgba(239,68,68,0.15);
  border-color: #f87171;
  color: #fca5a5;
} }

/* Warn content card: red left border */
.tunnel-content-warn {
  border-color: rgba(239,68,68,0.35) !important;
  background: rgba(239,68,68,0.03) !important;
}

/* Danger infobox: red */
.tunnel-infobox-danger {
  background: rgba(239,68,68,0.08) !important;
  border-color: rgba(239,68,68,0.3) !important;
  color: #f87171 !important;
}

/* Locked step icon */
.tunnel-icon-locked {
  opacity: 0.35;
  filter: grayscale(1);
}
.tunnel-step-num-locked {
  background: var(--text-3) !important;
  font-size: 0.55rem !important;
}

/* Locked content card */
.tunnel-content-locked {
  opacity: 0.55;
  border-color: rgba(255,255,255,0.06) !important;
  background: rgba(255,255,255,0.01) !important;
  position: relative;
  overflow: hidden;
}
.tunnel-content-locked .tunnel-locked-banner {
  opacity: 1;
}
.tunnel-title-locked {
  color: var(--text-3) !important;
  text-decoration: line-through;
}
.tunnel-tag-locked {
  color: var(--text-3) !important;
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* Locked upgrade banner */
.tunnel-locked-banner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(139,92,246,0.06);
  border: 1px solid rgba(139,92,246,0.2);
  border-radius: 8px;
  font-size: 0.82rem;
  color: #a78bfa;
}
.tunnel-locked-icon { font-size: 0.9rem; }
.tunnel-locked-upgrade {
  margin-left: auto;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.8rem;
  padding: 5px 14px;
  border-radius: 6px;
  background: var(--primary);
  border: 1px solid var(--primary);
  transition: all .18s;
  box-shadow: 0 0 10px rgba(109,74,255,0.35);
}
@media (hover: hover) { .tunnel-locked-upgrade:hover {
  background: #7c5bff;
  border-color: #7c5bff;
  transform: translateY(-1px);
  box-shadow: 0 2px 16px rgba(109,74,255,0.5);
} }

/* Mobile */
@media (max-width: 640px) {
  .tunnel-timeline { margin-top: 36px; }
  .tunnel-icon { width: 44px; height: 44px; font-size: 1.1rem; }
  .tunnel-content { padding: 14px 16px 16px; }
  .tunnel-title { font-size: 0.95rem; }
  .tunnel-step { gap: 14px; }
  .tunnel-tabs { gap: 4px; padding: 4px; }
  .tunnel-tab { padding: 10px 8px; font-size: 0.8rem; }
}

/* Tunnel warning infobox (orange) */
.tunnel-infobox-warn,
[data-i18n="tunnel_step5_warning"] {
  background: rgba(251,146,60,0.08);
  border-color: rgba(251,146,60,0.3);
  color: #fb923c;
}

.tunnel-infobox-success {
  background: rgba(52,211,153,0.08);
  border-color: rgba(52,211,153,0.3);
  color: #34d399;
}

/* Muted chips when used as links */
@media (hover: hover) { a.tunnel-chip-muted:hover {
  border-color: rgba(255,255,255,0.2);
  color: var(--text);
  background: rgba(255,255,255,0.06);
} }

/* Purple pill for Ghost plan */
.plan-pill-purple {
  background: rgba(139,92,246,0.15);
  border-color: rgba(139,92,246,0.4);
  color: #c084fc;
}



/* ═══════════════════════════════════════
   HARDWARE WALLETS SECTION
═══════════════════════════════════════ */
.hw-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);margin-top:var(--sp-8)}
@media(max-width:900px){.hw-grid{grid-template-columns:1fr}}

.hw-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:var(--sp-6);
  display:flex;
  flex-direction:column;
  gap:var(--sp-5);
}
.hw-card-featured{
  border-color:var(--primary);
  box-shadow:0 0 0 1px var(--primary), 0 8px 32px rgba(99,102,241,.12);
}
.hw-card-warning{
  border-color:rgba(239,68,68,.35);
  background:rgba(239,68,68,.04);
}

.hw-badge{
  position:absolute;
  top:-13px;
  left:50%;
  transform:translateX(-50%);
  background:var(--primary);
  color:#fff;
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.05em;
  padding:3px 14px;
  border-radius:999px;
  white-space:nowrap;
}
.hw-badge-warn{
  background:rgba(234,179,8,1);
  color:#000;
}

.hw-logo{display:flex;flex-direction:column;gap:var(--sp-1);padding-top:var(--sp-2)}
.hw-img{width:60px;height:auto;object-fit:contain;margin-bottom:var(--sp-2);border-radius:8px}
.hw-name{font-size:1.1rem;font-weight:700;color:var(--text)}
.hw-maker{font-size:.78rem;color:var(--text-3)}

.hw-facts{list-style:none;display:flex;flex-direction:column;gap:var(--sp-3);flex:1}
.hw-facts li{font-size:.82rem;line-height:1.5;color:var(--text-2)}
.hw-fact-good{color:var(--text)}
.hw-fact-bad{color:var(--text-2)}
.hw-fact-neutral{color:var(--text-3)}

.hw-cta{
  display:block;
  text-align:center;
  padding:10px 20px;
  border-radius:var(--radius);
  font-size:.85rem;
  font-weight:600;
  background:var(--primary);
  color:#fff;
  text-decoration:none;
  transition:opacity .2s;
  margin-top:auto;
}
@media (hover: hover) { .hw-cta:hover {opacity:.85;text-decoration:none} }
.hw-cta-secondary{background:transparent;border:1px solid var(--border);color:var(--text-2)}
@media (hover: hover) { .hw-cta-secondary:hover {border-color:var(--primary);color:var(--primary)} }
.hw-cta-disabled{
  display:block;
  text-align:center;
  padding:10px 20px;
  border-radius:var(--radius);
  font-size:.85rem;
  font-weight:600;
  background:rgba(239,68,68,.12);
  color:rgba(239,68,68,.7);
  border:1px solid rgba(239,68,68,.25);
  cursor:default;
  margin-top:auto;
}

.hw-note{
  text-align:center;
  font-size:.82rem;
  color:var(--text-3);
  margin-top:var(--sp-6);
  padding:var(--sp-4) var(--sp-6);
  background:rgba(99,102,241,.06);
  border:1px solid rgba(99,102,241,.15);
  border-radius:var(--radius);
}

/* ============================================================
   ORDER SECTION - order page (replaces #beta)
   ============================================================ */

.order-section {
  padding-block: clamp(var(--sp-16), 8vw, var(--sp-20));
  background: var(--bg);
}

.order-header {
  text-align: center;
  margin-bottom: var(--sp-12);
}

.order-tier-banner {
  margin: var(--sp-5) auto var(--sp-6);
  text-align: center;
}

/* ── Billing toggle ── */
.billing-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rad-full);
  padding: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-4);
  cursor: pointer;
}

.billing-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-2);
  user-select: none;
}

.billing-label-annual {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--text);
}

.billing-save-badge {
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius: var(--rad-full);
  padding: 2px 8px;
  letter-spacing: 0.02em;
}

.billing-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--primary);
  border: none;
  border-radius: var(--rad-full);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--trans);
}

.billing-toggle[aria-pressed="false"] {
  background: var(--border);
}

.billing-toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform var(--trans);
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
  pointer-events: none;
}

.billing-toggle[aria-pressed="true"] .billing-toggle-knob {
  transform: translateX(20px);
}

/* ── Plans grid ── */
.order-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  align-items: stretch;
  margin-bottom: var(--sp-10);
}

.order-plan {
  position: relative;
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--rad-xl);
  padding: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  cursor: pointer;
  transition: border-color var(--trans), box-shadow var(--trans), transform var(--trans);
}

@media (hover: hover) { .order-plan:hover {
  border-color: color-mix(in srgb, var(--primary) 50%, transparent);
  box-shadow: var(--shadow-md);
} }

.order-plan.selected {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent);
  transform: translateY(-2px);
}

.order-plan-featured {
  border-color: var(--primary);
  box-shadow: var(--shadow-card);
}

.order-plan-featured.selected {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent), var(--shadow-card);
}

.order-plan-popular {
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--rad-full);
  white-space: nowrap;
  letter-spacing: 0.04em;
}

.order-plan-name {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--primary);
}

.order-plan-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.order-plan-price {
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--text);
  transition: opacity 0.2s;
}

.order-plan-price.updating {
  opacity: 0.4;
}

.order-plan-period {
  font-size: var(--text-sm);
  color: var(--text-2);
}

.order-plan-billed {
  font-size: 12px;
  color: var(--text-3);
  min-height: 18px;
  transition: opacity 0.2s;
}

.order-plan-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.order-plan-list li {
  font-size: var(--text-sm);
  color: var(--text-2);
  display: flex;
  align-items: flex-start;
  gap: var(--sp-2);
}

.order-plan-list li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 7px;
}

.order-plan-select-indicator {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  text-align: center;
  opacity: 0;
  height: 20px;
  transition: opacity var(--trans);
  letter-spacing: 0.04em;
}

.order-plan.selected .order-plan-select-indicator {
  opacity: 1;
}

/* Pills - reuses existing styles */
.order-plan-pill { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:4px 10px;border-radius:var(--rad-full);letter-spacing:.02em;width:fit-content; }
.order-pill-green { background:color-mix(in srgb,#10b981 12%,transparent);color:#10b981;border:1px solid color-mix(in srgb,#10b981 25%,transparent); }
.order-pill-blue  { background:color-mix(in srgb,#f7931a 12%,transparent);color:#f7931a;border:1px solid color-mix(in srgb,#f7931a 25%,transparent); }
.order-pill-purple{ background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);border:1px solid color-mix(in srgb,var(--primary) 25%,transparent); }

/* -- Order form -- */
.order-form-wrap {
  max-width: 560px;
  margin: 0 auto;
}

.order-form-box {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rad-xl);
  padding: var(--sp-8);
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.order-form-summary {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  color: var(--text-2);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: var(--rad-md);
  padding: var(--sp-3) var(--sp-4);
  flex-wrap: wrap;
}

.order-form-summary strong {
  color: var(--text);
}

.order-summary-sep {
  color: var(--text-3);
}

.order-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}





.order-coming-note {
  font-size: 12px;
  color: var(--text-3);
  text-align: center;
  line-height: 1.6;
  margin: 0;
}

.order-reassure {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-6);
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--text-3);
  font-weight: 600;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .order-plans-grid {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-inline: auto;
  }
  .billing-toggle-wrap {
    padding: var(--sp-2) var(--sp-4);
  }
}

/* ── LIGHTNING EXPLAINER ── */
.ln-explainer {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 48px 0;
}
.ln-exp-card {
  background: var(--bg-alt);
  border-radius: 16px;
  padding: 28px 24px;
  text-align: center;
}
.ln-exp-card-highlight {
  background: color-mix(in srgb, var(--primary) 6%, var(--bg-alt));
}
.ln-exp-icon { font-size: 2rem; margin-bottom: 12px; }
.ln-exp-title { font-size: 1.1rem; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.ln-exp-desc { font-size: 0.88rem; color: var(--text-2); line-height: 1.6; margin: 0; }
.ln-exp-arrow { font-size: 1.6rem; color: var(--primary); text-align: center; flex-shrink: 0; }

/* ── WORKFLOW ── */
.ln-workflow {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px;
  margin: 40px 0;
}
.ln-workflow-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 28px;
}
.ln-steps {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.ln-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex: 1;
  min-width: 160px;
}
.ln-step-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-alt);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--text);
  flex-shrink: 0;
}
.ln-step-final .ln-step-num-final {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  font-size: 1rem;
}
.ln-step-title { font-weight: 700; font-size: 0.9rem; color: var(--text); margin-bottom: 4px; }
.ln-step-desc { font-size: 0.82rem; color: var(--text-2); line-height: 1.5; }
.ln-step-arrow { font-size: 1.2rem; color: var(--text-3); flex-shrink: 0; }

/* ── DUAL WORKFLOW STYLES ── */
.ln-workflow-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.ln-workflow-badge-first {
  background: rgba(245,158,11,0.15);
  color: #d97706;
  border: 1px solid rgba(245,158,11,0.3);
}
.ln-workflow-badge-main {
  background: rgba(var(--primary-rgb, 99,102,241),0.12);
  color: var(--primary);
  border: 1px solid rgba(var(--primary-rgb, 99,102,241),0.25);
}
.ln-workflow-first {
  border-color: rgba(245,158,11,0.25);
}
.ln-workflow-sub {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Jade CTA button inside workflow step */
.ln-jade-cta {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px;
  padding: 5px 12px;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
@media (hover: hover) { .ln-jade-cta:hover {
  background: var(--primary);
  color: #fff;
} }


/* ── WALLETS GRID UPDATES ── */
.ln-wallets-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--text);
  margin: 40px 0 24px;
}
.wallet-card-primary {
  border-color: var(--primary);
  box-shadow: 0 0 24px color-mix(in srgb, var(--primary) 15%, transparent);
}
.wallet-role-badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  background: color-mix(in srgb, var(--primary) 15%, transparent);
  color: var(--primary);
  margin-bottom: 12px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
}
.wallet-role-relay {
  background: color-mix(in srgb, var(--text-3) 15%, transparent);
  color: var(--text-2);
  border-color: var(--border);
}
.wallet-use {
  font-size: 0.8rem;
  color: var(--text-2);
  margin: 10px 0 12px;
  line-height: 1.6;
}

/* ── LIGHTNING FAQ ACCORDEON ── */
.ln-faq {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  padding-top: 40px;
}
.ln-faq-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 20px;
}
/* ln-faq-list reuses faq2-item styles: no overrides needed */
.ln-faq-list .faq2-item {
  margin-bottom: 8px;
}

/* ── FREEDOMIA SECTION STANDALONE ── */
#freedomia { border-top: 1px solid var(--border); }

/* Responsive Lightning */
@media (max-width: 768px) {
  .ln-explainer {
    grid-template-columns: 1fr;
  }
  .ln-exp-arrow { transform: rotate(90deg); }
  .ln-steps { flex-direction: column; }
  .ln-step-arrow { transform: rotate(90deg); }
  .ln-step { min-width: unset; width: 100%; }
}

/* ── Wallets intro grid (relay / private / jade) ── */
.wallets-intro-grid {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 32px 0 40px;
  flex-wrap: wrap;
}
.wallets-intro-card {
  flex: 1;
  min-width: 200px;
  background: var(--bg-alt);
  border-radius: 12px;
  padding: 24px 20px;
}
.wallets-intro-card-main {
  background: rgba(139,92,246,0.07);
}
.wallets-intro-card-optional {
  opacity: 0.8;
}
.wallets-intro-icon { font-size: 28px; margin-bottom: 12px; }
.wallets-intro-title { font-size: 14px; font-weight: 700; margin: 0 0 8px; color: var(--text); }
.wallets-intro-desc { font-size: 13px; color: var(--text-2); line-height: 1.6; margin: 0; }
.wallets-intro-arrow {
  font-size: 22px;
  color: var(--text-3);
  align-self: center;
  flex-shrink: 0;
  padding: 0 4px;
}
@media (max-width: 680px) {
  .wallets-intro-grid { flex-direction: column; }
  .wallets-intro-arrow { transform: rotate(90deg); align-self: center; }
}

/* Hero price: clickable link */
.hero-price-link {
  display: inline-block;
  text-decoration: none;
  margin-bottom: 4px;
}
@media (hover: hover) { .hero-price-link:hover .hero-sub-price {
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 0.85;
} }
.hero-sub-price {
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  color: var(--primary);
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  transition: opacity 0.15s;
}
/* Hero cta sub: tier details (below the button) */
.hero-cta-sub {
  font-size: 12px;
  color: var(--text-3);
  margin: 16px 0 0;
  line-height: 1.8;
  max-width: 560px;
}

/* ══════════════════════════════════════════════════════════════
   MANIFESTO SECTION
══════════════════════════════════════════════════════════════ */
.manifesto-intro {
  max-width: 720px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-2);
  margin-bottom: 48px;
}
.manifesto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}
.manifesto-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.manifesto-card-dark {
  background: var(--bg-alt);
}
.manifesto-card-quote {
  background: var(--bg-alt);
}
.manifesto-card-border {
  border: 1.5px dashed var(--border);
  opacity: 0.9;
}
.manifesto-icon {
  font-size: 26px;
  line-height: 1;
}
.manifesto-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin: 0;
  line-height: 1.35;
}
.manifesto-body {
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0;
}
.manifesto-quote {
  margin: 12px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--primary);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
}
.manifesto-quote p {
  font-size: 13px;
  font-style: italic;
  color: var(--text);
  margin: 0 0 6px;
  line-height: 1.65;
}
.manifesto-quote cite {
  font-size: 12px;
  color: var(--text-3);
  font-style: normal;
  font-weight: 600;
}
/* CTA block - window closes */
.manifesto-cta-block {
  background: linear-gradient(135deg, var(--bg-alt) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 40px 36px;
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}
.manifesto-cta-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: -0.02em;
}
.manifesto-cta-body {
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 0 0 20px;
}
.manifesto-cta-final {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary);
  margin: 0 0 28px;
  letter-spacing: -0.01em;
}
@media (max-width: 640px) {
  .manifesto-grid { grid-template-columns: 1fr; }
  .manifesto-cta-block { padding: 28px 20px; }
}

/* ================================
   FAQ v2
================================= */
/* ===== FAQ v2 ===== */
.faq2-section { background: var(--bg); }

.faq2-header { max-width: 760px; margin-bottom: 48px; }

/* Filtres */
.faq2-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 28px;
}
.faq2-filter {
  padding: 7px 16px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.01em;
}
@media (hover: hover) { .faq2-filter:hover { border-color: var(--primary); color: var(--primary); } }
.faq2-filter.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Groupe */
.faq2-group {
  margin-bottom: 40px;
  transition: opacity 0.2s;
}
.faq2-group.faq2-hidden { display: none; }

.faq2-group-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.faq2-group-icon { font-size: 15px; }

/* Liste */
.faq2-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* Item */
.faq2-item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid transparent;
  transition: border-color 0.15s;
}
@media (hover: hover) { .faq2-item:hover { border-color: var(--border); } }
.faq2-item.open { border-color: var(--border); background: var(--surface); }

/* Question bouton */
.faq2-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}
@media (hover: hover) { .faq2-q:hover { color: var(--primary); } }
.faq2-item.open .faq2-q { color: var(--primary); }

.faq2-arrow {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--bg-alt);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  transition: transform 0.25s, background 0.15s;
}
.faq2-item.open .faq2-arrow {
  transform: rotate(180deg);
  background: var(--primary-s);
  color: var(--primary);
}

/* Answer */
.faq2-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.2s;
}
.faq2-a.open {
  max-height: 600px;
  padding-bottom: 4px;
}
.faq2-a p {
  padding: 4px 20px 20px;
  font-size: 14px;
  color: var(--text-2);
  line-height: 1.75;
  margin: 0;
  border-top: 1px solid var(--border);
}

/* Responsive */
@media (max-width: 640px) {
  .faq2-filters { gap: 6px; }
  .faq2-filter { font-size: 12px; padding: 6px 12px; }
  .faq2-q { font-size: 14px; padding: 14px 16px; }
  .faq2-a p { padding: 4px 16px 16px; font-size: 13.5px; }
}

/* ================================
   Tunnel: plan bullets intro
================================= */
.tunnel-plan-bullets {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 680px;
  margin: 18px auto 32px;
}
.tunnel-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--border);
  background: var(--surface);
}
.tunnel-bullet-featured {
  border-color: rgba(139,92,246,0.45);
  background: rgba(139,92,246,0.06);
}
.tunnel-bullet-icon {
  font-size: 1.1rem;
  margin-top: 1px;
  flex-shrink: 0;
}
.tunnel-bullet-plan {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c084fc;
  margin-right: 8px;
}
.tunnel-bullet-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(139,92,246,0.18);
  border: 1px solid rgba(139,92,246,0.4);
  color: #c084fc;
  margin-right: 8px;
  vertical-align: middle;
}
.tunnel-bullet-desc {
  font-size: 0.85rem;
  color: var(--text-2);
  line-height: 1.55;
}
@media (max-width: 640px) {
  .tunnel-plan-bullets { margin: 14px auto 24px; }
  .tunnel-bullet { padding: 10px 12px; }
}

/* ── Brand Film ─────────────────────────────────────────── */
.section-film {
  padding: 60px 0 80px;
  background: var(--bg);
}
.film-wrapper {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.film-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 20px;
  opacity: 0.8;
}
.film-player {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 24px 64px rgba(0,0,0,0.6);
  aspect-ratio: 9/16;
}
.film-player video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.film-play-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
  transition: background 0.2s;
}
@media (hover: hover) { .film-play-overlay:hover {
  background: rgba(0,0,0,0.3);
} }
.film-play-overlay.hidden {
  display: none;
}
.film-play-btn {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  border: 2.5px solid rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.18s, background 0.18s, box-shadow 0.18s;
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
}
@media (hover: hover) { .film-play-overlay:hover .film-play-btn {
  transform: scale(1.1);
  background: rgba(0,0,0,0.7);
  box-shadow: 0 6px 32px rgba(0,0,0,0.7);
} }
.film-play-overlay span {
  font-size: 0.85rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.06em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.8);
  text-transform: uppercase;
}
@media (max-width: 520px) {
  .film-wrapper { max-width: 100%; padding: 0 8px; }
  .film-player { border-radius: 14px; }
}

/* -- FAQ - numbered no-log list ----------------------- */
.faq2-list {
  margin: 12px 0 16px 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.faq2-list li {
  font-size: 0.9rem;
  color: var(--text-2);
  line-height: 1.65;
}
.faq2-list li strong {
  color: var(--text-1);
  font-weight: 600;
}
.faq2-list li code {
  display: inline-block;
  margin: 4px 0;
  padding: 3px 10px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 6px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}
.faq2-conclusion {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
  font-size: 0.88rem;
  color: var(--text-2);
  font-style: italic;
  line-height: 1.6;
}

/* ── Trust Section ───────────────────────────────────────── */
.section-trust {
  padding: 80px 0 90px;
  background: var(--bg);
}
.trust-title {
  text-align: left;
  margin-bottom: 12px;
}
.trust-intro {
  text-align: left;
  color: var(--text-2);
  font-size: 1.05rem;
  margin-bottom: 48px;
  max-width: 480px;
  margin-left: 0;
  margin-right: auto;
}
.trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 40px;
}
@media (max-width: 900px) {
  .trust-cards { grid-template-columns: repeat(2, 1fr); }
}
.trust-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px;
  transition: border-color 0.2s, transform 0.2s;
}
@media (hover: hover) { .trust-card:hover {
  border-color: rgba(139,92,246,0.4);
  transform: translateY(-2px);
} }
.trust-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(139,92,246,0.12);
  border: 1px solid rgba(139,92,246,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 16px;
}
.trust-card-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 10px;
  line-height: 1.4;
}
.trust-card-text {
  font-size: 0.88rem;
  color: var(--text-2);
  line-height: 1.65;
  margin: 0 0 8px 0;
}
.trust-code {
  display: inline-block;
  margin: 8px 0;
  padding: 5px 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--accent);
  letter-spacing: 0.02em;
}

@media (max-width: 640px) {
  .trust-cards { grid-template-columns: 1fr; }
  .trust-card { padding: 22px 18px; }
}

/* ── Mutualization Section ─────────────────────────────────── */
.section-mutu {
  padding: 80px 0;
  background: var(--bg-alt, var(--card-bg));
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.mutu-wrapper {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 60px;
  align-items: center;
}
.mutu-text {
  font-size: 0.95rem;
  color: var(--text-2);
  line-height: 1.75;
  margin-bottom: 16px;
}
.mutu-text strong {
  color: var(--text-1);
}
/* Card comparatif */
.mutu-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 28px 24px;
}
.mutu-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}
.mutu-label {
  font-size: 0.88rem;
  color: var(--text-2);
}
.mutu-price {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.mutu-per {
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--text-2);
  margin-left: 2px;
}
.mutu-price-high {
  color: #f87171;
}
.mutu-divider {
  height: 1px;
  background: var(--border);
  opacity: 0.5;
}
.mutu-sep {
  height: 1px;
  background: rgba(139,92,246,0.3);
  margin: 8px 0;
}
.mutu-row-highlight {
  padding: 14px 0 6px;
}
.mutu-row-highlight .mutu-label strong {
  color: var(--text-1);
  font-size: 0.95rem;
}
.mutu-price-low {
  color: #4ade80;
  font-size: 1.4rem;
}
.mutu-note {
  font-size: 0.78rem;
  color: var(--text-2);
  text-align: center;
  margin-top: 12px;
  opacity: 0.7;
  font-style: italic;
}
@media (max-width: 860px) {
  .mutu-wrapper {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* -- Billing cycle toggle - 3-option segmented pill -- */
.billing-cycle-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
}

.billing-cycle-grid {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--rad-full);
  padding: 4px;
  gap: 2px;
}

.billing-cycle-card {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: var(--rad-full);
  border: none;
  background: transparent;
  color: var(--text-2);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  transition: background var(--trans), color var(--trans);
  white-space: nowrap;
  line-height: 1;
}

@media (hover: hover) { .billing-cycle-card:hover {
  color: var(--text);
} }

/* Active - same look as the old pill toggle */
.billing-cycle-card.active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}

/* Green savings badge (identical to the existing .billing-save-badge) */
.bcc-badge {
  font-size: 11px;
  font-weight: 700;
  background: color-mix(in srgb, var(--green) 15%, transparent);
  color: var(--green);
  border: 1px solid color-mix(in srgb, var(--green) 30%, transparent);
  border-radius: var(--rad-full);
  padding: 2px 8px;
  letter-spacing: 0.02em;
  line-height: 1.4;
}

/* Badge secondaire (1 an) */
.bcc-badge-sec {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}

/* When active, the badge adapts */
.billing-cycle-card.active .bcc-badge {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

.billing-cycle-card.active .bcc-badge-sec {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.25);
}

/* Legal note */
.billing-legal-note {
  font-size: 11px;
  color: var(--text-3);
  margin: 0;
  text-align: center;
  letter-spacing: .01em;
  opacity: .75;
}

@media (max-width: 540px) {
  .billing-cycle-card {
    padding: 7px 12px;
    font-size: 12px;
    gap: 5px;
  }
  .bcc-badge {
    font-size: 10px;
    padding: 1px 6px;
  }
}

/* -- Plan FAQ link (Ghost to Lightning vs onchain) -- */
.plan-faq-link {
  display: inline-block;
  margin-top: 8px;
  font-size: 11px;
  color: var(--primary);
  opacity: .8;
  text-decoration: none;
  letter-spacing: .01em;
  transition: opacity .15s;
}
@media (hover: hover) { .plan-faq-link:hover {
  opacity: 1;
  text-decoration: underline;
} }

/* ── FAQ link below plans grid ── */
.plans-faq-bridge-link {
  font-size: 12px;
  color: var(--primary);
  opacity: .7;
  text-decoration: none;
  letter-spacing: .01em;
  transition: opacity .15s;
}

@media (hover: hover) { .plans-faq-bridge-link:hover {
  opacity: 1;
  text-decoration: underline;
} }

/* ============================================================
   GRANDMOTHER SECTION
   ============================================================ */
.section-grandma {
  padding: 80px 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--border);
}
.grandma-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 48px;
  max-width: 780px;
}
.grandma-step {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  opacity: 1;
}
.grandma-step:last-child {
  border-bottom: none;
}
.grandma-num {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(139,92,246,0.15);
  border: 1px solid rgba(139,92,246,0.4);
  color: #a78bfa;
  font-size: 1.2rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.grandma-num-bonus {
  background: rgba(251,191,36,0.12);
  border-color: rgba(251,191,36,0.35);
  color: #fbbf24;
  font-size: 1rem;
}
.grandma-step-bonus {
  opacity: 0.85;
}
.grandma-content {
  flex: 1;
}
.grandma-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text-1);
  margin: 0 0 8px 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.grandma-desc {
  font-size: 0.93rem;
  color: var(--text-2);
  line-height: 1.7;
  margin: 0;
}
.grandma-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  background: rgba(139,92,246,0.15);
  color: #a78bfa;
  border: 1px solid rgba(139,92,246,0.3);
  white-space: nowrap;
}
.grandma-badge-ghost {
  background: rgba(251,191,36,0.12);
  color: #fbbf24;
  border-color: rgba(251,191,36,0.3);
}
@media (max-width: 600px) {
  .grandma-step {
    gap: 16px;
  }
  .grandma-num {
    width: 36px;
    height: 36px;
    font-size: 1rem;
  }
}