:root {
  /* PALETTE PRINCIPALE */
  --bg-page: #05060a;
  --bg-grad-main: radial-gradient(circle at top, #1a2034 0, #05060a 55%, #020309 100%);
  --bg-grad-soft: radial-gradient(circle at top, #20263b 0, #05060b 65%);

  --surface-light: #f7f8fd;
  --surface-light-soft: #e5e9f7;

  --text-main: #f7f8fc;       /* testo sullo sfondo scuro */
  --text-muted: #9ca3b7;
  --text-dark: #111827;       /* testo su card chiare */
  --text-dark-muted: #6b7280;

  --border-subtle: rgba(148, 163, 184, 0.5);

  --accent-petrol: #0d4c4a;
  --accent-aqua: #19dad5;
  --accent-silver: #d4d9e7;
  --accent-silver-deep: #7f8597;

  --radius-lg: 20px;
  --radius-md: 12px;
  --radius-pill: 999px;

  --shadow-soft: 0 24px 60px rgba(0, 0, 0, 0.8);

  --container-width: 1100px;
  --transition-fast: 0.18s ease-out;
  --transition-med: 0.3s ease-out;

  --font-main: system-ui, -apple-system, "Inter", "SF Pro Text", sans-serif;
}

/* RESET BASE */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  background: var(--bg-grad-main);
  color: var(--text-main);
  scroll-behavior: smooth;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

/* LAYOUT GENERALE */

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 1.5rem;
}

.section {
  padding: 4.5rem 0;
}

.section-light {
  background: var(--bg-grad-main);
}

.section-soft {
  background: var(--bg-grad-soft);
}

.section-header {
  margin-bottom: 2.7rem;
}

.section-header.center {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 2.7rem;
}

.section-subtitle {
  margin-top: 0.6rem;
  color: var(--text-muted);
}

/* ================= HEADER ================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(5, 7, 16, 0.95);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(148, 163, 184, 0.4);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

/* LOGO IMMAGINE SENZA CERCHIO */
.logo-image-wrapper {
  width: 70px;   /* logo più grande */
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-image {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Nel caso ci fosse ancora il vecchio cerchio, lo nascondiamo */
.logo-mark-wrapper,
.logo-mark-fallback {
  display: none !important;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  margin-left: 0.7rem;
}

.logo-text {
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.logo-sub {
  font-size: 0.75rem;
  color: var(--accent-silver);
}

.main-nav ul {
  list-style: none;
  display: flex;
  gap: 1.4rem;
  align-items: center;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-size: 0.88rem;
  color: var(--text-muted);
  transition: color var(--transition-fast);
}

.main-nav a:hover,
.main-nav a.active {
  color: var(--accent-aqua);
}

.btn-nav {
  padding: 0.4rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(25, 218, 213, 0.6);
  background: linear-gradient(135deg, var(--accent-petrol), var(--accent-aqua));
  color: #021013 !important;
  font-size: 0.8rem;
  font-weight: 600;
  box-shadow: 0 14px 34px rgba(25, 218, 213, 0.6);
}

/* BURGER */

.burger {
  display: none;
  flex-direction: column;
  gap: 0.2rem;
  background: none;
  border: none;
  cursor: pointer;
}

.burger span {
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: #e5e7eb;
}

/* =============== HERO =============== */

.hero {
  padding: 4.2rem 0 3.5rem;
  background: radial-gradient(circle at top, #252c40 0, #05060a 60%);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.7rem;
  align-items: center;
}

.hero-text {
  max-width: 580px;
}

.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  color: var(--accent-aqua);
  margin-bottom: 0.5rem;
}

.hero h1 {
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  line-height: 1.15;
  margin-bottom: 0.8rem;
}

.hero-subtitle {
  color: var(--text-muted);
  max-width: 520px;
  margin-bottom: 1.6rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}

.hero-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.hero-tags span {
  font-size: 0.78rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: rgba(255, 255, 255, 0.04);
  color: var(--accent-silver);
}

/* HERO MEDIA */

.hero-media {
  position: relative;
}

.hero-photo {
  border-radius: 22px;
  min-height: 260px;
  background: radial-gradient(circle at top, #28344a, #05060a);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow:
    0 0 28px rgba(255, 255, 255, 0.06),
    0 24px 60px rgba(0, 0, 0, 0.95);
}

.hero-note {
  position: absolute;
  bottom: -14px;
  left: 8%;
  padding: 0.9rem 1.1rem;
  background: linear-gradient(135deg, var(--surface-light-soft), #cfd4e8);
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow:
    0 16px 30px rgba(15, 23, 42, 0.6),
    0 0 24px rgba(255, 255, 255, 0.55);
  max-width: 270px;
color: #111827;
}

.hero-note-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: #111827;
  margin-bottom: 0.25rem;
}

.hero-note-body {
  font-size: 0.82rem;
  color: #4b5563;
}

/* BUTTONS */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    border-color var(--transition-fast);
}

.btn-primary {
  background: linear-gradient(135deg, var(--accent-petrol), var(--accent-aqua));
  color: #031012;
  box-shadow: 0 16px 36px rgba(25, 218, 213, 0.6);
}

.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 46px rgba(25, 218, 213, 0.8);
}

.btn-outline {
  background: transparent;
  color: var(--accent-silver);
  border-color: rgba(148, 163, 184, 0.8);
}

.btn-outline:hover {
  background: rgba(148, 163, 184, 0.18);
}

.btn-full {
  width: 100%;
}

/* ================= TIMELINE / STORYLINE ================= */

.timeline {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

/* Linea centrale */

.timeline-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  pointer-events: none;
}

.timeline-line-base {
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 0;
  right: 0;
  background: linear-gradient(
    to bottom,
    rgba(148, 163, 184, 0.8),
    rgba(148, 163, 184, 0.25)
  );
}

.timeline-line-active {
  position: absolute;
  top: 8%;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to bottom, var(--accent-aqua), var(--accent-petrol));
  box-shadow: 0 0 32px rgba(25, 218, 213, 0.9);
  transition: height 0.3s ease-out;
}

/* Blocchi */

.timeline-steps {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 7rem;              /* molto distanziati */
  max-width: 780px;
  margin: 0 auto;
  padding: 4rem 0 3.5rem;
}

.timeline-step {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.7rem 1.8rem;
  border-radius: 22px;
@keyframes cardLift {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-4px);
  }
}

/* hai già .timeline-step.is-active con transform: translateY(0); ecc. */
.timeline-step.is-active {
  /* tieni TUTTO quello che c’è già e aggiungi: */
  animation: cardLift 1.2s ease-in-out infinite alternate;
}

  /* CARD CHIARA */
  background: linear-gradient(150deg, #ffffff, #d1d6e7);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.4),
    0 0 18px rgba(255, 255, 255, 0.45);

  opacity: 0.3;
  transform: translateY(36px);
  transition: opacity var(--transition-med), transform var(--transition-med),
    border-color var(--transition-med), box-shadow var(--transition-med),
    background var(--transition-med);
  color: var(--text-dark);             /* TESTO SCURO */
}

.timeline-step.is-active {
  opacity: 1;
  transform: translateY(0);
  border-color: rgba(25, 218, 213, 0.9);
  background: linear-gradient(160deg, #ffffff, #e2e7f7 40%, #c3d4e8 100%);
  box-shadow:
    0 22px 48px rgba(15, 23, 42, 0.5),
    0 0 30px rgba(25, 218, 213, 0.7);
}

.step-badge {
  width: 46px;
  height: 46px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(209, 213, 219, 0.98);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 600;
  color: #111827;
  background: linear-gradient(145deg, #ffffff, #c9cfdd);
  box-shadow:
    0 0 22px rgba(255, 255, 255, 0.95),
    0 16px 32px rgba(15, 23, 42, 0.7);
}

.timeline-step.is-active .step-badge {
  border-color: transparent;
  color: #021012;
  background: radial-gradient(circle at top, var(--accent-aqua), var(--accent-petrol));
  box-shadow:
    0 0 30px rgba(25, 218, 213, 0.95),
    0 18px 38px rgba(15, 23, 42, 0.9);
}

.step-content h3 {
  margin: 0 0 0.4rem 0;
  font-size: 1.08rem;
  color: var(--text-dark);
}

.step-content p {
  margin: 0;
  color: var(--text-dark-muted);
  font-size: 0.92rem;
}

.timeline-cta {
  margin-top: 3rem;
  text-align: center;
}

/* ================= PROGRAMMI ================= */

.plans {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
}

.plan-card {
  background: linear-gradient(150deg, #ffffff, #d6dbea);
  border-radius: 20px;
  padding: 1.9rem 1.7rem;
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.45),
    0 0 18px rgba(255, 255, 255, 0.4);
  color: var(--text-dark);            /* TESTO SCURO QUI */
}

.plan-card h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
}

.plan-tag {
  color: var(--text-dark-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.plan-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  color: var(--text-dark-muted);
}

.plan-list li {
  margin-bottom: 0.35rem;
}

.plan-list li::before {
  content: "• ";
  color: var(--accent-petrol);
}

.plan-note {
  font-size: 0.86rem;
  color: var(--text-dark-muted);
  margin-bottom: 1.3rem;
}

.plan-btn {
  width: 100%;
  justify-content: center;
}

.plan-card-premium {
  border-color: rgba(25, 218, 213, 0.9);
  box-shadow:
    0 22px 52px rgba(15, 23, 42, 0.6),
    0 0 26px rgba(25, 218, 213, 0.8);
  position: relative;
}

.plan-ribbon {
  position: absolute;
  top: 1.2rem;
  right: 1.4rem;
  padding: 0.22rem 0.8rem;
  border-radius: 999px;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: linear-gradient(135deg, var(--accent-petrol), var(--accent-aqua));
  color: #021014;
}
/* ==========================================================
   TABELLA COMPARATIVA VERSIONE PREMIUM (CARDS)
   ========================================================== */

.comparison-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 2.5rem;
}

.comparison-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border-radius: 22px;
  padding: 1.8rem;
  box-shadow: 0 0 25px rgba(148, 163, 184, 0.25);
  border: 1px solid rgba(148, 163, 184, 0.35);
  transition: transform .3s, box-shadow .3s;
}

.comparison-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 35px rgba(148, 163, 184, 0.35);
}

.comparison-card h3 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.comparison-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.comparison-card ul li {
  margin: 0.55rem 0;
  color: var(--text-dark-muted);
  line-height: 1.45;
}

.comparison-card ul li.price {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--text-dark);
}

/* ===== HIGHLIGHT: La tua colonna ===== */

.comparison-card.highlight {
  background: linear-gradient(135deg, #d6f8ff, #ffffff);
  border: 2px solid rgba(25, 218, 213, 0.65);
  box-shadow: 0 0 40px rgba(25, 218, 213, 0.35);
  transform: scale(1.04);
  position: relative;
}

.comparison-card.highlight:hover {
  transform: scale(1.06);
  box-shadow: 0 0 50px rgba(25, 218, 213, 0.45);
}

.best-badge {
  position: absolute;
  top: -12px;
  right: 16px;
  background: linear-gradient(135deg, #19dad5, #0fb5b0);
  color: white;
  padding: 6px 12px;
  border-radius: 14px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(25, 218, 213, 0.5);
}

.highlight-price {
  color: #0f8f8b;
  font-size: 1rem;
}

/* Responsive */
@media (max-width: 600px) {
  .comparison-card.highlight {
    transform: scale(1.02);
  }
}

/* ===== TABELLA DI CONFRONTO – MOBILE ===== */
.comparison-table-mobile {
  display: none; /* di default nascosta (desktop) */
}

@media (max-width: 900px) {
  /* Nascondo le card su mobile */
  .comparison-grid {
    display: none;
  }

  .comparison-table-mobile {
    display: block;
    margin-top: 2rem;
    overflow-x: auto; /* se lo schermo è stretto, scroll orizzontale */
  }

  .comparison-table-mobile table {
    width: 100%;
    border-collapse: collapse;
    min-width: 620px; /* così le 3 colonne hanno respiro e puoi scrollare */
    font-size: 0.9rem;
  }

  .comparison-table-mobile th,
  .comparison-table-mobile td {
    padding: 0.55rem 0.4rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.4);
    text-align: left;
    vertical-align: top;
  }

  .comparison-table-mobile thead th {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.85;
    white-space: nowrap;
  }

  .comparison-table-mobile tbody th {
    font-weight: 600;
    white-space: nowrap;
  }

  .comparison-table-mobile .col-highlight {
    background: linear-gradient(135deg, #d6f8ff, #ffffff);
    border-left: 2px solid rgba(25, 218, 213, 0.65);
  }

  .comparison-table-mobile .row-price td {
    font-weight: 600;
  }
}
/* ===== TABELLA DI CONFRONTO – MOBILE ===== */

.comparison-table-mobile {
  margin-top: 2rem;
}

/* Desktop: nascondo la tabella, mostro le card */
@media (min-width: 901px) {
  .comparison-table-mobile {
    display: none;
  }
}

/* Mobile: nascondo le card, mostro la tabella */
/* ===== VALORE – TABELLA MOBILE (CHIARA, 2 COLONNE) ===== */

.comparison-table-mobile {
  display: none;
}

/* Desktop: solo card */
@media (min-width: 901px) {
  .comparison-table-mobile {
    display: none;
  }
}

/* Mobile: tabella al posto delle card */
@media (max-width: 900px) {

  .comparison-grid {
    display: none;
  }

  .comparison-table-mobile {
    display: block;
    margin-top: 1.6rem;
  }

  .comparison-table-card {
    background: #f8fafc; /* chiaro, non più dark */
    border-radius: 18px;
    padding: 1.1rem 0.9rem;
    border: 1px solid rgba(148, 163, 184, 0.55);
  }

  .comparison-table-card table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
  }

  .comparison-table-card thead th {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0 0.3rem 0.6rem;
    opacity: 0.85;
    text-align: left;
    white-space: nowrap;
    color: #475569;
  }

  .comparison-table-card thead th.th-me {
    color: #0f172a;
    background: #4ef2cf;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    text-align: center;
  }

  .comparison-table-card tbody th {
    font-weight: 600;
    padding: 0.55rem 0.35rem 0.55rem 0;
    vertical-align: top;
    width: 26%;
    color: #0f172a;
    font-size: 0.8rem;
  }

  .comparison-table-card tbody td {
    padding: 0.55rem 0.35rem;
    vertical-align: top;
    color: #334155;
  }

  .comparison-table-card tbody tr {
    border-bottom: 1px solid rgba(148, 163, 184, 0.6);
  }

  .comparison-table-card tbody tr:last-child {
    border-bottom: none;
  }

  /* colonna "Percorso con me" in evidenza */
  .comparison-table-card tbody td:nth-child(3) {
    background: linear-gradient(
      135deg,
      rgba(34, 197, 179, 0.12),
      rgba(59, 130, 246, 0.06)
    );
    border-radius: 10px;
  }

  .comparison-table-card .row-price td {
    font-weight: 600;
  }

  .comparison-table-card .row-price .col-me {
    background: linear-gradient(135deg, #4ef2cf, #22c1c3);
    color: #020617;
    border-radius: 999px;
    text-align: center;
    padding: 0.55rem 0.4rem;
  }
}
/* --- MOBILE: usa SOLO la nuova tabella --- */
@media (max-width: 900px) {

  /* Nasconde completamente la tabella desktop */
  .comparison-table {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  /* Mostra la versione mobile */
  .comparison-table-mobile {
    display: block !important;
  }
}

/* FIX MOBILE: niente scroll orizzontale, testo sempre dentro al box */
@media (max-width: 900px) {

  /* la tabella deve stare dentro al contenitore */
  .comparison-table-card {
    overflow: hidden;
  }

  .comparison-table-card table {
    width: 100%;
    table-layout: fixed;      /* colonne “forzate” a stare dentro */
  }

  /* permettiamo alle scritte di andare a capo */
  .comparison-table-card thead th,
  .comparison-table-card tbody th,
  .comparison-table-card tbody td {
    white-space: normal;      /* sovrascrive il nowrap di prima */
    word-break: break-word;   /* se una parola è lunga, va a capo */
  }
}
/* MOBILE — riduci distanza tra prima e seconda colonna */
@media (max-width: 900px) {

  /* stringi la larghezza della prima colonna */
  .comparison-table-card table tbody th {
    width: 110px;      /* puoi scendere anche a 95–100 */
    min-width: 110px;
    padding-right: 0.7rem;  /* meno spazio fra le colonne */
  }

  /* riduci padding cella seconda colonna */
  .comparison-table-card table tbody td {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }

  /* anche l’intestazione si stringe */
  .comparison-table-card thead th:first-child {
    width: 110px;
    min-width: 110px;
  }
}
/* ==== MOBILE: SCROLL ORIZZONTALE COMPLETO PER LA TABELLA === */
@media (max-width: 900px) {

  /* Contenitore scrollabile */
  .comparison-table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #00c2b3 transparent;
  }

  /* Tabella molto larga così non si tronca */
  .comparison-table-card table {
    width: 900px !important; /* assicura tutto lo spazio per scrollare */
    min-width: 900px !important;
    border-collapse: collapse;
  }

  /* Riduci distanza tra prima e seconda colonna */
  .comparison-table-card table tbody th,
  .comparison-table-card table thead th:first-child {
    width: 110px !important;
    min-width: 110px !important;
    padding-right: 0.6rem !important;
  }

  /* Celle della colonna "Percorso con me" */
  .comparison-table-card table tbody td {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
}
/* ==== MOBILE: SCROLL ORIZZONTALE COMPLETO + TABELLAA PIÙ STRETTA === */
@media (max-width: 900px) {

  .comparison-table-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: #00c2b3 transparent;
  }

  /* Tabella più stretta = scroll più corto */
  .comparison-table-card table {
    width: 780px !important;     /* ↓ era 900px */
    min-width: 780px !important;
    border-collapse: collapse;
  }

  /* Colonna 1 ancora più stretta */
  .comparison-table-card table tbody th,
  .comparison-table-card table thead th:first-child {
    width: 90px !important;      /* ↓ era 110px */
    min-width: 90px !important;
    padding-right: 0.45rem !important;
  }

  /* Celle colonna 2 più compatte */
  .comparison-table-card table tbody td {
    padding-left: 0.45rem !important;
    padding-right: 0.45rem !important;
  }
}
/* Contenitore scrollabile */

@media (max-width: 900px) {

  .comparison-table-card {
    position: relative;
  }



  /* FRECCIA SUPER VISIBILE */
  .scroll-hint {
    position: absolute;
    right: 30px;
    top: 30px;
    transform: translateY(-50%);
    
    font-size: 2.6rem;   /* più grande */
    font-weight: 800;
    color: #00e2cf;
    text-shadow: 0px 0px 16px rgba(0, 226, 207, 0.85);

    z-index: 5 !important; /* SOPRA TUTTO */
    animation: hintMove 1.4s infinite ease-in-out;
  }

  @keyframes hintMove {
    0% {
      opacity: 0.4;
      transform: translate(0, -50%);
    }
    50% {
      opacity: 1;
      transform: translate(12px, -50%) scale(1.1);
    }
    100% {
      opacity: 0.4;
      transform: translate(0, -50%);
    }
  }
}

/* ================= CONTATTI / CONSULENZA ================= */

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 1.8rem;
  align-items: flex-start;
}

/* cornice gradient per CONSULENZA */
#consulenza {
  position: relative;
  border-radius: 24px;
  padding: 0.18rem;
  background: linear-gradient(135deg, var(--accent-petrol), var(--accent-aqua));
  box-shadow:
    0 0 28px rgba(25, 218, 213, 0.7),
    0 22px 54px rgba(0, 0, 0, 0.85);
}

