:root {
    --ease-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

:root {
    --theme-bg: #0f172a; /* Deep Cool Slate */
    --theme-primary: #4f46e5; /* Indigo */
    --theme-secondary: #c084fc; /* Soft Lavender */
    --theme-accent: #818cf8; /* Light Indigo */
    --mouse-x: 50%;
    --mouse-y: 50%;
}

/* --- 1. GLOBAL BACKGROUND (FIXED & SUBTLE) --- */
body {
    margin: 0; padding: 0;
    font-family: 'Inter', sans-serif;
    color: #cbd5e1;
    overflow-x: hidden;
    
    /* RESTORED LEGACY BACKGROUND */
    background-color: #020617;
    background-image:
        radial-gradient(at 20% 30%, rgba(29, 78, 216, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(124, 58, 237, 0.15) 0px, transparent 50%);
    background-attachment: fixed;
    background-size: 100% 100%;
}

/* 1. Global Visuals - Deep Future Background */
#bg-workflow {
    position: fixed;
    inset: 0;
    z-index: -2;
    filter: blur(4px);
    pointer-events: none;
    width: 100vw;
    height: 100vh;
}

#grid-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    /* A precise 40px grid pattern */
    background-image:
        linear-gradient(to right, rgba(79, 70, 229, 0.2) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(79, 70, 229, 0.2) 1px, transparent 1px);
    background-size: 20px 20px;
    /* Strong Spotlight Mask */
    mask-image: radial-gradient(
        circle 400px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        black 0%,
        transparent 100%
    );
    -webkit-mask-image: radial-gradient(
        circle 400px at var(--mouse-x, 50%) var(--mouse-y, 50%),
        black 0%,
        transparent 100%
    );
    pointer-events: none;
}

@keyframes icon-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}
.icon-pulse {
    animation: icon-pulse 3s ease-in-out infinite;
}

/* Glassmorphism Utilities - Optimized for Performance */
.glass-panel {
    background: rgba(255, 255, 255, 0.01) !important;
    backdrop-filter: blur(12px); /* Optimized from 20px */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.02);
    will-change: transform, opacity; /* Hardware Acceleration */
}

.glass-nav {
    background: rgba(255, 255, 255, 0.005);
    backdrop-filter: blur(12px); /* Optimized from 20px */
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

/* Neon Wireframe Nodes (Hero) - Optimized */
.neon-node {
    background: transparent;
    border: 2px solid #3b82f6;
    box-shadow: 0 0 8px rgba(59, 130, 246, 0.6); /* Reduced from 15px */
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    letter-spacing: -0.025em; /* tracking-tight */
    color: #ffffff; /* Default fallback */
}

/* Specific override for colored gradient text to keep it colorful */
.text-gradient {
    background: linear-gradient(to right, #22d3ee, #a855f7) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    padding-right: 0.1em;
    display: inline-block;
    line-height: 1.3;
    padding-bottom: 10px;
}

/* New silver gradient utility */
.text-gradient-silver {
    background: linear-gradient(to bottom, #ffffff, #a3a3a3);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    padding-right: 0.2em;
    padding-bottom: 0.1em;
    display: inline-block;
}

/* 2. Hero Animation - Floating 3D Nodes - Optimized */
@keyframes float-y {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-15px);
    }
}
.animate-float {
    animation: float-y 6s ease-in-out infinite;
    will-change: transform; /* Hardware Acceleration */
}
.animate-float-delay-1 {
    animation: float-y 7s ease-in-out infinite 1s;
    will-change: transform; /* Hardware Acceleration */
}
.animate-float-delay-2 {
    animation: float-y 5s ease-in-out infinite 2s;
    will-change: transform; /* Hardware Acceleration */
}

/* Data Flow SVG Line Animation */
.flow-line {
    stroke-dasharray: 10 10;
    stroke-dashoffset: 100;
    animation: flowAnimation 3s linear infinite;
    will-change: stroke-dashoffset;
}
@keyframes flowAnimation {
    to {
        stroke-dashoffset: 0;
    }
}

/* Mobile Optimization: Reduce Particle Count by 50% */
@media (max-width: 768px) {
    .flow-fast, .flow-mid {
        display: none !important;
    }
    .glass-panel, .glass-nav {
        backdrop-filter: blur(8px); /* Further reduce blur on mobile */
        -webkit-backdrop-filter: blur(8px);
    }
}

/* Pulsing Glow - Optimized */
@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(168, 85, 247, 0.4); /* Reduced from 20px */
    }
    50% {
        box-shadow:
            0 0 20px rgba(168, 85, 247, 0.8), /* Reduced from 40px */
            0 0 40px rgba(168, 85, 247, 0.4); /* Reduced from 80px */
    }
}
.glow-pulse {
    animation: pulse-glow 3s infinite ease-in-out;
    will-change: box-shadow; /* Hardware Acceleration */
}

/* 3. Bento Grid - Spotlight & Reveal */
.bento-card {
    transition: transform 0.4s var(--ease-spring), border-color 0.3s ease;
}
.bento-card:hover {
    transform: scale(1.02);
    border-color: rgba(139, 92, 246, 0.5); /* Purple glow */
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.15);
}

/* Scroll Reveal */
.reveal-up {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease, transform 0.8s var(--ease-spring);
}
.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* 4. Timeline Animation */
.timeline-line-fill {
    height: 0;
    background: linear-gradient(to bottom, #22d3ee, #a855f7);
    box-shadow: 0 0 15px rgba(34, 211, 238, 0.6);
    transition: height 0.1s linear;
}

.timeline-node {
    transition: all 0.5s var(--ease-spring);
}
.timeline-node.active {
    transform: scale(1.2);
    background-color: #fff;
    box-shadow: 0 0 20px rgba(34, 211, 238, 0.8);
}
.timeline-node.active i, .timeline-node.active iconify-icon {
    color: #000 !important;
}

/* 5. Button Shimmer */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}
.btn-shimmer::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.4),
        transparent
    );
    transform: skewX(-25deg);
    animation: shimmer 4s infinite;
}
@keyframes shimmer {
    0%, 80% {
        left: -100%;
    }
    100% {
        left: 200%;
    }
}

/* 6. Chart Animation */
.chart-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 2.5s ease-out;
}
.chart-path.draw {
    stroke-dashoffset: 0;
}

.chart-area {
    opacity: 0;
    transition: opacity 2s ease-out 0.5s;
}
.chart-area.draw {
    opacity: 1;
}

.chart-dot {
    opacity: 0;
    transform: scale(0);
    transition: all 0.5s var(--ease-spring);
}
.chart-dot.draw {
    opacity: 1;
    transform: scale(1);
}

/* 7. Orbit Animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes spin-reverse {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

.animate-spin-slow {
    animation: spin 30s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.animate-spin-slower {
    animation: spin 45s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}
.animate-spin-reverse {
    animation: spin-reverse 30s linear infinite;
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

.orbit-ring {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
}

.pulse-strong {
    animation: pulse-strong 3s infinite;
}
@keyframes pulse-strong {
    0% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(168, 85, 247, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(168, 85, 247, 0);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #050505;
}
::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Stable Hover Effect - No Glitch */
.hex-node {
    cursor: pointer;
    transition: all 0.3s ease;
}
/* Hover State: Only change stroke and glow, DO NOT MOVE/TRANSLATE */
.hex-node:hover .hex-border {
    stroke: #ffffff;
    stroke-width: 3px;
    filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
}
.hex-node:hover text {
    fill: #ffffff;
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
}
/* Inner icons pulse slightly on hover */
.hex-node:hover path:not(.hex-border) {
    filter: drop-shadow(0 0 5px currentColor);
}

/* --- CONTROL DECK STYLES --- */
:root {
    --form-accent: #4f46e5; /* Indigo */
    --form-radius: 12px;
}

/* 1. Main Deck Container */
.control-deck {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    filter: drop-shadow(0 20px 40px rgba(0, 0, 0, 0.6));
}

/* 2. Side Wings (Modulators) - Refined "Rail" Look */
.wing-panel {
    width: 36px; /* Ultra Slim */
    background: rgba(8, 12, 25, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 15px 0;
    gap: 12px;
    transition: all 0.3s ease;
    flex-shrink: 0;
}
.wing-panel.left-wing {
    border-radius: 12px 0 0 12px;
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    margin-right: -1px;
}
.wing-panel.right-wing {
    border-radius: 0 12px 12px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.15);
    margin-left: -1px;
}

/* 3. Center Core (Main Form) - Taller & Flex Column */
.deck-core {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 520px; /* Taller presence */
    background: rgba(2, 6, 23, 0.9); /* Darker backdrop */
    backdrop-filter: blur(15px); /* Optimized from 30px */
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid var(--form-accent);
    border-radius: var(--form-radius);
    padding: 30px;
    position: relative;
    z-index: 10;
    box-shadow:
        0 0 25px rgba(0, 0, 0, 0.7), /* Optimized from 50px */
        inset 0 0 20px rgba(255, 255, 255, 0.02);
    transition: border-radius 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 4. Controls (Color Swatches) */
.color-swatch {
    width: 14px; /* Smaller tech dots */
    height: 14px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}
.color-swatch::after {
    content: "";
    position: absolute;
    inset: 2px;
    border-radius: 50%;
    background: var(--swatch-color);
    box-shadow: 0 0 5px var(--swatch-color);
    opacity: 0.5;
}
.color-swatch:hover {
    transform: scale(1.2);
    border-color: #fff;
}
.color-swatch:hover::after {
    opacity: 1;
}
.color-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 8px var(--swatch-color);
}
.color-swatch.active::after {
    opacity: 1;
    inset: 1px;
}

/* 5. Controls (Shape Buttons) */
.shape-btn {
    width: 28px;
    height: 28px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #64748b;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
}
.shape-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}
.shape-btn.active {
    background: #c084fc; /* Lavender */
    border-color: #c084fc;
    color: #fff;
    box-shadow: 0 0 15px rgba(192, 132, 252, 0.6);
}
.shape-btn.active svg {
    stroke: #000;
}

/* 6. Form Internals & Layout */
.core-title {
    color: var(--form-accent);
    font-size: 11px;
    letter-spacing: 2px;
    font-weight: bold;
    margin-bottom: 25px;
    text-align: center;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    flex-shrink: 0;
}
.deck-input-group {
    margin-bottom: 20px; /* Increased Spacing */
    flex-shrink: 0;
}
.deck-input-group.fill-space {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.deck-input-group label {
    display: block;
    color: #94a3b8;
    font-size: 10px;
    margin-bottom: 8px;
    letter-spacing: 1px;
}
.deck-input {
    display: block;
    width: 100%;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 14px; /* More padding */
    color: #fff;
    font-family: "Courier New", monospace;
    font-size: 13px;
    border-radius: var(--form-radius);
    transition: all 0.3s;
}
/* Textarea Handling - Critical Fix */
textarea.deck-input {
    resize: vertical;
    height: 100%;
    min-height: 80px;
}

/* 7. Decoration Styles */
.tech-line {
    width: 1px;
    flex-grow: 1;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
}
.deco-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #334155;
}
.deco-dot.red {
    background: #ef4444;
    box-shadow: 0 0 5px #ef4444;
}
.deco-dot.green {
    background: #22c55e;
    box-shadow: 0 0 5px #22c55e;
}

.serial-num {
    font-size: 8px;
    color: #475569;
    font-family: monospace;
    letter-spacing: 1px;
    margin-top: auto; /* Push to bottom */
    opacity: 0.6;
}

.deck-input:focus {
    outline: none;
    border-color: var(--form-accent);
    box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.05);
}

.upload-btn {
    width: 100%;
    padding: 14px;
    background: linear-gradient(90deg, #4f46e5, #c084fc);
    color: #fff;
    border: none;
    font-weight: bold;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    cursor: pointer;
    margin-top: 20px; /* Spacing from textarea */
    border-radius: var(--form-radius);
    box-shadow: 0 0 20px var(--form-accent);
    transition: all 0.3s;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    flex-shrink: 0; /* Keep button visible */
}

/* =========================================
   Philosophy Section (Scroll-Scrub) 
   ========================================= */
#philosophy-section {
    padding: 60px 20px 140px 20px; /* Adjusted spacing: Tight top, Deep bottom */
    background-color: var(--theme-bg, #020617);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background: radial-gradient(circle at center, rgba(79, 70, 229, 0.08) 0%, transparent 70%); /* Subtle spotlight */
}
.philosophy-content { 
    max-width: 1100px; /* Wider container */
    position: relative; 
    /* Add a very faint grid background behind the text */
    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: 40px 40px;
    padding: 40px; /* Give room for the grid */
}

/* Create Tech Corners using pseudo-elements */
.philosophy-content::before,
.philosophy-content::after {
    content: '';
    position: absolute;
    width: 20px; height: 20px;
    border: 1px solid rgba(129, 140, 248, 0.4); /* Indigo dim */
    transition: all 0.5s ease;
}
/* Top Left & Top Right corners */
.philosophy-content::before {
    top: 0; left: 0;
    border-right: none; border-bottom: none; /* Make it an 'L' shape */
    box-shadow: -2px -2px 10px rgba(79, 70, 229, 0.2);
}
/* Bottom Right & Bottom Left corners (inverted 'L' shape via after) */
.philosophy-content::after {
    bottom: 0; right: 0;
    border-left: none; border-top: none; 
    box-shadow: 2px 2px 10px rgba(79, 70, 229, 0.2);
}

/* Labels */
.label-top, .label-bottom {
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #cbd5e1; /* Brighter Slate */
    text-shadow: 0 0 10px rgba(79, 70, 229, 0.3); /* Subtle glow */
    margin-bottom: 2rem;
    font-weight: 600;
}
.label-bottom {
    margin-top: 2rem;
    margin-bottom: 0;
}
.bracket-color {
    color: #818cf8; /* Brighter Indigo */
    text-shadow: 0 0 8px rgba(79, 70, 229, 0.6);
}

/* The Main Headline */
#manifesto-text {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 2.5rem; /* Reduced size */
    line-height: 1.4; /* Better readability */
    font-weight: 500;
    letter-spacing: -0.02em; /* Tight editorial tracking */
    color: rgba(255, 255, 255, 0.1); /* Default dim state */
    margin: 0;
}

