/* roulang page: index */
:root {
      --bg: #111111;
      --panel: #171717;
      --panel-2: #1d1d1f;
      --line: #2b2b2f;
      --text: #f5efe7;
      --muted: #b4aba0;
      --accent: #e24a6b;
      --accent-2: #f0b44b;
      --good: #63d19a;
      --cool: #49c2b8;
      --radius: 8px;
      --shadow: 0 10px 30px rgba(0,0,0,.22);
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background:
        linear-gradient(180deg, #121212 0%, #111111 28%, #101010 100%);
      color: var(--text);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.6;
      letter-spacing: 0;
      text-rendering: optimizeLegibility;
    }

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

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

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

    ::selection {
      background: rgba(226, 74, 107, .32);
      color: #fff;
    }

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

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

    .nav-link {
      color: var(--muted);
      transition: color .18s ease, border-color .18s ease, transform .18s ease;
      border-bottom: 1px solid transparent;
    }

    .nav-link:hover,
    .nav-link:focus-visible,
    .nav-link.active {
      color: var(--text);
      border-bottom-color: var(--accent);
    }

    .brand-mark {
      width: 28px;
      height: 28px;
      border-radius: 7px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      box-shadow: var(--shadow);
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 28px;
      padding: 0 10px;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.02);
      color: var(--muted);
      font-size: 12px;
      line-height: 1;
      white-space: nowrap;
    }

    .chip-strong {
      border-color: rgba(226, 74, 107, .35);
      color: #ffd4de;
      background: rgba(226, 74, 107, .10);
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .panel-soft {
      background: var(--panel-2);
      border: 1px solid var(--line);
      border-radius: var(--radius);
    }

    .section-title {
      font-size: 24px;
      line-height: 1.15;
      font-weight: 700;
      letter-spacing: 0;
    }

    .section-sub {
      color: var(--muted);
      font-size: 15px;
      margin-top: 10px;
      max-width: 72ch;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 44px;
      padding: 0 16px;
      border-radius: 8px;
      border: 1px solid transparent;
      font-weight: 600;
      transition: transform .18s ease, border-color .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
      white-space: nowrap;
    }

    .btn:hover,
    .btn:focus-visible {
      transform: translateY(-1px);
    }

    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #cf355b);
      color: #fff;
      box-shadow: 0 8px 18px rgba(226, 74, 107, .18);
    }

    .btn-primary:hover,
    .btn-primary:focus-visible {
      box-shadow: 0 10px 20px rgba(226, 74, 107, .26);
    }

    .btn-ghost {
      background: transparent;
      color: var(--text);
      border-color: var(--line);
    }

    .btn-ghost:hover,
    .btn-ghost:focus-visible {
      border-color: rgba(226, 74, 107, .55);
      background: rgba(226, 74, 107, .08);
    }

    .stat-card {
      padding: 16px;
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.02);
    }

    .stat-number {
      font-size: 24px;
      line-height: 1.1;
      font-weight: 800;
      letter-spacing: 0;
    }

    .muted {
      color: var(--muted);
    }

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

    .bar {
      height: 8px;
      border-radius: 999px;
      background: #232327;
      overflow: hidden;
    }

    .bar > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }

    .card {
      border-radius: var(--radius);
      border: 1px solid var(--line);
      background: rgba(255, 255, 255, 0.02);
      transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
    }

    .card:hover {
      transform: translateY(-2px);
      border-color: rgba(226, 74, 107, .38);
      background: rgba(255, 255, 255, 0.03);
    }

    .tag {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      min-height: 22px;
      padding: 0 8px;
      border-radius: 999px;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: 12px;
    }

    .tag-good {
      color: #b9f0d1;
      border-color: rgba(99, 209, 154, .32);
      background: rgba(99, 209, 154, .08);
    }

    .tag-warm {
      color: #ffe0a5;
      border-color: rgba(240, 180, 75, .32);
      background: rgba(240, 180, 75, .08);
    }

    .field {
      width: 100%;
      min-height: 44px;
      border-radius: 8px;
      border: 1px solid var(--line);
      background: #141414;
      color: var(--text);
      padding: 0 14px;
      outline: none;
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }

    .field:focus {
      border-color: rgba(226, 74, 107, .58);
      box-shadow: 0 0 0 3px rgba(226, 74, 107, .12);
    }

    .field::placeholder {
      color: #857d73;
    }

    textarea.field {
      min-height: 112px;
      padding: 12px 14px;
      resize: vertical;
    }

    .breadcrumb {
      color: var(--muted);
      font-size: 12px;
    }

    .faq summary {
      list-style: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid var(--line);
      transition: border-color .18s ease, background-color .18s ease;
    }

    .faq summary:hover {
      border-color: rgba(226, 74, 107, .38);
      background: rgba(255, 255, 255, 0.03);
    }

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

    .faq[open] summary {
      border-color: rgba(226, 74, 107, .42);
    }

    .faq-body {
      padding: 0 20px 18px;
      color: var(--muted);
      border: 1px solid var(--line);
      border-top: 0;
      border-radius: 0 0 var(--radius) var(--radius);
      background: rgba(255, 255, 255, 0.02);
    }

    .faq-icon {
      flex: 0 0 auto;
      transition: transform .18s ease;
      color: var(--muted);
    }

    .faq[open] .faq-icon {
      transform: rotate(180deg);
      color: var(--text);
    }

    .compare-row {
      display: grid;
      grid-template-columns: 1.2fr 1fr 1fr;
      gap: 0;
      border-top: 1px solid var(--line);
    }

    .compare-row:first-child {
      border-top: 0;
    }

    .compare-cell {
      padding: 16px;
      border-right: 1px solid var(--line);
    }

    .compare-cell:last-child {
      border-right: 0;
    }

    .compare-head {
      background: rgba(255, 255, 255, 0.03);
      color: #fff;
      font-weight: 600;
    }

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

    .footer-link:hover,
    .footer-link:focus-visible {
      color: var(--text);
    }

    @media (max-width: 1024px) {
      .compare-row {
        grid-template-columns: 1fr 1fr 1fr;
      }
    }

    @media (max-width: 768px) {
      .section-title {
        font-size: 22px;
      }

      .compare-row {
        grid-template-columns: 1fr;
      }

      .compare-cell {
        border-right: 0;
        border-bottom: 1px solid var(--line);
      }

      .compare-cell:last-child {
        border-bottom: 0;
      }
    }

    @media (max-width: 520px) {
      .container {
        width: min(100% - 24px, 1200px);
      }

      .section-title {
        font-size: 20px;
      }
    }

