/* ============================================================
   BetStorm Homepage — homepage.css
   Dark theme coerente con admin panel
   Mobile-first • Card-based • SaaS style
   ============================================================ */

/* --- Variables (match admin) --- */
:root {
  --bg: #070a0f;
  --bg2: #0d1117;
  --bg3: #161b22;
  --text: #e6edf3;
  --muted: #8b949e;
  --green: #00e676;
  --green2: #00c853;
  --gold: #ffd600;
  --border: rgba(255,255,255,.06);
  --radius: 12px;
  --font: 'DM Sans', system-ui, sans-serif;
  --font-head: 'Syne', system-ui, sans-serif;
  --max-w: 1060px;
}

/* --- Reset --- */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box }
html { scroll-behavior: smooth }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased }
a { color: var(--green); text-decoration: none }
img { max-width: 100%; display: block }

/* --- Layout --- */
.hp-container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px }
.hp-section { padding: 80px 0 }
.hp-section--alt { background: var(--bg2) }
.hp-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--green); font-weight: 600; margin-bottom: 10px }
.hp-title { font-family: var(--font-head); font-size: clamp(1.5rem,4vw,2.2rem); font-weight: 800; margin-bottom: 14px; line-height: 1.2 }
.hp-sub { color: var(--muted); font-size: .95rem; max-width: 560px; margin-bottom: 36px }
.hp-center { text-align: center }
.hp-mx { margin-left: auto; margin-right: auto }

/* --- Buttons --- */
.hp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: var(--radius); font-weight: 700; font-size: .9rem; border: none; cursor: pointer; transition: transform .2s, box-shadow .2s; text-decoration: none; font-family: var(--font) }
.hp-btn:hover { transform: translateY(-2px) }
.hp-btn--green { background: linear-gradient(135deg, var(--green2), var(--green)); color: var(--bg); box-shadow: 0 4px 18px rgba(0,230,118,.2) }
.hp-btn--outline { background: transparent; border: 1px solid var(--border); color: var(--text) }
.hp-btn--outline:hover { border-color: var(--green); color: var(--green) }
.hp-btn--gold { background: linear-gradient(135deg, #ff8f00, var(--gold)); color: var(--bg); box-shadow: 0 4px 18px rgba(255,214,0,.15) }
.hp-btn--sm { padding: 10px 18px; font-size: .82rem }

/* --- Header --- */
.hp-header { position: sticky; top: 0; z-index: 100; background: rgba(7,10,15,.92); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); padding: 12px 0 }
.hp-header__inner { display: flex; align-items: center; justify-content: space-between }
.hp-logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-head); font-size: 1.1rem; color: #fff; font-weight: 800 }
.hp-logo img { width: 30px; height: 30px; border-radius: 8px }
.hp-logo b { color: var(--green) }
.hp-nav { display: flex; align-items: center; gap: 20px }
.hp-nav a { color: var(--muted); font-size: .85rem; font-weight: 500; transition: color .2s }
.hp-nav a:hover { color: var(--text) }
.hp-nav__cta { display: flex; gap: 8px }
@media (max-width:768px) { .hp-nav { display: none } }

/* --- Hero --- */
.hp-hero { padding: 90px 0 70px; text-align: center; position: relative; overflow: hidden }
.hp-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 45% at 50% 0%, rgba(0,230,118,.07), transparent 70%); pointer-events: none }
.hp-hero__badge { display: inline-block; background: rgba(0,230,118,.08); border: 1px solid rgba(0,230,118,.15); border-radius: 20px; padding: 5px 14px; font-size: .75rem; color: var(--green); font-weight: 600; margin-bottom: 20px }
.hp-hero h1 { font-family: var(--font-head); font-size: clamp(1.8rem,5vw,2.8rem); font-weight: 800; line-height: 1.15; margin-bottom: 18px; max-width: 680px; margin-left: auto; margin-right: auto }
.hp-hero__sub { color: var(--muted); font-size: clamp(.9rem,2vw,1.08rem); max-width: 520px; margin: 0 auto 28px }
.hp-hero__ctas { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 24px }
.hp-hero__trust { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; font-size: .75rem; color: var(--muted) }
.hp-hero__trust span { display: flex; align-items: center; gap: 5px }
.hp-hero__trust i { color: var(--green); font-size: .6rem }

/* --- Grid --- */
.hp-grid { display: grid; gap: 16px }
.hp-grid--3 { grid-template-columns: repeat(3,1fr) }
.hp-grid--2 { grid-template-columns: repeat(2,1fr) }
@media (max-width:768px) { .hp-grid--3, .hp-grid--2 { grid-template-columns: 1fr } }

