/* ==========================================================================
   WAREHOUSE BRIDGE - UNIFIED DESIGN SYSTEM
   Version: 1.0.0
   Description: Foundation design system combining modern industrial aesthetics
   with clean, professional warehouse operations branding.

   CRITICAL POSITIONING: Warehouse Bridge is NOT a WMS. We are the visibility
   and enhancement layer that sits ON TOP of WMS systems. We enhance, not replace.
   ========================================================================== */

/* ==========================================================================
   1. CSS CUSTOM PROPERTIES (DESIGN TOKENS)
   ========================================================================== */

:root {
    /* --------------------------------------------
       COLOR PALETTE
       -------------------------------------------- */

    /* Background Colors */
    --wb-bg: #f8f9fa;
    --wb-bg-white: #ffffff;
    --wb-bg-alt: #f1f3f5;

    /* Slate Scale (Primary Dark Palette) */
    --wb-slate-dark: #1e2530;
    --wb-slate-mid: #2a3441;
    --wb-slate-light: #3d4a5c;
    --wb-slate-muted: #4d5a6d;

    /* Text Colors */
    --wb-text-primary: #1e2530;
    --wb-text-secondary: #5c6b7f;
    --wb-text-muted: #8694a5;
    --wb-text-light: rgba(255, 255, 255, 0.7);
    --wb-text-white: #ffffff;

    /* WCAG-Compliant Text on Dark Backgrounds */
    --wb-text-on-dark: rgba(255, 255, 255, 0.87);           /* 7:1 - AAA */
    --wb-text-on-dark-secondary: rgba(255, 255, 255, 0.74); /* 5:1 - AA */
    --wb-text-on-dark-muted: rgba(255, 255, 255, 0.60);     /* 4.5:1 - AA min */

    /* Accent Colors — Deep Navy (Primary Brand, locked 2026-05-19) */
    /* The real WB logo lives on this navy. The favicon already uses it. */
    --wb-accent: #1a183c;            /* Deep navy — primary brand */
    --wb-accent-deep: #131136;       /* Darker variant for hover / edges */
    --wb-accent-light: #2a2654;      /* Lighter navy for hover backgrounds */
    --wb-accent-highlight: #4a90a4;  /* Former primary — demoted to secondary highlight tone */
    --wb-accent-dark: #131136;       /* Alias for --wb-accent-deep (backwards compat) */
    --wb-accent-on-dark: #ffffff;    /* White lockup colour for navy surfaces */

    /* Functional Colors */
    --wb-success: #34a853;
    --wb-warning: #f9ab00;
    --wb-error: #ea4335;
    --wb-info: #4285f4;

    /* Border Colors */
    --wb-border: #e1e5eb;
    --wb-border-light: rgba(255, 255, 255, 0.1);
    --wb-border-dark: var(--wb-slate-light);

    /* --------------------------------------------
       TYPOGRAPHY
       -------------------------------------------- */

    /* Font Families — locked 2026-05-19. Binary weight discipline (400 / 600 only). */
    --wb-font-display: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --wb-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --wb-font-primary: 'Inter Tight', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; /* Alias for display */
    --wb-font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

    /* Font Sizes (Fluid Typography) */
    --wb-text-xs: 0.6875rem;   /* 11px */
    --wb-text-sm: 0.8125rem;   /* 13px */
    --wb-text-base: 0.9375rem; /* 15px */
    --wb-text-md: 1.0625rem;   /* 17px */
    --wb-text-lg: 1.125rem;    /* 18px */
    --wb-text-xl: 1.25rem;     /* 20px */
    --wb-text-2xl: 1.5rem;     /* 24px */
    --wb-text-3xl: 2rem;       /* 32px */
    --wb-text-4xl: 2.25rem;    /* 36px */
    --wb-text-5xl: 2.5rem;     /* 40px */
    --wb-text-6xl: 3rem;       /* 48px */
    --wb-text-hero: clamp(2.5rem, 5vw, 3.75rem);

    /* Font Weights */
    --wb-weight-normal: 400;
    --wb-weight-medium: 500;
    --wb-weight-semibold: 600;
    --wb-weight-bold: 700;
    --wb-weight-extrabold: 800;

    /* Line Heights */
    --wb-leading-none: 1;
    --wb-leading-tight: 1.1;
    --wb-leading-snug: 1.25;
    --wb-leading-normal: 1.6;
    --wb-leading-relaxed: 1.7;

    /* Letter Spacing */
    --wb-tracking-tighter: -0.02em;
    --wb-tracking-tight: -0.01em;
    --wb-tracking-normal: 0;
    --wb-tracking-wide: 0.02em;
    --wb-tracking-wider: 0.04em;
    --wb-tracking-widest: 0.08em;

    /* Display Scale — locked 2026-05-19. Inter Tight 600, tight leading. */
    /* Spec values: desktop / tablet / mobile. clamp() gives fluid intermediate sizing. */
    --wb-display-xxl: clamp(3.5rem, 4vw + 1.5rem, 6rem);          /* H1: 56→96px */
    --wb-display-xl:  clamp(2.5rem, 2vw + 1.5rem, 4rem);          /* H2: 40→64px */
    --wb-display-lg:  clamp(2rem, 1vw + 1.5rem, 2.5rem);          /* H3: 32→40px */
    --wb-display-md:  clamp(1.5rem, 0.5vw + 1.25rem, 1.75rem);    /* Card title: 24→28px */
    --wb-body-lg:     clamp(1.125rem, 0.25vw + 1rem, 1.25rem);    /* Lede: 18→20px */
    --wb-body-md:     clamp(1rem, 0.125vw + 0.95rem, 1.0625rem);  /* Body: 16→17px */
    --wb-body-sm:     0.875rem;                                   /* Caption: 14px */
    --wb-eyebrow:     0.75rem;                                    /* Mono eyebrow: 12px */

    /* Display leading + tracking */
    --wb-leading-display: 1.05;
    --wb-leading-h2:      1.1;
    --wb-leading-h3:      1.15;
    --wb-tracking-display: -0.02em;
    --wb-tracking-h2:      -0.015em;

    /* --------------------------------------------
       SPACING
       -------------------------------------------- */
    --wb-space-1: 0.25rem;  /* 4px */
    --wb-space-2: 0.5rem;   /* 8px */
    --wb-space-3: 0.75rem;  /* 12px */
    --wb-space-4: 1rem;     /* 16px */
    --wb-space-5: 1.25rem;  /* 20px */
    --wb-space-6: 1.5rem;   /* 24px */
    --wb-space-8: 2rem;     /* 32px */
    --wb-space-10: 2.5rem;  /* 40px */
    --wb-space-12: 3rem;    /* 48px */
    --wb-space-16: 4rem;    /* 64px */
    --wb-space-20: 5rem;    /* 80px */
    --wb-space-24: 6rem;    /* 96px */
    --wb-space-32: 8rem;    /* 128px */

    /* --------------------------------------------
       LAYOUT
       -------------------------------------------- */
    --wb-container-max: 1200px;
    --wb-container-padding: 32px;
    --wb-nav-height: 68px;
    --wb-nav-bg: #1a1f30;        /* Warmer dark slate, harmonises with navy logo. Locked 2026-05-19. */

    /* --------------------------------------------
       EFFECTS
       -------------------------------------------- */

    /* Shadows */
    --wb-shadow-sm: 0 2px 4px rgba(26, 24, 60, 0.08);
    --wb-shadow-md: 0 4px 16px rgba(26, 24, 60, 0.12);
    --wb-shadow-lg: 0 10px 30px rgba(26, 24, 60, 0.30);
    --wb-shadow-xl: 0 20px 40px rgba(26, 24, 60, 0.25);
    --wb-shadow-card: 0 24px 48px rgba(26, 24, 60, 0.25);

    /* Transitions */
    --wb-transition-fast: 0.15s ease;
    --wb-transition-base: 0.2s ease;
    --wb-transition-smooth: 0.3s ease;
    --wb-transition-slow: 0.35s cubic-bezier(0.16, 1, 0.3, 1);

    /* Border Radius */
    --wb-radius-none: 0;
    --wb-radius-sm: 2px;
    --wb-radius-md: 4px;
    --wb-radius-lg: 8px;
    --wb-radius-xl: 12px;
    --wb-radius-full: 9999px;
}

