/**
 * QueryMate Light Theme Consistency Styles
 * Aligns with index.html (Home) and agents.html (AI Agent)
 */

:root {
    --prussian-blue: #0B3C5D;
    --sky-blue: #328CC1;
    --gold: #D9B310;
    --ivory-black: #1D2731;
    --bg-light: #F8FAFC;
    --white: #FFFFFF;
}

/* Base Body Style */
body {
    background-color: var(--white);
    color: var(--ivory-black);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    overflow-x: hidden;
}

/* Section Spacing Reductions */
section {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

/* Gradient Text to match Brand */
.gradient-text {
    background: linear-gradient(135deg, var(--prussian-blue), var(--sky-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

/* Card Styling Consistency */
.problem-card,
#aisystems .rounded-2xl,
#about .rounded-2xl,
#technical-architecture .rounded-2xl {
    background: var(--white) !important;
    border: 1px solid rgba(11, 60, 93, 0.1) !important;
    box-shadow: 0 4px 20px rgba(11, 60, 93, 0.05) !important;
    transition: all 0.3s ease !important;
}

.problem-card:hover,
#aisystems .rounded-2xl:hover,
#about .rounded-2xl:hover,
#technical-architecture .rounded-2xl:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(11, 60, 93, 0.1) !important;
    border-color: var(--sky-blue) !important;
}

/* Button Styling */
.primary-btn {
    background: var(--prussian-blue) !important;
    color: var(--white) !important;
    border: none !important;
    padding: 0.75rem 2rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(11, 60, 93, 0.2) !important;
}

.primary-btn:hover {
    background: var(--sky-blue) !important;
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(50, 140, 192, 0.3) !important;
}

.secondary-btn {
    background: transparent !important;
    border: 2px solid var(--prussian-blue) !important;
    color: var(--prussian-blue) !important;
    padding: 0.75rem 2rem !important;
    border-radius: 9999px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.secondary-btn:hover {
    background: var(--prussian-blue) !important;
    color: var(--white) !important;
}

/* Icon / Circle Styling */
.w-16.h-16.rounded-full {
    background: linear-gradient(135deg, var(--prussian-blue), var(--sky-blue)) !important;
}

/* Hero Modifications */
.hero-section {
    padding-top: 5rem !important;
    /* Account for fixed navbar */
    min-height: auto !important;
}

.hero-heading .text-gray-600 {
    color: var(--prussian-blue) !important;
}

.description-main {
    color: var(--ivory-black) !important;
    opacity: 0.8;
}

/* Modern AI Background Animation Section */
#animated-background-section {
    opacity: 0.4;
    pointer-events: none;
}

/* Footer & Nav Consistency handled by JS injection, but CSS helpers: */
header {
    border-bottom: 1px solid rgba(11, 60, 93, 0.1);
}