/* =============================================================================
   RAWACADEMY — style.css
   Architettura: variabili → reset → font → tipografia → utilities →
                 componenti → header → footer → hero → responsive
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. CUSTOM PROPERTIES
   ----------------------------------------------------------------------------- */
:root {
  /* Colori */
  --bg:          #020617;
  --bg2:         #0a1020;
  --panel:       rgba(15, 23, 42, .92);
  --text:        #f1f5f9;
  --muted:       #94a3b8;
  --soft:        #cbd5e1;
  --line:        rgba(148, 163, 184, .14);
  --accent:      #22d3ee;
  --accent2:     #38bdf8;
  --accentSoft:  rgba(34, 211, 238, .14);
  --accentDeep:  #0891b2;
  --shadow:      0 4px 24px rgba(2, 6, 23, .7), 0 1px 4px rgba(2, 6, 23, .4);

  /* Layout */
  --r:    14px;
  --max:  1060px;

  /* Cursore glow (aggiornato via JS) */
  --mx: 50%;
  --my: 50%;
}

/* -----------------------------------------------------------------------------
   2. RESET
   ----------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  /* scroll-behavior gestito da Lenis (smooth scroll JS) */
  -webkit-text-size-adjust: 100%;
}

/* Lenis smooth scroll — stili richiesti */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  min-height: 100dvh;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; }
a { color: var(--accent2); text-decoration: none; -webkit-tap-highlight-color: transparent; }
a:hover { color: var(--accent); }
button { cursor: pointer; font: inherit; border: none; background: none; -webkit-tap-highlight-color: transparent; }
ul, ol { list-style: none; }

/* -----------------------------------------------------------------------------
   3. FONT-FACE — self-hosted WOFF2
   ----------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-v31-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat/montserrat-v31-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/space_grotesk/space-grotesk-v22-latin-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/space_grotesk/space-grotesk-v22-latin-500.woff2') format('woff2');
}
@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/space_grotesk/space-grotesk-v22-latin-600.woff2') format('woff2');
}
@font-face {
  font-family: 'SpaceGrotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/space_grotesk/space-grotesk-v22-latin-700.woff2') format('woff2');
}

/* -----------------------------------------------------------------------------
   4. TIPOGRAFIA
   ----------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}

h1 { font-size: clamp(1.8rem, 4.5vw, 2.8rem); }
h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
h3 { font-size: clamp(1.1rem, 2vw, 1.4rem); }

p { line-height: 1.7; }

.kicker {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-family: 'SpaceGrotesk', system-ui, sans-serif;
}

.lead {
  font-size: 1.05rem;
  color: var(--soft);
  line-height: 1.75;
}

.muted { color: var(--muted); }
.small { font-size: .88rem; }

/* -----------------------------------------------------------------------------
   5. UTILITIES
   ----------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 48px);
}

.section {
  padding-block: clamp(56px, 8vw, 96px);
}

.grid2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.stack { display: flex; flex-direction: column; }
.stack--sm  { gap: 8px; }
.stack--md  { gap: 16px; }
.stack--lg  { gap: 28px; }

.flex { display: flex; align-items: center; }
.flex--between { justify-content: space-between; }
.flex--gap-sm  { gap: 10px; }
.flex--gap-md  { gap: 18px; }

/* -----------------------------------------------------------------------------
   6. COMPONENTI BASE
   ----------------------------------------------------------------------------- */

/* Bottoni */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 26px;
  border-radius: var(--r);
  font-size: .95rem;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
  letter-spacing: .01em;
  border: 1px solid transparent;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease, border-color .22s ease;
  white-space: nowrap;
}

.btn--primary {
  background: linear-gradient(135deg, var(--accent), var(--accentDeep));
  color: #020617;
  border-color: transparent;
  box-shadow: 0 0 22px rgba(34, 211, 238, .25);
}
.btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 32px rgba(34, 211, 238, .4);
  color: #020617;
}

.btn--ghost {
  background: transparent;
  color: var(--soft);
  border-color: var(--line);
}
.btn--ghost:hover {
  border-color: rgba(148, 163, 184, .4);
  color: var(--text);
  transform: translateY(-1px);
}

/* Card */
.card {
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 24px;
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Reveal scroll */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* -----------------------------------------------------------------------------
   7. HEADER / TOPBAR
   ----------------------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 100;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(2, 6, 23, .82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  transition: background .25s ease, border-color .25s ease;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 48px);
}

/* Brand */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand__logo {
  height: 32px;
  width: auto;
}

.brand__name {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--text);
  letter-spacing: .02em;
}

/* Nav desktop */
.nav {
  display: flex;
  align-items: center;
  gap: 28px;
}

.nav__link {
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
  letter-spacing: .01em;
}
.nav__link:hover,
.nav__link.is-active { color: var(--text); }

.nav__cta {
  margin-left: 8px;
  padding: 8px 20px;
  font-size: .88rem;
}

/* Burger (mobile) */
.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 4px;
  border-radius: 8px;
  transition: background .2s ease;
}
.burger:hover { background: var(--accentSoft); }

.burger__bar {
  display: block;
  height: 2px;
  border-radius: 2px;
  background: var(--soft);
  transition: transform .28s ease, opacity .2s ease, width .2s ease;
}
.burger__bar:nth-child(1) { width: 22px; }
.burger__bar:nth-child(2) { width: 16px; }
.burger__bar:nth-child(3) { width: 22px; }

.burger.is-open .burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 22px;
}
.burger.is-open .burger__bar:nth-child(2) { opacity: 0; }
.burger.is-open .burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 22px;
}

/* Drawer mobile */
.drawer {
  display: none;
  position: fixed;
  top: 64px;
  inset-inline: 0;
  z-index: 99;
  background: rgba(2, 6, 23, .96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
  padding: 20px clamp(18px, 4vw, 48px) 24px;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
}
.drawer.is-open {
  display: flex;
  opacity: 1;
  transform: translateY(0);
}

.drawer__link {
  font-size: 1rem;
  font-weight: 500;
  color: var(--soft);
  padding: 12px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: color .2s ease;
}
.drawer__link:last-child { border-bottom: none; }
.drawer__link:hover { color: var(--accent); }

/* Spacer per compensare header fixed */
.topbar-spacer { height: 64px; }

/* -----------------------------------------------------------------------------
   8. FOOTER
   ----------------------------------------------------------------------------- */
.footer {
  border-top: 1px solid var(--line);
  padding-block: 32px 28px;
  background: var(--bg);
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer__copy {
  font-size: .82rem;
  color: var(--muted);
}

.footer__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}

.footer__link {
  font-size: .82rem;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s ease;
}
.footer__link:hover { color: var(--soft); }

/* -----------------------------------------------------------------------------
   9. HERO — placeholder minimale
   ----------------------------------------------------------------------------- */
.hero {
  min-height: clamp(420px, 60vh, 640px);
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* stacking context per .hero__bg z-index negativo */
}

/* Hero con foto studio: il background entra subito, il testo dopo (delayed) */
.hero--has-bg { min-height: clamp(520px, 72vh, 760px); }

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    /* overlay scuro per leggibilita del testo */
    linear-gradient(180deg,
      rgba(2, 6, 23, 0.55) 0%,
      rgba(2, 6, 23, 0.70) 45%,
      rgba(2, 6, 23, 0.88) 85%,
      rgba(2, 6, 23, 0.96) 100%),
    /* gradient laterale per dare profondita */
    linear-gradient(90deg,
      rgba(2, 6, 23, 0.35) 0%,
      rgba(2, 6, 23, 0.0) 40%,
      rgba(2, 6, 23, 0.0) 60%,
      rgba(2, 6, 23, 0.25) 100%),
    /* foto studio */
    url("../images/studio.webp") center / cover no-repeat;
  /* dissolvenza del bordo superiore: la foto svanisce verso l'alto */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 8%, #000 22%);
          mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.35) 8%, #000 22%);
  animation: heroBgZoom 26s ease-out forwards;
  will-change: transform;
}

