/* roulang page: index */
:root{
      --bg:#0a0d12;
      --bg-soft:#0d121a;
      --panel:#111824;
      --panel-2:#151e2b;
      --panel-3:#1a2432;
      --line:#223043;
      --line-soft:#1a2534;
      --text:#eef4ff;
      --muted:#91a2b8;
      --accent:#68f0d3;
      --accent-2:#8d7bff;
      --accent-3:#ff5ea6;
      --warn:#ffd36f;
      --danger:#ff6b81;
      --shadow:0 12px 32px rgba(0,0,0,.35);
      --shadow-soft:0 8px 24px rgba(0,0,0,.22);
      --radius:8px;
      --space-1:.35rem;
      --space-2:.55rem;
      --space-3:.8rem;
      --space-4:1rem;
      --space-5:1.25rem;
      --space-6:1.5rem;
      --space-7:2rem;
      --space-8:2.75rem;
      --container:1180px;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(15,18,26,1) 0%, rgba(10,13,18,1) 100%);
      letter-spacing:0;
      line-height:1.6;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        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,.28), rgba(0,0,0,0));
      opacity:.45;
      z-index:0;
    }
    img{max-width:100%;display:block}
    a{color:inherit;text-decoration:none}
    a:hover{color:inherit}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(104,240,211,.22);color:var(--text)}

    .page-wrap{position:relative;z-index:1}
    .container-wide{
      width:min(calc(100% - 2rem), var(--container));
      margin:0 auto;
    }

    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(255,255,255,.96);
      border-bottom:1px solid rgba(17,24,36,.08);
      box-shadow:0 1px 0 rgba(255,255,255,.4), 0 8px 24px rgba(6,10,18,.05);
      backdrop-filter: blur(10px);
    }
    .site-header .navbar{
      padding:.7rem 0;
    }
    .brand{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      min-width:0;
    }
    .brand-mark{
      width:38px;height:38px;
      flex:0 0 38px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      background:linear-gradient(135deg, rgba(104,240,211,.18), rgba(141,123,255,.18));
      color:#071118;
      border:1px solid rgba(17,24,36,.1);
      box-shadow:0 4px 12px rgba(17,24,36,.08);
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      min-width:0;
      line-height:1.1;
    }
    .brand-text strong{
      font-size:.98rem;
      font-weight:700;
      color:#0d1420;
      white-space:normal;
    }
    .brand-text span{
      font-size:.74rem;
      color:#5e6a7d;
      margin-top:.15rem;
    }

    .nav-links{
      gap:.35rem;
    }
    .nav-links .nav-link{
      color:#253244;
      font-size:.95rem;
      padding:.6rem .9rem;
      border-radius:8px;
      transition:background-color .18s ease, color .18s ease, transform .18s ease;
    }
    .nav-links .nav-link:hover{
      background:#edf3f9;
      color:#0c1522;
    }
    .nav-links .nav-link.active{
      background:#101826;
      color:#fff;
      box-shadow:inset 0 0 0 1px rgba(104,240,211,.15);
    }

    .nav-search{
      display:flex;
      align-items:center;
      gap:.5rem;
      min-width:270px;
    }
    .nav-search .search-wrap{
      position:relative;
      flex:1;
    }
    .nav-search .search-wrap i{
      position:absolute;
      left:.85rem;
      top:50%;
      transform:translateY(-50%);
      color:#647286;
      width:16px;
      height:16px;
    }
    .nav-search input{
      width:100%;
      height:42px;
      border:1px solid rgba(26,37,52,.18);
      border-radius:8px;
      background:#fff;
      color:#0c1522;
      padding:.55rem .9rem .55rem 2.3rem;
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .nav-search input::placeholder{color:#8a97a8}
    .nav-search input:focus{
      border-color:rgba(104,240,211,.8);
      box-shadow:0 0 0 .18rem rgba(104,240,211,.14);
      background:#fff;
    }

    .btn-ui{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      height:42px;
      border-radius:8px;
      border:1px solid transparent;
      padding:.55rem 1rem;
      font-weight:700;
      line-height:1;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease;
      white-space:nowrap;
    }
    .btn-ui:focus-visible,
    .nav-link:focus-visible,
    .nav-search input:focus-visible,
    .accordion-button:focus-visible{
      outline:0;
      box-shadow:0 0 0 .2rem rgba(104,240,211,.24);
    }
    .btn-ui:hover{transform:translateY(-1px)}
    .btn-primary-ui{
      background:linear-gradient(135deg, var(--accent), #a9fff0);
      color:#071118;
      box-shadow:0 10px 22px rgba(104,240,211,.16);
    }
    .btn-primary-ui:hover{
      color:#071118;
      box-shadow:0 12px 26px rgba(104,240,211,.22);
    }
    .btn-outline-ui{
      background:transparent;
      color:#eaf1fb;
      border-color:rgba(255,255,255,.14);
    }
    .btn-outline-ui:hover{
      background:rgba(255,255,255,.06);
      color:#fff;
      border-color:rgba(255,255,255,.24);
    }
    .btn-dark-ui{
      background:#101826;
      color:#fff;
      border-color:rgba(255,255,255,.07);
      box-shadow:inset 0 0 0 1px rgba(104,240,211,.1);
    }
    .btn-dark-ui:hover{
      background:#152033;
      color:#fff;
    }
    .btn-soft-ui{
      background:rgba(255,255,255,.05);
      color:var(--text);
      border-color:rgba(255,255,255,.08);
    }

    .navbar-toggler{
      border-radius:8px;
      border:1px solid rgba(17,24,36,.12);
      box-shadow:none;
    }
    .navbar-toggler:focus{
      box-shadow:0 0 0 .2rem rgba(104,240,211,.18);
    }
    .navbar-collapse{
      margin-top:.75rem;
    }

    .hero{
      position:relative;
      background:
        radial-gradient(circle at 20% 0%, rgba(104,240,211,.12), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(141,123,255,.12), transparent 22%),
        linear-gradient(180deg, #0b0f16 0%, #0a0d12 100%);
      border-bottom:1px solid var(--line-soft);
      overflow:hidden;
    }
    .hero::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.04), transparent 42%),
        linear-gradient(180deg, transparent 0%, rgba(10,13,18,.35) 100%);
      pointer-events:none;
    }
    .hero-inner{
      position:relative;
      z-index:1;
      padding:1.1rem 0 2.6rem;
    }
    .countdown-bar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
      padding:.72rem .95rem;
      border:1px solid rgba(104,240,211,.18);
      border-radius:8px;
      background:linear-gradient(135deg, rgba(104,240,211,.08), rgba(141,123,255,.07));
      box-shadow:var(--shadow-soft);
      margin-bottom:1rem;
    }
    .countdown-bar .countdown-label{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-size:.92rem;
      color:#dfe8f4;
    }
    .countdown-bar .countdown-label i{
      color:var(--warn);
      width:16px;height:16px;
    }
    .countdown-bar .countdown-timer{
      font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      font-size:1.05rem;
      color:#fff;
      padding:.2rem .55rem;
      border-radius:8px;
      background:rgba(0,0,0,.22);
      border:1px solid rgba(255,255,255,.08);
      letter-spacing:0;
    }
    .countdown-bar small{
      color:var(--muted);
    }

    .hero-grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:1.5rem;
      align-items:stretch;
    }
    .hero-copy{
      padding:1.05rem 0 .2rem;
    }
    .hero-copy .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-size:.88rem;
      color:#dffaf3;
      background:rgba(104,240,211,.08);
      border:1px solid rgba(104,240,211,.18);
      border-radius:8px;
      padding:.35rem .65rem;
      margin-bottom:.9rem;
    }
    .hero-copy .eyebrow i{width:15px;height:15px;color:var(--accent)}
    .hero-copy h1{
      margin:0;
      font-size:3rem;
      line-height:1.12;
      letter-spacing:0;
      color:#f6f8fc;
      max-width:11.5ch;
    }
    .hero-copy p{
      margin:1rem 0 0;
      max-width:42rem;
      color:#bcc9d8;
      font-size:1.02rem;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.75rem;
      margin-top:1.35rem;
    }
    .hero-notes{
      display:flex;
      flex-wrap:wrap;
      gap:.55rem;
      margin-top:1.15rem;
    }
    .note-chip{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      padding:.45rem .7rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.1);
      background:rgba(255,255,255,.04);
      color:#dbe6f5;
      font-size:.88rem;
    }
    .note-chip i{width:15px;height:15px;color:var(--accent)}
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:.7rem;
      margin-top:1.35rem;
    }
    .hero-stat{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:.85rem .8rem;
      min-height:88px;
      box-shadow:var(--shadow-soft);
    }
    .hero-stat strong{
      display:block;
      font-size:1.1rem;
      color:#fff;
      margin-bottom:.2rem;
    }
    .hero-stat span{
      display:block;
      color:#aebcd0;
      font-size:.9rem;
    }

    .hero-stage{
      position:relative;
      min-height: 100%;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        linear-gradient(160deg, rgba(21,30,43,.95), rgba(11,16,24,.95));
      box-shadow:var(--shadow);
      overflow:hidden;
      padding:1rem;
    }
    .hero-stage::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(104,240,211,.16), transparent 30%),
        linear-gradient(220deg, rgba(141,123,255,.12), transparent 24%),
        linear-gradient(180deg, transparent 62%, rgba(0,0,0,.36) 100%);
      pointer-events:none;
    }
    .stage-grid{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1.15fr .95fr;
      grid-template-rows: 170px 170px;
      gap:.75rem;
      min-height:352px;
    }
    .stage-tile{
      position:relative;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      background:
        linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
        linear-gradient(135deg, rgba(104,240,211,.08), rgba(141,123,255,.08));
      box-shadow:0 12px 24px rgba(0,0,0,.2);
      min-height:100%;
    }
    .stage-tile::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
      mix-blend-mode:screen;
      opacity:.22;
      pointer-events:none;
    }
    .stage-tile .tile-meta{
      position:absolute;
      inset:auto 0 0 0;
      padding:.9rem .85rem;
      background:linear-gradient(180deg, transparent, rgba(8,12,18,.9));
    }
    .tile-meta .tile-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.25rem .5rem;
      border-radius:999px;
      background:rgba(0,0,0,.28);
      color:#f7fbff;
      font-size:.76rem;
      border:1px solid rgba(255,255,255,.08);
    }
    .tile-meta h3{
      margin:.55rem 0 .2rem;
      font-size:1rem;
      line-height:1.22;
      color:#fff;
    }
    .tile-meta p{
      margin:0;
      color:#c4d1df;
      font-size:.84rem;
      line-height:1.45;
    }
    .tile-lead{
      grid-row:1 / span 2;
      background:
        linear-gradient(150deg, rgba(104,240,211,.15), rgba(141,123,255,.12)),
        linear-gradient(135deg, #142134, #0d141e 74%);
    }
    .tile-top{
      background:
        linear-gradient(135deg, rgba(255,95,166,.14), rgba(104,240,211,.08)),
        linear-gradient(135deg, #151e2b, #0c1118 74%);
    }
    .tile-bottom{
      background:
        linear-gradient(135deg, rgba(255,211,111,.12), rgba(141,123,255,.1)),
        linear-gradient(135deg, #151e2b, #0c1118 74%);
    }
    .hero-panel{
      position:relative;
      z-index:1;
      margin-top:.75rem;
      display:grid;
      grid-template-columns:1fr;
      gap:.75rem;
    }
    .rule-panel{
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      border-radius:8px;
      padding:.95rem;
    }
    .rule-panel h4{
      margin:0 0 .65rem;
      font-size:.98rem;
      color:#fff;
    }
    .rule-list{
      display:grid;
      gap:.55rem;
      margin:0;
      padding:0;
      list-style:none;
    }
    .rule-list li{
      display:flex;
      gap:.55rem;
      align-items:flex-start;
      color:#d6e0ed;
      font-size:.9rem;
    }
    .rule-list li i{
      flex:0 0 16px;
      margin-top:.15rem;
      color:var(--accent);
      width:16px;
      height:16px;
    }
    .quick-tags{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
    }
    .quick-tags .badge{
      border-radius:8px;
      padding:.45rem .6rem;
      font-weight:600;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#e8f0fb;
    }

    .section{
      padding:2.1rem 0;
    }
    .section-head{
      display:flex;
      justify-content:space-between;
      align-items:flex-end;
      gap:1rem;
      margin-bottom:1.1rem;
    }
    .section-head h2{
      margin:0;
      font-size:1.45rem;
      line-height:1.2;
      letter-spacing:0;
      color:#f3f6fc;
    }
    .section-head p{
      margin:0;
      color:var(--muted);
      max-width:56rem;
      font-size:.98rem;
    }

    .highlights-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:.9rem;
    }
    .mini-card{
      padding:1rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
      box-shadow:var(--shadow-soft);
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
      min-height:150px;
    }
    .mini-card:hover{
      transform:translateY(-2px);
      border-color:rgba(104,240,211,.22);
      background:linear-gradient(180deg, rgba(104,240,211,.06), rgba(255,255,255,.03));
    }
    .mini-icon{
      width:40px;height:40px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      border-radius:8px;
      background:rgba(104,240,211,.1);
      border:1px solid rgba(104,240,211,.16);
      margin-bottom:.8rem;
      color:var(--accent);
    }
    .mini-icon i{width:18px;height:18px}
    .mini-card h3{
      margin:0 0 .45rem;
      font-size:1rem;
      line-height:1.22;
      color:#fff;
    }
    .mini-card p{
      margin:0;
      color:#b9c6d7;
      font-size:.92rem;
      line-height:1.55;
    }

    .poster-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:.85rem;
    }
    .poster{
      position:relative;
      min-height:165px;
      border-radius:8px;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:var(--shadow-soft);
      background:#1a2130;
      transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
    }
    .poster:hover{
      transform:translateY(-2px);
      border-color:rgba(141,123,255,.24);
      box-shadow:0 14px 28px rgba(0,0,0,.26);
    }
    .poster::before{
      content:"";
      position:absolute;
      inset:0;
      opacity:.95;
      background:
        linear-gradient(180deg, rgba(7,11,17,.04), rgba(7,11,17,.82)),
        linear-gradient(135deg, var(--tone-a), var(--tone-b));
    }
    .poster::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.07), transparent 38%),
        repeating-linear-gradient(145deg, rgba(255,255,255,.05) 0 1px, transparent 1px 9px);
      opacity:.22;
      mix-blend-mode:screen;
      pointer-events:none;
    }
    .poster.large{grid-column:span 5; min-height:345px;}
    .poster.tall{grid-column:span 4; min-height:345px;}
    .poster.square{grid-column:span 3; min-height:165px;}
    .poster.wide{grid-column:span 8; min-height:165px;}
    .poster .poster-body{
      position:absolute;
      inset:auto 0 0 0;
      z-index:1;
      padding:1rem;
      background:linear-gradient(180deg, transparent, rgba(6,10,16,.92));
    }
    .poster .poster-tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.25rem .55rem;
      border-radius:999px;
      background:rgba(0,0,0,.28);
      color:#f5f8fc;
      font-size:.75rem;
      border:1px solid rgba(255,255,255,.09);
    }
    .poster h3{
      margin:.55rem 0 .22rem;
      font-size:1.02rem;
      line-height:1.24;
      color:#fff;
    }
    .poster p{
      margin:0;
      color:#ced9e6;
      font-size:.84rem;
      line-height:1.45;
      max-width:95%;
    }

    .matrix-wrap{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:1rem;
      align-items:start;
    }
    .matrix-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:.9rem;
    }
    .matrix-item{
      padding:1rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      min-height:154px;
    }
    .matrix-item .topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:.6rem;
      margin-bottom:.7rem;
    }
    .matrix-item h3{
      margin:0;
      font-size:1rem;
      color:#fff;
    }
    .matrix-item p{
      margin:0;
      color:#b9c6d7;
      font-size:.92rem;
      line-height:1.55;
    }
    .status-badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      padding:.28rem .55rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#edf4ff;
      font-size:.75rem;
      white-space:nowrap;
    }
    .status-dot{
      width:7px;height:7px;border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 .2rem rgba(104,240,211,.12);
    }

    .side-stack{
      display:grid;
      gap:.9rem;
    }
    .side-card{
      padding:1rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(17,24,36,.96), rgba(11,16,24,.96));
      box-shadow:var(--shadow-soft);
    }
    .side-card h3{
      margin:0 0 .6rem;
      font-size:1rem;
      color:#fff;
    }
    .side-card p{
      margin:0 0 .85rem;
      color:#b7c4d5;
      font-size:.92rem;
      line-height:1.55;
    }
    .step-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:.6rem;
    }
    .step-list li{
      display:flex;
      gap:.7rem;
      align-items:flex-start;
      padding:.65rem .7rem;
      border-radius:8px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      color:#dbe4f1;
      font-size:.9rem;
    }
    .step-index{
      flex:0 0 24px;
      height:24px;
      border-radius:8px;
      display:inline-flex;
      align-items:center;
      justify-content:center;
      background:rgba(104,240,211,.12);
      border:1px solid rgba(104,240,211,.18);
      color:#bffbf0;
      font-weight:700;
      font-size:.78rem;
    }

    .updates-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:1rem;
      align-items:start;
    }
    .update-list{
      display:grid;
      gap:.7rem;
    }
    .update-row{
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      gap:1rem;
      padding:.88rem 1rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease;
    }
    .update-row:hover{
      transform:translateY(-1px);
      border-color:rgba(104,240,211,.18);
      background:rgba(104,240,211,.05);
    }
    .update-row h3{
      margin:0 0 .22rem;
      font-size:.98rem;
      line-height:1.35;
      color:#fff;
    }
    .update-row p{
      margin:0;
      color:#b7c4d5;
      font-size:.9rem;
      line-height:1.5;
      max-width:47rem;
    }
    .update-meta{
      flex:0 0 auto;
      text-align:right;
      display:grid;
      gap:.35rem;
      justify-items:end;
    }
    .update-meta small{
      color:var(--muted);
    }
    .link-soft{
      color:#d9e5f4;
      font-size:.88rem;
      display:inline-flex;
      align-items:center;
      gap:.25rem;
    }
    .link-soft:hover{
      color:#fff;
    }

    .proof-grid{
      display:grid;
      grid-template-columns: .95fr 1.05fr;
      gap:1rem;
      align-items:stretch;
    }
    .proof-stats{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:.9rem;
    }
    .proof-stat{
      padding:1rem;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
    }
    .proof-stat strong{
      display:block;
      font-size:1.15rem;
      color:#fff;
      margin-bottom:.2rem;
    }
    .proof-stat span{
      color:#b7c4d5;
      font-size:.9rem;
    }
    .quote-card{
      border-radius:8px;
      padding:1.15rem;
      border:1px solid rgba(104,240,211,.16);
      background:
        linear-gradient(135deg, rgba(104,240,211,.08), rgba(141,123,255,.06)),
        rgba(255,255,255,.03);
      box-shadow:var(--shadow-soft);
    }
    .quote-card .quote-top{
      display:flex;
      align-items:center;
      gap:.6rem;
      margin-bottom:.8rem;
      color:#fff;
    }
    .quote-card .quote-top i{
      color:var(--warn);
      width:18px;height:18px;
    }
    .quote-card p{
      margin:0;
      color:#deebf7;
      font-size:.97rem;
      line-height:1.65;
    }
    .chip-wall{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem;
      margin-top:.9rem;
    }
    .chip-wall .badge{
      border-radius:8px;
      padding:.45rem .6rem;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.04);
      color:#eaf2fd;
      font-weight:600;
    }

    .accordion.custom-acc{
      display:grid;
      gap:.7rem;
    }
    .accordion-item{
      border-radius:8px !important;
      overflow:hidden;
      border:1px solid rgba(255,255,255,.08) !important;
      background:rgba(255,255,255,.03) !important;
    }
    .accordion-button{
      background:rgba(255,255,255,.03);
      color:#f2f6fb;
      border:none;
      box-shadow:none;
      padding:1rem 1rem;
      font-size:.98rem;
      line-height:1.4;
    }
    .accordion-button:not(.collapsed){
      color:#fff;
      background:rgba(104,240,211,.08);
      box-shadow:none;
    }
    .accordion-button::after{
      filter:invert(1) grayscale(1);
      opacity:.8;
    }
    .accordion-body{
      color:#c2d0df;
      padding:0 1rem 1rem;
      font-size:.93rem;
      line-height:1.72;
    }

    .cta-band{
      position:relative;
      overflow:hidden;
      border-radius:8px;
      border:1px solid rgba(104,240,211,.16);
      background:
        linear-gradient(135deg, rgba(104,240,211,.09), rgba(141,123,255,.08)),
        linear-gradient(180deg, rgba(17,24,36,.98), rgba(10,14,20,.98));
      padding:1.2rem;
      box-shadow:var(--shadow);
    }
    .cta-band::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(255,255,255,.06), transparent 35%),
        repeating-linear-gradient(145deg, rgba(255,255,255,.045) 0 1px, transparent 1px 10px);
      opacity:.2;
      pointer-events:none;
    }
    .cta-band-inner{
      position:relative;
      z-index:1;
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .cta-band h2{
      margin:0 0 .35rem;
      font-size:1.45rem;
      line-height:1.2;
      color:#fff;
    }
    .cta-band p{
      margin:0;
      color:#c6d3e2;
      max-width:58rem;
      font-size:.96rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:.65rem;
    }

    .site-footer{
      margin-top:2.5rem;
      border-top:1px solid var(--line-soft);
      background:#091016;
      padding:1.3rem 0 1.8rem;
    }
    .footer-top{
      display:flex;
      flex-wrap:wrap;
      gap:1rem;
      align-items:flex-start;
      justify-content:space-between;
      padding-bottom:1rem;
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:.7rem;
      min-width:0;
    }
    .footer-brand .brand-text strong{
      color:#fff;
    }
    .footer-brand .brand-text span{
      color:#92a2b8;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:.45rem .9rem;
      align-items:center;
      justify-content:flex-end;
    }
    .footer-links a{
      color:#c5d0de;
      font-size:.92rem;
      padding:.2rem 0;
    }
    .footer-links a:hover{color:#fff}
    .footer-bottom{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      justify-content:space-between;
      gap:.75rem;
      padding-top:1rem;
      color:#7e8ea5;
      font-size:.88rem;
    }

    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      font-size:.82rem;
      color:#d4f7ef;
      background:rgba(104,240,211,.08);
      border:1px solid rgba(104,240,211,.16);
      border-radius:8px;
      padding:.3rem .55rem;
      margin-bottom:.75rem;
    }

    .mobile-only{display:none}
    .desktop-only{display:block}

    @media (max-width: 1199.98px){
      .hero-grid{grid-template-columns:1fr}
      .stage-grid{min-height:320px}
      .matrix-wrap,
      .updates-grid,
      .proof-grid{grid-template-columns:1fr}
      .hero-copy h1{max-width:14ch}
    }
    @media (max-width: 991.98px){
      .highlights-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
      .poster.large,.poster.tall,.poster.square,.poster.wide{grid-column:span 6; min-height:190px}
      .hero-stats{grid-template-columns:1fr}
      .section-head{flex-direction:column; align-items:flex-start}
      .nav-search{min-width:100%; margin-top:.7rem}
      .navbar-collapse{background:#fff; border-top:1px solid rgba(17,24,36,.08); padding-top:.75rem}
      .footer-top{flex-direction:column}
      .footer-links{justify-content:flex-start}
      .nav-links .nav-link{padding:.7rem .9rem}
    }
    @media (max-width: 767.98px){
      .hero-copy h1{font-size:2.25rem}
      .hero-copy p{font-size:.98rem}
      .countdown-bar{align-items:flex-start}
      .stage-grid{
        grid-template-columns:1fr;
        grid-template-rows:auto;
        min-height:auto;
      }
      .tile-lead{grid-row:auto; min-height:220px}
      .poster-grid{gap:.75rem}
      .poster.large,.poster.tall,.poster.square,.poster.wide{grid-column:span 12; min-height:190px}
      .highlights-grid{grid-template-columns:1fr}
      .matrix-grid{grid-template-columns:1fr}
      .proof-stats{grid-template-columns:1fr}
      .cta-band-inner{align-items:flex-start}
      .cta-actions{width:100%}
      .btn-ui{width:100%}
      .nav-search{flex-wrap:wrap}
      .nav-search .search-wrap{width:100%}
      .nav-search .btn-ui{width:100%}
      .site-header .navbar{padding:.55rem 0}
      .brand-text strong{font-size:.92rem}
      .brand-mark{width:36px;height:36px;flex-basis:36px}
    }
    @media (max-width: 575.98px){
      .container-wide{width:min(calc(100% - 1.1rem), var(--container))}
      .hero-inner{padding:1rem 0 2rem}
      .section{padding:1.7rem 0}
      .hero-copy h1{font-size:2rem}
      .hero-copy p{font-size:.95rem}
      .countdown-bar .countdown-timer{font-size:.94rem}
      .cta-band{padding:1rem}
      .cta-band h2{font-size:1.22rem}
      .accordion-button{padding:.92rem .92rem}
      .accordion-body{padding:0 .92rem .95rem}
      .brand-text strong{max-width:9.5rem}
      .brand-text span{display:none}
      .section-head h2{font-size:1.25rem}
    }

    .focus-ring{
      position:relative;
    }
    .focus-ring::after{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      box-shadow:inset 0 0 0 1px rgba(104,240,211,.14);
      opacity:0;
      transition:opacity .18s ease;
    }
    .focus-ring:hover::after,
    .focus-ring:focus-within::after{
      opacity:1;
    }

/* roulang page: category2 */
:root{
      --bg:#0b0f14;
      --bg-2:#10161d;
      --surface:#121a23;
      --surface-2:#151f2a;
      --surface-3:#0f151d;
      --line:#243244;
      --line-2:#1c2734;
      --text:#edf4ff;
      --muted:#92a2b8;
      --muted-2:#6f8197;
      --accent:#35f2d0;
      --accent-2:#bb6bff;
      --accent-3:#ff5db0;
      --accent-4:#ffc85a;
      --shadow:0 16px 40px rgba(0,0,0,.28);
      --radius:8px;
      --radius-sm:6px;
      --radius-xs:4px;
      --space:24px;
      --space-lg:36px;
      --space-xl:56px;
      --container:1240px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      background:
        linear-gradient(180deg, rgba(16,22,29,.98) 0%, rgba(11,15,20,.98) 28%, rgba(11,15,20,1) 100%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0, rgba(255,255,255,.018) 1px, transparent 1px, transparent 84px);
      color:var(--text);
      line-height:1.65;
      letter-spacing:0;
      min-height:100vh;
      overflow-x:hidden;
    }
    a{
      color:inherit;
      text-decoration:none;
      transition:color .2s ease, opacity .2s ease, transform .2s ease, border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }
    a:hover{color:inherit}
    img{max-width:100%;display:block}
    button,input,textarea,select{font:inherit}
    ::selection{background:rgba(53,242,208,.22);color:var(--text)}
    :focus-visible{
      outline:2px solid rgba(53,242,208,.72);
      outline-offset:2px;
    }

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

    .site-header{
      position:sticky;
      top:0;
      z-index:1020;
      background:rgba(248,250,252,.96);
      border-bottom:1px solid rgba(26,39,52,.12);
      box-shadow:0 1px 0 rgba(0,0,0,.02);
      backdrop-filter:blur(10px);
    }
    .site-header .navbar{
      padding:.85rem 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:.8rem;
      min-width:0;
    }
    .brand-mark{
      width:40px;
      height:40px;
      border-radius:10px;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(17,23,31,1), rgba(20,28,38,1));
      color:var(--accent);
      border:1px solid rgba(26,39,52,.18);
      box-shadow:0 10px 20px rgba(0,0,0,.08);
      flex:0 0 auto;
    }
    .brand-mark svg{width:20px;height:20px}
    .brand-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
      color:#101723;
    }
    .brand-text strong{
      font-size:1rem;
      line-height:1.1;
      font-weight:800;
      white-space:nowrap;
    }
    .brand-text span{
      font-size:.78rem;
      color:#56677d;
      white-space:nowrap;
    }
    .nav-links{
      align-items:center;
      gap:.25rem;
    }
    .nav-links .nav-link{
      position:relative;
      color:#243243;
      font-weight:700;
      font-size:.94rem;
      padding:.7rem .9rem;
      border-radius:8px;
    }
    .nav-links .nav-link:hover{
      color:#0d1420;
      background:rgba(17,23,31,.04);
    }
    .nav-links .nav-link.active{
      color:#0d1420;
      background:rgba(53,242,208,.08);
    }
    .nav-links .nav-link.active::after{
      content:"";
      position:absolute;
      left:.9rem;
      right:.9rem;
      bottom:.35rem;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .nav-search{
      display:flex;
      align-items:center;
      gap:.7rem;
      flex-wrap:wrap;
    }
    .search-wrap{
      display:flex;
      align-items:center;
      gap:.6rem;
      min-width:280px;
      padding:.7rem .85rem;
      border-radius:8px;
      background:#fff;
      border:1px solid rgba(24,36,51,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
    }
    .search-wrap svg{
      width:16px;
      height:16px;
      color:#657688;
      flex:0 0 auto;
    }
    .search-wrap input{
      width:100%;
      border:0;
      background:transparent;
      color:#13202d;
      padding:0;
      outline:none;
      box-shadow:none;
      min-width:0;
    }
    .search-wrap input::placeholder{color:#728397}
    .btn-ui{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.48rem;
      border:1px solid transparent;
      border-radius:8px;
      padding:.72rem 1rem;
      font-weight:800;
      font-size:.92rem;
      line-height:1;
      white-space:nowrap;
      transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, opacity .18s ease;
      text-decoration:none;
    }
    .btn-ui svg{
      width:16px;
      height:16px;
      flex:0 0 auto;
    }
    .btn-ui:hover{
      transform:translateY(-1px);
      box-shadow:0 8px 20px rgba(0,0,0,.12);
    }
    .btn-ui:active{transform:translateY(0)}
    .btn-dark-ui{
      color:#081018;
      background:linear-gradient(135deg, var(--accent), #67ffe1);
      border-color:rgba(17,23,31,.08);
    }
    .btn-dark-ui:hover{
      color:#081018;
      border-color:rgba(53,242,208,.9);
      box-shadow:0 0 0 4px rgba(53,242,208,.12);
    }
    .btn-ghost-ui{
      color:var(--text);
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.12);
    }
    .btn-ghost-ui:hover{
      color:var(--text);
      background:rgba(255,255,255,.08);
      border-color:rgba(53,242,208,.34);
      box-shadow:0 0 0 4px rgba(53,242,208,.08);
    }

    .navbar-toggler{
      border-radius:8px;
      border:1px solid rgba(20,28,38,.18);
      padding:.5rem .65rem;
      box-shadow:none;
    }
    .navbar-toggler:focus{box-shadow:0 0 0 .2rem rgba(53,242,208,.16)}
    .navbar-toggler-icon{
      width:1.1em;
      height:1.1em;
    }

    main{
      padding-bottom:72px;
    }
    .notice-strip{
      padding:16px 0 4px;
    }
    .notice-inner{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:12px 16px;
      background:linear-gradient(135deg, rgba(21,31,42,.92), rgba(14,20,28,.96));
      border:1px solid rgba(53,242,208,.16);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .notice-copy{
      display:flex;
      align-items:center;
      gap:10px;
      color:var(--text);
      min-width:0;
      flex-wrap:wrap;
    }
    .notice-copy i{
      width:16px;
      height:16px;
      color:var(--accent);
      flex:0 0 auto;
    }
    .notice-copy strong{
      font-size:.95rem;
      font-weight:800;
    }
    .notice-copy span{
      color:var(--muted);
      font-size:.92rem;
    }
    .countdown{
      display:flex;
      align-items:baseline;
      gap:10px;
      flex:0 0 auto;
      padding:8px 12px;
      border-radius:8px;
      border:1px solid rgba(53,242,208,.18);
      background:rgba(53,242,208,.06);
    }
    .countdown-label{
      color:var(--muted);
      font-size:.82rem;
      font-weight:700;
    }
    .countdown-time{
      font-size:1.02rem;
      font-weight:900;
      color:var(--accent);
      letter-spacing:0;
      font-variant-numeric:tabular-nums;
    }

    .hero-band{
      padding:18px 0 26px;
    }
    .hero-grid{
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:20px;
      align-items:stretch;
      padding:22px;
      border-radius:var(--radius);
      border:1px solid rgba(53,242,208,.12);
      background:
        linear-gradient(180deg, rgba(16,22,29,.96), rgba(11,15,20,.98)),
        radial-gradient(1000px 300px at 0% 0%, rgba(53,242,208,.08), transparent 45%),
        radial-gradient(900px 260px at 100% 0%, rgba(187,107,255,.08), transparent 42%);
      box-shadow:var(--shadow);
      overflow:hidden;
      position:relative;
    }
    .hero-grid::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(180deg, rgba(255,255,255,.022) 1px, transparent 1px);
      background-size:72px 72px;
      opacity:.3;
      pointer-events:none;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.9), rgba(0,0,0,.15));
    }
    .hero-copy,
    .hero-board{
      position:relative;
      z-index:1;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:.34rem .72rem;
      border-radius:999px;
      background:rgba(53,242,208,.08);
      border:1px solid rgba(53,242,208,.16);
      color:var(--accent);
      font-size:.82rem;
      font-weight:800;
      letter-spacing:0;
      margin-bottom:14px;
    }
    .eyebrow i{
      width:14px;
      height:14px;
    }
    .hero-title{
      margin:0;
      font-size:2.7rem;
      line-height:1.12;
      font-weight:900;
      letter-spacing:0;
      color:var(--text);
      text-wrap:balance;
    }
    .hero-title span{
      display:block;
      color:rgba(237,244,255,.94);
      font-size:1.06rem;
      font-weight:700;
      line-height:1.45;
      margin-top:12px;
      max-width:46rem;
      text-wrap:pretty;
    }
    .hero-lead{
      margin:16px 0 0;
      color:var(--muted);
      font-size:1rem;
      max-width:44rem;
    }
    .hero-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      margin-top:22px;
    }
    .hero-stats{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:12px;
      margin-top:24px;
      max-width:720px;
    }
    .hero-stat{
      padding:14px 14px 13px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      min-height:86px;
    }
    .hero-stat .stat-label{
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.82rem;
      font-weight:700;
      margin-bottom:8px;
    }
    .hero-stat .stat-label svg{
      width:14px;
      height:14px;
      color:var(--accent);
    }
    .hero-stat .stat-value{
      color:var(--text);
      font-weight:900;
      font-size:1.16rem;
      line-height:1.2;
    }
    .hero-stat .stat-note{
      display:block;
      margin-top:6px;
      color:var(--muted-2);
      font-size:.82rem;
    }

    .hero-board{
      border-radius:var(--radius);
      border:1px solid rgba(53,242,208,.12);
      background:linear-gradient(180deg, rgba(18,26,35,.96), rgba(12,17,23,.98));
      padding:18px;
      display:flex;
      flex-direction:column;
      gap:14px;
      min-height:100%;
    }
    .board-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      padding-bottom:10px;
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .board-head strong{
      font-size:1rem;
      font-weight:900;
    }
    .board-head .board-badge{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--accent);
      font-size:.82rem;
      font-weight:800;
    }
    .board-head .board-badge .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(53,242,208,.12);
      flex:0 0 auto;
    }
    .mini-wall{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
    }
    .mini-tile{
      position:relative;
      min-height:108px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(135deg, rgba(53,242,208,.16), rgba(17,23,31,.86)),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent);
      overflow:hidden;
      padding:12px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      gap:10px;
    }
    .mini-tile:nth-child(2n){
      background:
        linear-gradient(135deg, rgba(187,107,255,.16), rgba(17,23,31,.88)),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent);
    }
    .mini-tile:nth-child(3n){
      background:
        linear-gradient(135deg, rgba(255,95,176,.15), rgba(17,23,31,.88)),
        linear-gradient(180deg, rgba(255,255,255,.05), transparent);
    }
    .mini-tile.wide{grid-column:span 2}
    .mini-tile.tall{grid-row:span 2; min-height:226px}
    .tile-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .tile-top .mark{
      width:28px;
      height:28px;
      border-radius:8px;
      display:grid;
      place-items:center;
      background:rgba(9,14,19,.42);
      border:1px solid rgba(255,255,255,.08);
      color:var(--text);
    }
    .tile-top .mark svg{width:15px;height:15px}
    .tile-status{
      font-size:.76rem;
      font-weight:800;
      color:var(--accent);
      padding:.2rem .45rem;
      border-radius:999px;
      background:rgba(53,242,208,.08);
      border:1px solid rgba(53,242,208,.16);
    }
    .mini-tile h3{
      margin:0;
      font-size:1rem;
      line-height:1.25;
      font-weight:900;
      color:var(--text);
    }
    .mini-tile p{
      margin:0;
      font-size:.83rem;
      line-height:1.45;
      color:rgba(237,244,255,.78);
      max-width:22ch;
    }

    .board-list{
      display:flex;
      flex-direction:column;
      gap:10px;
      padding-top:6px;
    }
    .board-item{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:12px 0 0;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .board-item:first-child{
      border-top:0;
      padding-top:0;
    }
    .board-item .left{
      display:flex;
      flex-direction:column;
      gap:3px;
      min-width:0;
    }
    .board-item strong{
      font-size:.95rem;
      font-weight:900;
    }
    .board-item span{
      color:var(--muted);
      font-size:.83rem;
    }
    .board-item .flag{
      display:inline-flex;
      align-items:center;
      gap:6px;
      color:var(--accent-4);
      font-size:.78rem;
      font-weight:800;
      white-space:nowrap;
      flex:0 0 auto;
    }
    .board-item .flag i{
      width:13px;
      height:13px;
    }

    .section-band{
      padding:26px 0;
    }
    .section-band.alt{
      background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,.01));
      border-top:1px solid rgba(255,255,255,.04);
      border-bottom:1px solid rgba(255,255,255,.04);
    }
    .section-head{
      display:flex;
      align-items:flex-end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:16px;
      flex-wrap:wrap;
    }
    .section-head h2{
      margin:0;
      font-size:1.55rem;
      line-height:1.22;
      font-weight:900;
      color:var(--text);
      letter-spacing:0;
    }
    .section-head p{
      margin:8px 0 0;
      color:var(--muted);
      max-width:56rem;
      font-size:.96rem;
    }
    .inline-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:var(--accent);
      font-weight:800;
      font-size:.92rem;
      white-space:nowrap;
    }
    .inline-link::after{
      content:"";
      width:18px;
      height:1px;
      background:rgba(53,242,208,.8);
      transition:width .2s ease;
    }
    .inline-link:hover::after{width:26px}

    .compare-layout{
      display:grid;
      grid-template-columns:minmax(0, 1.35fr) 360px;
      gap:20px;
      align-items:start;
    }
    .panel-shell{
      border-radius:var(--radius);
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(18,26,35,.96), rgba(14,20,27,.98));
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .panel-inner{
      padding:18px;
    }
    .compare-panel .panel-inner{
      padding:0;
    }
    .compare-table{
      display:grid;
      gap:0;
    }
    .comparison-row{
      display:grid;
      grid-template-columns:180px repeat(3, minmax(0, 1fr));
      gap:0;
      border-top:1px solid rgba(255,255,255,.06);
    }
    .comparison-row:first-child{
      border-top:0;
    }
    .comparison-cell{
      padding:16px 18px;
      border-right:1px solid rgba(255,255,255,.06);
      min-width:0;
    }
    .comparison-cell:last-child{
      border-right:0;
    }
    .comparison-row.head .comparison-cell{
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:.8rem;
      font-weight:800;
      text-transform:none;
      letter-spacing:0;
    }
    .comparison-row.head .comparison-cell:first-child{
      color:var(--text);
    }
    .comparison-row.body .comparison-cell:first-child{
      display:flex;
      align-items:flex-start;
      gap:10px;
      font-weight:900;
      color:var(--text);
    }
    .comparison-row.body .comparison-cell:first-child .num{
      width:24px;
      height:24px;
      border-radius:8px;
      display:grid;
      place-items:center;
      flex:0 0 auto;
      font-size:.82rem;
      color:#081018;
      background:linear-gradient(135deg, var(--accent), #6efdd9);
    }
    .comparison-title{
      margin:0 0 4px;
      font-size:.98rem;
      color:var(--text);
      font-weight:900;
    }
    .comparison-note{
      margin:0;
      color:var(--muted);
      font-size:.88rem;
      line-height:1.5;
    }

    .summary-panel{
      position:sticky;
      top:92px;
    }
    .summary-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding-bottom:14px;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:14px;
    }
    .summary-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:.32rem .62rem;
      border-radius:999px;
      background:rgba(187,107,255,.08);
      border:1px solid rgba(187,107,255,.18);
      color:#d9beff;
      font-size:.78rem;
      font-weight:800;
      margin-bottom:8px;
    }
    .summary-head h3{
      margin:0;
      font-size:1.08rem;
      font-weight:900;
      color:var(--text);
    }
    .summary-head p{
      margin:6px 0 0;
      color:var(--muted);
      font-size:.9rem;
    }
    .summary-list{
      display:grid;
      gap:12px;
    }
    .summary-item{
      padding:13px 14px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
    }
    .summary-item .label{
      display:flex;
      align-items:center;
      gap:8px;
      color:var(--muted);
      font-size:.8rem;
      font-weight:800;
      margin-bottom:8px;
    }
    .summary-item .label .dot{
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--accent);
      box-shadow:0 0 0 4px rgba(53,242,208,.12);
      flex:0 0 auto;
    }
    .summary-item .value{
      color:var(--text);
      font-weight:900;
      line-height:1.35;
      font-size:.96rem;
    }
    .summary-item .meta{
      display:block;
      margin-top:4px;
      color:var(--muted-2);
      font-size:.82rem;
    }
    .summary-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:14px;
    }
    .summary-tags span{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.32rem .55rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.03);
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
    }
    .summary-tags span i{
      width:12px;
      height:12px;
      color:var(--accent);
    }

    .entry-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .entry-card{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(21,31,42,.96), rgba(15,21,29,.98));
      padding:18px;
      min-height:220px;
      display:flex;
      flex-direction:column;
      gap:12px;
      box-shadow:0 12px 24px rgba(0,0,0,.16);
    }
    .entry-card .icon{
      width:44px;
      height:44px;
      border-radius:12px;
      display:grid;
      place-items:center;
      background:rgba(53,242,208,.08);
      border:1px solid rgba(53,242,208,.15);
      color:var(--accent);
      flex:0 0 auto;
    }
    .entry-card:nth-child(2) .icon{
      background:rgba(187,107,255,.08);
      border-color:rgba(187,107,255,.16);
      color:#d8beff;
    }
    .entry-card:nth-child(3) .icon{
      background:rgba(255,95,176,.08);
      border-color:rgba(255,95,176,.16);
      color:#ffb5dc;
    }
    .entry-card .icon svg{width:20px;height:20px}
    .entry-card h3{
      margin:0;
      font-size:1.08rem;
      font-weight:900;
      color:var(--text);
    }
    .entry-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
      min-height:4.5em;
    }
    .entry-tags{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:auto;
    }
    .entry-tags span{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.28rem .48rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      background:rgba(255,255,255,.03);
      font-size:.78rem;
      font-weight:700;
    }
    .entry-tags span i{
      width:11px;
      height:11px;
      color:var(--accent);
    }
    .entry-link{
      display:inline-flex;
      align-items:center;
      gap:8px;
      margin-top:6px;
      color:var(--accent);
      font-weight:800;
      font-size:.9rem;
    }
    .entry-link i{width:15px;height:15px}

    .step-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:16px;
    }
    .step-card{
      position:relative;
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(18,26,35,.96), rgba(13,18,24,.98));
      padding:18px;
      min-height:180px;
    }
    .step-no{
      width:34px;
      height:34px;
      border-radius:10px;
      display:grid;
      place-items:center;
      font-weight:900;
      color:#081018;
      background:linear-gradient(135deg, var(--accent-4), #ffe7a4);
      margin-bottom:12px;
      box-shadow:0 12px 18px rgba(255,200,90,.14);
    }
    .step-card h3{
      margin:0 0 8px;
      font-size:1.03rem;
      font-weight:900;
      color:var(--text);
    }
    .step-card p{
      margin:0;
      color:var(--muted);
      font-size:.92rem;
      line-height:1.55;
    }
    .step-card ul{
      margin:12px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:8px;
    }
    .step-card li{
      display:flex;
      align-items:flex-start;
      gap:8px;
      color:var(--muted);
      font-size:.9rem;
    }
    .step-card li i{
      width:15px;
      height:15px;
      color:var(--accent);
      margin-top:2px;
      flex:0 0 auto;
    }

    .cta-band .cta-panel{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      padding:22px;
      border-radius:var(--radius);
      border:1px solid rgba(53,242,208,.14);
      background:
        linear-gradient(135deg, rgba(18,26,35,.98), rgba(13,18,24,.98));
      box-shadow:var(--shadow);
    }
    .cta-copy{
      max-width:760px;
    }
    .cta-copy h2{
      margin:0;
      font-size:1.45rem;
      line-height:1.22;
      font-weight:900;
    }
    .cta-copy p{
      margin:10px 0 0;
      color:var(--muted);
      font-size:.96rem;
    }
    .cta-actions{
      display:flex;
      align-items:center;
      gap:12px;
      flex-wrap:wrap;
      flex:0 0 auto;
    }

    .faq-wrap{
      border-radius:var(--radius);
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      background:linear-gradient(180deg, rgba(18,26,35,.96), rgba(13,18,24,.98));
      box-shadow:var(--shadow);
    }
    .accordion{
      --bs-accordion-bg: transparent;
      --bs-accordion-border-color: rgba(255,255,255,.08);
      --bs-accordion-btn-bg: rgba(255,255,255,.02);
      --bs-accordion-active-bg: rgba(53,242,208,.05);
      --bs-accordion-active-color: var(--text);
      --bs-accordion-btn-color: var(--text);
      --bs-accordion-btn-focus-border-color: rgba(53,242,208,.36);
      --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(53,242,208,.12);
      --bs-accordion-body-padding-x: 18px;
      --bs-accordion-body-padding-y: 0 18px 18px;
    }
    .accordion-item{
      border-left:0;
      border-right:0;
      background:transparent;
      color:var(--text);
      border-color:rgba(255,255,255,.08);
    }
    .accordion-item:first-child{border-top:0}
    .accordion-button{
      padding:16px 18px;
      font-size:1rem;
      font-weight:900;
      color:var(--text);
      box-shadow:none;
      background:rgba(255,255,255,.02);
    }
    .accordion-button:not(.collapsed){
      color:var(--text);
      background:rgba(53,242,208,.05);
    }
    .accordion-button::after{
      filter:invert(1) grayscale(1) brightness(1.6);
    }
    .accordion-body{
      padding:0 18px 18px;
      color:var(--muted);
      font-size:.94rem;
      line-height:1.65;
    }

    .site-footer{
      margin-top:18px;
      border-top:1px solid rgba(255,255,255,.06);
      background:linear-gradient(180deg, rgba(10,14,19,.98), rgba(8,11,16,1));
      color:var(--muted);
    }
    .site-footer .container-wide{
      padding-top:24px;
      padding-bottom:24px;
    }
    .footer-top{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:18px;
      padding-bottom:18px;
      border-bottom:1px solid rgba(255,255,255,.08);
      margin-bottom:16px;
      flex-wrap:wrap;
    }
    .footer-brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:0;
    }
    .footer-brand .brand-mark{
      width:38px;
      height:38px;
    }
    .footer-brand .brand-text strong{
      color:var(--text);
      font-size:.98rem;
    }
    .footer-brand .brand-text span{
      color:var(--muted);
      font-size:.8rem;
    }
    .footer-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px 18px;
    }
    .footer-links a{
      color:var(--muted);
      font-weight:700;
      font-size:.92rem;
    }
    .footer-links a:hover{
      color:var(--text);
    }
    .footer-bottom{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      font-size:.84rem;
    }

    .tag-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .tag-row span{
      display:inline-flex;
      align-items:center;
      gap:6px;
      padding:.34rem .56rem;
      border-radius:999px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.08);
      color:var(--muted);
      font-size:.8rem;
      font-weight:700;
    }
    .tag-row span i{
      width:12px;
      height:12px;
      color:var(--accent);
    }

    .anchor-block{
      display:block;
    }

    @media (max-width: 1199.98px){
      .hero-title{font-size:2.36rem}
      .compare-layout{grid-template-columns:1fr}
      .summary-panel{position:relative;top:auto}
      .entry-grid,.step-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
    }
    @media (max-width: 991.98px){
      .site-header .navbar-collapse{
        padding-top:14px;
      }
      .nav-search{
        width:100%;
        justify-content:flex-start;
        margin-top:12px;
      }
      .search-wrap{
        min-width:0;
        flex:1 1 100%;
      }
      .hero-grid{
        grid-template-columns:1fr;
      }
      .mini-wall{
        grid-template-columns:repeat(2, minmax(0, 1fr));
      }
      .mini-tile.wide{grid-column:span 1}
      .comparison-row{
        grid-template-columns:150px repeat(3, minmax(0, 1fr));
      }
      .cta-panel{
        flex-direction:column;
        align-items:flex-start;
      }
    }
    @media (max-width: 767.98px){
      .hero-grid,
      .panel-inner,
      .cta-band .cta-panel{
        padding:18px;
      }
      .notice-inner{
        align-items:flex-start;
        flex-direction:column;
      }
      .hero-title{font-size:2.05rem}
      .hero-title span{font-size:.98rem}
      .hero-stats{grid-template-columns:1fr}
      .mini-wall{grid-template-columns:1fr}
      .mini-tile.wide,.mini-tile.tall{grid-column:span 1;grid-row:auto;min-height:108px}
      .section-head{
        align-items:flex-start;
      }
      .comparison-row{
        grid-template-columns:1fr;
      }
      .comparison-row.head{
        display:none;
      }
      .comparison-cell{
        border-right:0;
        border-top:1px solid rgba(255,255,255,.06);
      }
      .comparison-row.body .comparison-cell:first-child{
        padding-bottom:8px;
      }
      .comparison-row.body .comparison-cell:not(:first-child){
        padding-top:10px;
      }
      .entry-grid,.step-grid{
        grid-template-columns:1fr;
      }
      .footer-top,
      .footer-bottom{
        align-items:flex-start;
      }
    }
    @media (max-width: 575.98px){
      .container-wide{
        width:min(var(--container), calc(100% - 20px));
      }
      .site-header .navbar{
        padding:.7rem 0;
      }
      .brand-text strong{
        font-size:.93rem;
      }
      .brand-text span{
        font-size:.72rem;
      }
      .hero-band{
        padding-top:14px;
      }
      .hero-grid{
        padding:16px;
      }
      .hero-title{
        font-size:1.84rem;
      }
      .hero-actions{
        flex-direction:column;
        align-items:stretch;
      }
      .hero-actions .btn-ui{
        width:100%;
      }
      .countdown{
        width:100%;
        justify-content:space-between;
      }
      .entry-card,
      .step-card{
        min-height:unset;
      }
      .summary-tags{
        gap:6px;
      }
    }

