/* ============================================================
   Tramatronics — mockup nuovo sito
   Palette dal brand attuale: blu #204CAB / #2563EB, giallo #FACC15
   ============================================================ */

:root {
  --blue-900: #0b1e4a;
  --blue-800: #12306f;
  --blue-700: #204cab;
  --blue-600: #2563eb;
  --blue-100: #e3ebfb;
  --blue-50:  #f1f5fe;
  --yellow:   #facc15;
  --yellow-600: #e0b40c;
  --yellow-50: #fff6d1;
  --ink:      #0f172a;
  --ink-2:    #475569;
  --ink-3:    #94a3b8;
  --line:     #e2e8f0;
  --bg:       #ffffff;
  --bg-soft:  #f8fafc;
  --green:    #279a42;
  --radius:   16px;
  --radius-lg: 24px;
  --shadow:   0 10px 30px -12px rgba(11, 30, 74, .25);
  --shadow-sm: 0 2px 8px -2px rgba(11, 30, 74, .12);
  --max:      1180px;
  --font:     "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ---------- Transizione tra pagine: lo schermo trasla ----------
   La pagina che lasci scorre di lato e sfuma, quella che arriva entra dal lato opposto.
   Direzione: avanti (verso destra nel menu) o indietro. Gestita in main.js. */
html { background: #fff; }
body { overflow-x: hidden; }
body.page-leave { transition: transform .3s cubic-bezier(.4,0,.8,.6), opacity .3s ease-in; }
body.page-leave--forward { transform: translateX(-14%); opacity: 0; }
body.page-leave--back    { transform: translateX(14%);  opacity: 0; }
body.page-enter--forward { animation: body-in-right .5s cubic-bezier(.2,.8,.2,1); }
body.page-enter--back    { animation: body-in-left  .5s cubic-bezier(.2,.8,.2,1); }
@keyframes body-in-right { from { transform: translateX(22%);  opacity: 0; } }
@keyframes body-in-left  { from { transform: translateX(-22%); opacity: 0; } }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -0.02em; }
p { margin: 0; }
button, input, select { font: inherit; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }
.section { padding: 88px 0; }
.section--soft { background: var(--bg-soft); }
.section--blue { background: linear-gradient(160deg, var(--blue-800), var(--blue-700)); color: #fff; }
.section--navy { background: var(--blue-900); color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue-600); margin-bottom: 14px;
}
.section--blue .eyebrow, .section--navy .eyebrow, .hero .eyebrow, .page-head .eyebrow { color: var(--yellow); }
.h2 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 640px; margin-top: 14px; }
.section--blue .lead, .section--navy .lead { color: rgba(255,255,255,.78); }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  border: 2px solid transparent; cursor: pointer; transition: .18s ease;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; }
.btn--yellow { background: var(--yellow); color: var(--blue-900); }
.btn--yellow:hover { background: var(--yellow-600); transform: translateY(-1px); }
.btn--blue { background: var(--blue-600); color: #fff; }
.btn--blue:hover { background: var(--blue-700); transform: translateY(-1px); }
.btn--ghost { background: transparent; color: var(--blue-700); border-color: var(--blue-100); }
.btn--ghost:hover { background: var(--blue-50); }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.35); }
.btn--ghost-light:hover { background: rgba(255,255,255,.1); }
.btn--sm { padding: 10px 16px; font-size: 14px; }
.btn--block { width: 100%; }

/* ---------- Topbar + Header ---------- */
.topbar {
  background: var(--blue-900); color: rgba(255,255,255,.8); font-size: 13px;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; height: 36px; }
.topbar a { display: inline-flex; align-items: center; gap: 6px; }
.topbar a:hover { color: #fff; }
.topbar svg { width: 14px; height: 14px; }
.topbar__right { display: flex; gap: 20px; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(238,243,252,.97); /* niente backdrop-filter: costava un ricalcolo a ogni frame sopra al canvas */
  border-bottom: 1px solid var(--line);
}
.header .container { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.logo { display: flex; align-items: center; flex: none; }
.logo img { height: 42px; width: auto; max-width: none; object-fit: contain; }
.logo__text { font-weight: 800; font-size: 22px; color: var(--blue-700); letter-spacing: -0.02em; }
.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 10px 14px; border-radius: 10px; font-weight: 600; font-size: 15px; color: var(--ink-2);
  white-space: nowrap;
}
.nav a:hover { background: var(--blue-50); color: var(--blue-700); }
.nav a.is-active { color: var(--blue-700); }
.nav__jobs { display: inline-flex; align-items: center; gap: 8px; }
.nav__hiring {
  font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  background: var(--yellow); color: var(--blue-900); padding: 3px 7px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
}
.nav__hiring::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--blue-900);
  animation: new-pulse 1.6s ease-in-out infinite;
}
.header__cta { display: flex; align-items: center; gap: 10px; }
.burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent; border-radius: 10px;
  flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer; padding: 0;
}
.burger span { display: block; flex: none; width: 22px; height: 2px; background: var(--ink); margin: 0; border-radius: 2px; transform-origin: center; transition: transform .5s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.burger:hover { background: var(--blue-50); }
/* da hamburger a X */
/* riga alta e bassa fatte di due metà: aprendo si "spezzano" al centro (la alta a V, la bassa a Λ) e si avvicinano */
.burger span:nth-child(1), .burger span:nth-child(3) { background: transparent; position: relative; }
.burger span:nth-child(1)::before, .burger span:nth-child(1)::after,
.burger span:nth-child(3)::before, .burger span:nth-child(3)::after {
  content: ""; position: absolute; top: 0; width: 50%; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.burger span::before { left: 0;  width: calc(50% + .5px); border-radius: 2px 0 0 2px; transform-origin: 100% 50%; }   /* metà sinistra: perno al centro, giunzione netta */
.burger span::after  { right: 0; width: calc(50% + .5px); border-radius: 0 2px 2px 0; transform-origin: 0 50%; }     /* metà destra: perno al centro */
.burger.is-open span:nth-child(1) { transform: translateY(8px); }
.burger.is-open span:nth-child(1)::before { transform: rotate(45deg); }    /* estremo sinistro verso l'alto */
.burger.is-open span:nth-child(1)::after  { transform: rotate(-45deg); }   /* estremo destro verso l'alto */
.burger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.burger.is-open span:nth-child(3) { transform: translateY(-8px); }
.burger.is-open span:nth-child(3)::before { transform: rotate(-45deg); }   /* estremo sinistro verso il basso */
.burger.is-open span:nth-child(3)::after  { transform: rotate(45deg); }    /* estremo destro verso il basso */
.btn__txt--short { display: none; }
/* header che non ci sta (lingue lunghe, finestre strette): tre gradi progressivi decisi da fitHeader() in i18n.js.
   I pulsanti Area riservata e Copertura restano sempre: prima testi corti e menu stretto, poi Area riservata a sola icona, poi il badge Assumiamo. */
.header--tight .header__cta .btn__txt { display: none; }
.header--tight .header__cta .btn__txt--short { display: inline; }
.header--tighter .header__login { padding: 9px 10px; } .header--tighter .header__login span { display: none; }
.header--tight .nav { gap: 0; } .header--tight .nav a { padding: 10px 8px; font-size: 14px; }
.header--tight .container { gap: 12px; } .header--tight .logo img { height: 36px; }
.header--tighter .header__cta .btn--ghost:not(.header__login) { display: none; }
.header--tightest .nav a { padding: 10px 6px; font-size: 13px; } .header--tightest .nav__hiring { display: none; }
/* traduzioni: parole lunghe nei titoli e nelle card non devono sbordare */
h1, h2, h3, .h2, .k__t, .card__body h3, .step b, .feature b, .band__card b, .cb__tile .n { overflow-wrap: break-word; }
:lang(de) :is(h1, h2, h3, .h2, .lead, p, .k__t, .card__body h3, .step b), :lang(nl) :is(h1, h2, h3, .h2, .lead, p, .k__t, .card__body h3, .step b) { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 10 4 4; }

/* Menu mobile: pannello che si apre sotto l'header, sopra la pagina */
.mobile-nav {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 60;
  background: #fff; border-bottom: 1px solid var(--line); padding: 6px 16px 18px;
  box-shadow: 0 28px 40px -24px rgba(6,18,49,.45);
  opacity: 0; transform: translateY(-10px); visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility 0s linear .22s;
}
.mobile-nav.is-open { opacity: 1; transform: none; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.mobile-nav__links { display: flex; flex-direction: column; }
.mobile-nav__links a {
  display: flex; align-items: center; gap: 10px; padding: 14px 8px; font-weight: 700; font-size: 17px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-nav__links a::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--blue-600); border-bottom: 2px solid var(--blue-600); transform: rotate(-45deg); opacity: .55; }
.mobile-nav__links a:last-child { border-bottom: 0; }
.mobile-nav__links a.is-active { color: var(--blue-700); }
.mobile-nav__actions { display: grid; gap: 10px; margin-top: 10px; }
.mobile-nav__contact { margin: 14px 0 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.mobile-nav__contact a { font-weight: 700; color: var(--blue-700); }
.menu-backdrop { position: fixed; inset: 0; z-index: 49; background: rgba(6,18,49,.45); opacity: 0; pointer-events: none; transition: opacity .25s; }
body.menu-open { overflow: hidden; }
body.menu-open .menu-backdrop { opacity: 1; pointer-events: auto; }

/* ---------- Ticker novità (sotto la navbar) ---------- */
.ticker {
  display: block; overflow: hidden; height: 38px;
  background: var(--blue-900); color: #fff; border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: 14px; font-weight: 600; white-space: nowrap;
}
.ticker__track {
  display: inline-flex; align-items: center; height: 100%;
  animation: ticker-scroll 60s linear infinite; will-change: transform;
}
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 10px; padding: 0 28px; color: inherit; text-decoration: none; }
.ticker__item:hover em { text-decoration: underline; }
.ticker__tag { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--blue-900); background: var(--yellow); border-radius: 4px; padding: 2px 6px; line-height: 1.2; }
.ticker__item::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--yellow); margin-left: 28px; opacity: .6; }
.ticker__item em { font-style: normal; color: var(--yellow); }
.ticker .new { font-size: 10px; padding: 3px 8px 3px 7px; }
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(37,99,235,.55), transparent 60%),
    radial-gradient(800px 500px at -10% 110%, rgba(250,204,21,.18), transparent 60%),
    linear-gradient(160deg, var(--blue-900) 0%, var(--blue-800) 60%, var(--blue-700) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 60% 40%, #000 20%, transparent 70%);
}
/* hero a tutto schermo: finestra meno topbar (36) + header (76) + banner (38) e meno la barra fiducia (130),
   così le quattro informazioni restano nel primo schermo */
