/* Stile comune di futureai.it: home e pagine dei servizi */
:root {
  --violet: #7B5CF5;
  --violet-light: #9B7FF8;
  --cyan: #00D4FF;
  --cyan-dark: #00A8CC;
  --dark: #080B14;
  --dark2: #0D1220;
  --card: #111827;
  --text: #F0F4FF;
  --muted: #8892A4;
  --border: rgba(123,92,245,0.2);
  --border2: rgba(123,92,245,0.35);
  --glow-v: rgba(123,92,245,0.12);
  --glow-c: rgba(0,212,255,0.08);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
  font-family:'DM Sans',sans-serif;
  background:var(--dark);
  color:var(--text);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ORBS */
.orb{position:fixed;border-radius:50%;filter:blur(100px);pointer-events:none;z-index:0;}
.orb-1{width:500px;height:500px;background:var(--glow-v);top:-150px;left:-150px;}
.orb-2{width:400px;height:400px;background:var(--glow-c);top:30%;right:-100px;}
.orb-3{width:350px;height:350px;background:var(--glow-v);bottom:15%;left:25%;}

/* GRID BG */
.grid-bg{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(123,92,245,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,92,245,0.04) 1px,transparent 1px);
  background-size:50px 50px;
}
@media(max-width:768px){}

/* CURSOR (desktop only) */
.cursor,.cursor-ring{display:none;}
@media(hover:hover){
  .cursor{
    display:block;width:10px;height:10px;background:var(--cyan);
    border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;
    z-index:9999;transition:transform 0.1s;mix-blend-mode:screen;
  }
  .cursor-ring{
    display:block;width:32px;height:32px;border:1px solid rgba(0,212,255,0.4);
    border-radius:50%;position:fixed;top:0;left:0;pointer-events:none;z-index:9998;
  }
}

/* ===== NAV ===== */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  padding:0 1.5rem;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(8,11,20,0.85);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}

.nav-logo{display:flex;align-items:center;gap:0.4rem;text-decoration:none;position:relative;z-index:10;}
.nav-logo img{display:none;}
.nav-logo span{font-family:'Manrope',sans-serif;font-weight:800;font-size:1.1rem;color:var(--text);letter-spacing:0.02em;}

.nav-links{display:flex;gap:2rem;list-style:none;align-items:center;}
.nav-links a{
  color:var(--muted);text-decoration:none;font-size:0.88rem;
  font-weight:500;transition:color 0.2s;
}
.nav-links a:hover{color:var(--text);}

.nav-cta{
  background:linear-gradient(135deg,var(--violet),var(--cyan-dark)) !important;
  color:white !important;
  padding:0.55rem 1.3rem !important;
  border-radius:100px;
  font-weight:500 !important;
  transition:opacity 0.2s,transform 0.2s !important;
  white-space:nowrap;
}
.nav-cta:hover{opacity:0.88;transform:translateY(-1px) !important;}

/* HAMBURGER */
.hamburger{
  display:none;flex-direction:column;gap:5px;cursor:pointer;
  background:none;border:none;padding:4px;
}
.hamburger span{
  display:block;width:24px;height:2px;
  background:var(--text);border-radius:2px;
  transition:all 0.3s;
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}

/* MOBILE MENU */
.mobile-menu{
  position:fixed;
  top:64px;left:0;right:0;
  background:rgba(8,11,20,0.97);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  z-index:99;
  padding:1.5rem;
  display:flex;flex-direction:column;gap:0;
  transform:translateY(-110%);
  transition:transform 0.3s ease;
  pointer-events:none;
}
.mobile-menu.open{
  transform:translateY(0);
  pointer-events:all;
}
.mobile-menu a{
  color:var(--text);text-decoration:none;
  font-size:1.1rem;font-weight:500;
  padding:1rem 0;
  border-bottom:1px solid rgba(123,92,245,0.1);
  display:block;
}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu .mob-cta{
  margin-top:1rem;
  background:linear-gradient(135deg,var(--violet),var(--cyan-dark));
  color:white !important;
  padding:1rem 1.5rem;
  border-radius:14px;
  text-align:center;
  font-weight:600 !important;
}

/* ===== MENU A TUTTO SCHERMO =====
   I link spariscono dalla barra e diventano un pannello che entra da
   destra. Restano sempre a vista solo logo e "Richiedi Preventivo": la
   navigazione puo' stare dietro un clic, l'azione che porta contatti no. */
.nav-destra{display:flex;align-items:center;gap:1rem;}

.menu-btn{
  display:flex;align-items:center;gap:0.55rem;
  background:none;border:0;cursor:pointer;
  color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:500;
  padding:0.4rem 0.2rem;
}
/* le due parole stanno incolonnate dentro una finestra alta una riga:
   all'apertura scorrono e "Menu" diventa "Chiudi" */
.menu-btn-testo{
  display:block;overflow:hidden;
  height:1.4em;line-height:1.4em;
}
.menu-btn-testo span{display:block;}
/* le tre righe classiche: all'apertura la prima e la terza si incrociano
   in una X e quella di mezzo sparisce */
.menu-btn-icona{
  position:relative;display:block;flex-shrink:0;
  width:20px;height:14px;
}
.menu-btn-icona i{
  position:absolute;left:0;right:0;
  height:1.6px;border-radius:2px;
  background:currentColor;
}
.menu-btn-icona i:nth-child(1){top:0;}
.menu-btn-icona i:nth-child(2){top:50%;margin-top:-0.8px;}
.menu-btn-icona i:nth-child(3){bottom:0;}

/* la riga di divisione fra una voce e l'altra: si tira da sinistra
   quando il menu si apre, dopo che il testo e' salito */
.menu-riga{
  display:block;height:1px;
  background:linear-gradient(90deg,rgba(240,244,255,0.32),rgba(240,244,255,0.06));
  transform:scaleX(0);transform-origin:left center;
}

.menu-schermo{
  position:fixed;inset:0;z-index:200;
  display:none;
}
.menu-velo{
  position:absolute;inset:0;
  background:rgba(4,6,14,0.72);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  opacity:0;
}
/* Attenzione: questo e' un <nav>, e nel foglio esiste gia' una regola
   sull'elemento nav per la barra fissa in alto (height:64px, left:0,
   position:fixed, padding, bordo). Va neutralizzata voce per voce,
   altrimenti il pannello nasce alto 64px e incollato a sinistra. */
.menu-pannello{
  position:absolute;
  top:0;right:0;bottom:0;left:auto;
  height:auto;width:min(560px,100%);
  padding:0;margin:0;
  background:none;border:0;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;align-items:center;justify-content:flex-start;
  overflow:hidden;
}
/* tre pannelli sfalsati: entrano uno dietro l'altro e danno spessore
   al gesto, invece di far comparire un rettangolo unico */
.menu-fondo{position:absolute;inset:0;}
.menu-strato{
  position:absolute;inset:0;
  transform:translateX(101%);
}
.menu-strato.prima{background:var(--violet);opacity:0.9;}
.menu-strato.seconda{background:#141A2E;}
.menu-strato.terza{background:var(--dark2);}

.menu-forme{position:absolute;inset:0;overflow:hidden;pointer-events:none;}
.forma{
  position:absolute;top:50%;right:-6%;
  width:min(78%,420px);aspect-ratio:1;
  transform:translateY(-50%);
  opacity:0;visibility:hidden;
}
.forma.attiva{visibility:visible;}

.menu-dentro{
  position:relative;z-index:2;
  width:100%;
  padding:clamp(2rem,6vw,4rem);
  display:flex;flex-direction:column;gap:2.5rem;
}
.menu-voci{list-style:none;display:flex;flex-direction:column;gap:0.2rem;}
.menu-link{
  display:block;text-decoration:none;
  color:var(--text);
  overflow:hidden;                 /* la finestra da cui il testo sale */
  padding:0.35rem 0;
}
.menu-link-testo{
  display:block;
  font-family:'Fraunces',Georgia,serif;
  font-size:clamp(2rem,6.5vw,3.2rem);
  font-weight:600;line-height:1.12;letter-spacing:-0.02em;
  transition:opacity 0.3s;
}
.menu-voce:hover .menu-link-testo{opacity:1;}
.menu-voci:hover .menu-voce:not(:hover) .menu-link-testo{opacity:0.42;}

.menu-piede{
  display:flex;flex-direction:column;gap:0.3rem;
  font-size:0.85rem;color:var(--muted);
}
.menu-piede a{color:var(--text);text-decoration:none;}
.menu-piede a:hover{color:var(--violet-light);}

@media(max-width:768px){
  .nav-destra .nav-cta{display:none;}   /* sul telefono la CTA vive nel pannello */
  .menu-pannello{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .forma{display:none;}
}

/* ===== HERO ===== */
.hero{position:relative;overflow:hidden;
  min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  padding:6rem 1.5rem 3rem;
}

.hero-inner{max-width:800px;width:100%;position:relative;z-index:1;}

.hero-badge{
  display:inline-flex;align-items:center;gap:0.5rem;
  background:rgba(123,92,245,0.1);
  border:1px solid rgba(123,92,245,0.3);
  color:var(--violet-light);
  padding:0.4rem 1rem;border-radius:100px;
  font-size:0.82rem;font-weight:500;
  margin-bottom:1.8rem;
  animation:fadeUp 0.8s ease both;
}
.hero-badge-dot{
  width:7px;height:7px;background:var(--cyan);
  border-radius:50%;animation:pulse 2s infinite;
}

@keyframes pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:0.4;transform:scale(0.7);}
}

.hero h1{
  font-family:'Manrope',sans-serif;
  font-size:clamp(2.2rem,5vw,3.8rem);
  font-weight:800;line-height:1.05;letter-spacing:-0.03em;
  margin-bottom:1rem;
  animation:fadeUp 0.8s 0.1s ease both;
}

.gradient-text{
  background:linear-gradient(135deg,var(--violet-light) 0%,var(--cyan) 40%,#ff6ec7 70%,var(--violet-light) 100%);
  background-size:300% 300%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:gradientShift 5s ease infinite;
}
@keyframes gradientShift{
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;}
  100%{background-position:0% 50%;}
}

.hero p{
  font-size:clamp(0.95rem,1.5vw,1.05rem);
  color:var(--muted);max-width:520px;
  margin:0 auto 2rem;line-height:1.75;
  font-weight:300;
  animation:fadeUp 0.8s 0.2s ease both;
}

.hero-buttons{
  display:flex;gap:0.8rem;justify-content:center;flex-wrap:wrap;
  animation:fadeUp 0.8s 0.3s ease both;
}

.btn-primary{
  background:linear-gradient(135deg,var(--violet),var(--cyan-dark));
  color:white;padding:0.95rem 2rem;border-radius:100px;
  font-size:0.95rem;font-weight:500;text-decoration:none;
  display:inline-flex;align-items:center;gap:0.4rem;
  transition:transform 0.2s,box-shadow 0.2s;
  box-shadow:0 0 35px rgba(123,92,245,0.3);
  white-space:nowrap;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 55px rgba(123,92,245,0.5);}

.btn-secondary{
  background:transparent;color:var(--text);
  padding:0.95rem 2rem;border-radius:100px;
  font-size:0.95rem;font-weight:500;text-decoration:none;
  border:1px solid var(--border);
  display:inline-flex;align-items:center;gap:0.4rem;
  transition:border-color 0.2s,background 0.2s;
  white-space:nowrap;
}
.btn-secondary:hover{border-color:var(--border2);background:rgba(123,92,245,0.05);}

/* ===== HERO: due colonne — messaggio a sinistra, video a destra ===== */
.hero{text-align:left;}
.hero-inner{
  max-width:1400px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:clamp(2.5rem,5vw,4.5rem);
}
.hero-copy{min-width:0;}
.hero p{margin:0 0 2rem;max-width:48ch;}
.hero-buttons{justify-content:flex-start;}

/* ===== HERO: titolo e pulsanti con un carattere loro =====
   Bricolage Grotesque per il titolo e i pulsanti, l'accento in corsivo
   con grazie (Instrument Serif): la coppia da studio di design, lontana
   dal solito bastoni "da IA". Le parole entrano una alla volta. */
.hero h1.hero-tit{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-variation-settings:'opsz' 96;
  letter-spacing:-0.03em;line-height:0.98;animation:none}
.hero-tit em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-0.01em;font-size:1.1em;
  background:linear-gradient(100deg,#9B7FF8 0%,#4DD9E0 45%,#ff6ec7 75%,#9B7FF8 100%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gradientShift 7s ease infinite;
  padding-right:.08em}
.hero-tit .w{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(.35em);
  animation:parola .9s cubic-bezier(.2,.75,.2,1) forwards;animation-delay:calc(var(--i) * 95ms + 150ms)}
