/* Reset and Base Styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: #FFFFFF;
    color: #212121;
    font-family: 'Lato', sans-serif;
    line-height: 1.5;
}

/* Landing Page Container */
.landing-page {
    align-items: center;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    max-width: 1200px;
    width: 100%;
}

/* Hero Section */
.hero-section {
    align-items: center;
    background: #FAF8F6;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    justify-content: center;
    padding: 80px 24px 64px;
    width: 100%;
}

.logo {
    align-items: center;
    display: flex;
    height: 82px;
    justify-content: center;
    width: 87px;
}

.main-title {
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background: linear-gradient(90deg, #E58585 0%, #DF6767 100%);
    background-clip: text;
    font-family: 'Staatliches', cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 100%;
    max-width: 1152px;
    padding: 0 40px;
    text-align: center;
}

.hero-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 422px;
}

.description {
    color: #DF6767;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.1px;
    line-height: 130%;
    text-align: center;
}

.hero-features {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 24px 8px;
    min-width: 63%;
}

.feature-title {
    font-family: 'Staatliches', cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 100%;
}

.feature-title.cyan {
    color: #66C6CF;
}

.feature-title.right {
    text-align: right;
}

/* Comparison Section */
.comparison-section {
    display: flex;
    flex-direction: row;
    margin: 0 0 24px 0;
    min-height: 844px;
    width: 100%;
}

.problems-column {
    background: #66C6CF;
    border-radius: 8px 0 0 8px;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 48px;
    margin: 0 0 0 16px;
    padding: 64px 24px;
}

.section-title {
    color: #FAF8F6;
    font-family: 'Staatliches', cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 100%;
}

.problems-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.problem-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../assets/background_blur.svg');
    background-size: 200px 200px;
    border-radius: 8px;
    pointer-events: none;
    mix-blend-mode: overlay;
    opacity: 0.4;
}

.problem-card {
    align-items: center;
    background: linear-gradient(91.66deg, rgba(255, 255, 255, 0) 1.41%, rgba(242, 156, 110, 0.2) 74.69%), #F29C6E;
    border: 0;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 32px;
    justify-content: space-between;
    min-height: 96px;
    min-width: 300px;
    padding: 32px 48px 32px 24px;
    position: relative;
}

.problem-card p {
    color: #FFFFFF;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
}

.blurry-divider {
    background-image: url('../assets/divider_blurry.svg');
    height: 24px;
    width: 100%;
}

.blurry-divider-180 {
    background-image: url('../assets/divider_blurry_180.svg');
    height: 34px;
    width: 100%;
}

