/* ============================================================
   ECLYSS — Pagina Prodotto Principale
   Foglio di stile estratto da "eclyss_card_stats (1).html"
   ============================================================ */

@font-face{font-family:'Asul';src:url('../assets/fonts/Asul-Regular.ttf') format('truetype')}
@font-face{font-family:'Asul';font-weight:700;src:url('../assets/fonts/Asul-Bold.ttf') format('truetype')}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#000;--dark:#07070a;--purple:#7B2FFF;--purple-glow:#9B5FFF;--purple-light:#C084FC;
  --white:#fff;--gray:#666;--gray-light:#999;--gold:#F59E0B;
  /* Eclissi che si forma con lo scroll: --ecl va da 0 (sole e luna separati)
     a 1 (sovrapposti al centro). --ecl-gap = distanza di partenza dai due lati. */
  /* +360px oltre il mezzo-schermo: a --ecl 0 sole e luna sono del tutto fuori
     dai bordi (invisibili), entrano solo quando parte lo scroll/rotazione. */
  --ecl:0;--ecl-gap:calc(50vw + 360px);
}
html{scroll-behavior:smooth}
body{background:var(--black);color:var(--white);font-family:'Asul',sans-serif;overflow-x:hidden}

/* ── SCROLL PROGRESS ── */
#scrollProgress{
  position:fixed;top:0;left:0;height:2.5px;width:100%;
  background:linear-gradient(90deg,var(--purple),var(--purple-light));
  transform:scaleX(0);transform-origin:left;z-index:300;
  box-shadow:0 0 12px rgba(155,95,255,.65);pointer-events:none;
}

