/* ============================================================
   COCOUN — foglio di stile della pagina «home»
   Estratto dal mockup single-file. I percorsi immagine puntano a
   ../img/ (cartella assets/img del tema).
   ============================================================ */
/* ============================================================================
   INDICE CSS
   1. Variabili (:root) — palette, tipografia, token
   2. Reset e base
   3. Header / nav / menu mobile / toggle lingua / toggle note
   4. Hero
   5. Video hero (player 16:9)
   6. Il problema (statistiche + accordion)
   7. Reveal del brand (isola scura)
   8. Risonanza (animazione canvas)
   9. Cinque scelte (deck impilato sticky)
   10. CTA band
   11. Prodotto (showcase 3 tile)
   12. Come funziona (timeline step)
   13. Il metodo (dodecaedro interattivo)
   14. Sicurezza & privacy
   15. Founder / filosofia
   16. Campagna crowdfunding (predisposta, nascosta)
   17. FAQ (accordion)
   18. Finale "dive deep" (isola scura) + footer
   19. Modal investor kit
   20. Note di design (diagnostica, body.no-labels)
   21. Responsive (media query)
   ============================================================================ */
/* ================================================================
   DESIGN TOKENS - variabili globali Cocoun v64
   Tutti i token sono raccolti qui. Non duplicare in altri blocchi.
   ================================================================ */
:root{
  /* - Colori brand - */
  --pink:#E74D6B;    --coral:#F39674;   --teal:#58AFB6;
  --pastel:#FAD4D7;  --plum:#994B76;    --salmon:#EE7679;
  --aqua:#EEF7F6;

  /* - Testi - */
  --ink:#1d1a1c;  --ink-soft:#5b5358;

  /* - Superfici - */
  --cream:#FBF7F4;   --cream-2:#F8EDE4;
  --white:#fff;      --dark:#191223;

  /* - Font - */
  --font:"Bricolage Grotesque",-apple-system,sans-serif;

  /* - Sistema tipografico fluido (Fluid Typography via clamp) -
     Fonte unica di verita'. 5 livelli + 1 funzionale (card).        */
  --fs-hero:clamp(2.5rem,6vw,4.5rem);     /* "+1" eccezionale: SOLO H1 hero + chiusura "Pronto a scendere in profondita?" */
  --fs-h2:clamp(1.8rem,4vw,2.8rem);       /* titoli principali di ogni isola (chiara o scura) */
  --fs-lead:clamp(1.15rem,1.5vw,1.35rem); /* occhielli superiori + paragrafi introduttivi di sezione */
  --fs-body:clamp(1rem,1vw,1.05rem);      /* testo di lettura standard (paragrafi, liste, risposte) */
  --fs-small:0.85rem;                     /* note legali, micro-copy, tag secondari, footer */
  --fs-card:24px;                         /* sotto-titoli di card/step (h3) - livello funzionale */

  /* - Line-height proporzionali (ritmo verticale) - */
  --lh-display:1.1;
  --lh-body:1.6;

  /* - Neumorfismo card (V56) - */
  --neu-bg:#F4F1EE;
  --neu-sh:rgba(140,120,135,.32);
  --neu-hi:rgba(255,255,255,.95);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
/* animazioni d'ingresso allo scroll — sottili, una volta sola */
.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-on-scroll.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal-on-scroll{opacity:1;transform:none;transition:none}}
html{scroll-behavior:smooth;scrollbar-gutter:stable;overflow-x:clip}
body{font-family:var(--font);color:var(--ink);background:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:clip;overflow-y:visible}



