:root {
    --sky-400: #38bdf8;
    --sky-500: #0ea5e9;
    --font-header: "Manrope", system-ui, sans-serif;
}

body {
    font-family: "Inter", system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.font-header {
    font-family: var(--font-header);
}

.premium-shadow {
    box-shadow:
        0 25px 50px -12px rgba(15, 23, 42, 0.15),
        0 0 0 1px rgba(148, 163, 184, 0.08);
}

.glass-dark {
    background: rgba(15, 23, 42, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Hero text shadows — keep headlines readable on any photo,
   regardless of which scrim strength the editor picks. */
.hero-text-light {
    color: #ffffff;
    text-shadow:
        0 1px 2px rgba(0, 0, 0, 0.55),
        0 2px 28px rgba(2, 6, 23, 0.45);
}

.hero-text-light-soft {
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 16px rgba(2, 6, 23, 0.55);
}

.hero-text-dark {
    color: #0f172a;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.6),
        0 2px 24px rgba(255, 255, 255, 0.45);
}

.hero-text-dark-soft {
    color: #334155;
    text-shadow: 0 1px 12px rgba(255, 255, 255, 0.65);
}

/* Ticker — duplicated strip in markup; translates -50% for seamless loop */
.deal-track {
    display: inline-flex;
    flex-wrap: nowrap;
    animation: deal-marquee 40s linear infinite;
}

@keyframes deal-marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/*
 * Nav mega-menus: visibility/positioning are Tailwind utilities in index.html
 * so they keep working even when the Tailwind CDN injects after this file.
 * Everything below is purely visual polish.
 */
.nav-pop {
    min-width: 17.5rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgb(226 232 240 / 0.8);
    border-radius: 1.25rem;
    box-shadow:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 12px 28px -10px rgba(15, 23, 42, 0.12),
        0 32px 60px -24px rgba(15, 23, 42, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    transform-origin: top left;
    animation: nav-pop-in 220ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes nav-pop-in {
    0% {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.nav-pop__eyebrow {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem 0.625rem;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: rgb(148 163 184);
    border-bottom: 1px solid rgb(241 245 249);
    margin-bottom: 0.375rem;
}

.nav-pop__eyebrow::before {
    content: "";
    display: inline-block;
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--sky-500);
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.12);
}

.dropdown-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.875rem;
    font-size: 13px;
    font-weight: 700;
    color: rgb(15 23 42);
    border-radius: 0.75rem;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.dropdown-link::after {
    content: "→";
    font-size: 13px;
    font-weight: 800;
    color: rgb(203 213 225);
    opacity: 0;
    transform: translateX(-4px);
    transition:
        opacity 0.18s ease,
        transform 0.18s ease,
        color 0.18s ease;
}

.dropdown-link:hover {
    background: linear-gradient(135deg, rgb(240 249 255), rgb(248 250 252));
    color: var(--sky-500);
}

.dropdown-link:hover::after {
    opacity: 1;
    transform: translateX(0);
    color: var(--sky-500);
}

.dropdown-link:focus-visible {
    outline: 2px solid var(--sky-400);
    outline-offset: 2px;
}

/* Card filter tabs */
.card-filter-btn {
    background: transparent;
    color: rgb(100 116 139);
    border: none;
    cursor: pointer;
}

.card-filter-btn.is-active {
    background: rgb(15 23 42);
    color: white;
}

.card-filter-btn:hover:not(.is-active) {
    background: rgb(241 245 249);
    color: rgb(15 23 42);
}

.card-filter-btn:focus-visible {
    outline: 2px solid var(--sky-400);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .deal-track,
    .nav-pop {
        animation: none;
    }
    .dropdown-link,
    .dropdown-link::after {
        transition: none;
    }
}