/* ============================================================
   EDITING FOR FREEDOM — Techno-editorial Stylesheet (v2)
   Palette: deep blue radial → black · white grid · yellow-fluo accent
   ============================================================ */

:root {
  /* Top announcement banner height (pinned strip above nav) */
  --banner-h: 40px;

  /* Backdrop */
  --bg-radial-from: #1E40AF;
  --bg-radial-to: #000000;

  /* Accent scale — warmer gold replaces harsh fluo */
  --accent-50:  #FFFBEA;
  --accent-100: #FFF3C4;
  --accent-200: #FCE588;
  --accent-300: #FADB5F;
  --accent-400: #F7C948;
  --accent-500: #FFD400;   /* primary CTA */
  --accent-600: #F0B429;
  --accent-700: #DE911D;
  --accent-800: #CB6E17;
  --accent-900: #8D2B0B;
  --accent: var(--accent-500);
  --accent-soft: rgba(255,212,0,0.85);
  --accent-mute: #E8E0B4;       /* desaturated highlight for non-CTA */
  --terracotta: var(--accent);       /* legacy alias */
  --terracotta-soft: var(--accent-soft);

  /* Text */
  --paper-white: #FFFFFF;
  --paper-soft: rgba(255,255,255,0.92);

  --bg-cream: transparent;
  --bg-cream-warm: transparent;

  --forest-dark: #0A1024;
  --forest-mid: #142552;
  --forest-deep: #050816;

  --foliage: #5A7D3B;
  --foliage-light: #8FA866;

  --mustard: #E2C879;
  --mint: #B8D2BC;

  --ink: #FFFFFF;
  --ink-soft: rgba(255,255,255,0.78);
  --ink-mute: rgba(255,255,255,0.55);

  --line: rgba(255,255,255,0.10);
  --line-strong: rgba(255,255,255,0.20);
  --negative: #FF5A5A;

  --serif: 'Inter', system-ui, -apple-system, sans-serif;
  --sans: 'Inter', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --inter-tracking-display: -0.035em;
  --tracking-body: -0.01em;
  --tracking-tight: -0.025em;

  /* Spacing — 4-based scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --s-11: 160px;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;

  /* Shadow system — single-soft for quiet, lift for primary */
  --shadow-soft: 0 8px 32px rgba(0,0,0,0.30);
  --shadow-card: 0 12px 40px rgba(0,0,0,0.35);
  --shadow-elev: 0 24px 60px rgba(0,0,0,0.45);
  --shadow-lift:
    0 1px 2px rgba(0,0,0,0.40),
    0 4px 12px rgba(0,0,0,0.30),
    0 24px 48px rgba(0,0,0,0.25);
  --shadow-glow-accent:
    0 0 0 1px rgba(255,212,0,0.35),
    0 8px 28px rgba(255,212,0,0.18),
    0 24px 60px rgba(0,0,0,0.45);

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-expo-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back-out: cubic-bezier(0.34, 1.56, 0.64, 1);

  --container: 1180px;
  --container-narrow: 820px;
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { padding: 0; margin: 0; list-style: none; }

/* Global focus-visible ring */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
  border-radius: inherit;
}

body {
  /* Backdrop: radial blue → black; grid via ::before */
  background: radial-gradient(circle at center, var(--bg-radial-from), var(--bg-radial-to));
  background-attachment: fixed;
  color: var(--paper-white);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: var(--tracking-body);
  font-feature-settings: 'ss01', 'cv01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 24px 24px;
}
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}

/* ============================================================
   LENIS
   ============================================================ */
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: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ============================================================
   GRAIN OVERLAY
   ============================================================ */
.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.035;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E");
}
@media (max-width: 768px) {
  .grain { opacity: 0.018; }
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: var(--banner-h, 40px); left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 32px;
  background: color-mix(in srgb, var(--bg-cream) 90%, transparent);
  backdrop-filter: saturate(120%) blur(10px);
  -webkit-backdrop-filter: saturate(120%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav-brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-decoration: none;
}
.nav-brand .brand-accent {
  color: var(--accent);
}

.nav-links {
  display: flex;
  gap: 30px;
}
.nav-links a {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  transition: color .25s var(--ease);
  position: relative;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav-links a:hover::after { transform: scaleX(1); }

.nav-cta {
  background: var(--forest-dark);
  color: var(--paper-white);
  padding: 11px 22px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background .25s var(--ease), transform .25s var(--ease);
}
.nav-cta:hover { background: var(--forest-mid); transform: translateY(-1px); }

@media (max-width: 900px) {
  .nav { padding: 14px 20px; }
  .nav-links { display: none; }
  .nav-brand { font-size: 18px; }
  .nav-cta { padding: 9px 16px; font-size: 12px; }
}

/* ============================================================
   LAYOUT PRIMITIVES
   ============================================================ */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 clamp(20px, 6vw, 96px);
}
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; }

.section {
  padding: clamp(96px, 12vw, 160px) 0;
  position: relative;
}
.section-paper { background: var(--bg-cream-warm); }

@media (max-width: 768px) {
  .container { padding: 0 20px; }
  .section { padding: 56px 0; }
  .section-head { margin-bottom: 32px; }
}
@media (max-width: 480px) {
  .section { padding: 44px 0; }
}

.section-head {
  text-align: center;
  margin: 0 auto var(--s-8);
  max-width: 760px;
}
.section-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--terracotta);
  margin-bottom: 18px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--terracotta);
}
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  color: var(--ink);
  text-wrap: balance;
}
.section-title em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}
.section-title em.title-underline {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-underline-offset: 10px;
  text-decoration-color: currentColor;
}
@media (max-width: 600px) {
  .section-title em.title-underline {
    text-decoration-thickness: 2px;
    text-underline-offset: 7px;
  }
}
.section-lead {
  font-size: 18px;
  color: var(--ink-soft);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

@media (max-width: 768px) {
  .section-head { margin-bottom: 56px; }
  .section-lead { font-size: 16px; }
}

/* ============================================================
   EYEBROW
   ============================================================ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta);
  margin-bottom: 28px;
}
.eyebrow .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--terracotta);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--terracotta) 25%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.2); }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .35s var(--ease);
}
.btn-primary {
  background: var(--forest-dark);
  color: var(--paper-white);
  box-shadow: 0 10px 30px rgba(31,61,46,0.20);
}
.btn-primary:hover {
  background: var(--forest-mid);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(31,61,46,0.28);
}
.btn-primary svg { transition: transform .3s var(--ease); }
.btn-primary:hover svg { transform: translateX(4px); }

/* ============================================================
   01. HERO — Prisma exact port (rounded card, video bg, mega title)
   ============================================================ */
.prisma-hero {
  height: 100vh;
  width: 100%;
  min-height: 640px;
}
.prisma-hero-frame {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 1rem;
  isolation: isolate;
  background: #000;
}
@media (min-width: 768px) { .prisma-hero-frame { border-radius: 2rem; } }

.prisma-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
@media (max-width: 767px) {
  .prisma-hero-video {
    object-position: 72% center;
  }
}
.prisma-hero-noise {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0.7;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.85'/%3E%3C/svg%3E");
}
.prisma-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.45) 0%,
      rgba(0,0,0,0.10) 38%,
      rgba(0,0,0,0.55) 78%,
      rgba(0,0,0,0.85) 100%);
}

/* Top centered pill nav */
.prisma-hero-nav {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #000;
  padding: 8px 16px;
  border-bottom-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
}
.prisma-hero-nav a {
  font-size: 10px;
  color: rgba(225, 224, 204, 0.8);
  transition: color .25s var(--ease);
  text-decoration: none;
}
.prisma-hero-nav a:hover { color: #E1E0CC; }
@media (min-width: 640px) {
  .prisma-hero-nav { gap: 24px; padding: 8px 24px; }
  .prisma-hero-nav a { font-size: 12px; }
}
@media (min-width: 768px) {
  .prisma-hero-nav { gap: 48px; padding: 8px 32px; border-bottom-left-radius: 1.5rem; border-bottom-right-radius: 1.5rem; }
  .prisma-hero-nav a { font-size: 14px; }
}
@media (min-width: 1024px) { .prisma-hero-nav { gap: 56px; } }

/* Bottom content */
.prisma-hero-content {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 16px 8px;
}
@media (min-width: 640px) { .prisma-hero-content { padding: 0 24px 8px; } }
@media (min-width: 768px) { .prisma-hero-content { padding: 0 40px 8px; } }

.prisma-hero-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  align-items: end;
}
.prisma-hero-left  {
  grid-column: span 12;
  padding-bottom: 32px;
}
.prisma-hero-right {
  grid-column: span 12;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 24px;
}
@media (min-width: 1024px) {
  .prisma-hero-left  { grid-column: span 8; padding-bottom: 56px; }
  .prisma-hero-right { grid-column: span 4; padding-bottom: 56px; }
}

/* TOP-LEFT: brand tag (small wordmark) */
.prisma-hero-tag {
  position: absolute;
  top: 76px;
  left: 24px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 60%;
}
.prisma-hero-tag-mono {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}
.prisma-hero-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 28%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}
.prisma-hero-tag-brand {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.prisma-hero-tag-brand em {
  color: var(--accent);
  font-style: italic;
}
@media (min-width: 768px) {
  .prisma-hero-tag { top: 96px; left: 40px; }
  .prisma-hero-tag-brand { font-size: 30px; }
}
@media (min-width: 1024px) {
  .prisma-hero-tag { top: 108px; left: 48px; gap: 12px; max-width: 60%; }
  .prisma-hero-tag-brand { font-size: clamp(40px, 4vw, 56px); letter-spacing: -0.02em; }
  .prisma-hero-tag-mono { font-size: 11px; letter-spacing: 0.26em; }
}

/* Brand row: nome + pill "Edited by Lorenzo" */
.prisma-hero-brand-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.prisma-hero-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,212,0,0.06);
  border: 1px solid rgba(255,212,0,0.45);
  padding: 6px 12px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(255,212,0,0.12), 0 0 0 3px rgba(255,212,0,0.04);
}
.prisma-hero-tag-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(255,212,0,0.7);
  animation: pulse 2.4s var(--ease) infinite;
}
@media (max-width: 600px) {
  .prisma-hero-tag-pill { font-size: 9px; padding: 5px 10px; }
}
@media (min-width: 1024px) {
  .prisma-hero-tag-pill { font-size: 11px; padding: 7px 14px; }
}

/* TOP-RIGHT: VSL floating video box */
.prisma-hero-vsl {
  position: absolute;
  top: 84px;
  right: 24px;
  z-index: 4;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: float-y 5.5s ease-in-out infinite;
}
@property --bb-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.prisma-hero-vsl-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 16px;
  overflow: hidden;
  background: linear-gradient(140deg, #050816 0%, #142552 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: var(--shadow-lift), 0 0 0 1px rgba(255,212,0,0.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
/* Animated border beam (Magic UI BorderBeam ported to vanilla CSS) */
.prisma-hero-vsl-frame::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--bb-angle),
    transparent 0deg 260deg,
    #FFD400 290deg,
    #FFFFFF 320deg,
    transparent 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
          mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  animation: bb-rotate 6s linear infinite;
  pointer-events: none;
  z-index: 4;
  filter: drop-shadow(0 0 8px rgba(255,212,0,0.55));
}
@keyframes bb-rotate {
  to { --bb-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .prisma-hero-vsl-frame::after { animation: none; }
}
.prisma-hero-vsl-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;       /* shown when src is set */
}
.prisma-hero-vsl-video[src]:not([src=""]) { display: block; }

.prisma-hero-vsl-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.55) 100%);
}
.prisma-hero-vsl-tag {
  position: absolute;
  top: 10px;
  left: 12px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.7);
  padding: 4px 8px;
  background: rgba(0,0,0,0.45);
  border-radius: 999px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.prisma-hero-vsl-play {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  border: none;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(255,212,0,0.35), 0 2px 6px rgba(0,0,0,0.35);
  transition: transform .3s var(--ease);
}
.prisma-hero-vsl-play svg { margin-left: 3px; }
.prisma-hero-vsl-play:hover { transform: scale(1.08); }

.prisma-hero-vsl-label {
  display: block;
  text-align: center;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.72);
}

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@media (max-width: 767px) {
  .prisma-hero-vsl { width: 168px; top: 70px; right: 16px; }
  .prisma-hero-vsl-play { width: 44px; height: 44px; }
  .prisma-hero-vsl-label { font-size: 9px; letter-spacing: 0.14em; }
}
/* Desktop: VSL secondaria, in alto a destra ma più contenuta */
@media (min-width: 1024px) {
  .prisma-hero-vsl {
    width: clamp(260px, 22vw, 340px);
    top: 108px;
    right: 48px;
    gap: 10px;
  }
  .prisma-hero-vsl-frame {
    border-radius: 18px;
    box-shadow:
      0 24px 60px rgba(0,0,0,0.5),
      0 8px 20px rgba(0,0,0,0.35),
      0 0 0 1px rgba(255,212,0,0.06);
  }
  .prisma-hero-vsl-tag { font-size: 10px; top: 12px; left: 14px; padding: 4px 9px; letter-spacing: 0.22em; }
  .prisma-hero-vsl-play { width: 64px; height: 64px; box-shadow: 0 14px 34px rgba(255,212,0,0.4), 0 4px 8px rgba(0,0,0,0.4); }
  .prisma-hero-vsl-play svg { width: 24px; height: 24px; margin-left: 3px; }
  .prisma-hero-vsl-label { font-size: 10px; letter-spacing: 0.20em; }
}
/* Mobile reshuffle: solo la pill "Edited by Lorenzo" resta visibile
   (il wordmark è già nel nav fisso in alto). Claim grande, VSL contenuta,
   CTA + meta centrati. */
@media (max-width: 600px) {
  /* Mostra solo la pill dentro al brand-tag */
  .prisma-hero-tag {
    display: flex;
    top: 70px;
    left: 16px;
    right: 16px;
    max-width: none;
    z-index: 5;
    align-items: center;
    justify-content: center;
  }
  .prisma-hero-tag-mono,
  .prisma-hero-tag-brand { display: none; }
  .prisma-hero-brand-row { gap: 0; justify-content: center; }

  /* VSL spostata più giù per fare spazio alla pill, contenuta lateralmente */
  .prisma-hero-vsl {
    width: auto;
    left: 28px;
    right: 28px;
    top: 110px;
    gap: 10px;
    animation-name: float-y-soft;
  }
  .prisma-hero-vsl-frame {
    border-radius: 16px;
    box-shadow:
      0 24px 50px rgba(0,0,0,0.55),
      0 6px 16px rgba(0,0,0,0.4),
      0 0 0 1px rgba(255,212,0,0.10);
  }
  .prisma-hero-vsl-tag { font-size: 9px; top: 10px; left: 12px; padding: 3px 8px; }
  .prisma-hero-vsl-play { width: 54px; height: 54px; }
  .prisma-hero-vsl-play svg { width: 20px; height: 20px; }
  .prisma-hero-vsl-label {
    display: block;
    font-size: 9px;
    letter-spacing: 0.16em;
    color: rgba(255,255,255,0.62);
  }

  /* Claim BIG = prima cosa che si legge */
  .prisma-hero-claim {
    font-size: clamp(34px, 8.8vw, 46px) !important;
    line-height: 1.04;
    text-align: center;
    letter-spacing: -0.02em;
  }
  .prisma-hero-left {
    text-align: center;
    padding-bottom: 18px;
  }

  /* Meta + CTA centrati orizzontalmente */
  .prisma-hero-right {
    align-items: center;
    text-align: center;
    gap: 16px;
  }
  .prisma-hero-meta {
    justify-content: center;
    flex-wrap: wrap;
  }
  .prisma-hero-cta { align-self: center; }
}

