/* style.css */

/* --- CSS Reset --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* --- Variables (Brand Colors) --- */
:root {
    --color-primary-dark: #0A2E5B; /* Trust Blue */
    --color-primary-light: #0D3B73; /* Slightly lighter for backgrounds */
    --color-accent-teal: #00BFA5; /* Calm Teal */
    --color-accent-coral: #FF7043; /* Action Coral */
    --color-alert-red: #D32F2F;   /* Alert Red (not used on info page directly) */
    --color-text-dark: #333333;
    --color-text-light: #F4F4F4;
    --color-background-light: #FFFFFF;
    --color-background-gray: #F4F4F4;
}

/* --- Base Styles --- */
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: var(--color-text-dark);
    background-color: var(--color-background-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container {
    max-width: 90%; /* Smaller for mobile */
    margin: 0 auto;
    padding: 20px 0;
}

h1, h2, h3, h4 {
    font-family: 'Poppins', sans-serif;
    color: var(--color-primary-dark);
    line-height: 1.2;
    margin-bottom: 15px;
}

h1 { font-size: 2.2em; text-align: center; }
h2 { font-size: 1.8em; text-align: center; }
h3 { font-size: 1.4em; }
h4 { font-size: 1.1em; }

p {
    margin-bottom: 10px;
}

img {
    max-width: 100%;
    height: auto;
    display: block; /* Removes extra space below images */
}

/* --- Buttons --- */
.btn {
    display: inline-block;
    padding: 12px 25px;
    border-radius: 30px;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    text-align: center;
    transition: background-color 0.3s ease, transform 0.2s ease;
    border: none;
    cursor: pointer;
}

.btn-primary {
    background-color: var(--color-accent-coral);
    color: var(--color-text-light);
}

.btn-primary:hover {
    background-color: #e5633a; /* Darkened coral */
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: var(--color-accent-teal);
    color: var(--color-text-light);
}

.btn-secondary:hover {
    background-color: #00a892; /* Darkened teal */
    transform: translateY(-2px);
}


/* --- Header --- */
.site-header {
    background-color: var(--color-primary-dark);
    padding: 15px 0;
    text-align: center;
}

.site-header .logo img {
    height: 120px; /* Adjust as needed */
    margin: 0 auto;
}

/* --- Hero Section --- */
.hero {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    padding: 60px 0;
    text-align: center;
}

.hero h1 {
    color: var(--color-text-light);
    font-size: 2.8em;
    margin-bottom: 10px;
}

.hero .tagline {
    font-size: 1.1em;
    max-width: 600px;
    margin: 0 auto 30px;
}

.hero .app-cta {
    margin-bottom: 40px;
}

.hero .app-cta .btn {
    margin-bottom: 20px;
}

.hero .availability-text {
    font-size: 0.9em;
    opacity: 0.8;
    margin-bottom: 15px;
}

.hero .app-store-buttons img {
    height: 45px; /* Adjust badge size */
    display: inline-block;
    margin: 0 5px;
}

.hero-image {
    max-width: 80%; /* Adjust size of the phones image */
    margin: 40px auto 0;
}

/* --- Who Is This For? Section --- */
.who-for, .how-it-works, .features, .demo-cta, .coming-soon {
    padding: 60px 0;
    text-align: center;
}

.who-for h2, .how-it-works h2, .features h2, .demo-cta h2, .coming-soon h2 {
    margin-bottom: 40px;
}

.cards-grid, .steps-grid, .features .feature-item {
    display: grid;
    gap: 30px;
    margin-top: 30px;
}

.cards-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
}

.card {
    background-color: var(--color-background-gray);
    padding: 30px;
    border-radius: 10px;
}

.card img {
    height: 60px; /* Icon size */
    margin: 0 auto 20px;
}

/* --- How It Works Section --- */
.steps-grid {
    grid-template-columns: 1fr; /* Stack on mobile */
}

.step img {
    height: 70px; /* Icon size */
    margin: 0 auto 15px;
}

/* --- Feature Deep Dive Section --- */
.features .feature-item {
    grid-template-columns: 1fr; /* Stack on mobile */
    margin-bottom: 50px; /* Space between features */
}

.features .feature-item img {
    max-width: 80%; /* Adjust screenshot size */
    margin: 0 auto 20px;
}

/* --- Demo CTA --- */
.demo-cta {
    background-color: var(--color-accent-teal);
    color: var(--color-text-light);
}

.demo-cta h2, .demo-cta p {
    color: var(--color-text-light);
}

.demo-cta .btn {
    margin-top: 20px;
}

/* --- Coming Soon / Email Capture --- */
.coming-soon form {
    max-width: 400px;
    margin: 30px auto 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.coming-soon input[type="email"] {
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 30px;
    font-size: 1em;
}

.coming-soon button[type="submit"] {
    width: 100%;
}

#form-messages {
    margin-top: 10px;
    color: green; /* For success */
}


/* --- Footer --- */
.site-footer {
    background-color: var(--color-primary-dark);
    color: var(--color-text-light);
    padding: 30px 0;
    text-align: center;
    font-size: 0.9em;
}

.site-footer .footer-nav a {
    color: var(--color-text-light);
    text-decoration: none;
    margin: 0 10px;
}

.site-footer .footer-nav a:hover {
    text-decoration: underline;
}

/* --- Media Queries for Tablet & Desktop --- */
@media (min-width: 768px) {
    .container {
        max-width: 760px;
    }

    h1 { font-size: 3.5em; }
    h2 { font-size: 2.5em; }

    .cards-grid, .steps-grid {
        grid-template-columns: 1fr 1fr; /* 2 columns on tablet */
    }

    .features .feature-item {
        grid-template-columns: 1fr 1fr; /* Image and text side-by-side */
        text-align: left;
        align-items: center;
    }

    .features .feature-item:nth-child(even) { /* Alternate image/text position */
        direction: rtl; /* Puts image on right */
    }

    .features .feature-item img {
        margin: 0;
        max-width: 100%;
    }

    .features .feature-item h3, .features .feature-item p {
        padding: 0 20px;
        direction: ltr; /* Reset text direction */
    }

    .hero-image {
        max-width: 600px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }

    h1 { font-size: 4em; }
    h2 { font-size: 3em; }

    .cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Back to 2 columns on desktop for cards */
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop for steps */
    }

    .site-header .logo {
        float: left;
    }
    /* Add desktop navigation here */
}