:root{
  --bg:#0f1220;           /* Sfondo generale scuro */
  --panel:#141832;        /* Pannelli/Drawer */
  --card:#1a1f4a;         /* Card generiche neutre */
  --card1-bg:#FF3C5B;     /* Card rosa acceso */
  --card2-bg:#FF884D;     /* Card arancio caldo */
  --card3-bg:#42C9FF;     /* Card azzurro brillante */
  --card4-bg:#9D42FF;     /* Card viola intenso */
  --card5-bg:#42FF85;     /* Card verde lime */

  --accent:#FF4D6D;       /* Colore principale pulsanti/CTA */
  --accent2:#7B5CFF;      /* Gradient secondario */
  --text:#EEF0FF;         /* Testo principale */
  --muted:#A0A8FF;        /* Testo secondario */
  --radius:16px;           /* Raggio bordi */
}

*{
  box-sizing:border-box;
}

html, body{
  margin:0;
  background:
    radial-gradient(1200px 600px at 80% -10%, #1b1f4f, transparent),
    var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu;
}

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

.container{
  max-width:1200px;
  margin:auto;
  padding:16px;
}

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

.header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(15,18,32,.7);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
}

.header-inner{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  font-weight:900;
}

.logo span{
  color:var(--accent);
}

.spacer{ flex:1; }

.btn{
  padding:10px 14px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  border:none;
  color:#fff;
  cursor:pointer;
}

.btn.ghost{
  background:transparent;
  border:1px solid rgba(255,255,255,.15);
}

/* ================= HAMBURGER ================= */

.hamburger{
  width:40px;
  height:40px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.15);
  display:grid;
  place-items:center;
  cursor:pointer;
}

.hamburger i{
  width:18px;
  height:2px;
  background:var(--text);
  position:relative;
}

.hamburger i::before,
.hamburger i::after{
  content:"";
  position:absolute;
  width:18px;
  height:2px;
  background:var(--text);
}

.hamburger i::before{ top:-6px; }
.hamburger i::after{ top:6px; }

/* ================= DRAWER ================= */

.drawer{
  position:fixed;
  inset:0 0 0 auto;
  width:280px;
  background:var(--panel);
  transform:translateX(100%);
  transition:.35s ease;
  z-index:60;
  box-shadow:-20px 0 40px rgba(0,0,0,.4);
}

.drawer.open{
  transform:translateX(0);
}

.drawer nav a{
  display:block;
  padding:14px 16px;
  border-bottom:1px solid rgba(255,255,255,.06);
}

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

.hero{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:24px;
  padding:40px 0;
}

.hero h1{
  font-size:clamp(28px,5vw,46px);
  margin:0;
}

.hero .accent{
  color:var(--accent);
}

.lead{ color:var(--muted); }

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

.kpi{
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:14px;
  text-align:center;
}

.kpi strong{ font-size:22px; }

/* ================= GRID ================= */

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

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

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

/* ================= CARD BASE ================= */

.card,
.card1,
.card2,
.card3,
.card4,
.card5 {
  border-radius: var(--radius);
  padding: 14px;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease;
  user-select: none;
}

/* Sfondo card */
.card  { background: var(--card); }
.card1 { background: var(--card1-bg); }
.card2 { background: var(--card2-bg); }
.card3 { background: var(--card3-bg); }
.card4 { background: var(--card4-bg); }
.card5 { background: var(--card5-bg); }

.card.active,
.card1.active,
.card2.active,
.card3.active,
.card4.active,
.card5.active{
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255,77,109,.9);
}

.card:focus-visible,
.card1:focus-visible,
.card2:focus-visible,
.card3:focus-visible,
.card4:focus-visible,
.card5:focus-visible{
  outline: 3px solid rgba(255,77,109,.4);
  outline-offset: 4px;
}

.card .badge,
.card1 .badge,
.card2 .badge,
.card3 .badge,
.card4 .badge,
.card5 .badge{
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
}

/* Badge colorati */
.card1 .badge { background: rgba(255,60,91,.6); }
.card2 .badge { background: rgba(255,140,66,.6); }
.card3 .badge { background: rgba(66,201,255,.6); }
.card4 .badge { background: rgba(157,66,255,.6); }
.card5 .badge { background: rgba(66,255,133,.6); }

/* Contenuto card */
.card-content,
.card1 .card-content,
.card2 .card-content,
.card3 .card-content,
.card4 .card-content,
.card5 .card-content{
  padding: 15px;
}

.card h3,
.card1 h3,
.card2 h3,
.card3 h3,
.card4 h3,
.card5 h3{
  margin: 10px 0 4px;
}

/* Titoli card */
.card1 h3 { color: #FF3C5B; }
.card2 h3 { color: #FFA500; }
.card3 h3 { color: #42C9FF; }
.card4 h3 { color: #9D42FF; }
.card5 h3 { color: #42FF85; }

.card p,
.card1 p,
.card2 p,
.card3 p,
.card4 p,
.card5 p{
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

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

.stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:40px;
}

.stat{
  background:rgba(255,255,255,.06);
  border-radius:14px;
  padding:16px;
  text-align:center;
}

.stat strong{ font-size:26px; }

/* ================= ANIMATIONS ================= */

.fade{ animation:fade .6s ease both; }

@keyframes fade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:none; }
}