/* ─── FONT OSPITATI IN LOCALE ───
   Montserrat: un solo file variabile copre tutti i pesi da 400 a 900,
   servito dal nostro hosting invece che da server esterni. Nessun dato
   del visitatore viene inviato a terze parti e il caricamento è più
   veloce perché non serve contattare altri domini. */

@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable-latin.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/fonts/Montserrat-Variable-latin-ext.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── CLASH DISPLAY (titoli) e CABINET GROTESK (testo) ───
   File reali self-hosted, non più alias di Montserrat: un font con
   identità propria per i titoli, uno lineare e pulito per il corpo del
   testo. Il contrasto tra i due è uno degli elementi che rende il sito
   riconoscibile come progettato, non generato da un template. */
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Clash Display';
  src: url('/fonts/ClashDisplay-Bold.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/CabinetGrotesk-Regular.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/CabinetGrotesk-Medium.woff2') format('woff2');
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Cabinet Grotesk';
  src: url('/fonts/CabinetGrotesk-Bold.woff2') format('woff2');
  font-weight: 600 900; font-style: normal; font-display: swap;
}

:root {
  /* ── Colori — regola 60-30-10 ──
     60% sfondo: bianco latte alternato a grigio cemento chiarissimo.
     30% struttura/testi: blu abisso molto scuro (mai nero puro).
     10% accento: il blu del logo per i pulsanti, il blu zaffiro per
     link e piccoli richiami, cosi l'accento non e' un unico tono piatto. */
  --bg:          #fdfdfd;
  --bg-dark:     #0b132b;   /* fasce scure e footer */
  --ink:         #0b132b;   /* testo e contorni */
  --ink-soft:    #4b5563;   /* testo secondario */
  --cream:       #f4f5f7;   /* fondo neutro delle sezioni */
  --blue:        #0057d8;   /* blu del logo: pulsanti di conversione */
  --blue-lt:     #003fa3;   /* stato premuto / passaggio del mouse */
  --blue-2:      #1d4ed8;   /* blu zaffiro: link, piccoli accenti, sottolineature */
  --blue-light:  #7aa9ff;   /* accento sui fondi scuri: 7.7:1 sul blu-abisso */
  --blue-soft:   #eaf1fe;   /* riempimenti tenui */
  --teal:        #0b132b;   /* accento "strutturale": bordi, spunte, dettagli */
  --teal-dark:   #0b132b;
  --accent:      #0057d8;
  --accent-dark: #0057d8;
  --white:       #ffffff;
  --black:       #0b132b;   /* alias storico: punta al blu-abisso */
  --border:      rgba(11,19,43,0.14);   /* filetti sottili */
  --border-strong: #0b132b;             /* contorni marcati */
  --line:        var(--border);         /* usata da .faq-item: prima non definita, bordo invisibile */

  /* ── Forma ──
     Angoli leggermente smussati (non la pillola arrotondata da SaaS
     generico), ombre piu' contenute e definite invece che morbide e
     diffuse: leggibili come una scelta precisa, non come un default. */
  --r:        14px;
  --r-btn:    8px;                   /* pulsanti: angoli leggermente smussati */
  --r-card:   18px;                  /* card: angoli simmetrici */
  --bw:       1.5px;
  --bw-lg:    2px;
  --shadow-soft:    0 20px 40px -16px rgba(11,19,43,0.20);
  --shadow-soft-sm: 0 8px 20px -8px rgba(11,19,43,0.22);

  /* ── Caratteri ──
     Clash Display per i titoli (identita' propria, geometrico), Cabinet
     Grotesk per il corpo del testo (lineare, pulitissimo): il contrasto
     tra i due e' intenzionale. Montserrat resta come ripiego intermedio,
     self-hosted anch'esso, prima dei font di sistema. */
  --font-display: 'Clash Display', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body:    'Cabinet Grotesk', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-accent:  'Cabinet Grotesk', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

*, *::before, *::after { 
  box-sizing: border-box; 
  margin: 0; 
  padding: 0; 
}

html { 
  scroll-behavior: smooth; 
  font-size: 16px; 
  /* Su iOS (Safari e anche Chrome, che li usa WebKit) overflow-x: hidden
     impostato SIA su html SIA su body viene ignorato: la pagina si trascina
     di lato mostrando una fascia vuota. Su Android non succede.
     overflow-x: clip ottiene lo stesso risultato senza creare un contenitore
     di scorrimento, ed e' rispettato da WebKit. La riga hidden resta prima
     come ripiego per i browser che non conoscono clip. */
  overflow-x: hidden;
  overflow-x: clip;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  overflow-x: clip;
  max-width: 100%;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Badge reCAPTCHA nascosto (dicitura testuale obbligatoria aggiunta vicino al form, come richiesto dai Termini di Servizio Google) */
.grecaptcha-badge { visibility: hidden; }

/* ─── TYPOGRAPHY ─── */
.display { font-family: 'Clash Display', sans-serif; font-weight: 600; }
.label {
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.85rem;
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.label .dot {
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
}

/* ─── NAVIGATION ─── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 72px;
  background: rgba(245,243,238,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4rem;
  z-index: 1000;
  transition: box-shadow 0.3s ease;
}
.nav-logo {
  font-family: 'Clash Display', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--blue);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  font-weight: 500;
}
.nav-links a:not(.nav-cta) {
  position: relative;
  color: var(--ink);
  transition: color 0.2s ease;
}
.nav-links a:not(.nav-cta)::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--teal);
  transition: width 0.2s ease;
}
.nav-links a:not(.nav-cta):hover::after { width: 100%; }
.nav-links a:not(.nav-cta):hover { color: var(--teal); }

.nav-cta {
  background: var(--blue);
  color: var(--white) !important;
  padding: 0.75rem 1.5rem;
  border-radius: var(--r);
  transition: background 0.2s ease, transform 0.2s ease;
}
.nav-cta:hover {
  background: var(--blue-lt);
  transform: translateY(-1px);
}
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
}
.nav-hamburger span {
  width: 24px; height: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ─── HERO ─── */
.hero {
  min-height: 90vh;
  padding: 140px 4rem 60px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 4rem;
  position: relative;
  overflow: hidden;
}
.hero-content { max-width: 680px; position: relative; z-index: 1; }
.hero-title {
  font-size: 4.5rem;
  line-height: 1.05;
  color: var(--ink);
  margin: 1.5rem 0;
}
.hero-title .hi { color: var(--blue); }
.hero-title .hi2 { color: var(--teal); }

/* ─── HERO ANIMATIONS ─── */
.hero-bg-accent {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.hero-bg-accent svg { width: 100%; height: 100%; }
.hero-hex {
  stroke: var(--blue);
  fill: none;
  opacity: 0;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  animation: heroHexDraw 2.4s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-hex-1 { stroke: var(--blue); animation-delay: 0.15s; }
.hero-hex-2 { stroke: var(--teal); animation-delay: 0.4s; opacity: 0; }
.hero-hex-3 { stroke: var(--blue); animation-delay: 0.55s; opacity: 0; }
@keyframes heroHexDraw {
  0% { stroke-dashoffset: 1200; opacity: 0; }
  15% { opacity: 0.18; }
  100% { stroke-dashoffset: 0; opacity: 0.14; }
}

.hero-eyebrow {
  opacity: 0;
  animation: heroFadeUp 0.7s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 0.1s;
}
.hero-line { display: block; overflow: hidden; }
.hero-line-inner {
  display: block;
  opacity: 0;
  transform: translateY(12px);
  animation: heroLineReveal 0.85s cubic-bezier(.16,1,.3,1) forwards;
}
.hero-line:nth-child(1) .hero-line-inner { animation-delay: 0.22s; }
.hero-line:nth-child(2) .hero-line-inner { animation-delay: 0.36s; }
.hero-line:nth-child(3) .hero-line-inner { animation-delay: 0.5s; }
.hero-sub {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 0.72s;
  font-size: 1.25rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-bottom: 2.5rem;
}
.hero-btns {
  opacity: 0;
  animation: heroFadeUp 0.8s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: 0.85s;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
@keyframes heroLineReveal { to { opacity: 1; transform: translateY(0); } }
@keyframes heroFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .hero-hex, .hero-eyebrow, .hero-line-inner, .hero-sub, .hero-btns {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.btn-primary {
  background: var(--ink);
  color: var(--bg);
  padding: 1rem 2rem;
  border-radius: var(--r);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
.btn-secondary {
  border: 1px solid var(--border);
  padding: 1rem 2rem;
  border-radius: var(--r);
  font-weight: 500;
  transition: background 0.2s ease;
}
.btn-secondary:hover { background: var(--cream); }

.hero-visual {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-card {
  width: 100%;
  max-width: 400px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem 2.5rem 4.5rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.03);
  position: relative;
}
.hero-card-title { font-family: 'Clash Display', sans-serif; font-size: 1.75rem; font-weight: 600; margin-bottom: 1rem; color: var(--blue); }
.hero-card p { color: var(--ink-soft); font-size: 0.95rem; }
.hero-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  background: var(--blue);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.hero-card-features { list-style: none; margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.6rem; }
.hero-card-features li {
  font-size: 0.92rem;
  color: var(--ink-soft);
  padding-left: 1.5rem;
  position: relative;
}
.hero-card-features li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.45em;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--teal);
}
.hero-badge {
  position: absolute;
  bottom: -20px; right: -20px;
  background: var(--teal-dark);
  color: var(--white);
  padding: 1rem 1.5rem;
  border-radius: 16px;
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  font-size: 1.5rem;
  box-shadow: 0 10px 20px rgba(11,19,43,0.2);
}
.hero-badge small { display: block; font-size: 0.75rem; font-family: 'Cabinet Grotesk', sans-serif; font-weight: 400; }

/* ─── PROMO CARD ─── */
.promo-card {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--blue-soft);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  gap: 2rem;
}
.promo-card-icon {
  flex-shrink: 0;
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--teal);
  display: flex; align-items: center; justify-content: center;
}
.promo-card-text { flex: 1; display: flex; flex-direction: column; gap: 0.4rem; }
.promo-card-text h3 { font-family: 'Clash Display', sans-serif; font-size: 1.25rem; color: var(--ink); }
.promo-card-text p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; }
.promo-card-btn { flex-shrink: 0; white-space: nowrap; }

/* ─── PRICING ─── */
.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}
.price-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}
.price-card-featured {
  border-color: var(--teal);
  box-shadow: 0 20px 40px rgba(11,19,43,0.08);
}
.price-badge {
  position: absolute;
  top: -14px; left: 2rem;
  background: var(--teal-dark);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.price-card h3 { font-family: 'Clash Display', sans-serif; font-size: 1.4rem; color: var(--ink); }
.price-value { font-family: 'Clash Display', sans-serif; font-size: 1.3rem; color: var(--blue); font-weight: 600; }
.price-desc { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.5; }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 0.55rem; margin: 0.5rem 0 1rem; }
.price-features li {
  font-size: 0.9rem; color: var(--ink-soft);
  padding-left: 1.4rem; position: relative;
}
.price-features li::before {
  content: '';
  position: absolute; left: 0; top: 0.45em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
}
.price-card .btn-primary, .price-card .btn-secondary { justify-content: center; margin-top: auto; }

/* ─── TICKER ─── */
.ticker {
  background: var(--bg-dark);
  color: var(--bg);
  padding: 1.25rem 0;
  overflow: hidden;
  white-space: nowrap;

  /* La striscia scorre con translate3d, che la promuove a livello
     composito. contain: paint garantisce il ritaglio anche in quel caso,
     su tutti i browser. Buona pratica per una marquee. */
  position: relative;
  z-index: 0;
  contain: paint;
}
.ticker-inner {
  display: inline-block;
  animation: ticker 30s linear infinite;
}
.ticker-item {
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin: 0 2rem;
}
.ticker-sep { color: var(--teal); font-size: 1.2rem; }
@keyframes ticker {
  0% { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

/* ─── STATS BAR ─── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 5rem 4rem;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  gap: 2rem;
}
.stat { text-align: center; }
.stat-num { font-family: 'Clash Display', sans-serif; font-size: 3.5rem; font-weight: 700; color: var(--blue); line-height: 1; margin-bottom: 0.5rem; }
.stat-label { color: var(--ink-soft); font-weight: 500; }

/* ─── SECTIONS COMMONS ─── */
.section { padding: 8rem 4rem; }
.section-header { max-width: 640px; margin-bottom: 4.5rem; }
.section-title { font-size: 3rem; line-height: 1.1; margin: 1rem 0 1.5rem; color: var(--ink); }
.section-desc { font-size: 1.15rem; color: var(--ink-soft); }

/* ─── SERVICES ─── */
.services { background: var(--white); }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.srv {
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 3rem;
  background: var(--bg);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(0.2,1,0.3,1), border-color 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}
.srv:hover {
  transform: translateY(-4px);
  border-color: var(--blue);
  box-shadow: 0 12px 30px rgba(15,73,127,0.04);
}
.srv-icon { 
  font-size: 2.5rem; 
  margin-bottom: 1.5rem; 
  display: inline-block; 
  transition: transform 0.3s ease-out; 
}
.srv:hover .srv-icon { transform: translateY(-3px); }
.srv h3 { font-family: 'Clash Display', sans-serif; font-size: 1.5rem; margin-bottom: 1rem; color: var(--ink); }
.srv p { color: var(--ink-soft); margin-bottom: 2rem; flex-grow: 1; }
.srv-link {
  font-family: 'Clash Display', sans-serif;
  font-weight: 500;
  color: var(--blue);
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-flex;
  align-items: center;
}
.srv:hover .srv-link { color: var(--teal); transform: translateX(4px); }

/* ─── ABOUT ─── */
.about {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 6rem;
  align-items: center;
}
.about-visual { position: relative; }
.about-img-wrap {
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.04);
}
.about-img-wrap img { width: 100%; height: 500px; object-fit: cover; }
.about-card-float {
  position: absolute;
  top: -30px; left: -30px;
  background: var(--bg-dark);
  color: var(--bg);
  padding: 1.5rem 2rem;
  border-radius: var(--r);
  box-shadow: 0 15px 30px rgba(0,0,0,0.15);
  max-width: 200px;
}
.acf-num { font-family: 'Clash Display', sans-serif; font-size: 2.5rem; font-weight: 600; color: var(--teal); line-height: 1; margin-bottom: 0.25rem; }
.acf-label { font-size: 0.85rem; opacity: 0.8; }
blockquote {
  border-left: 3px solid var(--teal);
  padding-left: 1.5rem;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--blue);
  margin: 2rem 0;
}
blockquote cite { display: block; font-style: normal; font-size: 0.85rem; color: var(--ink-soft); margin-top: 0.5rem; font-weight: 500; }

/* ─── PROCESS ─── */
.process-bg { background: var(--bg-dark); border-radius: 32px; margin: 0 2rem; padding: 8rem 4rem; }
.process-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem 3rem;
  margin-top: 4rem;
}
.ps { border-top: 1px solid rgba(237,233,224,0.1); padding-top: 1.5rem; }
.ps-num { font-family: 'Clash Display', sans-serif; font-size: 1rem; color: var(--teal); margin-bottom: 1rem; }
.ps h3 { font-family: 'Clash Display', sans-serif; font-size: 1.5rem; color: var(--white); margin-bottom: 0.75rem; }
.ps p { color: rgba(255,255,255,0.6); }

