/*
Theme Name: SimpleBlend New
Theme URI: https://simpleblend.com
Author: SimpleBlend Team
Author URI: https://simpleblend.com
Description: A modern, professional WordPress theme for SimpleBlend - Marketing Intelligence for Home Service Businesses
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: simpleblend
Tags: business, marketing, one-column, responsive-layout, custom-colors

SimpleBlend is a custom WordPress theme designed for marketing intelligence and home service businesses.
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary: #1E1B4B;
    --primary-light: #312E81;
    --primary-soft: rgba(30, 27, 75, 0.06);
    --accent: #6366F1;
    --accent-hover: #4F46E5;
    --accent-soft: rgba(99, 102, 241, 0.10);
    --success: #10B981;
    --success-soft: rgba(16, 185, 129, 0.10);
    --error: #EF4444;
    --error-soft: rgba(239, 68, 68, 0.10);
    --white: #FFFFFF;
    --gray-50: #F8FAFC;
    --gray-100: #F1F5F9;
    --gray-200: #E2E8F0;
    --gray-300: #CBD5E1;
    --gray-400: #94A3B8;
    --gray-500: #64748B;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1E293B;
    --gray-900: #0F172A;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-3xl: 24px;
    --radius-full: 9999px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

html { scroll-behavior: smooth; }


#wpadminbar {
  height: 28px;
  left: 0;
  min-width: 600px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 99999;
}

body {
    font-family: var(--font-body);
    background: var(--white);
    color: var(--gray-600);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

.container {
    max-width: 1480px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}

/* Navigation */
.nav-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-4) var(--space-6);
    transition: all 0.3s ease;
}
.nav-wrapper.scrolled { padding: var(--space-2) var(--space-6); }
.nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 56px;
    padding: 0 var(--space-6);
    background: var(--white);
    border-radius: var(--radius-2xl);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
    max-width: 1480px;
    margin: 0 auto;
}
.nav-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    text-decoration: none;
}
.nav-logo-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.nav-logo-icon img {
    max-width: 30px;
}
.nav-logo-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}
.nav-links {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
}
.nav-item { position: relative; }
.nav-link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}
.nav-link:hover { color: var(--gray-900); }
.nav-link.active { color: var(--gray-900); }
.nav-link i {
    font-size: 0.625rem;
    transition: transform 0.2s ease;
}
.nav-item:hover .nav-link i { transform: rotate(180deg); }
.nav-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 160px;
    padding: var(--space-2);
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}
.nav-item:hover .nav-dropdown {
    opacity: 1;
    visibility: visible;
}
.dropdown-link {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}
.dropdown-link:hover {
    color: var(--gray-900);
    background: var(--gray-50);
}
.nav-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}
.nav-login {
    padding: var(--space-2) var(--space-4);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}
.nav-login:hover { color: var(--gray-900); }
.nav-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-5);
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    background: var(--primary);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}
.nav-cta:hover { background: var(--primary-light); }
.mobile-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
}
.mobile-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--gray-900);
    position: relative;
    transition: all 0.3s ease;
}
.mobile-toggle span::before,
.mobile-toggle span::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: var(--gray-900);
    transition: all 0.3s ease;
}
.mobile-toggle span::before { top: -6px; }
.mobile-toggle span::after { bottom: -6px; }
.mobile-toggle.active span {
    background: transparent;
}
.mobile-toggle.active span::before {
    top: 0;
    transform: rotate(45deg);
}
.mobile-toggle.active span::after {
    bottom: 0;
    transform: rotate(-45deg);
}

/* Mobile Menu Styles */
@media (max-width: 768px) {
    .nav-links.mobile-active {
        display: flex;
        position: fixed;
        top: 70px;
        left: 0;
        right: 0;
        flex-direction: column;
        background: white;
        padding: var(--space-4);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        animation: slideDown 0.3s ease;
    }

    .nav-links.mobile-active .nav-item {
        width: 100%;
    }

    .nav-links.mobile-active .nav-link {
        padding: var(--space-3);
        display: block;
    }

    .nav-links.mobile-active .nav-dropdown {
        position: static;
        display: none;
        box-shadow: none;
        margin-top: var(--space-2);
        margin-left: var(--space-2);
        background: var(--gray-50);
        border-radius: var(--radius-md);
        padding: var(--space-2);
        z-index: 10;
        opacity: 1 !important;
        visibility: visible !important;
        transition: none;
        transform: none;
    }

    .nav-links.mobile-active .nav-item.dropdown-open .nav-dropdown {
        display: block !important;
        animation: slideDown 0.2s ease;
    }

    .nav-links.mobile-active .dropdown-link {
        color: var(--gray-900);
        font-weight: 500;
        padding: var(--space-3) var(--space-4);
        display: block;
    }

    .nav-links.mobile-active .dropdown-link:hover {
        background: var(--white);
    }

    /* Show nav-actions in mobile menu */
    .nav-links.mobile-active ~ .nav-actions {
        display: flex;
        position: fixed;
        top: auto;
        left: 0;
        right: 0;
        flex-direction: column;
        background: white;
        padding: var(--space-4);
        padding-top: 0;
        gap: var(--space-3);
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        z-index: 999;
        border-top: 1px solid var(--gray-200);
    }

    .nav-links.mobile-active ~ .nav-actions .nav-login {
        display: flex;
        justify-content: center;
        width: 100%;
        padding: var(--space-3);
        border: 1px solid var(--gray-300);
        border-radius: var(--radius-lg);
        color: var(--gray-900);
    }

    .nav-links.mobile-active ~ .nav-actions .nav-cta {
        width: 100%;
        justify-content: center;
        padding: var(--space-3);
    }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 100px;
    overflow: hidden;
}
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 0;
    object-fit: cover;
}
.hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg,
        rgba(241, 240, 251, 0.95) 0%,
        rgba(248, 250, 252, 0.85) 40%,
        rgba(255, 255, 255, 0.75) 70%,
        rgba(255, 255, 255, 0.95) 100%
    );
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: var(--space-8) 0 0;
}
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-8);
    text-align: center;
    flex: 1;
}
.hero-text {
    max-width: 680px;
    margin: 0 auto;
    animation: fadeInUp 0.8s ease-out;
}
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: var(--space-6);
    box-shadow: var(--shadow-sm);
}
.hero-badge i { color: var(--accent); }
.hero-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.1;
    margin-bottom: var(--space-5);
    letter-spacing: -0.02em;
}
.hero-title .highlight {
    background: linear-gradient(135deg, var(--accent) 0%, #8B5CF6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.hero-subtitle {
    font-size: 1.125rem;
    color: var(--gray-500);
    line-height: 1.7;
    margin-bottom: var(--space-8);
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}
.hero-buttons {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    margin-bottom: var(--space-6);
}
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-6);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}
.btn-primary {
    background: var(--primary);
    color: var(--white);
}
.btn-primary:hover {
    background: var(--primary-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}
.btn-secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 1px solid var(--gray-300);
}
.btn-secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
}
.hero-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    font-size: 1rem;
    color: var(--gray-400);
}
.hero-trust span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.hero-trust i {
    color: var(--success);
    font-size: 1rem;
}

/* Hero Data Visualization Panel */
.hero-visual-wrapper {
    position: relative;
    z-index: 2;
    margin-top: auto;
    padding: var(--space-8) 0 0;
}
.hero-visual-container {
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 var(--space-6);
}
.data-viz-panel {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-3xl) var(--radius-3xl) 0 0;
    padding: var(--space-8) var(--space-8) var(--space-10);
    box-shadow: 0 -10px 60px rgba(30, 27, 75, 0.15);
    position: relative;
    overflow: hidden;
    animation: fadeInUp 1s ease-out 0.3s both;
}
.data-viz-panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.15) 0%, transparent 50%);
    pointer-events: none;
}
.viz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
    position: relative;
    z-index: 1;
}
.viz-title-area {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.viz-icon {
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}
.viz-icon i {
    color: var(--white);
    font-size: 1.25rem;
}
.viz-title-text h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 2px;
}
.viz-title-text p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}
.viz-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 600;
    color: #6EE7B7;
}
.viz-badge i { font-size: 0.625rem; }
.viz-grid {
    display: grid;
    grid-template-columns: 280px 1fr 200px;
    gap: var(--space-6);
    position: relative;
    z-index: 1;
}

/* Funnel Chart */
.funnel-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    backdrop-filter: blur(10px);
}
.funnel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-5);
}
.funnel-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.funnel-label i { color: rgba(255, 255, 255, 0.5); }
.funnel-period {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.5);
}
.funnel-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    padding: var(--space-4) 0;
}
.funnel-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    font-weight: 600;
    transition: all 0.3s ease;
    padding: var(--space-4) var(--space-2);
}
.funnel-stage:hover { transform: scale(1.02); }
.funnel-stage-1 {
    width: 100%;
    min-height: 85px;
    background: linear-gradient(135deg, #A78BFA 0%, #8B5CF6 100%);
    clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.funnel-stage-2 {
    width: 90%;
    min-height: 75px;
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    clip-path: polygon(6% 0, 94% 0, 88% 100%, 12% 100%);
    margin-top: -4px;
}
.funnel-stage-3 {
    width: 76%;
    min-height: 70px;
    background: linear-gradient(135deg, #7C3AED 0%, #6D28D9 100%);
    clip-path: polygon(12% 0, 88% 0, 80% 100%, 20% 100%);
    margin-top: -4px;
}
.funnel-stage-4 {
    width: 64%;
    min-height: 65px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    clip-path: polygon(20% 0, 80% 0, 70% 100%, 30% 100%);
    margin-top: -4px;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.funnel-stage-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    position: relative;
    z-index: 1;
}
.funnel-stage-name {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
    line-height: 1;
}
.funnel-stage-value {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
}
.funnel-stage-percent {
    font-size: 0.6875rem;
    opacity: 0.85;
    line-height: 1;
}

/* Center Metrics Cards */
.metrics-center {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--space-4);
}
.metric-viz-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-4) var(--space-5);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}
.metric-viz-card:hover {
    background: rgba(255, 255, 255, 0.12);
    transform: translateY(-2px);
}
.metric-viz-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}
.metric-viz-label {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.metric-viz-icon {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}
.metric-viz-icon i {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}
.metric-viz-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.metric-viz-change {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    font-weight: 600;
}
.metric-viz-change.positive { color: #6EE7B7; }
.metric-viz-change.negative { color: #FCA5A5; }
.metric-viz-change i { font-size: 0.625rem; }
.metric-sparkline {
    margin-top: auto;
    height: 32px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    padding-top: var(--space-2);
}
.sparkline-bar {
    flex: 1;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
    transition: all 0.3s ease;
}
.metric-viz-card:hover .sparkline-bar { background: rgba(255, 255, 255, 0.3); }
.sparkline-bar.highlight {
    background: linear-gradient(to top, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.8));
}

/* Side Stats with Donut Chart */
.side-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.donut-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
    padding: var(--space-5);
    backdrop-filter: blur(10px);
    flex: 1;
}
.donut-header {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.donut-header i { color: rgba(255, 255, 255, 0.5); }
.donut-visual {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto var(--space-4);
}
.donut-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        #A78BFA 0deg 126deg,
        #8B5CF6 126deg 234deg,
        var(--success) 234deg 306deg,
        #6366F1 306deg 360deg
    );
    position: relative;
}
.donut-ring::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    height: 70%;
    background: var(--primary);
    border-radius: 50%;
}
.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}
.donut-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
}
.donut-label {
    font-size: 0.625rem;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.donut-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.8);
}
.legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.legend-dot.google { background: #A78BFA; }
.legend-dot.lsa { background: #8B5CF6; }
.legend-dot.organic { background: var(--success); }
.legend-dot.referral { background: #6366F1; }
.quick-stat {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-radius: var(--radius-xl);
    padding: var(--space-4);
    text-align: center;
}
.quick-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #6EE7B7;
    line-height: 1;
    margin-bottom: var(--space-1);
}
.quick-stat-label {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}
/* Social Proof */
.social-proof {
    padding: var(--space-16) 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
}
.proof-header {
    text-align: center;
    margin-bottom: var(--space-12);
}
.proof-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}
.proof-subtitle {
    font-size: 0.9375rem;
    color: var(--gray-500);
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    margin-bottom: var(--space-12);
}
.stat-block {
    text-align: center;
    padding: var(--space-8);
    background: var(--gray-50);
    border-radius: var(--radius-2xl);
    border: 1px solid var(--gray-100);
}
.stat-block-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    border-radius: var(--radius-lg);
}
.stat-block-icon i {
    font-size: 1.25rem;
    color: var(--accent);
}
.stat-block-value {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: var(--space-2);
}
.stat-block-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-700);
    margin-bottom: var(--space-1);
}
.stat-block-desc {
    font-size: 1rem;
    color: var(--gray-500);
}
.trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-3);
}
.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
}
.trust-badge i { color: var(--success); }

/* Features Section */
.features {
    padding: var(--space-8) 0;
    background: var(--white);
}
.section-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-16);
}
.section-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 1rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}
.section-title {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.25;
    margin-bottom: var(--space-4);
    letter-spacing: -0.01em;
}
.section-subtitle {
    font-size: 1rem;
    color: var(--gray-500);
    line-height: 1.7;
}
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
}
.feature-card {
    padding: var(--space-6);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    transition: all 0.3s ease;
}
.feature-card:hover {
    background: var(--white);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}
.feature-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-4);
}
.feature-icon i {
    font-size: 1.25rem;
    color: var(--white);
}
.feature-title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}
.feature-desc {
    font-size: 1rem;
    color: var(--gray-500);
    line-height: 1.6;
}

/* How It Works */
.how-it-works {
    padding: var(--space-24) 0;
    background: var(--primary);
    color: var(--white);
}
.how-it-works .section-tag {
    background: rgba(99, 102, 241, 0.3);
    color: #A5B4FC;
}
.how-it-works .section-title { color: var(--white); }
.how-it-works .section-subtitle { color: rgba(255, 255, 255, 0.6); }
.steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}
.step-card {
    position: relative;
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-2xl);
    transition: all 0.3s ease;
}
.step-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}
.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--accent);
    color: var(--white);
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}
.step-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-2);
    line-height: 1.3;
}
.step-desc {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.5;
}

