@keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(16px);
        }

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

    .reveal {
        opacity: 0;
        transform: translateY(16px);
    }

    .reveal.in-view {
        animation: fade-up .6s cubic-bezier(.22, 1, .36, 1) both;
    }

    .gradient-ring {
        background: linear-gradient(90deg, rgba(99, 102, 241, .6), rgba(56, 189, 248, .6), rgba(45, 212, 191, .6));
        background-size: 200% 200%;
        animation: ring-move 8s ease infinite;
    }

    @keyframes ring-move {
        0% {
            background-position: 0% 50%;
        }

        50% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0% 50%;
        }
    }

    @keyframes fade-up {
        from {
            opacity: 0;
            transform: translateY(16px)
        }

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

    @keyframes fade-right {
        from {
            opacity: 0;
            transform: translateX(-18px)
        }

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

    @keyframes fade-left {
        from {
            opacity: 0;
            transform: translateX(18px)
        }

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

    .reveal {
        opacity: 0;
        will-change: transform, opacity;
    }

    .in-view.up {
        animation: fade-up .7s cubic-bezier(.22, 1, .36, 1) both;
    }

    .in-view.left {
        animation: fade-left .8s cubic-bezier(.22, 1, .36, 1) both;
    }

    .in-view.right {
        animation: fade-right .8s cubic-bezier(.22, 1, .36, 1) both;
    }

    /* Slow zoom/pan for map image */
    .map-anim {
        transform-origin: center;
        transition: transform 6s ease;
    }

    .map-anim.run {
        transform: scale(1.04) translateY(-4px);
    }

    /* Gradient ring border like your other sections */
    .gradient-ring {
        background: linear-gradient(90deg, rgba(99, 102, 241, .6), rgba(56, 189, 248, .6), rgba(45, 212, 191, .6));
        background-size: 200% 200%;
        animation: ring-move 10s ease infinite;
    }

    @keyframes ring-move {
        0% {
            background-position: 0% 50%
        }

        50% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0% 50%
        }
    }
        :root {
        --c-accent: #fe8302;
        --c-text: #004152;
        --c-bg: #faf6f3;
        --c-muted: #004152cc;
        /* text-muted */
        --c-line: #00415222;
        /* borders */
        --c-soft: #fe83021A;
        /* very light accent fill */
    }

    @media (prefers-color-scheme: dark) {
        :root {
            --c-accent: #fe8302;
            --c-text: #faf6f3;
            --c-bg: #004152;
            --c-muted: #faf6f3cc;
            --c-line: #faf6f322;
            --c-soft: #fe830226;
        }
    }

    body {
        background: var(--c-bg);
        color: var(--c-text);
    }

    .btn-primary {
        background: var(--c-accent);
        color: var(--c-bg);
        box-shadow: 0 14px 34px -16px rgba(254, 131, 2, .7);
    }

    .btn-primary:hover {
        filter: brightness(0.95);
    }

    .ring-brand {
        background: linear-gradient(0deg, var(--c-line), var(--c-line));
    }

    .card {
        background: var(--c-bg);
        border: 1px solid var(--c-line);
    }

    .muted {
        color: var(--c-muted);
    }

    .tab-active {
        color: var(--c-accent);
    }

    .tab-indicator {
        background: var(--c-accent);
        height: 3px;
        border-radius: 999px;
        transition: left .3s ease, width .3s ease;
    }

    .badge {
        background: var(--c-soft);
        color: var(--c-text);
        border: 1px solid var(--c-line);
    }

    /* simple fade-in on scroll */
    .fade {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity .6s ease, transform .6s ease;
    }

    .faded {
        opacity: 1;
        transform: none;
    }

    /* Tailwind reset helpers for form elements look */
    input,
    select,
    textarea {
        background: var(--c-bg) !important;
        border: 1px solid var(--c-line) !important;
        color: var(--c-text) !important;
    }

    .focus-ring:focus {
        outline: none;
        box-shadow: 0 0 0 4px var(--c-soft);
        border-color: var(--c-accent) !important;
    }

    .pill {
        border-radius: 14px;
    }

    .shadow-soft {
        box-shadow: 0 22px 52px -28px rgba(0, 65, 82, .28);
    }