/* roulang page: index */
:root {
            --berry-950:#1b101c;
            --berry-900:#281329;
            --berry-800:#3d1937;
            --berry-700:#562044;
            --wine:#742d4d;
            --coral:#f27d67;
            --peach:#ffb18c;
            --cream:#fff8f2;
            --warm:#f3e9e4;
            --ink:#281e27;
            --muted:#786a73;
            --line:rgba(77,39,62,.14);
            --white:#fffdfb;
            --teal:#7db8a7;
            --amber:#e9ad61;
            --shadow:0 22px 55px rgba(42,17,35,.12);
            --soft-shadow:0 12px 28px rgba(52,25,45,.08);
            --radius-xl:32px;
            --radius-lg:24px;
            --radius-md:16px;
        }

        *,*::before,*::after { box-sizing:border-box; }
        html { scroll-behavior:smooth; }
        body {
            margin:0;
            color:var(--ink);
            background:var(--cream);
            font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            font-size:16px;
            line-height:1.7;
            overflow-x:hidden;
        }
        a { color:inherit; text-decoration:none; transition:.25s ease; }
        a:hover { color:var(--coral); }
        img { max-width:100%; display:block; }
        button,input { font:inherit; }
        .container { max-width:1240px; }
        .site-header {
            position:sticky;
            top:0;
            z-index:50;
            background:rgba(255,248,242,.96);
            border-bottom:1px solid var(--line);
            box-shadow:0 5px 22px rgba(46,20,37,.04);
        }
        .masthead {
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:28px;
        }
        .brand {
            display:flex;
            align-items:center;
            gap:18px;
            min-width:280px;
        }
        .brand-mark {
            width:42px;
            height:42px;
            border-radius:14px 14px 14px 5px;
            background:linear-gradient(145deg,var(--berry-800),var(--coral));
            position:relative;
            box-shadow:0 8px 18px rgba(116,45,77,.22);
        }
        .brand-mark::before,.brand-mark::after {
            content:"";
            position:absolute;
            border:2px solid rgba(255,255,255,.72);
            border-radius:50%;
        }
        .brand-mark::before { width:17px;height:17px;top:8px;left:8px; }
        .brand-mark::after { width:7px;height:7px;bottom:8px;right:8px;background:var(--peach);border:0; }
        .brand-name {
            font-size:20px;
            font-weight:800;
            letter-spacing:-.04em;
            color:var(--berry-900);
            white-space:nowrap;
        }
        .brand-sub {
            display:block;
            font-size:11px;
            color:var(--muted);
            letter-spacing:.08em;
            margin-top:1px;
        }
        .header-note {
            color:var(--muted);
            font-size:13px;
            padding-left:24px;
            border-left:1px solid var(--line);
        }
        .nav-row {
            border-top:1px solid rgba(77,39,62,.08);
            min-height:52px;
            display:flex;
            align-items:center;
            justify-content:space-between;
        }
        .main-nav { display:flex; gap:8px; align-items:center; }
        .nav-link {
            padding:8px 15px;
            border-radius:999px;
            color:#66525e;
            font-size:14px;
            font-weight:700;
        }
        .nav-link:hover,.nav-link.active {
            color:var(--berry-900);
            background:#f5ddd6;
        }
        .nav-tools { display:flex; align-items:center; gap:12px; }
        .age-status {
            color:#527e70;
            font-size:12px;
            font-weight:700;
            display:flex;
            align-items:center;
            gap:6px;
        }
        .age-status::before {
            content:"";
            width:7px;height:7px;
            background:var(--teal);
            border-radius:50%;
            box-shadow:0 0 0 4px rgba(125,184,167,.17);
        }
        .menu-btn {
            display:none;
            border:1px solid var(--line);
            background:var(--white);
            color:var(--berry-900);
            border-radius:12px;
            min-width:44px;
            min-height:44px;
        }

        .hero {
            position:relative;
            padding:78px 0 92px;
            color:#fff8f4;
            background:
                radial-gradient(circle at 82% 15%,rgba(242,125,103,.48),transparent 25%),
                radial-gradient(circle at 8% 90%,rgba(255,177,140,.2),transparent 25%),
                linear-gradient(132deg,var(--berry-950) 0%,var(--berry-800) 54%,var(--wine) 100%);
            overflow:hidden;
        }
        .hero::before {
            content:"";
            position:absolute;
            inset:25px -10% auto;
            height:250px;
            opacity:.22;
            background:repeating-linear-gradient(115deg,transparent 0 80px,rgba(255,255,255,.18) 81px 82px,transparent 83px 160px);
            transform:rotate(-5deg);
        }
        .hero .container { position:relative; z-index:1; }
        .eyebrow {
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--peach);
            font-size:13px;
            font-weight:800;
            letter-spacing:.08em;
            margin-bottom:20px;
        }
        .eyebrow::before { content:""; width:28px;height:2px;background:var(--coral); }
        .hero h1 {
            max-width:680px;
            font-size:clamp(40px,5.3vw,68px);
            line-height:1.12;
            letter-spacing:-.06em;
            margin:0 0 24px;
            font-weight:900;
        }
        .hero-copy {
            max-width:650px;
            color:rgba(255,248,244,.78);
            font-size:17px;
            margin-bottom:30px;
        }
        .hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
        .btn-main,.btn-outline-light,.btn-soft {
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:48px;
            padding:0 21px;
            border-radius:999px;
            font-size:14px;
            font-weight:800;
            border:1px solid transparent;
            transition:.25s ease;
        }
        .btn-main { color:#321622; background:var(--peach); box-shadow:0 10px 24px rgba(0,0,0,.16); }
        .btn-main:hover { color:#fff; background:var(--coral); transform:translateY(-3px); box-shadow:0 14px 27px rgba(0,0,0,.22); }
        .btn-outline-light { color:#fff8f4; border-color:rgba(255,255,255,.35); }
        .btn-outline-light:hover { color:var(--berry-950); background:#fff8f4; }
        .btn-soft { color:var(--berry-900); background:#f8e6df; }
        .btn-soft:hover { color:#fff; background:var(--wine); transform:translateY(-2px); }
        .hero-meta { display:flex; flex-wrap:wrap; gap:18px; margin-top:33px; }
        .hero-meta span { color:rgba(255,248,244,.72); font-size:13px; }
        .hero-meta strong { color:#fff; display:block; font-size:18px; }

        .explore-panel {
            position:relative;
            min-height:380px;
            padding:28px;
            border:1px solid rgba(255,255,255,.18);
            border-radius:var(--radius-xl);
            background:linear-gradient(145deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
            box-shadow:0 25px 55px rgba(0,0,0,.18);
        }
        .panel-top { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:rgba(255,255,255,.65); }
        .panel-title { font-size:23px; font-weight:800; margin:25px 0 22px; }
        .route { position:relative; padding:10px 0 18px 29px; }
        .route::before {
            content:"";
            position:absolute;
            left:8px;top:0;bottom:0;
            border-left:1px dashed rgba(255,177,140,.65);
        }
        .route-item { position:relative; margin:0 0 22px; }
        .route-item::before {
            content:"";
            position:absolute;
            width:15px;height:15px;
            left:-28px;top:7px;
            border-radius:50%;
            background:var(--coral);
            border:4px solid rgba(255,255,255,.18);
        }
        .route-item:nth-child(2)::before { background:var(--peach); }
        .route-item:nth-child(3)::before { background:var(--teal); }
        .route-item strong { display:block; font-size:15px; }
        .route-item small { color:rgba(255,255,255,.62); font-size:12px; }
        .panel-tags { display:flex; flex-wrap:wrap; gap:8px; }
        .badge-soft,.badge-dark,.badge-teal {
            display:inline-flex;
            align-items:center;
            padding:5px 10px;
            border-radius:999px;
            font-size:11px;
            font-weight:800;
        }
        .badge-soft { color:#fff1e9; background:rgba(255,177,140,.16); border:1px solid rgba(255,177,140,.25); }
        .badge-dark { color:var(--berry-800); background:#f5ddd6; }
        .badge-teal { color:#24594e; background:#d8eee6; }

        section { padding:92px 0; }
        .section-head { max-width:720px; margin-bottom:38px; }
        .section-kicker { color:var(--wine); font-size:13px; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
        .section-head h2 { font-size:clamp(29px,3.5vw,44px); line-height:1.2; letter-spacing:-.05em; margin:10px 0 15px; color:var(--berry-900); }
        .section-head p { color:var(--muted); margin:0; max-width:680px; }

        .intro-strip {
            background:var(--white);
            border-bottom:1px solid var(--line);
        }
        .intro-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:end; }
        .intro-copy { font-size:19px; color:var(--berry-800); max-width:700px; }
        .stat-line { display:flex; justify-content:flex-end; gap:28px; }
        .stat strong { display:block; color:var(--berry-900); font-size:30px; line-height:1; }
        .stat span { color:var(--muted); font-size:12px; }

        .feature-section { background:#f7eee9; }
        .feature-board {
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
        }
        .feature-card,.mini-card,.content-card,.price-card,.faq-item {
            background:var(--white);
            border:1px solid var(--line);
            box-shadow:var(--soft-shadow);
        }
        .feature-card {
            min-height:300px;
            padding:34px;
            border-radius:var(--radius-xl);
            position:relative;
            overflow:hidden;
        }
        .feature-card::after {
            content:"";
            position:absolute;
            width:190px;height:190px;
            right:-35px;bottom:-45px;
            border-radius:50%;
            background:linear-gradient(145deg,rgba(242,125,103,.24),rgba(116,45,77,.04));
        }
        .feature-card h3 { font-size:28px; max-width:430px; margin:22px 0 12px; color:var(--berry-900); }
        .feature-card p,.mini-card p { color:var(--muted); font-size:14px; }
        .mini-stack { display:grid; gap:18px; }
        .mini-card { border-radius:var(--radius-lg); padding:24px; display:flex; gap:17px; align-items:flex-start; }
        .icon-box {
            flex:0 0 46px;
            width:46px;height:46px;
            border-radius:15px;
            display:grid;place-items:center;
            background:#f5ddd6;color:var(--wine);
            font-weight:900;font-size:19px;
        }
        .mini-card h3 { font-size:18px; margin:0 0 5px; color:var(--berry-900); }
        .mini-card p { margin:0; }

        .path-section { background:var(--cream); }
        .path-line { display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
        .path-line::before { content:""; position:absolute; top:25px; left:8%; right:8%; border-top:1px dashed #d8b8ac; }
        .path-node { position:relative; z-index:1; padding:0 15px; }
        .node-dot { width:50px;height:50px; border-radius:50%; display:grid;place-items:center; background:var(--berry-800); color:#fff; font-weight:900; border:7px solid var(--cream); box-shadow:0 0 0 1px #d8b8ac; margin-bottom:18px; }
        .path-node h3 { font-size:18px; color:var(--berry-900); margin-bottom:7px; }
        .path-node p { color:var(--muted); font-size:14px; margin:0 0 12px; }

        .content-section { background:var(--berry-950); color:#fff8f4; }
        .content-section .section-head h2 { color:#fff8f4; }
        .content-section .section-head p { color:rgba(255,248,244,.65); }
        .content-layout { display:grid; grid-template-columns:1.35fr .65fr; gap:20px; }
        .content-card { border-radius:var(--radius-lg); overflow:hidden; color:var(--ink); }
        .visual {
            min-height:155px;
            position:relative;
            background:linear-gradient(135deg,#4d1b43,#d56d67);
            overflow:hidden;
        }
        .visual::before {
            content:"";
            position:absolute;
            width:210px;height:210px;
            border:1px solid rgba(255,255,255,.3);
            border-radius:50%;
            top:-80px;right:-30px;
            box-shadow:0 0 0 24px rgba(255,255,255,.05),0 0 0 48px rgba(255,255,255,.04);
        }
        .visual.alt { background:linear-gradient(135deg,#2c172c,#8e4b68); min-height:115px; }
        .visual.green { background:linear-gradient(135deg,#392238,#4f8b7c); min-height:115px; }
        .visual-label { position:absolute; left:20px; bottom:18px; color:#fff; font-weight:800; font-size:17px; }
        .content-body { padding:20px; }
        .content-body h3 { font-size:18px; margin:9px 0 7px; color:var(--berry-900); }
        .content-body p { margin:0 0 13px; color:var(--muted); font-size:13px; }
        .content-list { display:grid; gap:16px; }
        .list-row { padding:18px; border-radius:var(--radius-lg); background:#fff8f4; border:1px solid rgba(255,255,255,.12); }
        .list-row h3 { font-size:16px; margin:8px 0 5px; color:var(--berry-900); }
        .list-row p { font-size:13px; color:var(--muted); margin:0; }

        .access-section { background:#f7eee9; }
        .access-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:20px; align-items:stretch; }
        .access-main {
            padding:34px;
            border-radius:var(--radius-xl);
            color:#fff8f4;
            background:linear-gradient(135deg,var(--berry-800),var(--wine));
            box-shadow:var(--shadow);
        }
        .access-main h3 { font-size:29px; margin:18px 0 10px; }
        .access-main p { color:rgba(255,248,244,.72); max-width:570px; }
        .access-list { display:grid; gap:10px; margin:22px 0 28px; }
        .access-list div { display:flex; gap:10px; align-items:center; color:#fff3ec; font-size:14px; }
        .access-list i { width:20px;height:20px;border-radius:50%;display:grid;place-items:center;background:var(--teal);color:#173b33;font-size:12px;font-style:normal; }
        .access-side { display:grid; gap:18px; }
        .access-card { padding:25px; border-radius:var(--radius-lg); background:var(--white); border:1px solid var(--line); }
        .access-card h3 { color:var(--berry-900); font-size:20px; margin:0 0 8px; }
        .access-card p { color:var(--muted); font-size:14px; margin:0 0 17px; }

        .faq-section { background:var(--cream); }
        .faq-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
        .faq-item { border-radius:var(--radius-md); padding:22px 24px; }
        .faq-item h3 { font-size:17px; line-height:1.45; margin:0 0 9px; color:var(--berry-900); }
        .faq-item p { color:var(--muted); margin:0; font-size:14px; }

        .compliance {
            padding:28px 0;
            background:#ede0db;
            border-top:1px solid var(--line);
            border-bottom:1px solid var(--line);
        }
        .compliance-inner { display:flex; justify-content:space-between; gap:25px; align-items:center; }
        .compliance strong { color:var(--berry-900); }
        .compliance p { margin:5px 0 0; color:var(--muted); font-size:13px; }
        .footer {
            background:var(--berry-950);
            color:rgba(255,248,244,.72);
            padding:55px 0 24px;
        }
        .footer-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:45px; padding-bottom:45px; }
        .footer .brand-name { color:#fff8f4; }
        .footer .brand-sub { color:rgba(255,248,244,.48); }
        .footer h3 { color:#fff8f4; font-size:15px; margin:5px 0 15px; }
        .footer p { font-size:13px; max-width:380px; }
        .footer-links { display:grid; gap:8px; font-size:13px; }
        .footer-links a:hover { color:var(--peach); text-decoration:underline; text-underline-offset:4px; }
        .copyright { border-top:1px solid rgba(255,255,255,.12); padding-top:20px; display:flex; justify-content:space-between; gap:20px; font-size:12px; color:rgba(255,248,244,.5); }
        .floating-cta {
            position:fixed; right:24px; bottom:22px; z-index:40;
            padding:12px 17px; border-radius:999px;
            background:var(--coral); color:#321622;
            font-size:13px; font-weight:900;
            box-shadow:0 12px 25px rgba(79,27,50,.25);
        }
        .floating-cta:hover { color:#fff; background:var(--wine); transform:translateY(-3px); }
        :focus-visible { outline:3px solid var(--peach); outline-offset:3px; }

        @media (max-width:991px) {
            .header-note { display:none; }
            .main-nav { display:none; }
            .menu-btn { display:block; }
            .nav-row { justify-content:flex-end; border-top:0; min-height:0; position:absolute; right:20px; top:16px; }
            .masthead { min-height:72px; }
            .feature-board,.content-layout,.access-grid,.intro-grid { grid-template-columns:1fr; }
            .stat-line { justify-content:flex-start; }
            .hero { padding:64px 0 70px; }
            .explore-panel { margin-top:25px; }
        }
        @media (max-width:767px) {
            section { padding:62px 0; }
            .brand { min-width:0; }
            .brand-name { font-size:17px; }
            .brand-mark { width:36px;height:36px; }
            .hero h1 { font-size:41px; }
            .hero-copy { font-size:15px; }
            .path-line { display:flex; overflow-x:auto; gap:20px; padding-bottom:12px; scroll-snap-type:x mandatory; }
            .path-line::before { left:28px; right:auto; width:720px; }
            .path-node { min-width:210px; scroll-snap-align:start; padding:0; }
            .faq-grid { grid-template-columns:1fr; }
            .compliance-inner { align-items:flex-start; flex-direction:column; }
            .footer-grid { grid-template-columns:1fr 1fr; gap:30px; }
            .footer-grid > div:first-child { grid-column:1/-1; }
            .copyright { flex-direction:column; }
        }
        @media (max-width:520px) {
            .masthead { padding-left:8px; padding-right:8px; }
            .brand-sub { display:none; }
            .hero { padding-top:50px; }
            .hero h1 { font-size:35px; }
            .hero-actions { display:grid; grid-template-columns:1fr; }
            .btn-main,.btn-outline-light { width:100%; }
            .explore-panel,.feature-card,.access-main { padding:23px; }
            .stat-line { gap:18px; flex-wrap:wrap; }
            .footer-grid { grid-template-columns:1fr; }
            .footer-grid > div:first-child { grid-column:auto; }
            .floating-cta { right:14px; bottom:14px; }
        }

/* roulang page: category1 */
:root{
 --berry-950:#1b101c;
 --berry-900:#281329;
 --berry-800:#3d1937;
 --berry-700:#562044;
 --wine:#742d4d;
 --coral:#f27d67;
 --peach:#ffb18c;
 --cream:#fff8f2;
 --warm:#f3e9e4;
 --ink:#281e27;
 --muted:#786a73;
 --line:rgba(77,39,62,.14);
 --white:#fffdfb;
 --teal:#7db8a7;
 --amber:#e9ad61;
 --danger:#b9515c;
 --shadow:0 22px 55px rgba(42,17,35,.12);
 --soft-shadow:0 12px 28px rgba(52,25,45,.08);
 --radius-xl:32px;
 --radius-lg:24px;
 --radius-md:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;color:var(--ink);background:var(--cream);
 font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
 font-size:16px;line-height:1.7;overflow-x:hidden;
}
a{color:inherit;text-decoration:none;transition:.25s ease}
a:hover{color:var(--coral)}
img{max-width:100%;display:block}
button,input,select{font:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
 outline:3px solid rgba(242,125,103,.42);outline-offset:3px
}
.container{max-width:1240px}
.site-header{
 position:sticky;top:0;z-index:50;background:rgba(255,248,242,.97);
 border-bottom:1px solid var(--line);box-shadow:0 5px 22px rgba(46,20,37,.04)
}
.header-top{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;gap:18px;min-width:280px}
.brand-mark{
 width:42px;height:42px;border-radius:14px 14px 14px 5px;
 background:linear-gradient(145deg,var(--berry-800),var(--coral));position:relative;
 box-shadow:0 8px 18px rgba(116,45,77,.22);flex:0 0 auto
}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;border:2px solid rgba(255,255,255,.72);border-radius:50%}
.brand-mark:before{width:17px;height:17px;top:8px;left:8px}
.brand-mark:after{width:7px;height:7px;bottom:8px;right:8px;background:var(--peach);border:0}
.brand-name{display:block;font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--berry-900);white-space:nowrap}
.brand-sub{display:block;font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:1px}
.header-note{color:var(--muted);font-size:13px;padding-left:24px;border-left:1px solid var(--line)}
.nav-row{border-top:1px solid rgba(77,39,62,.08);min-height:52px;display:flex;align-items:center;justify-content:space-between}
.main-nav{display:flex;gap:8px;align-items:center}
.nav-link{padding:8px 15px;border-radius:999px;color:#66525e;font-size:14px;font-weight:700}
.nav-link:hover,.nav-link.active{color:var(--berry-900);background:#f5ddd6}
.nav-tools{display:flex;align-items:center;gap:12px}
.age-state{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#66525e}
.age-state:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 4px rgba(125,184,167,.15)}
.menu-btn{display:none;border:1px solid var(--line);background:var(--white);color:var(--berry-900);border-radius:12px;min-width:44px;min-height:44px}
.page-hero{
 position:relative;overflow:hidden;padding:66px 0 58px;color:var(--cream);
 background:radial-gradient(circle at 83% 20%,rgba(242,125,103,.52),transparent 23%),radial-gradient(circle at 10% 92%,rgba(255,177,140,.18),transparent 24%),linear-gradient(125deg,var(--berry-950),var(--berry-800) 57%,var(--wine));
}
.page-hero:before{
 content:"";position:absolute;inset:-30px 0 0;background:
 linear-gradient(115deg,transparent 0 48%,rgba(255,255,255,.09) 48.2% 48.5%,transparent 48.7%),
 linear-gradient(22deg,transparent 0 67%,rgba(255,255,255,.08) 67.2% 67.5%,transparent 67.7%);
 opacity:.85
}
.page-hero .container{position:relative;z-index:1}
.breadcrumbs{display:flex;align-items:center;gap:9px;color:rgba(255,248,242,.68);font-size:13px;margin-bottom:25px}
.breadcrumbs a:hover{color:var(--peach);text-decoration:underline}
.breadcrumbs i{width:5px;height:5px;border-radius:50%;background:var(--coral);display:inline-block}
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--peach);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:14px}
.eyebrow:before{content:"";width:28px;height:2px;background:var(--coral)}
.page-hero h1{font-size:clamp(38px,5vw,60px);line-height:1.13;letter-spacing:-.06em;font-weight:900;margin:0 0 18px}
.hero-copy{max-width:700px;font-size:17px;color:rgba(255,248,242,.8);margin:0}
.stats-panel{
 height:100%;padding:25px;border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-lg);
 background:rgba(35,17,32,.36);box-shadow:0 18px 35px rgba(0,0,0,.15)
}
.stats-label{display:block;color:rgba(255,248,242,.68);font-size:12px;font-weight:700;letter-spacing:.07em;margin-bottom:13px}
.stat-line{padding:13px 0;border-top:1px solid rgba(255,255,255,.16);display:flex;justify-content:space-between;align-items:center;gap:14px}
.stat-line strong{font-size:19px;color:#fff8f4}
.stat-line span{font-size:13px;color:var(--peach)}
.section{padding:82px 0}
.section-soft{background:linear-gradient(180deg,#f8eeea 0%,var(--cream) 100%)}
.section-dark{color:var(--cream);background:var(--berry-900)}
.section-heading{max-width:690px;margin-bottom:32px}
.section-kicker{color:var(--wine);font-size:13px;font-weight:800;letter-spacing:.09em;margin-bottom:8px}
.section-dark .section-kicker{color:var(--peach)}
.section-heading h2{font-size:clamp(28px,3.5vw,42px);line-height:1.22;letter-spacing:-.05em;font-weight:900;margin:0 0 12px}
.section-heading p{color:var(--muted);margin:0}
.section-dark .section-heading p{color:rgba(255,248,242,.67)}
.filter-shell{margin-top:-30px;position:relative;z-index:3}
.filter-bar{
 padding:18px 20px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);
 box-shadow:var(--shadow);display:flex;align-items:end;gap:13px;flex-wrap:wrap
}
.field{flex:1 1 190px}
.field label{display:block;font-size:12px;font-weight:800;color:var(--muted);margin:0 0 6px}
.field input,.field select{
 width:100%;height:47px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:#fffaf7;color:var(--ink);outline:none;
 transition:.2s ease
}
.field input:focus,.field select:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,125,103,.12)}
.btn-main,.btn-soft,.btn-outline{
 min-height:48px;padding:0 20px;border-radius:999px;border:1px solid transparent;font-size:14px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:.25s ease
}
.btn-main{background:linear-gradient(135deg,var(--coral),#e96368);color:#351622;box-shadow:0 10px 22px rgba(196,77,83,.2)}
.btn-main:hover{color:#fff;transform:translateY(-3px);box-shadow:0 15px 29px rgba(196,77,83,.3)}
.btn-soft{background:#f8e6df;color:var(--berry-900)}
.btn-soft:hover{background:var(--wine);color:#fff;transform:translateY(-2px)}
.btn-outline{border-color:rgba(255,255,255,.35);color:#fff8f4;background:transparent}
.btn-outline:hover{color:var(--berry-950);background:var(--cream)}
.tag-row{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:28px}
.tag{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--line);border-radius:999px;background:var(--white);color:#6b5863;font-size:13px;font-weight:700}
.tag:hover,.tag.active{color:var(--berry-900);border-color:#e9a499;background:#fae0d8}
.feature-card,.topic-card,.info-card,.rights-card{
 border:1px solid var(--line);background:var(--white);border-radius:var(--radius-xl);box-shadow:var(--soft-shadow);overflow:hidden;
 transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease
}
.feature-card:hover,.topic-card:hover,.info-card:hover,.rights-card:hover{transform:translateY(-5px);border-color:rgba(242,125,103,.55);box-shadow:var(--shadow)}
.feature-card{display:grid;grid-template-columns:1.15fr .85fr;min-height:360px}
.cover{
 min-height:220px;position:relative;overflow:hidden;background:linear-gradient(135deg,#683051,#d76468 55%,#ffb18c);
}
.cover:before{content:"";position:absolute;width:230px;height:230px;border:1px solid rgba(255,255,255,.34);border-radius:50%;left:10%;top:11%;box-shadow:0 0 0 30px rgba(255,255,255,.08),0 0 0 72px rgba(255,255,255,.05)}
.cover:after{content:"";position:absolute;width:58%;height:1px;background:rgba(255,255,255,.5);transform:rotate(-25deg);right:-4%;bottom:30%}
.cover-two{background:linear-gradient(145deg,#3b223f,#7c3154 53%,#f27d67)}
.cover-two:before{left:auto;right:12%;top:16%;border-radius:20px;width:170px;height:210px;box-shadow:20px -18px 0 rgba(255,177,140,.25),-32px 28px 0 rgba(255,255,255,.08)}
.cover-three{background:linear-gradient(140deg,#33203b,#643455 45%,#df6b6c)}
.cover-three:before{width:120px;height:120px;left:20%;top:25%;box-shadow:100px -32px 0 -27px rgba(255,255,255,.62),135px 42px 0 -22px rgba(255,177,140,.8)}
.cover-four{background:linear-gradient(130deg,#51223f,#9a3c54 56%,#e98f70)}
.cover-four:before{width:280px;height:120px;border-radius:100% 0 0 0;left:12%;top:35%;box-shadow:none}
.cover-label{position:absolute;left:22px;bottom:20px;z-index:1;display:inline-flex;gap:7px;align-items:center;padding:7px 11px;border-radius:999px;background:rgba(31,15,29,.56);color:#fff8f4;font-size:12px;font-weight:800}
.cover-label:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--teal)}
.feature-content{padding:38px;display:flex;flex-direction:column;align-items:flex-start}
.card-top{display:flex;align-items:center;justify-content:space-between;width:100%;gap:14px;margin-bottom:18px}
.badge-soft,.badge-live,.badge-amber{display:inline-flex;align-items:center;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:800}
.badge-soft{background:#f8e6df;color:var(--wine)}
.badge-live{background:#e0f0ea;color:#356b5e}
.badge-amber{background:#fff0d6;color:#8a5a1e}
.feature-content h3,.topic-card h3,.info-card h3,.rights-card h3{font-size:24px;line-height:1.3;letter-spacing:-.04em;font-weight:900;margin:0 0 12px}
.feature-content p,.topic-card p,.info-card p,.rights-card p{color:var(--muted);margin:0 0 20px;font-size:14px}
.meta-row{display:flex;flex-wrap:wrap;gap:11px;color:var(--muted);font-size:12px;margin-top:auto;margin-bottom:22px}
.meta-row span{display:inline-flex;align-items:center;gap:5px}
.meta-row span:before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral)}
.topic-card .cover{min-height:205px}
.topic-card-body{padding:23px}
.topic-card h3{font-size:20px}
.mini-action{color:var(--wine);font-weight:800;font-size:14px;text-decoration:underline;text-decoration-color:rgba(116,45,77,.35);text-underline-offset:4px}
.mini-action:hover{color:var(--coral);text-decoration-color:var(--coral)}
.info-card{height:100%;padding:28px;background:linear-gradient(165deg,#fffdfb,#f4e4dd)}
.info-card h3{font-size:21px}
.status-list{list-style:none;padding:0;margin:22px 0 0}
.status-list li{display:flex;gap:11px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--line);font-size:14px}
.status-list li:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--teal);margin-top:7px;box-shadow:0 0 0 4px rgba(125,184,167,.15);flex:0 0 auto}
.path-band{padding:25px;border:1px solid rgba(255,255,255,.14);border-radius:var(--radius-xl);background:rgba(255,255,255,.045)}
.path-step{position:relative;padding:7px 18px 6px 28px;border-left:1px solid rgba(255,255,255,.25);min-height:120px}
.path-step:before{content:"";position:absolute;left:-7px;top:8px;width:13px;height:13px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 5px rgba(242,125,103,.15)}
.path-step strong{display:block;font-size:16px;margin-bottom:7px}
.path-step span{font-size:13px;color:rgba(255,248,242,.66)}
.access-grid{display:grid;grid-template-columns:1fr 1.12fr 1fr;gap:18px;align-items:stretch}
.rights-card{padding:29px;display:flex;flex-direction:column}
.rights-card.featured{background:linear-gradient(155deg,var(--berry-800),var(--wine));color:#fff8f4;border-color:transparent;box-shadow:0 22px 48px rgba(63,24,50,.25)}
.rights-card.featured p{color:rgba(255,248,242,.72)}
.rights-card h3{font-size:23px}
.rights-card ul{list-style:none;padding:0;margin:0 0 24px}
.rights-card li{position:relative;padding:8px 0 8px 20px;font-size:14px;color:var(--muted)}
.rights-card li:before{content:"";position:absolute;left:0;top:16px;width:8px;height:8px;border-radius:50%;background:var(--coral)}
.rights-card.featured li{color:rgba(255,248,242,.8)}
.rights-card.featured li:before{background:var(--peach)}
.access-note{font-size:12px;color:var(--muted);margin-top:auto}
.rights-card.featured .access-note{color:rgba(255,248,242,.61)}
.faq-wrap{border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 48px 20px 0;font-weight:800;position:relative}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";position:absolute;right:4px;top:14px;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;background:#f6e4de;color:var(--wine);font-size:22px;font-weight:400}
.faq-item[open] summary:after{content:"−";background:var(--wine);color:#fff}
.faq-item p{max-width:820px;margin:0;padding:0 0 22px;color:var(--muted);font-size:15px}
.cta-box{padding:48px;border-radius:var(--radius-xl);background:linear-gradient(122deg,var(--berry-900),var(--wine));color:#fff8f4;position:relative;overflow:hidden}
.cta-box:after{content:"";position:absolute;width:280px;height:280px;border-radius:50%;right:-80px;top:-105px;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 35px rgba(255,255,255,.05),0 0 0 82px rgba(255,255,255,.04)}
.cta-box>*{position:relative;z-index:1}
.cta-box h2{font-size:clamp(27px,3vw,40px);letter-spacing:-.05em;font-weight:900;margin:0 0 12px}
.cta-box p{max-width:690px;color:rgba(255,248,242,.74);margin:0 0 24px}
.footer{padding:62px 0 20px;background:var(--berry-950);color:rgba(255,248,242,.72)}
.footer .brand-name{color:#fff8f4}
.footer .brand-sub{color:rgba(255,248,242,.48)}
.footer-grid{display:grid;grid-template-columns:1.35fr .75fr .9fr;gap:54px;padding-bottom:45px}
.footer p{max-width:440px;font-size:14px;color:rgba(255,248,242,.62)}
.footer h3{color:#fff8f4;font-size:14px;font-weight:800;margin:8px 0 15px}
.footer-links{display:flex;flex-direction:column;gap:10px;font-size:14px}
.footer-links a:hover{color:var(--peach);text-decoration:underline;text-underline-offset:4px}
.copyright{border-top:1px solid rgba(255,255,255,.13);padding-top:19px;display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:12px;color:rgba(255,248,242,.45)}
.offcanvas{background:var(--cream);color:var(--ink)}
.offcanvas-header{border-bottom:1px solid var(--line)}
.mobile-nav{display:flex;flex-direction:column;gap:8px;padding:14px 0}
.mobile-nav .nav-link{font-size:16px;padding:12px 15px}
.mobile-note{padding:18px;border-radius:var(--radius-md);background:#f4e2db;color:var(--muted);font-size:13px;margin-top:18px}
@media(max-width:991px){
 .header-note{display:none}.feature-card{grid-template-columns:1fr}.stats-panel{margin-top:22px}.access-grid{grid-template-columns:1fr}
 .rights-card.featured{order:-1}.footer-grid{grid-template-columns:1fr 1fr;gap:35px}
}
@media(max-width:767px){
 .header-top{min-height:68px}.brand{min-width:0;gap:12px}.brand-mark{width:38px;height:38px}.brand-name{font-size:17px}.brand-sub{font-size:10px}
 .nav-row{display:none}.menu-btn{display:inline-flex;align-items:center;justify-content:center}.page-hero{padding:48px 0 64px}.section{padding:58px 0}
 .filter-bar{padding:16px}.filter-bar .btn-main{width:100%}.feature-content{padding:27px}.footer-grid{grid-template-columns:1fr;gap:28px}.cta-box{padding:34px 26px}
 .path-band{overflow-x:auto}.path-band .row{min-width:690px}.topic-card .cover{min-height:190px}
}
@media(max-width:520px){
 body{font-size:15px}.page-hero h1{font-size:36px}.hero-copy{font-size:15px}.stats-panel{padding:20px}.section-heading h2{font-size:29px}
 .feature-content h3{font-size:22px}.btn-main,.btn-soft,.btn-outline{width:100%;min-height:50px}.tag-row{gap:7px}.tag{font-size:12px;padding:0 11px}
 .copyright{flex-direction:column;gap:5px}.cta-box{padding:30px 22px}.topic-card-body{padding:20px}
}

/* roulang page: category2 */
:root{
      --berry-950:#1b101c;--berry-900:#281329;--berry-800:#3d1937;--berry-700:#562044;
      --wine:#742d4d;--coral:#f27d67;--peach:#ffb18c;--cream:#fff8f2;--warm:#f3e9e4;
      --ink:#281e27;--muted:#786a73;--line:rgba(77,39,62,.14);--white:#fffdfb;
      --teal:#7db8a7;--amber:#e9ad61;--shadow:0 22px 55px rgba(42,17,35,.12);
      --soft-shadow:0 12px 28px rgba(52,25,45,.08);--radius-xl:32px;--radius-lg:24px;--radius-md:16px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:.25s ease}
    a:hover{color:var(--coral)}
    img{max-width:100%;display:block}
    button,input,select{font:inherit}
    .container{max-width:1240px}
    .site-header{position:sticky;top:0;z-index:50;background:rgba(255,248,242,.97);border-bottom:1px solid var(--line);box-shadow:0 5px 22px rgba(46,20,37,.04)}
    .header-top{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}
    .brand{display:flex;align-items:center;gap:18px;min-width:280px}
    .brand-mark{width:42px;height:42px;border-radius:14px 14px 14px 5px;background:linear-gradient(145deg,var(--berry-800),var(--coral));position:relative;box-shadow:0 8px 18px rgba(116,45,77,.22);flex:none}
    .brand-mark:before,.brand-mark:after{content:"";position:absolute;border:2px solid rgba(255,255,255,.72);border-radius:50%}
    .brand-mark:before{width:17px;height:17px;top:8px;left:8px}
    .brand-mark:after{width:7px;height:7px;bottom:8px;right:8px;background:var(--peach);border:0}
    .brand-name{font-size:20px;font-weight:800;letter-spacing:-.04em;color:var(--berry-900);white-space:nowrap}
    .brand-sub{display:block;font-size:11px;color:var(--muted);letter-spacing:.08em;margin-top:1px}
    .header-note{color:var(--muted);font-size:13px;padding-left:24px;border-left:1px solid var(--line)}
    .nav-row{border-top:1px solid rgba(77,39,62,.08);min-height:52px;display:flex;align-items:center;justify-content:space-between}
    .main-nav{display:flex;gap:8px;align-items:center}
    .nav-link{padding:8px 15px;border-radius:999px;color:#66525e;font-size:14px;font-weight:700}
    .nav-link:hover,.nav-link.active{color:var(--berry-900);background:#f5ddd6}
    .nav-tools{display:flex;align-items:center;gap:12px}
    .status-pill,.badge-soft,.badge-update{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:800}
    .status-pill{color:#35675b;background:#e4f0eb}
    .badge-soft{color:var(--wine);background:#f8e2dc}
    .badge-update{color:#71502a;background:#fff0d4}
    .menu-btn{display:none;border:1px solid var(--line);background:var(--white);color:var(--berry-900);border-radius:12px;min-width:44px;min-height:44px}
    .page-banner{padding:58px 0 64px;background:linear-gradient(115deg,#f7e5dc 0%,#fff8f2 55%,#ead8e2 100%);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
    .page-banner:after{content:"";position:absolute;width:360px;height:220px;right:-80px;top:-60px;border:1px solid rgba(116,45,77,.14);border-radius:50%;transform:rotate(-18deg);box-shadow:0 0 0 26px rgba(116,45,77,.04),0 0 0 52px rgba(116,45,77,.03)}
    .breadcrumb{font-size:13px;color:var(--muted);margin-bottom:22px}
    .breadcrumb a{text-decoration:underline;text-underline-offset:4px}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--wine);font-size:13px;font-weight:800;letter-spacing:.08em;margin-bottom:14px}
    .eyebrow:before{content:"";width:28px;height:2px;background:var(--coral)}
    .page-banner h1{font-size:clamp(34px,5vw,58px);line-height:1.14;letter-spacing:-.06em;font-weight:900;margin:0 0 18px;position:relative;z-index:1}
    .lead-copy{max-width:700px;color:#65535e;font-size:17px;margin:0;position:relative;z-index:1}
    .section{padding:76px 0}
    .section-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:28px}
    .section-kicker{color:var(--coral);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
    h2{font-size:clamp(27px,3.2vw,40px);line-height:1.2;letter-spacing:-.045em;margin:6px 0 0;font-weight:900}
    .section-intro{max-width:570px;color:var(--muted);margin:8px 0 0}
    .filter-panel{background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--soft-shadow);margin-bottom:30px}
    .filter-label{font-size:13px;font-weight:800;color:var(--berry-900);display:block;margin-bottom:7px}
    .form-control,.form-select{border:1px solid var(--line);border-radius:13px;background:#fffaf7;color:var(--ink);min-height:46px;padding:9px 14px}
    .form-control:focus,.form-select:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(242,125,103,.15)}
    .btn-main,.btn-soft,.btn-outline{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;font-size:14px;font-weight:800;border:1px solid transparent;transition:.25s ease}
    .btn-main{color:#321622;background:var(--peach);box-shadow:0 10px 24px rgba(116,45,77,.14)}
    .btn-main:hover,.btn-main:focus{color:#fff;background:var(--coral);transform:translateY(-3px);box-shadow:0 14px 27px rgba(116,45,77,.2)}
    .btn-soft{color:var(--berry-900);background:#f8e6df}
    .btn-soft:hover,.btn-soft:focus{color:#fff;background:var(--wine);transform:translateY(-2px)}
    .btn-outline{color:var(--wine);border-color:rgba(116,45,77,.25);background:transparent}
    .btn-outline:hover,.btn-outline:focus{color:#fff;background:var(--wine)}
    .content-card{height:100%;background:var(--white);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--soft-shadow);transition:.28s ease}
    .content-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:rgba(242,125,103,.45)}
    .cover{height:190px;background:linear-gradient(135deg,var(--berry-800),var(--wine) 58%,var(--coral));position:relative;overflow:hidden}
    .cover:before{content:"";position:absolute;inset:22px 28px;border:1px solid rgba(255,255,255,.26);border-radius:50%;transform:rotate(-25deg)}
    .cover:after{content:"";position:absolute;width:110px;height:110px;right:25px;bottom:-35px;border-radius:50%;background:rgba(255,177,140,.25)}
    .cover.alt{background:linear-gradient(135deg,#3a203c,#6d3659 55%,#c96561)}
    .cover.light{background:linear-gradient(135deg,#5d2949,#9a4f63 55%,#f2a17e)}
    .cover-label{position:absolute;left:18px;top:17px;color:#fff;background:rgba(27,16,28,.4);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:5px 10px;font-size:12px;font-weight:800}
    .cover-index{position:absolute;right:18px;bottom:16px;color:#fff;font-size:34px;font-weight:900;opacity:.85}
    .card-body{padding:22px}
    .card-title{font-size:20px;line-height:1.35;font-weight:900;margin:12px 0 8px;color:var(--berry-900)}
    .card-text{font-size:14px;color:var(--muted);margin:0 0 18px}
    .meta-line{display:flex;flex-wrap:wrap;gap:8px;color:var(--muted);font-size:12px}
    .feature-card{background:linear-gradient(120deg,var(--berry-950),var(--berry-800) 62%,var(--wine));color:#fff8f4;border-radius:var(--radius-xl);padding:34px;min-height:245px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
    .feature-card:after{content:"";position:absolute;right:-40px;bottom:-90px;width:280px;height:280px;border:1px solid rgba(255,255,255,.2);border-radius:50%;box-shadow:0 0 0 25px rgba(255,255,255,.04),0 0 0 52px rgba(255,255,255,.03)}
    .feature-card>*{position:relative;z-index:1}
    .feature-card h3{font-size:29px;line-height:1.25;margin:18px 0 10px;font-weight:900}
    .feature-card p{color:rgba(255,248,244,.73);max-width:620px}
    .info-card{height:100%;background:#f3e4df;border-radius:var(--radius-lg);padding:25px;border:1px solid rgba(116,45,77,.1)}
    .info-card h3{font-size:20px;font-weight:900;color:var(--berry-900);margin:12px 0 8px}
    .info-card p{font-size:14px;color:var(--muted);margin:0}
    .node{width:13px;height:13px;background:var(--coral);border:3px solid #ffe8df;border-radius:50%;display:inline-block;box-shadow:0 0 0 1px var(--coral)}
    .faq-list{border-top:1px solid var(--line)}
    .faq-item{border-bottom:1px solid var(--line);padding:20px 0}
    .faq-item summary{cursor:pointer;font-weight:800;color:var(--berry-900);list-style:none;display:flex;justify-content:space-between;gap:20px}
    .faq-item summary:after{content:"＋";color:var(--coral);font-size:21px;line-height:1}
    .faq-item[open] summary:after{content:"－"}
    .faq-item p{color:var(--muted);font-size:14px;margin:14px 35px 0 0}
    .cta{padding:58px 0;background:var(--berry-900);color:#fff8f4}
    .cta-box{display:flex;align-items:center;justify-content:space-between;gap:28px}
    .cta h2{color:#fff8f4}
    .cta p{color:rgba(255,248,244,.7);margin:10px 0 0;max-width:640px}
    .footer{background:var(--berry-950);color:#fff4ef;padding:62px 0 22px}
    .footer-grid{display:grid;grid-template-columns:1.5fr .7fr .9fr;gap:70px}
    .footer .brand-name{color:#fff4ef}.footer .brand-sub{color:#cbb2bc}
    .footer p{color:#bba8b1;font-size:13px;max-width:390px}
    .footer h3{font-size:15px;margin:5px 0 18px;color:#fff4ef}
    .footer-links{display:grid;gap:10px;color:#bba8b1;font-size:13px}
    .footer-links a:hover{text-decoration:underline;text-underline-offset:4px}
    .copyright{border-top:1px solid rgba(255,255,255,.12);margin-top:45px;padding-top:18px;display:flex;justify-content:space-between;gap:15px;color:#9f8994;font-size:12px}
    .empty-note{border:1px dashed rgba(116,45,77,.3);border-radius:var(--radius-lg);padding:28px;background:#fffaf7;color:var(--muted);font-size:14px}
    :focus-visible{outline:3px solid rgba(242,125,103,.55);outline-offset:3px}
    @media(max-width:991px){
      .header-note{display:none}.footer-grid{gap:35px}.section{padding:58px 0}
    }
    @media(max-width:767px){
      .header-top{min-height:70px}.brand{min-width:0}.brand-name{font-size:17px}.brand-mark{width:38px;height:38px}
      .menu-btn{display:block}.header-note,.nav-tools .status-pill{display:none}
      .nav-row{display:none}.main-nav{display:none}
      .page-banner{padding:42px 0 48px}.section-head,.cta-box{display:block}.section-head .btn-soft{margin-top:18px}
      .cover{height:180px}.feature-card{padding:26px;min-height:230px}.cta .btn-main{margin-top:22px;width:100%}
      .footer-grid{grid-template-columns:1fr;gap:30px}.copyright{display:block}.copyright span{display:block;margin-top:7px}
    }
    @media(max-width:520px){
      body{font-size:15px}.container{padding-left:20px;padding-right:20px}
      .brand-sub{font-size:10px}.page-banner h1{font-size:36px}.lead-copy{font-size:15px}
      .filter-panel{padding:16px}.card-body{padding:19px}.feature-card h3{font-size:24px}
    }