/* Partners */
.partners {
    padding: var(--space-16) 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
    border-bottom: 1px solid var(--gray-100);
}
.partners-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-4);
}
.partner-card {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    min-height: 64px;
    transition: all 0.2s ease;
}
.partner-card:hover {
    border-color: var(--gray-300);
    box-shadow: var(--shadow-sm);
}
.partner-card img {
    max-width: 140px;
    max-height: 48px;
    width: auto;
    height: auto;
    filter: grayscale(100%) brightness(0.4);
    transition: filter 0.3s ease;
}
.partner-card:hover img {
    filter: grayscale(0%) brightness(1);
}
.partner-card span {
    font-weight: 600;
    color: var(--gray-700);
    font-size: 1rem;
}

/* AI Section */
.ai-section {
    padding: var(--space-24) 0;
    background: var(--primary);
    color: var(--white);
}
.ai-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: center;
}
.ai-content .section-tag {
    background: rgba(99, 102, 241, 0.3);
    color: #A5B4FC;
}
.ai-content .section-title {
    color: var(--white);
    text-align: left;
}
.ai-content .section-subtitle {
    color: rgba(255, 255, 255, 0.6);
    text-align: left;
}
.ai-features-list { margin-top: var(--space-8); }
.ai-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.ai-feature:last-child { border-bottom: none; }
.ai-feature i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(99, 102, 241, 0.3);
    color: #A5B4FC;
    border-radius: var(--radius-md);
    flex-shrink: 0;
}
.ai-feature-text strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 2px;
}
.ai-feature-text span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
}
.ai-demo {
    background: var(--white);
    border-radius: var(--radius-2xl);
    padding: var(--space-5);
    box-shadow: var(--shadow-2xl);
}
.ai-demo-header {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--gray-100);
    margin-bottom: var(--space-4);
}
.ai-demo-header .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.ai-demo-header .dot:nth-child(1) { background: #FF5F57; }
.ai-demo-header .dot:nth-child(2) { background: #FFBD2E; }
.ai-demo-header .dot:nth-child(3) { background: #28CA41; }
.ai-message {
    display: flex;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}
.ai-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-avatar.user {
    background: var(--gray-100);
    color: var(--gray-500);
}
.ai-avatar.bot {
    background: var(--primary);
    color: var(--white);
}
.ai-bubble {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    font-size: 1rem;
    color: var(--gray-700);
    line-height: 1.5;
}
.ai-bubble.user { background: var(--gray-100); }
.ai-bubble.bot {
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
}
.ai-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--accent-soft);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--accent);
}
.ai-insight i {
    color: var(--accent);
    margin-top: 2px;
}
.ai-input-area {
    display: flex;
    gap: var(--space-2);
    padding: var(--space-3);
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-top: var(--space-4);
}
.ai-input-area input {
    flex: 1;
    padding: var(--space-2) var(--space-3);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-size: 1rem;
    color: var(--gray-900);
}
.ai-input-area input::placeholder { color: var(--gray-400); }
.ai-input-area button {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s ease;
}
.ai-input-area button:hover { background: var(--primary-light); }

/* Pricing */
.pricing {
    padding: var(--space-8) 0;
    background: var(--white);
}
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-5);
    max-width: 1000px;
    margin: 0 auto;
}
.pricing-card {
    position: relative;
    padding: var(--space-8);
    background: var(--gray-50);
    border: 2px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    transition: all 0.3s ease;
}
.pricing-card:hover { border-color: var(--gray-200); }
.pricing-card.featured {
    background: var(--white);
    border-color: var(--primary);
    transform: scale(1.02);
    box-shadow: var(--shadow-xl);
}
.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-2) var(--space-4);
    background: var(--primary);
    color: var(--white);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: var(--radius-full);
}
.pricing-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}
.pricing-price {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1;
    margin-bottom: var(--space-1);
}
.pricing-period {
    font-size: 1rem;
    color: var(--gray-500);
    margin-bottom: var(--space-6);
}
.pricing-desc {
    font-size: 1rem;
    color: var(--gray-500);
    margin-bottom: var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--gray-200);
}
.pricing-features {
    list-style: none;
    margin-bottom: var(--space-8);
}
.pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    font-size: 1rem;
    color: var(--gray-600);
}
.pricing-features i {
    color: var(--success);
    margin-top: 3px;
}
.pricing-cta { width: 100%; }

/* FAQ */
.faq {
    padding: var(--space-6) 0;
    background: var(--gray-50);
}
.faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-5);
    max-width: 1000px;
    margin: 0 auto;
}
.faq-item {
    padding: var(--space-6);
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
}
.faq-question {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-3);
}
.faq-answer {
    font-size: 1rem;
    color: var(--gray-500);
    line-height: 1.6;
}

/* Contact */
.contact {
    padding: var(--space-24) 0;
    background: var(--white);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
    align-items: start;
}
.contact-content .section-tag { margin-bottom: var(--space-4); }
.contact-content .section-title {
    text-align: left;
    margin-bottom: var(--space-4);
}
.contact-content .section-subtitle {
    text-align: left;
    margin-bottom: var(--space-8);
}
.contact-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}
.contact-option {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4);
    background: var(--gray-50);
    border-radius: var(--radius-xl);
}
.contact-option i {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-soft);
    color: var(--accent);
    border-radius: var(--radius-md);
}
.contact-option strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 2px;
}
.contact-option span {
    font-size: 1rem;
    color: var(--gray-500);
}
.contact-form-wrapper {
    padding: var(--space-8);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
}
.contact-form-wrapper h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-6);
}
.form-group { margin-bottom: var(--space-4); }
.form-group label {
    display: block;
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}
.form-group input,
.form-group textarea {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    font-size: 0.9375rem;
    color: var(--gray-900);
    transition: all 0.2s ease;
}
.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-400); }
.form-group textarea {
    min-height: 100px;
    resize: vertical;
}

/* Availability Section (Contact Page) */
.availability-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

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

.availability-card {
    background: var(--white);
    padding: var(--space-6);
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
}

.availability-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.availability-header i {
    color: var(--accent);
    font-size: 1.5rem;
}

.availability-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
}

.availability-content {
    font-size: 0.9375rem;
    color: var(--gray-600);
    line-height: 1.8;
}

.availability-note {
    margin-top: var(--space-3);
    font-size: 0.8125rem;
    color: var(--gray-500);
}

@media (max-width: 768px) {
    .availability-grid {
        grid-template-columns: 1fr;
    }
}

/* Final CTA */
.final-cta {
    padding: var(--space-20) 0;
    background: var(--primary);
    text-align: center;
}
.final-cta h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-4);
}
.final-cta p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-8);
}
.final-cta .btn {
    padding: var(--space-4) var(--space-8);
    font-size: 1rem;
    background: var(--accent);
}
.final-cta .btn:hover { background: var(--accent-hover); }
.final-cta-note {
    margin-top: var(--space-4);
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

/* Footer */
.footer {
    padding: var(--space-16) 0 var(--space-8);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-12);
    margin-bottom: var(--space-12);
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 0;
    margin-bottom: var(--space-4);
}
.footer-brand-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.footer-brand-icon i {
    font-size: 1rem;
}
.footer-brand-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}
.footer-tagline {
    font-size: 1rem;
    color: var(--gray-500);
    line-height: 1.6;
}
.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}
.footer-links { list-style: none; }
.footer-links li { margin-bottom: var(--space-2); }
.footer-links a {
    font-size: 1rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
}
.footer-links a:hover { color: var(--gray-900); }
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--gray-200);
}
.footer-copyright {
    font-size: 1rem;
    color: var(--gray-500);
}
.footer-social {
    display: flex;
    gap: var(--space-3);
}
.footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.2s ease;
}
.footer-social a:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

/* Responsive */
@media (max-width: 1024px) {
    .viz-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }
    .funnel-card { grid-column: 1 / -1; }
    .funnel-visual {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        gap: var(--space-2);
    }
    .funnel-stage {
        height: auto;
        width: auto;
        padding: var(--space-4) var(--space-6);
        clip-path: none;
        border-radius: var(--radius-lg);
    }
    .funnel-stage-1, .funnel-stage-2, .funnel-stage-3, .funnel-stage-4 {
        width: auto;
        margin-top: 0;
    }
    .side-stats { flex-direction: row; }
    .donut-card, .quick-stat { flex: 1; }
    .ai-grid {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }
    .contact-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
    .nav-links { display: none; }
    .nav-actions { display: none; }
    .mobile-toggle { display: flex; }
    .nav-wrapper { padding: var(--space-3); }
    .nav-container { padding: 0 var(--space-4); }

    /* Get Started Page Mobile */
    .get-started-hero {
        padding: 100px 0 var(--space-12);
    }
    .get-started-grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }
    .get-started-content {
        padding-top: 0;
    }
    .get-started-content h1 {
        font-size: 1.75rem;
    }
    .signup-card {
        padding: var(--space-6);
    }
    .trial-benefits {
        margin-bottom: var(--space-6);
    }
    .trust-indicators {
        flex-wrap: wrap;
        gap: var(--space-3);
    }
    .timeline::before {
        left: 20px;
    }
    .timeline-marker {
        width: 40px;
        height: 40px;
    }
    .timeline-marker i {
        font-size: 1rem;
    }
    .included-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }
    .pricing-cards {
        grid-template-columns: 1fr;
    }

    .viz-grid { grid-template-columns: 1fr; }
    .metrics-center { grid-template-columns: repeat(2, 1fr); }
    .side-stats { flex-direction: column; }
    .funnel-visual { flex-direction: column; }
    .funnel-stage { width: 100% !important; }
    .funnel-stage-1 { clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%); height: 60px; }
    .funnel-stage-2 { clip-path: polygon(5% 0, 95% 0, 90% 100%, 10% 100%); height: 55px; width: 90% !important; }
    .funnel-stage-3 { clip-path: polygon(8% 0, 92% 0, 85% 100%, 15% 100%); height: 50px; width: 80% !important; }
    .funnel-stage-4 { clip-path: polygon(12% 0, 88% 0, 50% 100%, 50% 100%); height: 45px; width: 70% !important; }
    .data-viz-panel { padding: var(--space-6); }
    .features-grid { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: 1fr; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
    .pricing-grid { grid-template-columns: 1fr; }
    .faq-grid { grid-template-columns: 1fr; }
    .contact-alt-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: var(--space-8); }
    .footer-bottom { flex-direction: column; gap: var(--space-4); text-align: center; }
}

