:root {
                --background: #08090c;
                --foreground: #edeef0;
                --ink: #0e1117;
                --muted: #94a2b0;
                --subtle: #6b7480;
                --line: rgba(255, 255, 255, 0.12);
                --surface: rgba(255, 255, 255, 0.05);
                --surface-2: rgba(255, 255, 255, 0.09);
                --accent: #d4af37;
                --accent-from: #f4e08a;
                --accent-to: #aa771c;
                --gold1: #fbf5b7;
                --gold2: #e6c158;
                --gold3: #bf953f;
                --gold4: #aa771c;
                --gold-deep: #7a5212;
                --gold-grad: linear-gradient(135deg, #bf953f 0%, #fcf6ba 22%, #e6c158 48%, #fbf5b7 62%, #aa771c 100%);
                --gold-text: linear-gradient(180deg, #fcf6ba 0%, #e6c158 45%, #bf953f 100%);
                --gold-glow: 0 0 36px rgba(214, 175, 55, 0.32);
                --radius-pill: 9999px;
                --radius-card: 2rem;
                --radius-card-sm: 1.25rem;
                --radius-control: 0.875rem;
                --text-watermark: 13rem;
                --container-shell: 88rem;
            }
            .gold-text {
                background: var(--gold-text);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
            }
            .gold-line {
                background: var(--gold-grad);
            }
            * {
                box-sizing: border-box;
                margin: 0;
                padding: 0;
            }
            html {
                font-size: 16px;
                -webkit-font-smoothing: antialiased;
                overflow-x: hidden;
            }
            body,
            button,
            a {
                -webkit-tap-highlight-color: transparent;
            }
            body {
                background: var(--background);
                color: var(--foreground);
                font-family: "Onest", sans-serif;
                overflow-x: hidden;
                cursor: none;
            }
            @media (pointer: coarse) {
                body {
                    cursor: auto;
                }
            }
            a {
                color: inherit;
                text-decoration: none;
            }
            button {
                font: inherit;
                color: inherit;
                background: none;
                border: none;
                cursor: none;
            }
            @media (pointer: coarse) {
                button {
                    cursor: pointer;
                }
            }
            ul {
                list-style: none;
            }
            img {
                display: block;
            }
            .sr-only {
                position: absolute;
                width: 1px;
                height: 1px;
                padding: 0;
                margin: -1px;
                overflow: hidden;
                clip: rect(0, 0, 0, 0);
                white-space: nowrap;
                border: 0;
            }
            :focus-visible {
                outline: 2px solid var(--accent);
                outline-offset: 2px;
            }
            @media (prefers-reduced-motion: reduce) {
                * {
                    animation: none !important;
                    transition: none !important;
                }
            }
            @media (max-width: 1920px) {
                html {
                    font-size: 0.833333vw;
                }
            }
            @media (max-width: 1440px) {
                html {
                    font-size: 1.111111vw;
                }
            }
            @media (max-width: 1024px) {
                html {
                    font-size: 1.5625vw;
                }
            }
            @media (max-width: 640px) {
                html {
                    font-size: 4.444444vw;
                }
            }
            .shell {
                max-width: var(--container-shell);
                margin-inline: auto;
            }
            .icon {
                width: 1em;
                height: 1em;
                display: inline-block;
                vertical-align: -0.125em;
            }

            /* ============ Custom Cursor + Gold Trail ============ */
            #cursor-dot,
            #cursor-ring {
                position: fixed;
                top: 0;
                left: 0;
                pointer-events: none;
                z-index: 9999;
                will-change: transform;
                mix-blend-mode: screen;
            }
            #cursor-dot {
                width: 8px;
                height: 8px;
                border-radius: 50%;
                background: radial-gradient(circle, #fcf6ba 0%, #e6c158 60%, transparent 100%);
                box-shadow: 0 0 18px rgba(230, 193, 88, 0.9);
                transition: transform 0.08s linear;
            }
            #cursor-ring {
                width: 42px;
                height: 42px;
                border-radius: 50%;
                border: 1px solid rgba(214, 175, 55, 0.55);
                box-shadow:
                    0 0 22px rgba(214, 175, 55, 0.25),
                    inset 0 0 12px rgba(214, 175, 55, 0.15);
                transition:
                    transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                    width 0.25s,
                    height 0.25s,
                    border-color 0.25s;
            }
            body.cur-hover #cursor-ring {
                width: 64px;
                height: 64px;
                border-color: rgba(252, 246, 186, 0.95);
                box-shadow:
                    0 0 36px rgba(214, 175, 55, 0.55),
                    inset 0 0 18px rgba(252, 246, 186, 0.25);
            }
            body.cur-hover #cursor-dot {
                transform: translate(-50%, -50%) scale(1.6);
            }
            #cursor-trail {
                position: fixed;
                inset: 0;
                pointer-events: none;
                z-index: 9998;
            }
            @media (pointer: coarse) {
                #cursor-dot,
                #cursor-ring,
                #cursor-trail {
                    display: none !important;
                }
            }

            /* glass */
            .glass {
                background: var(--surface);
                -webkit-backdrop-filter: blur(9px) saturate(135%);
                backdrop-filter: blur(9px) saturate(135%);
                border: 1px solid rgba(255, 255, 255, 0.14);
                box-shadow:
                    inset 0 1px 1px rgba(255, 255, 255, 0.1),
                    0 14px 40px rgba(0, 0, 0, 0.32);
            }

            /* pills */
            .pill {
                position: relative;
                display: inline-flex;
                align-items: center;
                gap: 0.75rem;
                border-radius: 9999px;
                font-size: 0.875rem;
                font-weight: 500;
                transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
                overflow: hidden;
                isolation: isolate;
            }
            .pill:hover {
                transform: scale(1.04);
            }
            .pill.arrow {
                padding: 0.375rem 0.375rem 0.375rem 1.5rem;
            }
            .pill.noarrow {
                padding: 0.875rem 1.75rem;
            }
            .pill-dark {
                background: var(--gold-grad);
                background-size: 200% 200%;
                color: #241a06;
                box-shadow:
                    0 6px 22px rgba(214, 175, 55, 0.32),
                    inset 0 1px 0 rgba(255, 255, 255, 0.55);
                animation: goldFlow 6s ease-in-out infinite;
            }
            .pill-light {
                background: var(--surface-2);
                color: #fff;
                border: 1px solid var(--line);
            }
            .pill-outline {
                border: 1px solid rgba(214, 175, 55, 0.55);
                background: transparent;
                color: var(--gold1);
            }
            .pill .badge {
                width: 2.25rem;
                height: 2.25rem;
                display: grid;
                place-items: center;
                border-radius: 9999px;
                font-size: 1rem;
                transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
            }
            .pill:hover .badge {
                transform: rotate(45deg) scale(1.08);
            }
            .pill-dark .badge {
                background: #241a06;
                color: var(--gold1);
            }
            .pill-light .badge,
            .pill-outline .badge {
                background: #fff;
                color: #08090c;
            }
            /* ripple */
            .ripple {
                position: absolute;
                border-radius: 50%;
                transform: translate(-50%, -50%) scale(0);
                background: radial-gradient(circle, rgba(255, 247, 200, 0.7), rgba(255, 247, 200, 0) 70%);
                pointer-events: none;
                animation: rippleAnim 0.8s ease-out forwards;
                z-index: 0;
            }
            @keyframes rippleAnim {
                to {
                    transform: translate(-50%, -50%) scale(8);
                    opacity: 0;
                }
            }
            @keyframes goldFlow {
                0%,
                100% {
                    background-position: 0% 50%;
                }
                50% {
                    background-position: 100% 50%;
                }
            }

            /* eyebrow */
            .eyebrow {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 0.875rem;
                font-weight: 500;
                color: var(--muted);
            }
            .eyebrow .dot {
                width: 0.375rem;
                height: 0.375rem;
                border-radius: 9999px;
                background: var(--gold2);
                box-shadow: 0 0 8px rgba(230, 193, 88, 0.75);
                display: inline-block;
                animation: dotPulse 2.2s ease-in-out infinite;
            }
            @keyframes dotPulse {
                0%,
                100% {
                    box-shadow: 0 0 8px rgba(230, 193, 88, 0.75);
                }
                50% {
                    box-shadow: 0 0 20px rgba(252, 246, 186, 1);
                }
            }
            .eyebrow.bordered {
                border: 1px solid rgba(214, 175, 55, 0.4);
                border-radius: 9999px;
                padding: 0.375rem 1rem;
            }

            /* reveal */
            .reveal {
                opacity: 0;
                transform: translateY(26px);
                transition:
                    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
            }
            .reveal.in {
                opacity: 1;
                transform: none;
            }
            .lines .ln {
                display: block;
                overflow: hidden;
            }
            .lines .ln > span {
                display: block;
                transform: translateY(110%);
                opacity: 0;
                transition:
                    transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1),
                    opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1);
            }
            .lines.in .ln > span {
                transform: none;
                opacity: 1;
            }
            .words span {
                display: inline-block;
                transform: translateY(24px);
                opacity: 0;
                transition:
                    transform 0.7s cubic-bezier(0.165, 0.84, 0.44, 1),
                    opacity 0.7s cubic-bezier(0.165, 0.84, 0.44, 1);
            }
            .words.in span {
                transform: none;
                opacity: 1;
            }

            /* ===== Loader ===== */
            #loader {
                position: fixed;
                inset: 0;
                z-index: 120;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 2rem;
                background: radial-gradient(ellipse at center, #0c0d12 0%, #06070a 70%);
                color: #fff;
                border-radius: 0 0 2rem 2rem;
                transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
                overflow: hidden;
            }
            #loader canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                opacity: 0.45;
            }
            #loader .lc {
                position: relative;
                z-index: 2;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.25rem;
                text-align: center;
                transition:
                    opacity 0.6s ease,
                    transform 0.6s ease;
            }
            #loader .brand {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-weight: 600;
                font-size: 1.875rem;
            }
            #loader .brand .logoCoin {
                width: 64px;
                height: 64px;
                border-radius: 50%;
                background: var(--gold-grad);
                display: grid;
                place-items: center;
                color: #241a06;
                font-weight: 800;
                font-size: 1.5rem;
                box-shadow:
                    0 0 40px rgba(214, 175, 55, 0.6),
                    inset 0 2px 4px rgba(255, 255, 255, 0.6),
                    inset 0 -3px 6px rgba(122, 82, 18, 0.5);
                animation: coinSpinY 3.6s linear infinite;
            }
            @keyframes coinSpinY {
                0% {
                    transform: rotateY(0deg);
                }
                100% {
                    transform: rotateY(360deg);
                }
            }
            #loader .brand .bn {
                background: var(--gold-text);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                letter-spacing: 0.04em;
            }
            #loader .tag {
                max-width: 28ch;
                font-size: 0.875rem;
                color: rgba(255, 255, 255, 0.6);
            }
            #loader .prog {
                position: relative;
                z-index: 2;
                width: min(22rem, 72vw);
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
            }
            #loader .track {
                height: 2px;
                background: rgba(255, 255, 255, 0.1);
                border-radius: 2px;
                overflow: hidden;
            }
            #loader .fill {
                height: 100%;
                background: linear-gradient(90deg, #7a5212, #fcf6ba, #e6c158, #fcf6ba, #7a5212);
                background-size: 200% 100%;
                width: 0%;
                transition: width 0.1s ease-out;
                animation: goldFlow 2s linear infinite;
            }
            #loader .meta {
                display: flex;
                justify-content: space-between;
                font-size: 0.75rem;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: rgba(255, 255, 255, 0.45);
            }
            #loader .count {
                color: var(--gold1);
                font-variant-numeric: tabular-nums;
            }

            /* ===== Header ===== */
            #header {
                position: fixed;
                inset-inline: 0;
                top: 0;
                z-index: 50;
                opacity: 0;
                transform: translateY(-14px);
                transition:
                    opacity 0.7s ease,
                    transform 0.7s ease,
                    background 0.35s;
            }
            #header.in {
                opacity: 1;
                transform: none;
            }
            #header.scrolled {
                background: rgba(8, 9, 12, 0.65);
                -webkit-backdrop-filter: blur(14px) saturate(140%);
                backdrop-filter: blur(14px) saturate(140%);
                border-bottom: 1px solid rgba(214, 175, 55, 0.12);
            }
            #header .bar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 1.5rem;
                padding: 1.25rem;
            }
            #header .brand {
                display: flex;
                align-items: center;
                gap: 0.625rem;
                font-size: 1.125rem;
                font-weight: 600;
                letter-spacing: -0.01em;
            }
            #header .brand .logoCoin {
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: var(--gold-grad);
                display: grid;
                place-items: center;
                color: #241a06;
                font-weight: 800;
                box-shadow:
                    0 0 18px rgba(214, 175, 55, 0.5),
                    inset 0 1px 2px rgba(255, 255, 255, 0.6);
                font-size: 0.875rem;
            }
            #header .brand .bn {
                background: var(--gold-text);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                letter-spacing: 0.02em;
            }
            #header nav.primary {
                display: none;
            }
            #header nav.primary ul {
                display: flex;
                gap: 2rem;
                font-size: 0.875rem;
                font-weight: 500;
            }
            #header nav.primary button {
                color: var(--foreground);
                opacity: 0.85;
                transition:
                    opacity 0.25s,
                    transform 0.25s,
                    color 0.25s;
                position: relative;
            }
            #header nav.primary button::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: -6px;
                height: 1px;
                background: var(--gold-grad);
                transform: scaleX(0);
                transform-origin: center;
                transition: transform 0.35s ease;
            }
            #header nav.primary button:hover {
                opacity: 1;
                transform: translateY(-2px);
                color: var(--gold1);
            }
            #header nav.primary button:hover::after {
                transform: scaleX(1);
            }
            #header .right {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }
            #header .clock {
                display: none;
                align-items: center;
                gap: 0.75rem;
                border: 1px solid var(--line);
                background: rgba(255, 255, 255, 0.05);
                -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
                border-radius: 0.875rem;
                padding: 0.5rem 0.75rem;
                font-size: 0.75rem;
                color: var(--muted);
            }
            #header .clock .lbl {
                color: rgba(237, 238, 240, 0.45);
            }
            #header .clock .t {
                min-width: 3.5rem;
                font-variant-numeric: tabular-nums;
                font-weight: 500;
                color: var(--gold1);
            }
            #header .clock .sep {
                color: rgba(237, 238, 240, 0.3);
            }
            #header .menu {
                border: 1px solid var(--line);
                background: rgba(255, 255, 255, 0.05);
                -webkit-backdrop-filter: blur(4px);
                backdrop-filter: blur(4px);
                border-radius: 0.875rem;
                transition:
                    background 0.2s,
                    border-color 0.2s;
            }
            #header .menu:hover {
                background: rgba(214, 175, 55, 0.1);
                border-color: rgba(214, 175, 55, 0.4);
            }
            #header .menu span {
                display: inline-flex;
                align-items: center;
                gap: 0.5rem;
                padding: 0.5rem 1rem;
                font-size: 0.75rem;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }
            @media (min-width: 768px) {
                #header .clock {
                    display: flex;
                }
            }
            @media (min-width: 1024px) {
                #header nav.primary {
                    display: block;
                }
                #header .bar {
                    padding: 1.5rem 2rem;
                }
            }

            /* ===== Hero ===== */
            #home {
                position: relative;
                isolation: isolate;
                overflow: hidden;
                border-radius: 0 0 2rem 2rem;
                background: radial-gradient(ellipse at 70% 30%, #1a1408 0%, #0b0d11 50%, #06070a 100%);
                min-height: 100vh;
            }
            #home .reveal-bg {
                position: absolute;
                inset: 0;
                z-index: 0;
            }
            #home .reveal-bg canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
            }
            #home #heroCoinsCanvas {
                z-index: 1;
            }
            #home #heroSparkleCanvas {
                z-index: 2;
            }
            #home #heroCanvas {
                z-index: 3;
                mix-blend-mode: screen;
            }
            #home .vignette {
                position: absolute;
                inset: 0;
                z-index: 4;
                pointer-events: none;
                background: linear-gradient(
                    to bottom,
                    rgba(8, 9, 12, 0.55),
                    rgba(8, 9, 12, 0.15) 40%,
                    rgba(8, 9, 12, 0.85)
                );
            }
            #home .gridlines {
                position: absolute;
                inset: 0;
                z-index: 1;
                pointer-events: none;
                background-image: linear-gradient(rgba(214, 175, 55, 0.06) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(214, 175, 55, 0.06) 1px, transparent 1px);
                background-size: 60px 60px;
                mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
                -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
            }
            #home .watermark {
                pointer-events: none;
                position: absolute;
                inset-inline: 0;
                bottom: 7rem;
                z-index: 3;
                text-align: center;
                user-select: none;
                font-weight: 700;
                line-height: 1;
                font-size: 13rem;
                color: rgba(255, 255, 255, 0.1);
                opacity: 0;
                transform: translateY(20px);
                transition:
                    opacity 0.9s ease,
                    transform 0.9s ease;
            }
            #home .watermark.in {
                opacity: 1;
                transform: none;
            }
            #home .content {
                position: relative;
                z-index: 20;
                display: flex;
                flex-direction: column;
                gap: 2rem;
                padding: 7rem 1.25rem 5rem;
            }
            #home .col-left {
                display: flex;
                flex-direction: column;
                gap: 1.75rem;
            }
            #home h1 {
                max-width: 18ch;
                font-size: 2.25rem;
                font-weight: 600;
                line-height: 0.98;
                letter-spacing: -0.02em;
            }
            #home .rating {
                display: flex;
                align-items: center;
                gap: 0.75rem;
            }
            #home .rating .stars {
                color: var(--accent);
                font-size: 1rem;
                display: inline-flex;
                gap: 0.1rem;
                filter: drop-shadow(0 0 8px rgba(230, 193, 88, 0.7));
            }
            #home .rating .t {
                font-size: 0.875rem;
                font-weight: 500;
                color: var(--muted);
            }
            #home .ctas {
                display: flex;
                flex-wrap: wrap;
                gap: 0.75rem;
            }
            #home .col-right {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                gap: 2rem;
            }

            .hero-card {
                width: 100%;
                max-width: 24rem;
                border-radius: 1.25rem;
                padding: 0.5rem;
                transform-style: preserve-3d;
                perspective: 1000px;
            }
            .hero-card .tilt-inner {
                transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
                transform-style: preserve-3d;
            }
            .hero-card .row {
                display: flex;
                gap: 0.5rem;
                cursor: none;
                border-radius: 0.875rem;
            }
            .hero-card .tile {
                position: relative;
                aspect-ratio: 1;
                width: 6rem;
                display: grid;
                place-items: center;
                border-radius: 0.875rem;
                background: var(--gold-grad);
                font-size: 1.875rem;
                box-shadow:
                    inset 0 1px 2px rgba(255, 255, 255, 0.5),
                    0 6px 18px rgba(214, 175, 55, 0.3);
                overflow: hidden;
            }
            .hero-card .tile::before {
                content: "";
                position: absolute;
                inset: -50%;
                background: conic-gradient(from 0deg, transparent 70%, rgba(255, 247, 200, 0.8), transparent);
                animation: tileShine 4s linear infinite;
            }
            @keyframes tileShine {
                0% {
                    transform: rotate(0);
                }
                100% {
                    transform: rotate(360deg);
                }
            }
            .hero-card .tile .icon {
                color: #241a06;
                position: relative;
                z-index: 2;
                filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.4));
            }
            .hero-card .panel {
                flex: 1;
                border-radius: 0.875rem;
                background: rgba(255, 255, 255, 0.05);
                padding: 0.75rem;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                position: relative;
                overflow: hidden;
            }
            .hero-card .panel canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
                opacity: 0.6;
            }
            .hero-card .slot {
                position: relative;
                min-height: 3.25rem;
                z-index: 2;
            }
            .hero-card .cap {
                font-size: 0.65rem;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--gold2);
            }
            .hero-card .ttl {
                max-width: 8rem;
                font-size: 0.875rem;
                font-weight: 500;
                line-height: 1.35;
                color: #fff;
            }
            .hero-card .bot {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-top: 0.5rem;
                position: relative;
                z-index: 2;
            }
            .hero-card .dots {
                display: flex;
                gap: 0.25rem;
                align-items: center;
            }
            .hero-card .dots i {
                height: 0.25rem;
                border-radius: 9999px;
                transition: all 0.3s;
            }
            .hero-card .navb {
                display: flex;
                gap: 0.25rem;
            }
            .hero-card .navb button {
                width: 1.75rem;
                height: 1.75rem;
                display: grid;
                place-items: center;
                border-radius: 9999px;
                background: rgba(214, 175, 55, 0.15);
                color: var(--gold1);
                border: 1px solid rgba(214, 175, 55, 0.3);
                transition:
                    transform 0.2s,
                    background 0.2s;
            }
            .hero-card .navb button:hover {
                background: rgba(214, 175, 55, 0.3);
                transform: scale(1.1);
            }

            .partners {
                width: 100%;
                max-width: 24rem;
            }
            .partners .lbl {
                margin-bottom: 0.75rem;
                font-size: 0.75rem;
                font-weight: 500;
                color: var(--muted);
            }
            .partners ul {
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                column-gap: 1rem;
                row-gap: 0.75rem;
            }
            .partners li {
                display: flex;
                align-items: center;
                gap: 0.375rem;
                font-size: 0.75rem;
                color: var(--muted);
                transition:
                    opacity 0.3s,
                    transform 0.3s,
                    color 0.3s;
            }
            .partners li:hover {
                opacity: 1;
                transform: translateY(-2px);
                color: var(--gold1);
            }
            .partners li .icon {
                color: var(--gold3);
                font-size: 0.875rem;
                filter: drop-shadow(0 0 4px rgba(214, 175, 55, 0.5));
            }
            #home .statusbar {
                display: flex;
                align-items: center;
                justify-content: space-between;
                gap: 0.75rem;
                border-top: 1px solid var(--line);
                padding: 1.25rem;
                font-size: 0.75rem;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                color: var(--muted);
                position: relative;
                z-index: 5;
            }
            #home .statusbar .mid {
                display: none;
            }
            @media (min-width: 640px) {
                #home .content {
                    padding-inline: 2rem;
                }
                #home .statusbar {
                    padding-inline: 2rem;
                }
                #home .statusbar .mid {
                    display: block;
                }
                #home h1 {
                    font-size: 3rem;
                }
            }
            @media (min-width: 768px) {
                #home h1 {
                    font-size: 3.75rem;
                }
            }
            @media (min-width: 1024px) {
                #home .content {
                    display: grid;
                    min-height: 100lvh;
                    grid-template-columns: repeat(12, 1fr);
                    gap: 2.5rem;
                    padding: 9rem 2rem 7rem;
                }
                #home .col-left {
                    grid-column: span 7;
                }
                #home .col-right {
                    grid-column: span 5;
                    align-items: flex-end;
                }
                .hero-card {
                    width: 19rem;
                }
                .partners {
                    width: 19rem;
                }
                .partners .lbl {
                    text-align: right;
                }
            }

            /* ===== bg animation (after hero) ===== */
            #anim-bg {
                position: fixed;
                inset: 0;
                z-index: 0;
                opacity: 0;
                pointer-events: none;
            }
            #anim-bg canvas {
                position: absolute;
                inset: 0;
                width: 100%;
                height: 100%;
            }
            #anim-bg .scrim {
                position: absolute;
                inset: 0;
                background: linear-gradient(
                    180deg,
                    rgba(8, 9, 12, 0.72),
                    rgba(8, 9, 12, 0.65) 50%,
                    rgba(8, 9, 12, 0.82)
                );
            }

            main {
                position: relative;
                z-index: 2;
            }
            section.dark {
                background: transparent;
            }
            .eyebrow-center {
                display: flex;
                justify-content: center;
            }
            .h2 {
                font-size: 2.25rem;
                font-weight: 600;
                letter-spacing: -0.02em;
            }
            @media (min-width: 640px) {
                .h2 {
                    font-size: 3rem;
                }
            }

            /* About */
            #about .grid {
                display: grid;
                grid-template-columns: 1fr;
                align-items: center;
                gap: 3rem;
                padding: 5rem 1.25rem;
            }
            #about .globe {
                position: relative;
                min-height: 14rem;
            }
            #about .globe .big {
                position: absolute;
                left: -1rem;
                top: 50%;
                transform: translateY(-50%);
                font-size: 12rem;
                color: rgba(214, 175, 55, 0.1);
                animation: globeSpin 30s linear infinite;
            }
            @keyframes globeSpin {
                to {
                    transform: translateY(-50%) rotate(360deg);
                }
            }
            #about .globe .cap {
                position: absolute;
                left: 0;
                bottom: 0;
                display: flex;
                align-items: center;
                gap: 0.75rem;
                font-size: 0.875rem;
                color: var(--muted);
                z-index: 2;
            }
            #about .globe .cap .icon {
                color: var(--gold1);
                font-size: 1.5rem;
            }
            #about .stmt {
                display: flex;
                flex-direction: column;
                gap: 2.5rem;
            }
            #about .stmt h2 {
                font-size: 1.5rem;
                font-weight: 500;
                line-height: 1.35;
                letter-spacing: -0.01em;
            }
            #about .stmt h2 .mut {
                color: var(--muted);
            }
            #about .frow {
                display: flex;
                flex-wrap: wrap;
                align-items: flex-end;
                justify-content: space-between;
                gap: 1.5rem;
                border-top: 1px solid var(--line);
                padding-top: 1.5rem;
            }
            #about .frow .lbl {
                font-size: 0.875rem;
                color: var(--muted);
                margin-bottom: 0.5rem;
            }
            #about .socials {
                display: flex;
                gap: 0.5rem;
            }
            #about .socials a {
                width: 2.25rem;
                height: 2.25rem;
                display: grid;
                place-items: center;
                border-radius: 9999px;
                font-size: 0.875rem;
                transition: transform 0.3s;
            }
            #about .socials a:hover {
                transform: scale(1.12) rotate(8deg);
            }
            #about .socials .x {
                background: var(--gold-grad);
                color: #241a06;
                box-shadow: 0 4px 12px rgba(214, 175, 55, 0.4);
            }
            #about .socials .o {
                background: var(--surface);
                color: var(--gold1);
                border: 1px solid rgba(214, 175, 55, 0.3);
            }
            @media (min-width: 640px) {
                #about .globe .big {
                    font-size: 16rem;
                }
                #about .stmt h2 {
                    font-size: 1.875rem;
                }
            }
            @media (min-width: 1024px) {
                #about .grid {
                    grid-template-columns: 1fr 1fr;
                    padding-block: 7rem;
                }
                #about .globe {
                    min-height: 20rem;
                }
                #about .globe .big {
                    left: -1.5rem;
                    font-size: 20rem;
                }
            }

            /* CreateBand */
            #create ul {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                padding: 2.5rem 1.25rem;
            }
            #create li {
                flex: 1;
            }
            #create .tile {
                position: relative;
                display: grid;
                place-items: center;
                height: 6rem;
                border-radius: 9999px;
                font-size: 1.875rem;
                font-weight: 500;
                transition: transform 0.3s;
                overflow: hidden;
            }
            #create .tile:hover {
                transform: scale(1.03);
            }
            #create .we {
                background: var(--surface);
                color: #fff;
                border: 1px solid rgba(214, 175, 55, 0.25);
            }
            #create .build {
                background: var(--gold-grad);
                background-size: 200% 200%;
                color: #241a06;
                box-shadow:
                    0 6px 26px rgba(214, 175, 55, 0.4),
                    inset 0 1px 0 rgba(255, 255, 255, 0.55);
                animation: goldFlow 5s ease-in-out infinite;
            }
            #create .arrow {
                background: #06070a;
                color: var(--gold1);
                border: 1px solid rgba(214, 175, 55, 0.4);
            }
            #create .arrow .icon {
                animation: arrowSlide 2s ease-in-out infinite;
            }
            @keyframes arrowSlide {
                0%,
                100% {
                    transform: translateX(0);
                }
                50% {
                    transform: translateX(8px);
                }
            }
            #create .better {
                background: rgba(214, 175, 55, 0.08);
                color: var(--gold1);
                border: 1px solid rgba(214, 175, 55, 0.35);
            }
            @media (min-width: 640px) {
                #create ul {
                    flex-direction: row;
                    gap: 1rem;
                    padding-inline: 2rem;
                }
                #create .tile {
                    height: 10rem;
                    font-size: 2.25rem;
                }
                #create .arrow .icon {
                    font-size: 3rem;
                }
            }

            /* Portfolio */
            #works .wrap {
                padding: 2.5rem 1.25rem 5rem;
            }
            #works .head {
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1.25rem;
                margin-bottom: 2.5rem;
            }
            #works .cards {
                display: grid;
                grid-template-columns: 1fr;
                gap: 1.5rem;
            }
            .pcard {
                position: relative;
                min-height: 22rem;
                overflow: hidden;
                border-radius: 2rem;
                padding: 1.5rem;
                color: #fff;
                transition:
                    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
                    box-shadow 0.4s;
                transform-style: preserve-3d;
                will-change: transform;
            }
            .pcard::before {
                content: "";
                position: absolute;
                inset: 0;
                border-radius: 2rem;
                padding: 1px;
                background: linear-gradient(
                    135deg,
                    rgba(214, 175, 55, 0.4),
                    transparent 40%,
                    transparent 60%,
                    rgba(214, 175, 55, 0.4)
                );
                -webkit-mask:
                    linear-gradient(#fff 0 0) content-box,
                    linear-gradient(#fff 0 0);
                -webkit-mask-composite: xor;
                mask-composite: exclude;
                pointer-events: none;
                opacity: 0.5;
                transition: opacity 0.4s;
            }
            .pcard:hover {
                transform: translateY(-8px) scale(1.012);
                box-shadow:
                    0 30px 60px rgba(0, 0, 0, 0.4),
                    0 0 40px rgba(214, 175, 55, 0.2);
            }
            .pcard:hover::before {
                opacity: 1;
            }
            .pcard .meta {
                display: flex;
                justify-content: space-between;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                color: rgba(255, 255, 255, 0.5);
                position: relative;
                z-index: 2;
            }
            .pcard .badge {
                width: 2.75rem;
                height: 2.75rem;
                display: grid;
                place-items: center;
                border-radius: 9999px;
                background: rgba(214, 175, 55, 0.15);
                color: var(--gold1);
                border: 1px solid rgba(214, 175, 55, 0.3);
                transition: transform 0.35s;
            }
            .pcard:hover .badge {
                transform: rotate(45deg) scale(1.08);
                background: var(--gold-grad);
                color: #241a06;
            }
            .pcard .wm {
                position: absolute;
                inset: 0;
                display: grid;
                place-items: center;
                pointer-events: none;
            }
            .pcard .wm .icon {
                font-size: 4.5rem;
                color: rgba(214, 175, 55, 0.1);
                transition: transform 0.6s;
            }
            .pcard:hover .wm .icon {
                transform: rotate(180deg) scale(1.2);
                color: rgba(214, 175, 55, 0.18);
            }
            .pcard .bot {
                position: absolute;
                inset-inline: 1.5rem;
                bottom: 1.5rem;
                z-index: 2;
            }
            .pcard h3 {
                font-size: 1.5rem;
                font-weight: 500;
                letter-spacing: -0.01em;
            }
            .pcard p {
                margin-top: 0.5rem;
                max-width: 28rem;
                font-size: 0.875rem;
                color: var(--muted);
            }
            .pcard .tags {
                margin-top: 1.25rem;
                display: flex;
                flex-wrap: wrap;
                gap: 0.5rem;
            }
            .pcard .tags span {
                display: inline-flex;
                border: 1px solid rgba(214, 175, 55, 0.3);
                color: var(--gold1);
                border-radius: 9999px;
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
                background: rgba(214, 175, 55, 0.05);
                transition:
                    background 0.25s,
                    transform 0.25s;
            }
            .pcard .tags span:hover {
                background: rgba(214, 175, 55, 0.15);
                transform: translateY(-2px);
            }
            @media (min-width: 640px) {
                #works .wrap {
                    padding-inline: 2rem;
                    padding-bottom: 7rem;
                }
                .pcard {
                    min-height: 26rem;
                    padding: 2rem;
                }
                .pcard .bot {
                    inset-inline: 2rem;
                    bottom: 2rem;
                }
                .pcard h3 {
                    font-size: 1.875rem;
                }
            }
            @media (min-width: 768px) {
                #works .cards {
                    grid-template-columns: repeat(2, 1fr);
                }
            }

            /* Services */
            #services .wrap {
                padding: 5rem 1.25rem;
            }
            #services h2 {
                margin: 1.25rem 0 3rem;
                max-width: 16ch;
            }
            #services li {
                border-top: 1px solid var(--line);
            }
            #services li:first-child {
                border-top: none;
            }
            .srow {
                display: flex;
                align-items: center;
                gap: 1rem;
                border-radius: 1.25rem;
                padding: 1.5rem;
                transition:
                    background 0.4s,
                    padding 0.4s;
                position: relative;
                overflow: hidden;
            }
            .srow::before {
                content: "";
                position: absolute;
                left: 0;
                top: 0;
                bottom: 0;
                width: 0;
                background: linear-gradient(90deg, rgba(214, 175, 55, 0.12), transparent);
                transition: width 0.5s ease;
            }
            .srow:hover::before {
                width: 100%;
            }
            .srow:hover {
                background: var(--surface);
            }
            .srow .idx {
                width: 1.75rem;
                font-size: 0.875rem;
                font-weight: 500;
                color: var(--gold3);
                position: relative;
                z-index: 2;
            }
            .srow h3 {
                flex: 1;
                font-size: 1.5rem;
                font-weight: 500;
                letter-spacing: -0.01em;
                position: relative;
                z-index: 2;
                transition:
                    color 0.3s,
                    transform 0.3s;
            }
            .srow:hover h3 {
                color: var(--gold1);
                transform: translateX(6px);
            }
            .srow p {
                display: none;
                max-width: 20rem;
                font-size: 0.875rem;
                color: var(--muted);
                position: relative;
                z-index: 2;
            }
            .srow .badge {
                width: 2.5rem;
                height: 2.5rem;
                display: grid;
                place-items: center;
                border-radius: 9999px;
                background: var(--gold-grad);
                color: #241a06;
                transition: transform 0.35s;
                position: relative;
                z-index: 2;
            }
            .srow:hover .badge {
                transform: translateX(5px) rotate(45deg);
            }
            @media (min-width: 640px) {
                #services .wrap {
                    padding-inline: 2rem;
                }
                #services h2 {
                    margin-bottom: 3.5rem;
                    font-size: 3rem;
                }
                .srow {
                    gap: 1.5rem;
                    padding-block: 2rem;
                }
                .srow .idx {
                    width: 2.5rem;
                }
                .srow h3 {
                    font-size: 1.875rem;
                }
                .srow .badge {
                    width: 3rem;
                    height: 3rem;
                }
            }
            @media (min-width: 768px) {
                .srow h3 {
                    font-size: 2.25rem;
                }
            }
            @media (min-width: 1024px) {
                #services .wrap {
                    padding-block: 7rem;
                }
                .srow p {
                    display: block;
                }
            }

            /* Team */
            #team .wrap {
                padding: 2.5rem 1.25rem 5rem;
            }
            #team .head {
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                gap: 1rem;
                margin-bottom: 3rem;
            }
            #team .grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 1.5rem;
                margin-bottom: 4rem;
            }
            .tcard {
                border-radius: 1.25rem;
                padding: 2rem;
                text-align: center;
                display: flex;
                flex-direction: column;
                align-items: center;
                transform-style: preserve-3d;
                transition: transform 0.4s;
            }
            .tcard:hover {
                transform: translateY(-6px);
            }
            .tcard .av {
                position: relative;
                width: 5rem;
                height: 5rem;
                border-radius: 9999px;
                display: grid;
                place-items: center;
                font-size: 1.5rem;
                font-weight: 700;
                margin-bottom: 1.25rem;
                background: var(--gold-grad);
                border: 1px solid rgba(214, 175, 55, 0.5);
                color: #241a06;
                box-shadow:
                    0 6px 18px rgba(214, 175, 55, 0.28),
                    inset 0 1px 2px rgba(255, 255, 255, 0.5);
                overflow: hidden;
            }
            .tcard .av::after {
                content: "";
                position: absolute;
                inset: -50%;
                background: conic-gradient(from 0deg, transparent 70%, rgba(255, 247, 200, 0.7), transparent);
                animation: tileShine 5s linear infinite;
            }
            .tcard .av > span {
                position: relative;
                z-index: 2;
            }
            .tcard h3 {
                font-size: 1.25rem;
                font-weight: 600;
            }
            .tcard .role {
                font-size: 0.7rem;
                letter-spacing: 0.14em;
                text-transform: uppercase;
                color: var(--gold2);
                margin-top: 0.5rem;
            }
            .tcard .sub {
                font-size: 0.85rem;
                color: rgba(148, 162, 176, 0.7);
                margin-top: 0.25rem;
            }
            @media (min-width: 640px) {
                #team .wrap {
                    padding-inline: 2rem;
                }
                #team .grid {
                    grid-template-columns: repeat(3, 1fr);
                }
            }

            /* Stats */
            #stats .wrap {
                padding: 0 1.25rem 5rem;
            }
            #stats .panel {
                position: relative;
                border-radius: 2rem;
                padding: 3rem 1.5rem;
                color: #fff;
                overflow: hidden;
            }
            #stats .panel::after {
                content: "";
                position: absolute;
                inset: 0;
                background: radial-gradient(circle at 80% 20%, rgba(214, 175, 55, 0.15), transparent 50%);
                pointer-events: none;
            }
            #stats h2 {
                margin-top: 1rem;
                max-width: 20ch;
                font-size: 1.875rem;
                font-weight: 500;
                letter-spacing: -0.01em;
                position: relative;
                z-index: 2;
            }
            #stats .grid {
                margin-top: 3.5rem;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                column-gap: 2rem;
                row-gap: 3rem;
                position: relative;
                z-index: 2;
            }
            #stats .num {
                font-size: 3rem;
                font-weight: 600;
                letter-spacing: -0.02em;
                background: var(--gold-text);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
            }
            #stats .lbl {
                margin-top: 0.75rem;
                font-size: 0.875rem;
                color: var(--muted);
            }
            @media (min-width: 640px) {
                #stats .wrap {
                    padding-inline: 2rem;
                }
                #stats .panel {
                    padding: 4rem 2rem;
                }
                #stats .num {
                    font-size: 3.75rem;
                }
            }
            @media (min-width: 768px) {
                #stats .panel {
                    padding-inline: 4rem;
                }
                #stats h2 {
                    font-size: 2.25rem;
                }
                #stats .num {
                    font-size: 4.5rem;
                }
            }
            @media (min-width: 1024px) {
                #stats .wrap {
                    padding-bottom: 7rem;
                }
                #stats .grid {
                    grid-template-columns: repeat(4, 1fr);
                }
            }

            /* Footer */
            footer {
                position: relative;
                overflow: hidden;
                border-radius: 2rem 2rem 0 0;
                background: linear-gradient(180deg, #06070a 0%, #0a0805 100%);
                color: #fff;
                z-index: 2;
            }
            footer .wrap {
                position: relative;
                z-index: 10;
                padding: 5rem 1.25rem 2.5rem;
            }
            footer .cta {
                display: flex;
                flex-direction: column;
                gap: 2rem;
                border-bottom: 1px solid var(--line);
                padding-bottom: 4rem;
            }
            footer .cta h2 {
                max-width: 16ch;
                font-size: 2.25rem;
                font-weight: 600;
                letter-spacing: -0.02em;
            }
            footer .cols {
                display: grid;
                grid-template-columns: 1fr;
                gap: 3rem;
                padding-block: 4rem;
            }
            footer .brandcol .b {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 1.125rem;
                font-weight: 600;
            }
            footer .brandcol .b .logoCoin {
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: var(--gold-grad);
                display: grid;
                place-items: center;
                color: #241a06;
                font-weight: 800;
                box-shadow:
                    0 0 18px rgba(214, 175, 55, 0.5),
                    inset 0 1px 2px rgba(255, 255, 255, 0.6);
                font-size: 0.875rem;
            }
            footer .brandcol p {
                max-width: 20rem;
                font-size: 0.875rem;
                color: var(--muted);
                margin-top: 1rem;
            }
            footer .col h4 {
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                color: var(--gold2);
                margin-bottom: 1rem;
            }
            footer .col a {
                display: inline-flex;
                font-size: 0.875rem;
                color: rgba(255, 255, 255, 0.78);
                padding: 0.25rem 5px;
                transition:
                    transform 0.3s,
                    color 0.25s;
                cursor: none;
            }
            footer .col a:hover {
                transform: translateX(4px);
                color: var(--gold1);
            }
            footer .legal {
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: space-between;
                gap: 1rem;
                border-top: 1px solid var(--line);
                padding-top: 2rem;
                font-size: 0.75rem;
                color: var(--muted);
            }
            footer .legal .r {
                display: flex;
                gap: 1.5rem;
            }
            footer .wm {
                position: absolute;
                inset-inline: 0;
                bottom: -1.5rem;
                z-index: 0;
                text-align: center;
                pointer-events: none;
                user-select: none;
                font-weight: 700;
                line-height: 1;
                font-size: 13rem;
                color: rgba(255, 255, 255, 0.04);
            }
            @media (min-width: 640px) {
                footer .wrap {
                    padding-inline: 2rem;
                }
                footer .cta h2 {
                    font-size: 3rem;
                }
                footer .legal {
                    flex-direction: row;
                }
            }
            @media (min-width: 768px) {
                footer .cta h2 {
                    font-size: 3.75rem;
                }
                footer .cols {
                    grid-template-columns: repeat(2, 1fr);
                }
            }
            @media (min-width: 1024px) {
                footer .cta {
                    flex-direction: row;
                    align-items: flex-end;
                    justify-content: space-between;
                }
                footer .cols {
                    grid-template-columns: repeat(4, 1fr);
                }
                footer .wrap {
                    padding-top: 6rem;
                }
            }

            /* Nav menu */
            #navmenu {
                position: fixed;
                inset: 0;
                z-index: 115;
                display: flex;
                flex-direction: column;
                background: radial-gradient(circle at top right, #1a1408 0%, #06070a 60%);
                color: #fff;
                opacity: 0;
                pointer-events: none;
                transition: opacity 0.4s ease;
            }
            #navmenu.open {
                opacity: 1;
                pointer-events: auto;
            }
            #navmenu .top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding: 1.25rem;
            }
            #navmenu .top .b {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 1.125rem;
                font-weight: 600;
            }
            #navmenu .top .b .logoCoin {
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                background: var(--gold-grad);
                display: grid;
                place-items: center;
                color: #241a06;
                font-weight: 800;
                font-size: 0.875rem;
            }
            #navmenu .close {
                display: inline-flex;
                gap: 0.5rem;
                align-items: center;
                border: 1px solid var(--line);
                border-radius: 0.875rem;
                padding: 0.5rem 1rem;
                font-size: 0.75rem;
                font-weight: 500;
                text-transform: uppercase;
                letter-spacing: 0.05em;
                color: var(--muted);
            }
            #navmenu .close:hover {
                color: var(--gold1);
                border-color: rgba(214, 175, 55, 0.4);
            }
            #navmenu nav {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: center;
            }
            #navmenu nav ul {
                display: flex;
                flex-direction: column;
                gap: 0.25rem;
            }
            #navmenu nav button a{
                display: flex;
                gap: 1rem;
                align-items: baseline;
                padding-block: 0.5rem;
                text-align: left;
                font-size: 2.25rem;
                font-weight: 600;
                letter-spacing: -0.02em;
                transform: translateY(1rem);
                opacity: 0;
                transition: all 0.5s ease-out;
            }
            #navmenu.open nav button a{
                transform: none;
                opacity: 1;
            }
            #navmenu nav button .n {
                font-size: 1rem;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.3);
                transition: color 0.3s;
            }
            #navmenu nav button .l {
                color: rgba(255, 255, 255, 0.7);
                transition: color 0.3s;
            }
            #navmenu nav button:hover .n {
                color: var(--gold2);
            }
            #navmenu nav button:hover .l {
                color: var(--gold1);
            }
            #navmenu nav a .n {
                font-size: 1rem;
                font-weight: 400;
                color: rgba(255, 255, 255, 0.3);
                transition: color 0.3s;
            }
            #navmenu nav a .l {
                color: rgba(255, 255, 255, 0.7);
                transition: color 0.3s;
            }
            #navmenu nav a:hover .n {
                color: var(--gold2);
            }
            #navmenu nav a:hover .l {
                color: var(--gold1);
            }
            #navmenu .bottom {
                display: flex;
                flex-direction: column;
                gap: 0.75rem;
                border-top: 1px solid var(--line);
                padding: 1.5rem 1.25rem;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.025em;
                color: var(--muted);
            }
            @media (min-width: 640px) {
                #navmenu .top {
                    padding: 1.5rem 2rem;
                }
                #navmenu nav button {
                    font-size: 3.75rem;
                }
                #navmenu .bottom {
                    flex-direction: row;
                    justify-content: space-between;
                    padding-inline: 2rem;
                }
                #navmenu .top,
                #navmenu nav,
                #navmenu .bottom {
                    max-width: 88rem;
                    margin-inline: auto;
                    width: 100%;
                }
            }
            @media (max-width: 640px) {
                #home .watermark {
                    font-size: 6.5rem;
                    bottom: 9rem;
                }
                footer .wm {
                    font-size: 7rem;
                    bottom: -0.75rem;
                }
                #home .content {
                    padding-top: 6rem;
                    gap: 2.25rem;
                }
                #home .col-right {
                    width: 100%;
                }
                .hero-card {
                    max-width: 100%;
                }
                .partners {
                    max-width: 100%;
                }
                .partners ul {
                    grid-template-columns: repeat(3, 1fr);
                }
                .pcard {
                    min-height: 18rem;
                }
                #works .cards {
                    gap: 1rem;
                }
                #stats .panel {
                    padding: 2.25rem 1.25rem;
                }
                #stats .grid {
                    row-gap: 2.25rem;
                }
                #navmenu nav button {
                    font-size: 1rem;
                    padding: 16px;
                }
                #navmenu nav a {
                    font-size: 1rem;
                    padding: 16px;
                }
                .pill.noarrow {
                    padding: 0.75rem 1.4rem;
                }
            }
            .skip {
                position: absolute;
                left: -999px;
            }
            .skip:focus {
                position: fixed;
                left: 1rem;
                top: 1rem;
                z-index: 60;
                border-radius: 0.875rem;
                background: #fff;
                padding: 0.5rem 1rem;
                font-size: 0.875rem;
                color: #08090c;
            }

            /* ===== EXTRA GOLD PASS ===== */
            @keyframes goldShimmer {
                0% {
                    background-position: 0% 50%;
                }
                100% {
                    background-position: 200% 50%;
                }
            }
            .h2,
            #stats h2,
            footer .cta h2 {
                background: var(--gold-text);
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
            }
            #home h1,
            #home .watermark,
            footer .wm {
                background: linear-gradient(
                    100deg,
                    #7a5212 0%,
                    #bf953f 18%,
                    #fcf6ba 38%,
                    #e6c158 52%,
                    #fbf5b7 66%,
                    #bf953f 82%,
                    #7a5212 100%
                );
                background-size: 200% auto;
                -webkit-background-clip: text;
                background-clip: text;
                -webkit-text-fill-color: transparent;
                color: transparent;
                animation: goldShimmer 7s linear infinite;
            }
            #home .watermark.in {
                opacity: 0.18;
            }
            footer .wm {
                opacity: 0.08;
            }
            .eyebrow {
                color: var(--gold2);
            }
            #home .rating .t {
                color: var(--gold1);
            }
            .glass,
            .card2,
            .tcard,
            #stats .panel {
                border-color: rgba(214, 175, 55, 0.24);
                box-shadow:
                    inset 0 1px 1px rgba(255, 255, 255, 0.1),
                    0 14px 40px rgba(0, 0, 0, 0.32),
                    0 0 0 1px rgba(214, 175, 55, 0.07);
            }
            .pill-outline {
                border-color: rgba(214, 175, 55, 0.55);
                color: var(--gold1);
            }
            .pill-outline .badge {
                background: var(--gold-grad);
                color: #241a06;
            }
            .feat-num {
                background: var(--gold-grad);
                box-shadow: 0 4px 14px rgba(214, 175, 55, 0.3);
            }
            @media (prefers-reduced-motion: reduce) {
                #home h1,
                #home .watermark,
                footer .wm {
                    animation: none;
                }
            }

            /* Magnetic button base */
            .magnetic {
                display: inline-block;
                will-change: transform;
                transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
            }

            /* Floating scroll indicator */
            .scroll-ind {
                display: inline-flex;
                flex-direction: column;
                align-items: center;
                gap: 0.25rem;
            }
            .scroll-ind .arr {
                animation: bounceY 1.6s ease-in-out infinite;
            }
            @keyframes bounceY {
                0%,
                100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(6px);
                }
            }

            /* Hide by default (desktop) */
#menuBtn {
    display: none;
}

/* Show on mobile */
@media (max-width: 768px) {
    #menuBtn {
        display: inline-flex; /* or block/flex depending on your layout */
        align-items: center;
    }
}