#consulenza .contact-main,
#consulenza .contact-side {
  background: linear-gradient(150deg, #fdfefe, #dce2f1);
  border-radius: 22px;
}

/* FORM & CARD CONTATTI */

.contact-main {
  padding: 1.9rem 1.7rem;
  color: var(--text-dark);
}

.contact-form {
  border-radius: 18px;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.form-field {
  margin-bottom: 1rem;
}

label {
  display: block;
  font-size: 0.8rem;
  color: var(--text-dark-muted);
  margin-bottom: 0.3rem;
}

input,
textarea {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.85);
  background: #f9fafb;
  font-family: var(--font-main);
  font-size: 0.9rem;
  color: var(--text-dark);
}

input:focus,
textarea:focus {
  outline: none;
  border-color: var(--accent-petrol);
  box-shadow: 0 0 18px rgba(25, 218, 213, 0.6);
  background: #ffffff;
}

.contact-side {
  border-radius: 22px;
  padding: 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  color: var(--text-dark);
}

.contact-card {
  background: linear-gradient(150deg, #fdfefe, #dde2f2);
  border-radius: 16px;
  padding: 1.3rem 1.2rem;
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow:
    0 16px 36px rgba(15, 23, 42, 0.4),
    0 0 16px rgba(255, 255, 255, 0.35);
}

.contact-card.light {
  background: linear-gradient(150deg, #ffffff, #e5e9f7);
}

.contact-steps {
  margin: 0.6rem 0 0 1.2rem;
  padding: 0;
  color: var(--text-dark-muted);
  font-size: 0.9rem;
}

.small-note {
  margin-top: 0.6rem;
  font-size: 0.78rem;
  color: var(--text-dark-muted);
}

/* ================= FOOTER ================= */

.site-footer {
  border-top: 1px solid rgba(148, 163, 184, 0.4);
  background: radial-gradient(circle at top, #1c2133, #04050a);
  padding: 1.2rem 0;
  font-size: 0.8rem;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-links {
  display: flex;
  gap: 1rem;
}

.footer-links a {
  color: var(--accent-silver-deep);
  font-size: 0.82rem;
}
/* CONSULENZA — immagine più piccola e mobile-friendly */
@media (max-width: 900px) {

  .consulenza-image-wrapper {
    width: 90%;          /* riduce la larghezza totale */
    max-width: 280px;    /* limite fisso per evitare che sia enorme */
    margin: 0 auto 1.2rem;
  }

  .consulenza-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 18px;
    object-fit: cover;
  }
}
/* CONSULENZA — immagine mobile super figa stile Canva */
@media (max-width: 900px) {

  .consulenza-image-wrapper {
    width: 82%;
    max-width: 230px;        /* dimensione PERFETTA per mobile */
    margin: 1.2rem auto 1.4rem;
    
    position: relative;
  }

  /* Glow dietro tipo Canva */
  .consulenza-image-wrapper::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 24px;
    background: radial-gradient(
      circle at center,
      rgba(0, 226, 207, 0.35),
      transparent 70%
    );
    filter: blur(18px);
    z-index: 0;
  }

  /* Foto */
  .consulenza-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 20px;

    /* stile Canva */
    box-shadow:
      0 10px 22px rgba(0,0,0,0.12),
      0 4px 12px rgba(0,0,0,0.08);

    position: relative;
    z-index: 2;
  }
}

/* ================= AREA CLIENTI (PAGINA ACCEDI) ================= */
/* ========== AREA CLIENTI (PAGINA ACCEDI) ========== */

.client-area-section {
  padding: 4.5rem 0 5rem;
}

.client-area-wrapper {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.client-logo-header {
  width: 100%;
  display: flex;
  justify-content: center; /* CENTRA ORIZZONTALMENTE */
  align-items: center;
  margin-bottom: 24px;
}

.client-logo {
  display: block;
  margin: 0 auto;           /* CENTRA */
  max-width: 220px;         /* DIMENSIONE REGOLARE */
  width: 70%;
  height: auto;
}

/* Card scura che richiama lo stile dell'HTML che avevi creato */
.client-card {
  background: rgba(5, 5, 10, 0.96);
  border-radius: 20px;
  border: 1px solid #262633;
  padding: 30px 26px;
  box-shadow: 0 22px 48px rgba(0, 0, 0, 0.85);
}

.client-card h1 {
  font-size: 1.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-align: center;
  margin: 0 0 10px 0;
}

.client-subtitle {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 20px;
}

.client-label {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* Input dedicato per non rompere altri form */
.client-input {
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid #333;
  background: #050505;
  color: #000;
  font-size: 0.95rem;
  margin-bottom: 16px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.client-input::placeholder {
  color: #555;
}

.client-input:focus {
  border-color: var(--accent-aqua);
  box-shadow: 0 0 0 1px var(--accent-aqua);
}

.client-hint {
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-bottom: 18px;
}

.client-hint span {
  color: var(--accent-aqua);
  font-weight: 600;
}

.client-btn {
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.9rem;
}

.client-disclaimer {
  margin-top: 16px;
  font-size: 0.78rem;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}

.client-footer-note {
  margin-top: 14px;
  font-size: 0.78rem;
  color: #6b7280;
  text-align: center;
}
/* =============== FAQ =============== */

.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
  gap: 2.5rem;
  align-items: flex-start;
}

.faq-intro h2 {
  margin-bottom: 0.75rem;
}

.faq-intro .section-subtitle {
  margin-top: 0.4rem;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.faq-item {
  border-radius: 16px;
  background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.24), rgba(15, 23, 42, 0.96));
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.8),
    0 0 18px rgba(15, 23, 42, 0.9);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease;
}

.faq-item.is-open {
  border-color: rgba(25, 218, 213, 0.9);
  box-shadow:
    0 20px 50px rgba(15, 23, 42, 0.95),
    0 0 28px rgba(25, 218, 213, 0.8);
  transform: translateY(-1px);
}

.faq-question {
  width: 100%;
  padding: 0.95rem 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-main);
  font-size: 0.96rem;
  font-weight: 500;
}

.faq-q-text {
  flex: 1;
}

.faq-icon {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: rgba(226, 232, 240, 0.95);
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-icon::before {
  width: 10px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 10px;
}

.faq-item.is-open .faq-icon::after {
  transform: scaleY(0);
  opacity: 0;
}

/* contenuto risposta */
.faq-answer {
  padding: 0 1.1rem 0.95rem;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease-out, opacity 0.2s ease-out;
  opacity: 0;
}

.faq-item.is-open .faq-answer {
  opacity: 1;
}

.faq-answer p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* FAQ mobile */
@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.8rem;
  }
}


/* ================= RESPONSIVE ================= */

@media (max-width: 900px) {
  .hero-inner,
  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-media {
    order: -1;
  }

  .form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  /* menu mobile */
  .burger {
    display: flex;
  }

  .main-nav {
    position: fixed;
    inset: 56px 0 auto 0;
    background: rgba(5, 7, 16, 0.98);
    backdrop-filter: blur(16px);
    transform: translateY(-100%);
    transition: transform 0.25s ease-out;
  }

  .main-nav ul {
    flex-direction: column;
    align-items: flex-start;
    padding: 1.4rem 1.5rem 2rem;
    gap: 1rem;
  }

  .main-nav.open {
    transform: translateY(0);
  }

  .timeline-line {
    left: 18px;
    transform: none;
  }

  .timeline-steps {
    padding-left: 0.8rem;
  }

  .timeline-step {
    grid-template-columns: 54px minmax(0, 1fr);
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 3.6rem;
  }

  .hero h1 {
    font-size: 1.9rem;
  }

  .client-card-legacy {
    padding: 22px 18px;
  }
}
/* LINEA DELLA TIMELINE SEMPRE CENTRALE (DESKTOP + MOBILE) */
.timeline-line,
.timeline-line-active {
  left: 50% !important;
  transform: translateX(-50%) !important;
}
/* FAQ — CARD BIANCHE */
.faq-item {
  background: #ffffff !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  box-shadow:
    0 10px 25px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

.faq-question {
  color: #0f172a !important;
}

.faq-answer {
  color: #1e293b !important;
}

.faq-answer p {
  color: #334155 !important;
}
.faq-icon {
  border-color: rgba(0, 0, 0, 0.25) !important;
}

.faq-icon::before,
.faq-icon::after {
  background: #0f172a !important;
}
.faq-item.is-open {
  border-color: rgba(45, 212, 191, 0.9) !important;
  box-shadow:
    0 0 0 2px rgba(45, 212, 191, 0.6),
    0 10px 30px rgba(0, 0, 0, 0.1) !important;
}
/* FAQ — HALF WHITE STYLE */
.faq-item {
  border-radius: 16px;
  overflow: hidden;
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.25),
    0 4px 10px rgba(0, 0, 0, 0.15);
  transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}

/* Parte alta: domanda — completamente bianca */
.faq-question {
  background: #ffffff !important;
  color: #0f172a !important;
  padding: 1rem 1.2rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icona della FAQ */
.faq-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.25) !important;
  position: relative;
}

.faq-icon::before,
.faq-icon::after {
  content: "";
  position: absolute;
  background: #0f172a !important;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.faq-icon::before {
  width: 12px;
  height: 2px;
}

.faq-icon::after {
  width: 2px;
  height: 12px;
}

/* Rimuove il + verticale quando aperta */
.faq-item.is-open .faq-icon::after {
  transform: scaleY(0);
  opacity: 0;
}

/* Parte bassa: risposta — scura/trasparente */
.faq-answer {
  background: rgba(2, 6, 23, 0.6);
  padding: 0 1.2rem 1rem;
  color: #e2e8f0 !important;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  backdrop-filter: blur(10px);
  transition: max-height 0.25s ease-out, opacity 0.25s ease-out;
}

.faq-item.is-open .faq-answer {
  opacity: 1;
}

.faq-answer p {
  font-size: 0.9rem;
  color: #cbd5e1 !important;
  line-height: 1.65;
}

/* Glow elegante quando aperta */
.faq-item.is-open {
  border-color: rgba(45, 212, 191, 0.85) !important;
  box-shadow:
    0 0 0 2px rgba(45, 212, 191, 0.5),
    0 16px 40px rgba(0, 0, 0, 0.4),
    0 0 22px rgba(45, 212, 191, 0.4);
  transform: translateY(-2px);
}

/* ======== CHI SONO: FOTO HERO SLIDE-IN PULITO ======== */
/* ======== CHI SONO: FOTO HERO SLIDE-IN PULITO ======== */

.page-chi-sono .hero-photo {
  background: transparent;
  border: none;
  box-shadow: none;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.page-chi-sono .hero-photo img {
  display: block;
  width: 100%;
  max-width: 430px; /* regolabile */
  height: auto;
  border-radius: 22px;
  box-shadow: none;
  opacity: 0;

  /* Stato iniziale dell'animazione */
  transform: translateX(80px) scale(0.96);
  filter: blur(10px);

  /* Animazione più slow e cinematografica */
  animation: heroSlideIn 1.2s cubic-bezier(0.19, 1, 0.22, 1) 0.25s forwards;
}

/* MOBILE FIX */
@media (max-width: 768px) {
  .page-chi-sono .hero-photo img {
    max-width: 340px;
  }
}

/* ANIMAZIONE SLIDE-IN */
@keyframes heroSlideIn {
  0% {
    opacity: 0;
    transform: translateX(80px) scale(0.96);
    filter: blur(10px);
  }
  65% {
    opacity: 1;
    transform: translateX(0px) scale(1.04);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateX(0px) scale(1);
    filter: blur(0);
  }
}
/* Rimuove ogni sfondo / layer dietro la foto */
.page-chi-sono .hero-photo,
.page-chi-sono .hero-media {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}
.page-chi-sono .hero-photo::before,
.page-chi-sono .hero-photo::after,
.page-chi-sono .hero-media::before,
.page-chi-sono .hero-media::after {
  content: none !important;
  display: none !important;
}
.page-chi-sono section,
.page-chi-sono .section {
  background: transparent !important;
  box-shadow: none !important;
}
/* ======== GLOW VERDE ACQUA DIETRO LA FOTO ======== */

.page-chi-sono .hero-photo::before {
  content: "";
  position: absolute;
  inset: -40%;       /* grandezza del glow */
  z-index: -1;       /* IMPORTANTISSIMO → sta dietro la foto */
  pointer-events: none;

  background: radial-gradient(
      circle at 50% 60%,
      rgba(45, 212, 191, 0.45),
      rgba(45, 212, 191, 0.15) 40%,
      transparent 70%
    );

  filter: blur(40px);
  opacity: 0;
  transform: scale(0.8);

  animation: glowFadeIn 1.6s ease-out 0.8s forwards;
}
@keyframes glowFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.6);
    filter: blur(50px);
  }
  70% {
    opacity: 1;
    transform: scale(1);
    filter: blur(34px);
  }
  100% {
    opacity: 0.85;
    transform: scale(1.05);
    filter: blur(38px);
  }
}
.page-chi-sono .hero-photo {
  position: relative;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  z-index: 0;
}
/* GLOW VERDE ACQUA DIETRO LA FOTO (OVERRIDE DEFINITIVO) */
.page-chi-sono .hero-photo::before {
  content: "" !important;          /* override del "none" */
  display: block !important;       /* override del "display: none" */

  position: absolute;
  inset: -40%;
  z-index: -1;
  pointer-events: none;

  background: radial-gradient(
      circle at 50% 60%,
      rgba(45, 212, 191, 0.55),
      rgba(45, 212, 191, 0.18) 40%,
      transparent 70%
    );

  filter: blur(40px);
  opacity: 0;
  transform: scale(0.8);

  animation: glowFadeIn 1.6s ease-out 0.8s forwards;
}
/* ============= LEONARDO È DIVERSO ============= */
/* ========== LEONARDO È DIVERSO — CARDS ========== */

/* Colonna destra: lista card, larghezza normale */
.different-right {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* CARD BASE (desktop) */
.different-item {
  position: relative;
  width: 100%;
  padding: 1.4rem 1.3rem 1.35rem;
  border-radius: 18px;
  background:
    radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 1));
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(15, 23, 42, 0.9),
    inset 0 0 0 1px rgba(148, 163, 184, 0.35);
  cursor: default;

  /* stato base leggermente “dietro” */
  transform: translateY(4px) scale(0.98);
  opacity: 0.9;

  transition:
    transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
    opacity 0.45s ease,
    box-shadow 0.45s ease,
    border-color 0.35s ease;
}

/* CARD ATTIVA / HOVER (desktop) */
.different-item.is-active,
.different-item:hover {
  transform: translateY(-6px) scale(1);
  opacity: 1;
  border-color: rgba(34, 211, 238, 0.95);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 32px rgba(34, 211, 238, 0.85),
    inset 0 0 0 1px rgba(226, 232, 240, 0.4);
}

/* Testata card: icona + titolo/tag */
.different-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.7rem;
}

.different-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Icona dinamica tonda */
.different-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 0%, #e0fdfa, #22d3ee 40%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 6px 12px rgba(15, 23, 42, 0.9),
    0 0 18px rgba(34, 211, 238, 0.6);
  position: relative;
  overflow: hidden;
}

/* riflesso “metallo” che gira dentro l’icona */
.different-icon::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    rgba(248, 250, 252, 0.25),
    rgba(34, 211, 238, 0.9),
    rgba(15, 23, 42, 0.95),
    rgba(248, 250, 252, 0.25)
  );
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: iconSpin 6s linear infinite;
}

/* Tag + titolo */
.different-tag {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.96);
  margin: 0;
}

.different-item h3 {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.25;
}

/* Testo descrizione */
.different-item > p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* MOBILE: card più basse, larghezza normale, effetto 3D quando diventano attive */
@media (max-width: 900px) {

  .different-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .different-right {
    perspective: 1200px;
    gap: 1.6rem;
  }

  .different-item {
    min-height: 26vh;        /* 🔥 MOLTO PIÙ BASSE in altezza */
    margin-bottom: 1.6rem;
    padding: 1.2rem 1.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    /* stato base: un po’ dietro e più “piccola” */
    transform:
      translateY(16px)
      scale(0.94)
      rotateX(6deg);
    opacity: 0.65;
  }

  .different-item.is-active {
    transform:
      translateY(0)
      scale(1)
      rotateX(0deg);
    opacity: 1;
  }

  .different-item:last-child {
    margin-bottom: 0;
  }

  .different-item h3 {
    font-size: 1.15rem;
  }
}

/* Animazione icona metal */
@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* ========== LEONARDO È DIVERSO — CARDS STRETTE & 3D METAL ========== */

/* Container colonna destra: centra le card più strette */
.different-right {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
  align-items: center; /* centra le card */
}

/* Card più stretta */
.different-item {
  max-width: 420px;          /* larghezza massima desktop */
  width: 100%;
}

/* Testata card: icona + titolo/tag */
.different-head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 0.6rem;
}

.different-head-text {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

/* Icona dinamica */
.different-icon {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 30% 0%, #e0fdfa, #22d3ee 40%, #0f172a 100%);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 6px 12px rgba(15, 23, 42, 0.9),
    0 0 18px rgba(34, 211, 238, 0.6);
  position: relative;
  overflow: hidden;
}

/* riflesso "metallo" che gira */
.different-icon::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(
    from 0deg,
    rgba(248, 250, 252, 0.2),
    rgba(34, 211, 238, 0.8),
    rgba(15, 23, 42, 0.9),
    rgba(248, 250, 252, 0.2)
  );
  animation: iconSpin 6s linear infinite;
  mix-blend-mode: screen;
  opacity: 0.9;
}

/* Tag + titolo più protagonista */
.different-tag {
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(148, 163, 184, 0.96);
  margin: 0;
}

.different-item h3 {
  margin: 0;
  font-size: 1.25rem;   /* titolo più grande */
  line-height: 1.25;
}

/* Testo descrizione leggermente più piccolo, per dare risalto al titolo */
.different-item > p {
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Interno "metallizzato" + 3D base */
.different-item {
  background:
    radial-gradient(circle at top left, rgba(15, 23, 42, 0.98), rgba(3, 7, 18, 1));
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.9),
    0 0 14px rgba(15, 23, 42, 0.9),
    inset 0 0 0 1px rgba(148, 163, 184, 0.4);
}

/* stato base (non attivo): leggero 3D */
.different-item {
  transform: translateY(6px) scale(0.97) rotateX(3deg);
  opacity: 0.8;
}

/* stato attivo: entra con effetto 3D + metal highlight */
.different-item.is-active {
  transform: translateY(0) scale(1) rotateX(0deg);
  opacity: 1;
  border-color: rgba(34, 211, 238, 0.95);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.95),
    0 0 32px rgba(34, 211, 238, 0.8),
    inset 0 0 0 1px rgba(226, 232, 240, 0.35);
  animation: cardMetalIn 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

/* MOBILE: leggermente più strette */
@media (max-width: 900px) {
  .different-item {
    max-width: 360px;
    min-height: 50vh;
  }

  .different-item h3 {
    font-size: 1.2rem;
  }
}

/* Animazioni */