/* ==========================================================================
   1b. BOOTSTRAP OVERRIDES
   Maps Bootstrap classes to Warehouse Bridge brand colors
   ========================================================================== */

/* Override Bootstrap primary color */
.btn-primary {
    --bs-btn-bg: var(--wb-accent);
    --bs-btn-border-color: var(--wb-accent);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-bg: var(--wb-accent-light);
    --bs-btn-hover-border-color: var(--wb-accent-light);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--wb-accent-dark);
    --bs-btn-active-border-color: var(--wb-accent-dark);
    --bs-btn-active-color: #ffffff;
    background-color: var(--wb-accent);
    border-color: var(--wb-accent);
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
    background-color: var(--wb-accent-light);
    border-color: var(--wb-accent-light);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(26, 24, 60, 0.35);
}

.btn-outline-primary {
    --bs-btn-color: var(--wb-accent);
    --bs-btn-border-color: var(--wb-accent);
    --bs-btn-hover-bg: var(--wb-accent);
    --bs-btn-hover-border-color: var(--wb-accent);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-bg: var(--wb-accent-dark);
    --bs-btn-active-color: #ffffff;
    color: var(--wb-accent);
    border-color: var(--wb-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary:active {
    background-color: var(--wb-accent);
    border-color: var(--wb-accent);
    color: #ffffff;
}

/* Text and background primary colors */
.text-primary {
    color: var(--wb-accent) !important;
}

.bg-primary {
    background-color: var(--wb-accent) !important;
}

/* Secondary background - use light gray instead of Bootstrap blue-gray */
.bg-secondary {
    background-color: var(--wb-bg-alt) !important;
}

/* Table dark header */
.table-dark {
    --bs-table-bg: var(--wb-slate-dark);
    --bs-table-color: var(--wb-text-white);
    background-color: var(--wb-slate-dark);
}

/* Card shadows */
.card {
    border: 1px solid var(--wb-border);
    box-shadow: var(--wb-shadow-sm);
}

.card:hover {
    box-shadow: var(--wb-shadow-md);
}

/* Shadow utility */
.shadow-primary {
    box-shadow: 0 4px 16px rgba(26, 24, 60, 0.25) !important;
}

/* ==========================================================================
   CRITICAL BOOTSTRAP CONTRAST FIXES
   Fixes blue-on-blue contrast issues throughout the site
   ========================================================================== */

/* Badge contrast fix: text-primary on bg-primary bg-opacity-* is unreadable */
/* Use dark text instead for proper contrast on light blue backgrounds */
.badge.bg-primary.bg-opacity-10.text-primary,
.badge.bg-primary.bg-opacity-20.text-primary {
    color: var(--wb-slate-dark) !important;
}

/* Icon circle contrast fix: same pattern in timeline circles etc. */
.bg-primary.bg-opacity-10 .text-primary,
.bg-primary.bg-opacity-10.text-primary,
.bg-primary.bg-opacity-20 .text-primary,
.bg-primary.bg-opacity-20.text-primary,
[class*="bg-primary"][class*="bg-opacity"] .text-primary,
[class*="bg-primary"][class*="bg-opacity"].text-primary {
    color: var(--wb-accent-dark) !important;
}

/* Standalone text-primary in circles with bg-primary bg-opacity */
div.bg-primary.bg-opacity-10 > span.text-primary,
div.bg-primary.bg-opacity-20 > span.text-primary {
    color: var(--wb-slate-dark) !important;
}

/* Contact/About page icon visibility fix */
/* Icons inside light blue circles need to be visible */
.bg-primary.bg-opacity-10 i.text-primary,
.bg-primary.bg-opacity-10 i,
.bg-primary.bg-opacity-20 i.text-primary {
    color: var(--wb-accent-dark) !important;
}

/* Fix for rounded-circle icon containers */
.rounded-circle.bg-primary.bg-opacity-10 i,
.rounded-circle.bg-primary.bg-opacity-20 i {
    color: var(--wb-accent-dark) !important;
}

/* Ensure proper contrast on bg-dark sections with text-primary */
.bg-dark .text-primary,
[data-bs-theme="dark"] .text-primary {
    color: var(--wb-accent-light) !important;
}

/* Alternative fix: Use accent colors directly for icon containers */
.wb-icon-circle {
    width: 48px;
    height: 48px;
    background: var(--wb-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-icon-circle i {
    color: var(--wb-text-white);
    font-size: 1.25rem;
}

.wb-icon-circle--light {
    background: rgba(26, 24, 60, 0.15);
}

.wb-icon-circle--light i {
    color: var(--wb-accent-dark);
}

/* Hero badge fix - ensure proper contrast on any hero section */
section.bg-dark .badge.bg-primary.bg-opacity-10,
section.bg-dark .badge.bg-primary.bg-opacity-20,
section[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-10,
section[data-bs-theme="dark"] .badge.bg-primary.bg-opacity-20 {
    background: rgba(26, 24, 60, 0.2) !important;
    color: var(--wb-text-white) !important;
    border: 1px solid rgba(26, 24, 60, 0.4);
}

/* Fix display headings to use Archivo font */
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--wb-font-primary);
    font-weight: var(--wb-weight-extrabold);
    letter-spacing: var(--wb-tracking-tighter);
}

/* ==========================================================================
   2. RESET & BASE STYLES
   ========================================================================== */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-base);
    font-weight: var(--wb-weight-normal);
    line-height: var(--wb-leading-normal);
    color: var(--wb-text-primary);
    background-color: var(--wb-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==========================================================================
   3. GRID PATTERN OVERLAY (From Theme 19)
   ========================================================================== */

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Dot grid pattern - technical/aerospace aesthetic (like star maps) */
    background-image: radial-gradient(circle, rgba(26, 24, 60, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}

.no-grid-overlay::before {
    display: none;
}

/* ==========================================================================
   4. LAYOUT UTILITIES
   ========================================================================== */

.wb-container {
    max-width: var(--wb-container-max);
    margin: 0 auto;
    padding: 0 var(--wb-container-padding);
}

.wb-section {
    position: relative;
    z-index: 1;
    padding: var(--wb-space-24) 0;
}

.wb-section--tight {
    padding: var(--wb-space-16) 0;
}

.wb-section--loose {
    padding: var(--wb-space-32) 0;
}

.wb-section--dark {
    background-color: var(--wb-slate-dark);
    color: var(--wb-text-white);
}

.wb-section--white {
    background-color: var(--wb-bg-white);
}

.wb-section--alt {
    background-color: var(--wb-bg-alt);
}

/* ==========================================================================
   5. TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6,
.wb-h1, .wb-h2, .wb-h3, .wb-h4, .wb-h5, .wb-h6 {
    font-weight: var(--wb-weight-extrabold);
    line-height: var(--wb-leading-tight);
    letter-spacing: var(--wb-tracking-tighter);
    text-transform: uppercase;
    margin-bottom: var(--wb-space-4);
}

h1, .wb-h1 { font-size: var(--wb-text-hero); }
h2, .wb-h2 { font-size: var(--wb-text-4xl); }
h3, .wb-h3 { font-size: var(--wb-text-2xl); }
h4, .wb-h4 { font-size: var(--wb-text-lg); letter-spacing: var(--wb-tracking-wide); }
h5, .wb-h5 { font-size: var(--wb-text-base); letter-spacing: var(--wb-tracking-wider); }
h6, .wb-h6 { font-size: var(--wb-text-sm); letter-spacing: var(--wb-tracking-widest); }

.wb-text-accent { color: var(--wb-accent); }
.wb-text-muted { color: var(--wb-text-muted); }
.wb-text-secondary { color: var(--wb-text-secondary); }

.wb-lead {
    font-size: var(--wb-text-lg);
    color: var(--wb-text-secondary);
    line-height: var(--wb-leading-relaxed);
    max-width: 480px;
}

.wb-overline {
    display: inline-block;
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-widest);
    color: var(--wb-text-muted);
    margin-bottom: var(--wb-space-2);
}

/* ==========================================================================
   6. BUTTONS
   ========================================================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wb-space-2);
    padding: 12px 24px;
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--wb-transition-slow);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: 2px solid var(--wb-accent);
    outline-offset: 2px;
}

/* Primary Button (Accent) */
.btn-accent {
    background-color: var(--wb-accent);
    color: var(--wb-text-white);
    border-color: var(--wb-accent);
}

.btn-accent:hover,
.btn-accent:focus,
.btn-accent:focus-visible,
.btn-accent:active {
    background-color: var(--wb-accent-light);
    border-color: var(--wb-accent-light);
    color: var(--wb-text-white);
    transform: translateY(-3px);
    box-shadow: var(--wb-shadow-lg);
}

/* Steel Button (Alternative Primary) */
.btn-steel {
    background-color: var(--wb-accent);
    color: var(--wb-text-white);
    border-color: var(--wb-accent);
}

.btn-steel:hover,
.btn-steel:focus,
.btn-steel:focus-visible,
.btn-steel:active {
    background-color: var(--wb-accent-light);
    border-color: var(--wb-accent-light);
    color: var(--wb-text-white);
    transform: translateY(-2px);
    box-shadow: var(--wb-shadow-lg);
}

/* Dark Button */
.btn-dark {
    background-color: var(--wb-slate-dark);
    color: var(--wb-text-white);
    border-color: var(--wb-slate-dark);
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:focus-visible,
.btn-dark:active {
    background-color: var(--wb-slate-mid);
    border-color: var(--wb-slate-mid);
    color: var(--wb-text-white);
    transform: translateY(-2px);
}

/* Outline Buttons */
.btn-outline {
    background-color: transparent;
    color: var(--wb-text-white);
    border-color: rgba(255, 255, 255, 0.3);
}

.btn-outline:hover,
.btn-outline:focus,
.btn-outline:focus-visible,
.btn-outline:active {
    border-color: var(--wb-accent-highlight);
    background-color: var(--wb-accent-highlight);
    color: var(--wb-text-white);
}

.btn-outline-dark {
    background-color: transparent;
    color: var(--wb-text-primary);
    border-color: var(--wb-border);
}

.btn-outline-dark:hover,
.btn-outline-dark:focus,
.btn-outline-dark:focus-visible,
.btn-outline-dark:active {
    border-color: var(--wb-accent);
    background-color: var(--wb-accent);
    color: var(--wb-text-white);
}

/* Button Sizes */
.btn-lg {
    padding: 16px 32px;
    font-size: var(--wb-text-base);
}

/* Hero button sizing - equal width */
.wb-hero-section .btn-lg {
    min-width: 220px;
    justify-content: center;
}

.btn-sm {
    padding: 8px 16px;
    font-size: var(--wb-text-xs);
}

/* Button with Icon */
.btn i {
    font-size: 1.25em;
}

/* ==========================================================================
   7. CARDS
   ========================================================================== */

.wb-card {
    background-color: var(--wb-bg-white);
    padding: var(--wb-space-8);
    transition: var(--wb-transition-smooth);
}

.wb-card--dark {
    background-color: var(--wb-slate-dark);
    color: var(--wb-text-white);
    box-shadow: var(--wb-shadow-card);
}

.wb-card--bordered {
    border: 1px solid var(--wb-border);
}

.wb-card--hover:hover {
    transform: translateY(-8px);
    box-shadow: var(--wb-shadow-xl);
}

/* Card Header */
.wb-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--wb-space-6);
    padding-bottom: var(--wb-space-5);
    border-bottom: 1px solid var(--wb-slate-light);
}

.wb-card__title {
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-white);
    text-transform: uppercase;
    font-size: var(--wb-text-sm);
    letter-spacing: var(--wb-tracking-wider);
}

.wb-card__badge {
    padding: 6px 14px;
    background-color: var(--wb-accent);
    color: var(--wb-text-white);
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
}

/* Card Icon */
.wb-card__icon {
    width: 56px;
    height: 56px;
    background-color: var(--wb-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--wb-space-6);
    transition: var(--wb-transition-smooth);
}

.wb-card__icon i {
    font-size: 1.5rem;
    color: var(--wb-text-white);
}

.wb-card--hover:hover .wb-card__icon {
    transform: scale(1.05);
}

/* Solution Card (3-column grid style) */
.wb-solution-card {
    background-color: var(--wb-slate-dark);
    padding: var(--wb-space-10);
    transition: var(--wb-transition-smooth);
    border-right: 1px solid var(--wb-slate-light);
}

.wb-solution-card:last-child {
    border-right: none;
}

.wb-solution-card:hover {
    background-color: var(--wb-slate-mid);
}

.wb-solution-card h3 {
    color: var(--wb-text-white);
    margin-bottom: var(--wb-space-3);
}

.wb-solution-card p {
    color: var(--wb-text-light);
    line-height: var(--wb-leading-normal);
    margin-bottom: var(--wb-space-6);
}

/* Feature List */
.wb-feature-list {
    list-style: none;
}

.wb-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--wb-space-2);
    font-size: var(--wb-text-sm);
    color: var(--wb-text-on-dark-secondary); /* WCAG AA compliant */
    margin-bottom: var(--wb-space-2);
}

