:root {
    /* Color Palette derived from screenshot */
    --clr-bg: #09192b;
    --clr-bg-dark: #05101f;
    --clr-primary: #1f8fff;
    --clr-secondary: #00c6ff;
    --clr-text: #ffffff;
    --clr-text-muted: #a0aec0;
    
    /* UI Elements */
    --clr-card-bg: #0d2136;
    --clr-card-border: rgba(31, 143, 255, 0.15);
    --clr-card-border-hover: rgba(31, 143, 255, 0.4);
    
    /* Buttons explicitly */
    --btn-primary-bg: #1f7dfa;
    --btn-secondary-bg: #00c6ff;
    
    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    
    /* Variables */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 9999px;
}

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

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: var(--font-primary);
    background-color: var(--clr-bg);
    color: var(--clr-text);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
}

/* Base Body Background Overlay for Depth */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle at top left, rgba(0, 198, 255, 0.08) 0%, transparent 40%),
                radial-gradient(circle at bottom right, rgba(31, 143, 255, 0.05) 0%, transparent 40%);
    z-index: -1;
    pointer-events: none;
}

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

ul {
    list-style: none;
}

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

button {
    cursor: pointer;
    font-family: var(--font-primary);
    border: none;
    outline: none;
    background: none;
    color: inherit;
}

/* Typography Classes */
h1, h2, h3, h4, h5, h6 {
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.01em;
}

h1 {
    font-size: clamp(2.5rem, 5vw + 1rem, 4.25rem);
    margin-bottom: 1.5rem;
}

h2 {
    font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
    margin-bottom: 1rem;
}

h3 {
    font-size: 1.25rem;
    margin-bottom: 0.75rem;
}

.text-gradient {
    color: #fff; /* Reset to solid white based on screenshot */
}

/* Layout Classes */
.container {
    width: 100%;
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 2rem;
}

.section-padding {
    padding: 6rem 0;
}

.center {
    text-align: center;
}

/* UI Components */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
    text-decoration: none;
    gap: 0.5rem;
    position: relative;
    overflow: hidden;
}

.lg-btn {
    padding: 0.875rem 1.75rem;
    font-size: 1rem;
}

.primary-btn {
    background: var(--btn-primary-bg);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.primary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 143, 255, 0.4);
}

.secondary-btn {
    background: var(--btn-secondary-bg);
    color: #000;
    border: 1px solid rgba(0, 198, 255, 0.1);
}

.secondary-btn.ghost {
    color: #000;
}

.secondary-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 198, 255, 0.4);
}

.glass-card {
    background: var(--clr-card-bg);
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: var(--transition-base);
}

.glass-card:hover {
    border-color: var(--clr-card-border-hover);
    transform: translateY(-5px);
}

/* Animations Utilities */
.animate-fade-up {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--delay, 0) * 0.1s);
}

.animate-fade-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

/* -------- Specific Sections -------- */

/* Navigation */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 1.5rem 0;
    transition: var(--transition-base);
}

.navbar.scrolled {
    padding: 1rem 0;
    background: rgba(9, 25, 43, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
}

.logo {
    display: flex;
    align-items: center;
}

.nav-container .logo {
    margin-left: 2rem;
}

.logo-image {
    height: 28px;
    width: auto;
}

.logo-icon {
    color: var(--clr-primary);
    width: 28px;
    height: 28px;
}

.nav-links {
    display: flex;
    gap: 2rem;
}

.nav-links a {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--clr-text-muted);
}

.nav-links a:hover {
    color: var(--clr-text);
}

.nav-buttons {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.menu-toggle {
    display: none;
    color: white;
    font-size: 1.5rem;
}

/* Hero Section */
.hero {
    position: relative;
    padding: 11rem 0 6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.hero-bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(31, 143, 255, 0.1) 0%, transparent 60%);
    z-index: -1;
    pointer-events: none;
}

.hero-container {
    max-width: 900px;
}

