/* ==================== TOKENS ==================== */
:root{
  --black:#060607;
  --black-2:#0d0e10;
  --black-3:#1c1d22;
  --charcoal:#232428;
  --red:#e2001a;
  --red-bright:#ff2438;
  --red-deep:#bd0015;
  --red-glow:rgba(226,0,26,.45);
  --silver:#e4e8ef;
  --led-glow:0 0 3px rgba(228,232,239,.35), 0 0 12px rgba(190,205,235,.2);
  --white:#f5f5f3;
  --text:#b4b5ba;
  --gray:#8c8c92;
  --gray-dim:#57585d;
  --border:rgba(245,245,243,.1);
  --border-strong:rgba(245,245,243,.22);
  --ff-display:'Syne', sans-serif;
  --ff-body:'Manrope', sans-serif;
  --ease:cubic-bezier(.16,.84,.44,1);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  background:var(--black);
  color:var(--white);
  font-family:var(--ff-body);
  overflow-x:hidden;
  cursor:default;
}
img{max-width:100%;display:block;}
button{font-family:inherit;border:none;background:none;cursor:pointer;color:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--red);color:var(--white);}

.accent{color:var(--silver);}
.accent-bg{background:var(--red);}

/* ==================== VERSIONE UOMO / DONNA ====================
   v-n = neutral (before the choice), v-m = uomo, v-f = donna */
/* colour of each version: blue LED detail for uomo, pink for donna */
html[data-v="m"]{--hl-a:#ff2438;--hl-b:#ffc2c8;--hl-glow:rgba(255,36,56,.5);--hl-thumb:#e2001a;}
html[data-v="f"]{--hl-a:#ff5fa8;--hl-b:#ffdcec;--hl-glow:rgba(255,95,168,.55);--hl-thumb:#ff5fa8;}
html[data-v] .hl,html[data-v] .hero-title .acc{
  background:linear-gradient(100deg,var(--hl-a) 0%,var(--hl-a) 40%,var(--hl-b) 50%,var(--hl-a) 60%,var(--hl-a) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:led-run 3.6s linear infinite;
  filter:drop-shadow(0 0 7px var(--hl-glow));
}
/* LED ring of the small switch and of the chips takes the colour of the version */
html[data-v] .vswitch.led-frame::before,html[data-v] .chip.led-frame::before{
  background:conic-gradient(from var(--led-js,var(--led-angle,0deg)),
    transparent 0deg, transparent 235deg, var(--hl-b) 290deg, var(--hl-a) 322deg, transparent 350deg, transparent 360deg);
}
/* blocks of the hero that change with the version */
.vb-m,.vb-f{display:none;}
html[data-v="m"] .vb-n,html[data-v="f"] .vb-n{display:none;}
html[data-v="m"] .vb-m,html[data-v="f"] .vb-f{display:block;animation:v-fade .7s var(--ease);}
.v-m,.v-f{display:none;}
html[data-v="m"] .v-n,html[data-v="f"] .v-n{display:none;}
html[data-v="m"] .v-m,html[data-v="f"] .v-f{display:inline;animation:v-fade .7s var(--ease);}
@keyframes v-fade{from{opacity:0;}to{opacity:1;}}

/* ==================== CURSOR GLOW ==================== */
.cursor-glow{
  position:fixed;top:0;left:0;
  width:420px;height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(226,0,26,.13) 0%, rgba(226,0,26,0) 70%);
  pointer-events:none;
  transform:translate(-50%,-50%);
  z-index:5;
  will-change:transform;
}
@media (max-width:768px), (pointer:coarse){ .cursor-glow{display:none;} }

/* ==================== PRELOADER ==================== */
.preloader{
  position:fixed;inset:0;z-index:999;
  background:var(--black);
  display:flex;align-items:center;justify-content:center;
}
.preloader-inner{
  display:flex;flex-direction:column;align-items:center;gap:18px;
  position:relative;z-index:2;
}
.preloader-orb{
  position:absolute;top:50%;left:50%;
  width:min(70vw,420px);height:min(70vw,420px);
  transform:translate(-50%,-50%);
  z-index:1;
}
.preloader-word{
  height:clamp(64px,11vw,100px);
  width:auto;
  opacity:0;
  transform:translateY(14px);
  filter:drop-shadow(0 0 4px rgba(245,245,243,.8)) drop-shadow(0 0 12px rgba(245,245,243,.45));
}
.preloader-line{
  width:clamp(120px,30vw,200px);height:2px;border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--red-bright) 30%, var(--silver) 70%, transparent);
  box-shadow:0 0 14px rgba(255,36,56,.7);
  transform-origin:left center;
  transform:scaleX(0);
  opacity:0;
}
.preloader-panel{
  position:absolute;top:0;height:100%;width:50%;
  background:var(--black-2);
  z-index:1;
}
.panel-left{left:0;}
.panel-right{right:0;}

/* ==================== LOGO TRANSITION ==================== */
.orbit-fx{
  position:fixed;inset:0;z-index:400;pointer-events:none;visibility:hidden;
  display:flex;align-items:center;justify-content:center;
}
.orbit-fx::before{
  content:'';position:absolute;inset:0;background:var(--black);opacity:var(--veil,0);
}
.fx-halo{
  position:absolute;width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle, rgba(245,245,243,.22) 0%, rgba(190,205,235,.1) 40%, transparent 70%);
  opacity:0;
}
.fx-logo{
  position:relative;height:clamp(84px,22vw,130px);width:auto;opacity:0;
  filter:drop-shadow(0 0 4px rgba(245,245,243,.8)) drop-shadow(0 0 12px rgba(245,245,243,.45));
}