.wb-feature-list li i {
    color: var(--wb-accent-highlight);
}

/* Feature list variant for light backgrounds */
.wb-feature-list--light li {
    color: var(--wb-text-primary);
}

.wb-feature-list--light li i {
    color: var(--wb-success);
}

/* ==========================================================================
   8. NAVIGATION
   Repass 2026-05-19. Stripe / Linear / Vercel single-row utility pattern.
   .wb-nav__actions has flex-shrink: 0 — THIS is the root-cause fix for the
   "floating CTA" overlap. Container uses gap, not justify-content tricks.
   ========================================================================== */

.wb-nav {
    position: sticky;
    top: 0;
    background-color: var(--wb-nav-bg, var(--wb-slate-dark));
    border-bottom: 1px solid transparent;
    z-index: 1000;
    transition: border-color 0.2s ease, backdrop-filter 0.2s ease;
}

/* On scroll past 24px — class toggled via JS in base.html */
.wb-nav.is-scrolled {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: saturate(180%) blur(8px);
    background-color: rgba(26, 31, 48, 0.92);
}

.wb-nav__container {
    display: flex;
    align-items: center;
    gap: var(--wb-space-6);                /* 24px gap between logo / links / actions */
    height: var(--wb-nav-height);
}

/* Logo — monogram image + HTML wordmark. Wordmark hides under 600px. */
.wb-nav__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
}

.wb-nav__logo-img {
    height: 36px;
    width: auto;
    display: block;
}

.wb-nav__logo-img--mark {
    display: block;                        /* monogram is now the primary mark on all sizes */
    height: 36px;
}

.wb-nav__logo-text {
    font-family: 'Inter Tight', 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.01em;
    color: #ffffff;
    white-space: nowrap;
    line-height: 1;
}

/* Links — flex: 1 so they fill available space; 28px gap */
.wb-nav__links {
    display: flex;
    align-items: center;
    gap: 28px;
    list-style: none;
    margin: 0 0 0 var(--wb-space-4);
    padding: 0;
    height: 100%;
    flex: 1;
    justify-content: flex-start;
}

.wb-nav__links li {
    display: flex;
    align-items: center;
    height: 100%;
}

.wb-nav__links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    color: var(--wb-text-on-dark-secondary);
    text-decoration: none;
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-semibold);
    letter-spacing: var(--wb-tracking-wide);
    /* Sentence case (Stripe/Linear/Vercel) — no text-transform: uppercase */
    transition: color 0.15s ease;
}

.wb-nav__links a:hover {
    color: var(--wb-text-white);
}

/* Active-page indicator — 2px underline in product accent (Linear pattern) */
.wb-nav__links a.active {
    color: var(--wb-text-white);
}

.wb-nav__links a.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background-color: var(--product-accent, var(--wb-accent-highlight));
    border-radius: 2px;
}

