/* TRUSTED BY LOGO STRIP */
.nx-logo-strip img,
.nx-logo-strip svg {
    height: 28px;
    opacity: 0.35;
    filter: grayscale(100%);
    transition: opacity 0.3s, filter 0.3s;
}
.nx-logo-strip img:hover,
.nx-logo-strip svg:hover {
    opacity: 1;
    filter: grayscale(0%);
}
/* 
   Nexus Enterprise Theme 
   2027 Premium Financial & Logistics Platform UI
   Full Section Suite
*/

:root {
    /* 2027 Design System: Perceptually Uniform OKLCH Palette */
    --nx-bg-light: oklch(98% 0 0);
    --nx-card-light: rgba(255, 255, 255, 0.7);
    --nx-text-main-light: oklch(27% 0.04 240);
    --nx-text-muted-light: oklch(53% 0.04 240);
    --nx-grid-light: rgba(15, 23, 42, 0.04);
    --nx-border-light: rgba(15, 23, 42, 0.08);
    --nx-shadow-light: 0 20px 40px -15px rgba(15, 23, 42, 0.05);

    --nx-bg-dark: #080c14;
    --nx-card-dark: rgba(13, 18, 31, 0.35);
    --nx-text-main-dark: oklch(98% 0.01 240);
    --nx-text-muted-dark: oklch(71% 0.03 240);
    --nx-grid-dark: rgba(255, 255, 255, 0.02);
    --nx-border-dark: rgba(255, 255, 255, 0.08);
    --nx-shadow-dark: 0 20px 40px -15px rgba(0, 0, 0, 0.6);

    --nx-accent-red: oklch(63% 0.22 25);
    --nx-accent-red-glow: oklch(63% 0.22 25 / 40%);
    --nx-accent-cyan: oklch(78% 0.18 200);
    --nx-accent-cyan-glow: oklch(78% 0.18 200 / 40%);
    --nx-accent-blue: oklch(40% 0.15 240);
}

/* Base Theme */
.nx-theme-bg {
    background-color: var(--nx-bg-light);
    color: var(--nx-text-main-light);
    transition: background-color 0.4s ease, color 0.4s ease;
}
html.dark .nx-theme-bg {
    background-color: var(--nx-bg-dark);
    color: var(--nx-text-main-dark);
}

/* Background Grids */
.nx-grid-bg {
    background-image: 
        linear-gradient(to right, var(--nx-grid-light) 1px, transparent 1px),
        linear-gradient(to bottom, var(--nx-grid-light) 1px, transparent 1px);
    background-size: 60px 60px;
    background-position: center center;
}
html.dark .nx-grid-bg {
    background-image: 
        linear-gradient(to right, var(--nx-grid-dark) 1px, transparent 1px),
        linear-gradient(to bottom, var(--nx-grid-dark) 1px, transparent 1px);
}

/* Nexus Card */
.nx-card {
    background: var(--nx-card-light);
    border: 1px solid var(--nx-border-light);
    box-shadow: var(--nx-shadow-light);
    border-radius: 1.5rem;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    transform-style: preserve-3d;
    transform: perspective(1000px);
}
html.dark .nx-card {
    background: var(--nx-card-dark);
    border-color: var(--nx-border-dark);
    box-shadow: var(--nx-shadow-dark);
}

/* Typography */
.nx-title {
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.04em;
    font-weight: 800;
}
.nx-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    letter-spacing: -0.02em;
}

/* Animated Text Gradient */
@keyframes nx-gradient-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
.nx-text-gradient {
    background-size: 200% auto;
    animation: nx-gradient-shift 5s ease infinite;
}

/* Scroll Reveal — progressive enhancement.
   Scoped to html.js-reveal so the hidden start state only applies when the
   reveal script has actually flagged that it will run. If that script is
   blocked, cached stale, or throws, content below the fold stays visible. */
html.js-reveal .nx-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
html.js-reveal .nx-reveal.nx-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Touch-screen safety net: below 1024px (phones portrait + landscape, tablets)
   skip the reveal animation completely and render the final state. This
   covers the 768-1024px band that previously depended on JavaScript alone. */
@media (max-width: 1024px) {
    html.js-reveal .nx-reveal,
    .nx-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        visibility: visible !important;
    }
}

/* Float Animation */
@keyframes nx-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
.nx-animate-float {
    animation: nx-float 6s ease-in-out infinite;
}

/* Chart Animations */
@keyframes nx-draw-line {
    to { stroke-dashoffset: 0; }
}
.nx-chart-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: nx-draw-line 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.nx-chart-line, .nx-chart-fill {
    transition: d 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes nx-pulse-glow {
    0%, 100% { opacity: 0.5; filter: drop-shadow(0 0 8px var(--nx-accent-cyan-glow)); }
    50% { opacity: 1; filter: drop-shadow(0 0 16px var(--nx-accent-cyan)); }
}
.nx-chart-glow {
    animation: nx-pulse-glow 3s infinite;
}

/* Asset Tabs */
.asset-tab.active {
    border-color: var(--nx-accent-cyan);
    background: rgba(0, 212, 255, 0.08);
    color: var(--nx-accent-cyan);
}

/* Tracker Nodes */
.nx-node {
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--nx-grid-light);
    border: 2px solid var(--nx-text-muted-light);
    position: relative; z-index: 2;
    transition: all 0.5s ease;
}
html.dark .nx-node {
    background: var(--nx-grid-dark);
    border-color: var(--nx-text-muted-dark);
}
.nx-node.active {
    background: var(--nx-accent-cyan);
    border-color: var(--nx-accent-cyan);
    box-shadow: 0 0 16px var(--nx-accent-cyan-glow);
    transform: scale(1.2);
}
.nx-node.completed {
    background: var(--nx-accent-blue);
    border-color: var(--nx-accent-cyan);
}

