/* ============================================================
   Spookink.ai — Design system CSS (build, fase 7)
   Fonte: DESIGN.md (root). Token nominati riportati 1:1, i token
   derivati per profondita atmosferica sono segnalati come tali.
   ============================================================ */

:root{
  /* --- Token DESIGN.md (1:1) --- */
  --violet: #5b4c98;
  --cyan: #83f5fe;
  --ink: #1d1d1d;          /* surface scura (landing/conferma) */
  --paper: #faf9fb;        /* surface chiara (blog) */
  --text: #f2f2f5;         /* testo su scuro */
  --text-on-light: #1d1d1d;
  --text-muted: #a9a6b8;   /* testo secondario su scuro */
  --border: #3a3745;       /* bordo su scuro */
  --card: #252230;         /* card/input su scuro */

  /* --- Derivati per profondita atmosferica (non nel DESIGN.md, coerenti con le regole nominate) --- */
  --ink-deep: #131316;
  --ink-2: #201f26;
  --violet-ink: #2a2140;     /* violetto scurito, base radiali sullo shell scuro */
  --violet-soft: #a79bd6;    /* viola piu chiaro, per testo/dettagli su scuro (contrasto AA verificato: ~6.2:1 su --card) */
  --paper-2: #f2eef8;        /* superficie chiara leggermente tinta, per card sul blog */
  --border-light: #e3dcef;
  --text-muted-light: #6c6478;
  --shadow-dark: 0 24px 48px -24px rgba(13, 8, 28, .65), 0 2px 0 0 rgba(255,255,255,.03) inset;
  --shadow-light: 0 16px 32px -18px rgba(91, 76, 152, .22);

  /* --- Tipografia --- */
  --font-display: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Radius / spacing (da DESIGN.md) --- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-full: 9999px;
  --sp-sm: 8px;
  --sp-md: 16px;
  --sp-lg: 32px;
  --sp-xl: 64px;

  --container: 1180px;
  --measure: 62ch;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}

body{
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.is-light{
  color: var(--text-on-light);
  background: var(--paper);
}

img, svg{ display: block; max-width: 100%; }
a{ color: inherit; }

h1, h2, h3, h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
}

p{ margin: 0; }

ul{ margin: 0; padding: 0; list-style: none; }

button{ font-family: inherit; cursor: pointer; }

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

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

/* Skip link (a11y — WCAG 2.4.1): nascosto finche non riceve focus da tastiera */
.skip-link{
  position: absolute;
  top: -60px; left: 8px;
  z-index: 200;
  background: var(--cyan);
  color: var(--ink);
  font-weight: 600;
  font-size: .9rem;
  padding: 10px 18px;
  border-radius: var(--r-md);
  text-decoration: none;
  transition: top .15s var(--ease);
}
.skip-link:focus{ top: 8px; }

/* Focus visibile ovunque (a11y) */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible{
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

/* ============================================================
   Scroll progress bar (dettaglio editoriale)
   ============================================================ */
.scroll-progress{
  position: fixed; top: 0; left: 0; height: 3px; width: 0%;
  /* Solid accent, non gradiente: la scroll-progress bar attraversa tutte le
     sezioni della pagina, non solo l'hero, quindi non e un contesto ammesso
     dalla Gradient-as-Signal Rule (DESIGN.md). */
  background: var(--cyan);
  z-index: 100;
  transition: width .1s linear;
}
@media (prefers-reduced-motion: reduce){
  .scroll-progress{ display: none; }
}

/* ============================================================
   Grana / noise overlay (profondita atmosferica, mai piatta)
   ============================================================ */
.noise{
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ============================================================
   Superfici atmosferiche scure (hero + conferma + CTA finale)
   ============================================================ */
.atmo{
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 82% -6%, rgba(131,245,254,.16), transparent 60%),
    radial-gradient(65% 55% at 6% 108%, rgba(91,76,152,.32), transparent 65%),
    linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 55%, var(--ink-deep) 100%);
  overflow: clip;
}
.atmo::before{ content:""; position:absolute; inset:0; }
.atmo > .noise{ z-index: 0; }
.atmo > *:not(.noise){ position: relative; z-index: 1; }

