/* roulang page: index */
:root {
            --bg: #07111f;
            --bg-soft: #0b192b;
            --panel: rgba(17, 33, 55, .78);
            --panel-solid: #10223a;
            --text: #f4f8ff;
            --muted: #9eafc5;
            --line: rgba(165, 193, 229, .15);
            --primary: #4c7dff;
            --primary-dark: #315fe5;
            --cyan: #43d4e8;
            --violet: #8d6cff;
            --success: #4ed49b;
            --radius-lg: 28px;
            --radius-md: 18px;
            --shadow: 0 24px 70px rgba(0, 0, 0, .28);
            --transition: .3s ease;
        }

        * { box-sizing: border-box; }
        html { scroll-behavior: smooth; }
        body {
            margin: 0;
            color: var(--text);
            background:
                radial-gradient(circle at 15% 0%, rgba(76,125,255,.16), transparent 28rem),
                radial-gradient(circle at 88% 18%, rgba(67,212,232,.10), transparent 24rem),
                var(--bg);
            font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
            line-height: 1.75;
            overflow-x: hidden;
        }
        a { color: inherit; text-decoration: none; transition: var(--transition); }
        img { max-width: 100%; display: block; }
        button, .btn { transition: var(--transition); }
        p { color: var(--muted); margin-bottom: 0; }
        .container { max-width: 1180px; }
        .section { position: relative; padding: 110px 0; }
        .section-soft {
            background: linear-gradient(180deg, rgba(16,34,58,.42), rgba(9,22,38,.08));
            border-top: 1px solid rgba(165,193,229,.05);
            border-bottom: 1px solid rgba(165,193,229,.05);
        }
        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #a9c4ff;
            font-size: .78rem;
            font-weight: 700;
            letter-spacing: .13em;
            text-transform: uppercase;
            margin-bottom: 16px;
        }
        .eyebrow::before {
            content: "";
            width: 26px;
            height: 2px;
            border-radius: 2px;
            background: linear-gradient(90deg, var(--cyan), var(--primary));
        }
        .section-title {
            max-width: 720px;
            margin-bottom: 48px;
        }
        .section-title h2 {
            font-size: clamp(2rem, 4vw, 3.25rem);
            line-height: 1.2;
            letter-spacing: -.04em;
            margin: 0 0 18px;
            font-weight: 800;
        }
        .section-title p { max-width: 700px; font-size: 1.02rem; }

        .site-header {
            position: sticky;
            top: 0;
            z-index: 1000;
            background: rgba(7,17,31,.78);
            backdrop-filter: blur(18px);
            border-bottom: 1px solid rgba(165,193,229,.10);
        }
        .navbar { padding: 17px 0; }
        .navbar-brand {
            display: flex;
            align-items: center;
            gap: 11px;
            color: var(--text) !important;
            font-size: 1.15rem;
            font-weight: 800;
            letter-spacing: -.03em;
        }
        .brand-mark {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 13px;
            color: #fff;
            background: linear-gradient(135deg, var(--primary), var(--cyan));
            box-shadow: 0 8px 24px rgba(76,125,255,.35);
        }
        .navbar-nav { gap: 6px; }
        .nav-link {
            color: #aebdd0 !important;
            font-size: .92rem;
            padding: 9px 15px !important;
            border-radius: 10px;
        }
        .nav-link:hover, .nav-link.active {
            color: #fff !important;
            background: rgba(76,125,255,.12);
        }
        .navbar-toggler {
            border: 1px solid var(--line);
            padding: 8px 11px;
            border-radius: 10px;
        }
        .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(76,125,255,.22); }
        .navbar-toggler-icon {
            filter: invert(1);
            width: 1.25em;
            height: 1.25em;
        }

        .btn-main, .btn-ghost {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            gap: 9px;
            border-radius: 12px;
            padding: 13px 22px;
            font-weight: 700;
            font-size: .94rem;
            border: 1px solid transparent;
        }
        .btn-main {
            color: #fff;
            background: linear-gradient(135deg, var(--primary), #6b61f8);
            box-shadow: 0 12px 28px rgba(76,125,255,.25);
        }
        .btn-main:hover {
            color: #fff;
            transform: translateY(-2px);
            box-shadow: 0 17px 34px rgba(76,125,255,.38);
        }
        .btn-ghost {
            color: #d9e5f7;
            border-color: var(--line);
            background: rgba(255,255,255,.035);
        }
        .btn-ghost:hover {
            color: #fff;
            border-color: rgba(117,161,255,.6);
            background: rgba(76,125,255,.1);
        }
        .btn-nav { padding: 10px 17px; font-size: .87rem; }

        .hero {
            padding: 88px 0 70px;
            min-height: 700px;
            display: flex;
            align-items: center;
        }
        .hero h1 {
            max-width: 700px;
            font-size: clamp(2.8rem, 6vw, 5.6rem);
            line-height: 1.08;
            letter-spacing: -.065em;
            font-weight: 850;
            margin: 0 0 25px;
        }
        .hero h1 span {
            background: linear-gradient(100deg, #fff 15%, #8cb1ff 52%, #53d8e9 92%);
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        .hero-copy {
            max-width: 650px;
            font-size: 1.08rem;
            line-height: 1.9;
        }
        .hero-actions { display: flex; gap: 13px; flex-wrap: wrap; margin-top: 34px; }
        .hero-proof {
            display: flex;
            gap: 28px;
            flex-wrap: wrap;
            margin-top: 38px;
        }
        .proof-item strong { display: block; font-size: 1.25rem; }
        .proof-item small { color: var(--muted); font-size: .78rem; }
        .hero-stage {
            position: relative;
            min-height: 470px;
            display: grid;
            place-items: center;
        }
        .hero-stage::before {
            content: "";
            position: absolute;
            width: 390px;
            height: 390px;
            border-radius: 50%;
            background: rgba(76,125,255,.2);
            filter: blur(70px);
        }
        .network-visual {
            position: relative;
            width: min(100%, 490px);
            padding: 20px;
            border: 1px solid rgba(151,190,255,.24);
            border-radius: 30px;
            background: linear-gradient(145deg, rgba(22,48,82,.95), rgba(10,24,43,.94));
            box-shadow: var(--shadow);
            transform: rotate(2deg);
        }
        .network-visual img {
            height: 285px;
            width: 100%;
            object-fit: cover;
            border-radius: 20px;
            opacity: .72;
            filter: saturate(.9) contrast(1.05);
        }
        .visual-overlay {
            position: absolute;
            inset: 20px;
            border-radius: 20px;
            background: linear-gradient(180deg, transparent 34%, rgba(4,12,24,.94));
        }
        .visual-caption {
            position: absolute;
            left: 42px;
            right: 42px;
            bottom: 42px;
        }
        .visual-caption h3 { font-size: 1.45rem; margin: 0 0 5px; }
        .visual-caption p { font-size: .86rem; }
        .live-chip {
            position: absolute;
            top: 38px;
            right: 38px;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 7px 11px;
            color: #b8f9dd;
            border: 1px solid rgba(78,212,155,.35);
            border-radius: 99px;
            background: rgba(8,35,32,.72);
            font-size: .76rem;
            font-weight: 700;
        }
        .live-chip i { font-size: .48rem; color: var(--success); }

        .signal-bar {
            padding: 17px 0;
            border-top: 1px solid var(--line);
            border-bottom: 1px solid var(--line);
            background: rgba(10,27,47,.56);
        }
        .signal-list {
            display: flex;
            gap: 26px;
            justify-content: space-between;
            flex-wrap: wrap;
            color: #b9c9de;
            font-size: .84rem;
        }
        .signal-list span { display: inline-flex; align-items: center; gap: 9px; }
        .signal-list i { color: var(--cyan); }

        .feature-card, .node-card, .quote-card, .article-card, .security-card, .plan-card {
            height: 100%;
            border: 1px solid var(--line);
            border-radius: var(--radius-md);
            background: linear-gradient(145deg, rgba(21,43,72,.76), rgba(10,24,42,.72));
            box-shadow: 0 12px 35px rgba(0,0,0,.12);
            transition: var(--transition);
        }
        .feature-card:hover, .node-card:hover, .article-card:hover, .plan-card:hover {
            transform: translateY(-7px);
            border-color: rgba(105,157,255,.5);
            box-shadow: 0 20px 45px rgba(0,0,0,.24);
        }
        .feature-card { padding: 28px; }
        .icon-box {
            display: grid;
            place-items: center;
            width: 48px;
            height: 48px;
            margin-bottom: 22px;
            color: #c6d6ff;
            border: 1px solid rgba(118,163,255,.3);
            border-radius: 15px;
            background: linear-gradient(135deg, rgba(76,125,255,.27), rgba(67,212,232,.12));
            font-size: 1.15rem;
        }
        .feature-card h3, .node-card h3, .security-card h3, .article-card h3, .plan-card h3 {
            font-size: 1.15rem;
            margin-bottom: 12px;
        }
        .feature-card p, .node-card p, .security-card p, .article-card p { font-size: .91rem; }

        .panel-wrap {
            padding: 32px;
            border-radius: var(--radius-lg);
            border: 1px solid var(--line);
            background: linear-gradient(135deg, rgba(23,49,84,.8), rgba(11,25,44,.72));
            box-shadow: var(--shadow);
        }
        .metric-row {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1px;
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: 18px;
            background: var(--line);
        }
        .metric {
            padding: 27px 21px;
            background: rgba(13,30,51,.92);
        }
        .metric strong { display: block; font-size: 2rem; letter-spacing: -.06em; }
        .metric span { color: var(--muted); font-size: .82rem; }

        .node-card { padding: 24px; }
        .node-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
        .node-region { display: flex; align-items: center; gap: 11px; font-weight: 700; }
        .region-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 14px var(--success); }
        .latency { color: #8df1c5; font-size: .8rem; }
        .node-bar { height: 7px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.09); }
        .node-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--primary)); }

        .scenario-box {
            position: relative;
            overflow: hidden;
            min-height: 290px;
            padding: 30px;
            border-radius: var(--radius-lg);
            background-size: cover;
            background-position: center;
            border: 1px solid var(--line);
        }
        .scenario-box::before {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(90deg, rgba(5,14,26,.94), rgba(5,14,26,.36));
        }
        .scenario-content { position: relative; z-index: 1; max-width: 380px; }
        .scenario-content h3 { font-size: 1.45rem; margin-bottom: 13px; }
        .scenario-content p { font-size: .9rem; }

        .plan-card { position: relative; padding: 28px; }
        .plan-card.recommended {
            border-color: rgba(107,141,255,.75);
            background: linear-gradient(145deg, rgba(38,59,115,.92), rgba(13,28,53,.9));
        }
        .recommend-badge {
            position: absolute;
            top: 18px;
            right: 18px;
            color: #d5e0ff;
            background: rgba(101,126,255,.22);
            border: 1px solid rgba(125,153,255,.4);
            border-radius: 99px;
            padding: 4px 9px;
            font-size: .7rem;
        }
        .price { margin: 19px 0 22px; }
        .price strong { font-size: 2.7rem; letter-spacing: -.07em; }
        .price small { color: var(--muted); }
        .plan-list { padding: 0; margin: 0 0 25px; list-style: none; }
        .plan-list li { color: #b7c5d8; font-size: .88rem; margin: 10px 0; }
        .plan-list i { color: var(--success); margin-right: 8px; }

        .comparison {
            overflow: hidden;
            border: 1px solid var(--line);
            border-radius: var(--radius-lg);
            background: rgba(13,29,50,.73);
        }
        .comparison-row {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr;
            border-bottom: 1px solid var(--line);
        }
        .comparison-row:last-child { border-bottom: 0; }
        .comparison-row > div { padding: 18px 22px; color: var(--muted); font-size: .9rem; }
        .comparison-row > div:not(:first-child) { text-align: center; border-left: 1px solid var(--line); }
        .comparison-row.header > div { color: #fff; font-weight: 700; background: rgba(76,125,255,.11); }
        .comparison-row i { color: var(--success); }

        .security-card { padding: 25px; }
        .security-card .icon-box { margin-bottom: 18px; }

        .article-card { overflow: hidden; }
        .article-cover {
            height: 155px;
            background-size: cover;
            background-position: center;
        }
        .article-content { padding: 22px; }
        .article-meta { color: #88a8df; font-size: .75rem; margin-bottom: 11px; }

        .quote-card { padding: 28px; }
        .quote-card .stars { color: #ffc96a; letter-spacing: 3px; font-size: .82rem; margin-bottom: 18px; }
        .quote-card blockquote { color: #dbe6f7; font-size: .96rem; line-height: 1.85; margin: 0 0 20px; }
        .quote-author { display: flex; align-items: center; gap: 11px; }
        .avatar {
            display: grid;
            place-items: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            color: #d8e4ff;
            background: linear-gradient(135deg, #466fff, #48bdcf);
            font-weight: 700;
            font-size: .84rem;
        }
        .quote-author small { color: var(--muted); }

        .accordion-item {
            overflow: hidden;
            margin-bottom: 12px;
            border: 1px solid var(--line) !important;
            border-radius: 15px !important;
            background: rgba(16,34,58,.66) !important;
        }
        .accordion-button {
            color: #e8f0fc !important;
            background: transparent !important;
            box-shadow: none !important;
            font-weight: 700;
            padding: 21px 23px;
        }
        .accordion-button::after { filter: invert(1); opacity: .75; }
        .accordion-body { color: var(--muted); padding: 0 23px 22px; font-size: .92rem; }

        .final-cta {
            position: relative;
            overflow: hidden;
            padding: 72px 0;
            background: linear-gradient(110deg, #1d3d93, #163a71 52%, #126071);
        }
        .final-cta::after {
            content: "";
            position: absolute;
            width: 420px;
            height: 420px;
            right: -130px;
            top: -200px;
            border-radius: 50%;
            border: 70px solid rgba(255,255,255,.06);
        }
        .final-cta h2 { font-size: clamp(2rem, 4vw, 3.2rem); line-height: 1.2; margin-bottom: 15px; }
        .final-cta p { color: #c6d8ef; max-width: 640px; }
        .final-cta .btn-main { color: #1b3d7b; background: #fff; box-shadow: none; }
        .final-cta .btn-main:hover { color: #17356d; background: #e9f2ff; }

        footer {
            padding: 57px 0 25px;
            background: #050d18;
            border-top: 1px solid var(--line);
        }
        .footer-brand { margin-bottom: 14px; }
        .footer-desc { max-width: 330px; font-size: .88rem; }
        .footer-title { color: #eaf2ff; font-size: .9rem; margin-bottom: 16px; font-weight: 700; }
        .footer-links { display: flex; flex-direction: column; gap: 9px; }
        .footer-links a { color: var(--muted); font-size: .84rem; }
        .footer-links a:hover { color: #fff; }
        .footer-bottom {
            display: flex;
            justify-content: space-between;
            gap: 20px;
            flex-wrap: wrap;
            padding-top: 28px;
            margin-top: 40px;
            border-top: 1px solid var(--line);
            color: #70839d;
            font-size: .78rem;
        }
        .footer-bottom a:hover { color: #d8e5f7; }

        :focus-visible {
            outline: 3px solid rgba(67,212,232,.65);
            outline-offset: 3px;
        }

        @media (max-width: 991.98px) {
            .navbar-collapse {
                margin-top: 15px;
                padding: 12px;
                border: 1px solid var(--line);
                border-radius: 16px;
                background: rgba(10,25,43,.96);
            }
            .hero { padding-top: 65px; }
            .hero-stage { min-height: 390px; margin-top: 35px; }
            .section { padding: 82px 0; }
            .metric-row { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 767.98px) {
            .section { padding: 68px 0; }
            .hero { min-height: auto; padding: 60px 0 50px; }
            .hero h1 { font-size: clamp(2.5rem, 13vw, 4rem); }
            .hero-copy { font-size: .98rem; }
            .hero-proof { gap: 18px; }
            .hero-stage { min-height: 320px; }
            .network-visual { transform: none; padding: 12px; }
            .network-visual img { height: 220px; }
            .visual-overlay { inset: 12px; }
            .visual-caption { left: 29px; right: 29px; bottom: 27px; }
            .live-chip { top: 24px; right: 24px; }
            .panel-wrap { padding: 20px; }
            .comparison-row > div { padding: 14px 10px; font-size: .76rem; }
            .comparison-row > div:first-child { font-size: .78rem; }
        }
        @media (max-width: 519.98px) {
            .navbar-brand { font-size: 1rem; }
            .brand-mark { width: 34px; height: 34px; }
            .hero-actions .btn { width: 100%; }
            .signal-list { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
            .metric strong { font-size: 1.65rem; }
            .metric { padding: 20px 14px; }
            .comparison { font-size: .7rem; }
            .comparison-row { grid-template-columns: 1.25fr 1fr 1fr; }
            .comparison-row > div { padding: 12px 7px; }
            .final-cta { padding: 58px 0; }
        }

/* roulang page: category2 */
:root {
      --bg:#07111f;
      --bg-soft:#0b192b;
      --panel:rgba(17,33,55,.78);
      --panel-solid:#10223a;
      --text:#f4f8ff;
      --muted:#9eafc5;
      --line:rgba(165,193,229,.15);
      --primary:#4c7dff;
      --primary-dark:#315fe5;
      --cyan:#43d4e8;
      --violet:#8d6cff;
      --success:#4ed49b;
      --warning:#ffc56a;
      --radius-lg:28px;
      --radius-md:18px;
      --shadow:0 24px 70px rgba(0,0,0,.28);
      --transition:.3s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;color:var(--text);
      background:
        radial-gradient(circle at 15% 0%,rgba(76,125,255,.16),transparent 28rem),
        radial-gradient(circle at 88% 18%,rgba(67,212,232,.10),transparent 24rem),
        var(--bg);
      font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
      line-height:1.75;overflow-x:hidden
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img{max-width:100%;display:block}
    button,.btn{transition:var(--transition)}
    .container{max-width:1180px}
    .section{position:relative;padding:108px 0}
    .section-soft{
      background:linear-gradient(180deg,rgba(16,34,58,.45),rgba(9,22,38,.12));
      border-top:1px solid rgba(165,193,229,.05);
      border-bottom:1px solid rgba(165,193,229,.05)
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:#a9c4ff;
      font-size:.78rem;font-weight:700;letter-spacing:.13em;margin-bottom:16px
    }
    .eyebrow:before{content:"";width:26px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--cyan),var(--primary))}
    .section-title{max-width:730px;margin-bottom:46px}
    .section-title h2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.2;letter-spacing:-.04em;margin:0 0 17px;font-weight:800}
    .section-title p{max-width:700px;color:var(--muted);font-size:1.02rem;margin:0}
    .site-header{
      position:sticky;top:0;z-index:1000;background:rgba(7,17,31,.78);
      backdrop-filter:blur(18px);border-bottom:1px solid rgba(165,193,229,.10)
    }
    .navbar{padding:17px 0}
    .navbar-brand{display:flex;align-items:center;gap:11px;color:var(--text)!important;font-size:1.15rem;font-weight:800;letter-spacing:-.03em}
    .brand-mark{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;color:#fff;background:linear-gradient(135deg,var(--primary),var(--cyan));box-shadow:0 8px 24px rgba(76,125,255,.35)}
    .navbar-nav{gap:6px}
    .nav-link{color:#aebdd0!important;font-size:.92rem;padding:9px 15px!important;border-radius:10px}
    .nav-link:hover,.nav-link.active{color:#fff!important;background:rgba(76,125,255,.12)}
    .navbar-toggler{border:1px solid var(--line);padding:8px 11px;border-radius:10px}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(76,125,255,.22)}
    .navbar-toggler-icon{filter:invert(1);width:1.25em;height:1.25em}
    .btn-main,.btn-ghost{
      display:inline-flex;justify-content:center;align-items:center;gap:9px;border-radius:12px;
      padding:13px 22px;font-weight:700;font-size:.94rem;border:1px solid transparent
    }
    .btn-main{color:#fff;background:linear-gradient(135deg,var(--primary),#6b61f8);box-shadow:0 12px 28px rgba(76,125,255,.25)}
    .btn-main:hover{color:#fff;transform:translateY(-2px);box-shadow:0 17px 34px rgba(76,125,255,.38)}
    .btn-ghost{color:#d9e5f7;border-color:var(--line);background:rgba(255,255,255,.035)}
    .btn-ghost:hover{color:#fff;border-color:rgba(117,161,255,.6);background:rgba(76,125,255,.1)}
    .btn-nav{padding:10px 17px;font-size:.87rem}
    .hero{padding:92px 0 70px;text-align:center;position:relative}
    .hero:before{content:"";position:absolute;left:50%;top:40px;width:540px;height:260px;transform:translateX(-50%);background:rgba(76,125,255,.16);filter:blur(75px);pointer-events:none}
    .hero-content{position:relative;z-index:1;max-width:850px;margin:auto}
    .hero h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1.08;letter-spacing:-.065em;font-weight:850;margin:0 0 24px}
    .hero h1 span{background:linear-gradient(100deg,#fff 15%,#8cb1ff 52%,#53d8e9 92%);-webkit-background-clip:text;background-clip:text;color:transparent}
    .hero-copy{max-width:700px;margin:0 auto;color:var(--muted);font-size:1.08rem;line-height:1.9}
    .search-box{max-width:650px;margin:34px auto 19px;position:relative}
    .search-box input{
      width:100%;height:60px;padding:0 150px 0 52px;border-radius:17px;border:1px solid rgba(151,183,237,.24);
      color:#fff;background:rgba(12,29,50,.9);outline:none;box-shadow:0 18px 55px rgba(0,0,0,.2)
    }
    .search-box input::placeholder{color:#7f94b0}
    .search-box input:focus{border-color:rgba(91,145,255,.8);box-shadow:0 0 0 4px rgba(76,125,255,.14)}
    .search-icon{position:absolute;left:19px;top:17px;color:#83a7ec}
    .search-box .btn{position:absolute;right:7px;top:7px;height:46px;padding:0 20px}
    .chips{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;color:var(--muted);font-size:.85rem}
    .chip{padding:6px 12px;border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.035)}
    .chip:hover{color:#fff;border-color:rgba(76,125,255,.65);background:rgba(76,125,255,.12)}
    .signal-row{margin-top:57px;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--line)}
    .signal-item{padding:23px 15px;background:rgba(12,29,49,.78)}
    .signal-item strong{display:block;font-size:1.55rem;line-height:1.2}
    .signal-item span{display:block;color:var(--muted);font-size:.82rem;margin-top:6px}
    .plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
    .plan-card{
      position:relative;padding:29px 24px 25px;border:1px solid var(--line);border-radius:var(--radius-lg);
      background:linear-gradient(145deg,rgba(20,40,66,.92),rgba(10,25,43,.88));box-shadow:0 15px 40px rgba(0,0,0,.14);
      transition:var(--transition)
    }
    .plan-card:hover{transform:translateY(-7px);border-color:rgba(91,145,255,.65);box-shadow:var(--shadow)}
    .plan-card.featured{border-color:rgba(76,125,255,.72);background:linear-gradient(145deg,rgba(39,64,116,.95),rgba(15,31,59,.95))}
    .plan-ribbon{position:absolute;right:18px;top:17px;color:#dfeaff;background:rgba(76,125,255,.2);border:1px solid rgba(130,168,255,.3);padding:4px 9px;border-radius:20px;font-size:.7rem}
    .plan-name{font-size:1.15rem;font-weight:800;margin-bottom:17px}
    .plan-desc{height:53px;color:var(--muted);font-size:.83rem;line-height:1.6}
    .price{font-size:2.65rem;font-weight:850;letter-spacing:-.06em;margin:18px 0 20px}
    .price small{font-size:.83rem;color:var(--muted);font-weight:500;letter-spacing:0}
    .plan-list{padding:0;margin:0 0 24px;list-style:none}
    .plan-list li{display:flex;gap:9px;color:#c6d4e7;font-size:.86rem;margin:11px 0}
    .plan-list i{color:var(--success);margin-top:5px}
    .plan-card .btn{width:100%}
    .feature-layout{display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:stretch}
    .feature-panel,.benefit-card,.quote-card,.faq-wrap,.guarantee{
      border:1px solid var(--line);border-radius:var(--radius-lg);background:var(--panel);box-shadow:0 18px 55px rgba(0,0,0,.14)
    }
    .feature-panel{padding:35px;min-height:340px;overflow:hidden;position:relative}
    .feature-panel:after{content:"";position:absolute;width:230px;height:230px;right:-80px;bottom:-90px;border-radius:50%;background:rgba(67,212,232,.13);filter:blur(10px)}
    .feature-panel h3{font-size:1.75rem;line-height:1.3;margin:0 0 14px}
    .feature-panel p{color:var(--muted);max-width:540px}
    .route-line{display:flex;align-items:center;gap:12px;margin-top:34px;position:relative;z-index:1}
    .route-node{padding:14px 15px;border-radius:15px;background:rgba(76,125,255,.12);border:1px solid rgba(113,153,255,.27);font-size:.86rem}
    .route-node i{display:block;color:var(--cyan);font-size:1.1rem;margin-bottom:5px}
    .route-arrow{color:#718daf}
    .benefit-list{display:grid;gap:14px}
    .benefit-card{padding:22px 24px;display:flex;gap:16px;align-items:flex-start}
    .benefit-icon{width:43px;height:43px;flex:0 0 43px;display:grid;place-items:center;border-radius:14px;color:#a9c4ff;background:rgba(76,125,255,.14)}
    .benefit-card h4{font-size:1rem;margin:0 0 4px}
    .benefit-card p{color:var(--muted);font-size:.87rem;margin:0;line-height:1.65}
    .comparison{border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;background:rgba(13,29,49,.78)}
    .comparison-row{display:grid;grid-template-columns:1.3fr repeat(3,1fr);border-bottom:1px solid var(--line)}
    .comparison-row:last-child{border-bottom:0}
    .comparison-row>div{padding:18px 20px;border-right:1px solid var(--line);font-size:.88rem;color:#c9d7ea}
    .comparison-row>div:last-child{border-right:0}
    .comparison-row.header{background:rgba(76,125,255,.13)}
    .comparison-row.header>div{font-weight:800;color:#fff}
    .comparison-row i{color:var(--success)}
    .comparison-row .muted-cell{color:#71849d}
    .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
    .quote-card{padding:26px;position:relative}
    .quote-card:before{content:"“";position:absolute;right:23px;top:7px;color:rgba(104,145,239,.25);font-size:4rem;line-height:1}
    .quote-card p{color:#d3ddec;font-size:.94rem;line-height:1.8;margin:0 0 24px}
    .user{display:flex;align-items:center;gap:12px}
    .avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),var(--cyan));font-weight:800}
    .user strong{display:block;font-size:.9rem}
    .user span{display:block;color:var(--muted);font-size:.75rem}
    .faq-wrap{padding:12px 25px}
    .accordion-item{background:transparent;border-bottom:1px solid var(--line)!important;border-top:0!important}
    .accordion-item:last-child{border-bottom:0!important}
    .accordion-button{padding:23px 8px;color:#edf4ff;background:transparent!important;box-shadow:none!important;font-weight:700}
    .accordion-button:after{filter:invert(1) brightness(2)}
    .accordion-body{padding:0 8px 22px;color:var(--muted);font-size:.92rem;line-height:1.8}
    .guarantee-wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:23px;align-items:stretch}
    .guarantee{padding:31px}
    .guarantee h3{font-size:1.65rem;margin:0 0 13px}
    .guarantee p{color:var(--muted);margin:0}
    .guarantee-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:26px}
    .g-point{padding:15px;border-radius:15px;background:rgba(255,255,255,.035);border:1px solid rgba(165,193,229,.09)}
    .g-point i{color:var(--cyan);margin-right:7px}
    .cta-box{position:relative;overflow:hidden;padding:57px 40px;border-radius:var(--radius-lg);background:linear-gradient(120deg,#284fc2,#5b55db 56%,#187d9a);box-shadow:0 25px 70px rgba(35,81,204,.28)}
    .cta-box:after{content:"";position:absolute;width:330px;height:330px;right:-100px;top:-150px;border-radius:50%;border:1px solid rgba(255,255,255,.19);box-shadow:0 0 0 26px rgba(255,255,255,.04),0 0 0 54px rgba(255,255,255,.03)}
    .cta-box h2{position:relative;z-index:1;font-size:clamp(1.9rem,4vw,3rem);line-height:1.2;margin:0 0 13px}
    .cta-box p{position:relative;z-index:1;max-width:620px;color:#dfe7ff;margin:0}
    .cta-box .btn{position:relative;z-index:1;margin-top:25px;background:#fff;color:#254ac1;border:0}
    .cta-box .btn:hover{background:#edf4ff;color:#183baf}
    footer{padding:72px 0 25px;background:#050d18;border-top:1px solid rgba(165,193,229,.1)}
    .footer-brand{margin-bottom:19px}
    .footer-desc{color:var(--muted);max-width:390px;font-size:.9rem;line-height:1.85}
    .footer-title{font-size:.87rem;font-weight:800;margin-bottom:17px;color:#e7effb}
    .footer-links{display:flex;flex-direction:column;gap:9px;color:var(--muted);font-size:.84rem}
    .footer-links a:hover{color:#fff;transform:translateX(3px)}
    .footer-bottom{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:52px;padding-top:21px;color:#73869f;font-size:.77rem}
    .footer-bottom a:hover{color:#fff}
    :focus-visible{outline:3px solid rgba(67,212,232,.65);outline-offset:3px}
    @media(max-width:992px){
      .navbar-nav{padding-top:15px}
      .feature-layout,.guarantee-wrap{grid-template-columns:1fr}
      .plan-grid{grid-template-columns:repeat(2,1fr)}
      .quote-grid{grid-template-columns:1fr}
    }
    @media(max-width:768px){
      .section{padding:78px 0}
      .hero{padding:73px 0 52px}
      .signal-row{grid-template-columns:repeat(2,1fr)}
      .comparison{overflow-x:auto}
      .comparison-row{min-width:680px}
      .route-line{flex-wrap:wrap}
      .route-arrow{transform:rotate(90deg)}
      .guarantee-points{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      .navbar{padding:13px 0}
      .hero h1{font-size:2.65rem}
      .hero-copy{font-size:.96rem}
      .search-box input{padding-left:45px;padding-right:112px}
      .search-box .btn{padding:0 13px;font-size:.8rem}
      .signal-item{padding:18px 10px}
      .signal-item strong{font-size:1.25rem}
      .plan-grid{grid-template-columns:1fr}
      .plan-card{padding:25px 21px}
      .feature-panel{padding:26px 21px}
      .cta-box{padding:38px 24px}
      .footer-bottom{flex-direction:column}
    }

/* roulang page: category1 */
:root {
      --bg:#07111f;
      --bg-soft:#0b192b;
      --panel:rgba(17,33,55,.78);
      --panel-solid:#10223a;
      --text:#f4f8ff;
      --muted:#9eafc5;
      --line:rgba(165,193,229,.15);
      --primary:#4c7dff;
      --primary-dark:#315fe5;
      --cyan:#43d4e8;
      --violet:#8d6cff;
      --success:#4ed49b;
      --warning:#ffc76b;
      --radius-lg:28px;
      --radius-md:18px;
      --shadow:0 24px 70px rgba(0,0,0,.28);
      --transition:.3s ease;
    }
    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 12% 0%,rgba(76,125,255,.16),transparent 28rem),
        radial-gradient(circle at 88% 18%,rgba(67,212,232,.1),transparent 24rem),
        var(--bg);
      font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif;
      line-height:1.75;
      overflow-x:hidden;
    }
    a{color:inherit;text-decoration:none;transition:var(--transition)}
    img{max-width:100%;display:block}
    button,.btn{transition:var(--transition)}
    .container{max-width:1180px}
    .site-header{
      position:sticky;top:0;z-index:1000;
      background:rgba(7,17,31,.78);
      backdrop-filter:blur(18px);
      border-bottom:1px solid rgba(165,193,229,.1)
    }
    .navbar{padding:17px 0}
    .navbar-brand{
      display:flex;align-items:center;gap:11px;color:var(--text)!important;
      font-size:1.15rem;font-weight:800;letter-spacing:-.03em
    }
    .brand-mark{
      display:grid;place-items:center;width:38px;height:38px;border-radius:13px;
      color:#fff;background:linear-gradient(135deg,var(--primary),var(--cyan));
      box-shadow:0 8px 24px rgba(76,125,255,.35)
    }
    .navbar-nav{gap:6px}
    .nav-link{
      color:#aebdd0!important;font-size:.92rem;padding:9px 15px!important;border-radius:10px
    }
    .nav-link:hover,.nav-link.active{color:#fff!important;background:rgba(76,125,255,.12)}
    .navbar-toggler{border:1px solid var(--line);padding:8px 11px;border-radius:10px}
    .navbar-toggler:focus{box-shadow:0 0 0 3px rgba(76,125,255,.22)}
    .navbar-toggler-icon{filter:invert(1);width:1.25em;height:1.25em}
    .btn-main,.btn-ghost{
      display:inline-flex;justify-content:center;align-items:center;gap:9px;
      border-radius:12px;padding:13px 22px;font-weight:700;font-size:.94rem;
      border:1px solid transparent
    }
    .btn-main{
      color:#fff;background:linear-gradient(135deg,var(--primary),#6b61f8);
      box-shadow:0 12px 28px rgba(76,125,255,.25)
    }
    .btn-main:hover{color:#fff;transform:translateY(-2px);box-shadow:0 17px 34px rgba(76,125,255,.38)}
    .btn-ghost{color:#d9e5f7;border-color:var(--line);background:rgba(255,255,255,.035)}
    .btn-ghost:hover{color:#fff;border-color:rgba(117,161,255,.6);background:rgba(76,125,255,.1)}
    .btn-nav{padding:10px 17px;font-size:.87rem}
    .section{position:relative;padding:105px 0}
    .section-soft{
      background:linear-gradient(180deg,rgba(16,34,58,.42),rgba(9,22,38,.08));
      border-top:1px solid rgba(165,193,229,.05);
      border-bottom:1px solid rgba(165,193,229,.05)
    }
    .eyebrow{
      display:inline-flex;align-items:center;gap:8px;color:#a9c4ff;font-size:.78rem;
      font-weight:700;letter-spacing:.13em;margin-bottom:16px
    }
    .eyebrow:before{
      content:"";width:26px;height:2px;border-radius:2px;
      background:linear-gradient(90deg,var(--cyan),var(--primary))
    }
    .section-title{max-width:720px;margin-bottom:48px}
    .section-title h2{
      font-size:clamp(2rem,4vw,3.25rem);line-height:1.2;letter-spacing:-.04em;
      margin:0 0 18px;font-weight:800
    }
    .section-title p{max-width:700px;font-size:1.02rem;color:var(--muted)}
    .hero{
      padding:88px 0 72px;
      min-height:630px;
      display:flex;
      align-items:center;
      position:relative
    }
    .hero:after{
      content:"";position:absolute;right:-160px;top:50px;width:390px;height:390px;
      border:1px solid rgba(76,125,255,.17);border-radius:50%;
      box-shadow:0 0 0 35px rgba(76,125,255,.035),0 0 0 70px rgba(76,125,255,.02);
      pointer-events:none
    }
    .hero h1{
      max-width:690px;font-size:clamp(2.8rem,6vw,5.15rem);line-height:1.08;
      letter-spacing:-.065em;font-weight:850;margin:0 0 25px
    }
    .hero h1 span{
      background:linear-gradient(100deg,#fff 15%,#8cb1ff 52%,#53d8e9 92%);
      -webkit-background-clip:text;background-clip:text;color:transparent
    }
    .hero-copy{max-width:650px;font-size:1.08rem;line-height:1.9;color:var(--muted)}
    .hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:34px}
    .hero-proof{display:flex;gap:30px;flex-wrap:wrap;margin-top:38px}
    .proof-item strong{display:block;font-size:1.25rem}
    .proof-item small{color:var(--muted);font-size:.78rem}
    .network-board{
      position:relative;min-height:430px;padding:20px;display:flex;align-items:center;justify-content:center
    }
    .network-board:before{
      content:"";position:absolute;width:360px;height:360px;border-radius:50%;
      background:rgba(76,125,255,.22);filter:blur(70px)
    }
    .network-image{
      width:100%;height:405px;object-fit:cover;border-radius:30px;
      border:1px solid rgba(165,193,229,.18);box-shadow:var(--shadow);
      opacity:.72;filter:saturate(.85) contrast(1.05)
    }
    .network-overlay{
      position:absolute;inset:38px 34px;border-radius:25px;
      background:linear-gradient(135deg,rgba(6,18,35,.25),rgba(7,17,31,.8));
      pointer-events:none
    }
    .status-panel{
      position:absolute;z-index:2;left:0;bottom:30px;width:245px;padding:18px;
      background:rgba(13,31,53,.9);border:1px solid var(--line);border-radius:20px;
      box-shadow:0 18px 50px rgba(0,0,0,.3);backdrop-filter:blur(15px)
    }
    .status-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px}
    .status-dot{width:9px;height:9px;border-radius:50%;background:var(--success);box-shadow:0 0 14px var(--success)}
    .status-label{font-size:.78rem;color:#bee9d6}
    .status-panel strong{font-size:1.45rem;display:block}
    .status-panel small{font-size:.75rem;color:var(--muted)}
    .mini-route{
      position:absolute;z-index:2;right:0;top:52px;width:215px;padding:16px;
      background:rgba(13,31,53,.86);border:1px solid var(--line);border-radius:18px;
      box-shadow:var(--shadow);backdrop-filter:blur(15px)
    }
    .mini-route p{font-size:.77rem;color:var(--muted);margin:0 0 9px}
    .route-line{height:5px;border-radius:10px;background:linear-gradient(90deg,var(--cyan),var(--primary));margin:9px 0 7px}
    .route-meta{display:flex;justify-content:space-between;font-size:.72rem;color:#c5d5e9}
    .badge-soft{
      display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;
      color:#cfe0ff;background:rgba(76,125,255,.12);border:1px solid rgba(76,125,255,.25);
      font-size:.76rem;font-weight:700
    }
    .feature-card,.region-card,.quote-card,.compare-card,.security-card{
      height:100%;padding:28px;border-radius:var(--radius-md);
      background:var(--panel);border:1px solid var(--line);
      box-shadow:0 15px 45px rgba(0,0,0,.12);transition:var(--transition)
    }
    .feature-card:hover,.region-card:hover,.quote-card:hover,.compare-card:hover,.security-card:hover{
      transform:translateY(-7px);border-color:rgba(109,153,255,.5);
      box-shadow:0 22px 55px rgba(0,0,0,.25)
    }
    .icon-box{
      width:52px;height:52px;border-radius:16px;display:grid;place-items:center;
      color:#fff;font-size:1.18rem;margin-bottom:22px;
      background:linear-gradient(135deg,rgba(76,125,255,.95),rgba(67,212,232,.7));
      box-shadow:0 12px 25px rgba(76,125,255,.22)
    }
    .feature-card h3,.region-card h3,.security-card h3{font-size:1.18rem;margin:0 0 10px}
    .feature-card p,.region-card p,.security-card p{color:var(--muted);font-size:.91rem;margin:0}
    .feature-card ul{list-style:none;padding:0;margin:20px 0 0}
    .feature-card li{color:#cbd8ea;font-size:.84rem;padding:7px 0;border-top:1px solid rgba(165,193,229,.1)}
    .feature-card li i{color:var(--cyan);margin-right:8px}
    .region-card{position:relative;overflow:hidden;padding:25px}
    .region-card:after{
      content:"";position:absolute;width:120px;height:120px;right:-45px;bottom:-50px;
      border-radius:50%;background:rgba(76,125,255,.12)
    }
    .region-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}
    .region-number{font-size:2.2rem;font-weight:800;line-height:1;color:#789eff}
    .region-card .badge-soft{font-size:.68rem;color:#bdf0dc;background:rgba(78,212,155,.1);border-color:rgba(78,212,155,.25)}
    .metric-row{display:flex;justify-content:space-between;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}
    .metric-row span{font-size:.75rem;color:var(--muted)}
    .metric-row strong{display:block;font-size:1rem;color:#fff}
    .route-table{border:1px solid var(--line);border-radius:22px;overflow:hidden;background:rgba(15,31,51,.65)}
    .route-row{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:20px;align-items:center;padding:20px 25px;border-bottom:1px solid var(--line)}
    .route-row:last-child{border-bottom:0}
    .route-row.header{color:#9fb1c8;font-size:.78rem;background:rgba(76,125,255,.07)}
    .route-row:not(.header){font-size:.88rem}
    .route-name{display:flex;align-items:center;gap:11px;font-weight:700}
    .route-name i{color:var(--cyan)}
    .latency{color:#9de9c7;font-weight:700}
    .signal{display:flex;gap:4px;align-items:flex-end;height:18px}
    .signal i{display:block;width:4px;border-radius:3px;background:var(--primary)}
    .signal i:nth-child(1){height:6px;opacity:.45}.signal i:nth-child(2){height:10px;opacity:.65}
    .signal i:nth-child(3){height:14px;opacity:.82}.signal i:nth-child(4){height:18px}
    .stat-strip{padding:28px 0;background:rgba(8,21,37,.7);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
    .stat-item{padding:4px 25px;border-right:1px solid var(--line)}
    .stat-item:last-child{border-right:0}
    .stat-item strong{display:block;font-size:2.2rem;letter-spacing:-.05em}
    .stat-item span{color:var(--muted);font-size:.82rem}
    .comparison-wrap{display:grid;grid-template-columns:1fr 1fr;gap:20px}
    .compare-card{padding:30px}
    .compare-card.highlight{background:linear-gradient(145deg,rgba(48,86,183,.35),rgba(16,34,58,.82));border-color:rgba(100,143,255,.48)}
    .compare-card h3{margin:0 0 22px;font-size:1.25rem}
    .compare-list{list-style:none;padding:0;margin:0}
    .compare-list li{display:flex;gap:11px;color:#bfccdd;font-size:.89rem;padding:12px 0;border-bottom:1px solid rgba(165,193,229,.1)}
    .compare-list li:last-child{border-bottom:0}
    .compare-list i{margin-top:5px;color:var(--cyan)}
    .compare-card:not(.highlight) .compare-list i{color:#74849a}
    .quote-card{padding:26px}
    .quote-stars{color:#ffc76b;letter-spacing:2px;font-size:.78rem;margin-bottom:17px}
    .quote-card p{color:#d4dfed;font-size:.91rem;line-height:1.8;margin:0 0 22px}
    .quote-user{display:flex;align-items:center;gap:11px}
    .avatar{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;background:linear-gradient(135deg,#5d7eff,#43d4e8)}
    .quote-user strong{display:block;font-size:.85rem}
    .quote-user small{color:var(--muted);font-size:.72rem}
    .faq-list .accordion-item{background:rgba(16,34,58,.72);border:1px solid var(--line)!important;margin-bottom:12px;border-radius:15px!important;overflow:hidden}
    .faq-list .accordion-button{background:transparent;color:#f3f7ff;font-weight:700;box-shadow:none;padding:21px 23px}
    .faq-list .accordion-button:not(.collapsed){color:#a9c4ff;background:rgba(76,125,255,.08)}
    .faq-list .accordion-button:after{filter:invert(1);opacity:.7}
    .faq-list .accordion-body{color:var(--muted);font-size:.9rem;padding:0 23px 22px}
    .cta-box{
      position:relative;overflow:hidden;padding:58px 65px;border-radius:30px;
      background:linear-gradient(115deg,#204aa9,#493eb1 55%,#157b9c);
      box-shadow:var(--shadow)
    }
    .cta-box:after{content:"";position:absolute;width:350px;height:350px;right:-130px;top:-180px;border-radius:50%;border:1px solid rgba(255,255,255,.2);box-shadow:0 0 0 30px rgba(255,255,255,.04),0 0 0 60px rgba(255,255,255,.03)}
    .cta-box h2{position:relative;z-index:1;font-size:clamp(1.8rem,3.5vw,3rem);line-height:1.2;margin:0 0 14px}
    .cta-box p{position:relative;z-index:1;color:rgba(255,255,255,.78);max-width:650px;margin:0}
    .cta-actions{position:relative;z-index:1;display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
    .cta-actions .btn-ghost{border-color:rgba(255,255,255,.3);color:#fff}
    footer{padding:72px 0 25px;background:#050d18;border-top:1px solid var(--line)}
    .footer-brand{margin-bottom:18px}
    .footer-desc{max-width:410px;color:var(--muted);font-size:.88rem}
    .footer-title{font-weight:800;margin-bottom:17px}
    .footer-links{display:flex;flex-direction:column;gap:10px;color:var(--muted);font-size:.84rem}
    .footer-links a:hover{color:#fff;transform:translateX(3px)}
    .footer-bottom{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:55px;padding-top:22px;border-top:1px solid var(--line);color:#71829a;font-size:.76rem}
    .footer-bottom a:hover{color:#fff}
    :focus-visible{outline:3px solid rgba(67,212,232,.62);outline-offset:3px}
    @media(max-width:991px){
      .navbar-nav{padding-top:15px}
      .hero{padding-top:65px}
      .network-board{margin-top:35px}
      .stat-item{margin-bottom:20px;border-right:0}
    }
    @media(max-width:767px){
      .section{padding:76px 0}
      .hero{min-height:auto;padding:65px 0 55px}
      .hero h1{font-size:clamp(2.6rem,13vw,4rem)}
      .network-board{min-height:390px;padding:8px}
      .network-image{height:350px}
      .status-panel{left:0;bottom:15px}
      .mini-route{right:0;top:26px}
      .route-table{overflow-x:auto}
      .route-row{min-width:690px}
      .comparison-wrap{grid-template-columns:1fr}
      .cta-box{padding:38px 25px}
      .footer-bottom{margin-top:35px}
    }
    @media(max-width:520px){
      .navbar{padding:13px 0}
      .hero-actions .btn{width:100%}
      .hero-proof{gap:20px}
      .network-board{min-height:350px}
      .network-image{height:310px}
      .status-panel{width:205px;padding:14px}
      .mini-route{width:175px;padding:12px}
      .stat-item strong{font-size:1.8rem}
      .section-title{margin-bottom:32px}
    }

/* roulang page: category3 */
:root {
      --bg: #07111f;
      --bg-soft: #0b192b;
      --panel: rgba(17, 33, 55, .78);
      --panel-solid: #10223a;
      --text: #f4f8ff;
      --muted: #9eafc5;
      --line: rgba(165, 193, 229, .15);
      --primary: #4c7dff;
      --primary-dark: #315fe5;
      --cyan: #43d4e8;
      --violet: #8d6cff;
      --success: #4ed49b;
      --warning: #ffc76a;
      --radius-lg: 28px;
      --radius-md: 18px;
      --shadow: 0 24px 70px rgba(0, 0, 0, .28);
      --transition: .3s ease;
    }

    html { scroll-behavior: smooth; }

    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 15% 0%, rgba(76,125,255,.16), transparent 28rem),
        radial-gradient(circle at 88% 18%, rgba(67,212,232,.10), transparent 24rem),
        var(--bg);
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }

    *, *::before, *::after { box-sizing: border-box; }
    a { color: inherit; text-decoration: none; transition: var(--transition); }
    img { max-width: 100%; display: block; }
    button, .btn { transition: var(--transition); }
    .container { max-width: 1180px; }

    .text-muted-custom { color: var(--muted) !important; }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(7,17,31,.78);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(165,193,229,.10);
    }

    .navbar { padding: 17px 0; }
    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--text) !important;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -.03em;
    }

    .brand-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--cyan));
      box-shadow: 0 8px 24px rgba(76,125,255,.35);
    }

    .navbar-nav { gap: 6px; }
    .nav-link {
      color: #aebdd0 !important;
      font-size: .92rem;
      padding: 9px 15px !important;
      border-radius: 10px;
    }

    .nav-link:hover,
    .nav-link.active {
      color: #fff !important;
      background: rgba(76,125,255,.12);
    }

    .navbar-toggler {
      border: 1px solid var(--line);
      padding: 8px 11px;
      border-radius: 10px;
    }

    .navbar-toggler:focus {
      box-shadow: 0 0 0 3px rgba(76,125,255,.22);
    }

    .navbar-toggler-icon {
      filter: invert(1);
      width: 1.25em;
      height: 1.25em;
    }

    .btn-main,
    .btn-ghost {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      border-radius: 12px;
      padding: 13px 22px;
      font-weight: 700;
      font-size: .94rem;
      border: 1px solid transparent;
    }

    .btn-main {
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #6b61f8);
      box-shadow: 0 12px 28px rgba(76,125,255,.25);
    }

    .btn-main:hover {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 17px 34px rgba(76,125,255,.38);
    }

    .btn-ghost {
      color: #d9e5f7;
      border-color: var(--line);
      background: rgba(255,255,255,.035);
    }

    .btn-ghost:hover {
      color: #fff;
      border-color: rgba(117,161,255,.6);
      background: rgba(76,125,255,.1);
    }

    .btn-nav { padding: 10px 17px; font-size: .87rem; }

    .guide-hero {
      position: relative;
      padding: 100px 0 80px;
      overflow: hidden;
      text-align: center;
    }

    .guide-hero::before {
      content: "";
      position: absolute;
      width: 560px;
      height: 260px;
      left: 50%;
      top: 5%;
      transform: translateX(-50%);
      background: rgba(76,125,255,.18);
      filter: blur(90px);
      pointer-events: none;
    }

    .eyebrow {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #a9c4ff;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .13em;
      margin-bottom: 16px;
    }

    .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--primary));
    }

    .guide-hero h1 {
      position: relative;
      max-width: 820px;
      margin: 0 auto 20px;
      font-size: clamp(2.5rem, 6vw, 5rem);
      line-height: 1.1;
      letter-spacing: -.065em;
      font-weight: 850;
    }

    .gradient-text {
      background: linear-gradient(100deg, #fff 15%, #8cb1ff 52%, #53d8e9 92%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .hero-intro {
      position: relative;
      max-width: 700px;
      margin: 0 auto;
      color: var(--muted);
      font-size: 1.08rem;
    }

    .guide-search {
      position: relative;
      max-width: 720px;
      margin: 35px auto 22px;
    }

    .guide-search .search-icon {
      position: absolute;
      left: 22px;
      top: 50%;
      transform: translateY(-50%);
      color: #8fa9d3;
      z-index: 2;
    }

    .guide-search input {
      width: 100%;
      height: 66px;
      padding: 0 150px 0 55px;
      border: 1px solid rgba(137,171,235,.28);
      border-radius: 18px;
      color: #fff;
      background: rgba(17,33,55,.82);
      box-shadow: 0 18px 50px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.04);
      outline: none;
      font-size: 1rem;
    }

    .guide-search input::placeholder { color: #758aa6; }

    .guide-search input:focus {
      border-color: rgba(76,125,255,.85);
      box-shadow: 0 0 0 4px rgba(76,125,255,.13), 0 18px 50px rgba(0,0,0,.24);
    }

    .search-button {
      position: absolute;
      right: 8px;
      top: 8px;
      bottom: 8px;
      border: 0;
      border-radius: 12px;
      padding: 0 22px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #6b61f8);
      font-weight: 700;
    }

    .search-button:hover { filter: brightness(1.12); }

    .hot-topics {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 9px;
      color: var(--muted);
      font-size: .87rem;
    }

    .topic-chip {
      padding: 7px 13px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #c6d5e9;
      background: rgba(255,255,255,.035);
    }

    .topic-chip:hover {
      color: #fff;
      border-color: rgba(76,125,255,.6);
      background: rgba(76,125,255,.12);
    }

    .section {
      position: relative;
      padding: 100px 0;
    }

    .section-soft {
      background: linear-gradient(180deg, rgba(16,34,58,.42), rgba(9,22,38,.08));
      border-top: 1px solid rgba(165,193,229,.05);
      border-bottom: 1px solid rgba(165,193,229,.05);
    }

    .section-title {
      max-width: 720px;
      margin-bottom: 42px;
    }

    .section-title h2 {
      font-size: clamp(2rem, 4vw, 3.25rem);
      line-height: 1.2;
      letter-spacing: -.04em;
      margin: 0 0 16px;
      font-weight: 800;
    }

    .section-title p {
      max-width: 700px;
      color: var(--muted);
      font-size: 1.02rem;
      margin: 0;
    }

    .guide-index {
      margin-top: -28px;
      position: relative;
      z-index: 2;
    }

    .index-panel {
      padding: 25px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: rgba(17,33,55,.84);
      box-shadow: var(--shadow);
    }

    .index-item {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 15px;
      border-radius: 15px;
      color: #dbe7f6;
      height: 100%;
    }

    .index-item:hover {
      color: #fff;
      background: rgba(76,125,255,.10);
    }

    .index-number {
      display: grid;
      place-items: center;
      flex: 0 0 34px;
      width: 34px;
      height: 34px;
      border-radius: 11px;
      color: #dce7ff;
      background: linear-gradient(135deg, rgba(76,125,255,.75), rgba(67,212,232,.45));
      font-size: .82rem;
      font-weight: 800;
    }

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

    .index-item span {
      display: block;
      color: var(--muted);
      font-size: .81rem;
      line-height: 1.55;
    }

    .guide-card {
      height: 100%;
      padding: 29px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background: linear-gradient(145deg, rgba(17,33,55,.9), rgba(11,25,43,.72));
      box-shadow: 0 15px 42px rgba(0,0,0,.14);
      transition: var(--transition);
    }

    .guide-card:hover {
      transform: translateY(-6px);
      border-color: rgba(103,153,255,.48);
      box-shadow: 0 24px 55px rgba(0,0,0,.25);
    }

    .card-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      margin-bottom: 22px;
      border-radius: 16px;
      color: #dce8ff;
      background: linear-gradient(135deg, rgba(76,125,255,.28), rgba(67,212,232,.16));
      border: 1px solid rgba(119,165,255,.22);
      font-size: 1.2rem;
    }

    .guide-card h3 {
      margin: 0 0 11px;
      font-size: 1.2rem;
      letter-spacing: -.02em;
    }

    .guide-card p {
      color: var(--muted);
      font-size: .92rem;
      margin-bottom: 0;
    }

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

    .step-list li {
      display: flex;
      gap: 15px;
      align-items: flex-start;
      padding: 17px 18px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.025);
    }

    .step-badge {
      display: grid;
      place-items: center;
      flex: 0 0 31px;
      width: 31px;
      height: 31px;
      margin-top: 2px;
      border-radius: 50%;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--violet));
      font-size: .8rem;
      font-weight: 800;
    }

    .step-list strong {
      display: block;
      margin-bottom: 3px;
      color: #eef5ff;
      font-size: .97rem;
    }

    .step-list span {
      color: var(--muted);
      font-size: .88rem;
      line-height: 1.65;
    }

    .notice-box {
      padding: 24px 26px;
      border: 1px solid rgba(78,212,155,.22);
      border-radius: var(--radius-md);
      background: linear-gradient(135deg, rgba(78,212,155,.10), rgba(67,212,232,.04));
    }

    .notice-box i {
      margin-right: 8px;
      color: var(--success);
    }

    .notice-box strong {
      display: block;
      margin-bottom: 6px;
      color: #dfffee;
    }

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

    .signal-panel {
      position: relative;
      min-height: 420px;
      padding: 30px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        radial-gradient(circle at 80% 10%, rgba(76,125,255,.23), transparent 16rem),
        linear-gradient(145deg, rgba(17,33,55,.94), rgba(11,25,43,.75));
      box-shadow: var(--shadow);
    }

    .signal-panel::after {
      content: "";
      position: absolute;
      width: 180px;
      height: 180px;
      right: -60px;
      bottom: -60px;
      border-radius: 50%;
      border: 1px solid rgba(67,212,232,.25);
      box-shadow: 0 0 0 25px rgba(67,212,232,.04), 0 0 0 50px rgba(67,212,232,.025);
    }

    .signal-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 38px;
    }

    .signal-top strong { font-size: 1.1rem; }
    .status-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 6px 10px;
      border-radius: 999px;
      color: #a9f0d0;
      background: rgba(78,212,155,.10);
      border: 1px solid rgba(78,212,155,.22);
      font-size: .75rem;
      font-weight: 700;
    }

    .status-pill::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--success);
      box-shadow: 0 0 0 4px rgba(78,212,155,.12);
    }

    .signal-line {
      position: relative;
      height: 120px;
      margin: 0 0 30px;
      border-bottom: 1px solid rgba(165,193,229,.13);
      background: repeating-linear-gradient(to bottom, transparent 0, transparent 39px, rgba(165,193,229,.08) 40px);
    }

    .signal-line svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }

    .signal-metrics {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 12px;
    }

    .metric {
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,255,255,.035);
    }

    .metric small {
      display: block;
      color: var(--muted);
      font-size: .76rem;
      margin-bottom: 5px;
    }

    .metric strong {
      font-size: 1.3rem;
      letter-spacing: -.04em;
    }

    .metric em {
      color: var(--success);
      font-size: .75rem;
      font-style: normal;
      margin-left: 4px;
    }

    .platform-row {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 24px;
    }

    .platform-tag {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 10px 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      color: #cbd9eb;
      background: rgba(255,255,255,.025);
      font-size: .84rem;
    }

    .platform-tag i { color: #86aaff; }

    .issue-list {
      display: grid;
      gap: 12px;
    }

    .issue-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(17,33,55,.62);
    }

    .issue-item:hover {
      border-color: rgba(76,125,255,.46);
      background: rgba(76,125,255,.08);
    }

    .issue-main {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .issue-main i {
      color: var(--cyan);
      font-size: 1.05rem;
    }

    .issue-main strong {
      display: block;
      font-size: .95rem;
    }

    .issue-main span {
      display: block;
      color: var(--muted);
      font-size: .81rem;
    }

    .issue-arrow { color: #8da7c8; }

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

    .accordion-item {
      overflow: hidden;
      margin-bottom: 12px;
      border: 1px solid var(--line) !important;
      border-radius: 16px !important;
      background: rgba(17,33,55,.62) !important;
    }

    .accordion-button {
      padding: 21px 23px;
      color: #eaf2ff !important;
      background: transparent !important;
      box-shadow: none !important;
      font-weight: 700;
    }

    .accordion-button::after {
      filter: invert(1) brightness(1.8);
    }

    .accordion-button:not(.collapsed) {
      color: #fff !important;
      background: rgba(76,125,255,.09) !important;
    }

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

    .final-cta {
      position: relative;
      overflow: hidden;
      padding: 65px 0;
      background:
        radial-gradient(circle at 80% 30%, rgba(67,212,232,.16), transparent 20rem),
        linear-gradient(135deg, rgba(76,125,255,.18), rgba(141,108,255,.13));
      border-top: 1px solid rgba(165,193,229,.10);
      border-bottom: 1px solid rgba(165,193,229,.10);
    }

    .final-cta h2 {
      margin: 0 0 12px;
      font-size: clamp(1.9rem, 4vw, 3rem);
      letter-spacing: -.045em;
    }

    .final-cta p {
      max-width: 640px;
      margin: 0;
      color: #b7c7dd;
    }

    .final-actions {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      gap: 12px;
      flex-wrap: wrap;
    }

    footer {
      padding: 72px 0 25px;
      background: #060e1a;
    }

    .footer-brand { margin-bottom: 20px; }
    .footer-desc {
      max-width: 390px;
      color: var(--muted);
      font-size: .92rem;
      margin: 0;
    }

    .footer-title {
      margin-bottom: 17px;
      color: #eaf2ff;
      font-weight: 700;
      font-size: .95rem;
    }

    .footer-links {
      display: grid;
      gap: 10px;
      color: var(--muted);
      font-size: .87rem;
    }

    .footer-links a:hover { color: #fff; }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 55px;
      padding-top: 22px;
      border-top: 1px solid var(--line);
      color: #71849e;
      font-size: .78rem;
    }

    .footer-bottom a:hover { color: #dce8fa; }

    :focus-visible {
      outline: 3px solid rgba(67,212,232,.72);
      outline-offset: 3px;
    }

    @media (max-width: 991px) {
      .navbar-nav { padding-top: 16px; }
      .guide-hero { padding-top: 75px; }
      .section { padding: 80px 0; }
      .final-actions { justify-content: flex-start; margin-top: 25px; }
    }

    @media (max-width: 767px) {
      .navbar { padding: 13px 0; }
      .guide-hero { padding: 65px 0 58px; }
      .guide-search input { height: 58px; padding-right: 112px; }
      .search-button { padding: 0 15px; }
      .section { padding: 65px 0; }
      .section-title { margin-bottom: 30px; }
      .index-panel { padding: 15px; }
      .signal-panel { min-height: auto; padding: 23px; }
      .signal-metrics { gap: 8px; }
      .metric { padding: 11px; }
      .metric strong { font-size: 1.05rem; }
      .issue-item { align-items: flex-start; padding: 15px; }
      .issue-arrow { padding-top: 4px; }
      footer { padding-top: 55px; }
    }

    @media (max-width: 520px) {
      .guide-hero h1 { font-size: 2.55rem; }
      .hero-intro { font-size: .95rem; }
      .hot-topics { justify-content: flex-start; }
      .guide-search input { font-size: .88rem; }
      .search-button { font-size: .82rem; }
      .signal-metrics { grid-template-columns: 1fr; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-bottom: 8px; }
    }

/* roulang page: category4 */
:root {
      --bg: #07111f;
      --bg-soft: #0b192b;
      --panel: rgba(17, 33, 55, .78);
      --panel-solid: #10223a;
      --text: #f4f8ff;
      --muted: #9eafc5;
      --line: rgba(165, 193, 229, .15);
      --primary: #4c7dff;
      --primary-dark: #315fe5;
      --cyan: #43d4e8;
      --violet: #8d6cff;
      --success: #4ed49b;
      --warning: #f7c66b;
      --radius-lg: 28px;
      --radius-md: 18px;
      --shadow: 0 24px 70px rgba(0, 0, 0, .28);
      --transition: .3s ease;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: var(--text);
      background:
        radial-gradient(circle at 12% 0%, rgba(76,125,255,.16), transparent 28rem),
        radial-gradient(circle at 90% 15%, rgba(67,212,232,.10), transparent 25rem),
        var(--bg);
      font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
      line-height: 1.75;
      overflow-x: hidden;
    }
    a { color: inherit; text-decoration: none; transition: var(--transition); }
    a:hover { color: #fff; }
    img { max-width: 100%; display: block; }
    button, .btn { transition: var(--transition); }
    .container { max-width: 1180px; }
    .section {
      position: relative;
      padding: 104px 0;
    }
    .section-soft {
      background: linear-gradient(180deg, rgba(16,34,58,.42), rgba(9,22,38,.08));
      border-top: 1px solid rgba(165,193,229,.05);
      border-bottom: 1px solid rgba(165,193,229,.05);
    }
    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: #a9c4ff;
      font-size: .78rem;
      font-weight: 700;
      letter-spacing: .13em;
      margin-bottom: 16px;
    }
    .eyebrow::before {
      content: "";
      width: 26px;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, var(--cyan), var(--primary));
    }
    .section-title { max-width: 720px; margin-bottom: 48px; }
    .section-title h2 {
      font-size: clamp(2rem, 4vw, 3.25rem);
      line-height: 1.2;
      letter-spacing: -.04em;
      margin: 0 0 18px;
      font-weight: 800;
    }
    .section-title p { max-width: 720px; color: var(--muted); font-size: 1.02rem; }
    .text-muted-custom { color: var(--muted); }

    .site-header {
      position: sticky;
      top: 0;
      z-index: 1000;
      background: rgba(7,17,31,.78);
      backdrop-filter: blur(18px);
      border-bottom: 1px solid rgba(165,193,229,.10);
    }
    .navbar { padding: 17px 0; }
    .navbar-brand {
      display: flex;
      align-items: center;
      gap: 11px;
      color: var(--text) !important;
      font-size: 1.15rem;
      font-weight: 800;
      letter-spacing: -.03em;
    }
    .brand-mark {
      display: grid;
      place-items: center;
      width: 38px;
      height: 38px;
      border-radius: 13px;
      color: #fff;
      background: linear-gradient(135deg, var(--primary), var(--cyan));
      box-shadow: 0 8px 24px rgba(76,125,255,.35);
    }
    .navbar-nav { gap: 6px; }
    .nav-link {
      color: #aebdd0 !important;
      font-size: .92rem;
      padding: 9px 15px !important;
      border-radius: 10px;
    }
    .nav-link:hover, .nav-link.active {
      color: #fff !important;
      background: rgba(76,125,255,.12);
    }
    .navbar-toggler {
      border: 1px solid var(--line);
      padding: 8px 11px;
      border-radius: 10px;
    }
    .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(76,125,255,.22); }
    .navbar-toggler-icon { filter: invert(1); width: 1.25em; height: 1.25em; }

    .btn-main, .btn-ghost {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      gap: 9px;
      border-radius: 12px;
      padding: 13px 22px;
      font-weight: 700;
      font-size: .94rem;
      border: 1px solid transparent;
    }
    .btn-main {
      color: #fff;
      background: linear-gradient(135deg, var(--primary), #6b61f8);
      box-shadow: 0 12px 28px rgba(76,125,255,.25);
    }
    .btn-main:hover {
      color: #fff;
      transform: translateY(-2px);
      box-shadow: 0 17px 34px rgba(76,125,255,.38);
    }
    .btn-ghost {
      color: #d9e5f7;
      border-color: var(--line);
      background: rgba(255,255,255,.035);
    }
    .btn-ghost:hover {
      color: #fff;
      border-color: rgba(117,161,255,.6);
      background: rgba(76,125,255,.1);
    }
    .btn-nav { padding: 10px 17px; font-size: .87rem; }

    .news-hero {
      padding: 92px 0 78px;
      position: relative;
      overflow: hidden;
    }
    .news-hero::after {
      content: "";
      position: absolute;
      width: 460px;
      height: 460px;
      right: -150px;
      top: -180px;
      border-radius: 50%;
      background: rgba(76,125,255,.13);
      filter: blur(10px);
      pointer-events: none;
    }
    .hero-kicker {
      display: inline-flex;
      gap: 10px;
      align-items: center;
      color: #b8cbff;
      padding: 7px 13px;
      border: 1px solid rgba(113,155,255,.25);
      background: rgba(76,125,255,.10);
      border-radius: 999px;
      font-size: .82rem;
      font-weight: 700;
      margin-bottom: 22px;
    }
    .hero-kicker i { color: var(--cyan); }
    .news-hero h1 {
      max-width: 760px;
      margin: 0 0 24px;
      font-size: clamp(2.65rem, 6vw, 5.25rem);
      line-height: 1.08;
      letter-spacing: -.065em;
      font-weight: 850;
    }
    .news-hero h1 span {
      background: linear-gradient(100deg, #fff 15%, #8cb1ff 52%, #53d8e9 92%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .hero-intro {
      max-width: 720px;
      color: var(--muted);
      font-size: 1.08rem;
      line-height: 1.9;
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: 13px; margin-top: 32px; }
    .hero-statline {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      margin-top: 42px;
    }
    .hero-statline strong { display: block; font-size: 1.3rem; }
    .hero-statline span { color: var(--muted); font-size: .8rem; }

    .signal-card {
      position: relative;
      min-height: 390px;
      padding: 26px;
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      background:
        linear-gradient(145deg, rgba(33,64,108,.88), rgba(12,28,49,.9)),
        url("https://images.unsplash.com/photo-1451187580459-43490279c0fa?auto=format&fit=crop&w=1000&q=80") center/cover;
      box-shadow: var(--shadow);
      overflow: hidden;
    }
    .signal-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(150deg, rgba(6,17,31,.1), rgba(6,17,31,.86));
    }
    .signal-content { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }
    .signal-top { display: flex; justify-content: space-between; align-items: center; }
    .live-badge {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 7px 11px;
      color: #c9ffe7;
      border-radius: 999px;
      background: rgba(78,212,155,.13);
      border: 1px solid rgba(78,212,155,.25);
      font-size: .78rem;
      font-weight: 700;
    }
    .live-badge i { font-size: .5rem; color: var(--success); }
    .signal-icon {
      display: grid;
      place-items: center;
      width: 45px;
      height: 45px;
      border-radius: 15px;
      color: #d7e4ff;
      background: rgba(255,255,255,.09);
    }
    .signal-content h3 { margin: 0 0 10px; font-size: 1.7rem; }
    .signal-content p { color: #bac9dd; margin: 0; font-size: .92rem; }
    .signal-bars { display: flex; align-items: end; gap: 7px; height: 80px; margin-top: 24px; }
    .signal-bars span {
      width: 9px;
      border-radius: 8px 8px 3px 3px;
      background: linear-gradient(180deg, var(--cyan), var(--primary));
      box-shadow: 0 0 16px rgba(67,212,232,.25);
    }
    .signal-bars span:nth-child(1) { height: 38%; }
    .signal-bars span:nth-child(2) { height: 65%; }
    .signal-bars span:nth-child(3) { height: 48%; }
    .signal-bars span:nth-child(4) { height: 82%; }
    .signal-bars span:nth-child(5) { height: 60%; }
    .signal-bars span:nth-child(6) { height: 92%; }
    .signal-bars span:nth-child(7) { height: 73%; }
    .signal-meta { display: flex; justify-content: space-between; color: #c4d4e9; font-size: .82rem; }

    .topic-strip {
      padding: 20px 0;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      background: rgba(8,20,36,.55);
    }
    .topic-list { display: flex; gap: 12px; flex-wrap: wrap; }
    .topic-pill {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 9px 14px;
      border-radius: 999px;
      color: #c6d5e9;
      border: 1px solid var(--line);
      background: rgba(255,255,255,.025);
      font-size: .84rem;
    }
    .topic-pill:hover { color: #fff; border-color: rgba(76,125,255,.6); background: rgba(76,125,255,.10); }
    .topic-pill i { color: var(--cyan); }

    .update-card {
      height: 100%;
      padding: 27px;
      border: 1px solid var(--line);
      border-radius: var(--radius-md);
      background: linear-gradient(145deg, rgba(17,33,55,.82), rgba(10,24,42,.76));
      transition: var(--transition);
    }
    .update-card:hover {
      transform: translateY(-6px);
      border-color: rgba(102,151,255,.55);
      box-shadow: 0 18px 42px rgba(0,0,0,.22);
    }
    .card-icon {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      margin-bottom: 24px;
      border-radius: 16px;
      color: #fff;
      background: linear-gradient(135deg, rgba(76,125,255,.95), rgba(67,212,232,.7));
      box-shadow: 0 12px 25px rgba(76,125,255,.2);
    }
    .update-card h3 { font-size: 1.2rem; margin-bottom: 11px; }
    .update-card p { color: var(--muted); margin-bottom: 0; font-size: .92rem; }

    .feature-board {
      padding: 34px;
      border-radius: var(--radius-lg);
      background: linear-gradient(135deg, rgba(27,53,89,.85), rgba(10,26,46,.78));
      border: 1px solid rgba(129,164,223,.18);
      box-shadow: var(--shadow);
    }
    .board-heading { display: flex; justify-content: space-between; gap: 20px; align-items: start; margin-bottom: 30px; }
    .board-heading h3 { margin: 0 0 8px; font-size: 1.55rem; }
    .board-heading p { margin: 0; color: var(--muted); }
    .status-tag {
      white-space: nowrap;
      color: #baffdf;
      padding: 7px 11px;
      border-radius: 999px;
      background: rgba(78,212,155,.11);
      border: 1px solid rgba(78,212,155,.23);
      font-size: .78rem;
      font-weight: 700;
    }
    .metric-row {
      display: grid;
      grid-template-columns: 1.1fr 1fr .8fr;
      gap: 15px;
      align-items: center;
      padding: 18px 0;
      border-top: 1px solid rgba(165,193,229,.11);
    }
    .metric-row:first-of-type { border-top: 0; }
    .metric-name { display: flex; align-items: center; gap: 11px; font-weight: 700; }
    .metric-name i { color: var(--cyan); width: 18px; text-align: center; }
    .metric-note { color: var(--muted); font-size: .84rem; }
    .metric-value { text-align: right; color: #d8e5fa; font-weight: 700; }
    .progress-track {
      height: 7px;
      overflow: hidden;
      border-radius: 99px;
      background: rgba(255,255,255,.08);
    }
    .progress-track span {
      display: block;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--primary), var(--cyan));
    }

    .timeline { position: relative; padding-left: 28px; }
    .timeline::before {
      content: "";
      position: absolute;
      top: 7px;
      bottom: 7px;
      left: 5px;
      width: 1px;
      background: linear-gradient(var(--primary), rgba(67,212,232,.08));
    }
    .timeline-item { position: relative; padding: 0 0 33px 25px; }
    .timeline-item:last-child { padding-bottom: 0; }
    .timeline-item::before {
      content: "";
      position: absolute;
      left: -1px;
      top: 7px;
      width: 13px;
      height: 13px;
      border-radius: 50%;
      background: var(--bg);
      border: 3px solid var(--cyan);
      box-shadow: 0 0 0 5px rgba(67,212,232,.09);
    }
    .timeline-date { color: #9dbbff; font-size: .8rem; font-weight: 700; margin-bottom: 5px; }
    .timeline-item h3 { font-size: 1.16rem; margin-bottom: 8px; }
    .timeline-item p { color: var(--muted); margin: 0; font-size: .92rem; }

    .article-list { display: grid; gap: 14px; }
    .article-item {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 18px 20px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: rgba(255,255,255,.025);
    }
    .article-item:hover {
      background: rgba(76,125,255,.09);
      border-color: rgba(102,151,255,.45);
      transform: translateX(4px);
    }
    .article-date {
      flex: 0 0 74px;
      color: #9dbbff;
      font-size: .78rem;
      font-weight: 700;
    }
    .article-item h3 { margin: 0; font-size: .98rem; }
    .article-item i { margin-left: auto; color: #7186a5; }

    .faq-wrap { max-width: 900px; }
    .accordion-item {
      overflow: hidden;
      margin-bottom: 12px;
      border: 1px solid var(--line) !important;
      border-radius: 15px !important;
      background: rgba(17,33,55,.62) !important;
    }
    .accordion-button {
      color: var(--text) !important;
      background: transparent !important;
      box-shadow: none !important;
      font-weight: 700;
      padding: 20px 22px;
    }
    .accordion-button::after { filter: invert(1) opacity(.7); }
    .accordion-body { color: var(--muted); padding: 0 22px 21px; font-size: .92rem; }

    .cta-panel {
      position: relative;
      overflow: hidden;
      padding: 56px;
      border-radius: var(--radius-lg);
      border: 1px solid rgba(113,155,255,.28);
      background:
        radial-gradient(circle at 88% 20%, rgba(67,212,232,.23), transparent 20rem),
        linear-gradient(125deg, rgba(53,91,182,.78), rgba(25,37,94,.78));
      box-shadow: var(--shadow);
    }
    .cta-panel h2 { max-width: 650px; font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.2; margin-bottom: 15px; }
    .cta-panel p { max-width: 650px; color: #c8d7ee; margin-bottom: 25px; }

    footer {
      padding: 76px 0 25px;
      background: #050d18;
      border-top: 1px solid rgba(165,193,229,.10);
    }
    .footer-brand { margin-bottom: 20px; }
    .footer-desc { max-width: 410px; color: var(--muted); margin: 18px 0 0; font-size: .92rem; }
    .footer-title { color: #e7effb; font-weight: 700; margin-bottom: 18px; }
    .footer-links { display: grid; gap: 10px; color: var(--muted); font-size: .88rem; }
    .footer-links a:hover { color: #fff; transform: translateX(3px); }
    .footer-bottom {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      flex-wrap: wrap;
      margin-top: 60px;
      padding-top: 22px;
      border-top: 1px solid rgba(165,193,229,.10);
      color: #71829a;
      font-size: .78rem;
    }
    .footer-bottom a { color: #8fa1bb; }
    .footer-bottom a:hover { color: #fff; }

    @media (max-width: 991.98px) {
      .navbar-collapse {
        margin-top: 15px;
        padding: 15px;
        border-radius: 16px;
        background: rgba(11,25,43,.96);
        border: 1px solid var(--line);
      }
      .nav-link { padding: 11px 13px !important; }
      .news-hero { padding-top: 70px; }
      .signal-card { margin-top: 30px; }
    }
    @media (max-width: 767.98px) {
      .section { padding: 74px 0; }
      .news-hero { padding: 60px 0 55px; }
      .news-hero h1 { font-size: clamp(2.5rem, 12vw, 4rem); }
      .hero-statline { gap: 18px; }
      .feature-board, .cta-panel { padding: 25px; }
      .board-heading { display: block; }
      .status-tag { display: inline-flex; margin-top: 16px; }
      .metric-row { grid-template-columns: 1fr; gap: 8px; }
      .metric-value { text-align: left; }
      .article-item { align-items: flex-start; }
      .article-date { flex-basis: 58px; }
    }
    @media (max-width: 519.98px) {
      .container { padding-left: 20px; padding-right: 20px; }
      .hero-actions .btn, .cta-panel .btn { width: 100%; }
      .signal-card { min-height: 350px; padding: 22px; }
      .article-item { gap: 10px; padding: 15px; }
      .article-date { font-size: .7rem; }
      .article-item h3 { font-size: .9rem; }
      .footer-bottom { display: block; }
      .footer-bottom span { display: block; margin-bottom: 9px; }
    }

/* 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}