/* =========================================================
   Sportello Pratiche Online — style.css (CLEANED / CHIRURGICO)
   Obiettivo: stessa estetica neon Garuda, ma CSS stabile:
   - rimossi override duplicati / sperimentali
   - corretti errori di sintassi che rompevano il parsing
   - cookie banner cliccabile + si chiude
   - Anna, HELP! non sovrappone la hero su mobile
   - WhatsApp floating sempre bottom-right
   ========================================================= */
/* =====================================================================
   🧭 MAPPA / ORDINE LOGICO (SOLO COMMENTI) — NON CAMBIA LA GRAFICA
   ---------------------------------------------------------------------
   01) FONDAMENTA GLOBALI    : :root, reset, body, sfondo Garuda (.page-bg)
   02) STRUTTURA CONDIVISA   : .page, .section, headings, show/hide, animazioni
   03) HERO + CTA (COMUNI)   : home + AnnaHelp (logo, titoli, bottoni, ISEE popup)
   04) HOME (COMPONENTI)     : terminal “Come funziona”, pill grid + palette, CTA telefono, orari
   05) PAGINA ANNA HELP      : hero badge, intro, glass, card list, payoff, micro-fix dedicati
   06) PAGINE LEGALI         : Cookie/Privacy (stesse regole, solo allineamenti mirati)
   07) PAGINA 404            : box, typography, bottone back-home
   08) FOOTER                : layout desktop/mobile, contatti, SumUp, legal links, prompt terminale
   09) UI FLOAT              : WhatsApp floating + Cookie banner
   10) RESPONSIVE & HOTFIX   : media query + override (devono stare “dopo” per la cascade)
   ---------------------------------------------------------------------
   ⚠️ Nota tecnica: in CSS l’ordine conta. Qui ho aggiunto TITOLI/COMMENTI
   e ho marcato i blocchi “HOTFIX/OVERRIDE” che DEVONO restare in fondo
   perché sovrascrivono intenzionalmente le regole base.
   ===================================================================== */


/* =====================================================================
   01) FONDAMENTA GLOBALI — variabili, reset, body, sfondo Garuda
   ===================================================================== */

/* -------------------- BASE / SFONDO -------------------- */

:root{
  --bg0:#050010;
  --bg1:#0b0018;
  --bg2:#1a0030;

  --txt:#fdfdff;

  --cyan:#00f7ff;
  --cyan2:#00f7d2;
  --pink:#ff1fb6;
  --pink2:#ff4fe0;
  --yellow:#ffe600;
}

*{ box-sizing:border-box; }

html, body{ height:100%; }

body{
  margin:0;
  font-family:'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color:var(--txt);
  background:var(--bg0);
  overflow-x:hidden;
}

