@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Sora:wght@500;600;700;800&display=swap');

:root {
    --nv-ink: #07111f;
    --nv-muted: #657084;
    --nv-surface: rgba(255, 255, 255, 0.84);
    --nv-surface-strong: rgba(255, 255, 255, 0.96);
    --nv-border: rgba(15, 23, 42, 0.10);
    --nv-cyan: #07b7df;
    --nv-blue: #0b6ee8;
    --nv-gold: #ffd23f;
    --nv-shadow: 0 22px 70px rgba(8, 21, 45, 0.14);
    --nv-shadow-soft: 0 14px 40px rgba(8, 21, 45, 0.10);
    --nv-radius: 22px;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    letter-spacing: 0;
    background:
        radial-gradient(circle at 12% -8%, rgba(7, 183, 223, 0.16), transparent 32rem),
        radial-gradient(circle at 88% 4%, rgba(255, 210, 63, 0.13), transparent 28rem),
        linear-gradient(180deg, #f7fbff 0%, #edf4f8 48%, #f8fafc 100%) !important;
}

.dark body,
body.dark {
    background:
        radial-gradient(circle at 18% -6%, rgba(7, 183, 223, 0.18), transparent 32rem),
        radial-gradient(circle at 86% 3%, rgba(255, 210, 63, 0.08), transparent 24rem),
        linear-gradient(180deg, #06101d 0%, #0a1220 52%, #080d16 100%) !important;
}

h1,
h2,
h3,
h4,
.font-display,
.page-loading .text {
    font-family: "Sora", "Manrope", Inter, sans-serif !important;
    letter-spacing: 0;
}

a,
button,
input,
select,
textarea {
    -webkit-tap-highlight-color: transparent;
}

button,
a[role="button"],
.btn,
.button,
[type="submit"],
[type="button"] {
    position: relative;
    isolation: isolate;
    transition:
        transform 180ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease,
        background-color 220ms ease,
        color 220ms ease !important;
}

button:hover,
a[role="button"]:hover,
.btn:hover,
[type="submit"]:hover,
[type="button"]:hover {
    transform: translateY(-1px);
}

button:active,
a[role="button"]:active,
.btn:active,
[type="submit"]:active,
[type="button"]:active {
    transform: translateY(0) scale(0.985);
}

.nv-ripple {
    position: absolute;
    width: 14px;
    height: 14px;
    pointer-events: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    transform: translate(-50%, -50%) scale(0);
    animation: nvRipple 620ms ease-out forwards;
    z-index: 1;
}

.nv-glass,
.card,
.modal-content,
.dropdown-menu,
.mobile-tab-shell,
.bg-white,
.dark .dark\:bg-gray-900,
.dark .dark\:bg-gray-800 {
    border-color: var(--nv-border) !important;
    box-shadow: var(--nv-shadow-soft);
}

.mobile-wallet-card,
.shine-effect-container,
.nv-cinematic-card {
    box-shadow: 0 26px 70px rgba(6, 30, 63, 0.24) !important;
}

.card-brand-logo {
    display: inline-block;
    max-width: 96px;
    max-height: 38px;
    object-fit: contain;
    object-position: center;
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.20));
}

.mobile-hero-header {
    background:
        radial-gradient(circle at 78% 8%, rgba(7, 183, 223, 0.28), transparent 18rem),
        radial-gradient(circle at 12% 86%, rgba(255, 210, 63, 0.16), transparent 16rem),
        linear-gradient(145deg, #07111f 0%, #111f34 48%, #07111f 100%) !important;
}

.mobile-tabbar {
    filter: drop-shadow(0 22px 36px rgba(2, 14, 31, 0.20));
}

.mobile-tab-shell {
    background: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(22px) saturate(1.25);
}

.dark .mobile-tab-shell {
    background: rgba(7, 17, 31, 0.86) !important;
}

input,
select,
textarea,
.form-control,
.custom-select {
    border-radius: 16px !important;
    border-color: rgba(100, 116, 139, 0.22) !important;
    box-shadow: 0 8px 24px rgba(8, 21, 45, 0.05);
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.custom-select:focus {
    border-color: rgba(7, 183, 223, 0.72) !important;
    box-shadow: 0 0 0 4px rgba(7, 183, 223, 0.14), 0 12px 32px rgba(8, 21, 45, 0.08) !important;
    outline: none !important;
}

.bg-primary-600,
.hover\:bg-primary-700:hover,
.btn-primary,
button[type="submit"] {
    background-image: linear-gradient(135deg, var(--nv-cyan), var(--nv-blue)) !important;
    box-shadow: 0 16px 36px rgba(7, 119, 218, 0.28) !important;
    border: 0 !important;
}

.text-primary-600,
.text-primary-500,
.dark .dark\:text-primary-400 {
    color: #0788c9 !important;
}

.bg-primary-50 {
    background: rgba(7, 183, 223, 0.09) !important;
}

.border-primary-100 {
    border-color: rgba(7, 183, 223, 0.16) !important;
}

.fade-in-section,
.nv-reveal {
    opacity: 0;
    transform: translateY(18px);
}

.fade-in-section.is-visible,
.nv-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 650ms ease, transform 650ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.page-loading {
    background:
        radial-gradient(circle at 50% 35%, rgba(7, 183, 223, 0.18), transparent 22rem),
        linear-gradient(135deg, #06101d 0%, #0d1b2c 46%, #07111f 100%) !important;
}

.page-loading .text {
    color: #f8fbff !important;
}

.page-loading .subtitle {
    color: rgba(248, 251, 255, 0.66) !important;
}

.loading-progress {
    display: none !important;
}

@keyframes nvRipple {
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(22);
    }
}

@media (max-width: 768px) {
    body {
        background: #f8fafc !important;
    }

    .dark body,
    body.dark {
        background: #07111f !important;
    }

    .card,
    .modal-content,
    .nv-glass {
        border-radius: 18px !important;
    }

    button:hover,
    a[role="button"]:hover,
    .btn:hover,
    [type="submit"]:hover,
    [type="button"]:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}