@import url('https://fonts.googleapis.com/css2?family=Alegreya+Sans:wght@400;700&family=Exo+2:wght@700&display=swap');

/* --- VARIABLES & GLOBAL RESETS --- */
:root {
    --primary-color: #343a40; 
    --primary-color-hover: #495057;
    --bg-light: #ffffff;
    --bg-soft-gray: #f8f9fa;
    --accent-yellow: #ffc107;
    --accent-blue: #0d6efd; /* Blue */
   --cta-orange: #fd7e14;
    --text-dark: #212529;
    --text-light: #555;
    --border-color: #dee2e6;
    --heading-font: 'Exo 2', sans-serif;
    --body-font: 'Alegreya Sans', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--body-font); color: var(--text-dark); line-height: 1.6; }

/* --- SIDE-BY-SIDE LAYOUT --- */
html, body { height: 100%; overflow: hidden; }
.main-wrapper { display: flex; height: 100vh; }
.left-panel {
    width: 35%;
    height: 100vh;
    position: sticky;
    top: 0;
    color: white;
    display: flex;
    align-items: center; /* Vertically centers the content block */
    position: relative;   /* Anchors the absolutely positioned logo */
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('assets/images/background.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.right-panel { 
    width: 65%; 
    height: 100vh; 
    overflow-y: auto; 
    scroll-behavior: smooth; 
    background-color: #000000; 
    color: #f8f9fa;
}

/* --- GENERAL STYLES & COMPONENTS --- */
.container { width: 90%; max-width: 960px; margin: 0 auto; }
h1, h2, h3 { font-family: var(--heading-font); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
h4 { font-family: var(--heading-font); font-weight: 700; line-height: 1.2; margin-bottom: 1rem; text-align: center; color: #6c757d; }
h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; text-align: center; } h3 { font-size: 1.5rem; }
p { margin-bottom: 1rem; color: #ced4da; }
.left-panel p { font-size: 1.15rem; max-width: 500px; color: rgba(255, 255, 255, 0.9); }
a { color: var(--accent-blue); text-decoration: none; }
.left-panel a { color: white; }
.logo {
    position: absolute;
    top: 40px;
    left: 40px;
}
.logo img { height: 40px; width: auto; }
.left-panel-content {
    padding: 40px;
    width: 100%;
    text-align: left;
}
.side-nav { 
    margin-top: 2rem; 
    display: flex; 
    flex-direction: column;    /* Stack links vertically */
    align-items: flex-start; /* Align them to the left */
    gap: 1rem;          
}
.side-nav a { font-family: var(--heading-font); font-weight: 700; transition: all 0.2s ease; padding: 8px; border-left: 3px solid transparent; }
.side-nav a:hover { opacity: 0.8; }
.side-nav a.active {
    color: var(--accent-blue); 
    opacity: 1;
    border-left: 3px solid var(--accent-blue);
}
.button { display: inline-block; padding: 14px 28px; border-radius: 50px; font-family: var(--heading-font); font-weight: 700; transition: all 0.2s ease; border: 2px solid var(--primary-color); text-align: center; cursor: pointer; background-color: var(--primary-color); color: #ffffff; }
.button:hover { background-color: var(--primary-color-hover); border-color: var(--primary-color-hover); }
.button-cta {
    background-color: var(--cta-orange); /* Use the new orange variable */
    border-color: var(--cta-orange);    /* Use the new orange variable */
    color: white;
    margin-top: 1rem;
    padding: 16px 32px;
    font-size: 1.1rem;
    animation: pulse 2.5s infinite;
}

.button-cta:hover {
    background-color: #e8730f; /* A slightly darker orange for hover */
    border-color: #e8730f;
}
.content-box {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 2.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* --- SECTION STYLES (for Right Panel) --- */
section { 
    padding: 140px 40px; 
    border-bottom: 1px solid #495057; 
    position: relative; 
}
.right-panel section:first-child { padding-top: 60px; }
.right-panel section:last-of-type { border-bottom: none; }
.section-intro { text-align: center; max-width: 700px; margin: 0 auto 1rem auto; }
.section-label {
    position: absolute;
    top: 30px;
    left: 40px;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 0.8rem;
    color: #6c757d; 
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* --- Process Section --- */
#process { background-color: #000000; }
.process-grid {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-bottom: 4rem;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}
.process-grid .content-box { text-align: center; }
.process-icon { height: 50px; margin-bottom: 1rem; }
.logo-grid-container { margin-top: 4rem; }

/* --- Integrations Logos --- */
.logo-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2.5rem; margin-top: 1rem; }
.logo-grid img { max-width: 130px; max-height: 40px; width: auto; filter: brightness(0) invert(1) opacity(0.6); transition: filter 0.3s ease; }
.logo-grid img:hover { filter: brightness(0) invert(1) opacity(1); }

/* --- ROI CALCULATOR SECTION --- */
#roi-calculator { background-color: #000000; }
.calculator-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-top: 2rem;
    align-items: center;
}
@media (min-width: 992px) { .calculator-wrapper { grid-template-columns: 1fr 1fr; } }
.calculator-inputs .form-group { margin-bottom: 2.5rem; }
.calculator-inputs label { display: block; font-weight: bold; margin-bottom: 1rem; }
.slider-container { display: flex; align-items: center; gap: 1rem; }
.slider-container input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 8px; background: #495057; border-radius: 5px; outline: none; }
.slider-container input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #ffffff; border-radius: 50%; cursor: pointer; }
.slider-container input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; background: #ffffff; border-radius: 50%; cursor: pointer; }
.slider-value { font-family: var(--heading-font); font-weight: 700; min-width: 50px; text-align: right; }
.calculator-results { text-align: center; }
.calculator-results h3 { color: #ced4da; font-size: 1.2rem; margin-bottom: 0.5rem; }
.annual-savings { font-family: var(--heading-font); font-size: 3.5rem; font-weight: 700; color: white; margin-bottom: 1.5rem; }
.savings-breakdown p { margin-bottom: 0.5rem; color: #ced4da; }
.savings-breakdown span { font-weight: bold; color: white; }

/* --- Call to Action (CTA) Section --- */
#cta { background-color: #111111; text-align: center; }
.offer-list { list-style: none; padding: 0; margin: 2rem auto; max-width: 500px; text-align: left; }
.offer-list li { padding-left: 2rem; position: relative; margin-bottom: 1rem; }
.offer-list li::before { content: '✅'; position: absolute; left: 0; top: 2px; }

/* --- About Section --- */
#about { background-color: #000000; }
.about-container { display: flex; align-items: center; gap: 3rem; }
.about-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; object-position: top; border: 4px solid var(--primary-color); flex-shrink: 0; }
.about-text { flex: 1; }

/* --- CONTACT & FAQ SECTIONS --- */
#contact, #faq { background-color: #000000; }
.contact-form { width: 100%; margin: 0; }
.contact-form .form-row { display: flex; gap: 1rem; margin-bottom: 1rem; }
.contact-form .form-group { flex: 1; text-align: left; }
.contact-form label { display: block; margin-bottom: 0.5rem; font-weight: 700; color: white; }
.contact-form input, .contact-form textarea { width: 100%; padding: 12px; background-color: var(--primary-color-hover); border: 1px solid #6c757d; border-radius: 4px; color: white; font-family: var(--body-font); font-size: 1rem; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--accent-blue); }
.contact-form button { margin-top: 1rem; /* default: not forced full width on desktop */ display: inline-block; padding: 12px 24px; min-width: 140px; }

/* Prevent flex children from overflowing their container */
.contact-form .form-group { min-width: 0; }

/* Ensure inputs/textarea use border-box sizing for predictable widths */
.contact-form input, .contact-form textarea { box-sizing: border-box; line-height: 1.4; }

/* Align form-row children vertically */
.contact-form .form-row { align-items: flex-start; }

/* Make the button full-width on small screens for easier tapping */
@media (max-width: 767px) {
    .contact-form button { width: 100%; }
}

/* --- FAQ Accordion --- */
.faq-subheader { text-align: left; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: #6c757d; margin-top: 2rem; margin-bottom: 0.5rem; }
.faq-subheader:first-of-type { margin-top: 0; }
#faq details { border-bottom: 1px solid #495057; padding: 1rem 0; }
#faq details:last-of-type { border-bottom: none; }
#faq summary { font-family: var(--heading-font); font-weight: 700; cursor: pointer; list-style: none; position: relative; padding-right: 1.5rem; text-align: left; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: '+'; position: absolute; right: 0; font-size: 1.5rem; transition: transform 0.2s ease; }
#faq details[open] summary::after { transform: rotate(45deg); }
#faq details p { padding-top: 1rem; margin: 0; text-align: left; }

/* --- FOOTER --- */
footer { padding: 40px 0; text-align: center; color: #6c757d; font-size: 0.9rem; background-color: #111111; border-top: 1px solid #495057; }
footer p { margin: 0.5rem 0; }

/* --- MODAL, COOKIE BANNER, & RESPONSIVE STYLES --- */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1000; }
.modal { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 800px; max-height: 80vh; background-color: white; color: var(--text-dark); border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); z-index: 1001; flex-direction: column; }
.modal.active, .modal-overlay.active { display: block; }
.modal.active { display: flex; }
.modal .close-button { position: absolute; top: 10px; right: 15px; font-size: 2.5rem; font-weight: bold; color: #aaa; background: none; border: none; cursor: pointer; line-height: 1; }
.modal-content { padding: 40px; overflow-y: auto; text-align: left; }
.modal-content h1 { font-size: 2rem; margin-bottom: 1.5rem; color: var(--text-dark); }
.modal-content h2 { font-size: 1.5rem; text-align: left; margin-top: 2rem; color: var(--text-dark); }
.modal-content h3 { font-size: 1.2rem; text-align: left; margin-top: 1.5rem; color: var(--text-dark); }
.modal-content p, .modal-content li { color: var(--text-light); }
.modal-content ul { list-style-position: inside; padding-left: 1rem; }
.cookie-banner { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background-color: var(--primary-color); color: white; padding: 20px; box-shadow: 0 -2px 10px rgba(0,0,0,0.2); z-index: 1002; align-items: center; text-align: center; }
.cookie-banner.active { display: flex; animation: slideUp 0.5s ease-out forwards; }
@keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* When the cookie banner is visible, add bottom padding to the right panel
    so fixed-height layouts don't have the banner cover interactive elements */
.right-panel.cookie-banner-active { padding-bottom: 120px; }
@media (max-width: 1024px) {
    html, body { height: auto; overflow: auto; }
    .main-wrapper { flex-direction: column; height: auto; }
    .left-panel { position: static; padding: 60px 20px; align-items: center; text-align: center; }
    .left-panel, .right-panel { width: 100%; height: auto; }
    .right-panel { overflow-y: visible; }
    .logo { position: static; margin-bottom: 2rem; }
    .about-container { flex-direction: column; text-align: center; }
    .about-text h2 { text-align: center; }
    section { padding: 80px 20px; }
    .section-label { left: 20px; }
}
@media (max-width: 767px) {
    h1 { font-size: 2.2rem; }
    h2 { font-size: 1.8rem; }
    .contact-form .form-row { flex-direction: column; gap: 1rem; margin-bottom: 0; }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(253, 126, 20, 0.7); /* Orange */
  }
  70% {
    box-shadow: 0 0 0 12px rgba(253, 126, 20, 0); /* Orange */
  }
  100% {
    box-shadow: 0 0 0 0 rgba(253, 126, 20, 0); /* Orange */
  }
}