/**
 * SMSC BIZ White-Label Design System
 * Enterprise-grade, customizable design system
 * No Bootstrap - Pure custom CSS for distinctive aesthetics
 */

/* ================================================
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   ================================================ */
:root {
    /* Color System - HSL-based for easy manipulation */
    --wl-primary: #2563eb;
    --wl-primary-rgb: 37, 99, 235;
    --wl-primary-h: 217;
    --wl-primary-s: 91%;
    --wl-primary-l: 53%;
    
    --wl-secondary: #7c3aed;
    --wl-secondary-rgb: 124, 58, 237;
    
    --wl-accent: #06b6d4;
    --wl-accent-rgb: 6, 182, 212;
    
    /* Neutral Colors */
    --wl-gray-50: #f8fafc;
    --wl-gray-100: #f1f5f9;
    --wl-gray-200: #e2e8f0;
    --wl-gray-300: #cbd5e1;
    --wl-gray-400: #94a3b8;
    --wl-gray-500: #64748b;
    --wl-gray-600: #475569;
    --wl-gray-700: #334155;
    --wl-gray-800: #1e293b;
    --wl-gray-900: #0f172a;
    --wl-gray-950: #020617;
    
    /* Semantic Colors */
    --wl-success: #10b981;
    --wl-warning: #f59e0b;
    --wl-danger: #ef4444;
    --wl-info: #06b6d4;
    
    /* Typography */
    --wl-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --wl-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --wl-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Font Sizes - Fluid Typography */
    --wl-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);
    --wl-text-sm: clamp(0.875rem, 0.8rem + 0.375vw, 0.9375rem);
    --wl-text-base: clamp(1rem, 0.9rem + 0.5vw, 1.0625rem);
    --wl-text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --wl-text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --wl-text-2xl: clamp(1.5rem, 1.25rem + 1.25vw, 2rem);
    --wl-text-3xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.5rem);
    --wl-text-4xl: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
    --wl-text-5xl: clamp(3rem, 2rem + 5vw, 4rem);
    --wl-text-6xl: clamp(3.75rem, 2.5rem + 6.25vw, 5rem);
    
    /* Spacing */
    --wl-space-1: 0.25rem;
    --wl-space-2: 0.5rem;
    --wl-space-3: 0.75rem;
    --wl-space-4: 1rem;
    --wl-space-5: 1.25rem;
    --wl-space-6: 1.5rem;
    --wl-space-8: 2rem;
    --wl-space-10: 2.5rem;
    --wl-space-12: 3rem;
    --wl-space-16: 4rem;
    --wl-space-20: 5rem;
    --wl-space-24: 6rem;
    
    /* Border Radius */
    --wl-radius-sm: 0.375rem;
    --wl-radius-md: 0.5rem;
    --wl-radius-lg: 0.75rem;
    --wl-radius-xl: 1rem;
    --wl-radius-2xl: 1.5rem;
    --wl-radius-full: 9999px;
    
    /* Shadows */
    --wl-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --wl-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --wl-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --wl-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --wl-shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
    --wl-shadow-2xl: 0 25px 50px -12px rgb(0 0 0 / 0.25);
    --wl-shadow-glow: 0 0 40px rgba(var(--wl-primary-rgb), 0.3);
    
    /* Transitions */
    --wl-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --wl-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --wl-transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    --wl-transition-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Z-Index Scale */
    --wl-z-dropdown: 1000;
    --wl-z-sticky: 1020;
    --wl-z-fixed: 1030;
    --wl-z-modal-backdrop: 1040;
    --wl-z-modal: 1050;
    --wl-z-tooltip: 1060;
}

/* Dark Mode Variables */
.wl-dark-mode,
[data-theme="dark"] {
    --wl-gray-50: #0f172a;
    --wl-gray-100: #1e293b;
    --wl-gray-200: #334155;
    --wl-gray-300: #475569;
    --wl-gray-400: #64748b;
    --wl-gray-500: #94a3b8;
    --wl-gray-600: #cbd5e1;
    --wl-gray-700: #e2e8f0;
    --wl-gray-800: #f1f5f9;
    --wl-gray-900: #f8fafc;
    --wl-gray-950: #ffffff;
}

/* ================================================
   2. BASE RESET & TYPOGRAPHY
   ================================================ */
.wl-landing *,
.wl-landing *::before,
.wl-landing *::after {
    box-sizing: border-box;
}

.wl-landing {
    font-family: var(--wl-font-body);
    font-size: var(--wl-text-base);
    line-height: 1.6;
    color: var(--wl-gray-800);
    background-color: var(--wl-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wl-landing h1, .wl-landing h2, .wl-landing h3, 
.wl-landing h4, .wl-landing h5, .wl-landing h6 {
    font-family: var(--wl-font-heading);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--wl-gray-900);
    margin: 0 0 var(--wl-space-4);
}

.wl-landing h1 { font-size: var(--wl-text-5xl); }
.wl-landing h2 { font-size: var(--wl-text-4xl); }
.wl-landing h3 { font-size: var(--wl-text-3xl); }
.wl-landing h4 { font-size: var(--wl-text-2xl); }
.wl-landing h5 { font-size: var(--wl-text-xl); }
.wl-landing h6 { font-size: var(--wl-text-lg); }

.wl-landing p {
    margin: 0 0 var(--wl-space-4);
}

.wl-landing a {
    color: var(--wl-primary);
    text-decoration: none;
    transition: color var(--wl-transition-fast);
}

.wl-landing a:hover {
    color: var(--wl-secondary);
}

/* ================================================
   3. LAYOUT UTILITIES
   ================================================ */
.wl-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--wl-space-6);
}

.wl-container-sm { max-width: 640px; }
.wl-container-md { max-width: 768px; }
.wl-container-lg { max-width: 1024px; }
.wl-container-xl { max-width: 1280px; }
.wl-container-2xl { max-width: 1536px; }

.wl-section {
    padding: var(--wl-space-12) 0;
    width: 100%;
}

.wl-section-sm { 
    padding: var(--wl-space-8) 0; 
    width: 100%;
}

.wl-section-lg { 
    padding: var(--wl-space-16) 0; 
    width: 100%;
}

/* Ensure no empty rows in sections */
.wl-section > .wl-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--wl-space-6);
}

/* Hero sections can have more space */
.wl-hero {
    padding: var(--wl-space-20) 0;
}

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

.wl-grid-cols-2 { 
    grid-template-columns: repeat(2, 1fr);
    align-items: stretch;
}

.wl-grid-cols-3 { 
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

.wl-grid-cols-4 { 
    grid-template-columns: repeat(4, 1fr);
    align-items: stretch;
}

/* Ensure all grid children stretch to fill */
.wl-grid-cols-2 > *,
.wl-grid-cols-3 > *,
.wl-grid-cols-4 > * {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

@media (max-width: 1024px) {
    .wl-grid-cols-4 { 
        grid-template-columns: repeat(2, 1fr);
    }
    .wl-grid-cols-3 { 
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .wl-grid-cols-4,
    .wl-grid-cols-3,
    .wl-grid-cols-2 { 
        grid-template-columns: 1fr;
    }
}

.wl-flex { display: flex; }
.wl-flex-col { flex-direction: column; }
.wl-items-center { align-items: center; }
.wl-justify-center { justify-content: center; }
.wl-justify-between { justify-content: space-between; }
.wl-gap-2 { gap: var(--wl-space-2); }
.wl-gap-4 { gap: var(--wl-space-4); }
.wl-gap-6 { gap: var(--wl-space-6); }
.wl-gap-8 { gap: var(--wl-space-8); }

/* ================================================
   4. NAVIGATION
   ================================================ */
.wl-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--wl-z-fixed);
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    transition: all var(--wl-transition-normal);
}

.wl-nav.wl-nav-scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: var(--wl-shadow-sm);
}