/* ─── WHY CHOOSE US ─── */
.why { background: var(--white); }
.why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 3rem 4rem; }
.why-item { display: flex; gap: 1.5rem; }
.why-icon {
  width: 48px; height: 48px;
  background: var(--bg);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; flex-shrink: 0;
}
.why-item h4 { font-family: 'Clash Display', sans-serif; font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--ink); }
.why-item p { color: var(--ink-soft); }

/* ─── CONTACTS ─── */
.contact-wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 6rem; }
.contact-channels { margin-top: 3rem; display: flex; flex-direction: column; gap: 2rem; }
.channel { display: flex; gap: 1.25rem; align-items: center; }
.channel-icon { width: 44px; height: 44px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; border: 1px solid var(--border); }
.channel-label { font-size: 0.8rem; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; }
.channel-val { font-family: 'Clash Display', sans-serif; font-size: 1.15rem; color: var(--blue); font-weight: 500; }

.contact-form { background: var(--white); border: 1px solid var(--border); padding: 3.5rem; border-radius: 24px; box-shadow: 0 20px 40px rgba(0,0,0,0.02); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-field { margin-bottom: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.form-field label { font-family: 'Clash Display', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--ink); }
.form-field input, .form-field textarea {
  background: var(--bg);
  border: 1px solid transparent;
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  font-family: inherit; font-size: 1rem; color: var(--ink);
  transition: border-color 0.2s ease, background 0.2s ease;
}
/* Focus di input/textarea: vedi sezione "16. CONTATTI E MODULO" più avanti
   nel file, che definisce lo stile di focus effettivamente applicato
   (box-shadow visibile). Rimossa qui la vecchia dichiarazione duplicata,
   che restava codice morto sovrascritto dalla cascata. */
.form-field textarea { height: 140px; resize: none; }
.form-submit {
  width: 100%; background: var(--blue); color: var(--white); border: none; padding: 1.1rem; border-radius: var(--r); font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.75rem; transition: background 0.2s ease;
}
.form-submit:hover { background: var(--blue-lt); }

/* ─── TELEFONO CON PREFISSO ─── */
.phone-input-group { display: flex; gap: 0.6rem; width: 100%; box-sizing: border-box; }
.phone-prefix {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%236b6b6b' stroke-width='1.5' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  padding: 0.8rem 2rem 0.8rem 0.85rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--ink);
  flex-shrink: 0;
  width: 115px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
/* Focus di .phone-prefix: vedi sezione "16. CONTATTI E MODULO" più avanti
   nel file. Rimossa qui la vecchia dichiarazione duplicata (codice morto). */
.phone-input-group input { flex: 1; min-width: 0; width: 100%; }

/* ─── CONTACT FORM HEADER ─── */
.contact-form-header { margin-bottom: 2.25rem; }
.contact-form-header h3 { font-family: 'Clash Display', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--ink); margin-bottom: 0.4rem; }
.contact-form-header p { color: var(--ink-soft); font-size: 0.95rem; }

/* ─── FILE UPLOAD DROPZONE ─── */
.file-dropzone {
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: var(--r);
  padding: 2rem 1.5rem;
  text-align: center;
  background: var(--bg);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.file-dropzone.dragover { border-color: var(--teal); background: var(--white); }
/* L'input occupava tutta la dropzone (630x156 px, invisibile ma cliccabile)
   e stava sopra ogni altro elemento: il click sul pulsante di rimozione
   dell'allegato colpiva l'input e riapriva la finestra di selezione invece
   di togliere il file. Ora l'input e' ridotto a un punto non cliccabile:
   ad aprire il selettore ci pensa gia' il gestore di click sulla dropzone
   in script.js, che chiama fileInput.click(). */
.file-input-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  clip-path: inset(50%);
}
.file-dropzone { cursor: pointer; }
.file-dropzone-icon { color: var(--ink-soft); margin-bottom: 0.6rem; display: flex; justify-content: center; }
.file-dropzone-text { color: var(--ink-soft); font-size: 0.9rem; }
.file-dropzone-link { color: var(--blue); font-weight: 600; text-decoration: underline; }
.file-selected-name { margin-top: 0.6rem; font-size: 0.85rem; color: var(--teal); font-weight: 500; }
.field-hint { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.5rem; }

/* ─── PRIVACY CHECKBOX ─── */
.privacy-check-row {
  display: flex; align-items: flex-start; gap: 0.65rem;
  font-size: 0.85rem; color: var(--ink-soft);
  margin-bottom: 1.75rem; cursor: pointer;
}
.privacy-check-row input {
  appearance: none;
  -webkit-appearance: none;
  margin-top: 0.15rem;
  width: 18px; height: 18px;
  flex-shrink: 0;
  border: 1.5px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  cursor: pointer;
  position: relative;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.privacy-check-row input:checked { background: var(--teal); border-color: var(--teal); }
.privacy-check-row input:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.privacy-check-row a { color: var(--blue); font-weight: 600; }

/* ─── FOOTER ─── */
footer {
  border-top: 1px solid var(--border);
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3.5rem 4rem 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.footer-tagline {
  line-height: 1.7;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin: 0;
}

.footer-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-contact-links { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.footer-contact-links a {
  color: var(--ink-soft);
  font-weight: 500;
  transition: color 0.2s ease;
}
.footer-contact-links a:hover { color: var(--teal); }

.footer-social { display: flex; gap: 0.9rem; }
.footer-social a {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--cream);
  border-radius: 50%;
  transition: transform 0.2s ease, background 0.2s ease;
}
.footer-social a:hover { background: var(--border); transform: translateY(-2px); }

.footer-bottom {
  border-top: 1px solid var(--border);
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.75rem 4rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.82rem;
}
.footer-links { display: flex; gap: 2rem; }
.footer-links a:hover { color: var(--teal); }

/* ─── ANIMATIONS ─── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.2,1,0.3,1), transform 0.8s cubic-bezier(0.2,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ─── STILI LOGHI ─── */
.site-logo-img { height: 42px; width: auto; object-fit: contain; display: block; }
.footer-logo-img { height: 36px; width: auto; object-fit: contain; border-radius: 6px; display: block; }

/* ─── MEDIA QUERY MOBILE ─── */
@media (max-width: 900px) {
  nav { padding: 1rem 1.5rem; }
  
  .nav-links { 
    display: none; 
    flex-direction: column;
    position: fixed;
    /* Pannello pieno, non traslucido: il titolo della pagina non deve
       trasparire dietro le voci di menu. La barra parte a 72px, cioe
       esattamente sotto la navigazione. */
    top: 72px; left: 0; right: 0;
    background: var(--white);
    padding: 2rem 1.5rem 2.25rem;
    gap: 1.5rem;
    border-bottom: 2px solid var(--ink);
    z-index: 199;
  }
  
  .nav-links.active { display: flex; }
  .nav-hamburger { display: flex; }
  .nav-hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-hamburger.active span:nth-child(2) { opacity: 0; }
  .nav-hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  
  .hero { grid-template-columns: 1fr; padding: 120px 1.5rem 40px; gap: 3rem; text-align: center; }
  .hero-title { font-size: 2.8rem; }
  .hero-sub { font-size: 1.1rem; }
  .hero-btns { justify-content: center; flex-direction: column; width: 100%; }
  .btn-primary, .btn-secondary { width: 100%; justify-content: center; }
  .hero-visual { display: none; }
  
  .stats-bar { grid-template-columns: repeat(2, 1fr); padding: 3rem 1.5rem; gap: 2rem 1rem; }
  .stat-num { font-size: 2.5rem; }
  
  .section { padding: 5rem 1.5rem; }
  .section-title { font-size: 2.2rem; }
  
  .services-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .srv-link { display: inline-flex; margin-top: 0.5rem; font-size: 0.95rem; }
  .srv { padding: 1.5rem; }
  
  .about { grid-template-columns: 1fr; gap: 3rem; }
  .about-img-wrap img { height: 320px; }
  .about-card-float { display: none; }
  
  .process-bg { margin: 0; border-radius: 0; padding: 5rem 1.5rem; }
  .process-steps { grid-template-columns: 1fr; gap: 2.5rem; }
  
  .why-grid { grid-template-columns: 1fr; gap: 2rem; }
  
  
  .contact-wrap { grid-template-columns: 1fr; gap: 3rem; }
  .pricing-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .promo-card { flex-direction: column; text-align: center; padding: 2rem 1.5rem; gap: 1.25rem; }
  .promo-card-btn { width: 100%; text-align: center; }
  
  .contact-form { 
    padding: 2rem 1.1rem !important; 
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .form-row { 
    grid-template-columns: 1fr !important; 
    gap: 0 !important; 
  }
  /* Le caselle di spunta e i radio sono esclusi: sono nascosti in
     position: absolute con width 0, e imporre width 100% li faceva
     diventare larghi quanto lo schermo, allargando l'intera pagina
     e rendendola trascinabile di lato su iOS. */
  .form-field input:not([type="checkbox"]):not([type="radio"]),
  .form-field textarea {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .phone-input-group {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  
  footer { padding: 0; }
  .footer-inner {
    gap: 2rem;
    padding: 3rem 1.5rem 2.5rem;
    text-align: center;
  }
  .footer-brand-row { flex-direction: column; gap: 1rem; }
  .footer-contact-row { flex-direction: column; gap: 1.5rem; }
  .footer-contact-links { flex-direction: column; gap: 0.9rem; }
  .footer-social { justify-content: center; }
  .footer-bottom {
    flex-direction: column;
    gap: 1.25rem;
    padding: 1.75rem 1.5rem 2.5rem;
    text-align: center;
  }
  .footer-links { flex-direction: column; gap: 1rem; }
  
}

/* ─── BANNER COOKIE ─── */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: var(--bg-dark);
  color: var(--white);
  padding: 1.5rem 4rem;
  z-index: 3000;
  box-shadow: 0 -10px 30px rgba(0,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s ease, opacity 0.4s ease;
}
.cookie-banner.hidden {
  transform: translateY(100%);
  opacity: 0;
  pointer-events: none;
}
.cookie-content {
  max-width: 1200px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cookie-content p { font-size: 0.9rem; line-height: 1.5; color: rgba(255,255,255,0.8); }
.cookie-content a { color: var(--teal); text-decoration: underline; }
.cookie-buttons { display: flex; gap: 1rem; flex-shrink: 0; }
.cookie-btn {
  padding: 0.6rem 1.5rem; border-radius: 8px;
  font-family: 'Clash Display', sans-serif; font-weight: 500; font-size: 0.85rem;
  cursor: pointer; border: none; transition: opacity 0.2s ease;
}
.cookie-btn.accept { background: var(--teal-dark); color: var(--white); }
.cookie-btn.reject { background: rgba(255,255,255,0.1); color: var(--white); }
.cookie-btn:hover { opacity: 0.9; }

@media (max-width: 900px) {
  .cookie-banner { padding: 1.5rem; }
  .cookie-content { flex-direction: column; gap: 1.25rem; text-align: center; }
  .cookie-buttons { width: 100%; }
  .cookie-btn { flex: 1; text-align: center; }
}

/* ─── BOTTONE TORNA SU ─── */
.back-to-top {
  position: fixed;
  bottom: 2rem; right: 2rem;
  width: 46px; height: 46px;
  background: var(--bg-dark); color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 50%;
  font-size: 1.25rem; cursor: pointer; z-index: 2500; /* sotto il banner cookie (3000): non copre piu il pulsante Rifiuta */
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transform: translateY(15px);
  transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease, background 0.2s ease;
}
.back-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover { background: var(--blue-lt); transform: translateY(-3px); }

@media (max-width: 900px) {
  .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 40px; height: 40px; font-size: 1.1rem; }
  .back-to-top:hover { transform: translateY(0); }
}

/* ─── PATCH COMPATIBILITÀ MOBILE (iOS & ANDROID) ─── */
@media (max-width: 768px) {
  /* Evita lo zoom automatico forzato su iOS Safari aumentando il font a 16px nei campi di input */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  textarea,
  select,
  .phone-prefix {
    font-size: 16px !important;
  }
  
  /* Ottimizzazione tap target per l'hamburger menu */
  .nav-hamburger {
    padding: 12px !important;
    margin: -12px !important;
  }
}

/* Ottimizzazione breakpoint intermedio per Tablet (Desktop/Laptop piccoli) */
@media (max-width: 1024px) and (min-width: 769px) {
  .hero h1 {
    font-size: 3.2rem !important;
  }
  .hero {
    gap: 2rem !important;
  }
}

/* ─── SELETTORE REALIZZAZIONE / MANUTENZIONE ─── */
.pricing-switch {
  display: flex;
  gap: 0.25rem;
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.35rem;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 3rem;
}
.pricing-switch-btn {
  font-family: 'Clash Display', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.7rem 1.6rem;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
.pricing-switch-btn:hover { color: var(--ink); }
.pricing-switch-btn.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(11,19,43,0.06);
}
.pricing-switch-btn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

.pricing-panel { display: none; }
.pricing-panel.active { display: block; animation: pricingFade 0.35s ease both; }
@keyframes pricingFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pricing-panel.active { animation: none; }
}

/* ─── CARD PREZZI (aggiornamenti) ─── */
.price-card-featured {
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 20px 40px -18px rgba(0,87,216,0.22);
}
.price-card-featured .price-badge {
  background: var(--blue);
  left: 50%;
  transform: translateX(-50%);
}

.price-value {
  font-family: 'Clash Display', sans-serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-top: 0.4rem;
}
.price-period {
  font-size: 1rem;
  font-weight: 500;
  color: var(--ink-soft);
  margin-left: 0.2rem;
}
.price-note {
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-top: -0.5rem;
}
.price-features li {
  padding-left: 1.6rem;
  font-size: 0.92rem;
  color: var(--ink);
}
.price-features li::before {
  content: '✓';
  background: none;
  width: auto; height: auto;
  border-radius: 0;
  top: 0;
  color: var(--teal);
  font-weight: 700;
  font-size: 0.95rem;
}
.price-card .btn-primary,
.price-card .btn-secondary {
  border-radius: 999px;
  padding: 0.95rem 1.5rem;
  display: block;
  text-align: center;
  width: 100%;
}

/* ─── TABELLA COMPARATIVA MANUTENZIONE ─── */
.compare-table-wrap {
  max-width: 1200px;
  margin: 3.5rem auto 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 20px;
  border: 1px solid var(--border);
  background: var(--white);
}
.compare-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.compare-table thead th {
  background: var(--cream);
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  color: var(--ink);
  text-align: center;
  padding: 1.25rem 1rem;
}
.compare-table thead th:first-child { text-align: left; padding-left: 1.75rem; }
.compare-table tbody th {
  text-align: left;
  font-weight: 400;
  color: var(--ink);
  padding: 1.05rem 1rem 1.05rem 1.75rem;
  border-top: 1px solid var(--border);
}
.compare-table tbody td {
  text-align: center;
  color: var(--ink-soft);
  padding: 1.05rem 1rem;
  border-top: 1px solid var(--border);
}
.compare-table .ct-yes { color: var(--teal); font-weight: 700; font-size: 1.05rem; }
.compare-table .ct-no  { color: var(--ink-soft); opacity: 0.6; }

/* Accordion di confronto: alternativa alla tabella, solo per mobile (vedi media query sotto) */
.compare-accordion { display: none; }

/* ─── SERVIZI AGGIUNTIVI ─── */
.addons-section { padding-top: 0; }
.addons-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  max-width: 1200px;
  margin: 0 auto;
}
.addon-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.addon-card h3 {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
}
.addon-card p { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; }
.addon-price {
  font-family: 'Clash Display', sans-serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--ink) !important;
  margin-top: auto;
  padding-top: 0.6rem;
}
.addon-price span {
  font-size: 0.85rem;
  font-weight: 400;
  color: var(--ink-soft);
}

/* ─── CAMPI FORM AGGIUNTIVI ─── */
.req { color: var(--accent-dark); }

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .pricing-switch { width: 100%; }
  .pricing-switch-btn { flex: 1; padding: 0.7rem 0.8rem; font-size: 0.88rem; }
  .addons-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .price-value { font-size: 2.2rem; }
  .compare-table-wrap { border-radius: 16px; }
  
  
}

/* ─── TABELLA COMPARATIVA: SU MOBILE DIVENTA ACCORDION ─── */
@media (max-width: 900px) {
  /* La tabella a scorrimento orizzontale lascia il posto all'accordion qui sotto */
  .compare-table-wrap { display: none; }

  .compare-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    max-width: 600px;
    margin: 3rem auto 0;
  }
  .compare-acc-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;
  }
  .compare-acc-featured { border-color: var(--teal); }

  .compare-acc-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: 'Clash Display', sans-serif;
  }
  .compare-acc-item summary::-webkit-details-marker { display: none; }
  .compare-acc-item summary::after {
    content: '+';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--cream);
    color: var(--ink);
    font-size: 1rem;
    line-height: 1;
  }
  .compare-acc-item[open] summary::after { content: '–'; }

  .compare-acc-name {
    font-weight: 600;
    font-size: 1rem;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }
  .compare-acc-badge {
    font-family: 'Cabinet Grotesk', sans-serif;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--white);
    background: var(--teal);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    letter-spacing: 0.02em;
  }
  .compare-acc-price {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: 0.92rem;
    white-space: nowrap;
  }
  .compare-acc-price span { font-size: 0.75rem; font-weight: 400; }

  .compare-acc-list {
    margin: 0;
    padding: 0.25rem 1.25rem 1.1rem;
    border-top: 1px solid var(--border);
  }
  .compare-acc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.65rem 0;
    border-bottom: 1px dashed var(--border);
    font-size: 0.88rem;
  }
  .compare-acc-row:last-child { border-bottom: none; }
  .compare-acc-row dt { color: var(--ink); font-weight: 400; }
  .compare-acc-row dd { margin: 0; color: var(--ink-soft); text-align: right; }
  .compare-acc-row .ct-yes { font-size: 1rem; }
}

