/* MIO ENERGY - Manrope self-hosted (subset latin) */
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/Manrope-300.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/Manrope-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/Manrope-600.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   MIO ENERGY — DESIGN TOKENS (mio-tokens.css)  ·  v3 SynapseOS
   ------------------------------------------------------------
   Derivato da "SynapseOS | Neural Wellness" DESIGN.md:
   dark glass, accento teal #14B8A6, Manrope 300, radius
   12/16/32/9999, blur 24/12/40, motion expressive (GSAP).
   File autosufficiente, condivisibile con WordPress/Elementor.
   Importalo PRIMA di qualsiasi CSS di componente.
   ============================================================ */

:root{

  /* ── COLORI · ruoli (dal DESIGN.md) ─────────────────────── */
  --mio-primary:     #14B8A6;   /* teal — accento, azioni, glow        */
  --mio-secondary:   #312E81;   /* indigo — enfasi di supporto         */
  --mio-tertiary:    #134E4A;   /* teal profondo — contrasti riservati */
  --mio-neutral:     #0C121E;   /* fondazione navy                     */
  --mio-night-deep:  #080C16;   /* fondo pagina più profondo           */

  /* alias storici usati dai componenti */
  --mio-teal:        var(--mio-primary);
  --mio-mint:        #5EEAD4;   /* teal-300: highlight e glow          */
  --mio-blue-deep:   var(--mio-secondary);
  --mio-night:       var(--mio-neutral);
  --mio-ink-on-cta:  #06201C;   /* testo sopra il bottone primario     */

  /* azione (CTA primarie, submit, checkbox) */
  --mio-action:      var(--mio-primary);
  --mio-action-hi:   #2DD4BF;
  --mio-glow-action:      0 0 8px 0 rgba(94,234,212,.6);
  --mio-glow-action-soft: 0 0 8px 0 rgba(94,234,212,.35);

  /* ── COLORI · testo (dal DESIGN.md) ─────────────────────── */
  --mio-text-0:      #F1F5F9;   /* titoli in evidenza (riga bianca)    */
  --mio-text-1:      #E2E8F0;   /* testo forte                         */
  --mio-text-2:      #94A3B8;   /* primario di lettura (slate-400)     */
  --mio-text-3:      #7B8BA0;   /* secondario / micro-label (AA ≥4.5 su navy;
                                    il #64748B del MD non passa il contrasto) */

  /* ── COLORI · semantici ─────────────────────────────────── */
  --mio-success:     #34D399;
  --mio-warn:        #FBBF24;
  --mio-error:       #F87171;

  /* ── BORDI / HAIRLINE (0.67px, bianco a bassa opacità) ──── */
  --mio-border-w:        0.67px;
  --mio-hairline:        rgba(255,255,255,.06);
  --mio-hairline-soft:   rgba(255,255,255,.04);
  --mio-border-soft:     rgba(255,255,255,.1);
  --mio-border-frame:    rgba(255,255,255,.14);
  --mio-border-teal:     rgba(20,184,166,.3);
  --mio-border-mint:     rgba(94,234,212,.4);
  --mio-border-error:    rgba(248,113,113,.55);

  /* ── SUPERFICI · glass (ricette dal DESIGN.md) ──────────── */
  --mio-surface-glass:   rgba(12,18,30,.8);    /* card 32 / pannelli   */
  --mio-surface-card:    rgba(12,18,30,.55);   /* card 16              */
  --mio-surface-ghost:   rgba(255,255,255,.05);
  --mio-surface-input:   rgba(8,12,22,.6);
  --mio-surface-drop:    rgba(20,184,166,.06);
  --mio-blur-sm:         12px;
  --mio-blur-md:         24px;
  --mio-blur-lg:         40px;

  /* ── GRADIENTI ──────────────────────────────────────────── */
  /* shell gradient-border (dal MD): profondità scura verso il basso */
  --mio-grad-shell:  linear-gradient(rgba(8,12,22,.4), rgba(8,12,22,.8), rgb(8,12,22));
  --mio-grad-shell-hair: linear-gradient(135deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.02) 55%, rgba(255,255,255,0) 100%);
  --mio-grad-text:   linear-gradient(100deg, #5EEAD4 0%, #14B8A6 55%, #6D6AC8 115%);
  --mio-grad-panel:  linear-gradient(180deg, rgba(14,21,34,.86) 0%, rgba(10,15,26,.92) 100%);
  --mio-grad-bars:   linear-gradient(180deg, #5EEAD4, #14B8A6 70%, #312E81);
  --mio-grad-page:   linear-gradient(180deg, #080C16 0%, #0C121E 100%);
  /* fondo quasi nero, niente fog uniforme: solo un alone viola
     direzionale alto-dx come nel reference */
  --mio-grad-ambient:
    radial-gradient(70% 55% at 84% -6%, rgba(49,46,129,.32) 0%, rgba(49,46,129,.08) 40%, rgba(5,8,15,0) 62%),
    linear-gradient(180deg, #05080F 0%, #070B14 100%);

  /* ── OMBRE / GLOW (le ricette del sistema) ──────────────── */
  --mio-shadow-deep:     0 25px 50px -12px rgba(0,0,0,.25);
  --mio-glow-1:          0 0 8px 0 rgba(94,234,212,.35);
  --mio-glow-2:          0 0 8px 0 rgba(94,234,212,.6);
  --mio-glow-3:          0 0 40px 0 rgba(20,184,166,.12);
  --mio-glow-cta:        var(--mio-glow-action-soft);
  --mio-glow-cta-hover:  var(--mio-glow-action);
  --mio-glow-ghost:      var(--mio-glow-1);
  --mio-glow-panel:      var(--mio-shadow-deep);
  --mio-glow-dot:        0 0 8px 2px rgba(94,234,212,.5);
  --mio-glow-text:       0 0 14px rgba(20,184,166,.55);
  --mio-drop-2:          drop-shadow(0 0 20px rgba(20,184,166,.30));
  --mio-drop-3:          drop-shadow(0 0 40px rgba(20,184,166,.10));

  /* ── RADIUS (famiglia 12/16/32/9999 · bottoni PILL) ─────── */
  --mio-radius-btn:     9999px;
  --mio-radius-btn-sm:  9999px;
  --mio-radius-shell:   32px;
  --mio-radius-inner:   31px;
  --mio-radius-card:    16px;
  --mio-radius-glass:   32px;
  --mio-radius-field:   12px;
  --mio-radius-chip:    12px;
  --mio-radius-focus:   12px;
  --mio-radius-badge:   9999px;

  /* ── TIPOGRAFIA · solo Manrope, self-hosted ─────────────── */
  --mio-font-display: 'Manrope', system-ui, sans-serif;
  --mio-font-body:    'Manrope', system-ui, sans-serif;
  --mio-font-mono:    'Manrope', system-ui, sans-serif; /* alias legacy */

  /* scala (display-lg 72/300/−0.025em · body-md 14/300)      */
  --mio-fw-display: 300;
  --mio-fw-body:    300;
  --mio-fw-strong:  600;
  --mio-fs-hero:   clamp(46px, 5.6vw, 78px);
  --mio-lh-hero:   1.05;
  --mio-ls-hero:   -.025em;
  --mio-fs-h2:     clamp(28px, 3vw, 40px);
  --mio-fs-h3:     20px;
  --mio-fs-lede:   17px;
  --mio-fs-body:   14px;
  --mio-lh-body:   1.625;
  --mio-fs-nav:    14px;
  --mio-fs-ui:     14px;
  --mio-ls-label:  0em;
  --mio-fs-small:  12.5px;
  --mio-fs-tiny:   11.5px;
  --mio-fs-micro:  11px;

  /* tracking per label uppercase di supporto */
  --mio-track-logo:  .42em;
  --mio-track-wide:  .3em;
  --mio-track-mono:  .26em;
  --mio-track-label: .22em;
  --mio-track-tick:  .14em;

  /* ── MOTION (150 / 300 / 500 · reveal 1000-2000 · expressive) ─ */
  --mio-ease:    cubic-bezier(.4, 0, .2, 1);
  --mio-spring:  cubic-bezier(.34, 1.56, .64, 1);
  --mio-dur-1:   .15s;
  --mio-dur-2:   .3s;
  --mio-dur-25:  .5s;
  --mio-dur-3:   1s;
  --mio-dur-dissolve: .5s;

  /* ── LAYOUT (ritmo base 4px) ────────────────────────────── */
  --mio-space-1:    4px;
  --mio-space-2:    8px;
  --mio-space-3:    12px;
  --mio-space-4:    16px;
  --mio-space-5:    20px;
  --mio-space-6:    24px;
  --mio-space-8:    32px;
  --mio-space-9:    36px;
  --mio-section:    36px;
  --mio-section-lg: 96px;
  --mio-card-pad:   36px;
  --mio-card-pad-sm:20px;
  --mio-max-w:      1400px;
  --mio-gutter:     56px;
  --mio-gutter-sm:  24px;
}
/* ============================================================
   MIO ENERGY — main.css  ·  v2 (design system infra-premium)
   Richiede: assets/css/mio-tokens.css. Zero valori hardcoded:
   colori, radius, font, blur e timing arrivano dai token.
   ============================================================ */

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--mio-font-body);color:var(--mio-text-1);
  font-size:var(--mio-fs-body);line-height:var(--mio-lh-body);
  background:var(--mio-night);overflow-x:hidden;-webkit-font-smoothing:antialiased;
  touch-action:manipulation;
}
::selection{background:var(--mio-border-teal);color:var(--mio-text-1)}
a:focus-visible,button:focus-visible,input:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--mio-secondary);outline-offset:3px;border-radius:var(--mio-radius-focus);
}

