/* Stable VORTEX background: no overlays, no layout shift, no scroll jank */
html,
body {
    min-height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    scroll-behavior: auto !important;
    background: #ffffff !important;
}

body.vortex-bg-active {
    background-color: #ffffff !important;
    background-image:
        radial-gradient(circle at 6% 8%, rgba(0, 132, 255, 0.22), transparent 18rem),
        radial-gradient(circle at 92% 10%, rgba(16, 185, 129, 0.18), transparent 19rem),
        radial-gradient(circle at 84% 88%, rgba(0, 87, 168, 0.14), transparent 24rem),
        linear-gradient(115deg, transparent 0 47%, rgba(0, 132, 255, 0.055) 47.2% 47.45%, transparent 47.7% 100%),
        linear-gradient(28deg, transparent 0 55%, rgba(16, 185, 129, 0.045) 55.15% 55.45%, transparent 55.7% 100%),
        linear-gradient(180deg, #ffffff 0%, #f6fbff 52%, #ffffff 100%) !important;
    background-size: auto, auto, auto, 18rem 18rem, 21rem 21rem, auto !important;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat !important;
    background-attachment: scroll !important;
    background-position: top left, top right, bottom right, 0 0, 0 0, center !important;
    animation: none !important;
}

html::before,
html::after,
body::before,
body::after,
.ambient-blob,
.tm-page::before,
.tm-page::after,
.premium-page::before,
.premium-page::after,
.tm-standalone-page::before,
.tm-standalone-page::after,
.premium-dashboard-layout::before,
.premium-dashboard-layout::after,
.premium-dashboard-main::before,
.premium-dashboard-main::after,
.premium-public-shell::before,
.premium-public-shell::after,
.tm-standalone-page main::before,
.tm-standalone-page main::after,
.premium-public-shell main::before,
.premium-public-shell main::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    animation: none !important;
    transform: none !important;
    pointer-events: none !important;
}

body.vortex-bg-active .tm-page,
body.vortex-bg-active .premium-page,
body.vortex-bg-active .tm-standalone-page,
body.vortex-bg-active .premium-dashboard-layout,
body.vortex-bg-active .premium-dashboard-main,
body.vortex-bg-active .premium-dashboard-content,
body.vortex-bg-active .premium-public-shell,
body.vortex-bg-active .premium-app-bg,
body.vortex-bg-active .tm-standalone-page main,
body.vortex-bg-active .premium-public-main {
    background: transparent !important;
    transform: none !important;
    translate: none !important;
    animation: none !important;
    isolation: auto !important;
}

body.vortex-bg-active .tm-motion-target,
body.vortex-bg-active .tm-motion-visible,
html.tm-motion-ready body.vortex-bg-active .tm-motion-target,
html.tm-motion-ready body.vortex-bg-active .tm-motion-target.tm-motion-visible {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    animation: none !important;
}

body.vortex-bg-active .tm-site-nav,
body.vortex-bg-active .tm-listing-header,
body.vortex-bg-active .premium-sidebar,
body.vortex-bg-active .premium-sidebar-panel,
body.vortex-bg-active .premium-public-card,
body.vortex-bg-active .premium-page-header,
body.vortex-bg-active .premium-card,
body.vortex-bg-active .dashboard-card,
body.vortex-bg-active .form-panel,
body.vortex-bg-active .product-card,
body.vortex-bg-active .product-card-premium,
body.vortex-bg-active .category-strip,
body.vortex-bg-active .benefit-card,
body.vortex-bg-active .section-heading {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) saturate(1.04) !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active {
        background-image:
            radial-gradient(circle at 0% 8%, rgba(0, 132, 255, 0.16), transparent 13rem),
            radial-gradient(circle at 100% 10%, rgba(16, 185, 129, 0.13), transparent 14rem),
            linear-gradient(180deg, #ffffff 0%, #f7fcff 55%, #ffffff 100%) !important;
        background-size: auto, auto, auto !important;
    }
}

/* Landing text polish: soft premium type + lightweight reveal animations */
@keyframes vortexTextLift {
    0% {
        opacity: 0;
        clip-path: inset(0 0 100% 0);
        filter: blur(10px);
        transform: translate3d(0, 0.85em, 0) scale(0.985);
    }
    62% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
        transform: translate3d(0, -0.035em, 0) scale(1.002);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes vortexFadeSoft {
    0% {
        opacity: 0;
        filter: blur(8px);
        transform: translate3d(0, 14px, 0);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes vortexAccentFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

body.vortex-bg-active .landing-hero-title,
body.vortex-bg-active .tm-hero-title {
    max-width: 880px !important;
    color: #0b1220 !important;
    background: none !important;
    font-weight: 560 !important;
    letter-spacing: -0.058em !important;
    line-height: 1.04 !important;
    text-wrap: balance;
    -webkit-text-fill-color: currentColor !important;
}

body.vortex-bg-active .hero-title-line {
    display: block;
    opacity: 0;
    will-change: opacity, transform, filter, clip-path;
    animation: vortexTextLift 0.92s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.vortex-bg-active .hero-title-line:nth-child(2) {
    animation-delay: 0.12s;
}

body.vortex-bg-active .hero-title-line:nth-child(3) {
    animation-delay: 0.24s;
}

body.vortex-bg-active .hero-title-accent {
    display: inline-block;
    width: max-content;
    max-width: 100%;
    background: linear-gradient(92deg, #0057a8 0%, #03a9f4 34%, #10b981 66%, #0057a8 100%) !important;
    background-size: 220% 220% !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 640 !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation:
        vortexTextLift 0.92s cubic-bezier(0.16, 1, 0.3, 1) 0.24s both,
        vortexAccentFlow 7s ease-in-out 1.2s infinite;
}

body.vortex-bg-active .landing-eyebrow,
body.vortex-bg-active .landing-hero-copy,
body.vortex-bg-active .landing-hero-actions,
body.vortex-bg-active .landing-hero-stats,
body.vortex-bg-active .tm-preview-card {
    opacity: 0;
    will-change: opacity, transform, filter;
    animation: vortexFadeSoft 0.76s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.vortex-bg-active .landing-eyebrow {
    animation-delay: 0.08s;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
}

body.vortex-bg-active .landing-hero-copy {
    animation-delay: 0.46s;
    color: #475569 !important;
    font-size: clamp(1.02rem, 1vw + 0.8rem, 1.25rem) !important;
    font-weight: 430 !important;
    line-height: 1.78 !important;
    text-wrap: pretty;
}

body.vortex-bg-active .landing-hero-actions {
    animation-delay: 0.58s;
}

body.vortex-bg-active .landing-hero-stats {
    animation-delay: 0.7s;
}

body.vortex-bg-active .tm-preview-card {
    animation-delay: 0.34s;
}

body.vortex-bg-active .section-heading h2,
body.vortex-bg-active .tm-section-title,
body.vortex-bg-active .section-title {
    color: #0b1220 !important;
    font-weight: 620 !important;
    letter-spacing: -0.04em !important;
    line-height: 1.08 !important;
    text-wrap: balance;
}

body.vortex-bg-active .section-heading p,
body.vortex-bg-active .tm-section-subtitle,
body.vortex-bg-active .section-subtitle,
body.vortex-bg-active .benefit-card p,
body.vortex-bg-active .product-card p {
    color: #526173 !important;
    font-weight: 430 !important;
    line-height: 1.7 !important;
    text-wrap: pretty;
}

body.vortex-bg-active .category-strip,
body.vortex-bg-active .benefit-card,
body.vortex-bg-active .section-heading {
    animation: vortexFadeSoft 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.vortex-bg-active .category-strip {
    animation-delay: 0.08s;
}

body.vortex-bg-active .benefit-card:nth-child(1) {
    animation-delay: 0.08s;
}

body.vortex-bg-active .benefit-card:nth-child(2) {
    animation-delay: 0.16s;
}

body.vortex-bg-active .benefit-card:nth-child(3) {
    animation-delay: 0.24s;
}

@media (max-width: 767px) {
    body.vortex-bg-active .landing-hero-title,
    body.vortex-bg-active .tm-hero-title {
        max-width: 100% !important;
        font-weight: 570 !important;
        letter-spacing: -0.048em !important;
        line-height: 1.08 !important;
    }

    body.vortex-bg-active .hero-title-line {
        display: inline;
    }

    body.vortex-bg-active .hero-title-line::after {
        content: " ";
    }

    body.vortex-bg-active .hero-title-accent {
        width: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .hero-title-line,
    body.vortex-bg-active .hero-title-accent,
    body.vortex-bg-active .landing-eyebrow,
    body.vortex-bg-active .landing-hero-copy,
    body.vortex-bg-active .landing-hero-actions,
    body.vortex-bg-active .landing-hero-stats,
    body.vortex-bg-active .tm-preview-card,
    body.vortex-bg-active .category-strip,
    body.vortex-bg-active .benefit-card,
    body.vortex-bg-active .section-heading {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
    }
}

/* Premium hero v2: cinematic word bloom, soft shimmer, no scroll jank */
@keyframes vortexWordBloom {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: translate3d(0, 26px, 0) rotateX(16deg) scale(0.94);
        text-shadow: 0 18px 36px rgba(0, 87, 168, 0);
    }
    58% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, -3px, 0) rotateX(0deg) scale(1.012);
        text-shadow: 0 18px 36px rgba(0, 132, 255, 0.18);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) rotateX(0deg) scale(1);
        text-shadow: none;
    }
}

@keyframes vortexHeroSheen {
    0% {
        opacity: 0;
        transform: translateX(-130%) skewX(-18deg);
    }
    16% {
        opacity: 0.65;
    }
    44% {
        opacity: 0;
        transform: translateX(130%) skewX(-18deg);
    }
    100% {
        opacity: 0;
        transform: translateX(130%) skewX(-18deg);
    }
}

@keyframes vortexUnderlineDraw {
    0% {
        opacity: 0;
        transform: scaleX(0);
    }
    100% {
        opacity: 1;
        transform: scaleX(1);
    }
}

body.vortex-bg-active .landing-hero-title {
    position: relative;
    display: block;
    max-width: 940px !important;
    perspective: 900px;
    font-weight: 520 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.02 !important;
    text-wrap: balance;
}

body.vortex-bg-active .landing-hero-title::after {
    content: "";
    position: absolute;
    inset: -0.12em -0.16em;
    z-index: -1;
    border-radius: 1.25rem;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0) 34%,
        rgba(255, 255, 255, 0.72) 48%,
        rgba(186, 230, 253, 0.28) 54%,
        transparent 70%
    );
    pointer-events: none;
    animation: vortexHeroSheen 3.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

body.vortex-bg-active .hero-word {
    display: inline-block;
    opacity: 0;
    margin-right: 0.12em;
    transform-origin: 50% 78%;
    will-change: opacity, transform, filter;
    animation: vortexWordBloom 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--word-delay, 0ms);
}

body.vortex-bg-active .hero-word:nth-child(3),
body.vortex-bg-active .hero-word:nth-child(6) {
    color: #132238;
    font-weight: 560;
}

body.vortex-bg-active .hero-title-accent {
    position: relative;
    margin-right: 0;
    padding-right: 0.02em;
    background: linear-gradient(90deg, #0057a8 0%, #0284c7 28%, #03a9f4 52%, #10b981 82%, #0057a8 100%) !important;
    background-size: 260% 260% !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 610 !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation:
        vortexWordBloom 0.9s cubic-bezier(0.16, 1, 0.3, 1) both,
        vortexAccentFlow 6.8s ease-in-out 1.15s infinite !important;
    animation-delay: var(--word-delay, 420ms), 1.15s !important;
}

body.vortex-bg-active .hero-title-accent::after {
    content: "";
    position: absolute;
    left: 0.03em;
    right: 0.04em;
    bottom: -0.08em;
    height: 0.09em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 87, 168, 0.18), rgba(3, 169, 244, 0.72), rgba(16, 185, 129, 0.54));
    box-shadow: 0 10px 30px rgba(3, 169, 244, 0.25);
    transform: scaleX(0);
    transform-origin: left center;
    animation: vortexUnderlineDraw 0.72s cubic-bezier(0.16, 1, 0.3, 1) 0.95s both;
}

body.vortex-bg-active .landing-hero-copy {
    animation-delay: 0.62s;
}

body.vortex-bg-active .landing-hero-actions {
    animation-delay: 0.78s;
}

body.vortex-bg-active .landing-hero-stats {
    animation-delay: 0.92s;
}

@media (max-width: 767px) {
    body.vortex-bg-active .landing-hero-title {
        font-weight: 535 !important;
        letter-spacing: -0.042em !important;
        line-height: 1.08 !important;
    }

    body.vortex-bg-active .hero-word {
        margin-right: 0.1em;
    }

    body.vortex-bg-active .landing-hero-title::after {
        inset: -0.08em -0.08em;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .landing-hero-title::after,
    body.vortex-bg-active .hero-word,
    body.vortex-bg-active .hero-title-accent,
    body.vortex-bg-active .hero-title-accent::after {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Premium hero copy v2: phrase cascade with a calm recommendation highlight */
@keyframes vortexCopyCascade {
    0% {
        opacity: 0;
        filter: blur(9px);
        transform: translate3d(0, 16px, 0);
    }
    72% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, -1px, 0);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0);
    }
}

@keyframes vortexHighlightPulse {
    0%,
    100% {
        box-shadow: inset 0 -0.42em 0 rgba(3, 169, 244, 0.10), 0 0 0 rgba(3, 169, 244, 0);
    }
    50% {
        box-shadow: inset 0 -0.42em 0 rgba(16, 185, 129, 0.16), 0 10px 28px rgba(3, 169, 244, 0.10);
    }
}

body.vortex-bg-active .landing-hero-copy {
    opacity: 1 !important;
    animation: none !important;
    color: #475569 !important;
    font-size: clamp(1.02rem, 1vw + 0.8rem, 1.24rem) !important;
    font-weight: 430 !important;
    line-height: 1.78 !important;
    text-wrap: pretty;
}

body.vortex-bg-active .copy-fragment {
    display: inline;
    opacity: 0;
    will-change: opacity, transform, filter;
    animation: vortexCopyCascade 0.72s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--copy-delay, 560ms);
}