@keyframes heroBgZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

/* Sfondo sfumato */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 55% at 60% 40%, rgba(34, 211, 238, .07), transparent 70%),
    radial-gradient(ellipse 50% 40% at 20% 70%, rgba(56, 189, 248, .05), transparent 60%);
  pointer-events: none;
}

/* Animazione A — data grid drift */
.hero::after {
  content: '';
  position: absolute;
  top: -120px; left: -120px; right: -120px; bottom: -120px;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 57px,
      rgba(34, 211, 238, .022) 57px, rgba(34, 211, 238, .022) 58px
    ),
    repeating-linear-gradient(
      90deg,
      transparent, transparent 111px,
      rgba(34, 211, 238, .016) 111px, rgba(34, 211, 238, .016) 112px
    );
  animation: heroDrift 24s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes heroDrift {
  from { transform: translate(0, 0); }
  to   { transform: translate(112px, 58px); }
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
}

.hero__kicker {
  margin-bottom: 16px;
}

.hero__title {
  margin-bottom: 20px;
}

.hero__lead {
  margin-bottom: 32px;
  max-width: 520px;
}

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Badge Trustpilot piccolo nella hero — closing argument della prima schermata */
.hero__rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 7px 14px;
  background: rgba(15, 23, 42, .55);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .82rem;
  color: var(--soft);
  text-decoration: none;
  width: fit-content;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: border-color .25s, background-color .25s, color .25s;
}
.hero__rating:hover {
  border-color: var(--accent);
  background: rgba(15, 23, 42, .75);
  color: var(--text);
}
.hero__rating-stars {
  color: #fbbf24;
  letter-spacing: 1px;
  font-size: .9rem;
  line-height: 1;
}
.hero__rating-score strong {
  color: var(--text);
  font-weight: 700;
}
.hero__rating-sep {
  color: var(--muted);
  opacity: .55;
}
.hero__rating-source {
  color: var(--muted);
  font-size: .76rem;
}

/* Entrata cinematografica del testo hero (delayed dopo la foto) */
@media (prefers-reduced-motion: no-preference) {
  .hero--has-bg .reveal {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
    animation: heroIntroFade 1.15s cubic-bezier(.16, .84, .44, 1) forwards;
  }
  .hero--has-bg .hero__kicker.reveal  { animation-delay: 1.6s; }
  .hero--has-bg .hero__title.reveal   { animation-delay: 1.95s; }
  .hero--has-bg .hero__lead.reveal    { animation-delay: 2.30s; }
  .hero--has-bg .hero__actions.reveal { animation-delay: 2.65s; }
  .hero--has-bg .hero__rating.reveal  { animation-delay: 3.00s; }
}

@keyframes heroIntroFade {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* -----------------------------------------------------------------------------
   11. SECTION ABOUT
   ----------------------------------------------------------------------------- */
.section--about {
  background: var(--bg2);
}

.about__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: start;
  margin-top: 28px;
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.about__panels {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.about__panel {
  padding: 18px 20px;
}

.panel-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  font-family: 'SpaceGrotesk', system-ui, sans-serif;
}

.panel-list {
  padding-left: 16px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.panel-list li {
  font-size: .88rem;
  color: var(--soft);
  line-height: 1.5;
}

/* -----------------------------------------------------------------------------
   12. SECTION PATHS — flip cards
   ----------------------------------------------------------------------------- */
.paths__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 36px;
}

.paths__subsection {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,.08);
}

.paths__subhead {
  max-width: 760px;
}

.paths__subsection-title {
  margin: 10px 0 12px;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  line-height: 1.1;
}

.paths__subsection-lead {
  margin: 0;
  color: var(--soft);
  line-height: 1.7;
}

/* Contenitore prospettica — riceve anche .reveal per lo scroll */
.flip-wrap {
  perspective: 1000px;
  position: relative;
  transition: transform .4s cubic-bezier(.16, .84, .44, 1);
}

/* Card featured (Live): scala leggera + glow su hover.
   Scale 1.03 non rompe il grid (il bounding box resta nel cell). */
.flip-wrap--featured {
  transform: scale(1.03);
  z-index: 2;
}
.flip-wrap--featured:hover {
  transform: scale(1.05);
}
.flip-wrap--featured .flip-front {
  border-color: rgba(251, 191, 36, .38);
  box-shadow: var(--shadow),
              inset 0 1px 0 rgba(255, 255, 255, .08),
              0 0 0 1px rgba(251, 191, 36, .14);
}
.flip-wrap--featured:hover .flip-front {
  box-shadow: var(--shadow),
              inset 0 1px 0 rgba(255, 255, 255, .1),
              0 0 0 1px rgba(251, 191, 36, .28),
              0 0 40px rgba(251, 191, 36, .20);
}
.flip-wrap--featured .flip-title {
  font-weight: 700;
}

/* Badge LIVE / ON-DEMAND in alto a destra della card */
.flip-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px 6px 9px;
  border-radius: 999px;
  font-family: 'SpaceGrotesk', system-ui, sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.flip-badge--live {
  background: rgba(220, 38, 38, .18);
  border: 1px solid rgba(248, 113, 113, .5);
  color: #fecaca;
}

.flip-badge--ondemand {
  background: rgba(15, 23, 42, .60);
  border: 1px solid var(--line);
  color: var(--soft);
}

.flip-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f87171;
  box-shadow: 0 0 10px rgba(248, 113, 113, .8);
  animation: liveDotPulse 1.6s ease-in-out infinite;
}

.flip-badge__icon {
  font-size: .68rem;
  line-height: 1;
  display: inline-block;
  color: var(--accent);
}

@keyframes liveDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .5;  transform: scale(.82); }
}

@media (prefers-reduced-motion: reduce) {
  .flip-badge__dot { animation: none; }
  .flip-wrap--featured,
  .flip-wrap--featured:hover { transform: none; }
}

