:root{
  --purple:#a855f7;
  --green:#22c55e;
  --yellow:#fde047;
  --ink:#141018;
  --paper:#fdfbff;
  --shadow:8px 8px 0 var(--ink);
  --shadow-sm:5px 5px 0 var(--ink);
}
*{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:var(--paper);
  color:var(--ink);
  line-height:1.75;
  overflow-x:hidden;
  background-image:radial-gradient(circle at 12% 8%,rgba(168,85,247,.14) 0 22%,transparent 23%),radial-gradient(circle at 88% 22%,rgba(34,197,94,.14) 0 18%,transparent 19%);
  background-attachment:fixed;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.wrap{max-width:1220px;margin:0 auto;padding:0 22px;}

/* NAV */
header.nav{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(100deg,var(--purple),var(--green));
  border-bottom:4px solid var(--ink);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;flex-wrap:wrap;}
.logo{
  display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.28rem;letter-spacing:.5px;
  background:#fff;border:3px solid var(--ink);border-radius:999px;padding:7px 18px;box-shadow:var(--shadow-sm);
}
.logo .dot{width:14px;height:14px;border-radius:50%;background:var(--yellow);border:2px solid var(--ink);}
.nav-links{display:flex;gap:8px;flex-wrap:wrap;}
.nav-links a{
  background:#fff;border:3px solid var(--ink);border-radius:999px;padding:7px 16px;font-weight:800;font-size:.94rem;
  box-shadow:3px 3px 0 var(--ink);transition:.18s;
}
.nav-links a:hover{background:var(--yellow);transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink);}

/* HERO */
#hero{padding:64px 0 48px;position:relative;}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:38px;align-items:center;}
.eyebrow{
  display:inline-block;background:var(--yellow);border:3px solid var(--ink);border-radius:999px;
  padding:5px 16px;font-weight:900;font-size:.85rem;box-shadow:3px 3px 0 var(--ink);margin-bottom:16px;
}
h1{
  font-size:clamp(2rem,4.4vw,3.35rem);line-height:1.18;font-weight:900;letter-spacing:-1px;
}
h1 .grad{
  background:linear-gradient(95deg,var(--purple),var(--green));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-p{
  margin-top:18px;font-size:1.05rem;max-width:600px;background:#fff;border:3px solid var(--ink);
  border-radius:22px;padding:18px 22px;box-shadow:var(--shadow-sm);
}
.hero-btns{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;}
.btn{
  display:inline-block;border:3px solid var(--ink);border-radius:999px;padding:12px 26px;font-weight:900;
  box-shadow:var(--shadow-sm);transition:.18s;background:#fff;
}
.btn.primary{background:linear-gradient(100deg,var(--purple),var(--green));color:#fff;}
.btn:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 var(--ink);}
.hero-art{position:relative;}
.hero-art img{
  border:4px solid var(--ink);border-radius:34px;box-shadow:var(--shadow);
  aspect-ratio:4/3;object-fit:cover;background:#f2e9ff;
}
.hero-badge{
  position:absolute;bottom:-18px;left:-16px;background:var(--yellow);border:3px solid var(--ink);
  border-radius:20px;padding:10px 16px;font-weight:900;box-shadow:var(--shadow-sm);transform:rotate(-5deg);
}
.hero-badge2{
  position:absolute;top:-16px;right:-10px;background:#fff;border:3px solid var(--ink);
  border-radius:20px;padding:9px 15px;font-weight:900;box-shadow:var(--shadow-sm);transform:rotate(6deg);
}

/* SECTION SHELL */
section{padding:52px 0;}
.sec-head{margin-bottom:30px;}
.sec-tag{
  display:inline-block;background:var(--green);color:#fff;border:3px solid var(--ink);border-radius:999px;
  padding:4px 15px;font-weight:900;font-size:.82rem;box-shadow:3px 3px 0 var(--ink);margin-bottom:12px;
}
.sec-head h2{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:900;letter-spacing:-.5px;}
.sec-head p{margin-top:8px;max-width:760px;color:#3a3344;}

/* GEO */
#geo-intro .\boxed{
  background:#fff;border:4px solid var(--ink);border-radius:30px;padding:32px;box-shadow:var(--shadow);
  position:relative;overflow:hidden;
}
#geo-intro .box:before{
  content:"";position:absolute;inset:auto -40px -60px auto;width:200px;height:200px;border-radius:50%;
  background:repeating-linear-gradient(45deg,rgba(168,85,247,.18) 0 10px,transparent 10px 20px);
}
#geo-intro p{position:relative;font-size:1.04rem;}
#geo-intro p+p{margin-top:14px;}

