/* ==========================================================================
   ORBIT v2 — redesign "tech / dinamico" (bento grid, glassmorphism,
   gradient mesh, micro-interazioni). Pagina indipendente, non tocca
   index.html. Palette derivata da assets/css/blog.css con toni più scuri
   e accenti extra per l'effetto "OLED / premium tech".
   ========================================================================== */

:root{
  --navy: #0B1E3D;
  --navy-deep: #071527;
  --ink: #050B18;        /* sfondo OLED, più scuro del navy del sito */
  --ink-2: #0A1730;
  --orange: #F2811D;
  --orange-soft: #F9A752;
  --white: #FFFFFF;
  --slate: #9AA7BE;
  --slate-light: #6B7690;
  --cyan: #22D3EE;
  --violet: #7C6CF9;
  --line: rgba(255,255,255,0.08);
  --glass: rgba(255,255,255,0.045);
  --glass-hover: rgba(255,255,255,0.08);
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
  --mono: 'IBM Plex Mono', monospace;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{overflow-x:hidden; width:100%;}
body{
  font-family:var(--body);
  color:var(--white);
  background:var(--ink);
  -webkit-font-smoothing:antialiased;
  position:relative;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
ul{list-style:none;}
::selection{background:var(--orange);color:var(--ink);}
button{font-family:inherit;border:none;background:none;color:inherit;cursor:pointer;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important;}
}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px;}

/* ---------- Gradient mesh background (fisso, dietro tutto) ---------- */
#mesh{
  position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:var(--ink);
}
#mesh .blob{
  position:absolute; border-radius:50%; filter:blur(90px); opacity:0.55;
  will-change:transform;
}
.blob-1{width:640px;height:640px; background:radial-gradient(circle, var(--orange) 0%, transparent 70%); top:-10%; left:-8%; animation:drift1 14s ease-in-out infinite;}
.blob-2{width:560px;height:560px; background:radial-gradient(circle, var(--violet) 0%, transparent 70%); top:30%; right:-12%; animation:drift2 17s ease-in-out infinite;}
.blob-3{width:520px;height:520px; background:radial-gradient(circle, var(--cyan) 0%, transparent 70%); bottom:-15%; left:20%; animation:drift3 19s ease-in-out infinite;}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(140px,90px) scale(1.25);}66%{transform:translate(-80px,60px) scale(0.9);}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(-130px,110px) scale(0.88);}66%{transform:translate(60px,-70px) scale(1.2);}}
@keyframes drift3{0%,100%{transform:translate(0,0) scale(1);}33%{transform:translate(110px,-90px) scale(1.2);}66%{transform:translate(-100px,-40px) scale(0.92);}}
/* blur pesante e animato su un elemento fixed a schermo intero è un altro
   carico di compositing non banale per Safari iOS: più leggero su mobile. */
@media (max-width:900px){ #mesh .blob{filter:blur(60px);} }

/* ---------- Scroll progress ---------- */
#scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:200;
  background:linear-gradient(90deg, var(--orange), var(--violet), var(--cyan));
  box-shadow:0 0 12px rgba(242,129,29,0.6);
}

#grain{position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.03; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* mix-blend-mode su un elemento fixed a schermo intero + scroll è un bug
   noto di rendering su iOS Safari (il contenuto sparisce a tratti durante
   lo scroll). Su mobile non ne vale la pena: via del tutto. */