.nx-path {
    height: 3px;
    background: var(--nx-border-light);
    flex: 1; margin: 0 -2px;
    position: relative; z-index: 1;
}
html.dark .nx-path { background: var(--nx-border-dark); }
.nx-path.active::after {
    content: '';
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--nx-accent-cyan);
    width: 100%;
    box-shadow: 0 0 12px var(--nx-accent-cyan-glow);
    animation: nx-fill-path 1.5s ease-in-out forwards;
    transform-origin: left;
}
@keyframes nx-fill-path {
    0% { transform: scaleX(0); }
    100% { transform: scaleX(1); }
}

/* Neon Text */
.nx-neon-cyan {
    color: var(--nx-accent-cyan);
    text-shadow: 0 0 12px var(--nx-accent-cyan-glow);
}
.nx-neon-red {
    color: var(--nx-accent-red);
    text-shadow: 0 0 12px var(--nx-accent-red-glow);
}

/* Spotlight Hover */
.nx-spotlight { position: relative; }
.nx-spotlight::before {
    content: "";
    position: absolute; inset: 0;
    border-radius: inherit; padding: 1px;
    background: radial-gradient(800px circle at var(--mouse-x) var(--mouse-y), rgba(0,212,255,0.4), transparent 40%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none; opacity: 0;
    transition: opacity 0.4s; z-index: 10;
}
html.dark .nx-spotlight:hover::before { opacity: 1; }

/* Ambient Blobs */
.nx-ambient-blob {
    position: fixed; border-radius: 50%;
    filter: blur(120px); pointer-events: none;
    z-index: 0;
    mix-blend-mode: screen;
    will-change: opacity;
}
html.dark .nx-ambient-blob { mix-blend-mode: color-dodge; }


/* ACCESSIBILITY & FOCUS */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--nx-accent-cyan);
    outline-offset: 2px;
}


/* MARKET TICKER */
.nx-ticker-track {
    overflow: hidden;
    white-space: nowrap;
    will-change: transform;
}
.nx-ticker-pause {
    touch-action: manipulation;
    cursor: pointer;
    flex-shrink: 0;
}
.nx-ticker-pause .ticker-pause-icon-playing,
.nx-ticker-pause .ticker-pause-icon-paused {
    transition: opacity 0.2s ease;
}
.nx-ticker-pause[aria-pressed="true"] .ticker-pause-icon-playing,
.nx-ticker-pause[aria-pressed="false"] .ticker-pause-icon-paused {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}
.nx-ticker-pause[aria-pressed="false"] .ticker-pause-icon-playing,
.nx-ticker-pause[aria-pressed="true"] .ticker-pause-icon-paused {
    opacity: 1;
}
@keyframes nx-ticker {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .nx-ticker-track {
        animation: none !important;
    }
}

/* ANIMATED STATS COUNTER BAR */
.nx-stat-value {
    font-variant-numeric: tabular-nums;
    transition: color 0.3s;
    contain: layout;
}

