/* TEMA SAFETY GLASS */
:root {
  /* SFONDI */
  --bg-deep:             #080C12;
  --bg-base:             #0F1824;
  --bg-surface:          #182440;
  --bg-icon:             #1E3A6E;
  --bg-overlay:          #1A2A3A;

  /* TESTI */
  --text-bright:         #E8EDF2;
  --text-base:           #B0BEC8;
  --text-muted:          #6B7E95;
  --ticker-text:         #182440;

  /* ACCENTI */
  --accent-primary:      #00C060;
  --accent-primary-dark: #007A3A;
  --accent-detail:       #F5C400;
  --accent-label:        #FF6B00;
  --accent-label-dark:   #cf6a22;

  /* GLOW / DECORATIVI */
  --glow-bright:         #E8EDF2;
  --glow-base:           #B0BEC8;
  --glow-deep:           #1C2E42;

  /* BORDI */
  --border-base:         #B0BEC8;
}
/* FONT DOCUMENTO — Barlow + DM Sans + DM Mono */
:root {
 --font-titoli: 'Barlow Condensed', sans-serif;
  --font-corpo:  'DM Sans', sans-serif;
  --font-mono:   'DM Mono', monospace;
}

  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html {
    scroll-behavior: smooth;
  min-width: 1280px;
  width: 100%;
  }

 body {
  background-color: var(--bg-base);
  color: var(--text-base);
  font-family: var(--font-corpo);
  font-size: 17px;
  line-height: 1.65;
  min-width: 1280px;
  min-height: 720px;
  position: relative;
}

.bg-parallax {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../img/wsl-bg.svg');
  background-size: 100% auto;
  background-position: center top;
  background-repeat: repeat-y;
  opacity: 0.2;
  z-index: -1;
  pointer-events: none;
}

  /* ─── NAV ─────────────────────────────────────────── */
  nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: 90px;
  background: color-mix(in srgb, var(--bg-deep) 75%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.05) 20%,
    rgba(255,255,255,0.06) 50%,
    rgba(0,0,0,0.05) 80%,
    rgba(0,0,0,0.5) 100%
  );
  border-top: 0.7px solid rgba(255,255,255,0.08);
  border-bottom: 0.7px solid var(--accent-detail);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 4px 24px rgba(0,0,0,0.4);
  animation: slideDown 0.6s ease both;
}

.nav-inner {
  max-width: 1440px;
  margin: 0 auto;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  gap: 48px;
}

  .nav-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
  }
 .nav-logo-img {
  height: 70px;   /* stessa altezza del vecchio logo mark */
  width: auto;
  display: block;
}

  .nav-logo-text {
    font-family: var(--font-titoli);
    font-weight: 700;
    font-size: 34px;
    letter-spacing: 0.04em;
    color: var(--text-base);
    text-transform: uppercase;
    white-space: nowrap;
  }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    flex-wrap: nowrap;
    white-space: nowrap;
  }

  .nav-links a {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-base);
    text-decoration: none;
    transition: color 0.2s;
  }

  .nav-links a:hover {
  color: var(--glow-bright);
  transform: scale(1.2);
  display: inline-block;
}

  .nav-cta {
    background: color-mix(in srgb, var(--accent-primary-dark) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color: var(--glow-bright);
    padding: 10px 22px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.25s, box-shadow 0.25s;
    position: relative;
    z-index: 1;
    display:inline-block;
  }

 .nav-links .nav-cta:hover {
    background: color-mix(in srgb, var(--accent-primary) 80%, transparent);
    color: var(--glow-bright);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.35),
      0 0 40px color-mix(in srgb, var(--accent-primary) 50%, transparent);
    transform: scale(1.0);
    display: inline-block;
  }

/* ─── HERO ─────────────────────────────────────────── */
.hero {
  min-height: 100vh;
  background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
  padding: 130px 80px 50px 80px; /* top: nav 68px + spazio | bottom: 50px */
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: clip;
}

/* Glow decorativo in alto a destra */
.hero::before {
  content: '';
  position: absolute;
  top: -700px; right: -800px;
  width: 2000px; height: 2000px;
  border-radius: 500%;
  background: radial-gradient(circle, var(--glow-deep) 5%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-label);
  margin-bottom: 40px;
  margin-top: 25px;
  animation: fadeUp 0.8s 0.3s ease both;
  position: relative;
  z-index: 1;
}

