/* =====================================================
   AureAI — Foglio di stile
   Palette: blu profondo + bianco
   ===================================================== */

/* ---------------------------------------------------------------
   PALETTE ALTERNATIVE
   Per cambiare tinta: incolla uno dei due blocchi qui sotto al posto
   delle nove righe --blue-* dentro :root. Non serve toccare altro,
   tutto il sito legge da queste variabili.

   B — PETROLIO (blu-verde profondo, il più lontano dall'estetica AI)
   --blue-950:#04161a; --blue-900:#082429; --blue-800:#0d3b45;
   --blue-700:#12525f; --blue-600:#166b7a; --blue-500:#1c8496;
   --blue-400:#4fa9b8; --blue-200:#a8d4dc; --blue-100:#d9edf1;

   C — NOTTE (quasi nero con accento acciaio, tono istituzionale)
   --blue-950:#070a0f; --blue-900:#0d131c; --blue-800:#18222f;
   --blue-700:#243449; --blue-600:#2c4a6e; --blue-500:#3a6191;
   --blue-400:#6b8db8; --blue-200:#bccbdc; --blue-100:#e0e6ee;
   --------------------------------------------------------------- */

:root{
  /* A — OLTREMARE (in uso) */
  --blue-950:#050b18;
  --blue-900:#0a1428;
  --blue-800:#111f3d;
  --blue-700:#1a2d63;
  --blue-600:#233a8c;
  --blue-500:#2f49ab;
  --blue-400:#5c78d0;
  --blue-200:#b0c4ea;
  --blue-100:#dce4f6;

  /* Neutri */
  --white:#ffffff;
  --ice:#f3f4fa;
  --ink:#0b1220;
  --ink-soft:#475069;
  --line:#e4e6f0;

  /* Tipografia */
  /* Bricolage Grotesque: grottesca con carattere, lontana dal set
     Inter / Sora / Space Grotesk che usano tutti i siti "AI". */
  --font-display:'Bricolage Grotesque', 'Instrument Sans', system-ui, sans-serif;
  --font-body:'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Layout */
  --shell:1240px;
  --gutter:clamp(20px, 5vw, 64px);
  --radius:20px;
  --radius-lg:28px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:76px;
}

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

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.06;
  letter-spacing:-.018em;
  margin:0;
}

p{margin:0;}

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

/* ---------- Utility ---------- */
.shell{
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:var(--gutter);
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--blue-600);color:#fff;padding:12px 20px;border-radius:0 0 12px 0;
  font-weight:600;text-decoration:none;
}
.skip-link:focus{left:0;}

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

/* ---------- Barra di avanzamento ---------- */
.scroll-progress{
  position:fixed;inset:0 0 auto 0;height:3px;z-index:120;
  background:transparent;pointer-events:none;
}
.scroll-progress span{
  display:block;height:100%;width:0%;
  background:linear-gradient(90deg,var(--blue-500),var(--blue-200));
  transition:width .1s linear;
}

/* ---------- Bottoni ---------- */
.btn{
  --btn-bg:var(--blue-600);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:16px 30px;
  border:0;border-radius:999px;
  font-family:var(--font-body);
  font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s ease, color .25s ease;
  white-space:nowrap;
}
/* Ombra neutra e stretta invece dell'alone colorato:
   l'alone acceso sotto i bottoni è l'altra firma tipica. */
.btn-primary{
  background:var(--btn-bg);color:#fff;
  box-shadow:0 6px 18px -10px rgba(5,11,24,.6);
}
.btn-primary:hover{
  background:var(--blue-500);
  transform:translateY(-2px);
  box-shadow:0 12px 26px -12px rgba(5,11,24,.7);
}
.btn-ghost{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
.btn-ghost:hover{background:rgba(255,255,255,.12);transform:translateY(-2px);}
.btn-sm{padding:12px 22px;font-size:15px;}
.btn-block{width:100%;}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:110;
  transition:background .45s var(--ease), backdrop-filter .45s var(--ease), box-shadow .45s var(--ease);
}
.header-inner{
  height:var(--header-h);
  display:flex;align-items:center;gap:32px;
}