/* glow metallico quando diventa attiva */
@keyframes cardMetalIn {
  0% {
    transform: translateY(24px) scale(0.92) rotateX(8deg);
    box-shadow:
      0 10px 20px rgba(0, 0, 0, 0.7),
      0 0 0 rgba(34, 211, 238, 0);
  }
  60% {
    transform: translateY(-4px) scale(1.02) rotateX(0deg);
    box-shadow:
      0 28px 60px rgba(0, 0, 0, 0.95),
      0 0 36px rgba(34, 211, 238, 0.9);
  }
  100% {
    transform: translateY(0) scale(1) rotateX(0deg);
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.95),
      0 0 32px rgba(34, 211, 238, 0.8);
  }
}

/* rotazione lenta dell'effetto metal sull'icona */
@keyframes iconSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* MOBILE: una card quasi per volta, con transizione 3D fluida */
@media (max-width: 900px) {

  .different-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .different-right {
    perspective: 1200px;
    gap: 1.6rem;
  }

  /* stato BASE: leggermente dietro, più piccola, più in basso */
  .different-item {
    min-height: 50vh;          /* 👈 altezza “giusta” per vederne una e un pezzo della prossima */
    margin-bottom: 2rem;
    padding: 1.2rem 1.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    transform:
      translateY(24px)
      scale(0.9)
      rotateX(8deg);
    opacity: 0.5;

    transition:
      transform 0.45s cubic-bezier(0.19, 1, 0.22, 1),
      opacity 0.45s ease,
      box-shadow 0.45s ease,
      border-color 0.35s ease;
  }

  /* stato ATTIVO: card “centrale”, entra in 3D */
  .different-item.is-active {
    transform:
      translateY(0)
      scale(1)
      rotateX(0deg);
    opacity: 1;
  }

  /* niente buco sotto l’ultima card */
  .different-item:last-child {
    margin-bottom: 0;
  }

  .different-item h3 {
    font-size: 1.15rem;
  }
}
/* MOBILE: card basse, larghezza normale. Il movimento lo fa il JS. */
@media (max-width: 900px) {
  .different-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .different-right {
    perspective: 1200px;
    gap: 1.6rem;
  }

  .different-item {
    min-height: 26vh;         /* card basse */
    margin-bottom: 1.6rem;
    padding: 1.2rem 1.2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* IMPORTANTISSIMO: niente transform fisso su mobile */
    transform: none;
    opacity: 1;
  }

  .different-item:last-child {
    margin-bottom: 0;
  }

  /* su mobile .is-active serve solo per glow, NON per muovere la card */
  .different-item.is-active {
    border-color: rgba(34, 211, 238, 0.95);
    box-shadow:
      0 24px 60px rgba(0, 0, 0, 0.95),
      0 0 32px rgba(34, 211, 238, 0.85),
      inset 0 0 0 1px rgba(226, 232, 240, 0.4);
  }
}
/* ============== MOBILE: stack di card, una alla volta ============== */
@media (max-width: 900px) {

  /* Una colonna sola */
  .different-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
  }

  /* Colonna delle card: contenitore normale, niente scroll interno */
  .different-right {
    position: relative;
    display: block;
    padding-bottom: 0;
  }

  /* Ogni card è sticky: si ferma sotto il titolo e viene coperta dalla successiva */
  .different-item {
    position: sticky;
    top: 110px; /* distanza dal top (sotto il titolo della sezione) */
    margin: 0 0 3rem 0;
    min-height: calc(100vh - 130px); 
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* l'ultima card non lascia spazio vuoto sotto */
  .different-item:last-child {
    margin-bottom: 0;
  }
}
@media (max-width: 900px) {
  .different-item:hover {
    transform: none; /* se avevi trasformazioni sull'hover */
  }
}
/* ============== MOBILE: stack di card, centrali, basse e fluide ============== */
@media (max-width: 900px) {
  /* niente overflow nascosto o lo sticky impazzisce */
  .section-different {
    overflow: visible;
  }

  .different-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.2rem;
  }

  /* colonna delle card: centriamo le card */
  .different-right {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center; /* centra orizzontalmente le card */
    padding-bottom: 0;
  }

  /* CARD: sticky, centrali, basse, larghezza adattiva */
  .different-item {
    position: sticky;
    top: 110px;                     /* distanza dal top (sotto titolo sezione) */
    width: 100%;
    max-width: 480px;               /* si adatta al device, ma non troppo larga */
    margin: 0 0 2.8rem 0;
    min-height: 220px;              /* 🔥 MOLTO più bassa di prima */
    padding: 1.2rem 1.2rem;

    display: flex;
    flex-direction: column;
    justify-content: center;

    /* su mobile NESSUN transform/3D che cambi con is-active → niente traballi */
    transform: none;
    opacity: 1;
    transition:
      box-shadow 0.3s ease,
      border-color 0.3s ease;
  }

  /* glow leggero SOLO sulla card attiva, senza spostarla */
  .different-item.is-active {
    border-color: rgba(34, 211, 238, 0.95);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.8),
      0 0 26px rgba(34, 211, 238, 0.7);
  }

  /* l'ultima non lascia buco sotto */
  .different-item:last-child {
    margin-bottom: 0;
  }

  /* titolo un filo più compatto su mobile */
  .different-item h3 {
    font-size: 1.1rem;
  }
}
@media (max-width: 900px) {

  /* ...tutto il resto resta uguale... */

  /* Glow morbido SOLO sulla card attiva */
  .different-item.is-active {
    border-color: rgba(34, 211, 238, 0.9);
    box-shadow:
      0 0 18px rgba(34, 211, 238, 0.55),
      0 0 32px rgba(34, 211, 238, 0.35),
      0 0 48px rgba(34, 211, 238, 0.20);
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
  }
}
/* STRISCIA SCORREVOLE PER IL TITOLO DELLA SEZIONE "LEONARDO È DIVERSO" */

.marquee-wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 40px 0;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 40px;
}

.marquee {
  display: flex;
  white-space: nowrap;
  gap: 40px;
  animation: marquee-scroll 7s linear infinite;
}

.marquee span {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--color-text-subtle);
  opacity: 1;
}

/* Animazione scorrimento */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* Responsività */
@media (max-width: 600px) {
  .marquee span {
    font-size: 30px;
  }
}
/* ================== PAGINA CONSULENZA ================== */

.page-consulenza .hero-consulenza {
  background: radial-gradient(circle at top, #1f2937 0, #05060a 55%);
}

.page-consulenza .hero-media-consulenza {
  position: relative;
}

.page-consulenza .hero-photo-consulenza {
  position: relative;
  border-radius: 26px;
  overflow: hidden;
  box-shadow:
    0 26px 60px rgba(0, 0, 0, 0.95),
    0 0 40px rgba(25, 218, 213, 0.55);
}

/* glow dietro la foto, simile a chi-sono */
.page-consulenza .hero-photo-consulenza::before {
  content: "";
  position: absolute;
  inset: -40%;
  z-index: -1;
  background: radial-gradient(
    circle at 50% 60%,
    rgba(25, 218, 213, 0.55),
    rgba(25, 218, 213, 0.16) 40%,
    transparent 70%
  );
  filter: blur(40px);
  opacity: 0;
  transform: scale(0.8);
  animation: glowFadeIn 1.4s ease-out 0.4s forwards;
}

/* micro transizioni sulle plan-card di questa pagina */
.page-consulenza .plans .plan-card {
  transform: translateY(6px);
  opacity: 0.9;
  transition:
    transform 0.25s ease-out,
    box-shadow 0.25s ease-out,
    opacity 0.25s ease-out;
}

.page-consulenza .plans .plan-card:hover {
  transform: translateY(-4px);
  opacity: 1;
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.9),
    0 0 24px rgba(25, 218, 213, 0.7);
}
/* ==========================================
   STEPPER ORIZZONTALE – CONSULENZA
   ========================================== */

.stepper {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* ---- LINEA BASE E LINEA ATTIVA ---- */
.stepper-line {
  position: relative;
  height: 4px;
  width: 100%;
  margin-bottom: 4.5rem;
}

.stepper-line-base {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
}

.stepper-line-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2af0e9, #23a1ff);
  border-radius: 999px;
  width: 0%;
  transition: width 0.4s ease-out;
}


/* ---- STEP BULLETS ---- */
.stepper-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.stepper-step {
  text-align: center;
  position: relative;
}

.step-bullet {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  transition: 0.3s ease-out;
  backdrop-filter: blur(6px);
}