/* ── NAV ── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:200;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:12px 72px;
  background:rgba(0,0,0,0.55);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(123,47,255,0.12);
}
.nav-logo{justify-self:start;}
.nav-logo img{height:26px;filter:invert(1);vertical-align:middle}
.nav-links{
  display:flex;
  justify-content:center;
  gap:48px;
  list-style:none;
  justify-self:center;
}
.nav-links a{
  position:relative;
  font-family:'Asul',sans-serif;font-size:18px;font-weight:600;
  letter-spacing:2.8px;text-transform:uppercase;color:var(--gray-light);
  text-decoration:none;transition:color .2s;
  white-space:nowrap;
  padding-bottom:4px;
}
.nav-links a::after{
  content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--purple-light);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.nav-links a:hover{color:var(--white)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a.active{color:var(--purple-light)}
.nav-links a.active::after{transform:scaleX(1)}
@media (max-width:1080px){
  nav{padding:12px 24px}
  .nav-links{gap:22px}
  .nav-links a{font-size:16px;letter-spacing:1.5px}
}
/* ── CART ── */
.nav-cart{position:relative;justify-self:end;display:flex;align-items:center;gap:14px}
.menu-toggle{
  display:none;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  transition:background .2s,border-color .2s;
}
.menu-toggle:hover{background:rgba(123,47,255,.18);border-color:rgba(155,95,255,.5)}
.menu-toggle span{display:block;width:16px;height:1.5px;background:var(--white);transition:transform .25s ease,opacity .25s ease}
.menu-toggle.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.menu-toggle.open span:nth-child(2){opacity:0}
.menu-toggle.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.cart-btn{
  position:relative;display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  color:var(--white);cursor:pointer;transition:background .2s,border-color .2s;
}
.cart-btn:hover{background:rgba(123,47,255,.18);border-color:rgba(155,95,255,.5)}
.cart-btn svg{width:20px;height:20px}
.cart-count{
  position:absolute;top:-4px;right:-4px;
  min-width:16px;height:16px;padding:0 3px;border-radius:8px;
  background:var(--purple-light);color:#150022;
  font-family:'Asul',sans-serif;font-size:16px;font-weight:600;line-height:16px;text-align:center;
}
.cart-count[data-empty="true"]{display:none}
.cart-dropdown{
  position:absolute;top:calc(100% + 16px);right:0;width:320px;
  background:rgba(10,6,18,.92);backdrop-filter:blur(16px);
  border:1px solid rgba(123,47,255,.22);border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.55);
  padding:20px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
  z-index:250;
}
.nav-cart.open .cart-dropdown{opacity:1;visibility:visible;transform:translateY(0)}
.cart-dropdown-header{
  font-family:'Asul',sans-serif;font-size:17px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--white);margin-bottom:14px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cart-empty{
  font-family:'Asul',sans-serif;font-size:16px;line-height:1.6;color:var(--gray-light);
  padding:8px 0 4px;
}
.cart-items{display:flex;flex-direction:column;gap:10px}
.cart-item{display:flex;align-items:center;gap:12px}
.cart-item img{width:44px;height:44px;object-fit:cover;border-radius:8px;background:rgba(255,255,255,.05)}
.cart-item-info{display:flex;flex-direction:column;gap:4px}
.cart-item-name{font-family:'Asul',sans-serif;font-size:16px;color:var(--white);font-weight:600}
.cart-item-meta{font-family:'Asul',sans-serif;font-size:16px;color:var(--gray-light)}
.cart-item-qty{display:flex;align-items:center;gap:6px}
.cart-item-qty button{
  width:20px;height:20px;border-radius:50%;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.04);color:var(--white);font-size:16px;line-height:1;cursor:pointer;
}
.cart-item-qty button:hover{background:rgba(123,47,255,.28)}
.cart-item-qty span{font-family:'Asul',sans-serif;font-size:16px;min-width:14px;text-align:center}
.cart-item-right{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.cart-item-price{font-family:'Asul',sans-serif;font-size:16px;color:var(--purple-light);font-weight:700}
.cart-item-remove{background:none;border:none;color:var(--gray-light);font-size:17px;cursor:pointer;text-decoration:underline;padding:0}
.cart-item-remove:hover{color:#ef4444}
.cart-footer{margin-top:16px;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}
.cart-subtotal{
  display:flex;justify-content:space-between;align-items:center;
  font-family:'Asul',sans-serif;font-size:16px;color:var(--white);
  margin-bottom:14px;
}
.cart-subtotal span:last-child{font-weight:700;color:var(--purple-light);font-size:16px}
.cart-checkout{display:block;text-align:center;width:100%}

/* ── HERO ── */
/* 280vh -> 190vh: giro completo della lattina con molto meno scroll */
#scroll-stage{position:relative;height:160vh}
.hero{
  position:sticky;top:0;height:100vh;overflow:hidden;padding:0;
  background:radial-gradient(ellipse 80% 80% at 58% 50%,#1a0533 0%,#0a0010 55%,#000 100%);
}
.hero-row{
  display:grid;
  grid-template-columns:1fr 1.1fr;
  align-items:center;
  width:100%;
  min-height:100vh;
  position:relative;
  z-index:10;
  padding-top:72px;
  padding-left:0;
  padding-right:0;
}
.hero-nebula{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 55% 65% at 58% 50%,rgba(100,30,200,.38) 0%,transparent 70%),
    radial-gradient(ellipse 30% 30% at 25% 55%,rgba(80,0,180,.18) 0%,transparent 60%),
    radial-gradient(ellipse 35% 35% at 75% 25%,rgba(120,0,220,.14) 0%,transparent 60%);
  animation:nebula 7s ease-in-out infinite alternate;
}
@keyframes nebula{from{opacity:.7}to{opacity:1}}

/* Stars */
.stars{position:absolute;inset:0;pointer-events:none}
.star{position:absolute;background:#fff;border-radius:50%;animation:twinkle var(--d,3s) ease-in-out infinite var(--dl,0s)}
@keyframes twinkle{0%,100%{opacity:var(--lo,.15)}50%{opacity:var(--hi,.9)}}

/* ── Eclissi dietro la lattina — corona di fuoco ──
   Come un'eclissi solare: disco nero con bordo di luce sottile, e attorno
   fiamme sfrangiate che si muovono. Le fiamme sono due anelli identici
   (::before/::after, in controfase) "strappati" in lingue irregolari dal
   filtro SVG #flameFilter (feTurbulence animata + displacement, definito
   in index.html): il rumore si muove da solo, i livelli ruotano e pulsano. */
.eclipse-center-ring{
  position:absolute;
  top:50%;left:50%;
  /* Parte spostato a destra (+gap) e scivola al centro col crescere di --ecl */
  transform:translate(-50%,-50%) translateX(calc((1 - var(--ecl)) * var(--ecl-gap)));
  width:460px;height:460px;border-radius:50%;
  /* Disco nero pieno con bordo luminoso sottile (lilla ECLYSS) */
  background:#020103;
  box-shadow:
    0 0 4px 1px rgba(150,95,225,.22),
    0 0 16px 4px rgba(155,95,255,.14),
    0 0 54px 16px rgba(123,47,255,.08);
  transition:transform .7s cubic-bezier(.22,.61,.36,1),box-shadow 1s ease;
  pointer-events:none;
  z-index:1;
}
.eclipse-center-ring::before,
.eclipse-center-ring::after{
  content:'';position:absolute;inset:-80px;border-radius:50%;pointer-events:none;
  z-index:-1;
  /* Fiamma lilla/viola satura (niente bianco): il bagliore resta acceso
     ma abbastanza scuro da non rubare contrasto al titolo bianco */
  background:radial-gradient(circle,
    transparent 36%,
    rgba(206,160,255,.5) 48%,
    rgba(155,95,255,.42) 56%,
    rgba(123,47,255,.26) 67%,
    transparent 78%);
  filter:url(#flameFilter) blur(8px);
  animation:flameSpin 20s linear infinite;
}
/* Secondo livello identico, in controfase: quando uno divampa l'altro si ritira */
.eclipse-center-ring::after{
  animation-delay:-5s;
}
.eclipse-center-ring.eclipse-dark{
  /* Variante "sussurro corrotto": bordo e fiamme viola profondo */
  box-shadow:
    0 0 8px 2px rgba(150,90,220,.14),
    0 0 20px 5px rgba(96,20,156,.2),
    0 0 60px 18px rgba(66,14,116,.12);
}
.eclipse-center-ring.eclipse-dark::before,
.eclipse-center-ring.eclipse-dark::after{
  background:radial-gradient(circle,
    transparent 36%,
    rgba(205,170,250,.32) 44%,
    rgba(190,110,255,.55) 50%,
    rgba(123,30,220,.55) 58%,
    rgba(66,14,116,.4) 68%,
    transparent 78%);
}
@keyframes flameSpin{
  0%{transform:rotate(0deg) scale(1);opacity:.85}
  25%{transform:rotate(90deg) scale(1.06);opacity:1}
  50%{transform:rotate(180deg) scale(.98);opacity:.85}
  75%{transform:rotate(270deg) scale(1.06);opacity:1}
  100%{transform:rotate(360deg) scale(1);opacity:.85}
}

/* Lattina + eclissi al centro ESATTO dello schermo (desktop e mobile).
   L'eclissi (sole/luna) si centra su questo contenitore, la lattina ci sta
   sopra (z-index 8 > eclissi). Il testo dell'hero resta a sinistra su desktop. */
.hero-center{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
}

/* ── ECLISSI SUL SCROLL: SOLE + LUNA ──
   Due dischi guidati da --ecl (0 = ai bordi, sole a sx e luna a dx;
   1 = sovrapposti al centro dietro la lattina). La LUNA passa DAVANTI al
   sole (z-index maggiore). Entrambi stanno dietro la lattina (z-index 8). */
.eclipse-sun{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) translateX(calc((1 - var(--ecl)) * var(--ecl-gap) * -1));
  width:410px;height:410px;border-radius:50%;
  pointer-events:none;z-index:0;will-change:transform;
  /* Tutta la scena dell'eclissi (sole + corona) resa molto piu' trasparente;
     il disco nero della luna resta pieno (elemento separato, non toccato). */
  opacity:.45;
  /* nucleo bianco che sfuma nel viola ECLYSS (niente giallo) */
  background:radial-gradient(circle,
    rgba(189,168,226,.55) 0%,rgba(173,151,216,.4) 42%,rgba(165,128,220,.12) 57%,rgba(123,47,255,.05) 70%,transparent 80%);
  box-shadow:0 0 26px 7px rgba(155,95,255,.06);
}
/* Fiamme del sole: due anelli viola in controfase sfrangiati dal filtro SVG #flameFilter */
.eclipse-sun::before,
.eclipse-sun::after{
  content:'';position:absolute;inset:-46px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,
    transparent 44%,rgba(200,165,245,.5) 54%,rgba(155,95,255,.42) 64%,
    rgba(123,47,255,.26) 73%,transparent 82%);
  filter:url(#flameFilter) blur(7px);
  animation:flameSpin 20s linear infinite;
}
.eclipse-sun::after{animation-delay:-5s}

/* ── Variante "sussurro corrotto" (tasto 02): il sole si spegne ──
   Niente nucleo bianco: grigio ferro che scivola nel viola cupo e nel nero.
   La classe la mette il JS su .hero-center al click sui numeri laterali. */
.hero-center.eclipse-dark .eclipse-sun{
  background:radial-gradient(circle,
    #565160 0%,#403c48 50%,#2b2833 82%,#1c1a22 95%,
    rgba(18,16,22,1) 99%,transparent 100%);
  /* la spenta un po' meno trasparente della chiara */
  opacity:.62;
  box-shadow:
    0 0 10px 2px rgba(130,95,190,.12),
    0 0 40px 10px rgba(26,12,46,.3);
}
.hero-center.eclipse-dark .eclipse-sun::before,
.hero-center.eclipse-dark .eclipse-sun::after{
  background:radial-gradient(circle,
    transparent 44%,rgba(198,190,214,.6) 50%,rgba(140,134,150,.55) 58%,
    rgba(70,68,74,.45) 66%,rgba(24,23,26,.3) 75%,transparent 84%);
}
/* la corona spenta chiede una luna ancora più profonda, per staccare */
.hero-center.eclipse-dark .eclipse-moon{
  background:radial-gradient(circle,
    #000 0%,#000 58%,rgba(0,0,0,.94) 72%,rgba(0,0,0,.5) 86%,transparent 100%);
}
/* transizione morbida fra le due voci invece di uno scatto secco;
   transform con easing lungo = lo spostamento sullo scroll scivola fluido */
.eclipse-sun,.eclipse-moon{
  transition:transform .7s cubic-bezier(.22,.61,.36,1),
             background .45s ease,box-shadow .45s ease;
}
.eclipse-sun::before,.eclipse-sun::after{
  transition:background .45s ease,box-shadow .45s ease;
}

.eclipse-moon{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%) translateX(calc((1 - var(--ecl)) * var(--ecl-gap)));
  width:356px;height:356px;border-radius:50%;
  pointer-events:none;z-index:1;will-change:transform;
  /* cerchio nero dai bordi sfumati (non netti): sfuma nel trasparente */
  background:radial-gradient(circle,
    #000 0%,#000 52%,rgba(0,0,0,.9) 68%,rgba(0,0,0,.45) 84%,transparent 100%);
  filter:blur(5px);
}

/* Hero left content */
.hero-content{
  position:relative;z-index:10;
  /* 72px = stesso padding orizzontale della nav: logo e testi sullo stesso filo */
  padding:0 0 0 72px;
  align-self:center;
}
.hero-eyebrow{display:block;width:32px;height:2px;background:var(--purple);margin-bottom:28px}
.hero-title{
  font-family:'Asul',sans-serif;
  font-size:clamp(50px,6.4vw,88px);
  font-weight:700;line-height:.93;letter-spacing:1px;text-transform:uppercase;
  /* Ombra scura: stacca il titolo dal bagliore dell'eclissi */
  text-shadow:0 4px 28px rgba(0,0,0,.9),0 0 14px rgba(0,0,0,.55);
}
/* Solo desktop: compensa il cuscinetto ottico della "E" di Asul (~0.1em),
   cosi' l'inchiostro del titolo e' davvero sul filo del logo e dei testi */
@media (min-width:901px){
  .hero-title{margin-left:-0.1em}
}
.hero-title .eclipse{
  /* inline: "di ECLYSS" resta sulla stessa riga (3 righe totali, non 4) */
  color:var(--purple-light);white-space:nowrap;
  /* Il glow viola piu' un'ombra scura: "DI ECLYSS" resta leggibile anche
     sopra la fiamma lilla della stessa famiglia di colore */
  text-shadow:0 4px 24px rgba(0,0,0,.95),0 0 50px rgba(192,132,252,.75);
}
.hero-sub{
  font-family:'Asul',sans-serif;font-size:19px;font-weight:500;
  letter-spacing:4.5px;text-transform:uppercase;color:var(--gray-light);
  margin:18px 0 14px;
}
.hero-quote{
  font-family:'Asul',sans-serif;font-style:italic;font-size:20px;
  letter-spacing:1.5px;color:rgba(192,132,252,.75);margin:0 0 40px;
}
.btn-hero{
  display:inline-flex;align-items:center;gap:10px;
  margin-top:12px;
  font-family:'Asul',sans-serif;font-size:18px;font-weight:500;
  letter-spacing:3.5px;text-transform:uppercase;color:var(--white);
  border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.04);
  padding:14px 26px;cursor:pointer;border-radius:2px;
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;text-decoration:none;
}
.btn-hero:hover{border-color:var(--purple);background:rgba(123,47,255,.14);box-shadow:0 6px 28px rgba(123,47,255,.35);transform:translateY(-2px)}
.btn-hero:active{transform:translateY(0);box-shadow:0 2px 12px rgba(123,47,255,.3)}

/* Section numbers right */
.section-nums{
  /* 72px = stesso filo destro della nav (carrello) */
  position:absolute;right:72px;top:50%;transform:translateY(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:flex-end;gap:14px;
}
/* Pillole-bottone: bordo e sfondo come i bottoni della nav, cosi' si capisce
   subito che 01/02 sono cliccabili (scelta della lattina).
   [data-covered] = solo i numeri veri, non il trattino decorativo. */
.section-nums span[data-covered]{
  font-family:'Asul',sans-serif;font-size:17px;font-weight:600;
  color:var(--gray-light);letter-spacing:1px;cursor:pointer;
  position:relative;display:flex;align-items:center;gap:10px;
  padding:8px 16px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  transition:color .2s,border-color .2s,background .2s,box-shadow .2s;
}
/* Etichette 01/02 sempre visibili (statiche, senza comparsa su hover) */
.section-nums span::before{
  content:attr(data-label);
  font-family:'Asul',sans-serif;font-size:16px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.45);white-space:nowrap;
  transition:color .2s;
}
.section-nums span[data-covered]:hover::before{color:rgba(255,255,255,.7)}
.section-nums span[data-covered]:hover{color:var(--white);border-color:rgba(155,95,255,.5);background:rgba(123,47,255,.14)}
.section-nums span[data-covered].active{
  color:var(--purple-light);border-color:rgba(155,95,255,.65);
  background:rgba(123,47,255,.16);box-shadow:0 0 18px rgba(123,47,255,.35);
}
.section-nums span[data-covered].active::before{color:rgba(192,132,252,.7)}

/* Desktop: togli l'effetto pillola dai tasti 01/02, mantienilo in mobile */
@media (min-width:901px){
  .section-nums span[data-covered]{
    padding:0;border-radius:0;background:none;border:none;
  }
  .section-nums span[data-covered]:hover{border-color:transparent;background:transparent}
  .section-nums span[data-covered].active{border-color:transparent;background:transparent;box-shadow:none}
}

/* Scroll hint */
.scroll-hint{
  position:absolute;bottom:38px;left:50%;transform:translateX(-50%);
  z-index:10;display:flex;flex-direction:column;align-items:center;gap:8px;
  color:var(--gray);font-size:13.5px;font-weight:600;letter-spacing:4px;text-transform:uppercase;
}
.scroll-wheel{width:20px;height:34px;border:1.5px solid var(--gray);border-radius:12px;display:flex;justify-content:center;padding-top:5px}
.scroll-dot{width:3px;height:7px;background:var(--purple);border-radius:2px;animation:sdot 2s infinite}
@keyframes sdot{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(9px)}}

/* ── CAN 3D ── */
.hero-can{
  position:relative;
  z-index:8;user-select:none;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* Solo desktop: lattina centrata */
@media (min-width:901px){
  .hero-can{transform:translateX(0)}
}
#can-canvas{
  position:relative;z-index:2;
  display:block;
}
#loading-indicator{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.8rem;
  color:var(--gray);font-size:1rem;letter-spacing:.2em;text-transform:uppercase;
  transition:opacity .4s;pointer-events:none;
}
.spinner{
  width:28px;height:28px;
  border:2px solid rgba(123,47,190,.25);
  border-top-color:var(--purple-light);
  border-radius:50%;
  animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
#progress-ring{
  position:absolute;bottom:1.6rem;right:.6rem;
  width:34px;height:34px;z-index:10;
}
#progress-ring circle{fill:none;stroke-width:2;stroke-linecap:round;transform-origin:center;transform:rotate(-90deg)}
#progress-ring .bg{stroke:rgba(123,47,190,.18)}
#progress-ring .fg{stroke:var(--purple-light);stroke-dasharray:126;stroke-dashoffset:126;transition:stroke-dashoffset .04s linear}
.scroll-hint{transition:opacity .5s}
.skip-intro{
  position:absolute;bottom:.7rem;left:50%;transform:translateX(-50%);
  z-index:10;font-family:'Asul',sans-serif;font-size:12.5px;font-weight:600;
  letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.4);
  text-decoration:underline;text-underline-offset:3px;transition:color .2s;
}
.skip-intro:hover{color:var(--purple-light)}
.can-scene{position:relative;width:210px;height:420px;perspective:900px}
.can-spinner{
  width:100%;height:100%;position:relative;
  transform-style:preserve-3d;
  animation:can-float 4s ease-in-out infinite;
  filter:drop-shadow(0 0 55px rgba(123,47,255,.6)) drop-shadow(0 24px 44px rgba(0,0,0,.75));
}
@keyframes can-float{
  0%,100%{transform:rotateY(var(--ry,0deg)) translateY(0)}
  50%     {transform:rotateY(var(--ry,0deg)) translateY(-14px)}
}
.can-spinner.no-anim{animation:none}
.can-face{
  position:absolute;inset:0;
  border-radius:18px 18px 14px 14px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
}
.can-face-front{transform:rotateY(0deg)}
.can-face-back{transform:rotateY(180deg)}
.can-face img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.can-shade{
  position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(to right,
    rgba(0,0,0,.44) 0%,rgba(0,0,0,.07) 18%,
    rgba(255,255,255,.04) 48%,rgba(0,0,0,.07) 80%,rgba(0,0,0,.46) 100%);
}
.can-cap{
  position:absolute;left:50%;transform:translateX(-50%);
  width:210px;height:22px;border-radius:50%;z-index:20;pointer-events:none;
}
.can-cap-top{top:-7px;background:radial-gradient(ellipse,#777 0%,#3a3a3a 55%,#111 100%)}
.can-cap-bot{bottom:-5px;background:radial-gradient(ellipse,#2a2a2a 0%,#0d0d0d 100%)}
.can-tab{
  position:absolute;top:-17px;left:50%;transform:translateX(-50%);
  width:32px;height:12px;border-radius:5px;z-index:21;pointer-events:none;
  background:linear-gradient(to bottom,#999,#555);box-shadow:0 2px 6px rgba(0,0,0,.7);
}
.can-hint{
  text-align:center;font-family:'Asul',sans-serif;font-size:17px;
  letter-spacing:3px;text-transform:uppercase;color:rgba(255,255,255,.32);
  margin-top:18px;transition:opacity .5s;
}
.can-hint.hidden{opacity:0}

/* ── SECTIONS ── */
section{padding:76px 52px}
section[id]{scroll-margin-top:90px}
#how{scroll-margin-top:20px}
.section-label{
  font-family:'Asul',sans-serif;font-size:17px;font-weight:700;
  letter-spacing:4px;text-transform:uppercase;color:var(--purple-light);margin-bottom:18px;
  display:flex;align-items:center;justify-content:center;gap:12px;
}
.section-title{
  font-family:'Asul',sans-serif;font-size:clamp(34px,4.6vw,60px);
  font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-bottom:14px;
  text-shadow:0 0 34px rgba(123,47,255,.22);text-align:center;
}

/* ── EDIZIONE 01 — Il Respiro Originario ── */
.edition-showcase{background:var(--black);border-bottom:1px solid rgba(255,255,255,.05)}
.edition-hero-wrap{
  /* colonne a misura di contenuto e blocco centrato: niente vuoti ai lati.
     Invertite: foto a sinistra, testo a destra (order:-1 sulla foto). */
  display:grid;grid-template-columns:490px minmax(320px,580px);
  align-items:center;justify-content:center;gap:72px;
  max-width:1200px;margin:0 auto;position:relative;
}
.edition-grid{
  /* foto verticale (768x1024): riquadro 3/4, contenuto e centrato nella colonna */
  order:-1; /* foto prima del testo: colonna sinistra */
  position:relative;aspect-ratio:3/4;width:100%;max-width:490px;
  margin:0 auto;
  border-radius:16px;overflow:hidden;
  border:1px solid rgba(192,132,252,.22);
  box-shadow:0 0 40px rgba(123,47,255,.1);
}
.edition-media{
  position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 80% 70% at 50% 45%,#2a0a55 0%,#12002a 55%,#000 100%);
}
.edition-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.edition-media::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 55%,rgba(0,0,0,.55) 100%);
}
.edition-text{position:relative;z-index:3}
.edition-eyebrow{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.edition-num{font-family:'Asul',sans-serif;font-size:17px;font-weight:900;letter-spacing:2px;color:var(--white);text-shadow:0 2px 12px rgba(0,0,0,.8)}
.edition-eyebrow .num-line{width:38px;height:2px;background:var(--purple-light);display:block}
.edition-title{
  font-family:'Asul',sans-serif;font-size:clamp(38px,5vw,64px);font-weight:700;
  line-height:1.04;letter-spacing:1px;text-transform:uppercase;margin-bottom:24px;
  text-shadow:0 6px 34px rgba(0,0,0,.9),0 2px 10px rgba(0,0,0,.9);
}
/* chevron del bottone hero: staccato dal testo (gap del flex) e un po' piu' grande */
.btn-arrow{font-size:1.28em;font-weight:400;line-height:1;opacity:.9}
.edition-desc{font-size:19px;color:var(--white);line-height:1.6;font-weight:500;text-shadow:0 3px 18px rgba(0,0,0,.85)}
/* Card caratteristiche: riga orizzontale a tutta larghezza sotto testo e immagine */
.edition-specs{
  /* pila verticale dentro la colonna del testo: riempie l'altezza della foto */
  position:relative;z-index:3;
  list-style:none;display:flex;flex-direction:column;gap:11px;
  margin-top:26px;
}
.edition-specs li{
  display:flex;flex-direction:row;align-items:center;gap:14px;
  padding:11px 18px;text-align:left;
  background:linear-gradient(135deg,rgba(123,47,255,.16),rgba(255,255,255,.03));
  border:1px solid rgba(192,132,252,.3);border-radius:12px;
  backdrop-filter:blur(8px);
  font-family:'Asul',sans-serif;font-size:15px;font-weight:800;
  letter-spacing:1.1px;text-transform:uppercase;color:var(--white);line-height:1.25;
  box-shadow:0 10px 30px rgba(0,0,0,.4);
}
.edition-specs .spec-body{display:flex;flex-direction:column;gap:3px}
.edition-specs .spec-body small{
  font-family:inherit;font-size:12.5px;font-weight:400;letter-spacing:.4px;
  text-transform:none;color:var(--gray-light);line-height:1.35;
}
.edition-specs .spec-icon{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(192,132,252,.4),rgba(123,47,255,.14) 70%);
  border:1px solid rgba(192,132,252,.45);
  box-shadow:0 0 18px rgba(123,47,255,.4) inset,0 0 12px rgba(123,47,255,.35);
}
.edition-specs svg{width:19px;height:19px;color:var(--purple-light);flex-shrink:0;filter:drop-shadow(0 0 8px rgba(192,132,252,.7))}
/* Finestre medie: resta affiancato, ma le colonne si restringono invece di
   impilarsi di colpo (prima il breakpoint stackava gia' sotto i 1100px). */
@media (max-width:1100px){
  .edition-hero-wrap{grid-template-columns:minmax(260px,340px) minmax(240px,1fr);gap:32px}
  .edition-specs li{padding:9px 14px;font-size:13px;gap:10px}
  .edition-specs .spec-icon{width:32px;height:32px}
}
@media (max-width:820px){
  .edition-hero-wrap{grid-template-columns:1fr;justify-items:center;text-align:center;gap:32px}
  /* impilati: torna l'ordine originale, testo sopra e foto sotto */
  .edition-grid{order:0}
  .edition-text{max-width:500px;width:100%}
  .edition-desc{margin:0 auto}
  .edition-specs{display:grid;grid-template-columns:repeat(2,1fr);max-width:420px;margin:24px auto 0}
  .edition-specs li{flex-direction:column;text-align:center;justify-content:center;padding:14px 10px;font-size:13px;gap:10px}
  .edition-specs .spec-icon{width:38px;height:38px}
  /* La foto e' un campo lungo con la lattina piccola al centro: in un riquadro
     panoramico stretto risulta dispersiva. Qui si passa a un riquadro verticale
     e a object-fit:cover — si perde solo lo sfondo ai lati, la lattina (che sta
     nella fascia centrale dell'immagine) resta intera e piu' in evidenza. */
  .edition-grid{aspect-ratio:4/5;max-width:340px;margin:0 auto}
  .edition-media img{object-fit:cover;object-position:50% center}
}

/* ── APP DOWNLOAD ── */
.app-download{
  background:var(--black);border-bottom:1px solid rgba(255,255,255,.05);
  text-align:center;position:relative;overflow:hidden;
}
.app-download::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 55% 70% at 50% 100%,rgba(123,47,255,.12),transparent 70%);
}
.app-inner{max-width:820px;margin:0 auto;position:relative}
.app-lead{font-size:19px;color:var(--gray-light);line-height:1.6;max-width:560px;margin:0 auto 38px}
.app-buttons{display:flex;justify-content:center;gap:22px;flex-wrap:wrap}
.store-btn{
  display:inline-flex;align-items:center;gap:16px;
  min-width:250px;padding:18px 32px;border-radius:14px;
  border:1px solid rgba(192,132,252,.4);
  background:linear-gradient(135deg,rgba(123,47,255,.16),rgba(255,255,255,.03));
  color:var(--white);text-decoration:none;text-align:left;
  backdrop-filter:blur(8px);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:border-color .25s ease,background .25s ease,transform .25s ease,box-shadow .25s ease;
}
.store-btn:hover{
  border-color:rgba(192,132,252,.85);
  background:linear-gradient(135deg,rgba(123,47,255,.3),rgba(255,255,255,.05));
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(123,47,255,.4);
}
.store-btn svg{
  width:36px;height:36px;flex-shrink:0;color:var(--purple-light);
  filter:drop-shadow(0 0 10px rgba(192,132,252,.6));
}
.store-txt small{
  display:block;font-size:12px;font-weight:600;letter-spacing:2.5px;
  text-transform:uppercase;color:var(--gray-light);margin-bottom:3px;
}
.store-txt strong{
  font-family:'Asul',sans-serif;font-size:23px;font-weight:700;
  letter-spacing:1px;line-height:1.1;
}
@media (max-width:560px){
  .app-buttons{flex-direction:column;align-items:center;gap:14px}
  .store-btn{width:100%;max-width:330px;min-width:0;justify-content:flex-start}
}

/* ── COME FUNZIONA — Il Rituale ── */
.how{background:var(--black);border-bottom:1px solid rgba(255,255,255,.05);position:relative;overflow:hidden}
.how::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 55% at 50% 105%,rgba(123,47,255,.1),transparent 70%);
}
.how-inner{max-width:1480px;margin:0 auto;position:relative}
.how-hero-grid{max-width:720px;margin:0 auto 20px;text-align:center}
.how-hero-grid .section-label{margin-bottom:6px}
.how-hero-grid .section-title{margin-bottom:6px}
.how-lead{font-size:17px;color:var(--gray-light);line-height:1.35;max-width:560px;margin:0 auto}
.hl{color:var(--purple-light);font-weight:600}
.ritual-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;position:relative;align-items:start;max-width:1200px;margin:0 auto}
.ritual-step{position:relative;text-align:center}
.ritual-num{
  display:block;font-family:'Asul',sans-serif;font-size:18px;font-weight:600;
  letter-spacing:5px;color:var(--purple-light);margin-bottom:12px;
}
.ritual-frame{
  position:relative;height:300px;
  /* Stato "acceso" fisso (niente più hover a effetto bottone) */
  border:1.5px solid rgba(192,132,252,.9);border-radius:16px;
  background:linear-gradient(180deg,rgba(123,47,255,.08),rgba(0,0,0,.25));
  box-shadow:0 0 40px rgba(123,47,255,.26),inset 0 0 46px rgba(123,47,255,.08);
}
.ritual-media{
  position:absolute;inset:10px;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* contain, non cover: le foto sono verticali (lattina, carta, telefono) — cover le
   tagliava in alto/basso. Il gradiente della frame fa da cornice dietro l'immagine. */
.ritual-media img{width:100%;height:100%;object-fit:contain}
.ritual-media::after{
  content:'';position:absolute;inset:0;
  /* overlay molto leggero: le foto restano vive, non spente */
  background:rgba(0,0,0,.1);
}
.ritual-medal{
  position:absolute;bottom:-27px;left:50%;transform:translateX(-50%);
  width:54px;height:54px;border:1.5px solid rgba(192,132,252,.9);border-radius:50%;
  background:#050008;display:flex;align-items:center;justify-content:center;
  color:var(--purple-light);z-index:2;
  filter:drop-shadow(0 0 14px rgba(123,47,255,.5));
}
.ritual-medal svg{width:26px;height:26px}
.ritual-step h3{
  /* la medaglietta sporge 27px sotto il frame: il titolo parte piu' in basso */
  margin-top:44px;margin-bottom:4px;
  font-family:'Asul',sans-serif;font-size:21px;font-weight:600;
  letter-spacing:4px;text-transform:uppercase;color:var(--purple-light);
  transition:color .25s ease;
}
.ritual-step p{font-size:16px;color:#e8dff7;line-height:1.35;max-width:260px;margin:0 auto}
/* Hover solo desktop: i box restano accesi di default, l'hover li intensifica
   (non e' un effetto bottone che li "riaccende" da spenti). */
@media (hover:hover) and (pointer:fine){
  .ritual-frame,.ritual-medal,.ritual-num{transition:box-shadow .3s ease,border-color .3s ease,filter .3s ease,transform .3s ease,text-shadow .3s ease}
  .ritual-step:hover .ritual-frame{
    border-color:rgba(216,180,254,1);
    box-shadow:0 0 62px rgba(123,47,255,.5),inset 0 0 60px rgba(123,47,255,.16);
    transform:translateY(-4px);
  }
  .ritual-step:hover .ritual-medal{
    border-color:rgba(216,180,254,1);
    filter:drop-shadow(0 0 22px rgba(123,47,255,.85));
  }
  .ritual-step:hover .ritual-num{text-shadow:0 0 16px rgba(192,132,252,.9)}
  .ritual-step:hover h3{color:#f0e2ff}
}
.ritual-banner{
  margin-top:50px;border:1.5px solid rgba(150,80,255,.5);border-radius:18px;
  padding:30px 48px;display:flex;align-items:center;justify-content:center;gap:44px;
  background:linear-gradient(180deg,rgba(123,47,255,.06),rgba(0,0,0,.2));
  box-shadow:0 0 34px rgba(123,47,255,.1);
}
.rb-icon{color:var(--purple-light);flex-shrink:0;filter:drop-shadow(0 0 10px rgba(123,47,255,.5))}
.rb-icon svg{width:58px;height:58px}
.rb-text{text-align:center}
.rb-text p{
  font-family:'Asul',sans-serif;font-size:20px;font-weight:600;
  letter-spacing:4px;text-transform:uppercase;color:var(--gray-light);line-height:2;
}
.rb-cta{
  margin-top:12px;display:flex;align-items:center;justify-content:center;gap:20px;
  font-family:'Asul',sans-serif;font-size:30px;font-weight:700;
  letter-spacing:8px;text-transform:uppercase;color:var(--white);
}

/* ── BOX ── */
.box-section{
  background:var(--black);border-bottom:1px solid rgba(255,255,255,.05);
  position:relative;overflow:hidden;
}
.box-section::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 50% 65% at 20% 50%,rgba(123,47,255,.13),transparent 70%);
}
.box3d-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px 0;position:relative}
.box-fondo-img{width:100%;max-width:380px;height:auto;border-radius:8px}
.box-inner{display:grid;grid-template-columns:.75fr 1.5fr .75fr;gap:56px;align-items:center;max-width:1400px;margin:0 auto}
.box-inner > div:nth-child(2){text-align:center}
.box-label{justify-content:center;font-size:17px;letter-spacing:2px;text-transform:uppercase;color:var(--purple-light);font-weight:600;margin-bottom:10px;display:flex;align-items:center;gap:8px}
.box-title{font-family:'Asul',sans-serif;font-size:clamp(28px,3.8vw,46px);font-weight:600;letter-spacing:1px;text-transform:uppercase;line-height:1.1;margin-bottom:18px;text-shadow:0 0 30px rgba(123,47,255,.2)}
.box-desc{font-size:19px;color:var(--gray-light);line-height:1.6;margin-bottom:24px}
.box-price{font-family:'Asul',sans-serif;font-size:32px;font-weight:700;color:var(--purple-light);margin-bottom:20px}
.box-buy{display:flex;align-items:stretch;justify-content:center;gap:18px;flex-wrap:wrap}
.qty-stepper{
  display:flex;align-items:stretch;gap:2px;
  border:1px solid rgba(255,255,255,.16);border-radius:2px;overflow:hidden;
}
.qty-stepper .qty-btn{
  width:40px;background:rgba(255,255,255,.04);color:var(--white);
  border:none;font-size:18px;cursor:pointer;transition:background .2s;
}
.qty-stepper .qty-btn:hover{background:rgba(123,47,255,.28)}
.qty-stepper .qty-value{
  min-width:36px;display:flex;align-items:center;justify-content:center;
  font-family:'Asul',sans-serif;font-size:17px;font-weight:600;
}
.btn-purple{
  display:inline-block;font-family:'Asul',sans-serif;font-size:17px;font-weight:500;
  letter-spacing:3px;text-transform:uppercase;color:var(--white);
  background:var(--purple);padding:14px 28px;border:none;border-radius:2px;
  cursor:pointer;transition:background .2s ease,box-shadow .2s ease,transform .2s ease;text-decoration:none;
}
.btn-purple:hover{background:#9b5fff;box-shadow:0 8px 34px rgba(123,47,255,.5);transform:translateY(-2px)}
.btn-purple:active{transform:translateY(0)}
.box-feats{display:flex;flex-direction:column;gap:22px}
.box-feat{display:flex;align-items:center;gap:16px;padding-bottom:22px;border-bottom:1px solid rgba(255,255,255,.06)}
.box-feat:last-child{border-bottom:none;padding-bottom:0}
.box-feat-icon{width:24px;height:24px;flex-shrink:0;color:var(--purple-light);display:flex;align-items:center;justify-content:center}
.box-feat-icon svg{width:100%;height:100%;filter:drop-shadow(0 0 6px rgba(192,132,252,.5))}
.box-feat-text{font-family:'Asul',sans-serif;font-size:17px;font-weight:700;letter-spacing:2px;text-transform:uppercase}

/* ── FOOTER ── */
footer{
  background:linear-gradient(180deg,var(--dark) 0%,#0a0414 100%);
  border-top:1px solid rgba(123,47,255,.22);padding:54px 52px 30px;
}
.footer-mantra{display:flex;align-items:center;justify-content:center;gap:24px;margin-bottom:50px}
.fm-line{flex:0 0 110px;height:1px;background:linear-gradient(90deg,transparent,rgba(192,132,252,.55))}
.fm-line-r{background:linear-gradient(90deg,rgba(192,132,252,.55),transparent)}
.fm-txt{
  font-family:'Asul',sans-serif;font-size:17px;letter-spacing:2.5px;
  color:var(--purple-light);text-transform:uppercase;text-align:center;
  text-shadow:0 0 16px rgba(192,132,252,.3);
}
.footer-grid{display:grid;grid-template-columns:80px 1fr 1fr 1fr auto;gap:44px;margin:0 auto 44px;max-width:1400px;align-items:start}
.footer-col-title{font-family:'Asul',sans-serif;font-size:16px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--white);margin-bottom:18px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:10px}
.footer-links a{font-size:18px;color:var(--gray);text-decoration:none;transition:color .2s;letter-spacing:.5px}
.footer-links a:hover{color:var(--white)}
.social-col{display:flex;gap:12px}
.soc-btn{
  width:38px;height:38px;border:1px solid rgba(255,255,255,.14);border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--gray-light);
  text-decoration:none;transition:all .2s ease;
}
.soc-btn:hover{border-color:var(--purple);color:var(--white);background:rgba(123,47,255,.18);box-shadow:0 4px 16px rgba(123,47,255,.3);transform:translateY(-2px)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding-top:22px;display:flex;align-items:center;justify-content:space-between;max-width:1400px;margin:0 auto}
.footer-copy{font-size:17px;color:var(--gray);letter-spacing:1px;text-transform:uppercase}
.footer-legal{display:flex;gap:22px}
.footer-legal a{font-size:17px;color:var(--gray);letter-spacing:1px;text-transform:uppercase;text-decoration:none;transition:color .2s}
.footer-legal a:hover{color:var(--white)}