@keyframes float-y-soft {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* Pre-headline banner — full-width strip pinned to top of viewport */
.prisma-hero-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 20px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #0A0A0A;
  background: var(--accent);
  border-bottom: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
  line-height: 1.3;
  text-align: center;
}
.prisma-hero-banner-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #0A0A0A;
  flex: 0 0 7px;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
  animation: pulse 2.4s var(--ease) infinite;
}
@media (max-width: 600px) {
  :root { --banner-h: 36px; }
  .prisma-hero-banner {
    font-size: 9.5px;
    padding: 8px 14px;
    letter-spacing: 0.12em;
    gap: 8px;
  }
}
@media (min-width: 1024px) {
  :root { --banner-h: 44px; }
  .prisma-hero-banner {
    font-size: 12.5px;
    letter-spacing: 0.22em;
    padding: 12px 28px;
  }
}

/* BOTTOM-LEFT: NEW mega claim */
.prisma-hero-claim {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-size: clamp(32px, 5.4vw, 78px);
  color: #FFFFFF;
  margin: 0;
  max-width: 100%;
  text-shadow: 0 2px 24px rgba(0,0,0,0.55);
}
.prisma-hero-claim em {
  color: var(--accent);
  font-style: italic;
  font-weight: 600;
  white-space: nowrap;
}
@media (max-width: 600px) {
  .prisma-hero-claim { font-size: clamp(26px, 7.5vw, 36px); }
}
/* Desktop: claim molto grande + meta/CTA centrati orizzontalmente */
@media (min-width: 1024px) {
  .prisma-hero-claim {
    font-size: clamp(60px, 5.6vw, 86px);
    line-height: 1.02;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .prisma-hero-left {
    grid-column: span 12;
    padding-bottom: 28px;
    text-align: center;
  }
  .prisma-hero-right {
    grid-column: span 12;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding-bottom: 56px;
    flex-wrap: wrap;
  }
  .prisma-hero-grid { gap: 4px; }
}
@media (min-width: 1280px) {
  .prisma-hero-claim { font-size: clamp(68px, 5.4vw, 96px); }
}

.prisma-hero-meta {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.prisma-hero-meta-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
  animation: pulse 2.4s var(--ease) infinite;
}

/* CTA pill — yellow accent for maximum visibility */
.prisma-hero-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--accent);
  color: #000;
  border-radius: 999px;
  padding: 6px 6px 6px 24px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 8px 28px rgba(255,212,0,0.30), 0 2px 6px rgba(0,0,0,0.45);
  transition: gap .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.prisma-hero-cta:hover { gap: 16px; transform: translateY(-1px); }
@media (min-width: 640px) { .prisma-hero-cta { font-size: 18px; padding: 6px 6px 6px 28px; } }
.prisma-hero-cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: #000;
  color: var(--accent);
  border-radius: 999px;
  transition: transform .3s var(--ease);
}
@media (min-width: 640px) { .prisma-hero-cta-icon { width: 48px; height: 48px; } }
.prisma-hero-cta:hover .prisma-hero-cta-icon { transform: scale(1.1); }

/* Pull-up entries initial state */
.pull-up-fade {
  opacity: 0;
  transform: translateY(20px);
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .prisma-hero-video { display: none; }
  .prisma-hero-vsl { animation: none; }
  .pull-up-fade { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   02. PROBLEMA
   ============================================================ */
.problem-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-bottom: 48px;
}
.problem-grid--compare { gap: 20px; }

/* Asymmetric heights desktop: storytelling rhythm */
@media (min-width: 900px) {
  .problem-grid--compare > .problem-card:nth-child(1) { transform: translateY(-14px); }
  .problem-grid--compare > .problem-card:nth-child(2) { transform: translateY(18px); }
}
.problem-card {
  background: var(--paper-white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 32px;
  box-shadow: var(--shadow-soft);
  position: relative;
}
.problem-card:not(.problem-card--v2)::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: 28px;
  font-family: var(--serif);
  font-size: 96px;
  font-style: italic;
  color: var(--terracotta);
  line-height: 1;
  opacity: 0.6;
}

/* --- Card v2: image on top + body --- */
.problem-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 2.2vw, 22px);
  line-height: 1.45;
  color: var(--ink-soft);
  margin-top: 14px;
  max-width: 640px;
}
.problem-lead em { color: var(--ink); font-style: italic; }

.problem-card--v2 {
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.problem-image {
  aspect-ratio: 5 / 4;
  background: var(--paper-soft, #EFEAE0);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.problem-image > img {
  width: 100%;
  height: 112%;
  margin-top: -6%;
  object-fit: cover;
  display: block;
  will-change: transform;
}
@media (hover: hover) and (min-width: 768px) {
  .problem-image > img { transition: transform 1.2s ease; }
}
.problem-card-body { padding: 28px 26px 32px; }
.problem-card-body h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(20px, 3.4vw, 24px);
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 14px;
}
.problem-card-body p {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0;
}

/* reveal-cinematic — visibile di default; JS imposta stato iniziale via gsap.set() */
.reveal-cinematic { will-change: transform, opacity; }
.problem-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 16px;
}
.problem-card p {
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  margin: 0 0 12px;
}
.problem-meta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-mute);
  margin-top: 18px !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.problem-close {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--ink);
  max-width: 720px;
  margin: 50px auto 0;
  line-height: 1.4;
}
.problem-close em { color: var(--terracotta); font-style: italic; }

/* Tablet+ — comparison side-by-side */
@media (min-width: 768px) {
  .problem-grid--compare { grid-template-columns: repeat(2, 1fr); gap: 28px; }
  .problem-card-body { padding: 32px 32px 36px; }
}

/* Hover desktop sottile */
@media (hover: hover) and (min-width: 768px) {
  .problem-card--v2 { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease; }
  .problem-card--v2:hover { transform: translateY(-4px); box-shadow: 0 18px 48px rgba(0,0,0,.18); }
  .problem-card--v2:hover .problem-image > img { transform: scale(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-cinematic { opacity: 1 !important; transform: none !important; }
  .problem-image > img { transform: none !important; }
}

/* ============================================================
   03. SOLUZIONE
   ============================================================ */
.solution-list {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  gap: 30px;
}
.solution-list li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 600px) {
  .solution-list li {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .solution-list li .switch { justify-self: center; margin: 4px auto 0; }
}

/* ---- Interactive toggle switch (replaces the green check) ---- */
.switch {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  border: 4px solid rgba(58, 58, 58, 0.1);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.5) inset;
  height: 48px;
  width: 120px;
  margin: 4px 0 0;
  position: relative;
  display: inline-block;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
}
.switch-check {
  position: absolute;
  visibility: hidden;
  user-select: none;
}
.switch-label {
  cursor: pointer;
  display: block;
  height: 42px;
  text-indent: -9999px;
  width: 115px;
  user-select: none;
}
.switch-label:before {
  background: radial-gradient(circle at 45% 45%, rgb(255, 58, 58) 0%, rgb(255, 113, 113) 100%);
  border-radius: 10px;
  border: 1px solid #742323;
  box-shadow: 0 2px 5px rgba(255, 67, 48, 0.6), 0 0 5px rgba(255, 159, 109, 0.5) inset;
  content: "";
  display: block;
  height: 10px;
  left: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
}
.switch-label:after {
  background: radial-gradient(circle at 45% 45%, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
  border-radius: 10px;
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
  content: "";
  display: block;
  height: 10px;
  right: -20%;
  position: absolute;
  top: 16px;
  transition: all 0.2s;
  width: 10px;
  z-index: 12;
}
.switch-label span {
  background: linear-gradient(#4f4f4f, #2b2b2b);
  border-radius: 30px;
  border: 1px solid #1a1a1a;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(255, 255, 255, 0.1) inset, 0 -2px 0 rgba(0, 0, 0, 0.2) inset;
  display: block;
  height: 38px;
  left: 1px;
  position: absolute;
  top: 1px;
  transition: left .45s var(--ease-back-out), transform .35s var(--ease-back-out), background .25s var(--ease);
  width: 53px;
}
.switch-check:active + .switch-label span { transform: scale(0.94); }
.switch-label span:before {
  background: linear-gradient(to right, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  border-radius: 30px 10px 10px 30px;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  left: 2px;
  position: absolute;
  top: 2px;
  width: 21px;
}
.switch-label span:after {
  background: linear-gradient(to left, rgba(48, 48, 48, 0.4), rgba(34, 34, 34, 0.4));
  border-radius: 10px 30px 30px 10px;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2) inset;
  content: "";
  display: block;
  height: 33px;
  position: absolute;
  right: 2px;
  top: 2px;
  width: 21px;
}
.switch-check:checked + .switch-label span { left: 59px; }
.switch-check:checked + .switch-label:before {
  background: radial-gradient(circle at 45% 45%, rgba(60, 60, 60, 0.6) 0%, rgba(151, 151, 151, 0.6) 100%);
  border: 1px solid #111;
  box-shadow: 0 2px 5px rgba(20, 20, 20, 0.5);
}
.switch-check:checked + .switch-label:after {
  background: radial-gradient(circle at 45% 45%, lightgreen 0%, lightgreen 100%);
  border: 1px solid #004562;
  box-shadow: 0 2px 5px green, 0 0 5px green inset;
}
.switch-check:focus-visible + .switch-label { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 30px; }

/* Item attivo: il testo si "accende" leggermente quando spunti */
.solution-list li:has(.switch-check:checked) h4 { color: var(--accent); transition: color .25s ease; }
.solution-list li h4 { transition: color .25s ease; }
.solution-list h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.3;
  margin: 4px 0 6px;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.solution-list p {
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.65;
  margin: 0;
}

/* ============================================================
   04. DIFFERENZIATORI
   ============================================================ */
.diff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.diff-grid--3d { perspective: 1200px; perspective-origin: 50% 30%; }

.diff-card {
  border-radius: var(--radius-lg);
  padding: 0;
  position: relative;
  overflow: hidden;
  min-height: 340px;
  display: flex;
  flex-direction: column;
}

/* --- Liquid-glass yellow card --- */
.diff-card--glass {
  background:
    linear-gradient(135deg, rgba(255,212,0,0.10) 0%, rgba(255,212,0,0.04) 50%, rgba(255,212,0,0.08) 100%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(255,212,0,0.22);
  box-shadow:
    0 22px 60px rgba(0,0,0,0.35),
    0 0 0 1px rgba(255,212,0,0.04) inset,
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 -1px 0 rgba(0,0,0,0.18) inset;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
/* Sheen sopra (glass highlight) */
.diff-card--glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,0.16), transparent 55%);
  pointer-events: none;
  opacity: .7;
  mix-blend-mode: screen;
}
/* Hover bagliore */
.diff-card--glass:hover {
  border-color: rgba(255,212,0,0.42);
  box-shadow:
    0 32px 80px rgba(0,0,0,0.45),
    0 0 60px rgba(255,212,0,0.12),
    0 0 0 1px rgba(255,212,0,0.06) inset,
    0 1px 0 rgba(255,255,255,0.12) inset;
}

/* Hierarchy: middle card promoted as primary */
.diff-grid > .diff-card--glass:nth-child(2) {
  border-color: rgba(255,212,0,0.55);
  background:
    linear-gradient(135deg, rgba(255,212,0,0.18) 0%, rgba(255,212,0,0.08) 50%, rgba(255,212,0,0.14) 100%),
    rgba(255,255,255,0.03);
  box-shadow: var(--shadow-glow-accent), 0 1px 0 rgba(255,255,255,0.12) inset;
  transform: translateY(-8px) scale(1.03);
}
.diff-grid > .diff-card--glass:nth-child(2) .diff-tag {
  color: #FFFFFF;
  text-shadow: 0 0 20px rgba(255,212,0,0.55);
}
@media (max-width: 900px) {
  .diff-grid > .diff-card--glass:nth-child(2) {
    transform: none;
  }
}

/* Tilt: variabili gestite da JS in main.js */
.diff-card[data-tilt] {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
}

/* Inner content con depth */
.diff-card-inner {
  position: relative;
  z-index: 2;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  transform: translateZ(32px);
}
.diff-card[data-tilt] .diff-tag { transform: translateZ(48px); }
.diff-card[data-tilt] .diff-card-inner h3 { transform: translateZ(58px); }
.diff-card[data-tilt] .diff-card-inner p { transform: translateZ(28px); }

.diff-tag {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--accent);
  align-self: center;
  text-shadow: 0 0 18px rgba(255,212,0,0.45);
  opacity: 0.95;
}

/* Premium icon block above title */
.diff-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 56px;
  height: 56px;
  margin-top: 22px;
  border-radius: 14px;
  color: var(--accent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,212,0,0.18), transparent 65%),
    linear-gradient(135deg, rgba(255,212,0,0.10) 0%, rgba(255,212,0,0.02) 100%);
  border: 1px solid rgba(255,212,0,0.42);
  box-shadow:
    0 8px 24px rgba(255,212,0,0.18),
    0 0 0 1px rgba(255,212,0,0.05) inset,
    0 0 20px rgba(255,212,0,0.10) inset;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.diff-card-icon svg {
  filter: drop-shadow(0 0 6px rgba(255,212,0,0.55));
}
.diff-card[data-tilt] .diff-card-icon { transform: translateZ(52px); }
.diff-card--glass:hover .diff-card-icon {
  border-color: rgba(255,212,0,0.65);
  box-shadow:
    0 14px 32px rgba(255,212,0,0.28),
    0 0 0 1px rgba(255,212,0,0.08) inset,
    0 0 28px rgba(255,212,0,0.18) inset;
}
@media (max-width: 900px) {
  .diff-card[data-tilt] .diff-card-icon { transform: none; }
  .diff-card-icon { width: 52px; height: 52px; margin-top: 16px; }
}
.diff-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-style: italic;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 18px 0 14px;
  color: var(--accent);
  text-shadow: 0 2px 24px rgba(255,212,0,0.18);
  text-align: center;
}
.diff-card p {
  font-size: 15px;
  line-height: 1.65;
  margin: 0;
  color: rgba(250,247,241,0.78);
  text-align: center;
}

