@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

:root {
    /* Core Brand Colors */
    --primary-blue: #00A3E0;
    --primary-dark: #0077A3;

    /* Functional Colors (Light Mode Default) */
    --bg-page: #FFFFFF;
    --bg-card: #F9FAFB;
    /* New variable for card background */
    --bg-soft: #F3F4F6;
    --text-main: #111827;
    --text-muted: #6B7280;
    /* Renamed from --text-light */
    --border-color: #E5E7EB;
    /* New variable for borders */
    --shadow-color: rgba(0, 163, 224, 0.15);
    /* Renamed from --shadow-soft, adjusted for color only */
    --shadow-btn-light: rgba(0, 163, 224, 0.4);
    /* Specific shadow for light mode buttons */
    --shadow-btn-light-hover: rgba(0, 163, 224, 0.5);
    /* Specific shadow for light mode buttons hover */

    /* Layout */
    --radius-pill: 9999px;
    --radius-card: 24px;
    --font-heading: 'Montserrat', sans-serif;
    --font-body: 'Montserrat', sans-serif;
}

[data-theme="dark"] {
    /* Functional Colors (Dark Mode) */
    --bg-page: #0f172a;
    /* Slate 900 */
    --bg-card: #1e293b;
    /* Slate 800 */
    --bg-soft: #334155;
    /* Slate 700 */
    --text-main: #f8fafc;
    /* Slate 50 */
    --text-muted: #94a3b8;
    /* Slate 400 */
    --border-color: #334155;
    --shadow-color: rgba(0, 0, 0, 0.3);
    --shadow-btn-light: rgba(0, 0, 0, 0.4);
    /* Dark mode button shadow */
    --shadow-btn-light-hover: rgba(0, 0, 0, 0.5);
    /* Dark mode button shadow hover */
}

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

body {
    font-family: var(--font-body);
    color: var(--text-main);
    background-color: var(--bg-page);
    line-height: 1.6;
    overflow-x: hidden;
    transition: background-color 0.3s, color 0.3s;
    /* Added transition for smooth theme change */
}

/* Controls (Lang/Theme) */
.controls-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.theme-btn,
.lang-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.theme-btn:hover,
.lang-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
}

/* Typography */
h1,
h2,
h3 {
    font-family: var(--font-heading);
    color: var(--text-main);
}

h1 {
    font-size: 4rem;
    line-height: 1.1;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

h1 span {
    color: var(--primary-blue);
    font-style: italic;
    display: block;
    font-weight: 600;
}

h2 {
    font-size: 2.5rem;
    font-weight: 400;
    margin-bottom: 3rem;
    text-align: center;
}

p {
    color: var(--text-muted);
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

/* Navigation */
/* Navigation */
header {
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--bg-page);
    /* Fixed solid color */
    position: relative;
    /* Changed to relative so it has its own space */
    width: 100%;
    z-index: 1000;
    box-shadow: 0 4px 20px -10px var(--shadow-color);
}

/* Ensure Hero image reaches top by removing padding if it was there, 
   but since header is relative, it pushes hero down. 
   If user wants image at top of SCREEN, header must be absolute.
   If header is absolute AND solid, it covers the image.
   I will stick to relative as it is the "Standard" non-transparent way. */

.nav-left {
    display: flex;
    align-items: center;
    gap: 3rem;
}

.nav-items-left {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.nav-link {
    text-decoration: none;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    transition: color 0.2s;
}

.nav-link:hover {
    color: var(--primary-blue);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Typography Colors */
h1,
h2,
h3,
h4,
h5 {
    color: var(--text-main);
}

p,
.stat-item span {
    color: var(--text-muted);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
    color: white;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 10px 20px -5px var(--shadow-btn-light);
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px var(--shadow-btn-light-hover);
}

.btn-secondary {
    background: var(--bg-page);
    color: var(--text-main);
    padding: 1rem 2.5rem;
    border-radius: var(--radius-pill);
    text-decoration: none;
    font-weight: 600;
    border: 1px solid var(--border-color);
    margin-left: 1rem;
    transition: all 0.2s;
}

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

/* Hero Section */
.hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    padding: 0 0 0 5%;
    /* Full bleed right image */
    align-items: center;
    gap: 4rem;
    /* Use a subtle gradient that works in both, or just page bg */
    background: var(--bg-page);
}

.hero-content {
    max-width: 600px;
    padding-top: 2rem;
    /* Reduced from 80px since header is relative */
}

.hero-stats {
    display: flex;
    gap: 3rem;
    margin-top: 4rem;
    border-top: 1px solid var(--border-color);
    padding-top: 2rem;
}

.stat-item h4 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-main);
    font-family: var(--font-body);
    /* Stats usually sans-serif */
    line-height: 1;
}

