/* ================================================
   INDEX (HOMEPAGE) STYLES (CodeMax.md §19)
   Extracted from static/index.html <style> block.
   Page-specific; no other pages load this.
   ================================================ */

.hero {
            min-height: calc(100vh - 60px);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            padding: 2rem;
            position: relative;
            overflow: hidden;
        }
        .hero-bg {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            z-index: 0;
            /* Fallback background so the hero is never blank even
               if images fail to load. Overridden by slide content. */
            background: #0a3d2e;
        }
        .hero-bg .slide {
            position: absolute;
            top: 0; left: 0;
            width: 100%; height: 100%;
            opacity: 0;
            transition: opacity 1.5s ease-in-out;
            /* Fallback background in case the image doesn't load */
            background: #0a3d2e;
        }
        .hero-bg .slide.active {
            opacity: 1;
        }
        .hero-bg .slide img {
            width: 100%; height: 100%;
            object-fit: cover;
            filter: brightness(0.6);
        }
        .hero::before {
            content: '';
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            background: linear-gradient(135deg, rgba(0,102,68,var(--overlay-opacity, 0.7)) 0%, rgba(0,80,50,var(--overlay-opacity, 0.7)) 100%);
            z-index: 1;
        }
        .hero-content { position: relative; z-index: 1; max-width: 800px; }
        .hero-badge { display: inline-block; background: rgba(255,255,255,0.15); color: var(--accent); padding: 0.5rem 1rem; border-radius: var(--radius-full); font-size: 0.85rem; margin-bottom: 1.5rem; }
        .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 800; color: white; margin-bottom: 1rem; line-height: 1.1; }
        .hero h1 span { color: var(--accent); }
        .tagline { font-size: clamp(1.1rem, 2.5vw, 1.4rem); color: rgba(255,255,255,0.9); margin-bottom: 2rem; line-height: 1.6; }
        .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
        .btn-outline { background: transparent; border: 2px solid white; color: white; padding: 1rem 2rem; border-radius: var(--radius); text-decoration: none; font-weight: 500; transition: all var(--transition); }
        .btn-outline:hover { background: white; color: var(--primary); }
        
        /* The landing page foreground slideshow section was
           removed in CodeMax.md §28 final — the hero already
           has its own background slideshow. The hero text sits
           on top of it as one section. */
        
        /* Features Section */
        .features { padding: 6rem 2rem 5rem; background: var(--bg); }
        .section-header { text-align: center; max-width: 600px; margin: 0 auto 3rem; }
        .section-header h2 { margin-bottom: 1rem; }
        .section-header p { color: var(--text-light); }
        
        .routes-preview { padding: 4rem 2rem; background: var(--bg-white); }
        
        /* The CTA section uses a HARD-CODED dark green
           gradient (not var(--secondary) → var(--primary))
           so it stays dark in BOTH light and dark modes.
           Reason: the white text on this section is part
           of the design. If the gradient flipped to the
           dark-mode values (#4ade80 → #22c55e, which are
           light greens), the white text would become
           unreadable. So we lock the gradient to the
           light-mode dark-green values regardless of theme. */
        .cta-section { padding: 4rem 2rem; background: linear-gradient(135deg, #0a3d2e, #006644); text-align: center; }
        .cta-section h2 { color: white; margin-bottom: 1rem; }
        .cta-section p { color: rgba(255,255,255,0.9); font-size: 1.2rem; margin-bottom: 2rem; }

/* ================================================
   DARK MODE OVERRIDES (CodeMax.md §19)
   The hero, features, and CTA sections use
   dark green / secondary backgrounds (via
   var(--primary) and var(--secondary)) in BOTH
   modes, so the white text on them stays
   readable. The only thing that needs flipping
   in dark mode is the lighter feature cards and
   any other surface that uses the page bg.
   ================================================ */
@media (prefers-color-scheme: dark) {
    body { background: var(--bg); color: var(--text); }
    .feature-card,
    .feature,
    .step-card,
    .stat {
        background: var(--bg-white);
        color: var(--text);
    }
}