/* --- Cards --- */
.hp-card { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; padding: 24px; transition: border-color .3s, transform .3s }
.hp-card:hover { border-color: rgba(0,230,118,.15); transform: translateY(-3px) }
.hp-card__step { font-family: var(--font-head); font-size: 1.8rem; font-weight: 800; color: var(--green); opacity: .25; margin-bottom: 6px }
.hp-card__icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; margin-bottom: 14px }
.hp-card__icon--g { background: rgba(0,230,118,.08); color: var(--green) }
.hp-card__icon--y { background: rgba(255,214,0,.08); color: var(--gold) }
.hp-card__icon--b { background: rgba(96,165,250,.08); color: #60a5fa }
.hp-card__title { font-family: var(--font-head); font-size: .98rem; font-weight: 700; margin-bottom: 6px }
.hp-card__text { color: var(--muted); font-size: .84rem; line-height: 1.5 }

/* --- Bullet --- */
.hp-bullets { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
@media (max-width:600px) { .hp-bullets { grid-template-columns: 1fr } }
.hp-bullet { display: flex; gap: 12px; align-items: flex-start; padding: 14px; background: var(--bg3); border-radius: var(--radius); border: 1px solid var(--border) }
.hp-bullet__icon { width: 34px; height: 34px; border-radius: 8px; background: rgba(0,230,118,.08); color: var(--green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: .9rem }
.hp-bullet__title { font-weight: 700; font-size: .88rem; margin-bottom: 2px }
.hp-bullet__text { color: var(--muted); font-size: .8rem }

/* --- Match Card --- */
.hp-match { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; max-width: 560px; margin: 0 auto }
.hp-match__head { background: rgba(0,230,118,.05); padding: 14px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border) }
.hp-match__league { font-size: .75rem; color: var(--muted) }
.hp-match__badge { background: rgba(0,230,118,.12); color: var(--green); padding: 3px 10px; border-radius: 6px; font-size: .7rem; font-weight: 700 }
.hp-match__body { padding: 22px }
.hp-match__teams { font-family: var(--font-head); font-size: 1.3rem; font-weight: 800; text-align: center; margin-bottom: 18px }
.hp-match__vs { color: var(--muted); font-weight: 400; font-size: .9rem; margin: 0 6px }
.hp-match__stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px }
.hp-match__stat { text-align: center; padding: 10px; background: rgba(255,255,255,.02); border-radius: var(--radius) }
.hp-match__stat-lbl { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px }
.hp-match__stat-val { font-family: var(--font-head); font-size: 1.15rem; font-weight: 800 }
.hp-match__insight { background: rgba(0,230,118,.05); border: 1px solid rgba(0,230,118,.12); border-radius: var(--radius); padding: 12px; text-align: center; margin-bottom: 18px; font-size: .88rem }
.hp-match__insight i { color: var(--green); margin-right: 5px }

/* --- Plans --- */
.hp-plan { background: var(--bg3); border: 1px solid var(--border); border-radius: 16px; padding: 28px; text-align: center; transition: border-color .3s, transform .3s }
.hp-plan:hover { transform: translateY(-3px) }
.hp-plan--pop { border-color: rgba(0,230,118,.3); position: relative }
.hp-plan--pop::before { content: 'Piu popolare'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--green); color: var(--bg); padding: 3px 14px; border-radius: 10px; font-size: .7rem; font-weight: 700 }
.hp-plan__name { font-family: var(--font-head); font-size: 1.1rem; font-weight: 800; margin-bottom: 4px }
.hp-plan__price { font-family: var(--font-head); font-size: 2rem; font-weight: 800; color: var(--green); margin-bottom: 4px }
.hp-plan__price span { font-size: .85rem; color: var(--muted); font-weight: 400 }
.hp-plan__features { list-style: none; margin: 18px 0; text-align: left; font-size: .84rem; color: var(--muted) }
.hp-plan__features li { padding: 5px 0; display: flex; gap: 8px; align-items: center }
.hp-plan__features li i { color: var(--green); font-size: .7rem }

/* --- CTA Banner --- */
.hp-cta-banner { background: linear-gradient(135deg, rgba(0,230,118,.06), rgba(124,77,255,.04)); border: 1px solid rgba(0,230,118,.12); border-radius: 16px; padding: 44px 28px; text-align: center }

/* --- Footer --- */
.hp-footer { border-top: 1px solid var(--border); padding: 36px 0; text-align: center; color: var(--muted); font-size: .78rem }
.hp-footer a { color: var(--muted) }
.hp-footer a:hover { color: var(--green) }
.hp-footer__links { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; margin-bottom: 14px }
.hp-footer__disc { max-width: 560px; margin: 14px auto 0; font-size: .7rem; line-height: 1.5 }

/* --- Reveal animation --- */
.hp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease }
.hp-reveal--visible { opacity: 1; transform: translateY(0) }


/* --- Mobile header logo fix --- */
@media (max-width:480px) {
  .hp-header__inner { gap: 8px }
  .hp-logo { font-size: .95rem; gap: 6px; flex-shrink: 0 }
  .hp-logo img { width: 28px !important; height: 28px !important }
  .hp-nav__cta { gap: 6px }
  .hp-nav__cta .hp-btn { padding: 8px 12px; font-size: .78rem }
}
@media (max-width:360px) {
  .hp-logo { font-size: .85rem }
  .hp-logo img { width: 24px !important; height: 24px !important }
  .hp-nav__cta .hp-btn--outline { display: none }
}