:root {
            --ink: #031127;
            --ink-2: #071b37;
            --card: #0a203d;
            --gold: #d5a246;
            --gold-2: #f0ca7b;
            --blue: #2f9bea;
            --text: #f5f2e9;
            --muted: #aebbd0;
            --line: rgba(213, 162, 70, .35);
            --max: 1180px;
            --r: 24px
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            background: var(--ink);
            color: var(--text);
            font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
            line-height: 1.65;
            overflow-x: hidden
        }

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

        button {
            font: inherit
        }

        .icon {
            display: block;
            width: 1em;
            height: 1em;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round
        }

        .svg-sprite {
            position: absolute;
            width: 0;
            height: 0;
            overflow: hidden
        }

        .wrap {
            width: min(var(--max), calc(100% - 40px));
            margin: auto
        }

        .eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            min-height: 30px;
            color: var(--gold-2);
            font-size: 20px;
            font-weight: 800;
            line-height: 1.5;
            letter-spacing: .16em
        }

        .eyebrow:before {
            content: "";
            flex: 0 0 32px;
            width: 32px;
            height: 1px;
            background: var(--gold)
        }

        .section {
            padding: 108px 0
        }

        .section-head {
            display: flex;
            justify-content: space-between;
            align-items: flex-end;
            gap: 52px;
            margin-bottom: 48px
        }

        .section-head > div {
            max-width: 720px
        }

        .section-head h2 {
            margin: 14px 0 0;
            color: #f6f2e9;
            font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
            font-size: clamp(38px, 4.1vw, 54px);
            font-weight: 600;
            line-height: 1.16;
            letter-spacing: -.035em
        }

        .section-head p {
            max-width: 460px;
            margin: 0 0 5px;
            color: var(--muted);
            font-size: 15px;
            line-height: 1.85
        }

        .topbar {
            position: fixed;
            inset: 0 0 auto;
            z-index: 50;
            transition: .3s
        }

        .topbar.scrolled {
            background: rgba(3, 17, 39, .88);
            border-bottom: 1px solid rgba(255, 255, 255, .07);
            backdrop-filter: blur(16px)
        }

        .nav {
            height: 78px;
            display: flex;
            align-items: center;
            justify-content: flex-start
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 14px;
            white-space: nowrap
        }

        .brand-logo {
            display: block;
            height: 40px;
            object-fit: contain
        }

        .brand-name {
            color: #f4f0e7;
            font-size: 18px;
            font-weight: 800;
            letter-spacing: .06em
        }

        .nav-links {
            display: flex;
            flex: 0 0 520px;
            margin-left: auto;
            margin-right: 24px;
            justify-content: space-evenly;
            align-items: center;
            color: #c8d1e0;
            font-size: 18px
        }

        .nav-links a {
            flex: 1;
            text-align: center;
            white-space: nowrap
        }

        .nav-links a:hover {
            color: var(--gold-2)
        }

        .nav-cta, .primary {
            border: 0;
            background: linear-gradient(135deg, var(--gold-2), var(--gold));
            color: #172033;
            font-weight: 800;
            padding: 12px 20px;
            border-radius: 999px;
            cursor: pointer;
            box-shadow: 0 10px 30px rgba(213, 162, 70, .18)
        }

        .hero {
            min-height: 820px;
            padding: 150px 0 90px;
            position: relative;
            display: flex;
            align-items: center;
            background: radial-gradient(circle at 78% 36%, rgba(47, 155, 234, .14), transparent 25%), radial-gradient(circle at 68% 65%, rgba(213, 162, 70, .08), transparent 28%), linear-gradient(135deg, #031127 0%, #061b38 100%)
        }

        .hero:after {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .22;
            pointer-events: none;
            background-image: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: linear-gradient(90deg, transparent 15%, #000 75%)
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1.08fr .92fr;
            gap: 70px;
            align-items: center;
            position: relative;
            z-index: 1
        }

        .hero h1 {
            margin: 22px 0 26px;
            color: #f8f4eb;
            font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
            font-size: clamp(56px, 7vw, 86px);
            font-weight: 600;
            line-height: 1.04;
            letter-spacing: -.045em
        }

        .hero h1 span {
            display: block;
            margin-top: 20px;
            color: var(--gold-2);
            font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
            font-size: .42em;
            font-weight: 600;
            line-height: 1.35;
            letter-spacing: .02em
        }

        .hero-desc {
            color: #bac6d7;
            font-size: 18px;
            max-width: 650px
        }

        .hero-actions {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-top: 34px
        }

        .primary {
            padding: 16px 26px
        }

        .ghost {
            padding: 15px 25px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 999px;
            color: #dce4ef
        }

        .hero-proof {
            display: flex;
            gap: 28px;
            margin-top: 52px;
            color: #93a4ba;
            font-size: 13px
        }

        .hero-proof strong {
            display: block;
            color: white;
            font-size: 24px
        }

        .orbit {
            aspect-ratio: 1;
            position: relative;
            display: grid;
            place-items: center
        }

        .orbit:before, .orbit:after {
            content: "";
            position: absolute;
            border: 1px solid rgba(47, 155, 234, .22);
            border-radius: 50%;
            inset: 6%;
            animation: spin 30s linear infinite
        }

        .orbit:after {
            inset: 18%;
            border-color: rgba(213, 162, 70, .3);
            animation-direction: reverse
        }

        .core {
            width: 220px;
            aspect-ratio: 1;
            border-radius: 50%;
            display: grid;
            place-items: center;
            text-align: center;
            background: radial-gradient(circle at 35% 28%, #153d67, #071a35 64%);
            border: 1px solid rgba(213, 162, 70, .65);
            box-shadow: 0 0 80px rgba(47, 155, 234, .16);
            z-index: 2
        }

        .core b {
            display: block;
            font-size: 44px;
            color: var(--gold-2)
        }

        .sat {
            position: absolute;
            padding: 10px 16px;
            border: 1px solid rgba(47, 155, 234, .35);
            border-radius: 12px;
            background: rgba(5, 27, 55, .85);
            color: #c9d9eb;
            font-size: 14px;
            backdrop-filter: blur(8px)
        }

        .s1 {
            top: 10%;
            left: 4%
        }

        .s2 {
            top: 18%;
            right: 0
        }

        .s3 {
            bottom: 14%;
            left: 0
        }

        .s4 {
            bottom: 8%;
            right: 7%
        }

        @keyframes spin {
            to {
                transform: rotate(360deg)
            }
        }

        .intro {
            background: #06162e
        }

        .opc-card {
            display: grid;
            grid-template-columns: 120px 1fr 250px;
            gap: 34px;
            align-items: center;
            padding: 42px;
            border: 1px solid var(--line);
            border-radius: var(--r);
            background: linear-gradient(135deg, rgba(13, 39, 71, .85), rgba(5, 23, 48, .7));
            box-shadow: 0 30px 80px rgba(0, 0, 0, .2)
        }

        .opc-icon {
            width: 100px;
            height: 100px;
            border: 1px solid var(--blue);
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--blue)
        }

        .opc-icon .icon {
            width: 55px;
            height: 55px
        }

        .opc-card h3 {
            font-size: 28px;
            margin: 0 0 8px;
            color: var(--gold-2)
        }

        .opc-card p {
            color: var(--muted);
            margin: 0
        }

        .opc-points {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 20px
        }

        .opc-points span:before {
            content: "•";
            color: var(--gold);
            margin-right: 8px
        }

        .quote {
            font-family: serif;
            color: #e9edf4;
            font-size: 24px;
            padding-left: 30px;
            border-left: 2px solid var(--gold)
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 18px
        }

        .service {
            position: relative;
            min-height: 240px;
            padding: 28px;
            border: 1px solid rgba(213, 162, 70, .28);
            border-radius: 18px;
            background: linear-gradient(155deg, #0a2344, #06172f);
            transition: .3s
        }

        .service:hover {
            transform: translateY(-7px);
            border-color: var(--gold);
            box-shadow: 0 24px 50px rgba(0, 0, 0, .26)
        }

        .service .num {
            position: absolute;
            right: 18px;
            top: 12px;
            font: 42px serif;
            color: rgba(213, 162, 70, .14)
        }

        .service-icon {
            width: 48px;
            height: 48px;
            margin: 20px 0 16px;
            color: var(--blue)
        }

        .service-icon .icon {
            width: 100%;
            height: 100%
        }

        .service h3 {
            color: var(--gold-2);
            margin: 0 0 8px;
            font-size: 21px
        }

        .service p {
            margin: 0;
            color: var(--muted);
            font-size: 14px
        }

        .tools {
            background: linear-gradient(180deg, #06162e, #031127)
        }

        .tool-row {
            display: grid;
            grid-template-columns: 70px 170px 1fr;
            align-items: center;
            min-height: 90px;
            border-top: 1px solid rgba(255, 255, 255, .08);
            transition: .25s
        }

        .tool-row:last-child {
            border-bottom: 1px solid rgba(255, 255, 255, .08)
        }

        .tool-row:hover {
            padding-left: 16px;
            background: rgba(47, 155, 234, .05)
        }

        .tool-icon {
            width: 38px;
            height: 38px;
            color: var(--blue)
        }

        .tool-icon .icon {
            width: 100%;
            height: 100%
        }

        .tool-row h3 {
            color: var(--gold-2);
            font-size: 20px
        }

        .tool-row p {
            color: var(--muted)
        }

        .proof-section {
            padding: 92px 0 108px;
            background: radial-gradient(circle at 50% 0, rgba(47, 155, 234, .06), transparent 38%), #031127;
            border-top: 1px solid rgba(255, 255, 255, .05)
        }

        .stats-block {
            margin: 0
        }

        .stats-title {
            margin: 0 0 22px
        }

        .stats-shell {
            border: 1px solid rgba(213, 162, 70, .72);
            border-radius: 18px;
            overflow: hidden;
            background: linear-gradient(135deg, rgba(8, 31, 60, .9), rgba(4, 20, 43, .88));
            box-shadow: inset 0 0 40px rgba(47, 155, 234, .04)
        }

        .stats {
            display: grid;
            grid-template-columns: repeat(4, 1fr)
        }

        .stat {
            min-height: 140px;
            padding: 25px 22px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 18px;
            border-right: 1px solid rgba(213, 162, 70, .48)
        }

        .stat:last-child {
            border-right: 0
        }

        .stat-icon {
            flex: 0 0 58px;
            width: 58px;
            height: 58px;
            display: grid;
            place-items: center;
            color: var(--blue)
        }

        .stat-icon .icon {
            width: 58px;
            height: 58px;
            stroke-width: 1.65
        }

        .stat-copy strong {
            display: block;
            color: var(--gold-2);
            font-size: 32px;
            line-height: 1.05
        }

        .stat-copy span {
            display: block;
            margin-top: 8px;
            color: #d8b468;
            font-size: 17px
        }

        .stats-foot {
            padding: 14px 20px;
            border-top: 1px solid rgba(213, 162, 70, .55);
            text-align: center;
            color: var(--gold-2);
            font-size: 20px;
            font-weight: 800;
            letter-spacing: .08em
        }

        .plans-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 16px
        }

        .plan {
            padding: 30px 24px;
            border: 1px solid rgba(255, 255, 255, .11);
            border-radius: 18px;
            background: #071a34
        }

        .plan.featured {
            border-color: var(--gold);
            transform: translateY(-12px);
            background: linear-gradient(160deg, #122d4e, #08182e)
        }

        .tag {
            display: inline-block;
            padding: 4px 10px;
            border-radius: 99px;
            background: rgba(213, 162, 70, .14);
            color: var(--gold-2);
            font-size: 12px
        }

        .plan h3 {
            margin: 20px 0 6px
        }

        .price {
            font-size: 34px;
            color: var(--gold-2);
            font-weight: 800
        }

        .price small {
            font-size: 13px;
            color: var(--muted)
        }

        .plan p {
            font-size: 14px;
            color: var(--muted);
            min-height: 48px
        }

        .plan a {
            display: block;
            text-align: center;
            border: 1px solid var(--line);
            border-radius: 99px;
            padding: 10px;
            margin-top: 22px;
            color: var(--gold-2)
        }

        /* OPC 生态图：轨道、节点与核心采用独立动画层 */
        .orbit {
            isolation: isolate;
            overflow: visible
        }

        .orbit:before {
            inset: 2%;
            border: 0;
            background: radial-gradient(circle, rgba(47, 155, 234, .12), transparent 65%);
            filter: blur(12px);
            animation: orbit-breathe 5s ease-in-out infinite
        }

        .orbit:after {
            display: none
        }

        .orbit-ring {
            position: absolute;
            inset: 6%;
            border: 1px solid rgba(47, 155, 234, .32);
            border-radius: 50%;
            pointer-events: none
        }

        .orbit-ring:before, .orbit-ring:after {
            content: "";
            position: absolute;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--blue);
            box-shadow: 0 0 0 5px rgba(47, 155, 234, .12), 0 0 20px rgba(47, 155, 234, .8)
        }

        .orbit-ring:before {
            left: 18%;
            top: 5%
        }

        .orbit-ring:after {
            right: 10%;
            bottom: 20%
        }

        .ring-outer {
            animation: orbit-spin 26s linear infinite
        }

        .ring-inner {
            inset: 18%;
            border-color: rgba(213, 162, 70, .36);
            border-style: dashed;
            animation: orbit-spin 20s linear infinite reverse
        }

        .ring-inner:before, .ring-inner:after {
            background: var(--gold);
            box-shadow: 0 0 0 5px rgba(213, 162, 70, .1), 0 0 18px rgba(213, 162, 70, .75)
        }

        .ring-inner:before {
            left: 68%;
            top: -2%
        }

        .ring-inner:after {
            right: auto;
            left: 5%;
            bottom: 23%
        }

        .core {
            position: relative;
            overflow: hidden;
            animation: core-float 5.5s ease-in-out infinite;
            box-shadow: 0 0 0 10px rgba(213, 162, 70, .025), 0 0 55px rgba(47, 155, 234, .24), inset 0 0 35px rgba(47, 155, 234, .12)
        }

        .core:before {
            display: none
        }

        .core:after {
            content: "";
            position: absolute;
            inset: 1px;
            border-radius: 50%;
            background: radial-gradient(circle at 35% 28%, #153d67, #071a35 66%);
            z-index: -1
        }

        .core > div {
            position: relative;
            z-index: 1
        }

        .core b {
            text-shadow: 0 0 24px rgba(213, 162, 70, .28)
        }

        .sat {
            min-width: 132px;
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 11px 15px;
            border-color: rgba(47, 155, 234, .46);
            background: linear-gradient(135deg, rgba(7, 34, 66, .94), rgba(3, 21, 46, .88));
            box-shadow: 0 12px 30px rgba(0, 0, 0, .22), inset 0 1px rgba(255, 255, 255, .04);
            cursor: default;
            transition: transform .28s ease, border-color .28s ease, color .28s ease, background .28s ease, box-shadow .28s ease;
            z-index: 4;
            outline: none
        }

        .sat .icon {
            width: 21px;
            height: 21px;
            flex: 0 0 21px;
            color: var(--blue);
            transition: color .28s ease, transform .28s ease
        }

        .sat:before {
            content: "";
            position: absolute;
            top: 50%;
            width: 58px;
            height: 1px;
            background: linear-gradient(90deg, rgba(47, 155, 234, .55), transparent);
            pointer-events: none
        }

        .s1:before, .s3:before {
            left: 100%
        }

        .s2:before, .s4:before {
            right: 100%;
            transform: rotate(180deg)
        }

        .sat:hover, .sat:focus-visible {
            transform: translateY(-4px) scale(1.035);
            color: #fff;
            border-color: var(--gold);
            background: linear-gradient(135deg, rgba(13, 49, 85, .98), rgba(5, 27, 55, .96));
            box-shadow: 0 16px 36px rgba(0, 0, 0, .28), 0 0 25px rgba(213, 162, 70, .12)
        }

        .sat:hover .icon, .sat:focus-visible .icon {
            color: var(--gold-2);
            transform: scale(1.12)
        }

        .sat:focus-visible {
            outline: 2px solid var(--gold-2);
            outline-offset: 4px
        }

        .s1 {
            animation: node-float-a 4.8s ease-in-out infinite
        }

        .s2 {
            animation: node-float-b 5.3s ease-in-out infinite .3s
        }

        .s3 {
            animation: node-float-b 5s ease-in-out infinite .6s
        }

        .s4 {
            animation: node-float-a 5.6s ease-in-out infinite .9s
        }

        @keyframes orbit-spin {
            to {
                transform: rotate(360deg)
            }
        }

        @keyframes orbit-breathe {
            50% {
                opacity: .62;
                transform: scale(1.05)
            }
        }

        @keyframes core-float {
            50% {
                transform: translateY(-7px);
                box-shadow: 0 0 0 15px rgba(213, 162, 70, .02), 0 0 75px rgba(47, 155, 234, .32), inset 0 0 40px rgba(47, 155, 234, .16)
            }
        }

        @keyframes node-float-a {
            50% {
                translate: 0 -7px
            }
        }

        @keyframes node-float-b {
            50% {
                translate: 0 7px
            }
        }

        @media (prefers-reduced-motion: reduce) {
            html {
                scroll-behavior: auto
            }

            .orbit:before, .orbit-ring, .core, .core:before, .sat {
                animation: none !important
            }

            .sat {
                transition: none
            }

            .sat:hover, .sat:focus-visible {
                transform: none
            }
        }

        .cta {
            padding: 110px 0
        }

        .cta-box {
            position: relative;
            overflow: hidden;
            text-align: center;
            padding: 80px 24px;
            border: 1px solid var(--line);
            border-radius: 30px;
            background: radial-gradient(circle at 50% 110%, rgba(47, 155, 234, .24), transparent 48%), #081c38
        }

        .cta-box h2 {
            margin: 14px 0 16px;
            color: #f6f2e9;
            font-family: "Noto Serif SC", "Source Han Serif SC", "Songti SC", "STSong", "SimSun", serif;
            font-size: clamp(38px, 5vw, 58px);
            font-weight: 600;
            line-height: 1.16;
            letter-spacing: -.035em
        }

        .cta-box p {
            color: var(--muted);
            margin: 0 auto 30px;
            max-width: 600px
        }

        footer {
            border-top: 1px solid rgba(255, 255, 255, .08);
            padding: 34px 0;
            color: #7f8da1;
            font-size: 13px
        }

        .foot {
            display: flex;
            justify-content: space-between;
            gap: 20px
        }

        @media (max-width: 900px) {
            .nav-links {
                display: none
            }

            .hero {
                min-height: auto
            }

            .hero-grid {
                grid-template-columns: 1fr
            }

            .orbit {
                max-width: 520px;
                width: 100%;
                margin: auto
            }

            .opc-card {
                grid-template-columns: 100px 1fr
            }

            .quote {
                grid-column: 1/-1
            }

            .services-grid, .plans-grid {
                grid-template-columns: repeat(2, 1fr)
            }

            .section-head {
                display: block
            }

            .section-head p {
                margin-top: 18px
            }

            .tool-row {
                grid-template-columns: 60px 140px 1fr
            }

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

            .stat:nth-child(2) {
                border-right: 0
            }

            .stat:nth-child(-n+2) {
                border-bottom: 1px solid rgba(213, 162, 70, .48)
            }
        }

        @media (max-width: 600px) {
            .wrap {
                width: min(100% -28px, var(--max))
            }

            .brand {
                gap: 9px
            }

            .brand-logo {
                width: 122px;
                height: 42px
            }

            .brand-name {
                font-size: 15px;
                letter-spacing: .02em
            }

            .nav-cta {
                display: none
            }

            .hero {
                padding-top: 120px
            }

            .hero h1 {
                font-size: 48px
            }

            .hero-actions {
                align-items: stretch;
                flex-direction: column
            }

            .hero-actions a {
                text-align: center
            }

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

            .hero-proof strong {
                font-size: 18px
            }

            .orbit {
                display: none
            }

            .section {
                padding: 76px 0
            }

            .opc-card {
                grid-template-columns: 1fr;
                padding: 26px
            }

            .opc-icon {
                width: 76px;
                height: 76px
            }

            .opc-points {
                grid-template-columns: 1fr
            }

            .services-grid, .plans-grid {
                grid-template-columns: 1fr
            }

            .plan.featured {
                transform: none
            }

            .tool-row {
                grid-template-columns: 50px 1fr;
                padding: 18px 0
            }

            .tool-row p {
                grid-column: 2
            }

            .proof-section {
                padding: 68px 0 76px
            }

            .stats {
                grid-template-columns: 1fr
            }

            .stat {
                min-height: 108px;
                justify-content: flex-start;
                border-right: 0;
                border-bottom: 1px solid rgba(213, 162, 70, .48) !important
            }

            .stat:last-child {
                border-bottom: 0 !important
            }

            .stat-copy strong {
                font-size: 28px
            }

            .stats-foot {
                font-size: 16px;
                letter-spacing: .03em
            }

            .foot {
                flex-direction: column
            }
        }