/* roulang page: index */
:root{
      --bg:#090d12;
      --bg2:#0f141a;
      --panel:#131a22;
      --panel-2:#171f29;
      --panel-3:#1b2430;
      --text:#edf3f7;
      --muted:#98a6b8;
      --soft:#728094;
      --line:#243244;
      --line-2:#2d3b50;
      --primary:#31e1b0;
      --primary-2:#18c98a;
      --accent:#8a6cff;
      --warn:#f3b34f;
      --danger:#ff6b6b;
      --shadow:0 24px 70px rgba(0,0,0,.38);
      --shadow-soft:0 12px 34px rgba(0,0,0,.22);
      --radius:18px;
      --radius-sm:14px;
      --radius-xs:10px;
      --container:1320px;
      --gap:clamp(16px, 2vw, 28px);
      --header-h:78px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      line-height:1.6;
      background:
        radial-gradient(circle at 18% 18%, rgba(49,225,176,.08), transparent 22%),
        radial-gradient(circle at 82% 14%, rgba(138,108,255,.08), transparent 20%),
        linear-gradient(180deg, #070a0e 0%, #0b1016 28%, #090d12 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-2;
      background-image:
        linear-gradient(rgba(255,255,255,.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.02) 1px, transparent 1px),
        radial-gradient(circle at 1px 1px, rgba(255,255,255,.045) 1px, transparent 0);
      background-size:120px 120px, 120px 120px, 24px 24px;
      opacity:.22;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.58) 72%, transparent 100%);
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background:
        radial-gradient(circle at 20% 80%, rgba(49,225,176,.06), transparent 18%),
        radial-gradient(circle at 80% 78%, rgba(243,179,79,.05), transparent 16%);
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{
      border:0;
      background:none;
      color:inherit;
      cursor:pointer;
    }
    input,button{
      outline:none;
    }
    ::selection{background:rgba(49,225,176,.28);color:#fff}
    .container{
      width:min(calc(100% - 32px), var(--container));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:1000;
      border-bottom:1px solid rgba(255,255,255,.05);
      background:rgba(9,13,18,.78);
      backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);
    }
    .site-header.is-scrolled{
      box-shadow:0 10px 26px rgba(0,0,0,.22);
      background:rgba(9,13,18,.9);
    }
    .header-inner{
      position:relative;
      display:flex;
      align-items:center;
      gap:18px;
      min-height:var(--header-h);
      padding:14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      flex:0 0 auto;
      min-width:0;
    }
    .brand-mark{
      position:relative;
      width:42px;
      height:42px;
      border-radius:14px;
      background:
        radial-gradient(circle at 35% 35%, rgba(255,255,255,.25), transparent 28%),
        linear-gradient(145deg, rgba(49,225,176,.95), rgba(138,108,255,.85));
      box-shadow:0 10px 30px rgba(49,225,176,.24);
      flex:0 0 auto;
    }
    .brand-mark::before{
      content:"";
      position:absolute;
      inset:10px;
      border-radius:11px;
      border:1px solid rgba(255,255,255,.55);
      opacity:.9;
      transform:rotate(8deg);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .brand-text strong{
      display:block;
      font-size:15px;
      letter-spacing:.2px;
      line-height:1.18;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-text span{
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .nav-toggle{
      display:none;
      align-items:center;
      justify-content:center;
      width:42px;
      height:42px;
      border:1px solid rgba(255,255,255,.08);
      border-radius:12px;
      background:rgba(255,255,255,.03);
      color:var(--text);
    }
    .nav-toggle:hover{
      border-color:rgba(49,225,176,.42);
      box-shadow:0 0 0 3px rgba(49,225,176,.08);
    }
    .nav-toggle svg{width:20px;height:20px}
    .site-nav{
      display:flex;
      align-items:center;
      gap:14px;
      flex:1 1 auto;
      min-width:0;
    }
    .nav-links{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex:1 1 auto;
      min-width:0;
    }
    .nav-links a{
      position:relative;
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      font-size:14px;
      letter-spacing:.2px;
      transition:color .22s ease, background .22s ease, transform .22s ease, box-shadow .22s ease;
    }
    .nav-links a::after{
      content:"";
      position:absolute;
      left:16px;
      right:16px;
      bottom:7px;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, rgba(49,225,176,0), rgba(49,225,176,.9), rgba(138,108,255,.9));
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .22s ease;
      opacity:.95;
    }
    .nav-links a:hover,
    .nav-links a:focus-visible{
      color:var(--text);
      background:rgba(255,255,255,.03);
    }
    .nav-links a:hover::after,
    .nav-links a:focus-visible::after,
    .nav-links a.active::after{
      transform:scaleX(1);
    }
    .nav-links a.active{
      color:var(--text);
      background:rgba(49,225,176,.08);
      box-shadow:inset 0 0 0 1px rgba(49,225,176,.18);
    }
    .nav-tools{
      display:flex;
      align-items:center;
      gap:12px;
      flex:0 0 auto;
    }
    .search-box{
      position:relative;
      width:260px;
      flex:0 0 auto;
    }
    .search-box input{
      width:100%;
      height:42px;
      padding:0 44px 0 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--text);
      transition:border-color .22s ease, box-shadow .22s ease, background .22s ease;
    }
    .search-box input::placeholder{color:#728094}
    .search-box input:focus{
      border-color:rgba(49,225,176,.5);
      background:rgba(255,255,255,.05);
      box-shadow:0 0 0 4px rgba(49,225,176,.1);
    }
    .search-box button{
      position:absolute;
      right:6px;
      top:50%;
      transform:translateY(-50%);
      display:inline-flex;
      align-items:center;
      justify-content:center;
      width:30px;
      height:30px;
      border-radius:10px;
      color:var(--muted);
      background:transparent;
    }
    .search-box button:hover,
    .search-box button:focus-visible{
      color:var(--text);
      background:rgba(255,255,255,.06);
    }
    .status-pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 13px;
      border-radius:999px;
      border:1px solid rgba(49,225,176,.16);
      background:rgba(49,225,176,.06);
      color:#c9f8ec;
      font-size:13px;
      white-space:nowrap;
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
    }
    .status-dot{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 6px rgba(49,225,176,.12);
    }
    .hero{
      position:relative;
      padding:34px 0 22px;
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(7,10,14,.1) 0%, rgba(7,10,14,.36) 44%, rgba(7,10,14,.9) 100%),
        url('/assets/images/backpic/back-1.webp') center/cover no-repeat;
      opacity:.98;
      z-index:0;
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 8% 16%, rgba(49,225,176,.22), transparent 16%),
        radial-gradient(circle at 88% 12%, rgba(138,108,255,.18), transparent 18%),
        linear-gradient(90deg, rgba(9,13,18,.6), rgba(9,13,18,.14) 44%, rgba(9,13,18,.5));
      z-index:0;
    }
    .hero .container{
      position:relative;
      z-index:1;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
      gap:24px;
      align-items:stretch;
      min-height:620px;
    }
    .hero-copy{
      display:flex;
      flex-direction:column;
      justify-content:center;
      gap:18px;
      padding:34px 0 46px;
    }
    .hero-kicker{
      display:inline-flex;
      align-items:center;
      gap:10px;
      width:fit-content;
      padding:8px 12px;
      border-radius:999px;
      border:1px solid rgba(49,225,176,.18);
      background:rgba(9,13,18,.46);
      color:#d8fff4;
      font-size:13px;
      letter-spacing:.4px;
      box-shadow:0 10px 30px rgba(0,0,0,.14);
    }
    .hero-kicker .tiny-dot{
      width:7px;
      height:7px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 6px rgba(49,225,176,.12);
    }
    .hero h1{
      margin:0;
      max-width:12.2em;
      font-size:clamp(38px, 4.8vw, 66px);
      line-height:1.06;
      letter-spacing:-.02em;
      text-wrap:balance;
      text-shadow:0 14px 48px rgba(0,0,0,.4);
    }
    .hero-lead{
      margin:0;
      max-width:42rem;
      color:#d1d9e6;
      font-size:16px;
      line-height:1.9;
      text-shadow:0 8px 26px rgba(0,0,0,.25);
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      margin-top:6px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      min-height:48px;
      padding:0 18px;
      border-radius:14px;
      font-weight:600;
      letter-spacing:.2px;
      transition:transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      user-select:none;
    }
    .btn:hover{
      transform:translateY(-1px);
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--primary), var(--primary-2));
      color:#07120d;
      box-shadow:0 16px 32px rgba(49,225,176,.22);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      box-shadow:0 18px 38px rgba(49,225,176,.26);
    }
    .btn-secondary{
      border:1px solid rgba(255,255,255,.14);
      background:rgba(255,255,255,.03);
      color:var(--text);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      border-color:rgba(49,225,176,.34);
      background:rgba(49,225,176,.06);
    }
    .btn .arrow{
      width:22px;
      height:22px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      background:rgba(255,255,255,.12);
      transition:transform .2s ease, background .2s ease;
    }
    .btn-primary .arrow{
      background:rgba(7,18,13,.08);
    }
    .btn:hover .arrow{transform:translateX(2px)}
    .hero-note{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      color:#a8b5c6;
      font-size:13px;
      line-height:1.7;
    }
    .hero-note span{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
      backdrop-filter:blur(8px);
    }
    .hero-note i{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--warn);
      display:inline-block;
      box-shadow:0 0 0 6px rgba(243,179,79,.1);
    }
    .hero-panel{
      display:grid;
      grid-template-rows:auto 1fr;
      gap:16px;
      align-self:stretch;
      padding:14px 0 42px;
    }
    .signal-board,
    .image-card,
    .mini-stat,
    .promo-card,
    .panel-card,
    .topic-card,
    .faq-item,
    .cta-band,
    .info-card{
      background:linear-gradient(180deg, rgba(23,31,41,.96), rgba(16,22,30,.96));
      border:1px solid rgba(255,255,255,.07);
      box-shadow:var(--shadow-soft);
    }
    .signal-board{
      border-radius:22px;
      padding:18px;
      overflow:hidden;
    }
    .signal-top{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:14px;
      margin-bottom:14px;
    }
    .signal-top h3{
      margin:0;
      font-size:18px;
      line-height:1.3;
    }
    .signal-top p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:13px;
      line-height:1.7;
    }
    .signal-tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(49,225,176,.08);
      border:1px solid rgba(49,225,176,.15);
      color:#d7fff3;
      font-size:12px;
      white-space:nowrap;
    }
    .signal-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .mini-stat{
      border-radius:18px;
      padding:14px 14px 13px;
    }
    .mini-stat .label{
      font-size:12px;
      color:var(--muted);
      margin-bottom:8px;
      letter-spacing:.24px;
    }
    .mini-stat .value{
      font-size:18px;
      line-height:1.25;
      font-weight:700;
      color:#f2f7fb;
      margin:0 0 5px;
    }
    .mini-stat .desc{
      font-size:12px;
      color:#8d9aac;
      line-height:1.65;
    }
    .hero-media{
      display:grid;
      grid-template-columns:1fr;
      gap:16px;
    }
    .image-card{
      position:relative;
      border-radius:22px;
      overflow:hidden;
      min-height:214px;
      isolation:isolate;
    }
    .image-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(8,12,17,.05), rgba(8,12,17,.68));
      z-index:1;
    }
    .image-card img{
      width:100%;
      height:100%;
      object-fit:cover;
      transform:scale(1.01);
      transition:transform .45s ease;
    }
    .image-card:hover img{
      transform:scale(1.05);
    }
    .image-info{
      position:absolute;
      inset:auto 0 0 0;
      z-index:2;
      padding:16px 16px 15px;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:12px;
    }
    .image-info h4{
      margin:0 0 6px;
      font-size:17px;
      line-height:1.25;
      max-width:17ch;
    }
    .image-info p{
      margin:0;
      color:#d2dbe6;
      font-size:12px;
      line-height:1.6;
    }
    .image-chip{
      flex:0 0 auto;
      padding:8px 10px;
      border-radius:999px;
      background:rgba(9,13,18,.62);
      border:1px solid rgba(255,255,255,.12);
      color:#d9e4ef;
      font-size:12px;
      white-space:nowrap;
    }
    .hero-cards{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:16px;
    }
    .hero-mini{
      border-radius:20px;
      overflow:hidden;
      position:relative;
      min-height:178px;
    }
    .hero-mini img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .hero-mini::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(6,10,15,.1), rgba(6,10,15,.62));
    }
    .hero-mini span{
      position:absolute;
      left:14px;
      right:14px;
      bottom:12px;
      z-index:1;
      font-size:13px;
      color:#eef5fa;
      line-height:1.45;
      text-shadow:0 8px 24px rgba(0,0,0,.35);
    }
    .section{
      padding:30px 0;
      scroll-margin-top:96px;
    }
    .section-inner{
      position:relative;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:16px;
      margin-bottom:18px;
    }
    .section-title{
      display:flex;
      flex-direction:column;
      gap:8px;
      max-width:60ch;
    }
    .section-kicker{
      color:#9fd8c9;
      font-size:12px;
      letter-spacing:.28em;
      text-transform:uppercase;
    }
    .section-title h2{
      margin:0;
      font-size:clamp(24px, 2.4vw, 38px);
      line-height:1.16;
      letter-spacing:-.02em;
    }
    .section-title p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
    }
    .section-link{
      flex:0 0 auto;
      align-self:center;
      padding:10px 14px;
      border-radius:999px;
      color:#d7fff1;
      background:rgba(49,225,176,.08);
      border:1px solid rgba(49,225,176,.16);
      font-size:13px;
      transition:background .2s ease, transform .2s ease, border-color .2s ease;
    }
    .section-link:hover,
    .section-link:focus-visible{
      background:rgba(49,225,176,.12);
      border-color:rgba(49,225,176,.26);
      transform:translateY(-1px);
    }
    .highlight-grid{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:16px;
    }
    .info-card{
      border-radius:18px;
      padding:18px 18px 16px;
      position:relative;
      overflow:hidden;
      min-height:146px;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .info-card::before{
      content:"";
      position:absolute;
      inset:auto -18px -18px auto;
      width:90px;
      height:90px;
      border-radius:30px;
      background:radial-gradient(circle, rgba(49,225,176,.15), transparent 64%);
    }
    .info-card:hover{
      transform:translateY(-3px);
      border-color:rgba(49,225,176,.22);
      box-shadow:0 18px 40px rgba(0,0,0,.26);
    }
    .info-card .pill{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      color:#c7d4e5;
      border:1px solid rgba(255,255,255,.07);
      font-size:12px;
      margin-bottom:14px;
    }
    .info-card .pill i{
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 5px rgba(49,225,176,.12);
    }
    .info-card h3{
      margin:0 0 8px;
      font-size:18px;
      line-height:1.35;
    }
    .info-card p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.75;
      max-width:24ch;
    }
    .feature-layout{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(330px,.95fr);
      gap:20px;
      align-items:start;
    }
    .feature-main,
    .feature-side{
      display:grid;
      gap:20px;
    }
    .promo-card{
      border-radius:22px;
      overflow:hidden;
      display:grid;
      grid-template-columns:minmax(0, .96fr) minmax(220px, .9fr);
      min-height:336px;
    }
    .promo-copy{
      padding:24px;
      display:flex;
      flex-direction:column;
      gap:14px;
      justify-content:center;
    }
    .promo-copy .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
      color:#dae4f1;
      font-size:12px;
      white-space:nowrap;
    }
    .tag.primary{
      background:rgba(49,225,176,.08);
      border-color:rgba(49,225,176,.16);
      color:#d6fff2;
    }
    .tag.accent{
      background:rgba(138,108,255,.1);
      border-color:rgba(138,108,255,.18);
      color:#e6ddff;
    }
    .promo-copy h3{
      margin:0;
      font-size:clamp(22px, 2vw, 30px);
      line-height:1.18;
      text-wrap:balance;
    }
    .promo-copy p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.84;
      max-width:36ch;
    }
    .meta-line{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      margin-top:4px;
      color:#91a0b2;
      font-size:12px;
    }
    .meta-line span{
      display:inline-flex;
      align-items:center;
      gap:6px;
    }
    .meta-dot{
      width:6px;
      height:6px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 5px rgba(49,225,176,.1);
    }
    .promo-copy .btn{
      width:fit-content;
      margin-top:4px;
    }
    .promo-media{
      position:relative;
      min-height:100%;
      background:#111822;
      overflow:hidden;
    }
    .promo-media img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .promo-media::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, rgba(10,14,20,.08), rgba(10,14,20,.56)),
        linear-gradient(90deg, rgba(10,14,20,.22), transparent 46%);
      pointer-events:none;
    }
    .side-stack{
      display:grid;
      gap:16px;
    }
    .side-card{
      border-radius:20px;
      overflow:hidden;
      padding:0;
    }
    .side-card .side-cover{
      aspect-ratio:16/10;
      overflow:hidden;
    }
    .side-card .side-cover img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .45s ease;
    }
    .side-card:hover .side-cover img{transform:scale(1.05)}
    .side-card .side-body{
      padding:18px;
    }
    .side-card h3{
      margin:0 0 8px;
      font-size:19px;
      line-height:1.28;
    }
    .side-card p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
    }
    .side-card .meta-line{
      margin-top:12px;
    }
    .topic-grid{
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:16px;
    }
    .topic-card{
      overflow:hidden;
      border-radius:22px;
      transition:transform .24s ease, box-shadow .24s ease, border-color .24s ease;
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .topic-card:hover{
      transform:translateY(-4px);
      border-color:rgba(49,225,176,.22);
      box-shadow:0 22px 46px rgba(0,0,0,.3);
    }
    .topic-thumb{
      position:relative;
      aspect-ratio:16/10;
      overflow:hidden;
    }
    .topic-thumb img{
      width:100%;
      height:100%;
      object-fit:cover;
      transition:transform .45s ease;
    }
    .topic-card:hover .topic-thumb img{transform:scale(1.05)}
    .topic-thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(9,13,18,.08), rgba(9,13,18,.46));
    }
    .topic-body{
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:12px;
      flex:1;
    }
    .topic-body h3{
      margin:0;
      font-size:18px;
      line-height:1.34;
    }
    .topic-body p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
    }
    .topic-meta{
      margin-top:auto;
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      color:#8c9aac;
      font-size:12px;
    }
    .topic-meta span{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:7px 9px;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.07);
    }
    .split-grid{
      display:grid;
      grid-template-columns:minmax(0,1.02fr) minmax(320px,.98fr);
      gap:20px;
      align-items:start;
    }
    .panel-card{
      border-radius:22px;
      padding:22px;
    }
    .panel-card h3{
      margin:0 0 12px;
      font-size:22px;
      line-height:1.25;
    }
    .panel-card p{
      margin:0 0 16px;
      color:var(--muted);
      font-size:14px;
      line-height:1.85;
    }
    .check-list{
      display:grid;
      gap:12px;
      padding:0;
      margin:0;
      list-style:none;
    }
    .check-list li{
      position:relative;
      padding:14px 14px 14px 46px;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      color:#d9e3ee;
      font-size:14px;
      line-height:1.7;
    }
    .check-list li::before{
      content:"";
      position:absolute;
      left:16px;
      top:18px;
      width:12px;
      height:12px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--primary), var(--accent));
      box-shadow:0 0 0 5px rgba(49,225,176,.1);
    }
    .signal-panel{
      display:grid;
      gap:16px;
    }
    .signal-panel .preview{
      border-radius:20px;
      overflow:hidden;
      min-height:210px;
      position:relative;
    }
    .signal-panel .preview img{
      width:100%;
      height:100%;
      object-fit:cover;
    }
    .signal-panel .preview::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg, rgba(9,13,18,.12), rgba(9,13,18,.54));
    }
    .signal-panel .preview .caption{
      position:absolute;
      left:16px;
      right:16px;
      bottom:14px;
      z-index:1;
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:12px;
    }
    .signal-panel .preview .caption strong{
      display:block;
      font-size:16px;
      line-height:1.35;
      margin-bottom:4px;
    }
    .signal-panel .preview .caption span{
      color:#d7e0eb;
      font-size:12px;
      line-height:1.6;
    }
    .signal-grid-2{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .signal-mini{
      border-radius:18px;
      padding:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
    }
    .signal-mini .k{
      display:block;
      font-size:12px;
      color:#93a2b4;
      margin-bottom:8px;
    }
    .signal-mini strong{
      display:block;
      font-size:16px;
      line-height:1.35;
      margin-bottom:6px;
    }
    .signal-mini p{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.7;
    }
    .faq-grid{
      display:grid;
      gap:14px;
    }
    .faq-item{
      border-radius:20px;
      overflow:hidden;
    }
    .faq-item summary{
      position:relative;
      list-style:none;
      cursor:pointer;
      padding:18px 52px 18px 18px;
      font-size:16px;
      font-weight:600;
      line-height:1.45;
      color:var(--text);
      outline:none;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"＋";
      position:absolute;
      right:18px;
      top:50%;
      transform:translateY(-50%);
      width:26px;
      height:26px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:#dbe6f2;
      transition:transform .22s ease, background .22s ease, color .22s ease;
    }
    .faq-item[open] summary::after{
      content:"–";
      background:rgba(49,225,176,.08);
      color:#cafff3;
    }
    .faq-content{
      padding:0 18px 18px;
      color:var(--muted);
      font-size:14px;
      line-height:1.85;
    }
    .faq-content p{margin:0}
    .cta-band{
      border-radius:26px;
      overflow:hidden;
      position:relative;
      padding:28px;
      background:
        linear-gradient(135deg, rgba(49,225,176,.12), rgba(138,108,255,.12)),
        linear-gradient(180deg, rgba(18,24,31,.98), rgba(15,20,27,.98));
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:-1px;
      background:
        radial-gradient(circle at 12% 28%, rgba(49,225,176,.13), transparent 20%),
        radial-gradient(circle at 88% 10%, rgba(138,108,255,.14), transparent 18%);
      pointer-events:none;
    }
    .cta-inner{
      position:relative;
      z-index:1;
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:18px;
    }
    .cta-copy{
      max-width:64ch;
    }
    .cta-copy h2{
      margin:0 0 10px;
      font-size:clamp(24px, 2.6vw, 36px);
      line-height:1.15;
    }
    .cta-copy p{
      margin:0;
      color:#d0d9e5;
      font-size:15px;
      line-height:1.85;
    }
    .cta-actions{
      display:flex;
      gap:12px;
      flex:0 0 auto;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .site-footer{
      margin-top:14px;
      padding:34px 0 26px;
      border-top:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, rgba(9,13,18,.12), rgba(9,13,18,.96));
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr 1fr;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:12px;
    }
    .footer-brand strong{
      font-size:18px;
      line-height:1.3;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
      max-width:38ch;
    }
    .footer-links,
    .footer-notes{
      display:grid;
      gap:10px;
    }
    .footer-links h3,
    .footer-notes h3{
      margin:0;
      font-size:14px;
      color:#dbe6f2;
      line-height:1.4;
    }
    .footer-links a{
      width:fit-content;
      color:#aebccc;
      font-size:13px;
      line-height:1.7;
      transition:color .2s ease, transform .2s ease;
    }
    .footer-links a:hover,
    .footer-links a:focus-visible{
      color:#fff;
      transform:translateX(2px);
    }
    .footer-notes p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
    }
    .copyright{
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-top:18px;
      padding-top:18px;
      border-top:1px solid rgba(255,255,255,.06);
      color:#8392a4;
      font-size:12px;
    }
    .copyright span{
      display:inline-flex;
      align-items:center;
      gap:8px;
    }
    .copyright i{
      width:6px;
      height:6px;
      border-radius:999px;
      background:var(--primary);
      box-shadow:0 0 0 5px rgba(49,225,176,.08);
      display:inline-block;
    }
    .sr-only{
      position:absolute;
      width:1px;
      height:1px;
      padding:0;
      margin:-1px;
      overflow:hidden;
      clip:rect(0,0,0,0);
      white-space:nowrap;
      border:0;
    }
    @media (max-width: 1280px){
      .hero-grid{min-height:auto}
      .highlight-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .footer-grid{grid-template-columns:1fr 1fr}
    }
    @media (max-width: 1024px){
      .site-nav{gap:10px}
      .search-box{width:220px}
      .hero-grid,
      .feature-layout,
      .split-grid{
        grid-template-columns:1fr;
      }
      .hero-copy{padding:22px 0 8px}
      .hero-panel{padding:0 0 28px}
      .promo-card{grid-template-columns:1fr}
      .promo-media{min-height:220px}
      .cta-inner{flex-direction:column;align-items:flex-start}
      .cta-actions{justify-content:flex-start}
    }
    @media (max-width: 768px){
      .header-inner{flex-wrap:wrap;min-height:auto;padding:12px 0}
      .nav-toggle{display:inline-flex}
      .site-nav{
        order:3;
        width:100%;
        position:relative;
        justify-content:space-between;
      }
      .nav-links{
        display:none;
        position:absolute;
        top:8px;
        left:0;
        right:0;
        padding:12px;
        flex-direction:column;
        align-items:stretch;
        gap:6px;
        background:rgba(13,18,24,.98);
        border:1px solid rgba(255,255,255,.08);
        border-radius:18px;
        box-shadow:var(--shadow);
      }
      .nav-links.open{display:flex}
      .nav-links a{
        justify-content:flex-start;
        padding:12px 14px;
        border-radius:14px;
      }
      .nav-links a::after{display:none}
      .nav-tools{
        width:100%;
        justify-content:space-between;
        gap:10px;
      }
      .search-box{width:100%;max-width:100%}
      .status-pill{display:none}
      .hero{padding-top:18px}
      .hero h1{max-width:100%}
      .highlight-grid,
      .topic-grid,
      .signal-grid-2,
      .hero-cards,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .section-head{flex-direction:column;align-items:flex-start}
      .section-link{align-self:flex-start}
      .cta-band{padding:22px}
      .panel-card{padding:18px}
      .info-card{min-height:auto}
    }
    @media (max-width: 520px){
      .container{width:min(calc(100% - 20px), var(--container))}
      .brand-mark{width:38px;height:38px}
      .brand-text strong{font-size:14px}
      .brand-text span{font-size:11px}
      .hero{
        padding-top:14px;
      }
      .hero h1{
        font-size:clamp(31px, 10vw, 42px);
        line-height:1.08;
      }
      .hero-lead,
      .section-title p,
      .cta-copy p{
        font-size:14px;
        line-height:1.8;
      }
      .hero-actions,
      .cta-actions{
        width:100%;
      }
      .btn{
        width:100%;
        min-height:46px;
      }
      .signal-grid{
        grid-template-columns:1fr;
      }
      .image-info{
        flex-direction:column;
        align-items:flex-start;
      }
      .faq-item summary{
        font-size:15px;
        padding-right:48px;
      }
      .copyright{
        flex-direction:column;
        gap:8px;
      }
    }
    @media (prefers-reduced-motion: reduce){
      html{scroll-behavior:auto}
      *,*::before,*::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        transition-duration:.001ms!important;
        scroll-behavior:auto!important;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#0b0f14;
  --bg-2:#101722;
  --bg-3:#151e2b;
  --surface:#111924;
  --surface-2:#172131;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(69,240,193,.22);
  --text:#edf4ff;
  --muted:#9eabbc;
  --soft:#77869b;
  --accent:#45f0c1;
  --accent-2:#7c5cff;
  --accent-3:#ffb44d;
  --danger:#ff6b7a;
  --shadow:0 18px 45px rgba(0,0,0,.34);
  --shadow-soft:0 10px 30px rgba(0,0,0,.2);
  --radius:18px;
  --radius-sm:14px;
  --radius-lg:26px;
  --container:1280px;
  --gap:24px;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:
    radial-gradient(circle at top left, rgba(69,240,193,.06), transparent 24%),
    radial-gradient(circle at top right, rgba(124,92,255,.08), transparent 20%),
    linear-gradient(180deg, #0b0f14 0%, #0d121a 100%);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
  line-height:1.65;
  letter-spacing:.2px;
  overflow-x:hidden;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image: linear-gradient(180deg, rgba(0,0,0,.22), transparent 85%);
  opacity:.35;
  z-index:-1;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit}
button{cursor:pointer}
::selection{background:rgba(69,240,193,.22);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.container{
  width:min(var(--container), calc(100% - 32px));
  margin:0 auto;
}
.sr-only{
  position:absolute!important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);
  white-space:nowrap;border:0;
}
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(12px);
  background:rgba(11,15,20,.82);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.header-inner{
  display:flex;
  align-items:center;
  gap:18px;
  min-height:76px;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  flex:0 0 auto;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:14px;
  position:relative;
  background:
    linear-gradient(145deg, rgba(69,240,193,.96), rgba(124,92,255,.76));
  box-shadow:0 12px 28px rgba(69,240,193,.16);
  border:1px solid rgba(255,255,255,.14);
}
.brand-mark::before,
.brand-mark::after{
  content:"";
  position:absolute;
  inset:10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.34);
}
.brand-mark::after{
  inset:15px 10px 10px 15px;
  border-radius:10px 6px 12px 8px;
  border-color:rgba(255,255,255,.18);
}
.brand-text{
  display:flex;
  flex-direction:column;
  min-width:0;
}
.brand-text strong{
  font-size:1rem;
  line-height:1.25;
  letter-spacing:.4px;
}
.brand-text span{
  font-size:.82rem;
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.site-nav{
  display:flex;
  align-items:center;
  gap:18px;
  margin-left:auto;
  flex:1;
}
.nav-links{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.nav-links a{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 14px;
  color:var(--muted);
  border-radius:999px;
  transition:all .22s var(--ease);
  border:1px solid transparent;
}
.nav-links a:hover{
  color:var(--text);
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.08);
}
.nav-links a.active{
  color:var(--text);
  background:rgba(69,240,193,.09);
  border-color:rgba(69,240,193,.22);
  box-shadow:0 0 0 1px rgba(69,240,193,.06) inset;
}
.nav-links a.active::after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:7px;
  height:2px;
  border-radius:999px;
  background:linear-gradient(90deg, rgba(69,240,193,.0), rgba(69,240,193,1), rgba(124,92,255,1), rgba(69,240,193,.0));
}
.nav-tools{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;
}
.search-box{
  display:flex;
  align-items:center;
  gap:0;
  min-width:290px;
  height:42px;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.search-box:focus-within{
  border-color:rgba(69,240,193,.36);
  box-shadow:0 0 0 4px rgba(69,240,193,.08);
  background:rgba(255,255,255,.05);
}
.search-box input{
  flex:1;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
  padding:0 16px;
}
.search-box input::placeholder{color:#7f8ea3}
.search-box button{
  width:46px;
  height:100%;
  border:0;
  background:linear-gradient(180deg, rgba(69,240,193,.15), rgba(69,240,193,.07));
  color:var(--text);
  display:grid;
  place-items:center;
  border-left:1px solid rgba(255,255,255,.06);
}
.status-pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  min-height:42px;
  padding:0 14px;
  border-radius:999px;
  color:var(--text);
  background:rgba(124,92,255,.08);
  border:1px solid rgba(124,92,255,.16);
  font-size:.92rem;
  white-space:nowrap;
}
.status-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(69,240,193,.12);
}
.nav-toggle{
  display:none;
  width:46px;
  height:46px;
  border-radius:14px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text);
  align-items:center;
  justify-content:center;
}
.nav-toggle svg{width:22px;height:22px}
main{padding-bottom:28px}
.hero{
  position:relative;
  overflow:hidden;
  padding:34px 0 24px;
}
.hero-shell{
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(8,12,18,.12), rgba(8,12,18,.64)),
    url('/assets/images/backpic/back-2.webp') center/cover no-repeat;
  box-shadow:var(--shadow);
}
.hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, rgba(11,15,20,.86) 0%, rgba(11,15,20,.74) 48%, rgba(11,15,20,.5) 100%),
    linear-gradient(180deg, rgba(69,240,193,.08), transparent 30%, rgba(124,92,255,.12));
}
.hero-shell::after{
  content:"";
  position:absolute;
  inset:auto -8% -20% auto;
  width:280px;
  height:280px;
  background:radial-gradient(circle, rgba(69,240,193,.16), transparent 65%);
  filter:blur(4px);
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:24px;
  padding:30px;
  min-height:560px;
}
.crumb{
  display:flex;
  gap:10px;
  align-items:center;
  color:rgba(255,255,255,.75);
  font-size:.92rem;
  margin-bottom:18px;
}
.crumb a{color:rgba(255,255,255,.76)}
.crumb span{color:rgba(255,255,255,.42)}
.crumb strong{color:var(--accent)}
.hero-copy{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:28px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(69,240,193,.08);
  border:1px solid rgba(69,240,193,.2);
  color:#d9fffb;
  font-size:.88rem;
}
.kicker i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(69,240,193,.12);
}
.hero h1{
  margin:16px 0 14px;
  font-size:clamp(2.15rem, 3.8vw, 4.4rem);
  line-height:1.08;
  letter-spacing:.2px;
  max-width:11.5em;
}
.hero p{
  margin:0;
  max-width:42em;
  color:rgba(234,243,255,.82);
  font-size:1.02rem;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  margin-top:8px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 18px;
  border-radius:14px;
  border:1px solid transparent;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{
  background:linear-gradient(135deg, var(--accent), #79f5d0);
  color:#071016;
  box-shadow:0 18px 32px rgba(69,240,193,.16);
}
.btn-primary:hover{box-shadow:0 18px 36px rgba(69,240,193,.22)}
.btn-secondary{
  color:var(--text);
  border-color:rgba(255,255,255,.12);
  background:rgba(255,255,255,.03);
}
.btn-secondary:hover{
  border-color:rgba(69,240,193,.24);
  background:rgba(69,240,193,.06);
  box-shadow:0 10px 26px rgba(0,0,0,.2);
}
.hero-metrics{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  align-content:start;
}
.hero-panel{
  border-radius:24px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,17,24,.72);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.hero-cover{
  position:relative;
  min-height:270px;
  background:
    linear-gradient(180deg, rgba(12,17,24,.02), rgba(12,17,24,.64)),
    url('/assets/images/coverpic/cover-1.webp') center/cover no-repeat;
}
.hero-cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(11,15,20,.05), rgba(11,15,20,.72));
}
.hero-cover-content{
  position:absolute;
  inset:auto 18px 18px 18px;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.hero-cover-content strong{
  font-size:1.05rem;
}
.hero-cover-content span{
  color:rgba(255,255,255,.75);
  font-size:.92rem;
}
.scoreboard{
  padding:18px;
}
.scoreboard-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.scoreboard-top h2{
  margin:0;
  font-size:1rem;
}
.live-badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(69,240,193,.08);
  border:1px solid rgba(69,240,193,.16);
  color:#d9fffb;
  font-size:.82rem;
  white-space:nowrap;
}
.live-badge i{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(69,240,193,.12);
}
.score-row{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  gap:12px;
  align-items:center;
  margin:14px 0 10px;
}
.team{
  padding:14px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
}
.team small{
  display:block;
  color:var(--muted);
  margin-bottom:8px;
}
.team strong{
  display:block;
  font-size:1.02rem;
}
.vs{
  display:grid;
  place-items:center;
  width:64px;
  height:64px;
  border-radius:50%;
  background:linear-gradient(180deg, rgba(69,240,193,.15), rgba(124,92,255,.1));
  border:1px solid rgba(69,240,193,.18);
  box-shadow:0 14px 28px rgba(0,0,0,.22);
}
.vs span{
  font-size:1.08rem;
  font-weight:700;
  letter-spacing:1px;
}
.score-meta{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.score-line{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  font-size:.92rem;
  color:var(--muted);
}
.score-line strong{color:var(--text)}
.progress{
  width:100%;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  overflow:hidden;
}
.progress > i{
  display:block;
  height:100%;
  width:58%;
  border-radius:inherit;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
}
.section{
  padding:20px 0 4px;
}
.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:16px;
}
.section-head h2{
  margin:0;
  font-size:clamp(1.4rem, 2vw, 2rem);
  line-height:1.18;
}
.section-head p{
  margin:0;
  max-width:60ch;
  color:var(--muted);
}
.notice-strip{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  padding:15px 16px;
  margin-top:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  color:rgba(238,246,255,.84);
}
.notice-strip strong{
  color:var(--accent);
}
.highlights{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
}
.mini-card{
  position:relative;
  padding:18px 18px 17px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.mini-card:hover{
  transform:translateY(-3px);
  border-color:rgba(69,240,193,.2);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
}
.mini-card::after{
  content:"";
  position:absolute;
  right:-10px;
  top:-10px;
  width:78px;
  height:78px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(69,240,193,.16), transparent 68%);
}
.mini-top{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.mini-icon{
  width:38px;
  height:38px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:rgba(69,240,193,.08);
  border:1px solid rgba(69,240,193,.16);
  color:var(--accent);
}
.mini-card strong{
  display:block;
  font-size:1rem;
  margin-bottom:6px;
}
.mini-card p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.55;
}
.featured-grid{
  display:grid;
  grid-template-columns:1.5fr .95fr;
  gap:18px;
  align-items:start;
}
.featured-main{
  padding:0;
  overflow:hidden;
}
.featured-main .cover{
  position:relative;
  aspect-ratio:16/8.2;
  background:url('/assets/images/coverpic/cover-2.webp') center/cover no-repeat;
}
.featured-main .cover::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,14,19,.03), rgba(10,14,19,.74));
}
.featured-main .body{
  padding:20px 20px 22px;
}
.tag-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:30px;
  padding:0 10px;
  border-radius:999px;
  font-size:.82rem;
  color:#dafdf4;
  background:rgba(69,240,193,.08);
  border:1px solid rgba(69,240,193,.16);
}
.tag.purple{
  color:#ece6ff;
  background:rgba(124,92,255,.12);
  border-color:rgba(124,92,255,.18);
}
.tag.orange{
  color:#fff3df;
  background:rgba(255,180,77,.11);
  border-color:rgba(255,180,77,.18);
}
.featured-main h3{
  margin:0 0 10px;
  font-size:1.38rem;
  line-height:1.32;
}
.featured-main p{
  margin:0;
  color:var(--muted);
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px 18px;
  align-items:center;
  margin-top:16px;
  color:var(--soft);
  font-size:.92rem;
}
.meta-row span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.meta-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(69,240,193,.1);
}
.feature-side{
  display:grid;
  gap:16px;
}
.side-panel{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}
.side-panel h3{
  margin:0 0 12px;
  font-size:1.06rem;
}
.side-panel p{
  margin:0 0 12px;
  color:var(--muted);
}
.side-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}
.side-list li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:rgba(237,244,255,.88);
}
.side-list li i{
  width:9px;
  height:9px;
  border-radius:50%;
  margin-top:7px;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(69,240,193,.08);
  flex:0 0 auto;
}
.side-card{
  display:flex;
  gap:14px;
  align-items:center;
}
.side-card img{
  width:112px;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
}
.side-card h4{
  margin:0 0 8px;
  font-size:1rem;
  line-height:1.35;
}
.side-card p{
  margin:0;
  font-size:.92rem;
  color:var(--muted);
}
.card-grid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.topic-card{
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.topic-card:hover{
  transform:translateY(-3px);
  border-color:rgba(69,240,193,.2);
  box-shadow:0 18px 34px rgba(0,0,0,.26);
}
.topic-card .thumb{
  aspect-ratio:16/9;
  background:#111;
  overflow:hidden;
}
.topic-card .thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.topic-card .content{
  padding:16px 16px 18px;
}
.topic-card h3{
  margin:0 0 10px;
  font-size:1.05rem;
  line-height:1.35;
}
.topic-card p{
  margin:0;
  color:var(--muted);
  font-size:.93rem;
  line-height:1.6;
  min-height:4.8em;
}
.topic-card .meta-row{margin-top:14px}
.rules-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
}
.rule-card{
  padding:18px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
}
.rule-card .rule-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:12px;
}
.rule-card strong{
  font-size:1rem;
}
.rule-id{
  font-size:.8rem;
  color:var(--accent);
  border:1px solid rgba(69,240,193,.18);
  background:rgba(69,240,193,.08);
  padding:4px 9px;
  border-radius:999px;
}
.rule-card p{
  margin:0;
  color:var(--muted);
}
.rule-card ul{
  list-style:none;
  padding:0;
  margin:14px 0 0;
  display:grid;
  gap:10px;
}
.rule-card li{
  position:relative;
  padding-left:18px;
  color:rgba(234,243,255,.9);
}
.rule-card li::before{
  content:"";
  position:absolute;
  left:0;
  top:.68em;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent-3);
  box-shadow:0 0 0 4px rgba(255,180,77,.08);
}
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  padding:16px;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  box-shadow:var(--shadow-soft);
}
.filters .field{
  flex:1 1 240px;
  min-width:240px;
}
.filters input,
.filters select{
  width:100%;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(12,17,24,.8);
  color:var(--text);
  padding:0 14px;
  outline:0;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
}
.filters input::placeholder{color:#7f8ea3}
.filters input:focus,
.filters select:focus{
  border-color:rgba(69,240,193,.35);
  box-shadow:0 0 0 4px rgba(69,240,193,.08);
}
.filter-tags{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.filter-chip{
  min-height:40px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
  color:var(--muted);
  transition:all .2s var(--ease);
}
.filter-chip:hover,
.filter-chip.active{
  color:var(--text);
  border-color:rgba(69,240,193,.22);
  background:rgba(69,240,193,.08);
}
.results{
  display:grid;
  gap:14px;
}
.result-card{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap:0;
  overflow:hidden;
  border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.result-card:hover{
  transform:translateY(-3px);
  border-color:rgba(69,240,193,.2);
  box-shadow:0 18px 34px rgba(0,0,0,.26);
}
.result-thumb{
  min-height:100%;
  background:#10131a;
}
.result-thumb img{
  width:100%;
  height:100%;
  min-height:220px;
  object-fit:cover;
}
.result-body{
  padding:18px 18px 20px;
}
.result-body h3{
  margin:0 0 10px;
  font-size:1.08rem;
  line-height:1.36;
}
.result-body p{
  margin:0;
  color:var(--muted);
  line-height:1.62;
}
.result-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.pager{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:center;
  margin-top:20px;
}
.pager a,
.pager span{
  min-width:42px;
  height:42px;
  padding:0 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  color:var(--muted);
}
.pager a:hover{
  color:var(--text);
  border-color:rgba(69,240,193,.2);
  background:rgba(69,240,193,.08);
}
.pager .current{
  color:#081016;
  background:linear-gradient(135deg, var(--accent), #7cf4d4);
  border-color:transparent;
}
.faq-list{
  display:grid;
  gap:12px;
}
.faq-item{
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  overflow:hidden;
}
.faq-item summary{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 18px;
  font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"+";
  flex:0 0 auto;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--text);
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.faq-item[open] summary::after{content:"–"}
.faq-item .faq-body{
  padding:0 18px 18px;
  color:var(--muted);
}
.cta{
  margin:28px 0 18px;
}
.cta-box{
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(145deg, rgba(69,240,193,.11), rgba(124,92,255,.08)),
    rgba(255,255,255,.02);
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.cta-box h2{
  margin:0 0 8px;
  font-size:clamp(1.4rem, 2vw, 2rem);
}
.cta-box p{
  margin:0;
  color:rgba(232,240,250,.8);
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
}
.site-footer{
  margin-top:22px;
  border-top:1px solid rgba(255,255,255,.06);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.03));
}
.footer-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr .9fr;
  gap:24px;
  padding:28px 0 20px;
}
.footer-brand strong{
  display:block;
  font-size:1.05rem;
  margin-bottom:10px;
}
.footer-brand p,
.footer-notes p{
  margin:0;
  color:var(--muted);
}
.footer-links,
.footer-notes{
  display:grid;
  gap:10px;
}
.footer-links h3,
.footer-notes h3{
  margin:0 0 2px;
  font-size:1rem;
}
.footer-links a{
  width:max-content;
  color:rgba(234,243,255,.82);
  transition:color .2s var(--ease), transform .2s var(--ease);
}
.footer-links a:hover{
  color:var(--accent);
  transform:translateX(2px);
}
.copyright{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:12px;
  padding:16px 0 24px;
  color:var(--soft);
  font-size:.9rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.copyright span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.copyright i{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(69,240,193,.08);
}
@media (max-width: 1280px){
  .hero-grid{grid-template-columns:1.05fr .95fr}
  .card-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
  .rules-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width: 1024px){
  .header-inner{flex-wrap:wrap;padding:12px 0}
  .site-nav{
    width:100%;
    flex-basis:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:10px 0 16px;
  }
  .site-nav.is-open{display:flex}
  .nav-links,
  .nav-tools{
    width:100%;
    justify-content:flex-start;
    margin-left:0;
  }
  .search-box{min-width:0; flex:1}
  .nav-toggle{display:inline-flex;margin-left:auto}
  .hero-grid{grid-template-columns:1fr; min-height:auto}
  .hero h1{max-width:13em}
  .highlights{grid-template-columns:repeat(2, minmax(0,1fr))}
  .featured-grid{grid-template-columns:1fr}
  .result-card{grid-template-columns:1fr}
  .result-thumb img{min-height:210px}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 768px){
  .container{width:min(100% - 24px, var(--container))}
  .hero{padding:18px 0 18px}
  .hero-grid{padding:20px}
  .hero h1{font-size:clamp(1.9rem, 8vw, 3rem)}
  .hero p{font-size:.98rem}
  .highlights,
  .card-grid,
  .rules-grid,
  .footer-grid{grid-template-columns:1fr}
  .section-head,
  .cta-box{
    flex-direction:column;
    align-items:flex-start;
  }
  .cta-actions{justify-content:flex-start}
  .filters{padding:14px}
  .filters .field{flex-basis:100%; min-width:0}
}
@media (max-width: 520px){
  .header-inner{min-height:70px}
  .brand-text span{white-space:normal}
  .nav-links a{
    width:100%;
    justify-content:flex-start;
    border-radius:14px;
  }
  .status-pill{width:100%; justify-content:center}
  .hero-grid{padding:16px}
  .hero-shell{border-radius:22px}
  .score-row{grid-template-columns:1fr}
  .vs{width:54px;height:54px}
  .mini-card,
  .side-panel,
  .topic-card .content,
  .rule-card,
  .result-body,
  .cta-box{padding-left:16px;padding-right:16px}
  .hero-actions .btn{width:100%}
  .filters .field input,
  .filters .field select{height:44px}
  .pager a,
  .pager span{min-width:40px;height:40px}
}
@media (max-width: 480px){
  .brand-mark{width:38px;height:38px}
  .brand-text strong{font-size:.96rem}
  .hero h1{max-width:100%}
  .mini-top{align-items:flex-start}
  .hero-cover{min-height:230px}
  .side-card{align-items:flex-start}
  .side-card img{width:88px}
}