@media (max-width: 900px) {
  .diff-grid { grid-template-columns: 1fr; gap: 18px; }
  .diff-grid--3d { perspective: none; }
  .diff-card { min-height: auto; }
  .diff-card-inner { padding: 32px 26px; transform: none; }
  .diff-card[data-tilt] .diff-tag,
  .diff-card[data-tilt] .diff-card-inner h3,
  .diff-card[data-tilt] .diff-card-inner p { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .diff-card[data-tilt] { transform: none !important; transition: none !important; }
  .diff-card[data-tilt] * { transform: none !important; }
}

/* ============================================================
   05. TESTIMONIAL — Card stack 3D fan (video 16:9)
   ============================================================ */
.testi-stack {
  --card-w: 460px;
  --card-h: 259px;          /* 16:9 of 460 */
  --gap: 160px;             /* horizontal spacing per offset */
  --spread: 7deg;           /* rotateZ per offset */
  --depth: 110px;           /* translateZ per offset */
  --tilt: 6deg;             /* rotateX for non-active */
  --lift: 26px;             /* active card lift */
  --scale-on: 1.04;
  --scale-off: 0.92;
  --max-off: 2;             /* how many cards visible per side */
  width: 100%;
  outline: none;
}
.testi-stack:focus-visible { outline: 2px dashed var(--terracotta); outline-offset: 12px; border-radius: 14px; }

.testi-stage {
  position: relative;
  width: 100%;
  height: calc(var(--card-h) + 130px);
  perspective: 1300px;
  perspective-origin: 50% 60%;
  overflow: hidden;
  isolation: isolate;
}

/* Soft bottom shadow under the stack */
.testi-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: calc(var(--card-w) * 1.1);
  height: 80px;
  background: radial-gradient(ellipse at center, rgba(26,26,26,0.18), transparent 60%);
  filter: blur(20px);
  z-index: 0;
  pointer-events: none;
}

.testi-card-stack {
  position: absolute;
  left: 50%;
  bottom: 60px;
  width: var(--card-w);
  height: var(--card-h);
  margin-left: calc(var(--card-w) / -2);
  border-radius: 18px;
  overflow: hidden;
  background: var(--forest-deep);
  box-shadow: 0 24px 60px rgba(26,26,26,0.22), 0 4px 12px rgba(26,26,26,0.12);
  border: 1px solid rgba(255,255,255,0.06);
  transform-style: preserve-3d;
  transform-origin: 50% 100%;
  transition: transform .65s cubic-bezier(0.22, 0.61, 0.36, 1),
              opacity .45s cubic-bezier(0.22, 0.61, 0.36, 1),
              box-shadow .35s var(--ease);
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  will-change: transform;
}
.testi-card-stack.is-dragging { transition: none; cursor: grabbing; }
.testi-card-stack.is-active { cursor: grab; }
.testi-card-stack.is-active:active { cursor: grabbing; }

/* Poster placeholder shown until a real video file is loaded */
.testi-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px 28px;
  color: var(--paper-white);
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.55) 100%),
    radial-gradient(circle at 30% 25%, rgba(255,212,0,0.18), transparent 55%),
    linear-gradient(135deg, var(--grad-a, var(--forest-dark)), var(--grad-b, var(--foliage)));
}
.testi-poster::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.12;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.testi-poster-mono {
  position: absolute;
  top: 22px;
  left: 28px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.32em;
  color: color-mix(in srgb, var(--paper-white) 70%, transparent);
}
.testi-poster-stars {
  position: absolute;
  top: 22px;
  right: 28px;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--terracotta-soft);
}
.testi-poster-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.testi-poster-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-white) 75%, transparent);
  margin-bottom: 12px;
}
.testi-poster-quote {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.45;
  margin: 0;
  color: color-mix(in srgb, var(--paper-white) 92%, transparent);
  max-width: 88%;
}

/* Video element (hidden until real source loads) */
.testi-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--forest-deep);
}
.testi-video[hidden] { display: none; }

/* Play button — visible only on active card */
.testi-play {
  position: absolute;
  inset: auto auto 18px 18px;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--paper-white);
  color: var(--forest-dark);
  display: grid;
  place-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
  opacity: 0;
  transform: scale(0.85);
  transition: opacity .35s var(--ease), transform .35s var(--ease), background .25s var(--ease);
  pointer-events: none;
}
.testi-card-stack.is-active .testi-play {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
}
.testi-play svg { margin-left: 3px; }
.testi-play:hover { background: var(--terracotta-soft); color: var(--paper-white); transform: scale(1.08); }

/* Controls below the stack */
.testi-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 18px;
}
.testi-arrow {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--paper-white);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
  box-shadow: var(--shadow-soft);
}
.testi-arrow:hover {
  background: var(--forest-dark);
  color: var(--paper-white);
  transform: translateY(-1px);
}
.testi-arrow:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }
.testi-dots {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink) 22%, transparent);
  transition: background .2s var(--ease), transform .2s var(--ease);
  cursor: pointer;
  padding: 0;
  border: none;
}
.testi-dot:hover { background: color-mix(in srgb, var(--ink) 50%, transparent); }
.testi-dot.is-on {
  background: var(--terracotta);
  transform: scale(1.3);
}

/* Responsive */
@media (max-width: 900px) {
  .testi-stack {
    --card-w: 380px;
    --card-h: 214px;
    --gap: 120px;
    --depth: 80px;
    --spread: 6deg;
    --max-off: 2;
  }
  .testi-poster-name { font-size: 22px; }
  .testi-poster-quote { font-size: 14px; }
}
@media (max-width: 600px) {
  .testi-stack {
    --card-w: 280px;
    --card-h: 158px;
    --gap: 70px;
    --depth: 60px;
    --spread: 5deg;
    --max-off: 1;
    --lift: 18px;
  }
  .testi-poster { padding: 18px 20px; }
  .testi-poster-name { font-size: 18px; }
  .testi-poster-role { font-size: 9px; margin-bottom: 8px; }
  .testi-poster-quote { font-size: 12px; max-width: 100%; }
  .testi-poster-mono, .testi-poster-stars { top: 14px; }
  .testi-poster-mono { left: 20px; }
  .testi-poster-stars { right: 20px; }
  .testi-play { width: 42px; height: 42px; bottom: 12px; left: 12px; }
}

/* ============================================================
   06. STUDENTI — Radial scroll gallery (pinned + rotating wheel)
   ============================================================ */
.studenti {
  padding-bottom: 0;
}
.studenti .section-head {
  margin-bottom: 20px;
}
.radial-stage {
  position: relative;
  width: 100%;
  height: 620px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: hidden;
  margin-top: 0;
  /* Soft fade on all 4 sides so the wheel blends into the page like a
     floating element — no visible rectangular cut. */
  -webkit-mask-image:
    linear-gradient(to top, transparent 0%, #000 28%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image:
    linear-gradient(to top, transparent 0%, #000 28%, #000 80%, transparent 100%),
    linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
          mask-composite: intersect;
}
.radial-mask {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.radial-wheel {
  --radius: 560px;
  position: absolute;
  left: 50%;
  bottom: calc(var(--radius) * -1.1);     /* hide bottom ~55% */
  width: calc(var(--radius) * 2);
  height: calc(var(--radius) * 2);
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
  will-change: transform;
  opacity: 0;                              /* initial state (GSAP reveals) */
  transition: opacity .6s var(--ease);
}
.radial-wheel.is-ready { opacity: 1; }

.radial-item {
  --w: 220px;
  --h: 304px;
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--w);
  height: var(--h);
  margin-left: calc(var(--w) / -2);
  margin-top: calc(var(--h) / -2);
  z-index: 10;
  pointer-events: auto;

  /* Reveal animation via CSS (avoids GSAP overwriting JS-set transforms) */
  opacity: 0;
  transform-origin: 50% 50%;
}
.radial-item.is-hovered { z-index: 100; }
.radial-wheel.is-ready .radial-item {
  opacity: 1;
  transition: opacity .4s var(--ease);
}

.radial-card {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  color: var(--paper-white);
  text-decoration: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.55) 100%),
    radial-gradient(circle at 30% 25%, rgba(255,255,255,0.12), transparent 55%),
    linear-gradient(135deg, var(--grad-a, var(--forest-dark)), var(--grad-b, var(--foliage)));
  box-shadow: 0 16px 40px rgba(26,26,26,0.18), 0 4px 12px rgba(26,26,26,0.10);
  outline: none;

  /* Reveal scale via CSS transition + staggered delay */
  transform: scale(0.4);
  opacity: 0;
  transition:
    transform .85s cubic-bezier(0.34, 1.56, 0.64, 1),
    filter .5s var(--ease),
    opacity .55s var(--ease),
    box-shadow .5s var(--ease);
  transition-delay: calc(var(--reveal-i, 0) * 60ms);
  will-change: transform, filter, opacity;
}
.radial-wheel.is-ready .radial-card {
  transform: scale(1);
  opacity: 1;
}
.radial-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  opacity: 0.10;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.radial-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.35);
  color: var(--terracotta-soft);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.radial-meta {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.radial-meta strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--paper-white);
}
.radial-meta span {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--paper-white) 75%, transparent);
}

/* Hover behavior: focused card scales up + lifts; siblings blur and dim */
.radial-wheel.is-ready .radial-card:hover,
.radial-wheel.is-ready .radial-card:focus-visible {
  transform: scale(1.18) translateY(-26px);
  box-shadow: 0 28px 60px rgba(26,26,26,0.30), 0 8px 18px rgba(26,26,26,0.18);
}
.radial-card:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}
.radial-wheel.has-hover .radial-item:not(.is-hovered) .radial-card {
  filter: blur(2px) grayscale(60%);
  opacity: 0.45;
}

/* Soft glow under the wheel apex */
.radial-stage::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -80px;
  transform: translateX(-50%);
  width: 80%;
  height: 200px;
  background: radial-gradient(ellipse at center, rgba(255,212,0,0.15), transparent 60%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

@media (max-width: 900px) {
  .radial-wheel { --radius: 380px; }
  .radial-item { --w: 170px; --h: 230px; }
  .radial-meta strong { font-size: 15px; }
  .radial-stage { height: 500px; }
}
@media (max-width: 600px) {
  .radial-wheel { --radius: 230px; }
  .radial-item { --w: 130px; --h: 180px; }
  .radial-card { border-radius: 12px; }
  .radial-meta strong { font-size: 13px; }
  .radial-meta span { font-size: 8px; letter-spacing: 0.12em; }
  .radial-tag { font-size: 8px; padding: 4px 8px; }
  .radial-stage { height: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .radial-wheel { transform: translateX(-50%) rotate(0deg) !important; }
}

/* ============================================================
   07. GARANZIA — full-bleed section (inherits site bg)
   ============================================================ */
.guarantee {
  background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.0) 100%);
  color: var(--paper-white);
  padding: 140px 0;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* =====================================================
   BONUS + GARANZIA section (replaces old solo-guarantee)
   ===================================================== */
.bonus-garanzia {
  position: relative;
  padding: 120px 0;
  color: var(--paper-white);
  isolation: isolate;
  overflow: hidden;
}
.bonus-garanzia::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(255,212,0,0.10), transparent 55%),
    radial-gradient(ellipse at 75% 80%, rgba(255,212,0,0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
.bonus-garanzia .container { position: relative; z-index: 1; }
.bg-head {
  text-align: center;
  margin-bottom: 56px;
}
.bg-title {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  font-size: clamp(38px, 5vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--paper-white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.4);
}
.bg-subtitle {
  font-family: var(--mono);
  font-size: clamp(13px, 1.1vw, 15px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,247,241,0.75);
  margin: 0;
}
.bg-subtitle em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}
.bg-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 2.2fr);
  align-items: stretch;
  gap: 28px;
  margin-bottom: 36px;
}
.bg-card-bonus-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 24px;
}
@property --bg-card-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
.bg-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 44px 36px;
  border-radius: 24px;
  border: 2px solid transparent;
  background:
    linear-gradient(135deg, rgba(13,15,26,0.92) 0%, rgba(13,15,26,0.78) 100%) padding-box,
    conic-gradient(
      from var(--bg-card-angle),
      rgba(255,212,0,0.18) 0%,
      rgba(255,212,0,0.85) 37%,
      #FFFFFF 40%,
      rgba(255,212,0,0.85) 43%,
      rgba(255,212,0,0.18) 50%,
      rgba(255,212,0,0.85) 77%,
      #FFFFFF 80%,
      rgba(255,212,0,0.85) 83%,
      rgba(255,212,0,0.18) 90%
    ) border-box;
  background-origin: padding-box, border-box;
  animation: bg-card-rotate 6s linear infinite;
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,212,0,0.04) inset,
    0 0 40px rgba(255,212,0,0.08) inset;
  isolation: isolate;
  overflow: hidden;
}
@keyframes bg-card-rotate {
  to { --bg-card-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-card { animation: none; }
}
.bg-card--bonus { padding: 36px 28px; overflow: visible; }
@media (max-width: 900px) {
  .bg-card--bonus { padding: 28px 18px; }
}
.bg-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,212,0,0.10), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.bg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  width: 72px;
  height: 72px;
  border-radius: 18px;
  color: var(--accent);
  background:
    radial-gradient(circle at 30% 25%, rgba(255,212,0,0.20), transparent 65%),
    linear-gradient(135deg, rgba(255,212,0,0.12) 0%, rgba(255,212,0,0.03) 100%);
  border: 1px solid rgba(255,212,0,0.5);
  box-shadow:
    0 10px 28px rgba(255,212,0,0.22),
    0 0 24px rgba(255,212,0,0.14) inset;
  margin-bottom: 22px;
}
.bg-card-icon svg {
  filter: drop-shadow(0 0 8px rgba(255,212,0,0.55));
}
/* Emoji icon variant: no chip background, large standalone glyph */
.bg-card-icon--emoji {
  width: auto;
  height: auto;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 64px;
  line-height: 1;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.45)) drop-shadow(0 0 14px rgba(255,212,0,0.18));
  margin-bottom: 18px;
}
.bg-card-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(22px, 1.9vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
  text-align: center;
  color: var(--paper-white);
  text-wrap: balance;
  max-width: 38ch;
  margin-left: auto;
  margin-right: auto;
}
.bg-card-title em {
  color: var(--accent);
  font-style: italic;
  font-weight: 700;
}
.bg-card-title-strong {
  display: inline;
  color: var(--accent);
  font-weight: 700;
  font-style: italic;
  text-shadow: 0 2px 20px rgba(255,212,0,0.25);
}
.bg-card-strapline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(20px, 1.7vw, 24px);
  line-height: 1.3;
  text-align: center;
  margin: 0 auto 18px;
  max-width: 32ch;
  text-wrap: balance;
}
.bg-card-body {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 auto;
  text-align: center;
  color: rgba(250,247,241,0.82);
  max-width: 42ch;
  text-wrap: pretty;
}
.bg-card-body strong { color: var(--paper-white); font-weight: 700; }
.bg-card-body em { color: var(--accent); font-style: italic; font-weight: 700; }

/* (removed: bg-card-bonus-head / bg-card-mockup — bonus list now uses per-item .bg-bonus-art) */