@media (max-width: 480px) {
    .hero-buttons { flex-direction: column; }
    .hero-buttons .btn { width: 100%; }
    .hero-trust { flex-direction: column; gap: var(--space-2); }
    .metrics-center { grid-template-columns: 1fr; }
    .viz-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-3);
    }
    .steps-grid { grid-template-columns: 1fr; }
    .partners-grid { grid-template-columns: 1fr; }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ===== Get Started Page Styles ===== */


        /* Page Hero - Get Started Style */
        .get-started-hero {
            position: relative;
            padding: 140px 0 var(--space-16);
            background: linear-gradient(180deg, #F1F0FB 0%, #F8FAFC 50%, #FFFFFF 100%);
            overflow: hidden;
        }

        .get-started-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
            pointer-events: none;
        }

        .get-started-grid {
            position: relative;
            z-index: 2;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-16);
            align-items: start;
        }

        .get-started-content {
            padding-top: var(--space-8);
        }

        .hero-badge {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-full);
            font-size: 1rem;
            font-weight: 500;
            color: var(--gray-600);
            margin-bottom: var(--space-5);
            box-shadow: var(--shadow-sm);
        }

        .hero-badge i {
            color: var(--accent);
        }

        .get-started-content h1 {
            font-size: clamp(2rem, 4vw, 2.75rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.15;
            margin-bottom: var(--space-5);
            letter-spacing: -0.02em;
        }

        .get-started-content h1 .highlight {
            background: linear-gradient(135deg, var(--accent) 0%, #8B5CF6 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .get-started-content > p {
            font-size: 1.125rem;
            color: var(--gray-500);
            line-height: 1.7;
            margin-bottom: var(--space-8);
        }

        /* Trial Benefits */
        .trial-benefits {
            margin-bottom: var(--space-8);
        }

        .trial-benefits h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-4);
        }

        .benefit-list {
            display: flex;
            flex-direction: column;
            gap: var(--space-3);
        }

        .benefit-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            font-size: 0.9375rem;
            color: var(--gray-600);
        }

        .benefit-item i {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--success-soft);
            color: var(--success);
            border-radius: var(--radius-full);
            font-size: 0.625rem;
        }

        /* Trust Indicators */
        .trust-indicators {
            display: flex;
            flex-wrap: wrap;
            gap: var(--space-4);
        }

        .trust-item {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 1rem;
            color: var(--gray-500);
        }

        .trust-item i {
            color: var(--gray-400);
        }

        /* Signup Form Card */
        .signup-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-2xl);
            padding: var(--space-8);
            box-shadow: var(--shadow-xl);
        }

        .signup-card-header {
            text-align: center;
            margin-bottom: var(--space-6);
            padding-bottom: var(--space-6);
            border-bottom: 1px solid var(--gray-100);
        }

        .signup-card-header h2 {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .signup-card-header p {
            font-size: 0.9375rem;
            color: var(--gray-500);
        }

        .form-group {
            margin-bottom: var(--space-4);
        }

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

        .form-group label .required {
            color: var(--error);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            font-family: var(--font-body);
            font-size: 0.9375rem;
            color: var(--gray-900);
            transition: all 0.2s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            background: var(--white);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--gray-400);
        }

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

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-6);
            font-family: var(--font-body);
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: var(--radius-lg);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
        }

        .btn-primary {
            background: var(--primary);
            color: var(--white);
        }

        .btn-primary:hover {
            background: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        .btn-large {
            padding: var(--space-4) var(--space-6);
            font-size: 1rem;
        }

        .signup-submit {
            width: 100%;
            margin-top: var(--space-2);
        }

        .form-footer {
            text-align: center;
            margin-top: var(--space-5);
            padding-top: var(--space-5);
            border-top: 1px solid var(--gray-100);
        }

        .form-footer p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        .form-footer a {
            color: var(--accent);
            text-decoration: none;
            font-weight: 500;
        }

        .form-footer a:hover {
            text-decoration: underline;
        }

        /* What to Expect Section */
        .expect-section {
            padding: var(--space-20) 0;
            background: var(--white);
        }

        .section-header {
            text-align: center;
            max-width: 600px;
            margin: 0 auto var(--space-12);
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 1rem;
            font-weight: 600;
            border-radius: var(--radius-full);
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.25;
            margin-bottom: var(--space-4);
            letter-spacing: -0.01em;
        }

        .section-subtitle {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        .timeline {
            max-width: 800px;
            margin: 0 auto;
            position: relative;
        }

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

        .timeline-item {
            display: flex;
            gap: var(--space-6);
            margin-bottom: var(--space-8);
            position: relative;
        }

        .timeline-item:last-child {
            margin-bottom: 0;
        }

        .timeline-marker {
            width: 56px;
            height: 56px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white);
            border: 2px solid var(--accent);
            border-radius: var(--radius-full);
            position: relative;
            z-index: 1;
        }

        .timeline-marker i {
            font-size: 1.25rem;
            color: var(--accent);
        }

        .timeline-content {
            flex: 1;
            padding: var(--space-5);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-xl);
        }

        .timeline-label {
            display: inline-flex;
            padding: var(--space-1) var(--space-3);
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 0.6875rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-radius: var(--radius-full);
            margin-bottom: var(--space-2);
        }

        .timeline-content h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .timeline-content p {
            font-size: 0.9375rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* What's Included Section */
        .included-section {
            padding: var(--space-20) 0;
            background: var(--primary);
            color: var(--white);
        }

        .included-section .section-tag {
            background: rgba(99, 102, 241, 0.3);
               color: var(--accent);
        }

        .included-section .section-title {
            color: var(--white);
        }

        .included-section .section-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

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

        .included-card {
            padding: var(--space-6);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .included-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .included-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(99, 102, 241, 0.3);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
        }

        .included-icon i {
            font-size: 1.25rem;
            color: #A5B4FC;
        }

        .included-card h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-2);
        }

        .included-card p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            line-height: 1.6;
        }

        /* Pricing Preview */
        .pricing-preview {
            padding: var(--space-20) 0;
            background: var(--gray-50);
        }

        .pricing-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-5);
            max-width: 1000px;
            margin: 0 auto;
        }

        .pricing-card {
            position: relative;
            padding: var(--space-6);
            background: var(--white);
            border: 2px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .pricing-card:hover {
            border-color: var(--gray-200);
        }

        .pricing-card.featured {
            border-color: var(--primary);
            transform: scale(1.02);
            box-shadow: var(--shadow-xl);
        }

        .pricing-badge {
            position: absolute;
            top: -12px;
            left: 50%;
            transform: translateX(-50%);
            padding: var(--space-2) var(--space-4);
            background: var(--primary);
            color: var(--white);
            font-size: 0.6875rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-radius: var(--radius-full);
        }

        .pricing-name {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .pricing-price {
            font-size: 2rem;
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1;
            margin-bottom: var(--space-1);
        }

        .pricing-period {
            font-size: 1rem;
            color: var(--gray-500);
            margin-bottom: var(--space-4);
        }

        .pricing-desc {
            font-size: 1rem;
            color: var(--gray-500);
            margin-bottom: var(--space-5);
            padding-bottom: var(--space-5);
            border-bottom: 1px solid var(--gray-100);
        }

        .pricing-features {
            list-style: none;
            margin-bottom: var(--space-6);
        }

        .pricing-features li {
            display: flex;
            align-items: flex-start;
            gap: var(--space-2);
            padding: var(--space-2) 0;
            font-size: 1rem;
            color: var(--gray-600);
        }

        .pricing-features i {
            color: var(--success);
            margin-top: 2px;
            font-size: 1rem;
        }

        .pricing-cta {
            width: 100%;
            text-align: center;
        }

        /* FAQ Mini Section */
        .faq-mini {
            padding: var(--space-20) 0;
            background: var(--white);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-5);
            max-width: 900px;
            margin: 0 auto;
        }

        .faq-item {
            padding: var(--space-5);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-xl);
        }

        .faq-question {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .faq-answer {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        .faq-more {
            text-align: center;
            margin-top: var(--space-8);
        }

        .faq-more a {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--accent);
            text-decoration: none;
        }

        .faq-more a:hover {
            text-decoration: underline;
        }

        /* Contact Alternative */
        .contact-alternative {
            padding: var(--space-16) 0;
            background: var(--gray-50);
            border-top: 1px solid var(--gray-100);
        }

        .contact-alt-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-6);
            max-width: 900px;
            margin: 0 auto;
        }

        .contact-alt-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
            padding: var(--space-6);
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-xl);
            transition: all 0.3s ease;
        }

        .contact-alt-card:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
        }

        .contact-alt-icon {
            width: 56px;
            height: 56px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-soft);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
        }

        .contact-alt-icon i {
            font-size: 1.5rem;
            color: var(--accent);
        }

        .contact-alt-card h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .contact-alt-card p {
            font-size: 1rem;
            color: var(--gray-500);
            margin-bottom: var(--space-4);
        }

        .contact-alt-card a {
            font-size: 1rem;
            font-weight: 600;
            color: var(--accent);
            text-decoration: none;
        }

        .contact-alt-card a:hover {
            text-decoration: underline;
        }

        /* Signup Form Card */
        .signup-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-2xl);
            padding: var(--space-8);
            box-shadow: var(--shadow-xl);
        }

        .signup-card-header {
            text-align: center;
            margin-bottom: var(--space-6);
            padding-bottom: var(--space-6);
            border-bottom: 1px solid var(--gray-100);
        }

        .signup-card-header h2 {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .signup-card-header p {
            font-size: 0.9375rem;
            color: var(--gray-500);
        }

        .form-group {
            margin-bottom: var(--space-4);
        }

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

        .form-group label .required {
            color: var(--error);
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: var(--space-3) var(--space-4);
            background: var(--gray-50);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-lg);
            font-family: var(--font-body);
            font-size: 0.9375rem;
            color: var(--gray-900);
            transition: all 0.2s ease;
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            background: var(--white);
            border-color: var(--accent);
            box-shadow: 0 0 0 3px var(--accent-soft);
        }

        .form-group input::placeholder,
        .form-group textarea::placeholder {
            color: var(--gray-400);
        }

        /* ═══════════════════════════════════════════════════════════════
           GET STARTED PAGE RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 768px) {
            .get-started-hero {
                padding: 100px 0 var(--space-12);
            }

            .get-started-grid {
                grid-template-columns: 1fr;
                gap: var(--space-6);
            }

            .get-started-content {
                padding-top: 0;
                order: 1;
            }

            .signup-card {
                order: 2;
                padding: var(--space-6);
            }

            .get-started-content h1 {
                font-size: 1.75rem;
            }

            .trial-benefits {
                margin-bottom: var(--space-6);
            }

            .trust-indicators {
                flex-wrap: wrap;
                gap: var(--space-3);
                justify-content: center;
            }

            .timeline::before {
                left: 20px;
            }

            .timeline-marker {
                width: 40px;
                height: 40px;
            }

            .timeline-marker i {
                font-size: 1rem;
            }

            .timeline-item {
                gap: var(--space-4);
            }

            .timeline-content {
                padding: var(--space-4);
            }

            .included-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .pricing-cards {
                grid-template-columns: 1fr;
            }

            .pricing-card.featured {
                transform: none;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }

            .contact-alt-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 480px) {
            .get-started-content h1 {
                font-size: 1.5rem;
            }

            .benefit-list {
                gap: var(--space-2);
            }

            .trust-indicators {
                flex-direction: column;
                align-items: flex-start;
            }
        }

/* ===== About Page Styles ===== */

/* ===== Blog Page Styles ===== */