/* Individual Words (Handled by JS) */
.scrub-word {
    opacity: 0.15; /* Slightly visible start state */
    color: rgba(255, 255, 255, 0.15);
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), color 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s ease; /* Very slow, luxury feel */
    display: inline-block;
    will-change: opacity, color;
}
.scrub-word.active {
    opacity: 1;
    color: #ffffff;
    transform: translateY(0);
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.4); /* Soft bloom */
}

/* Special Italics */
.glow-italic {
    font-family: 'Playfair Display', serif; /* Or system serif */
    font-style: italic;
    color: #c084fc; /* Lavender accent */
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    #manifesto-text {
        font-size: 2rem;
    }
}

/* =========================================
   Aura Features Grid 
   ========================================= */
/* Section & Grid */
/* =========================================
   Aura Features Grid 
   ========================================= */
/* Section & Grid */
#aura-features { 
    padding: 80px 20px; 
    background: var(--theme-bg); 
    display: flex; 
    flex-direction: column; /* Stack header and grid */
    align-items: center;
}
.features-header { 
    text-align: center; 
    margin-bottom: 60px; 
}
.features-header h2 { 
    font-size: 2.5rem; 
    color: white; 
    margin: 10px 0; 
}
.features-header p { 
    color: #94a3b8; 
    max-width: 600px; 
    margin: 0 auto; 
}

.features-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 30px; 
    max-width: 1200px; 
    width: 100%; 
}

/* Premium Card Base (Deep Dark Glass) */
.aura-card {
    /* NEW: Softer, slightly lighter dark blue with transparency */
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
    
    /* Add a refined border to define edges since BG is lighter */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); /* Softer shadow */
    height: 520px;
    display: flex;
    flex-direction: column;
} 
/* THE GLOWING RIM LIGHT (Top Border) */
.aura-card::before { 
    content: ''; 
    position: absolute; 
    inset: 0; 
    padding: 1px; /* Thickness of border */
    border-radius: 24px; 
    /* Top is bright Indigo/White, bottom is dark/transparent */
    background: linear-gradient(180deg, rgba(129, 140, 248, 0.6), rgba(79, 70, 229, 0.1) 40%, transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); 
    -webkit-mask-composite: xor; 
    mask-composite: exclude; 
    pointer-events: none; 
} 
/* Hover State - Intensity */
.aura-card:hover { 
    transform: translateY(-10px) scale(1.02); 
    box-shadow: 0 30px 60px -10px rgba(79, 70, 229, 0.3); 
}
.aura-card:hover::before { 
    background: linear-gradient(180deg, rgba(192, 132, 252, 0.8), rgba(129, 140, 248, 0.3) 50%, transparent 100%);
}

/* Content Styling (Text Top) */ 
.card-content { 
    padding: 30px 30px 0 30px; 
    margin-bottom: 20px;
    z-index: 2; /* Sit above any visual bleed */
} 
.aura-card h3 { 
    margin: 0 0 12px 0; 
    font-size: 1.5rem; /* Larger title */
    color: #fff; 
    font-weight: 500; 
} 
.card-desc { 
    color: #94a3b8; 
    font-size: 0.95rem; 
    line-height: 1.6; 
    margin: 0; 
}

/* --- VISUALS REDESIGN (Animated) --- */
.card-visual { 
    flex-grow: 1; /* Occupy remaining space */
    background: transparent; 
    border: none;
    display: flex; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    overflow: visible; /* Allow 3D elements to look grand */
}

/* VISUAL 1: TERMINAL PRO */ 
.visual-terminal-pro { 
    align-items: flex-end; /* Push terminal towards bottom */
    padding-bottom: 40px;
} 
.term-window { 
    width: 85%; 
    background: rgba(255, 255, 255, 0.03); /* Lighter contrast */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Distinct border */
    /* Subtle inner screen glow */
    box-shadow: inset 0 0 30px rgba(79, 70, 229, 0.05);
    border-radius: 12px; 
    padding: 20px; 
    position: relative;
    overflow: hidden;
} 
/* Glass Reflection Overlay */
.term-window::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.08) 0%, transparent 40%);
    pointer-events: none;
}

.term-title { 
    font-size: 10px; 
    color: #475569; 
    letter-spacing: 1px; 
} 
.term-row { 
    font-size: 11px; 
    color: #cbd5e1; 
    margin-top: 10px; 
} 
.term-row.sub { 
    color: #64748b; 
    margin-top: 4px; 
} 
.highlight-text { color: white; font-weight: bold; } 
.green { color: #22c55e; } 
.progress-container { 
    height: 4px; 
    background: #1e293b; 
    margin: 15px 0; 
    border-radius: 2px; 
    overflow: hidden; 
} 
.progress-bar { 
    height: 100%; 
    background: #4f46e5; 
    width: 0%; 
    animation: loadProgress 3s ease-in-out infinite; 
    box-shadow: 0 0 15px #4f46e5;
} 
.term-footer { 
    display: flex; 
    justify-content: space-between; 
    font-size: 10px; 
    font-family: monospace; 
} 
.status-blink { 
    color: #4f46e5; 
    animation: blink 1s infinite; 
} 
@keyframes loadProgress { 
    0% { width: 10%; } 
    50% { width: 60%; } 
    100% { width: 100%; } 
}

/* VISUAL 2: SYSTEM SPHERES (Organic Floating Cloud) */ 

/* 1. Scene Setup - No Tilt Needed */
.system-organic {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    overflow: hidden; /* Ensure they don't fly out of the card */
    perspective: 1200px; /* Deeper perspective for the wider range */
    /* Lift the whole system up by 40px away from the floor */
    transform: translateY(-40px);
}

/* 2. Core Style */ 
.core-sphere { 
    width: 70px; height: 70px; 
    z-index: 20; 
    background: radial-gradient(circle at 30% 30%, #4f46e5, #0f172a 80%); 
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 0 50px rgba(79, 70, 229, 0.7); 
    position: absolute; 
    top: 50%; left: 50%; margin: -35px; 
} 
.floating-core { animation: CoreHover 5s ease-in-out infinite; } 
@keyframes CoreHover { 
    0%, 100% { transform: translateY(-5px) scale(1); } 
    50% { transform: translateY(5px) scale(1.05); } 
}

/* 3. Planet Sphere Base Style */
.planet-sphere { 
    /* Reduced from 54px to 38px */
    width: 38px; height: 38px; 
    position: absolute; 
    top: 50%; left: 50%; 
    /* Recenter */
    margin: -19px 0 0 -19px;
    border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    color: white; 
    /* Solid, premium sphere look */
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(15, 23, 42, 0.95) 70%); 
    border: 1px solid rgba(255,255,255,0.3); 
    box-shadow: 0 5px 15px rgba(0,0,0,0.5), inset 0 2px 5px rgba(255,255,255,0.2); 
    /* IMPORTANT: Ensure they always face forward */
    transform-style: preserve-3d;
    backface-visibility: hidden; 
    
    /* Make the movement smoother */
    transition: transform 0.5s ease-out; 
    will-change: transform;
}
.planet-sphere svg { width: 22px; height: 22px; }

/* 4. LIGHTWEIGHT NEURAL ANIMATION (Floating Nodes) */

.planet-sphere {
    /* Base Styles */
    position: absolute;
    width: 40px; height: 40px;
    z-index: 10;
    
    /* Performance: Offload to GPU */
    will-change: transform;
    
    /* Animation (set by JS) */
    /* animation: floatX 10s ease-in-out infinite; */
}

/* Float 1: Gentle Vertical/Horizontal Drift */
@keyframes float1 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    33% { transform: translate3d(15px, -15px, 0); }
    66% { transform: translate3d(-10px, 15px, 0); }
}

/* Float 2: Wide Horizontal Stretch */
@keyframes float2 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-20px, 10px, 0); }
}

/* Float 3: Triangle Path */
@keyframes float3 {
    0%, 100% { transform: translate3d(0, 0, 0); }
    33% { transform: translate3d(15px, 15px, 0); }
    66% { transform: translate3d(-15px, 5px, 0); }
}

/* Clean up old stuff */
.orbit-pivot, .system-organic.start-rotation { display: none; animation: none; }
.float-path-1, .float-path-2, .float-path-3, 
.float-path-4, .float-path-5, .float-path-6 {
    animation: none;
    top: auto;
    left: auto;
}

