/**
 * ================================================================================
 * SLINGSHOT NAVIGATION STYLES
 * ================================================================================
 * Minimal styles for the dark glassmorphism header and mega-menu animation.
 * All layout is handled by Tailwind classes in the HBS templates.
 */

/* ============================================================================
   BASE HEADER STYLES
   ============================================================================ */

.slingshot-header {
    position: relative;
    background: transparent;
    border: none;
}

/* Glass background — separate DOM element to isolate backdrop-filter (Safari fix v2) */
.slingshot-header-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.87);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
    pointer-events: none;
    transition: background 0.3s ease, backdrop-filter 0.3s ease;
}

.slingshot-header.is-scrolled .slingshot-header-bg {
    background: rgba(0, 0, 0, 0.87);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.slingshot-header.is-scrolled {
    border: none;
}

/* Mega-menu glass background — separate DOM element */
.mega-menu-bg {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(0, 0, 0, 0.87);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: -1;
    pointer-events: none;
}

/* Mobile menu glass background — separate DOM element */
.mobile-menu-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    z-index: -1;
    pointer-events: none;
}

/* ============================================================================
   MEGA MENU SCALE ANIMATION
   ============================================================================ */

.mega-menu {
    transform: scale(0.96);
    transform-origin: top center;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.mega-menu.opacity-100 {
    transform: scale(1);
}

/* ============================================================================
   NO-GPU FALLBACK: Replace backdrop-filter with solid backgrounds
   ============================================================================ */

.no-gpu .slingshot-header-bg {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.95);
}

.no-gpu .mega-menu-bg {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.97);
}

.no-gpu .mobile-menu-bg {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.98);
}

/* ============================================================================
   GRAYSCALE TILES: Default gray, color on hover
   ============================================================================ */

[data-menu="industries"] a.group:not(.no-grayscale) img.object-cover,
[data-menu="insights"] a.group:not(.no-grayscale) img.object-cover {
    filter: grayscale(1);
    opacity: 0.55;
    transition: filter 0.4s ease, opacity 0.4s ease, transform 0.25s ease-out;
}

[data-menu="industries"] a.group:not(.no-grayscale):hover img.object-cover,
[data-menu="insights"] a.group:not(.no-grayscale):hover img.object-cover {
    filter: grayscale(0);
    opacity: 1;
}

/* Regions flags: grayscale by default, color on hover */
[data-menu="regions"] .fi {
    filter: grayscale(1);
    opacity: 0.6;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

[data-menu="regions"] a:hover .fi {
    filter: grayscale(0);
    opacity: 1;
}

/* Geo-Connectivity custom icon: match Phosphor icon colors */
.ni-geo-icon {
    filter: invert(1) brightness(0.6);
    transition: filter 0.2s ease;
}
.group:hover .ni-geo-icon {
    filter: invert(1) brightness(1);
}

/* All mega menu CTA/info images: 55% opacity */
.mega-menu img.object-cover.rounded-lg,
#ni-services-crossfade,
#ni-clarity-crossfade {
    opacity: 0.55;
}

/**
 * ============================================================================
 * SLINGSHOT MOBILE STYLES
 * ============================================================================
 *
 * Comprehensive mobile optimization for the Slingshot Ghost theme.
 *
 * Breakpoints:
 * - Phone: < 640px
 * - Tablet: 640px - 1024px
 * - Desktop: > 1024px (unchanged, handled by existing styles)
 *
 * Table of Contents:
 * 1. CSS Custom Properties (Typography Scale)
 * 2. Header & Navigation
 * 3. Mobile Menu Enhancements
 * 4. Touch Targets & Feedback
 * 5. Grid Layouts - Homepage
 * 6. Grid Layouts - Footer
 * 7. Grid Layouts - Dashboard/App Pages
 * 8. Grid Layouts - Feature/Industry Pages
 * 9. Typography Scaling
 * 10. Blog Index Styles
 * 11. Post & Article Styles (Single Post)
 * 12. Pricing Page
 * 13. Form Inputs
 * 14. WebGL Hero Canvas - iOS Touch Scroll Fix
 * 15. Safe Area Support (Notched Devices)
 * 16. Touch Device Specific
 * 17. Utility Overrides
 */


/* ============================================================================
   1. CSS CUSTOM PROPERTIES - TYPOGRAPHY SCALE
   ============================================================================ */

:root {
    /* Desktop defaults (inherited from existing styles) */
    --mobile-font-hero: 4.5rem;
    --mobile-font-h1: 3.5rem;
    --mobile-font-h2: 2.5rem;
    --mobile-font-h3: 1.5rem;
    --mobile-stat-number: 5rem;
    --mobile-container-padding: 24px;
}

@media (max-width: 1024px) {
    :root {
        --mobile-font-hero: 3rem;
        --mobile-font-h1: 2.5rem;
        --mobile-font-h2: 2rem;
        --mobile-font-h3: 1.25rem;
        --mobile-stat-number: 4rem;
        --mobile-container-padding: 20px;
    }
}

@media (max-width: 640px) {
    :root {
        --mobile-font-hero: 2.25rem;
        --mobile-font-h1: 1.875rem;
        --mobile-font-h2: 1.5rem;
        --mobile-font-h3: 1.125rem;
        --mobile-stat-number: 3rem;
        --mobile-container-padding: 16px;
    }
}


/* ============================================================================
   2. HEADER & NAVIGATION
   ============================================================================ */

/* Sticky header on mobile - always visible */
@media (max-width: 1024px) {
    #header-wrapper {
        position: fixed !important;
        top: 10px;
        left: 0;
        right: 0;
        z-index: 50;
        padding-top: 6px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .slingshot-header {
        margin: 0;
    }

    /* Adjust logo size on tablet */
    .slingshot-header img[alt] {
        height: 48px;
    }
}

@media (max-width: 640px) {
    #header-wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0 !important;
        top: 0 !important;
    }

    .slingshot-header {
        border-radius: 0;
    }
    .slingshot-header-bg {
        border-radius: 0 !important;
    }

    /* Smaller logo on phone */
    .slingshot-header img[alt] {
        height: 42px;
    }

    /* Adjust nav height */
    .slingshot-header nav {
        height: 52px;
    }

    /* Header padding */
    .slingshot-header .px-6 {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Header spacer adjustment for non-hero pages */
@media (max-width: 1024px) {
    .header-spacer {
        height: 78px;
    }
}

@media (max-width: 640px) {
    .header-spacer {
        height: 66px;
    }
}


/* ============================================================================
   3. MOBILE MENU ENHANCEMENTS
   ============================================================================ */

@media (max-width: 1024px) {
    /* Accordion header buttons — clear hierarchy */
    .mobile-accordion > button {
        min-height: 52px;
        padding: 14px 0;
        font-size: 14px;
        font-weight: 600;
        color: #f1f5f9;
        letter-spacing: 0.01em;
    }

    /* Accordion content links — readable, tap-friendly */
    .mobile-accordion .accordion-content a {
        display: flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 12px;
        font-size: 14px;
        color: #cbd5e1;
        border-radius: 8px;
        margin: 1px 0;
        transition: background-color 0.15s ease;
    }

    /* Active state for accordion links */
    .mobile-accordion .accordion-content a:active {
        background-color: rgba(255, 255, 255, 0.06);
    }

    /* Category labels — small, muted, clearly distinct from links */
    .mobile-accordion .accordion-content p {
        padding: 12px 12px 4px;
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: #64748b;
        margin-top: 8px;
    }

    /* First category label doesn't need extra top margin */
    .mobile-accordion .accordion-content p:first-child {
        margin-top: 0;
    }

    /* Phone number link */
    #mobile-menu a[href^="tel:"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding: 10px 0;
    }

    /* Accordion arrow rotation */
    .mobile-accordion.is-open .accordion-arrow {
        transform: rotate(180deg);
    }
}


/* ============================================================================
   4. TOUCH TARGETS & FEEDBACK
   ============================================================================ */