/* ============ SFONDO AMBIENTALE ============ */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--mio-grad-ambient)}
/* canvas fasci: fixed z-0, mix-blend screen; opacity piena nell'hero
   (la riduzione nelle sezioni la fa uGlobal via ScrollTrigger) */
#field{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:1;mix-blend-mode:screen}
/* fallback DOM statico (no WebGL / reduced-motion): poster pre-renderizzato */
.field-fallback{
  position:fixed;inset:0;z-index:0;pointer-events:none;display:none;
  background:url('../img/beams-poster.jpg') center / cover no-repeat;
  opacity:.3;  /* fallback tenue: nell'hero c'è il video approvato */
}
@media (max-width:767px){
  .field-fallback{background-image:url('../img/beams-poster-m.jpg')}
}
body.no-webgl .field-fallback{display:block}
body.no-webgl #field{display:none}

/* ============ SFONDO HERO · video approvato ============ */
.hero-bg{
  position:absolute;top:0;left:0;right:0;height:min(112vh, 1200px);
  z-index:0;overflow:hidden;pointer-events:none;
}
.hero-bg video{width:100%;height:100%;object-fit:cover;display:block}
/* overlay LATERALE: testo su scuro a sinistra, video protagonista a destra */
.hero-bg::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,
    rgba(4,7,13,.72) 0%, rgba(4,7,13,.25) 50%, rgba(4,7,13,.15) 100%);
}
/* raccordo col fondo pagina */
.hero-bg::before{
  content:'';position:absolute;left:0;right:0;bottom:0;height:140px;z-index:1;
  background:linear-gradient(180deg, rgba(5,8,15,0), #05080F);
}
@media (prefers-reduced-motion:reduce){
  .hero-bg video{display:none}
  .hero-bg{background:url('../video/mio-bg-poster.jpg') center / cover no-repeat}
}

/* ============ CURSORE CUSTOM ============ */
.cursor-dot,.cursor-ring{
  position:fixed;top:0;left:0;z-index:9999;pointer-events:none;border-radius:50%;
  transform:translate(-50%,-50%);opacity:0;transition:opacity var(--mio-dur-2) var(--mio-ease);
  will-change:transform;
}
.cursor-dot{width:7px;height:7px;background:var(--mio-primary);box-shadow:var(--mio-glow-2)}
.cursor-ring{
  width:38px;height:38px;border:1.5px solid var(--mio-border-teal);
  transition:width var(--mio-dur-2) var(--mio-spring),height var(--mio-dur-2) var(--mio-spring),
             border-color var(--mio-dur-1) var(--mio-ease),opacity var(--mio-dur-2) var(--mio-ease),
             background var(--mio-dur-1) var(--mio-ease);
}
body.cursor-on{cursor:none}
body.cursor-on a,body.cursor-on button,body.cursor-on input,body.cursor-on label{cursor:none}
body.cursor-on .cursor-dot,body.cursor-on .cursor-ring{opacity:1}
body.cursor-on.cursor-hover .cursor-ring{width:62px;height:62px;border-color:var(--mio-border-mint);background:var(--mio-surface-drop)}
body.cursor-on.cursor-down .cursor-ring{width:26px;height:26px}

.wrap{position:relative;z-index:2;max-width:var(--mio-max-w);margin:0 auto;padding:0 var(--mio-gutter)}

/* ============ LOGO · asset ufficiali ============ */
.nav-lockup{height:54px;width:auto;display:block}
html.mio-intro-pending .nav-lockup{visibility:hidden}
.logo{
  position:relative;display:inline-flex;align-items:center;
  text-decoration:none;color:var(--mio-text-1);cursor:pointer;user-select:none;
  transition:filter var(--mio-dur-2) var(--mio-ease);
}
/* scrim scuro ancorato all'angolo del viewport: copre il watermark
   cotto nel video hero; il logo nav ci si appoggia sopra */
header::before{
  content:'';position:absolute;top:0;left:0;width:420px;height:150px;
  pointer-events:none;
  background:radial-gradient(130% 130% at 0% 0%, rgba(4,7,13,.98) 46%, rgba(4,7,13,.55) 68%, rgba(4,7,13,0) 83%);
}
.logo:hover{filter:drop-shadow(0 0 10px rgba(20,184,166,.5))}

/* ============ HEADER / NAV ============ */
header{position:relative;z-index:20}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--mio-space-6);padding:28px 0}