/* Mobile: scale featured ridotta a 1 (stack verticale, la gerarchia visiva
   sta nel badge LIVE animato) */
@media (max-width: 768px) {
  .flip-wrap--featured,
  .flip-wrap--featured:hover { transform: none; }
}

/* Carta cliccabile — NO overflow: hidden, NO transform propri */
.flip-card {
  position: relative;
  height: 420px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.flip-card:focus { outline: none; }
.flip-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: var(--r);
}

/* Pannello rotante */
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .56s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}

.flip-card.is-flipped .flip-inner {
  transform: rotateY(180deg);
}

/* Facce — overflow: hidden sicuro qui (non sul contenitore preserve-3d) */
.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  padding: 32px 28px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Animazione B — border breath */
.flip-front {
  justify-content: center;
  background: linear-gradient(160deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
  animation: cardBreath 7s ease-in-out infinite;
}

/* Stagger naturale per variante */
.flip-front--mentor       { animation-delay: 2.5s; }

@keyframes cardBreath {
  0%, 100% { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06); }
  50%      { box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06),
                         0 0 24px rgba(34, 211, 238, .07); }
}

.flip-back {
  transform: rotateY(180deg);
  background: linear-gradient(160deg, rgba(34,211,238,.06), rgba(255,255,255,.01));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.08);
  justify-content: flex-start;
}

/* Sfondo radiale fronte Bootcamp Studio — identita EMERALD (accessibile, vivo, opportunita) */
.flip-front--boot {
  background:
    linear-gradient(150deg, rgba(2, 6, 23, .84) 0%, rgba(2, 6, 23, .65) 100%),
    url('../images/bootcamp-bg.webp') center / cover no-repeat;
  border-color: rgba(16, 185, 129, .26);
}

.flip-front--boot::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 30% 15%, rgba(16, 185, 129, .15), transparent 60%);
  pointer-events: none;
}

/* Hover STUDIO: glow emerald sottile (meno intenso del glow oro della LIVE) */
.flip-wrap:not(.flip-wrap--featured):hover .flip-front--boot {
  box-shadow: var(--shadow),
              inset 0 1px 0 rgba(255, 255, 255, .06),
              0 0 0 1px rgba(16, 185, 129, .22),
              0 0 28px rgba(16, 185, 129, .14);
}

/* Badge ON-DEMAND: bordo emerald sottile + triangolo emerald */
.flip-badge--ondemand {
  border-color: rgba(16, 185, 129, .35);
}
.flip-badge--ondemand .flip-badge__icon {
  color: #10b981;
}

/* Sfondo radiale fronte Bootcamp Live — identita ORO/AMBRA (premium, esclusivo) */
.flip-front--mentor {
  background:
    linear-gradient(130deg, rgba(2, 6, 23, .86) 0%, rgba(2, 6, 23, .68) 100%),
    url('../images/mentor-bg.webp') center / cover no-repeat;
  border-color: rgba(251, 191, 36, .28);
}

.flip-front--mentor::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 55% at 70% 15%, rgba(251, 191, 36, .18), transparent 60%);
  pointer-events: none;
}

/* Tipografia interna carte */
.flip-kicker { margin-bottom: 10px; }

.flip-title {
  font-family: 'Montserrat', system-ui, sans-serif;
  font-size: clamp(1.9rem, 3.2vw, 2.5rem);
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  margin-bottom: 12px;
  line-height: 1.05;
}

.flip-sub {
  font-size: .92rem;
  color: var(--soft);
  line-height: 1.65;
  margin-bottom: 20px;
}

.flip-hint {
  font-size: .76rem;
  color: var(--accent);
  font-weight: 500;
  letter-spacing: .06em;
  font-family: 'SpaceGrotesk', system-ui, sans-serif;
  opacity: .75;
  transition: opacity .2s ease;
}

.flip-card:hover .flip-hint { opacity: 1; }

.flip-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 16px;
  padding-left: 16px;
  list-style: disc;
}

.flip-list li {
  font-size: .9rem;
  color: var(--soft);
  line-height: 1.5;
}

.flip-note {
  font-size: .82rem;
  color: var(--muted);
  padding-top: 14px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.flip-note--placeholder {
  line-height: 1.6;
}

.flip-closing {
  font-size: .82rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.55;
  margin-top: 4px;
}

.flip-link {
  color: var(--accent);
  font-weight: 500;
}
.flip-link:hover { color: var(--accent2); }

/* Link secondario sul retro ("Programma completo"): grigio e sottolineato, su una riga
   sua, cosi' non si confonde con l'azione colorata (Acquista / Iscriviti) */
.flip-info {
  display: block;
  margin-bottom: 8px;
  color: var(--muted);
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(148, 163, 184, .45);
}
.flip-info:hover { color: var(--soft); text-decoration-color: currentColor; }

/* Retro card — tinta coerente con l'identita del fronte
   (gradient sottile + bordo + link + bordo del flip-note) */

/* Retro BOOTCAMP LIVE — oro/ambra */
.flip-back--mentor {
  background: linear-gradient(160deg, rgba(251, 191, 36, .07), rgba(255, 255, 255, .015));
  border-color: rgba(251, 191, 36, .20);
}
.flip-back--mentor .flip-note {
  border-top-color: rgba(251, 191, 36, .18);
}
.flip-back--mentor .flip-link {
  color: #fbbf24;
}
.flip-back--mentor .flip-link:hover {
  color: #fcd34d;
}

/* Retro BOOTCAMP STUDIO — emerald */
.flip-back--boot {
  background: linear-gradient(160deg, rgba(16, 185, 129, .06), rgba(255, 255, 255, .015));
  border-color: rgba(16, 185, 129, .20);
}
.flip-back--boot .flip-note {
  border-top-color: rgba(16, 185, 129, .18);
}
.flip-back--boot .flip-link {
  color: #10b981;
}
.flip-back--boot .flip-link:hover {
  color: #34d399;
}

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

/* -----------------------------------------------------------------------------
   13. SECTION TOPICS — pannello tabbed
   ----------------------------------------------------------------------------- */
.section--topics {
  background: var(--bg2);
}

/* Animazione C — console grid + scan */
.topics-panel {
  margin-top: 36px;
  border: 1px solid rgba(34, 211, 238, .18);
  border-radius: var(--r);
  background: linear-gradient(160deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
  box-shadow: 0 0 48px rgba(34, 211, 238, .06), var(--shadow);
  overflow: hidden;
  position: relative;
}

/* Griglia tecnica di sfondo */
.topics-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(34, 211, 238, .026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, .026) 1px, transparent 1px);
  background-size: 52px 36px;
  pointer-events: none;
  z-index: 0;
}


/* Contenuti sopra gli overlay */
.topics-tabs    { position: relative; z-index: 2; }
.topics-content { position: relative; z-index: 2; }

/* --- Barra tab --- */
.topics-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 16px 16px 0;
  border-bottom: 1px solid rgba(34, 211, 238, .28);
  gap: 4px;
  background: rgba(34, 211, 238, .04);
}