@media (max-width:900px){ #grain{display:none;} }

#cursor-glow{
  position:fixed; width:420px; height:420px; border-radius:50%; z-index:2; pointer-events:none;
  background:radial-gradient(circle, rgba(242,129,29,0.16) 0%, transparent 70%);
  transform:translate(-50%,-50%); left:-500px; top:-500px;
  transition:opacity 0.3s ease; mix-blend-mode:screen;
}
@media (max-width:900px){ #cursor-glow{display:none;} }

/* ---------- Cursore personalizzato ---------- */
@media (hover:hover) and (pointer:fine){
  html, body, a, button{cursor:none !important;}
  input, textarea{cursor:text !important;}
}
#cursor-dot, #cursor-ring{
  position:fixed; top:0; left:0; z-index:201; pointer-events:none;
  transform:translate(-50%,-50%); border-radius:50%;
}
#cursor-dot{
  width:7px; height:7px; background:var(--orange); opacity:0;
  transition:opacity 0.2s ease, width 0.2s var(--ease), height 0.2s var(--ease), background 0.2s ease;
}
#cursor-ring{
  width:38px; height:38px; border:1.3px solid rgba(255,255,255,0.4); opacity:0;
  transition:opacity 0.2s ease, width 0.25s var(--ease), height 0.25s var(--ease), border-color 0.25s ease, background 0.25s ease;
}
#cursor-dot.visible, #cursor-ring.visible{opacity:1;}
#cursor-ring.hover{width:64px; height:64px; border-color:transparent; background:rgba(242,129,29,0.16);}
#cursor-dot.hover{width:0; height:0;}
@media (max-width:900px), (hover:none), (pointer:coarse){
  #cursor-dot, #cursor-ring{display:none;}
  html, body, a, button{cursor:auto !important;}
}

/* ---------- Smooth scroll (inerzia) — solo desktop con mouse, vedi v2.js ---------- */
/* #smooth-content deve avere un proprio stacking context (position + z-index)
   sempre, non solo su desktop: senza, su mobile (dove resta position:static,
   nel normale flusso) può capitare che #mesh (position:fixed, z-index:0)
   venga compositato SOPRA il contenuto durante lo scroll invece che sotto —
   bug di paint-order riprodotto anche in Chromium headless, non solo Safari.
   Il contenuto sembra "sparire" perché in realtà è il mesh a coprirlo. */
#smooth-content{position:relative; z-index:2;}
html.smooth-active #smooth-content{position:fixed; top:0; left:0; width:100%; will-change:transform;}
#smooth-spacer{width:1px; display:none;}
html.smooth-active #smooth-spacer{display:block;}

section, header, footer{position:relative; z-index:3;}

/* ---------- Reveal / stagger ---------- */
.reveal{opacity:0; transform:translateY(28px); transition:opacity 0.8s var(--ease), transform 0.8s var(--ease); transition-delay:calc(var(--i, 0) * 0.08s);}
.reveal.visible{opacity:1; transform:translateY(0);}

