/* roulang page: index */
:root{
            --color-primary:#9a6cff;
            --color-primary-dark:#7d4fe0;
            --color-accent:#55d6be;
            --color-bg:#fff8f2;
            --color-card:#ffffff;
            --color-text:#2f2b3a;
            --color-muted:#6f6881;
            --color-border:#ece3f6;
            --radius-xl:28px;
            --radius-lg:22px;
            --radius-md:16px;
            --shadow-soft:0 18px 50px rgba(122,94,170,.14);
            --shadow-float:0 10px 30px rgba(79,58,120,.12);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
            color:var(--color-text);
            background:
                radial-gradient(circle at top left, rgba(154,108,255,.12), transparent 35%),
                radial-gradient(circle at 85% 10%, rgba(85,214,190,.14), transparent 28%),
                linear-gradient(180deg, #fffaf7 0%, #fffdfb 45%, #fbf7ff 100%);
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        .container{width:min(1240px, calc(100% - 32px)); margin:0 auto}
        .glass-bar{
            backdrop-filter: blur(16px);
            background: rgba(255,255,255,.78);
            border:1px solid rgba(236,227,246,.9);
            box-shadow: var(--shadow-float);
        }
        .section{padding: 80px 0}
        .section-tight{padding: 56px 0}
        .card{
            background: rgba(255,255,255,.9);
            border:1px solid var(--color-border);
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-soft);
        }
        .card-soft{
            background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,251,255,.9));
            border:1px solid var(--color-border);
            border-radius: var(--radius-xl);
            box-shadow: 0 14px 38px rgba(98,70,149,.08);
        }
        .pill{
            display:inline-flex;align-items:center;gap:.4rem;
            padding:.45rem .8rem;border-radius:999px;
            background:#f6f0ff;color:#6c45d2;border:1px solid #eadfff;
            font-size:.84rem;font-weight:600;
        }
        .btn{
            display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
            padding:.95rem 1.35rem;border-radius:999px;font-weight:700;
            transition:all .22s ease;border:1px solid transparent;
        }
        .btn-primary{background:linear-gradient(135deg,var(--color-primary),#b084ff);color:#fff;box-shadow:0 12px 24px rgba(154,108,255,.28)}
        .btn-primary:hover{background:linear-gradient(135deg,var(--color-primary-dark),#9b69ff);transform:translateY(-1px);box-shadow:0 16px 28px rgba(154,108,255,.32)}
        .btn-secondary{background:#fff;color:var(--color-primary-dark);border-color:#e7dcfa}
        .btn-secondary:hover{transform:translateY(-1px);border-color:#d5c3f7;box-shadow:0 12px 24px rgba(122,94,170,.12)}
        .btn-ghost{background:transparent;color:var(--color-text);border-color:#eadff7}
        .btn-ghost:hover{background:#fff;transform:translateY(-1px)}
        .nav-link{padding:.8rem 1rem;border-radius:999px;color:#514963;font-weight:600;transition:.2s ease}
        .nav-link:hover,.nav-link.active{background:#f5efff;color:#5b33d0}
        .input, .textarea, .select{
            width:100%;
            border:1px solid #eadff7;
            background:#fff;
            border-radius:18px;
            padding: .95rem 1rem;
            color:var(--color-text);
            outline:none;
            transition: all .2s ease;
        }
        .input:focus, .textarea:focus, .select:focus{
            border-color: var(--color-primary);
            box-shadow: 0 0 0 4px rgba(154,108,255,.12);
        }
        .tag{
            display:inline-flex;align-items:center;gap:.35rem;
            padding:.38rem .7rem;border-radius:999px;font-size:.78rem;font-weight:700;
            background:#f7fbf9;color:#1f8e78;border:1px solid #d9f4ee;
        }
        .muted{color:var(--color-muted)}
        .divider{height:1px;background:linear-gradient(90deg,transparent,#eadff7,transparent)}
        .feature-dot{
            width:10px;height:10px;border-radius:999px;background:var(--color-accent);box-shadow:0 0 0 6px rgba(85,214,190,.12)
        }
        .timeline-line{position:absolute;left:20px;top:20px;bottom:20px;width:2px;background:linear-gradient(180deg,#ecdfff,rgba(154,108,255,.18))}
        .step-no{font-size:2.5rem;font-weight:800;line-height:1;color:rgba(154,108,255,.18)}
        .faq-item[open] .faq-summary{color:#5b33d0}
        .faq-item[open] .faq-icon{transform:rotate(45deg)}
        .faq-summary{list-style:none;cursor:pointer}
        .faq-summary::-webkit-details-marker{display:none}
        .floating-dot{
            position:absolute;border-radius:999px;filter:blur(1px);opacity:.75;pointer-events:none;
        }
        @media (max-width: 768px){
            .section{padding: 60px 0}
            .section-tight{padding: 44px 0}
        }

/* roulang page: category1 */
:root{
      --color-primary:#a96cf0;
      --color-primary-dark:#8748d6;
      --color-accent:#7ccfc1;
      --color-warm:#fff8ff;
      --color-bg:#faf6ff;
      --color-card:#ffffff;
      --color-text:#262334;
      --color-muted:#6d6680;
      --color-border:#eadff5;
      --radius-xl:28px;
      --radius-lg:22px;
      --shadow-soft:0 18px 50px rgba(138, 107, 190, 0.12);
      --shadow-soft2:0 10px 28px rgba(125, 99, 176, 0.10);
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--color-text);
      font-family:PingFang SC, Microsoft YaHei, Noto Sans SC, system-ui, sans-serif;
      background:
        radial-gradient(circle at top left, rgba(169,108,240,.10), transparent 30%),
        radial-gradient(circle at right 20%, rgba(124,207,193,.12), transparent 24%),
        linear-gradient(180deg,#fffdfd 0%, #fbf7ff 48%, #f7f2ff 100%);
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(169,108,240,.18)}
    .container-shell{width:min(1220px, calc(100% - 32px));margin:0 auto}
    .section-gap{padding:84px 0}
    .section-tight{padding:68px 0}
    .card-soft{
      background:rgba(255,255,255,.88);
      border:1px solid rgba(234,223,245,.9);
      border-radius:var(--radius-xl);
      box-shadow:var(--shadow-soft);
      backdrop-filter:blur(10px);
    }
    .card-mini{
      background:#fff;
      border:1px solid var(--color-border);
      border-radius:22px;
      box-shadow:var(--shadow-soft2);
    }
    .dock-nav{
      position:sticky;
      top:14px;
      z-index:50;
    }
    .dock-inner{
      background:rgba(255,255,255,.82);
      border:1px solid rgba(234,223,245,.9);
      box-shadow:0 16px 36px rgba(126, 96, 176, .10);
      backdrop-filter:blur(14px);
      border-radius:999px;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:40px;
      padding:0 16px;
      border-radius:999px;
      color:var(--color-muted);
      font-size:14px;
      font-weight:600;
      transition:all .22s ease;
    }
    .nav-link:hover,.nav-link:focus-visible{background:#f5ecff;color:var(--color-primary-dark);transform:translateY(-1px);outline:none}
    .nav-link.active{background:linear-gradient(135deg,var(--color-primary),#c79cff);color:#fff;box-shadow:0 10px 22px rgba(169,108,240,.25)}
    .logo-mark{
      width:42px;height:42px;border-radius:50%;
      display:inline-flex;align-items:center;justify-content:center;
      background:linear-gradient(135deg,var(--color-primary),#c89cff);
      color:#fff;font-weight:800;letter-spacing:.08em;
      box-shadow:0 12px 26px rgba(169,108,240,.28)
    }
    .hero-badge,.pill{
      display:inline-flex;align-items:center;gap:8px;
      border:1px solid rgba(169,108,240,.18);
      background:rgba(169,108,240,.08);
      color:var(--color-primary-dark);
      border-radius:999px;
      padding:8px 14px;
      font-size:13px;
      font-weight:700;
    }
    .pill-muted{background:#fff;border-color:var(--color-border);color:var(--color-muted)}
    .title-xl{font-size:clamp(34px,6vw,64px);line-height:1.1;letter-spacing:-.03em}
    .title-lg{font-size:clamp(24px,3.5vw,38px);line-height:1.2;letter-spacing:-.02em}
    .muted{color:var(--color-muted)}
    .btn-primary,.btn-secondary,.btn-ghost{
      display:inline-flex;align-items:center;justify-content:center;gap:10px;
      border-radius:16px;padding:14px 20px;font-weight:700;transition:all .25s ease;
      border:1px solid transparent
    }
    .btn-primary{background:linear-gradient(135deg,var(--color-primary),#c085ff);color:#fff;box-shadow:0 16px 28px rgba(169,108,240,.22)}
    .btn-primary:hover,.btn-primary:focus-visible{transform:translateY(-2px);background:linear-gradient(135deg,var(--color-primary-dark),#b271ff);outline:none}
    .btn-secondary{background:#fff;color:var(--color-primary-dark);border-color:var(--color-border)}
    .btn-secondary:hover,.btn-secondary:focus-visible{transform:translateY(-2px);border-color:#d6c1ef;box-shadow:0 14px 24px rgba(140, 111, 190, .10);outline:none}
    .btn-ghost{background:transparent;color:var(--color-text);border-color:rgba(169,108,240,.16)}
    .btn-ghost:hover,.btn-ghost:focus-visible{background:#faf4ff;transform:translateY(-2px);outline:none}
    .stat-item{padding:16px 18px;border-radius:20px;background:rgba(255,255,255,.75);border:1px solid rgba(234,223,245,.88)}
    .stat-num{font-size:24px;font-weight:800;color:var(--color-primary-dark);line-height:1}
    .grid-card{
      border-radius:24px;
      border:1px solid var(--color-border);
      background:linear-gradient(180deg,#fff, #fefcff);
      box-shadow:var(--shadow-soft2);
      transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .grid-card:hover{transform:translateY(-3px);box-shadow:0 20px 38px rgba(126,96,176,.14);border-color:#dccaf0}
    .step-num{
      width:52px;height:52px;border-radius:18px;
      background:linear-gradient(135deg,#f2e4ff,#fff);
      border:1px solid #e0cff7; color:var(--color-primary-dark);
      display:flex;align-items:center;justify-content:center;
      font-size:18px;font-weight:900;
    }
    .section-kicker{
      color:var(--color-primary-dark);
      font-weight:800;font-size:13px;letter-spacing:.16em;text-transform:uppercase;
    }
    .chip{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 12px;border-radius:999px;
      background:#f7f1ff;color:var(--color-primary-dark);font-size:12px;font-weight:700;
      border:1px solid #eadcf9;
    }
    .chip-soft{background:#eefbf7;color:#2f7e72;border-color:#d8f1ea}
    .chip-warm{background:#fff6eb;color:#ab6b27;border-color:#f5e3c7}
    .filter-chip{
      display:inline-flex;align-items:center;justify-content:center;
      padding:10px 16px;border-radius:999px;
      background:#fff;border:1px solid var(--color-border);
      color:var(--color-muted);font-weight:700;font-size:13px;
      transition:all .22s ease;
    }
    .filter-chip.active,.filter-chip:hover{background:#f3e8ff;color:var(--color-primary-dark);border-color:#dbc7f5;transform:translateY(-1px)}
    .list-row{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:start}
    .dot-list li{position:relative;padding-left:18px}
    .dot-list li::before{content:"";position:absolute;left:0;top:.78em;width:7px;height:7px;border-radius:50%;background:var(--color-primary)}
    .input-field{
      width:100%;
      min-height:48px;
      border-radius:16px;
      border:1px solid var(--color-border);
      background:#fff;
      padding:12px 14px;
      color:var(--color-text);
      transition:all .22s ease;
    }
    .input-field:focus{outline:none;border-color:#caa9f3;box-shadow:0 0 0 4px rgba(169,108,240,.12)}
    .textarea-field{min-height:140px;resize:vertical}
    details{border-radius:18px;border:1px solid var(--color-border);background:#fff;box-shadow:var(--shadow-soft2)}
    summary{list-style:none;cursor:pointer;padding:20px 22px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px}
    summary::-webkit-details-marker{display:none}
    details[open] summary{border-bottom:1px solid var(--color-border)}
    .faq-body{padding:0 22px 20px;color:var(--color-muted);line-height:1.8}
    .footer-link{color:var(--color-muted);transition:color .2s ease}
    .footer-link:hover{color:var(--color-primary-dark)}
    .soft-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(169,108,240,.28),transparent)}
    .orb{
      position:absolute;border-radius:999px;filter:blur(2px);pointer-events:none;opacity:.92
    }
    .orb.one{width:160px;height:160px;background:rgba(169,108,240,.12);top:-30px;right:4%}
    .orb.two{width:120px;height:120px;background:rgba(124,207,193,.14);bottom:-20px;left:8%}
    .count-box{background:linear-gradient(135deg,#fff, #f7f0ff);border:1px solid var(--color-border);border-radius:22px;padding:18px 20px}
    .count-num{font-size:28px;font-weight:900;color:var(--color-primary-dark);line-height:1}
    .sidebar-stick{position:sticky;top:110px}
    @media (max-width: 1024px){
      .section-gap{padding:68px 0}
      .section-tight{padding:56px 0}
      .dock-inner{border-radius:28px}
      .sidebar-stick{position:static}
    }
    @media (max-width: 768px){
      .section-gap{padding:56px 0}
      .section-tight{padding:44px 0}
      .title-xl{font-size:clamp(32px,10vw,44px)}
      .nav-link{padding:0 14px;min-height:38px}
    }