.stat-item span {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    color: var(--text-muted);
}

.hero-visual {
    position: relative;
    height: 100%;
    width: 100%;
    background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80');
    /* Modern office */
    background-size: cover;
    background-position: center;
    border-bottom-left-radius: 80px;
}

.floating-card {
    position: absolute;
    bottom: 10%;
    left: -50px;
    background: var(--bg-page);
    padding: 2rem;
    border-radius: var(--radius-card);
    box-shadow: 0 20px 40px -10px var(--shadow-color);
    max-width: 280px;
    border: 1px solid var(--border-color);
}

.floating-icon {
    background: var(--bg-soft);
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.floating-card h5 {
    font-size: 1.1rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.floating-card p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.4;
}

.progress-bar {
    height: 4px;
    background: var(--bg-soft);
    border-radius: 2px;
    margin-top: 1rem;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: var(--primary-blue);
    width: 85%;
}

/* Features/Services */
.features-section {
    padding: 8rem 5%;
    text-align: center;
}

.section-tag {
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 1rem;
    display: block;
}

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

.feature-card {
    background: var(--bg-card);
    padding: 3rem 2rem;
    border-radius: var(--radius-card);
    text-align: left;
    transition: all 0.3s;
    border: 1px solid var(--border-color);
}

.feature-card:hover {
    background: var(--bg-page);
    box-shadow: 0 20px 40px -10px var(--shadow-color);
    transform: translateY(-10px);
    border-color: var(--primary-blue);
}

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

.feature-card h3 {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

/* Footer - Minimalist */
footer {
    padding: 4rem 5%;
    border-top: 1px solid var(--border-color);
    text-align: center;
    color: var(--text-muted);
}

.compliance-text {
    font-size: 0.75rem;
    max-width: 800px;
    margin: 1rem auto;
    opacity: 0.7;
}

/* Modal for Agents */
.agent-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.agent-modal.active {
    display: flex;
    opacity: 1;
}

.modal-content {
    background: var(--bg-page);
    width: 90%;
    max-width: 500px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px var(--shadow-color);
    transform: translateY(20px);
    transition: transform 0.3s;
}

.agent-modal.active .modal-content {
    transform: translateY(0);
}

.chat-header {
    background: var(--text-main);
    /* In dark mode this is white, might want specific dark */
    color: var(--bg-page);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

[data-theme="dark"] .chat-header {
    background: var(--primary-dark);
    color: white;
}

.chat-body {
    height: 300px;
    padding: 1.5rem;
    background: var(--bg-soft);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.message {
    padding: 0.8rem 1.2rem;
    border-radius: 12px;
    max-width: 80%;
    font-size: 0.9rem;
}

.message.bot {
    background: var(--bg-page);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    align-self: flex-start;
    border-top-left-radius: 2px;
}

.message.user {
    background: var(--primary-blue);
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 2px;
}

.chat-input {
    padding: 1rem;
    border-top: 1px solid var(--border-color);
    display: flex;
    gap: 0.5rem;
    background: var(--bg-page);
}

.chat-input input {
    flex: 1;
    padding: 0.8rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    outline: none;
    background: var(--bg-card);
    color: var(--text-main);
}

.chat-input button {
    background: var(--primary-blue);
    color: white;
    border: none;
    padding: 0 1.2rem;
    border-radius: 8px;
    cursor: pointer;
}

.close-modal {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Response */
/* Mobile & Tablet Optimization */
@media (max-width: 1024px) {
    header {
        padding: 0.8rem 2%;
        gap: 1rem;
    }

    .nav-left {
        gap: 1.5rem;
    }

    h1 {
        font-size: 3rem;
    }

    .hero {
        padding-left: 5%;
        padding-right: 5%;
    }
}

@media (max-width: 900px) {
    .hero {
        grid-template-columns: 1fr;
        text-align: center;
        padding-top: 2rem;
        gap: 3rem;
    }

    .hero-visual {
        display: none;
    }

    .hero-content {
        max-width: 100%;
        padding-top: 0;
    }

    .hero-stats {
        justify-content: center;
        border-top: none;
        /* Cleaner look on mobile */
        margin-top: 3rem;
    }

    .cta-group {
        justify-content: center;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
    }

    h1 {
        font-size: 2.8rem;
    }
}

@media (max-width: 600px) {

    /* --- HEADER FIXES --- */
    header {
        flex-direction: column !important;
        padding: 1rem !important;
        gap: 0.5rem !important;
        width: 100% !important;
    }

    .nav-left {
        width: 100%;
        justify-content: space-between;
        gap: 0;
    }

    .logo {
        font-size: 1.2rem;
    }

    /* Keep controls accessible but compact */
    .controls-group {
        gap: 0.5rem;
    }

    /* Hide redundant elements */
    .nav-link.hide-mobile,
    .nav-link[href="#features"],
    .nav-right {
        display: none !important;
    }

    /* --- HERO TYPOGRAPHY FIXES --- */
    .hero {
        padding: 5rem 1.5rem 2rem 1.5rem !important;
        /* Top padding clears sticky header if any */
        text-align: center;
        width: 100%;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }

    h1 {
        font-size: 2.5rem !important;
        line-height: 1.2 !important;
        margin-bottom: 1rem !important;
        word-wrap: break-word;
        /* Prevent long words breaking layout */
    }

    /* Force linebreak removal on mobile if they exist */
    h1 br {
        display: none;
    }

    .hero p {
        font-size: 1.1rem !important;
        padding: 0 0.5rem;
        margin-bottom: 2rem;
    }

    /* --- CONTROLS / BUTTONS --- */
    .cta-group {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 1rem;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        margin: 0 !important;
        justify-content: center;
    }

    /* --- STATS --- */
    .hero-stats {
        flex-direction: row;
        /* Keep stats in row but wrap if needed */
        flex-wrap: wrap;
        gap: 2rem;
        justify-content: center;
        border-top: 1px solid var(--border-color);
        padding-top: 2rem;
        width: 100%;
    }

    .stat-item {
        flex: 1 1 30%;
        /* Allow stats to take space naturally */
        min-width: 80px;
    }

    .stat-item h4 {
        font-size: 2rem !important;
    }

    /* --- SECTION SPACING --- */
    .features-section {
        padding: 4rem 1.5rem !important;
    }

    .cards-grid {
        grid-template-columns: 1fr !important;
        /* Force single column */
    }
}

/* Admin Button */
.admin-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 0.5rem;
    border-radius: 50%;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.admin-btn:hover {
    border-color: var(--primary-blue);
    color: var(--primary-blue);
    background: rgba(0, 163, 224, 0.1);
}

/* Admin Modal */
.admin-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.admin-modal.active {
    display: flex;
}

.admin-modal-content {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 2.5rem;
    width: 90%;
    max-width: 400px;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.close-admin-modal {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color 0.2s;
}

.close-admin-modal:hover {
    color: var(--primary-blue);
}

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

.admin-login-header i {
    font-size: 3rem;
    color: var(--primary-blue);
    margin-bottom: 1rem;
    display: block;
}

.admin-login-header h2 {
    font-size: 1.5rem;
    margin-bottom: 0;
    color: var(--text-main);
}

.admin-modal .form-group {
    margin-bottom: 1.5rem;
}

.admin-modal .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 500;
}

.admin-modal .form-group input {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--bg-page);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    color: var(--text-main);
    font-size: 1rem;
    transition: border-color 0.2s;
}

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

.btn-admin-login {
    width: 100%;
    padding: 1rem;
    background: linear-gradient(135deg, var(--primary-blue), var(--primary-dark));
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn-admin-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -5px rgba(0, 163, 224, 0.4);
}

.admin-hint {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Improved Footer */
footer {
    padding: 3rem 5%;
    border-top: 1px solid var(--border-color);
    text-align: center;
    background: var(--bg-card);
}

.footer-content {
    max-width: 600px;
    margin: 0 auto;
}

.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-main);
}

.footer-brand i {
    color: var(--primary-blue);
}

footer p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

.compliance-text {
    font-size: 0.75rem;
    max-width: 800px;
    margin: 1rem auto;
    opacity: 0.7;
}