/* ============================================
   AIWAH LABS - MAIN SITE DESIGN SYSTEM
   ============================================ */

:root {
    /* Fonts */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Primary Colors - Brand Green */
    --primary: #00a378;
    --primary-light: #33b593;
    --primary-dark: #008260;
    --primary-glow: rgba(0, 163, 120, 0.25);

    /* Neutral Scale - professional and clean */
    --navy: #1d364e;
    --navy-light: #2a4a6a;
    --navy-dark: #0f172a;

    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-tertiary: #f3f4f6;
    --bg-dark: #1d364e;

    /* Text Colors */
    --text-primary: #1d364e;
    /* Using dark navy for main text like Hello site */
    --text-secondary: #4b5563;
    --text-muted: #9ca3af;
    --text-inverse: #ffffff;

    /* Borders */
    --border-light: #e5e7eb;
    --border-medium: #d1d5db;

    /* Spacing & Sizes */
    --container-max: 1280px;
    --container-padding: 24px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-base: 0.3s ease;

    /* ============================================
       GLOBAL TYPOGRAPHY SYSTEM
       ============================================ */
    --text-xs: 0.75rem;
    /* 12px */
    --text-sm: 0.875rem;
    /* 14px */
    --text-base: 1rem;
    /* 16px */
    --text-lg: 1.125rem;
    /* 18px */
    --text-xl: 1.25rem;
    /* 20px */
    --text-2xl: 1.5rem;
    /* 24px */
    --text-3xl: 2rem;
    /* 32px */
    --text-4xl: clamp(2.5rem, 5vw, 4rem);
    /* Responsive H1 */
}

/* Reset & Base */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--font-primary);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    line-height: 1.6;
    font-size: var(--text-base);
}

h1,
.hero-title,
.heading-xl {
    font-size: var(--text-4xl);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

h2,
.section-title,
.heading-lg {
    font-size: clamp(2rem, 4vw, 2.75rem);
    /* Responsive H2 */
    font-weight: 700;
    line-height: 1.2;
}

h3,
.heading-md {
    font-size: var(--text-2xl);
    /* 24px */
    font-weight: 700;
    line-height: 1.3;
}

h4,
.heading-sm {
    font-size: var(--text-xl);
    /* 20px */
    font-weight: 600;
    line-height: 1.4;
}

h5,
.heading-xs {
    font-size: var(--text-lg);
    /* 18px */
    font-weight: 600;
    line-height: 1.4;
}

h6 {
    font-size: var(--text-base);
    /* 16px */
    font-weight: 600;
    line-height: 1.4;
}

/* Mobile Typography Overrides */
@media (max-width: 768px) {
    :root {
        --text-2xl: 1.25rem;
        /* H3 becomes 20px on mobile */
        --text-xl: 1.125rem;
        /* H4 becomes 18px on mobile */
        --text-lg: 1rem;
        /* H5 becomes 16px on mobile */
    }

    h2,
    .section-title,
    .heading-lg {
        font-size: 1.75rem;
        /* ~28px on mobile */
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-base);
}

ul {
    list-style: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* Layout Utilities */
.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 64px;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.section-subtitle,
.hero-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Brand Section Variation */
.section-brand {
    background-color: var(--primary) !important;
    color: white !important;
}

.section-brand .section-title {
    color: white !important;
}

.section-brand .section-subtitle {
    color: rgba(255, 255, 255, 0.9) !important;
}

.section-brand .card-title {
    color: var(--navy);
}

.section-brand .card-description {
    color: var(--text-secondary);
}


/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-weight: 600;
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary);
    color: white;
    box-shadow: 0 4px 6px -1px var(--primary-glow);
}

.btn-primary:hover {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px -2px var(--primary-glow);
}

.btn-secondary {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.btn-secondary:hover {
    border-color: #ffffff;
    background-color: rgba(255, 255, 255, 0.1);
}

/* btn-secondary on light backgrounds */
.section:not(.section-brand):not(.cta-dark-section) .btn-secondary,
.security-trust-section .btn-secondary {
    background-color: var(--primary);
    color: white;
    border: 1px solid var(--primary);
}

.section:not(.section-brand):not(.cta-dark-section) .btn-secondary:hover,
.security-trust-section .btn-secondary:hover {
    background-color: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 163, 120, 0.3);
}

/* Navbar (Sticky & Glassmorphism) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--border-light);
    transition: all var(--transition-base);
}

.nav-container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-logo img {
    height: 40px;
    width: auto;
    max-width: none;
    /* Prevent global max-width from interfering */
    object-fit: contain;
}

.nav-links {
    display: flex;
    gap: 32px;
    align-items: center;
}

.nav-link {
    font-weight: 500;
    color: var(--text-secondary);
    position: relative;
    padding: 8px 0;
    font-size: 0.95rem;
}

.nav-link:hover {
    color: var(--primary);
}

/* ============================================
    HERO SECTION (Premium Split Layout)
    ============================================ */
.hero {
    padding: 120px 0 140px;
    position: relative;
    overflow: visible;
    background: var(--navy);
}

.hero::after {
    display: none !important;
    /* Removed wave as requested */
}

.hero-bg-glow {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse 60% 40% at 20% 80%, rgba(0, 210, 165, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 80% 20%, rgba(0, 168, 132, 0.1) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
    display: none;
}

.hero-container {
    position: relative;
    z-index: 1;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.hero-split-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
    min-height: 500px;
}

.hero-content-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 600px;
}

.hero-title {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: #ffffff;
    margin: 0;
    text-align: left;
}

.hero-title span {
    color: #ffffff;
    /* Uniform text color - no brand accent */
}

.hero-description {
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin: 0;
    text-align: left;
    max-width: 540px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 8px;
}

.hero-visual-right {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    position: relative;
}

/* Responsive Hero Adjustments */
@media (max-width: 968px) {
    .hero-split-wrapper {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        text-align: center;
        min-height: auto;
        display: flex !important;
        flex-direction: column-reverse !important;
        /* Visual Top, Text Bottom */
    }

    .hero-content-left {
        align-items: center;
        text-align: center;
        margin: 0 auto;
        padding-top: 20px;
    }

    .hero-title,
    .hero-description {
        text-align: center;
    }

    .hero-title {
        font-size: 1.75rem !important;
        /* Smaller for mobile to fit */
        margin-bottom: 12px;
    }

    .hero-description {
        margin: 0 auto;
        font-size: 0.95rem !important;
    }

    .hero-actions {
        justify-content: center;
        margin-top: 20px;
    }

    .hero-visual-right {
        display: flex;
        width: 100%;
        justify-content: center;
        min-height: auto !important;
        margin-bottom: 0;
        padding-top: 20px;
    }

    .hero {
        padding: 80px 0 40px !important;
        /* Tighter padding to fit viewport */
    }
}


/* Cards (Services / Features) */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
}

.feature-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-light);
}

.card-icon {
    width: 48px;
    height: 48px;
    background: #f0fdf9;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-size: 1.5rem;
}

.card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.card-description {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Footer */
.footer {
    background-color: var(--bg-secondary);
    padding: 80px 0 40px;
    margin-top: 80px;
    border-top: 1px solid var(--border-light);
}

.footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 64px;
}

.footer-brand p {
    color: var(--text-secondary);
    margin-top: 16px;
    max-width: 300px;
}

.footer-col h4 {
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--text-primary);
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--text-secondary);
}

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

/* Mobile Responsive */
@media (max-width: 768px) {
    body {
        font-size: 0.9375rem;
        /* 15px */
    }

    .container {
        padding: 0 24px;
        /* Reverted to original */
    }

    h1,
    .hero-title {
        font-size: 2rem !important;
        /* 32px */
    }

    h2,
    .section-title {
        font-size: 1.5rem !important;
        /* 24px */
    }

    h3 {
        font-size: 1.125rem !important;
        /* 18px */
    }

    .section-subtitle,
    .hero-description,
    section p {
        font-size: 0.9375rem !important;
        /* 15px */
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .nav-links {
        display: none;
    }
}

/* ============================================
   MOBILE MENU STYLES
   ============================================ */

/* Mobile Menu Button (Hamburger) - Hidden by default on Desktop */
/* Mobile Menu Button - Exact Hello Reference */
.mobile-menu-btn {
    display: none;
    /* Hidden on Desktop */
    flex-direction: column;
    gap: 5px;
    padding: 8px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 2000;
}

.mobile-menu-btn span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.mobile-menu-btn.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}

/* For compatibility with existing HTML using 'bar' class, map 'bar' to 'span' styles logic */
/* But better to update HTML to use spans if needed. My index.html uses spans lines 145-147? */
/* Step 325 showed: <span class="bar"></span>. So I need to use .bar selector or update HTML. */
/* Hello styles use generic spans? */
/* Let's double check Step 325: lines 145-147 are <span class="bar"></span>. */
/* I will stick to selector .mobile-menu-btn .bar to be safe, but apply same styles */

.mobile-menu-btn .bar {
    width: 24px;
    height: 2px;
    background-color: var(--text-primary);
    border-radius: 2px;
    margin: 0;
    /* Override previous margin */
    transition: all 0.3s ease;
}

.mobile-menu-btn.active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.mobile-menu-btn.active .bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-btn.active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
}


/* Mobile Menu Container - Hidden by default */
.mobile-menu {
    display: none;
    position: fixed;
    left: 0;
    top: 80px;
    /* Start below navbar (navbar height: 80px) */
    width: 100%;
    gap: 0;
    flex-direction: column;
    background-color: #fff;
    text-align: left;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    z-index: 900;
    padding: 24px;
    /* Reduced padding */
    height: auto;
    /* Auto height for dropdown style */
    visibility: hidden;
    opacity: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-menu.active {
    display: flex;
    visibility: visible;
    opacity: 1;
    /* Aligns with top: 80px below navbar */
}

/* Hide mobile menu header (logo + close) to avoid "two navbars" - use hamburger to close */
.mobile-menu-header,
.mobile-menu-close {
    display: none !important;
}

/* Overlay: show when active for click-to-close; below navbar so hamburger stays clickable */
.mobile-menu-overlay {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 899;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.mobile-menu-overlay.active {
    display: block !important;
    opacity: 1;
    visibility: visible;
}

.mobile-menu-links {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.mobile-menu-links a {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--text-primary);
    /* border-bottom removed */
    padding-bottom: 0;
    /* Adjusted padding since border is gone */
}

.mobile-menu-links a:last-child {
    margin-bottom: 0;
}

.mobile-menu-cta {
    display: block;
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--border-light);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-header {
        margin-bottom: 32px;
    }

    .mobile-menu-btn {
        display: flex;
    }

    .nav-cta-btn {
        display: none;
    }
}

/* Ensure Nav Actions container allows items to sit side-by-side */
.nav-actions {
    display: flex;
    align-items: center;
}

/* Mobile Menu Blur Effect */
body.menu-open main {
    filter: blur(8px);
    transition: filter 0.3s ease;
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
    /* Slight dimming for better contrast */
}

body.menu-open {
    overflow: hidden;
    /* Prevent scrolling */
}

/* Ensure navbar stays sharp */
body.menu-open .navbar {
    z-index: 1001;
}

body.menu-open .mobile-menu {
    z-index: 1000;
}

/* ============================================
   INTEGRATIONS / PARTNERS SECTION
   ============================================ */
.integrations-section {
    padding: 80px 0;
    background: #ffffff;
    border-bottom: 1px solid var(--border-light);
    overflow: hidden;
}

.integrations-section .section-header {
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.carousel-wrapper {
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 20px 0;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.carousel-track {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: scroll 40s linear infinite;
}

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

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    opacity: 0.7;
    transition: all 0.3s ease;
    /* filter: grayscale(100%); removed to match colorful hello page if needed, or keep? Hello page has logos colored? Hello images are colored. */
}

.partner-item:hover {
    opacity: 1;
    transform: translateY(-2px);
}

.partner-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.partner-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 4px;
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* Mobile Adjustments for Integrations */
@media (max-width: 768px) {
    .integrations-section {
        padding: 60px 0;
    }

    .carousel-track {
        gap: 40px;
        animation-duration: 30s;
    }

    /* .partner-name {
        display: none; 
    } - Removed to show text */

    .partner-logo {
        height: 28px;
    }
}

/* ============================================
   REFINED INTEGRATIONS SECTION (Split Layout)
   ============================================ */
.integrations-section-refined {
    padding: 100px 0;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid var(--border-light);
}

.integrations-split-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}

.integrations-content-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.integration-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary);
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.integration-headline {
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 24px;
}

.integration-desc {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

/* ============================================

/* ============================================
   CLEAN INTEGRATIONS GRID (Hello Style)
   ============================================ */
.integrations-grid-clean {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    margin-top: 0;
    width: 100%;
    max-width: 580px;
}

.integration-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    text-decoration: none;
    margin: 0 auto;
}