.page-bg{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;

  background:
    radial-gradient(circle at 20% 0%, rgba(0, 255, 200, 0.35), transparent 55%),
    radial-gradient(circle at 80% 15%, rgba(255, 0, 180, 0.35), transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(255, 255, 80, 0.25), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(120, 80, 255, 0.35), transparent 55%),
    linear-gradient(145deg, var(--bg1), var(--bg2) 40%, #070017 80%);
}

.page{
  min-height:100vh;
}

/* blocca qualsiasi “sbordo” laterale accidentale */
.page, main, section{ overflow-x:hidden; }

/* =====================================================================
   03) HERO + CTA (HOME + ANNAHELP) — logo, titoli, bottoni, popup ISEE
   ===================================================================== */

/* -------------------- HERO (HOME + ANNAHELP) -------------------- */

.hero{
  padding:32px 16px 40px;
  text-align:center;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

/* link grande Anna,HELP!✈️ (è un <a>, non un button) */
.annahelp-link{
  display:inline-flex;
  align-items:center;
  gap:6px;

  /* su desktop sta a destra, ma non overlay */
  align-self:flex-end;
  width:fit-content;
  margin:0 0 14px auto;

  padding:14px 22px;
  border-radius:999px;
  text-decoration:none;

  background:linear-gradient(135deg, var(--pink2), var(--pink));
  color:#190016;

  font-weight:800;
  box-shadow:
    0 0 14px rgba(255, 80, 220, 0.85),
    0 0 28px rgba(255, 50, 180, 0.65);

  transition: transform .12s ease, filter .12s ease;
}
.annahelp-link:hover{
  filter:brightness(1.07);
  transform:translateY(-2px) scale(1.02);
}
.annahelp-anna{ font-size:1rem; }
.annahelp-help{ font-size:1.2rem; letter-spacing:.5px; }
.annahelp-plane{ font-size:1.15rem; }

/* logo */
.logo-wrap{
  display:flex;
  justify-content:center;
  margin-top:8px;
}
.logo-circle{
  width:150px;
  height:150px;
  border-radius:50%;
  padding:10px;

  background:radial-gradient(circle, rgba(0,255,200,.9), rgba(0,180,150,.25));
  box-shadow:
    0 0 25px rgba(0,255,200,.8),
    0 0 60px rgba(255,0,200,.35);

  display:flex;
  align-items:center;
  justify-content:center;
}
.logo{
  max-width:100%;
  max-height:100%;
  border-radius:50%;
}

/* titoli */
.hero-title{
  font-family:'Graduate', serif;
  font-size:2.6rem;
  margin:20px 0 8px;
  letter-spacing:1px;
  text-shadow:
    0 0 12px rgba(0,255,200,.9),
    0 0 22px rgba(255,0,200,.7);
}
.hero-subtitle{
  font-size:1.05rem;
  opacity:.92;
  margin:0;
}

/* CTA area (home) */
.hero-ctas{
  margin-top:22px;
  margin-bottom:52px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
}

.hero-arrow{
  font-size:2.2rem;
  margin-top:10px;
  color:#7CFFDC;
  text-shadow:
    0 0 8px rgba(124,255,220,.6),
    0 0 16px rgba(124,255,220,.4);
  animation:pulseDown 1.6s infinite;
}
@keyframes pulseDown{
  0%{ transform:translateY(0); opacity:.6; }
  50%{ transform:translateY(6px); opacity:1; }
  100%{ transform:translateY(0); opacity:.6; }
}

.btn-primary,
.btn-secondary{
  border-radius:999px;
  border:none;
  font-weight:700;
  font-size:1rem;
  padding:12px 30px;
  cursor:pointer;
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.btn-primary{
  padding:18px 44px;
  font-size:1.12rem;
  font-weight:800;

  background:linear-gradient(135deg, var(--cyan), #00d0ff);
  color:#001018;

  box-shadow:
    0 0 14px rgba(0,242,255,.9),
    0 0 28px rgba(0,160,255,.7);
}
.btn-primary:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.btn-secondary{
  background:linear-gradient(135deg, var(--pink2), var(--pink));
  color:#190016;
  box-shadow:
    0 0 14px rgba(255,80,220,.85),
    0 0 28px rgba(255,50,180,.65);
}

/* bottone ISEE */
.btn-isee2026{
  margin-top:26px;
  margin-bottom:10px;

  width:fit-content;

  display:inline-flex;
  align-items:center;
  gap:10px;

  padding:10px 26px;
  border-radius:14px;
  font-weight:900;
  font-size:1.15rem;
  letter-spacing:.6px;

  background:linear-gradient(135deg, var(--yellow), #ff9f1a);
  color:#1a1200;

  box-shadow:
    0 0 14px rgba(255,230,0,.9),
    0 0 32px rgba(255,160,0,.65);

  border:none;
  cursor:pointer;

  animation: iseePulse 2.2s infinite;
  position:relative;
  z-index:5;
}
.btn-isee2026:hover{
  transform:scale(1.06);
  box-shadow:
    0 0 20px rgba(255,230,0,1),
    0 0 46px rgba(255,160,0,.85);
}
.btn-isee2026:active{ transform:scale(.98); }

@keyframes iseePulse{
  0%{
    box-shadow:
      0 0 14px rgba(255,230,0,.8),
      0 0 32px rgba(255,160,0,.6);
  }
  50%{
    box-shadow:
      0 0 22px rgba(255,230,0,1),
      0 0 48px rgba(255,160,0,.85);
  }
  100%{
    box-shadow:
      0 0 14px rgba(255,230,0,.8),
      0 0 32px rgba(255,160,0,.6);
  }
}

/* popup ISEE */
.isee-popup{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;

  background:rgba(8,12,28,.35);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.isee-box{
  background:linear-gradient(180deg, rgba(20,30,70,.65), rgba(10,15,40,.55));
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);

  border-radius:22px;
  padding:26px;
  width:min(420px, 90%);
  text-align:center;
  color:#eaf6ff;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.08),
    0 30px 80px rgba(0,0,0,.6);
}
.close-popup{
  margin-top:18px;
  padding:10px 22px;
  border-radius:999px;
  border:none;
  background:#1de9b6;
  color:#002b24;
  font-weight:700;
  cursor:pointer;
}

@media (prefers-reduced-motion: reduce){
  .btn-isee2026{ animation:none; }
  .hero-arrow{ animation:none; }
}

/* =====================================================================
   02) STRUTTURA CONDIVISA — sezioni, H2, animazioni show/hide
   ===================================================================== */

/* -------------------- SEZIONI -------------------- */

.section{
  padding:10px 18px 32px;
  text-align:center;
}

.section h2{
  font-family:'Graduate', serif;
  font-size:1.9rem;
  margin:8px 0 12px;
  text-shadow:
    0 0 10px rgba(0,255,200,.7),
    0 0 20px rgba(255,0,200,.5);
}

/* visibilità sezioni */
.is-hidden{ display:none; opacity:0; }
.is-visible{ display:block; animation:fadeInUp .45s ease-out forwards; }
@keyframes fadeInUp{
  from{ opacity:0; transform:translateY(12px); }
  to{ opacity:1; transform:translateY(0); }
}

/* =====================================================================
   04A) HOME — “COME FUNZIONA” (terminal-style) + steps list
   ===================================================================== */

/* -------------------- COME FUNZIONA (terminal-style) -------------------- */

.steps-section{ margin-top:8px; }

.terminal-box{
  margin:18px auto 0;
  max-width:760px;
  padding:18px 16px;
  border-radius:14px;

  background:
    radial-gradient(circle at 0% 0%, rgba(0,255,200,.3), transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(255,0,200,.25), transparent 55%),
    rgba(5,5,25,.88);

  box-shadow:
    0 0 22px rgba(0,255,200,.55),
    0 0 40px rgba(255,0,200,.35);

  text-align:left;
  font-family:"JetBrains Mono","Fira Code", monospace;

  font-size:1.08rem;   /* ⬅️ PIÙ GRANDE */
  line-height:1.65;    /* ⬅️ PIÙ RESPIRO */
}

.steps-list{
  list-style:none;
  margin:0;
  padding:0;
}

.steps-list li{
  position:relative;
  margin:20px 0;
  padding-left:170px;
  line-height:1.5;
  color:#e9f9ff;
  word-wrap:break-word;
  white-space:normal;
  text-shadow:0 0 8px rgba(0,255,255,.8);
}

/* prompt unico (niente doppione) */
.steps-list li::before{
  content:"# spo:// › ";
  position:absolute;
  left:0;
  top:0;

  color:var(--cyan);
  font-weight:700;
  letter-spacing:.5px;

  max-width:168px;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* =====================================================================
   04B) HOME — PILL GRID + PALETTE (gerarchia servizi)
   ===================================================================== */

/* -------------------- PILL GRID (HOME) -------------------- */

.pill-grid{
  margin: 42px auto 0;
  max-width: 920px;
  padding-top: 18px;

  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap: 18px 22px;
}


.pill{
  position:relative;
  isolation: isolate;
  padding:14px 28px;
  border-radius:999px;

  font-family:'Inter', sans-serif;
  font-weight:700;
  font-size:1rem;
  white-space:nowrap;

  color:#031818;
  background:linear-gradient(135deg, #00ffd5, #00ff9c);

  box-shadow:
    inset 0 0 18px rgba(255,255,255,.45),
    inset 0 0 28px rgba(0,255,200,.65),
    0 0 18px rgba(0,255,200,.95),
    0 0 42px rgba(0,255,200,.65);

  border:none;
  cursor:default;

  transition: transform .15s ease, box-shadow .15s ease;
}


.pill:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:
    inset 0 0 22px rgba(255,255,255,.55),
    inset 0 0 36px rgba(0,255,220,.75),
    0 0 26px rgba(0,255,220,1),
    0 0 60px rgba(0,255,220,.8);
}

.pill-wide{
  padding-left:42px;
  padding-right:42px;
  text-align:center;
}
/* =========================================================
   PILL COLORS — GERARCHIA VISIVA GARUDA
   (NO CYAN · NO GIALLO · NO ROSSO · NO CTA COLOR)
   ========================================================= */


/* =========================================================
   1️⃣ PILL FISCALI — PROTAGONISTE ASSOLUTE
   Colore: VERDE NEON PROFONDO (potere, autorità)
   ========================================================= */

.pill.pill-fiscale{
  background: linear-gradient(
    135deg,
    #00ff9f,
    #00cc7a
  );
  color:#021812;

  box-shadow:
    inset 0 0 22px rgba(255,255,255,.55),
    inset 0 0 38px rgba(0,255,160,.75),
    0 0 44px rgba(0,255,160,1),
    0 0 96px rgba(0,255,160,.85);
}


/* =========================================================
   1️⃣ BIS — RISCOSSIONE AdE
   Stesso fisco, PIÙ PESO (autorità)
   ========================================================= */

.pill.pill-riscossione{
  background: linear-gradient(
    135deg,
    #00ff9f,
    #00b86a
  );

  box-shadow:
    inset 0 0 26px rgba(255,255,255,.6),
    inset 0 0 44px rgba(0,255,150,.85),
    0 0 56px rgba(0,255,150,1),
    0 0 120px rgba(0,255,150,.9);
}


/* =========================================================
   2️⃣ PILL PREVIDENZA / PATRONATO
   Colore: LILLA / VIOLA NEON (bonus, diritti)
   ========================================================= */

.pill.pill-previdenza{
  background: linear-gradient(
    135deg,
    #c77dff,
    #9b5de5
  );
  color:#140a24;

  box-shadow:
    inset 0 0 18px rgba(255,255,255,.45),
    0 0 28px rgba(180,120,255,.85),
    0 0 56px rgba(155,90,230,.6);
}


/* =========================================================
   3️⃣ PILL SERVIZI
   Colore: ROSA / FUCSIA NEON (allegro, digitale)
   ========================================================= */

.pill.pill-servizi{
  background: linear-gradient(
    135deg,
    #ff5fd2,
    #ff3fa4
  );
  color:#2a0018;

  box-shadow:
    inset 0 0 18px rgba(255,255,255,.45),
    0 0 26px rgba(255,90,200,.85),
    0 0 52px rgba(255,60,160,.6);
}


/* =====================================================================
   05) PAGINA — ANNA HELP (dedicata)
   ===================================================================== */

/* -------------------- ANNA HELP (pagina dedicata) -------------------- */

.annahelp-page-top{
  padding:16px 18px 0;
  text-align:left;
}

.back-home{
  color:var(--txt);
  text-decoration:none;
  opacity:.9;
}
.back-home:hover{ text-decoration:underline; }

.annahelp-hero-image{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
  margin:0px 0 10px;
  padding:0;
  overflow-x:hidden;
  position:relative;
  overflow:visible;
}

.annahelp-hero-img{
  display:block;
  width:100%;
  max-width:520px;
  height:auto;
  filter: drop-shadow(0 0 14px rgba(0,255,255,.35));
}

/* testo / layout della sezione Anna Help */
.section.anna-section{
  padding-top:20px;
  padding-bottom:64px;
}
.anna-intro{
  max-width:760px;
  margin:10px auto 14px;
  font-size:1rem;
  opacity:.95;
}

/* Titoli Anna Help un po’ più importanti */
.annahelp-page .anna-section h2{
  font-size:clamp(2.1rem, 4.2vw, 3.1rem);
  line-height:1.1;
  margin:18px 0 14px;
  letter-spacing:1px;
  text-shadow:
    0 0 10px rgba(0,255,220,.55),
    0 0 20px rgba(0,255,220,.35),
    0 0 28px rgba(255,80,220,.28),
    0 0 40px rgba(255,80,220,.18);
}

.annahelp-subtitle{
  font-family:'Graduate', serif;
  text-align:center;
  font-size:clamp(1.1rem, 2.2vw, 1.6rem);
  font-weight:900;
  letter-spacing:.12em;
  margin:0 0 26px;
  opacity:1;
  text-shadow:
    0 0 8px rgba(255,255,255,.18),
    0 0 16px rgba(0,255,220,.32),
    0 0 26px rgba(255,80,220,.22);
}

/* bottone toggle (se presente) */
.annahelp-toggle{
  margin:18px auto 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding:14px 36px;
  font-size:1.1rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;

  cursor:pointer;
}

/* vetro base condiviso */
.annahelp-glass{
  max-width:820px;
  width:min(820px, 92%);
  margin:16px auto;
  padding:18px 22px;
  border-radius:14px;

  background:
    radial-gradient(circle at 0% 0%, rgba(0,255,200,.25), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,0,200,.18), transparent 55%),
    rgba(5,5,25,.78);

  box-shadow:
    0 0 18px rgba(0,255,200,.45),
    0 0 34px rgba(255,0,200,.28);
}

/* descrizione (box) */
.annahelp-desc-box{ text-align:center; }
.annahelp-desc{
  font-size:1.08rem;
  line-height:1.65;
  margin:0 0 10px;
  opacity:.96;
}
.annahelp-desc:last-child{ margin-bottom:0; }

/* separatore # */
.annahelp-sep{
  text-align:center;
  margin:10px 0 12px;
  font-size:1.8rem;
  font-weight:900;
  line-height:1;
  color:var(--cyan);
  text-shadow:
    0 0 6px rgba(0,247,255,.9),
    0 0 14px rgba(0,247,255,.55),
    0 0 26px rgba(0,247,255,.25);
}

/* lista: card rigide e coerenti */
.annahelp-card{
  width:min(820px, 92%);
  margin:14px auto;
  padding:14px 18px;
  border-radius:16px;

  background:
    linear-gradient(135deg, rgba(0,255,200,.18), rgba(255,0,200,.14)),
    rgba(8,8,30,.80);

  box-shadow:
    0 0 18px rgba(0,255,200,.28),
    0 0 34px rgba(255,0,200,.22);

  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);

  display:grid;
  grid-template-columns:auto 1fr;
  column-gap:14px;
  align-items:center;
}

.annahelp-prompt{
  font-weight:900 !important; /*prima era 800*/
  letter-spacing: .6px;
  font-size:.9rem;
  color:var(--cyan);
  white-space:nowrap;
  text-shadow:0 0 8px rgba(0,247,255,.6);
}

.annahelp-line{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:1.1rem;
  font-weight:600;
  line-height:1.65;
}

.annahelp-check{
  flex-shrink:0;
  font-size:1rem;
  color:var(--cyan);
  text-shadow:0 0 8px rgba(0,247,255,.55);
}

/* payoff */
.anna-bottom{
  margin-top:28px;
  margin-bottom:20px;

  font-family:'Graduate', serif;
  font-size:1.25rem;
  font-weight:900;
  letter-spacing:.22em;
  text-transform:uppercase;

  color:#eaffff;

  text-shadow:
    0 0 6px rgba(0,255,255,.6),
    0 0 14px rgba(0,255,255,.45),
    0 0 28px rgba(0,255,255,.25);
}

.divider{
  width:65%;
  max-width:500px;
  height:1px;
  margin:26px auto 10px;
  background:linear-gradient(90deg,
    transparent,
    rgba(0,255,200,.9),
    rgba(255,0,200,.8),
    transparent);
}

/* =====================================================================
   07) PAGINA — 404
   ===================================================================== */

/* -------------------- 404 -------------------- */

.err404{
  padding-top:26px;
  padding-bottom:18px;
  display:flex;
  flex-direction:column;
  align-items:center;
}
.err404-box{
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding:28px 22px 24px;
  border-radius:18px;

  background:
    radial-gradient(circle at 0% 0%, rgba(0,255,200,.22), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,0,200,.18), transparent 55%),
    rgba(5,5,25,.55);

  box-shadow:
    0 0 22px rgba(0,255,200,.35),
    0 0 40px rgba(255,0,200,.22);
}
.err404 .divider{
  width:60%;
  max-width:420px;
  margin:26px auto 10px;
}
.err404-code{
  font-family:'Graduate', serif;
  font-size:clamp(4.2rem, 10vw, 7.2rem);
  letter-spacing:.12em;
  line-height:1;
  margin:6px 0 8px;
  text-shadow:
    0 0 14px rgba(0,255,200,.85),
    0 0 28px rgba(255,0,200,.65);
}
.err404-title{
  font-family:'Graduate', serif;
  font-size:1.35rem;
  letter-spacing:.06em;
  margin:8px 0 10px;
  opacity:.98;
}
.err404-text{
  margin:0 auto 16px;
  font-size:1.08rem;
  line-height:1.7;
  opacity:.95;
  text-shadow:0 0 8px rgba(0,255,255,.22);
}
.err404-home{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 26px;
  border-radius:999px;
  text-decoration:none;
  font-weight:800;

  background:linear-gradient(135deg, var(--cyan), #00d0ff);
  color:#001018;
  box-shadow:
    0 0 14px rgba(0,242,255,.9),
    0 0 28px rgba(0,160,255,.7);
}
.err404-home:hover{ transform:translateY(-1px); filter:brightness(1.05); }

/* =====================================================================
   08) COMPONENTE — FOOTER (desktop + mobile) — contatti, P.IVA, SumUp, legal links
   ===================================================================== */

/* =========================================================
   FOOTER — DOPPIA VERSIONE
   Desktop: orizzontale
   Mobile: verticale + QR
   ========================================================= */

.footer{
  margin: 26px auto 40px;
  max-width: 1040px;
  padding: 0 16px;
}

.footer-skin{
  border-radius: 22px;
  padding: 22px 22px 18px;

  background:
    radial-gradient(circle at 0% 0%, rgba(0,255,200,.18), transparent 55%),
    radial-gradient(circle at 100% 100%, rgba(255,0,200,.16), transparent 55%),
    rgba(5,5,25,.72);

  border: 1px solid rgba(255,255,255,.10);

  box-shadow:
    0 0 0 1px rgba(0,255,200,.12) inset,
    0 0 22px rgba(0,255,200,.28),
    0 0 40px rgba(255,0,200,.18);
}

/* --- show/hide layout --- */
.footer-layout--mobile{ display:none; }
.footer-layout--desktop{ display:block; }

/* Soglia: sotto questa larghezza mostriamo il footer verticale */
@media (max-width: 760px){
  .footer-layout--desktop{ display:none; }
  .footer-layout--mobile{ display:block; }
  .legal-links--desktop{ display:none !important; }
}

/* --------- Header desktop con linee --------- */
.footer-head{
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom: 14px;
}

.footer-head__line{
  height:1px;
  flex:1;
  background: linear-gradient(90deg,
    rgba(0,255,200,0),
    rgba(0,255,200,.65),
    rgba(255,0,200,.55),
    rgba(255,0,200,0)
  );
  opacity:.9;
}

.footer-brand{
  font-family: 'Graduate', serif;
  font-size: clamp(1.25rem, 2.1vw, 1.8rem);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-align:center;

  color: #fdfdff;
  text-shadow:
    0 0 10px rgba(0,255,200,.55),
    0 0 22px rgba(255,0,200,.35);
}

.footer-brand--mobile{
  margin-bottom: 10px;
}

/* --------- Desktop grid --------- */
.footer-desktop-grid{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
  align-items: start;
}

.footer-contacts{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

/* Righe con icona */
.frow{
  display:flex;
  align-items:center;
  gap: 12px;

  text-decoration:none;
  color: #e9f9ff;

  padding: 10px 12px;
  border-radius: 14px;

  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);

  box-shadow: 0 0 0 1px rgba(0,255,200,.06) inset;

  transition: transform .12s ease, filter .12s ease;
}

.frow:hover{
  transform: translateY(-1px);
  filter: brightness(1.03);
}

.frow--flat{
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.05);
}

.fico{
  width: 22px;
  height: 22px;
  opacity: .95;
  filter: drop-shadow(0 0 8px rgba(0,255,220,.35));
}

.ftext{
  line-height: 1.35;
  overflow-wrap:anywhere;
}

.fsub{
  opacity: .75;
  font-weight: 500;
}

/* Riga P.IVA + nome (desktop) */
.footer-bottomline{
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);

  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap: 10px;

  letter-spacing: .12em;
  font-weight: 700;
  opacity: .92;
}
.footer-bottomline .dot{ opacity:.6; }

/* Box pagamento (desktop) */
.footer-paybox{
  padding: 14px 14px 12px;
  border-radius: 18px;

  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 0 18px rgba(255,0,200,.12),
    0 0 18px rgba(0,255,200,.10);
  text-align:center;
}

.pay-title{
  font-family:'Graduate', serif;
  letter-spacing: .10em;
  opacity: .95;
  margin-bottom: 10px;
}

.pay-hint{
  margin-top: 10px;
  font-size: .9rem;
  opacity: .72;
}

/* Bottone SumUp (capsula neon) */
.sumup-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 12px 18px;
  border-radius: 999px;
  text-decoration:none;

  color:#ffffff;
  font-weight: 800;

  background: linear-gradient(135deg, rgba(0,255,200,.75), rgba(255,0,200,.75));
  border: 1px solid rgba(255,255,255,.14);

  box-shadow:
    0 0 22px rgba(0,255,200,.22),
    0 0 22px rgba(255,0,200,.18);

  transition: transform .12s ease, filter .12s ease;
}

