:root{
  --bg:#050505;
  --text:#ffffff;
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.10);
  --red:#e10600;
  --shadow:0 18px 55px rgba(0,0,0,.55);
  --max:1200px;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  background: var(--bg) !important;
  color: var(--text);
  font-family:"Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  overflow-x:hidden;
}

body{
  background:
    radial-gradient(900px 520px at 50% -80px, rgba(225,6,0,.22), transparent 60%),
    linear-gradient(180deg, #050505, #070707 40%, #050505 100%) !important;
}

/* carbon overlay */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.14;
  background:
    linear-gradient(135deg, rgba(255,255,255,.05) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(225deg, rgba(255,255,255,.04) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(315deg, rgba(255,255,255,.03) 25%, transparent 25%) 0 0/18px 18px,
    linear-gradient(45deg,  rgba(255,255,255,.03) 25%, transparent 25%) 0 0/18px 18px;
  mix-blend-mode: overlay;
  z-index:0;
}
body > *{ position:relative; z-index:1; }

.wrap{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
}

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

/* ================= HEADER LOGO ================= */
.logo-bar{
  width:100%;
  margin:0;

  background: rgba(5,5,5,.12);
  border-bottom: 1px solid rgba(255,255,255,.06);
  overflow: visible;

  position: sticky;
  top: 0;
  z-index: 9999;

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

  position: relative;
}

/* linea rossa (off) */
.logo-bar::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--red), transparent);
  opacity: 0;
  transition: opacity .2s ease;
}
.logo-bar.is-sticky::after{ opacity:1; }

.logo-row{
  width:min(var(--max), calc(100% - 12px));
  margin: 0 auto;
  padding: 10px 12px;

  display:flex;
  align-items:center;
  justify-content:center; /* ✅ centrale */
  gap: 14px;
  min-height: 74px;
}

.logo-img{
  height: 80px;
  width:auto;
  display:block;
  filter: drop-shadow(0 0 16px rgba(225,6,0,.35));
}

.brand-text{
  display:flex;
  flex-direction:column;
  line-height:1.05;
  text-align:left;
  padding-top: 2px;
}

.brand-title{
  margin:0;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:#fff;
  text-shadow: 0 8px 26px rgba(0,0,0,.45);
  white-space: nowrap;
}