.integration-icon-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.integration-icon-img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* Mobile Responsive Grid */
@media (max-width: 1024px) {
    .integrations-grid-clean {
        grid-template-columns: repeat(4, 1fr);
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .integrations-grid-clean {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

/* Full Page Logo Grid */
.integrations-logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 32px;
    margin-top: 48px;
}

/* Card Improvements */
.feature-card p strong {
    color: var(--navy);
    font-weight: 600;
}

.integration-icon-box {
    width: 60px;
    height: 60px;
}

.integration-icon-img {
    width: 28px;
    height: 28px;
}

/* Mobile Adjustments Refined */
@media (max-width: 768px) {
    .integrations-section-refined {
        padding: 40px 0;
    }

    .carousel-refined-track {
        gap: 40px;
        animation-duration: 40s;
    }

    .integration-desc {
        font-size: 1rem;
        padding: 0 16px;
    }
}

/* ============================================
   MOBILE CARD & TYPOGRAPHY OPTIMIZATIONS
   ============================================ */
@media (max-width: 768px) {

    /* Card Headings - 14px compact for 2-col grid */
    .card-title,
    .mobile-card-title,
    .feature-card h3,
    .feature-card h4,
    .pillar-card h4 {
        font-size: 0.875rem !important;
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
    }

    /* Card Body Text - 13px compact */
    .card-description,
    .mobile-card-text,
    .feature-card p,
    .pillar-card p {
        font-size: 0.8125rem !important;
        line-height: 1.5 !important;
        margin-bottom: 8px !important;
    }

    /* Compact Card Layout for 2-col */
    .feature-card,
    .pillar-card {
        padding: 16px !important;
        gap: 8px !important;
    }

    .hero {
        padding: 88px 0 80px !important;
        /* Less top space on mobile: nav + 8px */
        text-align: center;
    }

    /* Enterprise cards stay larger (single col) */
    .mobile-compact-card {
        padding: 20px !important;
        gap: 10px !important;
    }

    /* Compact Icons */
    .card-icon,
    .feature-card>div:first-child {
        width: 32px !important;
        height: 32px !important;
        margin-bottom: 8px !important;
        border-radius: 8px !important;
    }

    .card-icon i,
    .feature-card>div:first-child i {
        font-size: 0.9rem !important;
    }

    /* Enterprise icons stay larger */
    .mobile-compact-icon {
        width: 40px !important;
        height: 40px !important;
        margin-bottom: 12px !important;
        border-radius: 10px !important;
    }

    .mobile-compact-icon i {
        font-size: 1.1rem !important;
    }
}

/* ============================================
   MOBILE CARD GRID (2 Column Compact)
   ============================================ */
@media (max-width: 768px) {
    .card-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        overflow-x: visible !important;
        padding-bottom: 0 !important;
    }

    /* Compact cards for 2-col grid */
    .feature-card,
    .pillar-card {
        min-width: auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* Single column for very small screens */
@media (max-width: 400px) {
    .card-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ============================================
   ENTERPRISE CARDS MOBILE (Full Width)
   ============================================ */
@media (max-width: 768px) {

    /* Enterprise card full-width on mobile */
    .mobile-compact-card {
        min-width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

/* ============================================
   INTEGRATIONS SPLIT LAYOUT
   ============================================ */
.integrations-split-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

@media (max-width: 968px) {
    .integrations-split-layout {
        display: flex;
        flex-direction: column;
        gap: 48px;
        text-align: center;
    }

    /* Ensure the ordering is correct on mobile if needed, usually Text first (default) is fine */
}

/* Standard Section Description */
.section-description {
    font-size: 1.125rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 32px;
}

@media (max-width: 768px) {
    .section-description {
        font-size: 1rem !important;
        /* Smaller on mobile */
    }
}

/* ============================================
   METHODOLOGY LIST (Integrations Page)
   ============================================ */
.methodology-title {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--navy);
    margin-bottom: 6px;
}

.methodology-text {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .methodology-title {
        font-size: 1rem !important;
        /* Smaller on mobile (h4/h5 size equivalent) */
    }

    .methodology-text {
        font-size: 0.9rem !important;
        /* Smaller body text on mobile */
    }
}

/* ============================================
   MOBILE VISUAL DIAGRAM OPTIMIZATIONS
   ============================================ */
.visual-diagram-container {
    width: 100%;
    max-width: 420px;
    position: relative;
    z-index: 1;
    perspective: 1000px;
}

.visual-diagram-card {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    padding: 0;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
    position: relative;
    z-index: 3;
    margin-bottom: 24px;
    overflow: hidden;
    animation: orbit-float 6s ease-in-out infinite;
}

@media (max-width: 768px) {

    /* Stop Animation on Mobile */
    .visual-diagram-card {
        animation: none !important;
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05) !important;
    }

    /* Improve Container Width */
    .visual-diagram-container {
        max-width: 100% !important;
        /* Allow full width */
    }

    /* Reduce Connection Line Height */
    .connection-line-container {
        height: 24px !important;
        /* Compact gap */
    }
}

/* ============================================
   MINIMAL FEATURE GRID (Integrations Page)
   ============================================ */
.minimal-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 48px 24px;
    margin-top: 48px;
}

.minimal-feature-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.minimal-feature-icon {
    width: 48px;
    height: 48px;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    color: var(--primary);
    background: white;
    transition: transform 0.3s ease;
}

.minimal-feature-item:hover .minimal-feature-icon {
    transform: translateY(-5px);
    border-color: var(--primary);
    background: #f0fdf4;
}

.minimal-feature-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--navy);
    margin-bottom: 8px;
}

.minimal-feature-desc {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.4;
    max-width: 200px;
    /* Keep text compact like screenshot */
    margin: 0 auto;
}

/* ============================================
   MOBILE OPTIMIZATIONS FOR MINIMAL GRID
   ============================================ */
@media (max-width: 968px) {
    .minimal-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px 16px;
    }

    .minimal-feature-icon {
        width: 36px;
        height: 36px;
        margin-bottom: 10px;
        border-radius: 8px;
    }

    .minimal-feature-icon i {
        font-size: 0.875rem;
    }

    /* Title - 15px bold */
    .minimal-feature-title {
        font-size: 0.9375rem !important;
        font-weight: 700 !important;
        margin-bottom: 4px !important;
    }

    /* Description - 12px (clearly smaller than title) */
    .minimal-feature-desc {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        max-width: 100%;
        color: var(--text-secondary);
    }
}

@media (max-width: 480px) {
    .minimal-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 12px;
    }

    .minimal-feature-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 8px;
    }

    /* Title - 14px */
    .minimal-feature-title {
        font-size: 0.875rem !important;
    }

    /* Description - 11px */
    .minimal-feature-desc {
        font-size: 0.6875rem !important;
    }
}

/* ============================================
   BRANDED FAQ (Integrations Page)
   ============================================ */
.faq-details {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 24px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.faq-details:hover {
    border-color: var(--primary);
    box-shadow: 0 8px 20px rgba(0, 163, 120, 0.08);
    /* Brand Green soft shadow */
    transform: translateY(-2px);
}

.faq-details[open] {
    border-color: var(--primary);
    background: #f8fffc;
    /* Vari-very subtle green tint */
}

/* Accent Left Border for active/open item */
.faq-details[open]::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--primary);
}

.faq-summary {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--navy);
    list-style: none;
    /* Hide default triangle */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-summary::-webkit-details-marker {
    display: none;
}

/* Custom animated plus/minus icon */
.faq-summary::after {
    content: '+';
    font-size: 1.5rem;
    color: var(--primary);
    font-weight: 400;
    transition: transform 0.3s ease;
    line-height: 1;
}

.faq-details[open] .faq-summary::after {
    transform: rotate(45deg);
    /* Turns plus to X */
}

.faq-answer {
    margin-top: 16px;
    color: var(--text-secondary);
    line-height: 1.6;
    animation: fadeSlideDown 0.3s ease-out;
    padding-right: 24px;
}

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

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   MOBILE FAQ SIZING
   Section headers = 1.5rem (24px)
   FAQ questions = 0.9375rem (15px) - clearly smaller
   FAQ answers = 0.875rem (14px)
   ============================================ */
@media (max-width: 768px) {
    .faq-summary {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: var(--navy) !important;
        line-height: 1.4 !important;
    }

    .faq-summary h3 {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
    }

    .faq-answer {
        font-size: 0.875rem !important;
        line-height: 1.5 !important;
    }

    .faq-details {
        padding: 16px !important;
    }

    .faq-summary::after {
        font-size: 1.25rem !important;
    }
}

/* ============================================
   DUAL CTA SECTION (Dark Theme)
   ============================================ */
.cta-dark-section {
    background-color: var(--navy);
    color: white;
    padding: 80px 0 40px;
    /* Padding bottom reduced to merge with footer */
    position: relative;
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 32px;
    max-width: 900px;
    margin: 48px auto 0;
}

.cta-card {
    border-radius: 16px;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.cta-card-ghost {
    background: rgba(255, 255, 255, 0.05);
    /* Glassy dark */
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-card-primary {
    background: var(--primary);
    /* Brand Green */
    border: 1px solid var(--primary);
    box-shadow: 0 10px 30px rgba(0, 163, 120, 0.3);
}

.cta-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-bottom: 16px;
    opacity: 0.8;
    display: block;
}

.cta-heading {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 24px;
    line-height: 1.2;
}

.cta-list {
    list-style: none;
    padding: 0;
    margin-bottom: 32px;
}

.cta-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    font-size: 0.95rem;
    opacity: 0.9;
}

.cta-btn {
    display: block;
    text-align: center;
    padding: 14px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

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

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

.cta-btn-white {
    background: white;
    color: var(--primary);
    border: 1px solid white;
}

.cta-btn-white:hover {
    background: #f0fdf4;
    transform: translateY(-2px);
}

/* ============================================
   MINIMAL DARK FOOTER
   ============================================ */
.footer-minimal {
    background-color: var(--navy);
    color: white;
    padding: 40px 0 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.9rem;
    position: relative;
    z-index: 1;
    overflow: visible;
}

.footer-minimal-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.footer-left {
    display: flex;
    align-items: center;
    gap: 24px;
    opacity: 0.8;
}

.footer-right {
    display: flex;
    gap: 24px;
    opacity: 0.6;
}

.footer-right a {
    color: white;
    text-decoration: none;
    transition: opacity 0.2s;
}

.footer-right a:hover {
    opacity: 1;
}

@media (max-width: 600px) {
    .footer-minimal-container {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ============================================
   FOOTER REFINEMENTS (Socials & Mobile)
   ============================================ */
.footer-social-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    transition: color 0.2s;
}

.footer-social-link:hover {
    color: white;
}

@media (max-width: 768px) {
    .footer-minimal {
        padding: 40px 0 50px;
    }

    .footer-minimal-container {
        flex-direction: column;
        align-items: center !important;
        /* Center align on mobile */
        gap: 32px;
        text-align: center;
    }

    .footer-left {
        flex-direction: column;
        align-items: center !important;
        gap: 16px;
    }

    .footer-right {
        flex-direction: column;
        align-items: center !important;
        gap: 16px;
    }

    /* Hide vertical dividers on mobile */
    .footer-divider {
        display: none !important;
    }
}

/* Footer divider default style */
.footer-divider {
    height: 16px;
    width: 1px;
    background: rgba(255, 255, 255, 0.2);
    display: inline-block;
}

/* ============================================
   FOOTER LOGO SIZING
   ============================================ */
.footer-logo {
    height: 36px;
    /* Increased for desktop to match text visual weight */
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.95;
    transition: height 0.3s ease;
}

@media (max-width: 768px) {
    .footer-logo {
        height: 26px !important;
        /* Increased for better visibility on mobile */
    }
}

/* ============================================
   FOOTER CTA BUTTONS (WhatsApp, Email, Cal)
   ============================================ */
.footer-cta-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    color: white;
    font-size: 1.1rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.footer-cta-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

/* WhatsApp specific hover */
.footer-cta-btn[title="WhatsApp"]:hover {
    background: #25d366;
    border-color: #25d366;
}

/* Email specific hover */
.footer-cta-btn[title="Email"]:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Primary CTA (Book a Call) */
.footer-cta-primary {
    width: auto;
    padding: 0 20px;
    background: var(--primary);
    border-color: var(--primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.footer-cta-primary span {
    margin-left: 4px;
}

.footer-cta-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    box-shadow: 0 4px 16px rgba(0, 163, 120, 0.4);
}

@media (max-width: 768px) {
    .footer-cta-group {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .footer-cta-primary span {
        display: none;
    }

    .footer-cta-primary {
        width: 44px;
        padding: 0;
    }
}

/* ============================================
   SINGLE BANNER CTA (Redesign)
   ============================================ */
.cta-banner-container {
    max-width: 900px;
    margin: 48px auto 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle glow effect behind banner */
.cta-banner-container::before {
    display: none;
    /* Removed gradient glow per user request */
}

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

.cta-banner-title {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
}

.cta-banner-subtitle {
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-banner-btn {
    display: inline-block;
    padding: 16px 48px;
    background: var(--primary);
    color: white;
    font-weight: 600;
    font-size: 1.1rem;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 163, 120, 0.3);
}

.cta-banner-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 163, 120, 0.5);
    background: #00b889;
    /* Slightly lighter green */
}

/* Mobile Button Sizing */
@media (max-width: 768px) {
    .btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }

    /* Ensure button colors are consistent on mobile */
    .section:not(.section-brand):not(.cta-dark-section) .btn-secondary,
    .security-trust-section .btn-secondary {
        background-color: var(--primary);
        color: white;
        border: 1px solid var(--primary);
    }

    .section:not(.section-brand):not(.cta-dark-section) .btn-secondary:hover,
    .security-trust-section .btn-secondary:hover {
        background-color: var(--primary-dark);
        border-color: var(--primary-dark);
        color: white;
    }

    .cta-banner-btn {
        padding: 14px 32px;
        font-size: 1rem;
    }

    .cta-banner-container {
        padding: 32px 24px;
    }

    .cta-banner-title {
        font-size: 1.5rem;
    }

    .cta-banner-subtitle {
        font-size: 0.95rem;
    }
}

/* Ensure h3 inside summary behaves correctly */
.faq-summary h3 {
    margin: 0;
    display: inline-block;
    font-size: inherit;
    /* Inherit mobile overrides if any */
    font-weight: inherit;
    color: inherit;
}

h4 {
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

/* Ensure h4 inside summary behaves correctly with new size */
.faq-summary h4 {
    margin: 0;
    display: inline-block;
    font-size: 1rem;
    /* Standard H4 (same as body text but bold) */
    font-weight: 700;
    color: inherit;
}

/* ============================================
   HEADING & DESCRIPTION HIERARCHY
   ============================================ */
/*
   Desktop Typography Scale:
   - H1 / Hero: clamp(2.5rem, 5vw, 4rem) = 40-64px
   - H2 / Section: 2.5rem = 40px
   - H3 / Card Title: 1.25rem = 20px
   - H4: 1rem = 16px
   - Body / Description: 1rem = 16px
   - Small: 0.875rem = 14px

   Mobile Typography Scale (≤768px):
   - H1 / Hero: 2rem = 32px
   - H2 / Section: 1.5rem = 24px
   - H3 / Card Title: 1.125rem = 18px
   - H4: 1rem = 16px
   - Body / Description: 0.9375rem = 15px
   - Small: 0.875rem = 14px
*/

/* H3: Used for Card Titles & FAQ Questions */
h3,
.card-title,
.faq-summary h3 {
    font-size: 1.25rem;
    /* 20px */
    line-height: 1.4;
    font-weight: 700;
}

/* Body Text: Used for Card Text & FAQ Answers */
.card-description,
.faq-answer {
    font-size: 1rem;
    /* 16px */
    line-height: 1.6;
    color: var(--text-secondary);
}

/* Mobile Adjustments for Hierarchy */
@media (max-width: 768px) {
    /*
       Mobile Hierarchy:
       - Section Header (H2): 1.5rem (24px)
       - General H3: 1.125rem (18px)
       - Card Title: 0.875rem (14px)
       - FAQ Question: 0.9375rem (15px)
       - Card/FAQ Body: 0.8125-0.875rem (13-14px)
    */

    h3 {
        font-size: 1.125rem !important;
    }

    .card-title,
    .feature-card h3,
    .feature-card h4 {
        font-size: 0.875rem !important;
    }

    .faq-summary h3 {
        font-size: 0.9375rem !important;
    }

    .card-description {
        font-size: 0.8125rem !important;
    }

    .faq-answer {
        font-size: 0.875rem !important;
    }
}

/* ============================================
   INTEGRATIONS HERO ORBIT VISUAL (Mobile)
   ============================================ */
.orbit-container {
    position: relative;
    width: 500px;
    height: 500px;
    transform: scale(0.9);
}

@media (max-width: 968px) {

    /* Only scale the orbit visual, not spreadsheet mockup */
    .hero-visual-right:has(.orbit-icon) {
        height: 350px !important;
        min-height: auto !important;
    }

    .orbit-container,
    .hero-visual-right>div:not(.spreadsheet-mockup) {
        transform: scale(0.7) !important;
        width: 500px;
        height: 500px;
    }
}

@media (max-width: 600px) {
    .hero-visual-right:has(.orbit-icon) {
        height: 280px !important;
    }

    .orbit-container,
    .hero-visual-right>div:not(.spreadsheet-mockup) {
        transform: scale(0.55) !important;
    }
}

@media (max-width: 400px) {
    .hero-visual-right:has(.orbit-icon) {
        height: 240px !important;
    }

    .orbit-container,
    .hero-visual-right>div:not(.spreadsheet-mockup) {
        transform: scale(0.45) !important;
    }
}

/* ============================================
   SPREADSHEET MOCKUP (SMB Section)
   Keep same visual on mobile as desktop
   ============================================ */
.spreadsheet-mockup {
    transform: rotate(3deg);
}

@media (max-width: 968px) {

    /* Keep spreadsheet mockup prominent on mobile */
    .spreadsheet-mockup {
        max-width: 100% !important;
        width: 100% !important;
        transform: rotate(2deg) !important;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.12) !important;
    }

    .spreadsheet-mockup>div {
        padding: 16px !important;
    }

    /* Ensure the SMB section visual stays prominent */
    .hero-split-wrapper .hero-visual-right .spreadsheet-mockup {
        max-width: 380px !important;
        margin: 0 auto;
    }
}

@media (max-width: 480px) {
    .spreadsheet-mockup {
        transform: rotate(1deg) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1) !important;
    }

    .spreadsheet-mockup>div {
        padding: 12px !important;
    }
}

/* ============================================
   TEXT LINK BUTTON (No Border)
   ============================================ */
.btn-text-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--primary);
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.btn-text-link:hover {
    color: var(--primary-dark);
    transform: translateX(4px);
    /* Subtle arrow move */
}

