/* ═══════════════════════════════════════════════════════════════════════
   IMMAGINIA · sistema visivo condiviso
   Editor grafico web italiano — "Tutto quello che Canva ti fa pagare. Gratis."
   Bind dei token brand del Brief §2. La magia (gradiente) è rara: risalta.
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;450;500;600&family=Fraunces:ital,opsz,wght@1,9..144,400;1,9..144,500;0,9..144,500&display=swap');

:root {
  /* ── palette brand (§2) ─────────────────────────────────────────── */
  --ink:        #1A1533;   /* inchiostro — testi e superfici scure */
  --magia:      #7C3AED;   /* primario — violetto */
  --scintilla:  #FFB13D;   /* accento caldo — ambra, il tocco italiano */
  --carta:      #FAF8F5;   /* sfondi chiari — bianco caldo */
  --fucsia:     #C026D3;   /* estremo del gradiente firma */

  /* ── superfici & testo derivati ─────────────────────────────────── */
  --bg:        var(--carta);
  --surface:   #FFFFFF;
  --surface-2: #F5F2FB;                                  /* pannelli tenui violacei */
  --fg:        var(--ink);
  --muted:     #6E6A85;                                  /* testo secondario violaceo-neutro */
  --faint:     #9A96AE;
  --border:    #ECE7F3;                                  /* hairline calda */
  --border-2:  #DED7EC;

  /* ── gradiente firma — SOLO momenti magici (AI, CTA primarie) ───── */
  --grad-magia: linear-gradient(120deg, var(--magia) 0%, var(--fucsia) 100%);
  --grad-magia-soft: linear-gradient(120deg,
      color-mix(in oklab, var(--magia) 12%, transparent),
      color-mix(in oklab, var(--fucsia) 12%, transparent));
  --magia-soft:     color-mix(in oklab, var(--magia) 10%, transparent);
  --magia-softer:   color-mix(in oklab, var(--magia) 6%, transparent);
  --scintilla-soft: color-mix(in oklab, var(--scintilla) 18%, transparent);

  /* ── tipografia (§2) ────────────────────────────────────────────── */
  --font-display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-serif:   'Fraunces', 'Iowan Old Style', Georgia, serif;   /* wordmark / citazioni */
  --font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

  /* ── forma (§2): angoli 10–14px, ombre morbide e basse ──────────── */
  --radius:    12px;
  --radius-sm: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(26,21,51,.05), 0 2px 8px rgba(26,21,51,.04);
  --shadow-2: 0 4px 14px rgba(26,21,51,.07), 0 12px 34px rgba(26,21,51,.07);
  --shadow-magia: 0 8px 24px color-mix(in oklab, var(--magia) 34%, transparent);

  --container: 1180px;
  --gutter: 28px;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: none; }
p { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
::selection { background: var(--scintilla-soft); }

/* ── layout ───────────────────────────────────────────────────────── */
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 16px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; }

/* ── tipografia ───────────────────────────────────────────────────── */
h1, .h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(40px, 5.4vw, 68px); line-height: 1.03; letter-spacing: -.03em; }
h2, .h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.08; letter-spacing: -.025em; }
h3, .h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.3; letter-spacing: -.01em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--muted); max-width: 56ch; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--magia);
}
.meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }
.num  { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ── wordmark (Fraunces italico — tocco editoriale italiano) ──────── */
.wordmark {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  font-size: 25px; letter-spacing: -.01em; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px; line-height: 1;
}
.wordmark .spark { color: var(--magia); }
.wordmark--light { color: #fff; }
.wordmark--sm { font-size: 20px; }

/* ── sparkle: firma visiva coerente delle azioni AI (§2 micro-magia) ─ */
.spark {
  display: inline-block; width: 1em; height: 1em; flex: none;
  color: var(--magia);
}
.spark svg { width: 100%; height: 100%; }
.spark-anim { animation: sparklePulse 2.6s ease-in-out infinite; }
@keyframes sparklePulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: .95; }
  50%      { transform: scale(1.14) rotate(8deg); opacity: 1; }
}

/* ── bottoni ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 20px; border-radius: var(--radius);
  font-family: var(--font-display); font-weight: 500; font-size: 15px; letter-spacing: -.01em;
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .08s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn:active { transform: translateY(1px); }
.btn-magia { background: var(--grad-magia); color: #fff; box-shadow: var(--shadow-magia); }
.btn-magia:hover { filter: brightness(1.05); box-shadow: 0 10px 30px color-mix(in oklab, var(--magia) 42%, transparent); }
.btn-solid { background: var(--ink); color: #fff; }
.btn-solid:hover { background: color-mix(in oklab, var(--ink) 88%, var(--magia)); }
.btn-ghost { background: var(--surface); color: var(--fg); border-color: var(--border-2); box-shadow: var(--shadow-1); }
.btn-ghost:hover { border-color: var(--magia); color: var(--magia); }
.btn-quiet { color: var(--muted); padding-inline: 10px; }
.btn-quiet:hover { color: var(--fg); }
.btn-lg { padding: 15px 26px; font-size: 16.5px; border-radius: 14px; }
.btn-sm { padding: 8px 14px; font-size: 13.5px; border-radius: 9px; }
.btn-block { width: 100%; }
.btn-arrow::after { content: '→'; transition: transform .15s ease; }
.btn-arrow:hover::after { transform: translateX(3px); }

/* ── pill / tag ───────────────────────────────────────────────────── */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: var(--radius-pill);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .03em;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--muted);
}
.pill-magia { background: var(--magia-soft); border-color: transparent; color: var(--magia); }
.pill-scintilla { background: var(--scintilla-soft); border-color: transparent; color: #A25E00; }

/* ── card ─────────────────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
}

/* ── topnav condivisa (marketing) ─────────────────────────────────── */
.topnav {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--carta) 82%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--border);
}
.topnav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.topnav nav { display: flex; gap: 30px; }
.topnav nav a { font-size: 15px; color: var(--muted); font-weight: 450; }
.topnav nav a:hover { color: var(--fg); }

/* ── footer condiviso ─────────────────────────────────────────────── */
.pagefoot { background: var(--ink); color: #C9C4DD; padding-block: 64px 40px; }
.pagefoot a { color: #C9C4DD; }
.pagefoot a:hover { color: #fff; }

/* ── utility ──────────────────────────────────────────────────────── */
.hide-mobile { }
.text-magia { color: var(--magia); }
.text-scintilla { color: var(--scintilla); }
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .topnav nav { display: none; }
  .hide-mobile { display: none !important; }
}