/* ===== How It Works Page Styles ===== */

        .page-hero {
            position: relative;
            padding: 160px 0 var(--space-16);
            background: linear-gradient(180deg, #F1F0FB 0%, #F8FAFC 50%, #FFFFFF 100%);
            text-align: center;
            overflow: hidden;
        }

        .page-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: 
                radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
                radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
            pointer-events: none;
        }

        .page-hero-content {
            position: relative;
            z-index: 2;
            max-width: 800px;
            margin: 0 auto;
        }

        .page-hero h1 {
            font-size: clamp(2rem, 4vw, 2.75rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.2;
            margin-bottom: var(--space-4);
            letter-spacing: -0.02em;
        }

        .page-hero p {
            font-size: 1.125rem;
            color: var(--gray-500);
            line-height: 1.7;
            max-width: 680px;
            margin: 0 auto;
        }

        /* Section Headers */
        .section-header {
            text-align: center;
            max-width: 700px;
            margin: 0 auto var(--space-16);
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 1rem;
            font-weight: 600;
            border-radius: var(--radius-full);
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.25;
            margin-bottom: var(--space-4);
            letter-spacing: -0.01em;
        }

        .section-subtitle {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* Problem Section */
        .problem-section {
            padding: var(--space-16) 0;
            background: var(--white);
            border-bottom: 1px solid var(--gray-100);
        }

        .problem-content h2 {
            font-size: clamp(1.5rem, 2.5vw, 1.875rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.3;
            margin-bottom: var(--space-6);
        }

        .problem-lead {
            font-size: 1.125rem;
            color: var(--gray-700);
            line-height: 1.8;
            margin-bottom: var(--space-6);
        }

        .problem-lead strong {
            color: var(--gray-900);
        }

        .problem-text {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.8;
            margin-bottom: var(--space-4);
        }

        .problem-text:last-child {
            margin-bottom: 0;
        }

        .problem-callout {
            padding: var(--space-5);
            background: var(--accent-soft);
            border-left: 4px solid var(--accent);
            border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
            margin-top: var(--space-6);
        }

        .problem-callout p {
            font-size: 1rem;
            font-weight: 500;
            color: var(--accent);
            margin: 0;
        }

        .problem-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-12);
            align-items: start;
        }

        .problem-video-card {
            background: var(--white);
            border-radius: var(--radius-lg);
            padding: var(--space-6);
            box-shadow: var(--shadow-md);
        }

        .problem-video-card video {
            width: 100%;
            height: auto;
            border-radius: var(--radius-md);
            display: block;
        }

        /* Matching Section */
        .matching-section {
            padding: var(--space-24) 0;
            background: var(--gray-50);
        }

        .matching-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-12);
            align-items: start;
        }

        .matching-content h3 {
            font-size: 1.375rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-4);
        }

        .matching-content p {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.7;
            margin-bottom: var(--space-6);
        }

        /* Confidence Table */
        .confidence-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: var(--space-6);
        }

        .confidence-table th,
        .confidence-table td {
            padding: var(--space-3) var(--space-4);
            text-align: left;
            border-bottom: 1px solid var(--gray-200);
        }

        .confidence-table th {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-500);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            background: var(--gray-100);
        }

        .confidence-table th:first-child {
            border-radius: var(--radius-md) 0 0 0;
        }

        .confidence-table th:last-child {
            border-radius: 0 var(--radius-md) 0 0;
        }

        .confidence-table td {
            font-size: 1rem;
            color: var(--gray-700);
            background: var(--white);
        }

        .confidence-score {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 48px;
            padding: var(--space-1) var(--space-2);
            background: var(--success-soft);
            color: var(--success);
            font-weight: 600;
            font-size: 1rem;
            border-radius: var(--radius-md);
        }

        .confidence-score.high { background: var(--success-soft); color: var(--success); }
        .confidence-score.medium { background: var(--warning-soft); color: var(--warning); }

        /* Multi-Phone Feature */
        .multiphone-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-2xl);
            padding: var(--space-6);
        }

        .multiphone-card h4 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-4);
        }

        .multiphone-card p {
            font-size: 0.9375rem;
            color: var(--gray-500);
            line-height: 1.6;
            margin-bottom: var(--space-5);
        }

        .feature-list {
            list-style: none;
        }

        .feature-list li {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-2) 0;
            font-size: 1rem;
            color: var(--gray-600);
        }

        .feature-list li i {
            color: var(--success);
            margin-top: 3px;
        }

        .feature-list li strong {
            color: var(--gray-800);
        }

        .stats-badge {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            margin-top: var(--space-6);
            padding: var(--space-4);
            background: var(--accent-soft);
            border-radius: var(--radius-lg);
        }

        .stats-badge-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--accent);
            line-height: 1;
        }

        .stats-badge-label {
            font-size: 1rem;
            font-weight: 500;
            color: var(--accent);
        }

     
        .integrations-section {
            padding: var(--space-24) 0;
            background: var(--white);
        }

        .integrations-category {
            margin-bottom: var(--space-12);
        }

        .integrations-category:last-child {
            margin-bottom: 0;
        }

        .category-header {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            margin-bottom: var(--space-5);
        }

        .category-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            border-radius: var(--radius-lg);
        }

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

        .category-icon.green { background: var(--success); }
        .category-icon.orange { background: var(--warning); }

        .category-title h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-1);
        }

        .category-title p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        .integration-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-5);
        }

        .integration-card {
            padding: var(--space-5);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .integration-card:hover {
            background: var(--white);
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .integration-card h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .integration-card p {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
            margin-bottom: var(--space-4);
        }

        .integration-card ul {
            list-style: none;
        }

        .integration-card ul li {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 1rem;
            color: var(--gray-600);
            padding: var(--space-1) 0;
        }

        .integration-card ul li i {
            color: var(--success);
            font-size: 0.625rem;
        }

        /* Zapier Callout */
        .zapier-callout {
            margin-top: var(--space-8);
            padding: var(--space-8);
            background: linear-gradient(135deg, #FF4A00 0%, #FF6B35 100%);
            border-radius: var(--radius-2xl);
            color: var(--white);
        }

        .zapier-callout h4 {
            font-size: 1.25rem;
            font-weight: 700;
            margin-bottom: var(--space-3);
        }

        .zapier-callout p {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: var(--space-6);
        }

        .zapier-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-4);
        }

        .zapier-category h5 {
            font-size: 1rem;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            opacity: 0.8;
            margin-bottom: var(--space-2);
        }

        .zapier-category p {
            font-size: 1rem;
            opacity: 0.9;
            margin-bottom: 0;
        }

        .zapier-footer {
            margin-top: var(--space-6);
            padding-top: var(--space-6);
            border-top: 1px solid rgba(255, 255, 255, 0.2);
            font-size: 1rem;
            font-weight: 600;
        }

        /* Multi-Touch Attribution Section */
        .multitouch-section {
            padding: var(--space-24) 0;
            background: var(--primary);
            color: var(--white);
        }

        .multitouch-section .section-tag {
            background: rgba(99, 102, 241, 0.3);
            color: #A5B4FC;
        }

        .multitouch-section .section-title {
            color: var(--white);
        }

        .multitouch-section .section-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

        .tracking-types {
            display: flex;
            justify-content: center;
            gap: var(--space-8);
            margin-bottom: var(--space-12);
        }

        .tracking-type {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .tracking-type i {
            color: var(--accent);
        }

        /* Customer Journey */
        .journey-container {
            max-width: 700px;
            margin: 0 auto;
        }

        .journey-step {
            display: flex;
            gap: var(--space-5);
            margin-bottom: var(--space-5);
            position: relative;
        }

        .journey-step::before {
            content: '';
            position: absolute;
            left: 20px;
            top: 48px;
            bottom: -20px;
            width: 2px;
            background: rgba(255, 255, 255, 0.2);
        }

        .journey-step:last-child::before {
            display: none;
        }

        .journey-number {
            width: 40px;
            height: 40px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            color: var(--white);
            font-size: 1rem;
            font-weight: 700;
            border-radius: var(--radius-full);
            position: relative;
            z-index: 1;
        }

        .journey-content {
            flex: 1;
            padding: var(--space-4);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-xl);
        }

        .journey-content h4 {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-2);
        }

        .journey-content p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
            margin-bottom: 0;
        }

        .journey-content .captured {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            margin-top: var(--space-2);
            padding: var(--space-1) var(--space-3);
            background: var(--success-soft);
            color: var(--success);
            font-size: 1rem;
            font-weight: 500;
            border-radius: var(--radius-full);
        }

        /* Attribution Result */
        .attribution-result {
            margin-top: var(--space-10);
            padding: var(--space-6);
            background: rgba(255, 255, 255, 0.08);
            border: 1px solid rgba(255, 255, 255, 0.15);
            border-radius: var(--radius-2xl);
        }

        .attribution-result h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-4);
            text-align: center;
        }

        .attribution-items {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
        }

        .attribution-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3);
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-lg);
        }

        .attribution-item i {
            color: var(--accent);
        }

        .attribution-item span {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .attribution-item strong {
            color: var(--white);
        }

        .attribution-tagline {
            text-align: center;
            margin-top: var(--space-6);
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
        }

        /* Revenue Metrics Section */
        .revenue-section {
            padding: var(--space-24) 0;
            background: var(--gray-50);
        }

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

        .metric-card {
            padding: var(--space-6);
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            text-align: center;
            transition: all 0.3s ease;
        }

        .metric-card:hover {
            border-color: var(--gray-200);
            box-shadow: var(--shadow-md);
        }

        .metric-card i {
            font-size: 1.5rem;
            color: var(--accent);
            margin-bottom: var(--space-3);
        }

        .metric-card h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .metric-card p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* Google Ads Feature */
        .google-ads-feature {
            padding: var(--space-8);
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-2xl);
        }

        .google-ads-feature h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-4);
            text-align: center;
        }

        .google-ads-feature p {
            font-size: 1rem;
            color: var(--gray-500);
            text-align: center;
            margin-bottom: var(--space-6);
        }

        .google-ads-list {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
            max-width: 600px;
            margin: 0 auto var(--space-6);
        }

        .google-ads-list li {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            font-size: 0.9375rem;
            color: var(--gray-700);
            list-style: none;
        }

        .google-ads-list li i {
            color: var(--success);
        }

        .google-ads-result {
            text-align: center;
            padding-top: var(--space-6);
            border-top: 1px solid var(--gray-100);
            font-size: 1rem;
            color: var(--gray-700);
        }

        .google-ads-result strong {
            color: var(--gray-900);
        }

        /* Edge Cases Section */
        .edge-cases-section {
            padding: var(--space-24) 0;
            background: var(--white);
        }

        .edge-cases-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-4);
        }

        .edge-case-item {
            display: flex;
            align-items: flex-start;
            gap: var(--space-3);
            padding: var(--space-4);
            background: var(--gray-50);
            border-radius: var(--radius-lg);
        }

        .edge-case-item i {
            color: var(--success);
            margin-top: 2px;
        }

        .edge-case-item span {
            font-size: 1rem;
            color: var(--gray-700);
        }

        /* Data Trust Section */
        .data-trust-section {
            padding: var(--space-24) 0;
            background: var(--primary);
            color: var(--white);
        }

        .data-trust-section .section-tag {
            background: rgba(99, 102, 241, 0.3);
            color: #A5B4FC;
        }

        .data-trust-section .section-title {
            color: var(--white);
        }

        .data-trust-section .section-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

        .trust-features {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--space-4);
            margin-bottom: var(--space-12);
        }

        .trust-feature {
            text-align: center;
            padding: var(--space-5);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-xl);
        }

        .trust-feature i {
            font-size: 1.5rem;
            color: var(--accent);
            margin-bottom: var(--space-3);
        }

        .trust-feature h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-1);
        }

        .trust-feature p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
        }

        .quality-controls {
            max-width: 800px;
            margin: 0 auto;
        }

        .quality-controls h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--white);
            text-align: center;
            margin-bottom: var(--space-6);
        }

        .quality-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-4);
        }

        .quality-item {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-3);
            background: rgba(255, 255, 255, 0.05);
            border-radius: var(--radius-lg);
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.8);
        }

        .quality-item i {
            color: var(--success);
        }

        /* Performance Section */
        .performance-section {
            padding: var(--space-16) 0;
            background: var(--gray-50);
        }

        .performance-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: var(--space-4);
        }

        .performance-item {
            text-align: center;
            padding: var(--space-5);
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-xl);
        }

        .performance-item i {
            font-size: 1.25rem;
            color: var(--accent);
            margin-bottom: var(--space-2);
        }

        .performance-item h4 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-1);
        }

        .performance-item p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* Final CTA */
        .final-cta {
            padding: var(--space-20) 0;
            background: var(--primary);
            text-align: center;
        }

        .final-cta h2 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: var(--space-4);
        }

        .final-cta p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: var(--space-8);
        }

        .final-cta-buttons {
            display: flex;
            gap: var(--space-4);
            justify-content: center;
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-6);
            font-family: var(--font-body);
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: var(--radius-lg);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            white-space: nowrap;
        }

        .btn-primary {
            background: var(--accent);
            color: var(--white);
        }

        .btn-primary:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        .final-cta .btn-secondary {
            background: transparent;
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .final-cta .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        /* Footer */
        .footer {
            padding: var(--space-16) 0 var(--space-8);
            background: var(--gray-50);
            border-top: 1px solid var(--gray-100);
        }

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


   
        .footer-brand-text {
            font-size: 1.125rem;
            font-weight: 700;
            color: var(--gray-900);
        }

        .footer-tagline {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        .footer-heading {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            text-transform: uppercase;
            letter-spacing: 0.05em;
            margin-bottom: var(--space-4);
        }

        .footer-links {
            list-style: none;
        }

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

        .footer-links a {
            font-size: 1rem;
            color: var(--gray-500);
            text-decoration: none;
            transition: color 0.2s ease;
        }

        .footer-links a:hover {
            color: var(--gray-900);
        }

        .footer-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-top: var(--space-8);
            border-top: 1px solid var(--gray-200);
        }

        .footer-copyright {
            font-size: 1rem;
            color: var(--gray-500);
        }

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

        .footer-social a {
            width: 36px;
            height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-md);
            color: var(--gray-500);
            text-decoration: none;
            transition: all 0.2s ease;
        }

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

        /* Responsive */
        @media (max-width: 1024px) {
            .problem-grid {
                grid-template-columns: 1fr;
            }

            .matching-grid {
                grid-template-columns: 1fr;
            }

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

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

            .attribution-items {
                grid-template-columns: 1fr;
            }

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

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

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .mobile-toggle {
                display: flex;
            }

            .nav-wrapper {
                padding: var(--space-3);
            }

            .nav-container {
                padding: 0 var(--space-4);
            }

            .integration-cards {
                grid-template-columns: 1fr;
            }

            .zapier-grid {
                grid-template-columns: 1fr;
            }

            .metrics-grid {
                grid-template-columns: 1fr;
            }

            .edge-cases-grid {
                grid-template-columns: 1fr;
            }

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

            .quality-grid {
                grid-template-columns: 1fr;
            }

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

            .tracking-types {
                flex-direction: column;
                align-items: center;
                gap: var(--space-3);
            }

            .google-ads-list {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: var(--space-8);
            }

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

            .final-cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .final-cta-buttons .btn {
                width: 100%;
                max-width: 280px;
            }
        }

/* ===== Careers Page Styles ===== */

/* ===== Partners Page Styles ===== */

/* ===== Blog Page Styles ===== */

/* Category Filter */
.category-filter {
    padding: var(--space-8) 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    position: sticky;
    top: 72px;
    z-index: 100;
}

.filter-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.filter-btn {
    padding: var(--space-2) var(--space-4);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-500);
    background: transparent;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
}

.filter-btn:hover {
    color: var(--gray-700);
    border-color: var(--gray-300);
    background: var(--gray-50);
}

.filter-btn.active {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

/* Blog Grid */
.blog-section {
    padding: var(--space-16) 0;
    background: var(--gray-50);
}

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

/* Blog Card */
.blog-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

.blog-card-image {
    position: relative;
    width: 100%;
    height: 265px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-soft) 0%, var(--accent-soft) 100%);
}

.blog-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.blog-card:hover .blog-card-image img {
    transform: scale(1.05);
}

/* Placeholder for posts without images */
.blog-card-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
}

.blog-card-image-placeholder i {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.3);
}

.blog-card-content {
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog-card-meta {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.blog-card-category {
    padding: var(--space-1) var(--space-3);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-full);
}

.blog-card-date {
    font-size: 1rem;
    color: var(--gray-400);
}

.blog-card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
    margin-bottom: var(--space-3);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.blog-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-card-title a:hover {
    color: var(--accent);
}

.blog-card-excerpt {
    font-size: 1rem;
    color: var(--gray-500);
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: var(--space-4);
    flex: 1;
}

.blog-card-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    transition: all 0.2s ease;
}

.blog-card-link:hover {
    gap: var(--space-3);
}

.blog-card-link i {
    font-size: 1rem;
    transition: transform 0.2s ease;
}

.blog-card:hover .blog-card-link i {
    transform: translateX(4px);
}

/* Featured Post (First Post) */
.blog-card.featured {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.blog-card.featured .blog-card-image {
    height: 100%;
    min-height: 320px;
    border-radius: var(--radius-2xl) 0 0 var(--radius-2xl);
}

.blog-card.featured .blog-card-content {
    padding: var(--space-8);
    justify-content: center;
}

.blog-card.featured .blog-card-title {
    font-size: 1.5rem;
    -webkit-line-clamp: 3;
}

.blog-card.featured .blog-card-excerpt {
    -webkit-line-clamp: 4;
}

/* ═══════════════════════════════════════════════════════════════
   BLOG PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .blog-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .blog-card.featured {
        grid-template-columns: 1fr;
    }

    .blog-card.featured .blog-card-image {
        border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
        min-height: 240px;
    }
}

@media (max-width: 768px) {
    .filter-container {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-2);
    }

    .filter-btn {
        padding: var(--space-2) var(--space-4);
        font-size: 0.8125rem;
    }

    .blog-grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .blog-card.featured {
        grid-column: 1;
    }

    .blog-card.featured .blog-card-content {
        padding: var(--space-5);
    }

    .blog-card.featured .blog-card-title {
        font-size: 1.25rem;
    }

    .newsletter-card {
        padding: var(--space-6);
    }

    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form input {
        width: 100%;
    }

    .newsletter-form button {
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════════
   WORDPRESS PAGINATION STYLES
   ═══════════════════════════════════════════════════════════════ */
.pagination-section {
    padding: var(--space-12) 0;
    background: var(--gray-50);
}

/* WordPress default pagination wrapper */
.pagination,
.wp-pagenavi,
.page-numbers-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

/* Page number links - WordPress uses various classes */
.pagination a,
.pagination span,
.wp-pagenavi a,
.wp-pagenavi span,
.page-numbers,
a.page-numbers,
span.page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--space-3);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--gray-600);
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.2s ease;
}

.pagination a:hover,
.wp-pagenavi a:hover,
a.page-numbers:hover {
    color: var(--gray-900);
    border-color: var(--gray-300);
    background: var(--gray-50);
}

/* Current/Active page */
.pagination .current,
.pagination span.current,
.wp-pagenavi .current,
span.page-numbers.current,
.page-numbers.current {
    color: var(--white);
    background: var(--primary);
    border-color: var(--primary);
}

/* Previous/Next links */
.pagination .prev,
.pagination .next,
.wp-pagenavi .previouspostslink,
.wp-pagenavi .nextpostslink,
a.prev.page-numbers,
a.next.page-numbers {
    padding: 0 var(--space-4);
    gap: var(--space-2);
}

