/* roulang page: index */
:root{
            --bg: #090b0f;
            --bg-2: #0e1117;
            --surface: #11161d;
            --surface-2: #151b24;
            --surface-3: #1b232f;
            --line: rgba(255,255,255,.08);
            --line-strong: rgba(255,255,255,.14);
            --text: #edf2f8;
            --muted: #9ea9b7;
            --soft: #6f7a89;
            --accent: #4fe0c6;
            --accent-2: #a68cff;
            --accent-3: #c6ceda;
            --dangerless: #ff7f50;
            --shadow: 0 24px 60px rgba(0,0,0,.35);
            --shadow-soft: 0 14px 34px rgba(0,0,0,.22);
            --radius-sm: 14px;
            --radius-md: 20px;
            --radius-lg: 28px;
            --radius-xl: 34px;
            --container: 1360px;
            --gap: 24px;
            --header-h: 120px;
            --ease: 220ms 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","Noto Sans SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 20% 0%, rgba(79,224,198,.12), transparent 26%),
                radial-gradient(circle at 90% 10%, rgba(166,140,255,.10), transparent 22%),
                linear-gradient(180deg, #080a0e 0%, #0c1016 40%, #090b0f 100%);
            min-height:100vh;
            overflow-x:hidden;
            padding-top:var(--header-h);
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }

        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(120deg, rgba(255,255,255,.03), transparent 30%),
                radial-gradient(circle at 50% 0%, rgba(255,255,255,.035), transparent 24%);
            opacity:.45;
            mix-blend-mode:soft-light;
            z-index:0;
        }

        a{
            color:inherit;
            text-decoration:none;
            transition:color var(--ease), transform var(--ease), opacity var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease);
        }
        a:hover{color:var(--text)}
        img{max-width:100%;display:block}
        button,input,textarea,select{
            font:inherit;
        }
        ::selection{background:rgba(79,224,198,.26);color:#fff}
        :focus-visible{
            outline:3px solid rgba(79,224,198,.55);
            outline-offset:2px;
        }

        .site-shell{
            position:relative;
            z-index:1;
        }

        .container-xxl{
            max-width:var(--container);
        }

        .site-header{
            position:fixed;
            left:0;
            right:0;
            top:0;
            z-index:1030;
            padding:14px 0 10px;
            backdrop-filter: blur(16px);
            background: linear-gradient(180deg, rgba(8,10,14,.86), rgba(8,10,14,.64));
            border-bottom:1px solid transparent;
            transition:padding var(--ease), background var(--ease), box-shadow var(--ease), border-color var(--ease), transform var(--ease);
        }
        .site-header.is-scrolled{
            padding:8px 0 8px;
            background: linear-gradient(180deg, rgba(6,8,11,.95), rgba(6,8,11,.88));
            box-shadow:0 10px 36px rgba(0,0,0,.24);
            border-color:rgba(255,255,255,.05);
        }
        .site-header .header-inner{
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .brand-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
        }
        .brand-wrap{
            display:flex;
            align-items:center;
            gap:14px;
            min-width:0;
        }
        .brand-mark{
            width:44px;
            height:44px;
            border-radius:16px;
            background:
                linear-gradient(145deg, rgba(79,224,198,.95), rgba(166,140,255,.95));
            box-shadow: 0 10px 24px rgba(79,224,198,.16), inset 0 1px 0 rgba(255,255,255,.26);
            display:grid;
            place-items:center;
            color:#071015;
            font-weight:900;
            letter-spacing:.04em;
            flex:0 0 auto;
        }
        .brand-copy{
            min-width:0;
        }
        .brand-name{
            font-size:1.05rem;
            font-weight:800;
            letter-spacing:.02em;
            line-height:1.1;
            margin:0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{
            margin:.35rem 0 0;
            color:var(--muted);
            font-size:.88rem;
            letter-spacing:.01em;
        }
        .header-tools{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            justify-content:flex-end;
        }
        .status-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 14px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.03);
            color:var(--accent-3);
            font-size:.92rem;
            box-shadow:var(--shadow-soft);
            white-space:nowrap;
        }
        .status-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(79,224,198,.12);
        }
        .search-mini{
            width:min(320px, 36vw);
            position:relative;
        }
        .search-mini input{
            width:100%;
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            color:var(--text);
            border-radius:999px;
            padding:.78rem 1rem .78rem 1rem;
            padding-right:3.2rem;
            transition:background var(--ease), border-color var(--ease), box-shadow var(--ease);
        }
        .search-mini input::placeholder{color:var(--soft)}
        .search-mini input:focus{
            background:rgba(255,255,255,.06);
            border-color:rgba(79,224,198,.38);
            box-shadow:0 0 0 .22rem rgba(79,224,198,.13);
        }
        .search-mini button{
            position:absolute;
            top:50%;
            right:.4rem;
            transform:translateY(-50%);
            width:40px;
            height:40px;
            border:none;
            border-radius:999px;
            background:linear-gradient(135deg, rgba(79,224,198,.95), rgba(166,140,255,.9));
            color:#061016;
            font-weight:900;
            box-shadow:0 8px 20px rgba(79,224,198,.14);
        }

        .nav-secondary{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:10px 14px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.03);
            box-shadow:var(--shadow-soft);
            transition:opacity var(--ease), transform var(--ease), max-height var(--ease), padding var(--ease), margin var(--ease);
        }
        .nav-secondary .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            flex-wrap:wrap;
        }
        .nav-chip{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:.68rem .95rem;
            border-radius:999px;
            color:var(--muted);
            border:1px solid transparent;
            background:transparent;
            font-size:.94rem;
            font-weight:600;
            letter-spacing:.01em;
            white-space:nowrap;
        }
        .nav-chip:hover,
        .nav-chip.active{
            color:var(--text);
            background:rgba(255,255,255,.05);
            border-color:rgba(255,255,255,.08);
            transform:translateY(-1px);
        }
        .nav-quick{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-quick .ghost-link{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:.66rem 1rem;
            border-radius:999px;
            border:1px solid var(--line);
            color:var(--accent-3);
            background:rgba(255,255,255,.02);
            font-size:.94rem;
            font-weight:700;
        }
        .nav-quick .ghost-link:hover{
            background:rgba(255,255,255,.05);
            border-color:rgba(79,224,198,.28);
            transform:translateY(-1px);
            color:var(--text);
        }

        .navbar-toggler{
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            border-radius:14px;
            padding:.72rem .86rem;
            box-shadow:none !important;
        }
        .navbar-toggler:hover{
            background:rgba(255,255,255,.06);
            border-color:rgba(255,255,255,.12);
        }
        .navbar-toggler-icon{
            width:1.15rem;
            height:1.15rem;
            background-image:none;
            position:relative;
        }
        .navbar-toggler-icon::before,
        .navbar-toggler-icon::after,
        .navbar-toggler-icon span{
            content:"";
            position:absolute;
            left:0;
            width:100%;
            height:2px;
            border-radius:999px;
            background:var(--text);
            transition:transform var(--ease), top var(--ease), opacity var(--ease);
        }
        .navbar-toggler-icon::before{top:2px}
        .navbar-toggler-icon::after{top:16px}
        .navbar-toggler-icon span{top:9px}

        .mobile-collapse{
            display:none;
        }

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

        .section-block{
            padding:44px 0;
            scroll-margin-top:130px;
        }
        .section-block.tight-top{
            padding-top:26px;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:.44rem .8rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--accent-3);
            font-size:.85rem;
            letter-spacing:.04em;
            text-transform:none;
            margin-bottom:14px;
        }
        .section-kicker .dot{
            width:7px;height:7px;border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(79,224,198,.12);
        }
        .section-heading{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:22px;
        }
        .section-heading h2{
            margin:0;
            font-size:clamp(1.5rem, 1.1rem + 1vw, 2.3rem);
            line-height:1.15;
            font-weight:850;
            letter-spacing:-.02em;
        }
        .section-heading p{
            margin:0;
            max-width:720px;
            color:var(--muted);
            line-height:1.85;
            font-size:1rem;
        }

        .hero{
            padding-top:24px;
        }
        .hero-panel{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
                linear-gradient(135deg, rgba(17,22,29,.95), rgba(14,18,24,.95));
            box-shadow:var(--shadow);
            padding:28px;
        }
        .hero-panel::before{
            content:"";
            position:absolute;
            inset:-1px;
            background:
                radial-gradient(circle at 0% 0%, rgba(79,224,198,.18), transparent 20%),
                radial-gradient(circle at 100% 0%, rgba(166,140,255,.14), transparent 20%);
            pointer-events:none;
            opacity:.8;
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns: 1.12fr .88fr;
            gap:24px;
            align-items:stretch;
        }
        .hero-left{
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:18px;
            min-width:0;
        }
        .hero-copy{
            padding-right:10px;
        }
        .hero-copy h1{
            margin:10px 0 14px;
            font-size:clamp(2.2rem, 1.1rem + 3vw, 4.6rem);
            line-height:1.02;
            letter-spacing:-.04em;
            font-weight:900;
        }
        .hero-copy p{
            margin:0;
            max-width:54rem;
            color:var(--muted);
            font-size:1.06rem;
            line-height:1.9;
        }
        .hero-tagline{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-top:2px;
        }
        .hero-tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:.55rem .85rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--accent-3);
            font-size:.88rem;
        }
        .hero-tag strong{color:var(--text)}
        .hero-actions{
            display:flex;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            margin-top:16px;
        }
        .btn-neo{
            border:none;
            border-radius:999px;
            padding:.95rem 1.25rem;
            font-weight:800;
            letter-spacing:.01em;
            transition:transform var(--ease), box-shadow var(--ease), background var(--ease), opacity var(--ease);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            text-decoration:none;
            cursor:pointer;
            white-space:nowrap;
        }
        .btn-neo:hover{
            transform:translateY(-2px);
            box-shadow:0 18px 34px rgba(0,0,0,.24);
        }
        .btn-neo:active{
            transform:translateY(0) scale(.99);
        }
        .btn-primary-neo{
            background:linear-gradient(135deg, var(--accent), #7cf0dc);
            color:#061016;
            box-shadow:0 14px 28px rgba(79,224,198,.12);
        }
        .btn-primary-neo:hover{
            color:#061016;
            box-shadow:0 18px 34px rgba(79,224,198,.16);
        }
        .btn-secondary-neo{
            background:rgba(255,255,255,.03);
            color:var(--text);
            border:1px solid var(--line);
        }
        .btn-secondary-neo:hover{
            background:rgba(255,255,255,.06);
            border-color:rgba(255,255,255,.12);
            color:var(--text);
        }
        .hero-stats{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:16px;
        }
        .stat-pill{
            min-width:132px;
            padding:12px 14px;
            border-radius:18px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            box-shadow:var(--shadow-soft);
        }
        .stat-pill b{
            display:block;
            font-size:1.2rem;
            font-weight:900;
            letter-spacing:-.02em;
            margin-bottom:2px;
        }
        .stat-pill span{
            display:block;
            color:var(--muted);
            font-size:.86rem;
            line-height:1.45;
        }

        .hero-form{
            margin-top:6px;
            padding:18px;
            border-radius:24px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
        }
        .hero-form .form-label{
            color:var(--accent-3);
            font-size:.92rem;
            margin-bottom:.45rem;
        }
        .hero-form .form-control{
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            color:var(--text);
            border-radius:14px;
            padding:.9rem 1rem;
            box-shadow:none;
        }
        .hero-form .form-control::placeholder{color:var(--soft)}
        .hero-form .form-control:focus{
            background:rgba(255,255,255,.06);
            border-color:rgba(79,224,198,.45);
            box-shadow:0 0 0 .22rem rgba(79,224,198,.12);
            color:var(--text);
        }
        .hero-form .btn-neo{
            width:100%;
            min-height:52px;
        }

        .hero-right{
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .display-panel{
            position:relative;
            overflow:hidden;
            border-radius:28px;
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02)),
                linear-gradient(145deg, rgba(17,23,30,.96), rgba(13,16,22,.92));
            min-height:100%;
            box-shadow:var(--shadow-soft);
            padding:18px;
        }
        .display-panel::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(circle at 18% 18%, rgba(79,224,198,.14), transparent 18%),
                radial-gradient(circle at 80% 12%, rgba(166,140,255,.12), transparent 16%),
                linear-gradient(transparent 0 0);
            pointer-events:none;
        }
        .display-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            margin-bottom:16px;
            position:relative;
        }
        .display-top h3{
            margin:0;
            font-size:1.02rem;
            font-weight:800;
        }
        .display-top .mini{
            color:var(--muted);
            font-size:.88rem;
        }
        .metric-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:12px;
            position:relative;
        }
        .metric-card{
            padding:16px;
            border-radius:22px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            box-shadow:var(--shadow-soft);
            min-height:118px;
            transition:transform var(--ease), border-color var(--ease), background var(--ease), box-shadow var(--ease);
        }
        .metric-card:hover{
            transform:translateY(-3px);
            border-color:rgba(79,224,198,.22);
            background:rgba(255,255,255,.05);
            box-shadow:0 18px 36px rgba(0,0,0,.26);
        }
        .metric-card .num{
            display:block;
            font-size:1.9rem;
            font-weight:900;
            line-height:1;
            letter-spacing:-.03em;
            margin-bottom:8px;
        }
        .metric-card .cap{
            color:var(--muted);
            font-size:.88rem;
            line-height:1.6;
        }
        .metric-card.big{
            grid-column:1 / -1;
            min-height:auto;
            padding:18px;
            background:
                linear-gradient(145deg, rgba(79,224,198,.09), rgba(166,140,255,.08)),
                rgba(255,255,255,.03);
        }
        .metric-card.big .num{
            font-size:2.6rem;
            color:var(--accent);
            margin-bottom:6px;
        }
        .panel-list{
            margin-top:14px;
            display:grid;
            gap:10px;
            position:relative;
        }
        .panel-row{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border-radius:16px;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
        }
        .panel-row strong{
            display:block;
            font-size:.95rem;
        }
        .panel-row span{
            color:var(--muted);
            font-size:.86rem;
        }
        .progress-line{
            height:8px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            overflow:hidden;
            border:1px solid rgba(255,255,255,.05);
            margin-top:6px;
        }
        .progress-line i{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--accent), var(--accent-2));
        }

        .surface-card{
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
                rgba(17,22,29,.92);
            box-shadow:var(--shadow-soft);
            padding:24px;
            transition:transform var(--ease), border-color var(--ease), box-shadow var(--ease), background var(--ease);
        }
        .surface-card:hover{
            transform:translateY(-3px);
            border-color:rgba(79,224,198,.18);
            box-shadow:0 18px 38px rgba(0,0,0,.28);
        }

        .feature-grid{
            display:grid;
            grid-template-columns:1.3fr .85fr .85fr;
            gap:18px;
            align-items:stretch;
        }
        .feature-main{
            position:relative;
            overflow:hidden;
            min-height:100%;
            padding:28px;
            background:
                linear-gradient(145deg, rgba(79,224,198,.07), rgba(166,140,255,.05)),
                rgba(255,255,255,.03);
        }
        .feature-main .icon-box,
        .small-feature .icon-box,
        .case-card .icon-box,
        .plan-card .icon-box,
        .highlight-card .icon-box,
        .news-side .icon-box,
        .contact-card .icon-box{
            width:46px;
            height:46px;
            border-radius:16px;
            background:linear-gradient(135deg, rgba(79,224,198,.18), rgba(166,140,255,.14));
            border:1px solid rgba(255,255,255,.08);
            display:grid;
            place-items:center;
            color:var(--accent);
            margin-bottom:14px;
            flex:0 0 auto;
        }
        .feature-main h3,
        .small-feature h3,
        .case-card h3,
        .plan-card h3,
        .highlight-card h3,
        .news-side h3,
        .contact-card h3{
            margin:0 0 10px;
            font-size:1.14rem;
            line-height:1.25;
            font-weight:800;
        }
        .feature-main p,
        .small-feature p,
        .case-card p,
        .plan-card p,
        .highlight-card p,
        .news-side p,
        .contact-card p{
            margin:0;
            color:var(--muted);
            line-height:1.8;
            font-size:.96rem;
        }
        .feature-main .bullets{
            list-style:none;
            padding:0;
            margin:18px 0 0;
            display:grid;
            gap:10px;
        }
        .feature-main .bullets li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--accent-3);
            line-height:1.7;
        }
        .feature-main .bullets li i{
            width:18px;
            height:18px;
            margin-top:3px;
            border-radius:50%;
            background:rgba(79,224,198,.14);
            border:1px solid rgba(79,224,198,.28);
            flex:0 0 auto;
            position:relative;
        }
        .feature-main .bullets li i::after{
            content:"";
            position:absolute;
            inset:5px;
            border-radius:50%;
            background:var(--accent);
        }
        .small-feature{
            padding:20px;
            display:flex;
            flex-direction:column;
            gap:10px;
        }
        .small-feature .label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            width:fit-content;
            padding:.35rem .65rem;
            border-radius:999px;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
            color:var(--accent-3);
            font-size:.84rem;
        }
        .small-feature .label .mini-dot{
            width:7px;height:7px;border-radius:50%;background:var(--accent-2);
        }
        .small-feature .footer-link{
            margin-top:auto;
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--accent);
            font-weight:800;
            width:fit-content;
        }

        .data-band{
            position:relative;
            overflow:hidden;
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:
                linear-gradient(135deg, rgba(79,224,198,.08), rgba(166,140,255,.06)),
                rgba(17,22,29,.9);
            box-shadow:var(--shadow-soft);
            padding:20px;
        }
        .data-band-grid{
            display:grid;
            grid-template-columns: 1.15fr repeat(4, 1fr);
            gap:14px;
            align-items:stretch;
        }
        .data-highlight{
            border-radius:24px;
            padding:22px;
            background:rgba(255,255,255,.03);
            border:1px solid var(--line);
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            min-height:100%;
        }
        .data-highlight .num{
            font-size:clamp(3rem, 2.2rem + 2vw, 4.6rem);
            line-height:1;
            letter-spacing:-.05em;
            font-weight:900;
            color:var(--accent);
        }
        .data-highlight p{
            margin:10px 0 0;
            color:var(--muted);
            line-height:1.8;
        }
        .data-mini{
            padding:18px;
            border-radius:22px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            min-height:100%;
        }
        .data-mini b{
            display:block;
            font-size:1.55rem;
            font-weight:900;
            margin-bottom:6px;
            letter-spacing:-.03em;
        }
        .data-mini span{
            color:var(--muted);
            font-size:.9rem;
            line-height:1.7;
        }
        .data-mini .tag-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:12px;
        }

        .badge-soft{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:.35rem .65rem;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            color:var(--accent-3);
            font-size:.84rem;
            line-height:1;
            white-space:nowrap;
        }
        .badge-accent{
            background:rgba(79,224,198,.12);
            border-color:rgba(79,224,198,.22);
            color:var(--accent);
        }
        .badge-purple{
            background:rgba(166,140,255,.12);
            border-color:rgba(166,140,255,.2);
            color:#d8cbff;
        }
        .badge-quiet{
            background:rgba(255,255,255,.03);
        }

        .cases-grid{
            display:grid;
            grid-template-columns: 1.2fr .8fr .8fr;
            gap:18px;
        }
        .case-card{
            overflow:hidden;
            position:relative;
            padding:20px;
        }
        .case-card.hero-case{
            min-height:100%;
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
                linear-gradient(145deg, rgba(79,224,198,.07), rgba(166,140,255,.05));
        }
        .case-media{
            aspect-ratio:16/9;
            border-radius:24px;
            overflow:hidden;
            border:1px solid var(--line);
            background:
                linear-gradient(135deg, rgba(79,224,198,.16), rgba(166,140,255,.12)),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01));
            position:relative;
            margin-bottom:16px;
        }
        .case-media::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(120deg, rgba(255,255,255,.10), transparent 35%),
                radial-gradient(circle at 12% 18%, rgba(255,255,255,.18), transparent 9%),
                radial-gradient(circle at 80% 70%, rgba(0,0,0,.22), transparent 12%);
            opacity:.9;
        }
        .case-media .overlay{
            position:absolute;
            inset:14px;
            border-radius:20px;
            border:1px solid rgba(255,255,255,.08);
            background:linear-gradient(145deg, rgba(7,10,14,.28), rgba(7,10,14,.08));
            backdrop-filter:blur(1px);
        }
        .case-meta{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:8px;
            margin:12px 0 0;
        }
        .case-card .case-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:14px;
            font-weight:800;
            color:var(--accent);
        }
        .mini-stack{
            display:grid;
            gap:18px;
        }

        .highlight-wall{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:18px;
        }
        .highlight-card{
            padding:20px;
            min-height:100%;
        }
        .highlight-card .icon-box{
            margin-bottom:12px;
        }
        .highlight-card .meta-line{
            display:flex;
            align-items:center;
            gap:8px;
            margin-top:14px;
            color:var(--muted);
            font-size:.88rem;
        }
        .highlight-card .meta-line strong{
            color:var(--text);
        }

        .plans-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:18px;
        }
        .plan-card{
            padding:24px;
            display:flex;
            flex-direction:column;
            gap:10px;
            position:relative;
        }
        .plan-card.featured{
            border-color:rgba(79,224,198,.25);
            background:
                linear-gradient(135deg, rgba(79,224,198,.08), rgba(166,140,255,.07)),
                rgba(255,255,255,.035);
            transform:translateY(-2px);
        }
        .plan-card .price-like{
            display:flex;
            align-items:baseline;
            gap:8px;
            margin-top:2px;
        }
        .plan-card .price-like b{
            font-size:1.9rem;
            line-height:1;
            font-weight:900;
            letter-spacing:-.03em;
        }
        .plan-card .price-like span{
            color:var(--muted);
            font-size:.92rem;
        }
        .plan-card ul{
            list-style:none;
            padding:0;
            margin:10px 0 0;
            display:grid;
            gap:10px;
        }
        .plan-card li{
            color:var(--accent-3);
            line-height:1.7;
            display:flex;
            gap:10px;
        }
        .plan-card li::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            margin-top:.55rem;
            background:var(--accent);
            box-shadow:0 0 0 4px rgba(79,224,198,.1);
            flex:0 0 auto;
        }
        .plan-card .plan-foot{
            margin-top:auto;
            padding-top:12px;
            display:flex;
            gap:10px;
            align-items:center;
            flex-wrap:wrap;
        }

        .updates-layout{
            display:grid;
            grid-template-columns: 1.28fr .72fr;
            gap:18px;
        }
        .news-list{
            display:grid;
            gap:14px;
        }
        .news-item{
            display:block;
            padding:18px;
            border-radius:22px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:rgba(79,224,198,.22);
            background:rgba(255,255,255,.05);
            color:var(--text);
        }
        .news-meta{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            margin-bottom:10px;
        }
        .news-item h3{
            margin:0 0 8px;
            font-size:1.1rem;
            font-weight:800;
            line-height:1.35;
        }
        .news-item p{
            margin:0;
            color:var(--muted);
            line-height:1.75;
            font-size:.95rem;
        }
        .news-more{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:12px;
            color:var(--accent);
            font-weight:800;
        }
        .empty-state{
            padding:24px;
            border-radius:22px;
            border:1px dashed rgba(255,255,255,.12);
            color:var(--muted);
            background:rgba(255,255,255,.02);
        }
        .news-side{
            padding:24px;
            display:flex;
            flex-direction:column;
            gap:16px;
        }
        .news-side .side-row{
            padding:16px;
            border-radius:18px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
        }
        .news-side .side-row strong{
            display:block;
            margin-bottom:6px;
        }
        .news-side .side-row p{
            margin:0;
            color:var(--muted);
            line-height:1.7;
            font-size:.94rem;
        }

        .accordion-wrap{
            border-radius:var(--radius-xl);
            overflow:hidden;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            box-shadow:var(--shadow-soft);
        }
        .accordion{
            --bs-accordion-bg: transparent;
            --bs-accordion-border-color: transparent;
            --bs-accordion-btn-bg: transparent;
            --bs-accordion-active-bg: transparent;
            --bs-accordion-btn-focus-box-shadow: none;
            --bs-accordion-btn-padding-x: 1.15rem;
            --bs-accordion-btn-padding-y: 1.15rem;
            --bs-accordion-body-padding-x: 1.15rem;
            --bs-accordion-body-padding-y: 0 1.15rem 1.15rem 1.15rem;
        }
        .accordion-item{
            border:0;
            border-top:1px solid var(--line);
            background:transparent;
        }
        .accordion-item:first-child{border-top:0}
        .accordion-button{
            color:var(--text);
            background:transparent;
            box-shadow:none;
            font-weight:800;
            padding:1.1rem 1.2rem;
            line-height:1.5;
        }
        .accordion-button:not(.collapsed){
            color:var(--text);
            background:rgba(255,255,255,.03);
            box-shadow:none;
        }
        .accordion-button::after{
            filter:invert(1) grayscale(1) brightness(1.3);
            opacity:.9;
        }
        .accordion-body{
            color:var(--muted);
            line-height:1.9;
            padding:0 1.2rem 1.2rem;
        }

        .cta-band{
            border-radius:28px;
            border:1px solid var(--line);
            background:
                linear-gradient(135deg, rgba(79,224,198,.10), rgba(166,140,255,.08)),
                rgba(255,255,255,.03);
            box-shadow:var(--shadow-soft);
            padding:22px 24px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            flex-wrap:wrap;
        }
        .cta-band h3{
            margin:0 0 6px;
            font-size:1.15rem;
            font-weight:850;
        }
        .cta-band p{
            margin:0;
            color:var(--muted);
            line-height:1.75;
        }

        .contact-layout{
            display:grid;
            grid-template-columns: 1fr .9fr;
            gap:18px;
        }
        .contact-form .form-control,
        .contact-form .form-select,
        .contact-form textarea{
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            border-radius:16px;
            color:var(--text);
            padding:.95rem 1rem;
            box-shadow:none;
        }
        .contact-form .form-control::placeholder,
        .contact-form textarea::placeholder{
            color:var(--soft);
        }
        .contact-form .form-control:focus,
        .contact-form .form-select:focus,
        .contact-form textarea:focus{
            background:rgba(255,255,255,.06);
            border-color:rgba(79,224,198,.45);
            box-shadow:0 0 0 .22rem rgba(79,224,198,.12);
            color:var(--text);
        }
        .contact-form label{
            color:var(--accent-3);
            margin-bottom:.45rem;
            font-size:.95rem;
        }
        .contact-form textarea{
            min-height:148px;
            resize:vertical;
        }
        .contact-aside{
            display:grid;
            gap:14px;
        }
        .contact-card{
            padding:20px;
            min-height:100%;
        }
        .contact-card .point-list{
            list-style:none;
            padding:0;
            margin:14px 0 0;
            display:grid;
            gap:10px;
        }
        .contact-card .point-list li{
            display:flex;
            gap:10px;
            color:var(--accent-3);
            line-height:1.7;
        }
        .contact-card .point-list li::before{
            content:"";
            width:10px;height:10px;
            margin-top:.45rem;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(79,224,198,.08);
        }

        .footer{
            padding:26px 0 34px;
        }
        .footer-card{
            border-radius:26px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            box-shadow:var(--shadow-soft);
            padding:24px;
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:20px;
            flex-wrap:wrap;
        }
        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:10px;
            min-width:min(100%, 520px);
        }
        .footer-brand .name{
            font-size:1.22rem;
            font-weight:900;
            letter-spacing:-.02em;
        }
        .footer-brand .desc{
            margin:0;
            color:var(--muted);
            line-height:1.8;
            max-width:62ch;
        }
        .footer-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:flex-end;
        }
        .footer-links a{
            padding:.62rem .9rem;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.02);
            color:var(--accent-3);
            font-size:.92rem;
            font-weight:700;
        }
        .footer-links a:hover{
            background:rgba(255,255,255,.05);
            color:var(--text);
            border-color:rgba(255,255,255,.12);
            transform:translateY(-1px);
        }
        .footer-bottom{
            margin-top:18px;
            padding-top:18px;
            border-top:1px solid var(--line);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            color:var(--muted);
            font-size:.92rem;
        }

        .back-top{
            position:fixed;
            right:18px;
            bottom:18px;
            z-index:1040;
            width:50px;
            height:50px;
            border:none;
            border-radius:18px;
            background:linear-gradient(135deg, rgba(79,224,198,.96), rgba(166,140,255,.9));
            color:#051018;
            box-shadow:0 18px 34px rgba(0,0,0,.28);
            opacity:0;
            visibility:hidden;
            transform:translateY(10px);
            transition:opacity var(--ease), visibility var(--ease), transform var(--ease), box-shadow var(--ease);
        }
        .back-top.show{
            opacity:1;
            visibility:visible;
            transform:translateY(0);
        }
        .back-top:hover{
            transform:translateY(-2px);
            box-shadow:0 22px 42px rgba(0,0,0,.32);
        }

        .content-wrap{
            display:flex;
            flex-direction:column;
            gap:18px;
        }

        @media (max-width: 1199.98px){
            .hero-grid,
            .feature-grid,
            .data-band-grid,
            .cases-grid,
            .updates-layout,
            .contact-layout{
                grid-template-columns:1fr;
            }
            .highlight-wall{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .plans-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .data-band-grid{
                gap:12px;
            }
            .data-highlight{
                min-height:auto;
            }
            .search-mini{
                width:min(280px, 34vw);
            }
        }
        @media (max-width: 991.98px){
            :root{--header-h: 112px;}
            .section-heading{
                flex-direction:column;
                align-items:flex-start;
            }
            .site-header .header-inner{
                gap:8px;
            }
            .nav-secondary{
                padding:.45rem .7rem;
            }
            .nav-chip{
                padding:.58rem .8rem;
                font-size:.9rem;
            }
            .feature-grid{
                gap:14px;
            }
            .cases-grid{
                gap:14px;
            }
        }
        @media (max-width: 767.98px){
            :root{--header-h: 94px;}
            body{
                padding-top:var(--header-h);
            }
            .brand-sub,
            .search-mini,
            .nav-secondary{
                display:none;
            }
            .header-tools{
                justify-content:flex-end;
            }
            .mobile-collapse{
                display:block;
            }
            .desktop-nav{
                display:none;
            }
            .brand-mark{
                width:40px;height:40px;border-radius:14px;
            }
            .brand-name{
                font-size:1rem;
            }
            .hero-panel,
            .surface-card,
            .display-panel,
            .data-band,
            .footer-card{
                padding:18px;
                border-radius:24px;
            }
            .hero-copy h1{
                font-size:clamp(2rem, 1.2rem + 4vw, 3rem);
            }
            .hero-actions .btn-neo{
                flex:1 1 100%;
            }
            .hero-stats{
                gap:8px;
            }
            .stat-pill{
                flex:1 1 calc(50% - 8px);
                min-width:0;
            }
            .metric-grid{
                grid-template-columns:1fr;
            }
            .data-band-grid{
                grid-template-columns:1fr;
            }
            .highlight-wall,
            .plans-grid{
                grid-template-columns:1fr;
            }
            .cta-band{
                padding:18px;
            }
            .cta-band .btn-neo{
                width:100%;
            }
            .footer-top,
            .footer-bottom{
                align-items:flex-start;
            }
            .footer-links{
                justify-content:flex-start;
            }
            .back-top{
                right:14px;
                bottom:14px;
            }
        }
        @media (max-width: 575.98px){
            :root{--header-h: 88px;}
            .hero-panel{padding:16px}
            .surface-card{padding:16px}
            .section-block{padding:34px 0}
            .hero-actions{gap:10px}
            .hero-actions .btn-neo{
                width:100%;
            }
            .stat-pill{
                flex:1 1 100%;
            }
            .brand-row{
                gap:10px;
            }
            .header-tools .status-pill{
                padding:.58rem .8rem;
                font-size:.86rem;
            }
            .accordion-button{
                padding:1rem 1rem;
            }
            .accordion-body{
                padding:0 1rem 1rem;
            }
            .contact-form .btn-neo{
                width:100%;
            }
        }

        @media (prefers-reduced-motion: reduce){
            html{scroll-behavior:auto}
            *, *::before, *::after{
                animation-duration:.01ms !important;
                animation-iteration-count:1 !important;
                transition-duration:.01ms !important;
                scroll-behavior:auto !important;
            }
        }

/* roulang page: article */
:root{
            --bg:#090b0f;
            --bg-2:#0e1117;
            --surface:#11161d;
            --surface-2:#151b24;
            --surface-3:#1b232f;
            --panel:#10151c;
            --line:rgba(255,255,255,.08);
            --line-strong:rgba(255,255,255,.14);
            --text:#edf2f8;
            --muted:#9ea9b7;
            --soft:#6f7a89;
            --accent:#4fe0c6;
            --accent-2:#a68cff;
            --accent-3:#c6ceda;
            --dangerless:#ff7f50;
            --shadow:0 24px 60px rgba(0,0,0,.35);
            --shadow-soft:0 14px 34px rgba(0,0,0,.22);
            --radius-sm:14px;
            --radius-md:20px;
            --radius-lg:28px;
            --radius-xl:34px;
            --container:1360px;
            --gap:24px;
            --header-h:120px;
            --ease:220ms 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","Noto Sans SC",sans-serif;
            color:var(--text);
            background:
                radial-gradient(circle at 20% 0%, rgba(79,224,198,.12), transparent 26%),
                radial-gradient(circle at 90% 10%, rgba(166,140,255,.10), transparent 22%),
                linear-gradient(180deg,#080a0e 0%,#0c1016 40%,#090b0f 100%);
            min-height:100vh;
            overflow-x:hidden;
            padding-top:var(--header-h);
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background:
                linear-gradient(120deg,rgba(255,255,255,.03),transparent 30%),
                radial-gradient(circle at 50% 0%,rgba(255,255,255,.035),transparent 24%);
            opacity:.45;
            mix-blend-mode:soft-light;
            z-index:0;
        }
        a{
            color:inherit;
            text-decoration:none;
            transition:color var(--ease),transform var(--ease),opacity var(--ease),border-color var(--ease),background var(--ease),box-shadow var(--ease);
        }
        a:hover{color:var(--text)}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        input,textarea,button{outline:none}
        ::selection{background:rgba(79,224,198,.32);color:#fff}
        .container-xxl{max-width:var(--container);position:relative;z-index:1}
        .site-header{
            position:fixed;
            left:0;
            right:0;
            top:0;
            z-index:1030;
            padding:14px 0 10px;
            backdrop-filter:blur(16px);
            background:linear-gradient(180deg,rgba(8,10,14,.86),rgba(8,10,14,.64));
            border-bottom:1px solid transparent;
            transition:padding var(--ease),background var(--ease),box-shadow var(--ease),border-color var(--ease),transform var(--ease);
        }
        .site-header.is-scrolled{
            padding:8px 0;
            background:linear-gradient(180deg,rgba(6,8,11,.95),rgba(6,8,11,.88));
            box-shadow:0 10px 36px rgba(0,0,0,.24);
            border-color:rgba(255,255,255,.05);
        }
        .site-header .header-inner{display:flex;flex-direction:column;gap:10px}
        .brand-row{display:flex;align-items:center;justify-content:space-between;gap:16px}
        .brand-wrap{display:flex;align-items:center;gap:14px;min-width:0}
        .brand-mark{
            width:44px;
            height:44px;
            border-radius:16px;
            background:linear-gradient(145deg,rgba(79,224,198,.95),rgba(166,140,255,.95));
            box-shadow:0 10px 24px rgba(79,224,198,.16),inset 0 1px 0 rgba(255,255,255,.26);
            display:grid;
            place-items:center;
            color:#071015;
            font-weight:900;
            letter-spacing:.04em;
            flex:0 0 auto;
        }
        .brand-copy{min-width:0}
        .brand-name{
            font-size:1.05rem;
            font-weight:800;
            letter-spacing:.02em;
            line-height:1.1;
            margin:0;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .brand-sub{margin:.35rem 0 0;color:var(--muted);font-size:.88rem;letter-spacing:.01em}
        .header-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:flex-end}
        .status-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 14px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.03);
            color:var(--accent-3);
            font-size:.92rem;
            box-shadow:var(--shadow-soft);
            white-space:nowrap;
        }
        .status-dot{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 5px rgba(79,224,198,.10);
        }
        .search-mini{width:min(320px,36vw);position:relative}
        .search-mini input{
            width:100%;
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            color:var(--text);
            border-radius:999px;
            padding:.78rem 3.2rem .78rem 1rem;
            transition:background var(--ease),border-color var(--ease),box-shadow var(--ease);
        }
        .search-mini input::placeholder{color:var(--soft)}
        .search-mini input:focus{
            background:rgba(255,255,255,.06);
            border-color:rgba(79,224,198,.38);
            box-shadow:0 0 0 .22rem rgba(79,224,198,.13);
        }
        .search-mini button{
            position:absolute;
            top:50%;
            right:.4rem;
            transform:translateY(-50%);
            width:40px;
            height:40px;
            border:none;
            border-radius:999px;
            background:rgba(79,224,198,.14);
            color:var(--accent);
            display:grid;
            place-items:center;
            transition:background var(--ease),transform var(--ease);
        }
        .search-mini button:hover{background:rgba(79,224,198,.22);transform:translateY(-50%) scale(1.03)}
        .nav-secondary{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:8px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            border-radius:999px;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        .nav-links{display:flex;align-items:center;gap:6px;min-width:0;overflow-x:auto;scrollbar-width:none}
        .nav-links::-webkit-scrollbar{display:none}
        .nav-chip{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            padding:.7rem 1rem;
            border-radius:999px;
            color:var(--muted);
            font-size:.94rem;
            white-space:nowrap;
            border:1px solid transparent;
        }
        .nav-chip:hover{
            color:var(--text);
            background:rgba(255,255,255,.055);
            transform:translateY(-1px);
        }
        .nav-chip.active{
            color:#081015;
            background:linear-gradient(135deg,var(--accent),rgba(166,140,255,.92));
            box-shadow:0 12px 26px rgba(79,224,198,.15);
            font-weight:800;
        }
        .nav-quick{flex:0 0 auto}
        .ghost-link{
            display:inline-flex;
            align-items:center;
            padding:.7rem 1rem;
            border-radius:999px;
            color:var(--accent);
            border:1px solid rgba(79,224,198,.22);
            background:rgba(79,224,198,.06);
            font-size:.94rem;
        }
        .ghost-link:hover{border-color:rgba(79,224,198,.45);background:rgba(79,224,198,.11);transform:translateY(-1px)}
        .navbar-toggler{
            border:1px solid var(--line);
            border-radius:14px;
            padding:10px;
            width:44px;
            height:44px;
            background:rgba(255,255,255,.04);
            box-shadow:none!important;
        }
        .navbar-toggler:focus{box-shadow:0 0 0 .22rem rgba(79,224,198,.16)!important}
        .navbar-toggler-icon{
            background-image:none!important;
            display:block;
            width:22px;
            height:16px;
            position:relative;
        }
        .navbar-toggler-icon::before,.navbar-toggler-icon::after,.navbar-toggler-icon span{
            content:"";
            position:absolute;
            left:0;
            width:22px;
            height:2px;
            border-radius:10px;
            background:var(--text);
            transition:transform var(--ease),opacity var(--ease),top var(--ease);
        }
        .navbar-toggler-icon::before{top:0}
        .navbar-toggler-icon span{top:7px}
        .navbar-toggler-icon::after{top:14px}
        .mobile-collapse{display:none}
        .page-shell{position:relative;z-index:1}
        .article-hero{padding:52px 0 32px}
        .breadcrumb-panel{
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:22px;
            color:var(--muted);
            font-size:.95rem;
        }
        .breadcrumb-panel a{
            color:var(--accent-3);
            padding:6px 10px;
            border:1px solid var(--line);
            border-radius:999px;
            background:rgba(255,255,255,.03);
        }
        .breadcrumb-panel a:hover{color:var(--accent);border-color:rgba(79,224,198,.35)}
        .breadcrumb-panel .split{color:var(--soft)}
        .article-head{
            border:1px solid var(--line);
            background:
                linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,.025)),
                radial-gradient(circle at 76% 16%,rgba(79,224,198,.12),transparent 28%),
                radial-gradient(circle at 16% 70%,rgba(166,140,255,.10),transparent 26%);
            border-radius:var(--radius-xl);
            box-shadow:var(--shadow);
            padding:34px;
            overflow:hidden;
            position:relative;
        }
        .article-head::after{
            content:"";
            position:absolute;
            right:34px;
            bottom:30px;
            width:220px;
            height:130px;
            border-radius:28px;
            border:1px solid rgba(255,255,255,.09);
            background:
                linear-gradient(90deg,rgba(79,224,198,.12),transparent),
                repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 16px);
            opacity:.55;
            transform:rotate(-4deg);
            pointer-events:none;
        }
        .article-kicker{
            display:flex;
            align-items:center;
            gap:10px;
            flex-wrap:wrap;
            margin-bottom:18px;
            position:relative;
            z-index:1;
        }
        .badge-soft,.meta-pill{
            display:inline-flex;
            align-items:center;
            gap:7px;
            padding:8px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            color:var(--accent-3);
            background:rgba(255,255,255,.04);
            font-size:.9rem;
            line-height:1;
        }
        .badge-soft.hot{
            color:#071015;
            background:linear-gradient(135deg,var(--accent),rgba(166,140,255,.95));
            border-color:transparent;
            font-weight:800;
        }
        .article-title{
            position:relative;
            z-index:1;
            max-width:920px;
            margin:0;
            font-size:clamp(2rem,4.5vw,4.75rem);
            line-height:1.08;
            letter-spacing:-.055em;
            font-weight:900;
        }
        .article-summary{
            position:relative;
            z-index:1;
            max-width:860px;
            margin:20px 0 0;
            color:var(--muted);
            font-size:1.08rem;
            line-height:1.9;
        }
        .article-meta{
            position:relative;
            z-index:1;
            display:flex;
            align-items:center;
            flex-wrap:wrap;
            gap:10px;
            margin-top:26px;
        }
        .cover-stage{padding:0 0 34px}
        .cover-card{
            border-radius:var(--radius-xl);
            border:1px solid var(--line);
            background:linear-gradient(145deg,rgba(17,22,29,.95),rgba(21,27,36,.86));
            box-shadow:var(--shadow);
            overflow:hidden;
            min-height:360px;
            display:grid;
            grid-template-columns:1.12fr .88fr;
        }
        .cover-visual{
            min-height:360px;
            position:relative;
            background:
                radial-gradient(circle at 34% 24%,rgba(79,224,198,.25),transparent 26%),
                radial-gradient(circle at 78% 66%,rgba(166,140,255,.22),transparent 28%),
                linear-gradient(145deg,#121923,#0b0f15);
            overflow:hidden;
        }
        .cover-visual::before{
            content:"";
            position:absolute;
            inset:42px;
            border-radius:28px;
            border:1px solid rgba(255,255,255,.10);
            background:
                linear-gradient(135deg,rgba(255,255,255,.11),rgba(255,255,255,.025)),
                repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 28px);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 70px rgba(0,0,0,.32);
        }
        .cover-visual::after{
            content:"ccc36";
            position:absolute;
            left:70px;
            bottom:54px;
            font-size:clamp(3rem,8vw,7rem);
            line-height:1;
            font-weight:950;
            letter-spacing:-.08em;
            color:rgba(237,242,248,.07);
        }
        .cover-info{
            padding:34px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:28px;
        }
        .score-row{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
        .score-tile{
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            border-radius:22px;
            padding:18px;
        }
        .score-tile strong{display:block;font-size:2rem;line-height:1;font-weight:900;color:var(--accent)}
        .score-tile span{display:block;margin-top:8px;color:var(--muted);font-size:.92rem}
        .quote-box{
            border-left:3px solid var(--accent);
            padding:8px 0 8px 18px;
            color:var(--accent-3);
            line-height:1.9;
            font-size:1rem;
        }
        .content-section{padding:28px 0 54px}
        .content-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) 340px;
            gap:26px;
            align-items:start;
        }
        .reader-card,.side-card,.related-card,.not-found-card,.contact-strip{
            border:1px solid var(--line);
            background:linear-gradient(180deg,rgba(17,22,29,.88),rgba(14,18,24,.92));
            border-radius:var(--radius-lg);
            box-shadow:var(--shadow-soft);
        }
        .reader-card{padding:36px}
        .reader-lead{
            border:1px solid rgba(79,224,198,.18);
            background:rgba(79,224,198,.055);
            color:var(--accent-3);
            border-radius:24px;
            padding:18px 20px;
            line-height:1.85;
            margin-bottom:28px;
        }
        .article-content{
            color:#dfe6ef;
            font-size:1.06rem;
            line-height:2.05;
            word-break:break-word;
        }
        .article-content h2,.article-content h3,.article-content h4{
            color:var(--text);
            font-weight:900;
            letter-spacing:-.03em;
            margin:2.1em 0 .85em;
            line-height:1.25;
        }
        .article-content h2{font-size:1.75rem;padding-top:.2rem}
        .article-content h3{font-size:1.35rem}
        .article-content h4{font-size:1.15rem}
        .article-content p{margin:0 0 1.25em}
        .article-content a{color:var(--accent);border-bottom:1px solid rgba(79,224,198,.28)}
        .article-content a:hover{border-color:rgba(79,224,198,.68)}
        .article-content ul,.article-content ol{padding-left:1.35rem;margin:0 0 1.35em}
        .article-content li{margin:.45rem 0}
        .article-content blockquote{
            margin:1.6rem 0;
            padding:20px 22px;
            border-left:4px solid var(--accent-2);
            border-radius:18px;
            background:rgba(166,140,255,.075);
            color:var(--accent-3);
        }
        .article-content img{
            border-radius:24px;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
            margin:1.7rem 0;
            width:100%;
            height:auto;
        }
        .article-content table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            margin:1.6rem 0;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:18px;
            color:var(--accent-3);
        }
        .article-content th,.article-content td{
            padding:14px 16px;
            border-bottom:1px solid var(--line);
            background:rgba(255,255,255,.025);
        }
        .article-content tr:last-child th,.article-content tr:last-child td{border-bottom:none}
        .side-stack{display:flex;flex-direction:column;gap:18px;position:sticky;top:138px}
        .side-card{padding:22px}
        .side-title{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:16px;
            font-weight:900;
            letter-spacing:-.02em;
        }
        .side-title span{
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--accent);
            box-shadow:0 0 0 6px rgba(79,224,198,.10);
        }
        .toc-list,.mini-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
        .toc-list a,.mini-list a{
            display:flex;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.025);
            border-radius:16px;
            color:var(--muted);
        }
        .toc-list a:hover,.mini-list a:hover{
            color:var(--text);
            border-color:rgba(79,224,198,.30);
            background:rgba(79,224,198,.055);
            transform:translateY(-2px);
        }
        .mini-list small{color:var(--soft);white-space:nowrap}
        .keyword-cloud{display:flex;flex-wrap:wrap;gap:8px}
        .keyword-cloud span{
            display:inline-flex;
            padding:8px 10px;
            border-radius:999px;
            border:1px solid var(--line);
            color:var(--accent-3);
            background:rgba(255,255,255,.035);
            font-size:.88rem;
        }
        .related-section{padding:0 0 52px}
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:20px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(1.55rem,3vw,2.4rem);
            line-height:1.18;
            font-weight:900;
            letter-spacing:-.04em;
        }
        .section-head p{margin:.5rem 0 0;color:var(--muted);line-height:1.8;max-width:660px}
        .related-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:20px}
        .related-card{
            padding:24px;
            transition:transform var(--ease),border-color var(--ease),box-shadow var(--ease),background var(--ease);
            min-height:190px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            gap:18px;
        }
        .related-card:hover{
            transform:translateY(-4px);
            border-color:rgba(79,224,198,.26);
            box-shadow:0 24px 52px rgba(0,0,0,.28);
            background:linear-gradient(180deg,rgba(21,27,36,.98),rgba(14,18,24,.94));
        }
        .related-card.featured{
            background:
                radial-gradient(circle at 84% 14%,rgba(79,224,198,.13),transparent 30%),
                linear-gradient(180deg,rgba(17,22,29,.92),rgba(14,18,24,.95));
        }
        .related-card h3{margin:0;font-size:1.25rem;font-weight:900;letter-spacing:-.03em}
        .related-card p{margin:.75rem 0 0;color:var(--muted);line-height:1.8}
        .card-link{display:inline-flex;align-items:center;gap:8px;color:var(--accent);font-weight:800}
        .card-link::after{content:"→";transition:transform var(--ease)}
        .related-card:hover .card-link::after{transform:translateX(4px)}
        .faq-section{padding:0 0 52px}
        .accordion{display:grid;gap:12px}
        .accordion-item{
            border:1px solid var(--line)!important;
            border-radius:22px!important;
            overflow:hidden;
            background:rgba(17,22,29,.82)!important;
            color:var(--text);
        }
        .accordion-button{
            color:var(--text)!important;
            background:rgba(255,255,255,.025)!important;
            border:0!important;
            box-shadow:none!important;
            padding:20px 22px;
            font-weight:900;
            letter-spacing:-.02em;
        }
        .accordion-button::after{
            filter:invert(1) grayscale(1);
            opacity:.75;
        }
        .accordion-button:not(.collapsed){
            color:var(--accent)!important;
            background:rgba(79,224,198,.055)!important;
        }
        .accordion-body{
            color:var(--muted);
            line-height:1.9;
            padding:0 22px 22px;
            background:rgba(255,255,255,.015);
        }
        .cta-section{padding:0 0 58px}
        .contact-strip{
            display:grid;
            grid-template-columns:1fr 420px;
            gap:24px;
            padding:28px;
            background:
                radial-gradient(circle at 10% 0%,rgba(79,224,198,.14),transparent 28%),
                radial-gradient(circle at 90% 80%,rgba(166,140,255,.12),transparent 28%),
                linear-gradient(135deg,rgba(17,22,29,.94),rgba(12,16,22,.98));
        }
        .contact-strip h2{
            margin:0;
            font-size:clamp(1.6rem,3.5vw,3rem);
            line-height:1.16;
            font-weight:950;
            letter-spacing:-.055em;
        }
        .contact-strip p{margin:14px 0 0;color:var(--muted);line-height:1.9;max-width:760px}
        .cta-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
        .btn-main,.btn-muted{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:9px;
            min-height:48px;
            padding:0 20px;
            border-radius:999px;
            border:1px solid transparent;
            font-weight:900;
            transition:transform var(--ease),box-shadow var(--ease),background var(--ease),border-color var(--ease),color var(--ease);
        }
        .btn-main{
            color:#071015;
            background:linear-gradient(135deg,var(--accent),rgba(166,140,255,.95));
            box-shadow:0 18px 34px rgba(79,224,198,.16);
        }
        .btn-main:hover{color:#071015;transform:translateY(-3px);box-shadow:0 24px 44px rgba(79,224,198,.22)}
        .btn-muted{
            color:var(--accent-3);
            border-color:var(--line);
            background:rgba(255,255,255,.04);
        }
        .btn-muted:hover{color:var(--text);transform:translateY(-3px);border-color:rgba(255,255,255,.20);background:rgba(255,255,255,.07)}
        .btn-main:active,.btn-muted:active{transform:translateY(0) scale(.98)}
        .btn-main:focus-visible,.btn-muted:focus-visible,.nav-chip:focus-visible,.ghost-link:focus-visible,.brand-mark:focus-visible,.brand-name:focus-visible{
            outline:3px solid rgba(79,224,198,.35);
            outline-offset:3px;
        }
        .quick-form{
            border:1px solid var(--line);
            background:rgba(255,255,255,.035);
            border-radius:24px;
            padding:18px;
        }
        .form-field{margin-bottom:12px}
        .form-field label{
            display:block;
            color:var(--accent-3);
            font-size:.9rem;
            margin-bottom:8px;
        }
        .form-field input,.form-field textarea{
            width:100%;
            border:1px solid var(--line);
            background:rgba(7,10,14,.54);
            color:var(--text);
            border-radius:16px;
            padding:12px 14px;
            transition:border-color var(--ease),box-shadow var(--ease),background var(--ease);
        }
        .form-field textarea{min-height:96px;resize:vertical}
        .form-field input::placeholder,.form-field textarea::placeholder{color:var(--soft)}
        .form-field input:focus,.form-field textarea:focus{
            border-color:rgba(79,224,198,.42);
            box-shadow:0 0 0 .22rem rgba(79,224,198,.12);
            background:rgba(7,10,14,.72);
        }
        .quick-form .btn-main{width:100%;border:none}
        .not-found-card{
            padding:42px;
            text-align:center;
        }
        .not-found-card h2{margin:0 0 12px;font-size:2rem;font-weight:950;letter-spacing:-.04em}
        .not-found-card p{color:var(--muted);line-height:1.8;margin:0 0 22px}
        .footer{position:relative;z-index:1;padding:10px 0 34px}
        .footer-card{
            border:1px solid var(--line);
            background:rgba(10,13,18,.78);
            border-radius:var(--radius-lg);
            padding:26px;
            box-shadow:var(--shadow-soft);
        }
        .footer-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:24px;
            padding-bottom:20px;
            border-bottom:1px solid var(--line);
        }
        .footer-brand .name{font-weight:950;font-size:1.25rem;letter-spacing:-.02em}
        .footer-brand p{margin:10px 0 0;color:var(--muted);line-height:1.8;max-width:650px}
        .footer-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
        .footer-links a{
            color:var(--muted);
            border:1px solid var(--line);
            background:rgba(255,255,255,.025);
            border-radius:999px;
            padding:9px 12px;
            font-size:.92rem;
        }
        .footer-links a:hover{color:var(--accent);border-color:rgba(79,224,198,.28);background:rgba(79,224,198,.055)}
        .footer-bottom{
            display:flex;
            justify-content:space-between;
            gap:14px;
            flex-wrap:wrap;
            padding-top:18px;
            color:var(--soft);
            font-size:.92rem;
        }
        .back-top{
            position:fixed;
            right:20px;
            bottom:20px;
            z-index:1020;
            width:46px;
            height:46px;
            border-radius:16px;
            border:1px solid var(--line);
            background:rgba(17,22,29,.86);
            color:var(--accent);
            display:grid;
            place-items:center;
            box-shadow:var(--shadow-soft);
            opacity:0;
            pointer-events:none;
            transform:translateY(10px);
            transition:opacity var(--ease),transform var(--ease),background var(--ease),border-color var(--ease);
        }
        .back-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}
        .back-top:hover{background:rgba(79,224,198,.10);border-color:rgba(79,224,198,.32)}
        @media (max-width:1199.98px){
            :root{--header-h:112px}
            .content-grid{grid-template-columns:minmax(0,1fr) 300px}
            .cover-card{grid-template-columns:1fr}
            .cover-visual{min-height:300px}
            .contact-strip{grid-template-columns:1fr}
        }
        @media (max-width:991.98px){
            :root{--header-h:88px}
            body{padding-top:var(--header-h)}
            .site-header{padding:10px 0}
            .desktop-nav{display:none!important}
            .mobile-collapse{display:block}
            .brand-sub{display:none}
            .status-pill{display:none}
            .site-header .header-inner{gap:8px}
            #mobileMenu .nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;overflow:visible}
            #mobileMenu .nav-chip{justify-content:flex-start}
            .content-grid{grid-template-columns:1fr}
            .side-stack{position:static}
            .related-grid{grid-template-columns:1fr}
            .article-head{padding:28px}
            .article-head::after{opacity:.22}
        }
        @media (max-width:767.98px){
            .article-hero{padding:34px 0 24px}
            .article-head{border-radius:26px;padding:24px}
            .article-title{font-size:clamp(1.85rem,9vw,3rem)}
            .article-summary{font-size:1rem}
            .article-meta{gap:8px}
            .cover-visual{min-height:240px}
            .cover-visual::before{inset:24px;border-radius:22px}
            .cover-visual::after{left:38px;bottom:34px}
            .cover-info{padding:24px}
            .score-row{grid-template-columns:1fr}
            .reader-card{padding:24px;border-radius:24px}
            .article-content{font-size:1rem;line-height:1.95}
            .section-head{display:block}
            .contact-strip{padding:22px;border-radius:24px}
            .footer-top{display:block}
            .footer-links{justify-content:flex-start;margin-top:18px}
        }
        @media (max-width:575.98px){
            :root{--header-h:78px}
            .brand-mark{width:40px;height:40px;border-radius:14px}
            .brand-name{font-size:1rem}
            .header-tools{gap:8px}
            .article-head{padding:20px}
            .breadcrumb-panel{font-size:.88rem}
            .badge-soft,.meta-pill{font-size:.82rem;padding:7px 10px}
            .reader-card,.side-card,.related-card,.not-found-card{padding:20px}
            .cta-actions{display:grid;grid-template-columns:1fr}
            .btn-main,.btn-muted{width:100%}
            #mobileMenu .nav-links{grid-template-columns:1fr}
            .footer-card{padding:20px}
            .footer-bottom{display:grid;grid-template-columns:1fr}
            .back-top{right:14px;bottom:14px}
        }

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