.bg-bonus-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.bg-bonus-list li {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0;
  background: transparent;
  border: 0;
}
.bg-bonus-art {
  margin: 0 0 -28px;
  width: 100%;
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 36px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 44px rgba(255,212,0,0.18));
  position: relative;
  z-index: 2;
}
.bg-bonus-art img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transform: scale(1.7);
  transform-origin: center bottom;
}
@media (max-width: 900px) {
  .bg-bonus-art { margin: 0 0 -20px; aspect-ratio: 16 / 11; }
  .bg-bonus-art img { transform: scale(1.3); }
}
.bg-bonus-text {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 22px 18px 22px;
  border-radius: 18px;
  background: rgba(0,0,0,0.32);
  border: 1px solid rgba(255,212,0,0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.bg-bonus-list .bg-bonus-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  color: var(--accent);
  letter-spacing: -0.01em;
  text-shadow: 0 2px 18px rgba(255,212,0,0.25);
  margin-bottom: 8px;
}
.bg-bonus-list .bg-bonus-desc {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(250,247,241,0.82);
}
@media (max-width: 900px) {
  .bg-bonus-list { grid-template-columns: 1fr; gap: 16px; }
  .bg-bonus-art { aspect-ratio: 16 / 10; }
}
.bg-bonus-name {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.bg-bonus-desc {
  display: block;
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(250,247,241,0.82);
}

.bg-cta-wrap {
  display: flex;
  justify-content: center;
}

@media (max-width: 900px) {
  .bonus-garanzia { padding: 56px 0; }
  .bg-grid { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  .bg-card { padding: 32px 22px; border-radius: 20px; }
  .bg-bonus-list { grid-template-columns: 1fr; gap: 12px; }
  .bg-head { margin-bottom: 28px; }
}
@media (max-width: 480px) {
  .bonus-garanzia { padding: 44px 0; }
}
.guarantee::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(255,212,0,0.14), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(255,212,0,0.06), transparent 55%);
  pointer-events: none;
  z-index: 0;
}
/* Spotlight giallo centrale che pulsa lentamente */
.guarantee::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 18%;
  transform: translateX(-50%);
  width: min(820px, 92%);
  height: 320px;
  background: radial-gradient(ellipse at center, rgba(255,212,0,0.18), transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 1;
  animation: guarantee-pulse 4.2s ease-in-out infinite;
}
@keyframes guarantee-pulse {
  0%, 100% { opacity: .55; transform: translateX(-50%) scale(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scale(1.04); }
}

.guarantee-inner {
  position: relative;
  z-index: 3;
  text-align: center;
  max-width: 820px;
}

/* --- Badge con triangolo d'allerta --- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  background: rgba(255,212,0,0.06);
  border: 1.5px solid rgba(255,212,0,0.55);
  padding: 10px 18px;
  border-radius: 999px;
  margin-bottom: 34px;
  box-shadow:
    0 0 0 4px rgba(255,212,0,0.06),
    0 8px 24px rgba(255,212,0,0.18),
    0 0 30px rgba(255,212,0,0.12) inset;
}
.badge--alert .badge-alert-icon {
  color: var(--accent);
  animation: alert-blink 1.8s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,212,0,0.55));
}
@keyframes alert-blink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .55; transform: scale(0.94); }
}

.guarantee-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 32px;
  text-shadow: 0 2px 32px rgba(0,0,0,0.5);
}
.guarantee-title em {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 28px rgba(255,212,0,0.4);
}
.guarantee-body {
  font-size: 20px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--paper-white) 88%, transparent);
  max-width: 680px;
  margin: 0 auto 44px;
}
.guarantee-body strong {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 14px rgba(255,212,0,0.4);
}
.guarantee-body em {
  font-style: italic;
  color: #FFFFFF;
  font-family: var(--serif);
  font-size: 1.06em;
}

.guarantee-list {
  display: flex;
  justify-content: center;
  gap: 14px 28px;
  flex-wrap: wrap;
}
.guarantee-list li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: color-mix(in srgb, var(--paper-white) 82%, transparent);
  padding: 8px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  backdrop-filter: blur(8px);
}
.guarantee-list span {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--accent);
  color: #000;
  font-weight: 800;
  font-size: 11px;
}

@media (max-width: 768px) {
  .guarantee { padding: 56px 0; }
  .guarantee-body { font-size: 17px; }
  .guarantee-list { flex-direction: column; align-items: center; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .guarantee::after { animation: none; }
  .badge--alert .badge-alert-icon { animation: none; }
}

/* ============================================================
   07. UNICITÀ — Orbit carousel
   ============================================================ */
.section-head--centered { text-align: center; }
.section-head--centered .section-num,
.section-head--centered .section-title,
.section-head--centered .section-lead { margin-left: auto; margin-right: auto; }
.section-head--centered .section-title { max-width: 920px; }
.section-head--centered .section-lead { max-width: 620px; }

.orbit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 18px 0 14px;
}
.orbit-eyebrow-dot {
  width: 7px; height: 7px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 12px rgba(255,212,0,0.6);
  animation: pulse 2.4s var(--ease) infinite;
}

.orbit {
  --orbit-r: 290px;
  --orbit-item: 78px;
  --orbit-pad: 120px;
  margin: 70px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.orbit-stage {
  position: relative;
  width: calc(var(--orbit-r) * 2 + var(--orbit-pad));
  height: calc(var(--orbit-r) * 2 + var(--orbit-pad));
}

/* --- Center card (glass yellow) --- */
.orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, 78%);
  padding: 38px 36px 26px;
  border-radius: 24px;
  text-align: center;
  z-index: 5;
  background:
    linear-gradient(135deg, rgba(255,212,0,0.10) 0%, rgba(255,212,0,0.04) 50%, rgba(255,212,0,0.09) 100%),
    rgba(255,255,255,0.02);
  border: 1px solid rgba(255,212,0,0.30);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.45),
    0 0 60px rgba(255,212,0,0.10),
    0 1px 0 rgba(255,255,255,0.10) inset;
  -webkit-backdrop-filter: blur(18px) saturate(160%);
          backdrop-filter: blur(18px) saturate(160%);
}
.orbit-center::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(120% 80% at 15% 0%, rgba(255,255,255,0.16), transparent 55%);
  pointer-events: none;
  opacity: .7;
  mix-blend-mode: screen;
}
.orbit-center-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 16px;
  text-shadow: 0 0 16px rgba(255,212,0,0.45);
  transition: opacity .3s ease;
}
.orbit-center-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--accent);
  margin: 0 0 18px;
  text-shadow: 0 2px 18px rgba(255,212,0,0.18);
  min-height: 2.3em;
  transition: opacity .3s ease;
}
.orbit-center-desc {
  font-size: 16px;
  line-height: 1.6;
  color: rgba(250,247,241,0.86);
  margin: 0 0 26px;
  min-height: 7em;
  transition: opacity .3s ease;
}
.orbit-center.is-switching .orbit-center-num,
.orbit-center.is-switching .orbit-center-title,
.orbit-center.is-switching .orbit-center-desc { opacity: 0; }

.orbit-center-nav {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.orbit-nav-btn {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,212,0,0.35);
  background: rgba(255,212,0,0.04);
  color: var(--accent);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, border-color .25s ease;
}
.orbit-nav-btn:hover {
  background: rgba(255,212,0,0.14);
  border-color: var(--accent);
  transform: scale(1.06);
}
.orbit-nav-btn:active { transform: scale(0.94); }
.orbit-center-counter {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgba(250,247,241,0.7);
}

/* --- Orbiting items --- */
.orbit-item {
  position: absolute;
  top: calc(50% - var(--orbit-item) / 2);
  left: calc(50% - var(--orbit-item) / 2);
  width: var(--orbit-item);
  height: var(--orbit-item);
  border-radius: 999px;
  background: linear-gradient(155deg, #131A36 0%, #0A1024 100%);
  border: 2px solid rgba(255,212,0,0.45);
  color: var(--accent);
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 7;
  text-shadow: 0 0 12px rgba(255,212,0,0.45);
  transform: rotate(var(--angle, 0deg)) translateY(calc(var(--orbit-r) * -1)) rotate(calc(var(--angle, 0deg) * -1));
  transition: transform .7s cubic-bezier(.4,1.2,.4,1), background .3s ease, border-color .3s ease, box-shadow .3s ease, scale .25s ease;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow:
    0 10px 22px rgba(0,0,0,0.55),
    0 0 0 4px rgba(10,10,10,0.45),
    0 0 18px rgba(255,212,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.10);
}
.orbit-item:hover {
  scale: 1.12;
  background: linear-gradient(155deg, #1B244A 0%, #101739 100%);
  border-color: rgba(255,212,0,0.7);
  box-shadow:
    0 14px 28px rgba(0,0,0,0.6),
    0 0 0 4px rgba(10,10,10,0.55),
    0 0 26px rgba(255,212,0,0.35),
    inset 0 1px 0 rgba(255,255,255,0.15);
}
.orbit-item.is-active {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  text-shadow: none;
  box-shadow:
    0 0 0 5px rgba(10,10,10,0.55),
    0 0 0 9px rgba(255,212,0,0.18),
    0 0 32px rgba(255,212,0,0.55),
    0 14px 36px rgba(0,0,0,0.55);
  z-index: 8;
}

/* --- Dots indicator --- */
.orbit-dots {
  display: flex;
  gap: 8px;
}
.orbit-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  transition: background .25s ease, transform .25s ease, width .35s ease;
  padding: 0;
}
.orbit-dot:hover { background: rgba(255,212,0,0.5); transform: scale(1.25); }
.orbit-dot.is-active {
  background: var(--accent);
  width: 22px;
  border-radius: 999px;
  box-shadow: 0 0 14px rgba(255,212,0,0.45);
}

/* Tablet: scaling down */
@media (max-width: 900px) {
  .orbit { --orbit-r: 230px; --orbit-item: 68px; --orbit-pad: 100px; }
  .orbit-center { width: min(380px, 80%); padding: 30px 26px 22px; }
  .orbit-center-title { font-size: 22px; }
  .orbit-center-desc { font-size: 15px; }
  .orbit-item { font-size: 24px; }
}

/* Mobile: minore raggio */
@media (max-width: 600px) {
  .orbit { --orbit-r: 165px; --orbit-item: 54px; --orbit-pad: 60px; gap: 24px; }
  .orbit-center { width: min(260px, 86%); padding: 22px 18px 16px; }
  .orbit-center-num { font-size: 11px; margin-bottom: 10px; }
  .orbit-center-title { font-size: 17px; line-height: 1.22; margin-bottom: 10px; min-height: 0; }
  .orbit-center-desc { font-size: 13.5px; line-height: 1.55; margin-bottom: 16px; min-height: 0; }
  .orbit-item { font-size: 20px; border-width: 1.5px; }
  .orbit-nav-btn { width: 32px; height: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .orbit-item { transition: background .3s, border-color .3s; }
  .orbit-eyebrow-dot { animation: none; }
}

/* ============================================================
   08. DUE STRADE
   ============================================================ */
.paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.path {
  border-radius: var(--radius);
  padding: 38px 32px;
  box-shadow: var(--shadow-soft);
}
.path-no {
  background: var(--paper-soft);
  border: 1px solid var(--line);
}
.path-yes {
  background: var(--paper-white);
  border: 1.5px solid var(--foliage);
  box-shadow: 0 14px 40px rgba(90,125,59,0.16);
}
.path h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 22px;
}
.path-no h3 { color: var(--negative); }
.path-yes h3 { color: var(--foliage); }
.path ul { display: grid; gap: 14px; }
.path li {
  display: flex;
  gap: 12px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.path .x { color: var(--negative); font-weight: 700; font-size: 18px; line-height: 1.3; }
.path .v { color: var(--foliage); font-weight: 700; font-size: 16px; line-height: 1.3; }

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

/* ============================================================
   09. FUTURO
   ============================================================ */
.future-list {
  display: grid;
  gap: 14px;
  margin: 0 auto 36px;
}
.future-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 22px;
  background: var(--paper-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 16px;
  color: var(--ink);
}
.check-mini {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--foliage);
  color: var(--paper-white);
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}
.future-close {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 22px;
  color: var(--terracotta);
  margin: 30px 0 0;
}

/* ============================================================
   10. QUALIFIER
   ============================================================ */
.qual-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.qual-card {
  border-radius: var(--radius);
  padding: 36px 30px;
  box-shadow: var(--shadow-soft);
}
.qual-yes {
  background: var(--paper-white);
  border-left: 4px solid var(--foliage);
}
.qual-no {
  background: var(--paper-white);
  border-left: 4px solid var(--negative);
}
.qual-card h3 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}
.qual-yes h3 { color: var(--foliage); }
.qual-no h3 { color: var(--negative); }
.qual-card ul { display: grid; gap: 12px; }
.qual-card li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.qual-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
}
.qual-yes li::before { background: var(--foliage); }
.qual-no li::before { background: var(--negative); }

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

/* ============================================================
   11. ABOUT LORENZO
   ============================================================ */
.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.about-photo { position: relative; }

/* "Io insieme ad alcuni studenti" callout on the main about photo */
.photo-callout {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  pointer-events: none;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.6));
}
.photo-callout-text {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(13px, 1.2vw, 18px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: rgba(0,0,0,0.62);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,212,0,0.45);
  white-space: nowrap;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.photo-callout-arrow {
  width: clamp(20px, 2vw, 28px);
  height: clamp(100px, 14vw, 160px);
  margin-top: 2px;
  display: block;
}
@media (max-width: 768px) {
  .photo-callout { top: 10px; right: 10px; gap: 2px; }
  .photo-callout-text { font-size: 11px; padding: 6px 10px; }
  .photo-callout-arrow { width: 18px; height: 70px; }
}
.photo-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #0B1A22, #1E2A36);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-elev);
}
.photo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 65%;
  display: block;
}
.photo-placeholder {
  font-family: var(--serif);
  font-style: italic;
  font-size: 220px;
  color: color-mix(in srgb, var(--paper-white) 60%, transparent);
  line-height: 1;
}
.photo-tag {
  position: absolute;
  bottom: 18px;
  left: 18px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: #FFFFFF;
  color: #0A0F1A;
  padding: 8px 14px;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.05);
}
.about-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.4;
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 24px;
}
.about-lead em { color: var(--terracotta); }
.about-body p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-soft);
  margin: 0 0 18px;
}
.about-body p em {
  font-style: italic;
  color: var(--ink);
  font-weight: 500;
}
/* --- About stat cards (4 mini-card con icona + testo) --- */
.about-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.about-stat {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.about-stat-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(255,212,0,0.10);
  color: var(--accent);
  border: 1px solid rgba(255,212,0,0.22);
}
.about-stat-text {
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(250,247,241,0.86);
  font-weight: 500;
}

@media (max-width: 600px) {
  .about-stats { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 40px; }
  .photo-frame { aspect-ratio: 3 / 4; max-width: 380px; margin: 0 auto; }
  .photo-placeholder { font-size: 150px; }
}

/* ============================================================
   12. PROCESSO
   ============================================================ */
.process {
  display: grid;
  gap: 22px;
  max-width: 820px;
  margin: 0 auto;
  position: relative;
}
.process li {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 24px;
  align-items: flex-start;
  padding: 22px 26px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius);
  box-shadow: 0 12px 28px rgba(0,0,0,0.18);
  transition: transform .35s var(--ease), border-color .35s var(--ease), background .35s ease;
  position: relative;
}
.process li:hover {
  transform: translateX(4px);
  border-color: rgba(255,212,0,0.30);
  background: rgba(255,255,255,0.04);
}
.step-num {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 2px solid rgba(255,255,255,0.14);
  font-family: var(--mono);
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: rgba(250,247,241,0.55);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: background .45s var(--ease), border-color .45s var(--ease), color .45s var(--ease), box-shadow .45s var(--ease);
}
/* Hover desktop */
@media (hover: hover) {
  .process li:hover .step-num {
    border-color: rgba(255,212,0,0.55);
    color: var(--accent);
    transform: scale(1.08);
  }
}
/* Step diventa "vivo" quando entra nel viewport */
.process li.is-active .step-num {
  background: var(--accent);
  color: #000;
  border-color: var(--accent);
  animation: step-pulse 3s var(--ease) infinite;
  box-shadow:
    0 0 0 6px rgba(255,212,0,0.12),
    0 0 28px rgba(255,212,0,0.55),
    0 0 60px rgba(255,212,0,0.18);
}
@keyframes step-pulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(255,212,0,0.12), 0 0 28px rgba(255,212,0,0.55), 0 0 60px rgba(255,212,0,0.18); }
  50%      { box-shadow: 0 0 0 8px rgba(255,212,0,0.16), 0 0 36px rgba(255,212,0,0.45), 0 0 72px rgba(255,212,0,0.12); }
}
.process li.is-active {
  border-color: rgba(255,212,0,0.22);
  background: rgba(255,212,0,0.025);
}
@media (prefers-reduced-motion: reduce) {
  .process li.is-active .step-num { animation: none; }
}