/* Dots/Ellipsis */
.pagination .dots,
.wp-pagenavi .extend,
span.page-numbers.dots {
    background: transparent;
    border-color: transparent;
    color: var(--gray-400);
    cursor: default;
}

.pagination .dots:hover,
.wp-pagenavi .extend:hover,
span.page-numbers.dots:hover {
    background: transparent;
    border-color: transparent;
}

/* First/Last page links (WP-PageNavi) */
.wp-pagenavi .first,
.wp-pagenavi .last {
    padding: 0 var(--space-4);
}

/* Page info text (WP-PageNavi) */
.wp-pagenavi .pages {
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-size: 1rem;
}

/* Disabled state */
.pagination .disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* Post Navigation (single post prev/next) */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-8) 0;
    border-top: 1px solid var(--gray-200);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation .nav-next {
    text-align: right;
}

.post-navigation a {
    display: inline-flex;
    flex-direction: column;
    gap: var(--space-1);
    text-decoration: none;
    color: var(--gray-600);
    transition: color 0.2s ease;
}

.post-navigation a:hover {
    color: var(--gray-900);
}

.post-navigation .nav-label {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--gray-400);
}

.post-navigation .nav-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: inherit;
}

/* Newsletter CTA */
.newsletter-section {
    padding: var(--space-16) 0;
    background: var(--white);
}

.newsletter-card {
    max-width: 700px;
    margin: 0 auto;
    padding: var(--space-10);
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border-radius: var(--radius-3xl);
    text-align: center;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.newsletter-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 150%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
    pointer-events: none;
}

.newsletter-content {
    position: relative;
    z-index: 1;
}

.newsletter-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-3);
}

.newsletter-card p {
    font-size: 1rem;
    opacity: 0.8;
    margin-bottom: var(--space-6);
}

.newsletter-form {
    display: flex;
    gap: var(--space-3);
    max-width: 440px;
    margin: 0 auto;
}

.newsletter-form input {
    flex: 1;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-900);
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
}

.newsletter-form input::placeholder {
    color: var(--gray-400);
}

.newsletter-form button {
    padding: var(--space-3) var(--space-5);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--white);
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.newsletter-form button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
}

/* ===== Blog Post (Article) Page Styles ===== */
/* Article Header */
.article-header {
    position: relative;
    padding: 160px 0 var(--space-12);
    background: linear-gradient(180deg, #F1F0FB 0%, #F8FAFC 50%, #FFFFFF 100%);
    overflow: hidden;
}

.article-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.article-header-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.article-breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: 1rem;
    color: var(--gray-500);
}

.article-breadcrumb a {
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.article-breadcrumb a:hover {
    color: var(--accent);
}

.article-breadcrumb span {
    color: var(--gray-300);
}

.article-category {
    display: inline-flex;
    padding: var(--space-1) var(--space-4);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    background: var(--accent-soft);
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
}

.article-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 700;
    color: var(--gray-900);
    line-height: 1.2;
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.article-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    flex-wrap: wrap;
}

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

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--primary-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--white);
    box-shadow: var(--shadow-sm);
}

.author-avatar i {
    font-size: 1.25rem;
    color: var(--accent);
}

.author-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.author-info {
    text-align: left;
}

.author-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
}

.article-date {
    font-size: 1rem;
    color: var(--gray-500);
}

.article-reading-time {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    color: var(--gray-500);
}

.article-reading-time i {
    color: var(--gray-400);
}

/* Featured Image */
.article-featured-image {
    margin-top: var(--space-10);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.article-featured-image i {
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.2);
}

/* Article Content */
.article-section {
    padding: var(--space-16) 0;
    background: var(--white);
}

.article-container {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: var(--space-12);
    max-width: 1360px;
    margin: 0 auto;
}

.article-content {
    max-width: 1000px;
}

/* Article Typography */
.article-content p {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: var(--space-6);
}

.article-content h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-top: var(--space-10);
    margin-bottom: var(--space-4);
    line-height: 1.3;
}

.article-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-top: var(--space-8);
    margin-bottom: var(--space-3);
    line-height: 1.4;
}

.article-content ul,
.article-content ol {
    margin-bottom: var(--space-6);
    padding-left: var(--space-6);
}

.article-content li {
    font-size: 1.0625rem;
    line-height: 1.8;
    color: var(--gray-600);
    margin-bottom: var(--space-2);
}

.article-content strong {
    color: var(--gray-800);
    font-weight: 600;
}

.article-content a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.article-content a:hover {
    color: var(--accent-hover);
}

/* Lead Paragraph */
.article-content .lead {
    font-size: 1.25rem;
    line-height: 1.7;
    color: var(--gray-700);
    margin-bottom: var(--space-8);
}

/* Blockquote */
.article-content blockquote {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--gray-50);
    border-left: 4px solid var(--accent);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.article-content blockquote p {
    font-size: 1.125rem;
    font-style: italic;
    color: var(--gray-700);
    margin-bottom: var(--space-3);
}

.article-content blockquote p:last-child {
    margin-bottom: 0;
}

.article-content blockquote cite {
    display: block;
    font-size: 1rem;
    font-style: normal;
    color: var(--gray-500);
    margin-top: var(--space-3);
}

/* Callout Box */
.article-callout {
    margin: var(--space-8) 0;
    padding: var(--space-6);
    background: var(--accent-soft);
    border: 1px solid rgba(99, 102, 241, 0.2);
    border-radius: var(--radius-xl);
}

.article-callout h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin-bottom: var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.article-callout p {
    font-size: 0.9375rem;
    color: var(--gray-700);
    margin-bottom: 0;
}

.article-callout ul {
    margin-bottom: 0;
    margin-top: var(--space-3);
}

.article-callout li {
    font-size: 0.9375rem;
}

/* Stats Box */
.article-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin: var(--space-8) 0;
}

.stat-item {
    padding: var(--space-5);
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    text-align: center;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.stat-label {
    font-size: 1rem;
    color: var(--gray-500);
}

/* Article Image */
.article-content figure {
    margin: var(--space-8) 0;
}

.article-content figure img {
    width: 100%;
    border-radius: var(--radius-xl);
}

.article-content figcaption {
    font-size: 1rem;
    color: var(--gray-500);
    text-align: center;
    margin-top: var(--space-3);
}

/* Sidebar */
.article-sidebar {
    position: sticky;
    top: 100px;
    height: fit-content;
}

.sidebar-widget {
    padding: var(--space-6);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    margin-bottom: var(--space-6);
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.sidebar-widget h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Table of Contents */
.toc-list {
    list-style: none;
}

.toc-list li {
    margin-bottom: var(--space-2);
}

.toc-list a {
    display: block;
    padding: var(--space-2) 0;
    font-size: 1rem;
    color: var(--gray-600);
    text-decoration: none;
    border-left: 2px solid transparent;
    padding-left: var(--space-3);
    transition: all 0.2s ease;
}

.toc-list a:hover,
.toc-list a.active {
    color: var(--accent);
    border-left-color: var(--accent);
}

/* Share Buttons */
.share-buttons {
    display: flex;
    gap: var(--space-2);
}

.share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.2s ease;
}

.share-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: var(--white);
}

.share-btn.twitter:hover { background: #1DA1F2; border-color: #1DA1F2; }
.share-btn.linkedin:hover { background: #0077B5; border-color: #0077B5; }
.share-btn.facebook:hover { background: #1877F2; border-color: #1877F2; }

/* CTA Widget */
.cta-widget {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
    border: none;
    color: var(--white);
}

.cta-widget h4 {
    color: var(--white);
}

.cta-widget p {
    font-size: 0.9375rem;
    opacity: 0.85;
    margin-bottom: var(--space-4);
}

.cta-widget .btn {
    width: 100%;
    padding: var(--space-3);
    font-size: 1rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--white);
    border: none;
    border-radius: var(--radius-lg);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    transition: all 0.2s ease;
}

.cta-widget .btn:hover {
    background: var(--gray-100);
}

/* Author Bio */
.author-bio {
    padding: var(--space-8);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    margin-top: var(--space-12);
    display: flex;
    gap: var(--space-6);
}

.author-bio-avatar {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--accent-soft) 0%, var(--primary-soft) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid var(--white);
    box-shadow: var(--shadow-md);
}

.author-bio-avatar i {
    font-size: 2rem;
    color: var(--accent);
}

.author-bio-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius-full);
}

.author-bio-content h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.author-bio-content p {
    font-size: 0.9375rem;
    color: var(--gray-500);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Post Navigation */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-8) 0;
    margin-top: var(--space-12);
    border-top: 1px solid var(--gray-200);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
    max-width: 45%;
}

.post-navigation .nav-next {
    text-align: right;
    margin-left: auto;
}

.post-navigation a {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-xl);
    text-decoration: none;
    transition: all 0.3s ease;
}

.post-navigation a:hover {
    background: var(--white);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
}

.post-navigation .nav-label {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
}

.post-navigation .nav-next .nav-label {
    justify-content: flex-end;
}

.post-navigation .nav-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
}

/* Related Posts */
.related-section {
    padding: var(--space-16) 0;
    background: var(--gray-50);
}

.related-header {
    text-align: center;
    margin-bottom: var(--space-10);
}

.related-header h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.related-card {
    background: var(--white);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    overflow: hidden;
    transition: all 0.3s ease;
}

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

.related-card-image {
    height: 160px;
    background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.related-card-image i {
    font-size: 2.5rem;
    color: rgba(255, 255, 255, 0.3);
}

.related-card-content {
    padding: var(--space-5);
}

.related-card-category {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: var(--space-2);
}

.related-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    line-height: 1.4;
    margin-bottom: 0;
}

.related-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.related-card-title a:hover {
    color: var(--accent);
}

/* Footer */
.footer {
    padding: var(--space-16) 0 var(--space-8);
    background: var(--white);
    border-top: 1px solid var(--gray-100);
}

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


.footer-brand-icon {
    width: 32px;
    height: 32px;
    background: var(--primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-brand-text {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--gray-900);
}

.footer-tagline {
    font-size: 1rem;
    color: var(--gray-500);
    line-height: 1.6;
}

.footer-heading {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-4);
}

.footer-links {
    list-style: none;
}

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

.footer-links a {
    font-size: 1rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover {
    color: var(--gray-900);
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-8);
    border-top: 1px solid var(--gray-200);
}

.footer-copyright {
    font-size: 1rem;
    color: var(--gray-500);
}

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

.footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    color: var(--gray-500);
    text-decoration: none;
    transition: all 0.2s ease;
}

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

