/* roulang page: index */
:root{
            --bg:#090d12;
            --bg-soft:#0f151d;
            --panel:#111823;
            --panel-2:#161f2a;
            --panel-3:#1b2633;
            --text:#eef3f8;
            --muted:#9aa8ba;
            --line:rgba(255,255,255,.08);
            --line-strong:rgba(255,255,255,.14);
            --accent:#63f0d2;
            --accent-2:#8f7bff;
            --accent-3:#49c8ff;
            --accent-soft:rgba(99,240,210,.14);
            --accent-soft-2:rgba(143,123,255,.14);
            --shadow:0 18px 50px rgba(0,0,0,.32);
            --shadow-soft:0 12px 30px rgba(0,0,0,.22);
            --r-lg:24px;
            --r-md:18px;
            --r-sm:12px;
            --container:1280px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:20px;
            --space-5:28px;
            --space-6:40px;
            --space-7:56px;
            --space-8:80px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 15% -10%, rgba(99,240,210,.10), transparent 55%),
                radial-gradient(900px 600px at 100% 0%, rgba(143,123,255,.12), transparent 50%),
                radial-gradient(1000px 800px at 50% 120%, rgba(73,200,255,.06), transparent 52%),
                linear-gradient(180deg, #06080c 0%, #091018 48%, #090d12 100%);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            line-height:1.72;
            letter-spacing:.01em;
            overflow-x:hidden;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }

        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(180deg, rgba(255,255,255,.025), transparent 16%),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size:100% 100%, 72px 72px, 72px 72px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.08));
            opacity:.22;
            z-index:0;
        }

        a{color:inherit;text-decoration:none;transition:color .22s var(--ease), opacity .22s var(--ease), transform .22s var(--ease)}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        ::selection{background:rgba(99,240,210,.24);color:#fff}
        :focus-visible{outline:2px solid rgba(99,240,210,.82);outline-offset:3px}

        .site-wrap{position:relative;z-index:1}
        .grid-container{max-width:var(--container)}
        .section-block{padding:var(--space-8) 0}
        .section-block.tight{padding:var(--space-7) 0}
        .section-block.compact{padding:var(--space-6) 0}
        .section-head{margin-bottom:var(--space-5)}
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 12px;
            border:1px solid var(--line);
            border-radius:999px;
            color:var(--accent);
            background:rgba(255,255,255,.02);
            font-size:.78rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
        }
        .section-kicker::before{
            content:"";
            width:6px;height:6px;border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 14px rgba(99,240,210,.85);
        }
        .section-title{
            margin:.75rem 0 .8rem;
            font-size:clamp(1.7rem, 2.9vw, 3rem);
            line-height:1.15;
            letter-spacing:-.03em;
            font-weight:800;
        }
        .section-lead{
            margin:0;
            max-width:72ch;
            color:var(--muted);
            font-size:1rem;
        }

        .site-header{
            position:fixed;
            top:0;left:0;right:0;
            z-index:60;
            backdrop-filter:saturate(140%) blur(18px);
            background:linear-gradient(180deg, rgba(8,12,17,.93), rgba(8,12,17,.82));
            border-bottom:1px solid rgba(255,255,255,.08);
            box-shadow:0 8px 24px rgba(0,0,0,.2);
        }
        .header-accent{
            height:2px;
            background:linear-gradient(90deg, transparent 0%, rgba(99,240,210,.85) 18%, rgba(143,123,255,.9) 52%, rgba(73,200,255,.85) 82%, transparent 100%);
            box-shadow:0 0 22px rgba(99,240,210,.35);
        }
        .header-inner{
            min-height:74px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:12px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            letter-spacing:-.02em;
            color:var(--text);
            white-space:nowrap;
        }
        .brand:hover{color:#fff;transform:translateY(-1px)}
        .brand-mark{
            width:42px;height:42px;
            display:grid;place-items:center;
            border-radius:14px;
            background:linear-gradient(135deg, rgba(99,240,210,.2), rgba(143,123,255,.22));
            border:1px solid rgba(255,255,255,.12);
            box-shadow:0 12px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(99,240,210,.1) inset;
            color:var(--text);
            font-size:.8rem;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            line-height:1.06;
        }
        .brand-text strong{
            font-size:1.12rem;
            letter-spacing:-.03em;
        }
        .brand-text span{
            font-size:.76rem;
            color:var(--muted);
            margin-top:3px;
        }

        .menu-toggle{
            display:none;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            cursor:pointer;
            transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
        }
        .menu-toggle:hover{
            transform:translateY(-1px);
            border-color:rgba(99,240,210,.38);
            box-shadow:0 0 0 1px rgba(99,240,210,.08) inset, 0 12px 26px rgba(0,0,0,.18);
            background:rgba(255,255,255,.05);
        }
        .menu-icon{
            width:18px;height:12px;display:inline-flex;flex-direction:column;justify-content:space-between;
        }
        .menu-icon span{
            display:block;height:2px;border-radius:3px;background:var(--text);
        }

        .site-menu{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .site-menu ul{
            list-style:none;
            margin:0;
            padding:0;
            display:flex;
            align-items:center;
            gap:8px;
        }
        .site-menu a.nav-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            background:transparent;
            font-size:.92rem;
            transition:all .22s var(--ease);
        }
        .site-menu a.nav-link:hover{
            color:var(--text);
            border-color:rgba(99,240,210,.2);
            background:rgba(255,255,255,.03);
            transform:translateY(-1px);
        }
        .site-menu a.nav-link.active{
            color:#fff;
            border-color:rgba(99,240,210,.42);
            background:linear-gradient(135deg, rgba(99,240,210,.12), rgba(143,123,255,.08));
            box-shadow:0 0 0 1px rgba(99,240,210,.06) inset, 0 0 18px rgba(99,240,210,.08);
        }

        .main-content{
            position:relative;
            padding-top:104px;
        }

        .hero{
            padding:32px 0 18px;
        }
        .hero-shell{
            position:relative;
            overflow:hidden;
            border:1px solid rgba(255,255,255,.08);
            border-radius:30px;
            background:
                radial-gradient(900px 420px at 20% 25%, rgba(99,240,210,.12), transparent 60%),
                radial-gradient(700px 420px at 80% 12%, rgba(143,123,255,.16), transparent 52%),
                linear-gradient(180deg, rgba(18,25,34,.98), rgba(10,14,20,.98));
            box-shadow:var(--shadow);
        }
        .hero-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(135deg, rgba(255,255,255,.04), transparent 35%, rgba(255,255,255,.02));
            pointer-events:none;
        }
        .hero-inner{
            position:relative;
            z-index:1;
            padding:clamp(26px, 4vw, 52px);
        }
        .hero-grid{
            align-items:center;
        }
        .hero-kicker{
            display:inline-flex;
            align-items:center;
            gap:10px;
            padding:7px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.1);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.84rem;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
        }
        .hero-kicker span{
            color:var(--accent);
            font-weight:700;
        }
        .hero-title{
            margin:16px 0 14px;
            font-size:clamp(2.3rem, 5vw, 4.8rem);
            line-height:1.02;
            letter-spacing:-.05em;
            font-weight:900;
            text-wrap:balance;
            max-width:12ch;
        }
        .hero-title .accent{
            background:linear-gradient(90deg, #f3fbff 0%, #d8fffb 25%, #85f5de 58%, #b6a8ff 100%);
            -webkit-background-clip:text;
            background-clip:text;
            color:transparent;
        }
        .hero-copy{
            max-width:62ch;
            margin:0 0 22px;
            color:var(--muted);
            font-size:1.03rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-bottom:18px;
        }
        .btn-neo{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            padding:13px 20px;
            border-radius:999px;
            border:1px solid transparent;
            cursor:pointer;
            font-weight:700;
            letter-spacing:.01em;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
            overflow:hidden;
            user-select:none;
        }
        .btn-neo::after{
            content:"";
            position:absolute;
            top:0;left:-120%;
            width:110%;height:100%;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
            transform:skewX(-16deg);
            transition:left .5s var(--ease);
        }
        .btn-neo:hover::after{left:120%}
        .btn-neo:hover{transform:translateY(-1px)}
        .btn-primary{
            color:#061113;
            background:linear-gradient(135deg, #7cf2da 0%, #5de0c9 45%, #8ee6ff 100%);
            box-shadow:0 16px 28px rgba(99,240,210,.18), 0 0 0 1px rgba(255,255,255,.14) inset;
        }
        .btn-primary:hover{
            box-shadow:0 20px 34px rgba(99,240,210,.22), 0 0 0 1px rgba(255,255,255,.2) inset;
        }
        .btn-secondary{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:rgba(255,255,255,.12);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
        }
        .btn-secondary:hover{
            border-color:rgba(99,240,210,.32);
            background:rgba(255,255,255,.05);
            box-shadow:0 0 0 1px rgba(99,240,210,.08) inset;
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:14px;
        }
        .mini-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.025);
            color:var(--muted);
            font-size:.84rem;
        }
        .mini-tag i{
            display:inline-block;
            width:8px;height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 14px rgba(99,240,210,.72);
        }

        .hero-stage{
            position:relative;
            min-height:520px;
        }
        .stage-panel{
            position:absolute;
            inset:auto 0 0 auto;
            width:min(100%, 420px);
            border-radius:28px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(22,30,41,.95), rgba(13,18,25,.96));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .stage-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(500px 180px at 15% 0%, rgba(99,240,210,.16), transparent 54%),
                radial-gradient(420px 220px at 100% 0%, rgba(143,123,255,.18), transparent 50%);
            pointer-events:none;
        }
        .stage-panel-inner{
            position:relative;
            z-index:1;
            padding:18px;
        }
        .stage-heading{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:14px;
        }
        .stage-heading strong{
            font-size:1rem;
            letter-spacing:-.02em;
        }
        .stage-badge{
            padding:6px 10px;
            border-radius:999px;
            background:rgba(99,240,210,.11);
            border:1px solid rgba(99,240,210,.22);
            color:var(--accent);
            font-size:.75rem;
            letter-spacing:.05em;
            white-space:nowrap;
        }
        .poster-stack{
            display:grid;
            gap:12px;
        }
        .poster-card{
            position:relative;
            min-height:108px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,0)),
                linear-gradient(135deg, rgba(99,240,210,.12), rgba(143,123,255,.18));
            overflow:hidden;
            padding:18px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
        }
        .poster-card:nth-child(2){
            background:
                linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
                linear-gradient(135deg, rgba(143,123,255,.16), rgba(73,200,255,.10));
        }
        .poster-card:nth-child(3){
            background:
                linear-gradient(135deg, rgba(255,255,255,.035), rgba(255,255,255,0)),
                linear-gradient(135deg, rgba(73,200,255,.12), rgba(99,240,210,.08));
        }
        .poster-card::after{
            content:"";
            position:absolute;
            inset:auto -20% -18% auto;
            width:140px;height:140px;border-radius:50%;
            background:radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,0) 70%);
            filter:blur(6px);
            opacity:.18;
        }
        .poster-card strong{
            display:block;
            font-size:1.06rem;
            margin-bottom:6px;
            letter-spacing:-.02em;
        }
        .poster-card p{
            margin:0;
            color:rgba(238,243,248,.82);
            font-size:.92rem;
        }
        .poster-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:12px;
        }
        .poster-meta .badge{
            padding:5px 9px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.12);
            background:rgba(10,14,20,.22);
            color:var(--text);
            font-size:.72rem;
        }
        .poster-footer{
            margin-top:16px;
            display:flex;
            justify-content:space-between;
            gap:12px;
            align-items:center;
            padding:14px 16px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.08);
        }
        .poster-footer small{
            color:var(--muted);
        }
        .poster-foot-val{
            color:#fff;
            font-weight:800;
            letter-spacing:-.02em;
        }

        .panel{
            border-radius:var(--r-lg);
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(17,24,35,.96), rgba(13,18,25,.96));
            box-shadow:var(--shadow-soft);
            overflow:hidden;
            height:100%;
        }
        .panel-inner{padding:26px}
        .panel-title{
            margin:0 0 8px;
            font-size:1.22rem;
            letter-spacing:-.02em;
            font-weight:800;
        }
        .panel-desc{
            margin:0;
            color:var(--muted);
            font-size:.96rem;
        }

        .problem-grid,
        .solution-grid,
        .feature-grid,
        .story-grid,
        .voice-grid,
        .faq-grid{
            display:grid;
            gap:16px;
        }
        .problem-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
        .solution-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
        .feature-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
        .story-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
        .voice-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
        .faq-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
        .card-neo{
            position:relative;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                linear-gradient(180deg, rgba(17,24,35,.96), rgba(12,17,24,.96));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
            transition:transform .24s var(--ease), border-color .24s var(--ease), box-shadow .24s var(--ease), background .24s var(--ease);
            overflow:hidden;
        }
        .card-neo:hover{
            transform:translateY(-3px);
            border-color:rgba(99,240,210,.32);
            box-shadow:0 0 0 1px rgba(99,240,210,.07) inset, 0 18px 34px rgba(0,0,0,.18);
        }
        .card-pad{padding:22px}
        .card-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:14px;
            font-size:.77rem;
            letter-spacing:.08em;
            color:var(--muted);
            text-transform:uppercase;
        }
        .step-no{
            width:30px;height:30px;
            display:inline-grid;place-items:center;
            border-radius:999px;
            background:rgba(99,240,210,.11);
            border:1px solid rgba(99,240,210,.2);
            color:var(--accent);
            font-weight:800;
            font-size:.78rem;
        }
        .card-title{
            margin:0 0 10px;
            font-size:1.08rem;
            letter-spacing:-.02em;
            line-height:1.35;
            font-weight:800;
        }
        .card-text{
            margin:0;
            color:var(--muted);
            font-size:.95rem;
            line-height:1.75;
        }
        .soft-list{
            margin:0;
            padding:0;
            list-style:none;
        }
        .soft-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            padding:10px 0;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .soft-list li:first-child{border-top:none;padding-top:0}
        .soft-list li::before{
            content:"";
            width:8px;height:8px;flex:0 0 8px;
            border-radius:50%;
            margin-top:.55rem;
            background:var(--accent);
            box-shadow:0 0 12px rgba(99,240,210,.65);
        }

        .problem-card{
            padding:22px;
            min-height:190px;
        }
        .problem-card .badge-dot{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-width:44px;
            padding:8px 10px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            color:var(--text);
            background:rgba(255,255,255,.03);
            font-size:.78rem;
            font-weight:700;
            margin-bottom:14px;
        }
        .problem-card strong{
            display:block;
            margin-bottom:8px;
            font-size:1.04rem;
            line-height:1.4;
            letter-spacing:-.02em;
        }
        .problem-card p{margin:0;color:var(--muted)}
        .problem-card::after{
            content:"";
            position:absolute;
            inset:auto auto -26px -26px;
            width:110px;height:110px;
            background:radial-gradient(circle, rgba(99,240,210,.10), transparent 70%);
            pointer-events:none;
        }

        .solution-card{
            padding:24px;
            min-height:220px;
        }
        .solution-card .step-no{
            margin-bottom:16px;
        }
        .solution-card ul{margin-top:14px}
        .solution-card .step-title{
            margin:0 0 10px;
            font-size:1.12rem;
            font-weight:800;
            letter-spacing:-.02em;
        }

        .metrics{
            display:grid;
            grid-template-columns:repeat(4,minmax(0,1fr));
            gap:16px;
            margin-top:12px;
        }
        .metric-card{
            padding:22px;
            min-height:164px;
        }
        .metric-value{
            display:block;
            font-size:clamp(2rem, 3.6vw, 3rem);
            line-height:1;
            letter-spacing:-.05em;
            font-weight:900;
            margin-bottom:10px;
            color:#fff;
        }
        .metric-label{
            display:block;
            color:var(--accent);
            font-weight:700;
            margin-bottom:10px;
            letter-spacing:.02em;
        }
        .metric-note{
            margin:0;
            color:var(--muted);
            font-size:.93rem;
        }

        .compare-panel{
            margin-top:16px;
            padding:20px 22px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(135deg, rgba(99,240,210,.08), rgba(143,123,255,.06));
        }
        .compare-row{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px 18px;
        }
        .compare-item{
            display:flex;
            justify-content:space-between;
            gap:16px;
            padding:12px 0;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .compare-item:first-child{border-top:none;padding-top:0}
        .compare-item span:first-child{color:var(--muted)}
        .compare-item strong{color:#fff}
        .compare-note{
            margin-top:14px;
            color:var(--muted);
            font-size:.92rem;
        }

        .tag-rail{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .topic-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--text);
            font-size:.88rem;
        }
        .topic-chip:hover{
            border-color:rgba(99,240,210,.28);
            color:#fff;
            transform:translateY(-1px);
        }
        .topic-card{
            padding:20px;
            min-height:178px;
        }
        .topic-card .topic-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:14px;
        }
        .topic-card .topic-badge{
            padding:6px 10px;
            border-radius:999px;
            background:rgba(143,123,255,.12);
            border:1px solid rgba(143,123,255,.2);
            color:#c9c1ff;
            font-size:.76rem;
        }
        .topic-card .topic-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:14px;
        }
        .topic-card .topic-meta .badge{
            padding:5px 9px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.72rem;
        }

        .latest-layout{
            align-items:flex-start;
        }
        .latest-list{
            display:grid;
            gap:14px;
        }
        .latest-card{
            display:grid;
            grid-template-columns:92px 1fr;
            gap:14px;
            align-items:stretch;
            padding:14px;
            border-radius:22px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease);
        }
        .latest-card:hover{
            transform:translateY(-2px);
            border-color:rgba(99,240,210,.28);
            box-shadow:0 0 0 1px rgba(99,240,210,.06) inset;
        }
        .latest-thumb{
            position:relative;
            border-radius:18px;
            overflow:hidden;
            min-height:104px;
            background:
                radial-gradient(120px 120px at 30% 20%, rgba(255,255,255,.24), transparent 58%),
                linear-gradient(135deg, rgba(99,240,210,.26), rgba(143,123,255,.22));
            border:1px solid rgba(255,255,255,.08);
        }
        .latest-thumb::after{
            content:"";
            position:absolute;
            inset:10px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.16);
            opacity:.55;
        }
        .latest-index{
            position:absolute;
            right:10px;
            bottom:10px;
            padding:6px 8px;
            border-radius:999px;
            background:rgba(9,13,18,.7);
            color:#fff;
            border:1px solid rgba(255,255,255,.12);
            font-weight:800;
            font-size:.72rem;
        }
        .latest-body{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:12px;
            min-width:0;
        }
        .latest-topline{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:8px;
        }
        .meta-badge{
            display:inline-flex;
            align-items:center;
            padding:5px 9px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:.72rem;
            line-height:1;
        }
        .latest-title{
            margin:0;
            font-size:1.05rem;
            line-height:1.45;
            letter-spacing:-.02em;
            font-weight:800;
        }
        .latest-title a:hover{color:#fff}
        .latest-summary{
            margin:0;
            color:var(--muted);
            font-size:.93rem;
            line-height:1.7;
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .latest-action{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--accent);
            font-size:.88rem;
            font-weight:700;
        }
        .latest-action::after{
            content:"→";
            transition:transform .22s var(--ease);
        }
        .latest-card:hover .latest-action::after{transform:translateX(3px)}

        .sidebar-panel{
            padding:22px;
            position:sticky;
            top:100px;
        }
        .sidebar-panel .panel-title{margin-bottom:10px}
        .sidebar-note{
            margin:0 0 18px;
            color:var(--muted);
            font-size:.95rem;
        }
        .sidebar-timeline{
            display:grid;
            gap:12px;
        }
        .timeline-item{
            padding:14px 14px 14px 16px;
            border-radius:18px;
            background:rgba(255,255,255,.03);
            border:1px solid rgba(255,255,255,.08);
        }
        .timeline-item strong{
            display:block;
            margin-bottom:6px;
            font-size:.98rem;
        }
        .timeline-item p{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
        }

        .quote-card{
            padding:22px;
            min-height:220px;
        }
        .quote-head{
            display:flex;
            align-items:center;
            gap:12px;
            margin-bottom:14px;
        }
        .avatar{
            width:42px;height:42px;
            flex:0 0 42px;
            border-radius:50%;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(99,240,210,.2), rgba(143,123,255,.2));
            border:1px solid rgba(255,255,255,.12);
            color:#fff;
            font-weight:800;
            font-size:.84rem;
        }
        .quote-meta strong{display:block;font-size:.98rem}
        .quote-meta span{display:block;color:var(--muted);font-size:.8rem;margin-top:2px}
        .quote-text{
            margin:0 0 14px;
            color:#e8eef6;
            font-size:.97rem;
            line-height:1.8;
        }
        .rating{
            display:flex;
            gap:4px;
            color:#ffd36b;
            letter-spacing:1px;
            font-size:.9rem;
        }

        .faq-item{
            border-radius:20px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            overflow:hidden;
        }
        .faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:20px 22px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:800;
            letter-spacing:-.02em;
            transition:background .22s var(--ease), color .22s var(--ease);
        }
        .faq-item summary::-webkit-details-marker{display:none}
        .faq-item summary:hover{background:rgba(255,255,255,.03)}
        .faq-item summary::after{
            content:"+";
            color:var(--accent);
            font-weight:900;
            font-size:1.2rem;
            transition:transform .22s var(--ease);
        }
        .faq-item[open] summary::after{
            content:"–";
            transform:translateY(-1px);
        }
        .faq-content{
            padding:0 22px 20px;
            color:var(--muted);
        }
        .faq-content p{
            margin:0;
            line-height:1.78;
        }

        .cta-shell{
            position:relative;
            overflow:hidden;
            border-radius:30px;
            border:1px solid rgba(255,255,255,.08);
            background:
                radial-gradient(700px 240px at 20% 10%, rgba(99,240,210,.14), transparent 55%),
                radial-gradient(560px 220px at 92% 20%, rgba(143,123,255,.18), transparent 48%),
                linear-gradient(135deg, rgba(18,25,34,.98), rgba(10,14,20,.98));
            box-shadow:var(--shadow);
        }
        .cta-shell::before{
            content:"";
            position:absolute;
            inset:0;
            background:linear-gradient(90deg, rgba(255,255,255,.03), transparent 30%, rgba(255,255,255,.01));
            pointer-events:none;
        }
        .cta-inner{
            position:relative;
            z-index:1;
            padding:clamp(26px, 4vw, 48px);
        }
        .cta-title{
            margin:0 0 12px;
            font-size:clamp(1.8rem, 3.4vw, 3.2rem);
            line-height:1.08;
            letter-spacing:-.04em;
            font-weight:900;
        }
        .cta-text{
            max-width:68ch;
            margin:0 0 22px;
            color:var(--muted);
            font-size:1rem;
        }

        .site-footer{
            margin-top:24px;
            padding:34px 0 42px;
            border-top:1px solid rgba(255,255,255,.08);
            color:var(--muted);
            background:linear-gradient(180deg, rgba(10,14,20,.45), rgba(10,14,20,.88));
        }
        .footer-shell{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:24px;
            align-items:start;
        }
        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:12px;
        }
        .footer-brand .brand{align-self:flex-start}
        .footer-copy{
            margin:0;
            max-width:66ch;
            color:var(--muted);
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px 14px;
            align-items:center;
            justify-content:flex-end;
        }
        .footer-links a{
            color:var(--muted);
            padding:8px 0;
        }
        .footer-links a:hover{color:#fff}
        .footer-note{
            margin-top:16px;
            font-size:.9rem;
            color:rgba(154,168,186,.86);
        }

        .empty-state{
            padding:26px;
            border-radius:22px;
            border:1px dashed rgba(255,255,255,.12);
            background:rgba(255,255,255,.02);
            color:var(--muted);
        }
        .empty-state p{
            margin:0;
            color:var(--muted);
        }

        .scroll-progress{
            position:fixed;
            top:0;left:0;right:0;
            height:3px;
            z-index:90;
            background:rgba(255,255,255,.03);
        }
        .scroll-progress span{
            display:block;
            width:0%;
            height:100%;
            background:linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
            box-shadow:0 0 14px rgba(99,240,210,.5);
            transition:width .08s linear;
        }

        .clamp-2{
            display:-webkit-box;
            -webkit-line-clamp:2;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }
        .clamp-3{
            display:-webkit-box;
            -webkit-line-clamp:3;
            -webkit-box-orient:vertical;
            overflow:hidden;
        }

        @media print{
            .site-header,.scroll-progress{display:none!important}
            body{background:#fff;color:#000}
            .panel,.card-neo,.hero-shell,.cta-shell,.site-footer{box-shadow:none!important}
        }

        @media (max-width: 1199px){
            .problem-grid,.feature-grid,.story-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
            .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
            .footer-shell{grid-template-columns:1fr}
            .footer-links{justify-content:flex-start}
        }

        @media (max-width: 991px){
            .hero-stage{min-height:420px;margin-top:22px}
            .stage-panel{position:relative;width:100%}
            .solution-grid,.voice-grid,.faq-grid{grid-template-columns:1fr}
            .latest-layout{gap:18px}
            .sidebar-panel{position:relative;top:auto}
            .compare-row{grid-template-columns:1fr}
        }

        @media (max-width: 767px){
            .main-content{padding-top:92px}
            .header-inner{min-height:68px}
            .menu-toggle{display:inline-flex}
            .site-menu{
                position:absolute;
                left:0;right:0;top:100%;
                padding:0 16px 16px;
                display:none;
            }
            .site-menu.is-open{display:block}
            .site-menu ul{
                width:100%;
                flex-direction:column;
                align-items:stretch;
                gap:10px;
                padding:12px;
                border-radius:22px;
                border:1px solid rgba(255,255,255,.08);
                background:rgba(9,13,18,.95);
                box-shadow:var(--shadow);
            }
            .site-menu a.nav-link{justify-content:center}
            .hero-shell{border-radius:24px}
            .hero-inner{padding:22px}
            .hero-title{max-width:none;font-size:clamp(2.05rem, 9vw, 3.35rem)}
            .hero-copy{font-size:.98rem}
            .hero-actions{flex-direction:column;align-items:stretch}
            .btn-neo{width:100%}
            .problem-grid,.feature-grid,.story-grid,.metrics{grid-template-columns:1fr}
            .latest-card{grid-template-columns:1fr}
            .latest-thumb{min-height:140px}
            .section-block{padding:56px 0}
            .panel-inner,.card-pad,.solution-card,.topic-card,.quote-card,.sidebar-panel,.cta-inner{padding:20px}
        }

        @media (max-width: 520px){
            .brand-mark{width:38px;height:38px;border-radius:12px}
            .brand-text strong{font-size:1rem}
            .section-title{font-size:clamp(1.5rem, 8vw, 2.1rem)}
            .hero-kicker,.mini-tag,.meta-badge,.topic-chip{font-size:.8rem}
            .poster-card{min-height:100px}
            .faq-item summary{padding:18px 18px}
            .faq-content{padding:0 18px 18px}
            .footer-links{gap:8px 12px}
        }

/* roulang page: article */
:root{
            --bg:#090d12;
            --bg-soft:#0f151d;
            --panel:#111823;
            --panel-2:#161f2a;
            --panel-3:#1b2633;
            --text:#eef3f8;
            --muted:#9aa8ba;
            --muted-2:#748399;
            --line:rgba(255,255,255,.08);
            --line-strong:rgba(255,255,255,.14);
            --accent:#63f0d2;
            --accent-2:#8f7bff;
            --accent-3:#49c8ff;
            --accent-soft:rgba(99,240,210,.14);
            --accent-soft-2:rgba(143,123,255,.14);
            --danger:#ff7c92;
            --shadow:0 18px 50px rgba(0,0,0,.32);
            --shadow-soft:0 12px 30px rgba(0,0,0,.22);
            --r-lg:24px;
            --r-md:18px;
            --r-sm:12px;
            --container:1280px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:20px;
            --space-5:28px;
            --space-6:40px;
            --space-7:56px;
            --space-8:80px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            background:
                radial-gradient(1200px 700px at 15% -10%, rgba(99,240,210,.10), transparent 55%),
                radial-gradient(900px 600px at 100% 0%, rgba(143,123,255,.12), transparent 50%),
                radial-gradient(1000px 800px at 50% 120%, rgba(73,200,255,.06), transparent 52%),
                linear-gradient(180deg, #06080c 0%, #091018 48%, #090d12 100%);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",sans-serif;
            line-height:1.72;
            letter-spacing:.01em;
            overflow-x:hidden;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(180deg, rgba(255,255,255,.025), transparent 16%),
                linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,.03) 1px, transparent 1px);
            background-size:100% 100%, 72px 72px, 72px 72px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.08));
            opacity:.22;
            z-index:0;
        }
        a{color:inherit;text-decoration:none;transition:color .22s var(--ease), opacity .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease)}
        a:hover,a:focus{color:#fff}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(99,240,210,.24);color:#fff}
        .grid-container{max-width:var(--container);position:relative;z-index:1}
        .section-block{padding:var(--space-8) 0}
        .section-block.tight{padding:var(--space-7) 0}
        .section-block.compact{padding:var(--space-6) 0}
        .section-head{margin-bottom:var(--space-5)}
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:6px 12px;
            border:1px solid var(--line);
            border-radius:999px;
            color:var(--accent);
            background:rgba(255,255,255,.02);
            font-size:.78rem;
            letter-spacing:.08em;
            text-transform:uppercase;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
        }
        .section-kicker::before{
            content:"";
            width:6px;height:6px;border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 14px rgba(99,240,210,.85);
        }
        .section-title{
            margin:.75rem 0 .8rem;
            font-size:clamp(1.7rem, 2.9vw, 3rem);
            line-height:1.15;
            letter-spacing:-.03em;
            font-weight:800;
        }
        .section-lead{
            margin:0;
            max-width:72ch;
            color:var(--muted);
            font-size:1rem;
        }
        .site-header{
            position:fixed;
            top:0;left:0;right:0;
            z-index:60;
            backdrop-filter:saturate(140%) blur(18px);
            background:linear-gradient(180deg, rgba(8,12,17,.93), rgba(8,12,17,.82));
            border-bottom:1px solid rgba(255,255,255,.08);
            box-shadow:0 8px 24px rgba(0,0,0,.2);
        }
        .header-accent{
            height:2px;
            background:linear-gradient(90deg, transparent 0%, rgba(99,240,210,.85) 18%, rgba(143,123,255,.9) 52%, rgba(73,200,255,.85) 82%, transparent 100%);
            box-shadow:0 0 22px rgba(99,240,210,.35);
        }
        .header-inner{
            min-height:74px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:12px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            letter-spacing:-.02em;
            color:var(--text);
            white-space:nowrap;
        }
        .brand:hover{color:#fff;transform:translateY(-1px)}
        .brand-mark{
            width:42px;height:42px;
            display:grid;place-items:center;
            border-radius:14px;
            background:linear-gradient(135deg, rgba(99,240,210,.2), rgba(143,123,255,.22));
            border:1px solid rgba(255,255,255,.12);
            box-shadow:0 12px 24px rgba(0,0,0,.28), 0 0 0 1px rgba(99,240,210,.1) inset;
            color:var(--text);
            font-size:.8rem;
            letter-spacing:.08em;
            text-transform:uppercase;
        }
        .brand-text{
            display:flex;
            flex-direction:column;
            line-height:1.06;
        }
        .brand-text strong{
            font-size:1.12rem;
            letter-spacing:-.03em;
        }
        .brand-text span{
            font-size:.76rem;
            color:var(--muted);
            margin-top:3px;
            font-weight:500;
        }
        .menu-toggle{
            display:none;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            color:var(--text);
            outline:none;
            transition:transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), box-shadow .22s var(--ease);
        }
        .menu-toggle:hover,.menu-toggle:focus{
            border-color:rgba(99,240,210,.42);
            box-shadow:0 0 0 4px rgba(99,240,210,.08);
            background:rgba(99,240,210,.07);
        }
        .menu-toggle:active{transform:translateY(1px)}
        .menu-lines{
            width:18px;height:12px;position:relative;display:inline-block;
        }
        .menu-lines::before,.menu-lines::after,.menu-lines span{
            content:"";
            position:absolute;
            left:0;
            width:18px;height:2px;
            border-radius:2px;
            background:var(--accent);
            transition:transform .22s var(--ease), top .22s var(--ease), opacity .22s var(--ease);
        }
        .menu-lines::before{top:0}
        .menu-lines span{top:5px}
        .menu-lines::after{top:10px}
        .menu-toggle.is-open .menu-lines::before{top:5px;transform:rotate(45deg)}
        .menu-toggle.is-open .menu-lines span{opacity:0}
        .menu-toggle.is-open .menu-lines::after{top:5px;transform:rotate(-45deg)}
        .site-menu{display:flex;align-items:center;gap:14px}
        .site-menu ul{
            display:flex;
            align-items:center;
            gap:8px;
            margin:0;
            padding:0;
            list-style:none;
        }
        .nav-link{
            position:relative;
            display:inline-flex;
            align-items:center;
            min-height:40px;
            padding:8px 14px;
            border-radius:999px;
            color:var(--muted);
            font-size:.94rem;
            font-weight:650;
            border:1px solid transparent;
        }
        .nav-link::after{
            content:"";
            position:absolute;
            left:16px;right:16px;bottom:5px;
            height:2px;border-radius:2px;
            background:linear-gradient(90deg,var(--accent),var(--accent-2));
            opacity:0;
            transform:scaleX(.55);
            transition:opacity .22s var(--ease), transform .22s var(--ease);
        }
        .nav-link:hover,.nav-link:focus{
            color:#fff;
            background:rgba(255,255,255,.04);
            border-color:var(--line);
        }
        .nav-link.active{
            color:#fff;
            background:rgba(99,240,210,.08);
            border-color:rgba(99,240,210,.24);
            box-shadow:0 0 22px rgba(99,240,210,.08);
        }
        .nav-link.active::after,.nav-link:hover::after{opacity:1;transform:scaleX(1)}
        .nav-cta{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:9px 16px;
            border-radius:999px;
            color:#07100f;
            font-weight:800;
            background:linear-gradient(135deg, var(--accent), #b7ffee);
            box-shadow:0 12px 28px rgba(99,240,210,.18);
            border:1px solid rgba(255,255,255,.12);
            overflow:hidden;
            position:relative;
        }
        .nav-cta::before,.btn-primary::before{
            content:"";
            position:absolute;
            inset:-2px;
            background:linear-gradient(100deg, transparent 0%, rgba(255,255,255,.56) 46%, transparent 58%);
            transform:translateX(-120%);
            transition:transform .65s var(--ease);
        }
        .nav-cta:hover::before,.btn-primary:hover::before{transform:translateX(120%)}
        .nav-cta:hover{color:#04100e;transform:translateY(-1px);box-shadow:0 16px 34px rgba(99,240,210,.24)}
        .main{
            position:relative;
            z-index:1;
            padding-top:100px;
        }
        .btn{
            position:relative;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            border-radius:999px;
            padding:12px 18px;
            border:1px solid var(--line-strong);
            min-height:48px;
            font-weight:800;
            letter-spacing:-.01em;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
            outline:none;
            overflow:hidden;
        }
        .btn:focus-visible{
            outline:3px solid rgba(99,240,210,.24);
            outline-offset:3px;
        }
        .btn:active{transform:translateY(1px) scale(.99)}
        .btn-primary{
            color:#06110f;
            background:linear-gradient(135deg, var(--accent), #c6fff1);
            border-color:rgba(255,255,255,.14);
            box-shadow:0 18px 34px rgba(99,240,210,.18);
        }
        .btn-primary:hover{
            color:#06110f;
            transform:translateY(-2px);
            box-shadow:0 22px 44px rgba(99,240,210,.24);
        }
        .btn-ghost{
            color:var(--text);
            background:rgba(255,255,255,.035);
            border-color:var(--line-strong);
        }
        .btn-ghost:hover{
            color:#fff;
            border-color:rgba(99,240,210,.34);
            background:rgba(99,240,210,.07);
            box-shadow:0 14px 30px rgba(0,0,0,.2), 0 0 0 1px rgba(99,240,210,.08) inset;
            transform:translateY(-2px);
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:6px 10px;
            border-radius:999px;
            color:var(--accent);
            background:rgba(99,240,210,.08);
            border:1px solid rgba(99,240,210,.2);
            font-size:.78rem;
            line-height:1.2;
            font-weight:750;
        }
        .badge.muted{
            color:var(--muted);
            background:rgba(255,255,255,.035);
            border-color:var(--line);
        }
        .badge.purple{
            color:#c8c0ff;
            background:rgba(143,123,255,.09);
            border-color:rgba(143,123,255,.24);
        }
        .article-hero{
            padding:50px 0 38px;
        }
        .article-shell{
            border:1px solid var(--line);
            border-radius:var(--r-lg);
            background:
                linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
                radial-gradient(700px 360px at 86% 16%, rgba(99,240,210,.11), transparent 58%),
                radial-gradient(620px 320px at 12% 82%, rgba(143,123,255,.10), transparent 58%);
            box-shadow:var(--shadow);
            padding:clamp(24px, 4.2vw, 54px);
            overflow:hidden;
            position:relative;
        }
        .article-shell::before{
            content:"";
            position:absolute;
            top:0;left:0;right:0;
            height:1px;
            background:linear-gradient(90deg, transparent, rgba(99,240,210,.55), rgba(143,123,255,.46), transparent);
        }
        .breadcrumb{
            margin:0 0 24px;
            padding:0;
            list-style:none;
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:9px;
            color:var(--muted);
            font-size:.9rem;
        }
        .breadcrumb li{display:inline-flex;align-items:center;gap:9px}
        .breadcrumb li:not(:last-child)::after{
            content:"/";
            color:rgba(255,255,255,.28);
        }
        .breadcrumb a{
            color:#c8d3df;
            border-bottom:1px solid transparent;
        }
        .breadcrumb a:hover,.breadcrumb a:focus{
            color:#fff;
            border-color:rgba(99,240,210,.42);
        }
        .article-label-row{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .article-title{
            max-width:980px;
            margin:0;
            font-size:clamp(2rem, 4.8vw, 4.7rem);
            line-height:1.05;
            letter-spacing:-.055em;
            font-weight:900;
        }
        .article-summary{
            max-width:850px;
            margin:22px 0 0;
            color:#c4cfdb;
            font-size:clamp(1rem, 1.4vw, 1.14rem);
        }
        .article-meta{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-top:28px;
            color:var(--muted);
        }
        .meta-dot{
            width:4px;height:4px;border-radius:50%;
            background:rgba(255,255,255,.32);
        }
        .reading-hint{
            margin-top:28px;
            display:grid;
            grid-template-columns:1fr auto;
            gap:18px;
            align-items:center;
            padding:16px 18px;
            border:1px solid var(--line);
            border-radius:var(--r-md);
            background:rgba(6,10,15,.36);
        }
        .reading-hint p{
            margin:0;
            color:var(--muted);
            font-size:.94rem;
        }
        .hint-bars{
            display:flex;
            gap:5px;
            align-items:end;
            height:28px;
        }
        .hint-bars span{
            display:block;
            width:6px;
            border-radius:999px;
            background:linear-gradient(180deg,var(--accent),var(--accent-2));
            opacity:.78;
        }
        .hint-bars span:nth-child(1){height:12px}
        .hint-bars span:nth-child(2){height:19px}
        .hint-bars span:nth-child(3){height:26px}
        .hint-bars span:nth-child(4){height:16px}
        .progress-wrap{
            position:fixed;
            top:0;
            left:0;
            right:0;
            height:3px;
            z-index:80;
            pointer-events:none;
        }
        .reading-progress{
            width:0;
            height:100%;
            background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--accent-3));
            box-shadow:0 0 18px rgba(99,240,210,.4);
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0, 1fr) 330px;
            gap:34px;
            align-items:start;
        }
        .content-card,.side-card,.recommend-card,.empty-card{
            border:1px solid var(--line);
            border-radius:var(--r-lg);
            background:linear-gradient(180deg, rgba(255,255,255,.042), rgba(255,255,255,.018));
            box-shadow:var(--shadow-soft);
        }
        .content-card{
            padding:clamp(22px, 3.2vw, 44px);
            overflow:hidden;
        }
        .cms-content{
            color:#dce5ee;
            font-size:1.05rem;
            line-height:1.95;
            word-break:break-word;
        }
        .cms-content > *:first-child{margin-top:0}
        .cms-content > *:last-child{margin-bottom:0}
        .cms-content p{
            margin:0 0 1.25em;
        }
        .cms-content h2,.cms-content h3,.cms-content h4{
            color:#fff;
            line-height:1.25;
            letter-spacing:-.035em;
            margin:2.1em 0 .8em;
            font-weight:850;
        }
        .cms-content h2{
            font-size:clamp(1.45rem, 2.2vw, 2rem);
            padding-top:.15em;
            position:relative;
        }
        .cms-content h2::before{
            content:"";
            display:block;
            width:42px;
            height:3px;
            border-radius:999px;
            background:linear-gradient(90deg,var(--accent),var(--accent-2));
            margin-bottom:14px;
            box-shadow:0 0 14px rgba(99,240,210,.2);
        }
        .cms-content h3{font-size:clamp(1.18rem, 1.65vw, 1.5rem)}
        .cms-content h4{font-size:1.08rem}
        .cms-content a{
            color:#8ff7df;
            border-bottom:1px solid rgba(99,240,210,.35);
        }
        .cms-content a:hover{
            color:#fff;
            border-color:rgba(255,255,255,.7);
        }
        .cms-content ul,.cms-content ol{
            margin:0 0 1.35em 1.2em;
            padding:0;
        }
        .cms-content li{margin:.42em 0;padding-left:.18em}
        .cms-content blockquote{
            margin:2em 0;
            padding:20px 22px;
            border-left:3px solid var(--accent);
            border-radius:0 var(--r-md) var(--r-md) 0;
            color:#edf7f4;
            background:linear-gradient(90deg, rgba(99,240,210,.10), rgba(255,255,255,.025));
            box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
        }
        .cms-content blockquote p{margin-bottom:.75em}
        .cms-content blockquote p:last-child{margin-bottom:0}
        .cms-content img{
            width:auto;
            max-width:100%;
            height:auto;
            margin:2em auto;
            border-radius:var(--r-md);
            border:1px solid var(--line-strong);
            box-shadow:var(--shadow);
            background:#111823;
        }
        .cms-content figure{
            margin:2.2em 0;
            padding:10px;
            border:1px solid var(--line);
            border-radius:var(--r-lg);
            background:rgba(255,255,255,.026);
        }
        .cms-content figure img{margin:0;border-radius:16px;width:100%}
        .cms-content figcaption{
            color:var(--muted);
            font-size:.88rem;
            padding:10px 6px 2px;
            text-align:center;
        }
        .cms-content hr{
            border:0;
            height:1px;
            margin:2.2em 0;
            background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent);
        }
        .cms-content table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            margin:1.8em 0;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:var(--r-md);
            background:rgba(255,255,255,.025);
        }
        .cms-content th,.cms-content td{
            padding:13px 14px;
            border-bottom:1px solid var(--line);
            color:#dce5ee;
            text-align:left;
        }
        .cms-content th{
            color:#fff;
            background:rgba(99,240,210,.07);
            font-weight:800;
        }
        .cms-content tr:last-child td{border-bottom:0}
        .cms-content code{
            padding:2px 6px;
            border-radius:7px;
            color:#adffe9;
            background:rgba(99,240,210,.09);
            border:1px solid rgba(99,240,210,.16);
        }
        .cms-content pre{
            overflow:auto;
            padding:18px;
            border-radius:var(--r-md);
            border:1px solid var(--line);
            background:#071019;
            color:#dce5ee;
        }
        .content-note{
            margin:0 0 26px;
            padding:16px 18px;
            border-radius:var(--r-md);
            border:1px solid rgba(99,240,210,.18);
            background:linear-gradient(135deg, rgba(99,240,210,.09), rgba(143,123,255,.055));
            color:#cfe8e4;
        }
        .content-note strong{color:#fff}
        .empty-card{
            padding:38px;
            text-align:center;
        }
        .empty-icon{
            width:72px;height:72px;
            display:grid;place-items:center;
            margin:0 auto 18px;
            border-radius:24px;
            color:var(--accent);
            border:1px solid rgba(99,240,210,.2);
            background:rgba(99,240,210,.08);
            font-size:2rem;
        }
        .empty-card h2{
            margin:0 0 10px;
            font-size:1.65rem;
            letter-spacing:-.03em;
        }
        .empty-card p{
            margin:0 auto 22px;
            max-width:520px;
            color:var(--muted);
        }
        .article-sidebar{
            position:sticky;
            top:104px;
            display:grid;
            gap:16px;
        }
        .side-card{
            padding:22px;
        }
        .side-card h2,.side-card h3{
            margin:0 0 14px;
            font-size:1.05rem;
            letter-spacing:-.02em;
            font-weight:850;
        }
        .side-card p{
            color:var(--muted);
            margin:0;
            font-size:.95rem;
        }
        .side-list{
            margin:0;
            padding:0;
            list-style:none;
            display:grid;
            gap:12px;
        }
        .side-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:#c6d1dd;
            font-size:.94rem;
        }
        .side-list li::before{
            content:"";
            flex:0 0 auto;
            width:7px;height:7px;
            margin-top:.67em;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 12px rgba(99,240,210,.5);
        }
        .mini-stats{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            margin-top:16px;
        }
        .mini-stat{
            padding:14px;
            border-radius:var(--r-sm);
            border:1px solid var(--line);
            background:rgba(255,255,255,.025);
        }
        .mini-stat strong{
            display:block;
            color:#fff;
            font-size:1.1rem;
            line-height:1.1;
            letter-spacing:-.02em;
        }
        .mini-stat span{
            display:block;
            color:var(--muted);
            font-size:.78rem;
            margin-top:6px;
        }
        .poster-panel{
            min-height:210px;
            border-radius:var(--r-md);
            border:1px solid var(--line);
            background:
                linear-gradient(160deg, rgba(99,240,210,.12), transparent 34%),
                linear-gradient(20deg, rgba(143,123,255,.14), transparent 42%),
                linear-gradient(180deg, #16212d, #0b1118);
            position:relative;
            overflow:hidden;
            margin-bottom:16px;
        }
        .poster-panel::before{
            content:"";
            position:absolute;
            inset:18px;
            border:1px solid rgba(255,255,255,.12);
            border-radius:18px;
            background:
                linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,.04) 1px, transparent 1px);
            background-size:34px 34px;
            opacity:.42;
        }
        .poster-panel::after{
            content:"VIP MOVIE";
            position:absolute;
            left:20px;
            bottom:18px;
            padding:7px 10px;
            border-radius:999px;
            border:1px solid rgba(99,240,210,.24);
            color:#b8fff0;
            background:rgba(0,0,0,.24);
            font-size:.76rem;
            font-weight:850;
            letter-spacing:.12em;
        }
        .recommend-section{
            padding:0 0 var(--space-8);
        }
        .recommend-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
            align-items:stretch;
        }
        .recommend-card{
            padding:24px;
            transition:transform .22s var(--ease), border-color .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease);
        }
        .recommend-card:hover{
            transform:translateY(-3px);
            border-color:rgba(99,240,210,.28);
            box-shadow:0 18px 38px rgba(0,0,0,.26), 0 0 0 1px rgba(99,240,210,.08) inset;
            background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.02));
        }
        .recommend-card h2,.recommend-card h3{
            margin:0 0 10px;
            font-size:1.25rem;
            letter-spacing:-.03em;
            font-weight:850;
        }
        .recommend-card p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .recommend-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .article-cta{
            margin-top:var(--space-7);
            border-radius:var(--r-lg);
            border:1px solid rgba(99,240,210,.16);
            background:
                radial-gradient(700px 260px at 20% 20%, rgba(99,240,210,.12), transparent 60%),
                radial-gradient(680px 260px at 82% 72%, rgba(143,123,255,.13), transparent 62%),
                linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
            padding:clamp(24px, 4vw, 42px);
            box-shadow:var(--shadow);
            display:grid;
            grid-template-columns:minmax(0, 1fr) auto;
            gap:22px;
            align-items:center;
        }
        .article-cta h2{
            margin:0 0 8px;
            font-size:clamp(1.45rem, 2.4vw, 2.4rem);
            line-height:1.18;
            letter-spacing:-.04em;
            font-weight:900;
        }
        .article-cta p{
            margin:0;
            color:var(--muted);
            max-width:70ch;
        }
        .site-footer{
            position:relative;
            z-index:1;
            padding:42px 0;
            border-top:1px solid var(--line);
            background:linear-gradient(180deg, rgba(9,13,18,.68), rgba(5,8,12,.94));
        }
        .footer-shell{
            display:grid;
            grid-template-columns:minmax(0,1fr) auto;
            gap:30px;
            align-items:start;
        }
        .footer-copy{
            max-width:620px;
            margin:18px 0 14px;
            color:var(--muted);
            font-size:.95rem;
        }
        .footer-note{
            color:var(--muted-2);
            font-size:.9rem;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }
        .footer-links a{
            display:inline-flex;
            align-items:center;
            min-height:38px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            color:var(--muted);
            background:rgba(255,255,255,.022);
            font-size:.92rem;
        }
        .footer-links a:hover,.footer-links a:focus{
            color:#fff;
            border-color:rgba(99,240,210,.28);
            background:rgba(99,240,210,.06);
            transform:translateY(-1px);
        }
        .back-top{
            position:fixed;
            right:22px;
            bottom:22px;
            z-index:50;
            width:46px;
            height:46px;
            border-radius:16px;
            border:1px solid rgba(99,240,210,.22);
            color:var(--accent);
            background:rgba(9,13,18,.78);
            backdrop-filter:blur(12px);
            display:grid;
            place-items:center;
            box-shadow:var(--shadow-soft);
            opacity:0;
            pointer-events:none;
            transform:translateY(8px);
            transition:opacity .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease);
        }
        .back-top.is-visible{
            opacity:1;
            pointer-events:auto;
            transform:translateY(0);
        }
        .back-top:hover{
            border-color:rgba(99,240,210,.48);
            background:rgba(99,240,210,.08);
            color:#fff;
        }
        @media (max-width:1200px){
            .article-layout{grid-template-columns:minmax(0,1fr) 300px;gap:24px}
            .grid-container{padding-left:22px;padding-right:22px}
        }
        @media (max-width:992px){
            .main{padding-top:92px}
            .site-menu{
                position:absolute;
                left:22px;
                right:22px;
                top:82px;
                display:none;
                padding:14px;
                border:1px solid var(--line);
                border-radius:var(--r-md);
                background:rgba(9,13,18,.96);
                box-shadow:var(--shadow);
                backdrop-filter:blur(18px);
            }
            .site-menu.is-open{display:block}
            .site-menu ul{
                flex-direction:column;
                align-items:stretch;
                gap:8px;
            }
            .nav-link{
                justify-content:center;
                width:100%;
            }
            .nav-cta{width:100%;margin-top:10px}
            .menu-toggle{display:inline-flex}
            .article-layout{grid-template-columns:1fr}
            .article-sidebar{position:static;grid-template-columns:1fr 1fr}
            .recommend-grid{grid-template-columns:1fr}
            .article-cta{grid-template-columns:1fr}
            .article-cta .recommend-actions{justify-content:flex-start}
        }
        @media (max-width:768px){
            :root{--space-8:64px;--space-7:46px;--space-6:34px}
            body{line-height:1.68}
            .header-inner{min-height:68px}
            .brand-mark{width:38px;height:38px;border-radius:13px}
            .brand-text strong{font-size:1rem}
            .brand-text span{display:none}
            .article-hero{padding:30px 0 28px}
            .article-shell{border-radius:20px}
            .article-title{font-size:clamp(2rem, 11vw, 3.1rem)}
            .article-summary{font-size:1rem}
            .reading-hint{grid-template-columns:1fr}
            .hint-bars{display:none}
            .article-sidebar{grid-template-columns:1fr}
            .content-card{border-radius:20px}
            .cms-content{font-size:1rem;line-height:1.88}
            .cms-content table{display:block;overflow-x:auto}
            .footer-shell{grid-template-columns:1fr}
            .footer-links{justify-content:flex-start}
        }
        @media (max-width:576px){
            .grid-container{padding-left:16px;padding-right:16px}
            .site-menu{left:16px;right:16px}
            .article-shell{padding:22px 18px}
            .breadcrumb{font-size:.84rem;margin-bottom:18px}
            .article-label-row{gap:8px}
            .badge{font-size:.74rem}
            .article-meta{font-size:.88rem}
            .content-card,.side-card,.recommend-card,.empty-card{padding:20px}
            .recommend-actions,.article-cta .recommend-actions{flex-direction:column}
            .btn{width:100%}
            .mini-stats{grid-template-columns:1fr}
            .back-top{right:16px;bottom:16px}
        }