/* =============================================================================
   SPE Consulting — Main stylesheet
   Rebuilt from Figma (node 29:218). Dark, editorial, tech.
   Fonts: Inter (UI/body) + Fraunces (serif display) — swap freely.
   ============================================================================= */

/* ------------------------------------------------------------- fonts ----- */
/* Self-hosted, estratti dal design system del cliente
   (docs/sviluppo-sito/design-system.html). Niente Google Fonts. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  src: url('/assets/fonts/inter.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'PF Display';
  font-style: normal;
  font-weight: 400 700;
  src: url('/assets/fonts/pf-display.woff2') format('woff2');
  font-display: swap;
}
@font-face {
  font-family: 'PF Display';
  font-style: italic;
  font-weight: 500;
  src: url('/assets/fonts/pf-display-italic.woff2') format('woff2');
  font-display: swap;
}

/* ------------------------------------------------------------- tokens ----- */
:root {
  /* palette */
  --bg:            #020911;
  --bg-2:          #010810;
  --surface:       rgba(2, 9, 17, 0.35);
  --surface-grad-a: rgba(3, 6, 10, 0.35);
  --surface-grad-b: rgba(2, 13, 25, 0.55);
  --border:        #041426;
  --border-strong: #061e3a;
  --border-hair:   rgba(255, 255, 255, 0.10);

  --accent:        #88b457;
  --accent-soft:   rgba(136, 180, 87, 0.16);

  --text:          #ffffff;
  --text-muted:    #a1a1aa;
  --text-dim:      #71717a;
  --text-dimmer:   #86868b;
  --on-light:      #010810;

  --cta:           #e5e5e5;

  /* type */
  --font-ui:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "PF Display", Georgia, "Times New Roman", serif;

  /* gradiente di brand (badge, pill, icone) — dal design system */
  --grad-brand: linear-gradient(78deg, #162758 9%, #86b3f7 44%, #8de837 100%);
  --grad-card:  linear-gradient(90deg, #162758 0%, #86b3f7 49%, #8de837 100%);
  /* pill dei titoli di sezione: tutto verde, il navy di --grad-brand era illeggibile */
  --grad-tag:   linear-gradient(90deg, #5c9a3c 0%, #88b457 45%, #c6f07a 100%);
  --navy-700:   #162044;
  --navy-800:   #0d1424;
  --blue-deep:  #162758;

  /* fluid type anchored to the 1661px Figma canvas: size/1661*100 = vw factor */
  --fs-eyebrow:  clamp(0.8rem, 1.68vw, 27.86px);
  /* specimen del design system: Hero 90 · Hero alt 79 · Sezione 72 */
  --fs-section:  clamp(2rem, 4.33vw, 72px);     /* titoli di sezione */
  --fs-display:  clamp(2.1rem, 4.76vw, 79px);   /* "Non alleniamo esecutori." */
  --fs-hero:     clamp(2.3rem, 5.42vw, 90px);   /* "FORMIAMO INTERPRETI" */
  --fs-lead:     clamp(1rem, 1.2vw, 20px);
  --fs-hero-desc: clamp(0.95rem, 1.02vw, 17px);  /* descrizione hero (Figma 17) */
  --fs-card-t:   clamp(1.15rem, 1.45vw, 24px);
  --fs-card-b:   clamp(0.95rem, 1.08vw, 18px);

  /* larghezze prese dai frame Figma (canvas 1661): la colonna degli header
     e' costante a 990, i corpi cambiano da sezione a sezione */
  --col-head:  990px;
  --col-hero:  1545px;   /* margini 58 per lato */

  /* griglia globale (doc "Prompt di correzione SPE"): 12 colonne fluide,
     margini esterni 160 e gutter 32. Sotto i 1920 i margini scalano con la
     viewport per non mangiarsi il contenuto sui portatili. */
  /* verde neon delle correzioni: linee di accento, timeline, chip attive */
  --neon: #00FF88;

  --grid-margin: clamp(1.25rem, 9.63vw, 160px);
  --gutter:      32px;
  --cols:        12;

  /* spacing / shape */
  --wrap:      1445px;
  --radius-lg: 34px;
  --radius-md: 24px;
  --radius-sm: 16px;
  --pill:      999px;

  /* Figma: la testata di ogni sezione sta a 65px dal bordo superiore */
  --section-y: clamp(3rem, 3.9vw, 65px);
}

/* Sotto i 900 i margini di griglia della Figma (9.63vw = 37px a 390) si
   mangiavano un quinto della larghezza: le card restavano strette e i testi
   andavano a capo ogni 3 parole. Il desktop (>=1200) non e' toccato. */
@media (max-width: 900px) {
  :root {
    --grid-margin: clamp(1rem, 3.4vw, 32px);
    --gutter: 16px;
  }
}

/* ------------------------------------------------------------- reset ------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
ul { list-style: none; padding: 0; }

/* ------------------------------------------------------- global backdrop -- */
/* subtle deep-space gradient + vignette behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  background:
    radial-gradient(120% 80% at 50% -10%, #05121f 0%, transparent 55%),
    radial-gradient(90% 60% at 90% 20%, rgba(136,180,87,0.06) 0%, transparent 60%),
    radial-gradient(90% 70% at 10% 80%, rgba(30,60,110,0.10) 0%, transparent 60%),
    var(--bg);
}

/* ---------------------------------------------------- circuit backdrop ---- */
/* Reticolo celestino da 200px con i nodi agli incroci, piu' scie e impulsi
   verdi alla deriva (assets/js/circuits.js). NON va rimosso: il doc di
   correzione chiedeva di toglierlo, il cliente ha poi confermato di volerlo. */
.circuit-bg {
  position: fixed;
  inset: -12%;                 /* overscan so scroll drift/zoom never bares an edge */
  z-index: -2;
  pointer-events: none;
  overflow: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
  background-image:
    linear-gradient(rgba(122,183,224,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(122,183,224,0.07) 1px, transparent 1px),
    radial-gradient(circle, rgba(122,183,224,0.13) 1.5px, transparent 2.5px);
  background-size: 200px 200px, 200px 200px, 200px 200px;
  background-position: 0 0, 0 0, 100px 100px; /* dots land on line crossings */
  -webkit-mask-image: radial-gradient(130% 130% at 50% 40%, #000 55%, transparent 100%);
          mask-image: radial-gradient(130% 130% at 50% 40%, #000 55%, transparent 100%);
}
.circuit-glow {
  position: absolute;
  top: 0; left: 0;
  width: var(--w, 240px);
  height: var(--h, 64px);
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
      rgba(163,224,96,0.55) 0%,
      rgba(136,180,87,0.30) 42%,
      rgba(136,180,87,0) 72%);
  filter: blur(13px);
  mix-blend-mode: screen;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .circuit-glow { opacity: 0.35 !important; }
}
/* synaptic impulses that race along the grid lines */
.circuit-pulse {
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: var(--len, 140px);
  border-radius: 2px;
  transform-origin: 100% 50%;   /* head at the right end */
  background: linear-gradient(90deg,
      rgba(163,224,96,0) 0%,
      rgba(163,224,96,0) 55%,
      rgba(163,224,96,0.45) 82%,
      rgba(214,255,150,1) 100%);
  filter: drop-shadow(0 0 6px rgba(163,224,96,0.85));
  will-change: transform, opacity;
}
.circuit-pulse::after {
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  width: 5px; height: 5px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #eafcc8;
  box-shadow: 0 0 9px 2px rgba(163,224,96,0.9);
}
@media (prefers-reduced-motion: reduce) {
  .circuit-pulse { display: none; }
}
/* faint noise / scanline sheen */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  opacity: 0.4;
}

/* scroll progress bar */
.scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  background: linear-gradient(90deg, var(--accent), #cfe6a6);
  z-index: 100;
}

/* ------------------------------------------------------------- layout ----- */
.wrap {
  width: 100%;
  max-width: 1920px;
  margin-inline: auto;
  padding-inline: var(--grid-margin);
}
/* utility: le 12 colonne vere, per i blocchi che devono agganciarsi alla griglia */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--gutter);
}
.section { position: relative; padding-block: var(--section-y); }

/* Testata di sezione: filo verde neon + velo tecnico (doc di correzione).
   La classe sta sulle sezioni Sport di situazione, Mantra, Comunicazione e
   SPE Lab; l'immagine e' l'asset bg-glow-ambient del pacchetto.            */
.section--accent { overflow-x: clip; }
.section--accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, var(--neon) 30%, var(--neon) 70%, transparent 100%);
  box-shadow: 0 0 18px var(--neon), 0 0 2px var(--neon);
}
.tech-grid {
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  /* box di riferimento del velo ambient: 832x330 centrato (Figma) */
  width: min(100%, 832px);
  height: 330px;
  z-index: 1;
  pointer-events: none;
}
/* velo ambient del Figma (bg-glow-ambient 832x330): sta sull'::after perche' la
   sua maschera non deve tagliare il bagliore a semisfera dell'::before */
