/* ==========================================================================
   AI Design System 2.0 — ArtInformatica
   Livello di presentazione condiviso. Ogni regola è limitata a body.ai-ds
   (classe aggiunta solo sui template abilitati in inc/ai-design-system.php),
   quindi le pagine non abilitate non cambiano.

   Palette: SOLO i colori già presenti nel tema (nessun colore nuovo).
   Font: Plus Jakarta Sans variabile, ospitato in /fonts.
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2-variations"),
       url("../../fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  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: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2-variations"),
       url("../../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  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;
}

/* --------------------------------------------------------------------------
   Token — valori identici a quelli già usati nei template
   -------------------------------------------------------------------------- */
body.ai-ds {
  /* Brand */
  --ai-red: #BE1521;
  --ai-red-dim: rgba(190,21,33,0.07);
  --ai-red-soft: rgba(190,21,33,0.12);
  --ai-red-line: rgba(190,21,33,0.2);
  --ai-red-glow: rgba(190,21,33,0.35);
  /* Testo */
  --ai-ink: #1e293b;
  --ai-ink-deep: #0f172a;
  --ai-text-2: #475569;
  --ai-text-3: #64748b;
  --ai-text-4: #94a3b8;
  --ai-on-dark: #cbd5e1;
  /* Superfici */
  --ai-bg: #f1f5f9;
  --ai-bg-2: #e8edf3;
  --ai-bg-3: #dde3eb;
  --ai-surface: #ffffff;
  --ai-line: #d1d9e0;
  --ai-line-2: #cbd5e1;
  /* Stato */
  --ai-ok: #16a34a;
  /* Tipografia */
  --ai-font: "Plus Jakarta Sans", Arial, Helvetica, sans-serif;
  --ai-fs-xs: 0.8125rem;   /* 13 */
  --ai-fs-sm: 0.9375rem;   /* 15 */
  --ai-fs-md: 1.0625rem;   /* 17 */
  --ai-fs-lg: 1.1875rem;   /* 19 */
  --ai-fs-h3: 1.1875rem;
  --ai-fs-h2: clamp(1.875rem, 1.35rem + 1.9vw, 2.75rem);
  --ai-fs-h1: clamp(2.375rem, 1.55rem + 3.1vw, 3.75rem);
  /* Spaziatura (scala 4/8) */
  --ai-s2: 8px; --ai-s3: 12px; --ai-s4: 16px; --ai-s5: 24px; --ai-s6: 32px; --ai-s7: 48px; --ai-s8: 64px;
  --ai-sec-y: clamp(64px, 7vw, 112px);
  --ai-gutter: clamp(16px, 4vw, 40px);
  /* Forme ed elevazione */
  --ai-r-sm: 8px; --ai-r-md: 12px; --ai-r-lg: 18px; --ai-r-pill: 999px;
  --ai-shadow-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04);
  --ai-shadow-2: 0 10px 20px -14px rgba(15,23,42,0.30), 0 1px 3px rgba(15,23,42,0.05);
  --ai-shadow-red: 0 6px 12px -8px var(--ai-red-glow);
  /* Movimento */
  --ai-ease: cubic-bezier(.2,.7,.2,1);
  --ai-t-fast: 160ms;
  --ai-t-med: 280ms;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
body.ai-ds {
  font-family: var(--ai-font) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  color: var(--ai-ink) !important;
  background: var(--ai-bg) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* I template impostano overflow-x:hidden su html/body, che disattiva position:sticky
   della nav. clip impedisce comunque lo scroll orizzontale senza rompere sticky. */
html:has(> body.ai-ds),
body.ai-ds { overflow-x: clip !important; }
/* Sostituisce Syne / DM Sans anche dove erano scritti negli attributi style */
body.ai-ds :where(h1, h2, h3, h4, h5, h6, p, a, li, span, div, button, input, select, textarea, label, td, th, strong, em, small, section, footer, nav),
body.ai-ds svg text {
  font-family: var(--ai-font) !important;
}
/* Le ancore (#servizi, #contatti…) non finiscono sotto la nav fissa */
body.ai-ds [id] { scroll-margin-top: 104px; }
body.ai-ds :where(h1, h2, h3, h4) { text-wrap: balance; }
body.ai-ds :focus-visible {
  outline: 2px solid var(--ai-red);
  outline-offset: 3px;
  border-radius: 6px;
}
body.ai-ds .ai-icon {
  width: 1.25em; height: 1.25em; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -0.2em;
}
body.ai-ds .ai-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Navigazione
   -------------------------------------------------------------------------- */
body.ai-ds .mn {
  padding: 12px var(--ai-gutter);
  min-height: 76px;
  background: rgba(241,245,249,0.86) !important;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: box-shadow var(--ai-t-med) var(--ai-ease), border-color var(--ai-t-med) var(--ai-ease);
}
body.ai-ds.admin-bar .mn { top: 32px; }
@media (max-width: 782px) { body.ai-ds.admin-bar .mn { top: 46px; } }
@media (max-width: 600px) { body.ai-ds.admin-bar .mn { top: 0; } }
body.ai-ds.ai-scrolled .mn {
  border-bottom-color: var(--ai-line);
  box-shadow: 0 6px 14px -10px rgba(15,23,42,0.25);
}
body.ai-ds .mn-logo img {
  height: 54px !important;
  width: auto !important;
}
body.ai-ds .mn-links { gap: clamp(14px, 1.6vw, 26px); }
body.ai-ds .mn-links a {
  position: relative;
  font-size: var(--ai-fs-sm);
  font-weight: 500;
  color: var(--ai-text-2);
  padding: 8px 0;
}
body.ai-ds .mn-links a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; border-radius: 2px;
  background: var(--ai-red);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--ai-t-med) var(--ai-ease);
}
body.ai-ds .mn-links a:hover,
body.ai-ds .mn-links a.active { color: var(--ai-ink); font-weight: 500; }
body.ai-ds .mn-links a:hover::after,
body.ai-ds .mn-links a.active::after { transform: scaleX(1); }
body.ai-ds .mn-cta {
  padding: 12px 20px;
  border-radius: var(--ai-r-md);
  font-size: var(--ai-fs-sm);
  font-weight: 600;
  box-shadow: var(--ai-shadow-red);
  transition: transform var(--ai-t-fast) var(--ai-ease), box-shadow var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds .mn-cta:hover { opacity: 1; transform: translateY(-1px); box-shadow: 0 8px 16px -8px var(--ai-red-glow); }
body.ai-ds .mn-ham {
  width: 44px; height: 44px; padding: 0;
  place-items: center;
  border: 1px solid var(--ai-line) !important;
  border-radius: var(--ai-r-md);
  background: var(--ai-surface) !important;
  color: var(--ai-ink);
}
body.ai-ds .mn-ham .ai-icon { width: 22px; height: 22px; display: block; margin: auto; }
/* Menu mobile: gli stili inline restano, qui solo tipografia e ritmo */
body.ai-ds #mn-mobile a:not([style*="background:#BE1521"]) {
  font-size: 1.375rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  padding: 10px 0 !important;
}
body.ai-ds #mn-mobile a[style*="background:#BE1521"] {
  border-radius: var(--ai-r-md) !important;
  font-weight: 600 !important;
  box-shadow: var(--ai-shadow-red);
}
body.ai-ds #mn-mobile .ai-icon { width: 22px; height: 22px; vertical-align: -3px; margin-right: 6px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
body.ai-ds .hero-wrap {
  background:
    radial-gradient(900px 460px at 88% -8%, var(--ai-red-dim), transparent 62%),
    radial-gradient(700px 420px at -6% 110%, rgba(30,41,59,0.05), transparent 60%),
    var(--ai-bg) !important;
  border-bottom: 1px solid var(--ai-line);
}
/* Griglia tecnica, sfumata verso i bordi */
body.ai-ds .hero-wrap::before {
  content: "";
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(30,41,59,0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30,41,59,0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 60% 40%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 75% 70% at 60% 40%, #000 25%, transparent 78%);
}
body.ai-ds .hero-wrap .radar-bg { opacity: 0.75; }
body.ai-ds .hero {
  max-width: 1200px;
  padding: clamp(56px, 7vw, 104px) var(--ai-gutter) clamp(72px, 8vw, 120px);
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: clamp(40px, 5vw, 72px);
}
body.ai-ds .hero > * { min-width: 0; }
body.ai-ds .hero-breadcrumb {
  font-size: var(--ai-fs-xs);
  color: var(--ai-text-2);
  margin-bottom: var(--ai-s4);
}
body.ai-ds .hero-breadcrumb a { color: var(--ai-text-2); text-decoration: none; }
body.ai-ds .hero-breadcrumb a:hover { color: var(--ai-red); }
body.ai-ds .hero-tag {
  gap: 8px;
  padding: 7px 14px 7px 12px;
  margin-bottom: var(--ai-s5);
  border-radius: var(--ai-r-pill);
  background: var(--ai-surface);
  border: 1px solid var(--ai-red-line);
  color: var(--ai-red);
  font-size: var(--ai-fs-xs);
  font-weight: 600;
  letter-spacing: 0.02em;
  box-shadow: var(--ai-shadow-1);
}
body.ai-ds .hero h1 {
  font-size: var(--ai-fs-h1);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--ai-ink);
  margin-bottom: var(--ai-s5);
}
body.ai-ds .hero h1 em,
body.ai-ds .hero h1 span { color: var(--ai-red); font-style: normal; }
body.ai-ds .hero-desc,
body.ai-ds .hero-sub {
  font-size: var(--ai-fs-lg);
  line-height: 1.65;
  color: var(--ai-text-2);
  max-width: 34em;
  margin-bottom: var(--ai-s6);
}
body.ai-ds .hero-ctas { gap: var(--ai-s3); }