/* --- Track giallo verticale che si "disegna" durante lo scroll --- */
.process--track::before,
.process--track::after {
  content: "";
  position: absolute;
  left: 25px;             /* centro orizzontale del cerchio step-num (52/2 = 26, -1 per stroke 2px) */
  top: 26px;              /* centro verticale del primo cerchio */
  bottom: 26px;           /* centro verticale dell'ultimo cerchio */
  width: 2px;
  border-radius: 999px;
  z-index: 0;
}
/* Track di sfondo (sempre visibile, faint) */
.process--track::before {
  background: rgba(255,255,255,0.10);
}
/* Track giallo "che si riempie" — controllato via --progress (0→1) da GSAP scrub */
.process--track::after {
  background: linear-gradient(180deg,
    var(--accent) 0%,
    color-mix(in srgb, var(--accent) 70%, transparent) 70%,
    color-mix(in srgb, var(--accent) 20%, transparent) 100%);
  transform-origin: top;
  transform: scaleY(var(--progress, 0));
  box-shadow:
    0 0 12px rgba(255,212,0,0.55),
    0 0 32px rgba(255,212,0,0.25);
}

/* --- CTA Soft block (Pronto a fare il primo passo) --- */
.cta-soft {
  padding: 110px 0;
  background: transparent;     /* lascia trasparire lo sfondo blu del sito */
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
@media (max-width: 768px) {
  .cta-soft { padding: 56px 0; }
}
@media (max-width: 480px) {
  .cta-soft { padding: 44px 0; }
}
/* Aura gialla che pulsa lentamente attorno al contenuto */
.cta-soft::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(900px, 95%);
  height: 120%;
  transform: translate(-50%, -50%);
  background:
    radial-gradient(ellipse at center, rgba(255,212,0,0.22) 0%, rgba(255,212,0,0.10) 30%, transparent 65%);
  filter: blur(40px);
  pointer-events: none;
  z-index: 0;
  animation: cta-soft-pulse 4.5s ease-in-out infinite;
}
@keyframes cta-soft-pulse {
  0%, 100% { opacity: .65; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;   transform: translate(-50%, -50%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-soft::before { animation: none; }
}
.cta-soft-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.cta-soft-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(36px, 4.4vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  margin: 0 0 18px;
}
.cta-soft-title em {
  font-style: italic;
  color: var(--accent);
  text-shadow: 0 0 28px rgba(255,212,0,0.35);
}
.cta-soft-lead {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.5;
  color: rgba(250,247,241,0.86);
  max-width: 680px;
  margin: 0 auto 40px;
}
.cta-soft-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 36px;
  background: var(--accent);
  color: #000;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.01em;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: var(--shadow-glow-accent);
  transition: transform .3s var(--ease-back-out), background .3s var(--ease), box-shadow .35s var(--ease);
}
.cta-soft-btn:hover {
  background: var(--accent-400);
  transform: translateY(-4px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(255,212,0,0.5),
    0 12px 32px rgba(255,212,0,0.32),
    0 32px 70px rgba(0,0,0,0.5);
}
.cta-soft-btn svg { transition: transform .3s var(--ease); }
.cta-soft-btn:hover svg { transform: translateX(4px); }

@media (max-width: 600px) {
  .cta-soft { padding: 80px 0; }
  .cta-soft-btn { padding: 14px 26px; font-size: 15px; }
}

/* Closing note (scarcity transparency) */
.process-note {
  max-width: 640px;
  margin: 36px auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(250,247,241,0.5);
}
.process-note em { color: var(--accent); font-style: italic; }
.process h4 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  margin: 4px 0 6px;
  letter-spacing: -0.01em;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
}
.step-meta {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255,212,0,0.08);
  border: 1px solid rgba(255,212,0,0.25);
  white-space: nowrap;
}
.process p {
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 600px) {
  .process li { grid-template-columns: 44px 1fr; gap: 16px; padding: 18px 18px; }
  .step-num { width: 44px; height: 44px; font-size: 12px; }
  .process--track::before,
  .process--track::after { left: 21px; top: 22px; bottom: 22px; }
  .process-note { font-size: 13px; margin-top: 28px; }
}

/* ============================================================
   13. CTA + FORM
   ============================================================ */
.section-cta {
  background:
    radial-gradient(ellipse at top, rgba(255,212,0,0.10), transparent 55%),
    var(--bg-cream-warm);
}
.cta-head { text-align: center; margin-bottom: 50px; }
.apply-form {
  background: var(--paper-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 44px 38px;
  box-shadow: var(--shadow-card);
  display: grid;
  gap: 22px;
}
.field { display: grid; gap: 8px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.field label span { color: var(--terracotta); }
.field input, .field select, .field textarea {
  width: 100%;
  background: var(--bg-cream);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 16px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--terracotta);
  background: var(--paper-white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--terracotta) 18%, transparent);
}
.field textarea { resize: vertical; min-height: 130px; font-family: inherit; line-height: 1.55; }
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
}
.field-hint {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: var(--mono);
}
.form-submit {
  margin-top: 8px;
  width: 100%;
  padding: 18px 28px;
  font-size: 16px;
}
.form-success {
  background: color-mix(in srgb, var(--foliage) 12%, var(--paper-white));
  border: 1px solid var(--foliage);
  border-radius: 12px;
  padding: 20px;
  color: var(--forest-dark);
}
.form-success strong { display: block; margin-bottom: 4px; font-size: 16px; }
.form-success p { margin: 0; font-size: 14px; color: var(--ink-soft); }

@media (max-width: 600px) {
  .apply-form { padding: 30px 22px; }
  .field-row { grid-template-columns: 1fr; gap: 22px; }
}

/* ============================================================
   14. FAQ
   ============================================================ */
.faq {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--line);
}
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 26px 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-family: var(--serif);
  font-weight: 700;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color .25s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::marker { display: none; content: ''; }
.faq-item summary::after {
  content: '';
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,212,0,0.35);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 12px no-repeat,
    transparent;
  color: var(--accent);
  transition: transform .4s var(--ease-back-out), background-size .35s var(--ease), border-color .35s var(--ease);
}
.faq-item[open] summary::after {
  transform: rotate(135deg);
  border-color: rgba(255,212,0,0.6);
  background:
    linear-gradient(currentColor, currentColor) center / 12px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 0 no-repeat,
    transparent;
}
.faq-item summary:hover { color: var(--accent); }
.faq-item summary:hover::after { border-color: rgba(255,212,0,0.7); }
.faq-item p {
  padding: 0 4px 14px;
  margin: 0;
  font-size: 16px;
  color: var(--ink-soft);
  line-height: 1.7;
  max-width: 720px;
}
.faq-body {
  padding-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 760px;
}
.faq-body p { padding: 0 4px; }
.faq-body ul {
  padding: 0 4px 0 22px;
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.7;
}
.faq-body ul li { margin-bottom: 6px; }
.faq-body strong { color: var(--ink); font-weight: 700; }
.faq-body em { color: var(--accent); font-style: italic; font-weight: 700; }
.faq-cta {
  align-self: flex-start;
  margin: 10px 4px 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  background: var(--accent);
  color: #0A0A0A;
  border-radius: 999px;
  font-family: var(--sans, system-ui);
  font-weight: 700;
  font-size: 14.5px;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(255,212,0,0.30);
  transition: transform .2s ease, box-shadow .2s ease;
}
.faq-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(255,212,0,0.42);
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--forest-dark);
  color: color-mix(in srgb, var(--paper-white) 80%, transparent);
  padding: 70px 0 30px;
}
.footer-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  margin-bottom: 60px;
}
.footer-logo {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--paper-white);
  display: inline-block;
  margin-bottom: 14px;
}
.footer-logo .brand-accent { color: var(--accent); }
.footer-logo .cross { color: var(--accent); font-style: normal; font-family: var(--sans); }
.footer-brand p { margin: 0; font-size: 14px; max-width: 280px; line-height: 1.6; }
.footer-col h5 {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--terracotta-soft);
  margin: 0 0 18px;
}
.footer-col a {
  display: block;
  font-size: 14px;
  margin-bottom: 10px;
  transition: color .2s var(--ease);
}
.footer-col a:hover { color: var(--paper-white); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid color-mix(in srgb, var(--paper-white) 12%, transparent);
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--paper-white) 50%, transparent);
}
@media (max-width: 768px) {
  .footer-inner { grid-template-columns: 1fr; gap: 30px; margin-bottom: 40px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}

/* ============================================================
   REVEAL ANIMATIONS (initial states — GSAP sets visible)
   ============================================================ */
.reveal-up {
  opacity: 0;
  transform: translateY(24px);
}
/* .word is a wrapper with overflow:hidden — JS injects an inner span
   with translateY(110%) and GSAP animates that. The .word itself stays
   visible so its overflow box reveals the inner span as it moves up. */
.reveal-words .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.05;
  padding-bottom: 0.18em;
}

/* No-JS fallback */
.no-js .reveal-up {
  opacity: 1;
  transform: none;
}
.no-js .reveal-words .word > span {
  transform: none !important;
}

/* Respect motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal-words .word, .reveal-up { opacity: 1; transform: none; }
}


/* ============================================================
   14. ANTEPRIMA — ContainerScroll (card tilts up while scrolling)
   ============================================================ */
.container-scroll-section {
  position: relative;
  padding: 0;
}
.container-scroll {
  height: 80rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 5rem 1.25rem;
  perspective: 1200px;
}
.container-scroll-header {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  z-index: 1;
  will-change: transform;
}
.container-scroll-header .section-title { margin-bottom: 18px; }
.container-scroll-header .eyebrow { margin-bottom: 22px; }