.tech-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/assets/img/spe/00-global/bg-glow-ambient.webp") top center / 100% 100% no-repeat;
  opacity: 0.75;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
/* bagliore verde a semisfera ancorato alla riga neon in testa alla sezione
   (sostituisce il reticolo di quadrati, tolto il 15/09/2026 su richiesta
   cliente): largo quanto la viewport, sotto il contenuto, senza maschera. */
.tech-grid::before {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 420px;
  pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 0%,
              rgba(136, 180, 87, 0.28), rgba(136, 180, 87, 0.08) 45%, transparent 70%);
}
.section--accent > .wrap { position: relative; z-index: 2; }
.center { text-align: center; }

.eyebrow {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
}
.title {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.19;
  letter-spacing: -0.01em;
  font-size: var(--fs-section);
}
.lead {
  color: var(--text-muted);
  font-size: var(--fs-lead);
  line-height: 1.6;
  max-width: 52ch;
}
.center .lead { margin-inline: auto; }
.section__head { max-width: var(--col-head); }
.center .section__head { margin-inline: auto; }

/* ------------------------------------------------------------- nav -------- */
/* Barra flottante centrata: [logo SPE] [ burger + Menu + Contatti ]
   (rif. docs/sviluppo-sito/sezioni/menu.png) */
.nav {
  position: fixed;
  inset: 39px 0 auto 0;                 /* Figma: nav a y=39 */
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 0.75rem;
  pointer-events: none;
}
.nav > *, .nav__menu-wrap { pointer-events: auto; }

