/* roulang page: index */
:root {
            --ink: #241b27;
            --muted: #756b77;
            --paper: #faf8f6;
            --surface: #ffffff;
            --soft: #f1e9eb;
            --line: #e7dde0;
            --plum: #71344e;
            --plum-deep: #432034;
            --coral: #d66d61;
            --mint: #8eb4a9;
            --gold: #c7a16a;
            --success: #3c9372;
            --shadow: 0 18px 50px rgba(67, 32, 52, .10);
            --small-shadow: 0 8px 24px rgba(67, 32, 52, .08);
            --radius-lg: 24px;
            --radius-md: 16px;
            --radius-sm: 10px;
            --container: 1180px;
        }

        *, *::before, *::after { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--paper);
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
            font-size: 16px;
            line-height: 1.7;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
        img { display: block; width: 100%; max-width: 100%; object-fit: cover; }
        button, input, select { font: inherit; }
        button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible {
            outline: 3px solid rgba(214, 109, 97, .38);
            outline-offset: 3px;
        }
        .container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--plum);
            font-size: 12px;
            font-weight: 800;
            letter-spacing: 1.5px;
            text-transform: uppercase;
        }
        .eyebrow::before { content: ""; width: 24px; height: 2px; background: var(--coral); }
        .section-head { margin-bottom: 34px; max-width: 720px; }
        .section-head h2 { margin: 10px 0 12px; font-size: clamp(28px, 4vw, 44px); line-height: 1.2; letter-spacing: 0; }
        .section-head p { margin: 0; color: var(--muted); max-width: 650px; }
        .section { padding: 92px 0; }
        .section-soft { background: var(--soft); }
        .section-dark { color: #fff; background: var(--plum-deep); }
        .tag, .badge-soft {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            padding: 5px 11px;
            border-radius: 999px;
            border: 1px solid var(--line);
            color: var(--plum);
            background: #fff;
            font-size: 12px;
            line-height: 1.2;
            white-space: nowrap;
        }
        .badge-soft { border-color: transparent; background: #f6e5e4; color: #a34f4c; }
        .btn-main, .btn-outline, .btn-text {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 9px;
            min-height: 48px;
            padding: 0 21px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 800;
            border: 1px solid transparent;
            cursor: pointer;
        }
        .btn-main {
            color: #fff;
            background: linear-gradient(110deg, var(--plum), #a54f63);
            box-shadow: 0 10px 22px rgba(113, 52, 78, .22);
        }
        .btn-main:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 14px 26px rgba(113, 52, 78, .30); }
        .btn-outline { color: var(--plum); background: transparent; border-color: var(--plum); }
        .btn-outline:hover { color: #fff; background: var(--plum); transform: translateY(-2px); }
        .btn-text { padding: 0; min-height: 42px; color: var(--plum); background: transparent; }
        .btn-text:hover { color: var(--coral); gap: 13px; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 50;
            border-bottom: 1px solid rgba(231, 221, 224, .9);
            background: rgba(250, 248, 246, .94);
            backdrop-filter: blur(14px);
        }
        .toolbar { min-height: 74px; display: flex; align-items: center; gap: 25px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            min-width: 205px;
            color: var(--plum-deep);
            font-size: 16px;
            font-weight: 900;
            line-height: 1.25;
        }
        .brand-mark {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            color: #fff;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--plum), var(--coral));
            box-shadow: 0 5px 12px rgba(113, 52, 78, .2);
        }
        .nav-links { display: flex; align-items: center; gap: 4px; flex: 1; }
        .nav-links a {
            padding: 9px 11px;
            border-radius: 8px;
            color: var(--muted);
            font-size: 13px;
            white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--plum); background: #f1e4e6; }
        .toolbar-actions { display: flex; align-items: center; gap: 8px; }
        .status { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; white-space: nowrap; }
        .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(60, 147, 114, .13); }
        .icon-button {
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            border: 1px solid var(--line);
            border-radius: 9px;
            color: var(--plum);
            background: var(--surface);
        }
        .icon-button:hover { border-color: var(--plum); background: #f5eaec; transform: translateY(-1px); }
        .mobile-toggle { display: none; }

        .hero {
            position: relative;
            min-height: 650px;
            display: flex;
            align-items: center;
            color: #fff;
            background-image: linear-gradient(90deg, rgba(49, 24, 39, .82) 0%, rgba(67, 32, 52, .57) 44%, rgba(67, 32, 52, .18) 100%), url("https://images.unsplash.com/photo-1483985988355-763728e1935b?auto=format&fit=crop&w=2000&q=88");
            background-position: center;
            background-size: cover;
        }
        .hero::after {
            position: absolute;
            right: 7%;
            bottom: 34px;
            content: "下一站：主题分类";
            padding: 9px 14px;
            color: #fff;
            border: 1px solid rgba(255,255,255,.38);
            border-radius: 999px;
            background: rgba(255,255,255,.10);
            font-size: 12px;
        }
        .hero-content { position: relative; z-index: 1; max-width: 780px; padding: 96px 0 110px; }
        .hero .eyebrow { color: #f9d9d0; }
        .hero .eyebrow::before { background: #f9b9a9; }
        .hero h1 { margin: 18px 0 22px; max-width: 780px; font-size: clamp(42px, 6vw, 76px); line-height: 1.1; font-weight: 900; }
        .hero-copy { max-width: 680px; color: rgba(255,255,255,.86); font-size: 18px; line-height: 1.85; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
        .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.62); }
        .hero .btn-outline:hover { color: var(--plum-deep); background: #fff; }
        .hero-metrics { display: flex; flex-wrap: wrap; gap: 30px; margin-top: 45px; }
        .metric strong { display: block; font-size: 24px; line-height: 1.2; }
        .metric span { color: rgba(255,255,255,.65); font-size: 12px; }

        .intro-band { padding: 26px 0; background: #fff; border-bottom: 1px solid var(--line); }
        .intro-grid { display: grid; grid-template-columns: 1.15fr 2fr; gap: 30px; align-items: center; }
        .intro-grid h2 { margin: 0; font-size: 23px; }
        .intro-grid p { margin: 0; color: var(--muted); font-size: 14px; }

        .vertical-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
        .vertical-image { position: relative; height: 580px; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
        .vertical-image img { height: 100%; }
        .image-caption {
            position: absolute;
            right: 18px;
            bottom: 18px;
            left: 18px;
            padding: 17px 18px;
            color: #fff;
            border-radius: 13px;
            background: rgba(48, 23, 39, .75);
            backdrop-filter: blur(8px);
        }
        .image-caption strong { display: block; font-size: 16px; }
        .image-caption span { color: rgba(255,255,255,.72); font-size: 12px; }
        .number-list { margin-top: 28px; border-top: 1px solid var(--line); }
        .number-item { display: grid; grid-template-columns: 42px 1fr auto; gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line); }
        .number { color: var(--coral); font-size: 13px; font-weight: 900; }
        .number-item h3 { margin: 0 0 3px; font-size: 17px; }
        .number-item p { margin: 0; color: var(--muted); font-size: 13px; }
        .number-item i { color: var(--plum); font-size: 20px; }

        .hot-wrap { display: grid; grid-template-columns: 1.35fr .65fr; gap: 24px; }
        .feature-card { position: relative; min-height: 470px; overflow: hidden; border-radius: var(--radius-lg); color: #fff; }
        .feature-card img { position: absolute; inset: 0; height: 100%; }
        .feature-card::after { position: absolute; inset: 0; content: ""; background: linear-gradient(0deg, rgba(38,18,31,.87), transparent 70%); }
        .feature-info { position: absolute; right: 30px; bottom: 28px; left: 30px; z-index: 1; }
        .feature-info h3 { margin: 14px 0 8px; font-size: 29px; }
        .feature-info p { margin: 0; max-width: 560px; color: rgba(255,255,255,.78); font-size: 14px; }
        .hot-side { display: flex; flex-direction: column; gap: 14px; }
        .hot-item { display: grid; grid-template-columns: 108px 1fr; gap: 15px; min-height: 145px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
        .hot-item img { height: 119px; border-radius: 10px; }
        .hot-item h3 { margin: 8px 0 4px; font-size: 15px; line-height: 1.45; }
        .hot-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }

        .review-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; align-items: start; }
        .review-score { padding: 30px; border-radius: var(--radius-lg); background: #fff; box-shadow: var(--small-shadow); }
        .review-score strong { display: block; color: var(--plum); font-size: 58px; line-height: 1; }
        .stars { margin: 12px 0; color: var(--gold); letter-spacing: 4px; }
        .review-score p { margin: 0; color: var(--muted); font-size: 13px; }
        .quote-list { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
        .quote { padding: 23px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; }
        .quote p { margin: 0 0 18px; font-size: 14px; line-height: 1.8; }
        .quote-footer { display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
        .quote-footer strong { color: var(--plum); }

        .news-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 50px; }
        .news-list { border-top: 1px solid var(--line); }
        .news-row { display: grid; grid-template-columns: 105px 1fr auto; gap: 18px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
        .news-row time { color: var(--coral); font-size: 12px; font-weight: 800; }
        .news-row h3 { margin: 0 0 4px; font-size: 16px; }
        .news-row p { margin: 0; color: var(--muted); font-size: 13px; }
        .news-row i { color: var(--plum); }
        .news-feature { padding: 28px; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(145deg, var(--plum-deep), var(--plum)); }
        .news-feature h3 { margin: 16px 0 10px; font-size: 25px; }
        .news-feature p { color: rgba(255,255,255,.72); font-size: 14px; }
        .news-feature .tag { color: #fff; border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.12); }

        .plan-section { background: #fff; }
        .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
        .plan { position: relative; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--paper); }
        .plan.featured { color: #fff; border-color: var(--plum); background: var(--plum); box-shadow: var(--shadow); transform: translateY(-10px); }
        .plan-label { color: var(--coral); font-size: 12px; font-weight: 900; }
        .featured .plan-label { color: #f9c7bc; }
        .plan h3 { margin: 14px 0 6px; font-size: 20px; }
        .plan p { min-height: 50px; margin: 0; color: var(--muted); font-size: 13px; }
        .featured p { color: rgba(255,255,255,.7); }
        .price { margin: 20px 0; font-size: 31px; font-weight: 900; }
        .price small { color: var(--muted); font-size: 12px; font-weight: 400; }
        .featured .price small { color: rgba(255,255,255,.65); }
        .plan ul { padding: 0; margin: 0 0 24px; list-style: none; color: var(--muted); font-size: 13px; }
        .plan li { padding: 7px 0; }
        .plan li i { margin-right: 7px; color: var(--success); }
        .featured li { color: rgba(255,255,255,.82); }
        .featured li i { color: #b9dfc6; }
        .featured .btn-main { color: var(--plum-deep); background: #fff; box-shadow: none; }
        .featured .btn-main:hover { background: #f7dcd7; }

        .faq-wrap { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; }
        .accordion-item { margin-bottom: 10px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px !important; background: #fff; }
        .accordion-button { padding: 18px 20px; color: var(--ink); font-size: 15px; font-weight: 800; background: #fff; box-shadow: none !important; }
        .accordion-button:not(.collapsed) { color: var(--plum); background: #f8edef; }
        .accordion-button::after { background-size: 13px; }
        .accordion-body { padding: 0 20px 19px; color: var(--muted); font-size: 13px; }

        .matrix { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
        .matrix a { display: flex; min-height: 126px; flex-direction: column; justify-content: space-between; padding: 18px; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; color: #fff; background: rgba(255,255,255,.07); }
        .matrix a:hover { background: rgba(255,255,255,.15); transform: translateY(-3px); }
        .matrix i { color: #f5b4a6; font-size: 22px; }
        .matrix strong { font-size: 15px; }
        .matrix span { color: rgba(255,255,255,.58); font-size: 12px; }

        .cta-band { padding: 48px 0; background: linear-gradient(110deg, #f1d9d8, #eadfe5); }
        .cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 25px; }
        .cta-inner h2 { margin: 0 0 8px; font-size: 29px; }
        .cta-inner p { margin: 0; color: var(--muted); font-size: 14px; }

        .site-footer { padding: 52px 0 25px; color: rgba(255,255,255,.72); background: #261923; }
        .footer-top { display: grid; grid-template-columns: 1.35fr .65fr .65fr; gap: 60px; padding-bottom: 40px; }
        .footer-brand { color: #fff; font-weight: 900; font-size: 18px; }
        .footer-top p { max-width: 390px; margin: 15px 0 0; color: rgba(255,255,255,.56); font-size: 13px; }
        .footer-title { margin-bottom: 14px; color: #fff; font-size: 13px; font-weight: 800; }
        .footer-links { display: grid; gap: 8px; font-size: 13px; }
        .footer-links a:hover { color: #f5b4a6; }
        .footer-bottom { display: flex; justify-content: space-between; gap: 15px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.42); font-size: 12px; }

        @media (max-width: 1100px) {
            .toolbar { gap: 14px; }
            .brand { min-width: 185px; }
            .nav-links a { padding: 8px 7px; font-size: 12px; }
            .toolbar-actions .status { display: none; }
        }
        @media (max-width: 900px) {
            .mobile-toggle { display: grid; }
            .toolbar { min-height: 66px; }
            .nav-links {
                position: absolute;
                top: 66px;
                right: 20px;
                left: 20px;
                display: none;
                padding: 12px;
                border: 1px solid var(--line);
                border-radius: 14px;
                background: #fff;
                box-shadow: var(--shadow);
            }
            .nav-links.show { display: grid; }
            .nav-links a { padding: 11px 14px; }
            .toolbar-actions .btn-main { display: none; }
            .hero { min-height: 600px; }
            .vertical-grid, .review-layout, .news-layout, .faq-wrap { grid-template-columns: 1fr; gap: 35px; }
            .vertical-image { height: 480px; }
            .hot-wrap { grid-template-columns: 1fr; }
            .hot-side { display: grid; grid-template-columns: 1fr 1fr; }
            .plan-grid { gap: 12px; }
            .plan { padding: 22px; }
            .matrix { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 620px) {
            .container { width: min(100% - 28px, var(--container)); }
            .section { padding: 64px 0; }
            .brand { min-width: 0; max-width: 205px; font-size: 13px; }
            .brand-mark { flex: 0 0 32px; width: 32px; height: 32px; }
            .icon-button { width: 34px; height: 34px; }
            .hero { min-height: 620px; background-position: 61% center; }
            .hero-content { padding: 74px 0 105px; }
            .hero h1 { font-size: 43px; }
            .hero-copy { font-size: 16px; line-height: 1.75; }
            .hero-metrics { gap: 18px; margin-top: 30px; }
            .hero::after { right: 14px; bottom: 22px; }
            .intro-grid { grid-template-columns: 1fr; gap: 10px; }
            .vertical-image { height: 420px; }
            .number-item { grid-template-columns: 30px 1fr 20px; gap: 10px; }
            .hot-side, .quote-list, .plan-grid { grid-template-columns: 1fr; }
            .plan.featured { transform: none; }
            .news-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
            .news-row time { grid-column: 1 / -1; }
            .news-row p { grid-column: 1 / -1; }
            .news-row i { grid-column: 2; grid-row: 2; }
            .cta-inner, .footer-bottom { align-items: flex-start; flex-direction: column; }
            .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
            .footer-top > div:first-child { grid-column: 1 / -1; }
            .matrix { grid-template-columns: 1fr 1fr; }
        }

/* roulang page: category1 */
:root{
      --ink:#241b27;--muted:#756b77;--paper:#faf8f6;--surface:#fff;
      --soft:#f1e9eb;--line:#e7dde0;--plum:#71344e;--plum-deep:#432034;
      --coral:#d66d61;--mint:#8eb4a9;--gold:#c7a16a;--success:#3c9372;
      --shadow:0 18px 50px rgba(67,32,52,.10);--small-shadow:0 8px 24px rgba(67,32,52,.08);
      --radius-lg:24px;--radius-md:16px;--radius-sm:10px;--container:1180px;
    }
    *,*::before,*::after{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{margin:0;color:var(--ink);background:var(--paper);font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-size:16px;line-height:1.7;overflow-x:hidden}
    a{color:inherit;text-decoration:none;transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
    img{display:block;width:100%;max-width:100%;object-fit:cover}
    button,input,select{font:inherit}
    button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(214,109,97,.38);outline-offset:3px}
    .container{width:min(var(--container),calc(100% - 40px));margin:0 auto}
    .site-header{position:sticky;top:0;z-index:50;border-bottom:1px solid rgba(231,221,224,.9);background:rgba(250,248,246,.95);backdrop-filter:blur(14px)}
    .toolbar{min-height:70px;display:flex;align-items:center;gap:22px}
    .brand{display:inline-flex;align-items:center;gap:10px;min-width:205px;color:var(--plum-deep);font-size:16px;font-weight:900;line-height:1.25}
    .brand-mark{display:grid;width:34px;height:34px;place-items:center;color:#fff;border-radius:10px;background:linear-gradient(135deg,var(--plum),var(--coral));box-shadow:0 5px 12px rgba(113,52,78,.2)}
    .nav-links{display:flex;align-items:center;gap:4px;flex:1}
    .nav-links a{padding:9px 11px;border-radius:8px;color:var(--muted);font-size:13px;white-space:nowrap}
    .nav-links a:hover,.nav-links a.active{color:var(--plum);background:#f1e4e6}
    .toolbar-actions{display:flex;align-items:center;gap:10px}
    .online{display:inline-flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;white-space:nowrap}
    .status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(60,147,114,.13)}
    .icon-button{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:9px;color:var(--plum);background:var(--surface)}
    .icon-button:hover{border-color:var(--plum);background:#f5eaec;transform:translateY(-1px)}
    .mobile-toggle{display:none}
    .btn-main,.btn-outline,.btn-text{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:0 21px;border-radius:10px;font-size:14px;font-weight:800;border:1px solid transparent;cursor:pointer}
    .btn-main{color:#fff;background:linear-gradient(110deg,var(--plum),#a54f63);box-shadow:0 10px 22px rgba(113,52,78,.22)}
    .btn-main:hover{color:#fff;transform:translateY(-2px);box-shadow:0 14px 26px rgba(113,52,78,.3)}
    .btn-outline{color:var(--plum);background:transparent;border-color:var(--plum)}
    .btn-outline:hover{color:#fff;background:var(--plum);transform:translateY(-2px)}
    .btn-text{padding:0;min-height:42px;color:var(--plum);background:transparent}
    .btn-text:hover{color:var(--coral);gap:13px}
    .page-intro{padding:76px 0 58px;background:linear-gradient(130deg,#f4e8ea 0%,#faf8f6 58%,#edf4f0 100%);border-bottom:1px solid var(--line)}
    .eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--plum);font-size:12px;font-weight:800;letter-spacing:1.5px}
    .eyebrow::before{content:"";width:24px;height:2px;background:var(--coral)}
    .page-intro h1{max-width:850px;margin:15px 0 16px;font-size:clamp(34px,5vw,62px);line-height:1.16;letter-spacing:-1px}
    .page-intro p{max-width:760px;margin:0;color:var(--muted);font-size:17px}
    .intro-meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
    .badge-soft,.tag{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px;border:1px solid var(--line);color:var(--plum);background:#fff;font-size:12px;line-height:1.2;white-space:nowrap}
    .badge-soft{border-color:transparent;background:#f6e5e4;color:#a34f4c}
    .section{padding:72px 0}.section-soft{background:var(--soft)}
    .section-head{margin-bottom:30px;max-width:730px}
    .section-head h2{margin:10px 0 12px;font-size:clamp(28px,4vw,42px);line-height:1.2}
    .section-head p{margin:0;color:var(--muted)}
    .filter-panel{margin-top:-28px;position:relative;z-index:2;padding:24px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--shadow)}
    .filter-label{display:block;margin-bottom:7px;color:var(--muted);font-size:12px;font-weight:800}
    .form-control,.form-select{min-height:46px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff}
    .form-control:focus,.form-select:focus{border-color:var(--coral);box-shadow:0 0 0 4px rgba(214,109,97,.13)}
    .filter-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
    .filter-chip{padding:7px 13px;border:1px solid var(--line);border-radius:999px;background:#fff;color:var(--muted);font-size:13px;cursor:pointer}
    .filter-chip:hover,.filter-chip.selected{color:#fff;border-color:var(--plum);background:var(--plum)}
    .content-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:34px;align-items:start}
    .content-list{display:flex;flex-direction:column;gap:18px}
    .feature-item{display:grid;grid-template-columns:240px minmax(0,1fr);gap:22px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);box-shadow:var(--small-shadow);transition:transform .2s,box-shadow .2s}
    .feature-item:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
    .feature-image{height:184px;border-radius:12px;overflow:hidden}
    .feature-image img{height:100%;transition:transform .4s ease}
    .feature-item:hover .feature-image img{transform:scale(1.04)}
    .item-number{color:var(--coral);font-size:12px;font-weight:900;letter-spacing:1px}
    .feature-item h3{margin:5px 0 8px;font-size:22px;line-height:1.35}
    .feature-item p{margin:0 0 14px;color:var(--muted);font-size:14px}
    .item-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
    .item-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--muted);font-size:12px}
    .item-link{color:var(--plum);font-weight:800}
    .sidebar{display:flex;flex-direction:column;gap:18px}
    .side-box{padding:22px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md)}
    .side-box h3{margin:0 0 16px;font-size:18px}
    .side-links{display:flex;flex-direction:column;gap:11px}
    .side-links a{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--line);color:var(--muted);font-size:14px}
    .side-links a:last-child{padding-bottom:0;border-bottom:0}
    .side-links a:hover{color:var(--plum);padding-left:4px}
    .count{color:var(--coral);font-size:12px;font-weight:800}
    .tag-cloud{display:flex;flex-wrap:wrap;gap:8px}
    .status-line{display:flex;align-items:center;gap:9px;color:var(--muted);font-size:13px}
    .status-line strong{color:var(--ink)}
    .empty-state{display:none;padding:32px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:var(--radius-md);background:#fff}
    .banner{position:relative;min-height:310px;display:flex;align-items:center;overflow:hidden;color:#fff;border-radius:var(--radius-lg);background-image:linear-gradient(90deg,rgba(67,32,52,.88),rgba(67,32,52,.42)),url("https://images.unsplash.com/photo-1485968579580-b6d095142e6e?auto=format&fit=crop&w=1800&q=85");background-size:cover;background-position:center}
    .banner-content{max-width:610px;padding:52px}
    .banner h2{margin:12px 0;font-size:clamp(28px,4vw,42px);line-height:1.2}
    .banner p{margin:0 0 22px;color:#f8e9e9}
    .banner .eyebrow{color:#f9d9d0}.banner .eyebrow::before{background:#f9b9a9}
    .related-grid{display:flex;gap:14px;overflow:auto;padding-bottom:8px}
    .related-link{min-width:190px;padding:18px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-md)}
    .related-link:hover{border-color:var(--coral);transform:translateY(-2px);box-shadow:var(--small-shadow)}
    .related-link strong{display:block;margin-bottom:5px;color:var(--plum);font-size:16px}
    .related-link span{color:var(--muted);font-size:13px}
    .faq-list{max-width:850px}
    .accordion-item{margin-bottom:10px;border:1px solid var(--line)!important;border-radius:var(--radius-sm)!important;overflow:hidden;background:#fff}
    .accordion-button{padding:18px 20px;color:var(--ink);font-weight:800;background:#fff;box-shadow:none!important}
    .accordion-button:not(.collapsed){color:var(--plum);background:#f8edef}
    .accordion-body{padding:0 20px 19px;color:var(--muted);font-size:14px}
    .cta-strip{padding:34px 0;color:#fff;background:linear-gradient(110deg,var(--plum-deep),var(--plum))}
    .cta-inner{display:flex;align-items:center;justify-content:space-between;gap:25px}
    .cta-inner h2{margin:0 0 5px;font-size:28px}.cta-inner p{margin:0;color:#ead9df}
    .cta-strip .btn-main{color:var(--plum-deep);background:#fff;box-shadow:none}.cta-strip .btn-main:hover{background:#f9ded9;color:var(--plum-deep)}
    .site-footer{padding:54px 0 22px;background:#241923;color:#f8eef0}
    .footer-top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:60px;padding-bottom:40px}
    .footer-brand{display:inline-block;margin-bottom:13px;font-size:18px;font-weight:900}
    .footer-top p{max-width:420px;margin:0;color:#c9b8bf;font-size:14px}
    .footer-title{margin-bottom:14px;color:#fff;font-size:13px;font-weight:900}
    .footer-links{display:flex;flex-direction:column;gap:8px}.footer-links a{color:#c9b8bf;font-size:14px}.footer-links a:hover{color:#f2b1a5}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);color:#a9949d;font-size:12px}
    @media(max-width:991px){
      .toolbar{gap:12px}.brand{min-width:auto}.nav-links{gap:0}.nav-links a{padding:8px 7px;font-size:12px}.online{display:none}
      .content-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:767px){
      .container{width:min(var(--container),calc(100% - 28px))}
      .toolbar{min-height:62px}.brand{font-size:14px}.brand-mark{width:31px;height:31px}
      .mobile-toggle{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:9px;background:#fff;color:var(--plum)}
      .nav-links{display:none;position:absolute;top:62px;left:14px;right:14px;flex-direction:column;align-items:stretch;padding:10px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow)}
      .nav-links.show{display:flex}.nav-links a{padding:11px 13px}
      .toolbar-actions .btn-main{display:none}.page-intro{padding:53px 0 48px}.page-intro h1{font-size:39px;letter-spacing:0}
      .section{padding:55px 0}.filter-panel{margin-top:-18px;padding:18px}.feature-item{grid-template-columns:1fr;gap:15px}.feature-image{height:220px}.feature-item h3{font-size:20px}
      .sidebar{display:flex}.banner{min-height:390px;border-radius:18px}.banner-content{padding:30px 25px}.cta-inner{align-items:flex-start;flex-direction:column}
      .footer-top{grid-template-columns:1fr;gap:28px}.footer-bottom{align-items:flex-start;flex-direction:column;gap:6px}
    }
    @media(max-width:420px){.brand{max-width:185px}.brand span:last-child{display:block}.feature-image{height:190px}.page-intro h1{font-size:34px}.filter-tags{overflow:auto;flex-wrap:nowrap}}