/* Actions group — flex-shrink: 0 is the bug fix. Internal gap keeps switcher + CTA breathing. */
.wb-nav__actions {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-3);                /* 12px between switcher / CTA / hamburger */
    flex-shrink: 0;                        /* never get squeezed by long link rows */
}

/* Primary CTA — purpose-built, no Bootstrap inheritance. */
.wb-nav__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    padding: 9px 16px;                     /* slimmer than Bootstrap .btn-primary */
    background-color: var(--wb-accent);
    color: var(--wb-text-white);
    border: 1px solid var(--wb-accent);
    border-radius: var(--wb-radius-md);
    font-family: var(--wb-font-primary);
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-semibold);
    letter-spacing: var(--wb-tracking-wide);
    text-decoration: none;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    /* No translateY on hover — keeps the CTA structurally inside the nav row */
}

.wb-nav__cta:hover,
.wb-nav__cta:focus,
.wb-nav__cta:active {
    background-color: var(--wb-accent-light);
    border-color: var(--wb-accent-light);
    color: var(--wb-text-white);
}

.wb-nav__cta:focus-visible {
    outline: 2px solid var(--wb-accent-highlight);
    outline-offset: 2px;
}

.wb-nav__cta i {
    font-size: 1.05em;
    line-height: 1;
}

.wb-nav__cta--block {
    width: 100%;
    justify-content: center;
    padding: 14px 16px;
    font-size: var(--wb-text-base);
}

/* Mobile Menu Toggle — hidden on desktop */
.wb-nav__toggle {
    display: none;
    background: none;
    border: none;
    color: var(--wb-text-white);
    font-size: 1.5rem;
    cursor: pointer;
    padding: var(--wb-space-2);
    line-height: 1;
}

/* Mobile Navigation drawer */
.wb-nav__mobile {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--wb-nav-bg, var(--wb-slate-dark));
    padding: var(--wb-space-3) 0 0;
    border-top: 1px solid var(--wb-slate-light);
}

.wb-nav__mobile.active {
    display: block;
}

.wb-nav__mobile-links {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.wb-nav__mobile-links a {
    display: block;
    color: var(--wb-text-on-dark-secondary);
    text-decoration: none;
    font-size: var(--wb-text-base);
    font-weight: var(--wb-weight-semibold);
    padding: var(--wb-space-3) var(--wb-container-padding);
    transition: background-color 0.15s ease, color 0.15s ease;
}

.wb-nav__mobile-links a:hover,
.wb-nav__mobile-links a.active {
    background-color: var(--wb-slate-mid);
    color: var(--wb-text-white);
}

/* Mobile CTA — pinned at BOTTOM of drawer (Stripe/Linear pattern) */
.wb-nav__mobile-cta {
    padding: var(--wb-space-4) var(--wb-container-padding) var(--wb-space-5);
    border-top: 1px solid var(--wb-slate-light);
    margin-top: var(--wb-space-3);
}

/* ==========================================================================
   9. FOOTER
   ========================================================================== */

.wb-footer {
    background-color: var(--wb-slate-dark);
    color: var(--wb-text-white);
    padding: var(--wb-space-16) 0 var(--wb-space-8);
    position: relative;
    z-index: 1;
}

.wb-footer__grid {
    display: grid;
    /* 5 columns (re-pass 2026-05-19): Brand | Tools | Hardware | Company | Legal */
    /* Brand spans 2fr to stay readable next to the four ~1fr link columns. */
    grid-template-columns: 2fr repeat(4, 1fr);
    gap: var(--wb-space-10);
}

/* Footer column heading — was unstyled (template uses .wb-footer__col-h h3, */
/* but only .wb-footer__column h4 had styles). Match the original h4 styling. */
.wb-footer__col-h {
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-bottom: var(--wb-space-4);
    color: var(--wb-text-white);
}

.wb-footer__brand {
    padding-right: var(--wb-space-8);
}

.wb-footer__brand-name {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--wb-text-xl);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wide);
    margin-bottom: var(--wb-space-4);
    color: var(--wb-text-white);
    text-decoration: none;
}

.wb-footer__brand-bar {
    /* Deprecated 2026-05-19 — replaced by .wb-footer__brand-mark image. Kept for backwards-compat. */
    display: none;
}

.wb-footer__brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    display: block;
}

.wb-footer__brand-desc {
    font-size: var(--wb-text-sm);
    color: var(--wb-text-on-dark-secondary); /* WCAG AA compliant */
    line-height: var(--wb-leading-relaxed);
    margin-bottom: var(--wb-space-6);
}

.wb-footer__column h4 {
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-bottom: var(--wb-space-4);
    color: var(--wb-text-white);
}

.wb-footer__links {
    list-style: none;
}

.wb-footer__links li {
    margin-bottom: var(--wb-space-2);
}

.wb-footer__links a {
    color: var(--wb-text-on-dark-secondary); /* WCAG AA compliant */
    text-decoration: none;
    font-size: var(--wb-text-sm);
    transition: var(--wb-transition-fast);
}

.wb-footer__links a:hover,
.wb-footer__links a:focus-visible {
    /* Was --wb-accent-light (dark navy) on dark footer = ~unreadable hover. */
    /* Use the steel-blue highlight tone which stays bright against the navy. */
    color: var(--wb-accent-highlight);
}

.wb-footer__bottom {
    margin-top: var(--wb-space-12);
    padding-top: var(--wb-space-6);
    border-top: 1px solid var(--wb-slate-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wb-footer__copyright {
    color: var(--wb-text-on-dark-muted); /* WCAG AA min compliant */
    font-size: var(--wb-text-sm);
}

.wb-footer__legal {
    color: var(--wb-text-on-dark-muted); /* WCAG AA min compliant */
    font-size: var(--wb-text-xs);
}

/* ==========================================================================
   10. SECTION HEADERS
   ========================================================================== */

.wb-section-header {
    text-align: center;
    margin-bottom: var(--wb-space-12);
}

.wb-section-header h2 {
    margin-bottom: var(--wb-space-3);
}

.wb-section-header p {
    font-size: var(--wb-text-md);
    color: var(--wb-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ==========================================================================
   11. ANIMATIONS
   ========================================================================== */

/* Fade Up Animation */
@keyframes wb-fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wb-animate-fade-up {
    animation: wb-fadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

/* Slide In Left */
@keyframes wb-slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wb-animate-slide-left {
    animation: wb-slideInLeft 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

/* Slide In Right */
@keyframes wb-slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wb-animate-slide-right {
    animation: wb-slideInRight 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

/* Bar Fill Animation */
@keyframes wb-barFill {
    from {
        width: 0;
    }
}

.wb-animate-bar {
    animation: wb-barFill 1.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animation Delays */
.wb-delay-1 { animation-delay: 0.1s; }
.wb-delay-2 { animation-delay: 0.2s; }
.wb-delay-3 { animation-delay: 0.3s; }
.wb-delay-4 { animation-delay: 0.4s; }
.wb-delay-5 { animation-delay: 0.5s; }
.wb-delay-6 { animation-delay: 0.6s; }

/* Scroll-triggered animations (add .wb-in-view when element enters viewport) */
.wb-scroll-animate {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.wb-scroll-animate.wb-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   12. HERO SECTION
   ========================================================================== */

.wb-hero {
    padding: var(--wb-space-20) 0 var(--wb-space-24);
    position: relative;
    z-index: 1;
}

.wb-hero__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wb-space-16);
    align-items: center;
}

.wb-hero__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--wb-space-2);
    padding: var(--wb-space-2) var(--wb-space-4);
    background-color: var(--wb-slate-dark);
    color: var(--wb-accent-highlight);
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-widest);
    margin-bottom: var(--wb-space-6);
}

.wb-hero h1 {
    margin-bottom: var(--wb-space-5);
}

.wb-hero__subtitle {
    font-size: var(--wb-text-lg);
    color: var(--wb-text-secondary);
    margin-bottom: var(--wb-space-8);
    max-width: 480px;
    line-height: var(--wb-leading-relaxed);
}

.wb-hero__ctas {
    display: flex;
    gap: var(--wb-space-3);
    margin-bottom: var(--wb-space-12);
}

.wb-hero__stats {
    display: flex;
    gap: var(--wb-space-10);
}

.wb-stat {
    display: flex;
    flex-direction: column;
}

.wb-stat__value {
    font-size: var(--wb-text-5xl);
    font-weight: var(--wb-weight-extrabold);
    color: var(--wb-slate-dark);
    line-height: var(--wb-leading-none);
}

.wb-stat__label {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-top: var(--wb-space-1);
}

/* ==========================================================================
   13. CTA SECTION
   ========================================================================== */

.wb-cta {
    padding: var(--wb-space-24) 0;
    background-color: var(--wb-slate-dark);
    text-align: center;
}

.wb-cta h2 {
    color: var(--wb-text-white);
    margin-bottom: var(--wb-space-3);
}

.wb-cta p {
    font-size: var(--wb-text-lg);
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--wb-space-8);
}

.wb-cta__buttons {
    display: flex;
    gap: var(--wb-space-3);
    justify-content: center;
}

/* ==========================================================================
   14. GRIDS
   ========================================================================== */

.wb-grid {
    display: grid;
    gap: var(--wb-space-6);
}

.wb-grid--2 {
    grid-template-columns: repeat(2, 1fr);
}

.wb-grid--3 {
    grid-template-columns: repeat(3, 1fr);
}

.wb-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.wb-grid--no-gap {
    gap: 0;
}

.wb-grid--tight {
    gap: 1px;
    background-color: var(--wb-border);
}

.wb-grid--tight > * {
    background-color: var(--wb-bg-white);
}

/* ==========================================================================
   15. SCORE/PROGRESS BARS
   ========================================================================== */

.wb-score-display {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--wb-space-6);
    align-items: center;
}

.wb-score-big {
    width: 120px;
    height: 120px;
    background: linear-gradient(135deg, var(--wb-accent), var(--wb-accent-highlight));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wb-text-white);
    font-size: var(--wb-text-6xl);
    font-weight: var(--wb-weight-extrabold);
}

.wb-score-bars {
    display: flex;
    flex-direction: column;
    gap: var(--wb-space-4);
}

.wb-score-bar-row {
    display: grid;
    grid-template-columns: 60px 1fr 40px;
    align-items: center;
    gap: var(--wb-space-3);
}

.wb-score-bar-label {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-semibold);
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
}