.sumup-btn:hover{
  transform: translateY(-1px) scale(1.01);
  filter: brightness(1.06);
}

/* --------- Mobile: card verticali --------- */
.footer-card{
  border-radius: 18px;
  padding: 14px 14px 12px;
  text-align: center;

  background: rgba(0,0,0,.16);
  border: 1px solid rgba(255,255,255,.08);

  box-shadow:
    0 0 18px rgba(0,255,200,.10),
    0 0 18px rgba(255,0,200,.10);

  margin-bottom: 14px;
}

.footer-mobile-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
  align-items: start;
}


/* Mobile super stretto: QR va sotto */
@media (max-width: 420px){
  .footer-mobile-grid{
    grid-template-columns: 1fr;
  }
 }

/* Legal links */
.legal-links{
  margin-top: 12px;
  display:flex;
  justify-content:center;
  gap: 10px;
  opacity: .78;
  font-size: .9rem;
}
.legal-links a{
  color:#fff;
  text-decoration:underline;
  text-underline-offset: 4px;
  font-weight: 800;
}

/* =====================================================================
   09A) UI FLOAT — WhatsApp button
   ===================================================================== */

/* -------------------- WHATSAPP FLOAT -------------------- */

.wa-float{
  position:fixed;
  right:auto;
  bottom:120px;
  width:62px;
  height:62px;
  border-radius:999px;
  display:grid;
  place-items:center;
  z-index:9999;

  background: radial-gradient(circle at 30% 30%,
    rgba(0,255,200,.95), rgba(0,200,255,.9) 55%, rgba(0,120,255,.85) 100%);
  box-shadow:
    0 0 18px rgba(0,255,200,.55),
    0 0 36px rgba(0,160,255,.35);

  border:1px solid rgba(255,255,255,.14);

  -webkit-tap-highlight-color:transparent;
  text-decoration:none;

  transition: transform .12s ease, filter .12s ease;
}
.wa-float:hover{ transform:translateY(-1px); filter:brightness(1.03); }

.wa-float__icon{
  width:34px;
  height:34px;
  filter:drop-shadow(0 0 10px rgba(0,255,220,.55));
  opacity:.98;
}
.wa-float__pulse{
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background: radial-gradient(circle,
    rgba(0,255,200,.20) 0%,
    rgba(0,255,200,.10) 35%,
    rgba(0,255,200,0) 70%);
  animation:waPulse 1.8s ease-in-out infinite;
  pointer-events:none;
}
@keyframes waPulse{
  0%{ transform:scale(.85); opacity:.55; }
  60%{ transform:scale(1.12); opacity:.18; }
  100%{ transform:scale(1.18); opacity:0; }
}

/* =====================================================================
   09B) UI FLOAT — Cookie banner (JS toggles body.show-cookie)
   ===================================================================== */

/* ================= COOKIE BANNER (fish / Garuda) ================= */

/* default: nascosto */
#cookie-banner{ display:none; }

/* visibile SOLO quando JS mette body.show-cookie */
body.show-cookie #cookie-banner{ display:flex; }

