/* 5. Color Palette - Dark Mode Enterprise B2B */
:root {
    /* Deep Enterprise Navy - Darker for contrast */
    --color-dark-bg: #0d1b2a;
    --color-card-bg: rgba(26, 43, 68, 0.7);
    /* Semi-transparent for glassmorphism */

    /* Text Colors */
    --color-text-primary: #ffffff;
    --color-text-secondary: #b0b8c4;
    --color-text-dark: #0f172a;
    /* Added for light backgrounds */

    /* Accents (Preserved) */
    --color-primary-blue: #007aff;
    --color-primary-glow: rgba(0, 122, 255, 0.5);
    --color-accent-teal: #00a99d;
    --color-accent-glow: rgba(0, 169, 157, 0.5);
    --color-danger-red: #e63946;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-hover: rgba(0, 122, 255, 0.3);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--color-dark-bg);
    color: var(--color-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    background-image:
        radial-gradient(circle at 15% 50%, rgba(0, 122, 255, 0.08) 0%, transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(0, 169, 157, 0.08) 0%, transparent 25%);
    background-attachment: fixed;
}

.container {
    width: 90%;
    max-width: 1200px;
    /* Slightly wider for modern feel */
    margin: 0 auto;
    padding: 2rem 0;
    /* Reduced from 6rem (96px) to 2rem (32px) */
}

section {
    border-bottom: 1px solid var(--color-border);
}

section:last-of-type {
    border-bottom: none;
}

/* 4. Typography */
h1,
h2,
h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

h1 {
    font-size: 4rem;
    background: linear-gradient(135deg, #ffffff 0%, #b0b8c4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

h2 {
    font-size: 2.75rem;
}

h3 {
    font-size: 1.75rem;
}

p {
    font-size: 1.125rem;
    color: #444;
    /* Darker grey for better contrast on white */
    margin-bottom: 1rem;
}

.sub-headline {
    font-size: 1.5rem;
    color: var(--color-primary-blue);
    max-width: 800px;
    margin-bottom: 2rem;
    font-weight: 500;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    max-width: 700px;
    margin-bottom: 2.5rem;
    line-height: 1.7;
}

/* Header - Glassmorphism */
/* Header - Glassmorphism */
/* Header - Glassmorphism */
/* Header - Glassmorphism */
header {
    position: fixed;
    /* Ensure it stays fixed */
    top: 1rem;
    /* Floating effect */
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1400px;
    z-index: 99999;
    /* MAX Z-INDEX */
    background: rgba(13, 27, 42, 0.8);
    /* Semi-transparent dark background */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* UPDATED: Blue border as requested */
    border: 1px solid rgba(0, 122, 255, 0.3);
    box-shadow: 0 0 15px rgba(0, 122, 255, 0.1);
    border-radius: 50px;
    /* Pill shape */
    padding: 0.5rem 1.5rem;
    /* Compact padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* CRITICAL: Allow dropdowns to overflow */
    overflow: visible !important;
    transition: transform 0.3s ease, background 0.3s ease, opacity 0.3s ease;
    pointer-events: auto;
    /* FORCE POINTER EVENTS */
}

/* ... (rest of header styles) ... */

.nav-link,
.solutions-trigger {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    margin-right: 2rem;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.5rem 0;
    /* Increase hit area */
    position: relative;
    /* For the blue line */
    display: flex;
    align-items: center;
    height: 100%;
    pointer-events: auto;
    /* FORCE POINTER EVENTS */
    z-index: 2;
    /* Ensure above other things */
}

/* ... (rest of nav styles) ... */

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    /* Position right below the header */
    left: 0;
    background-color: var(--color-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 100000;
    /* SUPER HIGH Z-INDEX */
    padding: 0.5rem 0;
    border: 1px solid var(--color-border);
    /* Removed JS transition props to simplify */
    pointer-events: auto;
    /* FORCE POINTER EVENTS */
}

/* Pure CSS Hover */
.solutions-dropdown:hover .dropdown-content,
.dropdown-content:hover {
    display: block;
}

/* Hidden state for scroll down */
header.nav-hidden {
    transform: translate(-50%, -200%);
    /* Move up and out of view, keeping X centering */
    opacity: 0;
}

/* Ensure scrolled state doesn't hide it, but adds background */
header.scrolled {
    background: rgba(13, 27, 42, 0.95);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.header-left {
    display: flex;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 2rem;
}

.logo-img,
.nav-icon {
    width: 48px;
    height: 48px;
    margin-right: 0.75rem;
    object-fit: contain;
    /* UPDATED: Make icon round */
    border-radius: 50%;
}

.logo-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
    letter-spacing: -0.03em;
    line-height: 1;
    white-space: nowrap;
}

/* New Solutions Dropdown */
nav {
    display: flex;
    align-items: center;
    margin-left: 2rem;
    height: 100%;
    /* Ensure full height for hover targets */
}

.nav-link,
.solutions-trigger {
    color: var(--color-text-secondary);
    text-decoration: none;
    font-weight: 500;
    margin-right: 2rem;
    font-size: 0.95rem;
    transition: color 0.3s ease;
    background: none;
    border: none;
    cursor: pointer;
    padding: 1.5rem 0;
    /* Increase hit area */
    position: relative;
    /* For the blue line */
    display: flex;
    align-items: center;
    height: 100%;
}

.nav-link:hover,
.solutions-trigger:hover,
.solutions-trigger.active {
    color: #fff;
}

/* Blue Line Hover Effect */
.nav-link::after,
.solutions-trigger::after {
    content: '';
    position: absolute;
    bottom: 0.5rem;
    /* Adjust position inside pill */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--color-primary-blue);
    transform: scaleX(0);
    transition: transform 0.3s ease;
    transform-origin: center;
    border-radius: 2px;
}

.nav-link:hover::after,
.solutions-trigger:hover::after,
.solutions-trigger.active::after {
    transform: scaleX(1);
}

/* Remove old arrow */
/* .solutions-trigger::after { ... } REMOVED */

.cta-button {
    background: linear-gradient(135deg, #007aff 0%, #00a99d 100%);
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 122, 255, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 122, 255, 0.5);
}

.solutions-dropdown {
    position: relative;
    height: 100%;
    /* Ensure full height */
    display: flex;
    align-items: center;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    /* Position right below the header */
    left: 0;
    background-color: var(--color-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    min-width: 220px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    /* Extremely high z-index */
    padding: 0.5rem 0;
    border: 1px solid var(--color-border);
    /* REMOVED: margin-top: 0.5rem; - This causes a gap where hover is lost */
}

/* Bridge the gap so hover isn't lost */
.solutions-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 20px;
    /* Invisible bridge area */
    background: transparent;
    z-index: 1;
}

.dropdown-content {
    display: none;
    position: absolute;
    top: 100%;
    /* Center the dropdown relative to the header (which is already centered) */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-card-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    /* Constrain width to be reasonable */
    width: 90vw;
    max-width: 1000px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 100000;
    /* SUPER HIGH Z-INDEX */
    padding: 0;
    /* Remove padding here, let children handle it */
    border: 1px solid var(--color-border);
    pointer-events: auto;
    margin-top: 1rem;
    /* Add a slight gap visually, but bridge handles hover */
}

/* Pure CSS Hover */
.solutions-dropdown:hover .dropdown-content,
.dropdown-content:hover {
    display: block;
}

.dropdown-item {
    font-family: 'Inter', sans-serif;
    /* Updated font */
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    padding: 0.75rem 1.5rem;
    text-decoration: none;
    display: block;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-primary-blue);
    /* Updated color */
    padding-left: 1.75rem;
    /* Slide effect */
}

/* --- MEGA MENU STYLES (Redesigned) --- */

/* HOVER FIX: Bridge the gap */
.solutions-dropdown {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

.solutions-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 40px;
    /* Large bridge to ensure mouse catches it */
    background: transparent;
    z-index: 1000;
}

.solutions-dropdown:hover .dropdown-content.mega-menu {
    display: flex;
    /* Show as flex on hover */
    animation: slideDown 0.3s ease-out;
}

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

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

/* Mega Menu Dropdown - Full Width */
.dropdown-content.mega-menu {
    position: fixed !important;
    top: 90px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95% !important;
    /* Match header width */
    max-width: 1400px !important;
    /* Match header max-width */
    height: auto;
    max-height: 80vh;
    right: auto !important;
    background-color: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 999999;
    /* Ensure on top of everything */
    display: none;
    /* Hidden by default */
    flex-direction: column;
    overflow: hidden;
    /* Prevent outer scroll */
    border-radius: 12px;
    /* Match other dropdowns */
}

/* Header inside Mega Menu */
.mega-menu-header {
    padding: 1.5rem 2.5rem;
    /* Restored padding */
    border-bottom: 1px solid #eee;
    background: #fff;
    flex-shrink: 0;
}

.mega-menu-header h3 {
    font-size: 1.4rem;
    /* Larger header */
    color: #111;
    margin-bottom: 0.5rem;
    font-weight: 700;
}

.mega-menu-header p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 0;
}

/* NEW: Grid Wrapper */
.mega-menu-grid {
    display: grid;
    grid-template-columns: 300px 1fr 320px;
    /* Wider columns */
    flex: 1;
    /* Take remaining height */
    min-height: 0;
    /* CRITICAL: Allow flex child to scroll */
    overflow: hidden;
    /* Contain scrolls */
}

/* SCROLLBAR HIDING MIXIN */
.no-scrollbar {
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.no-scrollbar::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

/* Column 1: Navigation */
.mega-menu-nav {
    background-color: #ffffff;
    /* White */
    padding: 2rem;
    /* Larger padding */
    border-right: 1px solid #eee;
    overflow-y: auto;
    /* Scroll if too long */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.mega-menu-nav::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.mega-menu-item {
    display: flex;
    /* Align icon and text */
    align-items: center;
    padding: 1rem 1.25rem;
    /* Larger item padding */
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: #555;
    /* Dark text */
    text-decoration: none;
    border: none;
    margin-bottom: 0.5rem;
    width: 100%;
    text-align: left;
    background: none;
}

/* NEW: Navigation Category Headers */
.nav-category {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #999;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    padding-left: 1.25rem;
}

.nav-category:first-child {
    margin-top: 0;
}

.mega-menu-item i {
    margin-right: 1rem;
    width: 24px;
    text-align: center;
    color: #888;
    font-size: 1.1rem;
    flex-shrink: 0;
    /* Prevent icon shrinking */
}

.mega-menu-item:hover,
.mega-menu-item.active {
    background-color: #f0f7ff;
    /* Light blue hover */
    color: var(--color-primary-blue);
}

.mega-menu-item:hover i,
.mega-menu-item.active i {
    color: var(--color-primary-blue);
}

.mega-menu-item strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0;
}

.mega-menu-item small {
    display: none;
}

/* Column 2: Content Panels */
.mega-menu-panels {
    padding: 2.5rem 3rem;
    /* Larger padding */
    background-color: #ffffff;
    overflow-y: auto;
    /* Scroll if too long */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.mega-menu-panels::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.mega-menu-panel {
    display: none;
    /* Hidden by default */
    animation: fadeIn 0.3s ease-out;
}

.mega-menu-panel.active {
    display: block;
}

.mega-menu-panel h4 {
    color: #111;
    /* Dark Heading */
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
    font-weight: 700;
}

.mega-menu-panel p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* NEW: Solution Grid */
.solution-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem;
    /* Larger gap */
}

.solution-card h5 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary-blue);
    margin-bottom: 0.5rem;
}

