@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@600;700;800&family=Dosis:wght@500;600;700&family=Iosevka+Charon+Mono:wght@500;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

body,
html {
    --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
    --font-brand: 'Iosevka Charon Mono', ui-monospace, 'SFMono-Regular', 'Cascadia Code', 'Segoe UI Mono', monospace;
    font-family: var(--font-sans);
}

@layer base {
    :root {
        --background: 0 0% 100%;
        --foreground: 0 0% 3.9%;
        --card: 0 0% 100%;
        --card-foreground: 0 0% 3.9%;
        --popover: 0 0% 100%;
        --popover-foreground: 0 0% 3.9%;
        --primary: 0 0% 9%;
        --primary-foreground: 0 0% 98%;
        --secondary: 0 0% 92.1%;
        --secondary-foreground: 0 0% 9%;
        --muted: 0 0% 96.1%;
        --muted-foreground: 0 0% 45.1%;
        --accent: 0 0% 96.1%;
        --accent-foreground: 0 0% 9%;
        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 92.8%;
        --input: 0 0% 89.8%;
        --ring: 0 0% 3.9%;
        --chart-1: 12 76% 61%;
        --chart-2: 173 58% 39%;
        --chart-3: 197 37% 24%;
        --chart-4: 43 74% 66%;
        --chart-5: 27 87% 67%;
        --radius: 0.5rem;
        --sidebar-background: 0 0% 98%;
        --sidebar-foreground: 240 5.3% 26.1%;
        --sidebar-primary: 0 0% 10%;
        --sidebar-primary-foreground: 0 0% 98%;
        --sidebar-accent: 0 0% 94%;
        --sidebar-accent-foreground: 0 0% 30%;
        --sidebar-border: 0 0% 91%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }

    .dark {
        --background: 0 0% 3.9%;
        --foreground: 0 0% 98%;
        --card: 0 0% 3.9%;
        --card-foreground: 0 0% 98%;
        --popover: 0 0% 3.9%;
        --popover-foreground: 0 0% 98%;
        --primary: 0 0% 98%;
        --primary-foreground: 0 0% 9%;
        --secondary: 0 0% 14.9%;
        --secondary-foreground: 0 0% 98%;
        --muted: 0 0% 6.9%;
        --muted-foreground: 0 0% 63.9%;
        --accent: 0 0% 14.9%;
        --accent-foreground: 0 0% 98%;
        --destructive: 0 84% 60%;
        --destructive-foreground: 0 0% 98%;
        --border: 0 0% 14.9%;
        --input: 0 0% 14.9%;
        --ring: 0 0% 83.1%;
        --chart-1: 220 70% 50%;
        --chart-2: 160 60% 45%;
        --chart-3: 30 80% 55%;
        --chart-4: 280 65% 60%;
        --chart-5: 340 75% 55%;
        --sidebar-background: 0 0% 7%;
        --sidebar-foreground: 0 0% 95.9%;
        --sidebar-primary: 360, 100%, 100%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 0 0% 15.9%;
        --sidebar-accent-foreground: 240 4.8% 95.9%;
        --sidebar-border: 0 0% 15.9%;
        --sidebar-ring: 217.2 91.2% 59.8%;
    }
}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
    }

    button,
    input,
    select,
    textarea {
        font: inherit;
    }
}

@media (max-width: 639px) {
    html {
        font-size: 15px;
    }

    input,
    select,
    textarea {
        font-size: 16px !important;
    }
}