.topics-tab {
  position: relative;
  padding: 10px 18px 14px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-family: 'SpaceGrotesk', system-ui, sans-serif;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}

.topics-tab:focus         { outline: none; }
.topics-tab:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 6px 6px 0 0;
}

.topics-tab:hover {
  color: var(--soft);
}

.topics-tab.is-active {
  color: var(--text);
  background: rgba(34, 211, 238, .06);
  border-color: rgba(34, 211, 238, .22);
  box-shadow: 0 0 16px rgba(34, 211, 238, .10);
}

/* chiude visivamente il gap col bordo inferiore */
.topics-tab.is-active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--bg2);
}

/* --- Box contenuto --- */
.topics-content {
  padding: 16px 24px 12px;
  background: rgba(0, 0, 0, .14);
  box-shadow: inset 0 6px 20px rgba(0, 0, 0, .18);
}

.topics-list {
  display: flex;
  flex-direction: column;
}

.topics-list li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  font-size: .95rem;
  color: var(--soft);
  line-height: 1.5;
  border-bottom: 1px solid var(--line);
}

.topics-list li:last-child {
  border-bottom: none;
}

.topics-list li::before {
  content: '◈';
  color: var(--accent);
  font-size: .68rem;
  flex-shrink: 0;
}

/* -----------------------------------------------------------------------------
   14. SECTION LISTA
   ----------------------------------------------------------------------------- */
.lista__inner {
  max-width: 580px;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  /* Pannello glassy leggero: sfoca le candele dietro -> testo leggibile, niente "sporco" */
  padding: clamp(28px, 4vw, 48px) clamp(22px, 3.5vw, 40px);
  background: linear-gradient(180deg, rgba(12, 18, 34, .28), rgba(12, 18, 34, .36));
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 22px;
  backdrop-filter: blur(6px) saturate(115%);
  -webkit-backdrop-filter: blur(6px) saturate(115%);
  box-shadow: 0 10px 36px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .05);
}

.lista__note {
  font-size: .84rem;
}

/* -----------------------------------------------------------------------------
   15. PAGINA CHI SIAMO
   ----------------------------------------------------------------------------- */
.chi-page {
  max-width: 720px;
  padding-block: clamp(32px, 5vw, 60px);
}

.chi-page h1 {
  margin-bottom: 28px;
}

.chi-page p {
  font-size: .97rem;
  color: var(--soft);
  line-height: 1.8;
  margin-bottom: 18px;
}

.chi-page .lead {
  font-size: 1.06rem;
  color: var(--soft);
  line-height: 1.8;
  margin-bottom: 22px;
}

.chi-callout {
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--text);
  padding: 16px 22px;
  border-left: 2px solid var(--accent);
  background: var(--accentSoft);
  border-radius: 0 var(--r) var(--r) 0;
  margin: 28px 0;
}

/* -----------------------------------------------------------------------------
   10. RESPONSIVE — 3 breakpoint puliti
   ----------------------------------------------------------------------------- */

/* Tablet (≤ 860px) */
@media (max-width: 860px) {
  .nav    { display: none; }
  .burger { display: flex; }

  .grid2 { grid-template-columns: 1fr; }
  .grid3 { grid-template-columns: repeat(2, 1fr); }

  .hero__inner { max-width: 100%; }

  /* About */
  .about__grid { grid-template-columns: 1fr; gap: 28px; }

  /* Paths — le card rimangono affiancate fino a 860px, poi si impilano */
  .paths__grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .flip-card   { height: 400px; }
  .paths__subsection { margin-top: 44px; padding-top: 28px; }

  /* Topics */
  .topics-tabs    { grid-template-columns: repeat(2, 1fr); padding: 12px 12px 0; }
  .topics-tab     { padding: 8px 12px 12px; font-size: .68rem; }
  .topics-content { padding: 12px 16px 8px; }
}

/* Mobile (≤ 560px) */
@media (max-width: 560px) {
  .grid3 { grid-template-columns: 1fr; }

  .footer__inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer__links { gap: 14px; }

  .hero__actions { flex-direction: column; align-items: flex-start; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  /* Paths — impila le card su mobile */
  .paths__grid { grid-template-columns: 1fr; }
  .flip-card   { height: 410px; }
  .paths__subsection-title { font-size: 1.5rem; }

  /* Lista */
  .lista__inner .btn { width: 100%; justify-content: center; }
}

/* Fold chiuso / ultra-stretto (≤ 360px) */
@media (max-width: 360px) {
  .topics-tab {
    font-size: .60rem;
    padding: 7px 8px 10px;
    letter-spacing: .07em;
    white-space: normal;
  }
}

/* Desktop ampio (≥ 1200px) */
@media (min-width: 1200px) {
  .hero { min-height: 680px; }
}

/* Accessibilità — disabilita tutte le animazioni ambient */
@media (prefers-reduced-motion: reduce) {
  .hero::after { animation: none; }
  .flip-front  { animation: none; }
}

/* =============================================================================
   CINEMATIC MARKET FLOW — Regia scroll-driven istituzionale
   Stack: Lenis (smooth scroll) + GSAP/ScrollTrigger (timelines).
   Il JS scrive gli stati animati; qui definiamo gli stati INIZIALI
   e il layer ambient (canvas market-flow).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   MARKET FLOW — canvas ambient fixed
   Renderizza griglia tecnica + data flow + volume pulses
   ----------------------------------------------------------------------------- */
#raw-3d-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(.22,.61,.36,1);
}

/* INTRO CINEMATICA — overlay a tutto schermo (primo caricamento) */
#raw-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  /* Deve COMBACIARE col gradiente iniziale del canvas WebGL (vedi BG_C_START/BG_E_START
     in intro.js) per non far vedere uno "stacco" di colore prima che il canvas dipinga. */
  background: radial-gradient(circle at 50% 47%, #2748c0 0%, #1d3aa0 58%, #163083 100%);
  overflow: hidden;
  transform-origin: 50% 48%;
  transition: opacity .9s ease, transform 1.1s cubic-bezier(.6,0,.2,1);
}
/* Uscita: WIPE diagonale — l'intro viene "cancellata" progressivamente rivelando il sito */
#raw-intro.is-wipe { animation: rawWipe 1.15s cubic-bezier(.55,0,.3,1) forwards; }
@keyframes rawWipe {
  from { clip-path: polygon(-30% 0%, 130% 0%, 130% 100%, -55% 100%); }
  to   { clip-path: polygon(155% 0%, 130% 0%, 130% 100%, 130% 100%); }
}
#raw-intro-canvas { position: absolute; inset: 0; width: 100vw; height: 100vh; display: block; }

#raw-intro-stage {
  position: absolute;
  left: 50%; top: 63%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