/* ============================================
   HOME HERO VISUAL (Dashboard Mockup)
   ============================================ */
.dashboard-container {
    position: relative;
    width: 500px;
    height: 400px;
}

.dashboard-card {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.8);
    overflow: hidden;
    z-index: 10;
    transition: transform 0.3s ease;
}

.dashboard-header {
    padding: 16px 20px;
    background: #f8fafc;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    gap: 8px;
    align-items: center;
}

.window-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #cbd5e1;
}

.dashboard-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--navy);
}

.graph-placeholder {
    height: 60px;
    background: linear-gradient(90deg, #f0fdf4 0%, #dcfce7 100%);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.graph-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: var(--primary);
    opacity: 0.2;
    clip-path: polygon(0 100%, 0 40%, 20% 60%, 40% 30%, 60% 50%, 80% 20%, 100% 10%, 100% 100%);
}

.floating-card {
    position: absolute;
    background: white;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
    z-index: 20;
    animation: float-v 6s ease-in-out infinite;
    border: 1px solid var(--border-light);
}

.floating-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

@keyframes float-v {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

/* Mobile scaling for dashboard */
@media (max-width: 968px) {
    .dashboard-container {
        transform: scale(0.8);
        height: 350px;
    }
}

@media (max-width: 480px) {
    .dashboard-container {
        transform: scale(0.65);
        height: 300px;
        width: 100%;
    }
}

/* ============================================
   HOME HERO: AGENT FLOW VISUAL
   ============================================ */
.agent-flow-container {
    position: relative;
    width: 450px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Central Hub (The AI Agent) */
.agent-hub {
    width: 100px;
    height: 100px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--primary);
    box-shadow: 0 0 0 8px rgba(39, 201, 63, 0.1), 0 20px 40px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10;
    border: 1px solid rgba(255, 255, 255, 0.8);
    animation: pulse-ring 3s infinite;
}

@keyframes pulse-ring {
    0% {
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.4);
    }

    70% {
        box-shadow: 0 0 0 30px rgba(39, 201, 63, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(39, 201, 63, 0);
    }
}

/* Satellite Nodes */
.satellite {
    position: absolute;
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: var(--navy);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    z-index: 5;
    border: 1px solid var(--border-light);
}

.sat-1 {
    top: 15%;
    right: 15%;
}

/* CRM/Data */
.sat-2 {
    bottom: 20%;
    right: 10%;
}

/* Communication */
.sat-3 {
    top: 40%;
    left: 0%;
    transform: translateX(-20px);
}

/* Source/Input */

/* Connection Lines */
.connect-line {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: 0 0;
    height: 2px;
    background: linear-gradient(90deg, var(--primary) 0%, transparent 100%);
    z-index: 1;
    opacity: 0.3;
}

/* Specific Line Geometries */
.line-1 {
    width: 160px;
    transform: rotate(-45deg);
}

.line-2 {
    width: 170px;
    transform: rotate(45deg);
}

.line-3 {
    width: 140px;
    transform: rotate(180deg);
}

/* Data Particles */
.particle {
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
    top: -2px;
    /* Center on line */
    left: 0;
    filter: drop-shadow(0 0 4px var(--primary));
    opacity: 0;
}

.p-1 {
    animation: flow 2s infinite linear;
}

.p-2 {
    animation: flow 2.5s infinite linear 0.5s;
}

.p-3 {
    animation: flow 1.8s infinite linear 0.2s;
}

@keyframes flow {
    0% {
        left: 0;
        opacity: 1;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

/* Floating Badges */
.flow-badge {
    position: absolute;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.05);
    z-index: 15;
}

/* Mobile Scaling */
@media (max-width: 968px) {
    .agent-flow-container {
        transform: scale(0.8);
        width: 350px;
        height: 350px;
    }
}

@media (max-width: 480px) {
    .agent-flow-container {
        transform: scale(0.65);
    }
}

/* ============================================
   CHAOS CLOUD (Static & Detailed)
   ============================================ */
.chaos-visual-container {
    position: relative;
    width: 100%;
    max-width: 650px;
    height: 500px;
    margin: 0 auto;
    /* Static layout, no floating */
}

/* Base Card Style */
.chaos-card {
    position: absolute;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    z-index: 10;
    width: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: z-index 0s, transform 0.2s ease;
}

.chaos-card:hover {
    z-index: 100 !important;
    transform: scale(1.02);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

/* --- Specific Card Types --- */

/* 1. Slack Card */
.type-slack .card-header {
    background: #4a154b;
    color: white;
    padding: 6px 10px;
    font-weight: 600;
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.type-slack .card-body {
    padding: 10px;
}

.slack-avatar {
    width: 20px;
    height: 20px;
    background: #611f69;
    border-radius: 4px;
    text-align: center;
    line-height: 20px;
    float: left;
    margin-right: 8px;
    font-size: 0.6rem;
    color: white;
}

/* 2. Jira/Linear Card */
.type-jira {
    border-top: 3px solid #0052cc;
}

.type-jira .card-header {
    padding: 8px 10px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.type-jira .card-body {
    padding: 4px 10px 10px;
}

.jira-id {
    color: #0052cc;
    font-weight: 600;
    font-size: 0.65rem;
}

/* 3. Notification/Email Card */
.type-notify {
    border-left: 3px solid #ea4335;
}

.type-notify .card-header {
    padding: 8px 10px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--navy);
}

.type-notify .card-body {
    padding: 4px 10px 10px;
}

/* 4. Excel/File Card */
.type-file {
    background: #f8fafc;
}

.type-file .card-header {
    padding: 8px 10px;
    color: #0f766e;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
}

.type-file .file-preview {
    background: white;
    margin: 0 10px 10px;
    padding: 6px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.65rem;
    color: #64748b;
}

/* Tags */
.tag-pill {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
}

.tag-high {
    background: #fee2e2;
    color: #ef4444;
}

.tag-todo {
    background: #eff6ff;
    color: #3b82f6;
}

.tag-done {
    background: #f0fdf4;
    color: #16a34a;
}

/* Positions (Scattered Non-Overlapping) */
/* Grid-like logic to ensure no overlaps */

/* Top Row */
.pos-1 {
    top: 10px;
    left: 10px;
    transform: rotate(-3deg);
    width: 220px;
}

/* Slack Top Left */
.pos-2 {
    top: 0px;
    right: 20px;
    transform: rotate(2deg);
    width: 210px;
}

/* Jira Top Right */

/* Upper Mid */
.pos-3 {
    top: 110px;
    left: 180px;
    transform: rotate(4deg);
    width: 240px;
    z-index: 20;
}

/* Center Hero (Invoice) */
.pos-4 {
    top: 80px;
    right: -30px;
    transform: rotate(-3deg);
    width: 190px;
}

/* Excel Right Edge */
.pos-12 {
    top: 130px;
    left: -20px;
    transform: rotate(-5deg);
    width: 190px;
}

/* Left Edge Card */

/* Lower Mid */
.pos-6 {
    top: 220px;
    right: 40px;
    transform: rotate(-2deg);
    width: 230px;
}

/* Bank Blocked */
.pos-7 {
    top: 180px;
    right: -50px;
    transform: rotate(5deg);
    width: 200px;
}

/* WhatsApp Right Edge */
.pos-11 {
    top: 240px;
    left: 80px;
    transform: rotate(3deg);
    width: 210px;
}

/* Escalation Center */

/* Bottom Row */
.pos-5 {
    top: 320px;
    left: 0px;
    transform: rotate(-4deg);
    width: 210px;
}

/* Meeting Bottom Left */
.pos-8 {
    top: 380px;
    left: 160px;
    transform: rotate(2deg);
    width: 220px;
}

/* Slack Bottom Center */
.pos-9 {
    top: 350px;
    right: -20px;
    transform: rotate(-2deg);
    width: 200px;
}

/* High Priority Right */
.pos-10 {
    top: 400px;
    right: 180px;
    transform: rotate(3deg);
    width: 180px;
}

/* Billing Bottom */

/* Mobile Scaling */
@media (max-width: 1024px) {
    .chaos-visual-container {
        transform: scale(0.85);
        height: 450px;
    }
}

@media (max-width: 480px) {
    .chaos-visual-container {
        transform: scale(0.55);
        height: 350px;
        margin-left: -50px;
        /* shift left to center visual */
    }

    .hero-visual-right {
        overflow: hidden;
        /* clip sides */
    }
}

/* ============================================
   CHAOS CLOUD RELOADED (Detailed)
   ============================================ */
.chaos-visual-container {
    position: relative;
    width: 650px;
    height: 500px;
    margin: 0 -40px;
    /* Allow wider spread */
}

/* Base Card */
.chaos-card {
    position: absolute;
    background: white;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.05);
    font-size: 0.75rem;
    z-index: 10;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    width: 220px;
    overflow: hidden;
    font-family: 'Inter', sans-serif;
}

.chaos-card:hover {
    z-index: 100;
    transform: scale(1.05) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Slack Style (Header Bar) */
.card-slack .chaos-header {
    background: #4a154b;
    color: white;
    padding: 8px 12px;
    font-weight: 700;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-slack .chaos-body {
    padding: 10px 12px;
}

.slack-avatar {
    width: 24px;
    height: 24px;
    background: #611f69;
    color: white;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.65rem;
    font-weight: 700;
    margin-right: 8px;
    float: left;
}

/* Standard Header Style (Icon based) */
.card-standard .chaos-header {
    padding: 10px 12px 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--navy);
}

.card-standard .chaos-body {
    padding: 4px 12px 12px;
}

/* Specific Tags & Metas */
.tag-urgent {
    background: #fee2e2;
    color: #ef4444;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: auto;
}

.tag-high {
    background: #fee2e2;
    color: #ef4444;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: auto;
}

.tag-todo {
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-left: auto;
}

.meta-time {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
    font-size: 0.7rem;
}

.text-danger {
    color: #dc2626;
    font-weight: 600;
}

.text-muted {
    color: #94a3b8;
}

/* Positioning (Spread out) */
/* Top Cluster */
.cc-slack-1 {
    top: 0%;
    left: 10%;
    transform: rotate(-3deg);
    width: 240px;
}

.cc-jira-1 {
    top: 5%;
    right: 15%;
    transform: rotate(2deg);
    width: 230px;
}

.cc-email-1 {
    top: 20%;
    left: 35%;
    transform: rotate(0deg);
    width: 220px;
    z-index: 20;
}

/* Middle Cluster */
.cc-excel {
    top: 22%;
    right: -5%;
    transform: rotate(4deg);
    width: 200px;
}

.cc-calendar {
    top: 35%;
    left: 0%;
    transform: rotate(-2deg);
    width: 210px;
}

.cc-jira-2 {
    top: 40%;
    right: 10%;
    transform: rotate(1deg);
    width: 240px;
}

/* Bottom Cluster */
.cc-whatsapp {
    top: 45%;
    right: -10%;
    transform: rotate(3deg);
    width: 220px;
}

.cc-slack-2 {
    bottom: 15%;
    left: 5%;
    transform: rotate(3deg);
    width: 230px;
}

.cc-ticket-1 {
    bottom: 25%;
    right: 25%;
    transform: rotate(-2deg);
    width: 200px;
}

.cc-task-1 {
    bottom: 10%;
    right: 5%;
    transform: rotate(4deg);
    width: 200px;
}

/* Far Edges / Background items */
.cc-email-2 {
    bottom: 5%;
    left: 20%;
    transform: rotate(-3deg);
    width: 220px;
}

.cc-task-2 {
    bottom: 35%;
    right: -5%;
    transform: rotate(2deg);
    width: 180px;
}

.cc-ticket-2 {
    bottom: 0%;
    right: 15%;
    transform: rotate(-1deg);
    width: 210px;
}

/* Animations */
.chaos-card {
    animation: float-chaos 8s ease-in-out infinite;
}

.cc-slack-1 {
    animation-delay: 0s;
}

.cc-jira-1 {
    animation-delay: 1s;
}

.cc-email-1 {
    animation-delay: 0.5s;
}

.cc-excel {
    animation-delay: 1.5s;
}

.cc-calendar {
    animation-delay: 2s;
}

.cc-jira-2 {
    animation-delay: 2.5s;
}

.cc-whatsapp {
    animation-delay: 3s;
}

.cc-slack-2 {
    animation-delay: 0.8s;
}

.cc-ticket-1 {
    animation-delay: 1.2s;
}

.cc-task-1 {
    animation-delay: 1.8s;
}

.cc-email-2 {
    animation-delay: 2.2s;
}

@keyframes float-chaos {

    0%,
    100% {
        transform: translateY(0) rotate(var(--tw-rotate));
    }

    50% {
        transform: translateY(-6px) rotate(var(--tw-rotate));
    }
}

@media (max-width: 1024px) {
    .chaos-visual-container {
        transform: scale(0.8);
        width: 100%;
    }
}

@media (max-width: 480px) {
    .chaos-visual-container {
        transform: scale(0.5);
        width: 100%;
        height: 400px;
    }
}

/* ============================================
   HERO VISUAL PLACEHOLDER
   ============================================ */
.hero-visual-placeholder {
    width: 400px;
    height: 350px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px dashed rgba(0, 210, 165, 0.4);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.hero-visual-placeholder i {
    font-size: 4rem;
    color: var(--primary);
    opacity: 0.6;
}

.hero-visual-placeholder span {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.5);
}

@media (max-width: 768px) {
    .hero-visual-placeholder {
        width: 100%;
        max-width: 300px;
        height: 250px;
        margin: 40px auto 0;
    }
}

/* ============================================
   HERO VIDEO WRAPPER
   ============================================ */
.hero-video-wrapper {
    width: 100%;
    max-width: 560px;
    aspect-ratio: 16 / 9;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-video-wrapper iframe {
    width: 100%;
    height: 100%;
    border: none;
}

@media (max-width: 768px) {
    .hero-video-wrapper {
        max-width: 100%;
        border-radius: 12px;
    }
}

/* Scattered Positions (Compact Grid) */
/* Row 1 - Top */
.pos-1 {
    top: 0px;
    left: 0px;
    transform: rotate(-4deg);
}

.pos-2 {
    top: 10px;
    left: 120px;
    transform: rotate(3deg);
}

.pos-3 {
    top: 0px;
    left: 240px;
    transform: rotate(-2deg);
}

.pos-4 {
    top: 15px;
    left: 360px;
    transform: rotate(4deg);
}

/* Row 2 */
.pos-5 {
    top: 110px;
    left: 30px;
    transform: rotate(3deg);
}

.pos-6 {
    top: 100px;
    left: 150px;
    transform: rotate(-3deg);
}

.pos-7 {
    top: 115px;
    left: 270px;
    transform: rotate(2deg);
}

.pos-8 {
    top: 105px;
    left: 390px;
    transform: rotate(-4deg);
}

/* Row 3 */
.pos-9 {
    top: 220px;
    left: 0px;
    transform: rotate(-2deg);
}

.pos-10 {
    top: 230px;
    left: 120px;
    transform: rotate(4deg);
}

.pos-11 {
    top: 215px;
    left: 240px;
    transform: rotate(-3deg);
}

.pos-12 {
    top: 225px;
    left: 360px;
    transform: rotate(2deg);
}

/* Row 4 - Bottom Center */
.pos-13 {
    top: 330px;
    left: 180px;
    transform: rotate(0deg);
    z-index: 5;
}

/* Tags/Meta */
.slack-avatar {
    width: 22px;
    height: 22px;
    background: #611f69;
    color: white;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.6rem;
    font-weight: 700;
    margin-right: 6px;
}

.tag-pill {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.55rem;
    font-weight: 700;
    margin-left: auto;
    text-transform: uppercase;
}

.bg-todo {
    background: #eff6ff;
    color: #3b82f6;
}

.bg-urgent {
    background: #fef2f2;
    color: #dc2626;
}

.bg-blocked {
    background: #f1f5f9;
    color: #64748b;
}

.meta-time {
    margin-left: auto;
    opacity: 0.7;
    font-size: 0.65rem;
}

.text-danger {
    color: #dc2626;
    font-weight: 600;
}

.text-muted {
    color: #94a3b8;
}

/* Mobile Scaling for Chaos Cloud */
@media (max-width: 1200px) {
    .chaos-visual-container {
        transform: scale(0.85);
        transform-origin: top left;
        height: 400px;
    }
}

@media (max-width: 968px) {
    .chaos-visual-container {
        transform: scale(0.7);
        height: 350px;
    }
}

@media (max-width: 768px) {
    .hero-visual-right {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .chaos-visual-container {
        transform: scale(0.55);
        transform-origin: top center;
        height: 280px;
        width: 100%;
    }
}

/* ============================================
   SERVICES SECTION (Pillars Layout)
   ============================================ */
.services-section {
    background: var(--bg-secondary);
    padding: 100px 0;
}

.services-section .section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-badge {
    display: inline-block;
    background: #f0fdf9;
    color: var(--primary);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.services-section .section-title {
    color: var(--text-primary);
}

.services-section .section-subtitle {
    color: var(--text-secondary);
}

/* ============================================
   BENTO GRID V2 (Premium)
   ============================================ */
.bento-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 24px;
    max-width: 1100px;
    margin: 0 auto;
}

.bento-card-v2 {
    background: var(--bg-secondary);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 24px;
    padding: 28px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
    position: relative;
    overflow: hidden;
}

.bento-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.01);
    border-color: rgba(0, 210, 165, 0.3);
}

.bento-wide {
    grid-column: span 2;
}

.bento-full {
    grid-column: span 3;
}

.bento-row-split {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

/* Logos for cards */
.bento-card-logo {
    position: absolute;
    bottom: 20px;
    right: 20px;
    height: 20px;
    /* Reduced height */
    opacity: 0.6;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    pointer-events: none;
    transition: all 0.3s ease;
    z-index: 5;
}

.bento-card-logo img {
    height: 100% !important;
    width: auto !important;
    display: block;
    object-fit: contain;
}

.bento-card-logo.logo-hello {
    height: 40px;
    /* Increased to give it more presence as requested */
}

.bento-card-v2:hover .bento-card-logo {
    opacity: 1;
    transform: scale(1.05);
}

.card-brand-text {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    font-size: 0.9rem;
    /* Smaller text */
    letter-spacing: -0.2px;
    color: #1e293b;
    line-height: 1;
    margin-top: 1px;
}

@media (max-width: 900px) {
    .bento-row-split {
        grid-template-columns: 1fr;
        grid-column: span 1;
    }

    .bento-card-logo {
        position: absolute;
        /* Keep absolute on mobile too as cards are full width stacks */
        bottom: 16px;
        right: 16px;
        margin-top: 0;
    }
}

/* Content Layout */
.bento-content {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bento-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.bento-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bento-icon-box i {
    font-size: 1.25rem;
}

/* Color Variants */
.blue-soft {
    background: #E0F2FE;
    color: #0284C7;
}

.purple-soft {
    background: #F3E8FF;
    color: #9333EA;
}

.cyan-soft {
    background: #e0f2fe;
    color: #0ea5e9;
}

.indigo-soft {
    background: #E0E7FF;
    color: #4338CA;
}

.orange-soft {
    background: #FFEDD5;
    color: #EA580C;
}

.green-soft {
    background: #dcfce7;
    color: #16a34a;
}

.pink-soft {
    background: #fce7f3;
    color: #db2777;
}

/* Typography & Spacing */
.bento-card-v2 h3 {
    font-size: var(--text-2xl);
    /* 24px */
    font-weight: 700;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
}

/* Adjust heading in standard cards (not header wrapper) */
.bento-card-v2>.bento-content>h3 {
    margin-bottom: 12px;
}

.bento-card-v2 p {
    color: #64748b;
    font-size: var(--text-base);
    /* 16px */
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 24px;
    flex-grow: 1;
}

/* Tags for Wide Card */
.bento-tags {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.bento-tags-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 28px;
}

.bento-tags span,
.bento-tags-grid span {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 100px;
    font-size: var(--text-sm);
    /* 14px */
    color: #475569;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    white-space: nowrap;
}

.bento-tags span i,
.bento-tags-grid span i {
    color: var(--primary);
    font-size: var(--text-xs);
    /* 12px */
}

/* Link */
.bento-link-v2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--text-sm);
    /* Using 14px for improved hierarchy */
    color: var(--primary);
    margin-top: auto;
    width: fit-content;
    padding-bottom: 2px;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.bento-link-v2:hover {
    gap: 12px;
    border-color: rgba(0, 210, 165, 0.3);
}

/* Custom Solutions Card - Brand Faded Style */
.bento-dark {
    background: rgba(0, 163, 120, 0.08);
    border: 1px solid rgba(0, 163, 120, 0.15);
    color: var(--navy);
    position: relative;
    overflow: hidden;
}

.bento-dark:hover {
    border-color: rgba(0, 163, 120, 0.3);
    box-shadow: 0 12px 32px rgba(0, 163, 120, 0.1);
}

/* Remove the glow overlay */
.bento-dark::before {
    display: none;
}

.bento-content-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    position: relative;
    /* z-index context */
    z-index: 2;
}

.bento-text h3 {
    color: var(--navy);
    margin-bottom: 8px;
    font-size: var(--text-2xl);
    /* 24px */
}

.bento-text p {
    color: var(--text-secondary);
    margin-bottom: 0;
    font-size: var(--text-lg);
    /* 18px */
    max-width: 450px;
}

.btn-glow {
    box-shadow: 0 0 20px rgba(0, 210, 165, 0.3);
    transition: all 0.3s ease;
}

.btn-glow:hover {
    box-shadow: 0 0 30px rgba(0, 210, 165, 0.5);
    transform: translateY(-2px);
}

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

    .bento-wide,
    .bento-full {
        grid-column: span 1;
    }

    .bento-content-row {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 24px;
        width: 100% !important;
        /* Force full width container on mobile */
    }

    /* Fix for icon colors if overridden */
    .bento-icon-box i {
        color: inherit;
        /* Ensure icon takes color from parent box class */
    }

    .bento-action {
        width: 100%;
    }

    .bento-action .btn {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 768px) {
    .bento-card-v2 {
        padding: 20px;
    }

    .bento-header {
        gap: 12px;
        margin-bottom: 16px;
    }

    .bento-icon-box {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }

    .bento-icon-box i {
        font-size: 0.9rem;
    }

    /* Standardizing mobile typography to match Hello page */
    .bento-card-v2 h3,
    .bento-text h3 {
        font-size: 0.875rem !important;
        /* 14px */
        margin-bottom: 6px !important;
        line-height: 1.3 !important;
        color: var(--navy) !important;
    }

    .bento-card-v2 p,
    .bento-text p {
        font-size: 0.8125rem !important;
        /* 13px */
        line-height: 1.5 !important;
        margin-bottom: 12px !important;
        color: var(--text-secondary) !important;
    }

    .bento-tags {
        margin-bottom: 16px;
        gap: 6px;
    }

    .bento-tags span {
        font-size: 0.75rem;
        padding: 4px 10px;
    }

    .bento-card-logo {
        position: absolute;
        bottom: 12px;
        right: 12px;
        height: 16px;
    }
}

/* Mobile Split Layout for smaller cards */
.bento-row-mobile-split {
    grid-column: span 3;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 900px) {
    .bento-row-mobile-split {
        grid-template-columns: 1fr 1fr;
        grid-column: span 1;
        gap: 12px;
    }

    .bento-row-mobile-split .bento-card-v2 {
        padding: 16px;
    }

    .bento-row-mobile-split h3 {
        font-size: 0.8125rem !important;
        /* Slightly smaller to fit side-by-side */
    }

    .bento-row-mobile-split p {
        font-size: 0.75rem !important;
        /* Slightly smaller to fit side-by-side */
        line-height: 1.4 !important;
    }
}

/* Three Cards Layout: All 3 in one row on desktop, Retail full + last 2 side-by-side on mobile */
.bento-row-three-cards-wrapper {
    grid-column: span 3;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.bento-card-retail {
    grid-column: span 1;
}

.bento-row-three-cards-wrapper .bento-row-mobile-split {
    grid-column: span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 968px) {
    .bento-row-three-cards-wrapper {
        grid-template-columns: 1fr;
        grid-column: span 1;
        gap: 20px;
    }

    .bento-card-retail {
        grid-column: span 1;
    }

    .bento-row-three-cards-wrapper .bento-row-mobile-split {
        grid-column: span 1;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.modal-overlay.active {
    display: flex;
}

.modal-content-wrapper {
    background: white;
    width: 100%;
    max-width: 480px;
    border-radius: 20px;
    padding: 32px;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
    border-top: 4px solid var(--primary);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: #94a3b8;
    cursor: pointer;
    transition: color 0.2s;
    line-height: 1;
}

.modal-close:hover {
    color: var(--primary);
}

.modal-body-content h3 {
    font-size: 1.5rem;
    margin-bottom: 12px;
    color: var(--navy);
}

.modal-body-content p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 24px;
}

/* Modal choice view (AI hype + 2 options) */
.modal-choice-view .modal-choice-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 20px;
}

.modal-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 20px;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    text-decoration: none;
    color: inherit;
    border: 2px solid var(--border-light);
    background: white;
}

.modal-choice-btn i {
    font-size: 1.25rem;
    margin-bottom: 4px;
}

.modal-choice-btn small {
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--text-secondary);
}

.modal-choice-chat {
    border-color: var(--primary);
    background: rgba(0, 163, 120, 0.06);
    color: var(--navy);
}

.modal-choice-chat:hover {
    background: rgba(0, 163, 120, 0.12);
    border-color: var(--primary-dark);
}

.modal-choice-call {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
}

.modal-choice-call small {
    color: rgba(255, 255, 255, 0.9);
}

.modal-choice-call:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white;
}

@media (max-width: 480px) {
    .modal-choice-view .modal-choice-actions {
        gap: 10px;
    }

    .modal-choice-btn {
        padding: 16px;
    }
}

.email-capture-form .form-group {
    margin-bottom: 16px;
    position: relative;
}

.email-capture-form input,
.email-capture-form textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.email-capture-form input:focus,
.email-capture-form textarea:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 163, 120, 0.1);
}

.form-error {
    color: #ef4444;
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
}

.email-capture-submit {
    width: 100%;
    margin-top: 8px;
    background-color: var(--primary) !important;
    border: none !important;
}

.email-capture-submit:hover {
    background-color: var(--primary-dark) !important;
}

.email-capture-privacy {
    text-align: center;
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 16px;
}

.email-capture-success {
    text-align: center;
    padding: 24px 0;
}

.email-capture-success i {
    font-size: 3rem;
    color: var(--primary);
    margin-bottom: 16px;
}

/* ============================================
   COOKIE CONSENT BANNER (Simple bottom-left)
   ============================================ */
.cookie-consent {
    position: fixed;
    bottom: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: var(--navy, #1d364e);
    border-radius: 14px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    z-index: 9990;
    display: none;
    animation: cookieSlideIn 0.3s ease-out;
    max-width: 360px;
    font-size: 0.8rem;
    line-height: 1.4;
}

.cookie-consent.active {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cookie-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

@keyframes cookieSlideIn {
    from {
        transform: translateY(10px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.cookie-text {
    flex: 1;
}

.cookie-text h4 {
    display: none;
}

.cookie-text p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary, #4b5563);
    line-height: 1.4;
}

.cookie-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cookie-accept {
    background: var(--primary);
    color: white;
    border: none;
}

.cookie-accept:hover {
    background: var(--primary-dark);
}

.cookie-decline {
    background: transparent;
    border: 1px solid var(--border-medium, #d1d5db);
    color: var(--text-secondary, #4b5563);
}

.cookie-decline:hover {
    border-color: var(--primary);
    color: var(--navy);
}

@media (max-width: 600px) {
    .cookie-consent {
        bottom: 80px;
        left: 16px;
        right: 16px;
        max-width: none;
        padding: 10px 14px;
    }
}

/* ============================================
   PRODUCT PAGE & INFINITY STYLES
   ============================================ */
.infinity-page {
    background-color: var(--bg-primary);
}

.product-hero {
    padding: 140px 0 100px;
    background-color: var(--navy);
    /* Matches homepage footer/contact */
    position: relative;
    overflow: hidden;
    transition: opacity 0.1s linear;
    will-change: opacity;
    border-bottom-left-radius: 60px;
    /* Reduced curve */
    border-bottom-right-radius: 60px;
    /* Reduced curve */
}

.product-hero-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 40px;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding-right: 0;
}

/* Infinity Logo Styling */
.infinity-logo-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    /* Tighter gap as requested */
    text-decoration: none;
}

.infinity-brand-text {
    font-family: var(--font-primary);
    /* Matches Aiwah Labs font */
    font-weight: 700;
    font-size: 1.1rem;
    /* Reduced size as requested */
    letter-spacing: -0.025em;
    color: #ffffff;
    /* White on the dark nav/hero */
    transition: color 0.3s ease;
    line-height: 1.2;
}

.infinity-nav .infinity-brand-text {
    color: var(--navy);
}

/* Wrapper to align the left content with the standard container */
.product-hero-content-wrapper {
    display: flex;
    justify-content: flex-end;
    /* Push content towards the gap */
    padding-left: 24px;
    /* Minimum padding */
}

.product-hero-content {
    max-width: 580px;
    /* Or whatever fits your design */
    width: 100%;
}

.product-hero-visual {
    width: 100%;
    height: 100%;
}

.product-hero-visual .visual-window {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

.product-hero-visual .window-img {
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    /* Image 'as is' */
    background: none !important;
    outline: none !important;
    transform: none !important;
    clip-path: inset(2px 2px 0px 3px);
    /* Remove 2px from left edge */
}

/* Text adjustments for Dark Theme */
.product-hero-content .hero-title {
    color: #ffffff;
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    /* Smaller min font size for mobile */
    /* Significantly bigger */
    line-height: 1.0;
    margin-bottom: 0;
    /* No description now */
    font-weight: 800;
}

.product-hero-content .hero-title span {
    color: var(--primary);
    /* Keep the green accent */
    display: block;
    /* Stack it */
}

.product-hero-content .hero-description {
    color: #cbd5e1;
    /* Light grey text */
    font-size: 1.125rem;
    margin-bottom: 0;
    /* No description now */
    font-weight: 800;
}

/* Tasks Visual Section */
.section-tasks {
    padding: 100px 0;
    overflow: hidden;
}

.tasks-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.tasks-content {
    max-width: 100%;
}

.tasks-content .display-title,
.tasks-content .section-title {
    /* Ensure title styles work for both classes if swapped */
    margin-bottom: 24px;
}

.tasks-visual {
    position: relative;
    height: 550px;
    width: 100%;
    /* Container for absolute cards */
}

.task-card {
    position: absolute;
    background: #ffffff;
    border-radius: 12px;
    padding: 16px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(0, 0, 0, 0.04);
    width: 280px;
    z-index: 1;
    transition: transform 0.3s ease;
}

.task-card:hover {
    transform: scale(1.05) rotate(0deg) !important;
    z-index: 10;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.15);
}

/* Specific Card Styles */
.card-slack {
    top: 40px;
    left: 20px;
    border-left: 4px solid #611f69;
    transform: rotate(-3deg);
}

.card-email {
    top: 160px;
    left: 140px;
    border-left: 4px solid #ea4335;
    transform: rotate(4deg);
    z-index: 2;
}

.card-linear {
    top: 300px;
    left: 40px;
    border-left: 4px solid #5e6ad2;
    transform: rotate(-2deg);
}

.card-warning {
    top: 100px;
    right: 0;
    border-left: 4px solid #f59e0b;
    transform: rotate(5deg);
    width: 240px;
}

.card-crm {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    bottom: 40px;
    right: 20px;
    transform: rotate(-4deg);
    width: 260px;
    z-index: 3;
}

.task-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0.7;
}

/* Visual Window Component (Generic) */
.visual-window {
    background: transparent;
    border-radius: 12px;
    padding: 0;
    box-shadow: none;
    border: none;
    overflow: visible;
    position: relative;
}

/* Restore card style for other sections */
.section .visual-window,
.section-light-grey .visual-window {
    background: #ffffff;
    padding: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid var(--border-light);
    overflow: hidden;
}

.visual-window.dark-bg {
    background: #0f172a;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.window-img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

/* Split Info Grid */
.split-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.split-info-grid.alt-layout {
    grid-template-columns: 1fr 1fr;
}

.section-light-grey {
    background-color: #f8fafc;
}

/* Roadmap Steps */
.roadmap-steps {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.roadmap-step {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.step-num {
    width: 44px;
    height: 44px;
    background: var(--primary);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.125rem;
    flex-shrink: 0;
}

/* Feature List */
.feature-list-v2 {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-list-v2 li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.125rem;
    color: var(--text-secondary);
}

.feature-list-v2 li i {
    color: var(--primary);
}

/* Responsive */
@media (max-width: 968px) {

    .tasks-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .tasks-visual {
        height: 350px;
        /* Reduced height */
        transform: scale(0.75);
        /* Scale down scattered cards */
        transform-origin: center top;
        margin-bottom: -60px;
        /* Reduce gap */
    }

    .tasks-content .display-title {
        font-size: 2.5rem;
    }

    .product-hero-grid,
    .split-info-grid,
    .split-info-grid.alt-layout {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .product-hero-grid {
        display: flex;
        flex-direction: column;
    }

    .info-text,
    .product-hero-content {
        order: 1;
    }

    .info-visual,
    .product-hero-visual {
        order: 2;
        transform: scale(0.9);
        /* Scale down visual on mobile */
        transform-origin: right center;
        /* Align to right edge */
        margin-top: -10px;
        /* Pull up closer */
        width: 100%;
        /* Ensure full width */
        margin-right: -10px;
        /* Slight pull to right edge */
    }

    .roadmap-step {
        text-align: left;
    }
}

/* Navbar - Always fixed and visible (same on all pages) */
.infinity-nav {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: background 0.3s ease, border 0.3s ease, box-shadow 0.3s ease;
}

.infinity-nav .nav-links,
.infinity-nav .nav-actions {
    display: flex !important;
    opacity: 1;
    pointer-events: auto;
}

.infinity-nav .nav-link {
    color: var(--navy);
}

.infinity-nav .nav-link:hover {
    color: var(--primary);
}

/* Navbar Dropdowns */
.nav-item.dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    min-width: 260px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 8px 0;
    z-index: 1001;
    border: 1px solid rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.2s ease-out;
}

.nav-item.dropdown:hover .dropdown-menu {
    display: block;
}

.dropdown-item {
    display: block;
    padding: 10px 20px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background: var(--bg-secondary);
    color: var(--primary);
    padding-left: 24px;
    /* Subtle slide */
}

/* Scrollable for Integrations */
.dropdown-menu.scrollable {
    max-height: 400px;
    overflow-y: auto;
}

.product-hero-visual .visual-window,
.product-hero-visual .window-img {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
}

/* ============================================
   INFINITY PAGE - NEW SECTIONS
   ============================================ */

/* Section Label */
.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* Why Automation Fails Section */
.why-automation-fails {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.blockquote-highlight {
    border-left: 4px solid var(--primary);
    padding-left: 24px;
    margin: 32px auto;
    max-width: 700px;
    text-align: left;
}

.blockquote-highlight p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--text-secondary);
    font-style: italic;
}

/* Roadmap Grid */
.roadmap-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    margin-top: 48px;
}

.roadmap-card {
    background: var(--navy);
    border-radius: 16px;
    padding: 32px;
    color: white;
}

.roadmap-level {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--primary);
    margin-bottom: 12px;
}

.roadmap-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: white;
}

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

.roadmap-card strong {
    color: white;
}

/* Action Plane Layout */
.action-plane-layout {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* Capabilities Grid */
.capabilities-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.capability-card {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 24px;
    text-align: center;
}

.capability-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.capability-icon i {
    font-size: 1.5rem;
    color: white;
}

.capability-card h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.capability-card p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* Why Now Grid */
.why-now-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    margin-top: 48px;
}

.why-now-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.why-now-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.why-now-item {
    padding-bottom: 24px;
    border-bottom: 1px solid var(--border-light);
}

.why-now-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.why-now-item h4 {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.why-now-item p {
    font-size: 1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Responsive for new sections */
@media (max-width: 968px) {
    .roadmap-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .capabilities-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .why-now-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .why-automation-fails h2,
    .why-automation-fails h3 {
        font-size: 1.75rem !important;
    }
}

/* Featured Case Study Slider – light brand tint, improved layout */
.featured-stories {
    position: relative;
    overflow: hidden;
    padding: 100px 0 80px;
    background: linear-gradient(180deg, rgba(0, 163, 120, 0.12) 0%, rgba(0, 163, 120, 0.2) 100%);
}

.featured-stories .section-title {
    color: var(--navy);
}

.featured-stories .section-subtitle {
    color: var(--text-secondary);
}

.featured-slider-container {
    position: relative;
    height: 560px;
    width: 100%;
    margin-top: 48px;
}

.featured-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    display: flex;
    align-items: center;
    gap: 64px;
    padding: 0 24px;
}

.featured-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 5;
}

.featured-slide-content {
    flex: 1;
    max-width: 540px;
    color: var(--text-primary);
}

.featured-slide-content>span:first-of-type {
    display: inline-block;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    color: var(--primary);
    margin-bottom: 12px;
}

.featured-slide-content h3,
.featured-slide-content h3[style] {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    font-weight: 800;
    color: var(--navy) !important;
    margin: 0 0 28px;
    line-height: 1.2;
}

.featured-slide-image {
    flex: 1;
    max-width: 520px;
    height: 400px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    border: 1px solid var(--border-light);
}

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

.featured-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin: 0 0 28px;
}

.featured-metric-item {
    background: white;
    padding: 18px 20px;
    border-radius: var(--radius-md);
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.featured-metric-item:hover {
    border-color: rgba(0, 163, 120, 0.2);
    box-shadow: 0 4px 12px rgba(0, 163, 120, 0.08);
}

.featured-metric-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.featured-metric-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.featured-testimonial {
    font-size: 1.0625rem;
    line-height: 1.65;
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 24px;
    padding: 20px 0 20px 24px;
    border-left: 4px solid var(--primary);
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    max-width: 100%;
}

.featured-slide-content .btn {
    background: var(--primary);
    color: white;
    border: none;
}

.featured-slide-content .btn:hover {
    background: var(--primary-dark);
    color: white;
}

.featured-attribution {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--navy);
    margin-bottom: 32px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.featured-attribution::before {
    content: "";
    width: 20px;
    height: 1px;
    background: var(--border-medium);
}

.featured-slider-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-top: 44px;
}

.featured-stories .slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(0, 163, 120, 0.25);
    cursor: pointer;
    transition: all 0.3s ease;
}

.featured-stories .slider-dot:hover {
    background: rgba(0, 163, 120, 0.5);
}

.featured-stories .slider-dot.active {
    background: var(--primary);
    width: 28px;
    border-radius: 10px;
}

.featured-stories .container>div[style*="text-align: center"] {
    margin-top: 48px;
}

.featured-stories .container>div[style*="text-align: center"] .btn,
.featured-stories .container>div[style*="text-align: center"] .btn-secondary {
    background-color: var(--primary);
    border-color: var(--primary);
    color: white !important;
}

.featured-stories .container>div[style*="text-align: center"] .btn:hover,
.featured-stories .container>div[style*="text-align: center"] .btn-secondary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: white !important;
}