@layer components {
    .admin-shell {
        --background: 0 0% 100%;
        --foreground: 222 47% 11%;
        --card: 0 0% 100%;
        --card-foreground: 222 47% 11%;
        --popover: 0 0% 100%;
        --popover-foreground: 222 47% 11%;
        --primary: 221 83% 53%;
        --primary-foreground: 0 0% 100%;
        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222 47% 11%;
        --muted: 210 40% 96.1%;
        --muted-foreground: 215 16% 47%;
        --accent: 214 32% 95%;
        --accent-foreground: 222 47% 11%;
        --border: 214 32% 91%;
        --input: 214 32% 91%;
        --ring: 221 83% 53%;
        --sidebar-background: 0 0% 100%;
        --sidebar-foreground: 222 47% 11%;
        --sidebar-primary: 221 83% 53%;
        --sidebar-primary-foreground: 0 0% 100%;
        --sidebar-accent: 210 40% 96.5%;
        --sidebar-accent-foreground: 222 47% 11%;
        --sidebar-border: 214 32% 91%;
        --sidebar-ring: 221 83% 53%;
        color: hsl(var(--foreground));
    }

    .admin-shell [data-sidebar='sidebar'] {
        background:
            radial-gradient(circle at top left, rgba(96, 165, 250, 0.12), transparent 36%),
            linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96));
    }
}