/* HOW IT WORKS STEP CONNECTOR */
.nx-step-line {
    position: absolute;
    top: 32px;
    left: calc(50% + 32px);
    right: calc(-50% + 32px);
    height: 2px;
    background: linear-gradient(90deg, var(--nx-border-light), var(--nx-border-light));
    z-index: 0;
}
html.dark .nx-step-line {
    background: linear-gradient(90deg, var(--nx-border-dark), var(--nx-border-dark));
}
@media (max-width: 767px) {
    .nx-step-line { display: none; }
}
/* Toast Animations */
@keyframes nx-toast-slide-up {
    0% { transform: translateY(100%); opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    90% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-20px); opacity: 0; }
}
/* TOAST ANIMATIONS */
.nx-toast-item {
    animation: nx-toast-slide-up 6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Homepage refinement: scoped so account and other public pages keep their styles. */
.nx-home-page {
    --home-surface: #ffffff;
    --home-muted: #475a6e;
    --home-border: #c9d5e3;
    --home-accent: #4f46e5;
    --home-accent-strong: #4338ca;
    --home-accent-soft: #6366f1;
}
html.dark .nx-home-page {
    --home-surface: #111c2c;
    --home-muted: #a8bace;
    --home-border: #2d3d55;
    --home-accent: #6366f1;
    --home-accent-strong: #4f46e5;
    --home-accent-soft: #818cf8;
}
.nx-home-page :is(a, button, input, [tabindex]):focus-visible {
    outline: 3px solid var(--home-accent);
    outline-offset: 4px;
}
.nx-home-page .nx-card {
    background: var(--home-surface);
    border: 1px solid var(--home-border);
    border-radius: 20px;
    box-shadow: 0 12px 32px -24px rgba(0, 0, 0, .35);
    backdrop-filter: none;
    transform: none;
}
/* nx-reveal scroll animations are intentionally active on the home page — do NOT override opacity here */
.nx-home-page .nx-fluid-mesh { opacity: .2; }
/* Disable only legacy AI-slop loop animations, not functional interactive effects */
.nx-home-page :is(.nx-mesh-blob, .nx-text-gradient) { animation: none !important; }
/*
 * Hero text sits over busy vehicle photography, so each level of the type
 * hierarchy gets one shadow appropriate to its weight instead of a single
 * heavy shadow on the whole subtree.
 */
.nx-home-page .nx-hero-headline {
    font-size: clamp(2.4rem, 2rem + 4.5vw, 4rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    font-weight: 800;
    text-wrap: balance;
    color: #fff;
    margin: 0 0 1.25rem; /* generous gap between headline and sub */
    text-shadow: 0 3px 30px rgba(2, 6, 23, 0.65);
}
.nx-home-page .nx-hero-accent {
    /* Pure, luminous light violet without blurry background box */
    display: inline;
    color: #d8b4fe !important;
    text-shadow: 0 0 25px rgba(216, 180, 254, 0.5), 0 2px 14px rgba(2, 6, 23, 0.9) !important;
    font-weight: 800;
}
.nx-home-page .nx-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 1.1rem;  /* more space between pill and headline */
    padding: .28rem .85rem;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: rgba(255, 255, 255, .9);
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.nx-home-page .nx-hero-eyebrow-dot {
    display: none !important;
}
.nx-home-page .nx-hero-sub {
    max-width: 38rem;
    margin: 0 auto;
    color: rgba(255, 255, 255, .82);
    font-size: 1.0625rem;
    line-height: 1.65;
    font-weight: 500;
    text-wrap: pretty;
    text-shadow: 0 1px 12px rgba(2, 6, 23, 0.85);
}
.nx-home-page .nx-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 50px;
    padding: 0 1.8rem;
    border-radius: .85rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.nx-home-page .nx-hero-cta-icon {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    transition: transform .2s ease;
}
.nx-home-page .nx-hero-cta--primary {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 50%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 8px 25px -4px rgba(37, 99, 235, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.35) !important;
}
.nx-home-page .nx-hero-cta--primary:hover {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #1d4ed8 100%) !important;
    box-shadow: 0 12px 30px -4px rgba(37, 99, 235, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
    transform: translateY(-2px);
}
.nx-home-page .nx-hero-cta--primary:hover .nx-hero-cta-icon { transform: translateX(3px); }
.nx-home-page .nx-hero-cta--ghost {
    background: rgba(255, 255, 255, 0.14) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.45) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25) !important;
}
.nx-home-page .nx-hero-cta--ghost:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
}
.nx-home-page .nx-hero-nav {
    display: flex;
    align-items: center;
    gap: .75rem;
}
/* Rebuilt High-Trust Social Proof Badge inside Hero Slide (Borderless) */
.nx-home-page .nx-hero-trust-badge {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.65rem 0.85rem;
    margin-top: 2.25rem;
    margin-left: 0;
    margin-right: auto;
    padding: 0.45rem 1rem;
    border-radius: 6px;
    background: rgba(10, 15, 30, 0.55);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: none !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.nx-home-page .nx-trust-avatars {
    display: inline-flex;
    align-items: center;
}
.nx-home-page .nx-trust-avatars img {
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    border: none;
    object-fit: cover;
    margin-right: -8px;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.nx-home-page .nx-trust-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 9999px;
    background: linear-gradient(135deg, #6366f1, #4338ca);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    border: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.4);
}
.nx-home-page .nx-trust-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.22);
}
.nx-home-page .nx-trust-info {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
}
.nx-home-page .nx-trust-highlight {
    font-weight: 700;
    color: #ffffff;
}
.nx-home-page .nx-trust-dot {
    opacity: 0.4;
}
.nx-home-page .nx-trust-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 800;
    color: #fbbf24;
}
.nx-home-page .nx-trust-reviews {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.75rem;
}
@media (max-width: 640px) {
    .nx-home-page .nx-trust-reviews { display: none; }
    .nx-home-page .nx-hero-trust-badge {
        margin-top: 1.25rem;
        padding: 0.35rem 0.75rem;
        border: none !important;
    }
}
/* Live Market Ticker — Sleek Obsidian Glass with Violet Accent */
/* Live Market Ticker — matches page surface */
.nx-home-page .nx-market-ticker {
    width: 100%;
    max-width: 100%;
    margin: 0;
    /* Clears the fixed 64px nav exactly */
    padding: 64px 1.5rem 0.1rem;
    /* Light mode: clean white with distinct violet underline */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    color: #334155 !important;
    font-size: .875rem;
    position: relative;
    z-index: 20;
}
html.dark .nx-home-page .nx-market-ticker {
    /* Dark mode: same obsidian as the page background with thin violet underline */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    color: #cbd5e1 !important;
}
.nx-home-page .nx-market-ticker .nx-ticker-item {
    color: #475569 !important;
}
html.dark .nx-home-page .nx-market-ticker .nx-ticker-item {
    color: #94a3b8 !important;
}
.nx-home-page .nx-market-ticker strong {
    color: #0f172a !important;
    font-weight: 700;
}
html.dark .nx-home-page .nx-market-ticker strong {
    color: #ffffff !important;
    font-weight: 700;
}
.nx-home-page .nx-market-ticker .nx-pin-btn {
    color: #4f46e5 !important;
}
html.dark .nx-home-page .nx-market-ticker .nx-pin-btn {
    color: #6366f1 !important;
}
.nx-home-page .nx-market-ticker .nx-pin-btn:hover {
    color: #4338ca !important;
}
html.dark .nx-home-page .nx-market-ticker .nx-pin-btn:hover {
    color: #818cf8 !important;
}
.nx-home-page .nx-ticker-viewport {
    overflow: hidden; /* animation scrolls; no manual scroll needed on desktop */
    border-block: none;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}
