/* ==========================================================================
   Praxia — design system
   Impianto e tipografia dal riferimento gabrysolution.it,
   palette propria: blu notte + ciano elettrico. NESSUN ARANCIONE.
   ========================================================================== */

:root{
  /* base — dark navy, non nero puro */
  --background:      #070C1A;
  --foreground:      #E8EFFA;
  --surface:         #101A2E;
  --muted:           #1A2540;
  --muted-foreground:#93A4C4;
  --border:          rgba(255,255,255,0.10);
  --input:           rgba(255,255,255,0.15);

  /* brand */
  --primary:         #00C2FF;   /* ciano elettrico */
  --primary-fg:      #04121F;
  --secondary:       #001ABE;   /* blu profondo */
  --violet:          #8E1DEB;
  --teal:            #00D1BE;

  /* stato di errore: tenuto sul magenta/rosa per restare
     nella famiglia blu-viola senza scivolare nel caldo */
  --danger:          #E5487F;
  --danger-fg:       #FF8FB4;

  --radius:          0.625rem;

  /* superfici in vetro: mai fondi pieni saturi */
  --glass:        rgba(16,26,46,.72);
  --glass-muted:  rgba(26,37,64,.62);
  --glass-nav:    rgba(7,12,26,.72);

  /* type */
  --font-display: "Anton", "Arial Narrow", Impact, sans-serif;
  --font-sans:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "Geist Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* spazi */
  --sec-y:   clamp(5rem, 12vh, 9rem);
  --gap:     clamp(1rem, 2.5vw, 1.75rem);
  --pad-x:   clamp(1.125rem, 4vw, 2rem);

  /* firma visiva */
  --glow-soft: drop-shadow(0 0 30px rgba(0,194,255,.30));
  --glow-btn:  0 0 16px rgba(0,194,255,.60);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; overflow-x:hidden; }

body{
  margin:0;
  color:var(--foreground);
  font-family:var(--font-sans);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;

  /* lo sfondo non è mai piatto:
     ciano da sinistra · viola da destra · blu elettrico dal basso */
  background:
    radial-gradient(1100px 780px at 12% -8%,  rgba(0,194,255,.20), transparent 60%),
    radial-gradient(900px 700px at 92% 6%,    rgba(142,29,235,.22), transparent 60%),
    radial-gradient(1200px 900px at 55% 105%, rgba(0,26,190,.28),  transparent 65%),
    var(--background);
  background-attachment: fixed;
}

/* matrice di puntini ciano, dissolta ai bordi perché non diventi rumore */
body::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:radial-gradient(circle, rgba(0,194,255,.10) 1px, transparent 1px);
  background-size:28px 28px;
  -webkit-mask-image:radial-gradient(ellipse 78% 62% at 50% 38%, #000 18%, transparent 78%);
          mask-image:radial-gradient(ellipse 78% 62% at 50% 38%, #000 18%, transparent 78%);
}

img,svg{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }
p{ margin:0 0 1em; }
p:last-child{ margin-bottom:0; }
a{ color:inherit; text-decoration:none; }
button,input,textarea,select{ font:inherit; color:inherit; }

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

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--primary); color:var(--primary-fg);
  padding:.75rem 1.25rem; border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{ left:0; }

/* ---------- layout ---------- */
.container{ width:100%; max-width:1200px; margin-inline:auto; padding-inline:var(--pad-x); }
.container--narrow{ max-width:820px; }

.section{ padding-block:var(--sec-y); position:relative; }
.section--tight{ padding-block:clamp(2.5rem,6vh,4rem); }

/* sezioni alternate: blocco leggermente più chiaro, senza spezzare il gradiente */
.section--alt{
  background:linear-gradient(180deg, rgba(16,26,46,.55), rgba(16,26,46,.28));
  border-block:1px solid var(--border);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.grid{ display:grid; gap:var(--gap); }
.grid--3{ grid-template-columns:1fr; }

/* ---------- tipografia ---------- */
.h1,.h2,.h3,.h4,.h5{ margin:0; font-weight:400; }

.hero__title, .h2{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:-0.01em;
  line-height:1;
  font-weight:400;
}
.hero__title{ font-size:clamp(2.5rem, 8vw, 5rem); margin:0 0 1.25rem; }
.h2{ font-size:clamp(2rem, 5.2vw, 3.5rem); }

.h3{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.01em; line-height:1.05; font-size:clamp(1.35rem,2.6vw,1.75rem); }
.h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:-0.005em; line-height:1.1; font-size:1.25rem; margin:0 0 .5rem; }
.h5{ font-size:1.0625rem; font-weight:600; margin:0 0 .35rem; line-height:1.35; }

