:root{
  --sea:#0ea5e9;
  --deep:#0369a1;
  --abyss:#073b5c;
  --cream:#fdf6ec;
  --terra:#c2603f;
  --ink:#0b3a54;
  --mist:rgba(255,255,255,.72);
}
*{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;
  color:var(--ink);
  background:
    radial-gradient(1200px 600px at 12% -5%,rgba(255,255,255,.55),transparent 60%),
    radial-gradient(900px 500px at 95% 8%,rgba(194,96,63,.18),transparent 60%),
    linear-gradient(180deg,#e8f6fd 0%,#d3edfa 30%,#f6fbfe 62%,#eaf5fc 100%);
  line-height:1.85;
  overflow-x:hidden;
}
img{max-width:100%;display:block;}
a{text-decoration:none;color:inherit;}
.wrap{width:min(1080px,92%);margin:0 auto;}

/* ---------- 顶部导航 ---------- */
.topbar{
  position:sticky;top:0;z-index:50;
  background:linear-gradient(120deg,rgba(14,165,233,.92),rgba(3,105,161,.94));
  backdrop-filter:blur(10px);
  box-shadow:0 10px 30px rgba(3,105,161,.25);
  border-bottom:2px solid rgba(253,246,236,.35);
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0;flex-wrap:wrap;}
.brand{
  display:flex;align-items:center;gap:10px;color:#fff;font-weight:700;font-size:1.22rem;letter-spacing:.5px;
}
.brand .logo{
  width:40px;height:40px;border-radius:14px;display:grid;place-items:center;font-size:1.2rem;
  background:linear-gradient(140deg,var(--cream),#cfeaf8);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}
.nav-links{display:flex;flex-wrap:wrap;gap:6px;}
.nav-links a{
  color:#eaf7ff;padding:8px 15px;border-radius:999px;font-size:.95rem;
  border:1px solid rgba(255,255,255,.25);transition:.25s;
}
.nav-links a:hover{background:var(--cream);color:var(--deep);transform:translateY(-2px);box-shadow:0 8px 16px rgba(0,0,0,.18);}

/* ---------- 区块通用 ---------- */
section{padding:82px 0;}
.sec-title{
  font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--deep);margin-bottom:10px;letter-spacing:.5px;
}
.sec-title::before{content:"🌊 ";}
.sub{color:#2b5f7d;font-size:1.02rem;max-width:760px;margin-bottom:34px;}
.card{
  background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(233,247,255,.82));
  border:1px solid rgba(255,255,255,.9);
  border-radius:30px;
  box-shadow:0 18px 40px rgba(6,78,120,.13),inset 0 1px 0 rgba(255,255,255,.9);
  padding:34px;
}
.card-wave{position:relative;overflow:hidden;}
.card-wave::after{
  content:"";position:absolute;left:-10%;right:-10%;bottom:-40px;height:80px;
  background:radial-gradient(60% 100% at 50% 0,rgba(14,165,233,.18),transparent 70%);
  pointer-events:none;
}

/* ---------- 首屏 ---------- */
#hero{
  padding:96px 0 70px;
  background:
    linear-gradient(180deg,rgba(3,105,161,.10),rgba(3,105,161,0)),
    radial-gradient(900px 420px at 78% 10%,rgba(255,255,255,.7),transparent 65%);
}
.hero-box{
  display:grid;grid-template-columns:1.15fr .85fr;gap:38px;align-items:center;
}
h1{
  font-size:clamp(1.9rem,4.4vw,3rem);line-height:1.3;color:var(--abyss);margin-bottom:18px;
  text-shadow:0 2px 0 rgba(255,255,255,.7);
}
h1 .hl{
  background:linear-gradient(120deg,var(--sea),var(--deep));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero-badges{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 26px;}
.badge{
  background:rgba(255,255,255,.85);border:1px solid rgba(14,165,233,.3);
  color:var(--deep);padding:7px 16px;border-radius:999px;font-size:.9rem;
  box-shadow:0 6px 14px rgba(6,78,120,.08);
}
.btn{
  display:inline-block;padding:13px 30px;border-radius:999px;font-weight:600;
  background:linear-gradient(120deg,var(--sea),var(--deep));color:#fff;
  box-shadow:0 14px 28px rgba(3,105,161,.35);transition:.25s;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 18px 34px rgba(3,105,161,.45);}
.btn.alt{background:linear-gradient(120deg,var(--terra),#a44a2d);box-shadow:0 14px 28px rgba(194,96,63,.32);}
.hero-img{border-radius:34px;overflow:hidden;box-shadow:0 26px 50px rgba(6,78,120,.25);border:6px solid rgba(255,255,255,.85);}
.hero-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}

/* GEO */
#geo-intro .card{font-size:1.04rem;color:#17496a;}
#geo-intro .card b{color:var(--terra);}

/* ---------- 数据统计 ---------- */
#data-stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.stat{
  text-align:center;padding:28px 16px;border-radius:26px;
  background:linear-gradient(165deg,#ffffff,rgba(214,240,252,.85));
  box-shadow:0 16px 34px rgba(6,78,120,.12);border:1px solid #fff;
}
.stat .num{font-size:2.1rem;font-weight:800;color:var(--deep);line-height:1.2;}
.stat .lbl{color:#3a6b8a;font-size:.93rem;}

/* ---------- 核心优势 ---------- */
#core-advantages .list{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.adv{padding:30px;border-radius:28px;background:rgba(255,255,255,.86);border:1px solid #fff;box-shadow:0 16px 34px rgba(6,78,120,.12);}
.adv .ico{font-size:1.9rem;margin-bottom:10px;}
.adv h3{color:var(--deep);font-size:1.16rem;margin-bottom:8px;}
.adv p{color:#3a6b8a;font-size:.97rem;}

/* ---------- 焦点赛事 ---------- */
#featured-events .list{display:grid;gap:26px;}
.event{
  display:grid;grid-template-columns:280px 1fr;gap:0;border-radius:30px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(226,244,253,.85));
  box-shadow:0 18px 40px rgba(6,78,120,.14);border:1px solid #fff;
}
.event img{width:100%;height:100%;object-fit:cover;min-height:210px;}
.event .body{padding:30px 32px;}
.tag{display:inline-block;font-size:.8rem;padding:5px 13px;border-radius:999px;background:rgba(194,96,63,.14);color:var(--terra);margin-bottom:10px;}
.event h3{color:var(--abyss);font-size:1.28rem;margin-bottom:8px;}
.event p{color:#3a6b8a;}

/* ---------- 实时比分 ---------- */
#scores .board{display:grid;gap:16px;}
.row{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;
  background:rgba(255,255,255,.88);border:1px solid #fff;border-radius:22px;padding:16px 22px;
  box-shadow:0 12px 26px rgba(6,78,120,.1);
}
.row .team{font-weight:600;color:var(--ink);}
.row .team.r{text-align:right;}
.row .sc{font-weight:800;color:var(--deep);font-size:1.15rem;background:rgba(14,165,233,.12);padding:5px 16px;border-radius:14px;}
.live{color:var(--terra);font-size:.85rem;}

/* ---------- 游戏库 ---------- */
#game-library .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;}
.game{border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 18px 40px rgba(6,78,120,.13);border:1px solid #fff;}
.game img{aspect-ratio:16/10;object-fit:cover;width:100%;border-radius:28px 28px 0 0;}
.game .b{padding:22px 24px 26px;}
.game h3{color:var(--deep);margin-bottom:6px;font-size:1.1rem;}
.game p{color:#4a7692;font-size:.94rem;}

/* ---------- 品牌故事 ---------- */
#brand-story .split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;}
#brand-story img{border-radius:30px;box-shadow:0 20px 44px rgba(6,78,120,.2);border:5px solid #fff;}
#brand-story p{margin-bottom:14px;color:#2f5f7e;}

/* ---------- 新闻 ---------- */
#news-list .list{display:grid;gap:26px;}
.news{
  border-radius:30px;overflow:hidden;background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(228,245,253,.86));
  box-shadow:0 18px 40px rgba(6,78,120,.13);border:1px solid #fff;
}
.news .top{position:relative;}
.news img{width:100%;aspect-ratio:16/7;object-fit:cover;}
.news .date{
  position:absolute;left:18px;bottom:14px;background:rgba(3,105,161,.86);color:#fff;
  padding:5px 14px;border-radius:999px;font-size:.82rem;
}
.news .b{padding:26px 30px 30px;}
.news h3{color:var(--abyss);font-size:1.18rem;margin-bottom:8px;}
.news p{color:#3a6b8a;font-size:.98rem;}
.news .more{display:inline-block;margin-top:12px;color:var(--terra);font-weight:600;font-size:.92rem;}

/* ---------- 社区 ---------- */
#community .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.talk{background:rgba(255,255,255,.88);border-radius:26px;padding:26px;border:1px solid #fff;box-shadow:0 14px 30px rgba(6,78,120,.12);}
.talk .who{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:600;color:var(--deep);}
.talk .av{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--sea),var(--deep));color:#fff;}
.talk p{color:#42708d;font-size:.95rem;}

/* ---------- 下载 ---------- */
#download .box{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;}
#download img{border-radius:30px;box-shadow:0 22px 46px rgba(6,78,120,.22);border:5px solid #fff;}
.dl-list{display:grid;gap:14px;margin:18px 0 24px;}
.dl-item{background:rgba(255,255,255,.8);border-radius:18px;padding:14px 20px;border:1px solid #fff;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.dl-item span{color:#3f6e8b;font-size:.95rem;}

/* ---------- FAQ ---------- */
#faq .list{display:grid;gap:20px;}
details{
  background:linear-gradient(150deg,rgba(255,255,255,.95),rgba(229,245,253,.85));
  border:1px solid #fff;border-radius:24px;padding:22px 26px;box-shadow:0 14px 30px rgba(6,78,120,.11);
}
summary{cursor:pointer;font-weight:700;color:var(--deep);font-size:1.05rem;list-style:none;}
summary::-webkit-details-marker{display:none;}
summary::before{content:"❓ ";color:var(--terra);}
details p{margin-top:12px;color:#3c6c89;font-size:.97rem;}
details[open] summary::before{content:"🌊 ";}

/* ---------- CTA ---------- */
#cta .band{
  border-radius:36px;padding:52px 40px;text-align:center;color:#fff;
  background:linear-gradient(130deg,var(--sea),var(--deep) 55%,var(--abyss));
  box-shadow:0 26px 54px rgba(3,105,161,.35);border:1px solid rgba(255,255,255,.4);
}
#cta h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-bottom:12px;}
#cta p{color:#ddf0fb;max-width:720px;margin:0 auto 24px;}

/* ---------- 页脚 ---------- */
footer{
  margin-top:60px;padding:48px 0 30px;color:#e6f4fb;
  background:linear-gradient(160deg,var(--deep),var(--abyss));
}
.f-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:30px;margin-bottom:28px;}
footer h4{color:#fff;margin-bottom:10px;font-size:1.05rem;}
footer a{color:#cfe9f8;}
footer a:hover{color:#fff;text-decoration:underline;}
footer li{list-style:none;margin-bottom:6px;font-size:.94rem;}
.f-info p{font-size:.94rem;color:#d6ebf7;margin-bottom:5px;}
.f-bottom{border-top:1px solid rgba(255,255,255,.2);padding-top:16px;text-align:center;font-size:.9rem;color:#bcdcee;}

@media(max-width:900px){
  .hero-box,#brand-story .split,#download .box,.event{grid-template-columns:1fr;}
  .event img{min-height:180px;}
  #data-stats .grid,#core-advantages .list,#game-library .grid,#community .grid{grid-template-columns:1fr 1fr;}
  .f-grid{grid-template-columns:1fr;}
  section{padding:60px 0;}
}
@media(max-width:560px){
  #data-stats .grid,#core-advantages .list,#game-library .grid,#community .grid{grid-template-columns:1fr;}
  .card{padding:24px;}
}