/* ─── CARD SERVIZI AGGIUNTIVI CLICCABILI ─── */
a.addon-card {
  color: inherit;
  text-decoration: none;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
a.addon-card:hover {
  border-color: var(--teal);
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(11,19,43,0.07);
}
a.addon-card:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.addon-cta {
  font-family: 'Clash Display', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--teal-dark);
  margin-top: 0.85rem;
}
a.addon-card:hover .addon-cta { color: var(--blue); }
.addon-cta span { display: inline-block; transition: transform 0.2s ease; }
a.addon-card:hover .addon-cta span { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
  a.addon-card, a.addon-card:hover,
  .addon-cta span, a.addon-card:hover .addon-cta span { transform: none; transition: none; }
}

/* ─── RIEPILOGO DELLE SCELTE NEL MODULO ─── */
.scelte-riepilogo {
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem 1.35rem;
  margin-bottom: 2rem;
}
.scelte-riepilogo[hidden] { display: none; }
.scelte-titolo {
  font-family: 'Clash Display', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 0.75rem;
}
.scelte-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.scelta-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-size: 0.88rem;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.scelta-chip:hover { border-color: var(--accent-dark); color: var(--accent-dark); }
.scelta-chip:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.scelta-realizzazione {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
  font-weight: 500;
}
.scelta-realizzazione:hover { background: var(--blue-lt); border-color: var(--blue-lt); color: var(--white); }
.scelta-manutenzione {
  background: var(--teal-dark);
  border-color: var(--teal-dark);
  color: var(--white);
  font-weight: 500;
}
.scelta-manutenzione:hover { background: var(--teal); border-color: var(--teal); color: var(--white); }
.scelta-chip-x { font-size: 1.05rem; line-height: 1; opacity: 0.65; }
.scelta-chip:hover .scelta-chip-x { opacity: 1; }
.scelte-nota {
  font-size: 0.76rem;
  color: var(--ink-soft);
  margin-top: 0.7rem;
}

