/* ─────────── caratteri (ospitati qui: zero richieste a terzi) ─────────── */

@font-face{ font-family:'Outfit'; font-style:normal; font-weight:300; font-display:swap;
            src:url('assets/fonts/outfit-300.woff2') format('woff2') }
@font-face{ font-family:'Outfit'; font-style:normal; font-weight:700; font-display:swap;
            src:url('assets/fonts/outfit-700.woff2') format('woff2') }
@font-face{ font-family:'Outfit'; font-style:normal; font-weight:800; font-display:swap;
            src:url('assets/fonts/outfit-800.woff2') format('woff2') }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
            src:url('assets/fonts/inter-400.woff2') format('woff2') }
@font-face{ font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
            src:url('assets/fonts/inter-600.woff2') format('woff2') }

/* ═══════════════════════════════════════════════════════════
   ADATTICA — v6 · la storia che vende
   Atmosfera LUMINOSA: aurore su canvas + sezioni a colori pieni.
   Statico, vanilla, zero dipendenze, zero richieste esterne.
   ═══════════════════════════════════════════════════════════ */

:root{
  --indigo:  #1c1450;   /* base scura ma colorata, mai nero */
  --indigo-2:#241b62;
  --violet:  #3b1663;
  --cyanbg:  #56d5f4;   /* sezioni accese */
  --acid:    #ccff00;
  --mag:     #ff1e8e;
  --coral:   #ff5a2b;

  --ink:     #f5f4ff;   /* testo su scuro */
  --ink-2:   #c3c0e6;
  --dark:    #140f33;   /* testo su chiaro */

  --max:     1180px;
  --pad:     clamp(1.25rem, 5vw, 3rem);
  --ease:    cubic-bezier(.77,0,.175,1);   /* misurato dal riferimento */
  --display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --testo:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }

body{
  margin:0; background:var(--indigo); color:var(--ink);
  font-family:var(--testo); font-size:clamp(1rem,.95rem+.3vw,1.15rem); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;   /* clip, non hidden: hidden romperebbe position:sticky */
}
body.loading{ overflow:hidden }

/* grana */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:40; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--pad);
       position:relative; z-index:2 }
.narrow{ max-width:860px }
section{ position:relative }
.skip{ position:absolute; left:-9999px; background:var(--acid); color:#000; padding:.75rem 1rem; z-index:100 }
.skip:focus{ left:1rem; top:1rem }

/* aurora: canvas di sezione, dietro al contenuto */
/* la scala anima la PROPRIETÀ scale: compone col transform del parallasse */
.mesh{ position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover; z-index:0;
  animation:meshpan 26s ease-in-out infinite alternate; will-change:transform }
@keyframes meshpan{ from{ scale:1.02 } to{ scale:1.14 } }
.ring{ position:absolute; z-index:1; width:min(56vw,700px); aspect-ratio:1;
  left:50%; top:8%; margin-left:calc(min(56vw,700px)/-2);
  background:radial-gradient(circle, rgba(255,255,255,.0) 34%, rgba(204,255,0,.16) 46%, rgba(86,213,244,.22) 55%, transparent 68%);
  filter:blur(6px); animation:ringpulse 9s ease-in-out infinite alternate; will-change:transform }
@keyframes ringpulse{ from{ opacity:.7; scale:1 } to{ opacity:1; scale:1.07 } }
#terreno{ position:absolute; left:0; right:0; bottom:0; height:52%; width:100%; z-index:1 }
[data-px]{ will-change:transform }
canvas.aurora{ position:absolute; inset:0; width:100%; height:100%; z-index:1;
  mix-blend-mode:screen; opacity:.5 }

/* ─────────── tipografia ─────────── */

h1,h2,h3{ font-family:var(--display); margin:0 0 .5em; line-height:1;
          letter-spacing:-.03em; font-weight:800; text-wrap:balance }
h1{ font-size:clamp(3rem,1.8rem+6.4vw,7.8rem); line-height:.92; letter-spacing:-.045em; text-transform:uppercase }
h2{ font-size:clamp(2.2rem,1rem+4.6vw,5.2rem); line-height:.94; letter-spacing:-.04em; text-transform:uppercase }
h3{ font-size:clamp(1.1rem,1rem+.6vw,1.5rem); letter-spacing:-.02em; line-height:1.12 }
p{ margin:0 0 1.1em; text-wrap:pretty }
b,strong{ font-weight:650 }
h1 em,h2 em{ font-style:normal; color:var(--acid) }

.kicker{ font-family:var(--display); font-size:.74rem; letter-spacing:.28em;
         text-transform:uppercase; font-weight:700; margin-bottom:1.4rem; opacity:.85 }
.lede{ font-size:clamp(1.05rem,1rem+.5vw,1.35rem); max-width:54ch }
.lede.centro{ margin-inline:auto; text-align:center }
.sec-title{ margin-bottom:.4em }
.sec-intro{ max-width:56ch; margin-bottom:2.6rem; opacity:.9 }
a{ color:inherit }

/* maschere di riga: solo verticale, coi margini di respiro */
.li{ display:block; overflow-x:visible; overflow-y:clip; padding:.07em 0; margin:-.07em 0 }
.li-in{ display:block; transform:translateY(115%); will-change:transform;
        transition:transform 1s var(--ease) }
.li:nth-child(2) .li-in{ transition-delay:.09s }
.li:nth-child(3) .li-in{ transition-delay:.18s }
[data-rise].seen .li-in{ transform:none }
/* quando un titolo è spezzato in parole, la maschera di riga passa il testimone */
.split .li-in{ transform:none; transition:none }
.w{ display:inline-block; overflow-y:clip; padding:.08em 0 .04em; margin:-.08em 0 -.04em; vertical-align:top }
.w-in{ display:inline-block; transform:translateY(125%) rotate(6deg); transform-origin:0 100%;
  transition:transform 1s var(--ease); transition-delay:calc(var(--wi)*.06s) }
[data-rise].seen .w-in{ transform:none }

/* ─────────── loader ─────────── */

#loader{ position:fixed; inset:0; z-index:60; background:var(--indigo);
         display:grid; place-items:center;
         transition:transform 1.15s var(--ease), visibility 1.15s }