/* roulang page: category1 */
:root{
      --bg:#101012;
      --bg2:#17181b;
      --surface:#f7f3ec;
      --card:#ffffff;
      --line:#e7dfd6;
      --text:#171717;
      --muted:#6a645e;
      --accent:#c31d50;
      --accent2:#ef8a2d;
      --success:#1b9a74;
      --warn:#c17a14;
      --shadow:0 18px 40px rgba(15,15,15,.08);
      --radius:8px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.6;
      -webkit-font-smoothing:antialiased;
      text-rendering:optimizeLegibility;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    .container{width:min(1180px,calc(100% - 32px));margin:0 auto}
    .site-header{
      position:sticky;
      top:0;
      z-index:50;
      background:rgba(16,16,18,.90);
      backdrop-filter:blur(14px);
      border-bottom:1px solid rgba(255,255,255,.08);
    }
    .brand-mark{
      width:12px;height:12px;border-radius:4px;
      background:linear-gradient(135deg,var(--accent),#ff6f91 55%,var(--accent2));
      box-shadow:0 0 0 4px rgba(195,29,80,.16);
      flex:none;
    }
    .nav-link{
      color:rgba(255,255,255,.76);
      transition:color .2s ease,border-color .2s ease,opacity .2s ease;
      border-bottom:2px solid transparent;
    }
    .nav-link:hover,.nav-link:focus{color:#fff}
    .nav-link.active{color:#fff;border-color:var(--accent2)}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:.45rem;
      border-radius:999px;
      padding:.74rem 1rem;
      border:1px solid transparent;
      transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease,opacity .2s ease;
      font-weight:600;
      white-space:nowrap;
    }
    .btn:hover{transform:translateY(-1px)}
    .btn:focus-visible,
    .nav-link:focus-visible,
    .footer-link:focus-visible,
    .input:focus-visible,
    .faq-item summary:focus-visible{
      outline:2px solid rgba(195,29,80,.32);
      outline-offset:2px;
    }
    .btn-ghost{
      background:rgba(255,255,255,.04);
      color:#fff;
      border-color:rgba(255,255,255,.12);
    }
    .btn-primary{
      background:linear-gradient(135deg,var(--accent),#df3461);
      color:#fff;
      box-shadow:0 12px 24px rgba(195,29,80,.24);
    }
    .btn-outline{
      background:transparent;
      color:var(--text);
      border-color:var(--line);
    }
    .btn-outline:hover{border-color:#c8bbad;background:#fff}
    .section{padding:28px 0}
    .panel{
      background:var(--surface);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
    }
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 10px 28px rgba(16,16,18,.06);
      transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
    }
    .card:hover{
      transform:translateY(-2px);
      border-color:#d4c7ba;
      box-shadow:0 14px 30px rgba(16,16,18,.10);
    }
    .badge{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      padding:.28rem .62rem;
      font-size:12px;
      font-weight:700;
      letter-spacing:.01em;
    }
    .badge-accent{background:rgba(195,29,80,.10);color:var(--accent)}
    .badge-success{background:rgba(27,154,116,.10);color:var(--success)}
    .badge-warn{background:rgba(239,138,45,.14);color:var(--accent2)}
    .badge-muted{background:#f0e8de;color:var(--muted)}
    .muted{color:var(--muted)}
    .breadcrumb a{color:var(--muted);transition:color .2s ease}
    .breadcrumb a:hover{color:var(--accent)}
    .footer-link{color:rgba(255,255,255,.72);transition:color .2s ease}
    .footer-link:hover{color:#fff}
    .stat-number{
      font-size:clamp(1.45rem,2vw,2rem);
      font-weight:800;
      line-height:1.1;
    }
    .kpi-bar{
      height:8px;
      border-radius:999px;
      background:#ece6dd;
      overflow:hidden;
    }
    .kpi-bar > span{
      display:block;
      height:100%;
      border-radius:inherit;
      background:linear-gradient(90deg,var(--accent),var(--accent2));
    }
    .input{
      width:100%;
      border:1px solid var(--line);
      border-radius:10px;
      background:#fff;
      padding:.82rem .95rem;
      outline:none;
      transition:border-color .2s ease,box-shadow .2s ease;
    }
    .input:focus{
      border-color:var(--accent);
      box-shadow:0 0 0 4px rgba(195,29,80,.08);
    }
    label.form-label{
      display:block;
      font-size:13px;
      font-weight:700;
      margin-bottom:.45rem;
      color:var(--text);
    }
    .faq-item{
      border:1px solid var(--line);
      border-radius:var(--radius);
      background:#fff;
      overflow:hidden;
    }
    .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:var(--text);
    }
    .faq-item summary::-webkit-details-marker{display:none}
    .faq-item[open] summary{border-bottom:1px solid var(--line)}
    .faq-item .faq-body{
      padding:0 1.1rem 1rem;
      color:var(--muted);
    }
    .faq-item .chev{transition:transform .2s ease}
    .faq-item[open] .chev{transform:rotate(180deg)}
    .soft-divider{height:1px;background:var(--line)}
    @media (max-width:768px){
      .site-header .container{
        height:auto;
        padding-top:.85rem;
        padding-bottom:.85rem;
      }
    }