/* roulang page: index */
:root{
      --bg:#0b0f14;
      --bg-2:#111720;
      --panel:#121922;
      --panel-2:#161f2a;
      --panel-3:#0f151d;
      --text:#edf2f7;
      --muted:#9aa7b8;
      --soft:#738194;
      --line:rgba(255,255,255,.08);
      --line-2:rgba(255,255,255,.12);
      --shadow:0 18px 40px rgba(0,0,0,.34);
      --shadow-soft:0 10px 24px rgba(0,0,0,.24);
      --cyan:#66e0ff;
      --violet:#8d6bff;
      --green:#5ef0b5;
      --orange:#f4b860;
      --danger:#ff6f91;
      --radius:8px;
      --radius-sm:6px;
      --radius-xs:4px;
      --max:1420px;
      --sidebar-collapsed:88px;
      --sidebar-expanded:236px;
      --transition:.24s ease;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      min-height:100vh;
      font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
      color:var(--text);
      background:
        radial-gradient(circle at 20% 0%, rgba(102,224,255,.10), transparent 26%),
        radial-gradient(circle at 85% 10%, rgba(141,107,255,.10), transparent 22%),
        radial-gradient(circle at 70% 85%, rgba(94,240,181,.08), transparent 24%),
        linear-gradient(180deg, #0b0f14 0%, #0d1218 52%, #0b0f14 100%);
      line-height:1.8;
      overflow-x:hidden;
      --sidebar-width:var(--sidebar-collapsed);
    }
    body.nav-wide{--sidebar-width:var(--sidebar-expanded)}
    body.menu-open{overflow:hidden}
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:42px 42px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 38%);
      opacity:.22;
      z-index:0;
    }
    body::after{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:linear-gradient(180deg, rgba(11,15,20,.02), rgba(11,15,20,.35));
      z-index:0;
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input{font:inherit}
    ::selection{background:rgba(102,224,255,.24);color:#fff}
    :focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

    .layout{
      position:relative;
      z-index:1;
      min-height:100vh;
    }

    .sidebar{
      position:fixed;
      inset:0 auto 0 0;
      width:var(--sidebar-width);
      background:linear-gradient(180deg, rgba(18,25,34,.98), rgba(14,19,26,.96));
      border-right:1px solid var(--line);
      box-shadow:8px 0 30px rgba(0,0,0,.18);
      padding:16px 12px;
      display:flex;
      flex-direction:column;
      gap:16px;
      transition:width var(--transition), transform var(--transition);
      overflow:hidden;
      backdrop-filter:saturate(120%);
      z-index:40;
    }
    .sidebar:hover{box-shadow:12px 0 34px rgba(0,0,0,.22)}
    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      padding:10px 8px 12px;
      min-height:68px;
    }
    .brand-mark{
      width:44px;height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:
        linear-gradient(135deg, rgba(102,224,255,.22), rgba(141,107,255,.24)),
        #131a23;
      border:1px solid rgba(255,255,255,.10);
      color:var(--text);
      font-weight:800;
      font-size:13px;
      letter-spacing:.06em;
      flex:0 0 auto;
      box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
    }
    .brand-text{
      min-width:0;
      opacity:1;
      transition:opacity var(--transition), transform var(--transition);
    }
    .sidebar:not(:hover) .brand-text{opacity:0;transform:translateX(-8px)}
    .brand-text strong{
      display:block;
      font-size:15px;
      line-height:1.25;
      letter-spacing:.01em;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-text span{
      display:block;
      margin-top:2px;
      font-size:12px;
      color:var(--muted);
      white-space:nowrap;
    }

    .side-nav{
      display:flex;
      flex-direction:column;
      gap:8px;
      padding:0 2px;
    }
    .nav-link{
      display:flex;
      align-items:center;
      gap:12px;
      min-height:46px;
      padding:0 12px;
      border-radius:12px;
      color:var(--muted);
      border:1px solid transparent;
      transition:background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
      position:relative;
      overflow:hidden;
    }
    .nav-link:hover{
      color:var(--text);
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.06);
      transform:translateX(2px);
    }
    .nav-link.active{
      color:#fff;
      background:linear-gradient(135deg, rgba(102,224,255,.14), rgba(141,107,255,.12));
      border-color:rgba(102,224,255,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
    }
    .nav-icon{
      width:18px;height:18px;
      flex:0 0 auto;
      stroke:currentColor;
      stroke-width:1.9;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      opacity:.92;
    }
    .nav-label{
      font-size:14px;
      line-height:1.2;
      white-space:nowrap;
      opacity:1;
      transition:opacity var(--transition), transform var(--transition);
    }
    .sidebar:not(:hover) .nav-label{opacity:0;transform:translateX(-8px)}
    .side-note{
      margin-top:auto;
      border-top:1px solid var(--line);
      padding:14px 8px 6px;
      display:grid;
      gap:10px;
    }
    .note-card{
      padding:12px;
      border:1px solid rgba(255,255,255,.06);
      border-radius:14px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      box-shadow:var(--shadow-soft);
      display:grid;
      gap:8px;
    }
    .note-kicker{
      font-size:12px;
      color:var(--muted);
      letter-spacing:.04em;
    }
    .note-value{
      font-size:22px;
      font-weight:800;
      line-height:1.1;
    }
    .note-desc{
      font-size:12px;
      color:var(--soft);
      line-height:1.7;
    }

    .mobile-bar{
      display:none;
      position:fixed;
      top:0;left:0;right:0;
      height:64px;
      z-index:50;
      align-items:center;
      justify-content:space-between;
      padding:0 14px;
      background:rgba(13,18,24,.92);
      border-bottom:1px solid var(--line);
      backdrop-filter:blur(16px);
    }
    .mobile-brand{
      display:flex;
      align-items:center;
      gap:10px;
      min-width:0;
    }
    .mobile-brand strong{
      font-size:14px;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .burger{
      width:42px;height:42px;
      border-radius:12px;
      border:1px solid var(--line);
      background:rgba(255,255,255,.03);
      color:var(--text);
      display:grid;
      place-items:center;
      cursor:pointer;
      transition:transform var(--transition), background var(--transition), border-color var(--transition);
    }
    .burger:hover{transform:translateY(-1px);background:rgba(255,255,255,.06);border-color:rgba(102,224,255,.22)}
    .burger svg{width:19px;height:19px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}
    .overlay{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(4,7,10,.56);
      z-index:35;
      opacity:0;
      transition:opacity var(--transition);
    }

    .main{
      margin-left:var(--sidebar-width);
      padding:22px 22px 34px;
      transition:margin-left var(--transition);
    }
    .container{
      width:min(var(--max), calc(100vw - 44px));
      margin:0 auto;
    }

    .section{
      margin-top:22px;
      padding:26px;
      border:1px solid var(--line);
      border-radius:20px;
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      box-shadow:var(--shadow-soft);
    }
    .section-head{
      display:flex;
      flex-wrap:wrap;
      align-items:end;
      justify-content:space-between;
      gap:10px 14px;
      margin-bottom:18px;
    }
    .section-title{
      margin:0;
      font-size:26px;
      line-height:1.2;
      letter-spacing:.01em;
    }
    .section-desc{
      margin:0;
      max-width:760px;
      color:var(--muted);
      font-size:14px;
      line-height:1.8;
    }

    .hero{
      padding:28px;
      border:1px solid rgba(102,224,255,.12);
      background:
        radial-gradient(circle at 84% 10%, rgba(102,224,255,.11), transparent 20%),
        radial-gradient(circle at 15% 88%, rgba(141,107,255,.10), transparent 22%),
        linear-gradient(180deg, rgba(18,25,34,.96), rgba(15,20,28,.96));
      border-radius:22px;
      box-shadow:0 22px 48px rgba(0,0,0,.34);
    }
    .hero-grid{
      display:grid;
      grid-template-columns:minmax(0,1.1fr) minmax(360px,.9fr);
      gap:20px;
      align-items:stretch;
    }
    .hero-copy{
      min-width:0;
      display:grid;
      gap:18px;
      align-content:start;
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      width:max-content;
      padding:7px 11px;
      border-radius:999px;
      border:1px solid rgba(102,224,255,.18);
      background:rgba(102,224,255,.08);
      color:#d8f9ff;
      font-size:12px;
      letter-spacing:.03em;
    }
    .eyebrow::before{
      content:"";
      width:7px;height:7px;border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 4px rgba(94,240,181,.12);
    }
    .hero h1{
      margin:0;
      font-size:46px;
      line-height:1.12;
      letter-spacing:-.02em;
      max-width:12ch;
    }
    .hero p{
      margin:0;
      max-width:760px;
      color:var(--muted);
      font-size:15px;
      line-height:1.85;
    }
    .hero-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:9px;
      min-height:44px;
      padding:0 16px;
      border-radius:12px;
      border:1px solid transparent;
      cursor:pointer;
      transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition), color var(--transition);
      user-select:none;
      white-space:nowrap;
      font-weight:700;
      letter-spacing:.01em;
    }
    .btn svg{
      width:16px;height:16px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
    }
    .btn-primary{
      background:linear-gradient(135deg, rgba(102,224,255,.95), rgba(141,107,255,.95));
      color:#091018;
      box-shadow:0 14px 26px rgba(102,224,255,.12);
    }
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 16px 28px rgba(102,224,255,.15)}
    .btn-secondary{
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.10);
      color:var(--text);
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(102,224,255,.20);
      background:rgba(255,255,255,.05);
    }
    .btn-ghost{
      background:transparent;
      border-color:rgba(255,255,255,.08);
      color:var(--muted);
    }
    .btn-ghost:hover{
      color:var(--text);
      background:rgba(255,255,255,.04);
      border-color:rgba(255,255,255,.14);
      transform:translateY(-1px);
    }

    .hero-meta{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .chip{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:34px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
      color:var(--text);
      font-size:12px;
      line-height:1;
    }
    .chip em{
      font-style:normal;
      color:var(--cyan);
      font-weight:700;
    }

    .hero-preview{
      display:grid;
      grid-template-rows:auto auto 1fr;
      gap:14px;
      padding:18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:
        linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
    }
    .preview-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .preview-top strong{font-size:15px}
    .pulse{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(94,240,181,.10);
      border:1px solid rgba(94,240,181,.18);
      color:#dffff0;
      font-size:12px;
    }
    .pulse i{
      width:8px;height:8px;border-radius:50%;
      background:var(--green);
      box-shadow:0 0 0 4px rgba(94,240,181,.12);
      display:inline-block;
    }

    .progress-box{
      padding:16px;
      border-radius:16px;
      background:linear-gradient(180deg, rgba(7,10,14,.56), rgba(255,255,255,.02));
      border:1px solid rgba(255,255,255,.08);
    }
    .progress-box .row{
      display:flex;
      align-items:baseline;
      justify-content:space-between;
      gap:10px;
      margin-bottom:10px;
    }
    .progress-box .row span{
      color:var(--muted);
      font-size:12px;
    }
    .progress-box .row strong{
      font-size:24px;
      letter-spacing:-.02em;
    }
    .progress{
      height:10px;
      border-radius:999px;
      background:rgba(255,255,255,.06);
      overflow:hidden;
    }
    .progress > i{
      display:block;
      width:64%;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg, var(--cyan), var(--violet));
      box-shadow:0 0 22px rgba(102,224,255,.22);
    }
    .progress-note{
      margin-top:10px;
      color:var(--soft);
      font-size:12px;
    }
    .filter-box{
      display:grid;
      grid-template-columns:1fr auto;
      gap:10px;
      align-items:center;
    }
    .filter-box input{
      width:100%;
      min-height:44px;
      padding:0 14px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.10);
      color:var(--text);
      background:#0e141c;
      outline:none;
      transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
    }
    .filter-box input::placeholder{color:#6f7b89}
    .filter-box input:focus{
      border-color:rgba(102,224,255,.28);
      box-shadow:0 0 0 4px rgba(102,224,255,.08);
      background:#101820;
    }
    .mini-panel{
      display:grid;
      gap:12px;
      grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .mini-card{
      min-height:120px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
      display:flex;
      flex-direction:column;
      justify-content:flex-end;
      padding:12px;
      position:relative;
      isolation:isolate;
    }
    .mini-card::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, rgba(102,224,255,.28), rgba(141,107,255,.16)),
        radial-gradient(circle at 35% 20%, rgba(255,255,255,.18), transparent 40%);
      opacity:.9;
      z-index:-1;
    }
    .mini-card:nth-child(2)::before{
      background:
        linear-gradient(135deg, rgba(94,240,181,.22), rgba(102,224,255,.12)),
        radial-gradient(circle at 75% 15%, rgba(255,255,255,.18), transparent 40%);
    }
    .mini-card .tag{
      display:inline-flex;
      width:max-content;
      padding:5px 8px;
      border-radius:999px;
      background:rgba(7,10,14,.40);
      border:1px solid rgba(255,255,255,.10);
      font-size:11px;
    }
    .mini-card strong{
      margin-top:8px;
      font-size:15px;
      line-height:1.3;
    }
    .mini-card span{
      font-size:12px;
      color:#dbe8f8;
      opacity:.92;
    }

    .pain-grid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
    }
    .pain-card{
      padding:16px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      box-shadow:0 8px 22px rgba(0,0,0,.16);
    }
    .pain-mark{
      width:28px;height:28px;border-radius:10px;
      display:grid;
      place-items:center;
      margin-bottom:10px;
      background:rgba(102,224,255,.10);
      border:1px solid rgba(102,224,255,.12);
      color:var(--cyan);
    }
    .pain-mark svg{
      width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;
    }
    .pain-card h3{
      margin:0 0 6px;
      font-size:16px;
      line-height:1.35;
    }
    .pain-card p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
    }

    .split-grid{
      display:grid;
      grid-template-columns:minmax(0,1.03fr) minmax(320px,.97fr);
      gap:16px;
      align-items:stretch;
    }
    .flow-panel,.matrix-panel,.metric-panel,.feed-panel,.quote-panel,.faq-panel,.cta-panel{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
    }
    .flow-panel{padding:18px}
    .flow-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:12px;
    }
    .flow-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:14px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.06);
    }
    .flow-num{
      width:32px;height:32px;
      border-radius:12px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background:linear-gradient(135deg, rgba(102,224,255,.12), rgba(141,107,255,.12));
      border:1px solid rgba(255,255,255,.10);
      font-weight:800;
      color:#fff;
    }
    .flow-item h3{
      margin:0 0 4px;
      font-size:15px;
      line-height:1.35;
    }
    .flow-item p{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
    }

    .matrix-panel{
      padding:18px;
      display:grid;
      gap:14px;
      align-content:start;
    }
    .matrix-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .matrix-head strong{font-size:16px}
    .matrix-head span{color:var(--muted);font-size:12px}
    .tag-grid{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .tag-pill{
      display:inline-flex;
      align-items:center;
      gap:7px;
      min-height:36px;
      padding:0 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.09);
      background:rgba(255,255,255,.03);
      color:var(--text);
      font-size:12px;
      transition:transform var(--transition), border-color var(--transition), background var(--transition);
    }
    .tag-pill:hover{
      transform:translateY(-1px);
      border-color:rgba(102,224,255,.20);
      background:rgba(102,224,255,.06);
    }
    .tag-pill strong{
      color:var(--cyan);
      font-weight:800;
    }
    .entry-grid{
      display:grid;
      grid-template-columns:repeat(2, minmax(0,1fr));
      gap:12px;
    }
    .entry-card{
      padding:14px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 20% 15%, rgba(102,224,255,.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
      min-height:130px;
      display:flex;
      flex-direction:column;
      justify-content:space-between;
      transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .entry-card:hover{
      transform:translateY(-2px);
      border-color:rgba(102,224,255,.18);
      box-shadow:0 16px 28px rgba(0,0,0,.18);
    }
    .entry-card:nth-child(2){
      background:
        radial-gradient(circle at 85% 12%, rgba(94,240,181,.12), transparent 34%),
        linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
    }
    .entry-card .meta{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:8px;
    }
    .entry-card .label{
      font-size:12px;
      color:var(--muted);
    }
    .entry-card strong{
      font-size:16px;
      line-height:1.35;
      display:block;
      margin-top:10px;
    }
    .entry-card p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:12px;
      line-height:1.75;
    }
    .entry-card .enter{
      margin-top:12px;
      display:inline-flex;
      align-items:center;
      gap:8px;
      color:#fff;
      font-size:12px;
      font-weight:700;
    }
    .entry-card .enter svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

    .assurance-row{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:10px;
      margin-top:14px;
    }
    .assurance{
      display:flex;
      align-items:center;
      gap:10px;
      min-height:54px;
      padding:12px 14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.02);
      color:var(--muted);
      font-size:12px;
      line-height:1.45;
    }
    .assurance i{
      width:28px;height:28px;
      border-radius:10px;
      flex:0 0 auto;
      display:grid;
      place-items:center;
      background:rgba(102,224,255,.10);
      border:1px solid rgba(102,224,255,.10);
      color:var(--cyan);
      font-style:normal;
      font-weight:800;
      font-size:12px;
    }

    .metric-band{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
    }
    .metric{
      padding:18px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      box-shadow:0 8px 22px rgba(0,0,0,.14);
    }
    .metric .num{
      display:block;
      font-size:34px;
      line-height:1;
      letter-spacing:-.04em;
      font-weight:900;
      color:#fff;
    }
    .metric .label{
      display:block;
      margin-top:10px;
      color:var(--text);
      font-weight:700;
      font-size:14px;
    }
    .metric .sub{
      display:block;
      margin-top:6px;
      color:var(--muted);
      font-size:12px;
      line-height:1.7;
    }
    .timeline{
      margin-top:16px;
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:12px;
    }
    .timeline-item{
      padding:14px 14px 14px 16px;
      border-radius:14px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.06);
      position:relative;
    }
    .timeline-item::before{
      content:"";
      position:absolute;
      left:12px;top:18px;bottom:18px;
      width:2px;
      background:linear-gradient(180deg, var(--cyan), var(--violet));
      opacity:.7;
    }
    .timeline-item b{
      display:block;
      margin-left:14px;
      font-size:14px;
    }
    .timeline-item span{
      display:block;
      margin-left:14px;
      color:var(--muted);
      font-size:12px;
      line-height:1.8;
      margin-top:4px;
    }

    .trail-wrap{
      position:relative;
      overflow:hidden;
    }
    .trail-row{
      display:grid;
      grid-auto-flow:column;
      grid-auto-columns:minmax(240px, 1fr);
      gap:14px;
      overflow-x:auto;
      padding-bottom:6px;
      scroll-snap-type:x proximity;
      scrollbar-width:thin;
    }
    .trail-row::-webkit-scrollbar{height:8px}
    .trail-row::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
    .trail-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:999px}
    .trail-card{
      scroll-snap-align:start;
      min-height:250px;
      padding:14px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
      display:flex;
      flex-direction:column;
      gap:12px;
      transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
    }
    .trail-card:hover{
      transform:translateY(-2px);
      border-color:rgba(102,224,255,.18);
      box-shadow:0 16px 26px rgba(0,0,0,.18);
    }
    .thumb{
      position:relative;
      border-radius:14px;
      overflow:hidden;
      aspect-ratio:16/10;
      background:
        radial-gradient(circle at 30% 28%, rgba(255,255,255,.25), transparent 16%),
        linear-gradient(135deg, rgba(102,224,255,.62), rgba(141,107,255,.34) 40%, rgba(94,240,181,.22) 100%);
      border:1px solid rgba(255,255,255,.08);
    }
    .thumb::after{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(180deg, transparent, rgba(0,0,0,.34)),
        linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
      background-size:auto, 26px 26px;
      mix-blend-mode:screen;
      opacity:.55;
    }
    .trail-card:nth-child(2) .thumb{
      background:
        radial-gradient(circle at 68% 22%, rgba(255,255,255,.22), transparent 16%),
        linear-gradient(135deg, rgba(94,240,181,.55), rgba(102,224,255,.22) 45%, rgba(141,107,255,.28) 100%);
    }
    .trail-card:nth-child(3) .thumb{
      background:
        radial-gradient(circle at 48% 20%, rgba(255,255,255,.22), transparent 16%),
        linear-gradient(135deg, rgba(244,184,96,.48), rgba(102,224,255,.22) 44%, rgba(141,107,255,.30) 100%);
    }
    .trail-card:nth-child(4) .thumb{
      background:
        radial-gradient(circle at 38% 24%, rgba(255,255,255,.24), transparent 16%),
        linear-gradient(135deg, rgba(255,111,145,.34), rgba(141,107,255,.26) 44%, rgba(102,224,255,.20) 100%);
    }
    .trail-card .card-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      font-size:12px;
      color:var(--muted);
    }
    .trail-card h3{
      margin:0;
      font-size:16px;
      line-height:1.4;
    }
    .trail-card p{
      margin:0;
      color:var(--muted);
      font-size:12px;
      line-height:1.8;
    }
    .trail-card .trail-foot{
      margin-top:auto;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding-top:6px;
      color:#fff;
      font-size:12px;
      font-weight:700;
    }
    .trail-card .trail-foot svg{width:15px;height:15px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

    .feed-grid{
      display:grid;
      grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
      gap:16px;
    }
    .feed-list{
      list-style:none;
      margin:0;
      padding:0;
      display:grid;
      gap:10px;
    }
    .feed-item{
      display:flex;
      gap:12px;
      align-items:flex-start;
      padding:14px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,.06);
      background:rgba(255,255,255,.02);
      transition:transform var(--transition), border-color var(--transition), background var(--transition);
    }
    .feed-item:hover{
      transform:translateY(-1px);
      border-color:rgba(102,224,255,.16);
      background:rgba(255,255,255,.035);
    }
    .feed-pin{
      width:38px;height:38px;
      border-radius:12px;
      flex:0 0 auto;
      background:linear-gradient(135deg, rgba(102,224,255,.14), rgba(141,107,255,.12));
      border:1px solid rgba(255,255,255,.08);
      display:grid;
      place-items:center;
      color:var(--cyan);
    }
    .feed-pin svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
    .feed-main{min-width:0;flex:1}
    .feed-title{
      display:flex;
      flex-wrap:wrap;
      align-items:center;
      gap:8px;
      margin:0 0 4px;
      font-size:15px;
      line-height:1.45;
    }
    .feed-title a{
      color:#fff;
      font-weight:700;
    }
    .feed-title a:hover{color:var(--cyan)}
    .feed-meta{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-top:8px;
    }
    .mini-tag{
      display:inline-flex;
      align-items:center;
      min-height:26px;
      padding:0 9px;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(255,255,255,.06);
      color:var(--muted);
      font-size:11px;
    }
    .feed-snippet{
      margin:0;
      color:var(--muted);
      font-size:13px;
      line-height:1.8;
    }
    .side-card{
      padding:18px;
      border-radius:18px;
      border:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 82% 10%, rgba(94,240,181,.12), transparent 22%),
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
      display:grid;
      gap:14px;
    }
    .side-card h3{
      margin:0;
      font-size:17px;
      line-height:1.4;
    }
    .side-list{
      margin:0;
      padding:0;
      list-style:none;
      display:grid;
      gap:10px;
    }
    .side-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
      font-size:13px;
      line-height:1.75;
    }
    .side-dot{
      width:8px;height:8px;border-radius:50%;
      background:var(--green);
      margin-top:10px;
      box-shadow:0 0 0 4px rgba(94,240,181,.12);
      flex:0 0 auto;
    }

    .quote-grid{
      display:grid;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:14px;
    }
    .quote-card{
      padding:18px;
      border-radius:16px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.012));
      display:grid;
      gap:14px;
    }
    .quote-icon{
      width:32px;height:32px;
      border-radius:11px;
      display:grid;
      place-items:center;
      background:rgba(141,107,255,.12);
      border:1px solid rgba(141,107,255,.14);
      color:#d9cfff;
    }
    .quote-icon svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
    .quote-card blockquote{
      margin:0;
      font-size:14px;
      line-height:1.85;
      color:var(--text);
    }
    .quote-meta{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color:var(--muted);
      font-size:12px;
    }
    .stars{
      color:var(--orange);
      letter-spacing:1px;
      font-size:13px;
    }

    .faq-list{
      display:grid;
      gap:10px;
    }
    .faq-item{
      border-radius:14px;
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      overflow:hidden;
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      padding:16px 18px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      font-weight:700;
      font-size:15px;
      line-height:1.45;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      width:28px;height:28px;
      display:grid;
      place-items:center;
      border-radius:10px;
      background:rgba(255,255,255,.04);
      border:1px solid rgba(255,255,255,.07);
      color:var(--text);
      flex:0 0 auto;
      transition:transform var(--transition), background var(--transition);
    }
    .faq-item[open] summary::after{
      content:"−";
      background:rgba(102,224,255,.08);
      color:#dff8ff;
    }
    .faq-item .answer{
      padding:0 18px 16px;
      color:var(--muted);
      font-size:13px;
      line-height:1.9;
    }

    .cta-panel{
      padding:24px;
      background:
        radial-gradient(circle at 15% 18%, rgba(102,224,255,.12), transparent 22%),
        radial-gradient(circle at 84% 16%, rgba(141,107,255,.12), transparent 24%),
        linear-gradient(180deg, rgba(18,25,34,.98), rgba(13,18,24,.96));
    }
    .cta-wrap{
      display:flex;
      gap:18px;
      align-items:center;
      justify-content:space-between;
      flex-wrap:wrap;
    }
    .cta-copy{
      display:grid;
      gap:10px;
      max-width:820px;
    }
    .cta-copy h2{
      margin:0;
      font-size:30px;
      line-height:1.18;
    }
    .cta-copy p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.8;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }
    .cta-foot{
      margin-top:18px;
      padding-top:16px;
      border-top:1px solid var(--line);
      color:var(--soft);
      font-size:12px;
      line-height:1.8;
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:10px;
    }

    .footer{
      margin-top:22px;
      padding:22px 24px 30px;
      border-top:1px solid var(--line);
      color:var(--muted);
      font-size:13px;
    }
    .footer-grid{
      display:grid;
      grid-template-columns:1.2fr .8fr .8fr;
      gap:18px;
      align-items:start;
    }
    .footer-brand{
      display:grid;
      gap:10px;
    }
    .footer-brand strong{
      color:var(--text);
      font-size:16px;
    }
    .footer-brand p{
      margin:0;
      line-height:1.8;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links h4{
      margin:0 0 4px;
      color:var(--text);
      font-size:14px;
    }
    .footer-links a{
      color:var(--muted);
      transition:color var(--transition), transform var(--transition);
      width:max-content;
    }
    .footer-links a:hover{
      color:var(--cyan);
      transform:translateX(2px);
    }
    .copyright{
      margin-top:18px;
      padding-top:16px;
      border-top:1px solid var(--line);
      color:var(--soft);
      display:flex;
      flex-wrap:wrap;
      justify-content:space-between;
      gap:10px;
      font-size:12px;
    }

    .icon{
      width:16px;
      height:16px;
      stroke:currentColor;
      stroke-width:2;
      fill:none;
      stroke-linecap:round;
      stroke-linejoin:round;
      flex:0 0 auto;
    }

    @media (max-width: 1180px){
      .hero-grid,.split-grid,.feed-grid,.footer-grid{
        grid-template-columns:1fr;
      }
      .pain-grid,.quote-grid,.metric-band,.assurance-row{
        grid-template-columns:repeat(2, minmax(0,1fr));
      }
      .section-title{font-size:24px}
      .hero h1{font-size:40px;max-width:14ch}
    }
    @media (max-width: 768px){
      body{--sidebar-width:0px}
      .sidebar{
        width:min(84vw, 300px);
        transform:translateX(-102%);
        transition:transform var(--transition);
        box-shadow:14px 0 40px rgba(0,0,0,.34);
      }
      body.menu-open .sidebar{transform:translateX(0)}
      .mobile-bar{display:flex}
      .overlay{display:block}
      body.menu-open .overlay{opacity:1;pointer-events:auto}
      .main{
        margin-left:0;
        padding:76px 14px 28px;
      }
      .container{width:100%}
      .section,.hero,.cta-panel{padding:18px}
      .hero h1{font-size:30px;max-width:none}
      .hero-actions,.cta-actions{
        flex-direction:column;
        align-items:stretch;
      }
      .hero-actions .btn,.cta-actions .btn{width:100%}
      .pain-grid,.quote-grid,.metric-band,.assurance-row,.timeline,.entry-grid{
        grid-template-columns:1fr;
      }
      .mini-panel{
        grid-template-columns:1fr;
      }
      .section-head{
        align-items:flex-start;
      }
      .cta-copy h2{font-size:24px}
    }
    @media (max-width: 520px){
      .section,.hero,.cta-panel,.footer{padding:16px}
      .hero{border-radius:18px}
      .section-title{font-size:22px}
      .section-desc,.hero p,.footer{font-size:13px}
      .filter-box{grid-template-columns:1fr}
      .filter-box .btn{width:100%}
      .feed-item{padding:12px}
      .feed-pin{width:34px;height:34px;border-radius:11px}
      .metric .num{font-size:30px}
      .trail-row{grid-auto-columns:minmax(220px, 82vw)}
      .cta-foot{flex-direction:column}
      .copyright{flex-direction:column}
    }

    @media (hover:hover){
      .sidebar:hover .brand-text,
      .sidebar:hover .nav-label{
        opacity:1;
        transform:none;
      }
    }

/* roulang page: category1 */
:root{
            --ink:#e9eef2;
            --muted:#8f9ba3;
            --muted-2:#65727b;
            --bg:#101416;
            --panel:#171d20;
            --panel-2:#1d2529;
            --line:#2a3438;
            --line-light:#364247;
            --cyan:#8de4d1;
            --cyan-deep:#4ebda8;
            --violet:#b8a5ff;
            --orange:#ffbd79;
            --danger:#ff897d;
            --radius:8px;
            --shadow:0 12px 30px rgba(0,0,0,.22);
            --side:84px;
            --ease:all .22s ease;
        }
        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            min-height:100vh;
            color:var(--ink);
            background:
                radial-gradient(circle at 74% 4%,rgba(141,228,209,.07),transparent 26rem),
                var(--bg);
            font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",Arial,sans-serif;
            font-size:15px;
            line-height:1.75;
            letter-spacing:.01em;
        }
        a{color:inherit;text-decoration:none}
        button,input{font:inherit}
        button{cursor:pointer}
        svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
        .shell{min-height:100vh}
        .side-panel{
            position:fixed;z-index:20;inset:0 auto 0 0;width:var(--side);
            display:flex;flex-direction:column;align-items:center;
            padding:24px 12px;background:#121719;border-right:1px solid var(--line);
            transition:var(--ease)
        }
        .brand{
            width:100%;display:flex;justify-content:center;align-items:center;
            margin-bottom:48px;color:var(--cyan);font-weight:800;font-size:18px;
            letter-spacing:-.08em;white-space:nowrap;overflow:hidden
        }
        .brand-mark{
            width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--cyan);
            border-radius:10px;background:rgba(141,228,209,.08);font-size:16px
        }
        .brand-text{display:none;margin-left:10px;font-size:14px;letter-spacing:0}
        .side-nav{width:100%;display:flex;flex-direction:column;gap:10px}
        .nav-link{
            position:relative;display:flex;align-items:center;justify-content:center;gap:12px;
            min-height:48px;color:var(--muted);border:1px solid transparent;border-radius:7px;
            transition:var(--ease);white-space:nowrap;overflow:hidden
        }
        .nav-link:hover,.nav-link:focus-visible{color:var(--ink);background:var(--panel-2);border-color:var(--line-light);outline:none}
        .nav-link.active{color:var(--cyan);background:rgba(141,228,209,.08);border-color:rgba(141,228,209,.28)}
        .nav-link.active:before{content:"";position:absolute;left:-1px;width:3px;height:22px;background:var(--cyan);border-radius:0 3px 3px 0}
        .nav-icon{width:20px;height:20px;flex:0 0 20px}
        .nav-label{display:none;font-size:13px}
        .side-status{margin-top:auto;width:100%;padding-top:18px;border-top:1px solid var(--line);text-align:center;color:var(--muted-2);font-size:11px}
        .status-dot{display:inline-block;width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
        .main{margin-left:var(--side);min-width:0}
        .topbar{
            min-height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;
            justify-content:space-between;padding:0 6vw;background:rgba(16,20,22,.86);backdrop-filter:blur(14px)
        }
        .crumb{color:var(--muted);font-size:13px}
        .crumb strong{color:var(--ink);font-weight:600}
        .top-action{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13px}
        .top-action svg{width:16px;height:16px;color:var(--cyan)}
        .hero{
            padding:54px 6vw 38px;
            background:#e7eeec;color:#172124;position:relative;overflow:hidden
        }
        .hero:after{content:"";position:absolute;right:7%;top:-70px;width:280px;height:280px;border:1px solid rgba(23,33,36,.12);border-radius:50%}
        .hero-inner{position:relative;z-index:1;max-width:1120px;margin:auto}
        .eyebrow{display:inline-flex;align-items:center;gap:8px;color:#54736e;font-size:12px;font-weight:700;letter-spacing:.1em}
        .eyebrow:before{content:"";width:24px;height:1px;background:#54736e}
        h1{max-width:760px;margin:12px 0 12px;font-size:clamp(32px,4vw,58px);line-height:1.15;letter-spacing:-.055em}
        .hero-copy{max-width:650px;color:#526166;font-size:16px;line-height:1.9}
        .hero-row{display:flex;align-items:center;justify-content:space-between;gap:30px;margin-top:28px}
        .quick-tags{display:flex;flex-wrap:wrap;gap:8px}
        .chip{
            display:inline-flex;align-items:center;min-height:32px;padding:3px 12px;
            border:1px solid var(--line-light);border-radius:999px;color:var(--muted);font-size:12px;
            transition:var(--ease)
        }
        .chip:hover,.chip.active{color:var(--cyan);border-color:var(--cyan-deep);background:rgba(141,228,209,.08)}
        .hero .chip{color:#49625f;border-color:#b9cac6}.hero .chip:hover,.hero .chip.active{color:#1b6256;border-color:#579d8e;background:#d4e6e1}
        .count-box{text-align:right;white-space:nowrap}.count-box b{display:block;font-size:26px;line-height:1;color:#172124}.count-box span{font-size:12px;color:#657477}
        .content{max-width:1240px;margin:auto;padding:48px 6vw 96px}
        .toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px;padding-bottom:18px;border-bottom:1px solid var(--line)}
        .filter-title{font-size:18px;font-weight:700}.filter-title small{display:block;color:var(--muted);font-size:12px;font-weight:400}
        .sort{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid var(--line);border-radius:7px;background:var(--panel)}
        .sort button{border:0;background:transparent;color:var(--muted);padding:5px 11px;border-radius:5px;font-size:12px;transition:var(--ease)}
        .sort button:hover,.sort button.active{color:var(--ink);background:var(--panel-2)}
        .card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
        .video-card{
            min-width:0;display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);
            border-radius:var(--radius);overflow:hidden;box-shadow:0 5px 16px rgba(0,0,0,.12);transition:var(--ease)
        }
        .video-card:hover{transform:translateY(-4px);border-color:#53666b;box-shadow:var(--shadow)}
        .thumb{height:166px;position:relative;display:flex;align-items:flex-end;padding:14px;overflow:hidden;background:#26363a}
        .thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(141,228,209,.35),transparent 52%),linear-gradient(0deg,rgba(0,0,0,.5),transparent)}
        .thumb.one{background-color:#263c46}.thumb.two{background-color:#3a3048}.thumb.three{background-color:#40372a}.thumb.four{background-color:#203b37}.thumb.five{background-color:#3c2d35}.thumb.six{background-color:#293744}
        .thumb-label{position:relative;z-index:1;font-size:11px;color:#d9efeb;letter-spacing:.08em}.thumb-index{position:absolute;right:14px;top:13px;z-index:1;color:rgba(255,255,255,.62);font-size:11px}
        .card-body{padding:17px 17px 16px;display:flex;flex-direction:column;flex:1}
        .card-title{font-size:16px;line-height:1.45;margin-bottom:8px;color:#f0f4f4}
        .card-desc{color:var(--muted);font-size:13px;line-height:1.7;min-height:45px}
        .meta{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:16px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted-2);font-size:11px}
        .meta span{display:flex;align-items:center;gap:5px}.meta svg{width:14px;height:14px;color:var(--cyan-deep)}
        .text-link{color:var(--cyan);font-size:12px;transition:var(--ease)}.text-link:hover{color:#d4fff6}
        .feature{
            display:grid;grid-template-columns:1.1fr 1fr;gap:28px;margin:70px 0 62px;
            padding:28px;border:1px solid var(--line);background:linear-gradient(110deg,#171f22,#151a1c);border-radius:8px
        }
        .feature h2,.section-head h2{font-size:25px;line-height:1.3;letter-spacing:-.03em}
        .feature p{margin-top:11px;color:var(--muted);font-size:14px}
        .feature-list{display:grid;grid-template-columns:1fr 1fr;gap:10px}
        .feature-item{padding:14px;border-left:2px solid var(--cyan-deep);background:#1d2629;color:#c9d3d2;font-size:13px}
        .feature-item b{display:block;color:var(--ink);font-size:14px;margin-bottom:3px}
        .section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:22px}
        .section-head p{max-width:420px;color:var(--muted);font-size:13px}
        .faq{margin-top:65px;border-top:1px solid var(--line)}
        .faq .section-head{padding-top:28px}
        .faq-item{border-bottom:1px solid var(--line)}
        .faq-question{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 4px;border:0;background:none;color:var(--ink);text-align:left;font-weight:600}
        .faq-question svg{width:18px;color:var(--muted);transition:var(--ease)}.faq-question[aria-expanded=true] svg{transform:rotate(45deg);color:var(--cyan)}
        .faq-answer{display:none;max-width:760px;padding:0 40px 18px 4px;color:var(--muted);font-size:13px;line-height:1.8}.faq-answer.open{display:block}
        .cta{
            display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:68px;padding:28px 30px;
            border:1px solid rgba(141,228,209,.3);background:rgba(141,228,209,.07);border-radius:8px
        }
        .cta h2{font-size:22px;line-height:1.35}.cta p{color:var(--muted);font-size:13px;margin-top:5px}
        .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:6px;border:1px solid var(--cyan);background:var(--cyan);color:#142421;font-size:13px;font-weight:700;transition:var(--ease);white-space:nowrap}
        .btn:hover{background:#c1f7eb;transform:translateY(-2px);box-shadow:0 8px 18px rgba(141,228,209,.14)}.btn:focus-visible,.sort button:focus-visible,.faq-question:focus-visible{outline:2px solid var(--violet);outline-offset:3px}
        .footer{margin:0 6vw;padding:34px 0 26px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
        .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:40px;max-width:1240px;margin:auto}.footer-brand strong{display:block;color:var(--ink);font-size:15px;margin-bottom:8px}.footer-brand p{max-width:390px;line-height:1.8}
        .footer-links{display:flex;flex-direction:column;gap:5px}.footer-links h4{color:var(--ink);font-size:12px;margin-bottom:5px}.footer-links a{transition:var(--ease)}.footer-links a:hover{color:var(--cyan)}
        .copyright{display:flex;justify-content:space-between;gap:20px;max-width:1240px;margin:28px auto 0;padding-top:18px;border-top:1px solid var(--line);color:var(--muted-2);font-size:11px}
        .empty{display:none;padding:42px 20px;text-align:center;border:1px dashed var(--line-light);color:var(--muted)}
        @media (min-width:1100px){
            .side-panel:hover{width:230px;align-items:stretch;padding-left:18px;padding-right:18px}
            .side-panel:hover .brand{justify-content:flex-start}.side-panel:hover .brand-text,.side-panel:hover .nav-label{display:block}.side-panel:hover~.main{margin-left:230px}
            .side-panel:hover .nav-link{justify-content:flex-start;padding-left:14px}
        }
        @media (max-width:1024px){.card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.content,.hero{padding-left:5vw;padding-right:5vw}.footer{margin-left:5vw;margin-right:5vw}}
        @media (max-width:768px){
            :root{--side:0px}.side-panel{position:relative;inset:auto;width:100%;height:68px;display:flex;flex-direction:row;padding:0 18px;border-right:0;border-bottom:1px solid var(--line)}
            .brand{width:auto;margin:0}.brand-text{display:block}.brand-mark{width:32px;height:32px;font-size:13px}.side-nav{width:auto;margin-left:auto;flex-direction:row;gap:4px}.nav-link{min-height:38px;padding:0 9px}.nav-link.active:before{left:0;top:auto;bottom:-1px;width:100%;height:2px}.nav-label{display:block;font-size:12px}.nav-icon{width:17px;height:17px}.side-status{display:none}.main{margin-left:0}.topbar{min-height:58px;padding:0 18px}.top-action{display:none}.hero{padding:38px 20px 30px}.hero-row{align-items:flex-start;flex-direction:column;gap:20px}.count-box{text-align:left}.content{padding:34px 20px 70px}.toolbar{align-items:flex-start;flex-direction:column}.sort{width:100%;justify-content:space-between}.sort button{flex:1}.feature{grid-template-columns:1fr;margin-top:48px;padding:20px}.section-head{align-items:flex-start;flex-direction:column;gap:8px}.cta{align-items:flex-start;flex-direction:column;padding:22px}.footer{margin-left:20px;margin-right:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:25px}.footer-brand{grid-column:1/-1}.copyright{align-items:flex-start;flex-direction:column;gap:3px}}
        @media (max-width:520px){
            .brand-text{font-size:12px}.nav-link{padding:0 6px}.nav-label{font-size:11px}.nav-icon{display:none}
            h1{font-size:33px}.hero-copy{font-size:14px}.card-grid{grid-template-columns:1fr}.thumb{height:150px}.feature-list{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}
        }

/* roulang page: category2 */
:root{
      --bg:#0b0e12;
      --panel:#11161d;
      --panel-2:#151b23;
      --panel-3:#1b222c;
      --text:#f3f6f8;
      --muted:#9aa6b2;
      --soft:#c4cdd5;
      --line:#29323c;
      --cyan:#8de9dc;
      --cyan-deep:#3db9ac;
      --violet:#ad9aff;
      --orange:#ffb36b;
      --green:#b9f27c;
      --danger:#ff8d86;
      --radius:8px;
      --shadow:0 12px 34px rgba(0,0,0,.22);
      --ease:all .24s ease;
    }
    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      min-width:320px;
      background:var(--bg);
      color:var(--text);
      font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
      font-size:15px;
      line-height:1.78;
      letter-spacing:.01em;
    }
    a{color:inherit;text-decoration:none}
    button,input{font:inherit}
    button{cursor:pointer}
    svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
    .app-shell{min-height:100vh}
    .side-rail{
      position:fixed;z-index:20;left:0;top:0;bottom:0;width:82px;
      display:flex;flex-direction:column;align-items:center;
      padding:22px 12px;background:#0d1116;border-right:1px solid var(--line);
      transition:var(--ease)
    }
    .brand-mark{
      width:48px;height:48px;border:1px solid #3b7774;border-radius:12px;
      display:grid;place-items:center;color:var(--cyan);background:#132022;
      box-shadow:0 0 0 5px rgba(141,233,220,.04);margin-bottom:34px
    }
    .brand-mark svg{width:25px;height:25px}
    .side-nav{width:100%;display:flex;flex-direction:column;gap:10px}
    .nav-link{
      min-height:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;
      gap:2px;border:1px solid transparent;border-radius:7px;color:#7f8b96;
      transition:var(--ease);white-space:nowrap;overflow:hidden
    }
    .nav-link:hover{color:var(--text);background:#171e26;border-color:#303b46}
    .nav-link.active{color:var(--cyan);background:#162a2c;border-color:#315e5c}
    .nav-icon{width:21px;height:21px}
    .nav-label{font-size:11px;line-height:1.35}
    .rail-note{margin-top:auto;color:#586571;font-size:10px;writing-mode:vertical-rl;letter-spacing:.12em}
    .main-wrap{margin-left:82px;min-height:100vh}
    .topbar{height:72px;border-bottom:1px solid var(--line);display:flex;align-items:center;padding:0 46px;justify-content:space-between;background:rgba(11,14,18,.92)}
    .breadcrumb{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}
    .breadcrumb strong{color:var(--soft);font-weight:600}
    .status{display:flex;align-items:center;gap:8px;color:#9fb4b2;font-size:12px}
    .status-dot{width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 12px var(--green)}
    .container{max-width:1220px;margin:0 auto;padding:0 42px}
    .hero{padding:64px 0 38px;border-bottom:1px solid var(--line)}
    .hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:58px;align-items:end}
    .eyebrow{display:flex;align-items:center;gap:10px;color:var(--cyan);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:18px}
    .eyebrow:before{content:"";width:28px;height:1px;background:var(--cyan)}
    h1{font-size:clamp(34px,4.5vw,62px);line-height:1.18;letter-spacing:-.04em;max-width:730px;margin-bottom:22px}
    .hero-copy{color:var(--muted);font-size:16px;max-width:650px}
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 18px;
      border:1px solid var(--line);border-radius:6px;color:var(--soft);background:#151b22;
      transition:var(--ease);font-weight:600
    }
    .btn svg{width:17px;height:17px}
    .btn:hover{transform:translateY(-2px);border-color:#65737e;background:#202932;color:#fff;box-shadow:0 7px 18px rgba(0,0,0,.2)}
    .btn:focus-visible,.filter:focus-visible,.nav-link:focus-visible,.faq-question:focus-visible{outline:3px solid rgba(141,233,220,.35);outline-offset:3px}
    .btn-primary{background:var(--cyan);color:#0b1718;border-color:var(--cyan)}
    .btn-primary:hover{background:#b1f5ec;color:#081213;border-color:#b1f5ec}
    .preview-panel{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow);overflow:hidden}
    .preview-panel:after{content:"";position:absolute;right:-55px;top:-65px;width:170px;height:170px;border-radius:50%;border:1px solid rgba(173,154,255,.25)}
    .preview-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px}
    .preview-title{font-weight:700}.mini-code{font-size:11px;color:var(--violet)}
    .rank-row{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #202832}
    .rank-row:last-child{border-bottom:0}
    .rank-num{font-size:19px;color:var(--orange);font-weight:700}
    .rank-name{font-weight:600;font-size:14px}.rank-meta{font-size:11px;color:var(--muted)}
    .rank-score{font-size:12px;color:var(--cyan)}
    .section{padding:62px 0;border-bottom:1px solid var(--line)}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:24px}
    h2{font-size:28px;line-height:1.3;letter-spacing:-.025em}
    .section-intro{max-width:570px;color:var(--muted);font-size:14px}
    .filter-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:28px}
    .filter{
      border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--muted);
      padding:7px 14px;transition:var(--ease);font-size:13px
    }
    .filter:hover,.filter.active{color:#071313;background:var(--cyan);border-color:var(--cyan)}
    .featured-strip{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:12px}
    .feature-card{min-height:170px;position:relative;padding:22px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--panel)}
    .feature-card:first-child{background:linear-gradient(135deg,#16292b,#171925 72%)}
    .feature-card:before{content:"";position:absolute;width:170px;height:170px;border-radius:50%;right:-45px;bottom:-90px;background:rgba(141,233,220,.11)}
    .feature-card.violet:before{background:rgba(173,154,255,.14)}
    .feature-card.orange:before{background:rgba(255,179,107,.12)}
    .feature-kicker{font-size:11px;color:var(--cyan);letter-spacing:.08em;margin-bottom:20px}
    .feature-card.violet .feature-kicker{color:var(--violet)}
    .feature-card.orange .feature-kicker{color:var(--orange)}
    .feature-card h3{font-size:19px;line-height:1.4;max-width:260px}
    .feature-card p{color:var(--muted);font-size:12px;margin-top:8px}
    .list-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:24px}
    .content-list{display:flex;flex-direction:column;gap:10px}
    .content-item{
      display:grid;grid-template-columns:150px minmax(0,1fr) auto;gap:18px;align-items:center;
      padding:14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);
      transition:var(--ease)
    }
    .content-item:hover{background:var(--panel-2);border-color:#53626e;transform:translateX(3px)}
    .thumb{height:92px;border-radius:6px;position:relative;overflow:hidden;background:#27333a}
    .thumb:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(141,233,220,.38),transparent 55%,rgba(173,154,255,.33))}
    .thumb:after{content:"▶";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.55);border-radius:50%;font-size:11px;color:#fff}
    .thumb.t2{background:#2a252f}.thumb.t2:before{background:linear-gradient(135deg,rgba(255,179,107,.4),transparent,rgba(173,154,255,.3))}
    .thumb.t3{background:#1e2a25}.thumb.t3:before{background:linear-gradient(135deg,rgba(185,242,124,.35),transparent,rgba(141,233,220,.25))}
    .item-title{font-size:16px;font-weight:700;line-height:1.45;margin-bottom:6px}
    .item-desc{font-size:12px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
    .tag{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid #37444f;border-radius:4px;color:#aebbc5;font-size:11px}
    .item-side{text-align:right;color:var(--muted);font-size:11px;white-space:nowrap}
    .item-side strong{display:block;color:var(--cyan);font-size:15px;margin-bottom:4px}
    .side-panel{border-left:1px solid var(--line);padding-left:22px}
    .side-panel h3{font-size:16px;margin-bottom:14px}
    .hot-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:28px}
    .hot-tag{padding:6px 10px;background:#171e26;border:1px solid var(--line);border-radius:5px;color:var(--soft);font-size:12px}
    .side-note{padding:15px;border-left:2px solid var(--orange);background:#191817;color:var(--muted);font-size:12px}
    .stats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);background:var(--panel)}
    .stat{padding:25px 22px;border-right:1px solid var(--line)}
    .stat:last-child{border-right:0}
    .stat-number{font-size:32px;font-weight:750;line-height:1.2;color:var(--cyan);letter-spacing:-.04em}
    .stat:nth-child(2) .stat-number{color:var(--violet)}
    .stat:nth-child(3) .stat-number{color:var(--orange)}
    .stat:nth-child(4) .stat-number{color:var(--green)}
    .stat-label{font-size:13px;font-weight:700;margin-top:8px}.stat small{display:block;color:var(--muted);font-size:11px;margin-top:3px}
    .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
    .quote{padding:22px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius)}
    .quote-mark{color:var(--violet);font-size:28px;line-height:1;margin-bottom:12px}
    .quote p{font-size:14px;color:#d7dee3;min-height:76px}
    .quote-foot{display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:14px}
    .stars{color:var(--orange);letter-spacing:2px}
    .faq-list{max-width:850px;border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line)}
    .faq-question{width:100%;background:transparent;color:var(--text);border:0;text-align:left;display:flex;justify-content:space-between;gap:20px;padding:19px 0;font-weight:650}
    .faq-question span:last-child{color:var(--cyan);font-size:20px;line-height:1;transition:var(--ease)}
    .faq-answer{display:none;color:var(--muted);font-size:13px;padding:0 40px 18px 0}
    .faq-item.open .faq-answer{display:block}.faq-item.open .faq-question span:last-child{transform:rotate(45deg)}
    .cta{padding:56px 0 72px}
    .cta-box{display:flex;justify-content:space-between;gap:25px;align-items:center;padding:30px 34px;border:1px solid #3a6966;background:linear-gradient(100deg,#142629,#171923);border-radius:var(--radius)}
    .cta-box h2{font-size:25px}.cta-box p{color:var(--muted);font-size:13px;margin-top:7px}
    .footer{border-top:1px solid var(--line);padding:36px 42px 24px;background:#0d1116}
    .footer-grid{max-width:1136px;margin:auto;display:grid;grid-template-columns:1.5fr .7fr .9fr;gap:50px}
    .footer-brand strong{font-size:16px;color:var(--text)}.footer-brand p{max-width:390px;color:var(--muted);font-size:12px;margin-top:10px}
    .footer-links{display:flex;flex-direction:column;gap:6px}.footer-links h4{font-size:12px;color:var(--soft);margin-bottom:7px}.footer-links a{font-size:12px;color:var(--muted);transition:var(--ease)}.footer-links a:hover{color:var(--cyan)}
    .copyright{max-width:1136px;margin:30px auto 0;padding-top:17px;border-top:1px solid var(--line);display:flex;justify-content:space-between;color:#65727d;font-size:11px}
    .mobile-top{display:none}
    @media(max-width:1024px){
      .container{padding:0 28px}.topbar{padding:0 28px}.hero-grid{gap:30px}.featured-strip{grid-template-columns:1fr 1fr}.feature-card:first-child{grid-column:span 2}.list-layout{grid-template-columns:1fr}.side-panel{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}.stats{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat:nth-child(-n+2){border-bottom:1px solid var(--line)}.footer{padding-left:28px;padding-right:28px}
    }
    @media(max-width:768px){
      .side-rail{display:none}.main-wrap{margin-left:0}.mobile-top{height:62px;display:flex;align-items:center;justify-content:space-between;padding:0 18px;border-bottom:1px solid var(--line);background:#0d1116}.mobile-brand{font-weight:700;font-size:14px;color:var(--cyan)}.mobile-menu{display:flex;gap:7px}.mobile-menu a{font-size:11px;color:var(--muted);padding:5px 7px}.topbar{height:54px;padding:0 18px}.status{display:none}.container{padding:0 18px}.hero{padding:42px 0 30px}.hero-grid{grid-template-columns:1fr}.hero-copy{font-size:14px}.preview-panel{margin-top:4px}.section{padding:44px 0}.section-head{display:block}.section-intro{margin-top:9px}.content-item{grid-template-columns:110px minmax(0,1fr)}.item-side{display:none}.thumb{height:78px}.quote-grid{grid-template-columns:1fr}.quote p{min-height:auto}.cta-box{display:block;padding:25px 22px}.cta-box .btn{margin-top:20px}.footer-grid{grid-template-columns:1fr 1fr;gap:28px}.footer-brand{grid-column:span 2}.copyright{display:block}.copyright span{display:block;margin-top:4px}
    }
    @media(max-width:520px){
      h1{font-size:35px}.featured-strip{grid-template-columns:1fr}.feature-card:first-child{grid-column:auto}.stats{grid-template-columns:1fr 1fr}.stat{padding:19px 14px}.stat-number{font-size:25px}.content-item{grid-template-columns:1fr}.thumb{height:130px}.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}.mobile-menu{gap:2px}.mobile-menu a{font-size:10px}
    }