/* 48px minimum tap targets on touch devices */
@media (max-width: 1024px) {
    /* All buttons */
    button:not(.mobile-accordion button):not(.ip-testimonial-avatar):not(.ip-carousel-dot),
    [role="button"]:not(.ip-testimonial-avatar):not(.ip-carousel-dot) {
        min-height: 44px;
    }

    /* Link buttons (inline-flex styled links) */
    a.inline-flex,
    a[class*="rounded-full"]:not(.w-2):not(.w-1),
    a[class*="rounded-lg"] {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    /* Icon-only buttons */
    button:has(> svg:only-child),
    button:has(> i:only-child) {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }

    /* Form inputs - prevents iOS zoom on focus */
    input,
    select,
    textarea {
        min-height: 48px;
        font-size: 16px !important;
        padding: 12px 16px;
    }

    /* Checkbox/radio labels */
    label:has(input[type="checkbox"]),
    label:has(input[type="radio"]) {
        min-height: 44px;
        padding: 10px 0;
        display: flex;
        align-items: center;
        gap: 12px;
    }
}

/* Active states for touch feedback */
@media (max-width: 1024px) {
    /* Primary buttons (orange) */
    a[class*="bg-[#1e40af]"]:active,
    button[class*="bg-[#1e40af]"]:active,
    .gradient-orange:active {
        transform: scale(0.98);
        background-color: #1e3a8a !important;
    }

    /* Dark buttons */
    a[class*="bg-gray-900"]:active,
    button[class*="bg-gray-900"]:active {
        transform: scale(0.98);
        background-color: #1f2937 !important;
    }

    /* Outline/secondary buttons */
    a[class*="border-white"]:active,
    a[class*="border-gray"]:active {
        transform: scale(0.98);
        background-color: rgba(0, 0, 0, 0.05);
    }

    /* Cards */
    .bg-white.rounded-xl:active,
    .bg-white.rounded-2xl:active,
    a.group.bg-gray-50:active {
        transform: scale(0.99);
    }

    /* Navigation items in mobile menu */
    .mobile-accordion .accordion-content a:active {
        background-color: rgba(255, 129, 28, 0.1);
    }

    /* Accordion header buttons */
    .mobile-accordion button:active {
        background-color: rgba(0, 0, 0, 0.03);
    }
}


/* ============================================================================
   5. GRID LAYOUTS - HOMEPAGE
   ============================================================================ */

/* Phone: Single column */
@media (max-width: 640px) {
    /* Homepage container padding */
    .slingshot-home .max-w-\[1400px\] {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Logo bar - smaller gaps */
    .slingshot-home section.py-8.bg-gray-50 .flex-wrap {
        gap: 16px;
    }

    .slingshot-home section.py-8.bg-gray-50 span {
        font-size: 14px;
    }

    /* Mission section - already lg:grid-cols-2 works */
    .slingshot-home .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Video aspect ratio on phone */
    .slingshot-home .aspect-\[4\/3\] {
        aspect-ratio: 16/9;
    }

    /* Feature grid (2-column becomes 1) */
    .slingshot-home section.py-20.lg\:py-32.bg-gray-50 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Feature cards - less padding on phone */
    .slingshot-home .bg-white.rounded-xl.p-8 {
        padding: 20px;
    }

    /* Use cases grid (4 cols to 1) */
    .slingshot-home .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Use case cards */
    .slingshot-home .grid.md\:grid-cols-2.lg\:grid-cols-4 > a {
        padding: 20px;
    }

    /* Trust badges - wrap tighter */
    .slingshot-home section.py-8.bg-gray-100 .flex-wrap {
        gap: 12px 20px;
    }

    /* Testimonial section */
    .slingshot-home section.bg-gray-900 .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Stats card in testimonial - margin top */
    .slingshot-home .bg-gradient-to-br.from-\[\#1e40af\] {
        margin-top: 0;
    }

    /* Section vertical padding reduction */
    .slingshot-home section.py-20 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    .slingshot-home section.lg\:py-32 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Final CTA section */
    .slingshot-home section.py-32.lg\:py-48 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* CTA buttons stack on phone */
    .slingshot-home .flex.flex-col.sm\:flex-row {
        flex-direction: column;
        width: 100%;
    }

    .slingshot-home .flex.flex-col.sm\:flex-row > a {
        width: 100%;
        justify-content: center;
    }
}

/* Tablet: 2 columns where appropriate */
@media (min-width: 640px) and (max-width: 1024px) {
    /* Use cases grid - 2 columns on tablet */
    .slingshot-home .grid.md\:grid-cols-2.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Feature grid stays 2 columns via lg:grid-cols-2 tailwind */

    /* Section padding adjustment */
    .slingshot-home section.py-20.lg\:py-32 {
        padding-top: 64px;
        padding-bottom: 64px;
    }
}


/* ============================================================================
   7. GRID LAYOUTS - DASHBOARD/APP PAGES
   ============================================================================ */

@media (max-width: 640px) {
    /* Dashboard container padding */
    .slingshot-app .max-w-7xl,
    .slingshot-app .max-w-\[1400px\] {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Page header */
    .slingshot-app h1 {
        font-size: 1.5rem;
    }

    /* Stats grid - single column */
    .slingshot-app .grid.md\:grid-cols-2,
    .slingshot-app .grid.lg\:grid-cols-2,
    .slingshot-app .grid.lg\:grid-cols-4 {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* Stat cards */
    .slingshot-app .slingshot-stat-card,
    .slingshot-app .bg-white.rounded-xl {
        padding: 16px;
    }

    /* Action buttons - stack and full width */
    .slingshot-app .flex.gap-2:not(.items-center) {
        flex-direction: column;
    }

    .slingshot-app .flex.gap-2 button,
    .slingshot-app .flex.gap-2 a {
        width: 100%;
        justify-content: center;
    }

    /* Filter/tab bar - horizontal scroll */
    .slingshot-app .flex.gap-4.mb-6,
    .slingshot-app .flex.gap-2.mb-6 {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: 8px;
        margin-left: calc(var(--mobile-container-padding) * -1);
        margin-right: calc(var(--mobile-container-padding) * -1);
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    .slingshot-app .flex.gap-4.mb-6::-webkit-scrollbar,
    .slingshot-app .flex.gap-2.mb-6::-webkit-scrollbar {
        display: none;
    }

    .slingshot-app .flex.gap-4.mb-6 button,
    .slingshot-app .flex.gap-2.mb-6 button {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Inbox/list items - adjust layout */
    .slingshot-app .space-y-4 > div {
        padding: 16px;
    }

    /* Quick action links */
    .slingshot-app .space-y-3 a {
        display: flex;
        padding: 14px 16px;
        min-height: 52px;
    }
}

/* Tablet dashboard */
@media (min-width: 640px) and (max-width: 1024px) {
    .slingshot-app .grid.lg\:grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .slingshot-app .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }
}


/* ============================================================================
   8. GRID LAYOUTS - FEATURE/INDUSTRY PAGES
   ============================================================================ */

@media (max-width: 640px) {
    /* Feature page containers */
    [class*="page-feature"] .max-w-\[1400px\],
    [class*="page-industry"] .max-w-\[1400px\],
    [class*="page-for"] .max-w-\[1400px\] {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Feature grids */
    [class*="page-feature"] .grid.lg\:grid-cols-2,
    [class*="page-industry"] .grid.lg\:grid-cols-2,
    [class*="page-for"] .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    [class*="page-feature"] .grid.lg\:grid-cols-3,
    [class*="page-industry"] .grid.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Feature cards */
    [class*="page-feature"] .bg-white.rounded-xl.p-8,
    [class*="page-industry"] .bg-white.rounded-xl.p-8 {
        padding: 20px;
    }

    /* Comparison tables - horizontal scroll wrapper */
    [class*="page-"] .overflow-x-auto {
        margin-left: calc(var(--mobile-container-padding) * -1);
        margin-right: calc(var(--mobile-container-padding) * -1);
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Section padding */
    [class*="page-feature"] section.py-20,
    [class*="page-industry"] section.py-20,
    [class*="page-for"] section.py-20 {
        padding-top: 48px;
        padding-bottom: 48px;
    }
}


/* ============================================================================
   9. TYPOGRAPHY SCALING
   ============================================================================ */

@media (max-width: 640px) {
    /* Hero headlines */
    .text-4xl.md\:text-5xl.lg\:text-6xl.xl\:text-7xl {
        font-size: var(--mobile-font-hero) !important;
        line-height: 1.15;
    }

    /* Large section headlines */
    .text-3xl.md\:text-4xl.lg\:text-5xl,
    h2.text-3xl {
        font-size: var(--mobile-font-h1) !important;
        line-height: 1.2;
    }

    /* Medium headlines */
    .text-2xl.md\:text-3xl.lg\:text-4xl {
        font-size: var(--mobile-font-h2) !important;
    }

    /* Stat numbers - still prominent */
    .text-5xl,
    .text-8xl,
    .text-9xl,
    .text-8xl.md\:text-9xl {
        font-size: var(--mobile-stat-number) !important;
        line-height: 1;
    }

    /* Slightly larger for hero stats */
    .slingshot-home .text-8xl.md\:text-9xl {
        font-size: 3.5rem !important;
    }

    /* Subheadlines and body text */
    .text-lg.md\:text-xl.lg\:text-2xl {
        font-size: 1rem;
        line-height: 1.6;
    }

    .text-xl.md\:text-2xl {
        font-size: 1.125rem;
    }

    /* Eyebrow/label text */
    .text-xs.font-mono.uppercase {
        font-size: 10px;
        letter-spacing: 0.15em;
    }

    /* Blockquotes */
    blockquote.text-2xl.md\:text-3xl.lg\:text-4xl {
        font-size: 1.25rem;
        line-height: 1.5;
    }

    /* Final CTA headline */
    .text-5xl.md\:text-6xl.lg\:text-8xl {
        font-size: 2rem !important;
        line-height: 1.15;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    /* Tablet typography */
    .text-5xl.md\:text-6xl.lg\:text-8xl {
        font-size: 3rem;
    }

    .text-8xl.md\:text-9xl {
        font-size: var(--mobile-stat-number);
    }
}


/* ============================================================================
   10. BLOG INDEX STYLES
   ============================================================================ */

@media (max-width: 640px) {
    /* Blog container padding */
    .slingshot-blog .max-w-\[1400px\] {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Blog hero section */
    .slingshot-blog section.py-24.md\:py-32 {
        padding-top: 64px;
        padding-bottom: 64px;
    }

    /* Topic tags - horizontal scroll */
    .slingshot-blog .flex.flex-wrap.justify-center.gap-3 {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
        margin-left: calc(var(--mobile-container-padding) * -1);
        margin-right: calc(var(--mobile-container-padding) * -1);
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    .slingshot-blog .flex.flex-wrap.justify-center.gap-3::-webkit-scrollbar {
        display: none;
    }

    .slingshot-blog .flex.flex-wrap.justify-center.gap-3 > span {
        flex-shrink: 0;
    }

    /* Posts grid - single column */
    .slingshot-blog .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Featured post grid */
    .slingshot-blog .grid.lg\:grid-cols-2 {
        grid-template-columns: 1fr;
    }

    /* Featured post content */
    .slingshot-blog .p-8.lg\:p-12 {
        padding: 20px;
    }

    /* Section padding */
    .slingshot-blog section.py-20.lg\:py-32 {
        padding-top: 48px;
        padding-bottom: 48px;
    }

    /* Pagination */
    .slingshot-blog nav.mt-16 .flex.items-center.gap-3 {
        flex-direction: column;
        gap: 12px;
    }

    .slingshot-blog nav.mt-16 a {
        width: 100%;
        justify-content: center;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    /* Tablet: 2 columns for posts */
    .slingshot-blog .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================================
   11. POST & ARTICLE STYLES (SINGLE POST)
   ============================================================================ */

@media (max-width: 640px) {
    /* Article header */
    .slingshot-post header {
        padding-top: 32px;
        padding-bottom: 32px;
    }

    .slingshot-post header .max-w-\[1400px\] {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Article title */
    .slingshot-post h1 {
        font-size: 1.75rem;
        line-height: 1.2;
    }

    /* Article excerpt */
    .slingshot-post .text-xl.md\:text-2xl {
        font-size: 1rem;
        line-height: 1.6;
    }

    /* Metadata row - wrap */
    .slingshot-post .flex.flex-wrap.gap-y-4.gap-x-8 {
        gap: 12px 16px;
    }

    /* Author avatar */
    .slingshot-post .w-10.h-10 {
        width: 36px;
        height: 36px;
    }

    /* Feature image */
    .slingshot-post figure {
        margin-left: calc(var(--mobile-container-padding) * -1);
        margin-right: calc(var(--mobile-container-padding) * -1);
        border-radius: 0;
    }

    /* Article content */
    .slingshot-post .gh-content {
        padding: 32px var(--mobile-container-padding);
    }

    /* Article footer CTA */
    .slingshot-post footer .bg-gradient-to-br {
        padding: 24px;
        border-radius: 16px;
    }

    .slingshot-post footer .flex.flex-col.sm\:flex-row {
        flex-direction: column;
    }

    .slingshot-post footer .flex.flex-col.sm\:flex-row > a {
        width: 100%;
        justify-content: center;
    }

    /* Related articles grid */
    .slingshot-post + section .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Related articles section padding */
    .slingshot-post + section {
        padding: 48px var(--mobile-container-padding);
    }

    /* Comments section */
    .slingshot-post .gh-comments {
        padding: 32px var(--mobile-container-padding);
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    /* Tablet: 2 columns for related */
    .slingshot-post + section .grid.md\:grid-cols-2.lg\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ============================================================================
   12. PRICING PAGE
   ============================================================================ */

@media (max-width: 768px) {
    /* Pricing cards - stack */
    .grid.md\:grid-cols-3 {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    /* Remove featured card offset on mobile */
    .md\:-translate-y-4 {
        transform: none !important;
    }

    /* Pricing card padding */
    .rounded-2xl.p-8 {
        padding: 24px;
    }

    /* Price text */
    .text-5xl {
        font-size: 2.5rem;
    }

    /* Features list */
    .space-y-4 li {
        padding: 8px 0;
    }

    /* FAQ grid */
    .grid.md\:grid-cols-2:has(.text-lg.font-semibold) {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


/* ============================================================================
   13. FORM INPUTS
   ============================================================================ */

@media (max-width: 1024px) {
    /* All form inputs */
    .slingshot-form input,
    .slingshot-form select,
    .slingshot-form textarea,
    .gh-form input,
    .gh-form select,
    .gh-form textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    select,
    textarea {
        min-height: 48px;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px 16px;
        border-radius: 8px;
    }

    /* Search inputs */
    input[type="search"] {
        padding-left: 44px; /* Room for icon */
    }

    /* Submit buttons */
    .slingshot-form button[type="submit"],
    .gh-form button[type="submit"],
    button[type="submit"] {
        min-height: 48px;
        padding: 12px 24px;
        font-size: 14px;
    }

    /* Form labels */
    label {
        font-size: 14px;
        margin-bottom: 8px;
        display: block;
    }

    /* Form groups */
    .slingshot-form .mb-4,
    .gh-form .mb-4 {
        margin-bottom: 20px;
    }
}


/* ============================================================================
   14. WEBGL HERO CANVAS - iOS TOUCH SCROLL FIX
   ============================================================================ */

/*
 * Fix: Canvas should stay anchored while page scrolls normally.
 * The canvas is already position:fixed in slingshot-hero.css
 * We just need to ensure the canvas element itself doesn't respond to touch.
 */

/* Canvas - non-interactive, GPU accelerated */
#liquid-hero-canvas {
    pointer-events: none;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* iOS-specific: GPU layer for smoother rendering */
@supports (-webkit-touch-callout: none) {
    #liquid-hero-canvas {
        transform: translate3d(0, 0, 0);
    }
}


/* ============================================================================
   15. SAFE AREA SUPPORT (NOTCHED DEVICES)
   ============================================================================ */

@supports (padding: env(safe-area-inset-top)) {
    /* Header wrapper */
    #header-wrapper {
        padding-top: max(6px, env(safe-area-inset-top));
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }

    /* Mobile menu */
    #mobile-menu {
        padding-top: env(safe-area-inset-top);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
        padding-bottom: env(safe-area-inset-bottom);
    }

    /* Fixed/sticky bottom elements */
    .fixed.bottom-0,
    .sticky.bottom-0 {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Specific phone adjustments */
@media (max-width: 640px) {
    @supports (padding: env(safe-area-inset-top)) {
        #header-wrapper {
            padding-top: max(6px, env(safe-area-inset-top));
            padding-left: max(8px, env(safe-area-inset-left));
            padding-right: max(8px, env(safe-area-inset-right));
        }
    }
}


/* ============================================================================
   16. TOUCH DEVICE SPECIFIC
   ============================================================================ */

/* Disable hover-only effects on touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Prevent hover state sticking on touch */
    a:hover,
    button:hover {
        opacity: 1;
    }

    /* Card hover effects - only show on active */
    .bg-white.rounded-xl:hover,
    .bg-white.rounded-2xl:hover,
    a.group:hover {
        transform: none;
        box-shadow: none;
    }

    /* Keep active states */
    .bg-white.rounded-xl:active,
    .bg-white.rounded-2xl:active {
        transform: scale(0.99);
    }

    /* Navigation - disable hover dropdown on touch (use tap) */
    .nav-dropdown:hover .mega-menu {
        /* Handled by JavaScript instead */
    }
}

/* Touch device body class (added by JS) */
body.is-touch-device {
    /* Prevent text selection on interactive elements */
    button,
    a,
    [role="button"] {
        -webkit-user-select: none;
        -moz-user-select: none;
             user-select: none;
    }

    /* Improve tap highlighting */
    a,
    button,
    [role="button"] {
        -webkit-tap-highlight-color: rgba(255, 129, 28, 0.1);
    }
}


/* ============================================================================
   17. UTILITY OVERRIDES
   ============================================================================ */

@media (max-width: 640px) {
    /* Container max-width - full width on phone */
    .max-w-\[1400px\],
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl {
        max-width: 100%;
    }

    /* Padding overrides */
    .px-6 {
        padding-left: var(--mobile-container-padding);
        padding-right: var(--mobile-container-padding);
    }

    /* Reduce large gaps */
    .gap-8 {
        gap: 24px;
    }

    .gap-12 {
        gap: 32px;
    }

    .gap-20 {
        gap: 40px;
    }

    /* Hide on mobile utility */
    .mobile-hidden {
        display: none !important;
    }

    /* Show on mobile utility */
    .mobile-only {
        display: block !important;
    }

    /* Full width on mobile */
    .mobile-full-width {
        width: 100% !important;
    }

    /* Stack on mobile */
    .mobile-stack {
        flex-direction: column !important;
    }

    /* Horizontal scroll container */
    .mobile-scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .mobile-scroll-x::-webkit-scrollbar {
        display: none;
    }
}

@media (min-width: 640px) and (max-width: 1024px) {
    /* Tablet-specific utilities */
    .tablet-hidden {
        display: none !important;
    }

    .tablet-full-width {
        width: 100% !important;
    }
}

/* Desktop-only utilities */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}

@media (min-width: 1024px) {
    .mobile-only,
    .tablet-only {
        display: none !important;
    }
}

/**
 * ================================================================================
 * SLINGSHOT APP STYLES
 * ================================================================================
 * Styles for the member-only app pages:
 * Dashboard, Accounts, Contacts, Sequences, Inbox, Discovery, Settings
 */

/* ============================================================================
   APP LAYOUT
   ============================================================================ */

.slingshot-app {
    min-height: 100vh;
    background: #f9fafb;
}

.slingshot-app-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
}

.slingshot-app-header {
    margin-bottom: 2rem;
}

.slingshot-app-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}

.slingshot-app-subtitle {
    font-size: 1rem;
    color: #6b7280;
}

/* ============================================================================
   DASHBOARD STATS CARDS
   ============================================================================ */

.slingshot-stats-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
    margin-bottom: 2rem;
}

@media (min-width: 640px) {
    .slingshot-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .slingshot-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.slingshot-stat-card {
    background: white;
    border-radius: 0.75rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.slingshot-stat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.slingshot-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
}

.slingshot-stat-icon {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    font-size: 1.25rem;
}

.slingshot-stat-icon-blue {
    background: #FFF7ED;
    color: #1e40af;
}

.slingshot-stat-icon-green {
    background: #eff6ff;
    color: #93c5fd;
}

.slingshot-stat-icon-amber {
    background: #fef3c7;
    color: #f59e0b;
}

.slingshot-stat-icon-purple {
    background: #ede9fe;
    color: #8b5cf6;
}

.slingshot-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.slingshot-stat-change {
    font-size: 0.75rem;
    margin-top: 0.5rem;
}

.slingshot-stat-change-positive {
    color: #93c5fd;
}

.slingshot-stat-change-negative {
    color: #ef4444;
}

/* ============================================================================
   DATA TABLES
   ============================================================================ */

.slingshot-table-container {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.slingshot-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.slingshot-table-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.slingshot-table {
    width: 100%;
    border-collapse: collapse;
}

.slingshot-table th {
    text-align: left;
    padding: 0.75rem 1.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.slingshot-table td {
    padding: 1rem 1.5rem;
    font-size: 0.875rem;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
}

.slingshot-table tr:hover {
    background: #f9fafb;
}

.slingshot-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   CARDS & PANELS
   ============================================================================ */

.slingshot-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.slingshot-card-header {
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
}

.slingshot-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.slingshot-card-body {
    padding: 1.5rem;
}

.slingshot-card-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}

/* ============================================================================
   SEQUENCE TIMELINE
   ============================================================================ */

.slingshot-sequence-timeline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.slingshot-sequence-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    font-size: 0.75rem;
    font-weight: 600;
}

.slingshot-sequence-step-pending {
    background: #f3f4f6;
    color: #9ca3af;
}

.slingshot-sequence-step-active {
    background: #FFF7ED;
    color: #1e40af;
}

.slingshot-sequence-step-sent {
    background: #eff6ff;
    color: #93c5fd;
}

.slingshot-sequence-step-replied {
    background: #fef3c7;
    color: #f59e0b;
}

.slingshot-sequence-connector {
    width: 1.5rem;
    height: 2px;
    background: #e5e7eb;
}

/* ============================================================================
   STATUS BADGES
   ============================================================================ */

.slingshot-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 9999px;
}

.slingshot-badge-blue {
    background: #FFF7ED;
    color: #1e3a8a;
}

.slingshot-badge-green {
    background: #eff6ff;
    color: #60a5fa;
}

.slingshot-badge-amber {
    background: #fef3c7;
    color: #d97706;
}

.slingshot-badge-red {
    background: #fee2e2;
    color: #dc2626;
}

.slingshot-badge-gray {
    background: #f3f4f6;
    color: #6b7280;
}

/* ============================================================================
   FORMS
   ============================================================================ */

.slingshot-form-group {
    margin-bottom: 1.5rem;
}

.slingshot-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.slingshot-form-input,
.slingshot-form-select,
.slingshot-form-textarea {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    color: #111827;
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.slingshot-form-input:focus,
.slingshot-form-select:focus,
.slingshot-form-textarea:focus {
    outline: none;
    border-color: #1e40af;
    box-shadow: 0 0 0 3px rgba(255, 129, 28, 0.1);
}

.slingshot-form-textarea {
    min-height: 120px;
    resize: vertical;
}

.slingshot-form-help {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.375rem;
}

/* ============================================================================
   BUTTONS (APP)
   ============================================================================ */

.slingshot-btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.75rem;
}

.slingshot-btn-lg {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.slingshot-btn-danger {
    background: #ef4444;
    color: white;
}

.slingshot-btn-danger:hover {
    background: #dc2626;
}

.slingshot-btn-success {
    background: #93c5fd;
    color: white;
}

.slingshot-btn-success:hover {
    background: #60a5fa;
}

/* ============================================================================
   EMPTY STATES
   ============================================================================ */

.slingshot-empty-state {
    text-align: center;
    padding: 4rem 2rem;
}

.slingshot-empty-icon {
    font-size: 3rem;
    color: #d1d5db;
    margin-bottom: 1rem;
}

.slingshot-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.slingshot-empty-description {
    font-size: 0.875rem;
    color: #6b7280;
    margin-bottom: 1.5rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================================
   INBOX / EMAIL PREVIEW
   ============================================================================ */

.slingshot-email-card {
    background: white;
    border-radius: 0.75rem;
    border: 1px solid #e5e7eb;
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.slingshot-email-card:hover {
    border-color: #d1d5db;
}

.slingshot-email-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.slingshot-email-to {
    font-size: 1rem;
    font-weight: 600;
    color: #111827;
}

.slingshot-email-meta {
    font-size: 0.75rem;
    color: #6b7280;
}

.slingshot-email-subject {
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.slingshot-email-preview {
    font-size: 0.875rem;
    color: #6b7280;
    line-height: 1.6;
}

.slingshot-email-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

/* Slingshot Utility Classes
/* ---------------------------------------------------------- */

:root {
    --primary-color: #1e40af;
    --secondary-color: #93c5fd;
}

/* Apple-style smooth scrolling */
html {
    scroll-behavior: smooth;
    overflow-y: scroll;
}

* {
    scroll-behavior: smooth;
}

/* Smooth scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.25);
}

/* Glass morphism utility classes */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.glass-strong {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.glass-dark {
    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.glass-subtle {
    background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Gradient utilities */
.gradient-orange {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
}

.gradient-cyan {
    background: linear-gradient(135deg, #93c5fd 0%, #60a5fa 100%);
}

.gradient-orange-to-cyan {
    background: linear-gradient(135deg, #1e40af 0%, #93c5fd 100%);
}

.gradient-subtle {
    background: linear-gradient(180deg, rgba(255, 129, 28, 0.05) 0%, transparent 100%);
}

/* Footer glass — separate DOM element for Safari */
.ni-footer {
    background: transparent;
    position: relative;
    z-index: 1;
}

/* Mobile footer: compact 2-column layout */
@media (max-width: 639px) {
    .ni-footer h3 {
        font-size: 0.6875rem;
        margin-bottom: 0.625rem;
    }
    .ni-footer ul.space-y-3 > li + li {
        margin-top: 0.5rem;
    }
    .ni-footer a.text-sm {
        font-size: 0.8125rem;
    }
}

.ni-footer-bg {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.87);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: -1;
    pointer-events: none;
}

/* Text gradient */
.text-gradient-orange {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================================================
   NO-GPU FALLBACK: Replace backdrop-filter with solid backgrounds
   ============================================================================ */

.no-gpu .ni-footer-bg {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.95);
}

.no-gpu .glass {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.85);
}

.no-gpu .glass-strong {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
}

.no-gpu .glass-dark {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(0, 0, 0, 0.92);
}

.no-gpu .glass-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.8);
}

.no-gpu .glass-subtle {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.6);
}

/* =============================================================================
   premium-animations.css — Nightingale Intranet
   Premium motion design: scroll-reveal, smooth accordions, card lift,
   hero ambient glow, count-up, refined scrollbar.
   Design rule: unhurried, precise, never distracting.
   ============================================================================= */


/* ── 1. Page entrance ─────────────────────────────────────────────────────── */

@keyframes ni-page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.slingshot-viewport {
    animation: ni-page-in 0.30s ease both;
}


/* ── 2. Scroll reveal — JS adds these classes dynamically ─────────────────── */

/* Base state: invisible + shifted down */
.ni-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
        opacity  0.60s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.60s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--ni-d, 0ms);
}

/* Triggered state: IntersectionObserver adds .ni-in when element enters viewport */
.ni-reveal.ni-in {
    opacity: 1;
    transform: translateY(0);
}


/* ── 3. Smooth accordion ──────────────────────────────────────────────────── */

/* JS wraps accordion body content in this; animates max-height */
.ni-acc-body {
    overflow: hidden;
    transition: max-height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
    /* visibility managed by JS to prevent tab-focus on hidden content */
}


/* ── 4. Card premium hover lift ──────────────────────────────────────────── */

/* Applied by JS to all interactive card elements */
.ni-card {
    transition:
        box-shadow 0.22s cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.22s cubic-bezier(0.22, 1, 0.36, 1),
        border-color 0.22s ease;
}

.ni-card:hover {
    will-change: transform, box-shadow;
    transform: translateY(-3px);
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.07),
        0 3px 10px rgba(0, 0, 0, 0.04);
}

/* Prevent lift during active/press */
.ni-card:active {
    transform: translateY(-1px);
    box-shadow:
        0 4px 14px rgba(0, 0, 0, 0.06),
        0 1px 4px rgba(0, 0, 0, 0.03);
    transition-duration: 0.08s;
}


/* ── 5. Animated Mesh Gradient — Tool Hero Background ─────────────────────
   Organic flowing colour blobs behind tool profile heroes.
   4 blurred radial-gradient divs animated via CSS transforms (GPU-composited).
   Palette: blue / indigo / cyan on dark navy — intelligence aesthetic.
   ──────────────────────────────────────────────────────────────────────────── */

.ni-mesh-gradient {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.ni-mesh-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    will-change: transform;
}

/* Blob 1 — Blue, top-left, large sweeping orbit */
.ni-mesh-blob--1 {
    width: 60vw;
    height: 60vw;
    top: -10%;
    left: -15%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.45) 0%, transparent 70%);
    animation: ni-mesh-drift-1 12s ease-in-out infinite;
}

/* Blob 2 — Indigo, bottom-right, counter-orbit */
.ni-mesh-blob--2 {
    width: 50vw;
    height: 50vw;
    bottom: -20%;
    right: -10%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.40) 0%, transparent 70%);
    animation: ni-mesh-drift-2 16s ease-in-out infinite;
}

/* Blob 3 — Cyan, top-right area, diagonal sweep */
.ni-mesh-blob--3 {
    width: 45vw;
    height: 45vw;
    top: 10%;
    right: 20%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.35) 0%, transparent 70%);
    animation: ni-mesh-drift-3 14s ease-in-out infinite;
}

/* Blob 4 — Blue wash, wide ellipse at top (was silver — changed to avoid gray cast on sections below) */
.ni-mesh-blob--4 {
    width: 70vw;
    height: 40vw;
    top: -5%;
    left: 20%;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
    animation: ni-mesh-drift-4 10s ease-in-out infinite;
}

/* Keyframes — multi-step orbits for clearly visible, organic motion.
   Each blob traces a unique looping path so they never synchronise. */
@keyframes ni-mesh-drift-1 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    25%  { transform: translate(25vw, 10vh) scale(1.12) rotate(3deg); }
    50%  { transform: translate(18vw, 25vh) scale(0.95) rotate(-2deg); }
    75%  { transform: translate(-5vw, 15vh) scale(1.08) rotate(1deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes ni-mesh-drift-2 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    25%  { transform: translate(-20vw, -8vh) scale(1.1) rotate(-3deg); }
    50%  { transform: translate(-10vw, -22vh) scale(0.92) rotate(2deg); }
    75%  { transform: translate(8vw, -12vh) scale(1.06) rotate(-1deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes ni-mesh-drift-3 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    33%  { transform: translate(-22vw, 15vh) scale(1.15) rotate(4deg); }
    66%  { transform: translate(-8vw, -10vh) scale(0.9) rotate(-3deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes ni-mesh-drift-4 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-15vw, 6vh) scale(1.1); }
    66%  { transform: translate(10vw, -4vh) scale(0.95); }
    100% { transform: translate(0, 0) scale(1); }
}

/* Print: hide entirely */
@media print {
    .ni-mesh-gradient {
        display: none !important;
    }
}




/* ── 5b. Light Mesh Gradient Hero (sub-page headers) ─────────────────────── *
   Inspired by paper-design/shaders MeshGradient — recreated in pure CSS.
   Soft blue/indigo/teal blobs on white, with a white veil for readability.
   ──────────────────────────────────────────────────────────────────────────── */

.ni-hero-light {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: #f0f7ff;
}

.ni-hero-light .ni-hero-blob {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
}

/* Blob 1 — Soft blue, top-left */
.ni-hero-light .ni-hero-blob:nth-child(1) {
    width: 55%; height: 55%;
    top: -20%; left: -10%;
    background: radial-gradient(circle, rgba(147,197,253,0.7) 0%, transparent 70%);
    filter: blur(60px);
    animation: ni-hero-float-1 14s ease-in-out infinite;
}

/* Blob 2 — Indigo, bottom-right */
.ni-hero-light .ni-hero-blob:nth-child(2) {
    width: 45%; height: 45%;
    bottom: -15%; right: -5%;
    background: radial-gradient(circle, rgba(165,180,252,0.6) 0%, transparent 70%);
    filter: blur(55px);
    animation: ni-hero-float-2 18s ease-in-out infinite;
}

/* Blob 3 — Teal accent, center-right */
.ni-hero-light .ni-hero-blob:nth-child(3) {
    width: 40%; height: 40%;
    top: 5%; right: 15%;
    background: radial-gradient(circle, rgba(103,232,249,0.45) 0%, transparent 70%);
    filter: blur(50px);
    animation: ni-hero-float-3 16s ease-in-out infinite;
}

/* Blob 4 — Deep blue wash, wide */
.ni-hero-light .ni-hero-blob:nth-child(4) {
    width: 60%; height: 35%;
    top: 10%; left: 25%;
    background: radial-gradient(circle, rgba(30,64,175,0.15) 0%, transparent 70%);
    filter: blur(70px);
    animation: ni-hero-float-4 12s ease-in-out infinite;
}

/* Blob 5 — Sky blue, bottom-left */
.ni-hero-light .ni-hero-blob:nth-child(5) {
    width: 35%; height: 35%;
    bottom: -10%; left: 10%;
    background: radial-gradient(circle, rgba(56,189,248,0.35) 0%, transparent 70%);
    filter: blur(45px);
    animation: ni-hero-float-5 20s ease-in-out infinite;
}

/* Veil — white overlay for text readability */
.ni-hero-veil {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.35);
    pointer-events: none;
}

/* Float keyframes — unique multi-step paths */
@keyframes ni-hero-float-1 {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(15%, 8vh) scale(1.1); }
    50%  { transform: translate(10%, 18vh) scale(0.95); }
    75%  { transform: translate(-5%, 10vh) scale(1.05); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes ni-hero-float-2 {
    0%   { transform: translate(0, 0) scale(1); }
    25%  { transform: translate(-18%, -6vh) scale(1.08); }
    50%  { transform: translate(-8%, -16vh) scale(0.92); }
    75%  { transform: translate(6%, -8vh) scale(1.04); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes ni-hero-float-3 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    33%  { transform: translate(-20%, 12vh) scale(1.12) rotate(3deg); }
    66%  { transform: translate(-6%, -8vh) scale(0.88) rotate(-2deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@keyframes ni-hero-float-4 {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(-12%, 5vh) scale(1.08); }
    66%  { transform: translate(8%, -3vh) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}

@keyframes ni-hero-float-5 {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    25%  { transform: translate(12%, -10vh) scale(1.06) rotate(-2deg); }
    50%  { transform: translate(20%, 5vh) scale(0.96) rotate(1deg); }
    75%  { transform: translate(5%, 12vh) scale(1.1) rotate(-1deg); }
    100% { transform: translate(0, 0) scale(1) rotate(0deg); }
}

@media print {
    .ni-hero-light { display: none !important; }
}


/* ── 6. Count-up number ─────────────────────────────────────────────────── */

[data-countup] {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}


/* ── 7. Focus ring ───────────────────────────────────────────────────────── */

:focus-visible {
    outline: 2px solid rgba(30, 64, 175, 0.45);
    outline-offset: 3px;
    border-radius: 4px;
}


/* ── 8. Scrollbar refinement ─────────────────────────────────────────────── */

::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.14);
    border-radius: 9999px;
    -webkit-transition: background 0.2s ease;
    transition: background 0.2s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.26);
}


/* ── 10. Selection color polish ─────────────────────────────────────────── */

/* Dark sections: invert selection to white bg + black text */
.slingshot-header ::-moz-selection, .mega-menu ::-moz-selection, .mobile-menu ::-moz-selection, footer ::-moz-selection, .bg-gray-950 ::-moz-selection {
    background: white;
    color: black;
}
.slingshot-header ::selection,
.mega-menu ::selection,
.mobile-menu ::selection,
footer ::selection,
.bg-gray-950 ::selection {
    background: white;
    color: black;
}

/* ── 11. Magnetic Text (Insights CTA) ──────────────────────────────────── */

.ni-magnetic-circle {
    transition: width 0.5s cubic-bezier(0.33, 1, 0.68, 1),
                height 0.5s cubic-bezier(0.33, 1, 0.68, 1);
    will-change: transform, width, height;
    transform: translate(-50%, -50%);
}

.ni-magnetic-inner {
    will-change: transform;
}

.no-gpu .ni-magnetic-circle {
    display: none;
}


/* ── 12. Reading Progress Bar ───────────────────────────────────────────── */

.ni-reading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

.ni-reading-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
    border-radius: 0 2px 2px 0;
    transition: width 0.1s linear;
}


/* ── 14. Skip Navigation (Accessibility) ────────────────────────────────── */

.ni-skip-nav {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    padding: 10px 24px;
    background: #1e40af;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
    transition: top 0.2s ease;
}

.ni-skip-nav:focus {
    top: 0;
    outline: 2px solid #fff;
    outline-offset: -2px;
}


/* ── 15. Copy-to-Clipboard Toast ────────────────────────────────────────── */

@keyframes ni-toast-in {
    from { opacity: 0; transform: translateY(8px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ni-toast-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to   { opacity: 0; transform: translateY(-4px) scale(0.96); }
}

.ni-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    padding: 10px 20px;
    background: #111827;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: ni-toast-in 0.25s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    pointer-events: none;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.ni-toast.ni-toast-leaving {
    animation: ni-toast-out 0.2s ease forwards;
}



/* ── 17. Print Stylesheet ───────────────────────────────────────────────── */

@media print {
    /* Hide interactive/UI elements */
    .ni-reading-bar,
    .ni-skip-nav,
    .ni-toast,
    nav[aria-label="Jump to department"],
    #ni-product-filters,
    .ni-toggle-all,
    button[data-portal],
    footer,
    .slingshot-header,
    #slingshot-header,
    [data-portal] {
        display: none !important;
    }

    /* Remove animations */
    .ni-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    /* Clean backgrounds */
    body {
        background: #fff !important;
        color: #000 !important;
        font-size: 12pt;
    }

    main {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Keep cards visible but flat */
    .ni-card {
        transform: none !important;
        box-shadow: none !important;
        -moz-column-break-inside: avoid;
             break-inside: avoid;
    }

    /* Accordion: force open for print */
    details {
        display: block !important;
    }

    details > div {
        max-height: none !important;
        visibility: visible !important;
        overflow: visible !important;
    }

    /* Show link URLs after anchors */
    a[href]:not([href^="#"])::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #666;
        word-break: break-all;
    }

    /* Page breaks */
    h1, h2, h3 {
        page-break-after: avoid;
    }

    .grid {
        display: block !important;
    }

    .grid > * {
        -moz-column-break-inside: avoid;
             break-inside: avoid;
        margin-bottom: 12pt;
    }
}


/* ── 18. Micro-Interactions ──────────────────────────────────────────────── */

/* Smooth border highlight on product filter tabs */
.ni-filter-tab {
    transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.ni-filter-tab:hover:not([aria-selected="true"]) {
    transform: translateY(-1px);
}

/* Jump-link pulse on click */
.ni-jump-link:active {
    transform: scale(0.95);
}

/* Tool accordion summary hover */
details.tool-accordion > summary {
    transition: background-color 0.15s ease;
}

/* Team card contact icon animation */
[data-copy] .ph-copy {
    transition: transform 0.15s ease, opacity 0.15s ease;
    opacity: 0;
}

[data-copy]:hover .ph-copy {
    opacity: 1;
}

/* Subtle pulse for "Internal Use Only" badge */
@keyframes ni-badge-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Line-clamp utility (for bio preview) */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Keyboard shortcut hint in footer */
kbd {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}


/* ── 19. Glassmorphism Card ────────────────────────────────────────────── */

.ni-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}


/* ── 20. Bento Grid Helpers ────────────────────────────────────────────── */

.ni-bento-wide  { grid-column: span 2; }
.ni-bento-tall  { grid-row: span 2; }
.ni-bento-large { grid-column: span 2; grid-row: span 2; }

@media (max-width: 767px) {
    .ni-bento-wide,
    .ni-bento-tall,
    .ni-bento-large {
        grid-column: span 1;
        grid-row: span 1;
    }
}


/* ── 21. Left Accent Border ────────────────────────────────────────────── */

.ni-accent-left {
    border-left: 4px solid #1e40af;
    border-top: none;
    border-right: none;
    border-bottom: none;
    background: #fff;
}


/* ── 22. Dark Feature Card ─────────────────────────────────────────────── */

.ni-card-dark {
    background: #1e293b;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ni-card-dark p,
.ni-card-dark span {
    color: rgba(255, 255, 255, 0.65);
}

.ni-card-dark h2,
.ni-card-dark h3,
.ni-card-dark strong {
    color: #fff;
}


/* ── 23. Gradient Text ─────────────────────────────────────────────────── */

.ni-text-gradient {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ── 24. Horizontal Scroll Strip ───────────────────────────────────────── */

.ni-scroll-strip {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding-bottom: 4px;
}

.ni-scroll-strip::-webkit-scrollbar {
    display: none;
}

.ni-scroll-strip > * {
    scroll-snap-align: start;
    flex-shrink: 0;
}


/* ── 25. Process Number Indicator ──────────────────────────────────────── */

.ni-process-num {
    font-size: 1.75rem;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.06);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    min-width: 2ch;
    text-align: right;
}


/* ── 26. Top Accent Bar (for cards) ────────────────────────────────────── */

.ni-accent-top {
    position: relative;
    overflow: hidden;
}

.ni-accent-top::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #1e40af 0%, #3b82f6 100%);
    border-radius: 999px 999px 0 0;
}


/* ── 27. Responsive Typography ─────────────────────────────────────────── */

.ni-h1 {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #111827;
}

.ni-body-text {
    font-size: 1rem;    /* 16px min */
    line-height: 1.65;
    color: #4b5563;
}

.ni-label {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #9ca3af;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}


/* ── 28. Timeline List (for recently updated) ──────────────────────────── */

.ni-timeline-item {
    position: relative;
}

.ni-timeline-item::before {
    content: '';
    position: absolute;
    left: -1.3rem;
    top: 1.25rem;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #1e40af;
    border: 2px solid #fff;
}

/* ── 28b. Product Status Badges ────────────────────────────────────────── */

[data-status="Active"] .ni-status-badge {
    background: rgb(220 252 231);
    color: rgb(21 128 61);
}
[data-status="In Development"] .ni-status-badge {
    background: rgb(254 243 199);
    color: rgb(180 83 9);
}
[data-status="Concept"] .ni-status-badge {
    background: rgb(243 244 246);
    color: rgb(107 114 128);
}


/* ── 29. Stat Display (borderless, large numbers) ──────────────────────── */

.ni-stat-number {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: #1e40af;
}

.ni-stat-label {
    font-size: 14px;
    color: #6b7280;
    margin-top: 0.25rem;
}


/* ── 30. Timezone Badge ────────────────────────────────────────────────── */

.ni-timezone {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: #9ca3af;
    margin-top: 2px;
}


/* ── 31. Dark Page Hero ──────────────────────────────────────────────────── */

.ni-dark-hero {
    background: #000;
    color: #fff;
}


/* ── 32. Mini Map Widget ─────────────────────────────────────────────────── */

.ni-mini-map {
    border-radius: 12px;
    overflow: hidden;
    background: #111827;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ni-mini-map canvas {
    display: block;
    width: 100%;
    height: 100%;
}


/* ── 33. Blinking Geo Dot ────────────────────────────────────────────────── */

@keyframes ni-geo-pulse {
    0%   { transform: scale(1); opacity: 1; }
    70%  { transform: scale(3); opacity: 0; }
    100% { transform: scale(3); opacity: 0; }
}


/* ── 34. Stat on Dark ────────────────────────────────────────────────────── */

.ni-stat-dark .ni-stat-label {
    color: rgba(255, 255, 255, 0.5);
}

.ni-stat-dark .ni-stat-number {
    color: #1e40af;
}


/* ── 35. Intelligence Hero ─────────────────────────────────────────────── */

/* ── Team post vs Standard post CSS switching ─────────────────────────────
   Ghost adds body.tag-hash-team for all posts tagged #team.
   {{#has tag="hash-team"}} does NOT work for internal tags in Ghost 5.
   We use CSS body-class detection instead.
   ────────────────────────────────────────────────────────────────────── */

/* Non-team posts: hide team hero & article body */
body:not(.tag-hash-team) .ni-team-section {
    display: none !important;
}

/* Team posts: hide standard article layout */
body.tag-hash-team .ni-standard-section {
    display: none !important;
}

/* ── Tool post layout — CSS body-class switching ─────────────────────────
   Ghost adds body.tag-hash-tool for all posts tagged #tool.
   Three-way switching: team / tool / standard — mutually exclusive.
   ────────────────────────────────────────────────────────────────────── */

/* Non-tool posts: hide tool hero & article body */
body:not(.tag-hash-tool) .ni-tool-section {
    display: none !important;
}

/* Tool posts: hide standard & team layouts */
body.tag-hash-tool .ni-standard-section {
    display: none !important;
}
body.tag-hash-tool .ni-team-section {
    display: none !important;
}

/* ── Category badges — CSS body-class switching (tools) ──────────────────
   Ghost adds body.tag-hash-cat-{slug} for all category tags.
   All 6 badges are rendered in DOM; CSS shows only the matching one.
   ────────────────────────────────────────────────────────────────────────── */

/* Hide all category badges by default */
.ni-badge-cat {
    display: none;
}

/* Show matching badge based on body class */
body.tag-hash-cat-communication .ni-badge-communication { display: inline-flex; }
body.tag-hash-cat-project       .ni-badge-project       { display: inline-flex; }
body.tag-hash-cat-content       .ni-badge-content       { display: inline-flex; }
body.tag-hash-cat-social        .ni-badge-social        { display: inline-flex; }
body.tag-hash-cat-files         .ni-badge-files         { display: inline-flex; }
body.tag-hash-cat-design        .ni-badge-design        { display: inline-flex; }

/* ── Department badges — CSS body-class switching ──────────────────────────
   Ghost adds body.tag-hash-dept-{slug} for all dept tags.
   {{#has tag="hash-dept-xxx"}} does NOT work for internal tags in Ghost 5.
   All 6 badges are always rendered in the DOM; CSS shows only the right one.
   ────────────────────────────────────────────────────────────────────────── */

/* Hide all dept badges by default */
.ni-badge-dept {
    display: none;
}

/* Show matching badge based on body class */
body.tag-hash-dept-executive    .ni-badge-executive    { display: inline-flex; }
body.tag-hash-dept-research     .ni-badge-research     { display: inline-flex; }
body.tag-hash-dept-operations   .ni-badge-operations   { display: inline-flex; }
body.tag-hash-dept-legal        .ni-badge-legal        { display: inline-flex; }
body.tag-hash-dept-country-ops  .ni-badge-country-ops  { display: inline-flex; }
body.tag-hash-dept-advisory     .ni-badge-advisory     { display: inline-flex; }

/* ── Team profile map — blinking blue location dot ─────────────────────────
   GPS-style pulsing dot centered on member's city.
   Two staggered ping rings give a continuous radar sweep effect.
   ────────────────────────────────────────────────────────────────────────── */

.ni-team-dot-container {
    background: transparent !important;
    border: none !important;
}

.ni-team-dot {
    position: relative;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Solid blue core dot — small, no border */
.ni-team-dot-core {
    position: relative;
    z-index: 2;
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 50%;
    border: none;
    box-shadow: 0 0 6px rgba(59, 130, 246, 0.5);
}

/* Radiating pulse rings — subtle & infrequent */
.ni-team-dot-ping {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    width: 6px;
    height: 6px;
    background: #3b82f6;
    border-radius: 50%;
    opacity: 0.4;
    animation: ni-team-dot-pulse 5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

.ni-team-dot-ping--delay {
    animation-delay: 2.5s;
}

@keyframes ni-team-dot-pulse {
    0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.4; }
    100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0;   }
}

.ni-intel-hero {
    background: #e8e8e8;
}

/* Glass panel overlay — unified: rgba(0,0,0,0.80) + blur(12px) */
.ni-glass-panel {
    background: rgba(0, 0, 0, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Scan-line overlay for intelligence aesthetic */
.ni-scanlines {
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* Fullscreen map: remove card styling */
.ni-intel-hero .ni-mini-map,
.ni-intel-hero #ni-mini-map {
    border-radius: 0;
    border: none;
    background: transparent;
}


/* ── 35b. Leaflet Map Overrides ───────────────────────────────────────── */

.ni-intel-hero .leaflet-container {
    background: #e8e8e8;
}

/* Light tiles — no dimming needed */
.ni-intel-hero .leaflet-tile-pane {
    opacity: 1;
}

/* Intelligence Crosshair / Reticle */
.ni-reticle-container {
    overflow: visible !important;
    background: none !important;
    border: none !important;
}

.ni-reticle {
    position: relative;
    width: 120px;
    height: 120px;
    opacity: 0;
}

.ni-reticle.ni-reticle-active {
    animation: ni-rt-appear 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes ni-rt-appear {
    from { transform: scale(0.3); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.ni-reticle-svg {
    position: absolute;
    inset: 0;
}

/* Outer rotating dashed ring */
.ni-rt-ring-outer {
    fill: none;
    stroke: rgba(59, 130, 246, 0.25);
    stroke-width: 1;
    stroke-dasharray: 6 4;
    transform-origin: 60px 60px;
    animation: ni-rt-spin 20s linear infinite;
}

/* Inner ring */
.ni-rt-ring-inner {
    fill: none;
    stroke: rgba(59, 130, 246, 0.15);
    stroke-width: 0.75;
}

/* Crosshair lines */
.ni-rt-line {
    stroke: rgba(59, 130, 246, 0.3);
    stroke-width: 0.75;
}

/* Tick marks */
.ni-rt-tick {
    stroke: rgba(59, 130, 246, 0.25);
    stroke-width: 0.75;
}

/* Corner brackets */
.ni-rt-bracket {
    fill: none;
    stroke: rgba(59, 130, 246, 0.4);
    stroke-width: 1.5;
}

/* Center diamond */
.ni-rt-diamond {
    fill: none;
    stroke: #60a5fa;
    stroke-width: 1;
}

/* Center dot */
.ni-rt-dot {
    fill: #60a5fa;
}

@keyframes ni-rt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* Pulsing ring expanding from center */
.ni-reticle-ping {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.25);
    animation: ni-rt-ping 2.5s ease-out infinite;
}

@keyframes ni-rt-ping {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(6); opacity: 0; }
}

/* Country label below crosshair */
.ni-reticle-label {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    white-space: nowrap;
    margin-top: 8px;
    pointer-events: none;
}

.ni-reticle-country {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.8);
    letter-spacing: 0.15em;
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6);
}

.ni-reticle-coords {
    font-family: 'Space Mono', ui-monospace, monospace;
    font-size: 9px;
    color: rgba(0, 0, 0, 0.45);
    letter-spacing: 0.1em;
    margin-top: 2px;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.5);
}


/* ── 35b. Precision Lock (GPS upgrade pulse) ─────────────────────────── */

.ni-reticle-lock .ni-rt-ring-inner {
    animation: ni-rt-lock-pulse 0.75s ease-out 2;
}

@keyframes ni-rt-lock-pulse {
    0%   { stroke: rgba(52, 211, 153, 0.8); stroke-width: 2.5; }
    100% { stroke: rgba(52, 211, 153, 0); stroke-width: 6; }
}


/* ── 36. Typewriter Cursor ─────────────────────────────────────────────── */

.ni-typewriter::after {
    content: '|';
    animation: ni-cursor-blink 0.8s step-end infinite;
    color: #3b82f6;
    font-weight: 300;
    margin-left: 1px;
}

.ni-typewriter.ni-typewriter-done::after {
    opacity: 0;
    animation: none;
}

@keyframes ni-cursor-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}


/* ── 37. Scroll Indicator ──────────────────────────────────────────────── */

@keyframes ni-scroll-bounce {
    0%, 100% { transform: translateY(0); opacity: 0.4; }
    50%      { transform: translateY(6px); opacity: 1; }
}

.ni-scroll-dot {
    animation: ni-scroll-bounce 2s ease-in-out infinite;
}


/* ── 38. Intel Wire — Scrolling News Ticker ──────────────────────────── */

@keyframes ni-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes ni-ticker-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.3; }
}

/* Container */
.ni-ticker {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 48px;
    background: #0a0f1a;
    border-top: 1px solid rgba(16, 185, 129, 0.12);
    border-bottom: 1px solid rgba(16, 185, 129, 0.12);
    overflow: hidden;
    z-index: 10;
}

/* Fixed label — "LIVE FEED" */
.ni-ticker-label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 0 20px;
    height: 100%;
    background: #0a0f1a;
    border-right: 1px solid rgba(16, 185, 129, 0.15);
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    z-index: 2;
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
}

/* Pulsing green dot */
.ni-ticker-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
    animation: ni-ticker-pulse 2s ease-in-out infinite;
}

/* Track — overflow hidden with edge fade */
.ni-ticker-track {
    flex: 1;
    overflow: hidden;
    height: 100%;
    display: flex;
    align-items: center;
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 4%,
        black 96%,
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 4%,
        black 96%,
        transparent 100%
    );
}

/* Scrolling content — 2x duplicated for seamless loop */
.ni-ticker-scroll {
    display: flex;
    align-items: center;
    width: -moz-max-content;
    width: max-content;
    animation: ni-ticker-scroll 45s linear infinite;
}

/* Pause on hover */
.ni-ticker:hover .ni-ticker-scroll {
    animation-play-state: paused;
}

/* Individual ticker item */
.ni-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.ni-ticker-item:hover {
    opacity: 1 !important;
}

/* Title */
.ni-ticker-title {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
}

.ni-ticker-item:hover .ni-ticker-title {
    color: rgba(255, 255, 255, 1);
}

/* Date badge */
.ni-ticker-date {
    font-family: 'Space Mono', monospace;
    font-size: 10px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.25);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ni-ticker-item:hover .ni-ticker-date {
    color: rgba(255, 255, 255, 0.5);
}

/* Diamond separator */
.ni-ticker-sep {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: #10b981;
    transform: rotate(45deg);
    opacity: 0.4;
    flex-shrink: 0;
    margin: 0 4px;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
    .ni-ticker {
        height: 40px;
    }

    .ni-ticker-label {
        display: none;
    }

    .ni-ticker-scroll {
        animation-duration: 35s;
    }

    .ni-ticker-title {
        font-size: 12px;
    }
}

/* ── Reduced motion ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .ni-ticker-scroll {
        animation-duration: 90s; /* Slower, not stopped — ticker is functional */
    }

    .ni-ticker-dot {
        animation: none;
    }
}

/* ── Print ──────────────────────────────────────────────────────────── */
@media print {
    .ni-ticker {
        display: none;
    }
}


/* ── 39. Intelligence Brief Widgets ──────────────────────────────────── */

@keyframes ni-widget-in {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ni-intel-widget {
    min-width: 260px;
    max-width: 420px;
    opacity: 0;
}

.ni-intel-widget.ni-widget-visible {
    animation: ni-widget-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Operations widget is server-rendered → visible immediately */
#ni-ops-widget {
    opacity: 1;
}

/* Weather data rows */
.ni-wx-row {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.15s ease;
}

.ni-wx-row:hover {
    color: rgba(255, 255, 255, 0.6);
}

/* Operations list items */
.ni-ops-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

a.ni-ops-item:hover {
    background: rgba(255, 255, 255, 0.06);
}

/* ── Conflict Map Markers ─────────────────────────── */
.ni-conflict-marker { background: none !important; border: none !important; }

.ni-conflict-dot {
    width: 6px;
    height: 6px;
    background: #ef4444;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px rgba(239, 68, 68, 0.5);
    animation: ni-conflict-pulse 2s ease-in-out infinite;
}

@keyframes ni-conflict-pulse {
    0%, 100% { opacity: 0.7; transform: scale(1); box-shadow: 0 0 4px 1px rgba(239, 68, 68, 0.4); }
    50%      { opacity: 1;   transform: scale(1.4); box-shadow: 0 0 8px 3px rgba(239, 68, 68, 0.6); }
}

.ni-conflict-label {
    position: absolute;
    top: 10px;
    left: 8px;
    white-space: nowrap;
    font-size: 9px;
    font-family: ui-monospace, monospace;
    color: rgba(239, 68, 68, 0.7);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* ── Conflict Map Tooltips ─────────────────────────── */
.ni-conflict-tooltip {
    background: rgba(0, 0, 0, 0.85) !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-family: ui-monospace, monospace !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
.ni-conflict-tooltip .leaflet-tooltip-tip {
    border-top-color: rgba(0, 0, 0, 0.85) !important;
}

/* ── Conflict Widget Items ─────────────────────────── */
.ni-conflict-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 4px 6px;
    margin: -4px -6px;
    border-radius: 6px;
    transition: background 0.2s ease;
    cursor: pointer;
}

.ni-conflict-item:hover {
    background: rgba(239, 68, 68, 0.06);
}

/* Tablet: full width widgets */
@media (max-width: 1023px) {
    .ni-intel-widget {
        max-width: 100%;
        min-width: 0;
    }
}

/* ── Conflict Widget Scrollbar ─────────────────────── */
.ni-scrollbar::-webkit-scrollbar { width: 3px; }
.ni-scrollbar::-webkit-scrollbar-track { background: transparent; }
.ni-scrollbar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
.ni-scrollbar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.2); }

/* Print: hide widgets */
@media print {
    .ni-intel-widget {
        display: none !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ni-intel-widget.ni-widget-visible {
        animation: none;
        opacity: 1;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
   Team Directory Page (page-team.hbs) — map labels, badges, filters
   ══════════════════════════════════════════════════════════════════════════ */

/* Map tooltip label — shown on hover via Leaflet tooltip */
.ni-dir-map-label {
    background: rgba(255, 255, 255, 0.9) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 4px;
    color: rgba(0, 0, 0, 0.7);
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    font-size: 8px;
    padding: 2px 6px !important;
    white-space: nowrap;
    text-align: center;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

/* Hide Leaflet default tooltip arrow */
.ni-dir-map-label::before {
    display: none !important;
}

/* Leaflet map container background — dark to match hero */
#ni-team-dir-map {
    background: #e8e8e8;
}

/* ── Leaflet zoom controls — ensure clickable above hero overlays ────────── */
#ni-team-dir-map .leaflet-control-container {
    position: relative;
    z-index: 15;
}

#ni-team-dir-map .leaflet-control-zoom a {
    pointer-events: auto;
    color: #333;
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.15);
}

#ni-team-dir-map .leaflet-control-zoom a:hover {
    background: rgba(255, 255, 255, 1);
}

/* ── Black & white team member photos (global) ──────────────────────────── */
body.page-team img:not(.leaflet-tile),
.ni-team-section img {
    filter: grayscale(1);
}

/* ── Filter buttons (light theme) ────────────────────────────────────────── */
.ni-filter-btn {
    padding: 4px 14px;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.45);
    background: transparent;
    cursor: pointer;
    transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease;
    line-height: 1.6;
}

.ni-filter-btn:hover {
    border-color: rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, 0.7);
}