.brand{
  display:inline-flex;align-items:center;gap:12px;
  text-decoration:none;font-family:var(--font-display);
  font-weight:700;font-size:20px;letter-spacing:-.02em;
  margin-right:auto;
}
/* Il marchio prende il colore dal contenitore: bianco sulla testata scura,
   navy quando la testata diventa chiara. Un solo file, due contesti. */
.brand{color:#fff;}
.brand-mark{
  width:38px;height:24px;flex:none;
  fill:currentColor;
  transition:color .4s var(--ease);
}
.brand-name{
  color:currentColor;
  transition:color .4s var(--ease);
}

.nav{display:flex;gap:34px;}
.nav a{
  position:relative;
  color:rgba(255,255,255,.82);
  text-decoration:none;font-size:15.5px;font-weight:500;
  transition:color .3s ease;
}
.nav a::after{
  content:'';position:absolute;left:0;right:0;bottom:-7px;height:2px;
  background:var(--blue-400);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav a:hover{color:#fff;}
.nav a:hover::after{transform:scaleX(1);transform-origin:left;}

/* Header in stato "scrollato" (fondo chiaro) */
.site-header.solid{
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  box-shadow:0 1px 0 var(--line), 0 12px 30px -24px rgba(11,18,32,.5);
}
.site-header.solid .brand{color:var(--blue-900);}
.site-header.solid .nav a{color:var(--ink-soft);}
.site-header.solid .nav a:hover{color:var(--ink);}
.site-header.solid .burger span{background:var(--ink);}

/* Nascondi l'header quando si scorre verso il basso */
.site-header.hidden{transform:translateY(-100%);}
.site-header{transform:translateY(0);transition:transform .5s var(--ease), background .45s var(--ease), box-shadow .45s var(--ease);}

.burger{
  display:none;
  width:44px;height:44px;
  background:transparent;border:0;cursor:pointer;
  padding:0;position:relative;
}
.burger span{
  position:absolute;left:11px;width:22px;height:2px;border-radius:2px;
  background:#fff;transition:transform .35s var(--ease), opacity .25s ease, background .4s var(--ease);
}
.burger span:nth-child(1){top:19px;}
.burger span:nth-child(2){top:26px;}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg);}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg);}