/* ═══════════════════════════════════════════════════════════════════
   LINGUAGGIO VISIVO — impianto sobrio da software house
   Blu-notte #0E1726 per la struttura, blu #0057D8 come unico accento,
   azzurro tenue #EAF1FE per i riempimenti leggeri, bianco e grigio
   freddo per i fondi. Nessun colore acceso su grandi superfici.
   Titoli Montserrat 800 maiuscolo, parole-accento nello stesso
   Montserrat ma in blu (niente corsivo, niente maiuscoletto). Angoli
   arrotondati simmetrici e ombre morbide sfumate, niente pillola
   asimmetrica ne ombra piena decalcata. Tutto scritto a mano in CSS:
   nessuna libreria esterna.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1. BASE E TIPOGRAFIA ─── */
body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.75;
  font-weight: 400;
}

::selection { background: var(--blue-soft); color: var(--ink); }

.display {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Parola-accento: stesso Montserrat del titolo, stesso peso, solo il
   colore cambia. Niente corsivo ne maiuscoletto forzato: il maiuscolo
   che si vede arriva dal titolo che la contiene (.display), non da
   una regola propria, cosi il testo resta coerente con il resto della
   frase ovunque l'accento compaia. */
.hi-serif,
.hero-title .hi2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-style: normal;
  color: var(--blue);
}

