:root {
        --navy: #0a0f1a;
        --navy2: #0b0f19;
        --platinum: #e6e8ec;
        --gold: #d4af37;
        --slate: #94a3b8;
        --teal: #0f766e;
    }

    body {
        font-family: Lato, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }

    .serif {
        font-family: 'Playfair Display', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    }

    .btn {
        @apply inline-flex items-center gap-2 rounded-full px-5 py-2 text-sm tracking-wide transition-all duration-300 border;
    }

    .btn-gold {
        background: linear-gradient(135deg, var(--gold), #b8891a);
        color: #111;
        border-color: var(--gold);
        box-shadow: 0 0 0 rgba(212, 175, 55, 0);
    }

    .btn-gold:hover {
        box-shadow: 0 8px 28px rgba(212, 175, 55, .35), 0 0 0 1px rgba(212, 175, 55, .25) inset;
        transform: translateY(-1px);
    }

    .btn-outline {
        color: var(--platinum);
        border-color: var(--gold);
        background: transparent;
    }

    .btn-outline:hover {
        background: rgba(212, 175, 55, .08);
        box-shadow: 0 6px 18px rgba(212, 175, 55, .25);
    }

    .card {
        @apply rounded-2xl overflow-hidden border backdrop-blur;
        border-color: #0f172a;
        background: rgba(15, 23, 42, .5);
        transition: border-color .3s, box-shadow .3s, transform .3s;
    }

    .card:hover {
        border-color: color-mix(in oklab, var(--teal) 45%, #0f172a);
        box-shadow: 0 12px 36px rgba(15, 118, 110, .18);
        transform: translateY(-2px);
    }

    .title-underline {
        position: relative;
        display: inline-block;
    }

    .title-underline:after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -10px;
        height: 2px;
        background: linear-gradient(90deg, var(--gold), var(--teal), #1e3a8a);
        opacity: .7;
    }

    .wash-navy {
        background-image: linear-gradient(180deg, rgba(10, 15, 26, .0), rgba(10, 15, 26, .55) 60%, rgba(10, 15, 26, .85));
    }

    .fade-in {
        opacity: 0;
        transform: translateY(18px);
        animation: fadeInUp 1.1s ease-out forwards;
    }

    .fade-in-delay {
        opacity: 0;
        transform: translateY(18px);
        animation: fadeInUp 1.4s ease-out forwards;
        animation-delay: .35s;
    }

    @keyframes fadeInUp {
        0% {
            opacity: 0;
            transform: translateY(18px)
        }

        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }

    .overlay-animate {
        animation: overlayPulse 7s ease-in-out infinite alternate;
    }

    @keyframes overlayPulse {
        from {
            background: rgba(0, 0, 0, .55)
        }

        to {
            background: rgba(0, 0, 0, .35)
        }
    }

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

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

    .skip {
        position: absolute;
        left: -999px;
        top: auto;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }

    .skip:focus {
        position: fixed;
        left: 1rem;
        top: 1rem;
        padding: .5rem 1rem;
        background: black;
        color: white;
        z-index: 60;
        border-radius: .5rem;
    }

    /* Hero mobile poster */
    .hero-fallback {
        display: none;
    }

    @media (max-width: 640px) {
        /* video.hero-bg {
    display: none
    } */

        .hero-fallback {
            display: block;
            background: url('https://picsum.photos/1080/720?blur=2&random=1') center/cover no-repeat;
            height: 72vh;
        }
    }

    /* Globe */
    .globe {
        opacity: .85;
        filter: drop-shadow(0 10px 30px rgba(212, 175, 55, .15));
    }

    .pulse {
        animation: pulse 2.6s ease-in-out infinite;
    }

    @keyframes pulse {
        0% {
            opacity: .2;
            r: 2
        }

        50% {
            opacity: .9;
            r: 4
        }

        100% {
            opacity: .2;
            r: 2
        }
    }

    /* Logo fade-in on first paint */
    .logo-fade {
        opacity: 0;
        transform: translateY(6px);
        filter: blur(3px);
        animation: logoFade .9s ease-out .2s forwards;
    }

    @keyframes logoFade {
        to {
            opacity: 1;
            transform: none;
            filter: blur(0);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .logo-fade {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
    }