.lead{ color:var(--muted-foreground); font-size:clamp(1rem,1.6vw,1.125rem); }
.hl{ color:var(--primary); }

.eyebrow{
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:.75rem;
  color:var(--primary);
  margin:0 0 1rem;
}

.sec-head{ max-width:44rem; margin-bottom:clamp(2.5rem,6vh,4rem); }
.sec-head--center{ margin-inline:auto; text-align:center; }
.sec-head__sub{ margin-top:1.125rem; }

.todo{
  display:inline-block;
  font-family:var(--font-mono);
  font-size:.625rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--primary);
  border:1px dashed rgba(0,194,255,.55);
  border-radius:4px;
  padding:.1em .45em;
  margin-left:.4em;
  vertical-align:middle;
  white-space:nowrap;
}

/* ---------- bottoni ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.875rem 1.5rem;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-weight:600; font-size:.9375rem; line-height:1;
  cursor:pointer;
  transition:transform .18s ease, box-shadow .22s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
  text-align:center;
}
.btn--primary{ background:var(--primary); color:var(--primary-fg); }
.btn--primary:hover{ transform:translateY(-2px); box-shadow:var(--glow-btn); }
.btn--ghost{ background:rgba(16,26,46,.45); color:var(--foreground); border-color:var(--input); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.btn--ghost:hover{ border-color:rgba(0,194,255,.5); color:var(--primary); transform:translateY(-2px); }
.btn--sm{ padding:.625rem 1.125rem; font-size:.875rem; }
.btn--lg{ padding:1.0625rem 2rem; font-size:1rem; }
.btn--block{ display:flex; width:100%; }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:100;
  background:var(--glass-nav);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease, background-color .25s ease;
}
.nav.is-scrolled{ border-bottom-color:var(--border); background:rgba(7,12,26,.92); }
.nav__inner{ display:flex; align-items:center; gap:1.5rem; height:72px; }
.nav__logo{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:.02em; font-size:1.25rem; color:var(--foreground);
  margin-right:auto;
}
.nav__links{ display:none; gap:2rem; font-size:.9375rem; color:var(--muted-foreground); }
.nav__links a{ position:relative; padding-block:.25rem; transition:color .18s ease; }
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--primary); transition:right .25s ease;
}
.nav__links a:hover{ color:var(--foreground); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ display:none; }

.nav__burger{
  display:grid; place-content:center; gap:5px;
  width:44px; height:44px; margin-right:-10px;
  background:none; border:0; cursor:pointer;
}
.nav__burger span{ display:block; width:22px; height:2px; background:var(--foreground); transition:transform .25s ease, opacity .2s ease; }
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.nav__mobile{
  display:grid; gap:.25rem;
  padding:.5rem var(--pad-x) 1.5rem;
  border-top:1px solid var(--border);
  background:rgba(7,12,26,.97);
}
.nav__mobile[hidden]{ display:none; }
.nav__mobile a:not(.btn){ padding:.875rem 0; border-bottom:1px solid var(--border); color:var(--muted-foreground); }
.nav__mobile .btn{ margin-top:1rem; }

@media (min-width:900px){
  .nav__links{ display:flex; }
  .nav__cta{ display:inline-flex; }
  .nav__burger{ display:none; }
  .nav__mobile{ display:none !important; }
}

/* ---------- hero ---------- */
.hero{ position:relative; padding-block:clamp(4rem,14vh,8rem) clamp(3.5rem,10vh,6rem); overflow:hidden; }
.hero__bg{ position:absolute; inset:0; pointer-events:none; }
.hero__circuit{ position:absolute; right:-10%; bottom:0; width:min(760px,100%); opacity:.6; }

.hero__inner{ position:relative; }
.hero__sub{ max-width:36rem; margin-bottom:2.25rem; }
.hero__title .hl{ filter:var(--glow-soft); }

.hero__cta{ display:flex; flex-wrap:wrap; gap:.875rem; margin-bottom:2.75rem; }
.hero__cta .btn{ flex:1 1 auto; min-width:min(220px,100%); }