.hero-tit em .w{background:inherit;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
@keyframes parola{to{opacity:1;filter:none;transform:none}}
.hero-badge{font-family:'Bricolage Grotesque',sans-serif;font-weight:500;letter-spacing:.01em}
.hero-btn{position:relative;overflow:hidden;font-family:'Bricolage Grotesque',sans-serif;font-weight:700;font-size:1.02rem;
  letter-spacing:-.01em;padding:1rem 1.7rem;gap:.55rem;will-change:transform}
.hero-btn .rotola{display:inline-block;overflow:hidden;height:1.25em;line-height:1.25em}
.hero-btn .rotola span{display:block;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.hero-btn .rotola span::after{content:attr(data-t);display:block}
.hero-btn:hover .rotola span,.hero-btn:focus-visible .rotola span{transform:translateY(-50%)} /* lo span contiene due righe: meta' = una riga */
.hero-btn svg{transition:transform .35s cubic-bezier(.7,0,.2,1)}
.hero-btn.btn-primary:hover svg{transform:translateY(3px)}
.hero-btn.btn-secondary:hover svg{transform:translateX(3px)}
.hero-btn.btn-primary::before{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:transform .8s ease}
.hero-btn.btn-primary:hover::before{transform:translateX(120%) skewX(-20deg)}
.hero-btn.btn-secondary{border-color:rgba(255,255,255,.22);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
/* il sottotitolo bianco pieno: sopra il video il grigio si perdeva */
.hero p.hero-sub{color:#fff;font-weight:400;font-size:clamp(1rem,1.35vw,1.12rem);line-height:1.7;text-shadow:0 2px 14px rgba(8,11,20,.85)}
@media(prefers-reduced-motion:reduce){.hero-tit .w{animation:none;opacity:1;filter:none;transform:none}}
/* da computer: testo a sinistra, logo del video al centro, telefono a destra.
   Il testo ha una larghezza fissa e non arriva mai sopra al logo. */
@media(min-width:901px){
  .hero-inner{grid-template-columns:minmax(0,33rem) 1fr auto;}
  .hero-media{grid-column:3;}
  .hero h1.hero-tit{font-size:clamp(2.7rem,4.2vw,4.1rem);}
  /* il velo resta scuro solo sotto al testo: al centro il logo deve vedersi pieno */
  .hero.con-video .hero-bg-velo{background:linear-gradient(90deg,rgba(8,11,20,.85) 0%,rgba(8,11,20,.55) 30%,rgba(8,11,20,0) 42%,rgba(8,11,20,0) 72%,rgba(8,11,20,.2) 100%),linear-gradient(180deg,var(--dark) 0%,rgba(8,11,20,0) 22%,rgba(8,11,20,0) 80%,var(--dark) 100%)}
  .hero.con-video .hero-bg{inset:auto;opacity:1;object-fit:contain;
    -webkit-mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 50%,#000 55%,transparent 100%)}
}
/* a due colonne il titolo ha meno larghezza: scala giù per non spezzarsi male */


.hero-media{
  justify-self:end;
  display:flex;flex-direction:column;align-items:flex-end;
}
/* Art. 50.4 AI Act: le clip fatte con Gemini (Siti, Prenotazioni e la
   sequenza nel telefono) si dichiarano sul posto, come il video della hero.
   Le altre clip sono Pexels e non hanno etichetta. */
#servizi .ia-etichetta{
  position:absolute;z-index:3;right:0.9rem;bottom:0.8rem;
  padding:0.28rem 0.6rem;border-radius:100px;
  background:rgba(8,11,20,0.72);border:1px solid rgba(255,255,255,0.14);
  color:#C3CAD8;font-size:0.625rem;line-height:1.2;letter-spacing:0.05em;
  pointer-events:none;
}
/* dentro lo schermo, in alto sotto l'isola: la sezione e' ferma mentre si
   scorre e su telefono la parte bassa della scocca resta fuori schermo */
.ia-nota-telefono{
  position:absolute;z-index:3;left:50%;top:3.3rem;transform:translateX(-50%);
  margin:0;white-space:nowrap;
  padding:0.28rem 0.6rem;border-radius:100px;
  background:rgba(8,11,20,0.72);border:1px solid rgba(255,255,255,0.14);
  color:#C3CAD8;font-size:0.625rem;line-height:1.2;letter-spacing:0.05em;
  pointer-events:none;
}
/* Art. 50.4 AI Act: il video è generato con IA e va dichiarato */
.hero .video-nota{
  margin:0.55rem 0 0;
  /* 10px: e' il gradino piu' basso a cui scendo. L'Art. 50.4 chiede che
     l'informazione sia "chiara e distinguibile", quindi sotto i 10px la
     alleggerirei fino a renderla contestabile. Per compensare la
     dimensione alzo il contrasto invece di abbassarlo. */
  font-size:0.625rem;
  line-height:1.35;
  letter-spacing:0.05em;
  /* piu' chiara del muted: col video di sfondo scendeva a 4.35 sulle
     tracce ambra, e un'informazione dovuta per legge non sta sul limite */
  color:#C3CAD8;
  /* col velo piu' rado a destra puo' capitarle sotto una traccia ambra */
  text-shadow:0 1px 8px rgba(8,11,20,0.95);
  text-align:right;
  max-width:none;
}
.hero-video-wrap{
  position:relative;
  height:clamp(360px,62svh,600px);
  aspect-ratio:9/16;
  border-radius:20px;
  padding:1px;
  background:linear-gradient(150deg,rgba(123,92,245,0.9) 0%,rgba(77,217,224,0.5) 55%,rgba(123,92,245,0.12) 100%);
  box-shadow:0 2px 8px rgba(0,0,0,0.4),0 28px 64px rgba(8,6,26,0.55);
  animation:heroVideoIn 0.9s 0.35s cubic-bezier(0.22,1,0.36,1) both;
}
.hero-video-wrap video{
  display:block;width:100%;height:100%;
  object-fit:cover;
  border-radius:19px;
  background:#000;
}
@keyframes heroVideoIn{
  from{opacity:0;transform:translateY(28px) scale(0.97);}
  to{opacity:1;transform:none;}
}

/* sotto i 900px si impila: prima il messaggio, poi il video.
   Spaziature compresse per far affacciare il video sopra la piega. */
@media(max-width:900px){
  .hero{text-align:center;padding-top:7rem;}
  .hero-inner{grid-template-columns:1fr;justify-items:center;gap:1.75rem;}
  .hero-badge{margin-bottom:1.1rem;}
  .hero p{margin:0 auto 1.5rem;}
  .hero-buttons{justify-content:center;}
  .hero-media{justify-self:center;align-items:center;}
  .hero .video-nota{text-align:center;margin-top:0.55rem;}
  .hero-video-wrap{height:auto;width:min(64vw,260px);}
}

@media(prefers-reduced-motion:reduce){
  .hero-video-wrap{animation:none;}
}

/* nota di trasparenza IA nel footer */
.footer-trasparenza{
  flex-basis:100%;
  margin-top:0.5rem;
  font-size:0.78rem;line-height:1.6;
  color:var(--muted);
  max-width:none;
}
.footer-trasparenza strong{color:var(--text);font-weight:600;}

/* ===== MUSICA DI SOTTOFONDO ===== */
.music-toggle{
  position:fixed;right:1.5rem;bottom:1.5rem;z-index:60;
  display:inline-flex;align-items:center;gap:0.55rem;
  padding:0 1.1rem 0 0.95rem;
  min-height:44px;
  border-radius:100px;
  background:rgba(12,12,24,0.75);
  border:1px solid var(--border);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--muted);
  font-family:inherit;font-size:0.76rem;font-weight:500;letter-spacing:0.03em;
  cursor:pointer;
  transition:color 0.2s,border-color 0.2s,transform 0.2s;
}
.music-toggle:hover{color:var(--text);border-color:var(--border2);transform:translateY(-2px);}
.music-toggle:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;}
.music-toggle.is-playing{color:var(--text);}

.music-bars{display:flex;align-items:flex-end;gap:2px;height:13px;}
.music-bars i{
  display:block;width:2px;height:26%;border-radius:1px;
  background:linear-gradient(180deg,var(--violet-light),var(--cyan));
  transition:height 0.25s ease;
}
.music-toggle.is-playing .music-bars i{animation:musicBar 0.95s ease-in-out infinite;}
.music-toggle.is-playing .music-bars i:nth-child(2){animation-delay:0.16s;}
.music-toggle.is-playing .music-bars i:nth-child(3){animation-delay:0.32s;}
@keyframes musicBar{0%,100%{height:26%;}50%{height:100%;}}

@media(max-width:768px){
  /* da telefono: solo l'icona, tonda, per non coprire i contenuti */
  .music-toggle{right:.9rem;bottom:.9rem;width:44px;padding:0;justify-content:center;}
  .music-toggle .music-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
}
/* robot e musica si fanno da parte mentre scorri verso il basso (vedi assistente.js) */
.music-toggle{transition:color .2s,border-color .2s,transform .3s cubic-bezier(.22,1,.36,1),opacity .3s;}
.music-toggle.via{opacity:0;transform:translateY(14px);pointer-events:none;}
@media(prefers-reduced-motion:reduce){
  .music-toggle.is-playing .music-bars i{animation:none;height:70%;}
}

/* ===== STATS ===== */
.stats-wrap{
  position:relative;z-index:2;
  border-top:1px solid var(--border);
  padding:3rem 1.5rem;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.5rem;
  max-width:900px;margin:0 auto;
}
.stat-item{text-align:center;}
.stat-number{
  font-family:'Manrope',sans-serif;font-size:2rem;font-weight:800;
  background:linear-gradient(135deg,var(--violet-light),var(--cyan));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  line-height:1.1;
}
.stat-label{color:var(--muted);font-size:0.85rem;margin-top:0.25rem;line-height:1.4;}

/* ===== SECTIONS ===== */
.section-wrap{
  position:relative;z-index:2;
  padding:4rem 4rem;
  max-width:1100px;margin:0 auto;
}

.section-tag{
  font-size:0.75rem;font-weight:600;letter-spacing:0.15em;
  text-transform:uppercase;color:var(--cyan);margin-bottom:0.8rem;
}
.section-title{
  font-family:'Manrope',sans-serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;line-height:1.05;margin-bottom:0.6rem;
}
.section-sub{
  color:var(--muted);font-size:0.95rem;
  max-width:520px;line-height:1.7;
  font-weight:300;margin-bottom:2.5rem;
}

/* ===== SERVICES ===== */
.services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1rem;
}

.service-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:18px;padding:2rem;
  transition:transform 0.3s,border-color 0.3s,box-shadow 0.3s;
  position:relative;isolation:isolate;
}
.service-card:hover{
  transform:translateY(-4px);
  border-color:var(--border2);
  box-shadow:0 16px 50px rgba(123,92,245,0.1);
}

/* ===== BEAM: due comete che orbitano sul bordo della card =====
   Porting in CSS/JS puro del Border Beam Panel di Motiq (MIT).
   L'anello e' un conic-gradient ritagliato con la doppia maschera
   mask-composite:exclude — le maschere SVG in luminanza non funzionano
   su Chromium. Ruota una sola custom property per frame, quindi il
   contenuto della card non viene mai ridisegnato. */
/* inherits:true e' obbligatorio: il JS scrive la variabile sulla card,
   ma a leggerla sono i due figli .beam-ring e .beam-glow. */
@property --beam-a{syntax:'<angle>';inherits:true;initial-value:0deg;}

.beam-ring,.beam-glow{
  position:absolute;inset:-1px;
  border-radius:19px;
  pointer-events:none;
  background:conic-gradient(from var(--beam-a,0deg),
    transparent 0deg,
    rgba(123,92,245,0.04) 18deg,
    rgba(123,92,245,0.55) 46deg,
    #00D4FF 56deg,
    #C7F6FF 60deg,
    transparent 63deg,
    transparent 198deg,
    rgba(255,110,199,0.04) 216deg,
    rgba(255,110,199,0.50) 244deg,
    #ff6ec7 254deg,
    #FFD9F0 258deg,
    transparent 261deg,
    transparent 360deg);
}
.beam-ring{
  padding:2px;
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  mask-composite:exclude;
}
.beam-glow{filter:blur(14px);opacity:0.35;z-index:-1;}

/* su mobile il glow sfocato e' la parte cara: sei blur a schermo non li regge */
@media(max-width:768px){
  .beam-glow{display:none;}
}
@media(forced-colors:active){
  .beam-ring,.beam-glow{display:none;}
}

/* ===== SERVIZI: indice editoriale =====
   Prima erano sei card identiche in griglia regolare, con emoji al posto
   delle icone e titoli a 1.05rem contro un corpo di 0.9: un contrasto di
   scala di 1.17x, cioe' nessuna gerarchia. Diventano un indice numerato
   su griglia asimmetrica: i numeri in monospace fanno da icona, i titoli
   sono dimensionati per reggere la larghezza della card. */
#servizi .section-tag{
  font-family:'Space Mono',monospace;
  font-weight:400;letter-spacing:0.2em;font-size:0.72rem;
}
#servizi .section-title{
  font-size:clamp(2rem,3.6vw,2.9rem);
  letter-spacing:-0.025em;
}
#servizi .section-sub{max-width:44ch;margin-bottom:3rem;}

#servizi .services-grid{
  grid-template-columns:repeat(12,1fr);
  gap:1rem;
}
#servizi .service-card{grid-column:span 12;}
#servizi .sp-7{grid-column:span 7;padding:2.4rem;}
#servizi .sp-5{grid-column:span 5;padding:2rem;}
#servizi .service-card.featured{grid-column:span 12;padding:2.6rem;}

/* 01 ————————  la riga che sfuma e' l'indice, non una decorazione */
#servizi .service-index{
  display:flex;align-items:center;gap:0.9rem;
  margin-bottom:1.5rem;
}
#servizi .service-index::after{
  content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--border2),transparent);
}
#servizi .service-num{
  font-family:'Space Mono',monospace;
  font-size:0.85rem;letter-spacing:0.1em;
  color:var(--violet-light);
}

#servizi .service-card h3{
  font-size:clamp(1.3rem,1.9vw,1.65rem);
  line-height:1.06;letter-spacing:-0.02em;
  margin-bottom:0.7rem;
}
#servizi .service-card p{font-size:0.92rem;}

/* la pill diventa una nota a pie' di card, non un chip colorato */
#servizi .service-pill{
  display:block;
  background:none;border:0;border-top:1px solid var(--border);
  border-radius:0;
  margin-top:1.6rem;padding:0.75rem 0 0;
  font-family:'Space Mono',monospace;
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--muted);
}

/* l'ultima card chiude a tutta larghezza, con titolo e testo affiancati:
   spezza il ritmo invece di ripetere la sesta scatola uguale */
#servizi .service-card.wide{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
  column-gap:3rem;align-content:start;
  padding:2.6rem;
}
#servizi .wide .service-index{grid-column:1/-1;}
#servizi .wide h3{grid-column:1;grid-row:2;}
#servizi .wide .service-pill{grid-column:1;grid-row:3;align-self:start;}
#servizi .wide p{grid-column:2;grid-row:2/4;}

@media(max-width:900px){
  #servizi .services-grid{grid-template-columns:1fr;}
  #servizi .service-card,
  #servizi .sp-7,#servizi .sp-5,
  #servizi .service-card.featured{grid-column:auto;padding:1.75rem;}
  #servizi .service-card.wide{display:block;padding:1.75rem;}
}

/* Featured card */
.service-card.featured{
  grid-column:1/-1;
  background:linear-gradient(135deg,rgba(123,92,245,0.08),rgba(0,212,255,0.04));
  border-color:rgba(123,92,245,0.3);
}
.featured-inner{display:flex;gap:2.5rem;align-items:flex-start;}
.featured-text{flex:1;min-width:0;}
.featured-demo{
  flex:1;min-width:0;
  background:var(--dark2);
  border-radius:14px;padding:1.25rem;
  border:1px solid var(--border);
}

.chat-label{font-size:0.7rem;color:var(--muted);margin-bottom:0.6rem;letter-spacing:0.05em;text-transform:uppercase;}
.bubble{
  border-radius:12px;padding:0.7rem 0.9rem;
  margin-bottom:0.6rem;font-size:0.82rem;line-height:1.5;
  border:1px solid var(--border);max-width:92%;
}
.bubble.user{
  background:rgba(123,92,245,0.15);border-color:rgba(123,92,245,0.3);
  margin-left:auto;color:var(--violet-light);text-align:right;
}
.bubble.ai{background:var(--card);color:var(--text);}

.service-icon{
  width:50px;height:50px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;margin-bottom:1.2rem;
}
.ic-v{background:rgba(123,92,245,0.15);}
.ic-c{background:rgba(0,212,255,0.1);}
.ic-m{background:linear-gradient(135deg,rgba(123,92,245,0.15),rgba(0,212,255,0.1));}

.service-card h3{
  font-family:'Manrope',sans-serif;font-size:1.05rem;
  font-weight:700;margin-bottom:0.5rem;
}
.service-card p{color:var(--muted);font-size:0.9rem;line-height:1.7;font-weight:300;}
.service-pill{
  display:inline-block;margin-top:1rem;
  background:rgba(123,92,245,0.1);border:1px solid rgba(123,92,245,0.2);
  color:var(--violet-light);padding:0.25rem 0.8rem;
  border-radius:100px;font-size:0.78rem;font-weight:500;
}

/* ===== PROCESS ===== */
.process-bg{
  background:linear-gradient(180deg,transparent,rgba(123,92,245,0.03),transparent);
}
.process-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:1rem;
}
.process-step{
  text-align:center;padding:1.8rem 1.2rem;
  background:var(--card);border-radius:16px;
  border:1px solid var(--border);
}
.step-num{
  width:52px;height:52px;border-radius:50%;
  background:linear-gradient(135deg,var(--violet),var(--cyan-dark));
  display:flex;align-items:center;justify-content:center;
  font-family:'Manrope',sans-serif;font-weight:800;font-size:1.1rem;
  margin:0 auto 1rem;
  box-shadow:0 0 25px rgba(123,92,245,0.35);
}
.process-step h4{font-family:'Manrope',sans-serif;font-size:1rem;font-weight:700;margin-bottom:0.4rem;}
.process-step p{color:var(--muted);font-size:0.85rem;line-height:1.6;font-weight:300;}

