/* roulang page: index */
:root {
            --primary: #8f315a;
            --primary-dark: #70213f;
            --primary-soft: #f7e9ef;
            --accent: #e98262;
            --accent-dark: #bd5d43;
            --accent-soft: #fff0e9;
            --ink: #281f25;
            --text: #463a41;
            --muted: #766a71;
            --surface: #ffffff;
            --surface-alt: #f8f5f6;
            --surface-warm: #fffaf7;
            --footer: #241a20;
            --border: #e7dde2;
            --border-strong: #d4c2ca;
            --success: #39755a;
            --success-soft: #e9f5ee;
            --warning: #a45d22;
            --warning-soft: #fff2df;
            --danger: #a13e48;
            --radius-sm: 10px;
            --radius: 16px;
            --radius-lg: 24px;
            --shadow-sm: 0 8px 24px rgba(57, 30, 43, .06);
            --shadow: 0 18px 50px rgba(57, 30, 43, .10);
            --container: 1240px;
            --transition: 180ms ease;
        }

        *, *::before, *::after {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--text);
            background: var(--surface-alt);
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            font-size: 16px;
            line-height: 1.8;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

        h1, h2, h3, h4, p, ul, ol {
            margin-top: 0;
        }

        h1, h2, h3, h4 {
            color: var(--ink);
            font-weight: 760;
            letter-spacing: -.025em;
        }

        h1 {
            margin-bottom: 20px;
            font-size: clamp(2.15rem, 4.8vw, 4.7rem);
            line-height: 1.14;
        }

        h2 {
            margin-bottom: 16px;
            font-size: clamp(1.75rem, 3vw, 2.65rem);
            line-height: 1.25;
        }

        h3 {
            margin-bottom: 10px;
            font-size: 1.22rem;
            line-height: 1.45;
        }

        p {
            margin-bottom: 1.15rem;
        }

        a {
            color: var(--primary);
            text-decoration: none;
            transition: color var(--transition), background var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
        }

        a:hover {
            color: var(--primary-dark);
        }

        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(233, 130, 98, .38);
            outline-offset: 3px;
        }

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

        button {
            cursor: pointer;
        }

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

        .site-container {
            width: min(calc(100% - 40px), var(--container));
            margin-inline: auto;
        }

        .section {
            padding: 88px 0;
            scroll-margin-top: 92px;
        }

        .section-white {
            background: var(--surface);
        }

        .section-warm {
            background: var(--surface-warm);
        }

        .section-heading {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 32px;
            margin-bottom: 38px;
        }

        .section-heading > div:first-child {
            max-width: 760px;
        }

        .section-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 1.03rem;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 13px;
            color: var(--primary);
            font-size: .82rem;
            font-weight: 800;
            letter-spacing: .08em;
        }

        .eyebrow::before {
            width: 22px;
            height: 3px;
            background: var(--accent);
            border-radius: 10px;
            content: "";
        }

        .badge,
        .tag {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 28px;
                       padding: 3px 10px;
            border: 1px solid transparent;
            border-radius: 999px;
            font-size: .76rem;
            line-height: 1.4;
            white-space: nowrap;
        }

        .badge {
            color: var(--primary);
            background: var(--primary-soft);
            border-color: #efd5df;
        }

        .badge.accent {
            color: var(--accent-dark);
            background: var(--accent-soft);
            border-color: #f4d4c6;
        }

        .badge.success {
            color: var(--success);
            background: var(--success-soft);
            border-color: #cde8d8;
        }

        .tag {
            color: var(--muted);
            background: #fff;
            border-color: var(--border);
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-height: 48px;
            padding: 11px 21px;
            border: 1px solid transparent;
            border-radius: 11px;
            font-size: .94rem;
            font-weight: 750;
            line-height: 1.4;
            transition: all var(--transition);
        }

        .button.primary {
            color: #fff;
            background: var(--primary);
            box-shadow: 0 8px 18px rgba(143, 49, 90, .19);
        }

        .button.primary:hover {
            color: #fff;
            background: var(--primary-dark);
            transform: translateY(-2px);
            box-shadow: 0 12px 24px rgba(143, 49, 90, .25);
        }

        .button.secondary {
            color: var(--primary);
            background: #fff;
            border-color: var(--border-strong);
        }

        .button.secondary:hover {
            color: var(--primary-dark);
            background: var(--primary-soft);
            border-color: var(--primary);
            transform: translateY(-2px);
        }

        .button.small {
            min-height: 38px;
            padding: 8px 14px;
            font-size: .84rem;
        }

        .button:active {
            transform: translateY(0);
        }

        .button[disabled] {
            cursor: not-allowed;
            opacity: .5;
            box-shadow: none;
        }

        .site-header {
            position: sticky;
            z-index: 30;
            top: 0;
            background: rgba(255, 255, 255, .96);
            border-bottom: 1px solid var(--border);
            box-shadow: 0 4px 18px rgba(55, 30, 42, .045);
            backdrop-filter: blur(12px);
        }

        .nav-wrap {
            display: flex;
            align-items: center;
            min-height: 76px;
            gap: 26px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            flex: 0 0 auto;
            gap: 11px;
            color: var(--ink);
            font-size: 1.08rem;
            font-weight: 850;
            letter-spacing: -.035em;
            white-space: nowrap;
        }

        .brand:hover {
            color: var(--primary);
        }

        .brand-mark {
            display: grid;
            width: 36px;
            height: 36px;
            place-items: center;
            color: #fff;
            background: var(--primary);
            border-radius: 11px 11px 11px 4px;
            font-size: .82rem;
            font-weight: 900;
            box-shadow: 5px 5px 0 #f4d8df;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-left: auto;
        }

        .desktop-nav > a,
        .menu-trigger {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding: 8px 13px;
            color: var(--text);
            border: 1px solid transparent;
            border-radius: 9px;
            font-size: .92rem;
            font-weight: 700;
            background: transparent;
        }

        .desktop-nav > a:hover,
        .desktop-nav > a.active,
        .menu-trigger:hover,
        .menu-trigger[aria-expanded="true"] {
            color: var(--primary);
            background: var(--primary-soft);
            border-color: #efd5df;
        }

        .menu-trigger::after {
            display: inline-block;
            width: 7px;
            height: 7px;
            margin: -4px 0 0 8px;
            border-right: 1.5px solid currentColor;
            border-bottom: 1.5px solid currentColor;
            transform: rotate(45deg);
            content: "";
        }

        .mega-wrap {
            position: relative;
        }

        .mega-panel {
            position: absolute;
            top: calc(100% + 12px);
            right: 0;
            display: grid;
            grid-template-columns: 1.2fr 1fr;
            width: 410px;
            padding: 20px;
            visibility: hidden;
            opacity: 0;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            transform: translateY(-7px);
            transition: all var(--transition);
        }

        .mega-wrap:hover .mega-panel,
        .mega-wrap:focus-within .mega-panel,
        .mega-panel.is-open {
            visibility: visible;
            opacity: 1;
            transform: translateY(0);
        }

        .mega-panel strong {
            display: block;
            margin-bottom: 8px;
            color: var(--ink);
            font-size: .9rem;
        }

        .mega-panel p {
            margin-bottom: 10px;
            color: var(--muted);
            font-size: .78rem;
            line-height: 1.65;
        }

        .mega-panel a {
            display: block;
            padding: 5px 0;
            font-size: .84rem;
            font-weight: 700;
        }

        .mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            margin-left: auto;
            color: var(--ink);
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 10px;
        }

        .mobile-toggle span,
        .mobile-toggle::before,
        .mobile-toggle::after {
            display: block;
            width: 19px;
            height: 2px;
            margin: 4px auto;
            background: currentColor;
            border-radius: 2px;
            content: "";
        }

        .mobile-menu {
            display: none;
            padding: 12px 20px 22px;
            background: #fff;
            border-top: 1px solid var(--border);
        }

        .mobile-menu a {
            display: block;
            padding: 11px 3px;
            color: var(--text);
            font-weight: 700;
            border-bottom: 1px solid var(--border);
        }

        .hero {
            position: relative;
            overflow: hidden;
            padding: 70px 0 58px;
            background:
                radial-gradient(circle at 85% 14%, rgba(233, 130, 98, .18), transparent 25%),
                linear-gradient(115deg, #fffaf7 0%, #f7edf1 54%, #f3e7ec 100%);
        }

        .hero::after {
            position: absolute;
            right: -100px;
            bottom: -160px;
            width: 420px;
            height: 420px;
            border: 1px solid rgba(143, 49, 90, .12);
            border-radius: 50%;
            box-shadow: 0 0 0 34px rgba(143, 49, 90, .035), 0 0 0 70px rgba(143, 49, 90, .025);
            content: "";
        }

        .hero-grid {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            align-items: center;
            gap: 62px;
        }

        .hero-copy {
            max-width: 690px;
        }

        .hero-copy h1 span {
            color: var(--primary);
        }

        .hero-copy .lead {
            max-width: 650px;
            margin-bottom: 28px;
            color: var(--text);
            font-size: 1.08rem;
            line-height: 1.9;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-bottom: 30px;
        }

        .hero-notes {
            display: flex;
            flex-wrap: wrap;
            gap: 18px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .hero-notes li {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--muted);
            font-size: .84rem;
            font-weight: 700;
        }

        .hero-notes li::before {
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            content: "";
        }

        .hero-board {
            padding: 18px;
            background: rgba(255, 255, 255, .74);
            border: 1px solid rgba(255, 255, 255, .88);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }

        .board-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 2px 3px 15px;
        }

        .board-top strong {
            color: var(--ink);
            font-size: .95rem;
        }

        .board-status {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            color: var(--success);
            font-size: .76rem;
            font-weight: 750;
        }

        .board-status::before {
            width: 7px;
            height: 7px;
            background: var(--success);
            border-radius: 50%;
            content: "";
        }

        .board-feature {
            display: grid;
            grid-template-columns: 118px 1fr;
            gap: 17px;
            padding: 17px;
            background: var(--footer);
            border-radius: 15px;
        }

        .cover {
            position: relative;
            min-height: 143px;
            overflow: hidden;
            background: linear-gradient(145deg, #b84f76, #54263d 68%, #e98262);
            border-radius: 11px;
        }

        .cover::before,
        .cover::after {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, .32);
            border-radius: 50%;
            content: "";
        }

        .cover::before {
            top: 25px;
            left: 20px;
            width: 78px;
            height: 78px;
        }

        .cover::after {
            right: -15px;
            bottom: -35px;
            width: 116px;
            height: 116px;
            background: rgba(255, 255, 255, .12);
        }

        .cover-label {
            position: absolute;
            right: 9px;
            bottom: 9px;
            left: 9px;
            color: #fff;
            font-size: .76rem;
            font-weight: 750;
            line-height: 1.45;
        }

        .board-feature h3 {
            margin-top: 5px;
            color: #fff;
            font-size: 1.2rem;
        }

        .board-feature p {
            margin-bottom: 12px;
            color: #d8cbd0;
            font-size: .82rem;
            line-height: 1.65;
        }

        .board-links {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 13px;
        }

        .board-link {
            padding: 13px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 12px;
        }

        .board-link:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-sm);
            transform: translateY(-2px);
        }

        .board-link strong {
            display: block;
            margin-bottom: 3px;
            color: var(--ink);
            font-size: .87rem;
        }

        .board-link span {
            color: var(--muted);
            font-size: .74rem;
        }

        .metrics {
            position: relative;
            z-index: 2;
            margin-top: -1px;
            padding: 25px 0;
            background: var(--footer);
        }

        .metrics-grid {
            display: grid;
            grid-template-columns: 1.1fr repeat(3, 1fr);
            gap: 1px;
            background: rgba(255, 255, 255, .15);
            border: 1px solid rgba(255, 255, 255, .14);
            border-radius: 15px;
            overflow: hidden;
        }

        .metric {
            min-height: 93px;
            padding: 16px 22px;
            background: var(--footer);
        }

        .metric-label {
            display: block;
            margin-bottom: 2px;
            color: #c6b8bf;
            font-size: .78rem;
        }

        .metric strong {
            display: block;
            color: #fff;
            font-size: 1.45rem;
            line-height: 1.35;
        }

        .metric small {
            color: #a8939d;
            font-size: .72rem;
        }

        .metric.intro strong {
            color: #f7d7df;
            font-size: 1.02rem;
        }

        .matrix-grid {
            display: grid;
            grid-template-columns: 1.35fr .9fr .9fr;
            grid-template-rows: 1fr 1fr;
            gap: 18px;
        }

        .matrix-card {
            position: relative;
            min-height: 190px;
            padding: 26px;
            overflow: hidden;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
        }

        .matrix-card.large {
            grid-row: 1 / span 2;
            min-height: 398px;
            background: var(--primary);
        }

        .matrix-card.large h3,
        .matrix-card.large p {
            color: #fff;
        }

        .matrix-card h3 {
            margin-top: 15px;
        }

        .matrix-card p {
            max-width: 430px;
            color: var(--muted);
            font-size: .9rem;
        }

        .matrix-card.large p {
            color: #f4dce5;
        }

        .matrix-number {
            color: var(--accent);
            font-size: 2.6rem;
            font-weight: 850;
            line-height: 1;
        }

        .matrix-card.large .matrix-number {
            color: #ffd5c4;
        }

        .matrix-card .card-foot {
            position: absolute;
            right: 25px;
            bottom: 22px;
            left: 25px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            padding-top: 13px;
            border-top: 1px solid var(--border);
        }

        .matrix-card.large .card-foot {
            border-color: rgba(255, 255, 255, .2);
        }

        .matrix-card .card-foot span {
            color: var(--muted);
            font-size: .76rem;
        }

        .matrix-card.large .card-foot span {
            color: #e9cbd6;
        }

        .arrow-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-size: .83rem;
            font-weight: 800;
        }

        .arrow-link::after {
            content: "→";
            transition: transform var(--transition);
        }

        .arrow-link:hover::after {
            transform: translateX(3px);
        }

        .comparison {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: stretch;
            gap: 15px;
        }

        .compare-card {
            padding: 30px;
            border: 1px solid var(--border);
            border-radius: var(--radius);
            background: #fff;
        }

        .compare-card.highlight {
            background: var(--primary-soft);
            border-color: #ebccd8;
        }

        .compare-card h3 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            padding-bottom: 15px;
            margin-bottom: 18px;
            border-bottom: 1px solid var(--border);
        }

        .compare-card.highlight h3 {
            border-color: #ebccd8;
        }

        .compare-list {
            display: grid;
            gap: 14px;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .compare-list li {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            color: var(--muted);
            font-size: .88rem;
        }

        .compare-list strong {
            color: var(--ink);
            font-weight: 750;
            text-align: right;
        }

        .compare-arrow {
            display: grid;
            width: 44px;
            height: 44px;
            align-self: center;
            place-items: center;
            color: #fff;
            background: var(--accent);
            border-radius: 50%;
            font-size: 1.25rem;
            font-weight: 800;
        }

        .rank-layout {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            gap: 22px;
        }

        .rank-list,
        .feature-note {
            background: #fff;
            border: 1px solid var(--border);
            border-radius: var(--radius);
        }

        .rank-list {
            overflow: hidden;
        }

        .rank-head,
        .rank-item {
            display: grid;
            grid-template-columns: 45px 1fr 90px 70px;
            align-items: center;
            gap: 12px;
            padding: 15px 20px;
        }

        .rank-head {
            color: var(--muted);
            background: var(--surface-alt);
            font-size: .75rem;
            font-weight: 750;
        }

        .rank-item {
            min-height: 73px;
            border-top: 1px solid var(--border);
            font-size: .84rem;
        }

        .rank-item:hover {
            background: var(--surface-warm);
        }

        .rank-no {
            color: var(--accent-dark);
            font-size: 1.3rem;
            font-weight: 850;
        }

        .rank-title strong {
            display: block;
            color: var(--ink);
            font-size: .9rem;
        }

        .rank-title span,
        .rank-value,
        .rank-trend {
            color: var(--muted);
            font-size: .75rem;
        }

        .rank-trend {
            color: var(--success);
            font-weight: 750;
        }

        .feature-note {
            padding: 28px;
            background: var(--accent-soft);
            border-color: #f1d9cd;
        }

        .feature-note h3 {
            margin-top: 16px;
        }

        .feature-note p {
            color: var(--text);
            font-size: .9rem;
        }

        .feature-note ul {
            margin: 18px 0 0;
            padding: 0;
            list-style: none;
        }

        .feature-note li {
            position: relative;
            padding: 9px 0 9px 22px;
            border-top: 1px solid rgba(189, 93, 67, .17);
            font-size: .84rem;
        }

        .feature-note li::before {
            position: absolute;
            top: 16px;
            left: 2px;
            width: 8px;
            height: 8px;
            background: var(--accent);
            border-radius: 50%;
            content: "";
        }

        .topics {
            display: flex;
            flex-wrap: wrap;
            gap: 11px;
        }

        .topic-link {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-height: 49px;
            padding: 9px 15px;
            color: var(--text);
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 11px;
            font-size: .86rem;
            font-weight: 750;
        }

        .topic-link b {
            color: var(--primary);
            font-size: .75rem;
        }

        .topic-link:hover,
        .topic-link.active {
            color: var(--primary);
            border-color: var(--primary);
            background: var(--primary-soft);
            transform: translateY(-2px);
        }

        .faq-list {
            max-width: 920px;
            margin: 0 auto;
        }

        .faq-item {
            margin-bottom: 11px;
            background: #fff;
            border: 1px solid var(--border);
            border-radius: 13px;
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        .faq-item[open] {
            border-color: #deb7c6;
            box-shadow: var(--shadow-sm);
        }

        .faq-item summary {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 18px;
            padding: 19px 22px;
            color: var(--ink);
            font-weight: 760;
            cursor: pointer;
            list-style: none;
        }

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

        .faq-item summary::after {
            flex: 0 0 auto;
            color: var(--primary);
            font-size: 1.3rem;
            font-weight: 400;
            content: "+";
        }

        .faq-item[open] summary::after {
            content: "−";
        }

        .faq-answer {
            padding: 0 22px 19px;
            color: var(--muted);
            font-size: .9rem;
            line-height: 1.8;
        }

        .cta-panel {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 42px;
            align-items: center;
            padding: 42px;
            background: var(--primary);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
        }

        .cta-panel h2,
        .cta-panel p {
            color: #fff;
        }

        .cta-panel p {
            margin-bottom: 0;
            color: #f2dce4;
            font-size: .94rem;
        }

        .form-card {
            padding: 24px;
            background: #fff;
            border-radius: 15px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 13px;
        }

        .form-field.full {
            grid-column: 1 / -1;
        }

        label {
            display: block;
            margin-bottom: 5px;
            color: var(--ink);
            font-size: .78rem;
            font-weight: 750;
        }

        input,
        select,
        textarea {
            width: 100%;
            min-height: 44px;
            padding: 9px 12px;
            color: var(--text);
            background: #fff;
            border: 1px solid var(--border-strong);
            border-radius: 9px;
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        textarea {
            min-height: 88px;
            resize: vertical;
        }

        input:hover,
        select:hover,
        textarea:hover {
            border-color: #b98498;
        }

        input:focus,
        select:focus,
        textarea:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(143, 49, 90, .11);
            outline: none;
        }

        .check-line {
            display: flex;
            align-items: flex-start;
            gap: 9px;
            margin: 14px 0;
            color: var(--muted);
            font-size: .73rem;
            line-height: 1.6;
        }

        .check-line input {
            width: 17px;
            min-height: 17px;
            margin-top: 3px;
            accent-color: var(--primary);
        }

        .form-message {
            display: none;
            margin-top: 10px;
            padding: 8px 10px;
            border-radius: 8px;
            font-size: .78rem;
        }

        .form-message.error {
            display: block;
            color: var(--danger);
            background: #fff0f1;
        }

        .form-message.success {
            display: block;
            color: var(--success);
            background: var(--success-soft);
        }

        .site-footer {
            padding: 48px 0 24px;
            color: #cdbfc6;
            background: var(--footer);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr 1.25fr;
            gap: 35px;
            padding-bottom: 38px;
        }

        .site-footer .brand {
            color: #fff;
            margin-bottom: 14px;
        }

        .site-footer .brand-mark {
            box-shadow: 5px 5px 0 rgba(233, 130, 98, .35);
        }

        .footer-intro {
            max-width: 330px;
            color: #aa9ba3;
            font-size: .82rem;
            line-height: 1.8;
        }

        .footer-title {
            margin-bottom: 13px;
            color: #fff;
            font-size: .92rem;
            font-weight: 760;
        }

        .footer-links {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .footer-links li + li {
            margin-top: 9px;
        }

        .footer-links a {
            color: #bcaeb5;
            font-size: .82rem;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .compliance-box {
            padding: 14px;
            color: #cbbcc3;
            background: rgba(255,255,255,.06);
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 12px;
            font-size: .77rem;
            line-height: 1.75;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 18px;
            padding-top: 21px;
            color: #94828b;
            border-top: 1px solid rgba(255,255,255,.12);
            font-size: .75rem;
        }

        .footer-bottom a {
            color: #bcaeb5;
        }

        .footer-bottom a:hover {
            color: #fff;
        }

        @media (max-width: 1024px) {
            .hero-grid {
                gap: 34px;
            }

            .matrix-grid {
                grid-template-columns: 1.15fr 1fr;
            }

            .matrix-card.large {
                grid-row: 1 / span 2;
            }

            .rank-layout,
            .cta-panel {
                gap: 25px;
            }

            .footer-grid {
                grid-template-columns: 1.3fr 1fr 1fr;
            }

            .footer-grid > :last-child {
                grid-column: 1 / -1;
            }
        }

        @media (max-width: 768px) {
            .site-container {
                width: min(calc(100% - 32px), var(--container));
            }

            .section {
                padding: 64px 0;
            }

            .desktop-nav {
                display: none;
            }

            .mobile-toggle {
                display: block;
            }

            .mobile-menu.open {
                display: block;
            }

            .hero {
                padding: 52px 0 44px;
            }

            .hero-grid,
            .rank-layout,
            .cta-panel {
                grid-template-columns: 1fr;
            }

            .hero-board {
                max-width: 580px;
            }

            .metrics-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .metric.intro {
                grid-column: 1 / -1;
            }

            .matrix-grid {
                grid-template-columns: 1fr 1fr;
            }

            .matrix-card.large {
                grid-column: 1 / -1;
                grid-row: auto;
                min-height: 320px;
            }

            .comparison {
                grid-template-columns: 1fr;
            }

            .compare-arrow {
                width: 38px;
                height: 38px;
                justify-self: center;
                transform: rotate(90deg);
            }

            .section-heading {
                display: block;
                margin-bottom: 28px;
            }

            .section-heading h2 {
                margin-bottom: 10px;
            }

            .footer-grid {
                grid-template-columns: 1fr 1fr;
            }

            .footer-grid > :last-child {
                grid-column: auto;
            }
        }

        @media (max-width: 520px) {
            .site-container {
                width: min(calc(100% - 28px), var(--container));
            }

            .nav-wrap {
                min-height: 65px;
            }

            .brand {
                font-size: .96rem;
            }

            .brand-mark {
                width: 32px;
                height: 32px;
            }

            h1 {
                font-size: 2.15rem;
            }

            .hero-copy .lead {
                font-size: .97rem;
            }

            .hero-actions {
                display: grid;
                grid-template-columns: 1fr;
            }

            .hero-actions .button {
                width: 100%;
            }

            .hero-notes {
                display: grid;
                gap: 10px;
            }

            .board-feature {
                grid-template-columns: 92px 1fr;
                gap: 12px;
                padding: 13px;
            }

            .cover {
                min-height: 122px;
            }

            .board-links {
                grid-template-columns: 1fr;
            }

            .metrics-grid {
                grid-template-columns: 1fr 1fr;
            }

            .metric {
                padding: 14px;
            }

            .metric strong {
                font-size: 1.2rem;
            }

            .matrix-grid {
                grid-template-columns: 1fr;
            }

            .matrix-card,
            .matrix-card.large {
                min-height: 235px;
            }

            .compare-card {
                padding: 22px 18px;
            }

            .rank-head {
                display: none;
            }

            .rank-item {
                grid-template-columns: 34px 1fr 58px;
                padding: 14px;
            }

            .rank-item .rank-trend {
                display: none;
            }

            .rank-value {
                text-align: right;
            }

            .faq-item summary {
                padding: 16px;
                font-size: .91rem;
            }

            .faq-answer {
                padding: 0 16px 16px;
            }

            .cta-panel {
                padding: 27px 18px;
            }

            .form-card {
                padding: 18px;
            }

            .form-grid {
                grid-template-columns: 1fr;
            }

            .form-field.full {
                grid-column: auto;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: 28px;
            }

            .footer-bottom {
                display: block;
                line-height: 1.8;
            }
        }

/* roulang page: category1 */
:root{
 --primary:#8f315a;--primary-dark:#70213f;--primary-soft:#f7e9ef;
 --accent:#e98262;--accent-dark:#bd5d43;--accent-soft:#fff0e9;
 --ink:#281f25;--text:#463a41;--muted:#766a71;--surface:#fff;
 --surface-alt:#f8f5f6;--surface-warm:#fffaf7;--footer:#241a20;
 --border:#e7dde2;--border-strong:#d4c2ca;--success:#39755a;
 --success-soft:#e9f5ee;--warning:#a45d22;--radius-sm:10px;
 --radius:16px;--radius-lg:24px;--shadow-sm:0 8px 24px rgba(57,30,43,.06);
 --shadow:0 18px 50px rgba(57,30,43,.1);--container:1240px;--transition:180ms ease
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);background:var(--surface-alt);font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:var(--primary);text-decoration:none;transition:all var(--transition)}
a:hover{color:var(--primary-dark)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(233,130,98,.4);outline-offset:3px}
button,input,select,textarea{font:inherit}button{cursor:pointer}img{display:block;max-width:100%}
.site-container{width:min(calc(100% - 40px),var(--container));margin-inline:auto}
.site-header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);border-bottom:1px solid var(--border);box-shadow:0 4px 18px rgba(55,30,42,.045);backdrop-filter:blur(12px)}
.nav-wrap{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:850;letter-spacing:-.02em;white-space:nowrap}
.brand:hover{color:var(--primary)}
.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;color:#fff;background:var(--primary);font-weight:900;box-shadow:0 6px 14px rgba(143,49,90,.22)}
.desktop-nav{display:flex;align-items:center;gap:7px;margin-left:auto}
.desktop-nav>a,.menu-trigger{min-height:42px;padding:8px 14px;border:0;border-radius:9px;color:var(--text);background:transparent;font-weight:700}
.desktop-nav>a:hover,.desktop-nav>a.active,.menu-trigger:hover,.menu-trigger[aria-expanded=true]{color:var(--primary);background:var(--primary-soft)}
.mega-wrap{position:relative}.menu-trigger{font-size:.94rem}
.mega-panel{position:absolute;right:0;top:52px;display:grid;grid-template-columns:1.25fr 1fr;gap:22px;width:390px;padding:22px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(-6px);transition:all var(--transition)}
.mega-wrap:hover .mega-panel,.mega-wrap:focus-within .mega-panel,.mega-panel.is-open{opacity:1;visibility:visible;transform:none}
.mega-panel strong{display:block;color:var(--ink);margin-bottom:6px}.mega-panel p{margin:0 0 10px;color:var(--muted);font-size:.86rem;line-height:1.7}.mega-panel a{display:block;margin-top:7px;font-size:.88rem}
.mobile-toggle{display:none;width:44px;height:44px;border:1px solid var(--border);border-radius:10px;background:#fff}
.mobile-toggle span,.mobile-toggle span:before,.mobile-toggle span:after{display:block;width:19px;height:2px;margin:auto;background:var(--primary);content:"";transition:all var(--transition)}
.mobile-toggle span:before{transform:translateY(-6px)}.mobile-toggle span:after{transform:translateY(4px)}
.mobile-menu{display:none}
.section{padding:82px 0;scroll-margin-top:92px}.section-white{background:#fff}.section-warm{background:var(--surface-warm)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:12px;color:var(--primary);font-size:.82rem;font-weight:850;letter-spacing:.08em}
.eyebrow:before{width:22px;height:3px;border-radius:8px;background:var(--accent);content:""}
h1,h2,h3{margin:0;color:var(--ink);line-height:1.25;letter-spacing:-.035em}h1{font-size:clamp(2.2rem,5vw,4.1rem)}h2{font-size:clamp(1.7rem,3vw,2.45rem)}h3{font-size:1.18rem}
p{margin:0 0 1em}.hero{padding:62px 0 68px;background:linear-gradient(135deg,#fffaf7 0%,#f7e9ef 100%);border-bottom:1px solid var(--border)}
.breadcrumb{display:flex;gap:8px;align-items:center;margin-bottom:28px;color:var(--muted);font-size:.88rem}.breadcrumb a{color:var(--primary)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:55px;align-items:center}
.hero-copy{max-width:740px}.hero-copy h1{margin-bottom:20px}.hero-copy>p{max-width:680px;color:var(--muted);font-size:1.08rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:11px 21px;border:1px solid transparent;border-radius:11px;font-size:.94rem;font-weight:750;line-height:1.4;transition:all var(--transition)}
.button.primary{color:#fff;background:var(--primary);box-shadow:0 8px 18px rgba(143,49,90,.19)}.button.primary:hover{color:#fff;background:var(--primary-dark);transform:translateY(-2px)}
.button.secondary{color:var(--primary);background:#fff;border-color:var(--border-strong)}.button.secondary:hover{color:var(--primary-dark);background:var(--primary-soft);border-color:var(--primary);transform:translateY(-2px)}
.button.small{min-height:38px;padding:8px 14px;font-size:.84rem}.button:active{transform:translateY(0)}.button[disabled]{opacity:.5;cursor:not-allowed}
.badge,.tag{display:inline-flex;align-items:center;justify-content:center;min-height:28px;padding:3px 10px;border:1px solid transparent;border-radius:999px;font-size:.76rem;line-height:1.4;white-space:nowrap}
.badge{color:var(--primary);background:var(--primary-soft);border-color:#efd5df}.badge.accent{color:var(--accent-dark);background:var(--accent-soft);border-color:#f4d4c6}.badge.success{color:var(--success);background:var(--success-soft);border-color:#cde8d8}.tag{color:var(--muted);background:#fff;border-color:var(--border)}
.channel-panel{padding:25px;border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow)}
.panel-top{display:flex;justify-content:space-between;gap:15px;align-items:center;margin-bottom:22px}.panel-top strong{color:var(--ink)}
.signal{display:flex;align-items:center;gap:7px;color:var(--success);font-size:.82rem}.signal i{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 5px var(--success-soft)}
.index-row{display:grid;grid-template-columns:38px 1fr auto;gap:13px;align-items:center;padding:16px 0;border-top:1px solid var(--border)}.index-row:first-of-type{border-top:0}.index-no{color:var(--accent-dark);font-weight:900}.index-row strong{display:block;color:var(--ink);font-size:.96rem}.index-row small{display:block;color:var(--muted);font-size:.78rem}
.filter-shell{padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;box-shadow:var(--shadow-sm)}
.filter-bar{display:grid;grid-template-columns:1fr 190px auto;gap:12px;align-items:center}.field{width:100%;height:46px;padding:8px 13px;border:1px solid var(--border-strong);border-radius:10px;color:var(--text);background:#fff}.field:hover{border-color:var(--primary)}.field:disabled{background:var(--surface-alt);cursor:not-allowed}
.filter-tags{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}.filter-tag{padding:7px 13px;border:1px solid var(--border);border-radius:9px;color:var(--muted);background:#fff;font-size:.86rem;cursor:pointer}.filter-tag:hover,.filter-tag.active{color:var(--primary);border-color:var(--primary);background:var(--primary-soft)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:34px}.section-heading p{margin:0;color:var(--muted);font-size:1rem}
.content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:28px}.feed-list{display:grid;gap:14px}
.feed-item{display:grid;grid-template-columns:116px 1fr auto;gap:20px;align-items:center;padding:18px;border:1px solid var(--border);border-radius:var(--radius);background:#fff;transition:all var(--transition)}
.feed-item:hover{border-color:#d9a8bb;box-shadow:var(--shadow-sm);transform:translateY(-2px)}.feed-item.is-hidden{display:none}
.cover{height:112px;border-radius:12px;background:linear-gradient(145deg,#8f315a,#e98262);position:relative;overflow:hidden}.cover:after{position:absolute;inset:25% -15% -30% 35%;border:1px solid rgba(255,255,255,.45);border-radius:50%;content:"";transform:rotate(-22deg)}.cover.alt{background:linear-gradient(145deg,#563b5b,#d18b78)}.cover.soft{background:linear-gradient(145deg,#af5876,#f1bd91)}
.feed-main h3{margin:8px 0 7px;font-size:1.13rem}.feed-main p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.7}.feed-meta{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:.78rem}.feed-action{white-space:nowrap}
.side-card{padding:22px;border:1px solid var(--border);border-radius:var(--radius);background:#fff}.side-card+.side-card{margin-top:16px}.side-card h3{margin-bottom:12px}.side-card p{color:var(--muted);font-size:.9rem}.rank-list{margin:0;padding:0;list-style:none}.rank-list li{display:flex;gap:11px;padding:12px 0;border-top:1px solid var(--border);font-size:.88rem}.rank-list li:first-child{border-top:0}.rank-list b{color:var(--accent-dark)}
.notice{display:flex;gap:15px;padding:18px 20px;border-left:4px solid var(--accent);border-radius:0 var(--radius-sm) var(--radius-sm) 0;background:var(--accent-soft);color:var(--text)}.notice strong{color:var(--ink)}
.faq-list{max-width:900px;margin:0 auto}.faq-item{border-bottom:1px solid var(--border)}.faq-item summary{padding:19px 38px 19px 0;color:var(--ink);font-weight:800;cursor:pointer;list-style:none;position:relative}.faq-item summary::-webkit-details-marker{display:none}.faq-item summary:after{position:absolute;right:4px;top:18px;color:var(--primary);font-size:1.4rem;content:"+"}.faq-item[open] summary:after{content:"−"}.faq-answer{padding:0 38px 19px 0;color:var(--muted);font-size:.94rem}
.cta{padding:64px 0;background:var(--primary);color:#fff}.cta-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{color:#fff;margin-bottom:10px}.cta p{max-width:680px;margin:0;color:#f5dfe8}.cta .button.secondary{border-color:#f3c8d8}
.site-footer{padding:58px 0 22px;color:#d8c8cf;background:var(--footer)}.footer-grid{display:grid;grid-template-columns:1.5fr .8fr .8fr 1.2fr;gap:35px}.site-footer .brand{color:#fff}.site-footer .brand-mark{background:var(--accent)}.footer-intro{max-width:380px;margin:18px 0 0;color:#bcaab2;font-size:.88rem}.footer-title{margin-bottom:12px;color:#fff;font-weight:800}.footer-links{margin:0;padding:0;list-style:none}.footer-links li{margin:7px 0}.footer-links a{color:#cdbbc4;font-size:.88rem}.footer-links a:hover{color:#fff}.compliance-box{padding:14px;border:1px solid rgba(255,255,255,.13);border-radius:10px;color:#c4b2ba;font-size:.82rem;line-height:1.7}.footer-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:#a9949e;font-size:.78rem}.footer-bottom a{color:#cdbbc4}
@media(max-width:900px){.desktop-nav{display:none}.mobile-toggle{display:block}.mobile-menu{display:none;padding:10px 20px 18px;border-top:1px solid var(--border);background:#fff}.mobile-menu.is-open{display:grid}.mobile-menu a{padding:11px 0;border-bottom:1px solid var(--border);font-weight:700}.hero-grid{grid-template-columns:1fr;gap:30px}.content-layout{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr 1fr}.cta-grid{align-items:flex-start;flex-direction:column}.filter-bar{grid-template-columns:1fr 1fr}.filter-bar .button{grid-column:span 2}}
@media(max-width:600px){.site-container{width:min(calc(100% - 28px),var(--container))}.section{padding:58px 0}.hero{padding:38px 0 48px}h1{font-size:2.25rem}.section-heading{display:block}.section-heading p{margin-top:12px}.filter-bar{grid-template-columns:1fr}.filter-bar .button{grid-column:auto}.filter-tags{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}.feed-item{grid-template-columns:76px 1fr;gap:13px}.cover{height:86px}.feed-action{grid-column:2;justify-self:start}.mega-panel{display:none}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:block}.footer-bottom span{display:block;margin-top:8px}.hero-actions .button{width:100%}}