:root {
    --primary-color: #34d399;
    --primary-hover: #10b981;
    --text-dark: #1f2937;
    --text-light: #6b7280;
    --color-white: #ffffff;
    --color-mint: #AFE4D7;
    --color-pink: #FDA5D5;
    --color-peach: #ffd6a8;
    --font-main: 'Quicksand', sans-serif;
    --spacing-container: 1280px;
}

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

body {
    font-family: var(--font-main);
    line-height: 1.6;
    color: var(--text-dark);
    background-color: #ffffff;
    /* Fallback */
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

/* Background Blur Effect */
.background-blur {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    overflow: hidden;
    background: white;
    /* Base */
}

.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.8;
}

.blob-0 {
    top: -10%;
    left: -10%;
    width: 60vw;
    height: 60vw;
    background: #ffffff;
    z-index: 1;
}

.blob-1 {
    top: auto;
    bottom: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: #FFD6A8;
}

.blob-2 {
    top: auto;
    bottom: -10%;
    right: -10%;
    width: 60vw;
    height: 60vw;
    background: #FDA5D5;
}

.blob-3 {
    top: -10%;
    left: 40%;
    width: 50vw;
    height: 50vw;
    background: #AFE4D7;
}

.blob-4 {
    top: auto;
    bottom: -10%;
    left: 40%;
    width: 50vw;
    height: 50vw;
    background: #ffffff;
}

.blob-5 {
    top: -10%;
    right: -10%;
    width: 50vw;
    height: 50vw;
    background: #ffffff;
}

.container {
    max-width: var(--spacing-container);
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
#main-header {
    padding: 40px 0;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo-img {
    height: 30px;
    width: auto;
    display: block;
}

#menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

#menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #555;
    border-radius: 3px;
}

.header-nav {
    display: flex;
    gap: 30px;
    align-items: center;
}

.nav-link {
    text-decoration: none;
    color: var(--text-dark);
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
}

.nav-link:hover {
    color: var(--primary-color);
}

/* Hero */
#hero {
    position: relative;
}

.hero-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    gap: 20px;
}

.hero-image-wrapper {
    position: relative;
}

.hero-img {
    width: 100%;
    max-width: 600px;
    display: block;
    /* Mask effect to blend bottom if needed, or just let it sit */
}

.sparkle {
    position: absolute;
    font-size: 60px;
    color: #fcd34d;
    /* Yellow gold */
    animation: float 3s ease-in-out infinite;
}

.s1 {
    top: 10%;
    left: 10%;
    animation-delay: 0s;
}

.s2 {
    top: 20%;
    right: 20%;
    animation-delay: 1.5s;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-10px);
    }
}

.hero-text {
    text-align: center;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.hero-text h1 {
    font-size: 40px;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.highlight {
    color: var(--primary-color);
}

.hero-text p {
    font-size: 1.1rem;
    color: var(--text-light);
    margin-bottom: 30px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.btn {
    display: inline-block;
    padding: 12px 30px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    border: none;
    cursor: pointer;
    font-size: 1rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.4);
    max-width: 400px;
    width: 100%;
    display: block;
    margin: 0 auto;
}

.btn-primary:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}





/* Wave Separators */
.wave-separator {
    line-height: 0;
    position: relative;
    z-index: 1;
}



.wave-separator {
    line-height: 0;
    position: relative;
    z-index: 1;
}

.wave-separator svg {
    width: 100%;
    height: auto;
    display: block;
}

.wave-top {
    margin-top: -50px;
    transform: rotate(180deg);
    margin-bottom: -1px;
    /* Fix sub-pixel gaps */
}

.wave-bottom {
    margin-top: -1px;
    transform: rotate(0deg);
    /* Flip this too to match the style if needed, or keep normal */
    /* Actually, if we want it to look like the bottom of the white section, we probably want it normal (pointing down) or flipped depending on the path.
       The path d="M0,96..." usually draws a wave at the bottom.
       If we want the white section to end with a wave, we can just put the SVG there.
       If the SVG is white fill, and we put it at the bottom of the white section, it will merge with the white section and cut into the next section.
       Let's try NO rotation for the bottom one to see if it creates a nice "drip" effect, or rotate if we want a "hill".
       User asked for "wave-separator above the Let's get in touch".
       Let's stick to the same style.
    */
    margin-bottom: -50px;
    /* Overlap into contact */
}

/* Features */
#features {
    padding: 80px 0;
    text-align: center;
    background-color: white;
    position: relative;
    z-index: 2;
    /* Above the fixed background */
}