.hero-title {
  font-family: var(--font-titoli);
  font-size: clamp(80px, 8vw, 120px);
  font-weight: 800;
  line-height: 1.0;
  color: var(--text-base);
  text-align: center;
  margin-bottom: 72px;
  animation: fadeUp 0.8s 0.45s ease both;
  position: relative;
  z-index: 1;
}

.hero-title em {
  font-style: normal;
  color: var(--accent-primary);
  position: relative;
  z-index: 1;
}

/* Riga inferiore: due colonne */
.hero-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 1;
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
  z-index: 1;
}

.hero-subtitle {
  font-size: 17px;
  font-weight: 300;
  color: var(--text-base);
  line-height: 1.7;
  margin-bottom: 40px;
  animation: fadeUp 0.8s 0.6s ease both;
  position: relative;
  z-index: 1;
}

.hero-ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  animation: fadeUp 0.8s 0.75s ease both;
  position: relative;
  z-index: 1;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: color-mix(in srgb, var(--accent-primary-dark) 70%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
  color: var(--glow-bright);
  padding: 16px 32px;
  font-family: var(--font-corpo);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: all 0.25s;
  position: relative;
  z-index: 1;
}

.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-primary) 80%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  color: var(--glow-bright);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 40px color-mix(in srgb, var(--accent-primary) 50%, transparent);
  
}

.btn-secondary {
  display: inline-flex;
  gap: 10px;
  background: color-mix(in srgb, var(--glow-base) 5%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.02) 0%,
  rgba(255,255,255,0.06) 40%,
  rgba(255,255,255,0.02) 55%,
  rgba(0,0,0,0.08) 100%
  );
  border: 1px solid color-mix(in srgb, var(--accent-primary-dark) 60%, transparent);
  outline: 1px solid transparent;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset -1px 0 0 rgba(255,255,255,0.08),
    0 0 6px color-mix(in srgb, var(--glow-base) 40%, transparent);
  color: var(--text-base);
  padding: 16px 32px;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-decoration: none;
  position: relative;
  z-index: 1;
  transition: background 0.25s, border-color 0.25s, outline-color 0.25s, box-shadow 0.25s, color 0.25s;
}

.btn-secondary:hover {
  border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
  outline: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
  color: var(--glow-bright);
  background: color-mix(in srgb, var(--glow-base) 10%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.02) 0%,
  rgba(255,255,255,0.06) 40%,
  rgba(255,255,255,0.02) 55%,
  rgba(0,0,0,0.08) 100%
);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 1px 0 0 rgba(255,255,255,0.12),
    inset -1px 0 0 rgba(255,255,255,0.12),
    0 0 12px color-mix(in srgb, var(--glow-base) 50%, transparent);
}

.hero-stats {
  display: flex;
  gap: 40px;
  border-top: 1px solid var(--accent-detail);
  padding-top: 40px;
  animation: fadeUp 0.8s 0.9s ease both;
  position: relative;
  z-index: 1;
}

.hero-stat-value {
  font-family: var(--font-titoli);
  font-size: 32px;
  font-weight: 700;
  color: var(--glow-bright);
  text-align: center;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}

.hero-stat-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  color: var(--text-muted);
  position: relative;
  z-index: 1;
}

.hero-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  animation: fadeIn 0.8s 0.6s ease both;
  position: relative;
  z-index: 1;
}

.diagram-card {
  background: color-mix(in srgb, var(--bg-deep) 40%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.02) 0%,
  rgba(255,255,255,0.06) 40%,
  rgba(255,255,255,0.02) 55%,
  rgba(0,0,0,0.08) 100%
);
  border: 0.7px solid rgba(255,255,255,0.1);
 box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  padding: 24px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
  cursor: default;
  position: relative;
  z-index: 1;
}

.diagram-card:hover {
  background: color-mix(in srgb, var(--bg-base) 50%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.02) 0%,
  rgba(255,255,255,0.06) 40%,
  rgba(255,255,255,0.02) 55%,
  rgba(0,0,0,0.08) 100%
);
  border-color: var(--accent-detail);
  box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 40px color-mix(in srgb, var(--glow-base) 40%, transparent);
  position: relative;
  z-index: 1;
}