.solution-card p {
    color: #666;
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Column 3: Promo (New) */
.mega-menu-promo {
    background-color: #f8f9fa;
    /* Light gray bg */
    padding: 2rem;
    /* Larger padding */
    border-left: 1px solid #eee;
    overflow-y: auto;
    /* Scroll if too long */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE 10+ */
}

.mega-menu-promo::-webkit-scrollbar {
    display: none;
    /* Chrome/Safari */
}

.mega-menu-promo h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.1rem;
    color: #111;
    margin-bottom: 0.5rem;
}

.mega-menu-promo p {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 1.5rem;
}

/* Solution Section */
.solution {
    padding: 4rem 0;
    background-color: #f9f9f9;
    /* Light background */
}

.solution h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #0a0a0a;
    /* UPDATED: Dark color for visibility */
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.promo-card {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #eee;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    /* Remove underline */
}

.promo-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary-blue);
}

.promo-icon {
    font-size: 1.2rem;
    margin-right: 1rem;
    background: linear-gradient(135deg, #eef2ff 0%, #f0f7ff 100%);
    color: var(--color-primary-blue);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    flex-shrink: 0;
}

.promo-text {
    flex: 1;
}

.promo-card strong {
    display: block;
    color: #111;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.promo-card small {
    font-size: 0.85rem;
    color: #666;
    line-height: 1.5;
    display: block;
}

/* --- END MEGA MENU STYLES --- */

/* Call to Action Button - Modern Glow */
.cta-button {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-accent-teal) 100%);
    padding: 0.8rem 2rem;
    border-radius: 50px;
    /* Pill shape */
    transition: all 0.3s ease;
    margin-left: 1rem;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--color-primary-glow);
}

.cta-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--color-accent-glow);
    filter: brightness(1.1);
}

/* Hero Section */
.hero {
    padding-top: 8rem;
    padding-bottom: 8rem;
    background-color: transparent;
    /* Uses body gradient */
    position: relative;
}

.hero h1 {
    color: var(--color-white);
}

.hero-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    gap: 3rem;
}

/* UPDATED: Hero Logo Container - Responsive & Embedded */
.hero-logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    /* Space between icon and text */
    position: relative;
    /* Fix for pseudo-element covering header */
}

.nav-icon {
    width: 48px;
    /* Match standard button height */
    height: 48px;
    object-fit: contain;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.5px;
    line-height: 1;
    /* Prevent wrapping issues */
    white-space: nowrap;
}

.text-blue {
    color: var(--color-primary-blue);
}

/* Glow Effect for "Embedded" feel */
.hero-logo-container::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(0, 122, 255, 0.12) 0%, transparent 70%);
    filter: blur(60px);
    z-index: 1;
    border-radius: 50%;
}

/* UPDATED: Hero Logo */
.hero-logo {
    width: 100%;
    height: auto;
    object-fit: contain;
    z-index: 2;
    /* Subtle drop shadow to lift it slightly */
    filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.3));
}

/* Sparkle Animation - REMOVED */
/* .sparkles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.sparkle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary-blue);
    border-radius: 50%;
    opacity: 0;
    animation: sparkle-anim 2s infinite ease-out;
}
.sparkle:nth-child(2) { animation-delay: 0.4s; }
.sparkle:nth-child(3) { animation-delay: 0.8s; }
.sparkle:nth-child(4) { animation-delay: 1.2s; }
.sparkle:nth-child(5) { animation-delay: 1.6s; }
@keyframes sparkle-anim {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    80% {
        transform: translate(-50%, -50%) scale(15);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
} */

/* How It Works / Roadmap Section - Light Theme */
#telemetry {
    background-color: #f8f9fa;
    /* Very Light Grey Transition */
    padding: 6rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.solid-data-subheadline {
    font-size: 1.5rem;
    color: var(--color-primary-blue);
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    max-width: 900px;
    margin: 0 auto 3rem auto;
}

.how-it-works-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 3rem;
}

.how-it-works-step {
    padding: 2.5rem;
    border: 1px solid #e0e0e0;
    /* Light border */
    background-color: #ffffff;
    /* White background */
    border-radius: 16px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    /* Subtle shadow */
}

.how-it-works-step:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    border-color: var(--color-primary-blue);
}

.step-number {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-blue);
    margin-bottom: 0.5rem;
}

.how-it-works-step h3 {
    color: #111;
    /* Dark text */
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.how-it-works-step p,
.how-it-works-step li {
    color: #333;
    /* Darker text for readability */
}

/* New Security Section */
.security {
    background-color: transparent;
}

.security-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.security-col {
    padding: 2.5rem;
    border: 1px solid #e0e0e0;
    /* Light border */
    background-color: #ffffff;
    /* White background */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    /* Subtle shadow */
}

.security-col h3 {
    color: var(--color-primary-blue);
    /* Updated color */
    margin-bottom: 1.5rem;
}

.security-feature {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.security-icon {
    width: 28px;
    height: 28px;
    color: var(--color-primary-blue);
    /* Updated color */
    margin-right: 1rem;
    flex-shrink: 0;
    margin-top: 4px;
}

.security-feature h4 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    color: #111;
    /* UPDATED: Dark text for visibility */
    margin-bottom: 0.25rem;
}

.security-feature p {
    font-size: 1rem;
    margin-bottom: 0;
}


/* --- TEAM ACCORDION SECTION (NEW) --- */
.team-section {
    padding: 6rem 0;
    /* Enterprise Dark Blue Background */
    background: #0d1b2a;
    color: #fff;
    overflow: hidden;
    /* Prevent overflow from expanding cards */
}

.team-gallery-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    height: 500px;
    /* Fixed height for the strip */
    display: flex;
    justify-content: center;
}

.team-gallery {
    display: flex;
    width: 100%;
    height: 100%;
    gap: 1rem;
    /* Gap between cards */
}

.team-card {
    position: relative;
    height: 100%;
    flex: 1;
    /* Default state: equal width */
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: flex 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
    /* Group transition mainly for flex */
    /* Base background for the card */
    background: linear-gradient(180deg, rgba(88, 101, 242, 0.4) 0%, rgba(88, 101, 242, 0.8) 100%);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* Hover State: Expansion */
/* When hovering over the container, non-hovered items shrink slightly? No, let's keep it simple: 
   The hovered item grows. */
/* Hover/Active: Expansion */
.team-card:hover,
.team-card.active {
    flex: 3;
    /* Expands to 3x width */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Force Collapsed State when explicitly closed (overrides hover) */
.team-card.explicit-close {
    flex: 1 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
}

/* Default state: showing only the bottom portrait */
/* Default state: showing only the bottom portrait centered */
.team-card-image {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    /* Soft fade at the bottom for default state text */
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    transition: all 0.5s ease;
}

/* Hover: Move image to the right */
/* Hover/Active: Move image to the LEFT for Split Layout */
.team-card:hover .team-card-image,
.team-card.active .team-card-image {
    background-position: center bottom;
    width: 40%;
    /* Take up left 40% */
    left: 0;
    transform: none;
    mask-image: none;
    -webkit-mask-image: none;
    z-index: 5;
    /* Ensure above overlay background if needed, but overlay is right side now */
}

/* Text Content Wrapper */
.team-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Default: Darker at bottom for collapsed text */
    background: linear-gradient(to bottom, rgba(13, 27, 42, 0) 50%, rgba(13, 27, 42, 0.9) 100%);
    transition: all 0.5s ease;
    z-index: 2;
}

/* Hover: Hard gradient from Left to Right to make text readable */
/* Hover/Active: Hard gradient from Left to Right to make text readable */
/* Hover/Active: Right Content Panel (White Background) */
.team-card:hover .team-card-overlay,
.team-card.active .team-card-overlay {
    justify-content: center;
    align-items: flex-start;
    padding: 3rem;

    /* Position on the RIGHT side */
    width: 60%;
    left: 40%;

    /* White Background as requested */
    background: #f8f9fa;
    color: #111;
    /* Dark Text */
}

/* Collapsed Info (Visible by default at bottom) */
/* Collapsed Info (Vertical Text) */
.team-info-collapsed {
    text-align: center;
    transition: opacity 0.3s ease;
    padding-bottom: 2rem;

    /* Vertical Text Restore */
    writing-mode: vertical-rl;
    text-orientation: mixed;
    transform: rotate(180deg);
    max-height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0.5rem;
}

.team-info-collapsed h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 1rem 0;
    color: rgba(255, 255, 255, 0.9);
    white-space: nowrap;
    text-shadow: none;
}

.team-info-collapsed span {
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--color-primary-blue);
}

/* Expanded Info (Hidden by default) */
.team-info-expanded {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease 0.1s;
    /* Delay slightly */
    display: none;
    /* remove from flow when collapsed */
    max-width: 400px;
}

.team-card:hover .team-info-collapsed,
.team-card.active .team-info-collapsed {
    opacity: 0;
    /* Hide collapsed info */
    display: none;
}

.team-card:hover .team-info-expanded,
.team-card.active .team-info-expanded {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.team-info-expanded blockquote {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.25rem;
    font-weight: 700;
    color: #111;
    /* Dark text for white bg */
    border-left: 4px solid var(--color-primary-blue);
    padding-left: 1rem;
    margin-bottom: 1.5rem;
    line-height: 1.4;
}

.team-info-expanded h3 {
    font-size: 1.5rem;
    margin-bottom: 0.25rem;
    color: #000;
    /* Dark text */
}

.team-info-expanded .role {
    display: block;
    font-size: 1rem;
    color: #666;
    /* Grey text */
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
}

.team-info-expanded .linkedin-icon {
    font-size: 1.75rem;
    color: #0077b5;
    /* LinkedIn Blue */
    transition: transform 0.3s ease;
}

.team-info-expanded .linkedin-icon:hover {
    transform: scale(1.1);
    color: #005582;
}

/* Dot Pattern Background Overlay (Optional, matching ref) */
.team-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

.team-card-image {
    z-index: 0;
}

.team-card-overlay {
    z-index: 2;
}



/* --- BENTO BOX SECTION --- */
.bento-section {
    padding: 4rem 0;
    background-color: #0a0a0a;
    /* Dark background */
    color: #fff;
}

.bento-header {
    text-align: center;
    margin-bottom: 3rem;
}

.bento-header h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    background: linear-gradient(90deg, #fff, #aaa);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* --- COOKIE CONSENT STYLES --- */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    padding: 1.5rem;
    z-index: 10000;
    display: none;
    /* Hidden by default, shown via JS */
    font-family: 'Inter', sans-serif;
}

.cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
}

.cookie-content p {
    margin: 0;
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
}

.cookie-buttons {
    display: flex;
    gap: 1rem;
    flex-shrink: 0;
}

.cookie-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cookie-btn.outline {
    background: transparent;
    border: 1px solid #ccc;
    color: #333;
}

.cookie-btn.outline:hover {
    border-color: #999;
    background-color: #f5f5f5;
}

.cookie-btn.primary {
    background-color: #1a73e8;
    /* CookieYes Blue */
    border: 1px solid #1a73e8;
    color: #fff;
}

.cookie-btn.primary:hover {
    background-color: #1557b0;
}

/* Modal Styles */
.cookie-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10001;
    display: none;
    justify-content: center;
    align-items: center;
}

.cookie-modal-content {
    background-color: #fff;
    width: 90%;
    max-width: 700px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.cookie-modal-header {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cookie-modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
    color: #333;
}

.cookie-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

.cookie-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
}