.nx-home-page .nx-ticker-viewport::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}
.nx-home-page .nx-ticker-toolbar { display: none; }
.nx-home-page .nx-ticker-pause {
    min-height: 44px;
    min-width: 44px;
    border: 1px solid var(--home-border);
    border-radius: 8px;
    padding: .5rem;
    color: var(--home-accent);
    background: var(--home-surface);
}
.nx-home-page .nx-pin-btn {
    min-height: 44px;
    min-width: 44px;
    border: 0;
    background: none;
    padding: 0;
    color: #6366f1;
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: .75;
    transition: opacity .2s ease, transform .2s ease;
}
.nx-home-page .nx-pin-btn:hover,
.nx-home-page .nx-pin-btn:focus-visible {
    opacity: 1;
    transform: scale(1.15);
}
.nx-home-page .nx-pin-btn[aria-pressed="true"] {
    opacity: 1;
}
.nx-home-page .nx-ticker-pause[hidden] { display: none; }
.nx-home-page .nx-ticker-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.nx-home-page .nx-ticker-track { display: flex; width: max-content; overflow: visible; }
.nx-home-page .ticker-content { display: flex; flex-shrink: 0; gap: 1.35rem; padding: .1rem .9rem .1rem 0; }
.nx-home-page .nx-ticker-item { display: inline-flex; align-items: center; gap: .75rem; font-size: .68rem; border: 0 !important; background: transparent !important; }
.nx-home-page .nx-ticker-item strong { font-variant-numeric: tabular-nums; color: inherit; }
.nx-home-page .nx-market-ticker.is-ready:not(.is-paused) .nx-ticker-track { animation: nx-ticker 60s linear infinite; }
.nx-home-page .nx-market-ticker:is(:hover, :focus-within) .nx-ticker-track { animation-play-state: paused !important; }
.nx-home-page .nx-market-ticker.is-paused .nx-ticker-track { animation: none; transform: none; }
.nx-home-page .nx-market-ticker.is-paused [data-ticker-clone] { display: none; }

/* Testimonials Carousel & Cards Layout */
.nx-home-page .nx-marquee-container {
    overflow-x: auto;
    mask-image: none;
    -webkit-mask-image: none;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.nx-home-page .nx-marquee-container::-webkit-scrollbar { display: none; }
.nx-home-page .nx-marquee-container .nx-card { scroll-snap-align: center; }
.nx-home-page .nx-marquee-content {
    display: flex !important;
    gap: 1.5rem !important;
    animation: none !important;
    width: max-content !important;
}
.nx-home-page .nx-marquee-content + .nx-marquee-content { display: none; }

/* Homepage Button Contrast & Vibrancy Enhancements */
.nx-home-page #tracker-section a[href*="register"]:not(.w-full) {
    background: #2563eb !important;
    color: #ffffff !important;
    border: 1px solid #3b82f6 !important;
    box-shadow: 0 2px 10px rgba(37, 99, 235, 0.4) !important;
    font-weight: 700 !important;
}
.nx-home-page #tracker-section a[href*="register"]:not(.w-full):hover {
    background: #1d4ed8 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.6) !important;
}
.nx-home-page #tracker-section a.w-full {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.35) !important;
}
.nx-home-page #tracker-section a.w-full:hover {
    opacity: 0.95;
    transform: translateY(-1px);
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.5) !important;
}

/* Plan Card Buttons */
.nx-home-page .nx-plan-card a {
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.nx-home-page .nx-plan-card:not(.featured) a {
    background: rgba(37, 99, 235, 0.12) !important;
    color: #2563eb !important;
    border: 1.5px solid rgba(37, 99, 235, 0.45) !important;
}
html.dark .nx-home-page .nx-plan-card:not(.featured) a {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
    border: 1.5px solid rgba(96, 165, 250, 0.5) !important;
}
.nx-home-page .nx-plan-card:not(.featured) a:hover {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
    box-shadow: 0 4px 18px rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-2px);
}
.nx-home-page .nx-plan-card.featured a {
    background: linear-gradient(135deg, #2563eb 0%, #06b6d4 100%) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 8px 25px rgba(6, 182, 212, 0.45) !important;
}
.nx-home-page .nx-plan-card.featured a:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #0891b2 100%) !important;
    box-shadow: 0 12px 30px rgba(6, 182, 212, 0.65) !important;
    transform: translateY(-2px);
}