.subheadline {
    font-size: 1.15rem;
    color: var(--clr-text-muted);
    margin: 0 auto 2.5rem;
    max-width: 750px;
    line-height: 1.5;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 3rem;
}

.trust-bullets {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.bullet {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    font-weight: 500;
}

.bullet-icon {
    width: 16px;
    height: 16px;
    color: var(--clr-secondary);
}

/* Services */
.section-header {
    margin-bottom: 3.5rem;
}

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

.service-card {
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.icon-wrapper {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-sm);
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 1.5rem;
}

.feature-list {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--clr-text-muted);
    font-size: 0.9rem;
}

.feature-list li i {
    width: 16px;
    height: 16px;
    color: var(--clr-secondary);
    flex-shrink: 0;
    margin-top: 0.15rem;
}

/* Process */
.process-flow {
    display: flex;
    justify-content: space-between;
    position: relative;
    padding-top: 1rem;
    max-width: 900px;
    margin: 0 auto;
}

.process-line {
    position: absolute;
    top: 50px;
    left: 15%;
    right: 15%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.process-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 2;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 1.25rem;
    box-shadow: 0 10px 30px rgba(31, 143, 255, 0.4);
}

.step-icon i {
    width: 30px;
    height: 30px;
}

.step-number {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--clr-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.process-step h3 {
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
}

.process-step p {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
    max-width: 220px;
    margin: 0 auto;
}

/* Timeline specific to screenshot */
.timeline-box {
    padding: 3rem;
    border: 1px solid var(--clr-card-border);
}

.timeline-horizontal {
    display: flex;
    justify-content: space-around;
    position: relative;
    padding-top: 1rem;
}

.timeline-h-item {
    text-align: center;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.timeline-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(31, 143, 255, 0.3);
}

.timeline-h-item h4 {
    margin-bottom: 0.25rem;
}

.timeline-h-item p {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
}

/* FAQ Section */
.faq-badge {
    color: var(--clr-secondary);
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.faq-item {
    border: 1px solid var(--clr-card-border);
    border-radius: var(--radius-sm);
    background: var(--clr-card-bg);
    overflow: hidden;
}

.faq-question {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.25rem 1.5rem;
    text-align: left;
    font-weight: 500;
    font-size: 0.95rem;
    color: #fff;
    cursor: pointer;
    background: transparent;
}

.faq-question i {
    color: var(--clr-secondary);
    transition: transform 0.3s ease;
    width: 18px;
    height: 18px;
}

.faq-item.active .faq-question i {
    transform: rotate(45deg);
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.faq-answer p {
    padding: 0 1.5rem 1.25rem;
    color: var(--clr-text-muted);
    font-size: 0.9rem;
}

/* Contact */
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.contact-info .subtitle {
    font-size: 1rem;
    color: var(--clr-text-muted);
    margin-bottom: 2.5rem;
}

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

.contact-card {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem;
}

.card-text .label {
    font-size: 0.85rem;
    color: var(--clr-text-muted);
    margin-bottom: 0.2rem;
    display: block;
}

.card-text .value {
    font-size: 1.25rem;
    font-weight: 700;
    color: #ffffff !important;
    display: block;
    position: relative;
    z-index: 2;
}

.contact-card[href^="mailto:"] .card-text .value {
    font-size: 1.1rem;
}

.contact-form-wrapper {
    padding: 2.5rem;
}

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

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

.form-group.half-width {
    flex-direction: row;
    gap: 1.25rem;
}

.form-group.half-width > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--clr-text-muted);
}

input, select, textarea {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    color: #fff;
    font-family: var(--font-primary);
    font-size: 0.9rem;
    transition: var(--transition-base);
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--clr-primary);
}

textarea {
    resize: vertical;
    min-height: 100px;
}

.select-wrapper {
    position: relative;
}

select {
    appearance: none;
    cursor: pointer;
}

.select-icon {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--clr-text-muted);
}

.full-width {
    width: 100%;
    margin-top: 0.5rem;
}

