/* ============================================================
   TOKENS — palette proposta per mysociale.net (non ufficiale: da confermare)
   ============================================================ */
:root{
  /* colori base — blu notte, blu elettrico, ciano, viola, oro */
  --background:#ffffff;
  --foreground:#0A1240;
  --ink:#0A1240;           /* blu notte: testi e contorni cartoon */
  --ink-2:#111B55;
  --ink-3:#1A2A78;
  --text:#0A1240;
  --muted:#4B5687;
  --subtle:#7E88B3;
  --line:#D6DEF7;
  --surface:#EEF3FF;       /* azzurro chiarissimo — tela delle sezioni */
  --surface-2:#E3ECFF;     /* stacco di tono */
  --accent:#2456F0;        /* blu elettrico — sicuro sul chiaro */
  --accent-from:#22D3EE;   /* ciano — solo su scuro */
  --accent-to:#2456F0;
  --violet:#7C4DFF;
  --gold:#FFC63A;          /* oro: premi, monete, CTA sul fondo scuro */
  --gold-2:#F29E0C;
  --pink:#FF4D8D;
  --wa:#1A2C86;
  --wa-bubble:#DDE7FF;
  --alert:#E0602B;
  /* fondo cosmico delle hero: cambia per tema (community, evento, personaggio) */
  --sky-1:#3B6BFF; --sky-2:#1A2F9E; --sky-3:#0B1150;
  --hero-ink:#FFFFFF; --hero-muted:#C9D5FF; --hero-hl:#FFC63A;
  --pop-shadow:0 .3rem 0 var(--ink);
  --radius-pill:9999px;
  --radius-card:2rem;
  --radius-card-sm:1.25rem;
  --radius-control:0.875rem;
  --text-watermark:13rem;
  --container-shell:88rem;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*{ box-sizing:border-box; margin:0; padding:0 }
html{ font-size:16px; -webkit-font-smoothing:antialiased }
body{ background:#ffffff; color:#0A1240; font-family:'Nunito',sans-serif; overflow-x:hidden }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer }
ul{ list-style:none }
img{ display:block }
h1,h2,h3{ font-family:'Fredoka','Nunito',sans-serif }
.sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 }
:focus-visible{ outline:2px solid #2456F0; outline-offset:2px }
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } }

/* ============================================================
   GRIGLIA ADATTIVA (rem)
   ============================================================ */
@media (max-width:1920px){ html{ font-size:0.833333vw } }
@media (max-width:1440px){ html{ font-size:1.111111vw } }
@media (max-width:1024px){ html{ font-size:1.5625vw } }
@media (max-width:640px){  html{ font-size:4.444444vw } }

/* ============================================================
   PRIMITIVE
   ============================================================ */
.shell{ max-width:var(--container-shell); margin-inline:auto }
.icon{ width:1em; height:1em; display:inline-block; flex:none }
.tnum{ font-variant-numeric:tabular-nums }
#sprite{ display:none }

.skip-link{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden }
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; z-index:60; width:auto; height:auto;
  border-radius:0.875rem; background:#0A1240; padding:0.5rem 1rem; font-size:0.875rem; color:#fff;
}

/* --- reveal --- */
.reveal{
  opacity:0; transform:translateY(var(--ry,16px)) scale(var(--rsf,1));
  transition:opacity .8s cubic-bezier(.16,1,.3,1) var(--rd,0ms),
             transform .8s cubic-bezier(.16,1,.3,1) var(--rd,0ms);
  will-change:opacity, transform;
}
.reveal.is-in{ opacity:var(--ro,1); transform:translateY(0) scale(1) }

.lines .line{ display:block; overflow:hidden }
.lines .line > i{
  display:block; font-style:normal; transform:translateY(100%); opacity:0;
  transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1);
}
.lines.is-in .line > i{ transform:translateY(0); opacity:1 }

.word{
  display:inline-block; font-style:normal; transform:translateY(24px); opacity:0;
  transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1);
}
.words.is-in .word{ transform:translateY(0); opacity:1 }