/* glowing active bullet */
.stepper-step.active .step-bullet {
  background: linear-gradient(180deg, #1af0da, #1cb1c7);
  border: none;
  color: #001415;
  box-shadow: 0 0 18px rgba(28, 194, 193, 0.55),
              0 0 40px rgba(28, 194, 193, 0.35);
  transform: scale(1.12);
}


/* ---- TEXT UNDER BULLET ---- */
.step-info {
  margin-top: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
  transform: translateY(6px);
}

.stepper-step.active .step-info {
  opacity: 1;
  transform: translateY(0px);
}

/* MOBILE: torna verticale, semplice, elegante */
@media (max-width: 900px) {
  .stepper-line { display: none; }
  .stepper-steps {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }
  .stepper-step {
    text-align: left;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }
  .step-bullet {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }
  .step-info {
    transform: none !important;
    opacity: 1 !important;
  }
}
 
/* ==========================================
   STEPPER CONSULENZA – SEZIONE “PINNATA”
   ========================================== */

/* Desktop: sezione più alta e stepper sticky */

/* Layout stepper di prima (se non l’hai già) */
.stepper {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.stepper-line {
  position: relative;
  height: 4px;
  width: 100%;
  margin-bottom: 4.5rem;
}

.stepper-line-base {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
}

.stepper-line-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2af0e9, #23a1ff);
  border-radius: 999px;
  width: 0%;
  transition: width 0.25s ease-out;
}

.stepper-steps {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

.stepper-step {
  text-align: center;
  position: relative;
}

.step-bullet {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  transition: 0.3s ease-out;
  backdrop-filter: blur(6px);
}

.stepper-step.active .step-bullet {
  background: linear-gradient(180deg, #1af0da, #1cb1c7);
  border: none;
  color: #001415;
  box-shadow:
    0 0 18px rgba(28, 194, 193, 0.55),
    0 0 40px rgba(28, 194, 193, 0.35);
  transform: scale(1.12);
}

.step-info {
  margin-top: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transform: translateY(6px);
}

.stepper-step.active .step-info {
  opacity: 1;
  transform: translateY(0px);
}

/* Mobile: verticale semplice */
@media (max-width: 900px) {
  .stepper-line { display: none; }

  .stepper-steps {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }

  .stepper-step {
    text-align: left;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .step-bullet {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .step-info {
    transform: none !important;
    opacity: 1 !important;
  }
}
/* SEZIONE CONSULENZA – BLOCCO PINNATO (DESKTOP) */
@media (min-width: 901px) {
  #come-funziona-consulenza {
    position: relative;
    min-height: 220vh; /* la sezione dura circa 2 viewport: più spazio per animare */
  }

  #come-funziona-consulenza .stepper-pin {
    position: sticky;
    top: 110px; /* altezza sotto l'header, regola 90–120px se serve */
    z-index: 2;
  }
}
/* ================== CONSULENZA STEPPER ================== */

/* Sezione alta per permettere lo scroll con blocco */
.consulenza-stepper-section {
  position: relative;
}

/* DESKTOP: sezione "lunga" + blocco pin */
@media (min-width: 901px) {
  .consulenza-stepper-section {
    min-height: 220vh; /* quanto "dura" la sezione, puoi aumentare se vuoi più scroll */
  }

  .consulenza-stepper-pin {
    position: sticky;
    top: 110px; /* sotto l'header (regola 90–120 se serve) */
    z-index: 2;
  }
}

.consulenza-stepper {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* LINEA */
.consulenza-stepper-line {
  position: relative;
  height: 4px;
  width: 100%;
  margin-bottom: 4.5rem;
}

.consulenza-stepper-line-base {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
}

.consulenza-stepper-line-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2af0e9, #23a1ff);
  border-radius: 999px;
  width: 0%;
  transition: width 0.25s ease-out;
}

/* STEP ORIZZONTALI */
.consulenza-stepper-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.consulenza-stepper-step {
  text-align: center;
  position: relative;
}

.consulenza-step-bullet {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  transition: 0.3s ease-out;
  backdrop-filter: blur(6px);
}

/* bullet attivo */
.consulenza-stepper-step.active .consulenza-step-bullet {
  background: linear-gradient(180deg, #1af0da, #1cb1c7);
  border: none;
  color: #001415;
  box-shadow:
    0 0 18px rgba(28, 194, 193, 0.55),
    0 0 40px rgba(28, 194, 193, 0.35);
  transform: scale(1.12);
}

.consulenza-step-info {
  margin-top: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transform: translateY(6px);
}

.consulenza-stepper-step.active .consulenza-step-info {
  opacity: 1;
  transform: translateY(0px);
}

/* MOBILE: verticale semplice, senza sticky e senza linea animata */
@media (max-width: 900px) {
  .consulenza-stepper-line {
    display: none;
  }

  .consulenza-stepper-steps {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }

  .consulenza-stepper-step {
    text-align: left;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
  }

  .consulenza-step-bullet {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  .consulenza-step-info {
    transform: none ;
    opacity: 1 ;
  }
}
/* ================== CONSULENZA STEPPER – LAYOUT ================== */

.consulenza-stepper-section {
  position: relative;
}

.consulenza-stepper-pin {
  position: relative;
}

/* STEP + LINEA COME GIÀ AVEVI */
.consulenza-stepper {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

.consulenza-stepper-line {
  position: relative;
  height: 4px;
  width: 100%;
  margin-bottom: 4.5rem;
}

.consulenza-stepper-line-base {
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.1);
  border-radius: 999px;
}

.consulenza-stepper-line-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2af0e9, #23a1ff);
  border-radius: 999px;
  width: 0%;
  transition: width 0.25s ease-out;
}

.consulenza-stepper-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
}

.consulenza-stepper-step {
  text-align: center;
  position: relative;
}

.consulenza-step-bullet {
  width: 50px;
  height: 50px;
  margin: 0 auto;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1rem;
  color: rgba(255,255,255,0.65);
  transition: 0.3s ease-out;
  backdrop-filter: blur(6px);
}

.consulenza-stepper-step.active .consulenza-step-bullet {
  background: linear-gradient(180deg, #1af0da, #1cb1c7);
  border: none;
  color: #001415;
  box-shadow:
    0 0 18px rgba(28, 194, 193, 0.55),
    0 0 40px rgba(28, 194, 193, 0.35);
  transform: scale(1.12);
}

.consulenza-step-info {
  margin-top: 0.8rem;
  opacity: 0.6;
  transition: opacity 0.25s ease-out, transform 0.25s ease-out;
  transform: translateY(6px);
}

.consulenza-stepper-step.active .consulenza-step-info {
  opacity: 1;
  transform: translateY(0px);
}

/* MOBILE: semplice, verticale */

/* MOBILE – carosello verticale compatto per la consulenza */
@media (max-width: 900px) {
  .consulenza-stepper-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* niente linea orizzontale su mobile */
  .consulenza-stepper-line {
    display: none;
  }

  .consulenza-stepper {
    position: relative;
    max-width: 520px;
    margin-inline: auto;
  }

  /* contenitore scrollabile verticale = "carosello" */
  .consulenza-stepper-steps {
    display: block;
    max-height: min(60vh, 360px);
    padding-right: 0.4rem;
    overflow-y: auto;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .consulenza-stepper-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.1rem;
    padding: 1.1rem 1.1rem;
    border-radius: 18px;
    background: rgba(11, 17, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
    scroll-snap-align: start;
    opacity: 0.45;
    transform: scale(0.96);
    transition:
      opacity 0.25s ease-out,
      transform 0.25s ease-out,
      border-color 0.25s ease-out,
      box-shadow 0.25s ease-out;
  }

  /* step “in focus” nel carosello */
  .consulenza-stepper-step.is-current {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(42, 240, 233, 0.6);
    box-shadow:
      0 18px 40px rgba(0, 0, 0, 0.9),
      0 0 26px rgba(42, 240, 233, 0.55);
  }

  .consulenza-step-bullet {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 600;
    font-size: 0.95rem;
  }

  .consulenza-stepper-step.is-current .consulenza-step-bullet {
    background: linear-gradient(180deg, #1af0da, #1cb1c7);
    color: #001415;
  }

  .consulenza-step-info {
    margin-top: 0;
  }

  /* fade top/bottom per far intuire che si può scorrere */
  .consulenza-stepper::before,
  .consulenza-stepper::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 40px;
    pointer-events: none;
    z-index: 3;
  }

  .consulenza-stepper::before {
    top: 0;
    background: linear-gradient(to bottom, rgba(5, 6, 10, 0.98), transparent);
  }

  .consulenza-stepper::after {
    bottom: 0;
    background: linear-gradient(to top, rgba(5, 6, 10, 0.98), transparent);
  }
}
/* ============= PINNAGGIO GESTITO DA JS (DESKTOP) ============= */

@media (min-width: 901px) {
  /* la sezione è un po’ più alta per dare margine di scorrimento */
  .consulenza-stepper-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .consulenza-stepper-pin.is-fixed {
    position: fixed;
    top: 100px;           /* sotto l'header, regola se serve */
    left: 50%;
    transform: translateX(-50%);
    width: min(1100px, 100% - 3rem);
    z-index: 20;
  }
}
/* ========== ANIMAZIONE APPARIZIONE STEP CONSULENZA (DESKTOP) ========== */

@media (min-width: 901px) {
  /* di base gli step sono "pronti ma invisibili" */
  .consulenza-stepper-step {
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.35s ease-out,
      transform 0.35s ease-out;
  }

  /* quando diventano attivi con lo scroll → appaiono */
  .consulenza-stepper-step.active {
    opacity: 1;
    transform: translateY(0);
  }

  /* testo ancora più “morbido” in entrata */
  .consulenza-step-info {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.35s ease-out 0.05s,
      transform 0.35s ease-out 0.05s;
  }

  .consulenza-stepper-step.active .consulenza-step-info {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * MOBILE – carosello verticale con scroll della pagina (sezione pinnata)
 *
 * Questa regola sostituisce la vecchia logica del carosello interno. Ora la
 * sezione resta lunga e “pinnata” anche su mobile e gli step sono disposti
 * verticalmente; la classe `.active` definita dal JS controlla la
 * transizione di opacità e posizione.
 */
@media (max-width: 900px) {
  /* sezione alta per permettere lo scroll della pagina durante il pin */
  .consulenza-stepper-section {
    min-height: 220vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  /* nascondi la linea orizzontale su mobile */
  .consulenza-stepper-line {
    display: none;
  }

  /* contenitore centrale dello stepper */
  .consulenza-stepper {
    max-width: 520px;
    margin-inline: auto;
  }

  /* colonna di card, una sotto l’altra */
  .consulenza-stepper-steps {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
  }

  /* card base: inizialmente fuori vista (opacity 0) e più in basso */
  .consulenza-stepper-step {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.6rem;
    padding: 1.1rem 1.1rem;
    border-radius: 18px;
    background: rgba(11, 17, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);
    opacity: 0;
    transform: translateY(14px);
    transition:
      opacity 0.35s ease-out,
      transform 0.35s ease-out,
      border-color 0.35s ease-out,
      box-shadow 0.35s ease-out;
  }

  /* card attiva: appare e si evidenzia */
  .consulenza-stepper-step.active {
    opacity: 1;
    transform: translateY(0);
    border-color: rgba(42, 240, 233, 0.6);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9),
                0 0 26px rgba(42, 240, 233, 0.55);
  }

  /* bullet più piccolo su mobile */
  .consulenza-step-bullet {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }

  /* bullet colorato quando la card è attiva */
  .consulenza-stepper-step.active .consulenza-step-bullet {
    background: linear-gradient(180deg, #1af0da, #1cb1c7);
    color: #001415;
  }

  /* testo opaco e in basso di base */
  .consulenza-step-info {
    margin-top: 0;
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity 0.35s ease-out 0.05s,
      transform 0.35s ease-out 0.05s;
  }

  /* testo visibile quando la card è attiva */
  .consulenza-stepper-step.active .consulenza-step-info {
    opacity: 1;
    transform: translateY(0);
  }
}

/*
 * Blocco “pin”: la card resta fissa mentre la sezione si scrolla.
 * Applichiamo lo stesso stile su tutte le dimensioni, con un piccolo
 * aggiustamento per mobile.
 */
.consulenza-stepper-pin.is-fixed {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 100% - 3rem);
  z-index: 20;
}

@media (max-width: 900px) {
  .consulenza-stepper-pin.is-fixed {
    top: 80px;
    width: 100%;
  }
}

/* --- Inizio sezione stepper integrata (aggiornato) --- */
/*
 * ================== CONSULENZA STEPPER CLEAN ==================
 * Questo foglio di stile sostituisce tutte le definizioni precedenti della
 * sezione “Come funziona la consulenza” e dello stepper. Consente di
 * mantenere il blocco “pinnato” su desktop e mobile (fissato sotto
 * l’header durante lo scroll) e, su mobile, sostituisce la timeline
 * orizzontale con una colonna di card verticali che compaiono
 * progressivamente mentre si scorre la pagina (niente scroll interno).
 */

/* Contenitore della sezione */
.consulenza-stepper-section {
  position: relative;
  /* sufficiente altezza per consentire la progressione */
  min-height: 220vh;
  padding-top: 4rem;
  padding-bottom: 4rem;
}

@media (max-width: 900px) {
  .consulenza-stepper-section {
    /* su mobile la sezione è comunque lunga per supportare il pin */
    min-height: 220vh;
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
}

/* Contenitore fissabile */
.consulenza-stepper-pin {
  position: relative;
}

.consulenza-stepper-pin.is-fixed {
  position: fixed;
  top: 100px;
  left: 50%;
  transform: translateX(-50%);
  width: min(1100px, 100% - 3rem);
  z-index: 20;
}

@media (max-width: 900px) {
  .consulenza-stepper-pin.is-fixed {
    top: 80px;
    width: 100%;
  }
}

/* Wrapper dello stepper */
.consulenza-stepper {
  position: relative;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

/* Linea di avanzamento */
.consulenza-stepper-line {
  position: relative;
  height: 4px;
  width: 100%;
  margin-bottom: 3rem;
}

.consulenza-stepper-line-base {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.consulenza-stepper-line-active {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #2af0e9, #23a1ff);
  border-radius: 999px;
  width: 0%;
  transition: width 0.25s ease-out;
}

/* ================== DESKTOP (≥901px) ================== */
@media (min-width: 901px) {
  /* lista in orizzontale */
  .consulenza-stepper-steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1rem;
  }

  /* singolo step nascosto inizialmente */
  .consulenza-stepper-step {
    text-align: center;
    position: relative;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
  }

  /* step attivo */
  .consulenza-stepper-step.active {
    opacity: 1;
    transform: translateY(0);
  }

  .consulenza-step-bullet {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(6px);
    transition: 0.3s ease-out;
  }

  .consulenza-stepper-step.active .consulenza-step-bullet {
    background: linear-gradient(180deg, #1af0da, #1cb1c7);
    border: none;
    color: #001415;
    transform: scale(1.12);
    box-shadow:
      0 0 18px rgba(28, 194, 193, 0.55),
      0 0 40px rgba(28, 194, 193, 0.35);
  }

  .consulenza-step-info {
    margin-top: 0.8rem;
    opacity: 0.6;
    transform: translateY(6px);
    transition: opacity 0.35s ease-out 0.05s, transform 0.35s ease-out 0.05s;
  }

  .consulenza-stepper-step.active .consulenza-step-info {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ================== MOBILE (≤900px) ================== */
@media (max-width: 900px) {
  /* nascondi la linea orizzontale su mobile */
  .consulenza-stepper-line {
    display: none;
  }

  /* contenitore card: non usa carosello interno, ma stacka le card una sull'altra */
  .consulenza-stepper-steps {
    position: relative;
    display: block;
    max-width: 520px;
    margin: 0 auto;
    /* rimuovi eventuali stili di overflow */
    max-height: none !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
  }

  /* card verticale: ciascuna card resta sticky in alto finché non arriva la successiva.
     L'altezza minima è quasi l'intera viewport per mostrare una card per volta. */
  .consulenza-stepper-step {
    position: -webkit-sticky; /* per iOS */
    position: sticky;
    top: 160px; /* distanza dal top della pagina/pinned header: regola se necessario */
    margin: 0 0 3rem 0;
    min-height: calc(100vh - 180px); /* riempie quasi tutto lo schermo */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    padding: 1rem 1.2rem;
    border-radius: 18px;
    background: rgba(11, 17, 26, 0.96);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.75);

    /* inizialmente tutte sono pronte e visibili; la classe .active gestisce l'effetto */
    opacity: 0.45;
    transform: scale(0.96);
    transition:
      opacity 0.35s ease-out,
      transform 0.35s ease-out,
      border-color 0.35s ease-out,
      box-shadow 0.35s ease-out;
  }

  /* card attiva: piena opacità e dimensione */
  .consulenza-stepper-step.active {
    opacity: 1;
    transform: scale(1);
    border-color: rgba(42, 240, 233, 0.6);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.9),
                0 0 26px rgba(42, 240, 233, 0.55);
  }

  /* l'ultima card non lascia buco sotto */
  .consulenza-stepper-step:last-child {
    margin-bottom: 0;
  }

  /* bullet più piccolo su mobile */
  .consulenza-step-bullet {
    width: 40px;
    height: 40px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
  }

  /* bullet evidenziato quando la card è attiva */
  .consulenza-stepper-step.active .consulenza-step-bullet {
    background: linear-gradient(180deg, #1af0da, #1cb1c7);
    border: none;
    color: #001415;
    box-shadow:
      0 0 18px rgba(28, 194, 193, 0.55),
      0 0 40px rgba(28, 194, 193, 0.35);
  }

  /* testo inizialmente visibile e stabile su mobile */
  .consulenza-step-info {
    margin-top: 0;
    opacity: 1;
    transform: none;
  }

  /* nessun ulteriore cambio su .active per il testo su mobile */
}
/* --- Fine sezione stepper integrata --- */
/* ========= MOBILE HEADER + MENU SUPER PREMIUM ========= */
/* ========= MOBILE HEADER + MENU SUPER PREMIUM ========= */
@media (max-width: 900px) {

  /* HEADER COMPATTO */
  .header-inner {
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1.1rem;
  }

  /* Niente CTA in alto, solo nel menu */
  .header-inner > .btn-nav {
    display: none;
  }

  /* ===== BURGER BUTTON ===== */
  .burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    padding: 0;
    margin: 0;
    border: 1px solid rgba(148, 163, 184, 0.55);
    background: radial-gradient(circle at 30% 0%, rgba(25, 218, 213, 0.18), rgba(15, 23, 42, 0.98));
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.9),
      0 10px 22px rgba(0, 0, 0, 0.75);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition:
      box-shadow 0.25s ease-out,
      transform 0.22s ease-out,
      border-color 0.25s ease-out;
    z-index: 60;
  }

  .burger::before {
    content: "";
    position: absolute;
    inset: -40%;
    background: radial-gradient(circle at 10% 0%, rgba(148, 163, 184, 0.45), transparent 65%);
    opacity: 0;
    transition: opacity 0.25s ease-out;
    pointer-events: none;
  }

  .burger:hover {
    transform: translateY(-1px) scale(1.03);
    border-color: rgba(25, 218, 213, 0.8);
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 1),
      0 16px 32px rgba(0, 0, 0, 0.9),
      0 0 24px rgba(25, 218, 213, 0.55);
  }

  .burger:hover::before {
    opacity: 1;
  }

  .burger span {
    width: 20px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #d4d9e7, #19dad5);
    box-shadow: 0 0 6px rgba(25, 218, 213, 0.6);
    display: block;
    transition:
      transform 0.25s ease,
      opacity 0.18s ease,
      width 0.25s ease;
  }

  .burger span + span {
    margin-top: 3px; /* distanza più compatta per una X perfetta */
  }

  /* ===== NAV MOBILE – CARD FLOATING A DESTRA ===== */
  .main-nav {
    position: fixed;
    top: 64px;
    right: 1.1rem;
    left: auto;

    width: min(340px, 82vw);
    padding: 1.5rem 1.4rem 1.6rem;

    background: radial-gradient(circle at top left,
      rgba(15, 23, 42, 0.98),
      rgba(3, 7, 18, 0.98));
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.92),
      0 0 32px rgba(25, 218, 213, 0.45);

    transform: translateY(-18px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transform-origin: top right;
    transition:
      opacity 0.28s ease-out,
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 50;
  }

  .main-nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18px;
    right: 18px;
    height: 1px;
    background: linear-gradient(
      90deg,
      rgba(25, 218, 213, 0.2),
      rgba(148, 163, 184, 0.5),
      rgba(25, 218, 213, 0.2)
    );
    opacity: 0.9;
    pointer-events: none;
  }

  .main-nav.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* LISTA MENU + ICONE PREMIUM */
  .main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
  }

  .main-nav li {
    width: 100%;
    position: relative;
    padding-left: 22px; /* spazio per l’icona */
  }

  .main-nav li + li {
    margin-top: 0.3rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(30, 41, 59, 0.85);
  }

  /* Iconcina “gemma” a sinistra del testo */
  .main-nav a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 9px;
    border-radius: 999px;
    transform: translateY(-50%);
    background: radial-gradient(circle at 30% 0%, #e0fdfa, #19dad5 55%, #020617 100%);
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.95),
      0 0 10px rgba(34, 211, 238, 0.7);
    opacity: 0.9;
  }

  .main-nav a {
    display: block;
    width: 100%;
    font-size: 0.96rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(226, 232, 240, 0.92);
    padding: 0.1rem 0;
    text-align: left;
    transition: color 0.18s ease, transform 0.2s ease;
  }

  .main-nav a:hover {
    color: var(--accent-aqua);
    transform: translateX(3px);
  }

  .main-nav a:hover::before,
  .main-nav a.active::before {
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 1),
      0 0 14px rgba(34, 211, 238, 0.95);
  }

  .main-nav a.active {
    color: var(--accent-aqua);
  }

  /* CTA "Consulenza gratuita" dentro il pannello */
  .main-nav .btn-nav {
    margin-top: 0.9rem;
    width: 100%;
    justify-content: center;
    padding: 0.7rem 1.4rem;
    font-size: 0.86rem;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    box-shadow:
      0 16px 36px rgba(25, 218, 213, 0.7),
      0 0 20px rgba(25, 218, 213, 0.45);
  }
}
/* ===== BURGER → X QUANDO IL MENU È APERTO ===== */
/* HTML: <nav class="main-nav">...</nav><button class="burger">...</button> */
/* ----- BURGER → X PERFETTA ----- */
@media (max-width: 900px) {

  /* tutte le linee diventano della stessa lunghezza */
  .burger span {
    width: 22px;
  }

  /* X perfetta quando il menu è aperto */
  .burger.is-open span:nth-child(1) {
    transform: translateY(5px) rotate(45deg);
  }

  .burger.is-open span:nth-child(2) {
    opacity: 0;
  }

  .burger.is-open span:nth-child(3) {
    transform: translateY(-5px) rotate(-45deg);
  }

  /* transizioni morbide */
  .burger span {
    transition:
      transform 0.28s ease,
      opacity 0.22s ease;
  }
}
/* Rimuovi iconcine da CTA */
.main-nav .btn-nav::before {
  display: none !important;
  content: none !important;
}
/* Rimuovi padding laterale extra sulla CTA */
.main-nav .btn-nav {
  padding-left: 1.4rem !important;
} 
/* ICONCINE PREMIUM MENU MOBILE (no su CTA) */
@media (max-width: 900px) {

  .main-nav li a {
    position: relative;
    padding-left: 1.6rem;
  }

  /* niente padding extra sulla CTA */
  .main-nav li .btn-nav {
    padding-left: 1.4rem;
  }

  /* pallino metallico solo link normali */
  .main-nav li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    transform: translateY(-50%) scale(0.7);
    background:
      radial-gradient(circle at 30% 0%, #e0fdfa, #22d3ee 45%, #0f172a 100%);
    box-shadow:
      0 0 0 1px rgba(15, 23, 42, 0.9),
      0 0 10px rgba(34, 211, 238, 0.6);
    opacity: 0.6;
    transition:
      transform 0.25s ease,
      opacity 0.25s ease,
      box-shadow 0.25s ease;
  }

  /* niente icona sulla CTA */
  .main-nav li .btn-nav::before {
    content: none !important;
    display: none !important;
  }

  /* hover / active → glow metallico */
  .main-nav li a:hover::before,
  .main-nav li a.active::before {
    transform: translateY(-50%) scale(1);
    opacity: 1;
    box-shadow:
      0 0 12px rgba(34, 211, 238, 0.9),
      0 0 22px rgba(34, 211, 238, 0.6);
  }

  /* link attivo ancora più “premium” */
  .main-nav a.active {
    color: var(--accent-aqua);
    text-shadow:
      0 0 10px rgba(34, 211, 238, 0.7),
      0 0 18px rgba(34, 211, 238, 0.5);
  }
}
/* SPOTLIGHT PREMIUM SOTTO IL MENU MOBILE */
@media (max-width: 900px) {
  .main-nav {
    position: fixed;
    z-index: 35;
    overflow: visible;
  }

  .main-nav::before {
    content: "";
    position: absolute;
    inset: -40px;
    background:
      radial-gradient(circle at 20% 0%,
        rgba(42, 240, 233, 0.25),
        transparent 60%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease-out;
    z-index: -1;
  }

  .main-nav.open::before {
    opacity: 1;
  }
}
/* ============ NAV – LINEA ANIMATA SOTTO LINK ATTIVO ============ */

/* base: tutti i link (tranne la CTA) diventano "trackabili" */
.main-nav a {
  position: relative;
  overflow: visible;
}

/* niente linea sulla CTA */
.main-nav .btn-nav {
  position: static;
}
.main-nav .btn-nav::after {
  content: none !important;
}

/* linea animata sotto il testo */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: -6px;

  height: 2px;
  border-radius: 999px;

  background: linear-gradient(90deg, #2af0e9, #23a1ff);
  box-shadow:
    0 0 10px rgba(42, 240, 233, 0.7),
    0 0 20px rgba(35, 161, 255, 0.5);

  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;

  transition:
    transform 0.28s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.22s ease-out;
}

/* hover + attivo = linea visibile */
.main-nav a:hover::after,
.main-nav a.active::after {
  transform: scaleX(1);
  opacity: 1;
}

/* leggero boost sul link attivo */
.main-nav a.active {
  color: var(--accent-aqua);
}

/* MOBILE: linea un filo più vicina al testo, centrata meglio */
@media (max-width: 900px) {
  .main-nav a::after {
    left: 20%;
    right: 20%;
    bottom: -4px;
  }
}
/* === MOBILE NAV + OVERLAY SFUOCATO (OVERRIDE FINALE) === */
@media (max-width: 900px) {

  /* Pannello del menu (resta come ora, solo un pelo più “vetroso”) */
  .main-nav {
    position: fixed;
    top: 64px;
    right: 1.1rem;
    left: auto;

    width: min(340px, 82vw);
    padding: 1.5rem 1.4rem 1.6rem;

    background: radial-gradient(circle at top left,
      rgba(7, 10, 20, 0.82),
      rgba(3, 7, 18, 0.96));
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.6);
    box-shadow:
      0 22px 48px rgba(0, 0, 0, 0.92),
      0 0 32px rgba(25, 218, 213, 0.45);

    transform: translateY(-18px) scale(0.96);
    opacity: 0;
    pointer-events: none;
    transform-origin: top right;
    transition:
      opacity 0.28s ease-out,
      transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

    z-index: 50;
    overflow: visible;
  }

  .main-nav.open {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  /* OVERLAY SFUOCATO A TUTTO SCHERMO DIETRO IL MENU */
  .main-nav::before {
    content: "";
    position: fixed;
    inset: 0; /* copre tutto lo schermo */
    z-index: -1; /* dietro al pannello, sopra alla pagina */
    pointer-events: none;

    background: radial-gradient(
      circle at top,
      rgba(15, 23, 42, 0.90),
      rgba(3, 7, 18, 0.98)
    );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    opacity: 0;
    transition:
      opacity 0.32s ease-out;
  }

  .main-nav.open::before {
    opacity: 1;
  }
}
/* ========== PAGE TRANSITIONS ========== */

/* Keyframes per l'uscita verso sinistra */
@keyframes pageSlideOutLeft {
  0% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
  100% {
    opacity: 0;
    transform: translateX(-40px);
    filter: blur(8px);
  }
}

/* Keyframes per l'entrata da destra */
@keyframes pageSlideInRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
    filter: blur(0);
  }
}

/* Uscita pagina corrente */
body.page-transition-out main {
  animation: pageSlideOutLeft 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

/* Entrata pagina nuova */
body.page-transition-in main {
  animation: pageSlideInRight 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}
body.page-transition-in main {
  animation: pageSlideInRight 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  box-shadow: 0 0 40px rgba(25, 218, 213, 0.2);
}
/* ==========================================================
   PAGINE PROGRAM (BASE + PREMIUM)
   ========================================================== */

.page-program main {
  padding-top: 6.5rem;
}

/* HERO PROGRAM */

.hero-program {
  padding: 4.3rem 0 3.6rem;
}

.hero-program-base {
  background: radial-gradient(circle at top, #232a3f 0, #05060a 55%, #020309 100%);
}

.hero-program-premium {
  background: radial-gradient(circle at top, #27364c 0, #05060a 55%, #020309 100%);
}

.hero-program-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.8rem;
  align-items: center;
}

.hero-program-text .hero-subtitle {
  margin-top: 0.8rem;
}

.hero-program-visual {
  display: flex;
  justify-content: flex-end;
}

/* Card flottante a destra */

.program-floating-card {
  max-width: 330px;
  padding: 1.7rem 1.8rem;
  border-radius: 22px;
  background: rgba(15, 23, 42, 0.96);
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px);
}

.program-floating-card-premium {
  border-color: rgba(25, 218, 213, 0.9);
  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.95),
    0 0 42px rgba(25, 218, 213, 0.5);
}

.program-floating-title {
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.program-floating-text {
  color: var(--text-muted);
}

/* Icona badge hero */

.program-icon-badge {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  background: radial-gradient(circle at top, rgba(148, 163, 184, 0.85), rgba(15, 23, 42, 1));
}

.program-icon-badge.premium {
  background: radial-gradient(circle at top, rgba(25, 218, 213, 0.95), rgba(15, 23, 42, 1));
}

.program-icon-badge svg,
.program-icon-badge i svg {
  width: 28px;
  height: 28px;
}

/* Grid features */

.program-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.8rem;
  margin-top: 1.5rem;
}

.program-feature-card {
  border-radius: 20px;
  padding: 1.6rem 1.7rem;
  background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.3), rgba(15, 23, 42, 0.97));
  border: 1px solid rgba(148, 163, 184, 0.6);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.95);
}

