/* ============================================================
   UNISCHIA — Sistema visivo "Vetro Elettrico"
   ============================================================ */

:root {
  /* Palette default — Glass Light */
  --bg: #ffffff;
  --bg-2: #eaf1ff;          /* superfici "muted" → azzurrino tenue (era #fafbfd) */
  --bg-3: #f3f6ff;          /* fasce/blocchi chiari → azzurrino ghiaccio (era #ffffff) */
  --ink: #000000;
  --ink-2: #1a2138;
  --ink-mute: #3d4a6b;
  --line: rgba(10, 23, 56, 0.18);
  --line-2: rgba(10, 23, 56, 0.28);

  --accent: #1d4cff;        /* electric blue */
  --accent-2: #00c2ff;      /* cyan glow */
  --accent-deep: #0a1738;
  --metallic: linear-gradient(135deg, #c8d5ff 0%, #6b8cff 25%, #1d4cff 55%, #0a1738 100%);
  --chrome: linear-gradient(180deg, #f8faff 0%, #d8e0f3 50%, #aab6d6 100%);
  /* Sfondo sfumato globale del sito (ex sezione "Chi siamo"), ancorato al viewport */
  --page-bg: linear-gradient(180deg, #ffffff 0%, #f3f6ff 55%, #edf3ff 100%);

  --glass-bg: rgba(255, 255, 255, 0.55);
  --glass-bg-strong: rgba(255, 255, 255, 0.78);
  --glass-bg-dark: rgba(10, 23, 56, 0.55);
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: 0 18px 48px -18px rgba(10, 23, 56, 0.28), 0 2px 8px rgba(10, 23, 56, 0.06);

  --radius: 18px;
  --radius-lg: 28px;
  --radius-pill: 999px;

  /* Tipografia — overridable da Tweaks */
  --font-display: "Newsreader", "PP Editorial New", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, monospace;

  --display-tracking: -0.015em;
  --display-weight: 500;
  --body-tracking: -0.005em;

  /* Densità */
  --density: 1;
  --section-py: calc(96px * var(--density));
  --gutter: 32px;

  --max: 1480px;
}

/* Palette: Notte Vetrata (glass su fondo notte) */
[data-palette="night"] {
  --bg: #050b1c;
  --bg-2: #0a1738;
  --bg-3: #0e1d44;
  --ink: #eef1f7;
  --ink-2: #c2cce6;
  --ink-mute: #7d8aac;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --accent: #4d7cff;
  --accent-2: #6ee0ff;
  --accent-deep: #ffffff;
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-bg-dark: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.16);
  --glass-shadow: 0 24px 64px -16px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.3);
  --metallic: linear-gradient(135deg, #6ee0ff 0%, #4d7cff 40%, #1d4cff 70%, #0a1738 100%);
  --chrome: linear-gradient(180deg, #1a2f66 0%, #0a1738 100%);
  --page-bg: linear-gradient(180deg, #050b1c 0%, #0a1738 60%, #0e1d44 100%);
}

/* Palette: Cromo Acciaio (light + steel) */
[data-palette="steel"] {
  --bg: #ffffff;
  --bg-2: #fafbfd;
  --bg-3: #ffffff;
  --ink: #1a1f2e;
  --accent: #2563eb;
  --accent-2: #0ea5e9;
  --metallic: linear-gradient(135deg, #e8edf5 0%, #b4c0d6 30%, #6b7d9c 60%, #1a2236 100%);
}

/* Tipografia — override via Tweaks */
[data-display="editorial"] { --font-display: "Playfair Display", "PP Editorial New", Georgia, serif; --display-weight: 500; --display-tracking: -0.025em; }
[data-display="cormorant"] { --font-display: "Cormorant Garamond", Georgia, serif; --display-weight: 500; --display-tracking: -0.005em; }
[data-display="fraunces"] { --font-display: "Fraunces", Georgia, serif; --display-weight: 400; --display-tracking: -0.02em; }

/* Densità */
[data-density="compact"] { --density: 0.7; --gutter: 24px; }
[data-density="aerato"] { --density: 1.25; --gutter: 40px; }

/* ============================================================
   Reset + base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; overflow-x: clip; }
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--ink);
  letter-spacing: var(--body-tracking);
  line-height: 1.8;
  font-size: 17px;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   Tipografia
   ============================================================ */
.display {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-tracking);
  line-height: 0.96;
}
.serif-italic { font-family: var(--font-display); font-style: italic; font-weight: 400; }

h1, h2, h3 { margin: 0; }
.h1 { font-size: clamp(40px, 6vw, 96px); font-weight: 500; }
.h2 { font-size: clamp(32px, 4.4vw, 64px); font-weight: 500; }
.h3 { font-size: clamp(26px, 3vw, 44px); font-weight: 500; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 1px;
  background: currentColor;
  display: inline-block;
}

/* ============================================================
   Layout
   ============================================================ */
.container {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
section { padding: var(--section-py) 0; position: relative; }

/* ============================================================
   Glass primitives
   ============================================================ */
.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}
.glass-strong {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(32px) saturate(180%);
  backdrop-filter: blur(32px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius);
}

/* ============================================================
   NAVBAR — pill glass unica, presente su tutte le pagine
   (rimpiazza il vecchio sistema .nav grid / .nav-center / .nav-right)
   ============================================================ */
.nav {
  position: fixed;
  top: 16px; left: 24px; right: 24px;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(26px) saturate(180%);
  backdrop-filter: blur(26px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  transition: top .25s ease, background .25s ease, box-shadow .25s ease,
              opacity .6s ease, transform .6s ease;
}
body.nav-scrolled .nav {
  top: 10px;
  background: var(--glass-bg-strong);
  box-shadow: 0 10px 30px -16px rgba(10, 23, 56, .34);
}

.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--accent-deep);
  text-decoration: none;
  letter-spacing: -.01em;
  transition: transform .2s ease;
}
.nav-brand:hover { transform: translateY(-1px); }
.nav-brand img {
  height: 46px; width: 46px;
  border-radius: 50%;
  object-fit: contain;
  background: transparent;
}
.nav-brand span { font-size: 18px; }
.nav-brand sup {
  font-size: 9px;
  font-family: var(--font-mono);
  letter-spacing: .15em;
  color: var(--ink-mute);
  margin-left: 6px;
  vertical-align: top;
  text-transform: uppercase;
}

.nav-menu {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.nav-links a,
.nav-dropdown-toggle {
  font: 500 15px/1 Inter, system-ui, sans-serif;
  color: var(--ink-2);
  text-decoration: none;
  padding: 11px 18px;
  border-radius: var(--radius-pill);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.nav-links a:hover,
.nav-dropdown-toggle:hover { background: rgba(10, 23, 56, .06); color: var(--ink); }
.nav-links a.is-active,
.nav-links a[aria-current="page"] { background: var(--ink); color: var(--bg); }

.nav-group { position: relative; }
.nav-dropdown-toggle::after {
  content: "▾";
  font-size: 11px;
  color: var(--ink-mute);
  margin-left: 6px;
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  border-radius: 18px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  backdrop-filter: blur(28px) saturate(180%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
/* Ponte hover invisibile: copre il gap di 12px tra toggle e tendina
   così spostando il mouse verso le voci la tendina non si chiude. */
.nav-dropdown::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 14px;
}
.nav-group:hover .nav-dropdown,
.nav-group:focus-within .nav-dropdown,
.nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.nav-dropdown a {
  padding: 10px 14px;
  border-radius: 12px;
  font: 500 14px/1.2 Inter, system-ui, sans-serif;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.nav-dropdown a:hover,
.nav-dropdown a[aria-current="page"] { background: rgba(29, 76, 255, .10); color: var(--accent); }
.nav-dropdown-toggle.is-active-group,
.nav-dropdown-toggle.is-active-group::after { color: var(--accent); }

.nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-pill);
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  font: 600 15px/1 Inter, system-ui, sans-serif;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 10px 26px -10px rgba(29, 76, 255, .5);
  transition: transform .2s, box-shadow .2s;
}
.nav-cta::after { content: "→"; font-size: 14px; transition: transform .3s; }
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 14px 34px -10px rgba(29, 76, 255, .55); }
.nav-cta:hover::after { transform: translateX(3px); }

.nav-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  margin-left: auto;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 22px; height: 2px;
  margin: 0 auto;
  background: var(--accent-deep);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
body.nav-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-burger span:nth-child(2) { opacity: 0; }
body.nav-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-scrim {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10, 23, 56, .32);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
}
.nav-scrim[hidden] { display: none; }

/* Visibilità: visibile di default ovunque.
   Solo la homepage (body[data-hero-intro]) la nasconde finché il
   video hero non congela (body.hero-frozen, da site.js o nav.js). */
body[data-hero-intro]:not(.hero-frozen) .nav {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}

/* ---------- Mobile / tablet: <=900px ---------- */
@media (max-width: 900px) {
  .nav { padding: 10px 16px; gap: 12px; }
  .nav-burger { display: flex; }

  body.nav-open { overflow: hidden; }

  /* nav-open: rimuovere backdrop-filter/background qui è VOLUTO e load-bearing:
     rilascia lo stacking context di .nav così .nav-menu e .nav-scrim
     (figli position:fixed) si ancorano al viewport, non alla pill. */
  body.nav-open .nav {
    z-index: 202;
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .nav-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 201;
    width: min(78vw, 360px);
    margin: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 88px 22px 28px;
    overflow-y: auto;
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    backdrop-filter: blur(28px) saturate(180%);
    border-left: 1px solid var(--glass-border);
    box-shadow: -26px 0 50px -20px rgba(10, 23, 56, .45);
    /* +32px: la pill .nav ha backdrop-filter → è il containing block del drawer
       fixed, ed è rientrata di 24px (.nav right:24px). translateX(100%) da solo
       lascerebbe ~24px di pannello (glass) dentro il viewport = fascia chiara a
       destra dell'header su mobile. Lo spingo oltre il rientro così, da chiuso,
       il drawer sparisce del tutto. Da aperto vince body.nav-open (translateX 0). */
    transform: translateX(calc(100% + 32px));
    transition: transform .3s ease;
  }
  body.nav-open .nav-menu { transform: translateX(0); }

  .nav-links { position: static; top: auto; left: auto; transform: none; flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-links a,
  .nav-dropdown-toggle {
    font-size: 17px;
    padding: 14px;
    border-radius: 12px;
    text-align: left;
    width: 100%;
  }

  .nav-group { position: static; }
  .nav-dropdown::before { display: none; }
  /* opacity:1 voluto: il collasso è animato via max-height; visibility:hidden
     nasconde le voci anche agli screen reader quando chiuso. */
  .nav-dropdown {
    position: static;
    min-width: 0;
    opacity: 1;
    visibility: hidden;
    transform: none;
    max-height: 0;
    padding: 0 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    overflow: hidden;
    transition: max-height .3s ease, padding .3s ease, visibility .3s;
  }
  .nav-dropdown-toggle[aria-expanded="true"] + .nav-dropdown {
    visibility: visible;
    max-height: 420px;
    padding: 4px 10px 8px;
  }
  .nav-dropdown a { padding-left: 22px; }

  .nav-cta { margin-top: 12px; justify-content: center; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav, .nav-menu, .nav-dropdown, .nav-scrim,
  .nav-brand, .nav-cta, .nav-cta::after, .nav-burger span {
    transition: none !important;
  }
}

/* Focus visibile da tastiera */
.nav a:focus-visible,
.nav button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  background: none;
  color: inherit;
}
.btn-primary {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px -12px rgba(29, 76, 255, 0.5);
}
.btn-ghost {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-color: var(--glass-border);
  color: var(--ink);
}
.btn-ghost:hover {
  background: var(--glass-bg-strong);
  transform: translateY(-2px);
}
.btn-arrow::after {
  content: "→";
  transition: transform 0.3s;
}
.btn-arrow:hover::after { transform: translateX(4px); }

/* ============================================================
   Section header
   ============================================================ */
.section-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 32px;
  margin-bottom: 56px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.section-head .lead { max-width: 620px; color: var(--ink-2); margin-top: 20px; font-size: 18px; line-height: 1.75; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  color: white;
}
.hero-bg {
  position: absolute; inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, #061026 0%, #0a1738 40%, #1a2f66 100%);
}
.hero-bg::before {
  /* aurora */
  content: "";
  position: absolute; inset: -20%;
  background:
    radial-gradient(60% 40% at 30% 30%, rgba(77, 124, 255, 0.55), transparent 70%),
    radial-gradient(50% 50% at 75% 60%, rgba(110, 224, 255, 0.45), transparent 65%),
    radial-gradient(40% 30% at 60% 20%, rgba(255, 255, 255, 0.25), transparent 70%);
  filter: blur(40px);
  animation: aurora 24s ease-in-out infinite alternate;
}
.hero-bg::after {
  /* grain */
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.4 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  mix-blend-mode: overlay;
  pointer-events: none;
}
@keyframes aurora {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(-4%, 2%) rotate(8deg) scale(1.08); }
  100% { transform: translate(3%, -3%) rotate(-6deg) scale(1.05); }
}

.hero-vignette {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 70% at 50% 0%, transparent, rgba(0, 0, 0, 0.55) 100%),
    linear-gradient(180deg, transparent 30%, rgba(5, 11, 28, 0.7));
  pointer-events: none;
}

.hero-grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(80% 60% at 50% 50%, black, transparent);
  pointer-events: none;
}

.hero-particles {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  padding: 140px var(--gutter) 80px;
  max-width: var(--max);
  margin: 0 auto;
  width: 100%;
}

.hero-logo {
  position: absolute;
  top: 50%;
  right: clamp(-40px, 4vw, 80px);
  transform: translateY(-50%);
  width: clamp(360px, 46vw, 720px);
  height: auto;
  z-index: -1;
  opacity: 0.18;
  filter: drop-shadow(0 0 80px rgba(110, 224, 255, 0.45)) drop-shadow(0 0 40px rgba(77, 124, 255, 0.35));
  mix-blend-mode: screen;
  pointer-events: none;
  animation: heroLogoFloat 14s ease-in-out infinite alternate;
}

/* ===== Hero minimal: logo + nome + video bg ===== */
.hero--minimal { justify-content: center; align-items: center; }
.hero-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: -3;
  background: #050b1c;
}