/* ---------- CONTAINER ---------- */
.cookie-banner{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(96px + env(safe-area-inset-bottom));
  width: calc(100% - 24px);
  max-width: 760px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;

  padding: 14px 16px;
  border-radius: 18px;

  background: rgba(5, 0, 16, 0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border: 1px solid rgba(0, 255, 200, 0.28);
  box-shadow:
    0 0 0 1px rgba(255, 0, 180, 0.15) inset,
    0 18px 48px rgba(0, 0, 0, 0.55),
    0 0 26px rgba(0, 255, 200, 0.18),
    0 0 42px rgba(255, 0, 180, 0.12);

  color: rgba(253, 253, 255, 0.95);
  z-index: 9998;

  /* animazioni */
  transition: opacity .18s ease, transform .18s ease, filter .18s ease;
}

/* chiusura */
.cookie-banner.is-hiding{
  opacity: 0;
  transform: translateX(-50%) translateY(12px) scale(.985);
  filter: blur(1px);
}

/* ---------- TESTO ---------- */
.cookie-line{
  margin: 0;
  line-height: 1.35;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 0.92rem;

  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

/* prompt neon */
.cookie-prompt{
  color: #7CFFEE;
  font-weight: 900;
  letter-spacing: .02em;
  white-space: nowrap;

  text-shadow:
    0 0 6px rgba(0,255,200,.95),
    0 0 14px rgba(0,255,200,.70),
    0 0 30px rgba(0,255,200,.45),
    0 0 60px rgba(0,255,200,.25);
}

/* freccia */
.cookie-arrow{
  color: #F8F2FF;
  font-weight: 900;
  text-shadow:
    0 0 6px rgba(255,255,255,.55),
    0 0 16px rgba(255,0,180,.35),
    0 0 22px rgba(0,255,200,.25);
}

/* messaggio */
.cookie-msg{
  color: rgba(253,253,255,.96);
  text-shadow: 0 0 10px rgba(0,0,0,.35);
}

/* link */
.cookie-link{
  color: #00FFC8;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;

  text-shadow:
    0 0 10px rgba(0,255,200,.75),
    0 0 24px rgba(0,255,200,.35);
}
.cookie-link:hover{ filter: brightness(1.15); }

/* ---------- BOTTONE OK ---------- */
.cookie-btn{
  flex: 0 0 auto;
  border: 0;
  cursor: pointer;

  padding: 10px 16px;
  border-radius: 999px;

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-weight: 800;
  letter-spacing: .08em;

  color: #070014;
  background: linear-gradient(90deg, rgba(255,0,180,.92), rgba(0,255,200,.85));

  box-shadow:
    0 0 0 1px rgba(255,255,255,.14) inset,
    0 0 26px rgba(255,0,180,.42),
    0 0 34px rgba(0,255,200,.30),
    0 14px 34px rgba(0,0,0,.45);

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.cookie-btn:hover{
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.15);
  box-shadow:
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 34px rgba(255,0,180,.55),
    0 0 44px rgba(0,255,200,.40),
    0 18px 42px rgba(0,0,0,.50);
}

.cookie-btn:active{
  transform: translateY(0) scale(.97);
}

/* =========================================================
   MOBILE — COOKIE BANNER (fino a 560px)
   Scopo: rendere il banner cookie "a colonna" su telefoni piccoli,
   così non si schiaccia tutto in orizzontale.
   ========================================================= */
@media (max-width: 560px){

  /* Banner cookie: da riga → colonna (testo sopra, pulsante sotto) */
  .cookie-banner{
    flex-direction: column;  /* impila gli elementi verticalmente */
    align-items: stretch;    /* allarga gli elementi a tutta la larghezza */
    text-align: left;        /* testo leggibile (non centrato) */
  }

  /* Pulsante cookie: piena larghezza per essere cliccabile al volo */
  .cookie-btn{ width: 100%; }
}


/* =========================================================
   RESPONSIVE — DESKTOP “LARGO” (da 820px in su)
   Scopo: aumentare un filo la gerarchia tipografica su schermi grandi.
   Qui NON c’è nulla di mobile.
   ========================================================= */
@media (min-width: 820px){

  /* Titolo principale (Sportello Pratiche Online): più grande su desktop */
  .hero-title{ font-size:3rem; }

  /* Sottotitolo (Pratiche fiscali · Servizi · ...): un po’ più leggibile */
  .hero-subtitle{ font-size:1.15rem; }
}


/* =========================================================
   HOME — MOBILE/TABLET (fino a 768px)
   Scopo: sistemare layout Home su schermi più stretti.
   Qui tocchi:
   - pulsante "Anna, HELP!" in home
   - dimensioni/logo e titoli hero
   - posizione/altezza cookie banner (sopra i bottoni flottanti)
   - posizione/size WhatsApp float
   - layout card AnnaHelp (prompt sopra, testo sotto)
   ========================================================= */
@media (max-width: 768px){

  /* -------------------------------------------------------
     HOME: link "Anna, HELP!" — deve restare in flusso (non overlay)
     Questo evita che si sovrapponga ai contenuti su mobile.
     ------------------------------------------------------- */
  .page-home .annahelp-link{
    align-self:center;  /* centra il bottone nel flusso */
    margin:0 0 16px 0;  /* spazio sotto (stacca dai contenuti successivi) */
    position:static;    /* IMPORTANTISSIMO: niente posizionamento assoluto */
  }

  /* -------------------------------------------------------
     HOME: logo cerchio — più piccolo su schermi stretti
     ------------------------------------------------------- */
  .page-home .logo-circle{
    width:150px;
    height:150px;
    margin-top:12px;
  }

  /* -------------------------------------------------------
     HOME: titolo hero — riduce dimensione e compatta l’interlinea
     ------------------------------------------------------- */
  .page-home .hero-title{
    margin-top:14px;    /* leggero distacco dal logo */
    font-size:2.2rem;   /* più piccolo su mobile */
    line-height:1.1;    /* più compatto (evita “bucare” lo schermo) */
  }

  /* -------------------------------------------------------
     COOKIE BANNER: più “alto” (cioè più su) su schermi piccoli
     Scopo: NON farsi coprire dai bottoni flottanti (WA ecc).
     - env(safe-area-inset-bottom) = iPhone / notch / gesture bar
     ------------------------------------------------------- */
  .cookie-banner{
    bottom: calc(110px + env(safe-area-inset-bottom));
    font-size:.85rem;   /* testo un filo più piccolo su mobile */
  }

  /* -------------------------------------------------------
     WhatsApp floating button: più grande e spostato a sinistra
     Attenzione: bottom:42% lo alza “a metà schermo” circa.
     Nota: in questo punto può “interferire” visivamente con le pillole
     (se le pillole occupano la stessa fascia verticale).
     ------------------------------------------------------- */
  .wa-float{
    right: auto;   /* annulla eventuale ancoraggio a destra */
    left:14px;     /* lo mette a sinistra */
    bottom:42%;    /* lo alza in altezza (zona pillole) */
    width:66px;
    height:66px;
  }
  .wa-float__icon{ width:36px; height:36px; }

  /* -------------------------------------------------------
     ANNA HELP: card della lista (non la home hero)
     Scopo: su mobile la card non deve essere “a griglia” stretta:
     il prompt va sopra, testo sotto.
     ------------------------------------------------------- */
  .annahelp-card{
    display:block;       /* toglie la grid/colonne: tutto in verticale */
    padding:14px 16px;   /* padding più “mobile friendly” */
  }

  /* Prompt (# Anna → HELP!✈️): deve andare a capo se serve */
  .annahelp-prompt{
    display:block;        /* va su una riga sua */
    margin-bottom:6px;    /* stacca dal testo */
    white-space:normal;   /* permette wrap (no riga unica) */
    word-break:break-word;/* rompe parole lunghe se serve */
  }

  /* Riga contenuto: allinea bene check + testo anche quando va a capo */
  .annahelp-line{
    align-items:flex-start; /* check resta in alto rispetto a testo multi-linea */
  }
}


/* =========================================================
   ANNA HELP — HERO IMAGE (fino a 600px)
   Scopo: l’immagine hero non deve “sforare” su schermi piccoli.
   Usa viewport width: max 88% della larghezza schermo.
   ========================================================= */
@media (max-width: 600px){
  .annahelp-hero-img{ max-width:88vw; }
}

/* =========================================================
/* =====================================================================
   10) HOTFIX / OVERRIDE — blocchi aggiunti “in fondo” (l’ordine conta!)
      Qui NON si “riordina” oltre: questi pezzi devono restare dopo.
   ===================================================================== */

   /*ANNA BRAND HOTFIX — minimal overrides (no redesign)
   Fixes:
   - Anna, HELP! button alignment (top-right) + spacing from logo
   - WhatsApp floating button: higher + softer on content
   - "Come funziona" (terminal steps) mobile layout: no skinny column
   - Anna-HELP bullet cards: prompt on its own line, check + text aligned left
   - Restore neon side trails around Anna, HELP! hero badge
   - Legal links centered + bold
   ========================================================= */

/* --- 1) HERO: keep Anna, HELP! button top-right on mobile --- */
.hero {
  position: relative;
}

.hero .annahelp-link {
  position: absolute;
  top: 18px;
  right: 18px;
  left: auto;
  transform: none;
  margin: 0;
  z-index: 30;
}

@media (max-width: 520px) {
  .hero {
    /* gives breathing room so the badge/logo never sits under the button */
    padding-top: 64px;
  }
  .hero .annahelp-link {
    top: 14px;
    right: 14px;
  }
}

/* --- 2) WhatsApp floating button: not glued to bottom/footer --- */
a.wa-float {
  right: 18px;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 96px);
  opacity: 0.92;
  backdrop-filter: blur(10px);
}

@media (min-width: 900px) {
  a.wa-float {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 28px);
  }
}

/* --- 3) COME FUNZIONA: terminal steps list should NOT become a thin right column on mobile --- */

