:root{
  --bg:#0b1324;
  --bg2:#101c36;
  --card:#15223f;
  --line:#243557;
  --text:#e9eefb;
  --muted:#9fb0d2;
  --green:#7ce84a;
  --orange:#ff8a1f;
  --orange2:#ffb347;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  min-height:100vh;
  background-image:
    radial-gradient(1200px 500px at 50% -120px, rgba(124,232,74,.12), transparent 60%),
    radial-gradient(800px 400px at 50% 100%, rgba(255,138,31,.08), transparent 60%);
}
a{color:inherit;text-decoration:none}

.hero{
  position:relative;
  width:100%;
  max-width:1100px;
  margin:0 auto;
  aspect-ratio:1600/450;
  background:url("assets/banner.jpg") center/cover no-repeat;
}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom, transparent 70%, var(--bg) 100%);
}

.wrap{max-width:720px;margin:0 auto;padding:0 20px 60px}

.head{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  margin-top:-30px;position:relative;z-index:1
}
.logo{
  width:112px;height:112px;border-radius:50%;
  border:4px solid var(--green);
  box-shadow:0 0 0 6px var(--bg),0 10px 30px rgba(0,0,0,.5);
  object-fit:cover;background:#000
}
h1{
  font-family:"Bangers","Impact",sans-serif;
  font-size:clamp(2.4rem,7vw,3.6rem);
  letter-spacing:.04em;
  line-height:1;
  margin-top:14px;
  background:linear-gradient(180deg,var(--green) 0%,var(--green) 45%,var(--orange2) 55%,var(--orange) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 3px 0 rgba(0,0,0,.6));
}
.tag{margin-top:6px;font-size:1.1rem;color:var(--muted)}
.tag b{color:var(--text);font-weight:800}

.latest{
  margin-top:34px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.latest .label{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;font-size:.8rem;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--green)
}
.latest .label .dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 10px var(--green)}
.video{position:relative;aspect-ratio:16/9;background:#000}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.latest .cap{padding:14px 16px 16px}
.latest .cap h2{font-size:1.15rem;font-weight:800}
.latest .cap p{color:var(--muted);font-size:.95rem;margin-top:4px}

.links{margin-top:28px;display:grid;gap:12px}
.btn{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:14px;
  font-weight:800;font-size:1.05rem;
  transition:transform .12s ease,border-color .12s ease,background .12s ease;
}
.btn:hover{transform:translateY(-2px);border-color:var(--green);background:var(--bg2)}
.btn .ic{
  width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;
  color:#fff
}
.btn .ic svg{width:22px;height:22px;fill:currentColor}
.btn .sub{display:block;font-size:.8rem;font-weight:600;color:var(--muted)}
.btn .arrow{margin-left:auto;color:var(--muted)}
.btn.primary{border-color:var(--green);background:linear-gradient(135deg,rgba(124,232,74,.14),rgba(255,138,31,.08))}
.btn.primary .arrow{color:var(--green)}

.tiktok .ic{background:#000;border:1px solid #333}
.youtube .ic{background:#ff0000}
.instagram .ic{background:linear-gradient(45deg,#f9ce34,#ee2a7b,#6228d7)}
.facebook .ic{background:#1877f2}
.threads .ic{background:#000;border:1px solid #333}
.x .ic{background:#000;border:1px solid #333}

.about{
  margin-top:40px;padding:22px;border-radius:16px;
  background:var(--bg2);border:1px dashed var(--line);
  text-align:center
}
.about h3{font-family:"Bangers","Impact",sans-serif;letter-spacing:.05em;font-size:1.6rem;color:var(--orange)}
.about p{color:var(--muted);margin-top:8px}
.about .mail{display:inline-block;margin-top:12px;color:var(--green);font-weight:800}

footer{margin-top:40px;text-align:center;color:var(--muted);font-size:.8rem}
footer .rip{font-family:"Bangers","Impact",sans-serif;letter-spacing:.08em;color:#6b7ea8}

@media (max-width:480px){
  .head{margin-top:-18px}
  .logo{width:92px;height:92px}
  .btn{padding:14px 14px;font-size:1rem}
}