.wl-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 72px;
    padding: 0 var(--wl-space-6);
    max-width: 1280px;
    margin: 0 auto;
    position: relative;
}

.wl-nav-inner > * {
    flex-shrink: 0;
}

.wl-nav-logo {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
    font-family: var(--wl-font-heading);
    font-weight: 700;
    font-size: var(--wl-text-xl);
    color: var(--wl-gray-900);
    text-decoration: none;
}

.wl-nav-logo img {
    height: 40px;
    width: auto;
}

.wl-nav-menu {
    display: flex;
    align-items: center;
    gap: var(--wl-space-1);
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    justify-content: center;
}

.wl-nav-menu li {
    list-style: none;
}

.wl-nav-link {
    display: inline-flex;
    align-items: center;
    padding: var(--wl-space-2) var(--wl-space-4);
    font-size: var(--wl-text-sm);
    font-weight: 500;
    color: var(--wl-gray-600);
    text-decoration: none;
    border-radius: var(--wl-radius-lg);
    transition: all var(--wl-transition-fast);
}

/* The generic `.wl-landing a { color: var(--wl-primary) }` rule (specificity 0,1,1) outranks
   `.wl-nav-link` (0,1,0), so every anchor in the nav was forced to brand blue and only the
   "DLT Services" item showed the intended grey — it is a <button>, which that rule cannot reach.
   The result was one menu item visibly a different colour from all the others.

   Matching the generic rule's specificity here restores the intended resting colour for anchors and
   buttons alike, so the whole bar is consistent and only the active/hovered item is highlighted. */
.wl-landing .wl-nav-link,
.wl-landing a.wl-nav-link {
    color: var(--wl-gray-600);
}

.wl-nav-link:hover,
.wl-nav-link.wl-active,
.wl-landing .wl-nav-link:hover,
.wl-landing .wl-nav-link.wl-active,
.wl-landing a.wl-nav-link:hover,
.wl-landing a.wl-nav-link.wl-active {
    color: var(--wl-primary);
    background: rgba(var(--wl-primary-rgb), 0.08);
}

/* Same collision inside the dropdown: the panel sets its label colour on .wl-nav-dropdown-text,
   but the anchor itself was blue, tinting the description line. */
.wl-landing a.wl-nav-dropdown-link {
    color: var(--wl-gray-600);
}

.wl-nav-actions {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
}

.wl-nav-toggle {
    display: none;
    padding: var(--wl-space-2);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--wl-gray-700);
}

@media (max-width: 768px) {
    .wl-nav-inner {
        flex-wrap: wrap;
    }
    
    .wl-nav-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        background: white;
        padding: var(--wl-space-4);
        border-bottom: 1px solid var(--wl-gray-200);
        box-shadow: var(--wl-shadow-lg);
        z-index: 1000;
        justify-content: flex-start;
        align-items: stretch;
        order: 3;
        width: 100%;
    }
    
    .wl-nav-menu.wl-open {
        display: flex;
    }
    
    .wl-nav-menu li {
        width: 100%;
        list-style: none;
    }
    
    .wl-nav-menu .wl-nav-link {
        width: 100%;
        padding: var(--wl-space-3) var(--wl-space-4);
        display: block;
    }
    
    .wl-nav-actions {
        gap: var(--wl-space-2);
        order: 2;
    }
    
    .wl-nav-actions .wl-btn {
        padding: var(--wl-space-2) var(--wl-space-3);
        font-size: var(--wl-text-xs);
    }
    
    .wl-nav-toggle {
        display: block;
        order: 2;
        margin-left: auto;
    }
}

/* ------------------------------------------------
   Nav dropdowns (parent menu with sub-items)
   Desktop: opens on hover, and on click/keyboard via
   .wl-dropdown-open (set by the nav script) so touch
   and keyboard users are not locked out.
   Mobile: renders inline inside the open nav panel.
   ------------------------------------------------ */
.wl-has-dropdown {
    position: relative;
}

.wl-nav-dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    gap: var(--wl-space-2);
}

.wl-nav-caret {
    font-size: 0.65em;
    opacity: 0.6;
    transition: transform var(--wl-transition-fast);
}

.wl-has-dropdown:hover .wl-nav-caret,
.wl-has-dropdown.wl-dropdown-open .wl-nav-caret {
    transform: rotate(180deg);
}

.wl-nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
    min-width: 320px;
    background: #fff;
    border: 1px solid var(--wl-gray-200);
    border-radius: var(--wl-radius-xl);
    box-shadow: var(--wl-shadow-xl);
    padding: var(--wl-space-2);
    margin: 0;
    list-style: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--wl-transition-fast), transform var(--wl-transition-fast), visibility var(--wl-transition-fast);
    z-index: 1001;
}

/* Keeps the pointer from falling into the 8px gap on the way down. */
.wl-nav-dropdown::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 0;
    right: 0;
    height: 10px;
}

.wl-has-dropdown:hover .wl-nav-dropdown,
.wl-has-dropdown:focus-within .wl-nav-dropdown,
.wl-has-dropdown.wl-dropdown-open .wl-nav-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.wl-nav-dropdown li {
    width: 100%;
}

.wl-nav-dropdown-link {
    display: block;
    padding: var(--wl-space-3) var(--wl-space-4);
    border-radius: var(--wl-radius-lg);
    text-decoration: none;
    transition: background var(--wl-transition-fast);
}

.wl-nav-dropdown-link:hover,
.wl-nav-dropdown-link.wl-active {
    background: rgba(var(--wl-primary-rgb), 0.08);
}

.wl-nav-dropdown-text {
    display: block;
    font-size: var(--wl-text-sm);
    font-weight: 600;
    color: var(--wl-gray-800);
}

.wl-nav-dropdown-link:hover .wl-nav-dropdown-text,
.wl-nav-dropdown-link.wl-active .wl-nav-dropdown-text {
    color: var(--wl-primary);
}

.wl-nav-dropdown-text i {
    width: 18px;
    margin-right: var(--wl-space-2);
    color: var(--wl-primary);
    font-size: 0.9em;
}

.wl-nav-dropdown-desc {
    display: block;
    font-size: var(--wl-text-xs);
    color: var(--wl-gray-500);
    margin-top: 2px;
    padding-left: 26px;
}

@media (max-width: 768px) {
    .wl-nav-menu .wl-nav-dropdown-toggle {
        width: 100%;
        justify-content: space-between;
        text-align: left;
        padding: var(--wl-space-3) var(--wl-space-4);
    }

    .wl-nav-dropdown {
        position: static;
        transform: none;
        min-width: 0;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        box-shadow: none;
        border: 0;
        border-left: 2px solid var(--wl-gray-200);
        border-radius: 0;
        margin: 0 0 var(--wl-space-2) var(--wl-space-4);
        padding: 0 0 0 var(--wl-space-2);
        display: none;
    }

    .wl-nav-dropdown::before {
        display: none;
    }

    /* On touch, only an explicit tap opens it — hover would fire on scroll. */
    .wl-has-dropdown:hover .wl-nav-dropdown,
    .wl-has-dropdown:focus-within .wl-nav-dropdown {
        display: none;
    }

    /* Must repeat the desktop selector's specificity (three classes) or the
       open-state rule above keeps re-applying translateX(-50%) and pushes the
       submenu off the left edge of the phone. */
    .wl-has-dropdown.wl-dropdown-open .wl-nav-dropdown {
        display: block;
        transform: none;
    }

    .wl-nav-dropdown-desc {
        display: none;
    }
}