.program-feature-card h3 {
  margin-bottom: 0.5rem;
}

.program-feature-card p {
  color: var(--text-muted);
}

/* Icone feature */

.program-icon {
  width: 40px;
  height: 40px;
  border-radius: 14px;
  margin-bottom: 0.8rem;
  background: rgba(15, 23, 42, 0.96);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.program-icon.premium {
  background: radial-gradient(circle at top, rgba(25, 218, 213, 0.9), rgba(15, 23, 42, 0.98));
}

.program-icon svg {
  width: 24px;
  height: 24px;
  stroke: #e5e7eb;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Blocchi "Cosa include" */

.program-include-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.8rem;
  margin-top: 1.6rem;
}

.program-include-grid-premium .program-include-col {
  border-color: rgba(25, 218, 213, 0.9);
}

.program-include-col {
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.65);
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.98);
}

.program-include-col h3 {
  margin-bottom: 0.5rem;
}

.program-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--text-muted);
}

.program-checklist li {
  position: relative;
  padding-left: 1.4rem;
  margin: 0.35rem 0;
}

.program-checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65rem;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #6ee7b7, #22d3ee);
}

/* È / NON È PER TE */

.program-fit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.8rem;
  margin-top: 1.6rem;
}

.program-fit-card {
  border-radius: 18px;
  padding: 1.7rem 1.9rem;
  background: rgba(15, 23, 42, 0.97);
  border: 1px solid rgba(148, 163, 184, 0.7);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.98);
}

.program-fit-card-light {
  background: rgba(15, 23, 42, 0.9);
}

/* CTA */

.program-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.8rem;
  align-items: center;
  border-radius: 20px;
  padding: 2rem 2.3rem;
  background: radial-gradient(circle at top left, rgba(148, 163, 184, 0.36), rgba(15, 23, 42, 0.98));
  border: 1px solid rgba(148, 163, 184, 0.78);
  box-shadow: 0 22px 55px rgba(15, 23, 42, 0.98);
}

.program-cta-premium {
  border-color: rgba(25, 218, 213, 0.9);
}

.btn-large {
  padding-inline: 1.7rem;
  padding-block: 0.85rem;
}

/* ANIMAZIONI ON SCROLL */

[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.5s ease-out,
    transform 0.5s ease-out;
}

[data-animate="fade-up"][data-delay="0.1"] {
  transition-delay: 0.08s;
}
[data-animate="fade-up"][data-delay="0.2"] {
  transition-delay: 0.16s;
}

[data-animate="fade-up"].in-view {
  opacity: 1;
  transform: translateY(0);
}

/* RESPONSIVE */

@media (max-width: 900px) {
  .hero-program-inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero-program-visual {
    justify-content: flex-start;
    margin-top: 1.6rem;
  }
}
/* Bottoni nella sezione Programmi (Home) */
.plan-card .btn-outline {
  color: #000 !important;
  border-color: rgba(0,0,0,0.35);
}

.plan-card .btn-outline:hover {
  background: rgba(0,0,0,0.08);
  color: #000 !important;
}
.hero-actions {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hero-note {
  position: relative !important;
  bottom: auto !important;
  left: auto !important;

  background: linear-gradient(135deg, #f3f4f6, #dce1ee);
  padding: 0.9rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(148,163,184,0.5);
  color: #111; /* testo nero */
  max-width: 320px;

  box-shadow:
    0 12px 20px rgba(0,0,0,0.25),
    0 0 20px rgba(255,255,255,0.4);

  font-size: 0.9rem;
}
/* Badge LeoAI nel Premium */
.leoai-badge-premium {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;

  padding: 0.38rem 0.85rem;
  border-radius: 999px;

  background: rgba(25, 218, 213, 0.16);
  border: 1px solid rgba(25, 218, 213, 0.55);
  color: #a5f3fc;
  font-size: 0.8rem;

  backdrop-filter: blur(12px);
}

.leoai-badge-premium svg {
  width: 16px;
  height: 16px;
  stroke: #5eead4;
}
.leoai-badge-premium {
  margin-top: 1.2rem;
  margin-bottom: 1.4rem; /* SPAZIO VERSO IL BOTTONE */
}

/* ==========================================================
   HOME – ANIMAZIONI E VERSIONE MOBILE "SUPER GLOW"
   (non tocca il desktop, tutto è wrappato su .page-home e media query)
   ========================================================== */

/* Animazioni di ingresso generiche per gli elementi marcati con data-animate */
.page-home [data-animate] {
  opacity: 0;
  transform: translateY(24px) scale(0.98);
  transition:
    opacity 0.55s ease-out,
    transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.page-home [data-animate].in-view {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---------------- HERO MOBILE: layout + glow di sfondo ---------------- */

@media (max-width: 768px) {
  .page-home .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.75rem;
    padding-top: 1.5rem;
  }

  .page-home .hero {
    position: relative;
    overflow: hidden;
  }

  .page-home .hero::before {
    content: "";
    position: absolute;
    inset: -40%;
    background:
      radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.18), transparent 55%),
      radial-gradient(circle at 100% 20%, rgba(59, 130, 246, 0.16), transparent 55%);
    opacity: 0.8;
    pointer-events: none;
  }

  .page-home .hero-photo {
    position: relative;
    z-index: 1;
  }
}

/* ==========================================================
   COME FUNZIONA – TIMELINE IN VERSIONE CAROUSEL ORIZZONTALE SU MOBILE
   ========================================================== */

@media (max-width: 768px) {
  .page-home #come-funziona .section-header {
    text-align: left;
    align-items: flex-start;
  }

  /* nascondo la linea centrale verticale solo su mobile */
  /*.page-home .timeline-line,
  //.page-home .timeline-line-active,
  //.page-home .timeline-line-base {
    display: none;
  }*/

  /* trasformo gli step in cards scrollabili orizzontalmente */
  /*.page-home .timeline-steps {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.5rem 1.6rem;
    margin: 0 -1.5rem;
  }

  .page-home .timeline-steps::-webkit-scrollbar {
    height: 4px;
  }

  .page-home .timeline-steps::-webkit-scrollbar-track {
    background: transparent;
  }

  .page-home .timeline-steps::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #14b8a6);
  }

  .page-home .timeline-step {
    scroll-snap-align: center;
    min-width: 80%;
    max-width: 80%;
    background: rgba(15, 23, 42, 0.96);
    border-radius: 18px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow:
      0 18px 45px rgba(15, 23, 42, 0.9),
      0 0 0 1px rgba(15, 23, 42, 1);
  }*/

  /* piccolo hint sotto la timeline */
 /* .page-home .timeline-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    font-size: 0.75rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #94a3b8;
    opacity: 0.9;
    margin-top: -0.4rem;
  }

  .page-home .timeline-hint-dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(135deg, #22c55e, #14b8a6);
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.9);
    animation: pulseDot 1.6s ease-in-out infinite;
  }

  @keyframes pulseDot {
    0% {
      transform: scale(1);
      opacity: 1;
    }
    50% {
      transform: scale(1.4);
      opacity: 0.6;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }

  .page-home .timeline-cta {
    margin-top: 0.4rem;
  }
}
*/
/* ==========================================================
   PROGRAMMI – CARDS IN SLIDER ORIZZONTALE + BADGE ICONA
   ========================================================== */

.page-home .plan-icon-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.12rem 0.7rem;
  border-radius: 999px;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #e2e8f0;
  background: radial-gradient(circle at 0% 0%, rgba(148, 163, 184, 0.3), transparent 60%);
  margin-bottom: 0.7rem;
}

.page-home .plan-icon-badge svg,
.page-home .plan-icon-badge i svg {
  width: 14px;
  height: 14px;
}

.page-home .plan-card-premium .plan-icon-badge {
  border-color: rgba(45, 212, 191, 0.9);
  color: #ccfbf1;
  background:
    radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.32), transparent 65%),
    rgba(15, 23, 42, 0.9);
}

@media (max-width: 768px) {
  .page-home #programmi .section-header.center {
    text-align: left;
    align-items: flex-start;
  }

  .page-home #programmi .section-header.center h2 {
    font-size: 1.5rem;
  }

  /* container dei piani -> slider orizzontale */
  .page-home .plans {
    display: flex;
    flex-direction: row;
    gap: 1.2rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.5rem 1.8rem;
    margin: 0 -1.5rem;
  }

  .page-home .plans::-webkit-scrollbar {
    height: 4px;
  }

  .page-home .plans::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #64748b, #22c55e);
  }

  .page-home .plan-card {
    scroll-snap-align: center;
    min-width: 80%;
    max-width: 80%;
    border-radius: 22px;
    border: 1px solid rgba(148, 163, 184, 0.4);
    box-shadow:
      0 18px 45px rgba(15, 23, 42, 0.75),
      0 0 0 1px rgba(15, 23, 42, 1);
    position: relative;
    overflow: hidden;
  }

  .page-home .plan-card:not(.plan-card-premium) {
    background:
      radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.16), transparent 60%),
      rgba(15, 23, 42, 0.96);
  }

  .page-home .plan-card-premium {
    background:
      radial-gradient(circle at 0% 0%, rgba(45, 212, 191, 0.24), transparent 65%),
      rgba(15, 23, 42, 0.98);
    border-color: rgba(45, 212, 191, 0.7);
  }

  .page-home .plan-card-premium .plan-ribbon {
    right: 1.2rem;
  }

  .page-home .plan-btn {
    width: 100%;
  }
}

/* ==========================================================
   SPAZIATURA SEZIONI MOBILE + LEGGERO CAMBIO SFONDO
   ========================================================== */

@media (max-width: 768px) {
  .page-home .section {
    padding-top: 3.2rem;
    padding-bottom: 3.2rem;
  }

  .page-home .section.section-different {
    padding-top: 3.6rem;
    padding-bottom: 3.6rem;
  }

  .page-home .section-soft {
    background: radial-gradient(circle at 0% 0%, rgba(15, 23, 42, 0.85), #020617);
  }
}
/* ==========================================================
   HOME MOBILE – PARALLAX, SFONDI DINAMICI, LOTTIE
   (desktop INVARIATO – tutto sotto .page-home + media query)
   ========================================================== */

/* Lottie nascosta di default (desktop) */
.hero-lottie-mobile {
  display: none;
}

/* BODY – temi di sfondo solo su mobile */
@media (max-width: 900px) {
  body.page-home {
    transition: background 0.6s ease;
    background: var(--bg-grad-main, #020617);
  }

  body.page-home.mobile-theme-hero {
    background:
      radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.16), transparent 60%),
      radial-gradient(circle at 100% 20%, rgba(45, 212, 191, 0.18), transparent 65%),
      #020617;
  }

  body.page-home.mobile-theme-flow {
    background:
      radial-gradient(circle at 0% 0%, rgba(129, 140, 248, 0.18), transparent 60%),
      radial-gradient(circle at 100% 100%, rgba(15, 118, 110, 0.25), transparent 70%),
      #020617;
  }

  body.page-home.mobile-theme-programmi {
    background:
      radial-gradient(circle at 0% 0%, rgba(59, 130, 246, 0.22), transparent 65%),
      radial-gradient(circle at 0% 100%, rgba(45, 212, 191, 0.22), transparent 70%),
      #020617;
  }

  body.page-home.mobile-theme-diverso {
    background:
      radial-gradient(circle at 100% 0%, rgba(248, 250, 252, 0.08), transparent 55%),
      radial-gradient(circle at 0% 100%, rgba(148, 163, 184, 0.18), transparent 75%),
      #020617;
  }

  body.page-home.mobile-theme-faq {
    background:
      radial-gradient(circle at 0% 50%, rgba(56, 189, 248, 0.2), transparent 60%),
      #020617;
  }

  body.page-home.mobile-theme-contatti {
    background:
      radial-gradient(circle at 50% 0%, rgba(34, 197, 94, 0.22), transparent 65%),
      #020617;
  }
}

/* HERO MOBILE – parallax-friendly layout + lottie visibile */
@media (max-width: 900px) {
  .page-home .hero {
    position: relative;
    overflow: hidden;
  }

  .page-home .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.6rem;
    padding-top: 1.4rem;
  }

  .page-home .hero-text {
    position: relative;
    z-index: 2;
  }

  .page-home .hero-media {
    position: relative;
    z-index: 1;
    margin-top: -0.6rem;
  }

  .page-home .hero-photo {
    min-height: 220px;
  }

  .page-home .hero-lottie-mobile {
    display: block;
    position: absolute;
    right: -32px;
    top: -18px;
    width: 170px;
    max-width: 40vw;
    opacity: 0.9;
    pointer-events: none;
  }

  .page-home .hero-lottie-mobile lottie-player {
    width: 100%;
    height: auto;
  }
}

/* TIMELINE MOBILE – più aria per animazioni */
@media (max-width: 900px) {
  .page-home #come-funziona .section-header {
    text-align: left;
    align-items: flex-start;
  }

  .page-home .timeline {
    padding-top: 0.4rem;
  }

  .page-home .timeline-step {
    will-change: transform, opacity;
  }
}

/* PROGRAMMI MOBILE – leggero “card lifting” per animazioni */
@media (max-width: 900px) {
  .page-home .plans {
    row-gap: 1.6rem;
  }

  .page-home .plan-card {
    position: relative;
    will-change: transform, opacity;
  }
}

/* DIFFERENT MOBILE – cards “immersive” pronte per GSAP */
@media (max-width: 900px) {
  .page-home .different-right .different-item {
    will-change: transform, opacity;
  }
}

/* FAQ MOBILE – ogni item pronto a fade/slide */
@media (max-width: 900px) {
  .page-home .faq-item {
    will-change: transform, opacity;
  }
}
/* TIMELINE MOBILE – card centrate e opacità piena */
@media (max-width: 900px) {
  .page-home .timeline-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page-home .timeline-step {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
    opacity: 1; /* base, poi GSAP anima da 0 -> 1 */
  }
}
/* TIMELINE MOBILE – centratura + stati attivi */
@media (max-width: 900px) {

  /* centratura card */
  .page-home .timeline-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .page-home .timeline-step {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
    opacity: 0.35; /* tutte semitrasparenti di default */
    transform: scale(0.96);
    transition: opacity .3s ease, transform .3s ease;
  }

  /* SOLO LA CARD ATTIVA */
  .page-home .timeline-step.is-active {
    opacity: 1;
    transform: scale(1);
  }
}
/* TIMELINE MOBILE – card centrate, solo attiva piena */
@media (max-width: 900px) {
  /* colonna centrata */
  #come-funziona .timeline-steps {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
  }

  #come-funziona .timeline-step {
    max-width: 480px;
    width: 100%;
    margin-inline: auto;
    opacity: 0.35;             /* tutte soft */
    transform: translateY(10px) scale(0.97);
    transition:
      opacity 0.25s ease-out,
      transform 0.25s ease-out,
      box-shadow 0.25s ease-out;
  }

  #come-funziona .timeline-step.is-active {
    opacity: 1;                /* solo l’attiva piena */
    transform: translateY(0) scale(1);
    box-shadow:
      0 18px 40px rgba(15, 23, 42, 0.5);
  }
}
/* TIMELINE MOBILE – slider orizzontale, solo card attiva piena */
/* @media (max-width: 900px) {

  /* nascondo la linea verticale classica su mobile, se ti disturba */
/*  #come-funziona .timeline-line {
    display: none;
  } 

  /* container degli step -> slider orizzontale */
/*  #come-funziona .timeline-steps {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.5rem 1.6rem;
    margin: 0 -1.5rem;
  }

  #come-funziona .timeline-steps::-webkit-scrollbar {
    height: 4px;
  }

  #come-funziona .timeline-steps::-webkit-scrollbar-track {
    background: transparent;
  }

  #come-funziona .timeline-steps::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #14b8a6);
  }

  /* ogni card occupa ~80% dello schermo e si “aggancia” al centro */
  /*#come-funziona .timeline-step {
    scroll-snap-align: center;
    flex: 0 0 80%;
    max-width: 80%;
    opacity: 0.35;                    /* tutte soft di base */
    /*transform: scale(0.95);
    transition:
      opacity 0.25s ease-out,
      transform 0.25s ease-out,
      box-shadow 0.25s ease-out;
  }

  /* card attiva (quella al centro) */
/*  #come-funziona .timeline-step.is-active {
    opacity: 1;
    transform: scale(1);
    box-shadow:
      0 18px 40px rgba(15, 23, 42, 0.6);
  }
}
/* ==========================================================
   PROGRAMMI – VERSIONE MOBILE PIÙ LEGGIBILE
   ========================================================== */
@media (max-width: 900px) {
  /* un po' più di respiro */
  .page-home #programmi.section {
    padding-top: 3rem;
    padding-bottom: 3.2rem;
  }

  .page-home #programmi .section-header.center {
    text-align: left;
    align-items: flex-start;
  }

  .page-home #programmi .plans {
    gap: 1.4rem;
  }

  /* CARD SCURE, BEN STACCATE DALLO SFONDO */
  .page-home #programmi .plan-card {
    background:
      radial-gradient(circle at top, #0f172a 0, #020617 62%);
    border-radius: 20px;
    border: 1px solid rgba(148, 163, 184, 0.55);
    box-shadow:
      0 18px 40px rgba(15, 23, 42, 0.85),
      0 0 0 1px rgba(15, 23, 42, 1);
    color: #e5e7eb;
  }

  .page-home #programmi .plan-card h3 {
    color: #f9fafb;
  }

  .page-home #programmi .plan-card .plan-tag {
    color: #cbd5f5;
  }

  .page-home #programmi .plan-list {
    color: #cbd5f5;
  }

  .page-home #programmi .plan-list li::marker {
    color: #22c55e;
  }

  .page-home #programmi .plan-note {
    color: #94a3b8;
  }

  /* PREMIUM ANCORA PIÙ IN RISALTO */
  .page-home #programmi .plan-card-premium {
    border-color: rgba(45, 212, 191, 0.9);
    box-shadow:
      0 22px 52px rgba(15, 23, 42, 0.9),
      0 0 26px rgba(45, 212, 191, 0.8);
    background:
      radial-gradient(circle at top, rgba(45, 212, 191, 0.28) 0, transparent 60%),
      radial-gradient(circle at bottom, #020617 0, #020617 70%);
  }

  .page-home #programmi .plan-card-premium .plan-tag {
    color: #a5f3fc;
  }
}
/* ==========================================================
   PROGRAMMI – FIX PULSANTE COACHING BASE (MOBILE)
   ========================================================== */
@media (max-width: 900px) {

  /* Pulsante del BASE reso visibile e leggibile */
  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-btn {
    background: #f8fafc !important; /* Bianco molto pulito */
    color: #0f172a !important;       /* Nero/blu molto scuro */
    border: 1px solid rgba(255, 255, 255, 0.75) !important;
    font-weight: 600;
    box-shadow:
      0 4px 12px rgba(255, 255, 255, 0.15),
      0 0 0 1px rgba(255, 255, 255, 0.4);
  }

  /* Hover su mobile (quando tappano) */
  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-btn:active {
    background: #e2e8f0 !important;
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.8),
      0 8px 20px rgba(255, 255, 255, 0.25);
  }
}
/* ==========================================================
   TIMELINE – VERSIONE MOBILE CON CARD CHIARE
   ========================================================== */