.mobile-nav{
  display:none;flex-direction:column;gap:6px;
  padding:16px var(--gutter) 28px;
  background:rgba(255,255,255,.97);
  backdrop-filter:blur(18px);
  border-top:1px solid var(--line);
}
.mobile-nav a{
  color:var(--ink);text-decoration:none;font-weight:600;font-size:18px;
  padding:12px 0;border-bottom:1px solid var(--line);
}
.mobile-nav .btn{margin-top:16px;border-bottom:0;color:#fff;justify-content:center;}

/* =====================================================
   HERO — canvas pilotato dallo scroll
   ===================================================== */
.hero{
  --hero-zoom:1;
  position:relative;
  height:620vh;              /* corsa dello scroll: sette epoche hanno bisogno di spazio */
  background:var(--blue-950);
}
.hero-sticky{
  position:sticky;top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  display:flex;align-items:center;
}
/* Scena vettoriale: campo di punti blu pilotato dallo scroll */
.hero-canvas{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:none;
}

/* L'interruttore: data-hero su .hero decide quale apertura si vede */
.hero[data-hero="canvas"] .hero-canvas,
.hero[data-hero="linee"]  .hero-canvas{display:block;}
.hero[data-hero="canvas"] .hero-photos,
.hero[data-hero="linee"]  .hero-photos{display:none;}
.hero[data-hero="foto"]   .hero-canvas{display:none;}

/* sulla scena vettoriale il velo torna piu' marcato: il fondo e' gia' scuro
   e il testo bianco deve staccare comunque */
.hero[data-hero="canvas"] .hero-veil{
  background:
    radial-gradient(80% 66% at 50% 50%, rgba(5,11,24,.20) 0%, rgba(5,11,24,.78) 100%),
    linear-gradient(180deg, rgba(5,11,24,.62) 0%, rgba(5,11,24,0) 34%, rgba(5,11,24,.82) 100%);
}

/* Pila di fotografie: si alternano seguendo lo scroll.
   Il fondo pieno vale come prolungamento dell'immagine: e' lo stesso blu
   degli angoli dei file, cosi' quando l'immagine viene contenuta invece
   che ritagliata le bande laterali non si vedono. */
.hero-photos{position:absolute;inset:0;overflow:hidden;background:#061225;}

/* Quando la finestra si allontana troppo dal 16:9 — telefono in verticale,
   oppure monitor larghi e bassi — il ritaglio taglierebbe l'oggetto.
   In quei casi lo mostro intero invece di sacrificarlo. */
/* Sul telefono l'immagine contenuta si riduce a una banda: la ingrandisco
   molto di piu'. Attorno all'oggetto c'e' vuoto in abbondanza, quindi lo
   zoom mangia il fondo e non il soggetto. */
@media (max-aspect-ratio: 4/3){
  .hero{--hero-zoom:1.85;}
}
/* Solo un velo di blu per legare le foto al resto del sito.
   NON una virata piena: la sequenza della scrivania si gioca sul passaggio
   dello schermo da righe rosse a righe verdi, e una virata di tinta
   cancellerebbe proprio quella differenza. */
.hero-photos::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(155deg, #2f49ab 0%, #1c3272 62%, #111f3d 100%);
  mix-blend-mode:multiply;
  opacity:.16;
  pointer-events:none;
}
.hero-photo{
  position:absolute;inset:0;
  width:100%;height:100%;
  /* CONTAIN, non cover: l'oggetto e' uno solo e non deve mai essere tagliato,
     ne' sopra e sotto sui monitor larghi ne' ai lati sul telefono. La scala
     la recupera --hero-zoom, che ritaglia il margine vuoto e non il soggetto. */
  object-fit:contain;
  object-position:50% 50%;
  /* i bordi dell'immagine sfumano nel fondo pieno: senza questo si vede la
     cucitura verticale dove finisce la foto e comincia il colore di sfondo */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  opacity:0;
  transform:scale(1.12);
  filter:saturate(.95) contrast(1.03);
  will-change:opacity, transform;
}
/* la prima è visibile anche prima che parta il JS */
.hero-photo[data-shot="0"]{opacity:1;transform:scale(1.05);}

/* Modo "sequenza di frame": il canvas prende il posto delle foto */
.hero-frames{
  position:absolute;inset:0;
  width:100%;height:100%;
  display:none;
}
.hero-sticky.frames .hero-frames{display:block;}
.hero-sticky.frames .hero-photo{display:none;}
/* i frame nascono già blu: la virata serve molto meno */
.hero-sticky.frames .hero-photos::after{opacity:.26;}
.hero-sticky.frames .hero-tint{opacity:.45;}

/* Marcatore d'epoca: piccolo, in basso a sinistra, non litiga col titolo centrato */
/* il marcatore d'epoca ha senso solo con la sequenza fotografica */
.hero:not([data-hero="foto"]) .hero-era{display:none;}

.hero-era{
  position:absolute;
  left:var(--gutter);
  bottom:44px;
  display:flex;align-items:center;gap:14px;
  z-index:3;
  pointer-events:none;
}
.hero-era-line{
  display:block;
  width:52px;height:1px;
  background:rgba(255,255,255,.4);
}
.hero-era-label{
  font-family:var(--font-display);
  font-size:14px;font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.86);
  text-shadow:0 1px 16px rgba(5,11,24,.8);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.hero-era-label.cambio{opacity:0;transform:translateY(6px);}

@media (max-width:620px){
  .hero-era{bottom:34px;gap:10px;}
  .hero-era-line{width:28px;}
  .hero-era-label{font-size:12px;letter-spacing:.16em;}
}

.hero[data-hero="linee"] .hero-veil{
  background:
    radial-gradient(46% 34% at 50% 50%, rgba(5,11,24,.44) 0%, rgba(5,11,24,0) 100%),
    linear-gradient(180deg, rgba(5,11,24,.5) 0%, rgba(5,11,24,0) 30%, rgba(5,11,24,.55) 100%);
}

/* Barra di caricamento dei frame */
.hero-loader{
  position:absolute;left:50%;bottom:94px;
  transform:translateX(-50%);
  width:170px;height:2px;
  border-radius:2px;
  background:rgba(255,255,255,.16);
  overflow:hidden;
  opacity:0;
  transition:opacity .45s var(--ease);
  z-index:3;
}
.hero-loader.on{opacity:1;}
.hero-loader span{
  display:block;height:100%;width:0%;
  background:var(--blue-200);
  transition:width .25s linear;
}

/* Vira le foto sul blu del marchio, mantenendo le luci originali */
/* Disattivata su questo hero: sostituirebbe la tinta di TUTTI i colori,
   rosso e verde compresi. Resta pronta se un domani si torna a foto
   d'atmosfera al posto della sequenza della scrivania. */
.hero-tint{display:none;}

/* Scurisce quanto basta perché il testo bianco sia sempre leggibile */
/* Scurisce solo dove serve: una fascia in alto per la testata, una in basso,
   e una pozza morbida dietro al testo centrato. Il resto della fotografia
   resta leggibile — altrimenti il disordine non si vede e lo stato finale
   luminoso non ha piu' nessun effetto. */
/* Il titolo bianco passa SOPRA l'oggetto, non su un piano vuoto: serve una
   pozza scura piu' decisa al centro, che pero' lasci respirare i bordi
   dove l'oggetto emerge dal fondo. */
.hero-veil{
  position:absolute;inset:0;
  background:
    radial-gradient(46% 38% at 50% 52%, rgba(5,11,24,.62) 0%, rgba(5,11,24,0) 100%),
    linear-gradient(180deg,
      rgba(5,11,24,.55) 0%,
      rgba(5,11,24,.10) 24%,
      rgba(5,11,24,.16) 60%,
      rgba(5,11,24,.62) 100%);
  pointer-events:none;
}

.hero-stage{
  position:relative;
  width:100%;
  z-index:2;
}
.hero-room{
  position:absolute;
  left:var(--gutter);right:var(--gutter);
  top:50%;
  transform:translateY(-50%);
  max-width:960px;
  margin-inline:auto;
  text-align:center;
  opacity:0;
  pointer-events:none;
  will-change:opacity, transform, filter;
}
.hero-room .hero-lede{margin-inline:auto;}
.hero-room .hero-actions{justify-content:center;}
.hero-room[data-active="true"]{pointer-events:auto;}
/* La prima stanza è statica finché il JS non prende il controllo */
.hero-room[data-room="0"]{opacity:1;}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--blue-200);
  margin-bottom:26px;
}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--blue-400);
  box-shadow:0 0 0 0 rgba(99,121,201,.7);
  animation:pulse 2.6s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(99,121,201,.55);}
  70%{box-shadow:0 0 0 12px rgba(99,121,201,0);}
  100%{box-shadow:0 0 0 0 rgba(99,121,201,0);}
}