/* Sezione scura "piatta" di base (non hero) — comunque mai colore solido puro:
   leggerissima variazione tonale verticale, nessun gradiente cyan/viola qui
   (Gradient-as-Signal Rule: quel gradiente resta riservato a hero/Spook/condivisione). */
.section-dark{
  background: linear-gradient(180deg, var(--ink) 0%, var(--ink-2) 100%);
  position: relative;
}
.section-dark.alt{
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
}

.section-light{
  background: var(--paper);
}

section{ padding-block: clamp(56px, 9vw, 128px); }

.section-head{
  max-width: 640px;
  margin-bottom: clamp(28px, 5vw, 48px);
}
.section-head.center{ margin-inline: auto; text-align: center; }

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}
.is-light .eyebrow{ color: var(--violet); }

h2.h-section{
  font-size: clamp(1.75rem, 4vw, 2.75rem);
}

.lede{
  font-size: 1.0625rem;
  color: var(--text-muted);
  max-width: 46ch;
  margin-top: 14px;
}
.is-light .lede{ color: var(--text-muted-light); }

/* ============================================================
   Reveal on scroll (rispetta prefers-reduced-motion)
   ============================================================ */
.reveal{
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}
.reveal-stagger > * { transition-delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(29,29,29,.72);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.is-light .site-header{
  background: rgba(250,249,251,.82);
  border-bottom: 1px solid var(--border-light);
}
.header-row{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}
.logo-link{ display: inline-flex; align-items: center; }
.logo-link img{ height: 22px; width: auto; }
@media (min-width: 640px){ .logo-link img{ height: 24px; } }

.header-actions{ display: flex; align-items: center; gap: 10px; }

.nav-link-blog{
  display: none;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 10px 14px;
  border-radius: var(--r-full);
  text-decoration: none;
  color: var(--text-muted);
}
@media (min-width: 720px){
  .nav-link-blog{ display: inline-flex; }
}
.nav-link-blog:hover{ color: var(--text); }
.is-light .nav-link-blog{ color: var(--text-muted-light); }
.is-light .nav-link-blog:hover{ color: var(--text-on-light); }

.nav-simple{ display: flex; align-items: center; gap: 6px; }
.nav-simple a{
  font-size: .95rem; font-weight: 500; padding: 8px 14px; border-radius: var(--r-full); text-decoration: none;
  color: var(--text-muted-light);
}
.nav-simple a[aria-current="page"]{
  color: var(--text-on-light);
  background: var(--paper-2);
}
.nav-simple a:hover{ color: var(--text-on-light); }

/* menu mobile leggero per il link Blog */
.menu-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--r-full);
  background: transparent;
  color: var(--text);
}
.menu-toggle svg{ width: 18px; height: 18px; }
.mobile-menu{
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  padding: 10px clamp(20px,5vw,48px) 16px;
}
.mobile-menu.is-open{ display: block; }
.mobile-menu a{
  display: block; padding: 12px 4px; font-size: 1rem; text-decoration: none; color: var(--text);
  border-top: 1px solid var(--border);
}

@media (min-width: 720px){
  .menu-toggle{ display: none; }
  .mobile-menu{ display: none !important; }
}

/* ============================================================
   Buttons
   ============================================================ */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: var(--r-full);
  padding: 14px 28px;
  min-height: 44px;
  border: 1px solid transparent;
  text-decoration: none;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
}
.btn-primary{
  background: var(--cyan);
  color: var(--ink);
  box-shadow: 0 14px 30px -14px rgba(131,245,254,.55);
}
.btn-primary:hover{ transform: translateY(-1px); box-shadow: 0 18px 34px -14px rgba(131,245,254,.7); }
.btn-secondary{
  background: transparent;
  color: var(--text);
  border-color: rgba(242,242,245,.35);
}
.btn-secondary:hover{ border-color: var(--cyan); color: var(--cyan); }
.is-light .btn-secondary{ color: var(--text-on-light); border-color: rgba(29,29,29,.25); }
.is-light .btn-secondary:hover{ border-color: var(--violet); color: var(--violet); }