.cookie-intro {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.cookie-category {
    border: 1px solid #eee;
    border-radius: 6px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.cookie-cat-header {
    padding: 1rem;
    background-color: #fff;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.cookie-cat-header:hover {
    background-color: #f9f9f9;
}

.cat-toggle {
    margin-right: 1rem;
    font-weight: bold;
    color: #666;
    transition: transform 0.2s ease;
}

.cat-toggle.expanded {
    transform: rotate(90deg);
}

.cat-name {
    flex: 1;
    font-weight: 600;
    color: #333;
}

.cat-status {
    font-size: 0.8rem;
    font-weight: 600;
}

.cat-status.active {
    color: #1a73e8;
    /* Green in screenshot, but usually brand color or green */
    color: #28a745;
    /* Let's use green for "Always Active" */
}

.cookie-cat-desc {
    padding: 1rem;
    background-color: #f9f9f9;
    border-top: 1px solid #eee;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.5;
}

.cookie-cat-desc.hidden {
    display: none;
}

/* Switch Toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 24px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: .4s;
}

input:checked+.slider {
    background-color: #1a73e8;
}

input:focus+.slider {
    box-shadow: 0 0 1px #1a73e8;
}

input:checked+.slider:before {
    transform: translateX(16px);
}

.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

.cookie-modal-footer {
    padding: 1.5rem;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    background-color: #fff;
}

.cookie-powered {
    text-align: center;
    padding: 0.5rem;
    font-size: 0.75rem;
    color: #999;
    background-color: #f5f5f5;
    border-top: 1px solid #eee;
}

/* Responsive Cookie Banner */
@media (max-width: 768px) {
    .cookie-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-buttons {
        width: 100%;
        justify-content: space-between;
    }

    .cookie-btn {
        flex: 1;
        text-align: center;
        padding: 0.8rem;
    }
}

/* --- BENTO BOX SECTION (Light Mode) --- */
.bento-section {
    padding: 2.5rem 0;
    background-color: #ffffff;
    /* Light background */
    color: #111;
    border-bottom: 1px solid #e2e8f0;
}

.bento-header {
    text-align: center;
    margin-bottom: 2rem;
}

.bento-header h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #0f172a;
    /* Dark Slate for contrast */
    background: none;
    -webkit-text-fill-color: initial;
    letter-spacing: -0.02em;
}

.bento-header p {
    font-size: 1.1rem;
    color: #334155;
    /* Slate 700 for readability */
    max-width: 650px;
    margin: 0 auto;
    line-height: 1.5;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Changed to 2 for balanced 2x2 layout */
    gap: 1.25rem;
}

.bento-item {
    background: rgba(255, 255, 255, 0.05);
    /* Semi-transparent background */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.bento-item:hover {
    background: rgba(255, 255, 255, 0.08);
    transform: translateY(-5px);
    border-color: var(--color-primary-blue);
}

.bento-item h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
}

.bento-item p {
    color: #cbd5e1;
    /* Light grey for readability */
    font-size: 1rem;
    line-height: 1.6;
}

.bento-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary-blue);
}

.bento-tile {
    background-color: #f8fafc;
    /* Slate 50 */
    border: 1px solid #e2e8f0;
    /* Slate 200 */
    border-radius: 12px;
    overflow: hidden;
    display: block;
    /* Reset flex */
    background-color: transparent;
    perspective: 1000px;
    /* Enable 3D perspective */
    min-height: 320px;
    /* Essential for absolute positioning of faces */
    border: none;
    box-shadow: none;
    padding: 0;
}

/* 3D Inner Wrapper */
.flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    border-radius: 12px;
}

.flip-container:hover .flip-inner {
    transform: rotateY(180deg);
}

/* Use inner for shadow/border now */
.flip-inner {
    background-color: #fff;
    border: 1px solid #e2e8f0;
}

.flip-container:hover .flip-inner {
    border-color: var(--color-primary-blue);
    box-shadow: 0 20px 25px -5px rgba(59, 130, 246, 0.15), 0 8px 10px -6px rgba(59, 130, 246, 0.1);
}

/* Faces */
.flip-front,
.flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.flip-front {
    background-color: #ffffff;
    /* Front content styling */
}

.flip-back {
    background-color: #f8fafc;
    color: #334155;
    transform: rotateY(180deg);
    padding: 2rem;
    text-align: center;
}

/* Front Content */
.front-content {
    padding: 1.5rem;
}

.front-content h3 {
    margin: 0;
    font-size: 1.35rem;
    color: #0f172a;
}

/* Back Content alignment */
.back-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.back-content p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #475569;
}

/* Tile Sizes */
.tile-large {
    grid-column: span 1;
    grid-row: span 1;
}

.tile-medium {
    grid-column: span 1;
    grid-row: span 1;
}

.tile-small {
    grid-column: span 1;
    grid-row: span 1;
}

/* Tile Content */
/* Tile visual now part of front face */
.tile-visual {
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
}

.tile-visual img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 160px;
    /* Constrain height drastically */
    object-fit: contain;
    /* UPDATED: Ensure full image is visible */
    padding: 1rem;
    /* UPDATED: Reduced padding to make icons larger */
    opacity: 1;
    /* UPDATED: Full opacity for clear icons */
    transition: transform 0.5s ease;
}

.tile-large .tile-visual img {
    max-height: 160px;
    /* Reset to match others */
}

.bento-tile:hover .tile-visual img {
    transform: scale(1.05);
    /* Subtle zoom */
}

.tile-content {
    padding: 1.5rem;
    background: transparent;
    /* White background */
    position: relative;
    width: 100%;
}

.tile-content h3 {
    color: #0f172a !important;
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}

.tile-content p {
    color: #334155 !important;
    font-size: 0.95rem;
    line-height: 1.5;
}

.tile-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0.35rem 0.85rem;
    background-color: rgba(59, 130, 246, 0.08);
    color: var(--color-primary-blue);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 100px;
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

.status-dot {
    width: 6px;
    height: 6px;
    background-color: #22c55e;
    /* Green-500 */
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(34, 197, 94, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.tile-content h3 {
    font-size: 1.25rem;
    /* UPDATED: Smaller font size (was 1.5rem implied) */
    margin-bottom: 0.5rem;
    color: #fff;
    font-weight: 700;
}

.tile-content p {
    font-size: 0.9rem;
    /* UPDATED: Smaller font size (was 1rem implied) */
    color: #e2e8f0;
    margin-bottom: 0;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 992px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    .tile-large {
        grid-column: span 2;
        height: 400px;
    }

    .tile-medium,
    .tile-small {
        grid-column: span 1;
        height: 300px;
    }
}

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

    .tile-large,
    .tile-medium,
    .tile-small {
        grid-column: span 1;
        height: 350px;
    }
}

/* Consequences Grid Section */
.consequences-section {
    padding: 5rem 0;
    background-color: #ffffff;
    border-bottom: 1px solid #e2e8f0;
}

.consequences-header {
    text-align: center;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 4rem;
    color: #0f172a;
    letter-spacing: -0.02em;
}

.consequences-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 1100px;
    margin: 0 auto;
}

/* Individual Cells (Quadrants) */


.consequence-item {
    padding: 0 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-right: 1px dashed #cbd5e1;
    /* The dotted divider */
}

.consequence-item:last-child {
    border-right: none;
}

.consequence-icon {
    width: 3.5rem;
    height: 3.5rem;
    background-color: #f8fafc;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    color: #64748b;
    margin-bottom: 1.5rem;
    border: 1px solid #e2e8f0;
}

.consequence-content h3 {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.consequence-metric {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.5rem;
    line-height: 1.2;
}

.consequence-desc {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 768px) {
    .consequences-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .consequence-item {
        border-right: none;
        border-bottom: 1px dashed #cbd5e1;
        padding: 0 0 3rem 0;
        align-items: center;
        text-align: center;
    }

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

/* Product Family Section */
.product-family {
    background-color: #f8fafc;
    /* Slate 50 */
    padding: 6rem 0;
}

.product-family h2 {
    color: #0f172a;
    /* Dark Slate */
    margin-bottom: 1rem;
    font-size: 2.5rem;
}

.product-family p {
    color: #475569;
    /* Slate 600 */
    font-size: 1.1rem;
}

.product-family-layout {
    display: grid;
    grid-template-columns: 1fr;
    /* Mobile default: stacked */
    gap: 0;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.05);
}

.pf-nav {
    display: flex;
    flex-direction: row;
    /* Mobile: Horizontal scroll */
    overflow-x: auto;
    padding: 1rem;
    background-color: #f1f5f9;
    /* Slate 100 */
    border-bottom: 1px solid #e2e8f0;
}

.pf-nav-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #64748b;
    /* Slate 500 */
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    margin-right: 0.5rem;
    display: flex;
    align-items: center;
}

.pf-nav-item:hover {
    background-color: #e2e8f0;
    color: #334155;
}

.pf-nav-item.active {
    color: #0f172a;
    background-color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    font-weight: 700;
}

.pf-content {
    padding: 2.5rem;
    min-height: 400px;
    /* Ensure consistent height */
    position: relative;
    background: #fff;
}

.pf-content-panel {
    display: none;
    animation: fadeIn 0.4s ease-out;
}

.pf-content-panel.active {
    display: block;
}

.pf-content-panel h3 {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    color: #0f172a;
}

.pf-content-panel p {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 2rem;
}

/* --- Trusted By Section --- */
.trusted-by {
    padding: 0.25rem 0;
    /* Reduced to minimum */
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    overflow: hidden;
    /* Hide scrollbar */
}


.trusted-label {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
    /* Slate 500 - Richer Grey */
    text-transform: uppercase;
    letter-spacing: 2px;
    /* Premium Tracking */
    margin-bottom: 1rem;
    position: relative;
    display: inline-block;
    padding: 0 1rem;
}

/* Add subtle lines on sides */
.trusted-label::before,
.trusted-label::after {
    content: '';
    display: inline-block;
    width: 30px;
    height: 1px;
    background: #e2e8f0;
    vertical-align: middle;
    margin: 0 10px;
    opacity: 0.7;
}

.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.marquee-container::before,
.marquee-container::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100px;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

.marquee-container::before {
    left: 0;
    background: linear-gradient(to right, #f8fafc, transparent);
}

.marquee-container::after {
    right: 0;
    background: linear-gradient(to left, #f8fafc, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 3rem;
    animation: scroll 40s linear infinite;
}

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

.integration-pill {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    background: #ffffff;
    padding: 0.5rem 1rem;
    /* Reduced internal padding */
    border-radius: 100px;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
    white-space: nowrap;
    transition: all 0.2s ease;
}

.integration-pill i {
    color: #64748b;
    font-size: 1.1rem;
}

.integration-pill:hover {
    border-color: #cbd5e1;
    color: #0f172a;
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.integration-pill:hover i {
    color: #3b82f6;
    /* Hover highlight brand color */
}

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

    100% {
        transform: translateX(-50%);
        /* Move half width (one full set) */
    }
}

/* Desktop Sidebar Layout */
@media (min-width: 992px) {
    .product-family-layout {
        grid-template-columns: 420px 1fr;
        /* Widened to 420px */
        gap: 3rem;
    }

    .pf-nav {
        flex-direction: column;
        padding: 2rem 1.5rem;
        border-bottom: none;
        border-right: 1px solid #e2e8f0;
        overflow-x: visible;
        width: 100%;
        /* Ensure it takes full cell width */
        box-sizing: border-box;
    }

    .pf-nav-item {
        margin-right: 0;
        margin-bottom: 0.75rem;
        width: 100%;
        justify-content: space-between;
        white-space: normal;
        /* Allow wrapping */
        height: auto;
        line-height: 1.4;
    }

    /* Active state indicator arrow */
    .pf-nav-item.active::after {
        content: '→';
        opacity: 0.5;
        margin-left: 0.5rem;
    }

    .pf-panel-grid {
        grid-template-columns: 1.2fr 1fr;
        /* Text wider than chart */
        align-items: center;
    }

    .pf-content {
        padding: 3rem;
    }
}

.how-it-works-step {
    background-color: #ffffff !important;
    /* UPDATED: White background */
    padding: 2.5rem;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    /* UPDATED: Subtle shadow */
    text-align: left;
    /* UPDATED: Left align text */
    transition: transform 0.3s ease;
    border: 1px solid #e0e0e0;
    /* UPDATED: Light border */
}

.how-it-works-step:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-blue);
}