.ni-filter-btn.ni-filter-active {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.4);
    color: #3b82f6;
}

/* ── Hidden class for filtered-out cards ─────────────────────────────────── */
.ni-team-card.ni-hidden {
    display: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   Template-level styles (consolidated from inline <style> blocks)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 40. Accordion — Processes & Tools ───────────────────────────────────── */

details.proc-accordion > summary,
details.tool-accordion > summary {
    list-style: none;
    cursor: pointer;
}

details.proc-accordion > summary::-webkit-details-marker,
details.tool-accordion > summary::-webkit-details-marker {
    display: none;
}

details.proc-accordion > summary .chevron-icon,
details.tool-accordion > summary .chevron-icon {
    transition: transform 0.2s ease;
}

details.proc-accordion[open] > summary .chevron-icon,
details.tool-accordion[open] > summary .chevron-icon {
    transform: rotate(180deg);
}

details.proc-accordion > summary:hover {
    background-color: rgb(249 250 251);
}

details.tool-accordion > summary:hover {
    background-color: rgb(255 255 255);
}


/* ── 41. Product Status Badges (page-products.hbs) ───────────────────────── */

.ni-status[data-status="Active"]         { background: rgb(220 252 231); color: rgb(21 128 61); }
.ni-status[data-status="In Development"] { background: rgb(254 243 199); color: rgb(180 83 9); }
.ni-status[data-status="Concept"]        { background: rgb(243 244 246); color: rgb(107 114 128); }



/* ═══════════════════════════════════════════════════════
   TEAM ACTIVITY — Global Positions Map (light theme)
   ═══════════════════════════════════════════════════════ */

/* Body layout */
.ni-activity-body {
    display: flex;
    gap: 1rem;
}

/* Map wrapper — isolation: isolate creates a contained stacking context so
   Leaflet's internal z-indexes (200–700) never bleed above the mega menu (z-index: 100) */
.ni-activity-map-wrap {
    flex: 1;
    position: relative;
    min-height: 420px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    overflow: hidden;
    isolation: isolate;
}

/* CIA intelligence grid overlay — subtle crosshatch over map tiles */
.ni-activity-map-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 500;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 40px 40px;
    border-radius: 0.75rem;
}