/* roulang page: category1 */
:root{
  --bg:#0b0f14;
  --bg-soft:#0f151d;
  --panel:#111823;
  --panel-2:#0d131a;
  --line:rgba(255,255,255,.08);
  --line-strong:rgba(255,255,255,.14);
  --text:#edf3f8;
  --muted:#95a2b3;
  --accent:#32d4b4;
  --accent-2:#ad70ff;
  --accent-3:#ff6f9a;
  --warm:#ffd166;
  --shadow:0 20px 42px rgba(0,0,0,.28);
  --radius:8px;
  --radius-sm:6px;
  --container:1320px;
  --header-h:76px;
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
html{
  scroll-behavior:smooth;
}
body{
  margin:0;
  color:var(--text);
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  line-height:1.6;
  background:
    linear-gradient(180deg, rgba(255,255,255,.02), transparent 18%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.022) 0 1px, transparent 1px 128px),
    linear-gradient(180deg, #0b0f14 0%, #0b1016 100%);
  background-attachment:fixed;
}
a{
  color:inherit;
  text-decoration:none;
}
a:hover{
  color:inherit;
}
img{
  max-width:100%;
  display:block;
}
button,
input,
select,
textarea{
  font:inherit;
}
button{
  border:0;
}
:focus-visible{
  outline:2px solid rgba(50,212,180,.85);
  outline-offset:2px;
}
::selection{
  background:rgba(50,212,180,.25);
  color:var(--text);
}
.container-wide{
  width:min(var(--container), calc(100% - 1.8rem));
  margin:0 auto;
}
.site-header{
  position:sticky;
  top:0;
  z-index:1030;
  background:rgba(247,249,252,.96);
  backdrop-filter:saturate(130%) blur(10px);
  border-bottom:1px solid rgba(15,23,42,.08);
  box-shadow:0 1px 0 rgba(255,255,255,.4);
}
.site-header .navbar{
  padding:.9rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:0;
}
.brand-mark{
  width:42px;
  height:42px;
  border-radius:var(--radius);
  display:grid;
  place-items:center;
  background:linear-gradient(135deg, #10161f 0%, #182432 100%);
  color:#8ff5e2;
  border:1px solid rgba(15,23,42,.16);
  flex:0 0 auto;
}
.brand-mark svg{
  width:22px;
  height:22px;
}
.brand-text{
  min-width:0;
}
.brand-text strong{
  display:block;
  color:#0b1220;
  font-size:1rem;
  line-height:1.2;
  letter-spacing:0;
}
.brand-text span{
  display:block;
  margin-top:.15rem;
  color:#546072;
  font-size:.82rem;
  line-height:1.25;
  letter-spacing:0;
}
.nav-links{
  gap:.25rem;
}
.nav-links .nav-link{
  color:#314055;
  font-size:.95rem;
  padding:.55rem .85rem;
  border-radius:var(--radius);
  transition:background-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.nav-links .nav-link:hover{
  background:rgba(15,23,42,.05);
  color:#08111c;
}
.nav-links .nav-link.active{
  background:rgba(50,212,180,.12);
  color:#09241f;
  box-shadow:inset 0 0 0 1px rgba(50,212,180,.24);
}
.nav-search{
  display:flex;
  align-items:center;
  gap:.7rem;
  min-width:0;
}
.search-wrap{
  display:flex;
  align-items:center;
  gap:.55rem;
  min-width:280px;
  padding:.58rem .8rem;
  background:#fff;
  border:1px solid rgba(15,23,42,.12);
  border-radius:var(--radius);
  box-shadow:0 1px 0 rgba(255,255,255,.65);
}
.search-wrap svg{
  width:16px;
  height:16px;
  color:#6b7788;
  flex:0 0 auto;
}
.search-wrap input{
  width:100%;
  border:0;
  background:transparent;
  color:#0d1724;
  padding:0;
  min-width:0;
  outline:none;
}
.search-wrap input::placeholder{
  color:#7f8da1;
}
.btn-ui{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  border-radius:var(--radius);
  padding:.65rem .95rem;
  font-weight:600;
  line-height:1;
  transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,opacity .18s ease;
  letter-spacing:0;
  white-space:nowrap;
}
.btn-ui svg{
  width:16px;
  height:16px;
  flex:0 0 auto;
}
.btn-ui:hover{
  transform:translateY(-1px);
}
.btn-ui:active{
  transform:translateY(0);
}
.btn-dark-ui{
  background:#0f1722;
  color:#f5fbff;
  border:1px solid rgba(15,23,42,.28);
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}
.btn-dark-ui:hover{
  color:#fff;
  background:#132130;
  box-shadow:0 10px 22px rgba(15,23,42,.16), 0 0 0 1px rgba(50,212,180,.12) inset;
}
.btn-light-ui{
  background:rgba(255,255,255,.04);
  color:var(--text);
  border:1px solid var(--line);
}
.btn-light-ui:hover{
  background:rgba(50,212,180,.11);
  border-color:rgba(50,212,180,.25);
  color:#f3fffd;
  box-shadow:0 0 0 1px rgba(50,212,180,.08) inset;
}
.btn-sm-ui{
  padding:.52rem .78rem;
  font-size:.88rem;
}
.hero-compact{
  padding:1.15rem 0 1rem;
}
.hero-shell{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(17,23,33,.98), rgba(11,16,23,.98)),
    linear-gradient(135deg, rgba(50,212,180,.04), transparent 42%);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.15rem;
}
.hero-shell::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(135deg, rgba(50,212,180,.05) 0 1px, transparent 1px 10px),
    linear-gradient(180deg, transparent 0 60%, rgba(255,255,255,.02) 100%);
  pointer-events:none;
  opacity:.85;
}
.hero-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(310px,.92fr);
  gap:1rem;
  align-items:stretch;
}
.hero-copy{
  min-width:0;
}
.crumbs{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  color:#9aa8bb;
  font-size:.84rem;
  margin-bottom:.55rem;
}
.hero-kicker{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:.36rem .68rem;
  border-radius:999px;
  background:rgba(50,212,180,.12);
  border:1px solid rgba(50,212,180,.18);
  color:#cffff6;
  font-size:.85rem;
  letter-spacing:0;
}
.hero-kicker svg{
  width:14px;
  height:14px;
}
.hero-copy h1{
  margin:.7rem 0 .7rem;
  font-size:3rem;
  line-height:1.08;
  letter-spacing:0;
}
.hero-copy p{
  margin:0;
  color:var(--muted);
  max-width:58ch;
  font-size:1rem;
}
.hero-tags{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1rem 0 1.15rem;
}
.tag{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.38rem .68rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:#d7e1ec;
  font-size:.85rem;
  line-height:1;
  letter-spacing:0;
}
.tag.active{
  background:rgba(50,212,180,.14);
  border-color:rgba(50,212,180,.32);
  color:#e9fffb;
}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
}
.hero-panel{
  background:
    linear-gradient(180deg, rgba(11,16,23,.84), rgba(11,16,23,.94));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
  min-width:0;
}
.panel-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:.9rem;
}
.panel-kicker{
  display:block;
  color:#9fb0c2;
  font-size:.82rem;
  margin-bottom:.18rem;
}
.panel-top strong{
  display:block;
  font-size:1.15rem;
  line-height:1.2;
}
.mini-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.34rem .58rem;
  border-radius:999px;
  font-size:.8rem;
  color:#d8fdf6;
  background:rgba(50,212,180,.12);
  border:1px solid rgba(50,212,180,.16);
  white-space:nowrap;
}
.mini-pill svg{
  width:14px;
  height:14px;
}
.matrix-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.65rem;
}
.matrix-tile{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:.72rem;
  min-width:0;
  min-height:88px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:.35rem;
}
.matrix-tile svg{
  width:16px;
  height:16px;
  color:var(--accent);
}
.matrix-tile span{
  display:block;
  color:#9aa8ba;
  font-size:.82rem;
  line-height:1.25;
}
.matrix-tile strong{
  display:block;
  font-size:1.32rem;
  line-height:1.1;
}
.status-rails{
  margin-top:.8rem;
  display:grid;
  gap:.5rem;
}
.rail{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:.55rem;
  align-items:center;
  font-size:.84rem;
}
.rail-label{
  color:#a6b3c4;
  white-space:nowrap;
}
.rail-track{
  position:relative;
  height:8px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  overflow:hidden;
}
.rail-track span{
  position:absolute;
  inset:0 auto 0 0;
  border-radius:999px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%);
}
.rail-value{
  color:#dfe8f2;
  white-space:nowrap;
}
.browse-section{
  padding:1rem 0 .95rem;
}
.section-head{
  display:flex;
  justify-content:space-between;
  gap:1rem;
  align-items:flex-end;
  margin-bottom:.9rem;
}
.section-head h2{
  margin:0;
  font-size:1.4rem;
  line-height:1.2;
}
.section-head p{
  margin:0;
  color:var(--muted);
  font-size:.94rem;
  max-width:66ch;
}
.browse-layout{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:1rem;
  align-items:start;
}
.filters-panel{
  position:sticky;
  top:94px;
  background:rgba(13,19,26,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1rem;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}
.filter-group + .filter-group{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid rgba(255,255,255,.06);
}
.filter-title{
  display:flex;
  align-items:center;
  gap:.45rem;
  margin:0 0 .7rem;
  font-size:.86rem;
  color:#dce5ef;
  letter-spacing:0;
}
.filter-title svg{
  width:15px;
  height:15px;
  color:var(--accent);
}
.filter-chips{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
}
.filter-chip{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.44rem .68rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#dbe4ed;
  font-size:.84rem;
  line-height:1;
  letter-spacing:0;
  transition:background-color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease,color .18s ease;
}
.filter-chip svg{
  width:14px;
  height:14px;
  flex:0 0 auto;
}
.filter-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(50,212,180,.28);
  background:rgba(50,212,180,.08);
}
.filter-chip.active{
  background:rgba(50,212,180,.14);
  color:#f3fffb;
  border-color:rgba(50,212,180,.34);
  box-shadow:0 0 0 1px rgba(50,212,180,.08) inset;
}
.filter-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:.5rem;
}
.filter-list li{
  display:flex;
  align-items:flex-start;
  gap:.55rem;
  color:#cfd9e5;
  font-size:.9rem;
}
.filter-list li svg{
  width:15px;
  height:15px;
  color:var(--accent);
  margin-top:.18rem;
  flex:0 0 auto;
}
.poster-panel{
  min-width:0;
}
.poster-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.8rem;
  flex-wrap:wrap;
  margin-bottom:.8rem;
}
.toolbar-left,
.toolbar-right{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  align-items:center;
}
.toolbar-tag{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.38rem .62rem;
  border-radius:999px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:#d9e3ee;
  font-size:.82rem;
  line-height:1;
  letter-spacing:0;
}
.toolbar-tag strong{
  color:#ffffff;
  font-weight:700;
}
.toolbar-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .68rem;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  color:#d7e1eb;
  font-size:.84rem;
  line-height:1;
  transition:background-color .18s ease,border-color .18s ease,transform .18s ease,box-shadow .18s ease,color .18s ease;
}
.toolbar-btn svg{
  width:14px;
  height:14px;
}
.toolbar-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(50,212,180,.26);
  color:#f4fffc;
}
.toolbar-btn.active{
  background:rgba(50,212,180,.14);
  color:#f5fffd;
  border-color:rgba(50,212,180,.32);
}
.poster-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr));
  gap:.9rem;
}
.poster-card{
  min-width:0;
  background:rgba(13,19,26,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease,background-color .18s ease;
}
.poster-card:hover{
  transform:translateY(-2px);
  border-color:rgba(50,212,180,.26);
  box-shadow:0 16px 30px rgba(0,0,0,.26), 0 0 0 1px rgba(50,212,180,.06) inset;
}
.poster-art{
  position:relative;
  aspect-ratio:5/6;
  padding:.75rem;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  overflow:hidden;
}
.poster-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 0 56%, rgba(4,8,12,.88) 100%);
  pointer-events:none;
}
.poster-chip,
.poster-zone{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  width:max-content;
  border-radius:999px;
  padding:.32rem .56rem;
  font-size:.78rem;
  line-height:1;
  letter-spacing:0;
}
.poster-chip{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.16);
  color:#eff7fb;
}
.poster-zone{
  align-self:flex-end;
  background:rgba(7,11,16,.62);
  border:1px solid rgba(255,255,255,.12);
  color:#e8f0f7;
}
.poster-a{
  background:
    linear-gradient(135deg, rgba(50,212,180,.22) 0%, transparent 42%),
    repeating-linear-gradient(135deg, rgba(50,212,180,.15) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #1a2532 0%, #0d1218 100%);
}
.poster-b{
  background:
    linear-gradient(135deg, rgba(173,112,255,.18) 0%, transparent 44%),
    repeating-linear-gradient(225deg, rgba(173,112,255,.14) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #1a2230 0%, #0c1118 100%);
}
.poster-c{
  background:
    linear-gradient(135deg, rgba(255,209,102,.18) 0%, transparent 40%),
    repeating-linear-gradient(135deg, rgba(255,209,102,.13) 0 2px, transparent 2px 16px),
    linear-gradient(160deg, #212631 0%, #0b1118 100%);
}
.poster-d{
  background:
    linear-gradient(135deg, rgba(255,111,154,.16) 0%, transparent 41%),
    repeating-linear-gradient(45deg, rgba(255,111,154,.14) 0 2px, transparent 2px 15px),
    linear-gradient(160deg, #1c2431 0%, #0c1118 100%);
}
.poster-e{
  background:
    linear-gradient(135deg, rgba(50,212,180,.2) 0%, transparent 39%),
    repeating-linear-gradient(315deg, rgba(50,212,180,.12) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, #17232f 0%, #0b1117 100%);
}
.poster-f{
  background:
    linear-gradient(135deg, rgba(173,112,255,.2) 0%, transparent 36%),
    repeating-linear-gradient(135deg, rgba(173,112,255,.12) 0 2px, transparent 2px 13px),
    linear-gradient(160deg, #1c2330 0%, #0d1118 100%);
}
.poster-g{
  background:
    linear-gradient(135deg, rgba(255,209,102,.18) 0%, transparent 38%),
    repeating-linear-gradient(225deg, rgba(50,212,180,.12) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #1b2430 0%, #0d1118 100%);
}
.poster-h{
  background:
    linear-gradient(135deg, rgba(255,111,154,.18) 0%, transparent 38%),
    repeating-linear-gradient(315deg, rgba(255,111,154,.12) 0 2px, transparent 2px 14px),
    linear-gradient(160deg, #1a2230 0%, #0c1117 100%);
}
.poster-body{
  padding:.88rem .9rem .95rem;
  min-width:0;
}
.poster-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:.5rem;
}
.poster-head h3{
  margin:0;
  font-size:1rem;
  line-height:1.25;
}
.poster-mini{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  color:#9eb0c4;
  font-size:.78rem;
  white-space:nowrap;
}
.poster-mini svg{
  width:13px;
  height:13px;
}
.poster-body p{
  margin:.55rem 0 .8rem;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.55;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:2.8em;
}
.poster-foot{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.6rem;
  flex-wrap:wrap;
}
.meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
}
.meta-chip{
  display:inline-flex;
  align-items:center;
  padding:.28rem .5rem;
  border-radius:999px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:#d4deea;
  font-size:.78rem;
  line-height:1;
  white-space:nowrap;
}
.poster-action{
  padding:.5rem .68rem;
  font-size:.84rem;
}
.empty-state{
  margin:.9rem 0;
  padding:1rem;
  border-radius:var(--radius);
  border:1px dashed rgba(255,255,255,.16);
  background:rgba(255,255,255,.03);
  text-align:center;
}
.empty-state svg{
  width:20px;
  height:20px;
  color:var(--warm);
  margin:0 auto .35rem;
}
.empty-state strong{
  display:block;
  font-size:1rem;
}
.empty-state p{
  margin:.25rem 0 0;
  color:var(--muted);
  font-size:.92rem;
}
.guide-strip{
  padding:0 0 .9rem;
}
.guide-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.9rem;
}
.guide-card{
  display:flex;
  align-items:flex-start;
  gap:.75rem;
  padding:.95rem 1rem;
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.guide-card svg{
  width:18px;
  height:18px;
  color:var(--accent);
  flex:0 0 auto;
  margin-top:.15rem;
}
.guide-card strong{
  display:block;
  margin-bottom:.18rem;
  font-size:.94rem;
}
.guide-card p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.55;
}
.faq-section{
  padding:.7rem 0 1rem;
}
.accordion.accordion-dark{
  display:grid;
  gap:.7rem;
}
.accordion.accordion-dark .accordion-item{
  background:rgba(13,19,26,.96);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.accordion.accordion-dark .accordion-button{
  background:transparent;
  color:var(--text);
  padding:.95rem 1rem;
  font-weight:600;
  border:0;
  box-shadow:none;
  letter-spacing:0;
}
.accordion.accordion-dark .accordion-button::after{
  filter:invert(1);
  opacity:.9;
}
.accordion.accordion-dark .accordion-button:not(.collapsed){
  background:rgba(50,212,180,.08);
  color:var(--text);
}
.accordion.accordion-dark .accordion-button:focus{
  box-shadow:none;
}
.accordion.accordion-dark .accordion-body{
  padding:0 1rem 1rem;
  color:var(--muted);
  border-top:1px solid rgba(255,255,255,.06);
}
.cta-band{
  padding:.3rem 0 1.25rem;
}
.cta-shell{
  background:
    linear-gradient(135deg, rgba(17,24,33,.98), rgba(11,16,23,.98));
  border:1px solid rgba(50,212,180,.18);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:1.15rem;
}
.cta-shell h2{
  margin:0 0 .45rem;
  font-size:1.35rem;
  line-height:1.2;
}
.cta-shell p{
  margin:0;
  color:var(--muted);
  max-width:68ch;
}
.cta-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  margin-top:1rem;
}
.site-footer{
  background:#0a0e13;
  border-top:1px solid rgba(255,255,255,.08);
  padding:1.25rem 0 1rem;
}
.footer-top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  flex-wrap:wrap;
  padding-bottom:1rem;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.footer-brand{
  display:flex;
  align-items:center;
  gap:.8rem;
  min-width:0;
}
.footer-brand .brand-mark{
  width:40px;
  height:40px;
}
.footer-brand .brand-text strong{
  color:#f3f8fd;
}
.footer-brand .brand-text span{
  color:#8d9aab;
}
.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem 1.1rem;
}
.footer-links a{
  color:#cbd5e1;
  font-size:.92rem;
  transition:color .18s ease, opacity .18s ease;
}
.footer-links a:hover{
  color:#ffffff;
}
.footer-bottom{
  padding-top:1rem;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.88rem;
}
@media (max-width: 1199.98px){
  .hero-copy h1{
    font-size:2.6rem;
  }
}
@media (max-width: 991.98px){
  .hero-grid,
  .browse-layout,
  .guide-grid{
    grid-template-columns:1fr;
  }
  .filters-panel{
    position:static;
  }
  .nav-search{
    width:100%;
    margin-top:.75rem;
    align-items:stretch;
    flex-direction:column;
  }
  .search-wrap{
    min-width:0;
    width:100%;
  }
  .nav-search .btn-ui{
    width:100%;
  }
}
@media (max-width: 767.98px){
  .hero-shell{
    padding:.95rem;
  }
  .hero-copy h1{
    font-size:2.15rem;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .poster-grid{
    grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  }
  .guide-card{
    padding:.9rem;
  }
}
@media (max-width: 575.98px){
  .container-wide{
    width:min(var(--container), calc(100% - 1.1rem));
  }
  .brand-text span{
    display:none;
  }
  .hero-copy h1{
    font-size:1.9rem;
  }
  .hero-actions,
  .cta-actions{
    flex-direction:column;
  }
  .hero-actions .btn-ui,
  .cta-actions .btn-ui{
    width:100%;
  }
  .poster-foot{
    align-items:stretch;
  }
  .poster-action{
    width:100%;
    justify-content:center;
  }
  .footer-top,
  .footer-bottom{
    align-items:flex-start;
  }
}