.display{
  color:#fff;
  font-size:clamp(2.5rem, 6.4vw, 5.2rem);
  font-weight:800;
  letter-spacing:-.022em;
  margin-bottom:28px;
  text-shadow:0 2px 34px rgba(5,11,24,.55);
}
/* Tinta piena, niente gradiente sul testo: il testo sfumato è
   una delle firme più riconoscibili dei siti AI fatti in serie. */
.display em{
  font-style:normal;
  color:var(--blue-200);
}

/* un nome proprio dentro il sottotitolo: si stacca appena, senza gridare */
.hero-lede b{color:#fff;font-weight:600;}

.hero-lede{
  color:rgba(255,255,255,.85);
  text-shadow:0 1px 20px rgba(5,11,24,.6);
  font-size:clamp(1.05rem, 1.7vw, 1.35rem);
  font-weight:300;
  max-width:640px;
}

.hero-actions{
  display:flex;flex-wrap:wrap;gap:14px;
  margin-top:38px;
}

.scroll-cue{
  position:absolute;
  bottom:34px;left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  color:rgba(255,255,255,.55);
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;
  transition:opacity .5s ease;
  z-index:3;
}
.scroll-cue i{
  width:1px;height:44px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  animation:cue 2.2s var(--ease) infinite;
  transform-origin:top;
}
@keyframes cue{
  0%{transform:scaleY(0);opacity:0;}
  35%{opacity:1;}
  100%{transform:scaleY(1);opacity:0;}
}

/* =====================================================
   SEZIONI GENERICHE
   ===================================================== */
.section{
  position:relative;
  padding:clamp(90px, 12vw, 170px) 0;
}

.section-head{
  max-width:840px;
  margin-inline:auto;
  margin-bottom:clamp(48px,6vw,86px);
  text-align:center;
}
.section-head .section-lede{margin-inline:auto;}

.section-tag{
  display:inline-block;
  font-size:12.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:var(--blue-600);
  margin-bottom:22px;
}
.section-tag.light{color:var(--blue-200);}

.section-title{
  font-size:clamp(2.1rem, 4.6vw, 3.7rem);
  margin-bottom:24px;
}
.section-lede{
  color:var(--ink-soft);
  font-size:clamp(1.02rem, 1.5vw, 1.2rem);
  font-weight:300;
  max-width:640px;
}
.section-head.center .section-lede{margin-inline:auto;}

/* Animazione di comparsa */
[data-reveal]{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].in{opacity:1;transform:none;}

/* =====================================================
   MANIFESTO
   ===================================================== */
.manifesto{
  background:var(--ice);
  border-block:1px solid var(--line);
}
.manifesto-text{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 3.5vw, 2.85rem);
  font-weight:300;
  line-height:1.32;
  letter-spacing:-.025em;
  max-width:1000px;
  color:var(--ink);
}
.manifesto-text b{font-weight:700;color:var(--blue-600);}
.manifesto-text .w{
  display:inline-block;
  opacity:.13;
  transition:opacity .5s ease;
}
.manifesto-text .w.lit{opacity:1;}