/* ── RESPONSIVE ── */
@media (max-width:900px){
  nav{grid-template-columns:1fr auto}
  .menu-toggle{display:flex}
  .nav-links{
    display:none;flex-direction:column;gap:0;
    position:absolute;top:calc(100% + 1px);left:0;right:0;
    background:rgba(8,4,14,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(123,47,255,0.18);
  }
  .nav-links.open{display:flex}
  .nav-links li{width:100%}
  .nav-links a{
    display:block;padding:18px 24px;font-size:16px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  .nav-links a::after{display:none}
  /* 56px sopra + 56px sotto = 113px di vuoto fra il contenuto di una sezione
     e quello della successiva: su telefono si leggeva come un buco. */
  section{padding:32px 24px}

  /* Hero: colonna singola, testo sopra e lattina intera sotto.
     Niente piu' altezza fissa 100vh + overflow:hidden: su schermi stretti il
     titolo piu' la lattina insieme superano il viewport, e la parte bassa
     della lattina veniva tagliata via dal clip della sezione. Impilando in
     flusso normale (altezza automatica) si vede tutta, semplicemente
     scorrendo un po' di piu'. */
  /* Su mobile l'hero è una schermata piena (non-sticky, affidabile).
     Lattina + eclissi già formata e centrata; lo scivolamento resta desktop. */
  #scroll-stage{height:auto}
  .hero{
    position:relative;top:auto;height:auto;min-height:100vh;
    overflow:hidden;padding-bottom:0;
  }
  /* L'alone dietro la lattina era pensato per un riquadro clippato (100vh):
     va ristretto qui, altrimenti sui telefoni sborda ai lati della pagina. */
  .eclipse-center-ring{width:320px;height:320px}
  .eclipse-sun{width:300px;height:300px}
  .eclipse-moon{width:262px;height:262px}
  /* Su mobile niente scivolamento da scroll: eclissi già formata e centrata
     dietro la lattina (lo scivolamento resta l'effetto desktop). */
  .eclipse-sun,.eclipse-moon{transform:translate(-50%,-50%)}
  /* Il filtro SVG di turbolenza scatta sui telefoni: qui il fuoco resta solo
     sfocato (blur puro, GPU) ma continua a ruotare e pulsare. */
  .eclipse-sun::before,
  .eclipse-sun::after{filter:blur(12px);inset:-30px}
  /* Il filtro SVG di turbolenza e' calcolato dalla CPU: sui telefoni fa
     scattare tutta la pagina. Qui la fiamma resta solo sfocata (blur puro,
     GPU) e continua a ruotare e pulsare via transform, che costa nulla. */
  .eclipse-center-ring::before,
  .eclipse-center-ring::after{
    filter:blur(16px);
    inset:-40px;
  }
  /* Impilato come una volta: testo in alto, lattina INTERA sotto (mai
     sovrapposta a scritte e pulsanti). L'eclissi resta centrata sulla
     lattina perche' sole/luna sono assoluti dentro .hero-center. */
  .hero-row{
    display:block;position:relative;
    /* 96px lasciava il titolo incollato sotto la nav: qui scende e respira */
    min-height:100vh;padding:136px 0 0;
  }
  .hero-content{
    position:static;padding:0 24px;text-align:center;
  }
  .hero-title{
    /* Il vincolo e' "NEL MONDO" su una riga sola: oltre non ci sta e il titolo
       passa a quattro righe. La misura segue la larghezza utile (100vw meno i
       48px di padding) invece di un valore fisso, cosi' tiene da 360px in su. */
    font-size:min(53px,calc((100vw - 48px) / 6.7));
    letter-spacing:.5px;
    /* Asul ha solo Regular e Bold: oltre il 700 il browser resta sulla stessa
       faccia, quindi per ingrossare davvero il titolo serve il contorno.
       currentColor lo fa funzionare anche su "di ECLYSS", che e' lilla. */
    -webkit-text-stroke:.7px currentColor;
    text-shadow:0 4px 30px rgba(0,0,0,.95),0 2px 8px rgba(0,0,0,.9),0 0 16px rgba(0,0,0,.7);
  }
  .hero-eyebrow{margin-left:auto;margin-right:auto}
  .btn-hero{margin:0 auto}
  .hero-center{
    /* annulla il centraggio assoluto desktop: qui sta in flusso, sotto il testo */
    position:relative;top:auto;left:auto;transform:none;
    margin:28px auto 0;display:flex;justify-content:center;
  }
  .section-nums{
    /* In flusso sotto la lattina, come prima, ma NON static: piu' sotto un
       margin-top negativo li fa risalire dentro la corsia di .hero-row
       (z-index 10), e su un elemento static lo z-index non ha effetto. La
       corsia finiva sopra 01/02 e ne mangiava i click. */
    position:relative;transform:none;
    /* right:auto azzera il right:72px della regola desktop: su un elemento
       relative quell'offset non ancora a destra, SPOSTA il blocco di 72px a
       sinistra, e 01/02 finivano scentrati rispetto alla lattina. */
    right:auto;
    flex-direction:row;justify-content:center;align-items:center;
    margin-top:32px;padding-bottom:36px;z-index:11;
  }
  .section-nums span::before{display:none}
  .num-line{display:none}
  .scroll-hint{display:none}
  /* L'anello di avanzamento finiva alla stessa altezza dei numeri 01/02
     e ci si sovrapponeva: su telefono e' solo ornamento, via anche lui. */
  #progress-ring{display:none}
  /* Su telefono "Peel to reveal" e il sottotitolo finiscono sopra il bagliore
     lilla dell'eclissi: in lilla/grigio non si leggevano, bianco con ombra. */
  .hero-quote{color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.85)}
  .hero-sub{color:rgba(255,255,255,.92);text-shadow:0 2px 14px rgba(0,0,0,.85)}

  .ritual-grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}

  /* Via la cornice attorno all'ultimo blocco di testo: resta solo il fondo. */
  .ritual-banner{flex-direction:column;text-align:center;padding:24px 14px;gap:16px;
    border:none;box-shadow:none;margin-top:28px}
  /* A 20px con 4px di spaziatura ogni frase si spezzava: "Custode o
     Interferente? Scopri il tuo legame" usciva su quattro righe. A 11px con
     mezzo pixel di spaziatura le tre frasi stanno su una riga ciascuna
     (319px utili contro i 302 di prima). */
  .rb-text p{font-size:11px;letter-spacing:.5px;line-height:1.7}
  .rb-cta{font-size:20px;letter-spacing:3px;gap:12px;margin-top:10px}

  .box-inner{grid-template-columns:1fr;text-align:center;gap:36px}
  .box-inner > div:nth-child(2){text-align:center}
  /* width:fit-content: il blocco si stringe attorno alla riga piu' lunga e
     si centra, ma dentro le righe partono tutte dallo stesso filo sinistro
     (con justify-content:center ogni riga si centrava per conto suo). */
  /* max-width al filo del bottone "Aggiungi al Carrello" (~306px): il blocco
     restava largo quanto la colonna (352px) e sporgeva di 23px per lato
     rispetto al bottone. width:fit-content resta per tenere le righe
     allineate allo stesso filo sinistro invece di centrarsi una per una. */
  .box-feats{max-width:306px;margin:0 auto;width:fit-content}
  .box-feat{justify-content:flex-start;text-align:left}

  .footer-grid{grid-template-columns:1fr 1fr;max-width:none;text-align:left}
  .footer-grid > div:first-child{grid-column:1 / -1;text-align:center;margin-bottom:8px}
  .footer-bottom{flex-direction:column;gap:14px;text-align:center}
  /* Via la riga orizzontale fra "Scarica l'App" e il footer. */
  .app-download{border-bottom:none}
  footer{border-top:none;padding:26px 24px 24px}
  /* Il mantra era incorniciato da due .fm-line che in colonna diventano barre
     ALTE 60px e larghe 0: invisibili, ma si mangiavano 130px di vuoto sopra e
     sotto la scritta. In verticale le cornici non servono. */
  .footer-mantra{flex-direction:column;gap:0;margin-bottom:26px}
  .fm-txt{white-space:normal;font-size:15px}
  .fm-line{display:none}
}