.placeholder{width:100%;height:100%;min-height:0;box-sizing:border-box;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;border:2px dashed var(--ink-soft);border-radius:18px;color:var(--ink-soft);text-align:center;padding:24px;background:rgba(0,0,0,.02)}
.placeholder .pl-tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65}
.placeholder .pl-main{font-size:15px;font-weight:600}
.play-btn{width:64px;height:64px;border-radius:50%;background:var(--teal);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 30px rgba(88,175,182,.45);cursor:pointer}
.play-btn svg{width:22px;height:22px;margin-left:3px;fill:#fff}


header{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:18px 40px;transition:.3s}
header .logo{font-weight:700;font-size:22px;letter-spacing:.3em;
  background:linear-gradient(135deg,#E74D6B 0%,#F39674 50%,#58AFB6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
header.on-dark .logo{background:linear-gradient(135deg,#F39674,#FAD4D7 60%,#58AFB6);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
header nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
header nav .nav-sep{width:1px;height:15px;background:rgba(0,0,0,.16);flex:0 0 auto}   /* separatore verticale leggero prima di Principi/Team/Contatti */
header.on-dark nav .nav-sep{background:rgba(255,255,255,.28)}
header nav a{color:inherit;text-decoration:none;opacity:.85;position:relative;padding-bottom:5px}
nav a::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--pink),var(--coral));
  transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.22,.61,.36,1)}
nav a:hover{opacity:1}
nav a:hover::after{transform:scaleX(1)}
header .cta-mini{background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff;padding:11px 24px;border-radius:30px;font-size:14px;font-weight:700;box-shadow:0 6px 18px rgba(231,77,107,.35);cursor:pointer}
header .hdr-right{display:flex;align-items:center;gap:18px}
/* selettore lingua a tendina: icona mondo (wireframe) + codice lingua + caret; predisposto a più lingue */
.lang-select{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:6px;border:1.5px solid rgba(0,0,0,.14);border-radius:30px;background:rgba(0,0,0,.03);
  font-family:var(--font);font-size:13px;font-weight:600;letter-spacing:.04em;color:var(--ink);cursor:pointer;padding:6px 10px 6px 11px;transition:border-color .25s,background .25s}
.lang-btn:hover{border-color:rgba(0,0,0,.28)}
.lang-globe{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round}
.lang-caret{width:11px;height:11px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.65;transition:transform .25s}
.lang-select.open .lang-caret{transform:rotate(180deg)}
.lang-menu{position:absolute;top:calc(100% + 9px);right:0;min-width:168px;list-style:none;margin:0;padding:6px;
  background:#fff;border:1.5px solid rgba(0,0,0,.08);border-radius:14px;box-shadow:0 18px 44px rgba(25,18,35,.16);display:none;z-index:70}
.lang-select.open .lang-menu{display:block}
.lang-menu li{margin:0}
.lang-menu a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 12px;border-radius:9px;
  text-decoration:none;color:var(--ink);font-size:14px;font-weight:500}
.lang-menu a:hover{background:rgba(231,77,107,.07)}
.lang-menu .lang-code{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--ink-soft)}
.lang-menu li.on a{color:var(--pink);font-weight:700}
.lang-menu li.on a .lang-code{color:var(--pink)}
/* adattivo su sezioni scure: solo il bottone (la tendina resta un pannello bianco) */
header.on-dark .lang-btn{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06);color:#fff}
/* dentro il menu mobile: bottone a piena larghezza, tendina in-flow */
.m-menu .lang-select{margin:8px 6px 0}
.m-menu .lang-btn{width:100%;justify-content:center}
.m-menu .lang-menu{position:static;box-shadow:none;border-color:rgba(0,0,0,.06);margin-top:6px;min-width:0}
header.on-dark{color:#fff}
header.on-dark .cta-mini{background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff}
header.scrolled{background:rgba(255,255,255,.10);
  backdrop-filter:blur(22px) saturate(180%) brightness(1.06);
  -webkit-backdrop-filter:blur(22px) saturate(180%) brightness(1.06);
  box-shadow:0 1px 0 rgba(0,0,0,.04)}
header.scrolled.on-dark{background:rgba(23,20,26,.32);
  backdrop-filter:blur(22px) saturate(180%) brightness(.95);
  -webkit-backdrop-filter:blur(22px) saturate(180%) brightness(.95)}
/* CTA band after choices */
.cta-band{background:var(--cream-2);text-align:center;padding:90px 40px}

.cta-band h3{font-size:var(--fs-hero);font-weight:500;margin-bottom:24px;letter-spacing:-.02em;
  text-shadow:0 -1.4px 0.6px rgba(255,255,255,.98), 0 -0.5px 0 rgba(255,255,255,.8), 0 2.2px 2.6px rgba(74,64,56,.30)}   /* V87.4: altorilievo un filo più marcato, luce in alto più netta (highlight quasi pieno + rim sottile) + ombra corta sotto, sempre stretto */
.cta-band h3 .em{color:var(--pink);font-style:italic;font-weight:400}
.cta-band .btn-primary{font-size:17px;padding:17px 34px}
/* campagna crowdfunding (hidden state) */
.kick{background:var(--cream);position:relative}
.kick .lock{position:absolute;inset:30px;border:2px dashed var(--plum);border-radius:24px;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(246,238,233,.82);backdrop-filter:blur(2px)}
.kick .lock span{background:var(--plum);color:#fff;padding:11px 24px;border-radius:30px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.kick .inner{display:grid;grid-template-columns:1fr 1.1fr;gap:54px;align-items:center;opacity:.4}
.kick h2{font-size:var(--fs-h2);margin-bottom:18px;max-width:none}
.kick h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.tiers{display:flex;flex-direction:column;gap:14px}
.tier{background:#fff;border:1px solid rgba(0,0,0,.07);border-radius:16px;padding:20px 24px;display:flex;justify-content:space-between;align-items:center}
.tier .t-name{font-weight:600;font-size:16px}
.tier .t-name small{display:block;font-weight:400;font-size:12px;color:var(--ink-soft);margin-top:3px}
.tier .t-price{font-weight:800;color:var(--pink);font-size:20px}


section{position:relative;padding:130px 40px}
.wrap{max-width:1120px;margin:0 auto}
/* [v88] VARIANTE D, "maiuscolo leggero": il maiuscolo resta, via peso e tracking larghi */
.eyebrow{font-size:var(--fs-body);font-weight:400;letter-spacing:.04em;text-transform:uppercase;color:var(--pink);margin-bottom:18px}
.eyebrow.teal{color:var(--teal)}
h1,h2,h3{line-height:1.02;letter-spacing:-.025em;font-weight:500}
.lead{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink-soft);max-width:560px}

/* 0 video hero */
.video-hero{background:var(--dark);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0;color:#fff;overflow:hidden}
.video-hero .vh-inner{text-align:center;position:relative;z-index:2;width:100%;max-width:820px;padding:40px}
.video-hero .vh-bg{position:absolute;inset:0;z-index:1;background:radial-gradient(60% 50% at 50% 40%, rgba(153,75,118,.35), transparent 70%),radial-gradient(50% 40% at 70% 70%, rgba(88,175,182,.18), transparent 70%)}
.video-hero .vh-playzone{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;pointer-events:none}
.video-hero .vh-bigplay{width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,.12);border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.video-hero .vh-bigplay svg{width:30px;height:30px;margin-left:5px;fill:#fff}
.video-hero .vh-fsnote{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:3;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);border:1px dashed rgba(255,255,255,.4);border-radius:30px;padding:6px 16px}
.vh-frame{position:absolute;inset:0;z-index:0;opacity:.28;background:linear-gradient(120deg,#1a1430,#2a1a24 40%,#102325)}
.vh-sub{font-size:14px;font-weight:400;letter-spacing:.04em;  /* [v88] era .3em */text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:30px}
.vh-quote{font-size:clamp(30px,5.4vw,58px);font-weight:300;line-height:1.16;font-style:italic}
.vh-forse{font-weight:800;font-style:normal;display:block;margin-top:22px;letter-spacing:.04em;font-size:1.15em}
.vh-scroll{margin-top:64px;font-size:13px;color:rgba(255,255,255,.5);letter-spacing:.1em}

/* 1 hero */
.hero{background:var(--cream);padding-top:170px;padding-bottom:150px;position:relative;overflow:visible}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.hero h1{font-size:var(--fs-hero);font-weight:500;line-height:var(--lh-display);max-width:45ch;text-wrap:balance}
.hero h1 .strike{color:var(--ink-soft);text-decoration:line-through;text-decoration-color:var(--pink);text-decoration-thickness:3px;font-weight:300}
.hero h1 .accent{color:var(--pink);font-style:italic;font-weight:400}
.hero .lead{margin-top:28px;font-size:var(--fs-lead);max-width:52ch}
/* v82: lead-in editoriale d'élite — mantiene letter-spacing/scale di lusso della hero */
.hero .lead .lead-in{display:block;text-transform:uppercase;letter-spacing:.04em;font-size:.72em;font-weight:400;  /* [v88] era 700/.2em */color:var(--pink);margin-bottom:12px}
.hero .cta-row{margin-top:36px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.btn-primary{background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff;border:none;padding:16px 30px;border-radius:40px;font-family:var(--font);font-size:16px;font-weight:600;cursor:pointer;box-shadow:0 12px 30px rgba(231,77,107,.3)}
/* mockup UI: "Floating Layer" 3D — lastra vitrea che fluttua sopra i quadrati neumorfici.
   perspective+preserve-3d danno spessore allo screenshot interno (translateZ); il tilt
   col mouse e' applicato via JS su .hero-visual (transizione .5s = effetto pastoso).
   >>> PER SOSTITUIRE I MOCKUP: cambia SOLO le due variabili qui sotto (--url-ui-*). <<< */
.hero-visual{
  --url-ui-light:url('../img/ui-app-light.webp');
  --url-ui-dark:url('../img/ui-app-dark.webp');
  /* su mobile il mockup hero è largo ~metà: versioni leggere (-60% di peso, LCP migliore) */
  --glare-x:50%;--glare-y:50%;                 /* posizione riflesso (mossa dal JS) */
  --edge-x:50%;                                /* posizione bagliore del bordo molato (JS) */
  position:relative;z-index:1;width:100%;max-width:300px;margin:40px auto 0;aspect-ratio:804/1748;border-radius:36px;
  transform-style:preserve-3d;perspective:1000px;
  box-shadow:25px 30px 60px rgba(125,95,115,0.16), -15px -15px 45px rgba(255,255,255,0.92);
  transition:transform 0.5s cubic-bezier(0.25,1,0.5,1), box-shadow 0.5s ease;
  will-change:transform}
/* due layer screenshot sovrapposti (background-image dalle variabili) per il cross-fade;
   raggio nativo stabile 36px (NON ridurre: taglierebbe la UI). translateZ = spessore 3D. */
.hero-visual .ui-shot{position:absolute;inset:0;background-size:cover;background-position:center;
  border-radius:36px;transform:translateZ(15px);backface-visibility:hidden;transition:opacity 0.5s ease}
.hero-visual .ui-dark{background-image:var(--url-ui-dark);opacity:1}   /* dark = default */
.hero-visual .ui-light{background-image:var(--url-ui-light);opacity:0}
.hero-visual.is-light .ui-light{opacity:1}
.hero-visual.is-light .ui-dark{opacity:0}
/* Glossy Screen: strato cristallino con riflesso netto a 135deg che scivola col tilt.
   mix-blend-mode:overlay + opacita' bassa a riposo; background-position pilotato da --glare-*. */
.hero-visual .ui-glass-specular{position:absolute;inset:0;border-radius:36px;pointer-events:none;
  transform:translateZ(16px);mix-blend-mode:overlay;opacity:.42;
  /* v82: intensita' ridotta + raggio principale sfocato. FIX: eliminata la "linea" satura al centro
     -> niente picco a 50%, ma un PLATEAU largo e piatto (40%->60% costante) che sfuma ai lati:
     riflesso setoso e diffuso, senza banda centrale marcata. */
  filter:blur(12px);
  background:linear-gradient(135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,.035) 25%,
    rgba(255,255,255,.08) 40%,
    rgba(255,255,255,.08) 60%,
    rgba(255,255,255,.035) 75%,
    rgba(255,255,255,0) 100%);
  background-size:230% 230%;
  background-position:var(--glare-x) var(--glare-y);
  /* lo smorzamento (lerp) e' nel JS -> niente transition su background-position (evita doppio lag) */
  transition:opacity .5s ease}
/* Vetro premium 1: micro-rilievo del bordo (overlay) — luce alto-sx + ombra vellutata basso-dx.
   v79.1: spessore +1px (offset 1.5->2.5) e luce piu' marcata (opacita' .9->.98). */
.hero-visual::after{content:"";position:absolute;inset:0;border-radius:36px;pointer-events:none;
  transform:translateZ(16px);mix-blend-mode:overlay;
  box-shadow:inset 2.5px 2.5px 1.5px rgba(255,255,255,0.98),
             inset -2.5px -2.5px 3px rgba(0,0,0,0.34)}
/* Vetro premium 2: bagliore lineare del bordo molato in alto, scivola col tilt (--edge-x dal JS).
   v79.1: piu' realistico -> opacita' .55->.4, leggero blur, picco ammorbidito. */
.hero-visual .ui-glass-edge{position:absolute;inset:0;border-radius:36px;pointer-events:none;
  transform:translateZ(17px);mix-blend-mode:screen;opacity:.4;filter:blur(1.3px);
  background:linear-gradient(115deg,
    rgba(255,255,255,0) 28%,
    rgba(255,255,255,.42) 47%,
    rgba(255,255,255,.68) 50%,
    rgba(255,255,255,.42) 53%,
    rgba(255,255,255,0) 72%);
  background-size:300% 100%;
  background-position:var(--edge-x) 0%;
  /* limitato alla fascia alta -> spessore di lastra molata sul bordo superiore */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 16%,transparent 40%);
          mask-image:linear-gradient(180deg,#000 0%,#000 16%,transparent 40%)}

/* ===== TOGGLE NEUMORFICO tema anteprima (DAYMODE/NIGHTMODE) — strutturale ===== */
/* respiro: il toggle centrato nella "valle" tra gli angoli delle forme neumorfiche di sfondo */
.ui-toggle-wrap{display:flex;justify-content:center;margin-top:48px;transform:translateZ(0)}
.ui-toggle{appearance:none;-webkit-appearance:none;border:none;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;display:block}
.ui-toggle .tk{position:relative;display:block;width:88px;height:42px;border-radius:21px;
  background:#ece4de;
  box-shadow:inset 4px 4px 9px rgba(125,95,115,.22), inset -4px -4px 9px rgba(255,255,255,.95);
  transition:background .45s ease, box-shadow .45s ease}
.ui-toggle .ic{position:absolute;top:50%;transform:translateY(-50%);width:18px;height:18px;
  display:flex;align-items:center;justify-content:center;transition:opacity .4s ease}
.ui-toggle .ic svg{width:18px;height:18px;display:block}
.ui-toggle .ic-moon{left:11px;color:#6b6470;opacity:.3}
.ui-toggle .ic-sun{right:11px;color:#caa23f;opacity:.9}
.ui-toggle .kb{position:absolute;top:5px;left:5px;width:32px;height:32px;border-radius:50%;
  background:linear-gradient(145deg,#ffffff,#e6ddd6);
  box-shadow:3px 3px 7px rgba(125,95,115,.30), -3px -3px 7px rgba(255,255,255,.95);
  transition:transform .45s cubic-bezier(.25,1,.5,1), background .45s ease, box-shadow .45s ease}
/* DARK (default · aria-checked=true): knob a destra, asola antracite, luna accesa.
   Punch materico equiparato alla light: scavo profondo (nero puro sfumato @.4 + ombre nette)
   e riflessi di luce superiori scuri (white a bassa opacita') per netto rilievo/scavo. */
.ui-toggle[aria-checked="true"] .tk{background:#26222c;
  box-shadow:inset 5px 5px 12px rgba(0,0,0,.70),
             inset -5px -5px 11px rgba(255,255,255,.08),
             inset 0 1px 1px rgba(0,0,0,.55)}
.ui-toggle[aria-checked="true"] .kb{transform:translateX(46px);
  background:linear-gradient(145deg,#433c4a,#231f29);
  box-shadow:0 6px 14px rgba(0,0,0,.40),
             4px 4px 9px rgba(0,0,0,.55),
             -4px -4px 9px rgba(255,255,255,.09),
             inset 0 1px 1px rgba(255,255,255,.14)}
.ui-toggle[aria-checked="true"] .ic-moon{opacity:.92;color:#cfd2e0}
.ui-toggle[aria-checked="true"] .ic-sun{opacity:.22}
.ui-toggle:focus-visible{outline:none}
.ui-toggle:focus-visible .tk{box-shadow:inset 4px 4px 9px rgba(125,95,115,.22), inset -4px -4px 9px rgba(255,255,255,.95), 0 0 0 3px rgba(231,77,107,.35)}
.ui-toggle[aria-checked="true"]:focus-visible .tk{box-shadow:inset 4px 4px 9px rgba(0,0,0,.55), inset -4px -4px 9px rgba(255,255,255,.06), 0 0 0 3px rgba(231,77,107,.45)}
/* ===== /TOGGLE NEUMORFICO ===== */

/* ===== VIEWPORT BASSI (laptop / 720p): mockup+toggle visibili al 100%, niente tagli =====
   Scala proporzionale via max-width (riduce ANCHE l'altezza di layout grazie all'aspect-ratio),
   non transform:scale che lascerebbe lo spazio riservato e taglierebbe comunque dal fondo. */
@media (max-height:800px){
  .hero{padding-top:120px;padding-bottom:88px}
  .hero-visual{max-width:262px}            /* ~0.87x */
  .ui-toggle-wrap{margin-top:44px}
}
@media (max-height:650px){
  .hero{padding-top:84px;padding-bottom:60px}
  .hero-visual{max-width:224px}            /* ~0.75x */
  .ui-toggle-wrap{margin-top:30px}
}

/* 2 problem / data — Bending-Spoons style big numbers */
.data{background:transparent;text-align:center}  /* trasparente: lascia vedere la decorazione hero che vi sborda sopra */
.data .eyebrow{display:block}
.data h2{font-size:var(--fs-h2);max-width:1000px;margin:0 auto 28px;font-weight:500}
.data h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.data .villain{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink-soft);max-width:65ch;margin:0 auto 90px;text-wrap:pretty}
.data .villain b{color:var(--ink);font-weight:600}
.data .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1020px;margin:0 auto;align-items:start}
.stat .num{font-size:clamp(58px,7.2vw,118px);font-weight:200;color:var(--pink);line-height:.88;letter-spacing:-.04em}
.stat:nth-child(2) .num{color:var(--coral)}
.stat:nth-child(3) .num{color:var(--teal)}
.stat .desc{margin-top:18px;font-size:18px;color:var(--ink-soft);line-height:1.5;max-width:420px;margin-left:auto;margin-right:auto}


/* 3 reveal logo */
.reveal{background:var(--dark);color:#fff;text-align:center;padding:170px 40px 180px;overflow:hidden}
.reveal .rv-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(28% 30% at 50% 48%, rgba(153,75,118,.16), transparent 70%),radial-gradient(25% 25% at 50% 62%, rgba(88,175,182,.08), transparent 70%)}
/* .reveal .inner rimosso in v64 */
.reveal .q{font-size:var(--fs-h2);font-weight:300;line-height:1.24;font-style:italic;margin-bottom:72px;max-width:none;margin-left:auto;margin-right:auto}
.reveal .q b{font-style:normal;font-weight:600;color:#fff}
.reveal .from{font-size:15px;color:rgba(255,255,255,.55);margin-bottom:48px;letter-spacing:.02em}
/* lockup: monogram on top, wordmark below, tight ratio like real logo */
.reveal .lockup{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin:24px 0 8px;filter:drop-shadow(0 0 50px rgba(231,77,107,.28))}
.reveal img.logo{width:clamp(120px,15vw,168px);height:auto;display:block}
.reveal .word{font-size:clamp(54px,10vw,98px);font-weight:700;letter-spacing:.3em;line-height:1;padding-left:.3em;
  background:linear-gradient(135deg,#E74D6B 0%,#F39674 50%,#58AFB6 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* V57 · loghi SVG ufficiali */
.logo-svg svg{display:block;height:auto}
.logo-reveal-svg{filter:drop-shadow(0 0 40px rgba(231,77,107,.25))}
.logo-reveal-svg svg{width:clamp(300px,36vw,480px)}
/* V60: wordmark reveal in bianco panna/marmo (non bianco ottico) */
.logo-reveal-svg .cocoun-word-rev{fill:#F3ECE0!important}
header .logo-hdr{display:inline-flex;align-items:center;text-decoration:none;flex:0 1 auto;min-width:0}
/* V60: header = solo wordmark, piu' piccolo, grigio mediano + blend overlay */
/* v66: width fluida con clamp per evitare overflow su mobile (spingeva l'hamburger fuori viewport) */
header .logo-hdr svg{height:20px;width:auto;max-width:100%;display:block}  /* V87.1: stessa taglia della firmetta nel footer */
header .logo-hdr [id^="Dodecaedro"]{display:none}
header .logo-hdr .cocoun-word-hdr{fill:#3a3540!important}
/* V60: footer = monogramma grande + scritta COCOUN bianca */
footer .logo-ftr svg{height:20px;width:auto;margin-bottom:10px;opacity:.92}  /* V87: firmetta, non insegna */
footer .logo-ftr .cocoun-word-ftr{fill:#fff!important}
h2.oneline{white-space:nowrap;max-width:none!important}
/* V59: titoli manifesto su 2 righe — ogni riga intera (nowrap), font calibrato */
h2.two-lines{font-size:var(--fs-h2)!important;max-width:none!important;text-wrap:balance}
h2.two-lines .ln{display:block}
@media(max-width:760px){h2.oneline{white-space:normal}}
.reveal .tag{margin-top:30px;font-size:clamp(34px,4.4vw,56px);font-weight:300;font-style:italic;letter-spacing:0;color:#fff}

/* 4 resonance */
.reson{position:relative;overflow:visible;background:var(--cream);text-align:center;padding:240px 40px 220px}
/* glow ovale creamy: molti stop morbidi + blur per dissolvere ogni bordo */
.reson::before{content:"";position:absolute;z-index:0;left:46%;top:46%;transform:translate(-50%,-50%);
  width:150%;height:80%;
  background:radial-gradient(ellipse 46% 50% at 50% 50%,
    rgba(255,251,249,1) 0%,
    rgba(255,250,248,0.9) 16%,
    rgba(254,244,245,0.68) 32%,
    rgba(252,238,240,0.4) 48%,
    rgba(251,247,244,0.18) 64%,
    rgba(251,247,244,0.05) 82%,
    rgba(251,247,244,0) 100%);
  filter:blur(48px);
  pointer-events:none}
.reson .inner{position:relative;z-index:2;max-width:780px;margin:0 auto}
.reson .eyebrow{display:block;color:var(--teal)}
.reson h2{font-size:var(--fs-hero);margin-bottom:28px;font-weight:400;letter-spacing:-.04em;   /* V87.3: monumentale come le CTA (--fs-hero) */
  background:linear-gradient(100deg,#d63864,var(--pink) 50%,#f0607f);-webkit-background-clip:text;background-clip:text;color:transparent;line-height:.95;
  filter:drop-shadow(0 4px 30px rgba(231,77,107,.35))}
.reson p{font-size:var(--fs-lead);line-height:var(--lh-body);color:var(--ink-soft);max-width:65ch;margin:0 auto}
.reson p b{color:var(--ink);font-weight:600}
.reson .kinds{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:42px}
.reson .kind{background:#fff;border:1.5px solid rgba(153,75,118,.15);border-radius:30px;padding:12px 26px;font-size:15px;font-weight:600;color:var(--plum);cursor:default;transition:.28s ease}
.reson .kind:hover{color:#fff;border-color:transparent;transform:translateY(-3px)}
.reson .kind:nth-child(1):hover{background:var(--pink);box-shadow:0 10px 24px rgba(231,77,107,.32)}
.reson .kind:nth-child(2):hover{background:var(--coral);box-shadow:0 10px 24px rgba(243,150,116,.32)}
.reson .kind:nth-child(3):hover{background:var(--teal);box-shadow:0 10px 24px rgba(88,175,182,.32)}

/* 5 choices */
.choices{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.choices .head{max-width:760px;margin:0 auto 44px}  /* V87: testata allineata al bordo sinistro delle card (deck 760px) */
.choices h2{font-size:var(--fs-h2);margin-bottom:18px}
.choices h2 .em{color:var(--pink);font-style:italic;font-weight:400}
/* ================================================================
   SISTEMA CARD - base riutilizzabile
   ----------------------------------------------------------------
   Aggiungere .c-card a ogni card per ereditare geometria e transizione.
   Le varianti sono compositori: si possono combinare liberamente.

   .c-card           base: position, radius, overflow, transition
   .c-card--flat     bordo sottile + sfondo bianco
   .c-card--raised   ombra soft (white card standard)
   .c-card--neu      neumorfismo (pm-card)
   .c-card--pop      hover: translate(-4,-4) + block-shadow accent
   .c-card--pop-sm   hover: translate(-3,-3) + block-shadow leggero
   --card-accent     colore accent hover (default: var(--pink))
   --card-r          border-radius override (default: 22px)
   --card-dur        durata transizione (default: .22s)
   ================================================================ */
.c-card{position:relative;border-radius:var(--card-r,22px);overflow:hidden;
  transition:transform var(--card-dur,.22s) ease,
             box-shadow var(--card-dur,.22s) ease,
             border-color var(--card-dur,.22s) ease}
.c-card--flat  {border:1.5px solid rgba(0,0,0,.08);background:#fff}
.c-card--raised{box-shadow:0 6px 26px rgba(0,0,0,.05)}
.c-card--neu   {background:var(--neu-bg);
  box-shadow:7px 7px 16px var(--neu-sh),-7px -7px 16px var(--neu-hi)}
.c-card--pop:hover{transform:translate(-4px,-4px);
  box-shadow:8px 8px 0 var(--card-accent,var(--pink));border-color:var(--ink)}
.c-card--pop-sm:hover{transform:translate(-3px,-3px);
  box-shadow:7px 7px 0 var(--card-accent,var(--pink));border-color:var(--ink)}

/* pm-card: radius e overflow via token (classe HTML generata da JS) */
.pm-card{border-radius:var(--card-r,22px);overflow:hidden}

/* ================================================================
   SISTEMA BAND - strip orizzontali
   ----------------------------------------------------------------
   .b-band           padding base adattivo via --band-py/--band-px
   .b-band--center   testo centrato
   .b-band--split    grid numero + corpo (stat rows tipo .band)
   .b-band--cta      sfondo peach + centro (come .cta-band)
   ================================================================ */
.b-band{width:100%;padding:var(--band-py,90px) var(--band-px,40px)}
.b-band--center{text-align:center}
.b-band--split{display:grid;grid-template-columns:minmax(180px,300px) 1fr;
  gap:0 56px;align-items:center}
.b-band--cta{background:var(--cream-2);text-align:center}

/* ================================================================
   PLACEHOLDER - utilities aspect-ratio
   ----------------------------------------------------------------
   .placeholder ora riempie il container (width/height 100%).
   Usare .ph-* quando il container non ha gia' aspect-ratio definito.
   .ph-16x9   video / player / infografica / yt-embed
   .ph-9x16   story / mini-screen verticale
   .ph-9x19   phone intero (hero)
   .ph-4x5    ritratto fotografico (founder)
   .ph-sq     avatar / icona quadrata
   ================================================================ */
.ph-16x9{aspect-ratio:16/9}
.ph-9x16{aspect-ratio:9/16}
.ph-9x19{aspect-ratio:9/19}
.ph-4x5 {aspect-ratio:4/5}
.ph-sq  {aspect-ratio:1}
.cards-6{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.choice-card{background:#fff;border:1.5px solid rgba(0,0,0,.08);border-radius:22px;padding:30px;box-shadow:0 6px 26px rgba(0,0,0,.04);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.choice-card .tag{font-size:11px;font-weight:400;letter-spacing:.04em;  /* [v88] era 700/.12em */text-transform:uppercase;color:var(--teal);margin-bottom:14px}
.choice-card h3{font-size:var(--fs-card);font-weight:600;margin-bottom:12px;line-height:1.12}
.choice-card h3 .em{color:var(--pink);font-style:italic;font-weight:400}
.choice-card p{font-size:14px;line-height:1.55;color:var(--ink-soft)}

/* 6 product showcase — phone aspect ratio */
.showcase{background:var(--cream)}
.showcase .head{text-align:center;max-width:640px;margin:0 auto 60px}
.showcase h2{font-size:var(--fs-h2);margin-bottom:18px}
.showcase h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.showcase .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:1000px;margin:0 auto;padding:30px 10px 50px;align-items:start}
.shot{display:flex;flex-direction:column;align-items:center;text-align:center}
.phone{width:100%;aspect-ratio:9/18;border-radius:38px;background:#fff;border:1px solid rgba(0,0,0,.06);padding:11px;position:relative;z-index:1}
/* glow colorati offsettati al posto dell'ombra scura */
.shot:nth-child(1) .phone{box-shadow:-40px 50px 90px -20px rgba(231,77,107,.55), 0 10px 30px rgba(0,0,0,.06)}
.shot:nth-child(2) .phone{box-shadow:0 60px 90px -20px rgba(88,175,182,.55), 0 10px 30px rgba(0,0,0,.06)}
.shot:nth-child(3) .phone{box-shadow:40px 50px 90px -20px rgba(153,75,118,.5), 0 10px 30px rgba(0,0,0,.06)}
.phone .screen{height:100%;border-radius:30px;overflow:hidden}
.phone .screen .placeholder{height:100%;border-radius:30px;border:none;background:linear-gradient(160deg,var(--pastel),#fdf3f0)}
.shot.teal .phone .screen .placeholder{background:linear-gradient(160deg,#d6f0f1,#f0fafb)}
.shot.plum .phone .screen .placeholder{background:linear-gradient(160deg,#ecd6e2,#faf1f6)}
.shot .cap{margin-top:26px;max-width:300px}
.shot .cap h3{font-size:var(--fs-card);font-weight:600;margin-bottom:10px}
.shot .cap p{font-size:14.5px;color:var(--ink-soft);line-height:1.55}
.infographic{margin-top:80px;border-radius:24px;aspect-ratio:16/9;overflow:hidden;position:relative;max-width:1000px;margin-left:auto;margin-right:auto}
.infographic .placeholder{height:100%;border-radius:24px;background:linear-gradient(120deg,#fff,var(--cream-2))}

/* 7 how */
.how{background:linear-gradient(180deg,var(--cream-2),var(--cream));padding-top:160px}
.how .head{text-align:center;max-width:900px;margin:0 auto 80px}
.how h2{font-size:var(--fs-h2);margin-bottom:16px}
.steps{position:relative;max-width:840px;margin:0 auto;padding-left:18px}
/* SOLCO neumorfico verticale incassato (binario dei knob) — centrato sui knob */
/* SOLCO neumorfico: CONVESSO esterno (sporge) + CONCAVO interno (incavato) */
/* V59: SOLCO — barra esterna in rilievo (convessa, drop-shadow) ... */
.steps::before{content:"";position:absolute;left:45px;top:34px;bottom:34px;width:30px;z-index:-1;
  border-radius:16px;background:linear-gradient(90deg,#E7E2E7,#F4EFF3);
  box-shadow:-6px -6px 13px rgba(255,255,255,.9), 7px 8px 18px rgba(120,88,108,.32)}
/* V60: solco concavo RIMOSSO — resta solo la forma neumorfica piatta col drop-shadow */
.step{display:grid;grid-template-columns:80px 1fr;gap:26px;margin-bottom:40px;align-items:center}
/* knob a GEMMA con numero sovrapposto */
.step .dot{position:relative;width:58px;height:58px;justify-self:center;z-index:2;transform:translateX(4px);
  display:flex;align-items:center;justify-content:center;transition:transform .25s ease}
.step .dot svg{display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
/* V57: numero sovrapposto al knob, in rilievo neumorfico */
.step .dot{position:relative}
/* V59: numero sottile, bianco, fuso in overlay sul knob (riprende i colori) */
.step .dot .dot-n{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font);font-weight:600;font-size:19px;color:rgba(255,255,255,.96);z-index:3;pointer-events:none;
  mix-blend-mode:overlay;text-shadow:0 1px 2px rgba(0,0,0,.25);transform:translateX(4px)}
.step .body{background:#fff;border-radius:18px;padding:24px 28px;border:1.5px solid rgba(0,0,0,.06);box-shadow:0 6px 22px rgba(0,0,0,.04);display:grid;grid-template-columns:1fr 150px;gap:20px;align-items:center;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.step .body:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--teal);border-color:var(--ink)}
.step:hover .dot{transform:scale(1.08)}
.step .body .txt h3{font-size:var(--fs-card);font-weight:600;margin-bottom:9px;letter-spacing:-.01em}
.step .body .txt p{font-size:15.5px;color:var(--ink-soft);line-height:1.55}
.step .body .mini{aspect-ratio:9/16;border-radius:14px}
.step .body .mini .placeholder{height:100%;border-radius:14px;padding:10px;font-size:10px}

/* 8 founder */
.founder{background:linear-gradient(180deg,var(--cream),var(--cream-2))}
.founder .inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:54px;align-items:center}
.founder .photo{aspect-ratio:4/5;border-radius:24px;overflow:hidden;position:relative}
.founder .photo .placeholder{height:100%;border-radius:24px;background:linear-gradient(160deg,#fde3d6,#f6e9f0)}
.founder .photo img{width:100%;height:100%;object-fit:cover;object-position:center 32%;display:block}   /* foto founder: riempie il 4:5, faccie verso l'alto */
.founder h2{font-size:var(--fs-h2);margin-bottom:24px}
.founder h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.founder p{font-size:var(--fs-body);line-height:1.7;color:var(--ink-soft);margin-bottom:16px;max-width:65ch}
.founder .quote{border-left:3px solid var(--pink);padding:14px 0 14px 24px;margin-top:28px;font-size:22px;font-style:italic;font-weight:300;color:var(--ink);line-height:1.4}
.founder .quote cite{display:block;font-size:13px;font-style:normal;color:var(--ink-soft);margin-top:10px;font-weight:600}
.yt-trigger{margin-top:26px;display:inline-flex;align-items:center;gap:12px;color:var(--plum);font-weight:600;font-size:15px;cursor:pointer;background:none;border:none;font-family:var(--font)}
.yt-trigger .pin{width:40px;height:40px;border-radius:50%;background:var(--plum);display:flex;align-items:center;justify-content:center}
.yt-trigger .pin svg{width:14px;height:14px;fill:#fff;margin-left:2px}
.yt-expand{max-height:0;opacity:0;overflow:hidden;transition:max-height .7s ease,opacity .5s ease,margin .5s ease;margin-top:0}
.yt-expand.open{max-height:680px;opacity:1;margin-top:40px}
.yt-frame{width:100%;aspect-ratio:16/9;border-radius:18px;background:#000;position:relative;display:flex;align-items:center;justify-content:center}
.yt-frame .placeholder{height:100%;width:100%;border-radius:18px;border-color:rgba(255,255,255,.3);color:rgba(255,255,255,.7);background:linear-gradient(160deg,#1a1430,#102325)}

/* 9 dive */
.dive{background:#0a2230;color:#fff;text-align:center;overflow:hidden;padding:150px 40px;position:relative}
#oceanCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;display:block}
.dive .inner{position:relative;z-index:2;max-width:1160px;margin:0 auto}  /* V87.1: largo per l'H2 monumentale su una riga */
.dive .vision{font-size:var(--fs-lead);line-height:var(--lh-body);color:rgba(255,255,255,.82);margin:0 auto 44px;max-width:65ch;font-weight:300;font-style:italic}
.dive .eyebrow{color:rgba(255,255,255,.8)}
/* claim finale "+1": stesso token dell'hero, flusso naturale */
/* V87.1: monumentale = UNA riga sola (accenti su "Vuoi" e "profondità?"), più grande dell'hero; sta in 1160px */
.dive h2{font-size:clamp(2.2rem,5.8vw,4.9rem);font-weight:500;line-height:var(--lh-display);letter-spacing:-.03em;
  text-shadow:0 2px 30px rgba(0,0,0,.35);white-space:nowrap;margin-top:0;margin-bottom:56px}
@media(max-width:700px){.dive h2{white-space:normal;text-wrap:balance;font-size:var(--fs-hero)}}
.dive h2 .blue{font-weight:inherit;background:linear-gradient(100deg,#5fd0ff,var(--pink));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.dive p.sub{margin:24px auto 0;font-size:var(--fs-lead);color:rgba(255,255,255,.75);max-width:65ch}
.dive .form{margin-top:36px;display:flex;justify-content:center}
/* V56: stessa pill della prima CTA (hero), adattata al fondo scuro */
.dive .signup-form{display:flex;gap:0;max-width:470px;width:100%;background:rgba(255,255,255,.10);
  border:1.5px solid rgba(255,255,255,.28);border-radius:40px;padding:6px;
  box-shadow:0 12px 34px rgba(0,0,0,.28);transition:border-color .25s,box-shadow .25s;backdrop-filter:blur(6px)}
.dive .signup-form:focus-within{border-color:var(--pink);box-shadow:0 12px 38px rgba(231,77,107,.3)}
.dive .signup-form input{flex:1;border:none;outline:none;background:none;font-family:var(--font);
  font-size:15.5px;padding:12px 18px;color:#fff;min-width:0}
.dive .signup-form input::placeholder{color:rgba(255,255,255,.55)}
.dive .signup-form button{background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff;border:none;
  border-radius:34px;padding:13px 26px;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;
  white-space:nowrap;box-shadow:0 6px 16px rgba(231,77,107,.3)}
.dive .micro{margin-top:14px;font-size:var(--fs-small);color:rgba(255,255,255,.45)}



/* 10 faq */
.faq{background:var(--cream)}
.faq .head{text-align:center;max-width:1000px;margin:0 auto 50px}
.faq h2{font-size:var(--fs-h2);max-width:none}
.faq h2 .em{color:var(--pink);font-style:italic;font-weight:400}

/* ================================================================
   UTILITY TIPOGRAFICHE GLOBALI
   Applicano i token --fs-* con il line-height corretto associato.
   ================================================================ */
.u-fs-hero{font-size:var(--fs-hero);line-height:var(--lh-display)}
.u-fs-h2{font-size:var(--fs-h2);line-height:var(--lh-display)}
.u-fs-lead{font-size:var(--fs-lead);line-height:var(--lh-body)}
.u-fs-body{font-size:var(--fs-body);line-height:var(--lh-body);font-weight:400}
.u-fs-small{font-size:var(--fs-small);line-height:var(--lh-body)}
/* default ritmo verticale per i titoli (i componenti possono sovrascrivere) */
h1,h2{line-height:var(--lh-display)}

/* --- FAQ: accordion fluido (grid-template-rows 0fr -> 1fr) --- */
.faq-list{max-width:780px;margin:0 auto}
.faq-item{border-bottom:1px solid rgba(0,0,0,.1)}
.faq-q{width:100%;margin:0;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;
  background:none;border:0;text-align:left;color:inherit;font-family:inherit;cursor:pointer}
.faq-q .u-fs-body{font-weight:700}
.faq-q .plus{flex:0 0 28px;height:28px;border-radius:50%;border:1.5px solid var(--ink);position:relative;transition:border-color .25s}
.faq-q .plus::before,.faq-q .plus::after{content:'';position:absolute;top:50%;left:50%;width:12px;height:1.5px;
  background:var(--ink);transform:translate(-50%,-50%);transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.faq-q .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq-item.open .plus{border-color:var(--pink)}
.faq-item.open .plus::before,.faq-item.open .plus::after{background:var(--pink)}
.faq-item.open .plus::after{transform:translate(-50%,-50%) rotate(0deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s cubic-bezier(.22,.61,.36,1)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden;opacity:0;transform:translateY(-4px);transition:opacity .35s ease,transform .35s ease}
.faq-item.open .faq-a-inner{opacity:1;transform:none}
.faq-a p{max-width:65ch;color:var(--ink-soft);font-weight:400;padding:0 0 26px}
@media(prefers-reduced-motion:reduce){.faq-a,.faq-a-inner,.faq-q .plus::before,.faq-q .plus::after{transition:none}}

footer{background:var(--dark);color:rgba(255,255,255,.7);padding:70px 40px 40px}
footer .wrap{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
footer .logo{font-weight:700;font-size:26px;letter-spacing:.3em;margin-bottom:14px;
  background:linear-gradient(135deg,#E74D6B 0%,#F39674 50%,#58AFB6 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
footer .tagline{font-size:var(--fs-small);color:rgba(255,255,255,.5);margin-bottom:10px}
footer h4{font-size:var(--fs-small);letter-spacing:.04em;text-transform:uppercase;color:#fff;margin-bottom:16px;font-weight:400}  /* [v88] era 700/.1em */
footer a{display:block;color:rgba(255,255,255,.6);text-decoration:none;font-size:var(--fs-small);margin-bottom:9px}
footer .socials{display:flex;gap:14px;margin-top:20px}
footer .socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:.25s}
footer .socials a svg{width:17px;height:17px;fill:rgba(255,255,255,.7);transition:.25s}
footer .socials a:hover{background:linear-gradient(100deg,var(--pink),var(--salmon));border-color:transparent;transform:translateY(-2px)}
footer .socials a:hover svg{fill:#fff}
footer .copy{max-width:1120px;margin:50px auto 0;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:var(--fs-small);color:rgba(255,255,255,.4)}




@media(max-width:880px){
  .hero .wrap,.choices .head,.cards-6,.showcase .grid,.founder .inner,footer .wrap{grid-template-columns:1fr}
  .step .body{grid-template-columns:1fr}
  .step{grid-template-columns:64px 1fr;gap:16px}
  .step .dot{width:50px;height:50px}
  .step .dot>span{font-size:20px}
  .steps::before{left:23px}
  header nav{display:none}
}

/* ============================================================
   V17 — REDESIGN CONVERSIONE (additivo, override mirati)
   ============================================================ */

/* progress bar di lettura */
#scrollProgress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;background:linear-gradient(90deg,var(--pink),var(--coral),var(--teal));border-radius:0 3px 3px 0;transition:width .08s linear}

/* hero: kicker pre-lancio */
.hero-kicker{display:inline-flex;align-items:center;gap:9px;font-size:var(--fs-small);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);background:rgba(153,75,118,.08);border:1px solid rgba(153,75,118,.22);border-radius:30px;padding:8px 16px;margin-bottom:26px}
.hero-kicker .pulse{width:8px;height:8px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 0 rgba(231,77,107,.5);animation:pulse 2s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(231,77,107,.45)}70%{box-shadow:0 0 0 9px rgba(231,77,107,0)}100%{box-shadow:0 0 0 0 rgba(231,77,107,0)}}
@media(prefers-reduced-motion:reduce){.hero-kicker .pulse{animation:none}}

/* form email inline riutilizzabile (hero + cta-band) */
.signup-form{display:flex;gap:0;max-width:470px;background:#fff;border:1.5px solid rgba(0,0,0,.12);border-radius:40px;padding:6px;box-shadow:0 12px 34px rgba(231,77,107,.14);transition:border-color .25s,box-shadow .25s}
.signup-form:focus-within{border-color:var(--pink);box-shadow:0 12px 38px rgba(231,77,107,.26)}
.signup-form input{flex:1;border:none;outline:none;background:none;font-family:var(--font);font-size:15.5px;padding:12px 18px;color:var(--ink);min-width:0}
.signup-form button{background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff;border:none;border-radius:34px;padding:13px 26px;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;white-space:nowrap;box-shadow:0 6px 16px rgba(231,77,107,.3)}
/* hero: chip di fiducia (v75: piu' arioso e geometrico, integrato sotto la form) */
.proof-chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.proof-chips .chip{font-size:12.5px;font-weight:600;color:var(--ink-soft);background:rgba(0,0,0,.035);border:1px solid rgba(0,0,0,.07);border-radius:24px;padding:9px 17px;display:inline-flex;align-items:center;gap:8px;letter-spacing:.01em}
.proof-chips .chip svg{width:14px;height:14px;fill:var(--teal);flex:0 0 14px}

/* video hero: meno invadente + skip */
.video-hero{min-height:82vh}
.vh-skip{position:absolute;bottom:64px;left:50%;transform:translateX(-50%);z-index:4;color:rgba(255,255,255,.85);font-size:13px;font-weight:600;letter-spacing:.06em;text-decoration:none;border:1px solid rgba(255,255,255,.35);border-radius:30px;padding:9px 20px;backdrop-filter:blur(4px);transition:.25s}
.vh-skip:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.7)}

/* numeri con count-up: cifre tabulari per evitare jitter */
.stat .num{font-variant-numeric:tabular-nums}

/* ===== CINQUE SCELTE - deck editoriale a colonna unica (centrato 760px) =====
   Stile/ombre/hover gestiti dal sistema neumorfico unificato (blocco v66). */
.cards-6.deck{display:flex;flex-direction:column;gap:26px;max-width:760px;margin:0 auto;grid-template-columns:none}
/* card a flusso verticale puro: label -> titolo -> paragrafo, altezze fluide */
.deck .choice-card{position:relative;display:block;padding:34px 40px}
/* label: MAIUSCOLO finissimo, ampiamente spaziato, accento tenue del livello */
.deck .choice-card .tag{font-weight:400;letter-spacing:.04em;margin-bottom:14px;  /* [v88] allineato a .04em come tutte le etichette */
  color:color-mix(in srgb, var(--accent,var(--pink)) 78%, var(--ink-soft))}
/* titolo: libero in orizzontale su una/due righe, nessun a-capo forzato */
.deck .choice-card h3{font-size:clamp(20px,2.3vw,26px);line-height:1.15;margin-bottom:0}
/* paragrafo: distanziato 14px dal titolo, interlinea rilassata 1.6 */
.deck .choice-card p{font-size:var(--fs-body);line-height:1.6;margin-top:14px}
.choices{padding-bottom:180px}

/* cta-band con form + social proof */
.cta-band .signup-form{margin:26px auto 0}
/* v75: testo fluido "floating" (niente box/bordo/icona) */
.proof-pill{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:13.5px;font-weight:600;color:var(--plum);letter-spacing:.01em}
.proof-pill b{color:var(--pink);font-weight:700;letter-spacing:.06em}


@media(max-width:880px){
  .deck .choice-card{padding:28px 26px 32px}
  .signup-form{max-width:100%}
  .vh-skip{bottom:40px}
}


/* ============================================================
   V18 — PALETTE ALLINEATA ALLA UI APP (light-leaning)
   Accent invariati · sfondi e gradienti rivisti
   ============================================================ */
/* variabili V56 assorbite nel blocco :root unico sopra */
/* hero: ambiente duotone teal/peach come la UI light */
.hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(42% 52% at 88% 8%, rgba(88,175,182,.12), transparent 70%),
             radial-gradient(48% 58% at -2% 96%, rgba(243,150,116,.14), transparent 70%)}
.hero .wrap{position:relative;z-index:1}
/* isole scure: nebulosa teal→plum della home app */
.vh-frame{background:linear-gradient(135deg,#0E3742,#1D1230 55%,#2A1733);opacity:.4}
.video-hero .vh-bg{background:radial-gradient(60% 50% at 50% 40%, rgba(153,75,118,.42), transparent 70%),radial-gradient(50% 40% at 72% 72%, rgba(88,175,182,.24), transparent 70%)}
.reveal .rv-bg{background:radial-gradient(30% 32% at 50% 46%, rgba(153,75,118,.24), transparent 70%),radial-gradient(28% 28% at 50% 64%, rgba(88,175,182,.13), transparent 70%)}
/* alternanza superfici light */
.choices{background:linear-gradient(180deg,var(--cream),#F9EDE2)}
.how{background:linear-gradient(180deg,var(--cream),var(--aqua))}
.faq{background:var(--cream)}

/* ============================================================
   V18 — MAPPA PROFILAZIONE INTERATTIVA (dodecaedro)
   ============================================================ */
.profmap{background:linear-gradient(180deg,var(--aqua),var(--cream))}
.profmap .head{text-align:center;max-width:680px;margin:0 auto 50px}
.profmap h2{font-size:var(--fs-h2);margin-bottom:18px}
/* V59: box titoli ampio per controllare gli a-capo */
.safety .head{max-width:1000px;margin-left:auto;margin-right:auto}
.safety h2{max-width:1000px;margin-left:auto;margin-right:auto}
.profmap h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.pm-stage{display:flex;flex-direction:column;align-items:center}
.pm-svg{width:min(440px,86vw);height:auto;display:block}
.pm-face{cursor:pointer;transform-box:fill-box;transform-origin:center;outline:none;transition:transform .28s cubic-bezier(.22,.61,.36,1),opacity .28s,filter .28s}
.pm-face:focus,.pm-ring:focus{outline:none} /* v25: il "riquadro scuro" era il focus ring di default del browser */
.pm-face:hover{transform:scale(1.045)}
.pm-svg.has-sel .pm-face:not(.sel){opacity:.62;filter:saturate(.82)}
.pm-face.sel{filter:brightness(1.16) saturate(1.06)}
/* bleed luminoso nel colore del livello selezionato */
/* selezione: brightness + scale, niente glow esterno (verrebbe tagliato dal box) */
.pm-face.sel{filter:brightness(1.12) saturate(1.08)}
.pm-face.sel[data-level="base"],.pm-face.sel[data-level="psy"],.pm-face.sel[data-level="ext"]{filter:brightness(1.13) saturate(1.08)}
/* accessibilità: il focus da tastiera usa lo stesso linguaggio luminoso, non il box */
.pm-face:focus-visible{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,255,255,.55))}
/* label facce rimosse */
.pm-ring{cursor:pointer}
.pm-ring .hit{fill:none;stroke:transparent;stroke-width:30}
/* vecchie regole .vis rimosse: l'anello ora e' .pm-ring-neu */
.pm-ring:focus-visible .pm-ring-neu{stroke-width:9}
.pm-ringlabel{font-family:var(--font);font-weight:800;font-size:14px;letter-spacing:.3em;fill:var(--plum);text-anchor:middle;pointer-events:none}
.pm-hint{margin-top:30px;font-size:13.5px;color:var(--ink-soft);text-align:center}

/* ===== V87 · dodecaedro 3D interattivo + anello di progresso ===== */
html{scrollbar-gutter:stable}
.pm-dwrap{position:relative;width:min(460px,90vw);aspect-ratio:1/1;margin:0 auto}

/* ============================================================================
   Guida al tocco del dodecaedro (.pm-guide)
   Una mano con anello di "ripple" che tocca la faccia in alto (BASE), poi
   scivola in basso sulla faccia viola che spunta sotto, in loop. Coordinate in
   % del contenitore quadrato .pm-dwrap, quindi scala su ogni schermo.
   Compare con .on (JS), sparisce con .bye alla prima interazione.
   ============================================================================ */
.pm-guide{position:absolute;left:50%;top:31%;width:44px;height:44px;z-index:6;
  pointer-events:none;opacity:0;transform:translate(-50%,-50%);
  transition:opacity .5s ease;
  /* v1.1.3: guida ridimensionata (64->44px) e ammorbidita: più discreta, meno
     invasiva. Posizione base = centro della faccia in alto (niente più angolo
     0,0 che la faceva sbordare a sinistra del viewport su mobile). */
  offset:none}
.pm-guide.on{opacity:.85;animation:pmGuideMove 5.2s ease-in-out .2s infinite}
.pm-guide.bye{opacity:0 !important;transition:opacity .4s ease;animation-play-state:paused}
.pm-guide-hand{position:absolute;left:50%;top:50%;width:30px;height:30px;
  transform:translate(-38%,-22%) rotate(-8deg);
  filter:drop-shadow(0 4px 9px rgba(42,27,61,.28))}
.pm-guide.on .pm-guide-hand{animation:pmGuideTap 2.6s ease-in-out .2s infinite}
.pm-guide-ring{position:absolute;left:50%;top:50%;width:34px;height:34px;border-radius:50%;
  transform:translate(-50%,-50%) scale(.35);opacity:0;
  border:2px solid rgba(123,46,142,.7);
  box-shadow:0 0 0 1.5px rgba(255,255,255,.45) inset}
.pm-guide.on .pm-guide-ring{animation:pmGuideRipple 2.6s ease-out .35s infinite}

/* percorso: tocca in alto (0-40%), scende sulla faccia viola in basso (48-68%),
   tocca lì (68-90%), risale (90-100%) */
@keyframes pmGuideMove{
  0%,42%   {left:50%;top:31%}
  56%,90%  {left:50%;top:88%}
  100%     {left:50%;top:31%}
}
/* gesto di tap: piccola pressione in sincrono con il ripple (v1.1.3: più tenue) */
@keyframes pmGuideTap{
  0%,14%   {transform:translate(-38%,-22%) rotate(-8deg) scale(1)}
  22%      {transform:translate(-38%,-22%) rotate(-8deg) scale(.88)}
  32%,100% {transform:translate(-38%,-22%) rotate(-8deg) scale(1)}
}
@keyframes pmGuideRipple{
  0%   {opacity:0;transform:translate(-50%,-50%) scale(.3)}
  12%  {opacity:.7}
  55%  {opacity:0;transform:translate(-50%,-50%) scale(1.35)}
  100% {opacity:0;transform:translate(-50%,-50%) scale(1.35)}
}
@media(prefers-reduced-motion:reduce){.pm-guide{display:none}}
.pm-dwrap svg{position:absolute;inset:0;width:100%;height:100%;user-select:none;-webkit-tap-highlight-color:transparent;overflow:visible}
.pmf{transition:filter .25s, transform .28s cubic-bezier(.22,.61,.36,1);transform-box:fill-box;transform-origin:center;outline:none;touch-action:manipulation}
.pmf.clickable{cursor:pointer}
.pmf.clickable:hover{transform:scale(1.045);filter:brightness(1.06) saturate(1.05)}
.pmf.dim:not(:hover){filter:saturate(.8) brightness(.985)}   /* facce colorate non selezionate: ~15% piu' spente */
.pmf.pulse{animation:pmfPulse 1.9s ease-in-out infinite}
@keyframes pmfPulse{0%,100%{opacity:1}50%{opacity:.62}}
.pmf:focus-visible{filter:brightness(1.12) drop-shadow(0 0 10px rgba(255,255,255,.55))}
.pm-ringG{transition:opacity .25s}
.pm-svg.rotating .pm-ringG{opacity:0}
.pm-slot .track{fill:none;stroke:#eadfd6;stroke-width:6.5;stroke-linecap:round}
.pm-slot .fill{fill:none;stroke-width:6.5;stroke-linecap:round;transition:stroke-dashoffset .5s cubic-bezier(.22,.61,.36,1),opacity .3s}
.pm-slot .bub{opacity:0;transition:opacity .18s;pointer-events:none}
.pm-slot:hover .bub{opacity:1}
.pm-slot .bub text{font-family:var(--font);font-weight:700;font-size:14px;fill:var(--ink)}
.pm-cta{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:250px;height:52px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:999px;color:#fff;font-family:var(--font);
  font-weight:700;font-size:16px;letter-spacing:.06em;cursor:default;
  transition:background .3s;box-shadow:0 10px 24px rgba(29,26,28,.16)}
/* card spuntabili (V87): il click congela l'effetto hover = modulo "completato" */
.pm-card{cursor:pointer}
.pm-card.pm-future{cursor:default}
.pm-card.sel{
  box-shadow:7px 7px 16px var(--neu-sh), -7px -7px 16px var(--neu-hi),
    inset 0 0 0 2px var(--pm-accent,var(--pink)),
    0 0 18px 1px color-mix(in srgb, var(--pm-accent,var(--pink)) 55%, transparent),
    inset 0 0 14px -2px color-mix(in srgb, var(--pm-accent,var(--pink)) 45%, transparent)}
.pm-card.sel .caustica-focalizzata{opacity:1}
.pm-card.sel .gocciolina-ottica{
  background:radial-gradient(circle at 35% 35%, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 25%,
    color-mix(in srgb, var(--water-color) 45%, transparent) 55%,
    color-mix(in srgb, var(--water-color) 95%, rgba(0,0,0,.1)) 85%, var(--water-color) 100%)}
@media(hover:none){.pmf.clickable:hover{transform:none;filter:none}}
@media(prefers-reduced-motion:reduce){.pmf.pulse{animation:none}}
/* V87.1: vetrina — STESSO contenitore vetro di "Come funziona"/hero (.hero-visual clonata:
   solite misure 300px, proporzione 804:1748, raggio 36, specular+edge) così i mockup app
   sono coerenti ovunque + BAGLIORE COLORATO sotto le schermate ripristinato dalla v86. */
.shot .hero-visual{margin:0 auto 18px;overflow:hidden;background:#101014}
.shot .hero-visual .v-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:37px;transform:scale(1.015);display:block}
.shot:nth-child(1) .hero-visual{box-shadow:-40px 50px 90px -20px rgba(231,77,107,.55), 0 10px 30px rgba(0,0,0,.06)}
.shot:nth-child(2) .hero-visual{box-shadow:0 60px 90px -20px rgba(88,175,182,.55), 0 10px 30px rgba(0,0,0,.06)}
.shot:nth-child(3) .hero-visual{box-shadow:40px 50px 90px -20px rgba(153,75,118,.5), 0 10px 30px rgba(0,0,0,.06)}
.coun-strip{max-width:760px;margin:26px auto 0;background:var(--neu-bg);border-radius:22px;padding:26px 34px;text-align:center;
  box-shadow:7px 7px 16px var(--neu-sh), -7px -7px 16px var(--neu-hi)}
.coun-strip h3{font-size:19px;margin-bottom:8px}
.coun-strip p{font-size:15px;line-height:1.6;color:var(--ink-soft)}
/* V87: hero — bordi highlight/ombra più sottili, uniformati alla resa di "Come funziona".
   NON tocca tilt, riflessi né la meccanica del puntatore. */
.hero .hero-visual::after{box-shadow:inset 1.5px 1.5px 1.5px rgba(255,255,255,.9), inset -1.5px -1.5px 2.5px rgba(0,0,0,.26)}
/* ============ V87.2 — "COME FUNZIONA" scrollytelling (dal prototipo approvato 8/7) ============
   Sostituisce il layout v85 gocce+mouseover (i vecchi CSS .hf-* sono stati RIMOSSI nella pulizia).
   Binario ad arco sul disco esterno + fill che EREDITA la barra roadmap (gradiente, round-cap,
   easing) e aggancia i 5 passi via scroll. Selettori con id per battere i padding storici di .how. */
#come-funziona{padding:0;background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 55%,var(--aqua) 100%)}
/* accenti (la v87 non ha una .em globale: era coperta dalla vecchia .how .hf-intro h2 .em) */
.hiw-intro h2 .em,.hiw-step p .em,.hiw-close h3 .em{color:var(--pink);font-style:italic;font-weight:400}
.hiw-scroll{position:relative;height:260vh}  /* ~32vh di scroll per passo: corsa minima */
.hiw-sticky{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
.hiw-wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 40px;display:grid;
  grid-template-columns:400px 1fr;gap:30px;align-items:center}
/* V87.2b: armonizzazione tipografica — token della landing, niente pesi/misure custom
   (h2/h3 = weight 500 globale, titolo = --fs-h2, lead = --fs-lead dal .lead globale) */
.hiw-intro h2{font-size:var(--fs-h2)}
.hiw-intro .lead{max-width:36ch}
.hiw-step{margin-top:56px;min-height:190px;transition:opacity .22s ease,transform .22s ease}
.hiw-step.sw{opacity:0;transform:translateY(10px)}
.hiw-step .n{font-size:15px;font-weight:800;letter-spacing:.14em;
  background:linear-gradient(100deg,var(--coral),var(--pink) 55%,var(--plum));
  -webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:8px}
.hiw-step h3{font-size:clamp(22px,2vw,28px);margin-bottom:10px}  /* weight 500 dal globale */
.hiw-step p{font-size:16px;line-height:1.65;color:var(--ink-soft);max-width:38ch}
.hiw-stage{position:relative;width:min(780px,56vw);aspect-ratio:1/1;justify-self:center;margin-right:150px}
.hiw-discs,.hiw-discs .c{position:absolute;border-radius:50%}
.hiw-discs{inset:0;display:grid;place-items:center;pointer-events:none}
.hiw-discs .c{background:var(--cream)}
.hiw-discs .c4{width:90%;height:90%;box-shadow:26px 28px 60px rgba(125,95,115,.15),-22px -22px 54px rgba(255,255,255,.94)}
.hiw-discs .c3{width:70.5%;height:70.5%;box-shadow:22px 24px 52px rgba(125,95,115,.17),-20px -20px 48px rgba(255,255,255,.95)}
.hiw-discs .c2{width:54%;height:54%;box-shadow:18px 20px 44px rgba(125,95,115,.19),-16px -16px 40px rgba(255,255,255,.96)}
.hiw-discs .c1{width:39.5%;height:39.5%;box-shadow:14px 16px 36px rgba(125,95,115,.21),-13px -13px 32px rgba(255,255,255,.97)}
.hiw-phone{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30.7%;aspect-ratio:804/1748;
  border-radius:36px;background:#101014;overflow:hidden;z-index:2;
  box-shadow:25px 30px 60px rgba(125,95,115,.22),-15px -15px 45px rgba(255,255,255,.92)}
.hiw-phone .hshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;
  border-radius:37px;opacity:0;transition:opacity .45s ease;transform:scale(1.015)}
.hiw-phone .hshot.on{opacity:1}
.hiw-phone::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;mix-blend-mode:overlay;opacity:.38;filter:blur(12px);
  background:linear-gradient(135deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.035) 25%,rgba(255,255,255,.08) 40%,rgba(255,255,255,.08) 60%,rgba(255,255,255,.035) 75%,rgba(255,255,255,0) 100%)}
.hiw-phone::after{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:36px;mix-blend-mode:overlay;
  box-shadow:inset 1.5px 1.5px 1.5px rgba(255,255,255,.9),inset -1.5px -1.5px 2.5px rgba(0,0,0,.26)}
.hiw-arc{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:3}
.hiw-arc .groove-hi{fill:none;stroke:rgba(255,255,255,.95);stroke-width:16;stroke-linecap:round;transform:translateY(1.6px)}
.hiw-arc .groove-om{fill:none;stroke:rgba(140,118,130,.28);stroke-width:16;stroke-linecap:round;transform:translateY(-1.6px)}
.hiw-arc .groove{fill:none;stroke:#F4EDE7;stroke-width:14;stroke-linecap:round}
.hiw-arc .fill{fill:none;stroke:url(#hiwGrad);stroke-width:9;stroke-linecap:round;
  filter:drop-shadow(0 2px 6px rgba(231,77,107,.28));
  transition:stroke-dashoffset .8s cubic-bezier(.33,.85,.30,1)}
.dotg{cursor:pointer}
.dotg .hit{fill:transparent;r:26px}
.dotg .dot{fill:var(--cream);stroke:rgba(140,118,130,.45);stroke-width:2.6;stroke-dasharray:3 3;transition:.45s ease;r:12px}
.dotg .num{font-family:var(--font);font-size:11px;font-weight:800;fill:var(--ink-soft);text-anchor:middle;dominant-baseline:central;pointer-events:none;transition:.45s ease}
.dotg.done .dot{stroke:url(#hiwGrad);stroke-width:3.2;stroke-dasharray:none}
.dotg.done .num{fill:var(--pink)}
.dotg.act .dot{r:14px;fill:#fff}
.hiw-lab{position:absolute;transform:translate(16px,-50%);white-space:nowrap;font-size:14px;font-weight:700;
  color:var(--ink-soft);transition:.4s ease;cursor:pointer}
.hiw-lab.done{color:var(--ink)}
.hiw-lab.act{color:var(--pink);font-size:15px}
.hiw-close{max-width:1060px;margin:-90px auto 0;padding:26px 40px 150px;text-align:center;position:relative;z-index:2}
.hiw-close h3{font-size:var(--fs-h2);font-weight:500;line-height:1.3}  /* titolo di sezione, ma weight 500 come tutti */
.hiw-close h3 .em{white-space:nowrap}  /* "il resto spetta a voi." mai spezzato (anti-orfane) */
.hiw-bar{display:none}
@media(max-width:900px){
  .hiw-scroll{height:280vh}
  .hiw-wrap{grid-template-columns:1fr;gap:0;padding:0 22px;align-content:start}
  .hiw-sticky{align-items:flex-start;padding-top:74px}  /* aria per l'header fisso */
  .hiw-intro h2{margin-bottom:8px}
  .hiw-intro .lead{display:none}
  .hiw-stage{display:none}
  .m-phone{position:relative;width:min(46vw,210px);margin:6px auto 0;aspect-ratio:804/1748;border-radius:26px;
    background:#101014;overflow:hidden;box-shadow:16px 20px 40px rgba(125,95,115,.22),-10px -10px 30px rgba(255,255,255,.92)}
  .m-phone .hshot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:27px;opacity:0;transition:opacity .45s ease}
  .m-phone .hshot.on{opacity:1}
  .hiw-bar{display:block;width:100%;max-width:420px;margin:18px auto 0;overflow:visible}
  .hiw-bar .groove{fill:none;stroke:#F4EDE7;stroke-width:10;stroke-linecap:round}
  .hiw-bar .groove-hi{fill:none;stroke:rgba(255,255,255,.95);stroke-width:12;stroke-linecap:round;transform:translateY(1.2px)}
  .hiw-bar .groove-om{fill:none;stroke:rgba(140,118,130,.28);stroke-width:12;stroke-linecap:round;transform:translateY(-1.2px)}
  .hiw-bar .fill{fill:none;stroke:url(#hiwGradB);stroke-width:7;stroke-linecap:round;
    filter:drop-shadow(0 2px 5px rgba(231,77,107,.28));transition:stroke-dashoffset .8s cubic-bezier(.33,.85,.30,1)}
  .hiw-bar .dot{fill:var(--cream);stroke:rgba(140,118,130,.45);stroke-width:2.2;stroke-dasharray:3 3;transition:.45s ease;r:7px}
  .hiw-bar .dot.done{stroke:url(#hiwGradB);stroke-width:2.8;stroke-dasharray:none}
  .hiw-step{margin-top:22px;min-height:0;text-align:center}
  .hiw-step p{margin:0 auto;font-size:15px;max-width:46ch}
  .hiw-close{margin-top:0;padding:20px 22px 100px}
}
@media(min-width:901px){.m-phone{display:none}}
@media(max-width:1279px){.hiw-stage{margin-right:120px;width:min(680px,54vw)}}
@media(prefers-reduced-motion:reduce){
  .hiw-arc .fill,.hiw-bar .fill,.hiw-phone .hshot,.m-phone .hshot,.hiw-step{transition:none}
}
/* ============ /V87.2 ============ */

/* V87: epilogo FAQ (spostato qui dalla sezione dive) */
.faq-vision{max-width:640px;margin:60px auto 0;text-align:center;font-size:17px;line-height:1.7;color:var(--ink-soft);font-style:italic}
.faq-vision .em{color:var(--pink)}
/* V87: didascalia foto founder */
.founder-cap{margin-top:10px;font-size:13px;color:var(--ink-soft);text-align:center;font-style:italic}
/* V87: secondo patto (regole) + micro-CTA discreta */
.pledge-rules{margin-top:28px}
.p-cta{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.p-cta:hover{opacity:.85}
/* V87: risonanza — nota sotto i tre scopi (D50) */
/* V87.1: respiro dalle etichette — serve battere `.reson p{margin:0 auto}` che ha specificità più alta */
.reson p.kinds-note{margin:44px auto 0;font-size:15px;line-height:1.6;color:var(--ink-soft)}
/* micro-copy sugli scopi: fumetto bianco al mouseover (stesso linguaggio dei fumetti del metodo, niente codina) */
.reson .kind{position:relative}
.reson .kind::after{content:attr(data-tip);position:absolute;left:50%;top:calc(100% + 12px);transform:translateX(-50%) translateY(4px);
  width:max-content;max-width:250px;background:#fff;color:var(--ink-soft);font-size:13px;font-weight:500;line-height:1.45;
  padding:10px 15px;border-radius:14px;box-shadow:0 14px 34px rgba(60,30,45,.16);text-align:center;white-space:normal;
  opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;z-index:6}
.reson .kind:hover::after{opacity:1;transform:translateX(-50%) translateY(0)}
@media(hover:none){.reson .kind::after{display:none}}
.kinds-note b{color:var(--ink);font-weight:600}
/* V87: "Cinque scelte" più su nella sua sezione (meno vuoto dopo Risonanza) */
.choices{padding-top:84px}
/* V87: regola tipografica globale — mai parole orfane a capo */
p,.lead,.pp-desc,.pc-tag,.cap p,.faq-a-inner p,.sub{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
/* ===== /V87 ===== */


/* pannelli livello */
.pm-panels{max-width:980px;margin:44px auto 0;position:relative}  /* V87: recupera lo spazio dell'hint compattato */  /* V60: respiro hint->livelli */
.pm-panel{display:none}
.pm-panel.on{display:block;animation:pmIn .45s cubic-bezier(.22,.61,.36,1)}
@keyframes pmIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ===== V56 · animazioni d'ingresso card per livello ===== */
/* il panel attivo anima le proprie card; lo stagger usa --ci (indice) */
.pm-panel.on .pm-card{opacity:0;animation-duration:.6s;animation-fill-mode:both;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
  animation-delay:calc(.06s + var(--ci,0)*.075s)}
.pm-panel.on .pm-card:hover{animation:none;opacity:1}  /* non ri-animare in hover */

/* BASE — fade + salita */
#pm-panel-base.on .pm-card{animation-name:pmcUp}
@keyframes pmcUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* EXT — scale-in (si gonfia) */
#pm-panel-ext.on .pm-card{animation-name:pmcScale}
@keyframes pmcScale{from{opacity:0;transform:scale(.84)}to{opacity:1;transform:scale(1)}}

/* PSY — slide da sinistra + micro-rotazione */
#pm-panel-psy.on .pm-card{animation-name:pmcSlide;transform-origin:left center}
@keyframes pmcSlide{from{opacity:0;transform:translateX(-40px) rotate(-2.5deg)}to{opacity:1;transform:none}}

/* EXP — flip 3D + sfocatura che si schiarisce */
#pm-panel-exp.on .pm-cards{perspective:900px}
#pm-panel-exp.on .pm-card{animation-name:pmcFlip;transform-origin:center bottom}
@keyframes pmcFlip{from{opacity:0;transform:rotateX(28deg) translateY(20px);filter:blur(5px)}
  to{opacity:1;transform:none;filter:blur(0)}}

/* v1.1.20 · PASSIONI e PROGETTI: senza un'animazione propria le card restavano a opacity:0
   (si vedevano solo in hover). PASSIONI sale come BASE, PROGETTI si gonfia come ESTESO. */
#pm-panel-pas.on .pm-card{animation-name:pmcUp}
#pm-panel-pro.on .pm-card{animation-name:pmcScale}

@media(prefers-reduced-motion:reduce){
  .pm-panel.on .pm-card{opacity:1;animation:none}
}

/* dodecaedro fedele v50 */
.pm-ring-neu{transition:filter .25s}
.pm-ring:hover .pm-ring-neu{filter:url(#dRingNeu) brightness(1.07)}
.pm-ring.sel .pm-ring-neu{stroke-width:7;filter:url(#dRingNeu) brightness(1.18) saturate(1.12)}
/* pm-ring-gloss rimosso */
.pm-ring .hit{cursor:pointer}
/* touch: rimuove il 300ms tap delay e migliora la risposta su mobile */
.pm-face,.pm-ring{touch-action:manipulation}
/* label facce rimosse */
.pm-svg .pm-face{transform-box:view-box}
@media(prefers-reduced-motion:reduce){.pm-panel.on{animation:none}.pm-face{transition:none}}
/* touch device: disabilita hover effects che su mobile restano bloccati */
@media(hover:none){
  .pm-face:hover{transform:none;filter:none}
  .pm-card:hover{transform:none;
    box-shadow:7px 7px 16px var(--neu-sh),-7px -7px 16px var(--neu-hi)}
  .pm-ring:hover .pm-ring-neu{filter:none}
  .choice-card:hover{transform:none;box-shadow:0 6px 26px rgba(0,0,0,.04);border-color:rgba(0,0,0,.08)}
  .anti-card:hover{transform:none;box-shadow:none}
}
.pm-panel .pp-head{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.pm-lvl-pill{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;border-radius:30px;padding:7px 16px}
.pm-panel h3{font-size:clamp(24px,3vw,32px);font-weight:600;letter-spacing:-.02em}
.pm-panel .pp-desc{font-size:15.5px;line-height:1.6;color:var(--ink-soft);max-width:640px;margin:10px 0 30px}
.pm-lock{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;color:var(--plum);background:rgba(153,75,118,.08);border:1.5px dashed var(--plum);border-radius:30px;padding:8px 18px;margin-bottom:26px}

/* card aspetto — V56 NEUMORFICO (forma piena chiusa: box-shadow doppia) */
.pm-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pm-card{background:var(--neu-bg);border:none;border-radius:22px;padding:18px 22px 18px 56px;position:relative;
  box-shadow:7px 7px 16px var(--neu-sh), -7px -7px 16px var(--neu-hi);
  transition:transform .25s ease, box-shadow .25s ease}
/* V57: hover = outline + glow (dentro e fuori) del colore sezione, niente shift.
   v75: card puramente descrittive (niente espansione/click) -> resta solo questo hover. */
.pm-card:hover{transform:none;
  box-shadow:7px 7px 16px var(--neu-sh), -7px -7px 16px var(--neu-hi),
    inset 0 0 0 2px var(--pm-accent,var(--pink)),
    0 0 18px 1px color-mix(in srgb, var(--pm-accent,var(--pink)) 55%, transparent),
    inset 0 0 14px -2px color-mix(in srgb, var(--pm-accent,var(--pink)) 45%, transparent)}
.pm-card .pc-top{display:flex;align-items:center;gap:14px;min-height:32px}  /* v82: min-height = coppetta -> titolo centrato verticalmente sulla goccia */
.pm-card .pc-t{font-size:15.5px;font-weight:700;line-height:1.2}

/* ===== GOCCIA CRISTALLINA decorativa (slot simbolo "coppetta") — sezione Il Metodo ===== */
.coppetta-pro {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: inset 2.5px 2.5px 5px rgba(120, 95, 110, 0.22), inset -2.5px -2.5px 5px var(--neu-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  overflow: hidden;
}

.ombra-sotto-goccia {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 25, 35, 0.38) 0%, transparent 70%);
  filter: blur(0.8px);
  z-index: 1;
  pointer-events: none;
}

.caustica-focalizzata {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #ffffff 0%,
    color-mix(in srgb, var(--water-color) 100%, white) 30%,
    color-mix(in srgb, var(--water-color) 75%, transparent) 60%,
    transparent 80%);
  mix-blend-mode: screen;
  filter: blur(1.2px);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.gocciolina-ottica {
  width: 21px;
  height: 21px;
  border-radius: 50%;
  position: relative;
  z-index: 3;
  backdrop-filter: url(#rifrazioneGoccia) saturate(110%);
  -webkit-backdrop-filter: url(#rifrazioneGoccia) saturate(110%);
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(140, 120, 135, 0.08) 65%,
    rgba(30, 20, 25, 0.16) 100%);
  box-shadow:
    inset 1px 1px 1.5px rgba(255,255,255,0.95),
    inset -1px -1px 2px rgba(0,0,0,0.08),
    1px 1.5px 2.5px rgba(40, 20, 30, 0.18);
}

.gocciolina-ottica::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 4px;
  width: 4.5px;
  height: 2.5px;
  background: #ffffff;
  border-radius: 50%;
  transform: rotate(-25deg);
  box-shadow: -0.5px -0.5px 0.5px #fff, 1px 1.5px 0px rgba(255,255,255,0.5);
}

/* Attivazione e interazione istantanea nativa delle card del metodo */
.pm-card:hover .caustica-focalizzata {
  opacity: 1;
}

.pm-card:hover .gocciolina-ottica {
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0) 25%,
    color-mix(in srgb, var(--water-color) 45%, transparent) 55%,
    color-mix(in srgb, var(--water-color) 95%, rgba(0,0,0,0.1)) 85%,
    var(--water-color) 100%);
}
/* ===== /GOCCIA CRISTALLINA ===== */
.pm-card .pc-tag{font-size:12px;color:var(--ink-soft);margin-top:9px;line-height:1.45}
.pm-panel.locked .pm-card{opacity:.82}
.pm-foot-note{margin-top:26px;font-size:13px;color:var(--ink-soft);text-align:center}

@media(max-width:880px){
  .pm-cards{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .pm-cards{grid-template-columns:1fr}
}


/* ============================================================
   V19 — PRIVACY & SECURITY BY DESIGN
   ============================================================ */
.safety{background:linear-gradient(180deg,var(--cream),#F6EFF4)}
.safety .head{text-align:center;max-width:700px;margin:0 auto 56px}
.safety h2{font-size:var(--fs-h2);margin-bottom:18px}
.safety h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.anti-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;max-width:960px;margin:0 auto}
.anti-card{position:relative;background:#fff;border-radius:20px;padding:28px 30px;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,filter .3s ease}
.anti-card h3{font-size:19px;font-weight:700;margin-bottom:10px;line-height:1.2}
.anti-card p{font-size:14px;line-height:1.6;color:var(--ink-soft)}

/* ===== v81: MACRO-GOCCE STABILI (icone scure ad alto contrasto) — sezione Sicurezza ===== */
.coppetta-macro-container {
  position: absolute;
  top: 36px;
  left: 40px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--neu-bg);
  box-shadow: inset 3px 3px 7px rgba(120, 95, 110, 0.22), inset -3px -3px 7px var(--neu-hi);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  overflow: hidden;
}

.ombra-macro-goccia {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(40, 25, 35, 0.35) 0%, transparent 70%);
  filter: blur(1px);
  z-index: 1;
  pointer-events: none;
}

.caustica-macro-focalizzata {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    #ffffff 0%,
    color-mix(in srgb, var(--water-color) 100%, white) 30%,
    color-mix(in srgb, var(--water-color) 75%, transparent) 60%,
    transparent 80%);
  mix-blend-mode: screen;
  filter: blur(1.5px);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
}

.goccia-macro-ottica {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: url(#rifrazioneGoccia) saturate(110%);
  -webkit-backdrop-filter: url(#rifrazioneGoccia) saturate(110%);
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.75) 0%,
    rgba(255, 255, 255, 0) 35%,
    rgba(140, 120, 135, 0.08) 65%,
    rgba(30, 20, 25, 0.16) 100%);
  box-shadow:
    inset 1px 1px 2px rgba(255,255,255,0.95),
    inset -1.5px -1.5px 2.5px rgba(0,0,0,0.08),
    1px 2px 3.5px rgba(40, 20, 30, 0.18);
}

.goccia-macro-ottica::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 9px;
  width: 8px;
  height: 4.5px;
  background: #ffffff;
  border-radius: 50%;
  transform: rotate(-25deg);
  z-index: 4;
}

.icona-embedded-goccia {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.65;
  z-index: 3;
  position: relative;
  top: 0.5px;
}

.safety-card:hover .caustica-macro-focalizzata {
  opacity: 1;
}

.safety-card:hover .goccia-macro-ottica {
  background: radial-gradient(circle at 35% 35%,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0) 25%,
    color-mix(in srgb, var(--water-color) 45%, transparent) 55%,
    color-mix(in srgb, var(--water-color) 95%, rgba(0,0,0,0.1)) 85%,
    var(--water-color) 100%);
}

.safety-card:hover .icona-embedded-goccia {
  stroke: var(--ink);
  opacity: 0.85;
}

/* v82: testo card sicurezza — titolo allineato di fianco alla macro-goccia (centrato sul suo asse
   verticale), corpo del testo che risale sotto la goccia -> card piu' compatte in altezza.
   La macro-goccia e' top:36 / left:40 / 72x72 (invariata). */
.safety-card .card-content {
  padding-top: 8px;   /* 28(card) + 8 = 36 -> allineato al top della goccia */
}
.safety-card .card-content h3 {
  min-height: 72px;                 /* = altezza goccia -> centratura verticale del titolo */
  display: flex;
  align-items: center;
  padding-left: 96px;               /* 40+72 = 112 (bordo dx goccia) - 30(padding card) + 14 gap */
  margin-bottom: 8px;
}
/* ===== /MACRO-GOCCE STABILI ===== */
/* V87.1: quinta card ("Niente sparizioni") a tutta larghezza — chiude la griglia senza orfani */
.anti-grid .safety-card:last-child{grid-column:1/-1}
.anti-grid .safety-card:last-child .card-content p{max-width:72ch}
/* i due patti: DATI = freddo (teal, luce alto-sx), REGOLE = caldo (rosa/plum, luce alto-dx).
   Stessa architettura, tinte e composizione specchiate: si leggono come fratelli, non gemelli. */
.pledge{max-width:960px;margin:22px auto 0;background:var(--dark);color:#fff;border-radius:24px;padding:38px 42px;position:relative;overflow:hidden}
.pledge::before{content:'';position:absolute;inset:0;background:radial-gradient(45% 70% at 8% 0%, rgba(88,175,182,.28), transparent 70%),radial-gradient(45% 70% at 95% 100%, rgba(95,160,200,.16), transparent 70%);pointer-events:none}
.safety .pledge .p-eyebrow{color:#7ED0D8}
.pledge-rules::before{background:radial-gradient(45% 70% at 92% 0%, rgba(231,77,107,.26), transparent 70%),radial-gradient(45% 70% at 6% 100%, rgba(153,75,118,.26), transparent 70%)}
.safety .pledge-rules .p-eyebrow{color:#F591A3}
.safety .pledge-rules li svg{fill:var(--pink)}
.pledge .p-in{position:relative;z-index:1}
.pledge .p-eyebrow{font-size:13px;font-weight:400;letter-spacing:.04em;  /* [v88] era 800/.16em */text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.pledge h3{font-size:clamp(22px,2.6vw,28px);font-weight:600;margin-bottom:22px;letter-spacing:-.01em}
.pledge ul{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.pledge li{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.85)}
.pledge li svg{flex:none;width:18px;height:18px;fill:var(--teal);margin-top:2px}
.pledge .p-gdpr{margin-top:20px;font-size:12.5px;color:rgba(255,255,255,.55)}
@media(max-width:880px){.anti-grid,.pledge ul{grid-template-columns:1fr}.pledge{padding:30px 26px}}


/* ============================================================
   V20 — ANIMAZIONE RISONANZA (interferenza di onde)
   ============================================================ */
/* v67: canvas rimosso. v75: didascalia #resCaption rimossa (sezione solo eyebrow/titolo/testo/tag). */


/* ============================================================
   V22 — dati secondari, cinque scelte, dive redesign, footer
   ============================================================ */
/* (v72) Vecchio accordion dati rimosso (.stats-toggle / .stats-more / .stat.mini):
   sostituito dal Progressive Disclosure (.stats-row / .stats-extended), CSS nel blocco .data. */

/* --- dive v24: replica ESATTA dell'architettura reveal→risonanza, invertita.
       Lineare tutto in % (in v23 il mix px/% causava il clamping = lo stacco a metà)
       + ellisse creamy alta nella sezione, come .reson::before ma specchiata --- */
/* v77: transizione FREDDA e pulita FAQ(cream) -> teal/ottanio -> plum profondo.
   Rimossi i midtone caldi (cream-2/#E3DFD7/#C4CEC9) che sporcavano di giallo. */
/* v79: tratto cream PIATTO iniziale (0→6%) -> il seam con la FAQ cade in zona uniforme,
   nessun cambio di pendenza proprio al contatto = zero banding. margin-top:-1px elimina
   l'eventuale seam sub-pixel tra i due container (colore identico = invisibile). */
.dive{background:linear-gradient(180deg,
    var(--cream) 0%,
    var(--cream) 6%,
    #EDF1F0 13%,
    #CBDADA 18%,
    #97BCC0 23%,
    #66A0A9 29%,
    #3D8794 35%,
    #226E7E 43%,
    #14586A 52%,
    #0E3D4D 67%,
    #15212F 83%,
    var(--dark) 93%,
    var(--dark) 100%);
  margin-top:-1px;
  /* V87.1: contenuto ABBASSATO nella fascia scura (dal ~58% in giù), vicino al footer:
     prima stava sul tratto teal chiaro e leggeva male. */
  padding:800px 40px 170px;min-height:1380px}
/* glow di apertura per la "vision": ora FREDDO/neutro (niente crema/rosa = niente giallo sporco) */
.dive::before{content:"";position:absolute;z-index:1;left:50%;top:16%;transform:translate(-50%,-50%);
  width:155%;height:56%;pointer-events:none;
  background:radial-gradient(ellipse 46% 50% at 50% 50%,
    rgba(247,250,250,.90) 0%,
    rgba(240,247,247,.62) 26%,
    rgba(234,243,244,.34) 48%,
    rgba(232,242,243,.12) 70%,
    rgba(232,242,243,0) 100%);
  filter:blur(48px)}
/* la visione apre sul tratto chiaro della transizione: testo scuro, da lì in poi bianco */
.dive .vision{color:#1C3B42;text-shadow:none}
.dive .eyebrow{color:#9FD8E2}
.dive .vision{text-shadow:0 1px 18px rgba(3,18,26,.45)}

/* --- footer modernizzato --- */
footer{padding:90px 40px 44px}
footer .wrap{gap:44px}
footer h4{font-size:11px;letter-spacing:.04em;color:rgba(255,255,255,.42);margin-bottom:20px}  /* [v88] era .2em */
footer .wrap a{display:block;width:fit-content;color:rgba(255,255,255,.62);font-size:14px;text-decoration:none;margin-bottom:13px;position:relative;transition:color .22s,transform .22s}
footer .wrap a:hover{color:#fff;transform:translateX(3px)}
footer .wrap a::after{content:'';position:absolute;left:0;bottom:-3px;height:1.5px;width:100%;background:linear-gradient(90deg,var(--pink),var(--teal));transform:scaleX(0);transform-origin:left;transition:transform .28s ease}
footer .wrap a:hover::after{transform:scaleX(1)}
footer .copy{border-top:1px solid rgba(255,255,255,.08);margin-top:60px;padding-top:26px}


/* --- modal investor kit --- */
.ik-overlay{position:fixed;inset:0;background:rgba(16,10,22,.66);backdrop-filter:blur(5px);z-index:90;display:none;align-items:center;justify-content:center;padding:24px}
.ik-overlay.on{display:flex;animation:ikFade .3s ease}
@keyframes ikFade{from{opacity:0}to{opacity:1}}
.ik-modal{background:var(--cream);color:var(--ink);border-radius:24px;max-width:460px;width:100%;padding:38px 38px 34px;position:relative;box-shadow:0 30px 80px rgba(0,0,0,.4);animation:ikUp .35s cubic-bezier(.22,.61,.36,1)}
@keyframes ikUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ik-overlay.on,.ik-modal{animation:none}}
.ik-modal .x{position:absolute;top:16px;right:18px;background:none;border:none;font-size:20px;cursor:pointer;color:var(--ink-soft)}
.ik-modal h3{font-size:23px;font-weight:700;margin-bottom:10px;letter-spacing:-.01em}
.ik-modal .ik-sub{font-size:13.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:22px}
.ik-modal label{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--plum);margin:14px 0 6px}
.ik-modal input,.ik-modal textarea{width:100%;border:1.5px solid rgba(0,0,0,.13);border-radius:12px;background:#fff;font-family:var(--font);font-size:14px;padding:11px 14px;outline:none;transition:border-color .2s;resize:vertical}
.ik-modal input:focus,.ik-modal textarea:focus{border-color:var(--pink)}
.ik-modal .ik-send{margin-top:22px;width:100%;background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff;border:none;border-radius:30px;padding:14px;font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;box-shadow:0 8px 22px rgba(231,77,107,.3)}
.ik-modal .ik-ok{display:none;text-align:center;padding:26px 6px 8px;font-size:15px;line-height:1.6}
.ik-modal.sent form{display:none}
.ik-modal.sent .ik-ok{display:block}


/* ============================================================
   V24 — fonti linkate, toggle visibile, card futuro, kick preview
   ============================================================ */
.stat .src{display:inline-block;margin-top:14px;font-size:11.5px;color:var(--ink-soft);opacity:.8;text-decoration:none;border-bottom:1px dotted currentColor;padding-bottom:1px;transition:color .2s,opacity .2s}
.stat .src:hover{color:var(--pink);opacity:1}
.stat .src em{font-style:normal;color:var(--pink);font-weight:700}
/* card "in arrivo" nei pannelli del metodo */
.pm-card.pm-future{opacity:.85}
.pm-card.pm-future:hover{transform:none;
  box-shadow:7px 7px 16px var(--neu-sh), -7px -7px 16px var(--neu-hi)}
/* toggle anteprima campagna (nota di design) */
.kick-toggle{display:none}
.kick-toggle:hover{background:var(--pink);color:#fff}




/* ============================================================
   V26 — catena cromatica senza stacchi + quirk di sfondo (anelli)
   ============================================================ */
/* Stacco 1: choices finisce su #F9EDE2 → la cta-band parte da lì e atterra
   sul cream dello showcase. Stacco 2: safety finisce su #F6EFF4 → il founder
   parte da lì; e a cascata founder→kick si raccorda. */
.cta-band{background:linear-gradient(180deg,#F9EDE2,var(--cream))}
/* v77: founder finisce su #FBF6F2 (chiaro) = top roadmap -> niente "valle" calda cream-2 al seam */
.founder{background:linear-gradient(180deg,#F6EFF4,#FBF6F2)}
@media(max-width:480px){
  .team-grid{gap:20px 14px}
  .team-name{font-size:15px}
  .team-role{font-size:12.5px}
}
.kick{background:linear-gradient(180deg,var(--cream-2),var(--cream))}
.kick .kick-left{display:block;max-width:620px;margin:0;text-align:left;opacity:1}
.kick .kick-left .lead{margin:0 0 28px;max-width:560px}
.btn-soon{display:inline-flex;align-items:center;gap:10px;background:#E7E1E4;color:#8A8189;border:none;padding:16px 30px;border-radius:40px;font-family:var(--font);font-size:16px;font-weight:600;cursor:not-allowed;box-shadow:inset 0 1px 2px rgba(0,0,0,.04)}
.soon-pill{background:#fff;color:#A89BA3;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 11px;border-radius:20px}
.kick-note{margin-top:20px;font-size:14px;color:var(--ink-soft)}





/* ============================================================
   V27 — hint interattivo del dodecaedro + menu mobile
   ============================================================ */
.pm-hint{margin-top:6px;font-size:13.5px;color:var(--ink);font-weight:500;
  display:inline-flex;align-items:center;gap:9px}  /* V87: hint compatto, peso visivo ridotto */
/* V57: pallino pulsante (come label pre-lancio) al posto della linea animata */
.pm-pulse{width:9px;height:9px;border-radius:50%;background:var(--teal);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(88,175,182,.5);animation:pmPulse 2s infinite}
@keyframes pmPulse{0%{box-shadow:0 0 0 0 rgba(88,175,182,.5)}70%{box-shadow:0 0 0 10px rgba(88,175,182,0)}100%{box-shadow:0 0 0 0 rgba(88,175,182,0)}}
@media(prefers-reduced-motion:reduce){.pm-pulse{animation:none}}

/* --- menu mobile: hamburger + pannello --- */
.burger{display:none;width:42px;height:42px;border:none;background:none;cursor:pointer;padding:10px;flex-direction:column;justify-content:center;gap:5.5px;z-index:60}
.burger span{display:block;height:2px;width:100%;background:currentColor;border-radius:2px;transition:transform .3s cubic-bezier(.22,.61,.36,1),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.m-menu{position:fixed;top:70px;left:14px;right:14px;z-index:55;background:#fff;border:1.5px solid rgba(0,0,0,.08);border-radius:22px;box-shadow:0 24px 60px rgba(25,18,35,.18);padding:14px;display:none}
.m-menu.on{display:block;animation:mIn .3s cubic-bezier(.22,.61,.36,1)}
@keyframes mIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.m-menu.on{animation:none}}
.m-menu a{display:block;padding:14px 18px;border-radius:14px;color:var(--ink);text-decoration:none;font-size:16px;font-weight:600;position:relative}
.m-menu a:active,.m-menu a:hover{background:rgba(231,77,107,.07)}
.m-menu .m-sep{height:1px;background:rgba(0,0,0,.08);margin:8px 12px}   /* separatore prima di Principi/Team/Contatti */
.m-menu .m-cta{margin-top:8px;text-align:center;background:linear-gradient(100deg,var(--pink),var(--salmon));color:#fff;box-shadow:0 8px 20px rgba(231,77,107,.3)}
@media(max-width:880px){
  .burger{display:flex}
  .hdr-right .lang-select{display:none} /* la lingua vive nel pannello mobile */
}








/* layout di impilamento conservato (utile a prescindere dai sigilli) */
section{position:relative}
/* ================================================================
   LAYOUT BASE SEZIONI
   padding globale: 130px 40px (ogni sezione sovrascrive se necessario)
   .wrap  = contenitore standard max-width 1120px, margin:0 auto
   .inner = contenitore stretto, max-width variabile per sezione
            (es. reson 780px, dive 660px)
   ================================================================ */
section>.wrap,section>.inner{position:relative;z-index:2}
/* le sezioni che ospitano un sigillo lo contengono senza traboccare */


/* ============================================================
   V31 — sigilli rivisti + toggle etichette + footer riarrangiato
   ============================================================ */
/* FASI: anelli concentrici attorno ai numeri degli step */
.steps{position:relative;z-index:0}
.step{position:relative}
.step .dot{position:relative;z-index:5;isolation:isolate}
.step .body{position:relative;z-index:1}


footer .wrap{grid-template-columns:1.5fr 1fr 1fr}





/* ============================================================
   V33 — VIDEO HERO: player 16:9 su superficie chiara
   ============================================================ */
.video-hero{background:var(--cream);min-height:auto;position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:150px 40px 130px;color:var(--ink);overflow:hidden}
/* respiro ambientale continuo con la hero: l'alone peach prosegue, nessuno stacco */
.video-hero::before{content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(48% 58% at 0% 0%, rgba(243,150,116,.10), transparent 68%)}
.vh-head{text-align:center;max-width:900px;margin:0 auto 34px;position:relative;z-index:2}
.vh-head h2{font-size:var(--fs-h2);margin:0}
.vh-head h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.vh-player{position:relative;z-index:2;width:100%;max-width:1320px;aspect-ratio:16/9;
  border-radius:22px;overflow:hidden;cursor:pointer;
  background:#fff;border:1.5px solid rgba(0,0,0,.10);
  box-shadow:0 14px 40px rgba(120,90,110,.14);transition:transform .3s ease,box-shadow .3s ease}
.vh-player:hover{transform:translateY(-3px);box-shadow:0 20px 50px rgba(120,90,110,.2)}
.vh-player .screen{position:absolute;inset:0;z-index:0;background:#000}  /* v1.1.8: nero di fallback senza video */
/* --- Video segnaposto (WP): il <video> riempie il player; il bottone play e la
   didascalia svaniscono durante la riproduzione e tornano in pausa. --- */
.vh-video{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:block}
.vh-player.playing .vh-play{opacity:0;transform:translate(-50%,-50%) scale(.85);pointer-events:none}
.vh-player.playing .vh-cap{opacity:0}
.vh-play,.vh-cap{transition:opacity .35s ease,transform .35s ease}
.vh-player 
.vh-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:92px;height:92px;border-radius:50%;background:linear-gradient(135deg,var(--pink),var(--salmon));
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px rgba(231,77,107,.34);transition:transform .25s ease}
.vh-player:hover .vh-play{transform:translate(-50%,-50%) scale(1.08)}
.vh-play svg{width:32px;height:32px;margin-left:5px;fill:#fff}
.vh-cap{position:absolute;left:0;bottom:20px;width:100%;text-align:center;z-index:2;
  font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.vh-foot{margin-top:30px;position:relative;z-index:2;font-size:14px;color:var(--ink-soft);
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:center}
.vh-foot a{color:var(--plum);font-weight:700;text-decoration:none;border-bottom:1.5px solid transparent;transition:border-color .2s}
.vh-foot a:hover{border-color:var(--plum)}
@media(max-width:680px){.video-hero{padding:64px 18px 72px}.vh-play{width:72px;height:72px}.vh-play svg{width:24px;height:24px}}








/* ============================================================
   DECORAZIONE HERO — quadrati morbidi concentrici (neumorfismo CSS)
   Vive su livello intermedio (z-index:1): sopra lo sfondo, sotto il
   contenuto (z-index:2). Ancorata alla hero ma libera di sbordare
   nella sezione successiva (.hero overflow:visible, .data trasparente).
   Tre riquadri arrotondati incassati, ruotati ~45°, luce alto-sx.
   ============================================================ */
.hero-visual-col{position:relative}   /* contesto per centrare la decorazione sul mockup */
/* z-index:-1 -> dentro lo stacking context di .hero .wrap (sopra lo sfondo hero) ma
   SOTTO il testo (blocco statico) e il telefono: non copre piu' titolo/testo */
.hero-neu{position:absolute;z-index:-1;pointer-events:none;display:none;
  left:50%;top:calc(50% + 20px);width:680px;height:680px;transform:translate(-50%,-50%) rotate(45deg)}
@media(min-width:1100px){.hero-neu{display:block}}
/* raggio = stessa proporzione della UI app (36px/300px = 12%): eco visiva del telefono */
.hero-neu .sq{position:absolute;border-radius:12%;background:var(--cream);
  box-shadow:18px 18px 40px rgba(125,95,115,.10),-18px -18px 40px rgba(255,255,255,.92)}
.hero-neu .sq.s1{inset:0}
.hero-neu .sq.s2{inset:13%;box-shadow:14px 14px 32px rgba(125,95,115,.09),-14px -14px 32px rgba(255,255,255,.9)}
.hero-neu .sq.s3{inset:27%;box-shadow:12px 12px 28px rgba(125,95,115,.09),-12px -12px 28px rgba(255,255,255,.9)}
.hero-neu .sq.s4{inset:41%;box-shadow:10px 10px 24px rgba(125,95,115,.08),-10px -10px 24px rgba(255,255,255,.88)}


/* ============================================================
   DECORAZIONE RISONANZA — solchi a spirale (neumorfismo CSS)
   Cerchi VERI concentrici (inset simmetrici → niente ellissi), tutti
   sullo stesso centro leggermente decentrato. Ogni solco è un ARCO
   PARZIALE (non un cerchio chiuso): la maschera conica mostra solo
   una porzione, sfalsata di anello in anello → effetto spirale/pieghe.
   Ombre semi-trasparenti → adattive su sfondo chiaro o scuro.
   z-index:1, sezione overflow:visible (non tagliata sopra/sotto).
   ============================================================ */


/* ============================================================================
   8c · ROADMAP — onda neumorfica (timeline). Metodo "tre bande" del progetto.
   Vive sul fondo cream delle sezioni adiacenti. Knob animato allo scroll.
   ============================================================================ */
/* V87.1: fondo continuo — la roadmap chiude su var(--cream) = apertura FAQ (prima cream-2 = stacco visibile) */
.roadmap{background:linear-gradient(180deg,#FBF6F2,#FBF6F2 58%,var(--cream));position:relative;overflow:hidden}
.roadmap .wrap{max-width:1180px}
.roadmap .head{text-align:center;margin-bottom:18px}
.roadmap .eyebrow{display:block}
.roadmap h2{font-size:var(--fs-h2);line-height:1.04}
.roadmap h2 .em{color:var(--pink);font-style:italic;font-weight:400}
.roadmap .sub{max-width:560px;margin:18px auto 0;color:var(--ink-soft);font-size:17px;line-height:1.6}
/* stage: l'onda + i marker, in coordinate viewBox 1200x200 */
.rm-stage{position:relative;margin:54px auto 0;max-width:1120px}
.rm-svg{display:block;width:100%;height:auto;overflow:visible}
/* track grigia incassata */
.rm-track-corpo{fill:#FBF6F2}
.rm-band{fill:#FBF6F2}
.rm-track-hi{fill:rgba(255,255,255,.95)}
.rm-track-om{fill:rgba(140,118,130,.30)}
.rm-halo-hi{fill:rgba(255,255,255,.85)}
.rm-halo-om{fill:rgba(140,118,130,.22)}
/* centerline colorata che si "riempie" allo scroll (dash animato) */
.rm-fill{fill:none;stroke:url(#rmFillGrad);stroke-width:9;stroke-linecap:round;
  filter:drop-shadow(0 2px 6px rgba(231,77,107,.28));
  stroke-dasharray:var(--rm-len);stroke-dashoffset:var(--rm-len);
  transition:stroke-dashoffset 3.3s cubic-bezier(.33,.85,.30,1)}
.roadmap.in .rm-fill{stroke-dashoffset:var(--rm-rest)}  /* resta scoperto il tratto futuro */
/* knob lucido (forma chiusa -> box-shadow CSS classico via filtri svg) */
.rm-knob{transition:offset-distance 3.3s cubic-bezier(.33,.85,.30,1),opacity .6s ease;offset-rotate:0deg}
/* rm-knob-core ora ha fill inline (rmKnobBody) */
.rm-knob-gloss{fill:#fff;opacity:.6}
.rm-knob-glow{opacity:0;transition:opacity 1.4s ease 1.1s}
.roadmap.in .rm-knob-glow{opacity:.7;animation:rmPulse 3.2s ease-in-out 2.5s infinite}
@keyframes rmPulse{0%,100%{opacity:.4}50%{opacity:.7}}
/* marker dots */
.rm-dot{transition:.5s ease}
.rm-dot-done{fill:#FBF6F2;stroke:url(#rmFillGrad);stroke-width:3.4}
.rm-dot-future{fill:#FBF6F2;stroke:rgba(140,118,130,.45);stroke-width:2.8;stroke-dasharray:3 3}
/* tratto futuro dell'onda, desaturato/tratteggiato sopra la track */
.rm-future-line{fill:none;stroke:rgba(140,118,130,.45);stroke-width:3;stroke-dasharray:5 7;stroke-linecap:round}
/* etichette HTML posizionate in % sopra lo stage */
.rm-label{position:absolute;width:150px;text-align:center;transform:translateX(-50%);
  opacity:0;transition:opacity .5s ease,transform .5s ease}
.roadmap.in .rm-label{opacity:1}
.rm-label.up{transform:translate(-50%,-12px)}
.roadmap.in .rm-label.up{transform:translate(-50%,0)}
.rm-label.down{transform:translate(-50%,12px)}
.roadmap.in .rm-label.down{transform:translate(-50%,0)}
.rm-label .lab{font-size:14px;font-weight:700;color:var(--ink);line-height:1.2}
.rm-label .lsub{font-size:11.5px;color:var(--ink-soft);margin-top:3px;line-height:1.35}
.rm-label .leyebrow{font-size:10px;font-weight:400;letter-spacing:.04em;  /* [v88] era 800/.1em */text-transform:uppercase;
  color:var(--teal);display:block;margin-bottom:3px}
.rm-label.is-now .leyebrow{color:var(--pink)}
.rm-label.is-now .lab{color:var(--pink);font-size:15px}
.rm-label.is-future .leyebrow{color:var(--ink-soft)}
.rm-label.is-future .lab{color:var(--ink-soft)}
/* anni di riferimento (pochi: oggi e domani) */
.rm-years{position:relative;max-width:1120px;margin:8px auto 0;height:22px}
.rm-year{position:absolute;transform:translateX(-50%);font-size:13px;font-weight:700;
  color:var(--ink-soft);letter-spacing:.02em}
.rm-year.now{color:var(--pink)}
/* micro-cta sotto, raccordo verso la campagna crowdfunding */
.rm-foot{text-align:center;margin-top:130px;color:var(--ink-soft);font-size:15px}
.rm-foot .em{color:var(--pink);font-weight:600}
.rm-vert{display:none;margin-top:40px;position:relative;padding-left:34px}
.rm-vert::before{content:"";position:absolute;left:13px;top:6px;bottom:6px;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--coral),var(--pink) 70%,rgba(140,118,130,.3) 70%)}
.rm-vstep{position:relative;padding:0 0 26px 0}
.rm-vstep::before{content:"";position:absolute;left:-27px;top:2px;width:14px;height:14px;border-radius:50%;
  background:var(--cream);border:3px solid var(--pink)}
.rm-vstep.is-future::before{border-color:rgba(140,118,130,.5);border-style:dashed}
.rm-vstep.is-now::before{box-shadow:0 0 0 5px rgba(231,77,107,.18)}
.rm-vstep .vlab{font-size:15px;font-weight:700;color:var(--ink)}
.rm-vstep .vey{font-size:10px;font-weight:400;letter-spacing:.04em;  /* [v88] era 800/.1em */text-transform:uppercase;color:var(--teal)}
.rm-vstep.is-now .vey,.rm-vstep.is-now .vlab{color:var(--pink)}
.rm-vstep .vsub{font-size:13px;color:var(--ink-soft);margin-top:2px}
@media(max-width:760px){
  .rm-stage{display:none}           /* l'onda orizzontale non regge sotto 760px */
  .rm-years{display:none}           /* gli anni vivono dentro le tappe verticali */
  .rm-vert{display:block}
}


/* ===== SEZIONE PROBLEMA · Progressive Disclosure a 3 colonne ===== */
.data .bands{max-width:1120px;margin:0 auto}
/* riga primaria (3 macro) + griglia estesa (3x2): colonne simmetriche */
.stats-row,.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:56px;row-gap:52px;align-items:start}

/* CTA "esca": link testuale minimale ed editoriale (stile Bending Spoons) che
   espande l'analisi completa e sblocca l'audio. Niente pill/ombre: solo testo + freccia. */
.stats-toggle-wrap{text-align:center;margin-top:54px}
/* V87.2: da link discreto a PILL ben evidenziata ("chi non apre deve averlo scelto") */
.stats-toggle{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;font:inherit;
  font-size:var(--fs-body);font-weight:600;letter-spacing:.02em;color:var(--plum);cursor:pointer;
  background:var(--neu-bg);border:1.5px solid rgba(153,75,118,.18);border-radius:40px;
  box-shadow:7px 7px 16px var(--neu-sh),-7px -7px 16px var(--neu-hi);
  transition:color .25s ease,gap .25s ease,border-color .25s ease,box-shadow .25s ease}
.stats-toggle:hover{color:var(--pink);gap:14px;border-color:rgba(231,77,107,.35);
  box-shadow:9px 9px 20px var(--neu-sh),-9px -9px 20px var(--neu-hi),0 10px 26px rgba(231,77,107,.16)}
/* sottile underline animata che cresce da sinistra su hover (solo sotto il testo) */
.stats-toggle .stats-toggle-txt{position:relative}
.stats-toggle .stats-toggle-txt::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.stats-toggle:hover .stats-toggle-txt::after{transform:scaleX(1)}
.stats-toggle .stats-toggle-ico{font-size:.95em;line-height:1;transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.stats-toggle[aria-expanded="true"] .stats-toggle-ico{transform:rotate(180deg)}

/* contenitore comprimibile: altezza animata via JS (max-height). I 6 dati
   sono gia' a layout definito dentro, vengono solo svelati e fanno count-up. */
.stats-extended{max-height:0;overflow:hidden;opacity:0;
  transition:max-height .65s cubic-bezier(.22,.61,.36,1),opacity .5s ease}
.stats-extended.open{opacity:1}
.stats-grid{margin-top:8px}
@media(prefers-reduced-motion:reduce){
  .stats-extended,.stats-toggle,.stats-toggle .stats-toggle-ico{transition:none}
}

/* allineamento perfetto tra colonne: ogni .band e' un subgrid che condivide le righe
   (numero / lead / sub) con le card affiancate -> i testi partono alla stessa altezza */
.band{grid-row:span 3;display:grid;grid-template-rows:subgrid;row-gap:0;
  padding:30px 0 0;border-top:1px solid rgba(0,0,0,.08);text-align:left}
/* numeri ECCEZIONE: restano giganti e d'impatto come da origine */
.band-num{font-size:clamp(64px,9.5vw,140px);font-weight:350;line-height:.82;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;white-space:nowrap;display:block;margin-bottom:14px}
.band-num .u{font-size:.42em;font-weight:300;margin-left:.04em;letter-spacing:0}
.band-body{display:contents}  /* i figli (lead+sub) entrano nel subgrid del .band */
.band-lead{font-size:clamp(20px,2.3vw,27px);font-weight:500;line-height:1.32;color:var(--ink);margin:0 0 10px}
.band-sub{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--ink-soft);margin:0;max-width:35ch}
.band-sub b{color:var(--ink);font-weight:600}
/* temperatura cromatica: freddo -> caldo */
.band.act1 .band-num{color:var(--plum)}
.band.act2 .band-num{color:var(--coral)}
.band.act3 .band-num{color:var(--pink)}
.data .src-line{font-size:var(--fs-small);color:var(--ink-soft);opacity:.7;letter-spacing:.01em;
  max-width:1120px;margin:40px auto 0;text-align:left;line-height:1.5}
@media(max-width:880px){
  /* riga principale e griglia estesa -> colonna singola verticale (subgrid disattivato) */
  .stats-row,.stats-grid{grid-template-columns:1fr;row-gap:0}
  .band{display:block;grid-row:auto;padding:36px 0 0;text-align:center}
  .band-body{display:block;margin:0 auto;max-width:38ch}
  .data .src-line{text-align:center}
}

/* ===== BRIDGE RESPIRO v64 ===== */
.breath-bridge{position:relative;height:300vh;background:var(--cream)}  /* v1.1.1: 340->300vh, con il progresso anticipato basta meno corsa */

/* --- Invito allo scroll: etichetta + doppio chevron a cascata, in basso al centro.
   L'opacita' complessiva la regola il tick JS con il progresso del reveal. --- */
.breath-cue{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}
.breath-cue-txt{font-family:var(--font);font-size:12.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ink);opacity:.55}
.breath-cue-chevrons{display:flex;flex-direction:column;align-items:center;height:34px}
.breath-cue-chevrons svg{width:22px;height:22px;margin-top:-9px;fill:none;stroke:var(--pink);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
  animation:breathCueDrop 1.7s cubic-bezier(.45,0,.35,1) infinite}
.breath-cue-chevrons svg:nth-child(2){animation-delay:.22s;stroke:var(--salmon)}
@keyframes breathCueDrop{
  0%   {opacity:0;transform:translateY(-7px)}
  28%  {opacity:.95}
  62%  {opacity:.95}
  100% {opacity:0;transform:translateY(9px)}
}
@media(prefers-reduced-motion:reduce){
  .breath-cue-chevrons svg{animation:none;opacity:.8}
}
.breath-sticky{position:sticky;top:0;height:100vh;display:flex;justify-content:center;align-items:center;overflow:hidden}
.breath-el{position:absolute;opacity:0;filter:blur(40px);will-change:filter,opacity;text-align:center;pointer-events:none}
p.breath-el{font-family:var(--font);font-size:clamp(42px,6vw,72px);font-weight:300;letter-spacing:-.02em;color:var(--ink);margin:0}
.breath-final{display:flex;flex-direction:column;align-items:center;gap:24px}
.breath-mono{width:clamp(58px,7.5vw,86px);height:auto;display:block}
.breath-wordmark{width:clamp(240px,32vw,420px);height:auto;color:var(--ink);display:block}

/* ============================================================================
   FONDO ORGANICO DEL PONTE  ·  "lava lamp"                          [v88]
   ============================================================================
   Cinque corpi morbidi che si fondono e vagano dietro alle tre schermate di
   transizione (E adesso? / Si cambia. / logo). Quando il logo si compone i corpi
   precipitano dentro al dodecaedro e si spengono; risalendo, si ripropagano dal
   logo. Sotto la fascia c'e' il panna liscio della sezione, come prima.

   COME NASCE LA FORMA
   I corpi non cambiano mai geometria: traslano, ruotano e scalano, e basta. Solo
   transform, quindi lavoro del compositore e nessun ridisegno. La forma organica
   e la fusione arrivano dal filtro sul contenitore:
     feGaussianBlur   spande i bordi in una coda morbida
     feColorMatrix    moltiplica il CANALE ALFA e lo ricompatta su una soglia,
                      cosi' due code sovrapposte la superano e i corpi si saldano
                      col collo concavo tipico della lava
   La soglia sta sull'alfa e NON sul colore. Col contrast() della CSS ogni canale
   RGB va a fondo scala e la palette vira al fluo: il corallo diventa giallo, il
   teal diventa ciano.

   LASTRA SATINATA
   Fusione e profondita' si combattono: la saldatura vuole un alfa netto, la
   profondita' lo vuole sfumato. Quindi vanno in sequenza, non in parallelo: prima
   si salda la sagoma, poi sul RISULTATO si costruisce la profondita'. Il nucleo si
   ricava erodendo l'alfa gia' saldato (seconda soglia, piu' severa), lo si sfoca
   poco perche' e' la parte vicina al vetro, e lo si sovrappone a una copia molto
   sfocata che fa il bordo lontano. La sfocatura risulta cosi' variabile: minima al
   centro del corpo, massima al perimetro.

   VALORI: sono quelli scelti da Matteo su banco prova il 26/08/2026 e sono
   scritti fissi. La riga di taratura era:
     vel 3x · dim 1.00 · sfoc 0.70 · sat 1.50 · velo 0.50/1.80/80px/0.90
     · cond 0.92/1.0s/30%
   Dove servono, i valori originali di riferimento sono annotati a fianco.
   ============================================================================ */

.bb-goo{
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  opacity:0;                                  /* acceso dall'innesco sullo scroll */
  /* uscita piu' svelta dell'entrata: deve essere gia' sparito quando affiora il
     confine con la sezione vicina, anche se si scorre in fretta */
  transition:opacity .65s ease;
  /* 4.2px = 6px di base per il fattore 0.70 scelto in taratura; saturazione 1.50 */
  filter:blur(4.2px) saturate(1.5);
  /* confine invisibile: i corpi si dissolvono prima dei bordi della fascia invece
     di arrivarci e farsi tagliare dalla sezione. Il confine si risolve QUI, non
     spostando i corpi. */
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 97%);
          mask-image:linear-gradient(to bottom,transparent 0%,#000 10%,#000 78%,transparent 97%);
}

/* --goo-boost e --goo-fade sono i due fattori del finale e si moltiplicano
   sull'opacita'. Il boost infittisce la massa mentre precipita (stringendosi
   l'area crolla e il colore sbiadirebbe), il fade la spegne. Vanno dichiarati con
   @property: un numero registrato cosi' il browser sa interpolarlo, senza
   l'animazione scatterebbe a meta' invece di scorrere. */
@property --goo-boost{syntax:'<number>';initial-value:1;inherits:false}
@property --goo-fade{ syntax:'<number>';initial-value:1;inherits:false}
.bb-goo.is-on{opacity:calc(.72 * var(--goo-boost,1) * var(--goo-fade,1));
  transition:opacity 1.7s cubic-bezier(.33,.7,.35,1)}

/* ---------------------------------------------------------------------------
   IL FINALE, NEI DUE SENSI DI MARCIA
   Scendendo la massa collassa nel logo e si spegne; risalendo fa la stessa cosa
   al contrario e si ripropaga dal logo. Lo scroll ACCENDE, SPEGNE e FA PARTIRE,
   e nient'altro: agganciare il movimento alla posizione dello scroll lo rende
   legnoso perche' segue il dito, va avanti e torna indietro.

   ATTENZIONE, due trappole pagate a caro prezzo:

   1) Il ritorno ha keyframe con NOMI PROPRI e non e' il collasso con
      `animation-direction:reverse`. In CSS l'identita' di un'animazione e' la
      coppia elemento + nome dei keyframe: cambiando solo la direzione il browser
      non ne crea una nuova, MODIFICA quella che c'e' gia' tenendone il tempo
      corrente. A fine collasso quel tempo e' la fine, e invertire la direzione
      fa saltare l'animazione di colpo al valore opposto (bolle piene tutte
      insieme in salita, sparizione secca in discesa). Le curve del ritorno sono
      i mirror calcolati: il mirror di cubic-bezier(x1,y1,x2,y2) e'
      cubic-bezier(1-x2,1-y2,1-x1,1-y1).

   2) Mentre le animazioni pilotano l'opacita' la TRANSIZIONE va spenta. Sono
      animazioni su una variabile da cui l'opacita' dipende: con una transizione
      addosso, a ogni fotogramma l'opacita' ripartirebbe da capo, inseguirebbe con
      tutto il ritardo della transizione e non arriverebbe mai a zero entro la
      fine del collasso.
   --------------------------------------------------------------------------- */

/* durata del finale: 1,0s. Il punto di fuga (transform-origin) lo mette il JS sul
   centro del dodecaedro. La curva e' piatta all'inizio e ripida alla fine, cosi'
   i corpi paiono precipitare dentro al logo. Scala finale 0.12: piu' piccola
   sparisce invece di diventare il logo. */
@keyframes condensa{ from{transform:scale(1)}    to{transform:scale(.12)} }
@keyframes densifica{from{--goo-boost:1}         to{--goo-boost:1.5} }
@keyframes svanisce{ from{--goo-fade:1}          to{--goo-fade:0} }
.bb-goo.is-cond .bb-goo-inner{
  animation:condensa 1s cubic-bezier(.55,0,.85,.2) forwards;
}
/* lo spegnimento parte al 30% del collasso e finisce ESATTAMENTE con lui: 0,30s di
   ritardo e 0,70s di durata su 1,0s totali. Cosi' quando il logo e' definito i
   corpi non ci sono piu', invece di restare appesi dietro. Ease-in: la massa resta
   piena mentre precipita e si spegne in fretta sul finale. */
.bb-goo.is-cond{
  animation:densifica 1s cubic-bezier(.55,0,.85,.2) forwards,
            svanisce  .7s ease-in .3s forwards;
}

/* il ritorno: gli stessi tre movimenti scritti al contrario */
@keyframes espandi{  from{transform:scale(.12)} to{transform:scale(1)} }
@keyframes sfittisci{from{--goo-boost:1.5}      to{--goo-boost:1} }
@keyframes riappare{ from{--goo-fade:0}         to{--goo-fade:1} }
.bb-goo.is-decond .bb-goo-inner{
  animation:espandi 1s cubic-bezier(.15,.8,.45,1) forwards;
}
/* qui lo spegnimento riappare con ritardo ZERO: un animation-delay sta sempre
   all'inizio, in qualunque direzione, quindi la finestra finale del collasso
   diventa la finestra iniziale del ritorno */
.bb-goo.is-decond{
  animation:sfittisci 1s cubic-bezier(.15,.8,.45,1) forwards,
            riappare  .7s ease-out forwards;
}
.bb-goo.is-cond,   .bb-goo.is-on.is-cond,
.bb-goo.is-decond, .bb-goo.is-on.is-decond{transition:none}

/* al ritorno la transizione evita che la massa riappaia a scatto se per qualunque
   ragione l'animazione non sta girando */
.bb-goo-inner{transition:transform .9s cubic-bezier(.33,.7,.35,1)}

.bb-goo-inner{position:absolute;inset:-16% -16% 0 -16%;filter:url(#gooeyGlassG)}
/* TRAPPOLA: `inset:-16% -16% 0 -16%` e' alto/destra/basso/sinistra, quindi il
   contenitore sborda anche SOPRA. Le percentuali di left/top dei corpi sono su
   QUESTO riquadro, non sullo schermo: la posizione a schermo di un corpo e'
   -16 + left * 1.32 in orizzontale e -16 + top * 1.16 in verticale. */

/* ---------------------------------------------------------------------------
   VELO PANNA
   Tiene leggibile il centro senza spegnere i bordi. E' panna esatta su fondo
   panna esatto (#FBF7F4 tutti e due), quindi sul vuoto e' invisibile per
   costruzione: agisce solo dove schiarisce i corpi. Si ritira durante il collasso,
   perche' la massa va a finire proprio dove il velo e' piu' fitto e senza la
   ritirata se la mangerebbe nell'istante del finale.
   Valori di taratura: ellisse al 50% (22% x 19% invece di 44% x 38%), fascia di
   dissolvenza allargata 1.80 (stop a 20.4% / 60% / 99.6%), sfocatura vera 80px,
   opacita' 0.90. La sfocatura serve perche' la sola fascia del gradiente, anche al
   massimo, lasciava vedere il bordo: oltre 1.80 il capo trasparente uscirebbe
   dall'ellisse e si taglierebbe di netto, e da li' in su il lavoro lo fa la
   sfocatura, che quel limite non ce l'ha.
   --------------------------------------------------------------------------- */
.bb-veil{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:.9;
  transition:opacity 1.2s cubic-bezier(.33,.7,.35,1);
  filter:blur(80px);
  background:radial-gradient(22% 19% at 50% 50%,
    var(--cream) 0%,
    rgba(251,247,244,.86) 20.4%,
    rgba(251,247,244,.45) 60%,
    transparent 99.6%);
}
.bb-goo.is-cond ~ .bb-veil{opacity:.27}          /* 0.90 x 0.30 */
@keyframes veloRitorna{ from{opacity:.27} to{opacity:.9} }
.bb-goo.is-decond ~ .bb-veil{animation:veloRitorna 1s ease-out forwards}

/* ---------------------------------------------------------------------------
   I CORPI
   Raggi d'angolo asimmetrici: gia' da fermi non sono cerchi, e ruotando la sagoma
   sembra cambiare forma senza che nulla venga ridisegnato. Colori: tinte della
   palette, non i pieni. Cinque corpi con partenze sparse su tutta la fascia.
   Le durate sono quelle originali divise per il fattore velocita' 3 scelto in
   taratura (il valore di partenza e' annotato a fianco).
   --------------------------------------------------------------------------- */
.bl{position:absolute;display:block;will-change:transform;
  width:var(--w);height:var(--h);
  animation-timing-function:ease-in-out;animation-iteration-count:infinite;
  animation-name:var(--kf);
  animation-duration:var(--dur);
  animation-delay:var(--del,0s);
}
.bl.b1{--kf:goo1;--dur:30.67s;               --w:30vmax;--h:27vmax;left:30%;top:24%;background:#FAD4D7;
  border-radius:58% 42% 47% 53% / 51% 46% 54% 49%}   /* 92s  */
.bl.b2{--kf:goo2;--dur:37.67s;--del:-10s;    --w:26vmax;--h:28vmax;left:26%;top:34%;background:#F2A6A8;
  border-radius:44% 56% 62% 38% / 57% 43% 57% 43%}   /* 113s, -30s */
.bl.b3{--kf:goo3;--dur:32.33s;--del:-18.33s; --w:27vmax;--h:25vmax;left:54%;top: 0%;background:#F7BCA6;
  border-radius:63% 37% 39% 61% / 44% 62% 38% 56%}   /* 97s,  -55s */
.bl.b4{--kf:goo4;--dur:43.67s;--del:-6s;     --w:25vmax;--h:27vmax;left:68%;top:36%;background:#A9D6DA;
  border-radius:51% 49% 56% 44% / 60% 41% 59% 40%}   /* 131s, -18s */
.bl.b5{--kf:goo5;--dur:36.33s;--del:-23.33s; --w:23vmax;--h:24vmax;left:30%;top:56%;background:#C99BB4;
  border-radius:47% 53% 44% 56% / 52% 58% 42% 48%}   /* 109s, -70s */

/* corse ampie: i corpi attraversano la fascia invece di oscillare attorno al punto
   di partenza, e nessuno resta ancorato a una zona. */
@keyframes goo1{
  0%  {transform:translate3d(-9vw,-5vh,0)  rotate(0deg)   scale(1)}
  26% {transform:translate3d(19vw,6vh,0)   rotate(88deg)  scale(1.3)}
  52% {transform:translate3d(4vw,20vh,0)   rotate(180deg) scale(.84)}
  79% {transform:translate3d(-16vw,8vh,0)  rotate(272deg) scale(1.14)}
  100%{transform:translate3d(-9vw,-5vh,0)  rotate(360deg) scale(1)}
}
@keyframes goo2{
  0%  {transform:translate3d(7vw,3vh,0)    rotate(0deg)    scale(1.06)}
  30% {transform:translate3d(-14vw,-7vh,0) rotate(-96deg)  scale(.84)}
  58% {transform:translate3d(12vw,-13vh,0) rotate(-190deg) scale(1.3)}
  82% {transform:translate3d(4vw,12vh,0)   rotate(-284deg) scale(.94)}
  100%{transform:translate3d(7vw,3vh,0)    rotate(-360deg) scale(1.06)}
}
@keyframes goo3{
  0%  {transform:translate3d(2vw,1vh,0)    rotate(0deg)   scale(.96)}
  26% {transform:translate3d(-17vw,12vh,0) rotate(102deg) scale(1.34)}
  54% {transform:translate3d(-6vw,24vh,0)  rotate(196deg) scale(.88)}
  80% {transform:translate3d(8vw,6vh,0)    rotate(288deg) scale(1.1)}
  100%{transform:translate3d(2vw,1vh,0)    rotate(360deg) scale(.96)}
}
@keyframes goo4{
  0%  {transform:translate3d(0,-2vh,0)     rotate(0deg)    scale(1.08)}
  32% {transform:translate3d(-19vw,9vh,0)  rotate(-88deg)  scale(.82)}
  60% {transform:translate3d(-9vw,-11vh,0) rotate(-184deg) scale(1.26)}
  84% {transform:translate3d(6vw,-4vh,0)   rotate(-276deg) scale(.98)}
  100%{transform:translate3d(0,-2vh,0)     rotate(-360deg) scale(1.08)}
}
@keyframes goo5{
  0%  {transform:translate3d(3vw,0,0)      rotate(0deg)   scale(1.02)}
  29% {transform:translate3d(20vw,-11vh,0) rotate(94deg)  scale(.85)}
  57% {transform:translate3d(2vw,-20vh,0)  rotate(188deg) scale(1.32)}
  81% {transform:translate3d(-13vw,-5vh,0) rotate(282deg) scale(.92)}
  100%{transform:translate3d(3vw,0,0)      rotate(360deg) scale(1.02)}
}

/* --- pausa fuori campo: il risparmio piu' grosso -------------------------- */
.bb-goo.is-idle .bl{animation-play-state:paused}

/* --- mobile: due corpi in meno, catena corta, niente lastra ne' grana ------
   Verificato su viewport 387x841. Le posizioni sono tarate sulla banda che la
   maschera tiene piena, cioe' fra il 10% e il 78% dell'altezza della fascia: con
   i valori di prima il 10-17% restava scoperto e la composizione stava tutta
   bassa. Ora i tre corpi coprono da circa il 6% al 75%, e in orizzontale uno sta
   centrato, uno sfora a destra e uno a sinistra.
   Ricordare che left/top sono percentuali del CONTENITORE, non dello schermo: la
   posizione a schermo e' -16 + left * 1.32. -------------------------------- */
@media(max-width:760px){
  /* tre corpi invece di cinque. Misure in vmin, che su schermo verticale segue il
     lato corto e tiene le proporzioni giuste. */
  .bl.b2,.bl.b4{display:none}
  .bl.b1{--w:74vmin;--h:66vmin;left:22%;top: 6%}
  .bl.b3{--w:66vmin;--h:60vmin;left:44%;top:30%}
  .bl.b5{--w:62vmin;--h:64vmin;left: 8%;top:52%}
  /* 8.4px = 12px di base per il fattore 0.70 */
  .bb-goo{filter:blur(8.4px) saturate(1.5)}
  /* catena minima: si salda e basta. Niente profondita' (quattro sfocature in
     meno per fotogramma) e NIENTE GRANA, perche' feTurbulence e' la primitiva piu'
     costosa di tutto il filtro e a questa scala non si vede: la grana e' fine, e
     sopra ci passa la sfocatura da 8.4px della fascia che la spiana comunque.
     Per rimetterla: copiare in #gooeyM le cinque primitive della grana che stanno
     in fondo a #gooeyGlassG (feTurbulence -> feBlend), dando al feColorMatrix il
     result="base" che il feComposite si aspetta. */
  .bb-goo-inner{filter:url(#gooeyM)}
  /* la sfocatura del velo e' l'operazione piu' costosa fuori dal filtro: qui
     l'ellisse e' piu' piccola in proporzione, quindi ne serve meno */
  .bb-veil{filter:blur(44px)}
}
/* schermo basso e largo: vmax seguirebbe la larghezza e i corpi diventerebbero
   enormi rispetto all'altezza utile */
@media(max-height:620px) and (min-width:761px){
  .bl.b1{--w:46vh;--h:42vh}
  .bl.b2{--w:40vh;--h:43vh}
  .bl.b3{--w:42vh;--h:38vh}
  .bl.b4{--w:38vh;--h:41vh}
  .bl.b5{--w:36vh;--h:37vh}
}

/* --- animazioni disattivate: composizione ferma --------------------------- */
@media(prefers-reduced-motion:reduce){
  .bl{animation:none!important}
  .bb-goo,.bb-veil{transition:none}
  .bb-goo.is-cond .bb-goo-inner,.bb-goo.is-cond,
  .bb-goo.is-decond .bb-goo-inner,.bb-goo.is-decond,
  .bb-goo.is-decond ~ .bb-veil{animation:none!important}
}
/* --- fine del fondo organico --------------------------------------------- */


/* ============================================================================
   v66 - RISTRUTTURAZIONE NEUMORFICA + FIX RESPONSIVE + TIMELINE
   Override additivi in coda allo stylesheet (vincono sul cascade).
   Linguaggio unico morbido: niente bordi neri / ombre a blocco neo-brutaliste,
   respiro coerente, timeline a gemma, social puliti.
   ============================================================================ */

/* --- 0. token neumorfici condivisi --- */
:root{
  --neu-r:22px;
  --neu-out:7px 7px 18px var(--neu-sh), -7px -7px 18px var(--neu-hi);
  --neu-out-lg:10px 10px 24px var(--neu-sh), -10px -10px 24px var(--neu-hi);
}

/* --- 1. RESPIRO: padding sezioni 140px + ancore sotto header fisso --- */
section{padding:140px 40px}
section[id]{scroll-margin-top:96px}
.choices h2,.showcase h2,.how h2,.safety h2,.profmap h2,.faq h2,.founder h2,.data h2{margin-bottom:22px}

/* --- 2. SISTEMA CARD UNIFICATO (neumorfico morbido) --- */
.choice-card,
.deck .choice-card,
.anti-card,
.step .body{
  background:var(--neu-bg);
  border:none;
  border-radius:var(--neu-r);
  box-shadow:var(--neu-out);
  transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease, filter .3s ease;
}
@media(hover:hover){
  .choice-card:hover,
  .step .body:hover{
    transform:translateY(-4px);
    box-shadow:var(--neu-out-lg);
    filter:brightness(1.015);
  }
  /* deck: hover STABILE (no traslazione, no affossamento) -> sottile profilo del colore
     del livello (velato) + Glow etereo verso l'ESTERNO (box-shadow morbida e sfumata) */
  .deck .choice-card:hover{
    transform:none;
    box-shadow:var(--neu-out),
               inset 0 0 0 1.5px color-mix(in srgb, var(--accent,var(--pink)) 55%, transparent),
               0 10px 30px color-mix(in srgb, var(--accent,var(--pink)) 12%, transparent);
    filter:none;
  }
  /* v75: anti-card (sicurezza) hover STABILE come le altre card neumorfiche ->
     outline velato + Glow esterno colorato per-card (--a), niente translate/zoom */
  .anti-card:hover{
    transform:none;
    box-shadow:var(--neu-out),
               inset 0 0 0 1.5px color-mix(in srgb, var(--a,var(--pink)) 55%, transparent),
               0 12px 32px color-mix(in srgb, var(--a,var(--pink)) 18%, transparent);
    filter:none;
  }
}
/* deck: niente spina/numeri/bordi; sfondo crema caldo di transizione che si fonde col
   gradiente .choices (no trasparenza), ombre neumorfiche intatte.
   L'accento per-livello pilota ora solo il Bloom interno su hover. */
/* v79.1: highlight neumorfico piu' CALDO/coerente col crema (era bianco freddo .95).
   --neu-out ridefinito LOCALMENTE con luce calda letterale (l'override di --neu-hi non
   basta: Chrome cuoce --neu-hi nel --neu-out di :root). Mantiene pieno il risalto. */
.deck .choice-card{border-top:none;background:#F9EFE6;
  --neu-out:7px 7px 18px var(--neu-sh), -7px -7px 18px rgba(255,248,237,.80);
  box-shadow:var(--neu-out);transition:all .35s cubic-bezier(0.25,1,0.5,1)}
.deck .choice-card:nth-child(6n+1){--accent:var(--pink)}
.deck .choice-card:nth-child(6n+2){--accent:var(--coral)}
.deck .choice-card:nth-child(6n+3){--accent:var(--teal)}
.deck .choice-card:nth-child(6n+4){--accent:var(--plum)}
.deck .choice-card:nth-child(6n+5){--accent:var(--salmon)}
.anti-card{border-radius:20px}
.step .body{border-radius:18px}

/* --- 3. STATISTICHE: 2 colonne (gia' attivo) + testo piu' disteso --- */
.band-body,.band-sub{max-width:38ch}

/* --- 4. TIMELINE "COME FUNZIONA": gemma neumorfica sferica, numero unico bianco --- */
.steps{padding-left:0}
.steps::before{left:58px;transform:translateX(-50%);width:24px;
  background:linear-gradient(180deg,#EDE7EC,#F6F1F4);
  box-shadow:-5px -5px 11px rgba(255,255,255,.9), 6px 7px 16px rgba(120,88,108,.30)}
.step{grid-template-columns:116px 1fr;gap:26px}
.step .dot{
  width:58px;height:58px;aspect-ratio:1;border-radius:50%;
  justify-self:center;transform:none;position:relative;z-index:5;
  display:flex;align-items:center;justify-content:center;overflow:visible;
  background:radial-gradient(circle at 34% 28%,
      color-mix(in srgb,var(--dot-c,var(--pink)) 55%,#fff) 0%,
      var(--dot-c,var(--pink)) 52%,
      color-mix(in srgb,var(--dot-c,var(--pink)) 72%,#000) 132%);
  box-shadow:
      5px 6px 13px rgba(120,88,108,.34),
      -5px -5px 12px rgba(255,255,255,.9),
      inset 2px 2px 4px rgba(255,255,255,.5),
      inset -3px -4px 8px rgba(0,0,0,.20);
  transition:transform .25s ease, box-shadow .25s ease;
}
.step .dot .dot-n{
  position:static;inset:auto;transform:none;mix-blend-mode:normal;
  font-family:var(--font);font-weight:700;font-size:24px;line-height:1;
  color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.30), 0 0 1px rgba(0,0,0,.25);z-index:2;
}
.step:nth-child(1) .dot{--dot-c:var(--pink)}
.step:nth-child(2) .dot{--dot-c:var(--coral)}
.step:nth-child(3) .dot{--dot-c:var(--teal)}
.step:nth-child(4) .dot{--dot-c:var(--plum)}
@media(hover:hover){.step:hover .dot{transform:scale(1.07)}}

/* --- 5. FOOTER · social: cerchi perfetti, hover pulito, niente underline --- */
footer .wrap .socials{display:flex;gap:13px;margin-top:22px;flex-wrap:wrap}
footer .wrap .socials a{
  width:40px;height:40px;flex:0 0 40px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  transition:background .25s ease, box-shadow .25s ease, transform .25s ease;
}
footer .wrap .socials a svg{width:17px;height:17px;fill:rgba(255,255,255,.72);transition:fill .25s ease}
footer .wrap .socials a::after{content:none;display:none}
footer .wrap .socials a:hover{
  transform:translateY(-2px);
  background:linear-gradient(135deg,var(--pink),var(--salmon));
  box-shadow:0 8px 18px rgba(231,77,107,.34);
}
footer .wrap .socials a:hover svg{fill:#fff}

/* --- 6. RESPONSIVE: header compatto + timeline allineata su mobile --- */
@media(max-width:880px){
  .step{grid-template-columns:84px 1fr;gap:16px}
  .step .dot{width:50px;height:50px}
  .step .dot .dot-n{font-size:20px}
  .steps::before{left:42px}
}
@media(max-width:760px){
  header{padding:14px 18px}
}
@media(max-width:480px){
  header .cta-mini{display:none}   /* la CTA vive nel menu hamburger su schermi molto stretti */
}

/* ============================================================================
   NEOMORPHIC RESONANCE WAVE ENGINE - PURIFIED V2 (v68 · ripristinato v1.1.8)
   ----------------------------------------------------------------------------
   Motore unico: l'onda SVG del mockup v88. Niente feSpecularLighting: rilievo
   neomorfico 2D puro (feMerge di ombra/luce asimmetriche + blur ampi).
   Stroke = identico al cream dello sfondo (zero color shift): il rilievo lo
   fanno ombra e luce del filtro, non il contrasto del tratto. Le onde si
   dissolvono prima dei bordi via mask-image sul contenitore.
   Il "motore A" a soli div/gradienti introdotto in v1.1.4 e' stato rimosso:
   l'effetto corretto e' questo. I tre ritocchi [v88] (riquadro del filtro
   fisso, niente will-change, visibility:hidden nella coda) lo rendono
   sostenibile anche su telefono: misurato su Pixel 8 Pro a 60Hz senza
   fotogrammi persi, margine ~4x (vedi documento di revisione).

   GATE FAIL-SAFE (v1.1.6, mantenuto): nel mockup l'animazione parte `paused`
   e il JS la accende con .in-view. Se il JS non gira, o se un ottimizzatore
   "unused CSS" (LiteSpeed/UCSS) elimina la regola con la classe assente
   dall'HTML sorgente, l'onda resta in pausa PER SEMPRE. Qui e' il contrario:
   parte RUNNING e il JS la mette in pausa fuori viewport con .rw-idle. Se
   quella regola sparisce si perde un'ottimizzazione, non l'effetto.
   ============================================================================ */
.reson{overflow-x:clip;overflow-y:visible}     /* v75: respiro verticale all'onda; v82: clip orizzontale
                                                  per impedire che l'onda (preserveAspectRatio slice)
                                                  sbordi ai lati creando larghezza fantasma */
.reson .inner{position:relative;z-index:2}     /* testo e bottoni sempre davanti */

.resonance-field{
  position:absolute;inset:-100px 0;z-index:0;pointer-events:none;  /* v75: extra respiro verticale */
  /* SPATIAL MASK: dissolve a 0% opacita' prima dei bordi (alto E basso) — valori del mockup v88 */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 95%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 15%, #000 70%, transparent 95%);
}
.rwave-svg{position:absolute;inset:0;width:100%;height:100%;display:block}
/* curva base neomorfica: stesso tono dello sfondo -> continuita' materica assoluta */
.rwave{
  fill:none;
  stroke:#FBF7F4;                 /* = var(--cream): zero contaminazione cromatica (come mockup) */
  stroke-linecap:round;
  /* V87.4: DUE onde concentriche che si espandono INSIEME (partono a ~1.3s l'una dall'altra),
     espansione LENTA e setosa; l'onda esterna svanisce per prima, poi quella interna;
     poi pausa, poi si ripete. V87.5: ciclo 16s, lineare e uniforme. */
  animation:rwExpand 16s linear infinite;
  animation-play-state:running;   /* fail-safe (v1.1.6): la pausa fuori vista la mette il JS con .rw-idle */
  /* [v88] niente will-change: nominava r, stroke-width e stroke-opacity, che NON
     sono proprieta' compositabili. will-change aiuta solo transform, opacity e
     filter; su queste non ottiene niente e chiede memoria per nulla. Che questa
     animazione ridisegni a ogni fotogramma e' inevitabile: r e stroke-width
     cambiano la geometria, quindi si passa per stile, layout SVG e pittura. */
}
.resonance-field.rw-idle .rwave{animation-play-state:paused}
/* seconda onda ~1.3s dopo la prima (k=14.7 sul ciclo 16s): i due cerchi concentrici si espandono insieme, vicini */
.rwave:nth-of-type(2){animation-delay:-14.7s}
@keyframes rwExpand{
  0%   {r:10px;  stroke-width:46px; stroke-opacity:0; visibility:visible}
  4%   {stroke-opacity:0.92}                                  /* fade-in morbido: la goccia tocca l'acqua */
  16%  {r:215px; stroke-width:32px; stroke-opacity:0.85}      /* r intermedi = crescita STEADY, non a scatto */
  35%  {r:415px; stroke-width:20px; stroke-opacity:0.55}
  50%  {r:555px; stroke-width:12px; stroke-opacity:0.22}      /* evapora piano mentre si allarga */
  /* [v88] visibility:hidden da qui alla fine. L'onda e' gia' a opacita' zero, ma il
     cerchio restava disegnato a raggio massimo per il resto del ciclo, cioe' il filtro
     con le sue due sfocature girava a vuoto su una sagoma trasparente per circa 6
     secondi su 16. Nascondendola, per il tratto in cui i due cerchi sono entrambi in
     pausa (circa il 36% del ciclo) il gruppo non ha niente da disegnare e il filtro non
     parte. La visibility si anima a scatti, non per interpolazione, quindi non c'e'
     nessuna dissolvenza in piu': cambia esattamente nell'istante indicato. */
  56%  {r:640px; stroke-width:8px;  stroke-opacity:0; visibility:hidden}
  100% {r:640px; stroke-width:8px;  stroke-opacity:0; visibility:hidden}
}
/* reduced motion: due anelli statici concentrici in rilievo (come le due gocce) */
@media(prefers-reduced-motion:reduce){
  .rwave{animation:none;stroke-opacity:.6}
  .rwave:nth-of-type(1){r:170px;stroke-width:26px}
  .rwave:nth-of-type(2){r:380px;stroke-width:12px}
}

/* ============================================================================
   [v1.1.9] RESONANCE — MOTORE MOBILE (<=768px)
   ----------------------------------------------------------------------------
   Perche' esiste: il motore SVG anima r/stroke-width, che cambiano la GEOMETRIA
   della sagoma -> il filtro rwNeuAsymmetric (2x feGaussianBlur + offset/flood/
   merge) viene rieseguito A OGNI FOTOGRAMMA. Su WebKit/Blink mobile il costo e'
   insostenibile (scatti). In piu', su schermi a densita' 3x, il riquadro fisso
   del filtro (1480x1480 unita' utente) supera i limiti di area interni del
   browser, che lo clampa/degrada: l'onda appariva "chiusa in un quadrato".
   Soluzione: sotto i 768px il motore SVG viene spento e due anelli DIV replicano
   tempi e raggi (scale = r/640 sui keyframe 10/215/415/555/640, ciclo 16s,
   seconda onda a -14.7s). Il rilievo neomorfico (ombra #5a5048 alto-sx + luce
   basso-dx, sui due bordi dell'anello) e' fatto di box-shadow con blur STATICO:
   viene rasterizzato una volta sola, poi l'animazione tocca SOLO transform e
   opacity e resta sul compositor. Il fade ai bordi e' invariato: lo fa il
   mask-image gia' presente su .resonance-field, identico al desktop.
   ============================================================================ */
.rwave-mob{display:none}
@media(max-width:768px){
  .resonance-field .rwave-svg{display:none}
  .rwave-mob{display:block;position:absolute;inset:0;overflow:hidden} /* clip = box del campo, come faceva `slice` sull'SVG */
  .rwave-mob i{
    position:absolute;left:50%;top:45%;   /* = cx 500 / cy 450 del viewBox 1000 */
    height:128%;aspect-ratio:1/1;         /* = diametro max 2*r640 su base 1000 */
    translate:-50% -50%;                  /* centratura FUORI da transform: scale() la sovrascriverebbe */
    border-radius:50%;
    border:22px solid #FBF7F4;            /* = var(--cream): zero color shift, come il motore SVG */
    box-shadow:
      -14px -16px 22px rgba(90,80,72,.22),
       16px  18px 24px rgba(255,255,255,.95),
      inset  14px  16px 20px rgba(90,80,72,.16),
      inset -12px -14px 18px rgba(255,255,255,.9);
    filter:blur(5px);                     /* STATICO: mai animato, si paga una volta */
    opacity:0;transform:scale(.04);
    will-change:transform,opacity;        /* qui SI' (a differenza del motore SVG): sono compositabili */
    animation:rwExpandM 16s linear infinite;
    animation-play-state:running;         /* stesso fail-safe v1.1.6: la pausa la mette il JS con .rw-idle */
  }
  .rwave-mob i:nth-child(2){animation-delay:-14.7s}
  .resonance-field.rw-idle .rwave-mob i{animation-play-state:paused}
}
/* stessi istanti del motore SVG; scale = r/640 */
@keyframes rwExpandM{
  0%   {transform:scale(.04);opacity:0}
  4%   {opacity:.9}
  16%  {transform:scale(.34);opacity:.8}
  35%  {transform:scale(.65);opacity:.5}
  50%  {transform:scale(.87);opacity:.2}
  56%,100%{transform:scale(1);opacity:0}
}
/* reduced motion: due anelli statici, come il fallback del motore SVG (r170/r380) */
@media(prefers-reduced-motion:reduce){
  .rwave-mob i{animation:none;opacity:.55}
  .rwave-mob i:nth-child(1){transform:scale(.27)}
  .rwave-mob i:nth-child(2){transform:scale(.6)}
}

/* Logo reveal (breath-bridge): testo/logo in primo piano, sfondo pulito */
#breathBridge .breath-el{z-index:2}

/* ============================================================================
   COME FUNZIONA — reset v85
   - display = CLONE HERO (.hero-visual) con 4 <img> reali (switch istantaneo)
   - onde concentriche neumorfiche PROFONDE sul panna
   - 4 macro-gocce NATIVE (.coppetta-macro-container/.goccia-macro-ottica di
     "Sicurezza", senza icona) disposte a SEMICERCHIO che abbraccia il display
   - NESSUNA linea di collegamento
   - tipografia nativa "5 Scelte" (niente CAPS/spaziatura forzata; accento .em)
   ============================================================================ */
.how{background:linear-gradient(180deg,var(--cream) 0%,var(--cream) 56%,var(--aqua) 100%);padding:150px 40px 172px}
/* (cleanup 2026-07-10: rimosso CSS morto .hf-* del vecchio "Come funziona" v85, ora sostituito da .hiw-*) */



/* ============================================================================
   Ottimizzazioni mobile (WP) — conservative, nessun cambiamento di layout
   ============================================================================ */
@media(max-width:768px){
  /* v1.1.3 FIX: le variabili erano su :root, ma .hero-visual le dichiara su di
     sé -> la dichiarazione dell'elemento vinceva sempre e su mobile si
     caricavano le immagini pesanti. Ora l'override colpisce .hero-visual. */
  .hero-visual{
    --url-ui-light:url('../img/ui-app-light-mobile.webp');
    --url-ui-dark:url('../img/ui-app-dark-mobile.webp');
  }
}
/* niente flash grigio al tap su iOS/Android; niente doppi-tap zoom sui controlli */
a,button,.vh-player,.pmf,.stats-toggle{-webkit-tap-highlight-color:transparent}
button,.pm-cta,.stats-toggle,.faq-q{touch-action:manipulation}
/* le schermate lunghe sotto la piega non forzano il layout dell'intera pagina */
@media(max-width:768px){
  .site-footer, footer{content-visibility:auto;contain-intrinsic-size:1px 900px}
}

/* ============================================================================
   v1.1.3 — FIX MOBILE: centratura, overflow, form email, footer
   Blocco in coda allo stylesheet: vince sul cascade (stessa specificità,
   dichiarato dopo). Risolve i 4 bug segnalati su viewport telefono.
   ============================================================================ */

/* --- A. TRACCE GRIGLIA A PROVA DI OVERFLOW ---
   Il bug del "telefono non centrato": la signup-form inline (input+bottone,
   min-content ~411px) sfondava la colonna 1fr della hero su schermi ~390px,
   allargando TUTTA la colonna e decentrando il mockup. minmax(0,1fr) permette
   alla traccia di comprimersi sotto il min-content dei contenuti. */
@media(max-width:880px){
  .hero .wrap,.choices .head,.cards-6,.showcase .grid,.founder .inner{grid-template-columns:minmax(0,1fr)}
}

@media(max-width:760px){

  /* --- B. HERO: tutto centrato, mockup incluso --- */
  .hero .wrap>div:first-child{text-align:center}
  .hero h1{margin-left:auto;margin-right:auto}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero .cta-row{align-items:center!important}   /* vince sull'inline style flex-start */
  .proof-chips{justify-content:center}

  /* --- C. FORM EMAIL: impilata, mai più larga dello schermo, tap-friendly --- */
  .signup-form{flex-direction:column;gap:10px;padding:10px;border-radius:28px;max-width:100%;width:100%}
  .signup-form input{width:100%;text-align:center;padding:12px 14px}
  .signup-form button{width:100%;padding:14px 20px}

  /* --- D. TESTI E BLOCCHI CENTRATI IN GENERALE ---
     Le testate di sezione senza un proprio text-align:center (choices, safety,
     roadmap) si allineano alle altre; card e founder seguono. */
  section .head{text-align:center}
  section .head>*{margin-left:auto;margin-right:auto}
  .deck .choice-card{text-align:center}
  .founder .inner{text-align:center}
  .founder p{margin-left:auto;margin-right:auto}
  .founder .quote{border-left:none;border-top:3px solid var(--pink);padding:18px 6px 0;max-width:46ch;margin-left:auto;margin-right:auto}
  .founder .yt-trigger{margin-left:auto;margin-right:auto}
  .coun-strip{text-align:center}

  /* --- E. FOOTER MOBILE: colonna singola, centrato, dentro i margini ---
     Bug di cascata: "footer .wrap{grid-template-columns:1.5fr 1fr 1fr}" in
     coda al CSS vinceva sulla media query 880px (1fr) -> 3 colonne compresse
     che uscivano a destra. Qui, ancora più in coda, vince il layout mobile. */
  footer{padding:64px 22px 34px}
  footer .wrap{grid-template-columns:minmax(0,1fr);gap:42px;text-align:center}
  footer .wrap>div{min-width:0}
  footer .logo-ftr svg{margin-left:auto;margin-right:auto}
  footer .wrap>div:first-child p.tagline{margin-left:auto;margin-right:auto}
  footer .socials{justify-content:center;flex-wrap:wrap}
  footer .wrap a{margin-left:auto;margin-right:auto}   /* i link width:fit-content si centrano */
  footer .wrap a:hover{transform:none}                 /* niente slittamento laterale su touch */
  footer h4{margin-bottom:14px}
  footer .copy{text-align:center;margin-top:44px;padding-top:22px}
}

/* ==========================================================================
   v1.1.11 · revisione del 20 ottobre 2026
   ========================================================================== */
/* 8.3 Blocco Coun: stesso contenitore del portafoglio dell'app (gradiente, angoli,
   ombra, testo bianco); icona dei Coun dentro il disco bianco 48/28. Niente bordo. */
.coun-strip{background:linear-gradient(to bottom right,#41D3FF 0%,#1E7FD8 55%,#2A3E9E 100%);
  border-radius:30px;box-shadow:0 14px 30px rgba(30,127,216,.35);border:0;color:#fff}
.coun-strip h3{color:#fff;font-weight:500;display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:12px}
.coun-strip p{color:#fff}
.coun-disc{flex:none;width:48px;height:48px;border-radius:50%;background:#fff url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNyAyNyI+PHBhdGggZD0iTTAuMDEgMTMuMjFDMC4wMSAyMC41MSA1LjkyIDI2LjQyIDEzLjIyIDI2LjQyQzE3LjEgMjYuNDIgMjAuNTggMjQuNzUgMjMgMjIuMUMyMS41NiAyMy40OSAxOS43OCAyNC4zMSAxNy44NSAyNC4zMUMxMy4xMSAyNC4zMSA5LjI2IDE5LjM0IDkuMjYgMTMuMjFDOS4yNiA3LjA5IDEzLjExIDIuMTIgMTcuODUgMi4xMkMxOS44IDIuMTIgMjEuNjEgMi45NiAyMy4wNSA0LjM4QzIwLjYzIDEuNjkgMTcuMTIgMCAxMy4yMiAwQzUuOTIgMCAwLjAxIDUuOTIgMC4wMSAxMy4yMVoiIGZpbGw9IiM0MUQzRkYiLz48cGF0aCBkPSJNMC4wMSAxMy4yMkMwLjAxIDIwLjUyIDUuOTIgMjYuNDMgMTMuMjIgMjYuNDNDMjAuNTIgMjYuNDMgMjYuNDMgMjAuNTIgMjYuNDMgMTMuMjJDMjYuNDMgOS4zNyAyNC43OCA1LjkgMjIuMTUgMy40OEMyMy41MiA0LjkxIDI0LjMyIDYuNjggMjQuMzIgOC41OUMyNC4zMiAxMy4zMyAxOS4zNSAxNy4xOCAxMy4yMiAxNy4xOEM3LjEgMTcuMTggMi4xMyAxMy4zMyAyLjEzIDguNTlDMi4xMyA2LjY1IDIuOTYgNC44NSA0LjM3IDMuNDFDMS42OSA1LjgzIDAuMDEgOS4zMyAwLjAxIDEzLjIyWiIgZmlsbD0iI0ZGNDE2NyIvPjxwYXRoIGQ9Ik0zLjI5IDQuNDlDNC43NSAzIDYuNTkgMi4xMiA4LjU5IDIuMTJDMTMuMzQgMi4xMiAxNy4xOCA3LjA5IDE3LjE4IDEzLjIxQzE3LjE4IDE5LjM0IDEzLjM0IDI0LjMxIDguNTkgMjQuMzFDNi42MSAyNC4zMSA0LjggMjMuNDUgMy4zNCAyMkM1Ljc2IDI0LjcxIDkuMjkgMjYuNDIgMTMuMjEgMjYuNDJDMjAuNTEgMjYuNDIgMjYuNDIgMjAuNTEgMjYuNDIgMTMuMjFDMjYuNDIgNS45MiAyMC41MSAwIDEzLjIxIDBDOS4yNiAwIDUuNzEgMS43NCAzLjI5IDQuNDlaTTAgMTMuMjFDMCAxMy43MiAwLjAzIDE0LjIyIDAuMDggMTQuNzJDMC4wMyAxNC4yMyAwIDEzLjcyIDAgMTMuMjFDMCAxMi42OSAwLjAzIDEyLjE4IDAuMDkgMTEuNjdDMC4wMyAxMi4xOCAwIDEyLjY5IDAgMTMuMjFaIiBmaWxsPSIjRkY2RjAwIi8+PC9zdmc+") center/28px 28px no-repeat}
/* 5.1 Pillola Progetti: colore al passaggio; niente fumetto vuoto finche' manca il testo */
.reson .kind:nth-child(4):hover{background:var(--plum);box-shadow:0 10px 24px rgba(153,75,118,.32)}
.reson .kind:not([data-tip])::after{display:none}
/* 16.1 Il "?" del titolo finale non viene piu' tagliato dal background-clip:text */
.dive h2 .blue{padding-right:.08em;margin-right:-.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* 11.3 "Niente sparizioni": il blocco largo si riempie tutto, niente vuoto a destra */
.anti-grid .safety-card:last-child .card-content p{max-width:none}
/* 0.8-0.9, 1.1-1.2, 8.1, 9.x  Schermate e video veri dell'app (1344x2992).
   Cornice = solo impaginazione: angoli al 10,4% della larghezza, via di mezzo fra Pixel (6,8%)
   e iPhone (~14%); in verticale 10,4% x 1344/2992. Il bordo del vetro (::after) segue lo stesso raggio.
   niente isola, niente zoom (lo scale tagliava ora e batteria). */
.hero-visual,.hiw-phone,.m-phone{aspect-ratio:1344/2992;border-radius:10.4%/4.672%}
.hero-visual .ui-shot,.hero-visual .ui-glass-specular,.hero-visual .ui-glass-edge,
.hero-visual::after,.hiw-phone::after{border-radius:10.4%/4.672%}
.hero-visual .ui-shot{overflow:hidden;background-image:none}
.hero-visual .ui-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-visual.no-video .ui-dark{background-image:var(--url-ui-dark)}
.hero-visual.no-video .ui-light{background-image:var(--url-ui-light)}
.hero-visual.no-video .ui-vid{display:none}
.shot .hero-visual .v-shot,.hiw-phone .hshot,.m-phone .hshot{border-radius:10.4%/4.672%;transform:none}
/* Didascalie piccole sotto schermate e video: "Anteprima..." e, dove c'e' la ragazza, "Profilo dimostrativo..." */
.app-cap{font-size:11.5px;line-height:1.5;color:var(--ink-soft);opacity:.85;text-align:center;margin:12px auto 0;max-width:300px;font-weight:400}
.shot .app-cap{margin:-2px auto 0;min-height:3em}
.app-cap-hero{margin-top:18px}
.hcaps{position:relative}
.hcaps .hcap{margin:0 auto;transition:opacity .45s ease}
.hcaps .hcap:not(.on){position:absolute;left:0;right:0;opacity:0;pointer-events:none}
.hiw-caps{position:absolute;right:calc(65.35% + 16px);bottom:15.83%;width:36%;z-index:3}
.hiw-caps .hcap{text-align:right;margin:0 0 0 auto}
.hiw-caps .hcap:not(.on){top:auto;bottom:0}
.m-caps{margin-top:10px}
@media(min-width:901px){.m-caps{display:none}}
@media(max-width:900px){.hiw-caps{display:none}}

/* 17.3 · v1.1.16: con "Inizio" il menu completo chiede ~1150px; sotto i 1180px passa all'hamburger
   (prima andava a capo e schiacciava il logo fra 880 e ~1100px). Il logo non si restringe mai. */
header .logo{flex:none}
@media(max-width:1180px){
  header nav{display:none}
  .burger{display:flex}
  .hdr-right .lang-select{display:none}
}
/* Note 23/10 · consensi della lista d'attesa: due caselle non spuntate sotto le tre form */
.wl-consent{margin:14px 0 0;max-width:520px;text-align:left;font-size:12.5px;line-height:1.45;color:var(--ink-soft)}
.wl-check{display:flex;gap:9px;align-items:flex-start;margin:0 0 8px;cursor:pointer;font-weight:400}
.wl-check input{flex:none;width:16px;height:16px;margin:1px 0 0;accent-color:var(--pink);cursor:pointer}
.wl-policy{margin:2px 0 0 25px;font-size:12px}
.wl-policy a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.cta-band .wl-consent{margin-left:auto;margin-right:auto}
.dive .form{flex-direction:column;align-items:center}
.dive .wl-consent{color:rgba(255,255,255,.8)}
/* Piè di pagina: dati della società */
footer .copy .co-data{display:block;margin-top:6px;opacity:.8}
/* 13.2 player YouTube del fondatore */
.yt-frame .yt-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:18px}
/* 14.2 · la tappa "Sei qui" e' sopra l'onda e ha tre righe: piu' spazio sotto il sottotitolo */
.rm-stage{margin-top:100px}
.rm-label.is-now{width:190px}
/* v1.1.20 · "Iscriviti" porta al modulo della hero e lo lascia a meta' schermo, non sotto l'intestazione */
#heroForm{scroll-margin-top:40vh}