:root{
  --green:#84cc16;
  --green-d:#65a30d;
  --black:#0a0a0a;
  --ink:#111111;
  --cyan:#22d3ee;
  --white:#ffffff;
  --muted:#a3a3a3;
  --line:rgba(132,204,22,.35);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;
  background:linear-gradient(160deg,#0a0a0a 0%,#0d1206 45%,#0a0a0a 100%);
  color:var(--white);
  line-height:1.7;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.grid-tex{
  background-image:
   linear-gradient(rgba(132,204,22,.07) 1px,transparent 1px),
   linear-gradient(90deg,rgba(132,204,22,.07) 1px,transparent 1px);
  background-size:34px 34px;
}
/* NAV */
header.site{
  position:sticky;top:0;z-index:99;
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  box-shadow:0 6px 26px rgba(132,204,22,.18);
}
.nav-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap}
.logo{
  font-weight:800;font-size:19px;letter-spacing:.5px;
  color:var(--black);background:linear-gradient(90deg,var(--green),var(--cyan));
  padding:7px 14px;clip-path:polygon(0 0,100% 0,100% 70%,calc(100% - 12px) 100%,0 100%);
  box-shadow:0 0 18px rgba(132,204,22,.55);
}
.nav-links{display:flex;gap:6px;flex-wrap:wrap}
.nav-links a{
  font-size:14px;padding:7px 13px;border:1px solid rgba(132,204,22,.35);
  color:#d9f99d;background:rgba(132,204,22,.06);
  clip-path:polygon(0 0,100% 0,100% 65%,calc(100% - 8px) 100%,0 100%);
  transition:.22s;
}
.nav-links a:hover{background:var(--green);color:#0a0a0a;border-color:var(--green);box-shadow:0 0 16px rgba(132,204,22,.7)}
/* HERO */
.hero{
  position:relative;padding:74px 0 66px;
  background:radial-gradient(ellipse at 20% 10%,rgba(132,204,22,.20),transparent 60%),
             radial-gradient(ellipse at 85% 70%,rgba(34,211,238,.16),transparent 55%),#0a0a0a;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.hero .kicker{
  display:inline-block;font-size:12px;letter-spacing:3px;text-transform:uppercase;
  color:#0a0a0a;background:var(--cyan);padding:5px 12px;font-weight:700;
  clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 9px) 100%,0 100%);
}
h1{
  font-size:clamp(30px,5.4vw,54px);line-height:1.18;margin:20px 0 14px;font-weight:900;
  text-shadow:0 0 24px rgba(132,204,22,.45);
}
h1 em{font-style:normal;color:var(--green)}
.hero p.lead{max-width:760px;color:#e5e7eb;font-size:17px}
.btn-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.btn{
  padding:13px 26px;font-weight:700;font-size:15px;
  clip-path:polygon(0 0,100% 0,100% 68%,calc(100% - 14px) 100%,0 100%);
  transition:.22s;
}
.btn-p{background:linear-gradient(90deg,var(--green),var(--green-d));color:#0a0a0a;box-shadow:0 0 22px rgba(132,204,22,.55)}
.btn-p:hover{box-shadow:0 0 34px rgba(132,204,22,.9);transform:translateY(-2px)}
.btn-s{border:1px solid var(--cyan);color:var(--cyan);background:rgba(34,211,238,.08)}
.btn-s:hover{background:var(--cyan);color:#0a0a0a;box-shadow:0 0 22px rgba(34,211,238,.6)}
/* SECTIONS */
section{padding:56px 0}
.sec-head{margin-bottom:30px}
.sec-tag{
  font-size:12px;letter-spacing:2.5px;color:var(--cyan);
  border-left:4px solid var(--green);padding-left:10px;text-transform:uppercase;
}
h2{font-size:clamp(23px,3.2vw,32px);margin-top:8px;font-weight:800;letter-spacing:.5px}
h2 span{color:var(--green)}
.sec-desc{color:var(--muted);margin-top:10px;max-width:820px;font-size:15.5px}
/* GEO */
#geo-intro{background:linear-gradient(180deg,rgba(132,204,22,.10),transparent);border-top:1px solid rgba(132,204,22,.2);border-bottom:1px solid rgba(132,204,22,.2)}
.geo-\boxed{
  border:1px solid var(--line);background:rgba(10,10,10,.7);padding:26px 26px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%);
  box-shadow:0 0 30px rgba(132,204,22,.20) inset,0 0 22px rgba(132,204,22,.12);
  font-size:16px;color:#e7f5c9;
}
.geo-box b{color:var(--green)}
/* CARDS 2-col square-ish */
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.card{
  position:relative;background:rgba(17,17,17,.9);border:1px solid rgba(132,204,22,.4);
  padding:24px 22px;min-height:190px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  box-shadow:0 0 20px rgba(132,204,22,.16);
  transition:.25s;overflow:hidden;
}
.card::after{
  content:"";position:absolute;right:-40px;top:-40px;width:110px;height:110px;
  background:radial-gradient(circle,rgba(34,211,238,.35),transparent 70%);
}
.card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 0 32px rgba(132,204,22,.55)}
.card .ico{font-size:26px}
.card h3{font-size:18px;margin:10px 0 8px;color:#d9f99d}
.card p{font-size:14.6px;color:#bdbdbd}
.card .num{font-size:34px;font-weight:900;color:var(--green);text-shadow:0 0 16px rgba(132,204,22,.6)}
.card .num small{font-size:14px;color:var(--cyan);font-weight:600}
/* EVENTS / MATCH */
.match{
  border:1px solid rgba(34,211,238,.4);background:linear-gradient(135deg,rgba(132,204,22,.10),rgba(10,10,10,.9));
  padding:20px 22px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  box-shadow:0 0 20px rgba(34,211,238,.18);margin-bottom:14px;
}
.match .team{font-weight:800;font-size:17px}
.match .vs{color:var(--cyan);font-weight:900;font-size:20px}
.match .meta{font-size:13px;color:var(--muted)}
.tag{
  font-size:12px;padding:4px 10px;background:var(--green);color:#0a0a0a;font-weight:700;
  clip-path:polygon(0 0,100% 0,100% 60%,calc(100% - 7px) 100%,0 100%);
}
.tag.cy{background:var(--cyan)}
/* RECOMMEND */
.rec{
  border:1px solid var(--line);background:#101010;overflow:hidden;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%);
  transition:.25s;
}
.rec:hover{border-color:var(--green);box-shadow:0 0 30px rgba(132,204,22,.5)}
.rec img{height:190px;width:100%;object-fit:cover;border-bottom:2px solid rgba(132,204,22,.4)}
.rec .body{padding:18px 18px 22px}
.rec h3{font-size:17px;color:#d9f99d;margin-bottom:6px}
.rec p{font-size:14.4px;color:#b8b8b8}
.rec .t{font-size:12px;color:var(--cyan);letter-spacing:1.5px}
/* NEWS */
.news-item{
  display:grid;grid-template-columns:118px 1fr;gap:18px;
  border:1px solid rgba(132,204,22,.32);background:rgba(15,15,15,.92);
  padding:18px;margin-bottom:14px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%);
  transition:.22s;
}
.news-item:hover{border-color:var(--green);box-shadow:0 0 26px rgba(132,204,22,.4)}
.news-thumb{width:118px;height:96px;object-fit:cover;border:1px solid rgba(34,211,238,.45)}
.news-body h3{font-size:17px;margin-bottom:7px;line-height:1.5}
.news-body h3 a:hover{color:var(--green)}
.news-meta{font-size:13px;color:var(--cyan);margin-bottom:7px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.news-meta .pill{background:rgba(132,204,22,.16);border:1px solid var(--line);padding:2px 9px;color:#d9f99d;font-size:12px}
.news-body p{font-size:14.6px;color:#b5b5b5}
/* FAQ */
.faq-item{
  border:1px solid rgba(132,204,22,.35);background:rgba(14,14,14,.94);
  padding:18px 20px;margin-bottom:13px;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
}
.faq-item h3{font-size:16.6px;color:#d9f99d;margin-bottom:9px}
.faq-item h3::before{content:"Q ";color:var(--cyan);font-weight:900}
.faq-item p{font-size:15px;color:#c3c3c3}
.faq-item p::before{content:"A ";color:var(--green);font-weight:900}
/* CTA */
#cta{
  background:linear-gradient(120deg,rgba(132,204,22,.22),rgba(34,211,238,.14)),#0a0a0a;
  border-top:1px solid var(--green);border-bottom:1px solid var(--green);text-align:center;
}
/* ABOUT */
.about-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:center}
.about-grid img{border:1px solid var(--line);box-shadow:0 0 26px rgba(132,204,22,.3);height:100%;object-fit:cover;min-height:250px}
/* FOOTER */
footer{background:#080808;border-top:1px solid var(--line);padding:38px 0 26px;font-size:14.4px;color:#9a9a9a}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;margin-bottom:22px}
footer h4{color:var(--green);font-size:15px;margin-bottom:10px;letter-spacing:1px}
footer ul{list-style:none}
footer li{margin-bottom:7px}
footer a:hover{color:var(--green)}
.f-bottom{border-top:1px solid rgba(132,204,22,.2);padding-top:16px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13.5px}
@media(max-width:820px){
  .cards{grid-template-columns:1fr}
  .about-grid{grid-template-columns:1fr}
  .news-item{grid-template-columns:1fr}
  .news-thumb{width:100%;height:170px}
}