body.vortex-bg-active .copy-fragment + .copy-fragment::before {
    content: " ";
}

body.vortex-bg-active .copy-highlight {
    position: relative;
    display: inline;
    color: #0f766e;
    font-weight: 570;
    border-radius: 0.55em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
    animation:
        vortexCopyCascade 0.72s cubic-bezier(0.16, 1, 0.3, 1) both,
        vortexHighlightPulse 4.8s ease-in-out 1.5s infinite;
    animation-delay: var(--copy-delay, 680ms), 1.5s;
}

@media (max-width: 767px) {
    body.vortex-bg-active .copy-fragment {
        display: inline;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .copy-fragment,
    body.vortex-bg-active .copy-highlight {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Final typography + hero copy v3: unified Geist font and richer animated subtext */
html,
body,
button,
input,
select,
textarea {
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.vortex-bg-active h1,
body.vortex-bg-active h2,
body.vortex-bg-active h3,
body.vortex-bg-active h4,
body.vortex-bg-active h5,
body.vortex-bg-active h6,
body.vortex-bg-active .premium-logo,
body.vortex-bg-active .tm-brand,
body.vortex-bg-active .premium-nav-link,
body.vortex-bg-active .tm-nav-link,
body.vortex-bg-active .tm-btn,
body.vortex-bg-active .premium-button,
body.vortex-bg-active .product-card,
body.vortex-bg-active .premium-card {
    font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.vortex-bg-active h1,
body.vortex-bg-active h2,
body.vortex-bg-active h3 {
    letter-spacing: -0.035em;
}

@keyframes vortexCopyStageIn {
    0% {
        opacity: 0;
        filter: blur(14px);
        transform: translate3d(-18px, 22px, 0) scale(0.96);
    }
    55% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(4px, -2px, 0) scale(1.01);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes vortexCopyPanelGlow {
    0%,
    100% {
        background-position: 0% 50%;
        box-shadow: 0 20px 60px rgba(0, 87, 168, 0.06);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 24px 70px rgba(3, 169, 244, 0.12);
    }
}

@keyframes vortexCopyHighlightSweep {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 0 0 rgba(3, 169, 244, 0);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 14px 34px rgba(3, 169, 244, 0.16);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 0 0 0 rgba(3, 169, 244, 0);
    }
}

body.vortex-bg-active .landing-hero-copy {
    position: relative;
    display: block;
    max-width: 720px !important;
    margin-top: 1.65rem !important;
    padding: 1.05rem 1.2rem 1.08rem 1.34rem;
    border: 1px solid rgba(0, 87, 168, 0.10);
    border-radius: 1.35rem;
    background:
        linear-gradient(100deg, rgba(255, 255, 255, 0.78), rgba(240, 249, 255, 0.72), rgba(236, 253, 245, 0.58), rgba(255, 255, 255, 0.82));
    background-size: 240% 240%;
    color: #334155 !important;
    font-size: clamp(1rem, 0.78vw + 0.84rem, 1.17rem) !important;
    font-weight: 460 !important;
    line-height: 1.82 !important;
    letter-spacing: -0.012em;
    text-wrap: pretty;
    backdrop-filter: blur(16px) saturate(1.08);
    animation: vortexCopyPanelGlow 8s ease-in-out 1.2s infinite !important;
}

body.vortex-bg-active .landing-hero-copy::before {
    content: "";
    position: absolute;
    left: 0.62rem;
    top: 1.02rem;
    bottom: 1.02rem;
    width: 0.22rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #0057a8, #03a9f4, #10b981);
    box-shadow: 0 0 24px rgba(3, 169, 244, 0.35);
}

body.vortex-bg-active .copy-fragment {
    display: inline-block !important;
    opacity: 0;
    transform-origin: left center;
    will-change: opacity, transform, filter;
    animation: vortexCopyStageIn 0.82s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    animation-delay: var(--copy-delay, 560ms) !important;
}

body.vortex-bg-active .copy-fragment + .copy-fragment::before {
    content: "";
}

body.vortex-bg-active .copy-highlight {
    padding: 0.05em 0.44em 0.12em;
    margin: 0 0.08em;
    border: 1px solid rgba(3, 169, 244, 0.16);
    border-radius: 999px;
    background:
        linear-gradient(90deg, rgba(224, 242, 254, 0.92), rgba(209, 250, 229, 0.86), rgba(224, 242, 254, 0.92)) !important;
    background-size: 220% 220% !important;
    color: #075985 !important;
    font-weight: 650 !important;
    white-space: nowrap;
    animation:
        vortexCopyStageIn 0.82s cubic-bezier(0.16, 1, 0.3, 1) both,
        vortexCopyHighlightSweep 5.6s ease-in-out 1.6s infinite !important;
    animation-delay: var(--copy-delay, 680ms), 1.6s !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .landing-hero-copy {
        max-width: 100% !important;
        padding: 0.9rem 0.92rem 0.92rem 1.12rem;
        border-radius: 1.1rem;
        font-size: 0.98rem !important;
        line-height: 1.72 !important;
    }

    body.vortex-bg-active .landing-hero-copy::before {
        left: 0.48rem;
        top: 0.92rem;
        bottom: 0.92rem;
    }

    body.vortex-bg-active .copy-fragment,
    body.vortex-bg-active .copy-highlight {
        display: inline !important;
        white-space: normal;
        padding: 0;
        margin: 0;
        border: 0;
        background: transparent !important;
        box-shadow: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .landing-hero-copy,
    body.vortex-bg-active .copy-fragment,
    body.vortex-bg-active .copy-highlight {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Hero subtitle v4: advanced kinetic reveal, cleaner than boxed copy */
@keyframes vortexSubtitleLineReveal {
    0% {
        opacity: 0;
        clip-path: inset(0 100% 0 0 round 999px);
        filter: blur(12px);
        transform: translate3d(0, 24px, 0) skewY(1.6deg);
    }
    58% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 999px);
        filter: blur(0);
        transform: translate3d(0, -2px, 0) skewY(0deg);
    }
    100% {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 999px);
        filter: blur(0);
        transform: translate3d(0, 0, 0) skewY(0deg);
    }
}

@keyframes vortexSubtitleScan {
    0% {
        opacity: 0;
        transform: translateX(-120%) skewX(-18deg);
    }
    18% {
        opacity: 0.75;
    }
    42% {
        opacity: 0;
        transform: translateX(130%) skewX(-18deg);
    }
    100% {
        opacity: 0;
        transform: translateX(130%) skewX(-18deg);
    }
}

@keyframes vortexSubtitleGlowDot {
    0%,
    100% {
        opacity: 0.38;
        transform: translate3d(0, -50%, 0) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate3d(0, -50%, 0) scale(1.18);
    }
}

@keyframes vortexHighlightAura {
    0%,
    100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 0 rgba(3, 169, 244, 0));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 12px 22px rgba(3, 169, 244, 0.16));
    }
}

body.vortex-bg-active .hero-subtitle-kinetic,
body.vortex-bg-active .landing-hero-copy.hero-subtitle-kinetic {
    position: relative;
    display: grid !important;
    gap: 0.18rem;
    max-width: 770px !important;
    margin-top: 1.55rem !important;
    padding: 0 0 0 1.2rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #334155 !important;
    font-size: clamp(1.04rem, 0.9vw + 0.86rem, 1.26rem) !important;
    font-weight: 450 !important;
    line-height: 1.52 !important;
    letter-spacing: -0.018em !important;
    animation: none !important;
    text-wrap: balance;
}

body.vortex-bg-active .hero-subtitle-kinetic::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.18em;
    bottom: 0.18em;
    width: 0.18rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #0057a8, #03a9f4 52%, #10b981);
    box-shadow: 0 0 26px rgba(3, 169, 244, 0.32);
    animation: vortexSubtitleGlowDot 4.6s ease-in-out 1.1s infinite;
}

body.vortex-bg-active .hero-subtitle-kinetic::after {
    content: "";
    position: absolute;
    left: 1.1rem;
    top: -0.22rem;
    width: min(30rem, 72vw);
    height: calc(100% + 0.44rem);
    border-radius: 1rem;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 255, 255, 0) 32%,
        rgba(255, 255, 255, 0.74) 47%,
        rgba(186, 230, 253, 0.22) 54%,
        transparent 70%
    );
    pointer-events: none;
    animation: vortexSubtitleScan 4.2s cubic-bezier(0.16, 1, 0.3, 1) 1.15s both;
}