.diagram-card-icon {
  width: 44px;
  height: 44px;
  background: var(--bg-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.diagram-card-icon.orange { background: var(--accent-primary); }
.diagram-card-icon.green  { background: var(--accent-primary); }

.diagram-card-text strong {
  display: block;
  font-family: var(--font-corpo);
  font-size: 16px;
  font-weight: 700;
  color: var(--glow-bright);
  margin-bottom: 3px;
  position: relative;
  z-index: 1;
}

.diagram-card-text span {
  font-size: 12px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  position: relative;
  z-index: 1;
}

.diagram-badge {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-base);
  padding: 4px 10px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
}
  /* ─── STRISCIA ────────────────────────────────────── */

.ticker {
  background: color-mix(in srgb, var(--accent-primary) 70%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
  to bottom,
  rgba(0,0,0,0.3) 0%,
  rgba(0,0,0,0.05) 15%,
  rgba(255,255,255,0.15) 50%,
  rgba(0,0,0,0.05) 85%,
  rgba(0,0,0,0.3) 100%
);
  border-top: 1px solid rgba(0,0,0,0.7);
  border-bottom: 1px solid rgba(0,0,0,0.7);
  box-shadow: 
    inset 0 1px 0 rgba(0,0,0,0.7),
    inset 0 -1px 0 rgba(0,0,0,0.7),
    0 4px 12px rgba(0,0,0,0.5);
  padding: 10px 0;
  overflow: hidden;
  white-space: nowrap;
  position: fixed;
  top: 90px;
  left: 0;
  right: 0;
  z-index: 999;
  }

  .ticker-inner {
    display: inline-flex;
    gap: 0;
    animation: ticker 30s linear infinite;
  }

  .ticker-item {
    font-family: var(--font-titoli);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ticker-text);
    padding: 0 10px;
  }

  .ticker-item::after {
    content: '◆';
    margin-left: 20px;
    opacity: 0.5;
  }

  /* ─── SEZIONE POSIZIONAMENTO ──────────────────────── */
  .section {
    padding: 50px 80px;
  }

  .section-label {
    font-family: var(--font-mono);
    font-size: 18px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-label);
    margin-bottom: 24px;
  }

  .section-title {
    font-family: var(--font-titoli);
    font-size: clamp(60px, 5.5vw, 90px);
    font-weight: 800;
    line-height: 1.1;
    color: var(--text-bright);
    margin-bottom: 24px;
  }

  .section-body {
    font-size: 18px;
    font-weight: 300;
    color: var(--text-muted);
    max-width: 560px;
    line-height: 1.75;
    margin: 0 auto;
  }

  /* ─── HERO SECONDARIE — classi condivise tra chi-siamo e listino ─── */
  .about-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--accent-label);
    display: block;
    margin-bottom: 24px;
  }

  .about-title {
    font-family: var(--font-titoli);
    font-size: clamp(80px, 8vw, 120px);
    font-weight: 800;
    line-height: 1.0;
    color: var(--text-bright);
    margin-bottom: 32px;
  }

  .about-title em {
    font-style: normal;
    color: var(--accent-primary);
  }

  .about-subtitle {
    font-size: 24px;
    font-weight: 300;
    color: var(--text-base);
    line-height: 1.75;
    max-width: 600px;
    margin: 0 auto;
  }

  /* ─── DUE ANIME ───────────────────────────────────── */
  .dualtrack {
    display: grid;
    grid-template-columns: 1fr;
    gap: 80px;
    background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
    margin: 0;
    overflow: hidden;
    padding: 50px 80px;
  }

  .track {
    padding: 48px 48px;
    position: relative;
    overflow: hidden;
    transition: background 0.4s;
    z-index: 1;
  }

  .track-a {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
    gap: 48px;
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.01) 0%,
  rgba(255,255,255,0.08) 35%,
  rgba(255,255,255,0.05) 40%,
  rgba(0,0,0,0.20) 100%
);
    border: 0.7px var(--accent-primary);
    box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    z-index: 1;
    position: relative;
  }

  .track-b {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
    gap: 48px;
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.01) 0%,
  rgba(255,255,255,0.08) 35%,
  rgba(255,255,255,0.05) 40%,
  rgba(0,0,0,0.20) 100%
);
    border: 0.7px var(--accent-primary);
    box-shadow:
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    z-index: 1;
    position: relative;
  }

  .track-icon {
    width: 56px;
    height: 56px;
    background: var(--accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }

   .track-icon-b {
    width: 56px;
    height: 56px;
    background: var(--accent-detail);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }

  .track-title {
    font-family: var(--font-titoli);
    font-size: 28px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .track-desc {
    font-size: 16px;
    font-weight: 300;
    color: var(--text-base);
    line-height: 1.75;
    margin-bottom: 40px;
  }

  .track-services {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .track-services li {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .track-services li::before {
    content: '';
    width: 20px;
    height: 1px;
    background: var(--accent-detail);
    flex-shrink: 0;
  }

  .track-banner-wrapper {
    width: 100%;
    background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
    padding: 80,0;
  }

  .track-banner {
    padding: 50px 0;
    width: 100%;
    height: auto;
    display: block;
  }

  .track-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-self: center;
  }

  .track-a .track-img-col {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

  .track-b .track-img-col {
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-start;
  }

  .track-img-col img {
    width: 100%; /* ← regola qui per cambiare dimensione immagine */
    height: auto;
    object-fit: cover;
    display: block;
    border: 0.7px solid color-mix(in srgb, var(--border-base) 25%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.4),
      inset 0 -1px 0 rgba(0,0,0,0.4),
      inset 1px 0 0 rgba(255,255,255,0.30),
      inset -1px 0 0 rgba(255,255,255,0.30),
      0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  }

  /* ─── SERVIZI GRID ────────────────────────────────── */
  .services-section {
    background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
    padding: 50px 80px;
    position: relative;
    overflow-x: clip;
  }

  .services-section::before {
  content: '';
  position: absolute;
  top: -600px; right: -900px;
  width: 2000px; height: 2000px;
  border-radius: 500%;
  background: radial-gradient(circle, var(--glow-deep) 0.2%, transparent 40%);
  pointer-events: none;
}

  .services-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin-bottom: 80px;
  max-width: 100%;
  text-align: center;
}

.services-section .section-body {
  color: var(--text-base);
}

  .services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    background: transparent;
    overflow: visible;
  }
  .service-card-wrapper {
  position: relative;
  min-height: 500px;
}
.service-card-wrapper:hover {
  z-index: 100;
}

.service-card {
  
  background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.20) 100%
  );
  border: 0.7px var(--accent-primary);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
  padding: 48px 40px;
  max-width: 100%;
  position: absolute;
  inset: 0;
  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease, right 0.3s ease, bottom 0.3s ease, background 0.3s, box-shadow 0.3s;
  cursor: default;
  overflow: hidden;
}

