/* roulang page: index */
:root{
            --bg:#0a0908;
            --bg-2:#121110;
            --panel:#151311;
            --panel-2:#1b1815;
            --line:#39322b;
            --line-soft:#2a241f;
            --text:#f2e7d8;
            --muted:#b8a999;
            --soft:#867869;
            --gold:#c8a45b;
            --gold-2:#e1c77b;
            --red:#6e2f25;
            --red-2:#8b4738;
            --good:#6fb66d;
            --warn:#d2a455;
            --shadow:0 10px 30px rgba(0,0,0,.35);
            --shadow-soft:0 8px 18px rgba(0,0,0,.22);
            --radius:8px;
            --radius-sm:6px;
            --space:24px;
            --space-sm:14px;
        }
        *{box-sizing:border-box}
        html,body{margin:0;padding:0}
        body{
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), transparent 28%),
                radial-gradient(circle at 20% 0%, rgba(200,164,91,.08), transparent 22%),
                radial-gradient(circle at 80% 10%, rgba(110,47,37,.16), transparent 24%),
                repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 22px),
                var(--bg);
            color:var(--text);
            font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
            line-height:1.7;
            letter-spacing:0;
        }
        a{color:inherit;text-decoration:none}
        a:hover{color:inherit}
        img{max-width:100%;display:block}
        button,input,textarea{font:inherit}
        .site-shell{position:relative;overflow:hidden}
        .site-shell::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size:20px 20px;
            opacity:.24;
            mix-blend-mode:screen;
        }
        .container-wide{
            width:min(1180px, calc(100% - 32px));
            margin:0 auto;
        }
        .topbar{
            padding:14px 0 8px;
        }
        .nav-panel{
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            padding:12px;
            backdrop-filter:blur(4px);
        }
        .brand-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            margin-bottom:12px;
            flex-wrap:wrap;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:0;
        }
        .brand-mark{
            width:40px;
            height:40px;
            display:grid;
            place-items:center;
            border-radius:8px;
            border:1px solid var(--gold);
            color:var(--gold-2);
            background:linear-gradient(180deg, rgba(200,164,91,.18), rgba(200,164,91,.06));
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
            flex:0 0 auto;
        }
        .brand strong{
            display:block;
            font-size:1rem;
            line-height:1.1;
            letter-spacing:0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand span{
            display:block;
            color:var(--muted);
            font-size:.82rem;
        }
        .brand-meta{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .micro-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            border:1px solid var(--line);
            color:var(--muted);
            background:rgba(255,255,255,.03);
            border-radius:999px;
            padding:6px 10px;
            font-size:.78rem;
            white-space:nowrap;
        }
        .micro-badge i{color:var(--gold)}
        .nav-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr)) auto;
            gap:10px;
            align-items:center;
        }
        .nav-chip{
            min-height:44px;
            padding:10px 12px;
            border-radius:8px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
            display:flex;
            align-items:center;
            gap:10px;
            justify-content:flex-start;
            transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
        }
        .nav-chip:hover,.nav-chip:focus-visible{
            transform:translateY(-1px);
            border-color:var(--gold);
            box-shadow:0 6px 16px rgba(0,0,0,.24);
            outline:none;
        }
        .nav-chip.active{
            background:linear-gradient(180deg, rgba(200,164,91,.16), rgba(255,255,255,.04));
            border-color:rgba(225,199,123,.7);
        }
        .nav-dot{
            width:9px;
            height:9px;
            border-radius:2px;
            background:var(--gold);
            box-shadow:0 0 0 2px rgba(200,164,91,.14);
            flex:0 0 auto;
        }
        .nav-chip span:last-child{
            font-size:.92rem;
            white-space:nowrap;
        }
        .nav-cta{
            justify-self:end;
            display:flex;
            gap:10px;
            align-items:center;
        }
        .btn-gold,.btn-darkline,.btn-redline{
            border-radius:8px;
            padding:10px 14px;
            font-weight:700;
            border:1px solid transparent;
            transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
        }
        .btn-gold{
            background:linear-gradient(180deg, var(--gold-2), var(--gold));
            color:#1a1308;
            border-color:rgba(255,255,255,.08);
        }
        .btn-gold:hover,.btn-gold:focus-visible{transform:translateY(-1px); color:#1a1308; box-shadow:0 8px 18px rgba(200,164,91,.18); outline:none}
        .btn-darkline{
            background:rgba(255,255,255,.03);
            color:var(--text);
            border-color:var(--line);
        }
        .btn-darkline:hover,.btn-darkline:focus-visible{
            transform:translateY(-1px);
            border-color:var(--gold);
            color:var(--text);
            outline:none;
        }
        .btn-redline{
            background:rgba(110,47,37,.22);
            color:#f8ddd7;
            border-color:rgba(139,71,56,.8);
        }
        .btn-redline:hover,.btn-redline:focus-visible{
            transform:translateY(-1px);
            border-color:var(--gold);
            outline:none;
        }
        main{padding:10px 0 34px}
        .hero{
            padding:22px 0 10px;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
            align-items:stretch;
        }
        .hero-main,.hero-side,.panel{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            box-shadow:var(--shadow);
        }
        .hero-main{
            padding:28px;
            min-height:360px;
            position:relative;
            overflow:hidden;
        }
        .hero-main::after{
            content:"";
            position:absolute;
            right:-10px;
            top:-10px;
            width:160px;
            height:160px;
            background:
                linear-gradient(135deg, rgba(200,164,91,.18), rgba(110,47,37,.05));
            border:1px solid rgba(225,199,123,.2);
            transform:rotate(12deg);
            opacity:.8;
            pointer-events:none;
        }
        .hero-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid rgba(225,199,123,.35);
            background:rgba(200,164,91,.08);
            color:var(--gold-2);
            font-size:.82rem;
            font-weight:700;
            letter-spacing:0;
        }
        h1{
            margin:16px 0 12px;
            font-size:clamp(2rem, 3vw, 3.2rem);
            line-height:1.06;
            letter-spacing:0;
            font-weight:900;
        }
        .hero-copy{
            max-width:60ch;
            color:#eadfd1;
            font-size:1rem;
            margin:0 0 18px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:22px 0 16px;
        }
        .hero-list{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:10px;
            margin-top:18px;
        }
        .hero-pill{
            padding:10px 12px;
            border-radius:8px;
            border:1px solid var(--line-soft);
            background:rgba(0,0,0,.14);
            min-height:68px;
        }
        .hero-pill strong{
            display:block;
            font-size:.95rem;
            margin-bottom:4px;
        }
        .hero-pill span{
            display:block;
            color:var(--muted);
            font-size:.82rem;
            line-height:1.45;
        }
        .hero-side{
            padding:18px;
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .side-block{
            padding:14px;
            border:1px solid var(--line-soft);
            border-radius:8px;
            background:rgba(0,0,0,.16);
        }
        .side-block h3{
            font-size:.95rem;
            margin:0 0 8px;
        }
        .side-block p{
            margin:0;
            color:var(--muted);
            font-size:.88rem;
        }
        .entry-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:10px;
        }
        .entry-mini{
            min-height:88px;
            border-radius:8px;
            border:1px solid var(--line-soft);
            background:linear-gradient(180deg, rgba(200,164,91,.08), rgba(255,255,255,.02));
            padding:12px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .entry-mini b{
            font-size:.92rem;
        }
        .entry-mini span{
            color:var(--muted);
            font-size:.8rem;
        }
        .section{
            padding:18px 0;
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:14px;
            margin-bottom:14px;
            flex-wrap:wrap;
        }
        .section-head h2{
            margin:0;
            font-size:1.5rem;
            line-height:1.15;
            font-weight:850;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:64ch;
            font-size:.94rem;
        }
        .grid-4{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:12px;
        }
        .grid-3{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:12px;
        }
        .grid-2{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:12px;
        }
        .info-card,.feature-card,.stat-card,.faq-item,.quote-card,.data-card,.list-card,.form-card{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.015));
            box-shadow:var(--shadow-soft);
        }
        .info-card,.feature-card,.stat-card,.data-card,.list-card{
            padding:16px;
        }
        .feature-card{
            min-height:150px;
        }
        .feature-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:12px;
        }
        .feature-icon{
            width:38px;
            height:38px;
            display:grid;
            place-items:center;
            border-radius:8px;
            border:1px solid rgba(225,199,123,.35);
            color:var(--gold-2);
            background:rgba(200,164,91,.08);
            flex:0 0 auto;
            font-size:1rem;
        }
        .tiny-tag{
            display:inline-flex;
            align-items:center;
            min-height:26px;
            padding:4px 9px;
            border-radius:999px;
            border:1px solid rgba(225,199,123,.25);
            color:var(--gold-2);
            background:rgba(200,164,91,.06);
            font-size:.76rem;
            white-space:nowrap;
        }
        .feature-card h3,.info-card h3,.data-card h3,.list-card h3,.form-card h3,.stat-card h3,.faq-item h3,.quote-card h3{
            margin:0 0 8px;
            font-size:1rem;
            line-height:1.3;
            font-weight:800;
        }
        .feature-card p,.info-card p,.data-card p,.list-card p,.form-card p,.stat-card p,.quote-card p{
            margin:0;
            color:var(--muted);
            font-size:.9rem;
        }
        .section-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 10px;
            border:1px solid var(--line);
            border-radius:999px;
            color:var(--muted);
            background:rgba(0,0,0,.12);
            font-size:.78rem;
        }
        .section-badge i{color:var(--gold)}
        .list-row{
            display:flex;
            justify-content:space-between;
            gap:12px;
            padding:12px 0;
            border-bottom:1px solid var(--line-soft);
            align-items:flex-start;
        }
        .list-row:last-child{border-bottom:0;padding-bottom:0}
        .list-row:first-child{padding-top:0}
        .list-row b{
            display:block;
            margin-bottom:4px;
            font-size:.95rem;
        }
        .list-row small{
            color:var(--muted);
            display:block;
        }
        .list-kpi{
            text-align:right;
            min-width:84px;
            flex:0 0 auto;
        }
        .list-kpi strong{
            display:block;
            color:var(--gold-2);
            font-size:.96rem;
        }
        .list-kpi span{
            display:block;
            color:var(--muted);
            font-size:.76rem;
        }
        .metric{
            display:flex;
            flex-direction:column;
            gap:8px;
        }
        .metric .num{
            font-size:1.8rem;
            font-weight:900;
            color:var(--gold-2);
            line-height:1;
        }
        .metric .label{
            color:var(--muted);
            font-size:.84rem;
        }
        .bar{
            height:10px;
            background:#201a15;
            border:1px solid var(--line-soft);
            border-radius:999px;
            overflow:hidden;
        }
        .bar > span{
            display:block;
            height:100%;
            background:linear-gradient(90deg, var(--red), var(--gold));
        }
        .faq{
            display:grid;
            gap:10px;
        }
        .faq-item{
            overflow:hidden;
        }
        .faq-item .accordion-button{
            background:transparent;
            color:var(--text);
            box-shadow:none;
            padding:14px 16px;
            border:0;
            font-weight:800;
        }
        .faq-item .accordion-button:not(.collapsed){
            color:var(--gold-2);
            background:rgba(200,164,91,.06);
            box-shadow:none;
        }
        .faq-item .accordion-button:focus{
            box-shadow:none;
            border-color:transparent;
        }
        .faq-item .accordion-body{
            padding:0 16px 16px;
            color:var(--muted);
            font-size:.92rem;
        }
        .form-card{
            padding:18px;
        }
        .form-control,.form-select{
            background:#100e0c;
            border:1px solid var(--line);
            color:var(--text);
            border-radius:8px;
            min-height:46px;
        }
        .form-control:focus,.form-select:focus{
            background:#100e0c;
            border-color:var(--gold);
            box-shadow:0 0 0 .18rem rgba(200,164,91,.12);
            color:var(--text);
        }
        .form-control::placeholder{
            color:#7f7163;
        }
        .form-label{
            color:var(--muted);
            font-size:.86rem;
            margin-bottom:6px;
        }
        .privacy{
            color:var(--soft);
            font-size:.84rem;
            line-height:1.6;
        }
        .footer{
            margin-top:18px;
            padding:20px 0 30px;
        }
        .footer-inner{
            border-top:1px solid var(--line);
            padding-top:18px;
            display:flex;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            color:var(--muted);
            font-size:.88rem;
        }
        .footer-links{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        .footer-links a{
            color:var(--text);
            border-bottom:1px dotted rgba(225,199,123,.45);
        }
        .note-line{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:12px;
        }
        .note-line .tiny-tag{
            background:rgba(255,255,255,.03);
        }
        .section-divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(200,164,91,.34), transparent);
            margin:18px 0;
        }
        .tab-like{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .tab-like .tiny-tag{
            cursor:default;
        }
        .matrix-card{
            padding:16px;
            display:grid;
            gap:10px;
        }
        .matrix-card .rowline{
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            padding:10px 0;
            border-bottom:1px solid var(--line-soft);
        }
        .matrix-card .rowline:last-child{border-bottom:0;padding-bottom:0}
        .matrix-card .rowline span{
            color:var(--muted);
            font-size:.88rem;
        }
        .matrix-card .rowline strong{
            font-size:.94rem;
        }
        .callout{
            border:1px solid rgba(225,199,123,.35);
            background:linear-gradient(180deg, rgba(200,164,91,.09), rgba(255,255,255,.015));
            border-radius:var(--radius);
            padding:16px;
        }
        .callout h3{margin:0 0 8px;font-size:1.05rem}
        .callout p{margin:0;color:var(--muted);font-size:.92rem}
        .split-layout{
            display:grid;
            grid-template-columns:1fr .95fr;
            gap:12px;
        }
        .list-card ul{
            margin:0;
            padding-left:18px;
            color:var(--muted);
        }
        .list-card li{margin-bottom:8px}
        .screenshot{
            min-height:220px;
            border:1px solid var(--line-soft);
            border-radius:8px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
                repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px),
                #11100f;
            position:relative;
            overflow:hidden;
        }
        .screenshot::before{
            content:"";
            position:absolute;
            inset:16px;
            border:1px solid rgba(225,199,123,.25);
            border-radius:8px;
            background:
                linear-gradient(180deg, rgba(200,164,91,.14), transparent 40%),
                rgba(0,0,0,.18);
        }
        .screenshot::after{
            content:"入口展示";
            position:absolute;
            left:28px;
            top:28px;
            padding:6px 10px;
            border:1px solid rgba(225,199,123,.35);
            border-radius:999px;
            color:var(--gold-2);
            background:rgba(0,0,0,.25);
            font-size:.8rem;
        }
        .accent-grid{
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:10px;
        }
        .accent-card{
            min-height:92px;
            padding:14px;
            border:1px solid var(--line-soft);
            border-radius:8px;
            background:rgba(255,255,255,.03);
        }
        .accent-card small{
            display:block;
            color:var(--muted);
            margin-top:6px;
        }
        .pointer{
            color:var(--gold-2);
        }
        .carousel-hint{
            display:flex;
            gap:10px;
            align-items:center;
            flex-wrap:wrap;
        }
        .carousel-hint .tiny-tag{
            background:rgba(110,47,37,.15);
            color:#f0d7d0;
            border-color:rgba(139,71,56,.55);
        }
        .floating-form{
            display:grid;
            gap:10px;
        }
        .btn-wrap{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        @media (max-width: 1024px){
            .nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
            .nav-cta{justify-self:start}
            .hero-grid{grid-template-columns:1fr}
            .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
            .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
            .split-layout{grid-template-columns:1fr}
        }
        @media (max-width: 768px){
            .container-wide{width:min(100% - 22px, 1180px)}
            .topbar{padding-top:10px}
            .nav-grid{grid-template-columns:1fr}
            .nav-cta{width:100%;justify-content:stretch}
            .nav-cta .btn-gold,.nav-cta .btn-darkline,.nav-cta .btn-redline{flex:1 1 0}
            .hero-main{padding:20px;min-height:auto}
            .hero-list{grid-template-columns:1fr}
            .grid-4,.grid-3,.grid-2,.entry-grid,.accent-grid{grid-template-columns:1fr}
            .section-head{align-items:flex-start}
            h1{font-size:2rem}
        }
        @media (max-width: 520px){
            .brand-row{align-items:flex-start}
            .brand-meta{justify-content:flex-start}
            .hero-actions,.btn-wrap{flex-direction:column}
            .hero-actions .btn-gold,.hero-actions .btn-darkline,.hero-actions .btn-redline,
            .btn-wrap .btn-gold,.btn-wrap .btn-darkline,.btn-wrap .btn-redline{width:100%}
            .matrix-card .rowline{flex-direction:column;align-items:flex-start}
            .list-kpi{text-align:left;min-width:0}
            .footer-inner{flex-direction:column}
        }

/* roulang page: category2 */
:root{
            --bg:#090807;
            --bg-soft:#120f0e;
            --panel:#151110;
            --panel-2:#1b1715;
            --panel-3:#201b18;
            --line:rgba(229, 199, 128, .16);
            --line-strong:rgba(229, 199, 128, .34);
            --text:#f2e8d8;
            --muted:#b59f88;
            --gold:#d9b15a;
            --gold-soft:#f0d38b;
            --wine:#6c2c28;
            --wine-2:#8e3d35;
            --shadow:0 16px 30px rgba(0,0,0,.38);
            --radius:8px;
            --radius-sm:6px;
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0) 24%),
                radial-gradient(circle at top left, rgba(105, 56, 43, .15), transparent 32%),
                radial-gradient(circle at top right, rgba(217, 177, 90, .10), transparent 28%),
                linear-gradient(180deg, #0a0908 0%, #090807 100%);
            background-attachment: fixed;
            font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            line-height:1.7;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.008) 0 2px, transparent 2px 5px);
            background-size: 42px 42px, 42px 42px, auto;
            opacity:.5;
            mix-blend-mode: screen;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(217,177,90,.28);color:#fff}

        .container-wide{
            width:min(1320px, calc(100% - 2rem));
            margin:0 auto;
            position:relative;
            z-index:1;
        }

        .topbar{
            position:sticky;
            top:0;
            z-index:1030;
            padding:.85rem 0 0;
            background:linear-gradient(180deg, rgba(9,8,7,.98), rgba(9,8,7,.86));
            backdrop-filter: blur(8px);
        }
        .nav-panel{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(28,23,21,.98), rgba(14,12,11,.98));
            box-shadow:var(--shadow);
            padding:1rem;
        }
        .brand-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            flex-wrap:wrap;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:.85rem;
            min-width:0;
        }
        .brand-mark{
            width:44px;
            height:44px;
            flex:0 0 auto;
            border-radius:8px;
            display:grid;
            place-items:center;
            color:#201606;
            background:linear-gradient(180deg, var(--gold-soft), var(--gold));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.32);
        }
        .brand strong{
            display:block;
            font-size:1.03rem;
            line-height:1.1;
            font-weight:800;
        }
        .brand span{
            display:block;
            color:var(--muted);
            font-size:.82rem;
            line-height:1.2;
            margin-top:.15rem;
        }
        .brand-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
        }
        .micro-badge{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.03);
            color:#dcc7ad;
            padding:.42rem .7rem;
            font-size:.76rem;
            white-space:nowrap;
        }

        .nav-grid{
            display:flex;
            align-items:center;
            gap:.65rem;
            margin-top:.9rem;
            flex-wrap:wrap;
        }
        .nav-link-chip{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            min-height:46px;
            border:1px solid var(--line);
            border-radius:8px;
            background:rgba(255,255,255,.02);
            padding:.72rem .95rem;
            color:var(--text);
            white-space:nowrap;
            transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
        }
        .nav-link-chip:hover{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:rgba(217,177,90,.08);
            color:#fff1c8;
        }
        .nav-link-chip.active{
            border-color:rgba(217,177,90,.5);
            background:linear-gradient(180deg, rgba(217,177,90,.18), rgba(217,177,90,.08));
            color:#fff3cf;
        }
        .nav-cta{
            margin-left:auto;
            display:flex;
            gap:.55rem;
            flex-wrap:wrap;
        }

        .btn-gold,
        .btn-darkline{
            border-radius:8px;
            min-height:46px;
            padding:.7rem 1rem;
            font-weight:700;
            transition:transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
        }
        .btn-gold{
            background:linear-gradient(180deg, var(--gold-soft), var(--gold));
            border:1px solid rgba(255,236,188,.18);
            color:#201606;
            box-shadow:0 10px 24px rgba(0,0,0,.26);
        }
        .btn-gold:hover{
            transform:translateY(-1px);
            background:linear-gradient(180deg, #f3dc9d, #e1b75b);
            color:#190f05;
        }
        .btn-darkline{
            background:rgba(255,255,255,.02);
            border:1px solid var(--line);
            color:var(--text);
        }
        .btn-darkline:hover{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:rgba(255,255,255,.05);
            color:#fff;
        }

        main{
            padding:1.1rem 0 3rem;
            position:relative;
            z-index:1;
        }
        section{padding:1.2rem 0}
        .hero-section{padding-top:1.1rem}
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.16fr) minmax(320px,.84fr);
            gap:1.2rem;
            align-items:stretch;
        }
        .hero-copy{
            padding:1.1rem 0;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            border:1px solid rgba(217,177,90,.26);
            border-radius:999px;
            background:rgba(217,177,90,.08);
            color:#ffe8bd;
            padding:.38rem .7rem;
            font-size:.78rem;
            font-weight:700;
            margin-bottom:.9rem;
        }
        h1{
            font-size:3rem;
            line-height:1.08;
            margin:0 0 .85rem;
            font-weight:800;
            letter-spacing:0;
        }
        .hero-lead{
            max-width:56ch;
            color:#e9d6bf;
            font-size:1.02rem;
            margin-bottom:1.1rem;
        }
        .hero-actions{
            display:flex;
            gap:.7rem;
            flex-wrap:wrap;
            margin-bottom:1rem;
        }
        .hero-points{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:.65rem;
        }
        .point{
            border:1px solid var(--line);
            border-radius:8px;
            background:rgba(255,255,255,.03);
            padding:.75rem .8rem;
            display:flex;
            gap:.55rem;
            align-items:flex-start;
            min-height:70px;
        }
        .point i{
            color:var(--gold);
            margin-top:.18rem;
            flex:0 0 auto;
        }
        .point strong{
            display:block;
            font-size:.92rem;
            line-height:1.25;
        }
        .point span{
            display:block;
            color:var(--muted);
            font-size:.78rem;
            line-height:1.35;
        }
        .note-bar{
            display:flex;
            align-items:center;
            gap:.55rem;
            flex-wrap:wrap;
            margin-top:.8rem;
            color:#dcc8aa;
            font-size:.82rem;
        }
        .note-bar i{color:var(--gold)}

        .hero-panel{
            border:1px solid var(--line);
            border-radius:8px;
            background:linear-gradient(180deg, rgba(27,22,20,.96), rgba(12,10,9,.98));
            box-shadow:var(--shadow);
            padding:1rem;
            display:flex;
            flex-direction:column;
            gap:1rem;
        }
        .panel-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.8rem;
        }
        .panel-tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            padding:.35rem .6rem;
            border-radius:999px;
            border:1px solid rgba(217,177,90,.3);
            background:rgba(217,177,90,.08);
            color:#ffe5b8;
            font-size:.76rem;
            white-space:nowrap;
        }
        .countdown-wrap{
            display:flex;
            align-items:center;
            gap:1rem;
        }
        .countdown-ring{
            width:168px;
            height:168px;
            border-radius:50%;
            padding:12px;
            flex:0 0 auto;
            background:conic-gradient(from 180deg, var(--gold) 0 236deg, rgba(255,255,255,.07) 236deg 360deg);
        }
        .ring-core{
            width:100%;
            height:100%;
            border-radius:50%;
            background:linear-gradient(180deg, #151110, #0f0d0c);
            border:1px solid rgba(255,255,255,.06);
            display:flex;
            align-items:center;
            justify-content:center;
            flex-direction:column;
            text-align:center;
        }
        .ring-core strong{
            font-size:2.4rem;
            line-height:1;
            color:#fff1cb;
        }
        .ring-core span{
            font-size:.84rem;
            color:var(--muted);
            margin-top:.15rem;
        }
        .ring-copy h2{
            font-size:1.1rem;
            margin:0 0 .35rem;
            font-weight:800;
        }
        .ring-copy p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.58;
        }
        .dot-row{
            display:flex;
            align-items:center;
            gap:.45rem;
            flex-wrap:wrap;
        }
        .dot{
            width:10px;
            height:10px;
            border-radius:50%;
            border:1px solid var(--line);
            background:rgba(255,255,255,.08);
        }
        .dot.active{
            background:var(--gold);
            border-color:rgba(255,236,188,.45);
            box-shadow:0 0 0 3px rgba(217,177,90,.12);
        }
        .dot-label{
            font-size:.78rem;
            color:#dbc7ad;
            padding-right:.45rem;
        }
        .panel-list{
            display:grid;
            gap:.55rem;
        }
        .panel-item{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.8rem;
            border:1px solid var(--line);
            border-radius:8px;
            background:rgba(255,255,255,.02);
            padding:.7rem .85rem;
        }
        .panel-item strong{
            font-size:.92rem;
            color:#fff1c8;
        }
        .panel-item span{
            font-size:.8rem;
            color:var(--muted);
        }

        .module-grid{
            display:grid;
            grid-template-columns:320px minmax(0,1fr);
            gap:1.2rem;
            align-items:start;
        }
        .side-panel,
        .main-panel,
        .data-panel,
        .contact-copy,
        .faq-panel{
            border:1px solid var(--line);
            border-radius:8px;
            background:linear-gradient(180deg, rgba(24,20,18,.94), rgba(12,10,9,.98));
            box-shadow:var(--shadow);
        }
        .side-panel,
        .main-panel,
        .data-panel,
        .contact-copy,
        .faq-panel{
            padding:1rem;
        }
        .side-panel{
            position:sticky;
            top:112px;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:.4rem;
            color:#ffe5b0;
            font-size:.76rem;
            font-weight:700;
            margin-bottom:.5rem;
            white-space:nowrap;
        }
        .section-title{
            font-size:1.32rem;
            margin:0 0 .4rem;
            font-weight:800;
        }
        .section-subtitle{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
            line-height:1.6;
        }
        .tag-cloud{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
            margin:1rem 0;
        }
        .tag-chip{
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            color:var(--text);
            border-radius:999px;
            padding:.5rem .72rem;
            font-size:.8rem;
            line-height:1;
            white-space:nowrap;
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .tag-chip:hover{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:rgba(217,177,90,.1);
        }
        .side-metrics{
            display:grid;
            gap:.6rem;
            margin-top:1rem;
        }
        .side-metric{
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            border-radius:8px;
            padding:.75rem .8rem;
        }
        .side-metric strong{
            display:block;
            font-size:1.2rem;
            line-height:1;
            color:#fff0c6;
        }
        .side-metric span{
            display:block;
            font-size:.8rem;
            color:var(--muted);
            margin-top:.2rem;
        }

        .summary-strip{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.6rem;
            flex-wrap:wrap;
            border-bottom:1px solid var(--line);
            padding-bottom:.9rem;
            margin-bottom:1rem;
        }
        .mini-tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            border:1px solid var(--line);
            border-radius:999px;
            padding:.38rem .62rem;
            font-size:.75rem;
            color:#dcc8ab;
            background:rgba(255,255,255,.02);
            white-space:nowrap;
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:.9rem;
        }
        .info-card{
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            border-radius:8px;
            padding:1rem;
            display:flex;
            flex-direction:column;
            gap:.75rem;
            min-height:100%;
        }
        .info-card .card-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:.75rem;
        }
        .icon-box{
            width:42px;
            height:42px;
            border-radius:8px;
            border:1px solid rgba(217,177,90,.26);
            background:rgba(217,177,90,.08);
            display:grid;
            place-items:center;
            color:#ffe1a8;
            flex:0 0 auto;
        }
        .info-card h3{
            font-size:1.02rem;
            margin:0;
            font-weight:800;
        }
        .info-card p{
            margin:0;
            color:var(--muted);
            font-size:.9rem;
            line-height:1.62;
        }
        .info-card .mini-badge{
            padding:.28rem .55rem;
            font-size:.72rem;
        }
        .card-link{
            margin-top:auto;
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            color:#ffe6b8;
            font-size:.82rem;
            font-weight:700;
        }
        .card-link i{
            transition:transform .18s ease;
        }
        .info-card:hover .card-link i{
            transform:translateX(2px);
        }

        .data-panel{
            display:grid;
            gap:1rem;
        }
        .metric-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:.75rem;
        }
        .metric{
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            border-radius:8px;
            padding:.85rem .8rem;
            min-height:108px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .metric strong{
            font-size:1.45rem;
            line-height:1;
            color:#fff0c6;
        }
        .metric span{
            display:block;
            font-size:.8rem;
            color:var(--muted);
            margin-top:.3rem;
        }
        .progress-list{
            display:grid;
            gap:.75rem;
        }
        .progress-row{
            display:grid;
            grid-template-columns:130px minmax(0,1fr) 48px;
            gap:.6rem;
            align-items:center;
        }
        .progress-row .label{
            font-size:.82rem;
            color:#dbc8ab;
        }
        .progress-shell{
            height:10px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            border:1px solid var(--line);
            overflow:hidden;
        }
        .progress-fill{
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--gold), var(--wine));
        }
        .progress-value{
            font-size:.78rem;
            color:#ffe6b8;
            text-align:right;
        }

        .faq-panel .accordion-item{
            background:transparent;
            border:1px solid var(--line);
            border-radius:8px;
            overflow:hidden;
            margin-bottom:.7rem;
        }
        .faq-panel .accordion-button{
            background:rgba(255,255,255,.02);
            color:var(--text);
            font-weight:700;
            box-shadow:none;
            padding:1rem 1.05rem;
        }
        .faq-panel .accordion-button:not(.collapsed){
            background:rgba(217,177,90,.08);
            color:#fff0c6;
        }
        .faq-panel .accordion-button:focus{
            box-shadow:none;
        }
        .faq-panel .accordion-button::after{
            filter:invert(88%) sepia(10%) saturate(468%) hue-rotate(356deg) brightness(100%) contrast(90%);
        }
        .faq-panel .accordion-body{
            background:rgba(255,255,255,.02);
            color:var(--muted);
            line-height:1.75;
        }

        .contact-band{
            display:grid;
            grid-template-columns:minmax(0,1fr) 420px;
            gap:1rem;
            align-items:stretch;
        }
        .contact-copy h2{
            font-size:1.3rem;
            margin:0 0 .5rem;
            font-weight:800;
        }
        .contact-copy p{
            margin:0;
            color:var(--muted);
        }
        .contact-points{
            display:grid;
            gap:.6rem;
            margin-top:1rem;
        }
        .contact-point{
            display:flex;
            gap:.6rem;
            align-items:flex-start;
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            border-radius:8px;
            padding:.75rem .8rem;
        }
        .contact-point i{
            color:var(--gold);
            margin-top:.2rem;
            flex:0 0 auto;
        }
        .contact-point strong{
            display:block;
            font-size:.92rem;
        }
        .contact-point span{
            display:block;
            font-size:.8rem;
            color:var(--muted);
            line-height:1.45;
        }
        .contact-panel{
            display:flex;
            flex-direction:column;
            gap:.85rem;
            padding:0;
            border:0;
            background:transparent;
            box-shadow:none;
        }
        .launch-box{
            border:1px dashed rgba(217,177,90,.28);
            background:rgba(217,177,90,.06);
            border-radius:8px;
            padding:.95rem;
        }
        .launch-box strong{
            display:block;
            font-size:1rem;
            color:#ffe7ba;
            margin-bottom:.35rem;
        }
        .launch-box p{
            margin:0;
            color:var(--muted);
            font-size:.9rem;
            line-height:1.55;
        }
        .launch-actions{
            display:flex;
            gap:.6rem;
            flex-wrap:wrap;
        }
        .form-note{
            font-size:.78rem;
            color:var(--muted);
        }

        .footer{
            border-top:1px solid var(--line);
            background:linear-gradient(180deg, rgba(12,10,9,.98), rgba(9,8,7,1));
            padding:1.2rem 0 1.5rem;
            position:relative;
            z-index:1;
        }
        .footer-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            flex-wrap:wrap;
            border:1px solid var(--line);
            border-radius:8px;
            padding:1rem;
            background:rgba(255,255,255,.02);
        }
        .footer strong{
            display:block;
            font-size:1rem;
            margin-bottom:.15rem;
        }
        .footer span{
            color:var(--muted);
            font-size:.82rem;
        }
        .footer-links{
            display:flex;
            gap:.7rem;
            flex-wrap:wrap;
        }
        .footer-links a{
            color:#e8d5b8;
            font-size:.82rem;
            transition:color .18s ease;
        }
        .footer-links a:hover{color:#fff3c9}

        .form-control,
        .form-select{
            background:#151110;
            border:1px solid var(--line);
            color:var(--text);
            border-radius:8px;
            min-height:46px;
        }
        .form-control:focus,
        .form-select:focus{
            background:#151110;
            color:var(--text);
            border-color:rgba(217,177,90,.55);
            box-shadow:0 0 0 .2rem rgba(217,177,90,.12);
        }
        .form-control::placeholder{color:#7f6f5b}
        textarea.form-control{
            min-height:110px;
            resize:vertical;
        }

        .modal-content{
            background:linear-gradient(180deg, rgba(24,20,18,.98), rgba(10,9,8,.99));
            border:1px solid rgba(217,177,90,.24);
            border-radius:8px;
            box-shadow:var(--shadow);
            color:var(--text);
        }
        .modal-header,
        .modal-footer{
            border-color:var(--line);
        }
        .modal-title{font-weight:800}
        .btn-close{
            filter:invert(88%) sepia(8%) saturate(316%) hue-rotate(351deg) brightness(99%) contrast(90%);
        }

        @media (max-width: 1199.98px){
            .hero-grid,
            .module-grid,
            .contact-band{
                grid-template-columns:1fr;
            }
            .side-panel{
                position:static;
            }
            .metric-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
        }

        @media (max-width: 767.98px){
            h1{font-size:2.2rem}
            .hero-points,
            .feature-grid,
            .metric-grid{
                grid-template-columns:1fr;
            }
            .summary-strip{
                flex-direction:column;
                align-items:flex-start;
            }
            .countdown-wrap{
                flex-direction:column;
                align-items:flex-start;
            }
            .countdown-ring{
                width:150px;
                height:150px;
            }
            .nav-grid{
                overflow-x:auto;
                flex-wrap:nowrap;
                padding-bottom:.2rem;
                scrollbar-width:none;
            }
            .nav-grid::-webkit-scrollbar{display:none}
            .nav-cta{
                margin-left:0;
            }
            .progress-row{
                grid-template-columns:1fr;
            }
            .progress-value{
                text-align:left;
            }
        }

        @media (max-width: 519.98px){
            .container-wide{
                width:min(100% - 1rem, 1320px);
            }
            .nav-panel,
            .side-panel,
            .main-panel,
            .data-panel,
            .contact-copy,
            .faq-panel{
                padding:.85rem;
            }
            h1{font-size:1.85rem}
            .ring-core strong{font-size:2rem}
        }

/* roulang page: category1 */
:root{
    --bg:#0b0a09;
    --bg-soft:#12100e;
    --panel:#151210;
    --panel-2:#1a1512;
    --line:#3a2f26;
    --line-strong:#5f4a32;
    --text:#f4eee4;
    --muted:#b6ab9b;
    --gold:#b98b42;
    --gold-strong:#e2c068;
    --gold-soft:rgba(226,192,104,.12);
    --wine:#612129;
    --accent:#8c522f;
    --shadow:0 18px 36px rgba(0,0,0,.34);
    --radius:8px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    color:var(--text);
    background:
        linear-gradient(180deg, rgba(11,10,9,.98), rgba(11,10,9,.96)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 28px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 28px);
    background-attachment:fixed;
    line-height:1.7;
    letter-spacing:0;
}
body::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.03) 1px, transparent 1px);
    background-size:18px 18px;
    opacity:.18;
    mix-blend-mode:screen;
}
a{
    color:inherit;
    text-decoration:none;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
a:hover{text-decoration:none}
img{max-width:100%;display:block}
ul{margin:0;padding:0;list-style:none}
button,input,textarea,select{
    font:inherit;
}
::selection{
    background:rgba(226,192,104,.35);
    color:#120f0b;
}
.container-wide{
    width:min(1240px, calc(100% - 32px));
    margin:0 auto;
    position:relative;
    z-index:1;
}
.topbar{
    position:sticky;
    top:0;
    z-index:1030;
    padding:14px 0 0;
    background:linear-gradient(180deg, rgba(11,10,9,.94), rgba(11,10,9,.72));
    backdrop-filter:blur(8px);
}
.nav-panel,
.hero-copy,
.console-panel,
.filter-panel,
.section-panel,
.question-card,
.entry-card,
.stats-panel,
.compare-panel,
.privacy-card,
.cta-card,
.faq-wrap,
.footer-inner,
.modal-content{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:linear-gradient(180deg, rgba(25,21,19,.96), rgba(15,13,12,.96));
    box-shadow:var(--shadow);
}
.nav-panel{
    padding:16px;
}
.brand-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.brand{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
}
.brand-mark{
    width:44px;
    height:44px;
    border-radius:var(--radius);
    display:grid;
    place-items:center;
    background:linear-gradient(180deg, rgba(226,192,104,.22), rgba(185,139,66,.08));
    border:1px solid rgba(226,192,104,.25);
    color:var(--gold-strong);
    flex:0 0 auto;
}
.brand strong{
    display:block;
    font-size:18px;
    line-height:1.2;
    font-weight:800;
    color:var(--text);
}
.brand span{
    display:block;
    font-size:13px;
    color:var(--muted);
    line-height:1.35;
}
.brand-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.micro-badge,
.tag-chip,
.stat-mini,
.compare-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    min-height:32px;
    padding:6px 10px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:rgba(255,255,255,.03);
    color:var(--muted);
    font-size:12px;
    line-height:1;
    white-space:nowrap;
}
.nav-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr)) auto;
    gap:10px;
    align-items:stretch;
}
.nav-link-card{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:58px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(255,255,255,.025);
    color:var(--text);
    font-weight:700;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.nav-link-card i{
    width:18px;
    color:var(--gold-strong);
    text-align:center;
    flex:0 0 auto;
}
.nav-link-card:hover{
    transform:translateY(-1px);
    border-color:rgba(226,192,104,.42);
    background:rgba(226,192,104,.07);
    color:var(--text);
}
.nav-link-card.active{
    border-color:rgba(226,192,104,.62);
    background:linear-gradient(180deg, rgba(96,72,35,.28), rgba(255,255,255,.03));
    box-shadow:inset 0 0 0 1px rgba(226,192,104,.1);
}
.nav-cta{
    display:flex;
    gap:10px;
    align-items:stretch;
    justify-content:flex-end;
    flex-wrap:wrap;
}
.btn{
    min-height:46px;
    border-radius:var(--radius);
    padding:10px 16px;
    font-weight:800;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    border:1px solid transparent;
    transition:transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.btn:focus-visible,
.nav-link-card:focus-visible,
.tag-chip:focus-visible,
.footer-links a:focus-visible,
.accordion-button:focus-visible,
.form-control:focus-visible{
    outline:2px solid rgba(226,192,104,.34);
    outline-offset:2px;
    box-shadow:none;
}
.btn-gold{
    background:linear-gradient(180deg, var(--gold-strong), #bb904d);
    color:#120f0b;
    border-color:rgba(255,255,255,.12);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}
.btn-gold:hover{
    transform:translateY(-1px);
    color:#120f0b;
    border-color:rgba(255,255,255,.16);
    box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.25);
}
.btn-darkline{
    background:rgba(255,255,255,.03);
    color:var(--text);
    border-color:var(--line);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
}
.btn-darkline:hover{
    transform:translateY(-1px);
    color:var(--text);
    border-color:rgba(226,192,104,.35);
    background:rgba(255,255,255,.06);
}
main{
    padding:24px 0 28px;
}
section{
    padding:24px 0;
}
section + section{
    border-top:1px solid rgba(255,255,255,.045);
}
.hero-band{
    padding-top:32px;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:18px;
    align-items:stretch;
}
.hero-copy{
    position:relative;
    overflow:hidden;
    padding:28px;
    min-height:100%;
}
.hero-copy::after{
    content:"";
    position:absolute;
    inset:auto -10% -26% auto;
    width:180px;
    height:180px;
    border:1px solid rgba(226,192,104,.18);
    border-radius:var(--radius);
    transform:rotate(11deg);
    opacity:.65;
}
.sticker{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:30px;
    padding:6px 10px;
    border-radius:var(--radius);
    border:1px solid rgba(226,192,104,.28);
    background:linear-gradient(180deg, rgba(226,192,104,.16), rgba(185,139,66,.08));
    color:var(--gold-strong);
    font-size:12px;
    font-weight:800;
    letter-spacing:0;
}
.hero-kicker{
    margin-top:14px;
    color:var(--gold-strong);
    font-size:12px;
    font-weight:800;
    letter-spacing:0;
}
.hero-title{
    margin:10px 0 12px;
    font-size:54px;
    line-height:1.06;
    font-weight:900;
    letter-spacing:0;
    max-width:11ch;
}
.hero-lead{
    margin:0;
    max-width:40ch;
    font-size:17px;
    color:var(--muted);
}
.hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    margin:22px 0 16px;
}
.hero-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}
.hero-note{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding-top:14px;
    border-top:1px solid var(--line);
    color:var(--muted);
    font-size:13px;
    max-width:40ch;
}
.console-panel{
    position:relative;
    overflow:hidden;
    padding:20px;
}
.console-panel::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 25%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 18px),
        repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 18px);
    opacity:.45;
    pointer-events:none;
}
.console-top{
    position:relative;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:14px;
}
.console-badge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 10px;
    border-radius:var(--radius);
    border:1px solid rgba(226,192,104,.22);
    background:rgba(226,192,104,.08);
    color:var(--gold-strong);
    font-size:12px;
    font-weight:800;
}
.console-grid{
    position:relative;
    z-index:1;
    display:grid;
    gap:12px;
}
.metric-box,
.step-box,
.bar-box,
.compare-panel{
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(255,255,255,.02);
    padding:16px;
}
.metric-box{
    display:grid;
    gap:10px;
    min-height:160px;
}
.metric-box .metric-num{
    display:block;
    font-size:44px;
    line-height:1;
    font-weight:900;
    color:var(--gold-strong);
}
.metric-box strong{
    display:block;
    font-size:20px;
    line-height:1.2;
}
.metric-box p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.step-list{
    display:grid;
    gap:10px;
}
.step-item{
    display:flex;
    align-items:flex-start;
    gap:10px;
}
.step-num{
    width:30px;
    height:30px;
    border-radius:6px;
    display:grid;
    place-items:center;
    border:1px solid rgba(226,192,104,.22);
    background:rgba(226,192,104,.08);
    color:var(--gold-strong);
    font-size:12px;
    font-weight:800;
    flex:0 0 auto;
}
.step-item p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.bar-list{
    display:grid;
    gap:10px;
}
.bar-row{
    display:grid;
    gap:6px;
}
.bar-label{
    display:flex;
    justify-content:space-between;
    gap:10px;
    color:var(--muted);
    font-size:12px;
}
.bar-track{
    height:8px;
    border-radius:999px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#201913;
}
.bar-fill{
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #9a6732, #e2c068);
}
.filter-panel{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
    padding:18px 20px;
}
.filter-title{
    margin:2px 0 0;
    font-size:28px;
    line-height:1.2;
    font-weight:900;
    letter-spacing:0;
}
.filter-tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
}
.tag-chip{
    min-height:34px;
    cursor:pointer;
    color:var(--text);
    background:rgba(255,255,255,.03);
}
.tag-chip:hover{
    transform:translateY(-1px);
    border-color:rgba(226,192,104,.35);
    background:rgba(226,192,104,.08);
    color:var(--text);
}
.section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:16px;
}
.section-kicker{
    font-size:12px;
    color:var(--gold-strong);
    font-weight:800;
    letter-spacing:0;
}
.section-title{
    margin:6px 0 0;
    font-size:30px;
    line-height:1.15;
    font-weight:900;
    letter-spacing:0;
}
.section-summary{
    margin:0;
    max-width:56ch;
    color:var(--muted);
    font-size:15px;
}
.question-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:12px;
}
.question-card{
    padding:18px;
    min-height:164px;
}
.icon-chip{
    width:42px;
    height:42px;
    border-radius:var(--radius);
    display:grid;
    place-items:center;
    border:1px solid rgba(226,192,104,.24);
    background:rgba(226,192,104,.08);
    color:var(--gold-strong);
    flex:0 0 auto;
}
.question-card h3{
    margin:12px 0 8px;
    font-size:18px;
    line-height:1.25;
    font-weight:800;
}
.question-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
}
.matrix-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:14px;
}
.entry-card{
    padding:18px;
    min-height:226px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    overflow:hidden;
}
.entry-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}
.entry-top .title-wrap{
    min-width:0;
}
.entry-top h3{
    margin:14px 0 8px;
    font-size:20px;
    line-height:1.25;
    font-weight:900;
}
.entry-top p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
}
.card-badge{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:6px 10px;
    border-radius:var(--radius);
    border:1px solid rgba(226,192,104,.24);
    background:rgba(226,192,104,.08);
    color:var(--gold-strong);
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
}
.entry-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:16px;
    color:var(--muted);
    font-size:13px;
}
.entry-link{
    color:var(--gold-strong);
    font-weight:800;
}
.entry-link:hover{
    color:#f3dc95;
}
.stats-grid{
    display:grid;
    grid-template-columns:1.05fr .95fr;
    gap:14px;
    align-items:stretch;
}
.stats-panel{
    padding:20px;
}
.stat-row{
    display:grid;
    grid-template-columns:repeat(4, minmax(0,1fr));
    gap:10px;
}
.stat-tile{
    min-height:128px;
    padding:16px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
}
.stat-num{
    display:block;
    font-size:36px;
    line-height:1;
    font-weight:900;
    color:var(--gold-strong);
}
.stat-label{
    margin:10px 0 6px;
    font-size:14px;
    font-weight:800;
}
.stat-text{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.55;
}
.compare-panel{
    padding:20px;
}
.compare-title{
    margin:0 0 14px;
    font-size:20px;
    line-height:1.25;
    font-weight:900;
}
.compare-stack{
    display:grid;
    gap:12px;
}
.compare-row{
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    padding:14px;
}
.compare-row .compare-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
}
.compare-row .compare-head strong{
    font-size:15px;
    font-weight:900;
}
.compare-row .compare-head span{
    font-size:12px;
    color:var(--muted);
}
.compare-track{
    height:8px;
    border-radius:999px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#201913;
    margin-top:10px;
}
.compare-track em{
    display:block;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #9a6732, #e2c068);
}
.compare-line{
    display:flex;
    justify-content:space-between;
    gap:10px;
    margin-top:8px;
    font-size:12px;
    color:var(--muted);
}
.contact-grid{
    display:grid;
    grid-template-columns:.95fr 1.05fr;
    gap:14px;
    align-items:stretch;
}
.privacy-card,
.cta-card{
    padding:20px;
}
.privacy-card h3,
.cta-card h3{
    margin:0 0 10px;
    font-size:20px;
    line-height:1.25;
    font-weight:900;
}
.privacy-card p,
.cta-card p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
}
.trust-list{
    display:grid;
    gap:10px;
    margin-top:16px;
}
.trust-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 14px;
    border-radius:var(--radius);
    border:1px solid var(--line);
    background:rgba(255,255,255,.02);
    color:var(--text);
    font-size:13px;
    line-height:1.55;
}
.trust-list i{
    color:var(--gold-strong);
    margin-top:2px;
}
.cta-panel{
    display:grid;
    gap:14px;
}
.cta-box{
    padding:16px;
    border:1px solid var(--line);
    border-radius:var(--radius);
    background:rgba(255,255,255,.02);
}
.cta-box h4{
    margin:0 0 8px;
    font-size:18px;
    line-height:1.25;
    font-weight:900;
}
.cta-box p{
    margin:0;
    color:var(--muted);
    font-size:14px;
    line-height:1.65;
}
.contact-trigger{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:16px;
}
.faq-wrap{
    padding:20px;
}
.accordion{
    display:grid;
    gap:10px;
}
.accordion-item{
    border:1px solid var(--line);
    border-radius:var(--radius) !important;
    overflow:hidden;
    background:rgba(255,255,255,.015);
}
.accordion-button{
    background:rgba(255,255,255,.02);
    color:var(--text);
    font-weight:800;
    padding:16px 18px;
    border:0;
    box-shadow:none !important;
}
.accordion-button:not(.collapsed){
    color:var(--gold-strong);
    background:rgba(226,192,104,.08);
}
.accordion-button::after{
    filter:invert(84%) sepia(27%) saturate(502%) hue-rotate(355deg) brightness(95%) contrast(88%);
}
.accordion-body{
    padding:0 18px 16px;
    color:var(--muted);
    font-size:14px;
    line-height:1.7;
    background:rgba(255,255,255,.01);
}
.footer{
    padding:22px 0 34px;
}
.footer-inner{
    padding:18px 20px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
    flex-wrap:wrap;
}
.footer-inner strong{
    display:inline-block;
    font-size:16px;
    font-weight:900;
}
.footer-inner span{
    color:var(--muted);
    font-size:13px;
    line-height:1.6;
}
.footer-links{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:center;
}
.footer-links a{
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}
.footer-links a:hover{
    color:var(--gold-strong);
}
.modal-content{
    background:linear-gradient(180deg, rgba(24,20,18,.98), rgba(14,12,11,.98));
    color:var(--text);
}
.modal-header,
.modal-footer{
    border-color:var(--line);
}
.btn-close{
    filter:invert(84%) sepia(27%) saturate(502%) hue-rotate(355deg) brightness(95%) contrast(88%);
    opacity:.8;
}
.modal-title{
    font-weight:900;
}
.form-label{
    margin-bottom:6px;
    color:var(--muted);
    font-size:13px;
    font-weight:700;
}
.form-control{
    min-height:46px;
    background:#120f0d;
    border:1px solid var(--line);
    border-radius:var(--radius);
    color:var(--text);
    box-shadow:none;
}
.form-control:focus{
    background:#120f0d;
    color:var(--text);
    border-color:rgba(226,192,104,.4);
    box-shadow:none;
}
.form-control::placeholder{
    color:#7f7667;
}
.form-feedback{
    margin-top:14px;
    padding:12px 14px;
    border-radius:var(--radius);
    border:1px solid rgba(226,192,104,.22);
    background:rgba(226,192,104,.08);
    color:var(--gold-strong);
    font-size:13px;
}
.small-note{
    color:var(--muted);
    font-size:12px;
}
@media (max-width:1024px){
    .nav-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .nav-cta{
        grid-column:1 / -1;
    }
    .hero-grid,
    .stats-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }
    .matrix-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}