/* FAQ Section Styles */
.faq-grid {
    max-width: 800px;
    margin: 40px auto 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.faq-item {
    background: white;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:hover {
    border-color: var(--border-medium);
}

.faq-item[open] {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-glow);
}

.faq-item summary {
    padding: 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--text-primary);
    list-style: none;
    position: relative;
    padding-right: 48px;
    line-height: 1.4;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::marker {
    display: none;
}

.faq-item summary::after {
    content: '+';
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--primary);
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    transform: translateY(-50%) rotate(45deg);
}

.faq-item p {
    padding: 0 24px 24px;
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    font-size: 1rem;
}

/* Mobile FAQ Styles */
@media (max-width: 768px) {
    .faq-grid {
        margin-top: 24px;
        gap: 12px;
    }

    .faq-item summary {
        font-size: 0.95rem;
        padding: 20px;
        padding-right: 44px;
    }

    .faq-item summary::after {
        right: 20px;
        font-size: 1.3rem;
    }

    .faq-item p {
        padding: 0 20px 20px;
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* Blog Preview Grid (Homepage) */
.blog-preview-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.loading-blogs {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    grid-column: span 2;
}

.blog-preview-card {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-light);
    transition: all 0.3s ease;
}

.blog-preview-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.blog-preview-image {
    width: 100%;
    height: 140px;
    overflow: hidden;
}

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

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

.blog-preview-content {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
}

.blog-preview-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.blog-preview-category {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--primary);
    letter-spacing: 0.5px;
}