/* ===== Hero v9: video incorniciato 75% (homepage) ===== */
.hero--minimal .hero-vignette { display: none; }

.hero-video-frame {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 75%;
  aspect-ratio: 16 / 9;
  max-height: calc(100vh - 160px);
  border-radius: 10px;
  overflow: hidden;
  box-shadow:
    0 24px 60px -24px rgba(11, 20, 48, 0.35),
    0 0 0 1px rgba(11, 20, 48, 0.10);
  background: #ffffff;
  z-index: 1;
  filter: blur(0);
  transition:
    opacity 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.2s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero-video-frame .hero-video-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: transparent;
}

@media (max-width: 760px) {
  .hero-video-frame { width: 90%; }
}

#hero.is-frozen .hero-video-frame {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.02);
  filter: blur(18px);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .hero-video-frame,
  #hero .hero-center,
  #hero .scroll-cue {
    transition: opacity 0.12s linear !important;
  }
  #hero.is-frozen .hero-video-frame {
    transform: translate(-50%, -50%); /* no scale */
    filter: none;
  }
}

.hero-stage {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  isolation: isolate;
  transform-origin: 52% 48%;
  animation: heroKenBurns 26s ease-in-out infinite alternate both;
  animation-play-state: paused;
}
#hero.is-frozen .hero-stage { animation-play-state: running; }
@keyframes heroKenBurns {
  0%   { transform: scale(1.00) translate(0%, 0%); }
  100% { transform: scale(1.04) translate(-0.7%, -0.5%); }
}

.hero-video-freeze {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
  z-index: 1;
}
.hero-video-freeze.is-on { opacity: 1; }

/* ===== Overlay aligned to displayed image content rect ===== */
.hero-overlay {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease .5s;
}
#hero.is-frozen .hero-overlay { opacity: 1; }
.hl { position: absolute; }

/* Halo glow behind the crest. Crest center ≈ (31%, 47%). */
.hl-halo {
  left: 31%; top: 47%;
  width: 32%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle,
    rgba(72, 124, 255, 0.55) 0%,
    rgba(72, 124, 255, 0.28) 30%,
    rgba(72, 124, 255, 0.10) 55%,
    rgba(72, 124, 255, 0) 70%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: hlHaloPulse 5s ease-in-out infinite alternate;
}
@keyframes hlHaloPulse {
  0%   { opacity: .55; transform: translate(-50%, -50%) scale(0.92); }
  100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.10); }
}

/* Concentric pulse rings expanding from the crest */
.hl-ring {
  left: 31%; top: 47%;
  width: 19.5%; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(72, 124, 255, 0.55);
  border-radius: 50%;
  opacity: 0;
  animation: hlRingExpand 5.4s cubic-bezier(.22,.7,.3,1) infinite;
}
.hl-ring--1 { animation-delay: 0s; }
.hl-ring--2 { animation-delay: 1.8s; }
.hl-ring--3 { animation-delay: 3.6s; }
@keyframes hlRingExpand {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0.85); border-color: rgba(72,124,255,0.6); }
  12%  { opacity: 0.75; }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.85); border-color: rgba(72,124,255,0.0); }
}

/* Underline that draws under the subtitle. Subtitle bottom ≈ y: 72%. */
.hl-underline {
  left: 30%; top: 71.5%;
  width: 0%; height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(40, 60, 120, 0.55) 50%,
    transparent);
  animation: hlUnderlineDraw 2.8s cubic-bezier(.6,.05,.3,1) .6s forwards,
             hlUnderlineDrift 7s ease-in-out 3.5s infinite alternate;
}
@keyframes hlUnderlineDraw {
  to { width: 40%; }
}
@keyframes hlUnderlineDrift {
  0%   { opacity: .55; transform: translateX(-2%); }
  100% { opacity: 1;   transform: translateX(2%); }
}

/* ===== Editorial frame overlay (post-freeze) ===== */
.hero-frame {
  position: absolute;
  inset: clamp(20px, 2.4vw, 36px);
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .9s ease .35s;
}
#hero .hero-frame { opacity: 1; }
.hero-corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid rgba(20, 30, 70, 0.45);
}
.hero-corner--tl { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.hero-corner--tr { top: 0; right: 0; border-left: 0;  border-bottom: 0; }
.hero-corner--bl { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.hero-corner--br { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

.hero-meta {
  position: absolute;
  z-index: 4;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(20, 30, 70, 0.7);
  text-shadow: none;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 1s ease .55s, transform 1s ease .55s;
  white-space: nowrap;
}
#hero .hero-meta { opacity: 1; transform: none; }
.hero-meta--tl { top: clamp(92px, 9vw, 120px); left:  clamp(40px, 4.5vw, 76px); display: flex; gap: 10px; align-items: center; }
.hero-meta--tr { top: clamp(92px, 9vw, 120px); right: clamp(40px, 4.5vw, 76px); }
.hero-meta--bl { bottom: clamp(34px, 3.6vw, 56px); left:  clamp(40px, 4.5vw, 76px); }
.hero-meta--br { bottom: clamp(34px, 3.6vw, 56px); right: clamp(40px, 4.5vw, 76px); }

.hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff5b48;
  box-shadow: 0 0 0 3px rgba(255, 91, 72, 0.22), 0 0 14px rgba(255, 91, 72, 0.7);
  animation: heroDotPulse 1.8s ease-in-out infinite;
}
@keyframes heroDotPulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .35; transform: scale(.82); }
}