.btn-sm{ padding: 10px 20px; font-size: .875rem; min-height: 40px; }
.btn-block{ width: 100%; }

.header-actions .btn{ padding: 10px 20px; font-size: .875rem; min-height: 44px; }

/* ============================================================
   Chips / badges
   ============================================================ */
.chip{
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: .04em;
  padding: 8px 14px;
  border-radius: var(--r-full);
  border: 1px solid var(--border);
  color: var(--text-muted);
  background: rgba(255,255,255,.02);
}
.chip .dot{ width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 3px rgba(131,245,254,.18); flex: none; }
.is-light .chip{ border-color: var(--border-light); color: var(--text-muted-light); background: #fff; }

.chip-soon{
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .08em;
  color: var(--violet-soft);
  border: 1px dashed rgba(122,107,179,.5);
  border-radius: var(--r-full);
  padding: 5px 10px;
  flex: none;
}
.is-light .chip-soon{ color: var(--violet); border-color: rgba(91,76,152,.35); }

/* ============================================================
   Hero
   ============================================================ */
.hero{ padding-top: clamp(48px, 9vw, 96px); }
.hero-grid{
  display: grid;
  gap: clamp(32px, 6vw, 56px);
  align-items: center;
}
@media (min-width: 960px){
  .hero-grid{ grid-template-columns: 1.05fr 0.95fr; }
}

.hero-eyebrow{
  font-family: var(--font-mono);
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--violet-soft);
  margin-bottom: 18px;
  display: inline-block;
}

.hero h1{
  font-size: clamp(2.5rem, 6.2vw, 4.375rem);
  color: var(--text);
}

.hero .lede{
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 42ch;
  margin-top: 18px;
}

.hero-cta-row{
  display: flex; flex-wrap: wrap; align-items: center; gap: 16px;
  margin-top: 30px;
}
.hero-micro{
  font-size: .875rem;
  color: var(--text-muted);
  max-width: 34ch;
}
.hero-badge-row{ margin-top: 22px; }