/* Smart navbar: sparisce appena si scrolla (in qualsiasi direzione) e
   ricompare quando lo scroll si ferma (classe gestita in nav.js). */
.nav { transition: transform 0.35s var(--ease-out, ease), opacity 0.35s ease; }
.nav.is-hidden { transform: translateY(-160%); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .nav.is-hidden { transform: none; opacity: 1; }
}

/* entrata della barra (classe aggiunta da spe.js); senza JS resta visibile.
   Parte 600ms dopo il via: prima resta invisibile grazie a "both" (fill
   backwards), che tiene lo stato "from" per tutto l'animation-delay. */
.js .nav.is-in > * { animation: nav-in 1s var(--ease-out, ease) both; animation-delay: 0.6s; }
.js .nav.is-in > *:nth-child(2) { animation-delay: 0.72s; }
.js .nav.is-in > *:nth-child(3) { animation-delay: 0.84s; }
@keyframes nav-in {
  from { opacity: 0; transform: translateY(-24px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .js .nav.is-in > * { animation: none; }
}

/* pastiglia logo (torna in cima) */
.nav__logo {
  width: 56px; height: 56px;
  border-radius: 28px;
  display: grid; place-items: center;
  background: var(--bg-2);
  box-shadow: inset 0 4px 4px rgba(0,0,0,0.25), 0 4px 2px rgba(0,0,0,0.25);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.nav__logo svg { width: 32px; height: 13px; color: #fff; }
.nav__logo:hover { transform: translateY(-2px); box-shadow: 0 0 30px rgba(136,180,87,0.28); }

/* gruppo pill: burger + Menu + CTA Contatti */
.nav__menu-wrap { position: relative; }
.nav__pill-group {
  display: flex; align-items: center; gap: 24px;
  padding: 8px;
  border-radius: var(--pill);
  background: var(--bg-2);
  box-shadow: inset 0 4px 4px rgba(0,0,0,0.25), 0 4px 2px rgba(0,0,0,0.25);
}
.nav__pill {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0 0 0 20px;
  height: 54px;
  border-radius: var(--pill);
  color: #fff;
  font-size: 18px; font-weight: 500;
  transition: opacity 0.25s ease;
}
.nav__pill:hover { opacity: 0.75; }
.nav__burger { width: 20px; height: 14px; color: #fff; transition: transform 0.35s ease; }
.nav__menu-wrap.is-open .nav__burger { transform: rotate(90deg); }
.nav__cta {
  display: inline-flex; align-items: center;
  height: 54px; padding: 0 28px;
  border-radius: var(--pill);
  background: var(--cta);
  color: var(--on-light);
  font-size: 18px; font-weight: 500;
  white-space: nowrap;
  transition: background-color 0.25s ease, transform 0.25s ease;
}
.nav__cta:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 0 28px rgba(0, 255, 136, 0.5), 0 0 0 1px rgba(0, 255, 136, 0.55); }

/* dropdown: entra "come una card che ruota" attorno al bordo alto.
   La prospettiva sta sul wrapper, cosi' la rotazione ha profondita' vera. */
.nav__menu-wrap { perspective: 1200px; }
.nav__popup {
  position: absolute;
  top: calc(100% + 0.9rem);
  left: 50%;
  transform: translateX(-50%) rotateX(-70deg) translateY(-12px) scale(0.96);
  transform-origin: top center;
  width: min(92vw, 520px);
  padding: 2rem 2.25rem;
  border-radius: 34px;
  background: linear-gradient(160deg, rgba(6,10,16,0.94), rgba(2,10,20,0.96));
  border: 1px solid var(--border-hair);
  backdrop-filter: blur(22px);
  box-shadow: 0 30px 70px rgba(0,0,0,0.6);
  opacity: 0; visibility: hidden; pointer-events: none;
  /* chiusura: 0.35s; la visibility scatta a fine corsa cosi' l'uscita si vede */
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2,0.8,0.2,1),
              visibility 0s linear 0.35s;
}
.nav__menu-wrap.is-open .nav__popup {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) rotateX(0deg) translateY(0) scale(1);
  transition: opacity 0.55s cubic-bezier(0.2,0.8,0.2,1),
              transform 0.55s cubic-bezier(0.2,0.8,0.2,1),
              visibility 0s linear 0s;
}

/* voci a cascata: salgono dal basso una dopo l'altra (stagger 50ms) */
.nav__group > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.2,0.8,0.2,1),
              color 0.25s ease, background-color 0.25s ease,
              box-shadow 0.25s ease, border-color 0.25s ease;
}
.nav__menu-wrap.is-open .nav__group > * { opacity: 1; transform: none; }
.nav__menu-wrap.is-open .nav__group > *:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s, 0s, 0s, 0s; }
.nav__menu-wrap.is-open .nav__group > *:nth-child(2) { transition-delay: 0.25s, 0.25s, 0s, 0s, 0s, 0s; }
.nav__menu-wrap.is-open .nav__group > *:nth-child(3) { transition-delay: 0.30s, 0.30s, 0s, 0s, 0s, 0s; }
.nav__menu-wrap.is-open .nav__group > *:nth-child(4) { transition-delay: 0.35s, 0.35s, 0s, 0s, 0s, 0s; }
.nav__menu-wrap.is-open .nav__group > *:nth-child(5) { transition-delay: 0.40s, 0.40s, 0s, 0s, 0s, 0s; }