/* Slow light sweep across the frozen frame */
.hero-sweep {
  position: absolute;
  top: -40%; left: -10%;
  width: 60%; height: 180%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(100deg,
    transparent 0%,
    transparent 38%,
    rgba(255, 255, 255, 0.04) 48%,
    rgba(200, 230, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.04) 52%,
    transparent 62%,
    transparent 100%);
  mix-blend-mode: screen;
  filter: blur(6px);
  transform: translateX(0);
}
#hero .hero-sweep {
  opacity: 1;
  transition: opacity 1.4s ease .8s;
  animation: heroSweep 11s ease-in-out 1.2s infinite;
}
@keyframes heroSweep {
  0%   { transform: translateX(-40%); }
  55%  { transform: translateX(230%); }
  100% { transform: translateX(230%); }
}
.hero--has-video .hero-vignette {
  background:
    radial-gradient(110% 80% at 50% 30%, transparent 30%, rgba(5, 11, 28, 0.55) 100%),
    linear-gradient(180deg, rgba(5, 11, 28, 0.25) 0%, transparent 30%, rgba(5, 11, 28, 0.85) 100%);
}
.hero-center {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 64px);
  text-align: left;
  padding: 0 var(--gutter);
  max-width: 100%;
}
.hero-center-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
@media (max-width: 760px) {
  .hero-center { flex-direction: column; text-align: center; gap: 24px; }
  .hero-center-text { align-items: center; }
}
.hero-center-logo {
  width: clamp(160px, 18vw, 260px);
  height: auto;
  margin-bottom: 0;
  flex-shrink: 0;
  filter:
    drop-shadow(0 0 60px rgba(110, 224, 255, 0.55))
    drop-shadow(0 0 24px rgba(77, 124, 255, 0.45))
    drop-shadow(0 12px 32px rgba(0, 0, 0, 0.4));
  animation: heroBadgeFloat 8s ease-in-out infinite alternate;
}
@keyframes heroBadgeFloat {
  0% { transform: translateY(-6px); }
  100% { transform: translateY(6px); }
}
.hero-center-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(48px, 7vw, 104px);
  line-height: 0.9;
  letter-spacing: -0.035em;
  color: white;
  margin: 0;
  background: linear-gradient(180deg, #ffffff 0%, #ffffff 50%, #b9d2ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 4px 40px rgba(110, 224, 255, 0.25);
}
.hero-center-sub {
  font-family: var(--font-mono);
  font-size: clamp(11px, 1vw, 14px);
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 0;
  padding: 10px 20px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@keyframes heroLogoFloat {
  0% { transform: translateY(-52%) rotate(-2deg) scale(1); }
  100% { transform: translateY(-48%) rotate(2deg) scale(1.04); }
}

.hero-mark {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 32px;
}
.hero-mark img {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: white;
  padding: 4px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.hero-mark .wm {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: white;
  line-height: 1;
}
.hero-mark .wm small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 6px;
  font-weight: 400;
}

.hero-meta {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-bottom: 48px;
  flex-wrap: wrap;
  gap: 24px;
}
.hero-meta .eyebrow { color: rgba(255,255,255,0.7); }
.hero-meta .eyebrow::before { background: rgba(255,255,255,0.5); }

.hero-title {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: clamp(44px, 6vw, 92px);
  line-height: 0.92;
  letter-spacing: -0.03em;
  margin: 0 0 32px;
}
.hero-title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(90deg, #fff, #6ee0ff 40%, #4d7cff 80%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: 540px;
  font-size: 18px;
  line-height: 1.72;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 40px;
}

.hero-search {
  display: grid;
  grid-template-columns: repeat(4, 1fr) auto;
  gap: 0;
  align-items: stretch;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border-radius: var(--radius-pill);
  padding: 6px;
  max-width: 820px;
  box-shadow: 0 20px 60px -20px rgba(0,0,0,0.5);
}
.hero-search .seg {
  padding: 14px 22px;
  border-right: 1px solid rgba(255,255,255,0.15);
  font-size: 13px;
  color: rgba(255,255,255,0.85);
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
  transition: background 0.2s;
  border-radius: var(--radius-pill);
}
.hero-search .seg:hover { background: rgba(255,255,255,0.06); }
.hero-search .seg span:first-child {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.hero-search .seg:nth-last-child(2) { border-right: none; }
.hero-search button {
  background: white;
  color: var(--accent-deep);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 28px;
  font-weight: 500;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hero-search button:hover { background: var(--accent-2); color: var(--accent-deep); }

@media (max-width: 880px) {
  .hero-search { grid-template-columns: 1fr; border-radius: 24px; }
  .hero-search .seg { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); padding: 12px 16px; }
  .hero-search button { padding: 14px; }
}

.hero-stats {
  display: flex;
  gap: 40px;
  margin-top: 64px;
  flex-wrap: wrap;
}
.hero-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hero-stats .stat strong {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero-stats .stat span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}

.scroll-cue {
  position: absolute;
  bottom: 38px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(20, 30, 70, 0.85);
  text-decoration: none;
  cursor: pointer;
  z-index: 5;
  transition: color .35s ease, gap .35s ease;
}
.scroll-cue:hover { color: rgba(72, 124, 255, 1); gap: 18px; }

.scroll-cue-label {
  position: relative;
  z-index: 2;
}
.scroll-cue-pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 118px; height: 118px;
  border-radius: 50%;
  border: 1px solid rgba(72, 124, 255, 0.45);
  transform: translate(-50%, -50%) scale(0.55);
  pointer-events: none;
  opacity: 0;
  animation: scrollCuePulse 3.4s ease-out infinite;
}
.scroll-cue-pulse--2 { animation-delay: 1.7s; }
@keyframes scrollCuePulse {
  0%   { transform: translate(-50%, -50%) scale(0.55); opacity: 0; }
  15%  { opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(1.45); opacity: 0; }
}

.scroll-cue-track {
  position: relative;
  width: 1px; height: 46px;
  background: linear-gradient(180deg,
    rgba(20, 30, 70, 0.45) 0%,
    rgba(20, 30, 70, 0.05) 100%);
  overflow: hidden;
}
.scroll-cue-dot {
  position: absolute;
  left: 50%; top: -6px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(72, 124, 255, 0.95);
  box-shadow: 0 0 14px rgba(72, 124, 255, 0.7);
  transform: translateX(-50%);
  animation: scrollCueDrop 1.9s cubic-bezier(.55,.05,.4,1) infinite;
}
@keyframes scrollCueDrop {
  0%   { top: -6px; opacity: 0; }
  18%  { opacity: 1; }
  82%  { opacity: 1; }
  100% { top: 52px; opacity: 0; }
}

.scroll-cue:hover .scroll-cue-pulse {
  border-color: rgba(72, 124, 255, 0.9);
}
.scroll-cue:hover .scroll-cue-dot {
  background: rgba(72, 124, 255, 1);
  box-shadow: 0 0 22px rgba(72, 124, 255, 1);
}

/* ============================================================
   Sponsor strip
   ============================================================ */
.sponsors {
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--bg-3);
  overflow: hidden;
}
.sponsors-inner {
  display: flex;
  align-items: center;
  gap: 64px;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
}
.sponsors:hover .sponsors-inner { animation-play-state: paused; }
.sponsor-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  color: var(--ink-mute);
  opacity: 0.7;
  transition: opacity 0.3s, color 0.3s;
  flex-shrink: 0;
}
.sponsor-logo:hover { opacity: 1; color: var(--ink); }
.sponsor-logo .glyph {
  display: inline-block;
  width: 28px; height: 28px;
  border: 1px solid currentColor;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-family: var(--font-mono);
  font-style: normal;
}
.sponsors-label {
  display: block;
  text-align: center;
  margin-bottom: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ============================================================
   Servizi cards
   ============================================================ */
.servizi-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 24px;
}
.servizio {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.5s;
  display: flex;
  flex-direction: column;
  min-height: 380px;
  cursor: pointer;
}
.servizio:hover {
  transform: translateY(-6px);
  box-shadow: 0 32px 80px -28px rgba(29, 76, 255, 0.4), 0 4px 12px rgba(10,23,56,0.08);
}
.servizio::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
}
.servizio::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 80% at 80% 100%, rgba(29, 76, 255, 0.12), transparent 60%);
  opacity: 0.6;
  transition: opacity 0.5s;
}
.servizio:hover::after { opacity: 1; }
.servizio--span6 { grid-column: span 6; }
.servizio--span4 { grid-column: span 4; }
.servizio--span8 { grid-column: span 8; }
.servizio--span12 { grid-column: span 12; }
.servizio-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-bottom: 24px;
  display: flex;
  justify-content: space-between;
}
.servizio-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 2.8vw, 42px);
  font-weight: var(--display-weight);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}