/* Sottolineatura blu che si disegna da sinistra sotto la parola:
   piu sobria di un evidenziatore pieno, ma sempre visibile. */
.hi-mark,
.hero-title .hi {
  color: var(--ink);
  background-image: linear-gradient(var(--blue), var(--blue));
  background-repeat: no-repeat;
  background-position: 0 96%;
  background-size: 100% 0.1em;
  padding-bottom: 0.06em;
}

.label {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.76rem;
  color: var(--blue);
}
.label .dot {
  width: 8px; height: 8px;
  background: var(--blue);
  border: none;
  border-radius: 50%;
  animation: dotBreathe 2.6s ease-in-out infinite;
}
@keyframes dotBreathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.72); }
}
@media (prefers-reduced-motion: reduce) {
  .label .dot { animation: none; }
}

/* ─── 2. PULSANTI ───
   Rettangolo arrotondato, ombra morbida che si approfondisce al passaggio
   del mouse insieme a un lieve sollevamento: nessun rimbalzo, nessuna
   pillola asimmetrica. */
.btn-primary,
.btn-secondary {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--r-btn);
  border: var(--bw) solid transparent;
  padding: 1rem 2.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  white-space: nowrap;
  transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, border-color 0.2s ease;
}
.btn-primary {
  background: var(--blue);
  color: var(--white);
  box-shadow: var(--shadow-soft-sm);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--blue-lt);
  box-shadow: 0 10px 22px -10px rgba(0,87,216,0.5);
  transform: translateY(-2px);
}
.btn-primary:active {
  background: var(--blue-lt);
  box-shadow: 0 4px 10px -4px rgba(0,87,216,0.5);
  transform: translateY(0) scale(0.97);
}

.btn-secondary {
  background: var(--white);
  color: var(--ink);
  border-color: var(--border);
}
.btn-secondary:hover, .btn-secondary:focus-visible {
  background: var(--blue-soft);
  border-color: var(--blue-2);
  color: var(--blue-2);
  transform: translateY(-2px);
}
.btn-secondary:active {
  background: var(--blue-soft);
  transform: translateY(0) scale(0.97);
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active,
  .btn-secondary:hover, .btn-secondary:focus-visible, .btn-secondary:active { transform: none; }
}

/* ─── 4. NAVIGAZIONE ─── */
nav {
  background: rgba(255,255,255,0.94);
  border-bottom: 1.5px solid var(--ink);
  padding: 0 3rem;
  transition: height 0.28s ease, box-shadow 0.28s ease, background-color 0.28s ease;
}
/* Alla prima scrollata la barra si stringe e stacca dal contenuto */
nav.scrolled {
  height: 60px;
  background: rgba(255,255,255,0.97);
  box-shadow: 0 6px 24px -12px rgba(11,19,43,0.35);
}
nav.scrolled .site-logo-img { height: 34px; }
.site-logo-img { transition: height 0.28s ease; }

.nav-links { gap: 2rem; font-weight: 600; font-size: 0.92rem; }
.nav-links a:not(.nav-cta) {
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink);
}
.nav-links a:not(.nav-cta)::after { height: 2px; background: var(--blue); bottom: -6px; }
.nav-links a:not(.nav-cta):hover { color: var(--blue); }

