:root{
  --text:#e9f2ff; --muted:#a8bed3;
  --card:#08131a; --border:#103040;
  --primary:#10ff88; --primary2:#11a8ff;
  --btn:#0b1a22; --btn-border:#1a3644;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;min-height:100%}
a{color:inherit;text-decoration:none}
.container{max-width:1220px;margin:0 auto;padding:20px}
.bg{position:fixed;inset:0;z-index:-1;background:
  radial-gradient(900px 420px at 20% 0%, rgba(17,168,255,.22), transparent),
  radial-gradient(800px 420px at 80% 100%, rgba(16,255,136,.20), transparent),
  linear-gradient(135deg, #021018, #03141d);
  animation:bgShift 10s ease-in-out infinite alternate}
@keyframes bgShift{0%{filter:hue-rotate(0)}100%{filter:hue-rotate(25deg)}}
.site-header{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.2px}
.brand img{height:44px;width:auto;border-radius:12px;box-shadow:0 6px 24px rgba(0,0,0,.5)}
.nav{display:flex;gap:16px}
.header-actions{display:flex;gap:10px}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 16px;border-radius:14px;border:1px solid var(--btn-border);background:var(--btn);cursor:pointer;font-weight:700;transition:.2s ease}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(0,0,0,.35)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#00130b;border-color:transparent}
.btn-outline{background:transparent}
.btn-ghost{background:#07141a}
.btn.wide{width:100%}
.hero h1{font-size:clamp(28px,5vw,56px);margin:6px 0 6px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.neon{position:relative}
.neon::after{content:"";position:absolute;inset:0;filter:blur(14px);background:conic-gradient(from 180deg at 50% 50%, rgba(16,255,136,.25), rgba(17,168,255,.25), transparent);}
/* 5-column cards */
.cards{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:10px}
@media (max-width:1180px){.cards{grid-template-columns:repeat(4,1fr)}}
@media (max-width:960px){.cards{grid-template-columns:repeat(3,1fr)}}
@media (max-width:720px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,rgba(4,20,28,.72),rgba(3,16,24,.72));border:1px solid var(--border);border-radius:18px;padding:16px;backdrop-filter: blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;flex-direction:column;gap:10px;transition:.2s ease}
.card:hover{transform:translateY(-2px);border-color:#1d4c60}
.logo{height:64px;display:grid;place-items:center;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.logo img{max-height:44px;max-width:92%;object-fit:contain;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
.card h3{margin:6px 0 2px 0;font-size:16px}
.card .bonus{margin:0;color:#d3e7f9;font-size:14px;min-height:36px}
/* Contact sections */
.contact h2{margin:8px 0 8px}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap}
.footer{color:#c9d7e6;border-top:1px solid var(--border);margin-top:20px;padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}


/* Sticky grass banner */
.sticky-banner{position:fixed;left:0;right:0;bottom:0;z-index:50;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.25)),
    linear-gradient(180deg, #0e7a2f, #0a5c24);
  border-top:1px solid rgba(255,255,255,.12);
  box-shadow:0 -10px 40px rgba(0,0,0,.45);
}
.banner-content{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px}
.banner-left{display:flex;align-items:center;gap:12px}
.banner-left strong{font-size:16px}
.banner-left .muted{color:var(--muted);font-size:13px}
.balls{width:64px;height:40px;position:relative}
.balls::before,
.balls::after{content:"";position:absolute;border-radius:50%}
/* tennis ball */
.balls::before{left:0;top:4px;width:22px;height:22px;background:radial-gradient(circle at 30% 30%, #fff 0 4px, transparent 4px), #d2ff4a;box-shadow:0 0 14px rgba(210,255,74,.6)}
/* basketball */
.balls::after{left:26px;top:10px;width:22px;height:22px;background:
  radial-gradient(circle at 50% 50%, rgba(0,0,0,.3) 60%, transparent 61%),
  #ff6a2a;box-shadow:0 0 14px rgba(255,106,42,.5)}
/* football (soccer) */
.balls span{position:absolute;right:0;top:0;width:22px;height:22px;border-radius:50%;
  background:
   radial-gradient(circle at 40% 40%, #111 0 6px, transparent 6px),
   radial-gradient(circle at 70% 70%, #111 0 6px, transparent 6px),
   #fff;box-shadow:0 0 14px rgba(255,255,255,.4)}
.banner-right{display:flex;align-items:center;gap:12px}
.banner-logo{height:38px;width:auto;opacity:.9;filter:drop-shadow(0 6px 16px rgba(0,0,0,.5))}
/* prevent overlap with banner */
body{padding-bottom:70px}
@media(max-width:520px){body{padding-bottom:90px} .banner-logo{height:32px} .banner-left strong{font-size:14px}}


/* Centered simple hero */
.center-hero{display:grid;place-items:center;text-align:center;padding-top:24px;padding-bottom:10px}
.center-hero h1{font-size:clamp(28px,6vw,58px);margin:10px 0}

/* Simplified banner (no balls) */
.sticky-banner .banner-content{padding:12px 20px}
.sticky-banner .banner-left{gap:10px}
.sticky-banner .banner-left strong{font-size:15px}


/* Bigger hero title */
.center-hero h1{font-size:clamp(30px,7vw,62px)}

/* Reduce bottom padding for sticky banner overlap on mobile */
@media(max-width:520px){body{padding-bottom:70px}}

/* Golden channel card */
.channel-highlight{margin-top:14px}
.gold-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(135deg,#f7d75c,#f3b22a);
  color:#231800;border:1px solid rgba(0,0,0,.15);
  border-radius:18px;padding:14px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.gold-left{display:flex;align-items:center;gap:12px}
.gold-left img{height:48px;width:auto;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.gold-meta h3{margin:0 0 2px 0;font-size:18px}
.gold-meta .muted{color:#4a3815}
.btn-gold{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(135deg,#fff,#ffeaa8);color:#2b2105;font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.25);transition:.2s ease
}
.btn-gold:hover{transform:translateY(-1px)}
@media(max-width:640px){
  .gold-card{flex-direction:column;align-items:stretch;text-align:center}
  .gold-left{justify-content:center}
  .btn-gold{width:100%}
}


/* Blue contact card */
.contact-highlight{margin-top:12px}
.blue-card{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:linear-gradient(135deg,#22c1ff,#6ae3ff);
  color:#02121b;border:1px solid rgba(0,0,0,.15);
  border-radius:18px;padding:14px 16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.blue-left{display:flex;align-items:center;gap:12px}
.blue-left img{height:48px;width:auto;border-radius:12px;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.blue-meta h3{margin:0 0 2px 0;font-size:18px}
.btn-blue{
  display:inline-flex;align-items:center;justify-content:center;
  padding:12px 16px;border-radius:14px;border:1px solid rgba(0,0,0,.25);
  background:linear-gradient(135deg,#ffffff,#d9f6ff);color:#05202c;font-weight:800;
  box-shadow:0 8px 20px rgba(0,0,0,.25);transition:.2s ease
}
.btn-blue:hover{transform:translateY(-1px)}
@media(max-width:640px){
  .blue-card{flex-direction:column;align-items:stretch;text-align:center}
  .blue-left{justify-content:center}
  .btn-blue{width:100%}
}


/* Uniform CTA button sizing across all cards */
.btn{font-size:15px; line-height:1; min-height:44px; padding:12px 16px; white-space:nowrap}
.cards .btn-primary.wide{width:100%}