/* roulang page: index */
:root{
      --green-900:#0B1A12;
      --green-800:#12351F;
      --green-700:#0F7A3B;
      --green-600:#16A34A;
      --green-500:#22C55E;
      --green-100:#E6F6E8;
      --yellow:#FBBF24;
      --orange:#F97316;
      --text:#102016;
      --muted:#607066;
      --weak:#7B8B80;
      --bg:#F4F8F1;
      --surface:#FAFCF7;
      --surface-2:#EEF6EA;
      --border:#DCE8D6;
      --border-strong:rgba(15,122,59,.18);
      --shadow:0 18px 45px rgba(16,32,22,.10);
      --shadow-hover:0 24px 60px rgba(16,32,22,.16);
      --radius-lg:24px;
      --radius-md:18px;
      --radius-sm:14px;
      --container:1240px;
      --gradient:linear-gradient(135deg,#0F7A3B 0%,#22C55E 55%,#FBBF24 100%);
      --soft-gradient:linear-gradient(135deg,rgba(34,197,94,.12),rgba(251,191,36,.16));
      --night-gradient:linear-gradient(135deg,#0B1A12 0%,#12351F 68%,#1C5C2E 100%);
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at 12% 8%,rgba(34,197,94,.13),transparent 28%),
        radial-gradient(circle at 88% 20%,rgba(251,191,36,.13),transparent 26%),
        var(--bg);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{border:0;cursor:pointer}
    ::selection{background:rgba(34,197,94,.22)}
    .container{width:min(var(--container),calc(100% - 48px));margin:0 auto}
    .section{padding:84px 0}
    .section-tight{padding:58px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border:1px solid var(--border-strong);
      border-radius:999px;background:rgba(255,255,255,.72);
      color:var(--green-700);font-size:13px;font-weight:750;
      box-shadow:0 8px 22px rgba(16,32,22,.05);
    }
    .eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--gradient)}
    .section-head{display:flex;justify-content:space-between;gap:28px;align-items:end;margin-bottom:30px}
    .section-kicker{max-width:720px}
    h1,h2,h3{letter-spacing:-.03em;color:var(--text);line-height:1.16}
    h1{font-size:clamp(34px,5.2vw,58px);font-weight:850}
    h2{font-size:clamp(26px,3.6vw,38px);font-weight:820;margin-top:14px}
    h3{font-size:21px;font-weight:780}
    p{color:var(--muted)}
    .lead{font-size:18px;color:#3E5145;line-height:1.9}
    .text-link{
      display:inline-flex;align-items:center;gap:8px;color:var(--green-700);font-weight:750;
      transition:.25s ease;
    }
    .text-link:hover{color:var(--orange);transform:translateX(3px)}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      min-height:46px;padding:12px 20px;border-radius:999px;
      font-weight:800;transition:.25s ease;border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-primary{background:var(--gradient);color:white;box-shadow:0 14px 28px rgba(22,163,74,.24)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(22,163,74,.32);filter:saturate(1.08)}
    .btn-secondary{background:#fff;color:var(--green-700);border-color:rgba(15,122,59,.16);box-shadow:0 10px 25px rgba(16,32,22,.07)}
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.42);box-shadow:var(--shadow)}
    .btn-yellow{background:var(--yellow);color:#173419;box-shadow:0 14px 30px rgba(251,191,36,.26)}
    .btn-yellow:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(251,191,36,.35)}
    .badge,.tag{
      display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;
      font-size:12px;font-weight:800;border:1px solid rgba(15,122,59,.12);
      background:rgba(255,255,255,.72);color:var(--green-700);
    }
    .tag-hot{background:rgba(249,115,22,.12);color:#B94A0B;border-color:rgba(249,115,22,.22)}
    .tag-yellow{background:rgba(251,191,36,.16);color:#8A5A00;border-color:rgba(251,191,36,.26)}
    .tag-dark{background:#12351F;color:#DFF7E5;border-color:rgba(255,255,255,.12)}
    .card{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(15,122,59,.10);
      border-radius:var(--radius-lg);
      box-shadow:0 12px 34px rgba(16,32,22,.07);
      transition:.25s ease;
      overflow:hidden;
    }
    .card:hover{transform:translateY(-4px);border-color:rgba(34,197,94,.35);box-shadow:var(--shadow-hover)}
    .image-wrap{position:relative;overflow:hidden;border-radius:22px}
    .image-wrap img{width:100%;height:100%;object-fit:cover;transition:.45s ease}
    .card:hover .image-wrap img{transform:scale(1.045)}
    .field-lines{
      position:absolute;inset:0;pointer-events:none;opacity:.2;
      background:
        linear-gradient(90deg,transparent 49%,rgba(255,255,255,.9) 50%,transparent 51%),
        radial-gradient(circle at 50% 50%,transparent 0 70px,rgba(255,255,255,.85) 72px,transparent 74px);
    }

    .site-header{
      position:sticky;top:0;z-index:50;
      background:rgba(250,252,247,.94);
      border-bottom:1px solid rgba(15,122,59,.12);
      box-shadow:0 12px 30px rgba(16,32,22,.06);
    }
    .nav-shell{padding:14px 0 10px}
    .nav-main{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;align-items:center;gap:18px}
    .logo{
      display:flex;align-items:center;gap:10px;font-weight:900;letter-spacing:-.04em;
      transition:.25s ease;min-width:max-content;
    }
    .logo:hover{transform:scale(1.02)}
    .logo-mark{
      width:44px;height:44px;border-radius:16px;background:var(--gradient);
      display:grid;place-items:center;box-shadow:0 14px 28px rgba(22,163,74,.22);
      position:relative;overflow:hidden;color:white;font-weight:900;
    }
    .logo-mark::before{
      content:"";position:absolute;inset:9px;border:2px solid rgba(255,255,255,.72);border-radius:50%;
    }
    .logo-mark::after{
      content:"";position:absolute;width:28px;height:2px;background:rgba(255,255,255,.72);transform:rotate(26deg);
    }
    .logo-text{display:flex;flex-direction:column;line-height:1.05}
    .logo-text strong{font-size:21px;color:var(--green-800)}
    .logo-text span{font-size:12px;color:var(--muted);font-weight:700;letter-spacing:.02em;margin-top:4px}
    .nav-search{position:relative}
    .nav-search form{
      display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);
      border-radius:999px;padding:7px 8px 7px 16px;box-shadow:0 10px 25px rgba(16,32,22,.06);
      transition:.25s ease;
    }
    .nav-search form:focus-within{border-color:var(--green-500);box-shadow:0 0 0 4px rgba(34,197,94,.16),0 12px 28px rgba(16,32,22,.08)}
    .search-icon{color:var(--green-700);font-size:18px}
    .nav-search input{width:100%;border:0;outline:0;background:transparent;color:var(--text);min-width:0}
    .nav-search input::placeholder{color:#8A998D}
    .search-submit{padding:8px 16px;border-radius:999px;background:var(--green-700);color:#fff;font-weight:800;transition:.25s ease}
    .search-submit:hover{background:var(--green-600)}
    .quick-links{display:flex;align-items:center;gap:8px;white-space:nowrap}
    .quick-links a{
      padding:9px 11px;border-radius:999px;color:#385043;font-size:14px;font-weight:750;transition:.22s ease;
    }
    .quick-links a:hover,.quick-links a.active{background:var(--green-100);color:var(--green-700)}
    .category-nav{margin-top:12px;display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
    .category-nav::-webkit-scrollbar{display:none}
    .category-nav a{
      flex:0 0 auto;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.76);
      border:1px solid rgba(15,122,59,.10);color:#3A5141;font-size:13px;font-weight:800;
      transition:.22s ease;
    }
    .category-nav a:hover,.category-nav a.active{background:var(--green-700);color:white;border-color:var(--green-700)}

    .hero{
      position:relative;padding:62px 0 76px;overflow:hidden;
      background:
        linear-gradient(90deg,rgba(244,248,241,.94) 0%,rgba(244,248,241,.84) 50%,rgba(244,248,241,.62) 100%),
        url("/assets/images/backpic/back-1.webp") center/cover no-repeat;
    }
    .hero::before{
      content:"";position:absolute;inset:auto -10% -110px -10%;height:190px;
      background:radial-gradient(ellipse at center,rgba(34,197,94,.14),transparent 62%);
    }
    .hero-grid{position:relative;display:grid;grid-template-columns:1.02fr .98fr;gap:42px;align-items:center}
    .hero-copy .lead{margin-top:18px;max-width:690px}
    .hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}
    .hero-badges{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;max-width:650px}
    .data-badge{
      border:1px solid rgba(15,122,59,.13);border-radius:18px;background:rgba(255,255,255,.78);
      padding:15px 16px;box-shadow:0 12px 28px rgba(16,32,22,.07);
    }
    .data-badge strong{display:block;color:var(--orange);font-size:25px;line-height:1.1;font-variant-numeric:tabular-nums}
    .data-badge span{font-size:13px;color:var(--muted);font-weight:750}
    .focus-board{
      padding:20px;border-radius:30px;background:linear-gradient(180deg,rgba(11,26,18,.96),rgba(18,53,31,.94));
      color:white;box-shadow:0 25px 65px rgba(11,26,18,.24);position:relative;overflow:hidden;
    }
    .focus-board::before{
      content:"";position:absolute;inset:0;opacity:.16;
      background:
        linear-gradient(90deg,transparent 49.5%,#fff 50%,transparent 50.5%),
        radial-gradient(circle at 50% 50%,transparent 0 66px,#fff 68px,transparent 70px);
    }
    .focus-head{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
    .focus-head h2{font-size:23px;color:white;margin:0}
    .match-list{position:relative;display:grid;gap:12px}
    .match-card{
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      border-radius:20px;padding:15px;transition:.25s ease;
    }
    .match-card:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
    .match-top{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:10px}
    .match-time{font-variant-numeric:tabular-nums;color:#FFE9A6;font-weight:850}
    .status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:850;border-radius:999px;padding:5px 9px}
    .status.live{background:rgba(34,197,94,.18);color:#BEF5C9}
    .status.live::before{content:"";width:7px;height:7px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 4px rgba(34,197,94,.18)}
    .status.pending{background:rgba(251,191,36,.18);color:#FFE7A1}
    .team-row{display:flex;justify-content:space-between;align-items:center;gap:12px;color:white;font-weight:850}
    .vs{color:#9FB9A8;font-size:13px}
    .match-card p{margin-top:8px;color:#C9D8CE;font-size:14px;line-height:1.65}
    .board-note{position:relative;margin-top:14px;color:#AFC2B5;font-size:12px}

    .category-strip{margin-top:-32px;position:relative;z-index:3}
    .strip-card{
      background:#fff;border:1px solid rgba(15,122,59,.10);border-radius:26px;padding:16px;
      box-shadow:var(--shadow);display:grid;grid-template-columns:repeat(6,1fr);gap:10px;
    }
    .strip-card a{
      padding:14px;border-radius:18px;background:var(--surface-2);
      display:flex;flex-direction:column;gap:4px;transition:.22s ease;border:1px solid transparent;
    }
    .strip-card a:hover{background:#fff;border-color:rgba(34,197,94,.35);transform:translateY(-2px)}
    .strip-card strong{font-size:15px;color:var(--green-800)}
    .strip-card span{font-size:12px;color:var(--muted);line-height:1.45}

    .feature-grid{
      display:grid;grid-template-columns:1.25fr .8fr .8fr;grid-auto-rows:minmax(190px,auto);gap:18px;
    }
    .feature-card{position:relative;padding:24px;min-height:210px}
    .feature-card.large{grid-row:span 2;display:flex;flex-direction:column;justify-content:space-between;min-height:438px;background:linear-gradient(135deg,#fff,rgba(230,246,232,.9))}
    .feature-card .icon{
      width:46px;height:46px;border-radius:16px;background:var(--soft-gradient);
      display:grid;place-items:center;color:var(--green-700);font-size:22px;margin-bottom:14px;
    }
    .feature-card h3{margin-bottom:10px}
    .feature-card p{font-size:15px}
    .feature-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
    .feature-visual{height:180px;border-radius:24px;overflow:hidden;margin-top:22px;position:relative}
    .feature-visual img{width:100%;height:100%;object-fit:cover}
    .feature-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,26,18,.45),transparent)}

    .scene-wrap{
      display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start;
    }
    .scene-col{display:grid;gap:18px}
    .scene-card{padding:22px;position:relative}
    .scene-card.tall{min-height:310px}
    .scene-card.compact{min-height:170px}
    .scene-card .corner{
      position:absolute;top:16px;right:16px;background:rgba(251,191,36,.16);color:#935F00;
      border:1px solid rgba(251,191,36,.25);font-size:12px;font-weight:850;border-radius:999px;padding:5px 9px;
    }
    .scene-card h3{margin:24px 0 10px}
    .scene-card p{font-size:15px}
    .scene-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

    .compare-panel{
      background:#fff;border:1px solid rgba(15,122,59,.10);border-radius:30px;box-shadow:var(--shadow);overflow:hidden;
    }
    .compare-grid{display:grid;grid-template-columns:1fr 1fr 1fr}
    .compare-card{padding:28px;border-right:1px solid var(--border);position:relative}
    .compare-card:last-child{border-right:0}
    .compare-card.recommend{background:linear-gradient(180deg,rgba(34,197,94,.10),rgba(255,255,255,.85))}
    .compare-card h3{display:flex;align-items:center;justify-content:space-between;gap:10px}
    .compare-list{list-style:none;margin-top:20px;display:grid;gap:14px}
    .compare-list li{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:start;font-size:14px;color:var(--muted)}
    .compare-list strong{color:var(--green-800);font-weight:850}

    .insight-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:stretch}
    .insight-main{padding:0;display:grid;grid-template-columns:.9fr 1fr;min-height:330px}
    .insight-main .image-wrap{border-radius:24px 0 0 24px}
    .insight-main .content{padding:28px;display:flex;flex-direction:column;justify-content:center}
    .mini-news{display:grid;gap:16px}
    .news-card{display:grid;grid-template-columns:128px 1fr;gap:16px;padding:14px;align-items:center}
    .news-card .image-wrap{height:100px;border-radius:18px}
    .news-card h3{font-size:18px;margin:8px 0 4px}
    .news-card p{font-size:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

    .reviews{
      display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    }
    .review-card{padding:20px;min-height:255px;display:flex;flex-direction:column}
    .review-head{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px}
    .review-user strong{display:block;color:var(--green-800)}
    .review-user span{display:block;color:var(--weak);font-size:12px;line-height:1.5;margin-top:2px}
    .rating{color:#D97706;font-weight:900;font-variant-numeric:tabular-nums}
    .review-card p{font-size:14px;line-height:1.8;margin:8px 0 14px;flex:1}
    .review-foot{display:flex;justify-content:space-between;gap:10px;align-items:center;color:var(--weak);font-size:12px;border-top:1px solid var(--border);padding-top:12px}

    .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .faq-item{
      background:#fff;border:1px solid rgba(15,122,59,.10);border-radius:20px;padding:18px 18px 16px;
      transition:.22s ease;box-shadow:0 10px 28px rgba(16,32,22,.05);
    }
    .faq-item:hover{border-color:rgba(34,197,94,.35);box-shadow:var(--shadow)}
    .faq-q{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
    .faq-num{
      flex:0 0 auto;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
      background:var(--green-100);color:var(--green-700);font-size:12px;font-weight:900;
    }
    .faq-item h3{font-size:17px;letter-spacing:-.02em}
    .faq-item p{font-size:14px;line-height:1.85}

    .cta{
      background:var(--night-gradient);border-radius:34px;padding:34px;position:relative;overflow:hidden;color:white;
      box-shadow:0 26px 70px rgba(11,26,18,.24);
    }
    .cta::before{
      content:"";position:absolute;inset:0;opacity:.16;
      background:url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
    }
    .cta-grid{position:relative;display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:center}
    .cta h2{color:white;margin:12px 0}
    .cta p{color:#C9D8CE}
    .contact-form{
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      border-radius:26px;padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:14px;
    }
    .form-field{display:flex;flex-direction:column;gap:6px}
    .form-field.full{grid-column:1/-1}
    .form-field label{color:#E7F6EA;font-size:13px;font-weight:800}
    .form-field input,.form-field select,.form-field textarea{
      width:100%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.92);
      color:var(--text);border-radius:16px;padding:12px 13px;outline:0;transition:.22s ease;
    }
    .form-field textarea{min-height:96px;resize:vertical}
    .form-field input:focus,.form-field select:focus,.form-field textarea:focus{
      border-color:var(--green-500);box-shadow:0 0 0 4px rgba(34,197,94,.16);
    }
    .form-note{grid-column:1/-1;color:#BFD2C5;font-size:12px;margin-top:-4px}

    .links-panel{
      background:#fff;border:1px solid rgba(15,122,59,.10);border-radius:26px;padding:22px;box-shadow:0 12px 34px rgba(16,32,22,.06);
    }
    .links-grid{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
    .links-grid a{
      padding:9px 13px;border-radius:999px;background:var(--surface-2);color:#35533F;
      font-size:14px;font-weight:750;transition:.22s ease;
    }
    .links-grid a:hover{background:var(--green-700);color:white;transform:translateY(-1px)}

    .site-footer{
      background:#0B1A12;color:#D9E8DD;margin-top:40px;
    }
    .footer-main{padding:54px 0 26px;display:grid;grid-template-columns:1.3fr .9fr .9fr 1fr;gap:28px}
    .footer-logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:22px;margin-bottom:12px;color:white}
    .footer-about p{color:#AFC2B5;font-size:14px;max-width:360px}
    .footer-col h3{color:white;font-size:16px;margin-bottom:14px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:#AFC2B5;font-size:14px;transition:.2s ease}
    .footer-links a:hover{color:#8EF0A8;transform:translateX(2px)}
    .footer-search{
      display:flex;gap:8px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10);
      border-radius:999px;padding:7px;margin-top:14px;
    }
    .footer-search input{min-width:0;flex:1;background:transparent;border:0;color:white;outline:0;padding-left:10px}
    .footer-search input::placeholder{color:#819487}
    .footer-search button{border-radius:999px;padding:8px 12px;background:var(--yellow);color:#183119;font-weight:850}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.10);padding:18px 0 24px;text-align:center;
      color:#91A498;font-size:12px;line-height:1.9;
    }
    .footer-bottom a{color:#AFC2B5;margin:0 6px}
    .footer-bottom a:hover{color:#8EF0A8}

    @media (max-width:1100px){
      .nav-main{grid-template-columns:1fr;gap:12px}
      .quick-links{overflow-x:auto;padding-bottom:2px}
      .hero-grid,.cta-grid,.insight-grid{grid-template-columns:1fr}
      .strip-card{grid-template-columns:repeat(3,1fr)}
      .feature-grid{grid-template-columns:1fr 1fr}
      .feature-card.large{grid-row:auto;grid-column:1/-1;min-height:auto}
      .reviews{grid-template-columns:repeat(2,1fr)}
      .footer-main{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,var(--container))}
      .section{padding:62px 0}
      .section-head{display:block}
      .section-head .text-link{margin-top:12px}
      .hero{padding:42px 0 62px}
      .hero-badges{grid-template-columns:1fr}
      .strip-card,.feature-grid,.scene-wrap,.compare-grid,.faq-grid,.contact-form,.footer-main{grid-template-columns:1fr}
      .compare-card{border-right:0;border-bottom:1px solid var(--border)}
      .compare-card:last-child{border-bottom:0}
      .scene-wrap{gap:18px}
      .insight-main{grid-template-columns:1fr}
      .insight-main .image-wrap{height:220px;border-radius:24px 24px 0 0}
      .reviews{display:flex;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}
      .review-card{min-width:290px;scroll-snap-align:start}
      .quick-links a{font-size:13px}
    }
    @media (max-width:520px){
      .logo-text span{display:none}
      .logo-mark{width:40px;height:40px}
      .search-submit{padding:8px 12px}
      .hero-actions .btn{width:100%}
      .strip-card a{padding:13px}
      .feature-card,.scene-card,.cta{padding:20px}
      .news-card{grid-template-columns:1fr}
      .news-card .image-wrap{height:160px}
      .compare-list li{grid-template-columns:1fr;gap:2px}
      .footer-bottom a{display:inline-block;margin:2px 5px}
    }

/* roulang page: category2 */
:root {
      --green-900:#0B1A12;
      --green-800:#12351F;
      --green-700:#0F7A3B;
      --green-600:#16A34A;
      --green-500:#22C55E;
      --green-100:#DDF7E6;
      --yellow:#FBBF24;
      --orange:#F97316;
      --bg:#F4F8F1;
      --bg-soft:#FAFCF7;
      --card:#FFFFFF;
      --text:#102016;
      --muted:#607066;
      --line:#DCE8D6;
      --line-strong:rgba(15,122,59,.18);
      --shadow:0 18px 45px rgba(16,32,22,.10);
      --shadow-hover:0 24px 60px rgba(16,32,22,.16);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --container:1240px;
      --gradient:linear-gradient(135deg,#0F7A3B 0%,#22C55E 55%,#FBBF24 100%);
      --soft-gradient:linear-gradient(135deg,rgba(34,197,94,.12),rgba(251,191,36,.16));
      --night-gradient:linear-gradient(135deg,#0B1A12 0%,#12351F 72%,#1F4D2B 100%);
      --font:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
    }

    * { box-sizing:border-box; margin:0; padding:0; }
    html { scroll-behavior:smooth; }
    body {
      font-family:var(--font);
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(34,197,94,.16), transparent 30%),
        linear-gradient(180deg,#FAFCF7 0%,#F4F8F1 50%,#EEF6EA 100%);
      line-height:1.75;
      overflow-x:hidden;
    }
    a { color:inherit; text-decoration:none; transition:.2s ease; }
    img { max-width:100%; display:block; }
    input, button, textarea, select { font:inherit; }
    button { cursor:pointer; border:0; }
    ::selection { background:rgba(34,197,94,.22); }

    .container {
      width:min(100% - 48px, var(--container));
      margin-inline:auto;
    }

    .site-header {
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(250,252,247,.96);
      border-bottom:1px solid rgba(15,122,59,.12);
      box-shadow:0 8px 26px rgba(16,32,22,.06);
    }
    .nav-shell { padding:14px 0 12px; }
    .nav-main {
      display:grid;
      grid-template-columns:260px minmax(320px,1fr) auto;
      align-items:center;
      gap:22px;
    }
    .logo {
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .logo:hover { transform:translateY(-1px); }
    .logo:hover .logo-mark { transform:rotate(-4deg) scale(1.04); }
    .logo-mark {
      width:46px;
      height:46px;
      border-radius:17px;
      display:grid;
      place-items:center;
      background:var(--gradient);
      color:white;
      font-weight:900;
      box-shadow:0 12px 24px rgba(15,122,59,.22);
      transition:.25s ease;
      position:relative;
      overflow:hidden;
    }
    .logo-mark::after {
      content:"";
      position:absolute;
      width:28px;
      height:10px;
      border:2px solid rgba(255,255,255,.52);
      border-left:0;
      border-right:0;
      bottom:8px;
      left:9px;
      border-radius:999px;
    }
    .logo-text {
      display:flex;
      flex-direction:column;
      line-height:1.15;
    }
    .logo-text strong { font-size:20px; letter-spacing:.02em; }
    .logo-text span { margin-top:4px; color:var(--muted); font-size:12px; white-space:nowrap; }

    .nav-search form {
      height:50px;
      display:flex;
      align-items:center;
      gap:10px;
      padding:5px 6px 5px 18px;
      border:1px solid rgba(15,122,59,.16);
      border-radius:999px;
      background:#fff;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.65), 0 10px 28px rgba(16,32,22,.06);
      transition:.2s ease;
    }
    .nav-search form:focus-within {
      border-color:rgba(34,197,94,.68);
      box-shadow:0 0 0 4px rgba(34,197,94,.16), 0 12px 30px rgba(16,32,22,.08);
    }
    .search-icon {
      width:24px;
      height:24px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:var(--green-700);
      font-weight:800;
      flex:0 0 auto;
    }
    .nav-search input {
      border:0;
      outline:0;
      width:100%;
      min-width:0;
      color:var(--text);
      background:transparent;
      font-size:14px;
    }
    .nav-search input::placeholder { color:#7E8B80; }
    .search-submit {
      flex:0 0 auto;
      padding:10px 18px;
      border-radius:999px;
      color:#fff;
      background:var(--green-700);
      font-weight:700;
      transition:.2s ease;
    }
    .search-submit:hover {
      background:var(--green-600);
      transform:translateY(-1px);
    }

    .quick-links {
      display:flex;
      align-items:center;
      gap:8px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .quick-links a {
      padding:9px 12px;
      border-radius:999px;
      font-size:13px;
      color:#314238;
      border:1px solid transparent;
    }
    .quick-links a:hover,
    .quick-links a.active {
      color:var(--green-700);
      border-color:rgba(34,197,94,.25);
      background:rgba(34,197,94,.08);
    }

    .category-nav {
      display:flex;
      gap:10px;
      overflow-x:auto;
      padding:14px 0 2px;
      scrollbar-width:none;
    }
    .category-nav::-webkit-scrollbar { display:none; }
    .category-nav a {
      flex:0 0 auto;
      padding:9px 16px;
      border-radius:999px;
      color:#435247;
      background:rgba(255,255,255,.62);
      border:1px solid rgba(15,122,59,.10);
      font-size:14px;
      font-weight:650;
    }
    .category-nav a:hover,
    .category-nav a.active {
      color:#fff;
      background:var(--green-700);
      border-color:var(--green-700);
      box-shadow:0 10px 20px rgba(15,122,59,.18);
    }

    main { overflow:hidden; }
    .section { padding:78px 0; }
    .section.tight { padding:56px 0; }
    .eyebrow {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(34,197,94,.10);
      border:1px solid rgba(34,197,94,.18);
      color:var(--green-700);
      font-size:13px;
      font-weight:800;
    }
    .eyebrow::before {
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--yellow);
      box-shadow:0 0 0 4px rgba(251,191,36,.18);
    }
    h1, h2, h3 { line-height:1.18; letter-spacing:-.02em; }
    h1 { font-size:clamp(34px,5vw,56px); font-weight:900; }
    h2 { font-size:clamp(26px,3vw,38px); font-weight:850; }
    h3 { font-size:20px; font-weight:800; }
    .lead { color:#405246; font-size:18px; line-height:1.85; }
    .muted { color:var(--muted); }
    .num { font-variant-numeric:tabular-nums; }

    .btn {
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:13px 22px;
      border-radius:999px;
      font-weight:800;
      transition:.22s ease;
      white-space:nowrap;
    }
    .btn-primary {
      color:#fff;
      background:var(--gradient);
      box-shadow:0 14px 28px rgba(15,122,59,.22);
    }
    .btn-primary:hover {
      transform:translateY(-2px);
      box-shadow:0 18px 36px rgba(15,122,59,.30);
      filter:saturate(1.08);
    }
    .btn-ghost {
      color:var(--green-800);
      background:#fff;
      border:1px solid rgba(15,122,59,.18);
    }
    .btn-ghost:hover {
      color:var(--green-700);
      border-color:rgba(34,197,94,.38);
      transform:translateY(-2px);
      box-shadow:0 14px 28px rgba(16,32,22,.08);
    }
    .btn-yellow {
      color:#1D2B18;
      background:var(--yellow);
      box-shadow:0 14px 28px rgba(251,191,36,.22);
    }
    .btn-yellow:hover { transform:translateY(-2px); background:#FFD45A; }

    .breadcrumb {
      padding:24px 0 0;
      font-size:13px;
      color:var(--muted);
    }
    .breadcrumb a { color:var(--green-700); font-weight:700; }
    .breadcrumb span { margin:0 7px; color:#97A397; }

    .page-hero {
      position:relative;
      padding:46px 0 76px;
      isolation:isolate;
    }
    .page-hero::before {
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(250,252,247,.96) 0%,rgba(250,252,247,.86) 48%,rgba(250,252,247,.55) 100%),
        url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      z-index:-2;
    }
    .page-hero::after {
      content:"";
      position:absolute;
      inset:auto -80px -70px auto;
      width:420px;
      height:420px;
      border-radius:50%;
      background:radial-gradient(circle,rgba(251,191,36,.28),transparent 66%);
      z-index:-1;
    }
    .hero-grid {
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
      gap:36px;
      align-items:center;
    }
    .hero-copy { display:flex; flex-direction:column; gap:22px; }
    .hero-actions { display:flex; gap:12px; flex-wrap:wrap; }
    .hero-note {
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:14px 16px;
      border-radius:var(--radius-md);
      background:rgba(255,255,255,.80);
      border:1px solid rgba(15,122,59,.12);
      color:#53645A;
      font-size:14px;
      max-width:760px;
    }
    .hero-note strong { color:var(--green-700); }

    .score-panel {
      border-radius:var(--radius-xl);
      background:linear-gradient(180deg,#102016,#0B1A12);
      color:#fff;
      padding:22px;
      box-shadow:0 26px 70px rgba(16,32,22,.28);
      position:relative;
      overflow:hidden;
    }
    .score-panel::before {
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.04) 1px,transparent 1px);
      background-size:42px 42px;
      opacity:.45;
    }
    .score-panel > * { position:relative; }
    .panel-top {
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      margin-bottom:18px;
    }
    .panel-top p { color:rgba(255,255,255,.72); font-size:13px; margin-top:4px; }
    .live-pill {
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(34,197,94,.18);
      color:#A7F3D0;
      font-size:12px;
      font-weight:800;
      border:1px solid rgba(34,197,94,.28);
      white-space:nowrap;
    }
    .live-pill::before {
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:#22C55E;
      box-shadow:0 0 0 5px rgba(34,197,94,.20);
    }
    .mini-score {
      display:grid;
      gap:12px;
    }
    .mini-match {
      padding:16px;
      border-radius:20px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.10);
    }
    .mini-match-head {
      display:flex;
      justify-content:space-between;
      gap:12px;
      color:rgba(255,255,255,.72);
      font-size:12px;
      margin-bottom:12px;
    }
    .teams {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
    }
    .team {
      font-weight:800;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .team:last-child { text-align:right; }
    .score-num {
      display:flex;
      align-items:center;
      gap:7px;
      font-size:28px;
      line-height:1;
      font-weight:950;
      color:var(--yellow);
      font-variant-numeric:tabular-nums;
    }
    .mini-desc {
      margin-top:12px;
      color:rgba(255,255,255,.72);
      font-size:13px;
    }

    .status-strip {
      margin-top:-44px;
      position:relative;
      z-index:5;
    }
    .status-grid {
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .status-card {
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      border-radius:22px;
      padding:20px;
      box-shadow:var(--shadow);
      transition:.22s ease;
      position:relative;
      overflow:hidden;
    }
    .status-card::after {
      content:"";
      position:absolute;
      inset:auto 18px 0 auto;
      width:72px;
      height:72px;
      border-radius:50%;
      background:var(--soft-gradient);
      transform:translateY(35%);
    }
    .status-card:hover {
      transform:translateY(-3px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(34,197,94,.35);
    }
    .status-card span {
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .status-card strong {
      display:block;
      margin-top:8px;
      font-size:34px;
      line-height:1;
      color:var(--green-700);
      font-variant-numeric:tabular-nums;
    }
    .status-card em {
      display:inline-flex;
      margin-top:12px;
      font-style:normal;
      color:#815413;
      background:rgba(251,191,36,.20);
      border-radius:999px;
      padding:4px 9px;
      font-size:12px;
      font-weight:800;
    }

    .section-head {
      display:flex;
      justify-content:space-between;
      align-items:end;
      gap:24px;
      margin-bottom:28px;
    }
    .section-head .intro { max-width:700px; }
    .section-head p { margin-top:12px; color:var(--muted); }

    .filter-row {
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-bottom:24px;
    }
    .filter {
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:9px 14px;
      border-radius:999px;
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      color:#45564B;
      font-size:14px;
      font-weight:750;
    }
    .filter.active,
    .filter:hover {
      color:#fff;
      background:var(--green-700);
      border-color:var(--green-700);
      transform:translateY(-1px);
    }

    .score-layout {
      display:grid;
      grid-template-columns:minmax(0,1fr) 330px;
      gap:24px;
      align-items:start;
    }
    .match-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }
    .match-card {
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      border-radius:24px;
      box-shadow:0 14px 34px rgba(16,32,22,.07);
      padding:18px;
      transition:.22s ease;
      position:relative;
      overflow:hidden;
    }
    .match-card:hover {
      transform:translateY(-4px);
      border-color:rgba(34,197,94,.36);
      box-shadow:var(--shadow-hover);
    }
    .match-card.featured {
      grid-column:span 2;
      display:grid;
      grid-template-columns:1.2fr .8fr;
      gap:18px;
      padding:0;
      overflow:hidden;
    }
    .match-media {
      min-height:260px;
      position:relative;
      background:url("/assets/images/coverpic/cover-2.webp") center/cover no-repeat;
    }
    .match-media::after {
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(11,26,18,.08),rgba(11,26,18,.68));
    }
    .match-media span {
      position:absolute;
      left:18px;
      bottom:18px;
      z-index:2;
      color:#fff;
      font-weight:850;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(249,115,22,.86);
    }
    .featured-body { padding:22px 20px 20px 0; }
    .match-top {
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:center;
      margin-bottom:16px;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
    }
    .tag {
      display:inline-flex;
      align-items:center;
      gap:7px;
      padding:6px 10px;
      border-radius:999px;
      font-size:12px;
      font-weight:850;
      white-space:nowrap;
    }
    .tag.live { background:rgba(34,197,94,.12); color:var(--green-700); }
    .tag.live::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--green-500); }
    .tag.wait { background:rgba(251,191,36,.22); color:#8A5A10; }
    .tag.done { background:rgba(96,112,102,.12); color:#607066; }
    .tag.hot { background:rgba(249,115,22,.13); color:#C34B0E; }

    .match-scoreline {
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:12px;
      margin-bottom:14px;
    }
    .club {
      min-width:0;
      display:flex;
      align-items:center;
      gap:10px;
      font-weight:850;
    }
    .club.away { justify-content:flex-end; text-align:right; }
    .club-mark {
      flex:0 0 auto;
      width:34px;
      height:34px;
      border-radius:14px;
      display:grid;
      place-items:center;
      color:#fff;
      background:var(--gradient);
      font-size:13px;
      font-weight:900;
      box-shadow:0 8px 18px rgba(15,122,59,.18);
    }
    .score-box {
      min-width:88px;
      display:flex;
      justify-content:center;
      align-items:center;
      gap:8px;
      border-radius:18px;
      padding:10px 12px;
      background:#102016;
      color:var(--yellow);
      font-size:28px;
      line-height:1;
      font-weight:950;
      font-variant-numeric:tabular-nums;
    }
    .match-desc {
      color:var(--muted);
      font-size:14px;
      margin-bottom:14px;
    }
    .event-row {
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      padding-top:14px;
      border-top:1px solid rgba(15,122,59,.10);
    }
    .event {
      padding:6px 9px;
      border-radius:10px;
      background:rgba(34,197,94,.08);
      color:#405246;
      font-size:12px;
      font-weight:750;
    }
    .event.orange { background:rgba(249,115,22,.12); color:#B9470F; }
    .event.gray { background:rgba(96,112,102,.10); color:#607066; }

    .side-stack { display:grid; gap:18px; }
    .side-card {
      padding:22px;
      border-radius:24px;
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      box-shadow:0 14px 34px rgba(16,32,22,.07);
    }
    .side-card h3 { margin-bottom:12px; }
    .side-list {
      display:grid;
      gap:12px;
      list-style:none;
      margin-top:14px;
    }
    .side-list li {
      display:flex;
      justify-content:space-between;
      gap:12px;
      padding:12px;
      border-radius:16px;
      background:rgba(244,248,241,.75);
      border:1px solid rgba(15,122,59,.08);
    }
    .side-list b { font-size:14px; }
    .side-list span { color:var(--muted); font-size:13px; white-space:nowrap; }

    .reading-zone {
      background:linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.45));
      border-top:1px solid rgba(15,122,59,.10);
      border-bottom:1px solid rgba(15,122,59,.10);
    }
    .guide-grid {
      display:grid;
      grid-template-columns:1fr 1fr 1fr;
      gap:18px;
    }
    .guide-card {
      padding:24px;
      border-radius:24px;
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      box-shadow:0 12px 30px rgba(16,32,22,.06);
      transition:.22s ease;
    }
    .guide-card:hover {
      transform:translateY(-3px);
      border-color:rgba(34,197,94,.35);
      box-shadow:var(--shadow);
    }
    .guide-icon {
      width:48px;
      height:48px;
      border-radius:18px;
      display:grid;
      place-items:center;
      background:var(--soft-gradient);
      color:var(--green-700);
      font-weight:950;
      margin-bottom:16px;
      font-size:20px;
    }
    .guide-card p { margin-top:10px; color:var(--muted); font-size:15px; }

    .compare-card {
      display:grid;
      grid-template-columns:.9fr 1.1fr;
      gap:28px;
      align-items:center;
      padding:30px;
      border-radius:var(--radius-xl);
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .compare-image {
      border-radius:24px;
      overflow:hidden;
      min-height:360px;
      position:relative;
    }
    .compare-image img {
      width:100%;
      height:100%;
      object-fit:cover;
      min-height:360px;
      transition:.35s ease;
    }
    .compare-card:hover .compare-image img { transform:scale(1.04); }
    .compare-list {
      display:grid;
      gap:14px;
      list-style:none;
      margin-top:22px;
    }
    .compare-list li {
      display:grid;
      grid-template-columns:36px 1fr;
      gap:12px;
      align-items:start;
      padding:14px;
      border-radius:18px;
      background:rgba(244,248,241,.72);
      border:1px solid rgba(15,122,59,.08);
    }
    .check {
      width:32px;
      height:32px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:var(--green-700);
      color:#fff;
      font-weight:900;
    }
    .compare-list strong { display:block; line-height:1.25; }
    .compare-list p { color:var(--muted); font-size:14px; margin-top:4px; }

    .faq-grid {
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:18px;
    }
    details.faq-item {
      background:#fff;
      border:1px solid rgba(15,122,59,.12);
      border-radius:22px;
      padding:18px 20px;
      box-shadow:0 10px 24px rgba(16,32,22,.05);
      transition:.22s ease;
    }
    details.faq-item[open] {
      border-color:rgba(34,197,94,.38);
      box-shadow:0 16px 34px rgba(16,32,22,.09);
    }
    .faq-item summary {
      cursor:pointer;
      list-style:none;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:center;
      font-weight:850;
      line-height:1.45;
    }
    .faq-item summary::-webkit-details-marker { display:none; }
    .faq-item summary::after {
      content:"+";
      width:28px;
      height:28px;
      border-radius:50%;
      display:grid;
      place-items:center;
      color:var(--green-700);
      background:rgba(34,197,94,.10);
      flex:0 0 auto;
      font-weight:900;
    }
    .faq-item[open] summary::after { content:"−"; background:var(--green-700); color:#fff; }
    .faq-item p {
      margin-top:14px;
      color:var(--muted);
      font-size:15px;
      line-height:1.85;
    }

    .contact-cta {
      padding:0 0 82px;
    }
    .cta-box {
      display:grid;
      grid-template-columns:minmax(0,.95fr) minmax(340px,.7fr);
      gap:32px;
      padding:34px;
      border-radius:32px;
      color:#fff;
      background:
        linear-gradient(135deg,rgba(11,26,18,.92),rgba(18,53,31,.94)),
        url("/assets/images/backpic/back-3.webp") center/cover no-repeat;
      box-shadow:0 30px 80px rgba(11,26,18,.26);
      overflow:hidden;
      position:relative;
    }
    .cta-box::after {
      content:"";
      position:absolute;
      right:-90px;
      bottom:-120px;
      width:310px;
      height:310px;
      border-radius:50%;
      background:rgba(251,191,36,.18);
    }
    .cta-box > * { position:relative; z-index:1; }
    .cta-copy p { color:rgba(255,255,255,.74); margin-top:14px; max-width:680px; }
    .cta-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:24px; }
    .contact-form {
      display:grid;
      gap:12px;
      padding:20px;
      border-radius:24px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.16);
    }
    .contact-form label {
      display:grid;
      gap:6px;
      font-size:13px;
      color:rgba(255,255,255,.78);
      font-weight:750;
    }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      width:100%;
      border:1px solid rgba(255,255,255,.18);
      border-radius:14px;
      background:rgba(255,255,255,.92);
      color:var(--text);
      outline:0;
      padding:11px 12px;
      transition:.2s ease;
    }
    .contact-form textarea { min-height:86px; resize:vertical; }
    .contact-form input:focus,
    .contact-form textarea:focus,
    .contact-form select:focus {
      border-color:var(--green-500);
      box-shadow:0 0 0 4px rgba(34,197,94,.20);
    }
    .form-note { color:rgba(255,255,255,.68); font-size:12px; line-height:1.6; }

    .site-footer {
      background:#0B1A12;
      color:rgba(255,255,255,.82);
      padding-top:54px;
    }
    .footer-main {
      display:grid;
      grid-template-columns:1.4fr .7fr .7fr .8fr;
      gap:34px;
      padding-bottom:38px;
    }
    .footer-logo {
      display:flex;
      align-items:center;
      gap:12px;
      font-size:20px;
      font-weight:900;
      color:#fff;
      margin-bottom:14px;
    }
    .footer-about p {
      color:rgba(255,255,255,.66);
      max-width:420px;
      font-size:14px;
    }
    .footer-search {
      margin-top:18px;
      display:flex;
      gap:8px;
      padding:6px;
      border-radius:999px;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      max-width:390px;
    }
    .footer-search input {
      min-width:0;
      width:100%;
      border:0;
      outline:0;
      background:transparent;
      color:#fff;
      padding:8px 12px;
    }
    .footer-search input::placeholder { color:rgba(255,255,255,.52); }
    .footer-search button {
      border-radius:999px;
      background:var(--yellow);
      color:#192618;
      font-weight:850;
      padding:8px 15px;
    }
    .footer-col h3 {
      font-size:16px;
      margin-bottom:14px;
      color:#fff;
    }
    .footer-links {
      display:grid;
      gap:9px;
    }
    .footer-links a {
      color:rgba(255,255,255,.66);
      font-size:14px;
    }
    .footer-links a:hover {
      color:#A7F3D0;
      transform:translateX(3px);
    }
    .footer-bottom {
      border-top:1px solid rgba(255,255,255,.10);
      padding:18px 0 24px;
      display:grid;
      gap:7px;
      text-align:center;
      color:rgba(255,255,255,.56);
      font-size:12.5px;
    }
    .footer-bottom a { color:rgba(217,249,157,.76); }
    .footer-bottom a:hover { color:#fff; }

    @media (max-width:1100px) {
      .nav-main { grid-template-columns:1fr; gap:12px; }
      .quick-links { justify-content:flex-start; }
      .hero-grid, .score-layout, .compare-card, .cta-box { grid-template-columns:1fr; }
      .status-grid { grid-template-columns:repeat(2,1fr); }
      .featured-body { padding:22px; }
      .match-card.featured { grid-template-columns:1fr; }
      .footer-main { grid-template-columns:1fr 1fr; }
    }
    @media (max-width:768px) {
      .container { width:min(100% - 32px, var(--container)); }
      .section { padding:58px 0; }
      .page-hero { padding:34px 0 66px; }
      .logo-text span { white-space:normal; }
      .nav-search form { height:auto; border-radius:22px; align-items:stretch; }
      .search-submit { padding:9px 14px; }
      .quick-links { overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
      .quick-links::-webkit-scrollbar { display:none; }
      .section-head { display:grid; gap:14px; }
      .status-grid, .match-grid, .guide-grid, .faq-grid { grid-template-columns:1fr; }
      .match-card.featured { grid-column:auto; }
      .match-scoreline { grid-template-columns:1fr; text-align:center; }
      .club, .club.away { justify-content:center; text-align:center; }
      .score-box { margin:auto; }
      .compare-image, .compare-image img { min-height:250px; }
      .footer-main { grid-template-columns:1fr; }
    }
    @media (max-width:520px) {
      .container { width:min(100% - 24px, var(--container)); }
      .hero-actions .btn, .cta-actions .btn { width:100%; }
      .status-strip { margin-top:-30px; }
      .status-card strong { font-size:29px; }
      .teams { grid-template-columns:1fr; text-align:center; }
      .team:last-child { text-align:center; }
      .score-num { justify-content:center; }
      .cta-box { padding:24px 18px; border-radius:24px; }
      .score-panel { padding:18px; border-radius:24px; }
      .category-nav a { padding:8px 13px; font-size:13px; }
    }

/* roulang page: category1 */
:root{
      --green-900:#0B1A12;
      --green-800:#102016;
      --green-700:#12351F;
      --green-600:#0F7A3B;
      --green-500:#16A34A;
      --green-400:#22C55E;
      --yellow:#FBBF24;
      --orange:#F97316;
      --bg:#F4F8F1;
      --bg-soft:#FAFCF7;
      --bg-card:#FFFFFF;
      --text:#102016;
      --muted:#66756A;
      --muted-2:#879484;
      --border:#DCE8D6;
      --border-strong:rgba(15,122,59,.18);
      --shadow:0 18px 45px rgba(16,32,22,.10);
      --shadow-hover:0 22px 58px rgba(16,32,22,.16);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-sm:12px;
      --container:1240px;
      --gradient:linear-gradient(135deg,#0F7A3B 0%,#22C55E 55%,#FBBF24 100%);
      --soft-gradient:linear-gradient(135deg,rgba(34,197,94,.12),rgba(251,191,36,.16));
      --night-gradient:linear-gradient(135deg,#0B1A12 0%,#12351F 68%,#1f5e31 100%);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 6%,rgba(34,197,94,.12),transparent 28%),
        radial-gradient(circle at 88% 10%,rgba(251,191,36,.16),transparent 28%),
        var(--bg);
      line-height:1.75;
      font-size:16px;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,transform .2s ease,border-color .2s ease}
    img{display:block;max-width:100%;height:auto}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    input,select,textarea{outline:none}
    :focus-visible{outline:3px solid rgba(34,197,94,.34);outline-offset:3px}
    .container{width:min(100% - 48px,var(--container));margin:0 auto}
    .section{padding:78px 0}
    .section-tight{padding:56px 0}
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      padding:7px 12px;border-radius:999px;
      background:rgba(34,197,94,.11);
      border:1px solid rgba(15,122,59,.14);
      color:var(--green-600);
      font-weight:750;font-size:13px;
    }
    .eyebrow:before{
      content:"";width:8px;height:8px;border-radius:50%;
      background:var(--gradient);
      box-shadow:0 0 0 4px rgba(34,197,94,.13);
    }
    h1,h2,h3{letter-spacing:-.03em;line-height:1.18}
    h1{font-size:clamp(32px,5vw,54px);font-weight:850}
    h2{font-size:clamp(25px,3.2vw,38px);font-weight:820}
    h3{font-size:clamp(18px,2vw,23px);font-weight:760}
    p{color:var(--muted)}
    .lead{font-size:18px;color:#435146;line-height:1.9}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;
      padding:13px 19px;border-radius:999px;font-weight:780;
      border:1px solid transparent;transition:transform .22s ease,box-shadow .22s ease,filter .22s ease,border-color .22s ease;
      white-space:nowrap;
    }
    .btn-primary{background:var(--gradient);color:#fff;box-shadow:0 14px 28px rgba(15,122,59,.25)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 38px rgba(15,122,59,.32);filter:saturate(1.08)}
    .btn-ghost{background:#fff;color:var(--green-600);border-color:rgba(15,122,59,.16)}
    .btn-ghost:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.4);box-shadow:var(--shadow)}
    .btn-yellow{background:var(--yellow);color:#162016;box-shadow:0 14px 28px rgba(251,191,36,.22)}
    .btn-yellow:hover{transform:translateY(-2px);filter:brightness(1.03);box-shadow:0 19px 36px rgba(251,191,36,.32)}
    .badge,.tag{
      display:inline-flex;align-items:center;gap:6px;
      border-radius:999px;padding:6px 10px;
      font-size:12px;font-weight:760;
      border:1px solid rgba(15,122,59,.13);
      background:#fff;color:var(--green-600);
      line-height:1;
    }
    .tag.hot{background:rgba(249,115,22,.11);border-color:rgba(249,115,22,.22);color:#B64A09}
    .tag.pending{background:rgba(251,191,36,.16);border-color:rgba(251,191,36,.28);color:#8A5A00}
    .tag.done{background:rgba(102,117,106,.10);border-color:rgba(102,117,106,.18);color:#5C685F}
    .tag.live{background:rgba(34,197,94,.13);border-color:rgba(34,197,94,.28);color:var(--green-600)}
    .status-dot{width:8px;height:8px;border-radius:50%;background:var(--green-400);box-shadow:0 0 0 4px rgba(34,197,94,.14)}

    .site-header{
      position:sticky;top:0;z-index:50;
      background:rgba(250,252,247,.94);
      border-bottom:1px solid rgba(15,122,59,.12);
      box-shadow:0 10px 30px rgba(16,32,22,.06);
      backdrop-filter:saturate(130%) blur(8px);
    }
    .nav-shell{padding:14px 0 12px}
    .nav-main{display:grid;grid-template-columns:260px minmax(320px,1fr) auto;gap:20px;align-items:center}
    .logo{display:flex;align-items:center;gap:12px;min-width:0}
    .logo:hover{transform:translateY(-1px)}
    .logo:hover .logo-mark{transform:rotate(-4deg) scale(1.04)}
    .logo-mark{
      width:46px;height:46px;border-radius:16px;
      display:inline-flex;align-items:center;justify-content:center;
      color:#fff;font-size:22px;font-weight:900;
      background:
        linear-gradient(135deg,rgba(255,255,255,.18),transparent),
        var(--gradient);
      box-shadow:0 12px 28px rgba(15,122,59,.26);
      position:relative;
      transition:transform .25s ease;
      flex:0 0 auto;
    }
    .logo-mark:after{
      content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.5);border-radius:50%;
    }
    .logo-text{display:flex;flex-direction:column;line-height:1.2}
    .logo-text strong{font-size:20px;letter-spacing:-.02em}
    .logo-text span{font-size:12px;color:var(--muted)}
    .nav-search form{
      display:flex;align-items:center;gap:8px;
      min-height:48px;border-radius:999px;padding:5px 5px 5px 17px;
      background:#fff;border:1px solid var(--border);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 8px 22px rgba(16,32,22,.05);
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .nav-search form:focus-within{
      border-color:rgba(34,197,94,.48);
      box-shadow:0 0 0 4px rgba(34,197,94,.16),0 10px 24px rgba(16,32,22,.07);
    }
    .search-icon{color:var(--green-600);font-size:24px;line-height:1}
    .nav-search input{
      flex:1;min-width:80px;border:0;background:transparent;color:var(--text);
      font-size:14px;
    }
    .nav-search input::placeholder{color:#91A08E}
    .search-submit{
      border-radius:999px;background:var(--green-600);color:#fff;
      padding:9px 15px;font-weight:760;font-size:14px;
      transition:background .2s ease,transform .2s ease;
    }
    .search-submit:hover{background:var(--green-500);transform:translateY(-1px)}
    .quick-links{display:flex;align-items:center;gap:10px;white-space:nowrap}
    .quick-links a{
      font-size:14px;font-weight:730;color:#425145;
      padding:9px 10px;border-radius:999px;
    }
    .quick-links a:hover,.quick-links a.active{background:rgba(34,197,94,.11);color:var(--green-600)}
    .category-nav{
      display:flex;align-items:center;gap:10px;margin-top:14px;
      overflow-x:auto;scrollbar-width:none;padding-bottom:2px;
    }
    .category-nav::-webkit-scrollbar{display:none}
    .category-nav a{
      flex:0 0 auto;
      border:1px solid rgba(15,122,59,.12);
      background:rgba(255,255,255,.72);
      color:#4D5E51;
      border-radius:999px;
      padding:8px 14px;
      font-size:14px;font-weight:760;
    }
    .category-nav a:hover{border-color:rgba(34,197,94,.35);color:var(--green-600);transform:translateY(-1px)}
    .category-nav a.active{
      color:#fff;border-color:transparent;background:var(--gradient);
      box-shadow:0 10px 20px rgba(15,122,59,.18);
    }

    .breadcrumb{
      padding:24px 0 0;
      font-size:14px;color:var(--muted);
    }
    .breadcrumb a{color:var(--green-600);font-weight:720}
    .breadcrumb span{margin:0 8px;color:#9AA89A}

    .hero{
      padding:34px 0 70px;
      position:relative;
    }
    .hero-card{
      border-radius:var(--radius-xl);
      overflow:hidden;
      position:relative;
      min-height:520px;
      background:
        linear-gradient(90deg,rgba(244,248,241,.97) 0%,rgba(244,248,241,.92) 46%,rgba(244,248,241,.72) 100%),
        url("/assets/images/backpic/back-1.webp") center/cover no-repeat;
      border:1px solid rgba(15,122,59,.13);
      box-shadow:var(--shadow);
    }
    .hero-card:before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(34,197,94,.10) 1px,transparent 1px),
        linear-gradient(0deg,rgba(34,197,94,.08) 1px,transparent 1px);
      background-size:58px 58px;
      mask-image:linear-gradient(90deg,rgba(0,0,0,.55),transparent 72%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;z-index:1;
      display:grid;grid-template-columns:1.03fr .97fr;gap:32px;
      padding:48px;
      align-items:center;
    }
    .hero-copy{max-width:620px}
    .hero-copy h1{margin-top:18px;margin-bottom:18px;color:var(--green-900)}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
    .hero-stats{
      display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:34px;
    }
    .stat-card{
      background:rgba(255,255,255,.86);
      border:1px solid rgba(15,122,59,.12);
      border-radius:18px;
      padding:15px 14px;
      box-shadow:0 10px 22px rgba(16,32,22,.06);
    }
    .stat-card strong{
      display:block;color:var(--orange);font-size:23px;line-height:1.1;
      font-variant-numeric:tabular-nums;
    }
    .stat-card span{font-size:13px;color:var(--muted);font-weight:680}

    .date-panel{
      background:rgba(11,26,18,.92);
      color:#fff;
      border-radius:26px;
      padding:24px;
      box-shadow:0 24px 55px rgba(11,26,18,.25);
      border:1px solid rgba(255,255,255,.14);
    }
    .date-panel h2{font-size:24px;color:#fff;margin-bottom:8px}
    .date-panel p{color:rgba(255,255,255,.72)}
    .date-picker{
      display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:22px 0;
    }
    .date-chip{
      border-radius:16px;padding:12px 8px;text-align:center;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      transition:transform .2s ease,background .2s ease,border-color .2s ease;
    }
    .date-chip:hover{transform:translateY(-2px);border-color:rgba(251,191,36,.45)}
    .date-chip.active{background:var(--yellow);color:#142016;border-color:transparent}
    .date-chip b{display:block;font-size:18px;line-height:1;font-variant-numeric:tabular-nums}
    .date-chip span{font-size:12px;font-weight:750;opacity:.82}
    .panel-search{
      display:flex;gap:8px;background:#fff;border-radius:18px;padding:8px;
      margin-top:16px;
    }
    .panel-search input{flex:1;border:0;background:transparent;padding:8px;color:var(--text);min-width:0}
    .panel-search button{border-radius:14px;background:var(--green-500);color:#fff;padding:8px 13px;font-weight:780}
    .notice-box{
      margin-top:16px;padding:13px 14px;border-radius:18px;
      background:rgba(34,197,94,.12);
      border:1px solid rgba(34,197,94,.22);
      color:rgba(255,255,255,.82);
      font-size:13px;
    }

    .filter-wrap{
      margin-top:-34px;
      position:relative;
      z-index:5;
    }
    .filter-card{
      background:#fff;border:1px solid rgba(15,122,59,.12);
      border-radius:24px;padding:18px;
      box-shadow:var(--shadow);
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;
    }
    .filter-label{font-weight:820;color:var(--green-800);margin-right:4px}
    .filter-card a{
      display:inline-flex;align-items:center;gap:7px;
      padding:9px 13px;border-radius:999px;
      background:var(--bg-soft);
      border:1px solid var(--border);
      color:#4E5D51;font-weight:730;font-size:14px;
    }
    .filter-card a:hover,.filter-card a.active{
      color:#fff;background:var(--green-600);border-color:var(--green-600);
      transform:translateY(-1px);
    }

    .intro-grid{
      display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;
    }
    .info-card{
      background:#fff;border:1px solid rgba(15,122,59,.11);
      border-radius:24px;padding:24px;
      box-shadow:0 12px 32px rgba(16,32,22,.07);
      position:relative;overflow:hidden;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .info-card:after{
      content:"";position:absolute;right:-36px;top:-36px;width:100px;height:100px;
      border-radius:50%;background:rgba(34,197,94,.09);
    }
    .info-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover);border-color:rgba(34,197,94,.35)}
    .info-icon{
      width:44px;height:44px;border-radius:16px;
      display:flex;align-items:center;justify-content:center;
      background:var(--soft-gradient);color:var(--green-600);
      font-size:22px;font-weight:900;margin-bottom:16px;
    }
    .info-card h3{margin-bottom:8px}
    .info-card p{font-size:14px}

    .schedule-layout{
      display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start;
    }
    .section-head{
      display:flex;justify-content:space-between;gap:18px;align-items:end;margin-bottom:28px;
    }
    .section-head .text{max-width:720px}
    .section-head h2{margin-top:12px;margin-bottom:10px}
    .legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
    .timeline{
      display:flex;flex-direction:column;gap:24px;
    }
    .time-group{
      background:rgba(255,255,255,.72);
      border:1px solid rgba(15,122,59,.10);
      border-radius:26px;
      padding:18px;
      box-shadow:0 12px 32px rgba(16,32,22,.06);
    }
    .group-title{
      display:flex;align-items:center;justify-content:space-between;gap:16px;
      padding:6px 4px 16px;
      border-bottom:1px dashed rgba(15,122,59,.16);
      margin-bottom:12px;
    }
    .group-title h3{display:flex;align-items:center;gap:10px}
    .group-title h3:before{
      content:"";width:11px;height:11px;border-radius:50%;background:var(--yellow);
      box-shadow:0 0 0 5px rgba(251,191,36,.16);
    }
    .match-list{display:flex;flex-direction:column;gap:12px}
    .match-card{
      display:grid;grid-template-columns:88px 1fr auto;gap:16px;align-items:center;
      background:#fff;border:1px solid rgba(15,122,59,.11);
      border-radius:20px;padding:17px;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
      position:relative;overflow:hidden;
    }
    .match-card:before{
      content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;border-radius:999px;
      background:var(--gradient);
      opacity:.7;
    }
    .match-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(34,197,94,.35)}
    .match-time{
      padding-left:8px;
      font-variant-numeric:tabular-nums;
    }
    .match-time strong{display:block;font-size:22px;line-height:1.1;color:var(--green-700)}
    .match-time span{font-size:12px;color:var(--muted);font-weight:720}
    .match-main{min-width:0}
    .league-line{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:8px}
    .league-name{font-size:13px;color:var(--muted);font-weight:760}
    .teams{
      display:flex;align-items:center;gap:10px;flex-wrap:wrap;
      font-size:18px;font-weight:830;color:var(--green-900);
    }
    .team-dot{
      width:30px;height:30px;border-radius:50%;
      background:linear-gradient(135deg,#fff,#EAF6E7);
      border:1px solid var(--border);
      display:inline-flex;align-items:center;justify-content:center;
      color:var(--green-600);font-weight:900;font-size:13px;
    }
    .versus{font-size:12px;color:var(--orange);font-weight:900;letter-spacing:.08em}
    .match-note{margin-top:8px;font-size:14px;color:var(--muted);line-height:1.6}
    .match-action{
      display:flex;flex-direction:column;align-items:flex-end;gap:9px;
      min-width:136px;
    }
    .mini-link{
      color:var(--green-600);font-weight:820;font-size:14px;
      display:inline-flex;align-items:center;gap:5px;
    }
    .mini-link:hover{color:var(--orange);transform:translateX(2px)}

    .sidebar{position:sticky;top:142px;display:flex;flex-direction:column;gap:18px}
    .side-card{
      background:#fff;border:1px solid rgba(15,122,59,.12);
      border-radius:24px;padding:22px;
      box-shadow:0 12px 34px rgba(16,32,22,.07);
      overflow:hidden;position:relative;
    }
    .side-card.image{
      padding:0;
      min-height:250px;
      background:#102016;
    }
    .side-card.image img{width:100%;height:180px;object-fit:cover;filter:saturate(1.06)}
    .side-card.image .image-body{padding:18px 20px 20px}
    .side-card.image h3{color:var(--green-900)}
    .side-card h3{margin-bottom:13px}
    .league-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
    .league-shortcuts a{
      padding:10px 11px;border-radius:14px;
      background:var(--bg-soft);border:1px solid var(--border);
      color:#4B5D50;font-weight:760;font-size:14px;
    }
    .league-shortcuts a:hover{background:rgba(34,197,94,.11);border-color:rgba(34,197,94,.35);color:var(--green-600)}
    .tips{list-style:none;display:flex;flex-direction:column;gap:12px}
    .tips li{
      display:flex;gap:10px;align-items:flex-start;
      color:var(--muted);font-size:14px;line-height:1.65;
    }
    .tips li:before{
      content:"";width:9px;height:9px;margin-top:8px;border-radius:50%;
      background:var(--green-400);box-shadow:0 0 0 4px rgba(34,197,94,.12);
      flex:0 0 auto;
    }
    .small-note{
      margin-top:12px;padding:12px;border-radius:16px;
      background:rgba(251,191,36,.13);border:1px solid rgba(251,191,36,.25);
      color:#75500A;font-size:13px;line-height:1.65;
    }

    .process{
      background:#fff;border-top:1px solid rgba(15,122,59,.10);border-bottom:1px solid rgba(15,122,59,.10);
    }
    .process-grid{
      display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
    }
    .step-card{
      border-radius:24px;padding:24px;
      background:linear-gradient(180deg,#fff,var(--bg-soft));
      border:1px solid rgba(15,122,59,.11);
      min-height:220px;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .step-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:rgba(34,197,94,.35)}
    .step-num{
      display:inline-flex;align-items:center;justify-content:center;
      width:42px;height:42px;border-radius:16px;
      background:var(--green-600);color:#fff;font-weight:900;
      font-variant-numeric:tabular-nums;
      margin-bottom:18px;
    }
    .step-card h3{margin-bottom:10px}
    .step-card p{font-size:14px}

    .feature-split{
      display:grid;grid-template-columns:.9fr 1.1fr;gap:24px;align-items:stretch;
    }
    .feature-cover{
      position:relative;border-radius:28px;overflow:hidden;
      min-height:420px;box-shadow:var(--shadow);
      background:#102016;
    }
    .feature-cover img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;opacity:.88}
    .feature-cover:after{
      content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(11,26,18,.88));
    }
    .cover-caption{
      position:absolute;left:24px;right:24px;bottom:24px;z-index:1;
      color:#fff;
    }
    .cover-caption p{color:rgba(255,255,255,.78);margin-top:8px}
    .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:16px}
    .feature-item{
      background:#fff;border:1px solid rgba(15,122,59,.11);
      border-radius:22px;padding:22px;
      transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease;
    }
    .feature-item:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(34,197,94,.34)}
    .feature-item .badge{margin-bottom:14px}
    .feature-item p{font-size:14px;margin-top:8px}

    .faq-wrap{
      display:grid;grid-template-columns:.85fr 1.15fr;gap:26px;align-items:start;
    }
    .faq-intro{
      background:var(--night-gradient);
      color:#fff;
      border-radius:28px;
      padding:30px;
      position:sticky;top:142px;
      overflow:hidden;
    }
    .faq-intro:after{
      content:"";position:absolute;right:-80px;bottom:-80px;width:210px;height:210px;border-radius:50%;
      background:rgba(251,191,36,.18);
    }
    .faq-intro h2{margin:14px 0 12px;color:#fff}
    .faq-intro p{color:rgba(255,255,255,.76)}
    .faq-list{display:flex;flex-direction:column;gap:14px}
    details.faq-item{
      background:#fff;border:1px solid rgba(15,122,59,.12);
      border-radius:20px;padding:0;
      box-shadow:0 10px 28px rgba(16,32,22,.06);
      overflow:hidden;
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    details.faq-item[open]{border-color:rgba(34,197,94,.42);box-shadow:var(--shadow)}
    .faq-item summary{
      list-style:none;cursor:pointer;padding:18px 20px;
      font-weight:820;color:var(--green-900);
      display:flex;justify-content:space-between;gap:18px;align-items:center;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary:after{
      content:"＋";width:30px;height:30px;border-radius:50%;
      display:flex;align-items:center;justify-content:center;
      background:rgba(34,197,94,.10);color:var(--green-600);font-weight:900;
      flex:0 0 auto;
    }
    .faq-item[open] summary:after{content:"—";background:var(--green-600);color:#fff}
    .faq-item p{padding:0 20px 20px;color:var(--muted);font-size:14px;line-height:1.85}

    .cta-section{
      padding:80px 0;
    }
    .cta-card{
      display:grid;grid-template-columns:1fr 430px;gap:28px;align-items:center;
      background:
        radial-gradient(circle at 86% 20%,rgba(251,191,36,.20),transparent 26%),
        var(--night-gradient);
      border-radius:32px;
      padding:36px;
      color:#fff;
      box-shadow:0 25px 60px rgba(11,26,18,.22);
      overflow:hidden;
      position:relative;
    }
    .cta-card:before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px),
        linear-gradient(0deg,rgba(255,255,255,.05) 1px,transparent 1px);
      background-size:52px 52px;
      opacity:.55;
    }
    .cta-content,.contact-form{position:relative;z-index:1}
    .cta-content h2{color:#fff;margin:14px 0}
    .cta-content p{color:rgba(255,255,255,.76);max-width:720px}
    .cta-points{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
    .cta-points span{
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      color:rgba(255,255,255,.9);
      padding:8px 11px;border-radius:999px;font-size:13px;font-weight:760;
    }
    .contact-form{
      background:rgba(255,255,255,.96);
      border-radius:24px;padding:22px;
      border:1px solid rgba(255,255,255,.22);
      box-shadow:0 16px 38px rgba(0,0,0,.16);
    }
    .contact-form h3{color:var(--green-900);margin-bottom:12px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
    .field.full{grid-column:1/-1}
    .field label{font-size:13px;font-weight:780;color:#435146}
    .field input,.field select,.field textarea{
      width:100%;
      border:1px solid var(--border);
      border-radius:15px;
      background:var(--bg-soft);
      padding:11px 12px;
      color:var(--text);
      transition:border-color .2s ease,box-shadow .2s ease,background .2s ease;
    }
    .field textarea{min-height:92px;resize:vertical}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:rgba(34,197,94,.58);
      background:#fff;
      box-shadow:0 0 0 4px rgba(34,197,94,.16);
    }
    .form-note{font-size:12px;color:var(--muted);line-height:1.6;margin-top:10px}

    .site-footer{
      background:#0B1A12;color:rgba(255,255,255,.78);
      padding-top:54px;
    }
    .footer-main{
      display:grid;grid-template-columns:1.45fr .75fr .75fr .85fr;gap:34px;
      padding-bottom:36px;
    }
    .footer-logo{display:flex;align-items:center;gap:12px;color:#fff;font-size:20px;font-weight:850;margin-bottom:14px}
    .footer-about p{color:rgba(255,255,255,.68);max-width:430px;font-size:14px}
    .footer-search{
      display:flex;gap:8px;margin-top:18px;background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      padding:7px;border-radius:999px;
    }
    .footer-search input{flex:1;min-width:0;background:transparent;border:0;color:#fff;padding:8px 10px}
    .footer-search input::placeholder{color:rgba(255,255,255,.45)}
    .footer-search button{border-radius:999px;background:var(--yellow);color:#172016;font-weight:800;padding:8px 13px}
    .footer-col h3{font-size:16px;color:#fff;margin-bottom:14px}
    .footer-links{display:flex;flex-direction:column;gap:9px}
    .footer-links a{color:rgba(255,255,255,.66);font-size:14px}
    .footer-links a:hover{color:#9AF0B4;transform:translateX(3px)}
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.11);
      padding:20px 0 26px;
      text-align:center;
      color:rgba(255,255,255,.58);
      font-size:12.5px;
      display:flex;flex-direction:column;gap:7px;
    }
    .footer-bottom a{color:rgba(183,236,194,.75)}
    .footer-bottom a:hover{color:var(--yellow)}

    @media (max-width:1100px){
      .nav-main{grid-template-columns:1fr;gap:12px}
      .quick-links{overflow-x:auto;padding-bottom:2px}
      .hero-inner{grid-template-columns:1fr;padding:34px}
      .schedule-layout{grid-template-columns:1fr}
      .sidebar{position:static;display:grid;grid-template-columns:repeat(3,1fr)}
      .process-grid{grid-template-columns:repeat(2,1fr)}
      .feature-split,.faq-wrap,.cta-card{grid-template-columns:1fr}
      .faq-intro{position:relative;top:auto}
      .footer-main{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,var(--container))}
      .section{padding:58px 0}
      .hero{padding-top:24px}
      .hero-card{min-height:auto}
      .hero-inner{padding:26px}
      .hero-stats,.intro-grid,.feature-list,.sidebar{grid-template-columns:1fr}
      .date-picker{grid-template-columns:repeat(5,minmax(58px,1fr));gap:7px}
      .date-chip{padding:10px 5px}
      .filter-card{align-items:flex-start}
      .section-head{flex-direction:column;align-items:flex-start}
      .match-card{grid-template-columns:1fr;gap:12px}
      .match-time{display:flex;align-items:baseline;gap:8px;padding-left:0}
      .match-action{align-items:flex-start;min-width:0}
      .process-grid{grid-template-columns:1fr}
      .form-grid{grid-template-columns:1fr}
      .footer-main{grid-template-columns:1fr}
    }
    @media (max-width:520px){
      .container{width:min(100% - 24px,var(--container))}
      .logo-text span{display:none}
      .nav-search form{border-radius:22px;align-items:stretch}
      .search-submit{padding-inline:12px}
      .quick-links{gap:6px}
      .category-nav a{padding:8px 12px;font-size:13px}
      .hero-inner{padding:20px}
      .hero-actions .btn,.cta-content .btn{width:100%}
      .lead{font-size:16px}
      .filter-card{overflow-x:auto;flex-wrap:nowrap}
      .filter-label{flex:0 0 auto}
      .filter-card a{flex:0 0 auto}
      .teams{font-size:16px}
      .date-panel{padding:18px}
      .date-picker{overflow-x:auto;display:flex}
      .date-chip{min-width:64px}
      .cta-card{padding:24px}
      .contact-form{padding:18px}
    }

/* roulang page: category4 */
:root{
      --green-900:#0b1a12;
      --green-800:#12351f;
      --green-700:#0f7a3b;
      --green-600:#16a34a;
      --green-500:#22c55e;
      --green-100:#dcfce7;
      --green-50:#eef6ea;
      --yellow:#fbbf24;
      --orange:#f97316;
      --text:#102016;
      --text-soft:#52645a;
      --muted:#718277;
      --bg:#fafcf7;
      --bg-soft:#f4f8f1;
      --card:#ffffff;
      --border:#dce8d6;
      --border-strong:rgba(15,122,59,.18);
      --shadow:0 18px 45px rgba(16,32,22,.10);
      --shadow-hover:0 24px 58px rgba(16,32,22,.16);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-pill:999px;
      --container:1240px;
      --gradient:linear-gradient(135deg,#0f7a3b 0%,#22c55e 55%,#fbbf24 100%);
      --soft-gradient:linear-gradient(135deg,rgba(34,197,94,.12),rgba(251,191,36,.16));
      --night-gradient:linear-gradient(135deg,#0b1a12 0%,#12351f 68%,#0f7a3b 100%);
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 6% 8%,rgba(34,197,94,.12),transparent 30%),
        radial-gradient(circle at 88% 18%,rgba(251,191,36,.13),transparent 26%),
        var(--bg);
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:.22s ease}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    button{cursor:pointer;border:0}
    ::selection{background:rgba(34,197,94,.24)}
    .container{width:min(100% - 48px,var(--container));margin-inline:auto}
    .section{padding:78px 0}
    .section-tight{padding:56px 0}
    .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;margin-bottom:32px}
    .section-kicker{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--green-700);font-size:14px;font-weight:800;
      letter-spacing:.04em;margin-bottom:8px
    }
    .section-kicker::before{
      content:"";width:10px;height:10px;border-radius:50%;
      background:var(--gradient);box-shadow:0 0 0 6px rgba(34,197,94,.12)
    }
    h1,h2,h3{line-height:1.16;color:var(--text)}
    h1{font-size:clamp(34px,5vw,56px);font-weight:850;letter-spacing:-.04em}
    h2{font-size:clamp(26px,3.2vw,38px);font-weight:820;letter-spacing:-.03em}
    h3{font-size:20px;font-weight:780}
    p{color:var(--text-soft)}
    .lead{font-size:18px;color:#405249;max-width:720px}
    .muted{color:var(--muted);font-size:14px}
    .site-header{
      position:sticky;top:0;z-index:50;
      background:rgba(250,252,247,.94);
      border-bottom:1px solid rgba(220,232,214,.9);
      box-shadow:0 10px 28px rgba(16,32,22,.05)
    }
    .nav-shell{padding:14px 0 12px}
    .nav-main{display:grid;grid-template-columns:auto minmax(280px,1fr) auto;gap:22px;align-items:center}
    .logo{display:inline-flex;align-items:center;gap:12px;min-width:max-content}
    .logo:hover{transform:translateY(-1px)}
    .logo:hover .logo-mark{transform:rotate(-4deg) scale(1.04)}
    .logo-mark{
      width:46px;height:46px;border-radius:17px;background:var(--gradient);
      color:#fff;display:inline-grid;place-items:center;font-weight:900;
      box-shadow:0 14px 28px rgba(15,122,59,.22);
      position:relative;transition:.22s ease
    }
    .logo-mark::after{
      content:"";position:absolute;inset:9px;border:1px solid rgba(255,255,255,.58);
      border-radius:50%;border-left-color:transparent
    }
    .logo-text{display:flex;flex-direction:column;line-height:1.2}
    .logo-text strong{font-size:19px;letter-spacing:-.02em}
    .logo-text span{font-size:12px;color:var(--muted);margin-top:3px}
    .nav-search form{
      position:relative;display:flex;align-items:center;
      background:#fff;border:1px solid var(--border);
      border-radius:var(--radius-pill);padding:6px 7px 6px 42px;
      box-shadow:0 10px 24px rgba(16,32,22,.06);
      transition:.22s ease
    }
    .nav-search form:focus-within{
      border-color:rgba(34,197,94,.62);
      box-shadow:0 0 0 4px rgba(34,197,94,.16),0 12px 28px rgba(16,32,22,.08)
    }
    .search-icon{
      position:absolute;left:17px;top:50%;transform:translateY(-50%);
      color:var(--green-700);font-size:21px;font-weight:900
    }
    .nav-search input{
      width:100%;border:0;outline:0;background:transparent;color:var(--text);
      min-height:38px;font-size:14px
    }
    .nav-search input::placeholder{color:#8c9b91}
    .search-submit{
      border-radius:var(--radius-pill);padding:9px 18px;
      background:var(--green-700);color:#fff;font-weight:800;
      box-shadow:0 8px 18px rgba(15,122,59,.18)
    }
    .search-submit:hover{background:var(--green-600);transform:translateY(-1px)}
    .quick-links{display:flex;align-items:center;gap:6px;white-space:nowrap}
    .quick-links a{
      font-size:14px;color:#31443a;padding:9px 11px;border-radius:var(--radius-pill);
      font-weight:700
    }
    .quick-links a:hover,.quick-links a.active{
      color:var(--green-700);background:rgba(34,197,94,.10)
    }
    .category-nav{
      display:flex;gap:10px;margin-top:13px;overflow-x:auto;padding-bottom:2px;
      scrollbar-width:none
    }
    .category-nav::-webkit-scrollbar{display:none}
    .category-nav a{
      flex:0 0 auto;padding:8px 16px;border-radius:var(--radius-pill);
      background:#fff;border:1px solid rgba(15,122,59,.10);
      color:#42554a;font-size:14px;font-weight:800
    }
    .category-nav a:hover{
      color:var(--green-700);border-color:rgba(34,197,94,.34);
      transform:translateY(-1px)
    }
    .category-nav a.active{
      background:var(--green-700);color:#fff;border-color:var(--green-700);
      box-shadow:0 10px 22px rgba(15,122,59,.22)
    }

    .breadcrumb-wrap{padding:24px 0 0}
    .breadcrumb{
      display:flex;align-items:center;gap:8px;flex-wrap:wrap;
      color:var(--muted);font-size:14px
    }
    .breadcrumb a{color:var(--green-700);font-weight:750}
    .breadcrumb a:hover{color:var(--orange)}
    .breadcrumb span{color:#91a096}

    .topic-hero{padding:34px 0 74px;position:relative}
    .hero-card{
      position:relative;overflow:hidden;border-radius:34px;min-height:520px;
      display:grid;grid-template-columns:1.02fr .98fr;
      background:var(--night-gradient);
      box-shadow:var(--shadow);
      border:1px solid rgba(15,122,59,.16)
    }
    .hero-card::before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(11,26,18,.92) 0%,rgba(11,26,18,.74) 45%,rgba(11,26,18,.28) 100%),
        url("/assets/images/coverpic/cover-4.webp") center/cover no-repeat;
      opacity:.98
    }
    .hero-card::after{
      content:"";position:absolute;inset:auto -80px -110px auto;width:420px;height:420px;
      border:1px solid rgba(255,255,255,.16);border-radius:50%
    }
    .hero-copy{position:relative;z-index:2;padding:58px;align-self:center}
    .hero-copy h1{color:#fff;max-width:760px}
    .hero-copy .lead{color:rgba(255,255,255,.82);margin-top:20px}
    .hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      border-radius:var(--radius-pill);padding:13px 22px;
      font-weight:850;transition:.22s ease;min-height:48px
    }
    .btn-primary{background:var(--gradient);color:#fff;box-shadow:0 14px 30px rgba(15,122,59,.28)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 38px rgba(15,122,59,.34);filter:saturate(1.08)}
    .btn-light{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.28)}
    .btn-light:hover{background:rgba(255,255,255,.20);transform:translateY(-2px)}
    .btn-yellow{background:var(--yellow);color:#172016;box-shadow:0 14px 28px rgba(251,191,36,.24)}
    .btn-yellow:hover{transform:translateY(-2px);background:#ffd35b}
    .hero-panel{
      position:relative;z-index:2;align-self:end;margin:38px;
      background:rgba(250,252,247,.95);
      border:1px solid rgba(255,255,255,.38);
      border-radius:var(--radius-xl);padding:24px;box-shadow:var(--shadow)
    }
    .panel-title{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:18px}
    .panel-title strong{font-size:18px}
    .status-dot{
      display:inline-flex;align-items:center;gap:7px;padding:6px 10px;
      border-radius:var(--radius-pill);background:rgba(34,197,94,.12);
      color:var(--green-700);font-size:13px;font-weight:850
    }
    .status-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green-500)}
    .mini-board{display:grid;gap:12px}
    .mini-item{
      display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;
      padding:14px;border:1px solid rgba(15,122,59,.10);
      border-radius:18px;background:#fff
    }
    .mini-date{
      width:54px;height:54px;border-radius:18px;background:var(--soft-gradient);
      display:grid;place-items:center;text-align:center;font-weight:900;color:var(--green-700);
      font-variant-numeric:tabular-nums;line-height:1.1
    }
    .mini-date small{display:block;font-size:11px;color:var(--muted);font-weight:750}
    .mini-item b{display:block;font-size:15px}
    .mini-item span{display:block;color:var(--muted);font-size:13px;margin-top:2px}
    .tag{
      display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-pill);
      padding:6px 10px;font-size:12px;font-weight:850;
      background:rgba(251,191,36,.16);color:#9a5b00;border:1px solid rgba(251,191,36,.28)
    }
    .tag.green{background:rgba(34,197,94,.12);color:var(--green-700);border-color:rgba(34,197,94,.24)}
    .tag.dark{background:rgba(15,122,59,.08);color:var(--green-800);border-color:rgba(15,122,59,.22)}
    .tag.orange{background:rgba(249,115,22,.12);color:#b84a0e;border-color:rgba(249,115,22,.24)}
    .hero-stats{
      position:relative;z-index:2;display:flex;gap:12px;flex-wrap:wrap;margin-top:26px
    }
    .stat-badge{
      padding:12px 15px;border-radius:18px;background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.18);color:#fff
    }
    .stat-badge strong{color:var(--yellow);font-size:22px;font-variant-numeric:tabular-nums}
    .stat-badge span{font-size:13px;color:rgba(255,255,255,.74);margin-left:4px}

    .filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
    .filter-chip{
      border:1px solid var(--border);background:#fff;border-radius:var(--radius-pill);
      padding:9px 15px;font-size:14px;font-weight:800;color:#405249
    }
    .filter-chip:hover,.filter-chip.active{
      background:var(--green-700);color:#fff;border-color:var(--green-700);
      transform:translateY(-1px);box-shadow:0 10px 22px rgba(15,122,59,.18)
    }

    .cover-feature{
      display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch
    }
    .feature-image{
      min-height:420px;border-radius:var(--radius-xl);overflow:hidden;position:relative;
      box-shadow:var(--shadow);border:1px solid var(--border-strong)
    }
    .feature-image img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
    .feature-image:hover img{transform:scale(1.04)}
    .feature-image .image-caption{
      position:absolute;left:22px;right:22px;bottom:22px;
      padding:18px;border-radius:20px;background:rgba(11,26,18,.82);
      color:#fff
    }
    .image-caption p{color:rgba(255,255,255,.78);font-size:14px;margin-top:4px}
    .feature-copy{
      background:#fff;border:1px solid rgba(15,122,59,.10);
      border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow);
      display:flex;flex-direction:column;justify-content:space-between
    }
    .feature-copy h2{margin:12px 0 14px}
    .feature-list{display:grid;gap:12px;margin-top:24px}
    .feature-list li{
      list-style:none;display:flex;gap:12px;align-items:flex-start;
      padding:13px 14px;border-radius:16px;background:var(--bg-soft);
      border:1px solid rgba(15,122,59,.08)
    }
    .feature-list li::before{
      content:"";flex:0 0 9px;width:9px;height:9px;border-radius:50%;
      margin-top:9px;background:var(--gradient);box-shadow:0 0 0 5px rgba(34,197,94,.12)
    }

    .topic-grid{
      display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:20px;
      grid-auto-rows:minmax(230px,auto)
    }
    .topic-card{
      position:relative;overflow:hidden;border-radius:var(--radius-xl);
      background:#fff;border:1px solid rgba(15,122,59,.10);
      box-shadow:0 12px 30px rgba(16,32,22,.07);
      transition:.25s ease
    }
    .topic-card:hover{
      transform:translateY(-4px);border-color:rgba(34,197,94,.38);
      box-shadow:var(--shadow-hover)
    }
    .topic-card.wide{grid-column:span 2}
    .topic-card.tall{grid-row:span 2}
    .topic-img{height:190px;overflow:hidden;background:var(--bg-soft)}
    .topic-card.tall .topic-img{height:330px}
    .topic-card.wide .topic-img{height:230px}
    .topic-img img{width:100%;height:100%;object-fit:cover;transition:.5s ease}
    .topic-card:hover .topic-img img{transform:scale(1.05)}
    .topic-body{padding:22px}
    .topic-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
    .topic-body p{margin-top:10px;font-size:15px}
    .read-link{
      display:inline-flex;align-items:center;gap:8px;margin-top:18px;
      color:var(--green-700);font-weight:850
    }
    .read-link::after{content:"→";transition:.22s ease}
    .read-link:hover{color:var(--orange)}
    .read-link:hover::after{transform:translateX(4px)}

    .insight-band{
      background:var(--night-gradient);border-radius:34px;padding:38px;
      color:#fff;position:relative;overflow:hidden;box-shadow:var(--shadow)
    }
    .insight-band::before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
        linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
      background-size:44px 44px;opacity:.45
    }
    .insight-inner{position:relative;display:grid;grid-template-columns:.95fr 1.05fr;gap:34px;align-items:center}
    .insight-band h2,.insight-band h3{color:#fff}
    .insight-band p{color:rgba(255,255,255,.76)}
    .data-tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
    .data-tile{
      background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
      border-radius:22px;padding:18px
    }
    .data-tile strong{display:block;color:var(--yellow);font-size:30px;line-height:1;font-variant-numeric:tabular-nums}
    .data-tile span{display:block;color:rgba(255,255,255,.78);font-size:14px;margin-top:8px}

    .process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .process-card{
      background:#fff;border-radius:var(--radius-lg);padding:24px;
      border:1px solid rgba(15,122,59,.10);box-shadow:0 12px 28px rgba(16,32,22,.06);
      transition:.22s ease;position:relative;overflow:hidden
    }
    .process-card::after{
      content:"";position:absolute;right:-32px;top:-32px;width:92px;height:92px;border-radius:50%;
      background:rgba(34,197,94,.08)
    }
    .process-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(34,197,94,.34)}
    .step-num{
      width:42px;height:42px;border-radius:16px;background:var(--gradient);color:#fff;
      display:grid;place-items:center;font-weight:900;margin-bottom:18px;
      box-shadow:0 12px 22px rgba(15,122,59,.2)
    }
    .process-card p{font-size:15px;margin-top:10px}

    .scenario-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:24px;align-items:start}
    .scenario-panel{
      position:sticky;top:148px;background:var(--soft-gradient);
      border:1px solid rgba(15,122,59,.12);border-radius:var(--radius-xl);
      padding:28px;box-shadow:0 12px 28px rgba(16,32,22,.06)
    }
    .scenario-list{display:grid;gap:14px}
    .scenario-item{
      display:grid;grid-template-columns:auto 1fr;gap:16px;
      background:#fff;border:1px solid rgba(15,122,59,.10);
      border-radius:22px;padding:18px;transition:.22s ease
    }
    .scenario-item:hover{transform:translateX(4px);border-color:rgba(34,197,94,.34);box-shadow:0 12px 26px rgba(16,32,22,.07)}
    .scenario-icon{
      width:48px;height:48px;border-radius:18px;background:var(--bg-soft);
      display:grid;place-items:center;font-size:22px
    }
    .scenario-item p{font-size:15px;margin-top:4px}

    .faq-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
    .faq-card{
      background:#fff;border:1px solid rgba(15,122,59,.10);
      border-radius:var(--radius-lg);padding:22px;transition:.22s ease
    }
    .faq-card:hover{border-color:rgba(34,197,94,.36);box-shadow:0 12px 28px rgba(16,32,22,.07)}
    .faq-card h3{display:flex;gap:10px;align-items:flex-start;font-size:17px}
    .faq-card h3 span{
      flex:0 0 auto;width:25px;height:25px;border-radius:50%;
      display:grid;place-items:center;background:rgba(34,197,94,.12);
      color:var(--green-700);font-size:13px;font-weight:900
    }
    .faq-card p{font-size:15px;margin-top:12px}

    .cta-section{padding:78px 0 88px}
    .cta-card{
      display:grid;grid-template-columns:1fr .9fr;gap:30px;
      background:var(--night-gradient);border-radius:34px;padding:42px;
      color:#fff;box-shadow:var(--shadow);position:relative;overflow:hidden
    }
    .cta-card::before{
      content:"";position:absolute;inset:0;
      background:url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      opacity:.16
    }
    .cta-copy,.contact-form{position:relative;z-index:1}
    .cta-card h2{color:#fff}
    .cta-card p{color:rgba(255,255,255,.78);margin-top:14px}
    .contact-form{
      background:rgba(250,252,247,.96);border-radius:var(--radius-xl);
      padding:24px;border:1px solid rgba(255,255,255,.34)
    }
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
    .form-field{margin-bottom:12px}
    .form-field label{display:block;color:#31443a;font-size:13px;font-weight:850;margin-bottom:6px}
    .form-field input,.form-field select,.form-field textarea{
      width:100%;border:1px solid var(--border);border-radius:15px;
      padding:12px 13px;background:#fff;color:var(--text);outline:0;transition:.22s ease
    }
    .form-field textarea{min-height:104px;resize:vertical}
    .form-field input:focus,.form-field select:focus,.form-field textarea:focus{
      border-color:rgba(34,197,94,.64);box-shadow:0 0 0 4px rgba(34,197,94,.16)
    }
    .form-note{font-size:12px;color:var(--muted);margin-top:8px}
    .contact-form .btn{width:100%;margin-top:4px}

    .site-footer{
      background:#0b1a12;color:rgba(255,255,255,.82);
      padding:58px 0 24px
    }
    .footer-main{
      display:grid;grid-template-columns:1.25fr .7fr .7fr .8fr;gap:34px;
      padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.10)
    }
    .footer-logo{display:flex;align-items:center;gap:11px;font-size:20px;font-weight:900;color:#fff;margin-bottom:14px}
    .footer-about p{color:rgba(255,255,255,.70);font-size:14px;max-width:380px}
    .footer-search{
      margin-top:18px;display:flex;gap:8px;background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-pill);padding:6px
    }
    .footer-search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:#fff;padding:8px 10px}
    .footer-search input::placeholder{color:rgba(255,255,255,.46)}
    .footer-search button{
      border-radius:var(--radius-pill);background:var(--yellow);color:#172016;
      padding:8px 14px;font-weight:850
    }
    .footer-col h3{color:#fff;font-size:16px;margin-bottom:14px}
    .footer-links{display:grid;gap:9px}
    .footer-links a{color:rgba(255,255,255,.68);font-size:14px}
    .footer-links a:hover{color:#9ef0b7;transform:translateX(3px)}
    .footer-bottom{
      text-align:center;color:rgba(255,255,255,.56);font-size:12.5px;
      padding-top:22px;display:grid;gap:7px
    }
    .footer-bottom a{color:rgba(190,245,207,.82)}
    .footer-bottom a:hover{color:var(--yellow)}

    @media (max-width:1100px){
      .nav-main{grid-template-columns:1fr;gap:12px}
      .quick-links{justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
      .hero-card,.cover-feature,.insight-inner,.scenario-wrap,.cta-card{grid-template-columns:1fr}
      .hero-panel{align-self:auto}
      .topic-grid{grid-template-columns:repeat(2,1fr)}
      .topic-card.wide{grid-column:span 1}
      .process-grid{grid-template-columns:repeat(2,1fr)}
      .scenario-panel{position:relative;top:auto}
      .footer-main{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,var(--container))}
      .section{padding:58px 0}
      .section-head{display:block}
      .lead{font-size:16px}
      .hero-copy{padding:34px 24px}
      .hero-card{min-height:auto;border-radius:26px}
      .hero-panel{margin:0 18px 22px;padding:18px}
      .hero-actions .btn{flex:1 1 100%}
      .mini-item{grid-template-columns:auto 1fr}
      .mini-item .tag{grid-column:2}
      .topic-grid,.faq-grid,.data-tiles{grid-template-columns:1fr}
      .topic-card.tall{grid-row:span 1}
      .topic-card.tall .topic-img,.topic-card.wide .topic-img,.topic-img{height:210px}
      .feature-image{min-height:320px}
      .cta-card{padding:26px}
      .form-row{grid-template-columns:1fr}
    }
    @media (max-width:520px){
      .nav-shell{padding-top:12px}
      .logo-mark{width:42px;height:42px}
      .logo-text strong{font-size:17px}
      .nav-search form{padding-left:38px}
      .search-submit{padding:8px 13px}
      .quick-links a{font-size:13px;padding:8px 10px}
      .category-nav a{font-size:13px;padding:8px 13px}
      .process-grid{grid-template-columns:1fr}
      .cover-feature{gap:18px}
      .feature-copy,.insight-band{padding:22px}
      .footer-main{grid-template-columns:1fr}
      .footer-search{border-radius:18px;align-items:stretch}
      .footer-search button{padding-inline:12px}
    }

/* roulang page: category3 */
:root {
      --green-900: #0B1A12;
      --green-850: #102016;
      --green-800: #12351F;
      --green-700: #0F7A3B;
      --green-600: #16A34A;
      --green-500: #22C55E;
      --green-100: #DDF7E6;
      --green-50: #EEF6EA;
      --yellow-500: #FBBF24;
      --orange-500: #F97316;
      --text: #1F2A24;
      --muted: #66756B;
      --weak: #8A978D;
      --bg: #FAFCF7;
      --bg-soft: #F4F8F1;
      --line: #DCE8D6;
      --card: #FFFFFF;
      --shadow: 0 18px 45px rgba(16,32,22,.10);
      --shadow-hover: 0 24px 60px rgba(16,32,22,.16);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --gradient-main: linear-gradient(135deg, #0F7A3B 0%, #22C55E 55%, #FBBF24 100%);
      --gradient-soft: linear-gradient(135deg, rgba(34,197,94,.12), rgba(251,191,36,.16));
      --gradient-night: linear-gradient(135deg, #0B1A12 0%, #12351F 68%, #1B5D2D 100%);
      --container: 1240px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 8% 4%, rgba(34,197,94,.12), transparent 30%),
        radial-gradient(circle at 92% 8%, rgba(251,191,36,.12), transparent 28%),
        var(--bg);
      line-height: 1.75;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .22s ease, background .22s ease, transform .22s ease, border-color .22s ease;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button, input, textarea, select {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
    }

    ::selection {
      background: rgba(34,197,94,.2);
      color: var(--green-900);
    }

    .container {
      width: min(var(--container), calc(100% - 48px));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250,252,247,.96);
      border-bottom: 1px solid rgba(15,122,59,.12);
      box-shadow: 0 10px 30px rgba(16,32,22,.06);
    }

    .nav-shell {
      padding: 16px 0 12px;
    }

    .nav-main {
      display: grid;
      grid-template-columns: 232px minmax(280px, 1fr) auto;
      gap: 18px;
      align-items: center;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .logo:hover {
      transform: translateY(-1px);
    }

    .logo:hover .logo-mark {
      transform: rotate(-4deg) scale(1.04);
      box-shadow: 0 14px 30px rgba(15,122,59,.24);
    }

    .logo-mark {
      width: 46px;
      height: 46px;
      border-radius: 17px;
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      background:
        radial-gradient(circle at 35% 30%, rgba(255,255,255,.92) 0 15%, transparent 16%),
        linear-gradient(135deg, #0F7A3B, #22C55E 55%, #FBBF24);
      color: #fff;
      font-weight: 900;
      font-size: 21px;
      box-shadow: 0 12px 28px rgba(15,122,59,.22);
      position: relative;
      transition: transform .22s ease, box-shadow .22s ease;
    }

    .logo-mark::after {
      content: "";
      position: absolute;
      inset: 9px;
      border: 1.5px solid rgba(255,255,255,.65);
      border-radius: 50%;
      border-left-color: transparent;
      border-bottom-color: rgba(255,255,255,.28);
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }

    .logo-text strong {
      font-size: 20px;
      letter-spacing: .5px;
      color: var(--green-850);
    }

    .logo-text span {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    .nav-search form {
      display: flex;
      align-items: center;
      gap: 8px;
      height: 52px;
      padding: 6px 7px 6px 18px;
      border: 1px solid rgba(15,122,59,.16);
      background: #fff;
      border-radius: 999px;
      box-shadow: 0 10px 24px rgba(16,32,22,.07);
      transition: box-shadow .22s ease, border-color .22s ease;
    }

    .nav-search form:focus-within {
      border-color: rgba(34,197,94,.75);
      box-shadow: 0 0 0 4px rgba(34,197,94,.14), 0 14px 28px rgba(16,32,22,.09);
    }

    .search-icon {
      color: var(--green-700);
      font-size: 22px;
      line-height: 1;
    }

    .nav-search input {
      flex: 1;
      width: 100%;
      border: 0;
      outline: 0;
      color: var(--text);
      min-width: 120px;
      background: transparent;
      font-size: 15px;
    }

    .nav-search input::placeholder {
      color: #8A978D;
    }

    .search-submit {
      height: 38px;
      padding: 0 18px;
      border-radius: 999px;
      background: var(--gradient-main);
      color: #fff;
      font-weight: 750;
      box-shadow: 0 10px 20px rgba(15,122,59,.18);
      transition: transform .22s ease, filter .22s ease, box-shadow .22s ease;
    }

    .search-submit:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 14px 28px rgba(15,122,59,.25);
    }

    .quick-links {
      display: flex;
      align-items: center;
      gap: 8px;
      white-space: nowrap;
    }

    .quick-links a {
      padding: 9px 11px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 650;
    }

    .quick-links a:hover,
    .quick-links a.active {
      color: var(--green-800);
      background: rgba(34,197,94,.10);
    }

    .category-nav {
      margin-top: 14px;
      display: flex;
      align-items: center;
      gap: 10px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-bottom: 2px;
    }

    .category-nav::-webkit-scrollbar { display: none; }

    .category-nav a {
      flex: 0 0 auto;
      padding: 8px 16px;
      border: 1px solid rgba(15,122,59,.10);
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      color: var(--muted);
      font-weight: 700;
      font-size: 14px;
      position: relative;
    }

    .category-nav a:hover {
      color: var(--green-800);
      border-color: rgba(34,197,94,.32);
      transform: translateY(-1px);
    }

    .category-nav a.active {
      color: #fff;
      background: var(--green-700);
      border-color: var(--green-700);
      box-shadow: 0 10px 22px rgba(15,122,59,.18);
    }

    main {
      min-height: 60vh;
    }

    .breadcrumb {
      padding: 24px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .breadcrumb a {
      color: var(--green-700);
      font-weight: 700;
    }

    .breadcrumb span {
      margin: 0 8px;
      color: var(--weak);
    }

    .page-hero {
      padding: 34px 0 72px;
    }

    .hero-panel {
      position: relative;
      overflow: hidden;
      border-radius: 34px;
      min-height: 460px;
      padding: 46px;
      background:
        linear-gradient(90deg, rgba(11,26,18,.92), rgba(18,53,31,.78) 48%, rgba(15,122,59,.44)),
        url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      color: #fff;
      box-shadow: var(--shadow);
    }

    .hero-panel::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px),
        linear-gradient(0deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size: 70px 70px;
      opacity: .18;
      pointer-events: none;
    }

    .hero-content {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      gap: 42px;
      align-items: center;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      background: rgba(251,191,36,.16);
      border: 1px solid rgba(251,191,36,.32);
      color: #FFE6A3;
      font-size: 13px;
      font-weight: 750;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: var(--yellow-500);
      box-shadow: 0 0 0 5px rgba(251,191,36,.16);
    }

    h1, h2, h3, p {
      margin-top: 0;
    }

    h1 {
      font-size: clamp(34px, 5vw, 56px);
      line-height: 1.12;
      margin-bottom: 18px;
      letter-spacing: -1.2px;
      font-weight: 850;
    }

    .hero-lead {
      max-width: 710px;
      color: rgba(255,255,255,.82);
      font-size: 18px;
      margin-bottom: 28px;
    }

    .hero-actions,
    .cta-actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 0 22px;
      border-radius: 999px;
      font-weight: 800;
      transition: transform .22s ease, box-shadow .22s ease, filter .22s ease, background .22s ease, border-color .22s ease;
    }

    .btn-primary {
      background: var(--gradient-main);
      color: #fff;
      box-shadow: 0 14px 26px rgba(15,122,59,.28);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.04);
      box-shadow: 0 20px 38px rgba(15,122,59,.34);
    }

    .btn-light {
      background: rgba(255,255,255,.92);
      color: var(--green-850);
      border: 1px solid rgba(255,255,255,.45);
    }

    .btn-light:hover {
      transform: translateY(-2px);
      background: #fff;
      box-shadow: 0 16px 34px rgba(0,0,0,.18);
    }

    .btn-outline {
      color: var(--green-800);
      background: #fff;
      border: 1px solid rgba(15,122,59,.18);
    }

    .btn-outline:hover {
      transform: translateY(-2px);
      border-color: rgba(34,197,94,.42);
      box-shadow: var(--shadow);
    }

    .hero-metrics {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-top: 30px;
      max-width: 660px;
    }

    .metric {
      border: 1px solid rgba(255,255,255,.18);
      background: rgba(255,255,255,.10);
      border-radius: 18px;
      padding: 14px;
    }

    .metric strong {
      display: block;
      font-size: 24px;
      line-height: 1.1;
      color: var(--yellow-500);
      font-variant-numeric: tabular-nums;
    }

    .metric span {
      display: block;
      margin-top: 4px;
      color: rgba(255,255,255,.74);
      font-size: 13px;
    }

    .league-switch-card {
      background: rgba(255,255,255,.94);
      color: var(--text);
      border: 1px solid rgba(255,255,255,.44);
      border-radius: 26px;
      padding: 24px;
      box-shadow: 0 28px 70px rgba(0,0,0,.18);
    }

    .league-switch-card h2 {
      font-size: 22px;
      margin-bottom: 8px;
      color: var(--green-850);
    }

    .league-switch-card p {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 18px;
    }

    .league-tabs {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
    }

    .league-tabs button {
      padding: 10px 14px;
      border-radius: 999px;
      background: var(--green-50);
      border: 1px solid rgba(15,122,59,.12);
      color: var(--green-800);
      font-weight: 750;
      transition: transform .22s ease, background .22s ease, color .22s ease, box-shadow .22s ease;
    }

    .league-tabs button:hover,
    .league-tabs button.active {
      background: var(--green-700);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 12px 24px rgba(15,122,59,.18);
    }

    .mini-board {
      margin-top: 22px;
      border-radius: 20px;
      background: var(--gradient-soft);
      padding: 18px;
      border: 1px solid rgba(15,122,59,.12);
    }

    .mini-board-row {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      padding: 10px 0;
      border-bottom: 1px dashed rgba(15,122,59,.16);
      font-size: 14px;
    }

    .mini-board-row:last-child {
      border-bottom: 0;
    }

    .mini-board-row strong {
      color: var(--green-800);
      font-variant-numeric: tabular-nums;
    }

    .section {
      padding: 72px 0;
    }

    .section-tight {
      padding-top: 12px;
    }

    .section-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 28px;
    }

    .section-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--green-700);
      font-size: 14px;
      font-weight: 850;
      margin-bottom: 8px;
    }

    .section-kicker::before {
      content: "";
      width: 28px;
      height: 3px;
      border-radius: 999px;
      background: var(--gradient-main);
    }

    h2 {
      font-size: clamp(26px, 3.6vw, 38px);
      line-height: 1.22;
      letter-spacing: -.6px;
      margin-bottom: 10px;
      color: var(--green-850);
    }

    .section-desc {
      color: var(--muted);
      max-width: 720px;
      margin-bottom: 0;
    }

    .notice {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 14px;
      border-radius: 999px;
      background: rgba(251,191,36,.14);
      color: #7A4A00;
      border: 1px solid rgba(251,191,36,.30);
      font-size: 13px;
      font-weight: 750;
      white-space: nowrap;
    }

    .standings-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr);
      gap: 24px;
      align-items: start;
    }

    .table-card,
    .side-card,
    .trend-card,
    .rule-card,
    .faq-card,
    .contact-card {
      background: var(--card);
      border: 1px solid rgba(15,122,59,.10);
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .table-card {
      padding: 14px;
    }

    .table-toolbar {
      padding: 12px 12px 20px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      flex-wrap: wrap;
    }

    .table-toolbar h3 {
      margin: 0;
      font-size: 22px;
      color: var(--green-850);
    }

    .table-toolbar p {
      margin: 3px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(15,122,59,.12);
      background: var(--green-50);
      color: var(--green-800);
      font-weight: 800;
      font-size: 12px;
      white-space: nowrap;
    }

    .badge.hot {
      color: #8A3A05;
      background: rgba(249,115,22,.12);
      border-color: rgba(249,115,22,.22);
    }

    .badge.dark {
      color: var(--green-800);
      background: #fff;
      border-color: rgba(15,122,59,.20);
    }

    .standings-table-wrap {
      overflow-x: auto;
      border-radius: 22px;
      border: 1px solid rgba(15,122,59,.10);
    }

    .standings-table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      min-width: 760px;
      background: #fff;
    }

    .standings-table th,
    .standings-table td {
      padding: 15px 14px;
      text-align: left;
      border-bottom: 1px solid rgba(15,122,59,.10);
      vertical-align: middle;
      font-size: 14px;
    }

    .standings-table th {
      background: #F4F8F1;
      color: var(--muted);
      font-size: 12px;
      letter-spacing: .4px;
      font-weight: 850;
    }

    .standings-table tr:last-child td {
      border-bottom: 0;
    }

    .standings-table tbody tr {
      transition: background .18s ease, transform .18s ease;
    }

    .standings-table tbody tr:hover {
      background: rgba(34,197,94,.055);
    }

    .rank {
      width: 34px;
      height: 34px;
      display: inline-grid;
      place-items: center;
      border-radius: 12px;
      background: var(--green-50);
      color: var(--green-800);
      font-weight: 900;
      font-variant-numeric: tabular-nums;
      border: 1px solid rgba(15,122,59,.10);
    }

    .rank.top {
      background: linear-gradient(135deg, rgba(251,191,36,.22), rgba(34,197,94,.16));
      color: #7A4A00;
      border-color: rgba(251,191,36,.34);
    }

    .team-cell {
      display: flex;
      align-items: center;
      gap: 10px;
      min-width: 150px;
      font-weight: 850;
      color: var(--green-850);
    }

    .crest {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      display: inline-grid;
      place-items: center;
      background: var(--gradient-main);
      color: #fff;
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 8px 18px rgba(15,122,59,.18);
    }

    .num {
      font-variant-numeric: tabular-nums;
      font-weight: 800;
    }

    .points {
      color: var(--orange-500);
      font-weight: 950;
      font-size: 16px;
    }

    .form-bars {
      display: inline-flex;
      align-items: end;
      gap: 4px;
      height: 22px;
    }

    .form-bars i {
      width: 8px;
      border-radius: 999px;
      display: block;
      background: var(--line);
    }

    .form-bars .win { background: var(--green-500); }
    .form-bars .draw { background: var(--yellow-500); }
    .form-bars .lose { background: #A5B4AA; }

    .side-stack {
      display: grid;
      gap: 18px;
    }

    .side-card {
      padding: 24px;
    }

    .side-card h3 {
      margin-bottom: 10px;
      color: var(--green-850);
      font-size: 21px;
    }

    .side-card p {
      color: var(--muted);
      margin-bottom: 16px;
      font-size: 14px;
    }

    .leader-list {
      display: grid;
      gap: 12px;
    }

    .leader-item {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid rgba(15,122,59,.10);
      background: var(--bg);
      border-radius: 16px;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .leader-item:hover {
      transform: translateY(-2px);
      border-color: rgba(34,197,94,.35);
      box-shadow: 0 14px 28px rgba(16,32,22,.08);
    }

    .leader-item strong {
      color: var(--green-850);
      font-size: 14px;
    }

    .leader-item span {
      color: var(--muted);
      font-size: 12px;
    }

    .leader-score {
      color: var(--orange-500);
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .image-card {
      position: relative;
      overflow: hidden;
      min-height: 260px;
      border-radius: var(--radius-xl);
      box-shadow: var(--shadow);
      border: 1px solid rgba(15,122,59,.10);
    }

    .image-card img {
      width: 100%;
      height: 100%;
      min-height: 260px;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .image-card:hover img {
      transform: scale(1.04);
    }

    .image-card-overlay {
      position: absolute;
      inset: auto 0 0;
      padding: 28px;
      background: linear-gradient(0deg, rgba(11,26,18,.88), rgba(11,26,18,0));
      color: #fff;
    }

    .image-card-overlay h3 {
      margin-bottom: 6px;
      font-size: 23px;
    }

    .image-card-overlay p {
      color: rgba(255,255,255,.80);
      margin-bottom: 0;
      font-size: 14px;
    }

    .trend-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 18px;
    }

    .trend-card {
      padding: 24px;
      transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
      position: relative;
      overflow: hidden;
    }

    .trend-card::after {
      content: "";
      position: absolute;
      right: -32px;
      top: -32px;
      width: 110px;
      height: 110px;
      border-radius: 50%;
      background: rgba(34,197,94,.08);
    }

    .trend-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(34,197,94,.35);
    }

    .trend-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 16px;
      position: relative;
      z-index: 1;
    }

    .trend-card h3 {
      margin: 0;
      color: var(--green-850);
      font-size: 20px;
    }

    .trend-card p {
      color: var(--muted);
      margin-bottom: 16px;
      font-size: 14px;
      position: relative;
      z-index: 1;
    }

    .sparkline {
      height: 54px;
      display: flex;
      align-items: end;
      gap: 7px;
      padding: 10px 0 0;
      position: relative;
      z-index: 1;
    }

    .sparkline span {
      flex: 1;
      min-width: 10px;
      border-radius: 999px 999px 4px 4px;
      background: linear-gradient(180deg, var(--green-500), var(--green-700));
      box-shadow: 0 8px 16px rgba(15,122,59,.14);
    }

    .rules-layout {
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 24px;
      align-items: stretch;
    }

    .rule-card {
      padding: 28px;
    }

    .rule-card h3 {
      font-size: 22px;
      color: var(--green-850);
      margin-bottom: 12px;
    }

    .rule-card p {
      color: var(--muted);
      margin-bottom: 18px;
    }

    .rule-list {
      display: grid;
      gap: 12px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    .rule-list li {
      display: grid;
      grid-template-columns: 32px 1fr;
      gap: 12px;
      align-items: start;
      padding: 12px;
      border-radius: 16px;
      background: var(--bg-soft);
      border: 1px solid rgba(15,122,59,.08);
    }

    .rule-list b {
      width: 32px;
      height: 32px;
      border-radius: 12px;
      display: inline-grid;
      place-items: center;
      background: var(--green-700);
      color: #fff;
      font-size: 13px;
    }

    .rule-list span {
      color: var(--muted);
      font-size: 14px;
    }

    .summary-board {
      padding: 28px;
      border-radius: var(--radius-xl);
      background: var(--gradient-night);
      color: #fff;
      box-shadow: var(--shadow);
      position: relative;
      overflow: hidden;
    }

    .summary-board::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 88% 18%, rgba(251,191,36,.24), transparent 24%),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
      background-size: auto, 54px 54px;
      opacity: .8;
    }

    .summary-board > * {
      position: relative;
      z-index: 1;
    }

    .summary-board h3 {
      font-size: 25px;
      margin-bottom: 10px;
    }

    .summary-board p {
      color: rgba(255,255,255,.78);
      margin-bottom: 22px;
    }

    .summary-items {
      display: grid;
      gap: 12px;
    }

    .summary-item {
      display: flex;
      justify-content: space-between;
      gap: 14px;
      padding: 14px;
      border-radius: 18px;
      background: rgba(255,255,255,.09);
      border: 1px solid rgba(255,255,255,.13);
    }

    .summary-item span {
      color: rgba(255,255,255,.72);
      font-size: 13px;
    }

    .summary-item strong {
      color: var(--yellow-500);
      font-variant-numeric: tabular-nums;
    }

    .compare-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 16px;
    }

    .compare-card {
      padding: 22px;
      border-radius: 24px;
      background: #fff;
      border: 1px solid rgba(15,122,59,.10);
      box-shadow: 0 14px 34px rgba(16,32,22,.07);
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .compare-card:hover {
      transform: translateY(-3px);
      border-color: rgba(34,197,94,.35);
      box-shadow: var(--shadow);
    }

    .compare-card h3 {
      font-size: 19px;
      color: var(--green-850);
      margin-bottom: 10px;
    }

    .compare-card p {
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 14px;
    }

    .compare-card ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 9px;
    }

    .compare-card li {
      color: var(--muted);
      font-size: 13px;
      display: flex;
      gap: 8px;
      align-items: flex-start;
    }

    .compare-card li::before {
      content: "";
      width: 8px;
      height: 8px;
      margin-top: 7px;
      border-radius: 50%;
      background: var(--green-500);
      flex: 0 0 auto;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .faq-card {
      padding: 22px;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    .faq-card:hover {
      transform: translateY(-2px);
      border-color: rgba(34,197,94,.35);
      box-shadow: var(--shadow-hover);
    }

    .faq-card h3 {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      color: var(--green-850);
      font-size: 17px;
      margin-bottom: 10px;
    }

    .faq-card h3 span {
      width: 26px;
      height: 26px;
      border-radius: 10px;
      background: var(--green-50);
      color: var(--green-700);
      display: inline-grid;
      place-items: center;
      flex: 0 0 auto;
      font-size: 13px;
      font-weight: 900;
    }

    .faq-card p {
      color: var(--muted);
      margin-bottom: 0;
      font-size: 14px;
      line-height: 1.8;
    }

    .contact-wrap {
      padding: 72px 0 88px;
    }

    .contact-card {
      background: var(--gradient-night);
      color: #fff;
      padding: 34px;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 32px;
      position: relative;
      overflow: hidden;
    }

    .contact-card::before {
      content: "";
      position: absolute;
      width: 360px;
      height: 360px;
      right: -120px;
      top: -150px;
      background: radial-gradient(circle, rgba(251,191,36,.24), transparent 62%);
    }

    .contact-text,
    .contact-form {
      position: relative;
      z-index: 1;
    }

    .contact-text h2 {
      color: #fff;
      margin-bottom: 12px;
    }

    .contact-text p {
      color: rgba(255,255,255,.78);
      margin-bottom: 22px;
    }

    .contact-points {
      display: grid;
      gap: 10px;
      padding: 0;
      margin: 0;
      list-style: none;
    }

    .contact-points li {
      display: flex;
      align-items: center;
      gap: 10px;
      color: rgba(255,255,255,.82);
    }

    .contact-points li::before {
      content: "✓";
      width: 22px;
      height: 22px;
      border-radius: 999px;
      display: inline-grid;
      place-items: center;
      background: rgba(251,191,36,.18);
      color: var(--yellow-500);
      font-weight: 900;
      font-size: 12px;
    }

    .contact-form {
      display: grid;
      gap: 12px;
      padding: 22px;
      border-radius: 24px;
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.13);
    }

    .form-row {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 12px;
    }

    .contact-form input,
    .contact-form textarea,
    .contact-form select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.18);
      outline: 0;
      border-radius: 16px;
      padding: 13px 14px;
      background: rgba(255,255,255,.92);
      color: var(--text);
      transition: box-shadow .22s ease, border-color .22s ease;
    }

    .contact-form textarea {
      min-height: 116px;
      resize: vertical;
    }

    .contact-form input:focus,
    .contact-form textarea:focus,
    .contact-form select:focus,
    .footer-search input:focus {
      border-color: var(--green-500);
      box-shadow: 0 0 0 4px rgba(34,197,94,.16);
    }

    .form-note {
      color: rgba(255,255,255,.70);
      font-size: 13px;
      margin: 0;
    }

    .btn-yellow {
      background: var(--yellow-500);
      color: #1F2A24;
      box-shadow: 0 14px 28px rgba(251,191,36,.22);
    }

    .btn-yellow:hover {
      transform: translateY(-2px);
      filter: brightness(1.03);
      box-shadow: 0 20px 38px rgba(251,191,36,.28);
    }

    .site-footer {
      background: #0B1A12;
      color: rgba(255,255,255,.80);
      padding-top: 58px;
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.25fr .75fr .75fr .8fr;
      gap: 34px;
      padding-bottom: 38px;
      border-bottom: 1px solid rgba(255,255,255,.10);
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 10px;
      color: #fff;
      font-weight: 900;
      font-size: 20px;
      margin-bottom: 14px;
    }

    .footer-about p {
      margin: 0 0 18px;
      color: rgba(255,255,255,.68);
      max-width: 410px;
      font-size: 14px;
    }

    .footer-search {
      display: flex;
      gap: 8px;
      max-width: 390px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .footer-search input {
      flex: 1;
      min-width: 0;
      border: 0;
      outline: 0;
      color: #fff;
      background: transparent;
      padding: 0 12px;
    }

    .footer-search input::placeholder {
      color: rgba(255,255,255,.45);
    }

    .footer-search button {
      border-radius: 999px;
      padding: 9px 15px;
      background: var(--yellow-500);
      color: var(--green-900);
      font-weight: 850;
    }

    .footer-col h3 {
      color: #fff;
      font-size: 16px;
      margin: 0 0 14px;
    }

    .footer-links {
      display: grid;
      gap: 9px;
    }

    .footer-links a {
      color: rgba(255,255,255,.64);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: #A7F3C4;
      transform: translateX(3px);
    }

    .footer-bottom {
      padding: 22px 0 26px;
      text-align: center;
      display: grid;
      gap: 7px;
      color: rgba(255,255,255,.56);
      font-size: 12.5px;
    }

    .footer-bottom a {
      color: rgba(255,255,255,.68);
    }

    .footer-bottom a:hover {
      color: #A7F3C4;
    }

    @media (max-width: 1120px) {
      .nav-main {
        grid-template-columns: 220px 1fr;
      }

      .quick-links {
        grid-column: 1 / -1;
        justify-content: flex-start;
        overflow-x: auto;
        scrollbar-width: none;
      }

      .quick-links::-webkit-scrollbar { display: none; }

      .hero-content,
      .standings-layout,
      .rules-layout,
      .contact-card {
        grid-template-columns: 1fr;
      }

      .league-switch-card {
        max-width: 720px;
      }

      .trend-grid,
      .compare-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 768px) {
      .container {
        width: min(100% - 32px, var(--container));
      }

      .site-header {
        position: sticky;
      }

      .nav-shell {
        padding: 12px 0 10px;
      }

      .nav-main {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
      }

      .logo {
        align-self: flex-start;
      }

      .nav-search form {
        height: 48px;
      }

      .quick-links {
        padding-bottom: 2px;
      }

      .quick-links a {
        background: rgba(34,197,94,.08);
      }

      .page-hero {
        padding: 24px 0 50px;
      }

      .hero-panel {
        padding: 28px 20px;
        border-radius: 26px;
      }

      .hero-metrics {
        grid-template-columns: 1fr;
      }

      .section {
        padding: 52px 0;
      }

      .section-head {
        flex-direction: column;
        align-items: flex-start;
      }

      .notice {
        white-space: normal;
      }

      .trend-grid,
      .faq-grid,
      .compare-grid {
        grid-template-columns: 1fr;
      }

      .form-row {
        grid-template-columns: 1fr;
      }

      .contact-card {
        padding: 24px;
        border-radius: 24px;
      }

      .footer-main {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 520px) {
      .logo-text strong {
        font-size: 18px;
      }

      .logo-text span {
        font-size: 11px;
      }

      .search-submit {
        padding: 0 13px;
      }

      .hero-actions .btn,
      .cta-actions .btn,
      .contact-form .btn {
        width: 100%;
      }

      .league-switch-card,
      .side-card,
      .rule-card,
      .trend-card {
        padding: 18px;
        border-radius: 22px;
      }

      .table-card {
        margin-left: -4px;
        margin-right: -4px;
      }

      .footer-search {
        border-radius: 18px;
        flex-direction: column;
      }

      .footer-search input {
        min-height: 40px;
      }
    }

/* roulang page: category5 */
:root {
      --green-900: #0B1A12;
      --green-800: #102016;
      --green-700: #0F7A3B;
      --green-600: #16A34A;
      --green-500: #22C55E;
      --green-100: #DCFCE7;
      --green-50: #EEF6EA;
      --yellow: #FBBF24;
      --orange: #F97316;
      --text: #1F2A24;
      --muted: #647067;
      --weak: #8A978E;
      --bg: #FAFCF7;
      --bg-soft: #F4F8F1;
      --border: #DCE8D6;
      --border-strong: rgba(15, 122, 59, .18);
      --white: #FFFFFF;
      --shadow: 0 18px 45px rgba(16, 32, 22, .10);
      --shadow-hover: 0 22px 56px rgba(16, 32, 22, .16);
      --radius-xl: 28px;
      --radius-lg: 22px;
      --radius-md: 16px;
      --radius-sm: 12px;
      --gradient-main: linear-gradient(135deg, #0F7A3B 0%, #22C55E 55%, #FBBF24 100%);
      --gradient-soft: linear-gradient(135deg, rgba(34,197,94,.12), rgba(251,191,36,.16));
      --gradient-dark: linear-gradient(135deg, #0B1A12 0%, #12351F 72%, #1D5D31 100%);
      --container: 1240px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 8%, rgba(34, 197, 94, .12), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(251, 191, 36, .13), transparent 28%),
        var(--bg);
      line-height: 1.75;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
    }

    img {
      max-width: 100%;
      display: block;
    }

    button,
    input,
    textarea,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 0;
    }

    input,
    textarea,
    select {
      outline: none;
    }

    ::selection {
      background: rgba(34, 197, 94, .24);
    }

    .container {
      width: min(100% - 48px, var(--container));
      margin: 0 auto;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(250, 252, 247, .96);
      border-bottom: 1px solid rgba(15, 122, 59, .12);
      box-shadow: 0 12px 32px rgba(16, 32, 22, .06);
    }

    .nav-shell {
      padding: 14px 0 12px;
    }

    .nav-main {
      display: grid;
      grid-template-columns: 240px minmax(280px, 1fr) auto;
      align-items: center;
      gap: 20px;
    }

    .logo {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      min-width: 0;
    }

    .logo:hover {
      transform: translateY(-1px);
    }

    .logo:hover .logo-mark {
      transform: rotate(-4deg) scale(1.03);
    }

    .logo-mark {
      width: 46px;
      height: 46px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 17px;
      color: var(--white);
      font-weight: 900;
      background:
        linear-gradient(45deg, rgba(255,255,255,.18) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.18) 50%, rgba(255,255,255,.18) 75%, transparent 75%),
        var(--gradient-main);
      background-size: 14px 14px, auto;
      box-shadow: 0 12px 24px rgba(15, 122, 59, .22);
      transition: transform .25s ease;
    }

    .logo-text {
      display: flex;
      flex-direction: column;
      line-height: 1.2;
    }

    .logo-text strong {
      font-size: 21px;
      letter-spacing: .02em;
      color: var(--green-800);
    }

    .logo-text span {
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      white-space: nowrap;
    }

    .nav-search form {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      height: 50px;
      padding: 5px;
      border: 1px solid rgba(15, 122, 59, .16);
      border-radius: 999px;
      background: var(--white);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.8), 0 10px 28px rgba(16,32,22,.06);
      transition: border-color .2s ease, box-shadow .2s ease;
    }

    .nav-search form:focus-within {
      border-color: rgba(34, 197, 94, .75);
      box-shadow: 0 0 0 4px rgba(34,197,94,.16), 0 14px 32px rgba(16,32,22,.08);
    }

    .search-icon {
      width: 42px;
      text-align: center;
      color: var(--green-700);
      font-size: 22px;
      font-weight: 800;
    }

    .nav-search input {
      min-width: 0;
      flex: 1;
      border: 0;
      color: var(--text);
      background: transparent;
      font-size: 15px;
    }

    .nav-search input::placeholder {
      color: #88958B;
    }

    .search-submit {
      height: 38px;
      padding: 0 20px;
      border-radius: 999px;
      color: var(--green-900);
      font-weight: 800;
      background: var(--yellow);
      transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
    }

    .search-submit:hover {
      transform: translateY(-1px);
      filter: brightness(1.04);
      box-shadow: 0 10px 20px rgba(251, 191, 36, .24);
    }

    .quick-links {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
      max-width: 360px;
    }

    .quick-links a {
      padding: 8px 11px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
      background: rgba(238, 246, 234, .74);
      border: 1px solid transparent;
    }

    .quick-links a:hover,
    .quick-links a.active {
      color: var(--green-700);
      border-color: rgba(34, 197, 94, .25);
      background: rgba(34, 197, 94, .10);
    }

    .category-nav {
      display: flex;
      gap: 10px;
      align-items: center;
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid rgba(15, 122, 59, .08);
      overflow-x: auto;
      scrollbar-width: thin;
      scrollbar-color: rgba(34,197,94,.4) transparent;
    }

    .category-nav a {
      flex: 0 0 auto;
      padding: 9px 15px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
      border: 1px solid rgba(15, 122, 59, .10);
      background: rgba(255,255,255,.72);
    }

    .category-nav a:hover,
    .category-nav a.active {
      color: var(--green-900);
      border-color: rgba(34, 197, 94, .36);
      background: var(--green-100);
      box-shadow: 0 8px 18px rgba(16,32,22,.06);
    }

    main {
      position: relative;
    }

    .breadcrumb {
      padding: 24px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .breadcrumb a {
      color: var(--green-700);
      font-weight: 700;
    }

    .breadcrumb span {
      margin: 0 8px;
      color: var(--weak);
    }

    .section {
      padding: 78px 0;
    }

    .section-tight {
      padding: 54px 0;
    }

    .section-head {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: 24px;
      margin-bottom: 28px;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-radius: 999px;
      color: var(--green-700);
      font-size: 13px;
      font-weight: 800;
      background: rgba(34, 197, 94, .10);
      border: 1px solid rgba(34, 197, 94, .18);
    }

    .eyebrow::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--green-500);
      box-shadow: 0 0 0 4px rgba(34,197,94,.13);
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 18px;
      font-size: clamp(32px, 4.8vw, 54px);
      line-height: 1.12;
      letter-spacing: -.04em;
      color: var(--green-900);
      font-weight: 900;
    }

    h2 {
      margin-bottom: 12px;
      font-size: clamp(25px, 3.3vw, 38px);
      line-height: 1.22;
      letter-spacing: -.03em;
      color: var(--green-900);
      font-weight: 850;
    }

    h3 {
      margin-bottom: 10px;
      color: var(--green-800);
      font-size: 21px;
      line-height: 1.35;
      font-weight: 800;
    }

    .lead {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.9;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 46px;
      padding: 12px 20px;
      border-radius: 999px;
      font-weight: 850;
      border: 1px solid transparent;
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, background .2s ease, border-color .2s ease;
    }

    .btn-primary {
      color: var(--white);
      background: var(--gradient-main);
      box-shadow: 0 14px 28px rgba(15,122,59,.22);
    }

    .btn-primary:hover {
      transform: translateY(-2px);
      filter: brightness(1.04);
      box-shadow: var(--shadow-hover);
    }

    .btn-secondary {
      color: var(--green-800);
      background: var(--white);
      border-color: rgba(15, 122, 59, .18);
      box-shadow: 0 10px 22px rgba(16,32,22,.07);
    }

    .btn-secondary:hover {
      transform: translateY(-2px);
      border-color: rgba(34,197,94,.38);
      color: var(--green-700);
    }

    .hero {
      padding: 48px 0 62px;
    }

    .hero-shell {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
      gap: 30px;
      padding: 36px;
      border-radius: 34px;
      background:
        linear-gradient(90deg, rgba(250,252,247,.96) 0%, rgba(250,252,247,.84) 45%, rgba(250,252,247,.68) 100%),
        url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: var(--shadow);
    }

    .hero-shell::before {
      content: "";
      position: absolute;
      inset: auto -80px -130px auto;
      width: 360px;
      height: 360px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(251,191,36,.30), rgba(34,197,94,.10) 55%, transparent 70%);
      pointer-events: none;
    }

    .hero-content,
    .hero-panel {
      position: relative;
      z-index: 1;
    }

    .hero-text {
      max-width: 660px;
      margin-bottom: 24px;
      color: #4F5C53;
      font-size: 18px;
      line-height: 1.9;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 28px 0;
    }

    .hero-search-card {
      margin-top: 26px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.82);
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: 0 14px 34px rgba(16,32,22,.08);
    }

    .hero-search-card label {
      display: block;
      margin-bottom: 10px;
      color: var(--green-800);
      font-weight: 850;
    }

    .profile-search {
      display: flex;
      gap: 10px;
    }

    .profile-search input {
      flex: 1;
      min-width: 0;
      height: 48px;
      padding: 0 16px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background: var(--bg);
      color: var(--text);
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .profile-search input:focus {
      border-color: rgba(34,197,94,.8);
      background: var(--white);
      box-shadow: 0 0 0 4px rgba(34,197,94,.16);
    }

    .profile-search button {
      padding: 0 18px;
      border-radius: 16px;
      color: var(--green-900);
      font-weight: 850;
      background: var(--yellow);
    }

    .hero-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 9px;
      margin-top: 14px;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 7px 11px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
      background: rgba(238,246,234,.9);
      border: 1px solid rgba(15,122,59,.10);
    }

    .tag.hot {
      color: #8A3D00;
      background: rgba(251,191,36,.20);
      border-color: rgba(251,191,36,.38);
    }

    .tag.green {
      color: var(--green-700);
      background: rgba(34,197,94,.12);
      border-color: rgba(34,197,94,.22);
    }

    .hero-panel {
      align-self: stretch;
      display: grid;
      grid-template-rows: auto 1fr;
      gap: 16px;
    }

    .cover-card {
      position: relative;
      overflow: hidden;
      min-height: 250px;
      border-radius: 28px;
      background: var(--green-900);
      box-shadow: 0 18px 40px rgba(16,32,22,.16);
    }

    .cover-card img {
      width: 100%;
      height: 100%;
      min-height: 250px;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .cover-card:hover img {
      transform: scale(1.04);
    }

    .cover-overlay {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 22px;
      color: var(--white);
      background: linear-gradient(180deg, rgba(11,26,18,.08) 0%, rgba(11,26,18,.78) 100%);
    }

    .cover-overlay h2 {
      margin: 10px 0 6px;
      color: var(--white);
      font-size: 28px;
    }

    .cover-overlay p {
      margin: 0;
      color: rgba(255,255,255,.82);
      font-size: 14px;
    }

    .mini-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .stat-card {
      padding: 16px;
      border-radius: 20px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: 0 12px 26px rgba(16,32,22,.07);
    }

    .stat-card strong {
      display: block;
      color: var(--orange);
      font-size: 26px;
      line-height: 1.1;
      font-weight: 950;
      font-variant-numeric: tabular-nums;
    }

    .stat-card span {
      display: block;
      margin-top: 6px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .filter-board {
      padding: 20px;
      border-radius: 28px;
      background: var(--white);
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: var(--shadow);
    }

    .filter-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      margin-top: 14px;
    }

    .filter-label {
      margin-right: 2px;
      color: var(--green-900);
      font-weight: 850;
    }

    .filter-pill {
      padding: 8px 13px;
      border-radius: 999px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 750;
      background: var(--bg-soft);
      border: 1px solid rgba(15,122,59,.10);
    }

    .filter-pill:hover,
    .filter-pill.active {
      color: var(--green-900);
      background: var(--green-100);
      border-color: rgba(34,197,94,.36);
      transform: translateY(-1px);
    }

    .teams-grid {
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      gap: 18px;
    }

    .team-card {
      position: relative;
      overflow: hidden;
      grid-column: span 4;
      min-height: 310px;
      padding: 22px;
      border-radius: 26px;
      background:
        linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,255,255,.88)),
        repeating-linear-gradient(90deg, transparent 0 34px, rgba(15,122,59,.05) 34px 35px),
        var(--white);
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: 0 14px 32px rgba(16,32,22,.07);
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }

    .team-card.featured {
      grid-column: span 6;
      min-height: 350px;
      background:
        linear-gradient(135deg, rgba(11,26,18,.87), rgba(18,53,31,.72)),
        url("/assets/images/coverpic/cover-7.webp") center/cover no-repeat;
      color: rgba(255,255,255,.82);
    }

    .team-card:hover {
      transform: translateY(-5px);
      border-color: rgba(34,197,94,.38);
      box-shadow: var(--shadow-hover);
    }

    .team-card.featured h3,
    .team-card.featured .team-title strong,
    .team-card.featured .team-meta b {
      color: var(--white);
    }

    .team-card.featured .team-league,
    .team-card.featured p,
    .team-card.featured .team-meta span {
      color: rgba(255,255,255,.78);
    }

    .team-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 18px;
    }

    .team-badge {
      width: 62px;
      height: 62px;
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 22px;
      color: var(--white);
      font-size: 24px;
      font-weight: 950;
      background: var(--gradient-main);
      box-shadow: 0 14px 26px rgba(15,122,59,.22);
    }

    .team-card:nth-child(3n) .team-badge {
      background: linear-gradient(135deg, #12351F, #16A34A 62%, #F97316);
    }

    .team-title {
      flex: 1;
      min-width: 0;
    }

    .team-title strong {
      display: block;
      color: var(--green-900);
      font-size: 22px;
      line-height: 1.2;
      font-weight: 900;
    }

    .team-league {
      display: block;
      margin-top: 5px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 750;
    }

    .follow-btn {
      flex: 0 0 auto;
      padding: 8px 12px;
      border-radius: 999px;
      color: var(--green-700);
      font-size: 13px;
      font-weight: 850;
      background: rgba(34,197,94,.10);
      border: 1px solid rgba(34,197,94,.22);
    }

    .follow-btn:hover {
      color: var(--green-900);
      background: rgba(251,191,36,.24);
      border-color: rgba(251,191,36,.40);
    }

    .team-card p {
      margin-bottom: 18px;
      color: var(--muted);
      font-size: 15px;
    }

    .team-meta {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin: 18px 0;
    }

    .team-meta span {
      display: block;
      padding: 12px;
      border-radius: 16px;
      color: var(--muted);
      font-size: 12px;
      background: rgba(238,246,234,.72);
      border: 1px solid rgba(15,122,59,.08);
    }

    .team-meta b {
      display: block;
      margin-bottom: 4px;
      color: var(--green-800);
      font-size: 16px;
      font-weight: 900;
      font-variant-numeric: tabular-nums;
    }

    .form-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: auto;
    }

    .trend {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 28px;
      height: 28px;
      border-radius: 10px;
      color: var(--green-900);
      font-size: 12px;
      font-weight: 900;
      background: rgba(34,197,94,.16);
      border: 1px solid rgba(34,197,94,.24);
    }

    .trend.draw {
      background: rgba(251,191,36,.20);
      border-color: rgba(251,191,36,.35);
    }

    .trend.loss {
      color: #45524A;
      background: rgba(100,112,103,.12);
      border-color: rgba(100,112,103,.16);
    }

    .insight-wrap {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 22px;
      align-items: stretch;
    }

    .insight-card {
      overflow: hidden;
      border-radius: 28px;
      background: var(--white);
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: var(--shadow);
    }

    .insight-image {
      height: 230px;
      overflow: hidden;
    }

    .insight-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .insight-card:hover .insight-image img {
      transform: scale(1.04);
    }

    .insight-body {
      padding: 24px;
    }

    .check-list {
      display: grid;
      gap: 12px;
      margin: 18px 0 0;
      padding: 0;
      list-style: none;
    }

    .check-list li {
      display: grid;
      grid-template-columns: 28px 1fr;
      gap: 10px;
      align-items: start;
      color: var(--muted);
      font-size: 15px;
    }

    .check-list li::before {
      content: "✓";
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px;
      height: 26px;
      border-radius: 10px;
      color: var(--green-900);
      font-weight: 950;
      background: rgba(34,197,94,.16);
    }

    .recommend-grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr .9fr;
      gap: 18px;
    }

    .recommend-card {
      position: relative;
      overflow: hidden;
      min-height: 270px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      border-radius: 26px;
      color: var(--white);
      background: var(--green-900);
      box-shadow: var(--shadow);
    }

    .recommend-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(11,26,18,.14), rgba(11,26,18,.82));
      z-index: 1;
    }

    .recommend-card img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .45s ease;
    }

    .recommend-card:hover img {
      transform: scale(1.05);
    }

    .recommend-body {
      position: relative;
      z-index: 2;
    }

    .recommend-body h3 {
      color: var(--white);
    }

    .recommend-body p {
      margin-bottom: 0;
      color: rgba(255,255,255,.80);
      font-size: 14px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 16px;
    }

    .faq-item {
      padding: 22px;
      border-radius: 22px;
      background: var(--white);
      border: 1px solid rgba(15,122,59,.12);
      box-shadow: 0 12px 28px rgba(16,32,22,.06);
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }

    .faq-item:hover {
      transform: translateY(-3px);
      border-color: rgba(34,197,94,.36);
      box-shadow: var(--shadow);
    }

    .faq-item h3 {
      display: flex;
      gap: 10px;
      align-items: flex-start;
      font-size: 18px;
    }

    .faq-item h3::before {
      content: attr(data-no);
      flex: 0 0 auto;
      width: 28px;
      height: 28px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      color: var(--green-900);
      font-size: 13px;
      font-weight: 950;
      background: rgba(251,191,36,.26);
    }

    .faq-item p {
      margin-bottom: 0;
      color: var(--muted);
      font-size: 15px;
    }

    .contact-cta {
      position: relative;
      overflow: hidden;
      padding: 34px;
      border-radius: 32px;
      background:
        linear-gradient(135deg, rgba(11,26,18,.94), rgba(18,53,31,.90)),
        url("/assets/images/backpic/back-3.webp") center/cover no-repeat;
      color: rgba(255,255,255,.82);
      box-shadow: 0 22px 55px rgba(11,26,18,.20);
    }

    .contact-cta::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(251,191,36,.10) 1px, transparent 1px),
        linear-gradient(0deg, rgba(251,191,36,.08) 1px, transparent 1px);
      background-size: 44px 44px;
      opacity: .5;
      pointer-events: none;
    }

    .contact-grid {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-columns: .9fr 1.1fr;
      gap: 28px;
      align-items: center;
    }

    .contact-cta h2 {
      color: var(--white);
    }

    .contact-cta p {
      color: rgba(255,255,255,.78);
    }

    .contact-form {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 18px;
      border-radius: 24px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.13);
    }

    .field {
      display: flex;
      flex-direction: column;
      gap: 7px;
    }

    .field.full {
      grid-column: 1 / -1;
    }

    .field label {
      color: rgba(255,255,255,.86);
      font-size: 13px;
      font-weight: 800;
    }

    .field input,
    .field textarea,
    .field select {
      width: 100%;
      border: 1px solid rgba(255,255,255,.16);
      border-radius: 15px;
      color: var(--white);
      background: rgba(255,255,255,.10);
      padding: 12px 14px;
      transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }

    .field textarea {
      min-height: 92px;
      resize: vertical;
    }

    .field input::placeholder,
    .field textarea::placeholder {
      color: rgba(255,255,255,.54);
    }

    .field input:focus,
    .field textarea:focus,
    .field select:focus {
      border-color: rgba(251,191,36,.8);
      box-shadow: 0 0 0 4px rgba(251,191,36,.14);
      background: rgba(255,255,255,.14);
    }

    .field select option {
      color: var(--text);
    }

    .submit-yellow {
      grid-column: 1 / -1;
      min-height: 48px;
      border-radius: 16px;
      color: var(--green-900);
      font-weight: 950;
      background: var(--yellow);
      transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
    }

    .submit-yellow:hover {
      transform: translateY(-2px);
      filter: brightness(1.04);
      box-shadow: 0 14px 30px rgba(251,191,36,.24);
    }

    .form-note {
      grid-column: 1 / -1;
      margin: 0;
      color: rgba(255,255,255,.62);
      font-size: 13px;
    }

    .site-footer {
      margin-top: 76px;
      background: var(--green-900);
      color: rgba(255,255,255,.76);
    }

    .footer-main {
      display: grid;
      grid-template-columns: 1.35fr .75fr .75fr .8fr;
      gap: 32px;
      padding: 54px 0 34px;
    }

    .footer-logo {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
      color: var(--white);
      font-size: 22px;
      font-weight: 900;
    }

    .footer-about p {
      max-width: 430px;
      color: rgba(255,255,255,.68);
      font-size: 14px;
    }

    .footer-search {
      display: flex;
      gap: 8px;
      max-width: 390px;
      margin-top: 18px;
      padding: 6px;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
    }

    .footer-search input {
      min-width: 0;
      flex: 1;
      padding: 0 14px;
      border: 0;
      color: var(--white);
      background: transparent;
    }

    .footer-search input::placeholder {
      color: rgba(255,255,255,.46);
    }

    .footer-search button {
      padding: 9px 15px;
      border-radius: 999px;
      color: var(--green-900);
      font-weight: 900;
      background: var(--yellow);
    }

    .footer-col h3 {
      margin: 0 0 14px;
      color: var(--white);
      font-size: 16px;
    }

    .footer-links {
      display: grid;
      gap: 9px;
    }

    .footer-links a {
      color: rgba(255,255,255,.66);
      font-size: 14px;
    }

    .footer-links a:hover {
      color: var(--yellow);
      transform: translateX(3px);
    }

    .footer-bottom {
      display: grid;
      gap: 8px;
      justify-items: center;
      padding: 20px 0 26px;
      color: rgba(255,255,255,.55);
      font-size: 12.5px;
      text-align: center;
      border-top: 1px solid rgba(255,255,255,.10);
    }

    .footer-bottom a {
      color: rgba(220,252,231,.72);
    }

    .footer-bottom a:hover {
      color: var(--yellow);
    }

    @media (max-width: 1080px) {
      .nav-main {
        grid-template-columns: 220px 1fr;
      }

      .quick-links {
        grid-column: 1 / -1;
        justify-content: flex-start;
        max-width: none;
      }

      .hero-shell {
        grid-template-columns: 1fr;
      }

      .teams-grid {
        grid-template-columns: repeat(6, 1fr);
      }

      .team-card,
      .team-card.featured {
        grid-column: span 3;
      }

      .recommend-grid,
      .footer-main {
        grid-template-columns: repeat(2, 1fr);
      }

      .contact-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .container {
        width: min(100% - 32px, var(--container));
      }

      .nav-main {
        grid-template-columns: 1fr;
        gap: 12px;
      }

      .logo {
        justify-content: flex-start;
      }

      .nav-search form {
        height: 48px;
      }

      .quick-links {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 2px;
      }

      .category-nav {
        margin-left: -16px;
        margin-right: -16px;
        padding-left: 16px;
        padding-right: 16px;
      }

      .section {
        padding: 56px 0;
      }

      .section-head {
        grid-template-columns: 1fr;
        align-items: start;
      }

      .hero {
        padding-top: 28px;
      }

      .hero-shell {
        padding: 24px;
        border-radius: 28px;
      }

      .profile-search {
        flex-direction: column;
      }

      .profile-search button {
        height: 46px;
      }

      .mini-stats {
        grid-template-columns: 1fr;
      }

      .teams-grid {
        grid-template-columns: 1fr;
      }

      .team-card,
      .team-card.featured {
        grid-column: auto;
      }

      .team-meta {
        grid-template-columns: 1fr;
      }

      .insight-wrap,
      .faq-grid,
      .recommend-grid,
      .footer-main {
        grid-template-columns: 1fr;
      }

      .contact-form {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 520px) {
      .logo-text strong {
        font-size: 19px;
      }

      .logo-text span {
        font-size: 11px;
      }

      .search-submit {
        padding: 0 14px;
      }

      .hero-actions .btn,
      .btn {
        width: 100%;
      }

      .hero-shell,
      .contact-cta {
        padding: 20px;
      }

      .cover-overlay h2 {
        font-size: 23px;
      }

      .filter-row {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
      }

      .filter-pill,
      .filter-label {
        flex: 0 0 auto;
      }

      .footer-search {
        border-radius: 18px;
        flex-direction: column;
      }

      .footer-search button {
        width: 100%;
      }
    }

/* roulang page: category6 */
:root{
      --green-900:#0B1A12;
      --green-800:#102016;
      --green-700:#0F7A3B;
      --green-600:#16A34A;
      --green-500:#22C55E;
      --green-100:#EEF6EA;
      --green-50:#F4F8F1;
      --cream:#FAFCF7;
      --yellow:#FBBF24;
      --orange:#F97316;
      --text:#1F2A24;
      --muted:#667569;
      --light-muted:#8B9A8E;
      --border:#DCE8D6;
      --card:#FFFFFF;
      --shadow:0 18px 45px rgba(16,32,22,.10);
      --shadow-hover:0 22px 60px rgba(16,32,22,.16);
      --radius-xl:28px;
      --radius-lg:22px;
      --radius-md:16px;
      --radius-pill:999px;
      --gradient:linear-gradient(135deg,#0F7A3B 0%,#22C55E 55%,#FBBF24 100%);
      --soft-gradient:linear-gradient(135deg,rgba(34,197,94,.12),rgba(251,191,36,.16));
      --night-gradient:linear-gradient(135deg,#0B1A12 0%,#12351F 58%,#1C4D2B 100%);
      --container:1240px;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 8% 8%,rgba(34,197,94,.12),transparent 28%),
        radial-gradient(circle at 88% 18%,rgba(251,191,36,.13),transparent 26%),
        linear-gradient(180deg,var(--cream),var(--green-50) 46%,#fff);
      line-height:1.75;
      font-size:16px;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none}
    img{display:block;max-width:100%;height:auto}
    button,input,textarea,select{font:inherit}
    button{cursor:pointer;border:0}
    input,textarea,select{outline:none}
    ::selection{background:rgba(34,197,94,.22)}
    .container{width:min(var(--container),calc(100% - 48px));margin-inline:auto}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(250,252,247,.96);
      border-bottom:1px solid rgba(15,122,59,.12);
      box-shadow:0 10px 26px rgba(16,32,22,.06);
    }
    .nav-shell{padding:14px 0 10px}
    .nav-main{
      display:grid;
      grid-template-columns:250px minmax(320px,1fr) auto;
      align-items:center;
      gap:18px;
    }
    .logo{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
      transition:transform .25s ease;
    }
    .logo:hover{transform:translateY(-1px)}
    .logo:hover .logo-mark{transform:rotate(-4deg) scale(1.04)}
    .logo-mark{
      width:46px;
      height:46px;
      border-radius:17px;
      display:inline-grid;
      place-items:center;
      color:#fff;
      font-weight:900;
      background:var(--gradient);
      box-shadow:0 12px 28px rgba(15,122,59,.25);
      position:relative;
      flex:0 0 auto;
      transition:transform .25s ease;
    }
    .logo-mark::after{
      content:"";
      position:absolute;
      width:24px;
      height:10px;
      border:2px solid rgba(255,255,255,.76);
      border-top:0;
      border-radius:0 0 20px 20px;
      bottom:8px;
      left:50%;
      transform:translateX(-50%);
    }
    .logo-text{display:flex;flex-direction:column;line-height:1.2}
    .logo-text strong{font-size:20px;color:var(--green-800);letter-spacing:.02em}
    .logo-text span{font-size:12px;color:var(--muted);margin-top:3px}
    .nav-search form{
      display:flex;
      align-items:center;
      gap:10px;
      min-height:50px;
      border:1px solid rgba(15,122,59,.18);
      background:#fff;
      border-radius:var(--radius-pill);
      padding:6px 8px 6px 18px;
      box-shadow:0 12px 30px rgba(16,32,22,.07);
      transition:border-color .25s ease,box-shadow .25s ease;
    }
    .nav-search form:focus-within{
      border-color:rgba(34,197,94,.75);
      box-shadow:0 0 0 4px rgba(34,197,94,.16),0 14px 32px rgba(16,32,22,.08);
    }
    .search-icon{
      color:var(--green-700);
      font-size:22px;
      line-height:1;
      font-weight:800;
    }
    .nav-search input{
      width:100%;
      border:0;
      color:var(--text);
      background:transparent;
      min-width:80px;
    }
    .nav-search input::placeholder{color:#95A393}
    .search-submit{
      padding:10px 18px;
      border-radius:var(--radius-pill);
      color:#102016;
      font-weight:800;
      background:linear-gradient(135deg,#FBBF24,#FFE08A);
      transition:transform .2s ease,box-shadow .2s ease,filter .2s ease;
      white-space:nowrap;
    }
    .search-submit:hover{transform:translateY(-2px);filter:saturate(1.05);box-shadow:0 10px 22px rgba(251,191,36,.28)}
    .quick-links{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:4px;
      white-space:nowrap;
    }
    .quick-links a{
      padding:9px 10px;
      border-radius:var(--radius-pill);
      color:var(--muted);
      font-size:14px;
      font-weight:700;
      transition:background .2s ease,color .2s ease,transform .2s ease;
    }
    .quick-links a:hover{
      color:var(--green-700);
      background:rgba(34,197,94,.10);
      transform:translateY(-1px);
    }
    .category-nav{
      display:flex;
      gap:10px;
      overflow-x:auto;
      scrollbar-width:none;
      padding-top:12px;
    }
    .category-nav::-webkit-scrollbar{display:none}
    .category-nav a{
      flex:0 0 auto;
      padding:9px 15px;
      border-radius:var(--radius-pill);
      border:1px solid rgba(15,122,59,.12);
      color:var(--green-800);
      background:rgba(255,255,255,.72);
      font-size:14px;
      font-weight:800;
      transition:all .2s ease;
    }
    .category-nav a:hover,
    .category-nav a.active{
      color:#fff;
      background:var(--green-700);
      border-color:var(--green-700);
      box-shadow:0 10px 22px rgba(15,122,59,.18);
    }
    main{overflow:hidden}
    .breadcrumb{
      padding:28px 0 0;
      font-size:14px;
      color:var(--muted);
    }
    .breadcrumb a{color:var(--green-700);font-weight:800}
    .breadcrumb span{margin:0 8px;color:#93A190}
    .section{padding:82px 0}
    .section-tight{padding:58px 0}
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:24px;
      margin-bottom:28px;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 12px;
      border-radius:var(--radius-pill);
      color:var(--green-700);
      background:rgba(34,197,94,.10);
      border:1px solid rgba(34,197,94,.18);
      font-weight:850;
      font-size:13px;
    }
    .eyebrow::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--yellow);
      box-shadow:0 0 0 5px rgba(251,191,36,.16);
    }
    h1,h2,h3{line-height:1.18;color:var(--green-800)}
    h1{font-size:clamp(32px,4.4vw,54px);font-weight:900;letter-spacing:-.04em}
    h2{font-size:clamp(25px,3vw,36px);font-weight:850;letter-spacing:-.03em}
    h3{font-size:21px;font-weight:820}
    .lead{font-size:18px;color:var(--muted);max-width:720px}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:46px;
      padding:12px 20px;
      border-radius:var(--radius-pill);
      font-weight:850;
      transition:transform .22s ease,box-shadow .22s ease,background .22s ease,border-color .22s ease;
    }
    .btn-primary{background:var(--gradient);color:#fff;box-shadow:0 16px 34px rgba(15,122,59,.25)}
    .btn-primary:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(15,122,59,.32)}
    .btn-secondary{background:#fff;color:var(--green-700);border:1px solid rgba(15,122,59,.18)}
    .btn-secondary:hover{transform:translateY(-2px);border-color:rgba(34,197,94,.45);box-shadow:var(--shadow)}
    .btn-yellow{background:linear-gradient(135deg,#FBBF24,#FFE08A);color:#112016;box-shadow:0 16px 32px rgba(251,191,36,.22)}
    .btn-yellow:hover{transform:translateY(-2px);box-shadow:0 20px 42px rgba(251,191,36,.30)}
    .badge,.tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      border-radius:var(--radius-pill);
      font-size:13px;
      font-weight:800;
      padding:6px 10px;
      white-space:nowrap;
    }
    .badge{background:rgba(15,122,59,.08);color:var(--green-700);border:1px solid rgba(15,122,59,.12)}
    .tag-hot{background:rgba(249,115,22,.12);color:#C65410}
    .tag-topic{background:rgba(15,122,59,.08);color:var(--green-700);border:1px solid rgba(15,122,59,.18)}
    .tag-soft{background:#F5FAF1;color:var(--muted);border:1px solid var(--border)}
    .card{
      background:rgba(255,255,255,.92);
      border:1px solid rgba(15,122,59,.10);
      border-radius:var(--radius-lg);
      box-shadow:var(--shadow);
      transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
      overflow:hidden;
    }
    .card:hover{
      transform:translateY(-4px);
      box-shadow:var(--shadow-hover);
      border-color:rgba(34,197,94,.35);
    }
    .news-hero{
      padding:54px 0 78px;
      position:relative;
    }
    .news-hero::before{
      content:"";
      position:absolute;
      inset:0 0 110px 0;
      background:
        linear-gradient(90deg,rgba(250,252,247,.95),rgba(250,252,247,.70)),
        url("/assets/images/backpic/back-2.webp") center/cover no-repeat;
      z-index:-2;
    }
    .news-hero::after{
      content:"";
      position:absolute;
      right:-80px;
      top:70px;
      width:360px;
      height:360px;
      background:radial-gradient(circle,rgba(251,191,36,.22),transparent 66%);
      z-index:-1;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(360px,.72fr);
      gap:34px;
      align-items:stretch;
    }
    .hero-copy{
      padding:42px;
      border-radius:var(--radius-xl);
      background:linear-gradient(135deg,rgba(255,255,255,.92),rgba(244,248,241,.82));
      border:1px solid rgba(15,122,59,.12);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero-copy::after{
      content:"";
      position:absolute;
      right:-70px;
      bottom:-90px;
      width:250px;
      height:250px;
      border:18px solid rgba(15,122,59,.06);
      border-radius:50%;
    }
    .hero-copy h1{margin:18px 0 18px;max-width:800px}
    .hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0}
    .hero-metrics{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
      margin-top:26px;
      position:relative;
      z-index:1;
    }
    .metric{
      padding:15px;
      border-radius:18px;
      background:#fff;
      border:1px solid rgba(15,122,59,.10);
    }
    .metric strong{
      display:block;
      color:var(--orange);
      font-size:24px;
      font-variant-numeric:tabular-nums;
      line-height:1.1;
    }
    .metric span{font-size:13px;color:var(--muted);font-weight:700}
    .hero-board{
      background:var(--night-gradient);
      border-radius:var(--radius-xl);
      color:#fff;
      padding:22px;
      box-shadow:0 24px 58px rgba(11,26,18,.26);
      position:relative;
      overflow:hidden;
    }
    .hero-board::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px),
        linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
      background-size:34px 34px;
      opacity:.45;
    }
    .board-content{position:relative;z-index:1}
    .board-top{
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:18px;
    }
    .board-top h2{color:#fff;font-size:23px}
    .editor-card{
      border-radius:24px;
      overflow:hidden;
      background:rgba(255,255,255,.10);
      border:1px solid rgba(255,255,255,.14);
    }
    .editor-card img{
      width:100%;
      height:224px;
      object-fit:cover;
      filter:saturate(1.05);
      transition:transform .35s ease;
    }
    .editor-card:hover img{transform:scale(1.04)}
    .editor-card-body{padding:18px}
    .editor-card h3{color:#fff;font-size:22px;margin:10px 0 8px}
    .editor-card p{color:rgba(255,255,255,.76);font-size:14px}
    .short-list{
      display:grid;
      gap:10px;
      margin-top:14px;
    }
    .short-item{
      padding:12px;
      border-radius:18px;
      background:rgba(255,255,255,.09);
      border:1px solid rgba(255,255,255,.10);
      display:flex;
      gap:12px;
      align-items:center;
    }
    .short-item time{
      color:var(--yellow);
      font-weight:900;
      font-size:13px;
      min-width:42px;
      font-variant-numeric:tabular-nums;
    }
    .short-item strong{display:block;color:#fff;font-size:15px;line-height:1.35}
    .short-item span{display:block;color:rgba(255,255,255,.65);font-size:12px;margin-top:2px}
    .filter-row{
      display:flex;
      gap:10px;
      flex-wrap:wrap;
      margin-top:18px;
    }
    .filter-row a{
      padding:9px 14px;
      border-radius:var(--radius-pill);
      background:#fff;
      color:var(--green-800);
      border:1px solid rgba(15,122,59,.12);
      font-weight:800;
      font-size:14px;
      transition:all .2s ease;
    }
    .filter-row a:hover,.filter-row a.active{
      background:var(--green-700);
      color:#fff;
      border-color:var(--green-700);
      transform:translateY(-1px);
    }
    .feature-layout{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:24px;
      align-items:start;
    }
    .feature-main{
      display:grid;
      grid-template-columns:.95fr 1.05fr;
      min-height:430px;
    }
    .feature-main .img-wrap{overflow:hidden}
    .feature-main img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .35s ease;
    }
    .feature-main:hover img{transform:scale(1.04)}
    .feature-text{padding:30px}
    .feature-text h2{margin:12px 0 12px}
    .meta-line{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin:16px 0;
      color:var(--muted);
      font-size:13px;
      font-weight:750;
    }
    .feature-side{
      display:grid;
      gap:16px;
    }
    .mini-news{
      padding:18px;
      display:grid;
      gap:10px;
      background:#fff;
    }
    .mini-news h3{font-size:19px}
    .mini-news p{color:var(--muted);font-size:14px}
    .news-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 330px;
      gap:26px;
      align-items:start;
    }
    .news-groups{
      display:grid;
      gap:28px;
    }
    .group-card{
      padding:24px;
      border-radius:var(--radius-xl);
      background:#fff;
      border:1px solid rgba(15,122,59,.10);
      box-shadow:var(--shadow);
    }
    .group-title{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin-bottom:18px;
      padding-bottom:14px;
      border-bottom:1px solid var(--border);
    }
    .group-title h2{font-size:26px}
    .article-list{
      display:grid;
      gap:14px;
    }
    .article-item{
      display:grid;
      grid-template-columns:138px minmax(0,1fr);
      gap:16px;
      padding:12px;
      border-radius:20px;
      background:linear-gradient(135deg,#fff,#FAFCF7);
      border:1px solid rgba(15,122,59,.08);
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
    }
    .article-item:hover{
      transform:translateY(-3px);
      border-color:rgba(34,197,94,.30);
      box-shadow:0 14px 30px rgba(16,32,22,.08);
    }
    .article-thumb{
      border-radius:16px;
      overflow:hidden;
      min-height:104px;
      background:var(--green-100);
    }
    .article-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      aspect-ratio:4/3;
      transition:transform .3s ease;
    }
    .article-item:hover img{transform:scale(1.05)}
    .article-body h3{
      font-size:19px;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
      margin-bottom:7px;
    }
    .article-body p{
      color:var(--muted);
      font-size:14px;
      line-height:1.65;
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .read-link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--green-700);
      font-weight:850;
      margin-top:10px;
      font-size:14px;
    }
    .read-link span{transition:transform .2s ease}
    .read-link:hover span{transform:translateX(3px)}
    .sidebar{
      position:sticky;
      top:152px;
      display:grid;
      gap:18px;
    }
    .side-card{
      padding:22px;
      border-radius:var(--radius-xl);
      background:#fff;
      border:1px solid rgba(15,122,59,.10);
      box-shadow:var(--shadow);
    }
    .side-card h2,.side-card h3{font-size:22px;margin-bottom:14px}
    .tag-cloud{display:flex;flex-wrap:wrap;gap:9px}
    .topic-list{display:grid;gap:10px}
    .topic-list a{
      padding:12px;
      border-radius:16px;
      background:var(--green-50);
      border:1px solid rgba(15,122,59,.08);
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:center;
      color:var(--green-800);
      font-weight:800;
      transition:all .2s ease;
    }
    .topic-list a:hover{
      color:var(--green-700);
      border-color:rgba(34,197,94,.32);
      transform:translateX(2px);
    }
    .subscribe-card{
      background:var(--night-gradient);
      color:#fff;
      overflow:hidden;
      position:relative;
    }
    .subscribe-card::after{
      content:"";
      position:absolute;
      width:180px;
      height:180px;
      right:-70px;
      top:-70px;
      border-radius:50%;
      border:20px solid rgba(251,191,36,.12);
    }
    .subscribe-card h3{color:#fff}
    .subscribe-card p{color:rgba(255,255,255,.72);font-size:14px}
    .subscribe-card form{display:grid;gap:10px;margin-top:16px;position:relative;z-index:1}
    .subscribe-card input{
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.10);
      color:#fff;
      padding:12px 14px;
      border-radius:14px;
    }
    .subscribe-card input::placeholder{color:rgba(255,255,255,.58)}
    .subscribe-card input:focus{box-shadow:0 0 0 4px rgba(251,191,36,.16);border-color:rgba(251,191,36,.65)}
    .pill-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .pillar{
      padding:24px;
      min-height:220px;
      position:relative;
      overflow:hidden;
    }
    .pillar::after{
      content:"";
      position:absolute;
      right:-28px;
      bottom:-28px;
      width:120px;
      height:120px;
      border:14px solid rgba(15,122,59,.06);
      border-radius:50%;
    }
    .pillar .icon{
      width:46px;
      height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      background:var(--soft-gradient);
      color:var(--green-700);
      font-size:22px;
      margin-bottom:16px;
      font-weight:900;
    }
    .pillar h3{margin-bottom:10px}
    .pillar p{color:var(--muted);font-size:14px}
    .process{
      background:
        linear-gradient(135deg,rgba(255,255,255,.86),rgba(238,246,234,.82)),
        url("/assets/images/backpic/back-3.webp") center/cover no-repeat;
      border-block:1px solid rgba(15,122,59,.10);
    }
    .process-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:16px;
    }
    .step{
      padding:24px;
      border-radius:var(--radius-lg);
      background:rgba(255,255,255,.92);
      border:1px solid rgba(15,122,59,.10);
      box-shadow:0 16px 34px rgba(16,32,22,.08);
    }
    .step-num{
      width:36px;
      height:36px;
      border-radius:14px;
      background:var(--green-700);
      color:#fff;
      display:grid;
      place-items:center;
      font-weight:900;
      margin-bottom:14px;
      font-variant-numeric:tabular-nums;
    }
    .step p{color:var(--muted);font-size:14px;margin-top:8px}
    .faq-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }
    .faq-item{
      padding:20px;
      border-radius:var(--radius-lg);
      background:#fff;
      border:1px solid rgba(15,122,59,.10);
      box-shadow:0 12px 26px rgba(16,32,22,.06);
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .faq-item.open{
      border-color:rgba(34,197,94,.45);
      box-shadow:0 16px 34px rgba(16,32,22,.10);
    }
    .faq-q{
      width:100%;
      background:transparent;
      display:flex;
      justify-content:space-between;
      gap:16px;
      align-items:flex-start;
      color:var(--green-800);
      font-weight:850;
      text-align:left;
      font-size:17px;
    }
    .faq-q span:last-child{
      width:28px;
      height:28px;
      border-radius:50%;
      background:var(--green-50);
      display:grid;
      place-items:center;
      flex:0 0 auto;
      color:var(--green-700);
      transition:transform .2s ease,background .2s ease;
    }
    .faq-item.open .faq-q span:last-child{transform:rotate(45deg);background:rgba(34,197,94,.16)}
    .faq-a{
      display:none;
      color:var(--muted);
      font-size:14px;
      line-height:1.82;
      padding-top:12px;
    }
    .faq-item.open .faq-a{display:block}
    .contact-cta{
      padding:76px 0;
      background:var(--night-gradient);
      color:#fff;
      position:relative;
      overflow:hidden;
    }
    .contact-cta::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 15% 30%,rgba(251,191,36,.20),transparent 28%),
        linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
      background-size:auto,42px 42px;
    }
    .cta-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:.88fr 1fr;
      gap:34px;
      align-items:center;
    }
    .cta-copy h2{color:#fff;margin:14px 0}
    .cta-copy p{color:rgba(255,255,255,.74);font-size:17px}
    .contact-form{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
      padding:24px;
      border-radius:var(--radius-xl);
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.14);
      box-shadow:0 22px 58px rgba(0,0,0,.16);
    }
    .contact-form label{display:grid;gap:7px;color:rgba(255,255,255,.86);font-size:13px;font-weight:800}
    .contact-form input,.contact-form select,.contact-form textarea{
      width:100%;
      border:1px solid rgba(255,255,255,.16);
      background:rgba(255,255,255,.10);
      color:#fff;
      border-radius:15px;
      padding:12px 13px;
    }
    .contact-form select option{color:var(--text)}
    .contact-form textarea{min-height:112px;resize:vertical}
    .contact-form input::placeholder,.contact-form textarea::placeholder{color:rgba(255,255,255,.48)}
    .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{
      border-color:rgba(34,197,94,.75);
      box-shadow:0 0 0 4px rgba(34,197,94,.16);
    }
    .full{grid-column:1/-1}
    .form-note{color:rgba(255,255,255,.58);font-size:12px}
    .site-footer{
      background:#07150D;
      color:rgba(255,255,255,.78);
      padding-top:60px;
    }
    .footer-main{
      display:grid;
      grid-template-columns:1.25fr .8fr .8fr .9fr;
      gap:34px;
      padding-bottom:40px;
    }
    .footer-logo{
      display:flex;
      align-items:center;
      gap:10px;
      color:#fff;
      font-size:20px;
      font-weight:900;
      margin-bottom:14px;
    }
    .footer-about p{color:rgba(255,255,255,.66);max-width:430px;font-size:14px}
    .footer-search{
      display:flex;
      gap:8px;
      margin-top:18px;
      background:rgba(255,255,255,.08);
      padding:7px;
      border-radius:var(--radius-pill);
      border:1px solid rgba(255,255,255,.10);
    }
    .footer-search input{
      flex:1;
      min-width:0;
      border:0;
      background:transparent;
      color:#fff;
      padding:9px 12px;
    }
    .footer-search input::placeholder{color:rgba(255,255,255,.45)}
    .footer-search button{
      border-radius:var(--radius-pill);
      background:var(--yellow);
      color:#142016;
      font-weight:900;
      padding:8px 14px;
      transition:transform .2s ease;
    }
    .footer-search button:hover{transform:translateY(-1px)}
    .footer-col h3{
      color:#fff;
      font-size:17px;
      margin-bottom:14px;
    }
    .footer-links{display:grid;gap:9px}
    .footer-links a{
      color:rgba(255,255,255,.66);
      font-size:14px;
      transition:color .2s ease,transform .2s ease;
    }
    .footer-links a:hover{
      color:#86EFAC;
      transform:translateX(2px);
    }
    .footer-bottom{
      border-top:1px solid rgba(255,255,255,.10);
      padding:22px 0 26px;
      text-align:center;
      display:grid;
      gap:8px;
      color:rgba(255,255,255,.55);
      font-size:12.5px;
    }
    .footer-bottom a{color:rgba(255,255,255,.66)}
    .footer-bottom a:hover{color:#86EFAC}
    @media (max-width:1080px){
      .nav-main{grid-template-columns:230px 1fr}
      .quick-links{grid-column:1/-1;justify-content:flex-start;overflow-x:auto;padding-bottom:2px}
      .hero-grid,.feature-layout,.news-layout,.cta-grid{grid-template-columns:1fr}
      .sidebar{position:static;grid-template-columns:repeat(3,1fr)}
      .pill-grid,.process-grid{grid-template-columns:repeat(2,1fr)}
      .footer-main{grid-template-columns:1fr 1fr}
    }
    @media (max-width:768px){
      .container{width:min(100% - 32px,var(--container))}
      .nav-main{grid-template-columns:1fr}
      .logo-text strong{font-size:18px}
      .nav-search form{min-height:48px}
      .quick-links{display:none}
      .category-nav{padding-top:10px}
      .news-hero{padding:34px 0 52px}
      .hero-copy{padding:26px}
      .hero-metrics{grid-template-columns:1fr}
      .section{padding:58px 0}
      .section-head{display:grid;gap:12px}
      .feature-main{grid-template-columns:1fr}
      .feature-main img{height:240px}
      .article-item{grid-template-columns:112px 1fr;gap:12px}
      .sidebar{grid-template-columns:1fr}
      .faq-grid{grid-template-columns:1fr}
      .contact-form{grid-template-columns:1fr}
      .footer-main{grid-template-columns:1fr}
    }
    @media (max-width:520px){
      body{font-size:15px}
      .container{width:min(100% - 24px,var(--container))}
      .logo-mark{width:42px;height:42px;border-radius:15px}
      .search-submit{padding:9px 13px}
      .category-nav a{padding:8px 12px}
      .hero-copy{padding:22px}
      .hero-actions .btn{width:100%}
      .board-top{align-items:flex-start;gap:10px;flex-direction:column}
      .filter-row{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
      .feature-text{padding:22px}
      .pill-grid,.process-grid{grid-template-columns:1fr}
      .article-item{grid-template-columns:1fr}
      .article-thumb img{height:170px}
      .group-card{padding:18px}
      .group-title{align-items:flex-start;flex-direction:column}
      .footer-search{border-radius:18px;align-items:stretch;flex-direction:column}
      .footer-search button{width:100%}
    }