.wb-score-bar-track {
    height: 8px;
    background-color: var(--wb-slate-light);
    overflow: hidden;
}

.wb-score-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--wb-accent), var(--wb-accent-highlight));
}

.wb-score-bar-value {
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-text-white);
    text-align: right;
}

/* ==========================================================================
   16. UTILITY CLASSES
   ========================================================================== */

/* Display */
.wb-hidden { display: none !important; }
.wb-block { display: block; }
.wb-inline-block { display: inline-block; }
.wb-flex { display: flex; }
.wb-inline-flex { display: inline-flex; }
.wb-grid { display: grid; }

/* Flexbox */
.wb-flex-col { flex-direction: column; }
.wb-flex-wrap { flex-wrap: wrap; }
.wb-items-center { align-items: center; }
.wb-items-start { align-items: flex-start; }
.wb-items-end { align-items: flex-end; }
.wb-justify-center { justify-content: center; }
.wb-justify-between { justify-content: space-between; }
.wb-justify-start { justify-content: flex-start; }
.wb-justify-end { justify-content: flex-end; }
.wb-gap-1 { gap: var(--wb-space-1); }
.wb-gap-2 { gap: var(--wb-space-2); }
.wb-gap-3 { gap: var(--wb-space-3); }
.wb-gap-4 { gap: var(--wb-space-4); }
.wb-gap-6 { gap: var(--wb-space-6); }
.wb-gap-8 { gap: var(--wb-space-8); }

/* Text Alignment */
.wb-text-left { text-align: left; }
.wb-text-center { text-align: center; }
.wb-text-right { text-align: right; }

/* Margin */
.wb-m-0 { margin: 0; }
.wb-mt-0 { margin-top: 0; }
.wb-mb-0 { margin-bottom: 0; }
.wb-mb-2 { margin-bottom: var(--wb-space-2); }
.wb-mb-4 { margin-bottom: var(--wb-space-4); }
.wb-mb-6 { margin-bottom: var(--wb-space-6); }
.wb-mb-8 { margin-bottom: var(--wb-space-8); }

/* Padding */
.wb-p-0 { padding: 0; }
.wb-p-4 { padding: var(--wb-space-4); }
.wb-p-6 { padding: var(--wb-space-6); }
.wb-p-8 { padding: var(--wb-space-8); }
.wb-py-4 { padding-top: var(--wb-space-4); padding-bottom: var(--wb-space-4); }
.wb-py-8 { padding-top: var(--wb-space-8); padding-bottom: var(--wb-space-8); }
.wb-px-4 { padding-left: var(--wb-space-4); padding-right: var(--wb-space-4); }
.wb-px-8 { padding-left: var(--wb-space-8); padding-right: var(--wb-space-8); }

/* Width */
.wb-w-full { width: 100%; }
.wb-max-w-md { max-width: 28rem; }
.wb-max-w-lg { max-width: 32rem; }
.wb-max-w-xl { max-width: 36rem; }

/* Color utilities */
.wb-text-white { color: var(--wb-text-white) !important; }
.wb-bg-dark { background-color: var(--wb-slate-dark) !important; }
.wb-bg-white { background-color: var(--wb-bg-white) !important; }
.wb-bg-alt { background-color: var(--wb-bg-alt) !important; }

/* Prose styling for body content */
.prose {
    font-size: var(--wb-text-base);
    line-height: var(--wb-leading-relaxed);
    color: var(--wb-text-primary);
}

.prose h1, .prose h2, .prose h3, .prose h4, .prose h5, .prose h6 {
    margin-top: 2em;
    margin-bottom: 0.75em;
}

.prose h1:first-child, .prose h2:first-child {
    margin-top: 0;
}

.prose p {
    margin-bottom: 1.25em;
}

.prose ul, .prose ol {
    margin-bottom: 1.25em;
    padding-left: 1.5em;
}

.prose li {
    margin-bottom: 0.5em;
}

.prose a {
    color: var(--wb-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.prose a:hover {
    color: var(--wb-accent-dark);
}

.prose strong {
    font-weight: var(--wb-weight-semibold);
}

.prose blockquote {
    border-left: 4px solid var(--wb-accent);
    padding-left: 1rem;
    margin: 1.5em 0;
    font-style: italic;
    color: var(--wb-text-secondary);
}

.prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
}

.prose th, .prose td {
    border: 1px solid var(--wb-border);
    padding: 0.75rem 1rem;
    text-align: left;
}

.prose th {
    background-color: var(--wb-bg-alt);
    font-weight: var(--wb-weight-semibold);
}

/* ==========================================================================
   17. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    :root {
        --wb-container-padding: 24px;
    }

    /* Navigation — collapse links + CTA into drawer; hamburger appears. */
    .wb-nav__links {
        display: none;
    }

    .wb-nav__toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .wb-nav__actions .wb-nav__cta {
        display: none;                     /* CTA moves into the drawer on tablet */
    }

    /* Hero */
    .wb-hero__grid {
        grid-template-columns: 1fr;
        gap: var(--wb-space-12);
    }

    /* Grids */
    .wb-grid--3,
    .wb-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Solution Cards */
    .wb-solution-card {
        border-right: none;
        border-bottom: 1px solid var(--wb-slate-light);
    }

    .wb-solution-card:last-child {
        border-bottom: none;
    }

    /* Footer — 3 columns of links + brand spanning the row above. */
    /* Legal gets its own row underneath so the 9 links can breathe. */
    .wb-footer__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--wb-space-8);
    }

    .wb-footer__brand {
        grid-column: 1 / -1;
        padding-right: 0;
    }

    .wb-footer__column--legal {
        grid-column: 1 / -1;
    }

    .wb-footer__column--legal .wb-footer__links {
        columns: 3;
        column-gap: var(--wb-space-6);
    }

    .wb-footer__column--legal .wb-footer__links li {
        break-inside: avoid;
    }
}

