/* roulang page: index */
:root{
            --bg:#f7f2ef;
            --bg-2:#fffaf8;
            --card:#fffdfc;
            --text:#241826;
            --muted:#6f5d69;
            --line:rgba(116,74,97,.16);
            --line-strong:rgba(123,54,91,.28);
            --primary:#7b365b;
            --primary-2:#a14d78;
            --accent:#df8c9d;
            --accent-2:#f2c9ce;
            --shadow:0 20px 45px rgba(60,18,39,.08);
            --shadow-soft:0 10px 24px rgba(60,18,39,.06);
            --radius:24px;
            --radius-sm:18px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(circle at 12% 10%, rgba(123,54,91,.08), transparent 28%),
                radial-gradient(circle at 88% 8%, rgba(223,140,157,.08), transparent 24%),
                linear-gradient(180deg, #fffdfc 0%, var(--bg) 100%);
            font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
            line-height:1.75;
            text-rendering:optimizeLegibility;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(123,54,91,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(123,54,91,.035) 1px, transparent 1px);
            background-size:56px 56px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.06) 32%, transparent 72%);
            z-index:0;
        }
        a,button,input,select,textarea{transition:all .22s ease}
        a{text-decoration:none}
        img{max-width:100%;display:block}
        ::selection{background:rgba(123,54,91,.16);color:var(--text)}
        .container-wide{width:min(1240px, calc(100% - 32px)); margin-inline:auto; position:relative; z-index:1;}
        .panel{
            background:rgba(255,255,255,.78);
            backdrop-filter:blur(10px);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .card{
            background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,250,248,.98));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .card-hover:hover{transform:translateY(-2px); border-color:var(--line-strong); box-shadow:var(--shadow)}
        .pill{
            display:inline-flex; align-items:center; gap:.45rem;
            border:1px solid rgba(123,54,91,.14);
            background:rgba(255,255,255,.82);
            color:var(--primary);
            border-radius:999px;
            padding:.48rem .82rem;
            font-size:.86rem;
            font-weight:700;
            letter-spacing:.02em;
        }
        .pill.active{
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            color:#fff;
            border-color:transparent;
            box-shadow:0 10px 24px rgba(123,54,91,.18);
        }
        .btn-primary{
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            color:#fff;
            box-shadow:0 12px 26px rgba(123,54,91,.18);
        }
        .btn-primary:hover{transform:translateY(-1px); box-shadow:0 16px 34px rgba(123,54,91,.22)}
        .btn-secondary{
            background:rgba(255,255,255,.9);
            color:var(--primary);
            border:1px solid rgba(123,54,91,.18);
        }
        .btn-secondary:hover{border-color:rgba(123,54,91,.32); background:#fff}
        .soft-label{
            display:inline-flex; align-items:center; gap:.35rem;
            padding:.28rem .62rem;
            border-radius:999px;
            font-size:.76rem;
            font-weight:800;
            letter-spacing:.08em;
            text-transform:uppercase;
            color:var(--primary);
            background:rgba(123,54,91,.07);
        }
        .section-gap{padding:clamp(64px, 9vw, 104px) 0}
        .section-title{font-size:clamp(1.7rem, 3vw, 2.6rem); line-height:1.12; letter-spacing:-.02em; font-weight:800}
        .section-desc{max-width:72ch; color:var(--muted); font-size:1rem}
        .hero-title{font-size:clamp(2.1rem, 5vw, 4.2rem); line-height:1.08; letter-spacing:-.04em; font-weight:800}
        .hero-copy{font-size:clamp(1rem, 1.3vw, 1.08rem); color:var(--muted)}
        .metric-number{font-size:clamp(2rem, 4vw, 3.2rem); font-weight:800; line-height:1; letter-spacing:-.04em}
        .metric-bar{height:8px; background:rgba(123,54,91,.08); border-radius:999px; overflow:hidden}
        .metric-bar > span{display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--primary), var(--accent));}
        .tagline{display:inline-flex; align-items:center; gap:.45rem; padding:.42rem .72rem; border-radius:999px; background:rgba(123,54,91,.06); color:var(--primary); font-weight:700; font-size:.88rem}
        .input-shell{
            display:flex; align-items:center; gap:.65rem;
            background:rgba(255,255,255,.92);
            border:1px solid rgba(123,54,91,.18);
            border-radius:999px;
            padding:.55rem .75rem .55rem .95rem;
            min-height:54px;
        }
        .input-shell input{
            width:100%; border:0; outline:0; background:transparent; color:var(--text); font-size:.98rem;
        }
        .input-shell input::placeholder{color:#907d88}
        .grid-noisy{
            background-image:
                linear-gradient(120deg, rgba(123,54,91,.08), rgba(223,140,157,.04)),
                radial-gradient(circle at top left, rgba(255,255,255,.85), rgba(255,255,255,.56));
        }
        .list-check li{position:relative; padding-left:1.55rem}
        .list-check li::before{
            content:"";
            position:absolute; left:0; top:.65rem; width:.7rem; height:.7rem; border-radius:999px;
            background:linear-gradient(135deg, var(--primary), var(--accent)); box-shadow:0 0 0 4px rgba(123,54,91,.08);
        }
        .compare-side{position:relative; overflow:hidden}
        .compare-side::after{
            content:""; position:absolute; inset:auto -15% -20% auto; width:170px; height:170px; border-radius:50%;
            background:radial-gradient(circle, rgba(123,54,91,.12), transparent 72%);
        }
        .badge-dot{width:.55rem; height:.55rem; border-radius:999px; background:linear-gradient(135deg, var(--primary), var(--accent))}
        .faq-item{border:1px solid rgba(123,54,91,.14); background:rgba(255,255,255,.82); border-radius:22px; overflow:hidden}
        .faq-trigger{width:100%; display:flex; justify-content:space-between; gap:1rem; text-align:left; padding:1.1rem 1.2rem; font-weight:700; color:var(--text)}
        .faq-trigger span{display:block; line-height:1.45}
        .faq-icon{flex:none; width:2rem; height:2rem; border-radius:999px; border:1px solid rgba(123,54,91,.18); display:grid; place-items:center; color:var(--primary); transition:transform .24s ease, background .24s ease}
        .faq-item.open .faq-icon{transform:rotate(45deg); background:rgba(123,54,91,.08)}
        .faq-content{max-height:0; overflow:hidden; transition:max-height .28s ease}
        .faq-inner{padding:0 1.2rem 1.15rem 1.2rem; color:var(--muted)}
        .no-scrollbar::-webkit-scrollbar{display:none}
        .no-scrollbar{scrollbar-width:none; -ms-overflow-style:none}
        .reveal{opacity:0; transform:translateY(12px); transition:opacity .65s ease, transform .65s cubic-bezier(.22,1,.36,1)}
        .reveal.is-visible{opacity:1; transform:translateY(0)}
        .floating-mark{
            position:absolute; inset:auto 0 0 auto; width:240px; height:240px; border-radius:50%;
            border:1px solid rgba(123,54,91,.08); opacity:.7;
            background:
                radial-gradient(circle at 30% 30%, rgba(223,140,157,.18), transparent 38%),
                radial-gradient(circle at 70% 70%, rgba(123,54,91,.08), transparent 44%);
        }
        .form-field label{display:block; font-size:.92rem; font-weight:700; color:#3d2f38; margin-bottom:.48rem}
        .form-field input,
        .form-field select,
        .form-field textarea{
            width:100%; border-radius:18px; border:1px solid rgba(123,54,91,.18); background:rgba(255,255,255,.96); padding:.92rem 1rem; outline:none; color:var(--text);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
        }
        .form-field input:focus,
        .form-field select:focus,
        .form-field textarea:focus{
            border-color:rgba(123,54,91,.42); box-shadow:0 0 0 4px rgba(123,54,91,.08);
        }
        .footer-dark{
            background:linear-gradient(180deg, #2e1d28 0%, #241824 100%);
            color:#f9f0f3;
        }
        .footer-dark a{color:#f5dce4}
        .footer-dark a:hover{color:#fff}
        .age-overlay{
            position:fixed; inset:0; z-index:60; display:flex; align-items:center; justify-content:center; padding:1.2rem;
            background:rgba(22,10,15,.58); backdrop-filter:blur(14px);
        }
        .age-card{
            width:min(540px, 100%); border-radius:28px; background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,250,248,.98));
            border:1px solid rgba(255,255,255,.5); box-shadow:0 30px 80px rgba(14,6,9,.28); overflow:hidden;
        }
        .age-top{
            padding:1.5rem 1.5rem 1rem;
            background:linear-gradient(135deg, rgba(123,54,91,.12), rgba(223,140,157,.08));
        }
        .kicker-line{
            display:flex; align-items:center; gap:.55rem; color:var(--primary); font-weight:800; letter-spacing:.05em; font-size:.82rem;
        }
        .kicker-line::before{content:""; width:1.6rem; height:1.6rem; border-radius:999px; border:1px solid rgba(123,54,91,.22); background:rgba(255,255,255,.65)}
        .small-note{font-size:.92rem; color:var(--muted)}
        @media (max-width: 768px){
            .container-wide{width:min(100% - 20px, 1240px)}
            .section-gap{padding:56px 0}
        }

/* roulang page: category1 */
:root {
      --primary: #8f3f66;
      --accent: #d78b97;
      --bg: #fffaf7;
      --bg-soft: #fff4f1;
      --panel: rgba(255,255,255,.84);
      --text: #2a1821;
      --muted: #7f6a72;
      --line: rgba(123,54,91,.14);
      --shadow: 0 18px 42px rgba(72, 26, 47, .08);
      --shadow-strong: 0 24px 60px rgba(72, 26, 47, .12);
      --radius: 24px;
    }
    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
      color: var(--text);
      background:
        radial-gradient(circle at top left, rgba(143,63,102,.08), transparent 30%),
        radial-gradient(circle at 82% 8%, rgba(215,139,151,.09), transparent 26%),
        linear-gradient(180deg, #fffdfc 0%, #fff8f6 42%, #fffaf8 100%);
      min-height: 100vh;
    }
    a { color: inherit; text-decoration: none; }
    img { max-width: 100%; display: block; }
    button, input, textarea, select { font: inherit; }
    ::selection { background: rgba(143,63,102,.18); }
    .container-wide { width: min(1280px, calc(100% - 2rem)); margin: 0 auto; }
    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      backdrop-filter: blur(16px);
    }
    .panel-strong {
      background: linear-gradient(145deg, rgba(143,63,102,.08), rgba(255,255,255,.82));
      border: 1px solid rgba(143,63,102,.14);
      border-radius: 28px;
      box-shadow: var(--shadow-strong);
    }
    .pill {
      display: inline-flex;
      align-items: center;
      gap: .45rem;
      border-radius: 999px;
      border: 1px solid rgba(123,54,91,.14);
      background: rgba(255,255,255,.78);
      padding: .68rem 1rem;
      font-weight: 700;
      transition: .22s ease;
    }
    .pill:hover, .pill:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(143,63,102,.3);
      box-shadow: 0 10px 24px rgba(77, 28, 49, .07);
      outline: none;
    }
    .pill.active {
      background: linear-gradient(135deg, var(--primary), #a64b73);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 14px 30px rgba(143,63,102,.22);
    }
    .btn-primary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border: 0;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--primary), #a54b72);
      color: #fff;
      padding: .86rem 1.25rem;
      font-weight: 800;
      box-shadow: 0 14px 28px rgba(143,63,102,.18);
      transition: .24s ease;
    }
    .btn-primary:hover, .btn-primary:focus-visible {
      transform: translateY(-1px);
      box-shadow: 0 18px 34px rgba(143,63,102,.24);
      outline: none;
    }
    .btn-secondary {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .55rem;
      border-radius: 999px;
      border: 1px solid rgba(143,63,102,.22);
      background: rgba(255,255,255,.82);
      color: var(--primary);
      padding: .86rem 1.2rem;
      font-weight: 800;
      transition: .24s ease;
    }
    .btn-secondary:hover, .btn-secondary:focus-visible {
      transform: translateY(-1px);
      border-color: rgba(143,63,102,.32);
      box-shadow: 0 12px 24px rgba(77, 28, 49, .06);
      outline: none;
    }
    .input-shell {
      display: flex;
      align-items: center;
      gap: .75rem;
      padding: .8rem 1rem;
      border-radius: 999px;
      background: rgba(255,255,255,.88);
      border: 1px solid rgba(123,54,91,.14);
      box-shadow: 0 12px 28px rgba(72, 26, 47, .05);
      transition: .22s ease;
    }
    .input-shell:focus-within {
      border-color: rgba(143,63,102,.35);
      box-shadow: 0 14px 34px rgba(143,63,102,.12);
    }
    .input-shell input {
      width: 100%;
      border: 0;
      outline: none;
      background: transparent;
      color: var(--text);
      min-width: 0;
    }
    .input-shell input::placeholder { color: #9a8a91; }
    .badge-dot {
      width: .5rem;
      height: .5rem;
      border-radius: 999px;
      background: linear-gradient(135deg, var(--accent), var(--primary));
      box-shadow: 0 0 0 6px rgba(143,63,102,.08);
      display: inline-block;
    }
    .no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
    .no-scrollbar::-webkit-scrollbar { display: none; }
    .section-gap { padding: 72px 0; }
    .section-title {
      font-size: clamp(1.6rem, 2.4vw, 2.65rem);
      line-height: 1.12;
      letter-spacing: -.03em;
      font-weight: 800;
      color: var(--text);
    }
    .section-lead {
      color: var(--muted);
      line-height: 1.85;
      max-width: 68ch;
    }
    .metric-card {
      position: relative;
      overflow: hidden;
      border-radius: 24px;
      border: 1px solid rgba(123,54,91,.12);
      background: rgba(255,255,255,.88);
      box-shadow: var(--shadow);
      padding: 1.1rem;
      transition: .24s ease;
    }
    .metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-strong); }
    .metric-num { font-size: clamp(2rem, 3.5vw, 3.25rem); line-height: 1; font-weight: 800; letter-spacing: -.04em; }
    .metric-bar { height: .45rem; border-radius: 999px; background: rgba(143,63,102,.12); overflow: hidden; }
    .metric-bar > span { display:block; height:100%; border-radius:999px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
    .subtle-grid {
      background-image:
        linear-gradient(rgba(123,54,91,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(123,54,91,.06) 1px, transparent 1px);
      background-size: 28px 28px;
      mask-image: linear-gradient(180deg, rgba(0,0,0,.6), transparent 100%);
    }
    .faq-item { border-bottom: 1px solid rgba(123,54,91,.12); }
    .faq-trigger {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 1.2rem 0;
      text-align: left;
      color: var(--text);
      font-weight: 800;
      background: transparent;
      border: 0;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height .28s ease;
      color: var(--muted);
      line-height: 1.85;
    }
    .faq-item.open .faq-answer { max-height: 220px; padding-bottom: 1.1rem; }
    .faq-item.open .faq-arrow { transform: rotate(180deg); }
    .faq-arrow { transition: transform .24s ease; }
    .field {
      width: 100%;
      border-radius: 18px;
      border: 1px solid rgba(123,54,91,.14);
      background: rgba(255,255,255,.92);
      padding: .95rem 1rem;
      outline: none;
      transition: .22s ease;
      color: var(--text);
    }
    .field:focus {
      border-color: rgba(143,63,102,.42);
      box-shadow: 0 0 0 4px rgba(143,63,102,.08);
    }
    .footer-dark {
      background: linear-gradient(180deg, #2a1821 0%, #1f1218 100%);
      color: rgba(255,255,255,.92);
    }
    .footer-dark a { color: rgba(255,255,255,.82); }
    .footer-dark a:hover { color: #fff; }
    .footer-pill {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      border-radius: 999px;
      border: 1px solid rgba(255,255,255,.12);
      background: rgba(255,255,255,.05);
      padding: .65rem .95rem;
      transition: .22s ease;
    }
    .footer-pill:hover { background: rgba(255,255,255,.09); transform: translateY(-1px); }
    @media (max-width: 1024px) {
      .section-gap { padding: 58px 0; }
    }
    @media (max-width: 768px) {
      .container-wide { width: min(100% - 1.2rem, 1280px); }
      .section-gap { padding: 48px 0; }
    }