.nav-cta {
  background: var(--blue);
  color: var(--white) !important;
  border: none;
  border-radius: var(--r-btn);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.68rem 1.5rem;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
.nav-cta:hover { background: var(--blue-lt); }
.nav-cta:active { background: var(--blue-lt); transform: scale(0.96); }

.nav-hamburger span { height: 2.5px; background: var(--ink); }
.site-logo-img { border: none; border-radius: 0; }

/* ─── 5. HERO ─── */
.hero { background: var(--bg); padding: 150px 3rem 70px; }

/* Tela delle particelle: rete di punti collegati, disegnata a mano su canvas */
#heroParticles {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Forma morbida e sfumata dietro la scheda, al posto del taglio
   diagonale netto: da profondita senza il linguaggio "agenzia". */
.hero-visual::before {
  content: '';
  position: absolute;
  top: 6%; right: -8%;
  width: 92%; height: 88%;
  background: radial-gradient(circle at 32% 28%, var(--blue-soft), transparent 70%);
  border-radius: 44% 56% 58% 42% / 46% 42% 58% 54%;
  z-index: 0;
}
.hero-card { position: relative; z-index: 1; }

.hero-hex { stroke-width: 2; }
.hero-hex-1 { stroke: var(--ink); }
.hero-hex-2 { stroke: var(--blue); }
.hero-hex-3 { stroke: var(--ink); }
@keyframes heroHexDraw {
  0%   { stroke-dashoffset: 1200; opacity: 0; }
  15%  { opacity: 0.12; }
  100% { stroke-dashoffset: 0; opacity: 0.09; }
}

.hero-title {
  font-size: clamp(2.05rem, 5.6vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 1.75rem 0;
}
/* Ogni riga resta su una riga sola: cosi l evidenziatore copre
   esattamente le parole e non lo spazio vuoto accanto. */
.hero-line-inner { display: inline-block; white-space: nowrap; }

/* L evidenziatore si allarga da sinistra dopo la comparsa della riga.
   Le due animazioni vanno dichiarate insieme: questa regola sostituisce
   la scorciatoia "animation" ereditata da .hero-line-inner, quindi deve
   ripetere anche la comparsa della riga, altrimenti il testo resta invisibile. */
.hero-title .hi {
  background-size: 0% 0.1em;
  animation: heroLineReveal 0.85s cubic-bezier(.16,1,.3,1) 0.36s forwards,
             markGrow 0.8s cubic-bezier(.16,1,.3,1) 1.05s forwards;
}
@keyframes markGrow { to { background-size: 100% 0.1em; } }

.hero-title .hi2 { font-size: 0.94em; }

.hero-sub {
  font-size: 1.08rem;
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 34em;
}
.hero-eyebrow.label { font-size: 0.78rem; }

.hero-card {
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  background: var(--white);
}
.hero-card-icon {
  background: var(--blue);
  border: none;
  border-radius: 12px;
  color: var(--white);
}
.hero-card-title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.45rem;
  color: var(--ink);
  line-height: 1.15;
}
.hero-card-features li { color: var(--ink-soft); font-weight: 500; }
.hero-card-features li::before {
  background: var(--blue);
  border: none;
  width: 7px; height: 7px;
  top: 0.55em;
}
.hero-badge {
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: var(--r-card);
  box-shadow: 0 16px 32px -12px rgba(11,19,43,0.4);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.hero-badge small { font-family: var(--font-body); font-weight: 500; text-transform: none; letter-spacing: 0; color: rgba(255,255,255,0.7); }

/* ─── 6. NASTRO SCORREVOLE ─── */
.ticker {
  background: var(--ink);
  color: var(--white);
  border-top: none;
  border-bottom: none;
  padding: 1.05rem 0;
}
.ticker-item {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  margin: 0 1.6rem;
}
.ticker-sep { color: var(--blue-light); font-size: 0.85rem; }

/* ─── 7. FASCIA NUMERI ─── */
.stats-bar {
  background: var(--cream);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 4.5rem 3rem;
}
.stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.4rem, 4.6vw, 3.6rem);
  color: var(--blue);
  letter-spacing: -0.025em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-label {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

/* ─── 8. INTESTAZIONI DI SEZIONE ─── */
.section { padding: 7rem 3rem; }
.section-title {
  font-size: clamp(2rem, 4.2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0.9rem 0 1.4rem;
}
.section-desc { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.75; }

/* Secondo tempo della comparsa: il titolo sale poco dopo il blocco */
.reveal .section-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(.16,1,.3,1) 0.12s,
              transform 0.7s cubic-bezier(.16,1,.3,1) 0.12s;
}
.reveal.visible .section-title { opacity: 1; transform: none; }

/* Trattino disegnato a mano sotto i titoli: un dettaglio piccolo ma
   presente ovunque, che si attiva allo scroll e non dipende dal passaggio
   del mouse, quindi si vede identico su desktop e su mobile. */
.section-title::after {
  content: '';
  display: block;
  width: 0;
  height: 3px;
  margin-top: 0.85rem;
  background: var(--blue);
  transition: width 0.6s cubic-bezier(.16,1,.3,1) 0.35s;
}
.reveal.visible .section-title::after { width: 60px; }
.process-bg .section-title::after { background: var(--blue-light); }
@media (prefers-reduced-motion: reduce) {
  .section-title::after { transition: none; width: 60px; }
}

/* ─── 9. CARD SERVIZI ─── */
.services { background: var(--bg); }
.srv {
  background: var(--white);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-card);
  padding: 2.5rem 2.25rem;
  box-shadow: var(--shadow-soft-sm);
  transition: transform 0.25s cubic-bezier(.2,1,.3,1), box-shadow 0.25s ease, background-color 0.25s ease;
}
.srv:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
  border-color: var(--ink);
  background: var(--white);
}
.srv-icon {
  width: 58px; height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  background: var(--blue-soft);
  border: none;
  border-radius: 14px;
  margin-bottom: 1.35rem;
  transition: transform 0.3s ease-out;
}
.srv:hover .srv-icon { transform: translateY(-3px) rotate(-4deg); }
.srv h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.18rem;
  line-height: 1.2;
  color: var(--ink);
}
.srv p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }
.srv-link {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.srv:hover .srv-link { color: var(--ink); }

/* ─── 10. CARD PROMOZIONALE ─── */
.promo-card {
  background: var(--blue-soft);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.promo-card-icon {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 14px;
  color: var(--blue);
}
.promo-card-text h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.3rem;
  color: var(--ink);
}
.promo-card-text p { color: var(--ink-soft); font-weight: 400; }
.promo-card .hi-mark { background-image: linear-gradient(var(--ink), var(--ink)); }
.promo-card .btn-primary { background: var(--ink); color: var(--white); border-color: var(--ink); }
.promo-card .btn-primary:hover { background: var(--blue); }

/* ─── 11. PREZZI ─── */
.pricing-switch {
  background: var(--white);
  border: 1.5px solid var(--ink);
  padding: 0.3rem;
  box-shadow: var(--shadow-soft-sm);
}
.pricing-switch-btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
}
.pricing-switch-btn.active {
  background: var(--ink);
  color: var(--white);
  box-shadow: none;
  border: none;
}
.pricing-switch-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }

.price-card {
  background: var(--cream);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft-sm);
  transition: transform 0.25s cubic-bezier(.2,1,.3,1), box-shadow 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.price-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.2rem;
  color: var(--ink);
}
.price-card .price-value { color: var(--ink); font-weight: 800; letter-spacing: -0.025em; }
.price-features li::before { color: var(--blue); }
.price-card .btn-primary,
.price-card .btn-secondary {
  border-radius: var(--r-btn);
  display: inline-flex;
  justify-content: center;
  width: 100%;
  padding: 0.95rem 1.5rem;
}

.price-card-featured:hover { box-shadow: 0 26px 52px -18px rgba(0,87,216,0.3); }
.price-badge {
  background: var(--blue);
  color: var(--white);
  border: none;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.08em;
}

/* ─── 12. SERVIZI AGGIUNTIVI ─── */
.addons-section { background: var(--cream); }
.addon-card, a.addon-card {
  background: var(--white);
  border: var(--bw) solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft-sm);
}
a.addon-card:hover {
  border-color: var(--ink);
  transform: translateY(-6px);
  box-shadow: var(--shadow-soft);
}
a.addon-card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.addon-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.addon-price { font-weight: 800; letter-spacing: -0.025em; color: var(--ink) !important; }
.addon-cta {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--blue);
}
a.addon-card:hover .addon-cta { color: var(--ink); }

/* ─── 13. CHI SIAMO ─── */
.about-img-wrap {
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
}
.about-card-float {
  background: var(--ink);
  color: var(--white);
  border: none;
  border-radius: var(--r-card);
  box-shadow: 0 18px 36px -14px rgba(11,19,43,0.45);
}
.acf-num { font-family: var(--font-display); font-weight: 800; color: var(--white); }
.acf-label { color: rgba(255,255,255,0.7); font-weight: 500; opacity: 1; }

/* La citazione e lunga: resta in Montserrat corsivo per restare leggibile,
   il serif in maiuscoletto e riservato alle parole singole. */
blockquote {
  border-left: 4px solid var(--blue);
  padding-left: 1.6rem;
  font-family: var(--font-body);
  font-weight: 500;
  font-style: italic;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--ink);
  text-transform: none;
}
blockquote cite { font-family: var(--font-body); font-weight: 600; font-style: normal; text-transform: none; color: var(--ink-soft); }

/* Sui fondi scuri la parola-accento passa all azzurro chiaro, che si legge meglio */
.process-bg .hi-serif { color: var(--blue-light); }

/* ─── 14. COME LAVORIAMO (sezione scura) ─── */
.process-bg { background: var(--bg-dark); border-radius: 0; margin: 0; }
.ps { border-top: 1px solid rgba(255,255,255,0.18); }
.ps-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2rem;
  color: var(--blue-light);
  letter-spacing: -0.025em;
  line-height: 1;
}
.ps h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.12rem;
  color: var(--white);
}
.ps p { color: rgba(255,255,255,0.62); font-size: 0.95rem; }
.process-bg .section-title { color: var(--white); }
.process-bg .section-desc { color: rgba(255,255,255,0.62); }
.process-bg .label { color: var(--blue-light); }