/* ---------- NAV ---------- */
header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:18px 0; transition:padding 0.35s var(--ease), background 0.35s var(--ease);
}
header.scrolled{padding:10px 0; background:rgba(5,11,24,0.72); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-bottom:1px solid var(--line);}
nav{max-width:1200px; margin:0 auto; padding:0 32px; display:flex; align-items:center; justify-content:space-between;}
.brand{display:flex; align-items:center; gap:9px;}
.brand-mark{height:28px; width:auto; display:block;}
.brand-word{
  font-family:var(--display); font-weight:700; font-size:1.18rem; letter-spacing:-0.01em;
  color:var(--white); line-height:1;
}
.nav-links{display:flex; align-items:center; gap:8px; font-size:0.92rem; font-weight:500;}
.nav-links a:not(.nav-cta){
  color:rgba(255,255,255,0.68); padding:9px 16px; border-radius:100px; position:relative; transition:color 0.2s ease, background 0.2s ease;
}
.nav-links a:not(.nav-cta):hover{color:var(--white); background:var(--glass);}
.nav-links a.active{color:var(--white); background:var(--glass-hover);}
.nav-cta{
  background:linear-gradient(135deg, var(--orange), var(--orange-soft));
  color:var(--ink) !important; padding:10px 20px; border-radius:100px; font-weight:600; margin-left:8px;
  transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease); display:inline-block;
}
.nav-cta:hover{transform:translateY(-2px) scale(1.03); box-shadow:0 12px 30px rgba(242,129,29,0.4);}
.nav-toggle{display:none; width:38px;height:38px;border-radius:10px;background:var(--glass);align-items:center;justify-content:center;}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:1.6px; background:var(--white); position:relative; transition:0.25s ease;
}
.nav-toggle span::before{content:''; position:absolute; top:-6px;}
.nav-toggle span::after{content:''; position:absolute; top:6px;}
@media (max-width:900px){
  .nav-links{
    position:fixed; top:70px; left:16px; right:16px; z-index:99;
    flex-direction:column; align-items:stretch; gap:6px;
    background:rgba(7,15,30,0.98); border:1px solid var(--line); border-radius:16px; padding:14px;
    opacity:0; pointer-events:none; transform:translateY(-10px);
    transition:opacity 0.25s var(--ease), transform 0.25s var(--ease);
  }
  .nav-links.open{opacity:1; pointer-events:auto; transform:translateY(0);}
  .nav-links a:not(.nav-cta){display:block; padding:12px 14px;}
  .nav-links a:not(.nav-cta):hover{background:var(--glass);}
  .nav-cta{margin-left:0; text-align:center;}
  .nav-toggle{display:flex;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px; padding:16px 30px; border-radius:100px;
  font-size:0.98rem; font-weight:600; transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.btn-primary{background:linear-gradient(135deg, var(--orange), var(--orange-soft)); color:var(--ink);}
.btn-primary:hover{transform:translateY(-3px); box-shadow:0 16px 36px rgba(242,129,29,0.4);}
.btn-glass{background:var(--glass); border:1px solid var(--line); color:var(--white); backdrop-filter:blur(10px);}
.btn-glass:hover{background:var(--glass-hover); border-color:rgba(255,255,255,0.2); transform:translateY(-3px);}

/* ---------- Section chrome ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono); font-size:0.76rem;
  letter-spacing:0.14em; text-transform:uppercase; color:var(--orange-soft); margin-bottom:18px;
}
.eyebrow::before{content:none;}
.eyebrow-orbit{width:16px;height:16px;flex-shrink:0; overflow:visible;}
.eyebrow-orbit-dot{animation:spin360 4s linear infinite; transform-origin:8px 8px; fill:var(--orange);}
.section-title{
  font-family:var(--display); font-weight:600; font-size:clamp(1.9rem, 3.6vw, 2.9rem);
  letter-spacing:-0.02em; max-width:680px; line-height:1.15;
}
.section-lede{margin-top:18px; font-size:1.08rem; line-height:1.7; color:var(--slate); max-width:600px;}
.gradient-text{
  background:linear-gradient(90deg, var(--white) 0%, var(--orange-soft) 25%, var(--violet) 50%, var(--cyan) 75%, var(--white) 100%);
  background-size:250% 100%;
  -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:gradientShift 7s linear infinite;
}
@keyframes gradientShift{0%{background-position:0% 50%;}100%{background-position:-150% 50%;}}
section{padding:150px 0;}
@media (max-width:900px){ section{padding:100px 0;} }

/* ---------- Glass card base ---------- */
.glass{
  background:var(--glass); border:1px solid var(--line); border-radius:20px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  transition:transform 0.12s linear, border-color 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  transform-style:preserve-3d; will-change:transform;
}
.glass:hover{border-color:rgba(242,129,29,0.35); background:var(--glass-hover); box-shadow:0 24px 48px -20px rgba(0,0,0,0.5);}
.glass:not(.tilting):hover{transform:translateY(-6px);}

/* backdrop-filter su tanti elementi + scroll è un bug noto di
   compositing su iOS Safari (contenuto che sparisce a tratti durante
   lo scroll). Su mobile via la sfocatura, sfondo più coprente al suo
   posto: stesso look, senza il costo di rendering. */
@media (max-width:900px){
  header.scrolled{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(5,11,24,0.94);}
  .glass{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(16,27,48,0.6);}
  .glass:hover{background:rgba(16,27,48,0.72);}
  .btn-glass{backdrop-filter:none; -webkit-backdrop-filter:none; background:rgba(16,27,48,0.6);}
}

/* ---------- Floating continuo (icone, chip) ---------- */
@keyframes floaty{0%,100%{transform:translateY(0);}50%{transform:translateY(-9px);}}
.float{animation:floaty 4.5s ease-in-out infinite;}
.subject-icon-wrap{animation:floaty 4.5s ease-in-out infinite;}
.bento-b .subject-icon-wrap{animation-delay:0.3s;}
.bento-c .subject-icon-wrap{animation-delay:0.6s;}
.bento-d .subject-icon-wrap{animation-delay:0.9s;}
.bento-e .subject-icon-wrap{animation-delay:1.2s;}
.stat-chip{animation:floaty 5s ease-in-out infinite;}
.hero-stats .stat-chip:nth-child(2){animation-delay:0.5s;}
.hero-stats .stat-chip:nth-child(3){animation-delay:1s;}

/* ---------- Marquee infinito ---------- */
.marquee{
  overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:20px 0; background:rgba(255,255,255,0.02); position:relative; z-index:3;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track{
  display:flex; gap:48px; width:max-content; animation:marquee 26s linear infinite;
  font-family:var(--mono); letter-spacing:0.14em; color:var(--slate-light); font-size:0.82rem; white-space:nowrap;
}
.marquee-track span{display:inline-flex; align-items:center; gap:48px;}
.marquee-track em{color:var(--orange); font-style:normal;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.marquee:hover .marquee-track{animation-play-state:paused;}

/* ---------- Shimmer sui bottoni primari ---------- */
.btn-primary, .nav-cta, .form-submit{position:relative; overflow:hidden;}
.btn-primary::after, .nav-cta::after, .form-submit::after{
  content:''; position:absolute; top:0; left:0; width:60%; height:100%;
  background:linear-gradient(115deg, transparent 0%, rgba(255,255,255,0.55) 50%, transparent 100%);
  transform:translateX(-160%) skewX(-15deg); animation:shimmer 4.5s ease-in-out infinite;
}
@keyframes shimmer{0%,55%{transform:translateX(-160%) skewX(-15deg);}75%{transform:translateX(220%) skewX(-15deg);}100%{transform:translateX(220%) skewX(-15deg);}}

/* ---------- Bordo animato sulla card "consigliato" ---------- */
.package-card.best{position:relative; border-color:transparent;}
.package-card.best::after{
  content:''; position:absolute; inset:0; border-radius:inherit; padding:1.5px; z-index:1; pointer-events:none;
  background:conic-gradient(from var(--spin-angle,0deg), var(--orange), var(--violet), var(--cyan), var(--orange));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:spinBorder 5s linear infinite;
}
@property --spin-angle{syntax:'<angle>'; inherits:false; initial-value:0deg;}
@keyframes spinBorder{to{--spin-angle:360deg;}}

/* ---------- HERO ---------- */
#hero{min-height:100vh; display:flex; align-items:center; padding-top:120px; overflow:hidden;}
.hero-inner{max-width:1200px; margin:0 auto; padding:0 32px; width:100%; position:relative;}

/* ---------- Testo cinetico gigante dietro l'hero ---------- */
.hero-kinetic{
  position:absolute; top:50%; left:0; width:100%; transform:translateY(-50%);
  z-index:0; overflow:hidden; pointer-events:none; user-select:none;
}
.hero-kinetic-track{
  display:flex; width:max-content; white-space:nowrap;
  font-family:var(--display); font-weight:700; font-size:clamp(6rem, 16vw, 13rem);
  color:transparent; -webkit-text-stroke:1px rgba(255,255,255,0.07);
  animation:kineticDrift 40s linear infinite;
}
@keyframes kineticDrift{from{transform:translateX(0);}to{transform:translateX(-50%);}}
.hero-orbit-svg{position:absolute; right:-16%; top:50%; transform:translateY(-50%); width:900px; height:900px; pointer-events:none; opacity:0.9; z-index:0;}
.orbit-rotate{transform-origin:460px 460px; animation:spin360 70s linear infinite;}
.orbit-rotate.reverse{animation-duration:100s; animation-direction:reverse;}
@keyframes spin360{to{transform:rotate(360deg);}}
.orbit-ring-line{fill:none; stroke:rgba(255,255,255,0.08); stroke-width:1;}
.orbit-ring-line.accent{stroke:url(#ringGradient); stroke-width:1.2;}
.orbit-star-core{fill:var(--orange); filter:drop-shadow(0 0 24px rgba(242,129,29,0.85));}
.planet-a{fill:var(--orange); filter:drop-shadow(0 0 12px rgba(242,129,29,0.9));}
.planet-b{fill:var(--white); opacity:0.9;}
.planet-c{fill:var(--cyan); opacity:0.85; filter:drop-shadow(0 0 10px rgba(34,211,238,0.7));}

h1.hero-title{
  font-family:var(--display); font-weight:700; font-size:clamp(2.8rem, 6.2vw, 5.2rem);
  line-height:1.03; letter-spacing:-0.02em; max-width:820px; position:relative; z-index:1;
}
.hero-sub{margin-top:26px; font-size:1.18rem; line-height:1.65; color:var(--slate); max-width:540px; position:relative; z-index:1;}
.hero-ctas{margin-top:42px; display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:1;}

.hero-stats{margin-top:80px; display:flex; gap:16px; flex-wrap:wrap; position:relative; z-index:1;}
.stat-chip{
  padding:18px 26px; border-radius:16px; min-width:140px;
}
.stat-num{font-family:var(--display); font-size:2.1rem; font-weight:700;}
.stat-label{font-size:0.82rem; color:var(--slate); margin-top:4px;}

.scroll-cue{
  position:absolute; bottom:-40px; left:0; display:flex; align-items:center; gap:10px;
  font-family:var(--mono); font-size:0.72rem; letter-spacing:0.1em; text-transform:uppercase; color:var(--slate-light);
}
.scroll-cue .line{width:32px;height:1px;background:var(--slate-light); position:relative; overflow:hidden;}
.scroll-cue .line::after{content:'';position:absolute;inset:0;background:var(--orange);animation:scrollline 2s ease-in-out infinite;}
@keyframes scrollline{0%{transform:translateX(-100%);}50%{transform:translateX(0);}100%{transform:translateX(100%);}}

/* ---------- CHI SONO ---------- */
.chisono-grid{display:grid; grid-template-columns:0.8fr 1.2fr; gap:64px; align-items:center; margin-top:56px;}
.photo-card{position:relative; border-radius:24px; overflow:hidden; padding:6px;}
.photo-card img{border-radius:18px; width:100%; filter:grayscale(10%) contrast(1.05);}
.photo-card::before{
  content:''; position:absolute; inset:0; border-radius:24px; padding:1.5px;
  background:linear-gradient(135deg, var(--orange), var(--violet), var(--cyan));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.bio p{font-size:1.06rem; line-height:1.8; color:var(--slate); margin-bottom:20px;}
.bio strong{color:var(--white);}
.mini-stats{display:flex; gap:36px; margin-top:32px; flex-wrap:wrap;}
.mini-stat-num{font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--white);}
.mini-stat-label{font-size:0.82rem; color:var(--slate-light); margin-top:2px;}
@media (max-width:900px){ .chisono-grid{grid-template-columns:1fr;} }

/* ---------- BENTO (materie) ---------- */
.bento-grid{
  display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:minmax(180px, auto);
  gap:18px; margin-top:56px;
}
.bento-grid .glass{padding:30px; display:flex; flex-direction:column; justify-content:space-between;}
.bento-a{grid-column:span 2; grid-row:span 2;}
.bento-b{grid-column:span 2;}
.bento-c{grid-column:span 2;}
.bento-d{grid-column:span 2;}
.bento-e{grid-column:span 2;}
.bento-cta{
  grid-column:span 4; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px;
  background:linear-gradient(120deg, rgba(242,129,29,0.12), rgba(124,108,249,0.1));
}
.subject-icon-wrap{width:52px;height:52px;border-radius:14px;background:rgba(242,129,29,0.12);display:flex;align-items:center;justify-content:center;margin-bottom:auto;}
.bento-grid h3{font-family:var(--display); font-weight:600; font-size:1.3rem; margin:18px 0 6px;}
.subject-level{font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-light); display:block; margin-bottom:14px;}
.bento-grid ul li{color:var(--slate); font-size:0.92rem; padding-left:16px; position:relative; margin-bottom:8px; line-height:1.4;}
.bento-grid ul li::before{content:''; position:absolute; left:0; top:7px; width:5px;height:5px;border-radius:50%; background:var(--orange);}
@media (max-width:980px){
  .bento-grid{grid-template-columns:repeat(2,1fr);}
  .bento-a, .bento-b, .bento-c, .bento-d, .bento-e{grid-column:span 2;}
  .bento-cta{grid-column:span 2;}
}
@media (max-width:620px){
  .bento-grid{grid-template-columns:1fr;}
  .bento-a, .bento-b, .bento-c, .bento-d, .bento-e, .bento-cta{grid-column:span 1;}
}

/* ---------- METODO ---------- */
.metodo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:56px;}
.metodo-card{padding:38px;}
.metodo-card .num{font-family:var(--mono); color:var(--orange); font-size:0.8rem; letter-spacing:0.08em;}
.metodo-card h3{font-family:var(--display); font-weight:600; font-size:1.3rem; margin:14px 0 10px;}
.metodo-card p{color:var(--slate); font-size:0.96rem; line-height:1.65;}
@media (max-width:820px){ .metodo-grid{grid-template-columns:1fr;} }

/* ---------- COME FUNZIONA (timeline) ---------- */
.timeline{position:relative; margin-top:64px; padding-left:40px;}
.timeline::before{
  content:''; position:absolute; left:9px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(var(--orange), var(--violet), var(--cyan)); opacity:0.4;
}
.timeline-step{position:relative; padding-bottom:52px;}
.timeline-step:last-child{padding-bottom:0;}
.timeline-step::before{
  content:''; position:absolute; left:-40px; top:2px; width:20px;height:20px;border-radius:50%;
  background:var(--ink); border:2px solid var(--orange); box-shadow:0 0 0 4px rgba(242,129,29,0.15);
}
.timeline-step .step-num{font-family:var(--mono); color:var(--orange); font-size:0.78rem;}
.timeline-step h3{font-family:var(--display); font-weight:600; font-size:1.2rem; margin:8px 0 8px;}
.timeline-step p{color:var(--slate); font-size:0.96rem; max-width:520px; line-height:1.6;}

/* ---------- GENITORI ---------- */
.genitori-panel{padding:56px; margin-top:48px; position:relative; overflow:hidden;}
.genitori-panel::after{
  content:''; position:absolute; top:-40%; right:-10%; width:340px;height:340px; border-radius:50%;
  background:radial-gradient(circle, rgba(124,108,249,0.25), transparent 70%); filter:blur(40px);
}
.genitori-panel p{font-size:1.08rem; line-height:1.8; color:var(--slate); max-width:680px; position:relative; z-index:1;}
.genitori-panel p:first-child{margin-bottom:20px;}

/* ---------- CORSI ---------- */
.courses-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:56px;}
.course-card{padding:30px;}
.course-tag{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-light);}
.course-card h3{font-family:var(--display); font-weight:600; font-size:1.2rem; margin:14px 0 10px;}
.course-price{font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--orange-soft); margin-bottom:16px;}
.course-card ul li{color:var(--slate); font-size:0.88rem; padding-left:16px; position:relative; margin-bottom:8px;}
.course-card ul li::before{content:''; position:absolute; left:0; top:7px; width:5px;height:5px;border-radius:50%; background:var(--orange);}
.courses-note{margin-top:24px; color:var(--slate); font-size:0.95rem;}
.courses-note a{color:var(--orange-soft); border-bottom:1px solid rgba(249,167,82,0.4);}
@media (max-width:980px){ .courses-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:620px){ .courses-grid{grid-template-columns:1fr;} }

.packages-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:44px;}
.package-card{padding:32px; text-align:center; position:relative;}
.package-card.best{border-color:rgba(242,129,29,0.5); margin-top:22px;}
.package-card.best::before{
  content:'consigliato'; position:absolute; top:-12px; left:50%; transform:translateX(-50%); z-index:2;
  font-family:var(--mono); font-size:0.62rem; letter-spacing:0.1em; text-transform:uppercase; white-space:nowrap;
  background:linear-gradient(135deg, var(--orange), var(--orange-soft)); color:var(--ink); padding:5px 14px; border-radius:100px;
}
@media (max-width:820px){ .packages-grid{gap:40px;} .package-card.best{margin-top:0;} }
.package-hours{font-family:var(--display); font-size:1.7rem; font-weight:700;}
.package-hours span{font-size:1rem; font-weight:400; color:var(--slate);}
.package-discount-badge{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:0.72rem; color:var(--cyan);}
.package-perhour{margin-top:18px; font-family:var(--mono); font-size:1.1rem;}
.package-perhour span{color:var(--slate-light); font-size:0.8rem;}
.package-total{margin-top:8px; color:var(--slate); font-size:0.85rem;}
@media (max-width:820px){ .packages-grid{grid-template-columns:1fr;} }

