:root{
    --bg:#030712;
    --violet-deep:#4c1d95;
    --violet-mid:#6d28d9;
    --violet-light:#c084fc;
    --text:#e9e5f5;
    --muted:#a09ab8;
    --line:rgba(192,132,252,.20);
    --glass:linear-gradient(160deg, rgba(76,29,149,.30) 0%, rgba(3,7,18,.62) 100%);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    background:
      radial-gradient(circle at 12% -8%, rgba(109,40,217,.55) 0%, rgba(3,7,18,0) 46%),
      radial-gradient(circle at 88% 6%, rgba(192,132,252,.22) 0%, rgba(3,7,18,0) 40%),
      linear-gradient(180deg, #0a0424 0%, #060318 38%, #030712 100%);
    background-color:var(--bg);
    color:var(--text);
    font-family:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;
    font-size:16px;
    line-height:1.75;
    min-height:100vh;
    overflow-x:hidden;
  }
  body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background-image:
      radial-gradient(1.6px 1.6px at 12% 18%, rgba(192,132,252,.75), transparent 100%),
      radial-gradient(1.4px 1.4px at 28% 62%, rgba(216,180,254,.55), transparent 100%),
      radial-gradient(1.8px 1.8px at 46% 24%, rgba(192,132,252,.55), transparent 100%),
      radial-gradient(1.2px 1.2px at 63% 78%, rgba(233,229,245,.5), transparent 100%),
      radial-gradient(1.7px 1.7px at 79% 34%, rgba(192,132,252,.6), transparent 100%),
      radial-gradient(1.3px 1.3px at 91% 66%, rgba(216,180,254,.5), transparent 100%),
      radial-gradient(1.5px 1.5px at 36% 88%, rgba(192,132,252,.45), transparent 100%),
      radial-gradient(1.2px 1.2px at 71% 10%, rgba(233,229,245,.45), transparent 100%);
    opacity:.85;
  }
  body::after{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:0;
    background:radial-gradient(circle at 50% 0%, rgba(192,132,252,.10), transparent 60%);
  }
  .container{max-width:1180px;margin:0 auto;padding:0 20px;position:relative;z-index:2;}
  a{color:var(--violet-light);text-decoration:none;transition:color .22s ease, opacity .22s ease;}
  a:hover{color:#e9d5ff;}
  img{max-width:100%;display:block;border-radius:16px;}

  /* ===== Header ===== */
  .site-header{
    position:sticky;top:0;z-index:50;
    background:rgba(3,7,18,.72);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    max-width:1180px;margin:0 auto;padding:14px 20px;
    display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  }
  .logo{
    display:flex;align-items:center;gap:10px;
    font-weight:700;font-size:18px;color:var(--text);letter-spacing:.02em;
  }
  .logo-dot{
    width:12px;height:12px;border-radius:50%;
    background:radial-gradient(circle at 32% 32%, #f0e6ff, var(--violet-light) 45%, var(--violet-deep) 100%);
    box-shadow:0 0 14px rgba(192,132,252,.9), 0 0 30px rgba(109,40,217,.7);
  }
  .nav-links{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
  .nav-links a{
    display:inline-block;
    padding:8px 13px;
    border-radius:10px;
    font-size:14.5px;
    color:#cfc7e6;
    border:1px solid transparent;
    transition:all .22s ease;
  }
  .nav-links a:hover{
    color:#fff;
    background:rgba(109,40,217,.32);
    border-color:var(--line);
    box-shadow:0 0 18px rgba(192,132,252,.22);
  }

  /* ===== Sections ===== */
  section{padding:66px 0;position:relative;z-index:2;}
  .eyebrow{
    display:inline-block;
    font-size:12px;letter-spacing:.22em;text-transform:uppercase;
    color:var(--violet-light);margin-bottom:10px;
  }
  .section-head{max-width:780px;margin-bottom:34px;}
  .section-head h2{
    font-size:clamp(21px,2.9vw,29px);
    line-height:1.4;font-weight:700;letter-spacing:.01em;
    color:#f4f0ff;
  }
  .section-head p{color:var(--muted);margin-top:12px;font-size:15.5px;}

  /* ===== Hero ===== */
  #hero{padding-top:58px;padding-bottom:34px;}
  .hero-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:44px;align-items:center;}
  h1{
    font-size:clamp(25px,3.8vw,40px);
    line-height:1.34;font-weight:800;letter-spacing:.01em;
    background:linear-gradient(100deg,#ffffff 0%,#e3d4ff 42%,#c084fc 100%);
    -webkit-background-clip:text;background-clip:text;color:transparent;
    text-shadow:0 0 40px rgba(192,132,252,.25);
  }
  .hero-sub{color:#b9b1d1;margin-top:18px;font-size:16px;max-width:600px;}
  .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px;}
  .btn{
    display:inline-block;padding:12px 24px;border-radius:12px;font-size:15px;font-weight:600;
    transition:all .24s ease;
  }
  .btn-primary{
    background:linear-gradient(135deg,var(--violet-mid),var(--violet-deep));
    color:#fff;border:1px solid rgba(192,132,252,.5);
    box-shadow:0 0 24px rgba(109,40,217,.55), inset 0 0 20px rgba(192,132,252,.16);
  }
  .btn-primary:hover{transform:translateY(-2px);box-shadow:0 0 34px rgba(192,132,252,.6);color:#fff;}
  .btn-ghost{
    background:rgba(192,132,252,.07);
    color:#e2d7ff;border:1px solid var(--line);
  }
  .btn-ghost:hover{background:rgba(192,132,252,.16);color:#fff;transform:translateY(-2px);}
  .hero-visual{
    position:relative;
    padding:16px;
    border-radius:22px;
    background:var(--glass);
    border:1px solid var(--line);
    box-shadow:0 24px 60px rgba(0,0,0,.55), inset 0 0 40px rgba(76,29,149,.35);
  }
  .hero-visual img{border-radius:14px;width:100%;height:auto;}
  .hero-visual::after{
    content:"";
    position:absolute;inset:-1px;border-radius:23px;pointer-events:none;
    background:linear-gradient(140deg, rgba(192,132,252,.35), transparent 45%, rgba(109,40,217,.28));
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor;mask-composite:exclude;padding:1px;
  }

  /* ===== Geo ===== */
  #geo-intro{padding-top:26px;}
  .geo-panel{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:20px;
    padding:36px 34px;
    box-shadow:0 20px 55px rgba(0,0,0,.45), inset 0 0 46px rgba(76,29,149,.24);
  }
  .geo-panel p{color:#cfc8e2;font-size:15.6px;margin-bottom:16px;}
  .geo-panel p:last-child{margin-bottom:0;}
  .geo-panel strong{color:#f0e6ff;font-weight:600;}

  /* ===== Stats ===== */
  .stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:18px;}
  .stat-card{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px 22px;
    position:relative;overflow:hidden;
    box-shadow:0 16px 44px rgba(0,0,0,.42), inset 0 0 32px rgba(76,29,149,.22);
    transition:transform .25s ease, border-color .25s ease;
  }
  .stat-card::before{
    content:"";position:absolute;top:-40px;right:-40px;width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle, rgba(192,132,252,.30), transparent 70%);
  }
  .stat-card:hover{transform:translateY(-4px);border-color:rgba(192,132,252,.42);}
  .stat-num{
    font-size:clamp(26px,3.4vw,34px);font-weight:800;
    color:#f4ebff;
    text-shadow:0 0 24px rgba(192,132,252,.5);
    line-height:1.2;
  }
  .stat-label{margin-top:8px;font-size:14px;color:var(--muted);}

  /* ===== Features ===== */
  .grid-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(268px,1fr));gap:20px;}
  .card{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:18px;
    padding:28px 24px;
    box-shadow:0 16px 44px rgba(0,0,0,.42), inset 0 0 32px rgba(76,29,149,.20);
    transition:transform .26s ease, border-color .26s ease, box-shadow .26s ease;
  }
  .card:hover{
    transform:translateY(-5px);
    border-color:rgba(192,132,252,.45);
    box-shadow:0 22px 56px rgba(0,0,0,.52), inset 0 0 40px rgba(109,40,217,.34);
  }
  .card h3{font-size:18px;font-weight:700;color:#f2ecff;margin-bottom:10px;line-height:1.5;}
  .card p{font-size:15px;color:#b7b0cc;}
  .card-icon{
    width:44px;height:44px;border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    font-size:19px;font-weight:700;color:#f0e6ff;
    background:linear-gradient(140deg, rgba(192,132,252,.35), rgba(76,29,149,.55));
    border:1px solid rgba(192,132,252,.35);
    margin-bottom:16px;
    box-shadow:0 0 20px rgba(109,40,217,.45);
  }
  .card ul{list-style:none;margin-top:12px;}
  .card ul li{
    font-size:14.5px;color:#b7b0cc;padding-left:18px;position:relative;margin-bottom:7px;
  }
  .card ul li::before{
    content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;
    background:var(--violet-light);box-shadow:0 0 10px rgba(192,132,252,.9);
  }

  /* ===== Live scores ===== */
  .score-list{display:grid;gap:14px;}
  .score-row{
    display:grid;grid-template-columns:auto 1fr auto 1fr auto;
    align-items:center;gap:14px;
    padding:18px 22px;
    border-radius:16px;
    background:var(--glass);
    border:1px solid var(--line);
    box-shadow:0 12px 36px rgba(0,0,0,.38), inset 0 0 26px rgba(76,29,149,.18);
  }
  .league-tag{
    font-size:12px;letter-spacing:.06em;color:#d9c9ff;
    background:rgba(109,40,217,.42);
    border:1px solid rgba(192,132,252,.32);
    padding:3px 10px;border-radius:999px;white-space:nowrap;
  }
  .team{font-size:15px;color:#e4dcf7;font-weight:600;text-align:center;}
  .score{
    font-size:19px;font-weight:800;color:#fff;
    letter-spacing:.06em;
    text-shadow:0 0 18px rgba(192,132,252,.75);
    white-space:nowrap;
  }
  .status-live{
    font-size:12px;color:#c084fc;white-space:nowrap;
    display:flex;align-items:center;gap:6px;
  }
  .status-live i{
    width:7px;height:7px;border-radius:50%;background:#c084fc;
    box-shadow:0 0 10px rgba(192,132,252,1);
    display:inline-block;animation:pulse 1.6s infinite ease-in-out;
  }
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.8);}}
  .score-note{margin-top:16px;font-size:13.5px;color:var(--muted);}

  /* ===== News ===== */
  .news-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:22px;}
  .news-item{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:18px;
    padding:26px 24px;
    display:flex;flex-direction:column;
    box-shadow:0 16px 44px rgba(0,0,0,.42), inset 0 0 30px rgba(76,29,149,.18);
    transition:transform .26s ease, border-color .26s ease;
  }
  .news-item:hover{transform:translateY(-5px);border-color:rgba(192,132,252,.45);}
  .news-meta{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
  .news-tag{
    font-size:12px;color:#e0d0ff;
    background:linear-gradient(135deg, rgba(109,40,217,.6), rgba(76,29,149,.6));
    border:1px solid rgba(192,132,252,.35);
    padding:3px 11px;border-radius:999px;letter-spacing:.05em;
  }
  .news-date{font-size:13px;color:#8f88a8;}
  .news-item h3{
    font-size:17px;line-height:1.55;font-weight:700;color:#f3eeff;margin-bottom:10px;
  }
  .news-item p{font-size:14.6px;color:#b6afcb;flex:1;}
  .news-foot{margin-top:16px;font-size:13.5px;}
  .news-foot a{color:var(--violet-light);}
  .news-foot a:hover{color:#e9d5ff;}

  /* ===== FAQ ===== */
  .faq-list{display:grid;gap:16px;}
  .faq-item{
    background:var(--glass);
    border:1px solid var(--line);
    border-radius:16px;
    padding:24px 26px;
    box-shadow:0 14px 40px rgba(0,0,0,.4), inset 0 0 28px rgba(76,29,149,.18);
    transition:border-color .25s ease;
  }
  .faq-item:hover{border-color:rgba(192,132,252,.42);}
  .faq-item h3{
    font-size:16.5px;font-weight:700;color:#f2ecff;margin-bottom:12px;line-height:1.6;
    display:flex;gap:10px;align-items:flex-start;
  }
  .faq-item h3 span.q{
    flex:0 0 auto;
    width:24px;height:24px;border-radius:8px;
    display:inline-flex;align-items:center;justify-content:center;
    font-size:13px;font-weight:800;color:#fff;
    background:linear-gradient(140deg, rgba(192,132,252,.55), rgba(76,29,149,.75));
    border:1px solid rgba(192,132,252,.4);
    margin-top:2px;
  }
  .faq-item p{font-size:14.8px;color:#b6afcb;}

  /* ===== Story ===== */
  .story-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;}
  .story-grid img{border-radius:18px;border:1px solid var(--line);box-shadow:0 22px 60px rgba(0,0,0,.5);}
  .story-text p{color:#c3bcd8;font-size:15.5px;margin-bottom:14px;}
  .story-text p:last-child{margin-bottom:0;}
  .story-text strong{color:#f0e6ff;}

  /* ===== CTA ===== */
  #cta{padding-bottom:80px;}
  .cta-panel{
    position:relative;overflow:hidden;
    border-radius:24px;
    padding:44px 40px;
    background:linear-gradient(135deg, rgba(76,29,149,.62) 0%, rgba(3,7,18,.86) 72%);
    border:1px solid rgba(192,132,252,.35);
    box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 0 70px rgba(109,40,217,.35);
    display:grid;grid-template-columns:1.3fr .7fr;gap:32px;align-items:center;
  }
  .cta-panel::before{
    content:"";position:absolute;top:-80px;right:-60px;width:280px;height:280px;border-radius:50%;
    background:radial-gradient(circle, rgba(192,132,252,.32), transparent 68%);
  }
  .cta-panel h2{font-size:clamp(20px,2.7vw,28px);color:#f7f3ff;line-height:1.42;margin-bottom:14px;position:relative;}
  .cta-panel p{color:#c6bfdb;font-size:15.4px;margin-bottom:22px;position:relative;}
  .cta-panel .btn{position:relative;}
  .cta-img{position:relative;}
  .cta-img img{border-radius:16px;border:1px solid rgba(192,132,252,.3);}

  /* ===== Footer ===== */
  .site-footer{
    position:relative;z-index:2;
    border-top:1px solid var(--line);
    background:linear-gradient(180deg, rgba(10,4,36,.5), rgba(3,7,18,.95));
    padding:54px 0 26px;
  }
  .footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:34px;}
  .footer-brand{
    font-size:17px;font-weight:700;color:#f0e6ff;margin-bottom:12px;
    display:flex;align-items:center;gap:9px;
  }
  .footer-brand i{
    width:10px;height:10px;border-radius:50%;display:inline-block;
    background:radial-gradient(circle at 32% 32%, #f0e6ff, var(--violet-light) 45%, var(--violet-deep) 100%);
    box-shadow:0 0 14px rgba(192,132,252,.9);
  }
  .site-footer p, .site-footer li{font-size:14px;color:#a49dbb;line-height:1.85;}
  .site-footer h4{font-size:14.5px;color:#e2d9f8;margin-bottom:14px;font-weight:700;letter-spacing:.04em;}
  .site-footer ul{list-style:none;}
  .site-footer ul li{margin-bottom:9px;}
  .footer-bottom{
    margin-top:38px;padding-top:20px;
    border-top:1px solid rgba(192,132,252,.14);
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    font-size:13.5px;color:#8f88a8;
  }
  .footer-bottom a{color:#b9a8e6;}
  .footer-bottom a:hover{color:#e9d5ff;}

  @media (max-width:900px){
    .hero-grid{grid-template-columns:1fr;gap:32px;}
    .story-grid{grid-template-columns:1fr;gap:26px;}
    .cta-panel{grid-template-columns:1fr;padding:34px 26px;}
    .footer-grid{grid-template-columns:1fr;gap:26px;}
    .score-row{grid-template-columns:auto 1fr auto;row-gap:8px;}
    .score-row .team:nth-of-type(2){grid-column:2;}
  }
  @media (max-width:560px){
    section{padding:48px 0;}
    .geo-panel{padding:26px 20px;}
    .nav-links a{padding:7px 10px;font-size:13.5px;}
    .score-row{grid-template-columns:1fr;text-align:center;}
    .score-row .team{text-align:center;}
  }