/* Node Specific Glows */ 
.node-whatsapp { color: #22c55e; box-shadow: 0 0 25px rgba(34, 197, 94, 0.5); } 
.node-mail { color: #facc15; box-shadow: 0 0 25px rgba(250, 204, 21, 0.5); } 
.node-github { color: #fff; box-shadow: 0 0 25px rgba(255, 255, 255, 0.5); } 
.node-ai { color: #c084fc; box-shadow: 0 0 30px rgba(192, 132, 252, 0.7); }
.node-db { color: #f97316; box-shadow: 0 0 25px rgba(249, 115, 22, 0.5); } /* Orange */
.node-webhook { color: #06b6d4; box-shadow: 0 0 25px rgba(6, 182, 212, 0.5); } /* Cyan */

/* Subtle floor glow */ 
.holo-floor-glow { 
    position: absolute; 
    bottom: -20px; 
    width: 200px; height: 200px; 
    background: radial-gradient(rgba(79, 70, 229, 0.15), transparent 70%); 
    transform: rotateX(90deg); 
} 

/* VISUAL 3: GOVERNANCE UI (Transaction Gate) */
.visual-governance {
    align-items: center; justify-content: center;
}

/* Container */
.gov-interface {
    width: 85%;
    background: rgba(15, 23, 42, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    display: flex; flex-direction: column; gap: 15px;
}

/* Header */
.gov-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } 
.status-badge { 
    font-size: 10px; font-weight: 700; color: #fbbf24; 
    background: rgba(251, 191, 36, 0.1); 
    padding: 4px 8px; border-radius: 4px; 
    display: flex; align-items: center; gap: 6px; 
} 
.status-dot { width: 6px; height: 6px; background: #fbbf24; border-radius: 50%; animation: blinkStatus 1.5s infinite; } 
.timestamp { font-size: 10px; color: #64748b; font-family: monospace; }

/* Ticket Info */ 
.gov-ticket { background: rgba(255, 255, 255, 0.03); border-radius: 8px; padding: 12px; } 
.ticket-row { display: flex; justify-content: space-between; margin-bottom: 6px; font-size: 11px; } 
.ticket-row:last-child { margin-bottom: 0; } 
.ticket-label { color: #94a3b8; } 
.ticket-value { color: #e2e8f0; font-weight: 500; font-family: monospace; } 
.ticket-value.highlight { color: #f87171; }

/* AI Audit Box (The 'Meaning' part) */ 
.ai-audit-box { 
    display: flex; gap: 10px; align-items: center; 
    background: linear-gradient(90deg, rgba(34, 197, 94, 0.1), transparent); 
    border-left: 2px solid #22c55e; 
    padding: 10px; border-radius: 0 8px 8px 0; 
} 
.ai-icon { color: #22c55e; } 
.audit-text { display: flex; flex-direction: column; } 
.audit-title { font-size: 11px; color: #22c55e; font-weight: bold; } 
.audit-sub { font-size: 9px; color: #94a3b8; }

/* Slider Action Animation */ 
.gov-action-area { margin-top: 5px; } 
.slide-track { 
    height: 40px; background: #1e293b; border-radius: 20px; 
    position: relative; display: flex; align-items: center; justify-content: center; 
    border: 1px solid rgba(255,255,255,0.1); overflow: hidden; 
} 
.slide-text { 
    font-size: 10px; letter-spacing: 2px; font-weight: 700;
    /* Gradient text for shimmer effect */
    background: linear-gradient(90deg, #64748b 0%, #ffffff 50%, #64748b 100%);
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent; /* Essential for background-clip */
    animation: shimmerText 3s infinite linear;
} 
.slide-thumb { 
    /* Lock position */
    position: absolute; left: 4px; top: 4px; bottom: 4px;
    width: 32px; 
    background: #4f46e5;
    border-radius: 50%; 
    color: white;
    display: flex; align-items: center; justify-content: center;
    /* Remove old animation, add subtle glow pulse */
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.5);
    animation: thumbPulse 3s infinite ease-in-out;
    cursor: pointer;
    transition: transform 0.2s;
}
.slide-thumb:hover { transform: scale(1.1); }

/* ANIMATIONS */ 
@keyframes blinkStatus { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } 
@keyframes shimmerText { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes thumbPulse { 
    0%, 100% { box-shadow: 0 0 10px rgba(79, 70, 229, 0.5); transform: scale(1); } 
    50% { box-shadow: 0 0 20px rgba(79, 70, 229, 0.9); transform: scale(1.05); } 
}


/* VISUAL 1: HYPER-VISOR HUD (Iron Man Style) */
/* Container & Theme */
.hud-theme {
    background: transparent; 
    position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    height: 100%; width: 100%;
}
/* 1. Background Grid */ 
.hud-grid { 
    position: absolute; inset: 0; 
    background-image: linear-gradient(rgba(79, 70, 229, 0.1) 1px, transparent 1px), 
                      linear-gradient(90deg, rgba(79, 70, 229, 0.1) 1px, transparent 1px); 
    background-size: 40px 40px; 
    opacity: 0.3; 
    transform: perspective(500px) rotateX(20deg); /* Slight 3D floor effect */ 
}

/* 2. HUD Rings (Centered & Big) */ 
.hud-ring-container { 
    position: relative; width: 280px; height: 280px; /* Much Bigger */ 
    display: flex; align-items: center; justify-content: center; 
}

.hud-ring { 
    position: absolute; border-radius: 50%; 
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.2); 
}

/* Ring 1: Outer Static Scale */ 
.ring-1 { 
    width: 100%; height: 100%; 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    border-bottom: 2px solid #4f46e5; 
    border-top: 2px solid #4f46e5; 
    animation: spinSlow 20s linear infinite; 
}

/* Ring 2: Dashed Moving Ring */ 
.ring-2 { 
    width: 80%; height: 80%; 
    border: 2px dashed rgba(34, 197, 94, 0.5); /* Greenish */ 
    animation: spinReverse 10s linear infinite; 
}

/* Ring 3: Inner Fast Spinner */ 
.ring-3 { 
    width: 60%; height: 60%; 
    border: 1px solid transparent; 
    border-top: 4px solid #facc15; /* Yellow Warning */ 
    border-radius: 50%; 
    animation: spinFast 12s linear infinite; 
}

/* Radar Sweep Effect */ 
.radar-sweep { 
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: conic-gradient(from 0deg, transparent 70%, rgba(79, 70, 229, 0.5)); 
    border-radius: 50%; 
    animation: radarSpin 4s linear infinite; 
    filter: blur(5px); 
}

/* Radar Blips (Intermittent Detection) */
.radar-blip {
    position: absolute;
    width: 6px; height: 6px;
    background: #f87171; /* Bright coral/red for detection */
    border-radius: 50%;
    box-shadow: 0 0 15px #f87171;
    opacity: 0; /* Hidden by default */
    z-index: 5;
}
/* Positioning and Unique Animation Timing */
/* Blip 1: Top right quadrant */ 
.blip-1 { top: 25%; right: 28%; animation: intermittentFlash 6s ease-out infinite 1s; }

/* Blip 2: Bottom left quadrant */ 
.blip-2 { bottom: 30%; left: 22%; animation: intermittentFlash 8s ease-out infinite 3.5s; }

/* Blip 3: Near center right */ 
.blip-3 { top: 55%; right: 38%; animation: intermittentFlash 5s ease-out infinite 0s; }

/* The Flash Animation - Only visible briefly in the middle of the cycle */ 
@keyframes intermittentFlash { 
    0%, 30% { opacity: 0; transform: scale(0.5); } 
    35% { opacity: 1; transform: scale(1.5); } /* The flash peak */ 
    40%, 100% { opacity: 0; transform: scale(0.5); } 
}

/* Center Core */ 
.hud-core { 
    width: 40px; height: 40px; 
    background: #4f46e5; border-radius: 50%; 
    display: flex; align-items: center; justify-content: center; 
    z-index: 10; 
    box-shadow: 0 0 30px #4f46e5, inset 0 0 10px white; 
    animation: corePulse 1s alternate infinite; 
} 
.core-text { font-size: 8px; font-weight: bold; color: white; }

/* 3. Labels (Stuck to HUD, not corners) */ 
.hud-label { 
    position: absolute; 
    background: rgba(15, 23, 42, 0.8); 
    padding: 4px 8px; 
    border-radius: 4px; 
    border: 1px solid rgba(255,255,255,0.1); 
    font-family: monospace; font-size: 10px; color: #cbd5e1; 
    display: flex; gap: 6px; align-items: center; 
} 
.label-top { top: -40px; } 
.label-bottom { bottom: -40px; } 
.label-icon { color: #facc15; animation: blink 1s infinite; }

/* Animations */ 
@keyframes spinSlow { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 
@keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } 
@keyframes spinFast { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } 
@keyframes radarSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } 
@keyframes corePulse { from { transform: scale(1); opacity: 0.9; } to { transform: scale(1.1); opacity: 1; } } 
@keyframes blink { 50% { opacity: 0; } }

/* SLIDER INTERACTIVE STATES (JS) */
/* Approved Status Header */
.status-badge.approved {
    color: #22c55e; /* Green */
    background: rgba(34, 197, 94, 0.1);
}
.status-badge.approved .status-dot {
    background: #22c55e;
    box-shadow: 0 0 10px #22c55e;
    animation: none; /* Stop blinking, solid green */
}
/* Approved Slider State */ 
.slide-track.approved { border-color: rgba(34, 197, 94, 0.3); } 
.slide-thumb.approved { 
    background: #22c55e; /* Green thumb */
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.6); 
    animation: none; /* Stop pulsing */
} 
/* Hide text when approved */ 
.slide-track.approved .slide-text { opacity: 0; transition: opacity 0.3s; }

/* VISUAL: WARP DRIVE (Left Card - Infinite Context) */
.visual-warp-drive {
    position: relative; width: 100%; height: 100%;
    overflow: hidden;
    /* Clearer background */
    background: linear-gradient(90deg, #020617 0%, #0f172a 100%);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 20px;
}
.warp-stream-tracks {
    display: flex; flex-direction: column; gap: 12px;
    width: 80%; overflow: hidden;
}
.stream-track-row {
    display: flex; white-space: nowrap;
    font-family: monospace; font-weight: 700;
    /* Ensure width is wide enough for double content */
    width: 200%;
}
.stream-track-row span { width: 50%; flex-shrink: 0; }
.track-fast { color: #7dd3fc; font-size: 11px; text-shadow: 0 0 5px rgba(125, 211, 252, 0.5); animation: infiniteScroll 4s linear infinite; } 
.track-slow { color: #334155; font-size: 10px; animation: infiniteScroll 8s linear infinite; }

/* The seamless loop magic */ 
@keyframes infiniteScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

.warp-core { 
    position: relative; width: 4px; height: 60px; background: #fff; 
    border-radius: 4px; 
    box-shadow: 0 0 20px #0ea5e9, 0 0 40px #3b82f6; /* Massive Glow */ 
    margin-right: 10px; 
} 
.core-beam { 
    position: absolute; top: 50%; right: 0; 
    width: 200px; height: 2px; 
    background: linear-gradient(90deg, #fff, transparent); 
    transform: translateY(-50%); z-index: -1; opacity: 0.5; 
} 
.core-flash { 
    position: absolute; inset: -2px; 
    background: white; opacity: 0; 
    animation: flashPulse 0.1s infinite alternate; 
}

@keyframes slideFast { from { transform: translateX(-20%); } to { transform: translateX(0%); } } 
@keyframes flashPulse { from { opacity: 0; } to { opacity: 0.8; } }

/* EMERGENCY FIX: Stop Hero Form Animation */
.hero-form, form, .hero-section form {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Bento Description Text */
/* Bento Description Text */
/* 3. BOOST TYPOGRAPHY (Make it readable) */
.bento-description {
    font-size: 1rem !important; /* Force readable body text */
    line-height: 1.5;
    color: #94a3b8; 
    max-width: 100%;
}

/* 3. FORCE BIGGER TYPOGRAPHY GLOBAL */
.bento-content h3 { 
    font-size: 1.4rem !important; /* Force bigger header */
    font-weight: 700;
    margin-bottom: 6px;
    color: #f8fafc;
    line-height: 1.1;
}

/* Ensure Icon Positioning is Absolute Top-Left */
/* 1. RESET CARD LAYOUT (Use Flex Column) */
/* 1. RESET LAYOUT FLOW (Fixes overlaps) */
.bento-card {
    display: flex; flex-direction: column;
    padding: 24px; gap: 12px;
    position: relative; overflow: hidden;
}
/* 2. FIX ICON POSITIONING (No more absolute) */
/* 2. ICON GLOW & POSITIONING */
.bento-icon-container {
    position: relative; /* In normal flow */
    width: 44px; height: 44px;
    /* New Glow Style */
    background: rgba(79, 70, 229, 0.2); /* Slight purple tint */
    border: 1px solid rgba(99, 102, 241, 0.4); /* Brighter border */
    box-shadow: 0 0 15px rgba(79, 70, 229, 0.3); /* The Glow */
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #a5b4fc; /* Brighter icon color */
    flex-shrink: 0;
}


/* VISUAL: SIMPLE SECURITY (Right Card - Enterprise Guardrails) */
/* 4. FIX SECURITY VISUAL LAYOUT */
/* 4. FIX RIGHT CARD LAYOUT SPECIFICALLY */
.visual-simple-security {
    background: transparent;
    position: relative; width: 100%; height: 100%;
    display: flex; flex-direction: column; align-items: center;
    /* Remove spacing that pushes it down */
    padding-top: 0;
    padding-bottom: 20px;
    margin-top: -10px; /* Pull visual up closer to text */
    flex-grow: 1; 
    justify-content: center; /* Center vertically in available space */
    text-align: center;
    gap: 20px;
}
.simple-grid { 
    position: absolute; inset: 0; 
    background-image: radial-gradient(rgba(16, 185, 129, 0.2) 1px, transparent 1px); 
    background-size: 24px 24px; 
    opacity: 0.2; 
}

/* The Lock */ 
/* Ensure the Lock doesn't touch the text */
.main-lock-container { 
    position: relative; margin-bottom: 5px; /* Reduce gap below lock */
    transform: scale(1.1); /* Make lock slightly bigger */
} 
.lock-body { 
    color: #10b981; z-index: 2; position: relative; 
    filter: drop-shadow(0 0 15px #10b981); 
} 
.lock-glow-pulse { 
    position: absolute; top: 50%; left: 50%; 
    transform: translate(-50%, -50%); 
    width: 60px; height: 60px; 
    background: #10b981; border-radius: 50%; 
    opacity: 0.2; filter: blur(20px); 
    animation: deepPulse 3s infinite; 
}

/* The Text */ 
/* The Text */ 
.security-message { width: 100%; padding: 0 10px; z-index: 2; } 
.message-title { 
    display: block; font-size: 18px; /* Stronger title */
    color: #34d399; letter-spacing: 1px;
    font-weight: 700; margin-bottom: 8px; text-transform: uppercase; 
} 
.message-body { 
    font-size: 15px; /* Readable body */
    color: #cbd5e1; 
    max-width: 90%; line-height: 1.5; margin: 0 auto; 
}

@keyframes deepPulse { 
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.2; } 
    50% { transform: translate(-50%, -50%) scale(1.3); opacity: 0.4; } 
}

@keyframes hitShield1 { 
    0% { transform: translate(-80px, -50px); opacity: 1; } 
    50% { transform: translate(-32px, -20px); opacity: 1; } /* Impact point */ 
    55% { transform: translate(-32px, -20px) scale(2); opacity: 0; background: #34d399; } /* Deflected */ 
    100% { opacity: 0; } 
} 
@keyframes hitShield2 { 
    0% { transform: translate(80px, 50px); opacity: 1; } 
    50% { transform: translate(32px, 20px); opacity: 1; } 
    55% { transform: translate(32px, 20px) scale(2); opacity: 0; background: #34d399; } 
    100% { opacity: 0; } 
} 
@keyframes pulseShield { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.8; } }

/* Card 3 Visual Container */
.visual-neural-pulse {
    position: relative; width: 100%; height: 100%;
    min-height: 120px; /* Ensure height for visual */
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
/* Background Grid */ 
.pulse-grid { 
    position: absolute; inset: 0; 
    background-image: linear-gradient(rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.05) 1px, transparent 1px); 
    background-size: 20px 20px; 
}

/* Big Latency Counter */ 
.latency-counter { 
    position: absolute; z-index: 5; 
    font-weight: 800; color: #fff; 
    text-shadow: 0 0 20px rgba(255,255,255,0.5); 
    display: flex; align-items: baseline; 
} 
.latency-val { 
    font-size: 3rem; line-height: 1; 
    animation: fluctuateValue 0.5s infinite alternate; 
} 
.latency-unit { 
    font-size: 1.5rem; color: #94a3b8; margin-left: 5px; 
}

/* The Pulse Line Graph */ 
.pulse-graph { 
    position: absolute; bottom: 0; left: 0; 
    width: 200%; /* Make SVG twice as wide as container */
    height: 60%; 
    animation: scrollGraph 2s linear infinite; 
} 
.pulse-line { 
    fill: none; stroke: #facc15; /* Yellow/Gold for speed */
    stroke-width: 3px; 
    filter: drop-shadow(0 0 10px #facc15); 
    vector-effect: non-scaling-stroke; 
}

/* Live Indicator */ 
.live-indicator { 
    position: absolute; top: 10px; right: 10px; 
    font-size: 10px; font-weight: 700; color: #facc15; 
    display: flex; align-items: center; gap: 5px; 
    background: rgba(250, 204, 21, 0.1); 
    padding: 4px 8px; border-radius: 4px; 
} 
.live-dot { 
    width: 6px; height: 6px; 
    background: #facc15; border-radius: 50%; 
    animation: blink 1s infinite; 
}

/* Animations */ 
/* Animations */ 
@keyframes scrollGraph { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* Move exactly half way */ }
@keyframes fluctuateValue { 
    0% { opacity: 1; transform: scale(1); text-shadow: 0 0 20px rgba(255,255,255,0.5); } 
    100% { opacity: 0.8; transform: scale(0.98); text-shadow: 0 0 10px rgba(255,255,255,0.3); } 
}

/* Chart Text Styling */
.chart-stat { margin: 20px 0; }
.stat-val { display: block; font-size: 3.5rem; font-weight: 800; color: #34d399; line-height: 1; }
.stat-label { font-size: 1.1rem; color: #cbd5e1; font-weight: 600; }
/* Fix Chart Container Padding */
.chart-visual-col {
    padding-bottom: 30px; /* Ensure SVG doesn't clip at bottom */
}
/* Make Before Line Visible */
.line-before {
    stroke: #64748b;
    stroke-width: 4px; /* Thicker */
    opacity: 0.7; /* Much more opaque */
    stroke-dasharray: 10, 5;
}
/* Adjust After Line Glow */
.line-after {
    stroke: #34d399;
    stroke-width: 5px;
    filter: drop-shadow(0 0 12px rgba(52, 211, 153, 0.5));
}

/* Mobile Stack for Chart Section */
@media (max-width: 768px) {
    .chart-section-container { flex-direction: column; gap: 40px; }
    .chart-text-col, .chart-visual-col { width: 100%; }
    .efficiency-chart { height: 180px; } /* Shorter on mobile */
}

/* --- DEBUG & OVERRIDE SECTION --- */
/* 1. Force Background Fix */ 
body, main, section, .aura-features, .features-grid, .bento-grid { 
    background-image: none !important; 
    background-color: transparent !important; 
}
body {
    background-color: #020617 !important;
    background-image: 
        radial-gradient(at 20% 30%, rgba(29, 78, 216, 0.15) 0px, transparent 50%),
        radial-gradient(at 80% 70%, rgba(124, 58, 237, 0.15) 0px, transparent 50%) !important;
    background-attachment: fixed !important;
}

/* 2. Hero Section */
.hero-title {
    padding-bottom: 20px !important;
    margin-bottom: 0 !important;
}
.hero-form-container {
    margin-right: 10% !important;
    transform: translateX(-20px);
}

/* 3. Card 1 Icon Glow (Nuclear Force) */ 
.bento-card-1 .bento-icon-container { 
    background-color: rgba(99, 102, 241, 0.2) !important; 
    border: 2px solid #a5b4fc !important; 
    box-shadow: 0 0 20px #6366f1 !important; 
    color: #ffffff !important; 
} 
.bento-card-1 svg { 
    filter: drop-shadow(0 0 5px #ffffff) !important; 
}

/* 4. Card 2 Lock Alignment */
.visual-simple-security {
    justify-content: flex-start !important;
    padding-top: 20px !important;
}
.main-lock-container {
    transform: scale(0.9);
    margin-bottom: 0 !important;
}

/* 5. Card 4 Layout Fix (Horizontal Pipeline) */ 
.bento-card-4 .visual-fleet-grid, 
.bento-card-4 .visual-pipeline { 
    display: flex !important; 
    flex-direction: row !important; /* Force Horizontal */
    align-items: center !important; 
    justify-content: center !important; 
    padding: 0 20px !important; 
    background: transparent !important; 
    width: 100% !important;
    height: 100% !important;
}
.visual-pipeline-command {
    display: none !important; /* Hide old container if present */
}

/* Pipeline Internal Styles (Ensures they exist even if deleted) */
.pipe-track {
    position: absolute; width: 80%; height: 2px;
    background: rgba(255,255,255,0.1);
}
.pipe-dot {
    position: absolute; width: 40px; height: 2px;
    background: linear-gradient(90deg, transparent, #6366f1, transparent);
    animation: pipeFlow 2s infinite linear;
}
.pipe-hub {
    width: 40px; height: 40px; background: #4f46e5;
    border-radius: 50%; z-index: 2;
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.6);
    display: flex; align-items: center; justify-content: center;
}
.hub-logo {
    width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid white;
}
.pipe-node {
    position: absolute; width: 12px; height: 12px;
    border-radius: 50%; background: #334155;
    z-index: 2;
}
.input-node { left: 10%; }
.output-node { right: 10%; }
@keyframes pipeFlow { 0% { transform: translateX(-100px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(100px); opacity: 0; } }

/* --- PERFORMANCE & STATIC HUB OPTIMIZATION --- */

/* 1. OPTIMIZED BACKGROUND (Static) */
body {
    background-color: #020617 !important;
    background-image: 
        radial-gradient(circle at 15% 25%, rgba(56, 189, 248, 0.1), transparent 40%),
        radial-gradient(circle at 85% 75%, rgba(139, 92, 246, 0.1), transparent 40%) !important;
    background-attachment: fixed !important;
    animation: none !important; /* STOP ALL BODY ANIMATIONS */
}

/* 2. REDUCE SHADOW INTENSITY (Performance) */
.bento-icon-container, .lock-glow-pulse, .cmd-node, .line-after {
    box-shadow: 0 0 10px rgba(79, 70, 229, 0.3) !important; /* Reduced blur */
    filter: drop-shadow(0 0 5px rgba(79, 70, 229, 0.5)) !important;
}

/* 3. CARD 4: STATIC CENTRAL HUB (Replaces Pipeline) */
.visual-static-hub {
    position: relative; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    min-height: 140px; /* Ensure space */
}
.hub-lines {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none;
}
/* Satellites */
.hub-sat {
    position: absolute;
    padding: 4px 10px; 
    background: #0f172a; 
    border: 1px solid #475569;
    border-radius: 12px; 
    font-size: 10px; color: #cbd5e1; font-weight: 700;
    z-index: 2;
    /* Critical: Center the div on its coordinate */
    transform: translate(-50%, -50%);
    width: auto;
}
/* MAPPING CSS TO SVG COORDINATES (300x150 viewbox scale) */ 
/* Top Left: x=90, y=50 */ 
.sat-tl { left: 30%; top: 33%; }

/* Bottom Left: x=90, y=100 */ 
.sat-bl { left: 30%; top: 66%; }

/* Top Right: x=210, y=50 */ 
.sat-tr { left: 70%; top: 33%; }

/* Bottom Right: x=210, y=100 */ 
.sat-br { left: 70%; top: 66%; }

/* Core Center */ 
.hub-core-static { 
    position: absolute; left: 50%; top: 50%; 
    transform: translate(-50%, -50%); 
    width: 48px; height: 48px; 
    background: #4f46e5; border-radius: 50%; 
    z-index: 10; 
    display: flex; align-items: center; justify-content: center; 
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.5); 
}
.core-logo-static {
    width: 16px; height: 16px; background: white;
    clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
}
/* Subtle Breathing Animation */
.core-breath {
    position: absolute; inset: -4px;
    border: 2px solid #818cf8; border-radius: 50%;
    opacity: 0.5;
    animation: hubBreathing 6s infinite ease-in-out;
    will-change: transform, opacity;
}
@keyframes hubBreathing {
    0%, 100% { transform: scale(1); opacity: 0.5; }
    50% { transform: scale(1.1); opacity: 0.8; }
}

/* --- NEW CARD 3 STYLES (THE COMPACT HUB) --- */
.visual-static-hub.compact-hub {
    min-height: 140px;
}
.compact-hub {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 180px; /* Increased height slightly */
}
.compact-hub .hub-lines {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; /* Lines behind nodes */
}

/* Node Positioning: MATCHES SVG COORDINATES EXACTLY */
/* ViewBox 200x200. x=30 is 15%. x=170 is 85%. */
.compact-hub .hub-sat {
    position: absolute;
    z-index: 2; /* Sit on top of line tips */
    transform: translate(-50%, -50%); /* Center the node on the coordinate */
    background: rgba(15, 23, 42, 0.9); /* Slightly more opaque */
    border: 1px solid #6366f1; /* Brighter border */
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 11px;
    color: #cbd5e1;
    font-weight: 700;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2); /* Subtle glow */
    letter-spacing: 0.5px;
}

.compact-hub .sat-tl { left: 15%; top: 20%; }
.compact-hub .sat-bl { left: 15%; top: 80%; }
.compact-hub .sat-tr { left: 85%; top: 20%; }
.compact-hub .sat-br { left: 85%; top: 80%; }

.compact-hub .hub-core-static {
    left: 50%; top: 50%; /* Center 100,100 matches 50% */
    transform: translate(-50%, -50%);
    z-index: 10;
    width: 52px; height: 52px; /* Slightly larger */
    box-shadow: 0 0 25px rgba(79, 70, 229, 0.6);
}

/* --- NEW CARD 4 STYLES (THE WIDE GRAPH) --- */
.visual-neural-pulse.wide-graph {
    width: 100%; height: 100%; min-height: 140px;
    display: flex; align-items: flex-end; /* Graph at bottom */
}
/* Make the graph super wide */
.wide-graph .pulse-graph {
    width: 200%; /* Double width */
    left: 0;
    animation: scrollGraph 4s linear infinite; /* Slower, smoother */
}
/* The seamless loop magic: move exactly half way */
@keyframes scrollGraph {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.wide-graph .latency-counter {
    top: 20px; left: 20px; /* Position text at top left */
    position: absolute;
}
.wide-graph .live-indicator {
    top: 20px; right: 20px; /* Position badge at top right */
}
.pulse-line {
    stroke-width: 2px;
    vector-effect: non-scaling-stroke; /* Keep line thin even if stretched */
}

/* UNIFIED PURPLE ICON STYLE FOR ALL CARDS (1, 2, 3, 4) */
/* This ensures they all share the exact same color values and glow */
.bento-card-1 .bento-icon-container,
.bento-card-2 .bento-icon-container,
.bento-card-3 .bento-icon-container,
.bento-card-4 .bento-icon-container {
    color: #a5b4fc !important; /* The standard light indigo */
    background-color: rgba(99, 102, 241, 0.15) !important; /* Shared bg opacity */
    border: 1px solid rgba(165, 180, 252, 0.3) !important; /* Shared border */
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4) !important; /* Shared glow */
}
/* Ensure SVGs handle the color correctly */
.bento-card-1 .bento-icon-container svg,
.bento-card-2 .bento-icon-container svg,
.bento-card-3 .bento-icon-container svg,
.bento-card-4 .bento-icon-container svg {
    stroke: currentColor !important;
    filter: drop-shadow(0 0 2px rgba(165, 180, 252, 0.5)) !important; /* Subtle SVG bloom */
}

/* --- CHART REDESIGN: CHAOS VS STABILITY --- */
/* Legend Styling */
.chart-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.chart-legend { display: flex; gap: 15px; font-size: 0.85rem; color: #94a3b8; }
.legend-item { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.dot.dashed { border: 2px solid #64748b; background: transparent; }
.dot.solid { background: #34d399; box-shadow: 0 0 5px #34d399; }

/* Chart Styling */
.comparison-chart { width: 100%; height: 250px; background: linear-gradient(to bottom, rgba(15, 23, 42, 0), rgba(15, 23, 42, 0.5)); border-radius: 12px; }
.grid-line { stroke: #334155; stroke-width: 1; stroke-dasharray: 4; opacity: 0.3; }

/* CHAOS LINE (Grey, Dashed, Erratic) */
.line-chaos {
    fill: none;
    stroke: #64748b;
    stroke-width: 2px;
    stroke-dasharray: 6, 4; /* Dashed look */
    opacity: 0.6;
}

/* STABLE LINE (Neon, Solid, Straight) */
.line-stable {
    fill: none;
    stroke: #34d399; /* Emerald/Cyan neon */
    stroke-width: 4px;
    filter: drop-shadow(0 0 10px rgba(52, 211, 153, 0.5));
    stroke-linecap: round;
    animation: drawLine 2s ease-out forwards;
}

.stable-dot { fill: #fff; filter: drop-shadow(0 0 8px #fff); }

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

/* --- REGRESSION FIX: CARD 1 SCROLL ANIMATION (UPDATED) --- */
.visual-code-window {
    height: 140px; /* Fixed height is crucial */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.code-scroll-mask { flex: 1; overflow: hidden; position: relative; }
.code-content-track { animation: scrollVertical 10s linear infinite; }

@keyframes scrollVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* Moves up by half its height */
}

/* --- FIXED HERO FORM POSITIONING (ROBUST) --- */

/* --- PARENT CONTAINER LAYOUT --- */
.hero-content {
    display: flex;
    align-items: center;
    /* Desktop: Space between Text and Form */
    justify-content: space-between;
    width: 100%;
    position: relative;
    z-index: 10;
}

/* --- FORM CONTAINER (DESKTOP DEFAULT) --- */
.hero-form-container {
    /* Fixed width for consistency */
    width: 400px;
    flex-shrink: 0; /* Don't let it shrink */
    /* Push it to the right on desktop */
    margin-left: auto;
    margin-right: 0;
    margin-top: 0;
    position: relative;
    z-index: 10;
}

/* --- MOBILE / TABLET OVERRIDE (Max-width 1024px) --- */
@media (max-width: 1024px) {
    /* 1. Change Parent to Vertical Stack */
    .hero-content {
        flex-direction: column !important;
        align-items: center !important;
        /* Force center alignment */
        text-align: center !important;
    }

    /* 2. Reset Form Position & Size */
    .hero-form-container {
        /* Remove desktop side margins */
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 40px !important; /* Space from text */
        
        /* Restore Size */
        width: 100% !important;
        max-width: 100% !important;
        
        /* Center content */
        display: flex;
        justify-content: center;
        padding: 0 10px; /* Safety padding from screen edges */
        box-sizing: border-box;
    }

    /* 3. Ensure the inner card is centered and legible */
    .secure-uplink-card {
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 420px !important; /* Readable max width */
    }
}

/* --- EMERGENCY FORM SIZE FIX --- */
/* 1. Force the Container to be Wider */
.hero-form-container {
    width: 100% !important;
    min-width: 350px !important; /* Prevent it from being too thin */
    max-width: 480px !important; /* Healthy wide size for the card */
    flex-shrink: 0 !important; /* Prevent flexbox from squeezing it */
    margin-top: 20px !important;
    box-sizing: border-box !important;
}

/* 2. Force the Inner Card to Fill the Container */
.secure-uplink-card {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px !important; /* More breathing room */
}

/* 3. Force Inputs/Textarea to be Full Width */
.uplink-input, .uplink-textarea {
    width: 100% !important;
    box-sizing: border-box !important; /* Ensure padding doesn't break width */
    min-height: 44px !important; /* Make inputs taller/touch-friendly */
}

/* 4. MOBILE SPECIFIC (Force Center & Full Width) */
@media (max-width: 1024px) {
    .hero-content {
        flex-direction: column !important;
        align-items: center !important;
    }

    .hero-form-container {
        margin: 30px auto !important; /* Center horizontally */
        width: 95% !important; /* Take up most screen width on mobile */
        max-width: 500px !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
    }
}

/* --- CARD 1 ANIMATION REPAIR --- */
.code-content-track {
    /* Determine animation speed and loop */
    animation: scrollVertical 8s linear infinite !important;
    display: flex;
    flex-direction: column;
}
.code-line {
    font-family: 'Courier New', monospace;
    font-size: 10px;
    line-height: 20px; /* Consistent height for math */
    padding: 0 10px;
    color: #94a3b8;
    white-space: nowrap;
}

@keyframes scrollVertical {
    0% { transform: translateY(0); }
    100% { transform: translateY(-50%); } /* Move exactly half way (one set of lines) */
}

/* --- GLOBAL PERFORMANCE OPTIMIZATIONS --- */
/* 1. Force GPU Acceleration for all Card Visuals */
.visual-code-window,
.visual-pipeline,
.visual-static-hub,
.comparison-chart,
.hero-form-container {
    transform: translateZ(0); /* Hack to force GPU usage */
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* 2. Optimize Shadows (Reduce render complexity) */
.bento-card,
.bento-icon-container,
.hero-form-container {
    /* Slightly crisper shadows render faster than wide, diffuse ones */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

/* 3. Optimize Moving Elements */
.code-content-track,
.pipe-dot,
.line-stable {
    will-change: transform; /* Ensure sub-pixel rendering is off for performance if needed, strictly use transform */
}

/* 4. Reduce Background Complexity if animating */
body {
    /* Ensure background is fixed so it doesn't repaint on scroll */
    background-attachment: fixed;
}

/* --- FIX CARD 2 SPACING --- */
/* Target the container holding the lock and text */
.bento-card-2 .visual-simple-security {
    /* Ensure they are close together in the center */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Center vertically instead of spreading out */
    align-items: center !important;
    padding-bottom: 20px !important; /* Add padding at bottom to push text up */
    height: auto !important; /* Let content dictate height */
}

/* Target the specific text span underneath the lock */
.bento-card-2 .security-status {
    margin-top: 8px !important; /* Tight gap between lock and text */
    font-size: 0.7rem !important; /* Make text smaller (e.g., 11px-12px) */
    letter-spacing: 1px !important; /* Improve readability at small size */
    opacity: 0.9;
}


/* --- HEADER STYLES --- */
.navbar {
    position: fixed; top: 0; left: 0; width: 100%;
    z-index: 1000;
    transition: all 0.4s ease-in-out;
    background: transparent;
}
/* Scrolled State (Compact & Glass) */
.navbar.scrolled {
    background: rgba(2, 6, 23, 0.85);
    backdrop-filter: blur(12px);
    border-bottom: 0 !important;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.9) !important;
}

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

/* Nav Links */
.nav-menu { display: flex; gap: 32px; }
.nav-link {
    color: #cbd5e1;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.3s ease;
    position: relative;
}
.nav-link:hover, .nav-link.active {
    color: #a5b4fc; /* Indigo-300 hover */
}
.nav-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #6366f1;
    transition: width 0.3s ease;
}
.nav-link:hover::after { width: 100%; }

/* Nav Actions Group */
.nav-actions { display: flex; align-items: center; gap: 24px; }

/* Language Switcher */
.lang-switch {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    gap: 4px;
}
.lang-opt:hover, .lang-opt.active { color: #fff; }

/* CONTACT BUTTON (Pink Gradient + Pulse) */
.btn-nav-contact {
    background: linear-gradient(135deg, #ec4899 0%, #8b5cf6 100%);
    color: white;
    padding: 10px 24px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    box-shadow: 0 0 15px rgba(236, 72, 153, 0.4);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: btnPulse 3s infinite;
}
.btn-nav-contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(236, 72, 153, 0.6);
}
@keyframes btnPulse {
    0% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0.4); }
    70% { box-shadow: 0 0 0 10px rgba(236, 72, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(236, 72, 153, 0); }
}

/* CLIENT PORTAL BUTTON (Glass/Outline) */
.btn-nav-login {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #cbd5e1;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}
.btn-nav-login:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
}

/* Hamburger */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}
.bar {
    width: 25px;
    height: 3px;
    background: white;
    border-radius: 2px;
    transition: 0.3s;
}

/* --- FOOTER STYLES REMOVED (Legacy Conflict) --- */

/* --- MOBILE RESPONSIVE --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(2, 6, 23, 0.98);
    z-index: 999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: right 0.4s ease;
}
.mobile-menu-overlay.active { right: 0; }
.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
}
.mobile-link {
    font-size: 1.5rem;
    color: white;
    text-decoration: none;
    font-weight: 600;
}

@media (max-width: 1024px) {
    .nav-menu { display: none; }
    .hamburger-btn { display: flex; }
}
/* --- MOBILE MENU: SIDE DRAWER --- */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    right: -100%; /* Hidden off-screen */
    width: 80%;
    max-width: 300px;
    height: 100vh;
    background: rgba(15, 23, 42, 0.95); /* Deep dark background */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 10000;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); /* Shadow to left */
    display: flex;
    flex-direction: column;
    padding: 30px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.mobile-menu-overlay.active {
    right: 0; /* Slide in */
}

/* Internal Layout */
.mobile-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mobile-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.mobile-logo-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mobile-logo-group img { height: 28px; width: auto; }
.mobile-logo-group span { font-weight: 700; color: white; font-size: 1.1rem; }

.nav-close-icon {
    display: block; /* Always visible in drawer */
    cursor: pointer;
    background: rgba(255,255,255,0.1);
    padding: 8px;
    border-radius: 8px;
    transition: background 0.2s;
}
.nav-close-icon:hover { background: rgba(255,255,255,0.2); }

/* Links */
.mobile-link {
    font-size: 1.25rem;
    font-weight: 500;
    color: #cbd5e1;
    text-decoration: none;
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.2s;
}
.mobile-link:hover {
    padding-left: 10px; /* Slight shift */
}

/* Bottom CTA */
.btn-mobile-contact {
    margin-top: auto; /* Push to bottom */
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%);
    color: white !important;
    text-align: center;
    padding: 15px;
    border-radius: 12px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(99, 102, 241, 0.4);
    border: none;
}

/* Specific overrides for media queries */
@media (max-width: 968px) {
    .hamburger-menu-icon { display: flex; align-items: center; cursor: pointer; }
    .navbar { padding: 15px 20px; }
}

/* --- FINAL VISUAL FIXES --- */

/* 1. HEADER BORDER FIX (Force Removal) */
.navbar.scrolled {
    border-bottom: 0 !important; /* Remove line completely */
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.9) !important; /* Deep shadow only */
}

/* 2. LOGO IMAGE STYLING */
/* Delete .logo-icon styles, replace with this */
.logo-img {
    height: 32px; /* Optimal height for header */
    width: auto;
    margin-right: 12px; /* Space between logo and text */
    display: block;
    object-fit: contain;
}

/* Ensure text matches vertically */
.logo {
    display: flex;
    align-items: center; /* Perfect vertical centering */
    text-decoration: none;
}
.logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
}

/* SOLUTIONS SECTION STYLES */
.solutions-section {
    position: relative;
    padding: 100px 20px;
    background-color: #020617; /* Deepest dark */
    border-top: 1px solid rgba(255,255,255,0.05);
}
.sol-container {
    max-width: 1200px;
    margin: 0 auto;
}
.sol-header {
    text-align: center;
    margin-bottom: 80px;
}
.sol-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: white;
    margin-bottom: 15px;
    letter-spacing: -1px;
}
.sol-subtitle {
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}
.sol-category-title {
    color: #cbd5e1;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 30px;
    padding-left: 10px;
    border-left: 3px solid #6366f1;
}

/* GRID 1: CORE CAPABILITIES (4 cols) */
.sol-grid-core {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 80px;
}

/* GRID 2: INDUSTRIES (3 cols) */
.sol-grid-industry {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-bottom: 80px;
}

/* CARD STYLING (Glass, Static, Clean) */
.sol-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 12px;
    transition: all 0.3s ease; /* Only interaction */
}
.sol-card:hover {
    border-color: rgba(99, 102, 241, 0.5); /* Indigo glow on border */
    background: rgba(255, 255, 255, 0.04);
    transform: translateY(-5px);
}

.sol-icon { font-size: 2rem; margin-bottom: 15px; }
.ind-header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.ind-icon { font-size: 1.5rem; }

.sol-card h4 { color: white; font-size: 1.1rem; margin-bottom: 10px; font-weight: 600; }
.sol-card p { color: #94a3b8; font-size: 0.9rem; line-height: 1.6; }

/* PROBLEM VS SOLUTION SPLIT */
.sol-split-view {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 40px;
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid #1e293b;
    border-radius: 20px;
    padding: 50px;
    align-items: center;
}
.split-side h4 { font-size: 1.2rem; margin-bottom: 20px; color: white; }
.split-side ul { list-style: none; padding: 0; }
.split-side li { margin-bottom: 12px; color: #cbd5e1; font-size: 0.95rem; }
.old-way li { opacity: 0.7; }
.new-way li { color: white; font-weight: 500; }
.split-divider { font-weight: 800; color: #334155; font-size: 1.5rem; }

/* RESPONSIVE */
@media (max-width: 1024px) {
    .sol-split-view { grid-template-columns: 1fr; text-align: center; }
    .split-divider { margin: 20px 0; }
}

/* --- SOLUTIONS GRID & CARD EXPANSION --- */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    grid-auto-flow: dense; /* Critical for expanding cards to fit */
    padding-bottom: 80px;
}

.sol-card {
    background: rgba(15, 23, 42, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(10px);
}

.sol-card:hover {
    border-color: rgba(99, 102, 241, 0.4);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.5);
}

/* THE EXPANDED STATE (Grows Right and Down) */
.sol-card.expanded {
    grid-column: span 2;
    grid-row: span 2;
    background: #0f172a; /* Solid dark for readability */
    border-color: #6366f1;
    z-index: 10;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
}

.read-more-btn {
    margin-top: auto;
    background: transparent;
    border: 1px solid #6366f1;
    color: #a5b4fc;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.read-more-btn:hover {
    background: #6366f1;
    color: white;
}

.hidden-content {
    display: none;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    animation: fadeIn 0.4s ease-out forwards;
}
.sol-card.expanded .hidden-content {
    display: block;
}

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

/* --- 2. GLOBAL FORM STYLES (Force Dark Theme) --- */
.hero-form-container {
    background: rgba(15, 23, 42, 0.8); /* Dark Semi-transparent */
    border: 1px solid rgba(99, 102, 241, 0.3);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    backdrop-filter: blur(12px);
    width: 100%;
}

/* --- 2. FORCE DARK FORM INPUTS --- */
.uplink-input {
    width: 100%;
    /* Force dark background to override user agent styles */
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #ffffff !important;
    padding: 14px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-family: monospace;
    outline: none;
    transition: border-color 0.3s;
    box-shadow: none !important; /* Remove any default white shadows */
}

.uplink-input:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 10px rgba(99, 102, 241, 0.2) !important;
}

.btn-submit {
    width: 100%;
    padding: 14px;
    background: linear-gradient(135deg, #6366f1, #ec4899);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 1px;
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
    transition: transform 0.2s;
}
.btn-submit:hover {
    transform: translateY(-2px);
}

/* --- 3. SOLUTIONS CARD GRID --- */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
    grid-auto-flow: dense;
    padding-bottom: 80px;
}
.sol-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 30px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}
.sol-card.expanded {
    grid-column: span 2;
    grid-row: span 2;
    background: #0b1120; /* Solid dark when expanded */
    border-color: #6366f1;
    z-index: 10;
}
@media (max-width: 768px) {
    .sol-card.expanded {
        grid-column: span 1;
        grid-row: auto;
    }
}

/* --- SOLUTIONS PAGE STYLES --- */
.solutions-page-container {
    padding: 160px 20px 80px;
    max-width: 1200px;
    margin: 0 auto;
}
.sol-hero {
    text-align: center;
    margin-bottom: 60px;
}
.sol-hero h1 {
    font-size: 3rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 15px;
}
.sol-hero p {
    color: #94a3b8;
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* GRID & CARDS */
.sol-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}
.sol-card {
    background: rgba(255, 255, 255, 0.03); /* Glass effect */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s ease, border-color 0.3s ease;
    backdrop-filter: blur(10px);
}
.sol-card:hover {
    transform: translateY(-5px);
    border-color: #6366f1; /* Brand Purple */
    background: rgba(255, 255, 255, 0.05);
}
.card-icon {
    font-size: 2rem;
    margin-bottom: 15px;
}
.sol-card h3 {
    color: white;
    margin-bottom: 10px;
    font-size: 1.25rem;
}
.sol-card p {
    color: #cbd5e1;
    line-height: 1.6;
    font-size: 0.95rem;
}

/* --- SOLUTIONS PRO DESIGN --- */
.solutions-page-container {
    padding-top: 180px; /* More space for fixed header */
    padding-bottom: 100px;
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px; padding-right: 20px;
}
/* --- CATEGORY HEADERS --- */
.cat-header {
    color: #6366f1;
    font-size: 0.9rem;
    letter-spacing: 2px;
    margin-top: 60px;
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(99, 102, 241, 0.3);
    padding-bottom: 10px;
}

/* --- VERTICAL EXPANSION CARD DESIGN REMOVED --- */
/* --- STRICT VERTICAL CARD CSS --- */
.sol-grid { 
    display: grid; 
    /* Fixed column width logic to prevent jumping */ 
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); 
    gap: 30px; 
    align-items: start; /* Essential: Prevents cards from stretching to match neighbor's height */ 
}

.sol-card { 
    background: rgba(15, 23, 42, 0.6); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 16px; 
    padding: 30px; 
    display: flex; 
    flex-direction: column; 
    transition: transform 0.2s ease, border-color 0.2s ease; /* REMOVED transition on width/flex to stop wobbling */ 
    position: relative; 
    overflow: hidden; 
    backdrop-filter: blur(12px); 
}

.sol-card:hover { 
    border-color: #6366f1; 
    transform: translateY(-4px); 
}

/* --- EXPANDED STATE (VERTICAL ONLY) --- */ 
.sol-card.expanded { 
    /* FORCE SINGLE COLUMN: Do not allow spanning */ 
    grid-column: auto !important; 
    width: 100% !important;

    background: #0b1120;
    border-color: #6366f1;
    z-index: 5;
    /* Shadow to make it pop slightly without changing size */
    box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.icon-box { 
    width: 48px; 
    height: 48px; 
    background: rgba(99, 102, 241, 0.1); 
    border: 1px solid rgba(99, 102, 241, 0.3); 
    border-radius: 10px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #a5b4fc; 
    margin-bottom: 20px; 
}

.sol-card h3 { color: white; font-size: 1.3rem; margin-bottom: 10px; font-weight: 600; } 
.sol-card p { color: #94a3b8; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }

/* Button Styles */ 
/* Button styling update for better positioning */
.expand-btn { 
    margin-top: auto; /* Pushes button to bottom of upper section */ 
    width: 100%; 
    text-align: center; 
    padding: 12px; 
    background: rgba(255,255,255,0.03); 
    border: 1px solid rgba(255,255,255,0.1); 
    color: #cbd5e1; 
    border-radius: 8px; 
    cursor: pointer; 
    transition: 0.3s; 
} 
.expand-btn:hover { 
    background: rgba(99, 102, 241, 0.1); 
    border-color: #6366f1; 
    color: white; 
}

/* --- VISIBLE FEATURES (The Checklist) --- */
.visible-features {
    list-style: none; padding: 0; margin: 20px 0;
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 15px;
}
.visible-features li {
    color: #cbd5e1; font-size: 0.9rem; margin-bottom: 8px;
    display: flex; align-items: center; gap: 10px;
}
.visible-features li span {
    color: #4ade80; /* Green checkmark */
    font-weight: bold;
}

/* --- BUSINESS VALUE SECTION (CLEAN & READABLE) --- */
/* CONTENT ANIMATION */ 
.business-value { 
    display: none; 
    margin-top: 25px; 
    padding-top: 20px; 
    border-top: 1px solid rgba(255, 255, 255, 0.1); 
}

.sol-card.expanded .business-value { 
    display: block; 
    /* Simple Fade In - No sliding that causes layout shifts */ 
    animation: fadeIn 0.4s ease-out; 
}

.business-value h4 { 
    color: #818cf8; /* Soft Indigo */ 
    font-size: 1rem; 
    margin-bottom: 12px; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
}

/* STYLING FOR RICH CONTENT */
.val-section {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.val-section:last-child { border-bottom: none; margin-bottom: 0; }

.val-section h4 { 
    font-size: 0.9rem; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    margin-bottom: 8px; 
    color: #cbd5e1; 
} 

/* Color coding headers */
.val-section h4[data-type="bottleneck"] { color: #f87171; } /* Redish */
.val-section h4[data-type="roi"] { color: #4ade80; } /* Greenish */
.val-section h4[data-type="deliverables"] { color: #818cf8; } /* Blueish */

.val-section p { 
    font-size: 0.95rem; 
    line-height: 1.6; 
    color: #94a3b8; 
    margin: 0; 
} 
.val-section strong { color: #fff; }

.val-section ul { list-style: none; padding: 0; margin: 0; } 
.val-section li { 
    color: #cbd5e1; 
    font-size: 0.9rem; 
    margin-bottom: 5px; 
    position: relative; 
    padding-left: 15px; 
} 
.val-section li::before { 
    content: "•"; 
    color: #6366f1; 
    position: absolute; 
    left: 0; 
}

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Homepage Form Fix - Targeting the inner glass container to remove it */
.hero-form-container, .hero-form-container > div, .hero-form-wrapper {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    padding: 0 !important; /* Let inputs breathe */
}

/* Mobile Menu Styling */
.mobile-menu-logo { display: none; margin-bottom: 20px; text-align: center; }
.mobile-menu-logo img { width: 120px; display: inline-block; }

/* Close Button Style */
.nav-close-icon {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    display: none; /* Hidden on desktop */
}

/* Mobile Button Styling (Glowing Purple) */
.mobile-contact-btn { 
    display: none; 
    margin-top: 30px; 
    background: linear-gradient(135deg, #6366f1 0%, #a855f7 100%); 
    color: white !important; 
    padding: 14px; 
    text-align: center; 
    border-radius: 12px; 
    font-weight: 600; 
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4); 
    border: 1px solid rgba(255,255,255,0.2); 
    text-decoration: none;
}

@media (max-width: 768px) {
    /* Hide Desktop Button */
    .btn-nav-contact { display: none; }
    
    /* Show Mobile Elements */
    .mobile-menu-logo { display: block; }
    .mobile-contact-btn { display: block; }
    .nav-close-icon { display: block; }

    /* Ensure menu covers screen but links work */
    .nav-menu.active {
        display: flex;
        flex-direction: column;
        z-index: 9999;
    }
}

/* =========================================
   NEW PAGES PATCH (APPENDED)
   ========================================= */

/* --- 1. GLOBAL NAV ADJUSTMENTS --- */
/* Ensure navbar works for sub-pages if old CSS used fixed heights */
.navbar { z-index: 9999; }

/* --- 2. GLOBAL FORM COMPONENT (For Contact.html) --- */
/* Re-introducing the Cyberpunk HUD style globally */
.cyber-form-wrapper { display: flex; background: #0b1120; border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 20px; box-shadow: 0 0 50px rgba(99, 102, 241, 0.15); overflow: hidden; max-width: 600px; margin: 0 auto; }
.hud-sidebar { width: 50px; background: rgba(15, 23, 42, 0.5); border-right: 1px solid rgba(255,255,255,0.05); display: flex; flex-direction: column; align-items: center; padding: 20px 0; justify-content: space-between; }
.hud-sidebar.right { border-right: none; border-left: 1px solid rgba(255,255,255,0.05); }
.hud-main { flex: 1; padding: 30px; }
.hud-title { text-align: center; color: #818cf8; font-size: 0.75rem; letter-spacing: 2px; font-weight: 700; margin-bottom: 25px; }
.uplink-input { width: 100%; background: #1e293b; border: 1px solid #334155; padding: 12px; border-radius: 8px; color: #fff; margin-bottom: 15px; }
.uplink-btn { width: 100%; padding: 15px; background: linear-gradient(135deg, #6366f1, #a855f7); border: none; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; margin-top: 10px; }

.contact-split-layout { padding-top: 150px; padding-bottom: 80px; display: flex; align-items: center; justify-content: center; gap: 50px; flex-wrap: wrap; }
.contact-text-content { max-width: 500px; padding: 20px; }

/* --- 3. COMPANY & CONSULTING STYLES --- */
.company-hero, .consulting-page-container, .legal-page-container { padding-top: 160px; padding-bottom: 100px; max-width: 1200px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.manifesto-grid { display: flex; gap: 30px; margin: 60px 0; }
.manifesto-item { background: rgba(255,255,255,0.03); padding: 30px; border-radius: 12px; flex: 1; border: 1px solid rgba(255,255,255,0.05); }
.manifesto-item.highlight { border-color: #6366f1; background: rgba(99, 102, 241, 0.1); }

/* Consulting Grid */
.consulting-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; margin-top: 50px; }
.consult-card { background: rgba(15, 23, 42, 0.6); padding: 30px; border-radius: 16px; border: 1px solid rgba(255,255,255,0.1); }

/* --- 4. MOBILE RESPONSIVENESS FOR NEW PAGES --- */
@media (max-width: 768px) {
    .contact-split-layout { flex-direction: column; text-align: center; }
    .hud-sidebar { display: none; } /* Hide HUD wings on mobile */
    .manifesto-grid { flex-direction: column; }
}

/* ============================================
   SUB-PAGE POLISH (APPENDED FIXES)
   ============================================ */
/* 1. CONTACT PAGE FIXES */
.contact-split-layout { display: flex; align-items: center; justify-content: center; padding-top: 160px; padding-bottom: 80px; gap: 80px; max-width: 1400px; margin: 0 auto; }
.contact-page-specific .cyber-form-wrapper { max-width: 700px !important; /* WIDER than homepage */ width: 100%; transform: scale(1.05); /* Slight zoom for emphasis */ }

/* 2. CONSULTING & COMPANY CARDS */
.page-hero-title { text-align: center; font-size: 3.5rem; margin-bottom: 20px; color: #fff; margin-top: 140px; }
.page-hero-sub { text-align: center; color: #94a3b8; max-width: 700px; margin: 0 auto 80px auto; font-size: 1.2rem; }

.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px 100px; }

.glass-card { background: rgba(15, 23, 42, 0.6); border: 1px solid rgba(255,255,255,0.08); padding: 40px; border-radius: 24px; transition: transform 0.3s; }
.glass-card:hover { transform: translateY(-10px); border-color: #6366f1; }
.glass-card h3 { color: #fff; font-size: 1.5rem; margin-bottom: 15px; }
.glass-card p { color: #cbd5e1; line-height: 1.6; }
.card-icon { font-size: 2rem; margin-bottom: 20px; color: #818cf8; }

/* --- STRICT HEADER VISIBILITY FIX --- */
@media (min-width: 969px) {
    .mobile-only-group, .hamburger-menu-icon, .nav-close-icon {
        display: none !important; /* Hide mobile items on desktop */
    }
    .desktop-only-group {
        display: flex !important; /* Show desktop items */
    }
}
@media (max-width: 968px) { 
    .desktop-only-group { display: none !important; /* Hide desktop items on mobile */ } 
    .hamburger-menu-icon { display: block !important; } 
}

/* CONTACT INFO STYLING */
.contact-methods-grid { display: flex; flex-direction: column; gap: 30px; margin-top: 40px; }
.method-box { display: flex; align-items: center; gap: 20px; }
.method-icon {
    width: 50px; height: 50px; background: rgba(99, 102, 241, 0.1);
    border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 12px;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.method-label { display: block; font-size: 0.7rem; color: #6366f1; letter-spacing: 1px; font-weight: 700; margin-bottom: 5px; }

/* --- GLOBAL FOOTER RESET --- */
.site-footer {
    background-color: #020617;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 80px 0 30px;
    margin-top: auto; /* Pushes footer to bottom if page is short */
    position: relative;
    z-index: 10; /* Ensure it sits above background elements */
}

.footer-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 60px;
    margin-bottom: 60px;
}

.footer-brand {
    flex: 1;
    min-width: 250px;
    max-width: 400px;
}

.footer-brand h4 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.footer-brand p {
    color: #94a3b8;
    line-height: 1.6;
    font-size: 1rem;
}

.footer-links-group {
    display: flex;
    gap: 80px;
}

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

.footer-col h5 {
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.footer-col a {
    color: #64748b;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

.footer-col a:hover {
    color: #818cf8;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 30px;
    text-align: center;
}

.footer-bottom p {
    color: #475569;
    font-size: 0.85rem;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    .footer-top {
        flex-direction: column;
        gap: 40px;
    }
    .footer-links-group {
        flex-direction: column; /* Stack link columns on mobile */
        gap: 40px;
        width: 100%;
    }
    .footer-brand {
        max-width: 100%;
    }
}


/* --- FOOTER FIX (Use Flexbox Properly) --- */


/* --- CONTACT PAGE WIDE MODE --- */ 
.contact-page-container { padding-top: 160px; padding-bottom: 100px; display: flex; flex-direction: column; align-items: center; justify-content: center; } 
.contact-intro { text-align: center; margin-bottom: 60px; } 
.contact-intro h1 { font-size: 3.5rem; margin-bottom: 15px; color: #fff; } 
.contact-intro p { color: #94a3b8; font-size: 1.2rem; margin-bottom: 30px; } 
.contact-details { display: flex; gap: 30px; justify-content: center; color: #cbd5e1; } 
.detail-item span { margin-right: 10px; }

/* WIDER FORM OVERRIDE */ 
.cyber-form-wrapper.wide-mode { max-width: 800px !important; width: 100%; box-shadow: 0 0 60px rgba(99, 102, 241, 0.2); } 
.cyber-form-wrapper.wide-mode .hud-main { padding: 50px; }

/* --- FINAL REPAIRS --- */
/* 1. FORCE FOOTER ROW LAYOUT */


/* 2. CONTACT FORM WIDE MODE */
.cyber-form-wrapper.wide-mode { 
    max-width: 900px !important; /* Make it significantly wider */
    width: 100%; 
    margin: 40px auto; 
} 
.cyber-form-wrapper.wide-mode .hud-main { 
    padding: 40px 60px; /* More breathing room inside */
} 
.contact-page-container { 
    padding-top: 160px; 
    padding-bottom: 100px; 
    width: 100%; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding-left: 20px; 
    padding-right: 20px; 
}

/* --- FORCE FOOTER HORIZONTAL LAYOUT --- */


/* --- CONTACT PAGE UPDATES --- */ 
.contact-page-container { 
    padding-top: 140px; 
    padding-bottom: 100px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
} 
.contact-intro { text-align: center; margin-bottom: 50px; } 
.contact-intro h1 { font-size: 3rem; margin-bottom: 10px; color: #fff; } 
.contact-intro p { font-size: 1.1rem; color: #94a3b8; }

/* Info Below Form */ 
.contact-footer-info { 
    display: flex; 
    gap: 40px; 
    margin-top: 50px; 
} 
.info-item { 
    font-size: 1.1rem; 
    color: #cbd5e1; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    background: rgba(255,255,255,0.05); 
    padding: 15px 25px; 
    border-radius: 50px; 
    border: 1px solid rgba(255,255,255,0.1); 
}

/* Wide Form Mode */ 
.cyber-form-wrapper.wide-mode { 
    max-width: 800px !important; 
    width: 100%; 
    margin: 0 auto; 
} 
.wide-mode .hud-main { 
    padding: 40px 50px; 
}

/* --- FINAL CONTACT & LAYOUT FIXES --- */
/* 1. Fix the Overlap */
.contact-page-container { 
    padding-top: 200px !important; /* Pushes content down below header */
    padding-bottom: 100px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding-left: 20px; 
    padding-right: 20px; 
}

/* 2. Style the Intro Text */
.contact-intro { 
    text-align: center; 
    margin-bottom: 60px; 
    max-width: 700px; 
} 
.contact-intro h1 { 
    font-size: 3.5rem; 
    margin: 20px 0; 
    color: #fff; 
    line-height: 1.1; 
} 
.contact-intro p { 
    font-size: 1.1rem; 
    color: #94a3b8; 
    line-height: 1.6; 
}

/* 3. Form Input Row (Side by Side) */
.input-row { 
    display: flex; 
    gap: 20px; 
} 
.input-row .input-group { flex: 1; } 
@media(max-width:768px){ 
    .input-row { flex-direction: column; gap: 0; } 
}

/* 4. Info Deck (Bottom Cards) */
.contact-info-deck { 
    display: flex; 
    gap: 30px; 
    margin-top: 80px; 
    width: 100%; 
    justify-content: center; 
    flex-wrap: wrap; 
} 
.info-card { 
    background: rgba(15, 23, 42, 0.6); 
    border: 1px solid rgba(255,255,255,0.05); 
    padding: 20px 30px; 
    border-radius: 16px; 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    min-width: 300px; 
    transition: transform 0.3s; 
} 
.info-card:hover { 
    border-color: #6366f1; 
    transform: translateY(-5px); 
} 
.icon-box { 
    font-size: 1.5rem; 
    background: rgba(99, 102, 241, 0.1); 
    width: 50px; 
    height: 50px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 12px; 
} 
.info-text { 
    display: flex; 
    flex-direction: column; 
} 
.info-label { 
    font-size: 0.8rem; 
    color: #64748b; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    font-weight: 700; 
    margin-bottom: 4px; 
} 
.info-value { 
    font-size: 1.1rem; 
    color: #fff; 
}

/* 5. FORCE FOOTER ROW */ 


/* =========================================
   FINAL CONTACT PAGE POLISH (FORCE FIXES)
   ========================================= */
/* 1. FIX THE OVERLAP (Push content down hard) */
.contact-page-container { 
    padding-top: 240px !important; /* Huge padding to clear header */
    padding-bottom: 120px; 
    min-height: 100vh; 
    background: radial-gradient(circle at 50% 20%, rgba(99, 102, 241, 0.05) 0%, transparent 50%); 
}

/* 2. RESTORE THE NEON CYBER LOOK (The Form) */
.cyber-form-wrapper.wide-mode { 
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.9) 0%, rgba(2, 6, 23, 0.95) 100%); 
    border: 1px solid rgba(99, 102, 241, 0.3); /* Purple border */
    box-shadow: 0 0 80px rgba(99, 102, 241, 0.15), inset 0 0 20px rgba(99, 102, 241, 0.05); 
    backdrop-filter: blur(20px); 
}

/* Make the Sidebars Pop */
.hud-sidebar { 
    background: rgba(0, 0, 0, 0.4); 
    border-color: rgba(99, 102, 241, 0.2); 
}

/* 3. PREMIUM INFO CARDS (Bottom Section) */
.contact-info-deck { 
    margin-top: 80px; 
    gap: 40px; 
}

.info-card { 
    background: rgba(15, 23, 42, 0.4); 
    border: 1px solid rgba(255, 255, 255, 0.08); 
    padding: 25px 40px; 
    border-radius: 20px; 
    backdrop-filter: blur(10px); 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    position: relative; 
    overflow: hidden; 
}

.info-card:hover { 
    transform: translateY(-8px); 
    border-color: #818cf8; 
    box-shadow: 0 10px 40px rgba(99, 102, 241, 0.2); 
    background: rgba(99, 102, 241, 0.05); 
}

/* Glowing Icon Box */
.icon-box { 
    width: 60px; 
    height: 60px; 
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2)); 
    border: 1px solid rgba(99, 102, 241, 0.4); 
    border-radius: 16px; 
    font-size: 1.8rem; 
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.2); 
}

/* Text Styling */
.info-label { 
    color: #94a3b8; 
    font-size: 0.75rem; 
    letter-spacing: 2px; 
    margin-bottom: 5px; 
    display: block; 
} 
.info-value { 
    color: #fff; 
    font-size: 1.25rem; 
    font-weight: 600; 
    font-family: 'Inter', sans-serif; 
}

/* --- FORCE NEON VISUALS --- */
/* 1. The Container Box (Needs to glow) */
.cyber-form-wrapper.wide-mode { 
    background: #020617 !important; /* Deep black/blue */
    border: 1px solid rgba(99, 102, 241, 0.5) !important; /* Purple Border */
    box-shadow: 0 0 30px rgba(99, 102, 241, 0.2) !important; /* Neon Glow */
    border-radius: 24px; 
    overflow: hidden; 
    max-width: 900px; 
    margin: 0 auto; 
    display: flex; /* Ensure sidebars are side-by-side */
}

/* 2. The Sidebars (Wings) - Make them visible */
.hud-sidebar { 
    background: rgba(15, 23, 42, 0.8) !important; 
    border-right: 1px solid rgba(255,255,255,0.1); 
    min-width: 60px; /* Ensure width */
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 20px 0; 
    justify-content: space-between; 
} 
.hud-sidebar.right { 
    border-right: none; 
    border-left: 1px solid rgba(255,255,255,0.1); 
}

/* 3. The Inputs (Dark Mode) */
.uplink-input { 
    background: rgba(2, 6, 23, 0.5); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    color: #fff; 
    font-family: 'Courier New', monospace; 
} 
.uplink-input:focus { 
    border-color: #a855f7; 
    box-shadow: 0 0 15px rgba(168, 85, 247, 0.2); 
}

/* 4. Active Dots (Glow) */
.dot-control.active-purple { 
    background: #8b5cf6; 
    box-shadow: 0 0 10px #8b5cf6; 
    border: none; 
} 
.square-control.active { 
    border-color: #d8b4fe; 
    background: rgba(216, 180, 254, 0.2); 
    box-shadow: 0 0 8px #d8b4fe; 
}

/* 5. Info Cards with SVGs */
.icon-box svg { 
    stroke: #a855f7; 
} 
.contact-page-container { 
    padding-top: 180px; 
    padding-bottom: 100px; 
}

/* --- EMERGENCY REPAIR: FORCE NEON FORM --- */
body { background-color: #020617; color: #fff; } /* Safety net */

.cyber-form-wrapper.wide-mode { 
    display: flex !important; 
    background: #020617 !important; 
    border: 1px solid rgba(139, 92, 246, 0.5) !important; /* Visible Purple Border */
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.2) !important; /* Visible Glow */
    border-radius: 20px; 
    overflow: hidden; 
    max-width: 900px; 
    width: 100%; 
    margin: 0 auto; 
}

.hud-sidebar { 
    background: rgba(15, 23, 42, 0.9) !important; 
    border-right: 1px solid rgba(255,255,255,0.1); 
    width: 60px; 
    min-width: 60px; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: space-between; 
    padding: 20px 0; 
} 
.hud-sidebar.right { 
    border-right: none; 
    border-left: 1px solid rgba(255,255,255,0.1); 
}

.hud-main { 
    flex: 1; 
    padding: 40px; 
}

.dot-control.active-purple { 
    background: #a855f7; 
    box-shadow: 0 0 10px #a855f7; 
} 
.square-control.active { 
    border-color: #a855f7; 
    background: rgba(168, 85, 247, 0.3); 
}

.contact-page-container { 
    padding-top: 180px; /* Clear the header */
    padding-bottom: 100px; 
    min-height: 100vh; 
}

/* --- FINAL CONTACT PAGE STYLING --- */
.contact-page-wrapper {
    padding-top: 180px;
    padding-bottom: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
}
.contact-intro-text {
    text-align: center; margin-bottom: 50px; max-width: 600px; padding: 0 20px;
}
.contact-intro-text h1 { font-size: 3rem; }

/* Stylish Info Deck */ 
.contact-info-deck { 
    margin-top: 60px; 
    display: flex; 
    gap: 30px; 
    flex-wrap: wrap; 
    justify-content: center; 
} 
.stylish-info-card { 
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 20px 35px; 
    border-radius: 20px; 
    display: flex; 
    align-items: center; 
    gap: 20px; 
    transition: transform 0.3s, border-color 0.3s; 
} 
.stylish-info-card:hover { 
    transform: translateY(-5px); 
    border-color: rgba(139, 92, 246, 0.5); /* Purple glow on hover */ 
} 
.card-icon-glow { 
    width: 45px; 
    height: 45px; 
    background: rgba(139, 92, 246, 0.1); 
    border-radius: 12px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border: 1px solid rgba(139, 92, 246, 0.2); 
} 
.stylish-info-card span { 
    color: #e2e8f0; 
    font-weight: 500; 
    letter-spacing: 0.5px; 
}

/* --- FOOTER CONTENT UPGRADES --- */

/* Logo Styling */
.footer-logo-img {
    height: 32px; /* Adjust based on logo aspect ratio */
    width: auto;
    margin-bottom: 20px;
    opacity: 0.9;
}

/* Description Refinement */
.footer-desc {
    color: #94a3b8;
    max-width: 300px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Social Icons Container */
.footer-socials {
    display: flex;
    gap: 15px;
}

/* Individual Icons */
.social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    color: #94a3b8;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.social-icon:hover {
    background: #6366f1; /* Brand Purple */
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
    border-color: #6366f1;
}

/* Typography Polish */
.footer-col h5 {
    color: #fff;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    opacity: 0.8;
}

/* --- FOOTER LOGO FIX --- */
.footer-logo-img {
    display: block;
    height: 40px !important; /* Force height */
    width: auto;  /* Maintain aspect ratio */
    margin-bottom: 20px;
    filter: brightness(0) invert(1); /* Forces logo to be White if it's black */
}

/* --- LEGAL PAGE STYLING --- */
.legal-page-wrapper {
    padding-top: 160px;
    padding-bottom: 100px;
    min-height: 100vh;
    background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 50%);
}

.legal-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.legal-title {
    font-size: 3rem;
    color: #fff;
    margin-bottom: 10px;
}

.legal-date {
    color: #94a3b8;
    margin-bottom: 50px;
    font-size: 0.9rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 30px;
}

.legal-content-box {
    background: rgba(15, 23, 42, 0.4); /* Glass Dark */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 50px;
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.legal-content-box h3 {
    color: #fff;
    font-size: 1.5rem;
    margin-top: 40px;
    margin-bottom: 20px;
}
.legal-content-box h3:first-child { margin-top: 0; }

.legal-content-box p {
    color: #cbd5e1;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 1.05rem;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .legal-content-box { padding: 30px; }
    .legal-title { font-size: 2.2rem; }
}

/* Language Switcher UI */
.language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem; /* 14px */
    position: relative;
    z-index: 1000; /* Fix for click blocking */
}

.lang-btn {
    cursor: pointer;
    color: #8892b0; /* Dimmed Gray */
    font-weight: 500;
    transition: all 0.3s ease;
    letter-spacing: 0.05em;
}

.lang-btn:hover {
    color: #cbd5e1; /* Brighter on hover */
}



/* SCENARIO 1: ENGLISH (Default or explicitly EN) */
/* If html tag DOES NOT have .lang-ro, EN is active */
html:not(.lang-ro) #btn-en {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    font-weight: 700;
}
html:not(.lang-ro) #btn-ro {
    color: #8892b0 !important; /* Dimmed */
    font-weight: 500;
}

/* SCENARIO 2: ROMANIAN */
/* If html tag HAS .lang-ro, RO is active */
html.lang-ro #btn-ro {
    color: #ffffff !important;
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
    font-weight: 700;
}
html.lang-ro #btn-en {
    color: #8892b0 !important; /* Dimmed */
    font-weight: 500;
}

.lang-separator {
    color: #475569; /* Slate-600 */
    font-weight: 300;
}

/* 1. HUGE TITLE (Only for Homepage ID) */
/* ENGLISH (Standard Large) */
#home-main-title {
    /* Reduced from 9vw to 7vw */
    font-size: clamp(3.5rem, 7vw, 6rem) !important; 
    line-height: 1.15;
    max-width: 100%;
}

/* ROMANIAN (Compensated Large) */
body.lang-ro #home-main-title {
    /* Reduced from 10.5vw to 7.5vw (The Sweet Spot) */
    font-size: clamp(3.5rem, 7.5vw, 6.5rem) !important;
    letter-spacing: -0.02em; /* Less aggressive tracking */
    line-height: 1.1;
    padding-top: 20px;
}

/* 2. STANDARD TITLE (For Legal, Solutions, Contact) */
.hero-title {
    /* Reset to normal size for everyone else */
    font-size: clamp(2.5rem, 5vw, 4rem) !important;
    letter-spacing: normal !important;
    line-height: 1.2 !important;
}

/* GLOBAL WIDE LAYOUT (Standard for EN & RO) */
@media (min-width: 1200px) {
    /* 1. Unlock Container Width */
    .max-w-7xl,
    .hero-stage, 
    header .nav-container { 
        max-width: 95vw !important; 
        width: 95vw !important;
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
    
    /* 2. TEXT SIDE: Dominant 60% Width */
    .hero-text-container {
        flex: 0 0 60% !important;
        max-width: 60% !important;
        width: 60% !important;
        padding-right: 50px !important; /* Physical buffer */
    }

    /* 3. FORM SIDE: pushed to side */
    .hero-form-container {
        flex: 0 0 35% !important; 
        max-width: 35% !important;
        width: 35% !important;
        margin-left: auto !important;
    }
    
    /* Ensure Grid layout respects these */
    .hero-grid {
        display: flex !important; /* Force flex instead of grid for custom widths */
        align-items: center !important;
        justify-content: space-between !important;
    }

    /* Increase Default Hero Title Size (English) to match wide layout */
    h1, .hero-title {
        font-size: clamp(3.5rem, 7vw, 6.5rem); 
        line-height: 1.1;
        max-width: 100%;
    }
}

/* MAXIMIZED MOBILE FONTS (Aggressive) */
@media (max-width: 768px) {
    /* Romanian Mobile: 13.5vw fills the screen width */
    body.lang-ro .hero-title,
    body.lang-ro h1 {
        font-size: 13.5vw !important; 
        line-height: 1.1;
        letter-spacing: -1px; 
        max-width: 100%;
        width: 100%;
    }

    /* English Mobile: even larger because word is shorter */
    .hero-title, h1 {
        font-size: 15vw !important; /* Huge impact */
        line-height: 1.1;
    }

    /* Reduce padding to give text maximum room */
    .hero-stage, .max-w-7xl, header .nav-container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}




/* =========================================
   SOLUTIONS CARD FIXES (EQUAL HEIGHT)
   ========================================= */
/* 1. FORCE EQUAL HEIGHT */
.solutions-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px; /* Added gap for spacing */
    width: 100%;
    justify-content: center; /* Center the grid */
}

.solution-card {
    display: flex;
    flex-direction: column;
    height: 100%; /* Fill the grid column */
    min-height: 620px !important; /* Reduced from 750px */
    justify-content: space-between; /* Push content apart */
    
    /* Re-adding base styles just in case sol-card was providing them */
    background: linear-gradient(180deg, rgba(30, 41, 59, 0.4) 0%, rgba(15, 23, 42, 0.6) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    transition: all 0.4s ease;
    flex: 1 1 350px; /* Responsive flex basis */
    max-width: 400px;
}

.solution-card:hover {
    transform: translateY(-10px);
    border-color: rgba(139, 92, 246, 0.5);
    box-shadow: 0 20px 60px rgba(139, 92, 246, 0.2);
}

/* 2. ALIGN BUTTON TO BOTTOM */
/* Target the container wrapping the toggle button */
.solution-card .card-footer-btn-container { 
    margin-top: auto; /* This pushes the button to the absolute bottom */
    padding-top: 2rem;
    width: 100%;
}

/* Ensure the hidden content doesn't break layout when revealed */
.card-hidden-details {
    margin-top: 1rem;
    display: none; /* Hidden by default, toggled by JS */
}
.card-hidden-details.visible {
    display: block;
    animation: fadeIn 0.5s ease;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.expand-btn {
    width: 100%;
    /* Ensure existing button styles are kept or reinforced */
}


/* =========================================
   TYPOGRAPHY STANDARDIZATION
   ========================================= */
.hero-title {
    font-weight: 400 !important; /* Forces thin/standard look everywhere */
}

/* Ensure the Homepage specific ID also inherits this */
#home-main-title {
    font-weight: 400 !important; 
}


/* =========================================
   DOCUMENTATION HUB STYLES
   ========================================= */
.docs-page {
    padding-top: 100px;
}

.docs-hero {
    text-align: center;
    padding: 60px 20px 40px;
    position: relative;
    z-index: 10;
}

.docs-container {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 80px;
    position: relative;
    z-index: 10;
}

/* Sidebar Styles */
.docs-sidebar {
    width: 250px;
    flex-shrink: 0;
    position: sticky;
    top: 100px;
    height: fit-content;
    padding-right: 30px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.docs-sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.docs-sidebar nav ul li {
    margin-bottom: 8px;
}

.docs-nav-link {
    display: block;
    padding: 10px 15px;
    color: #94a3b8;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    font-size: 0.95rem;
}

.docs-nav-link:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}

.docs-nav-link.active {
    color: #fff;
    background: rgba(139, 92, 246, 0.2);
    border-left: 3px solid #8b5cf6;
}

/* Main Content Styles */
.docs-content {
    flex: 1;
    min-width: 0;
}

.docs-section {
    margin-bottom: 60px;
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.docs-section:last-child {
    border-bottom: none;
}

.docs-section h2 {
    font-size: 1.8rem;
    color: #fff;
    margin-bottom: 20px;
    font-weight: 600;
}

.docs-section p {
    color: #cbd5e1;
    line-height: 1.8;
    font-size: 1.05rem;
    margin-bottom: 20px;
}

/* Technical Note Box */
.docs-note {
    background: rgba(139, 92, 246, 0.1);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 12px;
    padding: 20px;
    margin: 25px 0;
    color: #c4b5fd;
    font-size: 0.95rem;
}

.docs-note strong {
    color: #a78bfa;
}

/* Docs List */
.docs-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.docs-list li {
    color: #94a3b8;
    padding: 8px 0;
    font-size: 1rem;
}

/* Integration Cards Grid */
.docs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 25px;
}

.docs-integration-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.docs-integration-card strong {
    color: #8b5cf6;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.docs-integration-card span {
    color: #94a3b8;
    font-size: 0.95rem;
}

/* Timeline */
.docs-timeline {
    margin-top: 30px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.timeline-item:last-child {
    border-bottom: none;
}

.timeline-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #8b5cf6;
    min-width: 40px;
}

.timeline-item strong {
    color: #fff;
    display: block;
    margin-bottom: 5px;
    font-size: 1.1rem;
}

.timeline-item p {
    color: #94a3b8;
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FAQ Items */
.faq-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 25px;
    margin-bottom: 15px;
}

.faq-item h3 {
    color: #fff;
    font-size: 1.1rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.faq-item p {
    color: #94a3b8;
    margin: 0;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .docs-container {
        flex-direction: column;
    }
    
    .docs-sidebar {
        width: 100%;
        position: static;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-right: 0;
        padding-bottom: 20px;
        margin-bottom: 30px;
    }
    
    .docs-sidebar nav ul {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    
    .docs-sidebar nav ul li {
        margin-bottom: 0;
    }
    
    .docs-nav-link {
        padding: 8px 12px;
        font-size: 0.85rem;
    }
    
    .docs-section h2 {
        font-size: 1.5rem;
    }
    
    .docs-grid {
        grid-template-columns: 1fr;
    }
    
    .timeline-item {
        flex-direction: column;
        gap: 10px;
    }
}


/* =========================================
   NAVBAR SUITE DROPDOWN (DARK GLASSMORPHISM)
   ========================================= */
.nav-item-dropdown {
    position: relative;
    display: inline-block;
}

.nav-item-dropdown::after {
    content: "";
    position: absolute;
    bottom: -15px; /* Bridge the hover gap */
    left: 0;
    width: 100%;
    height: 15px;
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    opacity: 0;
    visibility: hidden;
    min-width: 220px;
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 10px 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 15px rgba(139, 92, 246, 0.1);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
}

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

.nav-dropdown-link {
    display: block;
    padding: 12px 20px;
    color: #cbd5e1;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    border-left: 3px solid transparent;
}

.nav-dropdown-link:hover {
    background: rgba(139, 92, 246, 0.1);
    color: #fff;
    border-left: 3px solid #8b5cf6;
    text-shadow: 0 0 10px rgba(139, 92, 246, 0.8);
}