@layer components {
    .ambient-scene {
        pointer-events: none;
        position: absolute;
        inset: 0;
        overflow: hidden;
        isolation: isolate;
    }

    .ambient-scene__mesh,
    .ambient-scene__grid,
    .ambient-scene__cards,
    .ambient-scene__particle {
        position: absolute;
    }

    .ambient-scene__mesh {
        border-radius: 9999px;
        filter: blur(46px);
        opacity: 0.55;
        will-change: transform, opacity;
        animation: ambient-mesh-drift 16s ease-in-out infinite;
    }

    .ambient-scene__mesh--one {
        left: -8%;
        top: -3%;
        height: 18rem;
        width: 24rem;
        background: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, rgba(99, 102, 241, 0) 72%);
    }

    .ambient-scene__mesh--two {
        right: -10%;
        top: 22%;
        height: 21rem;
        width: 24rem;
        background: radial-gradient(circle, rgba(56, 189, 248, 0.16) 0%, rgba(56, 189, 248, 0) 74%);
        animation-delay: -5s;
        animation-duration: 18s;
    }

    .ambient-scene__mesh--three {
        left: 32%;
        bottom: -10%;
        height: 18rem;
        width: 26rem;
        background: radial-gradient(circle, rgba(244, 114, 182, 0.12) 0%, rgba(244, 114, 182, 0) 76%);
        animation-delay: -9s;
        animation-duration: 19s;
    }

    .ambient-scene__grid {
        inset: 0;
        background-image:
            linear-gradient(rgba(148, 163, 184, 0.08) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148, 163, 184, 0.08) 1px, transparent 1px);
        background-size: 42px 42px;
        mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.3), transparent 82%);
        opacity: 0.55;
    }

    .ambient-scene__cards {
        inset: 0;
    }

    .ambient-scene__ghost-card {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.7);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.08));
        box-shadow:
            0 16px 38px rgba(15, 23, 42, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
        backdrop-filter: blur(8px);
        border-radius: 28px;
        will-change: transform, opacity;
        animation: ambient-card-drift 18s ease-in-out infinite;
        opacity: 0.52;
    }

    .ambient-scene__ghost-card--one {
        left: 4%;
        top: 34%;
        height: 6.5rem;
        width: 10rem;
        --ambient-rotate: -10deg;
    }

    .ambient-scene__ghost-card--two {
        right: 8%;
        top: 14%;
        height: 7.75rem;
        width: 12rem;
        --ambient-rotate: 9deg;
        animation-delay: -7s;
        animation-duration: 21s;
    }

    .ambient-scene__ghost-card--three {
        right: 24%;
        bottom: 8%;
        height: 5.8rem;
        width: 9rem;
        --ambient-rotate: -6deg;
        animation-delay: -3s;
        animation-duration: 17s;
    }

    .ambient-scene__particle {
        border-radius: 9999px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(129, 140, 248, 0.42));
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.44),
            0 12px 22px rgba(99, 102, 241, 0.14);
        will-change: transform, opacity;
        animation: ambient-particle-float ease-in-out infinite;
    }

    .ambient-scene[data-variant='admin'] .ambient-scene__mesh--one,
    .ambient-scene[data-variant='app'] .ambient-scene__mesh--one {
        background: radial-gradient(circle, rgba(59, 130, 246, 0.18) 0%, rgba(59, 130, 246, 0) 72%);
    }

    .ambient-scene[data-variant='admin'] .ambient-scene__mesh--three,
    .ambient-scene[data-variant='app'] .ambient-scene__mesh--three {
        background: radial-gradient(circle, rgba(16, 185, 129, 0.11) 0%, rgba(16, 185, 129, 0) 78%);
    }

    .ambient-scene[data-variant='auth'] .ambient-scene__mesh--three {
        background: radial-gradient(circle, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0) 76%);
    }

    .ambient-scene[data-variant='auth'] .ambient-scene__ghost-card,
    .ambient-scene[data-variant='public'] .ambient-scene__ghost-card {
        opacity: 0.42;
    }

    .ambient-scene[data-variant='admin'] .ambient-scene__ghost-card,
    .ambient-scene[data-variant='app'] .ambient-scene__ghost-card {
        opacity: 0.34;
    }

    .hero-slide-surface {
        transform-origin: center;
        will-change: transform;
    }

    .hero-slide-surface--left {
        animation: hero-preview-float-left 6.8s ease-in-out infinite;
    }

    .hero-slide-surface--right {
        animation: hero-preview-float-right 6.8s ease-in-out infinite;
    }

    .hero-slide-surface--active {
        animation: hero-preview-active 7.6s ease-in-out infinite;
    }

    .hero-slide-glow {
        will-change: transform, opacity;
    }

    .hero-slide-glow--left {
        animation: hero-glow-left 5.8s ease-in-out infinite;
    }

    .hero-slide-glow--right {
        animation: hero-glow-right 5.8s ease-in-out infinite;
    }

    .hero-slide-glow--active {
        animation: hero-glow-active 7s ease-in-out infinite;
    }

    .hero-slide-tile {
        will-change: transform, opacity;
        animation: hero-tile-float ease-in-out infinite;
    }

    .hero-slide-sheen {
        animation: hero-sheen-drift 7.2s linear infinite;
        mix-blend-mode: screen;
    }

    .hero-backdrop-card {
        will-change: transform, opacity;
        animation: hero-backdrop-drift 12s ease-in-out infinite;
    }

    .hero-backdrop-card--alt {
        animation-direction: reverse;
        animation-duration: 13.5s;
    }

    .hero-backdrop-card--soft {
        animation-duration: 15s;
    }

    .login-orb {
        will-change: transform, opacity;
        animation: login-orb-drift 14s ease-in-out infinite;
    }

    .login-orb--alt {
        animation-direction: reverse;
        animation-duration: 16s;
    }

    .login-orb--soft {
        animation-duration: 18s;
    }

    .login-particle {
        position: absolute;
        border-radius: 9999px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.92) 0%, rgba(129, 140, 248, 0.5) 100%);
        box-shadow:
            0 0 0 1px rgba(255, 255, 255, 0.35),
            0 0 24px rgba(99, 102, 241, 0.24);
        will-change: transform, opacity;
        animation: login-particle-float ease-in-out infinite;
    }

    .transaction-grid {
        background-image:
            linear-gradient(rgba(148, 163, 184, 0.14) 1px, transparent 1px),
            linear-gradient(90deg, rgba(148, 163, 184, 0.12) 1px, transparent 1px);
        background-position: center center;
        background-size: 44px 44px;
        mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 0.85) 36%, transparent 88%);
    }

    .transaction-scan-line {
        will-change: transform, opacity;
        animation: transaction-scan 5.2s ease-in-out infinite;
    }

    .transaction-status-pulse {
        will-change: transform, box-shadow;
        animation: transaction-status-pulse 2.8s ease-out infinite;
    }

    .transaction-float-chip {
        will-change: transform;
        animation: transaction-float 6.4s ease-in-out infinite;
    }

    .transaction-float-chip--alt {
        animation-direction: reverse;
        animation-duration: 7.6s;
    }

    .leaderboard-podium {
        will-change: transform;
        animation: leaderboard-podium-float 6.8s ease-in-out infinite;
    }

    .leaderboard-podium--alt {
        animation-direction: reverse;
        animation-duration: 7.8s;
    }

    .leaderboard-sheen {
        animation: leaderboard-sheen-drift 8.6s linear infinite;
        mix-blend-mode: screen;
    }

    .sales-pill {
        will-change: transform, box-shadow;
        animation: sales-pill-float 5.8s ease-in-out infinite;
    }

    .sales-pill-icon {
        will-change: transform, box-shadow;
        animation: sales-pill-icon-pulse 2.8s ease-in-out infinite;
    }

    .sales-pill-sheen {
        animation: sales-pill-sheen 5.4s linear infinite;
        background: linear-gradient(115deg, transparent 0%, transparent 42%, rgba(255, 255, 255, 0.5) 50%, transparent 58%, transparent 100%);
        mix-blend-mode: screen;
        pointer-events: none;
    }

    .navbar-brand-link {
        display: inline-flex;
        align-items: center;
        gap: 0.9rem;
        max-width: 100%;
    }

    .navbar-brand-mark {
        width: clamp(3rem, 2.7rem + 0.8vw, 3.75rem);
        height: clamp(3rem, 2.7rem + 0.8vw, 3.75rem);
        object-fit: contain;
        filter: drop-shadow(0 16px 28px rgba(244, 114, 182, 0.18));
        animation: brand-mark-float 6.4s ease-in-out infinite;
    }

    .navbar-brand-copy {
        display: flex;
        min-width: 0;
        flex-direction: column;
        gap: 0.12rem;
    }

    .lyva-wordmark {
        font-family: 'Baloo 2', var(--font-sans);
        font-weight: 800;
        letter-spacing: 0.05em;
        line-height: 0.92;
        text-transform: uppercase;
        color: #0f172a;
    }

    .lyva-wordmark--sm {
        font-size: 1.08rem;
    }

    .lyva-wordmark--md {
        font-size: 1.2rem;
    }

    .lyva-wordmark--lg {
        font-size: clamp(1.18rem, 1rem + 0.5vw, 1.72rem);
    }

    .lyva-wordmark--xl {
        font-size: clamp(1.5rem, 1.28rem + 0.6vw, 2rem);
    }

    .navbar-brand-title {
        display: block;
        white-space: nowrap;
        text-shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    }

    .navbar-brand-tagline {
        display: block;
        white-space: nowrap;
        font-size: 0.62rem;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.22em;
        text-transform: uppercase;
        color: #818cf8;
    }

    .footer-brand-title {
        line-height: 0.96;
    }