/* Small viewport — hide wordmark, monogram-only */
@media (max-width: 600px) {
    .wb-nav__logo-text {
        display: none;
    }
}

/* Mobile (max-width: 640px) */
@media (max-width: 640px) {
    :root {
        --wb-container-padding: 16px;
    }

    /* Typography */
    h2, .wb-h2 {
        font-size: var(--wb-text-3xl);
    }

    /* Hero */
    .wb-hero__ctas {
        flex-direction: column;
    }

    .wb-hero__stats {
        flex-wrap: wrap;
        gap: var(--wb-space-6);
    }

    /* Grids */
    .wb-grid--2,
    .wb-grid--3,
    .wb-grid--4 {
        grid-template-columns: 1fr;
    }

    /* CTA */
    .wb-cta__buttons {
        flex-direction: column;
        align-items: center;
    }

    /* Footer — single column stack on mobile. */
    .wb-footer__grid {
        grid-template-columns: 1fr;
    }

    .wb-footer__column--legal .wb-footer__links {
        columns: 2;
        column-gap: var(--wb-space-4);
    }

    .wb-footer__bottom {
        flex-direction: column;
        gap: var(--wb-space-4);
        text-align: center;
    }

    /* Score Display */
    .wb-score-display {
        grid-template-columns: 1fr;
    }

    .wb-score-big {
        width: 100%;
        height: 100px;
    }
}

/* ==========================================================================
   18. HEAT MAP GRADIENTS (Theme 31 Adaptation)
   ========================================================================== */

.wb-heat-gradient {
    background-color: var(--wb-bg);
    background-image: radial-gradient(
        144.3% 173.7% at 71.41% 94.26%,
        rgba(26, 24, 60, 0.12) 0%,
        rgba(91, 163, 184, 0.07) 32.49%,
        rgba(30, 37, 48, 0.05) 82.52%
    );
}

.wb-heat-gradient-dark {
    background-color: var(--wb-slate-dark);
    background-image: radial-gradient(
        116.18% 118% at 50% 100%,
        rgba(26, 24, 60, 0.25) 0%,
        rgba(91, 163, 184, 0.15) 41.83%,
        rgba(30, 37, 48, 0.08) 82.52%
    );
}

/* Glow orbs for parallax effect */
.wb-glow-orb {
    position: absolute;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 24, 60, 0.15) 0%, transparent 70%);
    filter: blur(60px);
    pointer-events: none;
}

.wb-glow-orb--sm {
    width: 200px;
    height: 200px;
}

.wb-glow-orb--lg {
    width: 600px;
    height: 600px;
}

/* ==========================================================================
   19. ACCENT BORDER UTILITIES
   ========================================================================== */

.wb-border-accent {
    border-color: var(--wb-accent) !important;
}

.wb-border-accent-left {
    border-left: 4px solid var(--wb-accent);
}

.wb-border-accent-top {
    border-top: 4px solid var(--wb-accent);
}

.wb-border-accent-bottom {
    border-bottom: 4px solid var(--wb-accent);
}

/* Card with accent glow */
.wb-card--accent-glow {
    box-shadow:
        0 24px 48px rgba(30, 37, 48, 0.25),
        0 0 0 1px rgba(26, 24, 60, 0.3);
}

/* Dark card with subtle border */
.wb-card--dark-bordered {
    border: 1px solid rgba(26, 24, 60, 0.2);
}

/* ==========================================================================
   20. HOMEPAGE COMPONENTS
   ========================================================================== */

/* Hero Section */
.wb-hero-section {
    padding: 5rem 0 4rem;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    position: relative;
    overflow: hidden;
}

.wb-hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: radial-gradient(circle, rgba(26, 24, 60, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}

.wb-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--wb-slate-dark);
    /* Fix 2026-05-19: was --wb-accent-light (dark navy) which read as */
    /* navy-on-navy on the dark pill. Switched to white for AA contrast. */
    color: #ffffff;
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-widest);
    margin-bottom: 1.5rem;
}

.wb-hero-headline {
    font-size: var(--wb-text-hero);
    font-weight: var(--wb-weight-extrabold);
    line-height: var(--wb-leading-tight);
    letter-spacing: var(--wb-tracking-tighter);
    margin-bottom: 1rem;
}

.wb-hero-headline .accent {
    color: var(--wb-accent);
}

.wb-hero-subhead {
    font-size: var(--wb-text-lg);
    color: var(--wb-text-secondary);
    margin-bottom: 2rem;
    max-width: 500px;
    line-height: var(--wb-leading-relaxed);
}

.wb-hero-stats {
    display: flex;
    gap: 2.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.wb-hero-stat-value {
    font-size: var(--wb-text-5xl);
    font-weight: var(--wb-weight-extrabold);
    color: var(--wb-slate-dark);
    line-height: var(--wb-leading-none);
}

.wb-hero-stat-label {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-muted);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-top: var(--wb-space-1);
}

/* Dark Card Component */
.wb-dark-card {
    background: var(--wb-slate-dark);
    padding: 2rem;
    box-shadow: var(--wb-shadow-card);
    border: 1px solid rgba(26, 24, 60, 0.2);
}

.wb-dark-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--wb-slate-light);
}

.wb-dark-card-title {
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-white);
    text-transform: uppercase;
    font-size: var(--wb-text-sm);
    letter-spacing: var(--wb-tracking-wider);
}

.wb-dark-card-badge {
    padding: 0.375rem 0.875rem;
    background: var(--wb-accent);
    color: var(--wb-text-white);
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
}

/* Problem Cards */
.wb-problem-card {
    background: var(--wb-bg);
    border: none;
    border-left: 4px solid var(--wb-error);
    padding: 2rem;
    height: 100%;
    transition: var(--wb-transition-smooth);
}

.wb-problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
}

.wb-problem-card-metric {
    font-size: 2rem;
    font-weight: var(--wb-weight-extrabold);
    color: var(--wb-error);
    margin-bottom: 0.5rem;
}

.wb-problem-card-title {
    font-size: var(--wb-text-lg);
    font-weight: var(--wb-weight-bold);
    margin-bottom: 0.75rem;
}

.wb-problem-card-insight {
    font-size: var(--wb-text-sm);
    color: var(--wb-success);
    font-weight: var(--wb-weight-medium);
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

/* Triangle Section */
.wb-triangle-section {
    padding: 5rem 0;
    background: var(--wb-slate-dark);
    color: var(--wb-text-white);
}

.wb-triangle-point {
    text-align: center;
    padding: 2rem;
}

.wb-triangle-icon {
    width: 80px;
    height: 80px;
    background: var(--wb-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    font-size: 2rem;
    color: var(--wb-text-white);
}

.wb-triangle-insight-box {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid var(--wb-accent);
    padding: 1.5rem;
    margin-top: 3rem;
}

/* Solutions Section */
.wb-solutions-section {
    padding: 5rem 0;
    background: var(--wb-bg);
}

.wb-solution-card-v2 {
    background: var(--wb-slate-dark);
    padding: 2rem;
    height: 100%;
    transition: var(--wb-transition-smooth);
    border: 1px solid rgba(26, 24, 60, 0.2);
}

.wb-solution-card-v2:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(30, 37, 48, 0.35);
}

.wb-solution-icon {
    width: 56px;
    height: 56px;
    background: var(--wb-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--wb-text-white);
}

.wb-solution-card-v2 h3 {
    font-size: var(--wb-text-lg);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-text-white);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wide);
}

.wb-solution-card-v2 p {
    font-size: var(--wb-text-base);
    color: var(--wb-text-on-dark-secondary);
    line-height: var(--wb-leading-normal);
}