.badges{ display:flex; flex-wrap:wrap; gap:.625rem 1.25rem; }
.badge{
  display:inline-flex; align-items:center; gap:.55rem;
  font-size:.8125rem; color:var(--muted-foreground);
  background:var(--glass-muted); border:1px solid var(--border);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-radius:999px; padding:.5rem .9rem;
}
.badge__i{ width:15px; height:15px; flex:none; fill:none; stroke:var(--primary); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

@media (min-width:640px){
  .hero__cta .btn{ flex:0 0 auto; }
}

/* ---------- marquee ---------- */
.marquee{
  overflow:hidden;
  border-block:1px solid var(--border);
  background:rgba(16,26,46,.4);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding-block:.9rem;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee__track{
  display:flex; width:max-content; gap:0;
  animation:marquee 46s linear infinite;
}
.marquee__item{
  display:inline-flex; align-items:center; gap:1.75rem;
  padding-inline:1.75rem;
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.75rem;
  color:var(--muted-foreground); white-space:nowrap;
}
.marquee__item::after{ content:""; width:5px; height:5px; border-radius:50%; background:var(--primary); }
@keyframes marquee{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* ---------- stats ---------- */
.stats__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap) 1rem; }
.stat{ padding-block:.5rem; }
.stat__num{
  font-family:var(--font-display);
  font-size:clamp(2.25rem,6vw,3.5rem); line-height:1;
  color:var(--primary);
  filter:var(--glow-soft);
  margin-bottom:.4rem;
}
.stat__label{ font-size:.8125rem; color:var(--muted-foreground); line-height:1.4; }
@media (min-width:860px){ .stats__grid{ grid-template-columns:repeat(4,1fr); } }

/* ---------- problema ---------- */
.pcard{
  position:relative;
  background:var(--glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2rem);
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.pcard:hover{ border-color:rgba(0,194,255,.5); transform:translateY(-3px); box-shadow:0 0 28px rgba(0,194,255,.14); }
.pcard__n{
  display:block;
  font-family:var(--font-mono); font-size:.75rem; letter-spacing:.12em;
  color:rgba(0,194,255,.7); margin-bottom:1rem;
}
.pcard p{ color:var(--muted-foreground); font-size:.9375rem; }

.closing{
  display:flex; gap:1.25rem; align-items:stretch;
  margin-top:clamp(2rem,5vh,3rem);
  background:var(--glass-muted);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(1.25rem,3vw,1.75rem);
}
.closing__bar{ width:3px; flex:none; border-radius:3px; background:var(--primary); box-shadow:var(--glow-btn); }
.closing p{ font-size:clamp(1rem,2vw,1.1875rem); font-weight:500; }

@media (min-width:760px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }

/* ---------- card corso ---------- */
.courses{ display:grid; gap:var(--gap); grid-template-columns:1fr; }
@media (min-width:720px){ .courses{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1080px){ .courses{ grid-template-columns:repeat(3,1fr); } }

.course{
  position:relative; display:flex; flex-direction:column;
  background:var(--glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2rem);
  overflow:hidden;
  transition:border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.course::before{
  content:""; position:absolute; inset:-40% 45% 55% -20%;
  background:radial-gradient(circle, var(--accent, var(--primary)), transparent 68%);
  opacity:.14; filter:blur(50px); pointer-events:none;
  transition:opacity .3s ease;
}
.course:hover{ border-color:rgba(0,194,255,.5); transform:translateY(-4px); box-shadow:0 0 32px rgba(0,194,255,.16); }
.course:hover::before{ opacity:.26; }

.course__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.125rem; }
.course__n{
  font-family:var(--font-display); font-size:2.75rem; line-height:.85;
  color:rgba(0,194,255,.30);
}
.course__icon{
  width:40px; height:40px; flex:none;
  fill:none; stroke:var(--primary); stroke-width:1.4;
  stroke-linecap:round; stroke-linejoin:round;
  filter:var(--glow-soft);
}
.course__title{ font-family:var(--font-display); text-transform:uppercase; line-height:1.05; letter-spacing:-0.01em; font-size:1.375rem; margin:0 0 .5rem; }
.course__for{ font-size:.875rem; color:var(--muted-foreground); margin-bottom:1.125rem; }

.course__learn{ display:grid; gap:.5rem; margin-bottom:1.25rem; }
.course__learn li{ position:relative; padding-left:1.15rem; font-size:.875rem; color:var(--muted-foreground); }
.course__learn li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:6px; height:6px; border-radius:50%; background:var(--primary);
}

.course__why{
  background:var(--glass-muted);
  border-left:3px solid var(--primary);
  border-radius:0 6px 6px 0;
  padding:.9rem 1rem;
  margin-bottom:1.25rem;
}
.course__why h4{
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.6875rem; color:var(--primary);
  margin:0 0 .45rem; font-weight:400;
}
.course__why p{ font-size:.875rem; color:var(--foreground); }

.course__note{ margin:1rem 0 0; }
.course__note .todo{ white-space:normal; margin-left:0; max-width:100%; }

.course__meta{
  display:flex; flex-wrap:wrap; gap:.4rem .75rem;
  margin-top:auto; padding-top:1rem;
  border-top:1px solid var(--border);
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.1em; font-size:.6875rem; color:var(--muted-foreground);
}
.course__meta span{ display:inline-flex; align-items:center; gap:.4rem; }
.course__meta span:not(:last-child)::after{ content:"·"; color:var(--primary); margin-left:.35rem; }

.course__link{
  display:inline-flex; align-items:center; gap:.45rem;
  margin-top:1.125rem; font-size:.875rem; font-weight:600; color:var(--primary);
  transition:gap .2s ease;
}
.course__link:hover{ gap:.75rem; }
.course__link svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }

/* le due card sistemistiche a piena larghezza su desktop */
@media (min-width:1080px){
  .course--wide{ grid-column:span 3; }
  .course--wide .course__body{ display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 3rem; align-items:start; }
  .course--wide .course__learn{ margin-bottom:0; }
  .course--wide .course__why{ margin-bottom:0; }
  .course--wide .course__title{ font-size:1.75rem; }
  .course--wide .course__n{ font-size:3.25rem; }
}

/* ---------- metodo ---------- */
.steps{ display:grid; gap:0; }
.step{ display:flex; gap:clamp(1rem,3vw,2.5rem); padding-block:clamp(1.5rem,3.5vh,2.25rem); border-top:1px solid var(--border); }
.step:last-of-type{ border-bottom:1px solid var(--border); }
.step__n{
  font-family:var(--font-mono);
  font-size:clamp(2rem,6vw,3.25rem); line-height:1;
  color:rgba(0,194,255,.32);
  flex:none; min-width:2.2em;
}
.step__body{ padding-top:.2rem; }
.step__body p{ color:var(--muted-foreground); font-size:.9375rem; max-width:52ch; }
.steps__note{ margin-top:1.75rem; font-size:.875rem; color:var(--muted-foreground); }

/* ---------- perché noi ---------- */
.split{ display:grid; gap:clamp(2.5rem,6vw,4.5rem); align-items:start; }
@media (min-width:960px){ .split{ grid-template-columns:1.05fr .95fr; } }

.checks{ display:grid; gap:1.75rem; margin-top:clamp(2rem,5vh,3rem); }
.checks li{ position:relative; padding-left:2.25rem; }
.checks li::before{
  content:""; position:absolute; left:0; top:.15em;
  width:1.35rem; height:1.35rem; border-radius:50%;
  background:rgba(0,194,255,.12); border:1px solid rgba(0,194,255,.45);
}
.checks li::after{
  content:""; position:absolute; left:.42rem; top:.5em;
  width:.5rem; height:.28rem;
  border-left:2px solid var(--primary); border-bottom:2px solid var(--primary);
  transform:rotate(-45deg);
}
.checks p{ color:var(--muted-foreground); font-size:.9375rem; }

.split__visual{ position:relative; }
.codeblock{
  position:relative; z-index:1;
  background:rgba(7,12,26,.78);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 40px rgba(0,194,255,.08);
}
.codeblock__bar{ display:flex; gap:.4rem; padding:.75rem 1rem; border-bottom:1px solid var(--border); background:rgba(255,255,255,.03); }
.codeblock__bar span{ width:9px; height:9px; border-radius:50%; background:var(--muted); }
.codeblock__bar span:first-child{ background:rgba(0,194,255,.8); }
.codeblock__body{
  margin:0; padding:1.25rem; overflow-x:auto;
  font-family:var(--font-mono); font-size:.75rem; line-height:1.9;
  color:var(--muted-foreground);
}
.c-c{ color:#5C6E90; }
.c-k{ color:var(--primary); }
.c-s{ color:var(--teal); }
.c-o{ color:var(--violet); }
.c-ok{ color:var(--teal); }

.dots{
  position:absolute; z-index:0; inset:auto -1.5rem -1.75rem auto;
  width:min(220px,60%); height:140px;
  background-image:radial-gradient(circle, rgba(0,194,255,.5) 1px, transparent 1px);
  background-size:16px 16px;
  opacity:.45;
}

/* ---------- FAQ ---------- */
.accordion{ border-top:1px solid var(--border); }
.acc{ border-bottom:1px solid var(--border); }
.acc h3{ margin:0; font-size:inherit; font-weight:inherit; }
.acc__q{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.5rem;
  background:none; border:0; cursor:pointer; text-align:left;
  padding:1.35rem 0;
  font-size:clamp(1rem,2vw,1.125rem); font-weight:500;
  transition:color .18s ease;
}
.acc__q:hover{ color:var(--primary); }
.acc__i{ width:20px; height:20px; flex:none; fill:none; stroke:var(--primary); stroke-width:1.8; stroke-linecap:round; transition:transform .28s ease; }
.acc__q[aria-expanded="true"] .acc__i{ transform:rotate(135deg); }
.acc__a{ padding:0 0 1.5rem; max-width:62ch; }
.acc__a p{ color:var(--muted-foreground); font-size:.9375rem; }
.acc__a[hidden]{ display:none; }

/* ---------- CTA + form ---------- */
.cta{ position:relative; overflow:hidden; padding-block:var(--sec-y); border-top:1px solid var(--border); }
.cta__glow{
  position:absolute; top:-30%; left:50%; transform:translateX(-50%);
  width:min(1000px,150vw); height:min(760px,120vw);
  background:
    radial-gradient(circle at 38% 45%, rgba(0,194,255,.26), transparent 60%),
    radial-gradient(circle at 68% 55%, rgba(142,29,235,.24), transparent 62%);
  filter:blur(80px); pointer-events:none;
}
.cta .container{ position:relative; }

.form{
  background:var(--glass);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,2.5rem);
}
.form__row{ display:grid; gap:1.125rem; margin-bottom:1.125rem; }
@media (min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }

.field{ display:grid; gap:.45rem; margin:0; padding:0; border:0; }
.field--full{ margin-bottom:1.125rem; }
.field label, .field legend{ font-size:.8125rem; font-weight:500; color:var(--muted-foreground); padding:0; }
.req{ color:var(--primary); }
.field input, .field textarea{
  width:100%;
  background:rgba(7,12,26,.6);
  border:1px solid var(--input);
  border-radius:var(--radius);
  padding:.8125rem .9375rem;
  font-size:.9375rem;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input::placeholder, .field textarea::placeholder{ color:#6B7C9C; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(0,194,255,.18); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--danger); }
.field textarea{ resize:vertical; min-height:110px; }
.field__err{ margin:0; font-size:.75rem; color:var(--danger-fg); }

.checks-grid{ display:grid; gap:.5rem; margin-top:.35rem; }
@media (min-width:640px){ .checks-grid{ grid-template-columns:1fr 1fr; } }
.chk{
  display:flex; align-items:flex-start; gap:.65rem;
  background:var(--glass-muted); border:1px solid var(--border); border-radius:var(--radius);
  padding:.7rem .85rem; cursor:pointer;
  font-size:.875rem; line-height:1.35;
  transition:border-color .18s ease, background-color .18s ease;
}
.chk:hover{ border-color:rgba(0,194,255,.5); }
.chk input{
  appearance:none; -webkit-appearance:none;
  width:1.05rem; height:1.05rem; min-width:1.05rem;
  padding:0; flex:none; margin-top:.1rem;
  border:1px solid var(--input); border-radius:4px; background:rgba(7,12,26,.7);
  cursor:pointer; position:relative;
  transition:background-color .15s ease, border-color .15s ease;
}
.chk input:checked{ background:var(--primary); border-color:var(--primary); }
.chk input:checked::after{
  content:""; position:absolute; left:.3rem; top:.1rem;
  width:.28rem; height:.55rem;
  border-right:2px solid var(--primary-fg); border-bottom:2px solid var(--primary-fg);
  transform:rotate(45deg);
}
.chk:has(input:checked){ border-color:rgba(0,194,255,.55); background:rgba(0,194,255,.09); }

.form .btn--lg{ margin-top:.5rem; }
.form__reassure{ margin:1rem 0 0; text-align:center; font-size:.8125rem; color:var(--muted-foreground); }
.form__alt{ margin:.5rem 0 0; text-align:center; font-size:.8125rem; color:var(--muted-foreground); }
.form__alt a{ color:var(--primary); }
.form__status{ margin:1rem 0 0; text-align:center; font-size:.875rem; }
.form__status.is-ok{ color:var(--teal); }
.form__status.is-err{ color:var(--danger-fg); }

.form.is-sent .form__row,
.form.is-sent .field,
.form.is-sent .btn{ display:none; }
.form.is-sent .form__reassure,
.form.is-sent .form__alt{ display:none; }

.sent{
  display:grid; gap:.75rem; justify-items:center; text-align:center;
  padding:1rem 0;
}
.sent__i{
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(0,194,255,.5); background:rgba(0,194,255,.10);
  display:grid; place-content:center;
  fill:none; stroke:var(--primary); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;
  filter:var(--glow-soft);
}
.sent h3{ font-family:var(--font-display); text-transform:uppercase; font-size:1.5rem; margin:0; }
.sent p{ color:var(--muted-foreground); font-size:.9375rem; max-width:38ch; }

/* ---------- footer ---------- */
.footer{
  border-top:1px solid var(--border);
  padding-block:clamp(3rem,7vh,4.5rem) 2rem;
  background:rgba(4,8,18,.72);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.footer__grid{ display:grid; gap:2.5rem; }
@media (min-width:760px){ .footer__grid{ grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2rem; } }
.footer__brand p{ margin-top:.85rem; font-size:.875rem; color:var(--muted-foreground); max-width:30ch; }
.footer__h{
  font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.12em;
  font-size:.6875rem; color:var(--primary); font-weight:400;
  margin:0 0 1rem;
}
.footer__col ul{ display:grid; gap:.6rem; }
.footer__col a{ font-size:.875rem; color:var(--muted-foreground); transition:color .18s ease; }
.footer__col a:hover{ color:var(--primary); }
.footer__legal{
  margin-top:clamp(2.5rem,6vh,3.5rem); padding-top:1.5rem;
  border-top:1px solid var(--border);
  display:grid; gap:.4rem;
  font-size:.75rem; color:#6E7F9E;
}
.footer__legal p{ margin:0; }
@media (min-width:760px){ .footer__legal{ grid-template-columns:1fr auto; align-items:center; } }

/* ---------- animazioni ---------- */
[data-fade]{
  opacity:0; transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
[data-fade].is-in{ opacity:1; transform:none; }
[data-fade-delay="1"]{ transition-delay:.08s; }
[data-fade-delay="2"]{ transition-delay:.16s; }
[data-fade-delay="3"]{ transition-delay:.24s; }
[data-fade-delay="4"]{ transition-delay:.32s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-fade]{ opacity:1; transform:none; }
  .marquee__track{ animation:none; }
}

/* ---------- stampa ---------- */
@media print{
  :root{
    --background:#fff; --foreground:#0B1020; --muted-foreground:#3D4A63;
    --surface:#fff; --muted:#F1F4F9; --border:#D5DCE8;
    --glass:#fff; --glass-muted:#F1F4F9; --glass-nav:#fff;
    --ink-accent:#0B5F86;
  }
  body{ background:#fff !important; color:#0B1020; font-size:11pt; }
  body::before{ display:none; }
  .nav, .nav__mobile, .marquee, .hero__bg, .cta__glow, .dots, .skip-link,
  .hero__cta, .course__link, .form .btn, .form__status, .nav__burger{ display:none !important; }
  .section, .cta, .hero{ padding-block:1.25rem !important; page-break-inside:avoid; }
  .section--alt{ background:none; border:0; backdrop-filter:none; }
  .hero__title, .h2{ color:#0B1020; }
  .hl{ color:var(--ink-accent); }
  .eyebrow, .footer__h, .course__why h4{ color:var(--ink-accent); }
  .stat__num, .course__n, .step__n{ color:var(--ink-accent); filter:none; }
  .course, .pcard, .form, .closing, .codeblock, .footer{
    border:1px solid #CBD3E0; box-shadow:none; background:#fff !important;
    backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
    page-break-inside:avoid;
  }
  .course__why{ background:#F1F4F9; border-left-color:var(--ink-accent); }
  .course::before{ display:none; }
  .courses{ grid-template-columns:repeat(2,1fr) !important; }
  .acc__a[hidden]{ display:block !important; }
  .acc__i{ display:none; }
  [data-fade]{ opacity:1 !important; transform:none !important; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:8pt; color:#5A6780; }
}

/* ==========================================================================
   AGGIUNTE — componenti introdotti con i contenuti definitivi.
   Solo regole NUOVE e additive, costruite sulle variabili :root già esistenti.
   Nessuna regola precedente è stata modificata o rimossa.
   ========================================================================== */

/* firma dei due docenti sotto il sottotitolo dell'hero */
.hero__sign{
  margin:-1.5rem 0 2.25rem;
  font-family:var(--font-mono);
  font-size:.75rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--primary);
}

/* griglia a due colonne, gemella di .grid--3 */
.grid--2{ grid-template-columns:1fr; }
@media (min-width:760px){ .grid--2{ grid-template-columns:repeat(2,1fr); } }

/* fatti datati sotto i blocchi del problema */
.facts{
  display:grid; gap:var(--gap);
  grid-template-columns:1fr;
  margin-top:clamp(2rem,5vh,3rem);
}
@media (min-width:860px){ .facts{ grid-template-columns:repeat(3,1fr); } }
.fact{ padding-left:1rem; border-left:1px solid var(--border); }
.fact__k{
  display:block; margin-bottom:.5rem;
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.6875rem; color:var(--primary);
}
.fact p{ font-size:.875rem; color:var(--muted-foreground); }

/* blocchi interni a una sezione già esistente */
.subsec{ margin-top:clamp(3rem,7vh,4.5rem); }
.subsec__intro{ margin:0 0 1.5rem; font-size:.9375rem; color:var(--muted-foreground); max-width:52ch; }
.subsec > .h4{ margin-bottom:.75rem; }

/* elenco puntato compatto dentro le card (riusa .checks) */
.checks--tight{ gap:.85rem; margin-top:.25rem; }
.checks--tight li{ font-size:.9375rem; color:var(--muted-foreground); }
.checks--tight a{ color:var(--primary); }

/* campi aggiuntivi della card corso */
.course__sub{
  margin:-.25rem 0 .75rem;
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.12em; font-size:.6875rem; color:var(--primary);
}
.course__goal{ font-size:.875rem; color:var(--muted-foreground); margin:0 0 1rem; }
.course__goal b{ color:var(--foreground); font-weight:600; }
.course__learn .lbl{ color:var(--foreground); font-weight:600; }
.course__able{
  font-size:.875rem; color:var(--muted-foreground);
  margin:1.125rem 0 0; padding-top:1.125rem;
  border-top:1px solid var(--border);
}
.course__outcomes{
  margin:.75rem 0 0;
  font-family:var(--font-mono); text-transform:uppercase;
  letter-spacing:.1em; font-size:.6875rem; color:var(--muted-foreground);
}
.course__outcomes span{ color:var(--primary); margin-right:.5rem; }
@media (min-width:1080px){
  .course--wide .course__able,
  .course--wide .course__outcomes{ max-width:64ch; }
}

/* diagramma del flusso n8n */
.flow{
  margin-top:clamp(3rem,7vh,4.5rem);
  background:var(--glass);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2rem);
}
.flow__scroll{ overflow-x:auto; margin:1.5rem 0 0; padding-bottom:.5rem; }
.flow__svg{ width:100%; min-width:900px; height:auto; }
.flow__cap{ margin:1.25rem 0 0; font-size:.8125rem; color:var(--muted-foreground); max-width:70ch; }

.flow-node{ fill:rgba(7,12,26,.65); stroke:var(--border); stroke-width:1; }
.flow-node--cond{ stroke:rgba(0,194,255,.5); }
.flow-chip{ fill:rgba(0,194,255,.12); stroke:rgba(0,194,255,.4); stroke-width:1; }
.flow-chip--cond{ fill:rgba(142,29,235,.18); stroke:rgba(142,29,235,.5); }
.flow-ico{ fill:none; stroke:var(--primary); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; }
.flow-link{ fill:none; stroke:rgba(0,194,255,.45); stroke-width:1.5; }
.flow-label{ fill:var(--foreground); font-family:var(--font-sans); font-size:13px; font-weight:500; }
.flow-branch{
  fill:var(--muted-foreground); font-family:var(--font-mono);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase;
}

/* micro-copy sopra i checkbox del form */
.form__hint{ margin:0 0 .5rem; font-size:.75rem; color:var(--muted-foreground); }

/* stampa: i componenti nuovi seguono le stesse scelte di quelli esistenti */
@media print{
  .flow, .subsec .pcard{ border:1px solid #CBD3E0; background:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; page-break-inside:avoid; }
  .flow__scroll{ overflow:visible; }
  .flow__svg{ min-width:0; }
  .flow-node{ fill:#fff; stroke:#CBD3E0; }
  .flow-chip{ fill:#F1F4F9; stroke:#CBD3E0; }
  .flow-ico, .flow-link{ stroke:#0B5F86; }
  .flow-label{ fill:#0B1020; }
  .hero__sign, .fact__k, .course__sub, .course__outcomes span{ color:#0B5F86; }
  .fact{ border-left-color:#CBD3E0; }
}

/* ==========================================================================
   AGGIUNTE 2 — brand Praxia, card a espansione, correzioni di leggibilità.
   Solo regole NUOVE, in coda: nulla di preesistente è stato modificato.
   Dove serviva cambiare l'aspetto di un componente già stilato (firma
   dell'hero, sottotitolo del problema), la nuova regola è dichiarata qui e
   vince per ordine di cascata, lasciando intatta quella originale.
   ========================================================================== */

/* ---------- logo ----------
   Il logotipo testuale resta come fallback se l'immagine non carica.
   L'altezza è tarata sulle lettere, non sul riquadro: il bagliore occupa
   circa un quarto dell'immagine, quindi le lettere risultano alte ~3/4.     */
.logo{ display:inline-flex; align-items:center; gap:.5rem; }
.logo__img{ height:3.25rem; width:auto; }
.logo--footer .logo__img{ height:4rem; }
@media (max-width:520px){ .logo__img{ height:2.75rem; } }
.logo__img + .logo__txt{ display:none; }

/* ---------- hero ----------
   La firma sale sopra il sottotitolo e diventa leggibile anche proiettata:
   il ciano accenta, non porta il testo.                                     */
.hero__sign{
  margin:0 0 1.75rem;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:.2em;
  color:var(--foreground);
}
.hero__sub{ margin-bottom:1.125rem; }
.hero__sub:last-of-type{ margin-bottom:2.25rem; }
.hero__sub strong{ color:var(--foreground); font-weight:600; }

/* ---------- sottotitolo di sezione con peso ---------- */
.sec-head__sub--strong{
  font-size:clamp(1.125rem, 2.2vw, 1.375rem);
  line-height:1.45;
  font-weight:500;
  color:var(--foreground);
  max-width:40ch;
}

/* ---------- leggibilità: testo informativo fuori dal colore d'accento ----- */
.course__sub{ color:var(--foreground); }
.fact__k{ color:var(--foreground); }

/* ---------- card: parte sempre visibile ---------- */
.course__lead{ display:block; }
@media (min-width:1080px){
  .course--wide .course__lead{
    display:grid; grid-template-columns:1.1fr 1fr; gap:2rem 3rem; align-items:start;
  }
  .course--wide .course__lead .course__why{ margin-bottom:0; }
}

/* ---------- card: espansione "Programma completo" ---------- */
.course__toggle{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  width:100%; margin-top:1.25rem;
  padding:.75rem 1rem;
  background:var(--glass-muted);
  border:1px solid var(--border);
  border-radius:var(--radius);
  color:var(--foreground);
  font-size:.875rem; font-weight:600; text-align:left;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease;
}
.course__toggle:hover{ border-color:rgba(0,194,255,.5); background:rgba(0,194,255,.08); }
.course__chev{
  width:18px; height:18px; flex:none;
  fill:none; stroke:var(--primary); stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round;
  transition:transform .28s ease;
}
.course__toggle[aria-expanded="true"] .course__chev{ transform:rotate(180deg); }

.course__panel{ margin-top:1.25rem; }
.course__panel[hidden]{ display:none; }
.course__panel:not([hidden]){ animation:coursePanelIn .28s ease both; }
@keyframes coursePanelIn{
  from{ opacity:0; transform:translateY(-6px); }
  to  { opacity:1; transform:none; }
}
@media (prefers-reduced-motion:reduce){
  .course__panel:not([hidden]){ animation:none; }
}

/* ---------- elenco "tutto compreso" su due colonne ---------- */
@media (min-width:760px){
  .checks--2col{ grid-template-columns:1fr 1fr; column-gap:2.5rem; }
}

/* ---------- stampa ---------- */
@media print{
  /* la pagina verrà stampata: tutte le espansioni risultano aperte */
  .course__toggle{ display:none !important; }
  .course__panel[hidden]{ display:block !important; }
  .course__panel:not([hidden]){ animation:none; }
  .course__sub, .fact__k, .hero__sign{ color:#0B1020; }
  .hero__sub strong{ color:#0B1020; }
  .sec-head__sub--strong{ color:#0B1020; }
  .logo__img{ height:1.5rem; }
}

/* ---------- passata di contrasto ----------
   .pcard__n porta etichette ("Incluso nella proposta", "Modalità A"): piena opacità.
   .step__n numera i passi ed è informativo: alzato oltre 3:1, soglia AA per testo grande.
   .course__n resta com'è: è un filigrana decorativa, marcata aria-hidden.        */
.pcard__n{ color:var(--primary); }
.step__n{ color:rgba(0,194,255,.62); }

/* ==========================================================================
   AGGIUNTE 3 — blocco docenti e correzioni responsive.
   Solo regole nuove, in coda. Nessuna regola preesistente modificata.
   ========================================================================== */

/* ---------- Chi siamo: i due nomi su una riga sola ---------- */
.people__list{ display:flex; flex-wrap:wrap; gap:.5rem 2.5rem; margin-top:.25rem; }
.people__list li{
  font-family:var(--font-display); text-transform:uppercase;
  letter-spacing:-0.005em; line-height:1.1; font-size:1.25rem;
}

/* ---------- correzione responsive: overflow orizzontale in "Perché noi" ----------
   Le due colonne di .split sono grid item, quindi hanno min-width:auto e non
   possono restringersi sotto il proprio min-content. Il <pre> del terminale non
   va a capo: porta il min-content della colonna a 401px, che a 360px allarga la
   griglia a 403px e con essa anche la colonna di testo, tagliando i quattro punti.
   Azzerando il minimo la colonna torna nel contenitore e il codice scorre da solo
   dentro .codeblock__body, che ha già overflow-x:auto.                          */
.split > *{ min-width:0; }

/* la trama di puntini è decorativa e sporge di 1.5rem: su schermi stretti rientra */
@media (max-width:720px){
  .dots{ right:0; bottom:-1rem; }
}