body.vortex-bg-active .hero-subtitle-kinetic .copy-line {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    opacity: 0;
    will-change: opacity, transform, filter, clip-path;
    animation: vortexSubtitleLineReveal 0.92s cubic-bezier(0.16, 1, 0.3, 1) both !important;
    animation-delay: var(--line-delay, 560ms) !important;
}

body.vortex-bg-active .hero-subtitle-kinetic .copy-fragment {
    display: inline !important;
    opacity: 1 !important;
    color: inherit !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
}

body.vortex-bg-active .hero-subtitle-kinetic .copy-highlight {
    position: relative;
    display: inline !important;
    padding: 0 0.08em 0.02em !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #0057a8, #0284c7, #10b981, #0057a8) !important;
    background-size: 260% 260% !important;
    background-clip: text !important;
    color: transparent !important;
    font-weight: 680 !important;
    white-space: normal !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: vortexHighlightAura 6s ease-in-out 1.45s infinite !important;
}

body.vortex-bg-active .hero-subtitle-kinetic .copy-highlight::after {
    content: "";
    position: absolute;
    left: 0.05em;
    right: 0.05em;
    bottom: -0.12em;
    height: 0.12em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(0, 87, 168, 0.14), rgba(3, 169, 244, 0.68), rgba(16, 185, 129, 0.48));
    box-shadow: 0 10px 24px rgba(3, 169, 244, 0.22);
}

@media (max-width: 767px) {
    body.vortex-bg-active .hero-subtitle-kinetic,
    body.vortex-bg-active .landing-hero-copy.hero-subtitle-kinetic {
        gap: 0.05rem;
        padding-left: 0.95rem !important;
        font-size: 1rem !important;
        line-height: 1.58 !important;
        text-wrap: pretty;
    }

    body.vortex-bg-active .hero-subtitle-kinetic .copy-line {
        width: auto;
    }

    body.vortex-bg-active .hero-subtitle-kinetic::after {
        left: 0.9rem;
        width: calc(100vw - 3rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .hero-subtitle-kinetic,
    body.vortex-bg-active .hero-subtitle-kinetic::before,
    body.vortex-bg-active .hero-subtitle-kinetic::after,
    body.vortex-bg-active .hero-subtitle-kinetic .copy-line,
    body.vortex-bg-active .hero-subtitle-kinetic .copy-fragment,
    body.vortex-bg-active .hero-subtitle-kinetic .copy-highlight {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        clip-path: none !important;
        animation: none !important;
    }
}

/* Hero subtitle v5: refined premium value line + animated signal chips */
@keyframes vortexSubtitleWordRise {
    0% {
        opacity: 0;
        filter: blur(12px);
        transform: translate3d(0, 20px, 0) scale(0.97);
    }
    60% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, -2px, 0) scale(1.01);
    }
    100% {
        opacity: 1;
        filter: blur(0);
        transform: translate3d(0, 0, 0) scale(1);
    }
}

@keyframes vortexSignalFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0);
    }
    50% {
        transform: translate3d(0, -4px, 0);
    }
}

@keyframes vortexSignalSweep {
    0% {
        background-position: 0% 50%;
        box-shadow: 0 14px 36px rgba(0, 87, 168, 0.08);
    }
    50% {
        background-position: 100% 50%;
        box-shadow: 0 18px 44px rgba(3, 169, 244, 0.16);
    }
    100% {
        background-position: 0% 50%;
        box-shadow: 0 14px 36px rgba(0, 87, 168, 0.08);
    }
}

@keyframes vortexEmphasisUnderline {
    0% {
        transform: scaleX(0);
        opacity: 0;
    }
    100% {
        transform: scaleX(1);
        opacity: 1;
    }
}

body.vortex-bg-active .hero-subtitle-premium,
body.vortex-bg-active .landing-hero-copy.hero-subtitle-premium {
    position: relative;
    display: flex !important;
    max-width: 820px !important;
    margin-top: 1.45rem !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    color: #405066 !important;
    font-size: clamp(1.06rem, 0.82vw + 0.88rem, 1.24rem) !important;
    font-weight: 450 !important;
    line-height: 1.62 !important;
    letter-spacing: -0.018em !important;
    text-wrap: balance;
    flex-direction: column;
    gap: 0.8rem;
    animation: none !important;
}

body.vortex-bg-active .hero-subtitle-premium::before,
body.vortex-bg-active .hero-subtitle-premium::after {
    display: none !important;
    content: none !important;
}

body.vortex-bg-active .subtitle-main {
    display: block;
}

body.vortex-bg-active .subtitle-word {
    display: inline-block;
    opacity: 0;
    margin-right: 0.18em;
    will-change: opacity, transform, filter;
    animation: vortexSubtitleWordRise 0.78s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: var(--subtitle-delay, 560ms);
}

body.vortex-bg-active .subtitle-emphasis {
    position: relative;
    color: #082f49;
    font-weight: 660;
}

body.vortex-bg-active .subtitle-emphasis::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0.02em;
    bottom: 0.03em;
    z-index: -1;
    height: 0.45em;
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(186, 230, 253, 0.78), rgba(167, 243, 208, 0.62));
    transform: scaleX(0);
    transform-origin: left center;
    animation: vortexEmphasisUnderline 0.62s cubic-bezier(0.16, 1, 0.3, 1) 1.05s both;
}

body.vortex-bg-active .subtitle-signals {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

body.vortex-bg-active .subtitle-signal {
    position: relative;
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
    padding: 0.52rem 0.82rem 0.54rem;
    border: 1px solid rgba(0, 87, 168, 0.10);
    border-radius: 999px;
    background:
        linear-gradient(110deg, rgba(255, 255, 255, 0.86), rgba(240, 249, 255, 0.82), rgba(236, 253, 245, 0.76), rgba(255, 255, 255, 0.88));
    background-size: 220% 220%;
    color: #0f3a55;
    font-size: 0.86rem;
    font-weight: 720;
    letter-spacing: 0.02em;
    box-shadow: 0 14px 36px rgba(0, 87, 168, 0.08);
    opacity: 0;
    transform: translate3d(0, 16px, 0);
    animation:
        vortexSubtitleWordRise 0.72s cubic-bezier(0.16, 1, 0.3, 1) both,
        vortexSignalSweep 7s ease-in-out infinite,
        vortexSignalFloat 4.5s ease-in-out infinite;
}

body.vortex-bg-active .subtitle-signal::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    margin-right: 0.48rem;
    border-radius: 999px;
    background: #03a9f4;
    box-shadow: 0 0 0 0.32rem rgba(3, 169, 244, 0.12);
}

body.vortex-bg-active .subtitle-signal:nth-child(1) {
    animation-delay: 0.98s, 1.6s, 1.6s;
}

body.vortex-bg-active .subtitle-signal:nth-child(2) {
    animation-delay: 1.08s, 2s, 2s;
}

body.vortex-bg-active .subtitle-signal:nth-child(3) {
    animation-delay: 1.18s, 2.4s, 2.4s;
}