body:not(.loading) #loader{ transform:translateY(-101%); visibility:hidden }
.loader-inner{ text-align:center }
.loader-sym{ width:min(46vw,240px); stroke:var(--acid); stroke-width:10; fill:none;
             stroke-linecap:round; stroke-linejoin:round;
             stroke-dasharray:600; stroke-dashoffset:600; animation:draw 1.2s var(--ease) forwards }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.l-word{ display:block; margin-top:1rem; font-family:var(--display); font-weight:300;
         letter-spacing:.34em; font-size:1rem; color:var(--ink) }

/* ─────────── barra in alto ─────────── */

header.site{ position:fixed; top:0; left:0; right:0; z-index:20;
  border-bottom:1px solid transparent;
  transition:background .3s, border-color .3s, transform .4s var(--ease) }
header.site.stuck{ background:rgba(20,15,51,.72); backdrop-filter:blur(12px);
                   border-bottom-color:rgba(255,255,255,.12) }
header.site.away{ transform:translateY(-102%) }
.bar{ max-width:var(--max); margin-inline:auto; padding:1rem var(--pad);
      display:flex; align-items:center; justify-content:space-between; gap:1rem }
.mark{ display:inline-flex; align-items:center; gap:.75rem; color:var(--ink);
       text-decoration:none; font-family:var(--display); font-weight:300;
       letter-spacing:.34em; font-size:.95rem }
.mark .logo-sym{ width:56px; height:auto; stroke:var(--acid); stroke-width:13; fill:none;
                 stroke-linecap:round; stroke-linejoin:round; overflow:visible }
header nav{ display:flex; align-items:center; gap:clamp(.7rem,2.4vw,1.7rem);
  font-family:var(--display); font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700 }