/* Final CTA Section & Buttons (overriding dark mode washouts) */
.nx-home-page .nx-final-cta {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #0284c7 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 50px -10px rgba(29, 78, 216, 0.35) !important;
    position: relative;
}
html.dark .nx-home-page .nx-final-cta {
    background: linear-gradient(135deg, #090e1f 0%, #17153b 45%, #1e3a8a 100%) !important;
    border: 1px solid rgba(99, 102, 241, 0.35) !important;
    box-shadow: 0 20px 50px -10px rgba(15, 23, 42, 0.6), 0 0 40px -10px rgba(99, 102, 241, 0.25) !important;
}
.nx-home-page .nx-final-cta-primary {
    background: #ffffff !important;
    color: #0f172a !important;
    font-weight: 800 !important;
    border: 1px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 10px 25px -4px rgba(0, 0, 0, 0.3), 0 0 20px rgba(255, 255, 255, 0.35) !important;
    transition: all 0.2s ease !important;
}
.nx-home-page .nx-final-cta-primary:hover {
    background: #f8fafc !important;
    color: #0284c7 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 30px -4px rgba(0, 0, 0, 0.4), 0 0 25px rgba(255, 255, 255, 0.5) !important;
}
.nx-home-page .nx-final-cta-secondary {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border: 1.5px solid rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    font-weight: 700 !important;
    transition: all 0.2s ease !important;
}
.nx-home-page .nx-final-cta-secondary:hover {
    background: rgba(255, 255, 255, 0.25) !important;
    border-color: #ffffff !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}
.nx-home-page .nx-cta-trust {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.875rem;
    font-weight: 600;
}
.nx-home-page .nx-cta-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.nx-home-page .nx-cta-trust span::before {
    content: "✓";
    color: #34d399;
    font-weight: 800;
}
.nx-home-page .nx-tool-card input[type="range"] { min-height: 44px; padding-block: 8px; }
.nx-home-page .nx-tool-card button { min-height: 44px; }
.nx-home-page .nx-risk-note { font-size: .875rem; line-height: 1.6; color: var(--home-muted); margin-top: 1rem; }
@media (prefers-reduced-motion: reduce) {
    .nx-home-page *, .nx-home-page *::before, .nx-home-page *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    .nx-home-page [data-ticker-clone] { display: none; }
}

/* EV FLEET SLIDER */
.nx-fleet-track {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0.25rem 1rem;
}
.nx-fleet-track::-webkit-scrollbar { display: none; }
.nx-fleet-card {
    position: relative;
    flex: 0 0 85%;
    scroll-snap-align: center;
    border-radius: 1.5rem;
    overflow: hidden;
    border: 1px solid var(--home-border);
    background: var(--home-surface);
    min-height: 420px;
    display: flex;
    align-items: flex-end;
}
@media (min-width: 768px) {
    .nx-fleet-card { flex-basis: calc((100% - 2.5rem) / 3); }
}
.nx-fleet-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.nx-fleet-card:hover .nx-fleet-img { transform: scale(1.05); }
.nx-fleet-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(2, 6, 23, 0.92) 0%, rgba(2, 6, 23, 0.45) 45%, rgba(2, 6, 23, 0.05) 75%);
    pointer-events: none;
}
.nx-fleet-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    padding: 0.35rem 0.8rem;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(0, 106, 217, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
}
.nx-fleet-body {
    position: relative;
    z-index: 1;
    width: 100%;
    padding: 1.5rem;
}
.nx-fleet-name {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: 0.25rem;
}
.nx-fleet-sub {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.nx-fleet-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.4rem;
    border-radius: 0.9rem;
    background: #fff;
    color: #006ad9;
    font-weight: 800;
    font-size: 0.9rem;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.nx-fleet-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(0, 212, 255, 0.35);
}
.nx-fleet-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    border: 1px solid var(--home-border);
    background: var(--home-surface);
    color: var(--home-accent);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}
.nx-fleet-arrow:hover { transform: translateY(-2px); }
.nx-fleet-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}
.nx-fleet-dot {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.nx-fleet-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: var(--home-border);
    transition: width 0.25s ease, background 0.25s ease;
}
.nx-fleet-dot.is-active::after {
    width: 28px;
    background: var(--home-accent);
}
@media (prefers-reduced-motion: reduce) {
    .nx-fleet-track { scroll-behavior: auto; }
    .nx-fleet-card:hover .nx-fleet-img { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   HOME HERO SLIDER — Cinematic rebuild
   Key principles:
     · Overlay is always dark regardless of host color-mode so
       slide typography is always white and crisp.
     · Slides fill the viewport aggressively (90svh on desktop,
       75svh on tablet, 65svh on small phones) — cinematic, not cramped.
     · Typography is display-scale, not body-scale.
     · Vignette uses a multi-stop radial + linear combo for depth.
   ═══════════════════════════════════════════════════════════ */

.nx-hero-slider {
    display: grid;
    width: 100%;
    margin: 0 !important;
    overflow: hidden;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}
@media (min-width: 640px) {
    .nx-hero-slider {
        width: 100%;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}
@media (min-width: 1024px) {
    .nx-hero-slider {
        width: 100%;
        margin: 0 !important;
        border-radius: 0 !important;
    }
}

/* ── Slide container ───────────────────────────────────── */
.nx-hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center; /* Vertically centered editorial layout */
    justify-content: flex-start; /* Left-anchored content column */
    min-height: clamp(640px, 88svh, 920px);
    padding: 7rem 1.5rem 5rem;
    opacity: 0;
    visibility: hidden;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1), visibility 0s linear 1.1s;
}

@media (min-width: 640px) {
    .nx-hero-slide {
        padding: 7rem 3rem 5rem;
    }
}
@media (min-width: 1024px) {
    .nx-hero-slide {
        padding: 7.5rem max(3.5rem, calc((100vw - 88rem) / 2)) 5.5rem;
    }
}

.nx-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity 1.1s cubic-bezier(0.16,1,0.3,1);
    z-index: 1;
}

/* ── Auto-Zoom Ken Burns Parallax Animation ── */
@keyframes nxHeroKenBurns {
    0% {
        transform: scale(1.0) translate(0, 0);
    }
    50% {
        transform: scale(1.08) translate(-1.2%, -0.6%);
    }
    100% {
        transform: scale(1.0) translate(0, 0);
    }
}

/* ── Background image ───────────────────────────────────── */
.nx-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 76% 50%;
    will-change: transform;
}
@media (min-width: 1024px) {
    .nx-hero-bg {
        /* Frame the vehicle prominently in the clear right half */
        object-position: 78% 50%;
    }
}
.nx-hero-slide.is-active .nx-hero-bg {
    animation: nxHeroKenBurns 18s ease-in-out infinite alternate;
}

