* { box-sizing: border-box; }

        body {
            font-family: 'Sora', sans-serif;
            overflow-x: hidden;
        }

        .font-serif-accent { font-family: 'Instrument Serif', serif; }
        .font-mono { font-family: 'JetBrains Mono', monospace; }

        body::before {
            content: '';
            position: fixed;
            inset: 0;
            z-index: 9999;
            pointer-events: none;
            opacity: 0.025;
            background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
            background-size: 128px 128px;
        }

        /* ── Radar animation ── */
        .hero-radar-stage {
            width: min(100%, 24rem);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0.75rem;
            border-radius: 50%;
            background: color-mix(in oklab, var(--color-primary) 5%, transparent);
        }
        .radar-container {
            --radar-size: 420px;
            position: relative;
            width: var(--radar-size);
            height: var(--radar-size);
            flex-shrink: 0;
            transform: translateZ(0);
        }
        .radar-circle {
            position: absolute; border-radius: 50%;
            border: 1px solid color-mix(in oklab, var(--color-primary) 12%, transparent);
            left: 50%; top: 50%; transform: translate(-50%, -50%);
        }
        .radar-c1 { width: 100%; height: 100%; }
        .radar-c2 { width: 72%; height: 72%; }
        .radar-c3 { width: 44%; height: 44%; }
        .radar-c4 { width: 16%; height: 16%; border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); }
        .radar-crosshair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
        .radar-crosshair::before, .radar-crosshair::after { content: ''; position: absolute; background: color-mix(in oklab, var(--color-primary) 10%, transparent); }
        .radar-crosshair::before { width: 1px; height: var(--radar-size); left: 0; top: calc(var(--radar-size) / -2); }
        .radar-crosshair::after { width: var(--radar-size); height: 1px; left: calc(var(--radar-size) / -2); top: 0; }
        .radar-sweep {
            position: absolute; width: 50%; height: 50%; top: 50%; left: 50%;
            transform-origin: 0 0; animation: sweep 4s linear infinite;
            background: color-mix(in oklab, var(--color-primary) 14%, transparent);
            border-radius: 0 100% 0 0;
            will-change: transform;
            backface-visibility: hidden;
            filter: saturate(1.05);
        }
        @keyframes sweep {
            from { transform: rotate(0deg) translateZ(0); }
            to { transform: rotate(360deg) translateZ(0); }
        }
        .radar-dot {
            position: absolute; width: 6px; height: 6px; border-radius: 50%;
            background: var(--color-primary); box-shadow: 0 0 10px 2px color-mix(in oklab, var(--color-primary) 50%, transparent);
            animation: dot-pulse 3s ease-in-out infinite;
            will-change: transform, opacity;
        }
        @keyframes dot-pulse {
            0%, 100% { opacity: 0.3; transform: scale(0.8) translateZ(0); }
            50% { opacity: 1; transform: scale(1.2) translateZ(0); }
        }
        .radar-dot:nth-child(6) { top: 22%; left: 65%; animation-delay: 0s; }
        .radar-dot:nth-child(7) { top: 58%; left: 28%; animation-delay: 0.8s; }
        .radar-dot:nth-child(8) { top: 35%; left: 42%; animation-delay: 1.6s; }
        .radar-dot:nth-child(9) { top: 70%; left: 72%; animation-delay: 2.4s; }
        .radar-dot:nth-child(10) { top: 45%; left: 80%; animation-delay: 0.4s; }
        .radar-dot:nth-child(11) { top: 78%; left: 50%; animation-delay: 1.2s; }
        .radar-dot:nth-child(12) { top: 18%; left: 35%; animation-delay: 2s; }

        /* ── Orbs ── */
        .orb-hero { position: absolute; border-radius: 50%; filter: blur(100px); pointer-events: none; }
        .orb-hero-a { width: 500px; height: 500px; top: -180px; right: -100px; background: color-mix(in oklab, var(--color-primary) 8%, transparent); }
        .orb-hero-b { width: 400px; height: 400px; bottom: -120px; left: -60px; background: color-mix(in oklab, var(--color-info) 6%, transparent); }

        /* ── Reveal ── */
        .reveal {
            opacity: 0; transform: translateY(32px);
            transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
        }
        .reveal.is-visible { opacity: 1; transform: translateY(0); }

        /* ── Landing glass card ── */
        .landing-card {
            background: color-mix(in oklab, var(--color-base-content) 3%, transparent);
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            border-radius: 1.2rem;
            backdrop-filter: blur(12px);
            transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
        }
        .landing-card:hover {
            transform: translateY(-4px);
            border-color: color-mix(in oklab, var(--color-primary) 25%, transparent);
            box-shadow: 0 0 60px -20px color-mix(in oklab, var(--color-primary) 40%, transparent);
        }
        .landing-card-static {
            background: color-mix(in oklab, var(--color-base-content) 3%, transparent);
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            border-radius: 1rem;
            backdrop-filter: blur(12px);
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
        .landing-card-static:hover {
            border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
            box-shadow: 0 0 30px -10px color-mix(in oklab, var(--color-primary) 15%, transparent);
        }
        .landing-card-static.has-activity { border-color: color-mix(in oklab, var(--color-success) 25%, transparent); }

        /* ── Preview table ── */
        .preview-table-wrap {
            position: relative;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            border-radius: 1rem;
            overflow: hidden;
            background: color-mix(in oklab, var(--color-base-100) 60%, transparent);
            backdrop-filter: blur(16px);
        }
        .preview-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
        .preview-table th {
            padding: 0.7rem 0.75rem; text-align: left; font-size: 0.68rem;
            text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500;
            color: color-mix(in oklab, var(--color-base-content) 40%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); white-space: nowrap;
        }
        .preview-table td { padding: 0.65rem 0.75rem; border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 3%, transparent); white-space: nowrap; }
        .preview-table tbody tr { transition: background 0.2s; }
        .preview-table tbody tr:hover { background: color-mix(in oklab, var(--color-primary) 4%, transparent); }
        .preview-desktop-only,
        .preview-desktop-flex-only {
            display: none;
        }
        .preview-mobile-only {
            display: grid;
        }
        .preview-mobile-block-only {
            display: block;
        }
        .preview-mobile-list {
            display: grid;
            gap: 0.9rem;
            padding: 1rem;
        }
        .preview-mobile-card {
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            border-radius: 1rem;
            background: color-mix(in oklab, var(--color-base-100) 92%, transparent);
            padding: 0.95rem;
            box-shadow: 0 18px 45px -36px color-mix(in oklab, var(--color-primary) 55%, transparent);
        }
        .preview-mobile-card.is-muted { opacity: 0.72; }
        .preview-mobile-topline {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 0.75rem;
            margin-bottom: 0.85rem;
        }
        .preview-mobile-rank {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 2rem;
            height: 2rem;
            border-radius: 999px;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            background: color-mix(in oklab, var(--color-base-content) 3%, transparent);
            color: color-mix(in oklab, var(--color-base-content) 55%, transparent);
            font-family: 'JetBrains Mono', monospace;
            font-size: 0.72rem;
        }
        .preview-mobile-product {
            display: flex;
            gap: 0.75rem;
            min-width: 0;
        }
        .preview-mobile-media {
            width: 3rem;
            height: 3rem;
            border-radius: 0.95rem;
            object-fit: cover;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
            flex-shrink: 0;
        }
        .preview-mobile-fallback {
            display: flex;
            align-items: center;
            justify-content: center;
            color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
        }
        .preview-mobile-title {
            font-size: 0.92rem;
            font-weight: 600;
            color: color-mix(in oklab, var(--color-base-content) 85%, transparent);
            line-height: 1.35;
            margin-bottom: 0.2rem;
        }
        .preview-mobile-category {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: color-mix(in oklab, var(--color-base-content) 34%, transparent);
        }
        .preview-mobile-primary {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 0.65rem;
            margin-bottom: 0.65rem;
        }
        .preview-mobile-secondary {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
        }
        .preview-mobile-metric {
            border: 1px solid color-mix(in oklab, var(--color-base-content) 6%, transparent);
            border-radius: 0.9rem;
            background: color-mix(in oklab, var(--color-base-content) 2.5%, transparent);
            padding: 0.7rem 0.75rem;
            min-width: 0;
        }
        .preview-mobile-chip {
            display: inline-flex;
            align-items: center;
            gap: 0.45rem;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            border-radius: 999px;
            background: color-mix(in oklab, var(--color-base-content) 2.5%, transparent);
            padding: 0.42rem 0.72rem;
            font-size: 0.72rem;
            color: color-mix(in oklab, var(--color-base-content) 58%, transparent);
        }
        .preview-mobile-label {
            display: block;
            font-size: 0.62rem;
            font-family: 'JetBrains Mono', monospace;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            color: color-mix(in oklab, var(--color-base-content) 34%, transparent);
            margin-bottom: 0.35rem;
        }
        .preview-mobile-value {
            display: block;
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.1;
            color: color-mix(in oklab, var(--color-base-content) 88%, transparent);
        }
        .preview-mobile-value.price { color: color-mix(in oklab, var(--color-base-content) 88%, transparent); }
        .preview-mobile-value.sales { color: var(--color-primary); }
        .preview-mobile-value.imports { color: #60a5fa; }
        .preview-mobile-skeleton {
            height: 11rem;
            border-radius: 1rem;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 6%, transparent);
            background: color-mix(in oklab, var(--color-base-100) 90%, transparent);
            position: relative;
            overflow: hidden;
        }
        .preview-mobile-skeleton::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                color-mix(in oklab, var(--color-base-content) 8%, transparent) 1rem 1rem / 3rem 3rem no-repeat,
                color-mix(in oklab, var(--color-base-content) 8%, transparent) 5rem 1.2rem / 8rem 0.9rem no-repeat,
                color-mix(in oklab, var(--color-base-content) 6%, transparent) 5rem 2.5rem / 4rem 0.65rem no-repeat,
                color-mix(in oklab, var(--color-base-content) 6%, transparent) 1rem 5.7rem / calc(50% - 1.35rem) 2.6rem no-repeat,
                color-mix(in oklab, var(--color-base-content) 6%, transparent) calc(50% + 0.35rem) 5.7rem / calc(50% - 1.35rem) 2.6rem no-repeat,
                color-mix(in oklab, var(--color-base-content) 6%, transparent) 1rem 9.2rem / 5.8rem 1.1rem no-repeat,
                color-mix(in oklab, var(--color-base-content) 6%, transparent) 7.2rem 9.2rem / 6.5rem 1.1rem no-repeat;
            animation: shimmer 1.6s linear infinite;
        }
        @keyframes shimmer {
            from { transform: translateX(-100%); }
            to { transform: translateX(100%); }
        }

        /* ── Plans slider ── */
        .plans-orb {
            position: absolute;
            border-radius: 999px;
            filter: blur(110px);
            opacity: 0.16;
        }
        .plans-orb-a {
            width: 320px;
            height: 320px;
            top: 5%;
            right: -80px;
            background: color-mix(in oklab, var(--color-primary) 30%, transparent);
        }
        .plans-orb-b {
            width: 280px;
            height: 280px;
            bottom: 8%;
            left: -90px;
            background: color-mix(in oklab, var(--color-warning) 25%, transparent);
        }
        .plans-slider-shell {
            position: relative;
        }
        .plans-slider {
            display: grid;
            grid-auto-flow: column;
            grid-auto-columns: minmax(85%, 85%);
            gap: 1rem;
            overflow-x: auto;
            padding: 0.35rem 1.15rem 0.9rem 0;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        .plans-slider::-webkit-scrollbar { display: none; }
        .plan-card {
            position: relative;
            min-height: 100%;
            scroll-snap-align: center;
            border-radius: 1.8rem;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            background: color-mix(in oklab, var(--color-base-100) 98%, transparent);
            box-shadow: 0 30px 80px -50px color-mix(in oklab, var(--color-base-content) 45%, transparent);
            overflow: hidden;
        }
        .plan-card.is-recommended {
            border-color: color-mix(in oklab, var(--color-primary) 28%, transparent);
            background: color-mix(in oklab, var(--color-primary) 6%, transparent);
            box-shadow: 0 40px 95px -52px color-mix(in oklab, var(--color-primary) 48%, transparent);
        }
        .plan-card-bar {
            height: 3px;
            background: color-mix(in oklab, var(--color-base-content) 8%, transparent);
        }
        .plan-card.is-recommended .plan-card-bar {
            background: var(--color-primary);
        }
        .plan-card-content {
            display: flex;
            flex-direction: column;
            height: 100%;
            padding: 1.4rem;
        }
        .plan-tier-label {
            font-size: 0.68rem;
            text-transform: uppercase;
            letter-spacing: 0.18em;
            color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
            font-family: 'JetBrains Mono', monospace;
        }
        .plan-card.is-recommended .plan-tier-label { color: var(--color-primary); }
        .plan-badge {
            display: inline-flex;
            align-items: center;
            border-radius: 999px;
            border: 1px solid color-mix(in oklab, var(--color-warning) 25%, transparent);
            background: color-mix(in oklab, var(--color-warning) 12%, transparent);
            color: var(--color-warning);
            font-size: 0.68rem;
            padding: 0.22rem 0.55rem;
            letter-spacing: 0.08em;
            text-transform: uppercase;
        }
        .plan-icon-wrap {
            width: 3rem;
            height: 3rem;
            border-radius: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
            color: color-mix(in oklab, var(--color-base-content) 62%, transparent);
            font-size: 1rem;
            flex-shrink: 0;
        }
        .plan-card.is-recommended .plan-icon-wrap {
            border-color: color-mix(in oklab, var(--color-primary) 18%, transparent);
            background: color-mix(in oklab, var(--color-primary) 12%, transparent);
            color: var(--color-primary);
        }
        .plan-check {
            width: 1.35rem;
            height: 1.35rem;
            border-radius: 999px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            background: color-mix(in oklab, var(--color-base-content) 4%, transparent);
            color: color-mix(in oklab, var(--color-base-content) 60%, transparent);
            flex-shrink: 0;
            font-size: 0.68rem;
        }
        .plan-card.is-recommended .plan-check {
            border-color: color-mix(in oklab, var(--color-primary) 18%, transparent);
            background: color-mix(in oklab, var(--color-primary) 12%, transparent);
            color: var(--color-primary);
        }
        .plans-slider-nav {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.75rem;
            margin-top: 1rem;
        }
        .plans-slider-track {
            display: inline-flex;
            align-items: center;
            gap: 0.55rem;
            padding: 0.45rem 0.75rem;
            border-radius: 999px;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent);
            background: color-mix(in oklab, var(--color-base-content) 2.5%, transparent);
        }
        .plans-dot {
            width: 0.55rem;
            height: 0.55rem;
            border-radius: 999px;
            border: none;
            background: color-mix(in oklab, var(--color-base-content) 16%, transparent);
            transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
        }
        .plans-dot.is-active {
            width: 1.6rem;
            background: var(--color-primary);
        }

        /* ── Overlays ── */
        .section-blur-overlay {
            position: absolute; bottom: 0; left: 0; right: 0; height: 55%;
            background: color-mix(in oklab, var(--color-base-100) 92%, transparent);
            display: flex; align-items: flex-end; justify-content: center; padding-bottom: 2.5rem;
            pointer-events: none;
        }
        .section-blur-overlay > * { pointer-events: auto; }

        .grid-bg {
            /* grid removed — no gradients */
        }

        .divider-glow { height: 1px; background: color-mix(in oklab, var(--color-primary) 12%, transparent); }

        /* ── Stat number ── */
        .stat-number {
            font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 2.5rem; line-height: 1;
            color: var(--color-primary);
        }

        /* ── Featured product ── */
        .featured-product-card {
            position: relative;
            border: 1px solid color-mix(in oklab, var(--color-primary) 24%, transparent);
            border-radius: 1rem;
            background: color-mix(in oklab, var(--color-primary) 5%, transparent);
            box-shadow: 0 0 60px -30px color-mix(in oklab, var(--color-primary) 55%, transparent);
            overflow: hidden;
        }
        .featured-pill {
            display: inline-flex; align-items: center; gap: 0.4rem;
            padding: 0.3rem 0.7rem; border-radius: 999px;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
            background: color-mix(in oklab, var(--color-base-content) 3%, transparent);
            font-size: 0.7rem; color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
            text-transform: uppercase; letter-spacing: 0.08em;
            font-family: 'JetBrains Mono', monospace;
        }

        /* ── Trend colors ── */
        .trend-up { color: #34d399; }
        .trend-down { color: #f87171; }
        .trend-stable { color: #fbbf24; }

        /* ── Country selector pills ── */
        .country-btn {
            display: inline-flex; align-items: center; gap: 0.5rem;
            padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.8rem; font-weight: 500;
            border: 1px solid color-mix(in oklab, var(--color-base-content) 8%, transparent); background: transparent; color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
            cursor: pointer; transition: all 0.25s ease; white-space: nowrap;
        }
        .country-btn:hover { border-color: color-mix(in oklab, var(--color-primary) 30%, transparent); color: color-mix(in oklab, var(--color-base-content) 80%, transparent); }
        .country-btn.active {
            background: var(--color-primary); color: var(--color-primary-content); border-color: var(--color-primary); font-weight: 600;
        }

        @media (max-width: 768px) {
            .hero-radar-stage { width: min(100%, 20rem); padding: 0.4rem; }
            .radar-container { --radar-size: min(76vw, 300px); }
            .stat-number { font-size: 1.8rem; }
            .orb-hero-a { width: 320px; height: 320px; top: -110px; right: -90px; filter: blur(70px); }
            .orb-hero-b { width: 280px; height: 280px; bottom: -100px; left: -70px; filter: blur(70px); }
            .country-btn { padding: 0.45rem 0.8rem; font-size: 0.74rem; }
            .preview-table-wrap { border-radius: 1.2rem; }
            .preview-mobile-list { padding: 0.85rem; }
            .plans-slider { grid-auto-columns: minmax(88%, 88%); padding-right: 0.9rem; }
            .plan-card-content { padding: 1.2rem; }
            .plans-orb { filter: blur(80px); opacity: 0.18; }
        }
        @media (min-width: 768px) {
            .preview-desktop-only { display: block; }
            .preview-desktop-flex-only { display: flex; }
            .preview-mobile-only,
            .preview-mobile-block-only { display: none !important; }
            .plans-slider {
                display: grid;
                grid-auto-flow: row;
                grid-auto-columns: auto;
                overflow: visible;
                padding: 0;
                scroll-snap-type: none;
            }
            .plan-card {
                scroll-snap-align: none;
                min-height: 100%;
            }
        }
        @media (prefers-reduced-motion: reduce) {
            .reveal {
                transition: none !important;
            }
            .radar-sweep { animation-duration: 10s; opacity: 0.72; }
            .radar-dot { animation-duration: 6s; }
        }