@media (max-width:560px){
  .ritual-grid{grid-template-columns:1fr;max-width:280px;margin:0 auto}
}
/* Blocco del dezoom: il clipping orizzontale sta su body (vedi sopra) e vale
   a qualsiasi larghezza. Su html invece va messo SOLO da mobile in giu':
   con overflow diverso da visible su html, position:sticky smette di
   funzionare e l'hero della home non si incollerebbe piu'. */
@media (max-width:900px){
  html{overflow-x:hidden}
}


/* ── INGRANDIMENTO CONTENUTI (solo desktop) ──
   Tutto leggermente piu' grande, "Il Respiro Originario" un po' di piu'.
   L'hero e' escluso di proposito: la sua altezza e' legata al viewport
   (100vh sticky) e lo zoom la sfalserebbe, rompendo rotazione ed eclissi. */
@media (min-width:901px){
  .edition-showcase{zoom:1.12}
  .how,
  .box-section,
  .app-download,
  footer{zoom:1.06}
}

/* Pulsante lingua IT/EN nella nav */
.lang-toggle{
  display:flex;align-items:center;justify-content:center;
  min-width:40px;height:40px;padding:0 10px;border-radius:20px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.14);
  color:#fff;cursor:pointer;
  font-family:'Asul',sans-serif;font-size:13px;font-weight:700;letter-spacing:1.5px;
  transition:background .2s,border-color .2s,color .2s;
}
.lang-toggle:hover{background:rgba(123,47,255,.18);border-color:rgba(155,95,255,.5);color:#C084FC}

/* Browser zoom / finestre desktop compatte.
   Lo zoom riduce la viewport CSS: prima che titolo, lattina e comandi possano
   sovrapporsi dentro l'hero fissa, la sola hero passa a un flusso verticale. */
@media (min-width:901px) and (max-width:1180px),
       (min-width:901px) and (max-height:720px){
  #scroll-stage{height:auto}
  .hero{
    position:relative;top:auto;height:auto;min-height:100vh;
    overflow:hidden;padding-bottom:0;
  }
  .hero-row{
    display:block;position:relative;min-height:0;
    padding:104px 0 48px;
  }
  .hero-content{position:relative;padding:0 32px;text-align:center}
  .hero-title{
    margin-left:0;font-size:clamp(42px,6vw,64px);line-height:.96;
  }
  .hero-eyebrow{margin-left:auto;margin-right:auto}
  .btn-hero{margin-left:auto;margin-right:auto}
  .hero-center{
    position:relative;top:auto;left:auto;transform:none;
    margin:30px auto 0;display:flex;justify-content:center;
  }
  .eclipse-sun,.eclipse-moon{transform:translate(-50%,-50%)}
  .section-nums{
    /* Stesso motivo della fascia telefono: relative + z-index, altrimenti la
       corsia di .hero-row copre 01/02 e i click non arrivano. */
    position:relative;z-index:11;transform:none;flex-direction:row;
    /* vedi la fascia telefono: senza right:auto il blocco slitta di 72px a sinistra */
    right:auto;
    justify-content:center;align-items:center;margin-top:28px;padding-bottom:28px;
  }
  .section-nums span::before{display:none}
  .scroll-hint,#progress-ring{display:none}
}

/* Prima si porta la lattina intera nello schermo, poi la si trattiene durante
   la rotazione. Il padding finale e' la corsia di scroll sotto la lattina.
   Questa soglia e' la STESSA usata da isMobileLayout() in js/index.js: dentro
   qui la rotazione e' guidata dal blocco dei gesti, non dallo scroll, quindi la
   corsia serve solo a trattenere la lattina e non deve essere mezza pagina.
   Ci rientrano anche i portatili 1280x720 e qualunque schermo con lo zoom del
   browser al 100% ma poco alto. */
@media (max-width:1180px), (max-height:720px){
  :root{--can-runway:10svh;--nums-drop:18px}
  .hero{overflow:clip}
  .hero-row{padding-bottom:calc(48px + var(--can-runway))}
  .hero-center{position:sticky;top:var(--can-sticky-top,88px)}
}

/* Fascia "portatile": stessa compensazione del telefono. Senza, i selettori
   01/02 restavano in fondo alla corsia, staccati dalla lattina di oltre 500px. */
@media (min-width:901px) and (max-width:1180px),
       (min-width:901px) and (max-height:720px){
  .section-nums{
    margin-top:calc(var(--nums-drop) - var(--can-runway));
    padding-bottom:calc(var(--can-runway) + 14px);
  }
}

@media (max-width:900px){
  /* Corsia di scorrimento sotto la lattina. Un valore solo, usato da tutti e
     tre i punti che devono restare sincronizzati: se divergono, i selettori
     01/02 si staccano dalla lattina o l'altezza della hero sbaglia.
     Ridotta da 65svh a 18svh: su telefono la rotazione NON e' guidata da questa
     corsia ma dal blocco dello scroll in js/index.js (compactRotationLocked),
     che ferma la pagina e fa girare la lattina con i gesti. Il resto era scroll
     morto: mezzo schermo di vuoto fra i selettori e "Il Respiro Originario".
     --nums-drop stacca i selettori dal bordo del canvas: a 0 risultavano
     incollati alla lattina. */
  :root{--can-runway:6svh;--nums-drop:18px}
  .hero-row{padding-bottom:var(--can-runway)}
  .hero-center{top:var(--can-sticky-top,84px)}
  /* I selettori risalgono nella fascia trasparente in fondo al canvas, cosi'
     restano attaccati alla lattina invece di comparire dopo tutta la corsia. */
  .section-nums{
    margin-top:calc(var(--nums-drop) - var(--can-runway));
    padding-bottom:calc(var(--can-runway) + 14px);
  }
}