.servizio-title em { font-style: italic; }
.servizio-desc {
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.72;
  margin: 0 0 32px;
  max-width: 44ch;
}
.servizio-foot {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.servizio-tags {
  display: flex; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-mute);
  letter-spacing: 0.05em;
}
.servizio-tags span {
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(10,23,56,0.04);
  border: 1px solid var(--line);
}
.servizio-arrow {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.4s, background 0.4s;
}
.servizio:hover .servizio-arrow {
  background: var(--accent);
  transform: rotate(-45deg) scale(1.05);
}

@media (max-width: 1080px) {
  .servizio--span6, .servizio--span4, .servizio--span8 { grid-column: span 12; }
}

/* ============================================================
   Shop
   ============================================================ */
.shop-section { background: transparent; }
.shop-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.shop-section .container { max-width: min(1760px, 96vw); }
.shop-rail {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 32px;
  scrollbar-width: thin;
}
.shop-rail::-webkit-scrollbar { height: 6px; }
.shop-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }

.book {
  position: relative;
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 100%;
}
.shop-rail .book { width: 340px; }

.book-cover {
  position: relative;
  aspect-ratio: 3/4;
  border-radius: 12px;
  overflow: hidden;
  background: var(--metallic);
  box-shadow:
    0 30px 60px -25px rgba(10, 23, 56, 0.4),
    inset 0 0 0 1px rgba(255,255,255,0.18),
    inset 6px 0 12px -6px rgba(0,0,0,0.25);
  margin-bottom: 16px;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  isolation: isolate;
}
.book:hover .book-cover {
  transform: translateY(-8px) rotateX(4deg) rotateY(-3deg);
}
.book-cover::before {
  content: "";
  position: absolute;
  left: 8px; top: 0; bottom: 0;
  width: 1px;
  background: rgba(255,255,255,0.25);
  z-index: 2;
}
.book-cover::after {
  /* sheen */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.18) 50%, transparent 60%);
  z-index: 1;
  opacity: 0;
  transition: opacity 0.5s;
}
.book:hover .book-cover::after { opacity: 1; }
.book-cover-inner {
  position: relative;
  height: 100%;
  padding: 28px 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: white;
}
.book-cover-inner .top {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
.book-cover-inner .title-disp {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.05;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.book-cover-inner .title-disp em { font-style: italic; opacity: 0.85; }
.book-cover-inner .author {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.65;
}
.book-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 17px;
}
.book-meta .name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
}
.book-meta .price {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--ink);
}
.book-cat {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 6px;
}

@media (max-width: 1080px) {
  .shop-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .shop-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Tech courses
   ============================================================ */
.tech-section {
  position: relative;
  background: var(--bg);
  isolation: isolate;
}
.tech-section::before, .tech-section::after { content: none; }

.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.course {
  position: relative;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 32px;
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  box-shadow: var(--glass-shadow);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-height: 420px;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  overflow: hidden;
  isolation: isolate;
}
.course:hover {
  transform: translateY(-6px);
  border-color: var(--line-2);
  box-shadow: 0 32px 80px -28px rgba(10, 23, 56, 0.25);
}
.course-glyph {
  width: 56px; height: 56px;
  border-radius: 14px;
  background: var(--metallic);
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-style: italic;
  color: white;
}
.course-title {
  font-family: var(--font-display);
  font-size: 40px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
}
.course-title em { font-style: italic; color: var(--accent); }
.course-desc {
  color: var(--ink-2);
  font-size: 19px;
  line-height: 1.72;
  margin: 0;
}
.course-meta {
  margin-top: auto;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.course-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink);
}
.course-cta::after { content: "→"; transition: transform 0.3s; }
.course:hover .course-cta::after { transform: translateX(4px); }

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

/* ============================================================
   Newsletter + Eventi
   ============================================================ */
.newsletter-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: stretch;
}
.newsletter-card {
  position: relative;
  border-radius: var(--radius-lg);
  padding: 56px;
  background: var(--ink);
  color: white;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 480px;
}
.newsletter-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(50% 80% at 0% 100%, rgba(29, 76, 255, 0.7), transparent 60%),
    radial-gradient(40% 60% at 100% 0%, rgba(110, 224, 255, 0.4), transparent 60%);
}
.newsletter-card .eyebrow { color: rgba(255,255,255,0.6); }
.newsletter-card .eyebrow::before { background: rgba(255,255,255,0.4); }
.newsletter-card h3 {
  font-family: var(--font-display);
  font-size: clamp(30px, 3vw, 46px);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin: 24px 0 0;
  max-width: 12ch;
}
.newsletter-card h3 em { font-style: italic; }
.newsletter-form {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-top: 40px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--radius-pill);
  padding: 6px;
}
.newsletter-form input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: white;
  padding: 14px 22px;
  font-family: inherit;
  font-size: 15px;
  letter-spacing: -0.005em;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.45); }
.newsletter-form button {
  background: white;
  color: var(--accent-deep);
  border: none;
  border-radius: var(--radius-pill);
  padding: 0 28px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s;
}
.newsletter-form button:hover { background: var(--accent-2); }

.eventi-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.evento {
  position: relative;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  transition: transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
  flex: 1;
}
.evento:hover { transform: translateX(6px); box-shadow: var(--glass-shadow); }
.evento-date {
  text-align: center;
  font-family: var(--font-display);
  line-height: 1;
}
.evento-date .day { font-size: 36px; font-weight: 500; letter-spacing: -0.02em; }
.evento-date .month {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 4px;
}
.evento-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  font-weight: 500;
}
.evento-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
  margin-top: 4px;
  text-transform: uppercase;
}
.evento-cta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

@media (max-width: 1080px) { .newsletter-row { grid-template-columns: 1fr; } }

/* ============================================================
   Contatti
   ============================================================ */
.contatti-section {
  background: var(--bg-3);
  border-top: 1px solid var(--line);
}
.contatti-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
}
.contatti-info { padding-right: 40px; }
.contatti-title {
  font-family: var(--font-display);
  font-size: clamp(34px, 4vw, 64px);
  font-weight: var(--display-weight);
  line-height: 0.95;
  letter-spacing: -0.025em;
  margin: 24px 0 32px;
}
.contatti-title em { font-style: italic; }
.contatti-list {
  display: flex; flex-direction: column; gap: 24px;
  padding-top: 32px;
  border-top: 1px solid var(--line);
}
.contatti-list .row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 24px;
  align-items: baseline;
}
.contatti-list .label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contatti-list .val { font-size: 22px; }
.contatti-list .val a:hover { color: var(--accent); }

.lead-form {
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--glass-shadow);
}
.field {
  display: flex; flex-direction: column;
  margin-bottom: 24px;
  position: relative;
}
.field label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.field input, .field textarea, .field select {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line-2);
  padding: 12px 0;
  font-family: inherit;
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink);
  outline: none;
  resize: vertical;
  transition: border-color 0.3s;
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--accent);
}
.field textarea { min-height: 88px; }
.field-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
.checkboxes {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
.checkboxes label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  background: rgba(10,23,56,0.04);
  border: 1px solid var(--line);
  font-size: 13px;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s;
}
.checkboxes label:has(input:checked) {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.checkboxes input { display: none; }

.form-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--line);
}
.form-foot small {
  font-size: 12px;
  color: var(--ink-mute);
  max-width: 240px;
  line-height: 1.4;
}