.hero { display: flex; align-items: center; min-height: calc(100svh - 150px - 130px); }
.hero .container { position: relative; width: 100%; padding-top: 40px; padding-bottom: 56px; }
.hero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 56px; align-items: center; }
/* variante impilata: titolo e testo sopra, widget copertura sotto, anche su desktop */
.hero__grid--stack { grid-template-columns: 1fr; gap: 30px; justify-items: center; text-align: center; }
.hero:has(.hero__grid--stack) { min-height: 0; }
.hero:has(.hero__grid--stack) .container { padding-top: 36px; padding-bottom: 44px; }
.hero__grid--stack .hero__lead { margin-left: auto; margin-right: auto; max-width: 620px; }
.hero__grid--stack .cover-card { width: 100%; max-width: 960px; text-align: left; padding: 32px 36px; }
.hero__grid--stack .cover-card h3 { font-size: 22px; }
/* widget largo: campo e pulsante sulla stessa riga, ricerca dettagliata su una riga sola */
@media (min-width: 721px) {
  .hero__grid--stack .cover-form--simple { grid-template-columns: 1fr auto; align-items: end; gap: 14px; }
  .hero__grid--stack .cover-form--detailed { grid-template-columns: 1.1fr 1.6fr .6fr auto; align-items: end; gap: 14px; }
  .hero__grid--stack .cover-form--detailed .field--row { display: contents; }
  .hero__grid--stack .cover-form .btn--block { width: auto; padding-left: 26px; padding-right: 26px; white-space: nowrap; }
  .hero__grid--stack .cover-form .hint { grid-column: 1 / -1; text-align: left; }
  .hero__grid--stack .cover-card__alt { text-align: left; margin-top: 12px; }
  .hero__grid--stack .cov__grid { grid-template-columns: repeat(4, 1fr); }
}
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 8px;
  border-radius: 999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
  font-size: 13px; font-weight: 600; margin-bottom: 24px;
}
.hero__badge i {
  width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: var(--blue-900);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 12px; font-weight: 800;
}
.hero h1 { font-size: clamp(38px, 5.6vw, 64px); font-weight: 800; letter-spacing: -0.03em; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero h1 .speed { font-style: italic; text-transform: uppercase; letter-spacing: -0.01em; padding-right: .08em; } /* ULTRAVELOCE. in corsivo; padding per non tagliare il corsivo a destra */

/* Effetto "ultraveloce": bagliore bianco che sfreccia sul testo */
.speed {
  display: inline-block;
  background: linear-gradient(100deg,
    var(--yellow) 0%, var(--yellow) 36%,
    #fff 46%, #fff7c2 54%,
    var(--yellow) 64%, var(--yellow) 100%);
  background-size: 260% 100%;
  background-position: 120% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: speed-sweep 2.6s cubic-bezier(.2, .8, .2, 1) 1.2s infinite;
  position: relative; z-index: 0;
}
/* bagliore: copia statica del testo, sfocata, su un livello a parte (dipinta una volta sola) */
.speed::before {
  content: attr(data-text); position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-text-fill-color: var(--yellow); color: var(--yellow); background: none;
  filter: blur(14px); opacity: .35; will-change: transform;
}
@keyframes speed-sweep {
  0%   { background-position: 120% 0; }
  45%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .speed { animation: none; background-position: 50% 0; }
}
.hero__lead { font-size: 19px; color: rgba(255,255,255,.8); margin-top: 20px; max-width: 520px; }
.hero__actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hero__stats { display: flex; gap: 36px; margin-top: 44px; flex-wrap: wrap; }
.hero__stats b { display: block; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; }
.hero__stats span { font-size: 13px; color: rgba(255,255,255,.65); }

/* Indicatore "scorri" in fondo all'hero */
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  color: rgba(255,255,255,.7); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; font-weight: 700;
  transition: color .2s;
}
.scroll-hint:hover { color: #fff; }
/* le due frecce oscillano su e giù insieme, stessa fase */
.scroll-hint__chev { width: 22px; height: 22px; color: var(--yellow); animation: chev-bob 1.6s ease-in-out infinite; }
@keyframes chev-bob {
  0%, 100% { transform: translateY(-4px); }
  50%      { transform: translateY(6px); }
}
@media (max-width: 900px) { .scroll-hint { display: none; } }

/* Coverage card */
.cover-card {
  background: #fff; color: var(--ink); border-radius: var(--radius-lg); padding: 28px;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.5);
}
.cover-card h3 { font-size: 20px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.cover-card h3 svg { width: 22px; height: 22px; color: var(--blue-600); }
.cover-card p { color: var(--ink-2); font-size: 14px; margin-top: 6px; }
.cover-card form { display: grid; gap: 12px; margin-top: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-size: 12px; font-weight: 700; color: var(--ink-2); text-transform: uppercase; letter-spacing: .06em; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; border-radius: 12px; border: 1.5px solid var(--line);
  background: var(--bg-soft); transition: .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue-600); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}
.field--row { display: grid; grid-template-columns: 2fr 1fr; gap: 12px; }
.cover-card .hint { font-size: 12px; color: var(--ink-3); text-align: center; }
.cover-card__alt { font-size: 13px; color: var(--ink-2); text-align: center; margin-top: 14px; }
.cover-card__alt a { color: var(--blue-700); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.cover-card__alt a:hover { color: var(--blue-600); }
.cover-form--detailed { margin-top: 16px; padding-top: 16px; border-top: 1px dashed var(--line); }
.cover-form[hidden] { display: none; }
.cover-card__result { display: none; margin-top: 18px; font-size: 14px; }
.cover-card__result.is-visible { display: block; }
.cover-card__result.is-error { padding: 12px 14px; border-radius: 12px; background: #fff4e5; color: #8a4b00; font-weight: 600; }

/* Widget espanso (dalla hero della home): quasi a tutto schermo, il resto della pagina sparisce */
.cov-backdrop { position: fixed; inset: 0; z-index: 79; background: rgba(6,18,49,.94); opacity: 0; pointer-events: none; transition: opacity .3s; }
.cov-backdrop.is-on { opacity: 1; pointer-events: auto; }
body.cov-open { overflow: hidden; }
.cover-card.is-expanded {
  position: fixed; z-index: 80; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(1100px, calc(100vw - 48px)); max-height: calc(100vh - 48px); overflow: auto;
  padding: 32px 36px; animation: cov-expand .4s cubic-bezier(.2,.8,.2,1);
}
@keyframes cov-expand { from { opacity: 0; transform: translate(-50%, -50%) scale(.94); } }
.cover-card.is-expanded h3 { font-size: 22px; padding-right: 48px; }
.cover-card__close {
  display: none; position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: var(--bg-soft); color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; transition: background .15s;
}
.cover-card__close:hover { background: var(--blue-50); }
.cover-card.is-expanded .cover-card__close { display: inline-flex; align-items: center; justify-content: center; }
@media (min-width: 721px) {
  .cover-card.is-expanded .cover-form--simple { grid-template-columns: 1fr auto; align-items: end; gap: 14px; }
  .cover-card.is-expanded .cover-form--detailed { grid-template-columns: 1.1fr 1.6fr .6fr auto; align-items: end; gap: 14px; }
  .cover-card.is-expanded .cover-form--detailed .field--row { display: contents; }
  .cover-card.is-expanded .cover-form .btn--block { width: auto; padding-left: 26px; padding-right: 26px; white-space: nowrap; }
  .cover-card.is-expanded .cover-card__alt { text-align: left; margin-top: 12px; }
  .cover-card.is-expanded .cov__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 600px) {
  .cover-card.is-expanded { width: calc(100vw - 20px); max-height: calc(100vh - 20px); padding: 20px; }
}

/* ---------- Risultato copertura: tecnologia + offerte attivabili ---------- */
.cov { border-radius: 16px; border: 1px solid var(--line); background: var(--bg-soft); padding: 16px; animation: cov-in .35s ease both; }
@keyframes cov-in { from { opacity: 0; transform: translateY(6px); } }
.cov__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.cov__head > b, .cov__head > .cov__sub { flex-basis: 100%; }
.cov__seg { margin-left: auto; display: inline-flex; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
.cov__segbtn { border: 0; background: transparent; padding: 6px 14px; border-radius: 999px; font: inherit; font-weight: 700; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: .15s; }
.cov__segbtn:hover { color: var(--blue-700); }
.cov__segbtn.is-on { background: var(--blue-700); color: #fff; }
.cov__badge--net { background: #fff; color: var(--blue-700); border: 1px solid rgba(37,99,235,.35); }
.cov__fee { flex-basis: 100%; margin-top: 6px; font-size: 13px; color: var(--ink-2); padding: 7px 10px; border-radius: 10px; background: #fff; border: 1px dashed rgba(37,99,235,.35); width: max-content; max-width: 100%; }
.cov__fee b { color: var(--ink); }
.cov__act { font-size: 11px; font-weight: 700; color: var(--ink-2); }
/* Street View sull'indirizzo verificato */
.cov__sv { position: relative; margin-top: 14px; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 16 / 7; background: var(--blue-50) radial-gradient(circle at 70% 30%, rgba(37,99,235,.14), transparent 55%); }
.cov__sv iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cov__svph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 16px; }
.cov__svph b { font-size: 15px; } .cov__svph span { font-size: 13px; color: var(--ink-2); } .cov__svph .btn { margin-top: 6px; }
.cov__sv.is-loaded .cov__svph { display: none; }
.cov__svlink { position: absolute; right: 10px; bottom: 10px; font-size: 12px; font-weight: 700; color: var(--blue-700); background: rgba(255,255,255,.92); padding: 5px 10px; border-radius: 999px; }
/* schede tecnologie disponibili + avviso "c'è di meglio" */
.cov__techs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cov__techbtn { position: relative; display: grid; gap: 1px; text-align: left; border: 1.5px solid var(--line); border-radius: 12px; background: #fff; padding: 9px 14px 8px; font: inherit; font-weight: 800; font-size: 13px; color: var(--ink); cursor: pointer; transition: .15s; }
.cov__techbtn small { font-weight: 600; font-size: 11px; color: var(--ink-2); }
.cov__techbtn i { position: absolute; top: -8px; right: 10px; font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: var(--yellow); color: #061231; padding: 2px 7px; border-radius: 999px; }
.cov__techbtn:hover { border-color: rgba(37,99,235,.5); }
.cov__techbtn.is-on { border-color: var(--blue-700); background: var(--blue-50); color: var(--blue-700); }
.cov__better { margin-top: 12px; padding: 10px 14px; border-radius: 12px; background: #fff8db; border: 1px solid rgba(250,204,21,.6); font-size: 13px; color: var(--ink); line-height: 1.5; }
.cov__betterbtn { border: 0; background: none; padding: 0; font: inherit; font-weight: 800; color: var(--blue-700); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cov__offer--biz { grid-column: 1 / -1; }
.cov__list { margin: 8px 0 0; padding-left: 18px; font-size: 13px; color: var(--ink-2); display: grid; gap: 3px; }
.cov__badge { width: max-content; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: var(--blue-700); color: #fff; }
.cov--fwa .cov__badge { background: #0e9f8f; }
.cov--none .cov__badge { background: #b45309; }
.cov__head b { font-size: 16px; color: var(--ink); margin-top: 6px; line-height: 1.3; }
.cov__sub { font-size: 13px; color: var(--ink-2); }
.cov__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 14px; }
.cov__offer {
  position: relative; display: grid; gap: 2px; padding: 14px 14px 12px; border-radius: 14px; background: #fff;
  border: 1.5px solid rgba(var(--c), .35); color: var(--ink);
  transition: transform .2s, box-shadow .2s, border-color .2s; animation: cov-in .4s ease both; animation-delay: calc(var(--i, 0) * 70ms);
}
.cov__offer:hover { transform: translateY(-3px); border-color: rgb(var(--c)); box-shadow: 0 14px 30px -16px rgba(var(--c), .6); }
.cov__name { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgb(var(--c)); }
.cov__speed { font-size: 26px; font-weight: 900; letter-spacing: -.04em; line-height: 1.1; }
.cov__speed small { font-size: 11px; font-weight: 600; margin-left: 4px; color: var(--ink-2); letter-spacing: 0; }
.cov__up { font-size: 12px; color: var(--ink-2); }
.cov__price { margin-top: 8px; font-size: 18px; font-weight: 800; }
.cov__price small { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.cov__note { font-size: 11px; color: var(--ink-3); min-height: 14px; }
.cov__go { margin-top: 8px; font-size: 12px; font-weight: 700; color: rgb(var(--c)); }
.cov__tag { position: absolute; top: 10px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; padding: 3px 7px; border-radius: 999px; background: rgb(var(--c)); color: #fff; }
.cov__foot { margin: 12px 0 0; font-size: 12px; color: var(--ink-3); }
.cov__foot a { color: var(--blue-700); font-weight: 700; }
.cov__foot em { display: block; margin-top: 4px; font-style: normal; opacity: .7; }
.cov__actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.cov--loading { display: flex; align-items: center; gap: 10px; font-weight: 600; color: var(--ink-2); }
.cov__spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(37,99,235,.25); border-top-color: var(--blue-600); animation: cov-spin .7s linear infinite; flex: none; }
@keyframes cov-spin { to { transform: rotate(360deg); } }

/* ---------- Sezione "velocità della luce" ---------- */
.light {
  position: relative; overflow: hidden; color: #fff;
  background: #050c22; min-height: 92vh;
  display: flex; align-items: center; padding: 96px 0;
  perspective: 1200px;
}
.light__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; }
.light__vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(5,12,34,.0) 0%, rgba(5,12,34,.55) 70%, rgba(5,12,34,.95) 100%),
    linear-gradient(to bottom, #050c22 0%, transparent 12%, transparent 88%, #050c22 100%);
}

.light__content {
  position: relative; text-align: center;
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translate(var(--px, 0px), var(--py, 0px));
  transition: transform .25s ease-out; will-change: transform;
}
/* ogni riga si sposta con una profondità diversa */
.light__eyebrow { transform: translate(calc(var(--px, 0px) * -.3), calc(var(--py, 0px) * -.3)); transition: transform .3s ease-out; will-change: transform; }
.light__title   { transform: translate(calc(var(--px, 0px) * .3),  calc(var(--py, 0px) * .3));  transition: transform .28s ease-out; will-change: transform; }
.light__sub     { transform: translate(calc(var(--px, 0px) * -.2), calc(var(--py, 0px) * -.2)); transition: transform .32s ease-out; will-change: transform; }
.light__counter { transform: translate(calc(var(--px, 0px) * .6),  calc(var(--py, 0px) * .6));  transition: transform .26s ease-out; will-change: transform; }
.light__actions { transform: translate(calc(var(--px, 0px) * -.3), calc(var(--py, 0px) * -.3)); transition: transform .34s ease-out; will-change: transform; }
/* animazioni CSS della sezione solo quando è in vista */
.light:not(.is-live) .light__shine, .light:not(.is-live) .light__cta::after { animation-play-state: paused; }
.light__eyebrow {
  display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255,255,255,.85); padding: 9px 16px; border: 1px solid rgba(250,204,21,.5); border-radius: 6px;
  background: rgba(250,204,21,.08); margin-bottom: 26px;
  box-shadow: 0 0 24px rgba(250,204,21,.18), inset 0 0 12px rgba(250,204,21,.08);
}
.light__eyebrow b { color: var(--yellow); font-weight: 800; }
.light__title {
  font-size: clamp(40px, 7vw, 92px); font-weight: 800; letter-spacing: -0.04em; line-height: .98;
  text-shadow: 0 0 40px rgba(37,99,235,.55);
}
.light__title .w {
  display: inline-block; opacity: 0; transform: translateY(.6em) scale(.8); filter: blur(12px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1), filter .7s;
  transition-delay: calc(var(--i) * 90ms);
}
.light__title.is-in .w { opacity: 1; transform: none; filter: none; }
.light__title .w--hot { color: var(--yellow); text-shadow: 0 0 30px rgba(250,204,21,.7), 0 0 80px rgba(250,204,21,.35); }

.light__sub { margin-top: 22px; font-size: clamp(20px, 3vw, 34px); font-weight: 700; letter-spacing: -0.01em; }
.light__shine {
  background: linear-gradient(90deg, #fff 0%, #93c5fd 20%, #fff 40%, var(--yellow) 55%, #fff 70%, #93c5fd 85%, #fff 100%); /* inizia e finisce in bianco: nessuno stacco al ciclo */
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: light-shine 4s steps(120) infinite;
}
@keyframes light-shine { from { background-position: 0% 0; } to { background-position: 300% 0; } }

.light__counter {
  margin-top: 44px; display: inline-flex; align-items: baseline; gap: 12px;
  font-variant-numeric: tabular-nums;
  opacity: 0; transition: opacity .35s ease; /* niente "0" fermo prima del conteggio */
}
.light__counter.is-on { opacity: 1; }
.light__num {
  font-size: clamp(64px, 11vw, 150px); font-weight: 800; letter-spacing: -0.05em; line-height: 1.15;
  padding: .06em .1em .02em .06em; margin: -.06em -.1em -.02em -.06em;
  background: linear-gradient(180deg, #fff 0%, #cfe0ff 55%, #6ea8ff 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  display: inline-block; transform: scale(var(--grow, 1)); transform-origin: 50% 85%; will-change: transform;
}
/* bagliore dietro al numero: statico, dipinto una volta sola */
.light__counter { position: relative; }
.light__counter::before {
  content: ""; position: absolute; inset: -20% -10%; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(ellipse at 50% 55%, rgba(110,168,255,.32) 0%, rgba(110,168,255,.12) 45%, transparent 70%);
}
.light__num.is-done { animation: num-pop .6s cubic-bezier(.2,.9,.3,1.3); }
@keyframes num-pop { 0% { transform: scale(.94); } 42% { transform: scale(1.15) translateY(-.05em); } 100% { transform: scale(1); } }
.light__unit { font-size: clamp(18px, 2.4vw, 28px); font-weight: 700; color: rgba(255,255,255,.75); letter-spacing: .06em; }

.light__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }
.light__actions--ask { align-items: center; gap: 18px; }
.light__ask { font-size: clamp(20px, 2.6vw, 28px); font-weight: 800; letter-spacing: -0.01em; color: #fff; }
.light__cta { position: relative; overflow: hidden; box-shadow: 0 10px 30px -10px rgba(250,204,21,.6); text-transform: uppercase; letter-spacing: .06em; }
/* Riflesso: una striscia di luce attraversa il pulsante ogni 3 secondi (solo transform, composito) */
.light__cta::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.0) 30%, rgba(255,255,255,.75) 50%, rgba(255,255,255,.0) 70%, transparent 100%);
  transform: translateX(-120%) skewX(-12deg);
  animation: cta-sheen 3s cubic-bezier(.4,0,.2,1) infinite; will-change: transform;
}
@keyframes cta-sheen {
  0%   { transform: translateX(-120%) skewX(-12deg); }
  35%  { transform: translateX(320%) skewX(-12deg); }
  100% { transform: translateX(320%) skewX(-12deg); }
}
.light__note { margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.55); }

@media (max-width: 600px) {
  .light { min-height: 0; padding: 72px 0; }
}

/* ---------- Highlights (10G + 72h) ---------- */
.highlights { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.highlight {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 110px 40px 40px;
  color: #fff; min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  box-shadow: var(--shadow);
}
.highlight--10g { background: linear-gradient(150deg, var(--blue-800), var(--blue-600)); }
.highlight--72h { background: linear-gradient(150deg, #0b1e4a, #1b3a8a); }
.highlight::before {
  content: ""; position: absolute; width: 360px; height: 360px; border-radius: 50%; right: -120px; top: -140px;
  background: rgba(250,204,21,.16); filter: blur(6px);
}
.highlight__icon {
  position: absolute; top: 28px; left: 32px; width: 52px; height: 52px; border-radius: 14px;
  background: var(--yellow); color: var(--blue-900); display: inline-flex; align-items: center; justify-content: center;
}
.highlight__icon svg { width: 26px; height: 26px; }
.highlight__big { font-size: clamp(44px, 6vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; position: relative; }
.highlight__big small { font-size: .42em; font-weight: 700; letter-spacing: 0; color: var(--yellow); margin-left: 6px; }
.highlight__big .sep { color: rgba(255,255,255,.45); margin: 0 6px; font-weight: 400; }
.highlight__big--word { text-transform: uppercase; }
.highlight__big--word small { display: block; font-size: 15px; letter-spacing: .02em; margin: 6px 0 0; color: var(--yellow); }
.highlight__big--word .highlight__pre { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .06em; font-size: 16px; font-weight: 800; }
.highlight__word { display: inline-block; }

/* ---------- Coreografia "Problema? → Risolto." (apertura sezione assistenza) ----------
   1) PROBLEMA? lettera per lettera dal basso, al centro  2) esce allo stesso modo (lettere giù) e a destra
   parte l'orologio veloce che diventa una spunta verde  3) RISOLTO. entra come PROBLEMA?
   4) sparisce tutto e la sezione si apre sul contenuto normale */
.highlight__ask {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none;
  font-size: clamp(40px, 5.2vw, 66px); font-weight: 800; letter-spacing: .02em; text-transform: uppercase; color: #fff; opacity: 0;
}
.highlight__ask span { display: inline-block; overflow: hidden; padding: .04em .06em; will-change: transform; }
.highlight__ask i { display: inline-block; font-style: normal; opacity: 0; transform: translateY(110%); }
.highlight--72h.is-ask .highlight__ask--q, .highlight--72h.is-ok .highlight__ask--ok { opacity: 1; }
.highlight--72h.is-ask .highlight__ask--q i, .highlight--72h.is-ok .highlight__ask--ok i { animation: letter-up .3s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * 28ms); }
/* RISOLTO. entra a onda: ogni lettera parte quando quella corrispondente di PROBLEMA? è appena uscita (nessuna sovrapposizione) */
.highlight--72h.is-ok .highlight__ask--ok i { animation-delay: calc(200ms + var(--i) * 28ms); }
.highlight--72h.is-out .highlight__ask--q i { animation: letter-down .25s cubic-bezier(.6,0,.8,.4) both; animation-delay: calc(var(--i) * 28ms); } /* both: durante il ritardo la lettera resta visibile (stato "from"), niente sfarfallio */
@keyframes letter-up { to { opacity: 1; transform: none; } }
@keyframes letter-down { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-110%); } }
/* orologio grande a destra, senza riquadro: è già fermo in scena, poi parte a girare con ease e diventa una spunta verde */
.highlight__bigclock { position: absolute; right: 4%; top: 50%; width: 130px; height: 130px; margin: -65px 0 0 0; color: var(--yellow); opacity: 0; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.highlight__bigclock svg { width: 100%; height: 100%; overflow: visible; transform-origin: center; }
.highlight--72h.is-ask .highlight__bigclock { opacity: 1; transition: opacity .3s ease; }
.highlight--72h.is-in .highlight__bigclock { animation: bigclock-color 1.4s ease forwards; }
.highlight.highlight--72h.is-in .highlight__bigclock svg { animation: clock-svg-grow 1.25s cubic-bezier(.4,.02,.12,1) forwards; }
@keyframes bigclock-color { 0%, 80% { color: var(--yellow); } 90%, 100% { color: #22c55e; } }
/* in questa sezione l'orologio gira in 1,25 s (invece di 3,8) fin dall'inizio: selettori più specifici della regola generale */
.highlight.highlight--72h.is-in .clock__minute, .highlight.highlight--72h.is-in .clock__hour, .highlight.highlight--72h.is-in .clock__hands,
.highlight.highlight--72h.is-in .clock__dot, .highlight.highlight--72h.is-in .clock__ring { animation-duration: 1.25s; }
.highlight.highlight--72h.is-in .clock__hour, .highlight.highlight--72h.is-in .clock__minute { transition-duration: .35s; transition-delay: .75s; }
.highlight.highlight--72h.is-in .clock__minute, .highlight.highlight--72h.is-in .clock__hour { animation-timing-function: cubic-bezier(.55,0,.15,1); }
/* sipario della sezione assistenza: nessuna card, sfondo della pagina e testi scuri.
   La sezione parte bassa (solo l'animazione) e a fine sequenza si chiude e si apre il contenuto normale. */
#assistenza .highlight--opener {
  background: none; box-shadow: none; border-radius: 0; overflow: visible; color: var(--ink);
  min-height: 220px; padding: 0; justify-content: center; margin: 0;
  transition: min-height .55s cubic-bezier(.2,.8,.2,1), opacity .3s ease;
}
#assistenza .highlight--opener::before { display: none; }
#assistenza .highlight--opener .highlight__ask { color: var(--ink); }
#assistenza .highlight--opener .highlight__bigclock { color: var(--blue-700); }
#assistenza .highlight--opener.is-in .highlight__bigclock { animation-name: bigclock-color-light; }
@keyframes bigclock-color-light { 0%, 80% { color: var(--blue-700); } 90%, 100% { color: #22c55e; } }
#assistenza .highlight--opener.is-rest { min-height: 0; opacity: 0; overflow: hidden; }
#assistenza .highlight--opener.is-rest .highlight__ask, #assistenza .highlight--opener.is-rest .highlight__bigclock { visibility: hidden; transition: visibility 0s .35s; }
/* contenuto chiuso (altezza 0) finché l'animazione non finisce, poi si apre */
#assistenza.has-opener .why-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2,.8,.2,1); }
#assistenza.has-opener .why-wrap__in { min-height: 0; overflow: hidden; opacity: 0; transition: opacity .5s ease .25s; }
#assistenza.has-opener.is-rest .why-wrap { grid-template-rows: 1fr; }
#assistenza.has-opener.is-rest .why-wrap__in { opacity: 1; }
@media (max-width: 600px) {
  /* mobile: scritta più piccola e spostata a sinistra, orologio più piccolo a destra: non si toccano mai */
  #assistenza .highlight--opener { min-height: 170px; }
  .highlight__ask { font-size: 30px; justify-content: flex-start; padding-left: 4px; padding-right: 80px; letter-spacing: .01em; }
  .highlight__bigclock { width: 64px; height: 64px; margin-top: -32px; right: 4px; }
}
.highlight h3 { font-size: 22px; font-weight: 800; position: relative; }
.highlight__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: st; position: relative; }
.highlight__steps li { position: relative; padding-left: 30px; font-size: 14px; color: rgba(255,255,255,.82); line-height: 1.45; }
.highlight__steps li::before { counter-increment: st; content: counter(st); position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border-radius: 50%; background: var(--yellow); color: var(--blue-900); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.highlight__steps li b { color: #fff; }
.highlight p { color: rgba(255,255,255,.8); font-size: 15px; max-width: 460px; position: relative; }
.highlight .btn { align-self: flex-start; margin-top: 8px; position: relative; }
.highlight__actions { display: flex; gap: 10px; flex-wrap: wrap; position: relative; }
.highlight__actions .btn { margin-top: 8px; }
.highlight__big span[data-count] { font-variant-numeric: tabular-nums; }
/* Orologio → spunta: le lancette girano (partenza morbida, lungo rallentamento) e si fermano
   a -45° / +45° mentre il perno scivola al vertice della spunta; poi l'icona diventa verde */
.highlight__icon--clock { transition: background .5s ease, color .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); }
/* perno delle lancette al centro del quadrante: vale per il badge e per l'orologio grande */
.highlight .clock__hands,
.highlight .clock__hour,
.highlight .clock__minute,
.highlight .clock__dot { transform-box: view-box; transform-origin: 12px 12px; }
.highlight .clock__hour   { transform: rotate(300deg); }
.highlight .clock__minute { transform: rotate(0deg); }

.highlight.is-in .clock__minute { animation: clock-spin-min  3.8s cubic-bezier(.4,.02,.12,1) forwards; }
.highlight.is-in .clock__hour   { animation: clock-spin-hour 3.8s cubic-bezier(.4,.02,.12,1) forwards; }
.highlight.is-in .clock__hands  { animation: clock-to-check  3.8s cubic-bezier(.4,.02,.12,1) forwards; }
.highlight.is-in .clock__dot    { animation: clock-dot        3.8s linear forwards; }
.highlight.is-in .clock__ring   { animation: clock-ring       3.8s cubic-bezier(.4,.02,.12,1) forwards; }
.highlight.is-in .clock__hour,
.highlight.is-in .clock__minute { stroke-width: 1.6; transition: stroke-width 1.2s ease 2.4s; }
.highlight.is-in .highlight__icon--clock { animation: clock-done 4.6s ease forwards; }

/* minuti: 3 giri + 45° (braccio lungo della spunta) · ore: 1 giro, da 300° a 315° (braccio corto) */
@keyframes clock-spin-min  { from { transform: rotate(0deg); }   to { transform: rotate(1125deg); } }
@keyframes clock-spin-hour { from { transform: rotate(300deg); } to { transform: rotate(675deg); } }
/* negli ultimi istanti il gruppo lancette si ingrandisce (×1.5) e il perno si sposta
   al vertice della spunta, calcolato perché la spunta risulti centrata nel cerchio */
@keyframes clock-to-check {
  0%, 55% { transform: translate(0, 0) scale(1); }
  100%    { transform: translate(-1.9px, 4.25px) scale(1.7); }
}
/* l'anello si allarga e si assottiglia */
@keyframes clock-ring {
  0%, 55% { r: 10; stroke-width: 2.2; }
  100%    { r: 11.3; stroke-width: 0.9; }
}
@keyframes clock-dot { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
/* il quadrato resta 52px: cresce solo il disegno (anello + spunta) al suo interno */
.highlight__icon--clock svg { transform-origin: center; }
.highlight.is-in .highlight__icon--clock svg { animation: clock-svg-grow 3.8s cubic-bezier(.4,.02,.12,1) forwards; }
@keyframes clock-svg-grow {
  0%, 55% { transform: scale(1); }
  100%    { transform: scale(1.45); }
}
/* poi il badge diventa verde con un piccolo pop, tornando alla misura originale */
@keyframes clock-done {
  0%, 82%  { background: var(--yellow); color: var(--blue-900); transform: scale(1); }
  90%      { background: #22c55e; color: #fff; transform: scale(1.12); }
  100%     { background: #22c55e; color: #fff; transform: scale(1); }
}

/* ---------- Tag "Novità" ---------- */
.new {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--yellow); color: var(--blue-900);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px 5px 8px; border-radius: 999px; vertical-align: middle;
}
.new::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue-900);
  animation: new-pulse 1.6s ease-in-out infinite;
}
.new--outline { background: transparent; color: var(--yellow); border: 1.5px solid var(--yellow); transition: .15s; }
a.new--outline:hover { background: var(--yellow); color: var(--blue-900); }
a.new--outline:hover::before { background: var(--blue-900); }
.new--outline::before { background: var(--yellow); }
.highlight .new { position: absolute; top: 34px; right: 32px; }
@keyframes new-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.6); opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .new::before { animation: none; } }

/* ---------- Trust strip ---------- */
.trust { background: #fff; border-bottom: 1px solid var(--line); }
.trust .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding-top: 28px; padding-bottom: 28px; }
.trust--3 .container { grid-template-columns: repeat(3, 1fr); }
.trust__item { display: flex; gap: 14px; align-items: flex-start; }
.trust__item svg { width: 28px; height: 28px; color: var(--blue-600); flex: none; }
.trust__item b { display: block; font-size: 15px; }
.trust__item span { font-size: 13px; color: var(--ink-2); }

/* ---------- Audience cards ---------- */
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.cards-3--2 { grid-template-columns: 1fr 1fr; max-width: 880px; margin-left: auto; margin-right: auto; text-align: left; }
.cards-3--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cards-3--4 .card__body h3 { font-size: 18px; }
.card--plain { padding: 22px 24px; } .card--plain h3 { font-size: 18px; font-weight: 800; margin: 0 0 8px; } .card--plain p { color: var(--ink-2); font-size: 14.5px; margin: 0; } .card--plain i { display: inline-flex; width: 42px; height: 42px; border-radius: 12px; background: var(--blue-50); color: var(--blue-700); align-items: center; justify-content: center; margin-bottom: 12px; } .card--plain i svg { width: 22px; height: 22px; }
@media (max-width: 1100px) { .cards-3--4 { grid-template-columns: 1fr 1fr; } }
.cards-3 > * { min-width: 0; }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  transition: .2s; display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: transparent; }
.card__img { aspect-ratio: 16/10; background: var(--blue-100); position: relative; overflow: hidden; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,30,74,.45), transparent 50%);
}
.card__body { padding: 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__body h3 { font-size: 21px; font-weight: 800; }
.card__body p { color: var(--ink-2); font-size: 15px; flex: 1; }
.card__link { color: var(--blue-700); font-weight: 700; display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; }
.card__link svg { width: 16px; height: 16px; transition: .15s; }
.card:hover .card__link svg { transform: translateX(3px); }
.card__tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  background: var(--yellow); color: var(--blue-900); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px;
}

/* ---------- Offer tabs + pricing ---------- */
.tabs { display: inline-flex; background: var(--blue-50); padding: 5px; border-radius: 999px; gap: 4px; margin-top: 28px; }
.section--blue .tabs { background: rgba(255,255,255,.12); }
.tab {
  padding: 10px 22px; border-radius: 999px; border: 0; background: transparent; cursor: pointer;
  font-weight: 700; color: var(--ink-2); transition: .15s;
}
.section--blue .tab { color: rgba(255,255,255,.75); }
.tab.is-active { background: #fff; color: var(--blue-700); box-shadow: var(--shadow-sm); }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

/* ===== Switch FTTH / FWA animato ===== */
.tabs { position: relative; isolation: isolate; }
.tabs__ind {
  position: absolute; top: 5px; left: 5px; height: calc(100% - 10px); width: 0; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-sm); z-index: 0; pointer-events: none;
  transition: left .5s cubic-bezier(.3,1.35,.35,1), width .5s cubic-bezier(.3,1.35,.35,1);
}
.tabs__ind::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(100deg, transparent 30%, rgba(250,204,21,.55) 50%, transparent 70%);
  background-size: 250% 100%; background-position: 120% 0; opacity: 0;
}
.tabs__ind.is-landed::after { animation: ind-sweep .7s ease-out; }
@keyframes ind-sweep { 0% { opacity: 1; background-position: 120% 0; } 100% { opacity: 0; background-position: -120% 0; } }
.tabs.has-ind .tab { position: relative; z-index: 1; transition: color .25s; }
.tabs.has-ind .tab.is-active, .section--navy .tabs.has-ind .tab.is-active, .section--blue .tabs.has-ind .tab.is-active { background: transparent; box-shadow: none; }

.tab-panel.is-leaving { display: block; pointer-events: none; }
.tab-panel.is-leaving .k { animation: k-out .3s cubic-bezier(.5,0,.8,.4) both; animation-delay: calc(var(--n, 0) * 35ms); }
.tab-panel.is-entering .k { animation: k-in .6s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n, 0) * 80ms); }
@keyframes k-out { to { opacity: 0; transform: translateX(calc(var(--dx, 1) * -48px)) scale(.95); } }
@keyframes k-in { from { opacity: 0; transform: translateX(calc(var(--dx, 1) * 64px)) scale(.95); } }

.plans { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; margin-top: 44px; text-align: left; align-items: stretch; }
.plans > * { flex: 0 0 calc((100% - 66px) / 4); min-width: 0; } /* 4 per riga; una quinta card va centrata sotto */
/* 5 card in linea (wireless): tutto un po' più compatto */
@media (min-width: 1025px) {
  .plans--5 > * { flex-basis: calc((100% - 88px) / 5); }
  .plans--5 .k { padding: 22px 16px 18px; min-height: 0; gap: 10px; }
  .plans--5 .k__t { font-size: 17px; letter-spacing: -.01em; }
  .plans--5 .k__n { font-size: 40px; gap: 6px; }
  .plans--5 .k__n small { font-size: 11px; }
  .plans--5 .k__u { font-size: 20px; }
  .plans--5 .k__u small { font-size: 9px; }
  .plans--5 .k__p { gap: 6px; } .plans--5 .k__p b { font-size: 23px; white-space: nowrap; } .plans--5 .k__p span { font-size: 11px; white-space: nowrap; }
  .plans--5 .k__p .bol { width: 28px; height: 28px; }
  .plans--5 .k__d { font-size: 13px; min-height: 7.5em; } /* 5 righe fisse: card allineate */
  .plans--5 .k__ghost { font-size: 84px; top: -14px; right: -6px; }
  .plans--5 .k__btn { padding-left: 10px; padding-right: 10px; font-size: 14px; }
  .plans--5 .k__tag { top: 12px; right: 12px; }
}

/* ---------- Card offerte: outline nel colore dell'offerta + numero in filigrana ---------- */
@keyframes k-edge { 50% { opacity: 1; } }
@keyframes k-fade { from { opacity: 0; } }
.k {
  --c: 37,99,235;
  position: relative; overflow: hidden; border-radius: 24px;
  background: rgba(255,255,255,.03); color: #fff;
  border: 1.5px solid rgba(var(--c), .6); padding: 28px 24px 24px;
  display: grid; gap: 12px; align-content: end; min-height: 460px;
  box-shadow: inset 0 0 0 1px rgba(var(--c), .15), 0 0 40px -10px rgba(var(--c), .35);
  opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.k.in { opacity: 1; transform: none; }
.k > * { position: relative; }
.k__ghost { position: absolute; right: -10px; top: -22px; font-size: 128px; font-weight: 900; letter-spacing: -0.08em; line-height: 1; color: rgba(var(--c), .12); user-select: none; transition: transform .25s ease-out, color .3s; }
/* cinque cifre: più piccolo, così si legge anche l'1 */
.k--ultra .k__ghost, .k--ultraplus .k__ghost { font-size: 88px; top: -10px; right: -4px; }
.k.in .k__ghost { animation: k-fade 1.2s both; }
.k:hover .k__ghost { transform: translate(calc((var(--mx, .5) - .5) * -30px), calc((var(--my, .5) - .5) * -20px)); color: rgba(var(--c), .2); }
.k__t { font-size: 19px; letter-spacing: -.01em; text-transform: none; color: #fff; font-weight: 800; line-height: 1.15; }
.k__t > span:first-child { padding-bottom: 2px; border-bottom: 3px solid rgb(var(--c)); } /* sottolineatura nel colore dell'offerta */
.k__d { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.8); margin: 0; min-height: 4.5em; } /* 3 righe fisse: le card restano allineate */
.k__more { font-size: 13px; font-weight: 700; color: rgb(var(--c)); justify-self: start; }
.k__more:hover { text-decoration: underline; }
.k__n { font-size: 52px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; transition: .3s; white-space: nowrap; display: flex; align-items: flex-end; gap: 8px; }
/* contachilometri (vedi kCount in main.js): ogni cifra è una colonna mascherata alta 1em con dentro la striscia 0-9
   ripetuta; la striscia scorre verso l'alto fino alla cifra finale (--n posizioni), colonne a scalare da sinistra */
.k-digits { display: inline-flex; font-variant-numeric: tabular-nums; text-shadow: none; transition: filter .3s; }
/* l'alone al passaggio del mouse: col text-shadow verrebbe tagliato dalle colonne (overflow hidden) → quadrato; il filtro si applica all'insieme già ritagliato */
.k:hover .k-digits { filter: drop-shadow(0 0 9px rgba(var(--c), .8)) drop-shadow(0 0 20px rgba(var(--c), .4)); }
.k-digits i { display: block; height: 1em; overflow: hidden; font-style: normal; }
.k-digits i u { display: block; text-decoration: none; will-change: transform; animation: k-roll var(--t, 600ms) cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--d, 0ms) + var(--i) * var(--s, 50ms)); }
.k-digits i b { display: block; height: 1em; line-height: 1; font-weight: inherit; }
@keyframes k-roll { to { transform: translateY(calc(var(--n) * -1em)); } }
.k__n small { font-size: 12px; line-height: 1.1; letter-spacing: .02em; opacity: .75; font-weight: 600; padding-bottom: 3px; }
.k:hover .k__n { color: rgb(var(--c)); text-shadow: 0 0 18px rgba(var(--c), .8), 0 0 40px rgba(var(--c), .4); }
.k__u { font-size: 24px; font-weight: 900; letter-spacing: -0.05em; line-height: 1; opacity: .85; white-space: nowrap; margin-top: -2px; display: flex; align-items: flex-end; gap: 6px; } /* stesso stile del download, più piccolo */
.k__u small { font-size: 10px; line-height: 1.1; letter-spacing: .02em; opacity: .8; font-weight: 600; padding-bottom: 1px; }
.k__p { display: flex; justify-content: flex-start; gap: 8px; align-items: baseline; border-top: 1px solid rgba(255,255,255,.15); padding-top: 12px; margin-top: 4px; }
.k__p span { margin-right: auto; }
.k__p .bol { align-self: center; } /* bollino AGCOM a destra, sulla riga del prezzo */
.k__p b { font-size: 30px; font-weight: 800; } .k__p span { font-size: 13px; opacity: .7; }
.k__w { font-size: 12px; line-height: 17px; margin-top: -8px; min-height: 36px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 2px; }
.k__w1 { opacity: .6; min-height: 17px; } .k__w1 s { opacity: .8; } .k__w1 b { opacity: 1; color: #fff; }
.k__w2 { display: inline-flex; align-items: center; gap: 5px; color: var(--yellow); font-weight: 700; }
.k__w2 svg { width: 12px; height: 12px; flex-shrink: 0; }
.k__f { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; font-size: 13.5px; color: rgba(255,255,255,.82); }
.k__f li::before { content: "✓"; color: rgb(var(--c)); font-weight: 800; margin-right: 8px; }
.k__btn { width: 100%; margin-top: 6px; background: var(--yellow); color: #061231; }
.k__btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.k__btn--ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.3); margin-top: 0; }
.k__btn--ghost:hover { background: rgba(255,255,255,.08); filter: none; }
.k__tag { position: absolute; top: 16px; right: 16px; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; background: rgb(var(--c)); color: #061231; white-space: nowrap; }
.k__promo { position: absolute; top: 14px; right: -4px; transform: rotate(12deg); background: var(--yellow); color: #061231; font-size: 15px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; padding: 6px 12px; border-radius: 8px; box-shadow: 0 8px 18px -8px rgba(0,0,0,.7); }
.k:hover .k__promo { transform: rotate(16deg) scale(1.06); transition: transform .2s; }
.k__promo--new { background: #22c55e; color: #052e16; }
.k__promo--pick { text-align: center; line-height: 1.05; padding: 6px 12px 5px; }
.k__promo--pick small { display: block; font-size: 9px; font-weight: 800; letter-spacing: .14em; margin-top: 2px; opacity: .85; }
/* nota "a mano" sopra la card (esterna): Novità + freccia, stile lavagna */
.k-wrap { position: relative; display: grid; isolation: isolate; }
.k-wrap .k { height: 100%; }
/* bagliore che respira: fuori dalla card (che ha overflow hidden), solo opacità → composito, nessun ridisegno */
.k-wrap::after {
  content: ""; position: absolute; inset: 0; border-radius: 24px; z-index: -1; pointer-events: none;
  box-shadow: 0 0 70px -10px rgba(var(--c), .6); opacity: 0; will-change: opacity;
}
.k-wrap:has(.k.in)::after { animation: k-edge 3.2s ease-in-out infinite; }
/* durante il cambio Fibra/FWA l'aura si spegne subito e si riaccende solo a card entrata */
.tab-panel.is-leaving .k-wrap::after, .tab-panel.is-entering .k-wrap::after { animation: none; opacity: 0; }
.k-note {
  position: absolute; top: -84px; left: -34px; display: flex; align-items: flex-start; gap: 0;
  color: rgba(255,255,255,.95); pointer-events: none;
  filter: drop-shadow(0 0 1px rgba(255,255,255,.5)) drop-shadow(0 0 6px rgba(255,255,255,.25));
}
.k-note__txt {
  font-family: 'Caveat', 'Bradley Hand', 'Segoe Script', cursive; font-weight: 700; font-size: 46px; line-height: 1;
  transform: rotate(-12deg); letter-spacing: .02em; margin-top: 0;
}
.k-note__arrow { width: 96px; height: 72px; margin-top: 22px; margin-left: -8px; transform: rotate(8deg); }
/* animazione "scritta a mano": testo che si rivela a scatti, poi la freccia si traccia, poi la punta */
.k-note__txt { clip-path: inset(-20% 105% -20% -5%); }
.k-note__arrow path { stroke-dasharray: 150; stroke-dashoffset: 150; }
.k-note__arrow path:last-child { stroke-dasharray: 40; stroke-dashoffset: 40; }
.k-wrap:has(.k.in) .k-note__txt { animation: note-write .9s steps(14, end) .35s forwards; }
.k-wrap:has(.k.in) .k-note__arrow path:first-child { animation: note-draw .7s ease-in-out 1.3s forwards; }
.k-wrap:has(.k.in) .k-note__arrow path:last-child { animation: note-draw .3s ease-out 1.95s forwards; }
@keyframes note-write { to { clip-path: inset(-20% -10% -20% -5%); } }
@keyframes note-draw { to { stroke-dashoffset: 0; } }

/* colori per offerta */
.k--basic,     .k-wrap--basic     { --c: 14,165,233; }
.k--plus,      .k-wrap--plus      { --c: 37,99,235; }
.k--ultra,     .k-wrap--ultra     { --c: 124,58,237; }
.k--ultraplus, .k-wrap--ultraplus { --c: 245,158,11; }
.k--go,        .k-wrap--go        { --c: 20,184,166; }
.k--air,       .k-wrap--air       { --c: 6,182,212; }
.k--airplus,   .k-wrap--airplus   { --c: 34,197,94; }
.k--airultra,  .k-wrap--airultra  { --c: 249,115,22; }
.k--airmax,    .k-wrap--airmax    { --c: 219,39,119; }

/* tab e note su fondo blu notte */
.section--navy .tabs { background: rgba(255,255,255,.12); }
.section--navy .tab { color: rgba(255,255,255,.75); }
.section--navy .tab.is-active { background: #fff; color: var(--blue-700); }
.section--navy .note { color: rgba(255,255,255,.55); }
.section--navy-2 { background: #081736; }

.note { font-size: 13px; color: var(--ink-3); margin-top: 24px; text-align: center; }

/* ---------- Why us (feature grid) ---------- */
.why { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.features { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 36px; }
.feature { display: grid; gap: 8px; }
.feature__icon {
  width: 48px; height: 48px; border-radius: 14px; background: var(--blue-50); color: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.feature__icon svg { width: 24px; height: 24px; }
.feature b { font-size: 16px; }
.feature p { color: var(--ink-2); font-size: 14px; }
.why__visual {
  border-radius: var(--radius-lg); overflow: hidden; position: relative; min-height: 420px;
  background: linear-gradient(160deg, var(--blue-800), var(--blue-600));
  box-shadow: var(--shadow);
}
.why__visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.why__chip {
  position: absolute; background: #fff; color: var(--ink); border-radius: 14px; padding: 12px 16px;
  box-shadow: var(--shadow); display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 600;
}
.why__chip i {
  width: 32px; height: 32px; border-radius: 10px; background: var(--yellow-50); color: var(--yellow-600);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
}
.why__chip i svg { width: 18px; height: 18px; }
.why__chip span { display: block; font-size: 12px; color: var(--ink-2); font-weight: 500; }

/* ---------- Business band ---------- */
.band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.band > * { min-width: 0; }
.band__list { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; }
.band__list li { display: flex; gap: 12px; align-items: flex-start; color: rgba(255,255,255,.85); }
.band__list svg { width: 20px; height: 20px; color: var(--yellow); flex: none; margin-top: 2px; }
.band__cards { display: grid; gap: 16px; }
.band__card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  padding: 22px; display: flex; gap: 16px; align-items: flex-start; transition: .15s;
}
.band__card:hover { background: rgba(255,255,255,.13); }
.band__card i {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--yellow); color: var(--blue-900);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
}
.band__card i svg { width: 22px; height: 22px; }
.band__card b { display: block; font-size: 17px; }
.band__card p { color: rgba(255,255,255,.72); font-size: 14px; margin-top: 4px; }

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 44px; }
.steps--3 { grid-template-columns: repeat(3, 1fr); }
.steps > * { min-width: 0; }
.step { position: relative; padding: 26px; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--line); }
.step__n {
  width: 40px; height: 40px; border-radius: 12px; background: var(--blue-700); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 14px;
}
/* variante: numero in filigrana sullo sfondo, come le card offerte */
.steps--ghost .step { overflow: hidden; }
.steps--ghost .step__n {
  position: absolute; right: -6px; top: 50%; transform: translateY(-50%); width: auto; height: auto; margin: 0; border-radius: 0;
  background: none; color: rgba(37,99,235,.09); font-size: 120px; font-weight: 900; letter-spacing: -0.08em; line-height: 1;
  user-select: none; transition: color .3s, transform .3s ease-out;
}
.steps--ghost .step:hover .step__n { color: rgba(37,99,235,.16); transform: translate(-4px, -50%); }
.steps--ghost .step b, .steps--ghost .step p { position: relative; }
/* variante sezione assistenza: 2 colonne, icona + numero in filigrana */
.steps--assist { grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 32px; }
.steps--assist .step { padding: 22px; display: flex; flex-direction: column; }
.steps--assist .step__n { font-size: 96px; right: -4px; top: -14px; transform: none; }
.steps--assist .step:hover .step__n { transform: translateX(-4px); }
/* icona in filigrana in basso a sinistra, grande come il numero */
.steps--assist .feature__icon { position: absolute; left: -10px; bottom: -14px; width: 110px; height: 110px; margin: 0; border-radius: 0; background: none; color: rgba(37,99,235,.05); pointer-events: none; transition: color .3s, transform .3s ease-out; }
.steps--assist .feature__icon svg { width: 100%; height: 100%; stroke-width: 1.4; }
.steps--assist .step:hover .feature__icon { color: rgba(37,99,235,.09); transform: translateX(4px); }
.steps--assist .step { padding-bottom: 44px; min-height: 190px; }
.steps--assist .step b { font-size: 16px; }
.step b { display: block; font-size: 17px; margin-bottom: 6px; }
.step p { color: var(--ink-2); font-size: 14px; }

/* ---------- Testimonials ---------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 44px; }
.quote { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; display: grid; gap: 16px; }
.quote__stars { color: var(--yellow-600); letter-spacing: 2px; font-size: 14px; }
.quote p { color: var(--ink); font-size: 15px; }
.quote footer { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); }
.quote footer i {
  width: 38px; height: 38px; border-radius: 50%; background: var(--blue-100); color: var(--blue-700);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-style: normal;
}
.quote footer b { display: block; color: var(--ink); }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin: 40px auto 0; display: grid; gap: 10px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 0 22px; }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 0; font-weight: 700; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; color: var(--blue-600); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--ink-2); padding: 0 0 20px; font-size: 15px; }

/* ---------- Newsletter ---------- */
.newsletter {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center;
  background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-lg); padding: 48px;
}
.newsletter__list { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 10px; color: var(--ink-2); font-size: 15px; }
.newsletter__list li { display: flex; gap: 10px; align-items: flex-start; }
.newsletter__list svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 2px; }
.newsletter__fine { display: block; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.newsletter__form { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow-sm); }
.newsletter__form form { display: grid; gap: 14px; }
@media (max-width: 900px) { .newsletter { grid-template-columns: 1fr; padding: 28px; } }

/* ---------- CTA ---------- */
.cta {
  border-radius: var(--radius-lg); padding: 56px; color: #fff; position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--blue-700), var(--blue-600));
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center;
}
.cta::after {
  content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; right: -120px; top: -160px;
  background: rgba(250,204,21,.18); filter: blur(10px);
}
.cta h2 { font-size: clamp(26px, 3.4vw, 36px); font-weight: 800; }
.cta p { color: rgba(255,255,255,.8); margin-top: 10px; font-size: 17px; }
.cta__actions { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; position: relative; }

/* ---------- Page header (inner pages) ---------- */
.page-head {
  color: #fff; padding: 72px 0 64px; position: relative; overflow: hidden;
  background:
    radial-gradient(900px 400px at 90% 0%, rgba(37,99,235,.5), transparent 60%),
    linear-gradient(160deg, var(--blue-900), var(--blue-800) 70%, var(--blue-700));
}
.page-head h1 { font-size: clamp(34px, 4.8vw, 52px); font-weight: 800; max-width: 760px; }
.page-head .lead { color: rgba(255,255,255,.78); }
/* hero con foto: l'immagine è uno sfondo a tutta altezza sulla destra, sfumato nel blu verso il testo e verso il basso */
.page-head--split { min-height: 480px; display: flex; align-items: center; padding: 80px 0 72px; }
.page-head--split .container { width: 100%; }
.page-head--split .container > div:first-child { position: relative; z-index: 1; max-width: 600px; }
.page-head--split img {
  position: absolute; top: 0; right: 0; bottom: 0; width: 62%; height: 100%; object-fit: cover; object-position: center;
  opacity: .75; pointer-events: none; z-index: 0; animation: ph-img-in 1.4s cubic-bezier(.2,.8,.2,1) both;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 55%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 42%), linear-gradient(180deg, #000 55%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@keyframes ph-img-in { from { opacity: 0; transform: translateX(28px) scale(1.03); } to { opacity: .75; transform: none; } }
.page-head--split::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, var(--blue-900) 0%, rgba(11,30,74,.6) 38%, rgba(11,30,74,0) 65%); }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: start; }
.contact__info { display: grid; gap: 18px; margin-top: 28px; }
.info { display: flex; gap: 14px; align-items: flex-start; }
.info i {
  flex: none; width: 44px; height: 44px; border-radius: 12px; background: var(--blue-50); color: var(--blue-600);
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
}
.info i svg { width: 22px; height: 22px; }
.info b { display: block; font-size: 15px; }
.info span { color: var(--ink-2); font-size: 15px; }
.info a:hover { color: var(--blue-700); }
.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow-sm); }
.form-card form { display: grid; gap: 16px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink-2); }
.check input { margin-top: 3px; flex: none; }
.check > span { min-width: 0; }
.privacy { font-size: 12px; color: var(--ink-3); }
/* Mappa: segnaposto con caricamento al clic (consenso), poi l'iframe di Google Maps a riempire il riquadro */
.map {
  position: relative; margin-top: 28px; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 16/9; background: var(--blue-50) radial-gradient(circle at 70% 30%, rgba(37,99,235,.14), transparent 55%);
}
.map__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 20px; color: var(--ink); }
.map__ph svg { width: 32px; height: 32px; color: var(--blue-700); margin-bottom: 4px; }
.map__ph b { font-size: 16px; }
.map__ph span { font-size: 13px; color: var(--ink-2); }
.map__actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin-top: 10px; }
.map iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.map.is-loaded .map__ph { display: none; }

