:root{
    --bg:#0a0a0a;
    --purple:#2d1b69;
    --pink:#ec4899;
    --cyan:#22d3ee;
    --text:#eae8f7;
    --muted:#a49cc8;
    --card:rgba(20,16,40,.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;
    background-color:#0a0a0a;
    background-image:
      radial-gradient(ellipse at 12% -12%, rgba(45,27,105,.95) 0%, rgba(10,10,10,0) 62%),
      radial-gradient(ellipse at 92% 8%, rgba(236,72,153,.20) 0%, rgba(10,10,10,0) 45%),
      radial-gradient(ellipse at 60% 100%, rgba(34,211,238,.12) 0%, rgba(10,10,10,0) 50%);
    background-attachment:fixed;
    color:var(--text);
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none}
  img{max-width:100%;display:block}
  h1,h2,h3,h4{line-height:1.35;font-weight:800}
  header{
    position:sticky;top:0;z-index:50;
    background:rgba(10,10,10,.84);
    backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(236,72,153,.25);
    box-shadow:0 6px 30px rgba(45,27,105,.5);
  }
  .nav-bar{
    max-width:1180px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;
    gap:16px;flex-wrap:wrap;
  }
  .logo{
    font-size:1.15rem;font-weight:800;letter-spacing:.6px;
    background:linear-gradient(90deg,var(--pink),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
    white-space:nowrap;
  }
  .nav-links{display:flex;flex-wrap:wrap;gap:6px}
  .nav-links a{
    padding:8px 15px;border-radius:999px;font-size:.92rem;
    color:var(--muted);border:1px solid transparent;transition:all .25s ease;
  }
  .nav-links a:hover{
    color:#fff;border-color:rgba(236,72,153,.55);
    background:rgba(236,72,153,.14);
    box-shadow:0 0 18px rgba(236,72,153,.4);
  }
  section{max-width:1180px;margin:0 auto;padding:62px 20px}
  .sec-head{margin-bottom:32px}
  .sec-head h2{
    font-size:1.75rem;letter-spacing:.5px;
    background:linear-gradient(90deg,#fff 10%,var(--pink) 55%,var(--cyan) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    display:inline-block;
  }
  .sec-head p{color:var(--muted);margin-top:10px;font-size:.96rem;max-width:820px}
  .eyebrow{
    display:inline-block;font-size:.78rem;letter-spacing:2px;
    color:var(--cyan);border:1px solid rgba(34,211,238,.45);
    border-radius:999px;padding:4px 14px;margin-bottom:14px;
    background:rgba(34,211,238,.08);
  }
  /* HERO */
  #hero{
    padding-top:66px;padding-bottom:34px;
    display:grid;grid-template-columns:1.15fr .85fr;
    gap:38px;align-items:center;
  }
  #hero h1{
    font-size:2.35rem;letter-spacing:.5px;margin-bottom:18px;
    background:linear-gradient(100deg,#ffffff 5%,#f9a8d4 45%,var(--cyan) 95%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 42px rgba(236,72,153,.28);
  }
  #hero .lead{color:#c6c1e2;font-size:1.02rem;margin-bottom:24px;max-width:560px}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap}
  .btn{
    display:inline-block;padding:12px 26px;border-radius:999px;
    font-weight:700;font-size:.95rem;letter-spacing:.5px;
    transition:all .25s ease;border:1px solid transparent;
  }
  .btn-primary{
    background:linear-gradient(95deg,var(--pink),#8b5cf6);
    color:#fff;box-shadow:0 0 22px rgba(236,72,153,.5),0 0 44px rgba(139,92,246,.25);
  }
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 0 32px rgba(236,72,153,.75)}
  .btn-ghost{
    border-color:rgba(34,211,238,.5);color:var(--cyan);
    background:rgba(34,211,238,.07);
  }
  .btn-ghost:hover{background:rgba(34,211,238,.16);box-shadow:0 0 22px rgba(34,211,238,.45)}
  .hero-visual{
    position:relative;border-radius:22px;overflow:hidden;
    border:1px solid rgba(236,72,153,.35);
    box-shadow:0 0 0 1px rgba(34,211,238,.14) inset,0 20px 60px rgba(45,27,105,.75);
  }
  .hero-visual img{width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.05)}
  .hero-visual::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(45,27,105,.12),rgba(10,10,10,.62));
  }
  .hero-badge{
    position:absolute;left:16px;bottom:16px;z-index:2;
    font-size:.8rem;letter-spacing:1px;color:#fff;
    background:rgba(236,72,153,.28);border:1px solid rgba(236,72,153,.7);
    padding:6px 14px;border-radius:999px;backdrop-filter:blur(6px);
  }
  /* GEO */
  #geo-intro{
    padding-top:8px;padding-bottom:20px;
  }
  .geo-box{
    border-left:3px solid var(--pink);
    background:linear-gradient(100deg,rgba(45,27,105,.55),rgba(20,16,40,.35));
    border-radius:0 18px 18px 0;
    padding:26px 28px;color:#cfcbe8;font-size:1rem;
    box-shadow:0 0 30px rgba(45,27,105,.55);
  }
  /* 统计 */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
  .stat{
    text-align:center;padding:26px 14px;border-radius:16px;
    background:var(--card);
    border:1px solid rgba(34,211,238,.22);
    box-shadow:0 0 24px rgba(45,27,105,.5) inset;
    transition:.3s;
  }
  .stat:hover{border-color:rgba(236,72,153,.6);box-shadow:0 0 26px rgba(236,72,153,.32)}
  .stat b{
    display:block;font-size:1.85rem;font-weight:800;
    background:linear-gradient(90deg,var(--pink),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat span{font-size:.86rem;color:var(--muted);letter-spacing:1px}
  /* 卡片通用 */
  .card{
    position:relative;background:var(--card);border-radius:18px;padding:26px;
    border:1px solid rgba(236,72,153,.26);
    box-shadow:0 0 0 1px rgba(34,211,238,.10) inset,0 10px 34px rgba(29,17,68,.6);
    transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
  }
  .card:hover{
    transform:translateY(-5px);
    border-color:rgba(34,211,238,.55);
    box-shadow:0 0 26px rgba(236,72,153,.34),0 0 46px rgba(34,211,238,.18);
  }
  .card h3{font-size:1.08rem;margin-bottom:10px;color:#fff}
  .card p{color:var(--muted);font-size:.93rem}
  .card .ico{font-size:1.5rem;margin-bottom:12px;display:block}
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
  .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
  /* 品牌故事 */
  .story-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center}
  .story-img{
    border-radius:20px;overflow:hidden;border:1px solid rgba(34,211,238,.35);
    box-shadow:0 0 34px rgba(45,27,105,.85);
  }
  #brand-story p{color:#c4bfe0;margin-bottom:14px;font-size:.97rem}
  /* 时间线 */
  .timeline{position:relative;padding-left:26px}
  .timeline::before{
    content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;
    background:linear-gradient(180deg,var(--pink),var(--cyan));
    box-shadow:0 0 14px rgba(236,72,153,.65);
  }
  .tl-item{position:relative;margin-bottom:26px}
  .tl-item::before{
    content:"";position:absolute;left:-26px;top:8px;width:12px;height:12px;
    border-radius:50%;background:#0a0a0a;
    border:2px solid var(--cyan);box-shadow:0 0 12px var(--cyan);
  }
  .tl-item h4{color:#fff;font-size:1rem;margin-bottom:6px}
  .tl-item p{color:var(--muted);font-size:.92rem}
  /* 赛事 */
  .match-card{
    display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;
    padding:28px;border-radius:20px;background:linear-gradient(115deg,rgba(45,27,105,.85),rgba(20,16,40,.85));
    border:1px solid rgba(236,72,153,.35);
    box-shadow:0 0 34px rgba(236,72,153,.18);
  }
  .team{text-align:center}
  .team .name{font-size:1.15rem;font-weight:800;color:#fff}
  .team .score{
    font-size:2.2rem;font-weight:800;
    background:linear-gradient(90deg,var(--pink),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .vs{
    color:var(--muted);font-size:.85rem;letter-spacing:2px;
    border:1px solid rgba(34,211,238,.45);border-radius:999px;padding:6px 16px;
    background:rgba(34,211,238,.08);
  }
  /* 游戏推荐 */
  .game-card{display:flex;gap:16px;align-items:flex-start}
  .game-thumb{
    width:74px;height:74px;flex:0 0 74px;border-radius:14px;overflow:hidden;
    border:1px solid rgba(34,211,238,.4);box-shadow:0 0 18px rgba(34,211,238,.25);
  }
  .game-thumb img{width:100%;height:100%;object-fit:cover}
  .tagline{
    display:inline-block;font-size:.72rem;letter-spacing:1px;
    color:var(--pink);border:1px solid rgba(236,72,153,.5);
    background:rgba(236,72,153,.1);border-radius:999px;padding:2px 10px;margin-top:10px;
  }
  /* 新闻 */
  .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
  .news-card{
    background:var(--card);border-radius:18px;padding:24px;
    border:1px solid rgba(139,92,246,.32);
    box-shadow:0 0 0 1px rgba(34,211,238,.08) inset,0 10px 30px rgba(29,17,68,.55);
    transition:.3s;
  }
  .news-card:hover{border-color:rgba(236,72,153,.6);box-shadow:0 0 28px rgba(236,72,153,.28);transform:translateY(-4px)}
  .news-meta{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
  .news-meta .tag{
    font-size:.72rem;letter-spacing:1px;color:var(--cyan);
    border:1px solid rgba(34,211,238,.5);background:rgba(34,211,238,.1);
    padding:2px 10px;border-radius:999px;
  }
  .news-meta time{font-size:.8rem;color:var(--muted)}
  .news-card h3{font-size:1.03rem;color:#fff;margin-bottom:10px}
  .news-card p{font-size:.9rem;color:var(--muted)}
  .news-card:first-child{grid-column:1 / -1}
  .news-card:first-child h3{font-size:1.18rem}
  /* FAQ */
  .faq-list{display:grid;gap:16px}
  .faq-item{
    background:var(--card);border-radius:16px;padding:22px 24px;
    border:1px solid rgba(34,211,238,.22);
    box-shadow:0 0 22px rgba(45,27,105,.45) inset;
    transition:.3s;
  }
  .faq-item:hover{border-color:rgba(236,72,153,.55);box-shadow:0 0 26px rgba(236,72,153,.22)}
  .faq-item h3{
    font-size:1rem;color:#fff;margin-bottom:10px;
    display:flex;gap:10px;align-items:flex-start;
  }
  .faq-item h3::before{content:"❓";font-size:.95rem;line-height:1.55}
  .faq-item p{color:var(--muted);font-size:.92rem}
  /* CTA */
  #cta{
    text-align:center;
  }
  .cta-box{
    padding:52px 28px;border-radius:24px;
    background:linear-gradient(120deg,rgba(45,27,105,.9),rgba(236,72,153,.22),rgba(34,211,238,.16));
    border:1px solid rgba(236,72,153,.4);
    box-shadow:0 0 46px rgba(236,72,153,.28),0 0 80px rgba(34,211,238,.12);
  }
  .cta-box h2{font-size:1.75rem;color:#fff;margin-bottom:14px}
  .cta-box p{color:#d3cfea;max-width:720px;margin:0 auto 26px;font-size:.98rem}
  /* 下载 */
  .dl-wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;align-items:center}
  .dl-img{border-radius:20px;overflow:hidden;border:1px solid rgba(236,72,153,.4);box-shadow:0 0 34px rgba(45,27,105,.8)}
  .dl-list{list-style:none;margin-top:18px;display:grid;gap:10px}
  .dl-list li{color:var(--muted);font-size:.94rem;padding-left:24px;position:relative}
  .dl-list li::before{content:"⚡";position:absolute;left:0;color:var(--cyan)}
  /* 页脚 */
  footer{
    margin-top:40px;border-top:1px solid rgba(236,72,153,.28);
    background:linear-gradient(180deg,rgba(20,16,40,.75),rgba(10,10,10,.98));
  }
  .foot-inner{
    max-width:1180px;margin:0 auto;padding:46px 20px 26px;
    display:grid;grid-template-columns:1fr 1fr;gap:28px;
  }
  .foot-brand .flogo{
    font-size:1.1rem;font-weight:800;letter-spacing:.6px;margin-bottom:12px;
    background:linear-gradient(90deg,var(--pink),var(--cyan));
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .foot-brand p{color:var(--muted);font-size:.9rem;max-width:420px}
  .foot-info p{color:var(--muted);font-size:.9rem;margin-bottom:6px}
  .foot-bottom{
    max-width:1180px;margin:0 auto;padding:16px 20px 34px;
    border-top:1px solid rgba(139,92,246,.28);
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    color:#8b84b0;font-size:.84rem;
  }
  .foot-bottom a{color:var(--cyan)}
  .foot-bottom a:hover{color:var(--pink)}
  @media (max-width:900px){
    #hero{grid-template-columns:1fr;padding-top:44px}
    .stats-grid{grid-template-columns:repeat(2,1fr)}
    .grid-3{grid-template-columns:1fr 1fr}
    .story-wrap,.dl-wrap{grid-template-columns:1fr}
    .news-grid{grid-template-columns:1fr}
    .match-card{grid-template-columns:1fr;text-align:center}
    .foot-inner{grid-template-columns:1fr}
    #hero h1{font-size:1.85rem}
  }
  @media (max-width:600px){
    .grid-3,.grid-2{grid-template-columns:1fr}
    .stats-grid{grid-template-columns:1fr}
    section{padding:44px 16px}
    .sec-head h2{font-size:1.4rem}
  }