@media (max-width: 620px) {

  .terminal-box{
    padding: 20px 16px;
  }

  .steps-list li{
    padding-left: 110px;   /* 👈 PRIMA ERA 170 COME DESKTOP */
    margin-bottom: 26px;   /* 👈 PIÙ ARIA */
    line-height: 1.65;
    font-size: 0.95rem;
  }

  .steps-list li::before{
    left: 0;
    top: 0;
    width:100px; /*limita il prompt */
    margin-right: 6px;
    position: absolute;    /* 👈 COME DESKTOP */
    content:"# spo:// › ";
    color: var(--cyan);
    font-weight: 700;
  }

}

/* --- 4) ANNA-HELP: bullet cards layout (prompt on top, then check + text) --- */
.annahelp-page .annahelp-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.annahelp-page .annahelp-prompt {
  display: block;
  white-space: normal;
  font-weight: 800;
  letter-spacing: 0.4px;
  text-align: left;
}

.annahelp-page .annahelp-line {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.annahelp-page .annahelp-check {
  flex: 0 0 auto;
  margin-top: 1px;
}

.annahelp-page .annahelp-text {
  flex: 1 1 auto;
  text-align: left;
}

/* --- 5) ANNA-HELP: neon side trails around the hero badge (non-invasive) --- */
.annahelp-page .annahelp-hero-image {
  position: relative;
  isolation: isolate;
}

.annahelp-page .annahelp-hero-image::before,
.annahelp-page .annahelp-hero-image::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 240px;
  height: 520px;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: -1;
  opacity: 0.85;
  filter: blur(16px);
}

.annahelp-page .annahelp-hero-image::before {
  left: -170px;
  background:
    radial-gradient(circle at 70% 30%, rgba(0,255,200,0.55), transparent 65%),
    linear-gradient(90deg, rgba(0,255,200,0.00), rgba(0,255,200,0.35), rgba(255,0,180,0.00));
}

.annahelp-page .annahelp-hero-image::after {
  right: -170px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,0,180,0.55), transparent 65%),
    linear-gradient(90deg, rgba(255,0,180,0.00), rgba(255,0,180,0.35), rgba(0,255,200,0.00));
}

@media (max-width: 520px) {
  .annahelp-page .annahelp-hero-image::before,
  .annahelp-page .annahelp-hero-image::after {
    width: 170px;
    height: 360px;
    opacity: 0.70;
    filter: blur(14px);
  }
  .annahelp-page .annahelp-hero-image::before { left: -120px; }
  .annahelp-page .annahelp-hero-image::after { right: -120px; }
}

/* --- 6) Legal links under footer: centered + bold --- */
.legal-links {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 14px auto 0;
  padding: 0 14px 14px;
  text-align: center;
  font-weight: 800;
}

.legal-links a {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* --- 7) Inline WhatsApp button (Anna-HELP page, under badge) --- */
.wa-inline-wrap{
  display:flex;
  justify-content:flex-end;
  margin: 10px 0 16px;
}

.wa-inline{
  width:64px;
  height:64px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:#001015;
  background: rgba(0,255,200,0.28);
  border: 1px solid rgba(0,255,200,0.45);
  box-shadow: 0 0 28px rgba(0,255,200,0.35);
}

.wa-inline:hover{
  transform: translateY(-1px);
}

@media (max-width: 768px){
  .annahelp-page .wa-float{
    left: 14px;
    right: auto;
    bottom: calc(50vh - 40px);
    width: 66px;
    height: 66px;
  }
}
@media (max-width: 620px){
  .annahelp-line{
    align-items: flex-start;
    text-align: left;
  }
}
@media (max-width: 768px){
  .annahelp-hero-image{
    margin-bottom: 4px;
  }
}
@media (max-width: 768px){
  .page-home .wa-float{
    left: 14px;
    right: auto;
    bottom: calc(50vh - 40px); /* 👈 sopra le pillole, MA NON ATTACCATO */
    width: 66px;
    height: 66px;
  }
}
.annahelp-plane{
  font-weight: 900;
}

@media (max-width: 768px){
  .annahelp-hero-image{
    margin-bottom: 0;
  }
  .section.anna-section{
    padding-top: 8px;
  }
}

/* Anna Help — intro: mobile ok, desktop 1 rigo */
.ah-one-line{
  text-align: center;
  line-height: 1.35;
}

/* DESKTOP: tutto su un rigo */
@media (min-width: 900px){
  .ah-one-line{
    white-space: nowrap;               /* niente a capo */
    font-size: clamp(14px, 1.25vw, 18px); /* si adatta senza “esplodere” */
  }
}


/* --- Anna Help: riduci il vuoto badge→titolo SOLO su desktop --- */
@media (min-width: 900px){
  /* stringe lo spazio sotto al badge (AHH.png ha molto “vuoto” interno) */
  .annahelp-page .annahelp-hero-image{
    margin-bottom: clamp(-220px, -16vh, -140px);
  }

  /* micro-ritocco: sposta il badge un filo su (solo desktop) */
  .annahelp-page .annahelp-hero-img{
    transform: translateY(-18px);
  }

  /* evita che il titolo riaggiunga aria inutile */
  /* Anna Help: un filo di spazio tra H2 e bottone */
  .annahelp-page .anna-section h2{ 
    margin-top: 12px; /* aumenta/diminuisci qui */
  }

.annahelp-page .annahelp-toggle{
  margin-top: 12px;    /* aumenta/diminuisci qui */
}

/* Anna Help: spaziatura pulita tra box, bottone e lista */
.annahelp-page .annahelp-desc-box { margin-top: 56px; }
.annahelp-page .annahelp-toggle { margin: 18px auto 22px; }
#annahelp-list { scroll-margin-top: 18px; } /* quando scrolli, non si appiccica sopra */

.annahelp-title .t1,
.annahelp-title .t2{
  display:block;
}

.annahelp-title .t2{
  margin-top: 6px;      /* micro-spazio tra le due righe */
  letter-spacing: .08em; /* un filo “manifesto” */
  opacity: .95;
}

/* ===== Anna Help: titolo su 2 righe (forzato) ===== */
.annahelp-page .annahelp-title{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 10px !important;              /* spazio tra riga 1 e riga 2 */
  margin: 18px 0 18px !important;    /* spazio sotto al titolo */
}

.annahelp-page .annahelp-title .t1,
.annahelp-page .annahelp-title .t2{
  display: block !important;
  width: 100%;
}

/* micro-stile alla seconda riga (opzionale, ma carino) */
.annahelp-page .annahelp-title .t2{
  letter-spacing: .10em;
  opacity: .96;
 }
}
/* ====== ANNAHELP: desktop micro-fix (pulito) ====== */

/* 1) Desktop: la prima card NON deve intravedersi sotto al bottone
   (spinge giù la lista) */
/* Surface 7 Pro / schermi 3:2 “desktop bassi”: il bottone deve chiudere la prima schermata */
@media (min-width: 1100px) and (max-height: 950px){
  #annahelp-list{
    padding-top: 96px;   /* se ancora sbuca: 110px | se è troppo: 80px */
  }
}
/* ✅ HOME: WhatsApp in alto a sinistra, stessa altezza del pulsante Anna Help (mobile) */
@media (max-width: 768px){
  .page-home .wa-float{
    left: 14px;
    right: auto;

    top: calc(env(safe-area-inset-top, 0px) + 14px);
    bottom: auto;               /* IMPORTANTISSIMO: annulla le regole “bottom” vecchie */

    width: 56px;
    height: 56px;

    opacity: .92;
  }

  .page-home .wa-float__icon{
    width: 30px;
    height: 30px;
  }

  /* opzionale: meno “allarme”, più pulito */
  .page-home .wa-float__pulse{ display:none; }
}

/* ✅ AnnaHelp: se lì non lo vuoi */
.annahelp-page .wa-float{ display:none !important; }

/* ===== HOTFIX SFONDO GARUDA: niente grigio durante lo scroll ===== */
html, body{
  height: 100%;
  background: #050010 !important; /* base scura Garuda */
}

body{
  overflow-x: hidden;
}

/* il layer neon deve coprire SEMPRE tutta la viewport */
.page-bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;  /* sotto ai contenuti, sopra al body */
  background:
    radial-gradient(circle at 20% 0%, rgba(0, 255, 200, 0.35), transparent 55%),
    radial-gradient(circle at 80% 15%, rgba(255, 0, 180, 0.35), transparent 55%),
    radial-gradient(circle at 10% 80%, rgba(255, 255, 255, 0.10), transparent 60%),
    radial-gradient(circle at 85% 85%, rgba(0, 140, 255, 0.18), transparent 60%),
    linear-gradient(120deg, #060016 0%, #07001a 40%, #050012 100%);
}

/* contenuto sopra al layer */
.page{
  position: relative;
  z-index: 1;
}

/* evita “rimbalzi” strani su alcuni browser */
@supports (overscroll-behavior: none){
  body{ overscroll-behavior: none; }
}

/* ===== AnnaHelp: prompt più grande e più leggibile ===== */
.annahelp-page .annahelp-prompt{
  font-size: 16px;       /* prova 16 → 17 */
  font-weight: 700;
  letter-spacing: .02em;
}

@media (min-width: 900px){
  .annahelp-page .annahelp-prompt{
    font-size: 17px;     /* prova 17 → 18 */
  }
  .annahelp-page .annahelp-card{
    padding: 18px 18px;  /* “fondo” più generoso */
  }
}

/* ===== HOME desktop: più spazio tra sottotitolo e pillole ===== */
@media (min-width: 900px){
  .hero-subtitle{ margin-bottom: 18px; } /* prova 18→26 */
  .pill-grid{ margin-top: 14px; gap: 16px; } /* gap più arioso */
}


