/* ============================================================
   PALETTE IBRIDA (logo + scena neon)
   ============================================================ */
:root {
  /* Base (logo) */
  --bg:#0B0B0B;              
  --ink:#EDEDED;             
  --muted:#9AA3AD;           
  --red:#C81515;             
  --red-2:#E72E2E;           

  /* Accenti neon (stanza) */
  --cyan:#21D4FD;           
  --cyan-2:#00B7FF;         
  --magenta:#B721FF;        
  --magenta-2:#FF2D95;      
  --violet:#6C2FFF;         

  /* Supporto / ombre */
  --shadow:#050607;
  --glow-cyan: 0 0 12px rgba(33,212,253,.55), 0 0 36px rgba(33,212,253,.25);
  --glow-magenta: 0 0 12px rgba(183,33,255,.55), 0 0 36px rgba(183,33,255,.25);

  /* Background blend */
  --bg-gradient:
    radial-gradient(60% 55% at 78% -10%, rgba(33,212,253,.12) 0%, transparent 60%),
    radial-gradient(55% 50% at 18% 100%, rgba(183,33,255,.10) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,.65), rgba(0,0,0,.85)),
    var(--bg);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
html, body { height: 100%; }

body {
  background: var(--bg);
  background-image: var(--bg-gradient);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Inter", "Roboto", "Segoe UI", Arial, sans-serif;
  line-height: 1.5;
  scroll-padding-top: 70px; /* evita overlap navbar su anchor */
}

/* Titoli condensati */
h1, h2, h3, .display-1, .display-2 {
  letter-spacing: .02em;
  font-weight: 800;
  text-transform: uppercase;
}

/* Titoli: rosso brand */
h1, h2, h3 { color: var(--red); }

/* ============================================================
   LAYOUT & RESPONSIVE
   ============================================================ */

/* Sezioni a piena altezza adattiva */
.section {
  min-height: 100svh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: clamp(40px, 6vw, 64px) 0;
  padding-bottom: calc(clamp(40px, 6vw, 64px) + env(safe-area-inset-bottom));
  position: relative;
}

/* Tipografia fluida */
h1.display-4 {
  font-size: clamp(1.8rem, 4.5vw, 3rem);
  line-height: 1.1;
}
h2 {
  font-size: clamp(1.2rem, 3.2vw, 2rem);
}

/* Immagini reattive */
img, video {
  max-width: 100%;
  height: auto;
}

/* Box centrale */
.wrap {
  width: min(1100px, 92vw);
  margin-inline: auto;
}

/* XS */
@media (max-width: 575.98px) {
  .wrap { width: 92vw; }
  .navbar .btn { padding: .4rem .6rem; }
  .lead { font-size: 1rem; }
  #splash img { max-width: min(420px, 80vw); height: auto; }
}

/* SM–MD */
@media (min-width: 576px) and (max-width: 991.98px) {
  .wrap { width: min(720px, 92vw); }
}

/* ============================================================
   ACCESSIBILITÀ & MOTION
   ============================================================ */

/* Preferenze utente: riduci motion */
@media (prefers-reduced-motion: reduce) {
  .fade-enter,
  .fade-enter.active {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

/* Focus chiaro per tastiera */
.btn:focus-visible, a.btn:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}
a:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ============================================================
   STILE SPECIFICO ECO PITCH
   ============================================================ */

/* Divider */
.hr-red {
  height: 2px;
  background: linear-gradient(90deg, var(--red), transparent);
  border: 0;
  margin: 1rem 0 2rem 0;
}
.hr-neon {
  height: 2px;
  border: 0;
  margin: 1rem 0 2rem 0;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), transparent);
}

/* Bottoni */
.btn-eco {
  --bs-btn-color: var(--ink);
  --bs-btn-bg: var(--red);
  --bs-btn-border-color: var(--red);
  --bs-btn-hover-bg: var(--red-2);
  --bs-btn-hover-border-color: var(--red-2);
}
.btn-neo {
  --bs-btn-color: #041016;
  --bs-btn-bg: var(--cyan);
  --bs-btn-border-color: var(--cyan);
  --bs-btn-hover-bg: var(--cyan-2);
  --bs-btn-hover-border-color: var(--cyan-2);
}
.btn {
  min-height: 40px;
}

/* Badge / accenti */
.badge-cyan {
  background: rgba(33,212,253,.15);
  color: var(--cyan);
  border: 1px solid rgba(33,212,253,.45);
}
.badge-magenta {
  background: rgba(183,33,255,.15);
  color: var(--magenta);
  border: 1px solid rgba(183,33,255,.45);
}

/* Testo secondario */
.muted { color: var(--muted); }

/* Glow util */
.glow-cyan { text-shadow: var(--glow-cyan); }
.glow-magenta { text-shadow: var(--glow-magenta); }

/* Animazione fade */
.fade-enter { opacity: 0; transform: translateY(10px); }
.fade-enter.active {
  opacity: 1;
  transform: none;
  transition: opacity .6s ease, transform .6s ease;
}

/* Navbar */
.navbar-eco {
  background: #0c0c0c;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.navbar-eco .navbar-toggler {
  border-color: rgba(255,255,255,.35);
}
.navbar-eco .navbar-toggler-icon {
  filter: invert(1) contrast(2);
}

/* YouTube embed */
.ratio {
  --bs-aspect-ratio: 56.25%;
  margin-left: auto;
  margin-right: auto;
  max-width: 900px;
}

/* Temi sezione */
.theme-entity {
  background:
    radial-gradient(40% 40% at 85% 10%, rgba(231,46,46,.10), transparent 60%),
    var(--bg);
}
.theme-neon {
  background:
    radial-gradient(60% 55% at 78% -10%, rgba(33,212,253,.14), transparent 60%),
    radial-gradient(55% 50% at 18% 100%, rgba(183,33,255,.12), transparent 60%),
    var(--bg);
}

/* Stampa */
@media print {
  .navbar { display: none !important; }
  .section {
    min-height: auto;
    page-break-after: always;
    background: none !important;
  }
  a[href]:after { content: ""; }
}

/* ============================================================
   DEBUG (rimuovere in produzione)
   ============================================================ */