/* public/assets/css/landing-page.css (Clean & Light Theme with new Navbar) */

/* --- Color Palette & Theme Variables --- */
:root {
    --lp-primary: #007BFF;       /* Classic, vibrant Blue */
    --lp-secondary: #6c757d;     /* Bootstrap's default secondary for muted text */
    --lp-accent: #FFC107;        /* Yellow/Gold for standout CTAs or highlights */
    --lp-text-dark: #212529;     /* Bootstrap's default dark text */
    --lp-text-body: #495057;     /* Slightly lighter for body text */
    --lp-text-muted: #6c757d;
    --lp-background: #FFFFFF;    /* Clean white background */
    --lp-bg-soft-accent: #f8f9fc; /* Very light grey for subtle section backgrounds */
    --lp-border-color: #dee2e6;  /* Bootstrap's default border color */
    --lp-card-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.075); /* Softer card shadow */

    --font-primary: 'Outfit', sans-serif;
    --font-secondary: 'Inter', sans-serif;
}

body.landing-page {
    padding-top: 70px; /* Adjust based on your navbar height */
    font-family: var(--font-secondary);
    color: var(--lp-text-body);
    background-color: var(--lp-background);
    line-height: 1.7;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: 600; /* Slightly less heavy than 700 */
    color: var(--lp-text-dark);
    margin-bottom: 0.75rem;
}
h1 { font-size: 2.8rem; line-height: 1.25; margin-bottom: 1.5rem; font-weight: 700;}
h2 { font-size: 2rem; line-height: 1.3; margin-bottom: 3rem; }
h3 { font-size: 1.6rem; }
h5 { font-size: 1.15rem; font-weight: 600; }
.lead { font-size: 1.1rem; font-weight: 400; color: var(--lp-text-muted); }


/* --- NEW Navbar Style: Minimal & Smart Sticky --- */
.landing-navbar {
    background-color: transparent; /* Initially transparent */
    transition: background-color 0.35s ease-in-out, box-shadow 0.35s ease-in-out, padding 0.35s ease-in-out;
    border-bottom: 1px solid transparent; /* Prepare for border on scroll */
    padding-top: 1.25rem; /* More padding when transparent */
    padding-bottom: 1.25rem;
}
.landing-navbar.scrolled {
    background-color: var(--lp-background) !important; /* Solid white on scroll */
    box-shadow: 0 2px 5px rgba(0,0,0,.06) !important;
    border-bottom: 1px solid var(--lp-border-color);
    padding-top: 0.75rem !important; /* Slightly less padding on scroll */
    padding-bottom: 0.75rem !important;
}
.landing-navbar .navbar-brand img {
    max-height: 32px; /* Slightly smaller logo */
    transition: transform 0.3s ease;
}
/* Optional: slightly shrink logo on scroll */
/* .landing-navbar.scrolled .navbar-brand img { transform: scale(0.9); } */

.landing-navbar .nav-link {
    color: var(--lp-text-medium); /* Good contrast on potentially varied hero backgrounds */
    font-weight: 500;
    padding-left: 1rem;
    padding-right: 1rem;
    transition: color 0.2s ease;
    font-size: 0.95rem;
}
.landing-navbar.scrolled .nav-link { /* Text color when navbar is white */
    color: var(--lp-text-dark);
}
.landing-navbar .nav-link:hover,
.landing-navbar .nav-link.active {
    color: var(--lp-primary);
}

.landing-navbar .btn { /* Common button styling */
    font-weight: 500;
    padding: 0.4rem 1.2rem; /* Slightly smaller buttons */
    font-size: 0.9rem;
    border-radius: 50px; /* Pill shape */
}
.landing-navbar .btn-primary {
    background-color: var(--lp-primary);
    border-color: var(--lp-primary);
    color: white;
}
.landing-navbar .btn-primary:hover {
    background-color: darken(var(--lp-primary), 8%);
    border-color: darken(var(--lp-primary), 8%);
}
.landing-navbar .btn-outline-primary {
    color: var(--lp-primary);
    border-color: var(--lp-primary);
    /* When navbar is transparent, this might need adjustment based on hero bg */
}
.landing-navbar.scrolled .btn-outline-primary {
    /* Ensures visibility when navbar is white */
}
.landing-navbar .btn-outline-primary:hover {
    background-color: var(--lp-primary);
    color: white;
}