/* Footer */
.footer {
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: var(--clr-bg-dark);
    padding: 3rem 0 1.5rem;
}

.footer-container {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 3rem;
    margin-bottom: 3rem;
}

.footer-brand p {
    color: var(--clr-text-muted);
    margin-top: 1rem;
    max-width: 350px;
    font-size: 0.9rem;
}

.footer-links h4 {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.footer-links ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer-links a {
    color: var(--clr-text-muted);
    font-size: 0.9rem;
}

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

.footer-legal {
    text-align: left;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: var(--clr-text-muted);
    font-size: 0.8rem;
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .nav-links, .nav-buttons {
        display: none;
    }
    
    .menu-toggle {
        display: block;
    }
    
    .hero-actions {
        flex-direction: column;
    }
    
    .process-flow {
        flex-direction: column;
        gap: 2.5rem;
    }
    
    .process-line {
        display: none;
    }
    
    .timeline-horizontal {
        flex-direction: column;
        gap: 2rem;
    }
    
    .footer-container {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 600px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
    
    .form-group.half-width {
        flex-direction: column;
        gap: 1.25rem;
    }
    
    .contact-form-wrapper {
        padding: 1.5rem;
    }
    
    .trust-bullets {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }
}
/* Fix Service Cards layout based on screenshots */
.service-card {
    background: #0d2136;
    border: 1px solid rgba(31, 143, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 2.5rem 2rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    align-items: flex-start;
    text-align: left;
}

.service-card .icon-wrapper {
    background: #1a7cf7;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    margin-bottom: 2rem;
}

.service-card h3 {
    font-size: 1.15rem;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}
/* specific adjustments for Process step icons */
.process-step .step-icon {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    box-shadow: 0 0 20px rgba(31, 143, 255, 0.4);
}

.process-step .step-icon i {
    width: 28px;
    height: 28px;
    color: white;
}
/* Timeline adjustments to match screenshot exactly */
.timeline-horizontal {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 2rem;
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}
.timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 55px; /* aligned to circle center */
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    z-index: 1;
}

.timeline-h-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

.timeline-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--btn-primary-bg);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 0 20px rgba(31, 143, 255, 0.4);
}

.timeline-box h2 {
    margin-bottom: 2rem;
    font-size: 1.75rem;
}

.timeline-h-item h4 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
}

.timeline-h-item p {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
}
/* Ensure logo sizing is proportional */
.logo { display:flex; align-items:center; gap: 0.5rem; font-weight: 800; font-size:1.5rem; color:#fff;}
/* Fix Mobile Menu Overlay */
.mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 100%;
    height: 100vh;
    background: rgba(3, 13, 23, 0.98);
    backdrop-filter: blur(15px);
    z-index: 2000;
    transition: right 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden; /* Ensure it's hidden */
}

.mobile-menu.open {
    right: 0;
    visibility: visible;
}
/* Override fix for mobile menu bug since appending might not override correctly based on cascade */
.mobile-menu {
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, right 0.3s ease;
}

.mobile-menu.open {
    visibility: visible;
    opacity: 1;
}

/* Hide fallback image logo trick causing double display on desktop */
.logo-image {
    display: block;
}
.logo-fallback {
    display: none !important;
}

.mobile-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none;
}

.mobile-menu.open {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: all;
    right: 0;
}
/* Ensure logo sizing is proportional and no text is beside it */
.logo { 
    display:flex; 
    align-items:center; 
    gap: 0.5rem; 
}
.logo-image {
    height: 48px; /* Increased from 35px for better visibility */
    width: auto;
    display: block !important;
}
.logo span {
    display: none; /* Hide the text "DeepFlow" next to it since the logo stands alone in screenshot */
}
/* Override logo size to make it bigger and easier to read per user request */
.logo-image {
    height: 70px !important; 
    max-height: none !important;
}
.navbar .container {
    height: 80px !important; 
}
/* Hero section specific text layout */
.hero-container h1 {
    font-size: clamp(3rem, 5vw + 1rem, 4.5rem);
    line-height: 1.1;
    margin-bottom: 2rem;
}