#raw-intro-word {
  font-weight: 800;
  letter-spacing: .62em;                 /* parte larga, poi si assesta */
  color: #fff;
  white-space: nowrap;
  font-size: clamp(26px, 6vw, 82px);
  padding-left: .62em;                    /* compensa il letter-spacing per centrare */
  text-shadow: 0 2px 24px rgba(0, 30, 70, .35);
  transition: letter-spacing 1.1s cubic-bezier(.2,.7,.2,1), padding-left 1.1s cubic-bezier(.2,.7,.2,1);
}
#raw-intro-word.show { letter-spacing: .18em; padding-left: .18em; }
#raw-intro-word .l {
  display: inline-block;
  opacity: 0;
  transform: translateY(26px) rotateX(-40deg);
  filter: blur(10px);
  transition: opacity .6s ease, transform .8s cubic-bezier(.18,.7,.2,1), filter .55s ease;
  will-change: opacity, transform, filter;
}
#raw-intro-word.show .l { opacity: 1; transform: none; filter: none; }

#raw-intro-line {
  height: 2px; width: min(46vw, 520px);
  margin: 18px auto 0;
  background: linear-gradient(90deg, transparent, #22d3ee, #7df0ff, #22d3ee, transparent);
  transform: scaleX(0);
  transform-origin: 50% 50%;
  opacity: 0;
  transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .5s ease;
}
#raw-intro-line.show { transform: scaleX(1); opacity: .95; }

