*{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;
    background:linear-gradient(180deg,#f6fdfc 0%,#eefaf9 55%,#f7fefd 100%);
    color:#0f2b33;
    line-height:1.8;
    -webkit-font-smoothing:antialiased;
    letter-spacing:.2px;
  }
  *,*::before,*::after{font-family:inherit;}
  a{color:#0891b2;text-decoration:none;}
  a:hover{color:#0e7490;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 22px;}

  /* Header */
  .site-header{
    position:sticky;top:0;z-index:99;
    background:rgba(255,255,255,.88);
    backdrop-filter:blur(12px);
    border-bottom:1px solid #e2f2f0;
    box-shadow:0 4px 18px rgba(8,145,178,.06);
  }
  .header-inner{
    max-width:1180px;margin:0 auto;padding:12px 22px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  }
  .logo{
    display:flex;align-items:center;gap:9px;
    font-size:19px;font-weight:800;color:#0f2b33;letter-spacing:.4px;
  }
  .logo .dot{
    width:14px;height:14px;border-radius:50%;
    background:linear-gradient(135deg,#5eead4,#0891b2);
    box-shadow:0 0 0 4px rgba(94,234,212,.28);
  }
  .logo span{font-size:12px;font-weight:600;color:#0891b2;letter-spacing:1px;}
  .nav-links{display:flex;flex-wrap:wrap;gap:6px;}
  .nav-links a{
    padding:7px 13px;border-radius:999px;font-size:14px;font-weight:600;color:#31606b;
    transition:.25s;
  }
  .nav-links a:hover{
    background:linear-gradient(135deg,#5eead4,#0891b2);
    color:#fff;
    box-shadow:0 6px 16px rgba(8,145,178,.25);
  }

  /* Hero */
  .hero{
    position:relative;overflow:hidden;
    background:linear-gradient(135deg,#e6fbf7 0%,#d7f5f6 45%,#cdeef7 100%);
    padding:64px 0 56px;
  }
  .hero::after{
    content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px;border-radius:50%;
    background:radial-gradient(circle,rgba(94,234,212,.5),rgba(8,145,178,0) 70%);
  }
  .hero::before{
    content:"";position:absolute;left:-120px;bottom:-160px;width:360px;height:360px;border-radius:50%;
    background:radial-gradient(circle,rgba(8,145,178,.18),rgba(94,234,212,0) 70%);
  }
  .hero-grid{
    position:relative;z-index:2;
    display:grid;grid-template-columns:1.15fr .85fr;gap:42px;align-items:center;
  }
  .tag{
    display:inline-block;padding:6px 14px;border-radius:999px;
    background:rgba(255,255,255,.8);color:#0e7490;font-size:13px;font-weight:700;
    border:1px solid #b8ece6;letter-spacing:.6px;margin-bottom:16px;
  }
  h1{
    font-size:38px;line-height:1.35;font-weight:800;color:#0b2b33;letter-spacing:.5px;
    margin-bottom:16px;
  }
  h1 em{
    font-style:normal;
    background:linear-gradient(135deg,#0d9488,#0891b2);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .hero-lead{font-size:16px;color:#3f6570;margin-bottom:24px;}
  .btn-row{display:flex;gap:12px;flex-wrap:wrap;}
  .btn{
    display:inline-block;padding:12px 26px;border-radius:999px;font-weight:700;font-size:15px;
    transition:.25s;
  }
  .btn-main{
    background:linear-gradient(135deg,#5eead4,#0891b2);color:#fff;
    box-shadow:0 10px 24px rgba(8,145,178,.28);
  }
  .btn-main:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 30px rgba(8,145,178,.36);}
  .btn-ghost{background:#fff;color:#0e7490;border:1px solid #b8ece6;}
  .btn-ghost:hover{background:#f0fdfa;color:#0e7490;}
  .hero-img{
    border-radius:26px;overflow:hidden;
    box-shadow:0 22px 48px rgba(8,145,178,.18);
    border:6px solid #fff;
  }

  /* Sections */
  section{padding:58px 0;}
  .sec-head{text-align:center;max-width:760px;margin:0 auto 38px;}
  .sec-head h2{
    font-size:27px;font-weight:800;color:#0b2b33;margin-bottom:10px;letter-spacing:.4px;
  }
  .sec-head h2::after{
    content:"";display:block;width:64px;height:4px;border-radius:99px;margin:12px auto 0;
    background:linear-gradient(90deg,#5eead4,#0891b2);
  }
  .sec-head p{color:#5b7a83;font-size:15px;}

  .card{
    background:#fff;border:1px solid #e6f5f3;border-radius:20px;
    box-shadow:0 10px 26px rgba(8,145,178,.07);
    padding:26px;
    transition:.28s;
  }
  .card:hover{transform:translateY(-4px);box-shadow:0 18px 36px rgba(8,145,178,.13);border-color:#bff0e9;}

  /* GEO */
  .geo-box{
    background:linear-gradient(135deg,#ffffff,#f0fdfa);
    border:1px solid #d5f3ee;border-radius:24px;padding:34px;
    box-shadow:0 14px 32px rgba(8,145,178,.08);
  }
  .geo-box p{color:#33555f;font-size:15.5px;margin-bottom:14px;}
  .geo-box p:last-child{margin-bottom:0;}
  .geo-box strong{color:#0e7490;}

  /* Stats */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
  .stat{
    text-align:center;background:#fff;border-radius:20px;padding:28px 16px;
    border:1px solid #e6f5f3;box-shadow:0 8px 22px rgba(8,145,178,.07);
  }
  .stat .num{
    font-size:30px;font-weight:800;
    background:linear-gradient(135deg,#0d9488,#0891b2);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat .lbl{font-size:14px;color:#5b7a83;margin-top:6px;}

  /* Advantages */
  .adv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .adv-icon{
    width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;
    font-size:24px;margin-bottom:14px;
    background:linear-gradient(135deg,#d6faf3,#cdeef7);
  }
  .adv-grid h3{font-size:17px;font-weight:800;margin-bottom:8px;color:#0b2b33;}
  .adv-grid p{font-size:14.5px;color:#5b7a83;}

  /* Brand story */
  .story-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:38px;align-items:center;}
  .story-img{border-radius:24px;overflow:hidden;border:6px solid #fff;box-shadow:0 18px 40px rgba(8,145,178,.14);}
  .story-text p{color:#4a6b75;font-size:15.5px;margin-bottom:14px;}
  .pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
  .pill{
    padding:7px 15px;border-radius:999px;background:#effbf9;color:#0e7490;
    font-size:13px;font-weight:700;border:1px solid #cdf1ea;
  }

  /* Game recommend */
  .game-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .game-card{padding:0;overflow:hidden;}
  .game-card img{height:170px;width:100%;object-fit:cover;}
  .game-body{padding:20px 22px 24px;}
  .game-body h3{font-size:17px;font-weight:800;margin-bottom:8px;}
  .game-body p{font-size:14.5px;color:#5b7a83;}
  .game-tag{
    display:inline-block;margin-top:12px;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;
    background:linear-gradient(135deg,#5eead4,#0891b2);color:#fff;
  }

  /* News */
  .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .news-card h3{font-size:17px;font-weight:800;line-height:1.55;margin-bottom:10px;color:#0b2b33;}
  .news-card h3 a{color:#0b2b33;}
  .news-card h3 a:hover{color:#0891b2;}
  .news-date{
    display:inline-block;font-size:12.5px;font-weight:700;color:#0e7490;
    background:#effbf9;border:1px solid #cdf1ea;border-radius:999px;padding:3px 12px;margin-bottom:12px;
  }
  .news-card p{font-size:14.5px;color:#5b7a83;}
  .news-full{grid-column:1/-1;}

  /* Download */
  .dl-box{
    display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;
    background:linear-gradient(135deg,#e8fbf7,#d9f2f9);
    border-radius:26px;padding:40px;border:1px solid #c9eef0;
  }
  .dl-box h2{font-size:25px;font-weight:800;margin-bottom:12px;color:#0b2b33;}
  .dl-box p{color:#3f6570;font-size:15px;margin-bottom:20px;}
  .dl-img{border-radius:20px;overflow:hidden;border:6px solid #fff;box-shadow:0 16px 34px rgba(8,145,178,.16);}

  /* FAQ */
  .faq-list{display:grid;gap:14px;max-width:960px;margin:0 auto;}
  details.faq-item{
    background:#fff;border:1px solid #e6f5f3;border-radius:16px;padding:18px 22px;
    box-shadow:0 8px 20px rgba(8,145,178,.06);transition:.25s;
  }
  details.faq-item[open]{border-color:#9fe6dc;box-shadow:0 14px 30px rgba(8,145,178,.12);}
  details.faq-item summary{
    cursor:pointer;font-weight:800;font-size:15.5px;color:#0b2b33;list-style:none;
    display:flex;justify-content:space-between;gap:14px;align-items:flex-start;
  }
  details.faq-item summary::-webkit-details-marker{display:none;}
  details.faq-item summary::after{
    content:"＋";color:#0891b2;font-weight:800;font-size:17px;flex-shrink:0;
  }
  details.faq-item[open] summary::after{content:"－";}
  details.faq-item p{margin-top:12px;font-size:14.5px;color:#4a6b75;}

  /* CTA */
  .cta-band{
    background:linear-gradient(135deg,#5eead4,#0891b2);
    border-radius:26px;padding:44px;text-align:center;color:#fff;
    box-shadow:0 20px 44px rgba(8,145,178,.28);
  }
  .cta-band h2{font-size:26px;font-weight:800;margin-bottom:12px;}
  .cta-band p{font-size:15px;opacity:.95;margin-bottom:22px;}
  .cta-band .btn-ghost{background:#fff;color:#0e7490;border:none;}

  /* Footer */
  .site-footer{
    background:#0b2b33;color:#c7e3e6;margin-top:20px;padding:44px 0 26px;
  }
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px;margin-bottom:28px;}
  .site-footer h4{color:#5eead4;font-size:15px;font-weight:800;margin-bottom:12px;letter-spacing:.5px;}
  .site-footer p,.site-footer li{font-size:14px;color:#a9cdd2;line-height:2;}
  .site-footer ul{list-style:none;}
  .site-footer a{color:#a9cdd2;}
  .site-footer a:hover{color:#5eead4;}
  .footer-bottom{
    border-top:1px solid rgba(255,255,255,.12);padding-top:18px;
    display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
    font-size:13.5px;color:#8fb6bb;
  }

  @media (max-width:900px){
    .hero-grid,.story-grid,.dl-box{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .adv-grid,.game-grid,.news-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    h1{font-size:29px;}
    .hero{padding:44px 0 40px;}
    section{padding:44px 0;}
    .geo-box,.dl-box,.cta-band{padding:26px;}
  }