.nav-menu{display:flex;gap:var(--mio-space-1);list-style:none;align-items:center}
.nav-item{position:relative}
.nav-link{
  display:inline-flex;align-items:center;gap:7px;
  background:none;border:none;font-family:var(--mio-font-body);
  color:#FFFFFF;text-decoration:none;
  font-size:var(--mio-fs-nav);font-weight:500;letter-spacing:var(--mio-ls-label);
  padding:10px 12px;border-radius:var(--mio-radius-btn-sm);cursor:pointer;
  transition:color var(--mio-dur-1) var(--mio-ease);
}
.nav-link .chev{transition:transform var(--mio-dur-2) var(--mio-ease);flex:none}
.nav-item:hover .nav-link,.nav-item:focus-within .nav-link{color:var(--mio-primary)}
.nav-item:hover .chev,.nav-item:focus-within .chev{transform:rotate(180deg)}

/* dropdown desktop: fondo solido leggibile sopra il video */
.drop{
  position:absolute;top:100%;left:0;min-width:250px;padding:10px;
  z-index:30;
  background:rgba(5,11,18,.92);border:var(--mio-border-w) solid var(--mio-border-soft);
  border-radius:var(--mio-radius-field);
  backdrop-filter:blur(var(--mio-blur-md));-webkit-backdrop-filter:blur(var(--mio-blur-md));
  box-shadow:var(--mio-shadow-deep);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--mio-dur-2) var(--mio-ease),transform var(--mio-dur-2) var(--mio-ease),visibility 0s linear var(--mio-dur-2);
}
.nav-item:hover .drop,.nav-item:focus-within .drop{
  opacity:1;visibility:visible;transform:translateY(4px);transition-delay:0s;
}
/* ponte anti-gap: il puntatore non "cade" tra trigger e pannello */
.drop::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}
/* le ultime voci aprono allineate a destra per non uscire dal viewport */
.nav-item:nth-last-child(-n+2) .drop{left:auto;right:0}
.drop a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 12px;border-radius:var(--mio-radius-chip);
  color:var(--mio-text-1);opacity:.75;text-decoration:none;
  font-size:var(--mio-fs-ui);font-weight:500;letter-spacing:var(--mio-ls-label);
  transition:opacity var(--mio-dur-1) var(--mio-ease),background var(--mio-dur-1) var(--mio-ease);
  white-space:nowrap;
}
.drop a:hover,.drop a:focus-visible{opacity:1;background:var(--mio-surface-drop)}
.drop a .ext{color:var(--mio-text-3);font-size:var(--mio-fs-small)}
.drop hr{border:none;border-top:var(--mio-border-w) solid var(--mio-hairline);margin:8px 4px}

.nav-cta{display:flex;gap:var(--mio-space-3);align-items:center}
.nav-cta .btn,.nav-link{white-space:nowrap}

/* hamburger */
.burger{
  display:none;background:none;border:var(--mio-border-w) solid var(--mio-border-soft);
  border-radius:var(--mio-radius-chip);padding:10px;cursor:pointer;
  width:44px;height:44px;align-items:center;justify-content:center;
}
.burger svg{display:block}
.burger .l{stroke:var(--mio-text-1);stroke-width:1.8;stroke-linecap:round}

/* ============ MENU MOBILE ============ */
.mobile-menu{
  position:fixed;inset:0;z-index:60;background:var(--mio-night);
  display:none;flex-direction:column;overflow-y:auto;
  padding:0 var(--mio-gutter-sm) 40px;
}
.mobile-menu.open{display:flex}
.mobile-menu::before{content:'';position:fixed;inset:0;background:var(--mio-grad-ambient);pointer-events:none}
.mm-head{position:relative;display:flex;align-items:center;justify-content:space-between;padding:28px 0 10px}
.mm-close{
  background:none;border:var(--mio-border-w) solid var(--mio-border-soft);border-radius:var(--mio-radius-chip);
  width:44px;height:44px;cursor:pointer;color:var(--mio-text-1);
  display:flex;align-items:center;justify-content:center;
}
.mm-acc{position:relative;border-bottom:var(--mio-border-w) solid var(--mio-hairline)}
.mm-acc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  background:none;border:none;cursor:pointer;padding:19px 4px;
  font-family:var(--mio-font-display);font-size:var(--mio-fs-h3);font-weight:600;
  letter-spacing:var(--mio-ls-hero);color:var(--mio-text-1);
}
.mm-acc-btn .chev{transition:transform var(--mio-dur-2) var(--mio-ease)}
.mm-acc-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.mm-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mio-dur-2) var(--mio-ease)}
.mm-acc-btn[aria-expanded="true"] + .mm-acc-body{grid-template-rows:1fr}
.mm-acc-body > div{overflow:hidden}
.mm-acc-body a{
  display:block;padding:12px 4px;color:var(--mio-text-1);opacity:.7;text-decoration:none;
  font-size:15px;min-height:44px;
}
.mm-acc-body a:last-child{padding-bottom:22px}
.mm-cta{position:relative;display:flex;flex-direction:column;gap:var(--mio-space-3);padding-top:28px}
.mm-cta .btn{justify-content:center;min-height:48px}

/* ============ BOTTONI (radius 12 · niente pill) ============ */
.btn{
  border-radius:var(--mio-radius-btn);padding:14px 24px;text-decoration:none;border:none;
  font-family:var(--mio-font-body);font-size:var(--mio-fs-ui);font-weight:600;
  letter-spacing:var(--mio-ls-label);
  display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  transition:box-shadow var(--mio-dur-2) var(--mio-ease),background var(--mio-dur-1) var(--mio-ease),
             border-color var(--mio-dur-1) var(--mio-ease),opacity var(--mio-dur-1) var(--mio-ease);
  will-change:transform;
}
.btn-primary{
  color:var(--mio-ink-on-cta);
  background:var(--mio-action);
  box-shadow:var(--mio-glow-action-soft);
}
.btn-primary:hover{box-shadow:var(--mio-glow-action);background:var(--mio-action-hi)}
.btn-primary:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}
.btn-secondary{
  color:var(--mio-text-1);background:var(--mio-surface-ghost);
  border:var(--mio-border-w) solid var(--mio-border-soft);border-radius:var(--mio-radius-btn-sm);
  backdrop-filter:blur(var(--mio-blur-sm));-webkit-backdrop-filter:blur(var(--mio-blur-sm));
  padding:13px 22px;
}
.btn-secondary:hover{border-color:var(--mio-primary);box-shadow:var(--mio-glow-ghost)}
.btn-lg{padding:16px 30px;font-size:15px}
.btn svg{transition:transform var(--mio-dur-2) var(--mio-ease)}
.btn-primary:hover svg{transform:translateX(4px)}

/* badge/stati: unico uso consentito del raggio pill */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border-radius:var(--mio-radius-badge);padding:6px 14px;
  border:var(--mio-border-w) solid var(--mio-border-soft);
  font-size:var(--mio-fs-micro);font-weight:600;letter-spacing:var(--mio-track-label);
  text-transform:uppercase;color:var(--mio-text-2);
}