/* ================================================
   5. BUTTONS
   ================================================ */
.wl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--wl-space-2);
    padding: var(--wl-space-3) var(--wl-space-6);
    font-family: var(--wl-font-body);
    font-size: var(--wl-text-sm);
    font-weight: 600;
    line-height: 1.4;
    text-decoration: none;
    border: none;
    border-radius: var(--wl-radius-lg);
    cursor: pointer;
    transition: all var(--wl-transition-fast);
    white-space: nowrap;
}

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

/* Primary Button */
.wl-btn-primary {
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    color: white !important;
    box-shadow: 0 4px 14px 0 rgba(var(--wl-primary-rgb), 0.35);
}

.wl-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px 0 rgba(var(--wl-primary-rgb), 0.45);
    color: white !important;
}

.wl-btn-primary:active {
    transform: translateY(0);
    color: white !important;
}

/* Secondary Button */
.wl-btn-secondary {
    background: var(--wl-gray-100);
    color: var(--wl-gray-700);
}

.wl-btn-secondary:hover {
    background: var(--wl-gray-200);
}

/* Outline Button */
.wl-btn-outline {
    background: transparent;
    color: var(--wl-primary);
    border: 2px solid currentColor;
}

.wl-btn-outline:hover {
    background: rgba(var(--wl-primary-rgb), 0.08);
}

/* Ghost Button */
.wl-btn-ghost {
    background: transparent;
    color: var(--wl-gray-600);
}

.wl-btn-ghost:hover {
    background: var(--wl-gray-100);
    color: var(--wl-gray-900);
}

/* Button Sizes */
.wl-btn-sm {
    padding: var(--wl-space-2) var(--wl-space-4);
    font-size: var(--wl-text-xs);
}

.wl-btn-lg {
    padding: var(--wl-space-4) var(--wl-space-8);
    font-size: var(--wl-text-base);
}

.wl-btn-xl {
    padding: var(--wl-space-5) var(--wl-space-10);
    font-size: var(--wl-text-lg);
}

/* Ensure white text on buttons with black or dark backgrounds */
.wl-btn[style*="background: #000"],
.wl-btn[style*="background:#000"],
.wl-btn[style*="background: black"],
.wl-btn[style*="background:black"],
.wl-btn[style*="background-color: #000"],
.wl-btn[style*="background-color:#000"],
.wl-btn[style*="background-color: black"],
.wl-btn[style*="background-color:black"],
.wl-btn[style*="bg-black"],
.wl-btn[style*="bg-[#1b1b18]"],
.wl-btn[style*="bg-[#000]"],
.wl-btn.bg-black,
.wl-btn[class*="bg-black"],
.wl-btn[class*="bg-[#1b1b18]"],
.wl-btn[class*="bg-[#000]"] {
    color: white !important;
}

/* Ensure white text on buttons with very dark backgrounds (dark gray, etc.) */
.wl-btn[style*="background: #1b1b18"],
.wl-btn[style*="background:#1b1b18"],
.wl-btn[style*="background-color: #1b1b18"],
.wl-btn[style*="background-color:#1b1b18"],
.wl-btn[style*="background: #0f172a"],
.wl-btn[style*="background:#0f172a"],
.wl-btn[style*="background-color: #0f172a"],
.wl-btn[style*="background-color:#0f172a"],
.wl-btn[style*="background: #1e293b"],
.wl-btn[style*="background:#1e293b"],
.wl-btn[style*="background-color: #1e293b"],
.wl-btn[style*="background-color:#1e293b"] {
    color: white !important;
}

/* General rule: Any button or link with dark background should have white text */
a[class*="bg-black"],
a[class*="bg-[#1b1b18]"],
a[class*="bg-[#000]"],
a[class*="bg-[#0f172a]"],
a[class*="bg-[#1e293b]"],
button[class*="bg-black"],
button[class*="bg-[#1b1b18]"],
button[class*="bg-[#000]"],
button[class*="bg-[#0f172a]"],
button[class*="bg-[#1e293b]"],
a[style*="background: #000"],
a[style*="background:#000"],
a[style*="background: black"],
a[style*="background:black"],
a[style*="background-color: #000"],
a[style*="background-color:#000"],
a[style*="background-color: black"],
a[style*="background-color:black"],
a[style*="background: #1b1b18"],
a[style*="background:#1b1b18"],
a[style*="background-color: #1b1b18"],
a[style*="background-color:#1b1b18"] {
    color: white !important;
}

/* ================================================
   6. CARDS
   ================================================ */
.wl-card {
    background: white;
    border-radius: var(--wl-radius-xl);
    padding: var(--wl-space-6);
    transition: all var(--wl-transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

/* Glass Card Style */
.wl-card-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);
    box-shadow: var(--wl-shadow-sm);
}

.wl-card-glass:hover {
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--wl-shadow-md);
    transform: translateY(-4px);
}

/* Elevated Card Style */
.wl-card-elevated {
    background: white;
    box-shadow: var(--wl-shadow-md);
    border: 1px solid var(--wl-gray-100);
}

.wl-card-elevated:hover {
    box-shadow: var(--wl-shadow-xl);
    transform: translateY(-4px);
}

/* Flat Card Style */
.wl-card-flat {
    background: var(--wl-gray-50);
    border: 1px solid var(--wl-gray-200);
}

.wl-card-flat:hover {
    border-color: var(--wl-gray-300);
    background: white;
}

/* Gradient Card Style */
.wl-card-gradient {
    background: linear-gradient(135deg, rgba(var(--wl-primary-rgb), 0.1) 0%, rgba(var(--wl-secondary-rgb), 0.1) 100%);
    border: 1px solid rgba(var(--wl-primary-rgb), 0.2);
}

.wl-card-gradient:hover {
    transform: translateY(-4px);
    box-shadow: var(--wl-shadow-lg);
}

/* Neon Card Style */
.wl-card-neon {
    background: var(--wl-gray-900);
    border: 1px solid rgba(var(--wl-accent-rgb), 0.3);
    box-shadow: 0 0 20px rgba(var(--wl-accent-rgb), 0.1);
    color: white;
}

.wl-card-neon:hover {
    border-color: var(--wl-accent);
    box-shadow: 0 0 30px rgba(var(--wl-accent-rgb), 0.2), 0 0 60px rgba(var(--wl-accent-rgb), 0.1);
}

/* Dark Glass Card Style */
.wl-card-dark-glass {
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
}