/* colpo di luce che attraversa la scena una volta */
/* Fascio di luce diagonale a tutto schermo: attraversa e "cancella" l'intro (wipe) */
#raw-intro-shine {
  position: fixed; top: -25%; bottom: -25%; left: 0; width: 100%;
  z-index: 100000; pointer-events: none; opacity: 0;
  background: linear-gradient(108deg, transparent 43%, rgba(180,235,255,.5) 48%, rgba(255,255,255,.95) 50%, rgba(180,235,255,.5) 52%, transparent 57%);
  transform: translateX(-120%);
}
#raw-intro-shine.is-wipe { animation: rawGlowSweep 1.15s cubic-bezier(.55,0,.3,1) forwards; }
@keyframes rawGlowSweep {
  0%   { transform: translateX(-120%); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateX(120%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { #raw-intro, #raw-intro-shine { display: none; } }
#raw-3d-canvas.is-ready { opacity: 1; }

/* Tutto il contenuto sopra il canvas */
body { position: relative; }
main, .footer, .topbar-spacer, .flash-wrap { position: relative; z-index: 1; }   /* 13/10: senza .drawer, che deve restare fixed */
/* la topbar NON va qui: resta position:fixed (sezione 7) e visibile per tutto il sito */
.topbar { z-index: 100; }

/* Rendi le sezioni semi-trasparenti così il canvas trapela dietro (profondità) */
/* About: sfondo scuro uniforme come prima. Rimosso solo il backdrop-filter blur,
   che sfocava i punti di luce del logo dietro la sezione. */
.section--about  { background: linear-gradient(180deg, rgba(10,16,32,.72), rgba(10,16,32,.82)) !important; }
.section--paths  { background: linear-gradient(180deg, rgba(2,6,23,.55),   rgba(2,6,23,.78))   !important; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.section--topics { background: linear-gradient(180deg, rgba(10,16,32,.70), rgba(10,16,32,.84)) !important; backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.hero            { background: transparent !important; }

/* -----------------------------------------------------------------------------
   CINEMATIC SECTION ENTRANCE — blur + scale che si risolve
   Applicato da GSAP al trigger. Qui solo gli stati iniziali (prima del JS).
   ----------------------------------------------------------------------------- */
.cine-section {
  position: relative;
}

/* Stato iniziale: invisibile, leggermente ingrandito e sfocato */
.cine-section.is-cine-init > .wrap {
  opacity: 0;
  filter: blur(16px);
  transform: scale(1.04);
  transform-origin: 50% 40%;
  will-change: transform, filter, opacity;
}

/* Elementi interni in stato iniziale (il JS li anima in timeline) */
.cine-section.is-cine-init .cine-fade,
.cine-section.is-cine-init .cine-line,
.cine-section.is-cine-init .cine-panel,
.cine-section.is-cine-init .cine-card,
.cine-section.is-cine-init .cine-console,
.cine-section.is-cine-init [data-split] .split-word {
  opacity: 0;
}

.cine-section.is-cine-init .cine-panel  { transform: translate3d(24px, 0, 0); filter: blur(10px); }
.cine-section.is-cine-init .cine-card   { transform: translate3d(0, 40px, 0); filter: blur(12px); }
.cine-section.is-cine-init .cine-console{ transform: translate3d(0, 24px, 0) scale(.97); filter: blur(14px); }
.cine-section.is-cine-init .cine-fade   { transform: translate3d(0, 14px, 0); }
.cine-section.is-cine-init .cine-line   { clip-path: inset(0 0 100% 0); }

/* Split text: ogni parola è un blocco 3D che si solleva */
[data-split] {
  display: inline;
}
.split-word {
  display: inline-block;
  white-space: pre;
  will-change: transform, filter, opacity;
}
.cine-section.is-cine-init [data-split] .split-word {
  transform: translate3d(0, 60px, 0);
  filter: blur(14px);
}

/* -----------------------------------------------------------------------------
   SCROLL PARALLAX — elementi che si muovono con lo scroll (scroll-linked)
   Il JS aggiorna --parallax-y sulle [data-parallax]
   ----------------------------------------------------------------------------- */
[data-parallax] {
  transform: translate3d(0, var(--parallax-y, 0px), 0);
  will-change: transform;
}

/* -----------------------------------------------------------------------------
   FALLBACK — se GSAP/Lenis non caricano, nessuno stato iniziale
   (.is-cine-init è aggiunto dal JS solo se librerie disponibili)
   ----------------------------------------------------------------------------- */

/* -----------------------------------------------------------------------------
   RESPONSIVE: su mobile alleggerisco. Lenis disabilitato da JS, canvas leggero.
   ----------------------------------------------------------------------------- */
@media (max-width: 767px) {
  #raw-3d-canvas { opacity: .6; }
  .cine-section.is-cine-init > .wrap {
    filter: blur(10px);
    transform: scale(1.02);
  }
  .cine-section.is-cine-init .cine-panel,
  .cine-section.is-cine-init .cine-card,
  .cine-section.is-cine-init .cine-console {
    filter: blur(6px);
  }
  .section--about, .section--paths, .section--topics { backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* -----------------------------------------------------------------------------
   REDUCED MOTION — tutto visibile, canvas disattivato dal JS
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #raw-3d-canvas { display: none; }
  .cine-section.is-cine-init > .wrap,
  .cine-section.is-cine-init .cine-fade,
  .cine-section.is-cine-init .cine-line,
  .cine-section.is-cine-init .cine-panel,
  .cine-section.is-cine-init .cine-card,
  .cine-section.is-cine-init .cine-console,
  .cine-section.is-cine-init [data-split] .split-word {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
    clip-path: none !important;
  }
}

/* -----------------------------------------------------------------------------
   RECENSIONI — Trustpilot hand-curated
   ----------------------------------------------------------------------------- */
.section--reviews {
  position: relative;
}

.reviews__badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 12px;
  margin: 18px 0 36px;
  padding: 10px 18px;
  background: rgba(15, 23, 42, .55);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .95rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.reviews__stars {
  color: #fbbf24;
  letter-spacing: 1.5px;
  font-size: 1.05rem;
  line-height: 1;
}

.reviews__score { color: var(--soft); }
.reviews__score strong { color: var(--text); font-weight: 700; }
.reviews__count { color: var(--soft); }
.reviews__sep   { color: var(--muted); opacity: .55; }

.reviews__source {
  color: var(--accent);
  font-weight: 500;
}
.reviews__source:hover { color: var(--accent2); text-decoration: underline; }

/* Viewport: clippa il track + sfuma i bordi laterali.
   --marquee-distance = --n card × (card-width + gap): --n (quante recensioni) sta nell'HTML. */
.reviews__viewport {
  --marquee-distance: calc(var(--n, 3) * -342px);
  position: relative;
  overflow: hidden;
  margin: 8px 0 32px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* Track: contiene --n card + --n copie, scorre orizzontale */
.reviews__track {
  display: flex;
  gap: 22px;
  width: max-content;
  will-change: transform;
}

.review {
  flex: 0 0 320px;
  width: 320px;
  margin: 0;
  padding: 24px 22px 20px;
  background: linear-gradient(180deg, rgba(15, 23, 42, .65), rgba(15, 23, 42, .32));
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
}

/* Marquee: sempre in scorrimento, si ferma quando passi il mouse sopra (per leggere) */
.reviews__track {
  animation: reviewsMarquee 32s linear infinite;
  animation-duration: calc(var(--n, 3) * 10.67s);   /* stessa velocità di prima (3 card in 32 s) */
}
@media (hover: hover) and (pointer: fine) {
  .reviews__viewport:hover .reviews__track {
    animation-play-state: paused;
  }
}

@keyframes reviewsMarquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(var(--marquee-distance), 0, 0); }
}

.review__stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 1rem;
  line-height: 1;
}

.review__text {
  margin: 0;
  color: var(--soft);
  font-size: .98rem;
  line-height: 1.65;
  font-style: italic;
  position: relative;
}

.review__text::before {
  content: "\201C";
  position: absolute;
  left: -10px;
  top: -22px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 2.8rem;
  color: var(--accent);
  opacity: .22;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}

.review__author {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.review__name {
  color: var(--text);
  font-weight: 600;
  font-size: .92rem;
}

.review__spenta { opacity: .25; }

/* «Leggi tutta»: porta al testo intero su Trustpilot. Sul computer solo sulle recensioni accorciate,
   sul telefono anche su quelle che non stanno nella scheda (recensioni.js mette .is-tagliata). */
.review__corpo { display: block; }
.review__more {
  display: none;
  align-self: flex-start;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(15, 23, 42, .6);
  color: var(--accent);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.review--accorciata .review__more { display: inline-flex; }
.review__more:hover { color: var(--accent2); border-color: var(--accent); }

.review__source {
  color: var(--muted);
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.reviews__cta {
  display: inline-flex;
  margin: 8px auto 0;
  align-self: center;
  /* il bottone è dentro .wrap; serve il centraggio orizzontale a livello block */
}

.section--reviews .wrap > .reviews__cta {
  display: flex;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

/* Mobile stretto (sotto 600px): marquee orizzontale con card più piccole.
   --n card × (280px + 18px gap) = periodo del marquee. */
@media (max-width: 600px) {
  .reviews__viewport { --marquee-distance: calc(var(--n, 3) * -298px); }
  .reviews__track    { gap: 18px; }
  .review {
    flex: 0 0 280px;
    width: 280px;
    padding: 20px 18px 18px;
  }

  /* Badge: nasconde i separatori "·" (su mobile finivano orfani a fine riga
     quando il flex-wrap mandava a capo "Verificate su Trustpilot") */
  .reviews__badge {
    font-size: .9rem;
    padding: 10px 14px;
    gap: 6px 12px;
  }
  .reviews__sep { display: none; }
}

/* Rispetta reduced-motion: niente marquee */
@media (prefers-reduced-motion: reduce) {
  .reviews__track { animation: none !important; }
}

/* Telefono (o movimento ridotto): niente nastro in CSS, le recensioni si scorrono col dito e si fermano centrate.
   recensioni.js le fa avanzare piano da sole, si ferma quando le tocchi e chiude il giro senza fine. */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .reviews__viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }
  .reviews__viewport::-webkit-scrollbar { display: none; }
  .reviews__track { animation: none; }
  .review { scroll-snap-align: center; }
  /* Sul telefono tutte alte come la scheda di Gabriel (--alta e --righe le calcola recensioni.js): il testo che
     non ci sta si ferma coi puntini e compare «Leggi tutta». */
  .reviews__track.is-misurato { align-items: flex-start; }
  .reviews__track.is-misurato .review { height: var(--alta); }
  .review.is-tagliata .review__corpo {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--righe);
    overflow: hidden;
  }
  .review.is-tagliata .review__more { display: inline-flex; }
}

/* -----------------------------------------------------------------------------
   FORM LISTA — input, radio "card", checkbox, flash messages
   ----------------------------------------------------------------------------- */
.lista__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
  text-align: left;
}

/* Honeypot anti-bot: invisibile a utenti reali, vede solo i bot */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.form-field label,
.form-radio legend {
  font-family: 'SpaceGrotesk', system-ui, sans-serif;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 600;
  padding: 0;
}

.form-field input {
  font-family: 'Montserrat', system-ui, sans-serif;
  background: rgba(15, 23, 42, .55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font-size: .95rem;
  transition: border-color .2s, background-color .2s, box-shadow .2s;
}

.form-field input::placeholder { color: var(--muted); opacity: .6; }

.form-field input:focus {
  outline: none;
  border-color: var(--accent);
  background: rgba(15, 23, 42, .75);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, .12);
}

/* Bordo rosso SOLO dopo che l'utente ha interagito col campo (:user-invalid).
   La vecchia regola con :placeholder-shown colorava di rosso il form gia' al load. */
.form-field input:user-invalid {
  border-color: rgba(248, 113, 113, .5);
}

/* Radio "card" — ogni opzione e un blocco cliccabile, evidenziato quando selezionato */
.form-radio {
  border: none;
  padding: 0;
  margin: 0;
}

.form-radio legend { margin-bottom: 12px; }

.form-radio__options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.form-radio__option {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 14px 16px;
  background: rgba(15, 23, 42, .4);
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color .2s, background-color .2s;
}

.form-radio__option:hover {
  border-color: rgba(34, 211, 238, .35);
  background: rgba(15, 23, 42, .55);
}

.form-radio__option input[type="radio"] {
  accent-color: var(--accent);
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
}

.form-radio__option:has(input[type="radio"]:checked) {
  border-color: var(--accent);
  background: rgba(34, 211, 238, .08);
  box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .25);
}

.form-radio__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.3;
}

.form-radio__text strong {
  color: var(--text);
  font-weight: 600;
  font-size: .95rem;
}

.form-radio__text small {
  color: var(--muted);
  font-size: .8rem;
}

/* Checkbox privacy + termini */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: .88rem;
  color: var(--soft);
  line-height: 1.5;
}

.form-check input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--accent);
  cursor: pointer;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.form-check a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: rgba(34, 211, 238, .35);
  text-underline-offset: 2px;
}