/* ─── 15. PERCHE NOI ─── */
.why { background: var(--bg); }
.why-icon {
  background: var(--blue-soft);
  border: none;
  border-radius: 14px;
}
/* Il markup usa h3, non h4: la vecchia regola .why-item h4 non colpiva nulla. */
.why-item h3, .why-item h4 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 1.02rem;
  line-height: 1.25;
  margin-bottom: 0.5rem;
  color: var(--ink);
}
.why-item p { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.7; }

/* ─── 16. CONTATTI E MODULO ─── */
#contatti { background: var(--cream); }
.channel-icon {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 50%;
}
.channel-label { font-weight: 700; letter-spacing: 0.1em; font-size: 0.7rem; color: var(--ink-soft); }
.channel-val { font-family: var(--font-display); font-weight: 800; color: var(--ink); font-size: 1.02rem; }

.contact-form {
  background: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-soft);
  padding: 3rem;
}
.contact-form-header h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.form-field label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
}
.form-field input,
.form-field textarea,
.phone-prefix {
  background: var(--white);
  border: 1.5px solid var(--ink);
  border-radius: 12px;
  font-family: var(--font-body);
  font-weight: 500;
}
.form-field input:focus,
.form-field textarea:focus,
.phone-prefix:focus {
  outline: none;
  background: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,87,216,0.18);
}
.form-field input::placeholder,
.form-field textarea::placeholder { color: #98a2b3; }

.form-submit {
  background: var(--blue);
  color: var(--white);
  border: 2px solid var(--ink);
  border-radius: var(--r-btn);
  box-shadow: var(--shadow-soft-sm);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1.15rem;
  transition: background-color 0.25s ease;
  will-change: transform;
}
.form-submit:hover { background: var(--blue-lt); }
.form-submit:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

.privacy-check-row input { border: 1.5px solid var(--ink); background: var(--white); border-radius: 4px; }
.privacy-check-row input:checked { background: var(--blue); border-color: var(--blue); }
.privacy-check-row input:checked::after { border-color: var(--white); border-width: 0 2.5px 2.5px 0; }
.privacy-check-row a { color: var(--blue); }

.file-dropzone { border: 1.5px dashed var(--ink); background: var(--white); }
.file-dropzone:hover,
.file-dropzone.dragover { border-color: var(--blue); background: var(--blue-soft); }
.file-dropzone-link { color: var(--blue); }
.file-selected-name { color: var(--blue); font-weight: 700; }
.req { color: var(--blue); }

.scelte-riepilogo { background: var(--blue-soft); border: 1.5px solid var(--ink); border-radius: var(--r-card); }
.scelte-titolo {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.74rem;
  color: var(--ink);
}
.scelta-chip { border: 1.5px solid var(--ink); background: var(--white); font-weight: 500; }
.scelta-chip:hover { border-color: var(--blue); color: var(--blue); }
.scelta-realizzazione { background: var(--blue); border-color: var(--blue); color: var(--white); }
.scelta-realizzazione:hover { background: var(--blue-lt); border-color: var(--blue-lt); color: var(--white); }
.scelta-manutenzione { background: var(--ink); border-color: var(--ink); color: var(--white); }
.scelta-manutenzione:hover { background: var(--blue); border-color: var(--blue); color: var(--white); }

/* ─── 17. TABELLA COMPARATIVA ─── */
.compare-table-wrap { border: 1.5px solid var(--ink); border-radius: var(--r-card); }
.compare-table thead th {
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.78rem;
}
.compare-table .ct-yes { color: var(--blue); font-weight: 800; }
.compare-acc-item { border: 1.5px solid var(--ink); border-radius: 16px; }
.compare-acc-featured { border-color: var(--blue); box-shadow: var(--shadow-soft-sm); }
.compare-acc-badge { background: var(--blue); color: var(--white); border: none; font-weight: 700; }
.compare-acc-item summary::after { background: var(--blue-soft); border: none; color: var(--ink); }

/* ─── 18. FOOTER (blocco scuro di chiusura) ─── */
footer { background: var(--bg-dark); color: rgba(255,255,255,0.68); border-top: 3px solid var(--blue); }
.footer-tagline { color: rgba(255,255,255,0.6); }
.footer-contact-links a { color: rgba(255,255,255,0.85); font-weight: 500; }
.footer-contact-links a:hover { color: var(--blue-light); }
.footer-social a { background: var(--white); border: none; }
.footer-social a:hover { background: var(--blue-soft); transform: translateY(-2px); }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.16); color: rgba(255,255,255,0.52); }
.footer-links a { color: rgba(255,255,255,0.68); }
.footer-links a:hover { color: var(--blue-light); }
.footer-logo-img { border: none; border-radius: 8px; }

/* ─── 19. BANNER COOKIE E TORNA SU ─── */
.cookie-banner { background: var(--bg-dark); border-top: 2px solid var(--blue); }
.cookie-content a { color: var(--blue-light); }
.cookie-btn {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: var(--r-btn);
  border: 1.5px solid transparent;
  will-change: transform;
}
.cookie-btn.accept { background: var(--blue); color: var(--white); }
.cookie-btn.reject { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.45); }
.cookie-btn:hover { opacity: 1; }

.back-to-top {
  background: var(--ink);
  color: var(--white);
  border: 1.5px solid var(--ink);
  box-shadow: 0 8px 20px -8px rgba(11,19,43,0.5);
  font-weight: 700;
}
.back-to-top:hover { background: var(--blue); border-color: var(--blue); transform: translateY(-3px); }

/* ─── 20. COMPARSA A CASCATA ───
   Le card della stessa griglia entrano una dopo l altra, non tutte insieme. */
.reveal { transform: translateY(24px); }
.services-grid > .reveal:nth-child(1), .pricing-grid > .reveal:nth-child(1),
.addons-grid > .reveal:nth-child(1), .why-grid > .reveal:nth-child(1),
.stats-bar > .reveal:nth-child(1) { transition-delay: 0ms; }
.services-grid > .reveal:nth-child(2), .pricing-grid > .reveal:nth-child(2),
.addons-grid > .reveal:nth-child(2), .why-grid > .reveal:nth-child(2),
.stats-bar > .reveal:nth-child(2) { transition-delay: 90ms; }
.services-grid > .reveal:nth-child(3), .pricing-grid > .reveal:nth-child(3),
.addons-grid > .reveal:nth-child(3), .why-grid > .reveal:nth-child(3),
.stats-bar > .reveal:nth-child(3) { transition-delay: 180ms; }
.services-grid > .reveal:nth-child(4), .pricing-grid > .reveal:nth-child(4),
.addons-grid > .reveal:nth-child(4), .why-grid > .reveal:nth-child(4),
.stats-bar > .reveal:nth-child(4) { transition-delay: 270ms; }
.services-grid > .reveal:nth-child(5), .addons-grid > .reveal:nth-child(5),
.why-grid > .reveal:nth-child(5) { transition-delay: 360ms; }
.services-grid > .reveal:nth-child(6), .addons-grid > .reveal:nth-child(6),
.why-grid > .reveal:nth-child(6) { transition-delay: 450ms; }

/* ─── 21. MOVIMENTO RIDOTTO ───
   Se il sistema operativo chiede meno animazioni, restano solo i colori. */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .btn-primary:focus-visible,
  .btn-secondary:hover, .btn-secondary:focus-visible,
  .nav-cta:hover, .nav-cta:focus-visible,
  .form-submit:hover, .form-submit:focus-visible,
  .cookie-btn:hover { animation: none !important; }
  .hero-title .hi { animation: none !important; background-size: 100% 0.1em !important; }
  .ticker-inner { animation: none !important; }
  .srv:hover, .price-card:hover, a.addon-card:hover { transform: none !important; }
  .reveal .section-title { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal { transition-delay: 0ms !important; }
  nav, .site-logo-img { transition: none !important; }
}

/* ─── 22a. FASCIA INTERMEDIA (tablet e portatili piccoli) ─── */
@media (max-width: 1200px) and (min-width: 901px) {
  .hero { padding: 140px 2rem 60px; gap: 2.5rem; }
  .section { padding: 6rem 2rem; }
  nav { padding: 0 2rem; }
  .btn-primary, .btn-secondary { padding: 0.9rem 1.5rem; font-size: 0.78rem; gap: 0.5rem; }
  .stats-bar { padding: 4rem 2rem; }
}