.service-card:hover {
  background: color-mix(in srgb, var(--bg-base) 40%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.1) 40%,
    rgba(0,0,0,0.25) 100%
    );
  max-width: 100%;
  transform: scale(1.1);
  inset: 0%;
  z-index: 100;
  position: absolute;
   border: 0.7px var(--accent-primary);
  box-shadow: 
    inset 0 1px 0 rgba(255,255,255,0.4),
    inset 0 -1px 0 rgba(0,0,0,0.4),
    inset 1px 0 0 rgba(255,255,255,0.30),
    inset -1px 0 0 rgba(255,255,255,0.30),
    0 0 40px color-mix(in srgb, var(--glow-base) 40%, transparent);
}

  .service-card:hover .service-tag {
  color: var(--accent-label);
}

.service-card:hover .service-name {
  color: var(--text-bright);
}

.service-card:hover .service-desc {
  color: var(--text-bright);
}

.service-card:hover .service-price {
  color: var(--accent-primary);
  border-top: 1px solid var(--accent-detail);
}

.service-card:hover .service-price .from {
  color: var(--text-muted);
}

  .service-tag {
    font-family: var(--font-mono);
    font-size: 16px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-label);
    margin-bottom: 20px;
    display: block;
  }

  .service-name {
    font-family: var(--font-titoli);
    font-size: 24px;
    font-weight: 700;
    color: var(--text-base);
    margin-bottom: 14px;
    line-height: 1.2;
  }

  .service-desc {
    font-size: 16px;
    color: var(--text-base);
    line-height: 1.7;
    margin-bottom: 28px;
  }

  .service-price {
    font-family: var(--font-titoli);
    font-size: 36px;
    font-weight: 700;
    color: var(--accent-primary);
    border-top: 1px solid var(--accent-detail);
    padding-top: 20px;
    line-height: 1.2;
    text-align: center;
  }

  .service-price .from {
    font-family: var(--font-corpo);
    font-weight: 300;
    font-size: 14px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 15px;
    text-align: center;
  }

  /* ─── B2B SECTION ─────────────────────────────────── */
  .b2b-section {
  background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto 1fr;
  column-gap: 64px;
  row-gap: 80px; /* ← gap tra header e colonne */
  min-height: 600px;
  padding: 50px 80px; /* ← padding sezione (top/bottom | left/right) */
}