@media (max-width: 767px) {
    body.vortex-bg-active .hero-subtitle-premium,
    body.vortex-bg-active .landing-hero-copy.hero-subtitle-premium {
        max-width: 100% !important;
        gap: 0.72rem;
        font-size: 1rem !important;
        line-height: 1.58 !important;
    }

    body.vortex-bg-active .subtitle-signal {
        min-height: 2.1rem;
        padding: 0.46rem 0.68rem;
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .hero-subtitle-premium,
    body.vortex-bg-active .subtitle-word,
    body.vortex-bg-active .subtitle-emphasis::after,
    body.vortex-bg-active .subtitle-signal {
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        animation: none !important;
    }
}

/* Final global type system: carry the hero font style across the full site */
:root {
    --vortex-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --vortex-heading-color: #0b1220;
    --vortex-body-color: #334155;
}

html,
body,
body *,
button,
input,
select,
textarea {
    font-family: var(--vortex-font-sans) !important;
}

body {
    color: var(--vortex-body-color);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
.h1,
.page-title,
.premium-page-title,
.tm-hero-title {
    color: var(--vortex-heading-color) !important;
    font-family: var(--vortex-font-sans) !important;
    font-weight: 520 !important;
    letter-spacing: -0.052em !important;
    line-height: 1.04 !important;
    text-wrap: balance;
}

h2,
.h2,
.section-title,
.tm-section-title,
.premium-section-title,
.dashboard-title {
    color: var(--vortex-heading-color) !important;
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: -0.045em !important;
    line-height: 1.08 !important;
    text-wrap: balance;
}

h3,
.h3,
.card-title,
.product-title,
.premium-card-title {
    color: var(--vortex-heading-color) !important;
    font-family: var(--vortex-font-sans) !important;
    font-weight: 590 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
}

p,
li,
label,
small,
span,
input,
select,
textarea,
.text-body,
.section-subtitle,
.tm-section-subtitle,
.premium-muted,
.product-description {
    font-family: var(--vortex-font-sans) !important;
}

.tm-btn,
.premium-button,
.btn,
button,
.premium-nav-link,
.tm-nav-link,
.premium-sidebar-link,
.dashboard-nav-link {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 680 !important;
    letter-spacing: -0.012em !important;
}

@media (max-width: 767px) {
    h1,
    .h1,
    .page-title,
    .premium-page-title,
    .tm-hero-title {
        font-weight: 535 !important;
        letter-spacing: -0.042em !important;
        line-height: 1.08 !important;
    }

    h2,
    .h2,
    .section-title,
    .tm-section-title,
    .premium-section-title,
    .dashboard-title {
        letter-spacing: -0.036em !important;
    }
}

/* FINAL LANDING TYPOGRAPHY POLISH — last layer, after all older floating styles. */
body.vortex-bg-active .font-black,
body.vortex-bg-active .font-extrabold,
body.vortex-bg-active .font-bold,
body.vortex-bg-active strong {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 620 !important;
    letter-spacing: -0.03em !important;
}

body.vortex-bg-active .font-semibold {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: -0.018em !important;
}

body.vortex-bg-active .font-medium,
body.vortex-bg-active .font-normal,
body.vortex-bg-active .font-light {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 450 !important;
    letter-spacing: -0.01em !important;
}

body.vortex-bg-active .tm-eyebrow,
body.vortex-bg-active .landing-eyebrow,
body.vortex-bg-active .section-kicker,
body.vortex-bg-active .count-badge,
body.vortex-bg-active .product-type-badge,
body.vortex-bg-active .stat-chip small,
body.vortex-bg-active [class*="tracking-"] {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: 0.035em !important;
}

body.vortex-bg-active .tm-hero-title,
body.vortex-bg-active .hero-word {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 520 !important;
    letter-spacing: -0.052em !important;
}

body.vortex-bg-active .hero-title-accent,
body.vortex-bg-active .subtitle-emphasis {
    font-weight: 610 !important;
}

body.vortex-bg-active h2,
body.vortex-bg-active .section-title,
body.vortex-bg-active .tm-section-title,
body.vortex-bg-active .tm-preview-card h2 {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 560 !important;
    letter-spacing: -0.045em !important;
}

body.vortex-bg-active h3,
body.vortex-bg-active .product-title,
body.vortex-bg-active .card-title,
body.vortex-bg-active .benefit-card h3 {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 590 !important;
    letter-spacing: -0.03em !important;
}

body.vortex-bg-active .tm-btn,
body.vortex-bg-active .premium-button,
body.vortex-bg-active .view-all-link,
body.vortex-bg-active button,
body.vortex-bg-active a[class*="button"] {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 650 !important;
    letter-spacing: -0.018em !important;
}

body.vortex-bg-active .stat-chip span,
body.vortex-bg-active .product-price,
body.vortex-bg-active .product-rating span:not(.stars),
body.vortex-bg-active .tm-preview-card strong {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 620 !important;
    letter-spacing: -0.028em !important;
}

body.vortex-bg-active .tm-preview-card p,
body.vortex-bg-active .product-card p,
body.vortex-bg-active .benefit-card p,
body.vortex-bg-active .section-subtitle {
    font-family: var(--vortex-font-sans) !important;
    font-weight: 430 !important;
    letter-spacing: -0.006em !important;
}

/* Heading tracking correction — headings keep hero-style tight spacing even if old tracking utilities exist. */
body.vortex-bg-active h1[class*="tracking-"],
body.vortex-bg-active h1,
body.vortex-bg-active .tm-hero-title {
    letter-spacing: -0.052em !important;
}

body.vortex-bg-active h2[class*="tracking-"],
body.vortex-bg-active h2,
body.vortex-bg-active .section-title,
body.vortex-bg-active #contact h2 {
    letter-spacing: -0.045em !important;
    font-weight: 560 !important;
}

body.vortex-bg-active h3[class*="tracking-"],
body.vortex-bg-active h3,
body.vortex-bg-active .product-title {
    letter-spacing: -0.03em !important;
    font-weight: 590 !important;
}

/* PREMIUM PRODUCT CARD EXPERIENCE v2 — final card layer for landing, marketplace, dashboards, recommendations. */
:root {
    --vortex-card-radius: 1.55rem;
    --vortex-card-border: rgba(0, 87, 168, 0.13);
    --vortex-card-border-hover: rgba(3, 169, 244, 0.38);
    --vortex-card-shadow: 0 18px 52px rgba(8, 47, 73, 0.09);
    --vortex-card-shadow-hover: 0 30px 82px rgba(0, 87, 168, 0.18), 0 10px 26px rgba(16, 185, 129, 0.08);
}

@keyframes vortexCardGlowSweep {
    0% { transform: translateX(-130%) rotate(10deg); opacity: 0; }
    18% { opacity: 0.75; }
    48% { opacity: 0; transform: translateX(130%) rotate(10deg); }
    100% { opacity: 0; transform: translateX(130%) rotate(10deg); }
}

@keyframes vortexCardBadgePulse {
    0%, 100% { box-shadow: 0 10px 24px rgba(3, 169, 244, 0.08); }
    50% { box-shadow: 0 12px 30px rgba(16, 185, 129, 0.16); }
}

body.vortex-bg-active .product-grid,
body.vortex-bg-active .premium-product-grid,
body.vortex-bg-active .product-grid-marketplace {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17.5rem), 1fr)) !important;
    gap: clamp(1.15rem, 2.2vw, 1.85rem) !important;
    align-items: stretch;
}

body.vortex-bg-active .product-card,
body.vortex-bg-active .product-card-premium,
body.vortex-bg-active article[data-recommendation-card],
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white {
    position: relative !important;
    display: flex !important;
    min-height: 100%;
    flex-direction: column !important;
    overflow: hidden !important;
    isolation: isolate;
    border: 1px solid var(--vortex-card-border) !important;
    border-radius: var(--vortex-card-radius) !important;
    background:
        radial-gradient(circle at 16% -8%, rgba(3, 169, 244, 0.15), transparent 28%),
        radial-gradient(circle at 92% 8%, rgba(16, 185, 129, 0.13), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 252, 255, 0.92)) !important;
    box-shadow: var(--vortex-card-shadow) !important;
    transform: translate3d(0, 0, 0);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, background 0.32s ease !important;
}

body.vortex-bg-active .product-card::before,
body.vortex-bg-active .product-card-premium::before,
body.vortex-bg-active article[data-recommendation-card]::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl::before,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white::before,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,0.78) 47%, rgba(186,230,253,0.28) 54%, transparent 68%);
    opacity: 0;
    transform: translateX(-120%) rotate(10deg);
}

body.vortex-bg-active .product-card::after,
body.vortex-bg-active .product-card-premium::after,
body.vortex-bg-active article[data-recommendation-card]::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl::after,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white::after,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white::after {
    content: "";
    position: absolute;
    inset: auto 1.2rem 0 1.2rem;
    height: 0.22rem;
    z-index: 2;
    border-radius: 999px 999px 0 0;
    background: linear-gradient(90deg, #0057a8, #03a9f4, #10b981);
    opacity: 0.72;
    transform: scaleX(0.32);
    transform-origin: left center;
    transition: transform 0.34s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.34s ease;
}

body.vortex-bg-active .product-card:hover,
body.vortex-bg-active .product-card-premium:hover,
body.vortex-bg-active article[data-recommendation-card]:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover {
    border-color: var(--vortex-card-border-hover) !important;
    box-shadow: var(--vortex-card-shadow-hover) !important;
    transform: translate3d(0, -8px, 0) !important;
}

body.vortex-bg-active .product-card:hover::before,
body.vortex-bg-active .product-card-premium:hover::before,
body.vortex-bg-active article[data-recommendation-card]:hover::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover::before,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover::before,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover::before,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover::before {
    animation: vortexCardGlowSweep 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.vortex-bg-active .product-card:hover::after,
body.vortex-bg-active .product-card-premium:hover::after,
body.vortex-bg-active article[data-recommendation-card]:hover::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover::after,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover::after,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover::after,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover::after {
    opacity: 1;
    transform: scaleX(1);
}

body.vortex-bg-active .product-image-link,
body.vortex-bg-active .product-card > a:first-child,
body.vortex-bg-active .product-card-premium > a:first-child,
body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > a:first-child,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > div:first-child,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > div:first-child {
    position: relative !important;
    display: block !important;
    min-height: 12.25rem !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 24% 22%, rgba(255,255,255,0.92), transparent 16%),
        radial-gradient(circle at 80% 10%, rgba(16,185,129,0.25), transparent 32%),
        linear-gradient(135deg, #eaf6ff 0%, #ffffff 45%, #ecfdf5 100%) !important;
}

body.vortex-bg-active .product-image,
body.vortex-bg-active .product-card img,
body.vortex-bg-active .product-card-premium img,
body.vortex-bg-active article[data-recommendation-card] img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white img {
    width: 100% !important;
    height: 12.25rem !important;
    object-fit: cover !important;
    filter: saturate(1.05) contrast(1.02);
    transform: scale(1.01);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1), filter 0.55s ease !important;
}

body.vortex-bg-active .product-card:hover img,
body.vortex-bg-active .product-card-premium:hover img,
body.vortex-bg-active article[data-recommendation-card]:hover img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white:hover img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover img {
    filter: saturate(1.13) contrast(1.05);
    transform: scale(1.075);
}

body.vortex-bg-active .product-placeholder,
body.vortex-bg-active article[data-recommendation-card] a > div,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a > div {
    min-height: 12.25rem !important;
    background:
        radial-gradient(circle at 34% 26%, rgba(3,169,244,0.22), transparent 28%),
        radial-gradient(circle at 72% 60%, rgba(16,185,129,0.19), transparent 28%),
        linear-gradient(135deg, #eef7ff, #ffffff 54%, #ecfdf5) !important;
    color: #0057a8 !important;
}

body.vortex-bg-active .product-placeholder i,
body.vortex-bg-active article[data-recommendation-card] a > div i {
    font-size: 2.4rem !important;
    filter: drop-shadow(0 12px 20px rgba(0, 87, 168, 0.16));
}

body.vortex-bg-active .product-body,
body.vortex-bg-active .product-card .p-4,
body.vortex-bg-active .product-card .p-5,
body.vortex-bg-active .product-card-premium .p-4,
body.vortex-bg-active .product-card-premium .p-5,
body.vortex-bg-active article[data-recommendation-card] > div:last-child,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-4,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-5,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > .p-4,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > .p-4 {
    position: relative;
    z-index: 3;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 1.08rem !important;
}

body.vortex-bg-active .product-type-badge,
body.vortex-bg-active article[data-recommendation-card] .rounded-full,
body.vortex-bg-active .product-subtype,
body.vortex-bg-active .reason-chip {
    border: 1px solid rgba(3, 169, 244, 0.16) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    color: #075985 !important;
    box-shadow: 0 12px 28px rgba(0, 87, 168, 0.10) !important;
    backdrop-filter: blur(12px) saturate(1.12);
    font-weight: 650 !important;
    letter-spacing: 0.015em !important;
    animation: vortexCardBadgePulse 5.8s ease-in-out infinite;
}

body.vortex-bg-active .product-price,
body.vortex-bg-active article[data-recommendation-card] .text-teal-950,
body.vortex-bg-active article[data-recommendation-card] .text-sm.font-black.text-teal-950 {
    display: inline-flex !important;
    align-items: center;
    width: max-content;
    max-width: 100%;
    border: 1px solid rgba(0, 87, 168, 0.12) !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, rgba(238, 247, 255, 0.96), rgba(236, 253, 245, 0.86)) !important;
    color: #0057a8 !important;
    padding: 0.42rem 0.66rem !important;
    box-shadow: 0 10px 24px rgba(0, 87, 168, 0.08) !important;
    font-weight: 650 !important;
}

body.vortex-bg-active .product-title,
body.vortex-bg-active .product-card h3,
body.vortex-bg-active .product-card-premium h3,
body.vortex-bg-active article[data-recommendation-card] h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white h3 {
    color: #0b1220 !important;
    font-size: clamp(1.03rem, 0.35vw + 0.96rem, 1.18rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.034em !important;
    font-weight: 610 !important;
    transition: color 0.24s ease, transform 0.24s ease !important;
}

body.vortex-bg-active .product-card:hover .product-title,
body.vortex-bg-active .product-card-premium:hover .product-title,
body.vortex-bg-active article[data-recommendation-card]:hover h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white:hover h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover h3 {
    color: #0057a8 !important;
}

body.vortex-bg-active .product-description,
body.vortex-bg-active .product-meta,
body.vortex-bg-active article[data-recommendation-card] p,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white p {
    color: #526173 !important;
    font-size: 0.92rem !important;
    line-height: 1.58 !important;
    font-weight: 450 !important;
}

body.vortex-bg-active .product-meta {
    display: flex !important;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    margin-top: 0.66rem !important;
}

body.vortex-bg-active .product-meta span,
body.vortex-bg-active .product-trust-row span,
body.vortex-bg-active article[data-recommendation-card] .text-cyan-800,
body.vortex-bg-active article[data-recommendation-card] .text-slate-500:last-child {
    display: inline-flex;
    align-items: center;
    gap: 0.36rem;
    border: 1px solid rgba(0, 87, 168, 0.08) !important;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.72) !important;
    color: #475569 !important;
    padding: 0.34rem 0.55rem;
    font-size: 0.78rem !important;
    font-weight: 560 !important;
}

body.vortex-bg-active .product-rating,
body.vortex-bg-active .product-trust-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.62rem !important;
    margin-top: 0.72rem !important;
}

