/* ==========================================================================
   main.css for TodoHabits.com
   ==========================================================================
   Table of Contents
   --------------------------------------------------------------------------
   1. Global Styles & Fonts
   2. Reusable Components (Buttons, Tags)
   3. Header & Navigation
   4. Footer
   5. Homepage Sections
      - Hero Section
      - Features Grid
      - Visual Guide
      - Philosophy Section
      - Testimonials Section
   6. Generic Feature Page Sections
      - Feature Hero
      - Content Sections & Grids
   7. Specific Page Sections
      - About Page
      - Contact Page
      - Legal Pages
   8. Media Queries (Responsive Design)
   ========================================================================== */

/* --- 1. Global Styles & Fonts --- */
body, html { 
    margin: 0; 
    padding: 0; 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 
    background: #f8f9fa; 
    color: #343a40; 
    line-height: 1.6; 
}
.container { 
    max-width: 1100px; 
    margin: 0 auto; 
    padding: 0 20px; 
}
h1, h2, h3, h4 { 
    font-weight: 700; 
    color: #212529; 
}
h1 { font-size: 3em; }
h2 { font-size: 2.2em; text-align: center; margin-bottom: 50px; }
p { font-size: 1.1em; color: #495057; }
a { color: #007bff; text-decoration: none; }
.subtitle { 
    font-size: 1.3em; 
    color: #495057; 
    max-width: 700px; 
    margin: 0 auto 50px auto; 
    text-align: center; 
}

/* --- 2. Reusable Components (Buttons, Tags) --- */
.btn-trial { 
    text-decoration: none; 
    padding: 18px 35px; 
    border-radius: 8px; 
    color: #fff; 
    background: #28a745; 
    font-size: 1.2em; 
    font-weight: bold; 
    display: inline-block; 
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3); 
    transition: transform 0.2s; 
}
.btn-trial:hover { 
    transform: scale(1.05); 
}
.tag {
    font-family: monospace;
    background: #e9ecef;
    color: #495057;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
}

/* --- 3. Header & Navigation --- */
header { 
    background: #fff; 
    padding: 15px 20px; 
    border-bottom: 1px solid #dee2e6; 
    width: 100%; 
    box-sizing: border-box; 
}
header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
}
.logo { height: 50px; }
nav a { 
    text-decoration: none; 
    color: #495057; 
    margin: 0 15px; 
    font-weight: 500; 
}
nav a:hover { color: #007bff; }
.header-buttons a { 
    text-decoration: none; 
    padding: 10px 18px; 
    border-radius: 6px; 
    color: #fff; 
    margin-left: 10px; 
    display: inline-block; 
}
.btn-login { background: #007bff; }
.btn-account { background: #28a745; }

/* --- 4. Footer --- */
footer { 
    background: #343a40; 
    color: #adb5bd; 
    padding: 40px 20px; 
}
.footer-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); 
    gap: 30px; 
}
.footer-col h4 { color: #fff; }
.footer-col ul { list-style: none; padding: 0; }
.footer-col li a { text-decoration: none; color: #adb5bd; }
.footer-col li a:hover { color: #fff; }
.footer-bottom { 
    text-align: center; 
    margin-top: 40px; 
    padding-top: 20px; 
    border-top: 1px solid #495057; 
}

/* --- 5. Homepage Sections --- */
.hero { text-align: center; padding: 80px 20px; }
.hero h1 { margin-bottom: 20px; }
.hero-image { max-width: 100%; height: auto; margin-top: 60px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.hero-image2 { max-width: 100%; height: auto; margin-top: 60px; border-radius: 8px; }

.features { padding: 80px 0; background: #fff; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.feature-card { text-align: center; padding: 20px; display: flex; flex-direction: column; }
.feature-card img { max-width: 60px; margin-bottom: 20px; height: 60px; margin: 0 auto 20px auto; }
.feature-card h3 { margin-bottom: 10px; font-size: 1.5em; }
.feature-card p { font-size: 1em; flex-grow: 1; }
.feature-card a { font-weight: bold; margin-top: 15px; }

.visual-guide { padding: 80px 0; }
.guide-step { display: flex; align-items: center; margin-bottom: 60px; gap: 50px; flex-wrap: wrap; }
.guide-step:nth-child(even) { flex-direction: row-reverse; }
.guide-text, .guide-image { flex: 1 1 400px; }
.guide-image img { width: 100%; border-radius: 8px; }

.philosophy { background: #e9ecef; padding: 80px 20px; text-align: center; }
.philosophy .container { max-width: 800px; }
.philosophy-text { text-align: left; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }

.testimonials { padding: 80px 0; }
.testimonial-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.testimonial-card { background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }
.testimonial-author { display: flex; align-items: center; }
.testimonial-author img { width: 50px; height: 50px; border-radius: 50%; margin-right: 15px; }

.final-cta { text-align: center; padding: 80px 20px; }
.final-cta.dark-bg { background: #007bff; color: #fff; }
.final-cta.dark-bg h2, .final-cta.dark-bg p { color: #fff; }

/* --- 6. Generic Feature Page Sections --- */
.feature-hero { text-align: center; padding: 80px 20px; }
.feature-hero-image { max-width: 100%; height: auto; margin-top: 60px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); }
.feature-section { padding: 80px 0; }
.feature-section.alt-bg { background: #fff; }

.integration-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; }
.integration-card { text-align: center; padding: 30px; background: #fff; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.05);}
.integration-card img { max-width: 50px; height: 50px; margin-bottom: 20px; }

.motivation-section { display: flex; align-items: center; gap: 50px; flex-wrap: wrap; }
.motivation-text, .motivation-visual { flex: 1 1 400px; }
.motivation-visual img { max-width: 100%; border-radius: 8px; }

.key-features-grid { display: grid; grid-template-columns: 1fr; gap: 30px; text-align: left; }
.feature-item { background: #fff; padding: 30px; border-radius: 8px; display: flex; flex-direction: column; }
.feature-item h3 { font-size: 1.3em; margin-top: 0; margin-bottom: 10px; }

/* --- 7. Specific Page Sections --- */
.about-content { max-width: 800px; margin: 0 auto; background: #fff; padding: 50px; border-radius: 12px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); }

.contact-form-container { padding: 80px 0; background: #e9ecef; }
.faq-prompt { text-align: center; max-width: 700px; margin: 0 auto 60px auto; padding: 30px; background: #fff; border-radius: 8px; }
.contact-form { max-width: 700px; margin: 0 auto; background: #fff; padding: 40px; border-radius: 8px; box-shadow: 0 8px 25px rgba(0,0,0,0.08); }
.form-group { margin-bottom: 20px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px; border: 1px solid #ced4da; border-radius: 6px; font-size: 1em; font-family: inherit; box-sizing: border-box; }
.form-group textarea { resize: vertical; min-height: 150px; }
.form-submit-btn { display: inline-block; width: 100%; padding: 15px; border: none; border-radius: 6px; background: #007bff; color: #fff; font-size: 1.1em; font-weight: bold; cursor: pointer; transition: background-color 0.2s; }
.form-submit-btn:hover { background: #0056b3; }

.legal-content { padding: 60px 0; max-width: 800px; margin: 0 auto; }
.legal-content h1 { font-size: 2.5em; margin-bottom: 20px; }
.legal-content h2 { font-size: 1.8em; margin-top: 40px; }

/* --- 8. Media Queries (Responsive Design) --- */
@media (min-width: 768px) {
    .key-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}