.form-check a:hover {
  color: var(--accent2);
  text-decoration-color: var(--accent);
}

.lista__submit {
  align-self: flex-start;
  margin-top: 6px;
}

/* Flash messages (success/error) — toast fisso sotto l'header: visibile anche
   quando il redirect del form atterra su #lista in fondo alla pagina. */
.flash-wrap {
  position: fixed;
  top: 78px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 120;
  width: min(92vw, 560px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: opacity .4s ease;
}

.flash {
  padding: 12px 16px;
  border-radius: 10px;
  font-size: .92rem;
  border: 1px solid;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .45);
  cursor: pointer;   /* click = chiudi (gestito in main.js) */
}

.flash--success {
  background: linear-gradient(rgba(16, 185, 129, .16), rgba(16, 185, 129, .16)), #0a1322;
  border-color: rgba(16, 185, 129, .45);
  color: #6ee7b7;
}

.flash--error,
.flash--danger {
  background: linear-gradient(rgba(248, 113, 113, .16), rgba(248, 113, 113, .16)), #0a1322;
  border-color: rgba(248, 113, 113, .45);
  color: #fecaca;
}

/* Mobile: form a colonna singola */
@media (max-width: 600px) {
  .form-row { grid-template-columns: 1fr; gap: 12px; }
  .lista__submit { width: 100%; justify-content: center; }
}

/* ============================================================================
   AREA STUDENTI — teaser esclusivo ("annusa" l'area riservata)
   ============================================================================ */
.area {
  display: grid;
  grid-template-columns: 1.02fr 1.12fr;
  gap: 44px;
  align-items: center;
}
.area__points {
  list-style: none;
  margin: 20px 0 26px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.area__points li {
  position: relative;
  padding-left: 26px;
  color: var(--soft);
}
.area__points li::before {
  content: "";
  position: absolute;
  left: 0; top: .55em;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--accent), var(--accentDeep));
  box-shadow: 0 0 10px rgba(34, 211, 238, .5);
}
.area__cta { margin-top: 4px; }

/* Mock "finestra" dell'area riservata */
.area__peek {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(15, 23, 42, .55), rgba(10, 16, 32, .78));
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, .05);
  transform: perspective(1200px) rotateY(-4deg) rotateX(1.5deg);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.area__peek:hover { transform: perspective(1200px) rotateY(0deg) rotateX(0deg); }
.peek__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(2, 6, 23, .5);
}
.peek__dots { display: flex; gap: 6px; }
.peek__dots i { width: 10px; height: 10px; border-radius: 50%; background: rgba(148, 163, 184, .35); }
.peek__title { font-size: .74rem; letter-spacing: .08em; color: var(--muted); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; }
.peek__logo { height: 18px; width: auto; display: block; }
.peek__lock { margin-left: auto; font-size: .72rem; color: var(--accent); letter-spacing: .04em; }
.peek__body { position: relative; padding: 18px; }
.peek__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.peek__chip {
  font-size: .72rem;
  padding: 5px 12px;
  border-radius: 20px;
  border: 1px solid var(--line);
  color: var(--muted);
}
.peek__chip.is-on {
  color: #04121a;
  background: linear-gradient(135deg, var(--accent), var(--accentDeep));
  border-color: transparent;
  font-weight: 700;
}
.peek__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.peek__list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(2, 6, 23, .35);
}
.peek__list .pk-n { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; }
.peek__list .pk-t { flex: 1; color: var(--soft); font-size: .92rem; }
.peek__list .pk-i { color: var(--muted); }
.peek__list li.is-open { border-color: rgba(34, 211, 238, .28); }
.peek__list li.is-open .pk-i { color: var(--accent); }
/* Veil: sfuma e "blocca" la parte bassa -> si annusa cosa c'è dentro */
.peek__veil {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 60%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 0 22px;
  text-align: center;
  background: linear-gradient(to bottom, transparent, rgba(10, 16, 32, .78) 42%, rgba(6, 11, 26, .97));
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}
.peek__veil-lock { font-size: 1.6rem; filter: drop-shadow(0 0 12px rgba(34, 211, 238, .55)); }
.peek__veil p { color: var(--soft); font-size: .85rem; font-weight: 600; margin: 0; }

@media (max-width: 820px) {
  .area { grid-template-columns: 1fr; gap: 28px; }
  .area__peek { transform: none; }
  .area__peek:hover { transform: none; }
}

/* ============================================================================
   PAGINA CONTATTI — card email del team
   ============================================================================ */
.contacts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 30px 0 26px;
}