body.vortex-bg-active .product-rating span:not(.stars) {
    color: #0f3a55 !important;
    font-size: 0.88rem !important;
    font-weight: 650 !important;
}

body.vortex-bg-active .stars,
body.vortex-bg-active .text-yellow-400 {
    color: #f59e0b !important;
    filter: drop-shadow(0 5px 10px rgba(245, 158, 11, 0.16));
}

body.vortex-bg-active .star-muted,
body.vortex-bg-active .text-gray-300 {
    color: #cbd5e1 !important;
}

body.vortex-bg-active .product-actions,
body.vortex-bg-active article[data-recommendation-card] .mt-4.flex,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white .flex.space-x-2 {
    display: flex !important;
    gap: 0.68rem !important;
    margin-top: auto !important;
    padding-top: 0.95rem !important;
}

body.vortex-bg-active .card-primary-action,
body.vortex-bg-active .card-secondary-action,
body.vortex-bg-active article[data-recommendation-card] a.flex-1,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1 {
    display: inline-flex !important;
    min-height: 2.75rem;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    border: 0 !important;
    border-radius: 999px !important;
    background: linear-gradient(135deg, #0057a8, #0284c7 48%, #10b981) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(0, 87, 168, 0.22) !important;
    text-decoration: none !important;
    font-weight: 680 !important;
    transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease !important;
}

body.vortex-bg-active .card-secondary-action {
    background: linear-gradient(135deg, #ffffff, #eef7ff) !important;
    color: #0057a8 !important;
    border: 1px solid rgba(0, 87, 168, 0.14) !important;
    box-shadow: 0 12px 24px rgba(0, 87, 168, 0.08) !important;
}

body.vortex-bg-active .card-primary-action:hover,
body.vortex-bg-active .card-secondary-action:hover,
body.vortex-bg-active article[data-recommendation-card] a.flex-1:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1:hover,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1:hover,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1:hover {
    filter: saturate(1.08);
    transform: translateY(-2px);
    box-shadow: 0 20px 44px rgba(0, 87, 168, 0.27) !important;
}

body.vortex-bg-active .card-icon-action,
body.vortex-bg-active .add-to-cart-btn,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button),
body.vortex-bg-active button[onclick*="addToCart"] {
    display: inline-flex !important;
    min-width: 2.75rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(3, 169, 244, 0.18) !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0057a8 !important;
    box-shadow: 0 12px 26px rgba(0, 87, 168, 0.10) !important;
    transition: transform 0.24s ease, background 0.24s ease, color 0.24s ease, box-shadow 0.24s ease !important;
}

body.vortex-bg-active .card-icon-action:hover,
body.vortex-bg-active .add-to-cart-btn:hover,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button):hover,
body.vortex-bg-active button[onclick*="addToCart"]:hover {
    background: linear-gradient(135deg, #0057a8, #0284c7) !important;
    color: #ffffff !important;
    transform: translateY(-2px) scale(1.03);
    box-shadow: 0 18px 38px rgba(0, 87, 168, 0.22) !important;
}

body.vortex-bg-active .product-save-button,
body.vortex-bg-active article[data-recommendation-card] [data-wishlist-button] {
    display: inline-flex !important;
    width: 2.55rem;
    height: 2.55rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(244, 63, 94, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    color: #e11d48 !important;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.10) !important;
    backdrop-filter: blur(12px) saturate(1.1);
    transition: transform 0.24s ease, box-shadow 0.24s ease, background 0.24s ease !important;
}

body.vortex-bg-active .product-save-button:hover,
body.vortex-bg-active article[data-recommendation-card] [data-wishlist-button]:hover {
    background: #fff1f2 !important;
    transform: translateY(-2px) scale(1.06);
    box-shadow: 0 18px 38px rgba(244, 63, 94, 0.16) !important;
}

body.vortex-bg-active .product-card:focus-visible,
body.vortex-bg-active .product-card-premium:focus-visible,
body.vortex-bg-active article[data-recommendation-card]:focus-visible,
body.vortex-bg-active .card-primary-action:focus-visible,
body.vortex-bg-active .card-secondary-action:focus-visible,
body.vortex-bg-active .card-icon-action:focus-visible,
body.vortex-bg-active .product-save-button:focus-visible {
    outline: 3px solid rgba(3, 169, 244, 0.36) !important;
    outline-offset: 4px !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .product-grid,
    body.vortex-bg-active .premium-product-grid,
    body.vortex-bg-active .product-grid-marketplace {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    body.vortex-bg-active .product-card,
    body.vortex-bg-active .product-card-premium,
    body.vortex-bg-active article[data-recommendation-card] {
        border-radius: 1.28rem !important;
    }

    body.vortex-bg-active .product-image-link,
    body.vortex-bg-active .product-card > a:first-child,
    body.vortex-bg-active .product-card-premium > a:first-child,
    body.vortex-bg-active article[data-recommendation-card] > a:first-of-type {
        min-height: 10.6rem !important;
    }

    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img {
        height: 10.6rem !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.vortex-bg-active .product-card,
    body.vortex-bg-active .product-card-premium,
    body.vortex-bg-active article[data-recommendation-card],
    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img,
    body.vortex-bg-active .card-primary-action,
    body.vortex-bg-active .card-secondary-action,
    body.vortex-bg-active .card-icon-action,
    body.vortex-bg-active .product-save-button {
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* COMPACT MARKETPLACE CARD MODE — Amazon-like density while keeping VORTEX polish. */
:root {
    --vortex-card-radius: 1.05rem;
    --vortex-card-shadow: 0 10px 28px rgba(8, 47, 73, 0.075);
    --vortex-card-shadow-hover: 0 18px 44px rgba(0, 87, 168, 0.14), 0 6px 16px rgba(16, 185, 129, 0.07);
}

body.vortex-bg-active .product-grid,
body.vortex-bg-active .premium-product-grid,
body.vortex-bg-active .product-grid-marketplace {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.25rem), 1fr)) !important;
    gap: clamp(0.78rem, 1.45vw, 1.15rem) !important;
}

body.vortex-bg-active .product-card,
body.vortex-bg-active .product-card-premium,
body.vortex-bg-active article[data-recommendation-card],
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white {
    border-radius: var(--vortex-card-radius) !important;
    box-shadow: var(--vortex-card-shadow) !important;
}

body.vortex-bg-active .product-card:hover,
body.vortex-bg-active .product-card-premium:hover,
body.vortex-bg-active article[data-recommendation-card]:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-lg:hover,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white.rounded-2xl:hover,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white:hover,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white:hover {
    transform: translate3d(0, -4px, 0) !important;
    box-shadow: var(--vortex-card-shadow-hover) !important;
}

body.vortex-bg-active .product-image-link,
body.vortex-bg-active .product-card > a:first-child,
body.vortex-bg-active .product-card-premium > a:first-child,
body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > a:first-child,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > div:first-child,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > div:first-child {
    min-height: 8.9rem !important;
}

body.vortex-bg-active .product-image,
body.vortex-bg-active .product-card img,
body.vortex-bg-active .product-card-premium img,
body.vortex-bg-active article[data-recommendation-card] img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white img {
    height: 8.9rem !important;
}

body.vortex-bg-active .product-placeholder,
body.vortex-bg-active article[data-recommendation-card] a > div,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a > div {
    min-height: 8.9rem !important;
}

body.vortex-bg-active .product-placeholder i,
body.vortex-bg-active article[data-recommendation-card] a > div i {
    font-size: 1.9rem !important;
}

body.vortex-bg-active .product-body,
body.vortex-bg-active .product-card .p-4,
body.vortex-bg-active .product-card .p-5,
body.vortex-bg-active .product-card-premium .p-4,
body.vortex-bg-active .product-card-premium .p-5,
body.vortex-bg-active article[data-recommendation-card] > div:last-child,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-4,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-5,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > .p-4,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > .p-4 {
    padding: 0.72rem !important;
}

body.vortex-bg-active .product-card-topline,
body.vortex-bg-active .product-meta,
body.vortex-bg-active .product-rating,
body.vortex-bg-active .product-trust-row {
    margin-top: 0.42rem !important;
}

body.vortex-bg-active .product-title,
body.vortex-bg-active .product-card h3,
body.vortex-bg-active .product-card-premium h3,
body.vortex-bg-active article[data-recommendation-card] h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white h3 {
    font-size: 0.94rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.026em !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.vortex-bg-active .product-description,
body.vortex-bg-active .product-meta,
body.vortex-bg-active article[data-recommendation-card] p,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white p,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white p {
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
}

body.vortex-bg-active .product-description {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

body.vortex-bg-active .product-price,
body.vortex-bg-active article[data-recommendation-card] .text-teal-950,
body.vortex-bg-active article[data-recommendation-card] .text-sm.font-black.text-teal-950 {
    padding: 0.28rem 0.48rem !important;
    font-size: 0.82rem !important;
}

body.vortex-bg-active .product-type-badge,
body.vortex-bg-active article[data-recommendation-card] .rounded-full,
body.vortex-bg-active .product-subtype,
body.vortex-bg-active .reason-chip,
body.vortex-bg-active .product-meta span,
body.vortex-bg-active .product-trust-row span {
    padding: 0.24rem 0.44rem !important;
    font-size: 0.68rem !important;
}

body.vortex-bg-active .product-actions,
body.vortex-bg-active article[data-recommendation-card] .mt-4.flex,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white .flex.space-x-2 {
    gap: 0.46rem !important;
    padding-top: 0.62rem !important;
}

body.vortex-bg-active .card-primary-action,
body.vortex-bg-active .card-secondary-action,
body.vortex-bg-active article[data-recommendation-card] a.flex-1,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1 {
    min-height: 2.2rem !important;
    padding: 0.5rem 0.62rem !important;
    font-size: 0.78rem !important;
}

body.vortex-bg-active .card-icon-action,
body.vortex-bg-active .add-to-cart-btn,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button),
body.vortex-bg-active button[onclick*="addToCart"] {
    min-width: 2.2rem !important;
    min-height: 2.2rem !important;
    padding: 0.48rem !important;
}

body.vortex-bg-active .product-save-button,
body.vortex-bg-active article[data-recommendation-card] [data-wishlist-button] {
    width: 2.15rem !important;
    height: 2.15rem !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .product-grid,
    body.vortex-bg-active .premium-product-grid,
    body.vortex-bg-active .product-grid-marketplace {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.72rem !important;
    }

    body.vortex-bg-active .product-image-link,
    body.vortex-bg-active .product-card > a:first-child,
    body.vortex-bg-active .product-card-premium > a:first-child,
    body.vortex-bg-active article[data-recommendation-card] > a:first-of-type {
        min-height: 7.4rem !important;
    }

    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img {
        height: 7.4rem !important;
    }

    body.vortex-bg-active .product-body,
    body.vortex-bg-active .product-card .p-4,
    body.vortex-bg-active .product-card .p-5,
    body.vortex-bg-active .product-card-premium .p-4,
    body.vortex-bg-active .product-card-premium .p-5,
    body.vortex-bg-active article[data-recommendation-card] > div:last-child {
        padding: 0.62rem !important;
    }
}

/* COMPACT MARKETPLACE CARD MODE v2 — true Amazon-like scan density. */
body.vortex-bg-active .product-grid,
body.vortex-bg-active .premium-product-grid,
body.vortex-bg-active .product-grid-marketplace {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 11.75rem), 1fr)) !important;
    gap: clamp(0.68rem, 1.2vw, 0.95rem) !important;
}

body.vortex-bg-active .product-image-link,
body.vortex-bg-active .product-card > a:first-child,
body.vortex-bg-active .product-card-premium > a:first-child,
body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > a:first-child,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > div:first-child,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > div:first-child {
    height: 7.8rem !important;
    min-height: 7.8rem !important;
    max-height: 7.8rem !important;
}

body.vortex-bg-active .product-image,
body.vortex-bg-active .product-card img,
body.vortex-bg-active .product-card-premium img,
body.vortex-bg-active article[data-recommendation-card] img,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white img,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white img {
    height: 7.8rem !important;
    max-height: 7.8rem !important;
}

body.vortex-bg-active .product-placeholder,
body.vortex-bg-active article[data-recommendation-card] a > div,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a > div {
    min-height: 7.8rem !important;
    height: 7.8rem !important;
}

body.vortex-bg-active .product-body,
body.vortex-bg-active .product-card .p-4,
body.vortex-bg-active .product-card .p-5,
body.vortex-bg-active .product-card-premium .p-4,
body.vortex-bg-active .product-card-premium .p-5,
body.vortex-bg-active article[data-recommendation-card] > div:last-child,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-4,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white > .p-5,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white > .p-4,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white > .p-4 {
    padding: 0.58rem !important;
}

body.vortex-bg-active .product-description,
body.vortex-bg-active article[data-recommendation-card] p:not(:first-child) {
    display: none !important;
}

body.vortex-bg-active .product-card-topline {
    gap: 0.35rem !important;
}

body.vortex-bg-active .product-title,
body.vortex-bg-active .product-card h3,
body.vortex-bg-active .product-card-premium h3,
body.vortex-bg-active article[data-recommendation-card] h3,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white h3,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white h3 {
    margin: 0.36rem 0 0.28rem !important;
    font-size: 0.88rem !important;
    line-height: 1.22 !important;
    -webkit-line-clamp: 2;
}

body.vortex-bg-active .product-meta {
    gap: 0.28rem !important;
    margin-top: 0.28rem !important;
}

body.vortex-bg-active .product-meta span,
body.vortex-bg-active .product-trust-row span,
body.vortex-bg-active article[data-recommendation-card] .text-cyan-800,
body.vortex-bg-active article[data-recommendation-card] .text-slate-500:last-child {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
}

body.vortex-bg-active .product-meta span:nth-child(n+2) {
    display: none !important;
}

body.vortex-bg-active .product-trust-row {
    display: none !important;
}

body.vortex-bg-active .product-rating {
    margin-top: 0.34rem !important;
    justify-content: flex-start !important;
    gap: 0.38rem !important;
}

body.vortex-bg-active .product-rating span:not(.stars) {
    font-size: 0.76rem !important;
}

body.vortex-bg-active .stars {
    font-size: 0.72rem !important;
}

body.vortex-bg-active .product-price,
body.vortex-bg-active article[data-recommendation-card] .text-teal-950,
body.vortex-bg-active article[data-recommendation-card] .text-sm.font-black.text-teal-950 {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #b12704 !important;
    font-size: 0.94rem !important;
    font-weight: 650 !important;
}

body.vortex-bg-active .product-type-badge,
body.vortex-bg-active article[data-recommendation-card] .rounded-full,
body.vortex-bg-active .product-subtype,
body.vortex-bg-active .reason-chip {
    padding: 0.2rem 0.38rem !important;
    font-size: 0.62rem !important;
}

body.vortex-bg-active .product-actions,
body.vortex-bg-active article[data-recommendation-card] .mt-4.flex,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white .flex.space-x-2,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white .flex.space-x-2 {
    gap: 0.38rem !important;
    padding-top: 0.48rem !important;
}

body.vortex-bg-active .card-primary-action,
body.vortex-bg-active .card-secondary-action,
body.vortex-bg-active article[data-recommendation-card] a.flex-1,
body.vortex-bg-active .tm-standalone-page .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-main .grid > .bg-white a.flex-1,
body.vortex-bg-active .premium-dashboard-layout .grid > .bg-white a.flex-1 {
    min-height: 2rem !important;
    padding: 0.42rem 0.52rem !important;
    font-size: 0.72rem !important;
}

body.vortex-bg-active .card-icon-action,
body.vortex-bg-active .add-to-cart-btn,
body.vortex-bg-active article[data-recommendation-card] button:not(.product-save-button),
body.vortex-bg-active button[onclick*="addToCart"] {
    min-width: 2rem !important;
    min-height: 2rem !important;
    padding: 0.38rem !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .product-grid,
    body.vortex-bg-active .premium-product-grid,
    body.vortex-bg-active .product-grid-marketplace {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.58rem !important;
    }

    body.vortex-bg-active .product-image-link,
    body.vortex-bg-active .product-card > a:first-child,
    body.vortex-bg-active .product-card-premium > a:first-child,
    body.vortex-bg-active article[data-recommendation-card] > a:first-of-type,
    body.vortex-bg-active .product-image,
    body.vortex-bg-active .product-card img,
    body.vortex-bg-active .product-card-premium img,
    body.vortex-bg-active article[data-recommendation-card] img {
        height: 6.8rem !important;
        min-height: 6.8rem !important;
        max-height: 6.8rem !important;
    }
}

/* HERO CATEGORY ART — replaces logo-like icons with premium CSS mini-illustrations. */
body.vortex-bg-active .mobile-menu-label {
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

body.vortex-bg-active .mobile-menu-orb {
    position: relative;
    display: inline-flex;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #00d4ff, #10b981);
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12), 0 8px 18px rgba(0, 87, 168, 0.2);
}

body.vortex-bg-active .hero-market-art {
    position: relative;
    width: 2.95rem !important;
    height: 2.95rem !important;
    flex: 0 0 2.95rem !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
    border-radius: 1.15rem !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, 0.98), transparent 32%),
        linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(235, 248, 255, 0.92)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        0 18px 34px rgba(0, 42, 92, 0.14) !important;
    isolation: isolate;
}