/* =====================================================
   SERVIZI
   ===================================================== */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,1.8vw,24px);
}
/* sotto i 1200px tre colonne strozzano il testo: si scende a due */
@media (max-width:1200px){
  .cards{grid-template-columns:repeat(2,1fr);}
}

.card{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  padding:clamp(26px,2.4vw,34px);
  background:
    radial-gradient(130% 100% at 100% 0%, rgba(47,73,171,.34) 0%, transparent 58%),
    linear-gradient(165deg, #111f3d 0%, #0a1428 52%, #050b18 100%);
  border:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;
  transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s var(--ease);
}
.card::after{
  /* reticolo appena percettibile, dà consistenza al fondo */
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:52px 52px;
}
.card:hover{
  transform:translateY(-8px);
  border-color:rgba(99,121,201,.42);
  box-shadow:0 40px 70px -40px rgba(10,20,40,.85);
}

.card-num{
  position:absolute;top:26px;right:30px;
  font-family:var(--font-display);
  font-size:14px;font-weight:600;letter-spacing:.1em;
  color:rgba(255,255,255,.4);
  z-index:2;
}

.card-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:52px;height:52px;flex:none;
  border-radius:15px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.15);
  color:var(--blue-200);
  margin-bottom:22px;
  transition:background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
}
.card-icon svg{width:25px;height:25px;}
.card:hover .card-icon{
  background:var(--blue-600);
  border-color:var(--blue-600);
  color:#fff;
}

