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

        :root {
            --bg: #08080e;
            --bg2: #0d0d1c;
            --bg3: #121228;
            --border: #1e1e38;
            --border2: #2a2a4a;
            --yellow: #ffe000;
            --blue: #3a6fff;
            --white: #eeeeff;
            --gray: #6666aa;
            --mid: #9999cc;
            --red: #e8182c;
            --green: #00ff88;
            --max: 1320px;
            --logo: url('https://pub-d1faec99f8e046498cc37f6255e24650.r2.dev/logo_ultra_yellow.png');
        }

        /* ── LIGHT THEME ── */
        body.theme-light {
            --bg: #f8f8f4;
            --bg2: #f0f0ea;
            --bg3: #e8e8e0;
            --border: #d8d8cc;
            --border2: #c4c4b4;
            --yellow: #ffe000;
            --blue: #2244cc;
            --white: #111118;
            --gray: #888880;
            --mid: #555550;
            --red: #c00018;
            --green: #006630;
            --logo: url('https://pub-d1faec99f8e046498cc37f6255e24650.r2.dev/racers_logo_red.png');
        }

        body.theme-light header {
            background: var(--bg)
        }

        body.theme-light .hero {
            background: var(--bg)
        }

        body.theme-light .hero-stripes {
            background: repeating-linear-gradient(-65deg, transparent 0, transparent 80px, rgba(0, 0, 0, 0.015) 80px, rgba(0, 0, 0, 0.015) 81px)
        }

        body.theme-light .tile-front {
            background: var(--bg3)
        }

        body.theme-light .modal-right {
            background: var(--bg2)
        }

        body.theme-light .modal-overlay {
            background: rgba(240, 240, 234, 0.92)
        }

        body.theme-light .share-modal {
            background: var(--bg2);
            border-color: var(--border)
        }

        /* ── THEME TOGGLE ── */
        .theme-toggle {
            display: none
        }

        .theme-toggle button {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            padding: 4px 12px;
            border-radius: 16px;
            transition: all .2s;
            background: transparent;
            color: var(--gray);
        }

        .theme-toggle button.active {
            background: var(--bg);
            color: var(--white);
            box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
        }

        html {
            scroll-behavior: smooth
        }

        body {
            background: var(--bg);
            color: var(--white);
            font-family: 'Syne', sans-serif;
            -webkit-font-smoothing: antialiased;
            overflow-x: hidden
        }

        /* ── GRADIENT LINE ── */
        @keyframes cruiserFloat {

            0%,
            100% {
                transform: translateY(0)
            }

            50% {
                transform: translateY(-12px)
            }
        }

        @keyframes racergrad {
            0% {
                background-position: 0% 0%
            }

            100% {
                background-position: 200% 0%
            }
        }

        .grad-line {
            height: 1px;
            width: 100%;
            flex-shrink: 0;
            background: linear-gradient(90deg, #e8182c 0%, #e8182c 33%, #ffe000 33%, #ffe000 66%, #1a4cff 66%, #1a4cff 100%);
            background-size: 100% 100%;
        }

        .grad-line-animated {
            background-size: 200% 100%;
            animation: racergrad 10s linear infinite;
        }

        .grad-line-thin {
            height: 1px
        }

        .grad-line-thick {
            height: 6px
        }

        /* ── HEADER ── */
        header {
            height: 60px;
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            padding: 0 48px;
            border-bottom: 1px solid var(--border);
            background: var(--bg);
            position: sticky;
            top: 0;
            z-index: 500;
            gap: 24px;
        }

        header .logo {
            justify-self: start
        }

        header nav {
            justify-self: center
        }

        header .header-right {
            justify-self: end;
            display: flex;
            align-items: center;
            gap: 16px
        }

        .logo {
            display: flex;
            align-items: center;
            text-decoration: none;
            cursor: pointer
        }

        .logo img {
            height: 68px;
            width: auto
        }

        nav {
            display: flex;
            gap: 36px;
            align-items: center
        }

        nav a {
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            text-decoration: none;
            cursor: pointer;
            transition: color .12s;
            border: none;
            background: none;
            font-family: 'Syne', sans-serif
        }

        nav a:hover {
            color: var(--white)
        }

        .collection-btn {
            color: var(--gray);
            text-decoration: none;
            cursor: pointer;
            transition: color .12s;
            border: none;
            background: none;
            font-family: 'Syne', sans-serif
        }

        .buy-btn {
            color: rgba(255, 224, 0, .6) !important;
            background: rgba(255, 224, 0, .07) !important;
            border: 1px solid rgba(255, 224, 0, .28) !important;
            padding: 6px 16px;
            font-weight: 600 !important;
            letter-spacing: 1.5px;
            transition: all .15s !important;
            cursor: default !important;
            font-size: 12px !important;
            font-family: 'Syne', sans-serif !important;
            text-transform: uppercase !important;
            border-radius: 0 !important;
            outline: none !important;
            transform: skewX(-8deg) !important;
            display: inline-flex !important;
            align-items: center !important
        }

        .buy-btn:hover {
            color: rgba(255, 224, 0, .85) !important;
            background: rgba(255, 224, 0, .12) !important;
            border-color: rgba(255, 224, 0, .45) !important
        }

        .buy-btn-wrap {
            position: relative;
            display: inline-flex;
            align-items: center
        }

        .buy-btn-wrap:hover .buy-tooltip {
            opacity: 1;
            transform: translateY(0);
            top: 68px
        }

        .buy-tooltip {
            position: fixed;
            top: 68px;
            right: 48px;
            transform: translateY(-4px);
            background: var(--bg2);
            border: 1px solid var(--border2);
            color: var(--mid);
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            white-space: nowrap;
            padding: 8px 12px;
            border-radius: 2px;
            pointer-events: none;
            opacity: 0;
            transition: opacity .2s, transform .2s;
            z-index: 600;
            text-align: center;
            line-height: 1.6
        }

        .hd-count {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            color: var(--gray)
        }

        /* ── PAGES ── */
        .page {
            display: none
        }

        .page.active {
            display: block
        }

        /* ── HERO ── */
        .hero {
            position: relative;
            min-height: 100svh;
            background: var(--bg);
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            border-bottom: 1px solid var(--border)
        }

        .hero-stripes {
            position: absolute;
            inset: 0;
            pointer-events: none;
            background: repeating-linear-gradient(-65deg, transparent 0, transparent 80px, rgba(255, 224, 0, 0.012) 80px, rgba(255, 224, 0, 0.012) 81px)
        }

        .hero-grad-line {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0
        }

        .hero-content {
            position: relative;
            z-index: 2;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            text-align: center;
            padding: 80px 32px
        }

        .hero-eyebrow {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            letter-spacing: 5px;
            text-transform: uppercase;
            color: var(--yellow);
            margin-bottom: 32px;
            opacity: .75
        }

        .hero-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(80px, 14vw, 200px);
            color: var(--white);
            text-transform: uppercase;
            line-height: .88;
            letter-spacing: 2px
        }

        .hero-title span {
            color: var(--yellow);
            display: block
        }

        .hero-sub {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(18px, 2.5vw, 32px);
            color: var(--mid);
            margin-top: 36px;
            letter-spacing: 2px;
            transform: rotate(-1deg)
        }

        /* countdown */
        .countdown {
            display: flex;
            align-items: flex-start;
            gap: 10px;
            margin-top: 64px
        }

        .cd-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            min-width: 80px
        }

        .cd-num {
            font-family: 'Russo One', sans-serif;
            font-size: clamp(44px, 6vw, 72px);
            color: var(--yellow);
            line-height: 1;
            text-shadow: 0 0 40px rgba(255, 224, 0, .25)
        }

        .cd-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gray)
        }

        .cd-sep {
            font-family: 'Russo One', sans-serif;
            font-size: 48px;
            color: var(--border2);
            align-self: flex-start;
            padding-top: 4px;
            line-height: 1
        }

        .hero-phases {
            margin-top: 32px;
            display: flex;
            flex-direction: column;
            gap: 8px;
            align-items: center
        }

        .phase-row {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            display: flex;
            align-items: center;
            gap: 10px
        }

        .phase-row b {
            color: var(--white);
            font-weight: 700
        }

        .phase-dot {
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: var(--yellow);
            flex-shrink: 0
        }

        .coming-soon-tag {
            margin-top: 16px;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--yellow);
            border: 1px solid rgba(255, 224, 0, .3);
            padding: 8px 24px;
            border-radius: 2px
        }

        .hero-scroll {
            position: absolute;
            bottom: 96px;
            left: 50%;
            transform: translateX(-50%);
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gray);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            transition: color .15s
        }

        .hero-scroll:hover {
            color: var(--yellow)
        }

        .hero-scroll span:first-child {
            font-family: 'Syne', sans-serif
        }

        .scroll-arrow {
            animation: bounce 1.4s ease infinite
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0)
            }

            60% {
                transform: translateY(6px)
            }
        }

        /* ── COLLECTION ── */
        .collection {
            max-width: var(--max);
            margin: 0 auto;
            padding: 64px 40px 120px
        }
        .collection-layout {
            display: grid;
            grid-template-columns: 220px 1fr;
            gap: 32px;
            align-items: start
        }

        /* ── FILTER SIDEBAR ── */
        .filter-sidebar {
            position: sticky;
            top: 76px;
            max-height: calc(100svh - 96px);
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: var(--border2) transparent
        }
        .filter-sidebar::-webkit-scrollbar { width: 3px }
        .filter-sidebar::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 2px }
        .filter-sidebar::-webkit-scrollbar-track { background: transparent }
        .filter-sidebar-inner {
            display: flex;
            flex-direction: column;
            gap: 20px
        }
        .filter-group-block {
            display: flex;
            flex-direction: column;
            gap: 8px
        }
        .filter-group-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            padding-bottom: 6px;
            border-bottom: 1px solid var(--border)
        }
        .filter-chips {
            display: flex;
            flex-wrap: wrap;
            gap: 5px
        }
        .fchip {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            text-transform: uppercase;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--gray);
            padding: 4px 9px;
            cursor: pointer;
            transition: all .12s;
            white-space: nowrap;
            transform: skewX(-5deg);
            display: inline-flex;
            align-items: center;
            gap: 5px
        }
        .fchip > * { transform: skewX(5deg); display: inline-flex; align-items: center }
        .fchip:hover { border-color: var(--mid); color: var(--white) }
        .fchip.active { border-color: var(--yellow); color: var(--yellow); background: rgba(255,224,0,.06) }
        .fchip-count {
            font-size: 12px;
            opacity: .5;
            margin-left: 1px
        }
        .fchip-color {
            padding: 6px 7px;
            position: relative
        }
        .fchip-color::after {
            content: attr(title);
            position: absolute;
            bottom: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%) skewX(5deg);
            background: var(--bg2);
            border: 1px solid var(--border2);
            color: var(--white);
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 3px 7px;
            white-space: nowrap;
            pointer-events: none;
            opacity: 0;
            transition: opacity .15s;
            z-index: 50
        }
        .fchip-color:hover::after { opacity: 1 }
        .fchip-color:hover .fchip-dot { transform: scale(1.35) !important }
        .fchip-dot {
            border-radius: 50%;
            border: 1.5px solid rgba(255,255,255,.18);
            flex-shrink: 0;
            display: inline-block;
            transition: transform .15s ease
        }
        .filter-clear-all {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            background: none;
            border: 1px solid var(--border);
            padding: 7px 10px;
            cursor: pointer;
            width: 100%;
            transition: color .12s, border-color .12s;
            margin-top: 4px
        }
        .filter-clear-all:hover { color: var(--white); border-color: var(--border2) }

        .collection-top {
            display: none
        }

        .section-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 3px;
            color: var(--mid);
            text-transform: uppercase
        }

        /* back to top */
        .back-to-top {
            display: flex !important;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            transition: color .15s;
            color: var(--gray);
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 2px;
            text-transform: uppercase;
            margin: 40px auto 0;
            width: fit-content;
            transform: none !important
        }

        .back-to-top:hover {
            color: var(--yellow)
        }

        /* trade tile — no flip */
        .tile-trade .tile-inner {
            transition: background .25s, box-shadow .25s
        }

        .tile-trade:hover .tile-inner {
            transform: none !important;
            background: var(--bg3);
            box-shadow: 0 0 0 1px var(--border2)
        }

        .tile-trade .tile-back {
            display: none
        }

        @keyframes bounceUp {

            0%,
            100% {
                transform: translateY(0)
            }

            60% {
                transform: translateY(-6px)
            }
        }

        .back-arrow {
            animation: bounceUp 1.4s ease infinite;
            display: block
        }

        /* modal image prev/next for car↔pkg */
        .img-nav-prev,
        .img-nav-next {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, .32);
            border: 1px solid rgba(255, 255, 255, .1);
            cursor: pointer;
            color: rgba(255, 255, 255, .6);
            font-size: 20px;
            line-height: 1;
            padding: 14px 9px;
            transition: all .18s;
            z-index: 10;
            border-radius: 6px;
            backdrop-filter: blur(4px);
            font-family: 'Syne', sans-serif
        }

        .img-nav-prev {
            left: 10px
        }

        .img-nav-next {
            right: 10px
        }

        .img-nav-prev:hover,
        .img-nav-next:hover {
            color: #fff;
            background: rgba(0, 0, 0, .55);
            border-color: rgba(255, 255, 255, .25)
        }

        .img-nav-prev:disabled,
        .img-nav-next:disabled {
            opacity: .15;
            cursor: default;
            pointer-events: none
        }

        .modal-view-dots {
            position: absolute;
            bottom: 14px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            gap: 8px;
            z-index: 20;
            align-items: center
        }

        .modal-dot {
            width: 7px;
            height: 7px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, .4);
            background: transparent;
            cursor: pointer;
            transition: all .2s;
            padding: 0
        }

        .modal-dot.active {
            background: #fff;
            border-color: #fff
        }

        .modal-dot:hover:not(.active) {
            border-color: rgba(255, 255, 255, .8)
        }

        .filters {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            align-items: center
        }

        .filter-group {
            display: flex;
            gap: 5px;
            flex-wrap: wrap
        }

        .chip {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 1px solid var(--border2);
            background: transparent;
            color: var(--gray);
            padding: 4px 10px;
            border-radius: 2px;
            cursor: pointer;
            transition: all .12s;
            white-space: nowrap
        }

        .chip:hover {
            border-color: var(--mid);
            color: var(--white)
        }

        .chip.active {
            border-color: var(--yellow);
            color: var(--yellow);
            background: rgba(255, 224, 0, .06)
        }

        .chip-color {
            padding: 4px 8px
        }

        .color-dot {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 4px;
            vertical-align: middle
        }

        .filter-sep {
            width: 1px;
            height: 16px;
            background: var(--border2);
            margin: 0 4px
        }

        /* ── GRID ── */
        .grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px
        }

        .tile {
            display: flex;
            flex-direction: column;
            gap: 8px;
            cursor: pointer;
            opacity: 0;
            animation: fadeUp .4s ease forwards;
            perspective: 900px
        }

        @keyframes fadeUp {
            from {
                opacity: 0;
                transform: translateY(6px)
            }

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

        .tile.hidden {
            display: none
        }

        .tile-inner {
            aspect-ratio: 1;
            position: relative;
            transform-style: preserve-3d;
            transition: transform .7s cubic-bezier(.4, .2, .2, 1);
            border-radius: 12px
        }

        .tile:hover .tile-inner {
            transform: rotateY(180deg)
        }

        .tile-front,
        .tile-back {
            position: absolute;
            inset: 0;
            border-radius: 12px;
            backface-visibility: hidden;
            -webkit-backface-visibility: hidden;
            overflow: hidden
        }

        .tile-front {
            background: var(--bg3);
            border: none;
            outline: none
        }

        .tile-front img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .tile-back {
            background: transparent;
            border: none;
            outline: none;
            transform: rotateY(180deg);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0
        }

        .tile-back img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .tile-meta {
            padding: 0 2px
        }

        .meta-line {
            display: flex;
            align-items: baseline;
            gap: 5px
        }

        .meta-num {
            display: none
        }

        .meta-name {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: .5px;
            text-transform: uppercase;
            color: var(--mid);
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis
        }

        /* grid empty */
        .grid-state {
            grid-column: 1/-1;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 280px;
            gap: 10px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray)
        }

        .spinner {
            width: 16px;
            height: 16px;
            border: 2px solid var(--border);
            border-top-color: var(--yellow);
            border-radius: 50%;
            animation: spin .7s linear infinite
        }

        @keyframes heroLogoFloat {

            0%,
            100% {
                transform: translateY(0) rotate(0deg)
            }

            33% {
                transform: translateY(-6px) rotate(0.3deg)
            }

            66% {
                transform: translateY(-3px) rotate(-0.2deg)
            }
        }

        #heroLogo {
            animation: heroLogoFloat 6s ease-in-out infinite
        }

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

        @keyframes clickHintFloat {

            0%,
            100% {
                transform: translateX(-50%) translateY(0)
            }

            50% {
                transform: translateX(-50%) translateY(-5px)
            }
        }

        /* ── CREATIVE PROCESS ── */
        .cp-intro {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            color: var(--mid);
            line-height: 1.8;
            margin-bottom: 56px;
            max-width: 640px;
            text-align: center;
            margin-left: auto;
            margin-right: auto
        }

        .cp-phase {
            margin-bottom: 0;
            padding-bottom: 0
        }

        .cp-phase-head {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 20px
        }

        .cp-phase-num {
            font-family: 'Russo One', sans-serif;
            font-size: 36px;
            color: var(--yellow);
            opacity: 1;
            letter-spacing: 1px;
            line-height: 1;
            flex-shrink: 0
        }

        .cp-phase-title {
            font-family: 'Russo One', sans-serif;
            font-size: 22px;
            color: var(--white);
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .cp-body {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            color: var(--gray);
            line-height: 1.9;
            margin-bottom: 16px
        }

        .cp-ph-box {
            background: var(--bg2);
            border: 1px dashed var(--border2);
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .cp-ph-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--border2);
            text-align: center
        }

        .cp-arrow {
            display: none
        }

        .cp-media-single {
            width: 100%;
            border-radius: 8px;
            overflow: hidden;
            background: var(--bg2);
            display: flex;
            align-items: center;
            justify-content: center
        }

        .cp-media-single img,
        .cp-media-single video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .cp-media-ph {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--border2);
            text-align: center
        }

        .cp-sketch-pile {
            position: relative;
            height: 260px;
            margin: 20px 0 28px
        }

        .cp-sketch-pile .sp-img {
            position: absolute;
            border-radius: 6px;
            overflow: hidden;
            border: 1px solid var(--border2);
            box-shadow: 0 8px 24px rgba(0, 0, 0, .55)
        }

        .cp-sketch-pile .sp-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .cp-compare {
            display: grid;
            grid-template-columns: 1fr 40px 1fr;
            align-items: center;
            gap: 8px;
            margin: 16px 0
        }

        .cp-compare-cell {
            background: var(--bg2);
            border: 1px dashed var(--border2);
            border-radius: 8px;
            overflow: hidden;
            aspect-ratio: 1
        }

        .cp-compare-cell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        /* hover: enlarge + glow on all drop page images */
        #page-drop img:not([aria-hidden]) {
            transition: transform .45s cubic-bezier(.22, 1, .36, 1), filter .45s ease, box-shadow .45s ease;
            cursor: default
        }

        #page-drop img:not([aria-hidden]):hover {
            transform: scale(1.04);
            filter: brightness(1.12) saturate(1.1);
            box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
            z-index: 2;
            position: relative
        }

        /* ensure cells clip on hover */
        .cp-compare-cell,
        .cp-media-single,
        .cp-phase [style*="border-radius"] {
            overflow: hidden
        }

        .cp-compare-mid {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px
        }

        .cp-compare-arrow-anim {
            overflow: visible
        }

        .cp-compare-arrow-path {
            stroke-dasharray: 5 5;
            animation: cpDash .8s linear infinite
        }

        .cp-compare-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            text-align: center;
            margin-top: 6px
        }

        .cp-trail {
            display: flex;
            align-items: flex-start;
            gap: 0;
            margin: 20px 0 32px;
            overflow-x: auto;
            padding-bottom: 8px
        }

        .cp-trail-step {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 6px;
            flex-shrink: 0
        }

        .cp-trail-cell {
            width: 88px;
            aspect-ratio: 1;
            background: var(--bg2);
            border: 1px dashed var(--border2);
            border-radius: 6px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .cp-trail-cell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .cp-trail-cell .cp-media-ph {
            font-size: 12px
        }

        .cp-trail-lbl {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            text-align: center
        }

        .cp-trail-sep {
            flex-shrink: 0;
            padding: 0 4px;
            margin-top: 38px
        }

        .cp-closing {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            color: var(--mid);
            line-height: 1.85;
            margin: 64px 0 28px;
            padding-top: 0
        }

        .cp-closing strong {
            color: var(--white);
            font-weight: 700
        }

        .cp-closing-date {
            font-family: 'Russo One', sans-serif;
            font-size: 22px;
            color: var(--yellow);
            letter-spacing: 1px;
            margin-top: 20px
        }

        .cp-cta {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 28px;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: var(--yellow);
            color: var(--bg);
            padding: 14px 28px;
            border-radius: 4px;
            text-decoration: none;
            cursor: pointer;
            border: none;
            transform: skewX(-8deg);
            transition: opacity .15s
        }

        .cp-cta:hover {
            opacity: .88
        }

        .cp-cta span {
            display: inline-block;
            transform: skewX(8deg)
        }

        .cp-tweet-wrap {
            margin: 16px 0;
            border-radius: 8px;
            overflow: hidden;
            border: 1px solid var(--border)
        }


        /* ── SLANTED BUTTONS ── */
        .chip,
        .btn-save,
        .btn-tweet,
        .img-toggle-btn,
        .theme-toggle button,
        .back-to-top,
        a.buy-btn,
        .hero-scroll,
        .coming-soon-tag {
            transform: skewX(-8deg);
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .chip>*,
        .btn-save>*,
        .btn-tweet>*,
        .img-toggle-btn>*,
        .theme-toggle button>*,
        a.buy-btn>* {
            display: inline-block;
            transform: skewX(8deg)
        }

        .no-results {
            grid-column: 1/-1;
            text-align: center;
            padding: 80px 20px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray)
        }

        /* ── SECTION DIVIDER ── */
        .section-divider {
            padding: 0 40px
        }

        /* ── INNER PAGES ── */
        .inner-page {
            max-width: 800px;
            margin: 0 auto;
            padding: 80px 40px 120px
        }

        #page-drop .inner-page {
            max-width: 1040px;
            padding: 52px 40px 100px
        }

        .inner-eyebrow {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--yellow);
            margin-bottom: 16px;
            opacity: .8
        }

        .inner-title {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(48px, 7vw, 80px);
            text-transform: uppercase;
            color: var(--white);
            line-height: .92;
            letter-spacing: 2px;
            margin-bottom: 32px
        }

        .inner-divider {
            margin: 0 0 40px
        }

        .inner-body p {
            font-family: 'Syne', sans-serif;
            font-size: 16px;
            line-height: 1.75;
            color: var(--mid);
            margin-bottom: 20px
        }

        .inner-body p:last-child {
            margin-bottom: 0
        }

        .inner-body h2 {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(28px, 4vw, 42px);
            color: var(--white);
            text-transform: uppercase;
            letter-spacing: 1px;
            margin: 56px 0 12px;
            line-height: 1
        }

        /* ── MODAL ── */
        .modal-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .5);
            z-index: 600;
            align-items: center;
            justify-content: center;
            padding: 24px 72px;
            backdrop-filter: blur(6px);
            -webkit-backdrop-filter: blur(6px)
        }

        .modal-overlay.open {
            display: flex
        }

        .modal {
            background: var(--bg2);
            border: 1px solid var(--border2);
            border-radius: 16px;
            width: 100%;
            max-width: 1060px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            position: relative;
            overflow: hidden;
            animation: mIn .25s cubic-bezier(.34, 1.2, .64, 1) forwards
        }

        @keyframes mIn {
            from {
                opacity: 0;
                transform: scale(.96)
            }

            to {
                opacity: 1;
                transform: scale(1)
            }
        }

        .modal-nav-prev,
        .modal-nav-next {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(0, 0, 0, .18);
            border: 1px solid rgba(255, 255, 255, .08);
            cursor: pointer;
            color: rgba(255, 255, 255, .3);
            font-size: 28px;
            line-height: 1;
            padding: 20px 8px;
            transition: all .2s;
            z-index: 610;
            font-family: 'Syne', sans-serif;
            border-radius: 8px;
            backdrop-filter: blur(4px)
        }

        .modal-nav-prev {
            left: 16px
        }

        .modal-nav-next {
            right: 16px
        }

        .modal-nav-prev:hover,
        .modal-nav-next:hover {
            color: var(--yellow);
            background: rgba(0, 0, 0, .35);
            border-color: rgba(255, 224, 0, .2)
        }

        .modal-nav-prev:disabled,
        .modal-nav-next:disabled {
            opacity: .04;
            cursor: default;
            pointer-events: none
        }

        .modal-close {
            position: absolute;
            top: 14px;
            right: 14px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            padding: 4px 6px;
            z-index: 20;
            transition: color .15s
        }

        .modal-close:hover {
            color: var(--white)
        }

        .modal-left {
            position: relative;
            background: var(--bg);
            aspect-ratio: 1;
            overflow: hidden
        }

        .modal-left img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .modal-left-ph {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            color: var(--border2)
        }

        /* grad line on modal image bottom */
        .modal-img-grad {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0
        }

        /* modal image toggle */
        .img-view-toggle {
            position: absolute;
            top: 12px;
            left: 12px;
            display: flex;
            gap: 4px;
            z-index: 10
        }

        .img-toggle-btn {
            background: rgba(0, 0, 0, .45);
            border: 1px solid rgba(255, 255, 255, .12);
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .5);
            padding: 4px 10px;
            border-radius: 4px;
            transition: all .15s;
            text-shadow: 0 1px 4px rgba(0, 0, 0, .8);
            backdrop-filter: blur(4px)
        }

        .img-toggle-btn.active {
            background: rgba(255, 255, 255, .15);
            color: #fff;
            border-color: rgba(255, 255, 255, .3)
        }

        .img-toggle-btn:hover:not(.active) {
            color: #fff;
            border-color: rgba(255, 255, 255, .2)
        }

        /* fullscreen image overlay */
        #fsOverlay {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 900;
            background: rgba(0, 0, 0, .96);
            align-items: center;
            justify-content: center;
            cursor: zoom-out
        }

        #fsOverlay.open {
            display: flex
        }

        #fsOverlay img {
            max-width: 95vw;
            max-height: 95vh;
            object-fit: contain;
            border-radius: 4px
        }

        .img-fullscreen {
            position: absolute;
            bottom: 14px;
            right: 14px;
            z-index: 20;
            background: none;
            border: none;
            cursor: pointer;
            color: rgba(255, 255, 255, .45);
            text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
            transition: color .15s;
            padding: 0;
            display: flex;
            align-items: center
        }

        .img-fullscreen:hover {
            color: #fff
        }

        .img-fullscreen svg {
            width: 14px;
            height: 14px;
            fill: currentColor
        }

        .img-share {
            position: absolute;
            bottom: 14px;
            left: 14px;
            display: flex;
            gap: 12px;
            z-index: 20
        }

        .img-btn {
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: rgba(255, 255, 255, .55);
            display: flex;
            align-items: center;
            gap: 5px;
            text-shadow: 0 1px 6px rgba(0, 0, 0, .9);
            transition: color .15s;
            padding: 0
        }

        .img-btn:hover {
            color: #fff
        }

        .img-btn svg {
            width: 12px;
            height: 12px;
            fill: currentColor;
            flex-shrink: 0
        }

        .modal-right {
            padding: 36px 32px 28px;
            display: flex;
            flex-direction: column;
            overflow-y: auto;
            max-height: min(90svh, 600px);
            background: var(--bg2)
        }

        .modal-name {
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(26px, 3vw, 40px);
            color: var(--white);
            text-transform: uppercase;
            line-height: .95;
            letter-spacing: -1px;
            margin-bottom: 20px
        }

        /* attrs */
        .attrs {
            margin-bottom: 24px
        }

        .attr-row {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 10px 0;
            border-bottom: 1px solid var(--border)
        }

        .attr-row:first-child {
            border-top: 1px solid var(--border)
        }

        .attr-label {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 600;
            letter-spacing: .5px;
            text-transform: uppercase;
            color: var(--gray)
        }

        .attr-val {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--mid);
            text-transform: uppercase;
            letter-spacing: .5px
        }

        /* stats */
        .stats {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 28px
        }

        .stat-row {
            display: grid;
            grid-template-columns: 100px 1fr 24px;
            align-items: center;
            gap: 12px
        }

        .stat-label {
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--mid)
        }

        .stat-bar {
            height: 7px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden
        }

        .stat-fill {
            height: 100%;
            border-radius: 3px;
            background: var(--yellow);
            transition: width .85s cubic-bezier(.4, 0, .2, 1);
            width: 0%
        }

        #statSpeed {
            background: var(--yellow)
        }

        #statAccel {
            background: var(--red)
        }

        #statHandling {
            background: var(--blue)
        }

        .stat-num {
            font-family: 'Syne', sans-serif;
            font-size: 10px;
            color: var(--yellow);
            text-align: right
        }

        #statSpeedN,
        #statAccelN,
        #statHandlingN {
            color: var(--mid)
        }

        .modal-divider {
            height: 1px;
            background: var(--border);
            margin: 4px 0 24px
        }

        .modal-actions {
            margin-top: auto;
            display: flex;
            flex-direction: row;
            gap: 8px;
            padding-top: 8px
        }

        .btn-minted {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 14px 20px;
            border: 1px solid var(--border2);
            border-radius: 4px;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 600;
            color: var(--mid);
            cursor: not-allowed;
            letter-spacing: .3px
        }

        .mint-sub {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--mid);
            text-align: center;
            opacity: .6
        }

        /* ── SHARE ── */
        .share-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, .9);
            z-index: 700;
            align-items: center;
            justify-content: center;
            padding: 24px;
            backdrop-filter: blur(20px)
        }

        .share-overlay.open {
            display: flex
        }

        .share-modal {
            background: var(--bg2);
            border: 1px solid var(--border2);
            border-radius: 6px;
            padding: 28px;
            width: 100%;
            max-width: 420px;
            display: flex;
            flex-direction: column;
            gap: 16px
        }

        .share-hdr {
            display: flex;
            justify-content: space-between;
            align-items: center
        }

        .share-lbl {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2.5px;
            text-transform: uppercase;
            color: var(--gray)
        }

        .share-x {
            background: none;
            border: none;
            cursor: pointer;
            font-size: 14px;
            color: var(--gray);
            transition: color .12s;
            font-family: 'Syne', sans-serif
        }

        .share-x:hover {
            color: var(--white)
        }

        #sharePreview {
            width: 100%;
            aspect-ratio: 1;
            border-radius: 4px;
            overflow: hidden;
            background: var(--bg3);
            border: 1px solid var(--border);
            display: flex;
            align-items: center;
            justify-content: center
        }

        #sharePreview img {
            width: 100%;
            height: 100%;
            object-fit: cover
        }

        #shareText {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            color: var(--mid);
            line-height: 1.75;
            background: var(--bg3);
            padding: 14px;
            border-radius: 4px;
            border: 1px solid var(--border);
            white-space: pre-wrap;
            border-left: 2px solid var(--yellow)
        }

        .share-btns {
            display: flex;
            gap: 8px
        }

        .btn-save {
            flex: 1;
            padding: 13px;
            background: var(--yellow);
            color: var(--bg);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            transition: opacity .15s
        }

        .btn-save:hover {
            opacity: .88
        }

        .btn-tweet {
            flex: 1;
            padding: 13px;
            background: var(--yellow);
            color: var(--bg);
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            transition: opacity .15s;
            letter-spacing: .2px
        }

        .btn-tweet:hover {
            opacity: .88
        }

        .share-hint {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            text-align: center;
            line-height: 1.7;
            opacity: .55
        }

        /* ── DROP PAGE VISUAL SECTIONS ── */
        .drop-section {
            margin-bottom: 72px
        }

        #page-drop .drop-section {
            margin-bottom: 36px
        }

        .drop-label {
            display: none
        }

        .drop-title {
            font-family: 'Russo One', sans-serif;
            font-size: clamp(20px, 2.5vw, 28px);
            color: var(--white);
            line-height: 1.1;
            letter-spacing: .5px;
            margin: 32px 0 20px;
            text-transform: uppercase;
            text-align: center
        }

        #page-drop .drop-title {
            margin: 100px 0 36px;
            text-align: center
        }

        #page-drop .cp-phase-head {
            justify-content: center;
            margin-bottom: 40px;
            margin-top: 110px
        }

        /* quote — just a bold inline text, no decorative nonsense */
        .drop-quote {
            display: none
        }

        /* tags */
        .drop-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 16px 0
        }

        .drop-tag {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 1px solid var(--border2);
            color: var(--mid);
            padding: 5px 12px;
            display: inline-block;
            transform: skewX(-8deg)
        }

        /* timeline */
        .drop-timeline {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            gap: 0;
            margin: 20px 0;
            align-items: center
        }

        .drop-timeline-step {
            background: var(--bg2);
            border: 1px solid var(--border2);
            padding: 32px 36px;
            clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%)
        }

        .drop-tl-date {
            font-family: 'Russo One', sans-serif;
            font-size: 36px;
            color: var(--white);
            line-height: 1;
            margin-bottom: 14px
        }

        .drop-tl-time {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--yellow);
            margin-bottom: 16px;
            opacity: .9
        }

        .drop-tl-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gray)
        }

        .drop-tl-desc {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            color: var(--mid);
            margin-top: 8px;
            line-height: 1.6
        }

        .drop-tl-arrow {
            text-align: center;
            padding: 0 20px;
            font-size: 24px;
            color: var(--border2)
        }

        /* process steps — more gap between boxes */
        .drop-process-intro {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 24px
        }

        .drop-process-step {
            background: var(--bg2);
            border: 1px solid var(--border);
            padding: 24px 28px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%)
        }

        .drop-process-num {
            font-family: 'Russo One', sans-serif;
            font-size: 32px;
            color: var(--border2);
            line-height: 1
        }

        .drop-process-text {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            color: var(--mid);
            line-height: 1.5
        }

        /* phase blocks */
        .phase-block {
            margin-bottom: 52px
        }

        .phase-header {
            display: flex;
            align-items: baseline;
            gap: 14px;
            margin-bottom: 20px
        }

        .phase-num {
            font-family: 'Russo One', sans-serif;
            font-size: 13px;
            color: var(--yellow);
            opacity: .6;
            letter-spacing: 1px
        }

        .phase-title {
            font-family: 'Russo One', sans-serif;
            font-size: 18px;
            color: var(--white);
            text-transform: uppercase;
            letter-spacing: .5px
        }

        .phase-desc {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            color: var(--mid);
            line-height: 1.6;
            margin-bottom: 16px
        }

        .phase-media {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px
        }

        .phase-media.two-up {
            grid-template-columns: repeat(2, 1fr)
        }

        .phase-media-cell {
            background: var(--bg3);
            border: 1px solid var(--border);
            clip-path: polygon(4px 0%, 100% 0%, calc(100% - 4px) 100%, 0% 100%);
            aspect-ratio: 4/3;
            overflow: hidden;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center
        }

        .phase-media-cell.wide {
            grid-column: span 2;
            aspect-ratio: 16/9
        }

        .phase-media-cell video,
        .phase-media-cell img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .phase-media-cell .ph {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--border2);
            text-align: center;
            padding: 20px
        }

        /* featured cars grid */
        .featured-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2px;
            margin: 0
        }

        .featured-tile {
            overflow: hidden;
            background: var(--bg3);
            border: 1px solid var(--border);
            clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%)
        }

        .featured-tile img {
            width: 100%;
            aspect-ratio: 4/3;
            object-fit: cover;
            display: block;
            opacity: .85;
            transition: opacity .2s
        }

        .featured-tile:hover img {
            opacity: 1
        }

        .featured-tile-name {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            padding: 8px 10px
        }

        /* creative process grid */
        .process-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin: 32px 0
        }

        .process-cell {
            aspect-ratio: 1;
            border-radius: 10px;
            overflow: hidden;
            background: var(--bg3);
            border: 1px solid var(--border2);
            display: flex;
            align-items: center;
            justify-content: center
        }

        .process-cell img,
        .process-cell video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block
        }

        .process-cell-placeholder {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--border2);
            text-align: center;
            padding: 12px
        }

        .process-video-cell {
            aspect-ratio: 16/9;
            grid-column: span 2
        }

        /* ── HAMBURGER ── */
        .hamburger-btn {
            display: none;
            flex-direction: column;
            justify-content: center;
            gap: 5px;
            background: none;
            border: none;
            cursor: pointer;
            padding: 6px 4px;
            z-index: 510;
            flex-shrink: 0
        }
        .hamburger-btn span {
            display: block;
            width: 22px;
            height: 2px;
            background: var(--white);
            border-radius: 1px;
            transition: all .22s
        }
        .hamburger-btn.open span:nth-child(1) {
            transform: translateY(7px) rotate(45deg)
        }
        .hamburger-btn.open span:nth-child(2) {
            opacity: 0
        }
        .hamburger-btn.open span:nth-child(3) {
            transform: translateY(-7px) rotate(-45deg)
        }

        /* ── MOBILE MENU OVERLAY ── */
        .mob-menu-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.88);
            z-index: 540;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px)
        }
        .mob-menu-overlay.open { display: flex }
        .mob-menu {
            background: var(--bg2);
            border: 1px solid var(--border2);
            border-radius: 20px;
            padding: 48px 40px 36px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0;
            min-width: 280px;
            width: calc(100vw - 48px);
            max-width: 340px;
            position: relative
        }
        .mob-menu-close {
            position: absolute;
            top: 16px;
            right: 18px;
            background: none;
            border: none;
            cursor: pointer;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            padding: 4px 6px;
            transition: color .15s
        }
        .mob-menu-close:hover { color: var(--white) }
        .mob-menu-link {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--gray);
            text-decoration: none;
            cursor: pointer;
            padding: 16px 0;
            width: 100%;
            text-align: center;
            border-bottom: 1px solid var(--border);
            transition: color .12s;
            background: none;
            border-left: none;
            border-right: none;
            border-top: none;
            display: block
        }
        .mob-menu-link:first-of-type { border-top: 1px solid var(--border) }
        .mob-menu-link:hover { color: var(--white) }
        .mob-menu-x-row {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            padding-top: 20px
        }
        .mob-menu-x-icon {
            color: var(--gray);
            transition: color .12s;
            display: flex;
            align-items: center
        }
        .mob-menu-x-icon:hover { color: var(--white) }

        @media(max-width:1024px) {
            .collection-layout {
                grid-template-columns: 160px 1fr;
                gap: 20px
            }
        }

        @media(max-width:900px) {
            .modal {
                grid-template-columns: 1fr;
                max-height: 90svh;
                overflow-y: auto
            }

            .modal-left {
                aspect-ratio: 1;
                max-height: 45svh
            }

            .modal-right {
                max-height: none;
                overflow-y: visible
            }

            .modal-overlay {
                padding: 16px 50px
            }
        }

        @media(max-width:680px) {
            /* Header */
            header {
                padding: 0 16px;
                gap: 10px;
                grid-template-columns: auto 1fr auto
            }
            header nav { display: none }
            .header-right .buy-btn-wrap { display: none }
            .header-right .claim-btn { display: none }
            .header-right .theme-toggle { display: none }
            .header-right { gap: 0 }
            .hamburger-btn { display: flex }

            /* Hero */
            .hero-content {
                padding: 40px 20px 32px !important
            }
            .countdown {
                gap: 6px
            }
            .cd-block {
                min-width: 56px;
                gap: 5px
            }
            .cd-num {
                font-size: clamp(32px, 9vw, 52px)
            }
            .cd-sep {
                font-size: 32px;
                padding-top: 2px
            }
            .cd-label {
                font-size: 12px;
                letter-spacing: 2px
            }
            .hero-phases {
                margin-top: 16px !important;
                margin-bottom: 20px !important
            }
            .phase-row {
                font-size: 12px
            }

            /* Collection */
            .collection {
                padding: 32px 14px 72px
            }
            .collection-layout {
                grid-template-columns: 1fr;
                gap: 0
            }
            .filter-sidebar {
                display: none !important
            }
            .mob-filter-bar {
                display: flex !important
            }
            .grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 8px
            }

            /* Modal — bottom sheet */
            .modal-overlay {
                padding: 0;
                align-items: flex-end
            }
            .modal {
                border-radius: 20px 20px 0 0;
                max-height: 96svh;
                max-width: 100%;
                border-left: none;
                border-right: none;
                border-bottom: none;
                overflow-y: auto
            }
            .modal-left {
                aspect-ratio: unset;
                height: auto;
                max-height: none;
                border-radius: 20px 20px 0 0;
                background: var(--bg);
                overflow: visible
            }
            #modalImgWrap {
                min-height: 0 !important;
                height: auto !important
            }
            #modalImgWrap img {
                width: 100% !important;
                height: auto !important;
                object-fit: unset !important;
                display: block !important
            }
            .modal-view-dots {
                bottom: 8px
            }
            .img-fullscreen { display: none }
            .modal-right {
                padding: 20px 20px 32px;
                max-height: none;
                overflow-y: visible
            }
            .modal-close {
                top: 12px;
                right: 14px
            }
            .modal-nav-prev {
                left: 4px;
                top: 30%;
                padding: 14px 7px;
                font-size: 22px
            }
            .modal-nav-next {
                right: 4px;
                top: 30%;
                padding: 14px 7px;
                font-size: 22px
            }

            /* Stats — label above bar */
            .stats {
                gap: 10px;
                margin-bottom: 20px
            }
            .stat-row {
                display: flex;
                flex-direction: column;
                gap: 5px;
                width: 100%
            }
            .stat-label {
                font-size: 12px;
                letter-spacing: 2px
            }
            .stat-bar {
                width: 100%;
                height: 6px
            }
            .stat-num { display: none }

            /* Drop page — Aquamarine Cruiser: hide on mobile */
            #featuredGrid {
                display: none
            }