.ni-activity-map {
    width: 100%;
    height: 100%;
    min-height: 420px;
    background: #f9fafb;
}

/* light_nolabels tiles are already clean — no desaturation needed */
.ni-activity-map .leaflet-tile-pane {
    filter: none;
}

/* Leaflet control overrides — light theme */
.ni-activity-map .leaflet-control-zoom a {
    background: rgba(255, 255, 255, 0.92) !important;
    color: #6b7280 !important;
    border-color: #e5e7eb !important;
    font-size: 13px !important;
    width: 28px !important;
    height: 28px !important;
    line-height: 28px !important;
}
.ni-activity-map .leaflet-control-zoom a:hover {
    background: #fff !important;
    color: #1e40af !important;
}
.ni-activity-map .leaflet-control-zoom {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
.ni-activity-map .leaflet-control-attribution {
    display: none !important;
}

/* Loading overlay */
.ni-activity-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    background: rgba(249, 250, 251, 0.95);
    z-index: 10;
    font-size: 0.75rem;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    color: #9ca3af;
    letter-spacing: 0.05em;
    transition: opacity 0.5s ease;
}
.ni-activity-loading.ni-hidden {
    opacity: 0;
    pointer-events: none;
}

.ni-activity-spinner {
    width: 24px;
    height: 24px;
    border: 2px solid #e5e7eb;
    border-top-color: #1e40af;
    border-radius: 50%;
    animation: ni-activity-spin 0.8s linear infinite;
}