.card-body{position:relative;z-index:1;color:#fff;}
.card-body h3{
  font-size:clamp(1.35rem,1.9vw,1.75rem);
  font-weight:700;
  margin-bottom:12px;
}
.card-body p{
  color:rgba(255,255,255,.72);
  font-weight:300;
  font-size:15.5px;
  max-width:38ch;
  margin-bottom:22px;
}

.pills{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.pills li{
  padding:7px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.94);
  color:var(--blue-900);
  font-size:13.5px;font-weight:600;
  transition:transform .4s var(--ease), background .3s ease;
}
.card:hover .pills li{background:#fff;}
.pills li:hover{transform:translateY(-3px);}

/* =====================================================
   METODO
   ===================================================== */
.method{background:var(--white);}
.steps{
  position:relative;
  list-style:none;margin:0;padding:0 0 0 clamp(50px,7vw,110px);
  display:flex;flex-direction:column;gap:clamp(40px,5vw,72px);
}
.steps-rail{
  position:absolute;
  left:clamp(15px,2.2vw,34px);top:8px;bottom:8px;
  width:2px;background:var(--line);border-radius:2px;
}
.steps-rail span{
  display:block;width:100%;height:0%;
  background:linear-gradient(180deg,var(--blue-500),var(--blue-700));
  border-radius:2px;
  transition:height .25s linear;
}

.step{display:flex;gap:clamp(18px,2.5vw,34px);align-items:flex-start;}
.step-index{
  font-family:var(--font-display);
  font-size:14px;font-weight:700;letter-spacing:.1em;
  color:var(--blue-600);
  padding-top:8px;
  flex:none;
}
.step h3{
  font-size:clamp(1.5rem,2.6vw,2.1rem);
  margin-bottom:12px;
}
.step p{color:var(--ink-soft);font-weight:300;max-width:62ch;}

/* =====================================================
   RISULTATI
   ===================================================== */
.results{
  background:var(--blue-950);
  color:#fff;
  overflow:hidden;
}
.results::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(60% 55% at 15% 0%, rgba(35,58,140,.26), transparent 68%),
    radial-gradient(50% 50% at 90% 100%, rgba(47,73,171,.16), transparent 72%);
  pointer-events:none;
}
.results .shell{position:relative;z-index:1;}
.results .section-title{color:#fff;}
.results .section-lede{color:rgba(255,255,255,.66);}

.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(18px,2.4vw,32px);
}
.stat{
  text-align:center;
  padding:clamp(28px,3vw,40px);
  border-radius:var(--radius);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(6px);
  transition:background .4s var(--ease), border-color .4s var(--ease), transform .5s var(--ease);
}
.stat:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(99,121,201,.45);
  transform:translateY(-6px);
}
.stat-num{
  display:block;
  font-family:var(--font-display);
  font-size:clamp(2.6rem,5vw,4rem);
  font-weight:800;letter-spacing:-.05em;line-height:1;
  color:#fff;
  margin-bottom:18px;
}
.stat-label{
  color:rgba(255,255,255,.62);
  font-size:15px;font-weight:300;line-height:1.5;
}

/* =====================================================
   FAQ
   ===================================================== */
.faq{background:var(--ice);border-block:1px solid var(--line);}
.faq-grid{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(40px,6vw,90px);
  align-items:start;
}
.faq-intro{position:sticky;top:calc(var(--header-h) + 40px);}
.faq-intro .section-title{margin-bottom:20px;}

.faq-item{
  border-bottom:1px solid var(--line);
  background:transparent;
}
.faq-item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:26px 0;
  font-family:var(--font-display);
  font-size:clamp(1.05rem,1.7vw,1.28rem);
  font-weight:600;letter-spacing:-.02em;
  transition:color .3s ease;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--blue-600);}

.faq-item summary i{
  position:relative;flex:none;
  width:26px;height:26px;border-radius:50%;
  border:1px solid var(--blue-200);
  transition:background .35s var(--ease), border-color .35s var(--ease), transform .45s var(--ease);
}
.faq-item summary i::before,
.faq-item summary i::after{
  content:'';position:absolute;left:50%;top:50%;
  background:var(--blue-600);border-radius:2px;
  transform:translate(-50%,-50%);
  transition:opacity .3s ease, background .3s ease;
}
.faq-item summary i::before{width:11px;height:1.5px;}
.faq-item summary i::after{width:1.5px;height:11px;}
.faq-item[open] summary i{background:var(--blue-600);border-color:var(--blue-600);transform:rotate(180deg);}
.faq-item[open] summary i::before{background:#fff;}
.faq-item[open] summary i::after{opacity:0;}

.faq-answer{overflow:hidden;}
.faq-answer p{
  color:var(--ink-soft);font-weight:300;
  padding-bottom:28px;max-width:64ch;
}

/* =====================================================
   CONTATTI
   ===================================================== */
.contact{
  position:relative;
  background:var(--blue-950);
  color:#fff;
  overflow:hidden;
}
#ctaCanvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85;}
.contact .shell{position:relative;z-index:1;}
.contact .section-title{color:#fff;}
.contact .section-lede{color:rgba(255,255,255,.7);}

.contact-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(40px,6vw,86px);
  align-items:start;
}

.contact-points{
  list-style:none;margin:38px 0 0;padding:0;
  display:flex;flex-direction:column;gap:14px;
}
.contact-points li{
  position:relative;padding-left:34px;
  color:rgba(255,255,255,.8);font-weight:300;
}
.contact-points li::before{
  content:'';position:absolute;left:0;top:9px;
  width:16px;height:9px;
  border-left:2px solid var(--blue-400);
  border-bottom:2px solid var(--blue-400);
  transform:rotate(-45deg);
}

.contact-form{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  padding:clamp(26px,3vw,40px);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);
  backdrop-filter:blur(12px);
}
.field{display:flex;flex-direction:column;gap:9px;}
.field-wide{grid-column:1 / -1;}
.field label{
  font-size:13.5px;font-weight:500;
  color:rgba(255,255,255,.72);
  letter-spacing:.01em;
}
.field .opt{color:rgba(255,255,255,.42);font-weight:300;}