/* ---------- TESTIMONIANZE ---------- */
.testimonials-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px;}
.testimonial-card{padding:32px; display:flex; flex-direction:column;}
.testimonial-mark{font-family:var(--display); font-size:2.6rem; color:var(--orange); line-height:1; margin-bottom:6px;}
.testimonial-card p{color:rgba(255,255,255,0.75); font-size:0.95rem; line-height:1.7; flex-grow:1;}
.testimonial-meta{margin-top:20px; padding-top:16px; border-top:1px solid var(--line);}
.testimonial-name{font-weight:600;}
.testimonial-role{font-size:0.8rem; color:var(--slate-light); margin-top:2px;}
@media (max-width:980px){ .testimonials-grid{grid-template-columns:1fr;} }

/* ---------- BLOG TEASER ---------- */
.blog-teaser{margin-top:56px; padding:48px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  background:linear-gradient(120deg, rgba(34,211,238,0.08), rgba(242,129,29,0.08));}
.blog-teaser h3{font-family:var(--display); font-weight:600; font-size:1.4rem; margin-bottom:10px;}
.blog-teaser p{color:var(--slate); max-width:460px;}
.blog-teaser .btn{white-space:nowrap;}

/* ---------- VISIONE ---------- */
.roadmap{margin-top:48px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.roadmap-item{padding:30px;}
.roadmap-tag{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--orange-soft);}
.roadmap-item h4{font-family:var(--display); font-weight:600; font-size:1.1rem; margin:12px 0 10px;}
.roadmap-item p{color:var(--slate); font-size:0.9rem; line-height:1.6;}
.roadmap-item.future{opacity:0.7;}
@media (max-width:900px){ .roadmap{grid-template-columns:1fr;} }