@keyframes ni-activity-spin {
    to { transform: rotate(360deg); }
}

/* ── Map markers ── */
.ni-activity-marker {
    border-radius: 50%;
    border: none;
    /* No transition on base — Leaflet repositions via CSS transform during pan,
       any transition here causes dots to visually lag/slide instead of moving with the map */
}

/* Current base — sized by JS (7×7px) */
.ni-activity-marker--current {
    width: 7px;
    height: 7px;
}

/* Online (active < 30 min) — green pulsing dot */
.ni-activity-marker--current-online {
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    animation: ni-activity-pulse-green 3s ease-in-out infinite;
}

/* Offline newest — blue pulsing dot */
.ni-activity-marker--current-offline {
    background: #1e40af;
    box-shadow: 0 0 0 0 rgba(30, 64, 175, 0);
    animation: ni-activity-pulse-blue 3s ease-in-out infinite;
}

/* History dots — smaller, faded */
.ni-activity-marker--history {
    width: 4px;
    height: 4px;
    background: rgba(156, 163, 175, 0.5);
}

.ni-activity-marker--history-old {
    width: 3px;
    height: 3px;
    background: rgba(156, 163, 175, 0.3);
}

.ni-activity-marker--history-oldest {
    width: 2px;
    height: 2px;
    background: rgba(156, 163, 175, 0.18);
}