@media (max-width: 1080px) {
  .contatti-row { grid-template-columns: 1fr; gap: 48px; }
  .lead-form { padding: 32px; }
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  background: var(--ink);
  color: var(--bg);
  padding: 80px 0 32px;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(60% 80% at 100% 100%, rgba(29,76,255,0.4), transparent 60%);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 64px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.footer h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin: 0 0 20px;
  font-weight: 400;
}
.footer-mark {
  font-family: var(--font-display);
  font-size: clamp(48px, 6vw, 96px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  font-weight: 400;
  margin-bottom: 24px;
}
.footer-mark em {
  font-style: italic;
  background: linear-gradient(90deg, #6ee0ff, #4d7cff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.footer p { color: rgba(255,255,255,0.65); margin: 0 0 8px; max-width: 36ch; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: rgba(255,255,255,0.7); font-size: 14px; transition: color 0.2s; }
.footer ul a:hover { color: white; }
.footer-bot {
  padding-top: 32px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.5);
}
.footer-bot .legal { display: flex; gap: 24px; }
@media (max-width: 880px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   Misc
   ============================================================ */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 1s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.fade-in.in {
  opacity: 1;
  transform: translateY(0);
}
/* I titoli di sezione restano fissi: niente fade-in "a comparsa scendendo" */
.section-head.fade-in,
.section-head.fade-in * {
  opacity: 1;
  transform: none;
  transition: none;
}
/* Aria extra in cima ai titoli display: line-height 0.96 + background-clip text
   tagliavano gli ascender (es. la "S" di "Siti su misura"). 0.12em ~ 14px su h2 116px. */
.section-head .display { padding-top: 0.12em; }
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-stagger].in > * { opacity: 1; transform: translateY(0); }

.placeholder-image {
  position: relative;
  background:
    repeating-linear-gradient(45deg, rgba(10,23,56,0.05) 0 1px, transparent 1px 12px),
    linear-gradient(135deg, var(--bg-2), var(--bg-3));
  border: 1px solid var(--line);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* page hero (interior pages) */
.page-hero {
  padding: 160px var(--gutter) 80px;
  max-width: var(--max);
  margin: 0 auto;
  border-bottom: 1px solid var(--line);
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 4.5vw, 76px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  font-weight: var(--display-weight);
  margin: 0;
  max-width: 16ch;
}
.page-hero h1 em { font-style: italic; }
.page-hero .lead {
  margin-top: 36px;
  max-width: 740px;
  font-size: 26px;
  color: var(--ink-2);
  line-height: 1.68;
}
/* variante centrata (es. hero pagina Servizi) */
.page-hero--center { text-align: center; }
.page-hero--center h1,
.page-hero--center .lead { margin-left: auto; margin-right: auto; }

/* ====== Cinematic components (2026-05-15) ====== */

/* ② spotlight-border — bordo che si illumina sotto il cursore */
.servizio{ position:relative; }
.servizio::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:radial-gradient(180px circle at var(--spx,-999px) var(--spy,-999px),
    var(--accent), transparent 65%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.servizio:hover::before{ opacity:1; }

/* ① text-mask — effetto "riempimento di colore allo scroll" RIMOSSO su richiesta (2026-06-24).
   I titoli .tm-fill restano blu (var(--accent)) e fissi, senza animazione da scorrimento. */
.tm-fill{
  color:var(--accent); -webkit-text-fill-color:var(--accent);
}

/* ③ svg-draw — connettore che si disegna */
.draw-path{ stroke-dasharray:1; stroke-dashoffset:1; }
@media (prefers-reduced-motion:reduce){ .draw-path{ stroke-dashoffset:0; } }

/* ④ coverflow — carosello 3D corsi */
.cf-stage{ position:relative; height:480px; perspective:1600px; overflow:hidden; }
.cf-track{ position:absolute; inset:0; transform-style:preserve-3d; }
.cf-card{ position:absolute; top:50%; left:50%; width:340px; height:420px; margin:-210px 0 0 -170px;
  transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .5s ease; will-change:transform; }
.cf-nav{ display:flex; gap:12px; justify-content:center; margin-top:24px; }
.cf-nav button{ font-family:var(--font-mono); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  padding:10px 18px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; border-radius:999px; }
@media (max-width:760px){ .cf-stage{ height:auto; perspective:none; }
  .cf-track{ position:static; display:flex; gap:16px; overflow-x:auto; transform:none!important; }
  .cf-card{ position:static; margin:0; width:280px; height:auto; transform:none!important; opacity:1!important; flex:0 0 auto; } }

/* restore pre-existing top shimmer on .servizio (S3 ::before now hosts the spotlight) */
.servizio{
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent) top / 100% 1px no-repeat,
    var(--glass-bg);
}

/* ---------- Fix responsive condiviso (catalogo corsi + servizi digitali) ----------
   Le griglie "step" usano grid-template-columns:repeat(4, 1fr) inline su piu' pagine
   (Come lavoriamo / Il metodo): senza questo collassano male <=760px.
   Il footer a 5 colonne (1fr 1fr a <=880px) sotto i 600px va in overflow: a colonna singola. */
@media (max-width: 760px) {
  [style*="repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* ─── Showcase siti realizzati: accordion orizzontale ─── */
.siti-accordion {
  display: flex;
  gap: 6px;
  height: clamp(380px, 60vh, 520px);
  margin-top: 16px;
}
.siti-panel {
  flex: 1;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  border-radius: var(--radius-lg, 14px);
  user-select: none;
  transition: flex 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.siti-panel:hover,
.siti-panel.is-open {
  flex: 5;
}
.siti-panel:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.siti-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.siti-panel:hover .siti-bg,
.siti-panel.is-open .siti-bg {
  transform: scale(1.05);
}
.siti-ovl {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15,18,28,0.82) 0%, rgba(15,18,28,0.18) 50%, transparent 72%);
}
.siti-collapsed {
  position: absolute;
  bottom: 22px;
  left: 14px;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: opacity 0.3s;
  z-index: 2;
}
.siti-panel:hover .siti-collapsed,
.siti-panel.is-open .siti-collapsed {
  opacity: 0;
}
.siti-expanded {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 24px 26px;
  color: #fff;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s,
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
  z-index: 2;
}
.siti-panel:hover .siti-expanded,
.siti-panel.is-open .siti-expanded {
  opacity: 1;
  transform: translateY(0);
}
.siti-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: #ff9b6a;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.siti-h {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 8px;
  color: #fff;
}
.siti-h em {
  font-style: italic;
  color: #cdd6ff;
}
.siti-d {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 38ch;
  margin: 0 0 14px;
}
/* Mobile: accordion verticale */
@media (max-width: 768px) {
  .siti-accordion {
    flex-direction: column;
    height: auto;
    gap: 6px;
  }
  .siti-panel {
    height: 56px;
    flex: none !important;
  }
  .siti-panel:hover,
  .siti-panel.is-open {
    height: 280px;
    flex: none !important;
  }
  .siti-collapsed {
    writing-mode: horizontal-tb;
    bottom: auto;
    top: 50%;
    left: 22px;
    transform: translateY(-50%);
  }
}

/* Telefono (<=600px): niente accordion da aprire. Tutte le card ESPANSE in
   colonna, con il titolo del settore SOPRA la card (fuori dall'immagine).
   Il tap sulla card apre comunque il modale con la demo. Desktop invariato. */
@media (max-width: 600px) {
  .siti-accordion { display: block; height: auto; margin-top: 20px; }

  .siti-panel,
  .siti-panel:hover,
  .siti-panel.is-open {
    display: flex;
    flex-direction: column;
    height: auto !important;
    flex: none !important;
    overflow: visible;
    border-radius: 0;
    margin-bottom: 30px;
  }
  /* etichetta verticale e velo scuro: servivano all'accordion sovrapposto, via */
  .siti-panel .siti-collapsed,
  .siti-panel .siti-ovl { display: none; }

  /* immagine = riquadro reale sotto il titolo (esce dall'absolute → ha altezza) */
  .siti-panel .siti-bg {
    position: relative;
    inset: auto;
    order: 2;
    width: 100%;
    height: 190px;
    border-radius: 14px;
    transform: none !important;
  }

  /* blocco testo (numero + titolo + descrizione) SOPRA l'immagine, sempre visibile,
     in flusso e con colori leggibili sullo sfondo chiaro della pagina */
  .siti-panel .siti-expanded {
    position: relative;
    inset: auto;
    order: 1;
    opacity: 1 !important;
    transform: none !important;
    padding: 0 2px 12px;
  }
  .siti-panel .siti-num { color: var(--accent); }
  .siti-panel .siti-h { color: var(--ink); font-size: 21px; }
  .siti-panel .siti-h em { color: var(--accent); }
  .siti-panel .siti-d { color: var(--ink-2); max-width: none; margin-bottom: 0; }
}

/* ─── Modale dettaglio tipologia ─── */
body[data-modal-open] {
  overflow: hidden;
}
.siti-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 56px 24px;
  overflow-y: auto;
  opacity: 1;
  transition: opacity 0.2s ease;
}
.siti-modal[hidden] {
  display: none;
}
.siti-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15,18,28,0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.siti-modal-panel {
  position: relative;
  z-index: 2;
  max-width: 920px;
  width: 100%;
  background: var(--bg, #fefdf9);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0,0,0,0.45);
  display: flex;
  flex-direction: column;
  transform: scale(1);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Inverted entry: JS sets [data-anim="opening"] (panel at 0.96), removes it after 2 rAFs to trigger the 0.96→1 transition. */
.siti-modal[data-anim="opening"] .siti-modal-panel {
  transform: scale(0.96);
}
.siti-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(15,18,28,0.55);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
}
.siti-modal-close:hover {
  background: rgba(15,18,28,0.8);
}
.siti-modal-close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.siti-modal-img {
  position: relative;
  width: 100%;
  /* Banner in cima, non colonna stretta: gli screenshot sono 1400x875 (landscape).
     Con l'aspect ratio reale l'anteprima si vede intera e leggibile; il cap d'altezza
     evita che l'immagine domini il modale (top-aligned = hero/titolo sempre visibile). */
  aspect-ratio: 1400 / 875;
  max-height: 440px;
  background-size: cover;
  background-position: top center;
  flex-shrink: 0;
}
.siti-modal-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(15,18,28,0) 60%, rgba(15,18,28,0.7));
}
.siti-modal-img > span {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
}
.siti-modal-body {
  padding: 40px 44px 36px;
  overflow-y: auto;
}
.siti-modal-body h3 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 14px;
  color: var(--ink);
}
.siti-modal-body h3 em {
  font-style: italic;
  color: var(--accent);
}
.siti-modal-body .lead {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--ink-mute);
  margin: 0 0 28px;
}
.siti-modal-body h4 {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 12px;
  font-weight: 500;
}
.siti-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.siti-list li {
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--ink);
  padding: 8px 0 8px 22px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
.siti-list li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: 6px;
  color: var(--accent);
  font-weight: 700;
  font-size: 18px;
}
.siti-list li:last-child {
  border-bottom: none;
}
.siti-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}
.siti-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(29,76,255,0.25);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(29,76,255,0.04);
}