body.vortex-bg-active .hero-market-art::before,
body.vortex-bg-active .hero-market-art::after {
    content: "";
    position: absolute;
    z-index: 1;
}

body.vortex-bg-active .hero-market-art-service {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #ecfdf5, #f8feff 55%, #d1fae5) !important;
}

body.vortex-bg-active .hero-market-art-service::before {
    inset: 0.72rem;
    background:
        radial-gradient(circle at 18% 52%, #047857 0 0.22rem, transparent 0.24rem),
        radial-gradient(circle at 50% 22%, #00a6fb 0 0.25rem, transparent 0.27rem),
        radial-gradient(circle at 78% 60%, #10b981 0 0.22rem, transparent 0.24rem),
        linear-gradient(35deg, transparent 45%, rgba(4, 120, 87, 0.55) 46% 52%, transparent 53%),
        linear-gradient(145deg, transparent 44%, rgba(0, 166, 251, 0.5) 45% 51%, transparent 52%);
    filter: drop-shadow(0 8px 12px rgba(4, 120, 87, 0.18));
}

body.vortex-bg-active .hero-market-art-service::after {
    right: 0.46rem;
    bottom: 0.48rem;
    width: 1rem;
    height: 1rem;
    border-radius: 999px;
    border: 2px solid rgba(16, 185, 129, 0.52);
    border-left-color: transparent;
}

body.vortex-bg-active .hero-market-art-book {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #eff6ff, #ffffff 55%, #dbeafe) !important;
}

body.vortex-bg-active .hero-market-art-book::before {
    left: 0.72rem;
    top: 0.62rem;
    width: 1.44rem;
    height: 1.78rem;
    border-radius: 0.32rem 0.18rem 0.18rem 0.32rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.9) 0 0.18rem, transparent 0.2rem),
        linear-gradient(135deg, #0284c7, #38bdf8);
    box-shadow:
        0.28rem 0.16rem 0 -0.03rem rgba(255, 255, 255, 0.85),
        0.38rem 0.22rem 0 -0.01rem rgba(14, 165, 233, 0.35),
        0 12px 18px rgba(2, 132, 199, 0.2);
    transform: rotate(-7deg);
}

body.vortex-bg-active .hero-market-art-book::after {
    left: 1.12rem;
    top: 0.95rem;
    width: 0.96rem;
    height: 0.1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 0.34rem 0 rgba(255,255,255,0.64), 0 0.68rem 0 rgba(255,255,255,0.42);
    transform: rotate(-7deg);
}

body.vortex-bg-active .hero-market-art-webinar {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #f5f3ff, #ffffff 55%, #ede9fe) !important;
}

body.vortex-bg-active .hero-market-art-webinar::before {
    inset: 0.66rem;
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at 72% 22%, rgba(255,255,255,0.82) 0 0.16rem, transparent 0.18rem),
        linear-gradient(135deg, #7c3aed, #06b6d4);
    box-shadow: 0 14px 22px rgba(124, 58, 237, 0.22);
}

body.vortex-bg-active .hero-market-art-webinar::after {
    left: 1.35rem;
    top: 1.14rem;
    width: 0.58rem;
    height: 0.7rem;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: rgba(255, 255, 255, 0.94);
    filter: drop-shadow(0 5px 8px rgba(49, 46, 129, 0.18));
}

body.vortex-bg-active .hero-market-art-course {
    background:
        radial-gradient(circle at 30% 24%, rgba(255,255,255,0.98), transparent 30%),
        linear-gradient(145deg, #fff7ed, #ffffff 55%, #ffedd5) !important;
}

body.vortex-bg-active .hero-market-art-course::before {
    left: 0.78rem;
    top: 0.64rem;
    width: 1.42rem;
    height: 1.42rem;
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 0.33rem, transparent 0.35rem),
        conic-gradient(from 20deg, #f59e0b, #14b8a6, #0ea5e9, #f59e0b);
    box-shadow: 0 14px 20px rgba(245, 158, 11, 0.2);
}

body.vortex-bg-active .hero-market-art-course::after {
    left: 1.06rem;
    bottom: 0.52rem;
    width: 0.86rem;
    height: 0.72rem;
    background: linear-gradient(135deg, #f59e0b, #fb7185);
    clip-path: polygon(0 0, 50% 38%, 100% 0, 82% 100%, 50% 76%, 18% 100%);
    filter: drop-shadow(0 9px 12px rgba(251, 113, 133, 0.2));
}

body.vortex-bg-active .tm-preview-orbit {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 50%, rgba(255,255,255,0.95) 0 0.28rem, transparent 0.3rem),
        conic-gradient(from 120deg, rgba(0, 212, 255, 0.95), rgba(16, 185, 129, 0.88), rgba(125, 92, 255, 0.86), rgba(0, 212, 255, 0.95)) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.55),
        0 16px 34px rgba(0, 212, 255, 0.25) !important;
}

body.vortex-bg-active .tm-preview-orbit::before,
body.vortex-bg-active .tm-preview-orbit::after {
    content: "";
    position: absolute;
    inset: 0.72rem 0.5rem;
    border: 2px solid rgba(255, 255, 255, 0.72);
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 999px;
    transform: rotate(-24deg);
}

body.vortex-bg-active .tm-preview-orbit::after {
    inset: 0.5rem 0.72rem;
    transform: rotate(58deg);
    opacity: 0.78;
}

/* SIDEBAR ROOT CAUSE FIX — legacy CSS made the fixed sidebar relative, creating a gap. */
@media (min-width: 768px) {
    body.vortex-bg-active .premium-sidebar {
        position: fixed !important;
        top: 0 !important;
        right: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        z-index: 30 !important;
        width: 18rem !important;
        max-width: 18rem !important;
        height: 100dvh !important;
        transform: translateX(0) !important;
        translate: none !important;
    }

    body.vortex-bg-active .dashboard-layout {
        display: flex !important;
        width: 100vw !important;
        max-width: 100vw !important;
        min-height: 100dvh !important;
        padding-left: 0 !important;
        overflow: visible !important;
    }

    body.vortex-bg-active .dashboard-layout > .dashboard-main,
    body.vortex-bg-active .md\:ml-54,
    body.vortex-bg-active .md\:ml-64,
    body.vortex-bg-active .lg\:ml-64,
    body.vortex-bg-active .md\:ml-44,
    body.vortex-bg-active .md\:ml-\[11\.25rem\],
    body.vortex-bg-active .content-area {
        width: calc(100vw - 18rem) !important;
        max-width: calc(100vw - 18rem) !important;
        min-width: 0 !important;
        margin-left: 18rem !important;
        overflow: visible !important;
    }
}

body.vortex-bg-active .dashboard-main main {
    overflow: visible !important;
}

/* VORTEX DASHBOARD NAVBAR — clean rebuild. */
.vx-nav {
    position: sticky;
    top: 0;
    z-index: 40;
    width: 100%;
    padding: 1rem 1rem 0;
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.92), rgba(248, 252, 255, 0));
    backdrop-filter: blur(10px);
}