/* Arrow Column */
.arrow-column {
    align-items: center;
    background: linear-gradient(90deg, #66C6CF 49.69%, #FAF8F6 49.7%);
    display: flex;
    justify-content: center;
    width: 208px;
}

.transformation {
    align-items: center;
    background: #FAF8F6;
    border-radius: 22px;
    display: flex;
    flex-direction: row;
    gap: 16px;
    justify-content: center;
    padding: 16px 8px;
}

.transformation-arrow {
    background-image: url('../assets/arrow_small.svg');
    width: 34px;
    height: 34px;
}

.icon-box {
    align-items: center;
    display: flex;
    justify-content: center;
}

/* Solutions Column */
.solutions-column {
    background: #FAF8F6;
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 48px;
    padding: 64px 32px 64px 24px;
}

.solutions-list {
    display: flex;
    flex-direction: column;
    gap: 19px;
}

.solution-card {
    align-items: center;
    background: linear-gradient(124.16deg, rgba(73, 232, 129, 0.0204) 4.69%, rgba(242, 47, 50, 0.06) 48.41%), rgba(238, 191, 221, 0.09);
    border: 4px solid #F9F9F9;
    border-radius: 8px;
    display: flex;
    flex-direction: row;
    gap: 32px;
    min-height: 128px;
    padding: 48px;
}

.solution-card p {
    color: #F36237;
    flex: 1;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 130%;
}

.created-by {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.created-by h3 {
    color: #C87096;
    font-family: 'Staatliches', cursive;
    font-size: 32px;
    font-weight: 400;
    line-height: 100%;
}

.created-by p {
    color: #C87096;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 130%;
}

/* Transition Sections */
.landing-page > section:nth-of-type(3) {
    /*background: linear-gradient(167.58deg, #FAF8F6 28.28%, #B9E6AF 28.29%);*/
    /*height: 34px;*/
    /*border-radius: 8px 8px 8px 8px;*/
    width: 100%;
}

/* Join Section */
.join-section {
    align-items: flex-start;
    background: #B9E6AF;
    display: flex;
    flex-direction: column;
    gap: 48px;
    justify-content: center;
    padding: 32px 24px;
    width: 100%;
}

.join-section .section-title {
    color: #487791;
    font-family: 'Staatliches', cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 100%;
}

.join-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.join-card {
    position: relative;
    background: #FFFFFF;
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    max-width: 360px;
    padding: 26px;
    background: linear-gradient(#FFFFFF, #FFFFFF) padding-box,
    linear-gradient(
            315deg,
            #487791 0%,
            #487791 30%,
            rgba(72, 119, 145, 0.3) 95%,
            transparent 100%
    ) border-box;
    border: 2px solid transparent;
}

.join-card::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 6px;
    background: linear-gradient(
            135deg,
            #487791 0%,
            #487791 50%,
            rgba(72, 119, 145, 0.3) 75%,
            transparent 100%
    );
    z-index: -1;
}

.join-intro {
    color: #425661;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.1px;
    line-height: 130%;
}

.join-benefits {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.benefit-item {
    align-items: flex-start;
    display: flex;
    gap: 12px;
}

.benefit-item svg {
    flex-shrink: 0;
    margin-top: 3px;
}

.benefit-item p {
    color: #425661;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 130%;
}

.arrow-down {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}

.join-button {
    align-items: center;
    background: #FEFFFF;
    border: 2px solid #FEFFFF;
    border-radius: 6px;
    color: #487791;
    cursor: pointer;
    display: flex;
    filter: drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25));
    flex-direction: row;
    font-family: 'Roboto Slab', serif;
    font-size: 20px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    line-height: 150%;
    padding: 8px 16px;
    transition: all 0.3s ease;
}

.join-button:hover {
    background: #487791;
    color: #FEFFFF;
    transform: translateY(-2px);
}

.join-button svg path {
    transition: stroke 0.3s ease;
}

.join-button:hover svg path {
    stroke: #FEFFFF;
}

/* Transition */
.landing-page > section:nth-of-type(5) {
    /*background: linear-gradient(166.59deg, #B9E6AF 21.95%, #FAF8F6 21.96%);*/
    /*height: 34px;*/
    width: 100%;
}

/* Mission Section */
.mission-section {
    background: #FAF8F6;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 64px 24px;
    width: 100%;
}

.mission-section .section-title {
    font-family: 'Staatliches', cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 100%;
}

.section-title.pink {
    color: #C87096;
}

.mission-text {
    color: #C87096;
    font-family: 'Lato', sans-serif;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 130%;
}

/* Contact Section */
.contact-section {
    background: #FAF8F6;
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 32px 24px;
    width: 100%;
}

.contact-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-links p {
    color: #C87096;
    display: flex;
    font-family: 'Lato', sans-serif;
    font-size: 18px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 130%;
    height: 32px;
}

.contact-links img {
    width: 32px;
    margin: 0 5px 0 0;
    padding: 0;
}

.contact-links a {
    align-self: flex-end;
    color: #C87096;
    text-decoration: none;
    margin: 0;
    padding: 0;
}

/* Footer */
.footer {
    align-items: center;
    background: #212121;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
    padding: 32px 24px;
    width: 100%;
}

.footer p {
    color: #FFFFFF;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: -0.1px;
    line-height: 130%;
    max-width: 353px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 1200px) {
    .comparison-section {
        flex-direction: column;
    }

    .problems-column,
    .solutions-column {
        border-radius: 0;
        width: 100%;
    }

    .arrow-column {
        background: linear-gradient(180deg, #66C6CF 50%, #FAF8F6 50%);
        height: 200px;
        width: 100%;
    }

    .transformation {
        align-items: center;
        background: #FAF8F6;
        border-radius: 22px;
        display: flex;
        flex-direction: column;
        gap: 16px;
        justify-content: center;
        padding: 16px 8px;
    }

    .transformation-arrow {
        background-image: url('../assets/arrow_down_small.svg');
        width: 34px;
        height: 34px;
    }

    .problems-column {
        margin: 0;
    }
}

@media (max-width: 768px) {
    .main-title {
        font-size: 28px;
    }

    .feature-title {
        font-size: 28px;
    }

    .section-title {
        font-size: 28px;
    }

    .description,
    .join-intro,
    .benefit-item p {
        font-size: 18px;
    }

    .problem-card,
    .solution-card {
        padding: 24px;
    }
}