.blog-preview-date {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.blog-preview-title {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 12px;
}

.blog-preview-title a {
    color: var(--text-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-preview-title a:hover {
    color: var(--primary);
}

.blog-preview-excerpt {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

.blog-preview-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    transition: color 0.2s ease;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.blog-preview-link:hover {
    color: var(--primary-dark);
}

.no-posts {
    text-align: center;
    color: var(--text-muted);
    padding: 40px;
    grid-column: span 2;
}

/* Mobile Blog Preview */
@media (max-width: 768px) {
    .blog-preview-grid {
        gap: 16px;
        margin-top: 24px;
    }

    .blog-preview-image {
        height: 100px;
    }

    .blog-preview-content {
        padding: 12px 14px;
    }

    .blog-preview-meta {
        gap: 8px;
        margin-bottom: 4px;
    }

    .blog-preview-category {
        font-size: 0.6rem;
    }

    .blog-preview-date {
        font-size: 0.65rem;
    }

    .blog-preview-title {
        font-size: 0.85rem;
        margin-bottom: 6px;
        line-height: 1.3;
    }

    .blog-preview-excerpt {
        display: none;
    }

    .blog-preview-link {
        font-size: 0.75rem;
    }
}

/* Process/How We Work Section */
.process-section {
    background: white;
}

.process-workflow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}







@media (max-width: 968px) {
    .featured-stories {
        padding: 60px 0 40px;
    }

    .featured-slider-container {
        height: auto;
        margin-top: 24px;
    }

    .featured-slide {
        position: relative;
        flex-direction: column;
        gap: 20px;
        opacity: 0;
        display: none;
        padding: 0 16px;
    }

    .featured-slide.active {
        display: flex;
    }

    /* Force override inline h3 styles */
    .featured-slide-content h3,
    .featured-slide-content h3[style] {
        font-size: 1.35rem !important;
        margin: 8px 0 16px !important;
        line-height: 1.3 !important;
        color: var(--navy) !important;
    }

    /* Category label above heading */
    .featured-slide-content>span[style] {
        font-size: 0.7rem !important;
        letter-spacing: 0.5px !important;
    }

    .featured-slide-image {
        height: 200px;
        width: 100%;
        order: -1;
        margin-bottom: 12px;
        border-radius: var(--radius-md);
    }

    .featured-metrics-grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        margin: 16px 0;
    }

    .featured-metric-item {
        padding: 12px 10px;
    }

    .featured-metric-value {
        font-size: 1rem;
    }

    .featured-metric-label {
        font-size: 0.6rem;
    }

    .featured-testimonial {
        font-size: 0.85rem;
        padding-left: 14px;
        margin: 16px 0;
        line-height: 1.5;
    }

    /* CTA button container */
    .featured-slide-content>div[style*="display: flex"] {
        margin-top: 16px;
    }

    .featured-slide-content .btn {
        font-size: 0.85rem !important;
        padding: 12px 20px !important;
    }

    .featured-slider-nav {
        margin-top: 32px;
    }

    /* See All button at bottom */
    .featured-stories .container>div[style*="text-align: center"] {
        margin-top: 40px !important;
    }
}

.success-stories-slider {
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    width: 100%;
    margin-top: 40px;
}

.success-stories-slider::before,
.success-stories-slider::after {
    content: "";
    height: 100%;
    position: absolute;
    width: 150px;
    z-index: 2;
    pointer-events: none;
}

.success-stories-slider::before {
    left: 0;
    top: 0;
    background: linear-gradient(to right, var(--primary), transparent);
}

.success-stories-slider::after {
    right: 0;
    top: 0;
    background: linear-gradient(to left, var(--primary), transparent);
}

.success-stories-track {
    display: flex;
    width: max-content;
    animation: scroll-testimonials 60s linear infinite;
    gap: 24px;
}

.success-stories-track:hover {
    animation-play-state: paused;
}

@keyframes scroll-testimonials {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-33.33%));
    }

    /* Adjusting for the tripling of cards for seamless loop */
}

