/* roulang page: index */
:root{
      --bg:#f7f1e8;
      --panel:#fffaf3;
      --panel-2:#fdf7ef;
      --text:#1f1914;
      --muted:#76685b;
      --line:#e6d8c8;
      --brand:#8b5a2b;
      --brand-2:#c08a4d;
      --brand-3:#3a2d23;
      --shadow:0 18px 50px rgba(66,42,18,.08);
      --radius:20px;
      --radius-sm:14px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
      background:var(--bg);
      color:var(--text);
      line-height:1.7;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        radial-gradient(circle at 15% 10%, rgba(192,138,77,.12), transparent 28%),
        radial-gradient(circle at 85% 0%, rgba(139,90,43,.08), transparent 25%),
        linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,0));
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,textarea{font:inherit}
    ::selection{background:rgba(139,90,43,.18)}
    .card-soft{
      background:rgba(255,250,243,.88);
      border:1px solid rgba(230,216,200,.92);
      box-shadow:var(--shadow);
      backdrop-filter:saturate(120%) blur(6px);
    }
    .section-gap{margin-top:4.75rem}
    .kicker{
      letter-spacing:.18em;
      text-transform:uppercase;
      font-size:.72rem;
      color:var(--brand);
      font-weight:800;
    }
    .section-title{
      font-size:clamp(1.7rem, 1.15rem + 1.5vw, 2.8rem);
      line-height:1.06;
      letter-spacing:-.04em;
      font-weight:800;
    }
    .section-desc{
      color:var(--muted);
      font-size:.98rem;
      max-width:58rem;
    }
    .nav-link{
      position:relative;
      transition:color .2s ease, transform .2s ease;
    }
    .nav-link::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:-.45rem;
      height:1.5px;
      background:linear-gradient(90deg,var(--brand),var(--brand-2));
      transform:scaleX(0);
      transform-origin:left;
      transition:transform .2s ease;
    }
    .nav-link:hover::after,
    .nav-link[aria-current="page"]::after{transform:scaleX(1)}
    .nav-link:hover{color:var(--brand)}
    .btn-primary,
    .btn-secondary{
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .btn-primary:hover,
    .btn-secondary:hover{transform:translateY(-1px)}
    .btn-primary:active,
    .btn-secondary:active{transform:translateY(0)}
    .btn-primary{
      background:linear-gradient(135deg, #8b5a2b, #b07c42);
      color:#fff;
      box-shadow:0 12px 30px rgba(139,90,43,.22);
    }
    .btn-primary:hover{box-shadow:0 16px 36px rgba(139,90,43,.28)}
    .btn-secondary{
      border:1px solid var(--line);
      background:rgba(255,255,255,.6);
      color:var(--text);
    }
    .btn-secondary:hover{
      border-color:rgba(139,90,43,.4);
      background:rgba(255,255,255,.88);
    }
    .badge-soft{
      border:1px solid rgba(139,90,43,.14);
      background:rgba(139,90,43,.08);
      color:var(--brand);
    }
    .panel-line{
      border:1px solid rgba(230,216,200,.92);
      background:rgba(255,255,255,.66);
    }
    .metric-ring{
      width:6.6rem;
      height:6.6rem;
      border-radius:9999px;
      display:grid;
      place-items:center;
      position:relative;
      background:conic-gradient(#8b5a2b calc(var(--value)*1%), rgba(231,219,205,1) 0);
    }
    .metric-ring::before{
      content:"";
      position:absolute;
      inset:.58rem;
      background:var(--panel);
      border-radius:inherit;
      border:1px solid rgba(230,216,200,.8);
    }
    .metric-ring > span{
      position:relative;
      z-index:1;
    }
    .faq-panel{
      max-height:0;
      overflow:hidden;
      transition:max-height .3s ease, opacity .3s ease;
      opacity:0;
    }
    .faq-panel.open{
      opacity:1;
    }
    .input-soft{
      width:100%;
      border:1px solid var(--line);
      background:rgba(255,255,255,.82);
      border-radius:16px;
      padding:.95rem 1rem;
      outline:none;
      transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background-color .2s ease;
    }
    .input-soft:focus{
      border-color:rgba(139,90,43,.45);
      box-shadow:0 0 0 4px rgba(139,90,43,.08);
      background:#fff;
    }
    .lift{
      transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
    }
    .lift:hover{
      transform:translateY(-2px);
      border-color:rgba(139,90,43,.24);
      box-shadow:0 12px 30px rgba(66,42,18,.06);
    }
    .soft-divider{
      height:1px;
      background:linear-gradient(90deg, rgba(230,216,200,0), rgba(230,216,200,1), rgba(230,216,200,0));
    }

/* roulang page: category1 */
:root {
      --bg: #f7f1e8;
      --paper: #fcfaf7;
      --ink: #2c241e;
      --muted: #6f6257;
      --line: #e6d8c8;
      --accent: #8b5a2b;
      --accent-2: #b9824f;
      --shadow: 0 14px 34px rgba(44, 36, 30, 0.07);
      --shadow-2: 0 18px 44px rgba(44, 36, 30, 0.1);
      --radius: 18px;
      --radius-sm: 14px;
      --container: 1180px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--ink);
      background:
        radial-gradient(circle at top, rgba(139, 90, 43, 0.06), transparent 26%),
        linear-gradient(180deg, #fcfaf7 0%, #f8f2eb 100%);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height: 1.7;
      text-rendering: optimizeLegibility;
      -webkit-font-smoothing: antialiased;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, select, textarea { font: inherit; }
    ::selection { background: rgba(139, 90, 43, 0.16); }
    .container { width: min(calc(100% - 2rem), var(--container)); margin: 0 auto; }
    .soft-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(230, 216, 200, 0.95), transparent); }
    .text-balance { text-wrap: balance; }
    .page-shell { min-height: 100vh; }
    .topbar {
      backdrop-filter: blur(10px);
      background: rgba(252, 250, 247, 0.88);
      border-bottom: 1px solid rgba(230, 216, 200, 0.8);
      position: sticky;
      top: 0;
      z-index: 50;
    }
    .nav-link {
      position: relative;
      padding: 0.45rem 0;
      transition: color 180ms ease, transform 180ms ease;
    }
    .nav-link:hover { color: var(--accent); transform: translateY(-1px); }
    .nav-link[aria-current="page"]::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -0.1rem;
      width: 100%;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .brand-mark {
      width: 2.75rem;
      height: 2.75rem;
      border-radius: 1rem;
      display: grid;
      place-items: center;
      border: 1px solid rgba(228, 214, 198, 0.95);
      background: rgba(255,255,255,0.78);
      color: var(--accent);
      font-weight: 800;
      box-shadow: 0 8px 24px rgba(44, 36, 30, 0.05);
    }
    .hero-panel, .info-card, .feature-card, .compare-card, .faq-item, .form-card, .side-card {
      border: 1px solid rgba(230, 216, 200, 0.92);
      background: rgba(255, 255, 255, 0.74);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
    }
    .hero-panel { overflow: hidden; }
    .glass-line { border-bottom: 1px solid rgba(230, 216, 200, 0.8); }
    .eyebrow {
      letter-spacing: 0.18em;
      color: var(--accent);
      font-weight: 700;
      text-transform: uppercase;
      font-size: 0.74rem;
    }
    .hero-title {
      font-size: clamp(2rem, 4vw, 4rem);
      line-height: 1.05;
      letter-spacing: -0.03em;
      font-weight: 900;
    }
    .subtle-kicker {
      color: var(--muted);
      font-size: 0.95rem;
    }
    .btn-primary, .btn-secondary, .chip, .sort-btn {
      transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease, color 180ms ease;
    }
    .btn-primary:hover, .btn-secondary:hover, .chip:hover, .sort-btn:hover { transform: translateY(-1px); }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), #6f4420);
      color: #fff;
      box-shadow: 0 12px 24px rgba(139, 90, 43, 0.2);
    }
    .btn-primary:hover { box-shadow: 0 16px 28px rgba(139, 90, 43, 0.26); }
    .btn-secondary, .sort-btn {
      background: rgba(255,255,255,0.84);
      border: 1px solid rgba(230, 216, 200, 0.95);
      color: var(--ink);
    }
    .btn-secondary:hover, .sort-btn:hover { border-color: rgba(139, 90, 43, 0.3); color: var(--accent); }
    .chip {
      border: 1px solid rgba(230, 216, 200, 0.95);
      background: rgba(255,255,255,0.78);
      color: var(--muted);
    }
    .chip.active {
      border-color: rgba(139, 90, 43, 0.34);
      color: var(--accent);
      background: rgba(139, 90, 43, 0.08);
    }
    .metric-number { letter-spacing: -0.04em; }
    .bar-track {
      height: 0.55rem;
      border-radius: 999px;
      background: #efe5da;
      overflow: hidden;
    }
    .bar-fill {
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--accent), var(--accent-2));
    }
    .feature-card, .compare-card, .faq-item, .form-card, .side-card { transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
    .feature-card:hover, .compare-card:hover, .form-card:hover, .side-card:hover {
      transform: translateY(-2px);
      border-color: rgba(139, 90, 43, 0.22);
      box-shadow: var(--shadow-2);
    }
    .mini-pill {
      display: inline-flex;
      align-items: center;
      gap: 0.35rem;
      border-radius: 999px;
      padding: 0.3rem 0.7rem;
      font-size: 0.8rem;
      border: 1px solid rgba(230, 216, 200, 0.95);
      color: var(--muted);
      background: rgba(255,255,255,0.7);
    }
    .section-title { font-size: clamp(1.35rem, 2vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; font-weight: 800; }
    .section-copy { color: var(--muted); max-width: 62ch; }
    .footer-link { color: var(--ink); transition: color 180ms ease; }
    .footer-link:hover { color: var(--accent); }
    .faq-toggle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1rem 1.15rem;
      background: transparent;
      border: 0;
      color: var(--ink);
      text-align: left;
      cursor: pointer;
    }
    .faq-panel {
      max-height: 0;
      overflow: hidden;
      transition: max-height 260ms ease;
    }
    .faq-item[aria-expanded="true"] .faq-panel { max-height: 240px; }
    .faq-item[aria-expanded="true"] .chev { transform: rotate(180deg); }
    .chev { transition: transform 200ms ease; color: var(--muted); }
    .input {
      width: 100%;
      border-radius: 0.95rem;
      border: 1px solid rgba(230, 216, 200, 0.96);
      background: rgba(255,255,255,0.9);
      padding: 0.9rem 1rem;
      color: var(--ink);
      outline: none;
      transition: border-color 180ms ease, box-shadow 180ms ease;
    }
    .input:focus {
      border-color: rgba(139, 90, 43, 0.5);
      box-shadow: 0 0 0 4px rgba(139, 90, 43, 0.09);
    }
    .icon-dot {
      width: 0.55rem;
      height: 0.55rem;
      border-radius: 999px;
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      flex: 0 0 auto;
    }
    .thumb-block {
      border-radius: 1rem;
      border: 1px solid rgba(230, 216, 200, 0.95);
      background:
        linear-gradient(145deg, rgba(139, 90, 43, 0.1), rgba(255,255,255,0.7)),
        linear-gradient(180deg, #fff, #f6eee4);
    }
    .status-tag {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      border-radius: 999px;
      padding: 0.34rem 0.8rem;
      font-size: 0.8rem;
      background: rgba(139, 90, 43, 0.08);
      color: var(--accent);
      border: 1px solid rgba(139, 90, 43, 0.16);
    }
    .mobile-menu { display: none; }
    @media (max-width: 768px) {
      .mobile-menu { display: inline-flex; }
      .desktop-nav { display: none; }
      .hero-title { font-size: clamp(1.9rem, 8vw, 2.7rem); }
    }