/* =========================================================
   ANNA HELP — footer attaccato al sottotitolo
   (override mirato, non rompe il resto del sito)
   ========================================================= */

.page-annahelp .hero-subtitle{
  margin-bottom: 0 !important;
}

.page-annahelp .footer{
  margin-top: 0 !important;
}

/* =========================================================
/* =====================================================================
   06) PAGINE LEGALI — Cookie Policy / Privacy Policy
   ===================================================================== */

   /*PAGINE LEGALI (Privacy Policy / Cookie Policy)
   Scopo:
   - mantenere la grafica del sito
   - usare il footer vetrato di Anna Help
   - NON introdurre nuove varianti
   ========================================================= */


/* ---------------------------------------------------------
   1️⃣ ALLINEAMENTO HERO → FOOTER
   ---------------------------------------------------------
   Rimuove qualsiasi spazio verticale tra:
   - sottotitolo
   - footer vetrato
   (come nella pagina Anna Help)
   --------------------------------------------------------- */

.legal-page .hero-subtitle{
  margin-bottom: 0 !important;
}

.legal-page .footer{
  margin-top: 0 !important;
}
/* ✅ LEGAL (Cookie/Privacy): su mobile niente colonna QR fantasma */
@media (max-width: 760px){
  body.legal-page .footer-mobile-grid{
    grid-template-columns: 1fr !important;
  }
}

/* ---------------------------------------------------------
   2️⃣ TITOLO PAGINA LEGALE (SOLO H1)
   ---------------------------------------------------------
   - vale SOLO per Privacy / Cookie
   - NON tocca titoli del sito
   - usa Graduate come richiesto
   - mantiene il resto del testo invariato
   --------------------------------------------------------- */

.legal-page > .page.section > h1{
  font-family: 'Graduate', serif;
  letter-spacing: 0.06em;
}


/* ---------------------------------------------------------
   3️⃣ SEPARATORE NEON “#”
   ---------------------------------------------------------
   Funzione:
   - separare il testo legale dal blocco logo + footer
   - fungere da “chiusura visiva” della pagina
   - stile coerente con il neon Garuda del sito
   --------------------------------------------------------- */

.legal-divider{
  margin: 60px auto 80px;     /* respiro sopra e sotto */
  text-align: center;

  font-family: 'Graduate', serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;

  color: #00ffd5;             /* cyan neon Garuda */

  text-shadow:
    0 0 6px  rgba(0, 255, 213, 0.6),
    0 0 14px rgba(0, 255, 213, 0.5),
    0 0 28px rgba(0, 255, 213, 0.4);
}

/* ===============================
   PILL — MOBILE LIBERE (NO DESKTOP RULES)
   =============================== */
@media (max-width: 560px){

  /* la griglia resta flex fluida */
  .pill-grid{
    gap: 8px;
  }

  /* pillole = contenuto naturale */
  .pill{
    padding: 12px 18px;
    font-size: .95rem;
    white-space: normal;      /* il testo può andare a capo */
    max-width: 100%;
  }

  /* DISATTIVA pill-wide su mobile */
  .pill-wide{
    min-width: unset;
    width: auto;
    flex: 0 1 auto;
  }

}

/* ===== CTA TELEFONO — icona cliccabile, testo NON cliccabile ===== */

.cta-phone{
  padding: 6px 18px 6px;
  text-align: center;
}

.cta-phone__number{
  font-family: 'Graduate', serif;   /* STESSO FONT DI ORARI */
  font-size: clamp(2.1rem, 6vw, 3.2rem); /* STESSA GRANDEZZA */
  letter-spacing: .12em;
  margin: 16px 0 12px;
  color: #fdfdff;

  text-shadow:
    0 0 6px rgba(0,255,200,.85),
    0 0 14px rgba(0,255,200,.65),
    0 0 28px rgba(255,0,200,.55),
    0 0 46px rgba(255,0,200,.35);
}

.cta-phone__actions{
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 10px 0 6px;
}

/* ogni “bottone”: icona sopra, testo sotto */
.cta-phone__item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* l’icona resta link, ma NON deve “sporcare” con stili da link */
.cta-phone__icon{
  text-decoration: none;
  color: inherit;
  outline: none;
}

/* elimina qualsiasi underline/colore link su ogni stato */
.cta-phone__icon:link,
.cta-phone__icon:visited,
.cta-phone__icon:hover,
.cta-phone__icon:active{
  text-decoration: none;
  color: inherit;
}

/* testo sotto: SOLO testo */
.cta-phone__label{
  font-family: 'Inter', sans-serif;
  font-weight: 900;
  letter-spacing: .04em;
  font-size: .95rem;
  color: rgba(253,253,255,.92);
  text-shadow: 0 0 10px rgba(0,0,0,.35);
  user-select: none;
}

/* se vuoi “tappo totale” contro underline blu strani in quella zona */
.cta-phone a{ text-decoration: none; }


.cta-hours{
  margin-top: 18px;
  font-family: 'JetBrains Mono', 'Inter', monospace;
  font-size: .95rem;
  line-height: 1.6;
  color: #e9fefe;
}
.cta-hours__prompt{
  color: var(--cyan);
  font-weight: 700;
  white-space: nowrap;
  display: flex;
  flex-direction: column;   /* 👈 A CAPO */
  line-height: 1.1;
}

/* stato tipo WhatsApp */
.cta-hours__status{
  margin-top: 2px;
  font-weight: 700;
  color: var(--cyan);
  text-shadow:
    0 0 6px rgba(0,255,200,.55),
    0 0 14px rgba(0,255,200,.35);
  font-size: .9em;
}

.steps-list .status{
  color: var(--cyan);
  font-weight: 700;
  display: inline-block;
  margin-bottom: 4px;
  text-shadow:
    0 0 6px rgba(0,255,200,.6),
    0 0 12px rgba(0,255,200,.35);
}


/* =========================================================
   ORARI — TERMINAL STYLE (pulito, dedicato)
   Obiettivo: stessa resa di "Come funziona", ma nomi logici.
   ========================================================= */

/* ORARI: box vetrato = stessa larghezza del terminal-box di "Come funziona" */
.section-orari .terminal-box{
  width: 100%;
  max-width: 760px;
  margin: 18px auto 0;
  box-sizing: border-box;
}

.orari-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Riga identica come impaginazione a "Come funziona" */
.orari-list li{
  position: relative;
  margin: 20px 0;
  padding-left: 170px;          /* come .steps-list li su desktop */
  line-height: 1.5;
  color: #e9f9ff;
  white-space: normal;
  text-shadow: 0 0 8px rgba(0,255,255,.8);
}

/* Prompt terminale (stesso look) */
.orari-list li::before{
  content: "# spo:// > ";
  position: absolute;
  left: 0;
  top: 0;

  color: var(--cyan);
  font-weight: 700;
  letter-spacing: .5px;

  text-shadow:
    0 0 6px rgba(0,255,200,.55),
    0 0 14px rgba(0,255,200,.35);

  max-width: 168px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* "online" e "#" = stesso neon del prompt */
.orari-online,
.orari-hash{
  color: var(--cyan);
  font-weight: 700;
  text-shadow:
    0 0 6px rgba(0,255,200,.55),
    0 0 14px rgba(0,255,200,.35);
}

/* =========================================================
   ORARI — MOBILE (BLOCCO UNICO, PULITO)
   Obiettivi:
   - box ORARI largo come gli altri
   - testo allineato a sinistra
   - prompt + online stessa riga, poi a capo
   ========================================================= */
@media (max-width: 768px){

  /* 1) togli padding doppio della sezione annidata */
  #come-funziona .section-orari{
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
  }

  /* 2) stesso “respiro” degli altri box: padding esterno */
/* ORARI: niente padding extra (lo fa già la .section esterna) */
#come-funziona .section-orari{
  padding: 0 !important;
  margin: 0 !important;
}

  /* 3) IL VETRO: deve riempire il contenitore */
  #come-funziona .section-orari .terminal-box,
  #come-funziona .section-orari .terminal-box--orari{
    width: 100% !important;
    max-width: 760px !important;
    margin: 18px 0 0 !important;
    box-sizing: border-box !important;

    /* importantissimo: su mobile ti si stava “centrando” tutto */
    text-align: left !important;
  }

  /* 4) righe: niente colonna finta su mobile */
  #come-funziona .orari-list li{
  padding-left: 0 !important;
  display: block !important;
  white-space: normal !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important; /* <-- QUESTO evita il taglio */
}

  /* 5) prompt inline */
  #come-funziona .orari-list li::before{
    position: static !important;
    display: inline !important;
    content: "# spo:// >\00a0" !important;
    white-space: nowrap !important;
  }

  /* 6) online: resta col prompt e poi va a capo */
  #come-funziona .orari-online{
    display: inline !important;
    white-space: nowrap !important;
  }
  #come-funziona .orari-online::after{
    content: "\A" !important;
    white-space: pre !important;
  }
}
/* ORARI — NON TAGLIARE IL GLOW (fix vero) */
#come-funziona,
#come-funziona .section-orari{
  overflow-x: visible !important;
  overflow-y: visible !important;
}

/* === FOOTER PROMPT (stile Garuda/terminal) === */
.footer-prompt{
  /* blocco centrato, testo interno allineato a sinistra */
  width: fit-content;
  margin: 14px auto 0;
  text-align: left;

  /* look terminal */
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 1.02rem;
  line-height: 1.55;

  /* respirazione */
  padding: 6px 2px;
}

/* riga a 4 colonne: bullet | label | : | valore */
.footer-prompt .prompt-row{
  display: grid;
  grid-template-columns: 18px 72px 16px 1fr;
  align-items: baseline;
  column-gap: 12px;
  margin: 10px 0;
}

.footer-prompt .prompt-bullet{
  opacity: .95;
}