.wl-card-dark-glass:hover {
    background: rgba(15, 23, 42, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Card Components */
.wl-card-body {
    padding: var(--wl-space-5);
}

@media (max-width: 640px) {
    .wl-card-body {
        padding: var(--wl-space-4);
    }
}

.wl-card-title {
    font-family: var(--wl-font-heading);
    font-size: var(--wl-text-xl);
    font-weight: 700;
    color: var(--wl-gray-900);
    margin: 0 0 var(--wl-space-3);
}

.wl-card-text {
    font-size: var(--wl-text-base);
    color: var(--wl-gray-600);
    line-height: 1.6;
    margin: 0;
}

.wl-card-hover {
    box-shadow: var(--wl-shadow-sm);
    border: 1px solid var(--wl-gray-100);
}

.wl-card-hover:hover {
    box-shadow: var(--wl-shadow-xl);
    transform: translateY(-4px);
    border-color: var(--wl-gray-200);
}

/* Icon Box */
.wl-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: var(--wl-radius-xl);
    font-size: 1.5rem;
}

.wl-icon-box-sm {
    width: 48px;
    height: 48px;
    font-size: 1.25rem;
}

.wl-icon-box-lg {
    width: 80px;
    height: 80px;
    font-size: 2rem;
}

.wl-icon-box-primary {
    background: linear-gradient(135deg, rgba(var(--wl-primary-rgb), 0.15) 0%, rgba(var(--wl-primary-rgb), 0.25) 100%);
    color: var(--wl-primary);
}

.wl-icon-box-secondary {
    background: linear-gradient(135deg, rgba(var(--wl-secondary-rgb), 0.15) 0%, rgba(var(--wl-secondary-rgb), 0.25) 100%);
    color: var(--wl-secondary);
}

.wl-icon-box-accent {
    background: linear-gradient(135deg, rgba(var(--wl-accent-rgb), 0.15) 0%, rgba(var(--wl-accent-rgb), 0.25) 100%);
    color: var(--wl-accent);
}

/* Feature List */
.wl-feature-list {
    list-style: none;
    padding: 0;
    margin: var(--wl-space-4) 0 0;
}

.wl-feature-list li {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
    padding: var(--wl-space-2) 0;
    font-size: var(--wl-text-sm);
    color: var(--wl-gray-600);
}

.wl-feature-list li i {
    color: var(--wl-success);
    font-size: 0.875rem;
    flex-shrink: 0;
    width: 16px;
    text-align: center;
}

/* Ensure Font Awesome icons display properly */
.wl-landing .fas,
.wl-landing .far,
.wl-landing .fab,
.wl-landing .fal,
.fas,
.far,
.fab,
.fal {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 6 Pro", "FontAwesome";
    font-weight: 900;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.wl-landing .fab,
.fab {
    font-family: "Font Awesome 6 Brands", "FontAwesome";
    font-weight: 400;
}

.wl-landing .far,
.far {
    font-family: "Font Awesome 6 Free", "FontAwesome";
    font-weight: 400;
}

/* Hide text fallback for icons */
.wl-icon-box i::before,
.wl-feature-icon i::before,
.wl-stat-icon i::before,
.wl-hero-illustration i::before {
    display: block;
}

/* Background Utilities */
.wl-bg-gradient {
    background: linear-gradient(135deg, var(--wl-gray-50) 0%, rgba(var(--wl-primary-rgb), 0.05) 100%);
}

.wl-bg-gray {
    background: var(--wl-gray-50);
}

/* Section Header */
.wl-section-header {
    max-width: 640px;
    margin: 0 auto;
}

.wl-section-header h2 {
    font-size: var(--wl-text-3xl);
    font-weight: 700;
    margin-bottom: var(--wl-space-4);
}

/* Text Utilities */
.wl-text-white {
    color: white;
}

.wl-opacity-80 {
    opacity: 0.8;
}

/* Button Group */
.wl-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wl-space-4);
    flex-wrap: wrap;
}

/* White Button */
.wl-btn-white {
    background: white;
    color: var(--wl-primary);
    box-shadow: var(--wl-shadow-md);
}

.wl-btn-white:hover {
    background: var(--wl-gray-50);
    transform: translateY(-2px);
    box-shadow: var(--wl-shadow-lg);
}

/* Outline White Button */
.wl-btn-outline-white {
    background: transparent !important;
    color: white !important;
    border: 2px solid rgba(255, 255, 255, 0.5) !important;
}

.wl-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: white !important;
    color: white !important;
}

/* Width Utilities */
.wl-w-full {
    width: 100%;
}

/* Margin Auto */
.wl-mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* Form Styles */
.wl-form-group {
    margin-bottom: var(--wl-space-5);
}

.wl-form-label {
    display: block;
    font-size: var(--wl-text-sm);
    font-weight: 500;
    color: var(--wl-gray-700);
    margin-bottom: var(--wl-space-2);
}

.wl-form-control {
    width: 100%;
    padding: var(--wl-space-3) var(--wl-space-4);
    font-size: var(--wl-text-base);
    font-family: var(--wl-font-body);
    color: var(--wl-gray-900);
    background: white;
    border: 1px solid var(--wl-gray-300);
    border-radius: var(--wl-radius-lg);
    transition: all var(--wl-transition-fast);
}

.wl-form-control:focus {
    outline: none;
    border-color: var(--wl-primary);
    box-shadow: 0 0 0 3px rgba(var(--wl-primary-rgb), 0.15);
}

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

/* Alert Styles */
.wl-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--wl-space-3);
    padding: var(--wl-space-4);
    border-radius: var(--wl-radius-lg);
    font-size: var(--wl-text-sm);
}

.wl-alert-success {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.wl-alert-danger {
    background: rgba(239, 68, 68, 0.1);
    color: #b91c1c;
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* CAPTCHA Styles */
.wl-captcha-container {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
}

.wl-captcha-image {
    border-radius: var(--wl-radius-md);
    border: 1px solid var(--wl-gray-200);
    height: 50px;
    width: auto;
}

/* Contact Page Specific Styles */
.wl-contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--wl-space-8);
    align-items: flex-start;
}

@media (max-width: 1024px) {
    .wl-contact-grid {
        grid-template-columns: 1fr;
        gap: var(--wl-space-6);
    }
}

.wl-contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.wl-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--wl-space-4);
}

@media (max-width: 640px) {
    .wl-form-row {
        grid-template-columns: 1fr;
    }
}

.wl-form-textarea {
    resize: vertical;
    min-height: 140px;
}

.wl-required {
    color: var(--wl-danger);
    font-weight: 500;
}

/* Captcha Row */
.wl-captcha-row {
    display: flex;
    align-items: center;
    gap: var(--wl-space-4);
    flex-wrap: wrap;
}

.wl-captcha-box {
    display: flex;
    align-items: center;
    gap: var(--wl-space-2);
    background: var(--wl-gray-50);
    padding: var(--wl-space-2);
    border-radius: var(--wl-radius-lg);
    border: 1px solid var(--wl-gray-200);
}

.wl-captcha-box .wl-captcha-image {
    height: 44px;
    width: auto;
    border-radius: var(--wl-radius-md);
    border: none;
}

.wl-captcha-refresh {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: white;
    border: 1px solid var(--wl-gray-200);
    border-radius: var(--wl-radius-md);
    color: var(--wl-gray-500);
    cursor: pointer;
    transition: all var(--wl-transition-fast);
}

.wl-captcha-refresh:hover {
    background: var(--wl-primary);
    border-color: var(--wl-primary);
    color: white;
}

.wl-captcha-input {
    flex: 1;
    min-width: 150px;
}

@media (max-width: 480px) {
    .wl-captcha-row {
        flex-direction: column;
        align-items: stretch;
    }
    
    .wl-captcha-box {
        justify-content: center;
    }
    
    .wl-captcha-input {
        width: 100%;
    }
}

/* Contact Info Panel */
.wl-contact-info-panel {
    padding: var(--wl-space-8);
    background: linear-gradient(135deg, var(--wl-gray-50) 0%, rgba(var(--wl-primary-rgb), 0.05) 100%);
    border-radius: var(--wl-radius-2xl);
    border: 1px solid var(--wl-gray-100);
}

.wl-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--wl-space-6);
}

.wl-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: var(--wl-space-4);
}

.wl-contact-info-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    color: white;
    border-radius: var(--wl-radius-lg);
    font-size: 1.125rem;
    flex-shrink: 0;
}

.wl-contact-info-content h5 {
    font-size: var(--wl-text-sm);
    font-weight: 600;
    color: var(--wl-gray-900);
    margin: 0 0 var(--wl-space-1);
}

.wl-contact-info-content p,
.wl-contact-info-content a {
    font-size: var(--wl-text-base);
    color: var(--wl-gray-600);
    margin: 0;
    text-decoration: none;
    transition: color var(--wl-transition-fast);
}

.wl-contact-info-content a:hover {
    color: var(--wl-primary);
}