/* ---------- Footer ---------- */
.footer { background: var(--blue-900); color: rgba(255,255,255,.75); padding: 64px 0 28px; font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h4 { color: #fff; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 16px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer a:hover { color: #fff; }
.footer__brand img { height: 40px; filter: brightness(0) invert(1); }
.footer__brand p { margin-top: 16px; max-width: 320px; }
.footer__social { display: flex; gap: 10px; margin-top: 18px; }
.footer__social a {
  width: 38px; height: 38px; border-radius: 10px; background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
}
.footer__social a:hover { background: var(--blue-600); color: #fff; }
.footer__social svg { width: 18px; height: 18px; }
.footer__bottom {
  margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: rgba(255,255,255,.5);
}
.footer__bottom a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .header__cta .btn--ghost:not(.header__login) { display: none; }
  .logo img { height: 34px; }
  .nav { gap: 0; }
  .nav a { padding: 10px 9px; font-size: 14px; }
  .header .container { gap: 12px; }
}
@media (max-width: 1024px) {
  .plans > * { flex-basis: calc((100% - 22px) / 2); }
  .trust .container { grid-template-columns: repeat(2, 1fr); }
  .trust--3 .container { grid-template-columns: repeat(3, 1fr); } /* 3 riquadri restano in riga fino al mobile */
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav, .topbar { display: none; }
  .burger { display: inline-flex; margin-right: -10px; }
  .header__cta { gap: 6px; flex: none; }
  .header .container { gap: 8px; }
  .header__cta .btn--ghost { display: none; }
  .hero__grid, .why, .band, .contact, .cta, .highlights, .page-head--split .container { grid-template-columns: 1fr; }
  .cta__actions { justify-content: flex-start; }
  .cards-3, .quotes { grid-template-columns: 1fr; }
  .section { padding: 64px 0; }
  .hero { min-height: 0; }
  .hero .container { padding-top: 40px; padding-bottom: 48px; }
  .page-head--split { min-height: 0; padding: 64px 0 56px; }
  .page-head--split img { width: 100%; opacity: .35; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%, #000 70%, transparent 100%); }
  .page-head--split::after { background: linear-gradient(180deg, rgba(11,30,74,.55), rgba(11,30,74,.55)); }
}
@media (max-width: 600px) {
  .container { padding: 0 16px; }
  .features, .form-grid, .steps, .trust .container, .footer__grid { grid-template-columns: 1fr; }
  .plans > * { flex-basis: 100%; }
  .field--row { grid-template-columns: 1fr; }
  .cta { padding: 32px 24px; }
  .highlight { padding: 88px 24px 28px; min-height: 0; }
  .highlight__icon { left: 24px; top: 24px; }
  .hero__stats { gap: 20px; }
  .cover-card { padding: 20px; }
  .header .container { height: 64px; }
  .logo img { height: 34px; }
}
@media (max-width: 520px) {
  .header__cta .btn--yellow { padding: 10px 13px; }
  .header__cta .btn__txt { display: none; }
  .header__cta .btn__txt--short { display: inline; }
}

/* ---------- Pagina singola offerta ---------- */
.offer__head { padding-bottom: 72px; }
.offer__back { display: inline-block; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); margin-bottom: 18px; }
.offer__back:hover { color: #fff; }
.offer__head .eyebrow { color: rgb(var(--c)); }
.offer__hero { display: flex; gap: 40px; flex-wrap: wrap; margin-top: 32px; }
.offer__num b { display: block; font-size: clamp(40px, 5vw, 64px); font-weight: 900; letter-spacing: -0.04em; line-height: 1; color: rgb(var(--c)); }
.offer__num span { font-size: 13px; letter-spacing: .02em; color: rgba(255,255,255,.65); font-weight: 600; }
.offer__num--price b { color: #fff; }
.offer__pricenote { font-size: 13px; color: rgba(255,255,255,.65); margin-top: 6px; }
.offer__pricenote b { color: #fff; }
.offer__head .hero__actions { margin-top: 36px; }
.offer__aside { align-self: start; }
.offer__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; box-shadow: var(--shadow); border-top: 6px solid rgb(var(--c)); }
.offer__box-t { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 800; color: var(--ink-2); margin-bottom: 14px; }
.offer__box ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; }
.offer__box li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.offer__box li span { color: var(--ink-2); } .offer__box li b { text-align: right; }
.offer__tech { align-items: start; }
.offer__cmp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow-sm); min-width: 0; overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; font-size: 14px; }
.cmp th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.cmp td { padding: 11px 10px; border-bottom: 1px solid var(--line); }
.cmp td:first-child a { font-weight: 700; color: var(--blue-700); }
.cmp td small { color: var(--ink-3); font-size: 12px; }
.cmp tr.is-me td { background: rgba(var(--c), .1); font-weight: 700; }
.cmp tr.is-me td:first-child { border-left: 4px solid rgb(var(--c)); }
.offer__cmp-note { font-size: 12px; color: var(--ink-3); margin-top: 12px; }
.offer__cmp .csv__t td, .offer__cmp .csv__t th, .offer__cmp .csv__t td:first-child { white-space: normal; }
@media (max-width: 600px) { .offer__cmp { padding: 16px 14px; } .cmp { font-size: 12.5px; } .cmp th, .cmp td { padding: 8px 5px; } .cmp th { font-size: 10px; letter-spacing: .06em; } }
@media (max-width: 900px) { .offer__hero { gap: 24px; } }

/* ---------- Pagina "Il tuo ordine" ---------- */
.order { padding: 56px 0 88px; }
.order__top { max-width: 760px; }
.order__back { display: block; width: max-content; font-size: 14px; font-weight: 600; color: var(--blue-700); margin-bottom: 14px; }
.order__lead { margin-top: 8px; }
.order__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; margin-top: 32px; align-items: start; }
.order__main { display: grid; gap: 18px; }
.order__box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; }
.order__h { font-size: 17px; font-weight: 800; margin: 0 0 14px; }
.order__offer { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; border-left: 4px solid rgb(var(--c)); padding-left: 16px; }
.order__techlabel { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgb(var(--c)); }
.order__name { font-size: 26px; font-weight: 900; letter-spacing: -.03em; margin-top: 4px; }
.order__speeds { font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.order__note { font-size: 12px; color: var(--ink-3); margin-top: 4px; }
.order__price { text-align: right; white-space: nowrap; } .order__price b { font-size: 28px; font-weight: 800; } .order__price span { font-size: 13px; color: var(--ink-2); }
.order__change { display: inline-block; margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--blue-700); text-decoration: underline; text-underline-offset: 3px; }
.order__empty { color: var(--ink-2); } .order__empty a { color: var(--blue-700); font-weight: 700; }
.order__mode { display: inline-flex; background: var(--bg-soft); border: 1px solid var(--line); border-radius: 999px; padding: 3px; margin-bottom: 12px; }
.order__modebtn { display: grid; text-align: center; border: 0; background: transparent; padding: 6px 18px; border-radius: 999px; font: inherit; font-weight: 800; font-size: 13px; color: var(--ink-2); cursor: pointer; transition: .15s; }
.order__modebtn small { font-weight: 600; font-size: 10px; opacity: .8; }
.order__modebtn.is-on { background: var(--blue-700); color: #fff; }
.opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.opts[data-group="router"] { grid-template-columns: repeat(2, 1fr); } /* 4 tessere: due righe da due */
.opt { position: relative; display: grid; gap: 4px; padding: 14px 14px 12px 40px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; transition: .15s; background: #fff; }
.opt input { position: absolute; left: 14px; top: 16px; width: 16px; height: 16px; accent-color: var(--blue-700); margin: 0; }
.opt:hover { border-color: rgba(37,99,235,.5); }
.opt.is-on { border-color: var(--blue-700); background: var(--blue-50); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.opt__name { font-weight: 800; font-size: 15px; }
.opt__price { font-size: 12px; font-weight: 700; color: var(--blue-700); }
.opt__desc { font-size: 12.5px; color: var(--ink-2); line-height: 1.4; }
.order__form .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.order__consent { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-2); margin: 14px 0; }
.order__consent input { margin-top: 3px; accent-color: var(--blue-700); } .order__consent a { color: var(--blue-700); font-weight: 700; }
.order__form .hint { display: block; font-size: 12px; color: var(--ink-3); margin-top: 10px; text-align: center; }
.order__done { padding: 18px; border-radius: 12px; background: #e8f7ec; color: #1b5e2b; font-size: 15px; line-height: 1.5; } .order__done small { color: #2a6b3a; }
.order__side { position: sticky; top: 96px; }
.order__sum { background: var(--blue-900); color: #fff; border-radius: var(--radius-lg); padding: 24px; }
.order__sum .order__h { color: #fff; }
.order__addr { font-size: 13px; color: rgba(255,255,255,.7); margin: -6px 0 14px; }
.order__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.order__rows li { display: flex; justify-content: space-between; gap: 12px; } .order__rows b { font-weight: 700; }
.order__total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.2); }
.order__total b { font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: var(--yellow); }
/* numeri a scorrimento (odometro) */
.odn { display: inline-flex; align-items: flex-end; line-height: 1; font-variant-numeric: tabular-nums; }
.od { display: block; height: 1em; overflow: hidden; }
.od__strip { display: block; transition: transform .55s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.od__strip i { display: block; height: 1em; line-height: 1em; font-style: normal; }
.od__ch { display: block; height: 1em; line-height: 1em; }
.order__after { display: flex; justify-content: space-between; align-items: baseline; margin-top: 4px; font-size: 14px; color: rgba(255,255,255,.8); }
.order__after b { font-size: 18px; font-weight: 800; color: #fff; }
.order__price small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 500; margin-top: 2px; white-space: normal; max-width: 180px; }
.order__oncebox { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(255,255,255,.2); }
.order__once { display: flex; justify-content: space-between; font-size: 14px; color: rgba(255,255,255,.9); font-weight: 700; }
.order__once--row { font-weight: 400; font-size: 13px; color: rgba(255,255,255,.7); margin-top: 4px; padding-left: 10px; }
.order__fine { font-size: 12px; color: rgba(255,255,255,.55); margin: 12px 0 0; line-height: 1.4; }
/* mobile: le colonne non devono mai allargarsi oltre lo schermo (min-width:0 sugli elementi della griglia) */
.order__grid > * { min-width: 0; }
.order__box, .order__sum { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 900px) { .order__grid { grid-template-columns: minmax(0, 1fr); } .order__side { position: static; } .order__form .form-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .order { padding-top: 32px; } .order__offer { flex-direction: column; gap: 8px; } .order__price { text-align: left; white-space: normal; } .order__name { font-size: 24px; } .opts, .opts[data-group="router"] { grid-template-columns: 1fr; } .order__box { padding: 18px 16px; } .order__mode { display: flex; } .order__modebtn { flex: 1; padding: 6px 10px; } }

/* ---------- Carta dei servizi ---------- */
.csv { padding: 56px 0 88px; }
.csv__head { max-width: 760px; }
.csv__print { margin-top: 16px; }
.csv__toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; }
.csv__toc a { font-size: 13px; font-weight: 700; color: var(--blue-700); background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px; }
.csv__toc a:hover { border-color: var(--blue-600); }
.csv__sec { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; margin-top: 18px; scroll-margin-top: 110px; }
.csv__sec h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; }
.csv__d { color: var(--ink-2); font-size: 14px; margin: 0 0 14px; }
.csv__wrap { overflow-x: auto; }
.csv__t { width: 100%; border-collapse: collapse; font-size: 14px; }
.csv__t th { text-align: left; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.csv__t td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.csv__t tr:last-child td { border-bottom: 0; }
.csv__t td:first-child { font-weight: 700; white-space: nowrap; }
.csv__note { font-size: 12px; color: var(--ink-3); margin: 10px 0 0; }
.csv__foot { font-size: 12px; color: var(--ink-3); margin-top: 24px; }
@media print {
  .topbar, .header, .ticker, .footer, .csv__print, .csv__toc, .scroll-hint { display: none !important; }
  .csv { padding: 0; background: #fff; } .csv__sec { break-inside: avoid; border-color: #ccc; }
}

/* ---------- Reveal allo scroll (home) ---------- */
.rv { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--rd, 0ms); }
.rv--left { transform: translateX(-32px); }
.rv--right { transform: translateX(32px); }
.rv--scale { transform: scale(.94); }
.rv.rv-in { opacity: 1; transform: none; }
.rv-in .rv-pop { animation: rv-pop .6s cubic-bezier(.2,.9,.3,1.35) both; animation-delay: calc(var(--rd, 0ms) + 220ms); }
@keyframes rv-pop { from { opacity: 0; transform: scale(.4) rotate(-8deg); } to { opacity: 1; transform: none; } }

.forever { display: inline-flex; align-items: center; gap: 10px; margin: 14px auto 6px; padding: 10px 16px; border-radius: 999px; background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.35); color: rgba(255,255,255,.85); font-size: 14px; line-height: 1.4; max-width: 760px; text-align: left; }
.forever svg { width: 18px; height: 18px; color: var(--yellow); flex-shrink: 0; }
.forever b { color: var(--yellow); }
.offer__pricenote--forever { display: inline-flex; align-items: center; gap: 6px; color: var(--yellow); font-weight: 700; }
.offer__pricenote--forever svg { width: 13px; height: 13px; }
.cov__forever { font-style: normal; font-weight: 700; color: #15803d; }
.order__forever { display: block; color: #15803d; font-weight: 700; }
@media (max-width: 600px) { .forever { border-radius: 16px; } }
/* card compatte (5 per fila): etichetta Promo/Novità più piccola e nell'angolo, così non copre il nome */
.plans--5 .k__promo { top: 10px; right: -6px; font-size: 11px; padding: 4px 9px; letter-spacing: .08em; }
.plans--5 .k__t { padding-right: 56px; }
.plans--5 .k__t > span:first-child { font-size: 17px; }
.footer__legal { font-size: 12px; line-height: 1.6; max-width: 640px; }
.footer .todo { background: rgba(250,204,21,.18); border-color: rgba(250,204,21,.5); color: var(--yellow); }
.ttf__t td:first-child { white-space: normal; width: 34%; color: var(--ink-2); font-weight: 600; }
/* autocomplete indirizzo */
.field--ac { position: relative; }
.ac { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 40px -16px rgba(6,18,49,.35); overflow: hidden; text-align: left; }
.ac__item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 14px; color: var(--ink); cursor: pointer; border-bottom: 1px solid var(--line); }
.ac__item:last-child { border-bottom: 0; }
.ac__item svg { width: 16px; height: 16px; color: var(--blue-600); flex-shrink: 0; }
.ac__item small { margin-left: auto; font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.ac__item:hover, .ac__item.is-active { background: var(--blue-50); }
/* selettore lingua */
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(255,255,255,.25); color: inherit; border-radius: 999px; padding: 3px 10px 3px 8px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.lang__btn svg { width: 14px; height: 14px; } .lang__btn:hover { border-color: rgba(255,255,255,.6); color: #fff; }
.lang__menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; list-style: none; margin: 0; padding: 6px; min-width: 150px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 40px -16px rgba(6,18,49,.35); }
.lang__menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 14px; color: var(--ink); cursor: pointer; }
.lang__menu button:hover, .lang__menu button.is-on { background: var(--blue-50); color: var(--blue-700); font-weight: 700; }
/* avviso lingua: browser in una lingua che non abbiamo → pagina in italiano + proposta inglese */
.lang-pop { position: fixed; left: auto; right: 16px; bottom: 16px; z-index: 90; width: calc(100% - 32px); max-width: 440px; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; box-shadow: 0 24px 50px -18px rgba(6,18,49,.45); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; opacity: 0; transform: translateY(12px); transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); }
.lang-pop.is-in { opacity: 1; transform: none; }
.lang-pop p { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; flex: 1 1 260px; }
.lang-pop p svg { width: 18px; height: 18px; flex: none; color: var(--blue-700); }
.lang-pop__btns { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 1100px) { .lang-pop { top: var(--pop-top, 12px); bottom: auto; left: 12px; right: 12px; width: auto; margin: 0 auto; transform: translateY(-12px); } .lang-pop.is-in { transform: none; } } /* sotto 1100px sta in alto, così non si sovrappone al banner cookie */
/* scelta lingua nel menu a hamburger (sfondo bianco) */
.lang-row { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 14px; color: var(--ink-3); }
.lang-row svg { width: 16px; height: 16px; margin-right: 4px; }
.lang-row button { background: #fff; border: 1px solid var(--line); color: var(--ink-2); border-radius: 999px; padding: 5px 11px; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.lang-row button:hover { border-color: var(--blue-600); color: var(--blue-700); }
.lang-row button.is-on { background: var(--blue-700); color: #fff; border-color: var(--blue-700); }

/* ---------- Ordine: dati per il contratto ---------- */
.order__sub { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); margin: 20px 0 10px; }
.ctype { display: flex; gap: 8px; margin-bottom: 14px; }
.ctype label { position: relative; flex: 1; text-align: center; padding: 11px 10px; border: 1.5px solid var(--line); border-radius: 12px; font-weight: 700; font-size: 14px; cursor: pointer; background: #fff; transition: .15s; }
.ctype label.is-on { border-color: var(--blue-700); background: var(--blue-50); color: var(--blue-700); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.ctype input { position: absolute; opacity: 0; width: 0; height: 0; }
.opts--pay { grid-template-columns: 1fr 1fr; }
.field--full { grid-column: 1 / -1; }
.order__vat { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: rgba(255,255,255,.6); margin-top: 4px; }
.order__vat b { font-weight: 600; color: rgba(255,255,255,.8); text-align: right; }
.cb__tot small + small { display: block; }

/* ---------- Proposta di contratto ---------- */
.ctr__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.ctr__bar .order__back { margin: 0; }
.ctr__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ctr__msg { max-width: 860px; margin: 0 auto 14px; text-align: center; }
.ctr__empty { max-width: 860px; margin: 0 auto; padding: 24px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.doc { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); max-width: 860px; margin: 0 auto; padding: 36px 40px; color: #1a2238; font-size: 14px; line-height: 1.5; }
.doc table.pg { width: 100%; border-collapse: collapse; table-layout: fixed; } .doc table.pg > thead > tr > td, .doc table.pg > tbody > tr > td, .doc table.pg > tfoot > tr > td { padding: 0; }
.doc .lh { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1.5px solid #0b1e4a; padding: 0 0 14px; margin-bottom: 22px; }
.doc .lh img { height: 46px; width: auto; } .doc .lh .co { text-align: right; font-size: 11px; line-height: 1.35; color: #3b4664; } .doc .lh .co b { display: block; font-size: 13px; color: #0b1e4a; }
.doc .lf { border-top: 1px solid #c9d0e0; margin-top: 24px; padding-top: 8px; font-size: 10.5px; color: #5b6580; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .doc .lf span { min-width: 0; }
.doc h1 { font-size: 24px; margin: 2px 0 4px; color: #0b1e4a; letter-spacing: -.01em; line-height: 1.15; }
.doc h2 { font-size: 15px; margin: 22px 0 8px; color: #0b1e4a; }
.doc h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #5b6580; margin: 0 0 6px; }
.doc p { margin: 0 0 8px; } .doc ul { margin: 0 0 8px; padding-left: 18px; }
.doc .legal__draft { display: inline-block; background: #fff8db; border: 1px solid #e6c84a; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: #6b4f00; margin: 10px 0 4px; }
.doc .legal__box { border: 1px solid #c9d0e0; border-radius: 8px; padding: 12px 14px; background: #f6f8fc; }
.ctr__head { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; } .ctr__head p { color: #3b4664; }
.ctr__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--blue-700); }
.ctr__num { text-align: right; flex: none; } .ctr__num b { display: block; font-size: 16px; color: #0b1e4a; } .ctr__num span { display: block; } .ctr__num small { display: block; font-size: 10.5px; color: #5b6580; max-width: 220px; margin-top: 4px; }
.ctr__parties { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0 4px; }
.ctr__party { border: 1px solid #c9d0e0; border-radius: 8px; padding: 12px 14px; background: #f6f8fc; font-size: 13px; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
.ctr__party b { display: block; font-size: 14px; color: #0b1e4a; margin-bottom: 2px; }
.doc .legal__t { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.ctr__t { font-size: 13px; } .ctr__t td { border: 1px solid #c9d0e0; padding: 7px 10px; vertical-align: top; }
.ctr__t td:first-child { width: 34%; font-weight: 700; background: #f6f8fc; color: #0b1e4a; }
.ctr__t th { text-align: left; border: 1px solid #c9d0e0; padding: 6px 10px; background: #eef2fa; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #3b4664; }
.ctr__t .n, .ctr__t th.n { text-align: right; white-space: nowrap; }
.ctr__t--money td:first-child { width: auto; font-weight: 400; background: #fff; color: inherit; }
.ctr__t--ex .n, .ctr__t--ex th.n { white-space: normal; } .ctr__t--ex th, .ctr__t--ex td { font-size: 11.5px; padding: 6px 7px; }
.ctr__t tr.tot td { font-weight: 800; background: #f6f8fc; color: #0b1e4a; } .ctr__t tr.vat td { color: #5b6580; font-size: 12px; background: #fff; font-weight: 400; }
.ctr__bol .bol { vertical-align: middle; width: 26px; height: 26px; margin-left: 4px; }
.ctr__note, .ctr__small { font-size: 12.5px; color: #3b4664; }
.ctr__checks { list-style: none; padding: 0 !important; } .ctr__checks li { margin-bottom: 6px; }
.ctr__sign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 18px 0 6px; } .ctr__sign--one { grid-template-columns: 1fr 1fr; }
.ctr__sign div { display: grid; gap: 6px; align-content: end; } .ctr__sign span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #5b6580; }
.ctr__sign i { display: block; height: 44px; border-bottom: 1px solid #1a2238; font-style: normal; line-height: 44px; }
@media (max-width: 600px) { .doc { padding: 20px 16px; } .ctr__parties, .ctr__sign, .ctr__sign--one, .opts--pay { grid-template-columns: 1fr; } .ctr__head { flex-direction: column; } .ctr__num { text-align: left; } .ctr__t td:first-child { width: 40%; } .doc .lh { flex-direction: column; align-items: flex-start; } .doc .lh .co { text-align: left; } }
@media print {
  .topbar, .header, .ticker, .mobile-nav, .footer, .ctr__bar, .ctr__msg, .ck, .ckm, .lang, .cov-backdrop { display: none !important; }
  .ctr { padding: 0 !important; background: #fff !important; } .ctr .container { padding: 0; max-width: none; }
  .doc { box-shadow: none; border: 0; max-width: none; padding: 0; border-radius: 0; font-size: 10.5pt; }
  .doc table.pg > thead { display: table-header-group; } .doc table.pg > tfoot { display: table-footer-group; }
  .doc h2 { break-after: avoid; page-break-after: avoid; } .ctr__t tr, .ctr__party, .ctr__sign, .doc .legal__box { break-inside: avoid; page-break-inside: avoid; }
  .doc .legal__draft { display: none; }
  .rv { opacity: 1 !important; transform: none !important; }
  @page { size: A4; margin: 12mm 14mm; }
}



/* bottone Area clienti nell'header: testo su desktop largo, solo icona quando lo spazio manca */
.header__login { display: inline-flex; align-items: center; gap: 7px; }
.header__login svg { width: 16px; height: 16px; }
@media (max-width: 1180px) { .header__login { padding: 9px 10px; } .header__login span { display: none; } }
@media (max-width: 520px) { .header__login { padding: 8px 9px; } }

/* ---------- Area clienti ---------- */
[hidden] { display: none !important; }
.topbar__ac { font-weight: 700; }
.acc-page { background: #eef2fb; padding: 40px 0 72px; min-height: 60vh; }
.acc-login { max-width: 480px; margin: 24px auto; }
.acc-login__card { background: #fff; border-radius: 24px; padding: 32px; box-shadow: 0 24px 60px -30px rgba(11,30,74,.35); display: grid; gap: 14px; }
.acc-login__card form { display: grid; gap: 12px; }
.acc-login__sent { font-size: 14px; color: var(--ink-2); margin: 0; } .acc-login__err { color: #b91c1c; font-size: 13px; font-weight: 600; margin: 0; }
/* testata con saluto + tab a pillole */
.acc-hero { margin: -40px 0 24px; padding: 28px 0 0; background: linear-gradient(135deg, #0b1e4a 0%, #1e40af 60%, #2563eb 100%); color: #fff; }
.acc-hero__in { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.acc-hero__who { display: flex; gap: 14px; align-items: center; min-width: 0; }
.acc-hero__who b { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; } .acc-hero__who small { display: block; color: rgba(255,255,255,.65); font-size: 13px; margin-top: 2px; }
.acc-hero__hi { display: block; font-size: 13px; color: rgba(255,255,255,.75); margin-bottom: 2px; }
.acc__avatar { width: 52px; height: 52px; border-radius: 16px; background: var(--yellow); color: #061231; font-weight: 900; font-size: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.acc-hero__right { display: flex; align-items: center; gap: 12px; }
.acc-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); font-size: 13px; font-weight: 700; }
.acc-status i { width: 9px; height: 9px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: acc-pulse 2s infinite; } .acc-status--wait i { background: #fbbf24; animation: none; }
@keyframes acc-pulse { 0% { box-shadow: 0 0 0 0 rgba(74,222,128,.6); } 70% { box-shadow: 0 0 0 8px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.acc-logout { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid rgba(255,255,255,.3); color: #fff; border-radius: 999px; padding: 8px 12px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .acc-logout svg { width: 16px; height: 16px; } .acc-logout:hover { background: rgba(255,255,255,.12); }
.acc-tabs { display: flex; gap: 6px; margin-top: 22px; overflow-x: auto; padding-bottom: 14px; scrollbar-width: none; } .acc-tabs::-webkit-scrollbar { display: none; }
.acc-tabs button { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; flex: none; background: rgba(255,255,255,.08); border: 1px solid transparent; color: rgba(255,255,255,.8); border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; transition: .15s; }
.acc-tabs button svg { width: 16px; height: 16px; } .acc-tabs button:hover { background: rgba(255,255,255,.16); color: #fff; } .acc-tabs button.is-on { background: #fff; color: var(--blue-700); }
.acc-main { display: block; }
.acc__h { font-size: 24px; font-weight: 800; margin: 0 0 6px; letter-spacing: -.01em; } .acc__p { color: var(--ink-2); margin: 0 0 16px; }
.acc-sub { font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin: 26px 0 12px; }
.acc__grid { display: grid; gap: 16px; } .acc__grid--2 { grid-template-columns: 1fr 1fr; } .acc__grid--3 { grid-template-columns: repeat(3, 1fr); }
.acc-card { background: #fff; border-radius: 20px; padding: 22px 24px; min-width: 0; overflow-wrap: anywhere; box-shadow: 0 10px 30px -22px rgba(11,30,74,.35); } .acc-card h3 { font-size: 15px; font-weight: 800; margin: 0 0 10px; } .acc-card__h2 { margin-top: 18px !important; }
.acc-card .field { margin-bottom: 10px; } .acc-card--wide { grid-column: 1 / -1; }
/* home: card linea + tile */
.acc-grid--home { grid-template-columns: 1.6fr 1fr; grid-template-rows: auto auto; }
.acc-line { grid-row: 1 / 3; position: relative; overflow: hidden; border-radius: 24px; padding: 26px 28px; color: #fff; background: radial-gradient(120% 90% at 100% 0%, rgba(250,204,21,.28), transparent 55%), linear-gradient(135deg, #0b1e4a, #1d3f9a 60%, #2563eb); box-shadow: 0 20px 50px -28px rgba(11,30,74,.6); }
.acc-line__top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 14px; } .acc-line__top .bol { width: 30px; height: 30px; }
.acc-chip { display: inline-block; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.14); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .acc-chip--lock { background: var(--yellow); color: #061231; }
.acc-line__name { font-size: 34px; font-weight: 900; letter-spacing: -.03em; margin: 0; line-height: 1; } .acc-line__addr { margin: 6px 0 20px; color: rgba(255,255,255,.72); font-size: 14px; }
.acc-bars { display: grid; gap: 12px; } .acc-bar { display: grid; grid-template-columns: 76px 1fr auto; gap: 12px; align-items: center; font-size: 13px; }
.acc-bar span { color: rgba(255,255,255,.72); } .acc-bar b { font-weight: 800; white-space: nowrap; }
.acc-bar i { display: block; height: 10px; border-radius: 999px; background: rgba(255,255,255,.14); overflow: hidden; } .acc-bar i::before { content: ""; display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: linear-gradient(90deg, #facc15, #fde68a); transition: width 1.1s cubic-bezier(.2,.8,.2,1); }
.acc-line__foot { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 22px; }
.acc-tile { background: #fff; border-radius: 20px; padding: 20px 22px; display: grid; gap: 4px; align-content: start; box-shadow: 0 10px 30px -22px rgba(11,30,74,.35); position: relative; }
.acc-tile__k { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .acc-tile__v { font-size: 30px; font-weight: 900; letter-spacing: -.03em; color: var(--ink); line-height: 1.1; } .acc-tile__v--ok { color: #15803d; }
.acc-tile small { color: var(--ink-2); font-size: 13px; } .acc-tile a, .acc-tile button.acc-link { justify-self: start; margin-top: 8px; background: none; border: 0; padding: 0; font: inherit; font-size: 13px; font-weight: 700; color: var(--blue-700); cursor: pointer; }
.acc-tile--net::after { content: ""; position: absolute; right: 18px; top: 18px; width: 12px; height: 12px; border-radius: 50%; background: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.18); }
/* azioni rapide */
.acc-actions6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.acc-action { display: flex; gap: 14px; align-items: center; text-align: left; background: #fff; border: 0; border-radius: 18px; padding: 16px 18px; font: inherit; cursor: pointer; box-shadow: 0 10px 30px -24px rgba(11,30,74,.35); transition: transform .15s, box-shadow .15s; color: var(--ink); }
.acc-action:hover { transform: translateY(-2px); box-shadow: 0 16px 34px -22px rgba(11,30,74,.45); }
.acc-action i { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; flex: none; color: var(--blue-700); background: var(--blue-50); } .acc-action i svg { width: 22px; height: 22px; }
.acc-action--bill i { color: #7c3aed; background: #f3e8ff; } .acc-action--help i { color: #b45309; background: #fff4d6; } .acc-action--router i { color: #0e7490; background: #e0f2fe; } .acc-action--doc i { color: #15803d; background: #e8f7ec; } .acc-action--user i { color: #be185d; background: #fce7f3; } .acc-action--exit i { color: #475569; background: #f1f5f9; }
.acc-action b { display: block; font-size: 15px; } .acc-action small { color: var(--ink-3); font-size: 12.5px; }
/* scadenze */
.acc-timeline { background: #fff; border-radius: 20px; padding: 6px 24px; box-shadow: 0 10px 30px -22px rgba(11,30,74,.35); }
.acc-tl { display: grid; grid-template-columns: 28px 1fr auto; gap: 14px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); } .acc-tl:last-child { border: 0; }
.acc-tl i { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--blue-50); color: var(--blue-700); } .acc-tl i svg { width: 15px; height: 15px; } .acc-tl--done i { background: #e8f7ec; color: #15803d; }
.acc-tl b { display: block; font-size: 15px; } .acc-tl small { color: var(--ink-3); font-size: 13px; } .acc-tl .d { font-weight: 800; white-space: nowrap; }
.acc-prog { height: 8px; border-radius: 999px; background: #eef2fb; margin-top: 8px; overflow: hidden; } .acc-prog::before { content: ""; display: block; height: 100%; width: var(--p, 0%); background: linear-gradient(90deg, var(--blue-600), #60a5fa); border-radius: inherit; }
/* liste e tabelle */
.acc-kv { display: grid; gap: 8px; font-size: 14px; } .acc-kv div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 8px; } .acc-kv div:last-child { border: 0; padding-bottom: 0; } .acc-kv span { color: var(--ink-3); } .acc-kv b { text-align: right; }
.acc-muted { color: var(--ink-3); font-size: 13px; margin: 6px 0 0; }
.acc__list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-2); } .acc__list li { margin-bottom: 6px; }
.acc-tk { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; font-size: 14px; margin-bottom: 8px; } .acc-tk b { display: block; } .acc-tk small { color: var(--ink-3); }
.acc-pill { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: #e8f7ec; color: #1b5e2b; white-space: nowrap; } .acc-pill--wait { background: #fff4d6; color: #8a5a00; } .acc-pill--ask { background: #e3f0ff; color: #0b4a9c; } .acc-pill--done { background: #ececec; color: #555; }
.acc__docs a { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-weight: 600; color: var(--blue-700); } .acc__docs a:last-child { border: 0; } .acc__docs a span { color: var(--ink-3); font-weight: 400; font-size: 13px; }
.acc-card .csv__t td:first-child { white-space: normal; }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acc-ok { padding: 12px 14px; border-radius: 12px; background: #e8f7ec; color: #1b5e2b; font-size: 14px; margin-top: 10px; }
.acc-action--up i { color: #4f46e5; background: #eef2ff; }
.acc-tl--note i { background: #fff4d6; color: #b45309; }
/* avviso di fine periodo minimo: compare solo negli ultimi 60 giorni */
.acc-notice { background: #fff4d6; border-left: 4px solid #f59e0b; border-radius: 12px; padding: 12px 14px; font-size: 14px; margin-top: 14px; color: var(--ink); line-height: 1.5; } .acc-notice b { display: block; margin-bottom: 2px; }
.acc-exitlink { margin-top: 14px; } .acc-exitlink button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--blue-700); cursor: pointer; } .acc-exitlink button:hover { text-decoration: underline; }
.acc-ups { display: grid; gap: 8px; } .acc-up { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; } .acc-up b { display: block; font-size: 14px; } .acc-up small { color: var(--ink-3); font-size: 12.5px; } .acc-up .btn { flex: none; }
/* popup del recesso */
body.acc-modal-open { overflow: hidden; }
.acc-modal { position: fixed; inset: 0; z-index: 95; background: rgba(6,18,49,.55); display: flex; align-items: center; justify-content: center; padding: 16px; backdrop-filter: blur(2px); } .acc-modal[hidden] { display: none; }
.acc-modal__box { position: relative; background: #fff; color: var(--ink); border-radius: 20px; width: 100%; max-width: 600px; max-height: calc(100vh - 32px); overflow: auto; padding: 26px 28px; box-shadow: 0 30px 70px -20px rgba(6,18,49,.6); animation: acc-modal-in .25s cubic-bezier(.2,.8,.2,1); }
@keyframes acc-modal-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.acc-modal__x { position: absolute; top: 10px; right: 14px; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; color: var(--ink-3); } .acc-modal__x:hover { color: var(--ink); }
.acc-modal__eyebrow { display: block; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.acc-modal__box h3 { font-size: 20px; font-weight: 800; margin: 4px 0 14px; letter-spacing: -.01em; }
.acc-modal__sec { border-top: 1px solid var(--line); padding: 14px 0; } .acc-modal__sec h4 { margin: 0 0 8px; font-size: 14px; font-weight: 800; } .acc-modal__sec p { margin: 0 0 8px; font-size: 14px; } .acc-modal__sec .acc-prog { margin: 2px 0 8px; } .acc-modal__sec .acc-muted { margin-top: 8px; }
.acc-modal__alt { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .acc-modal__alt > * { display: block; text-align: left; border: 1px solid var(--blue-100); border-radius: 12px; padding: 10px 12px; background: var(--blue-50); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; transition: .15s; } .acc-modal__alt > *:hover { background: #fff; border-color: var(--blue-600); } .acc-modal__alt b { display: block; font-size: 14px; color: var(--blue-700); } .acc-modal__alt small { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; display: block; }
.acc-modal__foot { display: flex; justify-content: flex-end; gap: 8px; border-top: 1px solid var(--line); padding-top: 14px; }
@media (max-width: 600px) { .acc-modal__alt { grid-template-columns: 1fr; } .acc-modal__box { padding: 20px 18px; } .acc-modal__foot { flex-direction: column-reverse; } .acc-modal__foot .btn { width: 100%; } .acc-up { flex-direction: column; align-items: stretch; } }
@media (max-width: 900px) { .acc__grid--2, .acc__grid--3, .acc-grid--home { grid-template-columns: 1fr; } .acc-line { grid-row: auto; } .acc-actions6 { grid-template-columns: 1fr 1fr; } .acc-login__card { padding: 22px; } .acc-hero__who b { font-size: 20px; } .acc-line__name { font-size: 28px; } }
@media (max-width: 600px) { .acc-actions6 { grid-template-columns: 1fr; } .acc-hero__right { width: 100%; justify-content: space-between; } .acc-tl { grid-template-columns: 28px 1fr; } .acc-tl .d { grid-column: 2; } }

/* ---------- Bollini AGCOM (delibera 292/18/CONS, aggiornata dalla 207/26/CONS) ----------
   cerchio pieno, sigla e sottotitolo in bianco; colori Pantone 361 (verde F), 137 (giallo FR / FWA), 192 (rosso), 2132 (blu VHCN) */
.bol { display: inline-block; width: 54px; height: 54px; flex-shrink: 0; vertical-align: middle; overflow: visible; filter: drop-shadow(0 1px 3px rgba(6,18,49,.2)); }
.bol circle { fill: currentColor; }
.bol--f { color: #00A651; } .bol--fr, .bol--fwa { color: #FFA300; } .bol--r { color: #E4002B; } .bol--vhcn { color: #0A5DB5; }
.bol--sm { width: 38px; height: 38px; }
.bol--xs { width: 32px; height: 32px; }
.bol--lg { width: 80px; height: 80px; }
.k__t { display: flex; align-items: center; justify-content: flex-start; gap: 10px; }

.bol-line { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ink-2); line-height: 1.35; margin-bottom: 14px; }
.bol-line b { color: var(--ink); display: block; }
.bol-line > span { min-width: 0; flex: 1; }
.bol-line .bol { flex: none; }
.bol-line a { color: var(--blue-700); font-weight: 600; }
.offer__bol { display: flex; align-items: center; gap: 14px; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.35; max-width: 320px; }
.offer__bol b { color: #fff; display: block; font-size: 14px; margin-bottom: 2px; }
.offer__bol a { display: block; color: var(--yellow); font-weight: 600; margin-top: 4px; }
.note__tt { display: inline-block; margin-top: 6px; font-weight: 700; color: var(--blue-700); }
.cov__head > .bol { order: -1; }
.cov__offer > .bol { position: absolute; top: 10px; right: 10px; }
.cov__offer .cov__tag { right: 56px; }
.order__techlabel .bol { vertical-align: middle; margin-right: 8px; }
.cb__colh .bol { margin-right: 4px; }
.todo { color: #7a5a00; background: #fff8db; border: 1px solid rgba(250,204,21,.6); border-radius: 6px; padding: 1px 7px; font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; }
/* scheda "Caratteristiche tecniche" nelle pagine offerta */
.sheet { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.sheet__note { font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.sheet__note a { color: var(--blue-700); font-weight: 600; }
.sheet__t td:first-child { white-space: normal; color: var(--ink-2); font-weight: 600; width: 46%; }
.sheet__t td .bol { vertical-align: middle; margin-right: 8px; }
/* pagina di trasparenza tecnica */
.tt__legend { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin: 8px 0 28px; }
.tt__leg { display: flex; gap: 14px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.tt__leg b { display: block; color: var(--ink); margin-bottom: 4px; }
.tt__others { font-size: 13px; color: var(--ink-3); margin: -12px 0 28px; }
.tt__t td .bol { vertical-align: middle; }
@media (max-width: 900px) { .sheet, .tt__legend { grid-template-columns: 1fr; } }

/* ---------- Consenso cookie (GDPR) ---------- */
.ck { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 90; max-width: 560px; background: #fff; color: var(--ink); border-radius: var(--radius-lg); box-shadow: 0 30px 60px -20px rgba(6,18,49,.45); border: 1px solid var(--line); padding: 20px 22px; transform: translateY(24px); opacity: 0; transition: transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s; }
.ck.is-on { transform: none; opacity: 1; }
.ck__t { font-size: 16px; font-weight: 800; margin: 0 0 6px; }
.ck__p { font-size: 13.5px; color: var(--ink-2); margin: 0 0 14px; line-height: 1.5; }
.ck__p a { color: var(--blue-700); font-weight: 700; }
.ck__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.ck__btns .btn { padding: 10px 16px; font-size: 14px; }
.ck__btns .btn--link { background: none; color: var(--blue-700); padding-left: 6px; padding-right: 6px; }
.ckm { position: fixed; inset: 0; z-index: 91; background: rgba(6,18,49,.55); display: none; align-items: center; justify-content: center; padding: 16px; }
.ckm.is-on { display: flex; }
.ckm__box { background: #fff; color: var(--ink); width: min(620px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: 0 30px 60px -20px rgba(6,18,49,.5); }
.ckm__box h2 { font-size: 20px; font-weight: 800; margin: 0 0 6px; }
.ckm__box > p { font-size: 14px; color: var(--ink-2); margin: 0 0 16px; }
.ckm__box > p a { color: var(--blue-700); font-weight: 700; }
.ckc { display: grid; gap: 10px; }
.ckc__row { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.ckc__row b { display: block; font-size: 15px; }
.ckc__row span { display: block; font-size: 13px; color: var(--ink-2); margin-top: 2px; line-height: 1.45; }
.ckc__row small { display: inline-block; margin-top: 6px; font-size: 11px; font-weight: 700; color: var(--ink-3); letter-spacing: .06em; text-transform: uppercase; }
.sw { position: relative; width: 46px; height: 26px; flex: none; }
.sw input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.sw i { position: absolute; inset: 0; border-radius: 999px; background: #cbd5e1; transition: background .2s; }
.sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.sw input:checked + i { background: var(--blue-700); }
.sw input:checked + i::after { transform: translateX(20px); }
.sw input:disabled + i { background: #22c55e; opacity: .7; cursor: not-allowed; }
.ckm__btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: 18px; }
.ckm__btns .btn { padding: 10px 16px; font-size: 14px; }
body.ck-open { overflow: hidden; }
@media (max-width: 600px) { .ck { left: 10px; right: 10px; bottom: 10px; padding: 16px; } .ck__btns .btn { flex: 1 1 auto; justify-content: center; } }
/* pagine legali */
.legal .container { max-width: 860px; }
.legal h2 { font-size: 20px; font-weight: 800; margin: 28px 0 8px; }
.legal p, .legal li { font-size: 15px; line-height: 1.6; color: var(--ink-2); }
.legal ul { padding-left: 20px; margin: 8px 0; }
.legal a { color: var(--blue-700); font-weight: 600; }
.legal__box { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; margin-top: 18px; }
.legal__draft { display: inline-block; background: #fff8db; border: 1px solid rgba(250,204,21,.6); border-radius: 10px; padding: 8px 12px; font-size: 13px; color: #7a5a00; margin-top: 12px; }
.legal__t { width: 100%; border-collapse: collapse; font-size: 14px; background: #fff; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin: 10px 0; }
.legal__t th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--bg-soft); }
.legal__t td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); line-height: 1.45; }
.legal__t tr:last-child td { border-bottom: 0; }
.legal__t td:first-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
@media (max-width: 700px) { .legal__t { display: block; overflow-x: auto; } }

/* campo precompilato dalla verifica copertura */
.field.is-prefilled input { border-color: rgba(34,197,94,.6); background: #f0fdf4; }
.field.is-prefilled label::after { content: ' · dalla verifica copertura'; text-transform: none; letter-spacing: 0; color: #15803d; font-weight: 600; }

/* ---------- Combo Fibra + Backup FWA ---------- */
.combo-promo { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 28px auto 0; max-width: 880px; padding: 24px 28px; border-radius: var(--radius-lg); background: linear-gradient(135deg, #0b1e4a, #1b3a8a); color: #fff; text-align: left; transition: transform .2s, box-shadow .2s; }
.combo-promo:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.combo-promo b { display: block; font-size: 20px; font-weight: 800; margin: 8px 0 4px; }
.combo-promo > div > span:last-child { font-size: 14px; color: rgba(255,255,255,.78); }
.combo-promo .btn { flex: none; }
.combo-hero { background: radial-gradient(1200px 600px at 85% -10%, rgba(37,99,235,.5), transparent 60%), linear-gradient(160deg, #061231 0%, #0b1e4a 55%, #1b3a8a 100%); color: #fff; padding: 72px 0 80px; overflow: hidden; }
.combo-hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.combo-hero h1 { font-size: clamp(36px, 4.8vw, 58px); font-weight: 800; letter-spacing: -.03em; line-height: 1.05; }
.combo-hero h1 em { font-style: normal; color: var(--yellow); }
.combo-hero .lead { color: rgba(255,255,255,.82); margin-top: 18px; max-width: 560px; }
.combo-hero__list { list-style: none; padding: 0; margin: 26px 0 30px; display: grid; gap: 12px; }
.combo-hero__list li { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: baseline; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.combo-hero__list b { color: var(--yellow); font-size: 15px; }
.combo-hero__list span { font-size: 14px; color: rgba(255,255,255,.8); }
/* schema di rete animato */
.combo-hero__grid--one { grid-template-columns: 1fr; }
.combo-hero__grid--one .combo-hero__text { max-width: 760px; }
.combo-h2 { letter-spacing: .04em; }
/* ---------- Simulatore combo: schema fibra + backup radio su sfondo bianco (dimostrazione automatica) ---------- */
.net { position: relative; max-width: 980px; margin: 32px auto 0; text-align: left; }
.net__timeline { display: flex; align-items: center; gap: 14px; max-width: 760px; margin: 0 auto; }
.net__progress { flex: 1; height: 6px; border-radius: 999px; background: #e8edf7; overflow: hidden; }
.net__progress-fill { height: 100%; width: 0; border-radius: 999px; background: #2563eb; }
.net__progress-fill.is-cut { background: #10b981; }
.net__phase { font-size: 13px; font-weight: 700; color: #1d4ed8; white-space: nowrap; transition: color .3s; }
.net.is-cut .net__phase { color: #047857; }
.net__svg { display: block; width: 100%; height: auto; margin-top: 6px; font: 600 13px Inter, system-ui, sans-serif; overflow: visible; }
.n-lbl { fill: var(--ink-2); text-anchor: middle; }
.n-lbl--f { fill: #1d4ed8; letter-spacing: .12em; font-weight: 800; } .n-lbl--r { fill: #047857; letter-spacing: .12em; font-weight: 800; }
/* centrale */
.n-ex-bld { fill: #f6f8fc; stroke: var(--ink); stroke-width: 2; }
.n-ex-roof, .n-ex-base { fill: var(--ink); }
.n-rack { fill: #e8edf7; stroke: var(--ink); stroke-width: 1.5; }
.n-rack-ln { fill: none; stroke: #9aa6c3; stroke-width: 1.5; stroke-linecap: round; }
.n-led circle { fill: #2563eb; animation: net-led 1.4s ease-in-out infinite; }
.n-led circle:nth-child(2n) { animation-delay: .5s; } .n-led circle:nth-child(3n) { animation-delay: .9s; }
@keyframes net-led { 50% { fill: #93c5fd; } }
/* fibra */
.n-fiber { fill: none; stroke: rgba(37,99,235,.18); stroke-width: 6; stroke-linecap: round; transition: stroke .4s; }
.n-fiber-flow { fill: none; stroke: url(#gfib); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 22 16; animation: net-flow 1.1s linear infinite; transition: opacity .3s; }
@keyframes net-flow { to { stroke-dashoffset: -38; } }
.n-cut { opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity .25s; }
.n-cut circle { fill: #fff; stroke: #ef4444; stroke-width: 2.5; }
.n-cut path { fill: none; stroke: #ef4444; stroke-width: 3; stroke-linecap: round; }
/* sede */
.n-win rect { fill: #f59e0b; stroke: var(--ink); stroke-width: 1.2; }
.n-panel { fill: #e8edf7; stroke: var(--ink); stroke-width: 1.5; }
.n-mast-body { fill: #f6f8fc; stroke: var(--ink); stroke-width: 2; stroke-linejoin: round; }
.n-win rect:nth-child(2), .n-win rect:nth-child(7), .n-win rect:nth-child(9), .n-win rect:nth-child(12) { fill: #dbe3f0; }
.n-door { fill: #dbe3f0; stroke: var(--ink); stroke-width: 1.5; }
/* onde radio */
.n-wave { fill: none; stroke: #10b981; stroke-width: 2.5; stroke-linecap: round; opacity: .22; transition: opacity .3s; }
/* ponte radio */
.n-radio { fill: none; stroke: rgba(16,185,129,.4); stroke-width: 3; stroke-dasharray: 3 10; stroke-linecap: round; }
.n-radio-flow { fill: none; stroke: url(#grad); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 18 16; opacity: 0; animation: net-flow 1s linear infinite; transition: opacity .3s; }
.n-top { fill: #d1fae5; }
/* stato: fibra interrotta */
.net.is-cut .n-fiber { stroke: rgba(239,68,68,.35); }
.net.is-cut .n-fiber-flow { opacity: 0; }
.net.is-cut .n-cut { opacity: 1; animation: net-pop .4s cubic-bezier(.2,.9,.3,1.3); }
@keyframes net-pop { from { transform: scale(.4); } to { transform: scale(1); } }
.net.is-cut .n-radio-flow { opacity: 1; }
.net.is-cut .n-wave { animation: net-wave 1.2s ease-out infinite; }
.net.is-cut .n-wave--2 { animation-delay: .2s; } .net.is-cut .n-wave--3 { animation-delay: .4s; }
@keyframes net-wave { 0% { opacity: .15; } 40% { opacity: 1; } 100% { opacity: .15; } }
.net.is-cut .n-win rect { animation: net-blink .6s ease 1; }
@keyframes net-blink { 50% { fill: #dbe3f0; } }
.net.is-cut .n-led circle { animation: none; fill: #ef4444; }
.net:not(.is-cut) .n-roof .n-panel, .net:not(.is-cut) .n-top { animation: net-breathe 2.4s ease-in-out infinite; }
@keyframes net-breathe { 50% { fill: #a7f3d0; } }
@media (max-width: 700px) { .net__svg { font-size: 15px; } .net__timeline { flex-direction: column; align-items: stretch; gap: 6px; } .net__phase { text-align: center; } }
/* configuratore */
.combo-cfg__head { max-width: 760px; margin-bottom: 28px; }
.cover-card--combo { box-shadow: var(--shadow); }
@media (min-width: 721px) {
  .cover-card--combo .cover-form--simple { grid-template-columns: 1fr auto; align-items: end; gap: 14px; }
  .cover-card--combo .cover-form--detailed { grid-template-columns: 1.1fr 1.6fr .6fr auto; align-items: end; gap: 14px; }
  .cover-card--combo .cover-form--detailed .field--row { display: contents; }
  .cover-card--combo .cover-form .btn--block { width: auto; padding-left: 26px; padding-right: 26px; white-space: nowrap; }
  .cover-card--combo .cover-card__alt { text-align: left; margin-top: 12px; }
}
.cb { border-radius: 16px; border: 1px solid var(--line); background: var(--bg-soft); padding: 18px; animation: cov-in .35s ease both; }
.cb__head { display: grid; gap: 4px; margin-bottom: 4px; }
.cb__head b { font-size: 17px; }
.cb__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.cb__col { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 16px; }
.cb__colh { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.cb__num { width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: #fff; background: var(--blue-700); flex: none; }
.cb__col--b .cb__num { background: #0e9f8f; }
.cb__colh b { font-size: 15px; } .cb__colh small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.cb__tiles { display: grid; gap: 8px; }
.cb__tile { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; padding: 10px 12px 10px 38px; border: 1.5px solid var(--line); border-radius: 12px; cursor: pointer; transition: .15s; background: #fff; }
.cb__tile input { position: absolute; left: 12px; top: 14px; width: 16px; height: 16px; accent-color: var(--blue-700); margin: 0; }
.cb__tile:hover { border-color: rgba(37,99,235,.5); }
.cb__tile.is-on { border-color: rgb(var(--c)); background: rgba(var(--c), .06); box-shadow: 0 0 0 3px rgba(var(--c), .12); }
.cb__tile .n { font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgb(var(--c)); }
.cb__tile .s { font-size: 18px; font-weight: 900; letter-spacing: -.03em; } .cb__tile .s small { font-size: 11px; font-weight: 600; color: var(--ink-2); margin-left: 3px; letter-spacing: 0; }
.cb__tile .n { grid-column: 1; grid-row: 1; } .cb__tile .s { grid-column: 1; grid-row: 2; }
.cb__tile .u { font-size: 12px; color: var(--ink-2); grid-column: 1; grid-row: 3; }
.cb__tile .p { grid-column: 2; grid-row: 1 / span 3; align-self: center; font-size: 17px; font-weight: 800; white-space: nowrap; text-align: right; } .cb__tile .p small { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.cb .cov__sv { aspect-ratio: 21 / 7; max-height: 280px; }
.cb__tile .t { position: absolute; top: -8px; right: 10px; font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; background: rgb(var(--c)); color: #fff; padding: 2px 7px; border-radius: 999px; }
.cb__none { font-size: 13px; color: var(--ink-2); padding: 12px; border: 1px dashed var(--line); border-radius: 12px; }
.cb__none a { color: var(--blue-700); font-weight: 700; }
.cb__extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.cb__extra { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-size: 13px; }
.cb__extra b { font-size: 14px; } .cb__extra span { color: var(--ink-2); font-size: 12px; }
.cb__extra--inc b::after { content: ' · incluso'; color: #15803d; font-size: 12px; }
.cb__extra label { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.cb__sum { margin-top: 14px; background: var(--blue-900); color: #fff; border-radius: 14px; padding: 18px 20px; display: grid; grid-template-columns: 1fr auto; gap: 8px 24px; align-items: center; }
.cb__rows { display: grid; gap: 6px; font-size: 14px; }
.cb__rows div { display: flex; justify-content: space-between; gap: 16px; } .cb__rows b { font-weight: 700; }
.cb__rows .disc { color: #86efac; }
.cb__tot { text-align: right; }
.cb__tot b { display: block; font-size: 32px; font-weight: 900; letter-spacing: -.03em; color: var(--yellow); }
.cb__tot span { font-size: 12px; color: rgba(255,255,255,.7); }
.cb__tot small { display: block; font-size: 12px; color: rgba(255,255,255,.75); margin-top: 4px; }
.cb__cta { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-top: 6px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.15); font-size: 12px; color: rgba(255,255,255,.65); }
.combo-req { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.combo-req > *, .form-grid > *, .combo-req form > *, .field > * { min-width: 0; max-width: 100%; }
.combo-req .form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.combo-req form { display: grid; gap: 14px; }
.combo-req .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.combo-req textarea { font: inherit; }
.combo-req__done { padding: 18px; border-radius: 12px; background: #e8f7ec; color: #1b5e2b; font-size: 15px; line-height: 1.5; }
@media (max-width: 1024px) { .combo-hero__grid, .combo-req { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .cb__grid, .cb__extras, .combo-req .form-grid { grid-template-columns: 1fr; } .cb__sum { grid-template-columns: 1fr; } .cb__tot { text-align: left; } .combo-hero__list li { grid-template-columns: 1fr; } .combo-promo { flex-direction: column; align-items: flex-start; } }

/* ---------- Menu "mega" stile speedtest.net (PROVA 02/11/2026; attivo solo se main.js aggiunge .header--mega) ---------- */
.header--mega { background: var(--blue-900); border-bottom: 0; }
/* la riga luminosa è UN solo elemento, in fondo al pannello .mega: a pannello chiuso (altezza 0) coincide col bordo
   inferiore dell'header, aprendo scende insieme al pannello e risale chiudendo. Sotto 900px (niente .mega) sta sull'header. */
.mega::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--yellow) 0%, #38bdf8 30%, var(--blue-600) 55%, #a78bfa 80%, var(--yellow) 100%);
  background-size: 300% 100%; animation: mega-glow 7s linear infinite;
  box-shadow: 0 0 10px rgba(56,189,248,.65), 0 0 28px rgba(250,204,21,.28), 0 2px 18px rgba(37,99,235,.55);
}
@keyframes mega-glow { from { background-position: 0% 50%; } to { background-position: 300% 50%; } }
.header--mega .nav a { color: rgba(255,255,255,.82); }
.header--mega .nav a:hover, .header--mega .nav a.is-hot { background: rgba(255,255,255,.08); color: #fff; }
.header--mega .nav a.is-active { color: var(--yellow); }
.header--mega .nav a.is-active:hover, .header--mega .nav a.is-active.is-hot { color: #fff; }
.nav__chev { width: 13px; height: 13px; margin-left: 1px; vertical-align: -2px; opacity: .6; transition: transform .25s; }
.nav a.is-hot .nav__chev { transform: rotate(180deg); opacity: 1; }
.header--mega .header__cta .btn--ghost { color: #fff; border-color: rgba(255,255,255,.3); } /* solo la barra: il menu a hamburger resta su bianco */
.header--mega .header__cta .btn--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.55); }
.header--mega .burger span, .header--mega .burger span::before, .header--mega .burger span::after { background: #fff; }
.header--mega .burger span:nth-child(1), .header--mega .burger span:nth-child(3) { background: transparent; }
.header--mega .burger:hover { background: rgba(255,255,255,.1); }
.header--mega .logo__text { color: #fff; }
.mega {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 55; background: var(--blue-900); color: #fff;
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s cubic-bezier(.2,.8,.2,1);
  box-shadow: 0 30px 50px -30px rgba(6,18,49,.7);
}
.mega.is-open { grid-template-rows: 1fr; }
.mega__inner { overflow: hidden; min-height: 0; }
.mega__panel { display: none; max-width: var(--max); margin: 0 auto; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 28px 40px; padding: 26px 24px 30px; align-items: start; }
.mega__panel.is-on { display: grid; animation: mega-in .28s ease both; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.mega__col h4 { margin: 0 0 8px; padding: 0 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.48); }
.mega__col a { display: block; padding: 7px 10px; border-radius: 9px; color: #fff; text-decoration: none; transition: background .15s; }
.mega__col a:hover { background: rgba(255,255,255,.08); }
.mega__col a b { display: block; font-weight: 600; font-size: 15px; line-height: 1.25; }
.mega__col a b em { font-style: normal; margin-left: 6px; vertical-align: 2px; }
.mega__col a span { display: block; font-size: 12.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
.mega__col a:hover span { color: rgba(255,255,255,.78); }
.mega__cta {
  position: relative; display: block; align-self: start; padding: 18px 48px 18px 18px; border-radius: 14px; text-decoration: none;
  background: linear-gradient(135deg, var(--yellow), #ffe066); color: var(--blue-900);
  box-shadow: 0 16px 34px -18px rgba(250,204,21,.6); transition: transform .2s, box-shadow .2s;
}
.mega__cta:hover { transform: translateY(-2px); box-shadow: 0 22px 40px -18px rgba(250,204,21,.8); }
.mega__cta b { display: block; font-size: 16px; font-weight: 800; }
.mega__cta span { display: block; font-size: 13px; margin-top: 4px; color: rgba(11,30,74,.78); }
.mega__cta i { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 22px; font-weight: 800; }
@media (max-width: 900px) { .mega { display: none; } .header--mega { position: sticky; } .header--mega::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; background: linear-gradient(90deg, var(--yellow) 0%, #38bdf8 30%, var(--blue-600) 55%, #a78bfa 80%, var(--yellow) 100%); background-size: 300% 100%; animation: mega-glow 7s linear infinite; box-shadow: 0 0 10px rgba(56,189,248,.65), 0 0 28px rgba(250,204,21,.28); } }

/* ===== Intro all'apertura della home: logo, passaggio di luce, sipario che sale (tutto CSS; main.js gestisce salto e rimozione) ===== */
.intro { position: fixed; inset: 0; z-index: 200; background: var(--blue-900); overflow: hidden; cursor: pointer; animation: intro-out .45s cubic-bezier(.7,0,.3,1) 1.25s both; } /* totale 1,7 s */
.intro--skip { animation-delay: 0s !important; }
.intro--off { display: none; }
.intro__bg { position: absolute; inset: -20%; background: radial-gradient(ellipse at 50% 55%, rgba(37,99,235,.45), transparent 60%); animation: intro-bg .6s ease-out both; }
.intro__logo { position: absolute; left: 50%; top: 50%; width: clamp(180px, 36vw, 420px); transform: translate(-50%, -50%); animation: intro-logo .55s cubic-bezier(.2,.8,.2,1) both, intro-grow 1.7s cubic-bezier(.3,.2,.4,1) both; } /* entra a fuoco e intanto cresce piano per tutta l'intro */
.intro__logo img { width: 100%; display: block; opacity: .95; } /* un filo sotto il bianco pieno, così la banda bianca si vede */
/* bagliore sulle lettere: una banda netta e inclinata (bordi duri) che attraversa il logo; la forma arriva dalla maschera indicata nell'HTML */
.intro__light {
  position: absolute; inset: 0;
  background: linear-gradient(108deg,
    transparent 0 44%,
    rgba(96,165,250,.55) 44% 44.8%,
    #fff 44.8% 51.2%,
    rgba(96,165,250,.55) 51.2% 52%,
    transparent 52% 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: intro-light .85s cubic-bezier(.76,0,.24,1) .4s both; /* S marcata: parte piano, scatta al centro, si ferma dolce */
}
@keyframes intro-bg { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes intro-logo { from { opacity: 0; filter: blur(10px); } to { opacity: 1; filter: blur(0); } }
@keyframes intro-grow { from { transform: translate(-50%, -50%) scale(.86); } to { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes intro-light { from { background-position: 100% 0; } to { background-position: 0% 0; } }
@keyframes intro-out { to { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 12% 12%; visibility: hidden; } }
@media print { .intro { display: none; } }
/* Scelta di Matteo (04/11/2026): l'intro è uguale per tutti, anche con "Riduci movimento" attivo */

/* ===== Messaggino "stiamo assumendo" sotto la voce Azienda, per 5 secondi all'apertura della home (main.js) ===== */
.nav-hint { position: absolute; top: calc(100% + 12px); left: var(--x, 50%); z-index: 70; transform: translate(-50%, -6px); background: var(--yellow); color: var(--blue-900); font-size: 13px; font-weight: 700; line-height: 1.3; padding: 9px 13px; border-radius: 10px; box-shadow: 0 14px 30px -12px rgba(6,18,49,.6); white-space: nowrap; cursor: pointer; opacity: 0; transition: opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); text-decoration: none; }
.nav-hint::before { content: ""; position: absolute; top: -7px; left: 50%; margin-left: -7px; border: 7px solid transparent; border-top: 0; border-bottom-color: var(--yellow); }
.nav-hint small { display: block; font-weight: 600; color: rgba(6,18,49,.75); }
.nav-hint.is-in { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 900px) { .nav-hint { display: none; } }

/* Avviso "modulo non ancora attivo" (moduli senza backend, area clienti, proposta di contratto) */
.form-soon { background: #fff4d6; border-left: 4px solid #f59e0b; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.5; color: var(--ink); margin: 0 0 16px; }
.form-soon a { color: inherit; font-weight: 700; text-decoration: underline; }
.form-soon.is-flash { animation: soon-flash .7s ease; }
@keyframes soon-flash { 0%, 100% { box-shadow: none; } 40% { box-shadow: 0 0 0 5px rgba(245,158,11,.45); } }
@media print { .form-soon { display: none; } }

/* Badge "Posizione aperta" nelle schede di Lavora con noi */
.job-open { display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:#0f7a33; background:#e7f6ec; border-radius:999px; padding:3px 10px; margin-bottom:10px; }
.job-open::before { content:""; width:7px; height:7px; border-radius:50%; background:#16a34a; flex:none; }

/* Barra "Chiamaci" fissa in fondo (stile WindTre), compare scrollando — vetro smerigliato + animazioni */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: rgba(255,255,255,.9);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-top: 1px solid var(--line);
  box-shadow: 0 -1px 0 rgba(11,30,74,.06), 0 -14px 44px -18px rgba(11,30,74,.4);
  transform: translateY(120%); opacity: 0;
  transition: transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease;
  will-change: transform;
}
.callbar.is-in { transform: translateY(0); opacity: 1; }
/* Niente backdrop-filter? sfondo pieno di scorta */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .callbar { background: #fff; }
}
.callbar__in { display: flex; align-items: center; gap: 14px; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
/* Blocco telefono: solo icona telefono verde che squilla ogni tanto + numero */
.callbar__phone { display: flex; align-items: center; gap: 9px; flex: none; }
.callbar__ring { display: grid; place-items: center; color: #16a34a; flex: none; }
.callbar__ring svg { width: 22px; height: 22px; transform-origin: 50% 62%; animation: callbar-ring 4.8s ease-in-out infinite; }
@keyframes callbar-ring {
  0%, 86%, 100% { transform: rotate(0); }
  88% { transform: rotate(-13deg); }
  90% { transform: rotate(11deg); }
  92% { transform: rotate(-9deg); }
  94% { transform: rotate(7deg); }
  96% { transform: rotate(-4deg); }
}
.callbar__txt { display: flex; flex-direction: column; line-height: 1.1; }
.callbar__txt small { font-size: 11px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.callbar__txt a { font-size: 20px; font-weight: 800; color: #16a34a; text-decoration: none; letter-spacing: -.01em; transition: color .2s ease; }
.callbar__txt a:hover { color: #0f7a33; }
.callbar__cta { display: flex; gap: 8px; margin-left: auto; }
/* Riflesso che passa sul pulsante blu (all'ingresso della barra e al passaggio del mouse) */
.callbar__cta .btn { position: relative; overflow: hidden; }
.callbar__cta .btn::after {
  content: ''; position: absolute; top: 0; left: -130%; width: 55%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.45), transparent);
  transform: skewX(-20deg); pointer-events: none;
}
.callbar.is-in .callbar__cta .btn::after { animation: callbar-shine 1.1s ease .45s 1; }
.callbar__cta .btn:hover::after { animation: callbar-shine .8s ease 1; }
@keyframes callbar-shine { to { left: 175%; } }
@media (max-width: 560px) {
  .callbar__in { gap: 10px; }
  .callbar__txt a { font-size: 18px; }
  .callbar__cta .btn { padding-left: 14px; padding-right: 14px; font-size: 14px; white-space: nowrap; }
}
@media (max-width: 420px) {
  .callbar .callbar__in { padding-left: 12px; padding-right: 12px; gap: 8px; }
  .callbar__txt small { display: none; }
  .callbar__ring svg { width: 20px; height: 20px; }
  .callbar__txt a { font-size: 16px; }
  .callbar__cta .btn { padding-left: 12px; padding-right: 12px; font-size: 12.5px; }
}
/* Rispetta "riduci animazioni": niente loop, solo comparsa semplice */
@media (prefers-reduced-motion: reduce) {
  .callbar { transition: opacity .25s ease; transform: translateY(0); }
  .callbar__ring svg, .callbar__cta .btn::after { animation: none; }
}
@media print { .callbar { display: none !important; } }

/* ===== Chi siamo: introduzione + linea del tempo ===== */
.about-intro { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.about-intro > * { min-width: 0; }
.about-intro img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow); display: block; }
.tl { list-style: none; margin: 56px auto 0; padding: 0; position: relative; max-width: 980px; text-align: left; }
.tl::before { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: linear-gradient(180deg, var(--blue-600), var(--blue-100)); border-radius: 2px; }
.tl__item { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; padding: 18px 0; }
.tl__year { position: absolute; left: 50%; top: 28px; transform: translateX(-50%); z-index: 2; }
.tl__year span { display: inline-block; min-width: 72px; text-align: center; padding: 8px 14px; border-radius: 999px; background: var(--blue-900); color: var(--yellow); font-weight: 800; font-size: 15px; letter-spacing: .02em; box-shadow: 0 0 0 6px var(--bg-soft); }
.tl__card { grid-column: 1; background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease; }
.tl__card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tl__item:nth-child(even) .tl__card { grid-column: 2; }
.tl__card img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tl__body { padding: 20px 22px 22px; }
.tl__body h3 { font-size: 19px; margin-bottom: 8px; }
.tl__body p { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 900px) {
  .about-intro { grid-template-columns: 1fr; gap: 28px; }
  .tl { margin-top: 40px; }
  .tl::before { left: 20px; }
  .tl__item { grid-template-columns: 1fr; padding: 10px 0 10px 64px; }
  .tl__year { left: 20px; top: 24px; }
  .tl__year span { min-width: 0; padding: 6px 11px; font-size: 13px; }
  .tl__item:nth-child(even) .tl__card { grid-column: 1; }
}

/* ===== Area clienti: accesso con e-mail + app di autenticazione ===== */
.acc-login__link { background: none; border: 0; padding: 0; font: inherit; color: var(--blue); text-decoration: underline; cursor: pointer; }
.acc-login__steps { margin: 0; padding-left: 20px; font-size: 14px; color: var(--ink-2); line-height: 1.55; display: grid; gap: 4px; }
.acc-login__qr { display: flex; justify-content: center; } .acc-login__qr svg { width: 200px; height: 200px; border: 1px solid var(--line); border-radius: 12px; padding: 6px; background: #fff; }
.acc-login__manual { font-size: 13px; color: var(--ink-2); } .acc-login__manual summary { cursor: pointer; color: var(--blue); } .acc-login__manual code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; letter-spacing: .04em; word-break: break-all; background: var(--bg-soft); padding: 2px 6px; border-radius: 6px; }
.acc-login__card button[type=submit]:disabled { opacity: .6; cursor: wait; }
.acc-pick { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: rgba(255,255,255,.75); } .acc-pick select { font: inherit; font-weight: 600; color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); border-radius: 10px; padding: 6px 10px; max-width: 260px; } .acc-pick select option { color: var(--ink); }
.acc-inline { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line); } .acc-inline .acc-actions { margin: 0; }
.acc-modal__box--sm { max-width: 420px; } .acc-modal__box--sm form { display: grid; gap: 12px; }
.acc-tk__res { color: var(--ink); font-weight: 600; }
.acc-msg { margin: 8px 0 0; padding: 8px 10px; border-radius: 10px; background: #f3f5f9; font-size: 13.5px; line-height: 1.45; } .acc-msg b { display: block; font-size: 12px; color: var(--ink-3); margin-bottom: 2px; } .acc-msg b small { font-weight: 500; } .acc-msg--me { background: #e8f0ff; }
.acc-reply { display: flex; gap: 8px; margin-top: 8px; align-items: flex-start; flex-wrap: wrap; } .acc-reply textarea { flex: 1 1 180px; min-height: 42px; font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; resize: vertical; } .acc-reply .btn { white-space: nowrap; }
@media (max-width: 600px) { .acc-pick { width: 100%; } .acc-pick select { flex: 1; max-width: none; } }
.acc-kv div span { flex: 0 0 auto; max-width: 46%; }
@media (max-width: 600px) { .acc-hero__right { flex-wrap: wrap; gap: 10px; } .acc-pick { order: 2; } }
@keyframes job-picked { 0% { box-shadow: 0 0 0 0 rgba(250,204,21,.9); } 100% { box-shadow: 0 0 0 10px rgba(250,204,21,0); } }
[data-job-select].is-picked { animation: job-picked .9s ease; }

/* Avviso sito in fase di creazione */
.wip { position: fixed; inset: 0; z-index: 92; background: rgba(6,18,49,.55); display: flex; align-items: center; justify-content: center; padding: 16px; opacity: 0; transition: opacity .25s; }
.wip.is-on { opacity: 1; }
.wip__box { background: #fff; color: var(--ink); width: min(520px, 100%); border-radius: var(--radius-lg); padding: 28px 28px 24px; box-shadow: 0 30px 60px -20px rgba(6,18,49,.5); text-align: center; transform: translateY(14px); transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.wip.is-on .wip__box { transform: none; }
.wip__ico { display: block; font-size: 40px; line-height: 1; margin-bottom: 10px; }
.wip__box h2 { font-size: 22px; font-weight: 800; margin: 0 0 10px; }
.wip__box p { font-size: 15px; color: var(--ink-2); margin: 0 0 12px; line-height: 1.55; }
.wip__box p a { color: var(--blue-700); font-weight: 700; }
.wip__box .btn { margin-top: 8px; min-width: 160px; }