.footer-brand-tagline {
    margin-top: 0.4rem;
    max-width: 30rem;
    font-size: 0.96rem;
    line-height: 1.75;
    color: #475569;
}

    @media (max-width: 640px) {
        .navbar-brand-link {
            gap: 0.7rem;
        }

        .navbar-brand-title {
            font-size: 1.04rem;
        }

        .navbar-brand-tagline {
            display: none;
        }
    }
}

@keyframes ambient-mesh-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.5;
    }

    50% {
        transform: translate3d(0, -18px, 0) scale(1.06);
        opacity: 0.68;
    }
}

@keyframes ambient-card-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(var(--ambient-rotate, 0deg));
    }

    50% {
        transform: translate3d(0, -14px, 0) rotate(calc(var(--ambient-rotate, 0deg) + 2deg));
    }
}

@keyframes ambient-particle-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    35% {
        transform: translate3d(12px, -16px, 0) scale(1.08);
    }

    70% {
        transform: translate3d(-10px, -28px, 0) scale(0.92);
    }
}

@keyframes hero-preview-float-left {
    0%,
    100% {
        transform: translate3d(-12px, 0, 0) rotate(-1.8deg);
    }

    50% {
        transform: translate3d(8px, -10px, 0) rotate(1deg);
    }
}

@keyframes hero-preview-float-right {
    0%,
    100% {
        transform: translate3d(12px, 0, 0) rotate(1.8deg);
    }

    50% {
        transform: translate3d(-8px, -10px, 0) rotate(-1deg);
    }
}