@media (max-width: 900px) {

  /* Slider orizzontale (già presente, non tocchiamo layout) */
  /*#come-funziona .timeline-steps {
    display: flex;
    flex-direction: row;
    gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.6rem 2rem;
    margin: 0 -1.6rem;
  }

  /* CARD BASE – CHIARA E LEGGERA */
  #come-funziona .timeline-step {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: center;

    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid rgba(203, 213, 225, 0.55);
    border-radius: 20px;
    padding: 1.8rem 1.4rem;

    opacity: 0.35;
    transform: scale(0.93);
    transition:
      opacity .28s ease,
      transform .28s ease,
      box-shadow .28s ease,
      background .3s ease;
  }

  /* Testi dentro la card */
  #come-funziona .timeline-step h3 {
    color: #0f172a;
    font-weight: 700;
    margin-bottom: 0.4rem;
  }

  #come-funziona .timeline-step p {
    color: #334155;
    line-height: 1.45;
  }

  /* Badge numerato */
  #come-funziona .timeline-step .step-badge {
    background: #0f172a;
    color: #f8fafc;
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
    display: inline-block;
  }

  /* SOLO CARD ATTIVA – glow elegante */
  #come-funziona .timeline-step.is-active {
    opacity: 1;
    transform: scale(1);
    background: linear-gradient(180deg, #ffffff, #f1f5f9);
    box-shadow:
      0 12px 35px rgba(15, 23, 42, 0.25),
      0 0 0 1px rgba(15, 23, 42, 0.1);
  }
}
/* ==========================================================
   TIMELINE – BADGE MOBILE IDENTICI A DESKTOP + GLOW ACTIVE
   ========================================================== */
@media (max-width: 900px) {

  /* BADGE BASE – IDENTICO AL DESKTOP */
  #come-funziona .timeline-step .step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 44px;
    height: 44px;

    border-radius: 50%;
    background: #0f172a;                  /* identico desktop */
    color: #ffffff;                       /* identico desktop */
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.12); /* identico desktop */

    transition:
      box-shadow .25s ease,
      transform .25s ease,
      opacity .25s ease;
  }

  /* BADGE ACTIVE – COME DESKTOP MA "ACCENSIONE" MOLTO PULITA */
  #come-funziona .timeline-step.is-active .step-badge {
    transform: scale(1.08);
    box-shadow:
      0 0 0 4px rgba(255, 255, 255, 0.1),
      0 4px 22px rgba(255, 255, 255, 0.22); 
    opacity: 1;
  }

  /* NON ACTIVE leggermente soft (come Apple Cards) */
  #come-funziona .timeline-step .step-badge {
    opacity: 0.5;
  }

  #come-funziona .timeline-step.is-active .step-badge {
    opacity: 1;
  }
}
/* ==========================================================
   TIMELINE MOBILE – STESSO STILE DEL DESKTOP, SOLO SLIDER
   ========================================================== */
@media (max-width: 900px) {

  /* niente override di colori / background qui! 
     lasciamo che usi esattamente lo stile desktop */

  /* container degli step → slider orizzontale */
 /* #come-funziona .timeline-steps {
    display: flex;
    flex-direction: row;
    gap: 1.4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.6rem 2rem;
    margin: 0 -1.6rem;
  }

  #come-funziona .timeline-steps::-webkit-scrollbar {
    height: 4px;
  }

  #come-funziona .timeline-steps::-webkit-scrollbar-track {
    background: transparent;
  }

  #come-funziona .timeline-steps::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #14b8a6);
  }

  /* ogni card occupa ~80% dello schermo e si aggancia al centro */
 /* #come-funziona .timeline-step {
    flex: 0 0 80%;
    max-width: 80%;
    scroll-snap-align: center;

    /* NON cambiamo background / colori: 
       usiamo quelli del desktop */

    opacity: 0.45;                /* tutte un po' soft */
    transform: scale(0.96);
    transition:
      opacity 0.25s ease-out,
      transform 0.25s ease-out,
      box-shadow 0.25s ease-out;
  } 

  /* card attiva: stessi colori del desktop, solo un filo più presente */
  #come-funziona .timeline-step.is-active {
    opacity: 1;
    transform: scale(1);
    /* se vuoi un po' più di glow puoi lasciare questa shadow,
       se è troppo, toglila */
    box-shadow:
      0 0 0 0 rgba(0,0,0,0),
      0 0 30px rgba(34, 211, 238, 0.55);
  }

  /* badge numerato: usa lo stile desktop, nessun override di colori.
     qui mettiamo solo una transizione/moltiplicatore leggero. */
  #come-funziona .timeline-step .step-badge {
    transition:
      transform 0.25s ease-out,
      opacity 0.25s ease-out;
    opacity: 0.6;
  }

  #come-funziona .timeline-step.is-active .step-badge {
    opacity: 1;
    transform: scale(1.06);
  }
}
/* ==========================================================
   TIMELINE – BADGE MOBILE IDENTICI AL DESKTOP
   ========================================================== */
@media (max-width: 900px) {

  /* stato base: identico alle card desktop */
  #come-funziona .timeline-step .step-badge {
    width: 46px;
    height: 46px;
    border-radius: var(--radius-pill);
    border: 1px solid rgba(209, 213, 219, 0.98);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 600;
    color: #111827;
    background: linear-gradient(145deg, #ffffff, #c9cfdd);
    box-shadow:
      0 0 22px rgba(255, 255, 255, 0.95),
      0 16px 32px rgba(15, 23, 42, 0.7);
  }

  /* stato ACTIVE: stesso verdino/azzurro del desktop */
  #come-funziona .timeline-step.is-active .step-badge {
    border-color: transparent;
    color: #021012;
    background: radial-gradient(circle at top, var(--accent-aqua), var(--accent-petrol));
    box-shadow:
      0 0 30px rgba(25, 218, 213, 0.95),
      0 18px 38px rgba(15, 23, 42, 0.9);
  }
}
/* ==========================================================
   COACHING CARDS – METAL EFFECT (MOBILE ONLY)
   ========================================================== */
@media (max-width: 900px) {

  /* BASE — METALLO ARGENTO */
  .plan-card-base {
    background: 
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.95), rgba(204,204,204,0.25)),
      linear-gradient(135deg, #f9fafb 0%, #dfe3e7 30%, #babec4 60%, #e6e8eb 100%);
    border: 1px solid rgba(230, 230, 230, 0.9);
    box-shadow:
      0 0 32px rgba(255,255,255,0.4),
      inset 0 0 18px rgba(255,255,255,0.45),
      inset 0 0 22px rgba(180,180,180,0.35),
      0 10px 28px rgba(0,0,0,0.45);
    color: #0f172a;
  }

  .plan-card-base h3 {
    color: #0f172a;
    font-weight: 700;
  }

  .plan-card-base p,
  .plan-card-base li {
    color: #1e293b;
  }

  .plan-card-base .plan-tag {
    background: rgba(255,255,255,0.8);
    color: #0f172a;
    border: 1px solid rgba(200,200,200,0.7);
    font-weight: 600;
  }

  .plan-card-base .plan-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(130,130,130,0.6) !important;
    box-shadow:
      0 8px 22px rgba(255,255,255,0.4),
      0 0 0 1px rgba(255,255,255,0.7);
  }


  /* PREMIUM — METALLO VERDE PETROLIO */
  .plan-card-premium {
    background:
      radial-gradient(circle at 25% 15%, rgba(45,212,191,0.5), rgba(15, 212, 218, 0.15)),
      linear-gradient(145deg, #0e2c2e 0%, #0f3c3f 25%, #0f4d51 50%, #157f87 80%, #49eecd 100%);
    border: 1px solid rgba(45,212,191,0.75);
    box-shadow:
      0 0 36px rgba(45,212,191,0.45),
      inset 0 0 20px rgba(45,212,191,0.35),
      inset 0 0 28px rgba(15,23,42,0.65),
      0 10px 28px rgba(0,0,0,0.55);
    color: #e6fffa;
  }

  .plan-card-premium h3 {
    color: #f0fdfa;
    font-weight: 700;
  }

  .plan-card-premium p,
  .plan-card-premium li {
    color: #ccfbf1;
  }

  .plan-card-premium .plan-tag {
    background: rgba(45,212,191,0.25);
    color: #0f766e;
    border: 1px solid rgba(45,212,191,0.6);
    font-weight: 600;
  }

  .plan-card-premium .plan-btn {
    background: linear-gradient(135deg, #22c55e, #14b8a6) !important;
    color: #042f2c !important;
    border: 1px solid rgba(45,212,191,0.6) !important;
    box-shadow:
      0 8px 25px rgba(45,212,191,0.55),
      0 0 0 1px rgba(45,212,191,0.7);
  }

  /* Arrotondamenti e profondità uniformi */
  .plan-card-base,
  .plan-card-premium {
    border-radius: 22px;
    padding: 1.8rem 1.5rem;
    backdrop-filter: saturate(220%) blur(24px);
  }
}
/* ==========================================================
   COACHING CARDS – METAL EFFECT (MOBILE ONLY)
   ========================================================== */
@media (max-width: 900px) {

  /* ---------------------------------------------------------
     COACHING BASE → LAStra metallica ARGENTO
  --------------------------------------------------------- */
  .plan-card:not(.plan-card-premium) {
    background:
      radial-gradient(circle at 20% 20%, rgba(255,255,255,0.9), rgba(210,210,210,0.25)),
      linear-gradient(135deg, #f5f5f5 0%, #e4e7eb 25%, #c8ccd3 50%, #f0f2f5 100%);
    border: 1px solid rgba(220,220,220,0.8);
    box-shadow:
      0 0 28px rgba(255,255,255,0.45),
      inset 0 0 22px rgba(255,255,255,0.45),
      inset 0 0 30px rgba(160,160,160,0.35),
      0 12px 28px rgba(0,0,0,0.45);
    color: #0f172a;
    backdrop-filter: saturate(180%) blur(18px);
  }

  .plan-card:not(.plan-card-premium) h3,
  .plan-card:not(.plan-card-premium) p,
  .plan-card:not(.plan-card-premium) li {
    color: #1e293b;
  }

  .plan-card:not(.plan-card-premium) .plan-btn {
    background: #ffffff !important;
    color: #0f172a !important;
    border: 1px solid rgba(140,140,140,0.4) !important;
    box-shadow:
      0 8px 18px rgba(255,255,255,0.35),
      0 0 0 1px rgba(255,255,255,0.7);
  }


  /* ---------------------------------------------------------
     COACHING PREMIUM → LASTRA METAL VERDE PETROLIO
  --------------------------------------------------------- */
  .plan-card.plan-card-premium {
    background:
      radial-gradient(circle at 25% 18%, rgba(45,212,191,0.55), rgba(15, 212, 218, 0.20)),
      linear-gradient(135deg, #0b2426 0%, #0e4044 25%, #115d63 55%, #1ba29c 85%, #4bf2d3 100%);
    border: 1px solid rgba(45,212,191,0.7);
    box-shadow:
      0 0 40px rgba(45,212,191,0.45),
      inset 0 0 26px rgba(45,212,191,0.28),
      inset 0 0 36px rgba(0,0,0,0.55),
      0 12px 32px rgba(0,0,0,0.55);
    color: #e6fffa;
    backdrop-filter: saturate(220%) blur(20px);
  }

  .plan-card.plan-card-premium h3 {
    color: #f0fdfa;
  }

  .plan-card.plan-card-premium p,
  .plan-card.plan-card-premium li {
    color: #ccfbf1;
  }

  .plan-card.plan-card-premium .plan-btn {
    background: linear-gradient(135deg, #22c55e, #14b8a6) !important;
    color: #042f2c !important;
    border: 1px solid rgba(45,212,191,0.55) !important;
    box-shadow:
      0 8px 25px rgba(45,212,191,0.55),
      0 0 0 1px rgba(45,212,191,0.65);
  }
}
/* ==========================================================
   PROGRAMMI – CARD METALLICHE (BASE ARGENTO / PREMIUM VERDE)
   APPLICATO FINO A TABLET (MAX 1024PX)
   ========================================================== */
@media (max-width: 1024px) {

  /* ----------------- COACHING BASE → ARGENTO ----------------- */
  .page-home #programmi .plan-card:not(.plan-card-premium) {
    background:
      /* riflesso forte in alto a sinistra */
      radial-gradient(circle at 10% 0%, rgba(255,255,255,0.95) 0, rgba(255,255,255,0.0) 55%),
      /* banda “spazzolata” centrale */
      linear-gradient(120deg, #f9fafb 0%, #e5e7eb 20%, #cbd0d7 45%, #f3f4f6 70%, #d4d7de 100%);
    border-radius: 22px;
    border: 1px solid rgba(226,232,240,0.9);
    box-shadow:
      0 0 30px rgba(255,255,255,0.45),
      inset 0 0 20px rgba(255,255,255,0.55),
      inset 0 0 30px rgba(148,163,184,0.35),
      0 12px 26px rgba(15,23,42,0.65);
    color: #0f172a;
    backdrop-filter: saturate(200%) blur(18px);
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) h3 {
    color: #020617;
    font-weight: 700;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) p,
  .page-home #programmi .plan-card:not(.plan-card-premium) li {
    color: #111827;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-note {
    color: #111827;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-btn {
    background: #ffffff !important;
    color: #020617 !important;
    border: 1px solid rgba(148,163,184,0.7) !important;
    box-shadow:
      0 10px 24px rgba(15,23,42,0.4),
      0 0 0 1px rgba(255,255,255,0.8);
    font-weight: 600;
  }


  /* --------------- COACHING PREMIUM → VERDE METAL ------------- */
  .page-home #programmi .plan-card.plan-card-premium {
    background:
      /* highlight chiaro in alto */
      radial-gradient(circle at 10% -10%, rgba(45,212,191,0.8) 0, rgba(45,212,191,0) 55%),
      /* lama metal verde */
      linear-gradient(135deg, #022c30 0%, #064047 20%, #0b5158 45%, #11908f 75%, #4df2d4 100%);
    border-radius: 22px;
    border: 1px solid rgba(45,212,191,0.7);
    box-shadow:
      0 0 40px rgba(45,212,191,0.55),
      inset 0 0 26px rgba(45,212,191,0.35),
      inset 0 0 40px rgba(15,23,42,0.8),
      0 14px 30px rgba(15,23,42,0.9);
    color: #e6fffa;
    backdrop-filter: saturate(220%) blur(20px);
  }

  .page-home #programmi .plan-card.plan-card-premium h3 {
    color: #f0fdfa;
    font-weight: 700;
  }

  .page-home #programmi .plan-card.plan-card-premium p,
  .page-home #programmi .plan-card.plan-card-premium li {
    color: #ccfbf1;
  }

  .page-home #programmi .plan-card.plan-card-premium .plan-note {
    color: #a5f3fc;
  }

  .page-home #programmi .plan-card.plan-card-premium .plan-btn {
    background: linear-gradient(135deg, #22c55e, #14b8a6) !important;
    color: #022c22 !important;
    border: 1px solid rgba(45,212,191,0.7) !important;
    box-shadow:
      0 10px 28px rgba(16,185,129,0.65),
      0 0 0 1px rgba(45,212,191,0.8);
    font-weight: 600;
  }

  /* padding e profondità uniformi */
  .page-home #programmi .plan-card {
    padding: 1.8rem 1.5rem;
  }
}
/* ==========================================================
   PREMIUM METAL CARD (MOBILE) — VERSIONE POTENZIATA
   ========================================================== */
@media (max-width: 1366px) {

  .page-home #programmi .plan-card.plan-card-premium {
    position: relative;
    overflow: hidden;

    background:
      /* glow in alto */
      radial-gradient(circle at 10% -10%, rgba(60, 255, 225, 0.55), rgba(0,0,0,0) 55%),
      /* superficie metallica */
      linear-gradient(135deg,
        #022c30 0%,
        #064047 15%,
        #0b5158 35%,
        #0d6f7a 55%,
        #13a79d 75%,
        #4df2d4 100%
      );

    border-radius: 22px;
    border: 1px solid rgba(45,212,191,0.85);

    box-shadow:
      0 0 40px rgba(45,212,191,0.6),
      inset 0 0 32px rgba(45,212,191,0.25),
      inset 0 0 60px rgba(15,23,42,0.9),
      0 14px 34px rgba(15,23,42,0.9);

    backdrop-filter: saturate(220%) blur(20px);
  }

  /* TESTI molto più leggibili */
  .page-home #programmi .plan-card.plan-card-premium h3 {
    color: #f0fdfa;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .page-home #programmi .plan-card.plan-card-premium p,
  .page-home #programmi .plan-card.plan-card-premium li {
    color: #e0fffa;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  /* CTA leggibile */
  .page-home #programmi .plan-card.plan-card-premium .plan-btn {
    background: linear-gradient(135deg, #22c55e, #14b8a6) !important;
    color: #022c22 !important;
    border: 1px solid rgba(45,212,191,0.8) !important;
    box-shadow:
      0 12px 30px rgba(16,185,129,0.75),
      0 0 0 1px rgba(45,212,191,0.95);
  }

  /* =================== METAL GLARE (ANIMATO) =================== */
  .page-home #programmi .plan-card.plan-card-premium::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 220%;
    height: 180%;
    background: linear-gradient(
      115deg,
      rgba(255,255,255,0.0) 40%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.0) 60%
    );
    opacity: 0.55;
    transform: rotate(5deg);
    pointer-events: none;
    animation: premiumMetalSweep 6s infinite linear;
  }

  @keyframes premiumMetalSweep {
    0% { transform: translateX(-40%) rotate(5deg); }
    100% { transform: translateX(40%) rotate(5deg); }
  }

  /* =================== PARALLAX RIFLESSO DINAMICO =================== */
  .page-home #programmi .plan-card.plan-card-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0) 55%
    );
    opacity: 0.35;
    transition: background-position 0.05s linear;
    pointer-events: none;
  }
}
/* ==========================================================
   PROGRAMMI – CARTE METAL (BASE ARGENTO + PREMIUM VERDE)
   CON GLARE + RIFLESSO (MOBILE/TABLET)
   ========================================================== */
