/* -- 1. Global Styles & Variables -- */
:root {
    --dark-blue: #1D2D3E; 
    --gold: #D4AF37;      
    --off-white: #FAF9F6;
    --text-light: #4A4A4A;
    --font-primary: 'Poppins', sans-serif;
}

body {
    font-family: var(--font-primary);
    margin: 0;
    background-color: var(--off-white);
    color: var(--text-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    max-width: 750px;
    margin: 0 auto;
    padding: 20px;
}

h2, h3 {
    color: var(--dark-blue);
    font-weight: 700;
}

/* -- 2. Header & NEW Logo Lockup -- */
header {
    padding: 60px 20px 0px; /* More space on top */
    display: flex;
    justify-content: center;
}

.logo-lockup {
    text-align: center;
}

.logo-icon {
    width: 60px;  /* Adjust size as needed */
    height: auto;
    margin-bottom: 15px;
    border-radius: 5px;
}

.logo-text {
    font-size: 3.5em; /* Larger font size for the brand name */
    font-weight: 700;
    color: var(--dark-blue);
    margin: 0;
    line-height: 1;
}

.logo-tagline {
    font-size: 1.2em;
    font-weight: 600;
    color: var(--gold);
    margin: 10px 0 0 0;
    letter-spacing: 0.5px; /* Adds a little breathing room */
}


/* -- 3. Hero Section -- */
.hero {
    text-align: center;
    /* Removed tagline from here as it's now in the logo */
    padding: 20px 0 60px 0;
}

.hero h2 {
    font-size: 2.8em;
    line-height: 1.2;
    margin-bottom: 25px; /* Increased margin */
}

/* Removed hero .tagline styles */

.hero .description {
    font-size: 1.1em;
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto 40px auto;
}

/* -- 4. Email Form & Button (with rounded edges) -- */
.email-form {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.email-form input[type="email"] {
    padding: 15px;
    width: 300px;
    border: 1px solid #ccc;
    border-radius: 50px; /* Fully rounded edges */
    font-size: 1em;
}

.email-form button {
    padding: 15px 30px;
    background-color: var(--gold);
    color: var(--dark-blue);
    border: none;
    border-radius: 50px; /* Fully rounded edges */
    cursor: pointer;
    font-size: 1em;
    font-weight: 600;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.email-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.spam-notice {
    font-size: 0.9em;
    color: #888;
    margin-top: 15px;
}

.mockup-showcase {
    text-align: center;
    padding: 60px 0;
    border-top: 1px solid #e0e0e0; /* Adds a nice separator */
}

.mockup-showcase h2 {
    font-size: 2.2em;
    margin-bottom: 20px;
}

.mockup-showcase .showcase-description {
    font-size: 1.1em;
    line-height: 1.7;
    max-width: 550px; /* Constrains line width for better readability */
    /* Centers the text block and adds 40px of space below it, before the GIF */
    margin: 0 auto 40px auto; 
}

.mockup-showcase img {
    max-width: 350px; /* Controls the max size on larger screens */
    width: 100%;      /* Makes it responsive on smaller screens */
    height: auto;
    border-radius: 25px; /* A modern, soft rounded corner for the mockup */
    /* A subtle shadow that uses the brand's dark blue for color harmony */
    box-shadow: 0 8px 25px rgba(29, 45, 62, 0.15); 
}

/* -- 5. Features Section (No changes here) -- */
.features {
    text-align: center;
    padding: 40px 0;
    border-top: 1px solid #e0e0e0;
}

.features h2 {
    font-size: 2.2em;
    margin-bottom: 15px;
}

.features > p {
    max-width: 600px;
    margin: 0 auto 50px auto;
    line-height: 1.6;
}

.features-container {
    display: flex;
    flex-direction: column;
    gap: 40px;
    text-align: left;
}

.feature-item h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
}

@media (min-width: 768px) {
    .features-container {
        flex-direction: row;
        gap: 30px;
    }
}

/* -- 6. Footer  -- */
footer {
    text-align: center;
    padding: 40px 20px;
    margin-top: 40px;
    color: #999;
    font-size: 0.9em;
}

@media (max-width: 600px) {

    /* Change the form layout from horizontal to vertical */
    .email-form {
        flex-direction: column; /* Stacks the input and button on top of each other */
        align-items: stretch;   /* Ensures the items stretch to fill the full width */
    }

    /* Make the input and button take up the full width of the container */
    .email-form input[type="email"],
    .email-form button {
        width: 100%; /* Removes the fixed width and makes them responsive */
        box-sizing: border-box; /* Ensures padding doesn't break the layout */
    }

    /* Optional: Adjust heading size on very small screens for better balance */
    .hero h2 {
        font-size: 2.4em;
    }
}