:root{
    --ink:#0a0a0a;
    --purple:#2d1b69;
    --pink:#ec4899;
    --cyan:#22d3ee;
    --text:#e9e7f7;
    --muted:#a8a3c9;
  }
  *{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:
      radial-gradient(circle at 12% 6%, rgba(236,72,153,.20), transparent 42%),
      radial-gradient(circle at 88% 2%, rgba(34,211,238,.16), transparent 38%),
      linear-gradient(165deg,#0a0a0a 0%,#150c37 48%,#2d1b69 100%);
    background-attachment: fixed;
    color:var(--text);
    line-height:1.85;
    -webkit-font-smoothing:antialiased;
    overflow-x:hidden;
  }
  h1,h2,h3,h4,span,p,a,li,div,button,strong,em,td,th{font-family:inherit;}
  a{color:inherit;}
  img{max-width:100%;display:block;}

  /* ===== Header / Nav ===== */
  .site-header{
    position:sticky;top:0;z-index:60;
    background:rgba(10,10,10,.78);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    border-bottom:2px solid rgba(236,72,153,.45);
    box-shadow:0 0 26px rgba(236,72,153,.28);
  }
  .nav-wrap{
    max-width:1200px;margin:0 auto;padding:13px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  }
  .brand{
    font-weight:800;font-size:1.12rem;letter-spacing:1.5px;color:#fff;
    text-shadow:0 0 14px rgba(34,211,238,.9),0 0 26px rgba(236,72,153,.6);
    display:flex;align-items:center;gap:8px;
  }
  .brand::before{
    content:"🛹";font-size:1.2rem;filter:drop-shadow(0 0 8px rgba(236,72,153,.9));
  }
  .nav-links{display:flex;gap:8px;flex-wrap:wrap;}
  .nav-links a{
    text-decoration:none;font-size:.92rem;color:#d9d4f7;
    padding:6px 14px;border-radius:999px;
    border:1px solid rgba(34,211,238,.30);
    transition:all .25s ease;white-space:nowrap;
  }
  .nav-links a:hover{
    color:#0a0a0a;border-color:transparent;
    background:linear-gradient(90deg,#ec4899,#22d3ee);
    box-shadow:0 0 20px rgba(236,72,153,.75);
    transform:translateY(-2px);
  }

  /* ===== Layout ===== */
  .section{max-width:1200px;margin:0 auto;padding:66px 20px;position:relative;}
  .section-head{margin-bottom:34px;}
  .eyebrow{
    display:inline-block;font-size:.76rem;letter-spacing:3px;text-transform:uppercase;
    color:var(--cyan);border:1px dashed rgba(34,211,238,.55);
    padding:3px 12px;border-radius:999px;margin-bottom:14px;
    box-shadow:0 0 14px rgba(34,211,238,.28);
  }
  h2{
    font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:800;line-height:1.35;
    background:linear-gradient(92deg,#fff 0%,#ec4899 55%,#22d3ee 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    margin-bottom:12px;
  }
  .lead{color:var(--muted);font-size:.98rem;max-width:860px;}

  /* ===== Hero ===== */
  #hero{
    position:relative;overflow:hidden;
    padding-top:76px;padding-bottom:76px;
  }
  #hero::before{
    content:"✷";position:absolute;top:34px;right:6%;font-size:5rem;color:rgba(236,72,153,.20);
    transform:rotate(14deg);pointer-events:none;
  }
  #hero::after{
    content:"⚡";position:absolute;bottom:26px;left:3%;font-size:4rem;opacity:.18;pointer-events:none;
  }
  .hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;}
  h1{
    font-size:clamp(1.85rem,4.6vw,3rem);line-height:1.28;font-weight:900;
    letter-spacing:.5px;margin-bottom:20px;
    background:linear-gradient(100deg,#ffffff 0%,#ec4899 48%,#22d3ee 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 42px rgba(236,72,153,.28);
  }
  .hero-sub{color:#c9c3ea;font-size:1.02rem;margin-bottom:26px;max-width:600px;}
  .hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:28px;}
  .tag{
    font-size:.8rem;padding:5px 14px;border-radius:999px;
    border:1px solid rgba(236,72,153,.55);color:#ffd6ea;
    background:rgba(236,72,153,.10);
  }
  .btn-row{display:flex;gap:14px;flex-wrap:wrap;}
  .btn{
    display:inline-block;text-decoration:none;font-weight:700;font-size:.96rem;
    padding:13px 32px;border-radius:999px;transition:all .28s ease;
  }
  .btn-primary{
    color:#0a0a0a;background:linear-gradient(92deg,#ec4899,#22d3ee);
    box-shadow:0 0 26px rgba(236,72,153,.6),0 0 46px rgba(34,211,238,.28);
  }
  .btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 0 38px rgba(34,211,238,.8);}
  .btn-ghost{
    color:#e9e7f7;border:2px solid rgba(34,211,238,.55);background:rgba(45,27,105,.35);
  }
  .btn-ghost:hover{border-color:#ec4899;color:#ffd6ea;box-shadow:0 0 24px rgba(236,72,153,.55);}
  .hero-visual{
    position:relative;border-radius:22px;overflow:hidden;
    border:2px solid rgba(236,72,153,.5);
    box-shadow:0 0 0 1px rgba(34,211,238,.35) inset,0 0 44px rgba(45,27,105,.95),0 0 60px rgba(236,72,153,.25);
    transform:rotate(-1.6deg);
  }
  .hero-visual img{width:100%;height:100%;object-fit:cover;}

  /* ===== GEO ===== */
  #geo-intro .geo-box{
    position:relative;
    background:linear-gradient(160deg,rgba(45,27,105,.72),rgba(10,10,10,.88));
    border:2px solid rgba(34,211,238,.35);
    border-radius:20px;padding:34px 30px;
    box-shadow:0 0 0 1px rgba(236,72,153,.22) inset,0 0 34px rgba(45,27,105,.9);
  }
  #geo-intro .geo-box::before{
    content:"//";position:absolute;top:10px;right:20px;color:rgba(34,211,238,.5);
    font-size:1.4rem;font-weight:800;letter-spacing:2px;
  }
  #geo-intro p{color:#d5d0f0;font-size:1rem;}

  /* ===== Cards ===== */
  .grid{display:grid;gap:24px;}
  .g-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
  .g-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
  .g-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
  .card{
    position:relative;border-radius:18px;padding:26px 22px;
    background:linear-gradient(160deg,rgba(45,27,105,.68),rgba(10,10,10,.88));
    border:2px solid rgba(236,72,153,.35);
    box-shadow:0 0 0 1px rgba(34,211,238,.16) inset,0 0 26px rgba(45,27,105,.7);
    transition:all .3s ease;overflow:hidden;
  }
  .card::after{
    content:"";position:absolute;top:-40%;left:-30%;width:60%;height:180%;
    background:linear-gradient(120deg,transparent,rgba(34,211,238,.09),transparent);
    transform:rotate(18deg);pointer-events:none;
  }
  .card:hover{
    transform:translateY(-5px);
    border-color:rgba(34,211,238,.75);
    box-shadow:0 0 34px rgba(236,72,153,.45),0 0 0 1px rgba(34,211,238,.45) inset;
  }
  .card .ico{font-size:1.7rem;display:block;margin-bottom:12px;filter:drop-shadow(0 0 10px rgba(236,72,153,.7));}
  .card h3{font-size:1.06rem;font-weight:800;color:#fff;margin-bottom:10px;letter-spacing:.3px;}
  .card p{font-size:.9rem;color:#b9b3dd;}

  /* ===== Stats ===== */
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:20px;}
  .stat{
    text-align:center;padding:28px 16px;border-radius:16px;
    background:linear-gradient(160deg,rgba(34,211,238,.10),rgba(45,27,105,.55));
    border:2px solid rgba(34,211,238,.32);
    box-shadow:0 0 20px rgba(34,211,238,.16);
    transition:all .3s ease;
  }
  .stat:hover{transform:translateY(-4px);border-color:#ec4899;box-shadow:0 0 30px rgba(236,72,153,.5);}
  .stat b{
    display:block;font-size:2rem;font-weight:900;line-height:1.2;
    background:linear-gradient(92deg,#ec4899,#22d3ee);
    -webkit-background-clip:text;background-clip:text;color:transparent;
  }
  .stat span{font-size:.86rem;color:#b9b3dd;letter-spacing:1px;}

  /* ===== Game recommend ===== */
  .game-card{padding:0;overflow:hidden;}
  .game-card img{width:100%;height:180px;object-fit:cover;}
  .game-body{padding:20px 20px 24px;}
  .badge{
    display:inline-block;font-size:.74rem;letter-spacing:1px;padding:3px 12px;border-radius:999px;
    background:linear-gradient(90deg,rgba(236,72,153,.22),rgba(34,211,238,.22));
    border:1px solid rgba(236,72,153,.5);color:#ffd6ea;margin-bottom:12px;
  }

  /* ===== Scores / progress table ===== */
  .table-wrap{
    border-radius:18px;overflow:hidden;
    border:2px solid rgba(34,211,238,.32);
    box-shadow:0 0 28px rgba(45,27,105,.8);
    background:rgba(10,10,10,.6);
  }
  table{width:100%;border-collapse:collapse;font-size:.92rem;}
  thead th{
    text-align:left;padding:14px 16px;font-weight:800;letter-spacing:1px;font-size:.82rem;
    color:#0a0a0a;background:linear-gradient(90deg,#ec4899,#22d3ee);
  }
  tbody td{padding:13px 16px;border-top:1px solid rgba(236,72,153,.18);color:#cdc7ee;}
  tbody tr:hover{background:rgba(236,72,153,.09);}
  tbody td:first-child{color:#22d3ee;font-weight:800;}

  /* ===== Brand story ===== */
  .story-flex{display:grid;grid-template-columns:1fr 1.1fr;gap:38px;align-items:center;}
  .story-img{
    border-radius:20px;overflow:hidden;
    border:2px solid rgba(236,72,153,.45);
    box-shadow:0 0 34px rgba(236,72,153,.3),0 0 0 1px rgba(34,211,238,.3) inset;
    transform:rotate(1.4deg);
  }
  .story-img img{width:100%;height:100%;object-fit:cover;}

  /* ===== News ===== */
  .news-item{
    position:relative;border-radius:18px;padding:24px 26px;margin-bottom:20px;
    background:linear-gradient(150deg,rgba(45,27,105,.62),rgba(10,10,10,.9));
    border-left:5px solid #ec4899;
    border-top:1px solid rgba(34,211,238,.22);
    border-right:1px solid rgba(34,211,238,.22);
    border-bottom:1px solid rgba(34,211,238,.22);
    box-shadow:0 0 22px rgba(45,27,105,.65);
    transition:all .3s ease;
  }
  .news-item:hover{
    border-left-color:#22d3ee;
    box-shadow:0 0 32px rgba(236,72,153,.42);
    transform:translateX(5px);
  }
  .news-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
  .news-tag{
    font-size:.74rem;letter-spacing:1px;padding:2px 12px;border-radius:999px;
    color:#0a0a0a;background:linear-gradient(90deg,#22d3ee,#ec4899);font-weight:700;
  }
  .news-date{font-size:.8rem;color:#8f89b8;letter-spacing:.5px;}
  .news-item h3{font-size:1.05rem;color:#fff;margin-bottom:10px;font-weight:800;}
  .news-item p{font-size:.9rem;color:#b9b3dd;}

  /* ===== Testimonials ===== */
  .quote{font-size:.92rem;color:#c6c0e8;margin-bottom:16px;}
  .who{display:flex;align-items:center;gap:10px;font-size:.84rem;color:#8f89b8;}
  .avatar{
    width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
    background:linear-gradient(135deg,#ec4899,#22d3ee);color:#0a0a0a;font-weight:900;
  }

  /* ===== FAQ ===== */
  .faq-item{
    border-radius:16px;margin-bottom:16px;overflow:hidden;
    border:2px solid rgba(236,72,153,.30);
    background:linear-gradient(160deg,rgba(45,27,105,.55),rgba(10,10,10,.88));
    box-shadow:0 0 18px rgba(45,27,105,.6);
    transition:all .3s ease;
  }
  .faq-item:hover{border-color:rgba(34,211,238,.7);box-shadow:0 0 26px rgba(34,211,238,.35);}
  .faq-q{
    display:flex;gap:12px;align-items:flex-start;
    padding:18px 22px;font-weight:800;font-size:.99rem;color:#fff;
  }
  .faq-q .qmark{
    flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
    font-size:.8rem;color:#0a0a0a;background:linear-gradient(135deg,#22d3ee,#ec4899);
    margin-top:2px;
  }
  .faq-a{padding:0 22px 20px 22px;font-size:.9rem;color:#b9b3dd;}

  /* ===== CTA ===== */
  #cta .cta-box{
    text-align:center;padding:56px 26px;border-radius:24px;
    background:
      radial-gradient(circle at 20% 20%,rgba(236,72,153,.28),transparent 55%),
      radial-gradient(circle at 80% 80%,rgba(34,211,238,.24),transparent 55%),
      linear-gradient(160deg,rgba(45,27,105,.9),rgba(10,10,10,.95));
    border:2px solid rgba(34,211,238,.45);
    box-shadow:0 0 46px rgba(236,72,153,.3);
  }
  #cta h2{margin-bottom:16px;}
  #cta p{color:#c6c0e8;max-width:720px;margin:0 auto 28px;font-size:.96rem;}

  /* ===== Footer ===== */
  .site-footer{
    margin-top:40px;
    border-top:2px solid rgba(236,72,153,.42);
    background:linear-gradient(180deg,rgba(10,10,10,.85),rgba(20,12,55,.96));
    box-shadow:0 -12px 40px rgba(236,72,153,.14);
  }
  .footer-inner{max-width:1200px;margin:0 auto;padding:48px 20px 26px;}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px;margin-bottom:34px;}
  .footer-inner h4{
    font-size:.94rem;color:#fff;margin-bottom:14px;letter-spacing:1.5px;
    text-shadow:0 0 12px rgba(34,211,238,.6);
  }
  .footer-inner p,.footer-inner li{font-size:.86rem;color:#a8a3c9;line-height:2;}
  .footer-inner ul{list-style:none;}
  .footer-inner ul a{text-decoration:none;color:#a8a3c9;transition:.22s;}
  .footer-inner ul a:hover{color:#22d3ee;text-shadow:0 0 10px rgba(34,211,238,.8);}
  .footer-bottom{
    border-top:1px solid rgba(236,72,153,.25);padding-top:20px;
    display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;
    font-size:.82rem;color:#8f89b8;
  }
  .footer-bottom a{text-decoration:none;color:#22d3ee;}
  .footer-bottom a:hover{color:#ec4899;}

  @media (max-width:900px){
    .hero-grid,.story-flex,.footer-grid{grid-template-columns:1fr;}
    .hero-visual,.story-img{transform:none;}
    .section{padding:48px 18px;}
  }