:root {
            --bg: #060607;
            --bg-soft: #0f1012;
            --bg-panel: #141518;
            --line: #27292e;
            --line-soft: #1f2125;
            --text-main: #f3f2ef;
            --text-subtle: #a7a59e;
            --gold: #d9bc82;
            --gold-soft: #9f8452;
            --steel: #8f9cab;
            --ok: #89d5b6;
            --warn: #f5c67a;
            --danger: #ff8a8a;
            --shadow-1: 0 18px 40px rgba(0, 0, 0, 0.35);
            --shadow-2: 0 30px 80px rgba(0, 0, 0, 0.5);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: "Outfit", "PingFang SC", "Microsoft YaHei", sans-serif;
            color: var(--text-main);
            background:
                radial-gradient(800px 520px at 18% -10%, rgba(159, 132, 82, 0.22), transparent 62%),
                radial-gradient(620px 420px at 90% 8%, rgba(143, 156, 171, 0.18), transparent 65%),
                linear-gradient(165deg, #060607 0%, #0b0c0f 40%, #050506 100%);
            min-height: 100vh;
            overflow-x: hidden;
            line-height: 1.6;
        }

        .ambient-grid {
            position: fixed;
            inset: 0;
            z-index: -2;
            background-image:
                linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
            background-size: 48px 48px;
            mask-image: radial-gradient(circle at center, black 35%, transparent 85%);
            pointer-events: none;
        }

        .ambient-grid::after {
            content: "";
            position: absolute;
            inset: 0;
            opacity: 0.07;
            background: repeating-linear-gradient(
                45deg,
                rgba(255, 255, 255, 0.3),
                rgba(255, 255, 255, 0.3) 1px,
                transparent 1px,
                transparent 7px
            );
        }

        .progress-track {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 2px;
            z-index: 40;
            background: rgba(255, 255, 255, 0.08);
        }

        .progress-line {
            width: 100%;
            height: 100%;
            transform-origin: left center;
            transform: scaleX(0);
            background: linear-gradient(90deg, var(--gold-soft), var(--gold), #e7d8b3);
            transition: transform 0.12s linear;
        }

        .site-header {
            width: min(1180px, calc(100% - 48px));
            margin: 0 auto;
            padding: 26px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 30;
            backdrop-filter: blur(10px);
        }

        .brand {
            font-family: "Space Grotesk", sans-serif;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            font-size: 13px;
            color: #d8d6d0;
            display: flex;
            gap: 8px;
            align-items: center;
        }

        .brand-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: radial-gradient(circle, #f7e6bf 0%, #c4a468 70%);
            box-shadow: 0 0 14px rgba(217, 188, 130, 0.6);
        }

        .nav {
            display: flex;
            font-size: 13px;
        }

        .nav ul {
            margin: 0;
            padding: 0;
            list-style: none;
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }

        .nav li {
            list-style: none;
        }

        .nav a {
            color: var(--text-subtle);
            text-decoration: none;
            transition: color 0.25s;
        }

        .nav a:hover {
            color: var(--text-main);
        }

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

        .hero {
            min-height: calc(100vh - 86px);
            display: grid;
            grid-template-columns: 1.02fr 0.98fr;
            gap: 44px;
            align-items: center;
            padding: 32px 0 80px;
        }

        .eyebrow {
            color: var(--text-subtle);
            font-size: 12px;
            letter-spacing: 0.16em;
            text-transform: uppercase;
            margin-bottom: 14px;
        }

        .hero-title {
            font-size: clamp(42px, 7vw, 84px);
            line-height: 1.04;
            letter-spacing: -0.03em;
            margin-bottom: 20px;
        }

        .hero-title span {
            display: block;
        }

        .hero-title .accent {
            background: linear-gradient(105deg, #f6f1e5 6%, #d9bc82 48%, #8f9cab 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .hero-desc {
            max-width: 560px;
            color: #bcb9b1;
            font-size: clamp(16px, 2vw, 19px);
            margin-bottom: 30px;
        }

        .hero-facts {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 24px;
        }

        .fact-pill {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 11px;
            color: #d4cec1;
            letter-spacing: 0.05em;
            border: 1px solid rgba(255, 255, 255, 0.15);
            background: rgba(255, 255, 255, 0.04);
        }

        .hero-actions {
            display: flex;
            gap: 14px;
            flex-wrap: wrap;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 999px;
            text-decoration: none;
            font-weight: 600;
            letter-spacing: 0.01em;
            padding: 12px 22px;
            font-size: 14px;
            transition: transform 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
            position: relative;
            overflow: hidden;
        }

        .btn::after {
            content: "";
            position: absolute;
            top: -130%;
            left: -30%;
            width: 48%;
            height: 360%;
            transform: rotate(22deg);
            background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.3), transparent);
            transition: left 0.6s;
        }

        .btn:hover::after {
            left: 120%;
        }

        .btn-solid {
            color: #1d1710;
            background: linear-gradient(105deg, #f1e3c4, #d9bc82 52%, #b8935f);
            border: 1px solid rgba(255, 255, 255, 0.14);
            box-shadow: 0 16px 36px rgba(185, 143, 84, 0.35);
        }

        .btn-solid:hover {
            transform: translateY(-2px);
            box-shadow: 0 22px 44px rgba(185, 143, 84, 0.42);
        }

        .btn-outline {
            color: #dad6cb;
            background: rgba(255, 255, 255, 0.03);
            border: 1px solid rgba(255, 255, 255, 0.16);
        }

        .btn-outline:hover {
            transform: translateY(-2px);
            border-color: rgba(255, 255, 255, 0.35);
            background: rgba(255, 255, 255, 0.08);
        }

        .hero-stage {
            position: relative;
            min-height: 560px;
            perspective: 1200px;
            transition: transform 0.25s ease-out;
        }

        .ring {
            position: absolute;
            border-radius: 50%;
            border: 1px solid rgba(255, 255, 255, 0.1);
            animation: spin 18s linear infinite;
        }

        .ring-a {
            inset: 64px 50px auto auto;
            width: 380px;
            height: 380px;
            border-top-color: rgba(217, 188, 130, 0.65);
            border-right-color: rgba(143, 156, 171, 0.5);
        }

        .ring-b {
            inset: 108px auto auto 28px;
            width: 280px;
            height: 280px;
            border-bottom-color: rgba(217, 188, 130, 0.6);
            border-left-color: rgba(143, 156, 171, 0.35);
            animation-direction: reverse;
            animation-duration: 20s;
        }

        .ring-c {
            inset: 160px 110px auto auto;
            width: 172px;
            height: 172px;
            border-color: rgba(255, 255, 255, 0.14);
            animation-duration: 14s;
        }

        .hero-stage::after {
            content: "";
            position: absolute;
            inset: 90px 20px 40px;
            background: radial-gradient(circle at center, rgba(217, 188, 130, 0.15), transparent 65%);
            filter: blur(22px);
            pointer-events: none;
            animation: breathe 6.5s ease-in-out infinite;
        }

        .glass {
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
            box-shadow: var(--shadow-1);
            backdrop-filter: blur(16px);
        }

        .signal-panel {
            position: absolute;
            right: 10px;
            bottom: 10px;
            width: min(96%, 470px);
            border-radius: 22px;
            padding: 28px;
            transform: rotateX(7deg) rotateY(-9deg);
            transform-style: preserve-3d;
            animation: panelFloat 6s ease-in-out infinite;
        }

        .signal-panel h2 {
            font-size: 17px;
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 0.01em;
        }

        .stat-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .stat-item {
            border-radius: 14px;
            padding: 14px;
            background: rgba(0, 0, 0, 0.28);
            border: 1px solid rgba(255, 255, 255, 0.09);
        }

        .stat-label {
            font-size: 12px;
            color: var(--text-subtle);
        }

        .stat-value {
            margin-top: 6px;
            font-size: 28px;
            line-height: 1;
            font-weight: 700;
            font-family: "Space Grotesk", sans-serif;
        }

        .stat-item:nth-child(1) .stat-value,
        .stat-item:nth-child(4) .stat-value {
            color: var(--gold);
        }

        .stat-item:nth-child(2) .stat-value {
            color: var(--ok);
        }

        .stat-item:nth-child(3) .stat-value {
            color: var(--warn);
        }

        .stat-caption {
            margin-top: 14px;
            color: #98968f;
            font-size: 12px;
        }

        .word-strip {
            margin: 20px 0 90px;
            border-top: 1px solid var(--line-soft);
            border-bottom: 1px solid var(--line-soft);
            overflow: hidden;
            background: linear-gradient(90deg, rgba(255, 255, 255, 0.01), rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
        }

        .strip-track {
            display: flex;
            gap: 26px;
            padding: 14px 0;
            white-space: nowrap;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            font-size: 11px;
            color: #b7b3aa;
            animation: marquee 22s linear infinite;
            width: max-content;
        }

        .strip-track span {
            padding-right: 26px;
            border-right: 1px solid rgba(255, 255, 255, 0.14);
        }

        .scroll-story {
            position: relative;
            min-height: 240vh;
            margin-bottom: 120px;
        }

        .story-sticky {
            position: sticky;
            top: 0;
            min-height: 100vh;
            display: grid;
            grid-template-columns: 0.92fr 1.08fr;
            align-items: center;
            gap: 36px;
            padding: 54px 0;
        }

        .story-visual {
            position: relative;
            min-height: 480px;
        }

        .route-shell {
            position: relative;
            min-height: 460px;
            border-radius: 24px;
            padding: 26px;
            overflow: hidden;
        }

        .route-shell::before {
            content: "";
            position: absolute;
            inset: -35% -5% auto;
            height: 240px;
            background: radial-gradient(circle, rgba(143, 156, 171, 0.22), transparent 70%);
            pointer-events: none;
        }

        .route-node {
            position: absolute;
            padding: 8px 12px;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: rgba(0, 0, 0, 0.36);
            font-size: 12px;
            color: #ddd9cf;
        }

        .node-cn {
            left: 10%;
            top: 42%;
        }

        .node-mid {
            left: 45%;
            top: 28%;
        }

        .node-end {
            right: 10%;
            top: 62%;
        }

        .route-line {
            position: absolute;
            height: 2px;
            background: linear-gradient(90deg, rgba(143, 156, 171, 0.2), rgba(217, 188, 130, 0.75), rgba(143, 156, 171, 0.2));
            transform-origin: left center;
            border-radius: 20px;
        }

        .line-1 {
            left: 20%;
            top: 47%;
            width: 32%;
            transform: rotate(-20deg);
        }

        .line-2 {
            left: 51%;
            top: 42%;
            width: 35%;
            transform: rotate(33deg);
        }

        .route-pulse {
            position: absolute;
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: radial-gradient(circle, #fff3d9 0%, #d9bc82 62%, #b69057 100%);
            box-shadow: 0 0 0 0 rgba(217, 188, 130, 0.5);
            left: 16%;
            top: 50%;
            transform: translate(-50%, -50%);
            transition: left 0.55s cubic-bezier(0.22, 1, 0.36, 1), top 0.55s cubic-bezier(0.22, 1, 0.36, 1);
            animation: pulse 1.8s infinite;
        }

        .route-metrics {
            position: absolute;
            left: 26px;
            right: 26px;
            bottom: 24px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .route-metric {
            border-radius: 12px;
            padding: 10px 12px;
            background: rgba(0, 0, 0, 0.35);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }

        .route-metric span {
            display: block;
            font-size: 11px;
            color: var(--text-subtle);
            letter-spacing: 0.05em;
            text-transform: uppercase;
        }

        .route-metric strong {
            display: block;
            margin-top: 4px;
            font-family: "Space Grotesk", sans-serif;
            font-size: 24px;
            line-height: 1;
        }

        .route-metric.quality {
            grid-column: 1 / -1;
        }

        .route-metric.quality strong {
            font-size: 17px;
            color: var(--gold);
            letter-spacing: 0.01em;
        }

        .story-copy h2 {
            font-size: clamp(28px, 4vw, 48px);
            line-height: 1.1;
            margin-bottom: 22px;
            letter-spacing: -0.02em;
        }

        .story-step {
            border-left: 2px solid var(--line);
            padding: 16px 0 16px 22px;
            margin-bottom: 6px;
            opacity: 0.4;
            transform: translateX(0);
            transition: opacity 0.45s, border-color 0.45s, transform 0.45s;
        }

        .story-step h3 {
            font-size: 20px;
            margin-bottom: 6px;
        }

        .story-step p {
            color: #afa99d;
            font-size: 15px;
            max-width: 560px;
        }

        .story-step.active {
            opacity: 1;
            border-color: var(--gold);
            transform: translateX(7px);
        }

        .section {
            margin-bottom: 120px;
        }

        .section-head {
            margin-bottom: 28px;
        }

        .section-head h2 {
            font-size: clamp(30px, 4.2vw, 54px);
            line-height: 1.08;
            letter-spacing: -0.025em;
            margin-bottom: 10px;
        }

        .section-head p {
            color: #aba69a;
            max-width: 740px;
            font-size: 17px;
        }

        .scene-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 18px;
        }

        .scene-card {
            border-radius: 20px;
            padding: 24px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
            box-shadow: var(--shadow-1);
        }

        .scene-chip {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            padding: 5px 11px;
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #f9e9c7;
            border: 1px solid rgba(217, 188, 130, 0.5);
            background: rgba(217, 188, 130, 0.14);
            margin-bottom: 12px;
        }

        .scene-card h3 {
            font-size: 26px;
            line-height: 1.2;
            margin-bottom: 10px;
        }

        .scene-card p {
            color: #b3aea1;
            font-size: 15px;
            margin-bottom: 14px;
        }

        .scene-card ul {
            list-style: none;
            display: grid;
            gap: 9px;
        }

        .scene-card li {
            font-size: 14px;
            color: #d3d0c8;
            padding-left: 16px;
            position: relative;
        }

        .scene-card li::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 8px;
            background: radial-gradient(circle, #f9e7c2 0%, #d9bc82 80%);
        }

        .scene-tip {
            margin-top: 14px;
            font-size: 12px;
            color: #989488;
        }

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

        .plan-card {
            border-radius: 20px;
            padding: 24px;
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: var(--shadow-1);
            display: flex;
            flex-direction: column;
            gap: 15px;
            transition: transform 0.36s, border-color 0.36s, box-shadow 0.36s;
        }

        .plan-card:hover {
            transform: translateY(-8px);
            border-color: rgba(255, 255, 255, 0.22);
            box-shadow: var(--shadow-2);
        }

        .plan-card.featured {
            background: linear-gradient(145deg, rgba(217, 188, 130, 0.15), rgba(255, 255, 255, 0.02));
            border-color: rgba(217, 188, 130, 0.42);
        }

        .tag {
            width: fit-content;
            border-radius: 999px;
            padding: 5px 11px;
            font-size: 11px;
            letter-spacing: 0.08em;
            text-transform: uppercase;
            color: #fff2d6;
            border: 1px solid rgba(217, 188, 130, 0.5);
            background: rgba(217, 188, 130, 0.16);
        }

        .plan-card h3 {
            font-size: 24px;
            line-height: 1.2;
        }

        .plan-card p {
            color: #b3aea1;
            font-size: 15px;
        }

        .plan-card ul {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 9px;
            margin-bottom: 6px;
        }

        .plan-card li {
            font-size: 14px;
            color: #d3d0c8;
            padding-left: 16px;
            position: relative;
        }

        .plan-card li::before {
            content: "";
            width: 6px;
            height: 6px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 8px;
            background: radial-gradient(circle, #f9e7c2 0%, #d9bc82 80%);
        }

        .score-method {
            margin: 10px 0 16px;
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.24);
            padding: 14px 16px;
        }

        .score-method p {
            font-size: 13px;
            color: #c6c0b4;
        }

        .weight-row {
            margin-top: 9px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .weight-chip {
            display: inline-flex;
            border-radius: 999px;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.05);
            padding: 4px 10px;
            font-size: 11px;
            letter-spacing: 0.04em;
            color: #d3cec3;
        }

        .vendor-switch {
            border-radius: 22px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
            padding: 22px;
            display: grid;
            gap: 14px;
        }

        .vendor-sub {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.1em;
            color: #bcb6a9;
            margin-bottom: 2px;
        }

        .vendor-switch h3 {
            font-size: 24px;
            line-height: 1.2;
        }

        .vendor-group-nav {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 10px;
        }

        .vendor-group-btn {
            width: auto;
            min-height: 54px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.22);
            color: #d6d1c7;
            text-align: center;
            padding: 10px;
            font-size: 13px;
            line-height: 1.3;
            cursor: pointer;
            transition: border-color 0.24s, background 0.24s, color 0.24s;
        }

        .vendor-group-btn:hover {
            border-color: rgba(217, 188, 130, 0.48);
            color: #efe5cf;
        }

        .vendor-group-btn.active {
            color: #251d12;
            border-color: rgba(255, 255, 255, 0.18);
            background: linear-gradient(115deg, #f1e3c4, #d9bc82 58%, #bd975f);
            box-shadow: 0 10px 22px rgba(191, 148, 83, 0.3);
        }

        .vendor-display {
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: linear-gradient(165deg, rgba(0, 0, 0, 0.28), rgba(255, 255, 255, 0.03));
            padding: 16px;
        }

        .vendor-display-meta {
            font-size: 13px;
            color: #b9b2a5;
            letter-spacing: 0.04em;
            margin-bottom: 12px;
        }

        .vendor-list {
            list-style: none;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }

        .vendor-item {
            border-radius: 16px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.05), rgba(0, 0, 0, 0.24));
            padding: 16px;
            min-height: 168px;
            box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25);
            transition: transform 0.28s, border-color 0.28s, box-shadow 0.28s;
        }

        .vendor-item:hover {
            transform: translateY(-4px);
            border-color: rgba(217, 188, 130, 0.42);
            box-shadow: 0 22px 38px rgba(0, 0, 0, 0.32);
        }

        .vendor-head {
            display: grid;
            grid-template-columns: auto 1fr auto;
            align-items: center;
            gap: 10px;
            margin-bottom: 9px;
        }

        .vendor-rank {
            font-family: "Space Grotesk", sans-serif;
            font-size: 12px;
            color: #baaf97;
            min-width: 28px;
        }

        .vendor-name {
            font-size: 19px;
            line-height: 1.2;
            color: #eee9df;
        }

        .vendor-score {
            font-family: "Space Grotesk", sans-serif;
            font-size: 14px;
            font-weight: 700;
            color: #1e170f;
            border-radius: 999px;
            padding: 4px 10px;
            background: linear-gradient(110deg, #f1e3c4, #d9bc82 55%, #b9915c);
        }

        .vendor-note {
            font-size: 13px;
            color: #b2ac9f;
            margin-bottom: 10px;
        }

        .vendor-link {
            font-size: 13px;
            text-decoration: none;
            color: #e4cb95;
            border-bottom: 1px dashed rgba(228, 203, 149, 0.5);
        }

        .vendor-link:hover {
            color: #f2dfb6;
            border-bottom-color: rgba(242, 223, 182, 0.9);
        }

        .aff-note {
            margin-top: 18px;
            border-radius: 16px;
            padding: 18px 20px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: rgba(0, 0, 0, 0.28);
        }

        .aff-note h3 {
            font-size: 15px;
            margin-bottom: 8px;
            letter-spacing: 0.03em;
            color: #e2ddcf;
        }

        .aff-note p {
            font-size: 13px;
            color: #a59f92;
        }

        .decision-lab {
            margin-top: 16px;
            display: grid;
            grid-template-columns: 1.06fr 0.94fr;
            gap: 12px;
        }

        .decision-form,
        .decision-result {
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            background: rgba(0, 0, 0, 0.24);
            padding: 14px;
        }

        .choice-group + .choice-group {
            margin-top: 12px;
            padding-top: 12px;
            border-top: 1px dashed rgba(255, 255, 255, 0.1);
        }

        .choice-label {
            font-size: 11px;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: #b8b2a6;
            margin-bottom: 8px;
        }

        .choice-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .choice-chip {
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.03);
            color: #d9d4c9;
            border-radius: 999px;
            padding: 6px 11px;
            font-size: 12px;
            line-height: 1;
            cursor: pointer;
            transition: all 0.22s;
        }

        .choice-chip:hover {
            border-color: rgba(217, 188, 130, 0.48);
            color: #f0e5cc;
        }

        .choice-chip.active {
            color: #271f14;
            background: linear-gradient(115deg, #f1e3c4, #d9bc82 58%, #bd975f);
            border-color: rgba(255, 255, 255, 0.2);
            box-shadow: 0 10px 22px rgba(191, 148, 83, 0.3);
        }

        .result-eyebrow {
            font-size: 11px;
            color: #b6b0a4;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 6px;
        }

        .result-title {
            font-size: 20px;
            line-height: 1.2;
            margin-bottom: 8px;
            color: #efe9dc;
        }

        .result-desc {
            font-size: 13px;
            color: #b0aa9d;
            margin-bottom: 10px;
        }

        .result-list {
            list-style: none;
            display: grid;
            gap: 7px;
            margin-bottom: 12px;
        }

        .result-list li {
            font-size: 13px;
            color: #d4d0c6;
            padding-left: 14px;
            position: relative;
        }

        .result-list li::before {
            content: "";
            width: 5px;
            height: 5px;
            border-radius: 50%;
            position: absolute;
            left: 0;
            top: 8px;
            background: #d9bc82;
        }

        .decision-cta {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .decision-cta .btn {
            flex: 1 1 170px;
            padding: 10px 14px;
            font-size: 12px;
        }

        .conversion-actions {
            margin-top: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .conversion-actions .btn {
            flex: 1 1 260px;
            padding: 11px 16px;
            font-size: 13px;
        }

        .proof-line {
            margin-top: 12px;
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .proof-pill {
            display: inline-flex;
            border-radius: 999px;
            padding: 4px 10px;
            font-size: 11px;
            letter-spacing: 0.04em;
            color: #ccc6ba;
            border: 1px solid rgba(255, 255, 255, 0.14);
            background: rgba(255, 255, 255, 0.05);
        }

        .latest-actions {
            margin-top: 14px;
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }

        .stock-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            margin-top: 16px;
        }

        .stock-card {
            border-radius: 16px;
            padding: 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
        }

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

        .stock-vendor {
            margin: 0;
            font-size: 20px;
            line-height: 1.2;
            color: #eee9df;
        }

        .stock-status {
            display: inline-flex;
            border-radius: 999px;
            padding: 6px 12px;
            font-size: 12px;
            letter-spacing: 0.04em;
            font-weight: 600;
            border: 1px solid transparent;
        }

        .stock-status-in {
            color: #0f2a1f;
            background: linear-gradient(110deg, #9be5c0, #7fd9ae);
            border-color: rgba(127, 217, 174, 0.35);
        }

        .stock-status-out {
            color: #ffd7d7;
            background: rgba(255, 111, 111, 0.18);
            border-color: rgba(255, 111, 111, 0.4);
        }

        .stock-specs {
            margin: 0;
            padding: 0;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px 12px;
        }

        .stock-spec-item {
            min-width: 0;
        }

        .stock-spec-item dt {
            font-size: 11px;
            color: #a59e92;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            margin-bottom: 2px;
        }

        .stock-spec-item dd {
            margin: 0;
            color: #dfd9cd;
            font-size: 13px;
            line-height: 1.35;
            word-break: break-word;
        }

        .stock-actions {
            margin-top: 14px;
        }

        .stock-buy-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 112px;
            border-radius: 999px;
            padding: 9px 14px;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: 0.02em;
            text-decoration: none;
        }

        .stock-buy-btn-in {
            color: #132216;
            background: linear-gradient(110deg, #9be5c0, #7fd9ae);
        }

        .stock-buy-btn-out {
            color: #ffd7d7;
            background: rgba(255, 111, 111, 0.14);
            border: 1px solid rgba(255, 111, 111, 0.35);
        }

        .stock-time {
            margin: 10px 0 0;
            font-size: 12px;
            color: #a9a293;
        }

        .latest-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 14px;
            margin-top: 16px;
        }

        .post-card {
            border-radius: 16px;
            padding: 18px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.012));
            display: flex;
            flex-direction: column;
            min-height: 188px;
            transition: transform 0.3s, border-color 0.3s;
        }

        .post-card:hover {
            transform: translateY(-4px);
            border-color: rgba(217, 188, 130, 0.45);
        }

        .post-meta {
            font-size: 11px;
            letter-spacing: 0.06em;
            color: #9a9486;
            margin-bottom: 10px;
            text-transform: uppercase;
        }

        .post-title {
            font-size: 16px;
            line-height: 1.4;
            color: #eee9df;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            min-height: 4.2em;
        }

        .post-link {
            margin-top: auto;
            width: fit-content;
            font-size: 13px;
            color: #e2c78f;
            text-decoration: none;
            border-bottom: 1px solid rgba(226, 199, 143, 0.4);
            transition: color 0.25s, border-color 0.25s;
        }

        .post-link:hover {
            color: #f1ddaf;
            border-color: rgba(241, 221, 175, 0.85);
        }

        .baseline-note {
            margin-top: 16px;
            border-radius: 16px;
            padding: 16px 18px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: rgba(0, 0, 0, 0.24);
        }

        .baseline-note h3 {
            font-size: 15px;
            margin-bottom: 8px;
            color: #e2ddcf;
            letter-spacing: 0.02em;
        }

        .baseline-note p {
            font-size: 13px;
            color: #a8a293;
        }

        .baseline-meta {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .table-wrap {
            border-radius: 20px;
            overflow: hidden;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background: linear-gradient(160deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012));
            box-shadow: var(--shadow-1);
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
        }

        .comparison-table th,
        .comparison-table td {
            text-align: left;
            padding: 18px 20px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.08);
            font-size: 14px;
        }

        .comparison-table th {
            color: #d6d1c4;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 0.09em;
            background: rgba(0, 0, 0, 0.28);
            font-weight: 500;
        }

        .comparison-table tr {
            transition: background-color 0.25s;
        }

        .comparison-table tbody tr:hover {
            background: rgba(255, 255, 255, 0.04);
        }

        .grade {
            font-family: "Space Grotesk", sans-serif;
            font-weight: 700;
            letter-spacing: 0.03em;
        }

        .grade.a {
            color: var(--ok);
        }

        .grade.b {
            color: var(--warn);
        }

        .grade.c {
            color: var(--danger);
        }

        .decision {
            border-radius: 26px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: linear-gradient(155deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.01));
            padding: 32px;
            display: grid;
            grid-template-columns: 0.95fr 1.05fr;
            gap: 18px;
        }

        .decision-copy h2 {
            font-size: clamp(30px, 4vw, 50px);
            line-height: 1.08;
            letter-spacing: -0.025em;
            margin-bottom: 12px;
        }

        .decision-copy p {
            color: #b4b0a4;
            max-width: 500px;
        }

        .decision-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .decision-item {
            border-radius: 14px;
            border: 1px solid rgba(255, 255, 255, 0.11);
            background: rgba(0, 0, 0, 0.28);
            padding: 16px;
        }

        .decision-item h3 {
            font-size: 18px;
            margin-bottom: 6px;
        }

        .decision-item p {
            color: #aba598;
            font-size: 14px;
        }

        .final-cta {
            text-align: center;
            padding: 76px 26px;
            border-radius: 28px;
            border: 1px solid rgba(255, 255, 255, 0.12);
            background:
                radial-gradient(600px 280px at center top, rgba(217, 188, 130, 0.24), transparent 70%),
                linear-gradient(165deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.01));
        }

        .final-cta h2 {
            font-size: clamp(32px, 5vw, 60px);
            line-height: 1.07;
            letter-spacing: -0.025em;
            margin-bottom: 16px;
        }

        .final-cta p {
            max-width: 660px;
            margin: 0 auto 28px;
            color: #b6b0a4;
            font-size: 17px;
        }

        .site-footer {
            margin-top: 30px;
            border-top: 1px solid var(--line);
            padding: 24px;
            text-align: center;
            color: #8f8b80;
            font-size: 12px;
            letter-spacing: 0.03em;
        }

        .site-footer .footer-widgets {
            display: grid;
            gap: 12px;
            margin-bottom: 14px;
        }

        .site-footer .footer-widgets--cols-2 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .site-footer .footer-widgets--cols-3 {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .site-footer .footer-widgets--cols-2 > *,
        .site-footer .footer-widgets--cols-3 > * {
            min-width: 0;
            width: auto;
            max-width: 100%;
            grid-column: auto;
        }

        .site-footer .widget {
            border: 1px solid var(--line-soft);
            border-radius: 12px;
            padding: 14px;
            background: rgba(255, 255, 255, 0.02);
            text-align: left;
        }

        .site-footer .widget-title {
            margin: 0 0 8px;
            font-size: 14px;
            color: #d8d0c0;
        }

        .site-footer .widget ul {
            margin: 0;
            padding-left: 18px;
        }

        .site-footer .footer-nav ul {
            margin: 0 0 10px;
            padding: 0;
            list-style: none;
            display: flex;
            justify-content: center;
            gap: 12px;
            flex-wrap: wrap;
        }

        .site-footer .footer-copy {
            margin: 0;
        }

        .site-footer a {
            color: #cfc8ba;
            text-decoration: none;
            border-bottom: 1px dashed rgba(207, 200, 186, 0.5);
        }

        .site-footer a:hover {
            color: #f0e7d8;
            border-bottom-color: rgba(240, 231, 216, 0.9);
        }

        .reveal {
            opacity: 0;
            transform: translateY(36px);
            transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1), transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
        }

        .reveal.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .reveal-y {
            opacity: 0;
            transform: translateY(26px);
            animation: riseIn 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
        }

        .delay-1 {
            animation-delay: 0.1s;
        }

        .delay-2 {
            animation-delay: 0.25s;
        }

        .delay-3 {
            animation-delay: 0.4s;
        }

        .delay-4 {
            animation-delay: 0.55s;
        }

        @keyframes riseIn {
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

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

        @keyframes panelFloat {
            0%,
            100% {
                transform: rotateX(7deg) rotateY(-9deg) translateY(0);
            }
            50% {
                transform: rotateX(7deg) rotateY(-9deg) translateY(-8px);
            }
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(217, 188, 130, 0.55);
            }
            80% {
                box-shadow: 0 0 0 16px rgba(217, 188, 130, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(217, 188, 130, 0);
            }
        }

        @keyframes breathe {
            0%,
            100% {
                transform: scale(1);
                opacity: 0.65;
            }
            50% {
                transform: scale(1.08);
                opacity: 0.95;
            }
        }

        @keyframes marquee {
            from {
                transform: translateX(0);
            }
            to {
                transform: translateX(-50%);
            }
        }

        @media (max-width: 1080px) {
            .hero {
                grid-template-columns: 1fr;
                gap: 20px;
                min-height: auto;
                padding: 40px 0 60px;
            }

            .hero-stage {
                min-height: 470px;
            }

            .story-sticky {
                grid-template-columns: 1fr;
                gap: 18px;
                position: relative;
                min-height: auto;
                padding: 0;
            }

            .scroll-story {
                min-height: auto;
            }

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

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

            .decision-lab {
                grid-template-columns: 1fr;
            }

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

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

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

        @media (max-width: 768px) {
            .site-header,
            main {
                width: min(1180px, calc(100% - 30px));
            }

            .site-header {
                padding: 18px 0;
            }

            .nav {
                display: none;
            }

            .hero-title {
                font-size: clamp(34px, 10vw, 56px);
            }

            .hero-actions {
                flex-direction: column;
            }

            .hero-facts {
                flex-direction: column;
                align-items: flex-start;
            }

            .btn {
                width: 100%;
            }

            .signal-panel {
                right: 0;
                left: 0;
                width: 100%;
                padding: 20px;
            }

            .route-shell {
                min-height: 400px;
            }

            .route-metrics {
                grid-template-columns: 1fr;
            }

            .comparison-table {
                font-size: 13px;
            }

            .comparison-table th,
            .comparison-table td {
                padding: 12px;
            }

            .decision-list {
                grid-template-columns: 1fr;
            }

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

            .stock-specs {
                grid-template-columns: 1fr;
            }

            .vendor-switch {
                padding: 16px;
            }

            .vendor-group-nav {
                gap: 8px;
            }

            .vendor-group-btn {
                min-height: 46px;
                font-size: 12px;
                padding: 8px 6px;
            }

            .vendor-display {
                padding: 12px;
            }

            .vendor-list {
                gap: 10px;
            }

            .vendor-item {
                min-height: 150px;
                padding: 14px;
            }

            .vendor-name {
                font-size: 17px;
            }

            .section {
                margin-bottom: 86px;
            }

            .final-cta {
                padding: 52px 20px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            *,
            *::before,
            *::after {
                animation-duration: 0.001ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.001ms !important;
                scroll-behavior: auto !important;
            }

            .reveal,
            .reveal-y {
                opacity: 1 !important;
                transform: none !important;
            }
        }