/* ============================================================
   seo.css - atmosfera e componenti condivisi per le pagine
   SEO/confronto. Unica fonte di verita': tutte le pagine
   /en/* e le guide IT ereditano da qui il linguaggio di design
   della landing (grad-hero, grid, orbs, accento aurora, vetro,
   glow). Dipende dai token in styles.css (:root).
   ============================================================ */

/* ---------- Atmosfera di pagina (zero markup) ---------- */
body {
  background: var(--grad-hero);
  background-attachment: fixed;
  color: var(--ink-100);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* griglia mascherata come nell'hero della landing */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(125, 155, 220, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125, 155, 220, 0.055) 1px, transparent 1px);
  background-size: 62px 62px;
  mask-image: radial-gradient(90% 55% at 50% 0%, black 20%, transparent 75%);
  -webkit-mask-image: radial-gradient(90% 55% at 50% 0%, black 20%, transparent 75%);
}
/* orbs sfocati (blu in alto, magenta in basso, azure a destra) */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(560px 560px at 12% -6%, rgba(61,111,255,0.42), transparent 60%),
    radial-gradient(620px 620px at 92% 8%, rgba(79,183,255,0.20), transparent 62%),
    radial-gradient(680px 680px at 88% 108%, rgba(194,84,255,0.16), transparent 60%);
  filter: blur(10px);
}
/* i wrapper piatti bespoke diventano trasparenti: passa l'atmosfera */
.vsg-page, .cfs-page, .sf-page, .art-page { background: transparent !important; }
.seo-root { position: relative; z-index: 1; }

