:root {
            --ink: #062c32;
            --deep: #031c21;
            --jade: #1f6b67;
            --mint: #72aaa0;
            --gold: #c79a52;
            --gold2: #e8ca91;
            --paper: #f5f1e7;
            --white: #fff;
            --text: #173c3e;
            --muted: #647a79;
            --line: rgba(10, 74, 75, .14);
            --shadow: 0 24px 70px rgba(4, 41, 45, .12)
        }

        * {
            box-sizing: border-box
        }

        html {
            scroll-behavior: smooth
        }

        body {
            margin: 0;
            color: var(--text);
            background: var(--paper);
            font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
            font-size: 16px;
            line-height: 1.75;
            -webkit-font-smoothing: antialiased;
            text-rendering: optimizeLegibility
        }

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

        button {
            font: inherit
        }

        .wrap {
            width: min(1180px, calc(100% - 48px));
            margin: auto
        }

        .serif {
            font-family: "Songti SC", "STSong", "Noto Serif SC", serif
        }

        .eyebrow {
            display: flex;
            align-items: center;
            gap: 12px;
            color: var(--gold);
            font-size: 12px;
            font-weight: 700;
            letter-spacing: .18em;
            text-transform: uppercase
        }

        .eyebrow:before {
            content: "";
            width: 32px;
            height: 1px;
            background: currentColor
        }

        .section {
            padding: 96px 0
        }

        .section-head {
            display: grid;
            grid-template-columns: .9fr 1.1fr;
            gap: 72px;
            align-items: end;
            margin-bottom: 46px
        }

        .section-head h2 {
            margin: 13px 0 0;
            color: var(--ink);
            font-size: clamp(36px, 4vw, 58px);
            font-weight: 500;
            line-height: 1.2;
            letter-spacing: .04em
        }

        .section-head p {
            margin: 0;
            color: var(--muted);
            font-size: 16px;
            line-height: 2
        }

        .topbar {
            position: fixed;
            z-index: 60;
            top: 0;
            left: 0;
            width: 100%;
            border-bottom: 1px solid rgba(255, 255, 255, .14);
            background: rgba(3, 28, 33, .9);
            box-shadow: 0 8px 28px rgba(1, 20, 24, .12);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px)
        }

        .site-nav {
            display: flex;
            align-items: center;
            justify-content: space-between;
            height: 82px;
            color: #fff
        }

        .brand {
            display: flex;
            align-items: center;
            gap: 12px;
            font-weight: 700;
            letter-spacing: .08em
        }

        .brand-mark {
            position: relative;
            width: 27px;
            height: 27px;
            border: 2px solid var(--gold2);
            transform: rotate(45deg)
        }

        .brand-mark:after {
            content: "";
            position: absolute;
            inset: 5px;
            border: 1px solid var(--gold2)
        }

        .brand small {
            display: block;
            color: var(--gold2);
            font-size: 8px;
            font-weight: 500;
            letter-spacing: .28em
        }

        .links {
            display: flex;
            align-items: center;
            gap: 30px;
            color: rgba(255, 255, 255, .78);
            font-size: 13px
        }

        .links a:hover {
            color: var(--gold2)
        }

        .nav-cta {
            padding: 10px 18px;
            border: 1px solid rgba(232, 202, 145, .7);
            color: var(--gold2) !important
        }

        .hero {
            position: relative;
            min-height: 850px;
            overflow: hidden;
            color: #fff;
            background: radial-gradient(circle at 70% 40%, rgba(65, 139, 131, .52), transparent 32%), linear-gradient(125deg, #031b21 5%, #07373c 54%, #0c5050)
        }

        .hero:before {
            content: "";
            position: absolute;
            inset: 0;
            opacity: .22;
            background-image: linear-gradient(rgba(255, 255, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .06) 1px, transparent 1px);
            background-size: 60px 60px;
            mask-image: linear-gradient(90deg, #000, transparent)
        }

        .hero:after {
            content: "";
            position: absolute;
            left: -10%;
            right: -10%;
            bottom: -150px;
            height: 260px;
            background: var(--paper);
            border-radius: 50% 50% 0 0/34% 34% 0 0
        }

        .hero-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 30px;
            align-items: center;
            min-height: 780px;
            padding-top: 90px
        }

        .hero-copy {
            padding-bottom: 30px
        }

        .hero-kicker {
            margin-bottom: 24px;
            color: var(--gold2);
            font-size: 13px;
            letter-spacing: .22em
        }

        .hero h1 {
            margin: 0 0 26px;
            font-size: clamp(38px, 4.1vw, 52px);
            font-weight: 500;
            line-height: 1.12;
            letter-spacing: .035em
        }

        .hero h1 span {
            display: block;
            margin-top: 14px;
            color: var(--gold2);
            font-size: .42em;
            letter-spacing: .1em
        }

        .hero-desc {
            max-width: 630px;
            margin: 0;
            color: rgba(255, 255, 255, .76);
            font-size: 17px;
            line-height: 2
        }

        .hero-desc strong {
            color: #fff;
            font-weight: 500
        }

        .actions {
            display: flex;
            gap: 14px;
            margin-top: 38px
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            min-height: 50px;
            padding: 0 25px;
            border: 1px solid transparent;
            transition: .25s
        }

        .btn-primary {
            background: var(--gold2);
            color: var(--deep)
        }

        .btn-primary:hover {
            background: #f4dda9;
            transform: translateY(-2px)
        }

        .btn-ghost {
            border-color: rgba(255, 255, 255, .4);
            color: #fff
        }

        .btn-ghost:hover {
            border-color: #fff;
            background: rgba(255, 255, 255, .07)
        }

        .hero-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 9px;
            margin-top: 34px
        }

        .hero-tags span {
            padding: 7px 12px;
            border: 1px solid rgba(255, 255, 255, .18);
            border-radius: 99px;
            color: rgba(255, 255, 255, .66);
            font-size: 11px
        }

        .hero-visual {
            position: relative;
            align-self: end;
            margin-bottom: 80px
        }

        .hero-visual img {
            display: block;
            width: 124%;
            max-width: none;
            margin-left: -12%;
            filter: drop-shadow(0 36px 42px rgba(0, 0, 0, .25))
        }

        .orbit {
            position: absolute;
            border: 1px solid rgba(232, 202, 145, .35);
            border-radius: 50%
        }

        .orbit.one {
            inset: 12% 3% 18% 12%;
            animation: spin 25s linear infinite
        }

        .orbit.two {
            inset: 22% 14% 10% 1%;
            animation: spin 18s linear infinite reverse
        }

        .orbit i {
            position: absolute;
            top: -5px;
            left: 50%;
            width: 9px;
            height: 9px;
            border-radius: 50%;
            background: var(--gold2);
            box-shadow: 0 0 20px var(--gold2)
        }

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

        .intro {
            position: relative;
            z-index: 3;
            padding: 32px 0 105px
        }

        .statement {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 54px;
            align-items: start
        }

        .statement-no {
            color: var(--gold);
            font: italic 54px Georgia, serif
        }

        .statement blockquote {
            margin: 0;
            color: var(--ink);
            font-size: clamp(25px, 3vw, 40px);
            font-weight: 500;
            line-height: 1.65
        }

        .statement blockquote em {
            color: var(--gold);
            font-style: normal
        }

        .statement p {
            max-width: 800px;
            margin: 28px 0 0;
            color: var(--muted)
        }

        .timeline-section {
            color: #fff;
            background: var(--ink)
        }

        .timeline-section .section-head h2 {
            color: #fff
        }

        .timeline-section .section-head p {
            color: rgba(255, 255, 255, .6)
        }

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

        .timeline:before {
            content: "";
            position: absolute;
            z-index: 2;
            top: 42px;
            left: 12%;
            right: 12%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--gold2), transparent)
        }

        .time-item {
            position: relative;
            min-height: 330px;
            padding: 76px 28px 30px;
            background: var(--ink);
            transition: .3s
        }

        .time-item:hover {
            background: #0b4145
        }

        .time-dot {
            position: absolute;
            z-index: 3;
            top: 35px;
            left: 28px;
            width: 14px;
            height: 14px;
            border: 3px solid var(--ink);
            border-radius: 50%;
            background: var(--gold2);
            box-shadow: 0 0 0 1px var(--gold2)
        }

        .time-era {
            color: var(--gold2);
            font: 12px Georgia, serif;
            letter-spacing: .16em
        }

        .time-item h3 {
            margin: 13px 0 12px;
            font-size: 25px;
            font-weight: 500
        }

        .time-item strong {
            display: block;
            margin-bottom: 15px;
            color: #fff;
            font-size: 14px
        }

        .time-item p {
            margin: 0;
            color: rgba(255, 255, 255, .58);
            font-size: 13px;
            line-height: 1.9
        }

        .components {
            background: #f7f4ed
        }

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

        .component-card {
            position: relative;
            display: block;
            min-height: 316px;
            padding: 32px;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: 0 0 0 rgba(0, 0, 0, 0);
            cursor: pointer;
            transition: border-color .3s, box-shadow .3s, transform .3s
        }

        .component-card:hover {
            z-index: 2;
            border-color: rgba(199, 154, 82, .6);
            box-shadow: var(--shadow);
            transform: translateY(-7px)
        }

        .component-card:focus-visible {
            outline: 2px solid var(--gold);
            outline-offset: 4px;
            box-shadow: var(--shadow)
        }

        .component-card:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--gold), transparent);
            transform: scaleX(0);
            transform-origin: left;
            transition: .35s
        }

        .component-card:hover:before {
            transform: scaleX(1)
        }

        .card-top {
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .icon {
            display: grid;
            place-items: center;
            width: 66px;
            height: 66px;
            border-radius: 50%;
            background: #edf5f2;
            transition: .3s
        }

        .icon img {
            display: block;
            width: 44px;
            height: 44px
        }

        .component-card:hover .icon {
            background: #fff8eb;
            box-shadow: 0 0 0 7px rgba(199, 154, 82, .08);
            transform: rotate(-4deg) scale(1.06)
        }

        .card-no {
            color: #d8c49d;
            font: 22px Georgia, serif
        }

        .component-card h3 {
            margin: 27px 0 7px;
            color: var(--ink);
            font-size: 22px
        }

        .component-card .subtitle {
            color: var(--gold);
            font-size: 13px;
            font-weight: 700
        }

        .component-card p {
            margin: 18px 0 0;
            color: var(--muted);
            font-size: 14px;
            line-height: 1.9
        }

        .flow {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            margin-top: 45px;
            color: var(--jade);
            font-size: 13px;
            letter-spacing: .05em
        }

        .flow i {
            width: 28px;
            height: 1px;
            background: var(--gold)
        }

        .capability {
            background: #fff
        }

        .cap-grid {
            display: grid;
            grid-template-columns: .92fr 1.08fr;
            gap: 80px;
            align-items: center
        }

        .cap-image {
            position: relative;
            padding: 32px;
            border: 1px solid var(--line);
            background: linear-gradient(145deg, #f2f8f6, #fff);
            box-shadow: var(--shadow)
        }

        .cap-image img {
            display: block;
            width: 100%;
            mix-blend-mode: multiply
        }

        .cap-image:after {
            content: "AI";
            position: absolute;
            right: 25px;
            bottom: 8px;
            color: rgba(31, 107, 103, .08);
            font: 170px/1 Georgia, serif
        }

        .cap-copy h2 {
            margin: 16px 0 24px;
            color: var(--ink);
            font-size: clamp(38px, 4vw, 58px);
            font-weight: 500;
            line-height: 1.2
        }

        .cap-copy > p {
            color: var(--muted);
            line-height: 2
        }

        .service-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin: 28px 0 0
        }

        .service-tags span {
            padding: 9px 14px;
            border: 1px solid var(--line);
            border-radius: 99px;
            background: #f7f4ed;
            color: var(--jade);
            font-size: 13px
        }

        .service-note {
            margin-top: 24px;
            padding: 18px 20px;
            border-left: 2px solid var(--gold);
            background: #f7f4ed;
            color: var(--muted);
            font-size: 14px
        }

        .service-note strong {
            display: block;
            margin-bottom: 4px;
            color: var(--ink);
            font-size: 16px
        }

        .values {
            color: #fff;
            background: linear-gradient(140deg, #031b21, #0b4749)
        }

        .values .section-head h2 {
            color: #fff
        }

        .values .section-head p {
            color: rgba(255, 255, 255, .6)
        }

        .value-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            border: 1px solid rgba(255, 255, 255, .14)
        }

        .value-item {
            position: relative;
            min-height: 260px;
            padding: 28px 22px;
            border-right: 1px solid rgba(255, 255, 255, .14)
        }

        .value-item:last-child {
            border: 0
        }

        .value-item span {
            color: var(--gold2);
            font: 26px Georgia, serif
        }

        .value-item h3 {
            margin: 42px 0 10px;
            font-size: 19px;
            font-weight: 500
        }

        .value-item p {
            margin: 0;
            color: rgba(255, 255, 255, .56);
            font-size: 13px
        }

        .value-arrow {
            position: absolute;
            right: -11px;
            top: 50%;
            z-index: 2;
            display: grid;
            place-items: center;
            width: 22px;
            height: 22px;
            border-radius: 50%;
            background: var(--gold2);
            color: var(--ink);
            font-size: 12px
        }

        .value-item:last-child .value-arrow {
            display: none
        }

        .network {
            overflow: hidden;
            background: #f7f4ed
        }

        .network-grid {
            display: grid;
            grid-template-columns: 1.1fr .9fr;
            gap: 70px;
            align-items: center
        }

        .network-copy h2 {
            margin: 16px 0 26px;
            color: var(--ink);
            font-size: clamp(38px, 4vw, 58px);
            font-weight: 500;
            line-height: 1.25
        }

        .network-copy p {
            color: var(--muted);
            line-height: 2
        }

        .dual {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-top: 30px
        }

        .dual article {
            padding: 22px;
            border: 1px solid var(--line);
            background: #fff
        }

        .dual b {
            color: var(--gold);
            font-size: 12px;
            letter-spacing: .12em
        }

        .dual h3 {
            margin: 8px 0;
            color: var(--ink)
        }

        .dual p {
            margin: 0;
            font-size: 13px
        }

        .city-panel {
            padding: 30px;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: var(--shadow)
        }

        .city-panel-head {
            display: flex;
            align-items: end;
            justify-content: space-between;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--line)
        }

        .city-panel-head strong {
            color: var(--ink);
            font-size: 22px
        }

        .city-panel-head span {
            color: var(--gold);
            font: 13px Georgia, serif;
            letter-spacing: .12em
        }

        .city-list {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            margin-top: 22px
        }

        .city-name {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 11px 12px;
            background: #f7f4ed;
            color: var(--ink);
            font-size: 14px;
            transition: .25s
        }

        .city-name:before {
            content: "";
            width: 8px;
            height: 8px;
            border-radius: 2px;
            background: var(--jade);
            box-shadow: 0 0 0 4px rgba(31, 107, 103, .08)
        }

        .city-name:hover {
            color: #fff;
            background: var(--jade);
            transform: translateY(-2px)
        }

        .city-more {
            grid-column: 1/-1;
            margin-top: 5px;
            padding-top: 16px;
            border-top: 1px dashed var(--line);
            color: var(--muted);
            font-size: 12px;
            text-align: center
        }

        .visit {
            position: relative;
            overflow: hidden;
            padding: 110px 0;
            color: #fff;
            background: linear-gradient(90deg, rgba(3, 28, 33, .95), rgba(3, 28, 33, .72)), url('assets/mockup/bottom-banner.png') center/cover
        }

        .visit:after {
            content: "水";
            position: absolute;
            right: 5%;
            top: -30%;
            color: rgba(255, 255, 255, .04);
            font: 480px serif
        }

        .visit-inner {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr auto;
            gap: 50px;
            align-items: center
        }

        .visit h2 {
            margin: 13px 0 18px;
            font-size: clamp(38px, 4.4vw, 62px);
            font-weight: 500
        }

        .visit p {
            max-width: 720px;
            margin: 0;
            color: rgba(255, 255, 255, .66)
        }

        .visit-actions {
            display: flex;
            flex-direction: column;
            gap: 12px;
            min-width: 200px
        }

        footer {
            padding: 32px 0;
            color: #82908d;
            background: #02171b;
            font-size: 12px
        }

        .footer-inner {
            display: flex;
            align-items: center;
            justify-content: space-between
        }

        .footer-slogan {
            color: var(--gold2);
            letter-spacing: .18em
        }

        .site-nav {
            padding: 0
        }

        .nav-toggle {
            display: none;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            padding: 0;
            border: 1px solid rgba(255, 255, 255, .35);
            border-radius: 2px;
            background: transparent;
            color: #fff;
            cursor: pointer
        }

        .nav-toggle span {
            position: absolute;
            width: 20px;
            height: 1.5px;
            border-radius: 2px;
            background: currentColor;
            transition: transform .28s ease, opacity .2s ease
        }

        .nav-toggle span:nth-child(1) { transform: translateY(-6px) }
        .nav-toggle span:nth-child(3) { transform: translateY(6px) }
        .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) }
        .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
        .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) }

        .nav-toggle:focus-visible {
            outline: 2px solid var(--gold2);
            outline-offset: 3px
        }

        .nav-collapse {
            display: flex;
            justify-content: flex-end
        }

        .drawer-head, .nav-backdrop { display: none }

        .reveal {
            opacity: 0;
            transform: translateY(24px);
            transition: .7s
        }

        .reveal.show {
            opacity: 1;
            transform: none
        }

        @media (max-width: 960px) {
            .site-nav {
                height: 74px;
                min-height: 74px;
                flex-wrap: nowrap
            }

            .nav-toggle {
                position: relative;
                z-index: 52;
                display: flex;
                flex: 0 0 44px
            }

            .nav-collapse {
                position: fixed;
                z-index: 50;
                top: 0;
                right: 0;
                display: flex;
                flex-direction: column;
                width: min(84vw, 380px);
                height: 100vh;
                height: 100dvh;
                max-height: 100dvh;
                padding: 28px 24px max(22px, env(safe-area-inset-bottom));
                overflow-y: auto;
                overscroll-behavior: contain;
                background: linear-gradient(165deg, #052f35, #021b20);
                box-shadow: -24px 0 60px rgba(0, 0, 0, .28);
                visibility: hidden;
                transform: translateX(105%);
                transition: transform .34s cubic-bezier(.22,.75,.2,1), visibility .34s
            }

            .nav-collapse.open {
                visibility: visible;
                transform: translateX(0)
            }

            .drawer-head {
                display: block;
                flex: 0 0 auto;
                min-height: 48px;
                padding-right: 54px;
                border-bottom: 1px solid rgba(255,255,255,.13);
                color: var(--gold2);
                font-size: 12px;
                letter-spacing: .18em
            }

            .links {
                display: flex;
                flex: 1 0 auto;
                flex-direction: column;
                align-items: flex-start;
                gap: 0;
                min-height: 0;
                padding-top: 14px;
                font-size: 16px
            }

            .links a {
                display: block;
                width: 100%;
                flex: 0 0 auto;
                padding: 14px 2px;
                border-bottom: 1px solid rgba(255,255,255,.1);
                color: rgba(255,255,255,.84)
            }

            .nav-cta {
                width: 100% !important;
                margin-top: auto;
                padding: 13px 18px !important;
                border-color: var(--gold2) !important;
                text-align: center
            }

            .nav-backdrop {
                position: fixed;
                z-index: 40;
                inset: 0;
                display: block;
                background: rgba(1,17,20,.62);
                opacity: 0;
                visibility: hidden;
                backdrop-filter: blur(3px);
                transition: opacity .3s ease, visibility .3s
            }

            .nav-backdrop.open {
                opacity: 1;
                visibility: visible
            }

            body.nav-open { overflow: hidden }

            body.nav-open .nav-toggle {
                position: fixed;
                top: 15px;
                right: 20px;
                border-color: rgba(232,202,145,.5)
            }

            .hero-grid {
                grid-template-columns: 1fr;
                padding-top: 150px
            }

            .hero {
                min-height: auto
            }

            .hero-visual {
                margin: 0 auto 100px
            }

            .hero-visual img {
                width: 110%;
                margin-left: -5%
            }

            .section-head, .cap-grid, .network-grid {
                grid-template-columns: 1fr;
                gap: 32px
            }

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

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

            .timeline:before {
                display: none
            }

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

            .value-item {
                border-bottom: 1px solid rgba(255, 255, 255, .14)
            }

            .value-arrow {
                display: none
            }

            .visit-inner {
                grid-template-columns: 1fr
            }

            .visit-actions {
                flex-direction: row
            }

            .statement {
                grid-template-columns: 90px 1fr
            }
        }

        @media (max-width: 960px) and (max-height: 560px) {
            .nav-collapse { padding-top: 18px }
            .drawer-head { min-height: 38px }
            .links { padding-top: 6px }
            .links a { padding: 10px 2px }
            .nav-cta { margin-top: 10px }
        }

        @media (max-width: 640px) {
            .wrap {
                width: min(100% -32px, 1180px)
            }

            .hero-grid {
                padding-top: 125px
            }

            .hero-copy {
                padding: 0
            }

            .hero h1 {
                font-size: 48px
            }

            .hero h1 span {
                font-size: .38em;
                line-height: 1.5
            }

            .hero-desc {
                font-size: 15px
            }

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

            .hero-visual {
                margin-bottom: 80px
            }

            .hero-visual img {
                width: 130%;
                margin-left: -15%
            }

            .section {
                padding: 78px 0
            }

            .intro {
                padding-bottom: 78px
            }

            .statement {
                grid-template-columns: 1fr;
                gap: 10px
            }

            .component-grid, .timeline, .value-grid, .dual {
                grid-template-columns: 1fr
            }

            .city-list {
                grid-template-columns: 1fr 1fr
            }

            .time-item {
                min-height: auto
            }

            .component-card {
                min-height: auto
            }

            .flow {
                flex-wrap: wrap
            }

            .value-item {
                min-height: auto
            }

            .visit-actions {
                flex-direction: column
            }

            .footer-inner {
                display: block
            }

            .footer-slogan {
                margin-top: 8px
            }
        }

        .timeline:before {
            transform: scaleX(0);
            transform-origin: left;
            transition: 2s
        }

        .timeline.lit:before {
            transform: scaleX(1)
        }

        .time-item {
            opacity: .35;
            transform: translateY(18px);
            transition: .65s
        }

        .time-item.active {
            opacity: 1;
            transform: none;
            background: #0b4145
        }

        .time-item .time-dot {
            background: #536b6c;
            box-shadow: 0 0 0 1px rgba(232, 202, 145, .25);
            transition: .4s
        }

        .time-item.active .time-dot {
            background: var(--gold2);
            box-shadow: 0 0 0 1px var(--gold2), 0 0 20px rgba(232, 202, 145, .7)
        }

        .carriers {
            background: #efe9dc
        }

        .carrier-shell {
            display: grid;
            grid-template-columns: 300px 1fr;
            min-height: 390px;
            border: 1px solid var(--line);
            background: #fff;
            box-shadow: var(--shadow)
        }

        .carrier-nav {
            padding: 28px;
            background: var(--ink)
        }

        .carrier-nav h3 {
            margin: 0 0 22px;
            color: #fff;
            font-size: 22px
        }

        .carrier-tab {
            display: block;
            width: 100%;
            margin: 8px 0;
            padding: 16px;
            border: 0;
            border-left: 2px solid transparent;
            background: rgba(255, 255, 255, .05);
            color: rgba(255, 255, 255, .65);
            text-align: left;
            cursor: pointer;
            transition: .25s
        }

        .carrier-tab.active, .carrier-tab:hover {
            border-left-color: var(--gold2);
            background: rgba(232, 202, 145, .12);
            color: #fff
        }

        .carrier-stage {
            position: relative;
            min-height: 390px;
            overflow: hidden
        }

        .carrier-panel {
            position: absolute;
            inset: 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 35px;
            align-items: center;
            padding: 46px;
            opacity: 0;
            pointer-events: none;
            transform: translateX(24px);
            transition: .45s
        }

        .carrier-panel.active {
            opacity: 1;
            pointer-events: auto;
            transform: none
        }

        .carrier-art {
            position: relative;
            display: grid;
            place-items: center;
            aspect-ratio: 1.35;
            overflow: hidden;
            background: linear-gradient(145deg, #dfece7, #faf8f3)
        }

        .carrier-art img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        .coin-art:before, .coin-art:after {
            content: "";
            position: absolute;
            border: 1px solid var(--gold);
            border-radius: 50%
        }

        .coin-art:before {
            width: 150px;
            height: 150px;
            box-shadow: inset 0 0 0 18px rgba(199, 154, 82, .12), 0 18px 40px rgba(99, 72, 30, .16)
        }

        .coin-art:after {
            width: 62px;
            height: 62px;
            border-radius: 8px;
            transform: rotate(45deg)
        }

        .carrier-copy small {
            color: var(--gold);
            letter-spacing: .14em
        }

        .carrier-copy h3 {
            margin: 9px 0 15px;
            color: var(--ink);
            font-size: 28px
        }

        .carrier-copy p {
            margin: 0;
            color: var(--muted)
        }

        .ai-network {
            position: relative;
            min-height: 420px;
            overflow: hidden;
            border: 1px solid var(--line);
            background: radial-gradient(circle at center, #f9fcfb 0 12%, #e4f0ec 13% 14%, transparent 15%), repeating-radial-gradient(circle at center, rgba(31, 107, 103, .14) 0 1px, transparent 2px 58px);
            box-shadow: var(--shadow)
        }

        .ai-network:before, .ai-network:after {
            content: "";
            position: absolute;
            left: 50%;
            top: 50%;
            width: 70%;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--jade), transparent);
            transform-origin: center
        }

        .ai-network:after {
            transform: rotate(90deg)
        }

        .ai-core {
            position: absolute;
            z-index: 3;
            left: 50%;
            top: 50%;
            display: grid;
            place-items: center;
            width: 116px;
            height: 116px;
            border-radius: 50%;
            background: var(--ink);
            color: #fff;
            text-align: center;
            transform: translate(-50%, -50%);
            box-shadow: 0 18px 45px rgba(6, 44, 50, .28)
        }

        .ai-core strong {
            display: block;
            color: var(--gold2);
            font-size: 21px
        }

        .resource-node {
            position: absolute;
            z-index: 2;
            padding: 10px 16px;
            border: 1px solid var(--line);
            border-radius: 99px;
            background: #fff;
            color: var(--jade);
            font-size: 13px;
            line-height: 1.4;
            white-space: nowrap;
            box-shadow: 0 8px 24px rgba(4, 41, 45, .09)
        }

        .n1 {
            left: 8%;
            top: 18%
        }

        .n2 {
            right: 8%;
            top: 20%
        }

        .n3 {
            left: 6%;
            bottom: 19%
        }

        .n4 {
            right: 7%;
            bottom: 18%
        }

        .n5 {
            left: 42%;
            top: 7%
        }

        .need-dot {
            position: absolute;
            z-index: 5;
            left: 12%;
            top: 22%;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--gold);
            box-shadow: 0 0 0 6px rgba(199, 154, 82, .2);
            animation: find-match 6s ease-in-out infinite
        }

        @keyframes find-match {
            0% {
                left: 12%;
                top: 22%
            }
            38% {
                left: 49%;
                top: 49%;
                transform: scale(1)
            }
            70% {
                left: 83%;
                top: 24%;
                transform: scale(1)
            }
            85%, 100% {
                left: 83%;
                top: 24%;
                transform: scale(1.5);
                box-shadow: 0 0 0 12px rgba(199, 154, 82, 0)
            }
        }

        .city-name {
            opacity: 0;
            transform: translate(-40px, 12px)
        }

        .city-panel.active .city-name {
            animation: city-spread .55s ease forwards
        }

        .city-panel.active .city-name:nth-child(2) {
            animation-delay: .08s
        }

        .city-panel.active .city-name:nth-child(3) {
            animation-delay: .16s
        }

        .city-panel.active .city-name:nth-child(4) {
            animation-delay: .24s
        }

        .city-panel.active .city-name:nth-child(5) {
            animation-delay: .32s
        }

        .city-panel.active .city-name:nth-child(6) {
            animation-delay: .4s
        }

        .city-panel.active .city-name:nth-child(7) {
            animation-delay: .48s
        }

        .city-panel.active .city-name:nth-child(8) {
            animation-delay: .56s
        }

        .city-panel.active .city-name:nth-child(9) {
            animation-delay: .64s
        }

        .city-panel.active .city-name:nth-child(10) {
            animation-delay: .72s
        }

        .city-panel.active .city-name:nth-child(n+11) {
            animation-delay: .8s
        }

        @keyframes city-spread {
            to {
                opacity: 1;
                transform: none
            }
        }

        .visit {
            background: linear-gradient(120deg, #031c21, #0b4a4b)
        }

        .brand-logo {
            display: block;
            width: 238px;
            height: auto
        }

        .brand-mark {
            display: none
        }

        .brand-full {
            gap: 0;
            margin-right: 28px;
            padding: 0
        }

        .brand-full:hover {
            opacity: .92
        }

        .hero-grid {
            gap: 24px;
            min-height: 820px;
            padding-top: 100px
        }

        .hero-kicker {
            margin-bottom: 22px
        }

        .hero h1 {
            margin-bottom: 24px
        }

        .hero-desc {
            max-width: 650px;
            font-size: 16px
        }

        .hero-desc strong {
            font-weight: 600
        }

        .hero-quote {
            max-width: 650px;
            margin: 18px 0 0;
            padding: 14px 18px;
            border-left: 2px solid var(--gold2);
            background: rgba(255, 255, 255, .045);
            color: rgba(255, 255, 255, .68);
            font-family: "Songti SC", "STSong", serif;
            font-size: 14px;
            font-style: italic;
            line-height: 1.9
        }

        .hero-quote strong {
            color: var(--gold2);
            font-weight: 600
        }

        .hero .actions {
            margin-top: 30px
        }

        .hero-tags {
            margin-top: 27px
        }

        .hero .water-lines {
            display: none
        }

        .hero-visual {
            align-self: center;
            margin: 34px 0 0;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .hero-visual img {
            width: 116%;
            margin-left: 0;
            transform: translateX(3%)
        }

        .intro .statement {
            grid-template-columns: 1fr
        }

        .ai-network {
            border: 0;
            background: radial-gradient(circle at center, rgba(255, 255, 255, .98) 0 13%, rgba(223, 239, 234, .72) 14% 14.5%, transparent 15%), repeating-radial-gradient(circle at center, rgba(31, 107, 103, .13) 0 1px, transparent 2px 68px);
            box-shadow: none
        }

        .ai-network:before, .ai-network:after {
            opacity: .62
        }

        .resource-node {
            border-color: rgba(31, 107, 103, .12);
            box-shadow: 0 10px 28px rgba(4, 41, 45, .08)
        }

        .ai-network.orbit-mode {
            --mouse-x: 50%;
            --mouse-y: 50%;
            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), rgba(232, 202, 145, .16), transparent 24%), radial-gradient(circle at center, rgba(255, 255, 255, .98) 0 13%, rgba(223, 239, 234, .72) 14% 14.5%, transparent 15%), repeating-radial-gradient(circle at center, rgba(31, 107, 103, .13) 0 1px, transparent 2px 68px);
            transition: background .2s
        }

        .ai-network.orbit-mode:before, .ai-network.orbit-mode:after {
            display: none
        }

        .orbit-mode .ai-core {
            transform: translate(calc(-50% + var(--core-x, 0px)), calc(-50% + var(--core-y, 0px)));
            transition: transform .18s ease, box-shadow .25s
        }

        .orbit-mode:hover .ai-core {
            box-shadow: 0 22px 54px rgba(6, 44, 50, .35), 0 0 0 12px rgba(199, 154, 82, .06)
        }

        .orbit-mode .resource-node {
            left: 50%;
            top: 50%;
            cursor: pointer;
            will-change: left, top, transform;
            transform: translate(-50%, -50%);
            transition: transform .22s, color .22s, background .22s, box-shadow .22s, border-color .22s
        }

        .orbit-mode .resource-node:hover {
            z-index: 8;
            border-color: rgba(199, 154, 82, .7);
            background: var(--ink);
            color: var(--gold2);
            box-shadow: 0 7px 18px rgba(6, 44, 50, .18), 0 0 0 2px rgba(199, 154, 82, .12);
            transform: translate(-50%, -50%) scale(1.04)
        }

        .orbit-mode .resource-node:after {
            content: "";
            position: absolute;
            inset: -2px;
            border: 1px solid transparent;
            border-radius: 99px;
            transition: .22s
        }

        .orbit-mode .resource-node:hover:after {
            border-color: rgba(199, 154, 82, .18)
        }

        .orbit-mode .need-dot {
            display: none
        }

        .value-grid {
            gap: 28px;
            border: 0
        }

        .value-item, .value-item:last-child {
            overflow: visible;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .018)
        }

        .value-item:after {
            content: "";
            position: absolute;
            z-index: 1;
            right: -28px;
            top: 50%;
            width: 28px;
            height: 1px;
            background: linear-gradient(90deg, rgba(232, 202, 145, .2), var(--gold2))
        }

        .value-item:last-child:after {
            display: none
        }

        .value-arrow {
            right: -32px;
            width: 36px;
            height: 36px;
            border: 6px solid #0a393d;
            box-shadow: 0 0 0 1px rgba(232, 202, 145, .35);
            animation: flow-pulse 2s ease-in-out infinite
        }

        .value-item:nth-child(2) .value-arrow {
            animation-delay: .3s
        }

        .value-item:nth-child(3) .value-arrow {
            animation-delay: .6s
        }

        .value-item:nth-child(4) .value-arrow {
            animation-delay: .9s
        }

        @keyframes flow-pulse {
            50% {
                box-shadow: 0 0 0 8px rgba(232, 202, 145, 0);
                transform: translateX(3px)
            }
        }

        .value-grid {
            gap: 18px
        }

        .value-item, .value-item:last-child {
            overflow: hidden;
            padding: 31px 27px;
            border: 1px solid rgba(255, 255, 255, .14);
            background: rgba(255, 255, 255, .018);
            transition: .35s
        }

        .value-item:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient(90deg, var(--gold2), rgba(232, 202, 145, .08));
            transform: scaleX(0);
            transform-origin: left;
            transition: .55s
        }

        .value-item:hover {
            border-color: rgba(232, 202, 145, .42);
            background: rgba(255, 255, 255, .045);
            transform: translateY(-7px)
        }

        .value-item:hover:before {
            transform: scaleX(1)
        }

        .value-item:after, .value-arrow {
            display: none !important
        }

        .value-item h3 {
            margin-top: 38px
        }

        .city-map {
            position: relative;
            min-height: 540px;
            overflow: visible;
            background: transparent
        }

        .city-map:before {
            content: "";
            position: absolute;
            inset: 12%;
            opacity: .34;
            background: radial-gradient(circle at center, rgba(255, 255, 255, .9), transparent 63%);
            filter: blur(16px)
        }

        .city-map canvas {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%
        }

        .map-hub {
            position: absolute;
            z-index: 4;
            left: 50%;
            top: 50%;
            display: grid;
            place-items: center;
            width: 112px;
            height: 112px;
            border: 1px solid var(--gold2);
            border-radius: 50%;
            background: var(--ink);
            color: #fff;
            text-align: center;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 0 10px rgba(6, 44, 50, .06), 0 18px 42px rgba(6, 44, 50, .2)
        }

        .map-hub:before, .map-hub:after {
            content: "";
            position: absolute;
            inset: -22px;
            border: 1px solid rgba(199, 154, 82, .32);
            border-radius: 50%;
            animation: hub-wave 2.8s ease-out infinite
        }

        .map-hub:after {
            animation-delay: 1.4s
        }

        .map-hub strong {
            display: block;
            color: var(--gold2);
            font-size: 23px
        }

        .map-city {
            position: absolute;
            z-index: 3;
            left: var(--x);
            top: var(--y);
            display: flex;
            align-items: center;
            gap: 6px;
            padding: 6px 10px;
            border: 1px solid rgba(31, 107, 103, .12);
            border-radius: 99px;
            background: rgba(255, 255, 255, .78);
            color: var(--ink);
            font-size: 12px;
            white-space: nowrap;
            opacity: 0;
            transform: translate(-50%, -50%) scale(.7);
            transition: .5s;
            backdrop-filter: blur(4px)
        }

        .map-city:before {
            content: "";
            width: 7px;
            height: 7px;
            border-radius: 50%;
            background: var(--gold);
            box-shadow: 0 0 0 4px rgba(199, 154, 82, .12)
        }

        .city-map.active .map-city {
            opacity: 1;
            transform: translate(-50%, -50%) scale(1)
        }

        .city-map.active .map-city:nth-of-type(3n) {
            transition-delay: .2s
        }

        .city-map.active .map-city:nth-of-type(3n+1) {
            transition-delay: .4s
        }

        @keyframes hub-wave {
            0% {
                opacity: .7;
                transform: scale(.75)
            }
            100% {
                opacity: 0;
                transform: scale(1.35)
            }
        }

        @media (max-width: 960px) {
            .carrier-shell {
                grid-template-columns: 1fr
            }

            .carrier-nav {
                display: flex;
                flex-wrap: wrap;
                gap: 8px
            }

            .carrier-nav h3 {
                width: 100%
            }

            .carrier-tab {
                width: auto;
                flex: 1;
                margin: 0
            }

            .carrier-stage {
                min-height: 540px
            }

            .value-item:after, .value-arrow {
                display: none
            }
        }

        @media (max-width: 640px) {
            .brand-logo {
                width: 195px
            }

            .carrier-panel {
                grid-template-columns: 1fr;
                padding: 25px
            }

            .carrier-stage {
                min-height: 600px
            }

            .ai-network {
                min-height: 360px
            }

            .resource-node {
                font-size: 11px
            }

            .city-map {
                min-height: 520px
            }

            .map-city {
                font-size: 10px;
                padding: 5px 7px
            }

            .map-hub {
                width: 88px;
                height: 88px
            }

            .map-hub strong {
                font-size: 19px
            }

            .value-item:after, .value-arrow {
                display: none
            }
        }

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

            .orbit, .water-lines i, .need-dot {
                animation: none
            }

            .reveal, .time-item, .city-name {
                opacity: 1;
                transform: none
            }
        }