.hero-container .subheadline {
    font-size: 1.25rem;
    max-width: 800px;
    margin-bottom: 3rem;
}

/* Widen the overall container as requested */
.container {
    max-width: 1400px; /* Increased from 1140px */
}

/* Align navigation to distribute space better */
.nav-container {
    padding: 0 1rem;
}

.nav-links {
    gap: 2.5rem; /* Increase gap between links */
}

/* Adjust button font sizes in hero */
.hero-actions .btn {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
}
/* Header redesign for new logo contrast and sizing (140px) */
.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
    border-bottom: none;
}

/* Adjust header/banner height to 140px */
.navbar .container {
    height: 140px !important; 
}

/* Adjust logo to fit the new header */
.logo-image {
    max-height: 100px !important; /* Fits comfortably inside 140px header */
    height: auto !important;
    width: auto !important;
}

/* Update nav links to be visible on white background */
.navbar .nav-links a {
    color: #0f172a !important; /* Dark navy/slate */
    font-weight: 600;
}
.navbar .nav-links a:hover {
    color: var(--clr-primary) !important;
}

/* Mobile menu toggle color */
.navbar .menu-toggle {
    color: #0f172a !important;
}

/* Adjust Hero padding so it doesn't get covered by the much taller 140px fixed header */
.hero {
    padding-top: 220px !important; /* Increased from ~180px */
}

/* Adjust footer logo to match if needed, but primarily focusing on header */
.footer-brand .logo-image {
    max-height: 50px !important;
    background-color: #ffffff;
    padding: 0.5rem;
    border-radius: 8px;
}
/* Revert header to blue shade and adjust text colors */
.navbar {
    background-color: #0d2136 !important; /* Slightly lighter blue than hero background */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.navbar.scrolled {
    background-color: rgba(13, 33, 54, 0.95) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(10px) !important;
}

/* Update nav links back to light colors */
.navbar .nav-links a {
    color: var(--clr-text-muted) !important; 
}
.navbar .nav-links a:hover {
    color: #ffffff !important;
}

/* Revert Mobile menu toggle color */
.navbar .menu-toggle {
    color: #ffffff !important;
}
/* Revert header height to a much smaller size while keeping logo scale */
.navbar .container {
    height: 80px !important; /* Back to a reasonable height */
}

/* Crop the logo vertically so it remains large but doesn't stretch the header */
.logo {
    height: 60px; /* Constrain the logo container */
    overflow: hidden; /* Hide the vertical overflow (the white space of the image) */
    display: flex;
    align-items: center;
}

.logo-image {
    height: 140px !important; /* Keep the logo large */
    max-height: none !important;
    width: auto !important;
    object-fit: cover !important;
    object-position: center !important; /* Center the crop vertically */
}

/* Adjust Hero padding back up since header is smaller */
.hero {
    padding-top: 160px !important; 
}
/* =========================================
   LIGHT THEME OVERRIDES 
   ========================================= */
:root {
    --clr-bg: #ffffff;
    --clr-bg-dark: #f8fafc;
    --clr-text: #0f172a; /* Dark slate for headings and main text */
    --clr-text-muted: #475569; /* Slate gray for paragraphs */
    --clr-card-bg: #ffffff;
    --clr-card-border: rgba(31, 143, 255, 0.15);
    --clr-card-border-hover: rgba(31, 143, 255, 0.4);
}

/* Adjust the subtle background gradients for light mode */
body::before {
    background: radial-gradient(circle at top left, rgba(0, 198, 255, 0.08) 0%, transparent 40%),
                radial-gradient(circle at bottom right, rgba(31, 143, 255, 0.08) 0%, transparent 40%);
}

.hero-bg-glow {
    background: radial-gradient(circle, rgba(31, 143, 255, 0.15) 0%, transparent 60%);
}

/* Ensure text overrides are solid */
.text-gradient {
    color: #0f172a;
}