/* ==================== LED TEXT — a pale light runs along the letters, soft flicker ==================== */
.led-text,.hero-title .acc{
  background:linear-gradient(100deg,#9a9ca3 0%,#9a9ca3 40%,#ffffff 50%,#9a9ca3 60%,#9a9ca3 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:led-run 4.5s linear infinite;
  filter:drop-shadow(0 0 5px rgba(190,205,235,.22));
}
.logo.led-text span{-webkit-text-fill-color:transparent;}
@keyframes led-run{0%{background-position:130% 0;}100%{background-position:-130% 0;}}

/* ==================== BUTTONS (never move: only colour and light change) ==================== */
.btn{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:0 28px;border-radius:100px;
  font-weight:700;font-size:16px;letter-spacing:.01em;line-height:1.1;
  text-align:center;user-select:none;-webkit-user-select:none;
  transition:background .25s, border-color .25s, box-shadow .25s, filter .25s, color .25s;
}
.btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.btn svg{flex:none;}
.btn-lg{min-height:60px;padding:0 34px;font-size:17px;}
.btn-sm{min-height:44px;padding:0 20px;font-size:14px;gap:10px;}
/* a button that also fades in on scroll keeps its colour transitions */
.btn.reveal-up{
  transition:opacity .8s var(--ease), transform .8s var(--ease), background .25s, border-color .25s, box-shadow .25s, filter .25s, color .25s;
}

/* EVERY BUTTON looks the same (12/11/2026, the "Avanti" style): black, a thin dark-red edge, a soft red glow
   underneath and the red LED running round the edge (the .led-frame light, in js/menu.js); icons in red.
   Main (.btn-primary) and secondary (.btn-secondary) buttons share it, so the site has one button style. */
.btn-primary,.btn-secondary,.turn-next{
  color:var(--white);
  background:linear-gradient(180deg,#1a1b1f 0%,#0b0b0d 100%);
  border:1px solid rgba(255,36,56,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 12px 28px -14px rgba(226,0,26,.55);
}
.btn-primary svg,.btn-secondary svg,.turn-next svg{color:var(--red-bright);}
.btn-primary.led-frame::before,.btn-secondary.led-frame::before,.turn-next.led-frame::before{padding:2px;filter:drop-shadow(0 0 6px rgba(255,36,56,.8));}
@media (hover:hover){
  .btn-primary:hover,.btn-secondary:hover,.turn-next:hover{border-color:rgba(255,36,56,.6);background:linear-gradient(180deg,#202127 0%,#0e0e11 100%);}
}
.btn-primary:active,.btn-secondary:active,.turn-next:active{border-color:rgba(255,36,56,.7);background:#140a0c;}
/* kept for anything that still names it */
@keyframes cta-glow{0%,100%{opacity:1;}}

.btn-ghost{color:var(--white);}

/* ripple burst on click: a quick flash of light from the tap point */
.btn-ripple{
  position:absolute;
  border-radius:50%;
  width:10px;height:10px;
  background:radial-gradient(circle, rgba(255,255,255,.95) 0%, rgba(255,70,70,.6) 35%, rgba(226,0,26,0) 72%);
  transform:translate(-50%,-50%) scale(0);
  pointer-events:none;
  animation:btn-ripple-burst .7s ease-out forwards;
}
@keyframes btn-ripple-burst{
  to{ transform:translate(-50%,-50%) scale(26); opacity:0; }
}

/* click glow: a soft bright orb that blooms from the tap point and fades.
   Lives on <body>, not clipped by the button, visible in the open page too. */
.click-glow{
  position:fixed;top:0;left:0;
  width:26px;height:26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.75) 22%, rgba(255,255,255,.22) 48%, rgba(255,255,255,0) 72%);
  transform:translate(-50%,-50%) scale(.3);
  pointer-events:none;
  z-index:300;
  mix-blend-mode:screen;
  animation:click-glow-bloom .85s cubic-bezier(.16,.84,.44,1) forwards;
}
@keyframes click-glow-bloom{
  0%{ transform:translate(-50%,-50%) scale(.3); opacity:0; }
  22%{ opacity:1; }
  100%{ transform:translate(-50%,-50%) scale(3.4); opacity:0; }
}

/* ==================== SCELTA UOMO / DONNA ==================== */
.gate{
  position:fixed;inset:0;z-index:150;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:24px;text-align:center;
  background:rgba(6,6,7,.5);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;
  transition:opacity .6s var(--ease), visibility .6s;
}
.gate.active{opacity:1;visibility:visible;}
.gate.instant{transition:none;}
.gate h2{font-family:var(--ff-display);font-size:clamp(18px,5vw,22px);font-weight:700;text-transform:uppercase;line-height:1.1;margin-bottom:22px;}
/* plain and simple: two outlined buttons */
.gate-options{display:flex;gap:12px;justify-content:center;}
.gate-btn{
  min-width:118px;height:48px;padding:0 22px;border-radius:100px;
  border:1px solid var(--border-strong);background:rgba(13,14,16,.55);
  font-family:var(--ff-display);font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--white);
  transition:background .25s, border-color .25s;
  /* LED halo: red for uomo, pink for donna */
  --g-a:#ff2438;--g-b:#ffc2c8;--g-glow:rgba(255,36,56,.5);--g-haze:rgba(255,36,56,.2);--g-tint:rgba(226,0,26,.14);
  border-color:var(--g-haze);
  box-shadow:0 0 14px var(--g-glow), 0 0 36px var(--g-haze);
}
.gate-btn[data-v="f"]{--g-a:#ff5fa8;--g-b:#ffdcec;--g-glow:rgba(255,95,168,.5);--g-haze:rgba(255,95,168,.2);--g-tint:rgba(255,95,168,.14);}
.gate-btn.led-frame::before{
  background:conic-gradient(from var(--led-js,var(--led-angle,0deg)),
    transparent 0deg, transparent 235deg, var(--g-b) 290deg, var(--g-a) 322deg, transparent 350deg, transparent 360deg);
}
.gate-btn[data-v="f"].led-frame::before{animation-delay:-3s;}
@media (hover:hover){ .gate-btn:hover{background:var(--g-tint);border-color:var(--g-a);} }
.gate-btn:active{background:var(--g-tint);border-color:var(--g-a);}
.gate-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;}

/* ==================== HEADER ==================== */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:18px clamp(20px,5vw,60px);
  transition:background .4s var(--ease), backdrop-filter .4s var(--ease), padding .4s var(--ease);
}
.site-header.scrolled{
  background:rgba(6,6,7,.7);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  padding-top:12px;padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
/* the name top left (12/11/2026): minimal, just the word, in the first page's title lettering
   ("La versione migliore di te esiste già": Montserrat), a lighter weight (600), white, a little spaced out */
.logo{
  justify-self:start;display:inline-flex;align-items:center;
  font-family:'Montserrat',var(--ff-body);font-weight:600;font-size:17px;line-height:1;
  letter-spacing:.1em;color:#fff;text-transform:uppercase;
}
.logo-name{margin-right:-.1em;}
@media (max-width:480px){ .logo{font-size:15px;} }
@media (max-width:359px){ .logo{display:none;} .brand-mark{height:52px;} .header-right{gap:6px;} }
.header-right{justify-self:end;display:flex;align-items:center;gap:8px;}

/* uomo / donna switch, under the hero title: the thumb slides like an iPhone toggle and takes the colour of the version */
.vswitch{
  position:relative;display:flex;width:196px;height:40px;margin:6px auto 0;border-radius:100px;
  border:1px solid var(--border-strong);background:rgba(6,6,7,.4);
  font-family:var(--ff-display);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
}
.vswitch.led-frame::before{padding:1.5px;}
/* nothing chosen yet (straight into the home): both words grey, no thumb */
html:not([data-v]) .vswitch-thumb{opacity:0;}
.vswitch-thumb{
  position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);border-radius:100px;
  background:var(--hl-thumb,#454952);box-shadow:0 0 12px var(--hl-glow,rgba(176,184,198,.42));
  transition:transform .38s cubic-bezier(.3,1.35,.5,1), background .3s, box-shadow .3s;
}
html[data-v="f"] .vswitch-thumb{transform:translateX(100%);}
.vswitch button{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;color:var(--gray);transition:color .3s;font:inherit;letter-spacing:inherit;text-transform:inherit;}
.vswitch button[aria-checked="true"]{color:#fff;}
.vswitch button:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:100px;}
.header-cta{
  min-height:0;padding:10px 22px;border-radius:100px;
  font-size:13px;font-weight:700;letter-spacing:1px;
  border:1px solid var(--border);
}
@media (hover:hover){ .header-cta:hover{border-color:var(--red);background:rgba(226,0,26,.08);} }
@media (max-width:640px){ .site-header .header-cta{display:none;} .site-header{padding-top:12px;padding-bottom:12px;} }

/* menu: the button opens a frosted layer, fading out toward the edges, with the entries in LED text */
.menu-btn,.menu-close{
  width:38px;height:44px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  color:var(--white);
}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--white);transition:background .25s;}
.menu-btn[aria-expanded="true"] span{background:var(--red-bright);}
@media (hover:hover){ .menu-btn:hover span{background:var(--silver);} }
.menu-btn:focus-visible,.menu-close:focus-visible{outline:2px solid var(--white);outline-offset:3px;}
.menu-panel{
  position:fixed;inset:0;z-index:140;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  background:radial-gradient(ellipse at center, rgba(6,6,7,.82) 0%, rgba(6,6,7,.5) 80%);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  opacity:0;visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s;
}
.menu-panel.open{opacity:1;visibility:visible;}
.menu-close{position:absolute;top:12px;right:calc(clamp(20px,5vw,60px) - 1px);}
@media (min-width:641px){ .menu-close{top:18px;} }
.menu-panel{gap:34px;}
.menu-panel a{
  position:relative;display:inline-block;padding:6px 14px;text-align:center;
  font-family:var(--ff-display);font-weight:500;text-transform:uppercase;letter-spacing:5px;
  font-size:clamp(13px,3.6vw,17px);line-height:1.2;white-space:nowrap;
  filter:drop-shadow(0 0 8px rgba(205,215,235,.35));
}
.menu-panel a.led-text{background-image:linear-gradient(100deg,#bcc0ca 0%,#bcc0ca 40%,#ffffff 50%,#bcc0ca 60%,#bcc0ca 100%);}
/* a short red LED line between the entries */
.menu-panel a + a::before{
  content:'';position:absolute;top:-19px;left:50%;width:30px;height:2px;margin-left:-15px;border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--red-bright) 30%,var(--red-bright) 70%,transparent);
  box-shadow:0 0 10px rgba(255,36,56,.8);
}
.menu-panel a:focus-visible{outline:2px solid var(--white);outline-offset:4px;}

/* ==================== BRAND MARK (animated logo) ==================== */
.brand-mark{
  position:relative;
  display:flex;align-items:center;justify-content:center;
  height:64px;
  perspective:260px;
}
.brand-mark-img{
  height:100%;width:auto;
  -webkit-user-drag:none;
  pointer-events:none;
  filter:drop-shadow(0 0 3px rgba(245,245,243,.8)) drop-shadow(0 0 10px rgba(245,245,243,.45));
}

/* ==================== HERO ==================== */
/* phone: the whole portrait photo on top; the text starts below the belt, so it never covers the abs */
.hero{
  position:relative;
  /* the first screen: photo, title and the Uomo / Donna choice fill it */
  min-height:100svh;
  text-align:center;
  overflow:hidden;
  padding:100vw clamp(20px,5vw,60px) 44px;
}
.hero-media{position:absolute;inset:0;z-index:0;}
.hero-photo-wrap{
  position:absolute;top:-12vw;left:0;right:0;aspect-ratio:1334/2000;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  background:
    radial-gradient(circle at 70% 30%, rgba(226,0,26,.12), transparent 55%),
    linear-gradient(160deg, #151619 0%, #0a0a0b 60%, #050506 100%);
}
.hero-photo{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  opacity:.95;
  filter:contrast(1.03);
}
.hero-photo-wrap.img-missing .hero-photo{display:none;}
.hero-photo-fallback{
  display:none;position:absolute;inset:0;
  border:1px dashed rgba(245,245,243,.15);
}
.hero-photo-wrap.img-missing .hero-photo-fallback{display:block;}
.hero-photo-fallback span{
  position:absolute;top:90px;left:50%;transform:translateX(-50%);
  color:var(--gray-dim);
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  max-width:200px;text-align:center;
  padding:8px 14px;border:1px solid rgba(245,245,243,.12);border-radius:10px;
  background:rgba(0,0,0,.3);
}
.hero-vignette{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(0deg, rgba(6,6,7,.9) 0%, rgba(6,6,7,.32) 36%, rgba(6,6,7,.1) 62%, transparent 100%),
    linear-gradient(90deg, rgba(6,6,7,.38) 0%, transparent 20%, transparent 80%, rgba(6,6,7,.38) 100%);
}
.hero-noise{
  position:absolute;inset:0;z-index:3;opacity:.05;mix-blend-mode:overlay;pointer-events:none;
  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='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-content{position:relative;z-index:4;max-width:760px;}

/* a simple, heavy headline sans that grabs the eye: one block of text, sentence case, balanced if it wraps */
.hero-title{
  font-family:'Montserrat',var(--ff-body);
  font-weight:800;
  font-size:clamp(28px,7.8vw,46px);
  line-height:1.12;
  letter-spacing:-.015em;
  text-transform:none;
  text-wrap:balance;
  margin-bottom:16px;
}
.hero-title .line{color:var(--white);}@media (max-width:640px){
  .hero{padding-bottom:44px;}
}
.hero-title .line{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.1em;}
.hero-title .line span.inner{display:block;transform:translateY(110%);}

.hero-sub{
  font-size:clamp(13px,1.6vw,17px);
  color:var(--text);
  line-height:1.5;
  margin:0 auto 22px;
  max-width:420px;
}
.hero-cta-row{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;}

/* the version-specific lines: a title, one lead, two LED chips, one closing line */
.hero-lead{font-size:15px;font-weight:400;line-height:1.55;color:#dfe0e4;max-width:34ch;margin:0 auto 16px;}
.hero-lead strong{font-weight:700;color:#fff;}
/* one line of words that change by themselves, under the title: it finishes "di più" without six boxes */
.hero-words{margin:-4px 0 14px;text-align:center;font-size:clamp(17px,5vw,21px);font-weight:700;line-height:1.3;min-height:1.4em;}
.hw-rot{display:inline-grid;}
.hw-rot b{
  grid-area:1/1;opacity:0;font-weight:700;
  color:var(--hl-b,#fff);text-shadow:0 0 18px var(--hl-glow,rgba(255,36,56,.5));
  animation:hw-cycle 12s ease-in-out infinite;animation-delay:calc(var(--i) * 2s);
}
@keyframes hw-cycle{
  0%{opacity:0;transform:translateY(10px);filter:blur(3px);}
  3%,13%{opacity:1;transform:none;filter:none;}
  16.6%,100%{opacity:0;transform:translateY(-10px);filter:blur(3px);}
}
@media (prefers-reduced-motion:reduce){
  .hw-rot{display:inline;}
  .hw-rot b{display:inline;opacity:1;animation:none;}
  .hw-rot b + b::before{content:' · ';color:var(--gray);}
}

/* desktop: text on the left, the photo on the right half */
@media (min-width:900px){
  .hero{display:flex;align-items:center;justify-content:flex-start;min-height:100svh;padding:100px clamp(40px,6vw,90px) 60px;}
  .hero-photo-wrap{top:0;left:50%;bottom:0;aspect-ratio:auto;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 28%);mask-image:linear-gradient(90deg,transparent 0%,#000 28%);}
  .hero-photo{object-position:center 22%;}
  .hero-content{max-width:520px;margin-left:clamp(0px,3vw,40px);}
  .hero-title{font-size:clamp(46px,4.6vw,66px);}
  .hero-lead{font-size:16px;}
}

/* one short line that says what he does, above the hero title */
.hero-what{margin:0 0 8px;text-align:center;font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--silver);}

/* ==================== STATS (il banner: i numeri brillano d'argento) ==================== */
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  padding:90px clamp(20px,5vw,60px);
  border-bottom:1px solid var(--border);
  gap:30px;
}
.stat-item{text-align:center;position:relative;isolation:isolate;}
/* a soft halo of the version's colour behind each number, breathing slowly */
.stat-item::before{
  content:'';position:absolute;left:50%;top:clamp(22px,4vw,40px);z-index:-1;
  width:clamp(110px,26vw,220px);height:clamp(70px,15vw,130px);transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,var(--hl-glow,rgba(255,36,56,.5)),transparent);
  opacity:.55;filter:blur(8px);animation:stat-halo 4.5s ease-in-out infinite;
}
.stat-item:nth-child(2)::before{animation-delay:-1.5s;}
.stat-item:nth-child(3)::before{animation-delay:-3s;}
@keyframes stat-halo{0%,100%{opacity:.55;}50%{opacity:.9;}}
.stat-fig{
  display:inline-block;
  background:linear-gradient(100deg,#c3c8d3 0%,#c3c8d3 36%,#ffffff 50%,#c3c8d3 64%,#c3c8d3 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:led-run 3.6s linear infinite;
  filter:drop-shadow(0 0 12px rgba(225,232,245,.5));
}
.stat-item:nth-child(2) .stat-fig{animation-delay:-1.2s;}
.stat-item:nth-child(3) .stat-fig{animation-delay:-2.4s;}
.stat-num,.stat-plus{
  font-family:var(--ff-display);
  font-size:clamp(34px,6.6vw,70px);
}
.stat-item p{color:var(--gray);font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-top:6px;}

/* ==================== SECTION HEAD ==================== */
/* every section title sits in the middle of the page (12/11/2026), with its red line under it */
.section-head{padding:80px clamp(20px,5vw,60px) 32px;max-width:800px;margin-left:auto;margin-right:auto;text-align:center;}
/* SECTION TITLES (12/11/2026): the poster's lettering, no more silver-grey. Tall condensed capitals in white;
   the last words in the site's red with a light running through them (like the buttons' LED) and a soft red glow;
   under the title a short glowing red line */
.section-head .accent,.book-title .accent{
  background:linear-gradient(100deg,var(--red) 0%,var(--red-bright) 38%,#ffd2d6 50%,var(--red-bright) 62%,var(--red) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:led-run 5s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,36,56,.45));
}
.section-head h2::after,.book-title::after{
  content:'';display:block;width:64px;height:2px;margin:14px auto 0;border-radius:2px;
  background:linear-gradient(90deg,var(--red-deep),var(--red-bright) 50%,var(--red-deep));
  box-shadow:0 0 10px rgba(255,36,56,.75);
}
/* the form's heading in the middle too: "Ultimo passo", the title and the line under it (the fields stay as they are) */
.book-label,.book-title{text-align:center;}
.book .lead-intro{text-align:center;margin-left:auto;margin-right:auto;}
.eyebrow{
  display:inline-block;color:var(--gray);
  font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;
  margin-bottom:14px;
}
.section-head h2, .final-cta h2{
  font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;
  font-size:clamp(30px,7.6vw,52px);
  text-transform:uppercase;letter-spacing:.01em;
  line-height:1.04;color:#fff;
}
@media (max-width:640px){
  .section-head{padding-top:56px;padding-bottom:22px;}
  .stats{padding-top:34px;padding-bottom:30px;}
  .packages .section-head{padding-top:34px;}
}

/* ==================== PACKAGES: compact blocks, so two or three show on one screen ==================== */
.packages{padding-bottom:40px;}
.packages .section-head,.plan-list{max-width:520px;margin-left:auto;margin-right:auto;}
.plan-list{display:grid;gap:18px;padding:0 clamp(20px,5vw,60px);}
/* each block is one tap target; the LED moves slowly, calm rather than nervous */
.plan{cursor:pointer;transition:border-color .25s, background-color .25s;}
.plan.led-frame::before{animation-duration:10s;}
.plan:active{border-color:rgba(255,36,56,.45);}
@media (hover:hover){ .plan:hover{border-color:rgba(245,245,243,.25);} }
.plan-tag.plan-tag-soft{background:transparent;color:var(--silver);border:1px solid var(--border-strong);}
/* 12 mesi: a little gold, the premium option (only the LED ring and the tag) */
.plan.plan-gold.led-frame::before{
  background:conic-gradient(from var(--led-js,var(--led-angle,0deg)),
    transparent 0deg, transparent 255deg, rgba(255,238,196,.95) 282deg, #e8c46a 300deg, #b8892e 322deg, transparent 344deg, transparent 360deg);
}
.plan-gold .plan-tag.plan-tag-soft{color:#e8c46a;border-color:rgba(232,196,106,.5);}
.plan{
  position:relative;display:flex;flex-direction:column;gap:6px;
  padding:16px 18px 18px;border:1px solid var(--border);border-radius:18px;background:var(--black-2);
}
/* minimal: no grey fill inside the blocks, only the LED ring draws them */
/* premium: deep black with a soft light from the top in each plan's colour, a thicker glowing LED,
   a lifted shadow. No grey fill. */
.plan{
  --tint:255,255,255;
  background:
    radial-gradient(120% 70% at 50% -10%,rgba(var(--tint),.13),transparent 60%),
    linear-gradient(180deg,#0d0d10,#060607);
  border:1px solid rgba(var(--tint),.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 24px 40px -24px rgba(0,0,0,.9),0 0 30px -12px rgba(var(--tint),.25);
}
.plan.featured{--tint:255,36,56;border-color:rgba(255,36,56,.55);}
.plan-gold{border-color:rgba(232,196,106,.45);}
/* the gold blocks get a second beam in red, running from the opposite side; 6 mesi is red all through */
.plan.plan-gold.led-frame::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:2px;
  background:conic-gradient(from var(--led-js2,var(--led-angle,0deg)),transparent 0deg,transparent 280deg,rgba(255,180,180,.9) 300deg,var(--red-bright) 322deg,var(--red) 340deg,transparent 356deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:led-spin-rev 8s linear infinite;
  filter:drop-shadow(0 0 6px rgba(255,36,56,.7));
  pointer-events:none;z-index:2;
}
.plan-tag{box-shadow:0 0 14px rgba(226,0,26,.55);}
.plan-tag.plan-tag-soft{box-shadow:none;}
.plan.plan-gold{--tint:232,196,106;}
.plan.led-frame::before{padding:2px;filter:drop-shadow(0 0 6px rgba(var(--tint),.7));}
.plan h3{text-shadow:0 0 18px rgba(var(--tint),.25);}
/* buttons: 2 mesi light (clearly visible), 6 mesi red, 12 mesi black with a gold edge */
.plan .btn[data-plan-key="2m"],
.plan .btn[data-plan-key="12m"]{
  color:#f4dd9a;background:linear-gradient(180deg,#17171b,#050506);
  border:1.5px solid rgba(232,196,106,.85);
  box-shadow:inset 0 1px 0 rgba(255,238,196,.18),0 10px 26px -12px rgba(232,196,106,.55);
}
@media (hover:hover){
  .plan .btn[data-plan-key="2m"]:hover,
  .plan .btn[data-plan-key="12m"]:hover{border-color:#f4dd9a;}
}
/* 6 mesi: the same dark button as the other two, drawn by a red LED running round it */
.plan .btn[data-plan-key="6m"]{
  color:#fff;background:linear-gradient(180deg,#17171b,#050506);
  border:1.5px solid rgba(255,36,56,.45);
  box-shadow:inset 0 1px 0 rgba(255,200,205,.14),0 10px 26px -12px rgba(255,36,56,.6);
}
.plan .btn[data-plan-key="6m"].led-frame::before{padding:2px;filter:drop-shadow(0 0 6px rgba(255,36,56,.8));animation-duration:4s;}
@media (hover:hover){ .plan .btn[data-plan-key="6m"]:hover{border-color:rgba(255,36,56,.8);} }
/* everything sits in the middle of the block */
.plan{text-align:center;}
.plan-head{display:flex;align-items:center;justify-content:center;gap:12px;}
.plan h3{font-family:var(--ff-display);font-size:20px;letter-spacing:.5px;text-transform:uppercase;}
.plan-tag{font-size:11px;font-weight:700;color:#fff;background:var(--red);padding:4px 10px;border-radius:100px;line-height:1.2;}
/* prices are set in the plain body face, normal spacing, so every digit reads clearly */
.plan-steps{display:flex;flex-direction:column;gap:6px;}
.plan-step{display:flex;flex-direction:column;align-items:center;gap:2px;}
.plan-step-label{font-size:11px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;color:var(--gray);}
.plan-amount{
  font-family:var(--ff-body);font-weight:800;font-variant-numeric:lining-nums;
  font-size:34px;line-height:1.05;letter-spacing:0;color:var(--white);
}
.plan-step-sub{margin-top:2px;font-size:12px;font-weight:600;color:var(--gray);}
/* the second price is the one people miss: it gets its own zone, hung from a round arrow badge,
   with the LED streak running around it */
/* minimal: no box, a thin red line with the arrow badge in the middle marks "then" */
.plan-step-next{
  position:relative;margin-top:14px;padding:18px 0 0;
  border-top:1px solid rgba(255,36,56,.45);
}
.plan-then{
  position:absolute;z-index:3;top:-12px;left:50%;margin-left:-12px;
  width:24px;height:24px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;background:linear-gradient(180deg,#ff3347,var(--red-deep));
  box-shadow:0 0 0 4px var(--black), 0 8px 18px -6px rgba(226,0,26,.9);
}
.plan-step-next .plan-step-label{color:var(--white);font-size:12px;}
.plan-ul{text-decoration:underline;text-decoration-color:var(--red-bright);text-decoration-thickness:2px;text-underline-offset:4px;}
/* comparison price: what the same period costs with 2-month renewals, struck through in red */
.plan-was{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap;gap:2px 10px;}
.plan-was s{
  font-size:24px;font-weight:800;line-height:1.1;
  color:#ff6b78;
  text-decoration:line-through;text-decoration-color:#ff2438;text-decoration-thickness:3px;
}
.plan-was span{font-size:12px;color:var(--gray);}
.plan .btn{width:100%;margin-top:8px;min-height:46px;font-size:15px;}
@media (min-width:1000px){
  .packages .section-head,.plan-list{max-width:1040px;}
  .plan-list{grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch;}
  .plan .btn{margin-top:auto;}
}

/* ==================== FAQ ==================== */
.faq-list{padding:0 clamp(20px,5vw,60px) 100px;max-width:900px;}
.faq-item{border-top:1px solid var(--border);}
.faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:26px 0;text-align:left;font-size:clamp(16px,2vw,20px);font-weight:600;
  position:relative;overflow:hidden;
}
.faq-q:focus-visible{outline:2px solid var(--white);outline-offset:2px;}
.faq-icon{
  position:relative;width:18px;height:18px;flex:none;margin-left:20px;
}
.faq-icon::before,.faq-icon::after{
  content:'';position:absolute;background:var(--white);transition:transform .35s var(--ease);
}
.faq-icon::before{top:50%;left:0;width:100%;height:2px;transform:translateY(-50%);}
.faq-icon::after{left:50%;top:0;height:100%;width:2px;transform:translateX(-50%);}
.faq-item.open .faq-icon::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-item.open .faq-icon::before{background:var(--red-bright);}
.faq-a-wrap{
  display:grid;grid-template-rows:0fr;
  transition:grid-template-rows .4s var(--ease);
}
.faq-item.open .faq-a-wrap{grid-template-rows:1fr;}
.faq-a{overflow:hidden;}
.faq-a p{color:var(--gray);line-height:1.7;padding-bottom:26px;max-width:640px;}
.faq-a p:not(:last-child){padding-bottom:10px;}

/* ==================== LED ANIMATED BORDER ====================
   a bright red streak that chases around the box edge,
   like an animated LED strip. Reusable on any rounded card. */
@property --led-angle{
  syntax:'<angle>'; inherits:false; initial-value:0deg;
}
.led-frame{ position:relative; isolation:isolate; }
.led-frame::before{
  content:'';
  position:absolute; inset:0;
  border-radius:inherit;
  padding:1.5px;
  background:conic-gradient(from var(--led-js,var(--led-angle,0deg)),
    transparent 0deg,
    transparent 255deg,
    rgba(255,180,180,.9) 282deg,
    var(--red-bright) 300deg,
    var(--red) 322deg,
    transparent 344deg,
    transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  animation:led-spin 6s linear infinite;
  pointer-events:none;
  z-index:2;
}
@keyframes led-spin{ to{ --led-angle:360deg; } }
/* some browsers compute this animation but never repaint it: js/menu.js (LED borders) then
   writes the angle on each box on screen (--led-js, --led-js2) and the CSS clock just waits */
.led-js .led-frame::before,.led-js .led-frame::after{animation-play-state:paused;}
/* recommended plan: a second beam chases from the opposite side (Magic UI "border beam") */
.plan.featured.led-frame::after{
  content:'';position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from var(--led-js2,var(--led-angle,0deg)),transparent 0deg,transparent 255deg,rgba(255,180,180,.9) 282deg,var(--red-bright) 300deg,var(--red) 322deg,transparent 344deg,transparent 360deg);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:led-spin-rev 6s linear infinite;
  pointer-events:none;z-index:2;
}
@keyframes led-spin-rev{ from{ --led-angle:180deg; } to{ --led-angle:540deg; } }
@media (prefers-reduced-motion:reduce){.plan.featured.led-frame::after{animation:none;}}

/* ==================== CAROUSEL (prima/dopo e recensioni: si scorre verso destra) ==================== */
.carousel-track{
  display:flex;gap:12px;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:6px clamp(20px,5vw,60px);
  scroll-padding-left:clamp(20px,5vw,60px);
}
.carousel-track::-webkit-scrollbar{display:none;}
.carousel-track:focus-visible{outline:2px solid var(--white);outline-offset:-2px;}
.carousel-track > *{scroll-snap-align:start;}
.carousel-nav{display:flex;justify-content:center;gap:12px;margin-top:16px;}
.carousel-btn{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);background:rgba(255,255,255,.04);color:var(--white);
  transition:border-color .25s, background .25s, opacity .25s;
}
.carousel-btn:active{background:rgba(255,255,255,.12);}
@media (hover:hover){ .carousel-btn:hover{border-color:rgba(245,245,243,.55);background:rgba(255,255,255,.08);} }
.carousel-btn:disabled{opacity:.3;pointer-events:none;}
.carousel-btn:focus-visible{outline:2px solid var(--white);outline-offset:3px;}

/* ==================== PRIMA / DOPO ==================== */
.ba-card{
  flex:0 0 min(90%,440px);
  display:flex;height:240px;
  background:var(--charcoal);
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}
.ba-half{
  flex:1;display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:14px;letter-spacing:2px;
  color:var(--gray-dim);background:var(--black-3);
}
.ba-half.accent-bg{color:rgba(255,255,255,.85);background:var(--red);}
/* a real before/after: ONE finished image (assets/pdNN.webp, 1288x800) with both photos and the
   Prima / Dopo labels already inside, made in "LOCANDINA BENVENUTO COACHING/PRIMA DOPO CLIENTI".
   The site shows it whole: nothing is cropped or zoomed here. */
.ba-card.ba-photo{height:auto;background:var(--black-3);}
.ba-img{display:block;width:100%;height:auto;aspect-ratio:1288/800;}
#transformations .carousel-track{align-items:center;}
/* smaller cards than the other carousels */
#transformations .ba-card{flex-basis:min(74%,340px);}
/* "Guarda gli altri cambiamenti": opens the Instagram profile */
.ba-more{display:flex;justify-content:center;padding:22px clamp(20px,5vw,60px) 0;}
.ba-more svg{color:var(--red-bright);}
.section-jump{display:flex;justify-content:center;padding:18px clamp(20px,5vw,60px) 10px;}
/* more before/after on Instagram */
.ig-cta{display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px clamp(20px,5vw,60px) 0;text-align:center;}
.ig-cta p{font-size:14px;color:var(--text);}
.ig-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:100px;
  font-weight:700;font-size:14px;color:var(--white);
  border:1px solid rgba(255,36,56,.5);background:rgba(226,0,26,.08);
  box-shadow:0 0 18px -6px rgba(226,0,26,.7);
  transition:background .25s, border-color .25s;
}
.ig-link svg{color:var(--red-bright);}
@media (hover:hover){ .ig-link:hover{background:rgba(226,0,26,.16);border-color:var(--red-bright);} }
.ig-link:focus-visible{outline:2px solid var(--white);outline-offset:3px;}

/* ==================== RECENSIONI ==================== */
.review-card{
  flex:0 0 min(80%,320px);
  background:var(--charcoal);
  border:1px solid var(--border);
  border-radius:16px;
  padding:20px 20px;
  position:relative;
}
.review-stars{color:var(--silver);text-shadow:0 0 8px rgba(190,205,235,.5);letter-spacing:2px;font-size:15px;margin-bottom:12px;}
.review-quote{color:var(--white);line-height:1.6;font-size:14.5px;}
/* review cards: who / where it comes from on top, then the text (Google) or the chat (WhatsApp);
   each card as tall as its own content, so opening one doesn't stretch the others */
#reviews .carousel-track{align-items:flex-start;}
.review-card{display:flex;flex-direction:column;}
.rv-head{display:flex;align-items:center;gap:10px;margin-bottom:14px;}
.rv-logo{width:26px;height:26px;flex:none;}
.rv-who{display:flex;flex-direction:column;min-width:0;line-height:1.25;}
.rv-who b{font-size:14.5px;font-weight:700;color:var(--white);}
.rv-who span{font-size:11.5px;color:var(--gray);}
.rv-stars{margin-left:auto;color:#fbbc04;font-size:14px;letter-spacing:1px;text-shadow:0 0 8px rgba(251,188,4,.45);}
/* Google: the first six lines, smaller and tighter on the card so fewer reviews need "Leggi tutta";
   it opens the whole review in the sheet */
.rv-text{
  color:var(--white);font-size:13px;line-height:1.48;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden;
}
.rv-more{align-self:flex-start;margin-top:8px;padding:4px 0;font-size:13px;font-weight:700;color:var(--red-bright);}
.rv-more[hidden]{display:none;}
/* WhatsApp: the dark chat background and grey incoming bubbles, with the time in the corner.
   A long chat shows its first messages and fades out; "Leggi tutta" opens it whole in the sheet */
.rv-chat{flex:1;display:flex;flex-direction:column;gap:6px;padding:10px 9px;border-radius:12px;background:#0b141a;max-height:230px;overflow:hidden;}
.review-card.is-long .rv-chat{-webkit-mask-image:linear-gradient(180deg,#000 70%,transparent);mask-image:linear-gradient(180deg,#000 70%,transparent);}
/* Telegram: same card, Telegram's dark colours */
.rv-tg .rv-chat{background:#0e1621;}
.rv-tg .rv-bubble{background:#182533;color:#f5f5f5;}
.rv-tg .rv-bubble time{color:#6d7f8f;}
/* a reply to one of Rodrigo's messages, quoted on top of the bubble as Telegram shows it */
.rv-reply{display:block;margin:0 0 6px;padding:3px 8px;border-left:3px solid #6ab3f3;border-radius:4px;background:rgba(106,179,243,.12);font-size:12.5px;line-height:1.35;color:#c7d3dd;}
.rv-reply b{display:block;color:#6ab3f3;font-weight:700;}
.rv-bubble{
  position:relative;align-self:flex-start;max-width:92%;padding:7px 10px 18px;border-radius:10px;
  background:#202c33;color:#e9edef;font-size:13px;line-height:1.4;
}
.rv-bubble:first-child{border-top-left-radius:0;}
.rv-bubble time{position:absolute;right:8px;bottom:4px;font-size:10.5px;color:#8696a0;}

/* the whole review: a sheet rising from the bottom (phone) / a box in the middle (computer),
   scrolling on its own; the text a bit larger to read comfortably */
.rv-sheet{
  position:fixed;inset:0;z-index:250;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(0,0,0,.7);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;transition:opacity .25s var(--ease), visibility .25s;
}
.rv-sheet.open{opacity:1;visibility:visible;}
.rv-sheet-panel{
  position:relative;width:100%;max-width:560px;max-height:90svh;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--border);border-bottom:0;border-radius:22px 22px 0 0;background:var(--charcoal);
  transform:translateY(100%);transition:transform .3s var(--ease);
}
.rv-sheet.open .rv-sheet-panel{transform:none;}
.rv-sheet-close{
  position:absolute;top:10px;right:10px;z-index:1;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--white);background:rgba(255,255,255,.08);
}
.rv-sheet-close:focus-visible{outline:2px solid var(--white);outline-offset:2px;}
.rv-sheet-body{
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-behavior:smooth;
  padding:20px 20px calc(34px + env(safe-area-inset-bottom));scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) transparent;
}
/* a soft fade at the bottom edge: it tells you there is more below, so the box doesn't end with a hard cut */
.rv-sheet-panel::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;
  background:linear-gradient(180deg,rgba(35,36,40,0),var(--charcoal));
}
.review-card.rv-full{border:0;padding:0;background:none;}
.rv-full .rv-head{padding-right:46px;margin-bottom:12px;}
/* smaller than a normal page, but still comfortable: 14px with a little air between lines */
.rv-full .rv-text{display:block;-webkit-line-clamp:unset;overflow:visible;font-size:14px;line-height:1.58;color:rgba(245,245,243,.92);}
.rv-full .rv-chat{max-height:none;-webkit-mask-image:none;mask-image:none;gap:5px;padding:8px;}
.rv-full .rv-bubble{font-size:13.5px;line-height:1.45;max-width:96%;}
@media (min-width:700px){
  .rv-sheet{align-items:center;}
  .rv-sheet-panel{border-bottom:1px solid var(--border);border-radius:22px;max-height:80vh;transform:translateY(24px);}
}
@media (prefers-reduced-motion:reduce){ .rv-sheet,.rv-sheet-panel{transition:none;} }
.reviews{padding-bottom:30px;}
@media (max-width:640px){ .final-cta{padding-top:48px;padding-bottom:28px;} }

/* ==================== CHI SONO: anteprima in home e pagina dedicata ==================== */
.photo-ph{
  position:relative;
  aspect-ratio:4/5;max-height:440px;width:100%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  padding:16px;color:var(--gray);font-size:13px;
  border:1px solid var(--border);border-radius:20px;
  background:
    radial-gradient(circle at 30% 20%, rgba(226,0,26,.2), transparent 55%),
    linear-gradient(160deg,#17181c,#0a0a0b);
  -webkit-mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 68%,transparent 100%);
}
.about-teaser{padding-bottom:60px;}
.about-teaser-body{
  max-width:520px;padding:0 clamp(20px,5vw,60px);
  display:flex;flex-direction:column;gap:18px;
}
.about-teaser .btn{width:100%;}
/* "Scopri come ho fatto": a red LED runs around it, with a faint red glow */
.teaser-btn.led-frame::before{padding:2px;filter:drop-shadow(0 0 6px rgba(255,36,56,.7));}
.teaser-btn{border-color:rgba(255,36,56,.35);box-shadow:0 0 18px rgba(226,0,26,.18);}
/* the first slide of the story as a poster on the home */
.teaser-poster{
  display:block;align-self:center;width:min(62%,260px);aspect-ratio:2/3;
  border-radius:18px;overflow:hidden;background:#000;
}
.teaser-poster img{width:100%;height:100%;object-fit:cover;}
.about-teaser .section-head{text-align:center;margin:0 auto;}
.about-teaser-body{margin:0 auto;}
/* the short story under the poster, instead of a link to the Chi sono page */
.about-text{max-width:34ch;margin:4px auto 0;text-align:center;font-size:15.5px;line-height:1.6;color:var(--text);}
.about-text strong{color:var(--white);font-weight:800;}

/* ==================== COME INIZIAMO (three steps, same flow as the Chi sono page) ==================== */
.steps{padding-bottom:60px;}
.steps .section-head{text-align:center;margin:0 auto;}
.steps-list{max-width:520px;margin:0 auto;padding:0 clamp(20px,5vw,40px);}
.step-n{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;font-size:22px;text-shadow:0 0 8px rgba(255,36,56,.8);transition:transform .5s var(--ease), box-shadow .5s, background .5s;}
/* the light that keeps passing from step to step */
.steps-list li.is-active .step-n{transform:scale(1.1);background:rgba(226,0,26,.3);box-shadow:0 0 28px 2px rgba(255,36,56,.85);}

/* ==================== THE THREE SCREENS (html[data-stage], set by js/main.js goStage) ==================== */
html[data-stage="scelta"] .stage-domande,html[data-stage="scelta"] .stage-prenota,
html[data-stage="domande"] .stage-scelta,html[data-stage="domande"] .stage-prenota,
html[data-stage="prenota"] .stage-scelta,html[data-stage="prenota"] .stage-domande{display:none !important;}
/* the in-between screen (photo + "Se pensi" + Avanti) shows only on its own stage */
html:not([data-stage="svolta"]) .stage-svolta,
html[data-stage="svolta"] .stage-scelta,html[data-stage="svolta"] .stage-domande,html[data-stage="svolta"] .stage-prenota{display:none !important;}
html:not([data-stage="prenota"]) .floating-cta{display:none;}
/* questions screen: nothing on top but the logo mark */
html[data-stage="domande"] .site-header .logo,html[data-stage="svolta"] .site-header .logo{visibility:hidden;}

/* ==================== SCHERMATA DI PASSAGGIO (after the quiz, before the form) ==================== */
/* one phone screen: the photo (edges dissolving into black), the "Se pensi" diagram, the Avanti button */
.turn{
  position:relative;isolation:isolate;
  min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:calc(56px + env(safe-area-inset-top)) 0 calc(24px + env(safe-area-inset-bottom));
  overflow:clip;text-align:center;
}
/* bigger: on the phone it runs a little past the sides (its side edges are already faded to black, so nothing
   that shows is lost) and up to ~68% of the height; its faded bottom sits under the diagram, which rides up onto it */
.turn-photo{
  /* top:-3svh = the photo sits a little higher (13/11/2026) without moving the diagram or the Avanti button */
  position:relative;top:-3svh;z-index:1;margin:0;flex:none;
  width:min(114vw,calc(68svh * 1288 / 1600),720px);aspect-ratio:1288/1600;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 12%,#000 70%,transparent 100%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
.turn-photo img{display:block;width:100%;height:100%;object-fit:cover;}
/* the diagram in three columns: the brackets always sit exactly in the middle of the screen, in line with the
   Avanti button (before, the longer "Hai ragione" pushed them to the left). On wide but short screens the
   lettering follows the height too, so Avanti stays on screen */
.think-map.turn-map{
  position:relative;z-index:3;width:100%;box-sizing:border-box;
  display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;
  font-size:clamp(12px,min(3.8vw,3.1svh),30px);
  margin-top:-9svh;padding:0 clamp(4px,2vw,40px);text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.turn-map .think-l{justify-self:end;}
.turn-map .think-r{justify-self:start;}
/* Avanti: the site's button style (black with the red LED, see BUTTONS), placed under the diagram */
.turn-next{position:relative;z-index:3;margin-top:clamp(18px,3svh,38px);min-width:200px;}

/* ==================== LA LOCANDINA (first thing after "Avanti") ==================== */
/* The poster is one image (1080x1520) with the card drawn inside it: card edges at x 45-1035, y 56-1462,
   corners ~48px. The frame crops exactly to the card (no black around it) and the red LED runs on its edge */
.vip{padding:calc(76px + env(safe-area-inset-top)) clamp(14px,4vw,40px) 18px;display:flex;justify-content:center;}
.vip-card{
  /* as wide as the phone allows, but never taller than the screen under the header (laptops) */
  position:relative;margin:0;width:min(100%,440px,calc((100svh - 104px) * 990 / 1406));aspect-ratio:990/1406;overflow:hidden;
  border-radius:4.85% / 3.41%;
  box-shadow:0 0 46px -12px rgba(226,0,26,.55),0 24px 60px -30px rgba(0,0,0,.9);
}
.vip-card img{display:block;width:109.09%;max-width:none;height:auto;margin:-5.657% 0 0 -4.545%;}
.vip-card.led-frame::before{padding:2.5px;filter:drop-shadow(0 0 8px rgba(255,36,56,.9));}
/* it rises in softly when the screen opens */
html[data-stage="prenota"] .vip-card{animation:vipIn .8s var(--ease) .15s both;}
@keyframes vipIn{from{opacity:0;transform:translateY(18px) scale(.985);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){ html[data-stage="prenota"] .vip-card{animation:none;} }
/* the form now comes after the reviews: a little air above it */
.vip ~ .book{padding-top:56px;}
/* entrance: the photo fades in with a slow zoom out, then the diagram, then the button */
html[data-stage="svolta"] .turn-photo{animation:turnPhoto 1.2s var(--ease) both;}
html[data-stage="svolta"] .turn-map{animation:turnUp .6s var(--ease) .35s both;}
html[data-stage="svolta"] .turn-next{animation:turnUp .5s var(--ease) .65s both;}
@keyframes turnPhoto{from{opacity:0;transform:scale(1.06);}to{opacity:1;transform:none;}}
@keyframes turnUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
@media (prefers-reduced-motion:reduce){
  html[data-stage="svolta"] .turn-photo,html[data-stage="svolta"] .turn-map,html[data-stage="svolta"] .turn-next{animation:none;}
}
#main{transition:opacity .18s var(--ease);}
#main.is-leaving{opacity:0;}
/* first screen: the choice right under the title */
.hero-choice{margin-top:22px;}
/* second screen: the questions fill the screen, in the middle */
.cq{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:72px;}
/* third screen: the booking form at the top */
/* kept compact so that, on a phone, the arrow under the button is still inside the first screen */
.book{padding:72px clamp(20px,5vw,40px) 10px;}
.book-box{max-width:480px;margin:0 auto;display:flex;flex-direction:column;gap:12px;}
.book .lead-form{gap:10px;}
.book .lead-slot span{min-height:42px;}
.book-label{color:var(--red-bright);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;}
.book-title{font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;font-size:clamp(30px,7.6vw,48px);letter-spacing:.01em;line-height:1.04;text-transform:uppercase;color:#fff;}
/* a bit smaller than the other big buttons, so the hint below still fits in the first screen */
/* small and centred, not as wide as the form */
.lead-form .btn.book-submit{width:auto;align-self:center;min-height:44px;padding:0 26px;font-size:14.5px;margin-top:4px;}
/* "there is more below": one line with a small red arrow pointing down; a tap scrolls to the results */
.book-more{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px auto 0;font-size:13px;font-weight:600;color:var(--gray);}
.book-more svg{flex:none;color:var(--red-bright);}
@media (hover:hover){ .book-more:hover{color:var(--white);} }
.book-more:focus-visible{outline:2px solid var(--white);outline-offset:4px;border-radius:10px;}
.story-sec{padding-bottom:50px;}
.story-sec .section-head{text-align:center;margin:0 auto;}
/* under the quiz title: what happens at the end */
.cq-lead{margin:12px auto 0;max-width:34ch;font-size:14.5px;line-height:1.5;color:var(--text);text-align:center;}
.cq-lead strong{color:var(--white);font-weight:700;}

/* Chi sono page: title, the story in four slides, then the text */
.page-top,.page-text{max-width:720px;margin:0 auto;padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px);}
.page-top{padding-top:104px;}
.page-top h1{
  font-family:var(--ff-display);font-weight:700;
  font-size:clamp(28px,6vw,46px);line-height:1.08;text-transform:uppercase;
  margin:4px 0 22px;
}
.page-text{padding-top:34px;padding-bottom:60px;}
.page-lead{font-size:20px;line-height:1.4;font-weight:500;color:var(--white);max-width:30ch;margin-bottom:26px;}
.page-lead strong{font-weight:800;}
.page-cta{margin-top:34px;}
.page-cta .btn{width:100%;}

.story-carousel{max-width:760px;margin:0 auto;}
.story-slide{
  flex:0 0 min(80%,360px);aspect-ratio:2/3;
  border-radius:18px;overflow:hidden;background:#000;
}
.story-slide img{width:100%;height:100%;object-fit:cover;}
/* rewritten headline over a slide: covers the original text, same poster style (sizes follow the slide width) */
.story-slide{position:relative;container-type:inline-size;}
.slide-cover{
  position:absolute;left:0;right:0;top:0;height:27%;z-index:1;
  display:flex;flex-direction:column;align-items:center;padding-top:6.5cqw;text-align:center;
  background:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,0) 100%);
  font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;
}
.slide-label{display:flex;align-items:center;gap:2.4cqw;font-size:2.7cqw;letter-spacing:.32em;color:#e8173b;}
.slide-label::before,.slide-label::after{content:'';width:5.5cqw;height:.3cqw;background:currentColor;}
.slide-head{margin-top:3cqw;font-size:7cqw;line-height:1.04;color:#f4f4f2;}
.slide-head em{font-style:normal;color:#e8173b;}
.story-carousel .carousel-nav{align-items:center;gap:18px;}
/* progress of the path: a bar lights up for every step reached */
.story-steps{display:flex;gap:6px;}
.story-steps span{
  width:26px;height:3px;border-radius:2px;background:rgba(245,245,243,.2);
  transition:background .3s, box-shadow .3s;
}
.story-steps span.on{background:var(--red-bright);box-shadow:0 0 8px rgba(255,36,56,.85);}

/* the story as short beats, each with a red arrow */
/* the story as a flow: a symbol, a short line, a red LED line with an arrow leading to the next idea */
.beats{list-style:none;margin-top:8px;}
.beats li{
  position:relative;display:grid;grid-template-columns:50px 1fr;gap:16px;align-items:start;
  padding-bottom:44px;
}
.beats li:last-child{padding-bottom:0;}
.beat-ic{
  width:50px;height:50px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--red-bright);
  background:rgba(226,0,26,.1);border:1px solid rgba(255,36,56,.5);
  box-shadow:0 0 18px -4px rgba(226,0,26,.75);
}
.beat-ic svg{width:24px;height:24px;filter:drop-shadow(0 0 4px rgba(255,36,56,.7));}
.beats h3{font-size:17px;font-weight:800;line-height:1.3;margin:3px 0 4px;}
.beats p{font-size:14px;line-height:1.5;color:var(--text);}
.beats li > div{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease) .15s, transform .7s var(--ease) .15s;}
.beats li.is-on > div{opacity:1;transform:none;}
/* connector: the line is drawn downward, then the arrowhead lights up */
.beats li:not(:last-child)::after{
  content:'';position:absolute;left:24px;top:58px;bottom:14px;width:2px;border-radius:2px;
  background:linear-gradient(180deg,rgba(255,36,56,.95),rgba(255,36,56,.2));
  box-shadow:0 0 8px rgba(255,36,56,.5);
  transform:scaleY(0);transform-origin:top;transition:transform .8s var(--ease) .25s;
}
.beats li.is-on:not(:last-child)::after{transform:scaleY(1);}
.beats li:not(:last-child)::before{
  content:'';position:absolute;left:19px;bottom:12px;width:10px;height:10px;
  border-right:2px solid var(--red-bright);border-bottom:2px solid var(--red-bright);
  transform:rotate(45deg);opacity:0;transition:opacity .4s ease 1s;
  filter:drop-shadow(0 0 4px rgba(255,36,56,.8));
}
.beats li.is-on:not(:last-child)::before{opacity:1;}

/* the introduction: his name in red LED */
.intro{margin-bottom:30px;text-align:center;}
.intro-small{display:block;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gray);}
.intro-name{
  display:inline-block;margin:4px 0 12px;
  font-family:'Montserrat',var(--ff-body);font-weight:800;font-size:clamp(28px,8vw,38px);line-height:1.1;letter-spacing:-.01em;
}
.led-red{
  background:linear-gradient(100deg,#e2001a 0%,#ff2438 38%,#ffd9dc 50%,#ff2438 62%,#e2001a 100%);
  background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:led-run 4s linear infinite;
  filter:drop-shadow(0 0 10px rgba(255,36,56,.55));
}
.intro-line{display:block;width:56px;height:2px;border-radius:2px;margin:0 auto 14px;background:var(--red-bright);box-shadow:0 0 12px rgba(255,36,56,.9);}
.intro-sub{font-size:16px;line-height:1.45;font-weight:500;color:var(--white);max-width:26ch;margin:0 auto;}

/* body -> mind -> choices -> success */
.chain-title{margin:34px 0 14px;text-align:center;font-size:12px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--gray);}
.chain{display:flex;flex-direction:column;align-items:center;gap:4px;}
.chain-step{
  display:flex;align-items:center;justify-content:center;
  width:min(100%,260px);min-height:46px;padding:0 18px;border-radius:100px;
  background:var(--black-2);border:1px solid var(--border);
  font-weight:700;font-size:15px;color:var(--white);text-align:center;
}
.chain-step.led-frame::before{padding:1.5px;}
.chain-arrow{display:flex;color:var(--red-bright);filter:drop-shadow(0 0 6px rgba(255,36,56,.7));}
/* the same chain on the home, just before the final call */
.chain-sec{padding:0 clamp(20px,5vw,60px);}
.chain-sec .chain-title{margin-top:0;}
/* "Il mio livello": one panel, Prima / Dopo switch, bars that load (red when low, green when charged) */
.charge{
  position:relative;padding:16px 16px 6px;border-radius:18px;
  background:linear-gradient(180deg,#0f1013,#08090b);border:1px solid var(--border);
}
.charge-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px;}
.charge-title{font-size:12px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--silver);}
.charge-switch{position:relative;display:flex;width:128px;height:32px;border-radius:100px;border:1px solid var(--border-strong);background:rgba(6,6,7,.6);}
.charge-thumb{
  position:absolute;top:2px;left:2px;width:calc(50% - 2px);height:calc(100% - 4px);border-radius:100px;
  background:#3a3c42;transition:transform .4s cubic-bezier(.3,1.35,.5,1), background .4s, box-shadow .4s;
}
.charge[data-state="prima"] .charge-thumb{background:var(--red);box-shadow:0 0 12px rgba(255,36,56,.7);}
.charge[data-state="dopo"] .charge-thumb{transform:translateX(100%);background:#1fbf63;box-shadow:0 0 12px rgba(46,230,120,.7);}
.charge-switch button{position:relative;z-index:1;flex:1;font:inherit;font-size:12px;font-weight:700;color:var(--gray);transition:color .3s;}
.charge-switch button[aria-checked="true"]{color:#fff;}
.charge-switch button:focus-visible{outline:2px solid var(--white);outline-offset:2px;border-radius:100px;}

.charge-row{
  display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:4px 12px;
  padding:14px 0;border-bottom:1px solid rgba(245,245,243,.06);
}
.charge-row:last-child{border-bottom:0;}
.charge-ic{display:flex;color:var(--gray);transition:color .6s, filter .6s;}
.charge-name{font-size:15px;font-weight:700;color:var(--white);}
.charge-val{font-size:18px;font-weight:800;color:var(--white);font-variant-numeric:tabular-nums;min-width:3.2ch;text-align:right;}
.charge-bar{grid-column:2/-1;height:10px;border-radius:100px;background:rgba(255,255,255,.07);overflow:hidden;}
.charge-bar i{
  display:block;height:100%;width:0;border-radius:inherit;background-color:#555;
  background-image:linear-gradient(45deg,rgba(255,255,255,.22) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.22) 50%,rgba(255,255,255,.22) 75%,transparent 75%,transparent);
  background-size:14px 14px;
  animation:charge-stripes .9s linear infinite;
  transition:width 1.4s cubic-bezier(.22,.8,.3,1), background-color .6s, box-shadow .6s;
}
@keyframes charge-stripes{to{background-position:14px 0;}}
.charge-focus{grid-column:2/-1;font-size:12.5px;color:var(--gray);}
.charge[data-state="prima"] .charge-bar i{background-color:var(--red-bright);box-shadow:0 0 10px rgba(255,36,56,.75);}
.charge[data-state="prima"] .charge-ic{color:var(--red-bright);filter:drop-shadow(0 0 5px rgba(255,36,56,.7));}
/* a "prima" value that was not low (Salute): yellowish instead of red */
.charge[data-state="prima"] .charge-row.is-mid .charge-bar i{background-color:#ffc83d;box-shadow:0 0 10px rgba(255,200,61,.7);}
.charge[data-state="prima"] .charge-row.is-mid .charge-ic{color:#ffc83d;filter:drop-shadow(0 0 5px rgba(255,200,61,.7));}
.charge[data-state="dopo"] .charge-bar i{background-color:#2ee678;box-shadow:0 0 12px rgba(46,230,120,.75);}
.charge[data-state="dopo"] .charge-ic{color:#2ee678;filter:drop-shadow(0 0 5px rgba(46,230,120,.7));}
.charge-hint{margin-top:10px;text-align:center;font-size:12.5px;color:var(--gray);}
.story-final{margin:30px 0 0;border-radius:18px;overflow:hidden;background:#000;aspect-ratio:4/5;}
.story-final img{width:100%;height:100%;object-fit:cover;}

/* ==================== IL SISTEMA È SEMPLICE (home, under the photo) ====================
   no box: an hourglass in the open, the step word below it, a loading bar you fill with a finger */
.sys-sec{padding-bottom:44px;}
.sys-sec .section-head{text-align:center;margin:0 auto;}
.sys-lead{text-align:center;color:var(--gray);font-size:14.5px;line-height:1.5;margin:-8px auto 18px;padding:0 clamp(20px,5vw,60px);}
.hg{--p:0;max-width:420px;margin:0 auto;padding:0 clamp(24px,6vw,60px);text-align:center;}
.hg-glass{display:block;width:96px;height:auto;margin:0 auto;overflow:visible;filter:drop-shadow(0 10px 18px rgba(0,0,0,.6));}
.hg-halo{opacity:calc(.25 + var(--p) * .75);transition:opacity .2s;}
.hg-outline{fill:none;stroke:rgba(235,238,245,.75);stroke-width:1.3;stroke-linejoin:round;}
.hg-shine{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;opacity:.35;}
/* grains: round dots that run down the neck while the sand moves */
.hg-stream{stroke:#ff6b7a;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:.1 5;opacity:0;transition:opacity .2s;}
.hg.is-flowing .hg-stream{opacity:1;animation:hg-fall .35s linear infinite;}
@keyframes hg-fall{to{stroke-dashoffset:-5.1;}}
.hg.is-done .hg-glass{animation:hg-done .7s var(--ease);}
@keyframes hg-done{40%{transform:scale(1.07);}}
.hg-slides{display:grid;margin-top:14px;}
.hg-slide{grid-area:1/1;opacity:0;pointer-events:none;transition:opacity .35s;}
.hg-slide.is-cur{opacity:1;pointer-events:auto;}
.hg-step{display:block;font-size:10.5px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--gray);}
/* the step word: big, accent colour, letters rise one after the other */
.hg-key{
  display:block;margin:6px 0 8px;white-space:nowrap;
  font-family:var(--ff-display);font-weight:800;font-size:clamp(26px,8vw,38px);line-height:1;
  text-transform:uppercase;letter-spacing:.5px;
  color:var(--hl-a,#ff2438);text-shadow:0 0 22px var(--hl-glow,rgba(255,36,56,.5));
}
.hg-key i{display:inline-block;font-style:normal;}
.hg-slide.is-cur .hg-key i{animation:hg-letter .5s var(--ease) both;animation-delay:calc(var(--i) * 35ms);}
@keyframes hg-letter{from{opacity:0;transform:translateY(60%);filter:blur(4px);}}
.hg-slide p{margin:0 auto;max-width:310px;color:var(--text);font-size:14.5px;line-height:1.45;}
.hg-slide.is-cur p{animation:hg-line .5s var(--ease) .18s both;}
@keyframes hg-line{from{opacity:0;transform:translateY(6px);}}
/* the loading bar: drag the knob, the bar fills and the percentage counts */
.hg-load{margin-top:20px;}
.hg-load-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;}
.hg-load-hint{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--silver);transition:opacity .3s;}
.hg-load-hint svg{animation:hg-nudge 1.1s ease-in-out infinite;}
@keyframes hg-nudge{50%{transform:translateX(3px);}}
.hg.is-done .hg-load-hint{opacity:.4;}
.hg-pct{font-family:var(--ff-body);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums;color:var(--white);}
.hg-pct b{font-weight:800;}
.hg.is-done .hg-pct{color:var(--hl-a,#ff2438);}
.hg-track{position:relative;height:44px;cursor:pointer;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;}
.hg-track:focus-visible{outline:2px solid var(--white);outline-offset:4px;border-radius:12px;}
.hg-bar{
  position:absolute;left:0;right:0;top:50%;height:16px;margin-top:-8px;border-radius:100px;overflow:hidden;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.hg-fill{
  position:absolute;left:0;top:0;bottom:0;width:calc(30px + var(--p) * (100% - 30px));border-radius:inherit;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.16) 0 6px,transparent 6px 12px),linear-gradient(90deg,var(--red-deep,#a80018),var(--red-bright));
  background-size:17px 17px,100% 100%;
  box-shadow:0 0 14px rgba(255,36,56,.65);
}
.hg.is-flowing .hg-fill{animation:hg-stripes .5s linear infinite;}
@keyframes hg-stripes{to{background-position:17px 0,0 0;}}
.hg-sep{position:absolute;top:3px;bottom:3px;width:2px;margin-left:-1px;border-radius:2px;background:rgba(0,0,0,.55);}
.hg-thumb{
  position:absolute;z-index:2;top:50%;left:calc(var(--p) * (100% - 30px));
  width:30px;height:30px;margin-top:-15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#e6e7eb 60%,#b5b8c0);
  box-shadow:0 0 0 3px rgba(255,36,56,.45),0 0 18px rgba(255,36,56,.6),0 4px 10px rgba(0,0,0,.5);
  pointer-events:none;
}
/* the button appears only once the bar is full */
.hg-end{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease);}
.hg-end > div{overflow:hidden;display:flex;justify-content:center;}
.hg-end .btn{margin-top:16px;opacity:0;transition:opacity .4s var(--ease) .15s;}
.hg.is-done .hg-end{grid-template-rows:1fr;}
.hg.is-done .hg-end .btn{opacity:1;}
@media (prefers-reduced-motion:reduce){
  .hg-slide,.hg-end,.hg-end .btn{transition:none;}
  .hg.is-flowing .hg-stream,.hg.is-flowing .hg-fill,.hg-slide.is-cur .hg-key i,.hg-slide.is-cur p,.hg.is-done .hg-glass,.hg-load-hint svg{animation:none;}
}
/* ==================== FINAL CTA ==================== */
.final-cta{
  position:relative;
  text-align:center;
  /* tight between the "Se pensi" diagram above and the closing photo below */
  padding:56px clamp(20px,5vw,60px) 36px;
  overflow:hidden;
}
.final-cta-content{display:flex;flex-direction:column;align-items:center;gap:20px;}
.final-cta p{color:var(--gray);font-size:clamp(15px,2vw,18px);max-width:460px;}
.cta-microcopy{margin-top:-10px;color:var(--gray-dim);font-size:13px;letter-spacing:.3px;}

/* ==================== FOOTER ==================== */
.site-footer{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px;
  padding:30px 30px calc(90px + env(safe-area-inset-bottom));color:var(--gray-dim);font-size:12px;
  border-top:1px solid var(--border);
}
.site-footer a{color:inherit;text-decoration:underline;text-underline-offset:3px;}
@media (hover:hover){ .site-footer a:hover{color:var(--white);} }

/* ==================== FLOATING CTA ("Scopri da dove partire" follows the scroll) ==================== */
.floating-cta{
  position:fixed;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));z-index:50;
  min-height:50px;padding:0 26px;font-size:15px;white-space:nowrap;
  opacity:0;transform:translate(-50%,16px);pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), filter .25s;
}
.floating-cta.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
/* the always-there button: black like every button, with the same red LED (see BUTTONS) */
.floating-cta.led-frame{position:fixed;}

/* ==================== LE DOMANDE (two LED circles per question) ====================
   red for uomo, pink for donna (the --hl-* colours of the version); before the choice: red */
.cq{
  --cq-a:var(--hl-a,#ff2438);--cq-b:var(--hl-b,#ffc2c8);--cq-glow:var(--hl-glow,rgba(255,36,56,.5));
  padding-bottom:70px;
}
/* right under the photo: the questions are the first thing to do */
.cq .section-head{text-align:center;margin:0 auto;padding-top:28px;}
.cq-box{max-width:620px;margin:0 auto;padding:0 clamp(16px,5vw,40px);text-align:center;}
.cq-play{transition:opacity .16s var(--ease), transform .16s var(--ease);}
.cq-play.is-out{opacity:0;transform:translateY(10px);}
/* "Domanda X di 5", at the bottom, under "Indietro" */
.cq-count{margin-top:10px;color:var(--gray);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;}
.cq-hint{display:flex;align-items:center;justify-content:center;gap:7px;margin:-16px auto 24px;color:var(--gray);font-size:13px;font-weight:600;}
.cq-hint svg{color:var(--cq-a);flex:none;}
.cq-back{
  display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:16px;padding:0 12px;
  color:var(--gray);font-size:13.5px;font-weight:600;transition:color .25s, opacity .25s;
}
.cq-back.is-off{opacity:0;pointer-events:none;}
@media (hover:hover){ .cq-back:hover{color:var(--white);} }
.cq-back:focus-visible{outline:2px solid var(--white);outline-offset:3px;border-radius:6px;}
.cq-q{margin:0 auto 28px;max-width:24ch;font-size:clamp(19px,4.6vw,24px);font-weight:700;line-height:1.3;color:var(--white);text-wrap:balance;}
.cq-opts{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,4vw,36px);align-items:start;max-width:440px;margin:0 auto;}
.cq-opt{display:flex;flex-direction:column;align-items:center;gap:14px;padding:6px 2px 10px;border-radius:18px;transition:opacity .2s var(--ease);}
.cq-opt:focus-visible{outline:2px solid var(--white);outline-offset:4px;}
.cq-ring{width:clamp(80px,22vw,110px);height:auto;overflow:visible;filter:drop-shadow(0 0 6px var(--cq-glow));transition:filter .35s var(--ease);}
/* ring and drawing lit like the words: --led is the moving LED gradient set by js */
.cq-ring .s-a{stop-color:var(--cq-a);}
.cq-ring .s-b{stop-color:var(--cq-b);}
.cq-base{fill:none;stroke:var(--led,var(--cq-a));stroke-width:6;}
.cq-ic{fill:none;stroke:var(--led,var(--cq-a));stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;}
.cq-ic .fill{fill:var(--led,var(--cq-a));stroke:none;}
/* until the first tap the circles breathe softly: they are buttons */
.cq-box.is-fresh .cq-ring{animation:cq-call 2.2s ease-in-out infinite;}
.cq-box.is-fresh .cq-opt:nth-child(2) .cq-ring{animation-delay:-1.1s;}
@keyframes cq-call{
  0%,100%{filter:drop-shadow(0 0 6px var(--cq-glow));}
  50%{filter:drop-shadow(0 0 18px var(--cq-glow)) drop-shadow(0 0 4px var(--cq-b));}
}
.cq-label{
  font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(16px,4.3vw,23px);line-height:1.1;max-width:9em;text-wrap:balance;
  background:linear-gradient(100deg,var(--cq-a) 0%,var(--cq-a) 40%,var(--cq-b) 50%,var(--cq-a) 60%,var(--cq-a) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:led-run 3.6s linear infinite;filter:drop-shadow(0 0 7px var(--cq-glow));
}
@media (hover:hover){ .cq-opt:hover .cq-ring{filter:drop-shadow(0 0 14px var(--cq-glow)) drop-shadow(0 0 4px var(--cq-b));} }
/* the chosen circle lights up, the other one steps back */
.cq-opts.is-picked .cq-opt{opacity:.22;}
.cq-opts.is-picked .cq-opt.is-on{opacity:1;}
.cq-opt.is-on .cq-ring,.cq-opt.is-prev .cq-ring{filter:drop-shadow(0 0 16px var(--cq-glow)) drop-shadow(0 0 5px var(--cq-b));}
@media (prefers-reduced-motion:reduce){
  .cq-label,.cq-box.is-fresh .cq-ring{animation:none;}
  .cq-play,.cq-opt,.cq-ring{transition:none;}
}

/* ==================== SE PENSI (the post's diagram: two branches, one conclusion) ==================== */
.think{padding:80px clamp(12px,4vw,60px) 10px;}
.think-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.think-map{
  display:flex;align-items:center;justify-content:center;
  font-family:'Oswald','Arial Narrow',sans-serif;font-weight:600;text-transform:uppercase;
  font-size:clamp(12px,4.6vw,42px);line-height:1;letter-spacing:-.005em;white-space:nowrap;color:#f1f1ef;
}
.think-side{display:flex;align-items:center;gap:.3em;}
/* the short links between the side words and the brackets */
.think-l::after,.think-r::before{content:'';width:.5em;height:2px;background:currentColor;}
.think-mid{position:relative;display:flex;flex-direction:column;align-items:center;gap:2.6em;padding:0 .85em;}
.think-mid::before,.think-mid::after{content:'';position:absolute;top:.5em;bottom:.5em;width:.55em;border:2px solid currentColor;}
.think-mid::before{left:0;border-right:0;}
.think-mid::after{right:0;border-left:0;}

/* ==================== LA MIA FRASE ==================== */
/* overflow-x clip: the full-width photo and its sliding halves never push the page sideways (iPhone) */
.quote{text-align:center;padding:10px clamp(24px,8vw,60px) 80px;overflow-x:clip;}
/* the line under the quote: white, thin, pointed at both ends (thickest in the middle, it tapers to a point) */
.quote-line{
  display:block;width:120px;height:3px;margin:24px auto 22px;
  background:linear-gradient(90deg,rgba(255,255,255,.35),#fff 50%,rgba(255,255,255,.35));
  clip-path:polygon(0 50%,50% 0,100% 50%,50% 100%);
  filter:drop-shadow(0 0 6px rgba(255,255,255,.35));
}
/* same look as the business card: lowercase Garamond, two lines, short white rule, the mark underneath */
.quote blockquote{
  max-width:30ch;margin:0 auto;
  font-family:'EB Garamond',Garamond,Georgia,serif;font-style:normal;font-weight:400;
  font-size:clamp(21px,5.6vw,32px);line-height:1.35;color:var(--white);text-wrap:balance;
}
.quote .br-wide{display:none;}
@media (min-width:760px){ .quote blockquote{max-width:none;} .quote .br-wide{display:inline;} }
.quote-mark{height:46px;width:auto;margin:0 auto;opacity:.95;}

/* the closing photo above the quote: no frame, every edge dissolves into the page black.
   It enters with a fade and a slow zoom out; while scrolling the two halves close in by a
   few pixels (--gap, set from js); a red rim light breathes on the back of the man on the right */
.quote-photo{
  --qp-w:min(560px,100vw);
  --gap:28px;
  position:relative;width:var(--qp-w);aspect-ratio:1288/1600;margin:0 0 0 50%;transform:translateX(-50%);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 56%,transparent 94%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to bottom,transparent 0%,#000 14%,#000 56%,transparent 94%),linear-gradient(to right,transparent 0%,#000 12%,#000 88%,transparent 100%);
  mask-composite:intersect;
}
.qp-zoom{position:absolute;inset:0;opacity:0;transform:scale(1.06);transition:opacity 1.4s var(--ease), transform 2.6s var(--ease);}
.quote-photo.is-in .qp-zoom{opacity:1;transform:none;}
/* each half is the whole photo clipped; they overlap on the black strip between the two faces, so no seam shows */
.qp-half{position:absolute;inset:0;will-change:transform;}
.qp-half img{display:block;width:100%;height:100%;}
.qp-left{clip-path:inset(0 47% 0 0);transform:translate3d(calc(var(--gap) * -1),0,0);}
.qp-right{clip-path:inset(0 0 0 40%);transform:translate3d(var(--gap),0,0);}
.qp-rim{
  position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(14% 30% at 95% 56%,rgba(227,23,62,.55),transparent 70%),
    radial-gradient(10% 16% at 86% 38%,rgba(227,23,62,.35),transparent 70%);
  animation:qpBreath 4s ease-in-out infinite;
}
@keyframes qpBreath{0%,100%{opacity:.6;}50%{opacity:1;}}
/* the quote rises onto the faded bottom of the photo, where it is already black */
.quote-photo + blockquote{position:relative;margin-top:calc(var(--qp-w) * -.3);text-shadow:0 2px 18px rgba(0,0,0,.9);}

/* the closing photo (12/11/2026): me in the dark under a light from above. A little narrower than the phone
   (up to 400px); a black vignette all round, heavier at the bottom, so it melts into the page and the quote
   rises onto it. Pulled up a little: the empty black above my head stays short under the form */
.quote-photo.quote-me{
  /* the top 100px of the photo (empty black above the head) are left out; it starts a little under the
     Prenota button (clearly apart from it, but without a big empty gap) */
  --qp-w:min(400px,84vw);aspect-ratio:1066/1500;margin-top:-16px;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 64%,transparent 96%),linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 64%,transparent 96%),linear-gradient(to right,transparent 0%,#000 9%,#000 91%,transparent 100%);
}
.quote-me img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 100%;}
.qm-vignette{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse 70% 58% at 52% 44%,transparent 48%,rgba(0,0,0,.5) 76%,#000 100%),
    linear-gradient(to bottom,transparent 52%,rgba(0,0,0,.8) 84%,#000 100%);
}
/* the quote starts on the dark bottom of the photo
   (the size is written out: --qp-w lives on the photo, the quote next to it can't see it) */
.quote-me + blockquote{margin-top:calc(min(400px,84vw) * 1.407 * -.2);}
/* less empty black around the closing block: the questions below start sooner */
.quote{padding-bottom:28px;}
@media (prefers-reduced-motion:reduce){
  .qp-zoom{opacity:1;transform:none;transition:none;}
  .qp-half{transform:none;}
  .qp-rim{animation:none;opacity:.8;}
}

/* ==================== BACK (Chi sono) ==================== */
.back-link{
  display:flex;align-items:center;gap:6px;margin:0 0 30px;
  min-height:40px;font-size:14px;font-weight:600;color:var(--gray);
  transition:color .25s;
}
@media (hover:hover){ .back-link:hover{color:var(--white);} }
.back-link:focus-visible{outline:2px solid var(--white);outline-offset:3px;}

/* ==================== SCROLL REVEALS ==================== */
.reveal-up{opacity:0;transform:translateY(36px);transition:opacity .8s var(--ease), transform .8s var(--ease);}
.reveal-up.is-visible{opacity:1;transform:translateY(0);}

/* ==================== QUIZ OVERLAY ==================== */
.quiz-overlay{
  position:fixed;inset:0;z-index:200;
  background:var(--black);
  display:flex;flex-direction:column;
  visibility:hidden;opacity:0;
  transition:opacity .5s var(--ease), visibility .5s;
}
.quiz-overlay.active{visibility:visible;opacity:1;}
.quiz-bg-noise{
  position:absolute;inset:0;opacity:.04;mix-blend-mode:overlay;pointer-events:none;
  background:radial-gradient(circle at 30% 20%, var(--red-glow), transparent 60%);
}
.quiz-close{
  position:absolute;top:26px;right:clamp(20px,5vw,50px);z-index:5;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--border);color:var(--white);
  transition:border-color .3s, background .3s;
}
@media (hover:hover){ .quiz-close:hover{border-color:var(--red);background:rgba(226,0,26,.1);} }

.quiz-progress{
  position:absolute;top:0;left:0;right:0;height:3px;background:var(--black-3);z-index:5;
}
.quiz-progress-bar{
  height:100%;width:0%;background:var(--red);
  transition:width .5s var(--ease);
  box-shadow:0 0 12px var(--red-bright);
}

.quiz-stage{
  flex:1;position:relative;
  display:flex;align-items:center;justify-content:center;
  padding:100px clamp(20px,6vw,60px) 60px;
}
.quiz-step{
  position:absolute;width:100%;max-width:680px;
  display:flex;flex-direction:column;gap:28px;
  opacity:0;
}
.quiz-step-label{color:var(--red-bright);font-size:12px;letter-spacing:3px;text-transform:uppercase;font-weight:700;}
.quiz-step h3{
  font-family:var(--ff-display);
  font-size:clamp(24px,4.4vw,42px);
  line-height:1.1;text-transform:uppercase;
}
.quiz-options{display:flex;flex-direction:column;gap:12px;}
.quiz-option{
  display:flex;align-items:center;gap:16px;
  padding:20px 22px;border:1px solid var(--border);border-radius:14px;
  text-align:left;font-size:16px;font-weight:500;
  transition:border-color .3s, background .3s;
  position:relative;overflow:hidden;
}
@media (hover:hover){ .quiz-option:hover{border-color:rgba(226,0,26,.5);background:rgba(226,0,26,.06);} }
/* a little LED around every answer: soft at rest, bright on the chosen one */
.quiz-option.led-frame::before{padding:1.5px;opacity:.5;transition:opacity .3s;}
@media (hover:hover){ .quiz-option.led-frame:hover::before{opacity:.9;} }
.quiz-option.selected.led-frame::before{opacity:1;}
.quiz-option.selected{border-color:var(--red);background:rgba(226,0,26,.12);}
.quiz-option-num{
  flex:none;width:30px;height:30px;border-radius:50%;
  border:1px solid var(--border);display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--gray);
}
.quiz-option.selected .quiz-option-num{background:var(--red);border-color:var(--red);color:var(--white);}

.quiz-result{
  text-align:center;align-items:center;
}
.quiz-result h3{max-width:560px;}
.quiz-result p{color:var(--gray);max-width:480px;font-size:16px;line-height:1.6;}
.quiz-result-card{
  display:flex;flex-direction:column;align-items:center;gap:24px;
  background:var(--charcoal);
  border-radius:22px;
  padding:48px clamp(24px,5vw,60px);
}
/* shown only while the form has no destination address configured */
.quiz-result .dev-note{
  font-size:13px;line-height:1.5;color:var(--silver);padding:10px 12px;
  border:1px dashed var(--border-strong);border-radius:10px;max-width:46ch;
}

@media (max-width:640px){
  .stats{gap:8px;}
  .stat-item p{font-size:10px;letter-spacing:.5px;}
  .faq-list{padding-bottom:50px;}
  .faq-q{padding:18px 0;}
  .ba-half{font-size:12px;letter-spacing:1px;}
  .hero-cta-row{gap:20px;}
}

/* ==================== LEAD FORM (last quiz step) ==================== */
.lead-form{display:flex;flex-direction:column;gap:12px;width:100%;text-align:left;}
.lead-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.lead-form label{display:flex;flex-direction:column;gap:6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);font-weight:600;}
.lead-form input,.lead-form textarea{
  font:inherit;font-size:16px;letter-spacing:0;text-transform:none;font-weight:400;
  color:var(--white);background:var(--black-2);
  border:1px solid var(--border);border-radius:12px;padding:13px 14px;
  outline:none;transition:border-color .3s, box-shadow .3s;width:100%;
}
.lead-form textarea{resize:none;height:96px;}
.lead-form .field{display:block;position:relative;border-radius:12px;}
.lead-form .field.led-frame::before{opacity:0;transition:opacity .35s var(--ease);}
.lead-form .field.led-frame:focus-within::before{opacity:1;}
.lead-form .field:focus-within{box-shadow:0 0 22px rgba(226,0,26,.22);}
.lead-form input:focus,.lead-form textarea:focus{border-color:rgba(226,0,26,.65);box-shadow:none;}
.lead-check{flex-direction:row !important;align-items:flex-start;gap:10px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:400 !important;line-height:1.4;}
.lead-check input{width:18px;height:18px;flex:none;margin-top:1px;accent-color:var(--red);}
.lead-check a{color:#fff;text-decoration:underline;text-underline-offset:3px;}
/* the "a parent agrees" tick: only shown for an age under 18 */
.lead-check[hidden]{display:none !important;}
.lead-minor{animation:v-fade .35s var(--ease);}
.lead-error{color:var(--red-bright);font-size:13px;min-height:16px;}
.lead-form .btn{justify-content:center;width:100%;}
.lead-form .btn[disabled]{opacity:.6;pointer-events:none;}
.lead-hp{position:absolute;left:-9999px;opacity:0;height:0;}

/* the three subscriptions, small: he sees what each person picked */
.lead-plans{border:0;min-inline-size:0;display:flex;flex-direction:column;gap:6px;}
.lead-plans legend{padding:0;margin-bottom:6px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);font-weight:600;}
.lead-plan-grid{display:flex;flex-direction:column;gap:10px;}
.lead-plan-note{font-size:11.5px;line-height:1.4;color:var(--gray);text-align:center;}
.lead-plan-hint{display:flex;align-items:center;gap:6px;margin:-2px 0 4px;font-size:13px;color:var(--silver);}
.lead-plan-hint::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 8px rgba(255,36,56,.9);animation:hint-blink 1.6s ease-in-out infinite;}
@keyframes hint-blink{0%,100%{opacity:1;}50%{opacity:.35;}}
/* a radio circle in each option: empty until chosen, then filled red */
.lp-radio{
  position:absolute;top:12px;left:12px;z-index:3;
  width:18px;height:18px;border-radius:50%;
  border:1.5px solid var(--border-strong);background:var(--black);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.lead-plan-opt input:checked + span .lp-radio{
  border-color:var(--red-bright);background:var(--red);
  box-shadow:inset 0 0 0 3px var(--black), 0 0 10px rgba(255,36,56,.8);
}
.lead-form .lead-plan-opt{position:relative;display:block;gap:0;text-transform:none;letter-spacing:0;font-weight:600;color:var(--white);}
.lead-form .lead-plan-opt input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0;}
/* each option looks like the purchase blocks of the home: LED around it, struck price in red, real price big */
.lead-plan-opt > span{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  padding:12px 12px 13px;text-align:center;border-radius:16px;
  border:1px solid var(--border);background:var(--black-2);
  transition:border-color .25s, background .25s, box-shadow .25s;
}
.lead-plan-opt > span.led-frame::before{padding:1.5px;opacity:.7;transition:opacity .25s;}
.lead-plan-opt b{display:flex;align-items:center;gap:8px;font-family:var(--ff-display);font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.lp-tag{font-style:normal;font-family:var(--ff-body);font-size:10px;font-weight:700;letter-spacing:.3px;text-transform:none;color:#fff;background:var(--red);padding:3px 8px;border-radius:100px;}
.lp-price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:2px 8px;}
.lp-price s{font-size:14px;font-weight:700;color:var(--red-bright);text-decoration:line-through;text-decoration-thickness:2px;}
.lp-price strong{font-size:22px;font-weight:800;line-height:1.1;color:var(--white);}
.lp-price small{font-size:12px;font-weight:500;color:var(--gray);}
.lead-plan-opt input:checked + span{border-color:var(--red);background:linear-gradient(160deg,rgba(226,0,26,.22),rgba(226,0,26,.05) 75%);box-shadow:0 0 24px -8px rgba(226,0,26,.6);}
.lead-plan-opt input:checked + span.led-frame::before{opacity:1;}
.lead-plan-opt input:focus-visible + span{outline:2px solid var(--white);outline-offset:2px;}
@media (hover:hover){ .lead-plan-opt > span:hover{border-color:rgba(226,0,26,.5);} }
.lead-why textarea{height:64px;}
/* videocall form: one line under the title, name + age side by side even on the phone,
   the three time slots as pills */
.lead-intro{margin:-6px 0 4px;font-size:15px;line-height:1.5;color:var(--text);max-width:40ch;}
.lead-row-name{grid-template-columns:1fr 92px !important;}
.lead-slots{border:0;min-inline-size:0;display:flex;flex-direction:column;gap:8px;}
.lead-slots legend{padding:0;margin-bottom:8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--gray);font-weight:600;}
.lead-slot-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.lead-form .lead-slot{position:relative;display:block;gap:0;text-transform:none;letter-spacing:0;}
.lead-form .lead-slot input{position:absolute;opacity:0;width:1px;height:1px;padding:0;border:0;}
.lead-slot span{
  display:flex;align-items:center;justify-content:center;min-height:46px;border-radius:100px;
  border:1px solid var(--border-strong);background:rgba(255,255,255,.03);
  font-size:14px;font-weight:700;color:var(--white);transition:border-color .25s, background .25s, box-shadow .25s;
}
.lead-slot input:checked + span{border-color:var(--red);background:rgba(226,0,26,.18);box-shadow:0 0 18px -6px rgba(226,0,26,.8);}
.lead-slot input:focus-visible + span{outline:2px solid var(--white);outline-offset:2px;}
@media (hover:hover){ .lead-slot span:hover{border-color:rgba(226,0,26,.55);} }
@media (max-width:560px){ .lead-row{grid-template-columns:1fr;} .quiz-stage{align-items:flex-start;overflow-y:auto;overflow-x:hidden;padding-top:80px;} .quiz-step{position:relative;} }

/* ==================== TYPE ==================== */
h1,h2,h3,.stat-num,.stat-plus,.faq-q{font-weight:700;}
h1,h2,h3{letter-spacing:0;}

/* ==================== FALLBACKS (GSAP missing or reduced motion: show everything at once) ==================== */
.no-gsap .preloader,.no-gsap .orbit-fx{display:none;}
.no-gsap .hero-title .line .inner{transform:none;}
.no-gsap .reveal-up{opacity:1;transform:none;}
.no-gsap .quiz-step{opacity:1;}
.no-gsap .brand-mark-img,.no-gsap .preloader-word{opacity:1;transform:none;}

@media (prefers-reduced-motion:reduce){
  .btn-primary,.led-text,.hero-title .acc,.section-head h2 .accent,.led-frame::before,.stat-fig,.stat-item::before{animation:none;}
  .reveal-up,.faq-a-wrap{transition:none;}
  html[data-v] .v-m,html[data-v] .v-f,html[data-v] .hl,html[data-v] .hero-title .acc,html[data-v] .vb .chip,.lead-plan-hint::before{animation:none;}
}