/* ---------- CONTATTI ---------- */
.contatti-grid{display:grid; grid-template-columns:0.9fr 1.1fr; gap:32px; margin-top:56px; align-items:start;}
.contatti-panel{padding:40px;}
.contact-meta{margin-top:36px; display:grid; gap:20px;}
.contact-meta-label{font-family:var(--mono); font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--slate-light); margin-bottom:4px;}
.contact-meta-val{font-size:0.98rem;}
.contact-form{padding:40px; display:flex; flex-direction:column; gap:20px;}
.form-row label{display:block; font-family:var(--mono); font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--slate-light); margin-bottom:8px;}
.form-row input, .form-row textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; color:var(--white); font-family:var(--body); font-size:0.95rem; transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row input:focus, .form-row textarea:focus{outline:none; border-color:var(--orange); box-shadow:0 0 0 3px rgba(242,129,29,0.18);}
.form-row input::placeholder, .form-row textarea::placeholder{color:rgba(255,255,255,0.3);}
.subject-checks{display:flex; flex-wrap:wrap; gap:10px;}
.subject-checks label{
  display:inline-flex; align-items:center; justify-content:flex-start; gap:8px;
  width:auto; max-width:max-content; flex:0 0 auto; margin-bottom:0;
  background:rgba(255,255,255,0.03); border:1px solid var(--line);
  padding:8px 14px; border-radius:100px; font-size:0.85rem; font-family:var(--body);
  text-transform:none; letter-spacing:0; color:var(--slate);
}
.subject-checks input[type="checkbox"]{
  width:15px; height:15px; flex-shrink:0; margin:0; accent-color:var(--orange);
}
.form-submit{
  background:linear-gradient(135deg, var(--orange), var(--orange-soft)); color:var(--ink); font-weight:600;
  padding:15px; border-radius:10px; font-size:0.98rem; transition:transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.form-submit:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(242,129,29,0.35);}
.form-hint{font-size:0.8rem; color:var(--slate-light);}
@media (max-width:900px){ .contatti-grid{grid-template-columns:1fr;} }

/* ---------- FOOTER ---------- */
footer{padding:40px 0; border-top:1px solid var(--line);}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px;}
.footer-brand{display:flex; align-items:center; gap:8px;}
.footer-brand .brand-mark{height:20px;}
.footer-brand .brand-word{font-size:1rem; color:rgba(255,255,255,0.75);}
.footer-links{display:flex; gap:28px; font-size:0.86rem; color:var(--slate-light);}
.footer-links a:hover{color:var(--white);}

/* ---------- Count-up target visibility helper ---------- */
[data-count]{ }