@media (max-width: 768px) {
  .siti-modal {
    padding: 0;
  }
  .siti-modal-panel {
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }
  .siti-modal-img {
    aspect-ratio: 1400 / 875;
    max-height: 230px;
  }
  .siti-modal-body {
    padding: 32px 24px 28px;
  }
  .siti-modal-body h3 {
    font-size: 30px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .siti-panel,
  .siti-bg,
  .siti-collapsed,
  .siti-expanded,
  .siti-modal,
  .siti-modal-panel {
    transition: opacity 0.15s linear !important;
  }
  .siti-panel:hover .siti-bg,
  .siti-panel.is-open .siti-bg {
    transform: none;
  }
  .siti-modal[data-anim="opening"] .siti-modal-panel {
    transform: none;
  }
}

/* ─── Timeline "Come lavoriamo" — metodo verticale ─── */
.metodo-timeline {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  position: relative;
}
.metodo-timeline::before {
  content: '';
  position: absolute;
  left: 25px;
  top: 36px;
  bottom: 36px;
  width: 1px;
  background: linear-gradient(to bottom, var(--accent) 0%, rgba(29, 76, 255, 0.25) 100%);
}
.metodo-step {
  position: relative;
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 20px;
  padding: 24px 0;
  align-items: start;
}
.metodo-step:not(:last-child) {
  border-bottom: 1px dashed rgba(0, 0, 0, 0.06);
}
.metodo-dot {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--bg, #fefdf9);
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  position: relative;
  z-index: 1;
  box-shadow: 0 0 0 6px var(--bg, #fefdf9);
}
.metodo-step.is-active .metodo-dot {
  background: var(--ink, #0f0f10);
  border-color: var(--ink, #0f0f10);
  color: #fff;
}
.metodo-body {
  padding-top: 4px;
}
.metodo-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.metodo-fase {
  color: var(--accent);
  font-weight: 500;
}
.metodo-time {
  color: var(--ink-mute);
}
.metodo-h {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  color: var(--ink);
}
.metodo-h em {
  font-style: italic;
  color: var(--accent);
}
.metodo-desc {
  font-size: 15px;
  color: var(--ink-mute);
  line-height: 1.72;
  margin: 0 0 18px;
  max-width: 62ch;
}
.metodo-checklist {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
  max-width: 60ch;
}
.metodo-checklist li {
  font-size: 13.5px;
  color: var(--ink);
  line-height: 1.45;
  padding-left: 22px;
  position: relative;
}
.metodo-checklist li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.metodo-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.metodo-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid rgba(29, 76, 255, 0.25);
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(29, 76, 255, 0.04);
}
.metodo-tags span.metodo-tag-time {
  color: var(--ink-mute);
  border-color: rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.02);
}

/* Mobile: dot più piccolo, checklist single column */
@media (max-width: 768px) {
  .metodo-timeline::before {
    left: 21px;
  }
  .metodo-timeline::after {
    left: 21px;
  }
  .metodo-step {
    grid-template-columns: 56px 1fr;
    gap: 14px;
    padding: 20px 0;
  }
  .metodo-dot {
    width: 42px;
    height: 42px;
    font-size: 12px;
  }
  .metodo-h {
    font-size: 23px;
  }
  .metodo-checklist {
    grid-template-columns: 1fr;
  }
}

/* ─── Timeline metodo: state machine dot a 3 fasi (animation v2) ─── */
.metodo-dot {
  transition: background .35s, border-color .35s, color .35s, box-shadow .35s;
}
.metodo-step.is-passed .metodo-dot {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 6px var(--bg, #fefdf9), 0 0 0 7px rgba(29,76,255,.2);
}

/* Linea attiva sopra la base sfumata, riempita da JS via --draw-progress (0..100) */
.metodo-timeline::after {
  content: '';
  position: absolute;
  left: 25px;                                /* stesso x del ::before */
  top: 36px;
  width: 1px;
  height: calc(var(--draw-progress, 0) * 1%);
  max-height: calc(100% - 72px);
  background: var(--accent);
  box-shadow: 0 -2px 12px var(--accent);
  transition: none;
}

/* Em underline-draw: stato finale visibile per default; nascosto solo se JS attiva la modalità */
.metodo-h em { position: relative; display: inline-block; }
.metodo-h em::after {
  content: '';
  position: absolute; left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: var(--accent);
  transform: scaleX(1); transform-origin: left center;
  transition: transform .7s cubic-bezier(.25,1,.5,1) .15s;
}
.metodo-timeline.is-animating .metodo-h em::after { transform: scaleX(0); }
.metodo-timeline.is-animating .metodo-step.is-in-view .metodo-h em::after { transform: scaleX(1); }

/* Tag pop: stesso pattern opt-in */
.metodo-tags span {
  transition: transform .55s cubic-bezier(.34,1.56,.64,1), opacity .4s;
  transition-delay: calc(.35s + var(--ti, 0) * 70ms);
}
.metodo-timeline.is-animating .metodo-tags span { transform: scale(.85); opacity: 0; }
.metodo-timeline.is-animating .metodo-step.is-in-view .metodo-tags span { transform: scale(1); opacity: 1; }

/* Fallback per utenti con prefers-reduced-motion: reduce */
@media (prefers-reduced-motion: reduce) {
  .metodo-timeline::after { display: none; }
  .metodo-timeline::before { background: var(--accent); opacity: .4; }
  .metodo-dot { transition: none; }
  .metodo-tags span,
  .metodo-h em::after { transform: none; opacity: 1; transition: none; }
  .metodo-step:first-child .metodo-dot {
    background: var(--ink); border-color: var(--ink); color: #fff;
  }
}

/* Flicker suppression: applied by JS during initMetodoTimeline() opt-in, removed after 2 rAF */
.metodo-timeline.no-transition .metodo-tags span,
.metodo-timeline.no-transition .metodo-h em::after {
  transition: none !important;
}

/* ============================================================
   SCENA C — Servizi accademici immersivi (home redesign 2026-05-27)
   ============================================================ */
.servizi-scene { position: relative; }
.scena-c { height: auto; position: relative; }
/* ===== Layout "feature with image" (badge + titolo + descrizione + foto 16:9)
   adattato in vanilla dal componente shadcn; mantiene lo scroll-stop (height 100vh + pin). ===== */
.scena-c-pin {
  height: auto;
  display: grid;
  align-items: center;
  gap: 48px;
  padding: 32px 48px;
  max-width: var(--max);
  margin: 0 auto;
}
/* Foto ~15% piu' larga della colonna testo (1.35 : 1) */
.scena-c--left  .scena-c-pin { grid-template-columns: 1fr 1fr; }
.scena-c--right .scena-c-pin { grid-template-columns: 1fr 1fr; }
/* Spaziatura uniforme fra le 6 scene accademiche */
.servizi-scene .scena-c:not(:last-child) .scena-c-pin { margin-bottom: 0; }
/* Scena --right: foto a destra, testo a sinistra */
.scena-c--right .scena-c-media { order: 2; }

.scena-c-media {
  aspect-ratio: 16 / 9;               /* aspect-video */
  width: 100%;
  height: auto;
  overflow: hidden;
  border-radius: 8px;                 /* rounded-md */
  /* Placeholder neutro dietro la foto (che parte opacity:0 e si rivela in scroll).
     NON usare --bg-2 azzurro: durante il reveal apparirebbe come un blocco azzurro vistoso. */
  background: #eef1f7;
  /* Profondita': ombra stratificata (vicina netta -> lontana morbida) */
  box-shadow:
    0 1px 2px rgba(11, 20, 48, 0.12),
    0 10px 20px -6px rgba(11, 20, 48, 0.22),
    0 28px 50px -12px rgba(11, 20, 48, 0.30),
    0 50px 90px -28px rgba(11, 20, 48, 0.32);
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), box-shadow .55s cubic-bezier(.2, .8, .2, 1);
  will-change: transform;
}
/* Hover: la foto si stacca dal fondo in 3D (lift + scala + tilt + ombra piu' profonda) */
.scena-c-media:hover {
  transform: perspective(1400px) rotateX(2deg) translateY(-10px) scale(1.025);
  box-shadow:
    0 2px 4px rgba(11, 20, 48, 0.14),
    0 18px 36px -8px rgba(11, 20, 48, 0.26),
    0 46px 84px -16px rgba(11, 20, 48, 0.36),
    0 84px 140px -34px rgba(11, 20, 48, 0.36);
}
.scena-c-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Colonna testo: badge + titolo + descrizione, allineata a sinistra,
   con spazio verso la foto (pl-20 del componente) */
.scena-c-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;                          /* gap-4 */
  text-align: center;
  max-width: none;
  justify-self: stretch;              /* il box testo riempie la colonna, come la foto */
  padding-inline: clamp(8px, 1.5vw, 24px);
}

/* eyebrow → Badge pill (shadcn Badge) */
.scena-c-body .eyebrow {
  display: inline-flex;
  align-items: center;
  align-self: center;
  margin: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.scena-c-body .eyebrow::before { display: none; }   /* via la lineetta dell'eyebrow */

.scena-c-body h2 { margin: 0; text-align: center; line-height: 1.6; }
/* Primo servizio: titolo a 3 righe con la & isolata sulla seconda —
   font ridotto quanto basta a tenere "Orientamento universitario" su una riga. */
.scena-c[data-scena="orientamento"] .scena-c-body h2 { font-size: clamp(32px, 3.2vw, 46px); }
.scena-c-body p.lead { margin: 0; max-width: 30rem; color: var(--ink-mute); text-align: center; line-height: 2.4; }

.scena-c-tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 0; }
.scena-c-tags span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-mute);
}

/* Variante scena Formazione: mini-card 4 corsi inside */
.scena-c-corsi-mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 24px 0;
}
.corso-mini {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.corso-mini .glyph {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--accent);
  display: block;
}
.corso-mini h4 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  margin: 6px 0 2px;
}
.corso-mini p {
  font-size: 13px;
  color: var(--ink-mute);
  margin: 0;
  line-height: 1.45;
}

