/* roulang page: index */
:root {
            --primary: #b6534f;
            --primary-hover: #94413f;
            --primary-soft: #f7e5e0;
            --secondary: #7d927d;
            --secondary-soft: #e8eee6;
            --accent: #d79b63;
            --accent-soft: #f8ead9;
            --background: #fbf8f2;
            --surface: #ffffff;
            --surface-warm: #f5efe7;
            --text: #302d2a;
            --muted: #706b65;
            --border: #e5ddd3;
            --success: #56775c;
            --warning: #a56f35;
            --focus: #705c8b;
            --danger: #a74848;
            --radius-sm: 10px;
            --radius-md: 18px;
            --radius-lg: 28px;
            --shadow-sm: 0 8px 24px rgba(72, 55, 43, .07);
            --shadow-md: 0 18px 50px rgba(72, 55, 43, .12);
            --section-space: clamp(4rem, 8vw, 7rem);
            --transition: 180ms ease;
        }

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

        html {
            scroll-behavior: smooth;
            background: var(--background);
        }

        body {
            margin: 0;
            padding-bottom: 98px;
            overflow-x: hidden;
            color: var(--text);
            background:
                radial-gradient(circle at 8% 8%, rgba(215, 155, 99, .12), transparent 24rem),
                linear-gradient(180deg, #fffdf9 0%, var(--background) 38%, #f8f3ec 100%);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                         "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        body.bar-closed {
            padding-bottom: 0;
        }

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

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

        h1 {
            margin-bottom: 1.35rem;
            font-size: clamp(2.7rem, 6vw, 5.8rem);
            line-height: 1.06;
        }

        h2 {
            margin-bottom: .9rem;
            font-size: clamp(2rem, 4vw, 3.35rem);
            line-height: 1.15;
        }

        h3 {
            margin-bottom: .55rem;
            font-size: clamp(1.18rem, 2vw, 1.48rem);
            line-height: 1.35;
        }

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

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

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

        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible,
        summary:focus-visible {
            outline: 3px solid rgba(112, 92, 139, .36);
            outline-offset: 3px;
        }

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

        button {
            cursor: pointer;
        }

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

        .grid-container {
            max-width: 1220px;
            padding-right: clamp(1rem, 3vw, 2rem);
            padding-left: clamp(1rem, 3vw, 2rem);
        }

        .section {
            position: relative;
            padding: var(--section-space) 0;
        }

        .section-kicker {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            margin-bottom: 1rem;
            color: var(--primary);
            font-size: .84rem;
            font-weight: 760;
            letter-spacing: .08em;
        }

        .section-kicker::before {
            width: 1.8rem;
            height: 2px;
            background: currentColor;
            content: "";
        }

        .section-copy {
            max-width: 720px;
            margin-bottom: 2.25rem;
            font-size: 1.05rem;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: .55rem;
            padding: .42rem .8rem;
            border: 1px solid rgba(182, 83, 79, .2);
            border-radius: 999px;
            color: var(--primary);
            background: rgba(255, 255, 255, .72);
            font-size: .82rem;
            font-weight: 720;
        }

        .eyebrow-dot {
            width: .5rem;
            height: .5rem;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 0 5px rgba(86, 119, 92, .12);
        }

        .button,
        .button.primary-button,
        .button.secondary-button {
            min-height: 48px;
            margin: 0;
            padding: .88rem 1.35rem;
            border: 1px solid transparent;
            border-radius: 999px;
            font-weight: 760;
            line-height: 1.15;
            transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition);
        }

        .button.primary-button {
            color: #fff;
            background: var(--primary);
            box-shadow: 0 10px 24px rgba(182, 83, 79, .23);
        }

        .button.primary-button:hover,
        .button.primary-button:active {
            color: #fff;
            background: var(--primary-hover);
            transform: translateY(-2px);
        }

        .button.secondary-button {
            color: var(--text);
            border-color: var(--border);
            background: rgba(255, 255, 255, .82);
        }

        .button.secondary-button:hover {
            color: var(--primary);
            border-color: rgba(182, 83, 79, .45);
            background: #fff;
            transform: translateY(-2px);
        }

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

        .text-link {
            display: inline-flex;
            align-items: center;
            gap: .45rem;
            color: var(--text);
            font-weight: 720;
        }

        .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(229, 221, 211, .85);
            background: rgba(255, 253, 249, .95);
            box-shadow: 0 5px 20px rgba(68, 52, 41, .04);
            backdrop-filter: blur(12px);
        }

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

        .brand {
            display: inline-flex;
            align-items: center;
            gap: .75rem;
            color: var(--text);
            font-size: clamp(.98rem, 2vw, 1.16rem);
            font-weight: 820;
            letter-spacing: -.03em;
        }

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

        .brand-mark {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border-radius: 13px 13px 13px 5px;
            color: #fff;
            background: var(--primary);
            box-shadow: 0 8px 18px rgba(182, 83, 79, .22);
            font-size: .8rem;
        }

        .desktop-nav {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: .45rem;
        }

        .desktop-nav .menu {
            align-items: center;
            background: transparent;
        }

        .desktop-nav .menu a {
            position: relative;
            margin: 0 .15rem;
            padding: .78rem .95rem;
            border-radius: 999px;
            color: var(--muted);
            font-weight: 680;
        }

        .desktop-nav .menu a:hover {
            color: var(--text);
            background: var(--surface-warm);
        }

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

        .nav-cta {
            margin-left: .55rem !important;
        }

        .menu-icon {
            width: 43px;
            height: 43px;
            margin: 0;
            border-radius: 12px;
            background: var(--surface-warm);
        }

        .menu-icon::after {
            top: 13px;
            left: 10px;
            width: 23px;
            height: 2px;
            background: var(--text);
            box-shadow: 0 7px 0 var(--text), 0 14px 0 var(--text);
        }

        .mobile-nav-panel {
            padding: .65rem 0 1rem;
            border-top: 1px solid var(--border);
            background: #fffdf9;
        }

        .mobile-nav-panel .menu {
            gap: .4rem;
            background: transparent;
        }

        .mobile-nav-panel .menu a {
            min-height: 48px;
            padding: .85rem 1rem;
            border-radius: 12px;
            color: var(--text);
            font-weight: 700;
        }

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

        .hero {
            padding: clamp(3.4rem, 8vw, 7.2rem) 0 3rem;
        }

        .hero-heading {
            max-width: 1040px;
            margin: 1.25rem auto 1.35rem;
            text-align: center;
        }

        .hero-heading .accent-line {
            position: relative;
            display: inline-block;
            z-index: 1;
        }

        .hero-heading .accent-line::after {
            position: absolute;
            z-index: -1;
            right: -.08em;
            bottom: .06em;
            left: -.08em;
            height: .22em;
            border-radius: 999px;
            background: #efc5b8;
            content: "";
            transform: rotate(-1.2deg);
        }

        .hero-intro {
            max-width: 820px;
            margin: 0 auto 1.8rem;
            color: #625d57;
            font-size: clamp(1.05rem, 2vw, 1.24rem);
            text-align: center;
        }

        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: .8rem;
            margin-bottom: 2rem;
        }

        .hero-meta {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: .75rem 1.45rem;
            margin-bottom: 2.4rem;
            color: var(--muted);
            font-size: .9rem;
        }

        .hero-meta span {
            display: inline-flex;
            align-items: center;
            gap: .48rem;
        }

        .hero-meta i {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--secondary);
        }

        .product-stage {
            position: relative;
            max-width: 1080px;
            margin: 0 auto;
            padding: clamp(1rem, 2.6vw, 1.65rem);
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 34px;
            background: rgba(255, 255, 255, .9);
            box-shadow: var(--shadow-md);
        }

        .product-stage::before {
            position: absolute;
            width: 220px;
            height: 220px;
            top: -100px;
            right: -70px;
            border-radius: 50%;
            background: rgba(215, 155, 99, .14);
            content: "";
        }

        .stage-toolbar {
            display: flex;
            position: relative;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            margin-bottom: 1rem;
            padding: .2rem .25rem .95rem;
            border-bottom: 1px solid var(--border);
        }

        .stage-dots {
            display: flex;
            gap: .38rem;
        }

        .stage-dots span {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: #dccfc2;
        }

        .stage-dots span:first-child {
            background: var(--primary);
        }

        .stage-note {
            color: var(--muted);
            font-size: .83rem;
        }

        .featured-panel {
            min-height: 280px;
            padding: clamp(1.5rem, 4vw, 3rem);
            border-radius: 24px;
            background:
                linear-gradient(125deg, rgba(182, 83, 79, .94), rgba(140, 75, 78, .9)),
                var(--primary);
            color: #fff;
        }

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

        .featured-panel p {
            max-width: 580px;
            margin-bottom: 1.3rem;
            opacity: .86;
        }

        .stage-badge {
            display: inline-flex;
            margin-bottom: 1rem;
            padding: .38rem .68rem;
            border: 1px solid rgba(255, 255, 255, .32);
            border-radius: 999px;
            background: rgba(255, 255, 255, .12);
            font-size: .8rem;
            font-weight: 720;
        }

        .mini-index {
            display: grid;
            gap: .8rem;
            height: 100%;
        }

        .mini-index-item {
            min-height: 84px;
            padding: 1rem;
            border: 1px solid var(--border);
            border-radius: 18px;
            background: var(--background);
        }

        .mini-index-item strong {
            display: block;
            margin-bottom: .22rem;
            font-size: .98rem;
        }

        .mini-index-item span {
            color: var(--muted);
            font-size: .82rem;
        }

        .countdown-section {
            padding: 2.2rem 0 var(--section-space);
        }

        .countdown-shell {
            padding: clamp(1.4rem, 3vw, 2.2rem);
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
        }

        .countdown-heading {
            max-width: 490px;
        }

        .countdown-heading h2 {
            font-size: clamp(1.7rem, 3vw, 2.4rem);
        }

        .timer {
            display: grid;
            grid-template-columns: repeat(3, minmax(80px, 1fr));
            gap: .65rem;
        }

        .time-box {
            padding: 1rem .55rem;
            border-radius: 16px;
            background: var(--surface-warm);
            text-align: center;
        }

        .time-box strong {
            display: block;
            color: var(--primary);
            font-size: clamp(1.65rem, 4vw, 2.4rem);
            line-height: 1.05;
            font-variant-numeric: tabular-nums;
        }

        .time-box span {
            color: var(--muted);
            font-size: .8rem;
        }

        .benefit-strip {
            display: grid;
            grid-template-columns: 1.12fr .94fr .94fr;
            gap: 1rem;
            margin-top: 1.3rem;
        }

        .benefit-item {
            position: relative;
            padding: 1.3rem;
            border-radius: 18px;
            background: var(--accent-soft);
        }

        .benefit-item:nth-child(2) {
            background: var(--secondary-soft);
        }

        .benefit-item:nth-child(3) {
            background: var(--primary-soft);
        }

        .benefit-number {
            display: block;
            margin-bottom: .5rem;
            color: var(--primary);
            font-size: .76rem;
            font-weight: 820;
            letter-spacing: .12em;
        }

        .benefit-item p {
            margin: 0;
            font-size: .91rem;
            line-height: 1.65;
        }

        .highlight-section {
            overflow: hidden;
            background: #f2ece4;
        }

        .topic-wall {
            display: grid;
            grid-template-columns: 1.15fr .85fr;
            grid-template-rows: auto auto;
            gap: 1.15rem;
        }

        .topic-card {
            position: relative;
            min-height: 220px;
            padding: clamp(1.4rem, 3vw, 2.1rem);
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, .8);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-sm);
            transition: transform var(--transition), box-shadow var(--transition);
        }

        .topic-card:hover {
            box-shadow: var(--shadow-md);
            transform: translateY(-4px);
        }

        .topic-card.large {
            grid-row: span 2;
            min-height: 470px;
            color: #fff;
            background: #3f4941;
        }

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

        .topic-card.large p {
            opacity: .76;
        }

        .topic-orbit {
            position: absolute;
            right: -70px;
            bottom: -85px;
            width: 280px;
            height: 280px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 50%;
        }

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

        .topic-orbit::before {
            inset: 38px;
        }

        .topic-orbit::after {
            inset: 84px;
            background: rgba(215, 155, 99, .3);
        }

        .topic-tags {
            display: flex;
            flex-wrap: wrap;
            gap: .55rem;
            margin-top: 1.2rem;
        }

        .tag {
            display: inline-flex;
            align-items: center;
            padding: .4rem .72rem;
            border: 1px solid var(--border);
            border-radius: 999px;
            color: var(--muted);
            background: rgba(255, 255, 255, .72);
            font-size: .8rem;
            font-weight: 670;
        }

        .tag.is-hot {
            color: var(--primary);
            border-color: rgba(182, 83, 79, .24);
            background: var(--primary-soft);
        }

        .topic-card.large .tag {
            color: #fff;
            border-color: rgba(255, 255, 255, .24);
            background: rgba(255, 255, 255, .1);
        }

        .steps-list {
            display: grid;
            gap: .85rem;
            margin-top: 1.5rem;
        }

        .step-row {
            display: grid;
            grid-template-columns: 42px 1fr;
            gap: .8rem;
            align-items: start;
        }

        .step-index {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border-radius: 14px;
            color: var(--primary);
            background: var(--primary-soft);
            font-weight: 820;
        }

        .step-row p {
            margin: .1rem 0 0;
            font-size: .91rem;
        }

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

        .compare-shell {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: var(--background);
        }

        .compare-head,
        .compare-row {
            display: grid;
            grid-template-columns: 1.25fr repeat(3, 1fr);
            align-items: center;
        }

        .compare-head {
            color: var(--muted);
            background: var(--surface-warm);
            font-size: .82rem;
            font-weight: 760;
        }

        .compare-head > div,
        .compare-row > div {
            padding: 1rem 1.2rem;
        }

        .compare-row {
            border-top: 1px solid var(--border);
        }

        .compare-row:hover {
            background: #fff;
        }

        .compare-label {
            font-weight: 740;
        }

        .check {
            color: var(--success);
            font-weight: 820;
        }

        .limited {
            color: var(--warning);
        }

        .route-cards {
            display: none;
        }

        .news-section {
            background: #f7f2eb;
        }

        .news-list {
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: var(--radius-lg);
            background: var(--surface);
        }

        .news-item {
            display: grid;
            grid-template-columns: 92px 1fr auto;
            gap: 1.2rem;
            align-items: center;
            padding: 1.35rem 1.45rem;
            border-bottom: 1px solid var(--border);
            transition: background var(--transition);
        }

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

        .news-item:hover {
            background: #fffaf5;
        }

        .news-date {
            color: var(--muted);
            font-size: .82rem;
        }

        .news-item h3 {
            margin: 0 0 .25rem;
            font-size: 1.08rem;
            letter-spacing: -.02em;
        }

        .news-item p {
            margin: 0;
            font-size: .88rem;
        }

        .news-arrow {
            display: grid;
            width: 42px;
            height: 42px;
            place-items: center;
            border-radius: 50%;
            color: var(--primary);
            background: var(--primary-soft);
            font-size: 1.15rem;
        }

        .recommend-panel {
            height: 100%;
            padding: clamp(1.4rem, 3vw, 2rem);
            border-radius: var(--radius-lg);
            color: #fff;
            background: var(--primary);
            box-shadow: var(--shadow-md);
        }

        .recommend-panel h3,
        .recommend-panel p {
            color: #fff;
        }

        .recommend-panel p {
            opacity: .84;
        }

        .reason-list {
            margin: 1.5rem 0;
            list-style: none;
        }

        .reason-list li {
            display: flex;
            gap: .7rem;
            padding: .7rem 0;
            border-bottom: 1px solid rgba(255, 255, 255, .18);
        }

        .reason-list li::before {
            content: "✓";
            font-weight: 820;
        }

        .recommend-panel .button {
            color: var(--text);
            background: #fff;
        }

        .trust-line {
            display: flex;
            flex-wrap: wrap;
            gap: .65rem;
            margin-top: 1.25rem;
        }

        .trust-chip {
            padding: .52rem .75rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--muted);
            background: var(--surface);
            font-size: .83rem;
        }

        .application-section {
            padding: var(--section-space) 0;
            background: #3f403b;
        }

        .application-section h2,
        .application-section h3,
        .application-section .section-kicker {
            color: #fff;
        }

        .application-section p {
            color: rgba(255, 255, 255, .72);
        }

        .rights-list {
            display: grid;
            gap: .8rem;
            margin: 1.5rem 0 0;
        }

        .rights-item {
            display: flex;
            gap: .85rem;
            align-items: flex-start;
            padding: 1rem;
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: 16px;
            background: rgba(255, 255, 255, .06);
        }

        .rights-icon {
            display: grid;
            flex: 0 0 34px;
            width: 34px;
            height: 34px;
            place-items: center;
            border-radius: 11px;
            color: #fff;
            background: rgba(215, 155, 99, .5);
            font-weight: 820;
        }

        .rights-item strong {
            display: block;
            margin-bottom: .15rem;
            color: #fff;
        }

        .rights-item span {
            color: rgba(255, 255, 255, .68);
            font-size: .88rem;
        }

        .application-form {
            padding: clamp(1.35rem, 3vw, 2rem);
            border-radius: var(--radius-lg);
            background: var(--surface);
            box-shadow: var(--shadow-md);
        }

        .application-form label {
            display: block;
            margin-bottom: .95rem;
            color: var(--text);
            font-size: .9rem;
            font-weight: 720;
        }

        .application-form input,
        .application-form select,
        .application-form textarea {
            width: 100%;
            height: auto;
            min-height: 48px;
            margin: .42rem 0 0;
            padding: .75rem .9rem;
            border: 1px solid var(--border);
            border-radius: 12px;
            color: var(--text);
            background: #fffdf9;
            box-shadow: none;
        }

        .application-form textarea {
            min-height: 96px;
            resize: vertical;
        }

        .application-form input::placeholder,
        .application-form textarea::placeholder {
            color: #aaa097;
        }

        .application-form input:focus,
        .application-form select:focus,
        .application-form textarea:focus {
            border-color: var(--focus);
            background: #fff;
            box-shadow: 0 0 0 4px rgba(112, 92, 139, .1);
        }

        .field-hint {
            display: block;
            margin-top: .3rem;
            color: var(--muted);
            font-size: .77rem;
            font-weight: 400;
        }

        .form-message {
            display: none;
            margin-top: 1rem;
            padding: .8rem 1rem;
            border-radius: 12px;
            color: var(--success);
            background: var(--secondary-soft);
            font-size: .88rem;
        }

        .form-message.is-visible {
            display: block;
        }

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

        .faq-wrap {
            max-width: 900px;
            margin: 0 auto;
        }

        .accordion {
            margin: 2rem 0 0;
            background: transparent;
        }

        .accordion-item {
            margin-bottom: .75rem;
            overflow: hidden;
            border: 1px solid var(--border);
            border-radius: 16px;
            background: var(--surface);
            transition: border-color var(--transition), box-shadow var(--transition);
        }

        .accordion-item:hover {
            border-color: #d4c7ba;
        }

        .accordion-item.is-active {
            border-color: rgba(182, 83, 79, .34);
            box-shadow: var(--shadow-sm);
        }

        .accordion-title {
            padding: 1.2rem 3.5rem 1.2rem 1.25rem;
            border: 0;
            color: var(--text);
            font-size: 1rem;
            font-weight: 750;
        }

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

        .accordion-title::before {
            right: 1.25rem;
            margin-top: -.7rem;
            color: var(--primary);
            font-size: 1.4rem;
        }

        .accordion-content {
            padding: 0 1.25rem 1.3rem;
            border: 0;
            color: var(--muted);
            background: transparent;
            line-height: 1.85;
        }

        .site-footer {
            padding: 4rem 0 2rem;
            color: rgba(255, 255, 255, .72);
            background: #302f2c;
        }

        .footer-brand {
            display: inline-flex;
            align-items: center;
            gap: .7rem;
            margin-bottom: 1rem;
            color: #fff;
            font-size: 1.15rem;
            font-weight: 820;
        }

        .site-footer p {
            max-width: 520px;
            color: rgba(255, 255, 255, .63);
        }

        .footer-heading {
            margin-bottom: .8rem;
            color: #fff;
            font-size: .9rem;
            letter-spacing: .04em;
        }

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

        .footer-links li {
            margin-bottom: .48rem;
        }

        .footer-links a {
            color: rgba(255, 255, 255, .68);
        }

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

        .footer-bottom {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: .75rem;
            margin-top: 2.5rem;
            padding-top: 1.35rem;
            border-top: 1px solid rgba(255, 255, 255, .12);
            color: rgba(255, 255, 255, .5);
            font-size: .8rem;
        }

        .fixed-conversion {
            display: flex;
            position: fixed;
            z-index: 1200;
            right: 1rem;
            bottom: 1rem;
            left: 1rem;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            max-width: 1120px;
            margin: auto;
            padding: .8rem .9rem .8rem 1.25rem;
            border: 1px solid rgba(182, 83, 79, .24);
            border-radius: 20px;
            background: rgba(255, 253, 249, .97);
            box-shadow: 0 15px 45px rgba(63, 50, 42, .18);
            backdrop-filter: blur(12px);
        }

        .fixed-conversion.is-hidden {
            display: none;
        }

        .conversion-copy {
            min-width: 0;
        }

        .conversion-copy strong {
            display: block;
            margin-bottom: .1rem;
            font-size: .95rem;
        }

        .conversion-copy span {
            display: block;
            overflow: hidden;
            color: var(--muted);
            font-size: .8rem;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .conversion-actions {
            display: flex;
            flex: 0 0 auto;
            align-items: center;
            gap: .55rem;
        }

        .conversion-actions .button {
            min-height: 43px;
            padding: .72rem 1rem;
        }

        .close-bar {
            display: grid;
            width: 40px;
            height: 40px;
            place-items: center;
            border: 0;
            border-radius: 12px;
            color: var(--muted);
            background: var(--surface-warm);
            font-size: 1.15rem;
        }

        .close-bar:hover {
            color: var(--primary);
            background: var(--primary-soft);
        }

        .restore-bar {
            display: none;
            position: fixed;
            z-index: 1200;
            right: 1rem;
            bottom: 1rem;
            min-height: 44px;
            padding: .7rem 1rem;
            border: 1px solid rgba(182, 83, 79, .25);
            border-radius: 999px;
            color: #fff;
            background: var(--primary);
            box-shadow: var(--shadow-md);
            font-weight: 740;
        }

        .restore-bar.is-visible {
            display: block;
        }

        @media screen and (max-width: 1024px) {
            .topic-wall {
                grid-template-columns: 1fr 1fr;
            }

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

            .benefit-strip {
                grid-template-columns: 1fr;
            }

            .compare-head,
            .compare-row {
                grid-template-columns: 1.15fr repeat(3, 1fr);
            }

            .compare-head > div,
            .compare-row > div {
                padding: .9rem .7rem;
                font-size: .87rem;
            }
        }

        @media screen and (max-width: 768px) {
            body {
                padding-bottom: 86px;
            }

            .nav-shell {
                min-height: 66px;
            }

            .hero {
                padding-top: 2.8rem;
            }

            .product-stage {
                border-radius: 24px;
            }

            .featured-panel {
                min-height: 230px;
            }

            .mini-index {
                grid-template-columns: repeat(3, 1fr);
                margin-top: .85rem;
            }

            .mini-index-item {
                min-height: 76px;
                padding: .8rem;
            }

            .countdown-heading {
                margin-bottom: 1.2rem;
            }

            .topic-wall {
                grid-template-columns: 1fr;
            }

            .topic-card.large {
                grid-column: auto;
            }

            .compare-shell {
                display: none;
            }

            .route-cards {
                display: grid;
                gap: 1rem;
            }

            .route-card {
                padding: 1.3rem;
                border: 1px solid var(--border);
                border-radius: 18px;
                background: var(--surface);
            }

            .route-card.featured {
                border-color: rgba(182, 83, 79, .3);
                box-shadow: var(--shadow-sm);
            }

            .route-card ul {
                margin: 1rem 0 0;
                color: var(--muted);
                font-size: .9rem;
            }

            .news-item {
                grid-template-columns: 1fr auto;
                gap: .55rem 1rem;
            }

            .news-date {
                grid-column: 1 / -1;
            }

            .recommend-panel {
                margin-top: 1rem;
            }

            .fixed-conversion {
                right: .65rem;
                bottom: max(.65rem, env(safe-area-inset-bottom));
                left: .65rem;
                padding: .65rem;
                border-radius: 17px;
            }

            .conversion-copy span {
                max-width: 40vw;
            }
        }

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

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

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

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

            .hero-meta {
                justify-content: flex-start;
                margin-left: .2rem;
            }

            .stage-toolbar {
                align-items: flex-start;
                flex-direction: column;
            }

            .featured-panel {
                padding: 1.35rem;
            }

            .mini-index {
                grid-template-columns: 1fr;
            }

            .timer {
                gap: .4rem;
            }

            .time-box {
                padding: .8rem .35rem;
            }

            .news-item {
                padding: 1.1rem;
            }

            .application-form {
                padding: 1.15rem;
            }

            .footer-bottom {
                flex-direction: column;
            }

            .conversion-copy span {
                display: none;
            }

            .conversion-copy strong {
                max-width: 38vw;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .conversion-actions .button {
                min-height: 42px;
                padding: .65rem .85rem;
                font-size: .86rem;
            }

            .close-bar {
                width: 38px;
                height: 38px;
            }
        }

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

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

/* roulang page: category1 */
:root{
      --primary:#b6534f;--primary-hover:#94413f;--primary-soft:#f7e5e0;
      --secondary:#7d927d;--secondary-soft:#e8eee6;--accent:#d79b63;
      --accent-soft:#f8ead9;--background:#fbf8f2;--surface:#fff;
      --surface-warm:#f5efe7;--text:#302d2a;--muted:#706b65;
      --border:#e5ddd3;--success:#56775c;--warning:#a56f35;
      --focus:#705c8b;--danger:#a74848;--radius-sm:10px;--radius-md:18px;
      --radius-lg:28px;--shadow-sm:0 8px 24px rgba(72,55,43,.07);
      --shadow-md:0 18px 50px rgba(72,55,43,.12);
      --section-space:clamp(4rem,8vw,7rem);--transition:180ms ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--background)}
    body{margin:0;padding-bottom:94px;overflow-x:hidden;color:var(--text);background:radial-gradient(circle at 8% 8%,rgba(215,155,99,.12),transparent 24rem),linear-gradient(180deg,#fffdf9 0%,var(--background) 38%,#f8f3ec 100%);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei","Noto Sans CJK SC",sans-serif;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
    body.bar-closed{padding-bottom:0}
    a{color:var(--primary);text-decoration:none;transition:color var(--transition),background var(--transition),transform var(--transition)}
    a:hover{color:var(--primary-hover)}
    a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:3px solid rgba(112,92,139,.36);outline-offset:3px}
    button,input,select,textarea{font:inherit} button{cursor:pointer} img,svg{display:block;max-width:100%}
    .grid-container{max-width:1220px;padding-left:clamp(1rem,3vw,2rem);padding-right:clamp(1rem,3vw,2rem)}
    .section{position:relative;padding:var(--section-space) 0}
    .section-kicker{display:inline-flex;align-items:center;gap:.55rem;margin-bottom:.85rem;color:var(--primary);font-size:.84rem;font-weight:760;letter-spacing:.08em}
    .section-kicker:before{content:"";width:1.8rem;height:2px;background:currentColor}
    h1,h2,h3{margin-top:0;color:var(--text);letter-spacing:-.045em;line-height:1.2}
    h1{font-size:clamp(2.25rem,5vw,4.8rem);margin-bottom:1.2rem}
    h2{font-size:clamp(1.8rem,3.2vw,3rem);margin-bottom:1rem}
    h3{font-size:1.22rem;margin-bottom:.5rem}
    p{color:var(--muted);margin-top:0}
    .site-header{position:sticky;z-index:1000;top:0;border-bottom:1px solid rgba(229,221,211,.85);background:rgba(255,253,249,.95);box-shadow:0 5px 20px rgba(68,52,41,.04);backdrop-filter:blur(12px)}
    .nav-shell{min-height:74px}.brand,.footer-brand{display:inline-flex;align-items:center;gap:.75rem;color:var(--text);font-weight:820;letter-spacing:-.03em}
    .brand{font-size:clamp(.98rem,2vw,1.16rem)}.brand:hover,.footer-brand:hover{color:var(--primary)}
    .brand-mark{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:13px 13px 13px 5px;color:#fff;background:var(--primary);font-size:.85rem;font-weight:850;box-shadow:0 7px 14px rgba(182,83,79,.2)}
    .desktop-nav{display:flex;align-items:center;gap:1.35rem}.desktop-nav .menu{gap:.35rem}.desktop-nav .menu a{padding:.6rem .8rem;border-radius:999px;color:var(--muted);font-weight:680}
    .desktop-nav .menu a:hover,.desktop-nav .menu a.active{color:var(--primary);background:var(--primary-soft)}
    .button,.button.primary-button,.button.secondary-button{min-height:48px;margin:0;padding:.88rem 1.35rem;border:1px solid transparent;border-radius:999px;font-weight:760;line-height:1.15;transition:transform var(--transition),box-shadow var(--transition),background var(--transition),border-color var(--transition)}
    .button.primary-button{color:#fff;background:var(--primary);box-shadow:0 10px 24px rgba(182,83,79,.23)}
    .button.primary-button:hover,.button.primary-button:active{color:#fff;background:var(--primary-hover);transform:translateY(-2px)}
    .button.secondary-button{color:var(--text);border-color:var(--border);background:rgba(255,255,255,.82)}
    .button.secondary-button:hover{color:var(--primary);border-color:rgba(182,83,79,.45);background:#fff;transform:translateY(-2px)}
    .button[disabled]{cursor:not-allowed;opacity:.5;transform:none}.nav-cta{white-space:nowrap}
    .menu-icon{width:46px;height:42px;border:1px solid var(--border);border-radius:12px;background:#fff;position:relative}
    .menu-icon:before,.menu-icon:after{content:"";position:absolute;left:12px;width:20px;height:2px;background:var(--text);transition:.2s}.menu-icon:before{top:15px;box-shadow:0 7px 0 var(--text)}.menu-icon:after{display:none}
    .mobile-nav-panel{padding:0 0 1rem}.mobile-nav-panel .menu a{min-height:48px;padding:.75rem 1rem;border-radius:12px;color:var(--text);font-weight:700}.mobile-nav-panel .menu a.active{color:var(--primary);background:var(--primary-soft)}
    .mobile-nav-panel .button{display:block;text-align:center;margin-top:.55rem}.mobile-nav-panel[hidden]{display:none}.mobile-nav-panel.is-open{display:block}
    .page-intro{padding:clamp(3rem,7vw,6rem) 0 2.6rem;border-bottom:1px solid var(--border)}
    .breadcrumb{margin:0 0 2rem}.breadcrumbs{margin:0;background:transparent;font-size:.88rem}.breadcrumbs li{color:var(--muted)}.breadcrumbs a{color:var(--primary);font-weight:650}.breadcrumbs li:not(:last-child):after{color:var(--accent)}
    .back-link{display:inline-flex;align-items:center;gap:.45rem;margin-top:.4rem;color:var(--muted);font-weight:700}.back-link:before{content:"←";font-size:1.1rem}
    .intro-layout{align-items:end}.intro-copy{max-width:720px}.intro-copy p{font-size:1.08rem;max-width:650px}.intro-aside{padding:1.35rem;border:1px solid var(--border);border-radius:var(--radius-md);background:rgba(255,255,255,.72);box-shadow:var(--shadow-sm)}
    .mini-label{display:flex;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.82rem}.mini-label strong{color:var(--success)}.meter{height:7px;margin-top:.7rem;border-radius:99px;background:var(--secondary-soft);overflow:hidden}.meter span{display:block;width:78%;height:100%;border-radius:inherit;background:var(--secondary)}
    .filter-bar{padding:1.2rem 0;border-bottom:1px solid var(--border)}.filter-inner{align-items:center;gap:1rem}.search-field{position:relative}.search-field label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.search-field input,.sort-select{height:48px;margin:0;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--text);box-shadow:none}.search-field input{padding-left:1.15rem}.search-field input::placeholder{color:#9a928a}.search-field input:focus,.sort-select:focus{border-color:var(--focus);box-shadow:0 0 0 3px rgba(112,92,139,.12)}
    .filter-tags{display:flex;flex-wrap:wrap;gap:.55rem}.filter-tag{min-height:40px;padding:.55rem .9rem;border:1px solid var(--border);border-radius:999px;background:#fff;color:var(--muted);font-size:.88rem;font-weight:700;transition:.18s}.filter-tag:hover,.filter-tag.is-selected{color:var(--primary);border-color:rgba(182,83,79,.35);background:var(--primary-soft)}
    .content-section{padding:3.2rem 0 5rem}.content-layout{align-items:start}.filter-panel{position:sticky;top:100px;padding:1.35rem;border:1px solid var(--border);border-radius:var(--radius-md);background:var(--surface);box-shadow:var(--shadow-sm)}.filter-panel h2{font-size:1.15rem;letter-spacing:-.02em}.filter-panel p{font-size:.9rem}.filter-panel ul{margin:1.2rem 0 0;list-style:none}.filter-panel li+li{border-top:1px solid var(--border)}.filter-panel a{display:flex;justify-content:space-between;padding:.78rem 0;color:var(--muted);font-weight:650}.filter-panel a:hover,.filter-panel a.current{color:var(--primary)}.filter-panel a span{font-size:.78rem;color:var(--secondary)}
    .list-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.15rem}.list-head h2{margin:0;font-size:1.6rem}.result-note{color:var(--muted);font-size:.9rem}
    .feature-item{display:grid;grid-template-columns:190px 1fr;gap:1.35rem;margin-bottom:1.2rem;padding:1.3rem;border:1px solid rgba(182,83,79,.2);border-radius:var(--radius-md);background:linear-gradient(120deg,#fff 0%,#fffaf5 100%);box-shadow:var(--shadow-sm);transition:transform var(--transition),box-shadow var(--transition)}.feature-item:hover,.content-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
    .thumb{position:relative;min-height:150px;border-radius:14px;overflow:hidden;background:var(--surface-warm)}.thumb:before{content:"";position:absolute;width:150px;height:150px;right:-28px;top:-28px;border-radius:50%;background:var(--accent-soft)}.thumb:after{content:"精选";position:absolute;left:14px;bottom:13px;padding:.25rem .55rem;border-radius:7px;color:#fff;background:var(--primary);font-size:.75rem;font-weight:750}.thumb-inner{position:absolute;inset:0;display:grid;place-items:center;color:var(--primary);font-size:2.4rem;font-weight:850;letter-spacing:-.1em}
    .item-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:.65rem}.tag,.status{display:inline-flex;align-items:center;padding:.28rem .62rem;border-radius:999px;font-size:.76rem;font-weight:750}.tag{color:var(--secondary);background:var(--secondary-soft)}.status{color:var(--success);background:#edf4ed}.status:before{content:"";width:6px;height:6px;margin-right:5px;border-radius:50%;background:var(--success)}
    .feature-item h3,.content-item h3{margin-bottom:.4rem}.feature-item p,.content-item p{margin-bottom:.85rem;font-size:.93rem}.item-footer{display:flex;align-items:center;justify-content:space-between;gap:1rem;color:var(--muted);font-size:.8rem}.text-link{display:inline-flex;align-items:center;gap:.45rem;color:var(--text);font-weight:720}.text-link:after{content:"→";transition:transform var(--transition)}.text-link:hover:after{transform:translateX(4px)}
    .content-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.content-item{padding:1.15rem;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;transition:transform var(--transition),box-shadow var(--transition)}.content-item .item-footer{margin-top:1rem}.content-item h3{font-size:1.08rem}
    .index-strip{margin:1.5rem 0 0;padding:1.35rem;border-radius:var(--radius-md);background:var(--surface-warm);border:1px solid var(--border)}.index-strip strong{display:block;font-size:1.15rem}.index-strip p{margin:.25rem 0 0;font-size:.9rem}
    .related{padding:4rem 0;background:var(--surface-warm);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.related-box{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:1.7rem 2rem;border-radius:var(--radius-lg);background:#fff;box-shadow:var(--shadow-sm)}.related-box h2{font-size:1.65rem;margin-bottom:.4rem}.related-box p{margin:0}
    .faq-section{padding:var(--section-space) 0}.faq-list{max-width:900px;margin:2rem auto 0}.accordion{background:transparent}.accordion-item{margin-bottom:.7rem;border:1px solid var(--border);border-radius:var(--radius-md);background:#fff;overflow:hidden}.accordion-title{padding:1.15rem 1.35rem;color:var(--text);font-weight:750;font-size:1rem}.accordion-title:hover{color:var(--primary);background:#fffaf7}.accordion-content{padding:0 1.35rem 1.2rem;border:0;background:#fff}.accordion-content p{margin:0;font-size:.94rem}
    .apply-section{padding:4rem 0 5.5rem}.apply-card{padding:clamp(1.5rem,4vw,3rem);border-radius:var(--radius-lg);background:var(--primary);box-shadow:var(--shadow-md)}.apply-card h2,.apply-card p{color:#fff}.apply-card p{opacity:.84;max-width:650px}.apply-form{display:flex;gap:.7rem;max-width:700px}.apply-form label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.apply-form input{flex:1;min-width:0;height:50px;margin:0;padding:0 1rem;border:0;border-radius:999px;background:#fff}.apply-form input:invalid:not(:placeholder-shown){box-shadow:0 0 0 3px rgba(255,215,210,.65)}.apply-form .button{background:#fff;color:var(--primary);box-shadow:none}.apply-form .button:hover{background:var(--accent-soft);color:var(--primary-hover)}
    .site-footer{padding:4rem 0 2rem;background:#302d2a;color:#fff}.footer-brand{color:#fff;margin-bottom:1rem}.footer-brand .brand-mark{background:var(--accent)}.site-footer p{max-width:560px;color:rgba(255,255,255,.68)}.footer-heading{margin:0 0 .8rem;color:#fff;font-size:1rem;letter-spacing:0}.footer-links{margin:0;list-style:none}.footer-links li+li{margin-top:.35rem}.footer-links a{color:rgba(255,255,255,.68)}.footer-links a:hover{color:#fff}.footer-bottom{display:flex;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.2rem;border-top:1px solid rgba(255,255,255,.15);color:rgba(255,255,255,.52);font-size:.78rem}
    .fixed-bar{position:fixed;z-index:900;right:0;bottom:0;left:0;padding:.75rem 0 calc(.75rem + env(safe-area-inset-bottom));border-top:1px solid rgba(229,221,211,.9);background:rgba(255,253,249,.96);box-shadow:0 -8px 30px rgba(72,55,43,.1);backdrop-filter:blur(10px)}.fixed-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem}.fixed-inner p{margin:0;font-size:.9rem;color:var(--text)}.fixed-inner p span{color:var(--primary);font-weight:800}.bar-close{width:32px;height:32px;margin-left:.3rem;border:0;border-radius:50%;color:var(--muted);background:transparent}.bar-close:hover{color:var(--primary);background:var(--primary-soft)}
    @media(max-width:1023px){.filter-panel{top:92px}.content-list{grid-template-columns:1fr}}
    @media(max-width:767px){body{padding-bottom:125px}.page-intro{padding-top:2.5rem}.intro-aside{margin-top:1.5rem}.filter-inner{display:block}.search-field{margin-bottom:.8rem}.sort-select{width:100%}.filter-tags{margin-top:.8rem}.content-section{padding-top:2.4rem}.filter-panel{position:static;margin-bottom:1.5rem}.list-head{align-items:flex-start;flex-direction:column}.feature-item{grid-template-columns:1fr}.thumb{min-height:125px}.related-box{display:block;padding:1.35rem}.related-box .button{margin-top:1rem}.apply-form{display:block}.apply-form input{width:100%;margin-bottom:.7rem}.apply-form .button{width:100%}.footer-bottom{display:block}.footer-bottom span{display:block}.footer-bottom span+span{margin-top:.5rem}.fixed-inner p{font-size:.82rem;line-height:1.4}.fixed-inner .button{min-width:118px;padding:.75rem .8rem;font-size:.88rem}.bar-close{display:none}}
    @media(max-width:520px){h1{font-size:2.25rem}.brand{font-size:.98rem}.brand-mark{width:34px;height:34px}.feature-item{padding:1rem}.item-footer{align-items:flex-start;flex-direction:column;gap:.5rem}.section{padding:4rem 0}.site-footer{padding-top:3rem}.footer-heading{margin-top:1.5rem}}