/* Mockup workspace placeholder */
.hero-visual{
  position: relative;
  border-radius: var(--r-xl);
  padding: 1px;
  /* Solid tint, non gradiente: il gradiente cyan/viola in questa sezione resta
     riservato al badge Spook (Gradient-as-Signal Rule, DESIGN.md). */
  background: rgba(131,245,254,.35);
}
.hero-visual-inner{
  border-radius: calc(var(--r-xl) - 1px);
  background: linear-gradient(165deg, #23212c 0%, #1a1922 100%);
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--shadow-dark);
}
.mock-toolbar{
  display: flex; align-items: center; gap: 6px; margin-bottom: 18px;
}
.mock-dot{ width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.14); }
.mock-lines{ display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; }
.mock-line{ height: 9px; border-radius: 5px; background: rgba(255,255,255,.09); }
.mock-transcript{
  display: flex; flex-direction: column; gap: 12px;
}
.mock-row{ display: flex; gap: 12px; align-items: flex-start; }
.mock-avatar{
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  /* Solid, non gradiente: evita overuse del gradiente cyan/viola nella stessa
     sezione hero (Gradient-as-Signal Rule, DESIGN.md — un solo uso per sezione,
     riservato al badge Spook). */
  background: var(--violet);
}
.mock-bubble{ flex: 1; display: flex; flex-direction: column; gap: 6px; }
.mock-bar{ height: 7px; border-radius: 4px; background: rgba(255,255,255,.08); }
.mock-chips{ display:flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.mock-chip{
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 12px; border-radius: var(--r-full); border: 1px solid rgba(255,255,255,.12); color: var(--text-muted);
}
.hero-spook-badge{
  position: absolute; bottom: -16px; right: 18px;
  width: 68px; height: 68px; border-radius: 50%;
  background: linear-gradient(140deg, var(--violet) 0%, #71a7ce 55%, var(--cyan) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 18px 30px -12px rgba(91,76,152,.6);
  border: 3px solid var(--ink);
}
.hero-spook-badge svg{ width: 38px; height: 38px; color: var(--ink); }

/* ============================================================
   Marquee (dettaglio editoriale in movimento, sobrio)
   ============================================================ */
.marquee{
  overflow: hidden;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: 16px;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display: flex; gap: 40px; width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track span{
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-muted); white-space: nowrap; display: flex; align-items: center; gap: 10px;
}
.marquee-track span::after{ content: "\2022"; color: var(--cyan); }
/* Sposta di esattamente una copia (1/6 della larghezza totale, non piu' 1/2):
   con 6 copie identiche nel markup, questo fa combaciare perfettamente la
   fine del ciclo con l'inizio, senza soluzione di continuita'. */
@keyframes marquee{ from{ transform: translateX(0); } to{ transform: translateX(-16.6667%); } }
@media (prefers-reduced-motion: reduce){
  .marquee-track{ animation: none; }
}

/* ============================================================
   Problem section (bullets con indice grande)
   ============================================================ */
.problem-list{ display: grid; gap: 22px; margin-top: 8px; }
@media (min-width: 860px){ .problem-list{ grid-template-columns: repeat(3, 1fr); gap: 28px; } }
.problem-item{ display: flex; gap: 16px; align-items: flex-start; }
.problem-index{
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  color: transparent;
  -webkit-text-stroke: 1px rgba(131,245,254,.55);
  line-height: 1;
  flex: none;
}
.problem-item p{ font-size: 1.0625rem; color: var(--text); padding-top: 2px; }

/* ============================================================
   Cards
   ============================================================ */
.card{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: clamp(22px, 3vw, 30px);
  box-shadow: var(--shadow-dark);
}
.card-grid-2{ display: grid; gap: 22px; }
@media (min-width: 800px){ .card-grid-2{ grid-template-columns: 1fr 1fr; } }

.card-diff{ position: relative; overflow: hidden; }
.card-diff.is-trust{
  border-color: rgba(131,245,254,.28);
  background: linear-gradient(165deg, rgba(131,245,254,.05), rgba(37,34,48,1) 42%);
}
.card-diff.is-trust::after{
  content: ""; position: absolute; inset: -40% -40% auto auto; width: 60%; height: 60%;
  background: radial-gradient(circle, rgba(131,245,254,.16), transparent 70%);
  pointer-events: none;
}
.card-icon{
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.04); border: 1px solid var(--border);
  margin-bottom: 18px;
}
.card-icon svg{ width: 22px; height: 22px; color: var(--cyan); }
.card h3{ font-size: 1.3125rem; margin-bottom: 10px; }
.card p{ color: var(--text-muted); font-size: 1rem; }

.diff-sub{
  font-family: var(--font-mono); font-size: .8125rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); margin-top: 4px; margin-bottom: 20px; display: block;
}

/* ============================================================
   Steps ("Come funziona")
   ============================================================ */
.steps-grid{ display: grid; gap: 26px; margin-top: 8px; }
@media (min-width: 720px){ .steps-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .steps-grid{ grid-template-columns: repeat(4, 1fr); } }
.step{ position: relative; padding-top: 8px; }
.step-num{
  font-family: var(--font-display); font-weight: 600; font-size: 1.75rem;
  color: var(--cyan); display: block; margin-bottom: 14px;
}
.step h3{ font-size: 1.125rem; margin-bottom: 8px; }
.step p{ color: var(--text-muted); font-size: .975rem; }
.step:not(:last-child)::before{
  content: ""; position: absolute; top: 12px; left: -13px; width: 1px; height: calc(100% - 24px);
  background: var(--border); display: none;
}
@media (min-width: 1080px){
  .step:not(:last-child)::before{ display: block; right: -13px; left: auto; }
}