/* Drop page — reduce title/paragraph gaps */
#page-drop .inner-body .cp-phase-head {
    margin-top: 24px !important;
    margin-bottom: 8px !important
}
#page-drop .cp-phase {
    margin-bottom: 24px !important
}
#page-drop .cp-phase p,
#page-drop .cp-phase [style*="margin-top:64px"] {
    margin-top: 20px !important;
    margin-bottom: 20px !important
}
#page-drop .cp-phase [style*="gap:40px"] {
    gap: 16px !important
}
#page-drop .cp-phase [style*="gap:24px"] {
    margin-top: 40px !important;
    gap: 72px !important
}
#page-drop .cp-phase .cp-body {
    margin-bottom: 8px !important
}
#page-drop .cp-closing-date {
    margin-top: 24px !important;
    margin-bottom: 24px !important               
}
#page-drop .cp-phase:nth-child(3) .cp-media-single {
    margin-bottom: 32px
}
#page-drop .cp-phase:nth-child(4) [style*="position:relative;height:280px"] {
    height: 160px !important
}
#page-drop .cp-phase:nth-child(6) [style*="width:80%"] {
    margin-bottom: 32px !important
}
#page-drop .cp-phase:nth-child(5) .cp-compare {
    width: 85% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    gap: 16px !important
}
            /* Drop page — phase 04 pictures: single column, same size */
            #page-drop .cp-phase [style*="width:80%"] {
                width: 100% !important
            }

            /* Inner pages */
            .inner-page {
                padding: 48px 18px 72px
            }
            #page-drop .inner-page {
                padding: 36px 18px 72px
            }
            .section-divider {
                padding: 0 14px
            }

            /* Drop page — inline grid overrides */
            #page-drop [style*="grid-template-columns:repeat(4,1fr)"] {
                grid-template-columns: repeat(2, 1fr) !important
            }
            #page-drop [style*="grid-template-columns:1fr 220px"] {
                grid-template-columns: 1fr !important
            }
            #page-drop [style*="grid-template-columns:1fr 1fr;gap:40px"] {
                grid-template-columns: 1fr !important
            }
            #page-drop [style*="grid-template-columns:1fr 1fr;gap:24px"] {
                grid-template-columns: 1fr !important
            }
            #page-drop [style*="grid-template-columns:1fr 1fr;gap:32px"] {
                grid-template-columns: 1fr !important
            }
            .drop-timeline {
                grid-template-columns: 1fr !important
            }
            .drop-tl-arrow {
                display: none
            }
            .drop-process-intro {
                grid-template-columns: 1fr !important
            }
            .cp-compare {
                grid-template-columns: 1fr !important
            }
            .cp-compare-mid {
                display: none
            }

            /* Process / featured grids */
            .featured-grid {
                grid-template-columns: 1fr 1fr
            }
            .process-grid {
                grid-template-columns: 1fr 1fr
            }
            .process-video-cell {
                grid-column: span 2
            }
            .phase-media {
                grid-template-columns: 1fr 1fr
            }

            /* Share modal */
            .share-modal {
                padding: 20px 18px
            }
        }

        @media(max-width:420px) {
            header {
                padding: 0 12px
            }
            .grid {
                gap: 6px
            }
            .collection {
                padding: 24px 12px 60px
            }
            .cd-block {
                min-width: 44px
            }
            .cd-num {
                font-size: clamp(26px, 10vw, 38px)
            }
            .cd-sep {
                font-size: 22px
            }
            .inner-page {
                padding: 36px 14px 60px
            }
            #page-drop .inner-page {
                padding: 28px 14px 60px
            }
            .modal-right {
                padding: 16px 16px 28px
            }
            .stat-label {
                font-size: 12px
            }
        }

        /* ── HERO BUTTONS ── */
        .hero-btns {
            display: flex;
            gap: 12px;
            margin-top: 8px;
            flex-wrap: wrap;
            justify-content: center
        }
        .hero-btn-explore {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            border: 1px solid var(--border2);
            background: transparent;
            padding: 13px 26px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transform: skewX(-8deg);
            transition: color .15s, border-color .15s
        }
        .hero-btn-explore > * { display: inline-block; transform: skewX(8deg) }
        .hero-btn-explore:hover { color: var(--white); border-color: var(--mid) }
        .hero-btn-claim {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--bg);
            background: var(--yellow);
            border: 1px solid var(--yellow);
            padding: 13px 26px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            transform: skewX(-8deg);
            transition: opacity .15s
        }
        .hero-btn-claim > * { display: inline-block; transform: skewX(8deg) }
        .hero-btn-claim:hover { opacity: .88 }

        /* ── HEADER CLAIM BTN ── */
        .claim-btn {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--bg) !important;
            background: var(--yellow) !important;
            border: 1px solid var(--yellow) !important;
            padding: 7px 16px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            transform: skewX(-8deg);
            transition: opacity .15s;
            border-radius: 0
        }
        .claim-btn > span { display: inline-block; transform: skewX(8deg) }
        .claim-btn:hover { opacity: .88 }

        /* ── AVAILABILITY BADGE ── */
        .badge-available {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #4dcc8f;
            background: rgba(77,204,143,.12);
            border: 1px solid rgba(77,204,143,.3);
            padding: 3px 8px;
            flex-shrink: 0
        }
        .badge-available::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #4dcc8f;
            flex-shrink: 0
        }
        .badge-sold {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: #cc6666;
            background: rgba(204,102,102,.1);
            border: 1px solid rgba(204,102,102,.25);
            padding: 3px 8px;
            flex-shrink: 0
        }
        .badge-sold::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #cc6666;
            flex-shrink: 0
        }
        .tile-status { display: block }
        .tile-status .badge-listed {
            color: #4dcc8f;
            background: rgba(77,204,143,.12);
            border: 1px solid rgba(77,204,143,.3);
            font-size: 12px;
            padding: 3px 8px;
            letter-spacing: 1.5px
        }
        .tile-status .badge-listed::before {
            content: '';
            width: 5px;
            height: 5px;
            border-radius: 50%;
            background: #4dcc8f;
            flex-shrink: 0;
            display: inline-block
        }

        /* ── MODAL TRAITS GRID ── */
        .modal-name-row {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 6px
        }
        .modal-season {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--yellow);
            opacity: .75;
            margin-bottom: 18px
        }
        .traits-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
            margin-bottom: 24px
        }
        .trait-cell {
            background: var(--bg3);
            border: 1px solid var(--border);
            padding: 10px 12px;
            display: flex;
            flex-direction: column;
            gap: 10px
        }
        .trait-label {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1px;
            text-transform: none;
            color: var(--gray)
        }
        .trait-val {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 600;
            color: var(--white);
            letter-spacing: .3px
        }

        /* ── MODAL OWNER ── */
        .modal-owner {
            display: flex;
            align-items: center;
            gap: 8px;
            margin: 0 0 16px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1px;
            color: var(--gray)
        }
        .owner-addr {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            color: var(--mid);
            letter-spacing: .5px
        }
        .owner-copy {
            background: none;
            border: none;
            cursor: pointer;
            color: var(--gray);
            display: flex;
            align-items: center;
            padding: 2px;
            transition: color .12s
        }
        .owner-copy:hover { color: var(--white) }
        .owner-copy svg { width: 12px; height: 12px; fill: currentColor }

        /* ── MODAL CTA BUTTON ── */
        .modal-cta-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 13px 14px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            text-decoration: none;
            cursor: pointer;
            transform: skewX(-6deg);
            transition: opacity .15s;
            border: none
        }
        .modal-cta-btn > span { display: inline-block; transform: skewX(6deg) }
        .modal-cta-btn.available { background: var(--yellow); color: var(--bg) }
        .modal-cta-btn.sold { background: transparent; color: var(--mid); border: 1px solid var(--border2) }
        .modal-cta-btn:hover { opacity: .85 }

        .modal-card-dl-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            padding: 13px 14px;
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1.2px;
            text-transform: uppercase;
            color: var(--white);
            background: transparent;
            border: 1px solid var(--border2);
            cursor: pointer;
            transition: color .12s, border-color .12s;
            transform: skewX(-6deg)
        }
        .modal-card-dl-btn span { display: inline-block; transform: skewX(6deg) }
        .modal-card-dl-btn svg { width: 12px; height: 12px; flex-shrink: 0; transform: skewX(6deg) }
        .modal-card-dl-btn:hover { border-color: var(--mid) }


        /* ── GRID BOTTOM CTA ── */
        .grid-bottom {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            margin-top: 48px
        }
        .grid-claim-btn {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--bg);
            background: var(--yellow);
            border: none;
            padding: 14px 36px;
            cursor: pointer;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transform: skewX(-8deg);
            transition: opacity .15s
        }
        .grid-claim-btn > * { display: inline-block; transform: skewX(8deg) }
        .grid-claim-btn:hover { opacity: .88 }

        /* ── IMG NAV ARROWS IN MODAL ── */
        .modal-img-arrow {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 36px;
            background: transparent;
            border: none;
            color: rgba(255,255,255,.85);
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            z-index: 12;
            transition: color .15s;
            font-size: 26px;
            font-family: serif;
            line-height: 1;
            text-shadow: 0 1px 8px rgba(0,0,0,.9)
        }
        .modal-img-arrow:hover { color: #fff }
        .modal-img-arrow.hidden { display: none }
        .modal-img-arrow-left { left: 0 }
        .modal-img-arrow-right { right: 0 }

        @media(max-width:680px) {
            .hero-btns { gap: 8px }
            .hero-btn-explore, .hero-btn-claim { font-size: 12px; padding: 10px 19px }
            .traits-grid { grid-template-columns: repeat(2, 1fr) }
        }
        /* ── YOUR COLLECTION PAGE ── */
        .yc-wrap {
            max-width: 900px;
            margin: 0 auto;
            padding: 64px 40px 120px;
            text-align: center
        }
        .yc-sub {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            color: var(--gray);
            line-height: 1.7;
            max-width: 480px;
            margin: 0 auto 28px
        }
        .yc-search-row {
            margin-bottom: 48px;
            display: flex;
            justify-content: center
        }
        .yc-search-box {
            display: flex;
            align-items: center;
            gap: 10px;
            border: 1px solid var(--border2);
            background: var(--bg2);
            padding: 0 14px;
            width: 100%;
            max-width: 800px;
            transition: border-color .15s;
            border-radius: 6px
        }
        .yc-search-box:focus-within {
            border-color: var(--mid)
        }
        .yc-search-icon {
            color: var(--gray);
            flex-shrink: 0
        }
        .yc-input {
            flex: 1;
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            letter-spacing: .5px;
            color: var(--white);
            background: transparent;
            border: none;
            outline: none;
            padding: 14px 0;
            min-width: 0
        }
        .yc-input::placeholder { color: var(--gray); opacity: .6 }
        .yc-clear-btn {
            background: none;
            border: none;
            color: var(--gray);
            cursor: pointer;
            font-size: 13px;
            padding: 4px;
            transition: color .12s;
            flex-shrink: 0
        }
        .yc-clear-btn:hover { color: var(--white) }
        .yc-state {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 14px;
            padding: 40px 0;
            color: var(--gray)
        }
        .yc-state-icon {
            font-size: 28px;
            opacity: .3
        }
        .yc-state-txt {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            opacity: .6
        }
        .yc-section-hdr {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 12px;
            margin-bottom: 20px;
            border-bottom: 1px solid var(--border);
            padding-bottom: 10px
        }
        .yc-section-title {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--mid)
        }
        .yc-section-count {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            color: var(--gray);
            opacity: .6
        }
        .yc-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 12px;
            margin-bottom: 8px
        }
        .yc-empty {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            opacity: .5;
            text-align: center;
            padding: 40px 0
        }

        /* ── ACHIEVEMENTS ── */
        .yc-ach-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px
        }
        .ach-card {
            background: var(--bg2);
            border: 1px solid var(--border);
            padding: 18px 16px;
            display: flex;
            flex-direction: column;
            gap: 10px;
            transition: border-color .15s;
            position: relative;
            overflow: hidden;
            text-align: left
        }
        .ach-card.unlocked {
            border: 1px solid var(--border);
            background: var(--bg2)
        }
        .ach-card.locked {
            opacity: .55
        }
        .ach-card-top {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px
        }
        .ach-icon {
            font-size: 26px;
            line-height: 1
        }
        .ach-badge {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            padding: 0;
            background: transparent;
            border: none
        }
        .ach-badge.unlocked {
            color: var(--yellow)
        }
        .ach-badge.locked {
            color: var(--gray);
            opacity: .6
        }
        .ach-name {
            font-family: 'Syne', sans-serif;
            font-size: 16px;
            font-weight: 700;
            letter-spacing: .3px;
            color: var(--white)
        }
        .ach-desc {
            font-family: 'Syne', sans-serif;
            font-size: 14px;
            letter-spacing: .3px;
            color: var(--gray);
            line-height: 1.5
        }
        .ach-progress {
            height: 5px;
            background: var(--border);
            border-radius: 3px;
            overflow: hidden;
            margin-top: 4px
        }
        .ach-progress-fill {
            height: 100%;
            background: var(--yellow);
            border-radius: 3px;
            transition: width .4s ease
        }
        .ach-card.locked .ach-progress-fill {
            background: var(--border2)
        }

        @media(max-width:680px) {
            .yc-wrap { padding: 32px 14px 72px }
            .yc-grid { grid-template-columns: repeat(2, 1fr); gap: 8px }
            .yc-ach-grid { grid-template-columns: 1fr 1fr; gap: 8px }
        }
        @media(max-width:420px) {
            .yc-ach-grid { grid-template-columns: 1fr }
            .yc-grid { grid-template-columns: repeat(2, 1fr) }
        }

        /* ── VISION STRIP (homepage) ── */
        .vision-strip {
            max-width: var(--max);
            margin: 0 auto;
            padding: 48px 40px 72px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 64px;
            align-items: start;
            border-bottom: none
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--yellow);
            margin-bottom: 20px
        }
        .vision-headline {
            font-family: 'Bebas Neue', 'Russo One', sans-serif;
            font-size: clamp(42px, 5vw, 68px);
            line-height: 1;
            color: var(--white);
            letter-spacing: 1px;
            margin-bottom: 24px
        }
        .vision-headline em {
            color: var(--yellow);
            font-style: normal
        }
        .vision-body {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            line-height: 1.85;
            color: var(--white);
            max-width: 520px
        }
        .vision-body strong { color: var(--white); font-weight: 600 }
        .vision-right {
            display: flex;
            flex-direction: column;
            gap: 28px;
            padding-top: 8px
        }
        .vision-trait-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px
        }
        .vision-trait-chip {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 1px solid var(--border2);
            color: var(--gray);
            padding: 5px 12px;
            transform: skewX(-5deg)
            cursor: default;
            user-select:none;
        }
        .vision-pull {
            font-family: 'Bebas Neue', 'Russo One', sans-serif;
            font-size: clamp(18px, 2vw, 22px);
            line-height: 1.1;
            color: var(--white);
            border-left: 3px solid var(--yellow);
            padding-left: 18px;
            opacity: 1
        }
        .vision-close {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            color: var(--mid);
            line-height: 1.8
        }
        .vision-close strong { color: var(--white) }

        /* ── ABOUT PAGE ── */
        .about-wrap {
            max-width: 1040px;
            margin: 0 auto;
            padding: 48px 0 80px
        }
        .about-section {
            padding: 48px 0;
            border-bottom: 1px solid var(--border)
        }
        .about-section:last-child { border-bottom: none }
        .about-num {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 4px;
            text-transform: uppercase;
            color: var(--yellow);
            opacity: .6;
            margin-bottom: 12px
        }
        .about-title {
            font-family: 'Bebas Neue', 'Russo One', sans-serif;
            font-size: clamp(36px, 5vw, 56px);
            line-height: 1;
            color: var(--white);
            margin-bottom: 32px
        }
        .about-body {
            font-family: 'Syne', sans-serif;
            font-size: 15px;
            line-height: 1.9;
            color: var(--gray)
        }
        .about-body strong { color: var(--white); font-weight: 600 }
        .about-body p { margin: 0 0 20px }
        .about-body p:last-child { margin: 0 }
        .about-pull {
            font-family: 'Bebas Neue', 'Russo One', sans-serif;
            font-size: clamp(28px, 4vw, 48px);
            line-height: 1.1;
            color: var(--white);
            border-left: 3px solid var(--yellow);
            padding-left: 20px;
            margin: 40px 0
        }
        .about-traits {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin: 28px 0
        }
        .about-trait {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            border: 1px solid var(--border2);
            color: var(--mid);
            padding: 7px 14px;
            transform: skewX(-5deg);
            display: inline-block;
            cursor: default;
            transition: color .15s, border-color .15s
        }
        .about-cta-row {
            display: flex;
            gap: 12px;
            margin-top: 48px;
            flex-wrap: wrap
        }

        @media(max-width:680px) {
            .vision-strip { grid-template-columns: 1fr; gap: 36px; padding: 48px 16px }
            .about-wrap { padding: 36px 16px 80px }
            .about-section { padding: 40px 0 }
        }
        .about-trait:nth-child(1):hover { border-color: #e8182c; color: #e8182c }
        .about-trait:nth-child(2):hover { border-color: #4488ff; color: #4488ff }
        .about-trait:nth-child(3):hover { border-color: #ffe000; color: #ffe000 }
        .about-trait:nth-child(4):hover { border-color: #e8182c; color: #e8182c }
        .about-trait:nth-child(5):hover { border-color: #4488ff; color: #4488ff }
        .about-trait:nth-child(6):hover { border-color: #ffe000; color: #ffe000 }
        .about-trait:nth-child(7):hover { border-color: #e8182c; color: #e8182c }
        .about-trait:nth-child(8):hover { border-color: #4488ff; color: #4488ff }
        .about-trait:nth-child(9):hover { border-color: #ffe000; color: #ffe000 }
        .about-trait:nth-child(10):hover { border-color: #e8182c; color: #e8182c }
        .about-trait:nth-child(11):hover { border-color: #4488ff; color: #4488ff }
        

        /* ── MODAL VIEW TABS ── */
        .modal-view-tabs {
            display: flex;
            gap: 20px;
            position: absolute;
            top: 14px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 20
        }
        .modal-tab {
            font-family: 'Syne', sans-serif;
            font-size: 11px;
            font-weight: 400;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255,255,255,.4);
            background: none;
            border: none;
            padding: 0;
            cursor: pointer;
            text-shadow: 0 1px 6px rgba(0,0,0,.9);
            transition: color .15s
        }
        .modal-tab:hover { color: rgba(255,255,255,.75) }
        .modal-tab.active { color: #fff; font-weight: 600 }

        /* ── TRAIT CHIP RAINBOW HOVER ── */
        .vision-trait-chip:nth-child(1):hover { border-color: #e8182c; color: #e8182c }
        .vision-trait-chip:nth-child(2):hover { border-color: #4488ff; color: #4488ff }
        .vision-trait-chip:nth-child(3):hover { border-color: #ffe000; color: #ffe000 }
        .vision-trait-chip:nth-child(4):hover { border-color: #e8182c; color: #e8182c }
        .vision-trait-chip:nth-child(5):hover { border-color: #4488ff; color: #4488ff }
        .vision-trait-chip:nth-child(6):hover { border-color: #ffe000; color: #ffe000 }
        .vision-trait-chip:nth-child(7):hover { border-color: #e8182c; color: #e8182c }
        .vision-trait-chip:nth-child(8):hover { border-color: #4488ff; color: #4488ff }
        .vision-trait-chip:nth-child(9):hover { border-color: #ffe000; color: #ffe000 }
        .vision-trait-chip:nth-child(10):hover { border-color: #e8182c; color: #e8182c }
        .vision-trait-chip { transition: color .15s, border-color .15s }

        /* ── GARAGE SECTION TITLES ── */
        .yc-h2 {
            font-family: 'Bebas Neue', 'Russo One', sans-serif;
            font-size: clamp(28px, 4vw, 42px);
            color: var(--white);
            letter-spacing: 1px;
            line-height: 1;
            margin-bottom: 6px
        }
        .yc-h2-sub {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            color: var(--gray);
            margin-bottom: 24px
        }

        /* ── ACH CARD HOVER (unlocked only) ── */
        .ach-card.unlocked {
            transition: background .2s, border-color .2s
        }
        .ach-card.unlocked:hover {
            background: rgba(255,255,255,.05);
            border-color: rgba(255,255,255,.15)
        }

        /* ── MOBILE FILTER BAR + POPUP ── */
        .mob-filter-bar {
            display: none;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 14px
        }
        .mob-filter-btn {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            border: 1px solid var(--border2);
            background: transparent;
            padding: 9px 18px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            transform: skewX(-6deg);
            transition: color .12s, border-color .12s;
            flex-shrink: 0
        }
        .mob-filter-btn > * { display: inline-block; transform: skewX(6deg) }
        .mob-filter-btn:hover { color: var(--white); border-color: var(--mid) }
        .mob-filter-btn.has-active { border-color: var(--yellow); color: var(--yellow); background: rgba(255,224,0,.06) }
        .mob-filter-count-txt {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            color: var(--gray)
        }
        .mob-filter-overlay {
            display: none;
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,.88);
            z-index: 550;
            align-items: flex-end;
            justify-content: center;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px)
        }
        .mob-filter-overlay.open { display: flex }
        .mob-filter-panel {
            background: var(--bg2);
            border: 1px solid var(--border2);
            border-radius: 20px 20px 0 0;
            width: 100%;
            max-height: 88svh;
            overflow-y: auto;
            padding: 24px 18px 32px;
            display: flex;
            flex-direction: column;
            gap: 20px
        }
        .mob-filter-hdr {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 4px
        }
        .mob-filter-title {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 3px;
            text-transform: uppercase;
            color: var(--mid)
        }
        .mob-filter-close {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: var(--gray);
            background: none;
            border: none;
            cursor: pointer;
            padding: 4px 6px;
            transition: color .12s
        }
        .mob-filter-close:hover { color: var(--white) }
        .mob-filter-ok {
            font-family: 'Syne', sans-serif;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 2px;
            text-transform: uppercase;
            background: var(--yellow);
            color: var(--bg);
            border: none;
            padding: 14px;
            cursor: pointer;
            border-radius: 4px;
            margin-top: 4px;
            transition: opacity .15s
        }
        .mob-filter-ok:hover { opacity: .88 }
        .mob-filter-clear {
            font-family: 'Syne', sans-serif;
            font-size: 12px;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            color: var(--gray);
            background: none;
            border: 1px solid var(--border);
            padding: 10px;
            cursor: pointer;
            transition: color .12s, border-color .12s
        }
        .mob-filter-clear:hover { color: var(--white); border-color: var(--border2) }
        /* ── ABOUT PAGE BOTTOM GRAD LINE FULL WIDTH ── */
        #aboutGradLine {
            width: 100vw;
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            margin: 0
        }

        /* ── ABOUT PAGE MOBILE OVERRIDES ── */
        @media(max-width:680px) {
            #aboutRacerGrid {
                grid-template-columns: 1fr !important;
                max-width: 220px;
                margin-left: auto !important;
                margin-right: auto !important
            }
            #aboutRacerGrid .tile:not(:first-child) {
                display: none !important
            }
            #xStoryLink {
                display: flex !important;
                width: fit-content;
                margin: 16px auto 0 !important
            }
            #page-drop [style*="gap:24px;align-items:center;margin-top:64px"] {
                margin-top: 16px !important;
                gap: 64px !important
            }
            #page-drop [style*="position:relative;height:280px"] {
                height: 160px !important;
                margin-bottom: 0 !important
            }
            #page-drop [style*="margin-bottom:96px;margin-top:32px"] {
                margin-bottom: 20px !important
            }
            #page-drop .about-section[style*="margin-top:48px;padding-top:0px"] {
                margin-top: 16px !important
            }
            #page-drop .about-section[style*="margin-top:48px;padding-top:0px"] > div[style*="grid-template-columns:1fr 1fr;gap:40px"] {
                gap: 12px !important
            }
            #page-drop .about-section[style*="padding-bottom:60px"] {
                padding-bottom: 8px !important;
                padding-top: 32px !important
            }
            #page-drop .about-wrap {
                padding-bottom: 8px !important
            }
            #page-drop .inner-page {
                padding-bottom: 0 !important
            }
        }