/* roulang page: index */
:root {
            --brand-h: 220;
            --brand-s: 65%;
            --brand-l: 55%;
            --brand: hsl(220, 65%, 55%);
            --brand-deep: hsl(220, 62%, 42%);
            --brand-dark: #13314d;
            --brand-soft: #eaf1f9;
            --bg: #f3f7fb;
            --surface: #ffffff;
            --text-main: #16324f;
            --text-soft: #627890;
            --line: #e3eaf2;
            --accent-coral: #f26d5b;
            --accent-violet: #8067d7;
            --accent-gold: #e8a940;
            --accent-teal: #2aa6a0;
            --radius-xl: 20px;
            --radius-lg: 16px;
            --radius-md: 10px;
            --shadow: 0 8px 24px rgba(25, 50, 80, 0.06);
            --shadow-hover: 0 18px 40px rgba(25, 50, 80, 0.1);
            --container-width: 1180px;
            --font-main: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }

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

        html { scroll-behavior: smooth; }

        body {
            margin: 0;
            padding-top: 72px;
            font-family: var(--font-main);
            font-size: 16px;
            line-height: 1.8;
            background: var(--bg);
            color: var(--text-main);
            -webkit-font-smoothing: antialiased;
        }

        img { max-width: 100%; height: auto; }

        a { color: var(--brand-deep); text-decoration: none; transition: color .2s ease; }
        a:hover { color: hsl(220, 65%, 34%); text-decoration: underline; }
        a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
            outline: 3px solid rgba(64, 128, 255, .35);
            outline-offset: 3px;
            border-radius: 4px;
        }

        .container { max-width: var(--container-width); margin-inline: auto; padding-inline: 24px; }

        body, h1, h2, h3, h4, p, ul { margin: 0; padding: 0; }
        ul { list-style: none; }

        h1, h2, h3 { font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
        p { color: var(--text-main); }

        .section { padding: 96px 0; }
        .section-soft { background: #f7fafd; border-block: 1px solid var(--line); }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .14em;
            color: var(--brand);
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--brand); border-radius: 99px; }

        .section-head { max-width: 860px; margin-bottom: 48px; }
        .section-head h2 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 14px; }
        .section-head p { font-size: 17px; color: var(--text-soft); max-width: 720px; }

        /* Buttons */
        .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--radius-md); font-weight: 600; padding: 12px 24px; border: 1px solid transparent; transition: all .25s ease; text-decoration: none; font-size: 15px; }
        .btn:hover { text-decoration: none; }
        .btn:active { transform: scale(.98); }
        .btn-primary-solid { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; box-shadow: 0 6px 16px rgba(22, 50, 79, .14); }
        .btn-primary-solid:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; transform: translateY(-2px); }
        .btn-light-solid { background: #fff; border-color: #dbe4ee; color: var(--brand-dark); }
        .btn-light-solid:hover { border-color: var(--brand); color: var(--brand-deep); transform: translateY(-2px); }
        .btn-coral-solid { background: var(--accent-coral); border-color: var(--accent-coral); color: #fff; }
        .btn-coral-solid:hover { background: #d85a48; border-color: #d85a48; color: #fff; transform: translateY(-2px); }
        .btn-dark-block { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
        .btn-dark-block:hover { background: #0c2237; color: #fff; transform: translateY(-2px); }

        .badge-tag { display: inline-flex; align-items: center; gap: 6px; background: var(--brand-soft); color: var(--brand-deep); font-weight: 600; font-size: 13px; padding: 6px 12px; border-radius: 99px; }
        .badge-tag i { font-size: 12px; }
        .badge-coral { background: #fdeeed; color: #cf4838; }
        .badge-violet { background: #f0ebfd; color: #6a52b8; }
        .badge-gold { background: #fbf1dc; color: #b77d18; }

        /* ---------- Nav ---------- */
        .site-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1080;
            background: rgba(255, 255, 255, .88);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(227, 234, 242, .8);
        }
        .site-nav-inner { display: flex; align-items: center; min-height: 72px; gap: 24px; }

        .brand-logo { display: inline-flex; align-items: center; gap: 10px; font-size: 22px; font-weight: 800; color: var(--brand-dark); text-decoration: none; }
        .brand-logo:hover { text-decoration: none; }
        .brand-dots { display: inline-flex; gap: 4px; margin-right: 2px; }
        .brand-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
        .dot-a { background: var(--accent-violet); }
        .dot-b { background: var(--brand); }
        .dot-c { background: var(--accent-coral); }
        .dot-d { background: var(--accent-gold); }
        .brand-logo .logo-cn { letter-spacing: -0.04em; }
        .brand-logo small { font-size: 12px; font-weight: 500; color: var(--text-soft); margin-top: 6px; }

        .site-menu { display: flex; align-items: center; gap: 6px; margin-left: 20px; }
        .site-menu a { padding: 8px 16px; border-radius: 99px; font-weight: 600; font-size: 15px; color: var(--text-main); }
        .site-menu a:hover { background: var(--brand-soft); text-decoration: none; }
        .site-menu .active { background: var(--brand-soft); color: var(--brand-deep); }

        .nav-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; }
        .command-search {
            width: 220px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #edf2f8;
            border: 1px solid transparent;
            color: var(--text-soft);
            border-radius: 99px;
            padding: 8px 14px;
            font-size: 14px;
            transition: all .2s;
            cursor: pointer;
        }
        .command-search:hover { border-color: #d2dfec; background: #e8eff7; color: var(--brand-deep); }
        .command-search kbd {
            margin-left: auto;
            font-family: inherit;
            background: #fff;
            border: 1px solid #d5dee9;
            border-radius: 6px;
            font-size: 11px;
            padding: 1px 6px;
            color: #7a8ca0;
        }
        .nav-cta { min-height: 40px; padding: 9px 18px; font-size: 14px; }
        .nav-tool-btn { width: 40px; height: 40px; background: transparent; border: 0; border-radius: 50%; color: var(--text-soft); font-size: 17px; transition: .2s; }
        .nav-tool-btn:hover { background: var(--brand-soft); color: var(--brand-deep); }

        .navbar-toggler { display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center; margin-left: auto; background: transparent; border: 0; border-radius: 12px; color: var(--brand-dark); font-size: 20px; }
        .navbar-toggler:hover { background: var(--brand-soft); }

        /* Mobile offcanvas */
        .mobile-offcanvas { width: min(88vw, 340px); background: var(--bg); }
        .mobile-offcanvas .offcanvas-header { border-bottom: 1px solid var(--line); }
        .mobile-nav-link { display: flex; align-items: center; gap: 12px; padding: 14px 18px; color: var(--text-main); font-weight: 600; border-radius: 12px; }
        .mobile-nav-link:hover { background: var(--brand-soft); color: var(--brand-deep); text-decoration: none; }
        .mobile-nav-link.active { background: var(--brand-soft); color: var(--brand); }
        .mobile-search-link { width: 100%; border: 0; margin-top: 12px; }

        /* Search modal */
        .modal-content { border: 0; border-radius: 20px; box-shadow: var(--shadow-hover); overflow: hidden; }
        .modal-header, .modal-body { border: 0; padding: 22px 24px; }
        .search-input-group { position: relative; }
        .search-input-group i { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); color: #8aa0b5; }
        .search-input-group input { width: 100%; border: 1px solid var(--line); background: #f8fbfe; padding: 13px 14px 13px 44px; border-radius: 14px; font-size: 16px; }
        .search-input-group input:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(64, 128, 255, .1); }
        .search-suggest { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
        .search-suggest span { background: var(--brand-soft); color: var(--brand-deep); padding: 6px 14px; border-radius: 99px; font-size: 13px; cursor: pointer; }
        .modal-label { font-size: 12px; color: #8aa0b5; letter-spacing: .08em; text-transform: uppercase; margin-top: 20px; margin-bottom: 6px; }
        .search-shortcuts .row-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #edf2f7; align-items: center; font-size: 15px; }
        .search-shortcuts .row-item i { color: var(--brand); width: 22px; text-align: center; }

        /* ---------- Hero ---------- */
        .hero {
            position: relative;
            padding: 96px 0 80px;
            background-image: linear-gradient(110deg, rgba(255, 255, 255, .96) 0%, rgba(243, 247, 251, .92) 38%, rgba(233, 241, 250, .72) 100%), url('/assets/images/backpic/back-1.jpg');
            background-size: cover;
            background-position: center;
            border-bottom: 1px solid var(--line);
        }
        .hero-inner { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
        .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cfdcf0; background: rgba(255,255,255,.7); padding: 6px 14px 6px 10px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--brand-deep); margin-bottom: 18px; }
        .hero-eyebrow .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-coral); animation: pulse 2s infinite; }
        @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
        .hero h1 { font-size: clamp(34px, 5vw, 50px); line-height: 1.22; letter-spacing: -0.03em; margin-bottom: 20px; }
        .hero h1 .accent-underline { position: relative; white-space: nowrap; }
        .hero h1 .accent-underline::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 12px; background: rgba(242, 109, 91, .2); border-radius: 4px; z-index: -1; }
        .hero-lead { font-size: 17px; color: var(--text-soft); max-width: 560px; margin-bottom: 28px; }
        .hero-stats { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(227, 234, 242, .8); }
        .hero-stat strong { display: block; font-size: 22px; color: var(--brand-dark); font-variant-numeric: tabular-nums; }
        .hero-stat span { font-size: 13px; color: var(--text-soft); }

        .invite-card { background: #fff; border: 1px solid #e7edf4; border-radius: var(--radius-xl); box-shadow: var(--shadow); padding: 28px; position: relative; }
        .invite-card::before { content: ""; position: absolute; top: 20px; right: 22px; width: 80px; height: 80px; background: radial-gradient(circle at 30% 40%, rgba(128, 103, 215, .10), rgba(242, 181, 75, .1) 80%); border-radius: 50%; }
        .invite-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
        .invite-head h3 { font-size: 18px; font-weight: 800; }
        .invite-tag { background: var(--brand-soft); border-radius: 99px; color: var(--brand-deep); padding: 5px 10px; font-size: 12px; font-weight: 700; }
        .invite-visual-row { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 18px; }
        .reward-blocks { display: flex; flex-direction: column; gap: 10px; }
        .reward-line { display: flex; gap: 10px; align-items: center; color: #354e68; font-size: 14px; }
        .reward-line i { color: var(--brand); background: var(--brand-soft); width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .progress-info { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--text-soft); margin-top: 18px; margin-bottom: 8px; }
        .progress { height: 8px; background: #e8eef5; border-radius: 99px; overflow: hidden; }
        .progress-bar { background: linear-gradient(90deg, var(--brand), var(--accent-violet)); border-radius: 99px; width: 74%; }
        .invite-cta-row { display: flex; gap: 10px; margin-top: 20px; align-items: center; }
        .invite-card .btn { flex: 1; min-height: 44px; }
        .invite-note { font-size: 12px; color: #94a2b3; margin-top: 12px; text-align: center; }

        /* Sections generic */
        .feature-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px; }
        .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; height: 100%; transition: transform .25s ease, box-shadow .25s ease; position: relative; overflow: hidden; }
        .feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
        .feature-card .color-swatchs { display: flex; gap: 8px; margin: 20px 0 10px; }
        .color-swatchs span { width: 44px; height: 44px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: rgba(255,255,255,.9); font-size: 11px; font-weight: 800; border: 1px solid rgba(0,0,0,.04); }
        .feature-card .feature-title { font-size: 19px; font-weight: 800; margin: 12px 0 10px; }
        .feature-card p { color: var(--text-soft); font-size: 15px; }
        .feature-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand-deep); font-weight: 600; font-size: 14px; margin-top: 12px; }
        .feature-link:hover { text-decoration: underline; }
        .mini-card-list { display: flex; flex-direction: column; gap: 24px; height: 100%; }
        .mini-feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; transition: transform .2s, box-shadow .2s; }
        .mini-feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
        .mini-feature .mini-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .mini-feature h3 { font-size: 18px; color: var(--text-main); }
        .mini-feature p { font-size: 14px; color: var(--text-soft); margin-top: 10px; }
        .color-chip-row { display: flex; gap: 8px; margin-top: 12px; }
        .color-chip-row span { width: 80px; height: 46px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, .05); }

        /* topic area */
        .topic-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 24px; }
        .topic-card { grid-column: span 6; background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); transition: box-shadow .25s ease, transform .25s ease; }
        .topic-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
        .topic-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
        .topic-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
        .topic-card:hover .topic-img img { transform: scale(1.03); }
        .topic-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(15, 30, 45, .18), transparent 60%); pointer-events: none; }
        .topic-label { position: absolute; left: 18px; top: 18px; z-index: 2; }
        .topic-body { padding: 24px 26px 28px; }
        .topic-body h3 { font-size: 20px; margin-bottom: 10px; }
        .topic-meta { display: flex; gap: 14px; font-size: 13px; color: var(--text-soft); margin-top: 14px; }
        .topic-meta i { color: var(--brand); margin-right: 5px; }

        /* databoard */
        .databoard {
            background: linear-gradient(115deg, rgba(19, 49, 77, .98), rgba(24, 61, 94, .96)), linear-gradient(135deg, rgba(128, 103, 215, .12), transparent 55%);
            border-radius: var(--radius-xl);
            position: relative;
            overflow: hidden;
            color: #fff;
        }
        .databoard::before { content: ""; position: absolute; width: 280px; height: 280px; right: -80px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .10), transparent 70%); }
        .databoard-inner { padding: 56px; }
        .databoard-head { max-width: 620px; }
        .databoard-head h2 { color: #fff; font-size: clamp(28px, 3.4vw, 40px); margin: 14px 0 12px; }
        .databoard-head p { color: rgba(233, 241, 250, .75); }
        .databoard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 42px; }
        .data-card { background: rgba(255, 255, 255, .08); border-radius: 18px; padding: 20px; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.1); }
        .data-card strong { font-size: 34px; display: block; line-height: 1.2; color: #fff; font-variant-numeric: tabular-nums; }
        .data-card span { font-size: 13px; color: rgba(221, 235, 245, .7); }
        .data-card small { display: block; color: rgba(255,255,255,.68); font-size: 13px; margin-top: 8px; }
        .color-metric-dots { display: flex; gap: 5px; margin-top: 10px; }
        .color-metric-dots i { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
        .color-metric-dots i:nth-child(1) { background: var(--accent-coral); }
        .color-metric-dots i:nth-child(2) { background: var(--accent-gold); }
        .color-metric-dots i:nth-child(3) { background: #fff; }

        /* News */
        .news-layout { display: grid; grid-template-columns: 1.5fr .85fr; gap: 32px; align-items: start; }
        .news-entry { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }
        .news-entry:first-child { padding-top: 0; }
        .news-num { font-size: 14px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; width: 32px; flex-shrink: 0; }
        .news-entry h3 { font-size: 17px; margin-bottom: 6px; font-weight: 700; }
        .news-entry h3 a { color: var(--text-main); }
        .news-entry h3 a:hover { color: var(--brand); text-decoration: none; }
        .news-entry p { font-size: 14px; color: var(--text-soft); margin-bottom: 8px; }
        .news-entry .news-tag { font-size: 12px; color: #8ea2b6; display: inline-flex; gap: 6px; align-items: center; }
        .news-tag i { color: var(--brand); }

        .side-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; position: sticky; top: 104px; }
        .side-title { font-size: 18px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; }
        .side-title::before { content: ""; width: 5px; height: 22px; border-radius: 99px; background: var(--brand); }
        .side-list li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; border-bottom: 1px solid #eef3f8; }
        .side-list li:last-child { border: 0; }
        .side-list .side-round { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-gold); display: inline-block; flex-shrink: 0; }
        .side-list a { color: var(--text-main); font-size: 15px; font-weight: 500; }
        .side-list a:hover { color: var(--brand); text-decoration: none; }

        /* Guide */
        .guide-wrapper { background: #0d2436; border-radius: var(--radius-xl); padding: 56px; color: #fff; overflow: hidden; }
        .guide-wrapper h2 { color: #fff; font-size: clamp(27px, 4vw, 36px); }
        .guide-wrapper p { color: rgba(226, 238, 248, .75); }
        .guide-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 44px; align-items: center; margin-top: 44px; }
        .layer-checklist { display: grid; grid-template-columns: 1fr; gap: 16px; }
        .layer-item { display: flex; gap: 16px; background: rgba(255, 255, 255, .06); padding: 20px 20px; border-radius: 16px; border: 1px solid rgba(255,255,255,.08); }
        .layer-icon { width: 46px; height: 46px; border-radius: 14px; background: rgba(255,255,255,.1); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; color: #fff; }
        .layer-item h3 { font-size: 17px; color: #fff; margin-bottom: 4px; }
        .layer-item p { font-size: 14px; color: rgba(203, 220, 235, .7); }
        .guide-visual { border-radius: 20px; overflow: hidden; position: relative; min-height: 320px; box-shadow: 0 20px 44px rgba(0, 0, 0, .18); }
        .guide-visual img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
        .guide-visual .deep-note { position: absolute; left: 16px; right: 16px; bottom: 16px; background: rgba(255, 255, 255, .9); backdrop-filter: blur(8px); border-radius: 14px; padding: 18px; }
        .deep-note h4 { font-size: 15px; margin-bottom: 8px; color: var(--brand-dark); }
        .deep-note .deep-row { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #456077; border-top: 1px solid #edf2f7; padding-top: 8px; margin-top: 4px; }
        .deep-note .deep-row span { display: flex; align-items: center; gap: 6px; }
        .deep-note .deep-row .circle { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

        /* CTA / contact */
        .cta-panel { background: var(--brand-soft); border: 1px solid #d8e4f0; border-radius: var(--radius-xl); padding: 52px; }
        .cta-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 52px; align-items: center; }
        .cta-wrap h2 { font-size: clamp(26px, 3vw, 33px); margin: 12px 0 14px; }
        .cta-wrap p { color: var(--text-soft); }
        .cta-points { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 22px; font-size: 14px; color: #375673; }
        .cta-points i { color: var(--brand); margin-right: 6px; }
        .cta-form-card { background: #fff; border-radius: 18px; padding: 30px; box-shadow: var(--shadow); border: 1px solid #e8eef6; }
        .form-control { border-radius: 12px; border-color: var(--line); padding: 12px 14px; background: #fbfdff; }
        .form-control:focus { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(60, 120, 200, .12); }
        .form-label { font-weight: 600; color: var(--text-main); margin-bottom: 4px; }
        .form-select { border-radius: 12px; }
        .cta-form-submit { width: 100%; min-height: 48px; margin-top: 8px; }
        .subscribe-note { background: #eef6ee; color: #2e7d67; border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 12px; }

        /* FAQ */
        .faq-area { max-width: 860px; margin: 0 auto; }
        .faq-item { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
        .accordion-button { background: transparent; font-weight: 700; font-size: 17px; color: var(--text-main); padding: 22px 16px 22px 0; box-shadow: none; position: relative; }
        .accordion-button:not(.collapsed) { background: transparent; color: var(--brand-deep); box-shadow: none; }
        .accordion-button:focus { box-shadow: none; }
        .accordion-button::after { display: none; }
        .accordion-button .faq-plus { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-deep); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; transition: transform .3s, background .3s; }
        .accordion-button:not(.collapsed) .faq-plus { transform: rotate(135deg); background: var(--brand); color: #fff; }
        .accordion-body { color: var(--text-soft); font-size: 15px; padding: 0 76px 22px 0; line-height: 1.85; }

        /* Footer */
        .site-footer { background: #0d1e2e; color: rgba(215, 230, 242, .82); margin-top: 0; }
        .footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; padding: 64px 0 40px; }
        .footer-brand .brand-logo { color: #fff; font-size: 24px; }
        .footer-brand p { color: rgba(215, 230, 242, .6); margin-top: 14px; max-width: 340px; font-size: 15px; }
        .footer-col h4 { color: #fff; font-size: 16px; margin-bottom: 18px; }
        .footer-col ul li { margin-bottom: 10px; }
        .footer-col a { color: rgba(215, 230, 242, .72); font-size: 14px; }
        .footer-col a:hover { color: #fff; text-decoration: none; }
        .footer-col a i { width: 18px; color: #6f9cc9; margin-right: 8px; font-size: 13px; }
        .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 18px 0; color: rgba(200, 218, 235, .5); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }
        .footer-social { display: flex; gap: 16px; }
        .footer-social a { color: rgba(215, 230, 242, .7); }
        .footer-social a:hover { color: #fff; }

        /* ========= responsive ========= */
        @media (max-width: 1199.98px) {
            .command-search { width: 176px; }
            .section { padding: 80px 0; }
        }

        @media (max-width: 991.98px) {
            body { padding-top: 66px; }
            .site-menu, .nav-tools .command-search, .nav-tools .nav-cta { display: none; }
            .hero { padding: 72px 0 56px; }
            .hero-inner { grid-template-columns: 1fr; gap: 32px; }
            .hero-lead { max-width: 100%; }
            .feature-grid, .news-layout, .cta-wrap { grid-template-columns: 1fr; }
            .guide-grid { grid-template-columns: 1fr; }
            .guide-visual { min-height: 240px; width: 100%; height: 300px; }
            .topic-card { grid-column: span 12; }
            .databoard-grid { grid-template-columns: repeat(2, 1fr); }
            .footer-main { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 767.98px) {
            .section { padding: 64px 0; }
            .section-head { margin-bottom: 28px; }
            .container { padding-inline: 20px; }
            .databoard-inner, .databoard { padding: 40px 24px; border-radius: 22px; }
            .guide-wrapper, .cta-panel { padding: 34px 24px; }
            .invite-card { padding: 22px; }
            .invite-cta-row { flex-direction: column; }
            .invite-card .btn { width: 100%; }
            .footer-main { grid-template-columns: 1fr; gap: 34px; padding: 48px 0 24px; }
            .footer-bottom { flex-direction: column; }
            .data-card strong { font-size: 28px; }
            .news-layout { gap: 12px; }
        }

        @media (max-width: 575.98px) {
            .container { padding-inline: 16px; }
            .site-nav-inner { gap: 8px; }
            .brand-logo { font-size: 18px; }
            .navbar-toggler { margin-left: 0; }
            .hero h1 { font-size: 32px; }
            .hero-stats { gap: 18px; }
            .databoard-grid { grid-template-columns: 1fr; }
        }

/* roulang page: category1 */
:root {
            --brand-h: 220;
            --brand-s: 65%;
            --brand-l: 55%;
            --brand: hsl(220, 65%, 55%);
            --brand-deep: hsl(220, 62%, 42%);
            --brand-dark: #13314d;
            --brand-soft: #eaf1f9;
            --bg: #f3f7fb;
            --surface: #ffffff;
            --text-main: #16324f;
            --text-soft: #627890;
            --line: #e3eaf2;
            --accent-coral: #f26d5b;
            --accent-violet: #8067d7;
            --accent-gold: #e8a940;
            --accent-teal: #2aa6a0;
            --radius-xl: 20px;
            --radius-lg: 16px;
            --radius-md: 10px;
            --shadow: 0 8px 24px rgba(25, 50, 80, .06);
            --shadow-hover: 0 18px 40px rgba(25, 50, 80, .10);
            --container-width: 1180px;
            --font-main: "Inter", "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
        }
        html {
            scroll-behavior: smooth;
        }
        body {
            margin: 0;
            padding-top: 72px;
            font-family: var(--font-main);
            font-size: 16px;
            line-height: 1.8;
            background: var(--bg);
            color: var(--text-main);
            -webkit-font-smoothing: antialiased;
        }
        body,
        h1,
        h2,
        h3,
        h4,
        p,
        ul {
            margin: 0;
            padding: 0;
        }
        img {
            max-width: 100%;
            height: auto;
        }
        a {
            color: var(--brand-deep);
            text-decoration: none;
            transition: color .2s ease;
        }
        a:hover {
            color: hsl(220, 65%, 34%);
            text-decoration: underline;
        }
        a:focus-visible,
        button:focus-visible,
        input:focus-visible,
        select:focus-visible,
        textarea:focus-visible {
            outline: 3px solid rgba(64, 128, 255, .35);
            outline-offset: 3px;
            border-radius: 4px;
        }
        .container {
            max-width: var(--container-width);
            margin-inline: auto;
            padding-inline: 24px;
        }
        .section {
            padding: 96px 0;
        }
        .section-soft {
            background: #f7fafd;
            border-block: 1px solid var(--line);
        }
        .section-head {
            max-width: 860px;
            margin-bottom: 48px;
        }
        .section-head h2 {
            font-size: clamp(28px, 4vw, 36px);
            line-height: 1.35;
            margin-bottom: 14px;
            letter-spacing: -0.01em;
        }
        .section-head p {
            font-size: 17px;
            color: var(--text-soft);
            max-width: 720px;
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .12em;
            color: var(--brand);
            margin-bottom: 16px;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 2px;
            background: var(--brand);
            border-radius: 99px;
        }
        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            border-radius: var(--radius-md);
            font-weight: 600;
            padding: 12px 24px;
            border: 1px solid transparent;
            transition: all .25s ease;
            text-decoration: none;
            font-size: 15px;
        }
        .btn:hover {
            text-decoration: none;
        }
        .btn:active {
            transform: scale(.98);
        }
        .btn-primary-solid {
            background: var(--brand-deep);
            border-color: var(--brand-deep);
            color: #fff;
            box-shadow: 0 6px 16px rgba(22, 50, 79, .14);
        }
        .btn-primary-solid:hover {
            background: var(--brand-dark);
            border-color: var(--brand-dark);
            color: #fff;
            transform: translateY(-2px);
        }
        .btn-light-solid {
            background: #fff;
            border-color: #dbe4ee;
            color: var(--brand-dark);
        }
        .btn-light-solid:hover {
            border-color: var(--brand);
            color: var(--brand-deep);
            transform: translateY(-2px);
        }
        .btn-coral-solid {
            background: var(--accent-coral);
            border-color: var(--accent-coral);
            color: #fff;
        }
        .btn-coral-solid:hover {
            background: #d85a48;
            border-color: #d85a48;
            color: #fff;
            transform: translateY(-2px);
        }
        .badge-tag {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: var(--brand-soft);
            color: var(--brand-deep);
            font-weight: 600;
            font-size: 13px;
            padding: 6px 12px;
            border-radius: 99px;
            line-height: 1.4;
        }
        .badge-coral {
            background: #fdeeed;
            color: #cf4838;
        }
        .badge-violet {
            background: #f0ebfd;
            color: #6a52b8;
        }
        .badge-gold {
            background: #fbf1dc;
            color: #b77d18;
        }
        .badge-teal {
            background: #e1f4f3;
            color: #1c7d78;
        }
        .site-nav {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1080;
            background: rgba(255, 255, 255, .88);
            backdrop-filter: blur(14px);
            border-bottom: 1px solid rgba(227, 234, 242, .8);
        }
        .site-nav-inner {
            display: flex;
            align-items: center;
            min-height: 72px;
            gap: 24px;
        }
        .brand-logo {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 22px;
            font-weight: 800;
            color: var(--brand-dark);
            text-decoration: none;
            letter-spacing: -0.02em;
        }
        .brand-logo:hover {
            text-decoration: none;
        }
        .brand-dots {
            display: inline-flex;
            gap: 4px;
        }
        .brand-dots i {
            width: 9px;
            height: 9px;
            border-radius: 50%;
            display: block;
        }
        .dot-a {
            background: var(--accent-violet);
        }
        .dot-c {
            background: var(--accent-gold);
        }
        .dot-b {
            background: var(--accent-teal);
        }
        .dot-d {
            background: var(--accent-coral);
        }
        .site-menu {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-left: 20px;
        }
        .site-menu a {
            padding: 8px 18px;
            border-radius: 99px;
            font-weight: 600;
            font-size: 15px;
            color: var(--text-main);
        }
        .site-menu a:hover {
            background: var(--brand-soft);
            text-decoration: none;
        }
        .site-menu a.active {
            background: var(--brand-soft);
            color: var(--brand-deep);
        }
        .nav-tools {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-left: auto;
        }
        .command-search {
            width: 216px;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            background: #edf2f8;
            border: 1px solid transparent;
            color: var(--text-soft);
            border-radius: 99px;
            padding: 8px 14px;
            font-size: 14px;
            transition: all .2s;
            cursor: pointer;
        }
        .command-search:hover {
            background: #e3ebf4;
            border-color: #d4e0ec;
            color: var(--text-main);
        }
        .command-search kbd {
            margin-left: auto;
            font-family: inherit;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 6px;
            font-size: 12px;
            padding: 2px 7px;
            color: var(--text-soft);
        }
        .nav-tool-btn {
            border: 0;
            background: transparent;
            color: var(--text-main);
            font-size: 18px;
            width: 44px;
            height: 44px;
            border-radius: 12px;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: all .2s;
        }
        .nav-tool-btn:hover {
            background: var(--brand-soft);
        }
        .nav-cta {
            padding: 9px 18px;
            font-size: 14px;
        }
        .navbar-toggler {
            border: 0;
            background: var(--brand-soft);
            width: 44px;
            height: 44px;
            border-radius: 12px;
            color: var(--brand-dark);
            font-size: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }
        /* modal search */
        .modal-content {
            border: 0;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow-hover);
        }
        .search-input-wrap {
            display: flex;
            align-items: center;
            gap: 12px;
            border: 2px solid var(--brand);
            border-radius: 16px;
            padding: 14px 16px;
            background: #fff;
        }
        .search-input-wrap i {
            color: var(--brand);
        }
        .search-input-wrap input {
            border: 0;
            outline: 0;
            flex: 1;
            font-size: 16px;
            background: transparent;
            color: var(--text-main);
        }
        .modal-backdrop.show {
            opacity: .5;
        }
        /* category hero */
        .cat-hero {
            position: relative;
            padding: 90px 0 76px;
            background: url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            border-bottom: 1px solid var(--line);
        }
        .cat-hero:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(255, 255, 255, .96) 30%, rgba(255, 255, 255, .86) 100%);
        }
        .cat-hero .container {
            position: relative;
            z-index: 2;
        }
        .breadcrumb-nav {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: var(--text-soft);
            margin-bottom: 24px;
        }
        .breadcrumb-nav a {
            color: var(--text-soft);
        }
        .breadcrumb-nav .sep {
            color: #b3c1d1;
        }
        .breadcrumb-nav .current {
            color: var(--brand-deep);
            font-weight: 600;
        }
        .cat-hero-inner {
            display: grid;
            grid-template-columns: 1.4fr .8fr;
            gap: 48px;
            align-items: center;
        }
        .cat-hero h1 {
            font-size: clamp(34px, 5vw, 48px);
            line-height: 1.28;
            letter-spacing: -0.02em;
            margin-bottom: 18px;
            color: var(--brand-dark);
        }
        .cat-hero h1 span {
            color: var(--brand);
        }
        .cat-hero-desc {
            font-size: 18px;
            color: var(--text-soft);
            line-height: 1.9;
            max-width: 620px;
            margin-bottom: 28px;
        }
        .hero-meta-card {
            background: rgba(255, 255, 255, .92);
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            padding: 28px;
            box-shadow: var(--shadow);
            backdrop-filter: blur(6px);
        }
        .hero-meta-card .meta-label {
            font-size: 13px;
            font-weight: 700;
            color: var(--text-soft);
            letter-spacing: .08em;
            margin-bottom: 16px;
        }
        .hero-meta-card .meta-row {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 13px 0;
            border-bottom: 1px solid #edf2f8;
        }
        .hero-meta-card .meta-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
        .meta-icon {
            width: 40px;
            height: 40px;
            border-radius: 12px;
            background: var(--brand-soft);
            color: var(--brand-deep);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 15px;
        }
        .meta-row h4 {
            font-size: 15px;
            margin-bottom: 2px;
        }
        .meta-row p {
            font-size: 14px;
            color: var(--text-soft);
            line-height: 1.5;
        }
        /* intro */
        .intro-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 56px;
            align-items: center;
        }
        .photo-stack {
            position: relative;
            min-height: 420px;
        }
        .photo-main {
            width: 78%;
            border-radius: var(--radius-xl);
            overflow: hidden;
            box-shadow: var(--shadow-hover);
            position: relative;
            aspect-ratio: 4 / 3;
            background: linear-gradient(135deg, #c7d7e8, #eef3f8);
        }
        .photo-main img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .photo-sub {
            position: absolute;
            right: 0;
            bottom: 10px;
            width: 56%;
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-hover);
            border: 6px solid #fff;
            aspect-ratio: 4 / 3;
            background: linear-gradient(135deg, #e3c9b0, #f7ede3);
        }
        .photo-sub img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }
        .intro-copy {}
        .intro-copy h2 {
            font-size: clamp(26px, 3.6vw, 34px);
            line-height: 1.45;
            margin-bottom: 20px;
        }
        .intro-copy p {
            color: var(--text-soft);
            margin-bottom: 18px;
        }
        .intro-list {
            list-style: none;
            margin-top: 18px;
            display: grid;
            gap: 12px;
        }
        .intro-list li {
            display: flex;
            gap: 12px;
            align-items: flex-start;
            background: #fff;
            padding: 14px 16px;
            border-radius: var(--radius-md);
            box-shadow: var(--shadow);
            font-size: 15px;
        }
        .intro-list li i {
            color: var(--brand);
            margin-top: 4px;
            font-size: 14px;
        }
        /* index list & filters */
        .list-topbar {
            display: flex;
            flex-wrap: wrap;
            align-items: flex-end;
            justify-content: space-between;
            gap: 20px;
            margin-bottom: 32px;
        }
        .filter-pills {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .filter-pills a {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border-radius: 99px;
            padding: 9px 16px;
            background: #fff;
            border: 1px solid var(--line);
            font-size: 14px;
            color: var(--text-main);
            font-weight: 500;
            transition: all .2s;
            text-decoration: none;
        }
        .filter-pills a i {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
        }
        .filter-pills a:hover {
            border-color: var(--brand);
            color: var(--brand-deep);
            background: var(--brand-soft);
        }
        .filter-pills a.active {
            background: var(--brand-dark);
            border-color: var(--brand-dark);
            color: #fff;
            box-shadow: 0 6px 14px rgba(19, 49, 77, .18);
        }
        .cat-list {
            display: grid;
            gap: 22px;
        }
        .cat-card {
            display: grid;
            grid-template-columns: 300px 1fr;
            background: var(--surface);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow);
            overflow: hidden;
            transition: box-shadow .25s ease, transform .25s ease;
        }
        .cat-card:hover {
            box-shadow: var(--shadow-hover);
            transform: translateY(-3px);
        }
        .cat-card-media {
            position: relative;
            min-height: 210px;
            background: linear-gradient(135deg, #dae6f2, #f0f5fa);
        }
        .cat-card-media img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            inset: 0;
        }
        .cat-card-body {
            padding: 28px 30px;
            display: flex;
            flex-direction: column;
            gap: 14px;
        }
        .cat-card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        .cat-card-body h3 {
            font-size: 22px;
            line-height: 1.4;
            color: var(--brand-dark);
        }
        .cat-card-body h3 a {
            color: inherit;
        }
        .cat-card-body h3 a:hover {
            color: var(--brand-deep);
            text-decoration: none;
        }
        .cat-card-body .digest {
            color: var(--text-soft);
            font-size: 15px;
            line-height: 1.85;
        }
        .card-footnote {
            margin-top: auto;
            border-top: 1px solid #edf2f8;
            padding-top: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: var(--text-soft);
            font-size: 13px;
        }
        /* split colors */
        .split-panel {
            background: var(--brand-dark);
            border-radius: var(--radius-xl);
            padding: 64px;
            color: #fff;
            position: relative;
            overflow: hidden;
        }
        .split-panel::after {
            content: "";
            position: absolute;
            right: -80px;
            top: -80px;
            width: 240px;
            height: 240px;
            border-radius: 50%;
            background: rgba(255, 255, 255, .05);
        }
        .split-panel .eyebrow {
            color: #aecbe8;
        }
        .split-panel .section-head h2 {
            color: #fff;
        }
        .split-panel .section-head p {
            color: #b9cddf;
        }
        .split-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            margin-top: 24px;
        }
        .split-item {
            background: rgba(255, 255, 255, .07);
            border: 1px solid rgba(255, 255, 255, .1);
            border-radius: var(--radius-lg);
            padding: 26px;
            position: relative;
            z-index: 2;
            transition: background .2s;
        }
        .split-item:hover {
            background: rgba(255, 255, 255, .11);
        }
        .split-number {
            font-size: 24px;
            font-weight: 800;
            margin-bottom: 10px;
            color: #ffbd7a;
            font-variant-numeric: tabular-nums;
        }
        .split-item h3 {
            font-size: 19px;
            margin-bottom: 10px;
        }
        .split-item p {
            color: #c7d6e4;
            font-size: 14px;
        }
        .color-steps {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            height: 76px;
            border-radius: 16px;
            overflow: hidden;
            margin-top: 42px;
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
        }
        .color-steps div {
            min-height: 76px;
        }
        /* audience */
        .audience-wrap {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 24px;
        }
        .audience-card {
            background: #fff;
            border-radius: var(--radius-lg);
            border-top: 4px solid var(--brand);
            padding: 30px;
            box-shadow: var(--shadow);
            transition: transform .2s, box-shadow .2s;
        }
        .audience-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-hover);
        }
        .audience-card.coral {
            border-top-color: var(--accent-coral);
        }
        .audience-card.violet {
            border-top-color: var(--accent-violet);
        }
        .audience-card .icon-bg {
            width: 46px;
            height: 46px;
            border-radius: 14px;
            background: var(--brand-soft);
            color: var(--brand-deep);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            margin-bottom: 16px;
        }
        .audience-card.coral .icon-bg {
            background: #fdeeed;
            color: #cf4838;
        }
        .audience-card.violet .icon-bg {
            background: #f0ebfd;
            color: #6a52b8;
        }
        .audience-card h3 {
            margin-bottom: 12px;
        }
        .audience-card p {
            color: var(--text-soft);
            font-size: 15px;
            margin-bottom: 10px;
        }
        /* faq */
        .faq-wrap {
            max-width: 880px;
            margin: 0 auto;
        }
        .faq-wrap .accordion-item {
            background: transparent;
            border: 0;
            border-bottom: 1px solid var(--line);
        }
        .faq-wrap .accordion-button {
            background: transparent;
            box-shadow: none;
            font-size: 17px;
            font-weight: 600;
            color: var(--text-main);
            padding: 24px 40px 24px 4px;
            position: relative;
            transition: color .2s;
        }
        .faq-wrap .accordion-button::after {
            content: "\2b";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            background: none;
            width: auto;
            height: auto;
            color: var(--brand);
            position: absolute;
            right: 4px;
            transition: transform .25s;
            transform: none;
        }
        .faq-wrap .accordion-button:not(.collapsed)::after {
            content: "\f068";
            color: var(--brand-deep);
        }
        .faq-wrap .accordion-button:not(.collapsed) {
            color: var(--brand-deep);
        }
        .faq-wrap .accordion-body {
            padding: 0 48px 24px 4px;
            color: var(--text-soft);
        }
        /* contact */
        .contact-panel {
            background: #fff;
            border-radius: var(--radius-xl);
            box-shadow: var(--shadow);
            overflow: hidden;
            display: grid;
            grid-template-columns: 1fr 1fr;
        }
        .contact-side {
            background: url('/assets/images/backpic/back-2.jpg') center/cover no-repeat;
            background-color: var(--brand-dark);
            background-blend-mode: multiply;
            padding: 48px;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            position: relative;
            color: #fff;
        }
        .contact-side:before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(19, 49, 77, .65) 0%, rgba(19, 49, 77, .88) 100%);
        }
        .contact-side>* {
            position: relative;
            z-index: 2;
        }
        .contact-side h3 {
            color: #fff;
            text-shadow: 0 1px 10px rgba(0, 0, 0, .15);
        }
        .contact-side p {
            color: #d7e3ee;
        }
        .contact-form {
            padding: 48px;
        }
        .contact-form label {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 6px;
            color: var(--text-main);
        }
        .contact-form .form-control {
            border-radius: 12px;
            border: 1px solid var(--line);
            padding: 12px 16px;
            background: #fafcfe;
            font-size: 15px;
            transition: border-color .2s, box-shadow .2s;
        }
        .contact-form .form-control:focus {
            border-color: var(--brand);
            box-shadow: 0 0 0 4px rgba(64, 128, 255, .12);
            background: #fff;
        }
        #formHint {
            font-size: 14px;
            margin-top: 10px;
        }
        /* footer */
        .site-footer {
            background: var(--brand-dark);
            color: #b8cbd9;
            padding: 72px 0 0;
        }
        .site-footer .brand-logo {
            color: #fff;
        }
        .footer-main {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 56px;
            padding-bottom: 52px;
        }
        .footer-brand p {
            font-size: 15px;
            max-width: 400px;
            margin-top: 14px;
            color: #a9bfd2;
        }
        .footer-social {
            display: flex;
            gap: 10px;
            margin-top: 22px;
        }
        .footer-social a {
            width: 42px;
            height: 42px;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, .12);
            background: rgba(255, 255, 255, .05);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #dce8f2;
            font-size: 15px;
            transition: all .2s;
        }
        .footer-social a:hover {
            background: var(--brand);
            border-color: var(--brand);
            color: #fff;
            text-decoration: none;
            transform: translateY(-2px);
        }
        .footer-col h4 {
            color: #fff;
            font-size: 15px;
            font-weight: 600;
            margin-bottom: 18px;
            letter-spacing: .02em;
        }
        .footer-col ul {
            list-style: none;
            display: grid;
            gap: 10px;
        }
        .footer-col a {
            color: #a9bfd2;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            transition: all .2s;
        }
        .footer-col a i {
            font-size: 12px;
            color: var(--accent-gold);
        }
        .footer-col a:hover {
            color: #fff;
            text-decoration: none;
        }
        .footer-bottom {
            border-top: 1px solid rgba(255, 255, 255, .12);
            padding: 24px 0;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            gap: 12px;
            font-size: 14px;
            color: #7e9bb3;
        }
        /* offcanvas */
        .offcanvas {
            background: var(--bg);
            border-left: 1px solid var(--line);
            max-width: 340px;
            width: 100%;
        }
        .offcanvas-header {
            padding-bottom: 0;
        }
        .offcanvas-body nav a {
            display: block;
            padding: 14px 16px;
            border-radius: 14px;
            color: var(--text-main);
            font-weight: 600;
        }
        .offcanvas-body nav a:hover {
            background: var(--brand-soft);
            text-decoration: none;
            color: var(--brand-deep);
        }
        .offcanvas-body nav a.active {
            background: var(--brand-soft);
            color: var(--brand-deep);
        }
        /* responsive */
        @media (max-width: 1199px) {
            .command-search {
                width: 180px;
            }
        }
        @media (max-width: 991px) {
            body {
                padding-top: 64px;
            }
            .site-nav-inner {
                min-height: 64px;
            }
            .site-menu {
                display: none;
            }
            .nav-tools .command-search {
                display: none;
            }
            .split-grid {
                grid-template-columns: 1fr 1fr;
            }
            .intro-wrap,
            .cat-hero-inner,
            .contact-panel {
                grid-template-columns: 1fr;
            }
            .photo-stack {
                min-height: 380px;
                max-width: 540px;
            }
            .contact-side {
                min-height: 250px;
            }
        }
        @media (max-width: 767px) {
            .section {
                padding: 68px 0;
            }
            .cat-hero {
                padding: 60px 0 52px;
            }
            .cat-card {
                grid-template-columns: 1fr;
            }
            .cat-card-media {
                aspect-ratio: 16 / 10;
                position: relative;
            }
            .cat-card-media img {
                position: absolute;
                inset: 0;
            }
            .cat-card-body {
                padding: 22px;
            }
            .footer-main {
                grid-template-columns: 1fr;
                gap: 36px;
            }
            .split-grid,
            .audience-wrap {
                grid-template-columns: 1fr;
            }
            .split-panel {
                padding: 36px 24px;
            }
            .contact-form,
            .contact-side {
                padding: 30px 24px;
            }
        }
        @media (max-width: 520px) {
            .container {
                padding-inline: 18px;
            }
            .photo-stack {
                min-height: 0;
            }
            .photo-main {
                width: 100%;
            }
            .photo-sub {
                display: none;
            }
            .cat-hero-desc {
                font-size: 16px;
            }
            .filter-pills a {
                padding: 8px 12px;
                font-size: 13px;
                gap: 6px;
            }
            .hero-meta-card {
                padding: 20px;
            }
            .footer-bottom {
                align-items: flex-start;
                flex-direction: column;
            }
        }

/* roulang: framework shim */
/* 覆盖 Bootstrap 等对 a/btn 的全局默认，避免导航出现下划线/蓝链 */
.site-header a,.site-header a:hover,.navbar a,.navbar a:hover,.nav-links a,.nav-links a:hover,header nav a,header nav a:hover{text-decoration:none}
.site-header .btn,.navbar .btn,.nav-cta{text-decoration:none}