.footer-prompt .prompt-key{
  letter-spacing: .12em;
  opacity: .92;
  text-transform: uppercase;
  white-space: nowrap;
}

.footer-prompt .prompt-sep{
  opacity: .75;
}

.footer-prompt .prompt-val{
  white-space: nowrap;
}

/* NOTE può andare a capo, altrimenti è troppo lunga */
.footer-prompt .prompt-row:last-child .prompt-val{
  white-space: normal;
}

/* link “puliti” in stile terminal */
.footer-prompt .prompt-link{
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,.35);
}
.footer-prompt .prompt-link:hover{
  border-bottom-color: rgba(0,255,200,.9);
}

/* Mobile: riduco un filo la label e lascio più spazio al valore */
@media (max-width: 420px){
  .footer-prompt{ font-size: .98rem; }
  .footer-prompt .prompt-row{
    grid-template-columns: 16px 60px 14px 1fr;
    column-gap: 10px;
  }
}
/* LEGAL: il footer non deve subire padding doppio del .section */
.legal-page .footer{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.legal-page .footer .legal-links{
  flex-wrap: nowrap;
}

.legal-page .footer .legal-links a{
  white-space: nowrap;
}

/* =====================================================================
   FINE FILE — style.ordered.css
   ===================================================================== */

  /* =========================================================
   ANNA HELP — BOX DESCRITTIVO (BOOST VISIVO)
   Nessun cambio struttura, solo PRESENZA.
   ========================================================= */

.annahelp-desc-box{
  margin-top: 42px;
  padding: 28px 26px;

  background:
    radial-gradient(circle at 10% 10%, rgba(0,255,220,.28), transparent 55%),
    radial-gradient(circle at 90% 90%, rgba(255,0,200,.22), transparent 55%),
    rgba(6,6,28,.92);   /* 👈 più scuro = più deciso */

  border-radius: 18px;

  box-shadow:
    0 0 0 1px rgba(0,255,200,.18),
    0 0 28px rgba(0,255,200,.35),
    0 0 52px rgba(255,0,200,.28);

  text-align: center;
}

/* TESTO: meno blando, più “qui si agisce” */
.annahelp-desc{
  font-size: 1.22rem;        /* 👈 più grande */
  line-height: 1.7;
  font-weight: 600;          /* 👈 più corpo */
  letter-spacing: .01em;
  opacity: 1;

  color: #f4ffff;

  text-shadow:
    0 0 6px rgba(0,255,255,.35),
    0 0 14px rgba(0,0,0,.45);
}

/* parola chiave se vuoi enfatizzare (opzionale) */
.annahelp-desc strong{
  font-weight: 900;
  color: var(--cyan);
  text-shadow:
    0 0 8px rgba(0,255,220,.75),
    0 0 18px rgba(0,255,220,.45);
}

/* mobile: niente muri di testo */
@media (max-width: 768px){
  .annahelp-desc{
    font-size: 1.12rem;
    line-height: 1.65;
  }
}
/* === ANNA HELP — tutto visibile nella prima schermata (desktop) === */
@media (min-width: 900px){

  /* comprime leggermente la hero */
  .annahelp-page .hero{
    padding-bottom: 24px !important;
  }

  /* riduce spazio sotto il box descrittivo */
  .annahelp-desc-box{
    margin-bottom: 12px !important;
  }

  /* CTA più vicina al contenuto */
  .annahelp-toggle,
  .btn-primary{
    margin-top: 6px !important;
  }
}

/* ===== ANNAHELP — MOBILE: togli vuoto tra badge e titolo ===== */
@media (max-width: 600px){

  /* 1) “chiudi” il buco sotto l’immagine (spinge su il titolo) */
  .annahelp-page .annahelp-hero-image{
    margin-bottom: -34px !important;  /* prova: -24 / -34 / -44 */
  }

  /* 2) micro: alza leggermente il badge (opzionale ma aiuta) */
  .annahelp-page .annahelp-hero-img{
    transform: translateY(-10px) !important; /* prova: -6 / -10 / -14 */
  }

  /* 3) titolo più compatto (niente aria inutile) */
  .annahelp-page .anna-section h2{
    margin-top: 8px !important;
    margin-bottom: 12px !important;
    line-height: 1.05 !important;
  }
}

/* ===== ANNAHELP — MOBILE: titolo pulito e leggibile ===== */
@media (max-width: 600px){

  .annahelp-page .anna-section h2{
    font-size: 1.7rem !important;     /* entra SEMPRE */
    line-height: 1.15 !important;
    letter-spacing: .06em !important;
    text-wrap: balance;               /* 🔥 magia moderna */
  }
}
/* ===== MOBILE: CTA visibile nella prima schermata ===== */
@media (max-width: 600px){

  /* riduce aria sotto il titolo */
  .annahelp-page .anna-section h2{
    margin-bottom: 10px !important;
  }

  /* compatta il box descrittivo */
  .annahelp-desc-box{
    margin-top: 10px !important;
  }

  /* avvicina il pulsante al box */
  .annahelp-toggle,
  .btn-primary{
    margin-top: 14px !important;
  }
}
/* ================================
   ANNA HELP — MOBILE
   Elimina spazio sopra al badge
   ================================ */
@media (max-width: 600px){

  /* la section dell'immagine NON deve creare aria sopra */
  .annahelp-hero-image{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* l'immagine AHH.png viene leggermente tirata su */
  .annahelp-hero-img{
    display: block;
    margin-top: -60px;   /* <-- QUESTO È IL PUNTO CHIAVE */
  }
  }
  /* ANNAHELP — titolo accanto al prompt (riga 1) */
.annahelp-page .annahelp-card .annahelp-line:first-child{
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;              /* su schermi piccoli può andare a capo pulito */
}

/* il “titolo” (quello che sta dopo il prompt) */
.annahelp-page .annahelp-card .annahelp-line:first-child strong{
  color: var(--cyan);
  font-weight: 900;
  letter-spacing: .02em;
  text-shadow:
    0 0 8px rgba(0,255,220,.55),
    0 0 16px rgba(0,255,220,.25);
}
/* Pin Google Maps: SEMPRE piccolo e allineato al testo */
.annahelp-page img.map-pin{
  width: 20px !important;
  height: 20px !important;
  vertical-align: -3px !important;
  margin-left: 8px !important;
  opacity: .95;
  filter: drop-shadow(0 0 6px rgba(0,255,200,.55));
}

/* Titolo IN PRESENZA: pin più grande e attaccato a VITERBO */
.annahelp-page .anna-bottom strong{
  display: inline-flex;
  align-items: center;
  gap: 0;                 /* 👈 appiccicato */
}

/* dimensione pin SOLO nel titolo */
.annahelp-page img.map-pin--title{
  width: 26px !important;   /* aumenta qui: 24 / 26 / 28 */
  height: 26px !important;
  margin-left: 0 !important; 
  vertical-align: baseline !important;
  filter: drop-shadow(0 0 8px rgba(0,255,200,.55));
}

/* AnnaHelp: VITERBO + pin = blocco unico (incollato) */
.annahelp-page .annahelp-prompt{
  display: inline-flex;
  align-items: center;     /* attacca davvero icona e testo */
  gap: 0px;                /* distanza controllata tra VITERBO e pin */
  white-space: nowrap;     /* non spezzare tra VITERBO e pin */
}

/* la distanza la gestisce gap, quindi via margin-left */
.annahelp-page .annahelp-prompt .map-pin{
  margin-left: 0 !important;
  vertical-align: baseline !important;
}

/* =========================================================
   ANNA HELP — FIX TITOLO: dentro la stessa “gabbia” del box vetro
   (no classi nuove, solo override mirato)
   ========================================================= */

/* Il tuo H2 della pagina Anna Help: lo chiudiamo nella stessa larghezza del box */
.annahelp-page .anna-section h2{
  width: min(820px, 92%);
  margin: 18px auto 14px;
  padding: 0;

  /* resta centrato ma NON sfonda */
  text-align: center;

  /* dimensione “intelligente” */
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  line-height: 1.12;

  /* evita allargamenti brutti */
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Se hai il testo tutto in maiuscolo e ti sembra “urlato”, riduciamo tracking */
.annahelp-page .anna-section h2{
  letter-spacing: .08em; /* prima era più alto */
}

/* Mobile: ancora più stabile */
@media (max-width: 520px){
  .annahelp-page .anna-section h2{
    font-size: clamp(1.55rem, 6.2vw, 2.1rem);
    letter-spacing: .06em;
  }
}
/* ANNA HELP — titolo centrato SEMPRE (anche se il parent è flex) */
.section.anna-section h2{
  width: min(820px, 92%);
  margin: 18px auto 14px;
  text-align: center;

  /* QUESTO è il colpo di grazia se c’è di mezzo flex */
  align-self: center;
  justify-self: center;
}
/* =========================================================
   ANNA HELP — SPLIT (divisore + # + divisore su 1 riga)
   ========================================================= */
.annahelp-split{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 22px auto 22px;
  width: min(860px, 92%);
}

.annahelp-split-line{
  flex: 1;
  height: 1px;
  border-radius: 999px;
  opacity: .9;

  /* Se vuoi replicare il tuo neon, questo è “safe” */
  background: linear-gradient(90deg,
    rgba(0,255,255,.00),
    rgba(0,255,255,.70),
    rgba(255,0,255,.65),
    rgba(255,0,255,.00)
  );
  box-shadow: 0 0 14px rgba(0,255,255,.25), 0 0 16px rgba(255,0,255,.18);
}

.annahelp-split-hash{
  font-family: inherit;            /* usa la tua Graduate se già applicata */
  font-size: clamp(26px, 3.2vw, 44px);
  font-weight: 800;
  line-height: 1;
  color: #00f6ff;
  text-shadow: 0 0 10px rgba(0,255,255,.75), 0 0 18px rgba(255,0,255,.35);
  transform: translateY(-1px);
}

/* Mobile: un po’ più compatto */
@media (max-width: 520px){
  .annahelp-split{ gap: 14px; margin: 18px auto 18px; }
  .annahelp-split-line{ opacity: .85; }
}

/* capo “controllato” solo su mobile */
.mbr{ display:none; }
@media (max-width: 520px){
  .mbr{ display:inline; }
}

@media (max-width: 520px){

  /* questi titoli DEVONO essere testo normale, non due colonne */
  .anna-bottom strong{
    display: block !important;
    text-align: center !important;

    /* importantissimo: evita che flex/grid spacchi le parole */
    justify-content: initial !important;
    align-items: initial !important;
  }

  /* se strong o i figli erano flex/grid, li riportiamo “normali” */
  .anna-bottom strong,
  .anna-bottom strong *{
    display: inline !important;
  }

  /* e poi riportiamo strong come blocco (dopo aver “sbloccato” i figli) */
  .anna-bottom strong{
    display: block !important;
  }
}

/* === ANNA HELP: ONLINE / PRESENZA === */
.anna-bottom{
  font-size: 22px !important;   /* +2 rispetto a prima */
  letter-spacing: .12em;
  margin: 34px auto 22px !important; /* più respiro */
  text-align: center;
}

/* spazio extra sopra e sotto il cancelletto */
.anna-bottom + .hash-divider,
.hash-divider + .anna-bottom{
  margin-top: 26px !important;
}
.anna-arrow{
  font-weight: 900;
  display:inline-block;
  transform: scale(1.25);
  margin-right: 6px;

  text-shadow:
    0 0 6px rgba(0,255,255,.8),
    0 0 14px rgba(0,255,255,.6);
}
.page-annahelp .anna-arrow{
  display: inline-block !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 900 !important;

  transform: translateY(1px) scale(1.25) !important;
  margin-right: 8px !important;

  color: var(--cyan) !important;
  text-shadow:
    0 0 6px rgba(0,255,255,.85),
    0 0 16px rgba(0,255,255,.55) !important;
}

/* === ANNA HELP: a capo SOLO su mobile per ONLINE / PRESENZA === */
@media (max-width: 760px){

  .anna-bottom.anna-bottom--split{
    text-align: center;
    line-height: 1.25;
  }

  .anna-bottom.anna-bottom--split .anna-bottom__top,
  .anna-bottom.anna-bottom--split .anna-bottom__sub{
    display: block;
  }

  .anna-bottom.anna-bottom--split .anna-bottom__sub{
    margin-top: 10px;
  }

  /* pin appiccicato e allineato bene sulla riga sotto */
  .anna-bottom.anna-bottom--split .map-pin{
    width: 22px;
    height: 22px;
    vertical-align: -4px;
    margin-left: 6px;
  }
}
/* ANNA HELP — freccia più ciccia (desktop + mobile) */
.anna-arrow{
  display: inline-block;
  font-weight: 900;
  font-size: 1.2em;      /* base */
  line-height: 1;
  transform: translateY(-0.02em);
}

/* MOBILE: ancora più grossa e “bold” */
@media (max-width: 600px){
  .anna-arrow{
    font-size: 1.45em;   /* aumenta qui se vuoi */
    font-weight: 900;
  }
}

/* ✅ POPUP ISEE: link sempre leggibile (niente viola browser) */
.isee-popup .isee-box a,
.isee-popup .isee-box a:visited{
  color: var(--cyan);
  font-weight: 900;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-shadow:
    0 0 8px rgba(0,255,220,.55),
    0 0 16px rgba(0,255,220,.25);
}

.isee-popup .isee-box a:hover{
  filter: brightness(1.15);
}


/* ✅ POPUP ISEE: CTA tipo bottone neon */
.isee-popup .isee-box .popup-cta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  margin-top: 10px;
  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(0,255,200,.14);
  border: 1px solid rgba(0,255,200,.35);
  box-shadow: 0 0 18px rgba(0,255,200,.20);
  text-decoration: none; /* via underline, lo fa già “bottone” */
}


/* =========================================================
   ISEE — ACCORDION DOCUMENTI (titolo clic -> testo)
   ========================================================= */
.isee-docs{
  width: min(860px, 100%);
  margin: 0 auto;
  padding: 10px 14px;
}

.isee-docs__head{
  text-align: center;
  margin-bottom: 14px;
}

.isee-docs__title{
  margin: 0 0 10px;
}

.isee-docs__note{
  margin: 0 auto;
  max-width: 760px;
  line-height: 1.55;
  opacity: .95;
}

.isee-accordion{
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

.isee-item{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  background: rgba(6, 8, 24, .70);
  overflow: hidden;
}

.isee-item__sum{
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  list-style: none;
  user-select: none;
}

.isee-item__sum::-webkit-details-marker{ display:none; }

/* freccetta “custom” */
.isee-item__sum{
  position: relative;
  padding-right: 44px;
}
.isee-item__sum::after{
  content: "▾";
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .9;
  transition: transform .18s ease;
}

.isee-item[open] .isee-item__sum::after{
  transform: translateY(-50%) rotate(180deg);
}

.isee-item__body{
  padding: 0 16px 14px;
}

.isee-item__body ul{
  margin: 10px 0 0;
  padding-left: 18px;
}

.isee-item__body li{
  margin: 8px 0;
  line-height: 1.55;
}

/* Mobile: un filo più compatto */
@media (max-width: 760px){
  .isee-docs{ padding: 10px 12px; }
  .isee-item__sum{ padding: 13px 14px; }
  .isee-item__body{ padding: 0 14px 13px; }
}


/* =========================================================
   ISEE — NEON UPGRADE (titolo + card + glow)
   Incolla sotto al CSS precedente (override)
   ========================================================= */

/* TITOLO: neon grosso, super leggibile */
.isee-docs__title{
  margin: 0 0 12px;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  letter-spacing: .6px;
  font-weight: 900;

  /* neon */
  color: #eaffff;
  text-shadow:
    0 0 10px rgba(0,255,255,.55),
    0 0 22px rgba(0,255,255,.35),
    0 0 40px rgba(140,90,255,.22);
}

/* Nota NB: “vetro” + bordo neon */
.isee-docs__note{
  margin: 0 auto;
  max-width: 780px;
  padding: 12px 14px;
  border-radius: 18px;

  background: rgba(6, 8, 24, .58);
  border: 1px solid rgba(0,255,255,.20);

  color: rgba(233, 249, 255, .95);
  text-shadow: 0 0 10px rgba(0,255,255,.25);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 12px 30px rgba(0,0,0,.45),
    0 0 26px rgba(0,255,255,.12);
}

/* Accordion: “card neon” */
.isee-item{
  border-radius: 22px;

  background: rgba(6, 8, 24, .72);
  border: 1px solid rgba(0,255,255,.22);

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06) inset,
    0 14px 34px rgba(0,0,0,.55),
    0 0 28px rgba(0,255,255,.10);
}

/* Titolo cliccabile: glow + separatore */
.isee-item__sum{
  padding: 16px 18px;
  font-weight: 850;
  letter-spacing: .2px;
  color: #eaffff;

  text-shadow:
    0 0 10px rgba(0,255,255,.35),
    0 0 18px rgba(140,90,255,.18);

  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Hover “tech” */
.isee-item__sum:hover{
  background: rgba(0,255,255,.06);
}

/* Freccia: più “HUD” */
.isee-item__sum::after{
  content: "⟡";
  font-size: 1.1rem;
  opacity: .95;
  text-shadow:
    0 0 10px rgba(0,255,255,.45),
    0 0 22px rgba(140,90,255,.25);
  transition: transform .18s ease, opacity .18s ease;
}

.isee-item[open] .isee-item__sum::after{
  transform: translateY(-50%) rotate(180deg) scale(1.08);
  opacity: 1;
}

/* Corpo testo: leggibilità + glow leggero */
.isee-item__body{
  padding: 8px 18px 16px;
  color: rgba(233,249,255,.95);
  text-shadow: 0 0 10px rgba(0,255,255,.12);
}

/* Liste più “pulite” */
.isee-item__body ul{
  margin: 8px 0 0;
  padding-left: 18px;
}
.isee-item__body li{
  margin: 9px 0;
}

/* Mobile: titolo ancora bello senza spaccare layout */
@media (max-width: 760px){
  .isee-docs__title{
    font-size: clamp(1.45rem, 5vw, 2rem);
  }
  .isee-docs__note{
    padding: 11px 12px;
    border-radius: 16px;
  }
  .isee-item__sum{ padding: 14px 14px; }
  .isee-item__body{ padding: 8px 14px 14px; }
}

/* ISEE accordion dentro terminal-box: neon coerente */
.terminal-box--docs .isee-item{
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(6, 8, 24, .35);
  margin: 10px 0;
  overflow: hidden;
}

.terminal-box--docs .isee-item__sum{
  padding: 14px 16px;
  cursor: pointer;
  font-weight: 700;
  text-shadow: 0 0 8px rgba(0,255,255,.55);
}

.terminal-box--docs .isee-item__body{
  padding: 0 16px 14px;
}
section[aria-label="Titolo pagina"]{
  margin-top: 10px;
  text-align: center;
}
section[aria-label="Titolo pagina"] > h2{
  font-size: clamp(1.9rem, 5.4vw, 2.9rem);
  font-weight: 900;
  text-shadow:
    0 0 12px rgba(0,255,255,.60),
    0 0 30px rgba(0,255,255,.25),
    0 0 40px rgba(140,90,255,.18);
}


.isee-note-strong{
  font-weight: 700;
  text-align: center;
  margin: 18px auto 0;
  max-width: 980px;
}