/* ---------- Nav pill glass (identica alla landing) ---------- */
.seo-nav {
  position: fixed; top: 18px; left: 0; right: 0; z-index: 100;
  display: flex; justify-content: center; pointer-events: none;
}
.seo-nav-inner {
  pointer-events: auto;
  display: flex; align-items: center; gap: 20px;
  padding: 9px 10px 9px 20px;
  border-radius: 99px;
  background: rgba(10, 16, 36, 0.65);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  max-width: calc(100vw - 32px);
}
.seo-nav-brand { display: flex; align-items: center; }
.seo-nav-brand img { height: 26px; width: auto; display: block; }
.seo-nav-links { display: flex; gap: 20px; font-size: 14px; color: var(--ink-200); }
.seo-nav-links a { transition: color .12s ease; }
.seo-nav-links a:hover { color: #fff; }
.seo-nav-cta { display: flex; align-items: center; gap: 8px; }
.seo-nav-back {
  font-size: 13.5px; color: var(--ink-300);
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: 99px; transition: color .12s ease, background .12s ease;
}
.seo-nav-back:hover { color: #fff; background: rgba(255,255,255,0.05); }
.seo-nav-signup {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 18px; border-radius: 99px;
  background: linear-gradient(180deg, #5E89FF 0%, #3D6FFF 100%);
  color: #fff; font-weight: 600; font-size: 14px; letter-spacing: -0.01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 0 rgba(0,0,0,0.18),
    0 8px 24px rgba(61,111,255,0.45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.seo-nav-signup:hover { transform: translateY(-1px); box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -2px 0 rgba(0,0,0,0.18), 0 12px 34px rgba(61,111,255,0.62); }
@media (max-width: 620px) { .seo-nav-back span.full { display: none; } .seo-nav-inner { gap: 12px; padding-left: 16px; } }

/* ---------- Accento serif aurora (la firma) ----------
   Specificita' alzata con .seo-root cosi' batte le regole
   inline flat delle singole pagine (che venivano dopo). */
.seo-root .seo-accent,
.seo-root [class$="-h1"] em, .seo-root [class$="-title"] em,
.seo-root h1 em, .seo-root h2 em, .seo-root h3 em {
  font-family: var(--font-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  background: var(--grad-aurora) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
  padding-right: 0.04em;
}

/* ---------- Eyebrow / chip ---------- */
.seo-eyebrow, .vsg-eyebrow, .cfs-eyebrow, .sf-eyebrow, .art-eyebrow, .art-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px; border-radius: 99px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  color: var(--ink-200);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  backdrop-filter: blur(10px);
}
.seo-eyebrow i, .vsg-eyebrow i {
  width: 6px; height: 6px; border-radius: 99px;
  background: var(--azure); box-shadow: 0 0 10px var(--azure);
}

/* ---------- Superfici in vetro: card, tabella, faq ---------- */
.vsg-choose-card, .cfs-card, .sf-tool, .art-card,
.seo-card, .vsg-table-wrap, .art-metric-table, .sf-decision {
  background: linear-gradient(160deg, rgba(26,37,72,0.55), rgba(10,16,36,0.5)) !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  border-radius: var(--r-lg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
/* card "Pacta" evidenziata con alone azure */
.vsg-choose-card.is-pacta, .cfs-card.is-pacta, .seo-card.is-pacta {
  border-color: rgba(79,183,255,0.34) !important;
  background: linear-gradient(160deg, rgba(30,60,120,0.55), rgba(12,22,50,0.55)) !important;
  box-shadow: 0 20px 60px rgba(61,111,255,0.22), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* tabella: header sticky in vetro, riga Pacta calda */
.vsg-table thead th, .art-metric-table thead th {
  background: rgba(10,16,36,0.85) !important;
  backdrop-filter: blur(8px);
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-300);
}
.vsg-table thead th.col-pacta { color: var(--azure) !important; }
.vsg-table td.col-pacta, .vsg-table th.col-pacta {
  background: linear-gradient(180deg, rgba(79,183,255,0.07), rgba(79,183,255,0.02)) !important;
}
.vsg-table tr:hover td { background: rgba(255,255,255,0.02); }
/* garanzia: le tabelle wide scrollano DENTRO il wrapper, mai la pagina
   (alta specificita' con .seo-root per battere gli inline delle pagine) */
.seo-root .vsg-table-wrap, .seo-root .art-table-wrap, .seo-root .sf-table-wrap,
.seo-root .art-metric-table, .seo-root .sf-decision {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}

/* ---------- Bottoni (ereditano da styles.css .btn-primary/.btn-ghost) ---------- */
.seo-cta {
  position: relative;
  text-align: center;
  margin: 90px auto 0; max-width: 880px;
  padding: 54px 40px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(61,111,255,0.20), transparent 60%),
    linear-gradient(160deg, rgba(26,37,72,0.6), rgba(10,16,36,0.6));
  border: 1px solid rgba(255,255,255,0.10);
  overflow: hidden;
}
.seo-cta::before {
  content: ""; position: absolute; inset: -1px -1px auto -1px; height: 1px;
  background: var(--grad-aurora); opacity: 0.7;
}
.seo-cta h2 { font-size: clamp(26px, 3vw, 38px); letter-spacing: -0.025em; font-weight: 500; color: #fff; }
.seo-cta p { color: var(--ink-200); margin-top: 12px; font-size: 16px; }
.seo-cta-row { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }
.seo-cta-note { margin-top: 18px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-400); }

/* ---------- Screenshot frame con alone ---------- */
.shot-frame {
  position: relative;
  border: 1px solid rgba(255,255,255,0.09);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: rgba(10,16,36,0.4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.45);
}
.shot-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
  border-radius: inherit;
}
.shot-frame img { display: block; width: 100%; height: auto; }

/* ---------- Reveal al load (staggered, rispetta reduce-motion) ---------- */
@keyframes seoRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.seo-rise { opacity: 0; animation: seoRise .7s cubic-bezier(.2,.7,.2,1) forwards; }
.seo-rise.d1 { animation-delay: .05s; } .seo-rise.d2 { animation-delay: .13s; }
.seo-rise.d3 { animation-delay: .21s; } .seo-rise.d4 { animation-delay: .30s; }
@media (prefers-reduced-motion: reduce) { .seo-rise { opacity: 1; animation: none; } }

/* offset per la nav fixed: le pagine partono sotto la pill */
.vsg-page, .cfs-page, .sf-page, .art-page { padding-top: 104px !important; }

/* ---------- Hardening mobile (nessun overflow, respiro giusto) ---------- */
@media (max-width: 560px) {
  .seo-nav { top: 12px; }
  .seo-nav-inner { gap: 10px; padding: 8px 8px 8px 14px; }
  .seo-nav-signup { padding: 8px 14px; }
  .vsg-page, .cfs-page, .sf-page, .art-page {
    padding-top: 88px !important; padding-left: 16px !important; padding-right: 16px !important;
  }
  .seo-cta { padding: 38px 22px; margin-top: 60px; }
  .seo-cta-row { flex-direction: column; }
  .seo-cta-row .btn-primary, .seo-cta-row .btn-ghost { width: 100%; justify-content: center; }
  /* le tabelle wide scrollano dentro il loro contenitore, mai la pagina */
  .vsg-table-wrap, .art-metric-table, .sf-table-wrap { -webkit-overflow-scrolling: touch; }
}
/* rete di sicurezza: media/tabelle non allargano mai la pagina */
.shot-frame, .shot-frame img { max-width: 100%; }

/* ============================================================
   KIT EDITORIALE per gli articoli (roundup, pillar, guide).
   TOC sticky, pull-quote aurora, box key-takeaways, callout,
   section header con numero. CSS-only (nessun JS).
   ============================================================ */
html { scroll-behavior: smooth; }

/* layout a 2 colonne: TOC sticky a sinistra, articolo a destra */
.seo-artgrid {
  display: grid;
  grid-template-columns: 232px minmax(0, 760px);
  gap: 56px;
  max-width: 1080px;
  margin: 0 auto;
  align-items: start;
}
.seo-artgrid > .seo-toc { position: sticky; top: 108px; }

.seo-toc-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-400); margin-bottom: 14px; display: block;
}
.seo-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid rgba(255,255,255,0.10); }
.seo-toc li { margin: 0; }
.seo-toc a {
  display: block; padding: 7px 0 7px 16px; margin-left: -1px;
  font-size: 13.5px; line-height: 1.4; color: var(--ink-300);
  border-left: 1px solid transparent; transition: color .14s ease, border-color .14s ease;
}
.seo-toc a:hover { color: #fff; border-left-color: var(--azure); }

/* header di sezione con numero mono (ritmo editoriale) */
.seo-secnum {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--azure); display: block; margin-bottom: 8px;
}

/* pull-quote: serif aurora grande che spezza il testo */
.seo-pullquote {
  margin: 40px 0; padding: 6px 0 6px 26px;
  border-left: 3px solid transparent;
  border-image: var(--grad-aurora) 1;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.22; letter-spacing: -0.01em;
  color: var(--ink-100);
}
.seo-pullquote b, .seo-pullquote em {
  font-style: italic;
  background: var(--grad-aurora); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* box "key takeaways": glass, in cima all'articolo */
.seo-takeaways {
  margin: 30px 0 8px; padding: 24px 26px;
  border-radius: var(--r-lg);
  background: linear-gradient(160deg, rgba(26,37,72,0.55), rgba(10,16,36,0.5));
  border: 1px solid rgba(255,255,255,0.09);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.32);
  position: relative; overflow: hidden;
}
.seo-takeaways::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--grad-aurora); }
.seo-takeaways-label {
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--azure); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.seo-takeaways-label::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--azure); box-shadow: 0 0 8px var(--azure); }
.seo-takeaways ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.seo-takeaways li { position: relative; padding-left: 22px; font-size: 15.5px; line-height: 1.55; color: var(--ink-200); }
.seo-takeaways li::before { content: ""; position: absolute; left: 3px; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--grad-aurora); }
.seo-takeaways li strong { color: #fff; font-weight: 600; }

/* callout / aside (tip, nota) */
.seo-callout {
  margin: 26px 0; padding: 18px 22px; border-radius: var(--r-md);
  background: rgba(79,183,255,0.06); border: 1px solid rgba(79,183,255,0.22); border-left: 3px solid var(--azure);
  font-size: 15px; line-height: 1.6; color: var(--ink-100);
}
.seo-callout strong { color: #fff; }

/* mobile: TOC diventa una barra orizzontale scrollabile in cima all'articolo */
@media (max-width: 900px) {
  .seo-artgrid { display: block; }
  .seo-artgrid > .sf-main, .seo-artgrid > .art-main { max-width: 100%; }
  .seo-artgrid > .seo-toc {
    position: static; margin-bottom: 8px; min-width: 0;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 12px;
  }
  .seo-toc ol { display: flex; gap: 4px; border-left: none; }
  .seo-toc a { white-space: nowrap; padding: 8px 12px; border-left: none; border-radius: 99px; background: rgba(255,255,255,0.04); font-size: 12.5px; }
  .seo-toc a:hover { border-left: none; background: rgba(79,183,255,0.14); }
  .seo-pullquote { font-size: clamp(21px, 6vw, 26px); margin: 30px 0; }
}