@keyframes ni-activity-pulse-green {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0.22); }
}

@keyframes ni-activity-pulse-blue {
    0%, 100% { box-shadow: 0 0 0 0 rgba(30, 64, 175, 0); }
    50%       { box-shadow: 0 0 0 5px rgba(30, 64, 175, 0.22); }
}

/* ── Tooltip ── */
.ni-activity-tooltip {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.65rem !important;
    font-family: ui-monospace, 'JetBrains Mono', monospace !important;
    font-size: 0.65rem !important;
    color: #374151 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    white-space: normal;
    max-width: 220px;
    min-width: 120px;
    word-break: break-word;
}
.ni-activity-tooltip::before {
    border-top-color: #e5e7eb !important;
}
.ni-activity-tooltip .leaflet-tooltip-tip {
    display: none;
}

.ni-activity-tooltip-photo {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    border: 1.5px solid #e5e7eb;
    vertical-align: middle;
    margin-right: 0.4rem;
}

.ni-activity-tooltip-name {
    color: #111827;
    font-weight: 600;
}

.ni-activity-tooltip-role {
    color: #9ca3af;
    font-size: 0.55rem;
    display: block;
    margin-top: 1px;
}

.ni-activity-tooltip-location {
    color: #6b7280;
    display: block;
    margin-top: 3px;
}