@keyframes hero-preview-active {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(0, -3px, 0) scale(1.008);
    }
}

@keyframes hero-glow-left {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.88;
    }

    50% {
        transform: translate3d(10px, -8px, 0) scale(1.08);
        opacity: 1;
    }
}

@keyframes hero-glow-right {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.72;
    }

    50% {
        transform: translate3d(-10px, -8px, 0) scale(1.1);
        opacity: 0.94;
    }
}

@keyframes hero-glow-active {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.86;
    }

    50% {
        transform: translate3d(0, -6px, 0) scale(1.04);
        opacity: 1;
    }
}

@keyframes hero-tile-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -5px, 0);
    }
}

@keyframes hero-sheen-drift {
    0% {
        transform: translateX(-16%);
        opacity: 0.14;
    }

    50% {
        opacity: 0.24;
    }

    100% {
        transform: translateX(12%);
        opacity: 0.14;
    }
}

@keyframes hero-backdrop-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        opacity: 0.9;
    }

    50% {
        transform: translate3d(0, -12px, 0) rotate(2deg);
        opacity: 1;
    }
}

@keyframes login-orb-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.9;
    }

    50% {
        transform: translate3d(0, -20px, 0) scale(1.06);
        opacity: 1;
    }
}

@keyframes login-particle-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    35% {
        transform: translate3d(10px, -18px, 0) scale(1.08);
    }

    70% {
        transform: translate3d(-8px, -34px, 0) scale(0.94);
    }
}

@keyframes transaction-scan {
    0%,
    100% {
        transform: translate3d(0, -22px, 0);
        opacity: 0.16;
    }

    50% {
        transform: translate3d(0, 22px, 0);
        opacity: 0.62;
    }
}

@keyframes checkout-step-active-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        box-shadow: 0 12px 28px rgba(249, 115, 22, 0.12);
    }

    50% {
        transform: translate3d(0, -2px, 0) scale(1.04);
        box-shadow: 0 18px 36px rgba(249, 115, 22, 0.2);
    }
}

@keyframes checkout-step-processing-spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes checkout-step-done-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 24px rgba(148, 163, 184, 0.08);
        opacity: 0.76;
    }

    50% {
        transform: scale(1.05);
        box-shadow: 0 16px 30px rgba(59, 130, 246, 0.12);
        opacity: 0.96;
    }
}

@keyframes checkout-step-expired-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 12px 28px rgba(220, 38, 38, 0.14);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 20px 38px rgba(220, 38, 38, 0.22);
    }
}