/* Header Overrides */
.navbar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
}

.navbar.scrolled {
    background-color: rgba(255, 255, 255, 0.98) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;
}

.navbar .nav-links a {
    color: #475569 !important; 
}

.navbar .nav-links a:hover {
    color: var(--clr-primary) !important;
}

.navbar .menu-toggle {
    color: #0f172a !important;
}

/* Card and Container adjustments for light mode */
.service-card {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.faq-item {
    background: #ffffff;
}

.faq-question {
    color: #0f172a;
}

/* Form inputs for light mode */
input, select, textarea {
    background: #ffffff;
    border: 1px solid #cbd5e1;
    color: #0f172a;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
}

input:focus, select:focus, textarea:focus {
    background: #ffffff;
    border-color: var(--clr-primary);
    box-shadow: 0 0 0 3px rgba(31, 143, 255, 0.1);
}

.card-text .value {
    color: #0f172a;
}

/* Connective lines in process/timeline */
.process-line {
    background: rgba(31, 143, 255, 0.2);
}

.timeline-horizontal::before {
    background: rgba(31, 143, 255, 0.2);
}

/* Footer text overrides */
.footer-brand p, .footer-links a, .footer-legal {
    color: #475569;
}

.logo {
    color: #0f172a; /* Fallback text color if logo image fails */
}

/* =========================================
   ENHANCED BLUE BACKGROUND ACCENTS 
   ========================================= */
body::before {
    /* Create larger, more visible blue soft gradients in the background */
    background: 
        radial-gradient(circle at 15% 20%, rgba(31, 143, 255, 0.4) 0%, transparent 40%),
        radial-gradient(circle at 85% 60%, rgba(0, 198, 255, 0.3) 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, rgba(31, 143, 255, 0.25) 0%, transparent 50%);
    opacity: 0.6; /* Ensure they are visible but subtle against the white */
    z-index: -1;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}

.hero-bg-glow {
    /* Enhance the hero specific glow */
    background: radial-gradient(circle, rgba(31, 143, 255, 0.3) 0%, transparent 70%);
}
/* Reduce the large gap between the Hero trust bullets and Services heading */
.hero {
    padding-bottom: 2rem !important; /* Reduced from 6rem */
}

.services.section-padding {
    padding-top: 3rem !important; /* Reduced from 6rem to pull the heading up */
}
/* Expand Process Flow container width to match the Services grid */
.process-flow {
    max-width: 1400px; /* Match the new widened container */
    width: 100%;
}

.process-step p {
    max-width: 320px; /* Allow the paragraph text to stretch out more since we have wider columns */
}
/* Style the new Timeline-in-Process labels */
.process-step .step-number {
    color: var(--clr-primary);
    font-weight: 800;
    line-height: 1;
}
/* =========================================
   LAYOUT COMPACTING & ALIGNMENT 
   ========================================= */

/* Revert the main container back to a more central, compact width (1140px) */
.container {
    max-width: 1140px !important;
}

/* Ensure the Process Flow steps align with this new narrower container */
.process-flow {
    max-width: 1140px;
}

/* 
  Top Header Alignment:
  The user wants the logo to stay far-left (where it was at 1400px container width)
  but wants the right buttons and all content below to align centrally.
  We calculate the difference in margin to fake this alignment perfectly on large screens. 
*/
@media (min-width: 1140px) {
    .navbar .container {
        /* Keep header container wide to allow the logo to stretch out left */
        max-width: 1400px !important; 
        
        /* Push the right side (Call Now/Book buttons) inward to vertically align 
           perfectly with the right edge of the 1140px container below it.
           Math: base 2rem padding + half of the difference between the 1400px outer and 1140px inner. */
        padding-right: calc(2rem + (min(100vw, 1400px) - 1140px) / 2) !important;
    }
}
/* Widen the FAQ accordion container to match the 1140px grid */
.faq-container {
    max-width: 1140px !important;
    width: 100%;
}