:root{
  --green:#39ff14;
  --dark:#050805;
  --panel:#0b120d;
  --white:#f4fff4;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:Arial,Helvetica,sans-serif;
  background:
    radial-gradient(circle at top right, rgba(57,255,20,.22), transparent 35%),
    linear-gradient(135deg,#020402,#09120b 60%,#020402);
  color:var(--white);
}
.header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 6%;
  position:sticky;
  top:0;
  background:rgba(2,4,2,.78);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(57,255,20,.2);
  z-index:10;
}
.logo{
  font-size:28px;
  font-weight:900;
  color:var(--green);
  text-shadow:0 0 18px var(--green);
}
nav{display:flex;gap:22px}
nav a{color:#dfffe0;text-decoration:none;font-weight:700}
.actions,.hero-buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{
  display:inline-block;
  padding:11px 18px;
  border-radius:999px;
  background:var(--green);
  color:#031003;
  text-decoration:none;
  font-weight:900;
  box-shadow:0 0 22px rgba(57,255,20,.45);
}
.btn.ghost{
  background:transparent;
  color:var(--green);
  border:1px solid var(--green);
}
.btn.big{padding:15px 26px}
.hero{
  min-height:78vh;
  display:grid;
  grid-template-columns:1.4fr .8fr;
  gap:32px;
  align-items:center;
  padding:70px 6%;
}
.badge{
  display:inline-block;
  padding:8px 14px;
  border:1px solid rgba(57,255,20,.55);
  border-radius:999px;
  color:var(--green);
  font-weight:900;
  letter-spacing:1px;
}
h1{
  font-size:clamp(42px,7vw,92px);
  line-height:.95;
  margin:18px 0;
  text-transform:uppercase;
}
.desc{font-size:20px;color:#c8e8cb;max-width:720px}
.hero-card,.card,.promo,.faq details{
  background:linear-gradient(180deg,rgba(57,255,20,.12),rgba(255,255,255,.03));
  border:1px solid rgba(57,255,20,.3);
  border-radius:24px;
  box-shadow:0 0 40px rgba(57,255,20,.12);
}
.hero-card{padding:28px}
.hero-card li{margin:14px 0}
.section{padding:55px 6%}
.section h2{font-size:38px;margin-top:0}
.grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.card{padding:22px}
.card p,.promo p,.faq p{color:#cbe8ce}
.promo{
  margin:50px 6%;
  padding:34px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.faq{display:grid;gap:14px}
.faq details{padding:18px}
.faq summary{cursor:pointer;font-weight:900;color:var(--green)}
.live{
  position:fixed;
  left:18px;
  bottom:18px;
  background:#061006;
  border:1px solid var(--green);
  color:var(--green);
  padding:12px 16px;
  border-radius:14px;
  box-shadow:0 0 20px rgba(57,255,20,.35);
  font-weight:800;
}
footer{
  padding:35px 6%;
  text-align:center;
  border-top:1px solid rgba(57,255,20,.18);
  color:#c7eac9;
}
@media(max-width:850px){
  .header{flex-direction:column;gap:12px}
  nav{display:none}
  .hero{grid-template-columns:1fr;padding-top:45px}
  .grid{grid-template-columns:1fr}
  .promo{flex-direction:column;align-items:flex-start}
}