.wl-contact-social h5 {
    font-size: var(--wl-text-sm);
    font-weight: 600;
    color: var(--wl-gray-900);
    margin: 0;
}

/* Contact Info */
.wl-contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--wl-space-6);
}

.wl-contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--wl-space-4);
}

.wl-contact-item h5 {
    font-size: var(--wl-text-sm);
    font-weight: 600;
    color: var(--wl-gray-900);
    margin: 0 0 var(--wl-space-1);
}

/* Social Icons */
.wl-social-icons {
    display: flex;
    gap: var(--wl-space-3);
}

.wl-social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wl-radius-full);
    background: var(--wl-gray-100);
    color: var(--wl-gray-600);
    text-decoration: none;
    transition: all var(--wl-transition-fast);
}

.wl-social-icon:hover {
    background: var(--wl-primary);
    color: white;
}

/* Gap Utilities */
.wl-gap-12 {
    gap: var(--wl-space-12);
}

/* ================================================
   7. HERO SECTION
   ================================================ */
.wl-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 72px;
    overflow: hidden;
}

.wl-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.wl-hero-bg-gradient {
    background: linear-gradient(135deg, 
        var(--wl-primary) 0%, 
        var(--wl-secondary) 50%, 
        var(--wl-accent) 100%
    );
}

.wl-hero-bg-mesh {
    background: 
        radial-gradient(ellipse at 20% 80%, rgba(var(--wl-primary-rgb), 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(var(--wl-secondary-rgb), 0.3) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 50%, rgba(var(--wl-accent-rgb), 0.2) 0%, transparent 50%),
        linear-gradient(180deg, var(--wl-gray-50) 0%, white 100%);
}

.wl-hero-content {
    position: relative;
    z-index: 1;
    width: 100%;
}

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

@media (max-width: 1024px) {
    .wl-hero-split {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

.wl-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--wl-space-2);
    padding: var(--wl-space-2) var(--wl-space-4);
    background: rgba(var(--wl-primary-rgb), 0.1);
    color: var(--wl-primary);
    font-size: var(--wl-text-sm);
    font-weight: 500;
    border-radius: var(--wl-radius-full);
    margin-bottom: var(--wl-space-6);
}

.wl-hero-title {
    font-size: var(--wl-text-6xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: var(--wl-space-6);
    background: linear-gradient(135deg, var(--wl-gray-900) 0%, var(--wl-gray-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wl-hero-title-gradient {
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.wl-hero-subtitle {
    font-size: var(--wl-text-xl);
    color: var(--wl-gray-600);
    margin-bottom: var(--wl-space-8);
    line-height: 1.6;
}

.wl-hero-actions {
    display: flex;
    gap: var(--wl-space-4);
    flex-wrap: wrap;
}

@media (max-width: 1024px) {
    .wl-hero-actions {
        justify-content: center;
    }
}

.wl-hero-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wl-hero-illustration {
    width: 100%;
    max-width: 500px;
    aspect-ratio: 1;
    border-radius: var(--wl-radius-2xl);
    background: linear-gradient(135deg, rgba(var(--wl-primary-rgb), 0.2) 0%, rgba(var(--wl-secondary-rgb), 0.2) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8rem;
    color: var(--wl-primary);
}

/* Floating Elements Animation */
.wl-hero-float {
    animation: wl-float 6s ease-in-out infinite;
}

@keyframes wl-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* ================================================
   8. FEATURES SECTION
   ================================================ */
.wl-features {
    position: relative;
}

.wl-features-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--wl-space-16);
}

.wl-features-header h2 {
    margin-bottom: var(--wl-space-4);
}

.wl-features-header p {
    color: var(--wl-gray-600);
    font-size: var(--wl-text-lg);
}

/* Bento Grid Layout */
.wl-features-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto;
    gap: var(--wl-space-6);
}

/* Cards must fill their cell, otherwise a wide card sits short and the row looks ragged. */
.wl-features-bento .wl-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* The first card used to also `grid-row: span 2`, which made it twice the height of its
   neighbours while carrying exactly the same one-line description — a 604x414 box mostly full of
   whitespace. With six equal-weight features, 2+1+1 / 2+1+1 tiles into two clean rows with no
   half-empty third row. */
.wl-features-bento .wl-feature:nth-child(1) {
    grid-column: span 2;
}

.wl-features-bento .wl-feature:nth-child(2),
.wl-features-bento .wl-feature:nth-child(3) {
    grid-column: span 1;
}

/* Explicit start + span. `grid-column: span 2` followed by `grid-column-start: 1` resolves to
   start 1 / end auto, i.e. a single column — the card silently lost its span. */
.wl-features-bento .wl-feature:nth-child(4) {
    grid-column: 1 / span 2;
}

.wl-features-bento .wl-feature:nth-child(5),
.wl-features-bento .wl-feature:nth-child(6) {
    grid-column: span 1;
}

@media (max-width: 1024px) {
    .wl-features-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .wl-features-bento .wl-feature {
        grid-column: span 1 !important;
        grid-row: span 1 !important;
    }
}

@media (max-width: 640px) {
    .wl-features-bento {
        grid-template-columns: 1fr;
    }
}

.wl-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wl-space-6);
    align-items: stretch;
}

.wl-features-grid > * {
    display: flex;
    flex-direction: column;
    height: 100%;
}

@media (max-width: 1024px) {
    .wl-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.wl-features-list {
    display: flex;
    flex-direction: column;
    gap: var(--wl-space-4);
}

.wl-feature {
    position: relative;
}

.wl-feature-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--wl-radius-xl);
    font-size: 1.5rem;
    margin-bottom: var(--wl-space-4);
}

.wl-feature-icon-primary {
    background: linear-gradient(135deg, rgba(var(--wl-primary-rgb), 0.15) 0%, rgba(var(--wl-primary-rgb), 0.05) 100%);
    color: var(--wl-primary);
}

.wl-feature-icon-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    color: var(--wl-success);
}

.wl-feature-icon-warning {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.05) 100%);
    color: var(--wl-warning);
}

.wl-feature-icon-info {
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.15) 0%, rgba(6, 182, 212, 0.05) 100%);
    color: var(--wl-info);
}

.wl-feature-icon-danger {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15) 0%, rgba(239, 68, 68, 0.05) 100%);
    color: var(--wl-danger);
}

.wl-feature-icon-secondary {
    background: linear-gradient(135deg, rgba(var(--wl-secondary-rgb), 0.15) 0%, rgba(var(--wl-secondary-rgb), 0.05) 100%);
    color: var(--wl-secondary);
}

.wl-feature h5 {
    margin-bottom: var(--wl-space-2);
}

.wl-feature p {
    color: var(--wl-gray-600);
    font-size: var(--wl-text-sm);
    margin: 0;
}

/* ================================================
   9. STATS SECTION
   ================================================ */
.wl-stats {
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    color: white;
}

.wl-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--wl-space-8);
    text-align: center;
}

@media (max-width: 1024px) {
    .wl-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.wl-stat {
    position: relative;
}

.wl-stat-icon {
    font-size: 2rem;
    opacity: 0.5;
    margin-bottom: var(--wl-space-2);
}

.wl-stat-value {
    font-size: var(--wl-text-4xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    margin-bottom: var(--wl-space-2);
}

.wl-stat-label {
    font-size: var(--wl-text-sm);
    opacity: 0.8;
}

/* Animated Counter */
.wl-stat-value[data-animate] {
    animation: wl-count-up 2s ease-out forwards;
}

/* ================================================
   10. PRICING SECTION
   ================================================ */
.wl-pricing-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--wl-space-12);
}

.wl-pricing-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--wl-space-4);
    margin-top: var(--wl-space-6);
    font-size: var(--wl-text-sm);
}