.ni-activity-tooltip-time {
    color: #1e40af;
    font-size: 0.55rem;
    display: block;
    margin-top: 2px;
    opacity: 0.7;
}

/* Flight path arcs — subtle red dashed lines */
.ni-flight-path {
    stroke: rgba(220, 38, 38, 0.8);
    stroke-width: 1.5;
    stroke-dasharray: 6 4;
    fill: none;
    stroke-linecap: round;
}

/* ── Sidebar ── */
.ni-activity-sidebar {
    width: 260px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    max-height: 420px;
    overflow: hidden;
}

.ni-activity-sidebar-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 0.85rem;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.ni-activity-sidebar-title {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #9ca3af;
    text-transform: uppercase;
}

/* Search */
.ni-activity-search-wrap {
    position: relative;
    padding: 0.35rem 0.65rem;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}
.ni-activity-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.7rem;
    color: #9ca3af;
    pointer-events: none;
}
.ni-activity-search {
    width: 100%;
    padding: 0.3rem 0.5rem 0.3rem 1.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.375rem;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #374151;
    background: #f9fafb;
    outline: none;
    transition: border-color 0.15s ease;
}
.ni-activity-search:focus {
    border-color: #1e40af;
    background: #fff;
}
.ni-activity-search::-moz-placeholder {
    color: #d1d5db;
}
.ni-activity-search::placeholder {
    color: #d1d5db;
}

.ni-activity-feed {
    flex: 1;
    overflow-y: auto;
    padding: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #e5e7eb transparent;
}
.ni-activity-feed::-webkit-scrollbar {
    width: 3px;
}
.ni-activity-feed::-webkit-scrollbar-thumb {
    background: #e5e7eb;
    border-radius: 2px;
}

/* Feed items */
.ni-activity-feed-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
    transition: background 0.15s ease;
    cursor: pointer;
}
.ni-activity-feed-item:hover {
    background: #f9fafb;
}

.ni-activity-feed-photo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    -o-object-fit: cover;
       object-fit: cover;
    flex-shrink: 0;
    border: 1.5px solid #f3f4f6;
}
.ni-activity-feed-item--active .ni-activity-feed-photo {
    border-color: rgba(34, 197, 94, 0.4);
}

.ni-activity-feed-info {
    flex: 1;
    min-width: 0;
}

.ni-activity-feed-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ni-activity-feed-item--active .ni-activity-feed-name {
    color: #16a34a;
}

.ni-activity-feed-detail {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: #9ca3af;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ni-activity-feed-status {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #d1d5db;
}
.ni-activity-feed-item--active .ni-activity-feed-status {
    background: #22c55e;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
}

/* Signal lost fallback */
.ni-activity-signal-lost {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(249, 250, 251, 0.95);
    z-index: 10;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: #ef4444;
    letter-spacing: 0.08em;
}

/* ── Responsive ── */
@media (max-width: 1023px) {
    .ni-activity-body {
        flex-direction: column;
    }
    .ni-activity-sidebar {
        width: 100%;
        max-height: 200px;
    }
    .ni-activity-map-wrap {
        min-height: 350px;
    }
    .ni-activity-map {
        min-height: 350px;
    }
}

@media (max-width: 639px) {
    .ni-activity-map-wrap {
        min-height: 260px;
    }
    .ni-activity-map {
        min-height: 260px;
    }
}


/* ── Segment Dossier Hero — 3D Topo Parallax ─────────────────────────── */

.ni-segment-hero {
    background: #0a0a0a;
    color: #e0e0e0;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -92px;
}

@media (max-width: 1024px) {
    .ni-segment-hero {
        margin-top: -78px;
    }
}

@media (max-width: 640px) {
    .ni-segment-hero {
        margin-top: -66px;
    }
}

/* 3D Viewport */
.ni-seg-viewport {
    position: absolute;
    inset: 0;
    perspective: 2000px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* 3D Canvas — entrance animation */
.ni-seg-canvas {
    position: relative;
    width: 140%;
    height: 140%;
    transform-style: preserve-3d;
    transform: rotateX(90deg) rotateZ(0deg) scale(0.8);
    opacity: 0;
    transition: transform 2.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 2s cubic-bezier(0.16, 1, 0.3, 1);
}

.ni-seg-canvas.active {
    transform: rotateX(55deg) rotateZ(-25deg) scale(1);
    opacity: 1;
}

/* Layer images */
.ni-seg-layer {
    position: absolute;
    inset: 0;
    border: 1px solid rgba(224, 224, 224, 0.06);
    background-size: cover;
    background-position: center;
    transition: transform 0.15s ease-out;
    will-change: transform;
}

.ni-seg-layer--1 {
    filter: grayscale(1) contrast(1.2) brightness(0.5);
}

.ni-seg-layer--2 {
    filter: grayscale(1) contrast(1.1) brightness(0.7);
    opacity: 0.6;
    mix-blend-mode: screen;
}

.ni-seg-layer--3 {
    filter: grayscale(1) contrast(1.3) brightness(0.8);
    opacity: 0.4;
    mix-blend-mode: overlay;
}

/* Contour lines overlay */
.ni-seg-contours {
    position: absolute;
    width: 200%;
    height: 200%;
    top: -50%;
    left: -50%;
    background-image: repeating-radial-gradient(
        circle at 50% 50%,
        transparent 0,
        transparent 40px,
        rgba(var(--seg-accent-rgb), 0.06) 41px,
        transparent 42px
    );
    transform: translateZ(120px);
    pointer-events: none;
}

/* Film grain overlay */
.ni-seg-grain {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    pointer-events: none;
    z-index: 5;
    mix-blend-mode: overlay;
}

/* Interface grid overlay */
.ni-seg-grid {
    position: relative;
    z-index: 10;
    min-height: 100vh;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr auto;
    padding: 7rem 2rem 2.5rem;
    gap: 1.5rem;
}

/* Top-left label */
.ni-seg-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
}

/* Top-right metadata */
.ni-seg-meta {
    text-align: right;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    line-height: 1.8;
    color: var(--seg-accent);
    letter-spacing: 0.05em;
}

/* Giant title */
.ni-seg-title {
    grid-column: 1 / -1;
    align-self: center;
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(3rem, 10vw, 9rem);
    font-weight: 800;
    line-height: 0.85;
    letter-spacing: -0.04em;
    mix-blend-mode: difference;
    color: #e0e0e0;
    min-height: 1.8em;
}

.ni-seg-cursor {
    color: var(--seg-accent);
    font-weight: 400;
}

.ni-seg-cursor.blinking {
    animation: ni-seg-blink 0.7s step-end infinite;
}

@keyframes ni-seg-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Bottom row */
.ni-seg-bottom {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 2rem;
}

/* Tagline */
.ni-seg-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.6;
    max-width: 30ch;
    opacity: 0.6;
}

/* CTA button with clip-path */
.ni-seg-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 85% 100%, 0 100%);
    background: var(--seg-accent);
    color: #0a0a0a;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    text-decoration: none;
    padding: 0.85rem 2rem 0.85rem 1.5rem;
    transition: filter 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}

.ni-seg-cta:hover {
    filter: brightness(1.2);
    transform: translateY(-3px);
}