/* ─── 22. ADATTAMENTO A SCHERMI PICCOLI ───
   Le spaziature ridotte sono ripetute qui perche queste regole devono avere
   la precedenza finale rispetto al blocco visivo qui sopra. */
@media (max-width: 900px) {
  nav { padding: 1rem 1.25rem; }
  nav.scrolled { height: 60px; }
  /* Senza la scheda laterale il contenuto non deve piu essere centrato
     in verticale, altrimenti sui telefoni resta molto vuoto in alto. */
  .hero { padding: 120px 1.25rem 48px; min-height: auto; align-items: start; }
  .hero-title { margin: 1.25rem 0; }
  .hero-sub { margin-left: auto; margin-right: auto; }
  .stats-bar { padding: 3rem 1.25rem; gap: 2.5rem 1rem; }
  .section { padding: 4.5rem 1.25rem; }
  .srv { padding: 1.75rem 1.5rem; }
  .srv-icon { width: 52px; height: 52px; font-size: 1.5rem; margin-bottom: 1rem; }
  .contact-form { padding: 1.75rem 1.1rem !important; border-width: 2px; }
  .promo-card, .hero-card, .about-img-wrap { box-shadow: var(--shadow-soft-sm); }
  .ticker-item { font-size: 0.8rem; margin: 0 1rem; }
  .btn-primary, .btn-secondary { padding: 0.95rem 1.6rem; font-size: 0.82rem; }
  .nav-links a:not(.nav-cta) { font-size: 1rem; }
  .price-card:hover, .srv:hover, a.addon-card:hover { transform: none; box-shadow: var(--shadow-soft-sm); }
  .reveal { transition-delay: 0ms !important; }
}

/* ─── CARD SERVIZI COME COLLEGAMENTI ───
   Le sei card dei servizi erano <div> con un onclick JavaScript: cliccabili
   col mouse, ma invisibili a Google e irraggiungibili da tastiera. Ora sono
   veri <a>. Queste regole azzerano lo stile predefinito dei collegamenti
   (sottolineatura e colore) in modo che l'aspetto resti identico a prima,
   e aggiungono un contorno visibile per chi naviga con il tasto Tab. */
a.srv {
  text-decoration: none;
  color: inherit;
}
a.srv:hover,
a.srv:focus-visible {
  text-decoration: none;
  color: inherit;
}
a.srv:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ─── ICONE SVG ───
   Le icone erano emoji: rese in modo diverso da ogni sistema operativo,
   lette ad alta voce dagli screen reader e stonate accanto a un listino
   prezzi. Ora sono SVG lineari con lo stesso tratto. Ereditano il colore
   dal contenitore tramite currentColor, quindi seguono la palette senza
   duplicare valori. Le dimensioni dei riquadri restano quelle di prima. */
.srv-icon    { color: var(--blue); }
.why-icon    { color: var(--blue); }
.channel-icon{ color: var(--ink); }

.srv-icon svg,
.why-icon svg,
.channel-icon svg {
  display: block;
  width: 26px;
  height: 26px;
}
.srv-icon svg { width: 28px; height: 28px; }
.channel-icon svg { width: 20px; height: 20px; }

@media (max-width: 768px) {
  .srv-icon svg { width: 24px; height: 24px; }
}

/* ─── PREZZI: "a partire da" e nota sui progetti fuori standard ───
   La dicitura sta sopra la cifra, in piccolo e in maiuscoletto, per non
   competere con il prezzo. Mantiene l'ancoraggio del listino pubblico e
   lascia il margine per quotare i lavori piu' grandi. */

.pricing-footnote {
  max-width: 660px;
  margin: 2rem auto 0;
  text-align: center;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ─── DOMANDE FREQUENTI ───
   Usa <details>/<summary> nativi: si aprono e chiudono senza JavaScript,
   restano accessibili da tastiera e il testo e' sempre presente nel codice
   della pagina, quindi leggibile da Google. E' la condizione perche' i dati
   strutturati FAQPage siano validi. */
.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: var(--white);
  overflow: hidden;
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 1.15rem 3rem 1.15rem 1.35rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  position: relative;
  transition: color 0.2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  position: absolute;
  right: 1.35rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--blue);
  line-height: 1;
}
.faq-item[open] summary::after { content: '\2212'; }
.faq-item summary:hover { color: var(--blue); }
.faq-item summary:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: -3px;
}
.faq-item p {
  padding: 0 1.35rem 1.35rem;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.75;
  font-size: 0.95rem;
}

/* Il modulo ha ora una sola colonna dove prima ce n'erano due */
.form-row-single { grid-template-columns: 1fr; }

/* ─── ALLEGATO: nome del file con pulsante di rimozione ───
   Prima il nome del file compariva senza alcun modo di toglierlo: chi ne
   selezionava uno per errore doveva ricaricare la pagina e perdeva tutto
   quello che aveva scritto. */
.file-selected-name {
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}
.file-selected-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
}
.file-selected-label {
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.file-remove-btn {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.file-remove-btn:hover,
.file-remove-btn:focus-visible {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.file-remove-btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
}

@media (min-width: 901px) and (max-width: 1150px) {
  .nav-links { gap: 1rem; }
  nav { padding-inline: 1.5rem; }
}

/* ═══════════════════════════════════════════════════════════════════
   CORREZIONI 20 SETTEMBRE 2026
   ═══════════════════════════════════════════════════════════════════ */

/* Contenuti visibili anche senza JavaScript: gli elementi .reveal partono
   nascosti solo quando script.js ha aggiunto la classe "js" a <html>.
   Se lo script non si carica, le sezioni non restano invisibili. */
html:not(.js) .reveal,
html:not(.js) .reveal .section-title {
  opacity: 1;
  transform: none;
}
html:not(.js) .section-title::after { width: 60px; }

/* Hamburger come vero <button>: raggiungibile da tastiera e letto dagli
   screen reader. Si azzera lo stile predefinito del pulsante. */
button.nav-hamburger {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}
button.nav-hamburger:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 4px;
  border-radius: 4px;
}

@media (max-width: 900px) {
  /* Quando la barra si restringe a 60px il menu deve partire subito sotto,
     senza lasciare una fascia da cui si vede la pagina. */
  nav.scrolled .nav-links { top: 60px; }
}

/* Esito dell'invio del modulo, mostrato nella pagina al posto degli alert() */
.form-status {
  margin: 0 0 1.25rem;
  padding: 0.9rem 1.1rem;
  border-radius: 12px;
  border: 1.5px solid;
  font-size: 0.92rem;
  line-height: 1.5;
}
.form-status[hidden] { display: none; }
.form-status-ok     { background: #ecfdf3; border-color: #15803d; color: #14532d; }
.form-status-errore { background: #fef2f2; border-color: #b91c1c; color: #7f1d1d; }
.form-status-info   { background: var(--blue-soft); border-color: var(--blue); color: var(--ink); }

/* Link "Preferenze cookie" nel footer: stesso aspetto degli altri link */
.footer-cookie-btn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: rgba(255,255,255,0.68);
  cursor: pointer;
}
.footer-cookie-btn:hover { color: var(--blue-light); }
.footer-cookie-btn:focus-visible { outline: 2px solid var(--blue-light); outline-offset: 3px; }

/* Icone delle pagine servizi: SVG lineari al posto delle emoji, stesso
   tratto e colore delle icone della homepage. */
.service-feature-icon { color: var(--blue); }
.service-feature-icon svg { display: block; width: 26px; height: 26px; }
.service-feature-icon.c-accent { background: var(--blue-soft); }

/* Titoli maiuscoli in Clash Display: con la spaziatura negativa tra le
   lettere lo spazio tra le parole quasi spariva nei titoli piccoli
   ("RISOLUZIONEBUGRAPIDA"). Un leggero word-spacing lo ripristina. */
h1, h2, h3, h4, .display, .hero-card-title, .price-value-text,
.btn-primary, .btn-secondary, .nav-cta, .form-submit, .cookie-btn, .btn-404,
.srv-link, .addon-cta, .price-badge, .pricing-switch-btn { word-spacing: 0.12em; }

/* Card prezzo senza cifra ("Preventivo personalizzato"): testo, non importo,
   quindi dimensione ridotta per non dominare le card accanto. */
.price-card .price-value.price-value-text {
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
  padding: 0.55rem 0 0.35rem;
}