.container-scroll-card-wrap {
  position: relative;
  width: 100%;
  max-width: 1024px;
  margin: -3rem auto 0;
  perspective: 1200px;
}
.container-scroll-card {
  width: 100%;
  height: 40rem;
  border: 4px solid #1d3528;
  background: #0A1610;
  border-radius: 30px;
  padding: 1.5rem;
  box-shadow:
    0 0 #0000004d,
    0 9px 20px #0000004a,
    0 37px 37px #00000042,
    0 84px 50px #00000026,
    0 149px 60px #0000000a,
    0 233px 65px #00000003;
  transform-origin: center 12%;
  transform: rotateX(20deg) scale(1.05);
  will-change: transform;
}
.container-scroll-content {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
  border-radius: 18px;
  background:
    radial-gradient(circle at 1px 1px, rgba(250,247,241,0.18) 0.5px, transparent 0.5px) 0 0 / 24px 24px,
    linear-gradient(145deg, #142a1d 0%, #0a1610 100%);
  padding: 24px;
}

/* ---------- Dashboard mockup ---------- */
.preview-mockup {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(250,247,241,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  overflow: hidden;
}
.preview-topbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: rgba(0,0,0,0.30);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.preview-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(250,247,241,0.20);
}
.preview-dot:nth-child(1) { background: #ED6F5C; }
.preview-dot:nth-child(2) { background: #F4BC4F; }
.preview-dot:nth-child(3) { background: #61C554; }
.preview-url {
  flex: 1;
  margin-left: 14px;
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(250,247,241,0.55);
  letter-spacing: 0.04em;
}
.preview-body {
  padding: 26px 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  flex: 1;
}
.preview-greeting .preview-mono {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--terracotta);
  margin-bottom: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--terracotta);
}
.preview-greeting h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--paper-white);
  margin: 0 0 6px;
}
.preview-greeting p {
  font-size: 14px;
  color: rgba(250,247,241,0.72);
  margin: 0;
  line-height: 1.5;
}
.preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.preview-kpi {
  background: rgba(250,247,241,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preview-kpi-num {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 28px);
  color: var(--paper-white);
  line-height: 1;
}
.preview-kpi-label {
  font-size: 11px;
  color: rgba(250,247,241,0.55);
  line-height: 1.3;
}
.preview-kpi-accent .preview-kpi-num { color: var(--terracotta-soft); }

.preview-modules {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.preview-module {
  background: rgba(250,247,241,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-left: 3px solid var(--foliage);
  border-radius: 10px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.preview-module:nth-child(2) { border-left-color: var(--terracotta); }
.preview-module:nth-child(3) { border-left-color: var(--foliage-light); }
.preview-module-tag {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(250,247,241,0.55);
}
.preview-module strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 16px;
  color: var(--paper-white);
}
.preview-module-meta {
  font-size: 11px;
  color: rgba(250,247,241,0.55);
}

/* Responsive */
@media (max-width: 768px) {
  .container-scroll { height: 60rem; padding: 2rem 1rem; }
  .container-scroll-card { height: 30rem; padding: 0.5rem; border-radius: 22px; transform: rotateX(20deg) scale(0.7); }
  .container-scroll-content { padding: 14px; border-radius: 14px; }
  .preview-body { padding: 18px 18px; gap: 14px; }
  .preview-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .preview-kpi { padding: 10px 10px; }
  .preview-module { padding: 10px 12px; }
  .preview-module strong { font-size: 14px; }
}


/* ============================================================
   DARK STARFIELD THEME — site-wide overrides
   All sections transparent (or dark glass) so the fixed star
   backdrop shows through everywhere. Light text on dark bg.
   ============================================================ */

/* Grain blends nicely on dark — lighten it */
.grain { mix-blend-mode: screen; opacity: 0.04; }

/* Nav: dark glass on blue radial */
.nav {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: rgba(255,255,255,0.08);
}
.nav-brand { color: #FFFFFF; }
.nav-links a { color: rgba(255,255,255,0.72); }
.nav-links a:hover { color: #FFFFFF; }
.nav-cta { background: var(--accent); color: #000; }
.nav-cta:hover { background: #FFFFFF; }

/* HERO — Prisma exact styles are defined above; no overrides needed here */

/* Section bg overrides — transparent for unified starry backdrop */
.section-paper {
  background: transparent;
}
.section-cta {
  background: linear-gradient(180deg, rgba(5,13,8,0) 0%, rgba(5,13,8,0.30) 50%, rgba(5,13,8,0) 100%);
}

/* Section heads */
.section-title { color: var(--paper-white); }
.section-lead { color: rgba(250,247,241,0.72); }

/* ----- Cards as dark glass with dot pattern overlay ----- */
.problem-card,
.unique-card,
.path-no,
.path-yes,
.qual-card,
.future-list li,
.process li,
.faq,
.apply-form {
  /* Two-layer bg: dot pattern (24px tile) on top of dark glass fill.
     Brand-tinted paper-white dots at low opacity for subtle texture. */
  background:
    radial-gradient(circle at 1px 1px, rgba(250,247,241,0.22) 0.5px, transparent 0.5px) 0 0 / 24px 24px,
    rgba(250,247,241,0.04);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  border-color: rgba(255,255,255,0.10);
  color: var(--paper-white);
}

/* Diff cards: pattern dot solo sulle vecchie varianti (non più usate). */
.diff-card:not(.diff-card--glass) {
  background-image: radial-gradient(circle at 1px 1px, rgba(26,26,26,0.18) 0.5px, transparent 0.5px);
  background-size: 24px 24px;
  background-repeat: repeat;
}

/* Problem cards */
.problem-card h3 { color: var(--paper-white); }
.problem-card p { color: rgba(250,247,241,0.78); }
.problem-card::before { color: var(--terracotta-soft); }
.problem-meta { color: rgba(250,247,241,0.5); border-top-color: rgba(255,255,255,0.1); }
.problem-close { color: rgba(250,247,241,0.86); }

/* Solution list */
.solution-list h4 { color: var(--paper-white); }
.solution-list p { color: rgba(250,247,241,0.78); }

/* Legacy diff card color override — only for non-glass variants */
.diff-card:not(.diff-card--glass) { color: var(--ink); }
.diff-card:not(.diff-card--glass) h3 { color: var(--ink); }
.diff-card:not(.diff-card--glass) p { color: var(--ink-soft); }

/* Unique cards */
.unique-card h4 { color: var(--paper-white); }
.unique-card p { color: rgba(250,247,241,0.78); }
.unique-icon { background: rgba(255,255,255,0.06); color: var(--terracotta-soft); }
.unique-card:hover { border-color: var(--terracotta); }

/* ============================================================
   Paths (DUE STRADE) — Senza ROSSO MUTO vs Con GIALLO LUMINOSO
   ============================================================ */
.path-no {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,90,90,0.10) 0.5px, transparent 0.5px) 0 0 / 24px 24px,
    linear-gradient(160deg, rgba(220,60,60,0.07), rgba(120,30,30,0.04));
  border: 1px solid rgba(255,90,90,0.22);
  box-shadow: 0 16px 40px rgba(0,0,0,0.35);
  -webkit-backdrop-filter: blur(12px);
          backdrop-filter: blur(12px);
  position: relative;
  filter: saturate(0.85);
}
.path-no::before {
  content: "✗ Status quo";
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,120,120,0.6);
}
.path-no h3 {
  color: #FF8585;
  text-decoration: line-through;
  text-decoration-color: rgba(255,120,120,0.45);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}
.path-no li {
  color: rgba(250,247,241,0.55) !important;
  text-decoration: line-through;
  text-decoration-color: rgba(255,120,120,0.18);
  text-decoration-thickness: 1px;
}
.path-no .x {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,90,90,0.14);
  border: 1.5px solid rgba(255,100,100,0.45);
  color: #FF7B7B;
  font-size: 14px;
  flex-shrink: 0;
  margin-top: 2px;
}

.path-yes {
  background:
    radial-gradient(circle at 1px 1px, rgba(255,212,0,0.16) 0.5px, transparent 0.5px) 0 0 / 24px 24px,
    linear-gradient(160deg, rgba(255,212,0,0.10), rgba(255,212,0,0.04));
  border: 2px solid rgba(255,212,0,0.55);
  box-shadow:
    0 0 80px rgba(255,212,0,0.14),
    0 24px 60px rgba(0,0,0,0.45),
    0 0 0 1px rgba(255,212,0,0.08) inset;
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  position: relative;
  transform: translateY(-4px);
}
.path-yes::before {
  content: "✓ Risultato";
  position: absolute;
  top: 18px;
  right: 22px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255,212,0,0.5);
}
.path-yes::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(100% 80% at 15% 0%, rgba(255,255,255,0.10), transparent 55%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.path-yes h3 {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(255,212,0,0.30);
}
.path-yes li { color: rgba(250,247,241,0.92) !important; font-weight: 500; }
.path-yes .v {
  width: 26px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  border: 1.5px solid var(--accent);
  color: #000;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 0 14px rgba(255,212,0,0.45);
}

@media (max-width: 768px) {
  .path-yes { transform: none; }
  .path-no::before, .path-yes::before { top: 14px; right: 16px; font-size: 9px; }
}


/* Future list */
.future-list li { color: var(--paper-white); }
.future-close { color: var(--terracotta-soft); }

/* Qualifier */
.qual-card { background: rgba(250,247,241,0.04); }
.qual-yes { border-left-color: var(--foliage-light); }
.qual-no { border-left-color: var(--terracotta-soft); }
.qual-yes h3 { color: var(--foliage-light); }
.qual-no h3 { color: var(--terracotta-soft); }
.qual-card li { color: rgba(250,247,241,0.78); }
.qual-yes li::before { background: var(--foliage-light); }
.qual-no li::before { background: var(--terracotta-soft); }

/* About Lorenzo */
.about-lead { color: var(--paper-white); }
.about-body p { color: rgba(250,247,241,0.78); }
.about-body p em { color: var(--paper-white); }
.about-stats { border-top-color: rgba(255,255,255,0.10); }
.photo-tag { background: #FFFFFF; color: #0A0F1A; }

/* Process */
.process h4 { color: var(--paper-white); }
.process p { color: rgba(250,247,241,0.78); }
.process li:hover { border-color: var(--terracotta); }

/* FAQ */
.faq { border-radius: var(--radius-lg); padding: 0 22px; border-top: none; overflow: hidden; }
.faq-item { border-bottom-color: rgba(255,255,255,0.10); }
.faq-item:last-child { border-bottom: none; }
.faq-item summary { color: var(--paper-white); }
.faq-item p { color: rgba(250,247,241,0.78); }

/* CTA + Form */
.cta-head .section-lead { color: rgba(250,247,241,0.72); }
.field label { color: var(--paper-white); }
.field input, .field select, .field textarea {
  background: rgba(255,255,255,0.04);
  border-color: rgba(255,255,255,0.12);
  color: var(--paper-white);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(250,247,241,0.40); }
.field input:focus, .field select:focus, .field textarea:focus {
  background: rgba(255,255,255,0.08);
  border-color: var(--terracotta);
  box-shadow: 0 0 0 4px rgba(255,212,0,0.15);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23FFFFFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.field-hint { color: rgba(250,247,241,0.5); }
.form-success {
  background: rgba(90,125,59,0.18);
  border-color: var(--foliage);
  color: var(--paper-white);
}
.form-success p { color: rgba(250,247,241,0.78); }

/* Testimonials radial-stage area: section-paper now transparent */
.testi-stage::after {
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.4), transparent 60%);
}

/* Radial gallery (studenti) — keep current colored cards, stage transparent */
.radial-stage {
  background: transparent;
}

/* Footer stays forest-dark, no change needed */

/* Stars perform best when grain is subtle */
.grain { z-index: 5; }

/* ============================================================
   Students grid (testimonial card stats)
   ============================================================ */
.students-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  max-width: 1080px;
  margin: 0 auto;
}
.student-card {
  padding: 22px 22px 18px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 14px 32px rgba(0,0,0,0.22);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
}
.student-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255,212,0,0.35);
}
.student-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.student-avatar {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255,212,0,0.10);
  border: 1px solid rgba(255,212,0,0.30);
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 18px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.student-card h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: 19px;
  margin: 0;
  color: var(--paper-white);
}
.student-tag {
  display: inline-flex;
  align-items: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #0A0A0A;
  background: var(--accent);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
  box-shadow: 0 4px 14px rgba(255,212,0,0.30);
}
.student-role {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(250,247,241,0.55);
  margin: 4px 0 0;
}
.student-jump {
  font-family: var(--sans);
  font-size: 15px;
  color: rgba(250,247,241,0.92);
  line-height: 1.45;
  margin: 0 0 10px;
}
.student-jump strong {
  color: var(--accent);
  font-weight: 700;
  text-shadow: 0 0 12px rgba(255,212,0,0.30);
}
.student-jump span {
  color: rgba(250,247,241,0.55);
  font-weight: 400;
}
.student-note {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(250,247,241,0.70);
  margin: 0 0 14px;
}
.student-stars {
  color: #E2C879;
  font-size: 15px;
  letter-spacing: 0.10em;
  margin-bottom: 14px;
}

/* --- Video testimonianza dentro la card --- */
.student-video {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(160deg, #0E1B36 0%, #050C1E 100%);
  border: 1px solid rgba(255,212,0,0.18);
}

/* YouTube lite facade */
.yt-lite { cursor: pointer; }
.yt-lite-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 1;
  transition: transform .45s var(--ease, ease), filter .35s ease;
}
.yt-lite:hover .yt-lite-thumb { transform: scale(1.04); filter: brightness(1.05); }
.yt-lite::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 60%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.35) 80%),
    linear-gradient(180deg, rgba(0,0,0,0.0) 60%, rgba(0,0,0,0.35) 100%);
}
.yt-lite-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  width: 64px;
  height: 64px;
  border-radius: 999px;
  background: var(--accent);
  color: #0A0A0A;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), 0 0 28px rgba(255,212,0,0.45);
  transition: transform .25s var(--ease, ease), box-shadow .25s ease;
}
.yt-lite-play svg { margin-left: 4px; }
.yt-lite:hover .yt-lite-play { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 12px 36px rgba(0,0,0,0.5), 0 0 40px rgba(255,212,0,0.6); }
.yt-lite-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.yt-lite--active::before { display: none; }
.student-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #000;
}
.student-video-poster {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background:
    radial-gradient(circle at 50% 60%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.45) 85%),
    linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.55) 100%);
  cursor: pointer;
  transition: background .35s ease;
  z-index: 2;
}
.student-video-poster:hover { background:
  radial-gradient(circle at 50% 60%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.35) 90%),
  linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.50) 100%); }
.student-video.is-playing .student-video-poster { display: none; }
.student-video-label {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(250,247,241,0.65);
  position: absolute;
  top: 14px;
  left: 14px;
}
.student-video-play {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 0;
  background: var(--accent);
  color: #000;
  display: grid;
  place-items: center;
  cursor: pointer;
  position: relative;
  box-shadow: 0 12px 32px rgba(255,212,0,0.40), 0 4px 12px rgba(0,0,0,0.4);
  transition: transform .35s var(--ease-back-out);
}
.student-video-play::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 999px;
  border: 2px solid var(--accent);
  opacity: 0;
  transform: scale(0.85);
  pointer-events: none;
  transition: transform .55s var(--ease-expo-soft), opacity .55s var(--ease);
}
.student-video-play svg { margin-left: 3px; }
.student-video-poster:hover .student-video-play,
.student-video-play:hover { transform: scale(1.08); }
.student-video-poster:hover .student-video-play::after,
.student-video-play:hover::after { opacity: 0.45; transform: scale(1.4); }
.student-video-play:active { transform: scale(0.95); }

@media (max-width: 900px) {
  .students-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .students-grid { grid-template-columns: 1fr; gap: 14px; }
  .student-card { padding: 18px 18px 14px; }
  .student-video-play { width: 50px; height: 50px; }
}

/* Hero re-order desktop */
@media (min-width: 1024px) {
  .prisma-hero-content {
    position: absolute;
    inset: 0;
    padding: 140px 48px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
  }
  .prisma-hero-grid { display: contents; }
  .prisma-hero-left {
    grid-column: auto;
    order: 1;
    text-align: center;
    max-width: 920px;
    padding-bottom: 0;
  }
  .prisma-hero-vsl {
    position: static;
    order: 2;
    width: clamp(420px, 38vw, 560px);
    top: auto;
    right: auto;
    margin: 0;
  }
  .prisma-hero-right {
    order: 3;
    flex-direction: row;
    gap: 28px;
    padding-bottom: 0;
    justify-content: center;
    align-items: center;
  }
}

@media (min-width: 768px) {
  .container { max-width: 1120px; padding-inline: clamp(48px, 6vw, 96px); }
}

/* === ROUND-8 POLISH ADDITIONS === */

/* Task 0: Hero VSL desktop reorder */
@media (min-width: 1024px) {
  .prisma-hero-content {
    position: absolute;
    inset: 0;
    padding: 140px 48px 56px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
  }
  .prisma-hero-grid { display: contents; }
  .prisma-hero-left  { order: 1; text-align: center; max-width: 920px; }
  .prisma-hero-vsl   {
    order: 2;
    position: static;
    width: clamp(420px, 38vw, 560px);
    margin: 0;
    right: auto;
    top: auto;
    left: auto;
  }
  .prisma-hero-right { order: 3; flex-direction: row; gap: 28px; }
}

/* Task 2: W.A.V + badge between cards */
.diff-grid--3d { position: relative; overflow: visible; }
.diff-grid--3d::before,
.diff-grid--3d::after {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--accent);
  color: #0A0F1A;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 28px;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 5px rgba(255,212,0,0.20),
    0 0 36px rgba(255,212,0,0.75),
    0 8px 24px rgba(0,0,0,0.55);
  z-index: 100;
  pointer-events: none;
}
.diff-grid--3d::before { left: 33.333%; }
.diff-grid--3d::after  { left: 66.666%; }
.diff-card--glass::after { content: none !important; }
@media (max-width: 900px) {
  .diff-grid--3d::before,
  .diff-grid--3d::after {
    left: 50% !important;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    font-size: 24px;
  }
  .diff-grid--3d::before { top: 33.333% !important; }
  .diff-grid--3d::after  { top: 66.666% !important; }
}

/* Task 3: Garanzia shield background */
.guarantee { position: relative; }
.guarantee-shield {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(620px, 80%);
  aspect-ratio: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD400' stroke-width='1.2' stroke-linejoin='round'><path d='M12 2L3 5v6c0 5.5 4 10 9 11 5-1 9-5.5 9-11V5l-9-3z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.06;
  filter: drop-shadow(0 0 24px rgba(255,212,0,0.30));
  pointer-events: none;
  z-index: 0;
}
.guarantee-inner { position: relative; z-index: 3; }

/* Task 4: Orbit hint pulse */
.orbit-hint {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255,212,0,0.55);
  animation: orbit-hint-bounce 1.6s ease-in-out infinite;
  pointer-events: none;
}
.orbit-hint-arrow {
  font-size: 18px;
  display: inline-block;
  transform: rotate(-30deg);
}
@keyframes orbit-hint-bounce {
  0%, 100% { transform: translate(0, -50%); opacity: .8; }
  50%      { transform: translate(6px, -50%); opacity: 1; }
}
.orbit-hint-dismissed .orbit-hint { display: none; }

/* Task 5: Paths left/right reveal + bullet alignment */
.reveal-from-left  { opacity: 0; transform: translateX(-40px); will-change: transform, opacity; }
.reveal-from-right { opacity: 0; transform: translateX(40px); will-change: transform, opacity; }
.no-js .reveal-from-left, .no-js .reveal-from-right { opacity: 1; transform: none; }
.paths .path li { min-height: 3.2em; align-items: flex-start; }

/* Task 6: Qualifier title colors */
.qual-yes h3 {
  color: #4ADE80;
  text-shadow: 0 0 16px rgba(74,222,128,0.35);
}
.qual-no h3 {
  color: #FF6B6B;
  text-shadow: 0 0 16px rgba(255,107,107,0.35);
}
.qual-yes { border-color: rgba(74,222,128,0.35); }
.qual-no  { border-color: rgba(255,107,107,0.32); }