/* ============ HERO ============ */
.hero{display:block;padding:10vh 0 var(--mio-section-lg)}
.hero-copy{will-change:transform;max-width:680px}
/* micro-badge sotto le CTA: mono piccolo con dot teal */
.hero-badges{
  display:flex;flex-wrap:wrap;gap:var(--mio-space-3) var(--mio-space-6);
  margin-top:32px;
  font-size:var(--mio-fs-micro);font-weight:var(--mio-fw-strong);
  letter-spacing:var(--mio-track-label);text-transform:uppercase;
  color:var(--mio-text-2);
}
.hero-badges span{display:inline-flex;align-items:center;gap:9px}
.hero-badges i{
  width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--mio-primary);box-shadow:var(--mio-glow-2);
}
.eyebrow{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin-bottom:40px;
  font-size:var(--mio-fs-small);font-weight:600;
  letter-spacing:var(--mio-track-wide);text-transform:uppercase;color:var(--mio-primary);
}
.eyebrow::before{content:'';width:30px;height:1px;background:var(--mio-primary);box-shadow:var(--mio-glow-text)}
.eyebrow small{color:var(--mio-text-3);letter-spacing:var(--mio-track-label);font-size:var(--mio-fs-small)}
h1{
  font-family:var(--mio-font-display);font-size:var(--mio-fs-hero);
  font-weight:var(--mio-fw-display);line-height:var(--mio-lh-hero);letter-spacing:var(--mio-ls-hero);
  color:#FFFFFF;
  text-shadow:0 2px 24px rgba(0,0,0,.45);
  margin-bottom:36px;
}
.h1-dim{color:#FFFFFF}
.flip-wrap{display:inline-block;perspective:900px;vertical-align:top;min-width:4.2ch}
.flip-word{
  display:inline-block;background:linear-gradient(100deg, #8EEBA8 0%, #5EEAD4 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform-origin:50% 90%;animation:flipIn var(--mio-dur-2) var(--mio-ease);
  filter:drop-shadow(0 0 26px rgba(69,184,198,.35));
}
@keyframes flipIn{0%{transform:rotateX(88deg);opacity:0}100%{transform:rotateX(0);opacity:1}}
.lede{font-size:var(--mio-fs-lede);line-height:1.7;color:var(--mio-text-1);opacity:.82;max-width:560px;margin-bottom:44px}
.lede b{color:var(--mio-text-2);font-weight:600}
.cta-row{display:flex;gap:var(--mio-space-4);align-items:center;flex-wrap:wrap}

/* ============ SHELL (gradient border, hairline bianca 135°) ============ */
.mio-shell{
  border-radius:var(--mio-radius-shell);padding:1px;background:var(--mio-grad-shell);
  transition:box-shadow var(--mio-dur-2) var(--mio-ease);
}
.mio-shell:hover{box-shadow:var(--mio-glow-panel)}
.mio-panel{
  position:relative;border-radius:var(--mio-radius-inner);overflow:hidden;
  background:var(--mio-surface-glass);
  backdrop-filter:blur(var(--mio-blur-lg));-webkit-backdrop-filter:blur(var(--mio-blur-lg));
  padding:var(--mio-card-pad);
}
.mio-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,-20%),
    rgba(142,235,168,.08), rgba(69,184,198,.05) 40%, transparent 70%);
  opacity:0;transition:opacity var(--mio-dur-2) var(--mio-ease);
}
.mio-shell:hover .mio-panel::before{opacity:1}
.mio-panel > *{position:relative;z-index:1}

/* ============ PANNELLO ANALISI BOLLETTA ============ */
.bill-title{font-family:var(--mio-font-display);font-size:var(--mio-fs-h2);font-weight:600;letter-spacing:var(--mio-ls-hero);margin-bottom:8px}
.bill-sub{color:var(--mio-text-2);font-size:var(--mio-fs-ui);line-height:1.6;margin-bottom:22px}

.dropzone{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--mio-space-2);
  min-height:128px;padding:22px 16px;text-align:center;cursor:pointer;
  border:1px dashed var(--mio-border-teal);border-radius:var(--mio-radius-field);
  background:var(--mio-surface-drop);
  transition:border-color var(--mio-dur-1) var(--mio-ease),background var(--mio-dur-1) var(--mio-ease),box-shadow var(--mio-dur-2) var(--mio-ease);
}
.dropzone:hover,.dropzone.is-drag{border-color:var(--mio-border-mint);background:rgba(69,184,198,.11);box-shadow:var(--mio-glow-ghost)}
.dropzone.is-error{border-color:var(--mio-border-error)}
.dropzone .dz-icon{color:var(--mio-primary)}
.dropzone.is-drag .dz-icon{color:var(--mio-secondary)}
.dz-main{font-size:var(--mio-fs-ui);font-weight:600;letter-spacing:var(--mio-ls-label);color:var(--mio-text-1)}
.dz-hint{font-size:var(--mio-fs-micro);font-weight:500;letter-spacing:var(--mio-track-tick);text-transform:uppercase;color:var(--mio-text-3)}
.dropzone input[type=file]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}

.file-chip{
  display:none;align-items:center;gap:10px;margin-top:10px;padding:10px 12px;
  background:var(--mio-surface-input);border:var(--mio-border-w) solid var(--mio-border-teal);
  border-radius:var(--mio-radius-chip);font-size:var(--mio-fs-ui);
}
.file-chip.show{display:flex}
.file-chip .fc-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--mio-text-1)}
.file-chip .fc-size{font-size:var(--mio-fs-micro);color:var(--mio-text-3);flex:none}
.fc-remove{
  background:none;border:none;cursor:pointer;color:var(--mio-text-1);opacity:.6;flex:none;
  width:32px;height:32px;margin:-6px -6px -6px 0;border-radius:var(--mio-radius-chip);
  display:flex;align-items:center;justify-content:center;
  transition:opacity var(--mio-dur-1) var(--mio-ease),color var(--mio-dur-1) var(--mio-ease),background var(--mio-dur-1) var(--mio-ease);
}
.fc-remove:hover{color:var(--mio-error);opacity:1;background:var(--mio-surface-ghost)}

.field{margin-top:18px}
.field label{
  display:block;margin-bottom:8px;
  font-size:var(--mio-fs-micro);font-weight:600;
  letter-spacing:var(--mio-track-label);text-transform:uppercase;color:var(--mio-text-3);
}
.field input[type=text]{
  width:100%;padding:14px 16px;min-height:48px;
  background:var(--mio-surface-input);border:var(--mio-border-w) solid var(--mio-hairline);
  border-radius:var(--mio-radius-field);color:var(--mio-text-1);
  font-family:var(--mio-font-body);font-size:15px;
  transition:border-color var(--mio-dur-1) var(--mio-ease),box-shadow var(--mio-dur-2) var(--mio-ease);
}
.field input[type=text]::placeholder{color:var(--mio-text-3)}
.field input[type=text]:focus{outline:none;border-color:var(--mio-border-teal);box-shadow:var(--mio-glow-ghost)}
.field input[type=text].is-error{border-color:var(--mio-border-error)}

