/* ============================================================
   InvestFood Tech — Design tokens (stile: neon control room)
   Canvas notte, una sola voce cromatica, raggi a pillola.
   ============================================================ */

:root {
  /* --- Voce cromatica -------------------------------------- */
  --signal:        #7084ff;   /* accento: seconda riga dei titoli, glow, stati attivi */
  --voltage:       #405bff;   /* unica campitura ammessa per la CTA primaria */
  --signal-grad:   linear-gradient(179deg, #405bff 1.06%, #7084ff 123.42%);
  --plasma:        #3dd6f5;   /* solo in glow radiali, con parsimonia */

  /* --- Superfici ------------------------------------------- */
  --midnight:      #0e0e0e;   /* livello 0: la pagina */
  --carbon:        #191919;   /* livello 1: nav pill, card, footer */
  --graphite:      #414042;   /* livello 2: bordi e pannelli sollevati */
  --slate:         #6d6e71;   /* testo di servizio sui pannelli chiari */
  --smoke:         #2c2c2c;   /* separatori */
  --paper:         #eef2fe;   /* livello 3: pannelli prodotto, bianco ghiaccio */

  /* --- Testo ----------------------------------------------- */
  --text:          #ffffff;
  --text-2:        #d1d3d4;   /* ash */
  --text-3:        #a7a9ac;   /* fog */
  --text-4:        #6d6e71;   /* slate */

  /* --- Bordi ----------------------------------------------- */
  --hairline:      rgba(255, 255, 255, .08);
  --hairline-2:    rgba(255, 255, 255, .16);

  /* --- Elevazione: glow, mai ombre -------------------------- */
  --glow-signal:   0 0 40px rgba(64, 91, 255, .25);
  --glow-signal-lg: 0 0 80px rgba(112, 132, 255, .28);
  --shadow-pill:   0 4px 20px rgba(0, 0, 0, .45);

  /* --- Raggi ------------------------------------------------ */
  --r-input:  10px;
  --r-panel:  20px;
  --r-card:   30px;
  --r-btn:    30px;
  --r-nav:    60px;

  /* --- Spaziature ------------------------------------------- */
  --gutter:    clamp(20px, 5vw, 40px);
  --section-y: clamp(80px, 10vw, 120px);
  --maxw:      1200px;

  /* --- Motion ----------------------------------------------- */
  --ease-out:    cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur-fast: 180ms;
  --dur:      320ms;
  --dur-slow: 640ms;

  /* --- 3D --------------------------------------------------- */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 120px;
  overflow-x: clip;
  color-scheme: dark;
}

body {
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--text);
  background: var(--midnight);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, picture, video { display: block; max-width: 100%; height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }

button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: 6px;
}

::selection { background: var(--voltage); color: #fff; }

/* ============================================================
   Tipografia — peso 500 sui display, interlinea stretta
   ============================================================ */

.h-display {
  font-weight: 700;
  font-size: clamp(2.3rem, 6vw, 4rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

.h1 {
  font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.9rem);
  line-height: 1.12;
  letter-spacing: -.025em;
}

/* Titolo lungo che deve restare su una riga sola dai tablet in su */
.h1--xl {
  font-size: clamp(1.5rem, 4.4vw, 3.6rem);
  letter-spacing: -.03em;
}

@media (min-width: 900px) {
  .h1--xl { white-space: nowrap; }
}

.h2 {
  font-weight: 700;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.02em;
}

.h3 {
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.lead {
  font-size: clamp(1rem, 1.6vw, 1.125rem);
  line-height: 1.6;
  font-weight: 400;
  color: var(--text-2);
}

.eyebrow {
  display: inline-block;
  font-family: 'Montserrat', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}

.mono {
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-4);
}

/* L'accento colora la seconda metà del messaggio: il "perché conta" */
.signal-text { color: var(--signal); }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -60px;
  left: 16px;
  z-index: 999;
  padding: 12px 22px;
  background: var(--voltage);
  color: #fff;
  border-radius: var(--r-btn);
  font-weight: 500;
  transition: top var(--dur) var(--ease-out);
}

.skip-link:focus { top: 16px; }