/* Mobile: no pin, single column */
@media (max-width: 768px) {
  .scena-c { height: auto; }
  .scena-c-pin {
    height: auto;
    grid-template-columns: 1fr;
    padding: 32px 16px;
    gap: 24px;
  }
  .scena-c--left .scena-c-pin,
  .scena-c--right .scena-c-pin { grid-template-columns: 1fr; }
  .scena-c--left .scena-c-body,
  .scena-c--right .scena-c-body { padding: 0; text-align: center; align-items: center; }
  .scena-c--left .scena-c-tags,
  .scena-c--right .scena-c-tags { justify-content: center; }
  .scena-c--right .scena-c-media { order: 0; }   /* foto sopra il testo su mobile */
  .scena-c-media {
    height: auto;
    aspect-ratio: 16/9;
    width: 100%;
    overflow: hidden;
    border-radius: 8px;
  }
  .scena-c-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .scena-c-corsi-mini { grid-template-columns: 1fr; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .scena-c { height: auto; }
  .scena-c-pin { height: auto; }
  .scena-c-media { transition: none; }
  .scena-c-media:hover { transform: none; }
}

/* ============================================================
   GLASS BLOG CARDS — Servizi digitali (home redesign 2026-05-28)
   adattato da glass-blog-card-shadcnui.tsx (vanilla, no React)
   ============================================================ */
.servizi-bento { padding: 96px 0; }
.servizi-bento .section-head { margin-bottom: 48px; }

.glass-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.glass-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  color: inherit;
  text-decoration: none;
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  will-change: transform;
}
.glass-card:hover {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow:
    0 14px 40px -16px color-mix(in srgb, var(--accent) 30%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-2px);
}
.glass-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

/* media ------------------------------------------------- */
.glass-card-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.glass-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.glass-card:hover .glass-card-media img { transform: scale(1.08); }
.glass-card-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10, 23, 56, 0.55) 100%);
  opacity: .9;
  transition: opacity .3s ease;
  pointer-events: none;
}
.glass-card:hover .glass-card-media::after { opacity: .55; }

/* badge tag sopra la media ----------------------------- */
.glass-card-tags {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 6px;
  z-index: 2;
}
.glass-card-tags span {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .04em;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: var(--ink-2);
  border: 1px solid rgba(255, 255, 255, 0.6);
  transition: background-color .25s ease;
}
.glass-card:hover .glass-card-tags span { background: rgba(255, 255, 255, 0.92); }

/* hover overlay con CTA pill --------------------------- */
.glass-card-hover {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 23, 56, 0.18);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 3;
  pointer-events: none;
}
.glass-card:hover .glass-card-hover,
.glass-card:focus-visible .glass-card-hover { opacity: 1; }

.glass-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--accent);
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  box-shadow: 0 8px 24px -6px color-mix(in srgb, var(--accent) 50%, transparent);
  transform: translateY(6px);
  transition: transform .3s ease;
}
.glass-card:hover .glass-card-cta { transform: translateY(0); }
.glass-card-cta svg { width: 14px; height: 14px; }

/* body inferiore --------------------------------------- */
.glass-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
.glass-card-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color .25s ease;
}
.glass-card:hover .glass-card-title { color: var(--accent); }

.glass-card-excerpt {
  font-size: 13px;
  line-height: 1.65;
  color: var(--ink-mute);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.glass-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.glass-card-cat {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.glass-card-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
  background: rgba(255, 255, 255, 0.6);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1;
}
.glass-card-cat-meta {
  display: flex;
  flex-direction: column;
  font-size: 11px;
  line-height: 1.3;
}
.glass-card-cat-meta b {
  font-weight: 500;
  color: var(--ink);
  font-size: 12px;
}
.glass-card-cat-meta span { color: var(--ink-mute); }

.glass-card-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-mute);
  transition: color .25s ease, transform .3s ease;
}
.glass-card:hover .glass-card-more { color: var(--accent); transform: translateX(2px); }
.glass-card-more svg { width: 12px; height: 12px; }

/* tablet ----------------------------------------------- */
@media (max-width: 1024px) {
  .glass-card-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
/* mobile ----------------------------------------------- */
@media (max-width: 640px) {
  .glass-card-grid { grid-template-columns: 1fr; gap: 14px; }
  .glass-card-hover { display: none; }
  .glass-card-media { aspect-ratio: 16/9; }
}

/* Reduced motion --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .glass-card,
  .glass-card-media img,
  .glass-card-cta,
  .glass-card-more,
  .glass-card-media::after { transition: none; }
  .glass-card:hover { transform: none; }
  .glass-card:hover .glass-card-media img { transform: none; }
}

/* ============================================================
   Servizi — card a immagine piena con testo in overlay
   (solo pagina servizi.html, sezioni #accademici e #digitali).
   Pattern derivato da .glass-card ma con testo sovrapposto.
   ============================================================ */
.svc-grid {
  display: grid;
  gap: 20px;
}
.svc-grid--3 { grid-template-columns: repeat(3, 1fr); }
.svc-grid--2 { grid-template-columns: repeat(2, 1fr); }
/* variante flessibile che centra l'ultima riga incompleta (es. digitali: 3 sopra, 2 sotto centrate) */
.svc-grid--center {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}
.svc-grid--center > .svc-card { width: calc((100% - 40px) / 3); }

.svc-card {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 16px;
  overflow: hidden;
  background: #0a1738;
  color: #fff;
  text-decoration: none;
  transition: transform .4s ease, box-shadow .4s ease;
  will-change: transform;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 18px 44px -18px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent);
}
.svc-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}
.svc-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.svc-card:hover img { transform: scale(1.06); }
.svc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top,
    rgba(10, 23, 56, 0.95) 0%,
    rgba(10, 23, 56, 0.74) 32%,
    rgba(10, 23, 56, 0.24) 60%,
    transparent 80%);
  opacity: .9;
  transition: opacity .4s ease;
  pointer-events: none;
}
.svc-card:hover::after { opacity: 1; }

.svc-card-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 20px 20px 18px;
  display: flex;
  flex-direction: column;
}
.svc-card-name {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  margin: 0;
  color: #fff;
}
.svc-card-desc {
  margin: 7px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.82);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.svc-card-more-row {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.svc-card-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
  padding-bottom: 2px;
  transition: border-color .3s ease;
}
.svc-card:hover .svc-card-more { border-color: #fff; }
.svc-card-more .arr {
  display: inline-block;
  transition: transform .3s ease;
}
.svc-card:hover .svc-card-more .arr { transform: translateX(4px); }

@media (max-width: 1024px) {
  .svc-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .svc-grid--center > .svc-card { width: calc((100% - 20px) / 2); }
}
@media (max-width: 640px) {
  .svc-grid--3, .svc-grid--2 { grid-template-columns: 1fr; }
  .svc-grid--center > .svc-card { width: 100%; }
  .svc-card { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-card, .svc-card img, .svc-card::after,
  .svc-card-more, .svc-card-more .arr { transition: none; }
  .svc-card:hover { transform: none; }
  .svc-card:hover img { transform: none; }
}

/* ============================================================
   CONTATTI CTA — versione semplificata (home redesign 2026-05-27)
   ============================================================ */
.contatti-cta-section { padding: 120px 0; }
.contatti-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.contatti-cta-text { max-width: 48ch; }
.contatti-cta-text .eyebrow { display: block; margin-bottom: 12px; }
.contatti-cta-text h2 { margin: 0 0 18px; }
.contatti-cta-text p.lead { margin: 0 0 28px; }

.contatti-cta-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.contatti-cta-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto auto;
  column-gap: 20px;
  row-gap: 2px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.contatti-cta-card:hover {
  border-color: var(--accent);
  transform: translateX(4px);
}
.contatti-cta-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.contatti-cta-card .contatti-cta-glyph {
  grid-row: 1 / 4;
  font-family: var(--font-display);
  font-size: 32px;
  color: var(--accent);
  align-self: center;
}
.contatti-cta-card .contatti-cta-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.contatti-cta-card .contatti-cta-value {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  font-weight: 500;
}
.contatti-cta-card .contatti-cta-meta {
  font-size: 12px;
  color: var(--ink-mute);
}

@media (max-width: 768px) {
  .contatti-cta-section { padding: 64px 0; }
  .contatti-cta-grid { grid-template-columns: 1fr; gap: 32px; }
}

/* ============================================================
   TESTIMONIANZE — carosello a swipe (mobile / fallback) +
   3 colonne scorrevoli (desktop, costruite da site.js)
   ============================================================ */
.testimonials {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.t-stage { margin-top: 4px; }

/* --- Card (condivisa fra carosello e colonne) --- */
.t-card {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 28px 28px 26px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-lg);
}
.t-card blockquote {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: -0.003em;
}
.t-card blockquote::before {
  content: "\201C";
  display: block;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 44px;
  line-height: 0.3;
  height: 18px;
  color: var(--accent);
  opacity: 0.42;
}
.t-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
}
.t-mono {
  flex: 0 0 auto;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line-2);
  border-radius: 11px;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--accent);
  background: var(--bg-3);
}
.t-id { display: flex; flex-direction: column; line-height: 1.32; min-width: 0; }
.t-id b { font-weight: 600; color: var(--ink); font-size: 15px; }
.t-id span { font-size: 13px; color: var(--ink-mute); }

