/* roulang page: index */
:root{
            --bg:#f4f8fc;
            --bg-soft:#ecf4fb;
            --card:#ffffff;
            --card-2:#f9fbfe;
            --text:#18324b;
            --muted:#60758a;
            --line:#d9e4ef;
            --line-strong:#c6d6e6;
            --brand:#2f6fb0;
            --brand-2:#76aee0;
            --brand-3:#d9ecfb;
            --accent:#4c8a63;
            --accent-2:#7dbb8c;
            --shadow:0 18px 46px rgba(33, 69, 109, .10);
            --shadow-soft:0 10px 24px rgba(33, 69, 109, .08);
            --radius:22px;
            --radius-sm:16px;
            --radius-lg:28px;
            --container:1240px;
            --gap:24px;
            --gap-lg:36px;
            --section:88px;
            --section-sm:64px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
            color:var(--text);
            background:
                radial-gradient(900px 420px at 12% -2%, rgba(118,174,224,.16), transparent 55%),
                radial-gradient(720px 380px at 95% 2%, rgba(76,138,99,.10), transparent 50%),
                linear-gradient(180deg, #f8fbfe 0%, #f4f8fc 42%, #eef4fa 100%);
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        ::selection{background:rgba(47,111,176,.18)}
        :focus-visible{
            outline:3px solid rgba(47,111,176,.28);
            outline-offset:2px;
        }
        .container{
            width:min(var(--container), calc(100% - 40px));
            margin:0 auto;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1200;
            backdrop-filter:saturate(140%) blur(12px);
            background:linear-gradient(135deg, #2f6fb0 0%, #407fbf 38%, #7aaedb 100%);
            box-shadow:0 10px 26px rgba(21, 58, 95, .16);
            border-bottom:1px solid rgba(255,255,255,.12);
        }
        .nav-inner{
            min-height:74px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            color:#fff;
            font-weight:800;
            letter-spacing:.2px;
            white-space:nowrap;
        }
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:12px;
            background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.72));
            display:grid;
            place-items:center;
            color:var(--brand);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
            flex:0 0 auto;
        }
        .brand-mark svg{width:22px;height:22px}
        .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            margin-left:auto;
        }
        .nav-links a,
        .nav-cta{
            color:#fff;
            padding:11px 15px;
            border-radius:999px;
            transition:background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
            font-weight:600;
            line-height:1;
        }
        .nav-links a:hover,
        .nav-links a:focus-visible{
            background:rgba(255,255,255,.14);
            transform:translateY(-1px);
        }
        .nav-links a[aria-current="page"]{
            background:rgba(255,255,255,.18);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
        }
        .nav-cta{
            background:linear-gradient(135deg, #ffffff 0%, #eef6fd 100%);
            color:var(--brand);
            box-shadow:0 10px 20px rgba(13, 55, 92, .16);
        }
        .nav-cta:hover,
        .nav-cta:focus-visible{
            transform:translateY(-1px);
            background:#fff;
        }
        .menu-btn{
            display:none;
            border:0;
            background:rgba(255,255,255,.16);
            color:#fff;
            width:46px;
            height:46px;
            border-radius:14px;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:background .22s var(--ease), transform .22s var(--ease);
        }
        .menu-btn:hover{background:rgba(255,255,255,.22)}
        .menu-btn:active{transform:scale(.98)}
        .menu-icon{
            position:relative;
            width:20px;
            height:14px;
        }
        .menu-icon span{
            position:absolute;
            left:0;
            right:0;
            height:2px;
            border-radius:2px;
            background:#fff;
            transition:transform .22s var(--ease), top .22s var(--ease), opacity .22s var(--ease);
        }
        .menu-icon span:nth-child(1){top:0}
        .menu-icon span:nth-child(2){top:6px}
        .menu-icon span:nth-child(3){top:12px}
        .drawer{
            display:none;
            padding:0 0 18px;
        }
        .drawer-panel{
            background:rgba(255,255,255,.10);
            border-top:1px solid rgba(255,255,255,.14);
            border-radius:0 0 18px 18px;
            overflow:hidden;
        }
        .drawer-links{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1px;
            background:rgba(255,255,255,.10);
        }
        .drawer-links a{
            padding:15px 18px;
            color:#fff;
            background:rgba(255,255,255,.08);
            font-weight:600;
        }
        .drawer-links a:hover{background:rgba(255,255,255,.14)}
        .section{
            padding:var(--section) 0;
        }
        .hero{
            padding-top:42px;
            position:relative;
            overflow:hidden;
        }
        .hero::before,
        .hero::after{
            content:"";
            position:absolute;
            inset:auto;
            border-radius:50%;
            pointer-events:none;
            filter:blur(8px);
        }
        .hero::before{
            width:300px;height:300px;
            right:-80px;top:30px;
            background:rgba(118,174,224,.16);
        }
        .hero::after{
            width:240px;height:240px;
            left:-100px;bottom:16px;
            background:rgba(76,138,99,.10);
        }
        .hero-grid{
            position:relative;
            display:grid;
            grid-template-columns:1.12fr .88fr;
            gap:28px;
            align-items:stretch;
        }
        .hero-copy,
        .hero-visual,
        .panel,
        .card,
        .compare-card,
        .form-shell,
        .faq-shell,
        .news-shell,
        .safety-card,
        .device-card,
        .footer-box{
            border:1px solid var(--line);
            background:rgba(255,255,255,.82);
            box-shadow:var(--shadow-soft);
            backdrop-filter: blur(8px);
            border-radius:var(--radius);
        }
        .hero-copy{
            padding:34px;
            min-height:100%;
        }
        .kicker{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:7px 12px;
            border-radius:999px;
            background:rgba(47,111,176,.10);
            color:var(--brand);
            font-weight:700;
            font-size:14px;
            letter-spacing:.2px;
        }
        .kicker .dot{
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            box-shadow:0 0 0 4px rgba(47,111,176,.10);
        }
        h1,h2,h3,p{margin:0}
        h1{
            font-size:clamp(34px, 4.5vw, 58px);
            line-height:1.08;
            letter-spacing:-.6px;
            margin-top:18px;
        }
        .hero-copy p{
            margin-top:18px;
            font-size:18px;
            color:var(--muted);
            max-width:46em;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:28px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            gap:10px;
            border:1px solid transparent;
            border-radius:999px;
            padding:14px 20px;
            font-weight:700;
            cursor:pointer;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
            line-height:1;
        }
        .btn svg{width:16px;height:16px}
        .btn-primary{
            background:linear-gradient(135deg, var(--brand) 0%, #1f5f9a 100%);
            color:#fff;
            box-shadow:0 14px 28px rgba(47,111,176,.24);
        }
        .btn-primary:hover,
        .btn-primary:focus-visible{
            transform:translateY(-2px);
            box-shadow:0 16px 32px rgba(47,111,176,.28);
        }
        .btn-secondary{
            background:#fff;
            color:var(--brand);
            border-color:var(--line-strong);
        }
        .btn-secondary:hover,
        .btn-secondary:focus-visible{
            transform:translateY(-2px);
            border-color:#b7cce0;
            box-shadow:0 12px 24px rgba(33,69,109,.08);
        }
        .hero-tags{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:24px;
        }
        .tag{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:9px 12px;
            background:rgba(244,248,252,.86);
            border:1px solid var(--line);
            border-radius:999px;
            color:var(--muted);
            font-size:13px;
            font-weight:600;
        }
        .tag i{
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #8fc79b);
            display:inline-block;
        }
        .hero-mini{
            margin-top:28px;
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:12px;
        }
        .mini-stat{
            padding:16px 14px;
            border-radius:18px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, #fff 0%, #f7fbfe 100%);
        }
        .mini-stat strong{
            display:block;
            font-size:20px;
            line-height:1.1;
            color:var(--text);
            margin-bottom:6px;
        }
        .mini-stat span{
            color:var(--muted);
            font-size:13px;
        }
        .hero-visual{
            padding:24px;
            display:grid;
            gap:14px;
            align-content:start;
            background:
                linear-gradient(180deg, rgba(255,255,255,.88), rgba(248,251,255,.92)),
                linear-gradient(135deg, rgba(47,111,176,.06), rgba(76,138,99,.05));
        }
        .visual-top{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
        }
        .visual-title{
            font-size:17px;
            font-weight:800;
        }
        .visual-chip{
            display:inline-flex;
            align-items:center;
            gap:8px;
            padding:8px 11px;
            border-radius:999px;
            background:rgba(76,138,99,.10);
            color:#37684b;
            font-size:13px;
            font-weight:700;
        }
        .visual-board{
            display:grid;
            grid-template-columns:1.05fr .95fr;
            gap:12px;
        }
        .board-main,
        .board-sub,
        .board-foot{
            border-radius:20px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, #fff 0%, #f6fbff 100%);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
            overflow:hidden;
        }
        .board-main{
            padding:18px;
            min-height:260px;
            position:relative;
        }
        .board-sub{
            padding:16px;
            display:grid;
            gap:12px;
        }
        .board-foot{
            grid-column:1 / -1;
            padding:16px;
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            justify-content:space-between;
            align-items:center;
        }
        .monitor{
            display:flex;
            align-items:center;
            gap:10px;
            color:var(--muted);
            font-size:13px;
            margin-bottom:14px;
        }
        .monitor .pulse{
            width:10px;height:10px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #9cd3a8);
            box-shadow:0 0 0 0 rgba(76,138,99,.18);
            animation:pulse 2.2s infinite;
        }
        @keyframes pulse{
            0%{box-shadow:0 0 0 0 rgba(76,138,99,.22)}
            70%{box-shadow:0 0 0 12px rgba(76,138,99,0)}
            100%{box-shadow:0 0 0 0 rgba(76,138,99,0)}
        }
        .board-number{
            font-size:44px;
            line-height:1;
            letter-spacing:-1px;
            font-weight:900;
            color:#18324b;
        }
        .board-copy{
            margin-top:10px;
            color:var(--muted);
            font-size:14px;
            max-width:20em;
        }
        .board-bars{
            display:grid;
            gap:12px;
        }
        .bar-item{
            display:grid;
            gap:7px;
        }
        .bar-head{
            display:flex;
            justify-content:space-between;
            gap:12px;
            font-size:13px;
            color:var(--muted);
            font-weight:600;
        }
        .bar-track{
            height:10px;
            border-radius:999px;
            background:#e7eef6;
            overflow:hidden;
            position:relative;
        }
        .bar-fill{
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
            box-shadow:0 8px 18px rgba(47,111,176,.22);
        }
        .bar-fill.green{
            background:linear-gradient(90deg, #4c8a63 0%, #8cc99c 100%);
        }
        .board-pill{
            display:flex;
            align-items:center;
            gap:10px;
            padding:12px 14px;
            border-radius:18px;
            background:#fff;
            border:1px solid var(--line);
        }
        .board-pill .pill-icon{
            width:36px;height:36px;border-radius:12px;
            display:grid;place-items:center;
            background:linear-gradient(135deg, rgba(47,111,176,.12), rgba(118,174,224,.10));
            color:var(--brand);
            flex:0 0 auto;
        }
        .board-pill strong{
            display:block;
            font-size:14px;
            line-height:1.2;
        }
        .board-pill span{
            color:var(--muted);
            font-size:12px;
        }
        .section-head{
            display:flex;
            align-items:end;
            justify-content:space-between;
            gap:18px;
            margin-bottom:26px;
        }
        .section-head.center{
            flex-direction:column;
            align-items:center;
            text-align:center;
        }
        .section-title{
            max-width:720px;
        }
        h2{
            font-size:clamp(26px, 3vw, 38px);
            line-height:1.18;
            letter-spacing:-.4px;
        }
        .section-title p{
            margin-top:12px;
            color:var(--muted);
            font-size:17px;
        }
        .section-link{
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--brand);
            font-weight:700;
            white-space:nowrap;
            padding:10px 14px;
            border-radius:999px;
            background:rgba(47,111,176,.08);
            border:1px solid rgba(47,111,176,.12);
        }
        .section-link svg{width:16px;height:16px}
        .stats-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:16px;
        }
        .stat-card{
            padding:22px;
            border-radius:20px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, #fff 0%, #f7fbff 100%);
            box-shadow:var(--shadow-soft);
        }
        .stat-card strong{
            display:block;
            font-size:28px;
            line-height:1;
            letter-spacing:-.8px;
            margin-bottom:10px;
        }
        .stat-card span{
            display:block;
            color:var(--muted);
            font-size:14px;
        }
        .feature-grid{
            display:grid;
            grid-template-columns:repeat(12, 1fr);
            gap:18px;
        }
        .feature-card{
            grid-column:span 4;
            padding:24px;
            overflow:hidden;
            position:relative;
        }
        .feature-card.wide{
            grid-column:span 8;
            background:
                linear-gradient(180deg, #fff 0%, #f7fbff 100%),
                linear-gradient(135deg, rgba(47,111,176,.05), rgba(76,138,99,.05));
        }
        .feature-card.tall{
            grid-column:span 4;
            background:linear-gradient(180deg, #fff 0%, #f4f9fd 100%);
        }
        .card-icon{
            width:48px;
            height:48px;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(47,111,176,.12), rgba(118,174,224,.10));
            color:var(--brand);
            margin-bottom:16px;
            box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
        }
        .card-icon.green{
            background:linear-gradient(135deg, rgba(76,138,99,.14), rgba(141,196,153,.10));
            color:var(--accent);
        }
        .feature-card h3,
        .compare-card h3,
        .news-aside h3,
        .safety-card h3,
        .device-card h3,
        .form-copy h3,
        .footer-box h3{
            font-size:20px;
            line-height:1.24;
            margin-bottom:10px;
        }
        .feature-card p,
        .compare-card p,
        .safety-card p,
        .device-card p,
        .form-copy p,
        .news-aside p{
            color:var(--muted);
            font-size:15px;
        }
        .feature-list{
            list-style:none;
            padding:0;
            margin:18px 0 0;
            display:grid;
            gap:10px;
        }
        .feature-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--text);
            font-size:14px;
        }
        .feature-list li::before{
            content:"";
            width:8px;
            height:8px;
            border-radius:50%;
            margin-top:9px;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            flex:0 0 auto;
        }
        .feature-badges{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-top:18px;
        }
        .badge{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:30px;
            padding:0 12px;
            border-radius:999px;
            background:rgba(47,111,176,.08);
            color:var(--brand);
            border:1px solid rgba(47,111,176,.10);
            font-size:12px;
            font-weight:700;
        }
        .badge.gray{
            background:rgba(96,117,138,.08);
            color:var(--muted);
            border-color:rgba(96,117,138,.10);
        }
        .compare-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:18px;
        }
        .compare-card{
            padding:26px;
        }
        .compare-card .panel-title{
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            margin-bottom:14px;
        }
        .compare-chip{
            padding:8px 12px;
            border-radius:999px;
            background:rgba(47,111,176,.08);
            color:var(--brand);
            font-size:12px;
            font-weight:800;
            white-space:nowrap;
        }
        .compare-list{
            display:grid;
            gap:12px;
            margin-top:18px;
        }
        .compare-row{
            display:grid;
            gap:8px;
        }
        .compare-row .row-top{
            display:flex;
            justify-content:space-between;
            gap:12px;
            color:var(--muted);
            font-size:13px;
            font-weight:600;
        }
        .compare-row .row-top strong{
            color:var(--text);
            font-weight:700;
        }
        .compare-track{
            height:12px;
            border-radius:999px;
            background:#e7eef6;
            overflow:hidden;
        }
        .compare-fill{
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--brand) 0%, var(--brand-2) 100%);
        }
        .compare-fill.soft{
            background:linear-gradient(90deg, rgba(76,138,99,.88) 0%, rgba(141,196,153,.96) 100%);
        }
        .compare-points{
            display:grid;
            gap:10px;
            margin-top:18px;
        }
        .compare-point{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--text);
            font-size:14px;
        }
        .compare-point .check{
            width:20px;height:20px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #8bc79a);
            display:grid;
            place-items:center;
            flex:0 0 auto;
            color:#fff;
            margin-top:2px;
        }
        .news-shell{
            padding:26px;
        }
        .news-grid{
            display:grid;
            grid-template-columns:1.25fr .75fr;
            gap:18px;
            align-items:start;
        }
        .news-list{
            display:grid;
            gap:14px;
        }
        .news-item{
            display:grid;
            grid-template-columns:auto 1fr auto;
            gap:14px;
            align-items:start;
            padding:18px;
            border:1px solid var(--line);
            border-radius:20px;
            background:linear-gradient(180deg, #fff 0%, #f8fbfe 100%);
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
        }
        .news-item:hover{
            transform:translateY(-2px);
            border-color:#bfd2e3;
            box-shadow:0 16px 28px rgba(33,69,109,.10);
        }
        .news-dot{
            width:46px;
            height:46px;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(47,111,176,.12), rgba(118,174,224,.10));
            color:var(--brand);
            flex:0 0 auto;
        }
        .news-content h3{
            font-size:17px;
            line-height:1.35;
            margin-bottom:7px;
        }
        .news-content p{
            color:var(--muted);
            font-size:14px;
            line-height:1.75;
        }
        .news-meta{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
            margin-bottom:10px;
            color:var(--muted);
            font-size:12px;
            font-weight:700;
        }
        .news-meta span{
            padding:6px 10px;
            background:rgba(96,117,138,.08);
            border-radius:999px;
        }
        .news-arrow{
            width:38px;
            height:38px;
            border-radius:14px;
            display:grid;
            place-items:center;
            background:rgba(47,111,176,.08);
            color:var(--brand);
            margin-top:4px;
        }
        .news-empty{
            padding:28px;
            border-radius:22px;
            border:1px dashed #c6d6e6;
            background:linear-gradient(180deg, #fbfdff 0%, #f6fbff 100%);
            display:grid;
            gap:12px;
            place-items:center;
            text-align:center;
            min-height:240px;
        }
        .news-empty .empty-icon{
            width:58px;
            height:58px;
            border-radius:18px;
            background:linear-gradient(135deg, rgba(47,111,176,.12), rgba(76,138,99,.10));
            display:grid;
            place-items:center;
            color:var(--brand);
        }
        .empty-actions{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            justify-content:center;
        }
        .news-aside{
            display:grid;
            gap:14px;
        }
        .aside-card{
            padding:20px;
            border-radius:20px;
            border:1px solid var(--line);
            background:linear-gradient(180deg, #fff 0%, #f7fbfe 100%);
        }
        .aside-list{
            list-style:none;
            margin:16px 0 0;
            padding:0;
            display:grid;
            gap:12px;
        }
        .aside-list li{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--text);
            font-size:14px;
        }
        .aside-list li::before{
            content:"";
            width:8px;height:8px;border-radius:50%;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            margin-top:9px;
            flex:0 0 auto;
        }
        .timeline{
            display:grid;
            gap:14px;
            margin-top:16px;
        }
        .timeline-item{
            display:grid;
            grid-template-columns:auto 1fr;
            gap:12px;
            align-items:start;
        }
        .timeline-mark{
            width:14px;
            height:14px;
            margin-top:5px;
            border-radius:50%;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            box-shadow:0 0 0 6px rgba(47,111,176,.09);
        }
        .timeline-item strong{
            display:block;
            margin-bottom:4px;
        }
        .timeline-item p{
            color:var(--muted);
            font-size:13px;
            line-height:1.7;
        }
        .faq-shell{
            padding:26px;
        }
        .faq-grid{
            display:grid;
            gap:12px;
        }
        details.faq{
            border:1px solid var(--line);
            border-radius:18px;
            background:linear-gradient(180deg, #fff 0%, #f8fbfe 100%);
            overflow:hidden;
            transition:border-color .22s var(--ease), box-shadow .22s var(--ease);
        }
        details.faq[open]{
            border-color:#bcd0e2;
            box-shadow:0 14px 26px rgba(33,69,109,.08);
        }
        details.faq summary{
            cursor:pointer;
            list-style:none;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            font-weight:700;
            font-size:16px;
        }
        details.faq summary::-webkit-details-marker{display:none}
        .faq-summary-icon{
            width:34px;
            height:34px;
            border-radius:12px;
            display:grid;
            place-items:center;
            background:rgba(47,111,176,.08);
            color:var(--brand);
            flex:0 0 auto;
            transition:transform .22s var(--ease), background .22s var(--ease);
        }
        details.faq[open] .faq-summary-icon{
            background:rgba(76,138,99,.10);
            color:var(--accent);
            transform:rotate(45deg);
        }
        .faq-body{
            padding:0 20px 20px;
            color:var(--muted);
            font-size:15px;
            line-height:1.85;
        }
        .safety-grid{
            display:grid;
            grid-template-columns:repeat(4, minmax(0, 1fr));
            gap:16px;
        }
        .safety-card{
            padding:22px;
        }
        .safety-card .card-icon{
            margin-bottom:14px;
        }
        .device-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0, 1fr));
            gap:16px;
        }
        .device-card{
            padding:24px;
            position:relative;
            overflow:hidden;
        }
        .device-card::after{
            content:"";
            position:absolute;
            right:-40px;
            top:-40px;
            width:120px;
            height:120px;
            border-radius:50%;
            background:rgba(47,111,176,.06);
        }
        .device-head{
            display:flex;
            align-items:center;
            gap:14px;
            margin-bottom:16px;
        }
        .device-icon{
            width:52px;
            height:52px;
            border-radius:18px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(47,111,176,.12), rgba(118,174,224,.10));
            color:var(--brand);
        }
        .device-card ul{
            list-style:none;
            margin:18px 0 0;
            padding:0;
            display:grid;
            gap:10px;
        }
        .device-card li{
            color:var(--muted);
            font-size:14px;
            display:flex;
            gap:10px;
            align-items:flex-start;
        }
        .device-card li::before{
            content:"";
            width:7px;height:7px;border-radius:50%;
            margin-top:10px;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            flex:0 0 auto;
        }
        .form-shell{
            padding:28px;
        }
        .contact-grid{
            display:grid;
            grid-template-columns:1fr .78fr;
            gap:18px;
            align-items:start;
        }
        .form{
            display:grid;
            gap:14px;
        }
        .field-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0, 1fr));
            gap:14px;
        }
        .field{
            display:grid;
            gap:8px;
        }
        label{
            font-size:14px;
            font-weight:700;
            color:var(--text);
        }
        input, textarea{
            width:100%;
            border:1px solid var(--line);
            background:#fff;
            color:var(--text);
            border-radius:16px;
            padding:14px 16px;
            transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease);
        }
        input::placeholder,
        textarea::placeholder{
            color:#99a9b8;
        }
        input:focus,
        textarea:focus{
            border-color:#a7c2da;
            box-shadow:0 0 0 4px rgba(47,111,176,.08);
            outline:none;
        }
        textarea{
            min-height:138px;
            resize:vertical;
        }
        .form-note{
            display:flex;
            gap:10px;
            align-items:flex-start;
            color:var(--muted);
            font-size:13px;
            line-height:1.75;
            padding:14px 16px;
            border-radius:16px;
            background:rgba(47,111,176,.06);
            border:1px solid rgba(47,111,176,.10);
        }
        .form-note .mini-dot{
            width:10px;height:10px;border-radius:50%;
            background:linear-gradient(135deg, var(--accent), #8fc79c);
            margin-top:6px;
            flex:0 0 auto;
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-top:4px;
        }
        .footer{
            padding:32px 0 40px;
        }
        .footer-box{
            background:linear-gradient(180deg, #17324b 0%, #0f2539 100%);
            color:#e9f3fb;
            border-color:rgba(255,255,255,.08);
            box-shadow:0 18px 40px rgba(8, 19, 32, .18);
            padding:28px;
        }
        .footer-top{
            display:grid;
            grid-template-columns:1.05fr .95fr .75fr;
            gap:20px;
            align-items:start;
        }
        .footer-brand{
            display:grid;
            gap:14px;
        }
        .footer-brand .brand{
            color:#fff;
        }
        .footer-brand p{
            color:rgba(233,243,251,.76);
            font-size:14px;
            line-height:1.85;
            max-width:36em;
        }
        .footer-links{
            display:grid;
            gap:10px;
        }
        .footer-links a{
            color:#fff;
            opacity:.86;
            padding:2px 0;
        }
        .footer-links a:hover{
            opacity:1;
            text-decoration:underline;
            text-underline-offset:3px;
        }
        .footer-note{
            color:rgba(233,243,251,.72);
            font-size:13px;
            line-height:1.8;
        }
        .footer-bottom{
            margin-top:22px;
            padding-top:18px;
            border-top:1px solid rgba(255,255,255,.10);
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            gap:12px;
            color:rgba(233,243,251,.72);
            font-size:13px;
        }
        .scroll-top{
            position:fixed;
            right:18px;
            bottom:18px;
            z-index:1000;
            width:48px;
            height:48px;
            border-radius:16px;
            border:1px solid rgba(47,111,176,.16);
            background:rgba(255,255,255,.9);
            color:var(--brand);
            display:grid;
            place-items:center;
            box-shadow:0 14px 26px rgba(33,69,109,.12);
            cursor:pointer;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
        }
        .scroll-top:hover{transform:translateY(-2px)}
        .scroll-top svg{width:18px;height:18px}
        .visually-hidden{
            position:absolute!important;
            width:1px;height:1px;
            padding:0;margin:-1px;
            overflow:hidden;clip:rect(0,0,0,0);
            white-space:nowrap;border:0;
        }
        @media (max-width: 1200px){
            .hero-grid,
            .news-grid,
            .contact-grid,
            .footer-top{
                grid-template-columns:1fr;
            }
            .feature-card,
            .feature-card.wide,
            .feature-card.tall{
                grid-column:span 6;
            }
            .stats-grid,
            .safety-grid{
                grid-template-columns:repeat(2, minmax(0, 1fr));
            }
            .device-grid{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 1024px){
            .section{padding:72px 0}
            .hero{padding-top:30px}
            .nav-links,.nav-cta{display:none}
            .menu-btn{display:inline-flex}
            .drawer{display:block}
            .hero-mini{grid-template-columns:1fr}
            .visual-board{
                grid-template-columns:1fr;
            }
            .board-main{min-height:auto}
            .compare-grid,
            .field-grid,
            .stats-grid{
                grid-template-columns:1fr 1fr;
            }
            .feature-card,
            .feature-card.wide,
            .feature-card.tall{
                grid-column:span 12;
            }
        }
        @media (max-width: 768px){
            .container{width:min(var(--container), calc(100% - 28px))}
            .nav-inner{min-height:68px}
            .hero-copy,
            .hero-visual,
            .news-shell,
            .faq-shell,
            .form-shell,
            .footer-box,
            .compare-card,
            .stat-card,
            .aside-card,
            .feature-card,
            .safety-card,
            .device-card{
                padding:20px;
            }
            h1{font-size:clamp(30px, 10vw, 42px)}
            .hero-copy p,
            .section-title p{
                font-size:15px;
            }
            .section-head{
                flex-direction:column;
                align-items:flex-start;
            }
            .stats-grid,
            .compare-grid,
            .field-grid,
            .safety-grid{
                grid-template-columns:1fr;
            }
            .news-item{
                grid-template-columns:1fr;
            }
            .news-arrow{
                margin-top:0;
            }
            .drawer-links{
                grid-template-columns:1fr;
            }
            .hero-actions,
            .empty-actions,
            .footer-bottom{
                align-items:flex-start;
            }
            .hero-mini{
                grid-template-columns:1fr;
            }
            .board-number{
                font-size:36px;
            }
        }
        @media (max-width: 520px){
            .section{padding:60px 0}
            .hero-copy{padding:18px}
            .hero-visual{padding:18px}
            .feature-card,
            .compare-card,
            .news-shell,
            .faq-shell,
            .form-shell,
            .footer-box{
                border-radius:18px;
            }
            .btn{
                width:100%;
            }
            .hero-actions .btn{
                width:100%;
            }
            .tag,
            .badge{
                font-size:12px;
            }
            details.faq summary{
                font-size:15px;
                padding:16px;
            }
            .faq-body{
                padding:0 16px 16px;
            }
            .news-item{
                padding:16px;
            }
            .board-foot{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (prefers-reduced-motion: reduce){
            *{
                scroll-behavior:auto!important;
                animation:none!important;
                transition:none!important;
            }
        }

/* roulang page: article */
:root{
            --bg:#f4f8fc;
            --bg-soft:#ecf4fb;
            --card:#ffffff;
            --card-2:#f9fbfe;
            --text:#18324b;
            --muted:#60758a;
            --line:#d9e4ef;
            --line-strong:#c6d6e6;
            --brand:#2f6fb0;
            --brand-2:#76aee0;
            --brand-3:#d9ecfb;
            --accent:#4c8a63;
            --accent-2:#7dbb8c;
            --shadow:0 18px 46px rgba(33, 69, 109, .10);
            --shadow-soft:0 10px 24px rgba(33, 69, 109, .08);
            --radius:22px;
            --radius-sm:16px;
            --radius-lg:28px;
            --container:1240px;
            --gap:24px;
            --gap-lg:36px;
            --section:88px;
            --section-sm:64px;
            --ease:cubic-bezier(.2,.8,.2,1);
        }
        *{box-sizing:border-box}
        html{scroll-behavior:smooth}
        body{
            margin:0;
            font-family:-apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
            color:var(--text);
            background:
                radial-gradient(900px 420px at 12% -2%, rgba(118,174,224,.16), transparent 55%),
                radial-gradient(720px 380px at 95% 2%, rgba(76,138,99,.10), transparent 50%),
                linear-gradient(180deg, #f8fbfe 0%, #f4f8fc 42%, #eef4fa 100%);
            line-height:1.7;
            -webkit-font-smoothing:antialiased;
            text-rendering:optimizeLegibility;
        }
        ::selection{background:rgba(47,111,176,.18);color:var(--text)}
        a{color:inherit;text-decoration:none}
        img{max-width:100%;display:block}
        button,input,textarea,select{font:inherit}
        button{cursor:pointer}
        :focus-visible{
            outline:3px solid rgba(47,111,176,.22);
            outline-offset:3px;
        }
        .container{
            width:min(var(--container), calc(100% - 40px));
            margin:0 auto;
        }
        .section{
            padding:var(--section) 0;
        }
        .section-tight{
            padding:calc(var(--section) - 14px) 0;
        }
        .site-header{
            position:sticky;
            top:0;
            z-index:1200;
            backdrop-filter:saturate(140%) blur(12px);
            background:linear-gradient(135deg, #2f6fb0 0%, #407fbf 38%, #7aaedb 100%);
            box-shadow:0 10px 26px rgba(21, 58, 95, .16);
            border-bottom:1px solid rgba(255,255,255,.12);
            transition:box-shadow .24s var(--ease), transform .24s var(--ease);
        }
        body.is-scrolled .site-header{
            box-shadow:0 8px 20px rgba(21, 58, 95, .20);
        }
        .nav-inner{
            min-height:74px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:18px;
        }
        .brand{
            display:inline-flex;
            align-items:center;
            gap:12px;
            color:#fff;
            font-weight:800;
            letter-spacing:.2px;
            white-space:nowrap;
        }
        .brand-mark{
            width:38px;
            height:38px;
            border-radius:12px;
            background:linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.72));
            display:grid;
            place-items:center;
            color:var(--brand);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.9);
            flex:0 0 auto;
        }
        .brand-mark svg{width:22px;height:22px}
        .nav-links{
            display:flex;
            align-items:center;
            gap:8px;
            margin-left:auto;
        }
        .nav-links a,
        .nav-cta{
            color:#fff;
            padding:11px 15px;
            border-radius:999px;
            transition:background .22s var(--ease), transform .22s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
            font-weight:600;
            line-height:1;
        }
        .nav-links a:hover,
        .nav-links a:focus-visible{
            background:rgba(255,255,255,.14);
            transform:translateY(-1px);
        }
        .nav-links a[aria-current="page"]{
            background:rgba(255,255,255,.18);
            box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
        }
        .nav-cta{
            background:linear-gradient(135deg, #ffffff 0%, #eef6fd 100%);
            color:var(--brand);
            box-shadow:0 10px 20px rgba(13, 55, 92, .16);
        }
        .nav-cta:hover,
        .nav-cta:focus-visible{
            transform:translateY(-1px);
            background:#fff;
        }
        .menu-btn{
            display:none;
            border:0;
            background:rgba(255,255,255,.16);
            color:#fff;
            width:46px;
            height:46px;
            border-radius:14px;
            align-items:center;
            justify-content:center;
            cursor:pointer;
            transition:background .22s var(--ease), transform .22s var(--ease);
        }
        .menu-btn:hover{background:rgba(255,255,255,.22)}
        .menu-btn:active{transform:scale(.98)}
        .menu-icon{
            position:relative;
            width:20px;
            height:14px;
        }
        .menu-icon span{
            position:absolute;
            left:0;
            right:0;
            height:2px;
            border-radius:2px;
            background:#fff;
            transition:transform .22s var(--ease), top .22s var(--ease), opacity .22s var(--ease);
        }
        .menu-icon span:nth-child(1){top:0}
        .menu-icon span:nth-child(2){top:6px}
        .menu-icon span:nth-child(3){top:12px}
        .drawer{
            display:none;
            padding:0 0 18px;
        }
        .drawer-panel{
            background:rgba(255,255,255,.10);
            border-top:1px solid rgba(255,255,255,.14);
            border-radius:0 0 18px 18px;
            overflow:hidden;
        }
        .drawer-links{
            display:grid;
            grid-template-columns:1fr 1fr;
            gap:1px;
            background:rgba(255,255,255,.10);
        }
        .drawer-links a{
            padding:15px 18px;
            color:#fff;
            background:rgba(255,255,255,.08);
            font-weight:600;
        }
        .drawer-links a:hover{background:rgba(255,255,255,.14)}
        .drawer-links a[aria-current="page"]{
            background:rgba(255,255,255,.18);
        }
        .hero{
            padding:42px 0 18px;
            position:relative;
            overflow:hidden;
        }
        .hero::before,
        .hero::after{
            content:"";
            position:absolute;
            border-radius:50%;
            pointer-events:none;
            filter:blur(8px);
            opacity:.9;
        }
        .hero::before{
            width:300px;height:300px;
            right:-80px;top:12px;
            background:rgba(118,174,224,.16);
        }
        .hero::after{
            width:240px;height:240px;
            left:-100px;bottom:10px;
            background:rgba(76,138,99,.10);
        }
        .hero-grid{
            display:grid;
            grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
            gap:var(--gap-lg);
            align-items:stretch;
            position:relative;
            z-index:1;
        }
        .hero-copy{
            padding:10px 0 0;
        }
        .hero-kicker{
            display:flex;
            flex-wrap:wrap;
            align-items:center;
            gap:10px;
            margin-bottom:18px;
        }
        .eyebrow{
            display:inline-flex;
            align-items:center;
            gap:8px;
            font-size:13px;
            font-weight:700;
            letter-spacing:.04em;
            color:var(--brand);
            background:rgba(47,111,176,.08);
            border:1px solid rgba(47,111,176,.12);
            padding:8px 12px;
            border-radius:999px;
        }
        .eyebrow::before{
            content:"";
            width:7px;
            height:7px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            box-shadow:0 0 0 4px rgba(47,111,176,.10);
        }
        .tag{
            font-size:13px;
            font-weight:700;
            color:var(--accent);
            background:rgba(76,138,99,.10);
            border:1px solid rgba(76,138,99,.14);
            padding:8px 12px;
            border-radius:999px;
        }
        .hero h1{
            margin:0;
            font-size:clamp(34px, 4vw, 58px);
            line-height:1.08;
            letter-spacing:-.03em;
            color:var(--text);
        }
        .hero-desc{
            margin:18px 0 0;
            font-size:17px;
            color:var(--muted);
            max-width:62ch;
        }
        .hero-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            margin-top:28px;
        }
        .btn{
            display:inline-flex;
            align-items:center;
            justify-content:center;
            min-height:48px;
            padding:0 18px;
            border-radius:999px;
            font-weight:700;
            letter-spacing:.01em;
            border:1px solid transparent;
            transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
            white-space:nowrap;
        }
        .btn:hover{transform:translateY(-1px)}
        .btn:active{transform:translateY(0)}
        .btn-primary{
            background:linear-gradient(135deg, var(--brand) 0%, #4d89c6 100%);
            color:#fff;
            box-shadow:0 14px 26px rgba(47,111,176,.18);
        }
        .btn-primary:hover{
            box-shadow:0 16px 32px rgba(47,111,176,.22);
        }
        .btn-secondary{
            background:rgba(255,255,255,.8);
            color:var(--text);
            border-color:var(--line);
            box-shadow:var(--shadow-soft);
        }
        .btn-secondary:hover{
            background:#fff;
            border-color:var(--line-strong);
        }
        .btn-ghost{
            background:rgba(47,111,176,.06);
            color:var(--brand);
            border-color:rgba(47,111,176,.10);
        }
        .btn-ghost:hover{
            background:rgba(47,111,176,.09);
        }
        .trust-strip{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-top:22px;
        }
        .trust-strip span,
        .meta-pill,
        .mini-pill{
            display:inline-flex;
            align-items:center;
            gap:7px;
            min-height:34px;
            padding:6px 12px;
            border-radius:999px;
            background:rgba(255,255,255,.72);
            border:1px solid var(--line);
            color:var(--muted);
            font-size:13px;
            box-shadow:0 6px 18px rgba(33,69,109,.06);
        }
        .hero-panel{
            display:flex;
            align-items:stretch;
        }
        .panel-card,
        .card,
        .article-card,
        .info-card,
        .matrix-card,
        .compare-card,
        .latest-card,
        .contact-card,
        .footer-box{
            background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,254,.97));
            border:1px solid var(--line);
            border-radius:var(--radius);
            box-shadow:var(--shadow);
        }
        .hero-panel .panel-card{
            width:100%;
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:18px;
            position:relative;
            overflow:hidden;
        }
        .hero-panel .panel-card::after{
            content:"";
            position:absolute;
            inset:auto -50px -50px auto;
            width:180px;
            height:180px;
            border-radius:50%;
            background:radial-gradient(circle at 35% 35%, rgba(118,174,224,.18), transparent 58%);
            pointer-events:none;
        }
        .panel-head{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
        }
        .panel-title{
            font-size:18px;
            font-weight:800;
            margin:0;
        }
        .panel-sub{
            color:var(--muted);
            font-size:14px;
        }
        .metric-grid{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:12px;
        }
        .metric{
            padding:16px;
            border-radius:18px;
            background:linear-gradient(180deg, #fff, #f7fbff);
            border:1px solid rgba(217,228,239,.9);
        }
        .metric strong{
            display:block;
            font-size:24px;
            line-height:1;
            color:var(--brand);
            margin-bottom:6px;
            letter-spacing:-.03em;
        }
        .metric span{
            color:var(--muted);
            font-size:13px;
        }
        .progress-stack{
            display:grid;
            gap:12px;
            margin-top:4px;
        }
        .progress-item{
            display:grid;
            gap:8px;
        }
        .progress-label{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            color:var(--muted);
            font-size:13px;
        }
        .progress-track{
            height:10px;
            border-radius:999px;
            background:#e7eef6;
            overflow:hidden;
            border:1px solid #dbe6f2;
        }
        .progress-fill{
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--brand), #70a7da 55%, #a4d0ef 100%);
        }
        .progress-fill.accent{
            background:linear-gradient(90deg, var(--accent), #79bc8a 55%, #aedcba 100%);
        }
        .progress-fill.soft{
            background:linear-gradient(90deg, #5d8fc8, #9ac7ea);
        }
        .section-head{
            display:flex;
            flex-direction:column;
            gap:12px;
            margin-bottom:24px;
        }
        .section-head h2{
            margin:0;
            font-size:clamp(26px, 2.6vw, 38px);
            line-height:1.16;
            letter-spacing:-.025em;
        }
        .section-head p{
            margin:0;
            color:var(--muted);
            max-width:72ch;
            font-size:16px;
        }
        .article-layout{
            display:grid;
            grid-template-columns:minmax(0,1.45fr) minmax(300px,.72fr);
            gap:var(--gap);
            align-items:start;
        }
        .article-card{
            padding:26px;
        }
        .article-meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
            margin-bottom:18px;
        }
        .article-meta-row .meta-pill{
            background:rgba(47,111,176,.06);
            border-color:rgba(47,111,176,.10);
        }
        .article-body{
            font-size:17px;
            line-height:1.95;
            color:var(--text);
        }
        .article-body > *:first-child{margin-top:0}
        .article-body > * + *{margin-top:1em}
        .article-body h2,
        .article-body h3,
        .article-body h4{
            line-height:1.3;
            letter-spacing:-.02em;
            margin:1.7em 0 .75em;
            color:var(--text);
        }
        .article-body h2{font-size:1.45em}
        .article-body h3{font-size:1.18em}
        .article-body p{margin:0}
        .article-body ul,
        .article-body ol{
            padding-left:1.35em;
            margin:0;
        }
        .article-body li + li{margin-top:.55em}
        .article-body blockquote{
            margin:1.4em 0;
            padding:18px 20px;
            border-left:4px solid var(--brand);
            background:linear-gradient(180deg, rgba(47,111,176,.05), rgba(118,174,224,.05));
            border-radius:0 18px 18px 0;
            color:#34506d;
        }
        .article-body hr{
            border:0;
            border-top:1px solid var(--line);
            margin:1.6em 0;
        }
        .article-body a{
            color:var(--brand);
            text-decoration:underline;
            text-underline-offset:2px;
        }
        .article-body table{
            width:100%;
            border-collapse:separate;
            border-spacing:0;
            margin:1.4em 0;
            overflow:hidden;
            border:1px solid var(--line);
            border-radius:18px;
            background:#fff;
        }
        .article-body th,
        .article-body td{
            padding:12px 14px;
            border-bottom:1px solid var(--line);
            text-align:left;
            vertical-align:top;
        }
        .article-body th{
            background:#f3f8fd;
            font-weight:700;
        }
        .article-body tr:last-child td{border-bottom:0}
        .article-body pre{
            overflow:auto;
            padding:16px 18px;
            background:#f3f7fb;
            border:1px solid var(--line);
            border-radius:18px;
            line-height:1.75;
        }
        .article-body code{
            padding:.18em .38em;
            border-radius:8px;
            background:#eef4fb;
            color:#275e98;
            font-size:.95em;
        }
        .article-body pre code{
            background:transparent;
            padding:0;
            color:inherit;
        }
        .article-body figure{
            margin:1.4em 0;
        }
        .article-body img{
            border-radius:18px;
            border:1px solid var(--line);
            box-shadow:var(--shadow-soft);
        }
        .article-body .wp-caption,
        .article-body .caption{
            color:var(--muted);
            font-size:14px;
            margin-top:10px;
        }
        .empty-state{
            padding:36px 22px;
            border:1px dashed rgba(96,117,138,.28);
            border-radius:20px;
            background:linear-gradient(180deg, rgba(118,174,224,.05), rgba(255,255,255,.9));
            text-align:center;
        }
        .empty-icon{
            width:56px;
            height:56px;
            border-radius:18px;
            display:grid;
            place-items:center;
            margin:0 auto 14px;
            background:rgba(47,111,176,.10);
            color:var(--brand);
            font-size:24px;
        }
        .empty-state h3{
            margin:0 0 8px;
            font-size:22px;
        }
        .empty-state p{
            margin:0 0 18px;
            color:var(--muted);
        }
        .sidebar{
            display:grid;
            gap:var(--gap);
            position:sticky;
            top:92px;
        }
        .info-card{
            padding:22px;
        }
        .info-card h3{
            margin:0 0 16px;
            font-size:18px;
            line-height:1.25;
        }
        .info-list{
            list-style:none;
            padding:0;
            margin:0;
            display:grid;
            gap:12px;
        }
        .info-list li{
            display:flex;
            align-items:flex-start;
            gap:12px;
            color:var(--muted);
            font-size:14px;
        }
        .info-list strong{
            color:var(--text);
            min-width:72px;
            flex:0 0 auto;
        }
        .dot{
            width:9px;
            height:9px;
            margin-top:8px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            flex:0 0 auto;
            box-shadow:0 0 0 4px rgba(47,111,176,.10);
        }
        .quick-links{
            display:flex;
            flex-wrap:wrap;
            gap:10px;
        }
        .quick-links .btn{
            min-height:42px;
            padding:0 14px;
            font-size:14px;
        }
        .note-box{
            padding:16px;
            border-radius:18px;
            background:linear-gradient(180deg, rgba(76,138,99,.08), rgba(255,255,255,.88));
            border:1px solid rgba(76,138,99,.14);
            color:#34534a;
            font-size:14px;
        }
        .matrix-grid{
            display:grid;
            grid-template-columns:repeat(12, minmax(0, 1fr));
            gap:var(--gap);
        }
        .matrix-card{
            padding:22px;
            overflow:hidden;
            position:relative;
        }
        .matrix-card::after{
            content:"";
            position:absolute;
            right:-40px;
            bottom:-40px;
            width:130px;
            height:130px;
            border-radius:50%;
            background:radial-gradient(circle at 35% 35%, rgba(118,174,224,.14), transparent 60%);
            pointer-events:none;
        }
        .matrix-span-6{grid-column:span 6}
        .matrix-span-4{grid-column:span 4}
        .matrix-feature{
            display:grid;
            gap:18px;
            align-content:space-between;
            min-height:100%;
            background:
                linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.96)),
                linear-gradient(135deg, rgba(47,111,176,.05), rgba(76,138,99,.04));
        }
        .card-icon{
            width:50px;
            height:50px;
            border-radius:16px;
            display:grid;
            place-items:center;
            background:linear-gradient(135deg, rgba(47,111,176,.12), rgba(118,174,224,.20));
            color:var(--brand);
            box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
            font-size:22px;
            flex:0 0 auto;
        }
        .matrix-card h3,
        .compare-card h3,
        .latest-card h3,
        .contact-card h3{
            margin:0;
            font-size:20px;
            line-height:1.25;
        }
        .matrix-card p,
        .compare-card p,
        .latest-card p,
        .contact-card p{
            margin:0;
            color:var(--muted);
        }
        .matrix-list{
            display:grid;
            gap:10px;
            padding:0;
            margin:0;
            list-style:none;
        }
        .matrix-list li{
            display:flex;
            align-items:flex-start;
            gap:10px;
            color:var(--text);
        }
        .matrix-list li::before{
            content:"";
            width:8px;
            height:8px;
            margin-top:9px;
            border-radius:999px;
            background:linear-gradient(135deg, var(--brand), var(--accent));
            flex:0 0 auto;
        }
        .compare-grid{
            display:grid;
            grid-template-columns:repeat(12, minmax(0,1fr));
            gap:var(--gap);
        }
        .compare-card{
            grid-column:span 6;
            padding:22px;
        }
        .compare-list{
            display:grid;
            gap:14px;
            margin-top:18px;
        }
        .compare-item{
            display:grid;
            gap:8px;
        }
        .compare-top{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            font-size:14px;
            color:var(--muted);
        }
        .compare-bar{
            height:12px;
            border-radius:999px;
            background:#e7eef6;
            overflow:hidden;
            border:1px solid #dbe6f2;
        }
        .compare-bar span{
            display:block;
            height:100%;
            border-radius:inherit;
            background:linear-gradient(90deg, var(--brand), #75a9da 100%);
        }
        .compare-card.alt .compare-bar span{
            background:linear-gradient(90deg, var(--accent), #87c897 100%);
        }
        .compare-points{
            display:grid;
            gap:10px;
            margin-top:18px;
            list-style:none;
            padding:0;
        }
        .compare-points li{
            display:flex;
            gap:10px;
            color:var(--text);
        }
        .compare-points li::before{
            content:"✓";
            color:var(--accent);
            font-weight:800;
            flex:0 0 auto;
        }
        .latest-grid{
            display:grid;
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:var(--gap);
        }
        .latest-card{
            padding:22px;
            display:flex;
            flex-direction:column;
            gap:14px;
            min-height:100%;
        }
        .card-topline{
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:12px;
            flex-wrap:wrap;
        }
        .meta-row{
            display:flex;
            flex-wrap:wrap;
            gap:8px;
        }
        .card-note{
            display:grid;
            gap:8px;
        }
        .card-link{
            margin-top:auto;
            display:inline-flex;
            align-items:center;
            gap:8px;
            color:var(--brand);
            font-weight:700;
        }
        .card-link::after{
            content:"→";
            transition:transform .22s var(--ease);
        }
        .card-link:hover::after{transform:translateX(3px)}
        .faq-list{
            display:grid;
            gap:14px;
        }
        details.faq{
            background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,254,.96));
            border:1px solid var(--line);
            border-radius:20px;
            box-shadow:var(--shadow-soft);
            overflow:hidden;
        }
        details.faq[open]{
            border-color:rgba(47,111,176,.18);
        }
        details.faq summary{
            list-style:none;
            cursor:pointer;
            padding:18px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:16px;
            font-weight:700;
            color:var(--text);
        }
        details.faq summary::-webkit-details-marker{display:none}
        details.faq summary::after{
            content:"+";
            width:28px;
            height:28px;
            border-radius:999px;
            display:grid;
            place-items:center;
            background:rgba(47,111,176,.08);
            color:var(--brand);
            flex:0 0 auto;
            transition:transform .22s var(--ease), background .22s var(--ease);
        }
        details.faq[open] summary::after{
            content:"–";
            background:rgba(76,138,99,.10);
            color:var(--accent);
        }
        .faq-body{
            padding:0 20px 18px;
            color:var(--muted);
        }
        .contact-grid{
            display:grid;
            grid-template-columns:minmax(0,1.05fr) minmax(300px,.95fr);
            gap:var(--gap-lg);
            align-items:start;
        }
        .contact-card{
            padding:24px;
        }
        .form-grid{
            display:grid;
            gap:16px;
        }
        .field-row{
            display:grid;
            grid-template-columns:repeat(2, minmax(0,1fr));
            gap:14px;
        }
        .field{
            display:grid;
            gap:8px;
        }
        label{
            font-size:14px;
            font-weight:700;
            color:var(--text);
        }
        input, textarea, select{
            width:100%;
            border:1px solid var(--line);
            border-radius:16px;
            background:#fff;
            color:var(--text);
            padding:14px 15px;
            transition:border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease), background .22s var(--ease);
        }
        input::placeholder,
        textarea::placeholder{
            color:#8aa0b6;
        }
        input:focus,
        textarea:focus,
        select:focus{
            border-color:rgba(47,111,176,.32);
            box-shadow:0 0 0 4px rgba(47,111,176,.10);
            outline:none;
        }
        textarea{
            min-height:150px;
            resize:vertical;
        }
        .form-actions{
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
            margin-top:4px;
        }
        .form-hint{
            color:var(--muted);
            font-size:14px;
        }
        .side-card{
            padding:24px;
            display:grid;
            gap:16px;
        }
        .side-banner{
            padding:18px;
            border-radius:18px;
            background:linear-gradient(135deg, rgba(47,111,176,.08), rgba(76,138,99,.06));
            border:1px solid rgba(47,111,176,.10);
        }
        .side-banner h3{
            margin:0 0 8px;
            font-size:18px;
        }
        .side-banner p{
            margin:0;
            color:var(--muted);
        }
        .footer{
            padding:var(--section) 0 36px;
        }
        .footer-box{
            padding:32px;
            background:linear-gradient(180deg, rgba(255,255,255,.97), rgba(247,250,253,.96));
        }
        .footer-top{
            display:grid;
            grid-template-columns:minmax(0,1.2fr) minmax(220px,.7fr) minmax(240px,.85fr);
            gap:24px;
        }
        .footer-brand .brand{
            color:var(--text);
            margin-bottom:12px;
        }
        .footer-brand .brand-mark{
            box-shadow:none;
            background:linear-gradient(135deg, rgba(47,111,176,.14), rgba(118,174,224,.22));
        }
        .footer-brand p{
            margin:0;
            color:var(--muted);
            max-width:38ch;
        }
        .footer h3{
            margin:0;
            font-size:16px;
        }
        .footer-links{
            display:grid;
            gap:10px;
            margin-top:14px;
        }
        .footer-links a,
        .footer-links span{
            color:var(--muted);
            font-size:14px;
        }
        .footer-links a{
            width:fit-content;
            transition:color .22s var(--ease), transform .22s var(--ease);
        }
        .footer-links a:hover{
            color:var(--brand);
            transform:translateX(2px);
        }
        .footer-bottom{
            margin-top:28px;
            padding-top:18px;
            border-top:1px solid var(--line);
            display:flex;
            justify-content:space-between;
            align-items:center;
            gap:12px;
            flex-wrap:wrap;
            color:var(--muted);
            font-size:14px;
        }
        .center-line{
            display:flex;
            align-items:center;
            gap:8px;
            color:var(--muted);
        }
        .center-line::before{
            content:"";
            width:34px;
            height:1px;
            background:var(--line-strong);
        }
        .article-subline{
            margin-top:10px;
            color:var(--muted);
            font-size:15px;
        }
        @media (max-width: 1100px){
            .hero-grid,
            .article-layout,
            .contact-grid{
                grid-template-columns:1fr;
            }
            .sidebar{
                position:static;
                top:auto;
            }
            .footer-top{
                grid-template-columns:1fr 1fr;
            }
            .footer-brand{
                grid-column:1 / -1;
            }
        }
        @media (max-width: 900px){
            .latest-grid{
                grid-template-columns:1fr;
            }
            .compare-card,
            .matrix-span-6,
            .matrix-span-4{
                grid-column:span 12;
            }
            .footer-top{
                grid-template-columns:1fr;
            }
        }
        @media (max-width: 768px){
            .container{
                width:min(var(--container), calc(100% - 28px));
            }
            .nav-links{
                display:none;
            }
            .menu-btn{
                display:inline-flex;
            }
            .drawer{
                display:none;
            }
            body.menu-open .drawer{
                display:block;
            }
            .hero{
                padding-top:28px;
            }
            .hero h1{
                font-size:clamp(30px, 8vw, 44px);
            }
            .hero-desc{
                font-size:16px;
            }
            .section{
                padding:var(--section-sm) 0;
            }
            .article-card,
            .info-card,
            .matrix-card,
            .compare-card,
            .latest-card,
            .contact-card,
            .footer-box{
                padding:20px;
                border-radius:20px;
            }
            .field-row{
                grid-template-columns:1fr;
            }
            .metric-grid{
                grid-template-columns:1fr 1fr;
            }
            .footer-bottom{
                flex-direction:column;
                align-items:flex-start;
            }
        }
        @media (max-width: 520px){
            .container{
                width:min(var(--container), calc(100% - 20px));
            }
            .nav-inner{
                min-height:68px;
            }
            .brand{
                gap:10px;
                font-size:15px;
            }
            .brand-mark{
                width:34px;height:34px;border-radius:11px;
            }
            .menu-btn{
                width:42px;height:42px;border-radius:12px;
            }
            .drawer-links{
                grid-template-columns:1fr;
            }
            .hero-actions,
            .form-actions,
            .trust-strip,
            .meta-row,
            .quick-links{
                width:100%;
            }
            .btn{
                width:100%;
            }
            .metric-grid{
                grid-template-columns:1fr;
            }
            .section-head h2{
                font-size:24px;
            }
            .article-body{
                font-size:16px;
            }
            .card-icon{
                width:46px;height:46px;border-radius:14px;
            }
        }