.wb-solution-card-v2 .wb-link {
    color: var(--wb-accent-light);
    text-decoration: none;
    font-weight: var(--wb-weight-semibold);
    font-size: var(--wb-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    transition: var(--wb-transition-fast);
}

.wb-solution-card-v2 .wb-link:hover {
    color: var(--wb-text-white);
}

/* How It Works Section */
.wb-step-number {
    width: 48px;
    height: 48px;
    background: var(--wb-accent);
    color: var(--wb-text-white);
    font-size: var(--wb-text-xl);
    font-weight: var(--wb-weight-extrabold);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

/* Step connector - single line behind all steps */
.wb-steps-row {
    position: relative;
}

.wb-steps-row::before {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(16.67% + 24px);
    right: calc(16.67% + 24px);
    height: 2px;
    background: linear-gradient(90deg, var(--wb-accent), var(--wb-accent-light), var(--wb-accent));
    z-index: 0;
}

@media (max-width: 767.98px) {
    .wb-steps-row::before {
        display: none;
    }
}

/* Integration Section */
.wb-integration-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: var(--wb-success);
    color: var(--wb-text-white);
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-bottom: 0.5rem;
}

/* CTA Path Cards */
.wb-cta-path-card {
    background: rgba(255, 255, 255, 0.08);
    padding: 2rem;
    text-align: center;
    height: 100%;
    border: 1px solid rgba(26, 24, 60, 0.3);
    transition: var(--wb-transition-smooth);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.wb-cta-path-card:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--wb-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

.wb-cta-path-label {
    font-size: var(--wb-text-xs);
    color: var(--wb-text-on-dark-secondary);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-bottom: 1rem;
}

.wb-cta-path-description {
    font-size: var(--wb-text-sm);
    color: var(--wb-text-on-dark-secondary);
    margin-top: 1rem;
    line-height: var(--wb-leading-relaxed);
}

/* Section Header Variants */
.wb-section-header--light h2 {
    color: var(--wb-text-white);
}

.wb-section-header--light p {
    color: var(--wb-text-on-dark-secondary);
}

/* Text on dark helper classes */
.wb-text-on-dark {
    color: var(--wb-text-on-dark);
}

.wb-text-on-dark-secondary {
    color: var(--wb-text-on-dark-secondary);
}

.wb-text-on-dark-muted {
    color: var(--wb-text-on-dark-muted);
}

/* Score bars (reusing existing but adding dark-section variant) */
.wb-score-bar-label--dark {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
}

/* Homepage responsive adjustments */
@media (max-width: 991.98px) {
    .wb-hero-stats {
        flex-wrap: wrap;
        gap: 1.5rem;
    }

    .wb-step-connector {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .wb-hero-section {
        padding: 3rem 0;
    }

    .wb-hero-stats {
        gap: 1rem;
    }

    .wb-hero-stat-value {
        font-size: var(--wb-text-4xl);
    }
}

/* ==========================================================================
   21. FOUNDING MEMBER STRIP - Industrial Blueprint Aesthetic
   ========================================================================== */

.wb-founding-strip {
    background: var(--wb-slate-dark);
    padding: 0.875rem 0;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

/* Subtle diagonal hazard stripes - industrial "restricted access" visual */
.wb-founding-strip::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 10px,
        rgba(26, 24, 60, 0.08) 10px,
        rgba(26, 24, 60, 0.08) 20px
    );
    pointer-events: none;
}

/* Top accent line with glow */
.wb-founding-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--wb-accent) 20%,
        var(--wb-accent-highlight) 50%,
        var(--wb-accent) 80%,
        transparent 100%
    );
    box-shadow: 0 0 12px rgba(26, 24, 60, 0.5);
}

.wb-founding-strip__content {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    text-align: center;
    position: relative;
    z-index: 1;
}

.wb-founding-strip__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(26, 24, 60, 0.15);
    border: 1px solid rgba(26, 24, 60, 0.4);
    color: var(--wb-accent-highlight);
    padding: 0.375rem 0.875rem;
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-widest);
}

/* Pulsing live indicator */
.wb-founding-strip__badge::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--wb-accent-highlight);
    border-radius: 50%;
    animation: wb-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px var(--wb-accent-highlight);
}

@keyframes wb-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(0.85); }
}

.wb-founding-strip__text {
    color: var(--wb-text-on-dark-secondary);
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-medium);
    margin: 0;
}

.wb-founding-strip__text strong {
    color: var(--wb-text-white);
    font-weight: var(--wb-weight-bold);
}

.wb-founding-strip__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--wb-accent);
    color: var(--wb-text-white);
    padding: 0.5rem 1rem;
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    text-decoration: none;
    transition: var(--wb-transition-fast);
    border: 1px solid transparent;
}

.wb-founding-strip__cta:hover {
    background: var(--wb-accent-light);
    color: var(--wb-text-white);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(26, 24, 60, 0.4);
}

@media (max-width: 640px) {
    .wb-founding-strip__content {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* ==========================================================================
   22. FOUNDER CREDIBILITY SNIPPET
   ========================================================================== */

.wb-founders-snippet {
    background: var(--wb-bg-white);
    border-top: 4px solid var(--wb-accent);
    padding: 3rem 0;
}

.wb-founders-snippet__header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.wb-founders-snippet__header h2 {
    font-size: var(--wb-text-2xl);
    margin-bottom: 0.5rem;
}

.wb-founders-snippet__header p {
    color: var(--wb-text-secondary);
    font-size: var(--wb-text-base);
    margin: 0;
}

.wb-founders-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

@media (max-width: 640px) {
    .wb-founders-grid {
        grid-template-columns: 1fr;
    }
}

.wb-founder-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--wb-bg-alt);
    border-radius: 8px;
    border: 1px solid var(--wb-border);
}

.wb-founder-card__avatar {
    width: 64px;
    height: 64px;
    background: var(--wb-accent);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.wb-founder-card__avatar i {
    font-size: 1.75rem;
    color: white;
}

.wb-founder-card__info h3 {
    font-size: var(--wb-text-base);
    font-weight: var(--wb-weight-bold);
    margin-bottom: 0.25rem;
    text-transform: none;
}

.wb-founder-card__title {
    font-size: var(--wb-text-xs);
    color: var(--wb-accent);
    font-weight: var(--wb-weight-semibold);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-bottom: 0.5rem;
}

.wb-founder-card__bio {
    font-size: var(--wb-text-sm);
    color: var(--wb-text-secondary);
    line-height: var(--wb-leading-relaxed);
    margin: 0;
}

.wb-founders-snippet__cta {
    text-align: center;
    margin-top: 2rem;
}

/* ==========================================================================
   23. JOURNEY INDICATOR
   ========================================================================== */

.wb-journey-indicator {
    padding: 2rem 0;
    background: var(--wb-bg-alt);
    border-top: 1px solid var(--wb-border);
    border-bottom: 1px solid var(--wb-border);
}

.wb-journey-indicator--dark {
    background: var(--wb-slate-mid);
    border-color: var(--wb-slate-light);
}

.wb-journey-indicator__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.wb-journey-indicator__header p {
    font-size: var(--wb-text-sm);
    color: var(--wb-text-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    font-weight: var(--wb-weight-semibold);
}

.wb-journey-indicator--dark .wb-journey-indicator__header p {
    color: var(--wb-text-on-dark-muted);
}

.wb-journey-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
}

.wb-journey-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    position: relative;
    padding: 0 0.5rem;
}

.wb-journey-step__number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--wb-border);
    color: var(--wb-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--wb-text-sm);
    font-weight: var(--wb-weight-bold);
    margin-bottom: 0.75rem;
    transition: var(--wb-transition-fast);
    position: relative;
    z-index: 1;
}

.wb-journey-indicator--dark .wb-journey-step__number {
    background: var(--wb-slate-light);
    color: var(--wb-text-on-dark-muted);
}

.wb-journey-step__title {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    margin-bottom: 0.25rem;
    text-align: center;
}

.wb-journey-indicator--dark .wb-journey-step__title {
    color: var(--wb-text-on-dark-secondary);
}

.wb-journey-step__subtitle {
    font-size: var(--wb-text-xs);
    color: var(--wb-text-muted);
    text-align: center;
}

.wb-journey-indicator--dark .wb-journey-step__subtitle {
    color: var(--wb-text-on-dark-muted);
}

/* Step connector lines */
.wb-journey-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 20px;
    left: calc(50% + 24px);
    width: calc(100% - 48px);
    height: 2px;
    background: var(--wb-border);
    z-index: 0;
}