/* --- Carosello orizzontale (default: mobile + fallback no-JS) --- */
.t-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 6px var(--gutter) 4px;
  scrollbar-width: none;
}
.t-track::-webkit-scrollbar { display: none; }
.t-track .t-card {
  flex: 0 0 84%;
  max-width: 360px;
  scroll-snap-align: center;
}
.t-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 22px;
}
.t-dot {
  width: 7px; height: 7px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--line-2);
  transition: transform .25s ease, background .25s ease;
}
.t-dot.is-active { background: var(--accent); transform: scale(1.4); }

/* --- 3 colonne scorrevoli (desktop) --- */
@media (min-width: 901px) {
  /* quando site.js ha costruito le colonne, nascondi il carosello */
  .t-stage[data-mode="columns"] .t-track,
  .t-stage[data-mode="columns"] .t-dots { display: none; }

  .t-columns {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--gutter);
    height: 600px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 13%, #000 87%, transparent 100%);
  }
  .t-col { overflow: hidden; }
  .t-col-inner {
    display: flex;
    flex-direction: column;
    gap: 24px;
    animation: t-rise var(--dur, 38s) linear infinite;
    will-change: transform;
  }
  .t-columns:hover .t-col-inner { animation-play-state: paused; }
  .t-columns .t-card { width: 100%; max-width: none; }
}

@keyframes t-rise {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .t-track { scroll-behavior: auto; }
}

/* ===== Banner evento (hero homepage) ===== */
#hero .evt-banner{
  position:absolute; top:160px; right:64px; z-index:4;
  display:inline-flex; align-items:center; gap:12px; max-width:min(78vw,680px);
  padding:13px 22px; border-radius:999px;
  background:rgba(4,18,32,.52); border:1px solid rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  color:#fff; font-family:var(--font-body); font-size:17px; line-height:1; white-space:nowrap;
  box-shadow:0 12px 34px rgba(0,0,0,.36); text-decoration:none;
  opacity:0; transform:translateX(30px) scale(.96);
  transition:opacity .55s ease, transform .6s cubic-bezier(0.34,1.56,0.64,1),
             background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
#hero .evt-banner.is-in{ opacity:1; transform:none; }
#hero .evt-banner[hidden]{ display:none; }
/* effetti al tocco / hover */
.evt-go{ transition: transform .2s ease; }
@media (hover:hover){
  #hero .evt-banner.is-in:hover{
    transform: translateY(-3px) scale(1.025);
    background-color: rgba(4,18,32,.64); border-color: rgba(255,255,255,.42);
    box-shadow: 0 16px 42px rgba(0,0,0,.44);
  }
  #hero .evt-banner.is-in:hover .evt-go{ transform: translateX(3px); }
  #hero .evt-banner.is-in:hover .evt-dot{ box-shadow: 0 0 16px var(--evt-c,#6ee0ff); }
}
#hero .evt-banner.is-in:active{ transform: scale(.985) translateY(-1px); transition-duration:.08s; }
/* mini-dettaglio a tendina (hover/focus) */
.evt-detail{ position:absolute; top:100%; left:50%; padding-top:11px; width:75%; min-width:240px; max-width:none;
  opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-8px); pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s; z-index:5; }
.evt-detail-card{ background:rgba(4,18,32,.86); border:1px solid rgba(255,255,255,.20); border-radius:16px;
  padding:18px 22px; -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  box-shadow:0 20px 50px rgba(0,0,0,.52); text-align:left; white-space:normal; }
.evt-detail-kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--evt-c,#6ee0ff); margin-bottom:6px; }
.evt-detail-title{ font-family:var(--font-display); font-size:20px; line-height:1.2; color:#fff; font-weight:500; }
.evt-detail-sub{ display:block; font-size:14px; color:rgba(255,255,255,.7); font-style:italic; margin-top:3px; }
.evt-detail-desc{ margin:10px 0 0; font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); }
.evt-detail-grid{ display:grid; grid-template-columns:auto 1fr; gap:9px 22px; margin:14px 0 0; }
.evt-detail-grid dt{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.5); align-self:center; }
.evt-detail-grid dd{ margin:0; font-size:14.5px; color:#fff; }
.evt-detail-foot{ margin-top:15px; padding-top:12px; border-top:1px solid rgba(255,255,255,.14); font-size:13px; font-weight:600; color:rgba(255,255,255,.9); }
@media (hover:hover){
  #hero .evt-banner.is-in:hover .evt-detail,
  #hero .evt-banner.is-in:focus-within .evt-detail{ opacity:1; visibility:visible; transform:translateX(-50%); pointer-events:auto; }
}
.evt-dot{ width:9px; height:9px; border-radius:50%; background:var(--evt-c,#6ee0ff); box-shadow:0 0 10px var(--evt-c,#6ee0ff); flex:none; }
.evt-type{ font-family:var(--font-mono); font-size:12px; letter-spacing:.13em; text-transform:uppercase; }
.evt-name{ font-weight:600; overflow:hidden; text-overflow:ellipsis; }
.evt-sep{ opacity:.4; }
.evt-when{ color:rgba(255,255,255,.74); }
.evt-when-short{ display:none; }
.evt-go{ color:rgba(255,255,255,.9); font-weight:600; margin-left:2px; }
.evt-close{ margin-left:6px; background:transparent; border:0; color:rgba(255,255,255,.6); font-size:21px; line-height:1; cursor:pointer; padding:0 2px; }
.evt-close:hover{ color:#fff; }
@media (max-width:600px){
  #hero .evt-banner{ top:120px; right:18px; max-width:84vw; font-size:14.5px; padding:11px 15px; }
  .evt-name, .evt-sep, .evt-when-full, .evt-go-word{ display:none; }
  .evt-when-short{ display:inline; }
}
@media (prefers-reduced-motion: reduce){
  #hero .evt-banner{ opacity:1; transform:none; transition:background-color .2s ease, border-color .2s ease, box-shadow .2s ease; }
  #hero .evt-banner.is-in:hover, #hero .evt-banner.is-in:active{ transform:none; }
  #hero .evt-banner.is-in:hover .evt-go{ transform:none; }
  #hero .evt-banner .evt-detail{ transform:translateX(-50%); }
}

/* ===== Pagina eventi dinamica ===== */
.eventi-loading, .eventi-empty{ font-family:var(--font-body); color:var(--ink-mute); padding:32px 0; font-size:16px; }
.eventi-empty a{ color:var(--accent); }
.eventi-group{ padding:0; border:0; }
.eventi-group + .eventi-group{ margin-top:8px; }
a.evento{ text-decoration:none; color:inherit; }
.evento-kicker{ color:var(--ink-mute); }
.evt-chip{ background:transparent; color:var(--ink); border:1px solid var(--line); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease; }
.evt-chip:hover{ border-color:var(--line-2); }
.evt-chip.is-active{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
@media (max-width:600px){
  .evento{ grid-template-columns:46px 1fr; gap:8px 16px; padding:18px; }
  .evento:hover{ transform:none; }
  .evento-cta{ grid-column:1 / -1; justify-self:start; margin-top:2px; }
  .evento-date .day{ font-size:30px; }
  .evento-title{ font-size:19px; }
  .cf-steps{ grid-template-columns:1fr !important; }
}

/* Shop RIATTIVATO 2026-07-25 (giro correttivo T-157): rimosso il blocco
   «SHOP TEMPORANEAMENTE DISABILITATO» che nascondeva voce nav + footer +
   sezione home + ogni link a shop.html via display:none !important. */

/* ============================================================
   MOBILE PICCOLO — hardening responsive < 640px  (T-082, 2026-07-09)
   Additivo: ogni regola vive sotto un breakpoint, il desktop non cambia.
   Diagnosi dal vivo a 375/390px: overflow-x:clip nascondeva lo scroll ma
   NON il taglio. Le tracce grid `1fr` non si restringono sotto il min-content
   dei figli → contenuto tagliato a destra (colonna form contatti, card/FAQ
   inline delle pagine servizio-*). Qui si riporta tutto dentro il viewport.
   ============================================================ */

/* Telefoni + tablet 7": le griglie INLINE data-stagger (card servizi, feature,
   FAQ) a colonna singola. !important perche' lo stile grid e' inline nell'HTML
   (stessa tecnica gia' usata per .cf-steps). */
@media (max-width: 600px) {
  [data-stagger][style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* Contatti — il vero "inguardabile": a 375px il form e il blocco-info erano
     larghi 538px (colonna destra dei campi fuori schermo). minmax(0,1fr) cappa
     la traccia al container (una 1fr nuda si allarga al min-content dei figli);
     campi affiancati e righe etichetta/valore impilati per stare col pollice. */
  .contatti-row       { grid-template-columns: minmax(0, 1fr); }
  .field-row          { grid-template-columns: 1fr; }
  .contatti-list .row { grid-template-columns: 1fr; gap: 6px; }
  .contatti-info      { padding-right: 0; }
  /* griglia inline "Cerchi un docente specifico?" (2 col, senza classe): le
     email lunghe sfondavano la colonna stretta → una colonna sola. */
  .contatti-info [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }

  /* CTA newsletter: input flex:1 senza min-width:0 non si restringeva e
     spingeva il bottone "Iscrivimi" fuori dalla pill. */
  .newsletter-form input { min-width: 0; }
}

/* Telefoni piccoli (iPhone SE / 375-390): densita' e respiro col pollice. */
@media (max-width: 480px) {
  .servizio        { min-height: auto; padding: 24px 20px 22px; }
  .servizio-desc   { font-size: 16px; }
  .page-hero       { padding-top: 112px; }
  .page-hero .lead { font-size: 19px; margin-top: 24px; }
}