/* === Qual cards: same height + aligned items === */
.qual-grid { align-items: stretch; }
.qual-card { display: flex; flex-direction: column; }
.qual-card h3 { min-height: 2.6em; }
.qual-card ul { flex: 1; }
.qual-card li { min-height: 3.2em; align-items: flex-start; }

/* === Future-list: 2-column layout (title sx, descrizione dx) === */
.future-list li {
  display: grid !important;
  grid-template-columns: 28px minmax(220px, 28%) 1fr;
  gap: 18px;
  align-items: start;
}
.future-list li .check-mini { grid-column: 1; align-self: start; }
.future-list li strong { grid-column: 2; padding-right: 16px; border-right: 1px solid rgba(255,255,255,0.18); align-self: start; }
.future-list li .future-desc { grid-column: 3; align-self: start; }
@media (max-width: 700px) {
  .future-list li {
    grid-template-columns: 28px 1fr;
    gap: 10px 14px;
  }
  .future-list li strong { grid-column: 2; border-right: none; padding-right: 0; padding-bottom: 4px; }
}

/* === Orbit hint STATIC (anchored to where node "2" sits at angle 60° NE) === */
.orbit-stage { position: relative; }
.orbit-hint-static {
  position: absolute;
  top: 16%;
  right: 4%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-shadow: 0 0 12px rgba(0,0,0,0.65);
  pointer-events: none;
  z-index: 6;
  animation: orbit-hint-bounce 1.8s ease-in-out infinite;
}
.orbit-hint-static .orbit-hint-text {
  display: inline-block;
  padding: 2px 4px;
}
.orbit-hint-static .orbit-hint-curve {
  color: #FFFFFF;
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.55));
  transform: translateX(-22px) rotate(-8deg);
  margin-top: -2px;
}
@keyframes orbit-hint-bounce {
  0%, 100% { transform: translateY(0); opacity: .9; }
  50%      { transform: translateY(-4px); opacity: 1; }
}
@media (max-width: 900px) {
  .orbit-hint-static { font-size: 11px; top: 10%; right: 2%; }
  .orbit-hint-static .orbit-hint-curve { width: 46px; height: 50px; transform: translateX(-14px) rotate(-8deg); }
}
@media (max-width: 640px) {
  .orbit-hint-static {
    font-size: 10px;
    top: 6%;
    right: 4%;
    letter-spacing: 0.03em;
  }
  .orbit-hint-static .orbit-hint-curve { width: 38px; height: 42px; transform: translateX(-10px) rotate(-6deg); }
}

/* W.A.V: badge "+" giallo fluo tra le 3 card */
.diff-grid--3d { position: relative; overflow: visible; }
.diff-grid--3d::before,
.diff-grid--3d::after {
  content: "+";
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  border-radius: 999px;
  background: var(--accent);
  color: #0A0F1A;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 28px;
  display: grid;
  place-items: center;
  box-shadow:
    0 0 0 5px rgba(255,212,0,0.20),
    0 0 36px rgba(255,212,0,0.75),
    0 8px 24px rgba(0,0,0,0.55);
  z-index: 100;
  pointer-events: none;
}
.diff-grid--3d::before { left: 33.333%; }
.diff-grid--3d::after  { left: 66.666%; }
.diff-card--glass::after { content: none !important; }
@media (max-width: 900px) {
  .diff-card--glass:not(:last-child)::after {
    right: 50%; top: auto; bottom: -28px;
    transform: translate(50%, 50%);
    width: 40px; height: 40px; font-size: 22px;
  }
}

.guarantee .guarantee-inner { position: relative; }

/* Qualifier titoli colorati semaforo */
.qual-yes h3 {
  color: #4ADE80;
  text-shadow: 0 0 16px rgba(74,222,128,0.35);
}
.qual-no h3 {
  color: #FF6B6B;
  text-shadow: 0 0 16px rgba(255,107,107,0.35);
}
.qual-yes { border-color: rgba(74,222,128,0.35) !important; }
.qual-no  { border-color: rgba(255,107,107,0.32) !important; }


.orbit-hint {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(255,212,0,0.55);
  animation: orbit-hint-bounce 1.6s ease-in-out infinite;
  pointer-events: none;
}
.orbit-hint-arrow {
  font-size: 18px;
  display: inline-block;
  transform: rotate(-30deg);
}
@keyframes orbit-hint-bounce {
  0%, 100% { transform: translate(0, -50%); opacity: .8; }
  50%      { transform: translate(6px, -50%); opacity: 1; }
}
.orbit-hint-dismissed .orbit-hint { display: none; }
@media (max-width: 600px) {
  .orbit-hint { font-size: 9px; left: calc(100% + 6px); }
  .orbit-hint-arrow { font-size: 14px; }
}

.reveal-from-left  { opacity: 0; transform: translateX(-40px); will-change: transform, opacity; }
.reveal-from-right { opacity: 0; transform: translateX(40px); will-change: transform, opacity; }
.no-js .reveal-from-left, .no-js .reveal-from-right { opacity: 1; transform: none; }
.paths .path li { min-height: 3.2em; align-items: flex-start; }

/* ============================================================
   Fix W.A.V "+" clipping: parent .diff-card has overflow:hidden which
   clips the ::after badge positioned right:-28px. Override only on glass variant.
   ============================================================ */
.diff-card.diff-card--glass { overflow: visible !important; }
.diff-grid { overflow: visible !important; }

/* ============================================================
   Hero polish round 2 — brand top center, VSL smaller, no global nav
   ============================================================ */

/* Hide global fixed nav */
.nav { display: none !important; }

@media (min-width: 1024px) {
  /* Brand "Editing for Freedom" centered at top */
  .prisma-hero-tag {
    left: 50% !important;
    right: auto !important;
    top: 64px !important;
    transform: translateX(-50%) !important;
    align-items: center !important;
    text-align: center !important;
    max-width: none !important;
  }
  .prisma-hero-brand-row {
    justify-content: center !important;
  }
  /* Push hero content below brand */
  .prisma-hero-content {
    padding-top: 220px !important;
    gap: 24px !important;
  }
  /* VSL smaller */
  .prisma-hero-vsl {
    width: clamp(280px, 22vw, 380px) !important;
  }
}

@media (max-width: 1023px) {
  /* Compensate for missing global nav: push hero-tag down */
  .prisma-hero-tag { top: 32px !important; }
}

/* === ROUND-9: brand-row chip box + claim sizing === */
@media (min-width: 1024px) {
  /* push brand-tag up to very top so it doesn't sit on claim */
  .prisma-hero-tag { top: 56px !important; left: 50% !important; transform: translateX(-50%) !important; max-width: none !important; align-items: center !important; }
  .prisma-hero-tag-mono { display: none !important; }

  .prisma-hero-content {
    padding-top: 140px !important;
    padding-bottom: 56px !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0 !important;
  }
  .prisma-hero-left { width: 100% !important; align-self: center !important; margin: auto 0 !important; }
  .prisma-hero-vsl { align-self: center !important; margin-left: auto !important; margin-right: auto !important; }
  .prisma-hero-right { align-self: stretch !important; width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; }
  .prisma-hero-cta { align-self: center !important; margin: 0 auto !important; }
  .prisma-hero-meta { align-self: center !important; justify-content: center !important; }
  .prisma-hero-brand-row {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    padding: 18px 30px;
    background: rgba(10, 15, 26, 0.55);
    border: 1px solid rgba(255, 212, 0, 0.28);
    border-radius: 999px;
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    box-shadow:
      0 0 0 1px rgba(255,255,255,0.04) inset,
      0 10px 32px rgba(0,0,0,0.40),
      0 0 32px rgba(255,212,0,0.14);
  }
  .prisma-hero-brand-row .prisma-hero-tag-brand {
    font-size: clamp(28px, 2.3vw, 38px);
    line-height: 1;
  }
  .prisma-hero-brand-row .prisma-hero-tag-pill {
    font-size: 12px;
    padding: 8px 14px;
  }
  .prisma-hero-claim {
    font-size: clamp(40px, 3.4vw, 60px) !important;
    line-height: 1.08;
    max-width: 980px;
    margin: 0 auto;
  }
  .prisma-hero-vsl {
    width: clamp(400px, 33vw, 480px) !important;
    margin-top: clamp(20px, 3vh, 40px) !important;
  }
  .prisma-hero-left { margin-bottom: clamp(20px, 4vh, 50px) !important; }
  /* CTA + meta stacked centered: CTA on top, meta below */
  .prisma-hero-right {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
  }
  .prisma-hero-right .prisma-hero-cta { order: 1; }
  .prisma-hero-right .prisma-hero-meta { order: 2; }
}

/* Hero background darken for text readability (all viewports) */
.prisma-hero-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.42);
  pointer-events: none;
  z-index: 1;
}
.prisma-hero-tag,
.prisma-hero-content { position: relative; z-index: 2; }

/* === SCROLL libero (snap rimosso: causava scatti) === */
html { scroll-behavior: smooth; }
.prisma-hero { min-height: 100vh; }
@media (max-width: 1023px) {
  .prisma-hero { min-height: 0 !important; height: auto !important; }
  .prisma-hero-frame { min-height: 0 !important; height: auto !important; }
}

/* === MOBILE FIX: reset desktop absolute positioning, flow naturally === */
@media (max-width: 1023px) {
  .prisma-hero-content {
    position: relative !important;
    inset: auto !important;
    padding: 90px 20px 56px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 18px !important;
    min-height: 0 !important;
    box-sizing: border-box;
  }
  .prisma-hero-grid { display: contents !important; }
  .prisma-hero-tag {
    position: absolute !important;
    top: 64px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    right: auto !important;
    max-width: calc(100% - 32px) !important;
    z-index: 5;
  }
  .prisma-hero-brand-row {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 14px !important;
    background: rgba(10, 15, 26, 0.55);
    border: 1px solid rgba(255, 212, 0, 0.28);
    border-radius: 999px;
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    white-space: nowrap;
  }
  .prisma-hero-tag-mono { display: none !important; }
  .prisma-hero-tag-brand { display: inline !important; font-size: 16px !important; line-height: 1 !important; }
  .prisma-hero-tag-pill { font-size: 9px !important; padding: 5px 9px !important; }

  .prisma-hero-left {
    order: 1 !important;
    width: 100% !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .prisma-hero-claim {
    font-size: clamp(28px, 7.4vw, 40px) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .prisma-hero-vsl {
    order: 2 !important;
    position: static !important;
    width: 100% !important;
    max-width: 360px !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto !important;
    animation: none !important;
  }
  .prisma-hero-right {
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 0 !important;
  }
  .prisma-hero-right .prisma-hero-cta { order: 1 !important; align-self: center !important; }
  .prisma-hero-right .prisma-hero-meta { order: 2 !important; justify-content: center !important; flex-wrap: wrap !important; }
  .prisma-hero-nav { display: none !important; }
}

/* === HERO REWRITE: subtitle, rating, social, "Premi Play" callout === */
.prisma-hero-sub {
  font-family: var(--sans);
  font-weight: 600;
  color: rgba(255,255,255,0.92);
  text-align: center;
  margin: 14px auto 0;
  max-width: 720px;
  font-size: clamp(15px, 1.6vw, 20px);
  line-height: 1.4;
  text-shadow: 0 2px 14px rgba(0,0,0,0.6);
}
.prisma-hero-sub em {
  color: var(--accent);
  font-style: normal;
  font-weight: 700;
}

/* Rating block under VSL */
.prisma-hero-rating {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,0.5);
}
.prisma-hero-stars {
  color: #FFC72C;
  font-size: 22px;
  letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(255,199,44,0.55);
}
.prisma-hero-rating-score { color: #fff; font-size: 16px; }
.prisma-hero-social {
  margin: 6px auto 0;
  max-width: 540px;
  text-align: center;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  line-height: 1.4;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
.prisma-hero-social strong { color: #fff; font-weight: 700; }

/* "Premi Play e scopri come" floating callout */
.prisma-hero-vsl { position: relative; }
.prisma-hero-vsl-callout {
  position: absolute;
  top: -46px;
  right: -10px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  color: var(--accent);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-shadow: 0 0 14px rgba(255,212,0,0.6), 0 2px 6px rgba(0,0,0,0.55);
  white-space: nowrap;
  pointer-events: none;
  z-index: 5;
  animation: callout-bob 2.4s ease-in-out infinite;
}
.prisma-hero-vsl-callout-text { padding-right: 18px; }
.prisma-hero-vsl-callout-arrow {
  color: var(--accent);
  filter: drop-shadow(0 0 8px rgba(255,212,0,0.55)) drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  margin: 2px 8px -6px 0;
}
@keyframes callout-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
@media (max-width: 1023px) {
  .prisma-hero-vsl-callout {
    position: static;
    margin-bottom: 8px;
    flex-direction: row;
    font-size: 12px;
  }
  .prisma-hero-vsl-callout-arrow { width: 28px; height: 38px; }
}

/* === Section #problema: compact to fit ~100vh === */
#problema { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding-top: 48px; padding-bottom: 48px; }
#problema .section-head { margin-bottom: 24px; }
#problema .section-title { font-size: clamp(28px, 4vw, 44px); margin-bottom: 8px; }
#problema .section-lead { font-size: clamp(14px, 1.4vw, 17px); margin: 0; }
#problema .problem-image { aspect-ratio: 16 / 9; max-height: 38vh; }
#problema .problem-image > img { height: 100%; margin-top: 0; }
#problema .problem-card-body { padding: 16px 20px 18px; }
#problema .problem-card-body h3 { font-size: clamp(16px, 1.6vw, 20px); margin-bottom: 8px; line-height: 1.22; }
#problema .problem-card-body p { font-size: 14px; line-height: 1.5; }
#problema .problem-grid--compare { gap: 18px; }
@media (max-width: 768px) {
  #problema { padding-top: 32px; padding-bottom: 32px; }
  #problema .problem-image { max-height: 28vh; }
  #problema .problem-card-body { padding: 14px 16px 16px; }
}

/* === Bridge section (tempo + CTA) === */
#bridge.bridge-section {
  min-height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 56px 0;
}
.bridge-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(32px, 4.6vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 28px;
  text-wrap: balance;
}
.bridge-title em { color: var(--accent); font-style: italic; font-weight: 600; }
.bridge-sub {
  font-family: var(--sans);
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45;
  color: rgba(255,255,255,0.88);
  margin: 0 0 22px;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}
.bridge-sub em { color: var(--accent); font-style: normal; font-weight: 600; }
.bridge-lead {
  font-family: var(--sans);
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(255,255,255,0.65);
  margin: 0 0 36px;
}
.bridge-lead em { color: rgba(255,255,255,0.95); font-style: normal; font-weight: 600; }
.bridge-cta-wrap { display: flex; justify-content: center; }
@media (max-width: 768px) {
  #bridge.bridge-section { padding: 28px 0; }
  .bridge-title { margin-bottom: 16px; }
  .bridge-sub { margin-bottom: 14px; }
  .bridge-lead { margin-bottom: 22px; }
}

/* === Metodo section repurposed: "Dove sarai tra 6 mesi" (reuse .solution-list toggles) === */
#metodo.vision-section {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 0;
}
#metodo.vision-section .section-head { text-align: center; margin-bottom: 28px; }
#metodo.vision-section .section-title { font-size: clamp(30px, 4vw, 52px); }
/* extend yellow highlight to p when toggle is on (h4 rule already exists upstream) */
.solution-list li:has(.switch-check:checked) p {
  color: rgba(255,212,0,0.88);
  transition: color .25s ease;
}
.solution-list li p { transition: color .25s ease; }
.vision-close {
  font-family: var(--serif);
  font-style: italic;
  text-align: center;
  font-size: clamp(15px, 1.4vw, 18px);
  color: rgba(255,255,255,0.85);
  margin: 28px 0 22px;
}
.vision-close em { color: var(--accent); font-style: italic; font-weight: 600; }
.vision-cta-wrap { display: flex; justify-content: center; }
@media (max-width: 768px) {
  #metodo.vision-section { padding: 40px 0; }
}

/* === Jobboard section === */
#jobboard.jobboard-section {
  padding: 72px 0 88px;
}
#jobboard .section-head { text-align: center; margin-bottom: 28px; }
#jobboard .section-title { font-size: clamp(28px, 3.8vw, 48px); }
#jobboard .section-lead { font-size: clamp(15px, 1.6vw, 19px); max-width: 720px; margin: 0 auto; }

.jobboard-perks {
  list-style: none;
  padding: 0;
  margin: 0 auto 40px;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 56px;
  font-family: var(--sans);
  font-size: clamp(14px, 1.3vw, 16px);
  color: rgba(255,255,255,0.92);
  text-align: center;
}
.jobboard-perks li {
  margin: 0;
  white-space: nowrap;
  line-height: 1.4;
}
.jobboard-perks strong { color: #fff; font-weight: 700; }
.jobboard-check { font-size: 16px; line-height: 1; margin-right: 8px; }

.jobboard-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
  margin: 0 auto 36px;
  max-width: 1280px;
}
.jobboard-card {
  background: linear-gradient(180deg, rgba(15,23,42,0.92), rgba(8,14,28,0.92));
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 18px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.40), 0 0 0 1px rgba(255,255,255,0.04) inset;
  color: rgba(255,255,255,0.92);
}
/* row 1: 3 cards across 6 cols (2 cols each) */
.jobboard-card:nth-child(1) { grid-column: 1 / span 2; grid-row: 1; }
.jobboard-card:nth-child(2) { grid-column: 3 / span 2; grid-row: 1; }
.jobboard-card:nth-child(3) { grid-column: 5 / span 2; grid-row: 1; }
/* row 2: 2 cards centered (offset 1 col from edges) */
.jobboard-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 2; }
.jobboard-card:nth-child(5) { grid-column: 4 / span 2; grid-row: 2; }

