/* roulang page: index */
:root {
            --primary: #76506f;
            --primary-deep: #54364f;
            --primary-soft: #eee4ec;
            --plum: #392f39;
            --coral: #c97b72;
            --amber: #d39a58;
            --paper: #f7f1e8;
            --paper-deep: #eee5da;
            --surface: #fffaf4;
            --surface-purple: #f5eff5;
            --text: #322d31;
            --muted: #756a72;
            --line: #d9ced5;
            --line-light: #e9e0e5;
            --white: #ffffff;
            --success: #657d68;
            --radius-sm: 9px;
            --radius: 16px;
            --radius-lg: 24px;
            --shadow-sm: 0 7px 22px rgba(72, 50, 66, .07);
            --shadow: 0 18px 48px rgba(72, 50, 66, .11);
            --transition: 190ms ease;
            --container: 1200px;
        }

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

        html {
            scroll-behavior: smooth;
            scroll-padding-top: 142px;
        }

        body {
            margin: 0;
            overflow-x: hidden;
            color: var(--text);
            background:
                radial-gradient(circle at 8% 12%, rgba(197, 158, 190, .13), transparent 25rem),
                linear-gradient(180deg, var(--paper) 0%, #faf6f0 48%, #f4ede5 100%);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body.menu-open {
            overflow: hidden;
        }

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

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

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

        button {
            cursor: pointer;
        }

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

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

        h1, h2, h3 {
            color: var(--plum);
            font-weight: 760;
            letter-spacing: -.025em;
            line-height: 1.25;
        }

        h1 {
            margin-bottom: 22px;
            font-size: clamp(2.35rem, 5vw, 4.8rem);
        }

        h2 {
            margin-bottom: 16px;
            font-size: clamp(1.8rem, 3.3vw, 3rem);
        }

        h3 {
            margin-bottom: 10px;
            font-size: 1.2rem;
        }

        p {
            color: var(--muted);
        }

        :focus-visible {
            outline: 3px solid rgba(201, 123, 114, .48);
            outline-offset: 3px;
        }

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

        .section {
            position: relative;
            padding: 104px 0;
        }

        .section-heading {
            max-width: 760px;
            margin-bottom: 42px;
        }

        .section-heading p {
            max-width: 680px;
            margin-bottom: 0;
            font-size: 1.03rem;
        }

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

        .eyebrow::before {
            width: 27px;
            height: 2px;
            content: "";
            background: var(--coral);
        }

        .tag {
            display: inline-flex;
            align-items: center;
            min-height: 28px;
            padding: 5px 10px;
            border: 1px solid rgba(118, 80, 111, .16);
            border-radius: 999px;
            color: var(--primary-deep);
            background: var(--primary-soft);
            font-size: .75rem;
            font-weight: 750;
            line-height: 1.2;
        }

        .tag.coral {
            color: #784943;
            border-color: rgba(201, 123, 114, .25);
            background: #f6e3df;
        }

        .tag.neutral {
            color: #665e62;
            border-color: var(--line);
            background: #f2ece6;
        }

        .button {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            margin: 0;
            padding: 13px 22px;
            border: 1px solid transparent;
            border-radius: 11px;
            color: var(--white);
            background: var(--primary);
            font-weight: 760;
            line-height: 1.2;
            box-shadow: 0 8px 19px rgba(84, 54, 79, .16);
            transition: color var(--transition), background var(--transition), border var(--transition), transform var(--transition), box-shadow var(--transition);
        }

        .button:hover, .button:focus {
            color: var(--white);
            background: var(--primary-deep);
            box-shadow: 0 11px 24px rgba(84, 54, 79, .22);
            transform: translateY(-2px);
        }

        .button:active {
            transform: translateY(0);
            box-shadow: 0 4px 12px rgba(84, 54, 79, .15);
        }

        .button.hollow {
            color: var(--primary-deep);
            border-color: rgba(84, 54, 79, .32);
            background: rgba(255, 250, 244, .72);
            box-shadow: none;
        }

        .button.hollow:hover, .button.hollow:focus {
            color: var(--primary-deep);
            border-color: var(--primary);
            background: var(--white);
        }

        .button.light {
            color: var(--primary-deep);
            background: var(--surface);
        }

        .button.light:hover, .button.light:focus {
            color: var(--primary-deep);
            background: var(--white);
        }

        .button[disabled] {
            cursor: not-allowed;
            opacity: .48;
            transform: none;
        }

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            font-weight: 750;
        }

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

        .text-link:hover::after {
            transform: translateX(4px);
        }

        .site-header {
            position: sticky;
            z-index: 1000;
            top: 0;
            border-bottom: 1px solid rgba(118, 80, 111, .13);
            background: rgba(250, 246, 240, .96);
            box-shadow: 0 4px 18px rgba(63, 45, 59, .05);
            backdrop-filter: blur(12px);
        }

        .top-nav {
            min-height: 74px;
        }

        .nav-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 74px;
            gap: 28px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            flex: 0 1 auto;
            gap: 12px;
            color: var(--plum);
            font-size: 1rem;
            font-weight: 850;
            letter-spacing: -.02em;
        }

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

        .brand-mark {
            position: relative;
            width: 38px;
            height: 38px;
            flex: 0 0 38px;
            border-radius: 13px 13px 13px 5px;
            background: linear-gradient(145deg, var(--primary), #aa7c9f);
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.28);
        }

        .brand-mark::before, .brand-mark::after {
            position: absolute;
            content: "";
            border-radius: 50%;
            background: rgba(255,255,255,.72);
        }

        .brand-mark::before {
            top: 8px;
            left: 10px;
            width: 7px;
            height: 7px;
            box-shadow: 12px 6px 0 rgba(255,255,255,.4);
        }

        .brand-mark::after {
            right: 9px;
            bottom: 8px;
            width: 10px;
            height: 3px;
            border-radius: 5px;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0;
            list-style: none;
        }

        .desktop-nav a {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding: 9px 16px;
            border-radius: 10px;
            color: var(--muted);
            font-size: .94rem;
            font-weight: 740;
        }

        .desktop-nav a:hover {
            color: var(--primary-deep);
            background: var(--primary-soft);
        }

        .desktop-nav a.active {
            color: var(--white);
            background: var(--primary);
        }

        .mobile-toggle {
            display: none;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid var(--line);
            border-radius: 10px;
            color: var(--plum);
            background: var(--surface);
        }

        .mobile-toggle span,
        .mobile-toggle::before,
        .mobile-toggle::after {
            display: block;
            width: 19px;
            height: 2px;
            margin: 4px auto;
            content: "";
            background: currentColor;
            transition: transform var(--transition), opacity var(--transition);
        }

        .mobile-nav {
            display: none;
            padding: 0 20px 18px;
        }

        .mobile-nav a {
            display: block;
            padding: 12px 14px;
            border-radius: 9px;
            color: var(--muted);
            font-weight: 750;
        }

        .mobile-nav a.active {
            color: var(--white);
            background: var(--primary);
        }

        .progress-shell {
            border-top: 1px solid rgba(118, 80, 111, .08);
            background: rgba(247, 241, 232, .88);
        }

        .progress-nav {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            margin: 0;
            padding: 11px 0 13px;
            list-style: none;
        }

        .progress-step {
            position: relative;
        }

        .progress-step:not(:last-child)::after {
            position: absolute;
            z-index: 0;
            top: 16px;
            right: -18%;
            width: 36%;
            height: 1px;
            content: "";
            background: var(--line);
        }

        .progress-step a {
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            min-height: 34px;
            color: var(--muted);
            font-size: .78rem;
            font-weight: 740;
            white-space: nowrap;
        }

        .step-number {
            display: inline-grid;
            width: 27px;
            height: 27px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 50%;
            color: var(--muted);
            background: var(--paper);
            font-size: .7rem;
        }

        .progress-step.current a,
        .progress-step a:hover {
            color: var(--primary-deep);
        }

        .progress-step.current .step-number {
            color: var(--white);
            border-color: var(--primary);
            background: var(--primary);
            box-shadow: 0 0 0 4px rgba(118, 80, 111, .1);
        }

        .hero {
            position: relative;
            min-height: 660px;
            overflow: hidden;
            padding: 76px 0 54px;
            background:
                linear-gradient(105deg, rgba(53, 43, 52, .94) 0%, rgba(86, 55, 80, .91) 48%, rgba(130, 86, 116, .76) 100%),
                repeating-linear-gradient(90deg, transparent 0, transparent 74px, rgba(255,255,255,.035) 75px);
        }

        .hero::before {
            position: absolute;
            top: -150px;
            right: -80px;
            width: 560px;
            height: 560px;
            content: "";
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 46% 54% 62% 38%;
            transform: rotate(18deg);
        }

        .hero::after {
            position: absolute;
            right: 12%;
            bottom: -260px;
            width: 520px;
            height: 520px;
            content: "";
            border-radius: 50%;
            background: radial-gradient(circle, rgba(222, 176, 188, .25), transparent 67%);
        }

        .hero-stage {
            position: relative;
            z-index: 2;
        }

        .hero-copy {
            max-width: 950px;
            padding-top: 25px;
        }

        .hero .eyebrow {
            color: #f1dfe9;
        }

        .hero .eyebrow::before {
            background: #e7aa9f;
        }

        .hero h1 {
            max-width: 950px;
            color: var(--white);
        }

        .hero-intro {
            max-width: 790px;
            margin-bottom: 30px;
            color: rgba(255,255,255,.79);
            font-size: clamp(1rem, 1.7vw, 1.15rem);
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 13px;
            margin-bottom: 44px;
        }

        .hero .button {
            background: #df9c91;
            box-shadow: 0 10px 26px rgba(28, 18, 27, .2);
        }

        .hero .button:hover {
            background: #edb0a6;
        }

        .hero .button.hollow {
            color: var(--white);
            border-color: rgba(255,255,255,.38);
            background: rgba(255,255,255,.07);
        }

        .hero .button.hollow:hover {
            border-color: rgba(255,255,255,.75);
            background: rgba(255,255,255,.13);
        }

        .event-strip {
            display: grid;
            grid-template-columns: 1.45fr repeat(3, minmax(110px, .55fr));
            max-width: 870px;
            overflow: hidden;
            border: 1px solid rgba(255,255,255,.17);
            border-radius: var(--radius);
            background: rgba(28, 22, 28, .32);
            box-shadow: 0 17px 36px rgba(21, 14, 20, .14);
        }

        .event-label, .count-unit {
            min-height: 78px;
            padding: 14px 18px;
        }

        .event-label {
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .event-label strong {
            color: var(--white);
            font-size: .95rem;
        }

        .event-label span {
            color: rgba(255,255,255,.6);
            font-size: .78rem;
        }

        .count-unit {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            border-left: 1px solid rgba(255,255,255,.12);
            color: rgba(255,255,255,.65);
            font-size: .74rem;
        }

        .count-unit strong {
            color: var(--white);
            font-size: 1.35rem;
            font-variant-numeric: tabular-nums;
        }

        .floating-index {
            position: absolute;
            right: 0;
            bottom: -18px;
            width: 310px;
            padding: 22px;
            border: 1px solid rgba(255,255,255,.18);
            border-radius: 18px;
            background: #f3e9ed;
            box-shadow: var(--shadow);
            transform: rotate(-1.5deg);
        }

        .floating-index::before {
            position: absolute;
            top: 0;
            right: 25px;
            width: 42px;
            height: 8px;
            content: "";
            background: var(--coral);
        }

        .floating-index .index-kicker {
            margin-bottom: 15px;
            color: var(--primary);
            font-size: .73rem;
            font-weight: 850;
            letter-spacing: .12em;
        }

        .floating-index ul {
            margin: 0;
            list-style: none;
        }

        .floating-index li {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-top: 1px solid rgba(118,80,111,.14);
            color: var(--plum);
            font-size: .84rem;
            font-weight: 710;
        }

        .floating-index li span {
            color: var(--coral);
            font-size: .72rem;
        }

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

        .problem-layout {
            align-items: stretch;
        }

        .problem-lead {
            height: 100%;
            min-height: 390px;
            padding: 39px;
            border-radius: var(--radius-lg);
            background:
                linear-gradient(145deg, rgba(118,80,111,.96), rgba(83,55,78,.97)),
                var(--primary);
            box-shadow: var(--shadow);
        }

        .problem-lead h2,
        .problem-lead p {
            color: var(--white);
        }

        .problem-lead p {
            color: rgba(255,255,255,.71);
        }

        .problem-lead .large-index {
            display: block;
            margin-top: 48px;
            color: rgba(255,255,255,.16);
            font-size: 7rem;
            font-weight: 850;
            line-height: .8;
        }

        .problem-list {
            display: grid;
            gap: 14px;
            height: 100%;
        }

        .problem-row {
            display: grid;
            grid-template-columns: 58px 1fr auto;
            align-items: center;
            gap: 18px;
            min-height: 112px;
            padding: 22px 24px;
            border: 1px solid var(--line-light);
            border-radius: var(--radius);
            background: rgba(255,250,244,.86);
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }

        .problem-row:hover {
            border-color: rgba(118,80,111,.34);
            box-shadow: var(--shadow);
            transform: translateX(4px);
        }

        .problem-number {
            display: grid;
            width: 48px;
            height: 48px;
            place-items: center;
            border-radius: 12px;
            color: var(--primary);
            background: var(--primary-soft);
            font-size: .82rem;
            font-weight: 850;
        }

        .problem-row h3 {
            margin-bottom: 4px;
        }

        .problem-row p {
            margin-bottom: 0;
            font-size: .9rem;
            line-height: 1.6;
        }

        .problem-arrow {
            color: var(--coral);
            font-size: 1.3rem;
        }

        .solution-section {
            overflow: hidden;
        }

        .solution-section::before {
            position: absolute;
            top: 115px;
            left: 0;
            width: 31%;
            height: 340px;
            content: "";
            border-radius: 0 30px 30px 0;
            background: var(--paper-deep);
        }

        .solution-board {
            position: relative;
            z-index: 1;
            display: grid;
            grid-template-columns: minmax(250px, .72fr) 1.5fr;
            gap: 46px;
            align-items: start;
        }

        .solution-aside {
            position: sticky;
            top: 160px;
            padding: 31px;
            border: 1px solid rgba(118,80,111,.13);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
        }

        .solution-aside h2 {
            font-size: 2rem;
        }

        .solution-aside p {
            font-size: .95rem;
        }

        .filter-stack {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-top: 24px;
        }

        .filter-button {
            min-height: 38px;
            padding: 8px 13px;
            border: 1px solid var(--line);
            border-radius: 999px;
            color: var(--muted);
            background: transparent;
            font-size: .8rem;
            font-weight: 740;
            transition: all var(--transition);
        }

        .filter-button:hover,
        .filter-button.active {
            color: var(--white);
            border-color: var(--primary);
            background: var(--primary);
        }

        .solution-steps {
            position: relative;
            display: grid;
            gap: 20px;
        }

        .solution-steps::before {
            position: absolute;
            top: 30px;
            bottom: 30px;
            left: 35px;
            width: 1px;
            content: "";
            background: var(--line);
        }

        .solution-card {
            position: relative;
            display: grid;
            grid-template-columns: 72px 1fr;
            gap: 24px;
            padding: 27px;
            border: 1px solid var(--line-light);
            border-radius: var(--radius);
            background: rgba(255,250,244,.92);
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition), box-shadow var(--transition);
        }

        .solution-card:nth-child(even) {
            margin-left: 44px;
            background: #f6eff3;
        }

        .solution-card:hover {
            box-shadow: var(--shadow);
            transform: translateY(-3px);
        }

        .solution-index {
            position: relative;
            z-index: 1;
            display: grid;
            width: 70px;
            height: 70px;
            place-items: center;
            border: 7px solid var(--paper);
            border-radius: 50%;
            color: var(--white);
            background: var(--primary);
            font-size: 1rem;
            font-weight: 850;
        }

        .solution-card p {
            max-width: 560px;
            margin-bottom: 13px;
            font-size: .91rem;
        }

        .result-section {
            color: var(--white);
            background: var(--plum);
        }

        .result-section h2,
        .result-section h3 {
            color: var(--white);
        }

        .result-section .section-heading p {
            color: rgba(255,255,255,.66);
        }

        .result-section .eyebrow {
            color: #ddb6d0;
        }

        .metric-band {
            display: grid;
            grid-template-columns: 1.25fr repeat(3, 1fr);
            overflow: hidden;
            margin-bottom: 44px;
            border: 1px solid rgba(255,255,255,.13);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,.035);
        }

        .metric-intro, .metric {
            min-height: 156px;
            padding: 28px;
        }

        .metric-intro {
            display: flex;
            flex-direction: column;
            justify-content: center;
            background: var(--primary);
        }

        .metric-intro strong {
            margin-bottom: 7px;
            font-size: 1.25rem;
        }

        .metric-intro span {
            color: rgba(255,255,255,.67);
            font-size: .88rem;
        }

        .metric {
            border-left: 1px solid rgba(255,255,255,.11);
        }

        .metric b {
            display: block;
            margin-bottom: 12px;
            color: #e9c6bf;
            font-size: 2rem;
            line-height: 1;
        }

        .metric strong {
            display: block;
            margin-bottom: 5px;
            color: var(--white);
        }

        .metric span {
            color: rgba(255,255,255,.55);
            font-size: .8rem;
        }

        .content-wall {
            align-items: stretch;
        }

        .news-panel, .recommend-panel {
            height: 100%;
            padding: 30px;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,.045);
        }

        .panel-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            gap: 15px;
            margin-bottom: 20px;
        }

        .panel-head h3 {
            margin-bottom: 0;
        }

        .panel-head span {
            color: rgba(255,255,255,.48);
            font-size: .76rem;
        }

        .news-list {
            margin: 0;
            list-style: none;
        }

        .news-item {
            display: grid;
            grid-template-columns: 76px 1fr auto;
            align-items: center;
            gap: 16px;
            padding: 17px 0;
            border-top: 1px solid rgba(255,255,255,.1);
        }

        .news-item:first-child {
            border-top: 0;
        }

        .news-date {
            color: #d7a89f;
            font-size: .76rem;
            font-weight: 800;
        }

        .news-item a {
            color: rgba(255,255,255,.89);
            font-weight: 730;
        }

        .news-item a:hover {
            color: #f2cbc3;
        }

        .news-item small {
            color: rgba(255,255,255,.42);
        }

        .recommend-feature {
            position: relative;
            min-height: 226px;
            padding: 26px;
            overflow: hidden;
            border-radius: var(--radius);
            background: linear-gradient(135deg, #835877, #a8748f);
        }

        .recommend-feature::after {
            position: absolute;
            right: -58px;
            bottom: -72px;
            width: 210px;
            height: 210px;
            content: "";
            border: 1px solid rgba(255,255,255,.25);
            border-radius: 50%;
            box-shadow: 0 0 0 34px rgba(255,255,255,.04);
        }

        .recommend-feature h3 {
            max-width: 300px;
            margin-top: 23px;
            font-size: 1.55rem;
        }

        .recommend-feature p {
            max-width: 340px;
            color: rgba(255,255,255,.67);
            font-size: .9rem;
        }

        .recommend-feature .text-link {
            position: relative;
            z-index: 2;
            color: var(--white);
        }

        .feedback-section {
            background: var(--paper-deep);
        }

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

        .quote-card {
            position: relative;
            padding: 33px;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
        }

        .quote-card.main {
            min-height: 320px;
            padding: 45px;
        }

        .quote-mark {
            color: rgba(118,80,111,.18);
            font-size: 5rem;
            font-weight: 850;
            line-height: .7;
        }

        .quote-card blockquote {
            margin: 30px 0;
            padding: 0;
            border: 0;
            color: var(--plum);
            font-size: 1.15rem;
            line-height: 1.8;
        }

        .quote-card.main blockquote {
            max-width: 650px;
            font-size: 1.35rem;
        }

        .quote-user {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .quote-avatar {
            display: grid;
            width: 39px;
            height: 39px;
            place-items: center;
            border-radius: 50%;
            color: var(--white);
            background: var(--primary);
            font-size: .76rem;
            font-weight: 800;
        }

        .quote-user strong {
            display: block;
            color: var(--plum);
            font-size: .86rem;
        }

        .quote-user span {
            color: var(--muted);
            font-size: .73rem;
        }

        .small-quotes {
            display: grid;
            gap: 22px;
        }

        .small-quotes .quote-card {
            padding: 27px;
        }

        .small-quotes blockquote {
            margin: 18px 0 24px;
            font-size: .92rem;
        }

        .cta-section {
            padding: 80px 0;
            background: linear-gradient(115deg, #6f4b69 0%, #8c5f80 65%, #a86f78 100%);
        }

        .cta-panel {
            position: relative;
            display: grid;
            grid-template-columns: 1.35fr auto;
            align-items: center;
            gap: 50px;
            overflow: hidden;
            padding: 52px;
            border: 1px solid rgba(255,255,255,.17);
            border-radius: var(--radius-lg);
            background: rgba(255,255,255,.07);
        }

        .cta-panel::before {
            position: absolute;
            top: -72px;
            right: 21%;
            width: 180px;
            height: 180px;
            content: "";
            border: 1px solid rgba(255,255,255,.16);
            transform: rotate(34deg);
        }

        .cta-copy {
            position: relative;
            z-index: 1;
        }

        .cta-copy h2 {
            color: var(--white);
        }

        .cta-copy p {
            max-width: 650px;
            margin-bottom: 0;
            color: rgba(255,255,255,.72);
        }

        .cta-actions {
            position: relative;
            z-index: 1;
            display: flex;
            flex-direction: column;
            gap: 11px;
            min-width: 188px;
        }

        .share-status {
            min-height: 23px;
            margin: 8px 0 0;
            color: rgba(255,255,255,.75);
            font-size: .78rem;
            text-align: center;
        }

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

        .faq-layout {
            display: grid;
            grid-template-columns: .72fr 1.4fr;
            gap: 55px;
            align-items: start;
        }

        .faq-intro {
            position: sticky;
            top: 155px;
        }

        .faq-intro p {
            max-width: 390px;
        }

        .accordion {
            margin: 0;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
        }

        .accordion-item {
            border-bottom: 1px solid var(--line-light);
        }

        .accordion-item:last-child {
            border-bottom: 0;
        }

        .accordion-title {
            position: relative;
            display: flex;
            align-items: center;
            min-height: 72px;
            padding: 20px 60px 20px 24px;
            border: 0;
            color: var(--plum);
            background: transparent;
            font-size: .98rem;
            font-weight: 780;
            line-height: 1.55;
        }

        .accordion-title::before {
            right: 24px;
            margin-top: -12px;
            color: var(--primary);
            font-size: 1.5rem;
        }

        .accordion-title:hover,
        .accordion-title:focus {
            color: var(--primary-deep);
            background: var(--primary-soft);
        }

        .is-active > .accordion-title {
            color: var(--primary-deep);
            background: #f3eaf1;
        }

        .accordion-content {
            padding: 4px 24px 24px;
            border: 0;
            color: var(--muted);
            background: var(--surface);
            font-size: .92rem;
            line-height: 1.8;
        }

        .site-footer {
            padding: 65px 0 28px;
            color: rgba(255,255,255,.67);
            background: #342b34;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1.25fr .75fr;
            gap: 70px;
            padding-bottom: 42px;
        }

        .footer-brand {
            color: var(--white);
        }

        .footer-brand:hover {
            color: #e7c4dc;
        }

        .footer-about {
            max-width: 520px;
            margin: 20px 0 0;
            color: rgba(255,255,255,.56);
            font-size: .9rem;
        }

        .footer-links {
            display: flex;
            justify-content: flex-end;
            gap: 12px;
            flex-wrap: wrap;
        }

        .footer-links a {
            display: inline-flex;
            align-items: center;
            min-height: 42px;
            padding: 8px 13px;
            border: 1px solid rgba(255,255,255,.11);
            border-radius: 9px;
            color: rgba(255,255,255,.72);
            font-size: .84rem;
        }

        .footer-links a:hover {
            color: var(--white);
            border-color: rgba(255,255,255,.32);
            background: rgba(255,255,255,.06);
        }

        .footer-bottom {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 20px;
            padding-top: 25px;
            border-top: 1px solid rgba(255,255,255,.1);
            font-size: .76rem;
        }

        .footer-bottom p {
            margin: 0;
            color: rgba(255,255,255,.45);
        }

        .back-top {
            color: rgba(255,255,255,.66);
            font-weight: 750;
        }

        .back-top:hover {
            color: var(--white);
        }

        .noscript-note {
            padding: 10px 20px;
            color: #66453f;
            background: #f3dcd5;
            text-align: center;
            font-size: .85rem;
        }

        @media screen and (max-width: 1024px) {
            .section {
                padding: 82px 0;
            }

            .floating-index {
                position: relative;
                right: auto;
                bottom: auto;
                width: min(100%, 560px);
                margin-top: 32px;
                transform: none;
            }

            .hero {
                min-height: auto;
            }

            .problem-lead {
                min-height: 100%;
            }

            .solution-board {
                grid-template-columns: .78fr 1.35fr;
                gap: 28px;
            }

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

            .metric:nth-child(3) {
                border-left: 0;
                border-top: 1px solid rgba(255,255,255,.11);
            }

            .metric:nth-child(4) {
                border-top: 1px solid rgba(255,255,255,.11);
            }

            .feedback-layout {
                grid-template-columns: 1.15fr .85fr;
            }

            .quote-card.main {
                padding: 34px;
            }
        }

        @media screen and (max-width: 768px) {
            html {
                scroll-padding-top: 124px;
            }

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

            .desktop-nav {
                display: none;
            }

            .mobile-toggle {
                display: block;
            }

            .mobile-nav.open {
                display: grid;
                gap: 5px;
            }

            .progress-shell {
                overflow-x: auto;
                scrollbar-width: thin;
            }

            .progress-nav {
                width: 660px;
                grid-template-columns: repeat(4, 165px);
            }

            .progress-step:not(:last-child)::after {
                right: -14%;
                width: 28%;
            }

            .hero {
                padding: 57px 0 48px;
            }

            .hero-copy {
                padding-top: 0;
            }

            .event-strip {
                grid-template-columns: 1fr repeat(3, .55fr);
            }

            .event-label, .count-unit {
                min-height: 72px;
                padding: 11px;
            }

            .event-label span {
                display: none;
            }

            .problem-lead {
                min-height: 280px;
                margin-bottom: 22px;
            }

            .problem-lead .large-index {
                margin-top: 30px;
                font-size: 5rem;
            }

            .solution-section::before {
                display: none;
            }

            .solution-board,
            .faq-layout {
                grid-template-columns: 1fr;
            }

            .solution-aside,
            .faq-intro {
                position: static;
            }

            .solution-card:nth-child(even) {
                margin-left: 0;
            }

            .feedback-layout {
                grid-template-columns: 1fr;
            }

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

            .cta-panel {
                grid-template-columns: 1fr;
                gap: 30px;
                padding: 39px 30px;
            }

            .cta-actions {
                flex-direction: row;
                min-width: 0;
            }

            .cta-actions .button {
                flex: 1;
            }

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

            .footer-links {
                justify-content: flex-start;
            }
        }

        @media screen and (max-width: 520px) {
            body {
                font-size: 15px;
            }

            .section {
                padding: 66px 0;
            }

            .brand {
                max-width: 245px;
                font-size: .9rem;
            }

            .brand-mark {
                width: 34px;
                height: 34px;
                flex-basis: 34px;
            }

            .hero h1 {
                font-size: 2.28rem;
            }

            .hero-actions,
            .cta-actions {
                flex-direction: column;
            }

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

            .event-strip {
                grid-template-columns: repeat(3, 1fr);
            }

            .event-label {
                grid-column: 1 / -1;
                min-height: 58px;
                border-bottom: 1px solid rgba(255,255,255,.12);
                text-align: center;
            }

            .count-unit:first-of-type {
                border-left: 0;
            }

            .problem-lead {
                padding: 29px;
            }

            .problem-row {
                grid-template-columns: 46px 1fr;
                gap: 13px;
                padding: 18px;
            }

            .problem-number {
                width: 42px;
                height: 42px;
            }

            .problem-arrow {
                display: none;
            }

            .solution-aside {
                padding: 25px;
            }

            .solution-card {
                grid-template-columns: 50px 1fr;
                gap: 15px;
                padding: 21px 18px;
            }

            .solution-steps::before {
                left: 25px;
            }

            .solution-index {
                width: 50px;
                height: 50px;
                border-width: 5px;
            }

            .metric-band {
                grid-template-columns: 1fr;
            }

            .metric, .metric-intro {
                min-height: 125px;
            }

            .metric {
                border-top: 1px solid rgba(255,255,255,.11);
                border-left: 0;
            }

            .news-panel, .recommend-panel {
                padding: 22px 18px;
            }

            .news-item {
                grid-template-columns: 62px 1fr;
            }

            .news-item small {
                display: none;
            }

            .small-quotes {
                grid-template-columns: 1fr;
            }

            .quote-card.main {
                min-height: 0;
                padding: 28px;
            }

            .quote-card.main blockquote {
                font-size: 1.08rem;
            }

            .cta-panel {
                padding: 31px 22px;
            }

            .accordion-title {
                min-height: 68px;
                padding: 17px 52px 17px 18px;
            }

            .accordion-title::before {
                right: 18px;
            }

            .accordion-content {
                padding: 4px 18px 21px;
            }

            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }

            *, *::before, *::after {
                transition-duration: .01ms !important;
                animation-duration: .01ms !important;
            }
        }

/* roulang page: category1 */
:root{
 --primary:#76506f;--primary-deep:#54364f;--primary-soft:#eee4ec;--plum:#392f39;
 --coral:#c97b72;--amber:#d39a58;--paper:#f7f1e8;--paper-deep:#eee5da;
 --surface:#fffaf4;--surface-purple:#f5eff5;--text:#322d31;--muted:#756a72;
 --line:#d9ced5;--line-light:#e9e0e5;--white:#fff;--success:#657d68;
 --radius-sm:9px;--radius:16px;--radius-lg:24px;
 --shadow-sm:0 7px 22px rgba(72,50,66,.07);--shadow:0 18px 48px rgba(72,50,66,.11);
 --transition:190ms ease;--container:1200px
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:142px}
body{margin:0;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 8% 12%,rgba(197,158,190,.13),transparent 25rem),linear-gradient(180deg,var(--paper),#faf6f0 48%,#f4ede5);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
body.menu-open{overflow:hidden}
a{color:var(--primary);text-decoration:none;transition:color var(--transition),background-color var(--transition),border-color var(--transition),transform var(--transition),box-shadow var(--transition)}
a:hover{color:var(--primary-deep)}
button,input,select,textarea{font:inherit}button{cursor:pointer}img,svg{display:block;max-width:100%}
.site-container{width:min(calc(100% - 40px),var(--container));margin:0 auto}
.section{position:relative;padding:94px 0}
.section-heading{max-width:760px;margin-bottom:40px}
.section-heading p{max-width:680px;margin-bottom:0;font-size:1.03rem;color:var(--muted)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;margin-bottom:14px;color:var(--primary);font-size:.82rem;font-weight:800;letter-spacing:.13em}
.eyebrow:before{width:27px;height:2px;content:"";background:var(--coral)}
h1,h2,h3,p{margin-top:0}h1,h2,h3{color:var(--plum);line-height:1.25;letter-spacing:-.025em}h1{font-size:clamp(2.25rem,5vw,4.5rem);margin-bottom:20px}h2{font-size:clamp(1.8rem,3vw,2.8rem);margin-bottom:15px}h3{font-size:1.18rem;margin-bottom:9px}
.tag{display:inline-flex;align-items:center;min-height:28px;padding:5px 10px;border:1px solid rgba(118,80,111,.16);border-radius:999px;color:var(--primary-deep);background:var(--primary-soft);font-size:.75rem;font-weight:750;line-height:1.2}
.tag.coral{color:#784943;border-color:rgba(201,123,114,.25);background:#f6e3df}.tag.neutral{color:#665e62;border-color:var(--line);background:#f2ece6}
.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;margin:0;padding:13px 22px;border:1px solid transparent;border-radius:11px;color:var(--white);background:var(--primary);font-weight:760;line-height:1.2;box-shadow:0 8px 19px rgba(84,54,79,.16);transition:all var(--transition)}
.button:hover,.button:focus{color:#fff;background:var(--primary-deep);box-shadow:0 11px 24px rgba(84,54,79,.22);transform:translateY(-2px)}
.button:active{transform:translateY(0);box-shadow:0 4px 12px rgba(84,54,79,.15)}
.button.hollow{color:var(--primary-deep);border-color:rgba(84,54,79,.32);background:rgba(255,250,244,.72);box-shadow:none}
.button.hollow:hover,.button.hollow:focus{color:var(--primary-deep);border-color:var(--primary);background:#fff}
.text-link{display:inline-flex;align-items:center;gap:7px;font-weight:750}.text-link:after{content:"→";transition:transform var(--transition)}.text-link:hover:after{transform:translateX(4px)}
.site-header{position:sticky;z-index:1000;top:0;border-bottom:1px solid rgba(118,80,111,.13);background:rgba(250,246,240,.96);box-shadow:0 4px 18px rgba(63,45,59,.05);backdrop-filter:blur(12px)}
.top-nav{min-height:74px}.nav-inner{display:flex;align-items:center;justify-content:space-between;min-height:74px;gap:28px}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--plum);font-size:1.05rem;font-weight:850;white-space:nowrap}.brand:hover{color:var(--primary)}
.brand-mark{position:relative;width:29px;height:29px;border-radius:9px 14px 9px 14px;background:linear-gradient(135deg,var(--primary),var(--coral));box-shadow:5px 5px 0 rgba(118,80,111,.12)}
.brand-mark:after{position:absolute;right:6px;bottom:6px;width:7px;height:7px;border:2px solid #fff;border-radius:50%;content:""}
.desktop-nav{display:flex;align-items:center;gap:8px;margin:0;padding:0;list-style:none}.desktop-nav a,.mobile-nav a{display:block;padding:9px 14px;border-radius:9px;color:var(--muted);font-size:.94rem;font-weight:700}
.desktop-nav a:hover,.desktop-nav a.active,.mobile-nav a:hover,.mobile-nav a.active{color:var(--primary-deep);background:var(--primary-soft)}
.mobile-toggle{display:none;width:44px;height:40px;border:1px solid var(--line);border-radius:9px;background:var(--surface)}.mobile-toggle span,.mobile-toggle span:before,.mobile-toggle span:after{display:block;width:19px;height:2px;margin:auto;background:var(--primary-deep);content:"";transition:all var(--transition)}.mobile-toggle span:before{transform:translateY(-6px)}.mobile-toggle span:after{transform:translateY(4px)}
.mobile-nav{display:none;padding:10px 20px 16px;border-top:1px solid var(--line-light)}.mobile-nav a{margin:3px 0}
.progress-shell{border-top:1px solid rgba(118,80,111,.08);background:rgba(247,241,232,.8)}.progress-nav{display:flex;align-items:center;margin:0;padding:12px 0;list-style:none}.progress-step{position:relative;flex:1}.progress-step:not(:last-child):after{position:absolute;top:18px;right:0;width:calc(100% - 82px);height:1px;background:var(--line);content:""}.progress-step a{position:relative;z-index:1;display:flex;align-items:center;gap:9px;width:max-content;color:var(--muted);font-size:.83rem;font-weight:750;background:var(--paper)}
.step-number{display:inline-grid;place-items:center;width:36px;height:36px;border:1px solid var(--line);border-radius:50%;background:var(--surface);font-size:.72rem;color:var(--muted)}.progress-step.current a{color:var(--primary-deep)}.progress-step.current .step-number{color:#fff;border-color:var(--primary);background:var(--primary);box-shadow:0 5px 12px rgba(84,54,79,.18)}
.category-hero{padding:76px 0 82px}.hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr);gap:70px;align-items:center}.hero-copy{max-width:700px}.hero-copy p{max-width:600px;color:var(--muted);font-size:1.08rem}.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:30px}
.profile-panel{position:relative;min-height:350px;padding:28px;border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);box-shadow:var(--shadow);overflow:hidden}.profile-panel:before{position:absolute;top:-75px;right:-60px;width:230px;height:230px;border-radius:50%;background:var(--primary-soft);content:""}.profile-top{position:relative;display:flex;align-items:center;gap:16px;margin-bottom:28px}.avatar{display:grid;place-items:center;width:70px;height:70px;border:7px solid #f6e8e3;border-radius:22px;color:#fff;background:linear-gradient(145deg,var(--primary),#a77a9a);font-size:1.45rem;font-weight:850}.profile-name{font-weight:850;color:var(--plum)}.profile-name small{display:block;color:var(--muted);font-size:.78rem;font-weight:600}.profile-note{position:relative;padding:17px 18px;border-left:3px solid var(--coral);background:var(--surface-purple);color:var(--muted);font-size:.92rem}.metric-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:22px}.metric{padding:14px 10px;border-top:1px solid var(--line);text-align:center}.metric strong{display:block;color:var(--primary-deep);font-size:1.35rem;line-height:1.2}.metric span{display:block;color:var(--muted);font-size:.74rem}
.section-tint{background:rgba(238,228,236,.48);border-top:1px solid rgba(118,80,111,.06);border-bottom:1px solid rgba(118,80,111,.06)}
.index-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:38px;align-items:start}.filter-panel{position:sticky;top:145px;padding:22px;border:1px solid var(--line);border-radius:var(--radius);background:rgba(255,250,244,.72)}.filter-panel h3{font-size:1rem}.filter-panel p{color:var(--muted);font-size:.84rem}.filter-buttons{display:flex;flex-direction:column;gap:8px}.filter-btn{padding:9px 11px;border:1px solid var(--line);border-radius:8px;color:var(--muted);background:transparent;text-align:left;font-size:.86rem;transition:all var(--transition)}.filter-btn:hover,.filter-btn.active,.filter-btn:focus{border-color:var(--primary);color:var(--primary-deep);background:var(--primary-soft)}
.topic-list{display:flex;flex-direction:column;gap:17px}.topic-card{display:grid;grid-template-columns:78px minmax(0,1fr) auto;gap:22px;align-items:center;padding:25px 27px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);box-shadow:var(--shadow-sm);transition:all var(--transition)}.topic-card:nth-child(even){margin-left:44px;background:#fcf7f1}.topic-card:hover{border-color:rgba(118,80,111,.42);box-shadow:var(--shadow);transform:translateY(-3px)}.topic-number{color:var(--coral);font-size:1.5rem;font-weight:850}.topic-card p{margin-bottom:9px;color:var(--muted);font-size:.91rem}.topic-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.76rem}.topic-card .text-link{white-space:nowrap}
.note-band{display:flex;justify-content:space-between;gap:30px;align-items:center;padding:26px 30px;border-radius:var(--radius);background:var(--plum);color:#f8eee8}.note-band h2{margin-bottom:6px;color:#fff;font-size:1.45rem}.note-band p{margin:0;color:#d8cbd3;font-size:.9rem}.note-mark{display:grid;place-items:center;min-width:68px;height:68px;border:1px solid rgba(255,255,255,.22);border-radius:20px;color:#fff;background:rgba(255,255,255,.08);font-size:1.5rem}
.faq-grid{display:grid;grid-template-columns:.75fr 1.25fr;gap:65px}.accordion{margin:0;border:0;background:transparent}.accordion-item{margin-bottom:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden}.accordion-title{padding:17px 48px 17px 20px;border:0;color:var(--plum);font-weight:780;background:transparent}.accordion-title:hover,.accordion-title:focus{color:var(--primary-deep);background:var(--primary-soft)}.accordion-content{border-top:1px solid var(--line-light);background:#fffaf5;color:var(--muted);font-size:.92rem}
.cta-section{padding:82px 0}.cta-box{display:flex;justify-content:space-between;align-items:center;gap:30px;padding:43px 48px;border-radius:var(--radius-lg);background:linear-gradient(120deg,var(--primary-deep),var(--primary));box-shadow:var(--shadow);color:#fff}.cta-box h2{margin-bottom:8px;color:#fff}.cta-box p{margin:0;color:#eadfe7}.cta-actions{display:flex;gap:12px;flex-wrap:wrap}.cta-box .button.light{white-space:nowrap}
.site-footer{padding:55px 0 24px;color:#d8cbd3;background:var(--plum)}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:60px;padding-bottom:38px}.footer-brand{color:#fff}.footer-about{max-width:510px;margin:18px 0 0;color:#bfb0bb;font-size:.9rem}.footer-links{display:flex;justify-content:flex-end;align-content:flex-start;gap:10px 22px;flex-wrap:wrap}.footer-links a{color:#d8cbd3;font-size:.88rem}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:21px;border-top:1px solid rgba(255,255,255,.14);color:#a99ba6;font-size:.78rem}.footer-bottom p{margin:0}.back-top{color:#e8dce5}.back-top:hover{color:#fff}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:35px}.hero-copy{max-width:760px}.index-layout{grid-template-columns:1fr}.filter-panel{position:static}.filter-buttons{flex-direction:row;flex-wrap:wrap}.filter-btn{flex:1 1 150px}.faq-grid{grid-template-columns:1fr;gap:25px}.cta-box{align-items:flex-start;flex-direction:column}}
@media(max-width:680px){.site-container{width:min(calc(100% - 28px),var(--container))}.desktop-nav{display:none}.mobile-toggle{display:block}.progress-nav{overflow-x:auto;gap:18px;padding:10px 0}.progress-step{min-width:145px;flex:none}.progress-step:not(:last-child):after{display:none}.progress-step a{background:transparent}.category-hero,.section{padding:65px 0}.hero-actions,.cta-actions{align-items:stretch;flex-direction:column}.hero-actions .button,.cta-actions .button{width:100%}.profile-panel{min-height:auto;padding:22px}.topic-card,.topic-card:nth-child(even){grid-template-columns:42px 1fr;margin-left:0;padding:20px;gap:13px}.topic-card .text-link{grid-column:2}.topic-number{font-size:1.15rem}.note-band{align-items:flex-start;padding:23px;flex-direction:column}.metric-row{gap:3px}.footer-grid{grid-template-columns:1fr;gap:25px}.footer-links{justify-content:flex-start}.footer-bottom{align-items:flex-start;flex-direction:column;gap:10px}.mobile-nav.is-open{display:block}}
@media(max-width:420px){h1{font-size:2.25rem}.section-heading{margin-bottom:28px}.filter-btn{flex-basis:100%}}
:focus-visible{outline:3px solid rgba(201,123,114,.6);outline-offset:3px}