.vx-nav__shell {
    width: 100%;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.vx-nav__row {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(18rem, 1fr) auto;
    align-items: center;
    gap: 1rem;
    min-height: 4.65rem;
    padding: 0.72rem;
}

.vx-nav__brand,
.vx-nav__profile,
.vx-nav__icon-button,
.vx-nav__search-button {
    text-decoration: none;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, color 180ms ease;
}

.vx-nav__brand {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    gap: 0.76rem;
    border-radius: 16px;
    padding: 0.42rem 0.55rem;
    color: #0f172a;
}

.vx-nav__brand:hover {
    background: #f8fbff;
}

.vx-nav__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.62rem;
    height: 2.62rem;
    flex: 0 0 2.62rem;
    border-radius: 16px;
    background: linear-gradient(135deg, #082f49, #0369a1 50%, #14b8a6);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    box-shadow: 0 12px 24px rgba(3, 105, 161, 0.18);
}

.vx-nav__brand-copy,
.vx-nav__profile-copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
}

.vx-nav__eyebrow {
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    line-height: 1;
    text-transform: uppercase;
}

.vx-nav__title {
    overflow: hidden;
    color: #0f172a;
    font-size: 1rem;
    font-weight: 820;
    letter-spacing: -0.035em;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-nav__search {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.72rem;
    width: min(100%, 46rem);
    justify-self: center;
    min-width: 0;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    background: #f8fbff;
    padding: 0.42rem 0.44rem 0.42rem 0.86rem;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.vx-nav__search:focus-within {
    border-color: rgba(3, 105, 161, 0.34);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.vx-nav__search-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    color: #0284c7;
}

.vx-nav__search-icon svg,
.vx-nav__icon-button svg,
.vx-nav__empty-note svg {
    width: 1.15rem;
    height: 1.15rem;
    stroke-width: 2;
}

.vx-nav__search-input {
    width: 100%;
    min-width: 0;
    height: 2.45rem;
    -webkit-appearance: none !important;
    appearance: none !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.015em;
}

.vx-nav__search-input:focus,
.vx-nav__search-input:focus-visible,
.vx-nav__search-input:hover {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vx-nav__search-input::-webkit-search-decoration,
.vx-nav__search-input::-webkit-search-cancel-button,
.vx-nav__search-input::-webkit-search-results-button,
.vx-nav__search-input::-webkit-search-results-decoration {
    display: none;
}

.vx-nav__search-input::placeholder {
    color: #94a3b8;
    font-weight: 560;
}

.vx-nav__search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.45rem;
    min-width: 5.2rem;
    border: 0;
    border-radius: 14px;
    background: #0f172a;
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 780;
    line-height: 1;
    padding: 0 1rem;
    white-space: nowrap;
    cursor: pointer;
}

.vx-nav__search-button:hover {
    transform: translateY(-1px);
    background: #083344;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
}

.vx-nav__actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.55rem;
    min-width: 0;
}

.vx-nav__icon-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.85rem;
    height: 2.85rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    background: #ffffff;
    color: #334155;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
    cursor: pointer;
}

.vx-nav__icon-button:hover,
.vx-nav__profile:hover {
    transform: translateY(-1px);
    border-color: rgba(14, 165, 233, 0.32);
    color: #0369a1;
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
}

.vx-nav__badge {
    position: absolute;
    top: -0.35rem;
    right: -0.35rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.18rem;
    height: 1.18rem;
    border: 2px solid #ffffff;
    border-radius: 999px;
    background: #ef4444;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 850;
    line-height: 1;
}

.vx-nav__profile {
    display: inline-flex;
    align-items: center;
    gap: 0.62rem;
    min-width: 0;
    max-width: 14rem;
    height: 2.85rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 16px;
    background: #ffffff;
    color: #0f172a;
    padding: 0.25rem 0.72rem 0.25rem 0.25rem;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
}