.b2b-header {
  grid-column: 1 / -1;
  text-align: center;
  padding: 0;
}

  .b2b-left {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

  .b2b-title {
    font-family: var(--font-titoli);
    font-size: clamp(60px, 5.5vw, 90px);
    font-weight: 800;
    color: var(--text-bright);
    line-height: 1.1;
    margin-bottom: 24px;
  }

  .b2b-desc {
    font-size: 17px;
    font-weight: 300;
    color: var(--text-base);
    line-height: 1.75;
    margin-bottom: 48px;
  }

  .b2b-title em {
  font-style: normal;
  color: var(--accent-primary);
}

.b2b-stats {
  display: flex;
  gap: 40px;
  border-top: 1px solid var(--accent-detail);
  padding-top: 40px;
  margin-bottom: 48px;
}

.b2b-stat-value {
  font-family: var(--font-titoli);
  font-size: 32px;
  font-weight: 700;
  color: var(--glow-bright);
  line-height: 1;
  margin-bottom: 6px;
}

.b2b-stat-label {
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.4;
  max-width: 120px;
}

.b2b-right {
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
}

  .b2b-feature {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 28px;
    background: color-mix(in srgb, var(--bg-dark) 30%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%
  );
    border: 0.7px solid rgba(255,255,255,0.1);
    box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    position: relative;
    z-index: 1;
    transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
  }

  .b2b-feature:hover {
    background: color-mix(in srgb, var(--bg-base) 40%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%
    );
    border-color: var(--accent-primary);
   box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 40px color-mix(in srgb, var(--glow-base) 40%, transparent);
  }

  .b2b-feature-dot {
    width: 8px;
    height: 8px;
    background: var(--accent-detail);
    flex-shrink: 0;
    margin-top: 8px;
  }

  .b2b-feature-text strong {
    display: block;
    font-family: var(--font-corpo);
    font-size: 18px;
    font-weight: 700;
    color: var(--text-bright);
    margin-bottom: 6px;
  }

  .b2b-feature-text span {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
  }

  /* ─── PREZZI ──────────────────────────────────────── */
  .pricing-section {
    padding: 100px 80px;
    background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
  }

  .pricing-header {
    text-align: center;
    margin-bottom: 80px;
  }

  .pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
    gap: 24px;
    max-width: 1080px;
    margin: 0 auto;
  }

  .pricing-card-wrapper {
  position: relative;
  min-height: 600px;
  box-shadow: 0 0 40px color-mix(in srgb, var(--glow-base) 5%, transparent);
}

.pricing-card-wrapper:hover {
  z-index: 100;
}

.pricing-card {
    background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%
  );
    box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    padding: 48px 40px;
    border: 0.7px solid var(--border-base);
    position: absolute;
    inset: 0;
    transition: transform 0.3s ease, background 0.3s, box-shadow 0.3s;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    transform-origin: center center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .pricing-card .pricing-items {
    flex: 1;
    margin-bottom: 40px;
  }

  .pricing-card::before {
  content: '';
  position: absolute;
  top: -20px; right: -40px;
  width: 500px; height: 500px;
  border-radius: 100%;
  pointer-events: none;
  z-index: 0;
}