/* Scroll hint */
.ni-seg-scroll-hint {
    position: absolute;
    bottom: 1.5rem;
    left: 50%;
    width: 1px;
    height: 50px;
    background: linear-gradient(to bottom, #e0e0e0, transparent);
    animation: ni-seg-flow 2s infinite ease-in-out;
    z-index: 10;
}

@keyframes ni-seg-flow {
    0%, 100% { transform: scaleY(0); transform-origin: top; }
    50%      { transform: scaleY(1); transform-origin: top; }
    51%      { transform: scaleY(1); transform-origin: bottom; }
}

/* Back link (inside hero) */
.ni-seg-back {
    position: absolute;
    top: 6.5rem;
    left: 2rem;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: rgba(224, 224, 224, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ni-seg-back:hover {
    color: var(--seg-accent);
}

/* ── Segment Hero — Mobile Responsive ─────────────────────────────────── */

@media (max-width: 768px) {
    .ni-seg-grid {
        padding: 7rem 1.25rem 2rem;
        grid-template-columns: 1fr;
        grid-template-rows: auto auto 1fr auto;
        gap: 1rem;
    }

    .ni-seg-meta {
        text-align: left;
        font-size: 0.6rem;
    }

    .ni-seg-title {
        font-size: clamp(2.2rem, 14vw, 4.5rem);
        grid-column: 1;
    }

    .ni-seg-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.5rem;
    }

    .ni-seg-canvas {
        transform: rotateX(90deg) rotateZ(0deg) scale(0.8);
    }

    .ni-seg-canvas.active {
        transform: rotateX(45deg) rotateZ(-15deg) scale(1);
    }

    .ni-seg-back {
        left: 1.25rem;
    }
}

@media (max-width: 480px) {
    .ni-seg-meta {
        display: none;
    }

    .ni-seg-title {
        font-size: clamp(2rem, 16vw, 3.5rem);
    }

    .ni-seg-canvas.active {
        transform: rotateX(35deg) rotateZ(-10deg) scale(1.1);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Container Scroll Animation (Product Heroes)
   ═══════════════════════════════════════════════════════════════════════════ */

.ni-scroll-hero {
    min-height: 55rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 1rem;
}
@media (min-width: 768px) {
    .ni-scroll-hero {
        min-height: 70rem;
        padding: 5rem;
    }
}
.ni-scroll-hero-inner {
    padding: 2.5rem 0;
    width: 100%;
    position: relative;
    perspective: 1000px;
}
@media (min-width: 768px) {
    .ni-scroll-hero-inner {
        padding: 6rem 0;
    }
}

/* Header (title area that translates up on scroll) */
.ni-scroll-header {
    max-width: 64rem;
    margin: 0 auto;
    text-align: center;
    will-change: transform;
}

/* Card (the 3D-rotating device frame) */
.ni-scroll-card {
    max-width: 64rem;
    margin: -3rem auto 0;
    width: 100%;
    height: 30rem;
    border: 4px solid #4a4a4a;
    padding: 0.5rem;
    background: #1a1a1a;
    border-radius: 1.5rem;
    will-change: transform;
    box-shadow:
        0 0 #0000004d,
        0 9px 20px #0000004a,
        0 37px 37px #00000042,
        0 84px 50px #00000026,
        0 149px 60px #0000000a,
        0 233px 65px #00000003;
}
@media (min-width: 768px) {
    .ni-scroll-card {
        height: 40rem;
        padding: 1.5rem;
        border-radius: 2rem;
    }
}

.ni-scroll-card-inner {
    height: 100%;
    width: 100%;
    overflow: hidden;
    border-radius: 1rem;
    background: #f3f4f6;
    position: relative;
}
@media (min-width: 768px) {
    .ni-scroll-card-inner {
        padding: 1rem;
    }
}

.ni-scroll-card-inner img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: left top;
       object-position: left top;
    border-radius: 0.75rem;
}

/* Product mockup overlays inside the card */
.ni-scroll-mockup {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #0f172a 100%);
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

.ni-scroll-mockup-bar {
    height: 2.5rem;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    padding: 0 1rem;
    gap: 0.5rem;
    flex-shrink: 0;
}
.ni-scroll-mockup-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.ni-scroll-mockup-dot:nth-child(1) { background: #ef4444; }
.ni-scroll-mockup-dot:nth-child(2) { background: #eab308; }
.ni-scroll-mockup-dot:nth-child(3) { background: #22c55e; }
.ni-scroll-mockup-url {
    margin-left: 0.75rem;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.05em;
}

.ni-scroll-mockup-body {
    flex: 1;
    padding: 1.5rem;
    display: grid;
    gap: 1rem;
    overflow: hidden;
}
@media (min-width: 768px) {
    .ni-scroll-mockup-body {
        padding: 2rem;
        grid-template-columns: 1fr 1fr;
        gap: 1.5rem;
    }
}

.ni-scroll-mockup-widget {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.75rem;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.ni-scroll-mockup-widget-title {
    font-family: ui-monospace, 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.3);
    text-transform: uppercase;
    letter-spacing: 0.15em;
}
.ni-scroll-mockup-widget-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    font-family: ui-monospace, 'JetBrains Mono', monospace;
}
.ni-scroll-mockup-widget-bar {
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
    margin-top: auto;
}
.ni-scroll-mockup-widget-bar-fill {
    height: 100%;
    border-radius: 2px;
    background: linear-gradient(90deg, #3b82f6, #6366f1);
}

/* Clarity-specific green accent */
.ni-scroll-mockup--clarity .ni-scroll-mockup-widget-bar-fill {
    background: linear-gradient(90deg, #22c55e, #10b981);
}
.ni-scroll-mockup--clarity {
    background: linear-gradient(135deg, #0f172a 0%, #052e16 50%, #0f172a 100%);
}

/* Print: hide hero entirely */
@media print {
    .ni-segment-hero {
        display: none !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Success Stories Gallery Carousel
   Adapted from Gallery4 (React/shadcn) → vanilla CSS scroll-snap
   ═══════════════════════════════════════════════════════════════════════════ */

.ni-gallery {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ni-gallery-track {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 20px;
    padding: 0 1rem 1rem;
}

.ni-gallery-track::-webkit-scrollbar {
    display: none;
}

/* Individual card */
.ni-gallery-card {
    flex: 0 0 320px;
    scroll-snap-align: start;
    border-radius: 0.75rem;
    overflow: hidden;
    position: relative;
    min-height: 27rem;
    text-decoration: none;
    display: block;
}

@media (min-width: 1024px) {
    .ni-gallery-card {
        flex: 0 0 360px;
    }
}

/* Card image */
.ni-gallery-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.ni-gallery-card:hover img {
    transform: scale(1.05);
}

/* Gradient overlay */
.ni-gallery-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(30, 64, 175, 0) 0%,
        rgba(30, 64, 175, 0.35) 50%,
        rgba(30, 64, 175, 0.85) 100%
    );
    mix-blend-mode: multiply;
}

/* Card content */
.ni-gallery-card-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.5rem;
    color: #fff;
}

@media (min-width: 768px) {
    .ni-gallery-card-content {
        padding: 2rem;
    }
}

.ni-gallery-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    border-radius: 4px;
    width: -moz-fit-content;
    width: fit-content;
}

.ni-gallery-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
    margin-bottom: 0.75rem;
    color: #fff;
}

.ni-gallery-card-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.ni-gallery-card-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.ni-gallery-card-cta i {
    transition: transform 0.3s ease;
}

.ni-gallery-card:hover .ni-gallery-card-cta i {
    transform: translateX(4px);
}

/* Arrow buttons */
.ni-gallery-arrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .ni-gallery-arrow {
        display: flex;
    }
}

.ni-gallery-arrow:hover:not(:disabled) {
    background: #f3f4f6;
    border-color: #d1d5db;
}

.ni-gallery-arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Dot indicators */
.ni-gallery-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.ni-gallery-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    border: none;
    background: rgba(30, 64, 175, 0.2);
    cursor: pointer;
    padding: 0;
    transition: background 0.2s ease;
}

.ni-gallery-dot.active {
    background: #1e40af;
}

/* 2xl offset to center content nicely */
@media (min-width: 1536px) {
    .ni-gallery-track {
        padding-left: max(8rem, calc(50vw - 700px));
        padding-right: max(0rem, calc(50vw - 700px));
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Logo Cloud / Trust Bar — Infinite CSS scroll
   ═══════════════════════════════════════════════════════════════════════════ */

.ni-logo-scroll {
    position: relative;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.ni-logo-track {
    display: flex;
    gap: 3rem;
    width: -moz-max-content;
    width: max-content;
    animation: ni-logo-slide 40s linear infinite;
}

.ni-logo-track:hover {
    animation-play-state: paused;
}

.ni-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.5rem;
    min-width: 100px;
}

.ni-logo-item img {
    max-height: 2rem;
    max-width: 120px;
    -o-object-fit: contain;
       object-fit: contain;
    filter: grayscale(100%) brightness(0.7);
    opacity: 0.5;
    transition: all 0.3s ease;
}

.ni-logo-item img:hover {
    filter: grayscale(0%) brightness(1);
    opacity: 1;
}

@keyframes ni-logo-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}


/* ═══════════════════════════════════════════════════════════════════════════
   Testimonial Quote Cards
   ═══════════════════════════════════════════════════════════════════════════ */

.ni-quote-card {
    flex: 0 0 340px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ni-quote-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.ni-quote-card blockquote {
    flex: 1;
}

.ni-quote-card blockquote p {
    margin: 0;
    font-style: italic;
    color: #374151;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Story Filter Transitions
   ═══════════════════════════════════════════════════════════════════════════ */

.ni-story-card {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.ni-story-hidden {
    display: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   Rotating Metric Animation (Hero tagline)
   ═══════════════════════════════════════════════════════════════════════════ */

#ni-ss-rotating-metric {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

/* ── Performance: CSS Containment ────────────────────────────────────────── */

.ni-mesh-gradient { contain: layout style paint; }
.ni-hero-light   { contain: layout style paint; }

/* ── Performance: Reduced Motion ─────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .ni-mesh-blob,
    .ni-hero-blob,
    .ni-team-dot-pulse,
    .ni-team-dot-ping,
    .ni-rt-spin,
    .ni-rt-ping,
    .ni-reticle-ping,
    .ni-rt-ring-outer,
    .ni-cursor-blink,
    .ni-scroll-bounce,
    .ni-ticker-pulse,
    .ni-ticker-scroll,
    .ni-conflict-pulse,
    .ni-activity-spin,
    .ni-activity-pulse-green,
    .ni-activity-pulse-blue,
    .ni-seg-blink,
    .ni-seg-flow,
    .ni-logo-slide,
    .ni-logo-track,
    .ni-spinner,
    .ni-donut {
        animation: none !important;
    }

    .ni-mesh-blob,
    .ni-hero-blob {
        filter: none !important;
        opacity: 0.7;
    }

    .ni-card:hover,
    .ni-mesh-blob,
    .ni-hero-blob,
    .ni-activity-item,
    .ni-spinner,
    .ni-loader,
    .ni-fade-in,
    .ni-slide-in,
    .ni-pop-in,
    .ni-glow-in {
        will-change: auto !important;
    }

    .ni-card:hover {
        transform: none !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    }
}

/* ── Performance: No-GPU Software Rendering Fallback ───────────────────── */

.no-gpu .ni-mesh-gradient {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
}

.no-gpu .ni-mesh-blob,
.no-gpu .ni-hero-blob {
    animation: none !important;
    filter: none !important;
    opacity: 0.5;
}

.no-gpu .ni-ticker-scroll,
.no-gpu .ni-logo-track,
.no-gpu .ni-logo-slide {
    animation: none !important;
}

.no-gpu .ni-card:hover {
    will-change: auto !important;
}
/*# sourceMappingURL=slingshot.css.map */