/* roulang page: index */
:root{
      --bg:#0c0f13;
      --bg-soft:#11161c;
      --panel:#151b22;
      --panel-2:#1a2028;
      --line:#27303a;
      --line-soft:#202731;
      --text:#f5f7fa;
      --muted:#a7b0bd;
      --muted-2:#7f8997;
      --accent:#ff5a2f;
      --accent-2:#00d1d4;
      --accent-3:#d7ff4f;
      --accent-4:#ff4f8b;
      --warm:#ffd166;
      --shadow:0 12px 28px rgba(0,0,0,.24);
      --shadow-soft:0 6px 18px rgba(0,0,0,.18);
      --radius:8px;
      --radius-sm:6px;
      --space:24px;
      --space-lg:40px;
      --container:1200px;
    }
    *{box-sizing:border-box}
    html,body{margin:0;padding:0}
    body{
      background:
        linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 30%),
        linear-gradient(180deg, #0b0d11 0%, #0f1318 46%, #0b0d11 100%);
      color:var(--text);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      line-height:1.65;
      letter-spacing:0;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:all .2s ease}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(255,90,47,.35);color:#fff}
    .page-shell{min-height:100vh}
    .container-wide{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:sticky;
      top:0;
      z-index:40;
      backdrop-filter: blur(18px);
      background:rgba(11,14,18,.84);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .top-ribbon{
      border-bottom:1px solid rgba(255,255,255,.06);
      background:linear-gradient(90deg, rgba(255,90,47,.12), rgba(0,209,212,.08), rgba(215,255,79,.09));
    }
    .top-ribbon-inner{
      width:min(var(--container), calc(100% - 32px));
      margin:0 auto;
      padding:8px 0;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:.86rem;
    }
    .ribbon-left,
    .ribbon-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .ribbon-pill{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:5px 10px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      color:#dce2ea;
      font-size:.8rem;
      white-space:nowrap;
    }
    .ribbon-pill strong{color:var(--accent-3);font-weight:700}
    .nav-wrap{
      padding:14px 0;
    }
    .nav-row{
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      align-items:center;
      gap:18px;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
    }
    .brand-mark{
      width:14px;
      height:14px;
      border-radius:4px;
      background:linear-gradient(135deg, var(--accent), var(--accent-4));
      box-shadow:0 0 0 4px rgba(255,90,47,.14);
      flex:0 0 auto;
    }
    .brand-text{
      font-size:1.08rem;
      font-weight:800;
      letter-spacing:0;
      color:#fff;
      line-height:1;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:8px;
      justify-content:flex-start;
      min-width:0;
    }
    .desktop-nav a{
      padding:10px 14px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      font-size:.95rem;
      white-space:nowrap;
    }
    .desktop-nav a:hover,
    .desktop-nav a:focus-visible{
      color:#fff;
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.06);
    }
    .desktop-nav a.is-active{
      color:#101316;
      background:linear-gradient(135deg, var(--accent-3), #fff06c);
      border-color:transparent;
      font-weight:700;
    }
    .nav-tools{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
      min-width:0;
    }
    .nav-search{
      display:flex;
      align-items:center;
      gap:0;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
      border-radius:999px;
      overflow:hidden;
      min-width:240px;
      box-shadow:var(--shadow-soft);
    }
    .nav-search input{
      width:100%;
      background:transparent;
      border:0;
      color:#fff;
      padding:10px 14px;
      outline:none;
      min-width:0;
      font-size:.92rem;
    }
    .nav-search input::placeholder{color:var(--muted-2)}
    .nav-search button{
      border:0;
      background:linear-gradient(135deg, var(--accent), #ff7b56);
      color:#fff;
      padding:10px 14px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
    }
    .nav-search button:hover{filter:brightness(1.05)}
    .nav-link-chip{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 13px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#e8edf4;
      white-space:nowrap;
      font-size:.92rem;
    }
    .nav-link-chip:hover,
    .nav-link-chip:focus-visible{
      border-color:rgba(255,90,47,.55);
      box-shadow:0 0 0 3px rgba(255,90,47,.12);
    }
    .btn-cta{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:10px 16px;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), #ff784f);
      color:#fff;
      border:1px solid rgba(255,255,255,.06);
      font-weight:700;
      box-shadow:0 10px 24px rgba(255,90,47,.22);
      white-space:nowrap;
    }
    .btn-cta:hover,
    .btn-cta:focus-visible{
      color:#fff;
      transform:translateY(-1px);
      box-shadow:0 14px 26px rgba(255,90,47,.28);
    }
    .menu-toggle{
      display:none;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#fff;
      border-radius:10px;
      padding:10px 12px;
      cursor:pointer;
      align-items:center;
      justify-content:center;
      min-width:42px;
      min-height:42px;
    }
    .mobile-nav{
      display:none;
      padding:0 0 14px;
    }
    .mobile-nav-inner{
      display:grid;
      gap:10px;
      padding:14px;
      border-radius:var(--radius);
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      box-shadow:var(--shadow-soft);
    }
    .mobile-nav a{
      padding:12px 14px;
      border-radius:10px;
      background:rgba(255,255,255,.04);
      color:#e8edf4;
      border:1px solid rgba(255,255,255,.05);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .mobile-nav a.is-active{
      color:#101316;
      background:linear-gradient(135deg, var(--accent-3), #fff06c);
      font-weight:800;
    }
    main{padding-bottom:40px}
    .section{
      padding:32px 0;
    }
    .hero{
      padding:34px 0 20px;
      position:relative;
    }
    .hero::before{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
      gap:28px;
      align-items:stretch;
    }
    .hero-copy{
      padding:8px 0 0;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      color:#dbe1ea;
      background:rgba(255,255,255,.04);
      font-size:.85rem;
      margin-bottom:18px;
    }
    .eyebrow .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent-3);
      box-shadow:0 0 0 4px rgba(0,209,212,.12);
    }
    .hero h1{
      margin:0;
      font-size:clamp(2.3rem, 5vw, 4rem);
      line-height:1.08;
      letter-spacing:0;
      max-width:10.5ch;
    }
    .hero h1 .accent{
      color:var(--accent-3);
    }
    .hero-lead{
      margin:18px 0 0;
      max-width:56ch;
      color:var(--muted);
      font-size:1.02rem;
    }
    .hero-actions{
      margin-top:24px;
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:12px;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      padding:12px 16px;
      border-radius:999px;
      border:1px solid transparent;
      font-weight:700;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--accent), #ff7b56);
      color:#fff;
      box-shadow:0 10px 24px rgba(255,90,47,.24);
    }
    .btn-primary:hover,
    .btn-primary:focus-visible{
      color:#fff;
      transform:translateY(-1px);
    }
    .btn-secondary{
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.08);
      color:#ecf1f6;
    }
    .btn-secondary:hover,
    .btn-secondary:focus-visible{
      color:#fff;
      border-color:rgba(0,209,212,.5);
      background:rgba(0,209,212,.08);
    }
    .hero-signals{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .signal{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:10px 12px;
      border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      color:#dfe5ed;
      font-size:.92rem;
    }
    .signal strong{color:#fff}
    .search-dock{
      margin-top:22px;
      display:grid;
      gap:10px;
      max-width:760px;
    }
    .search-dock label{
      color:#cbd3dd;
      font-size:.92rem;
    }
    .search-box{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      align-items:stretch;
      border-radius:18px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      box-shadow:var(--shadow-soft);
    }
    .search-box input{
      width:100%;
      padding:16px 18px;
      background:transparent;
      border:0;
      color:#fff;
      outline:none;
      min-width:0;
      font-size:1rem;
    }
    .search-box input::placeholder{color:var(--muted-2)}
    .search-box button{
      border:0;
      padding:0 18px;
      background:linear-gradient(135deg, var(--accent-3), #9dfc59);
      color:#101316;
      font-weight:800;
      cursor:pointer;
    }
    .search-box button:hover{filter:brightness(1.03)}
    .search-hints{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .hint{
      padding:8px 11px;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
      color:#dfe5ed;
      font-size:.84rem;
      white-space:nowrap;
    }
    .hero-visual{
      min-height:100%;
      padding:18px;
      border-radius:18px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(255,90,47,.08), rgba(0,209,212,.05) 60%, rgba(215,255,79,.06));
      border:1px solid rgba(255,255,255,.07);
      box-shadow:var(--shadow);
      display:grid;
      gap:14px;
      align-content:start;
    }
    .visual-card{
      border-radius:14px;
      background:var(--panel);
      border:1px solid rgba(255,255,255,.06);
      padding:14px;
      box-shadow:var(--shadow-soft);
    }
    .visual-card h3{
      margin:0 0 8px;
      font-size:1rem;
      line-height:1.25;
    }
    .visual-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .visual-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:6px 10px;
      border-radius:999px;
      font-size:.78rem;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#eaf0f7;
    }
    .tag.hot{background:rgba(255,90,47,.14);border-color:rgba(255,90,47,.28);color:#ffd6c7}
    .tag.green{background:rgba(215,255,79,.12);border-color:rgba(215,255,79,.28);color:#ecffaf}
    .tag.cyan{background:rgba(0,209,212,.12);border-color:rgba(0,209,212,.24);color:#c8fbff}
    .tag.pink{background:rgba(255,79,139,.12);border-color:rgba(255,79,139,.24);color:#ffd3e1}
    .meter{
      margin-top:12px;
      height:10px;
      border-radius:999px;
      overflow:hidden;
      background:#0f141a;
      border:1px solid rgba(255,255,255,.06);
    }
    .meter > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), #ff9b3d, var(--accent-3));
    }
    .visual-list{
      display:grid;
      gap:10px;
    }
    .visual-list-item{
      display:grid;
      grid-template-columns:auto minmax(0,1fr);
      gap:12px;
      align-items:center;
      padding:11px 12px;
      border-radius:12px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);
    }
    .badge-box{
      width:42px;
      height:42px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(255,90,47,.18), rgba(255,122,86,.12));
      color:#ffd7cb;
      border:1px solid rgba(255,90,47,.22);
      flex:0 0 auto;
    }
    .badge-box.green{
      background:linear-gradient(135deg, rgba(215,255,79,.14), rgba(0,209,212,.08));
      color:#efffb3;
      border-color:rgba(215,255,79,.22);
    }
    .badge-box.cyan{
      background:linear-gradient(135deg, rgba(0,209,212,.14), rgba(0,209,212,.06));
      color:#d6feff;
      border-color:rgba(0,209,212,.22);
    }
    .visual-list-item strong{
      display:block;
      font-size:.95rem;
      line-height:1.25;
    }
    .visual-list-item span{
      display:block;
      color:var(--muted);
      font-size:.86rem;
      margin-top:2px;
    }
    .hero-compact{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
    .compact-stat{
      padding:12px 12px 11px;
      border-radius:12px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.06);
    }
    .compact-stat em{
      display:block;
      font-style:normal;
      color:var(--muted);
      font-size:.78rem;
      margin-bottom:4px;
    }
    .compact-stat strong{
      font-size:1.08rem;
      line-height:1.1;
    }
    .section-head{
      margin-bottom:18px;
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .section-kicker{
      color:var(--accent-3);
      font-size:.82rem;
      text-transform:none;
      letter-spacing:0;
      font-weight:700;
    }
    .section-head h2{
      margin:0;
      font-size:1.7rem;
      line-height:1.2;
    }
    .section-head p{
      margin:0;
      max-width:64ch;
      color:var(--muted);
    }
    .section-band{
      padding:30px 0;
    }
    .grid-gap{
      display:grid;
      gap:16px;
    }
    .feature-grid{
      grid-template-columns:repeat(3, minmax(0,1fr));
    }
    .card{
      background:var(--panel);
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .card:hover{
      transform:translateY(-2px);
      border-color:rgba(0,209,212,.28);
      box-shadow:0 14px 26px rgba(0,0,0,.22);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)), var(--panel);
    }
    .card-body{
      padding:18px;
    }
    .card-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:10px;
    }
    .card-title{
      margin:0;
      font-size:1.02rem;
      line-height:1.35;
    }
    .card-meta{
      color:var(--muted-2);
      font-size:.82rem;
      white-space:nowrap;
    }
    .card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .card-action{
      margin-top:14px;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .mini-link{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:#fff;
      font-size:.9rem;
      font-weight:700;
    }
    .mini-link i{font-size:.84em}
    .pill-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:12px;
    }
    .pill-row .tag{font-size:.76rem}
    .workflow-grid{
      grid-template-columns:repeat(4, minmax(0,1fr));
    }
    .step-card{
      position:relative;
      overflow:hidden;
    }
    .step-index{
      display:inline-grid;
      place-items:center;
      width:34px;
      height:34px;
      border-radius:10px;
      background:rgba(255,90,47,.16);
      border:1px solid rgba(255,90,47,.24);
      color:#ffd7cb;
      font-weight:800;
      margin-bottom:12px;
    }
    .step-card:nth-child(2) .step-index{background:rgba(0,209,212,.14);border-color:rgba(0,209,212,.24);color:#d4fcff}
    .step-card:nth-child(3) .step-index{background:rgba(215,255,79,.14);border-color:rgba(215,255,79,.24);color:#f3ffd2}
    .step-card:nth-child(4) .step-index{background:rgba(255,79,139,.14);border-color:rgba(255,79,139,.24);color:#ffd8e6}
    .reward-grid{
      grid-template-columns:repeat(4, minmax(0,1fr));
    }
    .reward-card{
      min-height:100%;
    }
    .reward-thumb{
      aspect-ratio:16/9;
      border-radius:12px;
      background:
        linear-gradient(135deg, rgba(255,90,47,.34), rgba(255,90,47,.1) 40%, rgba(0,209,212,.18)),
        linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0));
      border:1px solid rgba(255,255,255,.08);
      padding:14px;
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      overflow:hidden;
      position:relative;
      margin-bottom:14px;
    }
    .reward-thumb::after{
      content:"";
      position:absolute;
      inset:auto -20% -35% 35%;
      height:110%;
      width:70%;
      transform:rotate(-22deg);
      background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0));
      opacity:.6;
      pointer-events:none;
    }
    .reward-thumb strong{
      position:relative;
      z-index:1;
      font-size:1.18rem;
      line-height:1.15;
      max-width:8ch;
    }
    .reward-thumb span{
      position:relative;
      z-index:1;
      padding:6px 9px;
      border-radius:999px;
      background:rgba(15,19,23,.68);
      color:#fff;
      border:1px solid rgba(255,255,255,.08);
      font-size:.78rem;
    }
    .timeline-wrap{
      display:grid;
      grid-template-columns:1.1fr .9fr;
      gap:16px;
      align-items:start;
    }
    .progress-panel{
      background:var(--panel);
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius);
      padding:18px;
      box-shadow:var(--shadow-soft);
    }
    .progress-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      margin-bottom:12px;
    }
    .progress-top strong{
      font-size:1.02rem;
    }
    .progress-top span{
      color:var(--muted);
      font-size:.9rem;
    }
    .progress-track{
      height:12px;
      border-radius:999px;
      background:#0d1116;
      border:1px solid rgba(255,255,255,.06);
      overflow:hidden;
    }
    .progress-track i{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--accent), #ff9b3d, var(--accent-3));
      width:78%;
    }
    .milestone-list{
      margin:18px 0 0;
      display:grid;
      gap:10px;
    }
    .milestone{
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      padding:12px 12px;
      border-radius:12px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);
    }
    .milestone .state{
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--accent-3);
      box-shadow:0 0 0 4px rgba(0,209,212,.12);
    }
    .milestone:nth-child(2) .state{background:var(--accent);box-shadow:0 0 0 4px rgba(255,90,47,.12)}
    .milestone:nth-child(3) .state{background:var(--accent-3);box-shadow:0 0 0 4px rgba(215,255,79,.12)}
    .milestone:nth-child(4) .state{background:var(--accent-4);box-shadow:0 0 0 4px rgba(255,79,139,.12)}
    .milestone strong{display:block;font-size:.94rem}
    .milestone small{display:block;color:var(--muted);margin-top:2px;font-size:.82rem}
    .milestone em{
      font-style:normal;
      color:#eef4fa;
      font-size:.84rem;
      white-space:nowrap;
    }
    .phase-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:16px;
    }
    .phase-card{
      min-height:100%;
      display:flex;
      flex-direction:column;
    }
    .phase-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .phase-top h3{
      margin:0;
      font-size:1.15rem;
      line-height:1.25;
    }
    .phase-top .chip{
      flex:0 0 auto;
      padding:6px 9px;
      border-radius:999px;
      font-size:.77rem;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#fff;
      white-space:nowrap;
    }
    .phase-list{
      display:grid;
      gap:9px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .phase-list li{
      display:flex;
      align-items:flex-start;
      gap:9px;
      color:var(--muted);
      font-size:.92rem;
    }
    .phase-list i{
      color:var(--accent-3);
      margin-top:.25rem;
      flex:0 0 auto;
    }
    .phase-foot{
      margin-top:auto;
      padding-top:16px;
      display:flex;
      align-items:center;
      gap:10px;
      flex-wrap:wrap;
    }
    .latest-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr);
      gap:16px;
      align-items:start;
    }
    .news-list{
      display:grid;
      gap:10px;
    }
    .news-item{
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      padding:12px 14px;
      border-radius:12px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.05);
    }
    .news-item:hover{
      border-color:rgba(255,90,47,.26);
      background:rgba(255,90,47,.05);
    }
    .news-tag{
      width:44px;
      height:44px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:rgba(255,90,47,.14);
      border:1px solid rgba(255,90,47,.22);
      color:#ffd6c7;
      font-weight:800;
      flex:0 0 auto;
    }
    .news-item strong{
      display:block;
      line-height:1.35;
      font-size:.95rem;
    }
    .news-item span{
      display:block;
      color:var(--muted);
      font-size:.84rem;
      margin-top:我接着把这页补完整，先把样式收尾，再把首页主体、两张分类入口和 FAQ、页脚一起落好，确保能直接闭合成一个可运行页面。2px;
    }
    .news-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) minmax(280px,.88fr);
      gap:16px;
      align-items:start;
    }
    .news-board{
      background:var(--panel);
      border:1px solid rgba(255,255,255,.06);
      border-radius:var(--radius);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .board-head{
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      border-bottom:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.02);
    }
    .board-head h3{
      margin:0;
      font-size:1.03rem;
      line-height:1.25;
    }
    .board-head a{
      color:var(--accent-3);
      font-size:.88rem;
      white-space:nowrap;
    }
    .board-list{
      display:grid;
    }
    .board-row{
      display:grid;
      grid-template-columns:auto minmax(0,1fr) auto;
      gap:12px;
      align-items:center;
      padding:14px 18px;
      border-top:1px solid rgba(255,255,255,.05);
      transition:background .18s ease;
    }
    .board-row:first-child{border-top:0}
    .board-row:hover{background:rgba(255,255,255,.03)}
    .row-dot{
      width:12px;
      height:12px;
      border-radius:50%;
      background:var(--accent-3);
      box-shadow:0 0 0 4px rgba(215,255,79,.11);
      flex:0 0 auto;
    }
    .board-row strong{
      display:block;
      font-size:.95rem;
      line-height:1.35;
    }
    .board-row span{
      display:block;
      color:var(--muted);
      font-size:.84rem;
      margin-top:3px;
    }
    .board-row em{
      font-style:normal;
      color:var(--muted-2);
      font-size:.8rem;
      white-space:nowrap;
    }
    .side-stack{
      display:grid;
      gap:12px;
    }
    .mini-panel{
      padding:16px;
      border-radius:var(--radius);
      background:var(--panel);
      border:1px solid rgba(255,255,255,.06);
      box-shadow:var(--shadow-soft);
    }
    .mini-panel h3{
      margin:0 0 8px;
      font-size:1rem;
    }
    .mini-panel p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
    }
    .mini-links{
      margin-top:14px;
      display:grid;
      gap:8px;
    }
    .mini-links a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
      color:#edf2f8;
      font-size:.9rem;
    }
    .mini-links a:hover{
      border-color:rgba(0,209,212,.28);
      background:rgba(0,209,212,.06);
    }
    .overview-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:16px;
    }
    .overview-card{
      min-height:100%;
      display:flex;
      flex-direction:column;
    }
    .overview-card .topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .overview-card .topline strong{
      font-size:1.02rem;
    }
    .overview-card .topline span{
      color:var(--muted-2);
      font-size:.82rem;
      white-space:nowrap;
    }
    .overview-list{
      display:grid;
      gap:10px;
      margin:0;
      padding:0;
      list-style:none;
    }
    .overview-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
      font-size:.92rem;
    }
    .overview-list i{
      color:var(--accent-3);
      margin-top:.22rem;
      flex:0 0 auto;
    }
    .cta-band{
      padding:36px 0 18px;
    }
    .cta-panel{
      border-radius:18px;
      background:
        linear-gradient(135deg, rgba(255,90,47,.2), rgba(0,209,212,.12) 54%, rgba(215,255,79,.12)),
        var(--panel);
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow);
      padding:22px;
      overflow:hidden;
    }
    .cta-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);
      gap:18px;
      align-items:center;
    }
    .cta-panel h2{
      margin:0 0 10px;
      font-size:1.6rem;
      line-height:1.2;
    }
    .cta-panel p{
      margin:0;
      color:#e5ebf2;
      max-width:58ch;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      justify-content:flex-start;
      margin-top:18px;
    }
    .cta-metrics{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
    .metric{
      padding:14px;
      border-radius:14px;
      background:rgba(8,10,13,.22);
      border:1px solid rgba(255,255,255,.08);
    }
    .metric strong{
      display:block;
      font-size:1.15rem;
      line-height:1.05;
      color:#fff;
    }
    .metric span{
      display:block;
      color:#e7edf5;
      margin-top:5px;
      font-size:.82rem;
    }
    .faq{
      display:grid;
      gap:10px;
    }
    .faq details{
      border-radius:var(--radius);
      background:var(--panel);
      border:1px solid rgba(255,255,255,.06);
      box-shadow:var(--shadow-soft);
      overflow:hidden;
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      font-weight:700;
      color:#f3f7fb;
    }
    .faq summary::-webkit-details-marker{display:none}
    .faq summary i{
      color:var(--accent-3);
      transition:transform .18s ease;
    }
    .faq details[open] summary i{transform:rotate(180deg)}
    .faq .answer{
      padding:0 18px 18px;
      color:var(--muted);
      font-size:.94rem;
    }
    .site-footer{
      padding:24px 0 34px;
      border-top:1px solid rgba(255,255,255,.06);
      background:rgba(0,0,0,.1);
    }
    .footer-grid{
      display:grid;
      grid-template-columns:minmax(0,1fr) auto;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .footer-brand strong{
      font-size:1.02rem;
    }
    .footer-brand p{
      margin:0;
      color:var(--muted);
      max-width:62ch;
      font-size:.9rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      justify-content:flex-end;
    }
    .footer-links a{
      padding:9px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.03);
      color:#e7edf5;
      font-size:.88rem;
    }
    .footer-links a:hover{border-color:rgba(255,90,47,.24);background:rgba(255,90,47,.06)}
    .copyright{
      margin-top:14px;
      color:var(--muted-2);
      font-size:.82rem;
    }
    .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: 1024px){
      .hero-grid,
      .timeline-wrap,
      .news-grid,
      .cta-grid,
      .footer-grid{
        grid-template-columns:1fr;
      }
      .feature-grid,
      .reward-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .workflow-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .overview-grid,
      .phase-grid{
        grid-template-columns:1fr;
      }
      .nav-row{
        grid-template-columns:auto 1fr auto;
      }
      .desktop-nav{display:none}
      .menu-toggle{display:inline-flex}
      .nav-search{min-width:210px}
      .cta-metrics{grid-template-columns:repeat(3, minmax(0,1fr))}
    }
    @media (max-width: 768px){
      .top-ribbon-inner,
      .nav-row{
        gap:12px;
      }
      .hero{
        padding-top:24px;
      }
      .hero h1{
        max-width:none;
      }
      .search-box{
        grid-template-columns:1fr;
      }
      .search-box button{
        padding:14px 16px;
      }
      .feature-grid,
      .reward-grid,
      .workflow-grid{
        grid-template-columns:1fr;
      }
      .hero-compact,
      .cta-metrics{
        grid-template-columns:1fr;
      }
      .board-row{
        grid-template-columns:auto minmax(0,1fr);
      }
      .board-row em{grid-column:2}
      .footer-links{justify-content:flex-start}
    }
    @media (max-width: 520px){
      .container-wide{
        width:min(var(--container), calc(100% - 20px));
      }
      .nav-search{
        display:none;
      }
      .nav-tools .nav-link-chip{
        display:none;
      }
      .hero-actions,
      .cta-actions{
        flex-direction:column;
        align-items:stretch;
      }
      .btn,.btn-cta{
        width:100%;
      }
      .cta-panel{
        padding:18px;
      }
      .section{
        padding:26px 0;
      }
      .section-head h2{
        font-size:1.38rem;
      }
      .board-row{
        padding:12px 14px;
      }
      .faq summary{
        padding:14px 14px;
      }
      .faq .answer{
        padding:0 14px 14px;
      }
    }