/* Responsive */
@media (max-width: 1024px) {
    .article-container {
                grid-template-columns: 1fr;
            }

            .article-sidebar {
                position: static;
                display: grid;
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-6);
            }

            .sidebar-widget {
                margin-bottom: 0;
            }

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

            /* Blog Page Responsive */
            .blog-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .blog-card.featured {
                grid-template-columns: 1fr;
            }

            .blog-card.featured .blog-card-image {
                border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
                min-height: 240px;
            }
        }

        @media (max-width: 768px) {
            .nav-links {
                display: none;
            }

            .mobile-toggle {
                display: flex;
            }

            .nav-wrapper {
                padding: var(--space-3);
            }

            .nav-container {
                padding: 0 var(--space-4);
            }

            /* Blog Page Responsive */
            .blog-grid {
                grid-template-columns: 1fr;
            }

            .blog-card.featured .blog-card-content {
                padding: var(--space-5);
            }

            .blog-card.featured .blog-card-title {
                font-size: 1.25rem;
            }

            .category-filter {
                top: 64px;
            }

            .filter-container {
                justify-content: flex-start;
                overflow-x: auto;
                padding-bottom: var(--space-2);
                -webkit-overflow-scrolling: touch;
            }

            .filter-btn {
                flex-shrink: 0;
            }

            .newsletter-form {
                flex-direction: column;
            }

            /* Pagination responsive */
            .pagination,
            .wp-pagenavi {
                gap: var(--space-1);
            }

            .pagination a,
            .pagination span,
            .page-numbers {
                min-width: 36px;
                height: 36px;
                font-size: 1rem;
            }

            .article-sidebar {
                grid-template-columns: 1fr;
            }

            .article-meta {
                flex-direction: column;
                gap: var(--space-4);
            }

            .author-bio {
                flex-direction: column;
                text-align: center;
            }

            .author-bio-avatar {
                margin: 0 auto;
            }

            .article-stats {
                grid-template-columns: 1fr;
            }

            .post-navigation {
                flex-direction: column;
            }

            .post-navigation .nav-previous,
            .post-navigation .nav-next {
                max-width: 100%;
            }

            .post-navigation .nav-next {
                text-align: left;
            }

            .post-navigation .nav-next .nav-label {
                justify-content: flex-start;
            }

            .related-grid {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
                gap: var(--space-8);
            }

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

        @media (max-width: 480px) {
            /* Blog Page Responsive */
            .page-hero {
                padding: 140px 0 var(--space-10);
            }

            .article-header {
                padding: 140px 0 var(--space-10);
            }

            .article-title {
                font-size: 1.75rem;
            }
        }


         /* ═══════════════════════════════════════════════════════════════
           COMPANY STATS SECTION
           ═══════════════════════════════════════════════════════════════ */
        .company-stats {
            padding: var(--space-16) 0;
            background: var(--white);
            border-bottom: 1px solid var(--gray-100);
        }

        .company-stats-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-6);
        }

        .company-stat-item {
            text-align: center;
            padding: var(--space-6);
            background: var(--gray-50);
            border-radius: var(--radius-2xl);
            border: 1px solid var(--gray-100);
            transition: all 0.3s ease;
        }

        .company-stat-item:hover {
            background: var(--white);
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .company-stat-value {
            font-size: 2rem;
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1;
            margin-bottom: var(--space-2);
        }

        .company-stat-label {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* ═══════════════════════════════════════════════════════════════
           MISSION SECTION
           ═══════════════════════════════════════════════════════════════ */
        .mission-section {
            padding: var(--space-24) 0;
            background: var(--white);
        }

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

        .mission-content h2 {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.25;
            margin-bottom: var(--space-6);
            letter-spacing: -0.01em;
        }

        .mission-lead {
            font-size: 1.125rem;
            color: var(--gray-700);
            line-height: 1.7;
            margin-bottom: var(--space-4);
        }

        .mission-body {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.7;
        }

        .mission-visual {
            position: relative;
        }

        .mission-card {
            background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
            border-radius: var(--radius-3xl);
            padding: var(--space-10);
            color: var(--white);
            position: relative;
            overflow: hidden;
        }

        .mission-card::before {
            content: '';
            position: absolute;
            top: -50%;
            right: -50%;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(99, 102, 241, 0.3) 0%, transparent 70%);
            pointer-events: none;
        }

        .mission-card-icon {
            width: 64px;
            height: 64px;
            background: rgba(255, 255, 255, 0.15);
            border-radius: var(--radius-xl);
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: var(--space-6);
        }

        .mission-card-icon i {
            font-size: 1.75rem;
            color: var(--white);
        }

        .mission-card h3 {
            font-size: 1.5rem;
            font-weight: 700;
            margin-bottom: var(--space-3);
            position: relative;
        }

        .mission-card p {
            font-size: 1rem;
            opacity: 0.85;
            line-height: 1.6;
            position: relative;
        }

        /* ═══════════════════════════════════════════════════════════════
           STORY SECTION
           ═══════════════════════════════════════════════════════════════ */
        .story-section {
            padding: var(--space-24) 0;
            background: var(--gray-50)
        }

        .story-content {
            max-width: 800px;
            margin: 0 auto;
        }

        .story-content h2 {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.25;
            margin-bottom: var(--space-8);
            text-align: center;
            letter-spacing: -0.01em;
        }

        .story-text {
            font-size: 1.0625rem;
            color: var(--gray-600);
            line-height: 1.8;
        }

        .story-text p {
            margin-bottom: var(--space-6);
        }

        .story-text p:last-child {
            margin-bottom: 0;
        }

        /* ═══════════════════════════════════════════════════════════════
           VALUES SECTION
           ═══════════════════════════════════════════════════════════════ */
        .values-section {
            padding: var(--space-24) 0;
            background: var(--white);
        }

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

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 1rem;
            font-weight: 600;
            border-radius: var(--radius-full);
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.25;
            margin-bottom: var(--space-4);
            letter-spacing: -0.01em;
        }

        .section-subtitle {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

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

        .value-card {
            padding: var(--space-8);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .value-card:hover {
            background: var(--white);
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .value-icon {
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-5);
        }

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

        .value-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-3);
        }

        .value-desc {
            font-size: 0.9375rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* ═══════════════════════════════════════════════════════════════
           FEATURES HIGHLIGHTS SECTION
           ═══════════════════════════════════════════════════════════════ */
        .feature-highlights {
            padding: var(--space-24) 0;
            background: var(--primary);
            color: var(--white);
        }

        .feature-highlights .section-tag {
            background: rgba(99, 102, 241, 0.3);
            color: #A5B4FC;
        }

        .feature-highlights .section-title {
            color: var(--white);
        }

        .feature-highlights .section-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

        .feature-highlights-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-6);
        }

        .feature-highlight-card {
            padding: var(--space-8);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .feature-highlight-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .feature-highlight-icon {
            width: 52px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-5);
        }

        .feature-highlight-icon i {
            font-size: 1.25rem;
            color: var(--white);
        }

        .feature-highlight-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-3);
        }

        .feature-highlight-desc {
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
            margin-bottom: var(--space-4);
        }

        .feature-highlight-list {
            list-style: none;
        }

        .feature-highlight-list li {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            padding: var(--space-1) 0;
        }

        .feature-highlight-list i {
            color: var(--success);
            font-size: 1rem;
        }

        /* ═══════════════════════════════════════════════════════════════
           TEAM SECTION
           ═══════════════════════════════════════════════════════════════ */
        .team-section {
            padding: var(--space-24) 0;
            background: var(--gray-50);
        }

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

        .team-card {
            text-align: center;
            padding: var(--space-8);
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

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

        .team-avatar {
            width: 96px;
            height: 96px;
            margin: 0 auto var(--space-5);
            background: linear-gradient(135deg, var(--accent-soft) 0%, var(--primary-soft) 100%);
            border-radius: var(--radius-full);
            display: flex;
            align-items: center;
            justify-content: center;
            border: 3px solid var(--white);
            box-shadow: var(--shadow-md);
        }

        .team-avatar i {
            font-size: 2.5rem;
            color: var(--accent);
        }

        .team-name {
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-1);
        }

        .team-role {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* ═══════════════════════════════════════════════════════════════
           WHY CHOOSE SECTION
           ═══════════════════════════════════════════════════════════════ */
        .why-choose {
            padding: var(--space-24) 0;
            background: var(--white);
        }

        .why-choose-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-6);
        }

        .why-choose-card {
            display: flex;
            gap: var(--space-5);
            padding: var(--space-6);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .why-choose-card:hover {
            background: var(--white);
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
        }

        .why-choose-icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-soft);
            border-radius: var(--radius-lg);
        }

        .why-choose-icon i {
            font-size: 1.25rem;
            color: var(--accent);
        }

        .why-choose-content h3 {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .why-choose-content p {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* ═══════════════════════════════════════════════════════════════
           ABOUT PAGE RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 1024px) {
            .company-stats-grid {
                grid-template-columns: repeat(2, 1fr);
            }

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

        @media (max-width: 768px) {
            .company-stats-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .company-stat-item {
                padding: var(--space-4);
            }

            .mission-grid {
                grid-template-columns: 1fr;
                gap: var(--space-8);
            }

            .mission-content h2 {
                font-size: 1.5rem;
            }

            .values-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .value-card {
                padding: var(--space-5);
            }

            .feature-highlights-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .feature-highlight-card {
                padding: var(--space-5);
            }

            .team-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .team-card {
                padding: var(--space-5);
            }

            .why-choose-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .why-choose-card {
                padding: var(--space-4);
            }

            .final-cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .final-cta-buttons .btn {
                width: 100%;
                max-width: 280px;
            }
        }

        /* Why Join Section */
        .why-join {
            padding: var(--space-24) 0;
            background: var(--white);
        }

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

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 1rem;
            font-weight: 600;
            border-radius: var(--radius-full);
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.25;
            margin-bottom: var(--space-4);
            letter-spacing: -0.01em;
        }

        .section-subtitle {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

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

        .perk-card {
            padding: var(--space-8);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            text-align: center;
            transition: all 0.3s ease;
        }

        .perk-card:hover {
            background: var(--white);
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .perk-icon {
            width: 64px;
            height: 64px;
            margin: 0 auto var(--space-5);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            border-radius: var(--radius-xl);
        }

        .perk-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .perk-title {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .perk-desc {
            font-size: 0.9375rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* Culture Section */
        .culture-section {
            padding: var(--space-24) 0;
            background: var(--primary);
            color: var(--white);
        }

        .culture-section .section-tag {
            background: rgba(99, 102, 241, 0.3);
            color: #A5B4FC;
        }

        .culture-section .section-title {
            color: var(--white);
        }

        .culture-section .section-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

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

        .culture-card {
            display: flex;
            gap: var(--space-5);
            padding: var(--space-6);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .culture-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
        }

        .culture-icon {
            width: 48px;
            height: 48px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            border-radius: var(--radius-lg);
        }

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

        .culture-content h3 {
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-2);
        }

        .culture-content p {
            font-size: 0.9375rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

        /* Benefits Section */
        .benefits-section {
            padding: var(--space-24) 0;
            background: var(--gray-50);
        }

        .benefits-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-5);
        }

        .benefit-item {
            padding: var(--space-6);
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            text-align: center;
            transition: all 0.3s ease;
        }

        .benefit-item:hover {
            border-color: var(--gray-200);
            box-shadow: var(--shadow-md);
        }

        .benefit-item i {
            font-size: 1.5rem;
            color: var(--accent);
            margin-bottom: var(--space-3);
        }

        .benefit-item h4 {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-1);
        }

        .benefit-item p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* Open Positions Section */
        .positions-section {
            padding: var(--space-24) 0;
            background: var(--white);
        }

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

        .position-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-6);
            padding: var(--space-6);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            margin-bottom: var(--space-4);
            transition: all 0.3s ease;
        }

        .position-card:hover {
            background: var(--white);
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
        }

        .position-card:last-child {
            margin-bottom: 0;
        }

        .position-info h3 {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .position-meta {
            display: flex;
            gap: var(--space-4);
        }

        .position-meta span {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 1rem;
            color: var(--gray-500);
        }

        .position-meta i {
            font-size: 1rem;
            color: var(--gray-400);
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-6);
            font-family: var(--font-body);
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: var(--radius-lg);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            white-space: nowrap;
        }

        .btn-primary {
            background: var(--primary);
            color: var(--white);
        }

        .btn-primary:hover {
            background: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        .btn-sm {
            padding: var(--space-2) var(--space-5);
            font-size: 1rem;
        }

        /* No Positions State */
        .no-positions {
            text-align: center;
            padding: var(--space-12);
            background: var(--gray-50);
            border: 2px dashed var(--gray-200);
            border-radius: var(--radius-2xl);
        }

        .no-positions i {
            font-size: 3rem;
            color: var(--gray-300);
            margin-bottom: var(--space-4);
        }

        .no-positions h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .no-positions p {
            font-size: 1rem;
            color: var(--gray-500);
            margin-bottom: var(--space-6);
        }

        /* General Application CTA */
        .general-application {
            padding: var(--space-16) 0;
            background: var(--gray-50);
        }

        .application-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-8);
            padding: var(--space-10);
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-3xl);
            box-shadow: var(--shadow-lg);
        }

        .application-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .application-content p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        .btn-accent {
            background: var(--accent);
            color: var(--white);
        }

        .btn-accent:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        /* Final CTA */
        .final-cta {
            padding: var(--space-20) 0;
            background: var(--primary);
            text-align: center;
        }

        .final-cta h2 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: var(--space-4);
        }

        .final-cta p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: var(--space-8);
        }

        .final-cta-buttons {
            display: flex;
            gap: var(--space-4);
            justify-content: center;
        }

        .final-cta .btn-primary {
            background: var(--accent);
        }

        .final-cta .btn-primary:hover {
            background: var(--accent-hover);
        }

        .final-cta .btn-secondary {
            background: transparent;
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .final-cta .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        /* ═══════════════════════════════════════════════════════════════
           CAREERS PAGE RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 1024px) {
            .benefits-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .perks-grid {
                grid-template-columns: 1fr;
                gap: var(--space-4);
            }

            .perk-card {
                padding: var(--space-6);
            }

            .culture-grid {
                grid-template-columns: 1fr;
            }

            .culture-card {
                flex-direction: column;
                text-align: center;
            }

            .culture-icon {
                margin: 0 auto;
            }

            .benefits-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: var(--space-4);
            }

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

            .position-meta {
                flex-wrap: wrap;
                justify-content: center;
                gap: var(--space-3);
            }

            .application-card {
                flex-direction: column;
                text-align: center;
                padding: var(--space-6);
            }

            .final-cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .final-cta-buttons .btn {
                width: 100%;
                max-width: 280px;
            }
        }

        @media (max-width: 480px) {
            .benefits-grid {
                grid-template-columns: 1fr;
            }

            .position-meta {
                flex-direction: column;
                gap: var(--space-2);
            }
        }

         /* ═══════════════════════════════════════════════════════════════
           INTEGRATION PHILOSOPHY SECTION
           ═══════════════════════════════════════════════════════════════ */
        .philosophy-section {
            padding: var(--space-16) 0;
            background: var(--white);
            border-bottom: 1px solid var(--gray-100);
        }

        .philosophy-content {
            max-width: 800px;
            margin: 0 auto;
            text-align: center;
        }

        .philosophy-content h2 {
            font-size: clamp(1.5rem, 2.5vw, 1.875rem);
            font-weight: 700;
            color: var(--gray-900);
            line-height: 1.3;
            margin-bottom: var(--space-5);
            letter-spacing: -0.01em;
        }

        .philosophy-content p {
            font-size: 1.0625rem;
            color: var(--gray-500);
            line-height: 1.8;
        }

        /* ═══════════════════════════════════════════════════════════════
           INTEGRATION CATEGORIES
           ═══════════════════════════════════════════════════════════════ */
        .integrations-section {
            padding: var(--space-8) 0;
            background: var(--gray-50);
        }

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

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            padding: var(--space-2) var(--space-4);
            background: var(--accent-soft);
            color: var(--accent);
            font-size: 1rem;
            font-weight: 600;
            border-radius: var(--radius-full);
            margin-bottom: var(--space-4);
        }

        .section-title {
            font-size: clamp(1.75rem, 3vw, 2.25rem);
            font-weight: 700;
            color: var(--gray-900) !important;
            line-height: 1.25;
            margin-bottom: var(--space-4);
            letter-spacing: -0.01em;
        }

        .section-subtitle {
            font-size: 1rem;
            color: var(--gray-500) !important;
            line-height: 1.6;
        }

        /* Category Block */
        .integration-category {
            margin-bottom: var(--space-16);
        }

        .integration-category:last-child {
            margin-bottom: 0;
        }

        .category-header {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            margin-bottom: var(--space-6);
            padding-bottom: var(--space-4);
            border-bottom: 1px solid var(--gray-200);
        }

        .category-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--primary);
            border-radius: var(--radius-lg);
            flex-shrink: 0;
        }

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

        .category-icon.crm { background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%); }
        .category-icon.calls { background: linear-gradient(135deg, #10B981 0%, #059669 100%); }
        .category-icon.ads { background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%); }
        .category-icon.analytics { background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%); }
        .category-icon.ai { background: linear-gradient(135deg, #EC4899 0%, #BE185D 100%); }

        .category-title-area h3 {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-1);
        }

        .category-title-area p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* Integration Cards Grid */
        .integrations-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-5);
        }

        .integration-card {
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-2xl);
            padding: var(--space-6);
            transition: all 0.3s ease;
        }

        .integration-card:hover {
            border-color: var(--accent);
            box-shadow: var(--shadow-lg);
            transform: translateY(-4px);
        }

        .integration-card-header {
            display: flex;
            align-items: center;
            gap: var(--space-4);
            margin-bottom: var(--space-4);
        }

        .integration-logo {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--gray-100);
            border-radius: var(--radius-lg);
            font-size: 1.5rem;
            flex-shrink: 0;
        }

        .integration-logo img {
            max-width: 120px;
            max-height: 36px;
            width: auto;
            height: auto;
        }

        .integration-logo-img {
            max-width: 160px;
            max-height: 48px;
            width: auto;
            height: auto;
            object-fit: contain;
        }

        /* Brand colors for logos */
        .integration-logo.servicetitan { background: #FF6B35; color: white; }
        .integration-logo.jobber { background: #00C853; color: white; }
        .integration-logo.housecall { background: #0066FF; color: white; }
        .integration-logo.callrail { background: #00BFA5; color: white; }
        .integration-logo.whatconverts { background: #5C6BC0; color: white; }
        .integration-logo.google-ads { background: #4285F4; color: white; }
        .integration-logo.lsa { background: #34A853; color: white; }
        .integration-logo.meta { background: #0081FB; color: white; }
        .integration-logo.bing { background: #00809D; color: white; }
        .integration-logo.simpleblend { background: var(--primary); color: white; }
        .integration-logo.ga4 { background: #E37400; color: white; }
        .integration-logo.gemini { background: linear-gradient(135deg, #4285F4, #EA4335, #FBBC05, #34A853); color: white; }
        .integration-logo.zapier { background: #FF4A00; color: white; }
        .integration-logo.mailchimp { background: #FFE01B; color: #241C15; }

        .integration-name {
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--gray-900);
        }

        .integration-desc {
            font-size: 1rem;
            color: var(--gray-500);
            line-height: 1.6;
            margin-bottom: var(--space-4);
        }

        .integration-features {
            list-style: none;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: var(--space-2);
        }

        .integration-features li {
            display: flex;
            align-items: center;
            gap: var(--space-2);
            font-size: 1rem;
            color: var(--gray-600);
        }

        .integration-features i {
            color: var(--success);
            font-size: 0.625rem;
        }

        /* Featured Integration Card */
        .integration-card.featured {
            border-color: var(--accent);
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.03) 0%, rgba(139, 92, 246, 0.03) 100%);
            position: relative;
        }

        .integration-card.featured::before {
            content: 'Proprietary';
            position: absolute;
            top: var(--space-4);
            right: var(--space-4);
            padding: var(--space-1) var(--space-3);
            background: var(--accent);
            color: white;
            font-size: 0.625rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            border-radius: var(--radius-full);
        }

        /* ═══════════════════════════════════════════════════════════════
           INTEGRATION BENEFITS
           ═══════════════════════════════════════════════════════════════ */
        .benefits-section {
            padding: var(--space-24) 0;
            background: var(--primary);
            color: var(--white);
        }

        .benefits-section .section-tag {
            background: rgba(99, 102, 241, 0.3);
            color: #A5B4FC;
        }

        .benefits-section .section-title {
            color: var(--white);
        }

        .benefits-section .section-subtitle {
            color: rgba(255, 255, 255, 0.6);
        }

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

        .benefit-card {
            padding: var(--space-6);
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: var(--radius-2xl);
            text-align: center;
            transition: all 0.3s ease;
        }

        .benefit-card:hover {
            background: rgba(255, 255, 255, 0.08);
            border-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-4px);
        }

        .benefit-icon {
            width: 56px;
            height: 56px;
            margin: 0 auto var(--space-5);
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent);
            border-radius: var(--radius-xl);
        }

        .benefit-icon i {
            font-size: 1.5rem;
            color: var(--white);
        }

        .benefit-title {
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--white);
            margin-bottom: var(--space-2);
        }

        .benefit-desc {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.7);
            line-height: 1.6;
        }

         /* ═══════════════════════════════════════════════════════════════
           PARTNER CTA
           ═══════════════════════════════════════════════════════════════ */
        .partner-cta {
            padding: var(--space-16) 0;
            background: var(--gray-50);
        }

        .partner-cta-card {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-8);
            padding: var(--space-10);
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: var(--radius-3xl);
            box-shadow: var(--shadow-lg);
        }

        .partner-cta-content h3 {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .partner-cta-content p {
            font-size: 1rem;
            color: var(--gray-500);
        }

        /* ═══════════════════════════════════════════════════════════════
           PARTNERS PAGE RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 1024px) {
            .integrations-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .partner-cta-card {
                flex-direction: column;
                text-align: center;
                gap: var(--space-6);
            }
        }

        @media (max-width: 768px) {
            .philosophy-content h2 {
                font-size: 1.5rem;
            }

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

            .integrations-grid {
                grid-template-columns: 1fr;
            }

            .integration-card {
                padding: var(--space-5);
            }

            .benefits-grid {
                grid-template-columns: 1fr;
            }

            .benefit-card {
                padding: var(--space-5);
            }

            .partner-cta-card {
                padding: var(--space-6);
            }
        }

        .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: var(--space-2);
            padding: var(--space-3) var(--space-6);
            font-family: var(--font-body);
            font-size: 0.9375rem;
            font-weight: 600;
            border-radius: var(--radius-lg);
            text-decoration: none;
            cursor: pointer;
            transition: all 0.2s ease;
            border: none;
            white-space: nowrap;
        }

        .btn-primary {
            background: var(--primary);
            color: var(--white);
        }

        .btn-primary:hover {
            background: var(--primary-light);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        .btn-secondary {
            background: transparent;
            color: var(--gray-700);
            border: 1px solid var(--gray-300);
        }

        .btn-secondary:hover {
            background: var(--gray-50);
            border-color: var(--gray-400);
        }

        .btn-accent {
            background: var(--accent);
            color: var(--white);
        }

        .btn-accent:hover {
            background: var(--accent-hover);
            transform: translateY(-1px);
            box-shadow: var(--shadow-lg);
        }

        /* ═══════════════════════════════════════════════════════════════
           FINAL CTA
           ═══════════════════════════════════════════════════════════════ */
        .final-cta {
            padding: var(--space-20) 0;
            background: var(--primary);
            text-align: center;
        }

        .final-cta h2 {
            font-size: clamp(1.5rem, 3vw, 2rem);
            font-weight: 700;
            color: var(--white);
            margin-bottom: var(--space-4);
        }

        .final-cta p {
            font-size: 1rem;
            color: rgba(255, 255, 255, 0.6);
            margin-bottom: var(--space-8);
        }

        .final-cta-buttons {
            display: flex;
            gap: var(--space-4);
            justify-content: center;
        }

        .final-cta .btn-primary {
            background: var(--accent);
        }

        .final-cta .btn-primary:hover {
            background: var(--accent-hover);
        }

        .final-cta .btn-secondary {
            background: transparent;
            color: var(--white);
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .final-cta .btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.5);
        }

        /* Feature Comparison Table */
        .comparison-section {
            padding: var(--space-20) 0;
            background: var(--gray-50);
        }

        .comparison-table-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            overflow-x: auto;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--white);
            border-radius: var(--radius-2xl);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

        .comparison-table thead {
            background: var(--primary);
            color: var(--white);
        }

        .comparison-table th {
            padding: var(--space-5) var(--space-4);
            font-size: 0.9375rem;
            font-weight: 600;
            text-align: center;
        }

        .comparison-table th:first-child {
            text-align: left;
            padding-left: var(--space-6);
        }

        .comparison-table th.featured-col {
            background: var(--accent);
        }

        .comparison-table tbody tr {
            border-bottom: 1px solid var(--gray-100);
        }

        .comparison-table tbody tr:last-child {
            border-bottom: none;
        }

        .comparison-table tbody tr:hover {
            background: var(--gray-50);
        }

        .comparison-table td {
            padding: var(--space-4);
            font-size: 0.875rem;
            text-align: center;
            color: var(--gray-600);
        }

        .comparison-table td:first-child {
            text-align: left;
            padding-left: var(--space-6);
            font-weight: 500;
            color: var(--gray-700);
        }

        .comparison-table td.featured-col {
            background: var(--accent-soft);
        }

        .comparison-table .check {
            color: var(--success);
            font-size: 1rem;
        }

        .comparison-table .dash {
            color: var(--gray-300);
        }

        /* What's Included Section */
        .included-section {
            padding: var(--space-20) 0;
            background: var(--white);
        }

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

        .included-card {
            padding: var(--space-6);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .included-card:hover {
            background: var(--white);
            border-color: var(--gray-200);
            box-shadow: var(--shadow-md);
        }

        .included-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-soft);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
        }

        .included-icon i {
            font-size: 1.25rem;
            color: var(--accent);
        }

        .included-card h3 {
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .included-card p {
            font-size: 0.875rem;
            color: var(--gray-500);
            line-height: 1.6;
        }



        /* Feature Comparison Table */
        .comparison-section {
            padding: var(--space-20) 0;
            background: var(--gray-50);
        }

        .comparison-table-wrapper {
            max-width: 1000px;
            margin: 0 auto;
            overflow-x: auto;
        }

        .comparison-table {
            width: 100%;
            border-collapse: collapse;
            background: var(--white);
            border-radius: var(--radius-2xl);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
        }

        .comparison-table thead {
            background: var(--primary);
            color: var(--white);
        }

        .comparison-table th {
            padding: var(--space-5) var(--space-4);
            font-size: 0.9375rem;
            font-weight: 600;
            text-align: center;
        }

        .comparison-table th:first-child {
            text-align: left;
            padding-left: var(--space-6);
        }

        .comparison-table th.featured-col {
            background: var(--accent);
        }

        .comparison-table tbody tr {
            border-bottom: 1px solid var(--gray-100);
        }

        .comparison-table tbody tr:last-child {
            border-bottom: none;
        }

        .comparison-table tbody tr:hover {
            background: var(--gray-50);
        }

        .comparison-table td {
            padding: var(--space-4);
            font-size: 0.875rem;
            text-align: center;
            color: var(--gray-600);
        }

        .comparison-table td:first-child {
            text-align: left;
            padding-left: var(--space-6);
            font-weight: 500;
            color: var(--gray-700);
        }

        .comparison-table td.featured-col {
            background: var(--accent-soft);
        }

        .comparison-table .check {
            color: var(--success);
            font-size: 1rem;
        }

        .comparison-table .dash {
            color: var(--gray-300);
        }

        /* What's Included Section */
        .included-section {
            padding: var(--space-20) 0;
            background: var(--white);
        }

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

        .included-card {
            padding: var(--space-6);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-2xl);
            transition: all 0.3s ease;
        }

        .included-card:hover {
            background: var(--white);
            border-color: var(--gray-200);
            box-shadow: var(--shadow-md);
        }

        .included-icon {
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--accent-soft);
            border-radius: var(--radius-lg);
            margin-bottom: var(--space-4);
        }

        .included-icon i {
            font-size: 1.25rem;
            color: var(--accent);
        }

        .included-card h3 {
            font-size: 1.0625rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-2);
        }

        .included-card p {
            font-size: 0.875rem;
            color: var(--gray-500);
            line-height: 1.6;
        }

        /* Pricing FAQ Section */
        .pricing-faq {
            padding: var(--space-20) 0;
            background: var(--gray-50);
        }

        .faq-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-5);
            max-width: 1000px;
            margin: 0 auto;
        }

        .faq-item {
            padding: var(--space-6);
            background: var(--white);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-xl);
            transition: all 0.3s ease;
        }

        .faq-item:hover {
            border-color: var(--gray-200);
            box-shadow: var(--shadow-md);
        }

        .faq-question {
            font-size: 1rem;
            font-weight: 600;
            color: var(--gray-900);
            margin-bottom: var(--space-3);
        }

        .faq-answer {
            font-size: 0.875rem;
            color: var(--gray-500);
            line-height: 1.7;
        }

        /* Trust Section */
        .trust-section {
            padding: var(--space-16) 0;
            background: var(--white);
            border-top: 1px solid var(--gray-100);
        }

        .trust-badges {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            gap: var(--space-4);
        }

        .trust-badge {
            display: flex;
            align-items: center;
            gap: var(--space-3);
            padding: var(--space-4) var(--space-6);
            background: var(--gray-50);
            border: 1px solid var(--gray-100);
            border-radius: var(--radius-xl);
        }

        .trust-badge i {
            font-size: 1.25rem;
            color: var(--accent);
        }

        .trust-badge span {
            font-size: 0.875rem;
            font-weight: 600;
            color: var(--gray-700);
        }

        /* ═══════════════════════════════════════════════════════════════
           PRICING PAGE RESPONSIVE
           ═══════════════════════════════════════════════════════════════ */
        @media (max-width: 1024px) {
            .included-grid {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {
            .pricing-section .pricing-grid {
                grid-template-columns: 1fr;
            }

            .pricing-section .pricing-card {
                padding: var(--space-6);
            }

            .pricing-section .pricing-card.featured {
                transform: none;
            }

            .comparison-table-wrapper {
                margin: 0 calc(-1 * var(--space-4));
                padding: 0 var(--space-4);
            }

            .comparison-table th,
            .comparison-table td {
                padding: var(--space-3) var(--space-2);
                font-size: 0.75rem;
            }

            .comparison-table th:first-child,
            .comparison-table td:first-child {
                padding-left: var(--space-3);
                min-width: 120px;
            }

            .included-grid {
                grid-template-columns: 1fr;
            }

            .faq-grid {
                grid-template-columns: 1fr;
            }

            .trust-badges {
                flex-direction: column;
                align-items: center;
            }

            .trust-badge {
                width: 100%;
                max-width: 280px;
                justify-content: center;
            }

            .final-cta-buttons {
                flex-direction: column;
                align-items: center;
            }

            .final-cta-buttons .btn {
                width: 100%;
                max-width: 280px;
            }
        }

        @media (max-width: 480px) {
            .comparison-table th,
            .comparison-table td {
                padding: var(--space-2) var(--space-1);
                font-size: 0.6875rem;
            }

            .comparison-table th:first-child,
            .comparison-table td:first-child {
                min-width: 100px;
            }
        }

        /* Video Alignment Section */

.problem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-8);
    align-items: start;
}