@keyframes checkout-step-line-flow {
    0% {
        background-position: 0% 50%;
    }

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

@layer components {
    .checkout-step-group {
        position: relative;
    }

    .checkout-step-icon {
        position: relative;
        overflow: hidden;
        transition:
            transform 220ms ease,
            box-shadow 220ms ease,
            background-color 220ms ease,
            color 220ms ease;
    }

    .checkout-step-icon::after {
        content: '';
        position: absolute;
        inset: 1px;
        border-radius: 9999px;
        pointer-events: none;
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.44), transparent 68%);
        opacity: 0.9;
    }

    .checkout-step-icon--active {
        animation: checkout-step-active-float 3.2s ease-in-out infinite;
    }

    .checkout-step-icon--processing svg {
        animation: checkout-step-processing-spin 2.8s linear infinite;
    }

    .checkout-step-icon--done {
        animation: checkout-step-done-pulse 3.4s ease-in-out infinite;
    }

    .checkout-step-icon--expired {
        animation: checkout-step-expired-pulse 2.4s ease-in-out infinite;
    }

    .checkout-step-line {
        position: relative;
        border-radius: 9999px;
        overflow: hidden;
    }

    .checkout-step-line--active {
        background: linear-gradient(90deg, rgba(251, 146, 60, 0.28) 0%, rgba(249, 115, 22, 0.8) 40%, rgba(37, 99, 235, 0.3) 100%);
        background-size: 200% 100%;
        animation: checkout-step-line-flow 4.8s linear infinite;
    }

    .checkout-step-line--idle {
        background: linear-gradient(90deg, rgba(226, 232, 240, 0.92) 0%, rgba(203, 213, 225, 0.82) 100%);
    }

    .checkout-step-line--simple {
        background: linear-gradient(90deg, rgba(212, 212, 216, 0.9) 0%, rgba(228, 228, 231, 0.88) 100%);
    }
}

@keyframes transaction-status-pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.34);
    }

    70% {
        transform: scale(1.08);
        box-shadow: 0 0 0 14px rgba(16, 185, 129, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

@keyframes transaction-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -9px, 0);
    }
}

@keyframes leaderboard-podium-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(0, -10px, 0);
    }
}

@keyframes leaderboard-sheen-drift {
    0% {
        transform: translateX(-18%);
        opacity: 0.12;
    }

    50% {
        opacity: 0.24;
    }

    100% {
        transform: translateX(14%);
        opacity: 0.12;
    }
}

@keyframes sales-pill-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
    }

    50% {
        transform: translate3d(0, -2px, 0);
        box-shadow: 0 16px 30px rgba(37, 99, 235, 0.08);
    }
}

@keyframes sales-pill-icon-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 8px 20px rgba(244, 114, 182, 0.18);
    }

    50% {
        transform: scale(1.08);
        box-shadow: 0 12px 26px rgba(244, 114, 182, 0.24);
    }
}

@keyframes sales-pill-sheen {
    0% {
        transform: translateX(-34%);
        opacity: 0;
    }

    18% {
        opacity: 0.75;
    }

    48% {
        opacity: 0.2;
    }

    100% {
        transform: translateX(34%);
        opacity: 0;
    }
}

@keyframes brand-mark-float {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(-1deg);
    }

    50% {
        transform: translate3d(0, -4px, 0) rotate(1.4deg);
    }
}

@keyframes payment-marquee-left {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes footer-pulse-scroll {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }
}

@keyframes footer-orb-drift {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: 0.62;
    }

    50% {
        transform: translate3d(0, -16px, 0) scale(1.08);
        opacity: 0.9;
    }
}

@keyframes footer-support-sheen {
    0% {
        transform: translate3d(-10%, 0, 0) rotate(18deg);
        opacity: 0.08;
    }

    20% {
        opacity: 0.2;
    }

    100% {
        transform: translate3d(185%, 0, 0) rotate(18deg);
        opacity: 0.08;
    }
}

@keyframes footer-chip-dot-pulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2);
    }

    50% {
        transform: scale(1.12);
        box-shadow: 0 0 0 6px rgba(99, 102, 241, 0);
    }
}

.payment-marquee-mask {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);
}

.payment-marquee-track {
    display: flex;
    width: max-content;
    gap: 0.75rem;
    animation: payment-marquee-left 28s linear infinite;
    will-change: transform;
}

.payment-marquee-track:hover {
    animation-play-state: paused;
}

.payment-marquee-track--static {
    width: 100%;
    flex-wrap: wrap;
    animation: none;
}