/* ── Cinematic gradient overlay — Pattern A Directional Scrim ── */
.nx-hero-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* Directional left-to-right scrim: deep contrast for text, crystal-clear view of vehicle */
    background:
        linear-gradient(
            to right,
            rgba(2, 6, 23, 0.95) 0%,
            rgba(2, 6, 23, 0.88) 32%,
            rgba(2, 6, 23, 0.55) 52%,
            rgba(2, 6, 23, 0.15) 72%,
            rgba(2, 6, 23, 0.00) 100%
        ),
        linear-gradient(
            to top,
            rgba(2, 6, 23, 0.75) 0%,
            rgba(2, 6, 23, 0.20) 25%,
            transparent 45%
        ),
        linear-gradient(
            to bottom,
            rgba(2, 6, 23, 0.50) 0%,
            transparent 22%
        );
}

/* ── Slide inner content (Editorial Column) ──────────────── */
.nx-hero-slide-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 38rem;
    margin: 0;
    padding: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Content stagger animation */
.nx-hero-slide-inner > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.nx-hero-slide.is-active .nx-hero-slide-inner > * { opacity: 1; transform: none; }
.nx-hero-slide.is-active .nx-hero-slide-inner > *:nth-child(2) { transition-delay: 0.10s; }
.nx-hero-slide.is-active .nx-hero-slide-inner > *:nth-child(3) { transition-delay: 0.20s; }
.nx-hero-slide.is-active .nx-hero-slide-inner > *:nth-child(4) { transition-delay: 0.30s; }
.nx-hero-slide.is-active .nx-hero-slide-inner > *:nth-child(5) { transition-delay: 0.40s; }

/* Force text white — overlay guarantees contrast in any host color mode */
.nx-home-page .nx-hero-slide-inner { text-shadow: 0 2px 14px rgba(0,0,0,0.65); }

/* ── Actions ────────────────────────────────────────────── */
.nx-home-page .nx-hero-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 1rem;
    margin-top: 0;
    width: 100%;
}
.nx-home-page .nx-hero-actions > * { width: 100%; }
@media (min-width: 640px) {
    .nx-home-page .nx-hero-actions > * { width: auto; }
}

/* ── Controls bar ───────────────────────────────────────── */
.nx-hero-controls {
    position: absolute;
    bottom: 2rem;
    left: 0;
    right: 0;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: min(100rem, 100%);
    margin: 0 auto;
    padding: 0 max(3.5rem, calc((100vw - 88rem) / 2));
    pointer-events: none;
}
.nx-hero-dots,
.nx-hero-nav {
    pointer-events: auto;
}
.nx-hero-dots { display: flex; align-items: center; gap: 0.5rem; }
.nx-hero-dot {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    border: none;
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.nx-hero-dot::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.35);
    transition: width 0.3s ease, background 0.3s ease;
}
.nx-hero-dot.is-active::after { width: 28px; background: var(--home-accent, #a855f7); }

.nx-hero-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.nx-hero-arrow:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.16);
    border-color: rgba(255,255,255,0.35);
}

/* ── Typography overrides on the home hero (always white-on-dark) ── */
.nx-home-page .nx-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    align-self: flex-start;
    margin-bottom: 1.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    padding: 0.35rem 0.85rem;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.85) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
.nx-home-page .nx-hero-headline {
    color: #ffffff !important;
    text-align: left;
    font-size: clamp(2.4rem, 3.8vw + 0.6rem, 4.25rem) !important;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    margin-bottom: 1.25rem;
}
.nx-home-page .nx-hero-sub {
    color: rgba(255, 255, 255, 0.82) !important;
    text-align: left;
    font-size: clamp(1.025rem, 0.8vw + 0.5rem, 1.2rem) !important;
    line-height: 1.6;
    max-width: 33rem;
    margin: 0 0 2rem 0;
}
/* Accent spans use the per-slide CSS variable set by JS */
.nx-home-page .nx-hero-accent {
    color: var(--slide-accent, #d8b4fe) !important;
    -webkit-text-fill-color: var(--slide-accent, #d8b4fe) !important;
    text-shadow:
        0 0 30px var(--slide-accent-glow, rgba(216,180,254,0.55)),
        0 2px 16px rgba(2,6,23,0.9) !important;
    transition: color 0.8s ease, text-shadow 0.8s ease;
}

/* ── Progress bar ────────────────────────────────────────────────── */
.nx-hero-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg,
        var(--slide-accent, #a78bfa) 0%,
        rgba(255,255,255,0.7) 100%);
    z-index: 10;
    pointer-events: none;
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 10px var(--slide-accent-glow, rgba(167,139,250,0.6));
}
@media (prefers-reduced-motion: reduce) {
    .nx-hero-progress { display: none; }
}

/* ── Slide counter ───────────────────────────────────────────────── */
.nx-hero-counter {
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    user-select: none;
    padding-right: 0.5rem;
}

/* ── Hero Trust Badge Base ────────────────────────────────────────── */
.nx-hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1.75rem;
    padding: 0.375rem 0.875rem;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    width: fit-content;
}

.nx-trust-avatars {
    display: flex;
    align-items: center;
}

.nx-trust-avatars img {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    border: 2px solid #0f172a;
    margin-left: -8px;
    object-fit: cover;
    display: inline-block;
}

.nx-trust-avatars img:first-child {
    margin-left: 0;
}

.nx-trust-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: #4f46e5;
    color: #ffffff;
    font-size: 0.6875rem;
    font-weight: 700;
    margin-left: -8px;
    border: 2px solid #0f172a;
}

.nx-trust-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

.nx-trust-info {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
}

.nx-trust-highlight {
    font-weight: 600;
    color: #ffffff;
}

.nx-trust-dot {
    opacity: 0.5;
}

.nx-trust-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-weight: 700;
    color: #f59e0b;
}