.consent{display:flex;align-items:flex-start;gap:11px;margin-top:16px;cursor:pointer}
.consent input[type=checkbox]{
  width:19px;height:19px;margin-top:2px;flex:none;cursor:pointer;
  accent-color:var(--mio-action);
}
.consent span{font-size:13px;line-height:1.55;color:var(--mio-text-1);opacity:.75}
.consent a{color:var(--mio-primary);text-decoration:underline;text-underline-offset:2px}
.consent a:hover{color:var(--mio-secondary)}

.form-msg{display:none;margin-top:12px;font-size:13px;line-height:1.5;color:var(--mio-error)}
.form-msg.show{display:block}

.bill-submit{width:100%;justify-content:center;margin-top:20px;min-height:50px}
.bill-note{
  margin-top:14px;text-align:center;
  font-size:var(--mio-fs-micro);font-weight:500;
  letter-spacing:var(--mio-track-tick);text-transform:uppercase;color:var(--mio-text-3);
}

/* honeypot: fuori schermo, invisibile anche agli screen reader */
.hp-field{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* stato post-invio */
.bill-success{display:none;text-align:center;padding:34px 8px 26px}
.bill-success.show{display:block}
.bill-check{width:76px;height:76px;margin:0 auto 22px;display:block}
.bill-check .ring{stroke:var(--mio-primary);opacity:.4}
.bill-check .mark{stroke:var(--mio-secondary);stroke-dasharray:48;stroke-dashoffset:48}
.bill-success.show .mark{animation:draw var(--mio-dur-3) var(--mio-ease) .2s forwards}
.bill-success.show .ring{animation:pop var(--mio-dur-2) var(--mio-spring)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes pop{0%{transform:scale(.6);transform-origin:center;opacity:0}100%{transform:scale(1);opacity:1}}
.bill-success h3{font-family:var(--mio-font-display);font-size:var(--mio-fs-h3);font-weight:600;margin-bottom:10px}
.bill-success p{color:var(--mio-text-2);font-size:var(--mio-fs-ui);line-height:1.6}

/* ============ SEQUENZA D'APERTURA ============ */
/* overlay trasparente: sotto si vedono i fasci che si accendono;
   il contenuto pagina resta nascosto (vedi regola .rv qui sotto) */
.intro{
  position:fixed;inset:0;z-index:100;background:transparent;
  display:none;align-items:center;justify-content:center;
}
html.mio-intro-pending .intro{display:flex}
/* lockup dell'apertura: stesso canvas del logo orizzontale ufficiale,
   sfera e lettering sono ritagli pixel-perfetti dello stesso file */
.intro-lockup{
  position:relative;width:min(52vw,660px);aspect-ratio:1600/724;
  will-change:transform;opacity:0;
}
.il-lettering{
  position:absolute;inset:0;width:100%;height:100%;
  clip-path:inset(0 100% 0 0);will-change:clip-path;
}
.il-sfera{
  position:absolute;left:0;top:0;height:80.4%;width:auto;
  will-change:transform,filter;
}
/* durante l'apertura il contenuto pagina non parte: i reveal .rv
   ripartono da zero quando la classe viene rimossa (dock del logo) */
html.mio-intro-pending .rv{animation:none;opacity:0}
.intro-skip{
  position:absolute;right:26px;bottom:22px;z-index:3;
  background:none;border:none;cursor:pointer;padding:10px 12px;
  font-size:var(--mio-fs-tiny);font-weight:600;
  letter-spacing:var(--mio-track-tick);text-transform:uppercase;color:var(--mio-text-3);
  transition:color var(--mio-dur-1) var(--mio-ease);
}
.intro-skip:hover{color:var(--mio-text-1)}

/* ============ FOOTER ============ */
footer{position:relative;z-index:2;margin-top:6vh;border-top:var(--mio-border-w) solid var(--mio-hairline)}
.foot-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  max-width:var(--mio-max-w);margin:0 auto;padding:52px var(--mio-gutter) 40px;
}
.foot-col h3{
  font-size:var(--mio-fs-micro);font-weight:600;
  letter-spacing:var(--mio-track-mono);text-transform:uppercase;color:var(--mio-primary);
  margin-bottom:18px;
}
.foot-col a{
  display:block;padding:6px 0;color:var(--mio-text-1);opacity:.7;text-decoration:none;
  font-size:var(--mio-fs-ui);transition:opacity var(--mio-dur-1) var(--mio-ease),color var(--mio-dur-1) var(--mio-ease);
}
.foot-col a:hover{opacity:1;color:var(--mio-text-2)}
.foot-legal{
  border-top:var(--mio-border-w) solid var(--mio-hairline);
  max-width:var(--mio-max-w);margin:0 auto;padding:20px var(--mio-gutter);
  display:flex;flex-wrap:wrap;gap:6px 22px;
}
.foot-legal a{
  color:var(--mio-text-1);opacity:.65;text-decoration:none;font-size:var(--mio-fs-small);
  transition:opacity var(--mio-dur-1) var(--mio-ease);
}
.foot-legal a:hover{opacity:1}
.foot-base{
  max-width:var(--mio-max-w);margin:0 auto;padding:6px var(--mio-gutter) 36px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;
  font-size:var(--mio-fs-tiny);font-weight:500;
  letter-spacing:var(--mio-track-tick);text-transform:uppercase;color:var(--mio-text-3);
}
.foot-social{display:flex;gap:var(--mio-space-1)}
.foot-social a{
  width:40px;height:40px;display:flex;align-items:center;justify-content:center;
  color:var(--mio-text-1);opacity:.7;border:var(--mio-border-w) solid var(--mio-hairline);border-radius:var(--mio-radius-chip);
  transition:opacity var(--mio-dur-1) var(--mio-ease),color var(--mio-dur-1) var(--mio-ease),border-color var(--mio-dur-1) var(--mio-ease);
}
.foot-social a:hover{color:var(--mio-secondary);opacity:1;border-color:var(--mio-border-teal)}

/* ============ CORPO HOMEPAGE · sezioni ============ */
.section{padding:var(--mio-section-lg) 0}
.sec-head{max-width:720px;margin-bottom:calc(var(--mio-section) + var(--mio-space-2))}
.sec-head h2,.final-cta h2{
  font-family:var(--mio-font-display);font-size:clamp(30px,3.4vw,44px);
  font-weight:var(--mio-fw-display);line-height:1.08;letter-spacing:var(--mio-ls-hero);
  margin-top:var(--mio-space-4);
}
.sec-head .badge{color:var(--mio-primary);border-color:var(--mio-border-soft)}

/* --- card base (radius 15, da spec) --- */
.mio-card{
  background:var(--mio-surface-glass);
  border:var(--mio-border-w) solid var(--mio-hairline);
  border-radius:var(--mio-radius-card);padding:var(--mio-card-pad);
  backdrop-filter:blur(var(--mio-blur-md));-webkit-backdrop-filter:blur(var(--mio-blur-md));
  transition:border-color var(--mio-dur-2) var(--mio-ease),box-shadow var(--mio-dur-2) var(--mio-ease);
}
.mio-card:hover{border-color:var(--mio-border-soft);box-shadow:var(--mio-glow-1)}

/* --- (2) come funziona --- */
.steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--mio-space-4)}
.steps-line{position:absolute;left:0;right:0;top:44px;width:100%;height:56px;pointer-events:none;opacity:.75}
.step{position:relative;z-index:1}
.step-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--mio-space-4)}
.step-ico{
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex:none;
  color:var(--mio-primary);background:var(--mio-surface-drop);
  border:var(--mio-border-w) solid var(--mio-border-soft);border-radius:var(--mio-radius-field);
}
.step-num{
  font-size:var(--mio-fs-small);font-weight:600;letter-spacing:var(--mio-track-label);
  color:var(--mio-text-3);
}
.step h3{font-size:var(--mio-fs-h3);font-weight:600;letter-spacing:var(--mio-ls-label);margin-bottom:var(--mio-space-2)}
.step p{font-size:var(--mio-fs-body);font-weight:500;line-height:var(--mio-lh-body);color:var(--mio-text-1);opacity:.72}