.success-story-card {
    background: white;
    padding: 32px;
    border-radius: var(--radius-lg);
    width: 400px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease;
}

.success-story-card:hover {
    transform: translateY(-5px);
}

.success-story-content p {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
    margin-bottom: 24px;
    font-style: italic;
    position: relative;
}

.success-story-content p::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: -15px;
    font-size: 4rem;
    color: var(--primary-light);
    opacity: 0.15;
    font-family: serif;
}

.success-story-company {
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--border-light);
    padding-top: 16px;
    flex-wrap: wrap;
}

.business-name {
    font-weight: 700;
    color: var(--navy);
    font-size: 1rem;
    white-space: nowrap;
}

.business-description {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 400;
}

.business-description::before {
    content: "•";
    margin-right: 8px;
    opacity: 0.5;
}

@media (max-width: 768px) {
    .success-stories-track {
        gap: 12px;
    }

    .success-story-card {
        width: 175px;
        padding: 16px;
        border-radius: var(--radius-md);
    }

    .success-stories-slider::before,
    .success-stories-slider::after {
        width: 30px;
    }

    .success-story-content p {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
    }

    .success-story-content p::before {
        font-size: 1.5rem;
        top: -5px;
        left: -8px;
    }

    .success-story-company {
        padding-top: 12px;
        gap: 6px;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
    }

    .business-name {
        font-size: 0.75rem !important;
    }

    .business-description {
        font-size: 0.65rem !important;
    }

    .business-description::before {
        display: none;
    }
}

/* Mobile Menu Accordion */
.mobile-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    font-size: 1.25rem;
    /* Match mobile menu links */
    font-weight: 600;
    color: var(--navy);
    padding: 16px 0;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.mobile-dropdown-content {
    display: none;
    flex-direction: column;
    padding: 0 0 16px 16px;
    background: transparent;
}

.mobile-dropdown-content.active {
    display: flex;
    animation: fadeIn 0.3s ease;
}

.mobile-dropdown-content a {
    font-size: 1rem;
    padding: 8px 0;
    color: var(--text-secondary);
    font-weight: 500;
    border-bottom: none;
}

.mobile-dropdown-content a:hover {
    color: var(--primary);
}