@media (prefers-reduced-motion: reduce) {
  .nav__popup,
  .nav__menu-wrap.is-open .nav__popup { transition: opacity 0.15s linear, visibility 0s; }
  .nav__popup { transform: translateX(-50%); }
  .nav__menu-wrap.is-open .nav__popup { transform: translateX(-50%); }
  .nav__group > * { transform: none; transition: opacity 0.15s linear; }
  .nav__menu-wrap.is-open .nav__group > * { transition-delay: 0s; }
}

/* pill "Menu": da aperta prende un bordo verde tenue */
.nav__menu-wrap.is-open .nav__pill-group {
  box-shadow: inset 0 4px 4px rgba(0,0,0,0.25), 0 4px 2px rgba(0,0,0,0.25),
              0 0 0 1px rgba(0,255,136,0.35);
}
.nav__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem 1.5rem;
  align-items: start;
}
.nav__group { display: grid; gap: 0.15rem; justify-items: center; }
/* titolo di gruppo = anche link alla sezione madre */
.nav__head {
  font-size: 0.95rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: #fff;
  padding: 0.6rem 0.9rem;
  text-decoration: none;               /* nessuna voce sottolineata */
  border: 1px solid transparent;
  border-radius: var(--pill);
}
.nav__item {
  display: inline-flex; align-items: center;
  padding: 0.6rem 1.1rem;
  border-radius: var(--pill);
  border: 1px solid transparent;
  color: var(--text-muted);
  font-size: 1rem;
  white-space: nowrap;
}
/* sezione corrente (scrollspy o click): chip verde tenue, si vede subito
   dove si e' anche riaprendo il menu */