.brand-sub{
  margin:6px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

/* ================= HERO ================= */
.hero{
  text-align:center; /* ✅ centrale */
  padding: 22px 0 16px;
}

.hero h1{
  margin: 10px 0 8px;
  font-family: "Montserrat", sans-serif;
  font-size: clamp(18px, 2.2vw, 30px);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  text-shadow: 0 4px 14px rgba(0,0,0,.45);
}

.hero p{
  margin: 0 0 12px;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero-stats{
  display:flex;
  justify-content:center; /* ✅ centrale */
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.hero-stats .stat{
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid rgba(225,6,0,.55);
  background: rgba(0,0,0,.35);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 700;
  min-width: 145px;
}

/* ================= NAV ================= */
.navline{
  border-top: 2px solid rgba(225,6,0,.80);
  border-bottom: 2px solid rgba(225,6,0,.55);
  background: rgba(0,0,0,.40);
}

nav{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  padding: 10px 6px;
  display:flex;
  justify-content:center; /* ✅ centrale */
  align-items:center;
  gap: 18px;
  flex-wrap:wrap;
}

nav a{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  padding: 6px 10px;
  border-radius: 10px;
  transition: background .15s ease, transform .15s ease, color .15s ease;
}

nav a:hover{
  background: rgba(225,6,0,.12);
  color:#fff;
  transform: translateY(-1px);
}

/* ================= LIVE ================= */
.live-banner{
  background: linear-gradient(90deg, #6b0000, var(--red), #6b0000);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(0,0,0,.70);
  box-shadow: 0 16px 45px rgba(0,0,0,.35);
  position:relative;
  overflow:hidden;
}

.live-inner{
  width:min(var(--max), calc(100% - 24px));
  margin:0 auto;
  padding: 10px 0;
  display:flex;
  justify-content:center; /* ✅ centrale */
  align-items:center;
  gap: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
}

.live-dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background:#fff;
  animation: blink 1s infinite;
  box-shadow: 0 0 16px rgba(255,255,255,.35);
}

@keyframes blink{
  0%{opacity:1;}
  50%{opacity:.2;}
  100%{opacity:1;}
}

.live-banner::after{
  content:"";
  position:absolute;
  top:0; left:-240px;
  width:240px; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  animation: scan 3s linear infinite;
}
@keyframes scan{
  0%{left:-240px;}
  100%{left:100%;}
}

/* ================= QUICK ACCESS ================= */
.quick{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center; /* ✅ centrale */
  margin: 16px auto 0;
}
.quick-btn{
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.30);
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 12px;
  transition: transform .15s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.quick-btn:hover{
  transform: translateY(-2px);
  background: rgba(225,6,0,.10);
  border-color: rgba(225,6,0,.45);
  box-shadow: 0 18px 45px rgba(0,0,0,.45), 0 0 22px rgba(225,6,0,.10);
}
.quick-btn.primary{
  border-color: rgba(225,6,0,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
}

/* ================= DIREZIONE GARA ================= */
.official{
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.28);
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:center; /* ✅ centrale */
  flex-wrap:wrap;
}
.official-tag{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color:#fff;
  border:1px solid rgba(225,6,0,.55);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(225,6,0,.10);
}
.official-text{
  font-size: 12px;
  color: rgba(255,255,255,.75);
  letter-spacing: .06em;
}
.official-link{
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:#fff;
  border-bottom: 1px solid rgba(225,6,0,.55);
  padding-bottom: 2px;
}

/* ================= STATUS CARDS ================= */
.status{
  margin-top: 12px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.status-card{
  position: relative;
  display:block;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.30);
  box-shadow: var(--shadow);
  padding: 14px;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.status-card:hover{
  transform: translateY(-3px);
  border-color: rgba(225,6,0,.50);
  box-shadow: 0 22px 70px rgba(0,0,0,.60), 0 0 28px rgba(225,6,0,.14);
}

.status-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.status-k{
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.68);
  font-weight: 900;
}
.status-ico{ opacity:.9; }

.status-title{
  font-size: 14px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 900;
  margin-bottom: 6px;
}
.status-sub{
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
}

/* ✅ BADGE (nuovo) */
.status-badge{
  position:absolute;
  top: 12px;
  right: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
}
.status-badge.live{
  border-color: rgba(225,6,0,.55);
  background: rgba(225,6,0,.14);
  box-shadow: 0 0 0 1px rgba(255,255,255,.05) inset, 0 0 18px rgba(225,6,0,.18);
}

/* ================= SEZIONI ================= */
.section{
  padding: 30px 0 10px;
}

.section h2{
  margin: 0 0 16px;
  font-size: 14px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-align:center;
}

.regolamenti-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.reg-card{
  position:relative;
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background:#000;
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.reg-card img{
  width:100%;
  height: 175px;
  object-fit: cover;
  display:block;
  filter: brightness(.78);
  transition: transform .25s ease, filter .25s ease;
}

.reg-card::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to top, rgba(0,0,0,.84), transparent 65%);
}

.reg-card h3{
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  margin:0;
  z-index:2;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 800;
}

.reg-card:hover{
  transform: translateY(-3px);
  border-color: rgba(225,6,0,.55);
  box-shadow: 0 22px 70px rgba(0,0,0,.60), 0 0 30px rgba(225,6,0,.14);
}

.reg-card:hover img{
  transform: scale(1.05);
  filter: brightness(1);
}

.card-container{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.card{
  display:block;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.40);
  box-shadow: var(--shadow);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
  color:#fff;
  text-decoration:none;
}

.card img{
  width:100%;
  height: 150px;
  object-fit: cover;
  display:block;
  filter: brightness(.86);
}

.card h3{
  margin: 12px 12px 6px;
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  text-align:center;
}

.card p{
  margin: 0 12px 14px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  line-height: 1.35;
  text-align:center;
}

/* anti-viola */
.card, .card:visited, .card *{ color: inherit; }

.card:hover{
  transform: translateY(-3px);
  border-color: rgba(225,6,0,.55);
  box-shadow: 0 22px 70px rgba(0,0,0,.60), 0 0 30px rgba(225,6,0,.14);
}

/* ================= TOP 3 / PODIO ================= */
.race-title{
  text-align:center;
  font-size: 16px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 42px 0 16px;
  color:#fff;
}

.race-event{
  border: 2px solid rgba(225,6,0,.85);
  background:
    radial-gradient(900px 240px at 50% 0%, rgba(255,255,255,.05), transparent 60%),
    repeating-linear-gradient(45deg,#101010,#101010 8px,#0a0a0a 8px,#0a0a0a 16px);
  padding: 34px 18px 36px;
  box-shadow: var(--shadow);
}

.race-info{
  text-align:center;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.race-info h3{
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color:#fff;
}

.race-info p{
  margin:0;
  font-size: 11px;
  color: rgba(255,255,255,.65);
}

.podium-live{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 18px;
  flex-wrap:wrap;
}

.podium-slot{
  width: 170px;
  border-radius: 14px;
  background: linear-gradient(180deg,#1b1b1b,#0f0f0f);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 16px 40px rgba(0,0,0,.55);
  text-align:center;
  overflow:hidden;
}

.flag{
  width: 56px;
  margin-top: 14px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.10);
}

.first{ height: 260px; border-top: 6px solid gold; }
.second{ height: 210px; border-top: 6px solid silver; }
.third{ height: 195px; border-top: 6px solid #cd7f32; }

.pos{
  font-size: 56px;
  font-weight: 900;
  margin-top: 8px;
  color:#fff;
}

.driver{
  margin: 12px 0 16px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.78);
  font-weight: 800;
}

/* ================= FOOTER ================= */
.footer{
  margin-top: 34px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.35);
}
.footer-inner{
  padding: 16px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 16px;
  flex-wrap:wrap;
  text-align:center;
}
.footer-title{
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.footer-sub{
  margin-top: 6px;
  font-size: 12px;
  color: rgba(255,255,255,.65);
  letter-spacing: .06em;
}
.footer-links{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:center;
}
.footer-links a{
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.footer-links a:hover{
  transform: translateY(-2px);
  border-color: rgba(225,6,0,.45);
  background: rgba(225,6,0,.10);
}

/* ================= RESPONSIVE ================= */
@media (max-width: 980px){
  .regolamenti-grid{ grid-template-columns: 1fr; }
  .card-container{ grid-template-columns: 1fr; }
  .status{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
  .logo-row{
    flex-direction:column;
    gap: 10px;
    padding: 6px 0;
  }
  .brand-text{ text-align:center; }
  .brand-title{ font-size: 16px; }
  .logo-img{ height: 52px; }

  /* PODIO HOME: resta in riga su mobile */
  .podium-live{
    gap: 10px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .podium-live::-webkit-scrollbar{ height: 6px; }
  .podium-slot{ width: clamp(96px, 30vw, 132px); }
  .first{ height: 220px; }
  .second{ height: 190px; }
  .third{ height: 175px; }
  .pos{ font-size: 44px; }
  .flag{ width: 48px; }
  .driver{ font-size: 10px; letter-spacing: .10em; }
}
/* FLASH NEWS TICKER (HOME) */
.home-ticker{
  display:flex;
  align-items:center;
  gap:12px;
  margin: 10px 0 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 14px;
  overflow:hidden;
}

.home-ticker-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  letter-spacing:.6px;
  color: rgba(255,255,255,.80);
  text-transform:uppercase;
  font-size: 12px;
  white-space:nowrap;
}

.home-ticker-label .dot{
  width:10px; height:10px;
  border-radius:999px;
  background: var(--red, #e10600);
  box-shadow: 0 0 14px rgba(225,6,0,.28);
}

.home-ticker-strip{
  position:relative;
  flex:1;
  overflow:hidden;
}

.home-ticker-strip::before,
.home-ticker-strip::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 80px;
  z-index:2;
  pointer-events:none;
}
.home-ticker-strip::before{
  left:0;
  background: linear-gradient(90deg, rgba(10,10,10,.95), transparent);
}
.home-ticker-strip::after{
  right:0;
  background: linear-gradient(270deg, rgba(10,10,10,.95), transparent);
}

.home-ticker-track{
  display:flex;
  gap:22px;
  white-space:nowrap;
  align-items:center;
  padding: 2px 0;
  animation: homeTicker 22s linear infinite;
}

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

.home-ticker-item{
  display:inline-flex;
  gap:10px;
  align-items:center;
  color: rgba(255,255,255,.78);
  font-weight:800;
  font-size: 12px;
  letter-spacing:.3px;
  text-decoration:none;
  transition: .15s ease;
  border-bottom: 1px solid transparent;
}
.home-ticker-item b{ color:#fff; }
.home-ticker-item:hover{
  color:#fff;
  border-bottom-color: rgba(225,6,0,.55);
  transform: translateY(-1px);
}

.home-ticker-sep{
  color: rgba(255,255,255,.22);
}

/* Pausa animazione quando passi col mouse (bella UX) */
.home-ticker:hover .home-ticker-track{
  animation-play-state: paused;
}
/* FIX MOBILE RAPIDO */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; display: block; }
* { box-sizing: border-box; }

/* qualunque container: non deve essere fisso */
.wrap, .container, .header-inner, main, section {
  max-width: 1200px;
  width: 100%;
}
@media (max-width: 640px){
  .header-inner{
    flex-wrap: wrap;
    gap: 10px;
  }
  .header-tools{
    width: 100%;
    justify-content: space-between;
  }
  .search{
    width: 100%;
  }
}
/* =========================
   MOBILE FIX HOME
========================= */
@media (max-width: 640px){

  /* Riduce padding generale */
  body{
    font-size: 14px;
  }

  /* Header più compatto */
  .header{
    padding: 18px 12px;
  }

  .header h1{
    font-size: 22px;
    letter-spacing: 1px;
  }

  /* Hero / intro */
  .hero{
    padding: 20px 12px;
  }

  .hero h2{
    font-size: 20px;
  }

  /* Sezioni principali meno spazio */
  section{
    padding: 16px 12px;
  }

  /* Pulsanti più piccoli */
  .btn{
    padding: 10px 14px;
    font-size: 12px;
  }

  /* Banner prossima gara meno alto */
  .next-race,
  .prossima-gara{
    padding: 10px 12px;
    font-size: 12px;
  }

  /* Ticker leggermente più lento */
  .home-ticker-track{
    animation-duration: 30s;
  }

  /* Riduce spazio tra blocchi */
  .container,
  .wrap{
    padding: 12px;
  }

  /* Card meno alte */
  .card{
    padding: 14px;
  }

}