.problem-video-card {
    background: var(--white);
    border-radius: 12px;
    padding: var(--space-6);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.problem-video-card video {
    width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

@media (max-width: 768px) {
    .problem-grid {
        grid-template-columns: 1fr;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BETA SIGNUP PAGE
   ═══════════════════════════════════════════════════════════════ */

/* Beta Navigation */
.beta-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-3) 0;
    background: var(--white);
    border-bottom: 1px solid var(--gray-100);
    box-shadow: var(--shadow-sm);
}

.beta-nav-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.beta-nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.beta-nav-logo:hover {
    opacity: 0.85;
}

/* Beta Hero Section */
.beta-hero {
    position: relative;
    padding: 140px 0 var(--space-16);
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.beta-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--primary) 0%, #312E81 50%, var(--primary-light) 100%);
    z-index: 0;
}

.beta-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(99, 102, 241, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(139, 92, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
}

.beta-hero .container {
    position: relative;
    z-index: 1;
}

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

/* Beta Content */
.beta-content {
    color: var(--white);
}

.beta-badge {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--white) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.beta-content h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--space-6);
    letter-spacing: -0.02em;
}

.beta-content h1 .highlight {
    background: linear-gradient(135deg, #A5B4FC 0%, #C4B5FD 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.beta-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.7;
    margin-bottom: var(--space-8);
}

/* Beta Perks */
.beta-perks {
    margin-bottom: var(--space-8);
}

.beta-perks h3 {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: var(--space-4);
}

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

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

.perk-item i {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-lg);
    color: var(--accent);
    font-size: 1rem;
    flex-shrink: 0;
}

