/* roulang page: index */
:root {
      --bg: #07070b;
      --bg-2: #0c0c11;
      --panel: rgba(16, 16, 22, 0.94);
      --panel-2: rgba(21, 21, 30, 0.94);
      --line: rgba(255, 255, 255, 0.09);
      --line-2: rgba(244, 63, 94, 0.28);
      --text: #f5f7fb;
      --muted: #a4a7b3;
      --muted-2: #72768a;
      --brand: #fb7185;
      --brand-2: #8b5cf6;
      --brand-3: #22d3ee;
      --ok: #34d399;
      --warn: #f59e0b;
      --radius: 18px;
      --radius-lg: 24px;
      --shadow: 0 26px 80px rgba(0, 0, 0, 0.48);
      --shadow-soft: 0 14px 40px rgba(0, 0, 0, 0.28);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 10% 8%, rgba(139, 92, 246, 0.14), transparent 25%),
        radial-gradient(circle at 90% 18%, rgba(244, 63, 94, 0.12), transparent 24%),
        radial-gradient(circle at 50% 100%, rgba(34, 211, 238, 0.07), transparent 26%),
        linear-gradient(180deg, #09090d 0%, #060608 100%);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
      line-height: 1.7;
      overflow-x: hidden;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

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

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

    ::selection {
      background: rgba(244, 63, 94, 0.38);
      color: #fff;
    }

    .site-grid {
      position: relative;
      isolation: isolate;
    }

    .site-grid::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
      background-size: 42px 42px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,0.28), rgba(0,0,0,0));
      opacity: 0.35;
      z-index: -1;
    }

    .container {
      width: min(1200px, calc(100% - 2rem));
      margin-inline: auto;
    }

    .section {
      position: relative;
      padding: clamp(3.5rem, 5vw, 5.75rem) 0;
    }

    .tone-rose {
      background: linear-gradient(180deg, rgba(244, 63, 94, 0.05), rgba(244, 63, 94, 0.01));
    }

    .tone-violet {
      background: linear-gradient(180deg, rgba(139, 92, 246, 0.05), rgba(139, 92, 246, 0.01));
    }

    .tone-cyan {
      background: linear-gradient(180deg, rgba(34, 211, 238, 0.05), rgba(34, 211, 238, 0.01));
    }

    .tone-slate {
      background: linear-gradient(180deg, rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.01));
    }

    .surface {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(180deg, var(--panel), rgba(12, 12, 17, 0.96));
      box-shadow: var(--shadow);
      overflow: hidden;
    }

    .surface::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, rgba(255,255,255,0.05), transparent 25%, transparent 50%, rgba(255,255,255,0.025) 70%, transparent);
      opacity: .34;
    }

    .surface-soft {
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(18, 18, 26, 0.88), rgba(12, 12, 17, 0.92));
      box-shadow: var(--shadow-soft);
    }

    .section-head {
      display: grid;
      gap: 0.8rem;
      margin-bottom: 1.4rem;
    }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      width: fit-content;
      padding: 0.42rem 0.72rem;
      border: 1px solid rgba(244, 63, 94, 0.28);
      border-radius: 999px;
      background: rgba(244, 63, 94, 0.09);
      color: #fecdd3;
      font-size: 0.78rem;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      box-shadow: 0 0 0 1px rgba(244,63,94,0.04) inset;
    }

    .section-title {
      font-size: clamp(1.5rem, 2.3vw, 2.35rem);
      line-height: 1.08;
      font-weight: 800;
      letter-spacing: -0.03em;
      color: #fff;
    }

    .section-desc {
      color: var(--muted);
      max-width: 70ch;
      font-size: 0.98rem;
    }

    .hero-title {
      font-size: clamp(2.3rem, 6vw, 5rem);
      line-height: 0.98;
      letter-spacing: -0.05em;
      font-weight: 900;
      text-wrap: balance;
    }

    .hero-lead {
      color: #d6d8e2;
      max-width: 48rem;
      font-size: 1.02rem;
    }

    .mini-chip,
    .tag-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
      color: #d9dce7;
      padding: 0.42rem 0.78rem;
      font-size: 0.82rem;
      line-height: 1;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .mini-chip:hover,
    .tag-pill:hover {
      transform: translateY(-1px);
      border-color: rgba(244, 63, 94, 0.34);
      background: rgba(244, 63, 94, 0.08);
    }

    .status-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      background: var(--ok);
      box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.12);
      flex: 0 0 auto;
    }

    .btn-main,
    .btn-ghost {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      min-height: 48px;
      padding: 0.78rem 1.15rem;
      border-radius: 14px;
      border: 1px solid transparent;
      font-weight: 700;
      transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
      will-change: transform;
      cursor: pointer;
    }

    .btn-main {
      background: linear-gradient(135deg, #fb7185 0%, #ef4444 55%, #be185d 100%);
      color: white;
      box-shadow: 0 14px 34px rgba(244, 63, 94, 0.28);
    }

    .btn-main:hover {
      transform: translateY(-1px);
      box-shadow: 0 18px 42px rgba(244, 63, 94, 0.34);
    }

    .btn-ghost {
      background: rgba(255, 255, 255, 0.03);
      border-color: rgba(255, 255, 255, 0.09);
      color: #e7e9f2;
    }

    .btn-ghost:hover {
      transform: translateY(-1px);
      border-color: rgba(244, 63, 94, 0.34);
      background: rgba(244, 63, 94, 0.08);
    }

    .nav-link {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 0.42rem;
      padding: 0.3rem 0;
      color: #d8dbe6;
      transition: color .2s ease, opacity .2s ease;
    }

    .nav-link:hover {
      color: #fff;
    }

    .nav-link.active::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: -0.42rem;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--brand), var(--brand-2));
      box-shadow: 0 0 18px rgba(244, 63, 94, 0.32);
    }

    .nav-link.active {
      color: #fff;
    }

    .header-shell {
      backdrop-filter: blur(18px);
      background: rgba(6, 6, 10, 0.76);
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .top-limiter {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: linear-gradient(90deg, rgba(244, 63, 94, 0.12), rgba(139, 92, 246, 0.11), rgba(34, 211, 238, 0.08));
    }

    .glow-line {
      position: absolute;
      inset: auto 0 0 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(244, 63, 94, 0.44), rgba(139, 92, 246, 0.38), transparent);
    }

    .hero-grid {
      position: relative;
    }

    .hero-grid::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(circle at 22% 18%, rgba(244, 63, 94, 0.16), transparent 15%),
        radial-gradient(circle at 80% 26%, rgba(139, 92, 246, 0.16), transparent 16%),
        linear-gradient(135deg, rgba(255,255,255,0.03) 0, transparent 25%, transparent 75%, rgba(255,255,255,0.02) 100%);
      opacity: .6;
    }

    .feature-card,
    .update-card,
    .matrix-card,
    .stat-card,
    .faq-item,
    .guide-card {
      position: relative;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(19, 19, 27, 0.92), rgba(11, 11, 16, 0.96));
      box-shadow: var(--shadow-soft);
      overflow: hidden;
      transition: transform .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    }

    .feature-card:hover,
    .update-card:hover,
    .matrix-card:hover,
    .stat-card:hover,
    .guide-card:hover {
      transform: translateY(-2px);
      border-color: rgba(244, 63, 94, 0.28);
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.44);
    }

    .feature-card::before,
    .update-card::before,
    .matrix-card::before,
    .stat-card::before,
    .faq-item::before,
    .guide-card::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255,255,255,0.04), transparent 38%);
      opacity: .45;
    }

    .card-badge {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.34rem 0.66rem;
      border-radius: 999px;
      border: 1px solid rgba(244, 63, 94, 0.24);
      background: rgba(244, 63, 94, 0.09);
      color: #fecdd3;
      font-size: 0.74rem;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .metric {
      display: grid;
      gap: 0.2rem;
      padding: 1rem;
      border-radius: 16px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.03);
    }

    .metric strong {
      font-size: 1.7rem;
      line-height: 1;
      letter-spacing: -0.04em;
      color: #fff;
    }

    .metric span {
      color: var(--muted);
      font-size: 0.84rem;
    }

    .content-link {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.9rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      transition: color .2s ease, transform .2s ease;
    }

    .content-link:hover {
      color: #fff;
      transform: translateX(2px);
    }

    .content-link:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .content-link .time {
      color: #fda4af;
      font-size: 0.8rem;
      white-space: nowrap;
    }

    .faq-item summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.1rem;
      font-weight: 700;
      color: #fff;
    }

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

    .faq-item .faq-body {
      padding: 0 1.1rem 1.05rem;
      color: var(--muted);
    }

    .faq-plus {
      flex: 0 0 auto;
      width: 1.75rem;
      height: 1.75rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,0.11);
      display: grid;
      place-items: center;
      color: #fca5a5;
      transition: transform .2s ease, border-color .2s ease, background .2s ease;
    }

    .faq-item[open] .faq-plus {
      transform: rotate(45deg);
      background: rgba(244, 63, 94, 0.12);
      border-color: rgba(244, 63, 94, 0.34);
    }

    .matrix-card {
      min-height: 120px;
    }

    .matrix-icon {
      width: 2.8rem;
      height: 2.8rem;
      border-radius: 16px;
      border: 1px solid rgba(244, 63, 94, 0.22);
      background: linear-gradient(180deg, rgba(244, 63, 94, 0.16), rgba(139, 92, 246, 0.1));
      display: grid;
      place-items: center;
      color: #fff;
      box-shadow: 0 10px 24px rgba(244, 63, 94, 0.12);
    }

    .soft-line {
      height: 1px;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    }

    .footer-link {
      color: var(--muted);
      transition: color .2s ease;
    }

    .footer-link:hover {
      color: #fff;
    }

    .mobile-drawer {
      position: fixed;
      inset: 0;
      z-index: 60;
      display: none;
      background: rgba(4, 4, 7, 0.88);
      backdrop-filter: blur(16px);
    }

    .mobile-drawer.open {
      display: block;
    }

    .drawer-panel {
      position: absolute;
      inset: 0 0 0 auto;
      width: min(100%, 360px);
      background: linear-gradient(180deg, rgba(16,16,23,0.98), rgba(10,10,14,0.98));
      border-left: 1px solid rgba(255,255,255,0.08);
      padding: 1.1rem;
      overflow-y: auto;
    }

    .drawer-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 1rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.08);
      font-size: 1.05rem;
      font-weight: 700;
      color: #eef1f7;
    }

    .drawer-link:last-child {
      border-bottom: 0;
    }

    .label-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.65rem;
    }

    .halo {
      position: absolute;
      inset: auto auto -8rem -8rem;
      width: 22rem;
      height: 22rem;
      border-radius: 999px;
      background: radial-gradient(circle, rgba(244,63,94,0.18), transparent 64%);
      filter: blur(4px);
      pointer-events: none;
    }

    .halo.right {
      inset: -7rem -7rem auto auto;
      background: radial-gradient(circle, rgba(139,92,246,0.16), transparent 64%);
    }

    @media (max-width: 1024px) {
      .hero-title {
        max-width: 12ch;
      }
    }

    @media (max-width: 768px) {
      .section {
        padding: 3rem 0;
      }

      .container {
        width: min(100% - 1.1rem, 1200px);
      }

      .hero-title {
        max-width: 100%;
        font-size: clamp(2rem, 11vw, 3.3rem);
      }
    }

    @media (max-width: 520px) {
      .btn-main,
      .btn-ghost {
        width: 100%;
      }

      .content-link {
        gap: 0.7rem;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#09090b;
      --bg-2:#101114;
      --bg-3:#15161b;
      --panel:#111217;
      --panel-2:#181a22;
      --line:rgba(255,255,255,.10);
      --line-2:rgba(244,63,94,.24);
      --text:#f4f4f5;
      --muted:#a1a1aa;
      --muted-2:#71717a;
      --accent:#fb7185;
      --accent-2:#f43f5e;
      --accent-3:#22d3ee;
      --accent-4:#c084fc;
      --success:#34d399;
      --radius:16px;
      --radius-sm:12px;
      --shadow:0 16px 46px rgba(0,0,0,.38);
      --shadow-2:0 10px 32px rgba(0,0,0,.25);
    }

    html{scroll-behavior:smooth;}
    *,*::before,*::after{box-sizing:border-box;}
    body{
      margin:0;
      background:
        radial-gradient(circle at 20% 10%, rgba(244,63,94,.12), transparent 30%),
        radial-gradient(circle at 80% 0%, rgba(192,132,252,.08), transparent 24%),
        radial-gradient(circle at 75% 30%, rgba(34,211,238,.06), transparent 22%),
        linear-gradient(180deg, #08080a 0%, #0b0b0f 40%, #09090b 100%);
      color:var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background-image:
        linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:56px 56px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.08) 55%, rgba(0,0,0,0));
      opacity:.4;
      z-index:-1;
    }
    ::selection{background:rgba(244,63,94,.35); color:#fff;}
    a{color:inherit; text-decoration:none;}
    img{max-width:100%; display:block;}
    button,input,select,textarea{font:inherit;}
    .site-container{width:min(1200px, calc(100% - 2rem)); margin-inline:auto;}
    .top-strip{
      position:relative;
      border-bottom:1px solid var(--line);
      background:linear-gradient(90deg, rgba(244,63,94,.16), rgba(24,24,27,.82) 45%, rgba(17,18,23,.95));
      overflow:hidden;
    }
    .top-strip::after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 20%, transparent 40%);
      transform:translateX(-60%);
      animation: sweep 7s linear infinite;
    }
    @keyframes sweep{
      0%{transform:translateX(-70%);}
      100%{transform:translateX(160%);}
    }
    .top-strip .site-container{position:relative; z-index:1;}
    .nav-shell{
      background:rgba(8,8,10,.72);
      backdrop-filter:blur(10px);
      border:1px solid var(--line);
      box-shadow:var(--shadow-2);
      border-radius:20px;
    }
    .nav-link{
      position:relative;
      color:#d4d4d8;
      transition:color .2s ease, transform .2s ease, opacity .2s ease;
      padding-bottom:.3rem;
      letter-spacing:.01em;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      bottom:-.12rem;
      width:100%;
      height:1.5px;
      background:linear-gradient(90deg, transparent, rgba(251,113,133,.95), rgba(34,211,238,.95), transparent);
      transform:scaleX(0);
      transform-origin:center;
      transition:transform .22s ease;
    }
    .nav-link:hover{color:#fff;}
    .nav-link:hover::after,
    .nav-link.active::after{transform:scaleX(1);}
    .nav-link.active{color:#fff;}
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      letter-spacing:.02em;
    }
    .brand-dot{
      width:.72rem;
      height:.72rem;
      border-radius:999px;
      background:linear-gradient(135deg, var(--accent), var(--accent-4));
      box-shadow:0 0 0 6px rgba(244,63,94,.12);
    }
    .btn-primary, .btn-secondary, .btn-mini{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      border-radius:999px;
      transition:transform .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease, opacity .2s ease;
      cursor:pointer;
      will-change:transform;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg, var(--accent-2), #fb923c);
      color:#fff;
      border:1px solid rgba(255,255,255,.08);
      box-shadow:0 12px 30px rgba(244,63,94,.22);
    }
    .btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 34px rgba(244,63,94,.28);}
    .btn-secondary{
      background:rgba(255,255,255,.02);
      color:#f4f4f5;
      border:1px solid rgba(255,255,255,.14);
    }
    .btn-secondary:hover{transform:translateY(-1px); border-color:rgba(251,113,133,.38); background:rgba(255,255,255,.04);}
    .btn-mini{
      border-radius:12px;
      padding:.55rem .8rem;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.02);
      color:#fff;
    }
    .btn-mini:hover{border-color:rgba(255,255,255,.24); background:rgba(255,255,255,.05);}
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.4rem;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:#e4e4e7;
      border-radius:999px;
      padding:.4rem .75rem;
      font-size:.82rem;
      line-height:1;
    }
    .badge.hot{border-color:rgba(244,63,94,.25); background:rgba(244,63,94,.09); color:#fecdd3;}
    .badge.info{border-color:rgba(34,211,238,.22); background:rgba(34,211,238,.08); color:#cffafe;}
    .badge.ok{border-color:rgba(52,211,153,.22); background:rgba(52,211,153,.08); color:#bbf7d0;}
    .surface{
      position:relative;
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
      box-shadow:var(--shadow);
    }
    .surface::before{
      content:"";
      position:absolute;
      inset:0;
      border-radius:inherit;
      pointer-events:none;
      background:linear-gradient(120deg, rgba(255,255,255,.08), transparent 22%, transparent 78%, rgba(255,255,255,.04));
      opacity:.35;
    }
    .surface:hover{
      border-color:rgba(251,113,133,.24);
      box-shadow:0 18px 56px rgba(0,0,0,.42);
    }
    .section-panel{
      border:1px solid var(--line);
      background:linear-gradient(180deg, rgba(17,18,23,.9), rgba(11,11,15,.88));
      border-radius:24px;
      box-shadow:var(--shadow-2);
      position:relative;
      overflow:hidden;
    }
    .section-panel::after{
      content:"";
      position:absolute;
      inset:auto 1rem 0 1rem;
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(244,63,94,.4), rgba(34,211,238,.35), transparent);
      opacity:.75;
    }
    .hero-wrap{
      position:relative;
      overflow:hidden;
      border:1px solid var(--line);
      background:
        radial-gradient(circle at 12% 0%, rgba(244,63,94,.18), transparent 22%),
        radial-gradient(circle at 95% 10%, rgba(192,132,252,.14), transparent 18%),
        linear-gradient(180deg, rgba(16,17,20,.95), rgba(10,10,12,.98));
      border-radius:28px;
      box-shadow:0 24px 72px rgba(0,0,0,.45);
    }
    .hero-wrap::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        linear-gradient(130deg, transparent 0%, rgba(244,63,94,.10) 28%, transparent 58%),
        linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
      background-size:auto, 76px 76px;
      opacity:.7;
      pointer-events:none;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.95), rgba(0,0,0,.72), rgba(0,0,0,.2));
    }
    .hero-title{
      line-height:1.05;
      letter-spacing:-.03em;
    }
    .hero-title .accent{
      background:linear-gradient(90deg, #fff, #fecdd3 28%, #fda4af 58%, #f8fafc 100%);
      -webkit-background-clip:text;
      background-clip:text;
      color:transparent;
    }
    .hero-panel{
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(24,26,34,.95), rgba(12,12,15,.95));
      border-radius:24px;
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero-panel::after{
      content:"";
      position:absolute;
      inset:auto 0 0 0;
      height:2px;
      background:linear-gradient(90deg, rgba(244,63,94,.15), rgba(244,63,94,.85), rgba(34,211,238,.9), rgba(244,63,94,.2));
    }
    .ring-line{
      border:1px solid rgba(255,255,255,.08);
      background:rgba(255,255,255,.02);
      border-radius:18px;
    }
    .tag-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.03);
      color:#d4d4d8;
      padding:.42rem .72rem;
      font-size:.83rem;
      transition:transform .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .tag-chip:hover{
      transform:translateY(-1px);
      background:rgba(255,255,255,.05);
      border-color:rgba(251,113,133,.25);
    }
    .metric-box{
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
      border-radius:18px;
      padding:1rem;
    }
    .metric-num{
      font-size:1.45rem;
      line-height:1;
      font-weight:800;
      letter-spacing:-.03em;
      color:#fff;
    }
    .metric-label{
      margin-top:.35rem;
      color:var(--muted);
      font-size:.88rem;
    }
    .card-box{
      border:1px solid rgba(255,255,255,.10);
      border-radius:22px;
      background:linear-gradient(180deg, rgba(21,22,27,.95), rgba(13,13,16,.96));
      box-shadow:var(--shadow-2);
      overflow:hidden;
      position:relative;
      transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .card-box:hover{
      transform:translateY(-3px);
      border-color:rgba(251,113,133,.22);
      box-shadow:0 18px 44px rgba(0,0,0,.42);
    }
    .card-sheen{
      position:absolute;
      inset:0;
      background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.08) 18%, transparent 32%);
      opacity:.35;
      pointer-events:none;
    }
    .card-art{
      min-height:170px;
      border-bottom:1px solid rgba(255,255,255,.08);
      background:
        radial-gradient(circle at 15% 25%, rgba(244,63,94,.26), transparent 24%),
        radial-gradient(circle at 75% 20%, rgba(34,211,238,.18), transparent 22%),
        linear-gradient(135deg, rgba(28,28,34,.95), rgba(12,12,15,.98));
      position:relative;
      overflow:hidden;
    }
    .card-art::before{
      content:"";
      position:absolute;
      inset:16px;
      border:1px dashed rgba(255,255,255,.08);
      border-radius:18px;
    }
    .card-art::after{
      content:"";
      position:absolute;
      left:-10%;
      right:-10%;
      bottom:-24px;
      height:72px;
      background:linear-gradient(90deg, rgba(244,63,94,.18), rgba(192,132,252,.16), rgba(34,211,238,.10));
      transform:skewY(-6deg);
      opacity:.9;
    }
    .card-index{
      position:absolute;
      left:1rem;
      top:1rem;
      width:2.4rem;
      height:2.4rem;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(255,255,255,.08);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-weight:800;
    }
    .card-status{
      position:absolute;
      right:1rem;
      top:1rem;
      border-radius:999px;
      padding:.35rem .7rem;
      font-size:.75rem;
      background:rgba(244,63,94,.15);
      border:1px solid rgba(244,63,94,.25);
      color:#fecdd3;
    }
    .faq details{
      border:1px solid rgba(255,255,255,.10);
      background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
      border-radius:18px;
      overflow:hidden;
      box-shadow:var(--shadow-2);
    }
    .faq summary{
      list-style:none;
      cursor:pointer;
      padding:1rem 1.1rem;
      font-weight:700;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
    }
    .faq summary::-webkit-details-marker{display:none;}
    .faq summary::after{
      content:"+";
      width:1.7rem;
      height:1.7rem;
      display:grid;
      place-items:center;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.02);
      color:#fff;
      flex:none;
    }
    .faq details[open] summary::after{content:"–";}
    .faq .answer{
      padding:0 1.1rem 1rem;
      color:var(--muted);
      border-top:1px solid rgba(255,255,255,.08);
    }
    .footer-link{
      color:#bdbdc7;
      transition:color .2s ease, transform .2s ease;
      display:inline-flex;
      align-items:center;
      gap:.35rem;
    }
    .footer-link:hover{color:#fff; transform:translateY(-1px);}
    .focusable:focus,
    .nav-link:focus,
    .footer-link:focus,
    .btn-primary:focus,
    .btn-secondary:focus,
    .btn-mini:focus,
    input:focus{
      outline:none;
      box-shadow:0 0 0 3px rgba(244,63,94,.24), 0 0 0 1px rgba(255,255,255,.08) inset;
    }
    input, select, textarea{
      border:1px solid rgba(255,255,255,.11);
      background:rgba(255,255,255,.03);
      color:#fff;
      border-radius:14px;
      transition:border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
    }
    input::placeholder, textarea::placeholder{color:#71717a;}
    input:hover, select:hover, textarea:hover{border-color:rgba(255,255,255,.18);}
    .glow-line{
      height:1px;
      background:linear-gradient(90deg, transparent, rgba(244,63,94,.38), rgba(34,211,238,.24), transparent);
    }
    .mobile-menu{
      position:fixed;
      inset:0;
      z-index:60;
      background:rgba(0,0,0,.72);
      backdrop-filter:blur(16px);
    }
    .mobile-menu .sheet{
      position:absolute;
      right:0;
      top:0;
      width:min(88vw, 380px);
      height:100%;
      background:linear-gradient(180deg, rgba(14,14,18,.98), rgba(10,10,12,.98));
      border-left:1px solid var(--line);
      box-shadow:-24px 0 60px rgba(0,0,0,.48);
    }
    .mobile-menu a{
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:.95rem 0;
      border-bottom:1px solid rgba(255,255,255,.08);
      color:#f4f4f5;
    }
    .mobile-menu a span{
      color:#a1a1aa;
      font-size:.82rem;
    }
    @media (max-width: 1024px){
      .hero-title{font-size:clamp(2.2rem, 7vw, 4rem);}
    }
    @media (max-width: 768px){
      .site-container{width:min(100% - 1rem, 1200px);}
      .hero-wrap{border-radius:24px;}
      .card-art{min-height:150px;}
    }

/* roulang page: category2 */
:root{
      --bg:#09090b;
      --bg-soft:#101014;
      --panel:#111115;
      --panel-2:#16161c;
      --panel-3:#1b1b22;
      --line:rgba(255,255,255,.10);
      --line-strong:rgba(255,255,255,.18);
      --text:#f4f4f5;
      --muted:#a1a1aa;
      --muted-2:#71717a;
      --accent:#e11d48;
      --accent-2:#14b8a6;
      --gold:#f59e0b;
      --shadow:0 24px 70px rgba(0,0,0,.42);
      --radius:16px;
    }
    html{scroll-behavior:smooth;}
    body{
      margin:0;
      font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
      color:var(--text);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 140px),
        linear-gradient(180deg, #08080a 0%, #0a0a0e 42%, #09090b 100%);
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.18;
      background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
      background-size:28px 28px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 92%);
    }
    *{box-sizing:border-box}
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(225,29,72,.35);color:#fff}
    .container{
      width:min(100% - 2rem, 1200px);
      margin:0 auto;
    }
    @media (min-width:640px){
      .container{width:min(100% - 3rem, 1200px);}
    }
    .promo-bar{
      background:linear-gradient(90deg, rgba(225,29,72,.18), rgba(20,184,166,.12));
      border-bottom:1px solid rgba(255,255,255,.09);
    }
    .status-dot{
      width:8px;height:8px;border-radius:999px;
      background:linear-gradient(180deg,#34d399,#14b8a6);
      box-shadow:0 0 0 4px rgba(20,184,166,.14);
      display:inline-block;
    }
    .brand-mark{
      display:inline-flex;
      align-items:center;
      gap:.7rem;
      font-size:1rem;
      font-weight:800;
      letter-spacing:0;
      color:#fff;
    }
    .brand-mark::before{
      content:"";
      width:12px;height:12px;border-radius:3px;
      background:linear-gradient(135deg,var(--accent),var(--gold));
      box-shadow:0 0 0 4px rgba(225,29,72,.14);
      flex:none;
    }
    .nav-link{
      position:relative;
      color:#d4d4d8;
      transition:color .2s ease, opacity .2s ease;
      padding: .25rem 0;
    }
    .nav-link:hover{color:#fff}
    .nav-link.active{color:#fff}
    .nav-link.active::after{
      content:"";
      position:absolute;
      left:0;right:0;bottom:-.65rem;
      height:2px;
      border-radius:999px;
      background:linear-gradient(90deg,var(--accent),var(--accent-2));
    }
    .footer-link{
      color:#a1a1aa;
      transition:color .2s ease, transform .2s ease;
    }
    .footer-link:hover{color:#fff;transform:translateY(-1px)}
    .panel{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .panel-strong{
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      border:1px solid var(--line-strong);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .section-shell{
      border-top:1px solid var(--line);
      border-bottom:1px solid rgba(255,255,255,.06);
    }
    .section-shell:nth-of-type(odd){
      background:linear-gradient(180deg, rgba(255,255,255,.015), rgba(255,255,255,0));
    }
    .section-shell:nth-of-type(even){
      background:linear-gradient(180deg, rgba(225,29,72,.05), rgba(255,255,255,0));
    }
    .eyebrow{
      color:#fda4af;
      font-size:.72rem;
      letter-spacing:.18em;
      text-transform:uppercase;
    }
    .hero-title{
      font-size:clamp(2.35rem, 4vw, 4.85rem);
      line-height:1.02;
      font-weight:900;
      letter-spacing:0;
      text-wrap:balance;
    }
    .hero-copy{color:#d4d4d8;line-height:1.85}
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      min-height:34px;
      padding:.45rem .7rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.12);
      background:rgba(255,255,255,.03);
      color:#e4e4e7;
      font-size:.82rem;
      transition:transform .2s ease,border-color .2s ease,background .2s ease;
    }
    .tag:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.22);
      background:rgba(255,255,255,.05);
    }
    .btn-primary,
    .btn-secondary,
    .filter-btn,
    .sort-btn,
    .page-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.55rem;
      min-height:44px;
      border-radius:14px;
      padding:.72rem 1rem;
      font-size:.92rem;
      font-weight:700;
      transition:transform .2s ease,border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease;
      border:1px solid transparent;
      white-space:nowrap;
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--accent),#b91c1c);
      color:#fff;
      box-shadow:0 16px 34px rgba(225,29,72,.28);
    }
    .btn-primary:hover{transform:translateY(-1px);box-shadow:0 18px 38px rgba(225,29,72,.36)}
    .btn-secondary{
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.13);
      color:#f4f4f5;
    }
    .btn-secondary:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.24);
      background:rgba(255,255,255,.06);
    }
    .filter-btn,.sort-btn,.page-btn{
      background:rgba(255,255,255,.03);
      border-color:rgba(255,255,255,.10);
      color:#d4d4d8;
    }
    .filter-btn:hover,.sort-btn:hover,.page-btn:hover{
      transform:translateY(-1px);
      border-color:rgba(255,255,255,.24);
      background:rgba(255,255,255,.06);
      color:#fff;
    }
    .filter-btn.is-active,.sort-btn.is-active,.page-btn.is-active{
      background:linear-gradient(135deg, rgba(225,29,72,.18), rgba(20,184,166,.14));
      border-color:rgba(255,255,255,.24);
      color:#fff;
      box-shadow:0 12px 24px rgba(0,0,0,.28);
    }
    .info-box{
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:18px;
      box-shadow:var(--shadow);
    }
    .content-card{
      position:relative;
      overflow:hidden;
      background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
      border:1px solid var(--line);
      border-radius:18px;
      transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
      min-height:100%;
    }
    .content-card:hover{
      transform:translateY(-3px);
      border-color:rgba(255,255,255,.22);
      box-shadow:0 24px 48px rgba(0,0,0,.34);
    }
    .content-card.is-featured .card-thumb{min-height:188px}
    .card-thumb{
      position:relative;
      min-height:150px;
      overflow:hidden;
      background:
        linear-gradient(135deg, rgba(225,29,72,.38), rgba(20,184,166,.18)),
        linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0));
    }
    .card-thumb::before{
      content:"";
      position:absolute;
      inset:0;
      background-image:
        linear-gradient(135deg, rgba(255,255,255,.10) 0 12%, transparent 12% 24%, rgba(255,255,255,.06) 24% 36%, transparent 36% 100%),
        linear-gradient(90deg, rgba(255,255,255,.12) 0 1px, transparent 1px 100%);
      background-size:100% 100%, 24px 24px;
      opacity:.5;
      mix-blend-mode:screen;
    }
    .card-thumb::after{
      content:"";
      position:absolute;
      inset:auto -20% -40% auto;
      width:180px;
      height:180px;
      border-radius:24px;
      background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0) 70%);
      transform:rotate(18deg);
      opacity:.55;
    }
    .thumb-ribbon{
      position:absolute;
      top:1rem;
      left:1rem;
      display:inline-flex;
      align-items:center;
      gap:.45rem;
      padding:.42rem .62rem;
      border-radius:999px;
      background:rgba(9,9,11,.56);
      border:1px solid rgba(255,255,255,.12);
      color:#fff;
      font-size:.75rem;
      z-index:2;
      backdrop-filter:blur(6px);
    }
    .thumb-index{
      position:absolute;
      right:1rem;
      bottom:1rem;
      z-index:2;
      font-size:2.7rem;
      font-weight:900;
      line-height:1;
      color:rgba(255,255,255,.92);
      text-shadow:0 10px 30px rgba(0,0,0,.35);
    }
    .meta-chip{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      min-height:26px;
      padding:.28rem .55rem;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      color:#d4d4d8;
      font-size:.74rem;
    }
    .stat-box{
      border-radius:16px;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.03);
      padding:1rem;
    }
    .stat-num{
      font-size:1.55rem;
      font-weight:800;
      line-height:1;
      color:#fff;
    }
    .stat-label{
      margin-top:.35rem;
      color:#a1a1aa;
      font-size:.82rem;
    }
    .faq-item{
      border-bottom:1px solid rgba(255,255,255,.10);
      padding:1rem 0;
    }
    .faq-item:last-child{border-bottom:none}
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:1rem;
      color:#fff;
      font-weight:700;
      font-size:1rem;
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item summary::after{
      content:"+";
      color:#fda4af;
      font-size:1.15rem;
      line-height:1;
      flex:none;
    }
    .faq-item[open] summary::after{content:"−"}
    .faq-answer{
      margin-top:.7rem;
      color:#a1a1aa;
      line-height:1.8;
      font-size:.94rem;
    }
    .mobile-menu{
      transform:translateX(100%);
      transition:transform .26s ease;
    }
    .mobile-menu.is-open{
      transform:translateX(0);
    }
    .menu-backdrop{
      opacity:0;
      transition:opacity .22s ease;
    }
    .menu-backdrop.is-open{
      opacity:1;
    }
    .section-title{
      font-size:1.45rem;
      line-height:1.15;
      font-weight:800;
      color:#fff;
    }
    .section-copy{
      color:#a1a1aa;
      line-height:1.8;
    }
    .focus-ring:focus-visible{
      outline:2px solid rgba(20,184,166,.9);
      outline-offset:2px;
    }
    .pagination-wrap{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:1rem;
      flex-wrap:wrap;
    }
    @media (max-width: 640px){
      .hero-title{font-size:2.15rem}
      .section-title{font-size:1.24rem}
    }