.how-it-works-step h3 {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: #111 !important;
    /* UPDATED: Dark text */
}

.how-it-works-step p,
.how-it-works-step li {
    font-size: 1rem;
    color: #555 !important;
    /* UPDATED: Dark grey text */
    line-height: 1.6;
}

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

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

/* New: Product Family Panel Grid & Visuals */
.pf-panel-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: center;
}

.chart-visual-container {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    /* Subtle gradient */
    border-radius: 16px;
    padding: 2rem;
    border: 1px solid #e2e8f0;
    box-shadow: inset 0 2px 4px rgba(255, 255, 255, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 250px;
    position: relative;
    overflow: hidden;
    font-family: 'Montserrat', sans-serif;
    color: var(--color-text-secondary);
}

/* --- Forensic Risk Report Styles --- */
.panel-header {
    margin-bottom: 2rem;
}

.panel-header h3 {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
    color: #0f172a;
}

.panel-header p {
    color: #64748b;
    margin: 0;
}

.risk-report-container {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.risk-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    table-layout: fixed;
    /* Enforce strict widths */
}

/* Explicit Column Widths to prevent cramping */
.risk-table th:nth-child(1) {
    width: 28%;
}

/* Fingerprint */
.risk-table th:nth-child(2) {
    width: 20%;
}

/* Probability */
.risk-table th:nth-child(3) {
    width: 35%;
}

/* Signature */
.risk-table th:nth-child(4) {
    width: 17%;
}

/* Status */

/* Mobile Responsive Table Fix */
@media (max-width: 991px) {
    .risk-report-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* Smooth scroll on iOS */
    }

    .risk-table {
        min-width: 900px;
        /* Force minimum width to trigger scroll */
    }

    /* Adjust sidebar for mobile */
    .product-family-layout {
        grid-template-columns: 1fr;
        /* Stack sidebar on top */
        gap: 1.5rem;
    }

    .pf-nav {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 0;
        margin-bottom: 1.5rem;
        white-space: nowrap;
    }

    .pf-nav-item {
        width: auto;
        margin-right: 1rem;
        margin-bottom: 0;
        padding-bottom: 1rem;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        white-space: nowrap;
        /* Keep items on one line */
    }

    .pf-nav-item.active {
        box-shadow: none;
        background: transparent;
        border-bottom-color: #0f172a;
        color: #0f172a;
    }

    .pf-content {
        padding: 1.5rem;
    }
}

.risk-table th {
    background: #f8fafc;
    color: #64748b;
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1rem;
    /* Tighten padding */
    text-align: left;
    border-bottom: 1px solid #e2e8f0;
}

.risk-table td {
    padding: 1rem 1rem;
    /* Tighten padding */
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
    vertical-align: middle;
    white-space: nowrap;
    /* Prevent wrapping where possible, text-overflow handled by width */
}

.risk-table tr:last-child td {
    border-bottom: none;
}



/* Obsolete simple hover, replacing with enhanced version below */

/* Row Animation */
.risk-row {
    animation: fadeIn 0.5s ease-out backwards;
    cursor: pointer;
    /* "Big pointer" affordance */
}

.risk-row:nth-child(1) {
    animation-delay: 0.1s;
}

.risk-row:nth-child(2) {
    animation-delay: 0.2s;
}

.risk-row:nth-child(3) {
    animation-delay: 0.3s;
}

/* Fingerprint Columns */
.fp-name {
    font-weight: 700;
    color: #0f172a;
    font-size: 0.95rem;
}

.fp-meta {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-top: 0.2rem;
}

/* Probability Progress Bar */
.prob-cell {
    font-family: 'Roboto Mono', monospace;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.prob-bar-track {
    width: 100%;
    height: 6px;
    background-color: #f1f5f9;
    border-radius: 100px;
    overflow: hidden;
}

.prob-bar-fill {
    height: 100%;
    border-radius: 100px;
    transition: width 1s ease-out;
}

.bg-red {
    background-color: #ef4444;
}

.bg-orange {
    background-color: #f97316;
}

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

.text-red {
    color: #ef4444;
}

.text-orange {
    color: #f97316;
}

.text-blue {
    color: #3b82f6;
}

/* Badges (Gold/Amber "Verified" Style) */
.sig-badge {
    background: rgba(15, 23, 42, 0.95);
    color: #fbbf24;
    /* Amber-400 */
    padding: 0.4rem 0.85rem;
    border-radius: 6px;
    font-family: 'Roboto Mono', monospace;
    font-size: 0.8rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid rgba(251, 191, 36, 0.3);
    /* Amber Border */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    cursor: help;
    transition: all 0.2s ease;
    animation: sig-pulse 2s infinite ease-in-out;
}

@keyframes sig-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0.4);
        border-color: rgba(251, 191, 36, 0.3);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 12px 4px rgba(251, 191, 36, 0.5);
        /* Stronger Glow */
        border-color: rgba(251, 191, 36, 1);
        /* Solid Gold Border */
        transform: scale(1.05);
        /* Physical Pulse */
        filter: brightness(1.2);
        /* Flash Brightness */
    }

    100% {
        box-shadow: 0 0 0 0 rgba(251, 191, 36, 0);
        border-color: rgba(251, 191, 36, 0.3);
        transform: scale(1);
    }
}

.sig-badge i {
    color: #fbbf24;
}

.sig-badge:hover {
    box-shadow: 0 0 15px rgba(251, 191, 36, 0.2);
    border-color: rgba(251, 191, 36, 0.8);
    background: #1e293b;
    transform: translateY(-1px);
}

/* XAI Terminal Tooltip */
.xai-tooltip-card {
    position: fixed;
    display: none;
    z-index: 1000;
    width: 600px;
    /* Widened to 600px for better header layout */
    background: #020617;
    /* Slate 950 / Black */
    border: 1px solid #1e293b;
    border-radius: 8px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    font-family: 'JetBrains Mono', 'Fira Code', 'Roboto Mono', monospace;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.xai-tooltip-card.visible {
    opacity: 1;
    display: block;
}

.xai-terminal-header {
    background: #0f172a;
    padding: 0.75rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #1e293b;
    gap: 1rem;
}

.term-header-left {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    overflow: hidden;
    /* Prevent spillover */
}

.term-prompt {
    color: #60a5fa;
    /* Blue-400 */
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    white-space: nowrap;
    /* Prevent wrapping */
}

.term-sub-meta {
    font-size: 0.65rem;
    color: #64748b;
    font-family: 'Inter', sans-serif;
    letter-spacing: normal;
    font-style: italic;
}

.term-auth-badge {
    font-size: 0.6rem;
    color: #fbbf24;
    /* Amber */
    border: 1px solid rgba(251, 191, 36, 0.4);
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    background: rgba(251, 191, 36, 0.05);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.1);
    font-weight: 700;
    letter-spacing: 0.05em;
    text-align: center;
    line-height: 1.3;
    white-space: nowrap;
    flex-shrink: 0;
}

.xai-terminal-body {
    padding: 1rem;
    font-size: 0.8rem;
    line-height: 1.6;
}

.term-line {
    display: flex;
    margin-bottom: 0.25rem;
}

.term-line.spacer {
    height: 0.5rem;
}

.line-num {
    color: #334155;
    /* Dark Grey */
    margin-right: 1rem;
    user-select: none;
}

.term-key {
    color: #38bdf8;
    /* Sky Blue */
    font-weight: 600;
    margin-right: 0.5rem;
}

.term-val {
    color: #fff;
    font-weight: 600;
}

.term-comment {
    color: #64748b;
    font-style: italic;
}

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

.status-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

.status-badge.alert {
    background: #fef2f2;
    color: #ef4444;
    border: 1px solid #fecaca;
}

.status-badge.warning {
    background: #fff7ed;
    color: #f97316;
    border: 1px solid #fdba74;
}

.status-badge.safe {
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
}

/* IT Risk: Bar Chart */
.chart-bar-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-around;
    align-items: flex-end;
    border-bottom: 2px solid var(--color-border-light);
    padding-bottom: 0.5rem;
}

