/* roulang page: index */
:root {
            --ink: #15243b;
            --muted: #66758d;
            --blue: #3267e9;
            --blue-dark: #214cc7;
            --cyan: #36b8ed;
            --pale: #f4f8ff;
            --line: #e5ebf4;
            --white: #ffffff;
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --shadow-soft: 0 18px 50px rgba(39, 74, 137, .10);
            --shadow-hover: 0 24px 60px rgba(42, 91, 190, .18);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--white);
            font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input, select, textarea { font: inherit; }
        :focus-visible { outline: 3px solid rgba(50, 103, 233, .32); outline-offset: 3px; }
        .container { max-width: 1180px; }
        .section-space { padding: 104px 0; }
        .section-soft { background: var(--pale); }
        .section-heading { max-width: 710px; margin-bottom: 48px; }
        .section-heading.centered { margin-left: auto; margin-right: auto; text-align: center; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .12em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 5px;
            background: var(--cyan);
        }
        h1, h2, h3, h4 { font-weight: 800; letter-spacing: -.035em; }
        h1 { font-size: clamp(2.7rem, 5vw, 5rem); line-height: 1.1; }
        h2 { font-size: clamp(2rem, 3.5vw, 3.1rem); line-height: 1.18; }
        h3 { font-size: 1.3rem; line-height: 1.35; }
        .lead-copy { color: var(--muted); font-size: 1.06rem; }
        .btn {
            border-radius: 12px;
            padding: 13px 22px;
            font-weight: 700;
            transition: .25s ease;
        }
        .btn-primary {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 10px 22px rgba(50, 103, 233, .22);
        }
        .btn-primary:hover, .btn-primary:focus {
            color: #fff;
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(50, 103, 233, .28);
        }
        .btn-light-outline {
            color: var(--ink);
            border: 1px solid var(--line);
            background: #fff;
        }
        .btn-light-outline:hover { color: var(--blue); border-color: #b9ccf8; background: #f7faff; }
        .btn-white {
            color: var(--blue);
            background: #fff;
            border-color: #fff;
        }
        .btn-white:hover { color: var(--blue-dark); transform: translateY(-2px); }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255,255,255,.88);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(229,235,244,.8);
        }
        .navbar { min-height: 76px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 1.22rem;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            color: white;
            border-radius: 12px;
            background: linear-gradient(145deg, #4b87ff, #2855d8);
            box-shadow: 0 8px 18px rgba(50,103,233,.25);
        }
        .navbar-nav { gap: 5px; }
        .nav-link {
            color: #64738a !important;
            font-weight: 650;
            font-size: .94rem;
            padding: 10px 14px !important;
            border-radius: 10px;
            transition: .2s ease;
        }
        .nav-link:hover, .nav-link.active { color: var(--blue) !important; background: #eef4ff; }
        .nav-download { margin-left: 14px; }

        .hero {
            position: relative;
            overflow: hidden;
            color: #fff;
            background:
                linear-gradient(90deg, rgba(9, 24, 53, .96) 0%, rgba(11, 38, 85, .87) 48%, rgba(13, 62, 126, .53) 100%),
                url("https://images.unsplash.com/photo-1558494949-ef010cbdcc31?auto=format&fit=crop&w=2000&q=88") center/cover;
        }
        .hero::after {
            content: "";
            position: absolute;
            inset: auto -10% -180px 35%;
            height: 300px;
            background: rgba(59, 153, 255, .25);
            filter: blur(70px);
            transform: rotate(-8deg);
        }
        .hero .container { position: relative; z-index: 1; }
        .hero-content { padding: 112px 0 126px; max-width: 790px; }
        .hero .eyebrow { color: #a9dfff; }
        .hero h1 { max-width: 760px; margin-bottom: 24px; }
        .hero .lead-copy { max-width: 690px; color: rgba(255,255,255,.78); font-size: 1.12rem; }
        .hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
        .hero .btn-light-outline { color: #fff; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.3); }
        .hero .btn-light-outline:hover { color: #fff; background: rgba(255,255,255,.16); }
        .hero-panel {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            max-width: 720px;
            margin-top: 54px;
        }
        .hero-chip {
            padding: 15px 17px;
            border: 1px solid rgba(255,255,255,.16);
            border-radius: 15px;
            background: rgba(255,255,255,.08);
            backdrop-filter: blur(8px);
        }
        .hero-chip strong { display: block; font-size: 1.3rem; }
        .hero-chip span { color: rgba(255,255,255,.66); font-size: .82rem; }

        .signal-bar {
            background: #0f2347;
            color: #dceaff;
            border-bottom: 1px solid rgba(255,255,255,.08);
        }
        .signal-track {
            display: flex;
            align-items: center;
            gap: 26px;
            min-height: 52px;
            overflow: hidden;
            white-space: nowrap;
            font-size: .88rem;
        }
        .signal-item { display: inline-flex; align-items: center; gap: 8px; }
        .signal-dot { width: 7px; height: 7px; border-radius: 50%; background: #46db9a; box-shadow: 0 0 0 5px rgba(70,219,154,.12); }
        .signal-label { color: #87a4ce; }

        .metric-card, .feature-card, .node-card, .plan-card, .quote-card, .article-card, .security-card {
            height: 100%;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 28px rgba(36, 64, 110, .055);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }
        .metric-card:hover, .feature-card:hover, .node-card:hover, .plan-card:hover, .quote-card:hover, .article-card:hover, .security-card:hover {
            transform: translateY(-5px);
            border-color: #c8d8f7;
            box-shadow: var(--shadow-hover);
        }
        .metrics-grid { margin-top: -44px; position: relative; z-index: 3; }
        .metric-card { padding: 25px; }
        .metric-icon {
            display: grid;
            place-items: center;
            width: 46px;
            height: 46px;
            margin-bottom: 19px;
            color: var(--blue);
            border-radius: 13px;
            background: #edf3ff;
        }
        .metric-card strong { display: block; font-size: 2rem; letter-spacing: -.06em; }
        .metric-card span { color: var(--muted); font-size: .9rem; }

        .feature-card { padding: 30px; }
        .feature-icon {
            display: grid;
            place-items: center;
            width: 52px;
            height: 52px;
            color: #fff;
            border-radius: 16px;
            background: linear-gradient(145deg, #4a82f4, #2b5bd9);
            box-shadow: 0 9px 18px rgba(50,103,233,.2);
            font-size: 1.2rem;
            margin-bottom: 24px;
        }
        .feature-card p, .node-card p, .security-card p, .article-card p { color: var(--muted); font-size: .94rem; margin-bottom: 0; }
        .feature-list { list-style: none; padding: 0; margin: 21px 0 0; }
        .feature-list li { color: #52637a; font-size: .88rem; margin: 8px 0; }
        .feature-list i { color: #35b98a; margin-right: 8px; }

        .node-wrap {
            padding: 32px;
            border-radius: var(--radius-xl);
            background: #122b56;
            color: #fff;
            overflow: hidden;
            position: relative;
        }
        .node-wrap::before {
            content: "";
            position: absolute;
            width: 360px;
            height: 360px;
            right: -100px;
            top: -180px;
            border-radius: 50%;
            background: rgba(58, 177, 255, .2);
            filter: blur(8px);
        }
        .node-wrap .section-heading { position: relative; z-index: 1; }
        .node-wrap .eyebrow { color: #9cdbff; }
        .node-wrap .lead-copy { color: rgba(255,255,255,.7); }
        .node-card { padding: 23px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.13); color: #fff; box-shadow: none; }
        .node-card:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); }
        .node-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        .node-top strong { font-size: 1.08rem; }
        .online { display: inline-flex; align-items: center; gap: 6px; color: #66e3ac; font-size: .78rem; }
        .online::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #66e3ac; }
        .node-card p { color: rgba(255,255,255,.64); }
        .node-meter { height: 6px; margin-top: 19px; border-radius: 10px; background: rgba(255,255,255,.13); overflow: hidden; }
        .node-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #4ed5ef, #65e6a7); }

        .plan-card { padding: 29px; position: relative; }
        .plan-card.featured { border: 2px solid var(--blue); box-shadow: 0 18px 40px rgba(50,103,233,.16); }
        .plan-ribbon { position: absolute; right: 18px; top: 18px; padding: 5px 10px; color: var(--blue); background: #e9f0ff; border-radius: 20px; font-size: .72rem; font-weight: 800; }
        .plan-name { color: var(--muted); font-weight: 700; }
        .plan-price { margin: 14px 0 20px; font-size: 2.55rem; font-weight: 850; letter-spacing: -.07em; }
        .plan-price small { color: var(--muted); font-size: .84rem; font-weight: 500; letter-spacing: 0; }
        .plan-list { padding: 0; margin: 0 0 24px; list-style: none; color: #5e6e84; font-size: .9rem; }
        .plan-list li { padding: 8px 0; border-bottom: 1px solid #eef2f7; }
        .plan-list i { color: #39bc8d; margin-right: 8px; }

        .compare-table {
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            overflow: hidden;
            box-shadow: var(--shadow-soft);
        }
        .compare-table .row { margin: 0; }
        .compare-table .cell { padding: 17px 20px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
        .compare-table .cell.title { color: var(--ink); font-weight: 750; background: #f8faff; }
        .compare-table .head .cell { color: var(--ink); font-weight: 800; background: #eef4ff; }
        .compare-table .row:last-child .cell { border-bottom: 0; }
        .compare-table .yes { color: #25a875; font-weight: 800; }
        .compare-table .mark { color: #c4ccda; }

        .timeline { position: relative; }
        .timeline::before { content: ""; position: absolute; left: 19px; top: 8px; bottom: 8px; width: 2px; background: #dbe6f8; }
        .timeline-item { position: relative; display: flex; gap: 24px; padding-bottom: 28px; }
        .timeline-dot { position: relative; z-index: 1; flex: 0 0 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; color: var(--blue); background: #eaf1ff; border: 5px solid #fff; box-shadow: 0 0 0 1px #cbdafa; font-size: .8rem; font-weight: 800; }
        .timeline-content { padding-top: 4px; }
        .timeline-content h3 { margin-bottom: 5px; }
        .timeline-content p { color: var(--muted); margin: 0; font-size: .92rem; }

        .article-card { overflow: hidden; }
        .article-cover { height: 175px; overflow: hidden; }
        .article-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
        .article-card:hover .article-cover img { transform: scale(1.06); }
        .article-body { padding: 23px; }
        .article-tag { display: inline-block; padding: 4px 10px; color: var(--blue); background: #edf3ff; border-radius: 8px; font-size: .73rem; font-weight: 800; margin-bottom: 13px; }
        .article-body h3 { font-size: 1.1rem; margin-bottom: 11px; }

        .security-card { padding: 27px; }
        .security-card i { color: var(--blue); font-size: 1.4rem; margin-bottom: 18px; }
        .security-card h3 { font-size: 1.1rem; }

        .quote-card { padding: 28px; }
        .quote-stars { color: #ffb12b; letter-spacing: 2px; margin-bottom: 16px; }
        .quote-card blockquote { color: #4d5d74; font-size: .98rem; margin: 0 0 20px; }
        .quote-user { display: flex; align-items: center; gap: 11px; }
        .avatar { display: grid; place-items: center; width: 38px; height: 38px; color: #fff; border-radius: 50%; background: linear-gradient(145deg, #55a0ff, #2b5bd8); font-weight: 800; }
        .quote-user strong { display: block; font-size: .9rem; }
        .quote-user span { display: block; color: var(--muted); font-size: .78rem; }

        .faq-wrap .accordion-item { margin-bottom: 12px; border: 1px solid var(--line); border-radius: 14px !important; overflow: hidden; }
        .faq-wrap .accordion-button { padding: 20px 22px; color: var(--ink); font-weight: 750; background: #fff; box-shadow: none; }
        .faq-wrap .accordion-button:not(.collapsed) { color: var(--blue); background: #f5f8ff; }
        .faq-wrap .accordion-body { padding: 0 22px 21px; color: var(--muted); font-size: .92rem; background: #f5f8ff; }

        .cta-section { padding: 80px 0; }
        .cta-box {
            position: relative;
            overflow: hidden;
            padding: 56px;
            border-radius: var(--radius-xl);
            color: #fff;
            background: linear-gradient(120deg, #2456cf, #247fca);
            box-shadow: 0 24px 55px rgba(38, 91, 197, .23);
        }
        .cta-box::after { content: ""; position: absolute; right: -80px; bottom: -170px; width: 420px; height: 420px; border: 70px solid rgba(255,255,255,.1); border-radius: 50%; }
        .cta-box > * { position: relative; z-index: 1; }
        .cta-box .lead-copy { color: rgba(255,255,255,.76); max-width: 640px; }
        .form-control { padding: 13px 15px; border: 1px solid #dce5f1; border-radius: 11px; }
        .form-control:focus { border-color: #78a0f4; box-shadow: 0 0 0 4px rgba(50,103,233,.1); }
        .form-note { color: rgba(255,255,255,.7); font-size: .82rem; }

        .site-footer { padding: 58px 0 25px; color: #718096; background: #f5f8fc; border-top: 1px solid var(--line); }
        .footer-brand { color: var(--ink); margin-bottom: 15px; }
        .footer-copy { max-width: 300px; font-size: .9rem; }
        .footer-title { color: var(--ink); font-size: .9rem; font-weight: 800; margin-bottom: 15px; }
        .footer-links { padding: 0; list-style: none; margin: 0; }
        .footer-links li { margin-bottom: 9px; font-size: .88rem; }
        .footer-links a:hover { color: var(--blue); }
        .footer-bottom { display: flex; justify-content: space-between; gap: 18px; padding-top: 27px; margin-top: 38px; border-top: 1px solid #dfe7f1; font-size: .8rem; }
        .social-links { display: flex; gap: 10px; }
        .social-links a { display: grid; place-items: center; width: 34px; height: 34px; color: #6e7f98; border: 1px solid #d8e1ed; border-radius: 10px; }
        .social-links a:hover { color: var(--blue); border-color: #aec4f5; background: #fff; }

        @media (max-width: 991.98px) {
            .navbar-nav { padding-top: 14px; }
            .nav-download { margin: 10px 0 0; }
            .hero-content { padding: 88px 0 108px; }
            .section-space { padding: 82px 0; }
        }
        @media (max-width: 767.98px) {
            h1 { font-size: 2.65rem; }
            h2 { font-size: 2.15rem; }
            .hero-content { padding: 72px 0 86px; }
            .hero-panel { grid-template-columns: 1fr; max-width: 300px; margin-top: 38px; }
            .metrics-grid { margin-top: 0; padding-top: 18px; }
            .signal-track { gap: 18px; font-size: .78rem; }
            .section-space { padding: 68px 0; }
            .node-wrap { padding: 25px 20px; }
            .cta-box { padding: 35px 24px; }
            .footer-bottom { flex-direction: column; }
        }
        @media (max-width: 519.98px) {
            .hero-actions .btn { width: 100%; }
            .hero .lead-copy { font-size: 1rem; }
            .metric-card { padding: 21px; }
            .plan-card { padding: 24px 20px; }
            .compare-table { font-size: .8rem; }
            .compare-table .cell { padding: 13px 10px; }
            .article-cover { height: 145px; }
        }

/* roulang page: category2 */
:root {
            --ink: #15243b;
            --muted: #66758d;
            --blue: #3267e9;
            --blue-dark: #214cc7;
            --cyan: #36b8ed;
            --pale: #f4f8ff;
            --line: #e5ebf4;
            --white: #ffffff;
            --dark: #0c1c38;
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --shadow-soft: 0 18px 50px rgba(39,74,137,.10);
            --shadow-hover: 0 24px 60px rgba(42,91,190,.18);
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--ink);
            background: var(--white);
            font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }
        a { color: inherit; text-decoration: none; }
        img { display: block; max-width: 100%; }
        button, input, select, textarea { font: inherit; }
        .container { max-width: 1180px; }
        .section-space { padding: 98px 0; }
        .section-soft { background: var(--pale); }
        .section-heading { max-width: 720px; margin-bottom: 46px; }
        .section-heading.centered { margin-left: auto; margin-right: auto; text-align: center; }
        .section-heading h2 { margin: 0 0 15px; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.2; letter-spacing: -.045em; }
        .section-heading p { margin: 0; color: var(--muted); font-size: 1.05rem; }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .12em;
            margin-bottom: 14px;
        }
        .eyebrow::before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 5px;
            background: var(--cyan);
        }
        .lead-copy { color: var(--muted); font-size: 1.06rem; }
        .btn {
            border-radius: 12px;
            padding: 13px 22px;
            font-weight: 700;
            transition: .25s ease;
        }
        .btn-primary {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 10px 22px rgba(50,103,233,.22);
        }
        .btn-primary:hover,
        .btn-primary:focus {
            color: #fff;
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(50,103,233,.28);
        }
        .btn-light-outline {
            color: var(--ink);
            border: 1px solid var(--line);
            background: #fff;
        }
        .btn-light-outline:hover { color: var(--blue); border-color: #b9ccf8; background: #f7faff; }
        .btn-white { color: var(--blue); background: #fff; border-color: #fff; }
        .btn-white:hover { color: var(--blue-dark); transform: translateY(-2px); }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255,255,255,.9);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(229,235,244,.8);
        }
        .navbar { min-height: 76px; }
        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 1.22rem;
            font-weight: 900;
            letter-spacing: -.04em;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            color: white;
            border-radius: 12px;
            background: linear-gradient(145deg, #4b87ff, #2855d8);
            box-shadow: 0 8px 18px rgba(50,103,233,.25);
        }
        .navbar-nav { gap: 5px; }
        .nav-link {
            color: #64738a !important;
            font-weight: 650;
            font-size: .94rem;
            padding: 10px 14px !important;
            border-radius: 10px;
            transition: .2s ease;
        }
        .nav-link:hover,
        .nav-link.active { color: var(--blue) !important; background: #eef4ff; }
        .nav-download { margin-left: 14px; }

        .page-hero {
            position: relative;
            overflow: hidden;
            background: var(--pale);
            padding: 94px 0 100px;
        }
        .page-hero::before {
            content: "";
            position: absolute;
            right: -8%;
            top: -28%;
            width: 58%;
            height: 150%;
            background: linear-gradient(145deg, rgba(50,103,233,.13), rgba(54,184,237,.24));
            clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
        }
        .page-hero::after {
            content: "";
            position: absolute;
            left: 55%;
            bottom: -100px;
            width: 260px;
            height: 260px;
            border-radius: 50%;
            background: rgba(54,184,237,.16);
            filter: blur(25px);
        }
        .page-hero .container { position: relative; z-index: 1; }
        .hero-copy { max-width: 730px; }
        .hero-copy h1 {
            max-width: 720px;
            margin: 0 0 22px;
            font-size: clamp(2.7rem, 6vw, 5rem);
            line-height: 1.08;
            letter-spacing: -.065em;
        }
        .hero-copy h1 span { color: var(--blue); }
        .hero-copy .lead-copy { max-width: 680px; font-size: 1.12rem; }
        .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 31px; }
        .hero-note {
            display: flex;
            flex-wrap: wrap;
            gap: 18px 26px;
            margin-top: 28px;
            color: var(--muted);
            font-size: .9rem;
        }
        .hero-note i { color: var(--blue); margin-right: 6px; }

        .dashboard-card {
            position: relative;
            max-width: 410px;
            margin: 15px 0 0 auto;
            padding: 24px;
            border: 1px solid rgba(255,255,255,.8);
            border-radius: 26px;
            background: rgba(255,255,255,.78);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(12px);
        }
        .dashboard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; }
        .dashboard-top strong { font-size: 1.05rem; }
        .status-pill {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            color: #138353;
            font-size: .78rem;
            font-weight: 800;
            padding: 7px 10px;
            border-radius: 99px;
            background: #e9fbf3;
        }
        .status-pill::before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: #16b979;
            box-shadow: 0 0 0 4px rgba(22,185,121,.12);
        }
        .route-line { display: flex; align-items: center; gap: 11px; margin: 18px 0; }
        .route-node {
            flex: 1;
            padding: 14px;
            border: 1px solid var(--line);
            border-radius: 14px;
            background: #fff;
        }
        .route-node small { display: block; color: var(--muted); font-size: .74rem; }
        .route-node strong { display: block; margin-top: 2px; font-size: .92rem; }
        .route-line > i { color: var(--blue); }
        .signal-bars { display: flex; align-items: end; gap: 4px; height: 40px; margin-top: 22px; }
        .signal-bars span { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--cyan), var(--blue)); }
        .signal-bars span:nth-child(1) { height: 42%; opacity: .55; }
        .signal-bars span:nth-child(2) { height: 62%; opacity: .7; }
        .signal-bars span:nth-child(3) { height: 78%; opacity: .83; }
        .signal-bars span:nth-child(4) { height: 95%; }
        .signal-bars span:nth-child(5) { height: 70%; opacity: .75; }
        .dashboard-caption { display: flex; justify-content: space-between; color: var(--muted); font-size: .78rem; margin-top: 10px; }

        .metric-strip { margin-top: -38px; position: relative; z-index: 2; }
        .metrics-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
        .metric-card {
            padding: 25px 24px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 28px rgba(36,64,110,.055);
        }
        .metric-card strong { display: block; color: var(--blue); font-size: 2rem; line-height: 1.1; letter-spacing: -.04em; }
        .metric-card span { display: block; color: var(--muted); margin-top: 7px; font-size: .9rem; }

        .plan-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
        .plan-card {
            position: relative;
            display: flex;
            flex-direction: column;
            padding: 28px 24px 24px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 28px rgba(36,64,110,.055);
            transition: .25s ease;
        }
        .plan-card:hover { transform: translateY(-6px); border-color: #c8d8f7; box-shadow: var(--shadow-hover); }
        .plan-card.featured { border: 2px solid var(--blue); box-shadow: 0 18px 45px rgba(50,103,233,.16); }
        .plan-badge {
            position: absolute;
            top: -13px;
            right: 20px;
            padding: 5px 11px;
            color: #fff;
            border-radius: 99px;
            background: var(--blue);
            font-size: .74rem;
            font-weight: 800;
        }
        .plan-icon {
            display: grid;
            place-items: center;
            width: 44px;
            height: 44px;
            margin-bottom: 20px;
            color: var(--blue);
            border-radius: 14px;
            background: #edf3ff;
        }
        .plan-card h3 { margin: 0 0 7px; font-size: 1.27rem; }
        .plan-card p { min-height: 58px; color: var(--muted); font-size: .88rem; margin-bottom: 20px; }
        .price { display: flex; align-items: baseline; gap: 3px; margin-bottom: 22px; }
        .price strong { font-size: 2.45rem; line-height: 1; letter-spacing: -.06em; }
        .price span { color: var(--muted); font-size: .86rem; }
        .plan-list { list-style: none; padding: 0; margin: 0 0 25px; }
        .plan-list li { display: flex; gap: 9px; padding: 8px 0; color: #52647d; font-size: .88rem; border-bottom: 1px dashed #edf0f6; }
        .plan-list li:last-child { border-bottom: 0; }
        .plan-list i { color: #20a879; margin-top: 5px; }
        .plan-card .btn { width: 100%; margin-top: auto; }

        .split-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 70px; align-items: center; }
        .blue-panel {
            min-height: 365px;
            padding: 34px;
            color: #fff;
            border-radius: var(--radius-xl);
            background: linear-gradient(145deg, #183e9d, #3267e9 65%, #36b8ed);
            box-shadow: var(--shadow-soft);
        }
        .blue-panel h3 { max-width: 370px; margin: 0 0 17px; font-size: 2rem; line-height: 1.25; letter-spacing: -.04em; }
        .blue-panel p { max-width: 390px; color: rgba(255,255,255,.78); }
        .blue-panel .mini-chart { display: flex; align-items: end; gap: 8px; height: 82px; margin-top: 40px; }
        .mini-chart span { flex: 1; border-radius: 7px 7px 2px 2px; background: rgba(255,255,255,.72); }
        .mini-chart span:nth-child(1) { height: 38%; opacity: .45; }
        .mini-chart span:nth-child(2) { height: 58%; opacity: .58; }
        .mini-chart span:nth-child(3) { height: 48%; opacity: .52; }
        .mini-chart span:nth-child(4) { height: 78%; opacity: .8; }
        .mini-chart span:nth-child(5) { height: 95%; }
        .benefit-list { display: grid; gap: 22px; }
        .benefit-item { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
        .benefit-icon {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            color: var(--blue);
            border-radius: 15px;
            background: #edf3ff;
        }
        .benefit-item h3 { margin: 0 0 5px; font-size: 1.1rem; }
        .benefit-item p { margin: 0; color: var(--muted); font-size: .94rem; }

        .comparison-wrap {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-xl);
            background: #fff;
            box-shadow: var(--shadow-soft);
        }
        .comparison-table { margin: 0; vertical-align: middle; }
        .comparison-table th { color: var(--ink); font-size: .9rem; background: #f7faff; padding: 18px 21px; border-bottom: 1px solid var(--line); }
        .comparison-table td { color: var(--muted); padding: 18px 21px; border-color: #edf1f7; font-size: .91rem; }
        .comparison-table td:first-child { color: var(--ink); font-weight: 700; }
        .comparison-table .check { color: #16a26e; font-size: 1rem; }
        .comparison-table .recommended { color: var(--blue); font-weight: 800; }

        .timeline { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
        .timeline::before {
            content: "";
            position: absolute;
            top: 22px;
            left: 8%;
            right: 8%;
            height: 2px;
            background: #dce7fb;
        }
        .timeline-item { position: relative; z-index: 1; }
        .timeline-number {
            display: grid;
            place-items: center;
            width: 45px;
            height: 45px;
            margin-bottom: 20px;
            color: #fff;
            border: 5px solid var(--pale);
            border-radius: 50%;
            background: var(--blue);
            font-weight: 900;
        }
        .timeline-item h3 { margin: 0 0 8px; font-size: 1.07rem; }
        .timeline-item p { margin: 0; color: var(--muted); font-size: .9rem; }

        .faq-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
        .faq-grid .accordion-item { border: 1px solid var(--line); border-radius: 15px !important; overflow: hidden; background: #fff; }
        .faq-grid .accordion-button { padding: 19px 20px; color: var(--ink); font-weight: 750; background: #fff; box-shadow: none; }
        .faq-grid .accordion-button:not(.collapsed) { color: var(--blue); background: #f8fbff; }
        .faq-grid .accordion-button:focus { box-shadow: 0 0 0 3px rgba(50,103,233,.12); }
        .faq-grid .accordion-body { color: var(--muted); padding: 0 20px 20px; font-size: .92rem; }

        .cta-section { padding: 78px 0; }
        .cta-box {
            position: relative;
            overflow: hidden;
            padding: 52px 58px;
            color: #fff;
            border-radius: var(--radius-xl);
            background: linear-gradient(110deg, #183b96, #3267e9);
            box-shadow: var(--shadow-soft);
        }
        .cta-box::after {
            content: "";
            position: absolute;
            right: -50px;
            top: -100px;
            width: 330px;
            height: 330px;
            border: 35px solid rgba(255,255,255,.08);
            border-radius: 50%;
        }
        .cta-box .row { position: relative; z-index: 1; }
        .cta-box h2 { margin: 0 0 11px; font-size: clamp(1.8rem, 3vw, 2.7rem); line-height: 1.2; letter-spacing: -.05em; }
        .cta-box p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); }

        .site-footer { padding: 74px 0 25px; color: #b5c1d6; background: #0d1b35; }
        .footer-brand { color: #fff; }
        .footer-copy { max-width: 350px; margin: 20px 0 0; color: #91a1bc; font-size: .92rem; }
        .social-links { display: flex; gap: 9px; }
        .social-links a {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            color: #b9c8df;
            border: 1px solid rgba(255,255,255,.12);
            border-radius: 11px;
            transition: .2s ease;
        }
        .social-links a:hover { color: #fff; border-color: #5b8cff; background: rgba(50,103,233,.28); transform: translateY(-2px); }
        .footer-title { margin-bottom: 17px; color: #fff; font-weight: 800; }
        .footer-links { list-style: none; padding: 0; margin: 0; }
        .footer-links li { margin-bottom: 10px; color: #91a1bc; font-size: .9rem; }
        .footer-links a { transition: .2s ease; }
        .footer-links a:hover { color: #72a0ff; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 15px;
            margin-top: 55px;
            padding-top: 20px;
            color: #73849f;
            border-top: 1px solid rgba(255,255,255,.1);
            font-size: .78rem;
        }

        @media (max-width: 991.98px) {
            .navbar-nav { padding: 16px 0 8px; }
            .nav-download { margin: 8px 0 0; }
            .page-hero { padding: 75px 0 85px; }
            .dashboard-card { margin: 42px auto 0; }
            .metrics-grid { grid-template-columns: repeat(2, 1fr); }
            .plan-grid { grid-template-columns: repeat(2, 1fr); }
            .split-layout { grid-template-columns: 1fr; gap: 42px; }
            .timeline { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
            .timeline::before { display: none; }
        }

        @media (max-width: 767.98px) {
            .section-space { padding: 72px 0; }
            .hero-copy h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
            .metric-strip { margin-top: -25px; }
            .metrics-grid { gap: 10px; }
            .metric-card { padding: 19px 16px; }
            .metric-card strong { font-size: 1.65rem; }
            .metric-card span { font-size: .78rem; }
            .plan-grid { grid-template-columns: 1fr; }
            .plan-card p { min-height: auto; }
            .comparison-wrap { overflow-x: auto; }
            .comparison-table { min-width: 690px; }
            .faq-grid { grid-template-columns: 1fr; }
            .cta-box { padding: 36px 25px; }
            .cta-box .btn { margin-top: 23px; }
            .footer-bottom { flex-direction: column; margin-top: 38px; }
        }

        @media (max-width: 520px) {
            .page-hero { padding: 58px 0 72px; }
            .hero-actions .btn { width: 100%; }
            .hero-note { display: block; }
            .hero-note span { display: block; margin-bottom: 6px; }
            .metrics-grid { grid-template-columns: 1fr 1fr; }
            .timeline { grid-template-columns: 1fr; }
            .timeline-item { display: grid; grid-template-columns: 45px 1fr; column-gap: 14px; }
            .timeline-number { grid-row: span 2; }
            .timeline-item h3 { align-self: end; }
            .timeline-item p { align-self: start; }
        }

/* roulang page: category1 */
:root {
            --ink: #15243b;
            --muted: #66758d;
            --blue: #3267e9;
            --blue-dark: #214cc7;
            --cyan: #36b8ed;
            --pale: #f4f8ff;
            --line: #e5ebf4;
            --white: #ffffff;
            --soft-blue: #eef4ff;
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --shadow-soft: 0 18px 50px rgba(39, 74, 137, .10);
            --shadow-hover: 0 24px 60px rgba(42, 91, 190, .18);
        }

        * {
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--white);
            font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            max-width: 100%;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        .container {
            max-width: 1180px;
        }

        .section-space {
            padding: 102px 0;
        }

        .section-soft {
            background: var(--pale);
        }

        .section-heading {
            max-width: 720px;
            margin-bottom: 46px;
        }

        .section-heading.centered {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .12em;
            margin-bottom: 14px;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 5px;
            background: var(--cyan);
        }

        h1,
        h2,
        h3,
        h4 {
            font-weight: 850;
            letter-spacing: -.045em;
            line-height: 1.2;
        }

        h1 {
            font-size: clamp(2.35rem, 5vw, 4.7rem);
        }

        h2 {
            font-size: clamp(1.9rem, 3.4vw, 3rem);
        }

        h3 {
            font-size: 1.28rem;
        }

        .lead-copy {
            color: var(--muted);
            font-size: 1.06rem;
        }

        .btn {
            border-radius: 12px;
            padding: 13px 22px;
            font-weight: 750;
            transition: .25s ease;
        }

        .btn-primary {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 10px 22px rgba(50, 103, 233, .22);
        }

        .btn-primary:hover,
        .btn-primary:focus {
            color: #fff;
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(50, 103, 233, .28);
        }

        .btn-light-outline {
            color: var(--ink);
            border: 1px solid var(--line);
            background: #fff;
        }

        .btn-light-outline:hover {
            color: var(--blue);
            border-color: #b9ccf8;
            background: #f7faff;
        }

        .btn-white {
            color: var(--blue);
            background: #fff;
            border-color: #fff;
        }

        .btn-white:hover {
            color: var(--blue-dark);
            transform: translateY(-2px);
        }

        :focus-visible {
            outline: 3px solid rgba(54, 184, 237, .45);
            outline-offset: 3px;
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, .9);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(229, 235, 244, .85);
        }

        .navbar {
            min-height: 76px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 1.22rem;
            font-weight: 900;
            letter-spacing: -.04em;
        }

        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            color: #fff;
            border-radius: 12px;
            background: linear-gradient(145deg, #4b87ff, #2855d8);
            box-shadow: 0 8px 18px rgba(50, 103, 233, .25);
        }

        .navbar-nav {
            gap: 5px;
        }

        .nav-link {
            color: #64738a !important;
            font-weight: 650;
            font-size: .94rem;
            padding: 10px 14px !important;
            border-radius: 10px;
            transition: .2s ease;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--blue) !important;
            background: #eef4ff;
        }

        .nav-download {
            margin-left: 14px;
        }

        .page-hero {
            position: relative;
            overflow: hidden;
            padding: 86px 0 92px;
            background:
                linear-gradient(110deg, rgba(244, 248, 255, .98) 0%, rgba(245, 249, 255, .94) 46%, rgba(229, 241, 255, .82) 100%);
        }

        .page-hero::before {
            content: "";
            position: absolute;
            width: 440px;
            height: 440px;
            right: -120px;
            top: -190px;
            border-radius: 50%;
            background: rgba(54, 184, 237, .16);
            filter: blur(4px);
        }

        .page-hero::after {
            content: "";
            position: absolute;
            width: 260px;
            height: 260px;
            left: -110px;
            bottom: -160px;
            border-radius: 50%;
            background: rgba(50, 103, 233, .10);
        }

        .page-hero .container {
            position: relative;
            z-index: 1;
        }

        .hero-copy {
            max-width: 690px;
        }

        .hero-copy h1 {
            margin: 0 0 24px;
            max-width: 680px;
        }

        .hero-copy .lead-copy {
            max-width: 640px;
            font-size: 1.1rem;
        }

        .breadcrumb-line {
            display: flex;
            align-items: center;
            gap: 9px;
            margin-bottom: 25px;
            color: #7788a0;
            font-size: .9rem;
        }

        .breadcrumb-line a {
            color: var(--blue);
            font-weight: 700;
        }

        .hero-actions {
            display: flex;
            gap: 13px;
            flex-wrap: wrap;
            margin-top: 32px;
        }

        .hero-stack {
            position: relative;
            min-height: 390px;
        }

        .hero-main-card,
        .hero-side-card {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, .72);
            background: rgba(255, 255, 255, .86);
            box-shadow: var(--shadow-soft);
            backdrop-filter: blur(12px);
        }

        .hero-main-card {
            inset: 28px 22px 18px 30px;
            z-index: 2;
            overflow: hidden;
            border-radius: var(--radius-xl);
        }

        .hero-main-card img {
            width: 100%;
            height: 100%;
            min-height: 340px;
            object-fit: cover;
        }

        .hero-main-card::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, rgba(11, 41, 91, .04), rgba(10, 35, 83, .76));
        }

        .hero-card-caption {
            position: absolute;
            z-index: 2;
            left: 26px;
            right: 26px;
            bottom: 24px;
            color: #fff;
        }

        .hero-card-caption strong {
            display: block;
            font-size: 1.3rem;
            margin-bottom: 4px;
        }

        .hero-card-caption span {
            color: rgba(255, 255, 255, .76);
            font-size: .9rem;
        }

        .hero-side-card {
            z-index: 3;
            padding: 17px 18px;
            border-radius: 17px;
        }

        .hero-side-card.top {
            top: 0;
            right: 0;
            width: 190px;
        }

        .hero-side-card.bottom {
            left: 0;
            bottom: 0;
            width: 210px;
        }

        .status-dot {
            display: inline-block;
            width: 9px;
            height: 9px;
            margin-right: 7px;
            border-radius: 50%;
            background: #1ec98b;
            box-shadow: 0 0 0 5px rgba(30, 201, 139, .12);
        }

        .side-label {
            color: var(--muted);
            font-size: .78rem;
        }

        .side-value {
            display: block;
            margin-top: 4px;
            color: var(--ink);
            font-size: 1.15rem;
            font-weight: 850;
        }

        .metrics-strip {
            position: relative;
            z-index: 5;
            margin-top: -38px;
        }

        .metric-card,
        .feature-card,
        .node-card,
        .plan-card,
        .quote-card,
        .article-card,
        .security-card,
        .compare-card {
            height: 100%;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 28px rgba(36, 64, 110, .055);
            transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
        }

        .metric-card:hover,
        .feature-card:hover,
        .node-card:hover,
        .plan-card:hover,
        .quote-card:hover,
        .article-card:hover,
        .security-card:hover,
        .compare-card:hover {
            transform: translateY(-5px);
            border-color: #c8d8f7;
            box-shadow: var(--shadow-hover);
        }

        .metric-card {
            padding: 22px;
        }

        .metric-icon {
            display: grid;
            place-items: center;
            width: 42px;
            height: 42px;
            color: var(--blue);
            border-radius: 13px;
            background: var(--soft-blue);
        }

        .metric-number {
            display: block;
            margin: 12px 0 3px;
            font-size: 1.75rem;
            font-weight: 900;
            letter-spacing: -.05em;
        }

        .metric-label {
            color: var(--muted);
            font-size: .88rem;
        }

        .service-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 28px;
            align-items: stretch;
        }

        .service-panel {
            padding: 34px;
            border-radius: var(--radius-xl);
            background: #fff;
            border: 1px solid var(--line);
            box-shadow: var(--shadow-soft);
        }

        .service-panel h3 {
            margin: 0 0 13px;
        }

        .service-panel p {
            color: var(--muted);
            margin-bottom: 25px;
        }

        .service-list {
            display: grid;
            gap: 15px;
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .service-list li {
            display: flex;
            gap: 13px;
            align-items: flex-start;
            color: #43536d;
        }

        .service-list i {
            flex: 0 0 auto;
            margin-top: 5px;
            color: var(--blue);
        }

        .network-visual {
            position: relative;
            min-height: 320px;
            overflow: hidden;
            border-radius: var(--radius-xl);
            background:
                linear-gradient(145deg, rgba(11, 40, 87, .92), rgba(41, 103, 203, .82)),
                url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1200&q=85") center/cover;
        }

        .network-visual::after {
            content: "";
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
            background-size: 34px 34px;
            mask-image: linear-gradient(to bottom, black, transparent);
        }

        .network-orbit {
            position: absolute;
            z-index: 2;
            width: 210px;
            height: 210px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(255, 255, 255, .4);
            border-radius: 50%;
            box-shadow: 0 0 0 30px rgba(255, 255, 255, .04), 0 0 0 60px rgba(255, 255, 255, .035);
        }

        .network-orbit::before,
        .network-orbit::after {
            content: "";
            position: absolute;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #72e1ff;
            box-shadow: 0 0 18px #72e1ff;
        }

        .network-orbit::before {
            top: 17px;
            right: 20px;
        }

        .network-orbit::after {
            bottom: 23px;
            left: 16px;
            background: #fff;
            box-shadow: 0 0 18px #fff;
        }

        .network-core {
            position: absolute;
            z-index: 3;
            top: 50%;
            left: 50%;
            display: grid;
            place-items: center;
            width: 76px;
            height: 76px;
            color: #fff;
            transform: translate(-50%, -50%);
            border: 1px solid rgba(255, 255, 255, .5);
            border-radius: 23px;
            background: rgba(255, 255, 255, .16);
            backdrop-filter: blur(8px);
            font-size: 1.6rem;
        }

        .node-card {
            padding: 25px;
        }

        .node-card .node-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            margin-bottom: 24px;
        }

        .node-region {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 800;
        }

        .region-icon {
            display: grid;
            place-items: center;
            width: 40px;
            height: 40px;
            color: var(--blue);
            border-radius: 12px;
            background: var(--soft-blue);
        }

        .node-status {
            padding: 5px 10px;
            color: #14875e;
            border-radius: 20px;
            background: #eafaf3;
            font-size: .75rem;
            font-weight: 800;
        }

        .node-line {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 14px;
            margin-top: 12px;
            color: var(--muted);
            font-size: .87rem;
        }

        .progress {
            height: 7px;
            overflow: hidden;
            background: #edf2f8;
            border-radius: 10px;
        }

        .progress-bar {
            border-radius: 10px;
            background: linear-gradient(90deg, var(--blue), var(--cyan));
        }

        .compare-card {
            padding: 28px;
        }

        .compare-card h3 {
            margin-bottom: 20px;
        }

        .compare-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            padding: 15px 0;
            border-bottom: 1px solid var(--line);
        }

        .compare-row:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .compare-label {
            color: var(--muted);
            font-size: .9rem;
        }

        .compare-value {
            display: block;
            margin-top: 3px;
            font-size: 1.08rem;
            font-weight: 850;
        }

        .compare-value.good {
            color: #16865f;
        }

        .timeline {
            position: relative;
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 24px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            top: 21px;
            right: 11%;
            left: 11%;
            height: 2px;
            background: #dce8fb;
        }

        .timeline-item {
            position: relative;
            z-index: 1;
            text-align: center;
        }

        .timeline-dot {
            display: grid;
            place-items: center;
            width: 43px;
            height: 43px;
            margin: 0 auto 18px;
            color: #fff;
            border: 5px solid #eef4ff;
            border-radius: 50%;
            background: var(--blue);
            box-shadow: 0 0 0 1px #a7c1fb;
            font-size: .88rem;
            font-weight: 800;
        }

        .timeline-item h3 {
            font-size: 1.05rem;
            margin-bottom: 8px;
        }

        .timeline-item p {
            margin: 0;
            color: var(--muted);
            font-size: .88rem;
        }

        .article-card {
            overflow: hidden;
        }

        .article-image {
            width: 100%;
            height: 172px;
            object-fit: cover;
        }

        .article-body {
            padding: 24px;
        }

        .article-tag {
            display: inline-flex;
            padding: 5px 10px;
            color: var(--blue);
            border-radius: 20px;
            background: var(--soft-blue);
            font-size: .75rem;
            font-weight: 800;
        }

        .article-body h3 {
            margin: 16px 0 10px;
            font-size: 1.16rem;
            line-height: 1.45;
        }

        .article-body p {
            margin: 0;
            color: var(--muted);
            font-size: .9rem;
        }

        .security-card {
            padding: 29px;
        }

        .security-icon {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            margin-bottom: 19px;
            color: var(--blue);
            border-radius: 15px;
            background: var(--soft-blue);
            font-size: 1.15rem;
        }

        .security-card h3 {
            margin-bottom: 11px;
        }

        .security-card p {
            margin: 0;
            color: var(--muted);
            font-size: .93rem;
        }

        .faq-wrap {
            max-width: 850px;
            margin: 0 auto;
        }

        .accordion-item {
            margin-bottom: 12px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 15px !important;
            background: #fff;
        }

        .accordion-button {
            padding: 20px 23px;
            color: var(--ink);
            background: #fff;
            box-shadow: none !important;
            font-weight: 750;
        }

        .accordion-button:not(.collapsed) {
            color: var(--blue);
            background: #f7faff;
        }

        .accordion-button::after {
            background-size: 14px;
        }

        .accordion-body {
            padding: 0 23px 22px;
            color: var(--muted);
        }

        .cta-panel {
            position: relative;
            overflow: hidden;
            padding: 55px 58px;
            color: #fff;
            border-radius: var(--radius-xl);
            background: linear-gradient(120deg, #183f9c, #3267e9 58%, #36b8ed);
            box-shadow: 0 22px 50px rgba(39, 89, 194, .22);
        }

        .cta-panel::after {
            content: "";
            position: absolute;
            width: 310px;
            height: 310px;
            right: -70px;
            top: -150px;
            border: 1px solid rgba(255, 255, 255, .22);
            border-radius: 50%;
            box-shadow: 0 0 0 35px rgba(255, 255, 255, .06), 0 0 0 70px rgba(255, 255, 255, .04);
        }

        .cta-panel .row {
            position: relative;
            z-index: 1;
        }

        .cta-panel h2 {
            max-width: 680px;
            margin-bottom: 15px;
        }

        .cta-panel p {
            max-width: 650px;
            margin: 0;
            color: rgba(255, 255, 255, .78);
        }

        .cta-actions {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            height: 100%;
        }

        .site-footer {
            padding: 72px 0 25px;
            color: #b4c2d9;
            background: #0e1d35;
        }

        .footer-brand {
            color: #fff;
        }

        .footer-copy {
            max-width: 360px;
            margin: 20px 0 0;
            color: #8d9db6;
            font-size: .92rem;
        }

        .social-links {
            display: flex;
            gap: 10px;
        }

        .social-links a {
            display: grid;
            place-items: center;
            width: 37px;
            height: 37px;
            color: #b7c7df;
            border: 1px solid rgba(255, 255, 255, .13);
            border-radius: 11px;
            transition: .2s ease;
        }

        .social-links a:hover {
            color: #fff;
            border-color: var(--cyan);
            background: rgba(54, 184, 237, .16);
            transform: translateY(-2px);
        }

        .footer-title {
            margin-bottom: 16px;
            color: #fff;
            font-weight: 800;
        }

        .footer-links {
            display: grid;
            gap: 10px;
            padding: 0;
            margin: 0;
            color: #8d9db6;
            list-style: none;
            font-size: .9rem;
        }

        .footer-links a {
            transition: .2s ease;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 52px;
            padding-top: 22px;
            color: #71829e;
            border-top: 1px solid rgba(255, 255, 255, .1);
            font-size: .8rem;
        }

        @media (max-width: 991.98px) {
            .navbar-collapse {
                padding: 15px 0 10px;
            }

            .navbar-nav {
                gap: 3px;
            }

            .nav-download {
                margin: 10px 0 0;
            }

            .page-hero {
                padding: 70px 0 80px;
            }

            .hero-stack {
                min-height: 360px;
                margin-top: 35px;
            }

            .service-grid {
                grid-template-columns: 1fr;
            }

            .timeline {
                grid-template-columns: repeat(2, 1fr);
                row-gap: 35px;
            }

            .timeline::before {
                display: none;
            }

            .cta-actions {
                justify-content: flex-start;
                margin-top: 25px;
            }
        }

        @media (max-width: 767.98px) {
            .section-space {
                padding: 72px 0;
            }

            .page-hero {
                padding: 55px 0 64px;
            }

            .hero-copy h1 {
                font-size: 2.45rem;
            }

            .hero-stack {
                min-height: 320px;
            }

            .hero-main-card {
                inset: 22px 12px 12px 18px;
            }

            .hero-main-card img {
                min-height: 285px;
            }

            .hero-side-card.top {
                right: -3px;
                width: 160px;
            }

            .hero-side-card.bottom {
                left: -3px;
                width: 180px;
            }

            .metrics-strip {
                margin-top: -25px;
            }

            .service-panel {
                padding: 25px;
            }

            .network-visual {
                min-height: 275px;
            }

            .compare-card {
                padding: 23px;
            }

            .cta-panel {
                padding: 38px 25px;
            }

            .footer-bottom {
                flex-direction: column;
                gap: 8px;
                margin-top: 38px;
            }
        }

        @media (max-width: 519.98px) {
            .brand {
                font-size: 1.08rem;
            }

            .brand-mark {
                width: 35px;
                height: 35px;
            }

            .hero-actions .btn {
                width: 100%;
            }

            .hero-stack {
                min-height: 285px;
            }

            .hero-main-card img {
                min-height: 250px;
            }

            .hero-card-caption {
                left: 17px;
                right: 17px;
                bottom: 17px;
            }

            .hero-card-caption strong {
                font-size: 1.05rem;
            }

            .hero-side-card {
                padding: 13px;
            }

            .hero-side-card.top {
                width: 140px;
            }

            .hero-side-card.bottom {
                width: 157px;
            }

            .timeline {
                grid-template-columns: 1fr;
                gap: 24px;
            }

            .timeline-item {
                text-align: left;
                display: grid;
                grid-template-columns: 43px 1fr;
                column-gap: 15px;
            }

            .timeline-dot {
                grid-row: span 2;
                margin: 0;
            }

            .timeline-item h3 {
                margin: 1px 0 5px;
            }
        }

/* roulang page: category4 */
:root {
      --ink:#15243b;
      --muted:#66758d;
      --blue:#3267e9;
      --blue-dark:#214cc7;
      --cyan:#36b8ed;
      --pale:#f4f8ff;
      --line:#e5ebf4;
      --white:#fff;
      --radius-xl:28px;
      --radius-lg:20px;
      --radius-md:14px;
      --shadow-soft:0 18px 50px rgba(39,74,137,.10);
      --shadow-hover:0 24px 60px rgba(42,91,190,.18);
    }
    * { box-sizing:border-box; }
    html { scroll-behavior:smooth; }
    body {
      margin:0;
      color:var(--ink);
      background:var(--white);
      font-family:"PingFang SC","Microsoft YaHei",system-ui,-apple-system,sans-serif;
      line-height:1.75;
      -webkit-font-smoothing:antialiased;
    }
    a { color:inherit; text-decoration:none; }
    img { display:block; max-width:100%; }
    button,input,select,textarea { font:inherit; }
    .container { max-width:1180px; }
    .section-space { padding:100px 0; }
    .section-soft { background:var(--pale); }
    .section-heading { max-width:710px; margin-bottom:44px; }
    .section-heading.centered { margin-left:auto; margin-right:auto; text-align:center; }
    .section-heading h2 { font-size:clamp(1.85rem,3vw,2.65rem); letter-spacing:-.045em; font-weight:850; margin:0 0 15px; }
    .section-heading p { color:var(--muted); margin:0; font-size:1.04rem; }
    .eyebrow {
      display:inline-flex; align-items:center; gap:8px; color:var(--blue);
      font-size:.76rem; font-weight:800; letter-spacing:.13em; margin-bottom:14px;
    }
    .eyebrow::before { content:""; width:28px; height:3px; border-radius:5px; background:var(--cyan); }
    .lead-copy { color:var(--muted); font-size:1.06rem; }
    .btn { border-radius:12px; padding:12px 21px; font-weight:750; transition:.25s ease; }
    .btn-primary { color:#fff; background:var(--blue); border-color:var(--blue); box-shadow:0 10px 22px rgba(50,103,233,.22); }
    .btn-primary:hover,.btn-primary:focus { color:#fff; background:var(--blue-dark); border-color:var(--blue-dark); transform:translateY(-2px); box-shadow:0 14px 28px rgba(50,103,233,.28); }
    .btn-light-outline { color:var(--ink); border:1px solid var(--line); background:#fff; }
    .btn-light-outline:hover { color:var(--blue); border-color:#b9ccf8; background:#f7faff; }
    .btn-white { color:var(--blue); background:#fff; border-color:#fff; }
    .btn-white:hover { color:var(--blue-dark); transform:translateY(-2px); }
    .site-header { position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.9); backdrop-filter:blur(16px); border-bottom:1px solid rgba(229,235,244,.8); }
    .navbar { min-height:76px; }
    .brand { display:inline-flex; align-items:center; gap:11px; font-size:1.22rem; font-weight:900; letter-spacing:-.04em; }
    .brand-mark { display:grid; place-items:center; width:38px; height:38px; color:white; border-radius:12px; background:linear-gradient(145deg,#4b87ff,#2855d8); box-shadow:0 8px 18px rgba(50,103,233,.25); }
    .navbar-nav { gap:5px; }
    .nav-link { color:#64738a!important; font-weight:650; font-size:.94rem; padding:10px 14px!important; border-radius:10px; transition:.2s ease; }
    .nav-link:hover,.nav-link.active { color:var(--blue)!important; background:#eef4ff; }
    .nav-download { margin-left:14px; }
    .hero-inner { padding:80px 0 86px; }
    .page-hero { background:linear-gradient(135deg,#f4f8ff 0%,#fff 58%,#edf7ff 100%); overflow:hidden; position:relative; }
    .page-hero::after { content:""; position:absolute; width:420px; height:420px; right:-120px; top:-170px; border-radius:50%; background:rgba(54,184,237,.13); filter:blur(4px); }
    .page-hero .container { position:relative; z-index:1; }
    .hero-title { max-width:780px; font-size:clamp(2.25rem,5vw,4.3rem); line-height:1.14; letter-spacing:-.065em; font-weight:900; margin:0 0 22px; }
    .hero-title span { color:var(--blue); }
    .hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
    .hero-dashboard { position:relative; min-height:330px; padding:20px; border-radius:var(--radius-xl); background:#122b58; box-shadow:0 26px 65px rgba(31,68,139,.22); overflow:hidden; }
    .hero-dashboard::before { content:""; position:absolute; width:240px; height:240px; right:-45px; top:-75px; border-radius:50%; background:rgba(54,184,237,.26); filter:blur(18px); }
    .dashboard-top { display:flex; justify-content:space-between; align-items:center; position:relative; color:#fff; font-size:.86rem; }
    .live-dot { display:inline-flex; align-items:center; gap:8px; color:#bceeff; }
    .live-dot i { font-size:.52rem; color:#52e0a2; }
    .dashboard-main { position:relative; margin-top:30px; padding:22px; border:1px solid rgba(255,255,255,.14); border-radius:18px; background:rgba(255,255,255,.08); }
    .dashboard-main small { color:rgba(255,255,255,.64); }
    .dashboard-main h3 { color:#fff; font-size:2.2rem; margin:5px 0 12px; }
    .progress-line { height:7px; border-radius:8px; background:rgba(255,255,255,.16); overflow:hidden; }
    .progress-line span { display:block; width:84%; height:100%; border-radius:8px; background:linear-gradient(90deg,#56d4ff,#7d9cff); }
    .dashboard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:12px; }
    .dashboard-stat { padding:12px; border-radius:13px; background:rgba(255,255,255,.1); color:#fff; }
    .dashboard-stat strong { display:block; font-size:1.1rem; }
    .dashboard-stat span { color:rgba(255,255,255,.58); font-size:.74rem; }
    .metric-card,.feature-card,.node-card,.article-card,.security-card,.quote-card { height:100%; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:0 8px 28px rgba(36,64,110,.055); transition:.25s ease; }
    .metric-card:hover,.feature-card:hover,.node-card:hover,.article-card:hover,.security-card:hover,.quote-card:hover { transform:translateY(-5px); border-color:#c8d8f7; box-shadow:var(--shadow-hover); }
    .metric-card { padding:24px; }
    .metric-value { color:var(--blue); font-size:2.15rem; font-weight:900; line-height:1; }
    .metric-label { margin-top:10px; font-weight:750; }
    .metric-note { color:var(--muted); font-size:.86rem; margin-top:4px; }
    .service-row { display:grid; grid-template-columns:1.05fr 1.95fr; gap:32px; align-items:stretch; }
    .service-intro { padding:35px; border-radius:var(--radius-xl); background:#122b58; color:#fff; }
    .service-intro p { color:rgba(255,255,255,.72); }
    .service-intro .icon-box { color:#b9edff; background:rgba(255,255,255,.11); }
    .icon-box { display:grid; place-items:center; width:48px; height:48px; border-radius:15px; color:var(--blue); background:#edf4ff; font-size:1.15rem; margin-bottom:20px; }
    .service-list { display:grid; grid-template-columns:repeat(2,1fr); gap:15px; }
    .feature-card { padding:25px; }
    .feature-card h3,.node-card h3,.security-card h3 { font-size:1.1rem; font-weight:800; margin:0 0 8px; }
    .feature-card p,.node-card p,.security-card p { color:var(--muted); font-size:.92rem; margin:0; }
    .node-layout { display:grid; grid-template-columns:1.15fr .85fr; gap:28px; }
    .node-map { min-height:350px; padding:28px; border-radius:var(--radius-xl); background:linear-gradient(145deg,#e9f3ff,#f8fbff); border:1px solid #d8e6fb; position:relative; overflow:hidden; }
    .node-map::before { content:""; position:absolute; inset:40px 70px; border:1px dashed #9bc3ee; border-radius:48% 52% 40% 60%; transform:rotate(-12deg); }
    .node-point { position:absolute; display:flex; align-items:center; gap:8px; color:var(--ink); font-size:.82rem; font-weight:750; }
    .node-point i { width:12px; height:12px; border-radius:50%; background:var(--blue); box-shadow:0 0 0 6px rgba(50,103,233,.12); }
    .node-point.one { left:18%; top:31%; }.node-point.two { right:17%; top:23%; }.node-point.three { left:42%; bottom:20%; }.node-point.four { right:10%; bottom:32%; }
    .node-info { display:grid; gap:14px; }
    .node-card { padding:22px; display:flex; gap:16px; }
    .node-card .icon-box { flex:0 0 44px; width:44px; height:44px; margin:0; border-radius:13px; }
    .compare-table { overflow:hidden; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; box-shadow:var(--shadow-soft); }
    .compare-row { display:grid; grid-template-columns:1.2fr 1fr 1fr 1fr; border-bottom:1px solid var(--line); }
    .compare-row:last-child { border-bottom:0; }
    .compare-row > div { padding:18px 20px; color:var(--muted); font-size:.93rem; }
    .compare-row > div:first-child { color:var(--ink); font-weight:750; }
    .compare-head { background:#f0f5ff; }
    .compare-head > div { color:var(--blue)!important; font-weight:800!important; }
    .timeline { position:relative; display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
    .timeline::before { content:""; position:absolute; left:8%; right:8%; top:23px; height:2px; background:#d8e5fa; }
    .timeline-item { position:relative; z-index:1; }
    .timeline-dot { width:46px; height:46px; display:grid; place-items:center; margin-bottom:17px; border-radius:50%; color:#fff; background:var(--blue); border:6px solid #eaf2ff; font-weight:800; }
    .timeline-item h3 { font-size:1.05rem; margin:0 0 7px; font-weight:800; }
    .timeline-item p { color:var(--muted); font-size:.9rem; margin:0; padding-right:10px; }
    .article-grid { display:grid; grid-template-columns:1.25fr .9fr .9fr; gap:18px; }
    .article-card { padding:24px; }
    .article-card.featured { color:#fff; background:linear-gradient(145deg,#2552c9,#367de9); border-color:transparent; }
    .article-card.featured p,.article-card.featured .article-meta { color:rgba(255,255,255,.74); }
    .article-meta { display:flex; justify-content:space-between; gap:10px; color:var(--muted); font-size:.78rem; margin-bottom:35px; }
    .article-card h3 { font-size:1.14rem; line-height:1.45; margin:0 0 10px; font-weight:800; }
    .article-card p { color:var(--muted); font-size:.9rem; margin:0; }
    .security-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
    .security-card { padding:25px; }
    .security-card .icon-box { margin-bottom:18px; }
    .faq-wrap { max-width:900px; margin:0 auto; }
    .accordion-item { border:1px solid var(--line)!important; border-radius:14px!important; overflow:hidden; margin-bottom:12px; box-shadow:0 5px 18px rgba(36,64,110,.035); }
    .accordion-button { color:var(--ink); font-weight:750; background:#fff; padding:20px 22px; box-shadow:none!important; }
    .accordion-button:not(.collapsed) { color:var(--blue); background:#f7faff; }
    .accordion-body { color:var(--muted); padding:0 22px 21px; background:#f7faff; }
    .cta-band { padding:48px 55px; color:#fff; border-radius:var(--radius-xl); background:linear-gradient(115deg,#193b83,#3267e9); box-shadow:0 22px 50px rgba(37,83,178,.22); }
    .cta-band h2 { font-size:clamp(1.7rem,3vw,2.45rem); letter-spacing:-.04em; margin:0 0 10px; font-weight:850; }
    .cta-band p { color:rgba(255,255,255,.76); margin:0; max-width:650px; }
    .site-footer { padding:70px 0 22px; background:#0e203e; color:#fff; }
    .footer-brand { color:#fff; }
    .footer-copy { max-width:350px; color:rgba(255,255,255,.62); margin:20px 0 0; }
    .social-links { display:flex; gap:10px; }
    .social-links a { display:grid; place-items:center; width:36px; height:36px; border-radius:10px; color:#b9d4ff; background:rgba(255,255,255,.09); transition:.2s ease; }
    .social-links a:hover { color:#fff; background:var(--blue); transform:translateY(-2px); }
    .footer-title { color:#fff; font-weight:800; margin-bottom:17px; }
    .footer-links { list-style:none; padding:0; margin:0; }
    .footer-links li { color:rgba(255,255,255,.58); margin-bottom:10px; font-size:.9rem; }
    .footer-links a:hover { color:#fff; }
    .footer-bottom { display:flex; justify-content:space-between; gap:20px; margin-top:48px; padding-top:20px; border-top:1px solid rgba(255,255,255,.12); color:rgba(255,255,255,.45); font-size:.82rem; }
    :focus-visible { outline:3px solid rgba(50,103,233,.35); outline-offset:3px; }
    @media (max-width:991px) {
      .navbar-nav { padding:16px 0; }
      .nav-download { margin:8px 0 0; }
      .service-row,.node-layout { grid-template-columns:1fr; }
      .article-grid { grid-template-columns:1fr 1fr; }
      .article-card.featured { grid-column:span 2; }
      .section-space { padding:78px 0; }
    }
    @media (max-width:767px) {
      .hero-inner { padding:60px 0 68px; }
      .hero-title { font-size:2.55rem; }
      .hero-dashboard { margin-top:25px; }
      .dashboard-grid,.service-list,.security-grid { grid-template-columns:1fr; }
      .compare-table { overflow-x:auto; }
      .compare-row { min-width:650px; }
      .timeline { grid-template-columns:1fr 1fr; gap:28px 15px; }
      .timeline::before { display:none; }
      .article-grid { grid-template-columns:1fr; }
      .article-card.featured { grid-column:auto; }
      .cta-band { padding:34px 25px; }
      .footer-bottom { flex-direction:column; gap:7px; }
    }
    @media (max-width:520px) {
      .section-space { padding:64px 0; }
      .hero-title { font-size:2.1rem; }
      .hero-actions .btn { width:100%; }
      .dashboard-main h3 { font-size:1.8rem; }
      .node-map { min-height:285px; padding:20px; }
      .node-map::before { inset:44px 35px; }
      .node-point { font-size:.72rem; }
    }

/* roulang page: category3 */
:root {
            --ink: #15243b;
            --muted: #66758d;
            --blue: #3267e9;
            --blue-dark: #214cc7;
            --cyan: #36b8ed;
            --pale: #f4f8ff;
            --line: #e5ebf4;
            --white: #ffffff;
            --success: #18a878;
            --warning: #e99b32;
            --radius-xl: 28px;
            --radius-lg: 20px;
            --radius-md: 14px;
            --shadow-soft: 0 18px 50px rgba(39, 74, 137, .10);
            --shadow-hover: 0 24px 60px rgba(42, 91, 190, .18);
        }

        html {
            scroll-behavior: smooth;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            color: var(--ink);
            background: var(--white);
            font-family: "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            max-width: 100%;
        }

        button,
        input,
        select,
        textarea {
            font: inherit;
        }

        .container {
            max-width: 1180px;
        }

        .section-space {
            padding: 104px 0;
        }

        .section-soft {
            background: var(--pale);
        }

        .section-heading {
            max-width: 710px;
            margin-bottom: 48px;
        }

        .section-heading.centered {
            margin-left: auto;
            margin-right: auto;
            text-align: center;
        }

        .section-heading h2 {
            margin: 0 0 15px;
            font-size: clamp(1.8rem, 3.2vw, 2.65rem);
            line-height: 1.25;
            letter-spacing: -.045em;
            font-weight: 850;
        }

        .section-heading p {
            margin: 0;
            color: var(--muted);
            font-size: 1.04rem;
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--blue);
            font-size: .78rem;
            font-weight: 800;
            letter-spacing: .12em;
            margin-bottom: 14px;
        }

        .eyebrow::before {
            content: "";
            width: 28px;
            height: 3px;
            border-radius: 5px;
            background: var(--cyan);
        }

        .lead-copy {
            color: var(--muted);
            font-size: 1.06rem;
        }

        .btn {
            border-radius: 12px;
            padding: 13px 22px;
            font-weight: 700;
            transition: .25s ease;
        }

        .btn-primary {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            box-shadow: 0 10px 22px rgba(50, 103, 233, .22);
        }

        .btn-primary:hover,
        .btn-primary:focus {
            color: #fff;
            background: var(--blue-dark);
            border-color: var(--blue-dark);
            transform: translateY(-2px);
            box-shadow: 0 14px 28px rgba(50, 103, 233, .28);
        }

        .btn-light-outline {
            color: var(--ink);
            border: 1px solid var(--line);
            background: #fff;
        }

        .btn-light-outline:hover {
            color: var(--blue);
            border-color: #b9ccf8;
            background: #f7faff;
        }

        .btn-white {
            color: var(--blue);
            background: #fff;
            border-color: #fff;
        }

        .btn-white:hover {
            color: var(--blue-dark);
            transform: translateY(-2px);
        }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(255,255,255,.9);
            backdrop-filter: blur(16px);
            border-bottom: 1px solid rgba(229,235,244,.85);
        }

        .navbar {
            min-height: 76px;
        }

        .brand {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            font-size: 1.22rem;
            font-weight: 900;
            letter-spacing: -.04em;
        }

        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            color: white;
            border-radius: 12px;
            background: linear-gradient(145deg, #4b87ff, #2855d8);
            box-shadow: 0 8px 18px rgba(50,103,233,.25);
        }

        .navbar-nav {
            gap: 5px;
        }

        .nav-link {
            color: #64738a !important;
            font-weight: 650;
            font-size: .94rem;
            padding: 10px 14px !important;
            border-radius: 10px;
            transition: .2s ease;
        }

        .nav-link:hover,
        .nav-link.active {
            color: var(--blue) !important;
            background: #eef4ff;
        }

        .nav-download {
            margin-left: 14px;
        }

        .category-hero {
            position: relative;
            overflow: hidden;
            padding: 92px 0 88px;
            background:
                radial-gradient(circle at 86% 18%, rgba(54,184,237,.18), transparent 25%),
                radial-gradient(circle at 10% 100%, rgba(50,103,233,.08), transparent 34%),
                #f7faff;
            border-bottom: 1px solid var(--line);
        }

        .category-hero::before,
        .category-hero::after {
            content: "";
            position: absolute;
            border: 1px solid rgba(50,103,233,.10);
            border-radius: 50%;
            pointer-events: none;
        }

        .category-hero::before {
            width: 520px;
            height: 520px;
            right: -170px;
            top: -250px;
        }

        .category-hero::after {
            width: 320px;
            height: 320px;
            left: -180px;
            bottom: -210px;
        }

        .category-hero .container {
            position: relative;
            z-index: 1;
        }

        .hero-copy {
            max-width: 730px;
        }

        .hero-copy h1 {
            max-width: 700px;
            margin: 0 0 20px;
            font-size: clamp(2.35rem, 5vw, 4.5rem);
            line-height: 1.13;
            font-weight: 900;
            letter-spacing: -.065em;
        }

        .hero-copy h1 span {
            color: var(--blue);
        }

        .hero-copy p {
            max-width: 690px;
            margin: 0;
            color: var(--muted);
            font-size: 1.13rem;
        }

        .hero-actions {
            display: flex;
            gap: 13px;
            flex-wrap: wrap;
            margin-top: 32px;
        }

        .icon-matrix {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            max-width: 660px;
            margin-top: 44px;
        }

        .matrix-item {
            min-height: 104px;
            padding: 17px;
            background: rgba(255,255,255,.82);
            border: 1px solid rgba(213,224,242,.95);
            border-radius: 17px;
            box-shadow: 0 12px 30px rgba(39,74,137,.07);
            transition: .25s ease;
        }

        .matrix-item:hover {
            transform: translateY(-4px);
            border-color: #bcd0f8;
            box-shadow: var(--shadow-hover);
        }

        .matrix-item i {
            display: inline-grid;
            place-items: center;
            width: 34px;
            height: 34px;
            margin-bottom: 9px;
            color: var(--blue);
            background: #eaf1ff;
            border-radius: 10px;
        }

        .matrix-item strong {
            display: block;
            font-size: .9rem;
        }

        .matrix-item small {
            color: var(--muted);
            font-size: .76rem;
        }

        .status-strip {
            margin-top: -30px;
            position: relative;
            z-index: 3;
        }

        .status-board {
            display: grid;
            grid-template-columns: 1.1fr repeat(3, 1fr);
            gap: 1px;
            overflow: hidden;
            background: var(--line);
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-soft);
        }

        .status-cell {
            min-height: 108px;
            padding: 22px 24px;
            background: #fff;
        }

        .status-cell:first-child {
            background: linear-gradient(145deg, #edf4ff, #fff);
        }

        .status-label {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 8px;
            color: var(--muted);
            font-size: .85rem;
        }

        .status-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--success);
            box-shadow: 0 0 0 5px rgba(24,168,120,.12);
        }

        .status-value {
            font-size: 1.45rem;
            line-height: 1.2;
            font-weight: 850;
        }

        .status-value small {
            color: var(--muted);
            font-size: .78rem;
            font-weight: 500;
        }

        .service-layout {
            display: grid;
            grid-template-columns: .82fr 1.18fr;
            gap: 62px;
            align-items: start;
        }

        .service-intro {
            position: sticky;
            top: 110px;
        }

        .service-intro h2 {
            margin: 0 0 16px;
            font-size: clamp(1.9rem, 3vw, 2.7rem);
            line-height: 1.25;
            letter-spacing: -.045em;
        }

        .service-intro p {
            color: var(--muted);
        }

        .service-note {
            display: flex;
            gap: 13px;
            margin-top: 28px;
            padding: 17px;
            border-radius: var(--radius-md);
            background: #f0f6ff;
            border: 1px solid #dbe8ff;
        }

        .service-note i {
            color: var(--blue);
            margin-top: 4px;
        }

        .service-note strong {
            display: block;
            margin-bottom: 3px;
            font-size: .93rem;
        }

        .service-note span {
            color: var(--muted);
            font-size: .86rem;
        }

        .feature-list {
            display: grid;
            gap: 16px;
        }

        .feature-row {
            display: grid;
            grid-template-columns: 54px 1fr auto;
            gap: 18px;
            align-items: center;
            padding: 22px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 28px rgba(36,64,110,.055);
            transition: .25s ease;
        }

        .feature-row:hover {
            transform: translateX(5px);
            border-color: #c8d8f7;
            box-shadow: var(--shadow-hover);
        }

        .feature-icon {
            display: grid;
            place-items: center;
            width: 54px;
            height: 54px;
            color: var(--blue);
            background: #edf3ff;
            border-radius: 16px;
            font-size: 1.2rem;
        }

        .feature-row h3 {
            margin: 0 0 4px;
            font-size: 1.04rem;
        }

        .feature-row p {
            margin: 0;
            color: var(--muted);
            font-size: .88rem;
        }

        .feature-arrow {
            color: #a1b1c8;
        }

        .scene-panel {
            padding: 34px;
            color: #fff;
            border-radius: var(--radius-xl);
            background:
                linear-gradient(135deg, rgba(18,46,104,.96), rgba(38,98,204,.95)),
                #214cc7;
            box-shadow: 0 25px 60px rgba(33,76,199,.21);
        }

        .scene-panel .eyebrow {
            color: #bce9ff;
        }

        .scene-panel h2 {
            max-width: 620px;
            margin: 0 0 14px;
            font-size: clamp(1.8rem, 3vw, 2.5rem);
            line-height: 1.25;
            letter-spacing: -.045em;
        }

        .scene-panel > p {
            max-width: 650px;
            margin: 0;
            color: rgba(255,255,255,.74);
        }

        .scene-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
            margin-top: 30px;
        }

        .scene-card {
            min-height: 150px;
            padding: 19px;
            border: 1px solid rgba(255,255,255,.15);
            border-radius: 17px;
            background: rgba(255,255,255,.09);
            transition: .25s ease;
        }

        .scene-card:hover {
            background: rgba(255,255,255,.15);
            transform: translateY(-4px);
        }

        .scene-card i {
            margin-bottom: 24px;
            color: #a9e9ff;
            font-size: 1.2rem;
        }

        .scene-card strong {
            display: block;
            margin-bottom: 5px;
            font-size: .96rem;
        }

        .scene-card span {
            display: block;
            color: rgba(255,255,255,.68);
            font-size: .8rem;
            line-height: 1.55;
        }

        .compare-layout {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 24px;
            align-items: stretch;
        }

        .compare-card,
        .timeline-card,
        .article-card,
        .security-card {
            height: 100%;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            box-shadow: 0 8px 28px rgba(36,64,110,.055);
        }

        .compare-card {
            padding: 30px;
        }

        .compare-card h3,
        .timeline-card h3,
        .security-card h3 {
            margin: 0 0 20px;
            font-size: 1.2rem;
        }

        .compare-item {
            display: grid;
            grid-template-columns: 130px 1fr;
            gap: 18px;
            align-items: center;
            padding: 17px 0;
            border-bottom: 1px solid var(--line);
        }

        .compare-item:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }

        .compare-item:first-of-type {
            padding-top: 0;
        }

        .compare-label {
            color: var(--muted);
            font-size: .88rem;
        }

        .bar-line {
            height: 9px;
            overflow: hidden;
            border-radius: 20px;
            background: #edf1f7;
        }

        .bar-line span {
            display: block;
            height: 100%;
            border-radius: inherit;
            background: linear-gradient(90deg, var(--blue), var(--cyan));
        }

        .compare-score {
            display: flex;
            justify-content: space-between;
            margin-top: 7px;
            color: var(--muted);
            font-size: .78rem;
        }

        .timeline-card {
            padding: 30px;
            background: linear-gradient(160deg, #f0f6ff, #fff);
        }

        .timeline {
            position: relative;
            display: grid;
            gap: 21px;
        }

        .timeline::before {
            content: "";
            position: absolute;
            left: 8px;
            top: 8px;
            bottom: 8px;
            width: 1px;
            background: #c9d8f2;
        }

        .timeline-item {
            position: relative;
            display: grid;
            grid-template-columns: 17px 1fr;
            gap: 15px;
        }

        .timeline-dot {
            position: relative;
            z-index: 1;
            width: 17px;
            height: 17px;
            margin-top: 4px;
            border: 4px solid #e3edff;
            border-radius: 50%;
            background: var(--blue);
        }

        .timeline-item strong {
            display: block;
            margin-bottom: 3px;
            font-size: .94rem;
        }

        .timeline-item span {
            color: var(--muted);
            font-size: .83rem;
        }

        .security-grid {
            display: grid;
            grid-template-columns: 1.05fr .95fr;
            gap: 24px;
            align-items: stretch;
        }

        .security-card {
            padding: 30px;
        }

        .security-card.highlight {
            color: #fff;
            border: 0;
            background: linear-gradient(145deg, #172c56, #2455b9);
        }

        .security-card.highlight h3 {
            color: #fff;
        }

        .security-card.highlight p {
            color: rgba(255,255,255,.72);
        }

        .security-points {
            display: grid;
            gap: 14px;
            margin: 23px 0 0;
            padding: 0;
            list-style: none;
        }

        .security-points li {
            display: flex;
            gap: 11px;
            align-items: flex-start;
            color: var(--muted);
            font-size: .9rem;
        }

        .security-card.highlight .security-points li {
            color: rgba(255,255,255,.78);
        }

        .security-points i {
            flex: 0 0 auto;
            margin-top: 5px;
            color: var(--success);
        }

        .security-card.highlight .security-points i {
            color: #9fe9cf;
        }

        .article-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
        }

        .article-card {
            overflow: hidden;
            transition: .25s ease;
        }

        .article-card:hover {
            transform: translateY(-5px);
            border-color: #c8d8f7;
            box-shadow: var(--shadow-hover);
        }

        .article-cover {
            min-height: 136px;
            padding: 22px;
            color: #fff;
            background: linear-gradient(135deg, #3169e8, #54c3e9);
        }

        .article-cover.alt {
            background: linear-gradient(135deg, #152b5d, #426bd3);
        }

        .article-cover.green {
            background: linear-gradient(135deg, #168f83, #4bc1ba);
        }

        .article-cover i {
            font-size: 1.55rem;
        }

        .article-body {
            padding: 22px;
        }

        .article-meta {
            display: flex;
            justify-content: space-between;
            gap: 12px;
            margin-bottom: 9px;
            color: var(--blue);
            font-size: .76rem;
            font-weight: 800;
        }

        .article-body h3 {
            margin: 0 0 8px;
            font-size: 1.08rem;
            line-height: 1.45;
        }

        .article-body p {
            margin: 0;
            color: var(--muted);
            font-size: .87rem;
        }

        .faq-list {
            max-width: 860px;
            margin: 0 auto;
        }

        .accordion-item {
            overflow: hidden;
            margin-bottom: 12px;
            border: 1px solid var(--line) !important;
            border-radius: var(--radius-md) !important;
            box-shadow: 0 6px 20px rgba(36,64,110,.04);
        }

        .accordion-button {
            padding: 20px 22px;
            color: var(--ink);
            background: #fff;
            font-weight: 750;
            box-shadow: none !important;
        }

        .accordion-button:not(.collapsed) {
            color: var(--blue);
            background: #f4f8ff;
        }

        .accordion-button::after {
            background-size: 15px;
        }

        .accordion-body {
            padding: 0 22px 21px;
            color: var(--muted);
            font-size: .92rem;
            background: #f4f8ff;
        }

        .final-cta {
            padding: 74px 0;
            color: #fff;
            background:
                radial-gradient(circle at 85% 10%, rgba(88,205,255,.25), transparent 28%),
                linear-gradient(135deg, #172d5d, #2859c6);
        }

        .final-cta .cta-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 30px;
        }

        .final-cta h2 {
            max-width: 650px;
            margin: 0 0 12px;
            font-size: clamp(1.8rem, 3vw, 2.65rem);
            line-height: 1.25;
            letter-spacing: -.045em;
        }

        .final-cta p {
            max-width: 620px;
            margin: 0;
            color: rgba(255,255,255,.74);
        }

        .site-footer {
            padding: 70px 0 22px;
            color: #dce7fb;
            background: #0f1e3c;
        }

        .footer-brand {
            color: #fff;
        }

        .footer-copy {
            max-width: 360px;
            margin: 20px 0 0;
            color: #91a5c7;
            font-size: .92rem;
        }

        .social-links {
            display: flex;
            gap: 10px;
        }

        .social-links a {
            display: grid;
            place-items: center;
            width: 37px;
            height: 37px;
            color: #bdd2f4;
            border: 1px solid rgba(185,210,244,.22);
            border-radius: 11px;
            transition: .2s ease;
        }

        .social-links a:hover {
            color: #fff;
            background: var(--blue);
            border-color: var(--blue);
            transform: translateY(-2px);
        }

        .footer-title {
            margin-bottom: 15px;
            color: #fff;
            font-weight: 800;
        }

        .footer-links {
            display: grid;
            gap: 10px;
            margin: 0;
            padding: 0;
            color: #91a5c7;
            list-style: none;
            font-size: .88rem;
        }

        .footer-links a {
            transition: .2s ease;
        }

        .footer-links a:hover {
            color: #fff;
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            margin-top: 50px;
            padding-top: 20px;
            color: #7186aa;
            border-top: 1px solid rgba(185,210,244,.13);
            font-size: .78rem;
        }

        :focus-visible {
            outline: 3px solid rgba(54,184,237,.55);
            outline-offset: 3px;
        }

        @media (max-width: 991.98px) {
            .navbar-nav {
                padding-top: 15px;
                padding-bottom: 12px;
            }

            .nav-download {
                margin: 10px 0 0;
            }

            .service-layout,
            .compare-layout,
            .security-grid {
                grid-template-columns: 1fr;
                gap: 34px;
            }

            .service-intro {
                position: static;
            }

            .scene-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .article-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .status-board {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 767.98px) {
            .section-space {
                padding: 72px 0;
            }

            .category-hero {
                padding: 70px 0 76px;
            }

            .hero-copy h1 {
                font-size: clamp(2.25rem, 12vw, 3.55rem);
            }

            .icon-matrix {
                grid-template-columns: repeat(2, 1fr);
            }

            .status-strip {
                margin-top: -20px;
            }

            .status-board {
                grid-template-columns: 1fr 1fr;
            }

            .status-cell {
                padding: 17px;
            }

            .feature-row {
                grid-template-columns: 46px 1fr;
                gap: 13px;
                padding: 18px;
            }

            .feature-icon {
                width: 46px;
                height: 46px;
            }

            .feature-arrow {
                display: none;
            }

            .scene-panel {
                padding: 25px 20px;
            }

            .scene-grid {
                gap: 10px;
            }

            .scene-card {
                min-height: 132px;
                padding: 15px;
            }

            .compare-card,
            .timeline-card,
            .security-card {
                padding: 23px;
            }

            .compare-item {
                grid-template-columns: 105px 1fr;
                gap: 12px;
            }

            .article-grid {
                grid-template-columns: 1fr;
            }

            .final-cta .cta-inner {
                display: block;
            }

            .final-cta .btn {
                margin-top: 25px;
            }

            .footer-bottom {
                display: block;
            }

            .footer-bottom span {
                display: block;
                margin-top: 7px;
            }
        }

        @media (max-width: 520px) {
            .icon-matrix {
                gap: 8px;
            }

            .matrix-item {
                min-height: 94px;
                padding: 13px;
            }

            .matrix-item small {
                font-size: .7rem;
            }

            .status-board {
                grid-template-columns: 1fr;
            }

            .status-cell {
                min-height: auto;
            }

            .hero-actions .btn {
                width: 100%;
                text-align: center;
            }

            .scene-grid {
                grid-template-columns: 1fr 1fr;
            }

            .accordion-button {
                padding: 17px;
                font-size: .92rem;
            }

            .accordion-body {
                padding: 0 17px 17px;
            }
        }

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