.nav__item.is-active,
.nav__head.is-active {
  background: rgba(0,255,136,0.18);
  color: var(--neon);
  border: 1px solid rgba(0,255,136,0.5);
  border-radius: var(--pill);
}
/* hover: chip piena, verde illuminato su testo scuro */
.nav__item:hover, .nav__item:focus-visible,
.nav__head:hover, .nav__head:focus-visible,
.nav__item.is-active:hover, .nav__head.is-active:hover {
  background: var(--neon);
  color: #031;
  border-color: transparent;
  border-radius: var(--pill);
  box-shadow: 0 0 22px rgba(0,255,136,0.45);
}
.nav__item.flash { box-shadow: 0 0 0 2px var(--accent), 0 0 28px rgba(136,180,87,0.6); }

@media (max-width: 620px) {
  .nav { inset: 0.9rem 0 auto 0; gap: 0.5rem; }
  .nav__label { display: none; }
  .nav__logo { width: 48px; height: 48px; border-radius: 24px; }
  .nav__pill-group { gap: 14px; padding: 6px; }
  .nav__pill { height: 40px; padding-left: 14px; }
  .nav__cta { height: 40px; padding: 0 1.1rem; font-size: 0.95rem; }
  .nav__popup { padding: 1.5rem 1.1rem; border-radius: 26px; }
  .nav__cols { gap: 0.3rem 0.5rem; }
  .nav__item { padding: 0.55rem 0.7rem; font-size: 0.92rem; }
  /* il popup era ancorato alla pill "Menu", che sta a destra del logo: a 390
     sbordava di 16px. Qui si aggancia alla barra, che e' larga quanto lo
     schermo, e la rotazione 3D lascia il posto a una semplice salita. */
  .nav__menu-wrap { position: static; perspective: none; }
  .nav__popup {
    top: calc(100% + 0.7rem);
    width: min(100vw - 1.5rem, 440px);
    transform: translateX(-50%) translateY(-10px);
  }
  .nav__menu-wrap.is-open .nav__popup { transform: translateX(-50%); }
}

/* =====================================================================
   ORBIT — reusable decorative rig (sphere + dashed ring + arcs + crosshair)
   ===================================================================== */
.orbit {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: min(90vw, var(--orbit-size, 620px));
  margin-inline: auto;
}
.orbit__layer { position: absolute; inset: 0; display: grid; place-items: center; }

/* Exact rig geometry from Figma node 29:257 (764px frame).
   viewBox 0 0 764 764. Fill none; light strokes on dark bg. */
.orbit__rig {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform-origin: 50% 50%;
}
/* concentric rig assembly (ref: Screenshot 09.00.17) — GSAP rotates the arcs
   via svgOrigin "382 382", so no CSS transform-origin here (it would fight it) */
.orbit__rig circle { fill: none; }
.rig-band  { stroke: rgba(10,22,40,0.6);   stroke-width: 16; }               /* dark band around ball */
.rig-trackA{ stroke: rgba(150,175,215,0.10); stroke-width: 7; }              /* main track (bg) */
.rig-trackB{ stroke: rgba(150,175,215,0.08); stroke-width: 4; }              /* inner track (bg) */
/* orbite verdi come negli step 1-3 di "headre dettagli": anello esterno
   tratteggiato + due archi pieni, tutti sul verde di brand */