.wl-pricing-toggle-switch {
    position: relative;
    width: 56px;
    height: 32px;
    background: var(--wl-gray-200);
    border-radius: var(--wl-radius-full);
    cursor: pointer;
    transition: all var(--wl-transition-normal);
}

.wl-pricing-toggle-switch.active {
    background: var(--wl-primary);
}

.wl-pricing-toggle-switch::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: all var(--wl-transition-normal);
    box-shadow: var(--wl-shadow-sm);
}

.wl-pricing-toggle-switch.active::after {
    transform: translateX(24px);
}

.wl-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wl-space-6);
    align-items: stretch;
}

.wl-pricing-grid > * {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

@media (max-width: 1024px) {
    .wl-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin: 0 auto;
    }
}

.wl-pricing-card {
    position: relative;
    padding: var(--wl-space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.wl-pricing-card .wl-pricing-features {
    flex: 1;
    margin-bottom: var(--wl-space-8);
}

.wl-pricing-card-popular {
    transform: scale(1.05);
    z-index: 1;
}

.wl-pricing-card-popular::before {
    content: 'Most Popular';
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--wl-space-1) var(--wl-space-4);
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    color: white;
    font-size: var(--wl-text-xs);
    font-weight: 600;
    border-radius: var(--wl-radius-full);
}

@media (max-width: 1024px) {
    .wl-pricing-card-popular {
        transform: scale(1);
    }
}

.wl-pricing-name {
    font-size: var(--wl-text-xl);
    font-weight: 700;
    margin-bottom: var(--wl-space-2);
}

.wl-pricing-description {
    color: var(--wl-gray-600);
    font-size: var(--wl-text-sm);
    margin-bottom: var(--wl-space-6);
}

/* Amount and unit sat inline, so "Custom" + "Contact for pricing" ran together on one cramped
   line while "₹0.20" + "per SMS" happened to fit. Stacking the unit under the amount keeps all
   three cards aligned regardless of how long the label is. */
.wl-pricing-price {
    margin-bottom: var(--wl-space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-height: 4.5rem;
    justify-content: center;
}

.wl-pricing-amount {
    font-size: var(--wl-text-4xl);
    font-weight: 800;
    color: var(--wl-gray-900);
    line-height: 1.1;
}

.wl-pricing-unit {
    color: var(--wl-gray-500);
    font-size: var(--wl-text-sm);
}

.wl-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--wl-space-8);
    text-align: left;
}

.wl-pricing-features li {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
    padding: var(--wl-space-2) 0;
    font-size: var(--wl-text-sm);
    color: var(--wl-gray-700);
}

.wl-pricing-features li::before {
    content: '✓';
    color: var(--wl-success);
    font-weight: 700;
    flex-shrink: 0;
    width: 20px;
}

.wl-pricing-features li i {
    color: var(--wl-success);
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

/* Fix icon display issues */
.wl-icon-box i,
.wl-feature-icon i,
.wl-stat-icon i,
.wl-hero-illustration i {
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
}

/* Ensure proper spacing for cards */
.wl-card {
    display: flex;
    flex-direction: column;
}

.wl-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Fix grid alignment issues */
.wl-grid {
    align-items: stretch;
    display: grid;
}

.wl-grid > * {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Ensure grid items don't overflow */
.wl-grid .wl-card {
    overflow: hidden;
    height: 100%;
}

/* Fix services grid - ensure proper alignment for 6 items in 2 columns */
.wl-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

/* Ensure all grid items fill available space */
.wl-grid .wl-card,
.wl-grid .wl-feature,
.wl-grid .wl-pricing-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Fix button alignment in groups */
.wl-btn-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--wl-space-4);
    flex-wrap: wrap;
}

.wl-btn-group .wl-btn {
    flex-shrink: 0;
}

/* Additional utility fixes */
.wl-text-white {
    color: white !important;
}

.wl-opacity-80 {
    opacity: 0.8;
}

/* Ensure proper body padding for fixed nav */
.wl-landing {
    padding-top: 0;
}

body.wl-landing {
    padding-top: 0;
}

/* Hero subpage styles */
.wl-hero-subpage {
    padding: var(--wl-space-16) 0 var(--wl-space-12);
    text-align: center;
    background: linear-gradient(135deg, var(--wl-gray-50) 0%, rgba(var(--wl-primary-rgb), 0.05) 100%);
    width: 100%;
}

/* Ensure no empty spaces between sections */
.wl-section + .wl-section {
    margin-top: 0;
}

/* Fix services page specific grid */
section .wl-grid.wl-grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wl-space-8);
    align-items: stretch;
}

section .wl-grid.wl-grid-cols-2 > * {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.wl-hero-subpage .wl-hero-title {
    font-size: var(--wl-text-4xl);
    margin-bottom: var(--wl-space-4);
}

.wl-hero-subpage .wl-hero-subtitle {
    font-size: var(--wl-text-lg);
    color: var(--wl-gray-600);
}

/* Fix section spacing consistency */
.wl-section:first-of-type {
    padding-top: var(--wl-space-16);
}

/* Remove any empty rows or spaces */
.wl-section:empty {
    display: none;
}

/* Ensure containers don't create empty spaces */
.wl-container:empty {
    display: none;
}

/* Fix hero section spacing */
.wl-hero {
    min-height: calc(100vh - 72px);
    display: flex;
    align-items: center;
    padding: var(--wl-space-20) 0;
    position: relative;
    overflow: hidden;
}

/* Ensure cards have equal height in grids */
.wl-grid .wl-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.wl-grid .wl-card .wl-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* Ensure feature lists push to bottom */
.wl-card-body .wl-feature-list {
    margin-top: auto;
    padding-top: var(--wl-space-4);
}

/* Fix card content alignment */
.wl-card-body > *:last-child {
    margin-bottom: 0;
}

.wl-card-body > *:first-child {
    margin-top: 0;
}

/* Fix card hover effects */
.wl-card-hover {
    transition: all var(--wl-transition-normal);
    cursor: pointer;
}

.wl-card-hover:hover {
    transform: translateY(-4px);
}

/* Ensure proper card content spacing */
.wl-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.wl-card-body > *:last-child {
    margin-bottom: 0;
}

.wl-card-body > *:first-child {
    margin-top: 0;
}

.wl-card-body .wl-feature-list {
    margin-top: auto;
    padding-top: var(--wl-space-4);
}

/* Ensure icon boxes don't create spacing issues */
.wl-card-body .wl-icon-box {
    flex-shrink: 0;
    margin-bottom: var(--wl-space-4);
}

/* Fix button full width */
.wl-btn-block,
.w-100 {
    width: 100%;
    display: block;
}

/* Fix form input alignment */
.wl-form-control {
    width: 100%;
    box-sizing: border-box;
}

/* Fix list item spacing */
.wl-feature-list li:last-child {
    margin-bottom: 0;
}

/* Ensure proper text alignment */
.wl-text-center {
    text-align: center;
}

.wl-text-left {
    text-align: left;
}

.wl-text-right {
    text-align: right;
}

/* ================================================
   11. TESTIMONIALS SECTION
   ================================================ */
.wl-testimonials-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--wl-space-12);
}

.wl-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--wl-space-6);
}

@media (max-width: 1024px) {
    .wl-testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.wl-testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wl-testimonial-content {
    flex: 1;
    font-size: var(--wl-text-base);
    color: var(--wl-gray-700);
    line-height: 1.7;
    margin-bottom: var(--wl-space-6);
}

.wl-testimonial-content::before {
    content: '"';
    font-size: 3rem;
    line-height: 1;
    color: var(--wl-primary);
    opacity: 0.3;
    display: block;
    margin-bottom: var(--wl-space-2);
}

.wl-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
}