.nx-trust-reviews {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ── Mobile adjustments ─────────────────────────────────── */
@media (max-width: 767px) {
    .nx-hero-slide {
        min-height: clamp(520px, 86svh, 720px);
        padding: 4.25rem 1.15rem 3.25rem;
        align-items: flex-start;
        justify-content: flex-start;
    }
    /* Automotive focal positioning: frame car clearly on the right */
    .nx-hero-bg {
        object-position: 86% 40%;
    }
    /* Directional Scrim Overlay: left 50% dark for text, right side clear for car */
    .nx-hero-shade {
        background:
            linear-gradient(
                to right,
                rgba(2, 6, 23, 0.95) 0%,
                rgba(2, 6, 23, 0.85) 46%,
                rgba(2, 6, 23, 0.20) 72%,
                rgba(2, 6, 23, 0.00) 100%
            ),
            linear-gradient(
                to bottom,
                rgba(2, 6, 23, 0.55) 0%,
                transparent 22%,
                rgba(2, 6, 23, 0.80) 100%
            );
    }
    /* Compact Editorial column on left (leaves right 40% open for car) */
    .nx-hero-slide-inner {
        max-width: 15rem;
        padding: 0;
        margin-top: 0;
        text-align: left;
        align-items: flex-start;
        display: flex;
        flex-direction: column;
    }
    /* Tesla-style micro eyebrow tag */
    .nx-home-page .nx-hero-eyebrow {
        align-self: flex-start;
        text-align: left;
        font-size: 0.625rem !important;
        font-weight: 700 !important;
        letter-spacing: 0.16em !important;
        text-transform: uppercase !important;
        padding: 0.22rem 0.65rem;
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.16);
        color: rgba(255, 255, 255, 0.8) !important;
        margin-bottom: 0.65rem;
    }
    /* Tesla-style punchy display headline */
    .nx-home-page .nx-hero-headline {
        text-align: left;
        font-size: clamp(1.85rem, 6.8vw, 2.35rem) !important;
        line-height: 1.05;
        letter-spacing: -0.04em;
        font-weight: 800;
        margin-bottom: 0.65rem;
        max-width: 15rem;
    }
    /* Refined subtitle */
    .nx-home-page .nx-hero-sub {
        text-align: left;
        font-size: 0.84rem !important;
        line-height: 1.48;
        letter-spacing: -0.01em;
        color: rgba(255, 255, 255, 0.78) !important;
        max-width: 14rem;
        margin-bottom: 1.15rem;
    }
    /* Inline compact Tesla-style pill buttons */
    .nx-home-page .nx-hero-actions {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        gap: 0.5rem;
        margin-top: 0;
        width: 100%;
    }
    .nx-home-page .nx-hero-actions > * {
        width: auto !important;
    }
    .nx-home-page .nx-hero-cta {
        min-height: 38px;
        padding: 0 1rem;
        font-size: 0.8125rem;
        font-weight: 600;
        border-radius: 8px;
    }
    /* Micro high-trust badge */
    .nx-home-page .nx-hero-trust-badge {
        justify-content: flex-start;
        margin-top: 2.25rem;
        margin-left: 0;
        margin-right: auto;
        padding: 0.35rem 0.75rem;
        background: rgba(8, 12, 24, 0.65);
        backdrop-filter: blur(16px);
        -webkit-backdrop-filter: blur(16px);
        border: none !important;
        gap: 0.45rem;
    }
    .nx-home-page .nx-trust-avatars img,
    .nx-home-page .nx-trust-count {
        width: 22px;
        height: 22px;
        font-size: 0.65rem;
    }
    .nx-home-page .nx-trust-info {
        font-size: 0.72rem;
    }
    /* Hide Slide Number Counter on mobile */
    .nx-hero-counter {
        display: none !important;
    }
    /* Move controls UP into the slider */
    .nx-hero-controls {
        position: absolute;
        bottom: 1.15rem;
        left: 0;
        right: 0;
        z-index: 25;
        margin: 0;
        padding: 0 1.25rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        pointer-events: none;
    }
    .nx-hero-dots,
    .nx-hero-nav {
        pointer-events: auto;
    }
    .nx-hero-arrow {
        width: 38px;
        height: 38px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nx-hero-slide { transition: none; }
    .nx-hero-slide .nx-hero-bg { transition: none; }
    .nx-hero-slide-inner > * { opacity: 1; transform: none; transition: none; }
}

/*
 * MOBILE SWIPE STRIPS
 * `nx-mobile-swipe` is applied to the home/solutions stat and feature grids.
 * On phones the multi-column grid is unreadable, so the grids collapse into a
 * horizontally scrollable, snap-aligned rail instead of a tall stacked column.
 */
@media (max-width: 767px) {
    /*
     * Scope the rail to the grid-based swipe strips only. A tab strip such as the
     * one in solutions.blade.php uses `nx-mobile-swipe` purely as an overflow
     * hint and sets `scroll-snap-type: none`, so it must keep its inline-flex
     * layout untouched.
     */
    .nx-mobile-swipe.grid {
        display: flex !important;
        flex-direction: row;
        grid-template-columns: none !important;
        gap: 0.875rem !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 0.75rem;
        margin-left: -1.25rem;
        margin-right: -1.25rem;
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .nx-mobile-swipe.grid::-webkit-scrollbar { display: none; }

    .nx-mobile-swipe.grid > * {
        flex: 0 0 85%;
        max-width: 85%;
        scroll-snap-align: center;
        min-width: 0;
    }
}

/* =====================================================================
   VIOLET + GREY BRAND DESIGN SYSTEM (Guest Pages)
   Harmonizes primary buttons, badges, borders, icons with hero violet accents
   ===================================================================== */
:root {
    --col-violet-600: #7C3AED;
    --col-violet-500: #8B5CF6;
    --col-violet-400: #A78BFA;
    --col-violet-300: #C4B5FD;
    --col-violet-100: #EDE9FE;
    --col-indigo-500: #4F46E5;
    --col-card-border-light: #E9E6FF;
    --col-btn-grad: linear-gradient(135deg, #6366F1 0%, #4F46E5 50%, #4338CA 100%);
    --col-btn-grad-hover: linear-gradient(135deg, #818CF8 0%, #6366F1 50%, #4F46E5 100%);
    --col-btn-glow: 0 4px 20px rgba(79, 70, 229, 0.35);
}

/* Primary actions across guest surfaces */
.btn--primary,
.btn-primary,
.pub-nav__cta,
.nx-hero-cta--primary,
a.btn--base:not(.btn--danger):not(.btn--success),
button.btn--base:not(.btn--danger):not(.btn--success) {
    background: var(--col-btn-grad) !important;
    border-color: transparent !important;
    box-shadow: var(--col-btn-glow) !important;
    color: #ffffff !important;
    transition: all 0.25s ease !important;
}

.btn--primary:hover,
.btn-primary:hover,
.pub-nav__cta:hover,
.nx-hero-cta--primary:hover,
a.btn--base:not(.btn--danger):not(.btn--success):hover,
button.btn--base:not(.btn--danger):not(.btn--success):hover {
    background: var(--col-btn-grad-hover) !important;
    box-shadow: 0 6px 24px rgba(79, 70, 229, 0.50) !important;
    transform: translateY(-1px);
}

/* Outline / Ghost buttons */
.btn-outline-primary,
.btn--outline-base,
.pub-nav__login {
    border-color: rgba(196, 181, 253, 0.4) !important;
    color: #ffffff !important;
}
html:not(.dark) .btn-outline-primary,
html:not(.dark) .btn--outline-base,
html:not(.dark) .pub-nav__login {
    border-color: var(--col-violet-300) !important;
    color: var(--col-violet-600) !important;
}

/* Guest Cards & Borders in Light Mode */
html:not(.dark) .nx-home-page .border-slate-200,
html:not(.dark) .nx-home-page .border-gray-200,
html:not(.dark) .nx-home-page .border-slate-100 {
    border-color: var(--col-card-border-light) !important;
}

/* Icon & Badge Accents */
.nx-badge-accent,
.nx-section-badge {
    background: rgba(124, 58, 237, 0.12) !important;
    color: var(--col-violet-400) !important;
    border: 1px solid rgba(167, 139, 250, 0.3) !important;
}
html:not(.dark) .nx-badge-accent,
html:not(.dark) .nx-section-badge {
    background: var(--col-violet-100) !important;
    color: var(--col-violet-600) !important;
    border-color: var(--col-violet-300) !important;
}

/* Footer Link Hovers */
footer a:hover,
.nx-footer a:hover {
    color: var(--col-violet-400) !important;
}

/* Mobile section width loosening */
@media (max-width: 640px) {
    .nx-home-page section.px-4 {
        padding-left: 1.25rem !important;
        padding-right: 1.25rem !important;
    }
}

/* ══════════════════════════════════════════════════
   UTILITY: scrollbar-none (used by snap-scroll tracks)
   ══════════════════════════════════════════════════ */
.scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; }
.scrollbar-none::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════════════
   SNAP-SCROLL TRACK: prevent horizontal page overflow
   ══════════════════════════════════════════════════ */
#statsSlider,
#testimonialTrack {
    scroll-behavior: smooth;
}

/* ══════════════════════════════════════════════════
   FAQ ACCORDION — vanilla JS version
   ══════════════════════════════════════════════════ */
.nx-faq-item {
    background: rgba(255,255,255,0.55);
    border: 1px solid rgba(196,181,253,0.18);
    border-radius: 1rem;
    overflow: hidden;
    transition: border-color 0.2s;
}
html.dark .nx-faq-item {
    background: rgba(255,255,255,0.04);
    border-color: rgba(196,181,253,0.12);
}
.nx-faq-item:has(.faq-trigger[aria-expanded="true"]) {
    border-color: rgba(124,58,237,0.35);
}
.faq-trigger {
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1.1rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: inherit;
}
.faq-trigger:hover {
    background: rgba(124,58,237,0.04);
}
.faq-icon {
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
    flex-shrink: 0;
}
.faq-body {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4,0,0.2,1);
}

/* ══════════════════════════════════════════════════
   TESTIMONIAL DOTS — animated pill indicator
   ══════════════════════════════════════════════════ */
.testimonial-dot {
    cursor: pointer;
    transition: width 0.3s, background 0.3s;
    border: none;
    padding: 0;
}

/* ══════════════════════════════════════════════════
   STAT CARD — public surface violet border accent
   ══════════════════════════════════════════════════ */
.tsa-public-surface .nx-stat-card {
    border-color: rgba(196,181,253,0.25);
    background: rgba(255,255,255,0.55);
}
html.dark .tsa-public-surface .nx-stat-card {
    background: rgba(255,255,255,0.04);
    border-color: rgba(196,181,253,0.15);
}

/* ══════════════════════════════════════════════════
   STEP CARD — hover lift
   ══════════════════════════════════════════════════ */
.nx-step-card {
    transition: transform 0.3s, box-shadow 0.3s;
}
.nx-step-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(124,58,237,0.12);
}