.wb-journey-indicator--dark .wb-journey-step:not(:last-child)::after {
    background: var(--wb-slate-light);
}

/* Completed state */
.wb-journey-step--completed .wb-journey-step__number {
    background: var(--wb-success);
    color: white;
}

.wb-journey-step--completed::after {
    background: var(--wb-success) !important;
}

/* Active state */
.wb-journey-step--active .wb-journey-step__number {
    background: var(--wb-accent);
    color: white;
    box-shadow: 0 0 0 4px rgba(26, 24, 60, 0.25);
}

.wb-journey-step--active .wb-journey-step__title {
    color: var(--wb-accent);
}

.wb-journey-indicator--dark .wb-journey-step--active .wb-journey-step__title {
    color: var(--wb-accent-light);
}

/* Hover state */
.wb-journey-step:hover .wb-journey-step__number {
    transform: scale(1.1);
}

.wb-journey-step:hover .wb-journey-step__title {
    color: var(--wb-accent);
}

@media (max-width: 640px) {
    .wb-journey-steps {
        flex-wrap: wrap;
        gap: 1rem;
    }

    .wb-journey-step {
        flex: 0 0 45%;
    }

    .wb-journey-step:not(:last-child)::after {
        display: none;
    }
}

/* ==========================================================================
   24. PRODUCT DEMO CARD COMPONENT
   Dashboard mockup with animated heatmap for hero sections
   ========================================================================== */

.wb-demo-card {
    background: var(--wb-slate-dark);
    box-shadow: var(--wb-shadow-card);
    border: 1px solid rgba(26, 24, 60, 0.2);
    position: relative;
}

.wb-demo-card__header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--wb-slate-mid);
    border-bottom: 1px solid var(--wb-slate-light);
}

.wb-demo-card__dots {
    display: flex;
    gap: 6px;
}

.wb-demo-card__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.wb-demo-card__dot--red { background: #ff5f57; }
.wb-demo-card__dot--yellow { background: #ffbd2e; }
.wb-demo-card__dot--green { background: #28c840; }

.wb-demo-card__title {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-semibold);
    color: var(--wb-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    flex: 1;
    text-align: center;
}

.wb-demo-card__badge {
    padding: 4px 10px;
    background: var(--wb-accent);
    color: white;
    font-size: 10px;
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wb-demo-card__screen {
    padding: 20px;
}

/* Mock Stats Grid */
.wb-mock-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

.wb-mock-stat {
    text-align: center;
    padding: 12px 8px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--wb-slate-light);
}

.wb-mock-stat__value {
    font-size: var(--wb-text-xl);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-text-white);
    line-height: 1;
}

.wb-mock-stat__label {
    font-size: 10px;
    color: var(--wb-text-on-dark-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

.wb-mock-stat--highlight .wb-mock-stat__value {
    color: var(--wb-accent-highlight);
}

/* Animated Heatmap Grid */
.wb-heatmap {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 3px;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2);
    aspect-ratio: 2/1;
}

.wb-heatmap__cell {
    border-radius: 2px;
    animation: wb-heatPulse 3s ease-in-out infinite;
}

.wb-heatmap__cell--hot {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    animation-delay: 0s;
}

.wb-heatmap__cell--warm {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    animation-delay: 0.5s;
}

.wb-heatmap__cell--cool {
    background: linear-gradient(135deg, var(--wb-accent), var(--wb-accent-dark));
    animation-delay: 1s;
}

@keyframes wb-heatPulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* Play Overlay */
.wb-demo-card__play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 37, 48, 0.6);
    opacity: 0;
    transition: var(--wb-transition-smooth);
    cursor: pointer;
}

.wb-demo-card:hover .wb-demo-card__play-overlay {
    opacity: 1;
}

.wb-demo-card__play-button {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--wb-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(26, 24, 60, 0.5);
    transition: var(--wb-transition-smooth);
}

.wb-demo-card__play-button i {
    font-size: 32px;
    color: white;
    margin-left: 4px;
}

.wb-demo-card:hover .wb-demo-card__play-button {
    transform: scale(1.1);
}

/* ==========================================================================
   25. THREE-PATH JOURNEY CTA CARDS
   Interactive persona-based CTA section for bottom of pages
   ========================================================================== */

.wb-journey-cta-section {
    padding: 5rem 0;
    background: var(--wb-slate-dark);
    position: relative;
    overflow: hidden;
}

.wb-journey-cta-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        116.18% 118% at 50% 100%,
        rgba(26, 24, 60, 0.25) 0%,
        rgba(91, 163, 184, 0.15) 41.83%,
        rgba(30, 37, 48, 0.08) 82.52%
    );
    pointer-events: none;
}

.wb-journey-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.wb-journey-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 2rem;
    text-align: center;
    transition: var(--wb-transition-smooth);
    position: relative;
}

.wb-journey-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--wb-accent);
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(26, 24, 60, 0.2);
}

.wb-journey-card__icon {
    width: 64px;
    height: 64px;
    background: rgba(26, 24, 60, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    transition: var(--wb-transition-smooth);
}

.wb-journey-card__icon i {
    font-size: 1.75rem;
    color: var(--wb-accent-light);
}

.wb-journey-card:hover .wb-journey-card__icon {
    background: var(--wb-accent);
}

.wb-journey-card:hover .wb-journey-card__icon i {
    color: white;
}

.wb-journey-card__persona {
    font-size: var(--wb-text-xs);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-accent-light);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-widest);
    margin-bottom: 0.75rem;
}

.wb-journey-card__title {
    font-size: var(--wb-text-xl);
    font-weight: var(--wb-weight-bold);
    color: var(--wb-text-white);
    margin-bottom: 0.75rem;
    line-height: var(--wb-leading-snug);
}

.wb-journey-card__description {
    font-size: var(--wb-text-sm);
    color: var(--wb-text-on-dark-secondary);
    margin-bottom: 1.5rem;
    line-height: var(--wb-leading-relaxed);
}

.wb-journey-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wb-accent-light);
    text-decoration: none;
    font-weight: var(--wb-weight-semibold);
    font-size: var(--wb-text-sm);
    text-transform: uppercase;
    letter-spacing: var(--wb-tracking-wider);
    transition: var(--wb-transition-fast);
}

.wb-journey-card__cta i {
    transition: transform var(--wb-transition-fast);
}

.wb-journey-card:hover .wb-journey-card__cta {
    color: var(--wb-text-white);
}

.wb-journey-card:hover .wb-journey-card__cta i {
    transform: translateX(4px);
}

/* Popular Badge */
.wb-journey-card--popular {
    border-color: var(--wb-accent);
    background: rgba(26, 24, 60, 0.1);
}

.wb-journey-card--popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wb-success);
    color: white;
    padding: 6px 16px;
    font-size: 11px;
    font-weight: var(--wb-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

/* Trust Row */
.wb-trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--wb-slate-light);
    color: var(--wb-text-on-dark-muted);
    font-size: var(--wb-text-sm);
    position: relative;
    z-index: 1;
}

.wb-trust-row span {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* Journey CTA Responsive */
@media (max-width: 1024px) {
    .wb-journey-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

/* ==========================================================================
   26. HERO SINGLE CTA VARIANT
   Single primary CTA with secondary text link
   ========================================================================== */

.wb-hero-cta-single {
    margin-bottom: 2.5rem;
}

.wb-hero-cta-single .btn {
    padding: 18px 36px;
    font-size: var(--wb-text-base);
}

.wb-hero-secondary-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--wb-text-secondary);
    font-size: var(--wb-text-sm);
    text-decoration: none;
    margin-top: 1rem;
    transition: var(--wb-transition-fast);
}

.wb-hero-secondary-link:hover {
    color: var(--wb-accent);
}

.wb-hero-secondary-link i {
    transition: transform var(--wb-transition-fast);
}

.wb-hero-secondary-link:hover i {
    transform: translateX(4px);
}

/* ==========================================================================
   27. PRINT STYLES
   ========================================================================== */

@media print {
    body::before {
        display: none;
    }

    .wb-nav,
    .wb-footer,
    .btn {
        display: none;
    }

    .wb-section {
        padding: 20px 0;
    }
}