.wl-testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: var(--wl-text-lg);
}

.wl-testimonial-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.wl-testimonial-info {
    display: flex;
    flex-direction: column;
}

.wl-testimonial-name {
    font-weight: 600;
    color: var(--wl-gray-900);
}

.wl-testimonial-role {
    font-size: var(--wl-text-sm);
    color: var(--wl-gray-500);
}

/* ================================================
   12. FAQ SECTION
   ================================================ */
.wl-faq-header {
    text-align: center;
    max-width: 640px;
    margin: 0 auto var(--wl-space-12);
}

.wl-faq-list {
    max-width: 800px;
    margin: 0 auto;
}

.wl-faq-item {
    border-bottom: 1px solid var(--wl-gray-200);
}

.wl-faq-question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: var(--wl-space-5) 0;
    background: none;
    border: none;
    font-family: inherit;
    font-size: var(--wl-text-base);
    font-weight: 600;
    color: var(--wl-gray-900);
    text-align: left;
    cursor: pointer;
    transition: all var(--wl-transition-fast);
}

.wl-faq-question:hover {
    color: var(--wl-primary);
}

.wl-faq-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wl-gray-400);
    transition: all var(--wl-transition-normal);
}

.wl-faq-item.active .wl-faq-icon {
    transform: rotate(180deg);
    color: var(--wl-primary);
}

.wl-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all var(--wl-transition-normal);
}

.wl-faq-item.active .wl-faq-answer {
    max-height: 500px;
}

.wl-faq-answer-content {
    padding-bottom: var(--wl-space-5);
    color: var(--wl-gray-600);
    line-height: 1.7;
}

/* ================================================
   13. CTA SECTION
   ================================================ */
.wl-cta {
    position: relative;
    text-align: center;
    background: linear-gradient(135deg, var(--wl-primary) 0%, var(--wl-secondary) 100%);
    color: white;
    overflow: hidden;
}

.wl-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.wl-cta-content {
    position: relative;
    z-index: 1;
    max-width: 640px;
    margin: 0 auto;
}

.wl-cta h2 {
    color: white;
    margin-bottom: var(--wl-space-4);
}

.wl-cta p {
    opacity: 0.9;
    font-size: var(--wl-text-lg);
    margin-bottom: var(--wl-space-8);
}

.wl-cta-actions {
    display: flex;
    gap: var(--wl-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

.wl-cta .wl-btn-primary {
    background: white !important;
    color: var(--wl-primary) !important;
    box-shadow: var(--wl-shadow-lg);
}

.wl-cta .wl-btn-primary:hover {
    background: var(--wl-gray-100) !important;
    color: var(--wl-primary) !important;
}

.wl-cta .wl-btn-outline {
    border-color: rgba(255, 255, 255, 0.5);
    color: white;
}

.wl-cta .wl-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: white;
}

/* ================================================
   14. FOOTER
   ================================================ */
.wl-footer {
    background: var(--wl-gray-900);
    color: var(--wl-gray-400);
    padding: var(--wl-space-16) 0 var(--wl-space-8);
}

.wl-footer-grid {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--wl-space-12);
    margin-bottom: var(--wl-space-12);
}

@media (max-width: 1024px) {
    .wl-footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.wl-footer-brand {
    max-width: 280px;
}

.wl-footer-logo {
    display: flex;
    align-items: center;
    gap: var(--wl-space-3);
    font-family: var(--wl-font-heading);
    font-weight: 700;
    font-size: var(--wl-text-xl);
    color: white;
    margin-bottom: var(--wl-space-4);
}

.wl-footer-logo img {
    height: 32px;
    width: auto;
}

.wl-footer-description {
    font-size: var(--wl-text-sm);
    line-height: 1.7;
    margin-bottom: var(--wl-space-6);
}

.wl-footer-social {
    display: flex;
    gap: var(--wl-space-3);
}

.wl-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wl-radius-lg);
    background: rgba(255, 255, 255, 0.05);
    color: var(--wl-gray-400);
    transition: all var(--wl-transition-fast);
}

.wl-footer-social a:hover {
    background: var(--wl-primary);
    color: white;
}

.wl-footer-column h6 {
    color: white;
    font-size: var(--wl-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--wl-space-4);
}

.wl-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.wl-footer-links li {
    margin-bottom: var(--wl-space-2);
}

.wl-footer-links a {
    color: var(--wl-gray-400);
    font-size: var(--wl-text-sm);
    transition: all var(--wl-transition-fast);
}

.wl-footer-links a:hover {
    color: white;
}

.wl-footer-newsletter {
    margin-top: var(--wl-space-4);
}

.wl-footer-newsletter-form {
    display: flex;
    gap: var(--wl-space-2);
}

.wl-footer-newsletter-input {
    flex: 1;
    padding: var(--wl-space-3) var(--wl-space-4);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--wl-radius-lg);
    color: white;
    font-size: var(--wl-text-sm);
}

.wl-footer-newsletter-input::placeholder {
    color: var(--wl-gray-500);
}

.wl-footer-newsletter-input:focus {
    outline: none;
    border-color: var(--wl-primary);
}

.wl-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: var(--wl-space-8);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 640px) {
    .wl-footer-bottom {
        flex-direction: column;
        gap: var(--wl-space-4);
        text-align: center;
    }
}

.wl-footer-copyright {
    font-size: var(--wl-text-sm);
}

.wl-footer-legal {
    display: flex;
    gap: var(--wl-space-6);
}

.wl-footer-legal a {
    color: var(--wl-gray-400);
    font-size: var(--wl-text-sm);
}

.wl-footer-legal a:hover {
    color: white;
}

/* ================================================
   15. ANIMATIONS
   ================================================ */