.chart-bar {
    width: 40px;
    background-color: rgba(0, 122, 255, 0.1);
    /* Updated color */
    border: 2px solid var(--color-primary-blue);
    /* Updated color */
    border-radius: 5px 5px 0 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.bar-label {
    font-size: 0.8rem;
    text-align: center;
    color: var(--color-text-dark-primary);
    margin-top: 0.5rem;
}

.bar-fill {
    background-color: var(--color-primary-blue);
    /* Updated color */
    width: 100%;
    animation: barRise 1s ease-out;
}

@keyframes barRise {
    from {
        height: 0;
    }
}

/* Supply Chain: Flow Diagram */
.chart-flow-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.flow-node {
    padding: 1rem;
    border: 2px solid var(--color-text-dark-secondary);
    border-radius: 5px;
    font-size: 0.9rem;
    font-weight: 700;
}

.flow-node.alert {
    border-color: var(--color-danger-red);
    /* Updated color */
    color: var(--color-danger-red);
    /* Updated color */
}

.flow-arrow {
    font-size: 2rem;
    color: var(--color-primary-blue);
    /* Updated color */
}

/* Finance: Pie Chart */
.chart-pie-container {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: conic-gradient(var(--color-primary-blue) 0deg 340deg,
            var(--color-danger-red) 340deg 360deg);
    /* Updated colors */
    border: 4px solid var(--color-light-bg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: pieSpin 1s ease-out;
}

@keyframes pieSpin {
    from {
        transform: rotate(-90deg);
        opacity: 0;
    }

    to {
        transform: rotate(0deg);
        opacity: 1;
    }
}

/* Pension: Line Graph */
.chart-line-container {
    width: 100%;
    height: 150px;
    border-bottom: 2px solid var(--color-border-light);
    border-left: 2px solid var(--color-border-light);
    position: relative;
}

.line-graph {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.line-graph path {
    fill: none;
    stroke: var(--color-primary-blue);
    /* Updated color */
    stroke-width: 3;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawLine 2s ease-out forwards;
}

@keyframes drawLine {
    to {
        stroke-dashoffset: 0;
    }
}

/* Bio: Pulse Graph */
.chart-pulse-container {
    width: 100%;
    height: 150px;
    position: relative;
}

.pulse-line {
    width: 100%;
    height: 100%;
    stroke: var(--color-danger-red);
    /* Updated color */
    stroke-width: 3;
    fill: none;
    stroke-dasharray: 500;
    stroke-dashoffset: 500;
    animation: drawLine 2s ease-out forwards;
}

.pulse-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(to right, rgba(0, 122, 255, 0.2), rgba(0, 122, 255, 0));
    /* Updated color */
    animation: scanPulse 3s infinite linear;
}

@keyframes scanPulse {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* NEW: Insurance Risk Matrix */
.chart-risk-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 8px;
    width: 180px;
    height: 180px;
}

.risk-cell {
    border-radius: 5px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.chart-risk-matrix:hover .risk-cell {
    opacity: 1;
}

.risk-low {
    background-color: rgba(0, 122, 255, 0.2);
    border-color: rgba(0, 122, 255, 0.5);
}

.risk-medium {
    background-color: rgba(0, 122, 255, 0.6);
    border-color: var(--color-primary-blue);
}

.risk-high {
    background-color: var(--color-danger-red);
    border-color: var(--color-danger-red);
}



/* Final CTA */
.final-cta {
    text-align: left;
    /* UPDATED: Left align */
    background-color: #0d1b2a;
    /* Ensure dark background */
    padding: 6rem 0;
}

.final-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    color: #fff;
}

.final-cta p {
    font-size: 1.1rem;
    color: #b0b8c4;
    max-width: 600px;
    margin-bottom: 2.5rem;
}

/* Footer */
footer {
    text-align: left;
    /* UPDATED: Left align */
    padding: 4rem 0;
    /* Adjusted padding */
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: #0a1621;
    /* Slightly darker than CTA */
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

footer p {
    color: var(--color-text-light-secondary);
}

/* Responsive Design */
@media (min-width: 768px) {
    h1 {
        font-size: 3.75rem;
    }

    .hero-layout {
        grid-template-columns: 1fr 1fr;
        text-align: left;
    }

    .hero-text-container {
        order: -1;
        /* Move text to the left */
    }

    .how-it-works-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

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

    .pf-panel-grid {
        grid-template-columns: 1fr 0.8fr;
        /* 2 cols on desktop */
    }

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

@media (min-width: 992px) {
    .product-family-layout {
        grid-template-columns: 300px 1fr;
        /* Vertical nav on desktop */
        gap: 0;
    }

    .pf-nav {
        flex-direction: column;
        /* Vertical on desktop */
        overflow-x: hidden;
        padding: 1.5rem;
        background-color: #f8f9fa;
        /* UPDATED: Light grey nav background */
        border-right: 1px solid #e0e0e0;
        border-bottom: none;
    }

    .pf-nav-item {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
}

/* --- PROBLEM SECTION (Transition: Mid-Tone) --- */
.problem {
    background-color: #f0f4f8;
    /* Light Blue-Grey Transition */
    padding: 6rem 0;
    border-bottom: 1px solid #e0e0e0;
}

.problem h2 {
    color: #111;
    /* Dark Text */
}

.problem p {
    color: #555;
}

@media (max-width: 768px) {
    .trust-container {
        flex-direction: column;
        gap: 1rem;
        text-align: center;
    }

    .trust-badges {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1.5rem;
    }
}

/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

.about-hero {
    padding-top: 180px;
    padding-bottom: 100px;
    text-align: center;
    background: radial-gradient(circle at center, rgba(0, 122, 255, 0.15) 0%, transparent 70%);
}

.about-hero h1 {
    font-size: 3.5rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, var(--color-text-primary) 0%, var(--color-text-secondary) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.highlight-red {
    color: var(--color-danger-red);
    -webkit-text-fill-color: var(--color-danger-red);
}

.mit-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--color-border);
    padding: 8px 16px;
    border-radius: 50px;
    margin-bottom: 24px;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    backdrop-filter: blur(10px);
}

.mission-vision-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

.mv-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 16px;
    padding: 3rem;
    position: relative;
    overflow: hidden;
    transition: all 0.4s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 350px;
    /* Increased height */
}

.mv-card:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--color-primary-blue);
}

.mv-card h3 {
    font-size: 2.5rem;
    margin-bottom: 0;
    font-family: 'Montserrat', sans-serif;
    transition: all 0.4s ease;
    z-index: 2;
    /* Removed absolute positioning */
}

.mv-card:hover h3 {
    transform: translateY(-10px);
    /* Slight upward movement */
    font-size: 2rem;
    /* Shrink slightly */
}

.mv-card p {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.5s ease;
    margin-top: 0;
    color: var(--color-text-secondary);
    font-size: 1.1rem;
    line-height: 1.7;
    z-index: 2;
}

.mv-card:hover p {
    max-height: 200px;
    /* Enough to fit text */
    opacity: 1;
    margin-top: 1.5rem;
}

.mv-card.vision h3 {
    background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mv-card.mission h3 {
    background: linear-gradient(135deg, var(--color-primary-blue) 0%, var(--color-accent-teal) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    z-index: 0;
    background-size: cover;
    background-position: center;
    transition: opacity 0.4s ease;
}

.mv-card:hover .mv-bg {
    opacity: 0.2;
}

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

.roadmap-section {
    padding: 100px 0;
}

.roadmap-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 4rem;
    position: relative;
}

.roadmap-steps::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-border) 0%, var(--color-border) 100%);
    z-index: 0;
}

.step-card {
    background: var(--color-dark-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    position: relative;
    z-index: 1;
}

.step-marker {
    width: 40px;
    height: 40px;
    background: var(--color-dark-bg);
    border: 2px solid var(--color-primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-weight: bold;
    color: var(--color-primary-blue);
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
}

.step-title {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
}

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

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

    .roadmap-steps {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .roadmap-steps::before {
        width: 2px;
        height: 100%;
        left: 20px;
        top: 0;
    }

    .step-marker {
        left: 20px;
        top: 0;
        transform: none;
    }

    .step-card {
        margin-left: 50px;
    }
}

/* =========================================
   CONTACT PAGE STYLES
   ========================================= */

.contact-page {
    padding-top: 120px;
    padding-bottom: 80px;
}

.contact-header {
    text-align: center;
    margin-bottom: 4rem;
}

.contact-header h1 {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    color: var(--color-danger-red);
}

.contact-header .text-white {
    color: #fff;
    font-weight: 400;
}

.contact-email {
    color: #fff;
    font-size: 1.1rem;
    text-decoration: none;
    margin-bottom: 2rem;
    display: inline-block;
}

.contact-email:hover {
    color: var(--color-primary-blue);
}

.trust-badges-row {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.trust-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.trust-badge i {
    color: var(--color-danger-red);
}

.contact-container {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 0;
    max-width: 1200px;
    margin: 0 auto;
    background: #1e1e1e;
    /* Dark grey card bg */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
}

.contact-left {
    position: relative;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.contact-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}

.contact-hero-text {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 2;
    width: 90%;
}

.contact-hero-text h2 {
    font-size: 1.75rem;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}

.contact-hero-text h2 span {
    color: var(--color-danger-red);
}

.contact-right {
    padding: 2rem;
    background: #252525;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
}

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

.form-group input,
.form-group textarea {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 6px;
    padding: 0.6rem 0.8rem;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--color-primary-blue);
}

.form-group textarea {
    resize: vertical;
    min-height: 80px;
}

/* Pillar Checkboxes - Small and Simple */
.pillar-checkboxes {
    display: flex;
    gap: 1.5rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.pillar-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    user-select: none;
}

.pillar-checkbox input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: var(--color-primary-blue);
}

.checkbox-label {
    color: #ccc;
    font-size: 0.9rem;
}

.pillar-checkbox:has(input[type="checkbox"]:checked) .checkbox-label {
    color: #fff;
}

/* Captcha */
.captcha-group {
    margin-top: 1rem;
}

.fake-captcha {
    background: #222;
    border: 1px solid #444;
    border-radius: 4px;
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: fit-content;
}

.fake-captcha input[type="checkbox"] {
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.captcha-logo {
    height: 32px;
    margin-left: 1rem;
}

.submit-btn {
    background: var(--color-danger-red);
    color: #fff;
    border: none;
    padding: 1rem 2rem;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    margin-top: 1rem;
    width: 100%;
}

.submit-btn:hover {
    background: #c53030;
}

.form-footer {
    font-size: 0.8rem;
    color: #666;
    margin-top: 1rem;
    text-align: center;
}

.form-success {
    text-align: center;
    padding: 4rem 2rem;
}

.form-success i {
    font-size: 4rem;
    color: #48bb78;
    margin-bottom: 1.5rem;
}

.form-success h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
}

@media (max-width: 900px) {
    .contact-container {
        grid-template-columns: 1fr;
    }

    .contact-left {
        height: 300px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }
}

/* --- HEADER RIGHT ALIGNMENT --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    /* Space between Contact Button and Profile */
}

/* --- PROFILE DROPDOWN STYLES --- */
.profile-dropdown {
    position: relative;
    /* margin-left: 2rem; Removed margin, handled by gap */
    height: 100%;
    display: flex;
    align-items: center;
}

.profile-trigger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

.profile-trigger:hover {
    transform: scale(1.05);
}

.avatar-circle {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    color: var(--color-dark-bg);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.2);
    font-family: 'Montserrat', sans-serif;
}

.profile-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 1rem;
    width: 320px;
    background-color: #071322;
    /* Dark Navy Blue from Screenshot */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    z-index: 100000;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

/* Hover bridge */
.profile-dropdown:hover .profile-menu,
.profile-menu:hover {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.profile-dropdown::after {
    content: '';
    position: absolute;
    top: 100%;
    right: 0;
    width: 100%;
    height: 20px;
    background: transparent;
}

.profile-header {
    padding: 1.5rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.02);
}

.avatar-circle.large {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
    margin-right: 1rem;
}

.profile-info {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.profile-name {
    color: #fff;
    font-weight: 700;
    font-size: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Montserrat', sans-serif;
}

.profile-email {
    color: #94a3b8;
    /* Muted Text */
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.profile-actions {
    list-style: none;
    padding: 0.5rem 0;
    margin: 0;
}

.profile-actions li a {
    display: flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.2s;
}

.profile-actions li a:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: var(--color-primary-blue);
}

.profile-actions li a i {
    width: 24px;
    text-align: center;
    margin-right: 10px;
    color: #94a3b8;
}

.profile-actions li a:hover i {
    color: var(--color-primary-blue);
}

/* =========================================
   TEAM ACCORDION SECTION (ABOUT US)
   ========================================= */
.team-gallery-container {
    padding: 4rem 0;
}

.team-gallery {
    display: flex;
    flex-direction: row;
    height: 500px;
    gap: 1.5rem;
    align-items: stretch;
}

.team-card {
    position: relative;
    flex: 1;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    background-color: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.team-card:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

.team-card.active {
    flex: 3.5;
    border-color: var(--color-primary-blue);
    box-shadow: 0 0 30px rgba(0, 122, 255, 0.2);
}

/* Background Image */
.team-card-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
    filter: grayscale(100%) brightness(0.6);
}

.team-card:hover .team-card-image {
    filter: grayscale(0%) brightness(0.8);
}

.team-card.active .team-card-image {
    filter: grayscale(0%) brightness(1);
    transform: scale(1.05);
}

/* Overlay & Content */
.team-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(15, 23, 42, 1) 0%, rgba(15, 23, 42, 0) 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    color: #fff;
    transition: background 0.5s ease;
}

.team-card.active .team-card-overlay {
    background: linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.6) 100%);
    justify-content: center;
    align-items: flex-start;
    padding: 3rem;
}

/* Collapsed Info (Shown when inactive) */
/* Legacy Team CSS Removed */

/* Expanded Info (Shown when active) */
.team-info-expanded {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.2s, transform 0.5s ease 0.2s;
    max-width: 450px;
    display: none;
}