.payment-marquee-chip {
    display: inline-flex;
    height: 3rem;
    min-width: 6.25rem;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    background: rgba(255, 255, 255, 0.95);
    padding: 0 1rem;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05);
}

.payment-marquee-logo {
    height: 1.9rem;
    width: auto;
    max-width: 5.5rem;
    object-fit: contain;
}

.payment-marquee-fallback {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(71 85 105);
}

.footer-hero-orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(48px);
    will-change: transform, opacity;
    animation: footer-orb-drift 13s ease-in-out infinite;
}

.footer-hero-orb--one {
    left: -8%;
    top: 14%;
    height: 12rem;
    width: 12rem;
    background: radial-gradient(circle, rgba(129, 140, 248, 0.34) 0%, rgba(129, 140, 248, 0) 72%);
}

.footer-hero-orb--two {
    right: -6%;
    bottom: -18%;
    height: 14rem;
    width: 14rem;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.26) 0%, rgba(56, 189, 248, 0) 74%);
    animation-delay: -4.5s;
    animation-duration: 15s;
}

.footer-feature-card {
    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}

.footer-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 46px rgba(15, 23, 42, 0.08);
}

.footer-pulse-mask {
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}

.footer-pulse-track {
    display: flex;
    width: max-content;
    gap: 0.75rem;
    animation: footer-pulse-scroll 24s linear infinite;
    will-change: transform;
}

.footer-pulse-mask:hover .footer-pulse-track {
    animation-play-state: paused;
}

.footer-pulse-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    border-radius: 9999px;
    border: 1px solid rgba(224, 231, 255, 0.88);
    background: rgba(255, 255, 255, 0.78);
    padding: 0.8rem 1rem;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgb(51 65 85);
    box-shadow:
        0 12px 28px rgba(15, 23, 42, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px);
}

.footer-pulse-chip__dot {
    height: 0.45rem;
    width: 0.45rem;
    flex: none;
    border-radius: 9999px;
    background: linear-gradient(135deg, rgb(99 102 241), rgb(34 211 238));
    animation: footer-chip-dot-pulse 2.6s ease-in-out infinite;
}

@media (max-width: 767px) {
    .footer-brand-title {
        font-size: 1.7rem;
        line-height: 1;
        word-break: break-word;
    }

    .footer-brand-tagline {
        max-width: 100%;
        font-size: 0.88rem;
        line-height: 1.6;
    }

    .payment-marquee-mask,
    .footer-pulse-mask {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .payment-marquee-track,
    .footer-pulse-track {
        width: 100%;
        flex-wrap: wrap;
        animation: none;
        gap: 0.55rem;
    }

    .payment-marquee-chip {
        min-width: 0;
        flex: 1 1 calc(50% - 0.55rem);
        height: 2.6rem;
        padding: 0 0.8rem;
    }

    .payment-marquee-logo {
        max-width: 4.6rem;
        height: 1.55rem;
    }

    .payment-marquee-fallback {
        font-size: 0.66rem;
        letter-spacing: 0.05em;
    }

    .footer-pulse-chip {
        min-width: 0;
        flex: 1 1 calc(50% - 0.55rem);
        justify-content: center;
        padding: 0.68rem 0.8rem;
        font-size: 0.66rem;
        letter-spacing: 0.05em;
        text-align: center;
    }

    .footer-pulse-chip__dot {
        height: 0.38rem;
        width: 0.38rem;
    }
}

.footer-support-card__sheen {
    pointer-events: none;
    position: absolute;
    left: -42%;
    top: -34%;
    height: 190%;
    width: 58%;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, 0.24) 46%, transparent 58%);
    mix-blend-mode: screen;
    opacity: 0.24;
    animation: footer-support-sheen 8.4s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .payment-marquee-track,
    .footer-pulse-track,
    .footer-hero-orb,
    .footer-support-card__sheen,
    .footer-pulse-chip__dot {
        animation: none !important;
    }
}