@keyframes wl-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wl-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes wl-scale-in {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes wl-slide-in-right {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.wl-animate-fade-in {
    animation: wl-fade-in 0.6s ease-out forwards;
}

.wl-animate-fade-in-up {
    animation: wl-fade-in-up 0.6s ease-out forwards;
}

.wl-animate-scale-in {
    animation: wl-scale-in 0.5s ease-out forwards;
}

.wl-animate-slide-in-right {
    animation: wl-slide-in-right 0.6s ease-out forwards;
}

/* Stagger animations */
/* Pure-CSS stagger — no JS required, so `opacity: 0` here is safe: the animation always runs and
   ends at opacity 1 (`forwards`). */
.wl-animate-stagger > * {
    opacity: 0;
    animation: wl-fade-in-up 0.5s ease-out forwards;
}

/* With reduced motion the animation is suppressed, which would otherwise strand the element at
   opacity 0 and hide the content outright. */
@media (prefers-reduced-motion: reduce) {
    .wl-animate-stagger > * {
        opacity: 1;
        animation: none;
    }
}

.wl-animate-stagger > *:nth-child(1) { animation-delay: 0.1s; }
.wl-animate-stagger > *:nth-child(2) { animation-delay: 0.2s; }
.wl-animate-stagger > *:nth-child(3) { animation-delay: 0.3s; }
.wl-animate-stagger > *:nth-child(4) { animation-delay: 0.4s; }
.wl-animate-stagger > *:nth-child(5) { animation-delay: 0.5s; }
.wl-animate-stagger > *:nth-child(6) { animation-delay: 0.6s; }

/* Scroll-triggered animations */
/* Scroll reveal — progressive enhancement.
 *
 * `.wl-reveal` used to set `opacity: 0` unconditionally, so the content was hidden the moment the
 * CSS loaded and only became visible if JavaScript later added `.wl-visible`. Any failure of that
 * script — blocked JS, an observer that never fires, a print or crawl — left large parts of the
 * page permanently blank. Measured on the live site: 8 of 22 revealed blocks were still invisible
 * on first paint, including the "Why Choose Us?" heading, all four statistics, and the pricing and
 * FAQ headings.
 *
 * The hidden state now applies only when the document is marked JS-capable (`.wl-js` is set by
 * inline script before first paint), so without JS everything simply renders. */
.wl-js .wl-reveal {
    opacity: 0;
    transform: translateY(30px);
}

.wl-reveal {
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.wl-js .wl-reveal.wl-visible,
.wl-reveal.wl-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Respect a user's reduced-motion preference: show content, skip the movement. */
@media (prefers-reduced-motion: reduce) {
    .wl-js .wl-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ================================================
   16. UTILITY CLASSES
   ================================================ */
.wl-text-center { text-align: center; }
.wl-text-left { text-align: left; }
.wl-text-right { text-align: right; }

.wl-text-primary { color: var(--wl-primary); }
.wl-text-secondary { color: var(--wl-secondary); }
.wl-text-muted { color: var(--wl-gray-500); }

.wl-bg-primary { background-color: var(--wl-primary); }
.wl-bg-secondary { background-color: var(--wl-secondary); }
.wl-bg-light { background-color: var(--wl-gray-50); }
.wl-bg-dark { background-color: var(--wl-gray-900); }

/* Ensure proper button styling in primary background sections */
.wl-bg-primary .wl-btn-primary:not(.wl-btn-white):not(.wl-btn-outline-white) {
    background: white !important;
    color: var(--wl-primary) !important;
}

.wl-bg-primary .wl-btn-outline:not(.wl-btn-outline-white) {
    border-color: rgba(255, 255, 255, 0.5) !important;
    color: white !important;
}

.wl-bg-primary .wl-btn-outline:not(.wl-btn-outline-white):hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: white !important;
    color: white !important;
}

/* Margin Utilities */
.wl-mt-0 { margin-top: 0; }
.wl-mt-1 { margin-top: var(--wl-space-1); }
.wl-mt-2 { margin-top: var(--wl-space-2); }
.wl-mt-3 { margin-top: var(--wl-space-3); }
.wl-mt-4 { margin-top: var(--wl-space-4); }
.wl-mt-5 { margin-top: var(--wl-space-5); }
.wl-mt-6 { margin-top: var(--wl-space-6); }
.wl-mt-8 { margin-top: var(--wl-space-8); }
.wl-mt-10 { margin-top: var(--wl-space-10); }
.wl-mt-12 { margin-top: var(--wl-space-12); }

.wl-mb-0 { margin-bottom: 0; }
.wl-mb-1 { margin-bottom: var(--wl-space-1); }
.wl-mb-2 { margin-bottom: var(--wl-space-2); }
.wl-mb-3 { margin-bottom: var(--wl-space-3); }
.wl-mb-4 { margin-bottom: var(--wl-space-4); }
.wl-mb-5 { margin-bottom: var(--wl-space-5); }
.wl-mb-6 { margin-bottom: var(--wl-space-6); }
.wl-mb-8 { margin-bottom: var(--wl-space-8); }
.wl-mb-10 { margin-bottom: var(--wl-space-10); }
.wl-mb-12 { margin-bottom: var(--wl-space-12); }

.wl-ml-0 { margin-left: 0; }
.wl-ml-auto { margin-left: auto; }
.wl-mr-0 { margin-right: 0; }
.wl-mr-auto { margin-right: auto; }

/* Padding Utilities */
.wl-p-4 { padding: var(--wl-space-4); }
.wl-p-6 { padding: var(--wl-space-6); }
.wl-p-8 { padding: var(--wl-space-8); }

.wl-py-4 { padding-top: var(--wl-space-4); padding-bottom: var(--wl-space-4); }
.wl-py-6 { padding-top: var(--wl-space-6); padding-bottom: var(--wl-space-6); }
.wl-py-8 { padding-top: var(--wl-space-8); padding-bottom: var(--wl-space-8); }

.wl-px-4 { padding-left: var(--wl-space-4); padding-right: var(--wl-space-4); }
.wl-px-6 { padding-left: var(--wl-space-6); padding-right: var(--wl-space-6); }
.wl-px-8 { padding-left: var(--wl-space-8); padding-right: var(--wl-space-8); }

.wl-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* ================================================
   17. RESPONSIVE ADJUSTMENTS
   ================================================ */
@media (max-width: 640px) {
    .wl-section {
        padding: var(--wl-space-8) 0;
    }
    
    .wl-section-sm {
        padding: var(--wl-space-6) 0;
    }
    
    .wl-hero {
        min-height: auto;
        padding: var(--wl-space-16) 0 var(--wl-space-12);
    }
    
    .wl-hero-title {
        font-size: var(--wl-text-4xl);
    }
    
    .wl-hero-subtitle {
        font-size: var(--wl-text-base);
    }
    
    .wl-hero-actions {
        flex-direction: column;
    }
    
    .wl-hero-actions .wl-btn {
        width: 100%;
    }
    
    /* Reduce gaps on mobile */
    .wl-gap-8 {
        gap: var(--wl-space-4);
    }
    
    .wl-gap-12 {
        gap: var(--wl-space-6);
    }
    
    /* Fix card padding on mobile */
    .wl-card-body {
        padding: var(--wl-space-4);
    }
    
    /* Fix icon box size on mobile */
    .wl-icon-box {
        width: 48px;
        height: 48px;
        font-size: 1.25rem;
    }
    
    /* Fix navigation actions on mobile */
    .wl-nav-actions {
        display: none;
    }
    
    .wl-nav-menu.wl-open + .wl-nav-actions {
        display: flex;
        width: 100%;
        padding-top: var(--wl-space-4);
        border-top: 1px solid var(--wl-gray-200);
        margin-top: var(--wl-space-4);
    }
    
    .wl-nav-menu.wl-open + .wl-nav-actions .wl-btn {
        flex: 1;
        justify-content: center;
    }
}

/* ================================================
   19. TIMELINE COMPONENT
   ================================================ */
.wl-timeline {
    position: relative;
    padding-left: var(--wl-space-8);
    max-width: 800px;
    margin: 0 auto;
}

.wl-timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--wl-gray-200);
}

.wl-timeline-item {
    position: relative;
    padding-bottom: var(--wl-space-8);
    padding-left: var(--wl-space-6);
}

.wl-timeline-marker {
    position: absolute;
    left: -20px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--wl-primary);
    border: 3px solid white;
    box-shadow: 0 0 0 2px var(--wl-gray-200);
}

.wl-timeline-content {
    background: white;
    padding: var(--wl-space-4);
    border-radius: var(--wl-radius-lg);
    box-shadow: var(--wl-shadow-sm);
}

.wl-timeline-date {
    font-size: var(--wl-text-sm);
    font-weight: 600;
    color: var(--wl-primary);
    margin-bottom: var(--wl-space-2);
}

.wl-timeline-content h4 {
    font-size: var(--wl-text-lg);
    font-weight: 600;
    margin-bottom: var(--wl-space-2);
    color: var(--wl-gray-900);
}

.wl-timeline-content p {
    color: var(--wl-gray-600);
    margin: 0;
}

@media (max-width: 768px) {
    .wl-timeline {
        padding-left: var(--wl-space-6);
    }
    
    .wl-timeline-marker {
        left: -16px;
    }
}

/* ================================================
   18. PRINT STYLES
   ================================================ */
@media print {
    .wl-nav,
    .wl-footer,
    .wl-cta {
        display: none;
    }
    
    .wl-landing {
        background: white;
        color: black;
    }
    
    .wl-card {
        break-inside: avoid;
    }
}