.rig-arc   { stroke-linecap: round; filter: drop-shadow(0 0 7px rgba(136,180,87,0.45)); }
.rig-arcA  { stroke: rgba(136,180,87,0.60); stroke-width: 5; stroke-dasharray: 33 67; } /* moving portion */
.rig-arcB  { stroke: rgba(136,180,87,0.40); stroke-width: 3.5; stroke-dasharray: 20 80; }
.rig-dots  { stroke: rgba(136,180,87,0.45); stroke-width: 2.5; stroke-dasharray: 1.7 1.5; } /* anello tratteggiato */

.orbit__sphere {
  position: relative;
  width: 78.4%;                 /* 599 / 764 — exact Figma ratio */
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.65))
          drop-shadow(0 0 70px rgba(136,180,87,0.12));
}
.orbit__glow {
  position: absolute;
  width: 82%; height: 82%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 60%);
  filter: blur(10px);
}

/* orbiting info card (Study / Education) */
.orbit-card {
  position: absolute;
  width: min(80vw, 300px);
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(3,6,10,0.55), rgba(2,13,25,0.65));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(16px);
  z-index: 3;
}
.orbit-card h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.orbit-card p  { color: var(--text-dim); font-size: 0.98rem; line-height: 1.55; }
.orbit-card--tl { top: 4%;  left: -6%; }
.orbit-card--br { bottom: 4%; right: -6%; }

/* anti-FOUC: hide GSAP-driven elements until the timeline takes over */
.gsap-pending .sg,
.gsap-pending .saga__wordmark,
.gsap-pending .saga__core,
.gsap-pending .nav > * { visibility: hidden; }

/* ===================================================== SAGA (hero+metodo) == */
.saga { position: relative; min-height: 100vh; overflow: hidden; }
.saga__pin { position: absolute; inset: 0; }

/* ------------------------------------------------ background neurale 3D ---- */
/* Layer FISSO su tutta la viewport, valido per l'intero sito: sta sopra il
   reticolo (.circuit-bg, z-index -2) e sotto il contenuto, ed è completamente
   trasparente — nessun fondo proprio — così griglia celeste, glow verdi e rete
   neurale si fondono. La scena 3D scorre insieme al documento (neural-background.js).
   L'attenuazione a sinistra per headline/CTA è fatta nello shader (safeArea in
   config.js), non con un velo CSS che coprirebbe il reticolo.                */
.neural-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;                         /* sopra .circuit-bg (-2), sotto il contenuto */
  background: none;
}
.neural-bg__canvas {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.neural-bg.is-ready .neural-bg__canvas { opacity: 1; }
/* niente WebGL (o errore a runtime): resta il solo gradiente, la UI non si rompe */
.neural-bg.is-fallback .neural-bg__canvas { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .neural-bg__canvas { transition: none; }
}

/* centred layers for the shared rig + ball */
.saga__core {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  pointer-events: none;
}
.saga__core:nth-of-type(1) { z-index: 1; }   /* rig + glow */
.saga__core:nth-of-type(2) { z-index: 2; }   /* ball */
.saga__rig {
  position: relative;
  width: min(46vw, 760px);              /* orbite: piu' grandi del Figma (644) su richiesta del cliente */
  aspect-ratio: 1;
}
.saga__glow {
  position: absolute;
  width: min(35.5vw, 590px); aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.10), transparent 60%);
  filter: blur(12px);
}
.saga__ball {
  width: min(35.5vw, 590px);            /* pallone piu' grande del Figma (498) su richiesta del cliente */
  height: min(35.5vw, 590px);
  transform-origin: 50% 50%;
  background: transparent;
  pointer-events: none;                 /* never intercept scroll/hover */
  --poster-color: transparent;
  --progress-bar-color: transparent;
  filter: drop-shadow(0 40px 90px rgba(0,0,0,0.65))
          drop-shadow(0 0 70px rgba(136,180,87,0.14));
}
.saga__ball::part(default-progress-bar) { display: none; }

