:root {
    /* Core Dark Mode Colors */
    --bg-navy: #0B1426;
    --bg-secondary-dark: #0F1B33;
    --bg-black: #0B1426;
    --bg-darker: #0B1426;
    --bg-card: #0F1B33;
    --border-color: rgba(228, 233, 242, 0.12);
    --border-dark: rgba(228, 233, 242, 0.12);
    
    /* Light Mode Tokens */
    --bg-light: #FFFFFF;
    --bg-light-alt: #F6F8FB;
    --border-light: #E4E9F2;
    
    /* Text on Dark */
    --text-white: #FFFFFF;
    --text-heading-dark: #FFFFFF;
    --text-body-dark: #A9B8CE;
    --text-body-dark-alt: #C7D3E8;
    --text-muted: #8494B0;
    --text-muted-dark: #8494B0;
    
    /* Text on Light */
    --text-heading-light: #0B1426;
    --text-body-light: #52607A;
    
    /* Accent (Teal) System */
    --accent-teal: #5EEAD4;
    --accent-teal-hover: #2dd4bf;
    --accent-teal-dark: #0F766E;
    --accent-tint-1: #DDF6F1;
    --accent-tint-2: #E6F7F3;
    --accent-blue: #5EEAD4;
    --accent-glow: rgba(94, 234, 212, 0.35);
    
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-display: 'Montserrat', sans-serif;
}

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

body, html {
    width: 100%;
    min-height: 100%;
    font-family: var(--font-sans);
    background-color: var(--bg-navy);
    color: var(--text-body-dark);
    overflow-x: hidden;
    scroll-behavior: smooth;
}

/* =========================================
   1. SPLASH SCREEN (Adaptive Light & Dark Modes)
   ========================================= */
.splash-screen {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #070A11;
    color: #FFFFFF;
    z-index: 9999999;
    overflow: hidden;
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
}

/* Splash Screen in Light Mode: Distinct, clean slate off-white with navy text */
html.light-mode .splash-screen,
body.light-mode .splash-screen {
    background-color: #F8FAFC !important;
    color: #0B1426 !important;
}

.splash-wrapper {
    position: relative;
    width: min(380px, 86vw);
    aspect-ratio: 357 / 132;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Fluid Drop (Hits exactly the center of the 'g' top circle: x=11.8%, y=34.2%) */
.liquid-drop {
    position: absolute;
    left: 11.8%;
    top: 34.2%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 25px rgba(94, 234, 212, 0.85);
    z-index: 20;
    opacity: 0;
    transform: translateY(-40vh) scale(0.7, 1.4);
    animation: dropSplashFall 0.72s cubic-bezier(0.5, 0, 0.8, 1) forwards;
}

/* Drop in Light Mode: deep rich emerald teal */
html.light-mode .liquid-drop,
body.light-mode .liquid-drop {
    background: #0F766E !important;
    box-shadow: 0 4px 18px rgba(15, 118, 110, 0.45) !important;
}

@keyframes dropSplashFall {
    0% {
        transform: translateY(-40vh) scale(0.7, 1.4);
        opacity: 0;
    }
    20% {
        opacity: 1;
    }
    75% {
        transform: translateY(0) scale(0.9, 1.15);
        opacity: 1;
    }
    90% {
        transform: translateY(2px) scale(1.4, 0.5);
        opacity: 1;
    }
    100% {
        transform: translateY(4px) scale(0, 0);
        opacity: 0;
        visibility: hidden;
    }
}

/* Shockwave Ripple upon drop impact */
.splash-ripple {
    position: absolute;
    left: 11.8%;
    top: 34.2%;
    width: 32px;
    height: 32px;
    margin-left: -16px;
    margin-top: -16px;
    border-radius: 50%;
    border: 2px solid rgba(94, 234, 212, 0.85);
    pointer-events: none;
    z-index: 15;
    opacity: 0;
    transform: scale(0.2);
}

html.light-mode .splash-ripple,
body.light-mode .splash-ripple {
    border-color: rgba(15, 118, 110, 0.8) !important;
}

.splash-ripple.active {
    animation: splashRippleShock 0.7s cubic-bezier(0.1, 0.7, 0.3, 1) forwards;
}

@keyframes splashRippleShock {
    0% {
        opacity: 0.9;
        transform: scale(0.4);
    }
    100% {
        opacity: 0;
        transform: scale(3.5);
    }
}

/* Splash SVG Logo */
.splash-logo {
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 10;
}

/* 'g' Emblem */
.splash-icon-group {
    opacity: 0;
    transform: scale(0.7);
    transform-origin: 42px 45px;
    transition: opacity 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    color: #FFFFFF;
}

html.light-mode .splash-icon-group,
body.light-mode .splash-icon-group {
    color: #000000 !important;
    fill: #000000 !important;
}

html.light-mode .splash-icon-group path,
body.light-mode .splash-icon-group path {
    fill: #000000 !important;
}

.splash-icon-group.visible {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 16px rgba(94, 234, 212, 0.4));
}

html.light-mode .splash-icon-group.visible,
body.light-mode .splash-icon-group.visible {
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.12)) !important;
}

/* "GOOD MEETINGS" Wordmark */
.splash-text-group {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    color: #FFFFFF;
}

html.light-mode .splash-text-group,
body.light-mode .splash-text-group {
    color: #0B1426 !important;
}

.splash-text-group.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Exit Fade Out */
.splash-screen.fade-out {
    opacity: 0;
    visibility: hidden;
    pointer-events: none !important;
    transform: scale(1.04);
    transition: opacity 0.75s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.75s, transform 0.75s cubic-bezier(0.4, 0, 0.2, 1);
}


/* =========================================
   2. MAIN CONTENT WRAPPER
   ========================================= */
.main-content {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: 70px; /* Space for the sticky navigation bar */
}

body:not(:has(#splash-screen)) .main-content,
.main-content.visible {
    opacity: 1 !important;
    transform: none !important; /* Clears transform context so fixed navbar adheres to viewport */
}

.hidden {
    display: none !important;
}


/* =========================================
   3. NAVIGATION BAR (Floating Pill / Button Bar)
   ========================================= */
.navbar {
    position: fixed;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 36px));
    height: 60px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.08) 0%, rgba(15, 27, 51, 0.85) 45%, rgba(11, 20, 38, 0.95) 100%);
    backdrop-filter: blur(28px) saturate(190%);
    -webkit-backdrop-filter: blur(28px) saturate(190%);
    border: 2px solid rgba(228, 233, 242, 0.15);
    border-radius: 9999px;
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 2px 3px rgba(255, 255, 255, 0.22), inset 0 -2px 4px rgba(0, 0, 0, 0.4);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0 10px 0 20px;
}

.navbar.scrolled {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(15, 27, 51, 0.95) 45%, rgba(11, 20, 38, 0.98) 100%);
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 25px 65px -8px rgba(0, 0, 0, 0.85), 0 0 28px rgba(94, 234, 212, 0.25), inset 0 2px 3px rgba(255, 255, 255, 0.32);
    transform: translateX(-50%) translateY(-2px);
}

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

.nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--text-white);
    padding: 6px 12px 6px 4px;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.nav-logo:hover {
    background: rgba(255, 255, 255, 0.06);
}

.nav-logo-icon {
    width: 21px;
    height: 28px;
    flex-shrink: 0;
}

.nav-logo-text {
    font-family: var(--font-display);
    font-weight: 900;
    font-size: 16px;
    letter-spacing: -0.5px;
}

.nav-logo-img {
    height: 32px;
    width: auto;
    max-width: 135px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-logo:hover .nav-logo-img {
    opacity: 0.92;
}

body.light-mode .nav-logo-img {
    filter: none;
}

/* Nav Links & Dropdowns */
.nav-links {
    display: flex;
    list-style: none;
    gap: 8px;
    height: 100%;
    align-items: center;
}

.nav-item {
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.nav-item > a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 999px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item > a:hover {
    color: var(--text-white);
    background: rgba(255, 255, 255, 0.08);
}

/* Dropdown Base */
.dropdown {
    position: absolute;
    top: calc(100% + 12px); /* Below floating button bar */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background: linear-gradient(135deg, rgba(20, 26, 46, 0.95) 0%, rgba(10, 15, 29, 0.98) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    padding: 24px;
    display: flex;
    gap: 32px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), inset 0 1px 2px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
    z-index: 1001;
}

.nav-item.has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown.mega-menu {
    width: 800px;
}

.dropdown.single-col {
    width: 240px;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
}

.dropdown-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dropdown-col h4 {
    color: var(--text-white);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    opacity: 0.8;
}

.dropdown-col a, .dropdown.single-col a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s ease;
}

.dropdown-col a:hover, .dropdown.single-col a:hover {
    color: var(--text-white);
}

/* Services & Case Studies Menu (Matching Reference Image Pixel-Perfect) */
.dropdown.services-menu,
.dropdown.case-studies-menu {
    width: 440px;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: #0B1426 !important;
    border: 1px solid rgba(228, 233, 242, 0.14);
    border-radius: 22px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 40px rgba(94, 234, 212, 0.1);
    backdrop-filter: blur(30px);
    -webkit-backdrop-filter: blur(30px);
}

.service-dropdown-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    background: transparent;
}

.service-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.05);
    transform: translateX(4px);
}

.service-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #0F2538;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5EEAD4;
    flex-shrink: 0;
    transition: all 0.25s ease;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

.service-dropdown-item:hover .service-icon-box {
    background: rgba(94, 234, 212, 0.18);
    color: #5EEAD4;
    transform: scale(1.05);
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.25);
}

.service-text-content {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.service-title {
    font-size: 16px;
    font-weight: 750;
    color: #FFFFFF;
    margin-bottom: 4px;
    line-height: 1.25;
    letter-spacing: -0.015em;
    transition: color 0.2s ease;
}

.service-dropdown-item:hover .service-title {
    color: #5EEAD4;
}

.service-desc {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.4;
    font-weight: 400;
}

/* Pricing Menu Specifics */
.dropdown.pricing-menu {
    width: 600px;
}
.pricing-col p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}
.pricing-col ul {
    list-style: none;
    font-size: 13px;
    color: var(--text-muted);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pricing-col ul li {
    display: flex;
    gap: 8px;
}

/* Auth & Action Buttons inside Floating Navbar */
.nav-auth {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-login {
    color: var(--text-white);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    transition: background 0.2s ease;
}

.nav-login:hover {
    background: rgba(255, 255, 255, 0.08);
}

.nav-signup {
    padding: 8px 18px;
    font-size: 13.5px;
    font-weight: 700;
    border-radius: 999px;
    background: #5EEAD4;
    color: #0B1426;
    border: none;
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-signup:hover {
    transform: translateY(-1px) scale(1.02);
    background: #2dd4bf;
    box-shadow: 0 6px 22px rgba(94, 234, 212, 0.5);
    opacity: 1;
}

/* Common Buttons */
.btn-primary {
    background-color: #5EEAD4;
    color: #0B1426;
    text-decoration: none;
    font-weight: 700;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.3);
    transition: transform 0.2s ease, opacity 0.2s ease, background-color 0.2s ease;
}

.btn-primary:hover {
    transform: translateY(-1px);
    background-color: #2dd4bf;
    opacity: 0.95;
}

.btn-secondary {
    background-color: transparent;
    color: var(--text-white);
    border: 1px solid var(--border-color);
    text-decoration: none;
    font-weight: 600;
    border-radius: 99px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.2s ease;
}

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

.small-btn {
    padding: 10px 16px;
    font-size: 14px;
    justify-content: center;
}

.large-btn {
    padding: 12px 24px;
    font-size: 15px;
}


/* =========================================
   4. HERO SECTION
   ========================================= */
main {
    padding-top: 85px; /* Clean spacing for 70px fixed navbar */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.hero {
    position: relative;
    width: 100%;
    max-width: 1400px;
    padding: 16px 24px 40px; /* Elevated and compact spacing */
    margin: 0 auto;
    z-index: 1;
    overflow: hidden; /* Clips background waves to prevent horizontal scroll */
}

.hero-split-container {
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Centerpiece Architecture Diagram & Waves Showcase */
.hero-showcase-centerpiece {
    position: relative;
    width: 100%;
    max-width: 1360px;
    margin: 48px auto 36px;
    min-height: 520px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 28px;
    background: #030712;
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding: 60px 48px;
    box-sizing: border-box;
}

html.light-mode .hero-showcase-centerpiece,
body.light-mode .hero-showcase-centerpiece {
    background: #030712 !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 25px 70px -15px rgba(0, 0, 0, 0.8) !important;
}

.centerpiece-waves-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.centerpiece-bg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
}

/* Main Diagram Layout Grid */
.cp-diagram-container {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1240px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
}

/* Column Eyebrow Labels */
.cp-col-eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: #94A3B8;
    margin-bottom: 22px;
}

/* LEFT COLUMN: Customer Touchpoints (4 Points) */
.cp-touchpoints-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 260px;
    width: 260px;
    z-index: 6;
}

.cp-touchpoints-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.cp-touchpoint-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    background: #080C1A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 10px 22px 10px 12px;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    box-sizing: border-box;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
    user-select: none;
}

.cp-touchpoint-card:hover {
    transform: translateX(4px);
    border-color: rgba(192, 132, 252, 0.35);
    box-shadow: 0 10px 28px -4px rgba(168, 85, 247, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.cp-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(168, 85, 247, 0.08);
    border: 1.5px solid rgba(168, 85, 247, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.18);
}

.cp-card-label {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

/* CENTER COLUMN: Intelligence Layer Orb */
.cp-center-orb-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 0 0 320px;
    width: 320px;
    z-index: 6;
}

.cp-orb-box {
    position: relative;
    width: 260px;
    height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cp-orb-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cp-center-g {
    position: absolute;
    width: 76px;
    height: 104px;
    z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.7));
}

.cp-orb-caption {
    margin-top: 24px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #CBD5E1;
    text-align: center;
    white-space: nowrap;
    opacity: 0.95;
}

/* RIGHT COLUMN: What It Leads To (3 Points) */
.cp-outcomes-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 0 0 350px;
    width: 350px;
    z-index: 6;
}

.cp-outcomes-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
}

.cp-outcome-card {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    background: #080C1A;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 9999px;
    padding: 12px 26px 12px 14px;
    box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.06);
    text-decoration: none;
    box-sizing: border-box;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.cp-outcome-card:hover {
    transform: translateX(4px);
    box-shadow: 0 12px 30px -4px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

.cp-outcome-card.card-purple:hover {
    border-color: rgba(192, 132, 252, 0.45);
    box-shadow: 0 12px 30px -4px rgba(168, 85, 247, 0.25);
}

.cp-outcome-card.card-blue:hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 12px 30px -4px rgba(56, 189, 248, 0.25);
}

.cp-outcome-card.card-green:hover {
    border-color: rgba(52, 211, 153, 0.45);
    box-shadow: 0 12px 30px -4px rgba(52, 211, 153, 0.25);
}

.cp-badge-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(8, 12, 26, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.cp-badge-circle.badge-purple {
    border: 1.5px solid #A855F7;
    color: #D8B4FE;
    background: rgba(168, 85, 247, 0.1);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.25);
}

.cp-badge-circle.badge-blue {
    border: 1.5px solid #0EA5E9;
    color: #38BDF8;
    background: rgba(14, 165, 233, 0.1);
    box-shadow: 0 0 12px rgba(14, 165, 233, 0.25);
}

.cp-badge-circle.badge-green {
    border: 1.5px solid #10B981;
    color: #34D399;
    background: rgba(16, 185, 129, 0.1);
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.25);
}

.cp-outcome-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.cp-outcome-tag {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.cp-outcome-tag.tag-purple {
    color: #C084FC;
}

.cp-outcome-tag.tag-blue {
    color: #38BDF8;
}

.cp-outcome-tag.tag-green {
    color: #34D399;
}

.cp-outcome-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.hero-split-grid {
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.hero-copy-col {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    align-self: center;
}

.hero-copy-col .hero-eyebrow-badge {
    margin-bottom: 16px;
}

.hero-copy-col .hero-main-title {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    text-align: left;
}

.hero-copy-col .hero-main-sub {
    font-size: 15.5px;
    color: var(--text-gray);
    line-height: 1.55;
    margin: 0 0 24px 0;
    text-align: left;
    max-width: 530px;
}

.hero-copy-col .hero-buttons {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: flex-start;
    margin-bottom: 0;
}

/* Minimized Glowing 'g' Logo Ecosystem on Left Side */
.hero-mini-ecosystem {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 22px;
    padding: 10px 16px 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    max-width: 100%;
}

.hero-mini-glow-orb {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-mini-glow-orb::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(180, 41, 249, 0.6) 0%, rgba(94, 234, 212, 0.35) 50%, transparent 75%);
    filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    animation: miniOrbPulse 3.5s ease-in-out infinite alternate;
}

@keyframes miniOrbPulse {
    0% { transform: scale(0.9); opacity: 0.6; }
    100% { transform: scale(1.15); opacity: 1; }
}

.hero-mini-orb-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.hero-mini-g-icon {
    position: relative;
    width: 30px;
    height: 36px;
    z-index: 2;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.6));
}

.hero-mini-pillars-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.hero-mini-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    color: var(--text-white);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}

.hero-mini-pill:hover {
    background: rgba(94, 234, 212, 0.18);
    border-color: rgba(94, 234, 212, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(94, 234, 212, 0.25);
    color: #ffffff;
}

.mini-pill-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
}

.mini-pill-icon.icon-purple {
    background: rgba(94, 234, 212, 0.15);
}

.mini-pill-icon.icon-blue {
    background: rgba(94, 234, 212, 0.15);
}

.mini-pill-icon.icon-green {
    background: rgba(16, 185, 129, 0.15);
}

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

.hero-mockup-frame {
    position: relative;
    width: 100%;
    border-radius: 20px;
    padding: 2px;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.4) 0%, rgba(94, 234, 212, 0.3) 50%, rgba(255, 255, 255, 0.08) 100%);
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(94, 234, 212, 0.18);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.hero-mockup-frame:hover {
    transform: translateY(-6px) scale(1.01);
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.75), 0 0 50px rgba(94, 234, 212, 0.28);
}

.hero-mockup-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at 60% 40%, rgba(94, 234, 212, 0.22) 0%, rgba(94, 234, 212, 0.15) 50%, transparent 70%);
    filter: blur(40px);
    z-index: -1;
    pointer-events: none;
}

.hero-mockup-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 18px;
    background: #0b0f19;
}

.hero-container.stacked-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    overflow: visible !important;
}

.hero-pills-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.hero-center-glow {
    position: relative;
    width: 240px;
    height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

.hero-center-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(192, 38, 211, 0.45) 0%, rgba(56, 189, 248, 0.35) 45%, transparent 70%);
    filter: blur(28px);
    z-index: 0;
    pointer-events: none;
    animation: orbPulse 4s ease-in-out infinite alternate;
}

.hero-orb-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;
    display: block;
    pointer-events: none;
    z-index: 2;
    overflow: visible;
}

.hero-center-g {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 102px;
    display: block;
    z-index: 5;
    pointer-events: none;
    opacity: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.6));
}

@keyframes orbPulse {
    0% { transform: translate(-50%, -50%) scale(0.9); opacity: 0.55; }
    100% { transform: translate(-50%, -50%) scale(1.15); opacity: 0.95; }
}

/* 3 Core Pillars Floating around Central Orb */
.hero-orb-pillars {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 25;
}

.hero-orb-pillar {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px 7px 10px;
    border-radius: 999px;
    background: rgba(11, 17, 32, 0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    text-decoration: none;
    pointer-events: auto;
    cursor: pointer;
    white-space: nowrap;
    opacity: 1;
    z-index: 25;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.orb-pillar-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2.5px 7.5px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
    letter-spacing: 0.02em;
}

.orb-pillar-badge.badge-purple {
    background: rgba(168, 85, 247, 0.22);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.45);
}

.orb-pillar-badge.badge-blue {
    background: rgba(56, 189, 248, 0.22);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.45);
}

.orb-pillar-badge.badge-green {
    background: rgba(16, 185, 129, 0.22);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.45);
}

.orb-pillar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}

.orb-pillar-name {
    font-size: 13.5px;
    font-weight: 600;
    color: #F8FAFC;
    letter-spacing: -0.01em;
}

/* Positions around the glowing central orb matching user reference */
.pillar-orb-01 {
    top: 50%;
    right: calc(100% + 30px);
    left: auto;
    transform: translateY(-50%);
    border-color: rgba(168, 85, 247, 0.35);
    animation: floatOrbPillar1 5s ease-in-out infinite;
}

.pillar-orb-02 {
    top: 24px;
    left: calc(100% + 35px);
    right: auto;
    transform: translateY(0);
    border-color: rgba(56, 189, 248, 0.35);
    animation: floatOrbPillar2 5.5s ease-in-out infinite 0.5s;
}

.pillar-orb-03 {
    bottom: 24px;
    left: calc(100% + 35px);
    right: auto;
    transform: translateY(0);
    border-color: rgba(16, 185, 129, 0.35);
    animation: floatOrbPillar3 6s ease-in-out infinite 1s;
}

@keyframes floatOrbPillar1 {
    0%, 100% { transform: translateY(-50%); }
    50% { transform: translateY(calc(-50% - 6px)); }
}

@keyframes floatOrbPillar2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

@keyframes floatOrbPillar3 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

.pillar-orb-01:hover {
    transform: translateY(-50%) scale(1.04) !important;
    border-color: rgba(168, 85, 247, 0.7);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(168, 85, 247, 0.4);
}

.pillar-orb-02:hover {
    transform: translateY(-4px) scale(1.04) !important;
    border-color: rgba(56, 189, 248, 0.7);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(56, 189, 248, 0.4);
}

.pillar-orb-03:hover {
    transform: translateY(4px) scale(1.04) !important;
    border-color: rgba(16, 185, 129, 0.7);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), 0 0 24px rgba(16, 185, 129, 0.4);
}

.orb-pillar-num {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

.num-purple {
    background: rgba(94, 234, 212, 0.2);
    border: 1px solid rgba(94, 234, 212, 0.4);
    color: #5EEAD4;
}

.num-blue {
    background: rgba(94, 234, 212, 0.2);
    border: 1px solid rgba(94, 234, 212, 0.4);
    color: #A9B8CE;
}

.num-green {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: #6ee7b7;
}

.orb-pillar-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-purple {
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.3);
}

.icon-blue {
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.3);
}

.icon-green {
    background: rgba(16, 185, 129, 0.15);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.orb-pillar-name {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
}

/* Mobile adjustments */
@media (max-width: 900px) {
    .hero-orb-pillars {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 24px;
        height: auto;
    }
    .pillar-orb-01, .pillar-orb-02, .pillar-orb-03 {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none !important;
        opacity: 1 !important;
        animation: none !important;
    }
}

/* Center Text Section */
.hero-center-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px;
    width: 100%;
}

.hero-main-title {
    font-size: 48px; /* Reduced from 56px for better vertical fit */
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.hero-main-sub {
    font-size: 13px;
    color: var(--text-gray);
    line-height: 1.6;
    margin: 0 auto 32px;
    max-width: 1050px;
    width: 100%;
    text-align: center;
}



/* Pager Dots (Dash + Circles) */
.pager-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 32px;
}

.dot-dash {
    width: 28px;
    height: 3px;
    background: linear-gradient(90deg, #5EEAD4, #0F766E);
    border-radius: 2px;
}

.dot-circle {
    width: 4px;
    height: 4px;
    background: rgba(255, 255, 255, 0.25);
    border-radius: 50%;
}

/* Buttons */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.btn-book-demo.glass-demo-btn {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(228, 233, 242, 0.2);
    color: #ffffff;
    padding: 14px 32px;
    border-radius: 30px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3), inset 0 0 12px rgba(255, 255, 255, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
}

.btn-book-demo.glass-demo-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #5EEAD4;
    box-shadow: 0 12px 40px rgba(94, 234, 212, 0.3), inset 0 0 20px rgba(94, 234, 212, 0.2);
    transform: translateY(-2px);
}

/* Bottom Features Bar */
.bottom-features-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 56px;
    margin-top: 80px;
    padding-top: 40px;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
    width: 100%;
}

.bottom-feature {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
}

.bf-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    color: #5EEAD4;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bf-text {
    font-size: 13px;
    color: #A9B8CE;
    line-height: 1.3;
    font-weight: 500;
}


.card-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(94, 234, 212, 0.1);
}
.icon-purple, .icon-blue, .icon-teal, .icon-orange { 
    color: #5EEAD4; 
    border: 1px solid rgba(94, 234, 212, 0.25); 
}

.card-text h4 {
    font-size: 13px;
    color: #FFFFFF;
    margin: 0;
    font-weight: 500;
    line-height: 1.2;
}

/* Background Wavy Lines */
.hero-bg-lines {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible !important;
}

/* Title & Text */
.hero-main-title {
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    opacity: 0;
}

.text-gradient {
    background: linear-gradient(90deg, #FFFFFF 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

html.light-mode .text-gradient,
body.light-mode .text-gradient {
    background: linear-gradient(90deg, #0B1426 0%, #0F766E 55%, #0D9488 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    display: inline-block;
}

.hero-main-sub {
    font-size: 18px;
    color: var(--text-gray);
    max-width: 500px;
    margin: 0 0 40px 0;
    line-height: 1.6;
    opacity: 0;
}

/* Buttons */
.hero-buttons {
    display: flex;
    gap: 16px;
}

.btn-try-free {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: linear-gradient(90deg, #0B1426, #0F766E);
    color: white;
    text-decoration: none;
    font-weight: 600;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(15, 118, 110, 0.4);
    transition: transform 0.2s;
}
.btn-try-free:hover { transform: translateY(-2px); }

.btn-book-demo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: transparent;
    color: white;
    text-decoration: none;
    font-weight: 500;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: background 0.2s;
}
.btn-book-demo:hover { background: rgba(255, 255, 255, 0.05); }

/* =========================================
   4.1 HERO ANIMATIONS (Cinematic Entrance Sequence)
   ========================================= */

/* Step 1: Center 'g' Letter Pops Up First */
.hero-center-g {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 102px;
    opacity: 1;
}
.main-content.visible .hero-center-g {
    animation: popInG 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards 0.2s;
}

@keyframes popInG {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0; }
    80% { transform: translate(-50%, -50%) scale(1.08); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* Step 2: Glowing Circle Ring & Dotted Circles Expand */
.hero-orb-svg {
    position: absolute;
    top: 0;
    left: 0;
    width: 240px;
    height: 240px;
    transform: scale(1);
    opacity: 1;
}
.main-content.visible .hero-orb-svg {
    animation: popInOrbRing 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.2) forwards 0.2s;
}

@keyframes popInOrbRing {
    0% { transform: scale(0.7); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

/* Step 3: Flowing Data Waves Flow */
.hero-bg-lines path.wave-solid {
    /* Individual path opacities are computed in JS for rich multi-layered depth */
    transition: opacity 0.4s ease;
}

/* Step 4: Floating Pills Pop Up One by One (Staggered Sequence) */
.floating-pill {
    opacity: 0;
    transform: scale(0.4);
}
/* Left Pills (Pop in sequentially with incoming stream 0.6s -> 1.2s) */
.main-content.visible .pill-l1 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.6s forwards !important; }
.main-content.visible .pill-l2 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.8s forwards !important; }
.main-content.visible .pill-l3 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.0s forwards !important; }
.main-content.visible .pill-l4 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.2s forwards !important; }

/* Right Pills (Pop in sequentially with outgoing splash 1.4s -> 2.0s) */
.main-content.visible .pill-r1 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.4s forwards !important; }
.main-content.visible .pill-r2 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.6s forwards !important; }
.main-content.visible .pill-r3 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 1.8s forwards !important; }
.main-content.visible .pill-r4 { animation: popInPill 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 2.0s forwards !important; }

@keyframes popInPill {
    0% { transform: scale(0.4); opacity: 0; }
    80% { transform: scale(1.1); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Step 5: Copy, Buttons, Mockup Frame & Showcase Slide Up */
.hero-eyebrow-badge, .hero-main-title, .hero-main-sub, .hero-buttons, .hero-mockup-frame, .hero-metrics-strip, .hero-pillars-indicator, .hero-trusted-bar, .trusted-eyebrow-container, .trusted-leaders-showcase, .bottom-features-bar {
    opacity: 0;
    transform: translateY(24px);
}
.main-content.visible .hero-eyebrow-badge { animation: slideUpContent 0.5s ease-out forwards 0.05s; }
.main-content.visible .hero-main-title { animation: slideUpContent 0.5s ease-out forwards 0.1s; }
.main-content.visible .hero-main-sub { animation: slideUpContent 0.5s ease-out forwards 0.15s; }
.main-content.visible .hero-buttons { animation: slideUpContent 0.5s ease-out forwards 0.2s; }
.main-content.visible .hero-mockup-frame { animation: slideUpContent 0.6s ease-out forwards 0.15s; }
.main-content.visible .hero-metrics-strip { animation: slideUpContent 0.5s ease-out forwards 0.25s; }
.main-content.visible .hero-pillars-indicator { animation: slideUpContent 0.5s ease-out forwards 0.3s; }
.main-content.visible .hero-trusted-bar,
.main-content.visible .trusted-eyebrow-container,
.main-content.visible .trusted-leaders-showcase { animation: slideUpContent 0.5s ease-out forwards 0.35s; }
.main-content.visible .bottom-features-bar { animation: slideUpContent 0.5s ease-out forwards 0.4s; }

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


/* =========================================
   5. TRUSTED BY SECTION
   ========================================= */
.trusted-by {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    padding: 0 24px 100px;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 100px;
}

.trusted-by p {
    font-size: 12px;
    color: var(--text-muted);
    letter-spacing: 2px;
    margin-bottom: 32px;
}

.trusted-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 60px;
    gap: 16px;
    flex-wrap: wrap;
    opacity: 0.6;
}


/* =========================================
   6. FEATURES SECTION
   ========================================= */
.features {
    width: 100%;
    max-width: 1200px;
    padding: 0 24px;
}

.feature-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.feature-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-tag {
    font-size: 12px;
    color: var(--accent-blue);
    letter-spacing: 1.5px;
    font-weight: 600;
    margin-bottom: 16px;
}

.feature-header h2 {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1px;
    margin-bottom: 20px;
}

.feature-header p {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 32px;
}

.feature-checklist {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feature-checklist li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-white);
}


/* Glass Card UI (Visuals) */
.feature-visual {
    width: 100%;
}

.glass-card {
    background-color: var(--bg-darker);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.glass-header {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.glass-header .dots {
    display: flex;
    gap: 6px;
}

.glass-header .dots span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #3f3f46;
}

.glass-title {
    font-size: 12px;
    color: var(--text-muted);
    font-family: monospace;
}

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

.step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    font-size: 14px;
    color: var(--text-muted);
    background-color: rgba(255, 255, 255, 0.02);
    transition: all 0.2s ease;
}

.step.active {
    border-color: rgba(94, 234, 212, 0.5);
    background-color: rgba(94, 234, 212, 0.05);
    color: var(--text-white);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.1);
}

/* =========================================
   7. RESPONSIVE DESIGN (MOBILE & TABLET)
   ========================================= */

/* Hide the hamburger icon by default (on desktop) */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: var(--text-white);
    cursor: pointer;
    z-index: 1002;
}

.mobile-auth-item {
    display: none;
}

@media (max-width: 1180px) and (min-width: 901px) {
    .nav-links {
        gap: 3px;
    }
    .nav-item > a {
        padding: 6px 10px;
        font-size: 12.5px;
    }
    .nav-logo-text {
        font-size: 14.5px;
    }
    .nav-auth {
        gap: 8px;
    }
    .nav-login {
        padding: 6px 10px;
        font-size: 12.5px;
    }
    .nav-signup {
        padding: 7px 14px;
        font-size: 12.5px;
    }
}

@media (max-width: 992px) {
    /* Navbar Top Bar on Mobile & Tablet */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 64px !important;
        transform: none !important;
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(228, 233, 242, 0.12) !important;
        padding: 0 16px !important;
        background: rgba(11, 20, 38, 0.94) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4) !important;
        z-index: 99999 !important;
    }

    body.light-mode .navbar {
        background: rgba(255, 255, 255, 0.96) !important;
        border-bottom: 1px solid #E2E8F0 !important;
        box-shadow: 0 4px 20px rgba(15, 23, 42, 0.06) !important;
    }

    .nav-container {
        padding: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
    }

    .nav-logo {
        padding: 4px 0 !important;
    }

    .nav-logo-img {
        height: 30px !important;
        max-height: 30px !important;
    }

    /* Right controls container on navbar */
    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 12px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(228, 233, 242, 0.18) !important;
        color: #FFFFFF !important;
        cursor: pointer !important;
        order: 3 !important;
        transition: background 0.2s, border-color 0.2s !important;
        padding: 0 !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: transparent !important;
        user-select: none !important;
        z-index: 100000 !important;
    }

    .mobile-menu-btn * {
        pointer-events: none !important;
    }

    .mobile-menu-btn:hover,
    .mobile-menu-btn:active {
        background: rgba(94, 234, 212, 0.15) !important;
        border-color: rgba(94, 234, 212, 0.35) !important;
        color: #5EEAD4 !important;
    }

    body.light-mode .mobile-menu-btn {
        background: #F1F5F9 !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    body.light-mode .mobile-menu-btn:hover,
    body.light-mode .mobile-menu-btn:active {
        background: #E2E8F0 !important;
        color: #0F766E !important;
    }

    /* Show theme toggle in top header next to hamburger */
    .nav-auth {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        order: 2 !important;
        margin-left: auto !important;
        margin-right: 10px !important;
        position: static !important;
        width: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .nav-auth .nav-login,
    .nav-auth .nav-signup {
        display: none !important;
    }

    .nav-auth .theme-toggle-btn {
        display: flex !important;
        position: relative !important;
        z-index: 100000 !important;
        cursor: pointer !important;
    }

    /* Disable desktop hover effect on mobile */
    .nav-item.has-dropdown:hover .dropdown {
        opacity: 0;
        visibility: hidden;
        transform: none;
    }

    /* Mobile Menu Dropdown Panel (Minimized sleek sheet) */
    .nav-links {
        display: none;
    }

    .nav-links.mobile-active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 64px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: calc(100dvh - 74px) !important;
        background: rgba(11, 20, 38, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        padding: 10px 14px 16px !important;
        gap: 3px !important;
        align-items: stretch !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        z-index: 99998 !important;
        border-top: 1px solid rgba(228, 233, 242, 0.08) !important;
        border-bottom: 1px solid rgba(228, 233, 242, 0.14) !important;
        border-bottom-left-radius: 20px !important;
        border-bottom-right-radius: 20px !important;
        box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 0 100vmax rgba(0, 0, 0, 0.55) !important;
        box-sizing: border-box !important;
        animation: mobileMenuDropdownSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
    }

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

    body.light-mode .nav-links.mobile-active {
        background: rgba(255, 255, 255, 0.98) !important;
        border-top: 1px solid #E2E8F0 !important;
        border-bottom: 1px solid #CBD5E1 !important;
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15), 0 0 0 100vmax rgba(15, 23, 42, 0.4) !important;
    }

    .nav-item {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        box-sizing: border-box !important;
    }

    .nav-item > a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 9px 12px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        border-radius: 10px !important;
        text-decoration: none !important;
        transition: background 0.18s, color 0.18s !important;
        box-sizing: border-box !important;
    }

    .nav-item > a:hover,
    .nav-item > a:active {
        background: rgba(255, 255, 255, 0.06) !important;
        color: #5EEAD4 !important;
    }

    body.light-mode .nav-item > a {
        color: #0F172A !important;
    }

    body.light-mode .nav-item > a:hover,
    body.light-mode .nav-item > a:active {
        background: #F1F5F9 !important;
        color: #0F766E !important;
    }

    /* Chevron Icon in Mobile Dropdowns */
    .nav-item.has-dropdown > a svg {
        transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
        flex-shrink: 0 !important;
    }

    .nav-item.has-dropdown.mobile-dropdown-active > a svg {
        transform: rotate(180deg) !important;
        color: #5EEAD4 !important;
    }

    body.light-mode .nav-item.has-dropdown.mobile-dropdown-active > a svg {
        color: #0F766E !important;
    }

    /* Override Desktop Dropdown Styles for Mobile Accordion (Minimized compact box) */
    .dropdown,
    .dropdown.services-menu,
    .dropdown.case-studies-menu,
    .dropdown.mega-menu,
    .dropdown.single-col {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        box-shadow: none !important;
        margin: 4px 0 6px 0 !important;
        padding: 5px !important;
        border-radius: 12px !important;
        display: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        background: rgba(15, 27, 51, 0.75) !important;
        border: 1px solid rgba(228, 233, 242, 0.1) !important;
    }

    body.light-mode .dropdown,
    body.light-mode .dropdown.services-menu,
    body.light-mode .dropdown.case-studies-menu {
        background: #F8FAFC !important;
        border: 1px solid #E2E8F0 !important;
    }

    /* When Accordion is Open */
    .nav-item.mobile-dropdown-active .dropdown,
    .nav-item.mobile-dropdown-active .dropdown.services-menu,
    .nav-item.mobile-dropdown-active .dropdown.case-studies-menu {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        opacity: 1 !important;
        visibility: visible !important;
        animation: mobileDropdownSlide 0.2s ease-out !important;
    }

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

    /* Minimized Compact Dropdown Item */
    .service-dropdown-item {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        padding: 8px 10px !important;
        border-radius: 9px !important;
        background: rgba(255, 255, 255, 0.03) !important;
        border: 1px solid rgba(228, 233, 242, 0.05) !important;
        text-decoration: none !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: background 0.18s, border-color 0.18s !important;
        transform: none !important;
    }

    .service-dropdown-item:hover,
    .service-dropdown-item:active,
    .service-dropdown-item.active {
        background: rgba(94, 234, 212, 0.12) !important;
        border-color: rgba(94, 234, 212, 0.28) !important;
        transform: none !important;
    }

    body.light-mode .service-dropdown-item {
        background: #FFFFFF !important;
        border: 1px solid #EEF2F6 !important;
    }

    body.light-mode .service-dropdown-item:hover,
    body.light-mode .service-dropdown-item:active,
    body.light-mode .service-dropdown-item.active {
        background: #F1F5F9 !important;
        border-color: #0F766E !important;
    }

    /* Minimized Icon Box */
    .service-icon-box {
        width: 32px !important;
        height: 32px !important;
        border-radius: 8px !important;
        background: rgba(94, 234, 212, 0.12) !important;
        color: #5EEAD4 !important;
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: none !important;
    }

    body.light-mode .service-icon-box {
        background: #E6F7F3 !important;
        color: #0F766E !important;
    }

    .service-icon-box svg {
        width: 17px !important;
        height: 17px !important;
    }

    /* Minimized Text Content */
    .service-text-content {
        display: flex !important;
        flex-direction: column !important;
        text-align: left !important;
        flex: 1 !important;
        min-width: 0 !important;
    }

    .service-title {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        margin-bottom: 1px !important;
        line-height: 1.2 !important;
    }

    body.light-mode .service-title {
        color: #0F172A !important;
    }

    .service-dropdown-item:hover .service-title {
        color: #5EEAD4 !important;
    }

    body.light-mode .service-dropdown-item:hover .service-title {
        color: #0F766E !important;
    }

    .service-desc {
        font-size: 11px !important;
        color: #94A3B8 !important;
        line-height: 1.25 !important;
        white-space: normal !important;
    }

    body.light-mode .service-desc {
        color: #64748B !important;
    }

    /* Mobile Drawer Auth Buttons (Compact Side-by-Side Row) */
    .mobile-auth-item {
        display: block !important;
        margin-top: 8px !important;
        padding-top: 10px !important;
        border-top: 1px solid rgba(228, 233, 242, 0.1) !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.light-mode .mobile-auth-item {
        border-top-color: #E2E8F0 !important;
    }

    .mobile-drawer-auth-buttons {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .mobile-drawer-login-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        color: #FFFFFF !important;
        background: rgba(255, 255, 255, 0.06) !important;
        border: 1px solid rgba(228, 233, 242, 0.15) !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        transition: background 0.18s !important;
    }

    .mobile-drawer-login-btn:hover,
    .mobile-drawer-login-btn:active {
        background: rgba(255, 255, 255, 0.12) !important;
    }

    body.light-mode .mobile-drawer-login-btn {
        background: #F1F5F9 !important;
        border-color: #CBD5E1 !important;
        color: #0F172A !important;
    }

    .mobile-drawer-signup-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        padding: 9px 12px !important;
        border-radius: 10px !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 1024px) {
    .hero-split-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: 28px;
        align-items: center;
    }

    .hero-main-title {
        font-size: clamp(34px, 4vw, 44px);
        line-height: 1.18;
    }

    .hero-mockup-frame {
        max-width: 100%;
    }

    .hero-showcase-centerpiece {
        margin: 40px auto 24px;
        min-height: 420px;
    }

    .hero-center-glow {
        width: 200px;
        height: 200px;
    }

    .hero-orb-svg {
        width: 200px;
        height: 200px;
    }

    .hero-center-g {
        width: 64px;
        height: 86px;
    }

    .pillar-orb-01 {
        left: calc(50% - 220px) !important;
    }

    .pillar-orb-02 {
        right: calc(50% - 210px) !important;
    }

    .pillar-orb-03 {
        right: calc(50% - 220px) !important;
    }
}

@media (max-width: 900px) {
    /* Mobile/Tablet Adaptive Layout */
    main {
        padding-top: 76px;
    }

    .hero {
        padding: 14px 16px 32px;
    }

    .hero-eyebrow-badge {
        max-width: 95%;
        padding: 6px 14px;
        margin: 0 auto 16px;
    }

    .hero-eyebrow-badge .badge-text {
        font-size: 11.5px;
        line-height: 1.4;
        text-align: center;
    }

    .hero-main-title {
        font-size: clamp(26px, 6.2vw, 36px);
        line-height: 1.16;
        letter-spacing: -0.025em;
        margin-bottom: 14px;
        text-align: center;
    }

    .hero-main-sub {
        font-size: 14px;
        line-height: 1.5;
        padding: 0 10px;
        margin: 0 auto 24px;
        white-space: normal !important;
        max-width: 540px;
        text-align: center;
    }

    .hero-split-grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 28px;
    }

    .hero-copy-col {
        align-items: center;
        text-align: center;
        width: 100%;
    }

    .hero-copy-col .hero-eyebrow-badge,
    .hero-copy-col .hero-main-title,
    .hero-copy-col .hero-main-sub {
        text-align: center;
    }

    .hero-copy-col .hero-buttons {
        justify-content: center;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto 20px;
        gap: 12px;
    }

    .hero-buttons > a {
        width: 100%;
        min-height: 48px;
        justify-content: center;
    }

    .hero-mini-ecosystem {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 100%;
        max-width: 440px;
        padding: 14px;
        gap: 12px;
        margin: 0 auto;
    }

    .hero-mini-pillars-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px;
    }

    .hero-mini-pill {
        font-size: 12px;
        padding: 6px 12px;
    }

    .hero-preview-col {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hero-mockup-frame {
        max-width: 100%;
        border-radius: 18px;
    }

    /* Centerpiece Waves Showcase on Mobile/Tablet */
    .hero-showcase-centerpiece {
        margin: 36px auto 20px;
        min-height: 430px;
        padding: 28px 14px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    /* Centerpiece Architecture Diagram Showcase on Mobile/Tablet */
    .hero-showcase-centerpiece {
        margin: 36px auto 20px;
        min-height: auto;
        padding: 40px 18px;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .centerpiece-waves-wrapper {
        display: none;
    }

    .cp-diagram-container {
        flex-direction: column;
        gap: 36px;
        align-items: center;
        width: 100%;
        max-width: 360px;
    }

    .cp-touchpoints-col,
    .cp-outcomes-col {
        width: 100%;
        max-width: 340px;
        align-items: center;
        flex: auto;
    }

    .cp-col-eyebrow {
        text-align: center;
        margin-bottom: 16px;
    }

    .cp-touchpoints-list,
    .cp-outcomes-list {
        width: 100%;
    }

    .cp-touchpoint-card,
    .cp-outcome-card {
        width: 100%;
        box-sizing: border-box;
    }

    .cp-center-orb-wrapper {
        width: 100%;
        flex: auto;
    }

    .cp-orb-box {
        width: 210px;
        height: 210px;
    }

    .cp-center-g {
        width: 62px;
        height: 84px;
    }

    /* Features Mobile Layout */
    .feature-container {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .feature-header h2 {
        font-size: 28px;
    }
}

/* =========================================
   8. AI CHATBOT FLOATING WIDGET
   ========================================= */
.chatbot-container {
    display: none !important;
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translateY(20px) scale(0.8);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), 
                visibility 0.6s ease;
}

.chatbot-container.visible {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Floating Tooltip Bubble */
.chatbot-tooltip {
    position: absolute;
    bottom: 72px;
    right: 0;
    white-space: nowrap;
    background: rgba(18, 18, 38, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 15px rgba(94, 234, 212, 0.25);
    padding: 8px 14px;
    border-radius: 20px;
    color: #ffffff;
    font-size: 12.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    animation: tooltipFloat 3s ease-in-out infinite;
    transition: opacity 0.3s ease, transform 0.3s ease;
    z-index: 10;
    pointer-events: auto;
}

.chatbot-tooltip::after {
    content: '';
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 10px;
    height: 10px;
    background: rgba(18, 18, 38, 0.95);
    border-right: 1px solid rgba(94, 234, 212, 0.4);
    border-bottom: 1px solid rgba(94, 234, 212, 0.4);
    transform: rotate(45deg);
}

.chatbot-tooltip.hidden {
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
}

.tooltip-sparkle {
    font-size: 13px;
    animation: sparkleSpin 2s ease-in-out infinite alternate;
}

.tooltip-close {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
    margin-left: 2px;
    border-radius: 50%;
    transition: color 0.2s;
}

.tooltip-close:hover {
    color: #ffffff;
}

@keyframes tooltipFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes sparkleSpin {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
    50% { transform: scale(1.25) rotate(15deg); opacity: 1; filter: drop-shadow(0 0 8px #5EEAD4); }
}

/* Floating Trigger Button */
.chatbot-trigger {
    position: relative;
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #5EEAD4;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #0B1426;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 32px rgba(94, 234, 212, 0.4), inset 0 0 14px rgba(255, 255, 255, 0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
}

.chatbot-trigger:hover {
    transform: scale(1.08) translateY(-2px);
    background: #2dd4bf;
    box-shadow: 0 12px 40px rgba(94, 234, 212, 0.6), 0 0 20px rgba(94, 234, 212, 0.4);
}

.chatbot-trigger-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.chatbot-trigger-icon.active-icon {
    position: absolute;
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
}

.chatbot-container.active .chatbot-trigger-icon.default-icon {
    opacity: 0;
    transform: scale(0.5) rotate(90deg);
}

.chatbot-container.active .chatbot-trigger-icon.active-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.chatbot-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #0F766E;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 10px;
    border: 2px solid #0B1426;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.4);
}

.chatbot-ping {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid #5EEAD4;
    animation: chatPing 2.5s cubic-bezier(0, 0, 0.2, 1) infinite;
    pointer-events: none;
    opacity: 0;
}

@keyframes chatPing {
    0% { transform: scale(0.95); opacity: 0.8; }
    100% { transform: scale(1.45); opacity: 0; }
}

/* Exact Chatbot Window matching dark 3D Orb design screenshot - Compact Size */
.chatbot-window {
    position: absolute;
    bottom: 72px;
    right: 0;
    width: 320px;
    height: 490px;
    background: var(--bg-secondary-dark);
    border: 1px solid rgba(228, 233, 242, 0.15);
    border-radius: 26px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.95), 0 0 35px rgba(94, 234, 212, 0.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px) scale(0.92);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: bottom right;
    color: #ffffff;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    pointer-events: auto;
}

.chatbot-window.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Header */
.chatbot-header {
    padding: 16px 16px 8px;
    background: var(--bg-secondary-dark);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.chatbot-title {
    font-size: 14.5px;
    font-weight: 600;
    color: #ffffff;
    flex: 1;
    text-align: center;
    margin-left: 20px;
}

.chatbot-menu-btn {
    background: transparent;
    border: none;
    color: #8494B0;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.chatbot-menu-btn:hover {
    color: #ffffff;
}

/* Messages Body */
.chatbot-messages {
    flex: 1;
    padding: 8px 14px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    scroll-behavior: smooth;
}

.chatbot-messages::-webkit-scrollbar {
    width: 4px;
}

.chatbot-messages::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Bot Message Layout */
.chat-message {
    display: flex;
    gap: 10px;
    max-width: 90%;
}

.chat-message.bot-message {
    align-self: flex-start;
}

.chat-message.user-message {
    align-self: flex-end;
    justify-content: flex-end;
}

.bot-avatar-orb {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 12px rgba(94, 234, 212, 0.7), inset 0 2px 4px rgba(255, 255, 255, 0.6);
    flex-shrink: 0;
    margin-top: 2px;
}

.msg-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.user-message .msg-body {
    align-items: flex-end;
}

.bot-message .message-content {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    color: #ffffff;
    border-radius: 15px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

.user-message .message-content {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    color: #ffffff;
    border-radius: 15px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.4;
    font-weight: 400;
}

.message-time {
    font-size: 10px;
    color: #8494B0;
    display: flex;
    align-items: center;
    gap: 4px;
}

.user-message .message-time {
    color: #5EEAD4;
    justify-content: flex-end;
}

.check-icon {
    display: inline-block;
}

/* Speak with GoodMeetings AI Pill Button */
.speak-pill-btn {
    background: #0F1B33;
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: 18px;
    padding: 10px 14px;
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    transition: all 0.25s ease;
    margin: 2px 0;
}

.speak-pill-btn:hover {
    border-color: #5EEAD4;
    background: #0F1B33;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.3);
    transform: translateY(-1px);
}

/* Typing Indicator Animation */
.typing-indicator {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #0F1B33;
    border-radius: 12px;
}

.typing-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5EEAD4;
    animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes typingBounce {
    0%, 80%, 100% { transform: scale(0); opacity: 0.4; }
    40% { transform: scale(1); opacity: 1; }
}

/* Bottom Footer Area */
.chatbot-footer-area {
    padding: 10px 14px 16px;
    background: #0b0c10;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Book a Demo Button */
.cta-demo-btn {
    width: 100%;
    background: #5b50f6;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    padding: 11px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 4px 16px rgba(91, 80, 246, 0.4);
}

.cta-demo-btn:hover {
    background: #4c41f3;
    box-shadow: 0 6px 20px rgba(91, 80, 246, 0.6);
    transform: translateY(-1px);
}

/* Dark Pill Input Capsule */
.chatbot-input-capsule {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #15161f;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 8px 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.chatbot-input-capsule:focus-within {
    border-color: rgba(139, 92, 246, 0.6);
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.25);
}

.sparkle-icon {
    display: flex;
    align-items: center;
}

.chatbot-input-capsule input {
    flex: 1;
    background: transparent;
    border: none;
    color: #ffffff;
    font-size: 13px;
    outline: none;
}

.chatbot-input-capsule input::placeholder {
    color: #64748b;
}

.voice-assistant-btn {
    position: relative;
    background: transparent;
    border: none;
    color: #8b5cf6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.voice-assistant-btn:hover {
    transform: scale(1.1);
    background: rgba(139, 92, 246, 0.15);
}

.mic-pulse-ring {
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid #ef4444;
    opacity: 0;
    pointer-events: none;
}

.voice-assistant-btn.listening {
    color: #ef4444;
    animation: voicePulse 1s infinite alternate;
}

.voice-assistant-btn.listening .mic-pulse-ring {
    animation: micRingExpand 1.5s infinite ease-out;
}

/* Voice Active Overlay Banner */
.voice-active-overlay {
    background: linear-gradient(135deg, rgba(24, 25, 34, 0.95), rgba(46, 26, 77, 0.95));
    border: 1px solid rgba(94, 234, 212, 0.4);
    border-radius: 16px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(139, 92, 246, 0.25);
    transition: all 0.3s ease;
}

.voice-active-overlay.hidden {
    display: none;
}

.voice-wave-status {
    display: flex;
    align-items: center;
    gap: 8px;
}

.voice-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 10px #ef4444;
    animation: pulseDot 1s infinite alternate;
}

@keyframes pulseDot {
    0% { opacity: 0.4; transform: scale(0.8); }
    100% { opacity: 1; transform: scale(1.2); }
}

.voice-status-text {
    font-size: 12px;
    font-weight: 500;
    color: #E6F7F3;
}

.voice-audio-bars {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 16px;
}

.vbar {
    width: 3px;
    height: 100%;
    background: #5EEAD4;
    border-radius: 2px;
    animation: vwave 1.2s infinite ease-in-out;
}

.vbar:nth-child(1) { animation-delay: 0.1s; }
.vbar:nth-child(2) { animation-delay: 0.3s; }
.vbar:nth-child(3) { animation-delay: 0.2s; }
.vbar:nth-child(4) { animation-delay: 0.4s; }
.vbar:nth-child(5) { animation-delay: 0.15s; }

@keyframes vwave {
    0%, 100% { height: 4px; }
    50% { height: 16px; }
}

.voice-stop-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    cursor: pointer;
    font-size: 13px;
    padding: 2px 6px;
    border-radius: 4px;
    transition: color 0.2s, background 0.2s;
}

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

@keyframes voicePulse {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes micRingExpand {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.8); opacity: 0; }
}

.chatbot-input-capsule #chatbot-send-btn {
    background: transparent;
    border: none;
    color: #8b5cf6;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    transition: transform 0.2s;
}

.chatbot-input-capsule #chatbot-send-btn:hover {
    transform: scale(1.15);
}

@media (max-width: 640px) {
    .chatbot-container {
        bottom: 16px;
        right: 16px;
    }

    .chatbot-tooltip {
        display: none !important;
    }

    .chatbot-trigger {
        width: 52px;
        height: 52px;
    }

    .chatbot-window {
        position: fixed;
        bottom: 78px;
        right: 12px;
        left: 12px;
        width: calc(100vw - 24px);
        max-width: 380px;
        height: min(480px, calc(100vh - 120px));
        margin: 0 auto;
        border-radius: 20px;
    }
}

/* ==========================================
   9. THREE PILLARS SHOWCASE SECTION
   ========================================== */
.pillars-section {
    position: relative;
    padding: 80px 24px 70px;
    max-width: 1440px;
    margin: 0 auto;
    color: #ffffff;
}

.pillars-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 20px;
}

.platform-badge {
    display: inline-block;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.3);
    color: #5EEAD4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 4px 14px;
    border-radius: 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
    box-shadow: 0 0 12px rgba(94, 234, 212, 0.2);
}

.pillars-title {
    font-size: 46px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.15;
    margin-bottom: 14px;
    color: #ffffff;
}

.pillars-title-gradient {
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.pillars-subtitle {
    font-size: 15px;
    color: #9ca3af;
    line-height: 1.6;
    margin: 0 auto;
}

.pillars-arch-wrapper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto -20px;
    position: relative;
    z-index: 3;
    pointer-events: none;
}

.pillars-arch-svg {
    width: 100%;
    height: 80px;
}

/* 3 Pillars Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: 1fr 1.35fr 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1400px;
    margin: 0 auto;
}

.pillar-column {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 12px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.pillars-section.visible .pillar-column {
    opacity: 1;
    transform: translateY(0);
}

.pillar-purple.visible { transition-delay: 0.1s; }
.pillar-blue.visible { transition-delay: 0.25s; }
.pillar-green.visible { transition-delay: 0.4s; }

/* Header Node Icon */
.pillar-node-badge {
    margin-bottom: 12px;
}

.pillar-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}

.icon-purple {
    background: linear-gradient(135deg, #5EEAD4, #0F766E);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.6);
}

.icon-blue {
    background: linear-gradient(135deg, #5EEAD4, #0F766E);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.6);
}

.icon-green {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 0 24px rgba(16, 185, 129, 0.6);
}

.pillar-name {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #ffffff;
}

.pillar-purple .pillar-name { color: #5EEAD4; }
.pillar-blue .pillar-name { color: #A9B8CE; }
.pillar-green .pillar-name { color: #6ee7b7; }

.pillar-desc {
    font-size: 13px;
    color: #9ca3af;
    line-height: 1.5;
    margin-bottom: 16px;
    max-width: 280px;
}

/* Side-by-side Image + Pills Stack Layout */
.pillar-content-flex {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    width: 100%;
    margin-top: 10px;
}

.pillar-person-card {
    width: 135px;
    flex-shrink: 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
}

.pillar-person-img {
    width: 100%;
    height: 255px;
    object-fit: cover;
    display: block;
    filter: brightness(0.9) contrast(1.05);
    border-radius: 16px;
}

.pillar-pills-stack {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pillar-pill {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 7px 10px;
    font-size: 11px;
    font-weight: 500;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    opacity: 0;
    transform: translateY(16px);
    transition: all 0.2s ease;
}

.pillars-section.visible .pillar-pill {
    animation: pointPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pillars-section.visible .pillar-pill:nth-child(1) { animation-delay: 0.25s; }
.pillars-section.visible .pillar-pill:nth-child(2) { animation-delay: 0.35s; }
.pillars-section.visible .pillar-pill:nth-child(3) { animation-delay: 0.45s; }
.pillars-section.visible .pillar-pill:nth-child(4) { animation-delay: 0.55s; }
.pillars-section.visible .pillar-pill:nth-child(5) { animation-delay: 0.65s; }
.pillars-section.visible .pillar-pill:nth-child(6) { animation-delay: 0.75s; }

.pillar-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(3px) !important;
}

.pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pill-dot.purple { background: #5EEAD4; box-shadow: 0 0 6px #5EEAD4; }
.pill-dot.green { background: #34d399; box-shadow: 0 0 6px #34d399; }

/* Center Pillar Vertical Agent Pills Stack */
.pillar-agent-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    max-width: 220px;
    margin-bottom: 20px;
}

.agent-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    color: #A9B8CE;
    display: flex;
    align-items: center;
    gap: 8px;
    opacity: 0;
    transform: translateY(16px);
}

.pillars-section.visible .agent-pill {
    animation: pointPopIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pillars-section.visible .agent-pill:nth-child(1) { animation-delay: 0.25s; }
.pillars-section.visible .agent-pill:nth-child(2) { animation-delay: 0.35s; }
.pillars-section.visible .agent-pill:nth-child(3) { animation-delay: 0.45s; }
.pillars-section.visible .agent-pill:nth-child(4) { animation-delay: 0.55s; }
.pillars-section.visible .agent-pill:nth-child(5) { animation-delay: 0.65s; }

/* Executive Overview Dashboard UI Mockup */
.executive-dashboard {
    width: 100%;
    background: #090b10;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 16px;
    text-align: left;
    box-shadow: 0 24px 60px rgba(0,0,0,0.8);
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 12px;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.dash-meta {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.dash-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    padding: 8px;
}

.stat-lbl {
    font-size: 9px;
    color: #9ca3af;
    display: block;
    margin-bottom: 4px;
}

.stat-val {
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-chart-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px;
}

.chart-labels {
    display: flex;
    justify-content: space-between;
    font-size: 8px;
    color: #6b7280;
    margin-top: 4px;
}

.sentiment-donut-wrap {
    position: relative;
    width: 60px;
    height: 60px;
    margin: 4px auto;
}

.donut-svg {
    width: 100%;
    height: 100%;
}

.donut-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 800;
    color: #ffffff;
    text-align: center;
    line-height: 1;
}

.donut-txt span {
    font-size: 7px;
    color: #9ca3af;
    display: block;
}

.donut-legend {
    font-size: 8px;
    color: #9ca3af;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 4px;
}
.dot.pos { background: #5EEAD4; }
.dot.neu { background: #6b7280; }
.dot.neg { background: #ef4444; }

.channel-rows {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 9px;
}

.ch-row {
    display: flex;
    justify-content: space-between;
    color: #9ca3af;
}

.ch-val {
    color: #ffffff;
    font-weight: 600;
}

/* Enterprise Logo Ticker Pill Container */
.enterprise-ticker-bar {
    margin-top: 50px;
    background: rgba(15, 17, 26, 0.7);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 20px 32px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.ticker-heading {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.5px;
    margin-bottom: 16px;
}

.ticker-logos-track {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.brand-logo {
    font-size: 16px;
    font-weight: 800;
    color: #e5e7eb;
    letter-spacing: -0.5px;
    opacity: 0.85;
}

.icici-i { color: #f97316; font-style: italic; font-weight: 900; }
.rp-icon { color: #06b6d4; font-size: 12px; }
.lk-icon { font-size: 12px; }
.m-dots { font-size: 9px; }
.ua-icon { font-size: 12px; }
.mmt-badge { background: #ef4444; color: #ffffff; padding: 1px 3px; border-radius: 3px; font-size: 11px; }
/* ==========================================
   10. INTEGRATIONS SHOWCASE SECTION
   ========================================== */
.integrations-section {
    position: relative;
    width: 100%;
    background: var(--bg-navy);
    padding: 100px 24px 90px;
    margin: 0 auto;
    text-align: center;
    color: #ffffff;
    overflow: hidden;
}

/* Ambient dark glow to smoothly blend with adjacent sections */
.integrations-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 900px;
    height: 480px;
    background: radial-gradient(ellipse at center, rgba(15, 118, 110, 0.16) 0%, rgba(94, 234, 212, 0.06) 45%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(90px);
}

html.light-mode .integrations-section::before,
body.light-mode .integrations-section::before {
    display: none;
}

.integrations-header {
    position: relative;
    z-index: 1;
    max-width: 850px;
    margin: 0 auto 40px;
}

.integrations-badge {
    display: inline-block;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.2px;
    padding: 4px 14px;
    border-radius: 16px;
    margin-bottom: 16px;
    text-transform: uppercase;
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.15);
}

.integrations-title {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.2;
    margin-bottom: 14px;
    color: #ffffff;
}

.integrations-title-gradient {
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.integrations-subtitle {
    font-size: 15px;
    color: #9ca3af;
    line-height: 1.6;
    margin: 0 auto;
}

.integrations-track-container {
    position: relative;
    z-index: 1;
    margin-top: 40px;
    width: 100%;
    padding: 35px 0;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}

/* Glowing Connecting Laser Line */
.laser-line {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1.5px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(94, 234, 212, 0.3) 20%, 
        rgba(94, 234, 212, 0.85) 50%, 
        rgba(56, 189, 248, 0.3) 80%, 
        transparent 100%
    );
    transform: translateY(-50%);
    z-index: 1;
    box-shadow: 0 0 12px rgba(94, 234, 212, 0.45), 0 0 28px rgba(56, 189, 248, 0.2);
}

/* Rolling Cards Row Track */
.integrations-row {
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 2;
    width: max-content;
    animation: infiniteRoll 28s linear infinite;
    will-change: transform;
}

.integrations-row:hover {
    animation-play-state: paused;
}

@keyframes infiniteRoll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-50% - 10px));
    }
}

.integration-card {
    background: rgba(15, 27, 51, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 20px;
    width: 130px;
    height: 145px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.35s ease,
                background 0.35s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}

.integration-card:hover {
    transform: translateY(-8px) scale(1.05) !important;
    border-color: rgba(94, 234, 212, 0.35) !important;
    background: rgba(18, 32, 60, 0.85) !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(94, 234, 212, 0.2) !important;
}

.int-icon-wrapper {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(228, 233, 242, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.integration-card:hover .int-icon-wrapper {
    transform: scale(1.1);
}

.int-name {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 2px;
}

.int-type {
    font-size: 10px;
    color: #9ca3af;
}

/* Light mode integration cards: seamlessly blend with light background */
html.light-mode .integration-card,
body.light-mode .integration-card {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05), inset 0 1px 1px rgba(255, 255, 255, 0.8) !important;
}

html.light-mode .integration-card:hover,
body.light-mode .integration-card:hover {
    background: #FFFFFF !important;
    border-color: rgba(15, 118, 110, 0.35) !important;
    box-shadow: 0 16px 36px rgba(15, 118, 110, 0.12), 0 0 20px rgba(15, 118, 110, 0.1) !important;
}

html.light-mode .int-icon-wrapper,
body.light-mode .int-icon-wrapper {
    background: rgba(241, 245, 249, 0.9) !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
}

html.light-mode .int-name,
body.light-mode .int-name {
    color: #0F172A !important;
}

html.light-mode .int-type,
body.light-mode .int-type {
    color: #64748B !important;
}

html.light-mode .laser-line,
body.light-mode .laser-line {
    background: linear-gradient(90deg, 
        rgba(15, 118, 110, 0.1) 0%, 
        rgba(15, 118, 110, 0.75) 35%, 
        rgba(13, 148, 136, 0.75) 65%, 
        rgba(15, 118, 110, 0.1) 100%
    ) !important;
    box-shadow: 0 0 12px rgba(15, 118, 110, 0.35) !important;
}

html.light-mode .integration-card.hub-card,
body.light-mode .integration-card.hub-card {
    background: #FFFFFF !important;
    border: 2px solid #0F766E !important;
    box-shadow: 0 12px 35px rgba(15, 118, 110, 0.22), 0 0 20px rgba(15, 118, 110, 0.12) !important;
}

html.light-mode .hub-title,
body.light-mode .hub-title {
    color: #0F172A !important;
}

/* Center Hub Card (GoodMeetings) */
.integration-card.hub-card {
    width: 165px;
    height: 180px;
    background: linear-gradient(135deg, rgba(20, 16, 35, 0.95), rgba(15, 23, 42, 0.95));
    border: 2px solid #5EEAD4;
    box-shadow: 0 0 45px rgba(94, 234, 212, 0.5), 0 0 90px rgba(56, 189, 248, 0.25);
    z-index: 3;
}

.integration-card.hub-card:hover {
    transform: scale(1.05) translateY(-6px);
    box-shadow: 0 0 60px rgba(94, 234, 212, 0.7), 0 0 110px rgba(56, 189, 248, 0.4);
}

.int-icon-wrapper.goodmeetings-hub {
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, #5EEAD4, #5EEAD4);
    border: none;
    box-shadow: 0 0 25px rgba(94, 234, 212, 0.8);
}

.hub-title {
    font-size: 14px;
    font-weight: 800;
    color: #ffffff;
    margin-top: 4px;
    margin-bottom: 4px;
}

.hub-pill-badge {
    background: rgba(94, 234, 212, 0.25);
    border: 1px solid rgba(94, 234, 212, 0.5);
    color: #DDF6F1;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 12px;
    letter-spacing: 0.5px;
}

/* Dynamic Center Highlight when rolling through center */
.integration-card.center-highlighted {
    transform: scale(1.18) translateY(-10px) !important;
    border-color: #5EEAD4 !important;
    background: linear-gradient(135deg, rgba(24, 18, 40, 0.98), rgba(15, 23, 42, 0.98)) !important;
    box-shadow: 0 0 35px rgba(94, 234, 212, 0.7), 0 0 70px rgba(56, 189, 248, 0.4) !important;
    z-index: 10 !important;
}

.integration-card.center-highlighted .int-icon-wrapper {
    transform: scale(1.18) !important;
    border-color: rgba(94, 234, 212, 0.6) !important;
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.7) !important;
}

.integration-card.center-highlighted .int-name {
    color: #ffffff !important;
    font-weight: 800 !important;
}

.integration-card.center-highlighted .int-type {
    color: #5EEAD4 !important;
    font-weight: 600 !important;
}

/* Responsive Integrations Section */
/* ==========================================
   11. CTA BANNER & ENTERPRISE FOOTER STYLES
   ========================================== */
.footer-cta-banner {
    position: relative;
    max-width: 1200px;
    margin: 100px auto 0;
    padding: 60px 32px;
    background: linear-gradient(135deg, rgba(20, 16, 35, 0.95), rgba(15, 23, 42, 0.95));
    border: 1px solid rgba(94, 234, 212, 0.3);
    border-radius: 28px;
    text-align: center;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(94, 234, 212, 0.2);
}

.cta-banner-glow {
    position: absolute;
    top: -50%;
    left: 50%;
    transform: translateX(-50%);
    width: 600px;
    height: 300px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.35) 0%, rgba(94, 234, 212, 0.15) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
}

.cta-banner-content {
    position: relative;
    z-index: 2;
    max-width: 750px;
    margin: 0 auto;
}

.cta-title {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #ffffff;
    margin-bottom: 14px;
}

.cta-desc {
    font-size: 16px;
    color: #9ca3af;
    line-height: 1.6;
    margin-bottom: 30px;
}

.cta-banner-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.cta-primary-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 34px;
    font-size: 15px;
    font-weight: 700;
    color: #070A11 !important;
    background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%) !important;
    border: none;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(94, 234, 212, 0.45);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-primary-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 16px 42px rgba(94, 234, 212, 0.65);
    color: #070A11 !important;
}

.cta-primary-btn svg {
    transition: transform 0.25s ease;
}

.cta-primary-btn:hover svg {
    transform: translateX(4px);
}

.cta-sec-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-sec-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(94, 234, 212, 0.7);
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 234, 212, 0.25);
    color: #FFFFFF !important;
}

.cta-sec-btn svg {
    transition: transform 0.25s ease;
}

.cta-sec-btn:hover svg {
    transform: translateX(4px);
}

/* Light mode CTA banner button styling */
html.light-mode .cta-primary-btn,
body.light-mode .cta-primary-btn {
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%) !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.35) !important;
}

html.light-mode .cta-primary-btn:hover,
body.light-mode .cta-primary-btn:hover {
    box-shadow: 0 18px 40px rgba(15, 118, 110, 0.5) !important;
    color: #FFFFFF !important;
}

html.light-mode .cta-sec-btn,
body.light-mode .cta-sec-btn {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.06) !important;
}

html.light-mode .cta-sec-btn:hover,
body.light-mode .cta-sec-btn:hover {
    border-color: #0F766E !important;
    color: #0F766E !important;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.15) !important;
}

/* Site Footer */
.site-footer {
    position: relative;
    margin-top: 90px;
    padding: 60px 32px 40px;
    border-top: 1px solid rgba(228, 233, 242, 0.1);
    background: var(--bg-navy);
}

.footer-top-grid {
    max-width: 1280px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 48px;
}

.footer-top-grid.nav-matched {
    max-width: 1360px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.8fr 1fr 1.15fr 1.15fr 1.15fr 1fr;
    gap: 28px;
}

@media (max-width: 1100px) {
    .footer-top-grid.nav-matched {
        grid-template-columns: repeat(3, 1fr);
        gap: 32px;
    }
    .footer-top-grid.nav-matched .footer-col.brand-col {
        grid-column: span 3;
    }
}

@media (max-width: 768px) {
    .footer-top-grid.nav-matched {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .footer-top-grid.nav-matched .footer-col.brand-col {
        grid-column: span 2;
    }
}

@media (max-width: 640px) {
    .site-footer {
        padding: 44px 16px 32px;
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    .footer-top-grid.nav-matched {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .footer-top-grid.nav-matched .footer-col.brand-col {
        grid-column: span 1;
    }
}

.footer-col.brand-col {
    padding-right: 20px;
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 16px;
}

.footer-logo-img {
    height: 32px;
    width: auto;
    max-width: 140px;
    display: block;
    object-fit: contain;
    filter: brightness(0) invert(1);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.footer-logo:hover .footer-logo-img {
    opacity: 0.92;
}

body.light-mode .footer-logo-img {
    filter: none;
}

.footer-logo-icon {
    width: 21px;
    height: 28px;
    color: #5EEAD4;
    flex-shrink: 0;
}

.footer-logo .mini-g-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 800;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.4);
}

.footer-logo .brand-text {
    font-size: 18px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.5px;
}

.footer-mission {
    font-size: 13px;
    color: #A9B8CE;
    line-height: 1.6;
    margin-bottom: 20px;
}

.system-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    color: #5EEAD4;
    margin-bottom: 24px;
}

.status-indicator-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px #5EEAD4;
}

.footer-socials {
    display: flex;
    gap: 12px;
}

.footer-socials a {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.12);
    color: #8494B0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.footer-socials a:hover {
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    border-color: rgba(94, 234, 212, 0.35);
    transform: translateY(-2px);
}

.footer-col h4 {
    font-size: 14px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 18px;
    letter-spacing: 0.2px;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col ul li a {
    font-size: 13px;
    color: #8494B0;
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.footer-col ul li a:hover {
    color: #5EEAD4;
}

.hiring-badge {
    background: rgba(94, 234, 212, 0.15);
    border: 1px solid rgba(94, 234, 212, 0.35);
    color: #5EEAD4;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 8px;
    text-transform: uppercase;
}

/* Footer Bottom Bar */
.footer-bottom {
    max-width: 1280px;
    margin: 50px auto 0;
    padding-top: 24px;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: #8494B0;
}

.footer-legal-links {
    display: flex;
    gap: 20px;
}

.footer-legal-links a {
    color: #8494B0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-legal-links a:hover {
    color: #5EEAD4;
}

/* ==========================================
   12. COMPREHENSIVE RESPONSIVE DESIGN STYLES
   ========================================== */

/* Preventing Horizontal Overflow */
html, body {
    overflow-x: hidden;
    width: 100%;
}

/* Tablet & Mobile Screens (<= 1024px) */
@media (max-width: 1024px) {
    /* 3 Pillars Grid Stacking */
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        max-width: 650px;
    }

    .pillars-arch-wrapper {
        display: none;
    }

    .pillar-column {
        width: 100%;
        padding: 28px 20px;
        background: rgba(17, 18, 26, 0.7);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
    }

    .pillar-content-flex {
        flex-direction: row;
        justify-content: center;
    }

    .executive-dashboard {
        max-width: 100%;
    }

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

/* Mobile Devices (<= 768px) */
@media (max-width: 768px) {
    /* Navbar */
    .nav-links {
        display: none;
    }

    .navbar {
        padding: 12px 16px;
    }

    .hero-title {
        font-size: 32px;
        letter-spacing: -0.8px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .pillars-title {
        font-size: 30px;
    }

    .pillars-subtitle {
        font-size: 14px;
    }

    .pillar-content-flex {
        flex-direction: column;
        align-items: center;
    }

    .pillar-person-card {
        width: 100%;
        max-width: 280px;
    }

    .pillar-person-img {
        height: 200px;
    }

    .pillar-pills-stack {
        width: 100%;
    }

    .integrations-title {
        font-size: 28px;
    }

    .integrations-subtitle {
        font-size: 13px;
    }

    /* Footer */
    .footer-top-grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
    }

    .footer-col.brand-col {
        grid-column: span 2;
    }

    .footer-cta-banner {
        padding: 40px 20px;
        margin: 60px 16px 0;
    }

    .cta-title {
        font-size: 24px;
    }

    .cta-desc {
        font-size: 14px;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}

/* Extra Small Phones (<= 480px) */
@media (max-width: 480px) {
    .dash-stats-grid {
        grid-template-columns: 1fr;
    }

    .footer-top-grid {
        grid-template-columns: 1fr;
    }

    .footer-col.brand-col {
        grid-column: span 1;
    }

    .chatbot-window {
        width: 300px;
        max-width: calc(100vw - 32px);
        right: 0;
        bottom: 68px;
        height: 460px;
        max-height: calc(100vh - 100px);
    }

    .chatbot-container {
        right: 16px;
        bottom: 16px;
    }

    .chatbot-trigger {
        width: 52px;
        height: 52px;
    }
}





/* Points Pills Stack ABOVE Image */
.pillar-pills-stack {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.pillar-pill {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 500;
    color: #e5e7eb;
    display: flex;
    align-items: center;
    gap: 10px;
    text-align: left;
    opacity: 0;
    transform: translateY(18px) scale(0.9);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pillars-section.visible .pillar-pill {
    animation: pointPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Staggered Pop Up Delays */
.pillars-section.visible .pillar-pill:nth-child(1) { animation-delay: 0.3s; }
.pillars-section.visible .pillar-pill:nth-child(2) { animation-delay: 0.45s; }
.pillars-section.visible .pillar-pill:nth-child(3) { animation-delay: 0.6s; }
.pillars-section.visible .pillar-pill:nth-child(4) { animation-delay: 0.75s; }
.pillars-section.visible .pillar-pill:nth-child(5) { animation-delay: 0.9s; }

@keyframes pointPopIn {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.9);
    }
    70% {
        transform: translateY(-3px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.pillar-pill:hover {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateX(4px) !important;
}

.pill-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pill-dot.purple { background: #5EEAD4; box-shadow: 0 0 8px #5EEAD4; }
.pill-dot.green { background: #34d399; box-shadow: 0 0 8px #34d399; }

/* Person Image Card */
.pillar-visual-box {
    position: relative;
    width: 100%;
    border-radius: 18px;
    overflow: hidden;
    margin-top: auto;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.pillar-person-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    filter: brightness(0.9) contrast(1.05);
}

/* Center Pillar Chips */
.pillar-agent-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 20px;
}

.agent-chip {
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #A9B8CE;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    opacity: 0;
    transform: translateY(18px) scale(0.9);
}

.pillars-section.visible .agent-chip {
    animation: pointPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.pillars-section.visible .agent-chip:nth-child(1) { animation-delay: 0.35s; }
.pillars-section.visible .agent-chip:nth-child(2) { animation-delay: 0.5s; }
.pillars-section.visible .agent-chip:nth-child(3) { animation-delay: 0.65s; }
.pillars-section.visible .agent-chip:nth-child(4) { animation-delay: 0.8s; }
.pillars-section.visible .agent-chip:nth-child(5) { animation-delay: 0.95s; }

/* Executive Overview Dashboard UI Mockup */
.executive-dashboard {
    width: 100%;
    background: #0b0d14;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 18px;
    text-align: left;
    box-shadow: 0 20px 40px rgba(0,0,0,0.6);
}

.dash-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin-bottom: 14px;
}

.dash-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
}

.mini-g {
    width: 22 height: 22px;
    background: linear-gradient(135deg, #5EEAD4, #5EEAD4);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 900;
    color: #ffffff;
    padding: 2px 6px;
}

.dash-filter {
    font-size: 11px;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.dash-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}

.dash-stat {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px;
}

.stat-lbl {
    font-size: 10px;
    color: #9ca3af;
    display: block;
    margin-bottom: 4px;
}

.stat-val {
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 4px;
}

.stat-badge.green {
    font-size: 9px;
    color: #34d399;
    background: rgba(52, 211, 153, 0.12);
    padding: 1px 4px;
    border-radius: 4px;
}

/* Dashboard Chart & Summary Row */
.dash-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.dash-chart-box {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #d1d5db;
    margin-bottom: 8px;
}

.chart-growth {
    color: #5EEAD4;
    font-weight: 600;
}

.chart-growth small {
    color: #34d399;
}

.chart-svg {
    width: 100%;
    height: 60px;
    overflow: visible;
}

.dash-ai-summary {
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 10px;
    padding: 10px;
}

.summary-title {
    font-size: 11px;
    font-weight: 700;
    color: #5EEAD4;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.summary-text {
    font-size: 10px;
    color: #9ca3af;
    line-height: 1.4;
    margin-bottom: 8px;
}

.summary-tags {
    display: flex;
    gap: 6px;
}

.s-tag {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.05);
    color: #9ca3af;
}

.s-tag.highlight {
    background: rgba(94, 234, 212, 0.2);
    color: #c7d2fe;
    font-weight: 600;
}

/* Bottom Metrics Cards */
.dash-bottom-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.dash-subcard {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 10px;
}

.dash-subcard h5 {
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 8px;
}

.sentiment-bars {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.s-bar-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    color: #9ca3af;
}

.s-lbl { width: 42px; }

.s-track {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.s-fill.pos { background: #34d399; }
.s-fill.neu { background: #f59e0b; }
.s-fill.neg { background: #ef4444; }

.progress-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.progress-list li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 9px;
    color: #9ca3af;
}

.progress-list span:first-child { width: 68px; }

.p-bar {
    flex: 1;
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 2px;
    overflow: hidden;
}

.p-fill {
    height: 100%;
    background: #5EEAD4;
    border-radius: 2px;
}

.channel-pills {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ch-pill {
    font-size: 9px;
    color: #9ca3af;
    background: rgba(255, 255, 255, 0.04);
    padding: 3px 6px;
    border-radius: 4px;
}

/* Enterprise Logo Ticker Bar */
.enterprise-ticker-bar {
    margin-top: 60px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    padding: 24px 32px;
    text-align: center;
}

.ticker-heading {
    font-size: 13px;
    font-weight: 600;
    color: #9ca3af;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.ticker-logos-track {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.brand-logo {
    font-size: 18px;
    font-weight: 800;
    color: #e5e7eb;
    letter-spacing: -0.5px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.brand-logo:hover {
    opacity: 1;
}

.brand-logo small {
    font-weight: 400;
    font-size: 14px;
    color: #9ca3af;
}

/* Responsive adjustments for 3 Pillars Section */
@media (max-width: 1100px) {
    .pillars-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pillars-arch-wrapper {
        display: none;
    }

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

@media (max-width: 600px) {
    .pillars-title {
        font-size: 28px;
    }
    
    .pillars-subtitle {
        font-size: 14px;
    }

    .dash-bottom-grid {
        grid-template-columns: 1fr;
    }
}

.chatbot-dropdown-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.chatbot-header-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 210px;
    background: rgba(18, 16, 32, 0.98);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: 14px;
    padding: 6px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.7), 0 0 25px rgba(94, 234, 212, 0.25);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.95);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

.chatbot-header-dropdown.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.dropdown-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    color: #e2e8f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    border-radius: 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-item-link .menu-item-icon {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.dropdown-item-link:hover {
    background: rgba(94, 234, 212, 0.2);
    color: #ffffff;
}

.dropdown-item-link:hover .menu-item-icon {
    transform: scale(1.15);
}

.input-dropdown-trigger {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 20px;
    padding: 5px 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.input-dropdown-trigger:hover {
    background: rgba(94, 234, 212, 0.25);
    border-color: rgba(94, 234, 212, 0.5);
}

.input-dropdown-trigger .chevron-icon {
    transition: transform 0.2s ease;
}

.chatbot-dropdown-wrapper .chatbot-header-dropdown.input-position-dropdown {
    top: auto;
    bottom: calc(100% + 14px);
    left: 0;
    right: auto;
    width: 210px;
    transform: translateY(8px) scale(0.95);
}

.chatbot-dropdown-wrapper .chatbot-header-dropdown.input-position-dropdown.active {
    transform: translateY(0) scale(1);
}

/* ==========================================
   ULTRA-CLEAN REDESIGNED DEMO BOOKING CARD
   ========================================== */
.calendar-widget-card.ultra-demo-card {
    margin-top: 12px;
    background: #0f111a;
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 35px rgba(94, 234, 212, 0.15);
}

.demo-card-head {
    text-align: left;
    margin-bottom: 16px;
}

.demo-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.25);
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.demo-card-head h3 {
    font-size: 17px;
    font-weight: 800;
    color: #ffffff;
    margin: 0 0 4px 0;
    letter-spacing: -0.4px;
}

.demo-card-head p {
    font-size: 11px;
    color: #9ca3af;
    margin: 0;
    line-height: 1.4;
}

/* Host Pill Selector */
.host-pill-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 18px;
}

.host-pill-selector .host-segment {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.host-pill-selector .host-segment.active {
    background: rgba(94, 234, 212, 0.15);
    border-color: #5EEAD4;
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.25);
}

.avatar-box {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    flex-shrink: 0;
}

.avatar-box.soumya-bg {
    background: linear-gradient(135deg, #5EEAD4, #5EEAD4);
}

.avatar-box.shreya-bg {
    background: linear-gradient(135deg, #10b981, #5EEAD4);
}

.host-info {
    display: flex;
    flex-direction: column;
    text-align: left;
    flex: 1;
}

.host-info strong {
    font-size: 12.5px;
    color: #ffffff;
    font-weight: 700;
}

.host-info small {
    font-size: 9.5px;
    color: #9ca3af;
}

.check-mark {
    font-size: 12px;
    color: #5EEAD4;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.host-segment.active .check-mark {
    opacity: 1;
}

/* Clean Form Inputs */
.clean-form-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.field-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}

.field-block label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #9ca3af;
}

.field-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.clean-form-container .cal-input {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px 12px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
}

.clean-form-container .cal-input:focus {
    border-color: #5EEAD4;
    background: rgba(94, 234, 212, 0.08);
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.3);
}

/* Time Slots */
.slot-selection-area {
    margin-bottom: 18px;
    text-align: left;
}

.slot-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: #5EEAD4;
    margin-bottom: 8px;
}

.slot-header .tz {
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 6px;
    border-radius: 4px;
    color: #9ca3af;
}

.main-booking-btn {
    width: 100%;
    padding: 13px;
    background: linear-gradient(135deg, #5EEAD4, #5EEAD4);
    color: #ffffff;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(94, 234, 212, 0.4);
    transition: all 0.2s ease;
}

.main-booking-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px rgba(94, 234, 212, 0.65);
}

/* Dual Action Row: Book a Demo & Speak AI */
.chatbot-action-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.chatbot-action-row .cta-demo-btn {
    flex: 1;
    margin-bottom: 0;
}

.chatbot-action-row .speak-pill-btn {
    flex: 1;
    margin: 0;
    padding: 10px 14px;
    background: rgba(139, 92, 246, 0.12);
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 12px;
    color: #5EEAD4;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.chatbot-action-row .speak-pill-btn:hover {
    background: rgba(139, 92, 246, 0.25);
    border-color: #8b5cf6;
    color: #ffffff;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.4);
}

/* ==========================================
   10. UPDATED HERO DESIGN COMPONENTS
   ========================================== */
.hero-eyebrow-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 20px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.35);
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.2px;
    margin-bottom: 24px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 24px rgba(94, 234, 212, 0.22);
}

.badge-sparkle {
    font-size: 13px;
    animation: sparkleSpin 3s infinite ease-in-out;
}

.hero-btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 30px;
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 100%);
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 28px rgba(94, 234, 212, 0.5);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-demo:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 36px rgba(94, 234, 212, 0.7);
    color: #ffffff;
}

.hero-btn-how {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: #f1f5f9;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    backdrop-filter: blur(16px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-btn-how:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(94, 234, 212, 0.55);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.hero-btn-how svg {
    transition: transform 0.25s ease;
}

.hero-btn-how:hover svg {
    transform: translateX(4px);
}

/* Hero Key Metrics Proof Strip */
.hero-metrics-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin: 40px auto 32px;
    padding: 18px 40px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    backdrop-filter: blur(20px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.12);
    max-width: 860px;
    width: 100%;
}

.hero-metric-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-metric-item .metric-val {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin-bottom: 4px;
}

.text-gradient-purple {
    background: linear-gradient(135deg, #DDF6F1 0%, #5EEAD4 50%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-blue {
    background: linear-gradient(135deg, #DDF6F1 0%, #5EEAD4 50%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-gradient-teal {
    background: linear-gradient(135deg, #a7f3d0 0%, #34d399 50%, #10b981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-metric-item .metric-lbl {
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.metric-divider {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
}

/* 3 Core Pillars Indicator Pills */
.hero-pillars-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.hero-indicator-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
}

.hero-indicator-pill .num {
    font-size: 11px;
    font-weight: 800;
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.18);
    padding: 2px 7px;
    border-radius: 6px;
}

.hero-indicator-pill:hover {
    background: rgba(94, 234, 212, 0.14);
    border-color: rgba(94, 234, 212, 0.45);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 4px 18px rgba(94, 234, 212, 0.25);
}

/* Hero Trusted Leaders Showcase */
.trusted-eyebrow-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 48px;
    margin-bottom: 24px;
    position: relative;
    z-index: 5;
}

.trusted-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 24px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.trusted-eyebrow:hover {
    background: rgba(94, 234, 212, 0.08);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 6px 28px rgba(94, 234, 212, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.trusted-eyebrow-sparkle {
    font-size: 13px;
    animation: sparkleSpin 3s infinite ease-in-out;
}

.trusted-eyebrow-text {
    font-size: 13.5px;
    font-weight: 500;
    color: #94a3b8;
    letter-spacing: -0.01em;
}

.trusted-eyebrow-text .brand-hl {
    color: #f1f5f9;
    font-weight: 600;
    padding: 0 1px;
}

.trusted-leaders-showcase {
    width: 100%;
    max-width: 1200px;
    position: relative;
    margin: 36px auto 0;
    padding: 12px 0 24px;
    background: transparent;
    border: none;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: none;
    overflow: hidden;
}

.trusted-main-heading {
    width: 100%;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 22px;
    padding: 0 20px;
}

.trusted-marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 0;
    mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0,0,0,1) 8%, rgba(0,0,0,1) 92%, transparent 100%);
}

.trusted-marquee-track {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: max-content;
    user-select: none;
    will-change: transform;
}

.trusted-marquee-group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 22px;
    padding-right: 22px;
    flex-shrink: 0;
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.marquee-single-line .trusted-marquee-group {
    animation: marqueeScrollLeft 60s linear infinite;
}

.marquee-left .trusted-marquee-group {
    animation: marqueeScrollLeft 32s linear infinite;
}

.marquee-right .trusted-marquee-group {
    animation: marqueeScrollRight 36s linear infinite;
}

.trusted-marquee-container:hover .trusted-marquee-group {
    animation-play-state: paused;
}

@keyframes marqueeScrollLeft {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

@keyframes marqueeScrollRight {
    0% {
        transform: translate3d(-100%, 0, 0);
    }
    100% {
        transform: translate3d(0, 0, 0);
    }
}

.trusted-logo-tile {
    width: auto;
    min-width: 195px;
    height: 70px;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px 22px;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
    cursor: default;
    user-select: none;
    flex-shrink: 0;
}

.trusted-logo-tile .trusted-brand-icon {
    width: 32px;
    height: 32px;
    max-width: 36px;
    max-height: 36px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

.trusted-logo-tile .trusted-brand-name {
    font-size: 14px;
    font-weight: 700;
    color: #1e293b;
    letter-spacing: -0.2px;
    white-space: nowrap;
    line-height: 1.2;
}

.trusted-logo-tile:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.42), 0 0 28px rgba(94, 234, 212, 0.35);
    border-color: #ffffff;
    z-index: 5;
}

.trusted-logo-tile svg {
    height: 38px;
    width: auto;
    max-width: 100%;
    max-height: 100%;
    display: block;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .trusted-logo-tile {
        min-width: 170px;
        height: 60px;
        padding: 8px 16px;
        gap: 10px;
    }
    .trusted-logo-tile .trusted-brand-icon {
        width: 28px;
        height: 28px;
    }
    .trusted-logo-tile .trusted-brand-name {
        font-size: 13px;
    }
    .trusted-logo-tile svg {
        height: 32px;
    }
}

@media (max-width: 768px) {
    .trusted-logo-tile {
        min-width: 145px;
        height: 52px;
        padding: 6px 14px;
        gap: 8px;
    }
    .trusted-logo-tile .trusted-brand-icon {
        width: 24px;
        height: 24px;
    }
    .trusted-logo-tile .trusted-brand-name {
        font-size: 12px;
    }
    .trusted-logo-tile svg {
        height: 28px;
    }
    .trusted-eyebrow {
        font-size: 13px;
    }
    .trusted-main-heading {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .trusted-leaders-showcase {
        padding: 16px 0 24px;
    }
    .trusted-marquee-group {
        gap: 14px;
        padding-right: 14px;
    }
}

/* ==========================================
   10. THREE PILLARS PLATFORM INTERACTIVE SECTION
   ========================================== */
.platform-three-pillars-section {
    position: relative;
    padding: 30px 24px 70px;
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    z-index: 5;
}

.platform-overview-card {
    position: relative;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(30, 27, 75, 0.22) 30%, rgba(15, 23, 42, 0.4) 65%, rgba(8, 12, 22, 0.6) 100%);
    border: 2.5px solid rgba(255, 255, 255, 0.16);
    border-radius: 34px;
    padding: 40px 48px 32px;
    box-shadow: 0 35px 90px -10px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 2.5px 5px rgba(255, 255, 255, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    margin-bottom: 32px;
    overflow: hidden;
}

.platform-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.platform-brand-text {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.platform-tag-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: var(--text-gray);
    text-transform: uppercase;
}

.platform-header-content {
    margin-bottom: 28px;
    max-width: 720px;
}

.platform-main-heading {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    color: #ffffff;
    margin-bottom: 12px;
}

.platform-title-gradient {
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.platform-main-desc {
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-gray);
    margin: 0;
}

/* Main Interactive Split Stage */
.platform-stage-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.25fr;
    gap: 36px;
    align-items: center;
    margin-bottom: 32px;
}

/* Left Column: 3D Isometric Stack Selector */
.platform-cards-selector-col {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.iso-stack-scene {
    position: relative;
    width: 100%;
    max-width: 450px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.iso-stack-glow {
    position: absolute;
    inset: 10%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.3) 0%, rgba(94, 234, 212, 0.2) 50%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.iso-connector-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
}

.iso-layer-card {
    position: absolute;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 5;
    left: 20px;
    outline: none;
}

.layer-purple {
    top: 24px;
    z-index: 8;
}

.layer-blue {
    top: 116px;
    z-index: 7;
}

.layer-green {
    top: 208px;
    z-index: 6;
}

.iso-plate {
    width: 210px;
    height: 94px;
    border-radius: 20px;
    transform: perspective(600px) rotateX(50deg) rotateZ(-26deg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    position: relative;
}

.plate-purple {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.35) 0%, rgba(147, 51, 234, 0.18) 100%);
    border: 2.5px solid rgba(216, 180, 254, 0.85);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 2.5px 5px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(168, 85, 247, 0.4);
}

.plate-blue {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.35) 0%, rgba(56, 189, 248, 0.18) 100%);
    border: 2.5px solid rgba(125, 211, 252, 0.85);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 2.5px 5px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(14, 165, 233, 0.4);
}

.plate-green {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.35) 0%, rgba(5, 150, 105, 0.18) 100%);
    border: 2.5px solid rgba(110, 231, 183, 0.85);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.65), inset 0 2.5px 5px rgba(255, 255, 255, 0.45), inset 0 -3px 6px rgba(16, 185, 129, 0.4);
}

.iso-plate-icon {
    transform: rotateZ(26deg) rotateX(-50deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.layer-purple:hover .iso-plate,
.layer-purple.active .iso-plate {
    transform: perspective(600px) rotateX(46deg) rotateZ(-24deg) translateY(-10px) scale(1.08);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.8), 0 0 50px rgba(168, 85, 247, 0.8), inset 0 2.5px 5px rgba(255, 255, 255, 0.65);
    border-color: #C084FC;
}

.layer-blue:hover .iso-plate,
.layer-blue.active .iso-plate {
    transform: perspective(600px) rotateX(46deg) rotateZ(-24deg) translateY(-10px) scale(1.08);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.8), 0 0 50px rgba(14, 165, 233, 0.8), inset 0 2.5px 5px rgba(255, 255, 255, 0.65);
    border-color: #38BDF8;
}

.layer-green:hover .iso-plate,
.layer-green.active .iso-plate {
    transform: perspective(600px) rotateX(46deg) rotateZ(-24deg) translateY(-10px) scale(1.08);
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.8), 0 0 50px rgba(16, 185, 129, 0.8), inset 0 2.5px 5px rgba(255, 255, 255, 0.65);
    border-color: #34D399;
}

.iso-tag-callout {
    position: absolute;
    right: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55), inset 0 1.5px 3px rgba(255, 255, 255, 0.25);
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
    outline: none;
}

.iso-tag-callout .tag-num {
    font-size: 11px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-gray);
    transition: all 0.25s ease;
}

.tag-purple {
    top: 50px;
}

.tag-blue {
    top: 146px;
}

.tag-green {
    top: 240px;
}

/* Distinct hover & active colors for each pillar tag */
.tag-purple.active,
.tag-purple:hover {
    border-color: rgba(168, 85, 247, 0.95);
    transform: translateX(6px) scale(1.04);
    box-shadow: 0 14px 40px rgba(168, 85, 247, 0.55), inset 0 1.5px 3px rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
}

.tag-purple.active .tag-num,
.tag-purple:hover .tag-num {
    background: rgba(168, 85, 247, 0.35);
    color: #E879F9;
}

.tag-blue.active,
.tag-blue:hover {
    border-color: rgba(14, 165, 233, 0.95);
    transform: translateX(6px) scale(1.04);
    box-shadow: 0 14px 40px rgba(14, 165, 233, 0.55), inset 0 1.5px 3px rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
}

.tag-blue.active .tag-num,
.tag-blue:hover .tag-num {
    background: rgba(14, 165, 233, 0.35);
    color: #38BDF8;
}

.tag-green.active,
.tag-green:hover {
    border-color: rgba(16, 185, 129, 0.95);
    transform: translateX(6px) scale(1.04);
    box-shadow: 0 14px 40px rgba(16, 185, 129, 0.55), inset 0 1.5px 3px rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
}

.tag-green.active .tag-num,
.tag-green:hover .tag-num {
    background: rgba(16, 185, 129, 0.35);
    color: #6EE7B7;
}

/* Light mode specific hover colors for the 3 tags */
html.light-mode .tag-purple.active,
html.light-mode .tag-purple:hover,
body.light-mode .tag-purple.active,
body.light-mode .tag-purple:hover {
    border-color: #9333EA !important;
    background: #FAF5FF !important;
    color: #581C87 !important;
    box-shadow: 0 12px 30px rgba(147, 51, 234, 0.22) !important;
}

html.light-mode .tag-purple.active .tag-num,
html.light-mode .tag-purple:hover .tag-num,
body.light-mode .tag-purple.active .tag-num,
body.light-mode .tag-purple:hover .tag-num {
    background: #EDE9FE !important;
    color: #7E22CE !important;
}

html.light-mode .tag-blue.active,
html.light-mode .tag-blue:hover,
body.light-mode .tag-blue.active,
body.light-mode .tag-blue:hover {
    border-color: #0284C7 !important;
    background: #F0F9FF !important;
    color: #075985 !important;
    box-shadow: 0 12px 30px rgba(2, 132, 199, 0.22) !important;
}

html.light-mode .tag-blue.active .tag-num,
html.light-mode .tag-blue:hover .tag-num,
body.light-mode .tag-blue.active .tag-num,
body.light-mode .tag-blue:hover .tag-num {
    background: #E0F2FE !important;
    color: #0369A1 !important;
}

html.light-mode .tag-green.active,
html.light-mode .tag-green:hover,
body.light-mode .tag-green.active,
body.light-mode .tag-green:hover {
    border-color: #059669 !important;
    background: #ECFDF5 !important;
    color: #064E3B !important;
    box-shadow: 0 12px 30px rgba(16, 185, 129, 0.22) !important;
}

html.light-mode .tag-green.active .tag-num,
html.light-mode .tag-green:hover .tag-num,
body.light-mode .tag-green.active .tag-num,
body.light-mode .tag-green:hover .tag-num {
    background: #D1FAE5 !important;
    color: #047857 !important;
}

/* Right Column: Live Detailed Display Pane */
.platform-detail-display-col {
    position: relative;
    width: 100%;
    min-height: 420px;
    display: flex;
    flex-direction: column;
}

.pillar-detail-pane {
    display: none;
    position: relative;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(15, 23, 42, 0.4) 45%, rgba(6, 11, 22, 0.6) 100%);
    border: 2.5px solid rgba(255, 255, 255, 0.15);
    border-radius: 30px;
    padding: 34px 28px;
    box-shadow: 0 30px 75px -10px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.04), inset 0 2.5px 5px rgba(255, 255, 255, 0.22), inset 0 -3px 6px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(32px) saturate(180%);
    -webkit-backdrop-filter: blur(32px) saturate(180%);
    flex-direction: column;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.pillar-detail-pane.active {
    display: flex;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInPane 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInPane {
    0% { opacity: 0; transform: translateY(12px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.pillar-detail-pane.card-purple.active {
    border-color: rgba(94, 234, 212, 0.85);
    box-shadow: 0 36px 85px rgba(0, 0, 0, 0.75), 0 0 45px rgba(94, 234, 212, 0.35), inset 0 2.5px 5px rgba(255, 255, 255, 0.35);
}

.pillar-detail-pane.card-blue.active {
    border-color: rgba(94, 234, 212, 0.85);
    box-shadow: 0 36px 85px rgba(0, 0, 0, 0.75), 0 0 45px rgba(94, 234, 212, 0.35), inset 0 2.5px 5px rgba(255, 255, 255, 0.35);
}

.pillar-detail-pane.card-green.active {
    border-color: rgba(16, 185, 129, 0.85);
    box-shadow: 0 36px 85px rgba(0, 0, 0, 0.75), 0 0 45px rgba(16, 185, 129, 0.35), inset 0 2.5px 5px rgba(255, 255, 255, 0.35);
}

.detail-card-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.detail-card-num {
    font-size: 13px;
    font-weight: 800;
    color: #ffffff;
    padding: 4px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.detail-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.detail-card-title {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.detail-card-subhead {
    font-size: 14.5px;
    font-weight: 700;
    color: #e2e8f0;
    margin: 0 0 10px 0;
}

.detail-card-desc {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-gray);
    margin: 0 0 22px 0;
    min-height: 60px;
}

/* Detailed Mockup Frame (Transparent & Thick) */
.detail-mockup-frame {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(10, 15, 29, 0.4) 100%);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 22px;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: inset 0 1.5px 3px rgba(255, 255, 255, 0.16), 0 16px 36px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Card 1: Conversation Analysis Mockup */
.mockup-purple {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.mockup-left-pills {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mockup-chip {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    color: #ffffff;
    backdrop-filter: blur(10px);
}

.mockup-chip .chip-val {
    margin-left: auto;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
}

.val-positive {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.val-purple {
    background: rgba(94, 234, 212, 0.2);
    color: #5EEAD4;
}

.chip-action {
    flex-direction: row;
    align-items: flex-start;
}

.chip-action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chip-action-text .action-label {
    font-size: 9.5px;
    color: var(--text-gray);
    font-weight: 800;
}

.chip-action-text .action-val {
    font-size: 10.5px;
    color: #e2e8f0;
}

.mockup-summary-preview {
    background: linear-gradient(135deg, rgba(30, 27, 75, 0.4) 0%, rgba(15, 23, 42, 0.65) 100%);
    border: 1.5px solid rgba(94, 234, 212, 0.35);
    border-radius: 14px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
}

.summary-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.audio-wave-mini {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 14px;
}

.audio-wave-mini span {
    width: 2px;
    height: 100%;
    background: #5EEAD4;
    border-radius: 1px;
    animation: wavePulseMini 1.2s ease-in-out infinite alternate;
}

.audio-wave-mini span:nth-child(2) { height: 60%; animation-delay: 0.15s; }
.audio-wave-mini span:nth-child(3) { height: 90%; animation-delay: 0.3s; }
.audio-wave-mini span:nth-child(4) { height: 40%; animation-delay: 0.45s; }
.audio-wave-mini span:nth-child(5) { height: 80%; animation-delay: 0.6s; }
.audio-wave-mini span:nth-child(6) { height: 50%; animation-delay: 0.75s; }

@keyframes wavePulseMini {
    0% { transform: scaleY(0.4); }
    100% { transform: scaleY(1); }
}

.audio-time {
    font-size: 10px;
    color: var(--text-gray);
}

.summary-preview-title {
    font-size: 12px;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
}

.summary-preview-lines .line {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 4px;
}

.summary-preview-lines .line-lg { width: 85%; }
.summary-preview-lines .line-md { width: 60%; }

.summary-sentiment-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
}

.summary-sentiment-row .sent-badge {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
}

.summary-action-box {
    background: rgba(255, 255, 255, 0.04);
    border-radius: 6px;
    padding: 6px 8px;
}

.action-check-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10.5px;
    font-weight: 700;
    color: #ffffff;
}

.action-sub-desc {
    font-size: 9.5px;
    color: var(--text-gray);
    margin: 2px 0 0 16px;
}

/* Card 2: AI Agents Mockup */
.mockup-metrics-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.metric-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.metric-meta {
    display: flex;
    flex-direction: column;
}

.metric-meta strong {
    font-size: 11px;
    color: #ffffff;
}

.metric-meta span {
    font-size: 9px;
    color: var(--text-gray);
}

.mockup-agent-flow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 16px 12px;
    position: relative;
}

.flow-node {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.15);
    border: 1px solid rgba(94, 234, 212, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-connector {
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.flow-connector span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.6);
    animation: flowPulse 1.4s infinite ease-in-out;
}

.flow-connector span:nth-child(2) { animation-delay: 0.3s; }

@keyframes flowPulse {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}

.flow-agent-core {
    position: relative;
}

.agent-avatar-glow {
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.5) 0%, transparent 70%);
    filter: blur(10px);
}

.agent-avatar-box {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #0f172a;
    border: 1.5px solid rgba(94, 234, 212, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.35);
}

/* Card 3: Trust & Observability Mockup */
.mockup-bots-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.bot-status-pill {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 8px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bot-pill-header {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
}

.bot-audit-tag {
    font-size: 9.5px;
    color: #34d399;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
}

.mockup-live-audit-panel {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 12px;
    background: linear-gradient(135deg, rgba(6, 78, 59, 0.35) 0%, rgba(15, 23, 42, 0.65) 100%);
    border: 1.5px solid rgba(16, 185, 129, 0.35);
    border-radius: 14px;
    padding: 14px;
    align-items: center;
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.12), 0 8px 20px rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(16px);
}

.live-indicator-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    font-size: 10px;
    font-weight: 800;
    color: #34d399;
    margin-bottom: 8px;
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
    animation: liveBlink 1.5s infinite;
}

@keyframes liveBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.audit-wave-bars {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 18px;
    margin-bottom: 8px;
}

.audit-wave-bars span {
    width: 2px;
    height: 100%;
    background: #10b981;
    border-radius: 1px;
    animation: wavePulseMini 1.4s ease-in-out infinite alternate;
}

.audit-wave-bars span:nth-child(2) { height: 40%; animation-delay: 0.1s; }
.audit-wave-bars span:nth-child(3) { height: 80%; animation-delay: 0.2s; }
.audit-wave-bars span:nth-child(4) { height: 50%; animation-delay: 0.3s; }
.audit-wave-bars span:nth-child(5) { height: 95%; animation-delay: 0.4s; }
.audit-wave-bars span:nth-child(6) { height: 60%; animation-delay: 0.5s; }
.audit-wave-bars span:nth-child(7) { height: 85%; animation-delay: 0.6s; }
.audit-wave-bars span:nth-child(8) { height: 45%; animation-delay: 0.7s; }
.audit-wave-bars span:nth-child(9) { height: 75%; animation-delay: 0.8s; }

.audit-text-lines .line {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 3px;
}

.audit-text-lines .line-lg { width: 80%; }
.audit-text-lines .line-md { width: 55%; }

.audit-checklist-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.audit-check-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #e2e8f0;
}

/* ==========================================
   EVALUATION LAYER ARCHITECTURE SHOWCASE CARD
   ========================================== */
.evaluation-layer-showcase-card {
    position: relative;
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(15, 23, 42, 0.5) 50%, rgba(8, 12, 22, 0.65) 100%);
    border: 2px solid rgba(255, 255, 255, 0.13);
    border-radius: 26px;
    padding: 28px 24px 24px;
    box-shadow: inset 0 1.5px 3px rgba(255, 255, 255, 0.18), 0 20px 50px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.eval-showcase-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

.eval-brand-badge {
    display: flex;
    align-items: center;
    gap: 10px;
}

.eval-brand-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(94, 234, 212, 0.45);
}

.eval-brand-name {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #ffffff;
    font-family: var(--font-display);
}

.eval-dot {
    color: rgba(255, 255, 255, 0.4);
    font-size: 13px;
}

.eval-layer-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #94a3b8;
    text-transform: none;
}

.eval-engine-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
    z-index: 3;
}

.eval-engine-pill {
    padding: 9px 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.22) 0%, rgba(94, 234, 212, 0.22) 100%);
    border: 1.5px solid rgba(94, 234, 212, 0.55);
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    box-shadow: 0 8px 24px rgba(94, 234, 212, 0.28), inset 0 1px 2px rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.eval-tree-lines-wrap {
    width: 100%;
    max-width: 1060px;
    height: 36px;
    margin: -1px auto 0;
    display: flex;
    justify-content: center;
}

.eval-tree-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.eval-channels-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
}

.eval-channel-card {
    background: rgba(255, 255, 255, 0.035);
    border: 1.5px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: 16px 10px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.1), 0 8px 20px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    text-align: center;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.eval-channel-card:hover {
    transform: translateY(-6px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), inset 0 1.5px 3px rgba(255, 255, 255, 0.25);
}

.channel-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.eval-channel-card:hover .channel-icon-circle {
    transform: scale(1.1);
}

.icon-voice {
    background: rgba(94, 234, 212, 0.18);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.25);
}

.icon-bot {
    background: rgba(94, 234, 212, 0.18);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.25);
}

.icon-chat {
    background: rgba(94, 234, 212, 0.18);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.25);
}

.icon-video {
    background: rgba(236, 72, 153, 0.18);
    border: 1px solid rgba(236, 72, 153, 0.4);
    box-shadow: 0 0 14px rgba(236, 72, 153, 0.25);
}

.icon-ticket {
    background: rgba(16, 185, 129, 0.18);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 0 14px rgba(16, 185, 129, 0.25);
}

.icon-email {
    background: rgba(14, 165, 233, 0.18);
    border: 1px solid rgba(14, 165, 233, 0.4);
    box-shadow: 0 0 14px rgba(14, 165, 233, 0.25);
}

.channel-name {
    font-size: 11.5px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* Light mode styles */
body.light-mode .platform-overview-card {
    background: radial-gradient(100% 120% at 50% 0%, rgba(243, 232, 255, 0.8) 0%, rgba(255, 255, 255, 0.95) 50%, rgba(248, 250, 252, 0.98) 100%);
    border-color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.08);
}

body.light-mode .platform-brand-text,
body.light-mode .platform-main-heading,
body.light-mode .detail-card-title,
body.light-mode .summary-preview-title {
    color: #0f172a;
}

body.light-mode .iso-tag-callout {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.9);
    color: #0f172a;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

body.light-mode .evaluation-layer-showcase-card {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

body.light-mode .eval-brand-name {
    color: #0f172a;
}

body.light-mode .eval-layer-title {
    color: #64748b;
}

body.light-mode .eval-engine-pill {
    background: rgba(94, 234, 212, 0.12);
    border-color: rgba(94, 234, 212, 0.4);
    color: #0F766E;
}

body.light-mode .eval-channel-card {
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body.light-mode .channel-name {
    color: #0f172a;
}

body.light-mode .pillar-detail-pane {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.9);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06);
}

body.light-mode .detail-card-subhead {
    color: #1e293b;
}

body.light-mode .detail-mockup-frame {
    background: #f8fafc;
    border-color: rgba(226, 232, 240, 0.95);
}

body.light-mode .mockup-chip,
body.light-mode .metric-pill,
body.light-mode .bot-status-pill {
    background: #ffffff;
    border-color: rgba(226, 232, 240, 0.9);
    color: #0f172a;
}

body.light-mode .mockup-summary-preview,
body.light-mode .mockup-live-audit-panel {
    background: #ffffff;
}

body.light-mode .platform-title-gradient,
body.light-mode .how-it-works-title-gradient,
body.light-mode .integrations-title-gradient,
body.light-mode .headline-gradient {
    background: linear-gradient(135deg, #0284C7 0%, #0F766E 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    display: inline-block;
}

/* Responsive styles */
@media (max-width: 1024px) {
    .platform-stage-grid {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .mockup-purple {
        grid-template-columns: 1fr;
    }
    .eval-channels-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    .eval-tree-lines-wrap {
        display: none;
    }
}

@media (max-width: 768px) {
    .platform-three-pillars-section {
        padding: 24px 14px 44px;
    }
    .platform-overview-card {
        padding: 24px 16px;
        border-radius: 22px;
    }
    .platform-card-header {
        margin-bottom: 20px;
        padding-bottom: 12px;
    }
    .platform-brand-text {
        font-size: 16px;
    }
    .platform-main-heading {
        font-size: clamp(24px, 5.8vw, 36px);
        line-height: 1.18;
        margin-bottom: 10px;
    }
    .platform-main-desc {
        font-size: 13.5px;
        line-height: 1.5;
    }
    .platform-stage-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    .platform-cards-selector-col {
        min-height: auto;
    }
    .iso-stack-scene {
        width: 100%;
        max-width: 380px;
        height: 280px;
        margin: 0 auto;
    }
    .iso-plate {
        width: 155px;
        height: 72px;
        left: 10px;
    }
    .layer-purple { top: 14px; }
    .layer-blue { top: 94px; }
    .layer-green { top: 174px; }
    .iso-tag-callout {
        font-size: 11.5px;
        padding: 6px 12px;
        right: 4px;
    }
    .tag-purple { top: 32px; }
    .tag-blue { top: 112px; }
    .tag-green { top: 192px; }
    .iso-connector-lines {
        display: none;
    }
    .platform-detail-display-col {
        width: 100%;
    }
    .pillar-detail-pane {
        padding: 20px 16px;
        border-radius: 20px;
    }
}

@media (max-width: 640px) {
    .eval-channels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .eval-engine-pill {
        font-size: 12px;
        padding: 7px 18px;
    }
}

/* ==========================================
   11. HOW IT WORKS SECTION (4-Stage Pipeline)
   ========================================== */
.how-it-works-section {
    position: relative;
    padding: 120px 24px 100px;
    max-width: 1440px;
    margin: 0 auto;
    color: #ffffff;
    overflow: visible;
}

/* Background Flow Sine Wave with glowing node dots */
.how-it-works-bg-wave-wrap {
    position: absolute;
    top: 240px;
    left: 0;
    right: 0;
    width: 100%;
    height: 400px;
    pointer-events: none;
    z-index: 0;
    opacity: 0.75;
}

.how-it-works-bg-wave {
    width: 100%;
    height: 100%;
}

.flow-wave-path {
    stroke-dasharray: 6 8;
    animation: flowWaveDash 25s linear infinite;
}

@keyframes flowWaveDash {
    0% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -300; }
}

.badge-frosted {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #cbd5e1;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.how-it-works-section .section-header-center {
    text-align: center;
    max-width: 920px;
    margin: 0 auto 56px;
}

.how-it-works-section .section-headline {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.03em;
    margin-bottom: 20px;
    color: #ffffff;
}

.how-it-works-section .section-subheadline {
    font-size: 18px;
    color: #94a3b8;
    line-height: 1.6;
    max-width: 740px;
    margin: 0 auto;
    font-weight: 400;
}

.headline-gradient {
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 45%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* 4-Stage Pipeline Flow Container */
.pipeline-interactive-deck {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-top: 48px;
    gap: 0;
}

/* Thick Frosted Glass Pipeline Card */
.pipeline-card {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(15, 23, 42, 0.75) 100%);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 26px 22px 24px;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    transition: all 0.38s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}

.pipeline-card:hover {
    transform: translateY(-8px);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(129, 140, 248, 0.25), inset 0 1px 2px rgba(255, 255, 255, 0.35);
}

.card-audit:hover {
    border-color: rgba(94, 234, 212, 0.5);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(94, 234, 212, 0.28);
}
.card-automation:hover {
    border-color: rgba(94, 234, 212, 0.5);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(94, 234, 212, 0.28);
}
.card-insights:hover {
    border-color: rgba(16, 185, 129, 0.5);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(16, 185, 129, 0.28);
}
.card-inference:hover {
    border-color: rgba(94, 234, 212, 0.5);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(94, 234, 212, 0.28);
}

/* Card Header with Number, Main Icon and Visual Graphics */
.pcard-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 22px;
    position: relative;
    min-height: 82px;
}

.pcard-num {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    font-family: 'Space Grotesk', ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
    letter-spacing: 0.5px;
    position: absolute;
    top: 0;
    left: 0;
}

.pcard-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 28px;
    flex-shrink: 0;
    transition: transform 0.35s ease;
}

.pipeline-card:hover .pcard-icon {
    transform: scale(1.08) rotate(3deg);
}

.icon-audit {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.22) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 8px 20px rgba(94, 234, 212, 0.22);
}

.icon-automation {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.22) 0%, rgba(94, 234, 212, 0.1) 100%);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 8px 20px rgba(94, 234, 212, 0.22);
}

.icon-insights {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.22) 0%, rgba(52, 211, 153, 0.1) 100%);
    border: 1px solid rgba(16, 185, 129, 0.4);
    box-shadow: 0 8px 20px rgba(16, 185, 129, 0.22);
}

.icon-inference {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.22) 0%, rgba(129, 140, 248, 0.1) 100%);
    border: 1px solid rgba(94, 234, 212, 0.4);
    box-shadow: 0 8px 20px rgba(94, 234, 212, 0.22);
}

/* Card Visual Containers (Right side of Card Header) */
.pcard-visual {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 80px;
    position: relative;
    padding-left: 10px;
}

/* 1. AUDIT VISUAL: Live Audio Waveform & Particles */
.live-audio-spectrum {
    display: flex;
    align-items: center;
    gap: 3.5px;
    height: 48px;
    padding: 6px 10px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.18);
    border-radius: 12px;
    position: relative;
}

.live-audio-spectrum .bar {
    width: 3px;
    min-height: 4px;
    background: linear-gradient(180deg, #5EEAD4 0%, #5EEAD4 100%);
    border-radius: 999px;
    animation: audioWavePulse 1.4s ease-in-out infinite alternate;
}

.live-audio-spectrum .bar.b1  { height: 14px; animation-delay: 0.1s; }
.live-audio-spectrum .bar.b2  { height: 26px; animation-delay: 0.3s; }
.live-audio-spectrum .bar.b3  { height: 38px; animation-delay: 0.6s; }
.live-audio-spectrum .bar.b4  { height: 20px; animation-delay: 0.2s; }
.live-audio-spectrum .bar.b5  { height: 44px; animation-delay: 0.8s; }
.live-audio-spectrum .bar.b6  { height: 32px; animation-delay: 0.4s; }
.live-audio-spectrum .bar.b7  { height: 46px; animation-delay: 0.9s; }
.live-audio-spectrum .bar.b8  { height: 28px; animation-delay: 0.5s; }
.live-audio-spectrum .bar.b9  { height: 36px; animation-delay: 0.7s; }
.live-audio-spectrum .bar.b10 { height: 22px; animation-delay: 0.25s; }
.live-audio-spectrum .bar.b11 { height: 30px; animation-delay: 0.45s; }
.live-audio-spectrum .bar.b12 { height: 12px; animation-delay: 0.15s; }

@keyframes audioWavePulse {
    0% { transform: scaleY(0.35); opacity: 0.6; }
    50% { transform: scaleY(1); opacity: 1; filter: drop-shadow(0 0 6px #5EEAD4); }
    100% { transform: scaleY(0.45); opacity: 0.75; }
}

.wave-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.wave-particles .p-dot {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 6px #5EEAD4;
    animation: particleFloat 3s infinite ease-in-out;
}

.wave-particles .dot1 { top: 6px; right: 8px; animation-delay: 0.2s; }
.wave-particles .dot2 { bottom: 8px; left: 14px; animation-delay: 1.1s; }
.wave-particles .dot3 { top: 12px; left: 40%; animation-delay: 1.8s; }

@keyframes particleFloat {
    0%, 100% { transform: translateY(0) scale(0.8); opacity: 0.3; }
    50% { transform: translateY(-8px) scale(1.4); opacity: 1; }
}

/* 2. AUTOMATION VISUAL: 3D Floating CRM App Tiles */
.floating-apps-grid {
    display: grid;
    grid-template-columns: repeat(3, 26px);
    gap: 6px;
    transform: perspective(300px) rotateY(-8deg) rotateX(6deg);
    padding: 6px;
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.18);
    border-radius: 12px;
}

.app-tile {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.app-tile:nth-child(odd) {
    animation: appTileBob1 3.5s ease-in-out infinite;
}

.app-tile:nth-child(even) {
    animation: appTileBob2 3.5s ease-in-out infinite;
}

.app-tile.tile-salesforce { animation-delay: 0s; }
.app-tile.tile-hubspot    { animation-delay: 0.4s; }
.app-tile.tile-slack      { animation-delay: 0.8s; }
.app-tile.tile-jira       { animation-delay: 1.2s; }
.app-tile.tile-zoom       { animation-delay: 1.6s; }
.app-tile.tile-box        { animation-delay: 2.0s; }

@keyframes appTileBob1 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes appTileBob2 {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(3px); }
}

/* 3. INSIGHTS VISUAL: Upward Trending Conversion Chart */
.conversion-chart-box {
    position: relative;
    width: 120px;
    height: 64px;
    background: rgba(16, 185, 129, 0.06);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 12px;
    padding: 8px 6px 2px;
}

.chart-callout-pill {
    position: absolute;
    top: -9px;
    right: 4px;
    font-size: 8.5px;
    font-weight: 700;
    color: #059669;
    background: #ecfdf5;
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    padding: 1.5px 7px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.chart-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.animated-chart-curve {
    stroke-dasharray: 200;
    stroke-dashoffset: 0;
    animation: chartCurveGlow 3s ease-in-out infinite alternate;
}

@keyframes chartCurveGlow {
    0% { filter: drop-shadow(0 0 1px #10b981); opacity: 0.85; }
    100% { filter: drop-shadow(0 0 6px #34d399); opacity: 1; }
}

/* 4. INFERENCE VISUAL: Concentric Radar Bullseye & Lead Pin */
.radar-target-box {
    position: relative;
    width: 90px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-callout-tag {
    position: absolute;
    top: -10px;
    right: -6px;
    font-size: 8px;
    font-weight: 700;
    color: #0F766E;
    background: #eef2ff;
    border: 1px solid rgba(94, 234, 212, 0.35);
    border-radius: 999px;
    padding: 1.5px 7px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(94, 234, 212, 0.2);
    animation: radarTagFloat 3.2s ease-in-out infinite;
    z-index: 5;
}

.radar-callout-tag .sparkle {
    color: #5EEAD4;
    margin-right: 2px;
}

@keyframes radarTagFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

.radar-circles {
    position: relative;
    width: 58px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(94, 234, 212, 0.28);
    pointer-events: none;
}

.ring-outer {
    width: 56px;
    height: 56px;
    animation: radarPulseRing 3.5s ease-out infinite;
}

.ring-mid {
    width: 38px;
    height: 38px;
    border-color: rgba(94, 234, 212, 0.4);
}

.ring-inner {
    width: 20px;
    height: 20px;
    border-color: rgba(94, 234, 212, 0.55);
}

.radar-center-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px #5EEAD4;
}

.radar-lead-pin {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0F766E;
    border: 2px solid #ffffff;
    box-shadow: 0 0 10px #5EEAD4, 0 0 4px #0F766E;
    animation: leadPinPulse 2s ease-in-out infinite;
}

@keyframes radarPulseRing {
    0% { transform: scale(0.85); opacity: 0.8; }
    50% { transform: scale(1.1); opacity: 0.3; }
    100% { transform: scale(0.85); opacity: 0.8; }
}

@keyframes leadPinPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 10px #5EEAD4; }
    50% { transform: scale(1.3); box-shadow: 0 0 16px #5EEAD4, 0 0 6px #5EEAD4; }
}

/* Card Body Details */
.pcard-body {
    margin-bottom: 20px;
}

.pcard-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.tag-audit      { color: #5EEAD4; }
.tag-automation { color: #5EEAD4; }
.tag-insights   { color: #34d399; }
.tag-inference  { color: #5EEAD4; }

.pcard-stat-wrap {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
}

.pcard-stat-num {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    color: #ffffff;
    letter-spacing: -0.02em;
}

.pcard-stat-label {
    font-size: 14px;
    font-weight: 700;
    color: #e2e8f0;
    margin-top: 2px;
}

.pcard-desc {
    font-size: 12.5px;
    line-height: 1.55;
    color: #94a3b8;
    margin-top: 8px;
}

/* Card Bottom Checklist */
.pcard-checklist {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pcheck-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 500;
    color: #cbd5e1;
}

.check-icon-circle {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.check-purple { background: #0F766E; box-shadow: 0 2px 6px rgba(147, 51, 234, 0.4); }
.check-blue   { background: #0F766E; box-shadow: 0 2px 6px rgba(15, 118, 110, 0.4); }
.check-green  { background: #059669; box-shadow: 0 2px 6px rgba(5, 150, 105, 0.4); }
.check-indigo { background: #0F766E; box-shadow: 0 2px 6px rgba(79, 70, 229, 0.4); }

/* ==========================================
   FLUID RIBBON CONNECTORS (Between Cards)
   ========================================== */
.pipeline-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    margin: 0 -18px;
    position: relative;
    z-index: 10;
    align-self: center;
}

.conn-ribbon-wave {
    position: relative;
    width: 52px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.conn-svg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 6px rgba(129, 140, 248, 0.5));
}

.conn-orb-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5EEAD4 0%, #8b5cf6 100%);
    border: 2px solid rgba(255, 255, 255, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(139, 92, 246, 0.6), 0 4px 12px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    z-index: 2;
    animation: orbButtonPulse 3s infinite ease-in-out;
}

.conn-orb-btn:hover {
    transform: scale(1.18);
    box-shadow: 0 0 24px rgba(139, 92, 246, 0.9), 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 3px rgba(255, 255, 255, 0.9);
}

.conn-orb-btn svg {
    transition: transform 0.3s ease;
}

.conn-orb-btn:hover svg {
    transform: translateX(2px);
}

@keyframes orbButtonPulse {
    0%, 100% { box-shadow: 0 0 14px rgba(139, 92, 246, 0.5), 0 4px 12px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 22px rgba(94, 234, 212, 0.8), 0 4px 14px rgba(0, 0, 0, 0.5); }
}

/* ==========================================
   HOW IT WORKS: RESPONSIVE BREAKPOINTS
   ========================================== */
@media (max-width: 1100px) {
    .how-it-works-section .section-headline {
        font-size: 46px;
    }
    .pipeline-interactive-deck {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
    .pipeline-connector {
        display: none;
    }
}

@media (max-width: 680px) {
    .how-it-works-section .section-headline {
        font-size: 36px;
    }
    .how-it-works-section .section-subheadline {
        font-size: 15px;
    }
    .pipeline-interactive-deck {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .pcard-header {
        min-height: 70px;
    }
    .pcard-stat-num {
        font-size: 30px;
    }
}

/* ==========================================
   12. THE GOODMEETINGS PLATFORM SHOWCASE
   ========================================== */
.platform-section {
    position: relative;
    padding: 100px 24px 90px;
    max-width: 1440px;
    margin: 0 auto;
    color: #ffffff;
}

.platform-architecture-box {
    position: relative;
    background: rgba(15, 23, 42, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 28px;
    padding: 48px 40px;
    backdrop-filter: blur(24px);
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.arch-bg-glow {
    position: absolute;
    width: 380px;
    height: 380px;
    border-radius: 50%;
    filter: blur(100px);
    pointer-events: none;
    opacity: 0.2;
}

.arch-glow-top {
    top: -100px;
    right: 15%;
    background: #5EEAD4;
}

.arch-glow-bottom {
    bottom: -100px;
    left: 15%;
    background: #5EEAD4;
}

.arch-channels-title {
    text-align: center;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.live-stream-beacon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 14px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    margin-bottom: 12px;
    position: relative;
}

.beacon-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 10px #10b981;
}

.beacon-pulse {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.6);
    animation: beaconPulse 2s infinite ease-out;
}

@keyframes beaconPulse {
    0% { transform: translateY(-50%) scale(1); opacity: 1; }
    100% { transform: translateY(-50%) scale(2.6); opacity: 0; }
}

.beacon-text {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #6ee7b7;
    text-transform: uppercase;
}

.arch-channels-title h3 {
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #ffffff;
    margin: 0 0 6px;
}

.arch-channels-subtitle {
    font-size: 13px;
    color: #94a3b8;
    max-width: 620px;
    margin: 0 auto;
    line-height: 1.45;
}

/* 6 Omnichannel Interaction Channel Cards */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 2;
}

.channel-card {
    background: rgba(15, 23, 42, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: 16px 12px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    backdrop-filter: blur(20px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}

.channel-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.channel-card {
    position: relative;
    overflow: hidden;
}

.channel-card-glow {
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at center, rgba(94, 234, 212, 0.08) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transform: scale(0.8);
}

.channel-card.ch-purple .channel-card-glow { background: radial-gradient(circle at center, rgba(94, 234, 212, 0.15) 0%, transparent 70%); }
.channel-card.ch-blue .channel-card-glow { background: radial-gradient(circle at center, rgba(94, 234, 212, 0.15) 0%, transparent 70%); }
.channel-card.ch-teal .channel-card-glow { background: radial-gradient(circle at center, rgba(45, 212, 191, 0.15) 0%, transparent 70%); }
.channel-card.ch-orange .channel-card-glow { background: radial-gradient(circle at center, rgba(249, 115, 22, 0.15) 0%, transparent 70%); }
.channel-card.ch-indigo .channel-card-glow { background: radial-gradient(circle at center, rgba(94, 234, 212, 0.15) 0%, transparent 70%); }

.channel-card:hover .channel-card-glow {
    opacity: 1;
    transform: scale(1.1);
}

.channel-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), transparent 60%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.channel-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.channel-card.ch-purple:hover {
    border-color: rgba(94, 234, 212, 0.7);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(94, 234, 212, 0.35);
}

.channel-card.ch-blue:hover {
    border-color: rgba(94, 234, 212, 0.7);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(94, 234, 212, 0.35);
}

.channel-card.ch-teal:hover {
    border-color: rgba(45, 212, 191, 0.7);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(45, 212, 191, 0.35);
}

.channel-card.ch-orange:hover {
    border-color: rgba(249, 115, 22, 0.7);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(249, 115, 22, 0.35);
}

.channel-card.ch-indigo:hover {
    border-color: rgba(94, 234, 212, 0.7);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7), 0 0 28px rgba(94, 234, 212, 0.35);
}

/* Card Header with Badges & Live Micro-Indicators */
.channel-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

.ch-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.channel-card:hover .ch-badge {
    transform: scale(1.05);
}

.badge-human {
    background: rgba(94, 234, 212, 0.18);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.35);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.15);
}

.badge-ai {
    background: rgba(94, 234, 212, 0.18);
    color: #A9B8CE;
    border: 1px solid rgba(94, 234, 212, 0.35);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.15);
}

.badge-hybrid {
    background: rgba(249, 115, 22, 0.18);
    color: #fdba74;
    border: 1px solid rgba(249, 115, 22, 0.35);
    box-shadow: 0 0 10px rgba(249, 115, 22, 0.15);
}

.badge-system {
    background: rgba(94, 234, 212, 0.18);
    color: #c7d2fe;
    border: 1px solid rgba(94, 234, 212, 0.35);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.15);
}

/* Multi-bar Animated Equalizer */
.ch-live-indicator {
    display: flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 14px;
    padding: 0 2px;
}

.eq-bar {
    width: 2.5px;
    background: #5EEAD4;
    border-radius: 2px;
    box-shadow: 0 0 6px rgba(94, 234, 212, 0.6);
}

.eq-bar:nth-child(1) { height: 5px; animation: eqBounce1 0.75s infinite ease-in-out alternate; }
.eq-bar:nth-child(2) { height: 12px; animation: eqBounce2 1.05s infinite ease-in-out alternate; }
.eq-bar:nth-child(3) { height: 7px; animation: eqBounce3 0.85s infinite ease-in-out alternate; }
.eq-bar:nth-child(4) { height: 13px; animation: eqBounce4 1.25s infinite ease-in-out alternate; }
.eq-bar:nth-child(5) { height: 6px; animation: eqBounce5 0.65s infinite ease-in-out alternate; }

@keyframes eqBounce1 { 0% { height: 3px; } 100% { height: 11px; } }
@keyframes eqBounce2 { 0% { height: 6px; } 100% { height: 14px; } }
@keyframes eqBounce3 { 0% { height: 4px; } 100% { height: 9px; } }
@keyframes eqBounce4 { 0% { height: 7px; } 100% { height: 14px; } }
@keyframes eqBounce5 { 0% { height: 2px; } 100% { height: 10px; } }

/* Sonar Radar Pulse */
.ch-sonar-wrap {
    position: relative;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sonar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1.5px solid #5EEAD4;
    opacity: 0;
    pointer-events: none;
    animation: sonarWave 2s infinite cubic-bezier(0.1, 0.7, 0.3, 1);
}

.sonar-ring.r1 { width: 14px; height: 14px; animation-delay: 0s; }
.sonar-ring.r2 { width: 22px; height: 22px; animation-delay: 0.8s; }

@keyframes sonarWave {
    0% { transform: scale(0.4); opacity: 0.9; }
    80% { opacity: 0.15; }
    100% { transform: scale(1.6); opacity: 0; }
}

.pulse-ring-mini {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    animation: miniBeacon 1.4s infinite ease-in-out;
    position: relative;
    z-index: 2;
}

@keyframes miniBeacon {
    0%, 100% { transform: scale(0.85); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; box-shadow: 0 0 14px #5EEAD4; }
}

/* Typing Dots Mini */
.ch-typing-dots {
    display: flex;
    align-items: center;
    gap: 3.5px;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
}

.ch-typing-dots span {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 6px #5EEAD4;
    animation: typingBlink 1.3s infinite ease-in-out;
}

.ch-typing-dots span:nth-child(1) { animation-delay: 0s; }
.ch-typing-dots span:nth-child(2) { animation-delay: 0.22s; }
.ch-typing-dots span:nth-child(3) { animation-delay: 0.44s; }

@keyframes typingBlink {
    0%, 100% { transform: translateY(0); opacity: 0.35; }
    50% { transform: translateY(-3px); opacity: 1; }
}

/* REC Red Blink Badge */
.ch-rec-badge {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 8.5px;
    font-weight: 800;
    color: #ef4444;
    letter-spacing: 0.6px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.rec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 8px #ef4444;
    animation: recBlink 1s infinite ease-in-out;
}

@keyframes recBlink {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(0.8); }
}

/* System Flow Spark */
.ch-flow-spark {
    color: #5EEAD4;
    display: flex;
    align-items: center;
    animation: sparkPulse 1.8s infinite ease-in-out;
    padding: 2px;
}

@keyframes sparkPulse {
    0%, 100% { opacity: 0.6; transform: scale(0.9) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.2) rotate(10deg); filter: drop-shadow(0 0 6px #5EEAD4); }
}

/* Send Beam */
.ch-send-beam {
    color: #5EEAD4;
    display: flex;
    align-items: center;
    animation: sendGlide 2.2s infinite ease-in-out;
}

@keyframes sendGlide {
    0%, 100% { transform: translate(0, 0); opacity: 0.7; }
    50% { transform: translate(3px, -3px); opacity: 1; filter: drop-shadow(0 0 6px #5EEAD4); }
}

/* Icon Wrap Aura & Scanner */
.icon-pulse-aura {
    position: absolute;
    inset: -6px;
    border-radius: 18px;
    opacity: 0.4;
    filter: blur(8px);
    pointer-events: none;
    animation: auraBreathe 3s infinite ease-in-out;
}

.aura-purple, .aura-blue, .aura-teal, .aura-orange, .aura-indigo { 
    background: rgba(94, 234, 212, 0.35); 
}

@keyframes auraBreathe {
    0%, 100% { opacity: 0.25; transform: scale(0.92); }
    50% { opacity: 0.65; transform: scale(1.08); }
}

/* Video Live Scanline */
.has-scanner {
    overflow: hidden;
}

.scan-laser-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1.5px;
    background: linear-gradient(90deg, transparent 0%, rgba(94, 234, 212, 0.3) 30%, #5EEAD4 50%, rgba(94, 234, 212, 0.3) 70%, transparent 100%);
    box-shadow: 0 0 6px #5EEAD4;
    animation: scanSweep 2s infinite linear;
    pointer-events: none;
    z-index: 3;
}

@keyframes scanSweep {
    0% { transform: translateY(0); opacity: 0.2; }
    50% { opacity: 0.9; }
    100% { transform: translateY(46px); opacity: 0.2; }
}

/* Channel Icons & Omnichannel Badges */

.channel-icon-wrap {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.channel-card:hover .channel-icon-wrap {
    transform: scale(1.15) translateY(-3px);
}

.channel-info {
    margin-bottom: 10px;
    flex-grow: 1;
}

.channel-info h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 3px;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.channel-card:hover .channel-info h4 {
    color: #ffffff;
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

.channel-info p {
    font-size: 11px;
    color: #8494B0;
    margin: 0;
    line-height: 1.3;
}

/* Channel Metric Chip */
.channel-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.2);
    font-size: 10px;
    font-weight: 600;
    color: #5EEAD4;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.channel-card:hover .channel-metric-chip {
    background: rgba(94, 234, 212, 0.15);
    border-color: rgba(94, 234, 212, 0.35);
    color: #ffffff;
}

.channel-metric-chip .chip-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    animation: chipBeacon 1.6s infinite ease-in-out;
}

.chip-purple .chip-dot,
.chip-blue .chip-dot,
.chip-teal .chip-dot,
.chip-orange .chip-dot,
.chip-indigo .chip-dot { 
    background: #5EEAD4; 
    box-shadow: 0 0 8px #5EEAD4; 
}

@keyframes chipBeacon {
    0%, 100% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.25); opacity: 1; }
}

/* ==========================================
   CONFLUENCE LASER FLOW ANIMATION
   ========================================== */
.arch-confluence-flow {
    width: 100%;
    max-width: 960px;
    margin: 4px auto 8px;
    height: 65px;
    position: relative;
}

.confluence-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.laser-track {
    fill: none;
    stroke: rgba(228, 233, 242, 0.08);
    stroke-width: 1.5;
}

.laser-beam {
    fill: none;
    stroke: url(#beam-grad);
    stroke-width: 2.2;
    stroke-dasharray: 8 18;
    animation: laserDataStream 2s linear infinite;
}

.beam-1, .beam-2, .beam-3, .beam-4, .beam-5, .beam-6 { 
    stroke: #5EEAD4; 
}

@keyframes laserDataStream {
    from { stroke-dashoffset: 52; }
    to { stroke-dashoffset: 0; }
}

.laser-focal-point {
    fill: #5EEAD4;
    box-shadow: 0 0 20px #5EEAD4;
    animation: focalPulse 1.8s infinite alternate ease-in-out;
}

@keyframes focalPulse {
    0% { r: 4; fill: #5EEAD4; }
    100% { r: 6.5; fill: #2dd4bf; filter: drop-shadow(0 0 12px #5EEAD4); }
}

/* ==========================================================================
   EVALUATION LAYER SHOWCASE
   ========================================================================== */
.evaluation-layer-showcase {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 8px auto 20px;
    padding: 16px 12px 10px;
    text-align: center;
    z-index: 2;
}

/* Ambient Sparkle Dots */
.eval-ambient-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px #5EEAD4;
    pointer-events: none;
    animation: evalPulseSparkle 3s ease-in-out infinite alternate;
}
.eval-ambient-dot.dot-1,
.eval-ambient-dot.dot-2,
.eval-ambient-dot.dot-3,
.eval-ambient-dot.dot-4,
.eval-ambient-dot.dot-5 { 
    background: #5EEAD4; 
    box-shadow: 0 0 10px #5EEAD4; 
}

@keyframes evalPulseSparkle {
    0% { opacity: 0.35; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1.3); }
}

/* Header Section (Minimized) */
.eval-showcase-header {
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.eval-brand-tag {
    font-size: 14px;
    font-weight: 750;
    letter-spacing: 0.12em;
    color: #A9B8CE;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.eval-layer-title {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.05em;
    color: #5EEAD4;
    margin: 3px 0 0;
    line-height: 1.15;
    text-transform: none;
    background: linear-gradient(135deg, #FFFFFF 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 14px rgba(94, 234, 212, 0.4));
}

.eval-title-glow-line {
    width: 90px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #5EEAD4, transparent);
    margin: 5px auto 0;
    opacity: 0.75;
}

.eval-layer-subtitle {
    font-size: 13px;
    font-weight: 500;
    color: #94a3b8;
    margin: 6px 0 0;
    letter-spacing: 0.01em;
}

/* Floating Dark Glass 5-Column Feature Card (Compact) */
.eval-feature-card,
.eval-white-card {
    background: linear-gradient(135deg, rgba(24, 20, 48, 0.88) 0%, rgba(13, 17, 34, 0.95) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 16px;
    padding: 18px 12px 20px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 20px 45px -15px rgba(0, 0, 0, 0.8), 0 0 35px rgba(94, 234, 212, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.28);
    position: relative;
    z-index: 1;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.eval-feature-card:hover,
.eval-white-card:hover {
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 24px 55px -15px rgba(0, 0, 0, 0.85), 0 0 40px rgba(94, 234, 212, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.12);
}

/* Columns & Separators */
.eval-feature-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 2px 10px;
    position: relative;
    transition: transform 0.25s ease;
}

.eval-feature-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(255, 255, 255, 0.07);
}

/* Minimized Glowing Purple/Blue Icon Box */
.eval-icon-box {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.28);
    color: #5EEAD4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    box-shadow: 0 0 12px rgba(94, 234, 212, 0.14);
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease;
}

.eval-icon-box svg {
    width: 16px;
    height: 16px;
}

.eval-feature-col:hover .eval-icon-box {
    transform: translateY(-2px);
    background: rgba(94, 234, 212, 0.22);
    border-color: rgba(232, 121, 249, 0.55);
    color: #e879f9;
    box-shadow: 0 0 18px rgba(94, 234, 212, 0.35);
}

.eval-col-title {
    font-size: 13px;
    font-weight: 750;
    color: #ffffff;
    line-height: 1.25;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.eval-col-desc {
    font-size: 11px;
    line-height: 1.38;
    color: #94a3b8;
    margin: 0;
    font-weight: 400;
}

/* Responsive adjustments */
@media (max-width: 960px) {
    .eval-feature-card,
    .eval-white-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 0;
        padding: 16px 10px;
    }
    .eval-feature-col:not(:last-child)::after {
        display: none;
    }
    .eval-feature-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        padding-bottom: 12px;
    }
    .eval-brand-tag {
        font-size: 13px;
    }
    .eval-layer-title {
        font-size: 19px;
    }
}

@media (max-width: 640px) {
    .eval-feature-card,
    .eval-white-card {
        grid-template-columns: 1fr;
        padding: 14px 12px;
    }
    .eval-brand-tag {
        font-size: 12px;
    }
    .eval-layer-title {
        font-size: 17px;
    }
}

.platform-banner-callout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 28px;
    border-radius: 16px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
}

.platform-banner-callout p {
    font-size: 14px;
    color: #e2e8f0;
    margin: 0;
    line-height: 1.5;
}

.platform-banner-callout strong {
    color: #ffffff;
}

.callout-sparkle {
    font-size: 18px;
    color: #5EEAD4;
}

/* Scroll Animation Transitions */
.how-it-works-section, .platform-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.how-it-works-section.visible, .platform-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Responsive queries */
@media (max-width: 1024px) {
    .pipeline-stages-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .channels-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .pipeline-stages-grid {
        grid-template-columns: 1fr;
    }
    .channels-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .hero-metrics-strip {
        flex-direction: column;
        gap: 20px;
        padding: 24px;
    }
    .metric-divider {
        width: 100%;
        height: 1px;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }
    .section-headline {
        font-size: 32px;
    }
}

/* ==========================================
   12. DARK / LIGHT MODE THEME CONTROLLER
   ========================================== */

/* Theme Toggle Button */
.theme-toggle-btn {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    width: 60px;
    height: 32px;
    border-radius: 999px;
    padding: 3px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    position: relative;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    user-select: none;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
}

.theme-toggle-btn * {
    pointer-events: none !important;
}

.theme-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(94, 234, 212, 0.5);
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.3);
    transform: translateY(-1px);
}

.theme-toggle-track {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
}

.theme-toggle-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5EEAD4 0%, #5EEAD4 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease;
    transform: translateX(0);
}

.theme-icon {
    position: absolute;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.sun-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #fef08a;
}

.moon-icon {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
    color: #ffffff;
}

/* ==========================================
   LIGHT MODE STYLING SYSTEM
   ========================================== */
body.light-mode,
html.light-mode {
    /* Core Light Theme Tokens */
    --bg-navy: #FFFFFF;
    --bg-secondary-dark: #F6F8FB;
    --bg-black: #FFFFFF;
    --bg-darker: #F6F8FB;
    --bg-card: #FFFFFF;
    --border-color: #E4E9F2;
    --border-dark: #E4E9F2;
    --border-light: #E4E9F2;
    
    /* Text on Light */
    --text-white: #0B1426;
    --text-heading-dark: #0B1426;
    --text-body-dark: #52607A;
    --text-body-dark-alt: #52607A;
    --text-muted: #52607A;
    --text-muted-dark: #8494B0;
    
    --text-heading-light: #0B1426;
    --text-body-light: #52607A;
    
    /* Accent (Teal) System */
    --accent-teal: #0F766E;
    --accent-teal-hover: #0d655f;
    --accent-teal-dark: #0F766E;
    --accent-tint-1: #DDF6F1;
    --accent-tint-2: #E6F7F3;
    --accent-blue: #0F766E;
    --accent-glow: rgba(15, 118, 110, 0.15);
    
    background-color: #F6F8FB !important;
    color: #52607A !important;
    transition: background-color 0.35s ease, color 0.35s ease;
}

/* Base Light Mode Typography & Visibility */
body.light-mode h1,
body.light-mode h2,
body.light-mode h3,
body.light-mode h4,
body.light-mode h5,
body.light-mode h6 {
    color: #0B1426;
}

body.light-mode p,
body.light-mode li,
body.light-mode label {
    color: #52607A;
}

/* Ensure buttons maintain high-contrast readable text */
body.light-mode .btn-primary,
body.light-mode .nav-signup,
body.light-mode .cta-primary-btn,
body.light-mode .stories-primary-btn,
body.light-mode .main-booking-btn,
body.light-mode .booking-submit-confirm-btn {
    color: #FFFFFF !important;
}

/* Secondary & Ghost Buttons in Light Mode */
body.light-mode .btn-secondary,
body.light-mode .cta-sec-btn {
    background-color: #FFFFFF;
    color: #0B1426;
    border: 1px solid #E4E9F2;
}

/* Hero Mini Floating Cards */
body.light-mode .card-text h4 {
    color: #0B1426;
}

body.light-mode .card-text p {
    color: #52607A;
}

/* Leaders Arch Testimonials (Pixel-Perfect Visibility) */
body.light-mode .leader-card-inner {
    background: #FFFFFF !important;
    border-color: #E4E9F2 !important;
    box-shadow: 0 10px 25px -5px rgba(11, 20, 38, 0.08) !important;
}

body.light-mode .leader-name {
    color: #0B1426 !important;
}

body.light-mode .leader-role {
    color: #0F766E !important;
}

body.light-mode .leader-company {
    color: #52607A !important;
}

/* Three Pillars Cards & Content */
body.light-mode .pillar-name,
body.light-mode .pillar-purple .pillar-name,
body.light-mode .pillar-blue .pillar-name,
body.light-mode .pillar-green .pillar-name {
    color: #0B1426 !important;
}

body.light-mode .pillar-desc {
    color: #52607A !important;
}

/* Evaluation Showcase Feature Grid Titles & Text */
body.light-mode .eval-col-title {
    color: #0B1426 !important;
}

body.light-mode .eval-col-desc {
    color: #52607A !important;
}

/* AI Agents Bottom 4 Use-Case Action Cards */
body.light-mode .ai-usecase-card {
    background: #FFFFFF !important;
    border: 1px solid #E4E9F2 !important;
    box-shadow: 0 12px 32px rgba(11, 20, 38, 0.06) !important;
}

body.light-mode .usecase-title {
    color: #0B1426 !important;
}

body.light-mode .usecase-desc {
    color: #52607A !important;
}

body.light-mode .usecase-icon-wrap {
    background: #E6F7F3 !important;
    color: #0F766E !important;
    border: 1px solid #DDF6F1 !important;
    box-shadow: none !important;
}

body.light-mode .usecase-action-pill {
    background: #F6F8FB !important;
    border-color: #E4E9F2 !important;
    color: #0F766E !important;
}

body.light-mode .usecase-action-pill:hover {
    background: #E6F7F3 !important;
    border-color: #0F766E !important;
    color: #0F766E !important;
}

/* Pipeline Cards Tags & Checklists */
body.light-mode .tag-audit,
body.light-mode .tag-automation,
body.light-mode .tag-insights,
body.light-mode .tag-inference {
    color: #0F766E !important;
}

body.light-mode .pcard-checklist {
    border-top: 1px solid #E4E9F2 !important;
}

body.light-mode .pcheck-item {
    color: #52607A !important;
}

body.light-mode .pcard-stat-label {
    color: #52607A !important;
}

/* Hub & Platform Cards */
body.light-mode .hub-title,
body.light-mode .hub-header h4 {
    color: #0B1426 !important;
}

body.light-mode .hub-desc {
    color: #52607A !important;
}

/* Action Checklist items across features */
body.light-mode .action-check-item {
    color: #52607A !important;
}

body.light-mode .detail-card-num {
    color: #0F766E !important;
}

body.light-mode .metric-meta strong {
    color: #0B1426 !important;
}

body.light-mode .bot-pill-header {
    color: #0B1426 !important;
}

/* Hero Bottom Feature Bar */
body.light-mode .bottom-features-bar {
    border-top: 1px solid #E4E9F2 !important;
}

body.light-mode .bf-icon {
    background: #E6F7F3 !important;
    border-color: #DDF6F1 !important;
    color: #0F766E !important;
}

body.light-mode .bf-text {
    color: #52607A !important;
    font-weight: 600 !important;
}

/* Hero Action CTA Buttons in Light Mode */
body.light-mode .hero-btn-demo {
    background: #0F766E !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 24px rgba(15, 118, 110, 0.3) !important;
}

body.light-mode .hero-btn-demo:hover {
    background: #0d655f !important;
    box-shadow: 0 10px 30px rgba(15, 118, 110, 0.45) !important;
    color: #FFFFFF !important;
}

body.light-mode .hero-btn-how {
    background: #FFFFFF !important;
    border: 1px solid #E4E9F2 !important;
    color: #0B1426 !important;
    box-shadow: 0 4px 14px rgba(11, 20, 38, 0.05) !important;
}

body.light-mode .hero-btn-how:hover {
    background: #F6F8FB !important;
    border-color: #0F766E !important;
    color: #0F766E !important;
}

body.light-mode .btn-book-demo.glass-demo-btn {
    background: #FFFFFF !important;
    border: 1px solid #E4E9F2 !important;
    color: #0B1426 !important;
    box-shadow: 0 4px 14px rgba(11, 20, 38, 0.06) !important;
}

body.light-mode .btn-book-demo.glass-demo-btn:hover {
    background: #F6F8FB !important;
    border-color: #0F766E !important;
    color: #0F766E !important;
}

/* Badges & Pills in Light Mode */
body.light-mode .num-purple,
body.light-mode .num-blue,
body.light-mode .num-green {
    background: #E6F7F3 !important;
    border-color: #DDF6F1 !important;
    color: #0F766E !important;
}

body.light-mode .agent-pill {
    background: #FFFFFF !important;
    border-color: #E4E9F2 !important;
    color: #52607A !important;
}

body.light-mode .badge-human,
body.light-mode .badge-ai {
    background: #E6F7F3 !important;
    color: #0F766E !important;
    border: 1px solid #DDF6F1 !important;
}

body.light-mode .eval-brand-tag {
    color: #52607A !important;
}

body.light-mode .eval-layer-title {
    color: #0B1426 !important;
}

body.light-mode .footer-logo .brand-text {
    color: #0B1426 !important;
}

body.light-mode .footer-mission {
    color: #52607A !important;
}

body.light-mode .system-status {
    background: #E6F7F3 !important;
    border-color: #DDF6F1 !important;
    color: #0F766E !important;
}


/* Light Mode Toggle Button State */
body.light-mode .theme-toggle-btn {
    background: rgba(11, 20, 38, 0.06);
    border-color: #E4E9F2;
}

body.light-mode .theme-toggle-btn:hover {
    background: #E6F7F3;
    border-color: #0F766E;
    box-shadow: 0 0 16px rgba(15, 118, 110, 0.2);
}

body.light-mode .theme-toggle-thumb {
    transform: translateX(28px);
    background: linear-gradient(135deg, #0F766E 0%, #0d9488 100%);
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.4);
}

body.light-mode .sun-icon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

body.light-mode .moon-icon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
    color: #ffffff;
}

/* Light Mode: Navbar (Floating Pill Button) */
body.light-mode .navbar {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 248, 251, 0.92) 100%);
    border: 2px solid #E4E9F2;
    box-shadow: 0 16px 40px rgba(11, 20, 38, 0.08), inset 0 2px 3px rgba(255, 255, 255, 0.8);
}

body.light-mode .navbar.scrolled {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12), 0 0 20px rgba(94, 234, 212, 0.15);
}

body.light-mode .nav-item > a:hover {
    background: rgba(15, 23, 42, 0.05);
}

body.light-mode .nav-login {
    color: #0B1426;
}

body.light-mode .nav-login:hover {
    background: rgba(11, 20, 38, 0.05);
}

body.light-mode .nav-logo {
    color: #0B1426;
}

body.light-mode .nav-logo-icon path {
    fill: #0B1426;
}

body.light-mode .nav-item > a {
    color: #52607A;
}

body.light-mode .nav-item > a:hover {
    color: #0B1426;
    background: #E6F7F3;
}

body.light-mode .dropdown {
    background-color: #ffffff;
    border-color: #E4E9F2;
    box-shadow: 0 20px 50px rgba(11, 20, 38, 0.1);
}

body.light-mode .dropdown.services-menu,
body.light-mode .dropdown.case-studies-menu {
    background: #FFFFFF !important;
    border-color: #E4E9F2;
    box-shadow: 0 20px 50px rgba(11, 20, 38, 0.12), 0 0 30px rgba(15, 118, 110, 0.05);
}

body.light-mode .service-dropdown-item:hover {
    background: #F6F8FB;
}

body.light-mode .service-icon-box {
    background: #E6F7F3;
    color: #0F766E;
    box-shadow: none;
}

body.light-mode .service-dropdown-item:hover .service-icon-box {
    background: #DDF6F1;
    box-shadow: 0 0 16px rgba(15, 118, 110, 0.2);
}

body.light-mode .service-title {
    color: #0B1426;
}

body.light-mode .service-dropdown-item:hover .service-title {
    color: #0F766E;
}

body.light-mode .service-desc {
    color: #52607A;
}

body.light-mode .dropdown-col h4 {
    color: #0B1426;
}

body.light-mode .dropdown-col a {
    color: #52607A;
}

body.light-mode .dropdown-col a:hover {
    color: #0F766E;
    background: #DDF6F1;
}

body.light-mode .pricing-col p,
body.light-mode .pricing-col li {
    color: #52607A;
}

body.light-mode .nav-signup,
body.light-mode .btn-primary {
    background: #0F766E;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

body.light-mode .nav-signup:hover,
body.light-mode .btn-primary:hover {
    background: #115e59;
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35);
}

body.light-mode .btn-secondary {
    background-color: #ffffff;
    color: #0B1426;
    border: 1px solid #E4E9F2;
    box-shadow: 0 2px 8px rgba(11, 20, 38, 0.04);
}

body.light-mode .btn-secondary:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
}

body.light-mode .mobile-menu-btn {
    color: #0f172a;
}

/* Light Mode: Hero Section */
body.light-mode .hero {
    background: radial-gradient(circle at 50% 10%, #f1f5f9 0%, #f8fafc 100%);
}

body.light-mode .hero-main-title {
    color: #0f172a;
}

body.light-mode .hero-main-sub {
    color: #475569;
}

body.light-mode .hero-eyebrow-badge {
    background: rgba(94, 234, 212, 0.1);
    border-color: rgba(94, 234, 212, 0.3);
    color: #0F766E;
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.15);
}

body.light-mode .hero-metrics-strip {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body.light-mode .metric-divider {
    background: rgba(0, 0, 0, 0.08);
}

body.light-mode .hero-metric-item .metric-lbl {
    color: #64748b;
}

body.light-mode .hero-indicator-pill {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.95);
    color: #334155;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body.light-mode .hero-indicator-pill:hover {
    background: #ffffff;
    border-color: #5EEAD4;
    color: #0f172a;
    box-shadow: 0 6px 20px rgba(94, 234, 212, 0.18);
}

body.light-mode .floating-pill {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
    color: #1e293b;
}

body.light-mode .floating-pill .pill-sub {
    color: #64748b;
}

body.light-mode .hero-orb-pillar {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

body.light-mode .hero-orb-pillar:hover {
    background: #ffffff;
    border-color: rgba(94, 234, 212, 0.6);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 0 24px rgba(94, 234, 212, 0.2);
}

body.light-mode .hero-mini-ecosystem {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(226, 232, 240, 0.95);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

body.light-mode .hero-mini-pill {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.95);
    color: #1e293b;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode .hero-mini-pill:hover {
    background: #ffffff;
    border-color: rgba(94, 234, 212, 0.6);
    color: #0F766E;
    box-shadow: 0 6px 18px rgba(94, 234, 212, 0.18);
}

body.light-mode .orb-pillar-name {
    color: #0f172a;
}

body.light-mode .trusted-eyebrow {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(226, 232, 240, 0.95);
    color: #64748b;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}

body.light-mode .trusted-eyebrow:hover {
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 6px 24px rgba(94, 234, 212, 0.15);
}

body.light-mode .trusted-eyebrow-text .brand-hl {
    color: #0f172a;
}

body.light-mode .trusted-main-heading {
    color: #475569;
}

body.light-mode .trusted-logo-tile {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
}

body.light-mode .trusted-logo-tile:hover {
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.12), 0 0 20px rgba(94, 234, 212, 0.18);
    border-color: #cbd5e1;
}

body.light-mode .trusted-logo-tile .trusted-brand-name {
    color: #0f172a;
}

/* ==========================================
   LIGHT MODE COMPREHENSIVE COMPONENT STYLES
   ========================================== */

/* Light Mode: Executive Dashboard Mockup */
body.light-mode .executive-dashboard {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07);
}

body.light-mode .dash-header {
    border-bottom: 1px solid #f1f5f9;
}

body.light-mode .dash-brand {
    color: #0f172a;
}

body.light-mode .dash-stat {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

body.light-mode .stat-lbl {
    color: #64748b;
}

body.light-mode .stat-val {
    color: #0f172a;
}

body.light-mode .dash-chart-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

body.light-mode .chart-labels {
    color: #64748b;
}

body.light-mode .donut-txt {
    color: #0f172a;
}

body.light-mode .donut-txt span {
    color: #64748b;
}

body.light-mode .donut-legend {
    color: #475569;
}

body.light-mode .ch-row {
    color: #64748b;
}

body.light-mode .ch-val {
    color: #0f172a;
}

/* Light Mode: How It Works & Pipeline Stages */
body.light-mode .how-it-works-section,
body.light-mode .platform-section,
body.light-mode .pillars-section,
body.light-mode .integrations-section,
body.light-mode .enterprise-section,
body.light-mode .features {
    color: #0f172a;
}

body.light-mode .section-headline,
body.light-mode .platform-title,
body.light-mode .pillars-title,
body.light-mode .integrations-title {
    color: #0f172a;
}

body.light-mode .section-subheadline,
body.light-mode .platform-subtitle,
body.light-mode .pillars-subtitle,
body.light-mode .integrations-subtitle {
    color: #475569;
}

body.light-mode .platform-badge,
body.light-mode .pillars-badge,
body.light-mode .integrations-badge {
    background: rgba(94, 234, 212, 0.1);
    border-color: rgba(94, 234, 212, 0.3);
    color: #0F766E;
}

body.light-mode .badge-frosted {
    background: rgba(15, 23, 42, 0.04);
    border-color: rgba(15, 23, 42, 0.12);
    color: #475569;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode .pipeline-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.92) 100%);
    border: 2px solid rgba(226, 232, 240, 0.95);
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.06), 0 2px 6px rgba(0, 0, 0, 0.02), inset 0 1px 2px #ffffff;
    color: #0f172a;
}

body.light-mode .pipeline-card:hover {
    box-shadow: 0 24px 50px rgba(15, 23, 42, 0.12), 0 0 24px rgba(94, 234, 212, 0.15), inset 0 1px 2px #ffffff;
    border-color: rgba(203, 213, 225, 0.9);
}

body.light-mode .pcard-num {
    color: #94a3b8;
}

body.light-mode .pcard-stat-num {
    color: #0f172a;
}

body.light-mode .pcard-stat-label {
    color: #334155;
}

body.light-mode .pcard-desc {
    color: #64748b;
}

body.light-mode .pcard-checklist {
    border-top-color: #f1f5f9;
}

body.light-mode .pcheck-item {
    color: #334155;
}

body.light-mode .live-audio-spectrum {
    background: rgba(94, 234, 212, 0.06);
    border-color: rgba(94, 234, 212, 0.15);
}

body.light-mode .floating-apps-grid {
    background: rgba(94, 234, 212, 0.05);
    border-color: rgba(94, 234, 212, 0.14);
}

body.light-mode .app-tile {
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.light-mode .conversion-chart-box {
    background: rgba(16, 185, 129, 0.05);
    border-color: rgba(16, 185, 129, 0.16);
}

body.light-mode .radar-target-box {
    background: rgba(94, 234, 212, 0.04);
    border-radius: 12px;
}

body.light-mode .conn-orb-btn {
    box-shadow: 0 0 14px rgba(139, 92, 246, 0.4), 0 4px 10px rgba(0, 0, 0, 0.12);
}

/* Light Mode: Platform Architecture & Omnichannel Channels */
body.light-mode .platform-architecture-box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
}

body.light-mode .arch-channels-title h3 {
    color: #0f172a;
}

body.light-mode .arch-channels-subtitle {
    color: #64748b;
}

body.light-mode .channel-card {
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

body.light-mode .channel-card:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
}

body.light-mode .channel-info h4 {
    color: #0f172a;
}

body.light-mode .channel-info p {
    color: #64748b;
}

body.light-mode .channel-metric-chip {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
}

body.light-mode .laser-track {
    stroke: rgba(148, 163, 184, 0.3);
}

body.light-mode .eval-brand-tag {
    color: #0f172a;
}

body.light-mode .eval-layer-subtitle {
    color: #64748b;
}

body.light-mode .eval-white-card,
body.light-mode .eval-feature-card {
    background: #ffffff;
    box-shadow: 0 20px 45px -10px rgba(0, 0, 0, 0.08), 0 0 20px rgba(94, 234, 212, 0.12);
    border-color: #e2e8f0;
}

body.light-mode .platform-banner-callout {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

body.light-mode .platform-banner-callout p {
    color: #334155;
}

body.light-mode .platform-banner-callout strong {
    color: #0f172a;
}

/* Light Mode: 3 Pillars Section */
body.light-mode .pillar-column {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

body.light-mode .pillar-column:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.09);
    border-color: #cbd5e1;
}

body.light-mode .pillar-title {
    color: #0f172a;
}

body.light-mode .pillar-desc {
    color: #64748b;
}

body.light-mode .pillar-person-card {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .person-name {
    color: #0f172a;
}

body.light-mode .person-role {
    color: #64748b;
}

body.light-mode .pillar-pill {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #334155;
}

body.light-mode .pillar-agent-stack .agent-chip {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .agent-chip .agent-title {
    color: #0f172a;
}

body.light-mode .agent-chip .agent-desc {
    color: #64748b;
}

body.light-mode .pillar-metric-box {
    background: #f8fafc;
    border-color: #e2e8f0;
}

body.light-mode .pillar-metric-val {
    color: #0f172a;
}

body.light-mode .pillar-metric-lbl {
    color: #64748b;
}

/* Light Mode: Integrations Section */
body.light-mode .laser-line {
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.4) 30%, rgba(94, 234, 212, 0.4) 70%, transparent);
}

body.light-mode .integration-card {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}

body.light-mode .integration-card:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.1);
}

body.light-mode .int-name {
    color: #0f172a;
}

body.light-mode .int-type {
    color: #64748b;
}

body.light-mode .int-icon-wrapper {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}

body.light-mode .int-icon-wrapper.devrev svg path {
    fill: #0f172a;
}

/* Light Mode: CTA Banner & Footer */
body.light-mode .footer-cta-banner {
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 60%, #e0e7ff 100%);
    border: 1px solid #ddd6fe;
    box-shadow: 0 20px 50px rgba(94, 234, 212, 0.08);
}

body.light-mode .cta-title {
    color: #0f172a;
}

body.light-mode .cta-desc {
    color: #475569;
}

body.light-mode .cta-primary-btn {
    background: linear-gradient(135deg, #0F766E 0%, #5EEAD4 100%);
    color: #ffffff;
}

body.light-mode .cta-sec-btn {
    background: #ffffff;
    color: #0f172a;
    border-color: #cbd5e1;
}

body.light-mode .site-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

body.light-mode .brand-col .brand-text {
    color: #0f172a;
}

body.light-mode .footer-logo-icon {
    color: #0F766E;
}

body.light-mode .footer-mission {
    color: #64748b;
}

body.light-mode .system-status {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
}

body.light-mode .footer-socials a {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #64748b;
}

body.light-mode .footer-socials a:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #cbd5e1;
}

body.light-mode .footer-col h4 {
    color: #0f172a;
}

body.light-mode .footer-col ul li a {
    color: #64748b;
}

body.light-mode .footer-col ul li a:hover {
    color: #0F766E;
}

body.light-mode .footer-bottom {
    border-top: 1px solid #e2e8f0;
}

body.light-mode .copyright {
    color: #94a3b8;
}

body.light-mode .footer-legal-links a {
    color: #94a3b8;
}

body.light-mode .footer-legal-links a:hover {
    color: #0f172a;
}

/* Light Mode: AI Chatbot Floating Widget */
body.light-mode .chatbot-tooltip {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.light-mode .chatbot-tooltip .tooltip-text {
    color: #0f172a;
}

body.light-mode .chatbot-window {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
}

body.light-mode .chatbot-header {
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
}

body.light-mode .chatbot-title {
    color: #0f172a;
}

body.light-mode .chatbot-menu-btn {
    color: #64748b;
}

body.light-mode .chatbot-menu-btn:hover {
    color: #0f172a;
    background: #f1f5f9;
}

body.light-mode .chatbot-messages {
    background: #ffffff;
}

body.light-mode .chat-message.bot-message .msg-body {
    background: #f1f5f9;
    border-color: #e2e8f0;
    color: #0f172a;
}

body.light-mode .chat-message.user-message .msg-body {
    background: linear-gradient(135deg, #0F766E 0%, #5EEAD4 100%);
    color: #ffffff;
}

body.light-mode .message-time {
    color: #94a3b8;
}

body.light-mode .chatbot-footer-area {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
}

body.light-mode .cta-demo-btn {
    background: linear-gradient(135deg, #0F766E 0%, #5EEAD4 100%);
    color: #ffffff;
}

body.light-mode .speak-pill-btn {
    background: #ffffff;
    border-color: #e2e8f0;
    color: #334155;
}

body.light-mode .speak-pill-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}

body.light-mode .chatbot-input-capsule {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode #chatbot-input {
    color: #0f172a;
    background: transparent;
}

body.light-mode #chatbot-input::placeholder {
    color: #94a3b8;
}

body.light-mode .chatbot-header-dropdown {
    background: #ffffff;
    border-color: #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

body.light-mode .dropdown-item-link {
    color: #334155;
}

body.light-mode .dropdown-item-link:hover {
    background: #f1f5f9;
    color: #0f172a;
}

body.light-mode .voice-active-overlay {
    background: rgba(255, 255, 255, 0.96);
    border-color: #e2e8f0;
}

body.light-mode .voice-status-text {
    color: #0f172a;
}

body.light-mode .cal-gcal-link-btn {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
    color: #0f172a !important;
}

/* Light Mode: AI Agents Section (Left Copy & Layout) */
body.light-mode .ai-agents-section {
    background: #f8fafc;
}

body.light-mode .ai-badge-pill {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #6b21a8;
}

body.light-mode .ai-agents-main-title {
    color: #0f172a;
}

body.light-mode .ai-title-italic-gradient {
    background: linear-gradient(135deg, #0F766E 0%, #0F766E 50%, #0F766E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

body.light-mode .ai-agents-main-subtitle {
    color: #475569;
}

body.light-mode .ai-adv-content h4 {
    color: #0f172a;
}

body.light-mode .ai-adv-content p {
    color: #64748b;
}

body.light-mode .ai-adv-icon.icon-purple {
    background: #F6F8FB;
    border-color: #DDF6F1;
    color: #0F766E;
    box-shadow: 0 2px 10px rgba(147, 51, 234, 0.12);
}

body.light-mode .ai-adv-icon.icon-blue {
    background: #F6F8FB;
    border-color: #DDF6F1;
    color: #0F766E;
    box-shadow: 0 2px 10px rgba(15, 118, 110, 0.12);
}

body.light-mode .ai-adv-icon.icon-teal {
    background: #f0fdf4;
    border-color: #bbf7d0;
    color: #059669;
    box-shadow: 0 2px 10px rgba(5, 150, 105, 0.12);
}

body.light-mode .ai-adv-icon.icon-violet {
    background: #fdf4ff;
    border-color: #f5d0fe;
    color: #a21caf;
    box-shadow: 0 2px 10px rgba(162, 28, 175, 0.12);
}

body.light-mode .agents-bg-glow.glow-top-left {
    background: radial-gradient(circle, rgba(94, 234, 212, 0.2) 0%, rgba(224, 231, 255, 0.35) 60%, transparent 80%);
}

body.light-mode .agents-bg-glow.glow-top-right {
    background: radial-gradient(circle, rgba(147, 197, 253, 0.2) 0%, rgba(243, 232, 255, 0.35) 50%, transparent 80%);
}

body.light-mode .agents-bg-sphere {
    opacity: 0.15;
}

/* ==========================================================================
   AI AGENTS TRAINED ON YOUR BEST PERFORMERS SECTION (Freeze & Flip)
   ========================================================================== */
.ai-agents-section {
    position: relative;
    min-height: calc(100vh - 70px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-navy);
    padding: 80px 0;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.ai-agents-sticky-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ambient Neon Glow Auras */
.agents-bg-glow {
    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    filter: blur(150px);
    pointer-events: none;
    opacity: 0.18;
    z-index: 0;
}

.agents-bg-glow.glow-top-left {
    top: -80px;
    left: -120px;
    background: radial-gradient(circle, #0F766E 0%, #5EEAD4 50%, transparent 75%);
}

.agents-bg-glow.glow-top-right {
    top: 30px;
    right: -120px;
    background: radial-gradient(circle, #5EEAD4 0%, #0F1B33 50%, transparent 75%);
    opacity: 0.22;
}

.agents-bg-sphere {
    display: none;
}

/* 2-Column Hero Grid */
.ai-agents-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 48px;
    align-items: center;
    margin-bottom: 0;
    position: relative;
    z-index: 1;
}

/* Left Column: Heading & Capabilities */
.ai-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.badge-sparkle {
    animation: pulseSparkle 2.5s ease-in-out infinite;
}

@keyframes pulseSparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
    50% { transform: scale(1.2) rotate(45deg); opacity: 1; }
}

.ai-agents-main-title {
    font-size: 46px;
    font-weight: 750;
    line-height: 1.14;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin: 0 0 16px;
}

.ai-title-italic-gradient {
    font-style: italic;
    font-weight: 750;
    background: linear-gradient(135deg, #5EEAD4 0%, #2dd4bf 50%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.ai-agents-main-subtitle {
    font-size: 15.5px;
    line-height: 1.6;
    color: #A9B8CE;
    margin: 0 0 32px;
    max-width: 520px;
}

/* 4 Advantages List */
.ai-advantages-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.ai-adv-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.ai-adv-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.ai-adv-item:hover .ai-adv-icon {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.35);
}

.ai-adv-icon.icon-purple,
.ai-adv-icon.icon-blue,
.ai-adv-icon.icon-teal,
.ai-adv-icon.icon-violet {
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
}

.ai-adv-content h4 {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 3px;
    line-height: 1.35;
}

.ai-adv-content p {
    font-size: 13px;
    color: #8494B0;
    margin: 0;
    line-height: 1.5;
}

/* Right Column: Live Voice Bot Mockup 3D Flip Card Console */
.ai-voice-bot-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.ai-flip-card-wrapper {
    perspective: 1400px;
    width: 100%;
    max-width: 540px;
    cursor: pointer;
    user-select: none;
    position: relative;
}

.ai-flip-card-inner {
    position: relative;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    transform-style: preserve-3d;
    transition: transform 0.85s cubic-bezier(0.25, 1, 0.5, 1);
}

.ai-flip-card-wrapper:hover .ai-flip-card-inner,
.ai-flip-card-wrapper.is-flipped .ai-flip-card-inner {
    transform: rotateY(180deg);
}

.ai-flip-side {
    grid-area: 1 / 1;
    width: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.ai-flip-front {
    transform: rotateY(0deg);
    z-index: 2;
}

.ai-flip-back {
    transform: rotateY(180deg);
    z-index: 1;
}

/* Front Glass Card */
.ai-bot-glass-card {
    width: 100%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 26px 24px 20px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45), 0 0 45px rgba(94, 234, 212, 0.15);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Back Glass Card */
.ai-bot-back-card {
    width: 100%;
    height: 100%;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    padding: 24px 22px 18px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45), 0 0 45px rgba(94, 234, 212, 0.15);
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Flip Back Header */
.back-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f1f5f9;
}

.back-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.back-icon-pill {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    display: flex;
    align-items: center;
    justify-content: center;
}

.back-header-title {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #0f172a;
}

.back-pill-active {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 11px;
    font-weight: 700;
}

.back-dot-active {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981;
}

/* Back Use Cases List */
.back-usecases-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.back-usecase-row {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.back-usecase-row:hover {
    transform: translateY(-1px);
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
}

.back-usecase-row.row-purple:hover { border-color: #5EEAD4; }
.back-usecase-row.row-blue:hover { border-color: #A9B8CE; }
.back-usecase-row.row-teal:hover { border-color: #86efac; }
.back-usecase-row.row-fuchsia:hover { border-color: #f472b6; }

.back-row-text {
    flex: 1;
}

.back-row-heading {
    font-size: 12.5px;
    font-weight: 750;
    color: #0f172a;
    margin: 0 0 2px;
    line-height: 1.3;
}

.back-row-desc {
    font-size: 11px;
    color: #64748b;
    line-height: 1.35;
    margin: 0;
}

/* Back Badges */
.back-badge {
    font-size: 10.5px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
}

.badge-purple {
    background: #F6F8FB;
    border: 1px solid #DDF6F1;
    color: #7e22ce;
}

.badge-blue {
    background: #F6F8FB;
    border: 1px solid #DDF6F1;
    color: #0F766E;
}

.badge-teal {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #15803d;
}

.badge-fuchsia {
    background: #fdf2f8;
    border: 1px solid #fbcfe8;
    color: #be185d;
}

/* Flip Hint Badge */
.flip-hint-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 14px;
    font-size: 11px;
    font-weight: 600;
    color: #94a3b8;
    transition: color 0.2s ease;
}

.ai-flip-card-wrapper:hover .flip-hint-badge {
    color: #5EEAD4;
}

.flip-hint-badge svg {
    transition: transform 0.3s ease;
}

.ai-flip-card-wrapper:hover .flip-hint-badge svg {
    transform: rotate(180deg);
}

/* Card Header */
.ai-bot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.ai-bot-tag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bot-wave-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #F6F8FB;
    border: 1px solid #E6F7F3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bot-type-text {
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.08em;
    color: #0f172a;
}

.dot-sep {
    color: #94a3b8;
    margin: 0 4px;
}

.bot-live-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #059669;
    font-size: 11.5px;
    font-weight: 700;
}

.live-dot-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 8px #10b981, 0 0 16px #34d399;
    animation: livePulseAnim 1.8s infinite;
}

@keyframes livePulseAnim {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.4); opacity: 0.6; }
}

/* Equalizer Waveform Visualizer */
.ai-bot-soundwave {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    margin-bottom: 24px;
    padding: 0 12px;
}

.wave-bar {
    width: 3.5px;
    border-radius: 99px;
    background: linear-gradient(180deg, #5EEAD4 0%, #0F766E 100%);
    box-shadow: 0 0 6px rgba(94, 234, 212, 0.35);
    animation: soundwaveUndulate 1.2s ease-in-out infinite alternate;
}

.wave-bar.bar-1 { height: 10px; animation-delay: 0.1s; }
.wave-bar.bar-2 { height: 18px; animation-delay: 0.3s; }
.wave-bar.bar-3 { height: 28px; animation-delay: 0.5s; }
.wave-bar.bar-4 { height: 14px; animation-delay: 0.2s; }
.wave-bar.bar-5 { height: 36px; animation-delay: 0.7s; }
.wave-bar.bar-6 { height: 22px; animation-delay: 0.4s; }
.wave-bar.bar-7 { height: 38px; animation-delay: 0.6s; }
.wave-bar.bar-8 { height: 26px; animation-delay: 0.2s; }
.wave-bar.bar-9 { height: 44px; animation-delay: 0.8s; }
.wave-bar.bar-10 { height: 32px; animation-delay: 0.4s; }
.wave-bar.bar-11 { height: 46px; animation-delay: 0.9s; }
.wave-bar.bar-12 { height: 36px; animation-delay: 0.5s; }
.wave-bar.bar-13 { height: 42px; animation-delay: 0.7s; }
.wave-bar.bar-14 { height: 28px; animation-delay: 0.3s; }
.wave-bar.bar-15 { height: 38px; animation-delay: 0.6s; }
.wave-bar.bar-16 { height: 20px; animation-delay: 0.2s; }
.wave-bar.bar-17 { height: 34px; animation-delay: 0.5s; }
.wave-bar.bar-18 { height: 22px; animation-delay: 0.4s; }
.wave-bar.bar-19 { height: 30px; animation-delay: 0.7s; }
.wave-bar.bar-20 { height: 16px; animation-delay: 0.3s; }
.wave-bar.bar-21 { height: 24px; animation-delay: 0.6s; }
.wave-bar.bar-22 { height: 12px; animation-delay: 0.2s; }
.wave-bar.bar-23 { height: 8px; animation-delay: 0.1s; }

@keyframes soundwaveUndulate {
    0% { transform: scaleY(0.4); opacity: 0.6; }
    100% { transform: scaleY(1.15); opacity: 1; }
}

/* Dialog Bubbles */
.ai-bot-dialog-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}

.bot-msg-bubble {
    padding: 10px 16px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.4;
    max-width: 82%;
    word-break: break-word;
}

.bot-msg-bubble.agent-bubble {
    align-self: flex-start;
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
    color: #0B1426;
    font-weight: 500;
    border-bottom-left-radius: 4px;
}

.bot-msg-bubble.user-bubble {
    align-self: flex-end;
    background: #0F766E;
    color: #ffffff;
    font-weight: 550;
    border-bottom-right-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35);
}

/* 4 Metrics Bottom Grid Inside Voice Bot */
.ai-bot-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.bot-metric-card {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
    border-radius: 12px;
    padding: 12px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.bot-metric-card:hover {
    transform: translateY(-2px);
    background: #E6F7F3;
    border-color: #5EEAD4;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.08);
}

.metric-num {
    font-size: 14.5px;
    font-weight: 800;
    color: #0B1426;
}

.metric-label {
    font-size: 10.5px;
    color: #52607A;
    font-weight: 500;
    line-height: 1.25;
}

/* ==========================================================================
   BOTTOM 4 USE-CASE ACTION CARDS GRID
   ========================================================================== */
.ai-usecases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    position: relative;
    z-index: 1;
}

.ai-usecase-card {
    background: #0F1B33;
    border-radius: 20px;
    padding: 24px 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(228, 233, 242, 0.12);
    box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ai-usecase-card:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.8), 0 0 30px rgba(94, 234, 212, 0.2);
}

.ai-usecase-card.card-purple,
.ai-usecase-card.card-blue,
.ai-usecase-card.card-teal,
.ai-usecase-card.card-fuchsia {
    border-color: rgba(94, 234, 212, 0.25);
}

.usecase-glow-layer {
    position: absolute;
    top: 0;
    right: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
    opacity: 0.15;
    background: #5EEAD4;
}

.card-purple .usecase-glow-layer,
.card-blue .usecase-glow-layer,
.card-teal .usecase-glow-layer,
.card-fuchsia .usecase-glow-layer { 
    background: #5EEAD4; 
}

.usecase-header {
    margin-bottom: 16px;
}

.usecase-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.3);
}

.usecase-icon-wrap.icon-purple,
.usecase-icon-wrap.icon-blue,
.usecase-icon-wrap.icon-teal,
.usecase-icon-wrap.icon-fuchsia {
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.3);
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.25);
}

.usecase-title {
    font-size: 16px;
    font-weight: 750;
    color: #ffffff;
    margin: 0 0 10px;
    line-height: 1.3;
}

.usecase-desc {
    font-size: 12.5px;
    line-height: 1.5;
    color: #94a3b8;
    margin: 0 0 20px;
    flex-grow: 1;
}

/* Action Pills */
.usecase-action-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 650;
    width: fit-content;
    transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.usecase-action-pill .arrow-right {
    font-size: 13px;
    transition: transform 0.2s ease;
}

.ai-usecase-card:hover .usecase-action-pill .arrow-right {
    transform: translateX(3px);
}

.pill-purple {
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.35);
    color: #e879f9;
}
.pill-purple:hover {
    background: rgba(94, 234, 212, 0.25);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.35);
}

.pill-blue {
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.35);
    color: #A9B8CE;
}
.pill-blue:hover {
    background: rgba(94, 234, 212, 0.25);
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.35);
}

.pill-teal {
    background: rgba(20, 184, 166, 0.12);
    border: 1px solid rgba(45, 212, 191, 0.35);
    color: #5eead4;
}
.pill-teal:hover {
    background: rgba(20, 184, 166, 0.25);
    box-shadow: 0 0 14px rgba(20, 184, 166, 0.35);
}

.pill-fuchsia {
    background: rgba(217, 70, 239, 0.12);
    border: 1px solid rgba(244, 114, 182, 0.35);
    color: #f472b6;
}
.pill-fuchsia:hover {
    background: rgba(217, 70, 239, 0.25);
    box-shadow: 0 0 14px rgba(217, 70, 239, 0.35);
}

/* Responsive adjustments */
@media (max-width: 1080px) {
    .ai-agents-section {
        height: auto;
        padding: 80px 0;
    }
    .ai-agents-sticky-wrapper {
        position: relative;
        height: auto;
        padding: 0;
    }
    .ai-agents-hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 640px) {
    .ai-agents-main-title {
        font-size: 32px;
    }
    .ai-bot-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .ai-bot-glass-card,
    .ai-bot-back-card {
        padding: 20px 16px;
    }
    .back-usecase-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ==========================================================================
   WHY CUSTOMERS CHOOSE GOODMEETINGS (TESTIMONIALS & LEADERS ARCH)
   ========================================================================== */
.customer-stories-section {
    position: relative;
    background: var(--bg-navy);
    padding: 100px 0 110px;
    overflow: hidden;
    color: #FFFFFF;
}

.stories-bg-glow {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    filter: blur(160px);
    pointer-events: none;
    opacity: 0.15;
    z-index: 0;
}

.stories-bg-glow.glow-left {
    top: 50px;
    left: -150px;
    background: radial-gradient(circle, #0F766E 0%, #5EEAD4 60%, transparent 80%);
}

.stories-bg-glow.glow-right {
    top: 120px;
    right: -150px;
    background: radial-gradient(circle, #5EEAD4 0%, #0F1B33 60%, transparent 80%);
}

/* Leaders Arch Gallery */
.leaders-arch-container {
    position: relative;
    max-width: 1120px;
    margin: 0 auto 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* Foreground Leader Cards Grid with Arch Curves */
.leaders-arch-grid {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 20px;
    width: 100%;
    max-width: 1060px;
    padding: 20px 10px 30px;
    perspective: 1200px;
    position: relative;
    z-index: 2;
}

.leader-arch-card {
    position: relative;
    width: 140px;
    height: 180px;
    flex-shrink: 0;
    border-radius: 22px;
    cursor: pointer;
    transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.35s ease, z-index 0.35s ease;
}

.leader-arch-card:hover {
    transform: translateY(-14px) scale(1.12) !important;
    z-index: 20 !important;
}

.leader-card-inner {
    width: 100%;
    height: 100%;
    border-radius: 22px;
    overflow: hidden;
    position: relative;
    border: 1.5px solid rgba(228, 233, 242, 0.18);
    background: #0F1B33;
    box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.65), 0 0 28px rgba(94, 234, 212, 0.14);
}

.leader-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 18%;
    display: block;
    transition: transform 0.4s ease;
}

.leader-arch-card:hover .leader-avatar-img {
    transform: scale(1.08);
}

.leader-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(11, 20, 38, 0.96) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px 10px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    text-align: center;
}

.leader-arch-card:hover .leader-card-overlay {
    opacity: 1;
    transform: translateY(0);
}

.leader-name {
    font-size: 13px;
    font-weight: 750;
    color: #FFFFFF;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.leader-role {
    font-size: 11px;
    color: #5EEAD4;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Company Logo Card inside Arched Canopy (Classplus, upGrad, Spinny, CRED, Paytm, Muthoot) */
.company-logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 10px;
    background: #0F1B33;
    border: 1.5px solid rgba(228, 233, 242, 0.18);
    box-shadow: 0 20px 45px -8px rgba(0, 0, 0, 0.65), 0 0 28px rgba(94, 234, 212, 0.14);
    text-align: center;
    box-sizing: border-box;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

body.light-mode .company-logo-card,
html.light-mode .company-logo-card,
.light-mode .company-logo-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 14px 35px -8px rgba(15, 23, 42, 0.08);
}

.company-arch-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 14px;
    background: #FFFFFF;
    border: 1px solid rgba(228, 233, 242, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

body.light-mode .company-arch-icon-wrap,
html.light-mode .company-arch-icon-wrap,
.light-mode .company-arch-icon-wrap {
    background: #F8FAFC;
    border-color: #E2E8F0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.leader-arch-card:hover .company-arch-icon-wrap {
    transform: scale(1.12);
}

.company-arch-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.company-arch-name {
    font-size: 13.5px;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    margin-top: 2px;
}

body.light-mode .company-arch-name,
html.light-mode .company-arch-name,
.light-mode .company-arch-name {
    color: #0B1426;
}

.company-arch-tag {
    font-size: 11px;
    font-weight: 600;
    color: #5EEAD4;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
}

body.light-mode .company-arch-tag,
html.light-mode .company-arch-tag,
.light-mode .company-arch-tag {
    color: #0F766E;
}

/* Arch Positions & Smooth Parabolic Heights (6 Cards Canopy) */
.arch-pos-1  { transform: translateY(36px) rotate(-5.5deg); }
.arch-pos-2  { transform: translateY(16px) rotate(-2.8deg); }
.arch-pos-3  { transform: translateY(0px) rotate(-0.8deg) scale(1.04); z-index: 5; }
.arch-pos-4  { transform: translateY(0px) rotate(0.8deg) scale(1.04); z-index: 5; }
.arch-pos-5  { transform: translateY(16px) rotate(2.8deg); }
.arch-pos-6  { transform: translateY(36px) rotate(5.5deg); }

/* Center Headline & Subtitle */
.stories-hero-content {
    text-align: center;
    max-width: 780px;
    margin: 10px auto 46px;
    position: relative;
    z-index: 2;
}

.stories-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 14px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    margin-bottom: 18px;
    backdrop-filter: blur(10px);
}

.stories-main-title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 0 16px;
}

.stories-title-highlight {
    background: linear-gradient(135deg, #5EEAD4 0%, #2dd4bf 50%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stories-main-subtitle {
    font-size: 16.5px;
    line-height: 1.6;
    color: #A9B8CE;
    max-width: 580px;
    margin: 0 auto;
}

.stories-cta-row {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stories-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 26px;
    border-radius: 999px;
    background: #5EEAD4;
    color: #0B1426;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5), 0 0 20px rgba(94, 234, 212, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.stories-primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.7), 0 0 30px rgba(94, 234, 212, 0.4);
    background: #2dd4bf;
}

.stories-primary-btn svg {
    transition: transform 0.25s ease;
}

.stories-primary-btn:hover svg {
    transform: translateX(4px);
}

/* 3 Testimonials Grid */
.stories-testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1180px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.story-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.12);
    border-radius: 20px;
    padding: 34px 28px 28px;
    backdrop-filter: blur(16px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.45);
    min-height: 250px;
}

.story-card:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 25px 50px -15px rgba(0, 0, 0, 0.6), 0 0 30px rgba(94, 234, 212, 0.12);
}

.story-quote {
    font-size: 14.5px;
    line-height: 1.68;
    color: #C7D3E8;
    margin: 0 0 28px;
    font-weight: 400;
}

.story-author {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(228, 233, 242, 0.12);
}

.author-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 1.5px solid rgba(228, 233, 242, 0.2);
    flex-shrink: 0;
}

.author-name {
    font-size: 14.5px;
    font-weight: 750;
    color: #FFFFFF;
    margin: 0 0 3px;
    line-height: 1.2;
}

.author-role {
    font-size: 12px;
    color: #8494B0;
    margin: 0;
    line-height: 1.3;
    display: block;
}

/* Recognised by Users and Industry Awards Bar */
.recognition-awards-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    max-width: 1180px;
    margin: 48px auto 0;
    padding-top: 24px;
}

.recognition-label {
    font-size: 13px;
    font-weight: 700;
    color: #94a3b8;
    margin-right: 6px;
    letter-spacing: -0.01em;
}

.recognition-pills-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.rec-pill {
    padding: 6px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: #e2e8f0;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
}

.rec-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(94, 234, 212, 0.4);
    transform: translateY(-1px);
}

/* ==========================================================================
   LIGHT MODE STYLING FOR WHY CUSTOMERS CHOOSE GOODMEETINGS
   ========================================================================== */
body.light-mode .customer-stories-section {
    background: #ffffff;
    color: #0f172a;
}

body.light-mode .stories-bg-glow.glow-left {
    background: radial-gradient(circle, rgba(216, 180, 254, 0.35) 0%, rgba(199, 210, 254, 0.2) 60%, transparent 80%);
}

body.light-mode .stories-bg-glow.glow-right {
    background: radial-gradient(circle, rgba(186, 230, 253, 0.35) 0%, rgba(221, 214, 254, 0.2) 60%, transparent 80%);
}

body.light-mode .leader-card-inner {
    border-color: rgba(15, 23, 42, 0.1);
    background: #f1f5f9;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08);
}

body.light-mode .stories-pill-badge {
    background: #f5f3ff;
    border-color: #ddd6fe;
    color: #0F766E;
}

body.light-mode .stories-main-title {
    color: #0f172a;
}

body.light-mode .stories-main-subtitle {
    color: #475569;
}

body.light-mode .stories-primary-btn {
    background: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 10px 20px -5px rgba(15, 23, 42, 0.3);
}

body.light-mode .stories-primary-btn:hover {
    background: #1e293b;
    box-shadow: 0 14px 28px -5px rgba(15, 23, 42, 0.4);
}

body.light-mode .story-card {
    background: #ffffff;
    border-color: #f1f5f9;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.05);
}

body.light-mode .story-card:hover {
    border-color: #5EEAD4;
    box-shadow: 0 15px 35px -5px rgba(0, 0, 0, 0.09);
}

body.light-mode .story-quote {
    color: #1e293b;
}

body.light-mode .author-name {
    color: #0f172a;
}

body.light-mode .author-role {
    color: #64748b;
}

body.light-mode .story-author {
    border-top-color: #E2E8F0;
}

body.light-mode .recognition-label {
    color: #475569;
}

body.light-mode .rec-pill {
    background: #ffffff;
    color: #334155;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
}

body.light-mode .rec-pill:hover {
    border-color: #5EEAD4;
    background: #F6F8FB;
}

/* Responsive adjustments for Testimonials Arch */
@media (max-width: 1024px) {
    .leaders-arch-grid {
        gap: 14px;
        max-width: 780px;
    }
    .leader-arch-card {
        width: 105px;
        height: 138px;
        border-radius: 18px;
    }
    .company-arch-icon-wrap {
        width: 46px;
        height: 46px;
        border-radius: 10px;
        padding: 6px;
    }
    .company-arch-name {
        font-size: 11.5px;
    }
    .company-arch-tag {
        font-size: 9.5px;
    }
    .stories-testimonials-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .recognition-awards-wrap {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 640px) {
    .leaders-arch-grid {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 20px;
        gap: 12px;
    }
    .leader-arch-card {
        width: 96px;
        height: 126px;
        transform: none !important;
    }
    .company-arch-icon-wrap {
        width: 38px;
        height: 38px;
        border-radius: 8px;
        padding: 5px;
    }
    .company-arch-name {
        font-size: 10px;
    }
    .company-arch-tag {
        font-size: 8.5px;
    }
    .stories-main-title {
        font-size: 32px;
    }
}

/* ==========================================================================
   GOODMEETINGS FAQ SHOWCASE SECTION (Pixel-Perfect to Reference Design)
   ========================================================================== */
.goodmeetings-faq-section {
    position: relative;
    background: var(--bg-navy);
    padding: 100px 0 120px;
    overflow: hidden;
    z-index: 10;
}

/* Ambient Neon Glow Auras Behind the Card */
.faq-bg-aura {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.faq-bg-aura.aura-left {
    bottom: -60px;
    left: calc(50% - 620px);
    width: 620px;
    height: 520px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.45) 0%, rgba(94, 234, 212, 0.25) 40%, transparent 75%);
    filter: blur(120px);
    opacity: 0.85;
}

.faq-bg-aura.aura-right {
    bottom: -60px;
    right: calc(50% - 620px);
    width: 620px;
    height: 520px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.45) 0%, rgba(15, 27, 51, 0.35) 40%, transparent 75%);
    filter: blur(120px);
    opacity: 0.85;
}

/* Main FAQ Card Canvas (Crisp White Canvas as shown in Reference) */
.faq-card-canvas {
    position: relative;
    max-width: 1160px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 36px;
    padding: 36px 54px 52px;
    box-shadow: 0 35px 90px -15px rgba(0, 0, 0, 0.85),
                0 0 70px -10px rgba(94, 234, 212, 0.2);
    border: 1px solid #E4E9F2;
    box-sizing: border-box;
    z-index: 2;
}

/* Top Sub-Navbar inside Card */
.faq-card-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 28px;
    margin-bottom: 12px;
}

.faq-topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.faq-brand-logo-img {
    height: 30px;
    width: auto;
    max-width: 140px;
    display: block;
    object-fit: contain;
}

.faq-brand-title {
    font-size: 16.5px;
    font-weight: 850;
    letter-spacing: -0.02em;
    color: #0a0e27;
    font-family: 'Inter', sans-serif;
}

.faq-topbar-nav {
    display: flex;
    align-items: center;
    gap: 28px;
}

.faq-nav-link {
    font-size: 11.5px;
    font-weight: 750;
    letter-spacing: 0.08em;
    color: #475569;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
}

.faq-nav-link:hover {
    color: #0a0e27;
}

.faq-avatar-badge {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0c102a;
    border: 1px solid rgba(94, 234, 212, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(12, 16, 42, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.faq-avatar-badge:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 16px rgba(94, 234, 212, 0.35);
}

/* Main Card 2-Column Grid */
.faq-card-grid {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 56px;
    align-items: center;
}

/* Left Column: 3D Orb Portal Showcase */
.faq-visual-col {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.faq-portal-orb-wrap {
    position: relative;
    width: 390px;
    height: 390px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Concentric Orbit Rings */
.faq-orbit-ring {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.faq-orbit-ring.ring-outer {
    width: 375px;
    height: 375px;
    border: 1.5px dashed rgba(165, 180, 252, 0.5);
    animation: slowOrbitSpin 70s linear infinite;
}

.faq-orbit-ring.ring-mid {
    width: 330px;
    height: 330px;
    border: 1px solid rgba(129, 140, 248, 0.25);
    transform: rotate(25deg);
}

@keyframes slowOrbitSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Orbiting Floating Badges */
.faq-orbit-badge {
    position: absolute;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.faq-orbit-badge:hover {
    transform: scale(1.15);
}

.faq-orbit-badge.badge-video {
    top: 50%;
    left: -14px;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, #8b5cf6 0%, #0B1426 100%);
    box-shadow: 0 10px 25px rgba(109, 40, 217, 0.45);
}

.faq-orbit-badge.badge-video:hover {
    transform: translateY(-50%) scale(1.12);
}

.faq-orbit-badge.badge-sparkle {
    top: 24px;
    right: 28px;
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, #5EEAD4 0%, #4338ca 100%);
    box-shadow: 0 10px 22px rgba(94, 234, 212, 0.42);
}

.faq-orbit-badge.badge-calendar {
    bottom: 30px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: linear-gradient(135deg, #5EEAD4 0%, #0F766E 100%);
    box-shadow: 0 10px 24px rgba(2, 132, 199, 0.45);
}

/* Glowing Neon Halo Core */
.faq-portal-core {
    position: relative;
    width: 274px;
    height: 274px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.portal-neon-halo {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: conic-gradient(from 195deg at 50% 50%, #e879f9 0deg, #5EEAD4 60deg, #5EEAD4 140deg, #5EEAD4 220deg, #06b6d4 270deg, #f43f5e 330deg, #e879f9 360deg);
    filter: blur(9px);
    opacity: 0.92;
    z-index: 1;
    box-shadow: 0 0 35px rgba(94, 234, 212, 0.45), 0 0 50px rgba(56, 189, 248, 0.35);
}

/* Inside Dark Window with Angled Workspace Preview */
.portal-inner-window {
    position: relative;
    width: 262px;
    height: 262px;
    border-radius: 50%;
    background: #080c16;
    overflow: hidden;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 45px rgba(0, 0, 0, 0.95);
}

/* Mini Angled UI Tiles */
.portal-ui-tile {
    position: absolute;
    background: rgba(13, 20, 36, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    backdrop-filter: blur(8px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    pointer-events: none;
}

.tile-video-grid {
    top: 26px;
    left: 18px;
    width: 104px;
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    transform: rotate(-8deg);
    opacity: 0.55;
}

.mini-grid-row {
    display: flex;
    gap: 4px;
    justify-content: space-between;
}

.avatar-cell {
    width: 19px;
    height: 14px;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 3px;
    display: block;
}

.tile-chart {
    top: 36px;
    right: 20px;
    width: 78px;
    height: 50px;
    padding: 6px;
    display: flex;
    align-items: flex-end;
    gap: 5px;
    transform: rotate(6deg);
    opacity: 0.55;
}

.chart-bar {
    width: 8px;
    border-radius: 2px 2px 0 0;
    background: linear-gradient(180deg, #5EEAD4 0%, #0F766E 100%);
}

.chart-bar.b1 { height: 40%; }
.chart-bar.b2 { height: 65%; }
.chart-bar.b3 { height: 90%; }
.chart-bar.b4 { height: 55%; }
.chart-bar.b5 { height: 80%; }

.tile-teamsync {
    bottom: 30px;
    right: 28px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 8px;
    font-size: 9.5px;
    font-weight: 700;
    color: #A9B8CE;
    transform: rotate(-4deg);
    opacity: 0.65;
    border-color: rgba(56, 189, 248, 0.25);
}

/* Massive Solid White Iconic 3D 'g' Logo */
.portal-center-logo {
    position: relative;
    z-index: 5;
    filter: drop-shadow(0 16px 30px rgba(0, 0, 0, 0.85));
}

.portal-3d-g {
    width: 130px;
    height: 152px;
}

/* Right Column: FAQ Content */
.faq-content-col {
    display: flex;
    flex-direction: column;
}

.faq-hero-title {
    font-size: 42px;
    font-weight: 850;
    letter-spacing: -0.025em;
    color: #0B1426;
    margin: 0 0 28px;
    line-height: 1.15;
    font-family: 'Inter', sans-serif;
}

.faq-hero-gradient {
    background: linear-gradient(135deg, #0B1426 0%, #0F766E 50%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-qa-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.faq-qa-item {
    display: flex;
    flex-direction: column;
}

.faq-qa-question {
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #0B1426;
    margin: 0 0 6px;
    line-height: 1.35;
    text-transform: uppercase;
    font-family: 'Inter', sans-serif;
}

.faq-qa-answer {
    font-size: 13.5px;
    line-height: 1.62;
    color: #52607A;
    margin: 0;
    font-weight: 400;
    font-family: 'Inter', sans-serif;
}

/* ==========================================================================
   THEME ADAPTATION (LIGHT THEME SUPPORT)
   ========================================================================== */

/* In Light Theme, section background is clean white/slate while retaining subtle neon auras */
body.light-mode .goodmeetings-faq-section,
html.light-mode .goodmeetings-faq-section {
    background: #F6F8FB !important;
}

body.light-mode .faq-bg-aura.aura-left,
html.light-mode .faq-bg-aura.aura-left {
    background: radial-gradient(circle, rgba(15, 118, 110, 0.2) 0%, rgba(94, 234, 212, 0.15) 40%, transparent 70%);
    opacity: 0.7;
}

body.light-mode .faq-bg-aura.aura-right,
html.light-mode .faq-bg-aura.aura-right {
    background: radial-gradient(circle, rgba(94, 234, 212, 0.2) 0%, rgba(15, 118, 110, 0.1) 40%, transparent 70%);
    opacity: 0.7;
}

body.light-mode .faq-card-canvas,
html.light-mode .faq-card-canvas {
    background: #ffffff !important;
    border: 1px solid #E4E9F2 !important;
    box-shadow: 0 30px 80px -15px rgba(11, 20, 38, 0.08), 0 0 50px rgba(15, 118, 110, 0.05) !important;
}

/* Responsive Breakpoints for FAQ Showcase */
@media (max-width: 1024px) {
    .faq-card-canvas {
        padding: 28px 32px 38px;
    }
    .faq-card-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .faq-visual-col {
        order: -1;
    }
    .faq-hero-title {
        font-size: 34px;
    }
}

@media (max-width: 640px) {
    .goodmeetings-faq-section {
        padding: 48px 14px 60px;
    }
    .faq-card-canvas {
        padding: 20px 18px 28px;
        border-radius: 24px;
    }
    .faq-card-topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .faq-topbar-nav {
        flex-wrap: wrap;
        gap: 14px;
    }
    .faq-portal-orb-wrap {
        width: 290px;
        height: 290px;
    }
    .faq-orbit-ring.ring-outer {
        width: 280px;
        height: 280px;
    }
    .faq-portal-core,
    .portal-inner-window {
        width: 200px;
        height: 200px;
    }
    .portal-3d-g {
        width: 95px;
        height: 110px;
    }
    .faq-orbit-badge.badge-video {
        width: 38px;
        height: 38px;
    }
    .faq-orbit-badge.badge-sparkle {
        width: 34px;
        height: 34px;
    }
    .faq-orbit-badge.badge-calendar {
        width: 36px;
        height: 36px;
    }
    .faq-hero-title {
        font-size: 28px;
    }
}

/* ==========================================================================
   SHREYA DEMO BOOKING POP-UP MODAL (FLOATING POP-UP CARD ON WEBSITE)
   ========================================================================== */
.booking-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(11, 20, 38, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s ease;
    color: #52607A;
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
}

.booking-modal-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.booking-modal-wrapper {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
    border-radius: 26px;
    box-shadow: 0 35px 80px -15px rgba(11, 20, 38, 0.5), 0 0 0 1px rgba(228, 233, 242, 0.8);
    max-width: 1140px;
    width: 95%;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    margin: auto;
    padding: 22px 32px 28px;
    box-sizing: border-box;
    position: relative;
    transform: scale(0.96);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-modal-overlay.active .booking-modal-wrapper {
    transform: scale(1);
}

/* Header Bar inside Pop-up */
.booking-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid #E4E9F2;
    margin-bottom: 16px;
}

.booking-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.booking-logo-img {
    height: 30px;
    width: auto;
    max-width: 140px;
    display: block;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.booking-logo:hover .booking-logo-img {
    opacity: 0.85;
}

.booking-logo-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 17px;
    font-weight: 800;
    color: #0B1426;
    letter-spacing: -0.5px;
}

.booking-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.booking-close-cross-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #E4E9F2;
    background: #FFFFFF;
    color: #52607A;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 2px rgba(11, 20, 38, 0.04);
}

.booking-close-cross-btn:hover {
    background: #0F766E;
    border-color: #0F766E;
    color: #FFFFFF;
    transform: rotate(90deg);
}

/* Main Split Body */
.booking-modal-body {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.booking-split-container {
    display: grid;
    grid-template-columns: 1fr 1.35fr;
    gap: 36px;
    align-items: center;
    width: 100%;
}

/* Left Info Column */
.booking-info-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.booking-pill-badge {
    display: inline-flex;
    align-self: flex-start;
    padding: 3px 10px;
    border-radius: 9999px;
    background: #E6F7F3;
    border: 1px solid #DDF6F1;
    color: #0F766E;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.booking-main-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.18;
    color: #0B1426;
    letter-spacing: -0.025em;
    margin-bottom: 8px;
}

.booking-main-sub {
    font-size: 14.5px;
    line-height: 1.5;
    color: #52607A;
    margin-bottom: 16px;
}

/* Host Shreya Profile Card */
.booking-host-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    border-radius: 16px;
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(11, 20, 38, 0.03);
}

.host-avatar-wrapper {
    position: relative;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
}

.host-avatar-img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #5EEAD4;
}

.host-online-dot {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #10b981;
    border: 2px solid #FFFFFF;
    border-radius: 50%;
}

.host-name-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.host-name {
    font-size: 15.5px;
    font-weight: 700;
    color: #0B1426;
    margin: 0;
}

.host-badge {
    background: #E6F7F3;
    color: #0F766E;
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 9999px;
}

.host-role {
    font-size: 12px;
    color: #52607A;
    margin: 2px 0 0;
}

.host-email {
    font-size: 12px;
    color: #0F766E;
    font-weight: 600;
    margin: 2px 0 0;
}

/* 3 Features List */
.booking-features-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.booking-feature-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.feature-icon-circle {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #E6F7F3;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0F766E;
}

.feature-icon-circle svg {
    width: 17px;
    height: 17px;
}

.feature-text {
    font-size: 13px;
    font-weight: 600;
    color: #0B1426;
}

/* Right Column: White Card */
.booking-card-col {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.booking-card-main {
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    border-radius: 22px;
    box-shadow: 0 12px 35px -10px rgba(11, 20, 38, 0.06);
    padding: 24px 28px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Steps Visibility */
.booking-step-view {
    display: none;
    animation: fadeInStep 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.booking-step-view.active {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Inner 2-Pane Grid (Calendar + Slots) */
.booking-card-inner-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: center;
}

/* Calendar Pane */
.cal-sub-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cal-month-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.cal-month-title {
    font-size: 14px;
    font-weight: 700;
    color: #0B1426;
    margin: 0;
}

.cal-nav-arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #E4E9F2;
    background: #FFFFFF;
    color: #0B1426;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cal-nav-arrow:hover {
    background: #F6F8FB;
    border-color: #0F766E;
    color: #0F766E;
}

/* Weekday Labels */
.cal-weekdays-row {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    margin-bottom: 6px;
}

.cal-weekdays-row span {
    font-size: 11px;
    font-weight: 600;
    color: #8494B0;
}

/* Days Grid */
.cal-days-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px 2px;
    margin-bottom: 10px;
}

.cal-day-cell {
    width: 30px;
    height: 30px;
    margin: 0 auto;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
    color: #52607A;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.18s ease;
    user-select: none;
}

.cal-day-cell.empty {
    cursor: default;
    pointer-events: none;
}

.cal-day-cell.available {
    background: #E6F7F3;
    color: #0F766E;
    font-weight: 600;
}

.cal-day-cell.available:hover {
    background: #DDF6F1;
    transform: scale(1.08);
    box-shadow: 0 2px 6px rgba(15, 118, 110, 0.2);
}

.cal-day-cell.selected {
    background: #0F766E !important;
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.35);
    transform: scale(1.05);
}

.cal-day-cell.disabled {
    color: #C7D3E8;
    cursor: not-allowed;
    background: transparent;
}

/* Legend */
.cal-legend-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 2px;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

.legend-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.legend-dot.dot-available {
    background: #2dd4bf;
}

.legend-dot.dot-selected {
    background: #0F766E;
}

.legend-label {
    font-size: 10.5px;
    color: #52607A;
    font-weight: 500;
}

/* Selected Date Preview Box */
.cal-selected-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
    border-radius: 10px;
    padding: 7px 10px;
    font-size: 11.5px;
    color: #0B1426;
}

.cal-selected-preview strong {
    color: #0F766E;
    font-weight: 700;
}

/* Time Slots Pane */
.slots-sub-pane {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.slots-header-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #0B1426;
    margin-bottom: 10px;
}

.slots-buttons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 10px;
}

.time-slot-btn {
    padding: 7px 5px;
    border-radius: 8px;
    border: 1px solid #E4E9F2;
    background: #FFFFFF;
    color: #0B1426;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.18s ease;
    box-shadow: 0 1px 2px rgba(11, 20, 38, 0.02);
}

.time-slot-btn:hover {
    border-color: #0F766E;
    color: #0F766E;
    background: #F6F8FB;
}

.time-slot-btn.active {
    background: #0F766E;
    color: #FFFFFF;
    border-color: #0F766E;
    box-shadow: 0 3px 10px rgba(15, 118, 110, 0.25);
    font-weight: 700;
}

/* Timezone Box */
.timezone-select-box {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
    border-radius: 8px;
    padding: 5px 8px;
    margin-bottom: 10px;
}

.tz-inner {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #52607A;
}

.tz-label {
    font-weight: 500;
    color: #52607A;
    font-size: 11px;
}

.tz-dropdown {
    flex: 1;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: #0B1426;
    cursor: pointer;
    outline: none;
}

/* Continue Button */
.booking-continue-btn {
    width: 100%;
    background: #0F766E;
    color: #FFFFFF;
    border: none;
    border-radius: 9px;
    padding: 10px;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.25);
}

.booking-continue-btn:hover {
    background: #0d655e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.35);
}

/* STEP 2: Details Form */
.booking-form-pane {
    display: flex;
    flex-direction: column;
}

.form-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    flex-wrap: wrap;
    gap: 8px;
}

.form-back-step-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: #0F766E;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    padding: 0;
}

.form-back-step-btn:hover {
    text-decoration: underline;
}

.form-selected-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #E6F7F3;
    color: #0F766E;
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
}

.form-section-title {
    font-size: 17px;
    font-weight: 800;
    color: #0B1426;
    margin-bottom: 4px;
}

.form-section-sub {
    font-size: 12.5px;
    color: #52607A;
    margin-bottom: 14px;
}

.booking-actual-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.form-row-two {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.form-field-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-field-group label {
    font-size: 11.5px;
    font-weight: 600;
    color: #0B1426;
}

.form-field-group input,
.form-field-group select,
.form-field-group textarea {
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid #E4E9F2;
    background: #F6F8FB;
    font-size: 12.5px;
    font-family: inherit;
    color: #0B1426;
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.form-field-group input:focus,
.form-field-group select:focus,
.form-field-group textarea:focus {
    border-color: #0F766E;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(15, 118, 110, 0.12);
}

.booking-submit-confirm-btn {
    width: 100%;
    background: #0F766E;
    color: #FFFFFF;
    border: none;
    border-radius: 10px;
    padding: 11px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 4px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

.booking-submit-confirm-btn:hover {
    background: #0d655e;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.35);
}

/* STEP 3: Booking Success */
.booking-success-pane {
    text-align: center;
    padding: 10px 8px;
}

.success-celebration-badge {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #E6F7F3;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    color: #0F766E;
    animation: scaleIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes scaleIn {
    from { transform: scale(0.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.success-title {
    font-size: 20px;
    font-weight: 800;
    color: #0B1426;
    margin-bottom: 6px;
}

.success-sub {
    font-size: 13px;
    color: #52607A;
    margin-bottom: 18px;
}

.success-details-card {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
    border-radius: 12px;
    padding: 14px 16px;
    text-align: left;
    margin-bottom: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.success-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12.5px;
    border-bottom: 1px solid rgba(228, 233, 242, 0.6);
    padding-bottom: 6px;
}

.success-detail-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label {
    color: #8494B0;
    font-weight: 500;
}

.detail-val {
    color: #0B1426;
    font-weight: 600;
    text-align: right;
}

.meet-link {
    color: #0F766E;
    text-decoration: none;
    font-weight: 600;
}

.meet-link:hover {
    text-decoration: underline;
}

.success-calendar-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 14px;
}

.done-action-btn {
    padding: 10px;
    border-radius: 10px;
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    color: #0B1426;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.done-action-btn:hover {
    background: #F6F8FB;
}

.booking-error-banner {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #DC2626;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: fadeIn 0.2s ease;
}

.success-meet-btn {
    width: 100%;
    background: #0F766E;
    color: #FFFFFF !important;
    border: none;
    border-radius: 10px;
    padding: 12px 18px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
    cursor: pointer;
}

.success-meet-btn:hover {
    background: #0d655e;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.35);
}

.success-notice-text {
    font-size: 12px;
    color: #52607A;
    margin: 8px 0 0 0;
    line-height: 1.5;
}

.success-notice-text strong {
    color: #0B1426;
}

.btn-spinner {
    animation: btnSpin 0.75s linear infinite;
    display: inline-block;
    vertical-align: middle;
}

@keyframes btnSpin {
    100% { transform: rotate(360deg); }
}

/* ==========================================================================
   FREE TRIAL MODAL SPECIFIC STYLES
   ========================================================================== */
.trial-modal-wrapper {
    max-width: 980px;
}

.trial-step-header {
    margin-bottom: 16px;
}

.trial-step-pill {
    display: inline-block;
    padding: 3px 10px;
    background: #E6F7F3;
    border: 1px solid #5EEAD4;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: #0F766E;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.trial-step-title {
    font-size: 19px;
    font-weight: 700;
    color: #0B1426;
    margin: 0 0 4px 0;
}

.trial-step-sub {
    font-size: 13px;
    color: #52607A;
    margin: 0;
    line-height: 1.4;
}

/* Fast SSO Buttons */
.trial-sso-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 12px;
}

.sso-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 12px;
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #0B1426;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sso-btn:hover {
    background: #F6F8FB;
    border-color: #0F766E;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(11, 20, 38, 0.05);
}

.trial-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 10px 0 14px;
    color: #94A3B8;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.trial-divider::before,
.trial-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid #E4E9F2;
}

.trial-divider span {
    padding: 0 10px;
}

.trial-trust-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    border-radius: 12px;
    font-size: 12px;
    color: #52607A;
    margin-top: 14px;
}

.trust-stars {
    color: #0F766E;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Meeting Platform & CRM Choice Grids */
.platform-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 4px;
}

.choice-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    border-radius: 10px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
    color: #0B1426;
    transition: all 0.2s ease;
}

.choice-card input[type="radio"] {
    accent-color: #0F766E;
    margin: 0;
    cursor: pointer;
}

.choice-card:hover {
    border-color: #0F766E;
    background: #F6F8FB;
}

.choice-card.active {
    background: #E6F7F3;
    border-color: #0F766E;
    color: #0F766E;
    font-weight: 600;
}

.trial-action-cta {
    margin-top: 8px;
}

/* Responsive Modal Styling */
@media (max-width: 768px) {
    .booking-modal-wrapper {
        padding: 16px;
        max-height: 96vh;
    }
    .booking-split-container {
        gap: 20px;
    }
    .booking-main-title {
        font-size: 22px;
    }
    .trial-sso-group {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .booking-split-container {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .booking-card-inner-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .form-row-two {
        grid-template-columns: 1fr;
    }
    .slots-buttons-grid {
        grid-template-columns: 1fr 1fr;
    }
    .booking-card-main {
        padding: 16px;
    }
    .platform-choice-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   DEDICATED SERVICES PAGES STYLES (Call Audit, Voice Bot, Trust & Observability)
   ========================================================================== */

/* Active State in Services Menu */
.service-dropdown-item.active {
    background: rgba(94, 234, 212, 0.08);
    border-left: 3px solid #5EEAD4;
}

body.light-mode .service-dropdown-item.active {
    background: #E6F7F3;
    border-left: 3px solid #0F766E;
}

/* Service Hero Section */
.service-hero-section {
    padding: 140px 24px 70px;
    background: radial-gradient(circle at 50% 10%, rgba(94, 234, 212, 0.08) 0%, #0B1426 65%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.service-hero-container {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.service-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 24px;
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.1);
}

.service-hero-title {
    font-size: 54px;
    font-weight: 850;
    line-height: 1.15;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    margin-bottom: 22px;
}

.service-title-gradient {
    background: linear-gradient(135deg, #5EEAD4 0%, #38BDF8 60%, #FFFFFF 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-hero-sub {
    font-size: 18px;
    line-height: 1.65;
    color: #A9B8CE;
    max-width: 740px;
    margin-bottom: 36px;
    font-weight: 400;
}

.service-cta-group {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.service-cta-group .hero-btn-demo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 650;
    border-radius: 12px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(94, 234, 212, 0.35);
    transition: all 0.25s ease;
}

.service-cta-group .hero-btn-how {
    display: inline-flex;
    align-items: center;
    padding: 14px 26px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    color: #C7D3E8;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(228, 233, 242, 0.15);
    text-decoration: none;
    transition: all 0.25s ease;
}

.service-cta-group .hero-btn-how:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    border-color: rgba(94, 234, 212, 0.35);
}

/* Live Showcase Section */
.service-showcase-section {
    padding: 30px 24px 80px;
    background: #080E1B;
    position: relative;
}

.service-showcase-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.service-showcase-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 28px;
    flex-wrap: wrap;
    gap: 16px;
}

.service-showcase-header .showcase-title {
    font-size: 26px;
    font-weight: 750;
    color: #FFFFFF;
    margin-top: 6px;
    letter-spacing: -0.015em;
}

.showcase-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.2);
    color: #5EEAD4;
    font-size: 12.5px;
    font-weight: 600;
}

.status-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    animation: statusPulse 1.8s infinite ease-in-out;
}

@keyframes statusPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* 2-Column Console Layout */
.service-console-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
}

.console-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 18px;
    padding: 24px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}

.card-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-wrap: wrap;
    gap: 12px;
}

.call-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13.5px;
    color: #FFFFFF;
}

.call-meta strong {
    font-weight: 650;
}

.call-duration {
    color: #8494B0;
    font-size: 12px;
    padding-left: 4px;
}

.audio-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #5EEAD4;
}

.audio-dot.active-voice {
    box-shadow: 0 0 10px #5EEAD4;
    animation: statusPulse 1.2s infinite ease-in-out;
}

.ai-confidence-pill {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 700;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.25);
}

/* Audio Waveform Player */
.waveform-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 18px;
    background: #080E1B;
    border: 1px solid rgba(228, 233, 242, 0.06);
    border-radius: 12px;
    margin-bottom: 20px;
}

.play-btn-circle {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #5EEAD4;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(94, 234, 212, 0.4);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.play-btn-circle:hover {
    transform: scale(1.08);
}

.waveform-bars {
    display: flex;
    align-items: center;
    gap: 4px;
    height: 32px;
    flex: 1;
}

.waveform-bars span {
    width: 4px;
    background: #5EEAD4;
    border-radius: 2px;
    opacity: 0.85;
    transition: height 0.2s ease;
}

.time-stamp {
    font-family: monospace;
    font-size: 12px;
    color: #8494B0;
    font-weight: 500;
    flex-shrink: 0;
}

/* Live Dialogue Stream */
.transcript-stream {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stream-line {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 14px 16px;
}

.speaker-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 750;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.speaker-tag.rep {
    color: #5EEAD4;
}

.speaker-tag.customer {
    color: #38BDF8;
}

.speaker-text {
    font-size: 13.5px;
    line-height: 1.55;
    color: #C7D3E8;
    margin: 0;
}

.audit-check-flag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 10px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11.5px;
    font-weight: 650;
}

.audit-check-flag.success {
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
}

/* Scorecard & Checklist */
.scorecard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 22px;
    gap: 16px;
}

.score-title {
    font-size: 18px;
    font-weight: 750;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.score-sub {
    font-size: 12px;
    color: #8494B0;
    line-height: 1.4;
    margin: 0;
}

.big-score-badge {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.score-number {
    font-size: 32px;
    font-weight: 850;
    color: #5EEAD4;
    line-height: 1;
}

.score-label {
    font-size: 10px;
    font-weight: 800;
    color: #8494B0;
    letter-spacing: 0.08em;
    margin-top: 4px;
}

.audit-checklist-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.audit-check-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #0B1426;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 12px;
}

.check-status-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    flex-shrink: 0;
}

.check-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.check-info strong {
    font-size: 13px;
    color: #FFFFFF;
    font-weight: 650;
}

.check-info span {
    font-size: 11.5px;
    color: #8494B0;
    line-height: 1.35;
}

.points-pill {
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(94, 234, 212, 0.1);
    color: #5EEAD4;
    font-size: 11px;
    font-weight: 750;
    flex-shrink: 0;
}

.coaching-takeaway-box {
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: auto;
}

.takeaway-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    color: #5EEAD4;
    font-size: 12.5px;
}

.coaching-takeaway-box p {
    font-size: 12.5px;
    color: #C7D3E8;
    line-height: 1.5;
    margin: 0;
}

/* Voice Bot Specific Showcase Styles */
.voice-orb-interactive-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 36px 20px;
    background: #080E1B;
    border: 1px solid rgba(228, 233, 242, 0.06);
    border-radius: 14px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.pulsing-voice-orb {
    position: relative;
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.orb-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(94, 234, 212, 0.35);
    animation: orbPulseRing 2.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.ring-1 { width: 75px; height: 75px; animation-delay: 0s; }
.ring-2 { width: 95px; height: 95px; animation-delay: 0.8s; }

@keyframes orbPulseRing {
    0% { transform: scale(0.8); opacity: 0.8; }
    100% { transform: scale(1.4); opacity: 0; }
}

.orb-core-sphere {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #5EEAD4 60%, #0F766E 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 35px rgba(94, 234, 212, 0.65);
    z-index: 2;
}

.voice-active-label {
    text-align: center;
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.voice-active-label strong {
    font-size: 14px;
    color: #5EEAD4;
}

.voice-active-label span {
    font-size: 12px;
    color: #8494B0;
}

/* Trust & Observability Specific Showcase Styles */
.observability-steps-flow {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.obs-flow-step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px;
    background: #0B1426;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 12px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.obs-flow-step:hover {
    border-color: rgba(94, 234, 212, 0.3);
    transform: translateX(4px);
}

.step-badge-num {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 800;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.step-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-body strong {
    font-size: 13.5px;
    color: #FFFFFF;
    font-weight: 650;
}

.step-body span {
    font-size: 12px;
    color: #8494B0;
    line-height: 1.45;
}

/* 4 Core Pillars Section */
.service-features-section {
    padding: 90px 24px;
    background: #0B1426;
    position: relative;
}

.service-features-container {
    max-width: 1200px;
    margin: 0 auto;
}

.service-pillars-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    margin-top: 48px;
}

.service-pillar-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 16px;
    padding: 28px 22px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.service-pillar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 234, 212, 0.3);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 234, 212, 0.08);
}

.pillar-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(94, 234, 212, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5EEAD4;
    margin-bottom: 20px;
    transition: transform 0.25s ease;
}

.service-pillar-card:hover .pillar-icon-wrap {
    transform: scale(1.08);
    background: rgba(94, 234, 212, 0.18);
}

.service-pillar-card h3 {
    font-size: 18px;
    font-weight: 750;
    color: #FFFFFF;
    margin-bottom: 10px;
    line-height: 1.3;
}

.service-pillar-card p {
    font-size: 13.5px;
    line-height: 1.6;
    color: #8494B0;
    margin: 0;
}

/* Service Stats Strip */
.service-stats-strip {
    padding: 50px 24px;
    background: #080E1B;
    border-top: 1px solid rgba(228, 233, 242, 0.06);
    border-bottom: 1px solid rgba(228, 233, 242, 0.06);
}

.service-stats-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 32px;
    text-align: center;
}

.stat-block {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stat-num {
    font-size: 42px;
    font-weight: 850;
    color: #5EEAD4;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.stat-desc {
    font-size: 13px;
    color: #8494B0;
    font-weight: 500;
    margin-top: 6px;
    letter-spacing: 0.01em;
}

/* Responsive adjustments for service pages */
@media (max-width: 992px) {
    .service-hero-title {
        font-size: 40px;
    }
    .service-console-grid {
        grid-template-columns: 1fr;
    }
    .service-pillars-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .service-hero-section {
        padding: 110px 16px 50px;
    }
    .service-hero-title {
        font-size: 30px;
    }
    .service-hero-sub {
        font-size: 15px;
    }
    .service-pillars-grid {
        grid-template-columns: 1fr;
    }
    .service-stats-grid {
        flex-direction: column;
        gap: 24px;
    }
    .service-showcase-header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR SERVICES PAGES
   ========================================================================== */

body.light-mode .service-hero-section {
    background: radial-gradient(circle at 50% 10%, rgba(15, 118, 110, 0.06) 0%, #F6F8FB 70%);
}

body.light-mode .service-eyebrow {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.2);
    color: #0F766E;
    box-shadow: none;
}

body.light-mode .service-hero-title {
    color: #0B1426;
}

body.light-mode .service-title-gradient {
    background: linear-gradient(135deg, #0F766E 0%, #0369a1 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .service-hero-sub {
    color: #52607A;
}

body.light-mode .service-cta-group .hero-btn-how {
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    color: #0B1426;
    box-shadow: 0 2px 8px rgba(11, 20, 38, 0.04);
}

body.light-mode .service-cta-group .hero-btn-how:hover {
    border-color: #0F766E;
    color: #0F766E;
    background: #E6F7F3;
}

body.light-mode .service-showcase-section {
    background: #FFFFFF;
}

body.light-mode .service-showcase-header .showcase-title {
    color: #0B1426;
}

body.light-mode .showcase-status-badge {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.2);
    color: #0F766E;
}

body.light-mode .status-pulse-dot {
    background: #0F766E;
    box-shadow: 0 0 8px #0F766E;
}

body.light-mode .console-card {
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    box-shadow: 0 10px 30px rgba(11, 20, 38, 0.06);
}

body.light-mode .card-bar {
    border-bottom: 1px solid #E4E9F2;
}

body.light-mode .call-meta {
    color: #0B1426;
}

body.light-mode .call-duration {
    color: #52607A;
}

body.light-mode .audio-dot {
    background: #0F766E;
}

body.light-mode .ai-confidence-pill {
    background: #E6F7F3;
    color: #0F766E;
    border-color: rgba(15, 118, 110, 0.25);
}

body.light-mode .waveform-box {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
}

body.light-mode .play-btn-circle {
    background: #0F766E;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.3);
}

body.light-mode .play-btn-circle svg {
    fill: #FFFFFF;
}

body.light-mode .waveform-bars span {
    background: #0F766E;
}

body.light-mode .time-stamp {
    color: #52607A;
}

body.light-mode .stream-line {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
}

body.light-mode .speaker-tag.rep {
    color: #0F766E;
}

body.light-mode .speaker-tag.customer {
    color: #0284C7;
}

body.light-mode .speaker-text {
    color: #52607A;
}

body.light-mode .audit-check-flag.success {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .score-title {
    color: #0B1426;
}

body.light-mode .score-sub {
    color: #52607A;
}

body.light-mode .score-number {
    color: #0F766E;
}

body.light-mode .score-label {
    color: #52607A;
}

body.light-mode .audit-check-item {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
}

body.light-mode .check-status-icon {
    background: #E6F7F3;
    color: #0F766E;
}

body.light-mode .check-info strong {
    color: #0B1426;
}

body.light-mode .check-info span {
    color: #52607A;
}

body.light-mode .points-pill {
    background: #E6F7F3;
    color: #0F766E;
}

body.light-mode .coaching-takeaway-box {
    background: #E6F7F3;
    border: 1px solid rgba(15, 118, 110, 0.25);
}

body.light-mode .takeaway-head {
    color: #0F766E;
}

body.light-mode .takeaway-head svg {
    stroke: #0F766E;
}

body.light-mode .coaching-takeaway-box p {
    color: #0B1426;
}

body.light-mode .voice-orb-interactive-box {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
}

body.light-mode .orb-ring {
    border-color: rgba(15, 118, 110, 0.3);
}

body.light-mode .orb-core-sphere {
    background: radial-gradient(circle at 35% 35%, #FFFFFF 0%, #0F766E 100%);
    box-shadow: 0 0 25px rgba(15, 118, 110, 0.4);
}

body.light-mode .orb-core-sphere svg {
    stroke: #FFFFFF;
}

body.light-mode .voice-active-label strong {
    color: #0F766E;
}

body.light-mode .voice-active-label span {
    color: #52607A;
}

body.light-mode .obs-flow-step {
    background: #F6F8FB;
    border: 1px solid #E4E9F2;
}

body.light-mode .obs-flow-step:hover {
    border-color: #0F766E;
}

body.light-mode .step-badge-num {
    background: #0F766E;
    color: #FFFFFF;
}

body.light-mode .step-body strong {
    color: #0B1426;
}

body.light-mode .step-body span {
    color: #52607A;
}

body.light-mode .service-features-section {
    background: #F6F8FB;
}

body.light-mode .service-pillar-card {
    background: #FFFFFF;
    border: 1px solid #E4E9F2;
    box-shadow: 0 4px 14px rgba(11, 20, 38, 0.03);
}

body.light-mode .service-pillar-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.12);
}

body.light-mode .pillar-icon-wrap {
    background: #E6F7F3;
    color: #0F766E;
}

body.light-mode .pillar-icon-wrap svg {
    stroke: #0F766E;
}

body.light-mode .service-pillar-card:hover .pillar-icon-wrap {
    background: #DDF6F1;
}

body.light-mode .service-pillar-card h3 {
    color: #0B1426;
}

body.light-mode .service-pillar-card p {
    color: #52607A;
}

body.light-mode .service-stats-strip {
    background: #FFFFFF;
    border-top: 1px solid #E4E9F2;
    border-bottom: 1px solid #E4E9F2;
}

body.light-mode .stat-num {
    color: #0F766E;
}

body.light-mode .stat-desc {
    color: #52607A;
}

/* ==========================================================================
   CALL AUDIT DEDICATED PAGE STYLES (MATCHING USER SCREENSHOTS)
   ========================================================================== */

/* Editorial Heading Accent (Clean modern sans-serif matching index page) */
.editorial-accent {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    color: #5EEAD4;
    letter-spacing: inherit;
}

body.light-mode .editorial-accent {
    color: #0F766E;
}

/* 1. Hero Section */
.audit-hero-section {
    padding: 130px 24px 85px;
    background-color: #0B1426;
    background-image: radial-gradient(rgba(94, 234, 212, 0.09) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
}

/* Ambient Glow Orbs in Hero */
.audit-hero-bg-effects {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.audit-hero-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.audit-hero-glow-orb.orb-primary {
    width: 600px;
    height: 600px;
    top: -120px;
    left: -120px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.16) 0%, rgba(15, 27, 51, 0) 70%);
    animation: heroOrbFloat 14s ease-in-out infinite alternate;
}

.audit-hero-glow-orb.orb-secondary {
    width: 550px;
    height: 550px;
    bottom: -80px;
    right: -80px;
    background: radial-gradient(circle, rgba(15, 118, 110, 0.22) 0%, rgba(11, 20, 38, 0) 70%);
    animation: heroOrbFloat2 16s ease-in-out infinite alternate;
}

.audit-hero-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 1;
}

/* Eyebrow Badge */
.audit-service-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 16px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.28);
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 15px rgba(94, 234, 212, 0.08);
}

.badge-dot-cyan {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px #5EEAD4;
}

.badge-dot-cyan.pulse {
    animation: pulseCyanDot 2s infinite ease-in-out;
}

/* Hero Typography */
.audit-hero-heading {
    font-size: 58px;
    font-weight: 800;
    line-height: 1.1;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    margin-bottom: 22px;
}

.audit-hero-heading .text-gradient,
.team-heading .text-gradient,
.why-heading .text-gradient,
.cta-heading .text-gradient {
    background: linear-gradient(90deg, #FFFFFF 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.audit-hero-desc {
    font-size: 16.5px;
    line-height: 1.65;
    color: #A9B8CE;
    max-width: 520px;
    margin-bottom: 34px;
    font-weight: 400;
}

/* Action Buttons */
.audit-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.audit-btn-demo {
    padding: 13px 26px;
    border-radius: 99px;
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 750;
    font-size: 15px;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 20px rgba(94, 234, 212, 0.35);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.audit-btn-demo:hover {
    background: #2DD4BF;
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(94, 234, 212, 0.5);
}

.audit-btn-outline {
    padding: 12px 24px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.04);
    color: #FFFFFF;
    font-weight: 650;
    font-size: 15px;
    text-decoration: none;
    border: 1.5px solid rgba(228, 233, 242, 0.2);
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(8px);
}

.audit-btn-outline:hover {
    border-color: #5EEAD4;
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.08);
    transform: translateY(-2px);
}

/* Live Micro-Stats Strip under Buttons */
.audit-hero-live-strip {
    display: flex;
    gap: 10px;
    margin-top: 34px;
    flex-wrap: wrap;
}

.live-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(15, 27, 51, 0.65);
    border: 1px solid rgba(228, 233, 242, 0.08);
    font-size: 12.5px;
    color: #C7D3E8;
    font-weight: 550;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.live-pill svg {
    color: #5EEAD4;
}

.live-pulse-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    animation: liveBlink 1.5s infinite;
}

/* Mockup Window & Floating Badges */
.audit-hero-mockup-wrapper {
    display: flex;
    justify-content: center;
    position: relative;
}

.floating-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    border-radius: 14px;
    background: rgba(15, 27, 51, 0.9);
    border: 1px solid rgba(94, 234, 212, 0.3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 20px rgba(94, 234, 212, 0.1);
    backdrop-filter: blur(14px);
    z-index: 4;
    pointer-events: none;
}

.floating-badge.badge-top-right {
    top: -16px;
    right: -20px;
    animation: floatBadge1 4s ease-in-out infinite;
}

.floating-badge.badge-bottom-left {
    bottom: -18px;
    left: -20px;
    animation: floatBadge2 4.5s ease-in-out infinite;
}

.badge-icon {
    font-size: 18px;
}

.badge-label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #8494B0;
    display: block;
}

.badge-val {
    font-size: 13.5px;
    font-weight: 750;
    color: #5EEAD4;
    display: block;
}

.audit-window-frame {
    width: 100%;
    max-width: 530px;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.95);
    border-radius: 24px;
    box-shadow: 0 25px 60px -10px rgba(0, 0, 0, 0.45), 0 0 45px rgba(94, 234, 212, 0.18);
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 26px 24px 22px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
}

.audit-window-frame:hover {
    transform: translateY(-5px);
    box-shadow: 0 32px 75px -10px rgba(0, 0, 0, 0.55), 0 0 55px rgba(94, 234, 212, 0.28);
}

/* Card Header (matching AI Agents Voice Bot Console) */
.audit-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 0 2px;
}

.audit-card-header .ai-bot-tag {
    display: flex;
    align-items: center;
    gap: 10px;
}

.audit-card-header .bot-wave-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #F6F8FB;
    border: 1px solid #E6F7F3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audit-card-header .bot-type-text {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #0F172A;
    text-transform: uppercase;
}

.audit-card-header .dot-sep {
    color: #94A3B8;
    margin: 0 4px;
}

.audit-card-header .bot-live-pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: #ECFDF5;
    border: 1px solid #A7F3D0;
    color: #059669;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.audit-card-header .live-dot-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981, 0 0 16px #34D399;
    animation: livePulseAnim 1.8s infinite;
}

/* Window/Card Content Body */
.audit-card-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Live Audio Waveform Stream */
.audio-stream-bar {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.audio-stream-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
}

.stream-channel {
    color: #0F172A;
    font-weight: 750;
}

.stream-timer {
    color: #64748B;
    font-weight: 600;
    font-size: 11.5px;
}

.audio-stream-waves {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
    padding-top: 2px;
}

.wave-bar {
    flex: 1;
    border-radius: 99px;
    width: 3.5px;
    background: linear-gradient(180deg, #5EEAD4 0%, #0F766E 100%);
    box-shadow: 0 0 6px rgba(94, 234, 212, 0.35);
    min-height: 4px;
    animation: eqWave 1.4s ease-in-out infinite alternate;
}

.wave-bar.w-1  { animation-delay: 0.1s; height: 6px; }
.wave-bar.w-2  { animation-delay: 0.3s; height: 14px; }
.wave-bar.w-3  { animation-delay: 0.05s; height: 18px; }
.wave-bar.w-4  { animation-delay: 0.4s; height: 9px; }
.wave-bar.w-5  { animation-delay: 0.2s; height: 16px; }
.wave-bar.w-6  { animation-delay: 0.5s; height: 8px; }
.wave-bar.w-7  { animation-delay: 0.15s; height: 20px; }
.wave-bar.w-8  { animation-delay: 0.35s; height: 12px; }
.wave-bar.w-9  { animation-delay: 0.08s; height: 17px; }
.wave-bar.w-10 { animation-delay: 0.45s; height: 11px; }
.wave-bar.w-11 { animation-delay: 0.25s; height: 19px; }
.wave-bar.w-12 { animation-delay: 0.55s; height: 7px; }
.wave-bar.w-13 { animation-delay: 0.12s; height: 15px; }
.wave-bar.w-14 { animation-delay: 0.38s; height: 21px; }
.wave-bar.w-15 { animation-delay: 0.18s; height: 10px; }
.wave-bar.w-16 { animation-delay: 0.48s; height: 16px; }
.wave-bar.w-17 { animation-delay: 0.22s; height: 13px; }
.wave-bar.w-18 { animation-delay: 0.52s; height: 8px; }

/* Donut Score Row */
.audit-score-row {
    display: grid;
    grid-template-columns: 104px 1fr;
    gap: 20px;
    align-items: center;
}

.audit-score-circle-wrap {
    position: relative;
    width: 96px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-donut-svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}

.score-donut-bg {
    fill: none;
    stroke: #F1F5F9;
    stroke-width: 9;
}

.score-donut-meter {
    fill: none;
    stroke: #0F766E;
    stroke-width: 9;
    stroke-linecap: round;
    filter: drop-shadow(0 0 6px rgba(15, 118, 110, 0.25));
    transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.score-number-display {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.score-number-display .score-val {
    font-size: 32px;
    font-weight: 850;
    color: #0F172A;
    letter-spacing: -0.02em;
    line-height: 1;
}

.score-number-display .score-sub {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: #0F766E;
    margin-top: 3px;
}

/* Metrics Table */
.audit-metrics-table {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    transition: all 0.2s ease;
}

.metric-row:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    transform: translateX(3px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.metric-left {
    display: flex;
    align-items: center;
    gap: 9px;
}

.metric-check-icon { color: #059669; }
.metric-flag-icon { color: #D97706; }
.metric-shield-icon { color: #0F766E; }

.metric-label {
    font-size: 13px;
    color: #0F172A;
    font-weight: 650;
}

.metric-status-pill {
    font-size: 11.5px;
    font-weight: 750;
    padding: 3px 10px;
    border-radius: 6px;
}

.metric-status-pill.pass {
    background: #ECFDF5;
    color: #059669;
    border: 1px solid #A7F3D0;
    box-shadow: none;
}

.metric-status-pill.flags {
    background: #FEF3C7;
    color: #D97706;
    border: 1px solid #FDE68A;
    box-shadow: none;
}

/* Dispositions Block */
.dispositions-block {
    display: flex;
    flex-direction: column;
}

.disposition-header-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 10.5px;
    font-weight: 800;
    color: #64748B;
    letter-spacing: 0.08em;
    margin-bottom: 9px;
}

.disp-count-badge {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #DDF6F1;
    color: #0F766E;
    border: 1px solid rgba(15, 118, 110, 0.2);
    font-weight: 750;
}

.disposition-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.disp-chip {
    font-size: 12px;
    padding: 6px 12px;
    border-radius: 8px;
    background: #F8FAFC;
    color: #475569;
    border: 1px solid #E2E8F0;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.disp-chip:hover,
.disp-chip.active {
    background: #E6F7F3;
    color: #0F766E;
    border-color: #0F766E;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(15, 118, 110, 0.15);
    transform: translateY(-1px);
}

.audit-bottom-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: #F0FDF9;
    border: 1px solid #99F6E4;
    margin-top: 4px;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.06);
}

.banner-stat {
    font-size: 20px;
    font-weight: 850;
    color: #0F766E;
    letter-spacing: -0.01em;
}

.banner-text {
    font-size: 13px;
    color: #0F172A;
    font-weight: 600;
}

/* 2. By Team Section (Screenshots 1 & 3) */
.team-audit-section {
    padding: 90px 24px;
    background: #080E1B;
}

.team-audit-container {
    max-width: 1200px;
    margin: 0 auto;
}

.team-section-header {
    margin-bottom: 36px;
    text-align: left;
}

.team-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5EEAD4;
    margin-bottom: 12px;
}

.team-heading {
    font-size: 46px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    margin-bottom: 16px;
    line-height: 1.15;
}

.team-subheading {
    font-size: 16.5px;
    line-height: 1.6;
    color: #A9B8CE;
    max-width: 680px;
    margin-bottom: 28px;
}

.team-tabs-bar {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.team-tab-btn {
    padding: 10px 22px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 650;
    cursor: pointer;
    background: #0F1B33;
    color: #8494B0;
    border: 1px solid rgba(228, 233, 242, 0.12);
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-tab-btn:hover {
    color: #FFFFFF;
    border-color: rgba(94, 234, 212, 0.35);
}

.team-tab-btn.active {
    background: #5EEAD4;
    color: #0B1426;
    border-color: #5EEAD4;
    font-weight: 750;
    box-shadow: 0 4px 15px rgba(94, 234, 212, 0.25);
}

.team-content-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 24px;
    padding: 48px;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 52px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.team-card-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.team-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #A9B8CE;
    margin-bottom: 30px;
}

.scope-header-tag,
.impact-header-tag {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5EEAD4;
    margin-bottom: 22px;
}

.team-steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team-step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: background 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-step-item:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(6px);
}

.step-num-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.1);
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.team-step-item:hover .step-num-badge {
    background: #5EEAD4;
    color: #0B1426;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.5);
    transform: scale(1.1);
}

.step-text-wrap {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.step-text-wrap strong {
    font-size: 15px;
    color: #FFFFFF;
    font-weight: 700;
}

.step-text-wrap span {
    font-size: 13.5px;
    color: #8494B0;
    line-height: 1.45;
}

.impact-cards-group {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.impact-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #0B1426;
    border: 1px solid rgba(228, 233, 242, 0.08);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, box-shadow 0.28s ease;
    overflow: hidden;
}

.impact-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3.5px;
    background: linear-gradient(180deg, #5EEAD4 0%, #0F766E 100%);
    transform: scaleY(0);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.impact-card:hover::before {
    transform: scaleY(1);
}

.impact-card:hover {
    transform: translateX(8px);
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 20px rgba(94, 234, 212, 0.1);
}

.impact-icon-circle {
    color: #5EEAD4;
    flex-shrink: 0;
    display: flex;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
}

.impact-card:hover .impact-icon-circle {
    transform: scale(1.2) rotate(6deg);
    filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.65));
}

.impact-text {
    font-size: 14.5px;
    color: #FFFFFF;
    font-weight: 600;
    line-height: 1.4;
}

/* Team Impact Highlight Banner (Collections & Customer Support) */
.team-impact-banner {
    display: flex;
    align-items: center;
    padding: 18px 24px;
    border-radius: 14px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.22);
    margin-top: 14px;
    transition: all 0.25s ease;
}

.team-impact-banner.banner-split {
    justify-content: space-between;
}

.team-impact-banner.banner-full {
    justify-content: center;
    text-align: center;
}

.team-impact-banner .banner-highlight {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-style: normal;
    font-size: 24px;
    font-weight: 700;
    color: #5EEAD4;
    letter-spacing: -0.02em;
}

.team-impact-banner .banner-subhighlight {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-style: normal;
    font-size: 20px;
    font-weight: 600;
    color: #5EEAD4;
    opacity: 0.95;
    letter-spacing: -0.01em;
}

/* 3. Why Goodmeetings is Different (Screenshot 4) */
.why-different-section {
    padding: 90px 24px;
    background: #0B1426;
}

.why-different-container {
    max-width: 1200px;
    margin: 0 auto;
}

.why-different-header {
    margin-bottom: 40px;
}

.why-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5EEAD4;
    margin-bottom: 12px;
}

.why-heading {
    font-size: 46px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

.differentiators-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.diff-card {
    position: relative;
    padding: 38px 34px;
    border-radius: 20px;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
    cursor: default;
    transform-style: preserve-3d;
}

/* Spotlight pointer follower */
.diff-card::after,
.vb-stat-card::before,
.vb-timeline-card::before,
.explore-service-card::before {
    content: '';
    position: absolute;
    top: var(--mouse-y, -150px);
    left: var(--mouse-x, -150px);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.15) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
    z-index: 1;
}

.diff-card:hover::after,
.vb-stat-card:hover::before,
.vb-timeline-card:hover::before,
.explore-service-card:hover::before {
    opacity: 1;
}

/* Laser sweep top border */
.diff-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, #5EEAD4, #FFFFFF, #5EEAD4, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.diff-card:hover::before {
    opacity: 1;
    animation: laserSweep 1.8s ease-in-out infinite;
}

@keyframes laserSweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

.diff-card:hover {
    transform: translateY(-8px);
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.14);
}

/* Individual card hover glow highlights */
.diff-card:nth-child(1):hover {
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.2);
}

.diff-card:nth-child(2):hover {
    border-color: rgba(56, 189, 248, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(56, 189, 248, 0.2);
}
.diff-card:nth-child(2):hover::before {
    background: linear-gradient(90deg, transparent, #38BDF8, #FFFFFF, #38BDF8, transparent);
}
.diff-card:nth-child(2)::after {
    background: radial-gradient(circle, rgba(56, 189, 248, 0.12) 0%, transparent 70%);
}

.diff-card:nth-child(3):hover {
    border-color: rgba(168, 85, 247, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(168, 85, 247, 0.2);
}
.diff-card:nth-child(3):hover::before {
    background: linear-gradient(90deg, transparent, #C084FC, #FFFFFF, #C084FC, transparent);
}
.diff-card:nth-child(3)::after {
    background: radial-gradient(circle, rgba(168, 85, 247, 0.12) 0%, transparent 70%);
}

.diff-card:nth-child(4):hover {
    border-color: rgba(251, 146, 60, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(251, 146, 60, 0.2);
}
.diff-card:nth-child(4):hover::before {
    background: linear-gradient(90deg, transparent, #FB923C, #FFFFFF, #FB923C, transparent);
}
.diff-card:nth-child(4)::after {
    background: radial-gradient(circle, rgba(251, 146, 60, 0.12) 0%, transparent 70%);
}

.diff-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    position: relative;
    z-index: 2;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease;
}

.diff-card:hover .diff-icon-box {
    transform: translateY(-4px) scale(1.12) rotate(3deg);
}

.diff-card:hover .diff-icon-box svg {
    animation: iconMicroBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iconMicroBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

.diff-icon-box.icon-teal {
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.28);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.15);
}

.diff-icon-box.icon-blue {
    background: rgba(56, 189, 248, 0.12);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.28);
    box-shadow: 0 0 20px rgba(56, 189, 248, 0.15);
}

.diff-icon-box.icon-purple {
    background: rgba(168, 85, 247, 0.12);
    color: #C084FC;
    border: 1px solid rgba(168, 85, 247, 0.28);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.15);
}

.diff-icon-box.icon-amber {
    background: rgba(251, 146, 60, 0.12);
    color: #FB923C;
    border: 1px solid rgba(251, 146, 60, 0.28);
    box-shadow: 0 0 20px rgba(251, 146, 60, 0.15);
}

.diff-title {
    font-size: 20px;
    font-weight: 750;
    color: #5EEAD4;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
    position: relative;
    z-index: 2;
}

.diff-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #A9B8CE;
    margin: 0;
    position: relative;
    z-index: 2;
}

.diff-chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    position: relative;
    z-index: 2;
}

.diff-chip {
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.1);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.2);
    font-weight: 600;
    transition: all 0.25s ease;
}

.diff-card:hover .diff-chips-row .diff-chip {
    animation: chipCascade 0.4s ease backwards;
}

.diff-card:hover .diff-chips-row .diff-chip:nth-child(1) { animation-delay: 0.04s; }
.diff-card:hover .diff-chips-row .diff-chip:nth-child(2) { animation-delay: 0.08s; }
.diff-card:hover .diff-chips-row .diff-chip:nth-child(3) { animation-delay: 0.12s; }
.diff-card:hover .diff-chips-row .diff-chip:nth-child(4) { animation-delay: 0.16s; }
.diff-card:hover .diff-chips-row .diff-chip:nth-child(5) { animation-delay: 0.20s; }

@keyframes chipCascade {
    0% { transform: translateY(6px); opacity: 0.6; }
    50% { transform: translateY(-2px); }
    100% { transform: translateY(0); opacity: 1; }
}

.diff-chip:hover {
    background: rgba(94, 234, 212, 0.25);
    border-color: #5EEAD4;
    color: #FFFFFF;
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 4px 12px rgba(94, 234, 212, 0.25);
}

/* =========================================================
   BESPOKE ANIMATION WIDGETS FOR DIFFERENTIATOR CARDS
   ========================================================= */

.diff-widget {
    margin-top: 24px;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(11, 20, 38, 0.7);
    border: 1px solid rgba(228, 233, 242, 0.07);
    position: relative;
    z-index: 2;
    transition: all 0.35s ease;
}

.diff-card:hover .diff-widget {
    background: rgba(11, 20, 38, 0.85);
    border-color: rgba(228, 233, 242, 0.14);
}

.diff-widget-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

/* --- WIDGET 1: Language Depth (Audio Equalizer & Dialect Stream) --- */
.lang-live-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    font-weight: 700;
    color: #5EEAD4;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-dot.pulse-teal {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    animation: livePulseTeal 1.6s ease-in-out infinite;
}

@keyframes livePulseTeal {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #5EEAD4; }
    50% { transform: scale(1.4); opacity: 0.7; box-shadow: 0 0 14px #5EEAD4, 0 0 20px rgba(94, 234, 212, 0.4); }
}

.audio-waveform-bars {
    display: flex;
    align-items: flex-end;
    gap: 3.5px;
    height: 18px;
    padding-bottom: 1px;
}

.wave-bar {
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #5EEAD4, #0F766E);
    animation: waveBounce 1.2s ease-in-out infinite alternate;
}

.wave-bar.wb-1 { height: 7px; animation-duration: 0.9s; animation-delay: 0.1s; }
.wave-bar.wb-2 { height: 16px; animation-duration: 1.3s; animation-delay: 0.25s; }
.wave-bar.wb-3 { height: 11px; animation-duration: 0.8s; animation-delay: 0.05s; }
.wave-bar.wb-4 { height: 18px; animation-duration: 1.1s; animation-delay: 0.3s; }
.wave-bar.wb-5 { height: 13px; animation-duration: 1.4s; animation-delay: 0.15s; }
.wave-bar.wb-6 { height: 8px; animation-duration: 0.7s; animation-delay: 0.2s; }

.diff-card:hover .wave-bar {
    animation-duration: 0.5s;
    background: linear-gradient(180deg, #FFFFFF, #5EEAD4);
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.6);
}

@keyframes waveBounce {
    0% { height: 4px; }
    100% { height: 18px; }
}

.lang-pill-stream {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.lang-pill {
    font-size: 11.5px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(228, 233, 242, 0.04);
    border: 1px solid rgba(228, 233, 242, 0.08);
    color: #A9B8CE;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition: all 0.3s ease;
}

.lang-pill-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.6;
}

.lang-pill.active-pill {
    background: rgba(94, 234, 212, 0.14);
    border-color: rgba(94, 234, 212, 0.35);
    color: #5EEAD4;
    box-shadow: 0 0 12px rgba(94, 234, 212, 0.15);
}

.lang-pill.active-pill .lang-pill-dot {
    opacity: 1;
    box-shadow: 0 0 6px #5EEAD4;
}

.diff-card:hover .lang-pill:not(.active-pill) {
    border-color: rgba(94, 234, 212, 0.2);
    color: #FFFFFF;
}

/* --- WIDGET 2: Full Metric Coverage (3-Tier Compliance Score Matrix) --- */
.diff-metric-widget {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.metric-meter-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.metric-meter-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-meter-name {
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.metric-meter-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 2.5px 8px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.badge-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
}

.badge-green {
    background: rgba(16, 185, 129, 0.15);
    color: #34D399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}
.dot-green { background: #34D399; box-shadow: 0 0 6px #34D399; }

.badge-blue {
    background: rgba(56, 189, 248, 0.15);
    color: #38BDF8;
    border: 1px solid rgba(56, 189, 248, 0.3);
}
.dot-blue { background: #38BDF8; box-shadow: 0 0 6px #38BDF8; }

.badge-cyan {
    background: rgba(94, 234, 212, 0.15);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.3);
}
.dot-cyan { background: #5EEAD4; box-shadow: 0 0 6px #5EEAD4; }

.metric-meter-track {
    height: 6px;
    border-radius: 4px;
    background: rgba(228, 233, 242, 0.08);
    overflow: hidden;
    position: relative;
}

.metric-meter-bar {
    height: 100%;
    border-radius: 4px;
    width: var(--bar-fill, 100%);
    position: relative;
    transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.bar-green {
    background: linear-gradient(90deg, #10B981, #34D399);
    box-shadow: 0 0 10px rgba(52, 211, 153, 0.4);
}

.bar-blue {
    background: linear-gradient(90deg, #0284C7, #38BDF8);
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.4);
}

.bar-cyan {
    background: linear-gradient(90deg, #0F766E, #5EEAD4);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.4);
}

.diff-card:hover .metric-meter-bar::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.7), transparent);
    animation: barShineSweep 1.4s ease-in-out infinite;
}

@keyframes barShineSweep {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* --- WIDGET 3: Dispositions (AI Real-Time Radar Scanner & Tags) --- */
.diff-tagger-widget {
    display: flex;
    flex-direction: column;
}

.tagger-scan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.tagger-status {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    font-weight: 700;
    color: #C084FC;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.scanner-dot.pulse-purple {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #C084FC;
    box-shadow: 0 0 10px #C084FC;
    animation: livePulsePurple 1.6s ease-in-out infinite;
}

@keyframes livePulsePurple {
    0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 8px #C084FC; }
    50% { transform: scale(1.4); opacity: 0.7; box-shadow: 0 0 16px #C084FC, 0 0 22px rgba(192, 132, 252, 0.5); }
}

.tagger-speed-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: #E9D5FF;
    background: rgba(168, 85, 247, 0.16);
    padding: 3px 9px;
    border-radius: 12px;
    border: 1px solid rgba(168, 85, 247, 0.35);
}

.tagger-speed-pill svg {
    color: #C084FC;
}

.scanner-container {
    position: relative;
    overflow: hidden;
    padding: 4px 0;
    margin-top: 0;
}

.laser-scanner-beam {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 35px;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.4), rgba(255, 255, 255, 0.75), rgba(192, 132, 252, 0.4), transparent);
    pointer-events: none;
    animation: scannerSweepBeam 3.2s ease-in-out infinite;
    z-index: 10;
}

.diff-card:hover .laser-scanner-beam {
    animation-duration: 1.5s;
    background: linear-gradient(90deg, transparent, rgba(192, 132, 252, 0.6), #FFFFFF, rgba(192, 132, 252, 0.6), transparent);
}

@keyframes scannerSweepBeam {
    0% { left: -10%; opacity: 0; }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { left: 110%; opacity: 0; }
}

.diff-chip.chip-highlight {
    background: rgba(168, 85, 247, 0.2);
    border-color: rgba(168, 85, 247, 0.45);
    color: #FFFFFF;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.3);
}

/* --- WIDGET 4: Speed That Matters (Turnaround Speedometer & Turbo Stream) --- */
.diff-speed-widget {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.speed-compare-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.speed-label-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.speed-system-name {
    font-size: 12px;
    font-weight: 600;
    color: #A9B8CE;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.speed-system-name.highlight-gold {
    color: #FFFFFF;
    font-weight: 750;
}

.speed-system-name.highlight-gold svg {
    color: #FB923C;
    filter: drop-shadow(0 0 6px rgba(251, 146, 60, 0.6));
}

.speed-time-badge.badge-dim {
    font-size: 11px;
    font-weight: 600;
    color: #7E8DA6;
    background: rgba(228, 233, 242, 0.05);
    padding: 2.5px 8px;
    border-radius: 5px;
    border: 1px solid rgba(228, 233, 242, 0.08);
}

.speed-time-badge.badge-turbo {
    font-size: 11px;
    font-weight: 750;
    color: #FB923C;
    background: rgba(251, 146, 60, 0.15);
    padding: 3px 9px;
    border-radius: 6px;
    border: 1px solid rgba(251, 146, 60, 0.35);
    box-shadow: 0 0 12px rgba(251, 146, 60, 0.2);
    animation: turboGlowPulse 2s ease-in-out infinite;
}

@keyframes turboGlowPulse {
    0%, 100% { box-shadow: 0 0 10px rgba(251, 146, 60, 0.2); }
    50% { box-shadow: 0 0 18px rgba(251, 146, 60, 0.45); }
}

.speed-bar-track {
    height: 6px;
    border-radius: 4px;
    background: rgba(228, 233, 242, 0.08);
    overflow: hidden;
    position: relative;
}

.speed-bar-fill.fill-slow {
    height: 100%;
    width: 22%;
    background: #475569;
    border-radius: 4px;
    opacity: 0.6;
}

.speed-bar-track.turbo-track {
    height: 8px;
    background: rgba(251, 146, 60, 0.1);
    border: 1px solid rgba(251, 146, 60, 0.22);
}

.speed-bar-fill.fill-turbo {
    height: 100%;
    width: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #D97706, #F59E0B, #FB923C, #FDE68A, #FB923C, #F59E0B);
    background-size: 200% 100%;
    animation: turboStream 2.4s linear infinite;
    position: relative;
    box-shadow: 0 0 14px rgba(251, 146, 60, 0.5);
}

.diff-card:hover .speed-bar-fill.fill-turbo {
    animation-duration: 1.2s;
    box-shadow: 0 0 22px rgba(251, 146, 60, 0.7);
}

@keyframes turboStream {
    0% { background-position: 0% 0%; }
    100% { background-position: 200% 0%; }
}

.turbo-particle {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #FFFFFF;
    box-shadow: 0 0 10px #FFFFFF, 0 0 18px #FB923C;
    animation: particlePulse 0.9s ease-in-out infinite alternate;
}

@keyframes particlePulse {
    0% { transform: translateY(-50%) scale(0.8); opacity: 0.8; }
    100% { transform: translateY(-50%) scale(1.4); opacity: 1; }
}

/* 4. Stats Strip & Explore Other Services (Screenshot 5) */
.call-audit-metrics-strip-section {
    padding: 80px 24px 100px;
    background: #080E1B;
}

.metrics-strip-container {
    max-width: 1200px;
    margin: 0 auto;
}

.stats-tiles-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 75px;
}

.stat-tile-card {
    position: relative;
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.2);
    border-radius: 20px;
    padding: 38px 32px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
    overflow: hidden;
    cursor: default;
    transform-style: preserve-3d;
}

.stat-tile-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, #5EEAD4, #FFFFFF, #5EEAD4, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.stat-tile-card:hover::before {
    opacity: 1;
    animation: laserSweep 1.6s ease-in-out infinite;
}

.stat-tile-card:hover {
    transform: translateY(-8px);
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 35px rgba(94, 234, 212, 0.18);
}

.stat-tile-num {
    font-size: 48px;
    font-weight: 850;
    color: #5EEAD4;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
    text-shadow: 0 0 24px rgba(94, 234, 212, 0.3);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stat-tile-card:hover .stat-tile-num {
    transform: scale(1.05);
}

.stat-tile-num.tile-title-text {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
}

.highlight-hours {
    background: linear-gradient(90deg, #FFFFFF 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-tile-text {
    font-size: 14.5px;
    line-height: 1.5;
    color: #A9B8CE;
    font-weight: 500;
}

.explore-services-block {
    display: flex;
    flex-direction: column;
}

.explore-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5EEAD4;
    margin-bottom: 22px;
}

.explore-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.explore-service-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 24px 28px;
    border-radius: 18px;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    transform-style: preserve-3d;
}

.explore-service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2.5px;
    background: linear-gradient(90deg, transparent, #5EEAD4, #FFFFFF, #5EEAD4, transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.explore-service-card:hover::before {
    opacity: 1;
    animation: laserSweep 1.6s ease-in-out infinite;
}

.explore-service-card:hover {
    transform: translateY(-6px);
    border-color: #5EEAD4;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 30px rgba(94, 234, 212, 0.18);
}

.explore-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: #0F2538;
    color: #5EEAD4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, box-shadow 0.3s ease;
}

.explore-service-card:hover .explore-icon-box {
    transform: scale(1.15) rotate(4deg);
    background: rgba(94, 234, 212, 0.2);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.35);
}

.explore-info {
    flex: 1;
}

.explore-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 5px;
    letter-spacing: -0.02em;
}

.explore-desc {
    font-size: 13.5px;
    color: #8494B0;
    margin: 0;
    line-height: 1.45;
}

.explore-arrow {
    color: #5EEAD4;
    display: flex;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.3s ease;
}

.explore-service-card:hover .explore-arrow {
    transform: translateX(8px);
    filter: drop-shadow(0 0 8px rgba(94, 234, 212, 0.6));
}

/* 5. Bottom CTA Section */
.audit-cta-section {
    position: relative;
    padding: 100px 24px;
    text-align: center;
    background: radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.09) 0%, #0B1426 70%);
    border-top: 1px solid rgba(228, 233, 242, 0.08);
    overflow: hidden;
}

.audit-cta-ambient-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 350px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.16) 0%, rgba(15, 118, 110, 0.05) 50%, transparent 75%);
    pointer-events: none;
    filter: blur(60px);
}

.audit-cta-container {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
}

.cta-heading {
    font-size: 38px;
    font-weight: 850;
    color: #FFFFFF;
    margin-bottom: 16px;
    letter-spacing: -0.02em;
}

.cta-sub {
    font-size: 16.5px;
    color: #A9B8CE;
    line-height: 1.6;
    margin-bottom: 34px;
}

.cta-buttons-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Responsive Breakpoints */
@media (max-width: 992px) {
    .audit-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .audit-hero-heading {
        font-size: 42px;
    }
    .team-content-card {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 32px;
    }
    .differentiators-grid {
        grid-template-columns: 1fr;
    }
    .stats-tiles-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .explore-cards-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .audit-hero-section {
        padding: 105px 16px 50px;
    }
    .audit-hero-heading {
        font-size: 32px;
    }
    .team-heading,
    .why-heading,
    .cta-heading {
        font-size: 28px;
    }
    .team-content-card {
        padding: 24px 18px;
    }
    .audit-score-row {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .audit-score-circle-wrap {
        margin: 0 auto;
    }
    .metric-row {
        flex-direction: column;
        gap: 6px;
    }
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR CALL AUDIT PAGE (Core Colors Compliant)
   ========================================================================== */

body.light-mode .audit-hero-section {
    background-color: #FFFFFF;
    background-image: radial-gradient(rgba(15, 118, 110, 0.12) 1px, transparent 1px);
}

body.light-mode .audit-service-badge {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .badge-dot-cyan {
    background: #0F766E;
    box-shadow: 0 0 8px #0F766E;
}

body.light-mode .audit-hero-heading {
    color: #0B1426;
}

body.light-mode .audit-hero-desc {
    color: #52607A;
}

body.light-mode .audit-btn-demo {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(15, 118, 110, 0.25);
}

body.light-mode .audit-btn-demo:hover {
    background: #115e59;
    box-shadow: 0 6px 20px rgba(15, 118, 110, 0.35);
}

body.light-mode .audit-btn-outline {
    background: #FFFFFF;
    color: #0B1426;
    border: 1.5px solid #E4E9F2;
    box-shadow: 0 2px 8px rgba(11, 20, 38, 0.04);
}

body.light-mode .audit-btn-outline:hover {
    border-color: #0F766E;
    color: #0F766E;
    background: #E6F7F3;
}

body.light-mode .audit-window-frame {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    box-shadow: 0 20px 50px rgba(11, 20, 38, 0.08);
}

body.light-mode .team-audit-section {
    background: #F6F8FB;
}

body.light-mode .team-eyebrow {
    color: #0F766E;
}

body.light-mode .team-heading {
    color: #0B1426;
}

body.light-mode .team-subheading {
    color: #52607A;
}

body.light-mode .team-tab-btn {
    background: #FFFFFF;
    color: #52607A;
    border-color: #E4E9F2;
    box-shadow: 0 2px 6px rgba(11, 20, 38, 0.03);
}

body.light-mode .team-tab-btn:hover {
    color: #0B1426;
    border-color: #0F766E;
}

body.light-mode .team-tab-btn.active {
    background: #0B1426;
    color: #FFFFFF;
    border-color: #0B1426;
    box-shadow: 0 4px 12px rgba(11, 20, 38, 0.18);
}

body.light-mode .team-content-card {
    background: #F8FAFD;
    border-color: #E2E8F0;
    box-shadow: 0 10px 40px rgba(11, 20, 38, 0.04);
}

body.light-mode .team-card-title {
    color: #0B1426;
}

body.light-mode .team-card-desc {
    color: #52607A;
}

body.light-mode .scope-header-tag,
body.light-mode .impact-header-tag {
    color: #0F766E;
}

body.light-mode .step-num-badge {
    background: #DDF6F1;
    color: #0F766E;
}

body.light-mode .step-text-wrap strong {
    color: #0B1426;
}

body.light-mode .step-text-wrap span {
    color: #52607A;
}

body.light-mode .impact-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 2px 8px rgba(11, 20, 38, 0.03);
}

body.light-mode .impact-card:hover {
    border-color: #0F766E;
}

body.light-mode .impact-icon-circle {
    color: #0F766E;
}

body.light-mode .impact-text {
    color: #0B1426;
}

body.light-mode .team-impact-banner {
    background: #DDF6F1;
    border-color: rgba(15, 118, 110, 0.15);
}

body.light-mode .team-impact-banner .banner-highlight,
body.light-mode .team-impact-banner .banner-subhighlight {
    color: #0F766E;
}

body.light-mode .why-different-section {
    background: #FFFFFF;
}

body.light-mode .why-eyebrow {
    color: #0F766E;
}

body.light-mode .why-heading {
    color: #0B1426;
}

body.light-mode .diff-card {
    background: #FFFFFF;
    border-color: #E4E9F2;
    box-shadow: 0 6px 20px rgba(11, 20, 38, 0.04);
}

body.light-mode .diff-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.1);
}

body.light-mode .diff-title {
    color: #0F766E;
}

body.light-mode .diff-desc {
    color: #52607A;
}

body.light-mode .diff-chip {
    background: #E6F7F3;
    color: #0F766E;
    border-color: rgba(15, 118, 110, 0.25);
}

/* Light mode for bespoke diff-widgets */
body.light-mode .diff-widget {
    background: #F8FAFC !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

body.light-mode .diff-card:hover .diff-widget {
    background: #F1F5F9 !important;
    border-color: #CBD5E1 !important;
}

body.light-mode .diff-widget .lang-live-tag {
    color: #0F766E !important;
}

body.light-mode .diff-widget .live-dot.pulse-teal {
    background: #0F766E !important;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.6) !important;
}

body.light-mode .diff-widget .wave-bar {
    background: linear-gradient(180deg, #0F766E, #14B8A6) !important;
}

body.light-mode .diff-widget .lang-pill {
    background: #FFFFFF !important;
    border-color: #E2E8F0 !important;
    color: #475569 !important;
}

body.light-mode .diff-widget .lang-pill.active-pill {
    background: #E6F7F3 !important;
    border-color: rgba(15, 118, 110, 0.4) !important;
    color: #0F766E !important;
    box-shadow: 0 0 10px rgba(15, 118, 110, 0.15) !important;
}

body.light-mode .diff-widget .metric-meter-name {
    color: #0F172A !important;
    font-weight: 700 !important;
}

body.light-mode .diff-widget .metric-meter-track {
    background: #E2E8F0 !important;
}

body.light-mode .diff-widget .tagger-status {
    color: #7E22CE !important;
}

body.light-mode .diff-widget .scanner-dot.pulse-purple {
    background: #7E22CE !important;
    box-shadow: 0 0 8px rgba(126, 34, 206, 0.6) !important;
}

body.light-mode .diff-widget .tagger-speed-pill {
    background: #FAF5FF !important;
    border-color: rgba(126, 34, 206, 0.3) !important;
    color: #7E22CE !important;
}

body.light-mode .diff-widget .tagger-speed-pill svg {
    color: #7E22CE !important;
}

body.light-mode .diff-widget .diff-chip {
    background: #FFFFFF !important;
    color: #475569 !important;
    border-color: #E2E8F0 !important;
}

body.light-mode .diff-widget .diff-chip.chip-highlight {
    background: #FAF5FF !important;
    border-color: rgba(126, 34, 206, 0.4) !important;
    color: #7E22CE !important;
    box-shadow: 0 2px 8px rgba(126, 34, 206, 0.15) !important;
}

body.light-mode .diff-widget .laser-scanner-beam {
    background: linear-gradient(90deg, transparent, rgba(126, 34, 206, 0.25), rgba(126, 34, 206, 0.5), transparent) !important;
}

body.light-mode .diff-widget .speed-system-name {
    color: #64748B !important;
}

body.light-mode .diff-widget .speed-system-name.highlight-gold {
    color: #0F172A !important;
    font-weight: 750 !important;
}

body.light-mode .diff-widget .speed-time-badge.badge-dim {
    background: #EDF2F7 !important;
    border-color: #E2E8F0 !important;
    color: #64748B !important;
}

body.light-mode .diff-widget .speed-time-badge.badge-turbo {
    background: #FFF7ED !important;
    border-color: rgba(234, 88, 12, 0.35) !important;
    color: #C2410C !important;
    box-shadow: 0 0 10px rgba(234, 88, 12, 0.15) !important;
}

body.light-mode .diff-widget .speed-bar-track {
    background: #E2E8F0 !important;
}

body.light-mode .diff-widget .speed-bar-fill.fill-slow {
    background: #94A3B8 !important;
}

body.light-mode .call-audit-metrics-strip-section {
    background: #F6F8FB;
}

body.light-mode .stat-tile-card {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.25);
}

body.light-mode .stat-tile-num {
    color: #0F766E;
}

body.light-mode .stat-tile-text {
    color: #0B1426;
}

body.light-mode .explore-eyebrow {
    color: #0F766E;
}

body.light-mode .explore-service-card {
    background: #FFFFFF;
    border-color: #E4E9F2;
    box-shadow: 0 6px 20px rgba(11, 20, 38, 0.04);
}

body.light-mode .explore-service-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.12);
}

body.light-mode .explore-icon-box {
    background: #E6F7F3;
    color: #0F766E;
}

body.light-mode .explore-title {
    color: #0B1426;
}

body.light-mode .explore-desc {
    color: #52607A;
}

body.light-mode .explore-arrow {
    color: #0F766E;
}

body.light-mode .audit-cta-section {
    background: #FFFFFF;
    border-color: #E4E9F2;
}

body.light-mode .cta-heading {
    color: #0B1426;
}

body.light-mode .cta-sub {
    color: #52607A;
}

body.light-mode .audit-hero-live-strip .live-pill {
    background: #FFFFFF;
    border-color: #E4E9F2;
    color: #52607A;
    box-shadow: 0 2px 8px rgba(11, 20, 38, 0.04);
}

body.light-mode .live-pulse-dot {
    background: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.5);
}

body.light-mode .floating-badge {
    background: rgba(255, 255, 255, 0.94);
    border-color: #E4E9F2;
    box-shadow: 0 15px 35px rgba(11, 20, 38, 0.12);
}

body.light-mode .floating-badge .badge-label {
    color: #52607A;
}

body.light-mode .floating-badge .badge-val {
    color: #0F766E;
}

body.light-mode .diff-icon-box.icon-teal {
    background: #DDF6F1;
    color: #0F766E;
    border-color: rgba(15, 118, 110, 0.3);
    box-shadow: none;
}

body.light-mode .diff-icon-box.icon-blue {
    background: #E0F2FE;
    color: #0284C7;
    border-color: rgba(2, 132, 199, 0.3);
    box-shadow: none;
}

body.light-mode .diff-icon-box.icon-purple {
    background: #F3E8FF;
    color: #7E22CE;
    border-color: rgba(126, 34, 206, 0.3);
    box-shadow: none;
}

body.light-mode .diff-icon-box.icon-amber {
    background: #FEF3C7;
    color: #B45309;
    border-color: rgba(180, 83, 9, 0.3);
    box-shadow: none;
}

body.light-mode .highlight-hours {
    background: linear-gradient(90deg, #0B1426 0%, #0F766E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .audit-hero-heading .text-gradient,
body.light-mode .team-heading .text-gradient,
body.light-mode .why-heading .text-gradient,
body.light-mode .cta-heading .text-gradient {
    background: linear-gradient(90deg, #0B1426 0%, #0F766E 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .audit-cta-ambient-glow {
    background: radial-gradient(circle, rgba(15, 118, 110, 0.08) 0%, rgba(221, 246, 241, 0.35) 50%, transparent 75%);
}

/* ==========================================================================
   VOICE BOT DEDICATED PAGE STYLES (MATCHING USER SCREENSHOTS)
   ========================================================================== */

/* 1. Hero Section (Image 2) */
.vb-hero-section {
    padding: 130px 24px 80px;
    background: #0B1426;
    position: relative;
    overflow: hidden;
}

/* Ambient Glowing Sound Orbs */
.vb-ambient-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    z-index: 1;
    opacity: 0.45;
}

.vb-ambient-orb.orb-left {
    top: 20%;
    left: -100px;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.18) 0%, transparent 70%);
    animation: orbDrift1 12s ease-in-out infinite alternate;
}

.vb-ambient-orb.orb-right {
    bottom: 10%;
    right: -80px;
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.14) 0%, transparent 70%);
    animation: orbDrift2 14s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
    0% { transform: translateY(0px) translateX(0px); }
    100% { transform: translateY(-40px) translateX(30px); }
}

@keyframes orbDrift2 {
    0% { transform: translateY(0px) translateX(0px); }
    100% { transform: translateY(35px) translateX(-25px); }
}

.vb-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1.15fr;
    gap: 60px;
    align-items: center;
}

.vb-hero-copy {
    position: relative;
    z-index: 2;
}

.vb-hero-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 56px;
    font-weight: 800;
    line-height: 1.12;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin: 20px 0 22px;
}

.vb-hero-title .editorial-accent {
    display: inline-block;
    color: #5EEAD4;
}

.vb-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: #A9B8CE;
    margin-bottom: 34px;
    max-width: 480px;
}

.vb-hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.vb-btn-demo {
    padding: 14px 28px;
    border-radius: 100px;
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 8px 24px rgba(94, 234, 212, 0.28);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.vb-btn-demo:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(94, 234, 212, 0.45);
    background: #79F1DE;
}

.vb-btn-secondary {
    padding: 13px 26px;
    border-radius: 100px;
    background: rgba(228, 233, 242, 0.05);
    border: 1px solid rgba(228, 233, 242, 0.16);
    color: #FFFFFF;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.vb-btn-secondary:hover {
    background: rgba(228, 233, 242, 0.12);
    border-color: #5EEAD4;
    color: #5EEAD4;
    transform: translateY(-2px);
}

/* Mac Window Hero Card */
.vb-hero-card-col {
    position: relative;
    z-index: 2;
}

/* Ambient Soundwave Radar Auras */
.vb-soundwave-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(94, 234, 212, 0.22);
    pointer-events: none;
    z-index: 1;
}

.vb-soundwave-aura.aura-1 {
    width: 440px;
    height: 440px;
    animation: sonarRingPulse 6s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.vb-soundwave-aura.aura-2 {
    width: 580px;
    height: 580px;
    animation: sonarRingPulse 6s cubic-bezier(0.16, 1, 0.3, 1) infinite 3s;
}

@keyframes sonarRingPulse {
    0% {
        transform: translate(-50%, -50%) scale(0.75);
        opacity: 0.55;
    }
    50% {
        opacity: 0.25;
    }
    100% {
        transform: translate(-50%, -50%) scale(1.35);
        opacity: 0;
    }
}

.vb-hero-window-card {
    position: relative;
    z-index: 3;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.08);
    overflow: hidden;
    animation: floatHeroCard 6s ease-in-out infinite;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

@keyframes floatHeroCard {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-8px);
    }
}

.vb-hero-window-card:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 50px rgba(94, 234, 212, 0.2);
    border-color: rgba(94, 234, 212, 0.3);
}

.vb-window-topbar {
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(11, 20, 38, 0.5);
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.vb-window-controls {
    display: flex;
    gap: 7px;
}

.control-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
}
.control-dot.close { background: #EF4444; }
.control-dot.min { background: #F59E0B; }
.control-dot.max { background: #10B981; }

.vb-window-title {
    font-size: 13px;
    font-weight: 600;
    color: #A9B8CE;
    letter-spacing: -0.01em;
}

.vb-window-spacer {
    width: 48px;
}

.vb-window-body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
}

.vb-live-call-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.vb-live-call-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.vb-live-call-label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #FFFFFF;
}

.vb-call-timer {
    font-family: monospace;
    font-size: 11.5px;
    font-weight: 600;
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.1);
    padding: 2px 7px;
    border-radius: 6px;
    border: 1px solid rgba(94, 234, 212, 0.2);
    letter-spacing: 0.05em;
}

.vb-live-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 11px;
    border-radius: 100px;
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34D399;
    font-size: 11.5px;
    font-weight: 700;
}

.vb-live-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 8px #34D399;
    animation: livePulseTeal 1.6s ease-in-out infinite;
}

/* Animated Equalizer Waveform */
.vb-waveform-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 56px;
    margin: 16px 0 24px;
    padding: 0 10px;
}

.vb-wave-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-bar {
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(180deg, #5EEAD4 0%, #2DD4BF 100%);
    height: var(--h, 24px);
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.35);
    animation: waveEqualizerDance 1.8s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 1) * 0.09s);
    transform-origin: center;
}

@keyframes waveEqualizerDance {
    0% {
        transform: scaleY(0.4);
        opacity: 0.65;
        filter: brightness(0.9);
    }
    50% {
        transform: scaleY(1.18);
        opacity: 1;
        filter: brightness(1.2);
        box-shadow: 0 0 16px rgba(94, 234, 212, 0.65);
    }
    100% {
        transform: scaleY(0.7);
        opacity: 0.85;
    }
}

.wb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.35);
    animation: dotPulseDance 1.4s ease-in-out infinite alternate;
    animation-delay: calc(var(--i, 1) * 0.12s);
}

@keyframes dotPulseDance {
    0% {
        transform: scale(0.75);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.35);
        opacity: 1;
        box-shadow: 0 0 12px rgba(94, 234, 212, 0.8);
    }
}

.vb-hero-window-card:hover .wb-bar {
    animation-duration: 0.9s;
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.7);
}

.vb-hero-window-card:hover .wb-dot {
    animation-duration: 0.7s;
}

/* Chat Dialogue */
.vb-chat-dialogue {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 26px;
    min-height: 140px;
}

.vb-chat-bubble {
    font-size: 14px;
    line-height: 1.5;
    transition: all 0.3s ease;
}

.bubble-speaker {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5EEAD4;
    margin-bottom: 3px;
    opacity: 0.85;
}

.vb-chat-bubble.bot-bubble {
    align-self: flex-start;
    max-width: 84%;
    padding: 12px 18px;
    border-radius: 14px;
    background: rgba(228, 233, 242, 0.06);
    border: 1px solid rgba(228, 233, 242, 0.08);
    color: #FFFFFF;
}

.vb-chat-bubble.bot-bubble.active-speak {
    border-color: rgba(94, 234, 212, 0.3);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.1);
}

.vb-chat-bubble.user-bubble {
    align-self: flex-end;
    padding: 10px 18px;
    border-radius: 20px;
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 700;
    box-shadow: 0 6px 18px rgba(94, 234, 212, 0.28);
}

/* Bottom 3 Action Chips */
.vb-action-chips-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.vb-action-chip {
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(228, 233, 242, 0.04);
    border: 1px solid rgba(228, 233, 242, 0.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: center;
    transition: all 0.3s ease;
}

.chip-check {
    display: inline-block;
    color: #5EEAD4;
    font-weight: 900;
    margin-right: 2px;
}

.vb-action-chip.chip-animated {
    animation: chipBreath 3s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes chipBreath {
    0%, 100% {
        border-color: rgba(228, 233, 242, 0.08);
        box-shadow: none;
    }
    50% {
        border-color: rgba(94, 234, 212, 0.35);
        box-shadow: 0 4px 18px rgba(94, 234, 212, 0.12);
    }
}

.vb-action-chip .chip-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: #7E8DA6;
    text-transform: uppercase;
}

.vb-action-chip .chip-val {
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
}

.vb-action-chip.chip-highlight {
    background: rgba(94, 234, 212, 0.12);
    border-color: rgba(94, 234, 212, 0.35);
}

.vb-action-chip.chip-highlight .chip-val {
    color: #5EEAD4;
}

.vb-action-chip.chip-highlight.chip-animated {
    animation: chipHighlightPulse 3s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes chipHighlightPulse {
    0%, 100% {
        border-color: rgba(94, 234, 212, 0.35);
        box-shadow: 0 0 15px rgba(94, 234, 212, 0.15);
    }
    50% {
        border-color: rgba(94, 234, 212, 0.65);
        box-shadow: 0 0 25px rgba(94, 234, 212, 0.35);
        transform: translateY(-2px);
    }
}

/* 2. Section 2: Why It Matters & Results (Image 3) */
.vb-metrics-comparison-section {
    padding: 40px 24px 80px;
    background: #0B1426;
}

.vb-metrics-container {
    max-width: 1200px;
    margin: 0 auto;
}

.vb-metrics-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

.vb-stat-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 20px;
    padding: 38px 40px;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

.vb-stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(94, 234, 212, 0.12);
}

.vb-card-serif-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 26px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.02em;
    margin-bottom: 26px;
}

.vb-matters-rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.vb-matter-row {
    display: flex;
    align-items: baseline;
    gap: 24px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.vb-matter-row:hover {
    transform: translateX(4px);
    background: rgba(94, 234, 212, 0.05);
}

.vb-stat-num {
    font-size: 28px;
    font-weight: 800;
    color: #5EEAD4;
    min-width: 95px;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #FFFFFF 0%, #5EEAD4 70%, #34D399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vb-matter-row:hover .vb-stat-num {
    transform: scale(1.08);
}

.vb-stat-num.editorial-accent {
    font-size: 32px;
}

.vb-stat-desc {
    font-size: 14.5px;
    color: #FFFFFF;
    font-weight: 500;
}

.vb-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px 20px;
}

.vb-result-item {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    transition: transform 0.25s ease, background 0.25s ease;
}

.vb-result-item:hover {
    transform: translateX(4px);
    background: rgba(94, 234, 212, 0.05);
}

.vb-result-num {
    font-size: 30px;
    font-weight: 800;
    color: #5EEAD4;
    letter-spacing: -0.02em;
    line-height: 1.15;
    background: linear-gradient(135deg, #FFFFFF 0%, #5EEAD4 70%, #34D399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vb-result-item:hover .vb-result-num {
    transform: scale(1.08);
}

.vb-result-num.editorial-accent {
    font-size: 34px;
}

.vb-result-desc {
    font-size: 13.5px;
    line-height: 1.55;
    color: #A9B8CE;
}

/* 3. Section 3: Use Cases & Results (Image 4) */
.vb-usecases-section {
    padding: 80px 24px 90px;
    background: #0B1426;
}

.vb-usecases-container {
    max-width: 1200px;
    margin: 0 auto;
}

.vb-usecases-header {
    margin-bottom: 44px;
}

.vb-eyebrow {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5EEAD4;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.vb-heading {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 44px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.vb-subheading {
    font-size: 15.5px;
    color: #A9B8CE;
    line-height: 1.6;
    max-width: 620px;
    margin: 0;
}

.vb-usecases-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.vb-usecase-card {
    position: relative;
    overflow: hidden;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 20px;
    padding: 30px 24px;
    display: flex;
    flex-direction: column;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease, box-shadow 0.35s ease;
}

/* Border Shimmer Runner */
.vb-usecase-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, transparent, #5EEAD4 50%, transparent);
    transition: left 0.6s ease;
    pointer-events: none;
}

.vb-usecase-card:hover::before {
    left: 100%;
}

.vb-usecase-card:hover {
    transform: translateY(-8px);
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.15);
}

.vb-usecase-icon-box {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(94, 234, 212, 0.1);
    color: #5EEAD4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, box-shadow 0.3s ease;
}

.vb-usecase-card:hover .vb-usecase-icon-box {
    transform: scale(1.15) rotate(4deg);
    background: rgba(94, 234, 212, 0.22);
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.4);
}

.vb-usecase-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.3;
    letter-spacing: -0.015em;
    margin-bottom: 16px;
}

.vb-usecase-bullets {
    list-style: disc inside;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vb-usecase-bullets li {
    font-size: 13.5px;
    line-height: 1.5;
    color: #A9B8CE;
    transition: transform 0.2s ease, color 0.2s ease;
}

.vb-usecase-card:hover .vb-usecase-bullets li {
    color: #E2E8F0;
}

.vb-usecase-card:hover .vb-usecase-bullets li:hover {
    transform: translateX(4px);
    color: #5EEAD4;
}

.vb-usecase-pill {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 100px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 11.5px;
    font-weight: 700;
    width: fit-content;
    transition: all 0.25s ease;
}

.vb-usecase-card:hover .vb-usecase-pill {
    background: rgba(94, 234, 212, 0.18);
    border-color: #5EEAD4;
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(94, 234, 212, 0.25);
}

/* 4. Section 4: How It Works (Image 5) */
.vb-how-it-works-section {
    padding: 90px 24px 100px;
    background: #0B1426;
}

.vb-how-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
}

.vb-how-left .vb-heading {
    margin-bottom: 14px;
}

.vb-features-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
    margin-top: 36px;
}

.vb-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.25s ease;
}

.vb-feature-item:hover {
    transform: translateX(6px);
}

.vb-check-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.3);
    color: #5EEAD4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.vb-feature-item:hover .vb-check-circle {
    transform: scale(1.18) rotate(8deg);
    background: rgba(94, 234, 212, 0.25);
    border-color: #5EEAD4;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.45);
}

.vb-feature-content {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.vb-feature-content strong {
    font-size: 15.5px;
    font-weight: 700;
    color: #FFFFFF;
}

.vb-feature-content span {
    font-size: 14px;
    color: #A9B8CE;
    line-height: 1.5;
}

/* Right Timeline Card */
.vb-timeline-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 24px;
    padding: 40px 36px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vb-timeline-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6), 0 0 35px rgba(94, 234, 212, 0.1);
}

.vb-timeline-header {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #A9B8CE;
    text-transform: uppercase;
    margin-bottom: 32px;
}

.vb-timeline-flow {
    position: relative;
    padding-left: 48px;
}

.vb-timeline-flow::before {
    content: '';
    position: absolute;
    left: 17px;
    top: 14px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(180deg, #5EEAD4, rgba(94, 234, 212, 0.2));
}

/* Traveling Electric Energy Pulse */
.vb-timeline-flow::after {
    content: '';
    position: absolute;
    left: 16px;
    top: 14px;
    width: 4px;
    height: 60px;
    border-radius: 4px;
    background: linear-gradient(180deg, transparent, #5EEAD4 40%, #FFFFFF 50%, #5EEAD4 60%, transparent);
    box-shadow: 0 0 14px #5EEAD4, 0 0 24px rgba(94, 234, 212, 0.8);
    animation: timelineBeamSweep 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}

@keyframes timelineBeamSweep {
    0% {
        top: 10px;
        opacity: 0;
    }
    15% {
        opacity: 1;
    }
    85% {
        opacity: 1;
    }
    100% {
        top: calc(100% - 70px);
        opacity: 0;
    }
}

.vb-timeline-step {
    position: relative;
    margin-bottom: 30px;
    transition: transform 0.25s ease;
}

.vb-timeline-step:hover {
    transform: translateX(6px);
}

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

.vb-timeline-node {
    position: absolute;
    left: -48px;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.45);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}

.vb-timeline-step:hover .vb-timeline-node {
    transform: scale(1.18);
    box-shadow: 0 0 25px rgba(94, 234, 212, 0.85);
}

.vb-timeline-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vb-timeline-body strong {
    font-size: 16px;
    font-weight: 750;
    color: #FFFFFF;
}

.vb-timeline-body span {
    font-size: 13.5px;
    line-height: 1.5;
    color: #A9B8CE;
}

/* =========================================================
   LIGHT MODE STYLING FOR VOICE BOT PAGE
   ========================================================= */
body.light-mode .vb-hero-section,
body.light-mode .vb-usecases-section,
body.light-mode .vb-how-it-works-section {
    background: #FFFFFF;
}

body.light-mode .vb-metrics-comparison-section,
html.light-mode .vb-metrics-comparison-section,
.light-mode .vb-metrics-comparison-section {
    background: #F8FAFC;
    border-top: 1px solid #EDF2F7;
    border-bottom: 1px solid #EDF2F7;
}

body.light-mode .vb-hero-title,
body.light-mode .vb-card-serif-title,
body.light-mode .vb-heading,
body.light-mode .vb-usecase-title,
body.light-mode .vb-feature-content strong,
body.light-mode .vb-timeline-body strong {
    color: #0B1426;
}

body.light-mode .vb-hero-sub,
body.light-mode .vb-subheading,
body.light-mode .vb-usecase-bullets li,
body.light-mode .vb-feature-content span,
body.light-mode .vb-timeline-body span,
body.light-mode .vb-result-desc {
    color: #52607A;
}

body.light-mode .vb-eyebrow {
    color: #0F766E;
}

body.light-mode .vb-btn-secondary {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #0B1426;
}

body.light-mode .vb-btn-secondary:hover {
    background: #E6F7F3;
    border-color: #0F766E;
    color: #0F766E;
}

body.light-mode .vb-hero-window-card,
body.light-mode .vb-stat-card,
body.light-mode .vb-usecase-card,
body.light-mode .vb-timeline-card {
    background: #FFFFFF;
    border-color: #E4E9F2;
    box-shadow: 0 10px 30px rgba(11, 20, 38, 0.05);
}

body.light-mode .vb-hero-window-card:hover,
body.light-mode .vb-stat-card:hover,
body.light-mode .vb-usecase-card:hover,
body.light-mode .vb-timeline-card:hover {
    border-color: #0F766E;
    box-shadow: 0 18px 45px rgba(15, 118, 110, 0.12);
}

body.light-mode .vb-window-topbar {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

body.light-mode .vb-window-title {
    color: #64748B;
}

body.light-mode .vb-live-call-label {
    color: #0B1426;
}

body.light-mode .wb-bar,
body.light-mode .wb-dot {
    background: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.3);
}

body.light-mode .vb-chat-bubble.bot-bubble {
    background: #F1F5F9;
    border-color: #E2E8F0;
    color: #0B1426;
}

body.light-mode .vb-chat-bubble.user-bubble {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25);
}

body.light-mode .vb-action-chip {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

body.light-mode .vb-action-chip .chip-label {
    color: #64748B;
}

body.light-mode .vb-action-chip .chip-val {
    color: #0B1426;
}

body.light-mode .vb-action-chip.chip-highlight {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.35);
}

body.light-mode .vb-action-chip.chip-highlight .chip-val {
    color: #0F766E;
}

body.light-mode .vb-stat-card,
html.light-mode .vb-stat-card,
.light-mode .vb-stat-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

body.light-mode .vb-card-serif-title,
html.light-mode .vb-card-serif-title,
.light-mode .vb-card-serif-title {
    color: #0B1426;
    font-weight: 800;
}

body.light-mode .vb-stat-num,
html.light-mode .vb-stat-num,
.light-mode .vb-stat-num,
body.light-mode .vb-result-num,
html.light-mode .vb-result-num,
.light-mode .vb-result-num {
    background: linear-gradient(135deg, #093B37 0%, #0F766E 55%, #0D9488 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0F766E;
    font-weight: 800;
}

body.light-mode .vb-stat-num.editorial-accent,
html.light-mode .vb-stat-num.editorial-accent,
.light-mode .vb-stat-num.editorial-accent,
body.light-mode .vb-result-num.editorial-accent,
html.light-mode .vb-result-num.editorial-accent,
.light-mode .vb-result-num.editorial-accent {
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 50%, #14B8A6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #0F766E;
    font-weight: 800;
}

body.light-mode .vb-stat-desc,
html.light-mode .vb-stat-desc,
.light-mode .vb-stat-desc {
    color: #1E293B;
    font-weight: 600;
}

body.light-mode .vb-result-desc,
html.light-mode .vb-result-desc,
.light-mode .vb-result-desc {
    color: #475569;
    font-weight: 500;
}

body.light-mode .vb-matter-row:hover,
html.light-mode .vb-matter-row:hover,
.light-mode .vb-matter-row:hover,
body.light-mode .vb-result-item:hover,
html.light-mode .vb-result-item:hover,
.light-mode .vb-result-item:hover {
    background: rgba(15, 118, 110, 0.06);
}

body.light-mode .vb-usecase-icon-box {
    background: #E6F7F3;
    color: #0F766E;
}

body.light-mode .vb-usecase-card:hover .vb-usecase-icon-box {
    background: #DDF6F1;
}

body.light-mode .vb-usecase-pill {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.3);
    color: #0F766E;
}

body.light-mode .vb-usecase-card:hover .vb-usecase-pill {
    background: #0F766E;
    color: #FFFFFF;
}

body.light-mode .vb-check-circle {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.3);
    color: #0F766E;
}

body.light-mode .vb-timeline-header {
    color: #64748B;
}

body.light-mode .vb-timeline-flow::before {
    background: linear-gradient(180deg, #0F766E, rgba(15, 118, 110, 0.2));
}

body.light-mode .vb-timeline-node {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 0 14px rgba(15, 118, 110, 0.35);
}

/* Responsive Breakpoints for Voice Bot */
@media (max-width: 1024px) {
    .vb-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .vb-hero-title {
        font-size: 46px;
    }

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

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

    .vb-how-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 640px) {
    .vb-hero-title {
        font-size: 36px;
    }

    .vb-heading {
        font-size: 32px;
    }

    .vb-usecases-grid {
        grid-template-columns: 1fr;
    }

    .vb-results-grid {
        grid-template-columns: 1fr;
    }

    .vb-action-chips-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   TRUST & OBSERVABILITY DEDICATED PAGE STYLES (MATCHING USER SCREENSHOTS)
   ========================================================================== */

/* 1. Hero Section */
.to-hero-section {
    padding: 130px 24px 85px;
    background: #0B1426;
    background-image: radial-gradient(rgba(94, 234, 212, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
}

.to-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.08fr;
    gap: 50px;
    align-items: center;
}

.to-hero-copy {
    position: relative;
    z-index: 2;
}

.to-hero-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 54px;
    font-weight: 800;
    line-height: 1.12;
    color: #FFFFFF;
    letter-spacing: -0.03em;
    margin: 20px 0 22px;
}

.to-hero-title .editorial-accent {
    display: inline-block;
    color: #5EEAD4;
    font-style: italic;
}

.to-hero-sub {
    font-size: 17px;
    line-height: 1.6;
    color: #A9B8CE;
    margin-bottom: 34px;
    max-width: 480px;
}

.to-hero-cta-group {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

/* Hero Mac Window Card */
.to-hero-card-col {
    position: relative;
    z-index: 2;
}

.to-window-card {
    position: relative;
    z-index: 3;
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.08);
    overflow: hidden;
    animation: floatHeroCard 6s ease-in-out infinite;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.to-window-card:hover {
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 50px rgba(94, 234, 212, 0.2);
    border-color: rgba(94, 234, 212, 0.3);
}

.to-window-topbar {
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(11, 20, 38, 0.55);
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.to-window-title {
    font-size: 13.5px;
    font-weight: 600;
    color: #94A3B8;
    letter-spacing: 0.01em;
    display: flex;
    align-items: center;
}

.to-telemetry-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: #34D399;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    padding: 3px 10px;
    border-radius: 20px;
}

.to-telemetry-pulse {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 8px #10B981;
    position: relative;
}

.to-telemetry-pulse::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid #10B981;
    animation: livePingDot 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes livePingDot {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.4); opacity: 0; }
}

.to-window-body {
    padding: 24px 26px 28px;
    display: flex;
    flex-direction: column;
}

/* 6 Sparklines Grid */
.to-sparklines-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.to-sparkline-card {
    background: rgba(228, 233, 242, 0.04);
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}

.to-sparkline-card:hover {
    transform: translateY(-3px);
    border-color: rgba(94, 234, 212, 0.4);
    background: rgba(94, 234, 212, 0.07);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35), 0 0 18px rgba(94, 234, 212, 0.12);
}

.to-sparkline-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.to-sparkline-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: -0.01em;
}

.to-sparkline-val {
    font-size: 11.5px;
    font-weight: 700;
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.12);
    padding: 1px 7px;
    border-radius: 6px;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    transition: all 0.3s ease;
}

.to-sparkline-val.val-pulse {
    animation: valPulseAnim 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes valPulseAnim {
    0% { transform: scale(1.18); color: #FFFFFF; background: rgba(94, 234, 212, 0.4); }
    100% { transform: scale(1); }
}

.to-sparkline-svg {
    width: 100%;
    height: 38px;
    display: block;
    overflow: visible;
}

.to-sparkline-path {
    fill: none;
    stroke: #5EEAD4;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 4px rgba(94, 234, 212, 0.45));
    transition: d 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sparkline-beacon-dot {
    fill: #5EEAD4;
    filter: drop-shadow(0 0 5px #5EEAD4);
    animation: beaconPulse 2s ease-in-out infinite;
    transition: cx 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), cy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sparkline-beacon-ring {
    fill: none;
    stroke: #5EEAD4;
    stroke-width: 1.5;
    animation: beaconRingExpand 2.2s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    transform-origin: center;
    transition: cx 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), cy 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes beaconPulse {
    0%, 100% { r: 3; opacity: 1; }
    50% { r: 4.2; opacity: 0.85; }
}

@keyframes beaconRingExpand {
    0% { r: 2.5; opacity: 0.9; stroke-width: 1.8; }
    100% { r: 9; opacity: 0; stroke-width: 0.4; }
}

/* Filter Pills */
.to-filter-pills {
    display: flex;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.to-filter-pill {
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(228, 233, 242, 0.06);
    color: #A9B8CE;
    border: 1px solid rgba(228, 233, 242, 0.1);
    cursor: pointer;
    transition: all 0.25s ease;
    position: relative;
    user-select: none;
}

.to-filter-pill:hover {
    color: #FFFFFF;
    border-color: rgba(94, 234, 212, 0.4);
    background: rgba(94, 234, 212, 0.1);
}

.to-filter-pill.active {
    background: rgba(94, 234, 212, 0.18);
    color: #5EEAD4;
    border-color: #5EEAD4;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.35);
    transform: translateY(-1px);
}

.to-window-statement {
    font-size: 14.5px;
    font-weight: 600;
    margin-top: 18px;
    text-align: center;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, #5EEAD4 0%, #A78BFA 45%, #38BDF8 75%, #5EEAD4 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shineText 6s linear infinite;
    font-style: normal;
}

@keyframes shineText {
    0% { background-position: 0% center; }
    100% { background-position: 250% center; }
}

/* 2. Section 2: What We Audit (Unified Dark/Light Theme System) */
.to-what-section {
    padding: 85px 24px 90px;
    background: #0B1426;
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.to-what-container {
    max-width: 1200px;
    margin: 0 auto;
}

.to-what-section .vb-eyebrow {
    color: #5EEAD4;
}

.to-what-section .to-heading {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 44px;
    font-weight: 800;
    color: #FFFFFF;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 12px;
}

.to-what-section .to-heading .editorial-accent {
    color: #5EEAD4;
    font-style: italic;
}

.to-what-section .to-subheading {
    font-size: 15.5px;
    color: #A9B8CE;
    line-height: 1.6;
    max-width: 680px;
    margin: 0;
}

/* ==========================================================================
   OMNICHANNEL ARCHITECTURE & EVALUATION LAYER (Section 2 - What We Audit)
   ========================================================================== */
.to-what-section .to-arch-box {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 36px 0 10px;
    backdrop-filter: none;
    overflow: visible;
}

.to-what-section .arch-channels-title {
    text-align: center;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.to-what-section .live-stream-beacon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 16px;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.35);
    margin-bottom: 12px;
    position: relative;
}

.to-what-section .beacon-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px #10B981;
}

.to-what-section .beacon-pulse {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(16, 185, 129, 0.6);
    animation: beaconPulse 2s infinite ease-out;
}

.to-what-section .beacon-text {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    color: #5EEAD4;
    text-transform: uppercase;
}

.to-what-section .arch-channels-title h3 {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: 0.8px;
    color: #FFFFFF;
    margin: 0 0 8px;
}

.to-what-section .arch-channels-subtitle {
    font-size: 14px;
    color: #94A3B8;
    max-width: 660px;
    margin: 0 auto;
    line-height: 1.5;
}

/* 6 Omnichannel Cards Grid */
.to-what-section .channels-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
    margin-bottom: 14px;
    position: relative;
    z-index: 2;
}

.to-what-section .channel-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 18px;
    padding: 16px 12px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    backdrop-filter: blur(10px);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    overflow: hidden;
}

.to-what-section .channel-card::after {
    display: none;
}

.to-what-section .channel-card:hover {
    transform: translateY(-7px) scale(1.02);
}

.to-what-section .channel-card.ch-purple:hover {
    border-color: #8B5CF6;
    box-shadow: 0 18px 36px rgba(139, 92, 246, 0.12), 0 0 24px rgba(139, 92, 246, 0.2);
}

.to-what-section .channel-card.ch-blue:hover {
    border-color: #0284C7;
    box-shadow: 0 18px 36px rgba(2, 132, 199, 0.12), 0 0 24px rgba(2, 132, 199, 0.2);
}

.to-what-section .channel-card.ch-teal:hover {
    border-color: #0D9488;
    box-shadow: 0 18px 36px rgba(13, 148, 136, 0.12), 0 0 24px rgba(13, 148, 136, 0.2);
}

.to-what-section .channel-card.ch-orange:hover {
    border-color: #EA580C;
    box-shadow: 0 18px 36px rgba(234, 88, 12, 0.12), 0 0 24px rgba(234, 88, 12, 0.2);
}

.to-what-section .channel-card.ch-indigo:hover {
    border-color: #4F46E5;
    box-shadow: 0 18px 36px rgba(79, 70, 229, 0.12), 0 0 24px rgba(79, 70, 229, 0.2);
}

.to-what-section .channel-card.ch-rose:hover {
    border-color: #E11D48;
    box-shadow: 0 18px 36px rgba(225, 29, 72, 0.12), 0 0 24px rgba(225, 29, 72, 0.2);
}

.to-what-section .channel-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 12px;
}

.to-what-section .ch-badge {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 6px;
}

.to-what-section .badge-purple {
    background: rgba(139, 92, 246, 0.12);
    color: #7C3AED;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.to-what-section .badge-blue {
    background: rgba(2, 132, 199, 0.12);
    color: #0284C7;
    border: 1px solid rgba(2, 132, 199, 0.3);
}

.to-what-section .badge-teal {
    background: rgba(13, 148, 136, 0.12);
    color: #0D9488;
    border: 1px solid rgba(13, 148, 136, 0.3);
}

.to-what-section .badge-orange {
    background: rgba(249, 115, 22, 0.12);
    color: #EA580C;
    border: 1px solid rgba(249, 115, 22, 0.32);
}

.to-what-section .badge-indigo {
    background: rgba(79, 70, 229, 0.12);
    color: #4F46E5;
    border: 1px solid rgba(79, 70, 229, 0.3);
}

.to-what-section .badge-rose {
    background: rgba(225, 29, 72, 0.12);
    color: #E11D48;
    border: 1px solid rgba(225, 29, 72, 0.3);
}

.to-what-section .channel-icon-wrap {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.to-what-section .channel-icon-wrap.icon-purple {
    background: #F5F3FF;
    color: #7C3AED;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.1);
}

.to-what-section .channel-icon-wrap.icon-blue {
    background: #F0F9FF;
    color: #0284C7;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.1);
}

.to-what-section .channel-icon-wrap.icon-teal {
    background: #CCFBF1;
    color: #0D9488;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.1);
}

.to-what-section .channel-icon-wrap.icon-orange {
    background: #FFF7ED;
    color: #EA580C;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.1);
}

.to-what-section .channel-icon-wrap.icon-indigo {
    background: #EEF2FF;
    color: #4F46E5;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.1);
}

.to-what-section .channel-icon-wrap.icon-rose {
    background: #FFE4E6;
    color: #E11D48;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.1);
}

.to-what-section .channel-card:hover .channel-icon-wrap {
    transform: scale(1.12) translateY(-2px);
}

.to-what-section .channel-info {
    margin-bottom: 10px;
    flex-grow: 1;
}

.to-what-section .channel-info h4 {
    font-size: 13.5px;
    font-weight: 750;
    color: #FFFFFF;
    margin: 0 0 3px;
    line-height: 1.25;
}

.to-what-section .channel-info p {
    font-size: 11px;
    color: #94A3B8;
    margin: 0;
    line-height: 1.35;
}

.to-what-section .channel-metric-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(228, 233, 242, 0.06);
    border: 1px solid rgba(228, 233, 242, 0.1);
    font-size: 10px;
    font-weight: 600;
    color: #E2E8F0;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.to-what-section .channel-card.ch-purple:hover .chip-purple {
    background: #F5F3FF;
    border-color: rgba(139, 92, 246, 0.4);
    color: #6D28D9;
}

.to-what-section .channel-card.ch-blue:hover .chip-blue {
    background: #F0F9FF;
    border-color: rgba(2, 132, 199, 0.4);
    color: #0369A1;
}

.to-what-section .channel-card.ch-teal:hover .chip-teal {
    background: #CCFBF1;
    border-color: rgba(13, 148, 136, 0.4);
    color: #0F766E;
}

.to-what-section .channel-card.ch-orange:hover .chip-orange {
    background: #FFF7ED;
    border-color: rgba(234, 88, 12, 0.4);
    color: #C2410C;
}

.to-what-section .channel-card.ch-indigo:hover .chip-indigo {
    background: #EEF2FF;
    border-color: rgba(79, 70, 229, 0.4);
    color: #4338CA;
}

.to-what-section .channel-card.ch-rose:hover .chip-rose {
    background: #FFE4E6;
    border-color: rgba(225, 29, 72, 0.4);
    color: #BE123C;
}

/* Distinct Glowing Dots */
.to-what-section .dot-purple { background: #8B5CF6 !important; box-shadow: 0 0 6px #8B5CF6 !important; }
.to-what-section .dot-blue   { background: #0284C7 !important; box-shadow: 0 0 6px #0284C7 !important; }
.to-what-section .dot-teal   { background: #0D9488 !important; box-shadow: 0 0 6px #0D9488 !important; }
.to-what-section .dot-orange { background: #EA580C !important; box-shadow: 0 0 6px #EA580C !important; }
.to-what-section .dot-indigo { background: #4F46E5 !important; box-shadow: 0 0 6px #4F46E5 !important; }
.to-what-section .dot-rose   { background: #E11D48 !important; box-shadow: 0 0 6px #E11D48 !important; }

/* Micro-Indicators by Color */
.to-what-section .bar-purple {
    background: #8B5CF6;
    box-shadow: 0 0 5px rgba(139, 92, 246, 0.5);
}

.to-what-section .ring-blue {
    border-color: #0284C7;
}

.to-what-section .beacon-blue {
    background: #0284C7;
    box-shadow: 0 0 8px #0284C7;
}

.to-what-section .dots-teal {
    background: rgba(13, 148, 136, 0.08);
    border-color: rgba(13, 148, 136, 0.25);
}

.to-what-section .dots-teal span {
    background: #0D9488;
    box-shadow: 0 0 4px #0D9488;
}

.to-what-section .ch-rec-badge {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.28);
    color: #EF4444;
}

.to-what-section .rec-dot {
    background: #EF4444;
    box-shadow: 0 0 6px #EF4444;
}

.to-what-section .spark-indigo {
    color: #4F46E5;
    filter: drop-shadow(0 0 4px rgba(79, 70, 229, 0.6));
}

.to-what-section .beam-rose {
    color: #E11D48;
    filter: drop-shadow(0 0 4px rgba(225, 29, 72, 0.6));
}

/* Confluence Laser Multi-Color Tracks & Beams */
.to-what-section .arch-confluence-flow {
    width: 100%;
    max-width: 960px;
    margin: 4px auto 8px;
    height: 65px;
    position: relative;
}

.to-what-section .track-purple { stroke: rgba(139, 92, 246, 0.22); stroke-width: 1.5; fill: none; }
.to-what-section .track-blue   { stroke: rgba(2, 132, 199, 0.22); stroke-width: 1.5; fill: none; }
.to-what-section .track-teal   { stroke: rgba(13, 148, 136, 0.22); stroke-width: 1.5; fill: none; }
.to-what-section .track-orange { stroke: rgba(234, 88, 12, 0.22); stroke-width: 1.5; fill: none; }
.to-what-section .track-indigo { stroke: rgba(79, 70, 229, 0.22); stroke-width: 1.5; fill: none; }
.to-what-section .track-rose   { stroke: rgba(225, 29, 72, 0.22); stroke-width: 1.5; fill: none; }

.to-what-section .laser-beam {
    fill: none;
    stroke-width: 2.2;
    stroke-dasharray: 8 18;
    animation: laserDataStream 2s linear infinite;
}

.to-what-section .beam-purple { stroke: #8B5CF6; filter: drop-shadow(0 0 4px rgba(139, 92, 246, 0.5)); }
.to-what-section .beam-blue   { stroke: #0284C7; filter: drop-shadow(0 0 4px rgba(2, 132, 199, 0.5)); }
.to-what-section .beam-teal   { stroke: #0D9488; filter: drop-shadow(0 0 4px rgba(13, 148, 136, 0.5)); }
.to-what-section .beam-orange { stroke: #EA580C; filter: drop-shadow(0 0 4px rgba(234, 88, 12, 0.5)); }
.to-what-section .beam-indigo { stroke: #4F46E5; filter: drop-shadow(0 0 4px rgba(79, 70, 229, 0.5)); }
.to-what-section .beam-rose   { stroke: #E11D48; filter: drop-shadow(0 0 4px rgba(225, 29, 72, 0.5)); }

.to-what-section .laser-focal-point {
    fill: #0D9488;
    filter: drop-shadow(0 0 10px rgba(13, 148, 136, 0.7));
}

/* Central Evaluation Layer Showcase */
.to-what-section .evaluation-layer-showcase {
    position: relative;
    width: 100%;
    max-width: 980px;
    margin: 8px auto 20px;
    padding: 0 12px;
    text-align: center;
    z-index: 2;
}

.to-what-section .eval-brand-tag {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #5EEAD4;
    margin: 0;
    line-height: 1.1;
    text-transform: uppercase;
}

.to-what-section .eval-layer-title {
    font-size: 26px;
    font-weight: 900;
    letter-spacing: 0.05em;
    margin: 4px 0 0;
    line-height: 1.15;
    text-transform: none;
    background: linear-gradient(135deg, #FFFFFF 0%, #5EEAD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 0 15px rgba(94, 234, 212, 0.3));
}

.to-what-section .eval-title-glow-line {
    width: 90px;
    height: 1.5px;
    background: linear-gradient(90deg, transparent, #5EEAD4, transparent);
    margin: 5px auto 0;
    opacity: 0.75;
}

.to-what-section .eval-layer-subtitle {
    font-size: 13.5px;
    font-weight: 500;
    color: #A9B8CE;
    margin: 6px 0 0;
}

/* 5-Column Feature Card */
.to-what-section .eval-feature-card,
.to-what-section .eval-white-card {
    background: #0F1B33;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-radius: 18px;
    padding: 20px 14px 22px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 35px rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(228, 233, 242, 0.1);
    position: relative;
    z-index: 1;
    margin-top: 18px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.to-what-section .eval-feature-card:hover,
.to-what-section .eval-white-card:hover {
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7), 0 0 45px rgba(94, 234, 212, 0.15);
}

.to-what-section .eval-feature-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 2px 14px;
    position: relative;
    transition: transform 0.25s ease;
}

.to-what-section .eval-feature-col:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 1px;
    background: rgba(228, 233, 242, 0.08);
}

/* 5 Columns - Distinct Icons & Hover States */
.to-what-section .eval-icon-box {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    transition: transform 0.25s ease, background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.to-what-section .eval-icon-box svg {
    width: 16px;
    height: 16px;
}

/* Col 1: Teal */
.to-what-section .box-teal {
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.3);
    color: #5EEAD4;
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.2);
}
.to-what-section .col-teal:hover .box-teal {
    transform: translateY(-2px);
    background: rgba(13, 148, 136, 0.25);
    border-color: #5EEAD4;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.35);
}

/* Col 2: Emerald Green */
.to-what-section .box-green {
    background: rgba(16, 185, 129, 0.15);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #34D399;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.2);
}
.to-what-section .col-green:hover .box-green {
    transform: translateY(-2px);
    background: rgba(16, 185, 129, 0.25);
    border-color: #34D399;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(52, 211, 153, 0.35);
}

/* Col 3: Indigo */
.to-what-section .box-indigo {
    background: rgba(99, 102, 241, 0.15);
    border: 1px solid rgba(99, 102, 241, 0.3);
    color: #818CF8;
    box-shadow: 0 0 12px rgba(99, 102, 241, 0.2);
}
.to-what-section .col-indigo:hover .box-indigo {
    transform: translateY(-2px);
    background: rgba(99, 102, 241, 0.25);
    border-color: #818CF8;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(129, 140, 248, 0.35);
}

/* Col 4: Purple */
.to-what-section .box-purple {
    background: rgba(168, 85, 247, 0.15);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #C084FC;
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.2);
}
.to-what-section .col-purple:hover .box-purple {
    transform: translateY(-2px);
    background: rgba(168, 85, 247, 0.25);
    border-color: #C084FC;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(192, 132, 252, 0.35);
}

/* Col 5: Rose */
.to-what-section .box-rose {
    background: rgba(244, 63, 94, 0.15);
    border: 1px solid rgba(244, 63, 94, 0.3);
    color: #FB7185;
    box-shadow: 0 0 12px rgba(244, 63, 94, 0.2);
}
.to-what-section .col-rose:hover .box-rose {
    transform: translateY(-2px);
    background: rgba(244, 63, 94, 0.25);
    border-color: #FB7185;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(251, 113, 133, 0.35);
}

.to-what-section .eval-col-title {
    font-size: 13px;
    font-weight: 750;
    color: #FFFFFF;
    line-height: 1.25;
    margin: 0 0 4px;
    letter-spacing: -0.01em;
}

.to-what-section .eval-col-desc {
    font-size: 11px;
    line-height: 1.4;
    color: #94A3B8;
    margin: 0;
    font-weight: 400;
}

/* Platform callout banner */
.to-what-section .platform-banner-callout {
    background: rgba(15, 27, 51, 0.75);
    border: 1px solid rgba(94, 234, 212, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    border-radius: 12px;
    padding: 14px 24px;
    text-align: center;
    max-width: 820px;
    margin: 20px auto 36px;
}

.to-what-section .platform-banner-callout p {
    margin: 0;
    font-size: 13.5px;
    color: #E2E8F0;
}

.to-what-section .platform-banner-callout strong {
    color: #5EEAD4;
}

/* Multi-Color Ambient Sparkle Dots */
.to-what-section .eval-ambient-dot {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    pointer-events: none;
    animation: evalPulseSparkle 3s ease-in-out infinite alternate;
}
.to-what-section .dot-purple-amb { background: #8B5CF6; box-shadow: 0 0 8px #8B5CF6; top: 12%; left: 8%; }
.to-what-section .dot-blue-amb   { background: #0284C7; box-shadow: 0 0 8px #0284C7; top: 22%; right: 10%; }
.to-what-section .dot-teal-amb   { background: #0D9488; box-shadow: 0 0 8px #0D9488; top: 50%; left: 14%; }
.to-what-section .dot-orange-amb { background: #EA580C; box-shadow: 0 0 8px #EA580C; bottom: 18%; right: 16%; }
.to-what-section .dot-rose-amb   { background: #E11D48; box-shadow: 0 0 8px #E11D48; top: 8%; right: 28%; }

/* Responsive adjustments for Omnichannel Architecture in Trust & Observability */
@media (max-width: 1024px) {
    .to-what-section .channels-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
    .to-what-section .arch-confluence-flow {
        display: none;
    }
    .to-what-section .eval-feature-card,
    .to-what-section .eval-white-card {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 0;
    }
    .to-what-section .eval-feature-col:not(:last-child)::after {
        display: none;
    }
    .to-what-section .eval-feature-col {
        border-bottom: 1px solid #E2E8F0;
        padding-bottom: 12px;
    }
}

@media (max-width: 640px) {
    .to-what-section {
        padding: 50px 16px 60px;
    }
    .to-what-section .to-heading {
        font-size: 28px;
        line-height: 1.2;
        word-break: break-word;
    }
    .to-what-section .arch-channels-title h3 {
        font-size: 16px;
        letter-spacing: 0.5px;
    }
    .to-what-section .channels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .to-what-section .channel-card {
        padding: 14px 8px 12px;
    }
    .to-what-section .eval-feature-card,
    .to-what-section .eval-white-card {
        grid-template-columns: 1fr;
        padding: 16px 14px;
    }
    .to-what-section .eval-layer-title {
        font-size: 20px;
    }
}

/* 4 Key Benefit Badges (Screenshot 1 - Crisp White Badges) */
.to-benefits-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.to-benefit-card {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.to-benefit-card:hover {
    transform: translateY(-3px);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.55), 0 0 20px rgba(94, 234, 212, 0.15);
}

.to-benefit-strong {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    display: block;
}

.to-benefit-span {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1.45;
}

/* 3. Section 3: Reporting and Metrics (Screenshots 4 & 2 - Deep Navy Editorial) */
.to-reporting-section {
    padding: 90px 24px 100px;
    background: #0B1426;
}

.to-reporting-container {
    max-width: 1200px;
    margin: 0 auto;
}

.to-tabs-group {
    display: flex;
    gap: 12px;
    margin: 28px 0 44px;
}

.to-tab-btn {
    padding: 10px 24px;
    border-radius: 100px;
    font-size: 14px;
    font-weight: 700;
    border: 1px solid rgba(228, 233, 242, 0.15);
    background: rgba(228, 233, 242, 0.05);
    color: #A9B8CE;
    cursor: pointer;
    transition: all 0.25s ease;
}

.to-tab-btn:hover {
    color: #FFFFFF;
    border-color: rgba(94, 234, 212, 0.3);
}

.to-tab-btn.active {
    background: #5EEAD4;
    color: #0B1426;
    border-color: #5EEAD4;
    box-shadow: 0 4px 18px rgba(94, 234, 212, 0.35);
}

.to-reporting-grid {
    display: grid;
    grid-template-columns: 1.05fr 1.15fr;
    gap: 60px;
    align-items: start;
}

.to-report-subtitle {
    font-size: 28px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-bottom: 12px;
}

.to-report-subdesc {
    font-size: 15px;
    line-height: 1.6;
    color: #A9B8CE;
    margin-bottom: 34px;
}

.to-steps-eyebrow {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #5EEAD4;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.to-steps-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.to-step-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: transform 0.25s ease;
}

.to-step-item:hover {
    transform: translateX(6px);
}

.to-step-badge {
    font-size: 12px;
    font-weight: 800;
    padding: 4px 8px;
    border-radius: 6px;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.25);
    margin-top: 2px;
    flex-shrink: 0;
}

.to-step-info strong {
    font-size: 15.5px;
    font-weight: 700;
    color: #FFFFFF;
    display: block;
    margin-bottom: 3px;
}

.to-step-info span {
    font-size: 14px;
    color: #A9B8CE;
    line-height: 1.5;
}

/* Console Right Column */
.to-report-console {
    background: #0F1B33;
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 20px;
    padding: 28px 30px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
    transition: all 0.3s ease;
}

.to-report-console-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 22px;
}

.to-console-tag {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #A9B8CE;
    text-transform: uppercase;
}

.to-console-pill {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 11px;
    border-radius: 100px;
    background: rgba(228, 233, 242, 0.08);
    color: #A9B8CE;
}

.to-mini-charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 26px;
}

.to-mini-chart {
    background: rgba(228, 233, 242, 0.04);
    border: 1px solid rgba(228, 233, 242, 0.08);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.to-mini-chart-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #FFFFFF;
}

.to-issues-header {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #7E8DA6;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.to-issues-bars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.to-issue-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.to-issue-label {
    font-size: 13px;
    color: #FFFFFF;
    font-weight: 500;
    min-width: 140px;
}

.to-issue-track {
    flex: 1;
    height: 8px;
    background: rgba(228, 233, 242, 0.1);
    border-radius: 99px;
    overflow: hidden;
}

.to-issue-fill {
    height: 100%;
    background: linear-gradient(90deg, #5EEAD4, #2DD4BF);
    border-radius: 99px;
    transition: width 1s ease-out;
}

/* Checklist Box under Console */
.to-checklist-box {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.to-check-row {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 14px;
    color: #FFFFFF;
    font-weight: 500;
    background: #0E1B31;
    border: 1px solid rgba(228, 233, 242, 0.08);
    padding: 13px 18px;
    border-radius: 12px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.to-check-row:hover {
    transform: translateX(4px);
    border-color: rgba(94, 234, 212, 0.35);
}

.to-check-icon {
    flex-shrink: 0;
}

/* Highlight Banner (Screenshot 2) */
.to-highlight-banner {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 28px;
    border-radius: 14px;
    background: #08202A;
    border: 1px solid #134E4A;
    box-shadow: 0 0 25px rgba(94, 234, 212, 0.08);
}

.to-stat-left,
.to-stat-right {
    font-size: 22px;
    font-weight: 700;
    color: #5EEAD4;
    letter-spacing: -0.015em;
    font-style: italic;
}

/* Section 4: Explore Other Services Light Theme (Screenshot 2) */
.to-explore-light {
    background: #F8FAFC !important;
    border-top: 1px solid #E2E8F0 !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 75px 24px !important;
}

.to-explore-light .explore-eyebrow {
    color: #0D9488 !important;
}

.to-explore-light .explore-service-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
}

.to-explore-light .explore-service-card:hover {
    transform: translateY(-5px) !important;
    border-color: #0D9488 !important;
    box-shadow: 0 16px 36px rgba(13, 148, 136, 0.12) !important;
}

.to-explore-light .explore-icon-box {
    background: #E6F7F5 !important;
    color: #0D9488 !important;
}

.to-explore-light .explore-service-card:hover .explore-icon-box {
    background: #CCF2ED !important;
    transform: scale(1.1) rotate(4deg) !important;
}

.to-explore-light .explore-title {
    color: #0F172A !important;
}

.to-explore-light .explore-desc {
    color: #64748B !important;
}

.to-explore-light .explore-arrow {
    color: #0D9488 !important;
}

/* ==========================================================================
   LIGHT MODE OVERRIDES FOR TRUST & OBSERVABILITY
   ========================================================================== */

body.light-mode .to-hero-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
}

body.light-mode .to-hero-title,
body.light-mode .to-heading,
body.light-mode .to-engine-title,
body.light-mode .to-channel-title,
body.light-mode .to-benefit-strong,
body.light-mode .to-report-subtitle,
body.light-mode .to-step-info strong,
body.light-mode .to-sparkline-title,
body.light-mode .to-mini-chart-title,
body.light-mode .to-issue-label,
body.light-mode .to-check-row {
    color: #0B1426;
}

body.light-mode .to-hero-sub,
body.light-mode .to-subheading,
body.light-mode .to-channel-desc,
body.light-mode .to-benefit-span,
body.light-mode .to-report-subdesc,
body.light-mode .to-step-info span {
    color: #52607A;
}

body.light-mode .to-hero-title .editorial-accent,
body.light-mode .to-heading .editorial-accent,
body.light-mode .to-engine-tag,
body.light-mode .to-window-statement,
body.light-mode .to-steps-eyebrow,
body.light-mode .to-stat-left,
body.light-mode .to-stat-right {
    color: #0F766E;
}

body.light-mode .to-window-card,
body.light-mode .to-engine-banner,
body.light-mode .to-channel-card,
body.light-mode .to-benefit-card,
body.light-mode .to-report-console {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

body.light-mode .to-window-topbar {
    background: #F1F5F9;
    border-color: #E2E8F0;
}

body.light-mode .to-window-title {
    color: #475569;
}

body.light-mode .to-sparkline-card,
body.light-mode .to-mini-chart {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

body.light-mode .to-check-row {
    background: #F8FAFC;
    border-color: #E2E8F0;
}

body.light-mode .to-highlight-banner {
    background: #E6F7F3;
    border-color: rgba(15, 118, 110, 0.3);
}

body.light-mode .to-step-badge {
    background: #E6F7F3;
    color: #0F766E;
    border-color: rgba(15, 118, 110, 0.3);
}

body.light-mode .to-filter-pill {
    background: #F1F5F9;
    color: #52607A;
    border-color: #E2E8F0;
}

body.light-mode .to-filter-pill.active {
    background: #E6F7F3;
    color: #0F766E;
    border-color: #0F766E;
}

body.light-mode .to-tab-btn {
    background: #F1F5F9;
    color: #52607A;
    border-color: #E2E8F0;
}

body.light-mode .to-tab-btn.active {
    background: #0F766E;
    color: #FFFFFF;
    border-color: #0F766E;
}

body.light-mode .to-what-section {
    background: #F8FAFC;
    border-top-color: #E2E8F0;
}

body.light-mode .to-what-section .vb-eyebrow {
    color: #0F766E;
}

body.light-mode .to-what-section .to-heading {
    color: #0B1426;
}

body.light-mode .to-what-section .to-heading .editorial-accent {
    color: #0F766E;
}

body.light-mode .to-what-section .to-subheading {
    color: #52607A;
}

body.light-mode .to-what-section .arch-channels-title h3 {
    color: #0B1426;
}

body.light-mode .to-what-section .arch-channels-subtitle {
    color: #52607A;
}

body.light-mode .to-what-section .beacon-text {
    color: #059669;
}

body.light-mode .to-what-section .channel-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .to-what-section .channel-info h4 {
    color: #0B1426;
}

body.light-mode .to-what-section .channel-info p {
    color: #52607A;
}

body.light-mode .to-what-section .channel-icon-wrap.icon-purple {
    background: #F5F3FF;
    color: #7C3AED;
    box-shadow: 0 2px 10px rgba(139, 92, 246, 0.1);
}

body.light-mode .to-what-section .channel-icon-wrap.icon-blue {
    background: #F0F9FF;
    color: #0284C7;
    box-shadow: 0 2px 10px rgba(2, 132, 199, 0.1);
}

body.light-mode .to-what-section .channel-icon-wrap.icon-teal {
    background: #CCFBF1;
    color: #0D9488;
    box-shadow: 0 2px 10px rgba(13, 148, 136, 0.1);
}

body.light-mode .to-what-section .channel-icon-wrap.icon-orange {
    background: #FFF7ED;
    color: #EA580C;
    box-shadow: 0 2px 10px rgba(249, 115, 22, 0.1);
}

body.light-mode .to-what-section .channel-icon-wrap.icon-indigo {
    background: #EEF2FF;
    color: #4F46E5;
    box-shadow: 0 2px 10px rgba(79, 70, 229, 0.1);
}

body.light-mode .to-what-section .channel-icon-wrap.icon-rose {
    background: #FFE4E6;
    color: #E11D48;
    box-shadow: 0 2px 10px rgba(225, 29, 72, 0.1);
}

body.light-mode .to-what-section .channel-metric-chip {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #334155;
}

body.light-mode .to-what-section .eval-brand-tag {
    color: #0B1426;
}

body.light-mode .to-what-section .eval-layer-title {
    background: linear-gradient(135deg, #0F766E 0%, #10B981 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: none;
}

body.light-mode .to-what-section .eval-title-glow-line {
    background: linear-gradient(90deg, transparent, #0F766E, transparent);
}

body.light-mode .to-what-section .eval-layer-subtitle {
    color: #52607A;
}

body.light-mode .to-what-section .eval-feature-card,
body.light-mode .to-what-section .eval-white-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

body.light-mode .to-what-section .eval-feature-col:not(:last-child)::after {
    background: #E2E8F0;
}

body.light-mode .to-what-section .eval-col-title {
    color: #0B1426;
}

body.light-mode .to-what-section .eval-col-desc {
    color: #52607A;
}

body.light-mode .to-what-section .platform-banner-callout {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

body.light-mode .to-what-section .platform-banner-callout p {
    color: #52607A;
}

body.light-mode .to-what-section .platform-banner-callout strong {
    color: #0B1426;
}

body.light-mode .to-benefit-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

body.light-mode .to-benefit-strong {
    color: #0B1426;
}

body.light-mode .to-benefit-span {
    color: #52607A;
}

body.light-mode .to-reporting-section {
    background: #FFFFFF;
}

/* Responsive Breakpoints for Trust & Observability */
@media (max-width: 1024px) {
    .to-hero-container {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .to-hero-title {
        font-size: 46px;
    }

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

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

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

@media (max-width: 640px) {
    .to-hero-title {
        font-size: 36px;
    }

    .to-heading {
        font-size: 32px;
    }

    .to-sparklines-grid {
        grid-template-columns: 1fr;
    }

    .to-channels-grid {
        grid-template-columns: 1fr;
    }

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

    .to-mini-charts-grid {
        grid-template-columns: 1fr;
    }

    .to-engine-banner {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .to-highlight-banner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* ==========================================================================
   CASE STUDIES PAGE STYLING (Harmonized with index.html Theme)
   ========================================================================== */

/* Base Case Studies Page - exact index.html background & text */
.case-studies-page {
    background-color: var(--bg-navy, #0B1426);
    color: var(--text-body-dark, #A9B8CE);
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    overflow-x: hidden;
}

/* Accent phrase styling matching index.html */
.cs-serif-accent {
    font-family: inherit;
    font-style: normal;
    font-weight: inherit;
    color: var(--accent-teal, #5EEAD4);
}

.cs-serif-accent.text-teal {
    color: var(--accent-teal, #5EEAD4);
}

.cs-serif-accent.text-green {
    color: var(--accent-teal, #5EEAD4);
}

/* --------------------------------------------------------------------------
   1. HERO SECTION (Screenshot 1: Every support call and ticket, audited for accuracy.)
   -------------------------------------------------------------------------- */
.cs-hero-section {
    padding: 140px 24px 90px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.09) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
}

.cs-hero-section::before {
    content: '';
    position: absolute;
    top: -150px;
    left: 20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
}

.cs-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 56px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Left Hero Copy */
.cs-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cs-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    color: #5EEAD4;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.cs-badge-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px rgba(94, 234, 212, 0.7);
    display: inline-block;
}

.cs-hero-title {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: clamp(38px, 4.6vw, 56px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 0 20px 0;
}

.cs-hero-title .cs-serif-accent {
    color: #5EEAD4;
    display: inline;
}

.cs-hero-subtitle {
    font-size: 17px;
    line-height: 1.55;
    color: #A9B8CE;
    max-width: 480px;
    margin: 0 0 32px 0;
    font-weight: 400;
}

.cs-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cs-btn-mint {
    background: #5EEAD4;
    color: #0B1426;
    font-weight: 700;
    padding: 13px 28px;
    border-radius: 9999px;
    font-size: 14.5px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.25);
}

.cs-btn-mint:hover {
    background: #2DD4BF;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(94, 234, 212, 0.35);
}

.cs-btn-outline {
    background: rgba(255, 255, 255, 0.05);
    color: #FFFFFF;
    font-weight: 600;
    padding: 13px 26px;
    border-radius: 9999px;
    font-size: 14.5px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.22s ease;
}

.cs-btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.35);
    transform: translateY(-1px);
}

/* Right Column: Audit Scope & Objective Window (Screenshot 1) */
.cs-window-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 20px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.05);
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
}

.cs-window-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 32px 70px rgba(0, 0, 0, 0.7), 0 0 35px rgba(94, 234, 212, 0.2);
    border-color: rgba(94, 234, 212, 0.35);
}

/* Scanning Laser Line Effect */
.cs-window-card::after {
    content: '';
    position: absolute;
    top: -20%;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.75), transparent);
    filter: blur(1.5px);
    pointer-events: none;
    opacity: 0;
    animation: csLaserScan 7s ease-in-out infinite;
}

@keyframes csLaserScan {
    0% { top: 0%; opacity: 0; }
    15% { opacity: 0.8; }
    50% { top: 100%; opacity: 0.8; }
    55% { opacity: 0; }
    100% { top: 100%; opacity: 0; }
}

.cs-window-header {
    padding: 14px 20px;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: rgba(11, 20, 38, 0.95);
}

.cs-window-title {
    text-align: center;
    color: #8494B0;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.01em;
    width: 100%;
}

.cs-window-body {
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 2;
}

.cs-scope-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #8494B0;
    text-transform: uppercase;
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cs-live-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    color: #5EEAD4;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: rgba(94, 234, 212, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(94, 234, 212, 0.2);
}

.cs-pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 8px #5EEAD4;
    animation: csBeaconPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes csBeaconPing {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.7); }
    70% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(94, 234, 212, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(94, 234, 212, 0); }
}

.cs-scope-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 12px;
    transition: background 0.2s ease, transform 0.2s ease;
}

.cs-scope-item:hover {
    background: rgba(255, 255, 255, 0.04);
    transform: translateX(4px);
}

.cs-num-badge {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.25s ease;
}

.cs-scope-item:hover .cs-num-badge {
    background: #5EEAD4;
    color: #0B1426;
    box-shadow: 0 0 14px rgba(94, 234, 212, 0.6);
}

.cs-scope-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.cs-scope-title {
    font-size: 16.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0;
    font-family: var(--font-sans, 'Inter', sans-serif);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Audio wave equalizer bars */
.cs-audio-wave {
    display: inline-flex;
    align-items: flex-end;
    gap: 2.5px;
    height: 12px;
}

.cs-audio-wave span {
    width: 2.5px;
    background: #5EEAD4;
    border-radius: 2px;
}

.cs-audio-wave span:nth-child(1) { height: 4px; animation: csEq1 1.1s ease-in-out infinite alternate; }
.cs-audio-wave span:nth-child(2) { height: 11px; animation: csEq2 1.1s ease-in-out infinite alternate 0.2s; }
.cs-audio-wave span:nth-child(3) { height: 7px; animation: csEq3 1.1s ease-in-out infinite alternate 0.4s; }
.cs-audio-wave span:nth-child(4) { height: 12px; animation: csEq4 1.1s ease-in-out infinite alternate 0.1s; }

@keyframes csEq1 { 0% { height: 3px; } 100% { height: 11px; } }
@keyframes csEq2 { 0% { height: 12px; } 100% { height: 4px; } }
@keyframes csEq3 { 0% { height: 5px; } 100% { height: 13px; } }
@keyframes csEq4 { 0% { height: 10px; } 100% { height: 2px; } }

.cs-scope-desc {
    font-size: 13.5px;
    color: #A9B8CE;
    margin: 0;
    line-height: 1.4;
}

/* Inner Banner Box (Bottom of Window) */
.cs-metrics-banner {
    border: 1px solid rgba(94, 234, 212, 0.35);
    background: linear-gradient(135deg, rgba(11, 20, 38, 0.85) 0%, rgba(15, 27, 51, 0.95) 100%);
    border-radius: 12px;
    padding: 16px 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 8px 24px rgba(0, 0, 0, 0.35);
    position: relative;
    overflow: hidden;
}

.cs-metrics-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(94, 234, 212, 0.08) 0%, transparent 80%);
    pointer-events: none;
}

.cs-banner-metric {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-style: normal;
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.01em;
    background: linear-gradient(90deg, #5EEAD4 0%, #FFFFFF 50%, #5EEAD4 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: csTextShimmer 4s linear infinite;
}

@keyframes csTextShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

/* --------------------------------------------------------------------------
   2. THE APPROACH SECTION (Screenshot 2 - Themed to match index.html)
   -------------------------------------------------------------------------- */
.cs-approach-section {
    padding: 95px 24px;
    background-color: var(--bg-secondary-dark, #0F1B33);
    color: var(--text-white, #FFFFFF);
    position: relative;
    border-top: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-bottom: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
}

.cs-approach-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cs-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.cs-section-eyebrow.green-eyebrow {
    color: var(--accent-teal, #5EEAD4);
}

.cs-section-eyebrow.cyan-eyebrow {
    color: var(--accent-teal, #5EEAD4);
}

.cs-section-heading {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: clamp(32px, 3.8vw, 46px);
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 20px 0;
    color: #FFFFFF;
}

.cs-section-heading.dark-heading,
.cs-section-heading.light-heading {
    color: #FFFFFF;
}

body.light-mode .cs-section-heading,
body.light-mode .cs-section-heading.dark-heading,
body.light-mode .cs-section-heading.light-heading,
html.light-mode .cs-section-heading,
html.light-mode body .cs-section-heading {
    color: #0B1426 !important;
}

.cs-section-lead {
    font-size: 16.5px;
    line-height: 1.62;
    margin: 0 0 44px 0;
    max-width: 840px;
    font-weight: 400;
    color: #A9B8CE;
}

.cs-section-lead.dark-lead,
.cs-section-lead.light-lead {
    color: #A9B8CE;
}

body.light-mode .cs-section-lead,
body.light-mode .cs-section-lead.dark-lead,
body.light-mode .cs-section-lead.light-lead,
html.light-mode .cs-section-lead,
html.light-mode body .cs-section-lead {
    color: #475569 !important;
}

/* Two Approach Cards Grid */
.cs-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cs-approach-card {
    background: var(--bg-navy, #0B1426);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 34px 30px;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.cs-approach-card::before, .cs-result-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.7), transparent);
    transform: translateX(-100%);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.cs-approach-card:hover::before, .cs-result-card:hover::before {
    transform: translateX(100%);
}

.cs-approach-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    border-color: rgba(94, 234, 212, 0.4);
}

.cs-approach-num-badge {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    font-weight: 700;
    font-size: 13.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.cs-approach-card:hover .cs-approach-num-badge {
    transform: scale(1.1);
    background: #5EEAD4;
    color: #0B1426;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.6);
}

.cs-approach-card-title {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 21px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 12px 0;
    letter-spacing: -0.015em;
}

.cs-approach-card-desc {
    font-size: 15px;
    line-height: 1.55;
    color: #A9B8CE;
    margin: 0;
}

/* --------------------------------------------------------------------------
   3. THE RESULTS SECTION (Screenshot 3: Key metrics achieved.)
   -------------------------------------------------------------------------- */
.cs-results-section {
    padding: 95px 24px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.09) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
}

.cs-results-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* 3 Results Cards Grid */
.cs-results-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 32px;
}

.cs-result-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 38px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
    position: relative;
    overflow: hidden;
}

.cs-result-card:hover {
    transform: translateY(-5px);
    border-color: rgba(94, 234, 212, 0.4);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45), 0 0 25px rgba(94, 234, 212, 0.15);
}

.cs-result-stat {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: clamp(36px, 3.6vw, 48px);
    font-weight: 800;
    color: #5EEAD4;
    margin-bottom: 14px;
    line-height: 1.1;
    letter-spacing: -0.02em;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

/* Mini Progress Bar for 50% to 70% Lift */
.cs-stat-progress-wrapper {
    width: 100%;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    margin-bottom: 16px;
    overflow: hidden;
    position: relative;
}

.cs-stat-progress-fill {
    height: 100%;
    width: 70%;
    background: linear-gradient(90deg, #2DD4BF, #5EEAD4);
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(94, 234, 212, 0.6);
    animation: csProgressGrow 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes csProgressGrow {
    0% { width: 0%; }
    100% { width: 70%; }
}

/* Radar Beacon Badge for Captured */
.cs-captured-radar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    color: #5EEAD4;
    letter-spacing: 0.04em;
    margin-bottom: 12px;
    width: fit-content;
}

.cs-result-title {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    line-height: 1.35;
    font-family: var(--font-sans, 'Inter', sans-serif);
}

.cs-result-desc {
    font-size: 14.5px;
    line-height: 1.5;
    color: #A9B8CE;
    margin: 0;
}

/* Disclaimer Box (Screenshot 3) */
.cs-disclaimer-box {
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    background: rgba(15, 27, 51, 0.6);
    border-radius: 12px;
    padding: 20px 28px;
    backdrop-filter: blur(8px);
    transition: border-color 0.2s ease;
}

.cs-disclaimer-box:hover {
    border-color: rgba(94, 234, 212, 0.3);
}

/* Ambient Hero Glowing Orbs */
.cs-hero-glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    pointer-events: none;
    z-index: 1;
    opacity: 0.65;
}

.cs-hero-glow-orb.orb-1 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.2) 0%, transparent 70%);
    top: -100px;
    left: 8%;
    animation: csFloatOrb1 12s ease-in-out infinite alternate;
}

.cs-hero-glow-orb.orb-2 {
    width: 450px;
    height: 450px;
    background: radial-gradient(circle, rgba(45, 212, 191, 0.15) 0%, transparent 70%);
    top: 25%;
    right: 5%;
    animation: csFloatOrb2 14s ease-in-out infinite alternate-reverse;
}

@keyframes csFloatOrb1 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(35px, 25px) scale(1.1); }
}

@keyframes csFloatOrb2 {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(-30px, -35px) scale(1.12); }
}

.cs-disclaimer-text {
    font-size: 14px;
    color: #8494B0;
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   4. COMPLEMENTARY SECTIONS (Audit Breakdown, More Cases, CTA)
   -------------------------------------------------------------------------- */
.cs-deepdive-section {
    padding: 90px 24px;
    background-color: #0B1426;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cs-deepdive-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cs-deepdive-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.cs-deepdive-stat-group {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.cs-deepdive-stat-box {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 16px 20px;
    border-radius: 12px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.cs-deepdive-stat-box:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.3);
}

.cs-deepdive-stat-num {
    color: #5EEAD4;
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.cs-deepdive-stat-desc {
    color: #94A3B8;
    font-size: 13px;
}

.cs-comparison-table-card {
    background: #0F1B33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    padding: 28px;
}

.cs-comparison-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
}

.cs-comparison-row:last-child {
    border-bottom: none;
}

.cs-comparison-row.head {
    font-weight: 700;
    color: #94A3B8;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cs-compare-feature {
    color: #FFFFFF;
    font-weight: 600;
}

.cs-compare-old {
    color: #EF4444;
}

.cs-compare-gm {
    color: #5EEAD4;
    font-weight: 600;
}

/* More Case Studies Grid */
.cs-more-section {
    padding: 95px 24px;
    background-color: #080F1E;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.cs-more-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 40px;
}

.cs-more-card {
    background: #0F1B33;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 32px 26px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.25s ease, border-color 0.25s ease;
    text-decoration: none;
}

.cs-more-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.35);
}

.cs-more-badge {
    font-size: 12px;
    color: #5EEAD4;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

.cs-more-title {
    font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
    font-size: 20px;
    color: #FFFFFF;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 12px 0;
}

.cs-more-desc {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.5;
    margin: 0 0 20px 0;
}

.cs-more-link {
    color: #5EEAD4;
    font-size: 14px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Enterprise Demo Banner */
.cs-cta-section {
    padding: 85px 24px;
    background: linear-gradient(180deg, #080F1E 0%, #0F1F3D 100%);
    position: relative;
    border-top: 1px solid rgba(94, 234, 212, 0.15);
}

.cs-cta-box {
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    background: rgba(15, 27, 51, 0.7);
    border: 1px solid rgba(94, 234, 212, 0.3);
    border-radius: 20px;
    padding: 56px 40px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4), 0 0 30px rgba(94, 234, 212, 0.08);
}

/* --------------------------------------------------------------------------
   LIGHT MODE OVERRIDES FOR CASE STUDIES PAGE
   -------------------------------------------------------------------------- */
body.light-mode,
body.light-mode.case-studies-page {
    background-color: #F8FAFC !important;
    color: #0F172A !important;
}

/* Global Headings in Light Mode */
body.light-mode .cs-section-heading,
body.light-mode .cs-section-heading.light-heading,
body.light-mode .cs-section-heading.dark-heading,
body.light-mode .cs-cta-box .cs-section-heading,
body.light-mode .cs-more-section .cs-section-heading,
body.light-mode .cs-deepdive-section .cs-section-heading,
body.light-mode .cs-results-section .cs-section-heading,
body.light-mode .cs-approach-section .cs-section-heading {
    color: #0B1426 !important;
}

body.light-mode .cs-serif-accent,
body.light-mode .cs-serif-accent.text-teal,
body.light-mode .cs-serif-accent.text-green {
    color: #0D9488 !important;
}

body.light-mode .cs-section-lead,
body.light-mode .cs-section-lead.light-lead,
body.light-mode .cs-section-lead.dark-lead,
body.light-mode .cs-cta-box .cs-section-lead {
    color: #475569 !important;
}

body.light-mode .cs-section-eyebrow,
body.light-mode .cs-section-eyebrow.green-eyebrow,
body.light-mode .cs-section-eyebrow.cyan-eyebrow {
    color: #0D9488 !important;
}

/* 1. Hero Section */
body.light-mode .cs-hero-section {
    background-color: #F8FAFC !important;
    background-image: radial-gradient(rgba(13, 148, 136, 0.1) 1px, transparent 1px) !important;
}

body.light-mode .cs-hero-title {
    color: #0B1426 !important;
}

body.light-mode .cs-hero-subtitle {
    color: #475569 !important;
}

body.light-mode .cs-badge {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    color: #475569 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .cs-badge-dot {
    background: #0D9488 !important;
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.5) !important;
}

body.light-mode .cs-btn-mint {
    background: #0D9488 !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.25) !important;
}

body.light-mode .cs-btn-mint:hover {
    background: #0F766E !important;
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.35) !important;
}

body.light-mode .cs-btn-outline {
    background: #FFFFFF !important;
    color: #0F172A !important;
    border-color: #CBD5E1 !important;
}

body.light-mode .cs-btn-outline:hover {
    background: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}

/* Hero Window Card */
body.light-mode .cs-window-card {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .cs-window-header {
    background: #F8FAFC !important;
    border-bottom-color: #E2E8F0 !important;
}

body.light-mode .cs-window-title {
    color: #475569 !important;
    font-weight: 600 !important;
}

body.light-mode .cs-scope-label {
    color: #475569 !important;
}

body.light-mode .cs-scope-item {
    transition: background 0.2s ease;
}

body.light-mode .cs-scope-item:hover {
    background: #F8FAFC !important;
}

body.light-mode .cs-scope-title {
    color: #0B1426 !important;
}

body.light-mode .cs-scope-desc {
    color: #475569 !important;
}

body.light-mode .cs-num-badge {
    background: rgba(13, 148, 136, 0.12) !important;
    color: #0D9488 !important;
}

body.light-mode .cs-scope-item:hover .cs-num-badge {
    background: #0D9488 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 12px rgba(13, 148, 136, 0.4) !important;
}

body.light-mode .cs-live-pulse-badge {
    background: rgba(13, 148, 136, 0.1) !important;
    border-color: rgba(13, 148, 136, 0.25) !important;
    color: #0F766E !important;
}

body.light-mode .cs-pulse-dot {
    background: #0D9488 !important;
    box-shadow: 0 0 8px rgba(13, 148, 136, 0.6) !important;
}

body.light-mode .cs-audio-wave span {
    background: #0D9488 !important;
}

body.light-mode .cs-synced-badge {
    color: #0F766E !important;
    background: rgba(13, 148, 136, 0.1) !important;
    border-color: rgba(13, 148, 136, 0.25) !important;
}

body.light-mode .cs-metrics-banner {
    background: #F0FDFA !important;
    border: 1.5px solid #0D9488 !important;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.12) !important;
}

body.light-mode .cs-banner-metric {
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: #0F766E !important;
    color: #0F766E !important;
    font-weight: 800 !important;
    text-shadow: none !important;
}

body.light-mode .cs-window-card::after {
    background: linear-gradient(90deg, transparent, rgba(13, 148, 136, 0.45), transparent) !important;
}

/* Ambient hero orbs in light mode */
body.light-mode .cs-hero-glow-orb.orb-1 {
    background: radial-gradient(circle, rgba(13, 148, 136, 0.12) 0%, transparent 70%) !important;
    opacity: 0.6 !important;
}

body.light-mode .cs-hero-glow-orb.orb-2 {
    background: radial-gradient(circle, rgba(20, 184, 166, 0.1) 0%, transparent 70%) !important;
    opacity: 0.6 !important;
}

/* 2. The Approach Section */
body.light-mode .cs-approach-section {
    background-color: #FFFFFF !important;
    border-top-color: #E2E8F0 !important;
    border-bottom-color: #E2E8F0 !important;
    color: #0F172A !important;
}

body.light-mode .cs-approach-card {
    background: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .cs-approach-card:hover {
    border-color: #0D9488 !important;
    box-shadow: 0 14px 32px rgba(13, 148, 136, 0.12) !important;
}

body.light-mode .cs-approach-num-badge {
    background: rgba(13, 148, 136, 0.12) !important;
    color: #0D9488 !important;
}

body.light-mode .cs-approach-card:hover .cs-approach-num-badge {
    background: #0D9488 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 14px rgba(13, 148, 136, 0.4) !important;
}

body.light-mode .cs-approach-card-title {
    color: #0B1426 !important;
}

body.light-mode .cs-approach-card-desc {
    color: #475569 !important;
}

body.light-mode .cs-approach-card::before,
body.light-mode .cs-result-card::before {
    background: linear-gradient(90deg, transparent, rgba(13, 148, 136, 0.75), transparent) !important;
}

/* 3. The Results Section */
body.light-mode .cs-results-section {
    background-color: #F8FAFC !important;
    background-image: radial-gradient(rgba(13, 148, 136, 0.08) 1px, transparent 1px) !important;
}

body.light-mode .cs-result-card {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .cs-result-card:hover {
    border-color: #0D9488 !important;
    box-shadow: 0 14px 32px rgba(13, 148, 136, 0.12) !important;
}

body.light-mode .cs-result-stat {
    color: #0F766E !important;
}

body.light-mode .cs-result-title {
    color: #0B1426 !important;
}

body.light-mode .cs-result-desc {
    color: #475569 !important;
}

body.light-mode .cs-stat-progress-wrapper {
    background: #E2E8F0 !important;
}

body.light-mode .cs-stat-progress-fill {
    background: linear-gradient(90deg, #0D9488, #14B8A6) !important;
    box-shadow: 0 0 10px rgba(13, 148, 136, 0.35) !important;
}

body.light-mode .cs-captured-radar {
    background: rgba(13, 148, 136, 0.1) !important;
    border-color: rgba(13, 148, 136, 0.25) !important;
    color: #0F766E !important;
}

body.light-mode .cs-disclaimer-box {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
}

body.light-mode .cs-disclaimer-text {
    color: #475569 !important;
}

/* 4. Bot & Ticket Audit Deepdive Section */
body.light-mode .cs-deepdive-section {
    background-color: #FFFFFF !important;
    border-top: 1px solid #CBD5E1 !important;
}

body.light-mode .cs-deepdive-stat-box {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .cs-deepdive-stat-box:hover {
    border-color: #0D9488 !important;
}

body.light-mode .cs-deepdive-stat-num {
    color: #0F766E !important;
    font-weight: 800 !important;
}

body.light-mode .cs-deepdive-stat-desc {
    color: #334155 !important;
    font-weight: 500 !important;
}

body.light-mode .cs-comparison-table-card {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

body.light-mode .cs-comparison-row {
    border-bottom-color: #F1F5F9 !important;
}

body.light-mode .cs-comparison-row.head {
    color: #475569 !important;
    border-bottom-color: #CBD5E1 !important;
}

body.light-mode .cs-compare-feature {
    color: #0B1426 !important;
}

body.light-mode .cs-compare-old {
    color: #DC2626 !important;
    font-weight: 600 !important;
}

body.light-mode .cs-compare-gm {
    color: #0F766E !important;
    font-weight: 700 !important;
}

body.light-mode .cs-comparison-row:not(.head):hover {
    background: #F8FAFC !important;
}

/* 5. More Case Studies Section */
body.light-mode .cs-more-section {
    background-color: #F8FAFC !important;
    border-top: 1px solid #CBD5E1 !important;
}

body.light-mode .cs-more-section .cs-section-heading,
body.light-mode .cs-more-section .cs-section-heading.light-heading {
    color: #0B1426 !important;
}

body.light-mode .cs-more-section .cs-serif-accent.text-teal {
    color: #0F766E !important;
}

body.light-mode .cs-more-section .cs-section-lead.light-lead {
    color: #475569 !important;
}

body.light-mode .cs-more-card {
    background: #FFFFFF !important;
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
}

body.light-mode .cs-more-card:hover {
    border-color: #0D9488 !important;
    box-shadow: 0 14px 32px rgba(13, 148, 136, 0.12) !important;
}

body.light-mode .cs-more-badge {
    color: #0F766E !important;
}

body.light-mode .cs-more-title {
    color: #0B1426 !important;
}

body.light-mode .cs-more-desc {
    color: #475569 !important;
}

body.light-mode .cs-more-link {
    color: #0F766E !important;
}

/* 6. CTA Section */
body.light-mode .cs-cta-section {
    background: linear-gradient(180deg, #F8FAFC 0%, #EEF2F6 100%) !important;
    border-top: 1px solid #CBD5E1 !important;
}

body.light-mode .cs-cta-box {
    background: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.07) !important;
}

body.light-mode .cs-cta-box .cs-section-heading,
body.light-mode .cs-cta-box .cs-section-heading.light-heading {
    color: #0B1426 !important;
}

body.light-mode .cs-cta-box .cs-serif-accent.text-teal {
    color: #0F766E !important;
}

body.light-mode .cs-cta-box .cs-section-lead.light-lead {
    color: #475569 !important;
}

/* Navbar dropdown items in light mode */
body.light-mode .dropdown.single-col a,
body.light-mode .dropdown a {
    color: #334155 !important;
}

body.light-mode .dropdown.single-col a:hover,
body.light-mode .dropdown a:hover {
    color: #0F766E !important;
    background: #F1F5F9 !important;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
    .cs-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .cs-deepdive-grid {
        grid-template-columns: 1fr;
    }
}

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

    .cs-results-grid {
        grid-template-columns: 1fr;
    }

    .cs-more-grid {
        grid-template-columns: 1fr;
    }

    .cs-hero-title {
        font-size: 36px;
    }

    .cs-section-heading {
        font-size: 30px;
    }

    .cs-metrics-banner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* --------------------------------------------------------------------------
   PREMIUM ANIMATIONS & MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
.cs-synced-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: #5EEAD4;
    font-weight: 600;
    background: rgba(94, 234, 212, 0.1);
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid rgba(94, 234, 212, 0.2);
}

body.light-mode .cs-synced-badge {
    color: #0D9488;
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.2);
}

/* Interactive Cursor Spotlight Glow on Cards */
.cs-spotlight-layer {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.35s ease;
    background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(94, 234, 212, 0.13), transparent 60%);
    z-index: 1;
}

body.light-mode .cs-spotlight-layer {
    background: radial-gradient(450px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(13, 148, 136, 0.08), transparent 60%);
}

.cs-window-card:hover .cs-spotlight-layer,
.cs-approach-card:hover .cs-spotlight-layer,
.cs-result-card:hover .cs-spotlight-layer,
.cs-more-card:hover .cs-spotlight-layer,
.cs-comparison-table-card:hover .cs-spotlight-layer {
    opacity: 1;
}

/* Window Card Floating Animation */
@keyframes csWindowFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(-7px); }
}

.cs-window-card {
    animation: csWindowFloat 6s ease-in-out infinite alternate;
}

.cs-window-card:hover {
    animation-play-state: paused;
}

/* Scroll-Triggered Reveal Animations */
.cs-reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.cs-reveal.cs-revealed {
    opacity: 1;
    transform: translateY(0);
}

.cs-stagger-1 { transition-delay: 0.08s; }
.cs-stagger-2 { transition-delay: 0.18s; }
.cs-stagger-3 { transition-delay: 0.28s; }

/* Subtle pulse glow for numbers */
.cs-result-stat {
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

.cs-result-stat .cs-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* Comparison row interactive glow */
.cs-comparison-row {
    transition: background 0.2s ease, padding-left 0.2s ease;
    border-radius: 6px;
    padding-left: 6px;
    padding-right: 6px;
}

.cs-comparison-row:not(.head):hover {
    background: rgba(94, 234, 212, 0.05);
    padding-left: 10px;
}

body.light-mode .cs-comparison-row:not(.head):hover {
    background: rgba(13, 148, 136, 0.05);
}

/* Mint Button Shimmer Glow */
.cs-btn-mint {
    position: relative;
    overflow: hidden;
}

.cs-btn-mint::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -60%;
    width: 40%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: rotate(25deg);
    transition: none;
    animation: csBtnSheen 4.5s ease-in-out infinite;
}

@keyframes csBtnSheen {
    0%, 70% { left: -60%; }
    100% { left: 140%; }
}

/* ==========================================================================
   COLLECTIONS COMPLIANCE CASE STUDY STYLES
   ========================================================================== */

/* --------------------------------------------------------------------------
   COLLECTIONS COMPLIANCE HERO SECTION (Screenshot: Reputational risk now lives inside every collection call)
   -------------------------------------------------------------------------- */
.cc-hero-section {
    padding: 140px 24px 70px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    overflow: hidden;
}

.cc-hero-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.15fr 0.95fr;
    gap: 52px;
    align-items: center;
    position: relative;
    z-index: 2;
}

.cc-hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.cc-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 16px;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 9999px;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.cc-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    position: relative;
    flex-shrink: 0;
}

.cc-badge-dot::before,
.cc-badge-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid #5EEAD4;
    animation: ccBadgePulse 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

.cc-badge-dot::after {
    animation-delay: 1.2s;
}

@keyframes ccBadgePulse {
    0% { transform: scale(0.8); opacity: 0.9; }
    60% { transform: scale(2.4); opacity: 0; }
    100% { transform: scale(2.4); opacity: 0; }
}

.cc-hero-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    text-align: left;
}

.cc-hero-title .text-teal {
    color: #5EEAD4;
    font-weight: inherit;
    font-style: normal;
    background: linear-gradient(135deg, #5EEAD4 0%, #A7F3D0 35%, #5EEAD4 65%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccTextShimmer 7s linear infinite;
    display: inline;
}

@keyframes ccTextShimmer {
    0% { background-position: 0% center; }
    100% { background-position: 200% center; }
}

.cc-hero-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #A9B8CE;
    margin: 0 0 32px 0;
    max-width: 500px;
    text-align: left;
}

.cc-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cc-btn-mint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 12px;
    background: #5EEAD4;
    color: #0B1426;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(94, 234, 212, 0.25);
    position: relative;
    overflow: hidden;
}

.cc-btn-mint::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: rotate(25deg);
    transition: none;
    opacity: 0;
}

.cc-btn-mint:hover::after {
    opacity: 1;
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.cc-btn-mint:hover {
    background: #2DD4BF;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(94, 234, 212, 0.45);
}

.cc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 12px;
    background: rgba(15, 27, 51, 0.6);
    border: 1px solid rgba(228, 233, 242, 0.2);
    color: #FFFFFF;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.cc-btn-outline::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.25), transparent);
    transform: rotate(25deg);
    transition: none;
    opacity: 0;
}

.cc-btn-outline:hover::after {
    opacity: 1;
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.cc-btn-outline:hover {
    border-color: rgba(94, 234, 212, 0.5);
    background: rgba(15, 27, 51, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Right Column Window Card (Screenshot) */
.cc-hero-window-card {
    background: rgba(11, 20, 38, 0.95);
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(94, 234, 212, 0.08);
    backdrop-filter: blur(14px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    animation: ccFloatCard 6.5s ease-in-out infinite;
}

@keyframes ccFloatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.cc-hero-window-card:hover {
    animation-play-state: paused;
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 50px rgba(94, 234, 212, 0.15);
    border-color: rgba(94, 234, 212, 0.4);
}

.cc-window-header {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
    position: relative;
    background: rgba(15, 27, 51, 0.6);
}

.cc-window-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 2;
}

.cc-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.cc-window-header:hover .cc-dot-red {
    transform: scale(1.22);
    box-shadow: 0 0 8px #EF4444;
}

.cc-window-header:hover .cc-dot-yellow {
    transform: scale(1.22);
    box-shadow: 0 0 8px #F59E0B;
    transition-delay: 0.03s;
}

.cc-window-header:hover .cc-dot-green {
    transform: scale(1.22);
    box-shadow: 0 0 8px #10B981;
    transition-delay: 0.06s;
}

.cc-dot-red { background: #EF4444; }
.cc-dot-yellow { background: #F59E0B; }
.cc-dot-green { background: #10B981; }

.cc-window-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    color: #8494B0;
    pointer-events: none;
}

.cc-window-body {
    padding: 18px 24px 22px;
    display: flex;
    flex-direction: column;
}

.cc-window-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid rgba(228, 233, 242, 0.07);
}

.cc-row-label {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #8494B0;
    text-transform: uppercase;
}

.cc-row-value {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14.5px;
    font-weight: 700;
    color: #FFFFFF;
}

.cc-window-banner {
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 18px;
}

.cc-window-banner-stat {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 38px;
    font-weight: 800;
    color: #5EEAD4;
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
}

.cc-window-banner-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 13.5px;
    line-height: 1.45;
    color: #CBD5E1;
    margin: 0;
    font-weight: 500;
}

/* Top Outcome Cards (Screenshot 1: 98%, Tailored, From days to hours) */
.cc-outcomes-section {
    padding: 20px 24px 70px;
    position: relative;
    z-index: 2;
}

.cc-outcomes-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cc-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.cc-outcome-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 20px;
    padding: 38px 32px;
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.cc-outcome-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.5), 0 0 30px rgba(94, 234, 212, 0.18);
    border-color: rgba(94, 234, 212, 0.4);
}

.cc-outcome-stat {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(48px, 5vw, 68px);
    font-weight: 800;
    line-height: 1;
    color: var(--accent-teal, #5EEAD4);
    letter-spacing: -0.03em;
    margin-bottom: 20px;
}

.cc-outcome-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-style: normal;
    font-size: clamp(22px, 2.2vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    color: var(--accent-teal, #5EEAD4);
    margin: 0 0 16px 0;
    letter-spacing: -0.02em;
}

.cc-outcome-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #A9B8CE;
    margin: 0;
}

/* --------------------------------------------------------------------------
   THE MANDATE SECTION (Screenshot 3: From best practice to binding mandate)
   -------------------------------------------------------------------------- */
.cc-mandate-section {
    padding: 95px 24px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.08) 1px, transparent 1px);
    background-size: 32px 32px;
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.cc-mandate-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 56px;
    align-items: center;
}

.cc-mandate-shift-bold {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.5;
    margin-top: 28px;
    padding-left: 18px;
    border-left: 3px solid #5EEAD4;
}

.cc-mandate-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cc-mandate-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 28px 24px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cc-mandate-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    border-color: rgba(94, 234, 212, 0.35);
}

.cc-binding-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5EEAD4;
    margin-bottom: 14px;
}

.cc-mandate-card-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.cc-mandate-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #A9B8CE;
    margin: 0;
}

/* --------------------------------------------------------------------------
   THE HIDDEN RISK SECTION (Screenshot 2: One lapse is all it takes)
   -------------------------------------------------------------------------- */
.cc-risk-section {
    padding: 95px 24px;
    background: #08101E;
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.cc-risk-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cc-risk-flow {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
    align-items: center;
    margin-bottom: 40px;
}

.cc-lapse-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cc-lapse-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 16px;
    padding: 24px 26px;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.cc-lapse-card:hover {
    transform: translateX(4px);
    border-color: rgba(94, 234, 212, 0.4);
}

.cc-lapse-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #F59E0B;
    margin-bottom: 8px;
}

.cc-lapse-text {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1.5;
    margin: 0;
    font-weight: 500;
}

/* Flow Arrow */
.cc-flow-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5EEAD4;
    font-size: 32px;
    filter: drop-shadow(0 0 12px rgba(94, 234, 212, 0.6));
    animation: ccPulseArrow 1.8s cubic-bezier(0.45, 0, 0.55, 1) infinite;
    cursor: default;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.cc-flow-arrow:hover {
    transform: scale(1.3) translateX(4px);
    filter: drop-shadow(0 0 20px rgba(94, 234, 212, 0.9));
}

@keyframes ccPulseArrow {
    0%, 100% {
        transform: translateX(0);
        opacity: 0.75;
    }
    50% {
        transform: translateX(8px);
        opacity: 1;
    }
}

.cc-trigger-col {
    display: flex;
    flex-direction: column;
}

.cc-trigger-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5EEAD4;
    margin-bottom: 16px;
}

.cc-trigger-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cc-trigger-item {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 14px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease, background 0.28s ease, box-shadow 0.28s ease;
}

.cc-trigger-item:hover {
    transform: translateX(8px);
    border-color: rgba(94, 234, 212, 0.5);
    background: rgba(15, 27, 51, 0.98);
    box-shadow: 0 4px 20px rgba(94, 234, 212, 0.15);
}

/* 353 Penalty Banner */
.cc-penalty-banner {
    background: rgba(15, 27, 51, 0.7);
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 18px;
    padding: 26px 36px;
    display: flex;
    align-items: center;
    gap: 32px;
    backdrop-filter: blur(8px);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cc-penalty-banner:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 0 30px rgba(94, 234, 212, 0.12);
}

.cc-penalty-stat {
    font-size: clamp(48px, 4.5vw, 64px);
    font-weight: 800;
    color: #5EEAD4;
    line-height: 1;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    animation: ccGlowPulse 4s ease-in-out infinite;
}

@keyframes ccGlowPulse {
    0%, 100% {
        text-shadow: 0 0 16px rgba(94, 234, 212, 0.3);
    }
    50% {
        text-shadow: 0 0 28px rgba(94, 234, 212, 0.75), 0 0 40px rgba(94, 234, 212, 0.3);
    }
}

.cc-penalty-text {
    font-size: 16px;
    color: #E2E8F0;
    line-height: 1.6;
    margin: 0;
}

/* --------------------------------------------------------------------------
   THE APPROACH SECTION (Screenshot 4: Where Goodmeetings is different)
   -------------------------------------------------------------------------- */
.cc-approach-section {
    padding: 95px 24px;
    background-color: var(--bg-navy, #0B1426);
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.cc-approach-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cc-different-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.cc-different-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 34px 30px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cc-different-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    border-color: rgba(94, 234, 212, 0.35);
}

.cc-different-title {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 12px 0;
    line-height: 1.35;
}

.cc-different-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #A9B8CE;
    margin: 0 0 18px 0;
}

/* Disposition Tag Pills (Screenshot 4) */
.cc-disposition-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.cc-disposition-tag {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 9999px;
    background: rgba(94, 234, 212, 0.1);
    color: #5EEAD4;
    border: 1px solid rgba(94, 234, 212, 0.22);
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    cursor: default;
}

.cc-disposition-tag:hover {
    background: rgba(94, 234, 212, 0.22);
    border-color: rgba(94, 234, 212, 0.6);
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 4px 14px rgba(94, 234, 212, 0.25);
}

/* --------------------------------------------------------------------------
   THE RESULTS SECTION (Screenshot 5: 100% call audit. Compliance proven...)
   -------------------------------------------------------------------------- */
.cc-results-section {
    padding: 95px 24px;
    background-color: #08101E;
    background-image: radial-gradient(rgba(94, 234, 212, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.cc-results-container {
    max-width: 1200px;
    margin: 0 auto;
}

.cc-results-layout {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 32px;
    align-items: stretch;
}

/* Left Card: WHAT WE DO */
.cc-what-we-do-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 20px;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
}

.cc-what-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #5EEAD4;
    margin-bottom: 24px;
}

.cc-what-item {
    display: flex;
    gap: 16px;
    margin-bottom: 24px;
}

.cc-what-num {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.cc-what-title {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 6px 0;
}

.cc-what-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #A9B8CE;
    margin: 0;
}

.cc-highlight-box {
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-style: normal;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: -0.01em;
    color: #5EEAD4;
    margin-top: 10px;
}

/* Right 2x2 Metric Cards */
.cc-results-metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.cc-outcome-card,
.cc-mandate-card,
.cc-different-card,
.cc-what-we-do-card,
.cc-metric-card {
    position: relative;
}

.cc-outcome-card::before,
.cc-mandate-card::before,
.cc-different-card::before,
.cc-what-we-do-card::before,
.cc-metric-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mouse-x, -200px) var(--mouse-y, -200px), rgba(94, 234, 212, 0.08), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cc-outcome-card:hover::before,
.cc-mandate-card:hover::before,
.cc-different-card:hover::before,
.cc-what-we-do-card:hover::before,
.cc-metric-card:hover::before {
    opacity: 1;
}

body.light-mode .cc-outcome-card::before,
body.light-mode .cc-mandate-card::before,
body.light-mode .cc-different-card::before,
body.light-mode .cc-what-we-do-card::before,
body.light-mode .cc-metric-card::before {
    background: radial-gradient(380px circle at var(--mouse-x, -200px) var(--mouse-y, -200px), rgba(15, 118, 110, 0.06), transparent 70%);
}

.cc-metric-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease;
}

.cc-metric-card:hover {
    transform: translateY(-6px);
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 30px rgba(94, 234, 212, 0.14);
}

.cc-metric-num {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(32px, 3.2vw, 44px);
    font-style: normal;
    font-weight: 800;
    color: #5EEAD4;
    line-height: 1.1;
    margin-bottom: 12px;
    letter-spacing: -0.025em;
}

.cc-metric-desc {
    font-size: 14.5px;
    line-height: 1.5;
    color: #A9B8CE;
    margin: 0;
}

/* Hero Centering for Collections Compliance Page */
.collections-compliance-page .cs-hero {
    padding: 130px 24px 30px;
    text-align: center;
}

.collections-compliance-page .cs-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 880px;
    margin: 0 auto;
}

.collections-compliance-page .cs-hero-title {
    text-align: center;
    margin: 0 auto 20px;
}

.collections-compliance-page .cs-hero-subtitle {
    text-align: center;
    margin: 0 auto 32px;
    max-width: 720px;
}

.collections-compliance-page .cs-cta-group {
    justify-content: center;
}

/* --------------------------------------------------------------------------
   LIGHT MODE ADAPTATIONS FOR COLLECTIONS COMPLIANCE
   -------------------------------------------------------------------------- */
body.light-mode .cc-outcomes-section {
    background: #F8FAFC;
}

body.light-mode .cc-outcome-card {
    background: #EBF8F5;
    border: 1px solid rgba(15, 118, 110, 0.2);
    border-radius: 24px;
    box-shadow: 0 4px 20px rgba(15, 118, 110, 0.05);
}

body.light-mode .cc-outcome-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.12);
}

body.light-mode .cc-outcome-stat {
    color: #0F766E;
}

body.light-mode .cc-outcome-title {
    color: #0F766E;
}

body.light-mode .cc-outcome-desc {
    color: #334155;
}

body.light-mode .cc-mandate-section {
    background-color: #FFFFFF;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-top-color: #E2E8F0;
}

body.light-mode .cc-mandate-shift-bold {
    color: #0B1426;
    border-left-color: #0F766E;
}

body.light-mode .cc-mandate-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .cc-mandate-card:hover {
    border-color: #0F766E;
}

body.light-mode .cc-binding-badge {
    color: #0F766E;
}

body.light-mode .cc-mandate-card-title {
    color: #0B1426;
}

body.light-mode .cc-mandate-card-desc {
    color: #475569;
}

/* Hidden Risk Section in Light Mode */
body.light-mode .cc-risk-section {
    background: #F8FAFC;
    border-top-color: #E2E8F0;
    border-bottom-color: #E2E8F0;
}

body.light-mode .cc-risk-section .cs-section-eyebrow {
    color: #0F766E;
}

body.light-mode .cc-risk-section .cs-section-title {
    color: #0B1426;
}

body.light-mode .cc-risk-section .cs-section-lead {
    color: #475569;
}

body.light-mode .cc-lapse-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .cc-lapse-text {
    color: #0B1426;
}

body.light-mode .cc-lapse-label {
    color: #D97706;
}

body.light-mode .cc-flow-arrow {
    color: #0F766E;
}

body.light-mode .cc-trigger-eyebrow {
    color: #0F766E;
}

body.light-mode .cc-trigger-item {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #0B1426;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

body.light-mode .cc-trigger-item:hover {
    border-color: #0F766E;
    background: #F0FDFA;
}

body.light-mode .cc-penalty-banner {
    background: #FFFFFF;
    border-color: rgba(15, 118, 110, 0.3);
    box-shadow: 0 6px 24px rgba(15, 118, 110, 0.08);
}

body.light-mode .cc-penalty-stat {
    color: #0F766E;
}

body.light-mode .cc-penalty-text {
    color: #334155;
}

body.light-mode .cc-approach-section {
    background-color: #FFFFFF;
    border-top-color: #E2E8F0;
}

body.light-mode .cc-different-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .cc-different-card:hover {
    border-color: #0F766E;
}

body.light-mode .cc-different-title {
    color: #0B1426;
}

body.light-mode .cc-different-desc {
    color: #475569;
}

body.light-mode .cc-disposition-tag {
    background: #F0FDFA;
    color: #0F766E;
    border-color: rgba(15, 118, 110, 0.3);
}

body.light-mode .cc-results-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-top-color: #E2E8F0;
}

/* WHAT WE DO card in Light Mode */
body.light-mode .cc-what-we-do-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

body.light-mode .cc-what-label {
    color: #0F766E;
}

body.light-mode .cc-what-num {
    background: #F0FDFA;
    color: #0F766E;
}

body.light-mode .cc-what-title {
    color: #0B1426;
}

body.light-mode .cc-what-desc {
    color: #475569;
}

body.light-mode .cc-highlight-box {
    background: #F0FDFA;
    border-color: rgba(15, 118, 110, 0.35);
    color: #0F766E;
}

body.light-mode .cc-metric-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .cc-metric-card:hover {
    border-color: #0F766E;
}

body.light-mode .cc-metric-num {
    color: #0F766E;
}

body.light-mode .cc-metric-desc {
    color: #475569;
}

body.light-mode .cc-hero-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-bottom: 1px solid #E2E8F0;
}

body.light-mode .cc-badge {
    background: #EBF8F5;
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .cc-badge-dot {
    background: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.4);
}

body.light-mode .cc-badge-dot::before,
body.light-mode .cc-badge-dot::after {
    border-color: #0F766E;
}

body.light-mode .cc-hero-title {
    color: #0B1426;
}

body.light-mode .cc-hero-title .text-teal {
    color: #0F766E;
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 35%, #0F766E 65%, #0D9488 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .cc-hero-subtitle {
    color: #475569;
}

body.light-mode .cc-btn-mint {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 4px 18px rgba(15, 118, 110, 0.2);
}

body.light-mode .cc-btn-mint:hover {
    background: #0D9488;
}

body.light-mode .cc-btn-outline {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0B1426;
}

body.light-mode .cc-btn-outline:hover {
    border-color: #0F766E;
    background: #F0FDFA;
    color: #0F766E;
}

body.light-mode .cc-hero-window-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

body.light-mode .cc-hero-window-card:hover {
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

body.light-mode .cc-window-header {
    background: #F8FAFC;
    border-bottom-color: #E2E8F0;
}

body.light-mode .cc-window-title {
    color: #64748B;
}

body.light-mode .cc-window-row {
    border-bottom-color: #F1F5F9;
}

body.light-mode .cc-row-label {
    color: #64748B;
}

body.light-mode .cc-row-value {
    color: #0F172A;
}

body.light-mode .cc-window-banner {
    background: #F0FDFA;
    border-color: rgba(15, 118, 110, 0.25);
}

body.light-mode .cc-window-banner-stat {
    color: #0F766E;
}

body.light-mode .cc-window-banner-text {
    color: #334155;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .cc-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .cc-hero-copy {
        align-items: center;
        text-align: center;
    }
    .cc-hero-title {
        text-align: center;
    }
    .cc-hero-subtitle {
        text-align: center;
    }
    .cc-hero-actions {
        justify-content: center;
    }
    .cc-outcomes-grid {
        grid-template-columns: 1fr;
    }
    .cc-mandate-container {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .cc-risk-flow {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .cc-flow-arrow {
        transform: rotate(90deg);
        margin: 6px auto;
    }
    @keyframes ccPulseArrow {
        0%, 100% { transform: rotate(90deg) translateX(0); opacity: 0.8; }
        50% { transform: rotate(90deg) translateX(6px); opacity: 1; }
    }
    .cc-different-grid {
        grid-template-columns: 1fr;
    }
    .cc-results-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .cc-hero-title {
        font-size: 32px;
    }
    .cc-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .cc-btn-mint, .cc-btn-outline {
        width: 100%;
    }
    .cc-mandate-grid {
        grid-template-columns: 1fr;
    }
    .cc-results-metrics-grid {
        grid-template-columns: 1fr;
    }
    .cc-penalty-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 24px;
    }
}

/* ==========================================================================
   BOT & TICKET AUDIT CASE STUDY PAGE (bta-)
   ========================================================================== */
.bta-hero-section {
    padding: 135px 24px 75px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.bta-hero-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 48px;
    align-items: center;
}

.bta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 9999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.bta-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    position: relative;
    flex-shrink: 0;
}

.bta-badge-dot::before,
.bta-badge-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1.5px solid #5EEAD4;
    animation: ccBadgePulse 2.4s cubic-bezier(0.24, 0, 0.38, 1) infinite;
}

.bta-badge-dot::after {
    animation-delay: 1.2s;
}

.bta-hero-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    text-align: left;
}

.bta-hero-title .text-teal,
.bta-section-title .text-teal {
    color: #5EEAD4;
    font-weight: inherit;
    font-style: normal;
    background: linear-gradient(135deg, #5EEAD4 0%, #A7F3D0 35%, #5EEAD4 65%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccTextShimmer 7s linear infinite;
    display: inline;
}

.bta-hero-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #A9B8CE;
    margin: 0 0 32px 0;
    max-width: 520px;
    text-align: left;
}

.bta-hero-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bta-btn-mint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    border-radius: 12px;
    background: #5EEAD4;
    color: #0B1426;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 18px rgba(94, 234, 212, 0.25);
    position: relative;
    overflow: hidden;
}

.bta-btn-mint::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.45), transparent);
    transform: rotate(25deg);
    transition: none;
    opacity: 0;
}

.bta-btn-mint:hover::after {
    opacity: 1;
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.bta-btn-mint:hover {
    background: #2DD4BF;
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(94, 234, 212, 0.45);
}

.bta-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 26px;
    border-radius: 12px;
    background: rgba(15, 27, 51, 0.6);
    border: 1px solid rgba(228, 233, 242, 0.2);
    color: #FFFFFF;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    position: relative;
    overflow: hidden;
}

.bta-btn-outline::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -70%;
    width: 45%;
    height: 200%;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.25), transparent);
    transform: rotate(25deg);
    transition: none;
    opacity: 0;
}

.bta-btn-outline:hover::after {
    opacity: 1;
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.bta-btn-outline:hover {
    border-color: rgba(94, 234, 212, 0.5);
    background: rgba(15, 27, 51, 0.9);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* Right Column macOS Window Card */
.bta-window-card {
    background: rgba(11, 20, 38, 0.95);
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(94, 234, 212, 0.08);
    backdrop-filter: blur(14px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
    animation: ccFloatCard 6.5s ease-in-out infinite;
    position: relative;
}

.bta-window-card:hover {
    animation-play-state: paused;
    transform: translateY(-4px);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.65), 0 0 50px rgba(94, 234, 212, 0.15);
    border-color: rgba(94, 234, 212, 0.4);
}

.bta-window-header {
    display: flex;
    align-items: center;
    padding: 16px 22px;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
    position: relative;
    background: rgba(15, 27, 51, 0.6);
}

.bta-window-dots {
    display: flex;
    align-items: center;
    gap: 7px;
    z-index: 2;
}

.bta-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}

.bta-window-header:hover .bta-dot-red {
    transform: scale(1.22);
    box-shadow: 0 0 8px #EF4444;
}

.bta-window-header:hover .bta-dot-yellow {
    transform: scale(1.22);
    box-shadow: 0 0 8px #F59E0B;
    transition-delay: 0.03s;
}

.bta-window-header:hover .bta-dot-green {
    transform: scale(1.22);
    box-shadow: 0 0 8px #10B981;
    transition-delay: 0.06s;
}

.bta-dot-red { background: #EF4444; }
.bta-dot-yellow { background: #F59E0B; }
.bta-dot-green { background: #10B981; }

.bta-window-title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 12.5px;
    font-weight: 500;
    color: #8494B0;
    pointer-events: none;
}

.bta-window-body {
    padding: 24px 28px;
    display: flex;
    flex-direction: column;
}

.bta-scope-label {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: #5EEAD4;
    text-transform: uppercase;
    margin-bottom: 22px;
}

.bta-window-item {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.bta-num-badge {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    font-weight: 700;
    font-size: 13.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bta-item-content {
    flex: 1;
}

.bta-item-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px 0;
}

.bta-item-desc {
    font-size: 14px;
    line-height: 1.5;
    color: #A9B8CE;
    margin: 0;
}

.bta-window-banner {
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.22);
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px;
}

.bta-window-banner-stat {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 21px;
    font-weight: 800;
    color: #5EEAD4;
    letter-spacing: -0.01em;
}

.bta-window-banner-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: #5EEAD4;
    opacity: 0.9;
}

/* --------------------------------------------------------------------------
   THE APPROACH SECTION (bta-)
   -------------------------------------------------------------------------- */
.bta-approach-section {
    padding: 95px 24px;
    background-color: var(--bg-navy, #0B1426);
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.bta-approach-container {
    max-width: 1200px;
    margin: 0 auto;
}

.bta-section-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(32px, 3.5vw, 44px);
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.2;
    letter-spacing: -0.025em;
    margin: 12px 0 20px 0;
}

.bta-section-lead {
    font-size: 16.5px;
    line-height: 1.65;
    color: #A9B8CE;
    max-width: 860px;
    margin: 0 0 44px 0;
}

.bta-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.bta-approach-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 36px 32px;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.bta-approach-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
    border-color: rgba(94, 234, 212, 0.35);
}

.bta-approach-badge {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: rgba(94, 234, 212, 0.12);
    color: #5EEAD4;
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
}

.bta-card-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 12px 0;
    line-height: 1.35;
}

.bta-card-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #A9B8CE;
    margin: 0;
}

/* --------------------------------------------------------------------------
   THE RESULTS SECTION (bta-)
   -------------------------------------------------------------------------- */
.bta-results-section {
    padding: 95px 24px;
    background-color: #08101E;
    background-image: radial-gradient(rgba(94, 234, 212, 0.08) 1px, transparent 1px);
    background-size: 28px 28px;
    position: relative;
    border-top: 1px solid rgba(228, 233, 242, 0.08);
}

.bta-results-container {
    max-width: 1200px;
    margin: 0 auto;
}

.bta-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 36px;
}

.bta-metric-card {
    background: var(--bg-card, #0F1B33);
    border: 1px solid var(--border-color, rgba(228, 233, 242, 0.12));
    border-radius: 18px;
    padding: 36px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.32s ease, box-shadow 0.32s ease;
}

.bta-metric-card:hover {
    transform: translateY(-6px);
    border-color: rgba(94, 234, 212, 0.45);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.5), 0 0 30px rgba(94, 234, 212, 0.14);
}

.bta-metric-stat {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(38px, 3.8vw, 54px);
    font-weight: 800;
    color: #5EEAD4;
    line-height: 1.1;
    letter-spacing: -0.025em;
    margin-bottom: 18px;
    animation: ccGlowPulse 4s ease-in-out infinite;
}

.bta-dual-stat {
    font-size: clamp(28px, 2.6vw, 38px);
    line-height: 1.25;
}

.bta-metric-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px 0;
}

.bta-metric-desc {
    font-size: 14.5px;
    line-height: 1.55;
    color: #A9B8CE;
    margin: 0;
}

.bta-disclaimer-box {
    margin-top: 36px;
    padding: 22px 28px;
    border-radius: 14px;
    background: rgba(15, 27, 51, 0.5);
    border: 1px solid rgba(228, 233, 242, 0.1);
    transition: border-color 0.3s ease;
}

.bta-disclaimer-box:hover {
    border-color: rgba(94, 234, 212, 0.3);
}

.bta-disclaimer-text {
    font-size: 13.5px;
    color: #8494B0;
    margin: 0;
    line-height: 1.5;
}

/* Card Cursor Spotlight */
.bta-approach-card::before,
.bta-metric-card::before,
.bta-window-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(380px circle at var(--mouse-x, -200px) var(--mouse-y, -200px), rgba(94, 234, 212, 0.08), transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.bta-approach-card:hover::before,
.bta-metric-card:hover::before,
.bta-window-card:hover::before {
    opacity: 1;
}

/* ==========================================================================
   BOT & TICKET AUDIT - LIGHT MODE
   ========================================================================== */
body.light-mode .bta-hero-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-bottom: 1px solid #E2E8F0;
}

body.light-mode .bta-badge {
    background: #EBF8F5;
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .bta-badge-dot {
    background: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.4);
}

body.light-mode .bta-badge-dot::before,
body.light-mode .bta-badge-dot::after {
    border-color: #0F766E;
}

body.light-mode .bta-hero-title {
    color: #0B1426;
}

body.light-mode .bta-hero-title .text-teal,
body.light-mode .bta-section-title .text-teal {
    color: #0F766E;
    background: linear-gradient(135deg, #0F766E 0%, #14B8A6 35%, #0F766E 65%, #0D9488 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

body.light-mode .bta-hero-subtitle {
    color: #475569;
}

body.light-mode .bta-btn-mint {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 4px 18px rgba(15, 118, 110, 0.2);
}

body.light-mode .bta-btn-mint:hover {
    background: #0D9488;
}

body.light-mode .bta-btn-outline {
    background: #FFFFFF;
    border-color: #CBD5E1;
    color: #0B1426;
}

body.light-mode .bta-btn-outline:hover {
    border-color: #0F766E;
    background: #F0FDFA;
    color: #0F766E;
}

/* Light Mode Window Card */
body.light-mode .bta-window-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 20px 45px rgba(15, 23, 42, 0.08);
}

body.light-mode .bta-window-card:hover {
    box-shadow: 0 26px 55px rgba(15, 23, 42, 0.12);
    border-color: #CBD5E1;
}

body.light-mode .bta-window-header {
    background: #F8FAFC;
    border-bottom-color: #E2E8F0;
}

body.light-mode .bta-window-title {
    color: #64748B;
}

body.light-mode .bta-scope-label {
    color: #0F766E;
}

body.light-mode .bta-num-badge {
    background: #F0FDFA;
    color: #0F766E;
}

body.light-mode .bta-item-title {
    color: #0B1426;
}

body.light-mode .bta-item-desc {
    color: #475569;
}

body.light-mode .bta-window-banner {
    background: #F0FDFA;
    border-color: rgba(15, 118, 110, 0.25);
}

body.light-mode .bta-window-banner-stat,
body.light-mode .bta-window-banner-text {
    color: #0F766E;
}

/* Light Mode Approach Section */
body.light-mode .bta-approach-section {
    background-color: #FFFFFF;
    border-top-color: #E2E8F0;
}

body.light-mode .bta-section-title {
    color: #0B1426;
}

body.light-mode .bta-section-lead {
    color: #475569;
}

body.light-mode .bta-approach-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .bta-approach-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.08);
}

body.light-mode .bta-approach-badge {
    background: #F0FDFA;
    color: #0F766E;
}

body.light-mode .bta-card-title {
    color: #0B1426;
}

body.light-mode .bta-card-desc {
    color: #475569;
}

/* Light Mode Results Section */
body.light-mode .bta-results-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-top-color: #E2E8F0;
}

body.light-mode .bta-metric-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .bta-metric-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.08);
}

body.light-mode .bta-metric-stat {
    color: #0F766E;
    animation: none;
    text-shadow: none;
}

body.light-mode .bta-metric-title {
    color: #0B1426;
}

body.light-mode .bta-metric-desc {
    color: #475569;
}

body.light-mode .bta-disclaimer-box {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

body.light-mode .bta-disclaimer-text {
    color: #64748B;
}

body.light-mode .bta-approach-card::before,
body.light-mode .bta-metric-card::before,
body.light-mode .bta-window-card::before {
    background: radial-gradient(380px circle at var(--mouse-x, -200px) var(--mouse-y, -200px), rgba(15, 118, 110, 0.06), transparent 70%);
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .bta-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .bta-approach-grid {
        grid-template-columns: 1fr;
    }
    .bta-metrics-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .bta-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .bta-btn-mint, .bta-btn-outline {
        width: 100%;
    }
    .bta-window-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* ==========================================================================
   SALES CASE STUDY PAGE (sales-)
   ========================================================================== */
.sales-hero-section {
    padding: 135px 24px 75px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.sales-hero-container {
    max-width: 1240px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.12fr 1fr;
    gap: 48px;
    align-items: center;
}

.sales-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 9999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.sales-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    position: relative;
    flex-shrink: 0;
}

.sales-badge-dot::before,
.sales-badge-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid #5EEAD4;
    opacity: 0.7;
    animation: btaPulseRing 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.sales-badge-dot::after {
    animation-delay: 1.2s;
}

.sales-hero-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    text-align: left;
}

.sales-hero-title .text-teal,
.sales-section-title .text-teal {
    color: #5EEAD4;
    font-weight: inherit;
    font-style: normal;
    background: linear-gradient(135deg, #5EEAD4 0%, #A7F3D0 35%, #5EEAD4 65%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccTextShimmer 7s linear infinite;
    display: inline;
}

.sales-hero-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #A9B8CE;
    margin: 0 0 32px 0;
    max-width: 520px;
    text-align: left;
}

.sales-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sales-btn-mint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    background: #5EEAD4;
    color: #064E3B;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(94, 234, 212, 0.28), 0 0 0 1px rgba(94, 234, 212, 0.4);
    position: relative;
    overflow: hidden;
}

.sales-btn-mint::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: none;
}

.sales-btn-mint:hover::after {
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.sales-btn-mint:hover {
    transform: translateY(-2px);
    background: #4ADE80;
    box-shadow: 0 8px 28px rgba(94, 234, 212, 0.45);
}

.sales-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(15, 23, 42, 0.6);
    color: #E2E8F0;
    border: 1px solid rgba(228, 233, 242, 0.16);
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.sales-btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.18), transparent);
    transform: skewX(-20deg);
    transition: none;
}

.sales-btn-outline:hover::after {
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.sales-btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.4);
    color: #FFFFFF;
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

/* macOS Terminal Window Mockup */
.sales-window-card {
    background: rgba(14, 23, 42, 0.75);
    border: 1px solid rgba(94, 234, 212, 0.18);
    border-radius: 18px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(94, 234, 212, 0.08);
    backdrop-filter: blur(16px);
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    animation: ccFloatCard 9s ease-in-out infinite;
    position: relative;
}

.sales-window-card:hover {
    border-color: rgba(94, 234, 212, 0.38);
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.18);
}

.sales-window-header {
    display: flex;
    align-items: center;
    padding: 14px 20px;
    background: rgba(15, 23, 42, 0.9);
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
    gap: 16px;
    position: relative;
}

.sales-window-dots {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.sales-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: inline-block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.sales-window-header:hover .sales-dot-red {
    background: #EF4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.sales-window-header:hover .sales-dot-yellow {
    background: #F59E0B;
    box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.sales-window-header:hover .sales-dot-green {
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
}

.sales-dot-red { background: #EF4444; }
.sales-dot-yellow { background: #F59E0B; }
.sales-dot-green { background: #10B981; }

.sales-window-title {
    font-size: 13px;
    font-weight: 500;
    color: #94A3B8;
    text-align: center;
    flex: 1;
    margin-right: 48px;
    letter-spacing: -0.01em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-window-body {
    padding: 26px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sales-scope-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #64748B;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.sales-window-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.sales-num-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sales-item-content {
    flex: 1;
}

.sales-item-title {
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px 0;
    letter-spacing: -0.01em;
}

.sales-item-desc {
    font-size: 13px;
    color: #94A3B8;
    margin: 0;
    line-height: 1.5;
}

.sales-window-banner {
    margin-top: 6px;
    padding: 16px 20px;
    border-radius: 12px;
    background: rgba(94, 234, 212, 0.06);
    border: 1px solid rgba(94, 234, 212, 0.22);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.sales-window-banner-stat {
    font-size: 22px;
    font-weight: 800;
    color: #5EEAD4;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.sales-window-banner-text {
    font-size: 14px;
    color: #94A3B8;
    line-height: 1.4;
}

/* --------------------------------------------------------------------------
   2. THE APPROACH (Screenshot 2: 4 cards)
   -------------------------------------------------------------------------- */
.sales-approach-section {
    padding: 85px 24px;
    background-color: var(--bg-navy, #0B1426);
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.sales-approach-container {
    max-width: 1240px;
    margin: 0 auto;
}

.sales-section-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 0 16px 0;
}

.sales-section-lead {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #A9B8CE;
    max-width: 820px;
    margin: 0 0 44px 0;
}

.sales-approach-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.sales-approach-card {
    background: rgba(14, 23, 42, 0.6);
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 16px;
    padding: 30px 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sales-approach-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.32);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3), 0 0 20px rgba(94, 234, 212, 0.08);
}

.sales-approach-badge {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.25);
    color: #5EEAD4;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.sales-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 10px 0;
    letter-spacing: -0.015em;
    line-height: 1.3;
}

.sales-card-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #94A3B8;
    margin: 0;
}

/* --------------------------------------------------------------------------
   3. THE RESULTS (Screenshot 3: 3 Metric cards + Disclaimer)
   -------------------------------------------------------------------------- */
.sales-results-section {
    padding: 85px 24px 105px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

.sales-results-container {
    max-width: 1240px;
    margin: 0 auto;
}

.sales-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 36px;
}

.sales-metric-card {
    background: rgba(14, 23, 42, 0.6);
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 18px;
    padding: 38px 30px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.sales-metric-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(94, 234, 212, 0.1);
}

.sales-metric-stat {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(36px, 3.8vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #5EEAD4;
    margin-bottom: 16px;
    background: linear-gradient(135deg, #5EEAD4 0%, #A7F3D0 40%, #5EEAD4 75%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccTextShimmer 8s linear infinite;
}

.sales-metric-title {
    font-size: 17px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 8px 0;
    letter-spacing: -0.015em;
    line-height: 1.35;
}

.sales-metric-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #94A3B8;
    margin: 0;
}

.sales-disclaimer-box {
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 12px;
    padding: 18px 24px;
    background: rgba(14, 23, 42, 0.4);
}

.sales-disclaimer-text {
    font-size: 13px;
    color: #94A3B8;
    margin: 0;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   SALES CASE STUDY - LIGHT MODE
   -------------------------------------------------------------------------- */
body.light-mode .sales-hero-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-bottom-color: #E2E8F0;
}

body.light-mode .sales-badge {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .sales-badge-dot {
    background: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.6);
}

body.light-mode .sales-badge-dot::before,
body.light-mode .sales-badge-dot::after {
    border-color: #0F766E;
}

body.light-mode .sales-hero-title {
    color: #0B1426;
}

body.light-mode .sales-hero-title .text-teal,
body.light-mode .sales-section-title .text-teal {
    color: #0F766E;
    background: none;
    -webkit-text-fill-color: #0F766E;
    animation: none;
}

body.light-mode .sales-hero-subtitle {
    color: #475569;
}

body.light-mode .sales-btn-mint {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.24);
}

body.light-mode .sales-btn-mint:hover {
    background: #0D655E;
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.35);
}

body.light-mode .sales-btn-outline {
    background: #FFFFFF;
    color: #0B1426;
    border-color: #CBD5E1;
}

body.light-mode .sales-btn-outline:hover {
    background: #F1F5F9;
    border-color: #0F766E;
    color: #0F766E;
}

body.light-mode .sales-window-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
}

body.light-mode .sales-window-header {
    background: #F1F5F9;
    border-bottom-color: #E2E8F0;
}

body.light-mode .sales-window-title {
    color: #64748B;
}

body.light-mode .sales-scope-label {
    color: #94A3B8;
}

body.light-mode .sales-num-badge {
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .sales-item-title {
    color: #0B1426;
}

body.light-mode .sales-item-desc {
    color: #475569;
}

body.light-mode .sales-window-banner {
    background: #F0FDFA;
    border-color: rgba(15, 118, 110, 0.25);
}

body.light-mode .sales-window-banner-stat {
    color: #0F766E;
}

body.light-mode .sales-window-banner-text {
    color: #334155;
}

body.light-mode .sales-approach-section {
    background-color: #FFFFFF;
    border-bottom-color: #E2E8F0;
}

body.light-mode .sales-section-title {
    color: #0B1426;
}

body.light-mode .sales-section-lead {
    color: #475569;
}

body.light-mode .sales-approach-card {
    background: #F8FAFC;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body.light-mode .sales-approach-card:hover {
    border-color: #0F766E;
    box-shadow: 0 10px 26px rgba(15, 118, 110, 0.08);
}

body.light-mode .sales-approach-badge {
    background: rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .sales-card-title {
    color: #0B1426;
}

body.light-mode .sales-card-desc {
    color: #475569;
}

body.light-mode .sales-results-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-top-color: #E2E8F0;
}

body.light-mode .sales-metric-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

body.light-mode .sales-metric-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 30px rgba(15, 118, 110, 0.08);
}

body.light-mode .sales-metric-stat {
    color: #0F766E;
    background: none;
    -webkit-text-fill-color: #0F766E;
    animation: none;
}

body.light-mode .sales-metric-title {
    color: #0B1426;
}

body.light-mode .sales-metric-desc {
    color: #475569;
}

body.light-mode .sales-disclaimer-box {
    background: #FFFFFF;
    border-color: #E2E8F0;
}

body.light-mode .sales-disclaimer-text {
    color: #64748B;
}

/* Responsive adjustments for Sales */
@media (max-width: 1024px) {
    .sales-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .sales-approach-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .sales-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .sales-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .sales-btn-mint, .sales-btn-outline {
        width: 100%;
    }
    .sales-window-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .sales-approach-grid {
        grid-template-columns: 1fr;
    }
    .sales-metrics-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ABOUT US PAGE (about-)
   ========================================================================== */
.about-hero-section {
    padding: 135px 24px 80px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.07) 1px, transparent 1px);
    background-size: 32px 32px;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.about-hero-container {
    max-width: 1320px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 0.9fr 1.25fr;
    gap: 40px;
    align-items: center;
}

.about-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 9999px;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.25);
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 24px;
    backdrop-filter: blur(8px);
}

.about-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #5EEAD4;
    box-shadow: 0 0 10px #5EEAD4;
    position: relative;
    flex-shrink: 0;
}

.about-badge-dot::before,
.about-badge-dot::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 1px solid #5EEAD4;
    opacity: 0.7;
    animation: btaPulseRing 2.4s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.about-badge-dot::after {
    animation-delay: 1.2s;
}

.about-hero-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(38px, 4.4vw, 54px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin: 0 0 20px 0;
    text-align: left;
}

.about-hero-title .text-teal,
.about-section-title .text-teal {
    color: #5EEAD4;
    font-weight: inherit;
    font-style: normal;
    background: linear-gradient(135deg, #5EEAD4 0%, #A7F3D0 35%, #5EEAD4 65%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccTextShimmer 7s linear infinite;
    display: inline;
}

.about-hero-subtitle {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #A9B8CE;
    margin: 0 0 32px 0;
    max-width: 520px;
    text-align: left;
}

.about-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

.about-btn-mint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 30px;
    background: #5EEAD4;
    color: #064E3B;
    border-radius: 12px;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 20px rgba(94, 234, 212, 0.28), 0 0 0 1px rgba(94, 234, 212, 0.4);
    position: relative;
    overflow: hidden;
}

.about-btn-mint::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: none;
}

.about-btn-mint:hover::after {
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.about-btn-mint:hover {
    transform: translateY(-2px);
    background: #4ADE80;
    box-shadow: 0 8px 28px rgba(94, 234, 212, 0.45);
}

.about-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    background: rgba(15, 23, 42, 0.6);
    color: #E2E8F0;
    border: 1px solid rgba(228, 233, 242, 0.16);
    border-radius: 12px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.about-btn-outline::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(94, 234, 212, 0.18), transparent);
    transform: skewX(-20deg);
    transition: none;
}

.about-btn-outline:hover::after {
    left: 140%;
    transition: left 0.75s ease-in-out;
}

.about-btn-outline:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.4);
    color: #FFFFFF;
    background: rgba(30, 41, 59, 0.8);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3);
}

/* Interactive Animated Flow Card */
.about-flow-card {
    background: rgba(8, 14, 28, 0.55);
    border: 1px solid rgba(94, 234, 212, 0.14);
    border-radius: 20px;
    padding: 24px 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(94, 234, 212, 0.06);
    backdrop-filter: blur(16px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    animation: ccFloatCard 9s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    width: 100%;
}

.about-flow-card:hover {
    border-color: rgba(94, 234, 212, 0.32);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.55), 0 0 35px rgba(94, 234, 212, 0.16);
}

.about-flow-svg {
    width: 100%;
    height: auto;
    display: block;
    user-select: none;
}

/* Static Track Paths */
.flow-track-path {
    stroke: rgba(255, 255, 255, 0.16);
    stroke-width: 2;
    fill: none;
}

/* Flow Pulse Paths */
.flow-pulse-path {
    stroke: #2DD4BF;
    stroke-width: 3.2;
    stroke-linecap: round;
    stroke-dasharray: 14 26;
    fill: none;
    animation: flowPulseAnim 2.8s linear infinite;
}

.flow-pulse-mid {
    animation-delay: -0.9s;
}

.flow-pulse-bot {
    animation-delay: -1.8s;
}

@keyframes flowPulseAnim {
    from {
        stroke-dashoffset: 80;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.flow-center-node {
    fill: #2DD4BF;
}

/* Left Mono Labels */
.flow-label-mono {
    font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', 'Fira Code', monospace);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 1.8px;
    fill: #F1F5F9;
    text-transform: uppercase;
}

/* Center Content */
.flow-center-brand {
    font-family: var(--font-mono, 'SF Mono', 'JetBrains Mono', monospace);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 3.5px;
    fill: #2DD4BF;
}

.flow-center-title {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 17px;
    font-weight: 500;
    fill: #CBD5E1;
}

.flow-center-subtitle {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 15px;
    font-weight: 400;
    fill: #94A3B8;
}

/* Right Outcome Labels */
.flow-label-outcome {
    font-family: var(--font-sans, 'Inter', -apple-system, sans-serif);
    font-size: 34px;
    font-weight: 700;
    fill: #FFFFFF;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   SECTION 2: OUR MISSION (Screenshot 3)
   -------------------------------------------------------------------------- */
.about-mission-section {
    padding: 85px 24px;
    background-color: var(--bg-navy, #0B1426);
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.about-section-container {
    max-width: 1240px;
    margin: 0 auto;
}

.about-section-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #5EEAD4;
    display: block;
    margin-bottom: 14px;
}

.about-section-title {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(30px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: #FFFFFF;
    margin: 0 0 16px 0;
}

.about-section-lead {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.65;
    color: #A9B8CE;
    max-width: 820px;
    margin: 0 0 44px 0;
}

.about-mission-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.about-mission-card {
    background: rgba(14, 23, 42, 0.6);
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 18px;
    padding: 34px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 250px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.about-mission-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(94, 234, 212, 0.08);
}

.about-card-badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: #5EEAD4;
    text-transform: uppercase;
    margin-bottom: 16px;
    display: block;
}

.about-mission-card-title {
    font-size: 24px;
    font-weight: 800;
    color: #FFFFFF;
    margin: 0 0 12px 0;
    letter-spacing: -0.02em;
}

.about-mission-card-desc {
    font-size: 14.5px;
    line-height: 1.6;
    color: #94A3B8;
    margin: 0 0 24px 0;
    flex: 1;
}

.about-card-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #5EEAD4;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    margin-top: auto;
}

.about-card-link:hover {
    color: #A7F3D0;
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   SECTION 3: OUR STORY (Screenshot 2)
   -------------------------------------------------------------------------- */
.about-story-section {
    padding: 85px 24px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
    border-bottom: 1px solid rgba(228, 233, 242, 0.08);
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: flex-start;
    margin-top: 32px;
}

.about-story-narrative {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-story-text {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 16px;
    line-height: 1.7;
    color: #A9B8CE;
    margin: 0;
}

.about-story-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.about-story-card {
    background: rgba(14, 23, 42, 0.65);
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 16px;
    padding: 24px 26px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-story-card:hover {
    transform: translateX(4px);
    border-color: rgba(94, 234, 212, 0.32);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), 0 0 16px rgba(94, 234, 212, 0.06);
}

.about-story-card-title {
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 6px 0;
    letter-spacing: -0.015em;
}

.about-story-card-desc {
    font-size: 14px;
    line-height: 1.55;
    color: #94A3B8;
    margin: 0;
}

/* --------------------------------------------------------------------------
   SECTION 4: WHY GOODMEETINGS / WHAT SETS US APART (Screenshot 1)
   -------------------------------------------------------------------------- */
.about-apart-section {
    padding: 85px 24px 105px;
    background-color: var(--bg-navy, #0B1426);
    background-image: radial-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px);
    background-size: 32px 32px;
}

.about-apart-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 36px;
}

.about-apart-card {
    background: rgba(14, 23, 42, 0.6);
    border: 1px solid rgba(228, 233, 242, 0.1);
    border-radius: 18px;
    padding: 34px 24px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.about-apart-card:hover {
    transform: translateY(-4px);
    border-color: rgba(94, 234, 212, 0.35);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(94, 234, 212, 0.1);
}

.about-apart-stat {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: clamp(36px, 3vw, 48px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: #5EEAD4;
    margin-bottom: 14px;
    background: linear-gradient(135deg, #5EEAD4 0%, #A7F3D0 40%, #5EEAD4 75%, #2DD4BF 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: ccTextShimmer 8s linear infinite;
}

.about-apart-stat.text-word {
    font-size: clamp(28px, 2.4vw, 36px);
    letter-spacing: -0.025em;
    white-space: nowrap;
}

.about-apart-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #94A3B8;
    margin: 0;
}

/* --------------------------------------------------------------------------
   ABOUT US - LIGHT MODE
   -------------------------------------------------------------------------- */
body.light-mode .about-hero-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-bottom-color: #E2E8F0;
}

body.light-mode .about-badge {
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.25);
    color: #0F766E;
}

body.light-mode .about-badge-dot {
    background: #0F766E;
    box-shadow: 0 0 8px rgba(15, 118, 110, 0.6);
}

body.light-mode .about-badge-dot::before,
body.light-mode .about-badge-dot::after {
    border-color: #0F766E;
}

body.light-mode .about-hero-title,
body.light-mode .about-section-title {
    color: #0B1426;
}

body.light-mode .about-hero-title .text-teal,
body.light-mode .about-section-title .text-teal {
    color: #0F766E;
    background: none;
    -webkit-text-fill-color: #0F766E;
    animation: none;
}

body.light-mode .about-hero-subtitle,
body.light-mode .about-section-lead,
body.light-mode .about-story-text {
    color: #475569;
}

body.light-mode .about-btn-mint {
    background: #0F766E;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(15, 118, 110, 0.24);
}

body.light-mode .about-btn-mint:hover {
    background: #0D655E;
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.35);
}

body.light-mode .about-btn-outline {
    background: #FFFFFF;
    color: #0B1426;
    border-color: #CBD5E1;
}

body.light-mode .about-btn-outline:hover {
    background: #F1F5F9;
    border-color: #0F766E;
    color: #0F766E;
}

body.light-mode .about-flow-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.06);
}

body.light-mode .flow-track-path {
    stroke: rgba(15, 23, 42, 0.12);
}

body.light-mode .flow-pulse-path {
    stroke: #0D9488;
}

body.light-mode .flow-label-mono {
    fill: #1E293B;
}

body.light-mode .flow-center-node {
    fill: #0F766E;
}

body.light-mode .flow-center-brand {
    fill: #0F766E;
}

body.light-mode .flow-center-title {
    fill: #0F172A;
}

body.light-mode .flow-center-subtitle {
    fill: #64748B;
}

body.light-mode .flow-label-outcome {
    fill: #0F172A;
}

body.light-mode .about-mission-section {
    background-color: #FFFFFF;
    border-bottom-color: #E2E8F0;
}

body.light-mode .about-section-eyebrow {
    color: #0F766E;
}

body.light-mode .about-mission-card {
    background: #F8FAFC;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body.light-mode .about-mission-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}

body.light-mode .about-card-badge {
    color: #0F766E;
}

body.light-mode .about-mission-card-title {
    color: #0B1426;
}

body.light-mode .about-mission-card-desc {
    color: #475569;
}

body.light-mode .about-card-link {
    color: #0F766E;
}

body.light-mode .about-card-link:hover {
    color: #0D655E;
}

body.light-mode .about-story-section {
    background-color: #F8FAFC;
    background-image: radial-gradient(rgba(15, 118, 110, 0.08) 1px, transparent 1px);
    border-bottom-color: #E2E8F0;
}

body.light-mode .about-story-card {
    background: #FFFFFF;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body.light-mode .about-story-card:hover {
    border-color: #0F766E;
    box-shadow: 0 8px 24px rgba(15, 118, 110, 0.08);
}

body.light-mode .about-story-card-title {
    color: #0B1426;
}

body.light-mode .about-story-card-desc {
    color: #475569;
}

body.light-mode .about-apart-section {
    background-color: #FFFFFF;
}

body.light-mode .about-apart-card {
    background: #F8FAFC;
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

body.light-mode .about-apart-card:hover {
    border-color: #0F766E;
    box-shadow: 0 12px 28px rgba(15, 118, 110, 0.08);
}

body.light-mode .about-apart-stat {
    color: #0F766E;
    background: none;
    -webkit-text-fill-color: #0F766E;
    animation: none;
}

body.light-mode .about-apart-desc {
    color: #475569;
}

/* Responsive Breakpoints for About Us */
@media (max-width: 1024px) {
    .about-hero-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .about-story-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .about-mission-grid {
        grid-template-columns: 1fr;
    }
    .about-apart-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .about-hero-actions {
        flex-direction: column;
        width: 100%;
    }
    .about-btn-mint,
    .about-btn-outline {
        width: 100%;
    }
    .about-flow-card {
        padding: 16px 10px;
        border-radius: 16px;
    }
    .about-apart-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* ==========================================================================
   CONTACT US PAGE STYLES
   ========================================================================== */
.contact-page {
    background-color: #08101E;
    background-image: 
        radial-gradient(circle at 50% 280px, rgba(94, 234, 212, 0.1) 0%, transparent 65%),
        radial-gradient(circle at 80% 600px, rgba(56, 189, 248, 0.06) 0%, transparent 50%),
        radial-gradient(rgba(94, 234, 212, 0.05) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 32px 32px;
    background-attachment: fixed;
    color: #F8FAFC;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    min-height: 100vh;
}

.contact-page.light-mode,
.light-mode .contact-page {
    background-color: #F8FAFC;
    background-image: 
        radial-gradient(circle at 50% 280px, rgba(15, 118, 110, 0.07) 0%, transparent 65%),
        radial-gradient(circle at 80% 600px, rgba(14, 165, 233, 0.05) 0%, transparent 50%),
        radial-gradient(rgba(15, 118, 110, 0.04) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 32px 32px;
    background-attachment: fixed;
    color: #0F172A;
}

.contact-hero-section {
    position: relative;
    padding: 140px 24px 80px;
    max-width: 1200px;
    margin: 0 auto;
    overflow: hidden;
}

/* Ambient Animated Glowing Blobs */
.contact-ambient-glow {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1100px;
    height: 900px;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
}

.glow-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(85px);
    opacity: 0.38;
    mix-blend-mode: screen;
    pointer-events: none;
    will-change: transform, opacity;
}

.glow-orb-1 {
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(94, 234, 212, 0.45) 0%, rgba(15, 118, 110, 0.18) 60%, transparent 80%);
    top: 10%;
    left: 10%;
    animation: floatOrb1 16s ease-in-out infinite alternate;
}

.glow-orb-2 {
    width: 440px;
    height: 440px;
    background: radial-gradient(circle, rgba(56, 189, 248, 0.38) 0%, rgba(99, 102, 241, 0.15) 60%, transparent 80%);
    top: 35%;
    right: 8%;
    animation: floatOrb2 20s ease-in-out infinite alternate;
}

.glow-orb-3 {
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.32) 0%, rgba(20, 184, 166, 0.1) 70%, transparent 80%);
    bottom: 8%;
    left: 35%;
    animation: floatOrb3 15s ease-in-out infinite alternate;
}

@keyframes floatOrb1 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(55px, -35px) scale(1.12); }
    100% { transform: translate(-30px, 40px) scale(0.95); }
}

@keyframes floatOrb2 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(-65px, 45px) scale(1.1); }
    100% { transform: translate(35px, -30px) scale(0.92); }
}

@keyframes floatOrb3 {
    0% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(45px, -45px) scale(1.14); }
    100% { transform: translate(-35px, -20px) scale(0.92); }
}

.light-mode .glow-orb {
    opacity: 0.22;
    mix-blend-mode: multiply;
}

/* Staggered Cinematic Entrances */
@keyframes contactFadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contactFadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes contactCardEntrance {
    from {
        opacity: 0.15;
        transform: translateY(16px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.contact-header {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 46px;
    position: relative;
    z-index: 1;
}

.contact-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #5EEAD4;
    background: rgba(94, 234, 212, 0.08);
    border: 1px solid rgba(94, 234, 212, 0.22);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 18px;
    animation: contactFadeInDown 0.5s ease-out both;
    box-shadow: 0 0 20px rgba(94, 234, 212, 0.12);
}

.light-mode .contact-eyebrow {
    color: #0F766E;
    background: rgba(15, 118, 110, 0.08);
    border-color: rgba(15, 118, 110, 0.22);
    box-shadow: 0 0 16px rgba(15, 118, 110, 0.08);
}

.contact-title {
    font-size: 52px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: #FFFFFF;
    margin-bottom: 16px;
    animation: contactFadeInUp 0.55s 0.05s ease-out both;
}

.light-mode .contact-title {
    color: #0F172A;
}

.contact-subtitle {
    font-size: 18px;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 600px;
    margin: 0 auto;
    animation: contactFadeInUp 0.55s 0.1s ease-out both;
}

.light-mode .contact-subtitle {
    color: #475569;
}

/* Live Specialist Status Badge */
.contact-live-status {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
    padding: 7px 18px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.65);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    font-size: 13px;
    color: #94A3B8;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    animation: contactFadeInUp 0.55s 0.15s ease-out both;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.contact-live-status:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.3);
}

.status-beacon {
    position: relative;
    display: inline-flex;
    width: 8px;
    height: 8px;
}

.status-beacon-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #10B981;
    box-shadow: 0 0 10px #10B981;
}

.status-beacon-ping {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: #10B981;
    opacity: 0.75;
    animation: beaconPing 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes beaconPing {
    0% { transform: scale(1); opacity: 0.85; }
    70%, 100% { transform: scale(3.2); opacity: 0; }
}

.highlight-teal {
    color: #5EEAD4;
    font-weight: 700;
}

.light-mode .contact-live-status {
    background: #FFFFFF;
    border-color: #E2E8F0;
    color: #475569;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}

.light-mode .highlight-teal {
    color: #0F766E;
}

/* Centered Form Layout */
.contact-main-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* Transparent Glass Form Card with Aurora Shimmer */
.contact-form-card {
    background: rgba(14, 23, 42, 0.52);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 26px;
    padding: 40px 44px 44px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5), 0 0 45px rgba(94, 234, 212, 0.06);
    position: relative;
    max-width: 640px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    animation: contactCardEntrance 0.65s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.4s ease;
}

.contact-form-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 34px 80px rgba(0, 0, 0, 0.6), 0 0 55px rgba(94, 234, 212, 0.14);
    border-color: rgba(94, 234, 212, 0.35);
}

/* Moving Aurora Light Bar along Card Top */
.contact-form-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #5EEAD4 25%, #38BDF8 50%, #818CF8 75%, transparent 100%);
    background-size: 200% 100%;
    animation: auroraLightBar 6s linear infinite;
    pointer-events: none;
    z-index: 2;
}

@keyframes auroraLightBar {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.light-mode .contact-form-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid rgba(226, 232, 240, 0.9);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06), 0 0 35px rgba(15, 118, 110, 0.05);
}

.light-mode .contact-form-card:hover {
    box-shadow: 0 28px 65px rgba(0, 0, 0, 0.1), 0 0 45px rgba(15, 118, 110, 0.1);
    border-color: rgba(15, 118, 110, 0.35);
}

/* Purpose / Demo Toggle */
.contact-purpose-toggle {
    display: flex;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 28px;
    gap: 4px;
}

.light-mode .contact-purpose-toggle {
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

.contact-toggle-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 9px;
    border: none;
    background: transparent;
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-toggle-btn:hover:not(.active) {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.04);
}

.contact-toggle-btn.active {
    background: #1E293B;
    color: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    transform: scale(1.01);
}

.light-mode .contact-toggle-btn.active {
    background: #FFFFFF;
    color: #0F172A;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.contact-toggle-btn.active.demo-active {
    color: #5EEAD4;
}

.light-mode .contact-toggle-btn.active.demo-active {
    color: #0F766E;
}

.contact-toggle-badge {
    position: relative;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.18);
    color: #5EEAD4;
    animation: badgePulse 2.4s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.4);
    }
    50% {
        box-shadow: 0 0 0 4px rgba(94, 234, 212, 0);
    }
}

.light-mode .contact-toggle-badge {
    background: rgba(15, 118, 110, 0.12);
    color: #0F766E;
}

.light-mode .contact-toggle-badge {
    background: rgba(15, 118, 110, 0.12);
    color: #0F766E;
}

/* Form Groups & Inputs */
.contact-form-group {
    margin-bottom: 22px;
}

.contact-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #94A3B8;
    margin-bottom: 8px;
}

.light-mode .contact-label {
    color: #475569;
}

.contact-input,
.contact-textarea,
.contact-select {
    width: 100%;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    padding: 14px 18px;
    font-size: 15px;
    font-family: inherit;
    color: #FFFFFF;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    outline: none;
    box-sizing: border-box;
}

.contact-input:hover,
.contact-textarea:hover,
.contact-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.light-mode .contact-input,
.light-mode .contact-textarea,
.light-mode .contact-select {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    color: #0F172A;
}

.contact-input::placeholder,
.contact-textarea::placeholder {
    color: rgba(255, 255, 255, 0.35);
    transition: color 0.2s ease;
}

.light-mode .contact-input::placeholder,
.light-mode .contact-textarea::placeholder {
    color: #94A3B8;
}

.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
    border-color: #5EEAD4;
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.18), 0 10px 24px -4px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-2px);
}

.contact-input:focus::placeholder,
.contact-textarea:focus::placeholder {
    color: rgba(255, 255, 255, 0.2);
}

.light-mode .contact-input:focus,
.light-mode .contact-textarea:focus,
.light-mode .contact-select:focus {
    border-color: #0F766E;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15), 0 8px 20px -4px rgba(15, 23, 42, 0.08);
    background: #FFFFFF;
    transform: translateY(-2px);
}

.contact-textarea {
    resize: vertical;
    min-height: 110px;
}

/* Radio pills for demo options */
.contact-demo-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 8px;
}

.contact-demo-pill {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.03);
    color: #94A3B8;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.contact-demo-pill:hover {
    transform: translateY(-2px) scale(1.02);
    border-color: rgba(94, 234, 212, 0.5);
    color: #FFFFFF;
    background: rgba(94, 234, 212, 0.08);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.contact-demo-pill.selected {
    background: rgba(94, 234, 212, 0.16);
    border-color: #5EEAD4;
    color: #5EEAD4;
    box-shadow: 0 0 16px rgba(94, 234, 212, 0.22);
    transform: translateY(-1px);
}

.light-mode .contact-demo-pill {
    background: #F8FAFC;
    border-color: #E2E8F0;
    color: #475569;
}

.light-mode .contact-demo-pill:hover {
    background: rgba(15, 118, 110, 0.06);
    border-color: #0F766E;
    color: #0F766E;
}

.light-mode .contact-demo-pill.selected {
    background: rgba(15, 118, 110, 0.12);
    border-color: #0F766E;
    color: #0F766E;
    box-shadow: 0 2px 10px rgba(15, 118, 110, 0.12);
}

/* Checkbox */
.contact-checkbox-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.contact-checkbox-group:hover {
    transform: translateX(2px);
}

.contact-checkbox-group input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #14B8A6;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-checkbox-group input[type="checkbox"]:active {
    transform: scale(0.9);
}

.contact-checkbox-text {
    font-size: 13.5px;
    color: #94A3B8;
    transition: color 0.2s ease;
}

.contact-checkbox-group:hover .contact-checkbox-text {
    color: #CBD5E1;
}

.light-mode .contact-checkbox-text {
    color: #64748B;
}

.contact-checkbox-text a {
    color: #5EEAD4;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s ease;
}

.contact-checkbox-text a:hover {
    color: #2DD4BF;
}

.light-mode .contact-checkbox-text a {
    color: #0F766E;
}

/* Submit Button with Shimmer Glare & Micro-Interactions */
.contact-submit-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 15px 24px;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: #192231;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

/* Sliding Light Glare on Button Hover */
.contact-submit-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-22deg);
    transition: none;
    pointer-events: none;
}

.contact-submit-btn:hover::after {
    left: 150%;
    transition: left 0.75s ease-in-out;
}

.contact-submit-btn:hover {
    background: #233045;
    border-color: #5EEAD4;
    box-shadow: 0 10px 28px rgba(94, 234, 212, 0.25);
    transform: translateY(-2px);
}

.contact-submit-btn svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-submit-btn:hover svg {
    transform: translateX(5px);
}

.contact-submit-btn:active {
    transform: translateY(0) scale(0.985);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.light-mode .contact-submit-btn {
    background: #1E293B;
    border-color: #1E293B;
    color: #FFFFFF;
}

.light-mode .contact-submit-btn:hover {
    background: #0F172A;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}

.contact-submit-btn.demo-mode-btn {
    background: linear-gradient(135deg, #5EEAD4 0%, #2DD4BF 100%);
    color: #08101E;
    border-color: #5EEAD4;
}

.contact-submit-btn.demo-mode-btn:hover {
    background: linear-gradient(135deg, #2DD4BF 0%, #14B8A6 100%);
    box-shadow: 0 10px 30px rgba(94, 234, 212, 0.45);
}

.light-mode .contact-submit-btn.demo-mode-btn {
    background: linear-gradient(135deg, #0F766E 0%, #0D9488 100%);
    color: #FFFFFF;
    border-color: #0F766E;
}

.light-mode .contact-submit-btn.demo-mode-btn:hover {
    background: linear-gradient(135deg, #115E59 0%, #0F766E 100%);
    box-shadow: 0 10px 25px rgba(15, 118, 110, 0.3);
}

/* Instant Calendar Shortcut */
.contact-calendar-shortcut {
    margin-top: 18px;
    text-align: center;
}

.contact-calendar-link {
    font-size: 13.5px;
    font-weight: 600;
    color: #5EEAD4;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.05);
    border: 1px solid rgba(94, 234, 212, 0.14);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-calendar-link svg {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.contact-calendar-link:hover {
    color: #FFFFFF;
    background: rgba(94, 234, 212, 0.14);
    border-color: #5EEAD4;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(94, 234, 212, 0.18);
}

.contact-calendar-link:hover svg {
    transform: scale(1.15) rotate(-6deg);
}

.light-mode .contact-calendar-link {
    color: #0F766E;
    background: rgba(15, 118, 110, 0.06);
    border-color: rgba(15, 118, 110, 0.18);
}

.light-mode .contact-calendar-link:hover {
    color: #047857;
    background: rgba(15, 118, 110, 0.12);
    border-color: #0F766E;
}

/* Right Column: Services benefits checklist & Locations */
.contact-info-col {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-top: 8px;
}

.contact-services-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.light-mode .contact-services-box h3 {
    color: #0F172A;
}

.contact-checklist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-check-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: 15px;
    line-height: 1.5;
    color: #CBD5E1;
}

.light-mode .contact-check-item {
    color: #334155;
}

.contact-check-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
    color: #5EEAD4;
}

.light-mode .contact-check-icon {
    color: #0F766E;
}

/* Locations Subgrid */
.contact-locations-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}

.contact-location-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 20px;
    transition: all 0.25s ease;
}

.contact-location-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(94, 234, 212, 0.25);
    transform: translateY(-2px);
}

.light-mode .contact-location-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

.light-mode .contact-location-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.contact-location-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.light-mode .contact-location-header {
    color: #0F172A;
}

.contact-location-pin {
    color: #5EEAD4;
}

.light-mode .contact-location-pin {
    color: #0F766E;
}

.contact-location-address {
    font-size: 13.5px;
    line-height: 1.6;
    color: #94A3B8;
    margin: 0;
}

.light-mode .contact-location-address {
    color: #64748B;
}

/* Bottom Direct Contact Channels */
.contact-channels-section {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding-top: 48px;
    margin-top: 20px;
    text-align: center;
}

.light-mode .contact-channels-section {
    border-top: 1px solid #E2E8F0;
}

.contact-channels-title {
    font-size: 16px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 24px;
}

.light-mode .contact-channels-title {
    color: #0F172A;
}

.contact-channels-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.contact-channel-card {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(14, 23, 42, 0.45);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 10px 24px 10px 12px;
    text-decoration: none;
    color: inherit;
    transition: all 0.25s ease;
}

.contact-channel-card:hover {
    border-color: #5EEAD4;
    background: rgba(94, 234, 212, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(94, 234, 212, 0.15);
}

.light-mode .contact-channel-card {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.light-mode .contact-channel-card:hover {
    border-color: #0F766E;
    box-shadow: 0 6px 16px rgba(15, 118, 110, 0.1);
}

.contact-channel-icon-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    transition: all 0.2s ease;
}

.contact-channel-card:hover .contact-channel-icon-circle {
    background: #5EEAD4;
    color: #08101E;
}

.light-mode .contact-channel-icon-circle {
    background: #F1F5F9;
    color: #0F172A;
}

.light-mode .contact-channel-card:hover .contact-channel-icon-circle {
    background: #0F766E;
    color: #FFFFFF;
}

.contact-channel-text {
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
}

.light-mode .contact-channel-text {
    color: #0F172A;
}

/* Success Alert / State */
.contact-success-state {
    display: none;
    text-align: center;
    padding: 32px 16px;
    animation: successPopIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes successPopIn {
    0% {
        opacity: 0;
        transform: scale(0.88) translateY(12px);
    }
    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.contact-success-icon {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(94, 234, 212, 0.16);
    border: 2px solid #5EEAD4;
    color: #5EEAD4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 0 25px rgba(94, 234, 212, 0.35);
    animation: successPulse 2s ease-out infinite;
}

@keyframes successPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(94, 234, 212, 0.55);
    }
    70% {
        box-shadow: 0 0 0 18px rgba(94, 234, 212, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(94, 234, 212, 0);
    }
}

.contact-success-title {
    font-size: 22px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.light-mode .contact-success-title {
    color: #0F172A;
}

.contact-success-desc {
    font-size: 15px;
    line-height: 1.6;
    color: #94A3B8;
    max-width: 420px;
    margin: 0 auto 24px;
}

.light-mode .contact-success-desc {
    color: #475569;
}

@media (max-width: 960px) {
    .contact-title {
        font-size: 38px;
    }
}

@media (max-width: 640px) {
    .contact-hero-section {
        padding: 110px 16px 60px;
    }
    .contact-form-card {
        padding: 28px 18px 32px;
        border-radius: 20px;
    }
    .contact-locations-grid {
        grid-template-columns: 1fr;
    }
    .contact-channels-grid {
        flex-direction: column;
    }
    .contact-channel-card {
        width: 100%;
        box-sizing: border-box;
    }
}