.field input,
.field textarea{
  width:100%;
  padding:14px 16px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(5,11,24,.45);
  color:#fff;
  font-family:var(--font-body);
  font-size:16px;
  transition:border-color .3s ease, background .3s ease, box-shadow .3s ease;
  resize:vertical;
}
.field input::placeholder,
.field textarea::placeholder{color:rgba(255,255,255,.3);}
.field input:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--blue-400);
  background:rgba(5,11,24,.7);
  box-shadow:0 0 0 4px rgba(47,73,171,.2);
}
.field input[aria-invalid="true"],
.field textarea[aria-invalid="true"]{border-color:#ff7a7a;}

.checkbox{
  flex-direction:row;align-items:flex-start;gap:12px;
  display:flex;cursor:pointer;
  font-size:14px;font-weight:300;color:rgba(255,255,255,.7);
  line-height:1.5;
}
.checkbox input{
  appearance:none;-webkit-appearance:none;
  width:20px;height:20px;flex:none;margin-top:2px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  background:rgba(5,11,24,.5);
  cursor:pointer;
  position:relative;
  transition:background .25s ease, border-color .25s ease;
}
.checkbox input:checked{background:var(--blue-600);border-color:var(--blue-600);}
.checkbox input:checked::after{
  content:'';position:absolute;left:6.5px;top:3px;
  width:5px;height:10px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);
}
.checkbox a{color:var(--blue-200);}

