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

:root {
    --primary-gradient: linear-gradient(135deg, #FF6B6B 0%, #FF8E53 100%);
    --secondary-gradient: linear-gradient(135deg, #FF8E53 0%, #FF6B6B 100%);
    --text-dark: #1F2937;
    --text-light: #6B7280;
    --bg-white: #ffffff;
    --bg-light: #f9fafb;
    --card-shadow: 0 10px 30px rgba(0,0,0,0.08);
    --footer-bg: #111827;
    --footer-text: #9CA3AF;
}

/* Dark Mode Variables */
body.dark-mode {
    --text-dark: #f3f4f6;
    --text-light: #d1d5db;
    --bg-white: #1f2937;
    --bg-light: #111827;
    --card-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; }
body { background-color: var(--bg-white); color: var(--text-dark); transition: background 0.3s, color 0.3s; overflow-x: hidden; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* --- HEADER & NAVIGATION --- */
header {
    position: absolute; width: 100%; top: 0; z-index: 1000; padding: 15px 0; transition: background 0.3s, padding 0.3s;
}
header.scrolled {
    position: fixed; background: var(--bg-white); box-shadow: 0 2px 10px rgba(0,0,0,0.1); padding: 10px 0;
}

.navbar {
    display: flex; justify-content: space-between; align-items: center;
    max-width: 1200px; margin: 0 auto; padding: 0 20px;
}
.logo img { height: 45px; }

/* Desktop Navigation */
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { font-weight: 500; color: #fff; font-size: 0.95rem; opacity: 0.9; transition: 0.3s; }
.nav-links a:hover, .nav-links a.active { opacity: 1; font-weight: 700; }
.nav-extras { display: flex; align-items: center; gap: 15px; }

/* Sticky Header Colors */
header.scrolled .nav-links a, header.scrolled .hamburger, header.scrolled .theme-switch { color: var(--text-dark); }

/* Buttons & Elements */
.btn-pill {
    background: #fff; color: #FF6B6B; padding: 10px 25px; border-radius: 50px;
    font-weight: 600; transition: 0.3s; border: none; cursor: pointer; white-space: nowrap;
}
.btn-pill:hover { transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0,0,0,0.2); }
.theme-switch { cursor: pointer; font-size: 1.2rem; color: #fff; }

/* --- MOBILE MENU ICONS --- */
.hamburger, .close-btn { display: none; font-size: 1.5rem; cursor: pointer; color: #fff; }

/* --- HERO SECTION --- */
.hero {
    background: var(--primary-gradient); min-height: 85vh; display: flex; align-items: center; position: relative; padding-top: 80px; color: #fff;
}
.page-hero {
    height: 50vh; background: var(--primary-gradient); display: flex; align-items: center; justify-content: center; text-align: center; position: relative;
}
.page-hero h1 { font-size: 3rem; color: #fff; z-index: 2; padding: 0 20px; }

.hero-container {
    max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 50px; padding: 0 20px; align-items: center; z-index: 10;
}
.hero-text h1 { font-size: 3.2rem; line-height: 1.2; font-weight: 700; margin-bottom: 20px; }
.hero-text p { font-size: 1.1rem; margin-bottom: 30px; opacity: 0.9; max-width: 500px; }
.hero-img img { width: 100%; border-radius: 20px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); animation: float 6s ease-in-out infinite; }
@keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0px); } }

/* --- WAVE DIVIDERS (CORRECTED) --- */
.hero-wave {
    position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 5;
}
.hero-wave svg { position: relative; display: block; width: calc(100% + 1.3px); height: 100px; }
.hero-wave .shape-fill { fill: var(--bg-white); }

.footer-wave {
    position: absolute; top: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 5; transform: rotate(180deg);
}
.footer-wave svg { position: relative; display: block; width: calc(100% + 1.3px); height: 80px; }
.footer-wave .shape-fill { fill: var(--bg-white); }

/* --- SECTIONS & CARDS --- */
.section { padding: 80px 0; background: var(--bg-white); position: relative; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.section-title { text-align: center; margin-bottom: 60px; }
.section-title h2 { font-size: 2.5rem; margin-bottom: 15px; color: var(--text-dark); }
.section-title p { color: var(--text-light); max-width: 700px; margin: 0 auto; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

.card {
    background: var(--bg-white); padding: 40px 30px; border-radius: 15px;
    box-shadow: var(--card-shadow); transition: 0.3s; position: relative;
    border: 1px solid rgba(0,0,0,0.05); display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-10px); }
.card-icon {
    font-size: 2.5rem; color: #FF6B6B; margin-bottom: 20px;
    background: rgba(255, 107, 107, 0.1); width: 70px; height: 70px;
    display: flex; align-items: center; justify-content: center; border-radius: 50%;
}
.card h3 { font-size: 1.4rem; margin-bottom: 15px; color: var(--text-dark); }
.card p { color: var(--text-light); font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }
.read-more { color: #FF6B6B; font-weight: 600; font-size: 0.9rem; margin-top: auto; cursor: pointer; }

/* --- STATS & METHODOLOGY --- */
.stats-section { background: var(--primary-gradient); padding: 60px 0; color: #fff; margin: 50px 0; }
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); text-align: center; }
.stat-item h2 { font-size: 3rem; font-weight: 700; }

.method-card { text-align: center; border-radius: 20px; padding: 40px; background: var(--bg-white); box-shadow: var(--card-shadow); }
.method-card .step-num { font-size: 3rem; font-weight: 700; color: #FF6B6B; margin: 20px 0; }
.method-card.featured { background: var(--primary-gradient); color: #fff; transform: scale(1.05); }
.method-card.featured .step-num, .method-card.featured h3, .method-card.featured p { color: #fff; }

/* --- CONTACT & FOOTER --- */
.contact-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.contact-form { background: var(--bg-white); padding: 40px; border-radius: 20px; box-shadow: var(--card-shadow); }
.form-group { margin-bottom: 20px; }
.form-control { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 8px; background: var(--bg-light); color: var(--text-dark); }
.btn-submit { background: var(--primary-gradient); color: #fff; padding: 15px; width: 100%; border: none; border-radius: 50px; font-weight: 600; cursor: pointer; }

footer { background: var(--footer-bg); color: #fff; padding-top: 100px; position: relative; margin-top: 50px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; max-width: 1200px; margin: 0 auto; padding: 0 20px 60px; }
.footer-col h4 { font-size: 1.2rem; margin-bottom: 20px; }
.footer-col p, .footer-col a { color: var(--footer-text); font-size: 0.9rem; line-height: 1.8; display: block; margin-bottom: 10px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); text-align: center; padding: 20px; color: var(--footer-text); font-size: 0.85rem; }

/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 900px) {
    .hamburger { display: block; z-index: 1500; }
    
    .nav-links {
        position: fixed; right: -100%; top: 0; height: 100vh; width: 280px;
        background: var(--bg-white); flex-direction: column; align-items: flex-start;
        padding: 80px 30px; box-shadow: -5px 0 20px rgba(0,0,0,0.1);
        transition: right 0.4s ease-in-out; z-index: 2000;
    }
    .nav-links.active { right: 0; }
    .nav-links a { color: var(--text-dark); font-size: 1.1rem; margin-bottom: 20px; width: 100%; }
    
    .close-btn { display: block; position: absolute; top: 25px; right: 25px; color: var(--text-dark); }
    .nav-extras { flex-direction: column; align-items: flex-start; width: 100%; gap: 20px; }
    .theme-switch { color: var(--text-dark); }
    
    .hero-container, .contact-wrapper, .stats-grid, .footer-grid { grid-template-columns: 1fr; text-align: center; }
    .hero-text h1 { font-size: 2.5rem; }
    .hero-img { display: none; } /* Hide hero image on mobile to save space */
    
    /* Dark Mode Mobile Fixes */
    body.dark-mode .nav-links { background: #1f2937; }
    body.dark-mode .nav-links a, body.dark-mode .close-btn, body.dark-mode .theme-switch { color: #fff; }
}