/* roulang page: index */
:root {
            --primary: #D16B48;
            --primary-dark: #B85A3A;
            --primary-light: rgba(209, 107, 72, .12);
            --secondary: #2E3A33;
            --bg-body: #FAF7F3;
            --bg-section: #F2EDE6;
            --bg-dark: #222A26;
            --ink: #232A26;
            --ink-secondary: #6A756F;
            --line: #E5DED5;
            --accent: #D9A053;
            --shadow-sm: 0 2px 10px rgba(34, 42, 38, .06);
            --shadow-md: 0 8px 24px rgba(34, 42, 38, .08);
            --shadow-lg: 0 16px 44px rgba(34, 42, 38, .12);
            --radius: 12px;
            --radius-lg: 20px;
            --radius-btn: 8px;
        }
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; }
        body {
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
            background: var(--bg-body);
            color: var(--ink);
            line-height: 1.75;
            font-size: 1rem;
            -webkit-font-smoothing: antialiased;
        }
        img { max-width: 100%; height: auto; display: block; }
        a { text-decoration: none; color: inherit; transition: color .25s ease; }
        button { font-family: inherit; }
        .container { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
        h1, h2, h3, h4, h5 { color: var(--secondary); font-weight: 800; line-height: 1.3; }

        /* 顶部信息条 */
        .topbar {
            background: var(--bg-dark);
            color: rgba(255, 255, 255, .8);
            font-size: .78rem;
            padding: 6px 0;
            letter-spacing: .02em;
        }
        .topbar .container { display: flex; justify-content: space-between; align-items: center; }
        .topbar-left { display: flex; align-items: center; gap: 8px; }
        .topbar-left .dot { width: 3px; height: 3px; border-radius: 50%; background: rgba(255,255,255,.4); display: inline-block; margin: 0 4px; }
        .topbar-right { display: flex; align-items: center; gap: 14px; }
        .topbar-right a { color: rgba(255,255,255,.85); font-weight: 600; font-size: .78rem; transition: color .2s; }
        .topbar-right a:hover { color: #fff; }
        .topbar-btn {
            background: var(--primary);
            color: #fff !important;
            padding: 2px 14px;
            border-radius: 4px;
            font-weight: 600;
            font-size: .75rem !important;
            line-height: 22px;
            transition: background .2s;
            display: inline-block;
        }
        .topbar-btn:hover { background: var(--primary-dark); }

        /* 主导航 */
        .main-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(250, 247, 243, .93);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
        }
        .main-header .navbar { min-height: 72px; padding: 8px 0; }
        .brand-text {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--secondary);
            letter-spacing: .02em;
        }
        .brand-text .brand-dot {
            color: var(--primary);
            position: relative;
        }
        .brand-text .brand-dot::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
        }
        .brand-sub { font-size: .72rem; color: var(--ink-secondary); margin-left: 6px; font-weight: 400; }
        .main-header .navbar-nav { gap: .5rem; }
        .main-header .nav-link {
            font-size: .95rem;
            font-weight: 600;
            color: var(--ink);
            padding: .55rem 1rem !important;
            position: relative;
            border-radius: 6px;
            transition: color .25s;
        }
        .main-header .nav-link::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 2px;
            width: 0;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
            transform: translateX(-50%);
            transition: width .3s ease;
        }
        .main-header .nav-link:hover { color: var(--primary); }
        .main-header .nav-link:hover::after { width: 60%; }
        .main-header .nav-link.active { color: var(--primary); }
        .main-header .nav-link.active::after { width: 60%; }
        .header-cta {
            background: var(--primary);
            color: #fff;
            border-radius: 8px;
            padding: .55rem 1.5rem;
            font-weight: 600;
            font-size: .9rem;
            border: none;
            transition: all .25s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .header-cta:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .header-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .navbar-toggler { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--secondary); }
        .navbar-toggler:focus { box-shadow: none; }

        /* Hero */
        .hero {
            position: relative;
            padding: 110px 0 70px;
            background-image: url('/assets/images/backpic/back-1.png');
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }
        .hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, var(--bg-body) 25%, rgba(250, 247, 243, .92) 50%, rgba(250, 247, 243, .55) 100%);
            z-index: 1;
        }
        .hero .container { position: relative; z-index: 2; }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--primary-light);
            color: var(--primary-dark);
            font-size: .78rem;
            font-weight: 600;
            padding: 5px 14px;
            border-radius: 999px;
            margin-bottom: 20px;
        }
        .hero h1 {
            font-size: clamp(2.2rem, 4.5vw, 3.4rem);
            font-weight: 800;
            line-height: 1.2;
            color: var(--secondary);
            margin-bottom: 18px;
            letter-spacing: -.01em;
        }
        .hero h1 .accent { color: var(--primary); position: relative; }
        .hero-sub {
            font-size: 1.1rem;
            color: var(--ink-secondary);
            line-height: 1.7;
            max-width: 520px;
            margin-bottom: 32px;
        }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 20px; }
        .btn-primary-v2 {
            background: var(--primary);
            color: #fff;
            border-radius: 8px;
            padding: .8rem 2rem;
            font-weight: 600;
            font-size: .95rem;
            border: none;
            transition: all .25s;
            display: inline-flex;
            align-items: center;
            gap: 8px;
        }
        .btn-primary-v2::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
            transition: transform .25s;
        }
        .btn-primary-v2:hover { background: var(--primary-dark); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .btn-primary-v2:hover::after { transform: rotate(45deg) translateX(3px); }
        .btn-primary-v2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .btn-outline-v2 {
            background: transparent;
            color: var(--secondary);
            border: 1.5px solid var(--secondary);
            border-radius: 8px;
            padding: .75rem 1.9rem;
            font-weight: 600;
            font-size: .95rem;
            transition: all .25s;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-outline-v2:hover { background: var(--secondary); color: #fff; transform: translateY(-2px); }
        .btn-outline-v2:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .hero-trust {
            font-size: .78rem;
            color: var(--ink-secondary);
            display: flex;
            align-items: center;
            gap: 6px;
        }
        .hero-trust::before {
            content: '✓';
            color: var(--primary);
            font-weight: 700;
        }
        .hero-img-wrap {
            border-radius: 20px;
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            position: relative;
            transform: rotate(1.5deg);
        }
        .hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }
        .hero-img-card {
            position: absolute;
            bottom: 16px;
            left: 16px;
            background: rgba(34, 42, 38, .8);
            color: #fff;
            padding: 12px 18px;
            border-radius: 12px;
            font-size: .8rem;
            backdrop-filter: blur(6px);
            line-height: 1.5;
        }
        .hero-stats {
            margin-top: 64px;
            background: rgba(255, 255, 255, .85);
            border-radius: 16px;
            padding: 28px 32px;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
        }
        .hero-stats .col-4 {
            text-align: center;
            border-right: 1px solid var(--line);
            padding: 0 12px;
        }
        .hero-stats .col-4:last-child { border-right: none; }
        .hero-stats .data-num {
            font-family: "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
            font-size: 1.8rem;
            font-weight: 700;
            color: var(--secondary);
            display: block;
            line-height: 1.2;
            position: relative;
        }
        .hero-stats .data-num::after {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background: var(--accent);
            margin: 8px auto 0;
        }
        .hero-stats .data-label {
            font-size: .8rem;
            color: var(--ink-secondary);
            display: block;
            margin-top: 4px;
        }

        /* 痛点区 */
        .pain-section { padding: 100px 0; background: var(--bg-section); }
        .section-head { margin-bottom: 48px; max-width: 720px; }
        .section-head h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; margin-bottom: 8px; }
        .section-head .section-sub { font-size: .95rem; color: var(--ink-secondary); line-height: 1.6; }
        .pain-card {
            background: #fff;
            border-radius: 12px;
            padding: 1.8rem;
            border-left: 3px solid var(--primary);
            border-top: 1px solid var(--line);
            border-right: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            box-shadow: var(--shadow-sm);
            transition: all .3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            min-height: 220px;
        }
        .pain-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
        .pain-card .pain-icon { color: var(--primary); font-size: 1.6rem; margin-bottom: 14px; }
        .pain-card h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: 8px; color: var(--secondary); }
        .pain-card p { font-size: .88rem; color: var(--ink-secondary); line-height: 1.6; }
        .pain-card .pain-link {
            font-size: .8rem;
            color: var(--primary);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 16px;
            transition: gap .25s;
        }
        .pain-card .pain-link:hover { gap: 8px; }
        .card-offset { margin-top: 16px; }

        /* 方案区 */
        .solution-section { padding: 100px 0; background: var(--bg-body); }
        .solution-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 2rem;
            box-shadow: var(--shadow-sm);
            transition: all .3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .solution-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
        .solution-card .sol-img {
            border-radius: 10px;
            overflow: hidden;
            margin-bottom: 20px;
            height: 170px;
            position: relative;
        }
        .solution-card .sol-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
        .solution-card:hover .sol-img img { transform: scale(1.03); }
        .sol-icon {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            background: var(--primary-light);
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.3rem;
            margin-bottom: 18px;
        }
        .solution-card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 10px; }
        .solution-card p { font-size: .88rem; color: var(--ink-secondary); line-height: 1.65; flex: 1; }
        .solution-card .sol-link {
            font-size: .85rem;
            color: var(--primary);
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            margin-top: 16px;
            transition: gap .25s;
        }
        .solution-card .sol-link:hover { gap: 8px; }
        .solution-card-primary {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
            position: relative;
            transform: translateY(24px);
        }
        .solution-card-primary .sol-icon { background: rgba(255,255,255,.15); color: #fff; }
        .solution-card-primary h3 { color: #fff; }
        .solution-card-primary p { color: rgba(255,255,255,.85); }
        .solution-card-primary .sol-link { color: #fff; }
        .solution-card-primary:hover { background: var(--primary-dark); transform: translateY(18px); box-shadow: 0 18px 40px rgba(209,107,72,.28); }
        .sol-chip {
            position: absolute;
            top: 12px;
            right: 12px;
            background: rgba(34,42,38,.7);
            color: #fff;
            font-size: .72rem;
            padding: 2px 10px;
            border-radius: 999px;
            backdrop-filter: blur(4px);
        }

        /* 数据墙 */
        .data-section { background: var(--bg-dark); padding: 100px 0; color: #fff; }
        .data-section h2 { color: #fff; }
        .data-section .section-sub { color: rgba(255,255,255,.7); }
        .data-block {
            text-align: center;
            padding: 30px 20px;
            border-radius: 12px;
            border: 1px solid rgba(255,255,255,.06);
            transition: background .3s;
            height: 100%;
        }
        .data-block:hover { background: rgba(255,255,255,.04); }
        .data-block .data-num {
            font-family: "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
            font-size: clamp(2.4rem, 4vw, 3.4rem);
            font-weight: 800;
            color: var(--accent);
            display: block;
            line-height: 1.1;
        }
        .data-block .data-num::after {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background: var(--primary);
            margin: 14px auto 10px;
        }
        .data-block .data-label { font-size: .95rem; color: rgba(255,255,255,.75); }

        /* 资讯区 */
        .news-section { padding: 100px 0; background: var(--bg-body); }
        .section-head-row { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; margin-bottom: 48px; }
        .section-head-row h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; margin-bottom: 4px; }
        .link-more {
            color: var(--primary);
            font-weight: 600;
            font-size: .9rem;
            display: inline-flex;
            align-items: center;
            gap: 4px;
            transition: gap .25s;
        }
        .link-more:hover { gap: 8px; color: var(--primary-dark); }
        .news-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 1.6rem;
            box-shadow: var(--shadow-sm);
            transition: all .3s ease;
            height: 100%;
            display: flex;
            flex-direction: column;
        }
        .news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
        .news-tag {
            display: inline-block;
            background: var(--primary-light);
            color: var(--primary-dark);
            font-size: .72rem;
            font-weight: 600;
            padding: 3px 10px;
            border-radius: 4px;
            margin-bottom: 12px;
            align-self: flex-start;
        }
        .news-title { font-size: 1.02rem; font-weight: 700; line-height: 1.4; margin-bottom: 8px; }
        .news-title a { color: var(--secondary); transition: color .2s; }
        .news-title a:hover { color: var(--primary); }
        .news-desc {
            font-size: .85rem;
            color: var(--ink-secondary);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            margin-bottom: 14px;
            flex: 1;
        }
        .news-meta { display: flex; justify-content: space-between; align-items: center; font-size: .78rem; color: var(--ink-secondary); border-top: 1px solid var(--bg-section); padding-top: 12px; }
        .link-read { color: var(--primary); font-weight: 600; transition: color .2s; }
        .link-read:hover { color: var(--primary-dark); }
        .empty-state {
            border: 1px dashed var(--line);
            border-radius: 12px;
            background: var(--bg-section);
            padding: 48px 24px;
            text-align: center;
            color: var(--ink-secondary);
            font-size: .95rem;
        }
        .empty-state .empty-icon { font-size: 2.2rem; color: var(--line); margin-bottom: 8px; }

        /* 隐私区 */
        .privacy-section { padding: 80px 0; background: var(--bg-section); }
        .privacy-item { text-align: center; padding: 20px; border-radius: 12px; }
        .privacy-item .privacy-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto 14px;
            background: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--primary);
            font-size: 1.4rem;
            box-shadow: var(--shadow-sm);
        }
        .privacy-item h3 { font-size: 1rem; font-weight: 700; margin-bottom: 6px; }
        .privacy-item p { font-size: .82rem; color: var(--ink-secondary); line-height: 1.6; max-width: 260px; margin: 0 auto; }

        /* FAQ */
        .faq-section { padding: 100px 0; background: var(--bg-body); }
        .faq-item { margin-bottom: 14px; }
        .faq-item .accordion-button {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 10px !important;
            padding: 1.1rem 1.4rem;
            font-size: .95rem;
            font-weight: 600;
            color: var(--secondary);
            box-shadow: none;
            transition: all .25s;
        }
        .faq-item .accordion-button:not(.collapsed) {
            background: var(--bg-section);
            color: var(--primary);
            border-color: var(--line);
        }
        .faq-item .accordion-button:focus { box-shadow: none; border-color: var(--primary); }
        .faq-item .accordion-button::after {
            background-image: none;
            content: '+';
            font-size: 1.3rem;
            font-weight: 400;
            color: var(--primary);
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform .25s;
        }
        .faq-item .accordion-button:not(.collapsed)::after { transform: rotate(45deg); }
        .faq-item .accordion-body {
            background: var(--bg-body);
            border: 1px solid var(--line);
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 1.1rem 1.4rem;
            font-size: .88rem;
            color: var(--ink-secondary);
            line-height: 1.7;
        }

        /* CTA */
        .cta-section { background: var(--bg-dark); padding: 80px 0; text-align: center; color: #fff; position: relative; overflow: hidden; }
        .cta-section::before {
            content: '';
            position: absolute;
            top: -60px;
            right: -60px;
            width: 220px;
            height: 220px;
            border-radius: 50%;
            border: 2px solid rgba(255,255,255,.06);
        }
        .cta-section::after {
            content: '';
            position: absolute;
            bottom: -40px;
            left: -40px;
            width: 140px;
            height: 140px;
            border-radius: 50%;
            border: 1px solid rgba(255,255,255,.08);
        }
        .cta-section h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 800; margin-bottom: 12px; position: relative; z-index: 1; }
        .cta-section p { color: rgba(255,255,255,.75); font-size: 1rem; max-width: 560px; margin: 0 auto 32px; position: relative; z-index: 1; }
        .btn-ghost {
            background: transparent;
            color: #fff;
            border: 1px solid rgba(255,255,255,.6);
            border-radius: 8px;
            padding: .8rem 2rem;
            font-weight: 600;
            font-size: .95rem;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all .25s;
            position: relative;
            z-index: 1;
        }
        .btn-ghost::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-top: 2px solid #fff;
            border-right: 2px solid #fff;
            transform: rotate(45deg);
            transition: transform .25s;
        }
        .btn-ghost:hover { background: #fff; color: #222; border-color: #fff; transform: translateY(-2px); }
        .btn-ghost:hover::after { border-color: #222; transform: rotate(45deg) translateX(3px); }
        .btn-ghost:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

        /* 页脚 */
        .main-footer { background: var(--bg-dark); padding: 64px 0 0; color: rgba(255,255,255,.75); }
        .footer-brand .brand-text { color: #fff; }
        .footer-brand .brand-sub { color: rgba(255,255,255,.4); }
        .footer-brand p { font-size: .85rem; color: rgba(255,255,255,.6); margin-top: 14px; max-width: 300px; line-height: 1.7; }
        .footer-title { font-size: .95rem; font-weight: 700; color: #fff; margin-bottom: 18px; }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin-bottom: 10px; }
        .footer-links a { color: rgba(255,255,255,.65); font-size: .85rem; transition: color .2s; }
        .footer-links a:hover { color: #fff; }
        .footer-contact p { display: flex; align-items: center; gap: 10px; font-size: .85rem; color: rgba(255,255,255,.65); margin-bottom: 12px; }
        .footer-contact i { color: var(--primary); width: 18px; text-align: center; }
        .footer-bottom {
            border-top: 1px solid rgba(255,255,255,.1);
            margin-top: 48px;
            padding: 20px 0;
            text-align: center;
            font-size: .78rem;
            color: rgba(255,255,255,.5);
        }

        /* 弹层 */
        .modal-content { border-radius: 20px; border: none; background: var(--bg-body); box-shadow: var(--shadow-lg); overflow: hidden; }
        .modal-dialog { max-width: 720px; }
        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            width: 34px;
            height: 34px;
            border-radius: 50%;
            background: rgba(34,42,38,.06);
            border: none;
            color: var(--ink);
            font-size: 1.1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 5;
            transition: all .2s;
        }
        .modal-close:hover { background: var(--primary); color: #fff; }
        .modal-side {
            background: var(--secondary);
            color: #fff;
            padding: 2.5rem 2rem;
            border-radius: 0;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .modal-side h3 { color: #fff; font-size: 1.3rem; font-weight: 800; margin-bottom: 12px; }
        .modal-side p { color: rgba(255,255,255,.75); font-size: .88rem; line-height: 1.6; margin-bottom: 24px; }
        .modal-side ul { list-style: none; padding: 0; margin: 0; }
        .modal-side li {
            display: flex;
            align-items: center;
            gap: 12px;
            color: rgba(255,255,255,.85);
            font-size: .88rem;
            padding: 8px 0;
            border-bottom: 1px solid rgba(255,255,255,.06);
        }
        .modal-side li i { color: var(--accent); font-size: 1.05rem; }
        .modal-form { padding: 2.5rem 2rem; }
        .modal-form .form-label { font-size: .85rem; font-weight: 600; color: var(--secondary); }
        .modal-form .form-control {
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: .7rem 1rem;
            font-size: .9rem;
            background: #fff;
            transition: border-color .2s, box-shadow .2s;
        }
        .modal-form .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(209,107,72,.1);
        }
        .modal-form textarea.form-control { min-height: 90px; resize: vertical; }
        .btn-submit {
            background: var(--primary);
            color: #fff;
            border: none;
            border-radius: 8px;
            padding: .85rem 1.5rem;
            font-weight: 600;
            font-size: .95rem;
            width: 100%;
            transition: all .25s;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        .btn-submit:hover { background: var(--primary-dark); transform: translateY(-2px); box-shadow: var(--shadow-md); }
        .btn-submit:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
        .form-privacy {
            font-size: .75rem;
            color: var(--ink-secondary);
            text-align: center;
            margin-top: 12px;
            line-height: 1.5;
        }
        .modal-success {
            text-align: center;
            padding: 60px 20px;
        }
        .modal-success .success-icon {
            width: 68px;
            height: 68px;
            border-radius: 50%;
            background: rgba(40, 167, 69, .1);
            color: #28a745;
            font-size: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 16px;
        }
        .modal-success h4 { font-weight: 800; margin-bottom: 8px; }
        .modal-success p { color: var(--ink-secondary); font-size: .9rem; }

        /* 动画 */
        .fade-up {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .6s ease, transform .6s ease;
        }
        .fade-up.visible { opacity: 1; transform: translateY(0); }
        @media (prefers-reduced-motion: reduce) {
            * { animation: none !important; transition: none !important; }
            html { scroll-behavior: auto; }
            .fade-up { opacity: 1; transform: none; }
        }

        /* 响应式 */
        @media (max-width: 991.98px) {
            .main-header .navbar-collapse {
                background: #fff;
                border-radius: 12px;
                padding: 16px;
                margin-top: 10px;
                box-shadow: var(--shadow-md);
                border: 1px solid var(--line);
            }
            .main-header .navbar-nav { gap: 0; }
            .main-header .nav-link { padding: .6rem 1rem !important; }
            .solution-card-primary { transform: none; }
            .solution-card-primary:hover { transform: translateY(-4px); }
            .hero { padding: 80px 0 50px; }
            .hero-stats { margin-top: 40px; padding: 20px; }
            .hero-stats .data-num { font-size: 1.5rem; }
        }
        @media (max-width: 767.98px) {
            .topbar-left .hide-mobile { display: none; }
            .card-offset { margin-top: 0; }
            .hero { padding: 64px 0 40px; }
            .hero h1 { font-size: clamp(2rem, 6vw, 2.6rem); }
            .hero-sub { font-size: .95rem; }
            .hero-img-wrap { transform: none; }
            .hero-stats { padding: 16px 8px; }
            .hero-stats .data-num { font-size: 1.3rem; }
            .section-head-row { flex-direction: column; align-items: flex-start; gap: 8px; }
            .modal-side { border-radius: 20px 20px 0 0; padding: 2rem; }
            .modal-form { padding: 2rem; }
            .modal-dialog { margin: 16px; }
        }
        @media (max-width: 575.98px) {
            .container { padding-left: 16px; padding-right: 16px; }
            .topbar-left { font-size: .7rem; }
            .topbar-btn { padding: 1px 10px; font-size: .68rem !important; }
            .brand-text { font-size: 1.25rem; }
            .hero-actions .btn-primary-v2, .hero-actions .btn-outline-v2 { width: 100%; text-align: center; justify-content: center; }
            .pain-section, .solution-section, .news-section, .faq-section { padding: 64px 0; }
            .data-section { padding: 64px 0; }
            .privacy-section { padding: 56px 0; }
            .cta-section { padding: 56px 0; }
            .main-footer { padding: 48px 0 0; }
            .footer-bottom { margin-top: 32px; }
        }

/* roulang page: category1 */
:root {
            --primary: #D16B48;
            --primary-dark: #B85A3A;
            --primary-light: rgba(209, 107, 72, .12);
            --secondary: #2E3A33;
            --bg-body: #FAF7F3;
            --bg-section: #F2EDE6;
            --bg-dark: #222A26;
            --ink: #232A26;
            --ink-secondary: #6A756F;
            --line: #E5DED5;
            --accent: #D9A053;
            --shadow-sm: 0 2px 10px rgba(34, 42, 38, .06);
            --shadow-md: 0 8px 24px rgba(34, 42, 38, .08);
            --shadow-lg: 0 16px 44px rgba(34, 42, 38, .12);
            --radius-sm: 8px;
            --radius-md: 12px;
            --radius-lg: 20px;
        }
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", system-ui, -apple-system, sans-serif;
            background: var(--bg-body);
            color: var(--ink);
            font-size: 1rem;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a {
            color: inherit;
            text-decoration: none;
            transition: color .25s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
        }
        a:hover {
            color: var(--primary);
        }
        img {
            max-width: 100%;
            height: auto;
            display: block;
        }
        button,
        input,
        textarea {
            font-family: inherit;
        }
        .container {
            max-width: 1200px;
            padding-left: 24px;
            padding-right: 24px;
        }
        .observe-section {
            opacity: 0;
            transform: translateY(20px);
            transition: opacity .6s ease, transform .6s ease;
        }
        .observe-section.revealed {
            opacity: 1;
            transform: none;
        }
        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto;
            }
            *,
            *::before,
            *::after {
                transition: none !important;
                animation: none !important;
            }
            .observe-section {
                opacity: 1;
                transform: none;
            }
        }

        /* ===== Buttons ===== */
        .btn-main,
        .btn-outline,
        .btn-outline-light {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: .5rem;
            padding: .85rem 2rem;
            font-weight: 600;
            font-size: .95rem;
            border-radius: 8px;
            border: 0;
            transition: all .25s ease;
            cursor: pointer;
            text-decoration: none;
            line-height: 1.4;
            white-space: nowrap;
        }
        .btn-main {
            background: var(--primary);
            color: #fff;
            box-shadow: var(--shadow-sm);
        }
        .btn-main:hover {
            background: var(--primary-dark);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .btn-main i {
            transition: transform .25s ease;
        }
        .btn-main:hover i {
            transform: translateX(4px);
        }
        .btn-outline {
            background: transparent;
            border: 1.5px solid var(--secondary);
            color: var(--secondary);
        }
        .btn-outline:hover {
            background: var(--secondary);
            color: #fff;
        }
        .btn-outline-light {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, .6);
            color: #fff;
        }
        .btn-outline-light:hover {
            background: #fff;
            color: #222;
        }
        .btn-main:focus-visible,
        .btn-outline:focus-visible,
        .btn-outline-light:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* ===== Header / Nav ===== */
        .main-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(250, 247, 243, .92);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border-bottom: 1px solid var(--line);
        }
        .main-header .navbar {
            min-height: 72px;
            padding: 0;
        }
        .navbar-brand {
            gap: .5rem;
            padding: 0;
        }
        .brand-text {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--secondary);
            letter-spacing: .02em;
            line-height: 1;
        }
        .brand-dot {
            color: var(--primary);
            position: relative;
            display: inline-block;
        }
        .brand-dot::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 2px;
            width: 100%;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
        }
        .brand-sub {
            font-size: .75rem;
            color: var(--ink-secondary);
            font-family: "DIN Alternate", "Bahnschrift", "Arial Narrow", sans-serif;
            letter-spacing: .04em;
        }
        .navbar-toggler {
            border: 1px solid var(--line);
            border-radius: 8px;
            width: 42px;
            height: 42px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--secondary);
            background: transparent;
            padding: 0;
        }
        .navbar-toggler:focus {
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        .navbar-nav {
            gap: 2.5rem;
        }
        .navbar-nav .nav-link {
            font-size: .95rem;
            font-weight: 600;
            color: var(--ink);
            padding: .5rem 0;
            position: relative;
            display: inline-block;
        }
        .navbar-nav .nav-link::after {
            content: '';
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
            transform: translateX(-50%);
            transition: width .3s ease;
        }
        .navbar-nav .nav-link:hover {
            color: var(--primary);
        }
        .navbar-nav .nav-link:hover::after {
            width: 100%;
        }
        .navbar-nav .nav-link.active {
            color: var(--primary);
        }
        .navbar-nav .nav-link.active::after {
            width: 100%;
        }
        .header-cta {
            display: inline-flex;
            align-items: center;
            gap: .5rem;
            padding: .6rem 1.5rem;
            background: var(--secondary);
            color: #fff;
            border-radius: 999px;
            font-size: .9rem;
            font-weight: 600;
            text-decoration: none;
            transition: all .25s ease;
            border: 0;
        }
        .header-cta:hover {
            background: var(--primary);
            color: #fff;
            transform: translateY(-2px);
            box-shadow: var(--shadow-md);
        }
        .header-cta:focus-visible {
            outline: 2px solid var(--accent);
            outline-offset: 2px;
        }

        /* ===== Page Hero ===== */
        .page-hero {
            background: linear-gradient(135deg, #1A211E 0%, var(--bg-dark) 70%), url('/assets/images/backpic/back-1.png') center/cover no-repeat;
            background-blend-mode: overlay;
            padding: 110px 0 90px;
            position: relative;
            overflow: hidden;
        }
        .page-hero::after {
            content: '';
            position: absolute;
            right: -120px;
            top: -120px;
            width: 360px;
            height: 360px;
            border-radius: 50%;
            border: 40px solid rgba(209, 107, 72, .12);
            pointer-events: none;
        }
        .page-hero .container {
            position: relative;
            z-index: 2;
        }
        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: .4rem;
            background: rgba(209, 107, 72, .15);
            color: #E8A184;
            border: 1px solid rgba(209, 107, 72, .3);
            padding: .35rem 1rem;
            border-radius: 999px;
            font-size: .8rem;
            font-weight: 600;
            margin-bottom: 1.4rem;
            letter-spacing: .02em;
        }
        .page-hero h1 {
            font-size: clamp(2.2rem, 4.5vw, 3.4rem);
            font-weight: 800;
            color: #fff;
            line-height: 1.2;
            margin-bottom: 1rem;
            letter-spacing: .02em;
        }
        .page-hero h1 span {
            color: var(--primary);
        }
        .hero-subtitle {
            font-size: 1.05rem;
            color: rgba(255, 255, 255, .75);
            max-width: 620px;
            margin-bottom: 2rem;
            line-height: 1.7;
        }
        .hero-actions {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            margin-bottom: 1.8rem;
        }
        .hero-meta {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .8rem;
            color: rgba(255, 255, 255, .55);
        }
        .hero-meta .dot {
            color: var(--primary);
            font-weight: 700;
        }

        /* ===== Page Intro ===== */
        .page-intro {
            background: var(--bg-body);
            padding: 60px 0 40px;
        }
        .page-intro .intro-text {
            max-width: 860px;
            font-size: 1rem;
            color: var(--ink-secondary);
            line-height: 1.85;
            border-left: 3px solid var(--primary);
            background: var(--bg-section);
            padding: 1.2rem 1.5rem;
            border-radius: 0 12px 12px 0;
        }

        /* ===== Section Head ===== */
        .section-head {
            text-align: center;
            max-width: 720px;
            margin: 0 auto 3rem;
        }
        .section-head h2 {
            font-size: clamp(1.6rem, 2.8vw, 2.2rem);
            font-weight: 800;
            color: var(--secondary);
            margin-bottom: .75rem;
            line-height: 1.3;
        }
        .section-head p {
            color: var(--ink-secondary);
            font-size: .95rem;
            line-height: 1.7;
        }
        .section-head .head-line {
            width: 40px;
            height: 3px;
            background: var(--primary);
            border-radius: 3px;
            margin: .8rem auto 0;
        }

        /* ===== Solution Cards ===== */
        .solution-cards {
            background: var(--bg-section);
            padding: 100px 0;
        }
        .solution-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            box-shadow: var(--shadow-sm);
            overflow: hidden;
            display: flex;
            flex-direction: column;
            transition: transform .3s ease, box-shadow .3s ease;
            height: 100%;
        }
        .solution-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }
        .solution-card .card-img {
            overflow: hidden;
            aspect-ratio: 16/10;
            background: var(--bg-section);
        }
        .solution-card .card-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform .4s ease;
        }
        .solution-card:hover .card-img img {
            transform: scale(1.04);
        }
        .solution-card .card-body {
            padding: 1.6rem 1.5rem 1.5rem;
            display: flex;
            flex-direction: column;
            flex: 1;
        }
        .solution-card h3 {
            font-size: 1.2rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: .6rem;
            line-height: 1.45;
            transition: color .25s ease;
        }
        .solution-card:hover h3 {
            color: var(--primary);
        }
        .solution-card p {
            font-size: .9rem;
            color: var(--ink-secondary);
            line-height: 1.75;
            margin-bottom: 1rem;
            flex: 1;
        }
        .solution-card .card-link {
            display: inline-flex;
            align-items: center;
            gap: .35rem;
            font-size: .9rem;
            font-weight: 600;
            color: var(--primary);
            transition: gap .25s ease;
        }
        .solution-card .card-link:hover {
            gap: .6rem;
        }
        .solution-card.offset-sm {
            margin-top: 24px;
        }

        /* ===== Process ===== */
        .process-section {
            background: var(--bg-dark);
            padding: 100px 0;
            color: #fff;
        }
        .process-section .section-head h2 {
            color: #fff;
        }
        .process-section .section-head p {
            color: rgba(255, 255, 255, .7);
        }
        .process-section .section-head .head-line {
            background: var(--primary);
        }
        .process-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
            margin-top: 2rem;
        }
        .process-item {
            background: rgba(255, 255, 255, .04);
            border: 1px solid rgba(255, 255, 255, .08);
            border-radius: var(--radius-md);
            padding: 2rem 1.5rem;
            transition: background .3s ease, transform .3s ease;
            position: relative;
        }
        .process-item:hover {
            background: rgba(255, 255, 255, .08);
            transform: translateY(-4px);
        }
        .process-item .step-num {
            font-family: "DIN Alternate", "Bahnschrift", sans-serif;
            font-size: 2.2rem;
            font-weight: 800;
            color: var(--accent);
            line-height: 1;
            display: block;
            margin-bottom: 1rem;
        }
        .process-item .step-num::after {
            content: '';
            display: block;
            width: 30px;
            height: 2px;
            background: var(--primary);
            margin-top: .6rem;
            border-radius: 2px;
        }
        .process-item h3 {
            font-size: 1.1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: .5rem;
        }
        .process-item p {
            font-size: .85rem;
            color: rgba(255, 255, 255, .65);
            line-height: 1.7;
            margin: 0;
        }

        /* ===== Scenario ===== */
        .scenario-section {
            background: var(--bg-body);
            padding: 100px 0;
        }
        .scenario-card {
            background: var(--bg-section);
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            padding: 2rem 1.6rem;
            transition: transform .3s ease, box-shadow .3s ease;
            height: 100%;
            position: relative;
            overflow: hidden;
        }
        .scenario-card::before {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 3px;
            background: var(--primary);
            border-radius: 0 3px 3px 0;
        }
        .scenario-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-md);
        }
        .scenario-card .scenario-icon {
            width: 48px;
            height: 48px;
            border-radius: 12px;
            background: var(--primary-light);
            color: var(--primary);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 1.4rem;
            margin-bottom: 1rem;
        }
        .scenario-card h3 {
            font-size: 1.15rem;
            font-weight: 700;
            color: var(--secondary);
            margin-bottom: .6rem;
        }
        .scenario-card p {
            font-size: .9rem;
            color: var(--ink-secondary);
            line-height: 1.75;
            margin: 0;
        }

        /* ===== FAQ ===== */
        .faq-section {
            background: var(--bg-section);
            padding: 100px 0;
        }
        .faq-wrap {
            max-width: 800px;
            margin: 0 auto;
        }
        .accordion-item {
            background: #fff;
            border: 1px solid var(--line) !important;
            border-radius: 10px !important;
            margin-bottom: 1rem;
            overflow: hidden;
            box-shadow: var(--shadow-sm);
        }
        .accordion-button {
            background: #fff;
            color: var(--secondary);
            font-size: 1rem;
            font-weight: 600;
            padding: 1.1rem 1.4rem;
            border: 0;
            box-shadow: none;
            gap: .75rem;
        }
        .accordion-button::after {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%232E3A33' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
            transition: transform .3s ease;
            flex-shrink: 0;
        }
        .accordion-button:not(.collapsed) {
            background: var(--bg-section);
            color: var(--secondary);
            box-shadow: none;
        }
        .accordion-button:not(.collapsed)::after {
            transform: rotate(45deg);
        }
        .accordion-button:focus {
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        .accordion-body {
            background: #fff;
            color: var(--ink-secondary);
            font-size: .92rem;
            line-height: 1.8;
            padding: 0 1.4rem 1.4rem;
            border-top: 1px solid var(--line);
        }

        /* ===== CTA ===== */
        .cta-section {
            background: var(--bg-dark);
            padding: 80px 0;
            text-align: center;
            position: relative;
            overflow: hidden;
        }
        .cta-section::before {
            content: '';
            position: absolute;
            left: 50%;
            top: -80px;
            transform: translateX(-50%);
            width: 420px;
            height: 200px;
            background: radial-gradient(ellipse, rgba(209, 107, 72, .2), transparent 70%);
            pointer-events: none;
        }
        .cta-section h3 {
            font-size: clamp(1.4rem, 2.6vw, 2rem);
            font-weight: 800;
            color: #fff;
            margin-bottom: 1rem;
            line-height: 1.4;
            position: relative;
        }
        .cta-section p {
            color: rgba(255, 255, 255, .7);
            font-size: .95rem;
            max-width: 560px;
            margin: 0 auto 2rem;
            position: relative;
        }
        .cta-section .btn-main {
            position: relative;
            font-size: 1rem;
            padding: .95rem 2.4rem;
        }
        .cta-trust {
            margin-top: 1.5rem;
            font-size: .8rem;
            color: rgba(255, 255, 255, .5);
            position: relative;
        }

        /* ===== Footer ===== */
        .main-footer {
            background: var(--bg-dark);
            padding: 64px 0 0;
            color: rgba(255, 255, 255, .75);
        }
        .footer-brand .brand-text {
            font-size: 1.6rem;
            color: #fff;
        }
        .footer-brand .brand-sub {
            color: rgba(255, 255, 255, .5);
            font-size: .75rem;
            margin-left: .5rem;
        }
        .footer-brand p {
            font-size: .9rem;
            color: rgba(255, 255, 255, .6);
            line-height: 1.8;
            margin-top: 1rem;
            max-width: 300px;
        }
        .footer-title {
            font-size: 1rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 1.2rem;
            position: relative;
            padding-bottom: .6rem;
        }
        .footer-title::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 28px;
            height: 2px;
            background: var(--primary);
            border-radius: 2px;
        }
        .footer-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-links li {
            margin-bottom: .6rem;
        }
        .footer-links a {
            color: rgba(255, 255, 255, .75);
            font-size: .9rem;
            transition: color .25s ease, padding-left .25s ease;
        }
        .footer-links a:hover {
            color: #fff;
            padding-left: 4px;
        }
        .footer-contact p {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .9rem;
            color: rgba(255, 255, 255, .75);
            margin-bottom: .6rem;
        }
        .footer-contact i {
            color: var(--primary);
            font-size: .95rem;
            width: 18px;
            text-align: center;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .1);
            margin-top: 48px;
            padding: 20px 0;
        }
        .footer-bottom .container {
            font-size: .8rem;
            color: rgba(255, 255, 255, .5);
            text-align: center;
        }

        /* ===== Modal ===== */
        .modal-content {
            border: 0;
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-lg);
            overflow: hidden;
            background: var(--bg-body);
        }
        .modal-dialog {
            max-width: 720px;
        }
        .modal .btn-close {
            position: absolute;
            right: 16px;
            top: 16px;
            z-index: 5;
            background: transparent;
            opacity: .7;
            font-size: 1rem;
        }
        .modal .btn-close:hover {
            opacity: 1;
        }
        .modal-aside {
            background: var(--secondary);
            color: #fff;
            padding: 2.5rem 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .modal-aside h3 {
            font-size: 1.4rem;
            font-weight: 700;
            margin-bottom: .75rem;
            color: #fff;
        }
        .modal-aside p {
            font-size: .9rem;
            color: rgba(255, 255, 255, .7);
            margin-bottom: 1.5rem;
            line-height: 1.7;
        }
        .modal-aside ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .modal-aside li {
            display: flex;
            align-items: center;
            gap: .6rem;
            font-size: .9rem;
            color: rgba(255, 255, 255, .85);
            margin-bottom: .75rem;
        }
        .modal-aside li i {
            color: var(--primary);
            font-size: 1.1rem;
        }
        .modal-form {
            padding: 2.5rem 2rem;
        }
        .modal-form label {
            font-size: .85rem;
            font-weight: 600;
            color: var(--secondary);
            margin-bottom: .35rem;
        }
        .modal-form .form-control {
            border: 1px solid var(--line);
            border-radius: 10px;
            padding: .7rem 1rem;
            font-size: .9rem;
            background: #fff;
            color: var(--ink);
        }
        .modal-form .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-light);
        }
        .privacy-note {
            font-size: .75rem;
            color: var(--ink-secondary);
            text-align: center;
            margin-top: 1rem;
            line-height: 1.6;
        }
        .form-success {
            display: none;
            text-align: center;
            padding: 2.5rem 0;
        }
        .form-success .success-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(40, 167, 69, .12);
            color: #28a745;
            font-size: 2rem;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }
        .form-success p {
            font-size: 1rem;
            font-weight: 600;
            color: var(--secondary);
        }
        .form-success span {
            font-size: .85rem;
            color: var(--ink-secondary);
            display: block;
            margin-top: .4rem;
        }

        /* ===== Responsive ===== */
        @media (max-width: 991.98px) {
            .navbar-nav {
                gap: 1rem;
                margin-top: 1rem;
            }
            .navbar-nav .nav-link {
                padding: .5rem 0;
                font-size: 1rem;
            }
            .header-cta {
                margin-top: .8rem;
                width: 100%;
                justify-content: center;
            }
            .page-hero {
                padding: 80px 0 64px;
            }
            .process-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .solution-card.offset-sm {
                margin-top: 0;
            }
        }
        @media (max-width: 767.98px) {
            .container {
                padding-left: 16px;
                padding-right: 16px;
            }
            .main-header .navbar {
                min-height: 60px;
            }
            .brand-text {
                font-size: 1.3rem;
            }
            .page-hero h1 {
                font-size: 2rem;
            }
            .hero-subtitle {
                font-size: .95rem;
            }
            .hero-actions {
                flex-direction: column;
                align-items: stretch;
            }
            .hero-actions .btn-main,
            .hero-actions .btn-outline-light {
                width: 100%;
            }
            .solution-cards,
            .process-section,
            .scenario-section,
            .faq-section {
                padding: 64px 0;
            }
            .process-grid {
                grid-template-columns: 1fr;
            }
            .modal-aside {
                padding: 1.8rem 1.5rem;
            }
            .modal-form {
                padding: 1.8rem 1.5rem;
            }
            .cta-section {
                padding: 64px 0;
            }
            .main-footer {
                padding-top: 48px;
            }
        }
        @media (max-width: 575.98px) {
            .section-head h2 {
                font-size: 1.4rem;
            }
            .modal-dialog {
                margin: 16px;
            }
            .footer-bottom .container {
                font-size: .75rem;
            }
        }