.vx-nav__avatar {
    width: 2.3rem;
    height: 2.3rem;
    flex: 0 0 2.3rem;
    border: 2px solid #ffffff;
    border-radius: 14px;
    object-fit: cover;
    background: #e2e8f0;
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.16);
}

.vx-nav__profile-name {
    max-width: 9rem;
    overflow: hidden;
    color: #0f172a;
    font-size: 0.8rem;
    font-weight: 760;
    letter-spacing: -0.02em;
    line-height: 1.05;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vx-nav__profile-role {
    color: #64748b;
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.15;
}

.vx-nav__notification-wrap {
    position: relative;
}

.vx-nav__dropdown {
    position: absolute;
    top: calc(100% + 0.75rem);
    right: 0;
    width: min(22rem, calc(100vw - 2rem));
    overflow: hidden;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 24px 54px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(18px);
}

.vx-nav__dropdown-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #f8fbff;
    padding: 1rem;
}

.vx-nav__dropdown-head h3 {
    margin: 0;
    color: #0f172a;
    font-size: 0.98rem;
    font-weight: 820;
    letter-spacing: -0.03em;
}

.vx-nav__dropdown-head button {
    border: 0;
    background: transparent;
    color: #0284c7;
    font-size: 0.74rem;
    font-weight: 780;
    cursor: pointer;
}

.vx-nav__dropdown-list {
    max-height: 24rem;
    overflow-y: auto;
}

.vx-nav__empty-note {
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 2rem;
    color: #94a3b8;
    text-align: center;
}

.vx-nav__empty-note svg {
    width: 2rem;
    height: 2rem;
}

.vx-nav__empty-note p {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 620;
}

.vx-nav__brand:focus-visible,
.vx-nav__search-input:focus-visible,
.vx-nav__search-button:focus-visible,
.vx-nav__icon-button:focus-visible,
.vx-nav__profile:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.28);
    outline-offset: 3px;
}

@media (max-width: 1120px) {
    .vx-nav__row {
        grid-template-columns: minmax(8rem, 11rem) minmax(14rem, 1fr) auto;
        gap: 0.72rem;
    }

    .vx-nav__brand-copy {
        display: none;
    }

    .vx-nav__brand {
        width: fit-content;
    }

    .vx-nav__profile-copy {
        display: none;
    }

    .vx-nav__profile {
        width: 2.85rem;
        padding: 0.25rem;
    }
}

@media (max-width: 767px) {
    .vx-nav {
        padding: 4.35rem 0.75rem 0;
    }

    .vx-nav__shell {
        border-radius: 20px;
    }

    .vx-nav__row {
        grid-template-columns: auto 1fr;
        gap: 0.68rem;
        min-height: auto;
        padding: 0.65rem;
    }

    .vx-nav__brand-copy {
        display: flex;
    }

    .vx-nav__brand {
        padding: 0.25rem;
    }

    .vx-nav__mark {
        width: 2.45rem;
        height: 2.45rem;
        flex-basis: 2.45rem;
        border-radius: 14px;
    }

    .vx-nav__eyebrow {
        display: none;
    }

    .vx-nav__title {
        max-width: 8rem;
        font-size: 0.92rem;
    }

    .vx-nav__actions {
        justify-self: end;
        gap: 0.45rem;
    }

    .vx-nav__search {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        border-radius: 16px;
        padding-left: 0.75rem;
    }

    .vx-nav__search-input {
        height: 2.35rem;
        font-size: 0.86rem;
    }

    .vx-nav__search-button {
        height: 2.35rem;
        min-width: auto;
        padding: 0 0.82rem;
        border-radius: 13px;
        font-size: 0.76rem;
    }

    .vx-nav__icon-button,
    .vx-nav__profile {
        width: 2.55rem;
        height: 2.55rem;
        border-radius: 14px;
    }

    .vx-nav__avatar {
        width: 2.05rem;
        height: 2.05rem;
        flex-basis: 2.05rem;
        border-radius: 12px;
    }
}

@media (max-width: 420px) {
    .vx-nav__brand-copy {
        display: none;
    }

    .vx-nav__search-button {
        min-width: 2.3rem;
        width: 2.3rem;
        padding: 0;
        font-size: 0;
    }

    .vx-nav__search-button::before {
        content: "→";
        font-size: 1rem;
    }
}


/* VORTEX SEARCHBAR — rebuilt from scratch. */
.vx-searchbar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    justify-self: center;
    width: min(100%, 44rem);
    min-width: 0;
    height: 3.18rem;
    gap: 0.7rem;
    border: 1px solid rgba(15, 23, 42, 0.09);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    padding: 0.28rem 0.32rem 0.28rem 0.92rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.92);
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.vx-searchbar:focus-within {
    border-color: rgba(2, 132, 199, 0.42);
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.11), 0 16px 34px rgba(15, 23, 42, 0.08);
}

.vx-searchbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.3rem;
    height: 1.3rem;
    color: #0284c7;
}

.vx-searchbar__icon svg,
.vx-searchbar__button svg {
    width: 1rem;
    height: 1rem;
    stroke-width: 2.2;
}

.vx-searchbar__input {
    display: block;
    width: 100%;
    min-width: 0;
    height: 2.45rem;
    margin: 0;
    padding: 0;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #0f172a;
    font: inherit;
    font-size: 0.92rem;
    font-weight: 620;
    letter-spacing: -0.015em;
    line-height: 1;
}

.vx-searchbar__input:focus,
.vx-searchbar__input:focus-visible,
.vx-searchbar__input:hover {
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.vx-searchbar__input::placeholder {
    color: #94a3b8;
    opacity: 1;
    font-weight: 560;
}

.vx-searchbar__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    height: 2.55rem;
    min-width: 6.25rem;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #0f172a, #083344);
    color: #ffffff;
    font-size: 0.82rem;
    font-weight: 780;
    letter-spacing: -0.01em;
    line-height: 1;
    padding: 0 1rem;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.14);
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.vx-searchbar__button:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
}

.vx-searchbar__button:focus-visible {
    outline: 3px solid rgba(14, 165, 233, 0.28);
    outline-offset: 3px;
}

@media (max-width: 1120px) {
    .vx-searchbar {
        width: min(100%, 34rem);
    }
}

@media (max-width: 767px) {
    .vx-searchbar {
        grid-column: 1 / -1;
        order: 3;
        width: 100%;
        height: 3rem;
        gap: 0.52rem;
        padding: 0.26rem 0.28rem 0.26rem 0.8rem;
    }

    .vx-searchbar__input {
        height: 2.28rem;
        font-size: 0.86rem;
    }

    .vx-searchbar__button {
        height: 2.35rem;
        min-width: 5.2rem;
        padding: 0 0.82rem;
        font-size: 0.76rem;
    }
}

@media (max-width: 420px) {
    .vx-searchbar__button {
        width: 2.35rem;
        min-width: 2.35rem;
        padding: 0;
    }

    .vx-searchbar__button span {
        display: none;
    }
}

/* VORTEX SEARCHBAR FINAL OVERRIDE — beat global form/button rules. */
body.vortex-bg-active .vx-searchbar {
    width: min(100%, 42rem) !important;
    height: 3rem !important;
    border: 1px solid rgba(15, 23, 42, 0.10) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.94) !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.055) !important;
    padding: 0.25rem 0.28rem 0.25rem 0.88rem !important;
}

body.vortex-bg-active .vx-searchbar:focus-within {
    border-color: rgba(0, 87, 168, 0.34) !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.08), 0 12px 26px rgba(15, 23, 42, 0.075) !important;
}

body.vortex-bg-active .vx-searchbar .vx-searchbar__input,
body.vortex-bg-active .vx-searchbar input.vx-searchbar__input[type="text"] {
    min-height: 0 !important;
    height: 2.35rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: #0f172a !important;
    font-size: 0.9rem !important;
    font-weight: 560 !important;
}

body.vortex-bg-active .vx-searchbar .vx-searchbar__input:focus,
body.vortex-bg-active .vx-searchbar .vx-searchbar__input:hover,
body.vortex-bg-active .vx-searchbar .vx-searchbar__input:focus-visible {
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"] {
    min-height: 0 !important;
    height: 2.32rem !important;
    min-width: 5.4rem !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #0057a8 !important;
    color: #ffffff !important;
    box-shadow: none !important;
    padding: 0 0.9rem !important;
    font-size: 0.78rem !important;
    font-weight: 720 !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"]:hover {
    background: #064f8f !important;
    transform: none !important;
    box-shadow: none !important;
}

/* VORTEX TOPBAR SEARCH-FIRST REFINEMENT. */
body.vortex-bg-active .vx-nav__shell {
    border-radius: 1.35rem !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.07) !important;
}

body.vortex-bg-active .vx-nav__row {
    grid-template-columns: minmax(0, 1fr) auto !important;
    min-height: 4.35rem !important;
    gap: 0.85rem !important;
    padding: 0.68rem 0.75rem !important;
}

body.vortex-bg-active .vx-searchbar {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: none !important;
    height: 3.05rem !important;
    gap: 0.72rem !important;
    border-color: rgba(0, 87, 168, 0.13) !important;
    background: #ffffff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), 0 8px 18px rgba(15, 23, 42, 0.045) !important;
}

body.vortex-bg-active .vx-searchbar__icon {
    width: 1.55rem !important;
    height: 1.55rem !important;
    border-radius: 999px !important;
    background: rgba(0, 87, 168, 0.07) !important;
    color: #0057a8 !important;
}

body.vortex-bg-active .vx-searchbar__input,
body.vortex-bg-active .vx-searchbar input.vx-searchbar__input[type="text"] {
    font-size: 0.94rem !important;
    font-weight: 520 !important;
    letter-spacing: -0.01em !important;
}

body.vortex-bg-active .vx-searchbar__input::placeholder {
    color: #7b8da2 !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"] {
    min-width: 6.2rem !important;
    background: linear-gradient(135deg, #0057a8, #006ecb) !important;
    box-shadow: 0 8px 16px rgba(0, 87, 168, 0.16) !important;
}

body.vortex-bg-active .vx-searchbar button.vx-searchbar__button[type="submit"]:hover {
    background: linear-gradient(135deg, #004d96, #005fb3) !important;
    box-shadow: 0 10px 20px rgba(0, 87, 168, 0.2) !important;
}

@media (max-width: 767px) {
    body.vortex-bg-active .vx-nav__row {
        grid-template-columns: 1fr auto !important;
        gap: 0.55rem !important;
        padding: 0.6rem !important;
    }

    body.vortex-bg-active .vx-searchbar {
        grid-column: 1 / -1 !important;
        order: 2 !important;
    }
}