/* ============================================================
   Stable-Grow — stile condiviso
   ============================================================ */
:root{
  --bg-0:#08130f; --bg-1:#0a1519; --bg-2:#0f2027;
  --neon:#00ffcc; --teal:#3fb5c9; --coin:#F0AD4E;
  --ink:#eaf6f4; --muted:#89a3a7; --line:rgba(0,255,204,.13);
  --card:rgba(6,20,20,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Inter",system-ui,sans-serif; color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -12%, rgba(0,255,204,.07), transparent 60%),
    radial-gradient(900px 600px at 50% 118%, rgba(42,92,139,.18), transparent 55%),
    linear-gradient(160deg,var(--bg-1),var(--bg-2) 55%,var(--bg-0));
  min-height:100vh; display:flex; flex-direction:column;
  position:relative; overflow-x:hidden;
}
body::before{
  content:""; position:fixed; inset:0;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.14) 3px, rgba(0,0,0,0) 4px);
  mix-blend-mode:multiply; pointer-events:none; z-index:2; opacity:.4;
}
body::after{
  content:""; position:fixed; inset:0;
  background:radial-gradient(120% 120% at 50% 35%, transparent 58%, rgba(0,0,0,.5));
  pointer-events:none; z-index:1;
}
.wrap{position:relative; z-index:3; flex:1; display:flex; flex-direction:column}

/* top bar */
header{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px clamp(18px,5vw,44px);
}
.brand{display:inline-flex; align-items:center; gap:10px; text-decoration:none}
.brand img{height:30px; width:auto; display:block}
.signin{
  font-family:"Space Grotesk",sans-serif; font-weight:500;
  font-size:14px; color:var(--muted); text-decoration:none;
  padding:8px 18px; border:1px solid var(--line); border-radius:9px; transition:.2s;
}
.signin:hover{color:var(--ink); border-color:var(--neon); box-shadow:0 0 14px rgba(0,255,204,.16)}

/* hero */
main{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:16px clamp(18px,5vw,44px) 32px; gap:22px;
}
.hero-logo{width:clamp(150px,34vw,220px); height:auto; filter:drop-shadow(0 8px 30px rgba(0,255,204,.18))}
.tagline{
  font-family:"Space Grotesk",sans-serif; font-weight:600;
  font-size:clamp(22px,4.8vw,38px); line-height:1.15; letter-spacing:-.01em;
  color:var(--ink); max-width:16ch;
}
.tagline .hl{color:var(--neon); text-shadow:0 0 22px rgba(0,255,204,.3)}
.subline{
  font-family:"Space Grotesk",sans-serif; font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  display:inline-flex; align-items:center; gap:10px;
}
.subline .live{
  width:7px; height:7px; border-radius:50%; background:var(--neon);
  box-shadow:0 0 8px var(--neon); animation:pulse 2.4s ease-in-out infinite;
}

/* ad slot */
.ad-slot{width:100%; max-width:728px; margin:2px auto 0; display:flex; flex-direction:column; align-items:center; gap:6px}
.ad-slot .ad-label{font-family:"Space Grotesk",sans-serif; font-size:9px; letter-spacing:.22em; text-transform:uppercase; color:rgba(137,163,167,.5)}
.ad-box{
  width:100%; min-height:60px; border-radius:10px;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}

/* info cards */
.cards{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px; width:100%; max-width:720px;
}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:24px 22px; text-align:left; transition:.22s;
}
.card:hover{border-color:rgba(0,255,204,.3); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.card .kick{
  font-family:"Space Grotesk",sans-serif; font-size:11px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--neon); opacity:.85;
}
.card h3{
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:20px;
  margin:10px 0 8px; color:var(--ink);
}
.card p{font-size:13.5px; line-height:1.55; color:var(--muted); margin-bottom:14px}
.card ul{list-style:none; display:flex; flex-direction:column; gap:7px}
.card li{font-size:13px; color:var(--ink); display:flex; align-items:center; gap:9px}
.card li::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--neon); box-shadow:0 0 7px var(--neon); flex:none;
}
.card.sec li::before{background:var(--coin); box-shadow:0 0 7px var(--coin)}

/* actions */
.actions{display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-top:4px}
.btn{
  font-family:"Space Grotesk",sans-serif; font-weight:600; font-size:14px;
  text-decoration:none; padding:12px 28px; border-radius:10px; transition:.2s;
}
.btn-primary{background:var(--neon); color:#04231d; box-shadow:0 0 20px rgba(0,255,204,.3)}
.btn-primary:hover{filter:brightness(1.08); transform:translateY(-2px)}
.btn-ghost{color:var(--muted); border:1px solid var(--line)}
.btn-ghost:hover{color:var(--ink); border-color:var(--neon)}

/* footer */
footer{
  position:relative; z-index:3; text-align:center; padding:20px;
  font-family:"Space Grotesk",sans-serif; font-size:12px; letter-spacing:.03em; color:var(--muted);
}
footer a{color:var(--muted); text-decoration:none}
footer a:hover{color:var(--neon)}

@keyframes pulse{0%,100%{opacity:1}50%{opacity:.25}}
@media (max-width:560px){ .cards{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important} }
:focus-visible{outline:2px solid var(--neon); outline-offset:3px; border-radius:6px}