.contact-card {
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.contact-card .panel-label { margin-bottom: 2px; }

.contact-mail {
  font-size: .92rem;
  color: var(--accent);
  word-break: break-all;
  width: fit-content;
}
.contact-mail:hover { color: var(--accent2); }

@media (max-width: 560px) {
  .contacts-grid { grid-template-columns: 1fr; }
}

/* =============================================================================
   13/10 — CORREZIONI DALLA REVISIONE SU 25 DISPOSITIVI (ecosistema\audit\dispositivi-13-ottobre.md)
   Tutte qui in fondo, cosi' si vedono e si tolgono in un colpo solo.
   ============================================================================= */

/* 2 e 4: i bottoni non escono mai dallo schermo; sui telefoni stretti il testo va a capo */
.btn { max-width: 100%; }
@media (max-width: 430px) {
  .btn { white-space: normal; text-align: center; justify-content: center; }
}

/* 3: telefono in orizzontale, la prima schermata della home sta nello schermo */
@media (max-height: 520px) and (orientation: landscape) {
  /* la hero sta sotto la testata (64px): tutto il blocco, bottoni compresi, entra nello schermo */
  .hero, .hero--has-bg { min-height: calc(100svh - 64px); padding-block: 12px; }
  .hero__kicker { margin-bottom: 6px; }
  .hero__title { margin-bottom: 10px; font-size: clamp(1.6rem, 6.5svh, 2.2rem); line-height: 1.12; }
  .hero__lead { margin-bottom: 16px; font-size: .95rem; line-height: 1.5; }
  .hero__rating { margin-top: 12px; }
}

/* 8: l'email va a capo solo dove serve (non a meta' parola); carte in colonna fino a 760px */
.contact-mail { word-break: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  .contacts-grid { grid-template-columns: 1fr; }
}

/* 11: telefono in orizzontale, le carte dei percorsi stanno nello schermo */
@media (max-height: 500px) and (orientation: landscape) {
  #percorsi .flip-card { height: min(400px, calc(100svh - 90px)); }
}

/* 13: sui dispositivi a tocco i link piccoli hanno una zona da toccare di almeno 40px (il testo resta uguale) */
@media (hover: none) {
  .flip-link { display: inline-flex; align-items: center; min-height: 40px; }
  .flip-info { display: flex; align-items: center; min-height: 40px; margin-bottom: 0; }
  .footer__link, .reviews__source, .nav__link { display: inline-flex; align-items: center; min-height: 40px; }
}

/* 19: il riquadro Trustpilot della hero non spezza "4.4 / 5" ne' "12 recensioni" */
.hero__rating-score, .hero__rating-source { white-space: nowrap; }

/* 23: le carte delle recensioni sono piu' piene: la griglia di sfondo non attraversa il testo */
.review { background: linear-gradient(180deg, rgba(15, 23, 42, .84), rgba(15, 23, 42, .72)); }

/* 25: nelle pagine interne il pie' di pagina sta in fondo anche sugli schermi molto alti */
body.pagina { display: flex; flex-direction: column; }
body.pagina > main { flex: 1 0 auto; }

/* =============================================================================
   13/10 — CORREZIONI DALLA CACCIA AI MICRO-BUG (ecosistema\audit\microbug-13-ottobre.md)
   ============================================================================= */

/* 8: i link a una sezione (#percorsi...) si fermano sotto la testata alta 64px, sempre nello stesso punto */
html { scroll-padding-top: 76px; }

/* 10: il menu a cassetto si apre e si chiude sfumando (prima era display none/flex: niente animazione);
   da chiuso non si tocca e non si raggiunge col Tab */
.drawer { display: flex; visibility: hidden; pointer-events: none; transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; }
.drawer.is-open { visibility: visible; pointer-events: auto; transition: opacity .25s ease, transform .25s ease, visibility 0s; }
@media (min-width: 861px) { .drawer { display: none; } }
@media (hover: none) { .burger:hover { background: transparent; } }

/* 9: tra 561 e 760px le carte restano affiancate (Andrea: come prima, es. il Fold aperto) ma diventano piu' alte,
   cosi' il retro ci sta tutto (misurato: fino a 499px a 561, 413px a 720) */
@media (min-width: 561px) and (max-width: 660px) { #percorsi .flip-card { height: 510px; } }
@media (min-width: 661px) and (max-width: 760px) { #percorsi .flip-card { height: 445px; } }
/* 14/10: tablet e Fold aperto in orizzontale (761-860 px): il retro della Live arrivava a 8 px dal fondo; 420 come sopra gli 860 */
@media (min-width: 761px) and (max-width: 860px) and (min-height: 501px) { #percorsi .flip-card { height: 420px; } }
/* telefono, carte una sopra l'altra: prima il Bootcamp Live, poi lo Studio */
@media (max-width: 560px) { #percorsi .flip-wrap--featured { order: -1; } }
/* 22 (13/10, Andrea): telefono in verticale, carte piu' basse (418 -> 360px) con bordi interni e testi un filo piu' piccoli.
   Comanda il retro: a 418px quello della Live usciva di 6px a 344px di larghezza (Fold chiuso) */
@media (max-width: 560px) {
  #percorsi .flip-card { height: 360px; }
  #percorsi .lastra-testi { padding: 24px 22px; }
  #percorsi .flip-front .lastra-testi { padding-top: 54px; }
  #percorsi .flip-title { font-size: 1.75rem; margin-bottom: 10px; }
  #percorsi .flip-sub { font-size: .88rem; line-height: 1.55; margin-bottom: 12px; }
  #percorsi .flip-list { gap: 6px; margin: 10px 0; }
  #percorsi .flip-list li { font-size: .86rem; line-height: 1.42; }
  #percorsi .flip-note { padding-top: 8px; font-size: .8rem; }
}
/* sotto i 340px il retro della Live va a capo di piu': 20px in piu' (misurato a 320: margine da 2 a 22px) */
@media (max-width: 340px) { #percorsi .flip-card { height: 380px; } }
/* 14/10: telefono in orizzontale. La regola 11 teneva la carta nello schermo (300-340 px), ma il retro della Live
   usciva di 30-75 px («Iscrizioni in arrivo» fuori dalla carta). Stesso stile compatto del telefono in verticale,
   e la carta non scende sotto i 350 px (leggermente piu' alta dello schermo piu' basso: si scorre) */
@media (max-height: 500px) and (orientation: landscape) {
  #percorsi .flip-card { height: max(350px, min(400px, calc(100svh - 90px))); }
  #percorsi .lastra-testi { padding: 20px 22px; }
  #percorsi .flip-front .lastra-testi { padding-top: 50px; }
  #percorsi .flip-title { font-size: 1.6rem; margin-bottom: 8px; }
  #percorsi .flip-sub { font-size: .86rem; line-height: 1.5; margin-bottom: 10px; }
  #percorsi .flip-list { gap: 5px; margin: 8px 0; }
  #percorsi .flip-list li { font-size: .84rem; line-height: 1.4; }
  #percorsi .flip-note { padding-top: 8px; font-size: .78rem; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 700px) { #percorsi .flip-card { height: 370px; } }   /* telefoni piccoli: la Live va a capo di piu' */

/* 20: "Scopri chi siamo" largo quanto il suo testo, come gli altri pulsanti */
.about__text > .btn { align-self: flex-start; }

/* 21: nei contatti le etichette (ANDREA MOSCARIELLO...) tornano alla misura delle etichette del sito */
.chi-page .panel-label { font-size: .72rem; line-height: 1.4; margin-bottom: 2px; }

/* 24: Chi siamo comincia sfumando, cosi' sotto la hero non resta una riga netta di colore */
.section--about { background: linear-gradient(180deg, rgba(10,16,32,0) 0, rgba(10,16,32,.72) 140px, rgba(10,16,32,.82) 100%) !important; }

/* 13/10: la carta che si sta girando sta sopra l'altra, in andata e in ritorno (classe messa da main.js) */
#percorsi .flip-wrap { position: relative; z-index: 1; }
#percorsi .flip-wrap.gira { z-index: 3; }
/* 23 (13/10, Andrea): finche' l'Area non e' in linea i pulsanti verso l'Area sono scritte "in arrivo", non cliccabili.
   Si chiudono e si riaprono tutti insieme con strumenti/area_pulsanti.py (chiudi | apri). */
a.is-presto { cursor: default; }
.btn.is-presto,
.btn.is-presto:hover {
  background: transparent;
  color: var(--muted);
  border: 1px dashed rgba(148, 163, 184, .35);
  box-shadow: none;
  filter: none;
  transform: none;
}
.flip-link.is-presto,
.flip-back .flip-link.is-presto:hover,
.flip-back .flip-link.is-presto { color: var(--muted); }
.drawer__link.is-presto,
.drawer__link.is-presto:hover { color: var(--muted); }