.section-header {
    max-width: 460px;
    margin: 0 auto;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    color: var(--text-dark);
    line-height: 1.2;
}

.section-header p {
    max-width: 460px;
    margin-bottom: 40px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    color: #6b7280;
}

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

.feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.feature-img-box {
    width: 100%;
    max-width: 300px;
    margin-bottom: 20px;
}

.feature-img-box img {
    width: 100%;
    height: auto;
    /* Soft mask or border radius if images are square, but we'll generate them with transparency or white bg */
    border-radius: 20px;
}

.feature-card h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    font-weight: 700;
}

.feature-card p {
    color: var(--text-light);
    font-size: 0.95rem;
    max-width: 300px;
    margin: 0 auto;
}

/* Contact */
#contact {
    padding: 150px 0 100px;
    /* Extra top padding to account for wave overlap */
    text-align: center;
    position: relative;
    /* Transparent background to show the blurred blobs */
}

#contact h2 {
    font-size: 4rem;
    line-height: 1;
    margin-bottom: 20px;
    color: var(--text-dark);
}

#contact h2 strong {
    font-weight: 700;
}

#contact p {
    color: var(--text-light);
    margin-bottom: 40px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
}

.contact-content {
    max-width: 580px;
    margin: 0 auto;
}


.input-wrapper {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 0 auto;
    background: #eeeeee;
    padding: 5px;
    border-radius: 50px;
    width: 100%;
}

.input-wrapper input {
    flex: 1;
    border: none;
    background: transparent;
    padding: 10px 20px;
    font-family: var(--font-main);
    font-size: 1rem;
    outline: none;
}

.btn-submit {
    background-color: var(--primary-color);
    color: white;
    /* padding inherited from .btn is 12px 30px, removing override or matching it */
    box-shadow: 0 4px 14px rgba(52, 211, 153, 0.4);
}

.btn-submit:hover {
    background-color: var(--primary-hover);
    transform: translateY(-2px);
}

.success-message {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 20px auto 0;
    padding: 10px 30px;
    background: #d1fae5;
    border-radius: 50px;
    color: var(--text-dark);
    font-weight: 700;
    font-size: 1rem;
    width: 100%;
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Footer */
footer {
    background: #ffffff;
    text-align: left;
    padding: 40px 0;
    color: #999999;
    font-size: 0.8rem;
}

footer .container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.footer-right {
    display: flex;
    align-items: center;
}

.social-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.social-icon:hover {
    transform: scale(1.1);
}

.social-icon svg {
    transition: fill 0.2s ease;
}

.social-icon:hover svg path {
    fill: #36D39F;
}


/* Responsive */
@media (max-width: 1280px) {
    #menu-toggle {
        display: flex;
    }

    .header-nav {
        display: none;
        position: absolute;
        top: 80px;
        right: 20px;
        background: white;
        padding: 20px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        z-index: 100;
        min-width: 150px;
    }

    .header-nav.active {
        display: flex;
    }
}

@media (max-width: 1080px) {

    /* Hide top left white blob, keeping only 5 blobs */
    .blob-0 {
        display: none;
    }
}

@media (max-width: 1000px) {
    .hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero-image-wrapper {
        order: -1;
        /* Image on top */
        margin-bottom: 30px;
    }

    .hero-img {
        margin: 0 auto;
    }

    .hero-text h1 {
        font-size: 32px;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }

    .wave-top {
        margin-top: 64px;
    }

    #contact h2 {
        font-size: 3rem;
    }

    .input-wrapper {
        flex-direction: column;
        background: transparent;
        gap: 15px;
    }

    .input-wrapper input {
        background: #eeeeee;
        border-radius: 50px;
        width: 100%;
    }

    .btn-submit {
        width: 100%;
    }

    footer .container {
        flex-direction: column;
        gap: 30px;
        align-items: center;
    }

    .footer-left {
        align-items: center;
        text-align: center;
    }


}