.perk-text {
    display: flex;
    flex-direction: column;
}

.perk-text strong {
    font-size: 1rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: var(--space-1);
}

.perk-text span {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Beta Stats */
.beta-stats {
    display: flex;
    gap: var(--space-8);
}

.beta-stat {
    text-align: center;
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-xl);
    min-width: 140px;
}

.beta-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--white);
    line-height: 1;
    margin-bottom: var(--space-1);
}

.beta-stat-label {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Beta Signup Card */
.beta-card {
    background: var(--white);
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-2xl);
    overflow: hidden;
}

.beta-card .signup-card-header {
    padding: var(--space-6);
    text-align: center;
    border-bottom: 1px solid var(--gray-100);
}

.beta-card-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-3);
}

.beta-card .signup-card-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.beta-card .signup-card-header p {
    font-size: 0.9375rem;
    color: var(--gray-500);
}

.beta-card .form-footer {
    padding: var(--space-4) var(--space-6);
    background: var(--gray-50);
    text-align: center;
    border-top: 1px solid var(--gray-100);
}

.beta-card .form-footer p {
    font-size: 0.875rem;
    color: var(--gray-500);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.beta-card .form-footer i {
    color: var(--success);
}

/* Beta Features Section */
.beta-features {
    padding: var(--space-20) 0;
    background: var(--white);
}

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

.beta-feature-card {
    padding: var(--space-6);
    background: var(--gray-50);
    border: 1px solid var(--gray-100);
    border-radius: var(--radius-2xl);
    text-align: center;
    transition: all 0.3s ease;
}

.beta-feature-card:hover {
    background: var(--white);
    border-color: var(--accent);
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.beta-feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-4);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary);
    border-radius: var(--radius-xl);
}

.beta-feature-icon i {
    font-size: 1.5rem;
    color: var(--white);
}

.beta-feature-card h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.beta-feature-card p {
    font-size: 0.9375rem;
    color: var(--gray-500);
    line-height: 1.6;
}

/* Beta Process Section */
.beta-process {
    padding: var(--space-20) 0;
    background: var(--gray-50);
}

.beta-process-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-6);
    max-width: 1000px;
    margin: 0 auto;
}

.beta-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

.beta-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 24px;
    left: calc(50% + 30px);
    width: calc(100% - 60px);
    height: 2px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--gray-200) 100%);
}

.beta-step-number {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--white);
    font-size: 1.25rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-4);
    position: relative;
    z-index: 1;
}

.beta-step-content h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: var(--space-2);
}

.beta-step-content p {
    font-size: 0.875rem;
    color: var(--gray-500);
    line-height: 1.6;
}

/* Beta FAQ Section */
.beta-faq {
    padding: var(--space-20) 0;
    background: var(--white);
}

/* Beta Final CTA */
.beta-final-cta {
    padding: var(--space-16) 0;
    background: linear-gradient(135deg, var(--primary) 0%, #312E81 100%);
    text-align: center;
}

.beta-cta-content h2 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.beta-cta-content p {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: var(--space-6);
}

.beta-cta-content .btn-primary {
    background: var(--accent);
    margin-bottom: var(--space-6);
}

.beta-cta-content .btn-primary:hover {
    background: var(--accent-hover);
}

.beta-cta-trust {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-6);
}

.beta-cta-trust span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

.beta-cta-trust i {
    color: rgba(255, 255, 255, 0.8);
}

/* Beta Footer */
.beta-footer {
    padding: var(--space-8) 0;
    background: var(--gray-50);
    border-top: 1px solid var(--gray-200);
}

.beta-footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
}

.beta-footer-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.beta-footer-brand img {
    width: 24px;
    height: 24px;
}

.beta-footer-brand span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--gray-900);
}

.beta-footer-copyright {
    font-size: 0.875rem;
    color: var(--gray-500);
}

.beta-footer-links {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    justify-content: center;
}

.beta-footer-links a {
    font-size: 0.875rem;
    color: var(--gray-500);
    text-decoration: none;
    transition: color 0.2s ease;
}

.beta-footer-links a:hover {
    color: var(--gray-700);
}

.beta-footer-divider {
    color: var(--gray-300);
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES (Terms & Privacy Policy)
   ═══════════════════════════════════════════════════════════════ */

.legal-hero {
    padding: 140px 0 var(--space-12);
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0D2137 100%);
    text-align: center;
}

.legal-hero h1 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--white);
    margin-bottom: var(--space-3);
}

.legal-updated {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
}

.legal-content {
    padding: var(--space-16) 0;
    background: var(--white);
}

.legal-container {
    max-width: 800px;
    margin: 0 auto;
}

.legal-section {
    margin-bottom: var(--space-10);
}

.legal-section:last-child {
    margin-bottom: 0;
}

.legal-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gray-900);
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--gray-100);
}

.legal-section h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--gray-800);
    margin-top: var(--space-6);
    margin-bottom: var(--space-3);
}

.legal-section p {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: var(--space-4);
}

.legal-section p:last-child {
    margin-bottom: 0;
}

.legal-section ul {
    margin: var(--space-4) 0;
    padding-left: var(--space-6);
}

.legal-section ul li {
    font-size: 1rem;
    color: var(--gray-600);
    line-height: 1.8;
    margin-bottom: var(--space-2);
}

.legal-section a {
    color: var(--accent);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-section a:hover {
    color: var(--accent-hover);
    text-decoration: underline;
}

@media (max-width: 768px) {
    .legal-hero {
        padding: 120px 0 var(--space-10);
    }

    .legal-hero h1 {
        font-size: 1.75rem;
    }

    .legal-section h2 {
        font-size: 1.25rem;
    }
}

/* ═══════════════════════════════════════════════════════════════
   BETA PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .beta-grid {
        grid-template-columns: 1fr;
        gap: var(--space-10);
    }

    .beta-content {
        text-align: center;
    }

    .perk-list {
        max-width: 400px;
        margin: 0 auto;
    }

    .perk-item {
        text-align: left;
    }

    .beta-stats {
        justify-content: center;
    }

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

    .beta-process-steps {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-8);
    }

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

@media (max-width: 768px) {
    .beta-hero {
        padding: 120px 0 var(--space-12);
    }

    .beta-content h1 {
        font-size: 1.75rem;
    }

    .beta-subtitle {
        font-size: 1rem;
    }

    .beta-stats {
        flex-direction: column;
        align-items: center;
        gap: var(--space-4);
    }

    .beta-stat {
        width: 100%;
        max-width: 200px;
    }

    .beta-features-grid {
        grid-template-columns: 1fr;
    }

    .beta-process-steps {
        grid-template-columns: 1fr;
        max-width: 400px;
    }

    .beta-cta-trust {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }
}

/* ==========================================================================
   INVITE ONLY PAGE
   ========================================================================== */

/* Minimal Nav for Invite Page */
.nav-container-minimal {
    max-width: 800px;
    justify-content: space-between;
}

.nav-container-minimal .nav-login {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--gray-600);
    text-decoration: none;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    transition: all 0.15s ease;
}

.nav-container-minimal .nav-login:hover {
    color: var(--gray-900);
    background: var(--gray-50);
}

.nav-container-minimal .nav-login i {
    font-size: 0.875rem;
}

.invite-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 0 var(--space-16);
    overflow: hidden;
}

.invite-background {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #0F172A 0%, #1E3A5F 50%, #0D2137 100%);
    z-index: 0;
}

.invite-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(30, 58, 138, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(30, 64, 175, 0.2) 0%, transparent 70%);
}

.invite-hero .container {
    position: relative;
    z-index: 1;
    width: 100%;
}

.invite-wrapper {
    max-width: 480px;
    margin: 0 auto;
    text-align: center;
}

/* Invite Content - Simplified Header */
.invite-content {
    margin-bottom: var(--space-5);
    color: var(--white);
}

.invite-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    border-radius: var(--radius-full);
    border: 1px solid rgba(255, 255, 255, 0.15);
    margin-bottom: var(--space-4);
}

.invite-badge i {
    font-size: 0.625rem;
}

.invite-content h1 {
    font-size: clamp(2rem, 5vw, 2.75rem);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: var(--space-3);
    letter-spacing: -0.03em;
}

.invite-subtitle {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
    max-width: 380px;
    margin: 0 auto;
}

/* Invite Card */
.invite-card {
    background: var(--white);
    border-radius: var(--radius-2xl);
    box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.35);
    overflow: hidden;
}

/* Invite Form */
.invite-form {
    padding: var(--space-6);
}

/* Gravity Forms Overrides for Invite Page */
.invite-form .gform_wrapper {
    margin: 0;
}

.invite-form .gform_fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    row-gap: var(--space-3);
    justify-items: stretch;
    text-align: left;
}

.invite-form .gfield {
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: left !important;
}

.invite-form .gfield--width-half {
    grid-column: span 1;
}

.invite-form .gfield--width-full {
    grid-column: span 2;
    margin-top: var(--space-1) !important;
    padding-top: var(--space-3) !important;
    border-top: 1px solid var(--gray-100);
}

.invite-form .gfield_label {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-600);
    margin-bottom: 4px !important;
    margin-top: 0 !important;
}

.invite-form .gfield--width-full .gfield_label {
    color: var(--gray-700);
    font-weight: 600;
}

.invite-form .gfield--width-full .gfield_label::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f500";
    color: #3B82F6;
    margin-right: var(--space-2);
}

/* Hide "(Required)" text, show only asterisk */
.invite-form .gfield_required_text {
    display: none;
}

.invite-form .gfield_required::before {
    content: "*";
    color: var(--error);
    margin-left: 2px;
}

/* Input styling */
.invite-form .ginput_container input {
    width: 100%;
    padding: var(--space-3);
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    color: var(--gray-900);
    transition: all 0.2s ease;
    text-align: left !important;
}

.invite-form .ginput_container input::placeholder {
    color: var(--gray-400) !important;
    opacity: 1 !important;
}

.invite-form .ginput_container input:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--white);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

.invite-form .gfield--width-full .ginput_container input {
    background: var(--white);
    border-color: var(--gray-300);
}

/* Submit button */
.invite-form .gform_footer {
    margin-top: var(--space-4) !important;
    padding: 0 !important;
}

.invite-form .gform_button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all 0.2s ease;
}

.invite-form .gform_button i {
    display: none;
}

.invite-form .gform_button::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: "\f061";
    margin-left: var(--space-2);
}

.invite-form .gform_button:hover {
    background: var(--accent-hover);
    box-shadow: var(--shadow-lg);
}

.invite-form .gform_button:active {
    transform: scale(0.98);
}

/* Hide validation styling until needed */
.invite-form .gform_validation_error .gfield_error input {
    border-color: var(--error);
}

/* Responsive */
@media (max-width: 640px) {
    .invite-form .gform_fields {
        grid-template-columns: 1fr;
    }

    .invite-form .gfield--width-half,
    .invite-form .gfield--width-full {
        grid-column: span 1;
    }
}

/* Invite Card Footer */
.invite-card-footer {
    padding: var(--space-3) var(--space-6);
    background: var(--gray-50);
    border-top: 1px solid var(--gray-100);
}

.invite-card-footer .footer-trust {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-5);
}

.invite-card-footer .footer-trust span {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--gray-500);
}

.invite-card-footer .footer-trust i {
    font-size: 0.75rem;
    color: var(--success);
}

/* Invite Page Responsive */
@media (max-width: 640px) {
    .invite-hero {
        padding: 80px 0 var(--space-10);
    }

    .invite-wrapper {
        max-width: 100%;
    }

    .invite-content {
        margin-bottom: var(--space-5);
    }

    .invite-content h1 {
        font-size: 1.75rem;
    }

    .invite-subtitle {
        font-size: 0.875rem;
    }

    .invite-form {
        padding: var(--space-5);
    }

    /* Stack form rows on mobile */
    .invite-form .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .invite-card-footer {
        padding: var(--space-3) var(--space-5);
    }

    .invite-card-footer .footer-trust {
        gap: var(--space-4);
    }
}