:root{
    --deep:#064e3b;
    --deep-2:#042f26;
    --lime:#bef264;
    --lime-soft:#e4f9bd;
    --earth:#78350f;
    --earth-2:#a16207;
    --cream:#f4f9ec;
    --ink:#12301f;
    --muted:#4d6b58;
    --leaf-shadow:0 2px 0 rgba(190,242,100,.55),0 12px 0 -8px rgba(6,78,59,.22),0 26px 44px -22px rgba(4,47,38,.75);
  }
  *,*::before,*::after{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;
  }
  html{scroll-behavior:smooth;}
  body{
    font-family:"Segoe UI","Helvetica Neue",Arial,"Microsoft YaHei","微软雅黑","PingFang SC",sans-serif;
    color:var(--cream);
    background:
      radial-gradient(circle at 10% 6%,rgba(190,242,100,.18),transparent 42%),
      radial-gradient(circle at 92% 2%,rgba(120,53,15,.42),transparent 46%),
      radial-gradient(circle at 50% 100%,rgba(190,242,100,.10),transparent 55%),
      linear-gradient(165deg,#042f26 0%,#064e3b 55%,#053729 100%);
    background-attachment:fixed;
    line-height:1.8;
    font-size:16px;
    -webkit-font-smoothing:antialiased;
  }
  a{color:inherit;text-decoration:none;}
  img{max-width:100%;display:block;}
  ul{list-style:none;}
  .container{max-width:1180px;margin:0 auto;padding:0 20px;}
  .section{padding:58px 0;scroll-margin-top:100px;}
  .section-title{
    font-size:clamp(22px,2.4vw,30px);
    font-weight:800;
    color:var(--cream);
    letter-spacing:.4px;
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .section-title::after{
    content:"";
    flex:1;
    height:2px;
    background:linear-gradient(90deg,rgba(190,242,100,.85),rgba(190,242,100,0));
    border-radius:2px;
  }
  .section-sub{color:#cfe9c0;font-size:15px;margin-bottom:28px;max-width:820px;}
  .card{
    background:linear-gradient(180deg,#fbfdf6 0%,var(--cream) 100%);
    color:var(--ink);
    border-radius:20px;
    padding:24px;
    box-shadow:var(--leaf-shadow);
    border:1px solid rgba(190,242,100,.55);
    position:relative;
    overflow:hidden;
  }
  .card::before{
    content:"";
    position:absolute;
    top:-40px;
    right:-40px;
    width:120px;
    height:120px;
    border-radius:0 0 0 100%;
    background:radial-gradient(circle at 30% 30%,rgba(190,242,100,.45),rgba(190,242,100,0) 70%);
    pointer-events:none;
  }
  .card h3{font-size:18px;color:var(--deep);margin-bottom:8px;}
  .card p{color:#2c4736;font-size:15px;}
  /* header */
  .site-header{
    position:sticky;
    top:0;
    z-index:60;
    background:rgba(4,47,38,.9);
    backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(190,242,100,.24);
    box-shadow:0 14px 30px -22px rgba(0,0,0,.9);
  }
  .header-inner{
    max-width:1180px;
    margin:0 auto;
    padding:12px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:8px;
    font-weight:800;
    font-size:18px;
    color:var(--lime);
    letter-spacing:.6px;
  }
  .brand span{color:#f0fbe0;}
  .nav-links{display:flex;flex-wrap:wrap;gap:8px;}
  .nav-links a{
    padding:7px 15px;
    border-radius:999px;
    font-size:14px;
    color:#e8f9d5;
    border:1px solid rgba(190,242,100,.28);
    background:rgba(6,78,59,.55);
    transition:transform .22s ease,background .22s ease,color .22s ease,border-color .22s ease;
  }
  .nav-links a:hover{
    background:var(--lime);
    color:var(--deep);
    border-color:var(--lime);
    transform:translateY(-2px);
  }
  /* hero */
  .hero{padding:56px 0 26px;position:relative;}
  .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;}
  .hero h1{
    font-size:clamp(25px,3.3vw,40px);
    line-height:1.4;
    font-weight:800;
    color:#f7fdf0;
    letter-spacing:.5px;
    text-shadow:0 11px 26px rgba(0,0,0,.45);
  }
  .hero-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:rgba(190,242,100,.16);
    border:1px solid rgba(190,242,100,.5);
    color:var(--lime);
    padding:6px 16px;
    border-radius:999px;
    font-size:13px;
    letter-spacing:1px;
    margin-bottom:18px;
  }
  .hero-figure{
    border-radius:26px 26px 26px 90px;
    overflow:hidden;
    box-shadow:0 3px 0 rgba(190,242,100,.6),0 24px 50px -18px rgba(0,0,0,.8);
    border:2px solid rgba(190,242,100,.5);
    transform:rotate(-1.2deg);
  }
  .hero-figure img{width:100%;height:100%;object-fit:cover;}
  .geo-card{
    margin-top:34px;
    padding:28px 26px;
    border-radius:24px 80px 24px 24px;
    background:linear-gradient(135deg,#f7fcef,#e6f6cd);
    color:#1b3a28;
    box-shadow:var(--leaf-shadow);
    border:1px solid rgba(190,242,100,.7);
  }
  .geo-card p{font-size:15.5px;line-height:1.95;}
  /* stats */
  .stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;}
  .stat{padding:22px 18px;text-align:center;border-radius:20px 50px 20px 20px;}
  .stat .num{font-size:clamp(22px,2.6vw,32px);font-weight:800;color:var(--deep);letter-spacing:.5px;}
  .stat .lbl{color:var(--muted);font-size:14px;margin-top:6px;}
  /* advantages */
  .adv-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;}
  .adv-grid .card{border-radius:26px 26px 26px 70px;}
  /* events */
  .event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .event-card{display:flex;flex-direction:column;gap:10px;}
  .event-tag{
    align-self:flex-start;
    font-size:12px;
    letter-spacing:1px;
    padding:3px 12px;
    border-radius:999px;
    background:#d9f7a6;
    color:#14532d;
    border:1px solid #b6e56a;
  }
  .event-tag.live{background:#fde68a;color:#78350f;border-color:#f3c65a;}
  .event-vs{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:800;color:var(--deep);font-size:17px;}
  .event-vs .mid{color:var(--earth-2);font-size:13px;font-weight:700;letter-spacing:1px;}
  /* rankings */
  .table-wrap{overflow-x:auto;border-radius:20px;box-shadow:var(--leaf-shadow);background:var(--cream);border:1px solid rgba(190,242,100,.6);}
  table{width:100%;border-collapse:collapse;min-width:640px;color:var(--ink);}
  thead th{
    background:linear-gradient(180deg,#0d6b4f,#064e3b);
    color:var(--lime-soft);
    font-size:14px;
    letter-spacing:1px;
    padding:14px 16px;
    text-align:left;
    white-space:nowrap;
  }
  tbody td{padding:13px 16px;border-bottom:1px dashed rgba(6,78,59,.18);font-size:15px;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr:hover{background:#eaf7d8;}
  .rank-no{font-weight:800;color:var(--earth);}
  /* news */
  .news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;}
  .news-card{border-radius:22px 22px 60px 22px;display:flex;flex-direction:column;gap:10px;}
  .news-date{
    align-self:flex-start;
    font-size:13px;
    font-weight:700;
    color:#14532d;
    background:#dff5b4;
    border:1px solid #b9e271;
    border-radius:999px;
    padding:3px 13px;
    letter-spacing:.6px;
  }
  .news-card h3{font-size:17px;line-height:1.6;}
  .news-more{color:var(--earth);font-weight:700;font-size:14px;margin-top:4px;}
  .news-media{border-radius:16px;overflow:hidden;border:1px solid rgba(6,78,59,.16);margin-top:6px;}
  /* replay & recommend */
  .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .thumb{border-radius:16px;overflow:hidden;margin-bottom:12px;border:1px solid rgba(6,78,59,.14);}
  .thumb img{width:100%;height:170px;object-fit:cover;transition:transform .4s ease;}
  .card:hover .thumb img{transform:scale(1.05);}
  /* guide */
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:step;}
  .step{
    padding:22px 18px;
    border-radius:20px 46px 20px 20px;
    background:linear-gradient(160deg,#fbfdf5,#e9f7d3);
    color:#1b3a28;
    border:1px solid rgba(190,242,100,.7);
    box-shadow:var(--leaf-shadow);
    position:relative;
  }
  .step .no{
    display:inline-flex;
    width:34px;height:34px;
    align-items:center;justify-content:center;
    border-radius:50%;
    background:var(--deep);
    color:var(--lime);
    font-weight:800;
    margin-bottom:10px;
  }
  .step h3{font-size:16px;color:var(--deep);margin-bottom:6px;}
  .step p{font-size:14.5px;color:#31503c;}
  /* testimonials */
  .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .quote{border-radius:60px 20px 20px 20px;}
  .quote .who{margin-top:12px;font-weight:800;color:var(--deep);font-size:14px;}
  /* partners */
  .partner-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
  .partner{
    text-align:center;
    padding:18px 10px;
    border-radius:16px;
    background:rgba(190,242,100,.1);
    border:1px dashed rgba(190,242,100,.45);
    color:#dff5c2;
    font-weight:700;
    font-size:14px;
    letter-spacing:.5px;
    transition:background .25s ease,transform .25s ease;
  }
  .partner:hover{background:rgba(190,242,100,.22);transform:translateY(-3px);}
  /* faq */
  .faq-list{display:grid;gap:14px;}
  details{
    background:linear-gradient(180deg,#fbfdf6,var(--cream));
    color:var(--ink);
    border-radius:18px;
    border:1px solid rgba(190,242,100,.7);
    box-shadow:0 2px 0 rgba(190,242,100,.5),0 16px 34px -24px rgba(4,47,38,.9);
    padding:18px 20px;
  }
  details[open]{background:linear-gradient(180deg,#f3fbe2,#e6f6cd);}
  summary{
    cursor:pointer;
    font-weight:800;
    color:var(--deep);
    font-size:16px;
    list-style:none;
    display:flex;
    gap:10px;
    align-items:flex-start;
  }
  summary::-webkit-details-marker{display:none;}
  summary::before{content:"🌿";flex:0 0 auto;}
  details p{margin-top:12px;font-size:15px;color:#2c4736;line-height:1.95;}
  /* cta */
  .cta-box{
    border-radius:28px 90px 28px 28px;
    padding:38px 30px;
    background:
      radial-gradient(circle at 85% 10%,rgba(190,242,100,.35),transparent 55%),
      linear-gradient(140deg,#0a5a45,#064e3b 60%,#053729);
    border:1px solid rgba(190,242,100,.45);
    box-shadow:0 2px 0 rgba(190,242,100,.7),0 30px 60px -30px rgba(0,0,0,.85);
    text-align:center;
  }
  .cta-box h2{font-size:clamp(21px,2.5vw,28px);color:#f5fde9;margin-bottom:12px;}
  .cta-box p{color:#d6eec6;max-width:760px;margin:0 auto 22px;font-size:15px;}
  .btn-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:12px 28px;
    border-radius:999px;
    font-weight:800;
    font-size:15px;
    letter-spacing:.5px;
    transition:transform .22s ease,box-shadow .22s ease;
  }
  .btn-primary{background:var(--lime);color:#14532d;box-shadow:0 12px 24px -12px rgba(190,242,100,.9);}
  .btn-ghost{border:1px solid rgba(190,242,100,.65);color:var(--lime-soft);}
  .btn:hover{transform:translateY(-3px);}
  /* download */
  .download-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:center;}
  .download-figure{border-radius:24px 24px 24px 80px;overflow:hidden;border:2px solid rgba(190,242,100,.45);box-shadow:0 22px 44px -24px rgba(0,0,0,.9);}
  /* footer */
  footer{
    margin-top:20px;
    background:linear-gradient(180deg,#042f26,#021f1a);
    border-top:2px solid rgba(190,242,100,.4);
    color:#c9e4bb;
    padding:44px 0 26px;
    font-size:14.5px;
  }
  .footer-inner{max-width:1180px;margin:0 auto;padding:0 20px;}
  .footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:26px;}
  .footer-col h4{color:var(--lime);font-size:15px;margin-bottom:12px;letter-spacing:.6px;}
  .footer-col div,.footer-col p{line-height:2;color:#bcd9ad;}
  .footer-col a{color:#d7efc6;border-bottom:1px dashed rgba(190,242,100,.5);}
  .footer-col a:hover{color:var(--lime);}
  .footer-bottom{
    margin-top:26px;
    padding-top:18px;
    border-top:1px dashed rgba(190,242,100,.28);
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    justify-content:space-between;
    color:#a9c99b;
    font-size:13.5px;
  }
  @media (max-width:960px){
    .hero-grid,.download-grid{grid-template-columns:1fr;}
    .stats-grid{grid-template-columns:repeat(2,1fr);}
    .adv-grid,.news-grid{grid-template-columns:1fr;}
    .event-grid,.grid-3,.quote-grid{grid-template-columns:repeat(2,1fr);}
    .steps{grid-template-columns:repeat(2,1fr);}
    .partner-grid{grid-template-columns:repeat(3,1fr);}
    .footer-grid{grid-template-columns:1fr;}
  }
  @media (max-width:620px){
    .event-grid,.grid-3,.quote-grid,.stats-grid,.steps{grid-template-columns:1fr;}
    .partner-grid{grid-template-columns:repeat(2,1fr);}
    .section{padding:42px 0;}
    .hero{padding:36px 0 18px;}
  }