/* --- (3) offerte --- */
.offers{display:grid;grid-template-columns:1fr 1fr;gap:var(--mio-space-4)}
.offer .mio-panel{display:flex;flex-direction:column;align-items:flex-start;gap:var(--mio-space-4);min-height:100%}
.offer-tag{
  font-size:var(--mio-fs-micro);font-weight:600;letter-spacing:var(--mio-track-label);
  text-transform:uppercase;color:var(--mio-text-2);
}
.offer h3{font-family:var(--mio-font-display);font-size:clamp(26px,2.4vw,34px);font-weight:600;letter-spacing:var(--mio-ls-hero)}
.offer p{font-size:var(--mio-fs-body);font-weight:500;line-height:var(--mio-lh-body);color:var(--mio-text-1);opacity:.72;flex:1}

/* --- (2b) analisi della bolletta: copy sx, form glass dx --- */
/* cornice glass CHIARA: il momento chiave della pagina */
.analisi-shell{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  padding:56px;
  box-shadow:var(--mio-shadow-deep);
}
.analisi-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.analisi-sub{font-size:var(--mio-fs-lede);color:var(--mio-text-2);margin:-14px 0 26px}
.analisi-punti{list-style:none;display:flex;flex-direction:column;gap:var(--mio-space-4)}
.analisi-punti li{
  display:flex;align-items:center;gap:12px;
  font-size:15px;color:var(--mio-text-1);
}
.analisi-punti li::before{
  content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--mio-primary);box-shadow:var(--mio-glow-2);
}
@media (max-width:1060px){
  .analisi-grid{grid-template-columns:1fr;gap:36px}
  .analisi-shell{padding:28px 20px}
}

/* --- (3) scrollytelling: card sx, video sticky dx (60/40) --- */
.scrolly-grid{display:grid;grid-template-columns:6fr 4fr;gap:var(--mio-space-8);align-items:start}
.scrolly-cards{display:flex;flex-direction:column;gap:38vh;padding:16vh 0 22vh}
.scrolly-card{
  background:var(--mio-surface-glass);
  border:var(--mio-border-w) solid var(--mio-hairline);
  border-radius:var(--mio-radius-glass);padding:var(--mio-card-pad);
  backdrop-filter:blur(var(--mio-blur-lg));-webkit-backdrop-filter:blur(var(--mio-blur-lg));
  box-shadow:var(--mio-shadow-deep);
  transition:border-color var(--mio-dur-25) var(--mio-ease);
}
.scrolly-card.is-active{border-color:var(--mio-border-teal)}
.scrolly-card .offer-tag{display:block;margin-bottom:var(--mio-space-3)}
.scrolly-card h3{font-size:var(--mio-fs-h3);font-weight:var(--mio-fw-strong);margin-bottom:var(--mio-space-3);color:var(--mio-text-0)}
.scrolly-card p{color:var(--mio-text-2);margin-bottom:var(--mio-space-5)}
.link-arrow{
  display:inline-flex;align-items:center;gap:8px;
  color:var(--mio-text-1);text-decoration:none;font-weight:var(--mio-fw-strong);font-size:var(--mio-fs-ui);
  border-bottom:var(--mio-border-w) solid transparent;
  transition:color var(--mio-dur-1) var(--mio-ease),border-color var(--mio-dur-1) var(--mio-ease);
}
.link-arrow:hover{color:var(--mio-mint);border-color:var(--mio-border-teal)}
.link-arrow svg{transition:transform var(--mio-dur-2) var(--mio-ease)}
.link-arrow:hover svg{transform:translateX(4px)}
.card-media{display:none}
.scrolly-media{
  position:sticky;top:calc(50vh - 200px);
}
.scrolly-frame{position:relative;aspect-ratio:16/10;padding:0;overflow:hidden}
.scrolly-frame video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity var(--mio-dur-25) var(--mio-ease);  /* crossfade 500ms */
}
.scrolly-frame video.is-active{opacity:1}
.scrolly-ticks{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:var(--mio-space-2);z-index:2;
}
.scrolly-ticks i{
  width:26px;height:3px;border-radius:var(--mio-radius-badge);
  background:rgba(255,255,255,.18);transition:background var(--mio-dur-2) var(--mio-ease);
}
.scrolly-ticks i.is-active{background:var(--mio-primary);box-shadow:var(--mio-glow-2)}

/* --- (3b) bento: percorsi rapidi --- */
.bento{
  display:grid;gap:var(--mio-space-4);
  grid-template-columns:repeat(3,1fr);
  grid-template-areas:
    'casa casa area'
    'casa casa paga'
    'biz  biz  auto'
    'biz  biz  aiuto';
  grid-auto-rows:180px;
}
.bento-tile{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--mio-radius-card);
  border:var(--mio-border-w) solid var(--mio-hairline);
  text-decoration:none;
}
.bento-big:nth-of-type(1){grid-area:casa}
.bento-big:nth-of-type(4){grid-area:biz}
.bento-small:nth-of-type(2){grid-area:area}
.bento-small:nth-of-type(3){grid-area:paga}
.bento-small:nth-of-type(5){grid-area:auto}
.bento-small:nth-of-type(6){grid-area:aiuto}
.bento-tile video,.bento-tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--mio-dur-2) var(--mio-ease);
}
.bento-scrim{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(4,7,13,.16) 0%, rgba(4,7,13,.34) 55%, rgba(4,7,13,.78) 100%);
  transition:background var(--mio-dur-2) var(--mio-ease);
}
.bento-label{
  position:absolute;left:20px;right:20px;bottom:16px;
  display:flex;align-items:center;gap:10px;
  color:#FFFFFF;font-weight:var(--mio-fw-strong);font-size:16px;
  text-shadow:0 1px 12px rgba(0,0,0,.5);
}
.bento-small .bento-label{font-size:14px;bottom:14px}
.bento-label svg{transition:transform var(--mio-dur-2) var(--mio-ease)}
.bento-label .ext{color:var(--mio-mint);font-size:.9em}
@media (pointer:fine){
  .bento-tile:hover video,.bento-tile:hover img{transform:scale(1.04)}
  .bento-tile:hover .bento-label svg{transform:translateX(4px)}
}
@media (max-width:1060px){
  .bento{grid-template-columns:1fr;grid-template-areas:none;grid-auto-rows:200px}
  .bento-tile{grid-area:auto !important}
  .bento-big{min-height:240px}
}