/* --------------------------------------------------------------------------
   Pulsanti (classi dei due set storici: btn-p/btn-g e btn-primary/btn-secondary)
   -------------------------------------------------------------------------- */
body.ai-ds :is(.btn-p, .btn-primary, .pcta.cs) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--ai-r-md);
  background: var(--ai-red);
  color: #fff;
  font-size: var(--ai-fs-sm);
  font-weight: 650;
  letter-spacing: 0.005em;
  border: 1px solid var(--ai-red);
  box-shadow: var(--ai-shadow-red);
  transition: transform var(--ai-t-fast) var(--ai-ease), box-shadow var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds :is(.btn-p, .btn-primary, .pcta.cs):hover {
  opacity: 1; color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px -8px var(--ai-red-glow);
}
body.ai-ds :is(.btn-p, .btn-primary, .pcta.cs):active { transform: translateY(0); }
body.ai-ds :is(.btn-g, .btn-secondary, .pcta.cg) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--ai-r-md);
  background: var(--ai-surface);
  color: var(--ai-ink);
  font-size: var(--ai-fs-sm);
  font-weight: 600;
  border: 1px solid var(--ai-line);
  box-shadow: var(--ai-shadow-1);
  transition: border-color var(--ai-t-fast) var(--ai-ease), color var(--ai-t-fast) var(--ai-ease), transform var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds :is(.btn-g, .btn-secondary, .pcta.cg):hover {
  border-color: var(--ai-ink);
  color: var(--ai-ink);
  opacity: 1;
  transform: translateY(-2px);
}
body.ai-ds :is(.btn-p, .btn-primary, .btn-g, .btn-secondary) .ai-icon { width: 18px; height: 18px; }

/* --------------------------------------------------------------------------
   Pannello "Stato infrastruttura" (homepage) e box Kite (VoIP)
   -------------------------------------------------------------------------- */
body.ai-ds :is(.hp, .kite-box) {
  position: relative;
  background: var(--ai-surface);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
  box-shadow: 0 20px 36px -24px rgba(15,23,42,0.35), 0 1px 4px rgba(15,23,42,0.05);
  padding: 28px 30px;
}
body.ai-ds .hp-hdr {
  font-size: var(--ai-fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--ai-ink);
  display: inline-flex; align-items: center; gap: 10px;
}
body.ai-ds .hp-hdr::before,
body.ai-ds .presence-dot {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ai-ok);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.18);
}
body.ai-ds .hp-row { padding: 14px 0; border-bottom-color: var(--ai-bg-2); }
body.ai-ds .hp-lbl { font-size: var(--ai-fs-sm); color: var(--ai-ink); font-weight: 500; }
body.ai-ds .hp-val { font-weight: 700; font-variant-numeric: tabular-nums; }
body.ai-ds .hp-sub { color: var(--ai-text-3); font-weight: 500; text-align: right; }
body.ai-ds .hp a[href*="supporto"] {
  border-radius: var(--ai-r-md) !important;
  padding: 12px !important;
  font-weight: 600 !important;
  box-shadow: var(--ai-shadow-red);
}
body.ai-ds .kite-box-header { border-bottom-color: var(--ai-bg-2); }
body.ai-ds .kite-box-header :is(h2, h3) { font-size: var(--ai-fs-md); font-weight: 700; }
body.ai-ds .kite-contact-card {
  border-radius: var(--ai-r-md);
  background: var(--ai-bg);
  transition: border-color var(--ai-t-fast) var(--ai-ease), transform var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds .kite-contact-card:hover { transform: translateY(-2px); }
body.ai-ds .full-name { font-weight: 700; }

/* --------------------------------------------------------------------------
   Fascia KPI (homepage)
   -------------------------------------------------------------------------- */
body.ai-ds .sb {
  position: relative; z-index: 2;
  width: calc(100% - 2 * var(--ai-gutter));
  max-width: 1200px;
  margin: -56px auto 0;
  padding: clamp(28px, 4vw, 44px) clamp(20px, 4vw, 48px);
  background: var(--ai-surface) !important;
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
  box-shadow: var(--ai-shadow-2);
}
body.ai-ds .si { border-right-color: var(--ai-bg-2); }
body.ai-ds .sn {
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.875rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
body.ai-ds .sd { font-size: var(--ai-fs-sm); color: var(--ai-text-2); font-weight: 500; }

/* --------------------------------------------------------------------------
   Sezioni
   -------------------------------------------------------------------------- */
body.ai-ds .sec {
  max-width: 1200px;
  padding-left: var(--ai-gutter);
  padding-right: var(--ai-gutter);
  padding-bottom: var(--ai-sec-y);
}
body.ai-ds .sec:not([style*="padding-top:0"]) { padding-top: var(--ai-sec-y); }
/* Prima sezione dopo la fascia KPI: lo style inline padding-top:0 la incollerebbe alla card */
body.ai-ds .sb + .sec { padding-top: var(--ai-sec-y) !important; }
body.ai-ds .sec-tag {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ai-red-dim);
  color: var(--ai-red);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: var(--ai-r-pill);
  margin-bottom: var(--ai-s4);
}
body.ai-ds .sec-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
body.ai-ds .sec-title {
  font-size: var(--ai-fs-h2);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.022em;
  color: var(--ai-ink);
  margin-bottom: var(--ai-s4);
}
body.ai-ds .sec-title em { font-style: normal; color: var(--ai-red); }
body.ai-ds .sec-sub {
  font-size: var(--ai-fs-md);
  line-height: 1.65;
  color: var(--ai-text-2);
  max-width: 40em;
  margin-bottom: var(--ai-s7);
}
/* Fascia bianca a tutta larghezza per i servizi: alterna il ritmo delle sezioni */
body.ai-ds #servizi {
  position: relative;
  /* fondo a tutta larghezza senza ombre giganti (più economico da dipingere) */
  border-image: conic-gradient(var(--ai-surface) 0 0) fill 0 // 0 100vw;
  padding-top: var(--ai-sec-y);
  margin-bottom: var(--ai-sec-y);
}

