/* roulang page: index */
:root{
            --bg:#0b0c0f;
            --bg-soft:#101319;
            --panel:#141821;
            --panel-2:#191e29;
            --panel-3:#1f2532;
            --line:rgba(255,255,255,.09);
            --line-strong:rgba(255,255,255,.14);
            --text:#f5f7fb;
            --muted:#a8b0bf;
            --soft:#798296;
            --accent:#ffb74d;
            --accent-2:#ff7e54;
            --accent-soft:rgba(255,183,77,.14);
            --good:#5be49b;
            --danger:#ff6b6b;
            --shadow:0 26px 70px rgba(0,0,0,.34);
            --shadow-soft:0 16px 40px rgba(0,0,0,.22);
            --radius-xl:30px;
            --radius-lg:22px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1180px;
            --gap:24px;
            --transition:180ms cubic-bezier(.2,.8,.2,1);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(255,183,77,.10), transparent 34%),
                radial-gradient(circle at top right, rgba(255,126,84,.08), transparent 28%),
                linear-gradient(180deg, #090a0d 0%, #0b0c0f 36%, #0a0b0e 100%);
            line-height:1.7;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }

        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        ::selection{background:var(--accent);color:#171717}
        :focus-visible{outline:3px solid rgba(255,183,77,.55);outline-offset:3px}

        .skip-link{
            position:absolute;
            left:-9999px;
            top:10px;
            z-index:9999;
            padding:10px 14px;
            border-radius:999px;
            background:var(--accent);
            color:#191919;
            font-weight:700;
        }
        .skip-link:focus{left:12px}

        .top-strip{
            border-bottom:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:13px;
            letter-spacing:.01em;
        }
        .top-strip .inner{
            max-width:var(--container);
            margin:0 auto;
            padding:10px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .top-strip .hint{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .top-strip .dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--good);
            box-shadow:0 0 0 6px rgba(91,228,155,.12);
            flex:0 0 auto;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(130%) blur(18px);
            background:rgba(10,11,14,.68);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .header-inner{
            max-width:var(--container);
            margin:0 auto;
            padding:16px 20px;
            display:grid;
            grid-template-columns:1fr auto 1fr;
            align-items:center;
            gap:18px;
        }
        .brand{
            justify-self:center;
            display:inline-flex;
            align-items:center;
            gap:12px;
            padding:10px 16px;
            border:1px solid var(--line);
            border-radius:999px;
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            box-shadow:var(--shadow-soft);
            font-weight:800;
            letter-spacing:.02em;
            line-height:1;
            white-space:nowrap;
        }
        .brand::before{
            content:"";
            width:12px;
            height:12px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 0 6px rgba(255,183,77,.12);
            flex:0 0 auto;
        }

        .nav-group{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
        }
        .nav-left{justify-content:flex-start}
        .nav-right{justify-content:flex-end}
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            color:var(--muted);
            font-size:14px;
            font-weight:600;
            transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
            border:1px solid transparent;
        }
        .nav-link:hover{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.07);
            transform:translateY(-1px);
        }
        .nav-link.active{
            color:var(--text);
            background:rgba(255,183,77,.1);
            border-color:rgba(255,183,77,.24);
        }
        .nav-link.nav-cta{
            color:#191919;
            background:linear-gradient(135deg, var(--accent), #ffd58c);
            border-color:transparent;
            box-shadow:0 10px 25px rgba(255,183,77,.18);
        }
        .nav-link.nav-cta:hover{
            background:linear-gradient(135deg, #ffc864, #ffe1aa);
            color:#161616;
        }

        .menu-toggle{
            display:none;
            justify-self:end;
            align-items:center;
            gap:10px;
            min-height:44px;
            padding:0 14px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.04);
            color:var(--text);
            cursor:pointer;
            transition:transform var(--transition), background var(--transition), border-color var(--transition);
        }
        .menu-toggle:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.16);
        }

        .mobile-menu{
            display:none;
            max-width:var(--container);
            margin:0 auto;
            padding:0 20px 16px;
        }
        .mobile-menu-panel{
            border:1px solid var(--line);
            border-radius:20px;
            background:rgba(18,20,27,.96);
            box-shadow:var(--shadow-soft);
            padding:10px;
            display:grid;
            gap:8px;
        }
        .mobile-menu-panel a{
            min-height:44px;
            border-radius:14px;
            padding:0 14px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            color:var(--muted);
            border:1px solid transparent;
        }
        .mobile-menu-panel a:hover,
        .mobile-menu-panel a:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.08);
        }
        .mobile-menu-panel a span{
            opacity:.72;
            font-size:12px;
        }

        .page-main{
            padding:28px 0 70px;
        }

        .container{
            max-width:var(--container);
            margin:0 auto;
            padding:0 20px;
        }

        .panel{
            margin-bottom:24px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.02));
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
            overflow:hidden;
        }

        .hero{
            position:relative;
            padding:28px;
        }
        .hero::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(135deg, rgba(255,183,77,.06), transparent 34%),
                radial-gradient(circle at 80% 18%, rgba(255,126,84,.10), transparent 24%);
            pointer-events:none;
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
            gap:24px;
            align-items:stretch;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid rgba(255,183,77,.25);
            background:rgba(255,183,77,.08);
            color:#ffd895;
            font-size:13px;
            font-weight:700;
            letter-spacing:.02em;
        }
        .eyebrow .mini-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 6px rgba(255,183,77,.12);
        }
        .hero h1{
            margin:18px 0 12px;
            font-size:clamp(2.35rem, 4.8vw, 4.7rem);
            line-height:1.04;
            letter-spacing:-.04em;
        }
        .hero .lead{
            max-width:720px;
            margin:0;
            color:var(--muted);
            font-size:clamp(1rem, 1.35vw, 1.12rem);
        }
        .hero-actions{
            display:flex;
            gap:12px;
            flex-wrap:wrap;
            margin-top:22px;
        }

        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            min-height:48px;
            padding:0 18px;
            border-radius:14px;
            border:1px solid transparent;
            font-weight:700;
            transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
            cursor:pointer;
            user-select:none;
        }
        .btn:hover{transform:translateY(-2px)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            color:#161616;
            background:linear-gradient(135deg, var(--accent), #ffd88e);
            box-shadow:0 14px 30px rgba(255,183,77,.18);
        }
        .btn-primary:hover{
            background:linear-gradient(135deg, #ffc95f, #ffe2ae);
            color:#111;
        }
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.08);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.08);
            border-color:rgba(255,255,255,.16);
        }

        .hero-badges{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color:var(--muted);
            font-size:13px;
        }
        .chip strong{color:var(--text)}
        .chip .bar{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
        }

        .hero-stats{
            margin-top:24px;
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:14px;
        }
        .stat-card{
            padding:16px;
            border-radius:20px;
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            min-height:102px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            transition:transform var(--transition), border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .stat-card:hover{
            transform:translateY(-3px);
            border-color:rgba(255,183,77,.22);
            box-shadow:0 18px 36px rgba(0,0,0,.24);
            background:linear-gradient(180deg, rgba(255,183,77,.08), rgba(255,255,255,.03));
        }
        .stat-value{
            font-size:1.45rem;
            font-weight:800;
            letter-spacing:-.03em;
        }
        .stat-label{
            color:var(--muted);
            font-size:13px;
        }

        .hero-visual{
            display:grid;
            gap:14px;
            align-content:stretch;
        }
        .visual-card{
            border-radius:24px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .visual-main{
            padding:22px;
            min-height:280px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            position:relative;
        }
        .visual-main::before{
            content:"";
            position:absolute;
            inset:auto -8% -12% auto;
            width:220px;
            height:220px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(255,183,77,.16), transparent 68%);
            filter:blur(6px);
        }
        .visual-main h2{
            margin:14px 0 8px;
            font-size:1.6rem;
            line-height:1.18;
            letter-spacing:-.03em;
        }
        .visual-main p{
            margin:0;
            color:var(--muted);
            max-width:32ch;
        }
        .film-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:10px;
            margin-top:18px;
        }
        .film-tile{
            aspect-ratio:4/5;
            border-radius:18px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
                linear-gradient(160deg, rgba(255,183,77,.22), rgba(255,126,84,.14));
            border:1px solid rgba(255,255,255,.08);
            position:relative;
            overflow:hidden;
        }
        .film-tile:nth-child(2){
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
                linear-gradient(160deg, rgba(132,172,255,.16), rgba(255,126,84,.10));
        }
        .film-tile:nth-child(3){
            background:
                linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.01)),
                linear-gradient(160deg, rgba(91,228,155,.14), rgba(255,183,77,.14));
        }
        .film-tile span{
            position:absolute;
            left:12px;
            right:12px;
            bottom:12px;
            padding:8px 10px;
            border-radius:12px;
            background:rgba(11,12,15,.66);
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
            font-size:12px;
            font-weight:700;
            backdrop-filter:blur(10px);
        }
        .visual-note{
            padding:16px 18px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:14px;
        }
        .visual-note strong{
            color:var(--text);
            display:block;
            margin-bottom:4px;
        }
        .visual-note .arrow{
            color:var(--accent);
            font-size:1.2rem;
            flex:0 0 auto;
        }

        .section{
            padding:28px;
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:22px;
        }
        .section-title{
            margin:0;
            font-size:clamp(1.55rem, 2.2vw, 2.2rem);
            line-height:1.12;
            letter-spacing:-.03em;
        }
        .section-lead{
            margin:8px 0 0;
            color:var(--muted);
            max-width:72ch;
            font-size:15px;
        }
        .section-note{
            color:var(--soft);
            font-size:13px;
            white-space:nowrap;
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:14px;
        }
        .feature-card{
            padding:20px;
            border-radius:22px;
            background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.07);
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .feature-card:hover{
            transform:translateY(-3px);
            border-color:rgba(255,183,77,.2);
            box-shadow:0 18px 36px rgba(0,0,0,.22);
        }
        .feature-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:10px;
        }
        .feature-index{
            width:38px;
            height:38px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:rgba(255,183,77,.11);
            color:#ffd895;
            font-weight:800;
            border:1px solid rgba(255,183,77,.18);
        }
        .feature-tag{
            font-size:12px;
            color:var(--muted);
            padding:6px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.06);
        }
        .feature-card h3{
            margin:0 0 8px;
            font-size:1.08rem;
            letter-spacing:-.02em;
        }
        .feature-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }

        .news-layout{
            display:grid;
            grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
            gap:16px;
        }
        .news-list{
            display:grid;
            gap:12px;
        }
        .news-item{
            display:grid;
            grid-template-columns:1fr auto;
            gap:10px;
            padding:18px 18px 16px;
            border-radius:20px;
            background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.07);
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition);
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:rgba(255,183,77,.22);
            box-shadow:0 18px 36px rgba(0,0,0,.24);
            background:linear-gradient(180deg, rgba(255,183,77,.06), rgba(255,255,255,.02));
        }
        .news-main{
            min-width:0;
        }
        .news-meta{
            display:flex;
            gap:10px;
            align-items:center;
            flex-wrap:wrap;
            margin-bottom:8px;
            color:var(--muted);
            font-size:12px;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(255,183,77,.12);
            color:#ffd894;
            border:1px solid rgba(255,183,77,.20);
            font-weight:700;
        }
        .news-item h3{
            margin:0 0 8px;
            font-size:1.06rem;
            line-height:1.38;
            letter-spacing:-.02em;
        }
        .news-item p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .news-side{
            display:grid;
            gap:12px;
            align-content:start;
        }
        .side-card{
            padding:20px;
            border-radius:22px;
            background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.07);
        }
        .side-card h3{
            margin:0 0 10px;
            font-size:1.05rem;
        }
        .side-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .mini-list{
            list-style:none;
            margin:14px 0 0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .mini-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--muted);
            font-size:14px;
        }
        .mini-list li::before{
            content:"";
            width:8px;
            height:8px;
            margin-top:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 6px rgba(255,183,77,.10);
            flex:0 0 auto;
        }
        .empty-state{
            padding:22px;
            border-radius:20px;
            border:1px dashed rgba(255,255,255,.16);
            color:var(--muted);
            text-align:center;
            background:rgba(255,255,255,.02);
        }
        .news-actions{
            margin-top:14px;
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }

        .library-track{
            display:flex;
            gap:14px;
            overflow-x:auto;
            padding-bottom:6px;
            scroll-snap-type:x proximity;
        }
        .library-track::-webkit-scrollbar{height:10px}
        .library-track::-webkit-scrollbar-track{background:rgba(255,255,255,.04);border-radius:999px}
        .library-track::-webkit-scrollbar-thumb{background:rgba(255,183,77,.35);border-radius:999px}
        .poster-card{
            flex:0 0 240px;
            scroll-snap-align:start;
            border-radius:24px;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
            box-shadow:var(--shadow-soft);
            transition:transform var(--transition), border-color var(--transition), box-shadow var(--transition);
        }
        .poster-card:hover{
            transform:translateY(-3px);
            border-color:rgba(255,183,77,.22);
            box-shadow:0 20px 38px rgba(0,0,0,.24);
        }
        .poster-art{
            height:270px;
            padding:18px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:
                radial-gradient(circle at top right, rgba(255,183,77,.24), transparent 36%),
                linear-gradient(160deg, rgba(23,28,39,.92), rgba(255,126,84,.14));
            position:relative;
        }
        .poster-card:nth-child(2) .poster-art{
            background:
                radial-gradient(circle at top right, rgba(91,228,155,.22), transparent 36%),
                linear-gradient(160deg, rgba(23,28,39,.92), rgba(91,228,155,.12));
        }
        .poster-card:nth-child(3) .poster-art{
            background:
                radial-gradient(circle at top right, rgba(132,172,255,.22), transparent 36%),
                linear-gradient(160deg, rgba(23,28,39,.92), rgba(132,172,255,.12));
        }
        .poster-card:nth-child(4) .poster-art{
            background:
                radial-gradient(circle at top right, rgba(255,126,84,.22), transparent 36%),
                linear-gradient(160deg, rgba(23,28,39,.92), rgba(255,126,84,.12));
        }
        .poster-card:nth-child(5) .poster-art{
            background:
                radial-gradient(circle at top right, rgba(255,183,77,.22), transparent 36%),
                linear-gradient(160deg, rgba(23,28,39,.92), rgba(255,183,77,.10));
        }
        .poster-kicker{
            display:inline-flex;
            align-items:center;
            align-self:flex-start;
            min-height:28px;
            padding:0 10px;
            border-radius:999px;
            background:rgba(11,12,15,.58);
            border:1px solid rgba(255,255,255,.10);
            color:#fff;
            font-size:12px;
            font-weight:700;
            backdrop-filter:blur(10px);
        }
        .poster-art h3{
            margin:0;
            font-size:1.28rem;
            line-height:1.18;
            letter-spacing:-.03em;
            max-width:7ch;
        }
        .poster-art p{
            margin:8px 0 0;
            color:rgba(245,247,251,.78);
            font-size:13px;
            max-width:18ch;
        }
        .poster-foot{
            padding:16px;
            display:grid;
            gap:10px;
        }
        .poster-foot .meta{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color:var(--muted);
            font-size:12px;
        }
        .poster-foot .cta{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:40px;
            border-radius:12px;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:var(--text);
            font-weight:700;
        }

        .compare-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
        }
        .compare-card{
            padding:22px;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.07);
            background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
        }
        .compare-card h3{
            margin:0 0 10px;
            font-size:1.08rem;
        }
        .compare-card .desc{
            margin:0 0 16px;
            color:var(--muted);
            font-size:14px;
        }
        .compare-list{
            display:grid;
            gap:12px;
        }
        .compare-row{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:10px;
            align-items:flex-start;
            padding-top:12px;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .compare-row:first-child{
            border-top:none;
            padding-top:0;
        }
        .mark{
            width:22px;
            height:22px;
            border-radius:50%;
            display:grid;
            place-items:center;
            font-size:12px;
            font-weight:800;
            flex:0 0 auto;
        }
        .mark.bad{
            background:rgba(255,107,107,.14);
            color:#ff9696;
            border:1px solid rgba(255,107,107,.24);
        }
        .mark.good{
            background:rgba(91,228,155,.12);
            color:#7ef0b0;
            border:1px solid rgba(91,228,155,.22);
        }
        .compare-row strong{
            display:block;
            margin-bottom:2px;
        }
        .compare-row span{
            color:var(--muted);
            font-size:14px;
        }

        .faq-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        details.faq-item{
            padding:0;
            border-radius:20px;
            border:1px solid rgba(255,255,255,.07);
            background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
            overflow:hidden;
        }
        details.faq-item[open]{
            border-color:rgba(255,183,77,.2);
            box-shadow:0 18px 36px rgba(0,0,0,.22);
        }
        details.faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            outline:none;
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        .faq-q{
            line-height:1.35;
        }
        .faq-icon{
            width:30px;
            height:30px;
            border-radius:10px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.05);
            border:1px solid rgba(255,255,255,.08);
            color:var(--accent);
            transition:transform var(--transition), background var(--transition);
            flex:0 0 auto;
        }
        details.faq-item[open] .faq-icon{
            transform:rotate(45deg);
            background:rgba(255,183,77,.12);
        }
        .faq-content{
            padding:0 20px 18px;
            color:var(--muted);
            font-size:14px;
            border-top:1px solid rgba(255,255,255,.06);
            margin-top:-1px;
        }

        .contact-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) 320px;
            gap:16px;
            align-items:start;
        }
        .form-card,
        .contact-note{
            padding:22px;
            border-radius:24px;
            border:1px solid rgba(255,255,255,.07);
            background:linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
        }
        .form-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
            margin-bottom:14px;
        }
        .field{
            display:grid;
            gap:8px;
        }
        .field label{
            color:var(--text);
            font-size:14px;
            font-weight:700;
        }
        .field input,
        .field textarea{
            width:100%;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(8,9,12,.55);
            color:var(--text);
            border-radius:16px;
            padding:14px 15px;
            transition:border-color var(--transition), background var(--transition), box-shadow var(--transition);
        }
        .field input::placeholder,
        .field textarea::placeholder{color:#6f7686}
        .field input:focus,
        .field textarea:focus{
            border-color:rgba(255,183,77,.36);
            box-shadow:0 0 0 4px rgba(255,183,77,.10);
            background:rgba(10,12,15,.72);
            outline:none;
        }
        .field textarea{
            min-height:132px;
            resize:vertical;
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-top:14px;
        }
        .form-tip{
            color:var(--muted);
            font-size:13px;
        }
        .contact-note h3{
            margin:0 0 10px;
            font-size:1.1rem;
        }
        .contact-note p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .contact-bullets{
            list-style:none;
            margin:16px 0 0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .contact-bullets li{
            padding:12px 12px 12px 14px;
            border-radius:16px;
            background:rgba(255,255,255,.035);
            border:1px solid rgba(255,255,255,.06);
            color:var(--muted);
            font-size:14px;
        }
        .contact-bullets strong{color:var(--text)}

        .site-footer{
            margin-top:24px;
            padding:30px 0 42px;
            border-top:1px solid var(--line);
            background:rgba(255,255,255,.015);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr .8fr 1fr;
            gap:18px;
            align-items:start;
        }
        .footer-brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            font-weight:800;
            font-size:1.05rem;
            margin-bottom:12px;
        }
        .footer-brand::before{
            content:"";
            width:10px;
            height:10px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 0 6px rgba(255,183,77,.12);
        }
        .footer-col h4{
            margin:0 0 12px;
            font-size:1rem;
        }
        .footer-col p,
        .footer-col a,
        .footer-col li{
            color:var(--muted);
            font-size:14px;
        }
        .footer-links{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .footer-links a{
            transition:color var(--transition), transform var(--transition);
            display:inline-flex;
            align-items:center;
            gap:8px;
        }
        .footer-links a:hover{
            color:var(--text);
            transform:translateX(2px);
        }
        .footer-meta{
            margin-top:20px;
            padding-top:16px;
            border-top:1px solid rgba(255,255,255,.06);
            display:flex;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            color:var(--soft);
            font-size:13px;
        }

        .sticky-cta{
            position:fixed;
            left:50%;
            bottom:18px;
            transform:translateX(-50%);
            z-index:900;
            width:min(1040px, calc(100% - 24px));
            padding:12px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(15,17,23,.82);
            backdrop-filter:blur(18px);
            box-shadow:0 20px 50px rgba(0,0,0,.35);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
        }
        .sticky-cta .copy{
            min-width:0;
        }
        .sticky-cta .copy strong{
            display:block;
            font-size:15px;
            margin-bottom:2px;
        }
        .sticky-cta .copy span{
            color:var(--muted);
            font-size:13px;
        }
        .sticky-cta .actions{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .sticky-cta .actions .btn{
            min-height:42px;
            padding:0 14px;
            border-radius:12px;
        }

        .is-hidden{display:none !important;}

        @media (max-width: 1100px){
            .hero-grid,
            .news-layout,
            .contact-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .hero-stats{grid-template-columns:repeat(2, minmax(0,1fr))}
            .feature-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
            .faq-grid{grid-template-columns:1fr}
            .compare-grid{grid-template-columns:1fr}
            .header-inner{
                grid-template-columns:auto 1fr auto;
            }
            .nav-left,.nav-right{display:none}
            .menu-toggle{display:inline-flex}
            .mobile-menu.is-open{display:block}
            .brand{justify-self:center}
            .section-note{white-space:normal}
        }

        @media (max-width: 768px){
            .top-strip .inner{
                padding:9px 16px;
                font-size:12px;
            }
            .header-inner,
            .container{
                padding-left:16px;
                padding-right:16px;
            }
            .site-main{padding-top:18px}
            .hero,
            .section{
                padding:20px 16px;
            }
            .hero h1{font-size:clamp(2rem, 9vw, 3rem)}
            .hero-stats{grid-template-columns:1fr 1fr}
            .feature-grid{grid-template-columns:1fr}
            .form-row{grid-template-columns:1fr}
            .poster-card{flex-basis:220px}
            .sticky-cta{display:none}
        }

        @media (max-width: 520px){
            .top-strip .inner{
                align-items:flex-start;
                flex-direction:column;
            }
            .brand{
                padding:9px 12px;
                font-size:14px;
            }
            .hero-actions,
            .news-actions,
            .form-actions{
                flex-direction:column;
            }
            .hero-actions .btn,
            .news-actions .btn,
            .form-actions .btn{
                width:100%;
            }
            .hero-stats{grid-template-columns:1fr}
            .stat-card{min-height:92px}
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .section-note{
                font-size:12px;
            }
            .news-item{
                grid-template-columns:1fr;
            }
            .poster-card{
                flex-basis:86vw;
            }
            .visual-main{
                min-height:250px;
            }
            .film-grid{
                grid-template-columns:1fr 1fr 1fr;
            }
        }

/* roulang page: article */
:root{
            --bg:#0b0c0f;
            --bg-soft:#101319;
            --panel:#141821;
            --panel-2:#191e29;
            --panel-3:#1f2532;
            --line:rgba(255,255,255,.09);
            --line-strong:rgba(255,255,255,.14);
            --text:#f5f7fb;
            --muted:#a8b0bf;
            --soft:#798296;
            --accent:#ffb74d;
            --accent-2:#ff7e54;
            --accent-soft:rgba(255,183,77,.14);
            --good:#5be49b;
            --danger:#ff6b6b;
            --shadow:0 26px 70px rgba(0,0,0,.34);
            --shadow-soft:0 16px 40px rgba(0,0,0,.22);
            --radius-xl:30px;
            --radius-lg:22px;
            --radius-md:16px;
            --radius-sm:12px;
            --container:1180px;
            --gap:24px;
            --transition:180ms cubic-bezier(.2,.8,.2,1);
        }
        *,*::before,*::after{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at top left, rgba(255,183,77,.10), transparent 34%),
                radial-gradient(circle at top right, rgba(255,126,84,.08), transparent 28%),
                linear-gradient(180deg, #090a0d 0%, #0b0c0f 36%, #0a0b0e 100%);
            line-height:1.7;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
            overflow-x:hidden;
        }
        ::selection{background:rgba(255,183,77,.25);color:var(--text)}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{background:none;border:0;padding:0}
        :focus{outline:none}
        :focus-visible{
            outline:2px solid rgba(255,183,77,.7);
            outline-offset:3px;
        }

        .container{
            width:min(var(--container), calc(100% - 40px));
            margin-inline:auto;
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:saturate(130%) blur(18px);
            background:rgba(10,11,14,.68);
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .header-inner{
            max-width:var(--container);
            margin:0 auto;
            padding:16px 20px;
            display:grid;
            grid-template-columns:1fr auto 1fr;
            align-items:center;
            gap:18px;
        }
        .brand{
            justify-self:center;
            display:inline-flex;
            align-items:center;
            gap:12px;
            padding:10px 16px;
            border:1px solid var(--line);
            border-radius:999px;
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            box-shadow:var(--shadow-soft);
            font-weight:800;
            letter-spacing:.02em;
            line-height:1;
            white-space:nowrap;
        }
        .brand::before{
            content:"";
            width:12px;
            height:12px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 0 6px rgba(255,183,77,.12);
            flex:0 0 auto;
        }
        .nav-group{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
        }
        .nav-left{justify-content:flex-start}
        .nav-right{justify-content:flex-end}
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            color:var(--muted);
            font-size:14px;
            font-weight:600;
            transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
            border:1px solid transparent;
        }
        .nav-link:hover{
            color:var(--text);
            background:rgba(255,255,255,.04);
            border-color:rgba(255,255,255,.07);
            transform:translateY(-1px);
        }
        .nav-link.active{
            color:var(--text);
            background:rgba(255,183,77,.1);
            border-color:rgba(255,183,77,.24);
        }
        .nav-link.nav-cta{
            color:#191919;
            background:linear-gradient(135deg, var(--accent), #ffd58c);
            border-color:transparent;
            box-shadow:0 10px 25px rgba(255,183,77,.18);
        }
        .nav-link.nav-cta:hover{
            background:linear-gradient(135deg, #ffc864, #ffe1aa);
            color:#161616;
        }
        .menu-toggle{
            display:none;
            justify-self:end;
            align-items:center;
            gap:10px;
            min-height:44px;
            padding:0 14px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.04);
            color:var(--text);
            cursor:pointer;
            transition:transform var(--transition), background var(--transition), border-color var(--transition);
        }
        .menu-toggle:hover{
            transform:translateY(-1px);
            background:rgba(255,255,255,.07);
            border-color:rgba(255,255,255,.16);
        }
        .mobile-menu{
            display:none;
            max-width:var(--container);
            margin:0 auto;
            padding:0 20px 16px;
        }
        .mobile-menu.is-open{display:block}
        .mobile-menu-panel{
            border:1px solid var(--line);
            border-radius:20px;
            background:rgba(18,20,27,.96);
            box-shadow:var(--shadow-soft);
            padding:10px;
            display:grid;
            gap:8px;
        }
        .mobile-menu-panel a{
            min-height:44px;
            border-radius:14px;
            padding:0 14px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            color:var(--muted);
            border:1px solid transparent;
            transition:background var(--transition), color var(--transition), border-color var(--transition);
        }
        .mobile-menu-panel a:hover,
        .mobile-menu-panel a:focus-visible{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.08);
        }

        .page-main{
            padding:28px 0 72px;
        }
        .section{
            margin-top:26px;
        }

        .article-hero{
            position:relative;
            overflow:hidden;
            padding:26px;
            border:1px solid var(--line);
            border-radius:var(--radius-xl);
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
                radial-gradient(circle at top right, rgba(255,126,84,.08), transparent 26%),
                linear-gradient(180deg, rgba(20,24,33,.96), rgba(14,16,21,.94));
            box-shadow:var(--shadow);
        }
        .article-hero::after{
            content:"";
            position:absolute;
            inset:auto -8% -36% auto;
            width:320px;
            height:320px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(255,183,77,.12), transparent 68%);
            pointer-events:none;
            filter:blur(3px);
        }
        .article-hero-inner{
            position:relative;
            z-index:1;
            display:grid;
            gap:18px;
        }
        .breadcrumbs{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
            color:var(--muted);
            font-size:13px;
        }
        .breadcrumbs a{
            color:var(--soft);
            transition:color var(--transition);
        }
        .breadcrumbs a:hover{color:var(--text)}
        .breadcrumbs .sep{opacity:.5}
        .eyebrow{
            display:inline-flex;
            align-items:center;
            width:max-content;
            gap:8px;
            min-height:30px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid rgba(255,183,77,.24);
            color:#ffd8a0;
            background:rgba(255,183,77,.08);
            font-size:12px;
            font-weight:700;
            letter-spacing:.04em;
            text-transform:uppercase;
        }
        .article-hero h1{
            margin:0;
            font-size:clamp(30px, 4.2vw, 56px);
            line-height:1.1;
            letter-spacing:-.03em;
            max-width:12.5em;
        }
        .hero-desc{
            margin:0;
            max-width:72ch;
            color:var(--muted);
            font-size:16px;
        }
        .hero-meta{
            display:flex;
            gap:10px;
            flex-wrap:wrap;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            min-height:34px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:13px;
            line-height:1;
            transition:transform var(--transition), border-color var(--transition), background var(--transition), color var(--transition);
        }
        .chip strong{
            color:var(--text);
            font-weight:700;
            margin-left:4px;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:46px;
            padding:0 18px;
            border-radius:14px;
            font-size:14px;
            font-weight:700;
            letter-spacing:.01em;
            border:1px solid transparent;
            cursor:pointer;
            transition:transform var(--transition), background var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition);
            will-change:transform;
            user-select:none;
        }
        .btn:hover{
            transform:translateY(-1px);
        }
        .btn:active{
            transform:translateY(0);
        }
        .btn-primary{
            color:#20180a;
            background:linear-gradient(135deg, var(--accent), #ffd58c);
            box-shadow:0 12px 28px rgba(255,183,77,.20);
        }
        .btn-primary:hover{
            color:#161616;
            background:linear-gradient(135deg, #ffc864, #ffe0a5);
        }
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:rgba(255,255,255,.10);
        }
        .btn-secondary:hover{
            background:rgba(255,255,255,.06);
            border-color:rgba(255,255,255,.16);
        }
        .btn-ghost{
            color:var(--muted);
            border-color:rgba(255,255,255,.08);
            background:transparent;
        }
        .btn-ghost:hover{
            color:var(--text);
            border-color:rgba(255,255,255,.16);
            background:rgba(255,255,255,.04);
        }

        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.3fr) minmax(290px,.7fr);
            gap:22px;
            align-items:stretch;
            margin-top:6px;
        }
        .hero-stack,
        .aside-card,
        .content-card,
        .bottom-card{
            border:1px solid var(--line);
            border-radius:var(--radius-lg);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
            box-shadow:var(--shadow-soft);
        }
        .hero-stack{
            padding:18px;
            display:grid;
            gap:14px;
        }
        .stat-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:12px;
        }
        .stat-card{
            padding:14px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
            transition:transform var(--transition), border-color var(--transition), background var(--transition);
        }
        .stat-card:hover{
            transform:translateY(-2px);
            border-color:rgba(255,183,77,.22);
            background:linear-gradient(180deg, rgba(255,183,77,.08), rgba(255,255,255,.02));
        }
        .stat-card .label{
            color:var(--muted);
            font-size:12px;
            margin-bottom:8px;
        }
        .stat-card .value{
            font-size:18px;
            font-weight:800;
            line-height:1.2;
        }
        .stat-card .hint{
            margin-top:6px;
            color:var(--soft);
            font-size:12px;
        }
        .mini-quote{
            padding:18px;
            border-radius:20px;
            border:1px solid rgba(255,183,77,.16);
            background:
                linear-gradient(180deg, rgba(255,183,77,.09), rgba(255,255,255,.02)),
                radial-gradient(circle at top right, rgba(255,126,84,.09), transparent 32%);
        }
        .mini-quote .quote-label{
            color:#ffdca8;
            font-size:12px;
            font-weight:700;
            letter-spacing:.04em;
            margin-bottom:10px;
        }
        .mini-quote p{
            margin:0;
            color:var(--text);
            font-size:15px;
            line-height:1.75;
        }
        .mini-quote .quote-sub{
            margin-top:10px;
            color:var(--muted);
            font-size:13px;
        }

        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.32fr) minmax(280px,.68fr);
            gap:24px;
            align-items:start;
            margin-top:24px;
        }
        .content-card{
            padding:24px;
            overflow:hidden;
        }
        .content-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:18px;
            padding-bottom:18px;
            margin-bottom:22px;
            border-bottom:1px solid rgba(255,255,255,.08);
        }
        .content-head h2{
            margin:0;
            font-size:22px;
            line-height:1.25;
            letter-spacing:-.02em;
        }
        .content-head p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            max-width:40ch;
        }
        .article-body{
            font-size:16px;
            line-height:1.92;
            color:var(--text);
            word-break:break-word;
        }
        .article-body > *:first-child{margin-top:0}
        .article-body > * + *{margin-top:1.1em}
        .article-body h2,
        .article-body h3,
        .article-body h4{
            line-height:1.35;
            letter-spacing:-.02em;
            margin:1.7em 0 .7em;
        }
        .article-body h2{font-size:24px}
        .article-body h3{font-size:20px}
        .article-body h4{font-size:18px}
        .article-body p{
            margin:0;
            color:#e8ebf2;
        }
        .article-body a{
            color:#ffd08b;
            text-decoration:underline;
            text-underline-offset:3px;
            text-decoration-thickness:1px;
            transition:color var(--transition);
        }
        .article-body a:hover{color:#ffe0b0}
        .article-body ul,
        .article-body ol{
            padding-left:1.25em;
            margin:0;
            color:#e8ebf2;
        }
        .article-body li + li{margin-top:.45em}
        .article-body blockquote{
            margin:1.4em 0;
            padding:18px 18px 18px 20px;
            border-left:3px solid var(--accent);
            border-radius:0 16px 16px 0;
            background:rgba(255,183,77,.07);
            color:#fff3df;
        }
        .article-body blockquote p{color:inherit}
        .article-body figure{
            margin:1.5em 0;
            padding:12px;
            border:1px solid rgba(255,255,255,.08);
            border-radius:18px;
            background:rgba(255,255,255,.03);
        }
        .article-body figure img{
            border-radius:14px;
            width:100%;
            height:auto;
        }
        .article-body figcaption{
            margin-top:10px;
            color:var(--muted);
            font-size:13px;
            line-height:1.7;
        }
        .article-body img{
            border-radius:16px;
            box-shadow:0 10px 24px rgba(0,0,0,.18);
            margin:1.4em 0;
        }
        .article-body hr{
            border:0;
            border-top:1px solid rgba(255,255,255,.08);
            margin:1.8em 0;
        }
        .article-body pre{
            margin:1.4em 0;
            padding:16px;
            overflow:auto;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:#0e1118;
            color:#f6f7fa;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
        }
        .article-body code{
            padding:.12em .4em;
            border-radius:8px;
            background:rgba(255,255,255,.07);
            color:#ffdca8;
            font-size:.95em;
        }
        .article-body pre code{
            padding:0;
            background:none;
            color:inherit;
        }
        .article-body table{
            display:block;
            width:100%;
            border-collapse:collapse;
            overflow:auto;
            margin:1.4em 0;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.08);
        }
        .article-body table th,
        .article-body table td{
            padding:12px 14px;
            border-bottom:1px solid rgba(255,255,255,.08);
            text-align:left;
            white-space:nowrap;
        }
        .article-body table th{
            background:rgba(255,255,255,.04);
            color:#fff;
            font-weight:700;
        }
        .article-body table tr:last-child td{border-bottom:0}

        .empty-state{
            min-height:240px;
            display:grid;
            place-items:center;
            text-align:center;
            padding:30px 16px;
            border-radius:20px;
            border:1px dashed rgba(255,255,255,.14);
            background:rgba(255,255,255,.02);
        }
        .empty-state h3{
            margin:0 0 8px;
            font-size:24px;
            line-height:1.2;
        }
        .empty-state p{
            margin:0;
            color:var(--muted);
        }
        .empty-actions{
            margin-top:18px;
            display:flex;
            justify-content:center;
        }

        .aside-wrap{
            display:grid;
            gap:16px;
            position:sticky;
            top:96px;
        }
        .aside-card{
            padding:20px;
        }
        .aside-card h3,
        .aside-card h4{
            margin:0 0 12px;
            line-height:1.25;
            letter-spacing:-.02em;
        }
        .aside-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .meta-list{
            list-style:none;
            padding:0;
            margin:16px 0 0;
            display:grid;
            gap:12px;
        }
        .meta-list li{
            display:flex;
            justify-content:space-between;
            gap:14px;
            align-items:flex-start;
            padding:12px 0;
            border-top:1px solid rgba(255,255,255,.08);
            color:var(--muted);
            font-size:13px;
        }
        .meta-list li:first-child{border-top:0;padding-top:0}
        .meta-list strong{
            color:var(--text);
            font-size:14px;
            font-weight:700;
            text-align:right;
        }
        .aside-note{
            display:grid;
            gap:10px;
        }
        .aside-note .note-item{
            padding:12px 14px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:13px;
        }
        .aside-actions{
            margin-top:14px;
            display:grid;
            gap:10px;
        }

        .bottom-section{
            margin-top:24px;
        }
        .bottom-card{
            padding:24px;
            display:flex;
            justify-content:space-between;
            gap:20px;
            align-items:center;
        }
        .bottom-copy h2{
            margin:0 0 8px;
            font-size:24px;
            line-height:1.25;
            letter-spacing:-.02em;
        }
        .bottom-copy p{
            margin:0;
            color:var(--muted);
        }
        .bottom-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:flex-end;
        }

        .site-footer{
            padding:44px 0 24px;
            border-top:1px solid rgba(255,255,255,.06);
            background:linear-gradient(180deg, rgba(10,11,14,.2), rgba(10,11,14,.78));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.25fr .9fr .9fr 1fr;
            gap:20px;
            padding-bottom:24px;
        }
        .footer-col{
            min-width:0;
        }
        .footer-brand{
            display:inline-flex;
            align-items:center;
            gap:10px;
            margin-bottom:14px;
            font-weight:800;
            font-size:18px;
            letter-spacing:.01em;
        }
        .footer-brand::before{
            content:"";
            width:10px;
            height:10px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 0 5px rgba(255,183,77,.12);
        }
        .footer-col p{
            margin:0;
            color:var(--muted);
            font-size:14px;
            line-height:1.8;
        }
        .footer-col h4{
            margin:0 0 12px;
            font-size:15px;
            line-height:1.3;
            letter-spacing:-.01em;
        }
        .footer-links{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            font-size:14px;
            transition:color var(--transition), transform var(--transition), opacity var(--transition);
            display:inline-flex;
            align-items:center;
            gap:8px;
        }
        .footer-links a:hover{
            color:var(--text);
            transform:translateX(2px);
        }
        .footer-meta{
            display:flex;
            justify-content:space-between;
            gap:14px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            color:var(--soft);
            font-size:13px;
        }

        @media (max-width: 1024px){
            .hero-grid,
            .article-layout,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .aside-wrap{
                position:static;
            }
            .bottom-card{
                align-items:flex-start;
            }
            .stat-grid{
                grid-template-columns:repeat(3, minmax(0, 1fr));
            }
        }
        @media (max-width: 768px){
            .header-inner{
                grid-template-columns:1fr auto 1fr;
                padding:14px 16px;
            }
            .nav-left{
                display:none;
            }
            .brand{
                justify-self:center;
                padding:9px 14px;
                font-size:15px;
            }
            .menu-toggle{
                display:inline-flex;
                justify-self:end;
            }
            .mobile-menu{
                padding:0 16px 14px;
            }
            .article-hero{
                padding:20px;
            }
            .article-hero h1{
                max-width:none;
                font-size:clamp(28px, 7vw, 44px);
            }
            .content-card,
            .aside-card,
            .bottom-card{
                padding:18px;
            }
            .content-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .stat-grid{
                grid-template-columns:1fr;
            }
            .bottom-card{
                flex-direction:column;
            }
            .bottom-actions{
                justify-content:flex-start;
            }
            .footer-meta{
                flex-direction:column;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 28px));
            }
            .page-main{
                padding-top:18px;
                padding-bottom:58px;
            }
            .article-hero{
                border-radius:24px;
                padding:18px;
            }
            .hero-actions,
            .bottom-actions{
                width:100%;
            }
            .hero-actions .btn,
            .bottom-actions .btn{
                width:100%;
            }
            .chip{
                width:100%;
                justify-content:flex-start;
            }
            .footer-grid{
                gap:18px;
            }
        }