.pricing-card.featured::before {
  top: -20px; right: -40px;   /* cambia questi due valori */
  width: 500px; height: 500px;
  border-radius: 10%;
}

.pricing-card:hover {
    background: color-mix(in srgb, var(--bg-base) 40%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.1) 40%,
    rgba(0,0,0,0.25) 100%
    );
    transform: scale(1.2);
    z-index: 100;
    position: absolute;
    box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 40px color-mix(in srgb, var(--glow-base) 40%, transparent);
      border: 0.7px solid rgba(255,255,255,0.12);
      border-color: var(--accent-primary);
       width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pricing-card.featured {
    background: color-mix(in srgb, var(--bg-base) 30%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%
  );
    border: 0.7px solid rgba(255,255,255,0.12);
    box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    border-color: var(--border-base);
    overflow: visible;
     width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pricing-card.featured:hover {
    background: color-mix(in srgb, var(--bg-overlay) 40%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.15) 35%,
    rgba(255,255,255,0.1) 40%,
    rgba(0,0,0,0.25) 100%
    );
    border: 0.7px solid rgba(255,255,255,0.12);
    box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 40px color-mix(in srgb, var(--glow-base) 40%, transparent);
      border-color: var(--accent-primary);
       width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .pricing-card.featured::after {
    content: 'PIÙ RICHIESTO';
    position: absolute;
    overflow: visible;
    top: -12px;
    left: 40px;
    background: color-mix(in srgb, var(--accent-primary-dark) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.25),
      0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color: var(--text-bright);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.12em;
    padding: 4px 14px;
  }

  .pricing-name {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-label);
    margin-bottom: 16px;
  }

  .pricing-title {
    font-family: var(--font-titoli);
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--text-bright);
  }

  .pricing-card.featured .pricing-title { color: var(--text-bright); }

  .pricing-price {
    font-family: var(--font-titoli);
    font-size: 48px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
    color: var(--text-bright);
  }

  .pricing-card.featured .pricing-price { color: var(--text-bright); }

  .pricing-price .currency {
    font-size: 24px;
    vertical-align: top;
    margin-top: 8px;
    display: inline-block;
  }

  .pricing-price-note {
    font-size: 13px;
    color: var(--text-bright);
    margin-bottom: 36px;
  }

  .pricing-card.featured .pricing-price-note { color: var(--text-bright); }

  .pricing-items {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 40px;
  }

  .pricing-items li {
    font-size: 14px;
    color: var(--text-bright);
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
  }

  .pricing-card.featured .pricing-items li { color: var(--text-base); }

  .pricing-items li::before {
    content: '✓';
    color: var(--accent-primary);
    font-weight: 700;
    flex-shrink: 0;
  }

 .pricing-cta {
    display: block;
    text-align: center;
    padding: 16px 28px;
    font-family: var(--font-corpo);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-decoration: none;
    background: color-mix(in srgb, var(--glow-base) 10%, transparent);
    background-image: linear-gradient(
      140deg,
      rgba(255,255,255,0.01) 0%,
      rgba(255,255,255,0.12) 40%,
      rgba(255,255,255,0.04) 55%,
      rgba(0,0,0,0.15) 100%
    );
    border: 1px solid color-mix(in srgb, var(--accent-primary-dark) 60%, transparent);
    outline: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.20),
      inset 0 -1px 0 rgba(0,0,0,0.25),
      inset 1px 0 0 rgba(255,255,255,0.08),
      inset -1px 0 0 rgba(255,255,255,0.08),
      0 0 6px color-mix(in srgb, var(--glow-base) 40%, transparent);
    color: var(--text-base);
    transition: background 0.25s, border-color 0.25s, outline-color 0.25s, box-shadow 0.25s, color 0.25s;
    position: relative;
    z-index: 1;
  }

  .pricing-cta:hover {
    border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
    outline: 1px solid color-mix(in srgb, var(--accent-primary) 40%, transparent);
    color: var(--glow-bright);
    background: color-mix(in srgb, var(--glow-base) 20%, transparent);
    background-image: linear-gradient(
      140deg,
      rgba(255,255,255,0.02) 0%,
      rgba(255,255,255,0.20) 40%,
      rgba(255,255,255,0.06) 55%,
      rgba(0,0,0,0.15) 100%
    );
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.30),
      inset 0 -1px 0 rgba(0,0,0,0.30),
      inset 1px 0 0 rgba(255,255,255,0.12),
      inset -1px 0 0 rgba(255,255,255,0.12),
      0 0 12px color-mix(in srgb, var(--glow-base) 50%, transparent);
    position: relative;
    z-index: 1;
  }

  /* card featured — identico a btn-primary */
  .pricing-card.featured .pricing-cta {
    background: color-mix(in srgb, var(--accent-primary-dark) 70%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-primary) 60%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 0 20px color-mix(in srgb, var(--accent-primary) 30%, transparent);
    color:var(--text-bright);
  }

  .pricing-card.featured .pricing-cta:hover {
    background: color-mix(in srgb, var(--accent-primary) 80%, transparent);
    color: var(--glow-bright);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 0 40px color-mix(in srgb, var(--accent-primary) 50%, transparent);
  }

    /* ─── SOCIAL PROOF ─────────────────────────────
  .social-section {
    padding: 50px 80px;
    background: color-mix(in srgb, var(--bg-deep) 93%, transparent);
    text-align: center
  }


  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 64px;
  }

  .testimonial {
    padding: 40px;
    background: color-mix(in srgb, var(--bg-deep) 30%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
    140deg,
    rgba(255,255,255,0.01) 0%,
    rgba(255,255,255,0.08) 35%,
    rgba(255,255,255,0.05) 40%,
    rgba(0,0,0,0.2) 100%
  );
    border: 0.7px solid color-mix(in srgb, var(--border-base) 40%, transparent);
    box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    position: relative;
    transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
  }

  .testimonial::before {
    content: '"';
    font-family: var(--font-titoli);
    font-size: 70px;
    font-weight: 800;
    color: var(--accent-detail);
    line-height: 0.8;
    display: block;
    margin-bottom: 16px;
  }

  .testimonial-text {
    font-size: 16px;
    font-weight: 300;
    color: var(--text-base);
    line-height: 1.75;
    margin-bottom: 28px;
    font-style: italic;
  }

  .testimonial-author strong {
    display: block;
    font-family: var(--font-titoli);
    font-size: 13px;
    color: var(--accent-label-dark);
  }

  .testimonial-author span {
    font-size: 12px;
    color: var(--text-base);
    letter-spacing: 0.04em;
  }
  ───── */
  /* ─── CTA FINALE ──────────────────────────────────── */
 .final-cta-section {
    background: color-mix(in srgb, var(--accent-primary-dark) 0%, transparent);
  }

  .final-cta {
  background: color-mix(in srgb, var(--accent-primary-dark) 80%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
  140deg,
  rgba(255,255,255,0.01) 0%,
  rgba(255,255,255,0.08) 35%,
  rgba(255,255,255,0.05) 40%,
  rgba(0,0,0,0.2) 100%
);
border: 0.7px solid color-mix(in srgb, var(--border-base) 40%, transparent);
box-shadow: 
  inset 0 1px 0 rgba(255,255,255,0.4),
  inset 0 -1px 0 rgba(0,0,0,0.4),
  inset 1px 0 0 rgba(255,255,255,0.30),
  inset -1px 0 0 rgba(255,255,255,0.30),
  0 0 5px color-mix(in srgb, var(--glow-base) 80%, transparent);
    padding: 50px 80px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 80px;
    align-items: center;
  }

  .final-cta-title {
    font-family: var(--font-titoli);
    font-size: clamp(36px, 4vw, 56px);
    font-weight: 800;
    color: var(--glow-bright);
    line-height: 1.1;
  }

  .final-cta-title span {
    display: block;
    font-size: 0.6em;
    font-weight: 300;
    opacity: 0.8;
    margin-bottom: 12px;
    color: var(--glow-bright);
  }

  .final-cta-action {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    flex-shrink: 0;
    color: var(--glow-bright);
  }

 .btn-final-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: color-mix(in srgb, var(--bg-overlay) 90%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
      140deg,
      rgba(255,255,255,0.08) 0%,
      rgba(255,255,255,0.20) 40%,
      rgba(255,255,255,0.06) 55%,
      rgba(0,0,0,0.25) 100%
    );
    border: 1px solid rgba(255,255,255,0.50);
    outline: 1px solid transparent;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.40),
      inset 0 -1px 0 rgba(0,0,0,0.35),
      inset 1px 0 0 rgba(255,255,255,0.20),
      inset -1px 0 0 rgba(255,255,255,0.20),
      0 0 10px rgba(255,255,255,0.30);
    color: var(--text-base);
    padding: 18px 36px;
    font-family: var(--font-titoli);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    letter-spacing: 0.04em;
    white-space: nowrap;
    position: relative;
    z-index: 1;
    transition: background 0.25s, border-color 0.25s, outline-color 0.25s, box-shadow 0.25s, color 0.25s;
  }

  .btn-final-cta:hover {
    background: color-mix(in srgb, var(--accent-primary) 97%, transparent);
    backdrop-filter: blur(7px) saturate(2.8);
    -webkit-backdrop-filter: blur(7px) saturate(2.8);
    background-image: linear-gradient(
      140deg,
      rgba(255,255,255,0.10) 2%,
      rgba(255,255,255,0.28) 42%,
      rgba(255,255,255,0.08) 57%,
      rgba(0,0,0,0.25) 100%
    );
    border: 1px solid rgba(255,255,255,0.50);
    outline: 1px solid rgba(255,255,255,0.20);
    color: var(--glow-bright);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -1px 0 rgba(0,0,0,0.45),
      inset 1px 0 0 rgba(255,255,255,0.30),
      inset -1px 0 0 rgba(255,255,255,0.30),
      0 0 16px rgba(255,255,255,0.45);
  }

  .btn-final-cta:hover span {
    color: var(--glow-bright) !important;
  }

  .final-cta-note {
    font-size: 13px;
    color: var(--text-base);
    letter-spacing: 0.04em;
  }

  /* ─── FOOTER ──────────────────────────────────────── */

  footer {
  background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.5) 0%,
    rgba(0,0,0,0.05) 20%,
    rgba(255,255,255,0.06) 50%,
    rgba(0,0,0,0.05) 80%,
    rgba(0,0,0,0.5) 100%
  );
  border-top: 0.7px solid rgba(255,255,255,0.12);
  border-bottom: 0.7px solid var(--accent-detail);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.15),
    inset 0 -1px 0 rgba(0,0,0,0.60),
    0 -4px 24px rgba(0,0,0,0.4),
    0 -1px 0 rgba(255,255,255,0.12);
  padding: 30px 0;
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
  gap: 0px;
  padding: 0 24px;
}

  .footer-brand p {
    font-size: 14px;
    color: var(--text-base);
    line-height: 1.75;
    margin-top: 20px;
    max-width: 300px;
  }

  .footer-col h4 {
    font-family: var(--font-titoli);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--glow-bright);
    margin-bottom: 20px;
  }

  .footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .footer-col ul a {
    font-size: 14px;
    color: var(--text-base);
    text-decoration: none;
    transition: color 0.2s, transform 0.2s;
    display: inline-block;
    transform-origin: center top;
  }

  .footer-col ul a:hover {
    color: var(--text-bright);
    transform: scale(1.2);
  }

  .footer-bottom {
  background: color-mix(in srgb, var(--bg-deep) 85%, transparent);
  backdrop-filter: blur(7px) saturate(2.8);
  -webkit-backdrop-filter: blur(7px) saturate(2.8);
  background-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0.3) 0%,
    rgba(255,255,255,0.04) 50%,
    rgba(0,0,0,0.5) 100%
  );
  border-top: 0.7px solid rgba(255,255,255,0.08);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(0,0,0,0.60);
  padding: 24px 0;
}

.footer-bottom-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bottom-inner p {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

  /* ─── ANIMAZIONI ──────────────────────────────────── */
  @keyframes slideDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @keyframes fadeUp {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  @keyframes ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Scroll reveal */
  .reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }

  .reveal.visible {
    opacity: 1;
    transform: translateY(0);
  }

  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
  /* Nav link active state — verde quando sezione è visibile */
.nav-links .nav-link.active {
  color: var(--accent-primary);
}
/* Offset per ancore con nav fissa — compensa l'altezza della nav (90px) + margine */
[id] {
  scroll-margin-top: 110px;
}