/* ============================================================
   Riservatezza (diagramma locale)
   ============================================================ */
.trust-grid{ display: grid; gap: clamp(28px,5vw,48px); align-items: center; }
@media (min-width: 900px){ .trust-grid{ grid-template-columns: 0.85fr 1.15fr; } }
.device-diagram{
  position: relative; border-radius: var(--r-xl);
  border: 1px solid var(--border);
  background: radial-gradient(120% 120% at 30% 20%, rgba(91,76,152,.22), transparent 60%), var(--ink-2);
  padding: clamp(28px, 5vw, 44px);
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
}
.device-diagram .ring{
  position: absolute; inset: 18px; border: 1px dashed rgba(131,245,254,.25); border-radius: var(--r-lg);
}
.device-diagram svg{ width: 100px; height: 100px; color: var(--cyan); }
.device-caption{
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted);
}
.trust-body p{ margin-bottom: 14px; color: var(--text-muted); max-width: 46ch; }
.trust-link{
  display: inline-flex; gap: 6px; margin-top: 6px; font-weight: 600; color: var(--cyan); text-decoration: none;
  border-bottom: 1px solid rgba(131,245,254,.4);
  padding-bottom: 2px;
}
.trust-link:hover{ border-color: var(--cyan); }

/* ============================================================
   Per chi e (scenari)
   ============================================================ */
