/* roulang page: index */
:root{
            --bg:#090b10;
            --bg-elev:#0f1218;
            --panel:#121520;
            --panel-2:#171b26;
            --panel-3:#1d2230;
            --line:rgba(255,255,255,.08);
            --line-strong:rgba(255,255,255,.14);
            --text:#f3f5f9;
            --muted:#a8afbd;
            --muted-2:#7d8596;
            --accent:#ce5c7f;
            --accent-2:#a67be7;
            --accent-soft:rgba(206,92,127,.18);
            --good:#60d5aa;
            --warn:#f0b25c;
            --shadow:0 24px 80px rgba(0,0,0,.42);
            --shadow-soft:0 12px 30px rgba(0,0,0,.24);
            --radius:20px;
            --radius-sm:14px;
            --container:1200px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:24px;
            --space-5:32px;
            --space-6:48px;
            --space-7:64px;
            --focus:0 0 0 3px rgba(206,92,127,.28);
        }

        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            color:var(--text);
            background:
                radial-gradient(1100px circle at 18% -10%, rgba(206,92,127,.18), transparent 46%),
                radial-gradient(900px circle at 82% 0%, rgba(166,123,231,.12), transparent 42%),
                linear-gradient(180deg, #090b10 0%, #0a0c12 100%);
            line-height:1.72;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size:40px 40px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.28), transparent 85%);
            opacity:.22;
        }
        ::selection{background:rgba(206,92,127,.32);color:#fff}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .skip-link{
            position:absolute;
            left:-9999px;
            top:auto;
        }
        .skip-link:focus{
            left:16px;
            top:16px;
            z-index:9999;
            padding:12px 16px;
            background:var(--panel-3);
            border:1px solid var(--line-strong);
            border-radius:999px;
            box-shadow:var(--shadow-soft);
        }

        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:blur(18px);
            background:linear-gradient(180deg, rgba(9,11,16,.94), rgba(9,11,16,.74));
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .topbar{
            border-bottom:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.015);
        }
        .topbar-inner{
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:8px 0;
            color:var(--muted);
            font-size:13px;
        }
        .topbar-left,.topbar-center,.topbar-right{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
        }
        .topbar-center{
            flex:1;
            justify-content:center;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .mini-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            font-size:12px;
            line-height:1;
        }
        .mini-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid rgba(206,92,127,.35);
            color:#fff;
            background:linear-gradient(135deg, rgba(206,92,127,.20), rgba(166,123,231,.12));
            transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
        }
        .mini-btn:hover{transform:translateY(-1px);border-color:rgba(206,92,127,.55);box-shadow:0 12px 24px rgba(0,0,0,.18)}
        .mini-btn:focus-visible{outline:none;box-shadow:var(--focus), 0 12px 24px rgba(0,0,0,.18)}

        .nav-wrap{
            padding:14px 0;
        }
        .nav-inner{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
            min-width:0;
            white-space:nowrap;
        }
        .brand-mark{
            width:36px;
            height:36px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:
                radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, rgba(206,92,127,.9), rgba(166,123,231,.68));
            box-shadow:0 10px 24px rgba(206,92,127,.18);
            border:1px solid rgba(255,255,255,.08);
            flex:0 0 auto;
        }
        .brand-text{
            font-size:1rem;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-link,
        .nav-cta{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            border:1px solid transparent;
            color:var(--muted);
            transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
        }
        .nav-link:hover,
        .nav-cta:hover{
            transform:translateY(-1px);
            color:var(--text);
            background:rgba(255,255,255,.035);
            border-color:var(--line);
        }
        .nav-link.active{
            color:#fff;
            background:rgba(255,255,255,.04);
            border-color:var(--line-strong);
            box-shadow:var(--shadow-soft);
        }
        .nav-cta{
            color:#fff;
            background:linear-gradient(135deg, rgba(206,92,127,.92), rgba(166,123,231,.78));
            border-color:rgba(255,255,255,.06);
            box-shadow:0 16px 30px rgba(206,92,127,.14);
        }
        .nav-cta:hover{box-shadow:0 20px 34px rgba(206,92,127,.22)}
        .nav-link:focus-visible,
        .nav-cta:focus-visible,
        .btn:focus-visible,
        .field:focus-visible,
        .summary-row:focus-visible{
            outline:none;
            box-shadow:var(--focus);
        }
        .nav-toggle{
            display:none;
            width:46px;
            height:46px;
            padding:0;
            border:1px solid var(--line);
            border-radius:14px;
            background:rgba(255,255,255,.03);
            color:var(--text);
            align-items:center;
            justify-content:center;
            gap:4px;
            flex-direction:column;
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .nav-toggle span{
            width:18px;
            height:2px;
            border-radius:999px;
            background:currentColor;
            display:block;
        }
        .nav-toggle:hover{transform:translateY(-1px);border-color:var(--line-strong);background:rgba(255,255,255,.05)}

        .section{
            padding:72px 0;
            position:relative;
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:28px;
        }
        .section-head .copy{
            max-width:700px;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:12px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:#d9dce6;
            font-size:12px;
            letter-spacing:.08em;
            text-transform:none;
        }
        .section-kicker::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 0 4px rgba(206,92,127,.12);
        }
        .section-title{
            margin:0;
            font-size:clamp(1.6rem, 3vw, 2.4rem);
            line-height:1.15;
            letter-spacing:-.02em;
        }
        .section-desc{
            margin:12px 0 0;
            color:var(--muted);
            max-width:70ch;
        }
        .section-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:#fff;
            padding:12px 14px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
            flex:0 0 auto;
        }
        .section-link:hover{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:rgba(255,255,255,.05);
        }

        .hero{
            padding-top:26px;
            padding-bottom:32px;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:1.55fr .95fr;
            gap:20px;
            align-items:stretch;
        }
        .hero-main,
        .hero-side,
        .card,
        .metric-card,
        .compare-card,
        .news-panel,
        .aside-card,
        .faq-card,
        .form-card,
        .footer-card{
            position:relative;
            overflow:hidden;
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.018));
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-soft);
        }
        .hero-main{
            padding:36px;
            min-height:540px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            background:
                radial-gradient(800px circle at 15% 18%, rgba(206,92,127,.14), transparent 36%),
                radial-gradient(520px circle at 72% 10%, rgba(166,123,231,.10), transparent 30%),
                linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.02));
        }
        .hero-hero{
            max-width:720px;
        }
        .hero-eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.03);
            color:#e7e9ef;
            font-size:12px;
            letter-spacing:.06em;
            margin-bottom:18px;
        }
        .hero-eyebrow::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            background:var(--good);
            box-shadow:0 0 0 4px rgba(96,213,170,.12);
        }
        .hero h1{
            margin:0;
            font-size:clamp(2.2rem, 5vw, 4.7rem);
            line-height:1.02;
            letter-spacing:-.04em;
            max-width:11ch;
        }
        .hero p{
            margin:18px 0 0;
            max-width:62ch;
            color:var(--muted);
            font-size:1.02rem;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:12px;
            margin-top:28px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            border:1px solid transparent;
            transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
            white-space:nowrap;
            user-select:none;
        }
        .btn-primary{
            color:#fff;
            background:linear-gradient(135deg, rgba(206,92,127,.96), rgba(166,123,231,.84));
            box-shadow:0 18px 34px rgba(206,92,127,.18);
        }
        .btn-primary:hover{transform:translateY(-1px);box-shadow:0 22px 38px rgba(206,92,127,.24)}
        .btn-ghost{
            color:var(--text);
            background:rgba(255,255,255,.03);
            border-color:var(--line);
        }
        .btn-ghost:hover{transform:translateY(-1px);background:rgba(255,255,255,.05);border-color:var(--line-strong)}
        .btn-soft{
            color:#f7dbe5;
            background:rgba(206,92,127,.12);
            border-color:rgba(206,92,127,.20);
        }
        .btn-soft:hover{transform:translateY(-1px);background:rgba(206,92,127,.18);border-color:rgba(206,92,127,.28)}
        .hero-chips{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:#dfe3ec;
            font-size:13px;
        }
        .chip .dot{
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            box-shadow:0 0 0 4px rgba(206,92,127,.12);
        }
        .hero-bottom{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            margin-top:28px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
        }
        .hero-mini-stats{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
        }
        .mini-stat{
            padding:12px 14px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            min-width:132px;
        }
        .mini-stat strong{
            display:block;
            font-size:1.05rem;
            color:#fff;
            margin-bottom:4px;
        }
        .mini-stat span{
            display:block;
            color:var(--muted);
            font-size:13px;
        }

        .hero-side{
            display:grid;
            grid-template-rows:1.15fr .85fr;
            gap:20px;
            background:transparent;
            border:none;
            box-shadow:none;
        }
        .visual-card{
            padding:24px;
            min-height:250px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
                radial-gradient(600px circle at 50% 0%, rgba(206,92,127,.14), transparent 30%);
        }
        .visual-title{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:14px;
            margin-bottom:18px;
        }
        .visual-title strong{
            font-size:1rem;
        }
        .visual-title span{
            color:var(--muted);
            font-size:13px;
        }
        .signal-card{
            position:relative;
            height:160px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:
                radial-gradient(circle at 20% 20%, rgba(206,92,127,.18), transparent 24%),
                radial-gradient(circle at 80% 30%, rgba(166,123,231,.14), transparent 24%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            overflow:hidden;
        }
        .signal-card::before,
        .signal-card::after{
            content:"";
            position:absolute;
            inset:auto;
            background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0));
            border-radius:999px;
            opacity:.35;
        }
        .signal-card::before{
            width:1px;height:114px;left:24px;top:22px;
            opacity:.14;
            box-shadow:
                48px 20px 0 rgba(255,255,255,.12),
                92px 6px 0 rgba(255,255,255,.10),
                154px 32px 0 rgba(255,255,255,.16),
                214px 12px 0 rgba(255,255,255,.13),
                278px 44px 0 rgba(255,255,255,.09),
                336px 24px 0 rgba(255,255,255,.17);
        }
        .signal-card::after{
            width:calc(100% - 44px);
            height:1px;
            left:22px;
            top:76px;
            background:linear-gradient(90deg, rgba(255,255,255,.15), rgba(255,255,255,.04));
        }
        .signal-meta{
            position:absolute;
            inset:auto 16px 14px 16px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color:#dfe3eb;
            font-size:13px;
        }
        .signal-badge{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 10px;
            border-radius:999px;
            background:rgba(0,0,0,.18);
            border:1px solid rgba(255,255,255,.08);
            color:#fff;
        }
        .signal-badge i{
            width:8px;height:8px;border-radius:50%;
            background:var(--good);
            display:inline-block;
            box-shadow:0 0 0 4px rgba(96,213,170,.12);
        }
        .hero-mini-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:14px;
        }
        .hero-mini{
            padding:18px;
            min-height:126px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .hero-mini strong{
            display:block;
            font-size:1.02rem;
            margin-bottom:8px;
        }
        .hero-mini p{
            margin:0;
            color:var(--muted);
            font-size:13px;
        }
        .hero-mini .mini-foot{
            margin-top:12px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color:#dfe3ec;
            font-size:12px;
        }
        .hero-strip{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:20px;
        }
        .strip-item{
            flex:1 1 190px;
            min-height:56px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:14px 16px;
            border-radius:16px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
        }
        .strip-item strong{display:block;font-size:14px;color:#fff}
        .strip-item span{display:block;color:var(--muted);font-size:12px}
        .strip-item .num{
            font-size:1.1rem;
            color:#fff;
            font-weight:700;
        }

        .metrics-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:16px;
        }
        .metric-card{
            padding:24px;
            min-height:186px;
            transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
        }
        .metric-card:hover{
            transform:translateY(-3px);
            border-color:var(--line-strong);
            box-shadow:0 20px 42px rgba(0,0,0,.24);
        }
        .metric-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
            margin-bottom:20px;
        }
        .metric-number{
            font-size:2rem;
            line-height:1;
            letter-spacing:-.04em;
            font-weight:800;
        }
        .metric-tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:7px 10px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color:#e8ebf2;
            font-size:12px;
            white-space:nowrap;
        }
        .metric-title{
            margin:0 0 8px;
            font-size:1.05rem;
        }
        .metric-desc{
            margin:0;
            color:var(--muted);
            font-size:13px;
        }
        .meter{
            margin-top:18px;
            height:8px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            overflow:hidden;
        }
        .meter > span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--accent), var(--accent-2));
        }

        .matrix-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr;
            gap:18px;
            align-items:stretch;
        }
        .matrix-feature,
        .matrix-side{
            display:grid;
            gap:18px;
        }
        .matrix-feature{
            padding:28px;
            min-height:420px;
            background:
                radial-gradient(800px circle at 18% 18%, rgba(206,92,127,.12), transparent 28%),
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        }
        .matrix-feature .feature-flag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:16px;
            color:#fff;
            font-size:12px;
        }
        .feature-flag .flag-dot{
            width:9px;height:9px;border-radius:50%;
            background:var(--good);
            box-shadow:0 0 0 4px rgba(96,213,170,.12);
        }
        .matrix-feature h3{
            margin:0;
            font-size:clamp(1.45rem, 3vw, 2.1rem);
            line-height:1.14;
        }
        .matrix-feature p{
            margin:14px 0 0;
            color:var(--muted);
            max-width:58ch;
        }
        .matrix-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 11px;
            border-radius:999px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:#edf0f6;
            font-size:12px;
        }
        .tag::before{
            content:"";
            width:7px;height:7px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
        }
        .matrix-preview{
            margin-top:auto;
            display:grid;
            gap:12px;
            grid-template-columns:repeat(2, minmax(0, 1fr));
        }
        .preview-card{
            min-height:104px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            padding:16px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
        }
        .preview-card strong{
            font-size:1rem;
            display:block;
        }
        .preview-card span{
            color:var(--muted);
            font-size:12px;
        }
        .matrix-side .card{
            padding:20px;
            min-height:120px;
            display:flex;
            flex-direction:column;
            justify-content:space-between;
            transition:transform .18s ease, border-color .18s ease;
        }
        .matrix-side .card:hover{
            transform:translateY(-2px);
            border-color:var(--line-strong);
        }
        .card-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
        }
        .card-top strong{
            display:block;
            font-size:1rem;
        }
        .card-top span{
            color:var(--muted);
            font-size:12px;
        }
        .card p{
            margin:10px 0 0;
            color:var(--muted);
            font-size:13px;
        }
        .card-action{
            margin-top:14px;
            color:#fff;
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:13px;
        }
        .card-action .arrow{
            transition:transform .18s ease;
        }
        .card:hover .card-action .arrow{
            transform:translateX(2px);
        }

        .compare-grid{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:16px;
        }
        .compare-card{
            padding:24px;
        }
        .compare-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:18px;
        }
        .compare-head strong{
            font-size:1.05rem;
        }
        .compare-head .label{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 10px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            font-size:12px;
            color:#edf0f6;
        }
        .compare-list{
            display:grid;
            gap:14px;
        }
        .compare-item{
            padding:14px 0;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .compare-item:first-child{
            border-top:none;
            padding-top:0;
        }
        .compare-item .row{
            display:flex;
            justify-content:space-between;
            gap:12px;
            margin-bottom:8px;
            color:#eef1f7;
            font-size:14px;
        }
        .bar{
            height:8px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            overflow:hidden;
        }
        .bar span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--accent), var(--accent-2));
        }
        .compare-note{
            margin-top:18px;
            color:var(--muted);
            font-size:13px;
        }
        .compare-bullets{
            display:grid;
            gap:10px;
            margin-top:16px;
        }
        .compare-bullets .bullet{
            display:flex;
            gap:10px;
            color:#dfe3ec;
            font-size:13px;
        }
        .compare-bullets .bullet i{
            width:18px;height:18px;border-radius:50%;
            flex:0 0 auto;
            margin-top:2px;
            background:rgba(96,213,170,.14);
            border:1px solid rgba(96,213,170,.28);
            position:relative;
        }
        .compare-bullets .bullet i::after{
            content:"";
            position:absolute;
            inset:5px;
            border-radius:50%;
            background:var(--good);
        }

        .latest-grid{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
            align-items:start;
        }
        .news-panel{
            padding:20px;
        }
        .news-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .news-item{
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            border-radius:18px;
            overflow:hidden;
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:var(--line-strong);
            background:rgba(255,255,255,.045);
        }
        .news-link{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:14px;
            padding:16px;
            align-items:start;
        }
        .news-thumb{
            width:72px;
            aspect-ratio:4/3;
            border-radius:14px;
            background:
                radial-gradient(circle at 20% 25%, rgba(206,92,127,.40), transparent 30%),
                radial-gradient(circle at 78% 20%, rgba(166,123,231,.30), transparent 28%),
                linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
            border:1px solid rgba(255,255,255,.08);
            position:relative;
            overflow:hidden;
        }
        .news-thumb::after{
            content:"";
            position:absolute;
            inset:8px;
            border-radius:11px;
            border:1px solid rgba(255,255,255,.08);
            opacity:.7;
        }
        .news-body{
            min-width:0;
        }
        .news-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:8px;
        }
        .news-badge{
            display:inline-flex;
            align-items:center;
            min-height:26px;
            padding:0 9px;
            border-radius:999px;
            background:rgba(255,255,255,.04);
            border:1px solid rgba(255,255,255,.08);
            color:#e7eaf1;
            font-size:12px;
        }
        .news-time{
            color:var(--muted-2);
        }
        .news-title{
            margin:0;
            font-size:1.02rem;
            line-height:1.35;
            letter-spacing:-.01em;
        }
        .news-summary{
            margin:10px 0 0;
            color:var(--muted);
            font-size:13px;
        }
        .news-more{
            display:inline-flex;
            align-items:center;
            gap:6px;
            color:#fff;
            font-size:13px;
            white-space:nowrap;
            padding-top:2px;
        }
        .news-item .news-more .arrow{
            transition:transform .18s ease;
        }
        .news-item:hover .news-more .arrow{transform:translateX(2px)}
        .news-empty{
            padding:22px 16px;
            color:#dfe3ec;
            border-radius:16px;
            border:1px dashed rgba(255,255,255,.12);
            background:rgba(255,255,255,.03);
        }
        .latest-side{
            display:grid;
            gap:16px;
        }
        .aside-card{
            padding:20px;
        }
        .aside-card strong{
            display:block;
            font-size:1rem;
            margin-bottom:8px;
        }
        .aside-card p{
            margin:0;
            color:var(--muted);
            font-size:13px;
        }
        .aside-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:16px;
        }

        .faq-list{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:14px;
        }
        .faq-card{
            padding:0;
        }
        .faq-card details{
            padding:0;
        }
        .faq-card summary{
            list-style:none;
            cursor:pointer;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:20px 20px 18px;
            color:#fff;
            font-weight:600;
        }
        .faq-card summary::-webkit-details-marker{display:none}
        .faq-card summary::after{
            content:"+";
            width:28px;
            height:28px;
            display:grid;
            place-items:center;
            border-radius:50%;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.03);
            color:#f3f5f9;
            flex:0 0 auto;
            transition:transform .18s ease, background .18s ease;
        }
        .faq-card[open] summary{
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .faq-card[open] summary::after{
            content:"–";
            background:rgba(206,92,127,.12);
            border-color:rgba(206,92,127,.26);
        }
        .faq-body{
            padding:0 20px 20px;
            color:var(--muted);
            font-size:13px;
        }

        .contact-grid{
            display:grid;
            grid-template-columns: .92fr 1.08fr;
            gap:18px;
            align-items:start;
        }
        .contact-panel{
            padding:28px;
            min-height:100%;
            background:
                radial-gradient(700px circle at 10% 10%, rgba(206,92,127,.12), transparent 28%),
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
        }
        .contact-panel h2{
            margin:0;
            font-size:clamp(1.5rem, 3vw, 2.2rem);
            line-height:1.15;
        }
        .contact-panel p{
            margin:14px 0 0;
            color:var(--muted);
            max-width:54ch;
        }
        .contact-points{
            display:grid;
            gap:10px;
            margin-top:20px;
        }
        .contact-point{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:#dfe3ec;
            font-size:13px;
        }
        .contact-point i{
            width:20px;height:20px;border-radius:50%;
            background:rgba(206,92,127,.14);
            border:1px solid rgba(206,92,127,.24);
            flex:0 0 auto;
            position:relative;
            margin-top:2px;
        }
        .contact-point i::after{
            content:"";
            position:absolute;
            inset:6px;
            border-radius:50%;
            background:var(--accent);
        }
        .form-card{
            padding:22px;
        }
        .form-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:14px;
        }
        .field-wrap{
            display:grid;
            gap:8px;
        }
        .field-wrap.full{grid-column:1 / -1}
        .field-label{
            color:#e6e9f1;
            font-size:13px;
        }
        .field,
        textarea{
            width:100%;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(255,255,255,.03);
            color:var(--text);
            padding:14px 14px;
            outline:none;
            transition:border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
        }
        .field::placeholder,
        textarea::placeholder{color:#7d8596}
        .field:focus,
        textarea:focus{
            border-color:rgba(206,92,127,.48);
            background:rgba(255,255,255,.045);
            box-shadow:var(--focus);
        }
        textarea{
            min-height:132px;
            resize:vertical;
        }
        .field-row{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
        }
        .captcha-box{
            min-width:96px;
            padding:14px 16px;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.10);
            background:linear-gradient(135deg, rgba(206,92,127,.10), rgba(166,123,231,.08));
            color:#fff;
            text-align:center;
            font-weight:700;
            letter-spacing:.18em;
        }
        .form-note{
            color:var(--muted);
            font-size:12px;
            margin-top:12px;
        }
        .agree-row{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--muted);
            font-size:13px;
            line-height:1.5;
        }
        .agree-row input{
            margin-top:3px;
            accent-color:var(--accent);
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:16px;
        }

        .site-footer{
            padding:0 0 34px;
        }
        .footer-card{
            padding:28px;
            background:
                radial-gradient(700px circle at 0% 0%, rgba(206,92,127,.10), transparent 26%),
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr 1fr 1fr;
            gap:18px;
        }
        .footer-brand .brand{
            margin-bottom:12px;
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:36ch;
            font-size:13px;
        }
        .footer-col h3{
            margin:0 0 12px;
            font-size:14px;
            color:#fff;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:var(--muted);
            transition:color .18s ease, transform .18s ease;
        }
        .footer-links a:hover{
            color:#fff;
            transform:translateX(2px);
        }
        .footer-meta{
            display:grid;
            gap:10px;
            color:var(--muted);
            font-size:13px;
        }
        .footer-line{
            margin-top:22px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            justify-content:space-between;
            color:var(--muted-2);
            font-size:12px;
        }

        .card:hover,
        .metric-card:hover,
        .news-item:hover,
        .faq-card:hover,
        .aside-card:hover{
            border-color:var(--line-strong);
        }
        .card:active,
        .metric-card:active,
        .news-item:active{
            transform:translateY(0);
        }

        @media (max-width: 1120px){
            .hero-grid,
            .matrix-grid,
            .latest-grid,
            .contact-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .hero-main{
                min-height:auto;
            }
            .hero-side{
                grid-template-rows:auto;
            }
            .metrics-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .faq-list{
                grid-template-columns:1fr;
            }
            .section-head{
                align-items:flex-start;
                flex-direction:column;
            }
        }

        @media (max-width: 768px){
            .topbar-inner{
                flex-wrap:wrap;
                justify-content:center;
                text-align:center;
            }
            .topbar-left,.topbar-center,.topbar-right{
                justify-content:center;
                width:100%;
            }
            .nav-toggle{display:inline-flex}
            .nav-links{
                display:none;
                position:absolute;
                top:calc(100% + 12px);
                left:0;
                right:0;
                flex-direction:column;
                align-items:stretch;
                gap:8px;
                padding:14px;
                border:1px solid rgba(255,255,255,.08);
                border-radius:18px;
                background:rgba(14,16,22,.98);
                box-shadow:var(--shadow);
            }
            .site-header.menu-open .nav-links{display:flex}
            .nav-link,.nav-cta{
                justify-content:flex-start;
                width:100%;
            }
            .hero{
                padding-top:18px;
            }
            .hero-main{
                padding:24px;
            }
            .hero h1{
                max-width:100%;
            }
            .hero-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
            .hero-mini-grid{
                grid-template-columns:1fr;
            }
            .metrics-grid{
                grid-template-columns:1fr;
            }
            .matrix-feature{
                min-height:auto;
            }
            .matrix-preview{
                grid-template-columns:1fr;
            }
            .news-link{
                grid-template-columns:1fr;
            }
            .news-thumb{
                width:100%;
                aspect-ratio:16/9;
            }
            .form-grid{
                grid-template-columns:1fr;
            }
            .section{
                padding:56px 0;
            }
        }

        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 24px));
            }
            .brand-text{
                max-width:11ch;
            }
            .hero-main,
            .matrix-feature,
            .contact-panel,
            .form-card,
            .news-panel,
            .footer-card,
            .metric-card,
            .compare-card,
            .aside-card{
                border-radius:18px;
            }
            .hero h1{
                font-size:clamp(2rem, 12vw, 3rem);
            }
            .section-title{
                font-size:1.5rem;
            }
            .hero-actions,
            .form-actions,
            .aside-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .btn,.section-link,.mini-btn{
                width:100%;
            }
            .mini-stat{
                min-width:0;
                flex:1 1 100%;
            }
        }

