<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">/* --- Variables &amp; Basic Reset --- */
:root {
    --color-blue: #2c4e7a; /* Dark blue from logo/shapes */
    --color-pink: #d81b60; /* Pink/Red from logo/shapes */
    --color-green: #8bc34a; /* Green from logo leaf */
    --color-text: #333333;
    --color-background: #FFFFFF;
    --font-primary: 'Poppins', sans-serif;
}

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

body {
    font-family: var(--font-primary);
    color: var(--color-text);
    background-color: var(--color-background);
    line-height: 1.6;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* --- Layout Container --- */
.container {
    display: flex;
    width: 100%;
    max-width: 1200px; /* Adjust as needed */
    min-height: 80vh; /* Ensure it takes up good vertical space */
    background-color: var(--color-background);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    overflow: hidden; /* Hide overflow for potential image effects */
    border-radius: 8px; /* Optional: subtle rounding */
}

/* --- Content Area (Left Side) --- */
.content-area {
    flex: 1 1 55%; /* Takes up slightly more space */
    padding: 40px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Image Area (Right Side) --- */
/* --- (Keep existing :root, reset, body, container, content-area styles) --- */

/* --- Image Area (Right Side) --- */
/* --- Image Area (Right Side) --- */
.image-area {
    flex: 1 1 45%;
    background-color: var(--color-blue);
    overflow: hidden; /* Crucial */
    display: flex; /* Still useful for fallback */
    position: relative; /* Needed for absolute positioning of children */
}

/* --- SVG Containers Positioning --- */
#speed-lines-bg {
    /* Make the main SVG cover the area absolutely */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block; /* Redundant with position:absolute, but safe */
}

#foreground-icon {
    /* Use absolute positioning for robust centering */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Define size via CSS */
    width: 25%; /* Example: relative width */
    max-width: 50px; /* Example: max size in pixels */
    height: auto; /* Maintain aspect ratio based on width */
    z-index: 1; /* Ensure it's above the lines */
}

/* --- Ensure Icon Path is White --- */
#foreground-icon path {
    fill: #ffffff; /* Explicitly set fill color */
}


/* --- SVG Speed Lines Animation --- */

/* ADJUSTED Keyframes for shorter lines (40 units) */
@keyframes moveRightShorter {
    0% {
        transform: translateX(-50px); /* Start 40px line just off screen left */
    }
    100% {
        transform: translateX(200px); /* End position unchanged */
    }
}.image-area {
    flex: 1 1 45%;
    background-color: var(--color-blue);
    overflow: hidden;
    display: flex; /* Can still be useful */
    position: relative; /* Still needed if bg SVG is absolute */
}

/* --- SVG Containers Positioning --- */
#speed-lines-bg {
    /* Keep this absolute positioning for reliable coverage */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}

/* REMOVED: #foreground-icon absolute positioning rules */
/* #foreground-icon { ... } */


/* --- Ensure Icon Path is White --- */
#foreground-icon path {
    fill: #ffffff; /* Keep this rule */
}


/* --- SVG Speed Lines Animation (Keyframes and line styles unchanged) --- */
@keyframes moveRightShorter {
    0% { transform: translateX(-50px); }
    100% { transform: translateX(200px); }
}
#moving-lines line {
    animation-name: moveRightShorter;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 15s;
}

/* Individual overrides for duration and NEGATIVE delay */
#line1 { animation-duration: 12.5s; animation-delay: -4.2s; }
#line2 { animation-duration: 14.0s; animation-delay: -8.1s; }
#line3 { animation-duration: 13.0s; animation-delay: -1.5s; }
#line4 { animation-duration: 11.0s; animation-delay: -10.0s; }
#line5 { animation-duration: 15.5s; animation-delay: -3.0s; }
#line6 { animation-duration: 13.5s; animation-delay: -9.8s; }
#line7 { animation-duration: 14.8s; animation-delay: -0.5s; }
#line8 { animation-duration: 13.2s; animation-delay: -6.6s; }
#line9 { animation-duration: 12.8s; animation-delay: -2.3s; }
#line10 { animation-duration: 14.5s; animation-delay: -11.5s; }
#line11 { animation-duration: 13.8s; animation-delay: -5.0s; }
#line12 { animation-duration: 12.3s; animation-delay: -1.1s; }
#line13 { animation-duration: 15.0s; animation-delay: -7.7s; }
#line14 { animation-duration: 13.1s; animation-delay: -3.9s; }
#line15 { animation-duration: 14.2s; animation-delay: -10.8s; }
#line16 { animation-duration: 12.6s; animation-delay: -0.1s; }


/* --- (Keep existing Logo, Text, Subscribe Form, Responsive styles) --- */
/* --- No specific styles needed for #foreground-logo unless you want to add effects to it --- */

@media (max-width: 768px) {
     /* ... (other responsive styles) ... */
     .image-area {
        min-height: 200px; /* Or adjust as looks best */
         order: -1;
         border-radius: 8px 8px 0 0;
    }
     .container {
         border-radius: 8px;
    }
}

/* --- (Keep existing Logo, Text, Subscribe Form, Responsive styles) --- */

/* --- Adjust Responsive Styles --- */
@media (max-width: 768px) {
    /* ... (other responsive styles) ... */

    .image-area {
        min-height: 250px; /* Adjust height for animation visibility */
        /* Ensure order is still correct if you want image/animation on top */
         order: -1;
         border-radius: 8px 8px 0 0; /* Adjust rounding */
    }

    .container {
         border-radius: 8px; /* Keep rounding */
    }

     /* Might not need specific SVG adjustments here if it scales well */
}

.logo {
    max-width: 400px;
}


/* --- Text Styling --- */
h1 {
    color: var(--color-blue);
    font-size: 2.8rem;
    margin-bottom: 10px;
}

.tagline {
    color: var(--color-blue);
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

p {
    margin-bottom: 15px;
    font-size: 1rem;
    color: #555;
}

/* --- Subscribe Form --- */
.subscribe-form {
    margin-top: 30px;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.subscribe-form p {
    font-weight: bold;
    color: var(--color-text);
    margin-bottom: 10px;
}

.subscribe-form form {
    display: flex;
    gap: 10px; /* Spacing between input and button */
}

.subscribe-form input[type="email"] {
    flex-grow: 1; /* Take available space */
    padding: 12px 15px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    font-family: inherit;
}

.subscribe-form button {
    padding: 12px 20px;
    background-color: var(--color-pink);
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 1rem;
    font-weight: bold;
    font-family: inherit;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.subscribe-form button:hover {
    background-color: #b71652; /* Darker pink on hover */
}

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
        min-height: 0; /* Allow height to adjust */
        max-width: 95%;
        margin: 20px auto;
         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .content-area {
        padding: 30px;
        text-align: center; /* Center text on small screens */
        flex-basis: auto; /* Reset basis */
    }

    .image-area {
        min-height: 200px; /* Give image area some height */
        flex-basis: auto; /* Reset basis */
        order: -1; /* Move image area to the top */
        border-radius: 8px 8px 0 0; /* Adjust rounding */
    }
    .container {
         border-radius: 8px; /* Keep rounding */
    }

    h1 {
        font-size: 2.2rem;
    }

    .tagline {
        font-size: 1.2rem;
    }

    .subscribe-form form {
        flex-direction: column; /* Stack form elements */
    }

    .subscribe-form button {
        width: 100%; /* Make button full width */
    }
}</pre></body></html>