@media (max-width:768px){
    .question-grid,
    .stat-row{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
    .hero-title{
        font-size:42px;
    }
    .section-title,
    .filter-title{
        font-size:26px;
    }
}
@media (max-width:520px){
    .container-wide{
        width:min(100% - 20px, 1240px);
    }
    .topbar{
        padding-top:10px;
    }
    .brand-row{
        align-items:flex-start;
    }
    .nav-grid,
    .question-grid,
    .matrix-grid,
    .stat-row{
        grid-template-columns:1fr;
    }
    .nav-cta{
        flex-direction:column;
    }
    .btn{
        width:100%;
    }
    .hero-copy,
    .console-panel,
    .filter-panel,
    .question-card,
    .entry-card,
    .stats-panel,
    .compare-panel,
    .privacy-card,
    .cta-card,
    .faq-wrap,
    .footer-inner{
        padding:16px;
    }
    .hero-title{
        font-size:34px;
    }
    .entry-foot,
    .compare-head,
    .filter-panel,
    .section-head{
        align-items:flex-start;
    }
    .entry-foot{
        flex-direction:column;
    }
}

/* roulang page: category3 */
:root{
            --bg:#070707;
            --bg-2:#0d0d0d;
            --panel:#111111;
            --panel-2:#171412;
            --panel-3:#1d1714;
            --line:rgba(242,226,188,.16);
            --line-strong:rgba(242,226,188,.28);
            --text:#f2ebdf;
            --muted:#b9ac96;
            --soft:#8d8170;
            --gold:#caa55a;
            --gold-2:#f0d38a;
            --wine:#6f2c26;
            --wine-2:#8d3b31;
            --green:#7ea88b;
            --danger:#c05b55;
            --shadow:0 16px 36px rgba(0,0,0,.42);
            --shadow-soft:0 8px 18px rgba(0,0,0,.24);
            --radius:8px;
            --space-1:.35rem;
            --space-2:.5rem;
            --space-3:.75rem;
            --space-4:1rem;
            --space-5:1.5rem;
            --space-6:2rem;
            --space-7:3rem;
            --space-8:4rem;
            --container:1240px;
        }
        *, *::before, *::after{ box-sizing:border-box; }
        html{ scroll-behavior:smooth; }
        body{
            margin:0;
            color:var(--text);
            background:
                linear-gradient(rgba(255,255,255,.018), rgba(255,255,255,.018)),
                linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
                linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
                radial-gradient(circle at top left, rgba(202,165,90,.08), transparent 30%),
                radial-gradient(circle at top right, rgba(111,44,38,.12), transparent 26%),
                var(--bg);
            background-size:auto, 24px 24px, 24px 24px, auto, auto, auto;
            font-family: Inter, "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
            line-height:1.6;
            overflow-x:hidden;
            letter-spacing:0;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(to bottom, rgba(255,255,255,.03), transparent 12%),
                repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 4px);
            mix-blend-mode:screen;
            opacity:.12;
            z-index:0;
        }
        a{ color:inherit; text-decoration:none; }
        a:hover{ color:inherit; }
        img{ max-width:100%; display:block; }
        button, input, textarea, select{ font:inherit; }
        .container-wide{
            width:min(var(--container), calc(100% - 2rem));
            margin-inline:auto;
            position:relative;
            z-index:1;
        }
        .topbar,
        .footer{
            position:relative;
            z-index:2;
        }
        .topbar{
            padding:1rem 0 .5rem;
        }
        .nav-panel{
            background:linear-gradient(180deg, rgba(22,20,19,.96), rgba(14,13,12,.96));
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
            padding:1rem;
        }
        .brand-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            flex-wrap:wrap;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:.85rem;
            min-width:0;
        }
        .brand-mark{
            width:44px;
            height:44px;
            border:1px solid var(--line-strong);
            border-radius:7px;
            display:grid;
            place-items:center;
            color:var(--gold-2);
            background:
                linear-gradient(180deg, rgba(202,165,90,.18), rgba(111,44,38,.14));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
            flex:0 0 auto;
        }
        .brand strong{
            display:block;
            font-size:1.02rem;
            line-height:1.1;
            letter-spacing:0;
        }
        .brand span{
            display:block;
            color:var(--muted);
            font-size:.85rem;
            margin-top:.2rem;
        }
        .brand-meta{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
            justify-content:flex-end;
        }
        .micro-badge{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            min-height:32px;
            padding:.3rem .7rem;
            border-radius:6px;
            border:1px solid var(--line);
            color:var(--muted);
            background:rgba(255,255,255,.02);
            font-size:.82rem;
            white-space:nowrap;
        }
        .nav-grid{
            display:grid;
            grid-template-columns:1fr auto;
            align-items:center;
            gap:.75rem;
            margin-top:1rem;
            padding-top:1rem;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:.55rem;
            flex-wrap:wrap;
            min-width:0;
        }
        .nav-card{
            min-width:130px;
            min-height:54px;
            display:flex;
            align-items:center;
            gap:.65rem;
            padding:.65rem .85rem;
            border-radius:7px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
            color:var(--text);
            transition:transform .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease;
        }
        .nav-card i{
            color:var(--gold);
            font-size:.95rem;
            width:1rem;
            text-align:center;
        }
        .nav-card span{
            font-weight:700;
            letter-spacing:0;
            font-size:.92rem;
            white-space:nowrap;
        }
        .nav-card:hover,
        .nav-card:focus-visible{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:linear-gradient(180deg, rgba(202,165,90,.09), rgba(255,255,255,.02));
            box-shadow:0 8px 18px rgba(0,0,0,.22);
            color:var(--text);
            outline:none;
        }
        .nav-card.active{
            background:linear-gradient(180deg, rgba(202,165,90,.14), rgba(111,44,38,.14));
            border-color:rgba(240,211,138,.42);
            box-shadow:inset 0 0 0 1px rgba(240,211,138,.06);
        }
        .nav-card.active i{ color:var(--gold-2); }
        .nav-cta{
            display:flex;
            gap:.6rem;
            justify-content:flex-end;
            flex-wrap:wrap;
        }
        .btn{
            border-radius:7px;
            min-height:44px;
            padding:.65rem 1rem;
            font-weight:700;
            letter-spacing:0;
            transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;
        }
        .btn:focus-visible{
            box-shadow:0 0 0 .18rem rgba(202,165,90,.24);
        }
        .btn-gold{
            color:#120f0a;
            background:linear-gradient(180deg, var(--gold-2), var(--gold));
            border:1px solid rgba(240,211,138,.45);
        }
        .btn-gold:hover,
        .btn-gold:focus-visible{
            color:#120f0a;
            transform:translateY(-1px);
            box-shadow:0 10px 20px rgba(202,165,90,.16);
        }
        .btn-darkline{
            color:var(--text);
            background:rgba(255,255,255,.02);
            border:1px solid var(--line);
        }
        .btn-darkline:hover,
        .btn-darkline:focus-visible{
            color:var(--text);
            border-color:var(--line-strong);
            background:rgba(255,255,255,.05);
            transform:translateY(-1px);
        }
        .btn-inline{
            color:var(--text);
            background:transparent;
            border:1px solid var(--line);
            padding:.55rem .85rem;
            min-height:40px;
        }
        .btn-inline:hover,
        .btn-inline:focus-visible{
            border-color:var(--line-strong);
            color:var(--text);
            transform:translateY(-1px);
            background:rgba(255,255,255,.04);
        }
        .main-wrap{
            position:relative;
            z-index:1;
            padding-bottom:2rem;
        }
        .hero-stage{
            padding:1rem 0 1.5rem;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:
                linear-gradient(180deg, rgba(10,10,10,.76), rgba(10,10,10,.94)),
                linear-gradient(135deg, rgba(202,165,90,.1), rgba(111,44,38,.08)),
                var(--panel);
            box-shadow:var(--shadow);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 76px),
                repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 1px, transparent 1px 76px);
            opacity:.22;
            pointer-events:none;
        }
        .hero-shell::after{
            content:"";
            position:absolute;
            right:-8%;
            top:-14%;
            width:45%;
            height:130%;
            background:linear-gradient(135deg, rgba(202,165,90,.12), rgba(111,44,38,.18) 45%, transparent 78%);
            transform:skewX(-12deg);
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            z-index:1;
            padding:1.5rem;
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:1.2rem;
            align-items:stretch;
        }
        .hero-kicker{
            display:inline-flex;
            align-items:center;
            gap:.5rem;
            padding:.35rem .7rem;
            border-radius:999px;
            border:1px solid rgba(240,211,138,.28);
            background:rgba(202,165,90,.09);
            color:var(--gold-2);
            font-size:.82rem;
            font-weight:700;
            margin-bottom:1rem;
        }
        .hero-title{
            font-size:clamp(2rem, 4vw, 3.3rem);
            line-height:1.04;
            letter-spacing:0;
            font-weight:900;
            margin:0 0 .85rem;
            max-width:12ch;
        }
        .hero-copy{
            color:var(--muted);
            font-size:1rem;
            max-width:55ch;
            margin:0 0 1.25rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:.7rem;
            align-items:center;
            margin-bottom:1.25rem;
        }
        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
        }
        .hero-badge{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            padding:.4rem .7rem;
            border-radius:6px;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:.82rem;
            white-space:nowrap;
        }
        .hero-rail{
            display:grid;
            gap:.75rem;
            grid-template-columns:1fr;
            align-content:start;
        }
        .hero-console,
        .hero-flags{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:rgba(12,12,12,.9);
            padding:1rem;
        }
        .hero-console h2,
        .hero-flags h2{
            margin:0 0 .75rem;
            font-size:1rem;
            font-weight:800;
            letter-spacing:0;
        }
        .step-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:.6rem;
        }
        .step-list li{
            display:flex;
            gap:.7rem;
            align-items:flex-start;
            padding:.7rem .75rem;
            border:1px solid var(--line);
            border-radius:6px;
            background:rgba(255,255,255,.02);
        }
        .step-no{
            flex:0 0 auto;
            width:28px;
            height:28px;
            border-radius:6px;
            display:grid;
            place-items:center;
            background:rgba(202,165,90,.12);
            color:var(--gold-2);
            font-weight:800;
            font-size:.85rem;
            border:1px solid rgba(240,211,138,.24);
        }
        .step-list strong{
            display:block;
            font-size:.94rem;
            margin-bottom:.1rem;
        }
        .step-list span{
            display:block;
            color:var(--muted);
            font-size:.86rem;
        }
        .hero-flags{
            display:grid;
            gap:.75rem;
        }
        .flag-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:.6rem;
        }
        .flag-item{
            min-height:76px;
            border-radius:6px;
            border:1px solid var(--line);
            padding:.7rem .75rem;
            background:
                linear-gradient(180deg, rgba(202,165,90,.07), rgba(255,255,255,.01));
        }
        .flag-item .cap{
            color:var(--gold-2);
            font-size:.78rem;
            margin-bottom:.15rem;
            display:block;
            letter-spacing:0;
        }
        .flag-item strong{
            display:block;
            font-size:1rem;
            line-height:1.2;
        }
        .section-shell{
            padding:1rem 0 0;
        }
        .section-band{
            border-top:1px solid rgba(255,255,255,.06);
            padding:1.2rem 0 0;
            margin-top:1rem;
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:1rem;
            margin-bottom:1rem;
            flex-wrap:wrap;
        }
        .section-title{
            margin:0;
            font-size:1.35rem;
            line-height:1.15;
            font-weight:900;
            letter-spacing:0;
        }
        .section-sub{
            color:var(--muted);
            margin:0;
            max-width:60ch;
            font-size:.95rem;
        }
        .chip-row{
            display:flex;
            flex-wrap:wrap;
            gap:.5rem;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:.45rem;
            min-height:38px;
            padding:.45rem .75rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            color:var(--muted);
            font-size:.86rem;
            white-space:nowrap;
        }
        .chip.active{
            color:var(--gold-2);
            border-color:rgba(240,211,138,.36);
            background:rgba(202,165,90,.11);
        }
        .question-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:.9rem;
        }
        .question-card,
        .entry-card,
        .stat-card,
        .faq-shell,
        .panel-box{
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(18,18,18,.95), rgba(13,13,13,.95));
            box-shadow:var(--shadow-soft);
        }
        .question-card{
            min-height:150px;
            padding:1rem;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .question-card .mark{
            width:30px;
            height:30px;
            border-radius:6px;
            display:grid;
            place-items:center;
            border:1px solid rgba(240,211,138,.24);
            background:rgba(202,165,90,.09);
            color:var(--gold-2);
        }
        .question-card h3{
            font-size:1rem;
            font-weight:800;
            line-height:1.2;
            margin:.8rem 0 .35rem;
        }
        .question-card p{
            margin:0;
            color:var(--muted);
            font-size:.9rem;
        }
        .entry-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:.9rem;
        }
        .entry-card{
            padding:1rem;
            min-height:206px;
            position:relative;
            overflow:hidden;
        }
        .entry-card::after{
            content:"";
            position:absolute;
            inset:auto -20% -30% auto;
            width:120px;
            height:120px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(202,165,90,.14), transparent 68%);
            pointer-events:none;
        }
        .entry-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            margin-bottom:.85rem;
        }
        .entry-ico{
            width:44px;
            height:44px;
            border-radius:7px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
            color:var(--gold-2);
            font-size:1rem;
            flex:0 0 auto;
        }
        .mini-tag{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            min-height:28px;
            padding:.25rem .55rem;
            border-radius:6px;
            border:1px solid rgba(240,211,138,.26);
            color:var(--gold-2);
            background:rgba(202,165,90,.08);
            font-size:.76rem;
            white-space:nowrap;
        }
        .entry-card h3{
            margin:0 0 .45rem;
            font-size:1.08rem;
            font-weight:900;
            line-height:1.18;
        }
        .entry-card p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
        }
        .entry-foot{
            margin-top:1rem;
            padding-top:.9rem;
            border-top:1px dashed rgba(255,255,255,.08);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
        }
        .entry-foot small{
            color:var(--soft);
        }
        .entry-foot .btn{
            min-height:38px;
            padding:.45rem .8rem;
        }
        .stats-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:.9rem;
        }
        .stats-panel{
            padding:1rem;
            display:grid;
            gap:.9rem;
        }
        .stat-row{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:.75rem;
        }
        .stat-card{
            padding:.9rem;
            min-height:124px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .stat-card .num{
            font-size:1.85rem;
            font-weight:900;
            line-height:1;
            color:var(--gold-2);
            letter-spacing:0;
        }
        .stat-card .label{
            color:var(--muted);
            font-size:.88rem;
            margin-top:.55rem;
        }
        .meter{
            margin-top:.7rem;
            height:8px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
            border-radius:999px;
            overflow:hidden;
        }
        .meter > span{
            display:block;
            height:100%;
            background:linear-gradient(90deg, var(--wine), var(--gold));
        }
        .compare-box{
            padding:1rem;
            display:grid;
            gap:.8rem;
        }
        .compare-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:.7rem;
        }
        .compare-item{
            padding:.9rem;
            border-radius:6px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            min-height:124px;
        }
        .compare-item strong{
            display:block;
            margin:.3rem 0 .45rem;
            font-size:1rem;
            line-height:1.2;
        }
        .compare-item p{
            margin:0;
            color:var(--muted);
            font-size:.9rem;
        }
        .compare-item .compare-state{
            display:inline-flex;
            align-items:center;
            gap:.35rem;
            min-height:28px;
            padding:.22rem .5rem;
            border-radius:6px;
            background:rgba(202,165,90,.1);
            color:var(--gold-2);
            border:1px solid rgba(240,211,138,.24);
            font-size:.76rem;
        }
        .panel-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:.9rem;
        }
        .panel-box{
            padding:1rem;
        }
        .panel-box h3{
            margin:0 0 .8rem;
            font-size:1.03rem;
            font-weight:900;
        }
        .panel-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:.65rem;
        }
        .panel-list li{
            display:flex;
            gap:.65rem;
            align-items:flex-start;
            padding:.7rem .75rem;
            border-radius:6px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
        }
        .panel-list .tick{
            color:var(--gold-2);
            margin-top:.1rem;
            width:1rem;
            text-align:center;
            flex:0 0 auto;
        }
        .panel-list strong{
            display:block;
            line-height:1.15;
            font-size:.95rem;
            margin-bottom:.1rem;
        }
        .panel-list span{
            display:block;
            color:var(--muted);
            font-size:.86rem;
        }
        .cta-shell{
            padding:1rem;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:
                linear-gradient(180deg, rgba(202,165,90,.09), rgba(17,17,17,.96));
            box-shadow:var(--shadow-soft);
        }
        .cta-inner{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:1rem;
            flex-wrap:wrap;
        }
        .cta-inner h2{
            margin:0 0 .25rem;
            font-size:1.25rem;
            font-weight:900;
        }
        .cta-inner p{
            margin:0;
            color:var(--muted);
            max-width:54ch;
        }
        .accordion{
            --bs-accordion-bg:transparent;
            --bs-accordion-border-color:transparent;
            --bs-accordion-btn-padding-x:1rem;
            --bs-accordion-btn-padding-y:1rem;
            --bs-accordion-body-padding-x:1rem;
            --bs-accordion-body-padding-y:0 1rem 1rem;
        }
        .faq-shell{
            padding:1rem;
        }
        .accordion-item{
            border:1px solid var(--line) !important;
            border-radius:6px !important;
            overflow:hidden;
            background:rgba(255,255,255,.02);
            margin-bottom:.7rem;
        }
        .accordion-button{
            background:rgba(255,255,255,.02) !important;
            color:var(--text) !important;
            font-weight:800;
            box-shadow:none !important;
            border:none !important;
            letter-spacing:0;
        }
        .accordion-button::after{
            filter:brightness(1.1) sepia(1) saturate(2.2) hue-rotate(340deg);
        }
        .accordion-button:not(.collapsed){
            background:rgba(202,165,90,.09) !important;
            color:var(--gold-2) !important;
        }
        .accordion-body{
            color:var(--muted);
            padding-top:0 !important;
        }
        .modal-content{
            background:linear-gradient(180deg, #161210, #0e0e0e);
            border:1px solid var(--line);
            border-radius:8px;
            color:var(--text);
            box-shadow:var(--shadow);
        }
        .modal-header,
        .modal-footer{
            border-color:rgba(255,255,255,.08);
        }
        .modal-title{
            font-size:1.05rem;
            font-weight:900;
            letter-spacing:0;
        }
        .form-label{
            color:var(--muted);
            font-size:.88rem;
            margin-bottom:.35rem;
        }
        .form-control,
        .form-select{
            min-height:44px;
            border-radius:7px;
            border:1px solid var(--line);
            background:#0f0f0f;
            color:var(--text);
            box-shadow:none !important;
        }
        .form-control::placeholder{
            color:#7e776b;
        }
        .form-control:focus,
        .form-select:focus{
            border-color:rgba(240,211,138,.42);
            background:#111111;
            color:var(--text);
        }
        .form-check-input{
            background-color:#121212;
            border-color:var(--line-strong);
        }
        .form-check-input:checked{
            background-color:var(--gold);
            border-color:var(--gold);
        }
        .form-note{
            color:var(--soft);
            font-size:.84rem;
        }
        .soft-line{
            height:1px;
            background:rgba(255,255,255,.06);
            margin:1rem 0;
        }
        .privacy-box{
            padding:1rem;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:rgba(255,255,255,.02);
            color:var(--muted);
        }
        .privacy-box strong{
            color:var(--text);
        }
        .footer{
            padding:1rem 0 1.25rem;
        }
        .footer-inner{
            display:grid;
            grid-template-columns:1.1fr .9fr 1fr;
            gap:1rem;
            align-items:center;
            border:1px solid var(--line);
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(18,18,18,.96), rgba(11,11,11,.96));
            padding:1rem;
            color:var(--muted);
        }
        .footer strong{
            color:var(--text);
            font-size:1rem;
        }
        .footer-links{
            display:flex;
            gap:.75rem;
            flex-wrap:wrap;
            justify-content:center;
        }
        .footer-links a{
            color:var(--muted);
            border-bottom:1px solid transparent;
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:var(--gold-2);
            border-bottom-color:rgba(240,211,138,.5);
        }
        .footer a:focus-visible,
        .btn:focus-visible,
        .nav-card:focus-visible,
        .chip:focus-visible{
            outline:none;
        }
        .input-group-text{
            background:#121212;
            color:var(--gold-2);
            border-color:var(--line);
            border-radius:7px;
        }
        .tiny{
            font-size:.82rem;
            color:var(--soft);
        }
        .divider-dot{
            display:inline-block;
            width:.3rem;
            height:.3rem;
            border-radius:50%;
            background:var(--gold);
            margin:0 .35rem;
            vertical-align:middle;
        }
        .stack-gap{
            display:grid;
            gap:.9rem;
        }
        .sr-only-focusable:focus{
            position:static;
            width:auto;
            height:auto;
            clip:auto;
            overflow:visible;
        }
        @media (max-width: 1199px){
            .hero-inner{ grid-template-columns:1fr; }
            .question-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
            .entry-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
            .stats-grid{ grid-template-columns:1fr; }
            .panel-grid{ grid-template-columns:1fr; }
            .footer-inner{ grid-template-columns:1fr; text-align:left; }
            .footer-links{ justify-content:flex-start; }
        }
        @media (max-width: 991px){
            .nav-grid{ grid-template-columns:1fr; }
            .nav-cta{ justify-content:flex-start; }
            .compare-grid,
            .stat-row{ grid-template-columns:1fr; }
            .flag-grid{ grid-template-columns:1fr; }
        }
        @media (max-width: 767px){
            .container-wide{ width:min(var(--container), calc(100% - 1rem)); }
            .topbar{ padding-top:.75rem; }
            .nav-panel{ padding:.8rem; }
            .brand-meta{ justify-content:flex-start; }
            .nav-card{ min-width:calc(50% - .3rem); flex:1 1 calc(50% - .3rem); }
            .hero-inner{ padding:1rem; }
            .hero-title{ max-width:none; }
            .hero-actions .btn{ width:100%; justify-content:center; }
            .hero-actions{ display:grid; }
            .question-grid,
            .entry-grid{ grid-template-columns:1fr; }
            .section-title{ font-size:1.18rem; }
            .cta-inner{ display:grid; }
            .cta-inner .btn{ width:100%; }
            .nav-cta .btn{ flex:1 1 100%; }
        }
        @media (max-width: 520px){
            .brand{ align-items:flex-start; }
            .brand strong{ font-size:.98rem; }
            .brand span{ font-size:.8rem; }
            .micro-badge,
            .chip,
            .mini-tag{
                font-size:.76rem;
            }
            .nav-card{
                min-width:100%;
                flex-basis:100%;
            }
            .hero-copy,
            .section-sub,
            .hero-console h2,
            .hero-flags h2{
                font-size:.92rem;
            }
        }