@media (max-width: 1366px) {

  /* ----------------- BASE → ARGENTO METAL CON GLARE ----------------- */
  .page-home #programmi .plan-card:not(.plan-card-premium) {
    position: relative;
    overflow: hidden;

    background:
      /* highlight forte in alto a sinistra */
      radial-gradient(circle at 10% -10%, rgba(255,255,255,0.95) 0, rgba(255,255,255,0) 55%),
      /* superficie metal spazzolata */
      linear-gradient(135deg,
        #f9fafb 0%,
        #e4e7eb 18%,
        #cdd1d8 40%,
        #f3f4f6 68%,
        #d4d7de 100%
      );
    border-radius: 22px;
    border: 1px solid rgba(226,232,240,0.9);

    box-shadow:
      0 0 30px rgba(255,255,255,0.45),
      inset 0 0 22px rgba(255,255,255,0.55),
      inset 0 0 34px rgba(148,163,184,0.35),
      0 12px 26px rgba(15,23,42,0.7);

    color: #0f172a;
    backdrop-filter: saturate(200%) blur(18px);
    padding: 1.8rem 1.5rem;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) h3 {
    color: #020617;
    font-weight: 700;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) p,
  .page-home #programmi .plan-card:not(.plan-card-premium) li,
  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-note {
    color: #111827;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-btn {
    background: #ffffff !important;
    color: #020617 !important;
    border: 1px solid rgba(148,163,184,0.7) !important;
    box-shadow:
      0 10px 24px rgba(15,23,42,0.4),
      0 0 0 1px rgba(255,255,255,0.8);
    font-weight: 600;
  }

  /* glare argento che scorre */
  .page-home #programmi .plan-card:not(.plan-card-premium)::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 220%;
    height: 180%;
    background: linear-gradient(
      120deg,
      rgba(255,255,255,0.0) 40%,
      rgba(255,255,255,0.22) 50%,
      rgba(255,255,255,0.0) 60%
    );
    opacity: 0.6;
    transform: rotate(5deg);
    pointer-events: none;
    animation: baseMetalSweep 7s infinite linear;
  }

  @keyframes baseMetalSweep {
    0% { transform: translateX(-40%) rotate(5deg); }
    100% { transform: translateX(40%) rotate(5deg); }
  }

  /* riflesso dinamico che usa --mx/--my */
  .page-home #programmi .plan-card:not(.plan-card-premium)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.25),
      rgba(255,255,255,0) 55%
    );
    opacity: 0.4;
    transition: background-position 0.05s linear;
    pointer-events: none;
  }


  /* ----------------- PREMIUM → VERDE METAL (come prima) ----------------- */
  .page-home #programmi .plan-card.plan-card-premium {
    position: relative;
    overflow: hidden;

    background:
      radial-gradient(circle at 10% -10%, rgba(60, 255, 225, 0.55), rgba(0,0,0,0) 55%),
      linear-gradient(135deg,
        #022c30 0%,
        #064047 15%,
        #0b5158 35%,
        #0d6f7a 55%,
        #13a79d 75%,
        #4df2d4 100%
      );
    border-radius: 22px;
    border: 1px solid rgba(45,212,191,0.85);

    box-shadow:
      0 0 40px rgba(45,212,191,0.6),
      inset 0 0 32px rgba(45,212,191,0.25),
      inset 0 0 60px rgba(15,23,42,0.9),
      0 14px 34px rgba(15,23,42,0.9);

    backdrop-filter: saturate(220%) blur(20px);
    padding: 1.8rem 1.5rem;
  }

  .page-home #programmi .plan-card.plan-card-premium h3 {
    color: #f0fdfa;
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .page-home #programmi .plan-card.plan-card-premium p,
  .page-home #programmi .plan-card.plan-card-premium li {
    color: #e0fffa;
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .page-home #programmi .plan-card.plan-card-premium .plan-note {
    color: #a5f3fc;
  }

  .page-home #programmi .plan-card.plan-card-premium .plan-btn {
    background: linear-gradient(135deg, #22c55e, #14b8a6) !important;
    color: #022c22 !important;
    border: 1px solid rgba(45,212,191,0.8) !important;
    box-shadow:
      0 12px 30px rgba(16,185,129,0.75),
      0 0 0 1px rgba(45,212,191,0.95);
    font-weight: 600;
  }

  .page-home #programmi .plan-card.plan-card-premium::before {
    content: "";
    position: absolute;
    top: -40%;
    left: -60%;
    width: 220%;
    height: 180%;
    background: linear-gradient(
      115deg,
      rgba(255,255,255,0.0) 40%,
      rgba(255,255,255,0.18) 50%,
      rgba(255,255,255,0.0) 60%
    );
    opacity: 0.55;
    transform: rotate(5deg);
    pointer-events: none;
    animation: premiumMetalSweep 6s infinite linear;
  }

  @keyframes premiumMetalSweep {
    0% { transform: translateX(-40%) rotate(5deg); }
    100% { transform: translateX(40%) rotate(5deg); }
  }

  .page-home #programmi .plan-card.plan-card-premium::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 50%),
      rgba(255,255,255,0.22),
      rgba(255,255,255,0) 55%
    );
    opacity: 0.35;
    transition: background-position 0.05s linear;
    pointer-events: none;
  }
}
/* ==========================================================
   COACHING BASE – LAStra ARGENTO "GIOIELLO"
   (override forte, sopra tutto il resto)
   ========================================================== */
@media (max-width: 1366px) {
  .page-home #programmi .plan-card:not(.plan-card-premium) {
    position: relative;
    overflow: hidden;

    /* SUPERFICIE METAL ARGENTO */
    background:
      /* highlight forte in alto a sinistra */
      radial-gradient(circle at 0% 0%, rgba(255,255,255,1) 0, rgba(255,255,255,0.0) 38%),
      /* riflesso centrale */
      radial-gradient(circle at 70% 30%, rgba(255,255,255,0.8) 0, rgba(249,250,251,0.0) 55%),
      /* profondità scura in basso */
      radial-gradient(circle at 50% 120%, rgba(15,23,42,0.55) 0, rgba(15,23,42,0.0) 55%),
      /* lama spazzolata */
      linear-gradient(135deg,
        #f9fafb 0%,
        #e5e7eb 18%,
        #cdd1d8 40%,
        #f3f4f6 68%,
        #d4d7de 100%
      ) !important;

    border-radius: 24px;
    border: 1px solid rgba(229,231,235,0.95) !important;

    box-shadow:
      0 0 40px rgba(255,255,255,0.55),
      inset 0 0 26px rgba(255,255,255,0.7),
      inset 0 0 40px rgba(148,163,184,0.45),
      0 16px 32px rgba(15,23,42,0.85) !important;

    backdrop-filter: saturate(220%) blur(18px);
    padding: 1.9rem 1.6rem;
    color: #020617;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) h3 {
    color: #020617;
    font-weight: 800;
    letter-spacing: -0.01em;
  }

  .page-home #programmi .plan-card:not(.plan-card-premium) p,
  .page-home #programmi .plan-card:not(.plan-card-premium) li,
  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-note {
    color: #111827;
    text-shadow: 0 0 4px rgba(249,250,251,0.6);
  }

  /* bottone ben leggibile sopra il metallo */
  .page-home #programmi .plan-card:not(.plan-card-premium) .plan-btn {
    background: #ffffff !important;
    color: #020617 !important;
    border: 1px solid rgba(148,163,184,0.8) !important;
    box-shadow:
      0 10px 26px rgba(15,23,42,0.55),
      0 0 0 1px rgba(255,255,255,0.9) !important;
    font-weight: 600;
  }

  /* GLARE ANIMATO ARGENTO */
  .page-home #programmi .plan-card:not(.plan-card-premium)::before {
    content: "";
    position: absolute;
    top: -45%;
    left: -60%;
    width: 230%;
    height: 190%;
    background: linear-gradient(
      115deg,
      rgba(255,255,255,0.0) 40%,
      rgba(255,255,255,0.35) 50%,
      rgba(255,255,255,0.0) 60%
    );
    opacity: 0.7;
    transform: rotate(5deg);
    pointer-events: none;
    animation: baseJewelSweep 7s infinite linear;
  }

  @keyframes baseJewelSweep {
    0%   { transform: translateX(-45%) rotate(5deg); }
    100% { transform: translateX(45%)  rotate(5deg); }
  }

  /* RIFLESSO CHE SEGUE IL DITO (usa --mx/--my dal JS) */
  .page-home #programmi .plan-card:not(.plan-card-premium)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(
      circle at var(--mx, 50%) var(--my, 40%),
      rgba(255,255,255,0.45),
      rgba(255,255,255,0) 55%
    );
    opacity: 0.6;
    transition: background-position 0.04s linear;
    pointer-events: none;
  }
}
/* --- UNIFORMITÀ CARD BASE & PREMIUM (Home) --- */

/* Entrambe le card stessa altezza grazie al layout interno */
.page-home #programmi .plan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* spinge il bottone giù in modo identico */
  min-height: 520px; /* imposta un’altezza uguale per entrambe */
}

/* Contenuto centrale che cresce senza spingere il bottone */
.page-home #programmi .plan-card .plan-note,
.page-home #programmi .plan-card ul {
  margin-bottom: 1.2rem;
}

/* Il ribbon Premium non deve spingere tutto verso il basso */
.page-home #programmi .plan-card.plan-card-premium .plan-ribbon {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  margin: 0; /* rimuove margine che distorce l’altezza */
}

/* Mantiene i bottoni perfettamente allineati */
.page-home #programmi .plan-card .plan-btn {
  margin-top: auto;
}
/* ==========================================
   CARD BASE – STILI UNIFORMATI ALLA PREMIUM
   (ma con colori scuri/neri)
   ========================================== */

/* Titolo card Base – stessa misura del Premium */
.page-home #programmi .plan-card:not(.plan-card-premium) h3 {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #0f172a; /* quasi nero */
}

/* Testi normali e lista – come Premium ma scuri */
.page-home #programmi .plan-card:not(.plan-card-premium) p,
.page-home #programmi .plan-card:not(.plan-card-premium) li {
    font-size: 1.05rem;
    line-height: 1.45;
    color: #1e293b; /* grigio scuro leggibile */
}

/* Descrizione inferiore */
.page-home #programmi .plan-card:not(.plan-card-premium) .plan-note {
    color: #334155; /* leggermente più chiaro */
}

/* Tag Base (sottotitolo sotto h3) */
.page-home #programmi .plan-card:not(.plan-card-premium) .plan-tag {
    font-size: 0.95rem;
    font-weight: 600;
    color: #0f172a;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(200,200,200,0.7);
}

/* Lista puntata (bullet visibili) */
.page-home #programmi .plan-card:not(.plan-card-premium) .plan-list li::marker {
    color: #0f172a;
}

/* Bottone Base — mantenuto com'è ma uniformato al layout */
.page-home #programmi .plan-card:not(.plan-card-premium) .plan-btn {
    font-size: 1rem;
    font-weight: 600;
}
/* ==========================================================
   BOTTONE PREMIUM = UGUALE AL BASE
   ========================================================== */

.page-home #programmi .plan-card.plan-card-premium .plan-btn {
    background: #ffffff !important;
    color: #0f172a !important; /* testo scuro */
    border: 1px solid rgba(130,130,130,0.6) !important;
    box-shadow:
      0 8px 22px rgba(255,255,255,0.4),
      0 0 0 1px rgba(255,255,255,0.7);
}
/* ==========================================================
   BADGE "PREMIUM" DORATO (METAL GOLD)
   ========================================================== */

.plan-card-premium .plan-ribbon {
    background: linear-gradient(135deg,
      #f7e8c8 0%,
      #e5c77f 20%,
      #d4a94a 40%,
      #c89a3b 60%,
      #e9d08b 80%,
      #fff3d6 100%
    );
    color: #4a3b0f !important;
    border: 1px solid rgba(180,150,70,0.8);

    /* effetto glossy */
    box-shadow:
      inset 0 1px 2px rgba(255,255,255,0.9),
      inset 0 -2px 4px rgba(0,0,0,0.18),
      0 0 12px rgba(255,215,0,0.35);
}
/* ==========================================================
   LEONARDO È DIVERSO – COLORI DIVERSI PER OGNI CARD ATTIVA
   ========================================================== */

/* testo sempre leggibile */
.section-different .different-item {
  color: #e5e7eb;
}
.section-different .different-item h3 {
  color: #f9fafb;
}
.section-different .different-item .different-tag {
  color: rgba(148, 163, 184, 0.96);
}

/* CARD 1 – PRESENTE → ACQUA / VERDE */
.section-different .different-right .different-item:nth-child(1).is-active {
  background:
    radial-gradient(circle at 0% 0%, rgba(45,212,191,0.35), transparent 60%),
    linear-gradient(135deg, #022c30, #0f766e);
  border-color: rgba(45,212,191,0.95);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.95),
    0 0 32px rgba(45,212,191,0.85),
    inset 0 0 0 1px rgba(226,232,240,0.4);
}

/* CARD 2 – LIBERA → BLU */
.section-different .different-right .different-item:nth-child(2).is-active {
  background:
    radial-gradient(circle at 0% 0%, rgba(59,130,246,0.35), transparent 60%),
    linear-gradient(135deg, #0b1f3b, #2563eb);
  border-color: rgba(59,130,246,0.95);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.95),
    0 0 32px rgba(59,130,246,0.85),
    inset 0 0 0 1px rgba(226,232,240,0.4);
}

/* CARD 3 – DINAMICA → VIOLA */
.section-different .different-right .different-item:nth-child(3).is-active {
  background:
    radial-gradient(circle at 0% 0%, rgba(168,85,247,0.4), transparent 60%),
    linear-gradient(135deg, #1e1030, #8b5cf6);
  border-color: rgba(168,85,247,0.95);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.95),
    0 0 32px rgba(168,85,247,0.85),
    inset 0 0 0 1px rgba(226,232,240,0.4);
}

/* CARD 4 – CONCRETA → AMBRA / ORO CALDO */
.section-different .different-right .different-item:nth-child(4).is-active {
  background:
    radial-gradient(circle at 0% 0%, rgba(251,191,36,0.45), transparent 60%),
    linear-gradient(135deg, #2b1403, #f59e0b);
  border-color: rgba(251,191,36,0.95);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.95),
    0 0 32px rgba(251,191,36,0.85),
    inset 0 0 0 1px rgba(226,232,240,0.4);
}
/* ==========================================================
   LEONARDO È DIVERSO – COLORI DIVERSI PER OGNI CARD ATTIVA
   (DESKTOP + MOBILE)
   ========================================================== */

/* testo sempre leggibile */
.section-different .different-item {
  color: #e5e7eb;
}
.section-different .different-item h3 {
  color: #f9fafb;
}
.section-different .different-item .different-tag {
  color: rgba(148, 163, 184, 0.96);
}

/* ---------- DESKTOP (>= 901px) ---------- */
@media (min-width: 901px) {

  /* CARD 1 – ACQUA / VERDE */
  .section-different .different-right .different-item:nth-child(1).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(45,212,191,0.35), transparent 60%),
      linear-gradient(135deg, #022c30, #0f766e);
    border-color: rgba(45,212,191,0.95);
    box-shadow:
      0 24px 60px rgba(0,0,0,0.95),
      0 0 32px rgba(45,212,191,0.85),
      inset 0 0 0 1px rgba(226,232,240,0.4);
  }

  /* CARD 2 – BLU */
  .section-different .different-right .different-item:nth-child(2).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(59,130,246,0.35), transparent 60%),
      linear-gradient(135deg, #0b1f3b, #2563eb);
    border-color: rgba(59,130,246,0.95);
    box-shadow:
      0 24px 60px rgba(0,0,0,0.95),
      0 0 32px rgba(59,130,246,0.85),
      inset 0 0 0 1px rgba(226,232,240,0.4);
  }

  /* CARD 3 – VIOLA */
  .section-different .different-right .different-item:nth-child(3).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(168,85,247,0.4), transparent 60%),
      linear-gradient(135deg, #1e1030, #8b5cf6);
    border-color: rgba(168,85,247,0.95);
    box-shadow:
      0 24px 60px rgba(0,0,0,0.95),
      0 0 32px rgba(168,85,247,0.85),
      inset 0 0 0 1px rgba(226,232,240,0.4);
  }

  /* CARD 4 – AMBRA / ORO CALDO */
  .section-different .different-right .different-item:nth-child(4).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(251,191,36,0.45), transparent 60%),
      linear-gradient(135deg, #2b1403, #f59e0b);
    border-color: rgba(251,191,36,0.95);
    box-shadow:
      0 24px 60px rgba(0,0,0,0.95),
      0 0 32px rgba(251,191,36,0.85),
      inset 0 0 0 1px rgba(226,232,240,0.4);
  }
}

/* ---------- MOBILE (<= 900px) ---------- */
@media (max-width: 900px) {

  /* base: card sticky scure, tutte uguali (resta quello che hai già) */

  /* CARD 1 – ACQUA / VERDE */
  .section-different .different-right .different-item:nth-child(1).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(45,212,191,0.35), transparent 60%),
      linear-gradient(135deg, #022c30, #0f766e);
    border-color: rgba(45,212,191,0.95);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.9),
      0 0 26px rgba(45,212,191,0.7);
  }

  /* CARD 2 – BLU */
  .section-different .different-right .different-item:nth-child(2).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(59,130,246,0.35), transparent 60%),
      linear-gradient(135deg, #0b1f3b, #2563eb);
    border-color: rgba(59,130,246,0.95);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.9),
      0 0 26px rgba(59,130,246,0.7);
  }

  /* CARD 3 – VIOLA */
  .section-different .different-right .different-item:nth-child(3).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(168,85,247,0.4), transparent 60%),
      linear-gradient(135deg, #1e1030, #8b5cf6);
    border-color: rgba(168,85,247,0.95);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.9),
      0 0 26px rgba(168,85,247,0.7);
  }

  /* CARD 4 – AMBRA / ORO CALDO */
  .section-different .different-right .different-item:nth-child(4).is-active {
    background:
      radial-gradient(circle at 0% 0%, rgba(251,191,36,0.45), transparent 60%),
      linear-gradient(135deg, #2b1403, #f59e0b);
    border-color: rgba(251,191,36,0.95);
    box-shadow:
      0 18px 40px rgba(0,0,0,0.9),
      0 0 26px rgba(251,191,36,0.7);
  }
}
/* Icona interna (Lucide) dentro il "disco" metal */
.different-icon i,
.different-icon svg {
  position: relative;
  z-index: 1;
  display: block;
}

.different-icon svg {
  width: 18px;
  height: 18px;
  stroke: #e5f4ff;
  stroke-width: 1.8;
}

/* Quando la card è attiva → l’icona "spinge" leggermente */
.different-item.is-active .different-icon {
  transform: scale(1.08);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.9),
    0 10px 20px rgba(15, 23, 42, 1),
    0 0 26px rgba(34, 211, 238, 0.9);
}