header nav a{ color:var(--ink-2); text-decoration:none; transition:color .2s }
header nav a:hover{ color:var(--acid) }
header nav .nav-cta{ color:#000; background:var(--acid); padding:.5rem .9rem; border-radius:3px }
header nav .nav-cta:hover{ background:#fff; color:#000 }
@media (max-width:640px){ header nav a:not(.nav-cta){ display:none } }

/* ─────────── bottoni ─────────── */

.btn{ display:inline-flex; align-items:center; gap:.9rem; text-decoration:none; cursor:pointer;
  font-family:var(--testo); font-weight:400; font-size:1.05rem; letter-spacing:.01em;
  text-transform:none; padding:1.15rem 2.1rem; border-radius:0;
  background:rgba(255,255,255,.1); color:var(--ink);
  border:1px solid rgba(255,255,255,.35); backdrop-filter:blur(8px);
  transition:background .45s var(--ease), border-color .45s var(--ease) }
.btn::after{ content:"»"; font-size:1.15em; line-height:1;
  transition:transform .45s var(--ease) }
.btn:hover{ background:rgba(255,255,255,.24); border-color:rgba(255,255,255,.7); color:#fff }
.btn:hover::after{ transform:translateX(7px) }
.btn.ghost{ background:transparent }
.btn.ghost:hover{ background:rgba(255,255,255,.12) }
.btn.big{ font-size:1.15rem; padding:1.3rem 2.6rem }

/* ─────────── hero ─────────── */

.hero{ min-height:100svh; display:flex; align-items:center; overflow:hidden;
       padding-block:7.5rem 4.5rem }
#rain{ position:absolute; inset:0; width:100%; height:100%; z-index:1; opacity:.5 }
.hero-grid{ display:flex; flex-direction:column; min-height:calc(100svh - 12rem);
  justify-content:flex-end }
.hero-copy{ width:100% }
.hero-foot{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:2.5rem; margin-top:clamp(2.5rem,6vh,5rem); flex-wrap:wrap }
.hero-foot .lede{ max-width:34ch; margin:0 }
@media (max-width:760px){ .hero-foot{ flex-direction:column; align-items:flex-start } }
.hero .eyebrow{ font-family:var(--display); font-size:.72rem; letter-spacing:.26em;
  text-transform:uppercase; font-weight:700; color:var(--acid); margin-bottom:1.5rem }
.hero .lede{ margin-top:1.5rem; color:var(--ink-2) }
.actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.2rem }

/* card del reel, inclinata come nel riferimento */
.reel-card{ position:relative; border:0; padding:0; cursor:pointer; border-radius:14px;
  overflow:hidden; aspect-ratio:16/10; background:#000; width:100%;
  transform:rotate(3deg); box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:floaty 7s ease-in-out infinite alternate;
  transition:transform .3s var(--ease) }
@keyframes floaty{ from{ translate:0 -6px } to{ translate:0 10px } }
.reel-card:hover{ transform:rotate(1deg) scale(1.03) }
.reel-card video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.reel-play{ position:absolute; inset:0; display:grid; place-items:center;
  font-size:2.4rem; color:#fff; text-shadow:0 2px 20px rgba(0,0,0,.6) }
.reel-tag{ position:absolute; left:12px; bottom:10px; font-family:var(--display);
  font-size:.68rem; letter-spacing:.22em; color:#fff; opacity:.85 }
@media (max-width:900px){ .reel-card{ max-width:420px } }

.scroll-hint{ position:absolute; bottom:1.6rem; left:50%; transform:translateX(-50%);
  z-index:2; display:flex; flex-direction:column; align-items:center; gap:.5rem;
  font-size:.62rem; letter-spacing:.3em; color:var(--ink-2) }
.scroll-hint i{ width:1px; height:40px; background:linear-gradient(var(--acid),transparent);
  animation:drip 1.8s infinite }
@keyframes drip{ 0%{transform:scaleY(0);transform-origin:top}
  50%{transform:scaleY(1);transform-origin:top}
  51%{transform-origin:bottom} 100%{transform:scaleY(0);transform-origin:bottom} }

/* ─────────── riconoscimento (viola pieno) ─────────── */

.pains{ background:var(--violet); padding-block:clamp(4rem,9vw,7rem) }
.grid{ display:grid; gap:1rem }
@media (min-width:700px){ .grid.quattro{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1040px){ .grid.quattro{ grid-template-columns:repeat(4,1fr) } }
@media (min-width:900px){ .grid.tre{ grid-template-columns:repeat(3,1fr) } }
.pain{ background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:1.4rem; font-size:1rem;
  transition:background .3s, transform .3s var(--ease) }
.pain:hover{ background:rgba(255,255,255,.13); transform:translateY(-4px) }
.pain p{ margin:0; color:var(--ink) }
.pains-cta{ margin-top:2rem; font-size:1.05rem }
.pains-cta a{ color:var(--acid); font-weight:650 }

/* ─────────── ruolo (aurora) ─────────── */

.ruolo{ padding-block:clamp(5rem,12vw,9rem); overflow:hidden }
.statement{ font-size:clamp(2.8rem,1.2rem+6.8vw,7.8rem); line-height:.92; margin-bottom:.6em }
.statement.big{ text-align:center }
.statement.big .li-in{ text-align:center }
.ruolo-cols{ display:grid; gap:2rem; max-width:100% }
@media (min-width:820px){ .ruolo-cols{ grid-template-columns:1fr 1fr } }
.ruolo-cols p{ color:var(--ink-2); max-width:46ch }
.ruolo-cols b{ color:#fff }

/* ─────────── servizi · fisarmonica orizzontale ─────────── */

.servizi{ background:var(--indigo-2); padding-block:clamp(4rem,9vw,7rem) 0 }
.servizi .wrap{ margin-bottom:2.5rem }

.acc{ display:flex; width:100%; min-height:min(72svh,640px) }
.panel{ position:relative; overflow:hidden; flex:1; min-width:0; cursor:pointer;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:flex .65s var(--ease); border-left:1px solid rgba(0,0,0,.2) }
.panel.open{ flex:4.2; cursor:default }
.panel video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:.55; mix-blend-mode:luminosity; transition:opacity .5s }
.panel.open video{ opacity:.95; mix-blend-mode:normal }
/* colori pieni per pannello: il video ci si fonde sopra */
.p1{ background:#5a6b00 } .p1.open{ background:transparent }
.p1.open::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 22%, rgba(16,10,40,.92) 82%) }
.p2{ background:#7e0b46 } .p2.open::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 22%, rgba(16,10,40,.92) 82%) }
.p3{ background:#2c1057 } .p3.open::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 22%, rgba(16,10,40,.92) 82%) }
.p4{ background:#0b5e74 } .p4.open::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 22%, rgba(16,10,40,.92) 82%) }
.p5{ background:#8a2f12 } .p5.open::before{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 22%, rgba(16,10,40,.92) 82%) }

.panel-head{ position:relative; z-index:2; background:none; border:0; color:#fff;
  text-align:left; padding:1.2rem; cursor:pointer; width:100% }
.panel-head h3{ margin:0; font-size:clamp(1.3rem,1rem+1.6vw,2.6rem); text-transform:uppercase;
  letter-spacing:-.02em; color:#fff }
.panel-head h3 span{ display:block; font-weight:700; opacity:.75; font-size:.8em }
/* pannelli chiusi: titolo ruotato in verticale */
.panel:not(.open) .panel-head{ position:absolute; inset:0; display:flex;
  align-items:flex-end; padding:1rem .6rem }
.panel:not(.open) .panel-head h3{ writing-mode:vertical-rl; transform:rotate(180deg);
  font-size:clamp(.95rem,.8rem+.7vw,1.4rem); white-space:nowrap }
.panel:not(.open) .panel-body{ display:none }

.panel-body{ position:relative; z-index:2; padding:0 1.4rem 1.6rem;
  opacity:0; transform:translateY(14px); transition:opacity .5s .25s, transform .5s .25s }
.panel.open .panel-body{ opacity:1; transform:none }
.pills li{ opacity:0; transform:translateY(12px); transition:opacity .45s var(--ease), transform .45s var(--ease) }
.panel.open .pills li{ opacity:1; transform:none }
.panel.open .pills li:nth-child(1){ transition-delay:.28s }
.panel.open .pills li:nth-child(2){ transition-delay:.36s }
.panel.open .pills li:nth-child(3){ transition-delay:.44s }
.panel.open .pills li:nth-child(4){ transition-delay:.52s }
.panel-lede{ font-weight:650; color:#fff; margin-bottom:1rem; max-width:44ch }
.pills{ list-style:none; margin:0 0 1.2rem; padding:0; display:flex; flex-wrap:wrap; gap:.5rem }
.pills li{ border:1px solid rgba(255,255,255,.45); border-radius:999px;
  padding:.38rem .85rem; font-size:.82rem; color:#fff; background:rgba(0,0,0,.18) }
.panel-cta{ font-family:var(--display); font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; font-size:.8rem; color:var(--acid); text-decoration:none }
.panel-cta:hover{ color:#fff }

@media (max-width:860px){
  .acc{ flex-direction:column; min-height:0 }
  .panel{ flex:none; border-left:0; border-top:1px solid rgba(0,0,0,.2) }
  .panel:not(.open){ min-height:64px }
  .panel:not(.open) .panel-head{ position:relative; inset:auto; padding:1rem 1.2rem }
  .panel:not(.open) .panel-head h3{ writing-mode:horizontal-tb; transform:none }
  .panel.open{ min-height:420px }
}

/* ─────────── nastro CTA ─────────── */

.marquee{ display:block; overflow:hidden; background:var(--acid); color:#000;
  padding:.8rem 0; text-decoration:none; transform:rotate(-1.2deg) scale(1.02);
  margin-block:clamp(2.5rem,6vw,4rem); position:relative; z-index:3 }
.marquee-track{ display:flex; gap:2rem; width:max-content;
  animation:slide 22s linear infinite;
  font-family:var(--display); font-size:clamp(1.1rem,3vw,1.9rem); font-weight:800;
  letter-spacing:-.02em; text-transform:uppercase }
.marquee-track i{ font-style:normal; opacity:.45 }
.marquee:hover .marquee-track{ animation-play-state:paused }
@keyframes slide{ to{ transform:translateX(-50%) } }

/* ─────────── metodo ─────────── */

.metodo{ padding-block:clamp(4rem,9vw,7rem) }
.leggi{ list-style:none; counter-reset:l; margin:0; padding:0 }
.leggi li{ counter-increment:l; border-top:1px solid rgba(255,255,255,.15);
  padding:1.9rem 0 1.5rem; display:grid; gap:.3rem 2rem; grid-template-columns:auto 1fr }
.leggi li::before{ content:counter(l,decimal-leading-zero); grid-row:span 2;
  font-family:var(--display); font-size:clamp(2rem,5vw,3.2rem); font-weight:800;
  line-height:.9; color:transparent; -webkit-text-stroke:1px var(--acid) }
.leggi h3{ margin:0 0 .3em; align-self:end; color:#fff }
.leggi p{ color:var(--ink-2); margin:0; font-size:.98rem }
.metodo-firma{ margin-top:2.4rem; font-size:1.05rem; color:var(--ink-2) }
.metodo-firma em{ font-style:normal; color:var(--acid) }

/* ─────────── prove ─────────── */

.prove{ background:var(--violet); padding-block:clamp(4rem,9vw,7rem) }
.proof{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:14px; padding:clamp(1.4rem,3vw,2rem);
  transition:background .3s, transform .3s var(--ease) }
.proof:hover{ background:rgba(255,255,255,.12); transform:translateY(-4px) }
.proof-tag{ font-family:var(--display); font-size:.68rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--acid); font-weight:700; margin-bottom:.9rem }
.proof h3{ color:#fff }
.proof p{ color:var(--ink-2); font-size:.95rem; margin:0 }
.nota{ margin-top:1.6rem; font-size:.85rem; opacity:.65 }

/* ─────────── sapere ─────────── */

.sapere{ padding-block:clamp(4rem,9vw,7rem) }
.art{ position:relative; border:1px solid rgba(255,255,255,.16); border-radius:14px;
  padding:1.5rem; background:rgba(255,255,255,.05) }
.art-n{ font-family:var(--display); font-size:.7rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--mag); font-weight:700 }
.art h3{ margin:.5rem 0 2rem; color:#fff }
.art-soon{ position:absolute; right:1rem; bottom:1rem; font-size:.7rem;
  letter-spacing:.18em; text-transform:uppercase; opacity:.55 }

/* ─────────── chi c'è dietro ─────────── */

.chi{ background:var(--indigo-2); padding-block:clamp(4rem,9vw,7rem) }
.chi-grid{ display:grid; gap:2.5rem }
@media (min-width:860px){ .chi-grid{ grid-template-columns:1.1fr .9fr } }
.chi-nome{ font-size:clamp(1.8rem,1rem+2.6vw,3rem) }
.chi p{ color:var(--ink-2); max-width:52ch }
.chi b{ color:#fff }
.chi-persona{ border-left:3px solid var(--acid); padding-left:1rem }
.agents{ list-style:none; margin:0; padding:0; display:grid; gap:.8rem }
.agents li{ display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05);
  border-radius:10px; padding:.9rem 1.1rem }
.agents b{ color:#fff; font-family:var(--display); letter-spacing:.02em }
.agents span{ color:var(--ink-2); font-size:.88rem; text-align:right }

/* ─────────── configuratore ─────────── */

.conf{ background:var(--cyanbg); color:var(--dark); padding-block:clamp(4rem,9vw,7rem) }
.conf .kicker{ color:var(--dark) }
.conf h2{ color:var(--dark) }
.conf .sec-intro{ color:#123 }
.conf-box{ background:#fff; border-radius:18px; padding:clamp(1.4rem,3.5vw,2.4rem);
  box-shadow:0 24px 70px rgba(10,20,60,.25); color:var(--dark) }
.conf-progress{ height:4px; background:#e3e8f0; border-radius:99px; overflow:hidden;
  margin-bottom:1.6rem }
.conf-progress i{ display:block; height:100%; width:0; background:var(--mag);
  transition:width .4s var(--ease) }
.conf-q{ font-family:var(--display); font-weight:800; font-size:clamp(1.2rem,1rem+1.2vw,1.7rem);
  margin-bottom:1.2rem; letter-spacing:-.02em }
.conf-opts{ display:grid; gap:.6rem }
@media (min-width:640px){ .conf-opts{ grid-template-columns:1fr 1fr } }
.conf-opt{ text-align:left; border:1.5px solid #d6dbe6; background:#fff; cursor:pointer;
  border-radius:12px; padding:.95rem 1.1rem; font:inherit; color:var(--dark);
  transition:border-color .2s, background .2s, transform .2s var(--ease) }
.conf-opt:hover{ border-color:var(--mag); transform:translateY(-2px) }
.conf-opt.sel{ border-color:var(--mag); background:#fff0f7 }
.conf-nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.5rem }
.conf-back{ background:none; border:0; cursor:pointer; font:inherit; color:#667;
  text-decoration:underline }
.conf-next{ font-family:var(--display); font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; font-size:.85rem; background:var(--dark); color:#fff;
  border:0; border-radius:6px; padding:.9rem 1.5rem; cursor:pointer;
  transition:background .2s, transform .2s var(--ease) }
.conf-next:hover{ background:var(--mag); transform:translateY(-2px) }
.conf-next:disabled{ opacity:.35; cursor:not-allowed; transform:none }
.conf-field{ display:block; margin-bottom:1rem }
.conf-field span{ display:block; font-weight:650; font-size:.9rem; margin-bottom:.35rem }
.conf-field input,.conf-field textarea{ width:100%; border:1.5px solid #d6dbe6;
  border-radius:10px; padding:.8rem .95rem; font:inherit; color:var(--dark) }
.conf-field textarea{ min-height:90px; resize:vertical }
.conf-recap{ background:#f4f6fb; border-radius:12px; padding:1rem 1.2rem;
  font-size:.92rem; margin-bottom:1.2rem }
.conf-recap b{ display:block; margin-bottom:.4rem }
.conf-done{ text-align:center; padding:1.5rem 0 }
.conf-done h3{ font-size:1.5rem }

/* ─────────── finale ─────────── */

.finale{ padding-block:clamp(5rem,12vw,9rem); text-align:center; overflow:hidden }
.finale .actions,.finale p:last-child{ justify-content:center }
.finale .btn{ margin:.4rem }

/* ─────────── footer ─────────── */

footer.site{ background:var(--indigo); border-top:1px solid rgba(255,255,255,.12);
  padding-block:2rem; color:var(--ink-2); font-size:.82rem; letter-spacing:.04em }
.foot{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between }
.foot p{ margin:0 }
footer.site a{ color:var(--ink-2); text-decoration:none }
footer.site a:hover{ color:var(--acid) }

/* ─────────── modale reel ─────────── */

.reel-modal{ position:fixed; inset:0; z-index:70; background:rgba(10,8,30,.92);
  display:grid; place-items:center; padding:4vh 4vw }
.reel-modal[hidden]{ display:none }
.reel-modal video{ width:min(100%,1100px); max-height:86vh; border-radius:12px;
  box-shadow:0 30px 100px rgba(0,0,0,.6) }
.reel-close{ position:absolute; top:1rem; right:1.4rem; background:none; border:0;
  color:#fff; font-size:2.4rem; cursor:pointer; line-height:1 }

/* ─────────── comparse ─────────── */

[data-rise]{ opacity:0; transform:translateY(30px);
  transition:opacity .9s var(--ease), transform .9s var(--ease) }
[data-rise].seen{ opacity:1; transform:none }
[data-rise-delay="1"]{ transition-delay:.1s }
[data-rise-delay="2"]{ transition-delay:.2s }
[data-rise-delay="3"]{ transition-delay:.3s }

/* ─────────── preferenze utente ─────────── */

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation:none !important; transition:none !important }
  [data-rise]{ opacity:1; transform:none }
  .li-in{ transform:none }
  canvas.aurora,#rain,#terreno,.ring{ display:none }
  .mesh{ animation:none }
  .w-in{ transform:none }
  .hero{ background:linear-gradient(160deg,#241b62,#3b1663) }
  .ruolo,.finale{ background:linear-gradient(160deg,#241b62,#1c1450) }
  .reel-card video,.panel video{ display:none }
  header.site.away{ transform:none }
}