/* ===== CONTACT ===== */
.contact-section{
  background:var(--dark2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  position:relative;z-index:2;
}
.contact-inner{
  display:grid;grid-template-columns:1fr 1fr;gap:4rem;
  align-items:start;
  max-width:1100px;margin:0 auto;
  padding:4rem 4rem;
}
.contact-left h2{
  font-family:'Manrope',sans-serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  font-weight:800;line-height:1.05;margin-bottom:0.9rem;
}
.contact-left>p{
  color:var(--muted);font-size:1rem;line-height:1.75;
  font-weight:300;margin-bottom:2rem;
}
.cinfo{display:flex;flex-direction:column;gap:0.9rem;}
.citem{display:flex;align-items:center;gap:0.9rem;color:var(--muted);font-size:0.9rem;}
.cicon{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  background:rgba(123,92,245,0.1);border:1px solid rgba(123,92,245,0.2);
  display:flex;align-items:center;justify-content:center;font-size:1rem;
}
.citem strong{display:block;color:var(--text);font-weight:500;font-size:0.9rem;}

/* FORM */
.contact-form{
  background:var(--card);border:1px solid var(--border);
  border-radius:22px;padding:2rem;
}
.contact-form h3{
  font-family:'Manrope',sans-serif;font-weight:700;font-size:1.3rem;margin-bottom:1.5rem;
}
.fg{margin-bottom:1.2rem;}
.fg label{
  display:block;font-size:0.82rem;font-weight:500;
  color:var(--muted);margin-bottom:0.4rem;letter-spacing:0.02em;
}
.fg input,.fg textarea,.fg select{
  width:100%;background:var(--dark);
  border:1px solid var(--border);border-radius:12px;
  padding:0.8rem 1rem;color:var(--text);
  font-family:'DM Sans',sans-serif;font-size:0.9rem;
  transition:border-color 0.2s,box-shadow 0.2s;outline:none;
  -webkit-appearance:none;appearance:none;
}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(123,92,245,0.12);
}
.fg textarea{height:110px;resize:vertical;}
.fg select{cursor:pointer;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:0.8rem;}

.btn-submit{
  width:100%;
  background:linear-gradient(135deg,var(--violet),var(--cyan-dark));
  color:white;border:none;
  padding:0.95rem 2rem;border-radius:100px;
  font-family:'DM Sans',sans-serif;font-size:0.95rem;font-weight:500;
  cursor:pointer;
  transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s;
  box-shadow:0 0 25px rgba(123,92,245,0.3);
  -webkit-tap-highlight-color:transparent;
}
.btn-submit:hover{transform:translateY(-2px);box-shadow:0 0 45px rgba(123,92,245,0.5);}
.btn-submit:active{transform:scale(0.98);}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed;}

.success-msg{
  display:none;
  background:rgba(0,212,255,0.08);border:1px solid rgba(0,212,255,0.3);
  color:var(--cyan);padding:0.9rem 1.2rem;border-radius:12px;
  text-align:center;margin-top:0.8rem;font-size:0.9rem;
}

/* ===== FOOTER ===== */
footer{
  position:relative;z-index:2;
  padding:2.5rem 1.5rem 5.5rem; /* sotto resta posto per il pulsante Musica fisso */
  border-top:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;flex-wrap:wrap;
}
.footer-logo{display:flex;align-items:center;gap:0.6rem;text-decoration:none;}
.footer-logo img{height:32px;}
.footer-logo span{font-family:'Manrope',sans-serif;font-weight:700;font-size:1rem;}
footer p{color:var(--muted);font-size:0.82rem;}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(20px);}
  to{opacity:1;transform:translateY(0);}
}
.fade-in{opacity:0;transform:translateY(24px);transition:opacity 0.6s ease,transform 0.6s ease;}
.fade-in.visible{opacity:1;transform:translateY(0);}
/* === WORLD AI SECTION === */
.world-ai-section{padding:5rem 1.25rem 3rem;position:relative;overflow:hidden;margin-top:-4rem;}
.wai-stats{display:flex;justify-content:center;gap:2.5rem;margin:2rem 0 1rem;flex-wrap:wrap;}
.wai-stat{text-align:center;display:flex;flex-direction:column;gap:0.25rem;}
.wai-num{font-size:2.2rem;font-weight:800;font-family:'Manrope',sans-serif;background:linear-gradient(135deg,var(--violet-light),var(--cyan));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;}
.wai-label{font-size:0.78rem;color:var(--muted);max-width:130px;line-height:1.4;}
.wai-globe-wrap{display:flex;justify-content:center;align-items:center;margin:0 auto;}
.wai-globe-canvas{width:500px;height:500px;cursor:grab;touch-action:none;}
.wai-globe-canvas:active{cursor:grabbing;}
@keyframes waiDash{0%{stroke-dashoffset:1000;}100%{stroke-dashoffset:0;}}
@media(max-width:768px){
  .fade-in{opacity:1 !important;transform:none !important;}
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--dark);}
::-webkit-scrollbar-thumb{background:var(--violet);border-radius:3px;}

/* ===== RESPONSIVE ===== */
@media(max-width:900px){
  .featured-inner{flex-direction:column;}
  .featured-demo{width:100%;}
  .contact-inner{grid-template-columns:1fr;gap:3rem;}
}

@media(max-width:768px){
  .nav-links{display:none;}
  .hamburger{display:flex;}

  .hero{padding:5rem 1.25rem 2.5rem;padding-top:6.5rem;}
  .hero h1{font-size:clamp(1.85rem,8.2vw,2.5rem);}
  .hero-video-wrap{border-radius:16px;}

  .stats-wrap{padding:2.5rem 1.25rem;}
  .stats{grid-template-columns:repeat(2,1fr);gap:1.5rem;}
  .stat-number{font-size:2rem;}

  .section-wrap{padding:3rem 1.25rem;}

  .services-grid{grid-template-columns:1fr;}
  .service-card.featured{grid-column:1;}

  .process-grid{grid-template-columns:1fr 1fr;}

  .contact-inner{padding:3rem 1.25rem;gap:2.5rem;}
  .form-row{grid-template-columns:1fr;}

  footer{flex-direction:column;text-align:center;padding:2rem 1.25rem 5rem;}

  .btn-primary,.btn-secondary{
    width:100%;justify-content:center;font-size:1rem;padding:1rem 1.5rem;
  }
  .hero-buttons{flex-direction:column;align-items:center;}
}

@media(max-width:400px){
  .process-grid{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr;}
}

/* il logo apre la colonna del messaggio, allineato allo stesso asse del titolo */
.hero-logo{
  display:block;width:88px;
  margin:0 0 1.5rem;
  border-radius:16px;
  box-shadow:0 2px 8px rgba(0,0,0,0.3),0 12px 32px rgba(0,0,0,0.25);
  animation:fadeUp 0.8s ease both;
}
@media(max-width:900px){
  .hero-logo{width:56px;margin:0 auto 1rem;}
}