/* roulang page: category1 */
:root {
      --bg: #111111;
      --bg-soft: #181818;
      --bg-card: #202020;
      --bg-lift: #292929;
      --text: #fff8ea;
      --muted: #b8b2a8;
      --weak: #807a70;
      --line: rgba(255, 248, 234, .13);
      --line-strong: rgba(255, 248, 234, .24);
      --hot: #ff4d23;
      --hot-2: #ff7a1a;
      --lime: #d6ff2f;
      --cyan: #21e6ff;
      --paper: #fff4dc;
      --radius: 8px;
      --shadow: 0 18px 38px rgba(0, 0, 0, .28);
      --shadow-soft: 0 10px 24px rgba(0, 0, 0, .18);
      --container: 1180px;
      --ease: .22s ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      min-height: 100vh;
      background:
        radial-gradient(circle at 12% 10%, rgba(255, 77, 35, .18), transparent 28%),
        radial-gradient(circle at 86% 18%, rgba(214, 255, 47, .12), transparent 24%),
        linear-gradient(180deg, #151515 0%, #0f0f0f 52%, #171717 100%);
      color: var(--text);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
      line-height: 1.72;
      letter-spacing: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease);
    }

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

    button,
    input,
    select {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    :focus-visible {
      outline: 3px solid rgba(33, 230, 255, .65);
      outline-offset: 3px;
    }

    .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;
    }

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

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(17, 17, 17, .88);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    .top-ribbon {
      border-bottom: 1px solid rgba(255, 248, 234, .08);
      background: rgba(255, 248, 234, .04);
    }

    .top-ribbon-inner {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
      min-height: 38px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
    }

    .ribbon-left,
    .ribbon-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .ribbon-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 3px 9px;
      border: 1px solid rgba(255, 248, 234, .12);
      border-radius: 999px;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.2;
      background: rgba(255, 255, 255, .03);
    }

    .ribbon-pill strong {
      color: var(--lime);
      font-weight: 800;
    }

    .nav-wrap {
      position: relative;
    }

    .nav-row {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: max-content;
      font-weight: 900;
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: 8px;
      background:
        linear-gradient(135deg, var(--hot), var(--hot-2) 52%, var(--lime));
      box-shadow: 0 0 0 1px rgba(255, 248, 234, .18), 0 12px 26px rgba(255, 77, 35, .24);
      position: relative;
      overflow: hidden;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      inset: 8px;
      border: 2px solid rgba(17, 17, 17, .75);
      border-radius: 5px;
      transform: rotate(12deg);
    }

    .brand-text {
      font-size: 18px;
      color: var(--text);
      white-space: nowrap;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .04);
      border-radius: 8px;
      margin-left: auto;
    }

    .desktop-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 13px;
      border-radius: 7px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .desktop-nav a:hover,
    .desktop-nav a.is-active {
      color: #111;
      background: var(--lime);
    }

    .nav-tools {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .nav-search {
      width: 238px;
      height: 40px;
      display: flex;
      align-items: center;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      overflow: hidden;
    }

    .nav-search input {
      width: 100%;
      height: 100%;
      border: 0;
      margin: 0;
      background: transparent;
      color: var(--text);
      box-shadow: none;
      padding: 0 10px 0 13px;
      font-size: 13px;
    }

    .nav-search input::placeholder {
      color: var(--weak);
    }

    .nav-search button {
      width: 42px;
      height: 40px;
      border: 0;
      color: var(--text);
      background: transparent;
    }

    .nav-search:focus-within {
      border-color: rgba(33, 230, 255, .7);
      box-shadow: 0 0 0 4px rgba(33, 230, 255, .1);
    }

    .nav-link-chip,
    .btn-cta,
    .btn-main,
    .btn-ghost,
    .filter-chip,
    .small-action {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-radius: 8px;
      font-weight: 800;
      white-space: nowrap;
      transition: transform var(--ease), background var(--ease), border-color var(--ease), box-shadow var(--ease), color var(--ease);
    }

    .nav-link-chip {
      height: 40px;
      padding: 0 13px;
      color: var(--text);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .04);
      font-size: 13px;
    }

    .btn-cta,
    .btn-main {
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid rgba(255, 122, 26, .7);
      color: #151515;
      background: linear-gradient(135deg, var(--lime), #fff06a);
      box-shadow: 0 10px 22px rgba(214, 255, 47, .16);
      font-size: 14px;
    }

    .btn-ghost {
      min-height: 42px;
      padding: 0 16px;
      border: 1px solid var(--line-strong);
      color: var(--text);
      background: rgba(255, 255, 255, .05);
      font-size: 14px;
    }

    .nav-link-chip:hover,
    .btn-ghost:hover,
    .small-action:hover {
      border-color: rgba(214, 255, 47, .6);
      transform: translateY(-1px);
      color: var(--lime);
    }

    .btn-cta:hover,
    .btn-main:hover {
      transform: translateY(-1px);
      box-shadow: 0 16px 30px rgba(214, 255, 47, .22);
      color: #111;
    }

    .menu-toggle {
      display: none;
      width: 42px;
      height: 40px;
      border-radius: 8px;
      border: 1px solid var(--line);
      color: var(--text);
      background: rgba(255, 255, 255, .05);
    }

    .mobile-nav {
      padding: 0 0 14px;
    }

    .mobile-nav-inner {
      display: grid;
      gap: 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .05);
      padding: 8px;
    }

    .mobile-nav a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      min-height: 42px;
      padding: 0 12px;
      border-radius: 7px;
      color: var(--muted);
      font-weight: 800;
    }

    .mobile-nav a.is-active,
    .mobile-nav a:hover {
      color: #111;
      background: var(--lime);
    }

    main {
      overflow: hidden;
    }

    .section {
      padding: 84px 0;
    }

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

    .hero-category {
      padding: 72px 0 58px;
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .hero-category::before {
      content: "";
      position: absolute;
      inset: 0;
      background:
        linear-gradient(90deg, rgba(255, 77, 35, .11), transparent 36%),
        linear-gradient(180deg, rgba(255, 248, 234, .06), transparent 70%);
      pointer-events: none;
    }

    .hero-category .grid-x {
      position: relative;
      z-index: 1;
      align-items: center;
    }

    .breadcrumb-line {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 22px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 700;
    }

    .breadcrumb-line a {
      color: var(--lime);
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 4px 10px;
      border: 1px solid rgba(255, 77, 35, .45);
      border-radius: 999px;
      background: rgba(255, 77, 35, .11);
      color: #ffd1bf;
      font-size: 13px;
      font-weight: 800;
      margin-bottom: 18px;
    }

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

    h1 {
      max-width: 820px;
      color: var(--text);
      font-size: clamp(34px, 5vw, 64px);
      line-height: 1.06;
      letter-spacing: 0;
      margin-bottom: 18px;
      font-weight: 950;
    }

    .hero-summary {
      max-width: 720px;
      color: var(--muted);
      font-size: 17px;
      line-height: 1.9;
      margin-bottom: 28px;
    }

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

    .signal-row {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 10px;
      max-width: 720px;
    }

    .signal-card {
      min-height: 86px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .05);
      padding: 14px;
    }

    .signal-card strong {
      display: block;
      color: var(--text);
      font-size: 22px;
      line-height: 1.1;
      margin-bottom: 6px;
    }

    .signal-card span {
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
    }

    .command-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(32, 32, 32, .86);
      box-shadow: var(--shadow);
      padding: 14px;
    }

    .panel-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 12px;
      padding: 8px 8px 16px;
      border-bottom: 1px solid var(--line);
    }

    .panel-title {
      font-size: 14px;
      color: var(--text);
      font-weight: 900;
    }

    .status-dot {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      color: var(--lime);
      font-size: 12px;
      font-weight: 800;
    }

    .status-dot::before {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--lime);
      box-shadow: 0 0 16px rgba(214, 255, 47, .7);
    }

    .vertical-flow {
      display: grid;
      gap: 10px;
      padding-top: 14px;
    }

    .flow-item {
      display: grid;
      grid-template-columns: 46px 1fr auto;
      gap: 12px;
      align-items: center;
      min-height: 82px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .045);
      transition: transform var(--ease), border-color var(--ease), background var(--ease);
    }

    .flow-item:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 77, 35, .55);
      background: rgba(255, 77, 35, .08);
    }

    .flow-rank {
      width: 46px;
      height: 58px;
      border-radius: 7px;
      display: grid;
      place-items: center;
      color: #151515;
      background: linear-gradient(180deg, var(--hot-2), var(--lime));
      font-weight: 950;
      font-size: 18px;
    }

    .flow-copy strong {
      display: block;
      font-size: 15px;
      line-height: 1.35;
      color: var(--text);
      margin-bottom: 4px;
    }

    .flow-copy span {
      display: block;
      color: var(--muted);
      font-size: 12px;
      line-height: 1.55;
    }

    .flow-badge,
    .badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .05);
      color: var(--muted);
      font-size: 12px;
      font-weight: 850;
      white-space: nowrap;
    }

    .flow-badge.hot,
    .badge.hot {
      color: #151515;
      border-color: transparent;
      background: var(--lime);
    }

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

    .section-kicker {
      color: var(--hot-2);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 8px;
    }

    h2 {
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1.18;
      letter-spacing: 0;
      color: var(--text);
      font-weight: 950;
      margin-bottom: 10px;
    }

    .section-desc {
      max-width: 680px;
      color: var(--muted);
      font-size: 15px;
      margin-bottom: 0;
    }

    .filter-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 14px;
      padding: 12px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .045);
      margin-bottom: 18px;
    }

    .filter-group {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-label {
      color: var(--weak);
      font-size: 12px;
      font-weight: 900;
      margin-right: 2px;
    }

    .filter-chip {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .04);
      color: var(--muted);
      font-size: 13px;
    }

    .filter-chip.is-active,
    .filter-chip:hover {
      color: #111;
      border-color: transparent;
      background: var(--lime);
    }

    .sort-select {
      width: auto;
      min-width: 132px;
      height: 38px;
      margin: 0;
      border: 1px solid var(--line);
      border-radius: 8px;
      background-color: rgba(255, 255, 255, .04);
      color: var(--text);
      box-shadow: none;
      font-size: 13px;
      font-weight: 800;
    }

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

    .collection-card {
      min-height: 248px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .035)),
        var(--bg-card);
      box-shadow: var(--shadow-soft);
      padding: 18px;
      position: relative;
      overflow: hidden;
      transition: transform var(--ease), border-color var(--ease), background var(--ease);
    }

    .collection-card::after {
      content: "";
      position: absolute;
      inset: auto 16px 16px auto;
      width: 74px;
      height: 74px;
      border-radius: 8px;
      border: 1px solid rgba(255, 248, 234, .1);
      background:
        linear-gradient(135deg, rgba(255, 77, 35, .22), rgba(214, 255, 47, .18)),
        repeating-linear-gradient(45deg, transparent, transparent 6px, rgba(255, 255, 255, .05) 6px, rgba(255, 255, 255, .05) 12px);
      opacity: .78;
    }

    .collection-card:hover {
      transform: translateY(-3px);
      border-color: rgba(214, 255, 47, .55);
      background:
        linear-gradient(180deg, rgba(255, 77, 35, .1), rgba(255, 255, 255, .04)),
        var(--bg-card);
    }

    .collection-card.large {
      grid-column: span 6;
    }

    .collection-card.medium {
      grid-column: span 3;
    }

    .card-meta {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 7px;
      margin-bottom: 18px;
    }

    .collection-card h3 {
      position: relative;
      z-index: 1;
      max-width: 88%;
      color: var(--text);
      font-size: 22px;
      line-height: 1.28;
      font-weight: 950;
      margin-bottom: 12px;
    }

    .collection-card p {
      position: relative;
      z-index: 1;
      max-width: 92%;
      color: var(--muted);
      font-size: 14px;
      margin-bottom: 22px;
    }

    .card-actions {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      gap: 10px;
      margin-top: auto;
    }

    .small-action {
      min-height: 34px;
      padding: 0 11px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .045);
      color: var(--text);
      font-size: 12px;
    }

    .matrix-panel {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: var(--bg-soft);
      padding: 18px;
    }

    .matrix-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .matrix-item {
      min-height: 128px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .045);
      padding: 16px;
    }

    .matrix-item strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      line-height: 1.3;
      margin-bottom: 8px;
    }

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

    .matrix-item.accent {
      border-color: rgba(255, 77, 35, .48);
      background: rgba(255, 77, 35, .08);
    }

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

    .process-item {
      display: grid;
      grid-template-columns: 58px 1fr minmax(150px, 220px);
      gap: 16px;
      align-items: center;
      padding: 16px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, .045);
    }

    .process-no {
      width: 58px;
      height: 58px;
      border-radius: 8px;
      display: grid;
      place-items: center;
      color: #111;
      background: var(--paper);
      font-weight: 950;
    }

    .process-copy strong {
      display: block;
      color: var(--text);
      font-size: 17px;
      line-height: 1.35;
      margin-bottom: 5px;
    }

    .process-copy span {
      color: var(--muted);
      font-size: 13px;
    }

    .progress-track {
      height: 9px;
      border-radius: 999px;
      background: rgba(255, 255, 255, .08);
      overflow: hidden;
      margin-bottom: 8px;
    }

    .progress-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--hot), var(--lime));
    }

    .progress-note {
      display: flex;
      justify-content: space-between;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
    }

    .latest-strip {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(255, 255, 255, .035);
    }

    .strip-inner {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 1px;
      background: var(--line);
      border-left: 1px solid var(--line);
      border-right: 1px solid var(--line);
    }

    .strip-item {
      min-height: 142px;
      padding: 20px;
      background: #161616;
    }

    .strip-item strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      margin-bottom: 8px;
    }

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

    .faq-wrap {
      display: grid;
      grid-template-columns: minmax(260px, 360px) 1fr;
      gap: 28px;
      align-items: start;
    }

    .faq-list {
      display: grid;
      gap: 10px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: 8px;
      background: rgba(255, 255, 255, .045);
      overflow: hidden;
    }

    .faq-question {
      width: 100%;
      min-height: 58px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 18px;
      padding: 0 18px;
      border: 0;
      background: transparent;
      color: var(--text);
      text-align: left;
      font-weight: 900;
    }

    .faq-question i {
      color: var(--lime);
      transition: transform var(--ease);
    }

    .faq-item.is-open .faq-question i {
      transform: rotate(45deg);
    }

    .faq-answer {
      display: none;
      padding: 0 18px 18px;
      color: var(--muted);
      font-size: 14px;
    }

    .faq-item.is-open .faq-answer {
      display: block;
    }

    .cta-band {
      padding: 34px;
      border-radius: 8px;
      border: 1px solid rgba(214, 255, 47, .28);
      background:
        linear-gradient(135deg, rgba(255, 77, 35, .18), rgba(214, 255, 47, .12)),
        var(--bg-card);
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 22px;
      align-items: center;
      box-shadow: var(--shadow-soft);
    }

    .cta-band h2 {
      margin-bottom: 8px;
    }

    .cta-band p {
      color: var(--muted);
      margin-bottom: 0;
      max-width: 760px;
    }

    .cta-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .site-footer {
      border-top: 1px solid var(--line);
      background: #101010;
      padding: 34px 0;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
    }

    .footer-brand strong {
      display: block;
      color: var(--text);
      font-size: 18px;
      margin-bottom: 8px;
    }

    .footer-brand p {
      max-width: 680px;
      color: var(--muted);
      font-size: 13px;
      margin-bottom: 10px;
    }

    .copyright {
      color: var(--weak);
      font-size: 12px;
    }

    .footer-links {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .footer-links a {
      min-height: 34px;
      display: inline-flex;
      align-items: center;
      padding: 0 11px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      background: rgba(255, 255, 255, .035);
    }

    .footer-links a:hover {
      color: #111;
      background: var(--lime);
      border-color: transparent;
    }

    @media (max-width: 1080px) {
      .desktop-nav {
        display: none;
      }

      .nav-row {
        gap: 12px;
      }

      .nav-search {
        width: 190px;
      }

      .menu-toggle {
        display: inline-grid;
        place-items: center;
      }

      .collection-card.large,
      .collection-card.medium {
        grid-column: span 6;
      }

      .process-item {
        grid-template-columns: 52px 1fr;
      }

      .process-meter {
        grid-column: 2;
      }
    }

    @media (max-width: 768px) {
      .top-ribbon-inner {
        align-items: flex-start;
        padding: 8px 0;
      }

      .ribbon-right {
        display: none;
      }

      .nav-row {
        min-height: 68px;
      }

      .nav-search,
      .nav-link-chip {
        display: none;
      }

      .hero-category {
        padding: 48px 0 42px;
      }

      .section,
      .section-tight {
        padding: 52px 0;
      }

      .signal-row,
      .matrix-grid,
      .strip-inner,
      .faq-wrap,
      .cta-band,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .section-head {
        display: block;
      }

      .filter-bar {
        align-items: stretch;
        flex-direction: column;
      }

      .sort-select {
        width: 100%;
      }

      .collection-card.large,
      .collection-card.medium {
        grid-column: span 12;
      }

      .cta-actions,
      .footer-links {
        justify-content: flex-start;
      }
    }

    @media (max-width: 520px) {
      .container-wide {
        width: min(100% - 22px, var(--container));
      }

      .brand-text {
        font-size: 16px;
      }

      .btn-cta {
        padding: 0 12px;
      }

      h1 {
        font-size: 34px;
      }

      .hero-summary {
        font-size: 15px;
      }

      .flow-item {
        grid-template-columns: 42px 1fr;
      }

      .flow-badge {
        grid-column: 2;
        justify-self: start;
      }

      .process-item {
        grid-template-columns: 1fr;
      }

      .process-no,
      .process-meter {
        grid-column: auto;
      }

      .cta-band {
        padding: 22px;
      }

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

/* roulang page: category2 */
:root {
      --bg: #121212;
      --bg-soft: #191919;
      --panel: #1f1f1f;
      --panel-strong: #262626;
      --text: #fff8ec;
      --muted: #c9c0b3;
      --subtle: #8f877b;
      --line: rgba(255, 248, 236, 0.13);
      --line-strong: rgba(255, 248, 236, 0.24);
      --hot: #ff4d2e;
      --hot-2: #ff7a1a;
      --lime: #c7ff35;
      --cyan: #36f3ff;
      --cream: #fff3d7;
      --radius: 8px;
      --radius-sm: 6px;
      --shadow: 0 18px 42px rgba(0, 0, 0, 0.34);
      --shadow-soft: 0 10px 26px rgba(0, 0, 0, 0.24);
      --container: 1180px;
      --ease: 180ms ease;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      line-height: 1.72;
      color: var(--text);
      background:
        radial-gradient(circle at 14% 8%, rgba(255, 77, 46, 0.16), transparent 32%),
        radial-gradient(circle at 86% 18%, rgba(54, 243, 255, 0.12), transparent 28%),
        linear-gradient(180deg, #111 0%, #171717 48%, #101010 100%);
      min-height: 100vh;
      letter-spacing: 0;
    }

    a {
      color: inherit;
      text-decoration: none;
      transition: color var(--ease), border-color var(--ease), background var(--ease), transform var(--ease);
    }

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

    button,
    input {
      font: inherit;
    }

    button {
      cursor: pointer;
    }

    input,
    button,
    a {
      -webkit-tap-highlight-color: transparent;
    }

    a:focus-visible,
    button:focus-visible,
    input:focus-visible,
    summary:focus-visible {
      outline: 3px solid rgba(199, 255, 53, 0.55);
      outline-offset: 3px;
    }

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

    .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;
    }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 50;
      background: rgba(18, 18, 18, 0.92);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid var(--line);
    }

    .top-ribbon {
      border-bottom: 1px solid rgba(255, 248, 236, 0.08);
      background: linear-gradient(90deg, rgba(255, 77, 46, 0.18), rgba(199, 255, 53, 0.07), rgba(54, 243, 255, 0.12));
    }

    .top-ribbon-inner {
      width: min(var(--container), calc(100% - 32px));
      margin: 0 auto;
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      color: var(--cream);
      font-size: 12px;
    }

    .ribbon-left,
    .ribbon-right {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .ribbon-pill {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 24px;
      padding: 2px 9px;
      border: 1px solid rgba(255, 248, 236, 0.13);
      border-radius: 999px;
      background: rgba(0, 0, 0, 0.2);
      white-space: nowrap;
    }

    .ribbon-pill strong {
      color: var(--lime);
      font-weight: 800;
    }

    .nav-wrap {
      background: rgba(18, 18, 18, 0.76);
    }

    .nav-row {
      min-height: 76px;
      display: flex;
      align-items: center;
      gap: 22px;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      min-width: max-content;
      font-weight: 900;
      color: var(--text);
    }

    .brand:hover {
      color: var(--lime);
    }

    .brand-mark {
      width: 34px;
      height: 34px;
      border-radius: var(--radius-sm);
      background:
        linear-gradient(135deg, var(--hot), var(--hot-2) 48%, var(--lime) 52%, var(--cyan));
      box-shadow: 0 0 0 4px rgba(255, 77, 46, 0.14);
      position: relative;
    }

    .brand-mark::after {
      content: "";
      position: absolute;
      inset: 8px;
      border-radius: 4px;
      border: 2px solid rgba(18, 18, 18, 0.75);
      background: rgba(255, 248, 236, 0.22);
    }

    .brand-text {
      font-size: 18px;
      letter-spacing: 0;
    }

    .desktop-nav {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.04);
      margin-left: auto;
    }

    .desktop-nav a {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 0 13px;
      border-radius: 6px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
    }

    .desktop-nav a:hover,
    .desktop-nav a.is-active {
      color: #111;
      background: var(--lime);
    }

    .nav-tools {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .nav-search {
      width: 220px;
      height: 40px;
      display: flex;
      align-items: center;
      gap: 4px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.05);
      padding: 0 5px 0 12px;
      transition: border-color var(--ease), background var(--ease);
    }

    .nav-search:focus-within {
      border-color: rgba(199, 255, 53, 0.72);
      background: rgba(255, 248, 236, 0.08);
    }

    .nav-search input {
      width: 100%;
      min-width: 0;
      border: 0;
      outline: 0;
      background: transparent;
      color: var(--text);
      font-size: 13px;
      box-shadow: none;
      margin: 0;
      height: 38px;
    }

    .nav-search input::placeholder {
      color: var(--subtle);
    }

    .nav-search button {
      width: 30px;
      height: 30px;
      display: grid;
      place-items: center;
      border: 0;
      border-radius: 6px;
      color: var(--bg);
      background: var(--cream);
      padding: 0;
    }

    .nav-search button:hover {
      background: var(--lime);
    }

    .nav-link-chip,
    .btn-cta,
    .btn-ghost,
    .btn-hot {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 7px;
      min-height: 40px;
      padding: 0 14px;
      border-radius: var(--radius);
      font-size: 14px;
      font-weight: 850;
      white-space: nowrap;
      border: 1px solid transparent;
    }

    .nav-link-chip {
      color: var(--cream);
      background: rgba(255, 248, 236, 0.06);
      border-color: var(--line);
    }

    .nav-link-chip:hover,
    .btn-ghost:hover {
      border-color: rgba(54, 243, 255, 0.55);
      color: var(--cyan);
      transform: translateY(-1px);
    }

    .btn-cta,
    .btn-hot {
      color: #141414;
      background: linear-gradient(135deg, var(--lime), #f6ff78);
      box-shadow: 0 10px 24px rgba(199, 255, 53, 0.18);
    }

    .btn-cta:hover,
    .btn-hot:hover {
      color: #141414;
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(199, 255, 53, 0.26);
    }

    .btn-ghost {
      color: var(--text);
      background: rgba(255, 248, 236, 0.04);
      border-color: var(--line-strong);
    }

    .menu-toggle {
      display: none;
      width: 40px;
      height: 40px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      color: var(--text);
      background: rgba(255, 248, 236, 0.05);
    }

    .mobile-nav {
      padding: 0 0 14px;
    }

    .mobile-nav-inner {
      display: grid;
      gap: 8px;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.05);
    }

    .mobile-nav a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-height: 44px;
      padding: 0 12px;
      border-radius: var(--radius-sm);
      color: var(--muted);
      background: rgba(0, 0, 0, 0.16);
    }

    .mobile-nav a.is-active,
    .mobile-nav a:hover {
      color: #111;
      background: var(--lime);
    }

    main {
      overflow: hidden;
    }

    .page-hero {
      position: relative;
      padding: 54px 0 42px;
      border-bottom: 1px solid var(--line);
    }

    .page-hero::before {
      content: "";
      position: absolute;
      inset: 18px 0 auto auto;
      width: min(46vw, 520px);
      height: 300px;
      background:
        linear-gradient(135deg, rgba(255, 77, 46, 0.28), rgba(199, 255, 53, 0.12)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 2px, transparent 2px 14px);
      clip-path: polygon(14% 0, 100% 0, 86% 100%, 0 82%);
      opacity: 0.62;
      pointer-events: none;
    }

    .hero-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 0.92fr) minmax(320px, 0.78fr);
      gap: 34px;
      align-items: center;
    }

    .breadcrumb-line {
      display: flex;
      align-items: center;
      gap: 8px;
      color: var(--subtle);
      font-size: 13px;
      margin-bottom: 22px;
      flex-wrap: wrap;
    }

    .breadcrumb-line a {
      color: var(--muted);
      border-bottom: 1px solid transparent;
    }

    .breadcrumb-line a:hover {
      color: var(--lime);
      border-color: rgba(199, 255, 53, 0.55);
    }

    .hero-kicker {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      min-height: 30px;
      padding: 0 10px;
      border-radius: 999px;
      color: #111;
      background: var(--hot);
      font-size: 13px;
      font-weight: 900;
      box-shadow: 0 8px 22px rgba(255, 77, 46, 0.24);
      transform: rotate(-1deg);
    }

    .page-hero h1 {
      margin: 18px 0 14px;
      max-width: 760px;
      color: var(--text);
      font-size: clamp(34px, 5vw, 62px);
      line-height: 1.08;
      font-weight: 950;
      letter-spacing: 0;
    }

    .hero-lead {
      max-width: 710px;
      margin: 0 0 24px;
      color: var(--muted);
      font-size: 18px;
      line-height: 1.8;
    }

    .hero-actions {
      display: flex;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
      margin: 26px 0 18px;
    }

    .hero-note {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--subtle);
      font-size: 13px;
      flex-wrap: wrap;
    }

    .hero-note strong {
      color: var(--cyan);
      font-weight: 900;
    }

    .update-stack {
      display: grid;
      gap: 12px;
    }

    .update-panel {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255, 248, 236, 0.08), rgba(255, 248, 236, 0.035));
      box-shadow: var(--shadow);
      padding: 16px;
      overflow: hidden;
    }

    .update-panel::after {
      content: "";
      position: absolute;
      inset: auto 16px 16px auto;
      width: 78px;
      height: 78px;
      border-radius: 8px;
      background:
        linear-gradient(135deg, rgba(199, 255, 53, 0.34), rgba(54, 243, 255, 0.16)),
        repeating-linear-gradient(90deg, rgba(18,18,18,0.3) 0 6px, transparent 6px 12px);
      opacity: 0.42;
      transform: rotate(8deg);
    }

    .panel-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 14px;
      position: relative;
      z-index: 1;
    }

    .panel-title {
      display: grid;
      gap: 3px;
    }

    .panel-title strong {
      font-size: 18px;
      line-height: 1.3;
    }

    .panel-title span {
      color: var(--subtle);
      font-size: 13px;
    }

    .status-badge,
    .tag,
    .mini-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 26px;
      padding: 0 9px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 850;
      border: 1px solid var(--line);
      white-space: nowrap;
    }

    .status-badge {
      color: #111;
      background: var(--lime);
      border-color: transparent;
    }

    .status-badge.hot {
      background: var(--hot);
      color: #fff;
    }

    .status-badge.cyan {
      background: var(--cyan);
      color: #111;
    }

    .tag {
      color: var(--cream);
      background: rgba(255, 248, 236, 0.06);
    }

    .mini-badge {
      color: var(--lime);
      background: rgba(199, 255, 53, 0.09);
      border-color: rgba(199, 255, 53, 0.28);
    }

    .signal-list {
      display: grid;
      gap: 9px;
      position: relative;
      z-index: 1;
    }

    .signal-row {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) auto;
      align-items: center;
      gap: 10px;
      min-height: 58px;
      padding: 10px;
      border-radius: var(--radius);
      border: 1px solid rgba(255, 248, 236, 0.1);
      background: rgba(0, 0, 0, 0.2);
    }

    .signal-icon {
      width: 34px;
      height: 34px;
      display: grid;
      place-items: center;
      border-radius: 6px;
      color: #111;
      background: var(--cream);
    }

    .signal-row:nth-child(2) .signal-icon {
      background: var(--hot);
      color: #fff;
    }

    .signal-row:nth-child(3) .signal-icon {
      background: var(--cyan);
      color: #111;
    }

    .signal-main {
      min-width: 0;
    }

    .signal-main strong {
      display: block;
      font-size: 14px;
      line-height: 1.35;
      overflow-wrap: anywhere;
    }

    .signal-main span {
      display: block;
      color: var(--subtle);
      font-size: 12px;
      margin-top: 2px;
    }

    .section {
      padding: 64px 0;
    }

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

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

    .section-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--lime);
      font-size: 13px;
      font-weight: 900;
      margin-bottom: 10px;
    }

    .section h2 {
      margin: 0;
      color: var(--text);
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1.18;
      font-weight: 950;
      letter-spacing: 0;
    }

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

    .filter-bar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px;
      margin-bottom: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.045);
    }

    .filter-tags {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .filter-tag {
      min-height: 34px;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(0, 0, 0, 0.18);
      font-size: 13px;
      font-weight: 800;
    }

    .filter-tag.is-active,
    .filter-tag:hover {
      color: #111;
      background: var(--lime);
      border-color: var(--lime);
    }

    .sort-chip {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 34px;
      padding: 0 12px;
      color: var(--cream);
      border: 1px solid rgba(54, 243, 255, 0.24);
      border-radius: var(--radius);
      background: rgba(54, 243, 255, 0.07);
      font-size: 13px;
      font-weight: 850;
      white-space: nowrap;
    }

    .vertical-feed {
      display: grid;
      gap: 12px;
    }

    .feed-card {
      display: grid;
      grid-template-columns: 86px minmax(0, 1fr) minmax(150px, 0.22fr);
      gap: 16px;
      align-items: stretch;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(90deg, rgba(255, 248, 236, 0.07), rgba(255, 248, 236, 0.035));
      box-shadow: var(--shadow-soft);
      transition: transform var(--ease), border-color var(--ease), background var(--ease);
    }

    .feed-card:hover {
      transform: translateY(-2px);
      border-color: rgba(199, 255, 53, 0.45);
      background: linear-gradient(90deg, rgba(255, 248, 236, 0.09), rgba(199, 255, 53, 0.045));
    }

    .feed-rank {
      display: grid;
      place-items: center;
      min-height: 104px;
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255, 77, 46, 0.92), rgba(255, 122, 26, 0.86)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.16) 0 2px, transparent 2px 9px);
      color: #fff;
      font-size: 24px;
      font-weight: 950;
    }

    .feed-rank.alt {
      color: #111;
      background:
        linear-gradient(135deg, rgba(199, 255, 53, 0.98), rgba(54, 243, 255, 0.8)),
        repeating-linear-gradient(45deg, rgba(0,0,0,0.14) 0 2px, transparent 2px 9px);
    }

    .feed-rank.dark {
      color: var(--cream);
      background:
        linear-gradient(135deg, rgba(255, 248, 236, 0.18), rgba(255, 248, 236, 0.07)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.1) 0 2px, transparent 2px 9px);
      border: 1px solid var(--line);
    }

    .feed-body {
      min-width: 0;
      display: grid;
      align-content: center;
      gap: 9px;
    }

    .feed-title-line {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .feed-body h3 {
      margin: 0;
      font-size: 20px;
      line-height: 1.35;
      font-weight: 950;
      overflow-wrap: anywhere;
    }

    .feed-body p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .feed-tags {
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }

    .feed-action {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      gap: 10px;
      min-width: 0;
    }

    .feed-metric {
      display: grid;
      gap: 3px;
      padding: 10px;
      border: 1px solid rgba(255, 248, 236, 0.1);
      border-radius: var(--radius);
      background: rgba(0, 0, 0, 0.18);
      text-align: center;
    }

    .feed-metric strong {
      color: var(--lime);
      font-size: 20px;
      line-height: 1.1;
    }

    .feed-metric span {
      color: var(--subtle);
      font-size: 12px;
    }

    .matrix-band {
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background:
        linear-gradient(180deg, rgba(255, 77, 46, 0.06), rgba(54, 243, 255, 0.045)),
        rgba(0, 0, 0, 0.16);
    }

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

    .dense-card {
      min-height: 170px;
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(255, 248, 236, 0.055);
      transition: transform var(--ease), border-color var(--ease), background var(--ease);
    }

    .dense-card:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 77, 46, 0.52);
      background: rgba(255, 77, 46, 0.08);
    }

    .dense-card i {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-bottom: 14px;
      border-radius: var(--radius-sm);
      color: #111;
      background: var(--lime);
    }

    .dense-card:nth-child(2) i {
      background: var(--hot);
      color: #fff;
    }

    .dense-card:nth-child(3) i {
      background: var(--cyan);
      color: #111;
    }

    .dense-card:nth-child(4) i {
      background: var(--cream);
      color: #111;
    }

    .dense-card h3 {
      margin: 0 0 7px;
      font-size: 18px;
      line-height: 1.35;
      font-weight: 950;
    }

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

    .timeline-wrap {
      display: grid;
      grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr);
      gap: 18px;
      align-items: start;
    }

    .progress-panel {
      position: sticky;
      top: 122px;
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.055);
      box-shadow: var(--shadow-soft);
    }

    .progress-number {
      display: flex;
      align-items: end;
      gap: 8px;
      margin-bottom: 10px;
    }

    .progress-number strong {
      color: var(--lime);
      font-size: 46px;
      line-height: 1;
      font-weight: 950;
    }

    .progress-number span {
      color: var(--subtle);
      font-size: 13px;
      padding-bottom: 7px;
    }

    .progress-track {
      height: 10px;
      border-radius: 999px;
      background: rgba(255, 248, 236, 0.09);
      overflow: hidden;
      margin: 12px 0 14px;
    }

    .progress-track span {
      display: block;
      width: 84%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--hot), var(--lime), var(--cyan));
    }

    .progress-panel p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

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

    .timeline-item {
      display: grid;
      grid-template-columns: 42px minmax(0, 1fr);
      gap: 12px;
      padding: 14px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.045);
    }

    .timeline-dot {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: rgba(199, 255, 53, 0.15);
      color: var(--lime);
      border: 1px solid rgba(199, 255, 53, 0.38);
    }

    .timeline-item h3 {
      margin: 0 0 5px;
      font-size: 17px;
      font-weight: 950;
      line-height: 1.35;
    }

    .timeline-item p {
      margin: 0;
      color: var(--muted);
      font-size: 14px;
    }

    .faq-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
      gap: 22px;
      align-items: start;
    }

    .faq-intro {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.045);
    }

    .faq-intro strong {
      display: block;
      margin-bottom: 8px;
      font-size: 20px;
      line-height: 1.35;
    }

    .faq-intro p {
      margin: 0;
      color: var(--muted);
    }

    .faq-list {
      display: grid;
      gap: 10px;
    }

    .faq-item {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 248, 236, 0.045);
      overflow: hidden;
    }

    .faq-item summary {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      min-height: 58px;
      padding: 0 16px;
      color: var(--text);
      font-weight: 900;
      cursor: pointer;
    }

    .faq-item summary::-webkit-details-marker {
      display: none;
    }

    .faq-item summary i {
      color: var(--lime);
      transition: transform var(--ease);
    }

    .faq-item[open] summary i {
      transform: rotate(45deg);
    }

    .faq-item p {
      margin: 0;
      padding: 0 16px 16px;
      color: var(--muted);
      font-size: 14px;
    }

    .cta-panel {
      position: relative;
      overflow: hidden;
      display: grid;
      grid-template-columns: minmax(0, 0.76fr) auto;
      align-items: center;
      gap: 22px;
      padding: 28px;
      border: 1px solid rgba(199, 255, 53, 0.28);
      border-radius: var(--radius);
      background:
        linear-gradient(135deg, rgba(255, 77, 46, 0.22), rgba(199, 255, 53, 0.09), rgba(54, 243, 255, 0.12)),
        rgba(255, 248, 236, 0.055);
      box-shadow: var(--shadow);
    }

    .cta-panel::after {
      content: "更新";
      position: absolute;
      right: 22px;
      top: -12px;
      color: rgba(255, 248, 236, 0.08);
      font-size: 112px;
      line-height: 1;
      font-weight: 950;
      pointer-events: none;
    }

    .cta-copy {
      position: relative;
      z-index: 1;
    }

    .cta-copy h2 {
      margin: 0 0 8px;
      font-size: clamp(26px, 3vw, 40px);
      line-height: 1.18;
      font-weight: 950;
    }

    .cta-copy p {
      margin: 0;
      color: var(--muted);
      max-width: 720px;
    }

    .cta-actions {
      position: relative;
      z-index: 1;
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .site-footer {
      padding: 34px 0;
      border-top: 1px solid var(--line);
      background: #0d0d0d;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: minmax(0, 0.64fr) auto;
      gap: 28px;
      align-items: center;
    }

    .footer-brand strong {
      display: block;
      margin-bottom: 8px;
      color: var(--text);
      font-size: 18px;
      font-weight: 950;
    }

    .footer-brand p {
      margin: 0 0 10px;
      max-width: 720px;
      color: var(--muted);
      font-size: 14px;
    }

    .copyright {
      color: var(--subtle);
      font-size: 12px;
    }

    .footer-links {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .footer-links a {
      min-height: 36px;
      display: inline-flex;
      align-items: center;
      padding: 0 12px;
      border: 1px solid var(--line);
      border-radius: var(--radius-sm);
      color: var(--muted);
      font-size: 13px;
      font-weight: 800;
      background: rgba(255, 248, 236, 0.035);
    }

    .footer-links a:hover {
      color: #111;
      background: var(--lime);
      border-color: var(--lime);
    }

    @media (max-width: 1080px) {
      .nav-row {
        gap: 12px;
      }

      .desktop-nav {
        display: none;
      }

      .nav-tools {
        margin-left: auto;
      }

      .menu-toggle {
        display: grid;
        place-items: center;
      }

      .nav-link-chip {
        display: none;
      }

      .hero-grid,
      .timeline-wrap,
      .faq-grid {
        grid-template-columns: 1fr;
      }

      .progress-panel {
        position: static;
      }

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

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

    @media (max-width: 760px) {
      .top-ribbon-inner {
        align-items: flex-start;
        padding: 8px 0;
      }

      .ribbon-right {
        display: none;
      }

      .nav-row {
        min-height: 68px;
      }

      .brand-text {
        font-size: 16px;
      }

      .nav-search {
        width: 44px;
        padding: 0;
        justify-content: center;
      }

      .nav-search input {
        display: none;
      }

      .nav-search button {
        width: 36px;
        height: 36px;
        background: rgba(255, 248, 236, 0.08);
        color: var(--cream);
      }

      .btn-cta {
        display: none;
      }

      .page-hero {
        padding: 38px 0 32px;
      }

      .hero-grid {
        gap: 20px;
      }

      .hero-lead {
        font-size: 16px;
      }

      .filter-bar {
        align-items: flex-start;
        flex-direction: column;
      }

      .feed-card {
        grid-template-columns: 1fr;
      }

      .feed-rank {
        min-height: 72px;
        place-items: center start;
        padding-left: 18px;
      }

      .feed-action {
        flex-direction: row;
        align-items: center;
      }

      .feed-action .btn-ghost {
        flex: 1;
      }

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

      .cta-panel,
      .footer-grid {
        grid-template-columns: 1fr;
      }

      .cta-actions,
      .footer-links {
        justify-content: flex-start;
      }
    }

    @media (max-width: 520px) {
      .container-wide {
        width: min(100% - 22px, var(--container));
      }

      .top-ribbon-inner {
        width: min(100% - 22px, var(--container));
      }

      .ribbon-pill {
        white-space: normal;
      }

      .brand-mark {
        width: 30px;
        height: 30px;
      }

      .menu-toggle {
        width: 38px;
        height: 38px;
      }

      .page-hero h1 {
        font-size: 32px;
      }

      .hero-actions,
      .cta-actions {
        align-items: stretch;
        flex-direction: column;
      }

      .btn-hot,
      .btn-ghost {
        width: 100%;
      }

      .signal-row {
        grid-template-columns: 34px minmax(0, 1fr);
      }

      .signal-row .mini-badge {
        grid-column: 2;
        width: fit-content;
      }

      .section {
        padding: 46px 0;
      }

      .section h2,
      .cta-copy h2 {
        font-size: 27px;
      }

      .feed-body h3 {
        font-size: 18px;
      }

      .feed-action {
        flex-direction: column;
        align-items: stretch;
      }
    }