.form-note{
  grid-column:1 / -1;
  min-height:22px;
  font-size:14.5px;
  color:var(--blue-200);
}
.form-note.error{color:#ff9d9d;}

/* =====================================================
   FOOTER
   ===================================================== */
.site-footer{
  background:var(--blue-900);
  color:rgba(255,255,255,.65);
  padding-top:clamp(60px,7vw,96px);
  font-size:15px;
}
.footer-grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:clamp(30px,4vw,60px);
  padding-bottom:clamp(46px,5vw,70px);
}
.site-footer .brand{color:#fff;}
.footer-brand p{max-width:34ch;margin-top:20px;font-weight:300;}
.footer-col{display:flex;flex-direction:column;gap:12px;}
.footer-col h4{
  color:#fff;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;margin-bottom:6px;
}
.footer-col a,.footer-col span{
  color:rgba(255,255,255,.62);text-decoration:none;
  transition:color .25s ease;
}
.footer-col a:hover{color:#fff;}

.footer-bottom{
  display:flex;flex-wrap:wrap;gap:14px;
  justify-content:space-between;
  padding-block:26px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:14px;color:rgba(255,255,255,.45);
}
.footer-bottom a{text-decoration:none;}
.footer-bottom a:hover{color:#fff;}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media (max-width:1000px){
  .nav,.header-cta{display:none;}
  .burger{display:block;}
  .mobile-nav{display:flex;}
  .mobile-nav[hidden]{display:none;}
  .cards{grid-template-columns:1fr;}
  .stats{grid-template-columns:repeat(2,1fr);}
  .faq-grid{grid-template-columns:1fr;}
  .faq-intro{position:static;}
  .contact-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:620px){
  body{font-size:16px;}
  .hero{height:520vh;}
  /* così l'occhiello resta su una riga sola e il pallino non si stacca */
  .eyebrow{font-size:11px;letter-spacing:.11em;gap:8px;}
  .card{min-height:0;}
  .stats{grid-template-columns:1fr;}
  .contact-form{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr;}
  .hero-actions .btn{width:100%;}
}

/* =====================================================
   PREFERENZA: MENO ANIMAZIONI
   ===================================================== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-reveal]{opacity:1 !important;transform:none !important;}
  .manifesto-text .w{opacity:1 !important;}
  .hero{height:auto;}
  .hero-sticky{position:relative;height:auto;padding-block:140px 100px;}
  .hero-room{position:relative;top:auto;transform:none;opacity:1 !important;left:auto;right:auto;margin-bottom:70px;pointer-events:auto;}
  .scroll-cue{display:none;}
}

/* =====================================================
   WHATSAPP — contatto rapido
   Verde di marca: e' l'unico punto del sito fuori palette, ma e' un
   comando che le persone riconoscono a colpo d'occhio proprio da quel
   colore. Per portarlo in blu basta cambiare --wa.
   ===================================================== */
.wa{
  --wa:#25d366;
  position:fixed;
  right:clamp(16px,2.4vw,32px);
  bottom:clamp(16px,2.4vw,32px);
  z-index:130;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px 14px 18px;
  border-radius:999px;
  background:var(--wa);
  color:#fff;
  text-decoration:none;
  font-family:var(--font-body);
  font-size:15.5px;font-weight:600;
  box-shadow:0 10px 28px -12px rgba(5,11,24,.75);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), filter .25s ease;
}
.wa svg{width:24px;height:24px;flex:none;}
.wa:hover{
  transform:translateY(-3px);
  filter:brightness(1.06);
  box-shadow:0 18px 38px -14px rgba(5,11,24,.85);
}
.wa:active{transform:translateY(-1px);}

/* su schermo stretto resta il solo simbolo: non ruba spazio ai contenuti */
@media (max-width:620px){
  .wa{padding:0;width:56px;height:56px;justify-content:center;}
  .wa span{display:none;}
}

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

/* =====================================================
   PAGINE LEGALI (privacy, cookie)
   Fondo chiaro, colonna stretta, nessuna animazione:
   sono pagine che si leggono, non che si guardano.
   ===================================================== */
.legal{
  background:var(--white);
  padding:calc(var(--header-h) + clamp(50px,7vw,90px)) 0 clamp(60px,8vw,110px);
}
.legal-shell{
  width:100%;max-width:760px;
  margin-inline:auto;padding-inline:var(--gutter);
}
.legal h1{
  font-size:clamp(2rem,4vw,3rem);
  margin-bottom:14px;
}
.legal .aggiornato{
  color:var(--ink-soft);font-size:15px;
  padding-bottom:28px;margin-bottom:36px;
  border-bottom:1px solid var(--line);
}
.legal h2{
  font-size:clamp(1.2rem,1.9vw,1.5rem);
  margin:44px 0 14px;
}
.legal h3{font-size:1.05rem;margin:26px 0 8px;}
.legal p, .legal li{color:var(--ink-soft);}
.legal p{margin-bottom:14px;}
.legal ul{margin:0 0 18px;padding-left:22px;}
.legal li{margin-bottom:8px;}
.legal a{color:var(--blue-600);}
.legal strong{color:var(--ink);font-weight:600;}

.legal table{
  width:100%;border-collapse:collapse;margin:8px 0 22px;font-size:15px;
}
.legal th,.legal td{
  text-align:left;vertical-align:top;
  padding:12px 14px;border-bottom:1px solid var(--line);
}
.legal th{color:var(--ink);font-weight:600;background:var(--ice);}
.legal td{color:var(--ink-soft);}

/* riquadro per le cose che il proprietario del sito deve ancora completare */
.legal .dacompletare{
  background:#fff8e6;border:1px solid #f0dca8;
  border-radius:12px;padding:16px 18px;margin:22px 0;
  color:#6b5312;font-size:15px;
}
.legal .dacompletare strong{color:#4a3a0c;}

.legal-top{
  position:fixed;inset:0 0 auto 0;z-index:110;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--line);
}
.legal-top .brand{color:var(--blue-900);}
.legal-top .header-inner{gap:20px;}
.legal-torna{
  color:var(--ink-soft);text-decoration:none;font-size:15px;font-weight:500;
}
.legal-torna:hover{color:var(--blue-600);}