.mobile-dropdown-toggle i {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

.mobile-dropdown-toggle.active i {
    transform: rotate(180deg);
}

/* Mobile: Nav actions with hamburger always visible */
@media (max-width: 900px) {
    .infinity-nav .nav-actions {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .infinity-nav .nav-actions .btn:not(.mobile-menu-btn) {
        display: none;
    }

    .infinity-nav .mobile-menu-btn {
        display: block !important;
    }
}

@media (max-width: 900px) {
    .infinity-nav .mobile-menu-btn .bar {
        background-color: var(--navy, #1d364e) !important;
    }
}

/* HIDE CTA Button on Mobile Navbar (Keep Hamburger Only) */
@media (max-width: 900px) {
    .infinity-nav .nav-actions .nav-cta-btn {
        display: none !important;
    }
}

/* HIDE Desktop Nav Links on Mobile (Always use Hamburger) */
@media (max-width: 900px) {
    .infinity-nav .nav-links {
        display: none !important;
    }
}

/* ================================================== */
/* GLOBAL SHADOW REMOVAL & HOVER ANIMATION CLEANUP   */
/* ================================================== */

/* Remove shadows from ALL cards, sections, and non-interactive elements */
.card,
.feature-card,
.service-card,
.bento-item,
.bento-card,
.stat-card,
.team-card,
.testimonial-card,
.blog-card,
.case-study-card,
.integration-card,
.partner-card,
.trust-badge,
.security-item,
.workflow-step,
.workflow-card,
.process-step,
.pricing-card,
.faq-item,
.contact-card,
.benefit-card,
.feature-item,
.tier-card,
.capability-card,
.module-card,
.hero-image-wrapper,
.hero-visual,
.section-card,
section,
.container>div,
[class*="card"],
[class*="item"]:not(.nav-item):not(.dropdown-item) {
    box-shadow: none !important;
}

/* Preserve shadows ONLY for buttons, dropdowns, and modals */
.btn,
button,
.dropdown-menu,
.mobile-menu,
.modal,
.popup,
.tooltip,
.navbar,
.infinity-nav {
    /* These can keep their shadows - do not override */
}

/* Remove hover lift animations from non-clickable elements */
.card:hover,
.feature-card:hover,
.service-card:hover,
.bento-item:hover,
.bento-card:hover,
.stat-card:hover,
.team-card:hover,
.testimonial-card:hover,
.blog-card:hover,
.case-study-card:hover,
.integration-card:hover,
.partner-card:hover,
.trust-badge:hover,
.security-item:hover,
.workflow-step:hover,
.workflow-card:hover,
.process-step:hover,
.faq-item:hover,
.benefit-card:hover,
.feature-item:hover,
.tier-card:hover,
.capability-card:hover,
.module-card:hover,
[class*="card"]:hover,
[class*="item"]:not(.nav-item):not(.dropdown-item):hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Preserve hover effects for buttons and links */
.btn:hover,
button:hover,
a.btn:hover,
.nav-link:hover,
.dropdown-item:hover {
    /* These can keep their hover effects - do not override */
}

/* FORCE HIDE Nav Links on ALL Mobile/Tablet Views */
@media (max-width: 1024px) {

    .navbar .nav-links,
    .infinity-nav .nav-links,
    nav .nav-links {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

/* ================================================== */
/* CONSOLIDATED MOBILE NAVBAR FIX                     */
/* ================================================== */
@media (max-width: 1024px) {

    /* ALWAYS show nav-actions container on mobile */
    .infinity-nav .nav-actions,
    .navbar .nav-actions {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* ALWAYS show hamburger button */
    .infinity-nav .mobile-menu-btn,
    .navbar .mobile-menu-btn,
    .mobile-menu-btn {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .infinity-nav .mobile-menu-btn .bar {
        background-color: var(--navy, #1d364e) !important;
    }

    /* Hide CTA button - only hamburger */
    .infinity-nav .nav-cta-btn,
    .navbar .nav-cta-btn,
    .nav-actions .btn:not(.mobile-menu-btn) {
        display: none !important;
    }
}

/* ================================================== */
/* FIX MOBILE HORIZONTAL OVERFLOW (Keep Hamburger Visible) */
/* ================================================== */
@media (max-width: 1024px) {

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        position: relative !important;
    }

    .navbar,
    .infinity-nav,
    nav {
        width: 100vw !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }

    .hero-illustration,
    .hero-image-wrapper img {
        max-width: 100% !important;
        height: auto !important;
    }

    .container {
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* ================================================== */
/* FIX HAMBURGER BARS DISPLAY ON MOBILE              */
/* ================================================== */
@media (max-width: 1024px) {
    .mobile-menu-btn .bar {
        display: block !important;
        width: 24px !important;
        height: 3px !important;
        margin: 4px 0 !important;
        background-color: var(--navy, #1d364e) !important;
        border-radius: 2px !important;
    }

    .infinity-nav .mobile-menu-btn .bar {
        background-color: var(--navy, #1d364e) !important;
    }
}

/* ================================================== */
/* MOBILE: Navbar always visible                     */
/* ================================================== */
@media (max-width: 1024px) {
    .infinity-nav .mobile-menu-btn {
        display: block !important;
    }

    .infinity-nav .nav-actions {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    .infinity-nav .mobile-menu-btn .bar {
        display: block !important;
        width: 24px !important;
        height: 3px !important;
        margin: 4px 0 !important;
        background-color: var(--navy, #1d364e) !important;
        border-radius: 2px !important;
    }
}

/* ================================================== */
/* MOBILE: Hide desktop nav links (use hamburger)     */
/* ================================================== */
@media (max-width: 1024px) {

    .infinity-nav .nav-links,
    .navbar .nav-links,
    nav .nav-links {
        display: none !important;
        width: 0 !important;
        flex: 0 0 0 !important;
        visibility: hidden !important;
    }
}

/* ================================================== */
/* CRISP LOGO RENDERING                              */
/* ================================================== */
.nav-logo img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* ================================================== */
/* FAQ H3 STYLING INSIDE SUMMARY                     */
/* ================================================== */
.faq-item summary h3 {
    display: inline;
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
    color: var(--navy);
}

/* ================================================== */
/* SCOPED H3 STANDARDIZATION (avoid global override) */
/* ================================================== */
.process-step h3,
.roadmap-step h3,
.capability-card h3 {
    font-size: 1rem !important;
    font-weight: 700;
    line-height: 1.4;
}


/* ================================================== */
/* BENTO CARD TAGS - SMALLER THAN H3                 */
/* ================================================== */
.bento-tags-grid span {
    font-size: 12px !important;
    padding: 6px 12px !important;
}

@media (max-width: 768px) {
    .bento-tags-grid span {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}

/* ================================================== */
/* HERO VISUAL - NO BACKGROUND, LARGER SIZE          */
/* ================================================== */
.hero-illustration {
    background: transparent !important;
    max-width: 120% !important;
    width: 120% !important;
    height: auto !important;
    margin-left: -10% !important;
}

.hero-image-wrapper {
    background: transparent !important;
    box-shadow: none !important;
}

@media (max-width: 768px) {
    .hero-illustration {
        max-width: 100% !important;
        width: 100% !important;
        margin-left: 0 !important;
    }
}

/* ================================================== */
/* HERO ILLUSTRATION - MOBILE SIZING                 */
/* ================================================== */
@media (max-width: 768px) {
    .hero-illustration {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 20px !important;
    }

    .hero-visual-right {
        order: -1;
        margin-bottom: 20px;
    }

    .hero-image-wrapper {
        max-width: 100%;
        overflow: hidden;
    }
}

/* ================================================== */
/* HERO ILLUSTRATION - MOBILE SIZING FIX             */
/* ================================================== */
@media (max-width: 768px) {

    .header-illustration,
    .hero-illustration {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-top: 0 !important;
        transform: none !important;
    }
}

/* Ensure visual has no weird filters now that it's the official logo */
.hero-illustration {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* ================================================== */
/* HERO LOGO - OVERSIZED & CROPPED                   */
/* ================================================== */
@media (min-width: 1024px) {
    .hero-illustration {
        /* Ensure it bleeds off the right side */
        position: relative;
        right: -50px;
    }
}

/* ================================================== */
/* EXTREME HERO LOGO CROP                            */
/* ================================================== */
.hero-image-wrapper {
    overflow: visible !important;
    /* Allow bleed */
}

@media (min-width: 1024px) {
    .hero-visual-right {
        /* Ensure the container doesn't clip the bled logo */
        overflow: visible;
        margin-right: -100px;
        /* Pull closer to edge */
    }
}

/* ================================================== */
/* HERO LOGO - MOBILE RESPONSIVENESS                 */
/* ================================================== */
@media (max-width: 1024px) {
    .hero-image-wrapper {
        height: 400px;
        width: 100%;
        overflow: hidden !important;
        margin-top: 0;
    }

    .hero-illustration {
        width: 150% !important;
        right: -25% !important;
        bottom: -20% !important;
        position: absolute !important;
        transform: none !important;
        margin: 0 !important;
    }
}

@media (max-width: 768px) {
    .hero-image-wrapper {
        height: 350px;
    }

    .hero-illustration {
        width: 140% !important;
        right: -20% !important;
        bottom: -10% !important;
    }
}

/* ================================================== */
/* MOBILE HERO LAYOUT - VISUAL FIRST                 */
/* ================================================== */
@media (max-width: 1024px) {
    .hero-split-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-visual-right {
        order: -1 !important;
        width: 100% !important;
        margin-bottom: 20px !important;
        margin-top: 0 !important;
    }

    .hero-content-left {
        order: 2 !important;
        width: 100% !important;
    }

    /* Ensure oversized cutout look on mobile */
    .hero-image-wrapper {
        height: 350px !important;
        width: 100% !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        /* Position relative to contain the absolute logo */
        position: relative !important;
    }

    /* Mobile specific cutout positioning */
    .hero-illustration {
        width: 180% !important;
        right: -40% !important;
        bottom: -30% !important;
        top: auto !important;
        left: auto !important;
        position: absolute !important;
        transform: scale(1.1) !important;
    }
}

/* ================================================== */
/* HERO TEXT ON TOP OF LOGO                          */
/* ================================================== */
.hero-content-left {
    position: relative;
    z-index: 10 !important;
}

/* Mobile: Match desktop styling for logo */
@media (max-width: 1024px) {
    .hero-illustration {
        width: 250% !important;
        right: -35% !important;
        bottom: -20% !important;
        transform: scale(1.5) !important;
    }
}

/* ================================================== */
/* HERO LOGO - ANCHOR TO RIGHT EDGE                  */
/* ================================================== */
.hero {
    overflow: hidden !important;
    /* Prevent horizontal scroll */
}

.hero-split-wrapper {
    position: relative !important;
}

/* Position logo container at the right edge of hero */
.hero-visual-right {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 60% !important;
    overflow: visible !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.hero-image-wrapper {
    position: absolute !important;
    right: -20% !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 100% !important;
    height: auto !important;
}

.hero-illustration {
    position: relative !important;
    width: 250% !important;
    max-width: none !important;
    right: auto !important;
    bottom: auto !important;
    transform: scale(1.5) !important;
}

/* Ensure text stays on left and is readable */
.hero-content-left {
    position: relative !important;
    z-index: 10 !important;
    width: 50% !important;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    .hero-visual-right {
        position: relative !important;
        width: 100% !important;
        height: 300px !important;
        order: -1 !important;
        margin-bottom: 20px !important;
        overflow: hidden !important;
    }

    .hero-content-left {
        width: 100% !important;
        order: 2 !important;
    }

    .hero-image-wrapper {
        right: -30% !important;
        top: 50% !important;
    }

    .hero-illustration {
        width: 200% !important;
        transform: scale(1.3) !important;
    }
}

/* ================================================== */
/* MOBILE HERO - FINAL OVERRIDE                       */
/* ================================================== */
@media (max-width: 1024px) {
    .hero-visual-right {
        height: 350px !important;
        position: relative !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .hero-image-wrapper {
        position: absolute !important;
        right: -30% !important;
        top: auto !important;
        bottom: -50% !important;
        transform: none !important;
        width: 150% !important;
    }

    .hero-illustration {
        width: 100% !important;
        transform: scale(2) !important;
        position: relative !important;
    }
}

/* ================================================== */
/* HERO LOGO FIX - CORRECT SIZE & MOBILE ORDER       */
/* ================================================== */

/* Reset Hero Illustration styles */
.hero-illustration {
    width: 100% !important;
    max-width: 450px !important;
    height: auto !important;
    margin: 0 auto !important;
    background: transparent !important;
    transform: none !important;
    /* Subtle glow for the logo */
    filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.15));
}

.hero-image-wrapper {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    padding: 0 !important;
    transform: none !important;
    width: auto !important;
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
}

/* Mobile Layout - Logo on Top */
@media (max-width: 968px) {
    .hero-split-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-visual-right {
        order: -1 !important;
        /* Visual First */
        margin-bottom: 24px !important;
        min-height: auto !important;
    }

    .hero-illustration {
        max-width: 280px !important;
        /* Smaller on mobile */
    }
}

/* ================================================== */
/* HERO LOGO - OVERSIZED & PUSHED RIGHT              */
/* ================================================== */
@media (min-width: 969px) {
    .hero-image-wrapper {
        position: absolute !important;
        right: -0% !important;
        /* Negative value pushes it OFF the screen to the right */
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 120% !important;
        /* Make container wide enough */
        z-index: 0 !important;
        display: block !important;
    }

    .hero-illustration {
        width: 100% !important;
        max-width: none !important;
        transform: scale(2) !important;
        /* 300% Size Increase */
        opacity: 1 !important;
    }

    .hero-split-wrapper {
        position: relative;
        /* Context for absolute positioning */
        overflow: hidden;
        /* Prevent horizontal scrollbar */
    }

    .hero-content-left {
        position: relative;
        z-index: 2;
        /* Keep text above the giant logo */
        max-width: 900px;
        /* Ensure text doesn't stretch too wide */
    }
}

/* ================================================== */
/* HERO FIXES - LOGO CUTOFF & TEXT SIZING            */
/* ================================================== */

/* 1. Resize Hero Text */
.hero-title {
    font-size: clamp(2rem, 3.5vw, 3rem) !important;
    /* Reduced from 4rem max */
    line-height: 1.2 !important;
}

.hero-description {
    font-size: clamp(0.95rem, 1.2vw, 1.125rem) !important;
    /* Reduced from 1.25rem */
    max-width: 500px !important;
    /* Tighter width for better readability */
}

/* 2. Fix Logo Cutoff on Right */
/* We need the overflow to be visible on the inner containers */
.hero-split-wrapper,
.hero-visual-right {
    overflow: visible !important;
}

/* Position the logo image wrapper to anchor to the right edge of the screen, not container */
@media (min-width: 1024px) {
    .hero-image-wrapper {
        position: absolute !important;
        right: -20% !important;
        /* Adjust per preference - pushes it partially off screen */
        top: 50% !important;
        width: 100vw !important;
        /* Use viewport width reference */
        transform: translateY(-50%) !important;
        max-width: 1500px !important;
        /* Cap it so it doesn't get crazy on wide screens */
    }

    .hero-illustration {
        width: 60% !important;
        /* Control size relative to the wrapper */
        margin-left: auto !important;
        /* Push to right side of wrapper */
        display: block !important;
        transform: scale(2.5) !important;
        /* Scale it up */
        transform-origin: center right !important;
        /* Anchor scaling to right */
    }
}

/* ================================================== */
/* HERO ADJUSTMENTS: WIDER TEXT, LOGO PUSHED RIGHT   */
/* ================================================== */

/* 1. Wider Text Container */
.hero-content-left {
    max-width: 800px !important;
    /* Increased from 600px/500px */
    width: 100% !important;
}

.hero-description {
    max-width: 650px !important;
    /* Match wider container */
}

/* 2. Push Logo Further Right */
@media (min-width: 1024px) {
    .hero-image-wrapper {
        right: -35% !important;
        /* Push further right (was -20%) */
        width: 120% !important;
    }

    .hero-illustration {
        transform-origin: center right !important;
        margin-right: -10% !important;
        /* Push image itself right */
    }
}

/* ================================================== */
/* HERO LOGO SIZE INCREASE                           */
/* ================================================== */
@media (min-width: 969px) {
    .hero-illustration {
        transform: scale(1.55) !important;
        /* Reduced by 30% (from 2.2) */
    }
}

/* ================================================== */
/* HERO LOGO: SIZE & TRANSPARENCY                    */
/* ================================================== */
.hero-illustration {
    opacity: 0.6 !important;
    /* 60% Visible / 40% Transparent */
}

/* ================================================== */
/* HERO LOGO - MOBILE SIZE INCREASE (200%)           */
/* ================================================== */
@media (max-width: 968px) {
    .hero-illustration {
        transform: scale(1.4) !important;
        /* Reduced by 30% (from 2.0) */
        margin-top: 20px !important;
        margin-bottom: 20px !important;
    }

    /* Ensure wrapper doesn't clip the enlarged logo */
    .hero-image-wrapper {
        overflow: visible !important;
        height: auto !important;
        min-height: 250px !important;
        /* Give it space */
    }
}

/* ================================================== */

/* ================================================== */
/* HERO MOBILE FIX - CONTENT FIRST, MINIMAL TOP GAP  */
/* ================================================== */
@media (max-width: 968px) {

    /* Break container constraints */
    .hero-container,
    .container,
    .hero-split-wrapper {
        position: static !important;
        overflow: visible !important;
    }

    .hero {
        position: relative !important;
        /* Keep relative so absolute overlay works */
        overflow: hidden !important;
    }

    .hero-split-wrapper {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 0 !important;
        min-height: calc(100vh - 80px) !important;
        /* Force hero to fill viewport */
        justify-content: center !important;
    }

    /* Content second – appears below visual */
    .hero-content-left {
        order: 1 !important;
        position: relative !important;
        z-index: 10 !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        padding-bottom: 40px !important;
        text-align: center !important;
    }

    .hero-title {
        font-size: 2.25rem !important;
        /* Much bigger as requested */
        line-height: 1.2 !important;
        margin-bottom: 16px !important;
    }

    .hero-description {
        font-size: 1.1rem !important;
        /* Slightly larger for balance */
        max-width: 90% !important;
        margin: 0 auto 24px !important;
    }

    /* Visual first – appears at the top */
    .hero-visual-right {
        order: -1 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        z-index: 1 !important;
        margin: 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 40px !important;
    }

    .hero-image-wrapper {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    .hero-illustration {
        width: 100% !important;
        max-width: 280px !important;
        transform-origin: center !important;
        transform: scale(1.2) !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        opacity: 0.6 !important;
    }
}

/* ================================================== */
/* HERO LOGO OVERLAY - Large logo over text, edges off screen */
/* ================================================== */
.hero:has(.hero-logo-overlay) {
    overflow: hidden !important;
    padding-top: 100px !important;
    padding-bottom: 140px !important;
}

.hero-split-wrapper {
    position: relative !important;
    min-height: 420px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important;
    align-items: center !important;
}

/* Logo overlay: covers hero, behind text */
.hero-visual-right.hero-logo-overlay {
    position: absolute !important;
    right: 0 !important;
    top: -50px !important;
    /* Pushed up under navbar */
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    pointer-events: none !important;
    z-index: 0 !important;
    overflow: visible !important;
}

.hero-content-left {
    position: relative !important;
    z-index: 10 !important;
    width: 100% !important;
}

/* Large logo: stretched so edges extend off screen, overlay over text */
.hero-logo-overlay .hero-illustration {
    position: relative !important;
    width: 230vw !important;
    /* Ultra stretch as requested */
    max-width: none !important;
    height: auto !important;
    transform: scale(1.1) !important;
    transform-origin: center center !important;
    opacity: 0.6 !important;
    filter: drop-shadow(0 0 20px rgba(74, 222, 128, 0.15)) !important;
}

/* Desktop: 25% larger logo, pushed right by ~8cm */
@media (min-width: 969px) {
    .hero:has(.hero-logo-overlay) {
        padding-top: 100px !important;
    }

    .hero-split-wrapper {
        grid-template-columns: 1fr 1fr !important;
    }

    .hero-content-left {
        max-width: 600px !important;
    }

    .hero-visual-right.hero-logo-overlay {
        justify-content: flex-end !important;
    }

    .hero-logo-overlay .hero-illustration {
        transform: scale(1.1) translateX(30%) !important;
        /* Shifted right by 30% */
        margin-right: 0 !important;
    }
}

/* Mobile: same overlay treatment, large logo with edges off */
@media (max-width: 968px) {
    .hero:has(.hero-logo-overlay) {
        padding-top: 100px !important;
        min-height: 100vh !important;
        padding-bottom: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .hero-split-wrapper {
        display: flex !important;
        flex-direction: column !important;
    }

    .hero-visual-right.hero-logo-overlay {
        position: absolute !important;
        right: 0 !important;
        top: 20% !important;
        /* Pushed down further on mobile (20%) */
        left: 0 !important;
        bottom: auto !important;
        height: 100% !important;
        transform: none !important;
        /* Removed centering translateY to use top instead */
        order: -1 !important;
    }

    .hero-content-left {
        order: 1 !important;
        z-index: 20 !important;
        width: 100% !important;
        position: relative !important;
        text-align: center !important;
        margin-top: 5vh !important;
        /* Push text down 5% (brought up from 20%) */
    }

    .hero-visual-right {
        order: -1 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    .hero-title {
        color: #ffffff !important;
    }

    .hero-description {
        color: rgba(255, 255, 255, 0.95) !important;
    }

    .hero-visual-right.hero-logo-overlay {
        z-index: 1 !important;
    }

    .hero-logo-overlay .hero-illustration {
        max-width: none !important;
        width: 200vw !important;
        /* Stretch edge-to-edge on mobile */
        transform: scale(1.2) !important;
        opacity: 0.4 !important;
        margin-top: 0 !important;
    }
}

/* Security Badges Responsive */
@media (max-width: 1100px) {
    .security-badges {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 768px) {
    .security-badges {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .security-badge {
        padding: 16px !important;
        gap: 10px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .security-badge h3 {
        font-size: 0.8125rem !important;
        text-align: center !important;
    }

    .security-badge small {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
    }

    .security-badge i {
        font-size: 1.25rem !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    .security-badges {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    .security-badge {
        padding: 14px 12px !important;
        gap: 8px !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }

    .security-badge h3 {
        font-size: 0.8125rem !important;
        text-align: center !important;
    }

    .security-badge small {
        font-size: 0.75rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
    }

    .security-badge i {
        font-size: 1.125rem !important;
        margin-top: 0 !important;
    }
}

/* ===== How It Works / Process Steps ===== */
.process-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    padding: 40px 0;
}

/* Workflow line connecting all steps */
.process-steps::before {
    content: '';
    position: absolute;
    top: 64px;
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg, var(--primary), rgba(0, 163, 120, 0.2));
    z-index: 0;
}

.process-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 16px;
    position: relative;
    z-index: 1;
}

.process-step-number {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--primary);
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    flex-shrink: 0;
    box-shadow: 0 0 0 4px white, 0 4px 16px rgba(0, 163, 120, 0.2);
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.process-step:hover .process-step-number {
    transform: scale(1.1);
    box-shadow: 0 0 0 4px white, 0 6px 24px rgba(0, 163, 120, 0.35);
}

.process-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    max-width: 240px;
}

.process-step-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 8px;
    line-height: 1.3;
}

.process-step-content p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0;
}

.process-connector {
    display: none;
}

@media (max-width: 968px) {
    .process-steps {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        max-width: 600px;
        padding: 20px 0;
    }

    /* Vertical workflow line on mobile */
    .process-steps::before {
        top: 0;
        bottom: 0;
        left: 28px;
        right: auto;
        width: 2px;
        height: auto;
        background: linear-gradient(180deg, var(--primary), rgba(0, 163, 120, 0.2));
    }

    .process-step {
        flex-direction: row;
        text-align: left;
        padding: 0 0 32px 0;
        gap: 20px;
        align-items: flex-start;
        width: 100%;
    }

    .process-step-number {
        margin-bottom: 0;
        width: 56px;
        height: 56px;
        font-size: 1.25rem;
        flex-shrink: 0;
        box-shadow: 0 0 0 3px white, 0 4px 16px rgba(0, 163, 120, 0.2);
    }

    .process-step-content {
        flex: 1;
        max-width: none;
        padding-top: 8px;
    }

    .process-step-content h3 {
        font-size: 1.125rem;
        margin-bottom: 10px;
    }

    .process-step-content p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

@media (max-width: 480px) {
    .process-steps {
        padding: 16px 0;
    }

    .process-steps::before {
        left: 24px;
    }

    .process-step {
        padding: 0 0 28px 0;
        gap: 16px;
    }

    .process-step-number {
        width: 48px;
        height: 48px;
        font-size: 1.125rem;
        box-shadow: 0 0 0 3px white, 0 4px 12px rgba(0, 163, 120, 0.2);
    }

    .process-step-content {
        padding-top: 4px;
    }

    .process-step-content h3 {
        font-size: 1.0625rem;
        margin-bottom: 8px;
    }

    .process-step-content p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* ===== Home Page: How It Works (Refined) ===== */
.home-process-section {
    padding: 96px 0;
    background: #f8fafc;
}

.home-process-section .section-header {
    margin-bottom: 28px;
}

.home-process-section .section-title {
    margin-bottom: 12px;
}

.home-process-section .section-subtitle {
    max-width: 640px;
    margin: 0 auto;
}

.home-process-section .process-flow {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 8px;
    max-width: 1220px;
    margin: 0 auto;
    padding: 28px 0 0;
    position: relative;
}

.home-process-section .process-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    position: relative;
    z-index: 2;
}

.home-process-section .process-flow-arrow i {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid #b8dfd3;
    background: #e8f7f1;
    color: #00a378;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
}

.home-process-section .process-flow-arrow::before,
.home-process-section .process-flow-arrow::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 14px;
    height: 1px;
    background: #a9d9c9;
    transform: translateY(-50%);
}

.home-process-section .process-flow-arrow::before {
    left: -14px;
}

.home-process-section .process-flow-arrow::after {
    right: -14px;
}

.home-process-section .process-step {
    background: #ffffff;
    border: 1px solid #d6e2ee;
    border-radius: 18px;
    padding: 22px 20px 20px;
    min-height: 214px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.home-process-section .process-step[data-step="02"],
.home-process-section .process-step[data-step="04"] {
    background: #f6fbff;
}

.home-process-section .process-step[data-step="03"] {
    background: #f5fcf9;
}

.home-process-section .process-step:hover {
    transform: translateY(-4px) !important;
    border-color: #b8cfe4;
    box-shadow: 0 10px 24px rgba(29, 54, 78, 0.08) !important;
}

.home-process-section .process-step-number {
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 50%;
    background: var(--primary);
    color: #ffffff;
    font-size: 1.375rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 4px #f8fafc, 0 3px 12px rgba(0, 163, 120, 0.2);
}

.home-process-section .process-step-content {
    max-width: 240px;
}

.home-process-section .process-step-content h3 {
    margin: 0 0 8px;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: #1d364e;
}

.home-process-section .process-step-content p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.55;
    color: #4f5f71;
}

@media (max-width: 1120px) {
    .home-process-section {
        padding: 84px 0;
    }

    .home-process-section .process-flow {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 760px;
        padding-top: 10px;
    }

    .home-process-section .process-flow-arrow {
        min-height: 28px;
    }

    .home-process-section .process-flow-arrow i {
        transform: rotate(90deg);
    }

    .home-process-section .process-flow-arrow::before,
    .home-process-section .process-flow-arrow::after {
        width: 1px;
        height: 10px;
        left: 50%;
        top: auto;
        transform: translateX(-50%);
    }

    .home-process-section .process-flow-arrow::before {
        bottom: 100%;
    }

    .home-process-section .process-flow-arrow::after {
        top: 100%;
        right: auto;
    }

    .home-process-section .process-step {
        min-height: 0;
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        gap: 14px;
        padding: 18px 16px;
    }

    .home-process-section .process-step-number {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
        font-size: 1.125rem;
        flex-shrink: 0;
    }

    .home-process-section .process-step-content {
        max-width: none;
    }

    .home-process-section .process-step-content h3 {
        font-size: 1.125rem;
        margin-bottom: 6px;
    }

    .home-process-section .process-step-content p {
        font-size: 0.9375rem;
        line-height: 1.5;
    }
}

@media (max-width: 768px) {
    .home-process-section {
        padding: 72px 0;
    }

    .home-process-section .process-flow {
        max-width: 100%;
    }

    .home-process-section .process-step {
        padding: 16px 14px;
    }

    .home-process-section .process-step-number {
        width: 40px;
        height: 40px;
        font-size: 1rem;
    }

    .home-process-section .process-step-content h3 {
        font-size: 1.0625rem;
        margin-bottom: 6px;
    }

    .home-process-section .process-step-content p {
        font-size: 0.875rem;
        line-height: 1.5;
    }
}

/* ===== Why Choose Us / Differentiators - Accent Border Style ===== */
.differentiators-workflow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 900px;
    margin: 0 auto;
}

.diff-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 28px;
    border-left: 3px solid var(--primary);
    background: #f0f4f8;
    border-radius: 0 12px 12px 0;
    transition: all 0.25s ease;
}

.diff-item:hover {
    background: #e8eef4;
    border-left-color: #008f68;
}

.diff-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(0, 163, 120, 0.1);
    color: var(--primary);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.diff-content {
    flex: 1;
}

.diff-content h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--navy);
    margin: 0 0 6px;
    line-height: 1.3;
}

.diff-content p {
    font-size: 0.875rem;
    line-height: 1.55;
    color: var(--text-secondary);
    margin: 0;
}

@media (max-width: 768px) {
    .differentiators-workflow {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .diff-item {
        padding: 20px 24px;
        min-height: 100px;
        align-items: flex-start;
    }

    .diff-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .diff-content h3 {
        font-size: 0.8125rem !important;
    }

    .diff-content p {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
    }
}

@media (max-width: 480px) {
    .diff-item {
        padding: 16px 20px;
        gap: 14px;
        min-height: 90px;
        align-items: flex-start;
    }

    .diff-icon {
        width: 36px;
        height: 36px;
        font-size: 0.875rem;
        flex-shrink: 0;
    }

    .diff-content {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
    }

    .diff-content h3 {
        font-size: 0.8125rem !important;
    }

    .diff-content p {
        font-size: 0.75rem !important;
    }
}

/* ===== About Preview Section - Dark Style ===== */
.about-dark-section {
    padding: 80px 0 !important;
    background: var(--navy);
    position: relative;
    overflow: hidden;
}

.about-dark-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 163, 120, 0.08), transparent 70%);
    pointer-events: none;
}

.about-dark-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 64px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
}

.about-dark-text h2 {
    font-size: 2rem;
    font-weight: 800;
    color: white;
    margin: 0 0 20px;
    line-height: 1.3;
}

.about-dark-text p {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.65);
    margin: 0 0 16px;
}

.about-dark-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    color: var(--primary);
    font-weight: 600;
    font-size: 0.9375rem;
    text-decoration: none;
    transition: all 0.2s ease;
}

.about-dark-link:hover {
    color: #00d2a5;
    gap: 12px;
}

.about-dark-stats {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-dark-stat {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 24px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.about-dark-stat:first-child {
    padding-top: 0;
}

.about-dark-stat:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.about-dark-stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    min-width: 100px;
}

.about-dark-stat-label {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

@media (max-width: 968px) {
    .about-dark-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-dark-stats {
        flex-direction: row;
        gap: 0;
        justify-content: space-between;
    }

    .about-dark-stat {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 4px;
        padding: 0;
        border-bottom: none;
        flex: 1;
    }

    .about-dark-stat-value {
        min-width: auto;
    }
}

@media (max-width: 768px) {
    .about-dark-section {
        padding: 60px 0 !important;
    }

    .about-dark-text h2 {
        font-size: 1.5rem;
    }

    .about-dark-text p {
        font-size: 0.75rem !important;
        line-height: 1.5 !important;
    }

    .about-dark-stat-value {
        font-size: 1.5rem;
    }

    .about-dark-stat-label {
        font-size: 0.75rem;
    }

    .about-dark-link {
        font-size: 0.8125rem;
    }
}

@media (max-width: 480px) {
    .about-dark-text h2 {
        font-size: 1.25rem;
    }

    .about-dark-stat-value {
        font-size: 1.25rem;
    }

    .about-dark-stat-label {
        font-size: 0.75rem;
    }
}

/* ============================================
   COLLABORATORS / INTEGRATIONS CAROUSEL (From Hello Page)
   ============================================ */
.collaborators {
    padding: 60px 0;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
    overflow: hidden;
}

.collaborators-title {
    text-align: center;
    font-size: 0.9375rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-bottom: 32px;
    letter-spacing: normal;
}

.carousel-wrapper {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    width: 100%;
}

.carousel-track {
    display: flex;
    gap: 60px;
    width: max-content;
    animation: scroll 40s linear infinite;
}

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

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.partner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 100px;
    opacity: 0.65;
    transition: opacity 0.3s ease;
}

.partner-item:hover {
    opacity: 1;
}

.partner-logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.partner-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 4px;
}

/* Mobile Adjustments for Carousel */
@media (max-width: 768px) {
    .collaborators {
        padding: 40px 0;
    }

    .carousel-track {
        gap: 40px;
        animation-duration: 30s;
        /* Slightly faster on mobile due to shorter width */
    }

    .partner-logo {
        height: 28px;
    }

    .partner-name {
        font-size: 0.65rem;
    }
}

/* ============================================
   TYPOGRAPHY NORMALIZATION (SITEWIDE)
   Final pass to keep text sizing consistent across pages.
   ============================================ */

/* Primary heading/description rhythm */
.hero-title {
    font-size: clamp(2.15rem, 3.2vw, 3rem) !important;
    line-height: 1.2 !important;
}

.hero-description {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
}

.section-title {
    font-size: clamp(2rem, 3vw, 2.5rem) !important;
    line-height: 1.2 !important;
}

.section-subtitle {
    font-size: 1.0625rem !important;
    line-height: 1.65 !important;
}

.bento-card-v2 h3,
.bento-text h3 {
    font-size: 1.125rem !important;
    line-height: 1.35 !important;
}

.bento-card-v2 p,
.bento-text p {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

.bento-tags-grid span {
    font-size: 0.75rem !important;
}

.faq-item summary,
.faq-item summary h3 {
    font-size: 1rem !important;
    line-height: 1.45 !important;
}

.faq-item p {
    font-size: 0.95rem !important;
    line-height: 1.65 !important;
}

.cta-banner-title {
    font-size: 1.875rem !important;
}

.cta-banner-subtitle {
    font-size: 1rem !important;
    line-height: 1.65 !important;
}

/* Navbar/link text consistency */
.nav-link,
.dropdown-item {
    font-size: 0.95rem !important;
}

/* Card-like metadata text consistency */
.security-badge h3 {
    font-size: 1rem !important;
}

.security-badge small {
    font-size: 0.875rem !important;
    line-height: 1.55 !important;
}

.blog-preview-title {
    font-size: 1rem !important;
    line-height: 1.4 !important;
}

.blog-preview-excerpt {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
}

.blog-preview-link {
    font-size: 0.875rem !important;
}

.integration-footer-note {
    max-width: 780px;
    margin: 24px auto 0;
    text-align: center;
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.integration-footer-note .integration-note-accent {
    color: var(--primary);
    font-weight: 600;
}

/* Mobile normalization */
@media (max-width: 768px) {
    .hero-title {
        font-size: 1.875rem !important;
        line-height: 1.25 !important;
    }

    .hero-description {
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
    }

    .section-title {
        font-size: 1.5rem !important;
    }

    .section-subtitle {
        font-size: 0.9375rem !important;
        line-height: 1.6 !important;
    }

    .bento-card-v2 h3,
    .bento-text h3 {
        font-size: 0.9375rem !important;
    }

    .bento-card-v2 p,
    .bento-text p {
        font-size: 0.8125rem !important;
        line-height: 1.55 !important;
    }

    .bento-tags-grid span {
        font-size: 0.6875rem !important;
    }

    .faq-item summary,
    .faq-item summary h3 {
        font-size: 0.95rem !important;
    }

    .faq-item p {
        font-size: 0.875rem !important;
    }

    .cta-banner-title {
        font-size: 1.5rem !important;
    }

    .cta-banner-subtitle {
        font-size: 0.95rem !important;
    }

    .mobile-menu-links a {
        font-size: 1rem !important;
    }

    .security-badge h3 {
        font-size: 0.8125rem !important;
    }

    .security-badge small {
        font-size: 0.75rem !important;
    }

    .blog-preview-title {
        font-size: 0.875rem !important;
    }

    .blog-preview-link {
        font-size: 0.75rem !important;
    }

    .integration-footer-note {
        margin-top: 20px;
        font-size: 0.8125rem;
    }
}

/* Hide eyebrow-style header labels across pages */
.section-label,
.opx-kicker,
.opx-runtime-tag,
.opx-row-tag,
.sales-track-tag,
.sales-layer-label,
.sales-inbound-tag,
.sales-journey-tag,
[class*="eyebrow"] {
    display: none !important;
}

/* ============================================================
   UI Simplification Overrides
   - Remove non-essential shadows
   - Keep hover effects only for CTAs
   ============================================================ */

:root {
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
}

*,
*::before,
*::after {
    box-shadow: none !important;
    text-shadow: none !important;
}

@media (hover: hover) {

    :where(*):not(.btn):not(.btn *):not(.cta-banner-btn):not(.cta-banner-btn *):not(.nav-cta-btn):not(.nav-cta-btn *):not(.footer-cta-primary):not(.footer-cta-primary *):not(.aiwah-booking-btn):not(.aiwah-booking-btn *):not([data-cal-link]):not([data-cal-link] *):not(#aiwah-chat-toggle):not(#aiwah-chat-toggle *):hover {
        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        animation: none !important;
    }
}