/* link discreto sotto i badge hero */
.hero-client-link{
  display:inline-block;margin-top:18px;
  color:var(--mio-text-2);text-decoration:none;font-size:13px;
  border-bottom:var(--mio-border-w) solid transparent;
  transition:color var(--mio-dur-1) var(--mio-ease),border-color var(--mio-dur-1) var(--mio-ease);
}
.hero-client-link:hover{color:#FFFFFF;border-color:var(--mio-border-teal)}

/* --- (4) perché mio · banda manifesto --- */
.band{
  position:relative;margin:var(--mio-section) calc(50% - 50vw) 0;padding:calc(var(--mio-section-lg) + var(--mio-space-6)) 0;
  border-top:var(--mio-border-w) solid var(--mio-hairline);
  border-bottom:var(--mio-border-w) solid var(--mio-hairline);
  background:
    radial-gradient(60% 90% at 50% 110%, rgba(69,184,198,.12) 0%, rgba(5,11,18,0) 60%),
    rgba(5,11,18,.55);
}
.band-inner{max-width:var(--mio-max-w);margin:0 auto;padding:0 var(--mio-gutter)}
.band .sec-head{max-width:820px}
.manifesto em{
  font-style:normal;background:linear-gradient(100deg, #8EEBA8 0%, #14B8A6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.manifesto-sub{margin-top:var(--mio-space-4);font-size:var(--mio-fs-lede);color:var(--mio-text-2)}
.diffs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--mio-space-4)}
.diff{
  padding:var(--mio-space-6) var(--mio-space-4);
  border-top:var(--mio-border-w) solid var(--mio-border-soft);
}
.diff svg{color:var(--mio-primary);margin-bottom:var(--mio-space-4)}
.diff h3{font-size:15px;font-weight:600;letter-spacing:var(--mio-ls-label);margin-bottom:var(--mio-space-2)}
.diff p{font-size:var(--mio-fs-body);font-weight:500;line-height:var(--mio-lh-body);color:var(--mio-text-1);opacity:.68}

/* --- (5) green & CER --- */
.green{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.green-visual{position:relative;aspect-ratio:1;max-width:420px;margin:0 auto;width:100%}
.green-mark{
  position:absolute;inset:8%;width:84%;height:auto;display:block;
  filter:var(--mio-drop-2) var(--mio-drop-3);
  animation:sphere-breath 7s ease-in-out infinite;
}
@keyframes sphere-breath{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.green-ring{
  position:absolute;inset:0;border-radius:50%;
  border:var(--mio-border-w) solid var(--mio-border-soft);
  mask-image:linear-gradient(160deg,#000 30%,transparent 75%);
  -webkit-mask-image:linear-gradient(160deg,#000 30%,transparent 75%);
}
.green-copy p{font-size:var(--mio-fs-lede);line-height:1.7;color:var(--mio-text-1);opacity:.8;max-width:560px;margin-bottom:var(--mio-space-6)}
.green-copy p b{color:var(--mio-text-2);font-weight:600}

/* --- (6) FAQ --- */
.faq-sec .sec-head{margin-bottom:var(--mio-space-8)}
.faq{max-width:860px}
.faq-item{border-bottom:var(--mio-border-w) solid var(--mio-hairline)}
.faq-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--mio-space-4);
  background:none;border:none;cursor:pointer;text-align:left;
  padding:22px 4px;min-height:48px;
  font-family:var(--mio-font-body);font-size:16px;font-weight:600;
  letter-spacing:var(--mio-ls-label);color:var(--mio-text-1);
  transition:color var(--mio-dur-1) var(--mio-ease);
}
.faq-btn:hover{color:var(--mio-text-2)}
.faq-btn .chev{flex:none;color:var(--mio-primary);transition:transform var(--mio-dur-2) var(--mio-ease)}
.faq-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}
.faq-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--mio-dur-2) var(--mio-ease)}
.faq-btn[aria-expanded="true"] + .faq-body{grid-template-rows:1fr}
.faq-body > div{overflow:hidden}
.faq-body p{
  padding:0 4px 24px;max-width:720px;
  font-size:var(--mio-fs-body);font-weight:500;line-height:var(--mio-lh-body);
  color:var(--mio-text-1);opacity:.75;
}
.faq-body a{color:var(--mio-primary);text-decoration:none}
.faq-body a:hover{color:var(--mio-secondary)}

/* --- (7) CTA finale --- */
.final-cta{
  position:relative;text-align:center;
  padding:calc(var(--mio-section-lg) + 24px) 0 calc(var(--mio-section-lg) + 40px);
}
.final-glow{
  position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 68% at 50% 58%, rgba(69,184,198,.20) 0%, rgba(69,184,198,.06) 45%, rgba(5,11,18,0) 75%);
}
.final-cta h2{font-size:clamp(40px,5vw,64px);margin:0 0 var(--mio-space-4)}
.final-cta p{color:var(--mio-text-2);font-size:var(--mio-fs-lede);margin-bottom:var(--mio-space-8)}
.final-cta .btn{position:relative}

/* ============ IMPULSO DI ENERGIA sulle hairline ============ */
.pulse-line{
  display:block;position:relative;height:1px;overflow:visible;
  background:var(--mio-hairline);
  margin-bottom:var(--mio-section);
}
.final-cta .pulse-line{margin-bottom:var(--mio-space-8)}
.pulse-line::after{
  content:'';position:absolute;top:-1.5px;left:-120px;width:110px;height:4px;
  border-radius:4px;opacity:0;
  background:linear-gradient(90deg, transparent, rgba(20,184,166,.7) 55%, #5EEAD4 100%);
  box-shadow:0 0 12px 1px rgba(94,234,212,.55);
}
.pulse-line.lit::after{animation:pulseRun 1.15s cubic-bezier(.4,0,.2,1) forwards}
@keyframes pulseRun{
  0%{left:-120px;opacity:0}
  12%{opacity:1}
  88%{opacity:1}
  100%{left:100%;opacity:0}
}
/* reveal parola-per-parola dei titoli */
.sec-head h2 .w,.final-cta h2 .w{display:inline-block}

/* ============ CARD INTERATTIVE (solo pointer:fine) ============ */
@media (pointer:fine){
  .fx-card{
    position:relative;
    transition:transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1),
               border-color .3s cubic-bezier(.4,0,.2,1);
  }
  .fx-card:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 44px -16px rgba(0,0,0,.55), var(--mio-glow-1);
  }
  /* spotlight radiale che segue il mouse */
  .fx-card::after{
    content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;
    background:radial-gradient(350px circle at var(--mx,50%) var(--my,50%), rgba(20,184,166,.10), transparent 70%);
    opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);
  }
  .fx-card:hover::after{opacity:1}
  /* bordo che si illumina verso il cursore (gradient + mask) */
  .fx-card::before{
    content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:1;
    padding:1px;
    background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%), #14B8A6, transparent 75%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
            mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask-composite:exclude;
    opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);
  }
  .fx-card:hover::before{opacity:1}
  /* micro-zoom del video attivo quando si è in hover su una card scrolly */
  .scrolly-frame video{transition:opacity var(--mio-dur-25) var(--mio-ease), transform .3s cubic-bezier(.4,0,.2,1)}
  .scrolly-frame.zoom video.is-active{transform:scale(1.04)}
}
.faq-item{border-radius:var(--mio-radius-field);padding:0 14px}

