/* roulang page: index */
:root{
            --bg:#f4f7fb;
            --bg-soft:#eef3f9;
            --surface:#ffffff;
            --surface-2:#f9fbfd;
            --text:#0f172a;
            --muted:#667085;
            --soft:#94a3b8;
            --line:#e5ebf2;
            --primary:#225de6;
            --primary-2:#1948b8;
            --accent:#0ea5a4;
            --accent-soft:#dff6f5;
            --warning:#f59e0b;
            --success:#16a34a;
            --shadow:0 22px 60px rgba(15, 23, 42, .08);
            --shadow-sm:0 10px 24px rgba(15, 23, 42, .06);
            --radius:22px;
            --radius-sm:14px;
            --radius-lg:30px;
            --container:1180px;
            --space:24px;
            --space-lg:40px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            color:var(--text);
            font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Segoe UI,Roboto,Helvetica,Arial,sans-serif;
            line-height:1.7;
            background:
                radial-gradient(circle at 12% 8%, rgba(34,93,230,.08), transparent 28%),
                radial-gradient(circle at 88% 14%, rgba(14,165,164,.08), transparent 26%),
                linear-gradient(180deg, #f9fbfe 0%, #f4f7fb 100%);
            text-rendering:optimizeLegibility;
            -webkit-font-smoothing:antialiased;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,select,textarea{font:inherit}
        ::selection{background:rgba(34,93,230,.18);color:var(--text)}

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

        .site-header{
            position:sticky;
            top:0;
            z-index:50;
            backdrop-filter:saturate(180%) blur(16px);
            background:rgba(244,247,251,.76);
            border-bottom:1px solid rgba(229,235,242,.8);
        }
        .header-bar{
            min-height:76px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
            padding:14px 0;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            font-size:1.06rem;
            font-weight:800;
            letter-spacing:.4px;
            color:var(--text);
            white-space:nowrap;
        }
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:14px;
            background:
                linear-gradient(145deg, rgba(34,93,230,1), rgba(14,165,164,1));
            box-shadow:0 12px 24px rgba(34,93,230,.18);
            position:relative;
            overflow:hidden;
            flex:none;
        }
        .brand-mark::before,
        .brand-mark::after{
            content:"";
            position:absolute;
            inset:auto;
            border-radius:999px;
            background:rgba(255,255,255,.85);
        }
        .brand-mark::before{
            width:14px;height:14px;left:10px;top:10px;
            box-shadow:0 0 0 7px rgba(255,255,255,.12);
        }
        .brand-mark::after{
            width:8px;height:8px;right:10px;bottom:10px;
            background:rgba(255,255,255,.72);
        }

        .site-nav{
            display:flex;
            align-items:center;
            gap:22px;
            margin-left:auto;
        }
        .site-nav a{
            position:relative;
            font-size:.96rem;
            color:var(--muted);
            padding:10px 2px;
            transition:color .22s var(--ease);
        }
        .site-nav a::after{
            content:"";
            position:absolute;
            left:0;
            bottom:4px;
            width:100%;
            height:2px;
            background:linear-gradient(90deg, var(--primary), var(--accent));
            transform:scaleX(0);
            transform-origin:left;
            transition:transform .22s var(--ease);
            border-radius:999px;
        }
        .site-nav a:hover,
        .site-nav a.active{
            color:var(--text);
        }
        .site-nav a:hover::after,
        .site-nav a.active::after{
            transform:scaleX(1);
        }

        .header-actions{
            display:flex;
            gap:12px;
            margin-left:4px;
        }

        .btn{
            appearance:none;
            border:1px solid transparent;
            border-radius:999px;
            padding:12px 18px;
            font-weight:700;
            font-size:.95rem;
            line-height:1;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:8px;
            transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
            cursor:pointer;
            outline:none;
            user-select:none;
            box-shadow:none;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn:focus-visible{
            box-shadow:0 0 0 4px rgba(34,93,230,.15);
        }
        .btn-primary{
            background:linear-gradient(135deg, var(--primary), var(--primary-2));
            color:#fff;
            box-shadow:0 14px 24px rgba(34,93,230,.18);
        }
        .btn-primary:hover{box-shadow:0 18px 30px rgba(34,93,230,.22)}
        .btn-secondary{
            background:#fff;
            color:var(--text);
            border-color:var(--line);
        }
        .btn-secondary:hover{
            border-color:#cfd8e4;
            box-shadow:var(--shadow-sm);
        }
        .btn-ghost{
            background:transparent;
            border-color:rgba(34,93,230,.12);
            color:var(--primary);
        }
        .btn-ghost:hover{
            background:rgba(34,93,230,.05);
        }

        .nav-toggle{
            display:none;
            width:44px;
            height:44px;
            border:1px solid var(--line);
            border-radius:14px;
            background:#fff;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
        }
        .nav-toggle:hover{
            border-color:#cfd8e4;
            box-shadow:var(--shadow-sm);
            transform:translateY(-1px);
        }
        .nav-toggle span{
            display:block;
            width:18px;
            height:2px;
            background:var(--text);
            position:relative;
            border-radius:2px;
        }
        .nav-toggle span::before,
        .nav-toggle span::after{
            content:"";
            position:absolute;
            left:0;
            width:18px;
            height:2px;
            background:var(--text);
            border-radius:2px;
        }
        .nav-toggle span::before{top:-6px}
        .nav-toggle span::after{top:6px}

        .mobile-panel{
            display:none;
            padding:0 0 18px;
        }
        .mobile-panel.open{
            display:block;
        }
        .mobile-menu{
            background:#fff;
            border:1px solid var(--line);
            border-radius:20px;
            box-shadow:var(--shadow-sm);
            padding:16px;
        }
        .mobile-menu a{
            display:block;
            padding:14px 2px;
            color:var(--text);
            font-weight:700;
        }
        .mobile-actions{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:10px;
            margin-top:12px;
        }

        .hero-banner{
            position:relative;
            overflow:hidden;
            border-bottom:1px solid rgba(229,235,242,.9);
            background:
                linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.72)),
                radial-gradient(circle at 20% 20%, rgba(34,93,230,.10), transparent 32%),
                radial-gradient(circle at 84% 20%, rgba(14,165,164,.08), transparent 30%);
        }
        .hero-banner::before{
            content:"";
            position:absolute;
            inset:0;
            background:
                linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px),
                linear-gradient(180deg, rgba(255,255,255,.18) 1px, transparent 1px);
            background-size:36px 36px;
            opacity:.25;
            mask-image:linear-gradient(180deg, rgba(0,0,0,.9), transparent 92%);
            pointer-events:none;
        }
        .hero-wrap{
            position:relative;
            padding:34px 0 26px;
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.28fr) minmax(320px,.92fr);
            gap:30px;
            align-items:center;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 12px;
            border:1px solid rgba(34,93,230,.12);
            border-radius:999px;
            background:rgba(255,255,255,.86);
            color:var(--primary);
            font-weight:700;
            font-size:.88rem;
            letter-spacing:.2px;
            box-shadow:0 10px 24px rgba(15,23,42,.05);
        }
        .eyebrow::before{
            content:"";
            width:8px;height:8px;border-radius:999px;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            box-shadow:0 0 0 5px rgba(34,93,230,.10);
        }
        .hero-title{
            margin:16px 0 14px;
            font-size:clamp(2.2rem, 5vw, 4.2rem);
            line-height:1.03;
            letter-spacing:-.04em;
            font-weight:900;
            max-width:11ch;
        }
        .hero-lead{
            margin:0 0 20px;
            font-size:1.04rem;
            color:var(--muted);
            max-width:58ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-bottom:18px;
        }
        .hero-chips{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:10px 14px;
            border-radius:999px;
            background:#fff;
            border:1px solid var(--line);
            color:#334155;
            font-size:.9rem;
            box-shadow:0 10px 24px rgba(15,23,42,.04);
        }
        .chip b{
            color:var(--text);
            font-weight:800;
        }

        .hero-aside{
            background:linear-gradient(180deg, #ffffff, #f9fbfe);
            border:1px solid rgba(229,235,242,.95);
            border-radius:28px;
            box-shadow:var(--shadow);
            padding:20px;
            display:grid;
            gap:14px;
        }
        .hero-panel{
            background:linear-gradient(180deg, #fff, #f8fbff);
            border:1px solid var(--line);
            border-radius:22px;
            padding:16px;
        }
        .hero-panel-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            margin-bottom:12px;
        }
        .panel-title{
            font-weight:800;
            font-size:1rem;
            letter-spacing:.2px;
        }
        .panel-tag{
            font-size:.78rem;
            color:var(--primary);
            padding:6px 10px;
            border-radius:999px;
            background:rgba(34,93,230,.08);
            border:1px solid rgba(34,93,230,.10);
        }
        .mini-grid{
            display:grid;
            grid-template-columns:repeat(3,1fr);
            gap:10px;
        }
        .mini-stat{
            background:#fff;
            border:1px solid var(--line);
            border-radius:18px;
            padding:12px 12px 11px;
        }
        .mini-stat .k{
            font-size:.76rem;
            color:var(--muted);
            margin-bottom:6px;
        }
        .mini-stat .v{
            font-size:1.15rem;
            font-weight:900;
            letter-spacing:-.02em;
        }
        .hero-bars{
            display:grid;
            gap:10px;
            margin-top:10px;
        }
        .bar-row{
            display:grid;
            grid-template-columns:auto 1fr auto;
            align-items:center;
            gap:10px;
            font-size:.88rem;
            color:#344054;
        }
        .bar-track{
            height:10px;
            border-radius:999px;
            overflow:hidden;
            background:#e8eef6;
        }
        .bar-fill{
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg, var(--primary), var(--accent));
        }
        .hero-notes{
            display:grid;
            gap:10px;
        }
        .note-item{
            display:flex;
            gap:12px;
            align-items:flex-start;
            padding:12px 14px;
            background:#fff;
            border:1px solid var(--line);
            border-radius:18px;
        }
        .note-dot{
            width:10px;height:10px;border-radius:999px;margin-top:7px;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            flex:none;
            box-shadow:0 0 0 5px rgba(34,93,230,.08);
        }
        .note-item strong{
            display:block;
            font-size:.94rem;
            margin-bottom:2px;
        }
        .note-item span{
            display:block;
            font-size:.88rem;
            color:var(--muted);
        }

        main{display:block}
        .section{
            padding:72px 0;
        }
        .section.alt{
            background:linear-gradient(180deg, rgba(255,255,255,.7), rgba(246,249,252,.88));
            border-top:1px solid rgba(229,235,242,.7);
            border-bottom:1px solid rgba(229,235,242,.7);
        }
        .section-head{
            display:flex;
            align-items:flex-end;
            justify-content:space-between;
            gap:20px;
            margin-bottom:26px;
        }
        .section-head .text{
            max-width:760px;
        }
        .section-kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            margin-bottom:12px;
            color:var(--primary);
            font-weight:800;
            font-size:.86rem;
            text-transform:uppercase;
            letter-spacing:.14em;
        }
        .section-kicker::before{
            content:"";
            width:34px;
            height:1px;
            background:linear-gradient(90deg, var(--primary), var(--accent));
            border-radius:999px;
        }
        .section-title{
            margin:0 0 10px;
            font-size:clamp(1.55rem, 2.6vw, 2.35rem);
            line-height:1.16;
            font-weight:900;
            letter-spacing:-.03em;
        }
        .section-desc{
            margin:0;
            color:var(--muted);
            font-size:1rem;
            max-width:66ch;
        }

        .feature-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
        }
        .card{
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow-sm);
            transition:transform .24s var(--ease), box-shadow .24s var(--ease), border-color .24s var(--ease);
        }
        .card:hover{
            transform:translateY(-3px);
            box-shadow:var(--shadow);
            border-color:#d6deea;
        }
        .feature-card{
            padding:22px 20px;
            min-height:176px;
            display:flex;
            flex-direction:column;
            gap:14px;
        }
        .icon-badge{
            width:46px;
            height:46px;
            border-radius:16px;
            background:linear-gradient(145deg, rgba(34,93,230,.12), rgba(14,165,164,.12));
            border:1px solid rgba(34,93,230,.08);
            display:inline-flex;
            align-items:center;
            justify-content:center;
            color:var(--primary);
            font-size:1.15rem;
            font-weight:900;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.7);
        }
        .feature-card h3{
            margin:0;
            font-size:1.05rem;
            line-height:1.3;
            font-weight:850;
        }
        .feature-card p{
            margin:0;
            color:var(--muted);
            font-size:.93rem;
        }
        .tag-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:auto;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            padding:7px 10px;
            border-radius:999px;
            font-size:.8rem;
            color:#475569;
            background:#f7fafc;
            border:1px solid var(--line);
        }

        .split-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:18px;
        }
        .panel{
            background:var(--surface);
            border:1px solid var(--line);
            border-radius:var(--radius);
            padding:24px;
            box-shadow:var(--shadow-sm);
        }
        .panel h3{
            margin:0 0 14px;
            font-size:1.12rem;
            font-weight:850;
        }
        .check-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:12px;
        }
        .check-list li{
            position:relative;
            padding-left:28px;
            color:#334155;
        }
        .check-list li::before{
            content:"✓";
            position:absolute;
            left:0;
            top:0;
            width:20px;
            height:20px;
            border-radius:999px;
            background:rgba(22,163,74,.10);
            color:var(--success);
            font-size:.84rem;
            font-weight:900;
            display:flex;
            align-items:center;
            justify-content:center;
        }
        .callout{
            margin-top:16px;
            padding:16px 18px;
            border-radius:18px;
            background:linear-gradient(135deg, rgba(34,93,230,.06), rgba(14,165,164,.06));
            border:1px solid rgba(34,93,230,.10);
            color:#334155;
        }
        .callout strong{
            display:block;
            margin-bottom:4px;
            color:var(--text);
        }
        .callout small{
            color:var(--muted);
            font-size:.92rem;
        }

        .metrics-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:16px;
        }
        .metric-card{
            padding:20px;
            position:relative;
            overflow:hidden;
        }
        .metric-card::after{
            content:"";
            position:absolute;
            inset:auto -30px -30px auto;
            width:96px;
            height:96px;
            border-radius:50%;
            background:radial-gradient(circle, rgba(34,93,230,.10), transparent 68%);
        }
        .metric-label{
            color:var(--muted);
            font-size:.92rem;
            margin-bottom:10px;
        }
        .metric-value{
            font-size:2rem;
            font-weight:900;
            letter-spacing:-.04em;
            line-height:1;
            margin-bottom:14px;
        }
        .metric-foot{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            color:#475569;
            font-size:.86rem;
            margin-bottom:10px;
        }
        .metric-track{
            height:10px;
            border-radius:999px;
            overflow:hidden;
            background:#edf2f7;
        }
        .metric-fill{
            height:100%;
            border-radius:999px;
            background:linear-gradient(90deg, var(--primary), var(--accent));
        }

        .dashboard{
            display:grid;
            grid-template-columns:1.08fr .92fr;
            gap:18px;
            margin-top:18px;
        }
        .chart-card{
            padding:24px;
        }
        .spark-area{
            height:220px;
            border-radius:22px;
            background:
                linear-gradient(180deg, rgba(34,93,230,.03), rgba(14,165,164,.04)),
                linear-gradient(90deg, rgba(148,163,184,.18) 1px, transparent 1px),
                linear-gradient(180deg, rgba(148,163,184,.18) 1px, transparent 1px);
            background-size:auto, 18px 18px, 18px 18px;
            position:relative;
            overflow:hidden;
            border:1px solid var(--line);
        }
        .spark-area svg{
            width:100%;
            height:100%;
            display:block;
        }
        .side-stack{
            display:grid;
            gap:14px;
        }
        .status-card{
            padding:20px;
        }
        .status-card h3{
            margin:0 0 10px;
            font-size:1.05rem;
        }
        .status-list{
            display:grid;
            gap:12px;
        }
        .status-row{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:10px;
            align-items:center;
            color:#334155;
            font-size:.93rem;
        }
        .status-row .dot{
            width:10px;
            height:10px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--primary), var(--accent));
            box-shadow:0 0 0 5px rgba(34,93,230,.08);
        }
        .status-row span:last-child{
            color:var(--muted);
        }

        .news-layout{
            display:grid;
            grid-template-columns:1.15fr .85fr;
            gap:18px;
        }
        .news-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:12px;
        }
        .news-item{
            padding:18px 18px 16px;
            display:grid;
            gap:8px;
        }
        .news-top{
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:12px;
        }
        .news-title{
            font-weight:850;
            font-size:1.01rem;
            line-height:1.45;
        }
        .news-title a{
            color:var(--text);
            transition:color .2s var(--ease);
        }
        .news-title a:hover{
            color:var(--primary);
        }
        .news-time{
            flex:none;
            color:var(--primary);
            font-size:.8rem;
            padding:6px 10px;
            border-radius:999px;
            background:rgba(34,93,230,.08);
            border:1px solid rgba(34,93,230,.10);
        }
        .news-desc{
            margin:0;
            color:var(--muted);
            font-size:.92rem;
        }
        .news-side{
            display:grid;
            gap:14px;
        }
        .spotlight{
            padding:24px;
            background:
                radial-gradient(circle at 100% 0%, rgba(34,93,230,.08), transparent 32%),
                linear-gradient(180deg, #fff, #f8fbff);
        }
        .spotlight h3{
            margin:0 0 10px;
            font-size:1.12rem;
        }
        .spotlight p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .spot-list{
            display:grid;
            gap:10px;
        }
        .spot-item{
            display:flex;
            align-items:flex-start;
            gap:10px;
            padding:12px 14px;
            border-radius:16px;
            background:#fff;
            border:1px solid var(--line);
        }
        .spot-item i{
            width:24px;
            height:24px;
            border-radius:8px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            font-style:normal;
            font-weight:900;
            color:var(--primary);
            background:rgba(34,93,230,.08);
            flex:none;
        }
        .spot-item span{
            color:#334155;
            font-size:.92rem;
        }
        .latest-card{
            padding:18px 20px;
        }
        .latest-card h3{
            margin:0 0 12px;
            font-size:1.05rem;
        }
        .latest-table{
            display:grid;
            gap:10px;
        }
        .latest-row{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:10px;
            align-items:center;
            padding:10px 0;
            border-bottom:1px dashed #e6edf5;
            color:#334155;
        }
        .latest-row:last-child{border-bottom:none}
        .latest-row .item{
            font-weight:700;
        }
        .latest-row .status{
            color:var(--muted);
            font-size:.86rem;
        }
        .latest-row .time{
            color:var(--primary);
            font-size:.84rem;
            font-weight:700;
        }

        .compare-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:18px;
        }
        .compare-card{
            padding:24px;
        }
        .compare-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:10px;
            margin-bottom:14px;
        }
        .compare-head h3{
            margin:0;
            font-size:1.12rem;
        }
        .compare-badge{
            padding:6px 10px;
            border-radius:999px;
            background:#f7fafc;
            color:var(--muted);
            font-size:.8rem;
            border:1px solid var(--line);
        }
        .compare-list{
            list-style:none;
            margin:0;
            padding:0;
            display:grid;
            gap:12px;
        }
        .compare-item{
            padding:14px 14px 14px 16px;
            border-radius:18px;
            background:#fff;
            border:1px solid var(--line);
            display:flex;
            gap:12px;
            align-items:flex-start;
        }
        .compare-item .mark{
            width:22px;
            height:22px;
            border-radius:999px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            flex:none;
            font-size:.78rem;
            font-weight:900;
            margin-top:1px;
        }
        .compare-left .mark{
            background:rgba(245,158,11,.12);
            color:#b45309;
        }
        .compare-right .mark{
            background:rgba(22,163,74,.12);
            color:#15803d;
        }
        .compare-item p{
            margin:0;
            color:#334155;
            font-size:.93rem;
        }
        .compare-footer{
            margin-top:16px;
            color:var(--muted);
            font-size:.92rem;
        }

        .faq-grid{
            display:grid;
            grid-template-columns:1fr;
            gap:12px;
        }
        details.faq-item{
            background:#fff;
            border:1px solid var(--line);
            border-radius:20px;
            box-shadow:var(--shadow-sm);
            overflow:hidden;
            transition:box-shadow .2s var(--ease), transform .2s var(--ease), border-color .2s var(--ease);
        }
        details.faq-item:hover{
            box-shadow:var(--shadow);
            border-color:#d6deea;
            transform:translateY(-1px);
        }
        details.faq-item summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:flex-start;
            justify-content:space-between;
            gap:14px;
            font-weight:800;
            color:var(--text);
        }
        details.faq-item summary::-webkit-details-marker{display:none}
        details.faq-item summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:10px;
            display:inline-flex;
            align-items:center;
            justify-content:center;
            background:rgba(34,93,230,.08);
            color:var(--primary);
            font-size:1rem;
            flex:none;
            transition:transform .2s var(--ease), background .2s var(--ease);
        }
        details[open].faq-item summary::after{
            content:"–";
            background:rgba(14,165,164,.10);
        }
        .faq-answer{
            padding:0 20px 18px;
            color:var(--muted);
            font-size:.95rem;
        }

        .form-grid{
            display:grid;
            grid-template-columns:1fr .92fr;
            gap:18px;
        }
        .form-card{
            padding:24px;
        }
        .form-note-card{
            padding:24px;
            background:
                linear-gradient(180deg, #fff, #f8fbff);
        }
        .form-note-card h3{
            margin:0 0 12px;
            font-size:1.14rem;
        }
        .form-note-card p{
            margin:0 0 16px;
            color:var(--muted);
        }
        .form-points{
            display:grid;
            gap:12px;
            margin:0;
            padding:0;
            list-style:none;
        }
        .form-points li{
            padding:12px 14px;
            border-radius:16px;
            background:#fff;
            border:1px solid var(--line);
            color:#334155;
        }

        .form-row{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
        }
        .field{
            display:grid;
            gap:8px;
            margin-bottom:14px;
        }
        .field label{
            font-size:.92rem;
            font-weight:700;
            color:#334155;
        }
        .field input,
        .field select,
        .field textarea{
            width:100%;
            border:1px solid var(--line);
            border-radius:16px;
            background:#fff;
            padding:13px 14px;
            color:var(--text);
            transition:border-color .2s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
        }
        .field input:focus,
        .field select:focus,
        .field textarea:focus{
            outline:none;
            border-color:rgba(34,93,230,.45);
            box-shadow:0 0 0 4px rgba(34,93,230,.10);
            background:#fff;
        }
        .field textarea{
            min-height:128px;
            resize:vertical;
        }
        .field small{
            color:var(--muted);
            font-size:.84rem;
        }
        .checkbox{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            font-size:.9rem;
            margin:8px 0 16px;
        }
        .checkbox input{
            margin-top:4px;
            width:18px;
            height:18px;
            border-radius:5px;
            accent-color:var(--primary);
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
        }
        .form-tip{
            color:var(--muted);
            font-size:.88rem;
        }
        .form-message{
            margin-top:14px;
            display:none;
            padding:12px 14px;
            border-radius:14px;
            background:rgba(22,163,74,.10);
            border:1px solid rgba(22,163,74,.16);
            color:#166534;
            font-size:.92rem;
        }
        .form-message.show{display:block}

        .site-footer{
            padding:30px 0 38px;
            border-top:1px solid rgba(229,235,242,.9);
            background:rgba(255,255,255,.48);
        }
        .footer-wrap{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            flex-wrap:wrap;
        }
        .footer-brand{
            display:flex;
            flex-direction:column;
            gap:6px;
        }
        .footer-brand strong{
            font-size:1.02rem;
        }
        .footer-brand span{
            color:var(--muted);
            font-size:.92rem;
        }
        .footer-meta{
            color:var(--muted);
            font-size:.9rem;
            text-align:right;
        }

        @media (max-width: 1024px){
            .hero-grid,
            .dashboard,
            .news-layout,
            .form-grid{
                grid-template-columns:1fr;
            }
            .feature-grid,
            .metrics-grid,
            .compare-grid{
                grid-template-columns:repeat(2, minmax(0,1fr));
            }
            .section{
                padding:62px 0;
            }
        }

        @media (max-width: 768px){
            .header-bar{
                min-height:70px;
            }
            .site-nav,
            .header-actions{
                display:none;
            }
            .nav-toggle{
                display:inline-flex;
                margin-left:auto;
            }
            .hero-wrap{
                padding:26px 0 22px;
            }
            .hero-title{
                max-width:none;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .feature-grid,
            .metrics-grid,
            .compare-grid,
            .split-grid,
            .form-row{
                grid-template-columns:1fr;
            }
            .mini-grid{
                grid-template-columns:1fr;
            }
            .hero-actions{
                flex-direction:column;
                align-items:stretch;
            }
            .hero-actions .btn{
                width:100%;
            }
            .mobile-actions{
                grid-template-columns:1fr;
            }
            .footer-wrap{
                align-items:flex-start;
                flex-direction:column;
            }
            .footer-meta{
                text-align:left;
            }
        }

        @media (max-width: 520px){
            .section{
                padding:54px 0;
            }
            .hero-banner{
                border-radius:0 0 26px 26px;
            }
            .hero-aside,
            .panel,
            .card,
            .spotlight,
            .latest-card,
            .compare-card,
            .form-card,
            .form-note-card{
                border-radius:22px;
            }
            .hero-title{
                font-size:2rem;
                line-height:1.08;
            }
            .metric-value{
                font-size:1.7rem;
            }
            .section-title{
                font-size:1.48rem;
            }
            details.faq-item summary{
                padding:16px;
            }
            .faq-answer{
                padding:0 16px 16px;
            }
        }