/* roulang page: index */
:root{
            --bg:#120e0c;
            --bg-soft:#18120f;
            --panel:#1f1814;
            --panel-2:#261d19;
            --panel-3:#2c221d;
            --text:#f4ede5;
            --muted:#b8aa9c;
            --soft:#8f8173;
            --line:rgba(255,245,230,.10);
            --line-strong:rgba(255,245,230,.16);
            --accent:#c48a4f;
            --accent-2:#8d3c3b;
            --accent-3:#e0b56e;
            --accent-soft:rgba(196,138,79,.14);
            --shadow:0 22px 50px rgba(0,0,0,.34);
            --shadow-soft:0 14px 36px rgba(0,0,0,.22);
            --radius:22px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1200px;
            --gap:24px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            min-height:100vh;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(1200px 500px at 12% 0%, rgba(140,61,59,.18), transparent 60%),
                radial-gradient(900px 420px at 92% 18%, rgba(196,138,79,.16), transparent 55%),
                linear-gradient(180deg, #14100e 0%, #110d0b 38%, #0e0b09 100%);
            line-height:1.7;
            letter-spacing:.01em;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(transparent 0, rgba(255,255,255,.02) 1px, transparent 2px) 0 0/100% 8px,
                radial-gradient(circle at 50% 0, rgba(255,255,255,.03), transparent 55%);
            opacity:.18;
            mix-blend-mode:soft-light;
            z-index:0;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
        }
        img{
            display:block;
            width:100%;
            height:auto;
            border:0;
        }
        button,
        input,
        textarea{
            font:inherit;
        }
        button{
            cursor:pointer;
            border:0;
            background:none;
        }
        ::selection{
            background:rgba(196,138,79,.35);
            color:#fff;
        }
        :focus-visible{
            outline:3px solid rgba(224,181,110,.78);
            outline-offset:3px;
            border-radius:12px;
        }

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

        .topbar{
            position:relative;
            z-index:2;
            background:rgba(22,17,15,.84);
            border-bottom:1px solid var(--line);
            color:var(--muted);
            font-size:13px;
        }
        .topbar-inner{
            min-height:38px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:8px 0;
        }
        .topbar-note{
            display:flex;
            align-items:center;
            gap:10px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .topbar-note i{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(196,138,79,.15);
            flex:none;
        }
        .topbar-meta{
            color:var(--soft);
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:40;
            backdrop-filter:saturate(120%) blur(10px);
            background:rgba(18,14,12,.88);
            border-bottom:1px solid transparent;
            transition:box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
        }
        .site-header.is-scrolled{
            box-shadow:0 10px 28px rgba(0,0,0,.22);
            border-bottom-color:var(--line);
            background:rgba(17,13,11,.95);
        }
        .header-inner{
            min-height:78px;
            display:flex;
            align-items:center;
            gap:18px;
            padding:14px 0;
        }
        .brand{
            display:flex;
            align-items:flex-start;
            gap:12px;
            min-width:0;
            flex:1 1 auto;
        }
        .brand-badge{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:
                linear-gradient(145deg, rgba(196,138,79,.24), rgba(141,60,59,.18));
            border:1px solid rgba(224,181,110,.18);
            color:var(--accent-3);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
            font-weight:700;
            letter-spacing:.08em;
            flex:none;
        }
        .brand-text{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .brand-name{
            font-size:18px;
            line-height:1.12;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{
            font-size:12px;
            color:var(--muted);
            letter-spacing:.14em;
            text-transform:uppercase;
        }

        .nav-toggle{
            display:none;
            width:46px;
            height:46px;
            border-radius:14px;
            background:var(--panel);
            border:1px solid var(--line);
            color:var(--text);
            align-items:center;
            justify-content:center;
            box-shadow:var(--shadow-soft);
        }
        .nav-toggle span{
            position:relative;
            width:18px;
            height:2px;
            background:currentColor;
            border-radius:2px;
            display:block;
        }
        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            position:absolute;
            left:0;
            width:18px;
            height:2px;
            background:currentColor;
            border-radius:2px;
            transition:transform .25s var(--ease), top .25s var(--ease), opacity .25s var(--ease);
        }
        .nav-toggle span::before{top:-6px}
        .nav-toggle span::after{top:6px}

        .site-nav{
            display:flex;
            align-items:center;
            gap:4px;
            padding:6px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.02);
        }
        .site-nav a{
            min-height:44px;
            padding:10px 16px;
            border-radius:999px;
            color:var(--muted);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            font-size:14px;
            font-weight:600;
            letter-spacing:.01em;
            position:relative;
        }
        .site-nav a:hover,
        .site-nav a:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.04);
            transform:translateY(-1px);
        }
        .site-nav a.active{
            color:#fff;
            background:linear-gradient(145deg, rgba(196,138,79,.22), rgba(141,60,59,.18));
            box-shadow:inset 0 0 0 1px rgba(224,181,110,.16);
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:46px;
            padding:0 18px;
            border-radius:14px;
            border:1px solid transparent;
            font-weight:700;
            font-size:14px;
            letter-spacing:.01em;
            white-space:nowrap;
        }
        .btn-primary{
            background:linear-gradient(145deg, var(--accent), var(--accent-3));
            color:#20150e;
            box-shadow:0 12px 28px rgba(196,138,79,.22);
        }
        .btn-primary:hover,
        .btn-primary:focus-visible{
            transform:translateY(-2px);
            box-shadow:0 16px 34px rgba(196,138,79,.30);
            filter:saturate(108%);
        }
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:var(--line-strong);
        }
        .btn-secondary:hover,
        .btn-secondary:focus-visible{
            transform:translateY(-2px);
            border-color:rgba(224,181,110,.32);
            background:rgba(255,255,255,.05);
            box-shadow:var(--shadow-soft);
        }
        .btn-ghost{
            color:var(--muted);
            background:transparent;
            border-color:var(--line);
        }
        .btn-ghost:hover,
        .btn-ghost:focus-visible{
            color:var(--text);
            border-color:rgba(224,181,110,.28);
            background:rgba(255,255,255,.03);
        }

        .header-cta{
            flex:none;
        }

        main{
            position:relative;
            z-index:1;
        }

        .hero{
            position:relative;
            overflow:hidden;
            padding:42px 0 32px;
            background:
                linear-gradient(180deg, rgba(12,9,8,.18), rgba(12,9,8,.58)),
                url('/assets/images/backpic/back-1.jpg') center/cover no-repeat;
            border-bottom:1px solid var(--line);
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(850px 420px at 12% 10%, rgba(0,0,0,.12), transparent 55%),
                linear-gradient(90deg, rgba(17,12,10,.88) 0%, rgba(17,12,10,.66) 48%, rgba(17,12,10,.82) 100%);
            z-index:0;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:32px;
            align-items:center;
            position:relative;
            z-index:1;
            min-height:640px;
            padding:34px 0;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:8px 14px;
            border-radius:999px;
            border:1px solid rgba(224,181,110,.20);
            background:rgba(196,138,79,.10);
            color:var(--accent-3);
            font-size:13px;
            font-weight:700;
            letter-spacing:.12em;
            text-transform:uppercase;
        }
        .eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent-3);
            box-shadow:0 0 0 4px rgba(224,181,110,.15);
        }
        .hero h1{
            margin:18px 0 0;
            font-size:clamp(42px, 6vw, 72px);
            line-height:1.02;
            letter-spacing:.01em;
            text-wrap:balance;
            max-width:10ch;
        }
        .hero-lead{
            margin:18px 0 0;
            max-width:34em;
            color:#e8ddd2;
            font-size:18px;
            line-height:1.85;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:28px;
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:24px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:13px;
        }
        .tag.accent{
            color:#f7e0bf;
            border-color:rgba(224,181,110,.22);
            background:rgba(196,138,79,.10);
        }

        .hero-visual{
            display:grid;
            gap:16px;
        }
        .hero-image-card{
            margin:0;
            border-radius:var(--radius);
            overflow:hidden;
            background:var(--panel);
            border:1px solid rgba(255,255,255,.10);
            box-shadow:var(--shadow);
            position:relative;
        }
        .hero-image{
            aspect-ratio:4/5;
            width:100%;
            object-fit:cover;
            filter:saturate(1.05) contrast(1.02);
            transform:scale(1.01);
        }
        .hero-image-card::after{
            content:"";
            position:absolute;
            inset:auto 0 0 0;
            height:40%;
            background:linear-gradient(180deg, transparent, rgba(10,8,7,.92));
            pointer-events:none;
        }
        .hero-caption{
            position:absolute;
            left:16px;
            right:16px;
            bottom:16px;
            z-index:1;
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:flex-end;
            color:#fff;
        }
        .hero-caption strong{
            display:block;
            font-size:16px;
        }
        .hero-caption span{
            display:block;
            color:rgba(255,255,255,.76);
            font-size:13px;
            margin-top:4px;
        }
        .hero-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(17,13,11,.76);
            border:1px solid rgba(255,255,255,.14);
            backdrop-filter:blur(8px);
            font-size:12px;
            color:#f4e8d8;
        }

        .hero-stats{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:12px;
        }
        .stat{
            padding:16px 14px;
            border-radius:18px;
            background:rgba(26,20,17,.72);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            min-height:96px;
        }
        .stat strong{
            display:block;
            font-size:26px;
            line-height:1;
            color:#fff;
            letter-spacing:.01em;
        }
        .stat span{
            display:block;
            margin-top:10px;
            color:var(--muted);
            font-size:13px;
            line-height:1.5;
        }

        .section{
            padding:86px 0;
        }
        .section.compact{
            padding:72px 0;
        }
        .section-head{
            display:grid;
            gap:10px;
            margin-bottom:26px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(28px, 3.4vw, 42px);
            line-height:1.12;
            letter-spacing:.01em;
            text-wrap:balance;
        }
        .section-head p{
            margin:0;
            max-width:62ch;
            color:var(--muted);
            font-size:16px;
            line-height:1.8;
        }

        .highlights-grid{
            display:grid;
            grid-template-columns:1.28fr .72fr;
            gap:18px;
            align-items:stretch;
        }
        .feature-large{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius);
            background:var(--panel);
            border:1px solid var(--line);
            box-shadow:var(--shadow);
            min-height:420px;
            display:grid;
            grid-template-columns:1fr .92fr;
        }
        .feature-large-media{
            position:relative;
            overflow:hidden;
            min-height:100%;
        }
        .feature-large-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transform:scale(1.02);
            transition:transform .55s var(--ease);
        }
        .feature-large:hover .feature-large-media img,
        .feature-card:hover .feature-thumb img,
        .card-link:hover .thumb img{
            transform:scale(1.06);
        }
        .feature-large-content{
            padding:28px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:20px;
        }
        .pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:max-content;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(224,181,110,.18);
            background:rgba(196,138,79,.10);
            color:#f2ddb9;
            font-size:13px;
            font-weight:700;
        }
        .pill::before{
            content:"";
            width:7px;
            height:7px;
            border-radius:50%;
            background:var(--accent-3);
        }
        .feature-large h3{
            margin:18px 0 10px;
            font-size:28px;
            line-height:1.18;
        }
        .feature-large p{
            margin:0;
            color:var(--muted);
            font-size:16px;
            line-height:1.85;
            max-width:28ch;
        }
        .feature-metrics{
            display:grid;
            gap:10px;
        }
        .metric-line{
            display:flex;
            justify-content:space-between;
            gap:16px;
            padding:12px 0;
            border-top:1px solid var(--line);
            color:var(--muted);
            font-size:14px;
        }
        .metric-line strong{
            color:#fff;
            font-weight:700;
        }

        .feature-stack{
            display:grid;
            gap:18px;
        }
        .feature-card{
            padding:22px;
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(37,29,25,.96), rgba(28,22,19,.96));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            display:grid;
            gap:16px;
            min-height:201px;
            position:relative;
            overflow:hidden;
        }
        .feature-card.feature-accent{
            background:
                radial-gradient(520px 220px at 18% 0%, rgba(140,61,59,.20), transparent 60%),
                linear-gradient(180deg, rgba(39,30,26,.98), rgba(27,21,18,.98));
        }
        .feature-card .feature-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .mini-badge{
            display:inline-flex;
            align-items:center;
            min-height:30px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:12px;
        }
        .feature-card h3{
            margin:0;
            font-size:22px;
            line-height:1.22;
        }
        .feature-card p{
            margin:0;
            color:var(--muted);
            font-size:15px;
            line-height:1.8;
        }
        .feature-thumb{
            border-radius:18px;
            overflow:hidden;
            aspect-ratio:16/9;
            background:#211913;
            border:1px solid var(--line);
        }
        .feature-thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .55s var(--ease);
        }

        .featured-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:18px;
        }
        .card-link{
            display:flex;
            flex-direction:column;
            min-height:100%;
            border-radius:var(--radius);
            overflow:hidden;
            background:linear-gradient(180deg, rgba(32,25,22,.96), rgba(24,18,16,.96));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            transform:translateY(0);
        }
        .card-link:hover,
        .card-link:focus-visible{
            transform:translateY(-4px);
            border-color:rgba(224,181,110,.24);
            box-shadow:var(--shadow);
        }
        .thumb{
            position:relative;
            overflow:hidden;
            aspect-ratio:16/10;
            background:#2a211d;
        }
        .thumb::after{
            content:"";
            position:absolute;
            inset:auto 0 0 0;
            height:42%;
            background:linear-gradient(180deg, transparent, rgba(9,7,6,.72));
            pointer-events:none;
        }
        .thumb img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .55s var(--ease);
        }
        .card-body{
            padding:20px;
            display:grid;
            gap:12px;
        }
        .card-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            color:var(--muted);
            font-size:12px;
        }
        .card-meta .tag{
            min-height:28px;
            padding:0 10px;
            font-size:12px;
        }
        .card-link h3{
            margin:0;
            font-size:20px;
            line-height:1.28;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
            min-height:calc(1.28em * 2);
        }
        .card-link p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            line-height:1.8;
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
            min-height:calc(1.8em * 3);
        }
        .card-foot{
            margin-top:auto;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color:#f2e2d0;
            font-size:13px;
        }
        .card-foot .arrow{
            width:28px;
            height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(196,138,79,.12);
            border:1px solid rgba(224,181,110,.18);
            color:var(--accent-3);
            transition:transform .25s var(--ease), background-color .25s var(--ease);
        }
        .card-link:hover .card-foot .arrow{
            transform:translateX(3px);
            background:rgba(196,138,79,.18);
        }

        .latest-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:16px;
        }
        .news-card{
            display:block;
            padding:18px;
            border-radius:var(--radius);
            background:linear-gradient(180deg, rgba(28,22,19,.96), rgba(22,17,15,.96));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            min-height:100%;
            position:relative;
            overflow:hidden;
        }
        .news-card::before{
            content:"";
            position:absolute;
            left:0;
            top:0;
            bottom:0;
            width:4px;
            background:linear-gradient(180deg, rgba(196,138,79,.98), rgba(141,60,59,.88));
            opacity:.9;
        }
        .news-card:hover,
        .news-card:focus-visible{
            transform:translateY(-3px);
            border-color:rgba(224,181,110,.20);
            box-shadow:var(--shadow);
        }
        .news-head{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:12px;
            padding-left:10px;
        }
        .news-head .tag{
            min-height:28px;
            padding:0 10px;
            font-size:12px;
        }
        .news-time{
            color:var(--soft);
            font-size:12px;
        }
        .news-title{
            margin:0;
            padding-left:10px;
            font-size:19px;
            line-height:1.35;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .news-summary{
            margin:10px 0 0;
            padding-left:10px;
            color:var(--muted);
            font-size:14px;
            line-height:1.8;
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .news-foot{
            margin-top:14px;
            padding-left:10px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color:#f4e4cf;
            font-size:13px;
        }
        .news-cta{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--accent-3);
        }
        .news-cta span{
            width:22px;
            height:22px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(196,138,79,.12);
            border:1px solid rgba(224,181,110,.18);
        }
        .empty-state{
            padding:26px;
            border-radius:var(--radius);
            background:rgba(255,255,255,.03);
            border:1px dashed rgba(224,181,110,.22);
            color:var(--muted);
            text-align:center;
            font-size:15px;
            box-shadow:var(--shadow-soft);
        }

        .proof-grid{
            display:grid;
            grid-template-columns:1.1fr .9fr;
            gap:18px;
            align-items:stretch;
        }
        .proof-panel{
            padding:28px;
            border-radius:var(--radius);
            background:
                radial-gradient(760px 280px at 18% 0%, rgba(196,138,79,.12), transparent 60%),
                linear-gradient(180deg, rgba(31,24,20,.98), rgba(24,19,17,.98));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .proof-panel h3{
            margin:0 0 10px;
            font-size:24px;
            line-height:1.25;
        }
        .proof-panel p{
            margin:0;
            color:var(--muted);
            font-size:15px;
            line-height:1.85;
        }
        .proof-list{
            display:grid;
            gap:12px;
        }
        .proof-item{
            padding:18px 18px 18px 20px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
            display:flex;
            gap:14px;
            align-items:flex-start;
        }
        .proof-dot{
            width:12px;
            height:12px;
            border-radius:50%;
            margin-top:7px;
            background:var(--accent-3);
            box-shadow:0 0 0 6px rgba(224,181,110,.10);
            flex:none;
        }
        .proof-item strong{
            display:block;
            font-size:16px;
            color:#fff;
            margin-bottom:6px;
        }
        .proof-item span{
            display:block;
            color:var(--muted);
            font-size:14px;
            line-height:1.8;
        }

        .faq-grid{
            display:grid;
            gap:14px;
        }
        details.faq-item{
            border-radius:18px;
            background:linear-gradient(180deg, rgba(29,23,20,.98), rgba(23,18,16,.98));
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        details.faq-item[open]{
            border-color:rgba(224,181,110,.22);
        }
        details.faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:20px 22px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            font-size:16px;
            color:#fff;
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"+";
            width:30px;
            height:30px;
            border-radius:999px;
            display:grid;
            place-items:center;
            flex:none;
            background:rgba(196,138,79,.12);
            border:1px solid rgba(224,181,110,.18);
            color:var(--accent-3);
            transition:transform .25s var(--ease), background-color .25s var(--ease);
        }
        details.faq-item[open] summary::after{
            content:"–";
            transform:rotate(0deg);
        }
        .faq-content{
            padding:0 22px 22px;
            color:var(--muted);
            font-size:15px;
            line-height:1.9;
            border-top:1px solid var(--line);
            margin:0 22px;
        }
        .faq-content p{
            margin:16px 0 0;
        }

        .cta{
            padding-top:28px;
        }
        .cta-box{
            border-radius:28px;
            padding:32px;
            background:
                radial-gradient(880px 260px at 20% 0%, rgba(196,138,79,.14), transparent 60%),
                linear-gradient(135deg, rgba(28,21,18,.98), rgba(22,17,15,.98));
            border:1px solid rgba(224,181,110,.16);
            box-shadow:var(--shadow);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:22px;
        }
        .cta-copy{
            max-width:760px;
        }
        .cta-copy h2{
            margin:0;
            font-size:clamp(26px, 3.2vw, 40px);
            line-height:1.12;
        }
        .cta-copy p{
            margin:12px 0 0;
            color:var(--muted);
            font-size:16px;
            line-height:1.85;
            max-width:58ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            flex:none;
        }

        .site-footer{
            margin-top:12px;
            padding:42px 0 30px;
            border-top:1px solid var(--line);
            background:rgba(10,8,7,.46);
            position:relative;
            z-index:1;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.1fr .6fr .9fr;
            gap:22px;
            align-items:start;
        }
        .footer-brand{
            display:grid;
            gap:12px;
        }
        .footer-brand .brand-name{
            font-size:20px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:32ch;
            line-height:1.85;
        }
        .footer-title{
            margin:0 0 12px;
            font-size:15px;
            color:#fff;
            letter-spacing:.06em;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            font-size:14px;
            line-height:1.7;
            width:max-content;
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:var(--text);
            transform:translateX(2px);
        }
        .footer-meta{
            color:var(--muted);
            font-size:14px;
            line-height:1.9;
        }
        .footer-line{
            margin-top:28px;
            padding-top:18px;
            border-top:1px solid var(--line);
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:12px;
            color:var(--soft);
            font-size:13px;
        }

        .nav-panel{
            display:none;
        }

        @media (max-width: 1120px){
            .hero-grid{
                min-height:auto;
                grid-template-columns:1fr;
                padding:18px 0 28px;
            }
            .hero h1{
                max-width:12ch;
            }
            .highlights-grid,
            .proof-grid{
                grid-template-columns:1fr;
            }
            .feature-large{
                grid-template-columns:1fr;
            }
            .feature-large-media{
                min-height:290px;
            }
            .featured-grid,
            .latest-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .footer-grid{
                grid-template-columns:1fr 1fr;
            }
            .footer-brand{
                grid-column:1 / -1;
            }
        }

        @media (max-width: 768px){
            .topbar-inner{
                gap:10px;
            }
            .topbar-meta{
                display:none;
            }
            .header-inner{
                min-height:68px;
            }
            .nav-toggle{
                display:inline-flex;
                flex:none;
            }
            .header-cta{
                display:none;
            }
            .site-nav{
                position:absolute;
                left:0;
                right:0;
                top:calc(100% + 10px);
                margin:0 auto;
                width:min(var(--container), calc(100% - 32px));
                display:grid;
                gap:8px;
                padding:12px;
                border-radius:20px;
                background:rgba(20,15,13,.98);
                border:1px solid var(--line);
                box-shadow:var(--shadow);
                transform:translateY(-8px);
                opacity:0;
                visibility:hidden;
                pointer-events:none;
            }
            .site-header.nav-open .site-nav{
                opacity:1;
                visibility:visible;
                pointer-events:auto;
                transform:translateY(0);
            }
            .site-nav a{
                justify-content:flex-start;
                border-radius:14px;
                min-height:46px;
                padding:12px 14px;
            }
            .site-header.nav-open .nav-toggle span{
                background:transparent;
            }
            .site-header.nav-open .nav-toggle span::before{
                top:0;
                transform:rotate(45deg);
            }
            .site-header.nav-open .nav-toggle span::after{
                top:0;
                transform:rotate(-45deg);
            }
            .hero{
                padding-top:28px;
            }
            .hero h1{
                font-size:clamp(34px, 10vw, 54px);
            }
            .hero-lead{
                font-size:16px;
            }
            .hero-stats{
                grid-template-columns:1fr;
            }
            .section{
                padding:64px 0;
            }
            .featured-grid,
            .latest-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .cta-box{
                padding:24px;
                flex-direction:column;
                align-items:flex-start;
            }
            .cta-actions{
                width:100%;
            }
            .cta-actions .btn{
                width:100%;
            }
            .brand-badge{
                width:38px;
                height:38px;
            }
            .brand-name{
                font-size:16px;
            }
            .brand-sub{
                letter-spacing:.10em;
            }
            .faq-content{
                margin:0 16px;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .topbar-inner{
                font-size:12px;
            }
            .hero{
                padding-bottom:20px;
            }
            .hero-image-card{
                border-radius:20px;
            }
            .section-head h2{
                font-size:clamp(24px, 8vw, 32px);
            }
            .feature-large-content,
            .card-body,
            .news-card,
            .proof-panel,
            .cta-box{
                padding:18px;
            }
            .feature-large{
                min-height:auto;
            }
            .hero-actions{
                gap:10px;
            }
            .hero-actions .btn{
                width:100%;
            }
            .card-link h3{
                font-size:18px;
            }
            .news-title{
                font-size:17px;
            }
            details.faq-item summary{
                padding:18px;
                font-size:15px;
            }
            .faq-content{
                padding:0 18px 18px;
            }
            .footer-line{
                flex-direction:column;
            }
        }

/* roulang page: article */
:root{
            --bg:#120e0c;
            --bg-soft:#18120f;
            --panel:#1f1814;
            --panel-2:#261d19;
            --panel-3:#2c221d;
            --text:#f4ede5;
            --muted:#b8aa9c;
            --soft:#8f8173;
            --line:rgba(255,245,230,.10);
            --line-strong:rgba(255,245,230,.16);
            --accent:#c48a4f;
            --accent-2:#8d3c3b;
            --accent-3:#e0b56e;
            --accent-soft:rgba(196,138,79,.14);
            --shadow:0 22px 50px rgba(0,0,0,.34);
            --shadow-soft:0 14px 36px rgba(0,0,0,.22);
            --radius:22px;
            --radius-sm:16px;
            --radius-xs:12px;
            --container:1200px;
            --gap:24px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            min-height:100vh;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(1200px 500px at 12% 0%, rgba(141,60,59,.18), transparent 60%),
                radial-gradient(900px 420px at 92% 18%, rgba(196,138,79,.16), transparent 55%),
                linear-gradient(180deg, #14100e 0%, #110d0b 38%, #0e0b09 100%);
            line-height:1.7;
            letter-spacing:.01em;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(transparent 0, rgba(255,255,255,.02) 1px, transparent 2px) 0 0/100% 8px,
                radial-gradient(circle at 50% 0, rgba(255,255,255,.03), transparent 55%);
            opacity:.18;
            mix-blend-mode:soft-light;
            z-index:0;
        }
        ::selection{
            background:rgba(196,138,79,.32);
            color:var(--text);
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease), opacity .25s var(--ease);
        }
        a:hover{color:#fff}
        img{
            display:block;
            width:100%;
            height:auto;
            border:0;
        }
        button,
        input,
        textarea,
        select{
            font:inherit;
        }
        button{
            cursor:pointer;
            border:0;
            background:none;
        }
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
            position:relative;
            z-index:1;
        }
        .topbar{
            position:relative;
            z-index:2;
            background:rgba(22,17,15,.84);
            border-bottom:1px solid var(--line);
            color:var(--muted);
            font-size:13px;
        }
        .topbar-inner{
            min-height:38px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:8px 0;
        }
        .topbar-note{
            display:flex;
            align-items:center;
            gap:10px;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .topbar-note i{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(196,138,79,.15);
            flex:none;
        }
        .topbar-meta{
            color:var(--soft);
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:40;
            backdrop-filter:saturate(120%) blur(10px);
            background:rgba(18,14,12,.88);
            border-bottom:1px solid transparent;
            transition:box-shadow .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
        }
        .site-header.is-scrolled{
            box-shadow:0 10px 28px rgba(0,0,0,.22);
            border-bottom-color:var(--line);
            background:rgba(17,13,11,.95);
        }
        .header-inner{
            min-height:78px;
            display:flex;
            align-items:center;
            gap:18px;
            padding:14px 0;
        }
        .brand{
            display:flex;
            align-items:flex-start;
            gap:12px;
            min-width:0;
            flex:1 1 auto;
        }
        .brand-badge{
            width:42px;
            height:42px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:linear-gradient(145deg, rgba(196,138,79,.24), rgba(141,60,59,.18));
            border:1px solid rgba(224,181,110,.18);
            color:var(--accent-3);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
            font-weight:700;
            letter-spacing:.08em;
            flex:none;
        }
        .brand-text{
            min-width:0;
            display:flex;
            flex-direction:column;
            gap:4px;
        }
        .brand-name{
            font-size:18px;
            line-height:1.12;
            font-weight:800;
            letter-spacing:.02em;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{
            font-size:12px;
            color:var(--muted);
            letter-spacing:.14em;
            text-transform:uppercase;
        }
        .nav-toggle{
            display:none;
            width:46px;
            height:46px;
            border-radius:14px;
            background:var(--panel);
            border:1px solid var(--line);
            color:var(--text);
            align-items:center;
            justify-content:center;
            box-shadow:var(--shadow-soft);
        }
        .nav-toggle span{
            position:relative;
            width:18px;
            height:2px;
            background:currentColor;
            border-radius:2px;
            display:block;
        }
        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            position:absolute;
            left:0;
            width:18px;
            height:2px;
            background:currentColor;
            border-radius:2px;
        }
        .nav-toggle span::before{top:-6px}
        .nav-toggle span::after{top:6px}
        .site-nav{
            display:flex;
            align-items:center;
            gap:8px;
        }
        .site-nav a{
            position:relative;
            padding:10px 14px;
            color:var(--muted);
            border-radius:999px;
            font-weight:600;
            line-height:1;
            border:1px solid transparent;
        }
        .site-nav a::after{
            content:"";
            position:absolute;
            left:14px;
            right:14px;
            bottom:6px;
            height:1px;
            background:transparent;
            transform:scaleX(.2);
            transform-origin:center;
            transition:transform .25s var(--ease), background-color .25s var(--ease);
        }
        .site-nav a:hover,
        .site-nav a:focus-visible,
        .site-nav a.active{
            color:var(--text);
            background:rgba(255,245,230,.05);
            border-color:rgba(255,245,230,.06);
            transform:translateY(-1px);
        }
        .site-nav a.active::after,
        .site-nav a:hover::after,
        .site-nav a:focus-visible::after{
            background:var(--accent);
            transform:scaleX(1);
        }
        .header-cta{
            flex:none;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:46px;
            padding:0 18px;
            border-radius:14px;
            font-weight:700;
            letter-spacing:.02em;
            border:1px solid transparent;
            box-shadow:none;
            transition:transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), opacity .25s var(--ease);
        }
        .btn:hover,
        .btn:focus-visible{
            transform:translateY(-1px);
            box-shadow:var(--shadow-soft);
        }
        .btn:active{
            transform:translateY(0);
            box-shadow:none;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, #c98d4e 0%, #a5693e 100%);
            border-color:rgba(255,255,255,.08);
        }
        .btn-primary:hover,
        .btn-primary:focus-visible{
            color:#fff;
            background:linear-gradient(135deg, #d89d5d 0%, #b77747 100%);
        }
        .btn-secondary{
            color:var(--text);
            background:rgba(255,245,230,.04);
            border-color:var(--line-strong);
        }
        .btn-secondary:hover,
        .btn-secondary:focus-visible{
            color:#fff;
            background:rgba(255,245,230,.07);
            border-color:rgba(224,181,110,.24);
        }
        .btn-ghost{
            color:var(--text);
            background:transparent;
            border-color:var(--line);
        }
        .btn-ghost:hover,
        .btn-ghost:focus-visible{
            color:#fff;
            background:rgba(255,245,230,.05);
        }
        .btn-sm{
            min-height:40px;
            padding:0 15px;
            border-radius:12px;
            font-size:14px;
        }
        .main{
            position:relative;
            z-index:1;
            padding-bottom:22px;
        }
        .page-hero{
            position:relative;
            padding:32px 0 12px;
        }
        .page-hero .hero-shell{
            position:relative;
            overflow:hidden;
            border:1px solid var(--line);
            background:
                linear-gradient(135deg, rgba(31,24,20,.98) 0%, rgba(22,17,15,.92) 45%, rgba(22,17,15,.84) 100%);
            border-radius:calc(var(--radius) + 2px);
            box-shadow:var(--shadow);
        }
        .page-hero .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(110deg, rgba(14,10,8,.92) 0%, rgba(14,10,8,.78) 42%, rgba(14,10,8,.52) 100%),
                url('<?php echo cms_e($heroBack); ?>') center/cover no-repeat;
            opacity:.86;
        }
        .page-hero .hero-shell::after{
            content:"";
            position:absolute;
            inset:-2px;
            border-radius:inherit;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns:minmax(0,1.3fr) minmax(320px,.9fr);
            gap:22px;
            padding:28px;
            align-items:center;
        }
        .crumbs{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:8px;
            color:var(--muted);
            font-size:13px;
        }
        .crumbs a{
            color:#dfcfbf;
        }
        .crumbs span.sep{
            color:rgba(255,245,230,.24);
        }
        .hero-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:16px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid rgba(224,181,110,.18);
            background:rgba(196,138,79,.12);
            color:var(--accent-3);
            font-size:13px;
            font-weight:700;
            letter-spacing:.08em;
        }
        .hero-title{
            margin:16px 0 12px;
            font-size:clamp(30px, 4vw, 56px);
            line-height:1.08;
            letter-spacing:.01em;
            font-weight:900;
            max-width:12ch;
            text-wrap:balance;
        }
        .hero-title.small{
            max-width:none;
        }
        .hero-lead{
            margin:0;
            max-width:62ch;
            color:#e8ddd2;
            font-size:16px;
        }
        .hero-meta{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin:18px 0 0;
        }
        .meta-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(255,245,230,.05);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:13px;
        }
        .meta-pill b{
            color:var(--text);
            font-weight:700;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:22px;
        }
        .hero-visual{
            position:relative;
            min-height:320px;
            border-radius:var(--radius);
            overflow:hidden;
            border:1px solid rgba(255,245,230,.1);
            background:var(--panel);
            box-shadow:var(--shadow-soft);
        }
        .hero-visual img{
            width:100%;
            height:100%;
            object-fit:cover;
            min-height:320px;
        }
        .hero-visual::after{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(180deg, rgba(10,8,7,0) 36%, rgba(10,8,7,.68) 100%);
            pointer-events:none;
        }
        .visual-badge{
            position:absolute;
            left:16px;
            top:16px;
            z-index:1;
            padding:9px 12px;
            border-radius:999px;
            background:rgba(18,14,12,.78);
            border:1px solid rgba(255,245,230,.12);
            color:#fff;
            font-size:13px;
            font-weight:700;
            backdrop-filter:blur(8px);
        }
        .visual-card{
            position:absolute;
            right:16px;
            bottom:16px;
            z-index:1;
            width:min(290px, calc(100% - 32px));
            padding:16px;
            border-radius:18px;
            background:rgba(24,18,15,.86);
            border:1px solid rgba(255,245,230,.12);
            backdrop-filter:blur(10px);
            box-shadow:var(--shadow-soft);
        }
        .visual-card .vc-title{
            font-size:14px;
            font-weight:700;
            margin:0 0 6px;
        }
        .visual-card .vc-text{
            margin:0;
            color:var(--muted);
            font-size:13px;
        }
        .section-block{
            padding:18px 0 8px;
        }
        .section-head{
            display:flex;
            justify-content:space-between;
            align-items:flex-end;
            gap:16px;
            margin:0 0 18px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(22px, 2.2vw, 32px);
            line-height:1.15;
            font-weight:900;
            letter-spacing:.01em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:60ch;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:10px;
            font-size:12px;
            letter-spacing:.16em;
            color:var(--accent-3);
            text-transform:uppercase;
        }
        .eyebrow::before{
            content:"";
            width:18px;
            height:1px;
            background:rgba(224,181,110,.55);
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr);
            gap:var(--gap);
            align-items:start;
        }
        .card-surface{
            background:linear-gradient(180deg, rgba(35,27,23,.96), rgba(26,20,17,.98));
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
        }
        .article-card{
            padding:28px;
            overflow:hidden;
        }
        .article-meta-line{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:16px;
        }
        .article-intro{
            color:#e5dbd1;
            max-width:70ch;
            margin:0 0 22px;
        }
        .article-content{
            color:var(--text);
            font-size:16px;
            line-height:1.95;
            max-width:760px;
        }
        .article-content > *:first-child{margin-top:0}
        .article-content > *:last-child{margin-bottom:0}
        .article-content h2,
        .article-content h3{
            color:#fff;
            line-height:1.22;
            margin:1.8em 0 .75em;
            font-weight:800;
            letter-spacing:.01em;
        }
        .article-content h2{font-size:clamp(20px, 2.2vw, 28px)}
        .article-content h3{font-size:clamp(18px, 1.8vw, 22px)}
        .article-content p{
            margin:0 0 1em;
            color:#eadfd3;
        }
        .article-content a{
            color:#f0c57f;
            text-decoration:underline;
            text-decoration-color:rgba(240,197,127,.38);
            text-underline-offset:3px;
        }
        .article-content a:hover{
            color:#ffdca2;
            text-decoration-color:rgba(255,220,162,.7);
        }
        .article-content ul,
        .article-content ol{
            padding-left:1.2em;
            margin:0 0 1em;
            color:#eadfd3;
        }
        .article-content li{margin-bottom:.45em}
        .article-content strong{color:#fff}
        .article-content blockquote{
            margin:1.2em 0;
            padding:18px 18px 18px 20px;
            border-left:3px solid var(--accent);
            border-radius:16px;
            background:rgba(196,138,79,.08);
            color:#f0e7dd;
        }
        .article-content figure{
            margin:1.4em 0;
            border-radius:18px;
            overflow:hidden;
            border:1px solid rgba(255,245,230,.08);
            background:rgba(255,255,255,.02);
        }
        .article-content figure img{
            width:100%;
            height:auto;
            object-fit:cover;
        }
        .article-content figcaption{
            padding:10px 14px;
            font-size:13px;
            color:var(--muted);
            background:rgba(10,8,7,.38);
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.2em 0;
            overflow:hidden;
            border-radius:16px;
            display:block;
        }
        .article-content table thead,
        .article-content table tbody{
            display:table;
            width:100%;
            table-layout:fixed;
        }
        .article-content th,
        .article-content td{
            border-bottom:1px solid var(--line);
            padding:12px 14px;
            text-align:left;
            color:#eadfd3;
        }
        .article-content th{
            color:#fff;
            background:rgba(255,245,230,.03);
        }
        .article-content code{
            padding:.18em .45em;
            border-radius:8px;
            background:rgba(255,245,230,.08);
            color:#ffd9a6;
        }
        .article-content hr{
            border:0;
            border-top:1px solid var(--line);
            margin:1.6em 0;
        }
        .sidebar{
            display:grid;
            gap:var(--gap);
        }
        .side-card{
            padding:22px;
        }
        .side-title{
            margin:0 0 14px;
            font-size:18px;
            font-weight:800;
        }
        .side-text{
            margin:0 0 14px;
            color:var(--muted);
        }
        .info-list{
            display:grid;
            gap:10px;
        }
        .info-item{
            display:flex;
            align-items:flex-start;
            gap:12px;
            padding:12px 0;
            border-top:1px solid var(--line);
        }
        .info-item:first-child{border-top:0;padding-top:0}
        .info-item .dot{
            width:10px;
            height:10px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(196,138,79,.12);
            margin-top:7px;
            flex:none;
        }
        .info-item .txt{
            min-width:0;
        }
        .info-item .txt b{
            display:block;
            color:#fff;
            margin-bottom:3px;
        }
        .info-item .txt span{
            color:var(--muted);
            font-size:14px;
        }
        .cover-card{
            position:relative;
            overflow:hidden;
            min-height:200px;
            border-radius:var(--radius);
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .cover-card img{
            width:100%;
            height:100%;
            min-height:200px;
            object-fit:cover;
            transition:transform .45s var(--ease);
        }
        .cover-card:hover img{
            transform:scale(1.03);
        }
        .cover-card .cover-note{
            position:absolute;
            inset:auto 16px 16px 16px;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(20,15,13,.84);
            border:1px solid rgba(255,245,230,.12);
            color:#fff;
            backdrop-filter:blur(8px);
        }
        .latest-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:var(--gap);
        }
        .post-card{
            overflow:hidden;
            display:flex;
            flex-direction:column;
            min-height:100%;
        }
        .post-card:hover{
            transform:translateY(-3px);
            box-shadow:var(--shadow);
        }
        .post-media{
            position:relative;
            aspect-ratio:16/10;
            overflow:hidden;
            border-bottom:1px solid var(--line);
        }
        .post-media img{
            width:100%;
            height:100%;
            object-fit:cover;
            transition:transform .45s var(--ease);
        }
        .post-card:hover .post-media img{
            transform:scale(1.035);
        }
        .post-body{
            display:flex;
            flex-direction:column;
            gap:12px;
            padding:18px;
            flex:1 1 auto;
        }
        .post-title{
            margin:0;
            font-size:18px;
            line-height:1.3;
            font-weight:800;
            min-height:2.6em;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .post-summary{
            margin:0;
            color:var(--muted);
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
            min-height:4.8em;
        }
        .post-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:auto;
            align-items:center;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(255,245,230,.05);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:12px;
        }
        .tag.hot{
            color:var(--accent-3);
            background:rgba(196,138,79,.12);
            border-color:rgba(224,181,110,.18);
        }
        .post-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#fff;
            font-weight:700;
            margin-left:auto;
        }
        .post-link::after{
            content:"→";
            transition:transform .25s var(--ease);
        }
        .post-card:hover .post-link::after{
            transform:translateX(3px);
        }
        .faq-wrap{
            display:grid;
            gap:14px;
        }
        .faq-item{
            overflow:hidden;
            border-radius:18px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(30,23,20,.95), rgba(24,18,15,.98));
            box-shadow:var(--shadow-soft);
        }
        .faq-item summary{
            list-style:none;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:18px 20px;
            cursor:pointer;
            color:#fff;
            font-weight:800;
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary::after{
            content:"+";
            width:32px;
            height:32px;
            border-radius:10px;
            display:grid;
            place-items:center;
            background:rgba(255,245,230,.05);
            border:1px solid var(--line);
            color:var(--accent-3);
            flex:none;
            transition:transform .25s var(--ease), background-color .25s var(--ease);
        }
        .faq-item[open] summary{
            border-bottom:1px solid var(--line);
        }
        .faq-item[open] summary::after{
            content:"–";
            background:rgba(196,138,79,.12);
            transform:rotate(180deg);
        }
        .faq-content{
            padding:18px 20px 20px;
            color:var(--muted);
        }
        .cta-panel{
            position:relative;
            overflow:hidden;
            border-radius:calc(var(--radius) + 2px);
            border:1px solid rgba(224,181,110,.18);
            background:
                linear-gradient(135deg, rgba(141,60,59,.18) 0%, rgba(24,18,15,.94) 60%, rgba(196,138,79,.14) 100%);
            box-shadow:var(--shadow);
        }
        .cta-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:url('<?php echo cms_e($heroBack); ?>') center/cover no-repeat;
            opacity:.12;
            mix-blend-mode:screen;
        }
        .cta-inner{
            position:relative;
            padding:28px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .cta-inner h2{
            margin:0 0 8px;
            font-size:clamp(24px, 2.6vw, 36px);
            font-weight:900;
            line-height:1.15;
        }
        .cta-inner p{
            margin:0;
            color:#e7dbcf;
            max-width:58ch;
        }
        .cta-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            flex:none;
        }
        .feedback-grid{
            display:grid;
            grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
            gap:var(--gap);
            align-items:start;
        }
        .form-card{
            padding:24px;
        }
        .form-card form{
            display:grid;
            gap:14px;
        }
        .form-group{
            display:grid;
            gap:8px;
        }
        .form-group label{
            font-weight:700;
            color:#fff;
            font-size:14px;
        }
        .form-control{
            width:100%;
            min-height:48px;
            border-radius:14px;
            background:rgba(255,245,230,.04);
            border:1px solid var(--line);
            color:var(--text);
            padding:12px 14px;
            outline:none;
            box-shadow:none;
        }
        .form-control:focus{
            border-color:rgba(224,181,110,.3);
            box-shadow:0 0 0 4px rgba(196,138,79,.12);
            background:rgba(255,245,230,.06);
            color:var(--text);
        }
        textarea.form-control{
            min-height:138px;
            resize:vertical;
        }
        .form-help{
            color:var(--soft);
            font-size:13px;
        }
        .feedback-card{
            padding:24px;
            display:grid;
            gap:14px;
        }
        .feedback-card .note{
            padding:16px 18px;
            border-radius:18px;
            border:1px solid var(--line);
            background:rgba(255,245,230,.04);
            color:var(--muted);
        }
        .quick-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .quick-links a{
            min-height:40px;
            display:inline-flex;
            align-items:center;
            padding:0 14px;
            border-radius:999px;
            background:rgba(255,245,230,.05);
            border:1px solid var(--line);
            color:var(--text);
        }
        .quick-links a:hover{
            background:rgba(255,245,230,.08);
            border-color:rgba(224,181,110,.22);
        }
        .site-footer{
            margin-top:22px;
            position:relative;
            z-index:1;
            border-top:1px solid var(--line);
            background:linear-gradient(180deg, rgba(16,12,10,.66), rgba(12,9,8,.94));
        }
        .site-footer .container{
            padding:30px 0 22px;
        }
        .footer-grid{
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(180px,.65fr) minmax(240px,.8fr);
            gap:var(--gap);
            padding-bottom:20px;
        }
        .footer-brand p{
            margin:14px 0 0;
            color:var(--muted);
            max-width:40ch;
        }
        .footer-title{
            margin:0 0 14px;
            font-size:15px;
            letter-spacing:.08em;
            color:#fff;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            width:fit-content;
        }
        .footer-links a:hover,
        .footer-links a:focus-visible{
            color:#fff;
            transform:translateX(2px);
        }
        .footer-meta{
            display:grid;
            gap:10px;
            color:var(--muted);
        }
        .footer-line{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding-top:18px;
            border-top:1px solid var(--line);
            color:var(--soft);
            font-size:13px;
        }
        .empty-state{
            display:grid;
            place-items:center;
            min-height:280px;
            text-align:center;
            padding:34px 20px;
        }
        .empty-state .empty-icon{
            width:72px;
            height:72px;
            border-radius:22px;
            display:grid;
            place-items:center;
            margin-bottom:16px;
            background:rgba(196,138,79,.12);
            border:1px solid rgba(224,181,110,.18);
            color:var(--accent-3);
            font-size:28px;
            font-weight:800;
        }
        .empty-state h2{
            margin:0 0 10px;
            font-size:28px;
            font-weight:900;
        }
        .empty-state p{
            margin:0 0 18px;
            max-width:42ch;
            color:var(--muted);
        }
        .split-note{
            color:var(--muted);
            font-size:14px;
        }
        .pill-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:16px;
        }
        .pill{
            padding:8px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,245,230,.04);
            color:var(--muted);
            font-size:13px;
        }
        .pill strong{color:#fff}
        @media (max-width: 1024px){
            .hero-grid,
            .article-layout,
            .feedback-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .latest-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .hero-title{
                max-width:14ch;
            }
            .visual-card{
                width:min(320px, calc(100% - 32px));
            }
        }
        @media (max-width: 768px){
            .topbar{
                font-size:12px;
            }
            .topbar-inner{
                flex-direction:column;
                align-items:flex-start;
                gap:6px;
                padding:10px 0;
            }
            .header-inner{
                position:relative;
            }
            .nav-toggle{
                display:inline-flex;
                margin-left:auto;
            }
            .site-nav{
                position:absolute;
                left:0;
                right:0;
                top:calc(100% + 10px);
                display:none;
                flex-direction:column;
                align-items:stretch;
                gap:8px;
                padding:12px;
                border-radius:18px;
                background:rgba(24,18,15,.98);
                border:1px solid var(--line);
                box-shadow:var(--shadow);
            }
            .site-nav.is-open{
                display:flex;
            }
            .site-nav a{
                width:100%;
                min-height:44px;
                justify-content:center;
                padding:0 14px;
            }
            .header-cta{
                display:none;
            }
            .page-hero{
                padding-top:20px;
            }
            .hero-grid,
            .article-card,
            .side-card,
            .form-card,
            .feedback-card,
            .cta-inner{
                padding:20px;
            }
            .hero-grid{
                gap:18px;
            }
            .hero-title{
                max-width:none;
            }
            .hero-visual{
                min-height:260px;
            }
            .hero-visual img{
                min-height:260px;
            }
            .latest-grid{
                grid-template-columns:1fr;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .cta-inner{
                flex-direction:column;
                align-items:flex-start;
            }
            .footer-line{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .header-inner{
                min-height:72px;
                gap:12px;
            }
            .brand-badge{
                width:38px;
                height:38px;
                border-radius:12px;
            }
            .brand-name{
                font-size:16px;
            }
            .hero-title{
                font-size:clamp(28px, 8vw, 38px);
            }
            .hero-actions,
            .cta-actions{
                width:100%;
            }
            .hero-actions .btn,
            .cta-actions .btn,
            .form-card .btn,
            .empty-state .btn{
                width:100%;
            }
            .meta-pill,
            .tag,
            .pill{
                font-size:12px;
            }
            .post-body{
                padding:16px;
            }
            .faq-item summary,
            .faq-content{
                padding-left:16px;
                padding-right:16px;
            }
        }

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