/* roulang page: article */
:root{
            --bg:#090b10;
            --bg-elev:#0f1218;
            --panel:#121520;
            --panel-2:#171b26;
            --panel-3:#1d2230;
            --line:rgba(255,255,255,.08);
            --line-strong:rgba(255,255,255,.14);
            --text:#f3f5f9;
            --muted:#a8afbd;
            --muted-2:#7d8596;
            --accent:#ce5c7f;
            --accent-2:#a67be7;
            --accent-soft:rgba(206,92,127,.18);
            --good:#60d5aa;
            --warn:#f0b25c;
            --shadow:0 24px 80px rgba(0,0,0,.42);
            --shadow-soft:0 12px 30px rgba(0,0,0,.24);
            --radius:20px;
            --radius-sm:14px;
            --container:1200px;
            --space-1:8px;
            --space-2:12px;
            --space-3:16px;
            --space-4:24px;
            --space-5:32px;
            --space-6:48px;
            --space-7:64px;
            --focus:0 0 0 3px rgba(206,92,127,.28);
        }
        html{scroll-behavior:smooth}
        *{box-sizing:border-box}
        body{
            margin:0;
            min-height:100vh;
            font-family:system-ui,-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
            color:var(--text);
            background:
                radial-gradient(1100px circle at 18% -10%, rgba(206,92,127,.18), transparent 46%),
                radial-gradient(900px circle at 82% 0%, rgba(166,123,231,.12), transparent 42%),
                linear-gradient(180deg, #090b10 0%, #0a0c12 100%);
            line-height:1.72;
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        body::before{
            content:"";
            position:fixed;
            inset:0;
            pointer-events:none;
            background-image:
                linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
            background-size:40px 40px;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.28), transparent 85%);
            opacity:.22;
            z-index:0;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        ::selection{background:rgba(206,92,127,.28);color:#fff}
        .container{
            width:min(var(--container), calc(100% - 32px));
            margin:0 auto;
        }
        .site-header,
        .site-footer,
        .site-main{position:relative;z-index:1}
        .site-header{
            position:sticky;
            top:0;
            z-index:1000;
            backdrop-filter:blur(18px);
            background:linear-gradient(180deg, rgba(9,11,16,.94), rgba(9,11,16,.74));
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .topbar{
            border-bottom:1px solid rgba(255,255,255,.06);
            background:rgba(255,255,255,.015);
        }
        .topbar-inner{
            min-height:42px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            padding:8px 0;
            color:var(--muted);
            font-size:13px;
        }
        .topbar-left,.topbar-center,.topbar-right{
            display:flex;
            align-items:center;
            gap:10px;
            min-width:0;
        }
        .topbar-center{
            flex:1;
            justify-content:center;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .mini-badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            padding:6px 10px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            font-size:12px;
            line-height:1;
        }
        .mini-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:32px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid rgba(206,92,127,.35);
            color:#fff;
            background:linear-gradient(135deg, rgba(206,92,127,.20), rgba(166,123,231,.12));
            transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
        }
        .mini-btn:hover{transform:translateY(-1px);border-color:rgba(206,92,127,.55);box-shadow:0 12px 24px rgba(0,0,0,.18)}
        .mini-btn:active{transform:translateY(0)}
        .mini-btn:focus-visible{outline:none;box-shadow:var(--focus), 0 12px 24px rgba(0,0,0,.18)}
        .nav-wrap{padding:14px 0}
        .nav-inner{
            position:relative;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-weight:800;
            letter-spacing:.02em;
            color:var(--text);
            min-width:0;
            white-space:nowrap;
        }
        .brand-mark{
            width:36px;
            height:36px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:
                radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 40%),
                linear-gradient(135deg, rgba(206,92,127,.9), rgba(166,123,231,.68));
            box-shadow:0 10px 24px rgba(206,92,127,.18);
            border:1px solid rgba(255,255,255,.08);
            flex:0 0 auto;
        }
        .brand-text{
            font-size:1rem;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        .nav-links{
            display:flex;
            align-items:center;
            gap:10px;
        }
        .nav-link,
        .nav-cta{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:42px;
            padding:0 14px;
            border-radius:999px;
            border:1px solid transparent;
            color:var(--muted);
            transition:transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
        }
        .nav-link:hover,
        .nav-cta:hover{
            transform:translateY(-1px);
            color:var(--text);
            border-color:rgba(255,255,255,.10);
            background:rgba(255,255,255,.04);
        }
        .nav-link.active{
            color:var(--text);
            border-color:rgba(206,92,127,.30);
            background:rgba(206,92,127,.10);
            box-shadow:0 10px 22px rgba(0,0,0,.16);
        }
        .nav-cta{
            color:#fff;
            border-color:rgba(206,92,127,.38);
            background:linear-gradient(135deg, rgba(206,92,127,.92), rgba(166,123,231,.72));
            box-shadow:0 14px 28px rgba(206,92,127,.14);
        }
        .nav-cta:hover{
            color:#fff;
            border-color:rgba(206,92,127,.62);
            background:linear-gradient(135deg, rgba(214,102,139,.95), rgba(173,132,235,.82));
            box-shadow:0 18px 34px rgba(206,92,127,.18);
        }
        .nav-link:focus-visible,
        .nav-cta:focus-visible,
        .brand:focus-visible,
        .footer-links a:focus-visible,
        .rail-link:focus-visible,
        .breadcrumb a:focus-visible,
        .primary-btn:focus-visible,
        .secondary-btn:focus-visible,
        .input:focus-visible,
        .textarea:focus-visible,
        .submit-btn:focus-visible,
        .accordion-trigger:focus-visible{
            outline:none;
            box-shadow:var(--focus);
        }
        .nav-toggle{
            display:none;
            width:44px;
            height:44px;
            align-items:center;
            justify-content:center;
            flex-direction:column;
            gap:5px;
            border:1px solid var(--line);
            border-radius:14px;
            background:rgba(255,255,255,.03);
            color:var(--text);
            box-shadow:var(--shadow-soft);
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .nav-toggle span{
            width:18px;
            height:2px;
            border-radius:2px;
            background:currentColor;
            display:block;
            transition:transform .2s ease, opacity .2s ease;
        }
        .site-main{padding:0 0 72px}
        .article-hero{
            padding:28px 0 22px;
        }
        .hero-shell{
            border:1px solid var(--line);
            border-radius:calc(var(--radius) + 4px);
            background:
                linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)),
                radial-gradient(900px circle at 0% 0%, rgba(206,92,127,.10), transparent 50%),
                linear-gradient(180deg, rgba(18,21,32,.96), rgba(14,17,24,.96));
            box-shadow:var(--shadow);
            overflow:hidden;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.7fr) minmax(310px,.95fr);
            gap:24px;
            padding:clamp(22px, 3vw, 34px);
        }
        .breadcrumb{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            color:var(--muted);
            font-size:13px;
            margin-bottom:16px;
        }
        .breadcrumb a{
            color:var(--muted);
            transition:color .18s ease;
        }
        .breadcrumb a:hover{color:var(--text)}
        .breadcrumb span.sep{color:var(--muted-2)}
        .article-kicker{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            align-items:center;
            margin-bottom:16px;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            gap:6px;
            min-height:28px;
            padding:0 11px;
            border-radius:999px;
            font-size:12px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.04);
            color:var(--text);
        }
        .badge.accent{
            border-color:rgba(206,92,127,.24);
            background:rgba(206,92,127,.12);
            color:#ffdbe5;
        }
        .badge.good{
            border-color:rgba(96,213,170,.22);
            background:rgba(96,213,170,.12);
            color:#d8fff1;
        }
        .badge.warn{
            border-color:rgba(240,178,92,.22);
            background:rgba(240,178,92,.10);
            color:#ffe8c0;
        }
        .hero-title{
            margin:0;
            font-size:clamp(30px, 4vw, 52px);
            line-height:1.08;
            letter-spacing:-.03em;
        }
        .hero-summary{
            margin:18px 0 0;
            color:var(--muted);
            font-size:1.03rem;
            max-width:62ch;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .meta-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:38px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:13px;
        }
        .meta-chip strong{color:var(--text);font-weight:700}
        .hero-panel{
            display:flex;
            flex-direction:column;
            gap:16px;
            min-width:0;
        }
        .cover-card,
        .rail-card,
        .content-card,
        .cta-card,
        .footer-card,
        .accordion-item,
        .stat-card,
        .matrix-card,
        .compare-card{
            border:1px solid var(--line);
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            box-shadow:var(--shadow-soft);
        }
        .cover-card{
            position:relative;
            border-radius:var(--radius);
            overflow:hidden;
            padding:18px;
        }
        .cover-card::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                radial-gradient(500px circle at 15% 15%, rgba(206,92,127,.16), transparent 30%),
                radial-gradient(500px circle at 85% 20%, rgba(166,123,231,.13), transparent 32%),
                linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
            pointer-events:none;
        }
        .cover-top,
        .cover-foot{
            position:relative;
            z-index:1;
            display:flex;
            justify-content:space-between;
            gap:10px;
            align-items:center;
        }
        .cover-title{
            position:relative;
            z-index:1;
            margin:22px 0 12px;
            font-size:22px;
            line-height:1.2;
            letter-spacing:-.02em;
        }
        .cover-note{
            position:relative;
            z-index:1;
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .cover-art{
            position:relative;
            z-index:1;
            margin:18px 0;
            height:170px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:
                linear-gradient(135deg, rgba(206,92,127,.20), rgba(166,123,231,.11)),
                radial-gradient(circle at 22% 28%, rgba(255,255,255,.18), transparent 16%),
                radial-gradient(circle at 70% 40%, rgba(255,255,255,.10), transparent 14%),
                linear-gradient(180deg, rgba(17,20,29,.55), rgba(12,14,20,.95));
            overflow:hidden;
        }
        .cover-art::after{
            content:"";
            position:absolute;
            inset:-25% 20% auto auto;
            width:140px;
            height:140px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(255,255,255,.16), transparent 58%);
            filter:blur(2px);
            opacity:.7;
        }
        .cover-stats{
            position:relative;
            z-index:1;
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:10px;
        }
        .tiny-stat{
            border:1px solid var(--line);
            border-radius:16px;
            background:rgba(255,255,255,.03);
            padding:12px;
            min-width:0;
        }
        .tiny-stat strong{
            display:block;
            font-size:16px;
            line-height:1.2;
            margin-bottom:4px;
        }
        .tiny-stat span{
            display:block;
            color:var(--muted);
            font-size:12px;
        }
        .section{
            padding:28px 0;
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:18px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(22px, 2.6vw, 32px);
            line-height:1.15;
            letter-spacing:-.02em;
        }
        .section-head p{
            margin:0;
            max-width:62ch;
            color:var(--muted);
            font-size:14px;
        }
        .stats-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
        }
        .stat-card{
            border-radius:var(--radius);
            padding:20px;
            overflow:hidden;
            position:relative;
            transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .stat-card::after{
            content:"";
            position:absolute;
            inset:auto -20px -20px auto;
            width:120px;
            height:120px;
            background:radial-gradient(circle, rgba(206,92,127,.16), transparent 60%);
            opacity:.7;
        }
        .stat-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 42px rgba(0,0,0,.24)}
        .stat-label{color:var(--muted);font-size:13px;margin-bottom:14px}
        .stat-value{font-size:34px;line-height:1;font-weight:800;letter-spacing:-.04em}
        .stat-desc{margin-top:10px;color:var(--muted);font-size:13px}
        .matrix-grid{
            display:grid;
            grid-template-columns:1.2fr .8fr .8fr;
            gap:16px;
        }
        .matrix-card{
            border-radius:var(--radius);
            padding:20px;
            min-height:180px;
            position:relative;
            overflow:hidden;
            transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
        }
        .matrix-card:hover{transform:translateY(-3px);border-color:var(--line-strong);box-shadow:0 18px 42px rgba(0,0,0,.24)}
        .matrix-card.large{
            grid-row:span 2;
            min-height:calc(180px + 16px + 180px);
        }
        .matrix-card h3{
            margin:0 0 10px;
            font-size:20px;
            line-height:1.2;
        }
        .matrix-card p{
            margin:0;
            color:var(--muted);
            font-size:14px;
        }
        .matrix-top{
            display:flex;
            justify-content:space-between;
            align-items:flex-start;
            gap:12px;
            margin-bottom:14px;
        }
        .matrix-icon{
            width:44px;
            height:44px;
            border-radius:14px;
            display:grid;
            place-items:center;
            border:1px solid var(--line);
            background:linear-gradient(135deg, rgba(206,92,127,.18), rgba(166,123,231,.10));
            color:#fff;
            font-weight:800;
            flex:0 0 auto;
        }
        .matrix-list{
            list-style:none;
            padding:0;
            margin:14px 0 0;
            display:grid;
            gap:10px;
        }
        .matrix-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--muted);
            font-size:14px;
        }
        .matrix-list li::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            margin-top:.58em;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            flex:0 0 auto;
        }
        .compare-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:16px;
        }
        .compare-card{
            border-radius:var(--radius);
            padding:22px;
            overflow:hidden;
            position:relative;
        }
        .compare-card h3{margin:0 0 10px;font-size:20px}
        .compare-card p{margin:0 0 14px;color:var(--muted);font-size:14px}
        .compare-bars{
            display:grid;
            gap:12px;
        }
        .bar-row{
            display:grid;
            grid-template-columns:88px 1fr auto;
            gap:12px;
            align-items:center;
            font-size:13px;
            color:var(--muted);
        }
        .bar{
            height:10px;
            border-radius:999px;
            background:rgba(255,255,255,.06);
            overflow:hidden;
            border:1px solid rgba(255,255,255,.06);
        }
        .bar > span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--accent), var(--accent-2));
        }
        .list-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:16px;
        }
        .post-card{
            border:1px solid var(--line);
            border-radius:var(--radius);
            overflow:hidden;
            background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015));
            box-shadow:var(--shadow-soft);
            transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
            min-height:100%;
        }
        .post-card:hover{
            transform:translateY(-3px);
            border-color:var(--line-strong);
            box-shadow:0 18px 42px rgba(0,0,0,.24);
        }
        .post-media{
            height:164px;
            background:
                radial-gradient(100% 100% at 20% 20%, rgba(206,92,127,.24), transparent 34%),
                radial-gradient(100% 100% at 80% 30%, rgba(166,123,231,.15), transparent 38%),
                linear-gradient(180deg, rgba(21,24,34,.98), rgba(14,16,23,.98));
            position:relative;
            border-bottom:1px solid rgba(255,255,255,.06);
        }
        .post-media::after{
            content:"";
            position:absolute;
            inset:18px;
            border-radius:16px;
            border:1px solid rgba(255,255,255,.09);
            background:linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01));
        }
        .post-body{padding:18px}
        .post-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:10px;
            color:var(--muted);
            font-size:12px;
        }
        .post-body h3{
            margin:0;
            font-size:18px;
            line-height:1.35;
        }
        .post-body p{
            margin:10px 0 0;
            color:var(--muted);
            font-size:14px;
        }
        .post-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-top:14px;
            color:#fff;
            font-weight:600;
            transition:color .18s ease, transform .18s ease;
        }
        .post-link:hover{transform:translateX(2px);color:#ffdbe5}
        .faq-grid{
            display:grid;
            gap:12px;
        }
        .accordion-item{
            border-radius:18px;
            overflow:hidden;
            transition:border-color .18s ease, box-shadow .18s ease;
        }
        .accordion-item:hover{border-color:var(--line-strong)}
        .accordion-trigger{
            width:100%;
            border:none;
            background:transparent;
            color:var(--text);
            padding:18px 18px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            text-align:left;
        }
        .accordion-trigger strong{
            font-size:15px;
            line-height:1.5;
        }
        .accordion-trigger .marker{
            flex:0 0 auto;
            width:28px;
            height:28px;
            border-radius:10px;
            display:grid;
            place-items:center;
            background:rgba(255,255,255,.04);
            border:1px solid var(--line);
            color:var(--muted);
            transition:transform .18s ease, background .18s ease, color .18s ease;
        }
        .accordion-item[open] .accordion-trigger .marker{
            background:rgba(206,92,127,.16);
            color:#fff;
            transform:rotate(45deg);
        }
        .accordion-content{
            padding:0 18px 18px;
            color:var(--muted);
            font-size:14px;
            border-top:1px solid rgba(255,255,255,.06);
        }
        .accordion-content p{margin:14px 0 0}
        .content-grid{
            display:grid;
            grid-template-columns:minmax(0,1.6fr) minmax(290px,.84fr);
            gap:16px;
            align-items:start;
        }
        .content-card{
            border-radius:var(--radius);
            overflow:hidden;
        }
        .content-card .content-head{
            padding:22px 22px 0;
        }
        .content-head h2{
            margin:10px 0 0;
            font-size:22px;
            line-height:1.2;
        }
        .content-head p{
            margin:12px 0 0;
            color:var(--muted);
            font-size:14px;
        }
        .content-inner{
            padding:22px;
        }
        .article-content{
            padding:0 22px 22px;
            color:#e7ebf3;
            font-size:1.02rem;
            line-height:1.92;
            overflow-wrap:anywhere;
        }
        .article-content > *:first-child{margin-top:0}
        .article-content > *:last-child{margin-bottom:0}
        .article-content h2,
        .article-content h3,
        .article-content h4{
            line-height:1.28;
            letter-spacing:-.02em;
            margin:1.6em 0 .65em;
            color:#fff;
        }
        .article-content h2{font-size:1.42rem}
        .article-content h3{font-size:1.18rem}
        .article-content p{
            margin:0 0 1em;
            color:#dde2eb;
        }
        .article-content a{
            color:#ffdbe5;
            text-decoration:none;
            border-bottom:1px solid rgba(206,92,127,.35);
            transition:color .18s ease, border-color .18s ease;
        }
        .article-content a:hover{color:#fff;border-color:rgba(255,255,255,.44)}
        .article-content ul,
        .article-content ol{
            margin:0 0 1.15em 1.25em;
            padding:0;
        }
        .article-content li{margin:.45em 0;color:#dde2eb}
        .article-content blockquote{
            margin:1.2em 0;
            padding:16px 18px;
            border-left:3px solid var(--accent);
            background:rgba(255,255,255,.03);
            color:#e6eaf1;
            border-radius:0 16px 16px 0;
        }
        .article-content code{
            padding:.18em .42em;
            border-radius:8px;
            background:rgba(255,255,255,.06);
            color:#fff;
            font-size:.92em;
        }
        .article-content pre{
            margin:1.2em 0;
            padding:16px 18px;
            overflow:auto;
            border-radius:18px;
            background:#0a0d14;
            border:1px solid var(--line);
            color:#eef2fb;
        }
        .article-content table{
            width:100%;
            border-collapse:collapse;
            margin:1.2em 0;
            overflow:hidden;
            border-radius:16px;
        }
        .article-content th,
        .article-content td{
            border:1px solid rgba(255,255,255,.08);
            padding:12px 14px;
            text-align:left;
            vertical-align:top;
        }
        .article-content th{
            background:rgba(255,255,255,.04);
            color:#fff;
        }
        .article-content img,
        .article-content figure{
            max-width:100%;
            height:auto;
            border-radius:18px;
        }
        .article-content img{
            border:1px solid rgba(255,255,255,.08);
            box-shadow:0 16px 40px rgba(0,0,0,.25);
        }
        .article-content hr{
            border:none;
            border-top:1px solid rgba(255,255,255,.08);
            margin:1.5em 0;
        }
        .article-content .aligncenter{
            margin-left:auto;
            margin-right:auto;
            display:block;
        }
        .side-rail{
            display:grid;
            gap:16px;
            position:sticky;
            top:118px;
        }
        .rail-card{
            border-radius:var(--radius);
            padding:20px;
        }
        .rail-card h3{
            margin:0 0 12px;
            font-size:18px;
            line-height:1.25;
        }
        .rail-list{
            display:grid;
            gap:10px;
        }
        .rail-link{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            padding:12px 14px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            color:var(--text);
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .rail-link:hover{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:rgba(255,255,255,.05);
        }
        .rail-link small{color:var(--muted)}
        .rail-tips{
            display:grid;
            gap:10px;
            color:var(--muted);
            font-size:14px;
        }
        .rail-tips .tip{
            display:flex;
            gap:10px;
            align-items:flex-start;
        }
        .rail-tips .tip::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), var(--accent-2));
            flex:0 0 auto;
            margin-top:.52em;
        }
        .empty-state{
            padding:34px 22px 22px;
            text-align:center;
        }
        .empty-mark{
            width:60px;
            height:60px;
            border-radius:20px;
            display:grid;
            place-items:center;
            margin:0 auto 18px;
            background:rgba(206,92,127,.12);
            border:1px solid rgba(206,92,127,.26);
            color:#ffdbe5;
            font-size:22px;
            font-weight:800;
        }
        .empty-state h3{
            margin:0;
            font-size:22px;
        }
        .empty-state p{
            margin:10px auto 0;
            max-width:42ch;
            color:var(--muted);
        }
        .empty-actions{
            margin-top:18px;
            display:flex;
            justify-content:center;
            gap:12px;
            flex-wrap:wrap;
        }
        .primary-btn,
        .secondary-btn,
        .submit-btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:44px;
            padding:0 16px;
            border-radius:14px;
            border:1px solid transparent;
            transition:transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease, color .18s ease;
            white-space:nowrap;
        }
        .primary-btn,
        .submit-btn{
            color:#fff;
            background:linear-gradient(135deg, rgba(206,92,127,.96), rgba(166,123,231,.78));
            box-shadow:0 14px 28px rgba(206,92,127,.12);
            border-color:rgba(206,92,127,.35);
        }
        .secondary-btn{
            color:var(--text);
            border-color:var(--line);
            background:rgba(255,255,255,.03);
        }
        .primary-btn:hover,
        .secondary-btn:hover,
        .submit-btn:hover{
            transform:translateY(-1px);
        }
        .primary-btn:hover,
        .submit-btn:hover{
            border-color:rgba(206,92,127,.55);
            box-shadow:0 18px 34px rgba(206,92,127,.16);
        }
        .secondary-btn:hover{
            border-color:var(--line-strong);
            background:rgba(255,255,255,.05);
        }
        .cta-section{
            padding:18px 0 42px;
        }
        .cta-card{
            border-radius:calc(var(--radius) + 4px);
            overflow:hidden;
            padding:24px;
        }
        .cta-grid{
            display:grid;
            grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);
            gap:20px;
            align-items:start;
        }
        .cta-copy h2{
            margin:12px 0 0;
            font-size:clamp(24px, 3vw, 36px);
            line-height:1.14;
            letter-spacing:-.03em;
        }
        .cta-copy p{
            margin:12px 0 0;
            color:var(--muted);
            max-width:60ch;
        }
        .cta-points{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .cta-points .badge{
            background:rgba(255,255,255,.03);
        }
        .contact-form{
            border-radius:20px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            padding:18px;
        }
        .field-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:12px;
        }
        .field{display:flex;flex-direction:column;gap:8px}
        .field.full{grid-column:1/-1}
        .field label{
            color:var(--muted);
            font-size:13px;
        }
        .input,
        .textarea{
            width:100%;
            border-radius:14px;
            border:1px solid rgba(255,255,255,.10);
            background:rgba(9,11,16,.70);
            color:var(--text);
            padding:12px 14px;
            outline:none;
            transition:border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease;
        }
        .input::placeholder,
        .textarea::placeholder{color:var(--muted-2)}
        .input:focus,
        .textarea:focus{
            border-color:rgba(206,92,127,.48);
            box-shadow:var(--focus);
            background:rgba(14,17,24,.92);
        }
        .textarea{
            min-height:112px;
            resize:vertical;
        }
        .form-foot{
            margin-top:14px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }
        .checkline{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--muted);
            font-size:13px;
        }
        .checkline input{
            margin-top:.25em;
            accent-color:var(--accent);
        }
        .submit-btn{
            min-width:140px;
        }
        .site-footer{
            padding:0 0 34px;
        }
        .footer-card{
            border-radius:calc(var(--radius) + 4px);
            overflow:hidden;
            padding:24px;
            background:
                linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.015)),
                radial-gradient(800px circle at 10% 0%, rgba(206,92,127,.08), transparent 35%);
        }
        .footer-grid{
            display:grid;
            grid-template-columns:1.4fr .8fr 1fr 1fr;
            gap:18px;
            align-items:start;
        }
        .footer-brand p{
            margin:14px 0 0;
            color:var(--muted);
            max-width:42ch;
        }
        .footer-col h3{
            margin:0 0 12px;
            font-size:16px;
        }
        .footer-links,
        .footer-meta{
            display:grid;
            gap:10px;
            color:var(--muted);
            font-size:14px;
        }
        .footer-links a{
            color:var(--muted);
            transition:color .18s ease, transform .18s ease;
        }
        .footer-links a:hover{
            color:var(--text);
            transform:translateX(2px);
        }
        .footer-line{
            margin-top:20px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.08);
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
            color:var(--muted-2);
            font-size:13px;
        }
        .skeleton-tag{
            display:inline-flex;
            align-items:center;
            gap:6px;
            color:var(--muted);
        }
        .kpi-strip{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .kpi-pill{
            display:inline-flex;
            align-items:center;
            gap:8px;
            min-height:36px;
            padding:0 12px;
            border-radius:999px;
            border:1px solid var(--line);
            color:var(--muted);
            background:rgba(255,255,255,.03);
            font-size:13px;
        }
        .kpi-pill strong{color:var(--text)}
        .article-meta-strip{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:18px;
        }
        .article-meta-strip .meta-chip{
            background:rgba(255,255,255,.025);
        }
        .article-intro-box{
            margin:0 22px 22px;
            padding:16px 18px;
            border-radius:18px;
            border:1px solid rgba(255,255,255,.08);
            background:rgba(255,255,255,.03);
            color:var(--muted);
            font-size:14px;
        }
        .article-intro-box strong{
            color:var(--text);
        }
        .anchor-list{
            display:grid;
            gap:10px;
        }
        .anchor-list a{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color:var(--text);
            padding:11px 14px;
            border-radius:14px;
            border:1px solid var(--line);
            background:rgba(255,255,255,.03);
            transition:transform .18s ease, border-color .18s ease, background .18s ease;
        }
        .anchor-list a:hover{
            transform:translateY(-1px);
            border-color:var(--line-strong);
            background:rgba(255,255,255,.05);
        }
        .anchor-list a span{color:var(--muted)}
        .section-gap{height:8px}
        .reveal{animation:fadeUp .6s ease both}
        .reveal.delay-1{animation-delay:.08s}
        .reveal.delay-2{animation-delay:.16s}
        .reveal.delay-3{animation-delay:.24s}
        .reveal.delay-4{animation-delay:.32s}
        @keyframes fadeUp{
            from{opacity:0;transform:translateY(10px)}
            to{opacity:1;transform:translateY(0)}
        }

        @media (max-width: 1120px){
            .hero-grid,
            .content-grid,
            .cta-grid{
                grid-template-columns:1fr;
            }
            .side-rail{
                position:static;
            }
            .matrix-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .matrix-card.large{
                grid-row:auto;
                min-height:180px;
            }
            .stats-grid,
            .list-grid,
            .footer-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
        }
        @media (max-width: 900px){
            .topbar-center{
                display:none;
            }
            .nav-toggle{
                display:inline-flex;
            }
            .nav-links{
                position:absolute;
                top:calc(100% + 12px);
                right:0;
                left:0;
                display:grid;
                gap:10px;
                padding:14px;
                border:1px solid var(--line);
                border-radius:18px;
                background:rgba(12,15,22,.96);
                box-shadow:var(--shadow);
                transform:translateY(-10px);
                opacity:0;
                pointer-events:none;
                transition:opacity .18s ease, transform .18s ease;
            }
            .nav-links.is-open{
                opacity:1;
                pointer-events:auto;
                transform:translateY(0);
            }
            .nav-link,
            .nav-cta{
                width:100%;
                justify-content:center;
            }
            .compare-grid,
            .matrix-grid{
                grid-template-columns:1fr;
            }
            .field-grid{
                grid-template-columns:1fr;
            }
            .content-head,
            .content-inner,
            .article-intro-box,
            .article-content{
                padding-left:18px;
                padding-right:18px;
            }
            .article-content{padding-bottom:18px}
        }
        @media (max-width: 680px){
            .container{width:min(var(--container), calc(100% - 22px))}
            .topbar-inner{font-size:12px}
            .nav-wrap{padding:12px 0}
            .hero-title{font-size:clamp(28px, 8vw, 38px)}
            .hero-summary{font-size:.98rem}
            .section{padding:22px 0}
            .article-hero{padding:18px 0 16px}
            .stats-grid,
            .list-grid,
            .footer-grid{
                grid-template-columns:1fr;
            }
            .cover-stats{
                grid-template-columns:1fr;
            }
            .cover-art{height:140px}
            .stat-value{font-size:28px}
            .section-head{
                display:block;
            }
            .section-head p{margin-top:8px}
            .footer-line{
                justify-content:flex-start;
            }
            .cta-card,
            .footer-card,
            .content-card,
            .rail-card,
            .cover-card{
                border-radius:18px;
            }
        }
        @media (max-width: 520px){
            .topbar-left{width:100%}
            .topbar-right{margin-left:auto}
            .mini-badge{font-size:11px;padding:5px 9px}
            .brand-text{font-size:.98rem}
            .hero-shell{border-radius:18px}
            .hero-grid{padding:18px}
            .hero-summary{margin-top:14px}
            .meta-row,.article-meta-strip,.kpi-strip,.cta-points{gap:8px}
            .badge,.meta-chip,.kpi-pill{font-size:12px}
            .compare-card,.matrix-card,.stat-card,.post-body,.rail-card,.cta-card,.footer-card{padding:16px}
            .article-content{font-size:1rem;line-height:1.86}
            .submit-btn,.primary-btn,.secondary-btn,.mini-btn,.nav-link,.nav-cta{min-height:42px}
            .form-foot{align-items:stretch}
            .submit-btn{width:100%}
        }