/* ===== CASI STUDIO V2 ===== */
#casi-studio { background: var(--dark); }
.casi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 3rem; }
.caso-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(139,92,246,0.2); border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; transition: transform 0.2s, border-color 0.2s; }
.caso-card:hover { transform: translateY(-4px); border-color: rgba(139,92,246,0.5); }
.caso-img-wrap { width: 100%; background: #1a1a2e; cursor: pointer; position: relative; overflow: hidden; }
.caso-img-wrap::after { content: '🔍'; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 2rem; opacity: 0; transition: opacity 0.2s; background: rgba(0,0,0,0.5); border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; }
.caso-img-wrap:hover::after { opacity: 1; }
.caso-img { width: 100%; height: auto; display: block; image-rendering: -webkit-optimize-contrast; }
.caso-body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; flex: 1; }
.caso-tag { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: #8b5cf6; font-weight: 700; }
.caso-problema { font-size: 0.95rem; color: #e2e8f0; font-style: italic; line-height: 1.5; font-weight: 400; margin: 0; }
.caso-soluzione { font-size: 0.88rem; color: #94a3b8; line-height: 1.6; margin: 0; }
.caso-dettaglio { font-size: 0.83rem; color: #64748b; line-height: 1.6; margin: 0; }
.caso-risultato { margin-top: auto; padding: 0.6rem 1rem; background: rgba(139,92,246,0.1); border-left: 3px solid #8b5cf6; color: #c4b5fd; font-size: 0.88rem; font-weight: 700; border-radius: 0 8px 8px 0; }
.caso-full { grid-column: 1 / -1; max-width: 640px; margin: 0 auto; width: 100%; }
/* Lightbox */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.92); z-index: 9999; align-items: center; justify-content: center; padding: 1rem; }
.lightbox-overlay.active { display: flex; }
.lightbox-overlay img { max-width: 95vw; max-height: 90vh; border-radius: 8px; object-fit: contain; box-shadow: 0 0 60px rgba(139,92,246,0.3); }
.lightbox-close { position: fixed; top: 1.5rem; right: 1.5rem; color: white; font-size: 2rem; cursor: pointer; background: rgba(255,255,255,0.1); border-radius: 50%; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: none; }
@media (max-width: 768px) {
  .casi-grid { grid-template-columns: 1fr; gap: 1.25rem; }
  .caso-full { grid-column: 1; max-width: 100%; }
  .caso-body { padding: 1.1rem; }
}

/* ============================================================
   TEMA CHIARO — la pagina passa al crema, i riquadri restano scuri.

   Non e' un'inversione: le due bande dove vive la luce (hero e globo)
   restano scure, perche' canvas, glow, beam e video sono effetti
   luce-su-buio e su fondo chiaro sparirebbero. Il ritmo diventa
   scuro > chiaro > scuro > chiaro, che e' anche il motivo per cui la
   pagina non sembra un tema invertito.

   Il crema non e' bianco puro: bianco contro card quasi nere e'
   durissimo, e il caldo contro il viola-ciano freddo del brand da' alla
   palette una tensione che nessun template ha.
   ============================================================ */
/* La pagina non e' piu' crema. Il crema era caldo, la hero e' fredda: due
   famiglie di colore che si respingono, ed e' quello lo stacco che si
   sentiva. La palette chiara viene ora ricavata dalla stessa tinta della
   hero, cambiando solo la luminosita' — una scala sola, quattro gradini:
   #080B14 hero, #0F1626 testo, #E9EDF5 pagina, #F6F8FC card. */
:root{
  --paper:#0A0E1A;           /* la pagina torna nella famiglia della hero */
  --paper-2:#0E1424;         /* banda alternata, per dividere le sezioni */
  --ink:#EDF1FA;
  --ink-muted:#8C97AD;
  --line:rgba(255,255,255,0.10);
  --violet-ink:#9B7FF8;      /* il viola del brand, alla luminosita' che serve sullo scuro */
  --ombra:0 1px 2px rgba(0,0,0,0.35),0 22px 48px -16px rgba(0,0,0,0.6);
}

body{background:var(--paper);color:var(--ink);}

/* blob sfocati e griglia viola vivevano sul buio: sul crema sono macchie */
.orb{display:none;}
.grid-bg{
  background-image:
    linear-gradient(rgba(20,19,27,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,19,27,0.05) 1px,transparent 1px);
}

/* --- la banda scura: solo la hero --- */
.hero{background:var(--dark);color:var(--text);}
.hero .section-title{color:var(--text);}

/* la sezione del globo e' chiara: il video di sfondo si vede solo qui,
   e su fondo scuro restava invisibile. Il globo e' stato ricolorato con
   tinte scure nel canvas, altrimenti azzurro e ciano sparivano. */
.world-ai-section{
  background:var(--paper);color:var(--ink);
  margin-top:0;padding-top:4rem;
}
.world-ai-section .section-title{color:var(--ink);}
.world-ai-section .section-sub,.world-ai-section .wai-label{color:var(--ink-muted);}
.world-ai-section .section-tag{color:var(--violet-ink);}
/* il numero era gradiente viola-ciano: sul crema il ciano non si legge */
.wai-num{
  background:none;-webkit-text-fill-color:currentColor;
  color:var(--violet-ink);
}

/* --- testo sulla carta --- */
.section-title,.contact-left h2{color:var(--ink);}
/* .process-step p resta fuori da questa lista: e' dentro una card scura */
.section-sub,.contact-left>p,.stat-label,footer p,.citem{color:var(--ink-muted);}
.section-tag{color:var(--violet-ink);}
.citem strong,.footer-trasparenza strong,.footer-logo span{color:var(--ink);}
.footer-trasparenza{color:var(--ink-muted);}

/* i numeri delle stat erano gradiente viola-ciano: il ciano sul crema
   non si legge, quindi restano pieni sul viola leggibile */
.stat-number{
  background:none;-webkit-text-fill-color:currentColor;
  color:var(--violet-ink);
}

/* separatori: filetti d'inchiostro, non di viola */
.stats-wrap,footer,.contact-section{border-color:var(--line);}
.contact-section{background:var(--paper-2);}

/* l'alone viola diventa un'ombra vera a due strati: su fondo chiaro un
   glow colorato sembra un errore di stampa */
.service-card,.process-step,.contact-form,.caso-card,.featured-demo{
  box-shadow:var(--ombra);
}
/* --- i riquadri chiari ---
   Le card quasi nere stavano in contrasto troppo duro con la pagina:
   passano a un avorio appena piu' scuro del fondo, cosi' si staccano per
   tono e non per urto. Non basta cambiare il fondo — testo, bordi, bolle
   della chat, campi del form e box dei casi vanno tutti ribaltati. */
:root{
  /* stesso principio di prima, invertito per il fondo scuro: la card e'
     un gradino piu' CHIARA della pagina, cosi' si stacca per elevazione
     e non per urto. Su scuro il gradino e' piccolo, non bianco. */
  --card-chiara:#141A2B;      /* la card */
  --card-chiara-2:#0E1424;    /* pannelli dentro la card: chat, immagini */
  --card-chiara-3:#0B1120;    /* campi e bolle, incassati */
  --linea-card:rgba(255,255,255,0.09);
  --viola-su-chiaro:#C4B5FD;  /* viola leggibile sopra una velatura viola */
}
.service-card,.process-step,.contact-form,.caso-card{
  background:var(--card-chiara);
  color:var(--ink);
  border-color:var(--linea-card);
}
.service-card.featured{background:linear-gradient(135deg,#1A2135 0%,#141A2B 100%);}
.service-card h3,.process-step h4,.contact-form h3,.caso-problema{color:var(--ink);}
.service-card p,.process-step p,.caso-soluzione,
.chat-label,.fg label,.service-pill{color:var(--ink-muted);}
.caso-dettaglio{color:#6B6874;}
/* con #servizi davanti, sennò vince la regola della sezione servizi */
#servizi .service-num,.caso-tag{color:var(--violet-ink);}
#servizi .service-pill{color:var(--ink-muted);border-top-color:var(--linea-card);}
/* il numero del processo sta su un cerchio in gradiente: resta bianco,
   sennò eredita l'inchiostro della card e scende a 1.04 */
.step-num{color:#fff;}
#servizi .service-index::after{background:linear-gradient(90deg,var(--linea-card),transparent);}
.service-card:hover{box-shadow:0 2px 4px rgba(20,19,27,0.10),0 26px 55px -14px rgba(91,63,214,0.28);}
.caso-card:hover{border-color:rgba(91,63,214,0.40);}

/* la chat di esempio: pannello e bolle in chiaro */
.featured-demo{background:var(--card-chiara-2);border-color:var(--linea-card);color:var(--ink);}
.bubble{border-color:var(--linea-card);}
.bubble.ai{background:var(--card-chiara-3);color:var(--ink);}
.bubble.user{
  background:rgba(91,63,214,0.12);
  border-color:rgba(91,63,214,0.28);
  color:var(--viola-su-chiaro);
}

/* casi studio: cornice dell'immagine e riquadro del risultato */
.caso-img-wrap{background:var(--card-chiara-2);}
.caso-risultato{
  background:rgba(91,63,214,0.10);
  border-left-color:var(--violet-ink);
  color:var(--viola-su-chiaro);
}

/* il form: campi chiari, non pozzi neri dentro una card chiara */
.fg input,.fg textarea,.fg select{
  background:var(--card-chiara-3);
  border-color:var(--linea-card);
  color:var(--ink);
}
.fg input::placeholder,.fg textarea::placeholder{color:#8B8896;}
.fg input:focus,.fg textarea:focus,.fg select:focus{
  border-color:var(--violet-ink);
  box-shadow:0 0 0 3px rgba(91,63,214,0.15);
}
.success-msg{background:rgba(0,138,168,0.10);border-color:rgba(0,138,168,0.35);color:#0A6070;}
/* il rosso dell'errore e' inline nel markup e sul chiaro stava a 2.9 */
#errorMsg{color:#B3261E !important;}

/* sulla card chiara l'alone del beam diventa una velatura sporca */
.beam-glow{opacity:0.22;}

/* ===== CARD SERVIZI: inclinazione 3D, freccia e chiamata all'azione =====
   Porting del componente tilt: la card ruota seguendo il mouse e i suoi
   elementi stanno su piani diversi, cosi' il movimento ha profondita'
   invece di essere una figurina che oscilla. Il molleggio dell'originale
   e' reso con una transizione corta all'uscita e nessuna durante il
   movimento: la stessa sensazione senza un ciclo di animazione acceso
   su sei card. */
#servizi .services-grid{perspective:1400px;}
#servizi .service-card{
  transform-style:preserve-3d;
  transform:translateY(var(--sy,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s,border-color 0.3s;
}
/* quanto ogni card sfila rispetto alle altre durante lo scorrimento:
   le strette corrono di piu', le larghe restano quasi ferme. E' la
   differenza fra loro a creare il movimento, non il movimento in se. */
#servizi .sp-5{--amp:26;}
#servizi .sp-7{--amp:14;}
#servizi .featured,#servizi .wide{--amp:6;}
#servizi .service-card[data-inclina="1"]{transition:box-shadow 0.3s,border-color 0.3s;}
#servizi .service-card:hover{
  box-shadow:0 4px 10px rgba(20,19,27,0.10),0 36px 70px -18px rgba(91,63,214,0.32);
}
/* i piani: piu' avanti il titolo, piu' indietro il corpo */
#servizi .service-index,#servizi .service-card h3{transform:translateZ(45px);}
#servizi .service-card p{transform:translateZ(26px);}
#servizi .service-pill,#servizi .svc-cta{transform:translateZ(34px);}
#servizi .svc-freccia{transform:translateZ(60px);}

/* velatura d'angolo: e' lo slot che ospitera' il video, e intanto da'
   alla card una direzione di luce invece di un fondo piatto */
#servizi .svc-cover{
  position:absolute;inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(91,63,214,0.13) 0%,transparent 55%),
    radial-gradient(90% 80% at 0% 100%,rgba(0,168,204,0.10) 0%,transparent 60%);
}

#servizi .svc-freccia{
  position:absolute;top:1.4rem;right:1.4rem;
  width:38px;height:38px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--violet-ink);
  background:rgba(255,255,255,0.55);
  border:1px solid var(--linea-card);
  backdrop-filter:blur(6px);
  transition:transform 0.25s cubic-bezier(0.22,1,0.36,1),background 0.25s;
}
#servizi .service-card:hover .svc-freccia{transform:translateZ(60px) scale(1.08) rotate(3deg);background:rgba(255,255,255,0.85);}

#servizi .svc-cta{
  display:inline-flex;align-items:center;gap:0.45rem;
  margin-top:1.1rem;
  padding:0.6rem 1.1rem;border-radius:100px;
  background:rgba(91,63,214,0.09);
  border:1px solid rgba(91,63,214,0.22);
  color:var(--violet-ink);
  font-size:0.82rem;font-weight:500;text-decoration:none;
  transition:background 0.25s,gap 0.25s;
}
#servizi .service-card:hover .svc-cta{background:rgba(91,63,214,0.16);gap:0.7rem;}
#servizi .svc-cta svg{transition:transform 0.25s;}
#servizi .service-card:hover .svc-cta svg{transform:translateX(2px);}

/* la freccia non deve finire sotto il numero d'indice */
#servizi .service-index{padding-right:3.2rem;}
#servizi .wide .service-index{padding-right:3.2rem;}

@media(max-width:900px){
  #servizi .services-grid{perspective:none;}
  #servizi .service-card{transform:none;}
  #servizi .service-index,#servizi .service-card h3,
  #servizi .service-card p,#servizi .service-pill,
  #servizi .svc-cta,#servizi .svc-freccia{transform:none;}
  #servizi .svc-freccia{top:1.1rem;right:1.1rem;}
}
@media(prefers-reduced-motion:reduce){
  #servizi .service-card{transform:none !important;transition:none;}
}

/* --- lo stesso effetto sulle altre carte del sito --- */
.casi-grid,.process-grid{perspective:1400px;}
.caso-card,.process-step{
  transform-style:preserve-3d;
  transform:translateY(var(--sy,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1),box-shadow 0.3s,border-color 0.3s;
}
/* nei casi studio sfalso le colonne: pari e dispari corrono diverso */
.casi-grid>.caso-card:nth-child(odd){--amp:22;}
.casi-grid>.caso-card:nth-child(even){--amp:8;}
.caso-full{--amp:4;}
.process-step:nth-child(odd){--amp:18;}
.process-step:nth-child(even){--amp:7;}
.caso-card[data-inclina="1"],.process-step[data-inclina="1"]{transition:box-shadow 0.3s,border-color 0.3s;}
/* il vecchio sollevamento al passaggio andava in conflitto con la rotazione */
.caso-card:hover{transform:translateY(var(--sy,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.caso-card:hover,.process-step:hover{
  box-shadow:0 4px 10px rgba(15,22,38,0.10),0 36px 70px -18px rgba(91,63,214,0.28);
}
.caso-body>*{transform:translateZ(24px);}
.caso-tag{transform:translateZ(38px);}
.process-step .step-num{transform:translateZ(45px);}
.process-step h4{transform:translateZ(30px);}
.process-step p{transform:translateZ(18px);}

@media(max-width:900px){
  .casi-grid,.process-grid{perspective:none;}
  .caso-card,.process-step,
  .caso-body>*,.caso-tag,
  .process-step .step-num,.process-step h4,.process-step p{transform:none;}
}
@media(prefers-reduced-motion:reduce){
  .caso-card,.process-step{transform:none !important;transition:none;}
}

/* ===== VOCE TIPOGRAFICA DEI TITOLI =====
   Syne e' un grottesco geometrico: e' il carattere che finisce su meta'
   dei siti "tech" generati, e infatti si riconosceva. Al suo posto un
   serif con carattere per titoli e numeri. Su un sito di automazioni IA
   il serif e' la scelta che una macchina prudente non farebbe — ed e'
   esattamente per questo che non sembra fatto da una macchina.
   Il corpo resta DM Sans. Dove prima restava Syne (titolo della hero,
   menu, pulsanti) ora c'e' Manrope: moderno, non "da sito generato". */
.section-title,
.contact-left h2,
.contact-form h3,
#servizi .service-card h3,
.process-step h4,
.caso-card h3{
  font-family:'Fraunces',Georgia,serif;
  font-weight:600;
  letter-spacing:-0.015em;
}
/* i numeri passano allo stesso serif: cifre grandi in serif si leggono
   come un bilancio, non come un cruscotto */
.stat-number,.wai-num,.step-num,#servizi .service-num{
  font-family:'Fraunces',Georgia,serif;
  font-weight:800;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
#servizi .service-num{font-weight:600;font-size:1rem;}

/* ===== CAROSELLO DEI SERVIZI =====
   Il difetto del carosello e' che nasconde: chi arriva non sa quanta
   offerta ci sia dietro il bordo. Qui la barra di avanzamento lo dice a
   colpo d'occhio, le card sono tagliate di proposito sul lato destro
   (una fetta visibile invita a spingere) e lo scorrimento resta quello
   nativo — con la rotellina, il trackpad, il dito e le frecce. */
#servizi .services-grid{
  display:flex;
  grid-template-columns:none;
  gap:1.25rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  /* respiro perche' il contenitore non tagli rotazione e alone del beam */
  padding:2.5rem 0.5rem 2.5rem;
  margin:-2.5rem -0.5rem -1.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
#servizi .services-grid::-webkit-scrollbar{display:none;}
/* le card entrano in numero intero: tre affiancate riempiono esattamente
   la pista, cosi' nessuna resta tagliata a meta' sul bordo */
#servizi .service-card{
  flex:0 0 calc((100% - 2.5rem)/3);
  grid-column:auto;
  scroll-snap-align:start;
  padding:2rem;
}
@media(max-width:1100px){
  #servizi .service-card{flex:0 0 calc((100% - 1.25rem)/2);}
}
@media(max-width:700px){
  #servizi .service-card{flex:0 0 100%;}
}

/* ===== PISTA E FRECCE AI LATI ===== */
.car-pista{position:relative;}
.car-frecce{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:space-between;
  pointer-events:none;
}
.car-frecce .car-btn{pointer-events:auto;}
.car-btn[data-verso="-1"]{margin-left:-1.3rem;}
.car-btn[data-verso="1"]{margin-right:-1.3rem;}
.car-comandi{gap:0;}

/* ===== CAROSELLO DEI CASI STUDIO: stessa meccanica ===== */
.casi-grid[data-carosello]{
  display:flex;
  grid-template-columns:none;
  gap:1.5rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  padding:2.5rem 0.5rem;
  margin:-2.5rem -0.5rem -1.5rem;
  scrollbar-width:none;-ms-overflow-style:none;
  overscroll-behavior-x:contain;
}
.casi-grid[data-carosello]::-webkit-scrollbar{display:none;}
.casi-grid[data-carosello]>.caso-card{
  flex:0 0 calc((100% - 1.5rem)/2);
  scroll-snap-align:start;
}
.casi-grid[data-carosello]>.caso-full{max-width:none;margin:0;}
@media(max-width:700px){
  .casi-grid[data-carosello]>.caso-card{flex:0 0 100%;}
}

/* al tocco lo scorrimento e' il dito: le frecce sparirebbero sotto il pollice */
@media(max-width:700px){
  .car-frecce{display:none;}
}
/* nel carosello tutte le card hanno la stessa misura: le composizioni
   speciali della griglia non hanno piu' senso */
#servizi .service-card.wide{display:block;}
#servizi .featured-inner{flex-direction:column;gap:1.4rem;}
#servizi .wide h3,#servizi .wide p,#servizi .wide .service-pill,
#servizi .wide .service-index{grid-column:auto;grid-row:auto;}

.car-comandi{
  display:flex;align-items:center;gap:1.5rem;
  margin-top:2rem;
}
.car-barra{
  flex:1;height:2px;border-radius:2px;
  background:var(--line);overflow:hidden;
}
.car-barra span{
  display:block;height:100%;width:20%;
  background:linear-gradient(90deg,var(--violet),var(--cyan));
  border-radius:2px;
  transition:width 0.25s ease,transform 0.25s ease;
}
.car-frecce{display:flex;gap:0.6rem;}
.car-btn{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--card-chiara);
  border:1px solid var(--linea-card);
  color:var(--ink);cursor:pointer;
  transition:background 0.2s,border-color 0.2s,transform 0.2s;
}
.car-btn:hover:not(:disabled){background:#1B2237;border-color:var(--border2);transform:translateY(-1px);}
.car-btn:disabled{opacity:0.35;cursor:default;}
.car-btn:focus-visible{outline:2px solid var(--violet-light);outline-offset:3px;}

@media(max-width:900px){
  #servizi .services-grid{gap:1rem;padding:1.5rem 0.25rem;margin:-1.5rem -0.25rem -1rem;}
  #servizi .service-card{flex:0 0 min(82vw,320px);padding:1.75rem;}
  .car-comandi{margin-top:1.5rem;}
}
@media(prefers-reduced-motion:reduce){
  #servizi .services-grid{scroll-behavior:auto;}
}

/* ===== RITORNO ALLO SCURO: valori che erano cablati per il chiaro ===== */
.grid-bg{
  background-image:
    linear-gradient(rgba(123,92,245,0.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(123,92,245,0.05) 1px,transparent 1px);
}
.beam-glow{opacity:0.35;}          /* sullo scuro l'alone torna a essere luce */
.caso-dettaglio{color:#94A0B5;}
.fg input::placeholder,.fg textarea::placeholder{color:#6E7A90;}
.success-msg{background:rgba(0,212,255,0.08);border-color:rgba(0,212,255,0.30);color:var(--cyan);}
#errorMsg{color:#FF8A80 !important;}
.bubble.user{background:rgba(123,92,245,0.18);border-color:rgba(123,92,245,0.35);}
.caso-risultato{background:rgba(123,92,245,0.14);}
.cicon{background:rgba(123,92,245,0.14);border-color:rgba(123,92,245,0.30);}
#servizi .svc-cta{background:rgba(123,92,245,0.14);border-color:rgba(123,92,245,0.32);}
#servizi .service-card:hover .svc-cta{background:rgba(123,92,245,0.24);}
#servizi .svc-freccia{background:rgba(255,255,255,0.07);}
#servizi .service-card:hover .svc-freccia{background:rgba(255,255,255,0.15);}
/* ===== CARD SERVIZI CON CLIP A TUTTA SUPERFICIE =====
   Le clip sono WebP animati costruiti alla misura esatta della card:
   partono da soli come un'immagine, senza politiche di autoplay da
   aggirare e senza JavaScript, e funzionano anche al tocco. Il velo
   che scurisce verso il basso non e' decorazione: e' quello che tiene
   leggibile il testo mentre sotto scorre un'immagine che cambia. */
#servizi .service-card{
  min-height:27rem;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.75rem;
}
#servizi .svc-cover{
  background:none;
  overflow:hidden;
  border-radius:inherit;
}
#servizi .svc-clip{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  transition:transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
#servizi .service-card:hover .svc-clip{transform:scale(1.05);}
#servizi .svc-cover::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,
    rgba(8,11,20,0.42) 0%,
    rgba(8,11,20,0.72) 38%,
    rgba(8,11,20,0.93) 68%,
    rgba(8,11,20,0.98) 100%);
}

/* Il testo deve stare SOPRA la copertina sempre, non solo quando il tilt
   lo porta avanti: .svc-cover e' posizionata, titolo e paragrafo no, e fra
   pari grado vince sempre l'elemento posizionato. Su desktop il translateZ
   mascherava il problema; su mobile, dove le trasformazioni sono spente,
   la copertina si mangiava il testo. */
#servizi .svc-cover{z-index:0;}
#servizi .service-index,
#servizi .service-card h3,
#servizi .service-card p,
#servizi .service-pill,
#servizi .svc-cta,
#servizi .svc-freccia{position:relative;z-index:2;}

/* e una lieve ombra, perche' sotto scorre un video: la luminosita' cambia
   di fotogramma in fotogramma e il velo da solo non basta a garantirla */
#servizi .service-card h3{text-shadow:0 2px 14px rgba(6,9,18,0.75);}
/* la descrizione era nel grigio dei testi secondari, ma qui sotto scorre
   un video: quel grigio spariva. Va portata quasi al bianco, con l'ombra
   che la tiene staccata dai fotogrammi piu' chiari. Resta un gradino
   sotto al titolo — sennò titolo e testo pesano uguale e la gerarchia
   della card si appiattisce. */
#servizi .service-card p{
  color:rgba(244,247,255,0.94);
  font-weight:400;
  text-shadow:0 1px 12px rgba(6,9,18,0.9),0 0 26px rgba(6,9,18,0.65);
}
/* il numero d'indice sale in cima, sopra la clip */
#servizi .service-index{
  position:absolute;top:1.5rem;left:1.75rem;right:1.75rem;
  margin:0;
}
/* nella card in movimento la chat di esempio non si legge: il testo del
   servizio prende il suo posto, come nelle altre cinque */
#servizi .featured-demo{display:none;}
#servizi .featured-inner{display:block;}

/* ===== DIVISIONE FRA LE SEZIONI =====
   Due strumenti insieme, perche' da soli non bastano: le sezioni si
   alternano fra due toni vicini — si sente il cambio senza vedere una
   riga netta — e ognuna porta un filetto sottile in cima. Il respiro
   verticale sale a 7rem: e' lo spazio, piu' del colore, a dire dove
   finisce un discorso e ne comincia un altro. */
.section-wrap{padding:7rem 4rem;}
#servizi,#come-funziona,.world-ai-section{background:var(--paper);}
#casi-studio,.spline-section,#siti-web{background:var(--paper-2);}
.contact-section{background:var(--paper);}
#casi-studio,#come-funziona,.spline-section,.world-ai-section,
#siti-web,.contact-section,.stats-wrap{border-top:1px solid var(--line);}
.world-ai-section{padding:7rem 1.5rem;}

@media(max-width:900px){
  .section-wrap{padding:4rem 1.25rem;}
  .world-ai-section{padding:4rem 1.25rem;}
}

/* l'icona di contatto sul crema */
.cicon{background:rgba(91,63,214,0.10);border-color:rgba(91,63,214,0.22);}


/* la card Spline e' un riquadro scuro a tutti gli effetti */
.spline-card{
  color:var(--text);
  border-color:rgba(20,19,27,0.10);
  box-shadow:var(--ombra);
}
.spline-card .section-title{color:var(--text);}
.spline-card .section-sub,.spline-card .spline-stat-l{color:var(--muted);}
.spline-card .section-tag{color:var(--cyan);}

/* ===== SFONDO VIDEO DELLA HERO =====
   Sostituisce il canvas neurale dove il video gira: due sfondi animati
   sovrapposti sono rumore, non ricchezza. Sotto i 901px il video non
   parte e il canvas resta al suo posto. */
.hero-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0.70;
  z-index:0;pointer-events:none;
}
/* Il velo resta denso solo a sinistra, sotto al messaggio: e' li' che il
   testo deve reggere anche quando passa una traccia luminosa. Verso destra
   si dirada e il circuito si vede davvero. */
.hero-bg-velo{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(8,11,20,0.82) 0%,rgba(8,11,20,0.62) 48%,rgba(8,11,20,0.45) 100%),
    linear-gradient(180deg,var(--dark) 0%,rgba(8,11,20,0.20) 28%,rgba(8,11,20,0.30) 76%,var(--dark) 100%);
}
/* da computer il logo lo fa il video (i droni che lo montano): quello piccolo sparisce.
   Da telefono il video non parte, quindi il logo piccolo resta. */
@media(min-width:901px){.hero.con-video .hero-logo{display:none;}}
/* col video attivo il canvas neurale si spegne */
.hero.con-video #heroNeuro{display:none;}

/* ===== IL MONDO SI STA ADEGUANDO — due colonne =====
   Era una pila centrata: tag, titolo, tre percentuali in fila e globo
   sotto. Tutto sullo stesso asse, tutto della stessa misura, nessuna
   tensione. Ora il discorso e i numeri stanno a sinistra su un asse
   solo, e il globo prende la destra come oggetto con cui si interagisce
   davvero — si trascina, e ora lo dice. */
#world-ai{padding:5rem 1.5rem;}
#world-ai .wai-grid{
  max-width:1180px;margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:clamp(2.5rem,5vw,5rem);
  align-items:center;
}
#world-ai .wai-testo{min-width:0;}
#world-ai .section-sub{margin-bottom:0;max-width:42ch;}

/* le percentuali diventano una scheda dati incolonnata, non tre isole
   centrate: cosi' si leggono in sequenza e i numeri si allineano */
#world-ai .wai-stats{display:block;margin:2.5rem 0 0;}
#world-ai .wai-stat{
  display:flex;flex-direction:row;align-items:baseline;gap:1.2rem;
  text-align:left;
  padding:1rem 0;
  border-top:1px solid var(--line);
}
#world-ai .wai-stat:last-child{border-bottom:1px solid var(--line);}
#world-ai .wai-num{
  font-size:2.4rem;line-height:1;
  min-width:4.4rem;
  font-variant-numeric:tabular-nums;   /* sennò le cifre ballano fra una riga e l'altra */
}
#world-ai .wai-label{max-width:36ch;font-size:0.9rem;}

