/* roulang page: index */
:root{
      --bg:#FAFBF8;
      --panel:#FFFFFF;
      --panel-soft:#F7F5FA;
      --line:#E7E2EC;
      --text:#24202A;
      --muted:#57515F;
      --weak:#8A8492;
      --brand:#7A2E62;
      --brand-2:#38BFA7;
      --warm:#F2B36D;
      --violet:#EEE7F3;
      --shadow:0 12px 32px rgba(54,43,64,.08);
      --shadow-hover:0 16px 38px rgba(54,43,64,.12);
    }
    html{scroll-behavior:smooth;}
    body{
      background:var(--bg);
      color:var(--text);
      font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
      letter-spacing:0;
      line-height:1.7;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      z-index:-1;
      background-image:
        linear-gradient(rgba(122,46,98,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,46,98,.045) 1px, transparent 1px);
      background-size:38px 38px;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,0) 68%);
    }
    a,button,input{
      transition:all .18s ease;
    }
    img{max-width:100%;display:block;}
    ::selection{
      background:rgba(122,46,98,.18);
      color:var(--text);
    }
    .nav-shell{
      backdrop-filter:saturate(1.2) blur(14px);
    }
    .nav-shell.scrolled{
      background:rgba(250,251,248,.96);
      border-bottom:1px solid var(--line);
      box-shadow:0 8px 24px rgba(54,43,64,.08);
    }
    .section-gap{
      scroll-margin-top:112px;
    }
    .card{
      background:rgba(255,255,255,.88);
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .card:hover{
      box-shadow:var(--shadow-hover);
      transform:translateY(-2px);
    }
    .btn-primary{
      background:var(--brand);
      color:#fff;
      box-shadow:0 10px 24px rgba(122,46,98,.16);
    }
    .btn-primary:hover{
      background:#652753;
      box-shadow:0 14px 28px rgba(122,46,98,.22);
      transform:translateY(-1px);
    }
    .btn-secondary{
      background:#fff;
      color:var(--brand);
      border:1px solid rgba(122,46,98,.18);
    }
    .btn-secondary:hover{
      background:#F9F4F8;
      border-color:rgba(122,46,98,.28);
      transform:translateY(-1px);
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:.35rem;
      border-radius:999px;
      border:1px solid var(--line);
      background:#fff;
      color:var(--muted);
      padding:.34rem .7rem;
      font-size:.82rem;
      line-height:1;
    }
    .tag-soft-brand{background:#F7EEF5;color:var(--brand);border-color:#E7D4E0;}
    .tag-soft-mint{background:var(--mintsw);color:#197E69;border-color:#D4EFE7;}
    .tag-soft-warm{background:var(--coralsoft);color:#B57121;border-color:#F4DFC0;}
    .tag-soft-violet{background:var(--violet);color:#65506E;border-color:#E2D9EA;}
    .metric-track{
      height:10px;
      border-radius:999px;
      background:#F0EDF2;
      overflow:hidden;
    }
    .metric-fill{
      height:100%;
      border-radius:999px;
      background:linear-gradient(90deg,var(--brand),#A05586);
    }
    details summary::-webkit-details-marker{display:none;}
    details[open] .faq-arrow{
      transform:rotate(180deg);
    }
    .soft-panel{
      background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(250,251,248,.92));
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .mini-grid{
      background-image:
        linear-gradient(rgba(122,46,98,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(122,46,98,.08) 1px, transparent 1px);
      background-size:18px 18px;
    }
    .thumb-stripe{
      background:
        linear-gradient(135deg, rgba(122,46,98,.10), rgba(56,191,167,.12)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.36) 0 10px, rgba(255,255,255,0) 10px 20px);
    }
    input[type="search"]::-webkit-search-cancel-button{
      display:none;
    }
    @media (max-width: 1023px){
      .hero-shell{min-height:auto;}
    }

/* roulang page: category1 */
:root {
      --brand: #7A2E62;
      --brand-dark: #5B315B;
      --mint: #38BFA7;
      --warm: #F2B36D;
      --bg: #FAFBF8;
      --panel: #FFFFFF;
      --line: #E7E2EC;
      --text: #24202A;
      --muted: #57515F;
      --weak: #8A8492;
      --violet-soft: #EEE7F3;
      --shadow: 0 12px 32px rgba(54,43,64,.08);
      --shadow-hover: 0 16px 36px rgba(122,46,98,.12);
      --radius: 10px;
    }

    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(238,231,243,.9), transparent 22%),
        radial-gradient(circle at top right, rgba(231,247,244,.9), transparent 18%),
        linear-gradient(180deg, #FBFCFA 0%, #FAFBF8 100%);
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
      letter-spacing: 0;
    }
    * { box-sizing: border-box; }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, summary { font: inherit; }
    ::selection { background: rgba(122,46,98,.16); }

    .site-shell {
      position: relative;
      overflow-x: clip;
    }
    .site-shell::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(231,226,236,.55) 1px, transparent 1px),
        linear-gradient(90deg, rgba(231,226,236,.55) 1px, transparent 1px);
      background-size: 26px 26px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.08), transparent 62%);
      opacity: .42;
      z-index: 0;
    }

    .container-shell {
      width: min(1240px, calc(100% - 2rem));
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }

    .glass-sticky {
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      background: rgba(250, 251, 248, .78);
    }
    .glass-solid {
      background: rgba(250, 251, 248, .98);
    }

    .nav-chip {
      transition: all .18s ease;
    }
    .nav-chip:hover {
      transform: translateY(-1px);
      border-color: rgba(122,46,98,.24);
      background: #F9F4F8;
      color: var(--brand);
    }

    .panel {
      background: rgba(255,255,255,.92);
      border: 1px solid var(--line);
      box-shadow: var(--shadow);
      border-radius: 10px;
    }
    .panel-hover {
      transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
    }
    .panel-hover:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-hover);
      border-color: rgba(122,46,98,.18);
    }

    .btn-brand {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 44px;
      padding: .74rem 1rem;
      border-radius: 8px;
      background: var(--brand);
      color: #fff;
      border: 1px solid rgba(122,46,98,.12);
      box-shadow: 0 8px 18px rgba(122,46,98,.12);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease, background-color .18s ease;
      font-weight: 600;
    }
    .btn-brand:hover {
      transform: translateY(-1px);
      filter: brightness(.98);
      box-shadow: 0 14px 26px rgba(122,46,98,.16);
    }
    .btn-soft {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      min-height: 44px;
      padding: .72rem 1rem;
      border-radius: 8px;
      background: #fff;
      color: var(--brand);
      border: 1px solid rgba(122,46,98,.18);
      box-shadow: 0 8px 18px rgba(54,43,64,.05);
      transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
      font-weight: 600;
    }
    .btn-soft:hover {
      transform: translateY(-1px);
      background: #F9F4F8;
      box-shadow: 0 14px 26px rgba(54,43,64,.08);
    }

    .field {
      height: 46px;
      border-radius: 8px;
      background: rgba(255,255,255,.96);
      border: 1px solid var(--line);
      color: var(--text);
      outline: none;
      box-shadow: 0 8px 18px rgba(54,43,64,.03);
      transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
    }
    .field:focus {
      border-color: rgba(122,46,98,.36);
      box-shadow: 0 0 0 4px rgba(122,46,98,.08);
      background: #fff;
    }

    .tag {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .35rem;
      min-height: 28px;
      padding: .28rem .62rem;
      border-radius: 999px;
      border: 1px solid var(--line);
      background: #fff;
      color: var(--muted);
      font-size: 13px;
      line-height: 1;
      transition: all .18s ease;
      white-space: nowrap;
    }
    .tag:hover {
      border-color: rgba(122,46,98,.18);
      background: #F9F4F8;
      color: var(--brand);
    }
    .tag-soft-brand { background: #F7EEF5; color: var(--brand); border-color: rgba(122,46,98,.12); }
    .tag-soft-mint { background: #EAF8F5; color: #1E8E7E; border-color: rgba(56,191,167,.14); }
    .tag-soft-warm { background: #FFF4E6; color: #9A6230; border-color: rgba(242,179,109,.18); }
    .tag-soft-violet { background: #F3EEF8; color: #6E5A85; border-color: rgba(126,106,152,.14); }

    .thumb {
      position: relative;
      overflow: hidden;
      border-radius: 10px;
      border: 1px solid rgba(122,46,98,.12);
      background:
        linear-gradient(135deg, rgba(122,46,98,.12), rgba(56,191,167,.10)),
        linear-gradient(180deg, #fff, #F7F6FB);
      min-height: 126px;
    }
    .thumb::before,
    .thumb::after {
      content: "";
      position: absolute;
      inset: auto;
      border-radius: 999px;
      background: rgba(255,255,255,.58);
      filter: blur(.2px);
    }
    .thumb::before {
      width: 92px;
      height: 92px;
      right: -20px;
      top: -12px;
      border: 1px solid rgba(255,255,255,.65);
    }
    .thumb::after {
      width: 120px;
      height: 120px;
      left: -46px;
      bottom: -46px;
      border: 1px solid rgba(255,255,255,.55);
    }

    .step-dot {
      width: 42px;
      height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      background: #F7EEF5;
      color: var(--brand);
      font-weight: 700;
      border: 1px solid rgba(122,46,98,.12);
      box-shadow: 0 8px 18px rgba(122,46,98,.06);
      flex: none;
    }

    .mini-stat {
      height: 8px;
      border-radius: 999px;
      background: #F1EDF4;
      overflow: hidden;
    }
    .mini-stat > span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--brand), #A34C84);
    }

    details summary {
      cursor: pointer;
      list-style: none;
    }
    details summary::-webkit-details-marker { display: none; }

    .sticky-head {
      position: sticky;
      top: 0;
      z-index: 40;
      border-bottom: 1px solid rgba(231,226,236,.9);
      box-shadow: 0 6px 18px rgba(54,43,64,.04);
    }

    @media (max-width: 1023px) {
      .mobile-grid-tight {
        grid-template-columns: 1fr;
      }
    }