.scenario-scroller{
  display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
  margin-inline: calc(clamp(20px, 5vw, 48px) * -1);
  padding-inline: clamp(20px, 5vw, 48px);
}
.scenario-scroller::-webkit-scrollbar{ height: 6px; }
.scenario-scroller::-webkit-scrollbar-thumb{ background: var(--border); border-radius: var(--r-full); }
.scenario-card{
  scroll-snap-align: start; flex: 0 0 78%; max-width: 320px;
}
@media (min-width: 720px){
  .scenario-scroller{ display: grid; grid-template-columns: repeat(3, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .scenario-card{ flex: initial; max-width: none; }
}
.scenario-index{
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; color: var(--text-muted);
  margin-bottom: 14px; display: block;
}
.scenario-card h3{ font-size: 1.1875rem; margin-bottom: 10px; }
.scenario-card p{ color: var(--text-muted); font-size: .975rem; }
.scroller-hint{ text-align: center; margin-top: 10px; font-size: .75rem; color: var(--text-muted); }
@media (min-width: 720px){ .scroller-hint{ display: none; } }

.cta-center{ text-align: center; margin-top: clamp(28px, 5vw, 40px); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list{ max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item{
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--card);
  overflow: hidden;
}
.faq-item summary{
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 22px; font-weight: 600; font-size: 1.0125rem;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-chevron{ flex: none; width: 20px; height: 20px; color: var(--cyan); transition: transform .25s var(--ease); }
.faq-item[open] .faq-chevron{ transform: rotate(180deg); }
.faq-answer{ padding: 0 22px 20px; color: var(--text-muted); max-width: 64ch; }

/* ============================================================
   Roadmap
   ============================================================ */
.roadmap-list{ display: grid; gap: 18px; margin-top: 8px; }
@media (min-width: 860px){ .roadmap-list{ grid-template-columns: repeat(3, 1fr); } }
.roadmap-item{
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px;
  background: var(--card);
}
.roadmap-item p{ font-size: .975rem; color: var(--text); }
.honesty-note{
  margin-top: 22px; font-size: .875rem; color: var(--text-muted); font-style: italic;
}

/* ============================================================
   Form / CTA finale
   ============================================================ */
.form-wrap{ max-width: 480px; margin-inline: auto; text-align: center; }
.form-wrap h2{ margin-bottom: 30px; }
.field{ text-align: left; margin-bottom: 16px; }
.field label{
  display: block; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 8px;
}
.field input, .field select{
  width: 100%;
  background: var(--card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 13px 16px;
  font-size: 1rem;
  font-family: var(--font-body);
  min-height: 48px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input::placeholder{ color: #74717f; }
.field input:focus, .field select:focus{
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(131,245,254,.18);
}
.field select{ appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23a9a6b8' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.field-error{ display: none; color: #ff9d9d; font-size: .8125rem; margin-top: 6px; text-align: left; }
.field.has-error input, .field.has-error select{ border-color: #ff9d9d; }
.field.has-error .field-error{ display: block; }

.form-micro{ margin-top: 16px; font-size: .875rem; color: var(--text-muted); }
.form-badge{ margin-top: 16px; }
.form-error{ color: #ff9d9d; font-size: .875rem; margin: 0 0 14px; text-align: left; }
button[data-submit-btn][disabled]{ opacity: .7; cursor: wait; }
.form-status{
  margin-top: 18px; font-size: .875rem; color: var(--cyan); display: none;
}
.form-status.is-visible{ display: block; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ padding-block: clamp(32px, 6vw, 56px); border-top: 1px solid var(--border); }
.is-light .site-footer{ border-top-color: var(--border-light); }
.footer-row{
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px;
}
.footer-links{ display: flex; flex-wrap: wrap; gap: 22px; }
.footer-links a{ font-size: .9rem; text-decoration: none; color: var(--text-muted); }
.footer-links a:hover{ color: var(--text); }
.is-light .footer-links a{ color: var(--text-muted-light); }
.is-light .footer-links a:hover{ color: var(--text-on-light); }
.footer-logo img{ height: 20px; }

/* ============================================================
   Pagina di conferma
   ============================================================ */
.confirm-wrap{ max-width: 560px; margin-inline: auto; text-align: center; }
.confirm-badge{
  width: 96px; height: 96px; border-radius: 50%; margin-inline: auto 0; margin-bottom: 26px;
  background: linear-gradient(140deg, var(--violet) 0%, #71a7ce 55%, var(--cyan) 100%);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 22px 40px -16px rgba(91,76,152,.55);
  position: relative;
}
.confirm-badge svg{ width: 52px; height: 52px; color: var(--ink); }
.confirm-badge::after{
  content: ""; position: absolute; inset: -10px; border-radius: 50%;
  border: 1px solid rgba(131,245,254,.35);
  animation: pulse-ring 2.6s var(--ease) infinite;
}
@keyframes pulse-ring{
  0%{ transform: scale(.92); opacity: .8; }
  70%{ transform: scale(1.14); opacity: 0; }
  100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .confirm-badge::after{ animation: none; display: none; }
}
.confirm-wrap h1{ font-size: clamp(1.75rem, 4vw, 2.5rem); margin-bottom: 26px; }
.confirm-steps{ text-align: left; display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.confirm-step{ display: flex; gap: 16px; align-items: flex-start; }
.confirm-step .step-num{
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--card); border: 1px solid var(--border); color: var(--cyan);
  font-family: var(--font-mono); font-size: .875rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin: 0;
}
.confirm-step p{ color: var(--text); }
.confirm-contact{ margin-top: 28px; font-size: .95rem; color: var(--text-muted); }
.confirm-contact a{ color: var(--cyan); text-decoration: none; font-weight: 600; }
.confirm-secondary{ margin-top: 34px; }
.confirm-secondary a{
  font-size: .9375rem; color: var(--text-muted); text-decoration: none; border-bottom: 1px solid var(--border); padding-bottom: 2px;
}
.confirm-secondary a:hover{ color: var(--text); border-color: var(--text-muted); }

/* ============================================================
   Blog — indice
   ============================================================ */
.blog-intro p{ font-size: 1.125rem; max-width: 52ch; color: var(--text-muted-light); }
.blog-grid{ display: grid; gap: 24px; margin-top: clamp(28px, 5vw, 44px); }
@media (min-width: 860px){ .blog-grid{ grid-template-columns: repeat(6, 1fr); } }

.post-card{
  border-radius: var(--r-lg);
  border: 1px solid var(--border-light);
  background: #fff;
  box-shadow: var(--shadow-light);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post-card:hover{ transform: translateY(-3px); box-shadow: 0 22px 40px -18px rgba(91,76,152,.32); }
.post-card.is-disabled{ pointer-events: none; }

.post-card.featured{ grid-column: span 6; }
@media (min-width: 860px){
  .post-card.featured{ display: grid; grid-template-columns: 1.1fr 1fr; align-items: stretch; }
}
.post-card.compact{ grid-column: span 6; display: flex; gap: 18px; }
@media (min-width: 860px){
  .post-card.compact{ grid-column: span 3; flex-direction: column; }
}

.post-cover{ position: relative; overflow: hidden; }
.post-card.compact .post-cover{ width: 128px; flex: none; aspect-ratio: 1/1; }
@media (min-width: 860px){ .post-card.compact .post-cover{ width: auto; aspect-ratio: 16/10; } }
.post-card.featured .post-cover{ min-height: 220px; }
.post-cover svg{ width: 100%; height: 100%; display: block; }

.post-body{ padding: clamp(18px, 3vw, 30px); flex: 1; }
.post-card.compact .post-body{ padding: 4px 4px 4px 0; }
@media (min-width: 860px){ .post-card.compact .post-body{ padding: 18px 20px; } }

.post-tag{
  font-family: var(--font-mono); font-size: .6875rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--violet); font-weight: 600;
}
.post-card h3{ font-size: 1.0625rem; margin-top: 10px; margin-bottom: 8px; }
.post-card.featured h3{ font-size: clamp(1.375rem, 2.6vw, 1.75rem); }
.post-card p.excerpt{ color: var(--text-muted-light); font-size: .95rem; }
.post-meta{
  font-family: var(--font-mono); font-size: .75rem; color: var(--text-muted-light);
  margin-top: 14px; display: block;
}

.blog-cta-banner{
  border-radius: var(--r-xl);
  padding: clamp(36px, 6vw, 56px);
  text-align: center;
  margin-top: clamp(40px, 6vw, 64px);
  background:
    radial-gradient(70% 90% at 20% 0%, rgba(91,76,152,.12), transparent 60%),
    radial-gradient(70% 90% at 85% 100%, rgba(131,245,254,.14), transparent 60%),
    var(--paper-2);
  border: 1px solid var(--border-light);
}
.blog-cta-banner h2{ font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 22px; }

/* ============================================================
   Blog — articolo
   ============================================================ */
.article-header{ max-width: 760px; margin-inline: auto; text-align: left; }
.article-header h1{ font-size: clamp(2rem, 4.6vw, 3rem); margin-top: 14px; }
.article-meta{
  font-family: var(--font-mono); font-size: .8125rem; color: var(--text-muted-light);
  margin-top: 16px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center;
}
.article-meta .sep{ opacity: .5; }
.article-cover{ max-width: 900px; margin: clamp(28px,5vw,44px) auto 0; border-radius: var(--r-xl); overflow: hidden; border: 1px solid var(--border-light); }
.article-cover svg{ width: 100%; height: auto; display: block; }

.article-body{
  max-width: var(--measure);
  margin-inline: auto;
  margin-top: clamp(32px, 5vw, 48px);
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #2b2833;
}
.article-body p{ margin-bottom: 20px; }
.article-body h2{ font-size: 1.5rem; margin-top: 42px; margin-bottom: 16px; color: var(--text-on-light); }
.article-body ul{ margin-bottom: 20px; padding-left: 0; }
.article-body ul li{
  position: relative; padding-left: 26px; margin-bottom: 10px;
}
.article-body ul li::before{
  content: ""; position: absolute; left: 0; top: 10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--violet);
}

.inline-cta{
  max-width: var(--measure);
  margin: 40px auto;
  border-radius: var(--r-lg);
  border: 1px solid rgba(91,76,152,.28);
  background: linear-gradient(135deg, rgba(131,245,254,.08), rgba(91,76,152,.08));
  padding: 22px 26px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
}
.inline-cta p{ font-weight: 600; margin: 0; max-width: 34ch; color: var(--text-on-light); }
.inline-cta .btn-primary{ flex: none; }

.article-end-cta{
  max-width: var(--measure); margin: clamp(36px,5vw,56px) auto 0; text-align: center;
  border-top: 1px solid var(--border-light); padding-top: clamp(32px, 5vw, 44px);
}
.article-end-cta h2{ font-size: clamp(1.375rem, 3vw, 1.875rem); margin-bottom: 22px; }

.related-grid{ display: grid; gap: 20px; margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 720px){ .related-grid{ grid-template-columns: repeat(2, 1fr); } }
/* i post-card.compact qui vivono in una griglia a 2 colonne, non nella griglia a 6
   colonne dell'indice blog: neutralizziamo il grid-column: span 3 ereditato */
.related-grid .post-card.compact{ grid-column: auto; }
.related-title{
  font-family: var(--font-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted-light); margin-bottom: 16px; display: block;
}

/* ============================================================
   Footer: bottone "Preferenze cookie" (stesso stile dei link footer)
   ============================================================ */
.footer-links button{
  font: inherit; font-size: .9rem; background: none; border: none; padding: 0; cursor: pointer;
  color: var(--text-muted); text-decoration: none;
}
.footer-links button:hover{ color: var(--text); }
.is-light .footer-links button{ color: var(--text-muted-light); }
.is-light .footer-links button:hover{ color: var(--text-on-light); }

/* ============================================================
   Cookie banner + pannello preferenze
   Sempre su shell scura (elemento di sistema, indipendente dal tema
   della pagina sotto), coerente con card/input del design system.
   ============================================================ */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--ink-2);
  border-top: 1px solid var(--border);
  box-shadow: var(--shadow-dark);
  padding: 10px clamp(14px, 4vw, 28px);
}
.cookie-banner-inner{
  max-width: var(--container); margin-inline: auto;
  /* Un solo layer: niente wrap a riga nuova, i bottoni restano sempre
     affiancati al testo. Solo il testo (min-width:0) puo' andare a capo
     al suo interno per restringersi quando serve spazio ai bottoni. */
  display: flex; flex-wrap: nowrap; align-items: center; gap: 12px;
}
.cookie-banner-text{ flex: 1 1 auto; min-width: 0; }
.cookie-banner-text p{ margin: 0; font-size: .75rem; color: var(--text-muted); line-height: 1.35; }
.cookie-banner-text a{ color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-actions{ display: flex; flex-wrap: nowrap; gap: 8px; align-items: center; flex: none; }

/* Bottoni scoped al banner: il banner e' sempre scuro indipendentemente dal
   tema della pagina sotto, quindi forziamo lo stile "su scuro" anche sulle
   pagine is-light (altrimenti il bottone secondario erediterebbe le regole
   is-light .btn-secondary pensate per uno sfondo chiaro). Compatti ma senza
   scendere sotto il tap target minimo di 44px. */
.cookie-banner-actions .btn,
.cookie-panel-actions .btn{
  padding: 10px 14px;
  font-size: .75rem;
  min-height: 44px;
}
.cookie-banner-actions .btn-secondary{
  background: transparent; color: var(--text); border-color: rgba(242,242,245,.35);
}
.cookie-banner-actions .btn-secondary:hover{ border-color: var(--cyan); color: var(--cyan); }

.cookie-panel{
  max-width: var(--container); margin: 10px auto 0;
  border-top: 1px solid var(--border); padding-top: 10px;
  display: grid; gap: 8px;
}
.cookie-panel-row{
  display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: var(--card); border-radius: var(--r-md); border: 1px solid var(--border);
}
.cookie-panel-row strong{ color: var(--text); font-size: .875rem; }
.cookie-panel-row p{ margin: 2px 0 0; font-size: .75rem; color: var(--text-muted); max-width: 56ch; }
.cookie-panel-row input[type="checkbox"]{ width: 20px; height: 20px; flex: none; accent-color: var(--cyan); margin-top: 2px; }
.cookie-panel-actions{ display: flex; justify-content: flex-end; }