/* ============ IMPULSO DI ENERGIA sulle hairline ============ */
.pulse-line{
  display:block;position:relative;height:1px;
  background:var(--mio-hairline);
  margin-bottom:var(--mio-section);
}
.pulse-line::after{
  content:'';position:absolute;top:-1.5px;left:0;width:64px;height:4px;
  border-radius:var(--mio-radius-badge);opacity:0;
  background:linear-gradient(90deg, rgba(20,184,166,0) 0%, #14B8A6 55%, #5EEAD4 85%, #EFFFFB 100%);
  box-shadow:0 0 12px rgba(94,234,212,.8);
}
/* una sola corsa, innescata da ScrollTrigger (classe .lit) */
.pulse-line.lit::after{animation:pulse-run 1.1s var(--mio-ease) forwards}
@keyframes pulse-run{
  0%{left:0;opacity:0}
  10%{opacity:1}
  85%{opacity:1}
  100%{left:calc(100% - 64px);opacity:0}
}
.final-cta .pulse-line{margin-bottom:var(--mio-section-lg)}
@media (prefers-reduced-motion:reduce){
  .pulse-line.lit::after{animation:none;opacity:0}
}

/* parole dei titoli (reveal a stagger, split via JS) */
.sec-head h2 .w,.final-cta h2 .w{display:inline-block;will-change:transform}
/* FIX: background-clip:text non attraversa figli inline-block — quando
   il titolo è splittato, il gradiente va sulle singole parole dentro em */
.manifesto em .w{
  background:linear-gradient(100deg, #8EEBA8 0%, #14B8A6 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* cursore del typewriter (card Perché Mio) */
.tw-cursor{
  display:inline-block;width:2px;height:1em;margin-left:2px;
  vertical-align:-.12em;background:var(--mio-primary);
}
.tw-cursor.blink{animation:tw-blink .45s steps(1) 2}
@keyframes tw-blink{50%{opacity:0}}

/* ============ CARD INTERATTIVE (solo pointer fine) ============ */
@media (pointer:fine){
  .fx-card{
    position:relative;
    transition:transform var(--mio-dur-2) var(--mio-ease),
               box-shadow var(--mio-dur-2) var(--mio-ease);
  }
  .fx-card:hover{
    transform:translateY(-3px);
    box-shadow:0 16px 44px -14px rgba(0,0,0,.55), var(--mio-glow-1);
  }
  .fx-card::before,.fx-card::after{
    content:'';position:absolute;inset:0;border-radius:inherit;
    pointer-events:none;opacity:0;z-index:2;
    transition:opacity var(--mio-dur-2) var(--mio-ease);
  }
  /* spotlight radiale che segue il mouse */
  .fx-card::after{
    background:radial-gradient(350px circle at var(--fx-x,50%) var(--fx-y,50%),
      rgba(20,184,166,.10), transparent 70%);
  }
  /* bordo che si illumina verso il cursore (gradient + mask) */
  .fx-card::before{
    padding:1px;
    background:radial-gradient(260px circle at var(--fx-x,50%) var(--fx-y,50%),
      #14B8A6, transparent 75%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;
    mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite:exclude;
  }
  .fx-card:hover::before,.fx-card:hover::after{opacity:1}
  .faq-item.fx-card{border-radius:var(--mio-radius-field)}
  /* micro-zoom del video attivo quando una card scrolly è in hover */
  .scrolly-frame video{
    transition:opacity var(--mio-dur-25) var(--mio-ease),
               transform var(--mio-dur-2) var(--mio-ease);
  }
  .scrolly-frame.is-zoom video.is-active{transform:scale(1.04)}
}

/* ============ REVEAL (sezioni a 1000ms, da spec) ============ */
.rv{opacity:0;transform:translateY(20px);animation:rv var(--mio-dur-3) var(--mio-ease) forwards}
@keyframes rv{to{opacity:1;transform:none}}
.r1{animation-delay:.05s}.r2{animation-delay:.12s}.r3{animation-delay:.2s}.r4{animation-delay:.3s}.r5{animation-delay:.42s}

/* ============ MOTION / RESPONSIVE ============ */
/* su mobile il titolo hero dipinge SUBITO (LCP): reveal solo sul resto */
@media (max-width:767px){
  h1.rv{animation:none;opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  html.mio-intro-pending .intro{display:none}
}
@media (max-width:1150px){
  .nav-menu,.nav-cta .btn-secondary{display:none}
  .burger{display:flex}
}
@media (max-width:1060px){
  .hero{grid-template-columns:1fr;gap:56px;padding-top:4vh}
  .wrap{padding:0 var(--mio-gutter-sm)}
  .foot-grid{grid-template-columns:repeat(2,1fr);padding-left:var(--mio-gutter-sm);padding-right:var(--mio-gutter-sm)}
  .foot-legal,.foot-base{padding-left:var(--mio-gutter-sm);padding-right:var(--mio-gutter-sm)}
  .stats{grid-template-columns:repeat(2,1fr);gap:var(--mio-space-6) var(--mio-space-4)}
  /* scrollytelling mobile: niente sticky, card impilate col proprio video */
  .scrolly-grid{grid-template-columns:1fr}
  .scrolly-media{display:none}
  .scrolly-cards{gap:var(--mio-space-6);padding:0}
  .card-media{
    display:block;margin:0 0 var(--mio-space-5);
    border-radius:var(--mio-radius-card);overflow:hidden;
    border:var(--mio-border-w) solid var(--mio-hairline);
  }
  .card-media video{display:block;width:100%;aspect-ratio:16/10;object-fit:cover}
  .scrolly-card{display:flex;flex-direction:column}
  .scrolly-card .card-media{order:-1}
  .steps{grid-template-columns:1fr}
  .steps-line{display:none}
  .offers{grid-template-columns:1fr}
  .diffs{grid-template-columns:repeat(2,1fr)}
  .band-inner{padding:0 var(--mio-gutter-sm)}
  .green{grid-template-columns:1fr;gap:40px}
  .green-visual{max-width:300px}
}
@media (max-width:640px){
  .nav-cta .btn-primary{display:none}
  .foot-grid{grid-template-columns:1fr;gap:30px}
  .mio-panel{padding:24px 18px}
  .logo img{height:32px}
  .diffs{grid-template-columns:1fr;gap:var(--mio-space-2)}
  .section{padding:var(--mio-section-lg) 0}
}