/* --------------------------------------------------------------------------
   Card: servizi, piani, vantaggi, step
   -------------------------------------------------------------------------- */
body.ai-ds :is(.sg, .services-grid) { gap: var(--ai-s5); }
body.ai-ds :is(.sc, .service-card) {
  position: relative;
  display: flex; flex-direction: column; gap: var(--ai-s3);
  padding: 30px 28px;
  background: var(--ai-surface);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
  box-shadow: var(--ai-shadow-1);
  transition: transform var(--ai-t-med) var(--ai-ease), box-shadow var(--ai-t-med) var(--ai-ease), border-color var(--ai-t-med) var(--ai-ease);
}
body.ai-ds #servizi :is(.sc, .service-card) { background: var(--ai-bg); box-shadow: none; }
body.ai-ds :is(.sc, .service-card):hover {
  transform: translateY(-4px);
  border-color: var(--ai-red-line);
  box-shadow: var(--ai-shadow-2);
  background: var(--ai-surface);
}
body.ai-ds :is(.si2, .service-icon) {
  width: 48px; height: 48px;
  margin-bottom: var(--ai-s2);
  border-radius: var(--ai-r-md);
  background: var(--ai-red-dim);
  color: var(--ai-red);
  display: grid; place-items: center;
  transition: background-color var(--ai-t-med) var(--ai-ease), color var(--ai-t-med) var(--ai-ease), transform var(--ai-t-med) var(--ai-ease);
}
body.ai-ds :is(.si2, .service-icon) :is(svg, .ai-icon) {
  width: 24px; height: 24px;
  stroke: currentColor; fill: none; stroke-width: 1.8;
  transition: stroke var(--ai-t-med) var(--ai-ease);
}
body.ai-ds :is(.sc, .service-card):hover :is(.si2, .service-icon) {
  background: var(--ai-red);
  color: #fff;
  transform: scale(1.04);
}
body.ai-ds .service-card:hover .service-icon svg { stroke: #fff; }
body.ai-ds :is(.st, .service-card h3) {
  font-size: var(--ai-fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin-bottom: 0;
}
body.ai-ds :is(.sx, .service-card p) { font-size: var(--ai-fs-sm); color: var(--ai-text-2); line-height: 1.65; }

/* Piani */
body.ai-ds .plans { gap: var(--ai-s5); align-items: stretch; }
body.ai-ds .pc {
  display: flex; flex-direction: column;
  padding: 36px 30px 30px;
  border-radius: var(--ai-r-lg);
  border-color: var(--ai-line);
  box-shadow: var(--ai-shadow-1);
  transition: transform var(--ai-t-med) var(--ai-ease), box-shadow var(--ai-t-med) var(--ai-ease), border-color var(--ai-t-med) var(--ai-ease);
}
body.ai-ds .pc:hover { transform: translateY(-4px); box-shadow: var(--ai-shadow-2); border-color: var(--ai-line-2); }
body.ai-ds .pc.feat { border-color: var(--ai-red); box-shadow: 0 16px 28px -20px var(--ai-red-glow); }
body.ai-ds .pc.feat:hover { border-color: var(--ai-red); }
body.ai-ds .pbadge { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 6px 14px; box-shadow: var(--ai-shadow-red); }
body.ai-ds .pn { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.025em; }
body.ai-ds .pd { color: var(--ai-text-2); }
body.ai-ds .pf { flex: 1; }
body.ai-ds .pf li { border-bottom-color: var(--ai-bg-2); color: var(--ai-ink); font-weight: 500; }
body.ai-ds .ck {
  width: 22px; height: 22px; flex-shrink: 0;
  display: inline-grid; place-items: center;
  border-radius: 50%;
  background: var(--ai-red-dim);
  font-size: 12px;
}
body.ai-ds .pcta { width: 100%; margin-top: var(--ai-s5); }

/* Vantaggi (VoIP) */
body.ai-ds .benefits-grid { gap: var(--ai-s4); }
body.ai-ds .benefit-item {
  padding: 24px;
  border-radius: var(--ai-r-lg);
  border-color: var(--ai-line);
  transition: border-color var(--ai-t-med) var(--ai-ease), box-shadow var(--ai-t-med) var(--ai-ease), transform var(--ai-t-med) var(--ai-ease);
}
body.ai-ds .benefit-item:hover { border-color: var(--ai-red-line); box-shadow: var(--ai-shadow-2); transform: translateY(-2px); }
body.ai-ds .benefit-check { width: 36px; height: 36px; border-radius: 10px; }
body.ai-ds .benefit-item :is(h3, h4) { font-size: var(--ai-fs-md); font-weight: 700; letter-spacing: -0.01em; }
body.ai-ds .benefit-item p { font-size: var(--ai-fs-sm); line-height: 1.6; }

/* Step (VoIP) */
body.ai-ds .steps-wrap { border-radius: var(--ai-r-lg); padding: clamp(28px, 4vw, 52px); box-shadow: var(--ai-shadow-1); }
body.ai-ds .steps { position: relative; gap: var(--ai-s6); }
body.ai-ds .step-num {
  width: 52px; height: 52px;
  font-weight: 800; font-size: 1.125rem;
  box-shadow: 0 0 0 6px var(--ai-red-dim), var(--ai-shadow-red);
}
body.ai-ds .step :is(h3, h4) { font-size: var(--ai-fs-md); font-weight: 700; margin-bottom: 8px; }
body.ai-ds .step p { font-size: var(--ai-fs-sm); line-height: 1.6; }
@media (min-width: 769px) {
  /* Linea di collegamento tra gli step */
  body.ai-ds .steps-wrap .steps::before {
    content: ""; position: absolute; top: 26px; left: 12.5%; right: 12.5%; height: 2px; z-index: 0;
    background: repeating-linear-gradient(90deg, var(--ai-line) 0 8px, transparent 8px 14px);
  }
  body.ai-ds .step { position: relative; z-index: 1; }
}

/* Perché noi (homepage) */
body.ai-ds .wg { gap: clamp(32px, 5vw, 72px); }
body.ai-ds .wi { padding: 24px 0; border-bottom-color: var(--ai-line); }
body.ai-ds .wn { font-weight: 800; opacity: 1; color: var(--ai-red-line); }
body.ai-ds .wc :is(h3, h4) { font-size: var(--ai-fs-md); font-weight: 700; letter-spacing: -0.01em; }
body.ai-ds .wv { border-radius: var(--ai-r-lg); box-shadow: var(--ai-shadow-2); padding: 40px; }
body.ai-ds .mc { border-radius: var(--ai-r-md); }
body.ai-ds .mc-n { font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }

/* Tabella confronto (VoIP) */
body.ai-ds .confronto-wrap { border-radius: var(--ai-r-lg); box-shadow: var(--ai-shadow-1); overflow-x: auto; }
body.ai-ds .confronto-table thead :is(th, td) { font-weight: 700; font-size: var(--ai-fs-sm); }
body.ai-ds .confronto-table tbody tr { transition: background-color var(--ai-t-fast) var(--ai-ease); }
body.ai-ds .confronto-table tbody tr:hover { background: var(--ai-bg); }

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
body.ai-ds .faq-list { gap: var(--ai-s3); max-width: 880px; }
body.ai-ds .faq-item {
  border-radius: var(--ai-r-md);
  border-color: var(--ai-line);
  transition: border-color var(--ai-t-fast) var(--ai-ease), box-shadow var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds .faq-item:hover { border-color: var(--ai-line-2); }
body.ai-ds .faq-item.open { border-color: var(--ai-red-line); box-shadow: var(--ai-shadow-1); }
body.ai-ds .faq-question { padding: 20px 24px; font-size: var(--ai-fs-md); font-weight: 600; min-height: 56px; }
body.ai-ds .faq-arrow {
  width: 30px; height: 30px; border-radius: 50%;
  display: inline-grid; place-items: center;
  background: var(--ai-bg); color: var(--ai-text-2);
  line-height: 1; font-size: 16px;
}
body.ai-ds .faq-item.open .faq-arrow { background: var(--ai-red-dim); color: var(--ai-red); }
body.ai-ds .faq-answer { font-size: var(--ai-fs-sm); line-height: 1.7; }

/* --------------------------------------------------------------------------
   CTA finali: fascia scura con i blu del tema (#1e293b → #0f172a)
   -------------------------------------------------------------------------- */
body.ai-ds :is(.cs2, .cta-band) {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ai-ink), var(--ai-ink-deep)) !important;
  border: 0;
  color: #fff;
}
body.ai-ds :is(.cs2, .cta-band)::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(520px 260px at 90% 0%, rgba(190,21,33,0.28), transparent 70%),
    linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: auto, 40px 40px, 40px 40px;
}
body.ai-ds :is(.cs2, .cta-band) > * { position: relative; }
body.ai-ds .cs2 {
  max-width: 1200px;
  margin: 0 auto var(--ai-sec-y);
  width: calc(100% - 2 * var(--ai-gutter));
  border-radius: 24px;
  padding: clamp(40px, 6vw, 80px);
  flex-wrap: wrap;
}
body.ai-ds .cta-band { padding: clamp(56px, 7vw, 96px) var(--ai-gutter); }
body.ai-ds :is(.cs2, .cta-band) h2 {
  color: #fff;
  font-size: var(--ai-fs-h2);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
body.ai-ds .cs2 h2 em { color: #fff; text-decoration: underline; text-decoration-color: var(--ai-red); text-decoration-thickness: 4px; text-underline-offset: 6px; }
body.ai-ds :is(.cs2, .cta-band) p { color: var(--ai-on-dark) !important; }
body.ai-ds .cta-band p { max-width: 40em; margin-left: auto; margin-right: auto; }
body.ai-ds :is(.cs2, .cta-band) :is(.btn-g, .btn-secondary) {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
  box-shadow: none;
}
body.ai-ds :is(.cs2, .cta-band) :is(.btn-g, .btn-secondary):hover { border-color: #fff; color: #fff; }
body.ai-ds :is(.cs2, .cta-band) :focus-visible { outline-color: #fff; }

/* --------------------------------------------------------------------------
   Link interni SEO e footer
   -------------------------------------------------------------------------- */
body.ai-ds .link-interni { background: var(--ai-bg-2) !important; padding: 40px var(--ai-gutter); }
body.ai-ds .link-interni-inner { max-width: 1200px; }
body.ai-ds .link-interni :is(h3, h4) { font-weight: 700; color: var(--ai-text-2); letter-spacing: 0.08em; }
body.ai-ds .link-interni-grid a {
  border-radius: var(--ai-r-pill);
  padding: 8px 16px;
  font-weight: 500;
  transition: border-color var(--ai-t-fast) var(--ai-ease), color var(--ai-t-fast) var(--ai-ease), transform var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds .link-interni-grid a:hover { transform: translateY(-1px); }
/* --------------------------------------------------------------------------
   Footer — uguale su tutti i template del design system (riferimento: pagina News).
   I template hanno ancora il proprio CSS del footer, con varianti diverse: queste
   regole, più specifiche, lo uniformano. Icone a currentColor; Instagram solo contorno.
   -------------------------------------------------------------------------- */
body.ai-ds footer.ft {
  background: #fff !important;
  border-top: 1px solid var(--ai-line);
  padding: 32px var(--ai-gutter);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  text-align: left;
  color: var(--ai-text-2);
}
body.ai-ds footer.ft .ft-copy,
body.ai-ds footer.ft .ft-links a { color: var(--ai-text-2) !important; font-size: var(--ai-fs-xs); }
body.ai-ds footer.ft .ft-links { display: flex; flex-wrap: wrap; gap: 20px; font-size: var(--ai-fs-xs); }
body.ai-ds footer.ft .ft-links a { text-decoration: none; }
body.ai-ds footer.ft .ft-links a:hover { color: var(--ai-red) !important; }
body.ai-ds footer.ft .ft-social { display: flex; flex-direction: row; align-items: center; gap: 14px; }
body.ai-ds footer.ft .ft-social a {
  display: flex;
  align-items: center;
  color: #94a3b8 !important;
  text-decoration: none !important;
  transition: color var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds footer.ft .ft-social a:hover,
body.ai-ds footer.ft .ft-social a:focus-visible { color: var(--ai-red) !important; }
body.ai-ds footer.ft .ft-social svg { width: 20px; height: 20px; fill: currentColor !important; stroke: none !important; }
body.ai-ds footer.ft .ft-social a[href*="instagram"] svg { fill: none !important; stroke: currentColor !important; }
body.ai-ds footer.ft .ft-social a[href*="instagram"] svg circle:last-child { fill: currentColor !important; stroke: none !important; }
@media (max-width: 600px) {
  body.ai-ds footer.ft { flex-direction: column; align-items: flex-start; }
}

/* --------------------------------------------------------------------------
   Contrasto — il grigio #94a3b8 (2,5:1 su fondo chiaro) diventa #64748b,
   già presente in palette. I template lo usano tramite var(--tx3).
   -------------------------------------------------------------------------- */
body.ai-ds { --tx3: var(--ai-text-3); }
body.ai-ds :is(.sec, .hero, .hero-wrap, .wrap, .breadcrumb, .news-wrap, .content-body) [style*="color:#94a3b8"] { color: var(--ai-text-3) !important; }
/* Landing strategiche e articoli: fondo pagina #f1f5f9, su cui #64748b resta sotto 4,5:1 */
body:is(.ai-ds--strategica, .single.ai-ds--blog) { --tx3: var(--ai-text-2); }
body:is(.ai-ds--strategica, .single.ai-ds--blog) :is(.content-body, .article-content) [style*="color:#94a3b8"] { color: var(--ai-text-2) !important; }
/* Breadcrumb: su fondo #f1f5f9 il grigio terziario non basta */
body.ai-ds .breadcrumb { --tx3: var(--ai-text-2); }
/* Box CTA rosso nel contenuto: il titolo ereditava il colore scuro di .content-body h2 */
body.ai-ds .content-body .cta-box :is(h2, h3) { color: #fff; border-bottom-color: rgba(255,255,255,0.3); }

/* Icone SVG accanto al testo (al posto delle emoji) */
/* :first-child: un nodo di testo dopo l'svg non conta come elemento, quindi niente :only-child */
body.ai-ds :is(h3, h4, strong, span, div, a, label):not(.service-icon, .perchi-icon, .backup-icon, .vantaggio-icon, .service-num,
  .trust-ic, .faq-arrow, .mn-ham, .hero-tag, .btn-p, .btn-primary, .btn-g, .btn-secondary, .btn-s, .btn-ghost, .mn-cta, .si2,
  .sidebar-related-img, .related-card-img) > .ai-icon:first-child {
  margin-right: 0.4em;
}
body.ai-ds .faq-arrow .ai-icon { width: 16px; height: 16px; display: block; }
body.ai-ds .faq-arrow { font-size: 0 !important; }

/* Pulsanti: set storico btn-s e variante ghost delle landing su fondo scuro */
body.ai-ds .btn-s {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--ai-r-md);
  background: var(--ai-surface); color: var(--ai-ink);
  font-size: var(--ai-fs-sm); font-weight: 600;
  border: 1px solid var(--ai-line);
  box-shadow: var(--ai-shadow-1);
  text-decoration: none;
  transition: border-color var(--ai-t-fast) var(--ai-ease), transform var(--ai-t-fast) var(--ai-ease);
}
body.ai-ds .btn-s:hover { border-color: var(--ai-ink); color: var(--ai-ink); transform: translateY(-2px); }
body.ai-ds .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 24px;
  border-radius: var(--ai-r-md);
  font-size: var(--ai-fs-sm); font-weight: 600;
}
body.ai-ds :is(.cta-band, .cs2) .btn-s { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.22); color: #fff; box-shadow: none; }
body.ai-ds :is(.cta-btns) { gap: var(--ai-s3); }
@media (max-width: 600px) { body.ai-ds .cta-btns > a { width: 100%; } }

/* --------------------------------------------------------------------------
   Pannelli Hero delle pagine interne (hero-card / hero-visual) e dati
   -------------------------------------------------------------------------- */
body.ai-ds :is(.hero-card, .hero-visual) {
  position: relative;
  background: var(--ai-surface);
  border: 1px solid var(--ai-line);
  border-radius: var(--ai-r-lg);
  box-shadow: 0 20px 36px -24px rgba(15,23,42,0.35), 0 1px 4px rgba(15,23,42,0.05);
  padding: clamp(22px, 2.6vw, 30px);
}
body.ai-ds .hero-stats { gap: var(--ai-s3); }
body.ai-ds .stat-box {
  background: var(--ai-bg);
  border: 1px solid var(--ai-bg-2);
  border-radius: var(--ai-r-md);
  padding: 18px 16px;
}
body.ai-ds .stat-num {
  font-weight: 800 !important;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
body.ai-ds .stat-label { color: var(--ai-text-2); font-weight: 500; }
body.ai-ds :is(.sla-badge, .ms-logo-row) { border-bottom-color: var(--ai-bg-2); }
body.ai-ds .sla-icon { border-radius: var(--ai-r-md); }
body.ai-ds .sla-text strong { font-weight: 700; }
/* Parole chiave, zone e aree: chip uniformi */
body.ai-ds :is(.hero-kw span, .kw-tag, .zone-tag, .area-pill, .hero-badge) {
  border-radius: var(--ai-r-pill);
  background: var(--ai-surface);
  border: 1px solid var(--ai-line);
  color: var(--ai-text-2);
  font-weight: 500;
}
body.ai-ds .zone-tag .ai-icon { color: var(--ai-red); width: 1em; height: 1em; margin: 0 0.2em; }

/* --------------------------------------------------------------------------
   Card dei contenuti specifici: stesso linguaggio delle service-card
   -------------------------------------------------------------------------- */
body.ai-ds :is(.piano-card, .caso-card, .caso, .scenario-card, .perchi-card, .backup-card, .causa-card,
  .feature-card, .confronto-card, .vantaggio-card, .step-card, .zona-card, .int-feature, .mkt-feature) {
  border-radius: var(--ai-r-lg);
  border-color: var(--ai-line);
  box-shadow: var(--ai-shadow-1);
  transition: transform var(--ai-t-med) var(--ai-ease), box-shadow var(--ai-t-med) var(--ai-ease), border-color var(--ai-t-med) var(--ai-ease);
}
body.ai-ds :is(.caso-card, .caso, .scenario-card, .perchi-card, .causa-card, .feature-card, .vantaggio-card, .step-card, .zona-card):hover {
  transform: translateY(-3px);
  border-color: var(--ai-red-line);
  box-shadow: var(--ai-shadow-2);
}
body.ai-ds :is(.caso-card, .caso)::before { border-radius: var(--ai-r-lg) 0 0 var(--ai-r-lg); }
body.ai-ds :is(.caso-card :is(h3, h4), .caso :is(h3, h4), .scenario-card h3, .scenario-card h4, .causa-card :is(h3, h4), .feature-card :is(h3, h4), .vantaggio-card h3,
  .vantaggio-card h4, .backup-card :is(h3, h4), .perchi-card :is(h3, h4), .step-card h3, .confronto-card :is(h3, h4)) {
  font-weight: 700;
  letter-spacing: -0.012em;
}
body.ai-ds :is(.caso-tag, .scenario-badge, .feature-badge, .piano-badge, .ladder-badge) {
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: var(--ai-r-pill);
}
body.ai-ds .caso-risultato { border-top-color: var(--ai-bg-2); font-weight: 600; }

/* Piani (Microsoft 365) */
body.ai-ds .piani-grid { gap: var(--ai-s5); }
body.ai-ds .piano-card { padding: 32px 28px 28px; }
body.ai-ds .piano-card:hover { transform: translateY(-4px); box-shadow: var(--ai-shadow-2); }
body.ai-ds .piano-card.featured { border-color: var(--ai-red); box-shadow: 0 16px 28px -20px var(--ai-red-glow); }
body.ai-ds .piano-name { font-size: 1.375rem; font-weight: 800; letter-spacing: -0.02em; }
body.ai-ds .piano-desc { border-bottom-color: var(--ai-bg-2); }
body.ai-ds .piano-features li { color: var(--ai-ink); font-weight: 500; border-bottom-color: var(--ai-bg-2); }
body.ai-ds .piano-cta {
  min-height: 48px; display: flex; align-items: center; justify-content: center;
  border-radius: var(--ai-r-md); font-weight: 600;
}

/* Tile icona: stesso riquadro rosso delle service-icon */
body.ai-ds :is(.perchi-icon, .backup-icon, .vantaggio-icon, .service-num, .scenario-icon, .int-icon, .mkt-icon) {
  width: 48px; height: 48px;
  display: inline-grid; place-items: center;
  border-radius: var(--ai-r-md);
  background: var(--ai-red-dim);
  color: var(--ai-red);
  font-size: 0;
  margin-left: auto; margin-right: auto;
}
body.ai-ds :is(.perchi-icon, .backup-icon, .vantaggio-icon, .service-num, .scenario-icon, .int-icon, .mkt-icon) :is(.ai-icon, svg) {
  width: 24px; height: 24px; stroke: currentColor; fill: none;
}
body.ai-ds :is(.vantaggio-icon, .service-num, .scenario-icon, .int-icon, .mkt-icon) { margin-left: 0; margin-bottom: var(--ai-s3); }
body.ai-ds .trust-ic { color: var(--ai-red); font-size: 0; display: inline-grid; }
body.ai-ds .trust-ic .ai-icon { width: 24px; height: 24px; }
body.ai-ds .backup-card.best { border-color: var(--ai-red); background: var(--ai-surface); box-shadow: 0 16px 28px -20px var(--ai-red-glow); }
body.ai-ds .backup-verdict { border-radius: var(--ai-r-pill); display: inline-flex; align-items: center; }
body.ai-ds .backup-verdict .ai-icon { width: 1.1em; height: 1.1em; }

/* Fasce con intestazione scura (tempi, confronto, integrazioni): stesso gradiente della CTA */
body.ai-ds :is(.tempi-wrap, .vs-wrap, .integration-wrap, .marketing-wrap, .monitor-wrap, .zone-wrap, .calc) {
  border-radius: var(--ai-r-lg);
  border-color: var(--ai-line);
  box-shadow: var(--ai-shadow-1);
  overflow: hidden;
}
body.ai-ds :is(.tempi-header, .vs-header) {
  background:
    radial-gradient(420px 200px at 95% 0%, rgba(190,21,33,0.24), transparent 70%),
    linear-gradient(135deg, var(--ai-ink), var(--ai-ink-deep));
}
body.ai-ds :is(.tempi-header h3, .vs-header h3) { font-weight: 800; letter-spacing: -0.02em; }
body.ai-ds .tempo-val { font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
body.ai-ds .vs-col :is(h3, h4) { font-weight: 700; display: flex; align-items: center; }
body.ai-ds .tempo-item { border-color: var(--ai-bg-2); }

/* Confronti a due colonne e liste problema/soluzione */
body.ai-ds .confronto-label { font-weight: 700; display: flex; align-items: center; }
body.ai-ds .confronto-card { padding: 28px; }

/* Box di avviso: colori esistenti, solo forma e icona */
body.ai-ds :is(.alert-box, .urgenza-box) { border-radius: var(--ai-r-md); }
body.ai-ds .alert-box > div:first-child { color: #92400e; font-size: 0 !important; }
body.ai-ds .alert-box > div:first-child .ai-icon { width: 22px; height: 22px; }
body.ai-ds .urgenza-box strong { display: flex !important; align-items: center; }

/* Calcolatore costo fermo */
body.ai-ds .calc-head { background: linear-gradient(135deg, var(--ai-ink), var(--ai-ink-deep)); }
body.ai-ds :is(.calc input[type="number"], .calc select) { border-radius: var(--ai-r-sm); font-family: var(--ai-font); }
body.ai-ds .calc-slider { accent-color: var(--ai-red); }

/* WiFi: mockup captive portal e monitoraggio */
body.ai-ds .captive-btn { border-radius: var(--ai-r-sm); display: flex; align-items: center; justify-content: center; }
body.ai-ds .captive-mockup span .ai-icon { width: 1em; height: 1em; margin-right: 0.35em; }
body.ai-ds .monitor-dashboard { border-radius: var(--ai-r-md); }

/* Archivio zone */
body.ai-ds .zone-grid { gap: var(--ai-s3); }
body.ai-ds .zona-card { padding: 18px 20px; }
body.ai-ds .zona-card strong { font-weight: 600; }
body.ai-ds .srv-label { color: var(--ai-text-2); }
body.ai-ds .breadcrumb { font-size: var(--ai-fs-xs); }

/* Fascia trust e CTA con dati (landing strategiche) */
body.ai-ds .trust-t { font-weight: 700; }
body.ai-ds .cta-band :is(.cta-stat, .cta-stat strong, .cta-stat b) { color: #fff; }
body.ai-ds .cta-band .cta-stat span { color: var(--ai-on-dark) !important; }

/* Contenuto testuale generato (landing strategiche) */
body.ai-ds .content-body { font-size: var(--ai-fs-md); line-height: 1.75; }
body.ai-ds .content-body h2 { font-weight: 800; letter-spacing: -0.02em; border-bottom-color: var(--ai-bg-2); }
body.ai-ds .content-body h3 { font-weight: 700; }
body.ai-ds .content-body a { color: var(--ai-red); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   Varianti Hero per tipologia di pagina (stessi componenti, ritmo diverso)
   -------------------------------------------------------------------------- */
/* Problema: tono "diagnosi" — fondo con puntinato, pannello con filo rosso in alto */
body.ai-ds--problema .hero-wrap {
  background:
    radial-gradient(760px 420px at 0% 0%, var(--ai-red-dim), transparent 60%),
    var(--ai-bg) !important;
}
body.ai-ds--problema .hero-wrap::before {
  background-image: radial-gradient(rgba(30,41,59,0.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 60% 80% at 85% 50%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 80% at 85% 50%, #000 20%, transparent 75%);
}
body.ai-ds--problema .hero-card { border-top: 3px solid var(--ai-red); }
body.ai-ds--problema .hero h1 { font-size: clamp(2.125rem, 1.45rem + 2.6vw, 3.25rem); }

/* Locale: anelli concentrici tipo mappa centrati sul pannello */
body.ai-ds--locale .hero-wrap::before {
  background-image: repeating-radial-gradient(circle at 78% 46%, transparent 0 46px, rgba(30,41,59,0.07) 46px 47px);
  background-size: auto;
  -webkit-mask-image: radial-gradient(ellipse 55% 75% at 78% 46%, #000 30%, transparent 78%);
  mask-image: radial-gradient(ellipse 55% 75% at 78% 46%, #000 30%, transparent 78%);
}

/* Landing strategiche: hero fotografico scuro già presente, nav trasparente sopra */
body.ai-ds .mn.mn-over:not(.mn-stuck) {
  background: transparent !important;
  -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom-color: rgba(255,255,255,0.14);
}
body.ai-ds .mn.mn-over:not(.mn-stuck) .mn-links a { color: rgba(255,255,255,0.88); }
body.ai-ds .mn.mn-over:not(.mn-stuck) .mn-links a:hover { color: #fff; }
body.ai-ds .mn.mn-over:not(.mn-stuck) .mn-ham { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.4) !important; color: #fff; }
body.ai-ds .hc h1 { font-size: clamp(2rem, 1.3rem + 3vw, 3.5rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.06; }
body.ai-ds .hc-badge { font-weight: 700; letter-spacing: 0.06em; }
body.ai-ds .hc-ctas .btn-primary { min-height: 52px; }

/* --------------------------------------------------------------------------
   Blog: elenco articoli, archivio, articolo singolo
   -------------------------------------------------------------------------- */
body.ai-ds .news-hero-wrap {
  background:
    radial-gradient(760px 380px at 92% -10%, var(--ai-red-dim), transparent 62%),
    var(--ai-bg) !important;
}
body.ai-ds .news-hero h1 {
  font-size: clamp(2.125rem, 1.5rem + 2.4vw, 3.25rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.08;
}
body.ai-ds .news-hero p { font-size: var(--ai-fs-lg); color: var(--ai-text-2); }
body.ai-ds .news-hero-tag::before { animation: none; }
body.ai-ds .news-wrap { padding-top: clamp(32px, 5vw, 56px); }
body.ai-ds .article-card {
  border-radius: var(--ai-r-lg);
  border-color: var(--ai-line);
  box-shadow: var(--ai-shadow-1);
  transition: transform var(--ai-t-med) var(--ai-ease), box-shadow var(--ai-t-med) var(--ai-ease), border-color var(--ai-t-med) var(--ai-ease);
}
body.ai-ds .article-card:hover { transform: translateY(-3px); box-shadow: var(--ai-shadow-2); border-color: var(--ai-red-line); }
body.ai-ds .article-title { font-weight: 700; letter-spacing: -0.015em; }
body.ai-ds .article-cat { font-weight: 600; }
body.ai-ds .pagination :is(a, span) { border-radius: var(--ai-r-sm); min-width: 44px; min-height: 44px; }

/* Articolo singolo */
body.ai-ds :is(.article-hero h1, .article-hero-noimg h1) {
  font-size: clamp(2rem, 1.35rem + 2.6vw, 3rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.1;
}
body.ai-ds .article-hero-noimg {
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(190,21,33,0.26), transparent 70%),
    linear-gradient(135deg, var(--ai-ink-deep), var(--ai-ink));
}
/* Hero con foto: altezza minima invariata (520px), ma il testo resta nel flusso e non viene mai tagliato.
   Foto più visibile; velo scuro solo dove c'è il testo (in basso e a sinistra), quasi trasparente altrove. */
body.ai-ds .article-hero { display: flex; align-items: flex-end; min-height: 520px; isolation: isolate; }
body.ai-ds .article-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%; max-height: none;
  object-fit: cover; opacity: .85;
}
body.ai-ds .article-hero-overlay {
  background:
    linear-gradient(to top, rgba(11,18,32,.94) 0%, rgba(11,18,32,.84) 26%, rgba(11,18,32,.62) 58%, rgba(11,18,32,.16) 100%),
    linear-gradient(to right, rgba(11,18,32,.58) 0%, rgba(11,18,32,.3) 45%, rgba(11,18,32,0) 78%);
}
body.ai-ds .article-hero-content { position: relative; z-index: 2; width: 100%; padding-top: 64px; }
body.ai-ds :is(.article-hero, .article-hero-noimg) .article-meta { gap: 8px 12px; margin-bottom: 20px; }
body.ai-ds :is(.article-hero, .article-hero-noimg) :is(.article-date, .article-read-time) { color: #fff !important; font-size: .875rem !important; font-weight: 500; text-shadow: 0 1px 8px rgba(11,18,32,.6); }
body.ai-ds :is(.article-hero, .article-hero-noimg) h1 { margin-bottom: 20px; text-shadow: 0 1px 2px rgba(11,18,32,.3), 0 2px 24px rgba(11,18,32,.35); }
body.ai-ds :is(.article-hero, .article-hero-noimg) .article-excerpt {
  max-width: 640px; margin: 0; font-size: 1.125rem; line-height: 1.7;
  color: rgba(255,255,255,.88); text-shadow: 0 1px 12px rgba(11,18,32,.45);
}
body.ai-ds .article-hero-leggi {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 14px;
  color: rgba(255,255,255,.88); font-size: .9375rem; font-weight: 600; text-decoration: none;
}
body.ai-ds .article-hero-leggi .ai-icon { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--ai-t-fast) var(--ai-ease); }
body.ai-ds .article-hero-leggi:hover { color: #fff; }
body.ai-ds .article-hero-leggi:hover .ai-icon { transform: translateY(2px); }
body.ai-ds .article-hero-leggi:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
body.ai-ds #article-content { scroll-margin-top: 96px; }
@media (max-width: 768px) {
  body.ai-ds .article-hero-content { padding-top: 48px; }
  body.ai-ds :is(.article-hero, .article-hero-noimg) .article-meta { margin-bottom: 16px; }
  body.ai-ds :is(.article-hero, .article-hero-noimg) h1 { margin-bottom: 16px; }
  body.ai-ds :is(.article-hero, .article-hero-noimg) .article-excerpt { font-size: 1rem; line-height: 1.65; }
  body.ai-ds .article-hero-overlay {
    background: linear-gradient(to top, rgba(11,18,32,.94) 0%, rgba(11,18,32,.82) 40%, rgba(11,18,32,.66) 75%, rgba(11,18,32,.4) 100%);
  }
}
body.ai-ds .article-content { font-size: 1.125rem; line-height: 1.78; color: var(--ai-ink); }
body.ai-ds .article-content :is(h2, h3) { letter-spacing: -0.02em; scroll-margin-top: 104px; }
body.ai-ds .article-content h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); font-weight: 800; }
body.ai-ds .article-content h3 { font-size: 1.25rem; font-weight: 700; }
body.ai-ds .article-content blockquote { font-style: normal; }
body.ai-ds .article-content img { border-radius: var(--ai-r-md); }
body.ai-ds :is(.sidebar-block, .sidebar-cta, .ai-disclaimer) { border-radius: var(--ai-r-lg); }
body.ai-ds .sidebar-block { box-shadow: var(--ai-shadow-1); border-color: var(--ai-line); }
body.ai-ds .sidebar-block-title { color: var(--ai-text-2); font-weight: 700; }
body.ai-ds .toc-num { color: var(--ai-text-3); }
body.ai-ds .toc-item.active .toc-num { color: var(--ai-red); }
body.ai-ds :is(.sidebar-cta a, .article-cta a) {
  border-radius: var(--ai-r-md); font-weight: 600;
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--ai-shadow-red);
}
body.ai-ds .sidebar-cta a { display: flex; }
body.ai-ds .article-cta {
  border-radius: 20px;
  background:
    radial-gradient(420px 220px at 90% 0%, rgba(190,21,33,0.28), transparent 70%),
    linear-gradient(135deg, var(--ai-ink), var(--ai-ink-deep));
}
body.ai-ds .article-cta h3 { font-weight: 800; letter-spacing: -0.02em; }
body.ai-ds .share-btn { min-height: 32px; display: inline-flex; align-items: center; }
body.ai-ds .related-section { background: var(--ai-surface); }
body.ai-ds .related-title { font-weight: 800; letter-spacing: -0.02em; }
body.ai-ds .related-card { border-radius: var(--ai-r-lg); transition: transform var(--ai-t-med) var(--ai-ease), box-shadow var(--ai-t-med) var(--ai-ease), border-color var(--ai-t-med) var(--ai-ease); }
body.ai-ds .related-card:hover { transform: translateY(-3px); box-shadow: var(--ai-shadow-2); border-color: var(--ai-red-line); }
body.ai-ds :is(.related-card-img, .sidebar-related-img) .ai-icon { width: 28px; height: 28px; color: var(--ai-text-3); }
body.ai-ds .ai-disclaimer > span:first-child .ai-icon { width: 20px; height: 20px; color: var(--ai-text-2); }

/* --------------------------------------------------------------------------
   Movimento — solo transform/opacity, disattivato con prefers-reduced-motion
   -------------------------------------------------------------------------- */
@keyframes ai-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}
@keyframes ai-panel-in {
  from { opacity: 0; transform: translateY(18px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
/* Solo opacity: animazione composita, nessun repaint continuo */
@keyframes ai-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Ingresso del pannello hero (il titolo, elemento LCP, non viene animato) */
  body.ai-ds :is(.hp, .kite-box) { animation: ai-panel-in 700ms var(--ai-ease) 120ms both; }
  body.ai-ds .presence-dot,
  body.ai-ds .hp-hdr::before { animation: ai-pulse 2.4s ease-in-out infinite; }

  /* Comparsa delle sezioni guidata dallo scroll (browser con animation-timeline;
     negli altri il contenuto è semplicemente visibile, senza script) */
  @supports (animation-timeline: view()) {
    body.ai-ds :is(
      .sec > :not(.sg, .plans, .services-grid, .benefits-grid, .faq-list, .wg, div[style*="grid"], .piani-grid, .casi-grid, .scenarios-grid, .perchi-grid, .backup-grid, .cause-grid, .vantaggi-grid),
      .sg > *, .plans > *, .services-grid > *, .benefits-grid > *, .faq-list > *, .steps > *,
      .wl > *, .wv, .sec > div[style*="grid"] > *, .cs2 > *, .cta-band > *,
      .piani-grid > *, .casi-grid > *, .scenarios-grid > *, .perchi-grid > *, .backup-grid > *, .cause-grid > *, .vantaggi-grid > *, .related-grid > *
    ) {
      animation: ai-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  body.ai-ds *, body.ai-ds *::before, body.ai-ds *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  body.ai-ds .mn-links { gap: 14px; }
  body.ai-ds .mn-links a { font-size: 0.875rem; }
}
@media (max-width: 900px) {
  body.ai-ds .mn { min-height: 64px; padding: 10px 16px; }
  body.ai-ds .mn-logo img { height: 42px !important; }
  body.ai-ds .mn-ham { display: grid !important; }
  body.ai-ds .hero { grid-template-columns: minmax(0, 1fr); padding: 44px 20px 88px; gap: 36px; }
  body.ai-ds .sb { margin-top: -48px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  body.ai-ds .si { border-right: 0; padding: 0; }
  body.ai-ds .cs2 { flex-direction: column; align-items: flex-start; }
  body.ai-ds .sec { padding-left: 20px; padding-right: 20px; }
  body.ai-ds .kite-box { padding: 22px 20px; }
}
@media (max-width: 600px) {
  body.ai-ds { --ai-fs-lg: 1.0625rem; }
  body.ai-ds .hero-ctas > a { width: 100%; }
  body.ai-ds .cta-band-btns > a,
  body.ai-ds .ca > a { width: 100%; }
  body.ai-ds :is(.sc, .service-card) { padding: 24px 22px; }
  body.ai-ds .faq-question { padding: 18px; font-size: var(--ai-fs-sm); }
  body.ai-ds .steps::before { display: none; }
  body.ai-ds .sec > div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: minmax(0, 1fr) !important; }
  body.ai-ds .sec div[style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns: minmax(0, 1fr) !important; }
  body.ai-ds .sec div[style*="grid-template-columns:repeat(3,1fr)"] > div { border-right: 0 !important; border-bottom: 1px solid var(--ai-line); }
}
@media (max-width: 400px) {
  body.ai-ds .sb { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 24px 18px; }
  body.ai-ds .sn { font-size: 1.875rem; }
}