/* ============================================================================
   ExcellIA — Foglio di stile globale (Design System ExcellIA v2)
   ----------------------------------------------------------------------------
   Tema: "excellia" (blu notte) FISSO, senza selettore di tema (decisione chiusa,
   vedi pagina Notion "Design e UX"). Qui stanno SOLO i token e lo stile base:
   il design vero delle sezioni arriva nei task WS065+ della timeline.
   Valori cromatici e di spaziatura ereditati dal Design System v2 (non reinventati).
   ============================================================================ */

/* --- Font Inter self-hosted (privacy + prestazioni: NON dal CDN di Google) ----
   I file .woff2 vanno messi in /assets/fonts/. Finché non ci sono, vale il
   fallback di sistema e il sito compila/funziona lo stesso. Vedi assets/fonts/LEGGIMI.md.
   Rajdhani è ammesso SOLO per logotipo / titoli brand (come nelle slide). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;          /* font variabile: un solo file copre tutti i pesi */
  font-display: swap;
  src: url("/assets/fonts/Inter-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "Rajdhani";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/Rajdhani-Bold.woff2") format("woff2");
}

:root {
  /* ---- Colori, tema excellia (blu notte) ---- */
  --page:     #06111E;  /* sfondo pagina */
  --deep:     #040D18;  /* sfondo profondo (sezioni alternate, footer) */
  --sidebar:  #0A1B2E;
  --card:     #0D1F35;
  --raised:   #142840;  /* superficie rialzata (hover) */
  --border:   #1E3A5F;
  --text:     #E8F6FF;  /* testo principale */
  --text-2:   #7BB8D4;  /* testo secondario */
  --action:   #00A3FF;  /* electric blue — UNICO colore d'azione (bottoni, link) */
  --action-h: #38B6FF;  /* sky blue — hover */
  --success:  #A8E63D;  /* verde acido — successo / stato operativo */
  --warning:  #FFBD2E;  /* giallo — attenzione */
  --error:    #FF5F57;  /* rosso — errore */
  --teal:     #00E5C8;

  /* Gradiente firma (135°): asset di brand. Solo nei punti di presentazione
     (hero, blocchi di presentazione, CTA finale, parole chiave). Mai dietro a dati/testo fitto. */
  --grad: linear-gradient(135deg, #A8E63D 0%, #00E5C8 38%, #38B6FF 72%, #00A3FF 100%);

  /* ---- Tipografia ---- */
  --font-base:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-brand: "Rajdhani", var(--font-base);

  /* ---- Spaziature: base 4px (niente valori a occhio) ---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px;

  /* ---- Raggi ---- */
  --r-btn: 12px;  /* bottoni e input */
  --r-card: 16px; /* card */
  --r-box: 24px;  /* riquadri grandi */
}

/* ---- Reset minimo ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-base);
  background: var(--page);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

/* ---- Utility ---- */
.container { max-width: 1080px; margin: 0 auto; padding: 0 var(--sp-8); }

/* Testo "verniciato" col gradiente firma */
.g {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Etichetta sezione (occhiello) */
.lbl {
  display: inline-block; font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--action);
  margin-bottom: var(--sp-3);
}

/* Bottoni — restano blu PIENI, mai sfumati */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 11px 22px; border-radius: var(--r-btn);
  font-weight: 600; font-size: .9rem; cursor: pointer; border: none;
  transition: 160ms ease;
}
.btn-primary { background: var(--action); color: var(--deep); }
.btn-primary:hover { background: var(--action-h); }
.btn-ghost { background: transparent; color: var(--text-2); border: 1px solid var(--border); }
.btn-ghost:hover { color: var(--text); border-color: rgba(0,163,255,.5); }

/* ---- Animazione di entrata guidata dallo scroll (vedi assets/js/main.js) ---- */
.r { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; }
.r.v { opacity: 1; transform: none; }

/* ---- Stili di IMPALCATURA di navbar e footer (il design vero arriva in WS065+) ---- */
.nav { border-bottom: 1px solid var(--border); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: var(--sp-6); }
.nav-logo { font-family: var(--font-brand); font-weight: 700; letter-spacing: .03em; font-size: 1.1rem; }
.nav-links { display: flex; gap: var(--sp-6); }
.nav-links a { font-size: .875rem; color: var(--text-2); }
.nav-links a:hover { color: var(--text); }

.hero { padding: var(--sp-24) 0; }
.hero h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; margin-bottom: var(--sp-5); }
.hero-sub { max-width: 520px; color: var(--text-2); font-size: 1.05rem; }

.page { padding: var(--sp-16) 0; }
.page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; margin-bottom: var(--sp-4); }

.footer { background: var(--deep); border-top: 1px solid var(--border); padding: var(--sp-12) 0; margin-top: var(--sp-24); }
.footer-links { display: flex; gap: var(--sp-5); margin: var(--sp-4) 0; }
.footer-links a { color: var(--text-2); font-size: .875rem; }
.footer-links a:hover { color: var(--text); }
.footer-legal { color: var(--text-2); opacity: .7; font-size: .8rem; }

/* ---- Accessibilità: chi ha chiesto meno animazioni le riceve. Non negoziabile. ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .r { opacity: 1; transform: none; }
}

/* ---- Mobile-first: piccoli aggiustamenti sotto i 768px ---- */
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-5); }
  .nav-links { display: none; } /* la nav mobile (hamburger) arriva in WS115 */
}