.team-card.active .team-info-expanded {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.team-info-expanded blockquote {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-style: italic;
    line-height: 1.6;
    color: #e2e8f0;
    margin-bottom: 1.5rem;
    border-left: 3px solid var(--color-primary-blue);
    padding-left: 1rem;
}

.team-info-expanded h3 {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.25rem;
    background: linear-gradient(135deg, #fff 0%, #94a3b8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.team-info-expanded .role {
    color: var(--color-primary-blue);
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 1.5rem;
}

.team-info-expanded .linkedin-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: #fff;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.team-info-expanded .linkedin-icon:hover {
    background: #0077b5;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Mobile Responsiveness for Team Section */
@media (max-width: 768px) {
    .team-gallery {
        flex-direction: column;
        height: auto;
    }

    .team-card {
        flex: none;
        height: 120px;
        transition: height 0.3s ease;
    }

    .team-card.active {
        flex: none;
        height: 450px;
    }

    .team-card-overlay {
        padding: 1.5rem;
    }
}

/* Fix for Dark Text on Subtitles */
.section-subtitle {
    font-size: 1.25rem;
    color: #cbd5e1;
    /* Light grey for visibility on dark bg */
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Implementation Assurance Protocol Section */
.protocol-section {
    background-color: #0b1120;
    /* Very dark navy */
    padding: 6rem 0;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.protocol-timeline {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    position: relative;
    margin-top: 4rem;
}

/* Connecting Line (Desktop) */
.protocol-timeline::before {
    content: '';
    position: absolute;
    top: 30px;
    /* Aligned with icon center */
    left: 10%;
    right: 10%;
    height: 2px;
    background: linear-gradient(90deg,
            rgba(0, 122, 255, 0.1) 0%,
            var(--color-primary-blue) 50%,
            rgba(0, 122, 255, 0.1) 100%);
    z-index: 1;
}

.protocol-step {
    position: relative;
    z-index: 2;
    padding: 3rem 2.5rem;
    background: #000000 !important;
    /* Pure Black */
    border: 1px solid #1e293b;
    /* Subtle border */
    border-radius: 12px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;

    /* Layout: Taller & Bottom Aligned */
    min-height: 450px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Layer 1: Hover Photo (Bottom of stack, above bg) */
.protocol-step::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Default empty, specific images applied below */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* Fix for tiling/squares */
    opacity: 0 !important;
    transition: opacity 0.5s ease;
    z-index: 1;
    /* Positive Z ensures it sits atop the base background color */
}

/* Card 1 Specific Image */
.protocol-step:nth-child(1)::before {
    background-image: linear-gradient(to top, rgba(2, 6, 23, 0.95) 10%, rgba(2, 6, 23, 0.6) 50%, rgba(2, 6, 23, 0.2) 100%),
        url('/pics/card-1.png');
}

/* Card 2 Specific Image */
.protocol-step:nth-child(2)::before {
    background-image: linear-gradient(to top, rgba(2, 6, 23, 0.95) 10%, rgba(2, 6, 23, 0.6) 50%, rgba(2, 6, 23, 0.2) 100%),
        url('/pics/card-2.png');
}

/* Card 3 Specific Image */
.protocol-step:nth-child(3)::before {
    background-image: linear-gradient(to top, rgba(2, 6, 23, 0.95) 10%, rgba(2, 6, 23, 0.6) 50%, rgba(2, 6, 23, 0.2) 100%),
        url('/pics/card-3.png');
}

/* Layer 2: Pattern (Top of stack) */
.protocol-step::after {
    content: '';
    position: absolute;
    inset: 0;
    /* pure CSS pattern to avoid image artifacts */
    background-image: radial-gradient(#334155 1.5px, transparent 1.5px) !important;
    background-size: 16px 16px !important;
    opacity: 0.3 !important;
    pointer-events: none;
    z-index: 2;
}



/* Ensure content is above backgrounds */
.protocol-step .protocol-content,
.protocol-step .protocol-icon,
.protocol-step h3,
.protocol-step p {
    position: relative;
    z-index: 3;
}

.protocol-step:hover {
    transform: translateY(-5px);
    border-color: rgba(34, 211, 238, 0.6);
    box-shadow: 0 10px 30px rgba(34, 211, 238, 0.15);
}

.protocol-step:hover::before {
    opacity: 1 !important;
    /* Reveal photo strongly */
}

.protocol-icon {
    width: 60px;
    height: 60px;
    background: #0d1b2a;
    border: 2px solid var(--color-primary-blue);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 1.5rem;
    color: var(--color-primary-blue);
    box-shadow: 0 0 15px rgba(0, 122, 255, 0.2);
    position: relative;
    /* Stays above line */
    z-index: 3;
}



.protocol-content h3 {
    color: #fff;
    font-size: 1.25rem;
    margin-bottom: 1rem;
}

.protocol-content p {
    color: #cbd5e1;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Mobile Responsiveness */
@media (max-width: 992px) {
    .protocol-timeline {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .protocol-timeline::before {
        display: none;
        /* Hide horizontal line */
    }

    /* Vertical Line for Mobile */
    .protocol-timeline::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50px;
        /* Align with icon center */
        width: 2px;
        background: linear-gradient(180deg,
                rgba(0, 122, 255, 0.1) 0%,
                var(--color-primary-blue) 50%,
                rgba(0, 122, 255, 0.1) 100%);
        display: block;
        z-index: 1;
    }

    .protocol-step {
        display: flex;
        align-items: flex-start;
        padding: 1.5rem;
        background: transparent;
        /* Cleaner look on mobile */
        border: none;
        backdrop-filter: none;
    }

    .protocol-icon {
        margin-right: 1.5rem;
        margin-bottom: 0;
        flex-shrink: 0;
        /* Prevent icon shrinking */
        background-color: #0b1120;
        /* Mask the line behind */
    }
}

/* Sticky Horizontal Scroll Section */
/* Vertical Card Stack Section */
/* --- How It Works Section (Sticky Stack) --- */
.how-it-works-section {
    position: relative;
    background-color: #f8fafc;
    /* Light Theme */
    padding: 2rem 0;
    /* Strict 32px padding */
    overflow: visible;
}

.how-it-works-section h2 {
    color: #0d1b2a;
    /* Deep Enterprise Navy */
    text-align: center;
}

.how-it-works-section .solid-data-subheadline {
    color: #007aff;
    /* Electric Blue */
    text-align: center;
    margin-bottom: 3rem;
    font-size: 1.25rem;
    font-weight: 600;
}

.timeline-container {
    position: relative;
    max-width: 1200px;
    /* Widened from 900px */
    margin: 0 auto;
    padding: 2rem 0;
}

/* Vertical Line Removed */

/* Sticky Step Wrapper */
.timeline-step {
    position: sticky;
    top: 15vh;
    /* Stick near top */
    margin-bottom: 25vh;
    /* Space for next card to scroll up */
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 1;
    /* reset opacity */
    transform: none;
    /* remove transform */
    z-index: 1;
}

/* Ensure subsequent steps are above */
.timeline-step:nth-child(1) {
    z-index: 1;
}

.timeline-step:nth-child(2) {
    z-index: 2;
}

.timeline-step:nth-child(3) {
    z-index: 3;
}

/* Pro Layout: 2-Column Grid */
.timeline-content.unified-card.pro-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Equal split */
    gap: 3rem;
    gap: 3rem;
    padding: 0;
    /* Let inner containers handle padding */
    overflow: hidden;
    /* For image radius */
    max-width: 1100px;
    /* Widened from 900px */
    align-items: stretch;
    background: #ffffff !important;
    /* Force solid white */
    border: 1px solid #e2e8f0;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    /* Stronger shadow */
    border-radius: 24px;
    /* Enforce Uniform Size for Stacking */
    height: 500px;
    min-height: 500px;
}

.card-content-left {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.card-image-right {
    position: relative;
    background: #f1f5f9;
    min-height: 300px;
    /* Ensure height */
    overflow: hidden;
}

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

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

/* Giant Number Styling */
.giant-number {
    position: absolute;
    top: -1rem;
    /* Adjust to fit inside */
    left: 2rem;
    font-size: 10rem;
    font-weight: 900;
    color: #f1f5f9;
    /* Default grey */
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

/* Dynamic Number Coloring to match Badges */
/* Step 1: Grey */
.timeline-step:nth-child(1) .giant-number {
    color: #f1f5f9;
}

/* Step 2: Indigo Tint */
.timeline-step:nth-child(2) .giant-number {
    color: #e0e7ff;
}

/* Step 3: Brand Blue Tint */
.timeline-step:nth-child(3) .giant-number {
    color: #eff6ff;
    /* Very Light Blue */
}

.card-content-left {
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
    /* Above number watermark */
}

/* Ensure readable text over potentially overlapping numbers */
.timeline-content.unified-card {
    z-index: 2;
    position: relative;
}

.timeline-step {
    /* Update sticky logic to account for number height */
    margin-bottom: 25vh;
}

/* Typography Tune-up */
.pro-header h3 {
    font-size: 2.2rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 0.75rem;
    line-height: 1.2;
}

.timeline-content p {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #475569;
}

@media (max-width: 768px) {
    .timeline-content.unified-card.pro-card {
        grid-template-columns: 1fr;
        /* Stack vertically */
    }

    .card-image-right {
        min-height: 200px;
        order: -1;
        /* Image on top? Or bottom? Keeping bottom usually better for context reading logic, or top for visual hook. Let's do top for mobile hook. */
        order: 0;
        /* Actually default is fine (bottom) */
    }

    .giant-number {
        font-size: 6rem;
        top: -2rem;
        left: 0;
    }

    .card-content-left {
        padding: 2rem;
    }
}

.timeline-marker,
.timeline-line,
.timeline-progress {
    display: none;
}

.timeline-progress {
    display: none;
}

/* Ensure step badges and icons align */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
}

.step-badge {
    font-size: 0.9rem;
    font-weight: 800;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.card-icon {
    font-size: 2.5rem;
    color: #3b82f6;
    background: rgba(59, 130, 246, 0.1);
    padding: 1rem;
    border-radius: 12px;
}

.card-body h3 {
    font-size: 2rem;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 1rem;
}

/* Badges */
.badge-row {
    display: flex;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.tech-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Badge 1: Ingest (Grey/Passive) */
.badge-latency {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
}

/* Badge 2: Processing (Indigo/Tech) */
.badge-tensor {
    background: #e0e7ff;
    color: #4f46e5;
    /* Indigo */
    border: 1px solid #c7d2fe;
}

/* Badge 3: Action (Brand Blue/Verified) */
.badge-confidence {
    background: rgba(0, 122, 255, 0.05);
    /* Very light blue */
    color: #0f172a;
    /* Dark text for 'Action:' */
    border: 1px solid rgba(0, 122, 255, 0.2);
}

.text-blue-accent {
    color: #007aff;
    /* Brand Primary */
    font-weight: 800;
    margin-left: 0.3rem;
}

@media (max-width: 768px) {
    .timeline-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .timeline-line {
        left: 20px;
        transform: none;
    }

    .timeline-step {
        justify-content: flex-end;
        padding-left: 50px;
        /* Make room for line */
    }

    .timeline-content.unified-card {
        width: 100%;
    }
}

/* =========================================
   PROBLEM AGITATION SECTION (Siloed Data Redesign)
   ========================================= */
/* =========================================
   PROBLEM AGITATION SECTION (Siloed Data Redesign)
   ========================================= */
.problem-agitation-section {
    background-color: #ffffff;
    /* Subtle Dot Grid Background */
    background-image: radial-gradient(#cbd5e1 1px, transparent 1px);
    background-size: 24px 24px;
    color: #0f172a;
    padding: 6rem 0;
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

/* Fade out grid at edges */
.problem-agitation-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, #ffffff 0%, transparent 20%, transparent 80%, #ffffff 100%);
    pointer-events: none;
}

.problem-headline {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 4rem;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}

.problem-headline .weight-light {
    font-weight: 400;
    color: #475569;
}

/* Grid Layout with Dotted Lines */
/* --- NEW 2x2 DASHED GRID LAYOUT --- */
.problem-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0;
    border: 1px dashed #cbd5e1;
    background: #ffffff;
    position: relative;
    z-index: 2;
    box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.05);
    margin-bottom: 6rem;
}

/* Base Quadrant Style */
.problem-quadrant {
    padding: 3rem;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.problem-quadrant:hover {
    background-color: #f8fafc;
}

/* Icon Pulse on Quadrant Hover */
.problem-quadrant:hover .p-icon {
    transform: scale(1.1);
    box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

/* Quadrant 1: Visual (Top Left) */
.problem-quadrant.q-1-visual {
    /* Removed vertical border to avoid rigid grid look */
    border-right: none;
    border-bottom: 1px dashed #cbd5e1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Quadrant 2: Text (Top Right) */
.problem-quadrant.q-1-text {
    border-bottom: 1px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

/* Quadrant 3: Reactive Chaos (Bottom Left) */
.problem-quadrant.q-2 {
    border-right: 1px dashed #cbd5e1;
}

/* Quadrant 4: Physical (Bottom Right) */
.problem-quadrant.q-3 {
    /* No borders needed (handled by grid edges) */
}


/* Content Layouts */
.problem-content-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    width: 100%;
}

.problem-quadrant .problem-text {
    flex: 1;
}

.problem-quadrant .problem-visual.mini {
    flex-shrink: 0;
}

/* Icon Styles Adjustments */
.problem-visual.standalone {
    margin-bottom: 0;
}

.visual-icons,
.visual-chain {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.p-icon {
    width: 56px;
    height: 56px;
    background: #f8fafc;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748b;
    font-size: 1.5rem;
}

.p-icon.active {
    background: #fee2e2;
    color: #ef4444;
}

/* Text Adjustments */
.problem-text h3 {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #0f172a;
}

.problem-text p {
    font-size: 1rem;
    color: #4b5563;
    line-height: 1.6;
    margin-bottom: 0;
    /* Removed line-clamp to allow full text */
}

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

    .problem-quadrant {
        border-right: none !important;
        border-bottom: 1px dashed #cbd5e1 !important;
        padding: 2rem;
    }

    .problem-quadrant:last-child {
        border-bottom: none !important;
    }

    .problem-content-wrapper {
        flex-direction: column-reverse;
        /* Text on top on mobile? Or Visual top? Default col is visual top typically. */
        align-items: flex-start;
        gap: 1.5rem;
    }
}


/* Chain Visual (Efficiency) */
.chain-node {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.chain-node.alert {
    background: #fee2e2;
    color: #ef4444;
}

.chain-node.unknown {
    background: #f1f5f9;
    color: #94a3b8;
}

.chain-line {
    height: 2px;
    width: 40px;
    background: #cbd5e1;
}

/* Physical Row (Full Width Span) */
.problem-row.physical-row,
.problem-row:nth-child(3) {
    grid-column: span 2;
    border-top: 1px dashed #cbd5e1;
    border-right: none;
    /* Reset to column flow for consistency */
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* WHAT OTHERS GET WRONG (Dark Cards) */
.others-wrong-container {
    margin-top: 4rem;
}

.about-hero-subhead {
    max-width: 700px;
    margin: 0 auto;
    color: #cbd5e1;
    font-size: 1.2rem;
    line-height: 1.6;
}

.wrong-headline {
    font-size: 2rem;
    margin-bottom: 2rem;
    color: #0f172a;
}

.text-highlight-red {
    color: #ef4444;
}

.wrong-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

/* Icon Animations */
@keyframes glitchShake {
    0% {
        transform: translate(0);
    }

    20% {
        transform: translate(-2px, 2px);
    }

    40% {
        transform: translate(-2px, -2px);
    }

    60% {
        transform: translate(2px, 2px);
    }

    80% {
        transform: translate(2px, -2px);
    }

    100% {
        transform: translate(0);
    }
}

@keyframes bellRing {
    0% {
        transform: rotate(0);
    }

    25% {
        transform: rotate(15deg);
    }

    50% {
        transform: rotate(-15deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0);
    }
}

@keyframes networkPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Base card with subtle grid texture */
.wrong-card {
    background-color: #0f172a;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 16px;
    padding: 2.5rem;
    color: #fff;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.4s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Icon Animation Triggers on Hover */
.wrong-card:nth-child(1):hover .wrong-icon i {
    animation: glitchShake 0.3s cubic-bezier(.36, .07, .19, .97) both;
}

.wrong-card:nth-child(2):hover .wrong-icon i {
    animation: bellRing 0.5s ease-in-out both;
}

.wrong-card:nth-child(3):hover .wrong-icon i {
    animation: networkPulse 0.6s ease-in-out infinite;
}

/* Icon Transition Base */
.wrong-icon i {
    display: inline-block;
    transition: color 0.3s ease;
}

/* Gradient Overlay via Pseudo-element to prevent flashing */
.wrong-card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.4s ease;
}

.wrong-card:hover {
    transform: translateY(-8px);
    /* Subtle Lift */
    box-shadow: 0 20px 40px -5px rgba(0, 0, 0, 0.4);
    /* Deep shadow */
    border-color: rgba(255, 255, 255, 0.2);
}

.wrong-card:hover::before {
    opacity: 1;
}

/* Unique Hover Gradients applied to pseudo-element */
/* Card 1: Generic Wrappers (AI/Robot) - INDIGO/VIOLET */
.wrong-card:nth-child(1)::before {
    background: linear-gradient(135deg, #0f172a 0%, #312e81 100%);
}

/* Card 2: Black Box Alerts (Bell) - ROSE/RED */
.wrong-card:nth-child(2)::before {
    background: linear-gradient(135deg, #0f172a 0%, #881337 100%);
}

/* Card 3: Point Solutions (Layers) - TEAL/CYAN */
.wrong-card:nth-child(3)::before {
    background: linear-gradient(135deg, #0f172a 0%, #0f766e 100%);
}

/* Ensure content stays on top */
.wrong-card .wrong-icon,
.wrong-card h4,
.wrong-card p {
    position: relative;
    z-index: 2;
}

.wrong-icon {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

.wrong-card h4 {
    font-size: 1.25rem;
    color: #fff;
    margin-bottom: 1rem;
}

.wrong-card p {
    color: #94a3b8;
    /* Slate 400 */
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 0;
}

@media (max-width: 768px) {

    .problem-grid-layout,
    .wrong-cards-grid {
        grid-template-columns: 1fr;
    }

    .problem-row:nth-child(2n) {
        border-right: 1px dashed #cbd5e1;
    }

    /* Restore border for stack */
    .problem-row {
        border-right: none;
        border-bottom: 1px dashed #cbd5e1;
    }

    .problem-row:nth-child(3) {
        grid-column: span 1;
        border-top: none;
    }
}

/* Custom Cursor (Big Pointer) */
.custom-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.8);
    /* White ring */
    border-radius: 50%;
    position: fixed;
    /* Fixed relative to viewport */
    pointer-events: none;
    /* Pass through clicks */
    z-index: 9999;
    transform: translate(-50%, -50%);
    /* Center on mouse */
    transition: width 0.2s ease, height 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    mix-blend-mode: difference;
    /* Ensure visibility on light/dark */
    opacity: 0;
    /* Hidden initially until moved */
}

/* Inner dot effect */
.custom-cursor::after {
    content: '';
    width: 4px;
    height: 4px;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.custom-cursor.hovered {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.1);
    /* Subtle fill */
    border-color: rgba(255, 255, 255, 1);
    mix-blend-mode: difference;
}

/* =========================================
   SECURE ENGINE SECTION (Interactive)
   ========================================= */
.secure-engine-section {
    background: #f8fafc;
    /* Slate 50 */
    padding: 6rem 0;
    position: relative;
    border-bottom: 1px solid #e2e8f0;
}

.secure-header-group {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 5rem;
}

.secure-headline {
    font-size: 3rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 1.5rem;
}

.text-highlight-blue {
    color: #007aff;
}

.secure-subhead {
    font-size: 1.1rem;
    color: #475569;
    line-height: 1.6;
}

.secure-cards-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.secure-card {
    background: white;
    padding: 3rem 2rem;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
}

.secure-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #3b82f6;
    /* Blue border on hover */
}

.secure-icon-wrapper {
    width: 60px;
    height: 60px;
    background: #eff6ff;
    /* Blue 50 */
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2563eb;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

.secure-card:hover .secure-icon-wrapper {
    background: #2563eb;
    color: white;
    transform: scale(1.1);
}

.secure-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 1rem;
}

.secure-card p {
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Micro Animations inside Cards */
.secure-visual-anim {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 40px;
    height: 40px;
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.secure-card:hover .secure-visual-anim {
    opacity: 1;
}

/* Specific Anims can be added later, simplified placeholders for now */
.lock-dot {
    width: 8px;
    height: 8px;
    background: #2563eb;
    border-radius: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.secure-card:hover .lock-dot {
    opacity: 1;
    animation: pulse 1s infinite;
}

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

/* =========================================
   BENTO GRID SECURE SECTION (RapidInnovation Style)
   ========================================= */
.bento-secure-section {
    background: #0f172a;
    /* Dark Slate 900 */
    padding: 6rem 0;
    overflow: hidden;
}

/* ... skipped grid layout ... */

.bento-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    /* Equal Columns for RapidInnovation Style */
    grid-template-rows: auto auto;
    gap: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Card General Styles */
.bento-card {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease;
}

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

.bento-dark-image-card {
    background-color: #0f172a;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

/* Energy Pulse Animation */
@keyframes energyPulse {
    0% {
        opacity: 0.4;
        filter: brightness(1);
        transform: scale(0.95);
    }

    50% {
        opacity: 0.9;
        filter: brightness(1.4);
        transform: scale(1.05);
    }

    100% {
        opacity: 0.4;
        filter: brightness(1);
        transform: scale(0.95);
    }
}

.bento-dark-image-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Stronger Gradient */
    background: radial-gradient(circle at center, rgba(34, 211, 238, 0.6) 0%, rgba(59, 130, 246, 0.3) 50%, transparent 80%);
    mix-blend-mode: screen;
    animation: energyPulse 3s infinite ease-in-out;
    pointer-events: none;
    z-index: 10;
}

/* Vertical Data Flow Animation */
@keyframes dataFlow {
    0% {
        background-position: 0% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

.bento-vertical-image-card {
    background-color: #1e293b;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.bento-vertical-image-card::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Vertical scanning lines */
    background: linear-gradient(to top,
            transparent 0%,
            rgba(34, 211, 238, 0.1) 40%,
            rgba(34, 211, 238, 0.4) 50%,
            rgba(34, 211, 238, 0.1) 60%,
            transparent 100%);
    background-size: 100% 200%;
    animation: dataFlow 3s linear infinite;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* 1. AI Card (Top Left) */
.bento-card:nth-child(1) {
    grid-column: 1 / 2;
    grid-row: 1 / 2;
}

/* 2. Cube Image (Top Center) */
.bento-card:nth-child(2) {
    grid-column: 2 / 3;
    grid-row: 1 / 2;
    min-height: 300px;
}

/* 3. Headline (Top Right) */
.bento-text-block {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 1.5rem;
    /* Padding on left for spacing */
    text-align: left;
}

/* 4. Vertical Image (Bottom Left) */
.bento-card:nth-child(4) {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
    min-height: 250px;
}

/* 5. Enterprise (Bottom Center) */
.bento-card:nth-child(5) {
    grid-column: 2 / 3;
    grid-row: 2 / 3;
}

/* 6. Exfil (Bottom Right) */
.bento-card:nth-child(6) {
    grid-column: 3 / 4;
    grid-row: 2 / 3;
}

/* Reset Full Height Overrides */
.bento-vertical-image-card {
    grid-row: auto !important;
    min-height: 250px;
    height: auto;
}

/* Specific Content Styles */
/* Specific Content Styles */
.bento-headline {
    font-size: 2.5rem;
    /* Restored size */
    font-weight: 800;
    /* Restored weight */
    line-height: 1.1;
    color: #ffffff !important;
    margin-bottom: 1.5rem;
}

.bento-white-card {
    background: #fff;
    color: #0f172a;
    padding: 2rem;
    /* Restored padding */
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.bento-white-card h3 {
    font-size: 1.5rem;
    /* Restored size */
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #0f172a !important;
}

.bento-white-card p {
    font-size: 1rem;
    /* Restored size */
    line-height: 1.6;
    color: #475569 !important;
}















@media (max-width: 1024px) {
    .bento-grid-layout {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
    }

    .bento-text-block {
        grid-column: 1 / -1;
        text-align: center;
        order: -1;
        margin-bottom: 2rem;
    }

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

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

/* =========================================
   SCALE ON SCROLL (Dark Box Wrapper)
   ========================================= */
.intro-container {
    padding: 0 1rem;
    padding-bottom: 4rem;
}

.inner-black {
    background: #0f172a;
    /* Dark Slate */
    border-radius: 32px;
    padding: 4rem 2rem;
    color: white;
    transform: scale(0.6);
    /* Start small */
    transition: transform 0.1s linear;
    /* Smooth scroll update */
    will-change: transform;
    max-width: 1400px;
    /* Aligned with Main Menu */
    width: 95%;
    margin: 0 auto;
    border: 1px solid #1e293b;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Ensure text inside is visible */
.inner-black h2 {
    color: white;
}

.inner-black p {
    color: #cbd5e1;
    /* Light Slate text */
}

/* Ensure cards inside inner-black still look good */
.inner-black .risk-report-container {
    background: white;
    /* Keep tables white */
    border-radius: 16px;
    padding: 1rem;
    color: #0f172a;
}

/* Bento CTA Specific Alignment */
.bento-cta {
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    min-width: 200px;
}

/* =========================================
   BLOGS PAGE STYLES
   ========================================= */

/* Blog Hero */
.blog-hero {
    padding: 8rem 0 4rem 0;
    text-align: center;
    background: #ffffff;
}

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

.blog-subtitle {
    display: inline-block;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary-blue);
    margin-bottom: 1rem;
    background: rgba(37, 99, 235, 0.1);
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
}

.blog-hero h1 {
    font-size: 3.5rem;
    line-height: 1.1;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: var(--color-text-dark);
}

.blog-hero .hero-desc {
    font-size: 1.25rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

/* Filter Bar (New Design) */
.blog-filter-section {
    padding: 0 0 2rem 0;
    margin-bottom: 3rem;
}

.blog-filter-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.filter-group {
    display: flex;
    gap: 1rem;
}

/* Custom Dropdown */
.custom-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-trigger {
    background: #ffffff;
    border: 1px solid #1a2b44;
    /* Dark blue border */
    color: #1a2b44;
    padding: 0.75rem 1.5rem;
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.2s ease;
    min-width: 160px;
    justify-content: space-between;
}

.dropdown-trigger:hover {
    background: #f8fafc;
}

.dropdown-trigger i {
    font-size: 0.8rem;
    transition: transform 0.2s ease;
}

.custom-dropdown.active .dropdown-trigger i {
    transform: rotate(180deg);
}

.dropdown-menu {
    position: absolute;
    top: 120%;
    left: 0;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    min-width: 200px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.2s ease;
    z-index: 999;
    /* Increased from 50 */
    overflow: hidden;
    max-height: 400px;
    /* Add max height just in case */
    overflow-y: auto;
}

/* ... existing code ... */

.dropdown-item {
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
    color: var(--color-text-dark);
    cursor: pointer;
    transition: background 0.1s ease;
    /* Removed padding transition */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    /* Ensure z-context */
    z-index: 1;
}

.dropdown-item input[type="checkbox"] {
    accent-color: var(--color-primary-blue);
    width: 18px;
    height: 18px;
    min-width: 18px;
    min-height: 18px;
    flex-shrink: 0;
    cursor: pointer;
    position: relative;
    z-index: 2;
    /* Ensure above background */
}

/* ENTERPRISE COLOR CYCLE logic remains... */

.dropdown-item:hover {
    filter: brightness(0.95);
    /* Removed padding-left slide effect */
    transition: all 0.2s ease;
}

.custom-dropdown.active .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ENTERPRISE COLOR CYCLE FOR FILTERS */
/* Cycle 1: Corporate Blue */
.dropdown-item:nth-child(7n+1) {
    background-color: #f0f9ff;
    /* Slate-50/Sky-50 mix */
    border-left: 3px solid #0369a1;
    /* Sky-700 */
}

/* Cycle 2: Success Green */
.dropdown-item:nth-child(7n+2) {
    background-color: #f0fdf4;
    /* Emerald-50 */
    border-left: 3px solid #15803d;
    /* Emerald-700 */
}

/* Cycle 3: Innovation Purple */
.dropdown-item:nth-child(7n+3) {
    background-color: #faf5ff;
    /* Purple-50 */
    border-left: 3px solid #7e22ce;
    /* Purple-700 */
}

/* Cycle 4: Data Slate */
.dropdown-item:nth-child(7n+4) {
    background-color: #f8fafc;
    /* Slate-50 */
    border-left: 3px solid #334155;
    /* Slate-700 */
}

/* Cycle 5: Alert Orange */
.dropdown-item:nth-child(7n+5) {
    background-color: #fff7ed;
    /* Orange-50 */
    border-left: 3px solid #c2410c;
    /* Orange-700 */
}

/* Cycle 6: Trust Teal */
.dropdown-item:nth-child(7n+6) {
    background-color: #ecfeff;
    /* Cyan-50 */
    border-left: 3px solid #0e7490;
    /* Cyan-700 */
}

/* Cycle 7: Security Indigo */
.dropdown-item:nth-child(7n+7) {
    background-color: #eef2ff;
    /* Indigo-50 */
    border-left: 3px solid #4338ca;
    /* Indigo-700 */
}

/* Search Bar */
.blog-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    pointer-events: none;
}

.blog-search-input {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid #1a2b44;
    /* Underline style */
    padding: 0.75rem 1rem 0.75rem 2.5rem;
    font-size: 1rem;
    color: var(--color-text-dark);
    font-family: 'Inter', sans-serif;
    transition: border-color 0.2s ease;
}

.blog-search-input:focus {
    outline: none;
    border-color: var(--color-primary-blue);
}

.blog-search-input::placeholder {
    color: #94a3b8;
}

.results-count {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
}

/* Blog Grid */
.blog-grid-section {
    padding-bottom: 6rem;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.blog-card {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #f1f5f9;
    display: flex;
    flex-direction: column;
}

.blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.blog-img-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
}

.blog-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.blog-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    padding: 0.25rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary-blue);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.blog-content {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.blog-content h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 0.75rem;
    font-weight: 700;
}

.blog-content h3 a {
    color: var(--color-text-dark);
    text-decoration: none;
    transition: color 0.2s;
}

.blog-content h3 a:hover {
    color: var(--color-primary-blue);
}

.blog-content p {
    font-size: 0.95rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.blog-meta {
    font-size: 0.85rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    padding-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Blog Card Tags */
.blog-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    margin-top: auto;
    /* Push to bottom of content area if flex */
}

.card-tag {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    background-color: #f1f5f9;
    color: #64748b;
    border-radius: 99px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.card-tag:hover {
    background-color: #e2e8f0;
    color: var(--color-primary-blue);
    border-color: rgba(0, 122, 255, 0.2);
}

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

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

    .blog-hero h1 {
        font-size: 2.5rem;
    }
}

/* Blogs Page Specifics - Sync Header Background */
body.blog-page header {
    background-color: var(--color-dark-bg);
    /* Force solid dark background to match main page visual */
    backdrop-filter: none;
    /* Disable blur as we are solid */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

/* Blog Pagination */
.pagination-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    gap: 0.5rem;
    padding-bottom: 3rem;
}

.page-btn {
    background-color: rgba(255, 255, 255, 0.05);
    /* Very subtle dark bg */
    border: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    transition: all 0.3s ease;
    min-width: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.page-btn:hover:not(:disabled) {
    background-color: rgba(0, 122, 255, 0.1);
    color: var(--color-primary-blue);
    border-color: var(--color-primary-blue);
}

.page-btn.active {
    background-color: var(--color-primary-blue);
    color: #fff;
    border-color: var(--color-primary-blue);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

.page-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background-color: transparent;
}

.page-dots {
    color: var(--color-text-secondary);
    margin: 0 0.5rem;
    font-weight: bold;
}

/* --- Platform Architecture Visual (About Page) --- */
.platform-architecture {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-top: 2rem;
    position: relative;
    z-index: 10;
}

.pillars-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    width: 100%;
    margin-bottom: 0;
    /* Connects directly to lines */
    z-index: 2;
}

.pillar-card {
    background: var(--color-card-bg);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    /* Visual connection point at bottom */
}

.pillar-card::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 10px;
    background: var(--color-primary-blue);
    opacity: 0.5;
}

.pillar-card:hover {
    transform: translateY(-5px);
    border-color: var(--color-primary-blue);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.pillar-card h3 {
    font-size: 1.25rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

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

.pillar-card .bento-icon {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--color-primary-blue);
}

/* Connector Layer */
.architecture-connectors {
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    justify-content: space-around;
    /* Align with grid columns roughly */
    align-items: flex-end;
    /* Connect to foundation */
    padding: 0 calc(16.66% - 1px);
    /* Center lines under 3 cols */
}

/* Custom connector drawing lines */
.connector-line {
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, rgba(59, 130, 246, 0.5), rgba(59, 130, 246, 1));
    position: relative;
}

/* Dots at the junction */
.connector-line::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -3px;
    width: 8px;
    height: 8px;
    background: var(--color-primary-blue);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--color-primary-blue);
}

/* The Foundation Base */
.platform-foundation {
    width: 100%;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(15, 23, 42, 1) 100%);
    border: 1px solid var(--color-primary-blue);
    border-top-width: 2px;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    position: relative;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Create a grid/tech texture overlay */
    background-image: radial-gradient(rgba(59, 130, 246, 0.1) 1px, transparent 1px);
    background-size: 20px 20px;
}

.platform-foundation h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.platform-foundation p {
    color: var(--color-primary-blue);
    font-family: monospace;
    font-size: 1rem;
    opacity: 0.8;
}

/* 6 Nodes Visual inside Foundation */
.foundation-nodes {
    display: flex;
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.f-node {
    width: 12px;
    height: 12px;
    background: #1e293b;
    border: 1px solid #475569;
    border-radius: 2px;
    /* Square/tech look */
    position: relative;
}

.f-node::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 100%;
    width: 1.5rem;
    height: 1px;
    background: #334155;
}

.f-node:last-child::before {
    display: none;
}

.f-node.active-node {
    background: var(--color-primary-blue);
    box-shadow: 0 0 10px var(--color-primary-blue);
    border-color: #60a5fa;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .pillars-container {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .pillar-card::after {
        display: none;
        /* Hide vertical connectors on mobile stack */
    }

    .architecture-connectors {
        display: none;
        /* Hide complex lines on mobile */
    }

    .platform-foundation {
        margin-top: 1rem;
        border-top-width: 1px;
    }
}

/* =========================================
   FORENSIC DIVIDER LINE
   ========================================= */

.forensic-divider {
    width: 0;
    height: 3px;
    background: #000000;
    /* Black Line */
    margin: 3rem auto;
    position: relative;
}

@keyframes drawLine {
    0% {
        width: 0;
    }

    100% {
        width: 100%;
    }
}

.forensic-divider.animate {
    animation: drawLine 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}



/* 3. Text Fade Up */
@keyframes fadeUpText {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.verify-risk-intro h2,
.verify-risk-intro p {
    opacity: 0;
    /* removed separate transform property so it doesn't conflict yet */
}

.verify-risk-intro.visible h2,
.verify-risk-intro.visible p {
    animation: fadeUpText 0.8s ease forwards;
}

.verify-risk-intro.visible p {
    animation-delay: 0.2s;
}