/* ---- Step 1 · wordmark "method / SPE" -------------------------------------
   Il PNG porta gia' dentro le opacita' giuste ("method" al 20%, "SPE" pieno):
   niente filtri, altrimenti si sballa il rapporto fra i due livelli.        */
.saga__wordmark {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  z-index: 3;
  pointer-events: none;
}
.saga__wordmark img {
  /* 92vw: sopra questo valore "method" veniva tagliato alle due estremita'
     su ogni schermo sotto i ~1600px */
  width: min(92vw, 1660px);
  height: auto;
  transform: translateY(-2vh);
}

/* ---- Step 4 · ombra inferiore in cui affonda il pallone ------------------- */
.saga__shadow {
  position: absolute; inset: auto 0 0 0;
  height: 46vh;
  z-index: 2;                       /* sopra il pallone, sotto i testi */
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(120% 100% at 50% 118%, rgba(136, 180, 87, 0.10), transparent 62%),
    linear-gradient(180deg, transparent, rgba(3, 6, 10, 0.85) 55%, var(--bg) 100%);
}

/* ---- Step 5 · vignettatura radiale prima dell'unpin ----------------------- */
.saga__vignette {
  position: absolute; inset: 0;
  z-index: 5;                       /* copre tutta la scena */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(ellipse 76% 68% at 50% 50%,
              rgba(3, 6, 10, 0.62) 0%, rgba(3, 6, 10, 0.93) 52%, var(--bg) 84%);
}

/* text / box layer */
.saga__stage {
  position: absolute; top: 0; bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: min(100% - 7.25rem, var(--col-hero));   /* 58px per lato (Figma) */
  z-index: 3;
  pointer-events: none;
}
.saga__stage .sg { position: absolute; margin: 0; }

.saga__subtitle {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-display); line-height: 1.19; letter-spacing: -0.015em;
  top: clamp(6rem, 21.6vh, 11rem); left: 0; max-width: 13ch;   /* Figma y=173/800 */
}
.saga__desc {
  color: var(--text-muted); font-size: var(--fs-hero-desc); line-height: 1.6;
  max-width: 403px; bottom: clamp(4rem, 9.75vh, 8rem); left: 0;   /* Figma 403 wide, bottom 78 */
}
.saga__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--fs-hero); line-height: 1.11; letter-spacing: 0.01em;
  text-transform: uppercase; text-align: right;
  bottom: clamp(4rem, 9.75vh, 8rem); right: 0;
}
.saga__mhead {
  /* sotto la nav fissa (39 + 70px): la pill "Il metodo" non deve toccarla */
  position: absolute; top: clamp(7.75rem, 15.6vh, 9rem);
  left: 50%; transform: translateX(-50%);
  width: min(92%, 900px); text-align: center;
}
.saga__eyebrow { margin-bottom: 1rem; }
.saga__mhead .sg { position: static; }

.saga__box {
  width: min(82vw, 300px);
  padding: 1.6rem 1.75rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, rgba(3,6,10,0.6), rgba(2,13,25,0.7));
  border: 1px solid var(--border-strong);
  backdrop-filter: blur(16px);
  pointer-events: auto;
}
.saga__box h3 { font-size: 1.35rem; margin-bottom: 0.5rem; }
.saga__box p  { color: var(--text-dim); font-size: 0.98rem; line-height: 1.55; }


/* ---- static fallback (mobile / reduced-motion): no pin, normal flow ---- */
.saga.is-static { min-height: auto; overflow: visible; }
/* Senza pin la scena diventa una colonna: wordmark, pallone con le orbite,
   testi. I due .saga__core vanno sovrapposti a mano (sono fratelli). */
