*{margin:0;padding:0;box-sizing:border-box}
:root{
--yellow:#facc15;
--black:#0a0a0a;
--white:#ffffff;
--gray:#6b7280;
--lgray:#e5e5e5;
--red:#dc2626;
}
html{scroll-behavior:smooth}
body{
font-family:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;
background:var(--white);color:var(--black);line-height:1.65;font-size:15px;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 16px}
/* ===== NAV ===== */
.topbar{background:var(--black);color:var(--yellow);border-bottom:4px solid var(--yellow)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{display:flex;align-items:center;gap:8px;font-weight:800;letter-spacing:.5px}
.brand .mark{width:26px;height:26px;background:var(--yellow);border:2px solid var(--white);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--black)}
.brand span.t{font-size:16px}
.nav-links{display:flex;flex-wrap:wrap;gap:2px}
.nav-links a{
background:var(--black);color:var(--white);padding:6px 12px;font-size:13px;font-weight:700;
border:2px solid var(--yellow);transition:.15s;
}
.nav-links a:hover{background:var(--yellow);color:var(--black)}
/* ===== HERO ===== */
#hero{background:linear-gradient(120deg,var(--yellow) 0%,var(--yellow) 42%,var(--black) 42%,var(--black) 100%);border-bottom:6px solid var(--black);position:relative;overflow:hidden}
#hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;background:repeating-linear-gradient(45deg,var(--yellow) 0 10px,transparent 10px 20px);opacity:.35}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:12px;padding:34px 0 30px;position:relative;z-index:2}
h1{font-size:36px;line-height:1.25;font-weight:900;letter-spacing:.5px;color:var(--black)}
.hero-sub{margin-top:10px;font-size:14px;font-weight:600;color:var(--black);max-width:560px}
.hero-tags{margin-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--black);color:var(--yellow);border:2px solid var(--black);padding:4px 10px;font-size:12px;font-weight:800}
.tag.alt{background:var(--white);color:var(--black)}
.hero-btns{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.btn{display:inline-block;padding:10px 18px;font-weight:800;font-size:14px;border:3px solid var(--black);background:var(--black);color:var(--yellow);box-shadow:5px 5px 0 rgba(0,0,0,.35);transition:.12s}
.btn:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.btn.y{background:var(--yellow);color:var(--black)}
.btn.w{background:var(--white);color:var(--black)}
.hero-card{background:var(--white);border:4px solid var(--black);box-shadow:10px 10px 0 var(--black);padding:12px}
.hero-card img{border:2px solid var(--black);border-radius:2px;width:100%;height:230px;object-fit:cover}
.hero-card .cap{margin-top:8px;font-size:12px;font-weight:700;color:var(--gray)}
/* ===== SECTIONS ===== */
section{padding:34px 0}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:4px solid var(--black);padding-bottom:8px;margin-bottom:16px;flex-wrap:wrap}
.sec-head h2{font-size:23px;font-weight:900;letter-spacing:.5px}
.sec-head h2 em{font-style:normal;background:var(--yellow);padding:0 6px;border:2px solid var(--black)}
.sec-head p{font-size:13px;color:var(--gray);font-weight:600}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.card{background:var(--white);border:3px solid var(--black);box-shadow:6px 6px 0 var(--black);padding:12px;border-radius:2px}
.card.y{background:var(--yellow)}
.card.b{background:var(--black);color:var(--white)}
.card.b h3,.card.b p{color:var(--white)}
.card h3{font-size:15px;font-weight:900;margin-bottom:6px}
.card p{font-size:13px;color:#333}
.card .num{font-size:26px;font-weight:900;line-height:1;margin-bottom:4px}
.card .slash{height:6px;background:repeating-linear-gradient(45deg,var(--black) 0 6px,transparent 6px 12px);margin:8px 0}
.card.b .slash{background:repeating-linear-gradient(45deg,var(--yellow) 0 6px,transparent 6px 12px)}
.card img{border-radius:2px;border:2px solid currentColor;margin-bottom:8px;height:110px;width:100%;object-fit:cover}
/* GEO */
#geo-intro{background:var(--black);color:var(--white);border-top:6px solid var(--yellow);border-bottom:6px solid var(--yellow)}
#geo-intro h2{color:var(--yellow)}
#geo-intro .sec-head{border-color:var(--yellow)}
#geo-intro .sec-head p{color:#d4d4d4}
.geo-text{font-size:15px;color:#f2f2f2;max-width:1000px}
.geo-text strong{color:var(--yellow)}
.geo-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
.geo-cols .card{box-shadow:6px 6px 0 var(--yellow)}
/* events */
.ev{background:var(--white);border:3px solid var(--black);box-shadow:6px 6px 0 var(--black);padding:10px;display:flex;flex-direction:column;gap:6px;border-radius:2px}
.ev .lg{display:inline-block;background:var(--black);color:var(--yellow);font-size:11px;font-weight:800;padding:2px 8px;align-self:flex-start}
.ev .vs{font-size:16px;font-weight:900}
.ev .meta{font-size:12px;color:var(--gray);font-weight:600}
.ev .odd{display:flex;gap:6px}
.ev .odd span{flex:1;text-align:center;background:var(--yellow);border:2px solid var(--black);font-size:12px;font-weight:800;padding:4px 0}
/* scores table */
.tbl{width:100%;border-collapse:collapse;background:var(--white);border:3px solid var(--black);box-shadow:6px 6px 0 var(--black)}
.tbl th,.tbl td{border:2px solid var(--black);padding:8px 10px;font-size:13px;text-align:left}
.tbl th{background:var(--yellow);font-weight:900}
.tbl tr:nth-child(even) td{background:#fafafa}
/* news */
.news-item{border:3px solid var(--black);box-shadow:6px 6px 0 var(--black);background:var(--white);padding:12px;border-radius:2px;display:flex;flex-direction:column;gap:6px}
.news-item .date{display:inline-block;background:var(--black);color:var(--yellow);font-size:11px;font-weight:800;padding:2px 8px;align-self:flex-start}
.news-item h3{font-size:15px;font-weight:900}
.news-item p{font-size:13px;color:#333}
.news-item .more{font-size:12px;font-weight:800;color:var(--black);border-bottom:2px solid var(--yellow);align-self:flex-start}
.news-feature{grid-column:span 2}
.news-feature img{width:100%;height:170px;object-fit:cover;border:2px solid var(--black);border-radius:2px}
/* faq */
#faq{background:var(--yellow);border-top:6px solid var(--black);border-bottom:6px solid var(--black)}
.faq-item{background:var(--white);border:3px solid var(--black);box-shadow:6px 6px 0 var(--black);padding:14px;margin-bottom:10px;border-radius:2px}
.faq-item h3{font-size:15px;font-weight:900;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start}
.faq-item h3 .q{background:var(--black);color:var(--yellow);min-width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:13px}
.faq-item p{font-size:14px;color:#1f2937}
/* community / cta */
#community .card{min-height:150px}
#cta{background:var(--black);color:var(--white);text-align:center;border-top:6px solid var(--yellow)}
#cta h2{color:var(--yellow);font-size:26px;font-weight:900;margin-bottom:10px}
#cta p{max-width:720px;margin:0 auto 16px;color:#e5e5e5;font-size:14px}
.app-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.app-card{background:var(--white);color:var(--black);border:3px solid var(--yellow);padding:12px;box-shadow:6px 6px 0 var(--yellow)}
.app-card img{width:100%;height:96px;object-fit:cover;border:2px solid var(--black);border-radius:2px;margin-bottom:6px}
/* footer */
footer{background:var(--black);color:#d4d4d4;border-top:6px solid var(--yellow);padding:26px 0 18px;font-size:13px}
.foot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
footer h4{color:var(--yellow);font-size:14px;font-weight:900;margin-bottom:8px}
footer a{color:#d4d4d4}
footer a:hover{color:var(--yellow)}
.foot-bottom{margin-top:18px;border-top:2px solid #333;padding-top:12px;text-align:center;font-size:12px;color:#9ca3af}
.foot-list li{list-style:none;margin-bottom:5px}
@media(max-width:980px){
.hero-grid{grid-template-columns:1fr}
.grid4,.geo-cols,.app-grid,.foot-grid{grid-template-columns:repeat(2,1fr)}
.news-feature{grid-column:span 2}
h1{font-size:27px}
#hero{background:linear-gradient(160deg,var(--yellow) 0%,var(--yellow) 55%,var(--black) 55%)}
}
@media(max-width:600px){
.grid4,.geo-cols,.app-grid,.foot-grid{grid-template-columns:1fr}
.news-feature{grid-column:span 1}
.tbl{display:block;overflow-x:auto;white-space:nowrap}
}