/* piccolo "pulse" quando una card diventa attiva */
@keyframes iconPulse {
  0% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

.different-item.is-active .different-icon {
  animation: iconPulse 0.55s ease-out;
}
/* RESET icone "Leonardo è diverso": niente cerchio, niente glow */
.different-icon {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease-out;
}

/* Lucide pulite */
.different-icon svg {
  width: 22px !important;
  height: 22px !important;
  stroke: #e5e7eb !important;
  stroke-width: 1.7;
}

/* assicuriamoci di togliere qualsiasi box-shadow/animazione vecchia */
.different-item.is-active .different-icon {
  box-shadow: none;
}
/* Mini-animazione tipo "gif": leggera oscillazione */
@keyframes iconWiggle {
  0%   { transform: translateY(0); }
  20%  { transform: translateY(-2px); }
  40%  { transform: translateY(0); }
  60%  { transform: translateY(2px); }
  80%  { transform: translateY(0); }
  100% { transform: translateY(0); }
}

/* quando la card è attiva, SOLO l'icona si muove un po' */
.different-item.is-active .different-icon svg {
  animation: iconWiggle 1.3s ease-in-out infinite;
}
/* ICONA PULITA SENZA SFONDO */
.different-icon {
  width: auto;
  height: auto;
  background: none !important;
  padding: 0;
  border-radius: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  transform: none;
}

/* ICONA SVG – PIÙ GRANDE E PIÙ LIMPIDA */
.different-icon svg {
  width: 34px !important;   /* ← DIMENSIONE MAGGIORE */
  height: 34px !important;
  stroke: #ffffff !important;
  stroke-width: 2.2;         /* più marcata, più presente */
}
/* MINI OSSILLAZIONE – molto pulita e elegante */
@keyframes iconWiggle {
  0%   { transform: translateY(0); }
  25%  { transform: translateY(-2px); }
  50%  { transform: translateY(0); }
  75%  { transform: translateY(2px); }
  100% { transform: translateY(0); }
}

/* SI MUOVE SOLO QUANDO LA CARD È ATTIVA */
.different-item.is-active .different-icon svg {
  animation: iconWiggle 1.6s ease-in-out infinite;
}
/* RIMOZIONE TOTALE DI QUALSIASI SFONDO ICONA */
.different-icon {
  background: none !important;
  box-shadow: none !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* L'icona SVG nuda e pura */
.different-icon svg {
  background: none !important;
  filter: none !important;
  box-shadow: none !important;
  width: 36px !important;
  height: 36px !important;
  stroke: #ffffff !important;
  stroke-width: 2.2;
}
/* --- LEONARDO È DIVERSO – icone senza sfondo/glow --- */

/* niente cerchio, niente ombra dietro l'icona */
.different-icon {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
  position: static;
  overflow: visible;
}

/* rimuove del tutto il “disco” che gira */
.different-icon::before {
  content: none !important;
  display: none !important;
}

/* solo l’SVG, più grande e pulito */
.different-icon svg {
  width: 32px !important;
  height: 32px !important;
  stroke: #ffffff !important;
  stroke-width: 2.1;
  filter: none !important;
  box-shadow: none !important;
}
/* ============================
   CHI SONO — MOBILE REDESIGN
   ============================ */

@media (max-width: 880px) {
  
  /* container più stretto e più respiro */
  .page-chi-sono .hero-inner {
    grid-template-columns: 1fr !important;
    gap: 2.5rem !important;
    text-align: center;
  }

  /* FOTO */
  .page-chi-sono .hero-photo img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto;
    box-shadow:
      0 8px 22px rgba(0,0,0,0.35),
      0 0 0 2px rgba(255,255,255,0.2);
  }

  /* TITOLI */
  .page-chi-sono .hero-text h1 {
    font-size: 1.85rem;
    line-height: 1.25;
  }

  .page-chi-sono .hero-text p.hero-subtitle {
    font-size: 1.1rem;
    margin-top: 0.75rem;
    margin-bottom: 1.5rem;
  }

  /* CTA */
  .page-chi-sono .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
  }

  .page-chi-sono .hero-actions .btn {
    width: 100%;
    padding: 1rem 1.2rem;
    font-size: 1.05rem;
  }
}
/* ==========================================================
   CHI SONO – VERSIONE MOBILE
   ========================================================== */

@media (max-width: 900px) {

  /* Layout a colonna, più aria */
  .page-chi-sono .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 2.4rem;
    align-items: flex-start;
    padding-top: 2.2rem;
  }

  /* Foto prima del testo su mobile */
  .page-chi-sono .hero-media {
    order: -1;
    display: flex;
    justify-content: center;
  }

  .page-chi-sono .hero-photo {
    max-width: 280px;
    width: 100%;
  }

  .page-chi-sono .hero-photo img {
    max-width: 100%;
    border-radius: 999px; /* effetto “ritratto” */
  }

  /* Testo più compatto e leggibile */
  .page-chi-sono .hero-text {
    max-width: 640px;
    margin: 0 auto;
    text-align: left;
  }

  .page-chi-sono .hero-text h1 {
    font-size: clamp(1.8rem, 5.4vw, 2.25rem);
    line-height: 1.25;
    margin-bottom: 0.9rem;
  }

  .page-chi-sono .hero-text .hero-subtitle {
    font-size: 0.96rem;
    line-height: 1.7;
    margin-bottom: 0.8rem;
  }

  /* Bottoni allineati a sinistra ma ben distanziati */
  .page-chi-sono .hero-actions {
    align-items: stretch;
    gap: 0.8rem;
    margin-top: 1.1rem;
  }

  .page-chi-sono .hero-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Sezioni successive: tutto a colonna, testo allineato left */
  .page-chi-sono .section .section-header.center {
    text-align: left;
    align-items: flex-start;
  }

  .page-chi-sono .section .section-header.center h2 {
    font-size: 1.5rem;
  }

  .page-chi-sono .plans {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.4rem;
  }

  .page-chi-sono .plan-card {
    padding: 1.4rem 1.3rem 1.5rem;
  }
}
/* ==========================================
   LEONARDO È DIVERSO — MOBILE (≤900px)
   ========================================== */
@media (max-width: 900px) {
  /* Nascondo la colonna sinistra */
  #leonardo-diverso .different-left {
    display: none;
  }

  /* Layout a colonna */
  #leonardo-diverso .different-layout {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
  }

  /* Marquee: ScrollTrigger la pinna, non CSS */
  #leonardo-diverso .marquee-wrapper {
    position: relative;
    z-index: 20;
    background: radial-gradient(circle at 0% 0%, rgba(15,23,42,0.95), #020617);
  }

  /* CARD sticky */
  #leonardo-diverso .different-right .different-item {
    position: sticky;
    top: 170px; /* header + altezza marquee */
    will-change: transform, opacity;
  }
}
/* HEADER SEMPRE SOPRA A TUTTO */
.site-header {
  position: sticky;
  top: 0;
  z-index: 999999 !important;
}

/* CONTENITORE PIN – ScrollTrigger pinna QUESTO */
.marquee-pin {
  position: relative;
  z-index: 5;   /* sotto l’header */
  width: 100%;
  overflow: visible;
}
/* forza la marquee a essere sopra tutto il contenuto della sezione */
.marquee-wrapper,
.marquee-pin,
.marquee-pin > * {
  z-index: 999 !important;
  position: relative;
}
/* ==========================================
   HOME – LEONARDO È DIVERSO (MOBILE)
   Marquee sticky + card sticky
   ========================================== */

@media (max-width: 900px) {

  /* nascondo colonna sinistra */
  #leonardo-diverso .different-left {
    display: none;
  }

  /* layout a colonna: marquee sopra, card sotto */
  #leonardo-diverso .different-layout {
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
  }

  /* marquee sticky sotto l’header */
  #leonardo-diverso .marquee-wrapper {
    position: sticky;
    top: 95px	; /* ≈ altezza header: puoi regolare 70–90px se serve */
    z-index: 5;
    background: radial-gradient(circle at 0% 0%, rgba(15,23,42,0.95), #020617);
    padding-block: 0.75rem;
  }

  /* colonna destra: card in colonna */
  #leonardo-diverso .different-right {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.8rem;
  }

  /* card sticky sotto la marquee */
  #leonardo-diverso .different-right .different-item {
    position: sticky;
    top: 210px;  /* 80px header + ~130px marquee */
  }
}
/* ==========================================
   HOME – LIMITE STICKY MARQUEE (MOBILE)
   ========================================== */

@media (max-width: 900px) {
  /* accorcio la sezione "Perché è diverso" su mobile */
  .page-home #leonardo-diverso.section-different {
    padding-bottom: 1rem;/* invece dei 3.6rem globali */
  }

  /* tolgo spazio extra sotto l’ultima card */
  #leonardo-diverso .different-right .different-item:last-child {
    margin-bottom: 0;
  }
}
/* Marquee stile chiaro */
#leonardo-diverso .marquee-wrapper {
  background: #ffffff !important;
}

#leonardo-diverso .marquee span {
  color: #000000 !important;
}
/* Pallino glow neon */
#leonardo-diverso .marquee span::after {
  content: " • ";
  color: #22d3ee; /* colore turchese del tuo brand */
  text-shadow: 0 0 6px rgba(34, 211, 238, 0.9), 
               0 0 12px rgba(34, 211, 238, 0.7);
}
#leonardo-diverso .marquee span:last-child::after {
  content: "";
}
/* MARQUEE – Stile chiaro */
#leonardo-diverso .marquee-wrapper {
  background: #ffffff !important;
}

#leonardo-diverso .marquee span {
  color: #000000 !important;
  display: inline-flex;
  align-items: center;
}

/* Rimuoviamo eventuali puntini presenti nel testo */
#leonardo-diverso .marquee span::before {
  content: "";
}

/* Nuovo separatore: bottone turchese */
#leonardo-diverso .marquee span::after {
  content: "";
  display: inline-block;
  width: 10px;     /* puoi portarlo a 12–14 per renderlo più importante */
  height: 10px;
  border-radius: 50%;
  background: #22d3ee; /* bottone verde acqua solido */
  margin: 0 12px;  /* spazio tra testo e bottone */
}

/* Nessun separatore dopo l'ultima frase */
#leonardo-diverso .marquee span:last-child::after {
  content: none;
}
/* MOBILE: card più basse, larghezza normale, effetto 3D quando diventano attive */
/* ==========================================
   LEONARDO È DIVERSO – STACK MOBILE
   Card che sale, quella sopra va dietro
   ========================================== */
@media (max-width: 900px) {
  #leonardo-diverso .different-right {
    position: relative;
  }

  #leonardo-diverso .different-item {
    transition:
      transform 0.35s cubic-bezier(0.19, 1, 0.22, 1),
      opacity 0.35s ease;
    will-change: transform, opacity;
    position: relative;
    z-index: 0; /* base: sotto l'attiva */
  }

  /* Card attiva: sempre sopra a tutte */
  #leonardo-diverso .different-item.is-active {
    opacity: 1;
    transform: translateY(0) scale(1) rotateX(0deg);
    z-index: 3;
  }

  /* SOLO la card immediatamente precedente:
     si rimpicciolisce, va dietro e sparisce */
  #leonardo-diverso .different-item.is-behind {
    opacity: 0;
    transform: translateY(-8px) scale(0.9) rotateX(6deg);
    z-index: 2;
  }
}
[data-different-card] {
  transition: 
    transform 0.35s ease,
    opacity 0.35s ease;
}

/* Card attuale: sopra */
[data-different-card].is-active {
  z-index: 3;
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Card precedente: va dietro e si rimpicciolisce */
[data-different-card].is-behind {
  z-index: 1;
  opacity: 0;
  transform: scale(.88) translateY(-20px);
}

//proviamo piu fade//
[data-different-card] {
  position: relative;
  z-index: 1;
  transition:
    transform .45s cubic-bezier(.25, .75, .35, 1.2),
    opacity .45s ease-out,
    filter .45s ease-out;
}

/* CARD ATTIVA – sopra e piena */
[data-different-card].is-active {
  z-index: 10;
  opacity: 1;
  transform: scale(1) translateY(0);
  filter: blur(0);
}

/* CARD PRECEDENTE – va dietro MORBIDAMENTE */
[data-different-card].is-behind {
  z-index: 1;
  opacity: 0;
  transform: scale(.88) translateY(-22px);
  filter: blur(2px); /* glow di sfocatura leggerissima */
}

/* FORCE: timeline verticale anche su mobile */
@media (max-width: 900px) {
  #come-funziona .timeline {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: flex-start;
    column-gap: 2rem;
  }

  #come-funziona .timeline-line {
    display: block;
  }

  #come-funziona .timeline-steps {
    display: flex;
    flex-direction: column;   /* <-- qui la rimettiamo in colonna */
    gap: 1.8rem;
    overflow: visible;        /* niente scroll orizzontale */
    scroll-snap-type: none;
    padding: 0;
    margin: 0;
  }

  #come-funziona .timeline-step {
    min-width: 100%;
    max-width: 100%;
    scroll-snap-align: none;
  }
}
/* CENTRA LA LINEA DELLA TIMELINE SU MOBILE */
@media (max-width: 900px) {
  #come-funziona .timeline-line {
    left: 47% !important;
    transform: translateX(-53%) !important;
  }
/* Aumenta distanza verticale tra le card della timeline su mobile */
@media (max-width: 900px) {
  #come-funziona .timeline-step {
    margin: 36px 0 !important; /* aumenta qui se vuoi più spazio */
  }
}
}

/* CONSULENZA – CARD "COSA SUCCEDE" (STILE TIMELINE MOBILE) */
.page-consulenza .consulenza-flow {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.page-consulenza .cons-card {
  background: rgba(15, 23, 42, 0.97);
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.55);
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.9),
    0 0 0 1px rgba(15, 23, 42, 1);
  padding: 1.6rem 1.8rem;
  color: #e5e7eb;
  position: relative;
  overflow: hidden;
}

.page-consulenza .cons-card-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.page-consulenza .cons-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page-consulenza .cons-card-icon svg {
  width: 36px;
  height: 36px;
  stroke: #14b8a6;
  stroke-width: 2;
  
}

.page-consulenza .cons-card-head h3 {
  font-size: 1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #f9fafb;
}

.page-consulenza .cons-card-text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: #cbd5f5;
  margin-bottom: 0.9rem;
}

.page-consulenza .cons-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.page-consulenza .cons-card-list li {
  position: relative;
  padding-left: 1.2rem;
  color: #e5e7eb;
}

.page-consulenza .cons-card-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: radial-gradient(circle, #22c55e 0%, #14b8a6 60%, transparent 100%);
}

.page-consulenza .cons-card:hover {
  transform: translateY(-3px);
  box-shadow:
    0 22px 55px rgba(15, 23, 42, 0.95),
    0 0 0 1px rgba(15, 23, 42, 1);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

@keyframes consIconFloat {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* Calendario – effetto "sfoglia" */
.page-consulenza svg[data-lucide="calendar-clock"] {
  transform-origin: center bottom;
  animation: consCalFlip 2.6s ease-in-out infinite;
}

/* Telefono – effetto "squilla" */
.page-consulenza svg[data-lucide="phone-call"] {
  transform-origin: center top;
  animation: consPhoneRing 1.8s ease-in-out infinite;
}

/* Monitor – leggero float */
.page-consulenza svg[data-lucide="monitor-smartphone"] {
  animation: consIconFloat 2.4s ease-in-out infinite alternate;
}

/* Stellina – effetto "brilla" */
.page-consulenza svg[data-lucide="sparkles"] {
  animation: consStarGlow 2s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(56, 189, 248, 0.8));
}

/* ---- KEYFRAMES ---- */

/* float morbido (monitor) */
@keyframes consIconFloat {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-4px); }
}

/* calendario che "sfoglia" */
@keyframes consCalFlip {
  0%, 70%, 100% {
    transform: rotateX(0deg) translateY(0);
  }
  75% {
    transform: rotateX(-18deg) translateY(2px);
  }
  80% {
    transform: rotateX(12deg) translateY(-1px);
  }
  85% {
    transform: rotateX(-8deg) translateY(1px);
  }
}

/* telefono che squilla */
@keyframes consPhoneRing {
  0%, 60%, 100% {
    transform: rotate(0deg);
  }
  65% {
    transform: rotate(-10deg);
  }
  70% {
    transform: rotate(10deg);
  }
  75% {
    transform: rotate(-7deg);
  }
  80% {
    transform: rotate(7deg);
  }
}

/* stellina che brilla */
@keyframes consStarGlow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.9;
    filter: drop-shadow(0 0 4px rgba(56, 189, 248, 0.5));
  }
  40% {
    transform: scale(1.12);
    opacity: 1;
    filter: drop-shadow(0 0 10px rgba(56, 189, 248, 1));
  }
  70% {
    transform: scale(0.96);
    opacity: 0.8;
    filter: drop-shadow(0 0 3px rgba(56, 189, 248, 0.3));
  }
}
/* Mobile: slider orizzontale stile timeline mobile */
@media (max-width: 900px) {
  .page-consulenza .consulenza-flow {
    flex-direction: row;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0 1.5rem 1.6rem;
    margin: 0 -1.5rem;
  }

  .page-consulenza .consulenza-flow::-webkit-scrollbar {
    height: 4px;
  }

  .page-consulenza .consulenza-flow::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: linear-gradient(90deg, #22c55e, #14b8a6);
  }

  .page-consulenza .cons-card {
    flex: 0 0 82%;
    max-width: 82%;
    scroll-snap-align: center;
  }
}

@media (min-width: 901px) {
  .page-consulenza .consulenza-flow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.8rem;
    overflow: visible;
    padding: 0;
    margin: 0;
  }
}
/* di default: niente immagini sulla timeline (desktop) */
.consulenza-step-image {
  display: none;
}

/* solo mobile: immagine sopra, testo sotto */
/* ---- CONSULENZA: IMMAGINI PICCOLE E CENTRATE SU MOBILE ---- */

/* di default: niente immagini sulla timeline (desktop) */
.consulenza-step-image {
  display: none;
}

/* solo mobile: immagine sopra, testo sotto */
@media (max-width: 900px) {
  .consulenza-step-info {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }

  .consulenza-step-image {
    display: block;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 12/16; /* puoi cambiare in 4/3 se le vuoi più “tall” */
  }

  .consulenza-step-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}
/* ---- CONSULENZA MOBILE: immagini piccole ---- */
@media (max-width: 900px) {

  .consulenza-step-info {
    display: flex;
    flex-direction: column;
    align-items: center; 
    text-align: center;
    gap: 0.5rem;
  }

  .consulenza-step-image {
    width: 200px;                 /* <<< DIMENSIONE IMMAGINE */
    height: auto;
    margin: 0 auto 0.3rem;       /* centro l’immagine */
    border-radius: 12px;
    overflow: hidden;
    display: block !important;   /* Forza la visibilità anche se sopra c’è display:none */
  }

  .consulenza-step-image img {
    width: 100% !important;      /* <<< mantiene proporzioni corrette */
    height: auto !important;
    object-fit: cover;
    display: block;
  }
}
/* ---- CONSULENZA MOBILE: testo più grande ---- */
@media (max-width: 900px) {

  .consulenza-step-info h3,
  .consulenza-step-info .consulenza-step-title {
    font-size: 2rem;      /* titolo più grande */
    font-weight: 600;
    line-height: 1.3;
  }

  .consulenza-step-info p,
  .consulenza-step-info .consulenza-step-text {
    font-size: 1.5rem;      /* testo più leggibile */
    line-height: 1.45;
  }
}
/* ---- CONSULENZA MOBILE: meno spazio tra titolo e sottotitolo ---- */
@media (max-width: 900px) {

  .consulenza-step-info h3,
  .consulenza-step-info .consulenza-step-title {
    margin-bottom: 0.25rem !important;  /* molto meno spazio */
  }

  .consulenza-step-info {
    gap: 0.35rem !important; /* riduce lo spazio generale interno */
  }
}

/* CONSULENZA — immagine mobile super figa stile Canva */
@media (max-width: 900px) {

  .consulenza-image-wrapper {
    width: 82%;
    max-width: 230px;        /* dimensione PERFETTA per mobile */
    margin: 1.2rem auto 1.4rem;
    
    position: relative;
  }

  /* Glow dietro tipo Canva */
  .consulenza-image-wrapper::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 24px;
    background: radial-gradient(
      circle at center,
      rgba(0, 226, 207, 0.35),
      transparent 70%
    );
    filter: blur(18px);
    z-index: 0;
  }

  /* Foto */
  .consulenza-image-wrapper img {
    width: 100%;
    height: auto;
    border-radius: 20px;

    /* stile Canva */
    box-shadow:
      0 10px 22px rgba(0,0,0,0.12),
      0 4px 12px rgba(0,0,0,0.08);

    position: relative;
    z-index: 2;
  }
}