.saga.is-static .saga__pin {
  position: static;
  display: flex; flex-direction: column; align-items: center;
}
.saga.is-static .saga__core {
  order: 2;
  position: relative; inset: auto;
  width: 100%; height: min(70vw, 420px);
}
.saga.is-static .saga__core:nth-of-type(2) { margin-top: calc(-1 * min(70vw, 420px)); }
/* rig e pallone rientrano nella banda: senza questo sconfinano sui testi */
.saga.is-static .saga__rig  { width: min(62vw, 400px); }
.saga.is-static .saga__glow { width: min(46vw, 300px); }
.saga.is-static .saga__ball { width: min(48vw, 310px); height: min(48vw, 310px); }
.saga.is-static .saga__wordmark + .saga__core { margin-top: 1.5rem; }
.saga.is-static .saga__stage { order: 3; }
.saga.is-static .saga__stage {
  position: static; transform: none; width: min(100% - 2.5rem, var(--wrap));
  margin: 0 auto; padding-block: 7rem 4rem;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2rem;
}
.saga.is-static .saga__stage .sg { position: static; visibility: visible; }
.saga.is-static .saga__subtitle,
.saga.is-static .saga__desc,
.saga.is-static .saga__title { max-width: min(24ch, 100%); text-align: center; }
.saga.is-static .saga__mhead { position: static; transform: none; width: 100%; margin-top: 3rem; }
.saga.is-static .saga__boxes { position: static; display: grid; gap: 1.25rem; width: 100%; }
.saga.is-static .saga__box { position: static; }
.saga.is-static .saga__wordmark { order: 1; position: static; padding-top: 5rem; }
.saga.is-static .saga__wordmark img { width: min(92%, 900px); transform: none; }
.saga.is-static .saga__shadow,
.saga.is-static .saga__vignette { display: none; }

/* mobile: la colonna statica aveva 7rem di aria sopra i testi e 2.5rem di
   margine laterale in piu' rispetto al resto della pagina */
@media (max-width: 600px) {
  .saga.is-static .saga__stage {
    width: min(100% - 2 * var(--grid-margin), var(--wrap));
    padding-block: 3.5rem 2.5rem;
    gap: 1.5rem;
  }
  .saga.is-static .saga__wordmark { padding-top: 4.5rem; }
  .saga.is-static .saga__mhead { margin-top: 2rem; }
}

/* split dei titoli hero (vedi splitChars in spe.js): i caratteri servono
   inline-block, altrimenti translateY non ha effetto; sono raccolti in .w
   (una parola) perché il testo non vada a capo in mezzo a una parola. */
.saga__subtitle .w,
.saga__title .w { display: inline-block; white-space: nowrap; }
.saga__subtitle .ch,
.saga__title .ch { display: inline-block; will-change: transform, opacity; }

/* ======================================================= FOOTER =========== */
/* una sola riga di copyright, alta 76px: l'alone di chiusura (.media-bg in
   #media) sporge di altrettanto sotto la sezione e passa dietro al testo */
.footer {
  position: relative;
  z-index: 1;
  padding: 24px 0 32px;
  text-align: center;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 20px;
}
/* credito "powered by": spento come il resto, si accende al passaggio */
.footer a { color: var(--text-dim); transition: color 0.3s ease; }
.footer a:hover,
.footer a:focus-visible { color: var(--neon); }
@media (prefers-reduced-motion: reduce) { .footer a { transition: none; } }

/* ====================================================== PRELOADER ========== */
/* Copre la pagina finché il pallone 3D non è pronto (vedi assets/js/preloader.js).
   Lo scroll resta bloccato: la sezione #saga è pinned e scrub-ata, scrollare
   dentro un modello non ancora caricato mostrerebbe una scena vuota.          */
html.is-loading,
html.is-loading body { overflow: hidden; height: 100%; }

.preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.75rem;
  background: var(--bg);
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
html.is-loaded .preloader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader__mark {
  width: 46px;
  height: 46px;
  color: var(--accent);
  animation: preloader-pulse 2.4s ease-in-out infinite;
}
.preloader__mark svg { width: 100%; height: 100%; display: block; }

.preloader__bar {
  width: min(240px, 52vw);
  height: 2px;
  background: var(--border-strong);
  overflow: hidden;
}
.preloader__bar span {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.preloader__pct {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}

@keyframes preloader-pulse {
  0%, 100% { opacity: 1;    transform: scale(1); }
  50%      { opacity: 0.45; transform: scale(0.92); }
}

@media (prefers-reduced-motion: reduce) {
  .preloader { transition: none; }
  .preloader__mark { animation: none; }
}

/* Il canvas three.js riempie il box del pallone (vedi .saga__ball). */
.saga__ball-canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}