/* roulang page: index */
:root{
            --bg:#0e0a10;
            --bg-2:#140f16;
            --panel:#18111b;
            --panel-2:#211623;
            --panel-3:#2a1d2a;
            --line:rgba(255, 220, 166, .16);
            --line-strong:rgba(244, 199, 106, .34);
            --text:#f6efe6;
            --muted:#c3b5bb;
            --muted-2:#9d8f96;
            --gold:#f4c76a;
            --gold-2:#d8a453;
            --peach:#ffb69d;
            --rose:#cf7f92;
            --rose-2:#b76579;
            --success:#3fd2b1;
            --danger:#ff6c73;
            --shadow:0 18px 50px rgba(0,0,0,.45);
            --shadow-soft:0 10px 24px rgba(0,0,0,.28);
            --radius:18px;
            --radius-sm:14px;
            --container:1240px;
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 10% 10%, rgba(244,199,106,.13), transparent 28%),
                radial-gradient(circle at 90% 0%, rgba(207,127,146,.12), transparent 24%),
                radial-gradient(circle at 50% 100%, rgba(217,158,85,.08), transparent 22%),
                linear-gradient(180deg, #0b070c 0%, #120d12 48%, #0d090e 100%);
            min-height:100vh;
            overflow-x:hidden;
        }
        body:before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px),
                radial-gradient(circle at 50% 20%, rgba(255,255,255,.05), transparent 35%);
            background-size:34px 34px,34px 34px,100% 100%;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,1) 30%, rgba(0,0,0,.8));
            opacity:.35;
            z-index:-1;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        ::selection{background:rgba(244,199,106,.35); color:#fff}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .glass-line{
            position:relative;
        }
        .glass-line:after{
            content:"";
            position:absolute;
            left:0;right:0;bottom:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(244,199,106,.36), transparent);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:80;
            backdrop-filter:blur(12px);
            background:rgba(13,9,14,.78);
            border-bottom:1px solid rgba(244,199,106,.10);
            transition:box-shadow .25s ease, background .25s ease;
        }
        .site-header.is-scrolled{
            background:rgba(11,7,12,.94);
            box-shadow:0 12px 34px rgba(0,0,0,.28);
        }
        .nav-shell{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            min-height:76px;
        }
        .brand{
            display:flex;
            align-items:center;
            gap:12px;
            min-width:220px;
            flex:0 0 auto;
        }
        .brand-mark{
            width:38px;height:38px;border-radius:12px;
            display:grid;place-items:center;
            background:
                radial-gradient(circle at 35% 30%, rgba(255,255,255,.65), rgba(255,255,255,0) 25%),
                linear-gradient(145deg, rgba(244,199,106,.95), rgba(255,182,157,.82));
            color:#22141b;
            box-shadow:0 10px 24px rgba(244,199,106,.22);
            border:1px solid rgba(255,255,255,.24);
            font-weight:900;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            line-height:1.1;
        }
        .brand-text strong{
            font-size:18px;
            letter-spacing:.2px;
        }
        .brand-text span{
            font-size:12px;color:var(--muted-2);
        }
        .desktop-nav{
            display:flex;
            align-items:center;
            gap:10px;
            flex:1 1 auto;
            justify-content:center;
        }
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            transition:all .22s ease;
            font-size:14px;
            letter-spacing:.1px;
            white-space:nowrap;
        }
        .nav-link:hover,
        .nav-link:focus-visible{
            color:var(--text);
            background:rgba(244,199,106,.07);
            border-color:rgba(244,199,106,.18);
            outline:none;
            transform:translateY(-1px);
        }
        .nav-link.active{
            color:#22141b;
            background:linear-gradient(135deg, var(--gold), #ffdca1);
            box-shadow:0 10px 20px rgba(244,199,106,.16);
            border-color:rgba(255,255,255,.16);
            font-weight:700;
        }
        .nav-right{
            display:flex;
            align-items:center;
            gap:10px;
            flex:0 0 auto;
        }
        .search-box{
            position:relative;
            min-width:260px;
            max-width:320px;
        }
        .search-box input{
            width:100%;
            height:42px;
            border-radius:999px;
            border:1px solid rgba(244,199,106,.18);
            background:rgba(255,255,255,.03);
            color:var(--text);
            padding:0 44px 0 16px;
            outline:none;
            transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .search-box input::placeholder{color:#a9969d}
        .search-box input:focus{
            border-color:rgba(244,199,106,.52);
            box-shadow:0 0 0 4px rgba(244,199,106,.08);
            background:rgba(255,255,255,.045);
        }
        .search-box button{
            position:absolute;
            right:6px;top:50%;
            transform:translateY(-50%);
            width:30px;height:30px;
            display:grid;place-items:center;
            border-radius:999px;
            border:0;
            background:linear-gradient(135deg, rgba(244,199,106,.95), rgba(255,182,157,.92));
            color:#21131a;
            cursor:pointer;
            transition:transform .18s ease, filter .18s ease;
        }
        .search-box button:hover{transform:translateY(-50%) scale(1.03)}
        .search-box button:active{transform:translateY(-50%) scale(.98)}
        .icon-btn{
            width:42px;height:42px;
            border-radius:999px;
            display:grid;place-items:center;
            border:1px solid rgba(244,199,106,.16);
            background:rgba(255,255,255,.03);
            color:var(--text);
            cursor:pointer;
            transition:all .2s ease;
        }
        .icon-btn:hover{
            border-color:rgba(244,199,106,.34);
            background:rgba(244,199,106,.06);
            transform:translateY(-1px);
        }
        .icon-btn:active{transform:translateY(0)}
        .primary-btn,
        .secondary-btn,
        .ghost-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            border-radius:999px;
            padding:13px 18px;
            font-weight:700;
            font-size:14px;
            letter-spacing:.2px;
            transition:all .2s ease;
            border:1px solid transparent;
            cursor:pointer;
            white-space:nowrap;
        }
        .primary-btn{
            color:#23141a;
            background:linear-gradient(135deg, var(--gold), #ffdca0);
            box-shadow:0 12px 28px rgba(244,199,106,.18);
        }
        .primary-btn:hover{
            transform:translateY(-2px);
            filter:brightness(1.03);
            box-shadow:0 16px 30px rgba(244,199,106,.2);
        }
        .primary-btn:active{transform:translateY(0)}
        .secondary-btn{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:rgba(244,199,106,.24);
        }
        .secondary-btn:hover{
            transform:translateY(-2px);
            background:rgba(244,199,106,.08);
            border-color:rgba(244,199,106,.38);
        }
        .ghost-btn{
            color:var(--text);
            background:transparent;
            border-color:rgba(255,255,255,.12);
        }
        .ghost-btn:hover{
            border-color:rgba(244,199,106,.22);
            background:rgba(255,255,255,.03);
        }
        .mobile-menu-btn{display:none}
        .mobile-drawer{
            display:none;
            border-top:1px solid rgba(244,199,106,.12);
            background:rgba(11,7,12,.96);
        }
        .mobile-drawer.open{display:block}
        .drawer-inner{
            padding:14px 0 18px;
            display:grid;
            gap:12px;
        }
        .drawer-links{
            display:grid;
            gap:10px;
        }
        .drawer-links a{
            padding:14px 16px;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.07);
            color:var(--text);
        }
        .drawer-cta{display:flex;gap:10px;flex-wrap:wrap}
        .hero{
            position:relative;
            padding:30px 0 28px;
        }
        .hero-card{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            border:1px solid rgba(244,199,106,.18);
            background:
                linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,.01)),
                radial-gradient(circle at top right, rgba(244,199,106,.10), transparent 24%),
                radial-gradient(circle at bottom left, rgba(207,127,146,.13), transparent 27%),
                linear-gradient(180deg, rgba(24,17,27,.96), rgba(16,11,18,.98));
            box-shadow:var(--shadow);
        }
        .hero-card:before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(120deg, transparent 0 18%, rgba(244,199,106,.07) 18% 19%, transparent 19% 100%),
                linear-gradient(180deg, rgba(255,255,255,.02), transparent 34%);
            pointer-events:none;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.06fr .94fr;
            gap:24px;
            padding:30px;
            align-items:stretch;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(244,199,106,.18);
            background:rgba(244,199,106,.06);
            color:#f1d9ad;
            font-size:13px;
            letter-spacing:.2px;
            margin-bottom:16px;
        }
        .hero h1{
            margin:0;
            font-size:clamp(34px, 4.6vw, 58px);
            line-height:1.14;
            font-weight:900;
            letter-spacing:.1px;
            max-width:12ch;
        }
        .hero p.subcopy{
            margin:16px 0 0;
            max-width:62ch;
            color:var(--muted);
            font-size:16px;
            line-height:1.82;
        }
        .hero-actions{
            margin-top:22px;
            display:flex;
            gap:12px;
            flex-wrap:wrap;
        }
        .hero-kpis{
            margin-top:24px;
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .kpi{
            padding:10px 14px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--text);
            display:flex;
            align-items:center;
            gap:10px;
        }
        .kpi strong{font-size:16px;color:#fff}
        .kpi span{font-size:13px;color:var(--muted)}
        .hero-aside{
            display:grid;
            gap:14px;
            align-content:stretch;
        }
        .panel{
            position:relative;
            overflow:hidden;
            border-radius:22px;
            border:1px solid rgba(244,199,106,.15);
            background:linear-gradient(180deg, rgba(32,23,36,.96), rgba(21,15,24,.94));
            box-shadow:var(--shadow-soft);
        }
        .panel.soft{
            background:linear-gradient(180deg, rgba(31,20,31,.96), rgba(18,12,19,.96));
        }
        .panel .panel-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:14px;
        }
        .panel-title{
            font-size:18px;
            font-weight:800;
            margin:0;
        }
        .panel-note{
            font-size:13px;
            color:var(--muted-2);
        }
        .question-list{
            display:grid;
            gap:12px;
        }
        .question-item{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px 15px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.07);
            background:rgba(255,255,255,.03);
        }
        .question-num{
            flex:0 0 auto;
            width:28px;height:28px;border-radius:10px;
            display:grid;place-items:center;
            background:rgba(244,199,106,.10);
            color:#f1d59e;
            font-size:13px;
            font-weight:800;
            border:1px solid rgba(244,199,106,.18);
        }
        .question-item h3{
            margin:0 0 4px;
            font-size:16px;
            font-weight:700;
        }
        .question-item p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
        }
        .matrix{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:12px;
        }
        .matrix-card{
            padding:16px;
            border-radius:18px;
            border:1px solid rgba(244,199,106,.14);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(36,24,33,.95), rgba(20,14,21,.95));
            transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
        }
        .matrix-card:hover{
            transform:translateY(-2px);
            border-color:rgba(244,199,106,.28);
            box-shadow:0 16px 28px rgba(0,0,0,.28);
        }
        .matrix-card .icon{
            width:34px;height:34px;border-radius:12px;
            display:grid;place-items:center;
            margin-bottom:10px;
            background:rgba(244,199,106,.1);
            color:#f8d9a0;
            border:1px solid rgba(244,199,106,.18);
        }
        .matrix-card strong{
            display:block;
            font-size:16px;
            margin-bottom:6px;
        }
        .matrix-card span{
            color:var(--muted);
            font-size:13px;
            line-height:1.65;
        }
        .stepbar{
            margin-top:14px;
            display:flex;
            gap:10px;
            align-items:center;
            flex-wrap:wrap;
        }
        .step{
            display:flex;
            align-items:center;
            gap:8px;
            padding:10px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:13px;
        }
        .step b{
            display:grid;
            place-items:center;
            width:22px;height:22px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--gold), #ffd9a0);
            color:#23141a;
            font-size:12px;
        }
        .section{
            padding:22px 0 0;
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:18px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(26px, 3vw, 36px);
            line-height:1.18;
            font-weight:900;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:60ch;
            line-height:1.76;
            font-size:15px;
        }
        .grid-solution{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:16px;
        }
        .solution-main{
            padding:24px;
            min-height:100%;
        }
        .solution-list{
            display:grid;
            gap:14px;
        }
        .solution-card{
            padding:18px;
            border-radius:18px;
            border:1px solid rgba(244,199,106,.14);
            background:rgba(255,255,255,.03);
            transition:transform .22s ease, border-color .22s ease, background .22s ease;
        }
        .solution-card:hover{
            transform:translateY(-2px);
            border-color:rgba(244,199,106,.26);
            background:rgba(244,199,106,.05);
        }
        .solution-card .row{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:10px;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            font-size:12px;
            color:#f5dfb8;
            border:1px solid rgba(244,199,106,.18);
            background:rgba(244,199,106,.07);
            white-space:nowrap;
        }
        .solution-card h3{
            margin:10px 0 8px;
            font-size:20px;
            font-weight:800;
        }
        .solution-card p{
            margin:0 0 12px;
            color:var(--muted);
            line-height:1.75;
            font-size:15px;
        }
        .bullet-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:8px;
        }
        .bullet-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#ddced3;
            font-size:14px;
            line-height:1.7;
        }
        .bullet-list li:before{
            content:"";
            flex:0 0 auto;
            width:8px;height:8px;border-radius:999px;
            margin-top:9px;
            background:linear-gradient(135deg, var(--gold), var(--peach));
            box-shadow:0 0 0 4px rgba(244,199,106,.08);
        }
        .solution-side{
            display:grid;
            gap:16px;
        }
        .feature-stack{
            padding:22px;
        }
        .feature-stack .stack{
            display:grid;
            gap:12px;
        }
        .feature-item{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:14px;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.07);
        }
        .feature-icon{
            width:34px;height:34px;border-radius:12px;
            display:grid;place-items:center;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(244,199,106,.16);
            color:#f3d8a7;
            flex:0 0 auto;
        }
        .feature-item strong{
            display:block;
            margin-bottom:4px;
            font-size:15px;
        }
        .feature-item span{
            display:block;
            color:var(--muted);
            font-size:13px;
            line-height:1.68;
        }
        .data-grid{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:14px;
        }
        .data-card{
            padding:20px 18px 18px;
            border-radius:20px;
            border:1px solid rgba(244,199,106,.14);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(33,23,36,.95), rgba(19,13,20,.96));
        }
        .data-card .tag{
            display:inline-flex;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(244,199,106,.09);
            border:1px solid rgba(244,199,106,.16);
            color:#f3d8aa;
            font-size:12px;
            margin-bottom:12px;
        }
        .data-card strong{
            display:block;
            font-size:34px;
            line-height:1;
            font-weight:900;
            margin-bottom:8px;
            letter-spacing:-.02em;
        }
        .data-card p{
            margin:0;
            color:var(--muted);
            line-height:1.72;
            font-size:14px;
        }
        .note-strip{
            margin-top:14px;
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            padding:14px 16px;
            border-radius:18px;
            border:1px solid rgba(244,199,106,.12);
            background:rgba(244,199,106,.05);
            color:#f3e0bf;
            flex-wrap:wrap;
        }
        .note-strip span{
            color:var(--muted);
            font-size:14px;
        }
        .news-layout{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:16px;
        }
        .news-list{
            display:grid;
            gap:12px;
        }
        .news-item{
            padding:16px 16px 15px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.07);
            background:rgba(255,255,255,.03);
            transition:transform .2s ease, border-color .2s ease;
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:rgba(244,199,106,.24);
        }
        .news-item .meta{
            display:flex;
            gap:8px;
            align-items:center;
            flex-wrap:wrap;
            margin-bottom:8px;
            color:var(--muted-2);
            font-size:12px;
        }
        .news-item h3{
            margin:0 0 7px;
            font-size:17px;
            font-weight:800;
        }
        .news-item p{
            margin:0;
            color:var(--muted);
            line-height:1.74;
            font-size:14px;
        }
        .side-note{
            padding:22px;
            height:100%;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .side-note .quote{
            font-size:18px;
            line-height:1.72;
            color:#f3e7d3;
            margin:0 0 16px;
        }
        .side-note ul{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:10px;
        }
        .side-note li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            line-height:1.72;
            font-size:14px;
        }
        .side-note li i{
            width:18px;height:18px;border-radius:999px;
            display:grid;place-items:center;
            color:#21141a;
            background:linear-gradient(135deg, var(--gold), #ffdca0);
            flex:0 0 auto;
            margin-top:2px;
            font-style:normal;
            font-size:12px;
            font-weight:800;
        }
        .cta-panel{
            padding:26px;
            display:grid;
            grid-template-columns:1fr auto;
            gap:18px;
            align-items:center;
        }
        .cta-panel h2{
            margin:0 0 8px;
            font-size:clamp(24px, 2.8vw, 34px);
            line-height:1.16;
            font-weight:900;
        }
        .cta-panel p{
            margin:0;
            color:var(--muted);
            line-height:1.78;
            font-size:15px;
            max-width:64ch;
        }
        .cta-actions{
            display:flex;
            flex-direction:column;
            gap:10px;
            min-width:220px;
        }
        .cta-actions .secondary-btn,
        .cta-actions .primary-btn{
            width:100%;
            justify-content:center;
        }
        .privacy-grid{
            display:grid;
            grid-template-columns:repeat(3,minmax(0,1fr));
            gap:14px;
        }
        .privacy-card{
            padding:18px;
            border-radius:18px;
            border:1px solid rgba(244,199,106,.14);
            background:rgba(255,255,255,.03);
        }
        .privacy-card .top{
            display:flex;
            align-items:center;
            gap:10px;
            margin-bottom:10px;
        }
        .privacy-card .top .shield{
            width:34px;height:34px;border-radius:12px;
            display:grid;place-items:center;
            background:rgba(61,210,177,.1);
            color:var(--success);
            border:1px solid rgba(63,210,177,.22);
        }
        .privacy-card h3{
            margin:0;
            font-size:17px;
            font-weight:800;
        }
        .privacy-card p{
            margin:0;
            color:var(--muted);
            line-height:1.74;
            font-size:14px;
        }
        .faq-wrap{
            display:grid;
            gap:12px;
        }
        details.faq{
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            overflow:hidden;
        }
        details.faq[open]{
            border-color:rgba(244,199,106,.28);
            background:rgba(244,199,106,.05);
        }
        details.faq summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            font-weight:700;
            font-size:16px;
            outline:none;
        }
        details.faq summary::-webkit-details-marker{display:none}
        details.faq summary .arrow{
            width:28px;height:28px;border-radius:999px;
            display:grid;place-items:center;
            flex:0 0 auto;
            background:rgba(244,199,106,.08);
            border:1px solid rgba(244,199,106,.14);
            transition:transform .2s ease;
        }
        details.faq[open] summary .arrow{transform:rotate(180deg)}
        .faq-answer{
            padding:0 20px 18px;
            color:var(--muted);
            line-height:1.8;
            font-size:14px;
        }
        .footer{
            margin-top:32px;
            border-top:1px solid rgba(244,199,106,.14);
            background:linear-gradient(180deg, rgba(16,10,16,.92), rgba(10,7,10,.98));
        }
        .footer-inner{
            padding:32px 0 24px;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr .9fr .9fr;
            gap:18px;
        }
        .footer-brand{
            display:flex;
            align-items:flex-start;
            gap:12px;
        }
        .footer-brand p{
            margin:10px 0 0;
            color:var(--muted);
            line-height:1.76;
            font-size:14px;
            max-width:34ch;
        }
        .footer h4{
            margin:0 0 12px;
            font-size:15px;
            font-weight:800;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
            transition:color .18s ease, transform .18s ease;
        }
        .footer-links a:hover{
            color:#fff;
            transform:translateX(2px);
        }
        .footer-bottom{
            margin-top:18px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            flex-wrap:wrap;
            color:var(--muted-2);
            font-size:13px;
        }
        .subtle{
            color:var(--muted);
        }
        .chip-row{
            display:flex;
            gap:8px;
            flex-wrap:wrap;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:#ddd2d6;
            font-size:12px;
            line-height:1;
        }
        .modal{
            position:fixed;
            inset:0;
            z-index:120;
            display:none;
            align-items:center;
            justify-content:center;
            padding:18px;
            background:rgba(0,0,0,.62);
        }
        .modal.open{display:flex}
        .modal-card{
            width:min(760px, 100%);
            border-radius:24px;
            border:1px solid rgba(244,199,106,.20);
            background:linear-gradient(180deg, rgba(30,21,34,.98), rgba(18,12,20,.99));
            box-shadow:0 30px 80px rgba(0,0,0,.55);
            overflow:hidden;
        }
        .modal-top{
            padding:18px 20px;
            border-bottom:1px solid rgba(244,199,106,.14);
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:10px;
            background:linear-gradient(90deg, rgba(244,199,106,.06), rgba(255,255,255,0));
        }
        .modal-top h3{
            margin:0;
            font-size:20px;
            font-weight:900;
        }
        .modal-top p{
            margin:6px 0 0;
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
        }
        .close-btn{
            width:38px;height:38px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.03);
            color:var(--text);
            cursor:pointer;
            display:grid;place-items:center;
            transition:all .2s ease;
            flex:0 0 auto;
        }
        .close-btn:hover{border-color:rgba(244,199,106,.26);background:rgba(244,199,106,.06)}
        .form-grid{
            padding:20px;
            display:grid;
            grid-template-columns:repeat(2,minmax(0,1fr));
            gap:14px;
        }
        .field.full{grid-column:1 / -1}
        .field label{
            display:block;
            margin:0 0 8px;
            font-size:13px;
            color:#f1dfd7;
        }
        .field input,
        .field select,
        .field textarea{
            width:100%;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.09);
            background:rgba(255,255,255,.03);
            color:var(--text);
            padding:12px 14px;
            outline:none;
            transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
        }
        .field textarea{
            min-height:110px;
            resize:vertical;
        }
        .field input::placeholder,
        .field textarea::placeholder{color:#9b8f96}
        .field input:focus,
        .field select:focus,
        .field textarea:focus{
            border-color:rgba(244,199,106,.52);
            box-shadow:0 0 0 4px rgba(244,199,106,.08);
            background:rgba(255,255,255,.045);
        }
        .checkline{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            line-height:1.7;
            font-size:13px;
        }
        .checkline input{
            margin-top:4px;
            width:16px;height:16px;
            accent-color:var(--gold);
        }
        .form-actions{
            padding:0 20px 20px;
            display:flex;
            justify-content:flex-end;
            gap:12px;
            flex-wrap:wrap;
        }
        .toast{
            margin:0 20px 20px;
            padding:12px 14px;
            border-radius:16px;
            display:none;
            font-size:14px;
            line-height:1.7;
        }
        .toast.success{
            display:block;
            background:rgba(63,210,177,.08);
            border:1px solid rgba(63,210,177,.22);
            color:#c8fff0;
        }
        .toast.error{
            display:block;
            background:rgba(255,108,115,.08);
            border:1px solid rgba(255,108,115,.22);
            color:#ffd1d3;
        }
        .mute{color:var(--muted)}
        .breadcrumb{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
            color:#d6c8cc;
            font-size:13px;
            margin-bottom:12px;
        }
        .breadcrumb a{color:#e9d9dc}
        .breadcrumb span.sep{color:#8c7d84}
        .mobile-only{display:none}
        .content-rail{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
        }
        .content-rail .dot{
            width:6px;height:6px;border-radius:999px;background:var(--gold);
            box-shadow:0 0 0 4px rgba(244,199,106,.08);
        }
        .section-divider{
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(244,199,106,.18), transparent);
            margin:18px 0 0;
        }
        .outline-box{
            padding:18px;
            border-radius:18px;
            border:1px solid rgba(244,199,106,.14);
            background:rgba(255,255,255,.025);
        }
        .inline-actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        .mini-link{
            color:#f4d8a7;
            font-size:14px;
            font-weight:700;
        }
        .mini-link:hover{text-decoration:underline}
        .tiny{
            font-size:12px;
            color:var(--muted-2);
        }
        .line-clamp-2{
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .line-clamp-3{
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        @media (max-width: 1080px){
            .search-box{min-width:220px}
            .desktop-nav{display:none}
            .mobile-menu-btn{display:inline-grid}
            .nav-shell{min-height:72px}
            .brand{min-width:auto}
            .hero-grid,.grid-solution,.news-layout,.cta-panel,.footer-grid{grid-template-columns:1fr}
            .data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .privacy-grid{grid-template-columns:1fr}
            .hero h1{max-width:100%}
            .cta-actions{min-width:0; flex-direction:row; flex-wrap:wrap}
            .cta-actions .primary-btn,.cta-actions .secondary-btn{width:auto}
        }
        @media (max-width: 768px){
            .container{width:min(var(--container), calc(100% - 22px))}
            .hero{padding-top:18px}
            .hero-card{border-radius:22px}
            .hero-grid,.solution-main,.feature-stack,.side-note,.cta-panel,.modal-top,.form-grid,.form-actions{padding-left:16px;padding-right:16px}
            .hero-grid{padding-top:20px;padding-bottom:20px}
            .hero h1{font-size:clamp(31px, 8vw, 40px)}
            .hero p.subcopy,.section-head p,.news-item p,.faq-answer,.solution-card p,.feature-item span,.privacy-card p,.panel-note{font-size:14px}
            .hero-actions,.inline-actions{width:100%}
            .hero-actions .primary-btn,.hero-actions .secondary-btn,.inline-actions .primary-btn,.inline-actions .secondary-btn{flex:1 1 180px}
            .matrix{grid-template-columns:1fr}
            .data-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .form-grid{grid-template-columns:1fr}
            .field.full{grid-column:auto}
            .mobile-only{display:flex}
            .search-box{display:none}
            .nav-right .ghost-btn{display:none}
        }
        @media (max-width: 520px){
            .brand-text strong{font-size:16px}
            .brand-mark{width:34px;height:34px;border-radius:11px}
            .hero-grid{gap:18px}
            .question-item,.solution-card,.news-item,.privacy-card,.data-card,.matrix-card,.panel,.outline-box{border-radius:16px}
            .hero-actions .primary-btn,.hero-actions .secondary-btn{width:100%}
            .data-grid{grid-template-columns:1fr}
            .cta-actions{width:100%}
            .cta-actions .primary-btn,.cta-actions .secondary-btn{width:100%}
            .footer-bottom{align-items:flex-start}
            .modal-card{border-radius:20px}
        }

/* roulang page: category1 */
:root{
      --bg:#100b0d;
      --bg2:#171012;
      --panel:#1a1215;
      --panel2:#201418;
      --line:rgba(216,180,106,.22);
      --line2:rgba(233,179,166,.18);
      --text:#f6efe8;
      --muted:#cdbcb4;
      --soft:#ae9790;
      --gold:#d8b46a;
      --gold2:#f0cf91;
      --rose:#b45d6a;
      --blush:#e8b7aa;
      --shadow:0 18px 40px rgba(0,0,0,.36);
      --radius:18px;
      --radius-sm:14px;
      --container:1240px;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      background:
        radial-gradient(circle at 20% 0%, rgba(216,180,106,.12), transparent 26%),
        radial-gradient(circle at 80% 12%, rgba(180,93,106,.12), transparent 24%),
        linear-gradient(180deg, #120c0f 0%, #0f0b0d 34%, #100b0d 100%);
      color:var(--text);
      font-family: Inter, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
      line-height:1.75;
      letter-spacing:0;
      text-rendering:optimizeLegibility;
      -webkit-font-smoothing:antialiased;
    }
    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    button,input,select,textarea{font:inherit}
    ::selection{background:rgba(216,180,106,.28);color:#fff}
    .container{width:min(var(--container),calc(100% - 32px));margin:0 auto}
    .glass-line{
      position:sticky;top:0;z-index:50;
      backdrop-filter: blur(14px);
      background: rgba(16,11,13,.86);
      border-bottom:1px solid var(--line);
      box-shadow:0 10px 30px rgba(0,0,0,.18);
    }
    .nav-shell{
      min-height:78px;
      display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .brand{
      display:flex;align-items:center;gap:12px;min-width:220px;max-width:280px;
    }
    .brand-mark{
      width:42px;height:42px;border-radius:14px;
      display:grid;place-items:center;
      background:linear-gradient(145deg, rgba(216,180,106,.96), rgba(233,179,166,.82));
      color:#231112;font-weight:900;font-size:18px;
      box-shadow:0 10px 20px rgba(216,180,106,.18);
      border:1px solid rgba(255,255,255,.18);
      flex:none;
    }
    .brand-text{display:flex;flex-direction:column;min-width:0}
    .brand-text strong{font-size:16px;line-height:1.15;letter-spacing:0}
    .brand-text span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .desktop-nav{display:flex;align-items:center;gap:8px}
    .nav-link{
      padding:10px 14px;border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      transition:.2s ease;
      font-size:14px;
    }
    .nav-link:hover,.nav-link:focus-visible{
      color:var(--text);
      border-color:var(--line);
      background:rgba(255,255,255,.03);
      outline:none;
    }
    .nav-link.active{
      color:#261413;
      background:linear-gradient(135deg, var(--gold), #f0cf91);
      border-color:rgba(255,255,255,.15);
      box-shadow:0 8px 18px rgba(216,180,106,.18);
    }
    .nav-right{
      display:flex;align-items:center;gap:10px;
      margin-left:auto;
    }
    .search-box{
      display:flex;align-items:center;gap:0;
      border:1px solid rgba(216,180,106,.18);
      background:rgba(255,255,255,.02);
      border-radius:999px;overflow:hidden;
      min-width:320px;
    }
    .search-box input{
      width:100%;border:0;outline:0;background:transparent;
      color:var(--text);padding:11px 14px;font-size:14px;
    }
    .search-box input::placeholder{color:#a78f87}
    .search-box button{
      width:42px;height:42px;border:0;background:transparent;color:var(--gold);
      display:grid;place-items:center;cursor:pointer;transition:.2s ease;
    }
    .search-box button:hover{background:rgba(216,180,106,.08)}
    .ghost-btn,.secondary-btn,.primary-btn,.icon-btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      min-height:42px;border-radius:999px;
      padding:0 16px;border:1px solid transparent;
      transition:.2s ease;cursor:pointer;white-space:nowrap;
      user-select:none;
    }
    .ghost-btn,.secondary-btn{
      background:transparent;color:var(--sand);border-color:rgba(216,180,106,.24);
    }
    .ghost-btn:hover,.secondary-btn:hover{background:rgba(216,180,106,.08);transform:translateY(-1px)}
    .primary-btn{
      background:linear-gradient(135deg, var(--gold), var(--gold2));
      color:#241112;font-weight:700;border-color:rgba(255,255,255,.15);
      box-shadow:0 14px 24px rgba(216,180,106,.15);
    }
    .primary-btn:hover{transform:translateY(-2px);filter:brightness(1.02)}
    .primary-btn:active,.secondary-btn:active,.ghost-btn:active{transform:translateY(1px)}
    .icon-btn{
      width:42px;padding:0;background:rgba(255,255,255,.02);
      border-color:rgba(216,180,106,.18);color:var(--text);
    }
    .icon-btn:hover{background:rgba(216,180,106,.08)}
    .mobile-menu-btn{display:none}
    .mobile-drawer{
      display:none;
      border-top:1px solid var(--line);
      background:rgba(16,11,13,.96);
    }
    .drawer-inner{padding:14px 0 18px}
    .drawer-links{display:grid;gap:8px}
    .drawer-links a{
      display:flex;align-items:center;justify-content:space-between;
      padding:12px 0;color:var(--text);border-bottom:1px solid rgba(255,255,255,.05);
    }
    .drawer-cta{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
    .hero{
      position:relative;
      padding:34px 0 18px;
      border-bottom:1px solid rgba(255,255,255,.04);
      overflow:hidden;
    }
    .hero::before{
      content:"";
      position:absolute;inset:0;
      background:
        linear-gradient(135deg, rgba(216,180,106,.10), transparent 35%),
        linear-gradient(180deg, rgba(255,255,255,.02), transparent 40%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 18px);
      pointer-events:none;
      opacity:.55;
    }
    .hero-grid{
      position:relative;z-index:1;
      display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:stretch;
    }
    .hero-copy{
      padding:28px 0 6px;
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;
      color:var(--gold2);font-size:13px;font-weight:700;letter-spacing:0;
      padding:8px 12px;border:1px solid rgba(216,180,106,.22);
      border-radius:999px;background:rgba(216,180,106,.06);
      margin-bottom:18px;
    }
    h1{
      margin:0;
      font-size:clamp(32px, 4.1vw, 56px);
      line-height:1.14;
      letter-spacing:0;
      font-weight:900;
      max-width:12em;
    }
    .hero-copy p{
      margin:16px 0 0;
      color:var(--muted);
      font-size:17px;
      max-width:52rem;
    }
    .hero-actions{
      display:flex;gap:12px;flex-wrap:wrap;margin-top:22px;
    }
    .hero-points{
      display:grid;gap:12px;margin-top:26px;
      grid-template-columns:repeat(2,minmax(0,1fr));
      max-width:700px;
    }
    .point{
      padding:14px 16px;border-radius:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid rgba(216,180,106,.16);
      box-shadow:var(--shadow);
    }
    .point strong{display:block;font-size:15px;margin-bottom:4px;color:#fff}
    .point span{display:block;color:var(--soft);font-size:13px;line-height:1.65}
    .hero-panel{
      align-self:stretch;
      display:grid;
      grid-template-rows:auto auto 1fr;
      gap:14px;
      padding:22px;
      border-radius:24px;
      background:linear-gradient(180deg, rgba(36,22,26,.95), rgba(20,13,15,.96));
      border:1px solid rgba(216,180,106,.20);
      box-shadow:var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .hero-panel::after{
      content:"";
      position:absolute;inset:auto -40px -40px auto;
      width:180px;height:180px;border-radius:50%;
      border:1px solid rgba(216,180,106,.16);
      opacity:.6;
    }
    .panel-top{
      display:flex;align-items:center;justify-content:space-between;gap:14px;
    }
    .badge{
      display:inline-flex;align-items:center;gap:6px;
      padding:7px 10px;border-radius:999px;
      background:rgba(216,180,106,.10);
      border:1px solid rgba(216,180,106,.18);
      color:var(--gold2);font-size:12px;font-weight:700;
    }
    .progress-card{
      padding:16px;border-radius:18px;
      background:rgba(255,255,255,.025);
      border:1px solid rgba(255,255,255,.06);
    }
    .progress-card h2,.compact-section h2,.list-panel h2,.sidebar h3,.faq h2,.privacy h2{
      margin:0 0 10px;
      font-size:clamp(22px, 2.2vw, 32px);
      line-height:1.2;
      font-weight:800;
      letter-spacing:0;
    }
    .step-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
    .step-list li{
      display:flex;align-items:flex-start;gap:12px;
      padding:12px 12px 12px 0;border-bottom:1px dashed rgba(255,255,255,.08);
      color:var(--sand);
    }
    .step-list li:last-child{border-bottom:0;padding-bottom:0}
    .step-num{
      width:28px;height:28px;border-radius:10px;flex:none;
      display:grid;place-items:center;
      background:linear-gradient(135deg, var(--gold), var(--gold2));
      color:#231112;font-weight:800;font-size:12px;
      margin-top:1px;
    }
    .step-list strong{display:block;font-size:14px;margin-bottom:2px}
    .step-list span{display:block;color:var(--soft);font-size:13px;line-height:1.6}
    .mini-grid{
      display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;
    }
    .mini-tile{
      padding:14px;border-radius:16px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid rgba(216,180,106,.14);
      min-height:108px;
    }
    .mini-tile strong{display:block;font-size:14px;margin-bottom:6px}
    .mini-tile p{margin:0;color:var(--soft);font-size:13px;line-height:1.65}
    .section{
      padding:28px 0;
    }
    .section-head{
      display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:18px;
    }
    .section-head p{margin:0;color:var(--muted);max-width:60ch}
    .compact-section{
      margin-top:-8px;
      padding:18px 0 6px;
    }
    .filter-bar{
      display:flex;flex-wrap:wrap;gap:10px;
      padding:14px;border-radius:22px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(216,180,106,.14);
      box-shadow:var(--shadow);
    }
    .filter-chip{
      padding:10px 14px;border-radius:999px;border:1px solid transparent;
      background:rgba(255,255,255,.02);color:var(--muted);
      cursor:pointer;transition:.2s ease;
      font-size:14px;
    }
    .filter-chip:hover,.filter-chip:focus-visible{
      color:var(--text);border-color:rgba(216,180,106,.22);background:rgba(216,180,106,.06);outline:none;
    }
    .filter-chip.active{
      background:linear-gradient(135deg, var(--gold), var(--gold2));
      color:#231112;font-weight:700;
    }
    .content-grid{
      display:grid;grid-template-columns:1.5fr .72fr;gap:20px;align-items:start;
      margin-top:18px;
    }
    .list-panel,.sidebar,.privacy,.faq{
      background:linear-gradient(180deg, rgba(31,20,24,.92), rgba(18,13,15,.95));
      border:1px solid rgba(216,180,106,.16);
      border-radius:24px;
      box-shadow:var(--shadow);
    }
    .list-panel{padding:20px}
    .article-list{display:grid;gap:14px}
    .article-card{
      display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
      padding:16px;border-radius:18px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.06);
      transition:.2s ease;
    }
    .article-card:hover{
      transform:translateY(-2px);
      border-color:rgba(216,180,106,.24);
      box-shadow:0 16px 30px rgba(0,0,0,.24);
    }
    .rank{
      width:54px;height:54px;border-radius:16px;
      background:linear-gradient(145deg, rgba(216,180,106,.95), rgba(233,179,166,.72));
      color:#261112;display:grid;place-items:center;
      font-weight:900;font-size:18px;flex:none;
    }
    .article-body h3{
      margin:0 0 6px;font-size:18px;line-height:1.35;font-weight:800;
    }
    .article-body p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
    .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
    .tag{
      display:inline-flex;align-items:center;
      padding:6px 9px;border-radius:999px;
      font-size:12px;font-weight:700;
      background:rgba(216,180,106,.08);
      border:1px solid rgba(216,180,106,.14);
      color:var(--gold2);
    }
    .tag.alt{background:rgba(180,93,106,.10);border-color:rgba(180,93,106,.18);color:#f0b6bd}
    .tag.soft{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.08);color:var(--mist)}
    .article-side{
      display:flex;align-items:center;gap:10px;justify-self:end;
      flex-wrap:wrap;
    }
    .article-side .ghost-btn,.article-side .secondary-btn{
      min-height:38px;padding:0 14px;font-size:13px;
    }
    .sidebar{padding:20px;display:grid;gap:16px}
    .side-box{
      padding:16px;border-radius:18px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(255,255,255,.06);
    }
    .side-box h4{margin:0 0 10px;font-size:16px;font-weight:800}
    .side-box p{margin:0;color:var(--muted);font-size:14px;line-height:1.7}
    .quick-list{display:grid;gap:10px;margin:0;padding:0;list-style:none}
    .quick-list li{
      display:flex;gap:10px;align-items:flex-start;
      padding:10px 0;border-bottom:1px dashed rgba(255,255,255,.08);
      color:var(--sand);
    }
    .quick-list li:last-child{border-bottom:0;padding-bottom:0}
    .quick-dot{
      width:10px;height:10px;border-radius:999px;background:var(--gold);margin-top:7px;flex:none;
      box-shadow:0 0 0 4px rgba(216,180,106,.10);
    }
    .metrics{
      display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;
    }
    .metric{
      padding:18px 16px;border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid rgba(216,180,106,.16);
      box-shadow:var(--shadow);
      min-height:126px;
    }
    .metric small{display:block;color:var(--gold2);font-weight:700;margin-bottom:12px}
    .metric strong{display:block;font-size:34px;line-height:1;font-weight:900;margin-bottom:10px}
    .metric span{display:block;color:var(--soft);font-size:13px;line-height:1.65}
    .metrics-note{
      margin-top:12px;padding:12px 14px;border-radius:14px;
      background:rgba(216,180,106,.08);
      border:1px solid rgba(216,180,106,.14);
      color:var(--mist);font-size:13px;
    }
    .cta-band{
      margin-top:20px;
      padding:18px 20px;
      border-radius:24px;
      background:
        linear-gradient(135deg, rgba(216,180,106,.12), rgba(180,93,106,.08)),
        rgba(255,255,255,.02);
      border:1px solid rgba(216,180,106,.18);
      display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
      box-shadow:var(--shadow);
    }
    .cta-band p{margin:0;color:var(--sand)}
    .cta-band strong{display:block;font-size:18px;margin-bottom:4px}
    .faq,.privacy{padding:20px}
    .faq-list{display:grid;gap:12px}
    .faq-item{
      border-radius:18px;
      border:1px solid rgba(255,255,255,.07);
      background:rgba(255,255,255,.02);
      overflow:hidden;
    }
    .faq-q{
      width:100%;
      display:flex;align-items:center;justify-content:space-between;gap:16px;
      padding:16px 18px;
      background:transparent;color:var(--text);
      border:0;text-align:left;cursor:pointer;
    }
    .faq-q span{font-size:16px;font-weight:700;line-height:1.5}
    .faq-q i{
      width:28px;height:28px;border-radius:999px;
      display:grid;place-items:center;flex:none;
      background:rgba(216,180,106,.10);color:var(--gold2);
      font-style:normal;font-weight:900;
      transition:.2s ease;
    }
    .faq-item.open .faq-q{
      border-left:3px solid var(--gold);
      padding-left:15px;
    }
    .faq-item.open .faq-q i{transform:rotate(45deg);background:rgba(216,180,106,.16)}
    .faq-a{
      display:none;
      padding:0 18px 16px 18px;
      color:var(--muted);
      font-size:14px;
      line-height:1.75;
    }
    .faq-item.open .faq-a{display:block}
    .privacy-grid{
      display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;
    }
    .privacy-card{
      padding:16px;border-radius:18px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(216,180,106,.14);
    }
    .privacy-card h4{margin:0 0 8px;font-size:15px;font-weight:800}
    .privacy-card p{margin:0;color:var(--muted);font-size:13px;line-height:1.7}
    .pagination{
      display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;
      margin-top:18px;
    }
    .page-btn{
      min-width:42px;height:42px;border-radius:12px;padding:0 12px;
      border:1px solid rgba(216,180,106,.18);
      background:rgba(255,255,255,.02);
      color:var(--text);
      cursor:pointer;
    }
    .page-btn.active{
      background:linear-gradient(135deg, var(--gold), var(--gold2));
      color:#231112;font-weight:800;
    }
    .page-btn:hover{background:rgba(216,180,106,.08)}
    .form-modal{
      position:fixed;inset:0;z-index:100;
      display:none;align-items:center;justify-content:center;
      padding:20px;
      background:rgba(5,3,4,.72);
      backdrop-filter: blur(8px);
    }
    .form-modal.open{display:flex}
    .form-card{
      width:min(720px, 100%);
      border-radius:24px;
      background:linear-gradient(180deg, #221419, #160f12);
      border:1px solid rgba(216,180,106,.22);
      box-shadow:0 28px 80px rgba(0,0,0,.5);
      overflow:hidden;
    }
    .form-head{
      padding:18px 22px;
      background:linear-gradient(90deg, rgba(216,180,106,.18), rgba(180,93,106,.08));
      border-bottom:1px solid rgba(216,180,106,.16);
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .form-head strong{font-size:18px}
    .close-btn{
      width:38px;height:38px;border-radius:12px;border:1px solid rgba(216,180,106,.18);
      background:rgba(255,255,255,.02);color:var(--text);cursor:pointer;
    }
    .form-body{padding:22px}
    .form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
    .field{display:grid;gap:8px}
    .field.full{grid-column:1/-1}
    .field label{font-size:13px;color:var(--gold2);font-weight:700}
    .field input,.field select,.field textarea{
      width:100%;border-radius:14px;border:1px solid rgba(216,180,106,.18);
      background:rgba(255,255,255,.03);color:var(--text);
      padding:13px 14px;outline:none;transition:.2s ease;
      min-height:46px;
    }
    .field textarea{min-height:108px;resize:vertical}
    .field input::placeholder,.field textarea::placeholder{color:#a98e88}
    .field input:focus,.field select:focus,.field textarea:focus{
      border-color:rgba(216,180,106,.5);
      box-shadow:0 0 0 4px rgba(216,180,106,.12);
    }
    .checkline{
      display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:13px;line-height:1.65;
    }
    .checkline input{margin-top:4px;accent-color:var(--gold)}
    .form-actions{
      display:flex;gap:12px;justify-content:flex-end;flex-wrap:wrap;margin-top:18px;
    }
    .footer{
      margin-top:36px;
      border-top:1px solid rgba(216,180,106,.18);
      background:linear-gradient(180deg, rgba(16,11,13,.98), rgba(11,8,9,1));
    }
    .footer-inner{padding:34px 0 18px}
    .footer-grid{
      display:grid;grid-template-columns:1.2fr .8fr .8fr .9fr;gap:20px;
      padding-bottom:18px;
      border-bottom:1px solid rgba(216,180,106,.16);
    }
    .footer-brand{display:flex;align-items:flex-start;gap:12px}
    .footer-brand p{margin:6px 0 0;color:var(--muted);font-size:14px;line-height:1.8}
    .footer h4{margin:0 0 12px;font-size:15px}
    .footer-links{display:grid;gap:10px}
    .footer-links a,.footer-links span{
      color:var(--muted);font-size:14px;line-height:1.6
    }
    .footer-links a:hover{color:var(--text)}
    .subtle{color:var(--soft)}
    .footer-bottom{
      display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
      padding-top:14px;color:var(--soft);font-size:13px;
    }
    .hidden{display:none!important}
    @media (max-width: 1080px){
      .desktop-nav,.search-box,.ghost-btn{display:none}
      .mobile-menu-btn{display:inline-flex}
      .hero-grid,.content-grid,.footer-grid{grid-template-columns:1fr}
      .hero-copy{padding-top:12px}
      .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
      .privacy-grid{grid-template-columns:1fr}
      .search-box{min-width:0}
      .nav-right{gap:8px}
    }
    @media (max-width: 768px){
      .nav-shell{min-height:68px}
      .brand{min-width:0}
      .brand-text span{display:none}
      .hero{padding-top:22px}
      h1{max-width:none;font-size:clamp(30px, 8vw, 40px)}
      .hero-points,.mini-grid,.metrics,.form-grid{grid-template-columns:1fr}
      .article-card{grid-template-columns:1fr;align-items:start}
      .article-side{justify-self:start}
      .rank{width:46px;height:46px;border-radius:14px}
      .cta-band{align-items:flex-start}
      .form-modal{padding:10px}
      .form-body{padding:18px}
      .form-actions .primary-btn,.form-actions .secondary-btn{width:100%}
    }
    @media (max-width: 520px){
      .container{width:min(var(--container),calc(100% - 24px))}
      .nav-right .primary-btn{display:none}
      .nav-right .secondary-btn{display:none}
      .hero-actions .primary-btn,.hero-actions .secondary-btn{width:100%}
      .filter-bar{overflow:auto;flex-wrap:nowrap;padding-bottom:10px}
      .filter-chip{flex:none}
      .section{padding:22px 0}
      .article-body h3{font-size:16px}
      .faq-q span{font-size:15px}
    }

/* roulang page: category2 */
:root{
      --bg:#120b10;
      --bg-2:#1b1117;
      --panel:#1f1319;
      --panel-2:#26151d;
      --panel-3:#2b1821;
      --text:#f6eee7;
      --muted:#d2c1b6;
      --soft:#a88f84;
      --line:rgba(234,196,120,.18);
      --line-strong:rgba(234,196,120,.34);
      --gold:#e0bf6b;
      --gold-strong:#f3d68f;
      --peach:#f1a68d;
      --rose:#cf6f7f;
      --emerald:#43c6a6;
      --shadow:0 22px 60px rgba(0,0,0,.42);
      --shadow-soft:0 12px 30px rgba(0,0,0,.26);
      --radius:18px;
      --radius-sm:14px;
      --radius-lg:22px;
    }
    html{scroll-behavior:smooth;}
    *{box-sizing:border-box;}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at top left, rgba(224,191,107,.08), transparent 32%),
        radial-gradient(circle at 85% 10%, rgba(207,111,127,.10), transparent 26%),
        radial-gradient(circle at 18% 78%, rgba(67,198,166,.07), transparent 24%),
        linear-gradient(180deg, #10090d 0%, #140c11 48%, #0f0a0e 100%);
      font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      line-height:1.75;
      letter-spacing:0;
      min-height:100vh;
      overflow-x:hidden;
    }
    body::before{
      content:"";
      position:fixed;
      inset:0;
      pointer-events:none;
      background:
        linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 100%),
        linear-gradient(45deg, rgba(255,255,255,.015) 0 1px, transparent 1px 100%);
      background-size:22px 22px, 28px 28px;
      opacity:.18;
      mask-image:linear-gradient(180deg, rgba(0,0,0,.6), rgba(0,0,0,.95));
      z-index:-1;
    }
    a{color:inherit;text-decoration:none;}
    img{max-width:100%;display:block;}
    button,input,select,textarea{font:inherit;color:inherit;}
    button{cursor:pointer;}
    .container{
      width:min(1240px, calc(100% - 32px));
      margin:0 auto;
    }
    .site-header{
      position:fixed;
      top:0;
      left:0;
      right:0;
      z-index:70;
      backdrop-filter:blur(18px);
      background:rgba(15,10,14,.76);
      border-bottom:1px solid rgba(234,196,120,.16);
      box-shadow:0 10px 32px rgba(0,0,0,.16);
    }
    .site-header.scrolled{
      background:rgba(13,8,12,.92);
      box-shadow:0 12px 34px rgba(0,0,0,.28);
    }
    .nav-shell{
      min-height:84px;
      display:flex;
      align-items:center;
      gap:22px;
      padding:14px 0;
    }
    .brand{
      display:flex;
      align-items:center;
      gap:14px;
      min-width:220px;
      max-width:280px;
      flex:0 0 auto;
    }
    .brand-mark{
      width:44px;
      height:44px;
      border-radius:16px;
      display:grid;
      place-items:center;
      font-weight:800;
      color:#1b1210;
      background:linear-gradient(160deg, var(--gold-strong), #d59f53);
      box-shadow:0 8px 20px rgba(224,191,107,.25), inset 0 1px 0 rgba(255,255,255,.48);
      border:1px solid rgba(255,255,255,.12);
      flex:0 0 auto;
    }
    .brand-text{
      display:flex;
      flex-direction:column;
      gap:2px;
      min-width:0;
    }
    .brand-text strong{
      font-size:18px;
      line-height:1.2;
      letter-spacing:0;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .brand-text span{
      color:var(--soft);
      font-size:12px;
      line-height:1.35;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .desktop-nav{
      display:flex;
      align-items:center;
      gap:10px;
      margin-left:8px;
      flex:1 1 auto;
      min-width:0;
    }
    .nav-link{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      height:42px;
      padding:0 16px;
      border-radius:999px;
      color:var(--muted);
      border:1px solid transparent;
      background:transparent;
      transition:transform .18s ease, background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
      font-size:14px;
      white-space:nowrap;
    }
    .nav-link:hover,
    .nav-link:focus-visible{
      color:var(--text);
      border-color:rgba(234,196,120,.24);
      background:rgba(234,196,120,.06);
      outline:none;
      transform:translateY(-1px);
    }
    .nav-link.active{
      color:#1c120f;
      background:linear-gradient(180deg, var(--gold-strong), #d7a54f);
      border-color:rgba(255,255,255,.14);
      box-shadow:0 12px 24px rgba(224,191,107,.18);
    }
    .nav-right{
      display:flex;
      align-items:center;
      gap:10px;
      flex:0 0 auto;
      margin-left:auto;
    }
    .search-box{
      display:flex;
      align-items:center;
      min-width:290px;
      max-width:340px;
      height:44px;
      padding:0 8px 0 14px;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(234,196,120,.18);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .search-box input{
      width:100%;
      border:0;
      outline:none;
      background:transparent;
      color:var(--text);
      font-size:14px;
    }
    .search-box input::placeholder{color:#ad988d;}
    .search-box button{
      width:34px;
      height:34px;
      border:0;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(224,191,107,.12);
      color:var(--gold-strong);
      transition:transform .18s ease, background-color .18s ease;
      flex:0 0 auto;
    }
    .search-box button:hover{transform:scale(1.04);background:rgba(224,191,107,.18);}
    .ghost-btn,
    .secondary-btn,
    .primary-btn,
    .icon-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      min-height:44px;
      padding:0 18px;
      border-radius:999px;
      border:1px solid transparent;
      transition:transform .18s ease, border-color .18s ease, background-color .18s ease, box-shadow .18s ease, color .18s ease, opacity .18s ease;
      white-space:nowrap;
      letter-spacing:0;
      position:relative;
    }
    .ghost-btn{
      color:var(--text);
      border-color:rgba(234,196,120,.20);
      background:rgba(255,255,255,.02);
    }
    .ghost-btn:hover,
    .ghost-btn:focus-visible{
      border-color:rgba(234,196,120,.34);
      background:rgba(234,196,120,.06);
      outline:none;
      transform:translateY(-1px);
    }
    .primary-btn{
      color:#1d120f;
      background:linear-gradient(180deg, var(--gold-strong), #d59d4c);
      border-color:rgba(255,255,255,.18);
      box-shadow:0 12px 26px rgba(224,191,107,.2), inset 0 1px 0 rgba(255,255,255,.34);
      font-weight:700;
    }
    .primary-btn:hover,
    .primary-btn:focus-visible{
      outline:none;
      transform:translateY(-2px);
      box-shadow:0 16px 30px rgba(224,191,107,.26), inset 0 1px 0 rgba(255,255,255,.36);
    }
    .secondary-btn{
      color:var(--text);
      background:rgba(255,255,255,.02);
      border-color:rgba(234,196,120,.24);
    }
    .secondary-btn:hover,
    .secondary-btn:focus-visible{
      background:rgba(224,191,107,.08);
      border-color:rgba(234,196,120,.38);
      transform:translateY(-1px);
      outline:none;
    }
    .icon-btn{
      width:44px;
      padding:0;
      border-radius:50%;
      background:rgba(255,255,255,.03);
      border-color:rgba(234,196,120,.18);
      color:var(--text);
    }
    .icon-btn:hover,
    .icon-btn:focus-visible{
      outline:none;
      transform:translateY(-1px);
      background:rgba(234,196,120,.07);
      border-color:rgba(234,196,120,.34);
    }
    .mobile-menu-btn,
    .mobile-search-btn{
      display:none;
    }
    .mobile-drawer{
      display:none;
      position:fixed;
      top:82px;
      left:50%;
      transform:translateX(-50%) translateY(-12px);
      width:min(560px, calc(100% - 20px));
      background:rgba(17,11,15,.97);
      border:1px solid rgba(234,196,120,.18);
      border-radius:22px;
      box-shadow:var(--shadow);
      padding:16px;
      backdrop-filter:blur(18px);
      z-index:80;
    }
    .mobile-drawer.open{display:block;animation:slideDown .18s ease-out;}
    @keyframes slideDown{
      from{opacity:0;transform:translateX(-50%) translateY(-18px);}
      to{opacity:1;transform:translateX(-50%) translateY(0);}
    }
    .drawer-inner{display:flex;flex-direction:column;gap:14px;}
    .drawer-top{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
    }
    .drawer-search{
      display:flex;
      align-items:center;
      height:44px;
      padding:0 8px 0 14px;
      border-radius:999px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(234,196,120,.18);
    }
    .drawer-search input{
      width:100%;
      background:transparent;
      border:0;
      outline:none;
      color:var(--text);
    }
    .drawer-links{
      display:grid;
      gap:10px;
    }
    .drawer-links a{
      display:flex;
      align-items:center;
      justify-content:space-between;
      min-height:46px;
      padding:0 14px;
      border-radius:16px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(234,196,120,.14);
      color:var(--text);
    }
    .drawer-links a:hover{background:rgba(234,191,107,.07);}
    .drawer-cta{
      display:grid;
      gap:10px;
    }
    main{padding-top:104px;}
    .hero-wrap{
      position:relative;
      padding:26px 0 18px;
    }
    .hero-stage{
      position:relative;
      overflow:hidden;
      border-radius:28px;
      border:1px solid rgba(234,196,120,.20);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        radial-gradient(circle at 15% 20%, rgba(224,191,107,.12), transparent 26%),
        radial-gradient(circle at 82% 18%, rgba(207,111,127,.12), transparent 22%),
        linear-gradient(180deg, #1a1015 0%, #140d12 100%);
      box-shadow:var(--shadow);
      padding:30px;
    }
    .hero-stage::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        linear-gradient(135deg, transparent 0 48%, rgba(234,196,120,.09) 49%, transparent 51%),
        linear-gradient(45deg, transparent 0 49%, rgba(255,255,255,.04) 50%, transparent 51%);
      background-size:100% 100%, 24px 24px;
      opacity:.45;
      pointer-events:none;
    }
    .hero-grid{
      position:relative;
      display:grid;
      grid-template-columns:1.15fr .85fr;
      gap:28px;
      align-items:start;
    }
    .crumbs{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin-bottom:16px;
    }
    .crumbs a,
    .crumbs span{
      font-size:13px;
      color:#c8b5aa;
    }
    .crumbs a:hover{color:var(--gold-strong);}
    .section-kicker{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      background:rgba(224,191,107,.08);
      border:1px solid rgba(234,196,120,.18);
      color:var(--gold-strong);
      font-size:13px;
      font-weight:700;
      margin-bottom:14px;
    }
    .section-kicker::before{
      content:"";
      width:8px;
      height:8px;
      border-radius:50%;
      background:var(--gold-strong);
      box-shadow:0 0 0 4px rgba(224,191,107,.13);
    }
    .hero-title{
      margin:0;
      font-size:56px;
      line-height:1.16;
      letter-spacing:0;
      font-weight:900;
      max-width:11ch;
    }
    .hero-copy{
      margin:18px 0 0;
      color:var(--muted);
      font-size:17px;
      line-height:1.82;
      max-width:42rem;
    }
    .question-list{
      margin:24px 0 0;
      display:grid;
      gap:12px;
      max-width:43rem;
    }
    .question-item{
      display:flex;
      gap:12px;
      padding:14px 16px;
      border-radius:16px;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(234,196,120,.12);
      box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
    }
    .question-item strong{
      flex:0 0 auto;
      color:var(--gold-strong);
      font-weight:800;
    }
    .question-item span{
      color:var(--text);
    }
    .hero-actions{
      margin-top:24px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
    }
    .hero-actions .primary-btn,
    .hero-actions .secondary-btn{
      min-width:148px;
    }
    .hero-panel{
      border-radius:24px;
      border:1px solid rgba(234,196,120,.16);
      background:rgba(20,13,17,.78);
      box-shadow:var(--shadow-soft);
      padding:20px;
    }
    .metric-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
    }
    .metric-card{
      min-height:116px;
      padding:16px;
      border-radius:18px;
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      border:1px solid rgba(234,196,120,.12);
    }
    .metric-card .topline{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
      color:#ceb7ad;
      font-size:13px;
    }
    .metric-card .num{
      font-size:34px;
      line-height:1;
      font-weight:900;
      color:var(--gold-strong);
      margin-bottom:8px;
    }
    .metric-card p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.65;
    }
    .mini-strip{
      margin-top:14px;
      display:grid;
      gap:10px;
    }
    .mini-chip{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:12px 14px;
      border-radius:16px;
      border:1px solid rgba(234,196,120,.12);
      background:rgba(255,255,255,.02);
      color:var(--text);
      font-size:14px;
    }
    .mini-chip span{
      color:var(--soft);
      font-size:12px;
    }
    .filter-row{
      margin-top:18px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .filter-pill{
      height:40px;
      display:inline-flex;
      align-items:center;
      padding:0 14px;
      border-radius:999px;
      border:1px solid rgba(234,196,120,.14);
      background:rgba(255,255,255,.02);
      color:var(--muted);
      font-size:13px;
    }
    .filter-pill.is-active{
      background:rgba(224,191,107,.12);
      color:var(--gold-strong);
      border-color:rgba(234,196,120,.26);
    }
    .section-shell{
      padding:18px 0 0;
    }
    .section-head{
      display:flex;
      align-items:end;
      justify-content:space-between;
      gap:16px;
      margin-bottom:18px;
    }
    .section-title{
      margin:0;
      font-size:34px;
      line-height:1.2;
      font-weight:900;
      letter-spacing:0;
    }
    .section-note{
      margin:0;
      color:var(--soft);
      font-size:14px;
      line-height:1.65;
      max-width:34rem;
    }
    .two-up{
      display:grid;
      grid-template-columns:1.12fr .88fr;
      gap:18px;
      align-items:stretch;
    }
    .panel{
      border-radius:var(--radius-lg);
      border:1px solid rgba(234,196,120,.16);
      background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
      box-shadow:var(--shadow-soft);
      padding:24px;
      position:relative;
      overflow:hidden;
    }
    .panel::after{
      content:"";
      position:absolute;
      inset:auto -16% -34% auto;
      width:240px;
      height:240px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(224,191,107,.08), transparent 65%);
      pointer-events:none;
    }
    .panel h3{
      margin:0 0 12px;
      font-size:24px;
      line-height:1.24;
      font-weight:800;
      letter-spacing:0;
    }
    .panel p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
    }
    .feature-list{
      margin:18px 0 0;
      padding:0;
      list-style:none;
      display:grid;
      gap:12px;
    }
    .feature-list li{
      position:relative;
      padding-left:18px;
      color:var(--text);
      font-size:15px;
      line-height:1.72;
    }
    .feature-list li::before{
      content:"";
      position:absolute;
      left:0;
      top:.62em;
      width:8px;
      height:8px;
      border-radius:999px;
      background:var(--gold-strong);
      box-shadow:0 0 0 4px rgba(224,191,107,.1);
    }
    .panel-footer{
      margin-top:20px;
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:center;
    }
    .tag-row{
      margin-top:16px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }
    .tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:7px 12px;
      border-radius:999px;
      font-size:12px;
      font-weight:700;
      border:1px solid transparent;
    }
    .tag.gold{background:rgba(224,191,107,.12);color:var(--gold-strong);border-color:rgba(224,191,107,.18);}
    .tag.rose{background:rgba(207,111,127,.12);color:#efb7c0;border-color:rgba(207,111,127,.18);}
    .tag.peach{background:rgba(241,166,141,.10);color:#f6c2b1;border-color:rgba(241,166,141,.18);}
    .tag.green{background:rgba(67,198,166,.10);color:#9ee2d2;border-color:rgba(67,198,166,.18);}
    .summary-band{
      margin:18px 0 0;
      padding:18px 0 0;
    }
    .summary-band .band{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:12px;
    }
    .stat{
      padding:16px;
      border-radius:18px;
      border:1px solid rgba(234,196,120,.14);
      background:rgba(255,255,255,.02);
    }
    .stat strong{
      display:block;
      font-size:26px;
      line-height:1;
      color:var(--gold-strong);
      font-weight:900;
      margin-bottom:8px;
    }
    .stat span{
      display:block;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .faq-list{
      display:grid;
      gap:12px;
      margin-top:8px;
    }
    .faq-item{
      border-radius:18px;
      border:1px solid rgba(234,196,120,.14);
      background:rgba(255,255,255,.02);
      overflow:hidden;
    }
    .faq-item[open]{
      border-color:rgba(234,196,120,.28);
      background:rgba(224,191,107,.04);
    }
    .faq-item summary{
      list-style:none;
      cursor:pointer;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
      padding:16px 18px;
      min-height:56px;
      font-weight:700;
      color:var(--text);
      outline:none;
      position:relative;
    }
    .faq-item summary::-webkit-details-marker{display:none;}
    .faq-item summary::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      bottom:0;
      width:3px;
      background:transparent;
    }
    .faq-item[open] summary::before{background:var(--gold-strong);}
    .faq-item summary span{
      color:var(--gold-strong);
      font-size:18px;
      line-height:1;
      flex:0 0 auto;
      transition:transform .18s ease;
    }
    .faq-item[open] summary span{transform:rotate(45deg);}
    .faq-answer{
      padding:0 18px 16px 18px;
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
    }
    .cta-panel{
      margin-top:18px;
      border-radius:28px;
      border:1px solid rgba(234,196,120,.18);
      background:
        linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
        radial-gradient(circle at 82% 14%, rgba(224,191,107,.12), transparent 24%);
      box-shadow:var(--shadow);
      padding:24px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
    }
    .cta-panel h3{
      margin:0 0 8px;
      font-size:24px;
      line-height:1.2;
      font-weight:800;
    }
    .cta-panel p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
      max-width:46rem;
    }
    .cta-actions{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      flex:0 0 auto;
    }
    .privacy-grid{
      margin-top:12px;
      display:grid;
      grid-template-columns:repeat(3,minmax(0,1fr));
      gap:14px;
    }
    .privacy-card{
      padding:20px;
      border-radius:20px;
      background:rgba(255,255,255,.02);
      border:1px solid rgba(234,196,120,.14);
      min-height:176px;
    }
    .privacy-card .icon{
      width:44px;
      height:44px;
      border-radius:14px;
      display:grid;
      place-items:center;
      background:rgba(224,191,107,.10);
      border:1px solid rgba(224,191,107,.16);
      color:var(--gold-strong);
      margin-bottom:14px;
    }
    .privacy-card h4{
      margin:0 0 8px;
      font-size:20px;
      line-height:1.25;
      font-weight:800;
    }
    .privacy-card p{
      margin:0;
      color:var(--muted);
      font-size:15px;
      line-height:1.8;
    }
    .footer{
      margin-top:28px;
      background:linear-gradient(180deg, rgba(14,9,13,.76), rgba(10,7,10,.96));
      border-top:1px solid rgba(234,196,120,.18);
      padding:34px 0 22px;
    }
    .footer-inner{display:flex;flex-direction:column;gap:18px;}
    .footer-grid{
      display:grid;
      grid-template-columns:1.35fr 1fr 1fr 1fr;
      gap:20px;
    }
    .footer-grid h4{
      margin:0 0 14px;
      font-size:15px;
      color:var(--gold-strong);
      font-weight:800;
    }
    .footer-brand{
      display:flex;
      align-items:flex-start;
      gap:14px;
    }
    .footer-brand p{
      margin:8px 0 0;
      color:var(--muted);
      font-size:14px;
      line-height:1.8;
      max-width:26rem;
    }
    .footer-links{
      display:grid;
      gap:10px;
    }
    .footer-links a,
    .footer-links span,
    .footer-links button{
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
      text-align:left;
    }
    .footer-links a:hover{color:var(--gold-strong);}
    .subtle{color:var(--soft);}
    .footer-bottom{
      padding-top:16px;
      border-top:1px solid rgba(234,196,120,.12);
      display:flex;
      justify-content:space-between;
      gap:12px;
      flex-wrap:wrap;
      color:#bda99f;
      font-size:13px;
    }
    .modal-overlay{
      position:fixed;
      inset:0;
      background:rgba(7,4,6,.72);
      backdrop-filter:blur(10px);
      display:none;
      align-items:center;
      justify-content:center;
      padding:20px;
      z-index:100;
    }
    .modal-overlay.open{display:flex;}
    .modal-box{
      width:min(760px, 100%);
      border-radius:28px;
      background:linear-gradient(180deg, rgba(24,15,20,.98), rgba(15,9,13,.98));
      border:1px solid rgba(234,196,120,.20);
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .modal-head{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:16px;
      padding:22px 24px 16px;
      border-bottom:1px solid rgba(234,196,120,.12);
      background:linear-gradient(180deg, rgba(255,255,255,.03), transparent);
    }
    .modal-head h3{
      margin:0 0 6px;
      font-size:24px;
      line-height:1.25;
      font-weight:800;
    }
    .modal-head p{
      margin:0;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .modal-body{
      padding:22px 24px 24px;
    }
    .field-grid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:14px;
    }
    .field{
      display:flex;
      flex-direction:column;
      gap:8px;
    }
    .field.full{grid-column:1 / -1;}
    .field label{
      font-size:13px;
      color:#d5c2b8;
      font-weight:700;
    }
    .input,
    .select,
    .textarea{
      width:100%;
      background:rgba(255,255,255,.03);
      border:1px solid rgba(234,196,120,.16);
      border-radius:16px;
      padding:12px 14px;
      color:var(--text);
      outline:none;
      transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease, background-color .18s ease;
    }
    .textarea{min-height:110px;resize:vertical;}
    .input::placeholder,
    .textarea::placeholder{color:#9f8b81;}
    .input:focus,
    .select:focus,
    .textarea:focus{
      border-color:rgba(243,214,143,.56);
      box-shadow:0 0 0 4px rgba(224,191,107,.11);
      background:rgba(255,255,255,.04);
    }
    .field-help{
      color:#a98f84;
      font-size:12px;
      line-height:1.6;
    }
    .check-row{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
    }
    .check-row input{
      margin-top:4px;
      width:18px;
      height:18px;
      accent-color:var(--gold-strong);
      flex:0 0 auto;
    }
    .form-alert{
      margin-top:14px;
      min-height:22px;
      color:var(--emerald);
      font-size:14px;
      line-height:1.6;
    }
    .modal-actions{
      margin-top:18px;
      display:flex;
      justify-content:flex-end;
      gap:10px;
      flex-wrap:wrap;
    }
    .close-btn{
      width:42px;
      height:42px;
      border-radius:50%;
      border:1px solid rgba(234,196,120,.18);
      background:rgba(255,255,255,.03);
      color:var(--text);
      display:grid;
      place-items:center;
      flex:0 0 auto;
    }
    .close-btn:hover{background:rgba(234,196,120,.07);}
    .hidden{display:none !important;}
    .clamp-2{
      display:-webkit-box;
      -webkit-line-clamp:2;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    .clamp-3{
      display:-webkit-box;
      -webkit-line-clamp:3;
      -webkit-box-orient:vertical;
      overflow:hidden;
    }
    :focus-visible{
      outline:2px solid rgba(243,214,143,.75);
      outline-offset:2px;
    }
    @media (max-width: 1200px){
      .hero-title{font-size:50px;}
      .section-title{font-size:30px;}
      .footer-grid{grid-template-columns:1.2fr 1fr 1fr 1fr;}
    }
    @media (max-width: 1024px){
      .desktop-nav{display:none;}
      .search-box{display:none;}
      .ghost-btn{display:none;}
      .mobile-menu-btn,
      .mobile-search-btn{display:inline-flex;}
      .nav-right{gap:8px;}
      .hero-grid,
      .two-up{grid-template-columns:1fr;}
      .summary-band .band{grid-template-columns:repeat(2,minmax(0,1fr));}
      .privacy-grid{grid-template-columns:1fr;}
      .footer-grid{grid-template-columns:1fr 1fr;}
    }
    @media (max-width: 768px){
      .site-header .container,
      .footer .container{width:min(100% - 20px, 1240px);}
      .nav-shell{min-height:74px;padding:10px 0;}
      .brand{min-width:0;max-width:220px;}
      .brand-text strong{font-size:16px;}
      .brand-text span{display:none;}
      main{padding-top:88px;}
      .hero-stage{padding:20px;}
      .hero-title{font-size:38px;max-width:12ch;}
      .hero-copy{font-size:15px;}
      .section-title{font-size:26px;}
      .panel{padding:20px;}
      .cta-panel{flex-direction:column;align-items:flex-start;}
      .cta-actions{width:100%;}
      .cta-actions .primary-btn,
      .cta-actions .secondary-btn{flex:1 1 180px;}
      .field-grid{grid-template-columns:1fr;}
      .footer-grid{grid-template-columns:1fr;}
      .footer-bottom{flex-direction:column;}
    }
    @media (max-width: 520px){
      .container{width:min(100% - 16px, 1240px);}
      .nav-shell{gap:10px;}
      .brand{gap:10px;}
      .brand-mark{width:40px;height:40px;border-radius:14px;}
      .hero-stage{border-radius:22px;}
      .hero-title{font-size:32px;line-height:1.18;}
      .hero-actions .primary-btn,
      .hero-actions .secondary-btn{width:100%;}
      .summary-band .band{grid-template-columns:1fr;}
      .metric-grid{grid-template-columns:1fr;}
      .modal-body,.modal-head{padding-left:16px;padding-right:16px;}
      .modal-box{border-radius:22px;}
      .mobile-drawer{top:74px;width:calc(100% - 12px);padding:12px;}
      .cta-panel{padding:20px;border-radius:22px;}
    }