/* roulang page: article */
:root {
            --primary:#D16B48;
            --primary-dark:#B85A3A;
            --primary-light:rgba(209,107,72,.12);
            --secondary:#2E3A33;
            --bg-body:#FAF7F3;
            --bg-section:#F2EDE6;
            --bg-dark:#222A26;
            --ink:#232A26;
            --ink-secondary:#6A756F;
            --line:#E5DED5;
            --accent:#D9A053;
            --shadow-sm:0 2px 10px rgba(34,42,38,.06);
            --shadow-md:0 8px 24px rgba(34,42,38,.08);
            --shadow-lg:0 16px 44px rgba(34,42,38,.12);
            --radius-sm:8px;
            --radius-md:12px;
            --radius-lg:20px;
            --font-cn:"PingFang SC","Microsoft YaHei","Noto Sans SC","Source Han Sans SC",system-ui,-apple-system,sans-serif;
            --font-num:"DIN Alternate","Bahnschrift","Arial Narrow",sans-serif;
        }
        *,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{font-family:var(--font-cn);font-size:1rem;line-height:1.75;color:var(--ink);background:var(--bg-body);-webkit-font-smoothing:antialiased}
        img{max-width:100%;height:auto;display:block}
        a{color:var(--primary);text-decoration:none;transition:all .25s ease}
        a:hover{color:var(--primary-dark)}
        ul,ol{padding-left:1.25rem}
        button{border:none;background:none;cursor:pointer;font-family:inherit}
        input,textarea{font-family:inherit}
        .container{max-width:1200px;padding-left:24px;padding-right:24px}

        /* ===== Header ===== */
        .main-header{position:sticky;top:0;z-index:1000;background:rgba(250,247,243,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
        .main-header .navbar{min-height:72px;padding:.5rem 0}
        .navbar-brand{display:flex;align-items:center;gap:.5rem}
        .brand-text{font-size:1.4rem;font-weight:800;color:var(--secondary);line-height:1.2;letter-spacing:.02em}
        .brand-dot{color:var(--primary)}
        .brand-sub{font-size:.72rem;color:var(--ink-secondary);font-weight:500;padding-left:10px;border-left:1px solid var(--line)}
        .navbar-nav{gap:.25rem}
        .main-header .nav-link{display:inline-block;font-size:.95rem;font-weight:600;color:var(--ink);padding:.6rem 1rem!important;border-radius:var(--radius-sm);position:relative;transition:color .25s ease}
        .main-header .nav-link::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:3px;border-radius:3px;background:var(--primary);transition:width .3s ease}
        .main-header .nav-link:hover,.main-header .nav-link.active{color:var(--primary)}
        .main-header .nav-link:hover::after,.main-header .nav-link.active::after{width:24px}
        .header-cta{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:#fff;padding:.65rem 1.6rem;border-radius:999px;font-size:.9rem;font-weight:600;transition:all .25s ease;white-space:nowrap}
        .header-cta:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}
        .navbar-toggler{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.4rem .65rem;color:var(--secondary);font-size:1rem}
        .navbar-toggler:focus{box-shadow:none;border-color:var(--primary)}

        /* ===== Breadcrumb ===== */
        .breadcrumb-bar{padding:28px 0 4px;font-size:.875rem;color:var(--ink-secondary)}
        .breadcrumb-bar .container{display:flex;align-items:center;flex-wrap:wrap;gap:4px}
        .breadcrumb-bar a{color:var(--ink-secondary);transition:color .2s ease}
        .breadcrumb-bar a:hover{color:var(--primary)}
        .breadcrumb-sep{color:var(--line);margin:0 6px}
        .breadcrumb-current{color:var(--primary);font-weight:600;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

        /* ===== Article Main ===== */
        .article-main{padding:32px 0 80px}
        .article-container{max-width:760px;margin:0 auto;padding:0 16px}
        .article-header{text-align:center;padding-bottom:36px;margin-bottom:40px;border-bottom:1px solid var(--line);position:relative}
        .article-header::after{content:'';display:block;width:48px;height:3px;background:var(--primary);border-radius:3px;margin:28px auto 0}
        .article-category{display:inline-block;padding:.3rem .9rem;background:var(--primary-light);color:var(--primary-dark);font-size:.78rem;font-weight:600;border-radius:4px;margin-bottom:18px}
        .article-title{font-size:clamp(1.8rem,3.4vw,2.5rem);font-weight:800;line-height:1.3;color:var(--secondary);margin-bottom:18px;letter-spacing:.01em}
        .article-meta{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-size:.875rem;color:var(--ink-secondary);margin-bottom:20px}
        .meta-item{display:inline-flex;align-items:center;gap:.4rem}
        .meta-item i{color:var(--primary);font-size:.9rem}
        .article-excerpt{background:var(--bg-section);border-left:3px solid var(--primary);border-radius:var(--radius-sm);padding:1rem 1.25rem;font-size:.95rem;color:var(--ink-secondary);text-align:left;line-height:1.7;margin-bottom:0;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}

        /* Article content */
        .article-content{font-size:17px;line-height:1.85;color:var(--ink);overflow-wrap:break-word;word-break:break-word}
        .article-content>p{margin-bottom:1.5rem}
        .article-content h2{font-size:1.5rem;font-weight:800;color:var(--secondary);margin-top:2.8rem;margin-bottom:1rem;padding-left:.8rem;border-left:4px solid var(--primary);line-height:1.4}
        .article-content h3{font-size:1.25rem;font-weight:700;color:var(--secondary);margin-top:2.2rem;margin-bottom:.75rem}
        .article-content h4{font-size:1.05rem;font-weight:700;color:var(--secondary);margin-top:1.8rem;margin-bottom:.5rem}
        .article-content img{border-radius:var(--radius-md);margin:1.5rem 0;box-shadow:var(--shadow-md)}
        .article-content blockquote{border-left:4px solid var(--primary);background:var(--bg-section);padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 var(--radius-sm) var(--radius-sm) 0;color:var(--ink-secondary)}
        .article-content blockquote p{margin:0}
        .article-content ul{padding-left:1.5rem;margin:1.5rem 0}
        .article-content ol{padding-left:1.5rem;margin:1.5rem 0}
        .article-content li{margin-bottom:.75rem;line-height:1.8}
        .article-content li::marker{color:var(--primary);font-weight:600}
        .article-content a{color:var(--primary);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(209,107,72,.35)}
        .article-content a:hover{color:var(--primary-dark);text-decoration-color:var(--primary-dark)}
        .article-content strong{font-weight:700;color:var(--secondary)}
        .article-content code{background:var(--bg-section);border:1px solid var(--line);padding:.15rem .45rem;border-radius:4px;font-size:.9em;font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace}
        .article-content pre{background:var(--bg-dark);color:#e8e8e8;padding:1.25rem;border-radius:var(--radius-md);overflow-x:auto;font-size:.9rem;line-height:1.7}
        .article-content pre code{background:none;border:none;padding:0;color:inherit}

        /* Tags & source */
        .article-tags{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:40px 0 16px;padding-top:24px;border-top:1px solid var(--line)}
        .tags-label{font-size:.875rem;color:var(--ink-secondary);font-weight:600;margin-right:.2rem}
        .tag-item{display:inline-block;padding:.3rem .8rem;background:var(--bg-section);border-radius:4px;font-size:.82rem;color:var(--ink);font-weight:500;transition:all .25s ease;border:1px solid transparent}
        .tag-item:hover{background:var(--primary);color:#fff;border-color:var(--primary)}
        .article-source{margin-top:12px;font-size:.85rem;color:var(--ink-secondary);text-align:center;padding-bottom:32px}

        /* ===== Empty State ===== */
        .empty-state-wrap{text-align:center;padding:80px 16px}
        .empty-state{border:2px dashed var(--line);border-radius:var(--radius-lg);background:var(--bg-body);padding:56px 24px;max-width:520px;margin:0 auto}
        .empty-state i{font-size:3rem;color:var(--line);display:block;margin-bottom:16px}
        .empty-state h2{font-size:1.4rem;font-weight:800;color:var(--secondary);margin-bottom:8px}
        .empty-state p{color:var(--ink-secondary);margin-bottom:20px;font-size:.95rem}
        .btn-brand-primary{display:inline-flex;align-items:center;gap:.5rem;background:var(--primary);color:#fff;padding:.75rem 1.8rem;border-radius:999px;font-size:.95rem;font-weight:600;transition:all .25s ease;border:none}
        .btn-brand-primary:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:var(--shadow-md)}

        /* ===== Related Section ===== */
        .related-section{background:var(--bg-section);padding:72px 0}
        .section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
        .section-head h2{font-size:clamp(1.4rem,2.4vw,1.8rem);font-weight:800;color:var(--secondary)}
        .related-link{display:inline-flex;align-items:center;gap:.4rem;font-size:.9rem;font-weight:600;color:var(--primary);transition:color .25s ease}
        .related-link:hover{color:var(--primary-dark)}
        .related-link i{transition:transform .25s ease}
        .related-link:hover i{transform:translateX(4px)}
        .related-card-link{display:block;height:100%}
        .related-card-link:hover{text-decoration:none}
        .related-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);padding:24px;height:100%;box-shadow:var(--shadow-sm);transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;display:flex;flex-direction:column}
        .related-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
        .related-card .card-cat{display:inline-block;align-self:flex-start;font-size:.75rem;font-weight:600;background:var(--primary-light);color:var(--primary-dark);padding:.25rem .7rem;border-radius:4px;margin-bottom:12px}
        .related-card h3{font-size:1.05rem;font-weight:700;color:var(--secondary);line-height:1.5;margin-bottom:8px;transition:color .25s ease}
        .related-card-link:hover h3{color:var(--primary)}
        .related-card p{font-size:.875rem;color:var(--ink-secondary);line-height:1.7;margin-bottom:16px;flex-grow:1}
        .related-card .card-time{font-size:.78rem;color:var(--ink-secondary);display:flex;align-items:center;gap:.4rem}

        /* ===== CTA ===== */
        .article-cta{background:var(--bg-dark);padding:72px 0;text-align:center;position:relative;overflow:hidden}
        .article-cta::before{content:'';position:absolute;top:-50%;right:-10%;width:480px;height:480px;border-radius:50%;background:radial-gradient(circle,rgba(209,107,72,.12) 0%,transparent 70%);pointer-events:none}
        .article-cta::after{content:'';position:absolute;bottom:-30%;left:-5%;width:320px;height:320px;border-radius:50%;background:radial-gradient(circle,rgba(217,160,83,.08) 0%,transparent 70%);pointer-events:none}
        .article-cta .container{position:relative;z-index:1}
        .article-cta h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;margin-bottom:12px}
        .article-cta p{color:rgba(255,255,255,.7);max-width:520px;margin:0 auto 32px;font-size:1rem}
        .cta-btn{display:inline-flex;align-items:center;gap:.6rem;background:var(--primary);color:#fff;padding:.85rem 2.2rem;border-radius:999px;font-size:1rem;font-weight:600;transition:all .3s ease}
        .cta-btn:hover{background:var(--primary-dark);color:#fff;transform:translateY(-2px);box-shadow:0 8px 32px rgba(209,107,72,.35)}

        /* ===== Footer ===== */
        .main-footer{background:var(--bg-dark);padding:64px 0 0;color:rgba(255,255,255,.75)}
        .footer-brand .brand-text{color:#fff}
        .footer-brand .brand-sub{color:rgba(255,255,255,.5);border-color:rgba(255,255,255,.15)}
        .footer-brand p{margin-top:14px;font-size:.875rem;color:rgba(255,255,255,.55);line-height:1.75;max-width:280px}
        .footer-title{color:#fff;font-size:1rem;font-weight:700;margin-bottom:18px;letter-spacing:.02em}
        .footer-links{list-style:none;padding:0;margin:0}
        .footer-links li{margin-bottom:10px}
        .footer-links a{color:rgba(255,255,255,.75);font-size:.9rem;transition:color .25s ease,padding-left .25s ease;display:inline-block}
        .footer-links a:hover{color:#fff;padding-left:4px}
        .footer-contact p{font-size:.9rem;color:rgba(255,255,255,.65);margin-bottom:10px;display:flex;align-items:center;gap:10px}
        .footer-contact i{color:var(--primary)}
        .footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;margin-top:48px}
        .footer-bottom .container{text-align:center;color:rgba(255,255,255,.5);font-size:.78rem}

        /* ===== Modal ===== */
        .modal-content{border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;background:var(--bg-body)}
        .modal-body{position:relative;padding:0!important}
        .custom-close{position:absolute;top:16px;right:16px;z-index:10;background:rgba(250,247,243,.9);border-radius:50%;width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--ink);font-size:1rem;transition:all .25s ease;box-shadow:var(--shadow-sm)}
        .custom-close:hover{background:var(--primary);color:#fff;transform:rotate(90deg)}
        .modal-aside{background:var(--secondary);color:#fff;padding:40px 32px;display:flex;flex-direction:column;justify-content:center;height:100%}
        .aside-badge{width:48px;height:48px;border-radius:12px;background:rgba(209,107,72,.2);color:var(--primary);display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:18px}
        .modal-aside h3{font-size:1.5rem;font-weight:800;margin-bottom:12px;line-height:1.4}
        .modal-aside p{color:rgba(255,255,255,.65);font-size:.9rem;margin-bottom:24px;line-height:1.7}
        .aside-points{list-style:none;padding:0;margin:0}
        .aside-points li{display:flex;align-items:center;gap:10px;font-size:.875rem;color:rgba(255,255,255,.8);margin-bottom:12px}
        .aside-points i{color:var(--accent);font-size:.9rem}
        .modal-form-wrap{padding:40px 36px}
        .modal-form-wrap h4{font-size:1.25rem;font-weight:700;color:var(--secondary);margin-bottom:4px}
        .form-sub{font-size:.85rem;color:var(--ink-secondary);margin-bottom:24px;display:block}
        .form-label{font-size:.875rem;font-weight:600;color:var(--secondary);margin-bottom:6px}
        .form-control{border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7rem 1rem;font-size:.95rem;color:var(--ink);background:#fff;transition:border-color .25s ease,box-shadow .25s ease}
        .form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(209,107,72,.12);outline:none}
        .form-control::placeholder{color:#b5bdb8}
        textarea.form-control{resize:vertical;min-height:90px}
        .submit-btn{display:block;width:100%;background:var(--primary);color:#fff;border:none;border-radius:var(--radius-sm);padding:.8rem 1rem;font-size:.95rem;font-weight:600;transition:all .25s ease}
        .submit-btn:hover{background:var(--primary-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}
        .privacy-note{margin-top:12px;font-size:.75rem;color:var(--ink-secondary);text-align:center;line-height:1.6}
        .form-success{display:none;text-align:center;padding:16px 0}
        .form-success.show{display:block}
        .form-success i{font-size:3rem;color:#4caf7d;display:block;margin-bottom:12px}
        .form-success h5{font-weight:700;color:var(--secondary);margin-bottom:6px}
        .form-success p{font-size:.875rem;color:var(--ink-secondary)}

        /* ===== Responsive ===== */
        @media (max-width:991px){
            .navbar-collapse{background:var(--bg-body);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:16px;margin-top:12px;border:1px solid var(--line)}
            .navbar-nav{gap:0}
            .main-header .nav-link{padding:.8rem 1rem!important}
            .header-cta{margin-top:12px;justify-content:center}
            .modal-aside{padding:32px 28px}
            .modal-form-wrap{padding:32px 28px}
        }
        @media (max-width:767px){
            .container{padding-left:16px;padding-right:16px}
            .main-header .navbar{min-height:60px;padding:.5rem 0}
            .article-main{padding:24px 0 56px}
            .article-header{padding-bottom:28px;margin-bottom:32px}
            .article-meta{gap:12px}
            .article-container{padding:0 8px}
            .article-content{font-size:16px;line-height:1.75}
            .related-section{padding:48px 0}
            .article-cta{padding:56px 0}
            .main-footer{padding:48px 0 0}
            .footer-bottom{margin-top:32px}
            .modal-aside{height:auto}
        }
        @media (max-width:575px){
            .brand-sub{display:none}
            .article-title{font-size:1.6rem}
            .article-meta{flex-direction:column;gap:6px;align-items:flex-start}
            .article-excerpt{font-size:.875rem;padding:.9rem 1rem}
            .section-head{flex-direction:column;align-items:flex-start;gap:8px}
            .custom-close{top:12px;right:12px;width:32px;height:32px}
            .modal-form-wrap{padding:28px 20px}
            .modal-aside{padding:28px 20px}
        }
        @media (prefers-reduced-motion:reduce){
            *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
        }