/* --- pill --- */
.pill{ display:inline-block }
.pill__s{ display:inline-block; will-change:transform }
.pill__in{
  display:inline-flex; align-items:center; gap:0.75rem; border-radius:9999px;
  font-size:0.875rem; font-weight:500; padding:0.875rem 1.75rem; white-space:nowrap;
}
.pill--arrow .pill__in{ padding:0.375rem 0.375rem 0.375rem 1.5rem }
.pill--dark .pill__in{ background:#0A1240; color:#fff }
.pill--light .pill__in{ background:#EEF3FF; color:#0A1240 }
.pill--accent .pill__in{ background:#2456F0; color:#fff }
.pill--outline .pill__in{ border:1px solid #D6DEF7; background:transparent; color:#0A1240 }
.pill__badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; flex:none }
.pill--dark .pill__badge{ background:#22D3EE; color:#0A1240 }
.pill--accent .pill__badge{ background:#fff; color:#2456F0 }
.pill--light .pill__badge, .pill--outline .pill__badge{ background:#0A1240; color:#fff }
.pill__badge .icon{ will-change:transform }

/* --- eyebrow --- */
/* Etichetta di sezione: una linea che si apre. */
.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.115em;
}
.eyebrow::before{
  content:""; width:1.85rem; height:1px; flex:none; background:currentColor;
  transform-origin:left center; transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .12s;
}
/* a riposo dentro un blocco non ancora rivelato la linea è chiusa */
.reveal:not(.is-in) .eyebrow::before{ transform:scaleX(0) }
.eyebrow--dark{ color:#2456F0 }
.eyebrow--light{ color:#22D3EE }
/* nelle intestazioni centrate la linea sta da entrambi i lati */
.works__head .eyebrow::after{
  content:""; width:1.85rem; height:1px; flex:none; background:currentColor;
  transform-origin:right center; transform:scaleX(1);
  transition:transform .9s cubic-bezier(.22,1,.36,1) .12s;
}
.works__head .reveal:not(.is-in) .eyebrow::after{ transform:scaleX(0) }

.chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:0.5rem 1rem; font-size:0.875rem }

.alink{ display:inline-flex }
.alink > span{ display:inline-block; opacity:.65; will-change:transform,opacity }

/* ============================================================
   HEADER
   ============================================================ */
.header{ position:absolute; left:0; right:0; top:0; z-index:50 }
.header__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem }
.brand{ display:inline-flex }
.brand__s{ display:flex; align-items:center; gap:0.6rem; font-family:'Fredoka',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.012em; will-change:transform }
.brand__s .icon{ font-size:1.5rem }
.nav{ display:none }
.nav ul{ display:flex; align-items:center; gap:2rem; font-size:0.875rem; font-weight:500 }
.nav button{ display:inline-flex; align-items:center; gap:0.25rem }
.nav button > span{ display:inline-block; opacity:.8; will-change:transform,opacity }
.hdr-right{ display:flex; align-items:center; gap:0.75rem }
.clock{
  display:none; align-items:center; gap:0.75rem;
  border:1px solid var(--line); background:#fff;
  border-radius:0.875rem; padding:0.5rem 0.75rem; font-size:0.75rem; color:var(--muted);
}
.clock__lab{ color:#7E88B3 }
.clock__t{ min-width:3.5rem; font-weight:600; color:#0A1240 }
.clock__sep{ color:#B3BEE3 }
.clock__d{ font-weight:500 }
.clock__live{ display:inline-flex; align-items:center; gap:.4rem; color:#2456F0; font-weight:600 }
.clock__dot{ width:.4rem; height:.4rem; border-radius:50%; background:#2456F0; animation:pulse 2.4s infinite }
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(36,86,240,.5)}70%{box-shadow:0 0 0 .5rem rgba(36,86,240,0)}100%{box-shadow:0 0 0 0 rgba(36,86,240,0)}}
.menu-btn{
  border:1px solid var(--line); background:#fff;
  border-radius:0.875rem; transition:border-color .25s ease;
}
.menu-btn:hover{ border-color:var(--text-dim) }
.menu-btn__s{ display:flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; will-change:transform }
.menu-btn__s .icon{ font-size:0.875rem }
.menu-btn__s .lbl{ display:none }
@media (min-width:640px){ .header__in{ padding:1.5rem 2rem } .menu-btn__s .lbl{ display:inline } }
@media (min-width:768px){ .clock{ display:flex } }
@media (min-width:1024px){ .nav{ display:flex } }

/* ============================================================
   HERO — testo su fondo pulito, foto contenuta a destra
   ============================================================ */
.hero{
  position:relative; overflow:hidden; border-radius:0 0 2rem 2rem;
  background:var(--surface);
}
.hero__wm{
  position:absolute; left:0; right:0; bottom:5rem; z-index:0; text-align:center;
  pointer-events:none; user-select:none; -webkit-user-select:none;
  font-family:'Fredoka',sans-serif; font-weight:700; line-height:1; letter-spacing:-.012em;
  font-size:var(--text-watermark); color:rgba(10,18,64,.038);
}
.hero__grid{ position:relative; z-index:2; display:flex; flex-direction:column; gap:3rem; padding:6.5rem 1.25rem 3rem }
.hero__left{ display:flex; flex-direction:column; gap:1.5rem }
.hero__h1{ max-width:15ch; font-size:2.5rem; font-weight:700; line-height:1.01; letter-spacing:-.012em }
.hero__h1 .hl{ color:#2456F0 }
.hero__lede{ max-width:40ch; font-size:1.0625rem; line-height:1.6; color:var(--muted) }
.hero__rating{ display:flex; align-items:center; gap:.7rem }
.hero__stars{ color:#2456F0; display:inline-flex; gap:.1rem; font-size:.9375rem }
.hero__rating-txt{ font-size:.875rem; font-weight:500; color:var(--muted) }
.hero__cta{ display:flex; flex-wrap:wrap; gap:.75rem }
.hero__facts{ display:flex; flex-wrap:wrap; gap:.55rem 1.5rem; font-size:.8125rem; color:#7E88B3 }
.hero__facts span{ display:inline-flex; align-items:center; gap:.4rem }
.hero__facts .icon{ color:#2456F0; font-size:.9rem }

/* pannello foto con l'effetto prima/dopo */
.hero__right{ position:relative }
.media{
  position:relative; overflow:hidden; border-radius:2rem; aspect-ratio:3/2;
  background:var(--surface-2);
  border:1px solid var(--line);
}
.media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 50% }
.media canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none }
.media__hint{
  position:absolute; right:1rem; top:1rem; z-index:3;
  display:inline-flex; align-items:center; gap:.45rem;
  background:#fff; color:#0A1240; border:1px solid var(--line);
  border-radius:9999px; padding:.45rem .85rem .45rem .7rem;
  font-size:.75rem; font-weight:500; letter-spacing:.01em;
  transition:opacity .45s ease;
}
.media__hint .hdot{ width:.4rem; height:.4rem; border-radius:50%; background:#2456F0; animation:pulse 2.4s infinite }
.media.is-used .media__hint{ opacity:0 }

/* ── scheda chat: com'è la chat Sociale ── */
.wacard{
  position:relative; z-index:4; width:100%; max-width:23rem; margin:-2.75rem auto 0;
  border-radius:1.25rem; background:#fff; border:1px solid var(--line); padding:.5rem;
}
.wacard__hd{ display:flex; align-items:center; gap:.6rem; padding:.45rem .45rem .6rem }
.wacard__av{ width:2.15rem; height:2.15rem; flex:none; border-radius:50%; background:#0A1240; display:grid; place-items:center; font-size:1.05rem }
.wacard__who{ display:flex; flex-direction:column; min-width:0 }
.wacard__n{ font-size:.875rem; font-weight:600; letter-spacing:-.015em; line-height:1.25 }
.wacard__s{ display:flex; align-items:center; gap:.35rem; font-size:.6875rem; color:var(--subtle); line-height:1.3 }
.wacard__s .hdot{ width:.35rem; height:.35rem; border-radius:50%; background:var(--accent); flex:none }
.wacard__body{ background:var(--surface-2); border-radius:.9rem; padding:.7rem; display:flex; flex-direction:column; gap:.45rem; min-height:11rem }

.bub{ max-width:93%; border-radius:.8rem; padding:.55rem .65rem; font-size:.8125rem; line-height:1.45 }
.bub--in{ align-self:flex-start; background:#fff; border:1px solid var(--line); border-top-left-radius:.22rem; color:var(--text) }
.bub--out{ align-self:flex-end; background:#DDE7FF; border:1px solid #BCCBFA; border-top-right-radius:.22rem; color:#0A1240 }
.bub b{ font-weight:600 }
.bub__lab{ display:block; font-size:.5938rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem }
.bub__t{ display:flex; align-items:center; justify-content:flex-end; gap:.25rem; margin-top:.3rem; font-size:.625rem; color:var(--subtle); font-variant-numeric:tabular-nums }
.bub__t .icon{ font-size:.8rem; color:var(--accent) }

/* barra di chiusura della hero */
.hero__bar{
  position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:.75rem 1.5rem;
  border-top:1px solid #D6DEF7; padding:1.25rem; margin-top:2.5rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
.hero__sectors{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .9rem }
.hero__sectors b{ color:#0A1240; font-weight:600 }
.hero__sectors span{ display:inline-flex; align-items:center; gap:.35rem }
.hero__sectors .icon{ color:#2456F0; font-size:.75rem }

@media (min-width:640px){
  .hero__grid{ padding-left:2rem; padding-right:2rem }
  .hero__bar{ padding-left:2rem; padding-right:2rem }
  .hero__h1{ font-size:3rem }
}
@media (min-width:1024px){
  .hero__grid{
    display:grid; grid-template-columns:repeat(12,1fr); gap:3.5rem; align-items:center;
    padding:9rem 2rem 4.5rem;
  }
  .hero__left{ grid-column:span 5 }
  .hero__right{ grid-column:span 7 }
  .hero__h1{ font-size:3.75rem }
  .wacard{ position:absolute; left:-2rem; bottom:-2rem; width:21rem; max-width:21rem; margin:0;
           box-shadow:0 0 0 .4rem var(--surface) }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{ background:#fff }
.about__in{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem }
.about__left{ position:relative; min-height:14rem; display:flex; flex-direction:column; justify-content:space-between; gap:3rem }
.about__globe{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); font-size:12rem; color:rgba(36,86,240,.09); pointer-events:none }
.about__eyebrow{ position:relative }
.about__note{ position:relative; display:flex; align-items:center; gap:0.75rem; font-size:0.875rem; color:var(--muted) }
.about__note .icon{ font-size:1.5rem; color:#2456F0 }
.about__note span{ max-width:16rem }
.about__right{ display:flex; flex-direction:column; gap:2.5rem }
.about__h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.015em }
.about__h2 .dim{ color:var(--muted) }
.about__foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid #D6DEF7; padding-top:1.5rem }
.about__social-lab{ font-size:0.875rem; color:#7E88B3; margin-bottom:0.5rem }
.about__socials{ display:flex; gap:0.5rem }
.soc{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:0.875rem }
.soc .icon{ will-change:transform }
.soc--a{ background:#2456F0; color:#fff }
.soc--n{ background:#EEF3FF; color:var(--muted) }
@media (min-width:640px){ .about__in{ padding-left:2rem; padding-right:2rem } .about__globe{ font-size:16rem } .about__h2{ font-size:1.875rem } }
@media (min-width:1024px){ .about__in{ grid-template-columns:1fr 1fr; padding-top:7rem; padding-bottom:7rem } .about__left{ min-height:20rem } .about__globe{ left:-1.5rem; font-size:20rem } }

/* ============================================================
   BAND — il ciclo del prodotto
   ============================================================ */
.band{ background:#fff }
.band ul{ display:flex; flex-direction:column; gap:0.75rem; padding:2.5rem 1.25rem }
.band li{ flex:1 }
.band__tile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-family:'Fredoka',sans-serif; font-size:1.625rem; font-weight:600; letter-spacing:-.012em; will-change:transform }
.band__tile .icon{ font-size:2.25rem }
.band--light{ background:#EEF3FF; color:#0A1240 }
.band--accent{ background:#2456F0; color:#fff }
.band--dark{ background:#0A1240; color:#22D3EE }
.band--ghost{ background:rgba(227,236,255,.75); color:#2456F0 }
@media (min-width:640px){ .band ul{ flex-direction:row; gap:1rem; padding-left:2rem; padding-right:2rem } .band__tile{ height:10rem; font-size:2rem } .band__tile .icon{ font-size:3rem } }

/* ============================================================
   SCENARI (ex portfolio)
   ============================================================ */
.works{ background:#fff }
.works__in{ padding:2.5rem 1.25rem 5rem }
.works__head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; margin-bottom:3rem }
.works__eyebrow{ letter-spacing:.13em }
.works__h2{ font-size:2.25rem; font-weight:700; letter-spacing:-.012em; width:fit-content }
.works__grid{ display:grid; grid-template-columns:1fr; gap:1.5rem }
.work{
  position:relative; min-height:22rem; overflow:hidden; border-radius:2rem;
  background:#0A1240; padding:1.5rem; color:#fff;
  box-shadow:0 0 0 1px rgba(255,255,255,.06); will-change:transform; display:block;
}
.work__meta{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.45); position:relative; z-index:2 }
.work__badge{ width:2.75rem; height:2.75rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:rgba(34,211,238,.14); color:#22D3EE; box-shadow:0 0 0 1px rgba(34,211,238,.3); font-size:1rem; will-change:transform }
/* bolla di chat al centro della card */
.work__wa{ position:absolute; left:1.5rem; right:1.5rem; top:5rem; z-index:1; display:flex; flex-direction:column; gap:.5rem; pointer-events:none }
.wa-msg{ align-self:flex-start; max-width:min(22rem,86%); background:#1A2C86; border:1px solid rgba(34,211,238,.18); border-radius:.9rem; border-top-left-radius:.2rem; padding:.7rem .85rem; font-size:.8rem; line-height:1.45; color:#DCE5FF }
.wa-msg b{ color:#fff; font-weight:600 }
.wa-msg .lbl{ display:block; font-size:.6rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase; color:#22D3EE; margin-bottom:.3rem }
.work__bot{ position:absolute; left:1.5rem; right:1.5rem; bottom:1.5rem; z-index:2 }
.work__bot h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.012em }
.work__bot p{ margin-top:0.5rem; max-width:28rem; font-size:0.875rem; color:rgba(255,255,255,.55) }
.work__tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:0.5rem }
@media (min-width:640px){
  .works__in{ padding-left:2rem; padding-right:2rem }
  .works__h2{ font-size:3rem }
  .work{ min-height:26rem; padding:2rem }
  .work__wa{ left:2rem; right:2rem; top:5.5rem }
  .work__bot{ left:2rem; right:2rem; bottom:2rem }
  .work__bot h3{ font-size:1.875rem }
}
@media (min-width:768px){ .works__grid{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .works__in{ padding-bottom:7rem } }

/* ============================================================
   SERVIZI
   ============================================================ */
.services{ background:#fff }
.services__in{ padding:5rem 1.25rem }
.services__h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:700; letter-spacing:-.012em }
.srow{ border-top:1px solid #D6DEF7 }
.srow:first-child{ border-top:0 }
.srow a{ display:block }
.srow__in{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.5rem; background:rgba(238,243,255,0) }
.srow__i{ width:1.75rem; flex:none; font-size:0.875rem; font-weight:600; color:#2456F0 }
.srow__t{ flex:1; font-size:1.5rem; font-weight:600; letter-spacing:-.012em }
.srow__d{ display:none; max-width:20rem; font-size:0.875rem; color:var(--muted) }
.srow__b{ width:2.5rem; height:2.5rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:#0A1240; color:#22D3EE; font-size:1rem; will-change:transform }
@media (min-width:640px){
  .services__in{ padding-left:2rem; padding-right:2rem }
  .services__h2{ margin-bottom:3.5rem; font-size:3rem }
  .srow__in{ gap:1.5rem; padding-top:2rem; padding-bottom:2rem }
  .srow__i{ width:2.5rem }
  .srow__t{ font-size:1.875rem }
  .srow__b{ width:3rem; height:3rem }
}
@media (min-width:768px){ .srow__t{ font-size:2.25rem } }
@media (min-width:1024px){ .services__in{ padding-top:7rem; padding-bottom:7rem } .srow__d{ display:block } }

/* ============================================================
   PREZZI
   ============================================================ */
.prices{ background:#EEF3FF; border-block:1px solid #D6DEF7 }
.prices__in{ padding:5rem 1.25rem }
.prices__h2{ margin:1.25rem 0 0.75rem; max-width:20ch; font-size:2.25rem; font-weight:700; letter-spacing:-.012em }
.prices__lede{ max-width:52ch; font-size:1rem; color:var(--muted) }
.plans{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:3rem }
.plan{ background:#fff; border:1px solid #D6DEF7; border-radius:1.25rem; padding:1.75rem; display:flex; flex-direction:column }
.plan--best{ border:2px solid #2456F0; position:relative }
.plan__tag{ position:absolute; top:-0.7rem; left:1.75rem; background:#2456F0; color:#fff; font-size:0.688rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; padding:0.25rem 0.7rem; border-radius:9999px }
.plan__n{ font-family:'Fredoka',sans-serif; font-size:1.125rem; font-weight:600; letter-spacing:-.012em }
.plan__p{ font-family:'Fredoka',sans-serif; font-size:2.5rem; font-weight:700; letter-spacing:-.012em; margin-top:0.5rem; font-variant-numeric:tabular-nums }
.plan__p small{ font-family:'Nunito',sans-serif; font-size:0.875rem; font-weight:500; color:#7E88B3; letter-spacing:0 }
.plan__inc{ margin-top:1.25rem; display:flex; flex-direction:column; gap:0.6rem; font-size:0.875rem; color:var(--muted); flex:1 }
.plan__inc li{ display:flex; gap:0.6rem; align-items:flex-start }
.plan__inc .icon{ color:#2456F0; margin-top:.2rem; font-size:.9rem }
.plan .pill{ margin-top:1.5rem }
.prices__note{ margin-top:1.75rem; font-size:0.813rem; color:#7E88B3; text-align:center }
@media (min-width:640px){ .prices__in{ padding-left:2rem; padding-right:2rem } .prices__h2{ font-size:3rem } }
@media (min-width:1024px){ .prices__in{ padding-top:7rem; padding-bottom:7rem } .plans{ grid-template-columns:repeat(3,1fr) } }

/* ============================================================
   STATS
   ============================================================ */
.stats{ background:#fff }
.stats__in{ padding:5rem 1.25rem }
.stats__panel{ border-radius:2rem; background:#0A1240; padding:3rem 1.5rem; color:#fff }
.stats__h2{ margin-top:1rem; max-width:20ch; font-size:1.875rem; font-weight:600; letter-spacing:-.012em }
.stats__grid{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:3rem }
.stat__n{ font-family:'Fredoka',sans-serif; font-size:3rem; font-weight:700; letter-spacing:-.012em; font-variant-numeric:tabular-nums; color:#22D3EE }
.stat__l{ margin-top:0.75rem; font-size:0.875rem; color:rgba(255,255,255,.55) }
@media (min-width:640px){ .stats__in{ padding-left:2rem; padding-right:2rem } .stats__panel{ padding:4rem 2rem } .stat__n{ font-size:3.75rem } }
@media (min-width:768px){ .stats__panel{ padding-left:4rem; padding-right:4rem } .stats__h2{ font-size:2.25rem } .stat__n{ font-size:4.5rem } }
@media (min-width:1024px){ .stats__in{ padding-bottom:7rem } .stats__grid{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:#0A1240; color:#fff }
.footer__in{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem }
.footer__cta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem }
.footer__h2{ max-width:16ch; font-size:2.25rem; font-weight:700; letter-spacing:-.012em }
.footer__cols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem }
.footer__brand{ display:flex; align-items:center; gap:0.6rem; font-family:'Fredoka',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.012em }
.footer__brand .icon{ font-size:1.5rem }
.footer__tag{ margin-top:0.75rem; max-width:22rem; font-size:0.875rem; color:rgba(255,255,255,.55) }
.footer__ct{ font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.4); margin-bottom:1rem }
.footer__list{ display:flex; flex-direction:column; gap:0.75rem; font-size:0.875rem }
.footer__legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:0.75rem; color:rgba(255,255,255,.45) }
.footer__legal-links{ display:flex; gap:1.5rem }
.footer__wm{
  position:absolute; left:0; right:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none;
  user-select:none; -webkit-user-select:none; font-family:'Fredoka',sans-serif;
  font-weight:700; line-height:1; letter-spacing:-.012em; font-size:var(--text-watermark); color:rgba(255,255,255,.05);
}
@media (min-width:640px){ .footer__in{ padding-left:2rem; padding-right:2rem } .footer__h2{ font-size:3rem } .footer__legal{ flex-direction:row } }
@media (min-width:768px){ .footer__h2{ font-size:3.75rem } .footer__cols{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .footer__in{ padding-top:6rem } .footer__cta{ flex-direction:row; align-items:flex-end; justify-content:space-between } .footer__cols{ grid-template-columns:repeat(4,1fr) } }

/* ============================================================
   NAV MENU
   ============================================================ */
.navmenu{ position:fixed; inset:0; z-index:115; display:flex; flex-direction:column; background:#0A1240; color:#fff; opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1) }
.navmenu.is-open{ opacity:1 }
.navmenu[hidden]{ display:none !important }
.navmenu__top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem }
.navmenu__brand{ display:flex; align-items:center; gap:0.6rem; font-family:'Fredoka',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.012em }
.navmenu__brand .icon{ font-size:1.5rem }
.navmenu__close{ display:inline-flex; align-items:center; gap:0.5rem; border:1px solid rgba(255,255,255,.15); border-radius:0.875rem; padding:0.5rem 1rem; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:color .25s ease, border-color .25s ease }
.navmenu__close:hover{ border-color:rgba(255,255,255,.4); color:#fff }
.navmenu__close .icon{ font-size:0.875rem }
.navmenu__nav{ flex:1; display:flex; flex-direction:column; justify-content:center }
.navmenu__nav ul{ display:flex; flex-direction:column; gap:0.25rem }
.navmenu__item{
  display:flex; align-items:baseline; gap:1rem; width:100%; padding-block:0.5rem; text-align:left;
  font-family:'Fredoka',sans-serif; font-size:2.25rem; font-weight:700; letter-spacing:-.012em;
  transform:translateY(1rem); opacity:0; transition:transform .5s ease-out, opacity .5s ease-out;
}
.navmenu.is-open .navmenu__item{ transform:translateY(0); opacity:1 }
.navmenu__idx{ font-family:'Nunito',sans-serif; font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s }
.navmenu__lbl{ color:rgba(255,255,255,.7); transition:color .3s }
.navmenu__item:hover .navmenu__idx{ color:#22D3EE }
.navmenu__item:hover .navmenu__lbl{ color:#fff }
.navmenu__bot{ display:flex; flex-direction:column; gap:0.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:0.75rem; text-transform:uppercase; letter-spacing:.04em; color:rgba(255,255,255,.45) }
.navmenu__start{ color:rgba(255,255,255,.7); transition:color .25s ease }
.navmenu__start:hover{ color:#22D3EE }
@media (min-width:640px){ .navmenu__top{ padding:1.5rem 2rem } .navmenu__item{ font-size:3.75rem } .navmenu__bot{ flex-direction:row; align-items:center; justify-content:space-between; padding-left:2rem; padding-right:2rem } }

/* ============================================================
   MODALE
   ============================================================ */
.modal{
  position:fixed; inset:0; z-index:110; display:flex; align-items:flex-end; justify-content:center; padding:1rem;
  background:rgba(10,18,64,.35); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  opacity:0; transition:opacity .45s cubic-bezier(.22,1,.36,1);
}
.modal.is-open{ opacity:1 }
.modal[hidden]{ display:none !important }
.modal__panel{
  position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:2rem; background:#fff; padding:1.5rem;
  box-shadow:0 12px 32px rgba(10,18,64,.10), 0 0 0 1px var(--line);
  opacity:0; transform:translateY(28px);
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
}
.modal.is-open .modal__panel{ opacity:1; transform:translateY(0) }
.modal.is-closing .modal__panel{ opacity:0; transform:translateY(18px) }
.modal__close{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:#EEF3FF; color:var(--muted); font-size:.875rem; transition:background .2s ease, color .2s ease }
.modal__close:hover{ background:#E3ECFF; color:#0A1240 }
.modal__head{ display:flex; flex-direction:column; gap:0.375rem; margin-bottom:1.5rem }
.modal__kicker{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.115em; color:var(--accent);
}
.modal__kicker::before{ content:""; width:1.85rem; height:1px; flex:none; background:currentColor }
.modal__h2{ font-size:1.5rem; font-weight:700; letter-spacing:-.012em }
.modal form{ display:flex; flex-direction:column; gap:1rem }
.field{ display:flex; flex-direction:column; gap:0.5rem }
.field__lab{ font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:#7E88B3 }
.field input, .field textarea{
  width:100%; border:1px solid #D6DEF7; background:rgba(238,243,255,.6); border-radius:0.875rem;
  padding:0.75rem 1rem; font-size:0.875rem; font-family:inherit; color:#0A1240; outline:none;
  transition:border-color .2s ease, background .2s ease;
}
.field textarea{ resize:none }
.field input:focus, .field textarea:focus{ border-color:#2456F0; background:#fff }
.modal__bot{ margin-top:0.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem }
.modal__note{ font-size:0.75rem; color:#7E88B3 }
.modal__ok{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:2rem }
.modal__ok-badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:#0A1240; font-size:1.5rem }
.modal__ok p{ max-width:34ch; font-size:0.875rem; color:var(--muted) }
@media (min-width:640px){ .modal{ align-items:center } .modal__panel{ padding:2rem } .modal__h2{ font-size:1.875rem } }

/* barra CTA mobile */
.mbar{
  position:fixed; left:0; right:0; bottom:0; z-index:58; display:none; gap:0.625rem;
  background:#fff; border-top:1px solid var(--line); padding:0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom,0px));
}
.mbar .pill{ flex:1 }
.mbar .pill__s, .mbar .pill__in{ width:100%; justify-content:center }
@media (max-width:767px){ .mbar{ display:flex } body{ padding-bottom:5rem } }

/* ============================================================
   PAGINE INTERNE — stesso sistema: piatto, bordi 1px, stacchi di tono
   ============================================================ */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; font-size:.75rem; color:var(--subtle); margin-bottom:1.25rem }
.crumb a:hover{ color:var(--accent) }
.crumb span{ color:var(--line) }

.phero{ position:relative; overflow:hidden; background:var(--surface); border-radius:0 0 2rem 2rem }
.phero__grid{ display:flex; flex-direction:column; gap:2.5rem; padding:6.5rem 1.25rem 3rem }
.phero__left{ display:flex; flex-direction:column; gap:1.35rem }
.phero h1{ max-width:17ch; font-size:2.25rem; font-weight:700; line-height:1.03; letter-spacing:-.012em }
.phero h1 .hl{ color:var(--accent) }
.phero__lede{ max-width:44ch; font-size:1.0625rem; line-height:1.6; color:var(--muted) }
.phero__bar{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1.5rem;
  border-top:1px solid var(--line); padding:1.25rem; margin-top:2rem;
  font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
}
@media (min-width:640px){
  .phero__grid{ padding-left:2rem; padding-right:2rem }
  .phero__bar{ padding-left:2rem; padding-right:2rem }
  .phero h1{ font-size:2.75rem }
}
@media (min-width:1024px){
  .phero__grid{ display:grid; grid-template-columns:repeat(12,1fr); gap:3.5rem; align-items:center; padding:8.5rem 2rem 4.5rem }
  .phero__left{ grid-column:span 6 }
  .phero__right{ grid-column:span 6; position:relative }
  .phero h1{ font-size:3.25rem }
  .phero .wacard{ position:absolute; left:-2rem; bottom:-2rem; width:19rem; max-width:19rem; margin:0; box-shadow:0 0 0 .4rem var(--surface) }
}

/* sezione generica */
.sec{ padding:4.5rem 1.25rem }
.sec--alt{ background:var(--surface); border-block:1px solid var(--line) }
.sec__h2{ margin:1.1rem 0 0; max-width:18ch; font-size:1.875rem; font-weight:700; letter-spacing:-.012em }
.sec__lede{ margin-top:.9rem; max-width:50ch; font-size:1rem; color:var(--muted); line-height:1.6 }
@media (min-width:640px){ .sec{ padding-left:2rem; padding-right:2rem } .sec__h2{ font-size:2.25rem } }
@media (min-width:1024px){ .sec{ padding-top:6rem; padding-bottom:6rem } }

/* tre problemi */
.probs{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem }
.prob{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.prob__i{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface-2); color:var(--accent); font-size:1rem; margin-bottom:.9rem }
.prob p{ font-size:.9375rem; line-height:1.55; color:var(--text) }
@media (min-width:768px){ .probs{ grid-template-columns:repeat(3,1fr) } }

/* tre step */
.steps3{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem; counter-reset:s }
.step3{ background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.step3__n{ font-family:'Fredoka',sans-serif; font-size:.8125rem; font-weight:700; color:var(--accent); letter-spacing:.06em }
.step3 h3{ margin-top:.7rem; font-size:1.1875rem; font-weight:600; letter-spacing:-.012em }
.step3 p{ margin-top:.5rem; font-size:.9375rem; line-height:1.55; color:var(--muted) }
@media (min-width:768px){ .steps3{ grid-template-columns:repeat(3,1fr) } }

/* conversazione di esempio */
.call{ background:var(--ink); border-radius:2rem; padding:2rem 1.5rem; color:#fff; margin-top:2.5rem }
.call__h{ display:flex; align-items:center; gap:.6rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.45); margin-bottom:1.5rem }
.call__h .icon{ color:var(--accent-from); font-size:.95rem }
.turns{ display:flex; flex-direction:column; gap:.75rem; max-width:46rem }
.turn{ display:flex; gap:.85rem; align-items:flex-start }
.turn__w{ flex:none; width:4.5rem; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em; padding-top:.35rem }
.turn--c .turn__w{ color:rgba(255,255,255,.4) }
.turn--a .turn__w{ color:var(--accent-from) }
.turn__b{ border-radius:.9rem; padding:.7rem .9rem; font-size:.9375rem; line-height:1.5 }
.turn--c .turn__b{ background:#141F63; border:1px solid rgba(255,255,255,.07); color:#DCE5FF }
.turn--a .turn__b{ background:#1A2C86; border:1px solid rgba(34,211,238,.18); color:#E3ECFF }
@media (min-width:640px){ .call{ padding:2.5rem 2rem } }

/* tabella confronto */
.cmp{ margin-top:2.5rem; overflow-x:auto; border:1px solid var(--line); border-radius:1.25rem; background:#fff }
.cmp table{ width:100%; border-collapse:collapse; min-width:34rem }
.cmp th, .cmp td{ padding:.9rem 1rem; text-align:left; font-size:.875rem; border-top:1px solid var(--line) }
.cmp thead th{ border-top:0; font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--subtle) }
.cmp thead th.is-us{ color:#fff; background:var(--accent); border-radius:.6rem .6rem 0 0 }
.cmp td.is-us{ background:var(--surface-2); font-weight:500 }
.cmp td:first-child{ color:var(--text); font-weight:500 }
.cmp .yes{ color:var(--accent); font-weight:600 }
.cmp .no{ color:var(--subtle) }

/* FAQ */
.faq{ margin-top:2.5rem; border-top:1px solid var(--line) }
.faq__i{ border-bottom:1px solid var(--line); padding:1.5rem 0 }
.faq__q{ font-family:'Fredoka',sans-serif; font-size:1.125rem; font-weight:600; letter-spacing:-.012em }
.faq__a{ margin-top:.55rem; max-width:62ch; font-size:.9375rem; line-height:1.65; color:var(--muted) }

/* CTA scura */
.ctaband{ background:var(--ink); color:#fff; border-radius:2rem; padding:3rem 1.5rem; text-align:center; margin:0 1.25rem }
.ctaband h2{ max-width:20ch; margin-inline:auto; font-size:1.875rem; font-weight:700; letter-spacing:-.012em }
.ctaband p{ margin:1rem auto 0; max-width:46ch; color:rgba(255,255,255,.6); font-size:1rem; line-height:1.6 }
.ctaband__b{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem }
@media (min-width:640px){ .ctaband{ padding:4rem 2rem; margin-inline:2rem } .ctaband h2{ font-size:2.5rem } }

/* griglia di link (altri settori / articoli correlati) */
.lgrid{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2.5rem }
.lcard{ display:block; background:#fff; border:1px solid var(--line); border-radius:1.25rem; padding:1.35rem; transition:border-color .2s ease }
.lcard:hover{ border-color:var(--accent) }
.lcard__k{ font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent) }
.lcard__t{ margin-top:.5rem; font-family:'Fredoka',sans-serif; font-size:1.0625rem; font-weight:600; letter-spacing:-.012em }
.lcard__d{ margin-top:.45rem; font-size:.875rem; color:var(--muted); line-height:1.5 }
.lcard__m{ margin-top:.9rem; font-size:.75rem; color:var(--subtle); display:flex; gap:.6rem; align-items:center }
@media (min-width:640px){ .lgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .lgrid--3{ grid-template-columns:repeat(3,1fr) } }

/* filtri blog */
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:2rem }
.chipf{ font-size:.8125rem; font-weight:500; padding:.5rem 1rem; border-radius:9999px; border:1px solid var(--line); background:#fff; color:var(--muted) }
.chipf[aria-current="true"]{ background:var(--ink); border-color:var(--ink); color:#fff }
.chipf:hover{ border-color:var(--accent); color:var(--accent) }
.chipf[aria-current="true"]:hover{ color:#fff }

/* testo lungo: articoli e pagine legali */
.prose{ max-width:42rem; font-size:1rem; line-height:1.75; color:var(--text) }
.prose > * + *{ margin-top:1.15rem }
.prose h2{ margin-top:2.75rem; font-size:1.5rem; font-weight:700; letter-spacing:-.012em }
.prose h3{ margin-top:2rem; font-size:1.1875rem; font-weight:600; letter-spacing:-.012em }
.prose p{ color:var(--muted) }
.prose strong{ color:var(--text); font-weight:600 }
.prose a{ color:var(--accent); text-decoration:underline; text-underline-offset:.15em }
.prose ul, .prose ol{ padding-left:1.15rem; color:var(--muted) }
.prose ul{ list-style:disc } .prose ol{ list-style:decimal }
.prose li + li{ margin-top:.5rem }
.prose blockquote{ border-left:2px solid var(--accent); padding-left:1.1rem; color:var(--text); font-size:1.0625rem }
.prose table{ width:100%; border-collapse:collapse; font-size:.9375rem }
.prose th, .prose td{ padding:.7rem .8rem; border-top:1px solid var(--line); text-align:left }
.prose__meta{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; font-size:.8125rem; color:var(--subtle); margin-top:1.1rem }
.prose__box{ margin-top:2.5rem; background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.prose__box p{ color:var(--text); font-size:.9375rem; margin:0 0 1.1rem }

/* form */
.formwrap{ display:grid; grid-template-columns:1fr; gap:3rem; margin-top:2.5rem }
.formcard{ background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem }
.formcard form{ display:flex; flex-direction:column; gap:1rem }
.f2{ display:grid; grid-template-columns:1fr; gap:1rem }
.fcheck{ display:flex; gap:.6rem; align-items:flex-start; font-size:.8125rem; color:var(--muted); line-height:1.5 }
.fcheck input{ margin-top:.2rem; accent-color:var(--accent); width:1rem; height:1rem; flex:none }
.field select{
  width:100%; border:1px solid var(--line); background:rgba(238,243,255,.6); border-radius:.875rem;
  padding:.75rem 1rem; font-size:.875rem; font-family:inherit; color:var(--text); outline:none;
}
.field select:focus{ border-color:var(--accent); background:#fff }
.contacts{ display:flex; flex-direction:column; gap:1.25rem }
.contact{ display:flex; gap:.85rem; align-items:flex-start; padding-bottom:1.25rem; border-bottom:1px solid var(--line) }
.contact:last-child{ border-bottom:0 }
.contact{ align-items:center }
.contact__i{ width:2.35rem; height:2.35rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--surface-2); color:var(--accent) }
.contact__k{ display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--subtle) }
.contact__v{ display:block; margin-top:.2rem; font-size:.9375rem; font-weight:500 }
.contact__v a:hover{ color:var(--accent) }
@media (min-width:640px){ .formcard{ padding:2rem } .f2{ grid-template-columns:1fr 1fr } }
@media (min-width:1024px){ .formwrap{ grid-template-columns:1.25fr .75fr; gap:4rem } }

/* ============================================================
   SCHEDE SETTORE — la foto fa il prima/dopo al passaggio del mouse
   ============================================================ */
.sgrid{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.75rem }
@media (min-width:640px){ .sgrid{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .sgrid{ grid-template-columns:repeat(3,1fr) } }

.scard{
  display:block; overflow:hidden; border-radius:1.5rem;
  border:1px solid var(--line); background:#fff;
  transition:border-color .35s ease;
}
.scard:hover{ border-color:var(--accent) }
.scard__ph{ display:block; position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--surface-2) }
.scard__ph img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% 50%;
}
/* la seconda foto sta sopra e si scopre: stessa scena, esito diverso */
.scard__ph .is-warm{ opacity:0; transition:opacity .55s cubic-bezier(.22,1,.36,1) }
.scard:hover .is-warm, .scard:focus-visible .is-warm{ opacity:1 }
/* su touch non c'è il passaggio del mouse: mostro direttamente l'esito buono */
@media (hover:none){ .scard__ph .is-warm{ opacity:1 } }

.scard__tag{
  position:absolute; left:.85rem; top:.85rem; z-index:2;
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(10,18,64,.72); color:#fff; border-radius:9999px;
  padding:.35rem .7rem .35rem .55rem; font-size:.6875rem; font-weight:600;
  letter-spacing:.02em; transition:background .35s ease;
}
.scard__tag .d{ width:.4rem; height:.4rem; border-radius:50%; background:#FFC63A; transition:background .35s ease }
.scard:hover .scard__tag{ background:rgba(36,86,240,.92) }
.scard:hover .scard__tag .d{ background:#22D3EE }
/* l'etichetta racconta lo stato che la foto sta mostrando */
.scard__tag .t2{ display:none }
.scard:hover .scard__tag .t1, .scard:focus-visible .scard__tag .t1{ display:none }
.scard:hover .scard__tag .t2, .scard:focus-visible .scard__tag .t2{ display:inline }
@media (hover:none){
  .scard__tag{ background:rgba(36,86,240,.92) }
  .scard__tag .d{ background:#22D3EE }
  .scard__tag .t1{ display:none } .scard__tag .t2{ display:inline }
}

.scard__in{ display:block; padding:1.25rem 1.25rem 1.35rem }
.scard__k{ display:block; font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--accent) }
.scard__t{ display:block; margin-top:.5rem; font-family:'Fredoka',sans-serif; font-size:1.25rem; font-weight:600; letter-spacing:-.012em; line-height:1.2 }
.scard__m{
  margin-top:.75rem; display:flex; gap:.55rem; align-items:flex-start;
  background:var(--surface-2); border-radius:.75rem; border-top-left-radius:.2rem;
  padding:.55rem .65rem; font-size:.8125rem; line-height:1.4; color:var(--text);
}
.scard__m .icon{ color:var(--accent); font-size:.85rem; flex:none; margin-top:.15rem }
.scard__go{
  margin-top:1rem; display:flex; align-items:center; justify-content:space-between;
  font-size:.8125rem; font-weight:600; color:var(--accent);
}
.scard__go .icon{ font-size:1rem; transition:transform .35s cubic-bezier(.22,1,.36,1) }
.scard:hover .scard__go .icon{ transform:translate(3px,-3px) }

/* ============================================================
   ACCESSO — Accedi / Inizia ora nell'intestazione, pagine auth
   ============================================================ */
.hdr-sep{ display:none; width:1px; height:1.5rem; background:var(--line); flex:none }
.hdr-login{ display:none; font-size:.875rem; font-weight:500; white-space:nowrap }
.hdr-login > span{ display:inline-block; opacity:.82; will-change:transform,opacity }
.hdr-login[aria-current="page"] > span{ opacity:1; color:var(--accent) }
.hdr-cta .pill__in{ padding:.625rem 1.25rem; font-size:.8125rem; font-weight:600 }
@media (min-width:640px){ .hdr-sep, .hdr-login{ display:block } }
@media (max-width:389px){ .hdr-cta{ display:none } }

.navmenu__nav ul li.navmenu__gap{ height:1px; background:rgba(255,255,255,.1); margin:1.1rem 0 }
.navmenu__item--auth .navmenu__idx{ color:rgba(34,211,238,.55) }
.navmenu__bot .navmenu__start{ display:inline-flex; align-items:center; gap:.45rem; color:#22D3EE; font-weight:600 }

/* --- impianto delle due pagine --- */
.auth{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-top:2.5rem; align-items:start }
@media (min-width:1024px){ .auth{ grid-template-columns:1.15fr .85fr; gap:4rem } .auth--narrow{ grid-template-columns:1fr .9fr } }
.authcard{ background:#fff; border:1px solid var(--line); border-radius:1.5rem; padding:1.5rem }
.authcard form{ display:flex; flex-direction:column; gap:1.1rem }
@media (min-width:640px){ .authcard{ padding:2.25rem } }
.authcard__h{ font-family:'Fredoka',sans-serif; font-size:1.5rem; font-weight:700; letter-spacing:-.012em; margin-bottom:.4rem }
.authcard__p{ font-size:.9375rem; color:var(--muted); margin-bottom:.35rem }
.auth__swap{ margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:.875rem; color:var(--muted); text-align:center }
.auth__swap a{ color:var(--accent); font-weight:600 }
.auth__swap a:hover{ text-decoration:underline }
.field__hint{ font-size:.75rem; color:var(--subtle) }
.field__opt{ text-transform:none; font-weight:400; letter-spacing:0; color:var(--subtle) }
.frow{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap }
.frow .fcheck{ margin:0 }
.flink{ font-size:.8125rem; font-weight:600; color:var(--accent) }
.flink:hover{ text-decoration:underline }

/* --- stati di errore sui campi --- */
.field--err input, .field--err select{ border-color:#C2410C; background:#FEF6F1 }
.field__err{ display:none; font-size:.75rem; font-weight:500; color:#C2410C }
.field--err .field__err{ display:block }
.fcheck--err{ color:#C2410C }
.fcheck--err input{ outline:2px solid #C2410C; outline-offset:2px }

/* --- avvisi: buon fine ed errore --- */
.alert{
  display:flex; gap:.85rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:1rem; padding:.9rem 1rem;
  font-size:.875rem; line-height:1.5;
}
.alert__i{ width:1.6rem; height:1.6rem; flex:none; display:grid; place-items:center; border-radius:9999px; font-size:.8rem }
.alert__t{ display:block; font-weight:600; margin-bottom:.15rem }
.alert--ok{ background:var(--surface-2); border-color:#BCCBFA; color:#0A1240 }
.alert--ok .alert__i{ background:var(--accent); color:#fff }
.alert--err{ background:#FDF3ED; border-color:#EED3BF; color:#0A1240 }
.alert--err .alert__i{ background:#C2410C; color:#fff }
.alert p{ color:var(--muted); margin:0 }

/* --- pannello di conferma che sostituisce il modulo --- */
.authdone{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1rem; padding-block:1.5rem }
.authdone__badge{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:var(--accent); color:#fff; font-size:1.5rem }
.authdone h2{ font-family:'Fredoka',sans-serif; font-size:1.625rem; font-weight:700; letter-spacing:-.012em }
.authdone p{ max-width:38ch; font-size:.9375rem; color:var(--muted) }
.authdone__steps{ width:100%; margin-top:.5rem; text-align:left; display:flex; flex-direction:column; gap:.75rem }
.authdone__step{ display:flex; gap:.75rem; align-items:flex-start; font-size:.875rem; color:var(--muted) }
.authdone__step b{ color:var(--ink); font-weight:600 }
.authdone__n{ width:1.5rem; height:1.5rem; flex:none; display:grid; place-items:center; border-radius:9999px; background:var(--surface-2); color:var(--accent); font-size:.75rem; font-weight:700 }

/* --- colonna di destra --- */
.authside{ display:flex; flex-direction:column; gap:1.5rem }
.authside__box{ background:var(--surface); border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem }
.authside__k{ font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--accent); display:inline-flex; align-items:center; gap:.75rem }
.authside__k::before{ content:""; width:1.85rem; height:1px; background:currentColor; flex:none }
.authside__list{ margin-top:1.1rem; display:flex; flex-direction:column; gap:.9rem }
.authside__li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.875rem; color:var(--muted); line-height:1.55 }
.authside__li b{ color:var(--ink); font-weight:600 }
.authside__li .icon{ color:var(--accent); margin-top:.15rem; flex:none }
.authside__note{ font-size:.8125rem; color:var(--subtle); line-height:1.6 }
.alert[hidden]{ display:none }
/* la scheda chat, nella colonna di destra, non deve sovrapporsi al riquadro sopra */
.authside .wacard{ position:static; inset:auto; width:100%; max-width:none; margin:0; box-shadow:none }

/* ============================================================
   SOCIALE — strato cartoon sopra l'impianto del template
   Contorni blu notte marcati, ombre "piene" spostate in basso,
   fondi cosmici con stelline nelle hero. Palette e font sono
   una PROPOSTA: nessun HEX o font ufficiale è stato fornito.
   ============================================================ */
:root{
  --stars:
    radial-gradient(1.6px 1.6px at 22px 34px,  #fff 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 96px 122px, #9BF1FF 50%, transparent 55%),
    radial-gradient(2px 2px at 204px 62px,     #fff 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 262px 214px,#fff 50%, transparent 55%),
    radial-gradient(1.6px 1.6px at 142px 262px,#FFE27A 50%, transparent 55%),
    radial-gradient(1.1px 1.1px at 302px 296px,#fff 50%, transparent 55%),
    radial-gradient(1.3px 1.3px at 44px 204px, #9BF1FF 50%, transparent 55%),
    radial-gradient(1px 1px at 180px 172px,    #fff 50%, transparent 55%);
}
body{ font-family:'Nunito',sans-serif; color:var(--ink) }
h1,h2,h3{ font-family:'Fredoka','Nunito',sans-serif; font-weight:800 }
:focus-visible{ outline:3px solid var(--gold); outline-offset:2px }

/* temi: stesso impianto, atmosfera diversa (vedi identità del progetto) */
.tema-evento{ --sky-1:#7B34E0; --sky-2:#34105F; --sky-3:#12051F; --hero-muted:#E6D8FF; --hero-hl:#FFC63A }
.tema-personaggio{ --sky-1:#5CC8FF; --sky-2:#138FB6; --sky-3:#0A3A58; --hero-muted:#DDF6FF; --hero-hl:#FFE27A }

/* ---------- header sopra la hero scura ---------- */
.header{ color:#fff }
.nav a[aria-current="page"] > span{ opacity:1 !important; color:var(--gold) }
.clock{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16); color:rgba(255,255,255,.72) }
.clock__t{ color:#fff }
.clock__sep{ color:rgba(255,255,255,.3) }
.clock__live{ color:var(--accent-from) }
.clock__dot{ background:var(--accent-from); animation-name:pulseC }
@keyframes pulseC{0%{box-shadow:0 0 0 0 rgba(34,211,238,.55)}70%{box-shadow:0 0 0 .5rem rgba(34,211,238,0)}100%{box-shadow:0 0 0 0 rgba(34,211,238,0)}}
.menu-btn{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2) }
.menu-btn:hover{ border-color:rgba(255,255,255,.5) }
.hdr-sep{ background:rgba(255,255,255,.2) }
.brand__s{ font-family:'Fredoka',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:0 }
.brand__s .icon{ font-size:2.1rem }
.brand__sub{ font-family:'Nunito',sans-serif; font-size:.6875rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-left:.15rem; align-self:center; padding-top:.2rem }

/* ---------- hero e hero interne: cielo stellato ---------- */
.hero, .phero{
  background:radial-gradient(120% 95% at 80% 8%, var(--sky-1) 0%, var(--sky-2) 44%, var(--sky-3) 100%);
  color:var(--hero-ink);
}
.hero::before, .phero::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:var(--stars); background-size:320px 320px; opacity:.75;
}
.tema-evento .phero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(40% 55% at 88% 78%, rgba(255,122,26,.32), transparent 70%),
             radial-gradient(30% 40% at 8% 90%, rgba(255,61,61,.18), transparent 70%);
}
.phero__grid, .phero__bar{ position:relative; z-index:2 }
.hero__wm{ color:rgba(255,255,255,.045) }
.hero__h1, .phero h1{ color:#fff; letter-spacing:-.005em; line-height:1.02 }
.hero__h1 .hl, .phero h1 .hl{ color:var(--hero-hl) }
.hero__lede, .phero__lede{ color:var(--hero-muted) }
.hero__facts{ color:rgba(255,255,255,.72) }
.hero__facts .icon{ color:var(--accent-from) }
.hero__bar, .phero__bar{ border-top-color:rgba(255,255,255,.14); color:rgba(255,255,255,.7) }
.hero__sectors b{ color:#fff }
.hero__sectors .icon{ color:var(--gold) }
.crumb{ color:rgba(255,255,255,.62) }
.crumb a:hover{ color:var(--gold) }
.crumb span{ color:rgba(255,255,255,.3) }
.crumb .crumb__cur{ color:#fff }
.hero__chips{ display:flex; flex-wrap:wrap; gap:.5rem }
.hero__chips span{
  display:inline-flex; align-items:center; gap:.4rem; border-radius:9999px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  padding:.35rem .8rem; font-size:.8125rem; font-weight:700; color:#fff;
}
.hero__chips .icon{ color:var(--gold); font-size:.85rem }

/* pannello illustrato con l'effetto prima/dopo */
.media{ border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink); background:var(--sky-3) }
.media img{ object-position:50% 50% }
.media__hint{ border:2px solid var(--ink); font-weight:700 }
.media__hint .hdot{ background:var(--gold); animation:none; box-shadow:0 0 0 3px rgba(255,198,58,.35) }

/* scheda chat */
.wacard{ border:3px solid var(--ink); box-shadow:0 .4rem 0 var(--ink) }
.wacard__av{ background:var(--sky-3) }
.wacard__s .hdot{ background:#3BE38B }
.wacard__body{ background:var(--surface) }
.bub{ border-width:2px }
.bub--in{ border-color:var(--line) }
.bub__nick{ display:block; font-size:.6875rem; font-weight:800; color:var(--violet); margin-bottom:.15rem }
.bub__lab{ color:var(--accent) }
@media (min-width:1024px){
  .hero .wacard, .phero .wacard{ box-shadow:0 .4rem 0 var(--ink) }
}

/* ---------- pulsanti: pieni, con contorno e ombra cartoon ---------- */
.pill__in{ font-weight:800; font-size:.9rem }
.pill--accent .pill__in, .pill--gold .pill__in, .pill--dark .pill__in, .pill--light .pill__in, .pill--onink .pill__in{
  border:2px solid var(--ink); box-shadow:var(--pop-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.pill__s:active .pill__in{ transform:translateY(.2rem); box-shadow:0 .1rem 0 var(--ink) }
.pill--gold .pill__in, .pill--onink .pill__in{ background:var(--gold); color:var(--ink) }
.pill--gold .pill__badge, .pill--onink .pill__badge{ background:var(--ink); color:var(--gold) }
.pill--accent .pill__badge{ background:#fff; color:var(--accent) }
.pill--light .pill__in{ background:#fff }
.pill--light .pill__badge{ background:var(--gold); color:var(--ink) }
.pill--outline .pill__in{ border:2px solid var(--ink) }
.pill--ghost-light .pill__in, .pill--ghostink .pill__in{ border:2px solid rgba(255,255,255,.4); background:rgba(255,255,255,.07); color:#fff }
.hdr-cta .pill__in{ padding:.55rem 1.15rem; font-size:.8125rem; font-weight:800 }

/* ---------- etichette ---------- */
.eyebrow{ font-weight:800 }
.eyebrow--dark{ color:var(--accent) }
.eyebrow--light{ color:var(--accent-from) }
.tema-evento .eyebrow--light{ color:#FFB070 }
.tema-personaggio .eyebrow--light{ color:#FFE27A }

/* ---------- about ---------- */
.about__globe{ color:rgba(36,86,240,.08) }
.about__h2{ font-family:'Fredoka',sans-serif; font-weight:600; letter-spacing:0; line-height:1.3 }
.soc{ border:2px solid var(--ink) }

/* ---------- banda ---------- */
.band__tile{ font-family:'Fredoka',sans-serif; font-weight:800; border:3px solid var(--ink); box-shadow:0 .35rem 0 var(--ink) }
.band--light{ background:var(--surface); color:var(--ink) }
.band--accent{ background:var(--accent); color:#fff }
.band--dark{ background:var(--ink); color:var(--gold) }
.band--ghost{ background:var(--gold); color:var(--ink) }

/* ---------- schede cartoon ---------- */
.scard, .prob, .step3, .lcard, .plan, .formcard, .cmp, .authside__box{
  border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink);
}
.scard, .lcard{ transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s cubic-bezier(.22,1,.36,1) }
.scard:hover, .lcard:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:0 .6rem 0 var(--ink) }
.scard__ph{ border-bottom:2px solid var(--ink) }
.scard__ph img{ object-position:50% 50% }
.scard__tag{ background:rgba(10,18,64,.78) }
.scard:hover .scard__tag{ background:rgba(36,86,240,.95) }
.scard__tag .d{ background:#9AA3C7 }
.scard:hover .scard__tag .d{ background:var(--gold) }
@media (hover:none){ .scard__tag{ background:rgba(36,86,240,.95) } .scard__tag .d{ background:var(--gold) } }
.scard__t, .lcard__t, .step3 h3, .faq__q, .plan__n{ font-family:'Fredoka',sans-serif; font-weight:700; letter-spacing:0 }
.scard__t{ font-size:1.35rem }
.works__h2, .services__h2, .prices__h2, .sec__h2, .footer__h2, .stats__h2, .ctaband h2{ letter-spacing:-.005em; line-height:1.05 }
.srow__t{ font-family:'Fredoka',sans-serif; font-weight:800; letter-spacing:0 }
.srow__b{ background:var(--ink); color:var(--gold); border:2px solid var(--ink) }
.step3__n{ font-family:'Fredoka',sans-serif; color:var(--accent); font-size:1rem }
.prob__i, .contact__i{ border:2px solid var(--ink); background:var(--gold); color:var(--ink) }

/* ---------- i nostri siti (ex prezzi) ---------- */
.plan--best{ border:3px solid var(--ink); background:linear-gradient(180deg,#fff 0%,#F3F7FF 100%) }
.plan__tag{ background:var(--gold); color:var(--ink); border:2px solid var(--ink) }
.plan__p{ font-family:'Fredoka',sans-serif; font-size:1.5rem; font-weight:800; letter-spacing:0; color:var(--accent); word-break:break-word }
.plan__d{ margin-top:.9rem; font-size:.9375rem; line-height:1.55; color:var(--muted); flex:1 }
.plan__ico{ width:3.25rem; height:3.25rem; border-radius:1rem; border:2px solid var(--ink); display:grid; place-items:center; font-size:1.5rem; margin-bottom:1rem; background:var(--surface-2); color:var(--accent) }
.plan--best .plan__ico{ background:var(--gold); color:var(--ink) }

/* ---------- pannello concorso (ex numeri) ---------- */
.stats__panel{
  position:relative; overflow:hidden; border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink);
  background:radial-gradient(110% 110% at 85% 0%, #3B6BFF 0%, #1A2F9E 45%, #0B1150 100%);
}
.stats__panel::before{ content:""; position:absolute; inset:0; background-image:var(--stars); background-size:320px 320px; opacity:.7; pointer-events:none }
.stats__panel > *{ position:relative }
.win{ display:grid; grid-template-columns:1fr; gap:2.5rem; margin-top:2.5rem; align-items:center }
.win__n{ font-family:'Fredoka',sans-serif; font-weight:800; line-height:.9; font-size:4.5rem; color:var(--gold); font-variant-numeric:tabular-nums; text-shadow:0 .3rem 0 var(--ink) }
.win__u{ display:block; font-size:1.5rem; color:#fff; margin-top:.5rem; text-shadow:none }
.win__txt{ font-size:1rem; line-height:1.65; color:rgba(255,255,255,.75); max-width:44ch }
.win__txt b{ color:#fff }
.win__cta{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem }
.win__art{ position:relative }
.win__art img{ width:100%; border-radius:1.5rem; border:3px solid var(--ink) }
@media (min-width:640px){ .win__n{ font-size:7rem } }
@media (min-width:1024px){ .win{ grid-template-columns:1.1fr 1fr; gap:4rem } .win__n{ font-size:8.5rem } }

/* ---------- CTA scura e footer ---------- */
.ctaband{
  position:relative; overflow:hidden; border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink);
  background:radial-gradient(120% 120% at 85% 0%, var(--sky-1) 0%, var(--sky-2) 45%, var(--sky-3) 100%);
}
.ctaband::before{ content:""; position:absolute; inset:0; background-image:var(--stars); background-size:320px 320px; opacity:.7; pointer-events:none }
.ctaband > *{ position:relative }
.ctaband p{ color:rgba(255,255,255,.72) }
.footer__brand{ font-family:'Fredoka',sans-serif; font-weight:800; font-size:1.5rem; letter-spacing:0 }
.footer__brand .icon{ font-size:2rem }
.footer__legal{ text-align:center }
.navmenu__brand{ font-family:'Fredoka',sans-serif; font-weight:800; letter-spacing:0 }
.navmenu__brand .icon{ font-size:2rem }
.navmenu__item{ font-family:'Fredoka',sans-serif; font-weight:800; letter-spacing:0 }
.navmenu__item:hover .navmenu__idx{ color:var(--gold) }
.navmenu__item--auth .navmenu__idx{ color:rgba(255,198,58,.6) }
.navmenu__bot .navmenu__start{ color:var(--gold) }

/* ---------- banner evento ---------- */
.evbanner{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1fr; margin-top:2.5rem;
  border-radius:2rem; border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink);
  background:radial-gradient(120% 120% at 90% 90%, #7B34E0 0%, #34105F 45%, #12051F 100%); color:#fff;
}
.evbanner::before{ content:""; position:absolute; inset:0; background-image:var(--stars); background-size:320px 320px; opacity:.6; pointer-events:none }
.evbanner__txt{ position:relative; padding:2rem 1.5rem; display:flex; flex-direction:column; gap:.9rem; justify-content:center }
.evbanner__tag{ align-self:flex-start; font-size:.6875rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); border-radius:9999px; padding:.3rem .75rem; color:#FFD9A8 }
.evbanner__t{ font-family:'Fredoka',sans-serif; font-weight:800; font-size:2.25rem; line-height:1; letter-spacing:-.01em }
.evbanner__t .name{ display:block; color:var(--gold); text-transform:uppercase; font-size:1.15em; text-shadow:0 .25rem 0 #12051F }
.evbanner__info{ font-size:.9375rem; font-weight:700; color:#E6D8FF }
.evbanner__note{ font-size:.8125rem; color:rgba(255,255,255,.55) }
.evbanner__art{ position:relative; min-height:14rem }
.evbanner__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
@media (min-width:768px){ .evbanner{ grid-template-columns:1fr 1.1fr } .evbanner__txt{ padding:3rem } .evbanner__t{ font-size:3.25rem } }

/* ---------- personaggi ---------- */
.chars{ display:flex; flex-direction:column; gap:2rem; margin-top:2.5rem }
.charcard{
  position:relative; overflow:hidden; display:grid; grid-template-columns:1fr;
  border-radius:2rem; border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink); color:#fff;
}
.charcard--roshi{ background:linear-gradient(160deg,#138FB6 0%,#0A3A58 100%) }
.charcard--morgana{ background:linear-gradient(160deg,#6A2BD1 0%,#12051F 100%) }
.charcard__txt{ padding:2rem 1.5rem; display:flex; flex-direction:column; gap:1rem; justify-content:center }
.charcard__k{ font-size:.75rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#FFE27A }
.charcard__n{ font-family:'Fredoka',sans-serif; font-weight:800; font-size:4rem; line-height:.9; letter-spacing:-.01em; text-shadow:0 .3rem 0 var(--ink) }
.charcard__d{ font-size:1rem; line-height:1.6; color:rgba(255,255,255,.82); max-width:40ch }
.charcard__traits{ display:flex; flex-wrap:wrap; gap:.45rem }
.charcard__traits span{ font-size:.75rem; font-weight:800; border-radius:9999px; padding:.3rem .7rem; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25) }
.charcard__art{ position:relative; min-height:16rem; border-top:3px solid var(--ink) }
.charcard__art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
@media (min-width:768px){
  .charcard{ grid-template-columns:.9fr 1.1fr }
  .charcard__txt{ padding:3rem }
  .charcard__n{ font-size:6rem }
  .charcard__art{ border-top:0; border-left:3px solid var(--ink); min-height:22rem }
}

/* ---------- news ---------- */
.lcard{ display:flex; flex-direction:column }
.lcard__d{ flex:1 }
.lcard[hidden]{ display:none }
.lcard__m .go{ margin-left:auto; color:var(--accent); font-weight:800 }
.chipf{ border:2px solid var(--ink); color:var(--ink); font-weight:700 }
.chipf[aria-current="true"]{ background:var(--gold); border-color:var(--ink); color:var(--ink) }
.chipf:hover, .chipf[aria-current="true"]:hover{ color:var(--ink); border-color:var(--ink); background:var(--surface-2) }
.chipf[aria-current="true"]:hover{ background:var(--gold) }

/* ---------- moduli e modale ---------- */
.field input, .field textarea, .field select{ border-width:2px }
.field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--accent) }
.modal__panel{ border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink) }
.modal__ok-badge{ background:var(--sky-3) }
.mbar{ border-top:2px solid var(--ink) }

/* ---------- note di trasparenza nel testo ---------- */
.note{ display:flex; gap:.7rem; align-items:flex-start; margin-top:1.5rem; max-width:52rem; font-size:.875rem; line-height:1.55; color:var(--muted); background:#fff; border:2px dashed var(--line); border-radius:1rem; padding:.9rem 1rem }
.note .icon{ color:var(--accent); flex:none; margin-top:.2rem }

/* ---------- ritocchi ---------- */
.tema-personaggio .clock__live{ color:#FFE27A }
.tema-personaggio .clock__dot{ background:#FFE27A }
@media (max-width:639px){
  .brand__sub{ display:none }
  .hdr-cta{ display:none }
  .brand__s{ font-size:1.35rem }
}

/* ============================================================
   v2 (English site) — chat embed, banners, events, staff, AEO blocks
   ============================================================ */
h1,h2,h3{ font-family:'Fredoka','Nunito',sans-serif; font-weight:700 }
.hero__h1, .phero h1{ font-weight:700 }

/* hero con banner reale */
.hero__banner{ position:relative }
.hero__banner img{ width:100%; height:auto; display:block; filter:drop-shadow(0 1.25rem 2.5rem rgba(0,0,0,.35)) }
.phero__banner img{ width:100%; height:auto; display:block; border-radius:1.5rem; filter:drop-shadow(0 1rem 2rem rgba(0,0,0,.3)) }
.phero__banner--frame img{ border:3px solid var(--ink); box-shadow:0 .45rem 0 var(--ink); filter:none }

/* ---------- risposta in breve (AEO) ---------- */
.answer{
  margin-top:1.75rem; max-width:52rem; background:#fff; border:2px solid var(--ink); box-shadow:0 .3rem 0 var(--ink);
  border-radius:1.25rem; padding:1.25rem 1.4rem; font-size:1.0625rem; line-height:1.6; color:var(--ink);
}
.answer__k{ display:block; font-size:.6875rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:.4rem }
.facts{ display:grid; grid-template-columns:1fr; gap:.75rem; margin-top:1.5rem }
.fact{ display:flex; gap:.7rem; align-items:flex-start; background:#fff; border:2px solid var(--ink); border-radius:1rem; padding:.9rem 1rem; box-shadow:0 .25rem 0 var(--ink) }
.fact .icon{ flex:none; width:2rem; height:2rem; padding:.4rem; border-radius:.7rem; background:var(--gold); color:var(--ink); border:2px solid var(--ink) }
.fact b{ display:block; font-family:'Fredoka',sans-serif; font-size:1.05rem; font-weight:600 }
.fact span{ font-size:.875rem; color:var(--muted); line-height:1.5 }
@media (min-width:768px){ .facts{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1100px){ .facts--4{ grid-template-columns:repeat(4,1fr) } }
.updated{ margin-top:1rem; font-size:.8125rem; color:rgba(255,255,255,.6) }
.sec .updated{ color:var(--subtle) }

/* ---------- chat embed ---------- */
.chatbox{ margin-top:2rem; border-radius:1.5rem; border:3px solid var(--ink); box-shadow:0 .5rem 0 var(--ink); overflow:hidden; background:#fff }
.chatbox__bar{ display:flex; align-items:center; gap:.5rem; padding:.7rem 1rem; background:linear-gradient(90deg,#2F6BFF,#7C4DFF); color:#fff; border-bottom:3px solid var(--ink); font-size:.8125rem; font-weight:800 }
.chatbox__dot{ width:.8rem; height:.8rem; border-radius:50%; border:2px solid var(--ink) }
.chatbox__live{ margin-left:.5rem; display:inline-flex; align-items:center; gap:.4rem }
.chatbox__live::before{ content:""; width:.5rem; height:.5rem; border-radius:50%; background:#3BE38B; box-shadow:0 0 0 3px rgba(59,227,139,.35) }
.chatbox__open{ margin-left:auto; color:#fff; opacity:.9; font-weight:700; text-decoration:underline; text-underline-offset:.15em }
.chatbox__stage{ position:relative; width:100%; height:min(78vh,620px); min-height:480px; background:var(--sky-3) }
.chatbox__stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#fff }
.chatbox__poster{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.25rem; text-align:center; padding:1.5rem; color:#fff;
  background:radial-gradient(110% 110% at 80% 0%, #3B6BFF 0%, #1A2F9E 45%, #0B1150 100%);
}
.chatbox__poster::before{ content:""; position:absolute; inset:0; background-image:var(--stars); background-size:320px 320px; opacity:.7; pointer-events:none }
.chatbox__poster > *{ position:relative }
.chatbox__poster img{ width:min(30rem,90%); height:auto }
.chatbox__poster p{ max-width:40ch; color:rgba(255,255,255,.78); font-size:.9375rem }
.chatbox__note{ padding:.6rem 1rem; font-size:.75rem; color:var(--muted); background:var(--surface); border-top:2px solid var(--line) }

/* ---------- eventi ---------- */
.evgrid{ display:grid; grid-template-columns:1fr; gap:1.5rem; margin-top:2.5rem }
@media (min-width:900px){ .evgrid{ grid-template-columns:repeat(2,1fr) } }
.evcard{ display:flex; flex-direction:column; background:#fff; border:2px solid var(--ink); border-radius:1.5rem; box-shadow:0 .35rem 0 var(--ink); overflow:hidden }
.evcard__img{ background:var(--sky-3); border-bottom:2px solid var(--ink); aspect-ratio:2.6/1; overflow:hidden; display:grid; place-items:center }
.evcard__img img{ width:100%; height:100%; object-fit:cover }
.evcard__img--contain img{ object-fit:contain; padding:.5rem }
.evcard__in{ padding:1.25rem 1.35rem 1.4rem; display:flex; flex-direction:column; gap:.6rem; flex:1 }
.evcard__top{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-size:.8125rem; color:var(--muted); font-weight:700 }
.badge{ display:inline-flex; align-items:center; gap:.35rem; font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:9999px; padding:.25rem .65rem; border:2px solid var(--ink) }
.badge--live{ background:#3BE38B; color:var(--ink) }
.badge--live::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background:var(--ink); animation:blink 1.4s infinite }
@keyframes blink{ 50%{ opacity:.2 } }
.badge--ended{ background:var(--surface-2); color:var(--muted); border-color:var(--line) }
.evcard__t{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.4rem; line-height:1.15 }
.evcard__d{ font-size:.9375rem; line-height:1.6; color:var(--muted) }
.evcard__list{ display:flex; flex-direction:column; gap:.35rem; font-size:.875rem; color:var(--ink) }
.evcard__list li{ display:flex; gap:.5rem } .evcard__list .icon{ color:var(--accent); margin-top:.2rem; flex:none }
.evcard__go{ margin-top:auto; padding-top:.5rem }
.evfeature{ display:grid; grid-template-columns:1fr; gap:2rem; align-items:center; margin-top:2.5rem }
.evfeature img{ width:100%; height:auto }
@media (min-width:1024px){ .evfeature{ grid-template-columns:1.1fr 1fr; gap:3rem } }

/* regolamento */
.rules{ display:grid; grid-template-columns:1fr; gap:1.25rem; margin-top:2.5rem }
@media (min-width:900px){ .rules{ grid-template-columns:repeat(2,1fr) } }
.rulebox{ background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .35rem 0 var(--ink); padding:1.5rem }
.rulebox h3{ font-size:1.3rem; display:flex; align-items:center; gap:.6rem }
.rulebox h3 .icon{ width:2.1rem; height:2.1rem; padding:.4rem; border-radius:.7rem; border:2px solid var(--ink); background:var(--gold); color:var(--ink) }
.rulebox ol, .rulebox ul{ margin-top:1rem; padding-left:1.2rem; display:flex; flex-direction:column; gap:.55rem; font-size:.9375rem; line-height:1.55; color:var(--ink) }
.rulebox ol{ list-style:decimal } .rulebox ul{ list-style:disc }
.rulebox li::marker{ color:var(--accent); font-weight:800 }
.rulebox p{ margin-top:.8rem; font-size:.9375rem; color:var(--muted); line-height:1.6 }
.rulebox a{ color:var(--accent); font-weight:700; text-decoration:underline; text-underline-offset:.15em }
.rulebox--wide{ grid-column:1/-1 }
code, kbd{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; background:var(--surface-2); border:1px solid var(--line); border-radius:.4rem; padding:.05rem .4rem; color:var(--ink) }
.tiers{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem }
@media (min-width:768px){ .tiers{ grid-template-columns:repeat(3,1fr) } }
.tier{ background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .35rem 0 var(--ink); padding:1.35rem }
.tier__k{ font-size:.75rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:var(--accent) }
.tier__v{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.9rem; color:var(--ink); margin-top:.25rem }
.tier__d{ font-size:.875rem; color:var(--muted); margin-top:.35rem; line-height:1.5 }
.tier--gold{ background:var(--gold) } .tier--gold .tier__k{ color:var(--ink) } .tier--gold .tier__d{ color:var(--ink) }

/* ---------- staff ---------- */
.staff{ display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; margin-top:1.5rem }
@media (min-width:768px){ .staff{ grid-template-columns:repeat(4,1fr) } }
.member{ background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .35rem 0 var(--ink); padding:1.35rem 1rem; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem }
.member__av{ width:4.25rem; height:4.25rem; border-radius:50%; border:3px solid var(--ink); display:grid; place-items:center; font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.6rem; color:#fff; box-shadow:0 .2rem 0 var(--ink) }
.member__n{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:1.2rem }
.member__r{ font-size:.6875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; border-radius:9999px; padding:.2rem .6rem; border:2px solid var(--ink) }
.member__r--main{ background:var(--gold); color:var(--ink) }
.member__r--owner{ background:var(--surface-2); color:var(--accent) }
.staff__h{ margin-top:2.5rem; font-size:1.4rem; display:flex; align-items:center; gap:.6rem }

/* ---------- personaggi v2 ---------- */
.charcard--joe{ background:linear-gradient(160deg,#1A2F9E 0%,#0B1150 100%) }
.charcard__art--banner{ display:grid; place-items:center; background:var(--sky-3); min-height:0 }
.charcard__art--banner img{ position:static; width:100%; height:100%; object-fit:cover }

/* ---------- tabella comandi / confronto ---------- */
.cmp td code{ white-space:nowrap }

/* ---------- link interni tra le landing ---------- */
.rooms{ display:grid; grid-template-columns:1fr; gap:1rem; margin-top:2rem }
@media (min-width:640px){ .rooms{ grid-template-columns:repeat(2,1fr) } }
@media (min-width:1024px){ .rooms{ grid-template-columns:repeat(3,1fr) } }
.room{ display:flex; gap:.9rem; align-items:flex-start; background:#fff; border:2px solid var(--ink); border-radius:1.25rem; box-shadow:0 .3rem 0 var(--ink); padding:1.1rem 1.2rem; transition:transform .2s ease, box-shadow .2s ease }
.room:hover{ transform:translateY(-3px); box-shadow:0 .5rem 0 var(--ink) }
.room .icon{ flex:none; width:2.4rem; height:2.4rem; padding:.5rem; border-radius:.8rem; border:2px solid var(--ink); background:var(--surface-2); color:var(--accent) }
.room b{ display:block; font-family:'Fredoka',sans-serif; font-weight:600; font-size:1.1rem }
.room span{ font-size:.875rem; color:var(--muted); line-height:1.45 }

/* auth su tema scuro header: la pagina parte dalla hero */
.authcard{ border:2px solid var(--ink); box-shadow:0 .35rem 0 var(--ink) }
.authcard__h{ font-family:'Fredoka',sans-serif; font-weight:700 }
.authdone h2{ font-family:'Fredoka',sans-serif }
.authdone__badge{ background:var(--accent); border:2px solid var(--ink) }
.field__lab{ color:var(--muted) }
.pwd{ position:relative } .pwd input{ padding-right:4.5rem }
.pwd__t{ position:absolute; right:.6rem; top:50%; transform:translateY(-50%); font-size:.75rem; font-weight:800; color:var(--accent); padding:.3rem .5rem }
.prose h2{ font-family:'Fredoka',sans-serif }
.faq__a a{ color:var(--accent); font-weight:700 }
.sec__h2{ max-width:24ch }