/* --- Hero Section --- */
.hero-section {
    background-color: var(--lp-bg-soft-accent); /* Very light background for hero */
    color: var(--lp-text-dark);
    padding: 6rem 0; /* Adjusted padding */
    text-align: center; /* Center align hero content */
}
.hero-section .badge {
    background-color: var(--bs-primary-bg-subtle);
    color: var(--bs-primary-text-emphasis);
    border: 1px solid var(--bs-primary-border-subtle); /* Bootstrap 5.3 variable */
    font-weight: 500;
}
.hero-section h1 .text-highlight {
    color: var(--lp-primary);
}
.hero-section .lead {
    color: var(--lp-text-body); /* Slightly darker lead */
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2.5rem;
}
.hero-section .btn-cta-primary {
    background-color: var(--lp-primary);
    border-color: var(--lp-primary);
    color: white;
    box-shadow: 0 4px 15px rgba(var(--bs-primary-rgb), 0.2);
}
.hero-section .btn-cta-primary:hover {
    background-color: darken(var(--lp-primary), 8%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--bs-primary-rgb), 0.25);
}
.hero-section .btn-cta-secondary {
    color: var(--lp-text-dark);
    border-color: var(--lp-border-color); /* Use subtle border */
    background-color: transparent;
}
.hero-section .btn-cta-secondary:hover {
    background-color: #e9ecef; /* Slightly darker hover for outline */
    border-color: #ced4da;
}
.hero-section img.hero-image {
    border-radius: 12px;
    box-shadow: var(--lp-card-shadow); /* Use defined card shadow */
    margin-top: 3rem; /* Space between text and image */
}


/* --- General Section Styling --- */
.section {
    padding: 5rem 0;
    background-color: var(--lp-background); /* Default white background */
    border-bottom: 1px solid var(--lp-border-color);
}
.section:last-of-type { border-bottom: none; }
.section.bg-soft-accent { /* Optional class for alternating sections */
    background-color: var(--lp-bg-soft-accent); /* #f8f9fc */
}

.section-title-container {
    margin-bottom: 3.5rem;
}
.section-title-container .eyebrow-text {
    color: var(--lp-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.8px;
    margin-bottom: 0.25rem;
    display: block;
}


/* --- How It Works / Features / Benefits Cards --- */
.content-card { /* A general class for these types of cards */
    background-color: var(--lp-background); /* White cards */
    border: 1px solid var(--lp-border-color);
    border-radius: 10px; /* Softer radius */
    box-shadow: var(--lp-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    padding: 2rem;
    height: 100%; /* For equal height in rows */
}
.content-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 1rem 2.5rem rgba(0,0,0,0.08) !important;
}
.content-card .icon-circle { /* For "How It Works" icons */
    width: 55px; height: 55px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 1.25rem;
    background-color: rgba(var(--bs-primary-rgb), 0.08);
    color: var(--lp-primary);
}
.content-card .icon-circle i { font-size: 1.6rem; }

.features-section .feature-icon-inline { /* For list-style features */
    color: var(--lp-primary);
    width: 40px; /* Smaller inline icon container */
    margin-right: 0.75rem;
}
.features-section .feature-icon-inline i { font-size: 1.6rem; }
.features-section .feature-point { padding: 0.75rem 0; } /* Adjusted padding */


/* --- FAQ Section --- */
.faq-section .accordion-item {
    background-color: var(--lp-background);
    border: 1px solid var(--lp-border-color);
    margin-bottom: 0.75rem;
    border-radius: 8px;
    box-shadow: none;
}
.faq-section .accordion-button {
    font-weight: 500; /* Slightly less bold */
    color: var(--lp-text-dark);
    background-color: transparent;
    box-shadow: none !important;
    padding: 1rem 1.25rem;
}
.faq-section .accordion-button:not(.collapsed) {
    color: var(--lp-primary);
    background-color: rgba(var(--bs-primary-rgb), 0.03); /* Very very subtle */
}
/* FAQ Arrow (use Bootstrap default or customize if needed) */


/* --- Final CTA Section --- */
.final-cta-section {
    background-color: var(--lp-primary);
    padding: 5rem 0;
    color: white;
}
.final-cta-section .display-1 { /* Icon */
    color: var(--lp-accent); /* Accent color for the icon */
}
.final-cta-section h2 { color: white; }
.final-cta-section .lead { color: rgba(255,255,255,0.85); }
.final-cta-section .btn-accent-cta {
    background-color: var(--lp-accent);
    border-color: var(--lp-accent);
    color: var(--lp-text-dark); /* Dark text on yellow */
    box-shadow: 0 4px 20px rgba(0,0,0, 0.1);
    font-weight: 600;
}
.final-cta-section .btn-accent-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(0,0,0, 0.15);
}


/* --- Footer --- */
.landing-footer {
    background-color: #f8f9fa; /* Lighter footer for a light theme */
    color: var(--lp-text-muted);
    padding: 3rem 0;
    border-top: 1px solid var(--lp-border-color);
}
.landing-footer h6 { color: var(--lp-text-dark); font-weight: 600; }
.landing-footer ul li a { color: var(--lp-text-muted); }
.landing-footer ul li a:hover { color: var(--lp-primary); }


/* Bootstrap variable fallbacks (if not using BS 5.3 variables directly for subtle backgrounds) */
:root {
    --bs-primary-rgb: 0, 123, 255; /* Match your --lp-primary */
    --bs-primary-bg-subtle: rgba(var(--bs-primary-rgb), 0.08);
    --bs-primary-text-emphasis: #004daa; /* Darker shade of primary */
    --bs-primary-border-subtle: rgba(var(--bs-primary-rgb), 0.2);
}