#world-ai .wai-globe-wrap{
  flex-direction:column;gap:0.9rem;
  justify-self:end;margin:0;
}
#world-ai .wai-globe-canvas{width:min(44vw,470px);height:min(44vw,470px);}
#world-ai .wai-hint{
  font-family:'Space Mono',monospace;
  font-size:0.68rem;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--ink-muted);
}

@media(max-width:900px){
  #world-ai .wai-grid{grid-template-columns:1fr;gap:2.5rem;}
  #world-ai .wai-globe-wrap{justify-self:center;}
  #world-ai .wai-stat{padding:0.85rem 0;gap:1rem;}
  #world-ai .wai-num{font-size:2rem;min-width:3.6rem;}
  #world-ai .wai-globe-canvas{width:min(78vw,340px);height:min(78vw,340px);}
}

/* barra e menu restano scuri: galleggiano sulla carta *
/* la barra si fa piu' densa: sopra il crema l'85% la schiariva e i link
   scendevano a 4.05 di contrasto */
nav{background:rgba(8,11,20,0.94);}
.nav-links a{color:#C7CEDB;}
/* questo tag vive dentro la card scura, non sulla carta *

/* ===== PAGINE DEI SERVIZI (una pagina per voce del menu del robot) ===== */
.pg-testa{position:relative;padding:clamp(7.5rem,14vw,10rem) clamp(1.25rem,4vw,2.5rem) clamp(1.5rem,4vw,2.5rem);max-width:1180px;margin:0 auto}
.pg-torna{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1rem;border-radius:100px;border:1px solid rgba(255,255,255,.2);
  color:#fff;text-decoration:none;font:600 .9rem 'Bricolage Grotesque',sans-serif;background:rgba(255,255,255,.04);transition:background .2s,border-color .2s,transform .2s}
.pg-torna:hover{background:rgba(108,99,255,.2);border-color:#9B7FF8;transform:translateX(-3px)}
.pg-tag{font-family:'Space Mono',monospace;font-size:.75rem;letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-top:2rem}
.pg-tit{font:800 clamp(2.6rem,7vw,5.6rem)/.98 'Bricolage Grotesque',sans-serif;letter-spacing:-.04em;margin:.8rem 0 0;color:#fff}
.pg-tit em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;font-size:1.06em;
  background:linear-gradient(100deg,#9B7FF8,#4DD9E0 50%,#ff6ec7);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-sub{color:rgba(255,255,255,.85);font-size:clamp(1rem,1.4vw,1.15rem);line-height:1.7;max-width:44rem;margin:1.2rem 0 0}
.svz-pagina{padding-top:0}
.pg-cta{text-align:center;padding:clamp(4rem,9vw,7rem) 1.25rem}
.pg-cta h2{font:800 clamp(2rem,4.5vw,3.4rem)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;margin:0;color:#fff}
.pg-cta h2 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;color:#9B7FF8}
.pg-cta p{color:rgba(255,255,255,.75);margin:1rem auto 0;max-width:36rem;line-height:1.6}
.pg-cta .azioni{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem}

/* ============================================================
   TEMA CHIARO «avorio e blu notte» (23/09/2026)
   Le sezioni diventano chiare: fondo avorio caldo, schede bianche con
   ombre morbide, testi blu notte, il viola-ciano solo come accento.
   Restano scuri i momenti «cinema»: ingresso, hero, vetrina dei siti,
   sala giochi arcade, card del robot 3D. Il piè di pagina e' blu notte.
   Le regole con «html» davanti battono gli stili scritti nelle sezioni.
   ============================================================ */
:root{
  --paper:#F7F5F0;--paper-2:#EFEBE3;
  --ink:#14213D;--ink-muted:#556076;
  --line:rgba(20,33,61,.10);
  --violet-ink:#5B4BDB;
  --ombra:0 1px 2px rgba(20,33,61,.05),0 20px 44px -20px rgba(20,33,61,.25);
  --card-chiara:#FFFFFF;--card-chiara-2:#F3F0EA;--card-chiara-3:#F7F5F0;
  --linea-card:rgba(20,33,61,.10);--viola-su-chiaro:#5B4BDB;
  --acqua:#0f8f9e;
}
body{background:var(--paper);color:var(--ink);}
.grid-bg{display:none;}
::-webkit-scrollbar-track{background:var(--paper-2);}
/* pagine dei servizi */
html .pg-torna{color:var(--ink);border-color:rgba(20,33,61,.18);background:#fff;box-shadow:0 6px 18px -10px rgba(20,33,61,.3)}
html .pg-torna:hover{background:#fff;border-color:var(--violet-ink);color:var(--violet-ink)}
html .pg-tag,html .ch-tag{color:var(--acqua)}
html .pg-tit,html .pg-cta h2,html .ch-tit{color:var(--ink)}
html .pg-tit em,html .ch-tit em{background:linear-gradient(100deg,#5B4BDB,#0f8f9e 55%,#c2398f);-webkit-background-clip:text;background-clip:text;color:transparent}
html .pg-sub,html .pg-cta p,html .ch-sub{color:var(--ink-muted)}
html .pg-cta h2 em{color:var(--violet-ink)}
html .pg-cta{background:linear-gradient(180deg,transparent,rgba(91,75,219,.06))}
/* pulsante secondario su fondo chiaro (fuori dalla hero, che resta scura) */
html .btn-secondary{color:var(--ink);border-color:rgba(20,33,61,.22);background:#fff}
html .hero .btn-secondary,html .sw .btn-secondary{color:#fff;border-color:rgba(255,255,255,.22);background:transparent}
/* righe dei servizi */
html .svz-tit{color:var(--ink)}
html .svz-desc{color:var(--ink-muted)}
html .svz-num{color:var(--acqua)} html .svz-num span{color:var(--ink-muted)}
html .svz-punti li{color:var(--ink)} html .svz-punti svg{color:var(--acqua)}
html .svz-cta{color:var(--ink);background:rgba(91,75,219,.07);border-color:rgba(91,75,219,.35)}
html .svz-cta:hover{background:rgba(91,75,219,.14);border-color:var(--violet-ink)}
html .svz-media{background:#e9e5dd;box-shadow:0 30px 60px -28px rgba(20,33,61,.45),0 0 0 1px rgba(20,33,61,.08)}
/* chiusura della home */
html .ch{background:var(--paper)}
html .ch::before{background:radial-gradient(ellipse 60% 45% at 50% 30%,rgba(91,75,219,.10),transparent 70%),radial-gradient(ellipse 40% 35% at 70% 60%,rgba(15,143,158,.08),transparent 70%)}
html .ch-card{background:#fff;border-color:var(--line);box-shadow:var(--ombra)}
html .ch-card::after{background:radial-gradient(circle,rgba(91,75,219,.10),transparent 70%)}
html .ch-card h3{color:var(--ink)} html .ch-card p{color:var(--ink-muted)}
/* contatti */
html .contact-section{background:var(--paper-2)}
html .contact-left h2{color:var(--ink)}
html .citem strong{color:var(--ink)}
html .cicon{background:#fff;border-color:var(--line)}
html .contact-form{background:#fff}
html .fg input,html .fg textarea,html .fg select{background:var(--paper);color:var(--ink);border-color:rgba(20,33,61,.14)}
html .fg input::placeholder,html .fg textarea::placeholder{color:#8a93a6}
html .form-presa{color:var(--ink-muted)} html .form-presa a{color:var(--violet-ink)}
/* numeri, processo, casi studio, globo */
html .stat-number,html .wai-num{color:var(--violet-ink)}
html .process-step p{color:var(--ink-muted)}
/* piè di pagina blu notte */
html footer{background:#101A33;border-top:0}
html footer p,html .footer-trasparenza{color:#AEB6CC}
html footer a{color:#dfe4f2}
html .footer-logo span,html .footer-trasparenza strong{color:#fff}
/* il menu in alto resta scuro: sul chiaro fa da cornice */

/* ===== PIE' DI PAGINA con la firma FUTURE AI ===== */
html footer.ft{display:block;background:#0E1730;color:#C9D1E3;padding:clamp(3.5rem,7vw,5rem) clamp(1.25rem,4vw,2.5rem) 6rem;border:0;text-align:left}
.ft-griglia{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.4fr .9fr .9fr 1.4fr;gap:clamp(1.8rem,4vw,3rem)}
.ft-logo{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;color:#fff;font:800 1.3rem 'Bricolage Grotesque',sans-serif;letter-spacing:-.01em}
.ft-logo img{width:40px;height:40px;border-radius:10px}
.ft-logo b{background:linear-gradient(90deg,#6C63FF,#4DD9E0);-webkit-background-clip:text;background-clip:text;color:transparent}
html .ft p{color:#AEB6CC;font-size:.92rem;line-height:1.65;margin:1rem 0 0}
.ft-col h3{font:700 .95rem 'Bricolage Grotesque',sans-serif;color:#fff;margin:0 0 1rem;letter-spacing:.01em}
.ft-col ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
html .ft-col a{color:#C9D1E3;text-decoration:none;font-size:.92rem;display:inline-flex;align-items:center;gap:.5rem;transition:color .2s}
html .ft-col a:hover{color:#4DD9E0}
html .ft-richiamo p{margin-top:0}
.ft-campo{display:flex;margin-top:1rem;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);max-width:24rem}
.ft-campo input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:.8rem .9rem;font:inherit;font-size:.92rem}
.ft-campo input:focus{outline:none}.ft-campo:focus-within{border-color:#4DD9E0}
.ft-campo input::placeholder{color:#8A93AA}
.ft-campo button{border:0;cursor:pointer;padding:0 1.1rem;font:700 .9rem 'Bricolage Grotesque',sans-serif;color:#fff;background:linear-gradient(90deg,#6C63FF,#1ea5b3);transition:filter .2s}
.ft-campo button:hover{filter:brightness(1.1)}.ft-campo button:disabled{opacity:.6}
.ft-presa{display:flex;gap:.5rem;align-items:flex-start;margin-top:.7rem;font-size:.78rem;color:#98A1B8;line-height:1.45;max-width:24rem;cursor:pointer}
.ft-presa input{margin-top:.15rem;accent-color:#6C63FF;flex:none}
html .ft-presa a{color:#C9D1E3;text-decoration:underline}
.ft-esito{margin-top:.6rem;font-size:.85rem;font-weight:600;min-height:1.2em}
.ft-esito.ok{color:#7fe0a5}.ft-esito.no{color:#ff9b9b}
.ft-firma-riga{max-width:1180px;margin:clamp(2.5rem,5vw,3.5rem) auto 0;padding-top:2rem;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;color:#fff}
.fai-firma{display:inline-flex;flex-direction:column;gap:.9em;align-items:center;text-decoration:none;color:inherit;transition:opacity .22s,transform .22s}
.fai-firma:hover{opacity:.78;transform:translateY(-2px)}
.fai-firma__occhiello{font-size:11px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;line-height:1;opacity:.55}
.fai-firma__segno{display:block;width:clamp(140px,15vw,180px);height:auto;color:inherit}
.ft-legale{max-width:1180px;margin:1.8rem auto 0;text-align:center}
html .ft-legale p{font-size:.78rem;margin:.4rem auto 0;max-width:62rem}
html .ft-legale a{color:#C9D1E3}
@media(max-width:900px){.ft-griglia{grid-template-columns:1fr 1fr}.ft-marchio,.ft-richiamo{grid-column:1/-1}}
@media(max-width:520px){.ft-griglia{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.fai-firma{transition:none}.fai-firma:hover{transform:none}}

/* ===== HERO DA TELEFONO: il logo dei droni come insegna in cima ===== */
@media(max-width:900px){
  .hero.con-video{padding-top:calc(4.2rem + 60vw)}
  .hero.con-video .hero-logo{display:none}
  html .hero.con-video .hero-bg{position:absolute;inset:auto;top:3.6rem;left:-10vw;width:120vw;height:67.5vw;object-fit:cover;opacity:1;
    -webkit-mask:radial-gradient(ellipse 48% 50% at 50% 50%,#000 60%,transparent 100%);mask:radial-gradient(ellipse 48% 50% at 50% 50%,#000 60%,transparent 100%)}
  html .hero.con-video .hero-bg-velo{background:linear-gradient(180deg,var(--dark) 0%,rgba(8,11,20,0) 8%,rgba(8,11,20,0) 42%,var(--dark) 58%,var(--dark) 100%)}
}

/* menu a tutto schermo: 11 voci, una colonna sola su telefono, due da computer se serve */
html .menu-link-testo{font-size:clamp(1.45rem,3.4vh,2.3rem);line-height:1.1}
html .menu-link{padding:.2rem 0}
@media(min-width:901px) and (max-height:820px){html .menu-voci{display:grid;grid-template-columns:1fr 1fr;column-gap:2.5rem}}

/* ============================================================
   PAGINE DEI SERVIZI — impaginazione ricca (23/09/2026)
   apertura a due colonne, schede, passi, settori, domande, questionario
   ============================================================ */
.sv-hero{position:relative;overflow:hidden;padding:clamp(6.5rem,11vw,8.5rem) clamp(1.25rem,4vw,2.5rem) clamp(3rem,6vw,5rem)}
.sv-hero::before{content:"";position:absolute;inset:-30% -10% auto 35%;height:120%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(91,75,219,.16),transparent 55%),radial-gradient(circle at 30% 70%,rgba(15,143,158,.12),transparent 55%)}
.sv-hero-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.sv-hero .pg-tag{margin-top:1.8rem}
.sv-hero .pg-tit{font-size:clamp(2.5rem,5.4vw,4.6rem)}
.sv-azioni{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.sv-punti{list-style:none;margin:1.6rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem .6rem}
.sv-punti li{display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .75rem;border-radius:100px;font-size:.86rem;font-weight:500;
  color:var(--ink);background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px -8px rgba(20,33,61,.25)}
.sv-punti svg{color:var(--acqua)}
.sv-hero-media{position:relative;justify-self:center;width:min(100%,380px)}
.sv-cornice{position:relative;aspect-ratio:330/384;border-radius:28px;overflow:hidden;background:#e9e5dd;transform:rotate(1.5deg);
  box-shadow:0 0 0 8px #fff,0 40px 80px -30px rgba(20,33,61,.5),0 0 0 9px var(--line)}
.sv-cornice video{width:100%;height:100%;object-fit:cover;display:block}
.sv-bolla{position:absolute;display:flex;align-items:center;gap:.6rem;padding:.65rem .9rem;border-radius:16px;background:#fff;color:var(--ink);
  box-shadow:0 18px 40px -16px rgba(20,33,61,.45);border:1px solid var(--line);animation:svGalleggia 5s ease-in-out infinite;max-width:15rem}
.sv-bolla b{display:block;font:700 .88rem 'Bricolage Grotesque',sans-serif}
.sv-bolla small{display:block;font-size:.75rem;color:var(--ink-muted)}
.sv-bolla-ico{width:34px;height:34px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:1.05rem;background:linear-gradient(135deg,rgba(91,75,219,.14),rgba(15,143,158,.14))}
.sv-bolla--a{left:-14%;top:12%}
.sv-bolla--b{right:-12%;bottom:10%;animation-delay:-2.5s}
@keyframes svGalleggia{50%{transform:translateY(-8px)}}
.sv-sez{padding:clamp(3.5rem,8vw,6rem) clamp(1.25rem,4vw,2.5rem)}
.sv-sez--alt{background:var(--paper-2)}
.sv-in{max-width:1180px;margin:0 auto}
.sv-stretto{max-width:820px}
.sv-testa{text-align:center;max-width:44rem;margin:0 auto clamp(2rem,4vw,3rem)}
.sv-h2{font:800 clamp(2rem,4.2vw,3.2rem)/1.04 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;color:var(--ink);margin:.7rem 0 0}
.sv-h2 em{font-family:'Instrument Serif',Georgia,serif;font-weight:400;font-style:italic;font-size:1.06em;
  background:linear-gradient(100deg,#5B4BDB,#0f8f9e 60%,#c2398f);-webkit-background-clip:text;background-clip:text;color:transparent}
.sv-griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.sv-card{position:relative;padding:1.6rem 1.4rem;border-radius:20px;background:#fff;border:1px solid var(--line);box-shadow:var(--ombra);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .3s;overflow:hidden}
.sv-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#5B4BDB,#0f8f9e);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.sv-card:hover{transform:translateY(-5px);box-shadow:0 30px 60px -28px rgba(20,33,61,.45);border-color:rgba(91,75,219,.25)}
.sv-card:hover::after{transform:scaleX(1)}
.sv-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:linear-gradient(135deg,rgba(91,75,219,.12),rgba(15,143,158,.12))}
.sv-card h3{font:800 1.15rem/1.2 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:var(--ink);margin:1rem 0 0}
.sv-card p{color:var(--ink-muted);font-size:.94rem;line-height:1.6;margin:.5rem 0 0}
.sv-passi{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;counter-reset:p;position:relative}
.sv-passi::before{content:"";position:absolute;left:6%;right:6%;top:26px;height:2px;background:linear-gradient(90deg,rgba(91,75,219,.35),rgba(15,143,158,.35))}
.sv-passo{position:relative;text-align:center;padding:0 .4rem}
.sv-n{position:relative;display:inline-grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--violet-ink);
  font:800 1rem 'Bricolage Grotesque',sans-serif;box-shadow:0 0 0 6px var(--paper-2),0 10px 24px -10px rgba(91,75,219,.6);border:2px solid rgba(91,75,219,.4)}
.sv-passo h3{font:800 1.08rem/1.25 'Bricolage Grotesque',sans-serif;color:var(--ink);margin:1.1rem 0 0}
.sv-passo p{color:var(--ink-muted);font-size:.92rem;line-height:1.55;margin:.45rem 0 0}
.sv-chip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:52rem;margin:0 auto}
.sv-chip li{padding:.6rem 1.05rem;border-radius:100px;background:#fff;border:1px solid var(--line);color:var(--ink);font-weight:500;font-size:.95rem;
  box-shadow:0 6px 16px -10px rgba(20,33,61,.3);transition:transform .2s,border-color .2s}
.sv-chip li:hover{transform:translateY(-2px);border-color:var(--violet-ink)}
.sv-faqs{display:grid;gap:.7rem}
.sv-faq{border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:0 6px 18px -12px rgba(20,33,61,.3);overflow:hidden}
.sv-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.1rem 1.3rem;
  font:700 1.02rem 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.sv-faq summary::-webkit-details-marker{display:none}
.sv-faq summary span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:rgba(91,75,219,.1);color:var(--violet-ink);font-size:1.2rem;transition:transform .3s}
.sv-faq[open] summary span{transform:rotate(45deg)}
.sv-faq p{margin:0;padding:0 1.3rem 1.2rem;color:var(--ink-muted);line-height:1.65}
.sv-rivela{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.8,.2,1),transform .7s cubic-bezier(.2,.8,.2,1)}
.sv-rivela.vista{opacity:1;transform:none}
/* questionario */
.sv-sez--quiz{background:linear-gradient(180deg,var(--paper) 0%,var(--paper-2) 100%)}
.qz{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;
  padding:clamp(1.6rem,4vw,3rem);border-radius:28px;background:#101A33;color:#fff;box-shadow:0 40px 90px -40px rgba(20,33,61,.7);position:relative;overflow:hidden}
.qz::before{content:"";position:absolute;inset:-40% 40% auto -20%;height:120%;background:radial-gradient(circle,rgba(108,99,255,.35),transparent 60%);pointer-events:none}
.qz::after{content:"";position:absolute;inset:auto -20% -50% 50%;height:100%;background:radial-gradient(circle,rgba(77,217,224,.2),transparent 60%);pointer-events:none}
.qz>*{position:relative;z-index:1}
html .qz .pg-tag{color:#4DD9E0;margin:0}
html .qz .sv-h2{color:#fff}
html .qz .sv-h2 em{background:linear-gradient(100deg,#9B7FF8,#4DD9E0 55%,#ff8ad8);-webkit-background-clip:text;background-clip:text;color:transparent}
.qz-intro{color:#C9D1E3;line-height:1.65;margin:1rem 0 0}
.qz-corpo{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:clamp(1.2rem,3vw,1.8rem);backdrop-filter:blur(6px)}
.qz-barra{height:6px;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.qz-barra i{display:block;height:100%;background:linear-gradient(90deg,#6C63FF,#4DD9E0);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.qz-passo-n{font:700 .74rem 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#98A1B8;margin-top:1rem}
.qz-dom{border:0;margin:0;padding:0;animation:dmEntra .45s cubic-bezier(.2,.8,.2,1)}
.qz-dom legend{font:800 clamp(1.15rem,2vw,1.4rem)/1.3 'Bricolage Grotesque',sans-serif;color:#fff;margin:.5rem 0 1.1rem;padding:0}
.qz-opz{display:grid;gap:.55rem}
.qz-opz-b{appearance:none;display:flex;align-items:center;gap:.8rem;width:100%;text-align:left;cursor:pointer;padding:.85rem 1rem;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);color:#fff;font:500 .98rem 'DM Sans',sans-serif;transition:background .2s,border-color .2s,transform .2s}
.qz-opz-b:hover{background:rgba(108,99,255,.18);border-color:#9B7FF8;transform:translateX(3px)}
.qz-opz-b.scelta{background:linear-gradient(90deg,rgba(108,99,255,.45),rgba(77,217,224,.3));border-color:#4DD9E0}
.qz-lett{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:rgba(255,255,255,.1);font:700 .8rem 'Space Mono',monospace;color:#4DD9E0}
.qz-nav{margin-top:.9rem;min-height:1.5rem}
.qz-indietro{appearance:none;border:0;background:none;color:#98A1B8;cursor:pointer;font:600 .88rem 'DM Sans',sans-serif;padding:0}
.qz-indietro:hover{color:#fff}
.qz-risultato{animation:dmEntra .5s cubic-bezier(.2,.8,.2,1)}
.qz-ris-tag{font:700 .74rem 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#4DD9E0}
.qz-numeri{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:.9rem}
.qz-numeri div{padding:1rem .8rem;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);text-align:center}
.qz-numeri b{display:block;font:800 clamp(1.7rem,3.6vw,2.6rem)/1 'Bricolage Grotesque',sans-serif;background:linear-gradient(90deg,#fff,#4DD9E0);-webkit-background-clip:text;background-clip:text;color:transparent}
.qz-numeri span{display:block;margin-top:.45rem;font-size:.78rem;color:#C9D1E3;line-height:1.35}
.qz-costo{display:block;margin-top:1.1rem;font-size:.86rem;color:#C9D1E3}
.qz-costo b{color:#fff}
.qz-costo input{display:block;width:100%;margin-top:.5rem;accent-color:#6C63FF}
.qz-nota{font-size:.78rem!important;color:#98A1B8!important;line-height:1.55;margin:.9rem 0 0}
html .qz .btn-secondary{color:#fff;background:transparent;border-color:rgba(255,255,255,.25)}
@media(max-width:980px){.sv-griglia{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-passi{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:2rem}.sv-passi::before{display:none}}
@media(max-width:900px){.sv-hero-in{grid-template-columns:1fr}.sv-hero-media{width:min(78vw,320px);margin-top:1rem}.sv-bolla--a{left:-8%}.sv-bolla--b{right:-8%}.qz{grid-template-columns:1fr}}
@media(max-width:600px){.sv-griglia{grid-template-columns:1fr}.sv-passi{grid-template-columns:1fr}.qz-numeri{grid-template-columns:1fr}.qz-numeri div{display:flex;align-items:center;gap:1rem;text-align:left}.qz-numeri span{margin:0}
  .sv-bolla{max-width:12rem;padding:.5rem .7rem}.sv-bolla b{font-size:.78rem}}
@media(prefers-reduced-motion:reduce){.sv-bolla{animation:none}.sv-rivela{opacity:1;transform:none;transition:none}}
/* intestazioni delle altre pagine (lavori, contatti, giochi, siti web) */
.pg-testa{position:relative}
.pg-testa::before{content:"";position:absolute;inset:-20% -30% auto 30%;height:140%;z-index:-1;pointer-events:none;
  background:radial-gradient(circle at 60% 40%,rgba(91,75,219,.14),transparent 55%),radial-gradient(circle at 30% 70%,rgba(15,143,158,.10),transparent 55%)}
@keyframes dmEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* contatti: cosa succede dopo */
.ct-dopo{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem) clamp(1rem,3vw,2rem);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.ct-dopo div{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 1.2rem;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 22px -14px rgba(20,33,61,.35)}
.ct-dopo b{flex:none;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font:800 .9rem 'Bricolage Grotesque',sans-serif;color:#fff;background:linear-gradient(135deg,#5B4BDB,#0f8f9e)}
.ct-dopo h3{margin:0;font:800 1rem 'Bricolage Grotesque',sans-serif;color:var(--ink)}
.ct-dopo p{margin:.25rem 0 0;font-size:.88rem;color:var(--ink-muted);line-height:1.5}
.ct-stima{max-width:1180px;margin:0 auto 1rem;padding:0 clamp(1.25rem,4vw,2.5rem)}
.ct-stima div{padding:1rem 1.2rem;border-radius:16px;background:linear-gradient(90deg,rgba(91,75,219,.1),rgba(15,143,158,.1));border:1px solid rgba(91,75,219,.25);color:var(--ink)}
@media(max-width:820px){.ct-dopo{grid-template-columns:1fr}}
/* App: il test gratuito in primo piano e l'esempio di app gia' fatta nel risultato */
.sv-test{display:flex;align-items:center;gap:1rem;margin-top:1.7rem;padding:1rem 1.1rem;border-radius:20px;text-decoration:none;max-width:34rem;
  background:linear-gradient(120deg,#5B4BDB,#0f8f9e);color:#fff;box-shadow:0 20px 44px -18px rgba(91,75,219,.7);position:relative;overflow:hidden;transition:transform .25s}
.sv-test::after{content:"";position:absolute;inset:0;transform:translateX(-120%) skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:svLuce 3.2s ease-in-out infinite}
@keyframes svLuce{60%,100%{transform:translateX(120%) skewX(-20deg)}}
.sv-test:hover{transform:translateY(-3px)}
.sv-test-ico{flex:none;width:46px;height:46px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;background:rgba(255,255,255,.18)}
.sv-test b{display:block;font:800 1.12rem 'Bricolage Grotesque',sans-serif}
.sv-test small{display:block;margin-top:.2rem;font-size:.86rem;line-height:1.45;color:rgba(255,255,255,.88)}
.sv-test-freccia{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:#5B4BDB;animation:svSu 1.6s ease-in-out infinite}
@keyframes svSu{50%{transform:translateY(4px)}}
.qz-plus{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem}
.qz-plus li{padding:.35rem .75rem;border-radius:100px;font-size:.8rem;font-weight:600;color:#fff;background:rgba(77,217,224,.14);border:1px solid rgba(77,217,224,.4)}
.qz-intro b{color:#fff}
.qz-esempio{margin-top:1.2rem;padding:1.1rem;border-radius:16px;background:#fff;color:#14213D}
.qz-esempio .qz-ris-tag{color:#0f8f9e}
.qz-esempio figure{margin:.7rem 0 0}
.qz-esempio img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(20,33,61,.12),0 14px 30px -16px rgba(20,33,61,.5)}
.qz-esempio figcaption{font-size:.7rem;color:#7a8398;margin-top:.35rem}
.qz-esempio h3{margin:.8rem 0 0;font:800 1.08rem/1.25 'Bricolage Grotesque',sans-serif;color:#14213D}
.qz-esempio p{margin:.4rem 0 0;font-size:.88rem;line-height:1.55;color:#556076}
.qz-es-prima{font-style:italic}
.qz-es-ris{font-weight:700;color:#5B4BDB!important}
.sv-cornice video[src*="app-video"]{object-position:50% 40%}
@media(prefers-reduced-motion:reduce){.sv-test::after,.sv-test-freccia{animation:none}}
.qz-numeri b{font-variant-numeric:tabular-nums}
.qz-numeri div{min-width:0}
.qz-esempio img{max-height:300px;object-fit:cover;object-position:top}
.qz-risultato{overflow-anchor:none}
/* le cifre non vanno mai a capo: quando «€ 9.900» diventava «€ 13.200» il riquadro si alzava e la pagina saltava */
html .qz-numeri b{white-space:nowrap;font-size:clamp(1.35rem,2.5vw,2.2rem)}
html .qz-numeri div{min-height:7.2rem;display:flex;flex-direction:column;justify-content:center}
@media(max-width:600px){html .qz-numeri div{min-height:0;flex-direction:row;justify-content:flex-start}}
@media(max-width:600px){html .qz-numeri b{flex:none;width:8.2ch;font-size:1.45rem}html .qz-numeri span{flex:1}}
/* etichette «generato con IA» (AI Act art. 50): la misura piu' piccola che resta leggibile, 9px,
   compensata con un contrasto alto. Sotto, su telefono, non si leggerebbe piu' e non sarebbe «distinguibile». */
html .svz-ia,html .sw-ia,html .ing-ia,html .gm-ia,html .rm-ia,html #servizi .ia-etichetta,html .ia-nota-telefono,html .hero .video-nota{
  font-size:9px!important;line-height:1.2!important;letter-spacing:.03em!important;padding:.14rem .42rem!important;color:#E6EAF3!important;background:rgba(8,11,20,.78)!important;border-radius:100px}
html .hero .video-nota{display:inline-block}
html .rm-ia{color:#1A2A6C!important;background:rgba(255,255,255,.85)!important}
/* dati legali e trasparenza IA nel piè di pagina: la misura piu' piccola leggibile */
html .ft-legale p{font-size:9px;line-height:1.55;letter-spacing:.01em;color:#B7C0D6}

/* ---------- telefono: niente scorrimento laterale, niente zoom sui campi ---------- */
.pg-testa{overflow-x:clip}   /* l'alone ::before sporge a destra e allargava la pagina */
@media (max-width:760px){
  /* sotto i 16px l'iPhone ingrandisce la pagina appena si tocca un campo */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),textarea,select{font-size:16px!important}
  input[type=checkbox]{width:20px;height:20px}
}

/* ===== MODALITA' LEGGERA (vedi sentinella in musica.js) =====
   Solo sui PC che scattano: vetri sfocati spenti e fondi piu' pieni al loro posto. */
html.fai-leggero *,html.fai-leggero *::before,html.fai-leggero *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.fai-leggero nav{background:rgba(8,11,20,.97)}
html.fai-leggero .music-toggle{background:rgba(12,12,24,.95)}
html.fai-leggero #heroNeuro{display:none}
html.fai-leggero .cursor,html.fai-leggero .cursor-ring{display:none!important}

/* ===== Report gratuito (pagina Contatti, #report) ===== */
.rg{position:relative;z-index:1;max-width:1180px;margin:clamp(1.5rem,4vw,3rem) auto;padding:0 clamp(1.25rem,4vw,2.5rem);scroll-margin-top:90px}
.rg-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.6rem,4vw,3.2rem);border-radius:28px;color:#E8ECFF;
  background:radial-gradient(ellipse 60% 70% at 85% 0%,rgba(108,99,255,.45),transparent 70%),radial-gradient(ellipse 50% 60% at 0% 100%,rgba(77,217,224,.22),transparent 70%),linear-gradient(160deg,#1A2A6C 0%,#0A1232 100%);
  box-shadow:0 30px 60px -30px rgba(10,18,50,.7),inset 0 0 0 1px rgba(124,140,255,.35)}
.rg-card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#6C63FF,#4DD9E0)}
.rg-benv{display:inline-block;margin:0 0 1rem;padding:.45rem .9rem;border-radius:99px;background:rgba(77,217,224,.14);border:1px solid rgba(77,217,224,.4);color:#9BF1F5;font-size:.9rem}
.rg-tag{font-family:'Space Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#4DD9E0}
.rg h2{margin:.7rem 0 .9rem;font:800 clamp(1.8rem,3.6vw,2.7rem)/1.08 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em;color:#fff}
.rg h2 em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.08em;background:linear-gradient(100deg,#9B8CFF,#4DD9E0);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.05em}
.rg-sub{margin:0 0 1.6rem;color:#B8C1EA;font-size:1.02rem;line-height:1.6}
.rg-cosa{list-style:none;margin:0;padding:0;display:grid;gap:.75rem;counter-reset:rg}
.rg-cosa li{counter-increment:rg;display:grid;grid-template-columns:2.2rem 1fr;column-gap:.9rem;padding:.9rem 1rem;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.09)}
.rg-cosa li::before{content:counter(rg,decimal-leading-zero);grid-row:span 2;align-self:start;font:700 .85rem 'Space Mono',monospace;color:#071030;width:2.2rem;height:2.2rem;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,#8F87FF,#4DD9E0)}
.rg-cosa b{font:700 1rem 'Bricolage Grotesque',sans-serif;color:#fff}
.rg-cosa span{font-size:.9rem;line-height:1.5;color:#A6B0DA}
.rg-form{align-self:start;padding:clamp(1.3rem,3vw,2rem);border-radius:22px;background:#fff;color:#14213D;box-shadow:0 24px 50px -24px rgba(0,0,0,.6)}
.rg-form h3{margin:0 0 1.1rem;font:800 1.3rem 'Bricolage Grotesque',sans-serif;color:#14213D}
.rg-form .fg{margin-bottom:.95rem}
.rg-form .fg label{display:block;margin-bottom:.35rem;font-size:.82rem;font-weight:600;color:#45506A}
.rg-form .fg label small{font-weight:400;color:#7A849A}
.rg-form .fg input,.rg-form .fg textarea{width:100%;padding:.78rem .9rem;border-radius:12px;border:1px solid #D9DEEA;background:#F6F7FB;color:#14213D;font:16px 'DM Sans',sans-serif}
.rg-form .fg textarea{height:auto;min-height:84px;resize:vertical}
.rg-form .fg input:focus,.rg-form .fg textarea:focus{outline:none;border-color:#6C63FF;box-shadow:0 0 0 3px rgba(108,99,255,.18);background:#fff}
.rg-form .fg input:disabled{opacity:.45}
.rg-form .form-row{display:grid;grid-template-columns:1fr 1fr;gap:.8rem}
.rg-spunta{display:flex;align-items:center;gap:.55rem;margin:-.35rem 0 1rem;font-size:.9rem;color:#45506A;cursor:pointer}
.rg-spunta input,.rg-form .form-presa input{width:18px;height:18px;accent-color:#6C63FF;flex:none}
.rg-form .form-presa{display:flex;gap:.6rem;align-items:flex-start;margin:.2rem 0 1.1rem;font-size:.85rem;line-height:1.45;color:#45506A}
.rg-form .form-presa a{color:#5B4BDB}
.rg-form .btn-submit{width:100%}
.rg-esito{margin:.8rem 0 0;font-size:.92rem;text-align:center;min-height:1.2em}
.rg-esito.ok{color:#0E7A4E;font-weight:600}.rg-esito.no{color:#C0392B}
.rg-form.fatto .fg,.rg-form.fatto .rg-spunta,.rg-form.fatto .form-presa,.rg-form.fatto .form-row{display:none}
@media(max-width:900px){.rg-card{grid-template-columns:1fr}}
@media(max-width:520px){.rg-form .form-row{grid-template-columns:1fr;gap:0}.rg-card{border-radius:22px}}

/* Contatti: richiamo alla pagina del report gratuito */
.rg-richiamo .rg-card{grid-template-columns:minmax(0,1fr) auto;align-items:center;text-decoration:none;transition:transform .4s cubic-bezier(.22,1,.36,1),box-shadow .4s}
.rg-richiamo .rg-card:hover{transform:translateY(-3px)}
.rg-richiamo .rg-sub{margin:0}
.rg-vai{display:inline-flex;align-items:center;gap:.8rem;padding:1rem 1.2rem 1rem 1.6rem;border-radius:99px;background:#F3EFE6;color:#0E1636;font:700 1.02rem 'Bricolage Grotesque',sans-serif;white-space:nowrap}
.rg-vai b{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(135deg,#6C63FF,#4DD9E0);transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rg-richiamo .rg-card:hover .rg-vai b{transform:translateX(4px)}
@media(max-width:900px){.rg-richiamo .rg-card{grid-template-columns:1fr}.rg-vai{justify-self:start}}

/* Barra in alto: il bottone del report gratuito, in ambra per staccare dal gradiente di «Richiedi preventivo» */
.nav-report{display:inline-flex;align-items:center;gap:.5rem;padding:.55rem 1.15rem;border-radius:100px;background:#FFB547;color:#1B1004!important;
  font-weight:700;font-size:.92rem;text-decoration:none;white-space:nowrap;box-shadow:0 8px 22px -8px rgba(255,181,71,.75);transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s}
.nav-report:hover{transform:translateY(-1px);background:#FFC56B;box-shadow:0 12px 26px -8px rgba(255,181,71,.9)}
.nav-report i{width:8px;height:8px;border-radius:50%;background:#1B1004;position:relative}
.nav-report i::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid rgba(27,16,4,.45);animation:navReport 2s ease-out infinite}
@keyframes navReport{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.6);opacity:0}}
@media(max-width:768px){.nav-report{padding:.5rem .9rem;font-size:.85rem}}
@media(max-width:360px){.nav-report{padding:.45rem .75rem;font-size:.8rem}}
@media(prefers-reduced-motion:reduce){.nav-report i::after{animation:none}}

/* ===== Pagina «Report gratuito» =====
   Idea: è l'indice e la copertina di un report vero. Carta calda, inchiostro blu notte, il gradiente FUTURE AI solo come firma
   (sull'anello della copertina e sul filo del pulsante). Grana leggera per non sembrare «pulito da modello». */
.rgp,.rgp-modulo{--carta:#F3EFE6;--carta-2:#EAE4D7;--inchiostro:#141C3A;--grigio:#5A5F73;--filo:rgba(20,28,58,.14);--notte:#0E1636;--accento:#C2552B}
.rgp{position:relative;z-index:1;background:var(--carta);color:var(--inchiostro)}
.rgp::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.35;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .2 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E")}
.rgp>*{position:relative}
.rgp em,.rgp-modulo em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;letter-spacing:-.005em}
.rgp-occhiello{margin:0;font:400 .78rem 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--accento)}

/* 1. apertura */
.rgp-eroe{max-width:1240px;margin:0 auto;padding:clamp(7rem,12vw,9.5rem) clamp(1.25rem,4vw,2.5rem) clamp(3.5rem,7vw,6rem);
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(2rem,6vw,6rem);align-items:end}
.rgp .pg-torna{margin-bottom:2.2rem}
.rgp-tit{margin:.9rem 0 1.4rem;font:800 clamp(2.7rem,6.6vw,5.6rem)/.96 'Bricolage Grotesque',sans-serif;letter-spacing:-.035em;color:var(--inchiostro)}
.rgp-tit em{display:block;font-size:1.04em;line-height:.98;color:var(--accento);letter-spacing:-.02em}
.rgp-sub{max-width:34rem;font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;color:var(--grigio)}
.rgp-azioni{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:center;gap:1.1rem 1.6rem}
.rgp-cta{display:inline-flex;align-items:center;gap:.8rem;padding:1.05rem 1.6rem 1.05rem 1.8rem;border-radius:99px;background:var(--inchiostro);color:#fff;
  font:700 1.02rem 'Bricolage Grotesque',sans-serif;text-decoration:none;box-shadow:0 1px 0 rgba(255,255,255,.15) inset,0 14px 30px -14px rgba(14,22,54,.7);
  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.rgp-cta span{display:grid;place-items:center;width:1.9rem;height:1.9rem;border-radius:50%;background:linear-gradient(135deg,#6C63FF,#4DD9E0);color:#0E1636;font-size:.95rem;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.rgp-cta:hover{transform:translateY(-2px)}.rgp-cta:hover span{transform:translateY(3px)}
.rgp-prezzo{font-size:.95rem;color:var(--grigio)}.rgp-prezzo b{font:800 1.15rem 'Bricolage Grotesque',sans-serif;color:var(--inchiostro)}
/* l'indice, come nelle prime pagine di un libro */
.rgp-indice{padding:2rem 2rem 1.6rem;background:#FBF9F4;border:1px solid var(--filo);border-radius:4px;box-shadow:12px 12px 0 var(--carta-2);transform:rotate(.6deg)}
.rgp-indice-tit{font:400 .74rem 'Space Mono',monospace;letter-spacing:.18em;text-transform:uppercase;color:var(--grigio);padding-bottom:1rem;border-bottom:1px solid var(--filo)}
.rgp-indice ol{list-style:none;margin:0;padding:0}
.rgp-indice li{display:flex;align-items:baseline;gap:.6rem;padding:.78rem 0;border-bottom:1px dashed var(--filo);font-size:1rem}
.rgp-indice li span{flex:none;max-width:78%}
.rgp-indice li i{flex:1;border-bottom:1px dotted rgba(20,28,58,.35);transform:translateY(-.3rem)}
.rgp-indice li b{font:400 .85rem 'Space Mono',monospace;color:var(--accento)}
.rgp-indice-piede{margin-top:1rem;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.15rem;color:var(--grigio)}

/* 2. modulo */
.rgp-modulo{background:var(--notte);color:#E9ECF7;padding:clamp(4rem,8vw,7rem) clamp(1.25rem,4vw,2.5rem);scroll-margin-top:60px;overflow:hidden}
.rgp-modulo::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#6C63FF,#4DD9E0)}
.rgp-modulo-testa,.rgp-modulo-griglia{max-width:calc(1240px - 2 * clamp(1.25rem,4vw,2.5rem));margin:0 auto}
.rgp-modulo{position:relative;z-index:1}
.rgp-modulo-testa{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:1.5rem 3rem;margin-bottom:2.8rem}
.rgp-modulo-testa h2{margin-bottom:0!important}
.rgp-promesse{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0}
.rgp-promesse li{padding:.2rem 1.6rem;border-left:1px solid rgba(255,255,255,.16)}
.rgp-promesse li:first-child{padding-left:0;border-left:0}
.rgp-promesse b{display:block;font:800 1.7rem/1 'Bricolage Grotesque',sans-serif;color:#fff;letter-spacing:-.02em}
.rgp-promesse span{display:block;margin-top:.35rem;font:400 .72rem 'Space Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:#9FA9D6}
.rgp-sotto-invio{margin-top:.9rem;font-size:.88rem;color:#9FA9D6;text-align:center}
.rgp-modulo .rgp-occhiello{color:#E4A07F}
.rgp-modulo h2{margin:.7rem 0 2.6rem;font:800 clamp(2.1rem,4.6vw,3.6rem)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em;color:#fff}
.rgp-modulo h2 em{color:#E4A07F}
.rgp-modulo-griglia{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.rgp-cop-colonna{position:sticky;top:96px}
/* la copertina del report, in miniatura */
.rgp-copertina{position:relative;overflow:hidden;aspect-ratio:3/4;padding:clamp(1.4rem,2.6vw,2rem);border-radius:6px;display:flex;flex-direction:column;
  background:radial-gradient(ellipse 80% 60% at 80% 18%,rgba(108,99,255,.45),transparent 70%),linear-gradient(165deg,#1B2A6B,#070C22 85%);
  box-shadow:0 0 0 1px rgba(255,255,255,.08) inset,0 40px 80px -40px rgba(0,0,0,.8),-14px 14px 0 -6px rgba(255,255,255,.04);transform:rotate(-1.4deg);transition:transform .6s cubic-bezier(.22,1,.36,1)}
.rgp-copertina:hover{transform:rotate(0)}
.rgp-cop-anelli{position:absolute;right:-18%;top:-10%;width:72%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(77,217,224,.28);box-shadow:0 0 0 22px rgba(108,99,255,.06),0 0 0 23px rgba(143,135,255,.2)}
.rgp-cop-data{font:400 .66rem 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:#4DD9E0}
.rgp-cop-tit{margin-top:1rem;font:800 clamp(1.5rem,2.6vw,2.15rem)/1.04 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;color:#fff;word-break:break-word}
.rgp-cop-tit em{color:#B9B3FF}
#copNome{transition:color .3s}
.rgp-cop-indice{margin-top:auto;display:grid;grid-template-columns:auto 1fr;align-items:end;column-gap:.5rem}
.rgp-cop-indice b{grid-row:span 2;font:800 clamp(3rem,6vw,4.4rem)/.85 'Bricolage Grotesque',sans-serif;background:linear-gradient(135deg,#8F87FF,#4DD9E0);-webkit-background-clip:text;background-clip:text;color:transparent}
.rgp-cop-indice small{font-size:.95rem;color:#8E98C4}
.rgp-cop-indice span{font:400 .62rem 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:#8E98C4}
.rgp-cop-righe{list-style:none;margin:1.1rem 0 0;padding:0;display:grid;gap:.45rem}
.rgp-cop-righe li{display:grid;grid-template-columns:1fr 38%;align-items:center;gap:.6rem;font-size:.74rem;color:#B8C1EA}
.rgp-cop-righe li::after{content:"";height:5px;border-radius:9px;background:linear-gradient(90deg,rgba(143,135,255,.55),rgba(77,217,224,.15));filter:blur(.5px)}
.rgp-cop-piede{margin-top:1.1rem;padding-top:.8rem;border-top:1px solid rgba(255,255,255,.12);font-size:.74rem;color:#8E98C4}
.rgp-cop-timbro{position:absolute;right:1.1rem;bottom:3.6rem;padding:.35rem .7rem;border:2px solid #E4A07F;border-radius:4px;color:#E4A07F;
  font:400 .7rem 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;transform:rotate(-8deg) scale(1.6);opacity:0;transition:opacity .4s,transform .5s cubic-bezier(.34,1.56,.64,1)}
.rgp-copertina.fatto .rgp-cop-timbro{opacity:1;transform:rotate(-8deg) scale(1)}
.rgp-cop-nota{margin-top:1.2rem;font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-size:1.15rem;color:#9FA9D6}
/* il modulo */
.rgp-form fieldset{border:0;margin:0 0 2.2rem;padding:0}
.rgp-form legend{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem;font:700 1.25rem 'Bricolage Grotesque',sans-serif;color:#fff}
.rgp-form legend b{display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(255,255,255,.3);font:400 .8rem 'Space Mono',monospace;color:#E4A07F}
.rgp-campo{margin-bottom:1rem}
.rgp-campo label{display:block;margin-bottom:.4rem;font-size:.86rem;font-weight:500;color:#B8C1EA}
.rgp-campo label small{color:#7A84AA;font-weight:400;margin-left:.3rem}
.rgp-campo input,.rgp-campo textarea{width:100%;padding:.95rem 1rem;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;
  font:16px 'DM Sans',sans-serif;transition:border-color .25s,background .25s,box-shadow .25s}
.rgp-campo input::placeholder,.rgp-campo textarea::placeholder{color:#6E78A0}
.rgp-campo input:focus,.rgp-campo textarea:focus{outline:none;border-color:#8F87FF;background:rgba(255,255,255,.08);box-shadow:0 0 0 4px rgba(108,99,255,.2)}
.rgp-campo input:disabled{opacity:.35}
.rgp-campo textarea{resize:vertical;min-height:90px}
.rgp-due{display:grid;grid-template-columns:1fr 1fr;gap:0 1rem}
.rgp-spunta,.rgp-privacy{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;color:#B8C1EA;font-size:.92rem;line-height:1.45}
.rgp-spunta{margin:-.3rem 0 1.1rem}
.rgp-spunta input,.rgp-privacy input{flex:none;width:19px;height:19px;margin-top:.1rem;accent-color:#8F87FF}
.rgp-privacy a{color:#E4A07F}
.rgp-scelte{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.2rem}
.rgp-scelte button{padding:.62rem 1rem;border-radius:99px;border:1px solid rgba(255,255,255,.18);background:transparent;color:#E9ECF7;font:500 .93rem 'DM Sans',sans-serif;cursor:pointer;
  transition:background .2s,border-color .2s,color .2s,transform .2s}
.rgp-scelte button:hover{border-color:rgba(255,255,255,.4);transform:translateY(-1px)}
.rgp-scelte button[aria-pressed="true"]{background:#E9ECF7;border-color:#E9ECF7;color:var(--notte)}
.rgp-scelte button[aria-pressed="true"]::before{content:"✓ ";font-weight:700}
.rgp-invia{position:relative;margin-top:1.6rem;width:100%;display:flex;align-items:center;justify-content:space-between;padding:1.15rem 1.4rem 1.15rem 1.8rem;border:0;border-radius:14px;cursor:pointer;
  background:#F3EFE6;color:var(--notte);font:800 1.12rem 'Bricolage Grotesque',sans-serif;overflow:hidden;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rgp-invia::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:linear-gradient(90deg,#6C63FF,#4DD9E0)}
.rgp-invia svg{width:26px;height:26px;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.rgp-invia:hover{transform:translateY(-2px)}.rgp-invia:hover svg{transform:translateX(4px)}
.rgp-invia:disabled{opacity:.7;cursor:wait}
.rgp-esito{min-height:1.4em;margin-top:.9rem;font-size:.95rem;color:#FF9C8F}
.rgp-fatto{align-self:center;padding:2rem 0}
.rgp-fatto h3{margin:.8rem 0 1rem;font:800 clamp(1.8rem,3.4vw,2.6rem)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.025em;color:#fff}
.rgp-fatto h3 em{color:#B9B3FF}
.rgp-fatto p{color:#B8C1EA;font-size:1.05rem;line-height:1.6;max-width:32rem}
.rgp-fatto-piccolo{margin-top:1rem;font-size:.95rem!important}.rgp-fatto a{color:#E4A07F}

/* 3. tempi */
.rgp-tempi{max-width:1240px;margin:0 auto;padding:clamp(4rem,8vw,6.5rem) clamp(1.25rem,4vw,2.5rem)}
.rgp-tempi ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);border-top:2px solid var(--inchiostro)}
.rgp-tempi li{padding:1.6rem 2rem 0 0}
.rgp-tempi li+li{padding-left:2rem;border-left:1px solid var(--filo)}
.rgp-quando{font:400 .74rem 'Space Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accento)}
.rgp-tempi h3{margin:.7rem 0 .5rem;font:800 1.45rem 'Bricolage Grotesque',sans-serif;letter-spacing:-.02em}
.rgp-tempi p{color:var(--grigio);line-height:1.6}

/* 4. domande */
.rgp-faq{max-width:1240px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem) clamp(5rem,9vw,7.5rem);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,5vw,5rem)}
.rgp-faq h2{font:800 clamp(2rem,4vw,3.1rem)/1 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.rgp-faq h2 em{display:block;color:var(--accento)}
.rgp-faq details{border-bottom:1px solid var(--filo)}
.rgp-faq details:first-child{border-top:1px solid var(--filo)}
.rgp-faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.3rem 0;font:700 1.12rem 'Bricolage Grotesque',sans-serif}
.rgp-faq summary::-webkit-details-marker{display:none}
.rgp-faq summary::after{content:"+";font:400 1.6rem/1 'DM Sans',sans-serif;color:var(--accento);transition:transform .3s}
.rgp-faq details[open] summary::after{transform:rotate(45deg)}
.rgp-faq details p{padding:0 0 1.4rem;color:var(--grigio);line-height:1.65;max-width:40rem}
.rgp-faq details a{color:var(--accento)}

@media (max-width:900px){
  .rgp-eroe,.rgp-modulo-griglia,.rgp-faq{grid-template-columns:1fr}
  .rgp-cop-colonna{position:relative;top:0;max-width:420px}
  .rgp-copertina{aspect-ratio:auto;min-height:0;transform:rotate(-1deg)}
  .rgp-cop-righe{display:none}
  .rgp-cop-indice{margin-top:1.6rem}
  .rgp-tempi ol{grid-template-columns:1fr}
  .rgp-tempi li,.rgp-tempi li+li{padding:1.4rem 0;border-left:0;border-bottom:1px solid var(--filo)}
  .rgp-indice{transform:none}
}
@media (max-width:520px){.rgp-due{grid-template-columns:1fr}.rgp-indice{padding:1.5rem 1.3rem 1.2rem}.rgp-indice li{font-size:.93rem}}
@media (prefers-reduced-motion:reduce){.rgp *{transition:none!important}}

/* spunte sotto la CTA */
.rgp-spunte{list-style:none;margin:1.8rem 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem}
.rgp-spunte li{display:flex;align-items:center;gap:.5rem;font-size:.95rem;color:var(--inchiostro)}
.rgp-spunte li::before{content:"";width:1.15rem;height:1.15rem;border-radius:50%;background:var(--inchiostro) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23F3EFE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/70% no-repeat}
/* perché è diverso */
.rgp-perche{max-width:1240px;margin:0 auto;padding:clamp(3.5rem,7vw,5.5rem) clamp(1.25rem,4vw,2.5rem);border-top:1px solid var(--filo)}
.rgp-perche h2{max-width:22ch;margin:.9rem 0 2.4rem;font:800 clamp(1.9rem,3.8vw,3rem)/1.05 'Bricolage Grotesque',sans-serif;letter-spacing:-.03em}
.rgp-perche h2 em{color:var(--accento)}
.rgp-confronto{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--filo);border-radius:6px;overflow:hidden;background:#FBF9F4}
.rgp-confronto>div{padding:clamp(1.4rem,3vw,2.2rem)}
.rgp-noi{background:var(--inchiostro);color:#E9ECF7}
.rgp-confronto-tit{margin:0 0 1rem;font:400 .74rem 'Space Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--grigio)}
.rgp-noi .rgp-confronto-tit{color:#E4A07F}
.rgp-confronto ul{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.rgp-confronto li{position:relative;padding-left:1.8rem;line-height:1.5;font-size:1.02rem}
.rgp-loro li{color:var(--grigio);text-decoration:line-through;text-decoration-color:rgba(194,85,43,.55);text-decoration-thickness:1.5px}
.rgp-loro li::before{content:"✕";position:absolute;left:0;top:0;color:var(--accento);font-weight:700}
.rgp-noi li::before{content:"✓";position:absolute;left:0;top:0;color:#4DD9E0;font-weight:700}
@media (max-width:900px){.rgp-confronto{grid-template-columns:1fr}.rgp-promesse{display:grid;grid-template-columns:repeat(3,auto);width:100%}.rgp-promesse li{padding:.2rem .9rem}.rgp-promesse b{font-size:1.15rem}.rgp-promesse span{font-size:.6rem;letter-spacing:.08em}}

.rgp-modulo-sub{margin:1rem 0 0;max-width:38rem;font-size:1.05rem;line-height:1.6;color:#B8C1EA}
.rgp-sub b{color:var(--inchiostro);font-weight:600}

/* Specchietto del report gratuito accanto a «Richiedi preventivo» (home e Contatti): per chi non è ancora pronto */
.specchietto-report{display:block;margin-top:1.8rem;padding:1.3rem 1.4rem;border-radius:16px;text-decoration:none;color:#E9ECF7;
  background:radial-gradient(ellipse 80% 70% at 100% 0%,rgba(255,181,71,.18),transparent 70%),#111A3E;border:1px solid rgba(255,181,71,.35);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s}
.specchietto-report:hover{transform:translateY(-2px);border-color:rgba(255,181,71,.7)}
.specchietto-report .sr-pill{display:inline-block;padding:.25rem .65rem;border-radius:99px;background:#FFB547;color:#1B1004;font:700 .72rem 'DM Sans',sans-serif;letter-spacing:.05em;text-transform:uppercase}
.specchietto-report b{display:block;margin:.7rem 0 .35rem;font:800 1.12rem/1.25 'Bricolage Grotesque',sans-serif;color:#fff}
.specchietto-report .sr-testo{display:block;font-size:.9rem;line-height:1.5;color:#B8C1EA}
.specchietto-report .sr-vai{display:inline-flex;align-items:center;gap:.5rem;margin-top:.9rem;font:700 .95rem 'Bricolage Grotesque',sans-serif;color:#FFB547}
.specchietto-report .sr-vai i{font-style:normal;transition:transform .3s}
.specchietto-report:hover .sr-vai i{transform:translateX(4px)}