.jobboard-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.jobboard-avatar {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6b7280, #1f2937);
  color: #fff;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.10);
  object-fit: cover;
  object-position: center 20%;
}
img.jobboard-avatar { display: block; }
.jobboard-meta { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.jobboard-author { font-size: 14px; font-weight: 700; color: #fff; }
.jobboard-sub {
  font-size: 11.5px;
  color: rgba(255,255,255,0.55);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jobboard-time-badge {
  display: inline-grid;
  place-items: center;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  font-size: 9px;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
}
.jobboard-title {
  margin: 4px 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  color: #fff;
}
.jobboard-body {
  margin: 0;
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  color: rgba(255,255,255,0.78);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jobboard-foot {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 11.5px;
  color: rgba(255,255,255,0.65);
}
.jobboard-foot-muted { margin-left: auto; font-style: italic; color: rgba(255,255,255,0.45); }

.jobboard-cta-wrap { display: flex; justify-content: center; }

@media (max-width: 1080px) {
  .jobboard-grid { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
  .jobboard-card:nth-child(n) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 640px) {
  #jobboard.jobboard-section { padding: 48px 0 64px; }
  .jobboard-perks { grid-template-columns: 1fr; gap: 10px; text-align: left; }
  .jobboard-perks li { white-space: normal; }
  .jobboard-grid { grid-template-columns: 1fr; gap: 16px; max-width: 100%; }
  .jobboard-card { padding: 16px 16px 14px; }
}

.students-cta-wrap { display: flex; justify-content: center; margin-top: 36px; }

/* === Global mobile overflow guard === */
html, body { overflow-x: hidden; }
@media (max-width: 900px) {
  /* Collab triangle layout: keep 2 + 1 even on mobile, scaled down */
  .collab-grid--triangle { grid-template-columns: 1fr 1fr !important; max-width: 100% !important; }
  .collab-shot { max-width: 100% !important; }
}

/* === Card height equalization across grids === */
.diff-grid--3d { align-items: stretch; }
.diff-card--glass { display: flex; flex-direction: column; }
.diff-card-inner { display: flex; flex-direction: column; flex: 1; gap: 8px; }
.diff-card--glass h3 { min-height: 2.4em; }

.student-card { display: flex; flex-direction: column; }
.student-card .student-head,
.student-card .student-jump,
.student-card .student-note { flex-shrink: 0; }
.student-card .student-note { flex: 1; }
.student-card .student-video { margin-top: auto; }

.about-cards { align-items: stretch; }
.about-card { display: flex; }
.about-card p { margin: 0; align-self: center; }

/* Pilastri/testimonials/about: harmonize student-role uppercase */
.student-role { text-transform: uppercase; letter-spacing: 0.08em; font-size: 11.5px; }

/* === Mobile orbit fix: shrink ring + larger pad so center card not overlapped === */
@media (max-width: 640px) {
  .orbit { --orbit-r: 145px; --orbit-item: 48px; --orbit-pad: 80px; }
  .orbit-center { max-width: 78%; padding: 18px 16px; }
  .orbit-center-title { font-size: 18px; }
  .orbit-center-desc { font-size: 13px; }
}

/* === Mobile: reduce excessive section padding === */
@media (max-width: 900px) {
  .guarantee, #about, .about-v2-section { min-height: auto; padding: 56px 0; }
  .about-grid-v2 { gap: 24px; }
  .collab-block { padding: 16px; }
}

/* === Paths title wrap fix === */
.path h3 { word-break: normal; hyphens: none; text-wrap: balance; }

/* === Paths forked lines === */
.paths-fork {
  position: relative;
  width: 100%;
  max-width: 820px;
  margin: 16px auto 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: rgba(255,255,255,0.55);
}
.paths-fork-svg {
  width: 100%;
  height: 64px;
  display: block;
  margin-bottom: 10px;
}
.paths-fork-label {
  background: #FFFFFF;
  color: #0A0F1A;
  padding: 9px 20px;
  border-radius: 999px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.40);
  white-space: nowrap;
}
@media (max-width: 640px) {
  .paths-fork-svg { height: 50px; }
  .paths-fork-label { font-size: 12px; padding: 7px 16px; }
}

/* Mobile divider between the two paths cards (replaces fork SVG on mobile) */
.paths-divider-mobile {
  display: none;
}
@media (max-width: 768px) {
  .paths-divider-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 4px 0;
    color: rgba(255,255,255,0.6);
  }
  .paths-divider-arrow {
    width: 22px;
    height: 22px;
    color: rgba(255,255,255,0.75);
  }
  .paths-divider-arrow-up { color: var(--negative, #ff5050); }
  .paths-divider-arrow-down { color: var(--foliage, #5a7d3b); }
  .paths-divider-label {
    background: #FFFFFF;
    color: #0A0F1A;
    padding: 7px 18px;
    border-radius: 999px;
    font-family: var(--sans);
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.40);
    white-space: nowrap;
  }
  /* Hide the original fork on mobile since divider replaces it */
  .paths-fork { display: none; }
}

/* === ABOUT V2 (Perché posso guidarti davvero) === */
.about-v2-section .section-head { text-align: center; margin-bottom: clamp(48px, 6vw, 88px); }
.about-grid-v2 {
  display: grid;
  grid-template-columns: minmax(280px, 380px) 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
.about-grid-v2 .about-photo .photo-frame {
  border-radius: 18px;
  overflow: hidden;
  position: relative;
}
.about-grid-v2 .about-photo .photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about-content-v2 { display: flex; flex-direction: column; gap: 28px; }

.about-cards {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.about-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 14px 16px;
  transition: background .25s ease, border-color .25s ease, transform .3s ease;
}
.about-card:hover {
  background: rgba(255,212,0,0.06);
  border-color: rgba(255,212,0,0.32);
  transform: translateY(-2px);
}
.about-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}
.about-card strong { color: var(--accent); font-weight: 700; }
.about-card:nth-child(3) { grid-column: span 2; }

/* Collab block */
.collab-block {
  background: rgba(8, 14, 28, 0.55);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  padding: 22px 22px 18px;
}
.collab-title {
  text-align: center;
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 700;
  color: #FFFFFF;
}
/* Triangle layout: 2 top + 1 centered below */
.collab-grid--triangle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
  justify-items: center;
  max-width: 560px;
  margin: 0 auto;
}
.collab-shot {
  margin: 0;
  width: 100%;
  max-width: 260px;
  aspect-ratio: 3.37 / 1;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.10);
  background: #000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transition: transform .35s ease, box-shadow .35s ease;
}
.collab-shot:hover { transform: translateY(-6px) rotate(0deg); box-shadow: 0 18px 44px rgba(0,0,0,0.6); }
.collab-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.collab-shot--bottom { grid-column: 1 / -1; justify-self: center; }

/* Stagger collab shots vertically for editorial rhythm */
@media (min-width: 700px) {
  .collab-grid--triangle .collab-shot:nth-child(1) { transform: translateY(-12px) rotate(-1.2deg); }
  .collab-grid--triangle .collab-shot:nth-child(2) { transform: translateY(14px) rotate(1deg); }
  .collab-grid--triangle .collab-shot:nth-child(3) { transform: translateY(0) rotate(-0.6deg); }
}

.collab-note {
  margin: 18px 0 0;
  padding: 12px 16px;
  background: var(--accent);
  color: #0A0F1A;
  border-radius: 12px;
  font-family: var(--sans);
  font-weight: 700;
  font-size: 14px;
  text-align: center;
  box-shadow: 0 0 24px rgba(255,212,0,0.22);
}

@media (max-width: 900px) {
  .about-grid-v2 { grid-template-columns: 1fr; }
  .about-cards { grid-template-columns: 1fr; }
  .about-card:nth-child(3) { grid-column: auto; }
  .collab-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   COOKIE CONSENT BANNER + MODAL (GDPR / Google Consent Mode v2)
   ============================================================ */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 200;
  background: rgba(13, 15, 26, 0.96);
  border: 1px solid rgba(255, 212, 0, 0.30);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 212, 0, 0.08);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--paper-white, #FAF7F1);
  animation: cookie-banner-in .35s ease-out;
}
.cookie-banner[hidden] { display: none; }
@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.cookie-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 18px 22px;
}
.cookie-banner-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
  margin: 0 0 4px;
}
.cookie-banner-text {
  font-size: 13.5px;
  line-height: 1.5;
  margin: 0;
  color: rgba(250, 247, 241, 0.82);
}
.cookie-banner-text a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.cookie-btn {
  font-family: var(--sans, system-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 11px 18px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.cookie-btn:hover { transform: translateY(-1px); }
.cookie-btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.22);
  color: rgba(255, 255, 255, 0.92);
}
.cookie-btn--ghost:hover { border-color: rgba(255, 212, 0, 0.55); color: var(--accent); }
.cookie-btn--primary {
  background: var(--accent);
  color: #0A0A0A;
  border-color: var(--accent);
  box-shadow: 0 6px 22px rgba(255, 212, 0, 0.35);
}
.cookie-btn--primary:hover {
  box-shadow: 0 10px 28px rgba(255, 212, 0, 0.5);
}
@media (max-width: 768px) {
  .cookie-banner { left: 10px; right: 10px; bottom: 10px; border-radius: 16px; }
  .cookie-banner-inner { grid-template-columns: 1fr; gap: 14px; padding: 16px 18px; }
  .cookie-banner-actions { justify-content: stretch; }
  .cookie-btn { flex: 1; text-align: center; padding: 11px 14px; font-size: 12.5px; }
}

/* Modal */
.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 210;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cookie-modal[hidden] { display: none; }
.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cookie-modal-panel {
  position: relative;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  background: #0D0F1A;
  border: 1px solid rgba(255, 212, 0, 0.28);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  color: var(--paper-white, #FAF7F1);
  overflow: hidden;
}
.cookie-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.cookie-modal-head h3 {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  color: var(--accent);
}
.cookie-modal-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.7);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.cookie-modal-close:hover { color: var(--accent); }
.cookie-modal-body {
  padding: 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cookie-modal-intro {
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(250, 247, 241, 0.78);
  margin: 0 0 4px;
}
.cookie-toggle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.06);
  cursor: pointer;
  user-select: none;
}
.cookie-toggle:has(input:disabled) { cursor: not-allowed; opacity: 0.85; }
.cookie-toggle-text { display: flex; flex-direction: column; gap: 2px; }
.cookie-toggle-text strong { color: var(--paper-white); font-size: 14.5px; font-weight: 700; }
.cookie-toggle-text span { font-size: 12.5px; color: rgba(250, 247, 241, 0.65); line-height: 1.4; }
.cookie-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.cookie-toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
  background: rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  transition: background .25s ease;
  flex-shrink: 0;
}
.cookie-toggle-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #FFFFFF;
  transition: transform .25s ease;
}
.cookie-toggle input:checked ~ .cookie-toggle-switch { background: var(--accent); }
.cookie-toggle input:checked ~ .cookie-toggle-switch::before { transform: translateX(20px); background: #0A0A0A; }
.cookie-toggle input:disabled ~ .cookie-toggle-switch { background: rgba(255, 212, 0, 0.45); }
.cookie-modal-foot {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.25);
}
@media (max-width: 600px) {
  .cookie-modal-foot { flex-direction: column-reverse; }
  .cookie-modal-foot .cookie-btn { width: 100%; }
}

/* ============================================================
   LEGAL PAGES (privacy.html, cookie.html)
   ============================================================ */
.legal-page { background: #0A0F1A; color: var(--paper-white, #FAF7F1); }
.legal-main {
  padding: 120px 0 80px;
}
.legal-article {
  max-width: 760px;
}
.legal-head { margin-bottom: 48px; }
.legal-article h1 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 5vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
  color: var(--paper-white);
}
.legal-sub {
  font-size: 16px;
  line-height: 1.55;
  color: rgba(250, 247, 241, 0.78);
  margin: 0 0 8px;
}
.legal-updated {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(250, 247, 241, 0.5);
  margin: 0;
}
.legal-article section {
  margin-bottom: 36px;
}
.legal-article h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.4vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--accent);
}
.legal-article h3 {
  font-family: var(--sans, system-ui);
  font-weight: 700;
  font-size: 17px;
  margin: 18px 0 8px;
  color: var(--paper-white);
}
.legal-article p,
.legal-article li {
  font-size: 15.5px;
  line-height: 1.65;
  color: rgba(250, 247, 241, 0.82);
}
.legal-article p { margin: 0 0 12px; }
.legal-article ul {
  padding-left: 22px;
  margin: 0 0 12px;
}
.legal-article ul li { margin-bottom: 6px; }
.legal-article a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-article a:hover { text-decoration-thickness: 2px; }
.legal-article strong { color: var(--paper-white); font-weight: 700; }
@media (max-width: 768px) {
  .legal-main { padding: 90px 0 64px; }
  .legal-head { margin-bottom: 32px; }
  .legal-article section { margin-bottom: 28px; }
}