/* STATS */
#data-stats .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.stat{
  background:#fff;border:4px solid var(--ink);border-radius:26px;padding:22px;box-shadow:var(--shadow-sm);
  text-align:center;transition:.18s;
}
.stat:nth-child(2n){background:linear-gradient(160deg,#f6ecff,#eafff1);}
.stat:hover{transform:translateY(-6px) rotate(-1deg);}
.stat .num{font-size:2.3rem;font-weight:900;background:linear-gradient(100deg,var(--purple),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;}
.stat .lbl{font-weight:800;font-size:.95rem;margin-top:4px;}

/* ADVANTAGES */
#core-advantages .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.card{
  background:#fff;border:4px solid var(--ink);border-radius:28px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;transition:.2s;
}
.card:hover{transform:translate(-4px,-4px);box-shadow:12px 12px 0 var(--purple);}
.card .ph{position:relative;}
.card .ph img{width:100%;aspect-ratio:16/10;object-fit:cover;border-bottom:4px solid var(--ink);background:#efe6ff;}
.chip{
  position:absolute;top:12px;left:12px;background:var(--yellow);border:3px solid var(--ink);
  border-radius:999px;padding:3px 12px;font-weight:900;font-size:.78rem;
}
.card .body{padding:20px;flex:1;display:flex;flex-direction:column;gap:8px;}
.card h3{font-size:1.18rem;font-weight:900;}
.card p{font-size:.96rem;color:#3d3548;}
.card .more{margin-top:auto;font-weight:900;color:var(--purple);}

/* EVENTS */
#featured-events .ev-list{display:grid;gap:16px;}
.ev{
  display:grid;grid-template-columns:120px 1fr auto;gap:18px;align-items:center;
  background:#fff;border:4px solid var(--ink);border-radius:24px;padding:16px 20px;box-shadow:var(--shadow-sm);
  transition:.18s;
}
.ev:hover{transform:translateX(6px);box-shadow:-8px 8px 0 var(--green);}
.ev .tagline{background:var(--purple);color:#fff;border:3px solid var(--ink);border-radius:16px;padding:8px 10px;text-align:center;font-weight:900;font-size:.85rem;}
.ev .teams{font-weight:900;font-size:1.08rem;}
.ev .meta{font-size:.9rem;color:#4a4356;}
.ev .go{background:var(--yellow);border:3px solid var(--ink);border-radius:999px;padding:8px 16px;font-weight:900;white-space:nowrap;}

/* RANKINGS */
#rankings table{width:100%;border-collapse:separate;border-spacing:0 10px;}
#rankings th,#rankings td{padding:14px 16px;text-align:left;}
#rankings thead th{background:var(--ink);color:#fff;font-weight:900;}
#rankings thead th:first-child{border-radius:18px 0 0 18px;}
#rankings thead th:last-child{border-radius:0 18px 18px 0;}
#rankings tbody td{background:#fff;border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);}
#rankings tbody td:first-child{border-left:3px solid var(--ink);border-radius:18px 0 0 18px;font-weight:900;}
#rankings tbody td:last-child{border-right:3px solid var(--ink);border-radius:0 18px 18px 0;font-weight:900;}
#rankings tbody tr:nth-child(2n) td{background:#f7f0ff;}

/* HIGHLIGHTS */
#highlights .hl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.hl{border:4px solid var(--ink);border-radius:26px;overflow:hidden;background:#fff;box-shadow:var(--shadow-sm);}
.hl img{width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:4px solid var(--ink);background:#e9fbef;}
.hl .cap{padding:14px 16px;font-weight:800;font-size:.95rem;}

/* COMMUNITY */
#community .cm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.quote{
  background:linear-gradient(150deg,#fff,#f4ecff);border:4px solid var(--ink);border-radius:26px;padding:22px;
  box-shadow:var(--shadow-sm);
}
.quote .who{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:900;}
.avatar{width:40px;height:40px;border-radius:50%;border:3px solid var(--ink);background:linear-gradient(120deg,var(--purple),var(--green));}
.quote p{font-size:.96rem;color:#3b3447;}

/* APP */
#app-download .app-\boxed{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:30px;align-items:center;
  background:linear-gradient(120deg,var(--purple),var(--green));border:4px solid var(--ink);
  border-radius:32px;padding:32px;box-shadow:var(--shadow);color:#fff;
}
#app-download img{border:4px solid var(--ink);border-radius:26px;box-shadow:var(--shadow-sm);aspect-ratio:16/10;object-fit:cover;background:#fff;}
#app-download h2{color:#fff;}
.store{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px;}
.store a{background:#fff;color:var(--ink);border:3px solid var(--ink);border-radius:999px;padding:11px 22px;font-weight:900;box-shadow:4px 4px 0 rgba(0,0,0,.45);}

/* NEWS */
#news-list .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.article{
  background:#fff;border:4px solid var(--ink);border-radius:26px;padding:20px;box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;gap:10px;transition:.2s;position:relative;
}
.article:hover{transform:translateY(-5px);box-shadow:9px 12px 0 var(--green);}
.article .date{
  align-self:flex-start;background:var(--ink);color:#fff;border-radius:999px;padding:3px 13px;font-size:.8rem;font-weight:800;
}
.article h3{font-size:1.08rem;font-weight:900;line-height:1.5;}
.article p{font-size:.95rem;color:#3e3749;}
.article .cat{margin-top:auto;font-size:.82rem;font-weight:900;color:var(--green);}

/* FAQ */
#faq .qa{
  background:#fff;border:4px solid var(--ink);border-radius:26px;padding:20px 24px;box-shadow:var(--shadow-sm);
  margin-bottom:16px;
}
#faq .qa h3{font-size:1.08rem;font-weight:900;margin-bottom:8px;display:flex;gap:10px;align-items:flex-start;}
#faq .qa h3 span{background:var(--yellow);border:3px solid var(--ink);border-radius:10px;padding:0 9px;flex:none;}
#faq .qa p{font-size:.97rem;color:#3c3548;}

/* CTA */
#cta .cta-\boxed{
  border:4px solid var(--ink);border-radius:32px;padding:38px;text-align:center;
  background:repeating-linear-gradient(45deg,#fff 0 22px,#f5ecff 22px 44px);box-shadow:var(--shadow);
}
#cta h2{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:900;}
#cta p{margin:12px auto 20px;max-width:640px;font-weight:600;}

/* FOOTER */
footer{
  background:var(--ink);color:#efe9f7;border-top:5px solid var(--purple);padding:44px 0 26px;margin-top:24px;
}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px;}
footer h4{font-weight:900;margin-bottom:12px;color:var(--yellow);}
footer ul{list-style:none;display:grid;gap:7px;font-size:.94rem;}
footer a:hover{color:var(--yellow);}
.f-info{font-size:.94rem;line-height:1.9;}
.f-bottom{
  border-top:2px dashed #4a4257;margin-top:26px;padding-top:18px;font-size:.9rem;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
}
.f-bottom a{font-weight:800;color:var(--yellow);}

@media(max-width:980px){
  .hero-grid,#app-download .app-\boxed{grid-template-columns:1fr;}
  #core-advantages .cards,#highlights .hl-grid,#community .cm-grid,#news-list .news-grid{grid-template-columns:repeat(2,1fr);}
  #data-stats .stats-grid{grid-template-columns:repeat(2,1fr);}
  .f-grid{grid-template-columns:1fr;}
  .ev{grid-template-columns:1fr;}
}
@media(max-width:620px){
  #core-advantages .cards,#highlights .hl-grid,#community .cm-grid,#news-list .news-grid{grid-template-columns:1fr;}
  #rankings{overflow-x:auto;}
  #rankings table{min-width:520px;}
}