/* 
====================================================================
HERO
====================================================================
*/
.hero {
    position: relative;
    min-height: 1985px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--sky-purple);
    background: linear-gradient(180deg, var(--sky-purple) 0%, var(--sky-pink) 20%, var(--sky-orange) 49%, var(--teal-100) 50%, var(--teal-100) 75%, var(--teal-100) 100%);
    overflow: hidden;
    padding-bottom: 40px;
}
.hero::after {
    content: "";
    width: 100%;
    height: auto;
    position: absolute;
    aspect-ratio: 1/1;
    border-radius: var(--radius-full);
    background: transparent;
    background: radial-gradient(circle,rgba(255, 245, 191, 0.9) 0%, rgba(255, 245, 191, 0) 70%);
    z-index: 1;
}

.hero__island {
    width: 2600px;
    max-width: unset;
    position: absolute;
    top: 150px;
    z-index: 5;
}

@media (max-width: 905px) {
    .hero__island { width: 2000px; }
}

@media (max-width: 650px) {
    .hero__island { width: 1700px; }
}

@media (max-width: 480px) {
    .hero__island { width: 1500px; }
}

.hero__content {
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 88px;
    position: relative;
   
}
@media (max-width: 1020px) {
    .hero__content { padding: 0 50px;}
}
@media (max-width: 768px) {
    .hero__content { padding: 0 30px;}
}
@media (max-width: 520px) {
    .hero__content {margin-top: 130px; padding: 0}
}
@media (max-width: 480px) {
    .hero__content {margin-top: 145px;}
}
.seegull-left-top {
    position: absolute;
    top: 60px;
    left: 20px;
    width: 53px;
}
.seegull-left-bottom {
    position: absolute;
    top: 105px;
    left: 75px;
    width: 35px;
}
.seegull-right-top {
    position: absolute;
    top: 95px;
    right: 5px;
    width: 30px;
}
.seegull-right-bottom {
    position: absolute;
    top: 140px;
    right: 55px;
    width: 48px;
}
@media (max-width: 1020px) {
    .seegull-left-top {
        width: 48px;
    }
    .seegull-left-bottom {
        width: 30px;
    }
    .seegull-right-top {
        width: 24px;
    }
    .seegull-right-bottom {
        width: 38px;
    }
}
@media (max-width: 768px) {
    .seegull-left-top {
        top: 190px;
        left: -5px;
    }
    .seegull-left-bottom {
        top: 275px;
        left: 40px;
    }
    .seegull-right-top {
        top: 170px;
    }
    .seegull-right-bottom {
        top: 285px;
        right: 70px;
    }
}
@media (max-width: 640px) {
    .seegull-left-top {
        width: 40px;
        top: 190px;
        left: -5px;
    }
    .seegull-left-bottom {
        width: 27px;
        top: 275px;
        left: 40px;
    }
    .seegull-right-top {
        width: 20px;
        top: 110px;
    }
    .seegull-right-bottom {
        width: 32px;
        top: 245px;
        right: 35px;
    }
}
@media (max-width: 520px) {
    .seegull-left-top {
        top: 70px;
        left: -5px;
    }
    .seegull-left-bottom {
        top: 220px;
        left: 35px;
    }
    .seegull-right-top {  
        top: 60px;
    }
    .seegull-right-bottom {
        top: 135px;
        right: 22px;
    }
}
@media (max-width: 480px) {
    .seegull-left-top {
        top: 20px;
        left: 5px;
    }
    .seegull-left-bottom {
        top: -15px;
        left: 105px;
    }
    .seegull-right-top {  
        top: 40px;
    }
    .seegull-right-bottom {
        top: -35px;
        right: 80px;
    }
}
/* Sparkles pulse continuously. Each one has its own loop duration and a
   negative delay, so they start at a different size: some grow first,
   others shrink first, and they never sync up. */
.sparkle {
    animation: sparkle-bounce var(--sparkle-duration, 3s) ease-in-out var(--sparkle-delay, 0s) infinite;
}

@keyframes sparkle-bounce {
    0%, 100% { transform: scale(0.7); }
    50% { transform: scale(1.15); }
}

.sparkle.sparkle-left-top { --sparkle-duration: 3s; --sparkle-delay: -0.4s; }      /* ~80%, growing */
.sparkle.sparkle-right-top { --sparkle-duration: 3.4s; --sparkle-delay: -2.2s; }    /* ~105%, shrinking */
.sparkle.sparkle-left-middle { --sparkle-duration: 2.6s; --sparkle-delay: -0.8s; }  /* ~105%, growing */
.sparkle.sparkle-right-middle { --sparkle-duration: 2.8s; --sparkle-delay: -2.3s; } /* ~80%, shrinking */
.sparkle.sparkle-left-bottom { --sparkle-duration: 3.2s; --sparkle-delay: -0.9s; }  /* ~90%, growing */
.sparkle.sparkle-right-bottom { --sparkle-duration: 2.4s; --sparkle-delay: -1.5s; } /* ~110%, shrinking */

@media (prefers-reduced-motion: reduce) {
    .sparkle {
        animation: none;
    }
}

.sparkle-left-top {
    position: absolute;
    top: 130px;
    left: -105px;
    width: 40px;
}
.sparkle-right-top {
    position: absolute;
    top: 130px;
    right: -105px;
    width: 40px;
}
.sparkle-left-middle {
    position: absolute;
    top: 230px;
    left: -20px;
    width: 22px;
}
.sparkle-right-middle {
    position: absolute;
    top: 230px;
    right: -20px;
    width: 22px;
}
.sparkle-left-bottom {
    position: absolute;
    top: 400px;
    left: -130px;
    width: 28px;
}
.sparkle-right-bottom {
    position: absolute;
    top: 400px;
    right: -130px;
    width: 28px;
}
@media (max-width: 1240px) {
    .sparkle-right-top {
        right: -30px;
    }
    .sparkle-left-top {
        left: -30px;
    }
    .sparkle-right-middle {
        right: 40px;
    }
    .sparkle-left-middle {
        left: 40px;
    }
    .sparkle-right-bottom {
        top: 350px;
        right: -65px;
    }
    .sparkle-left-bottom {
        top: 350px;
        left: -65px;
    }
}
@media (max-width: 1020px) {
    .sparkle-right-top {
        width: 30px;
        right: 40px;
        top: 215px;
    }
    .sparkle-left-top {
        width: 30px;
        left: 40px;
        top: 215px;
    }
    .sparkle-right-middle {
        width: 16px;
        top: 300px;
        right: 90px;
    }
    .sparkle-left-middle {
        width: 16px;
        top: 300px;
        left: 90px;
    }
    .sparkle-right-bottom {
        width: 22px;
        top: 390px;
        right: 10px;
    }
    .sparkle-left-bottom {
        width: 22px;
        top: 390px;
        left: 10px;
    }
}
@media (max-width: 905px) {
    .sparkle-right-top {
        top: 180px;
    }
    .sparkle-left-top {
        top: 180px;
    }
    .sparkle-right-middle {
        top: 250px;
    }
    .sparkle-left-middle {
        top: 250px;
    }
    .sparkle-right-bottom {
        top: 345px;
    }
    .sparkle-left-bottom {
        top: 345px;
    }
}
@media (max-width: 768px) {
    .sparkle-right-top {
        top: 115px;
        right: 25px;
    }
    .sparkle-left-top {
        top: 115px;
        left: 25px;
    }
    .sparkle-right-middle {
        top: 225px;
        right: 65px;
    }
    .sparkle-left-middle {
        top: 225px;
        left: 65px;
    }
    .sparkle-right-bottom {
        top: 305px;
        right: 5px;
    }
    .sparkle-left-bottom {
        top: 305px;
        left: 5px;
    }
}
@media (max-width: 640px) {
    .sparkle-right-top {
        top: 145px;
        right: 20px;
        width: 24px;
    }
    .sparkle-left-top {
        top: 145px;
        left: 20px;
        width: 24px;
    }
    .sparkle-right-middle {
        top: 210px;
        right: 70px;
        width: 12px;
    }
    .sparkle-left-middle {
        top: 210px;
        left: 70px;
        width: 12px;
    }
    .sparkle-right-bottom {
        top: 290px;
        width: 16px;
    }
    .sparkle-left-bottom {
        top: 290px;
        width: 16px;
    }
}
@media (max-width: 520px) {
    .sparkle-right-top {
        top: 10px;
        right: 25px;
    }
    .sparkle-left-top {
        top: 10px;
        left: 25px;
    }
    .sparkle-right-middle {
        top: 180px;
        right: 40px;
    }
    .sparkle-left-middle {
        top: 180px;
        left: 40px;
    }
    .sparkle-right-bottom {
        top: 235px;
    }
    .sparkle-left-bottom {
        top: 235px;
    }
}
@media (max-width: 480px) {
    .sparkle-right-top {
        top: -35px;
        right: 20px;
    }
    .sparkle-left-top {
        top: -35px;
        left: 20px;
    }
    .sparkle-right-middle {
        top: 5px;
        right: 75px;
    }
    .sparkle-left-middle {
        top: 5px;
        left: 75px;
    }
    .sparkle-right-bottom {
        top: 135px;
    }
    .sparkle-left-bottom {
        top: 135px;
    }
}
.hero__content::after {
    content: "";
    width: 475px;
    height: 475px;
    position: absolute;
    border-radius: var(--radius-full);
    background: transparent;
    background: radial-gradient(circle,rgba(255, 245, 191, 0.9) 0%, rgba(255, 245, 191, 0) 70%);
    z-index: 1;
    top: 60px;
    aspect-ratio: 1/1;
}
@media (max-width: 905px) {
    .hero__content::after { 
        top: 0px;
    }
}
@media (max-width: 730px) {
    .hero__content::after { 
        top: -2%;
    }
}
@media (max-width: 640px) {
    .hero__content::after { 
        top: -10%;
        width: 85%;
        height: auto;
    }
}
.hero__logo { 
    width: 750px;
    height: auto;
    z-index: 5; 
}

@media (max-width: 905px) {
    .hero__logo { width: clamp(300px, 85vw, 600px); }
}

.hero__animals {
    width: 355px;
    margin-top: -205px;
    z-index: 5;  
}
@media (max-width: 905px) {
    .hero__animals  {
        width: clamp(155px, 40vw, 300px);
        margin-top: -28%;
    }
}
@media (max-width: 520px) {
    .hero__animals  {
        margin-top: -24%;
    }
}


.hero__main-title {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    color: var(--ink-white);
    text-align: center;
    max-width: 900px;
    -webkit-text-stroke: 13px var(--sky-purple);
    paint-order: stroke fill;
    filter: drop-shadow(0 4px 4px #CEB8DD);
    text-align: center;
    z-index: 5;
    margin: 0;
    line-height: 50px; 
}
@media (max-width: 1020px) {
    .hero__main-title {
        font-size: 44px;
        -webkit-text-stroke: 12px var(--sky-purple);
        line-height: 46px;
    }

}
@media (max-width: 905px) {
    .hero__main-title { 
        font-size: 40px;
        -webkit-text-stroke: 11px var(--sky-purple); 
        line-height: 42px;
        max-width: 445px;
    }
}
@media (max-width: 768px) {
    .hero__main-title { 
        font-size: 36px;
        -webkit-text-stroke: 10px var(--sky-purple);
        line-height: 40px;
        max-width: 400px;
    }
}
@media (max-width: 575px) {
    .hero__main-title { 
        font-size: 32px;
        -webkit-text-stroke: 8px var(--sky-purple);
        padding: 0 20px;
        line-height: 36px;
    }
}

@media (max-width: 480px) {
    .hero__main-title { 
        font-size: 28px; 
        -webkit-text-stroke: 6px var(--sky-purple);
        line-height: 30px;
        max-width: 350px;
    }
}

.hero__cta-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    margin-top: 32px;
}
@media (max-width: 550px) {
    .hero__cta-div {
        flex-direction: column;
        margin-top: 22px;
        gap: 20px;
    }
}

.hero__cta-download {
    font-family: var(--font-display);
    color: var(--ink-white);
    background: var(--green);
    border: 4px solid var(--green-dark);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 0 var(--green-dark), 0 8px 14px rgba(58, 42, 29, 0.2);
    font-weight: 700;
    font-size: 30px;
    text-decoration: none;
    padding: 8px 32px;
}
@media (max-width: 768px) {
    .hero__cta-download {
        font-size: 24px;
        padding: 4px 20px;
    }
}

@media (max-width: 575px) {
    .hero__cta-download {
        font-size: 20px;
        padding: 4px 20px;
    }
}

.hero__cta-trailer {
    font-family: var(--font-display);
    color: var(--blue);
    background: var(--white);
    border: 4px solid var(--blue);
    border-radius: var(--radius-full);
    box-shadow: 0 4px 0 var(--blue), 0 8px 14px rgba(58, 42, 29, 0.2);
    font-weight: 700;
    font-size: 30px;
    text-decoration: none;
    padding: 6px 32px;
}
@media (max-width: 768px) {
    .hero__cta-trailer {
        font-size: 24px;
        padding: 4px 20px;
    }
}

@media (max-width: 575px) {
    .hero__cta-trailer {
        font-size: 20px;
        padding: 4px 20px;
    }
}

.hero__cta-device-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;
}
@media (max-width: 640px) {
    .hero__cta-device-row {
        gap: 16px;
        margin-top: 32px;
        padding: 0 20px;
        margin-top: 40px;
    }
}

.hero__cta-device {
    align-items: center;
    color: var(--cream);
    border: solid 3px var(--cream);
    background-color: #764722;
    padding: 10px 20px 8px 14px;
    text-decoration: none;
    display: flex;
    gap: 12px;
    border-radius: 18px;
    transition: transform 0.15s ease;
}
@media (max-width: 640px) {
    .hero__cta-device {
        gap: 8px;
        padding: 8px 16px 6px 11px;
        width: 170px;
        align-items: center;
        justify-content: center;
    }
}
/* .hero__cta-device:hover, 
.hero__cta-device:focus { 
    transform: translateY(-2px); 
}
.hero__cta-device:active {
    transform: translateY(2px);
    box-shadow: 0 1px 0 var(--btn-edge, var(--green-dark));
} */

.hero__cta-device-icon {
    font-size: 20px;
}
@media (max-width: 768px) {
    .hero__cta-device-icon {
       font-size: 18px;
    }
}

.hero__cta-device-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    font-size: 16px;
}
@media (max-width: 768px) {
    .hero__cta-device-text {
       font-size: 14px;
    }
}


.hero__cta-device-text b {
    color: var(--white);
    font-size: 22px;
    font-family: var(--font-display);
    line-height: 27px;
}
@media (max-width: 768px) {
    .hero__cta-device-text b {
       font-size: 20px;
       line-height: 23px;
    }
}
@media (max-width: 640px) {
    .hero__cta-device-text b {
       font-size: 18px;
       line-height: 23px;
    }
}



.welcome__panel {
    background-color: #C98A4B;
    border-radius: 32px;
    border: 6px solid #7A4421;
    box-shadow: 0 12px 0 #5A3418, 0 8px 14px rgba(58, 42, 29, 0.2);
    margin-top: 80px;
    width: 100%;
    max-width: 1140px;
    padding: 20px;
    position: relative;
    z-index: 5;
}
@media (max-width: 1240px) {
    .welcome__panel {
        width: calc(100% - 100px);
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media (max-width: 905px) {
    .welcome__panel {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
    }
}


.welcome__panel__circle {
    background-color: #7A4421;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    position: absolute;
}
.circle-top-left {
    top: 6px;
    left: 6px;
}
.circle-top-right {
    top: 6px;
    right: 6px;
}
.circle-bottom-left {
    bottom: 6px;
    left: 6px;
}
.circle-bottom-right {
    bottom: 6px;
    right: 6px;
}
.welcome__panel__line {
    position: absolute;
    width: 100%;
    background-color: #A86A34;
    height: 3px;
    left: 0;
    right: 0;
}
.panel-line-top {
    top: 25%;
}
.panel-line-center {
    top: 50%;
}

.panel-line-bottom {
    top: 75%;
}

.welcome__panel__title {
    background: url(../ribbon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;

    font-family: var(--font-display);
    font-weight: 700;
    font-size: 48px;
    color: var(--ink-white);
    text-align: center;
    -webkit-text-stroke: 13px #6B3E1E;
    paint-order: stroke fill;
    text-align: center;
    padding: 9px 0;
    display: block;
    z-index: 6;
    position: absolute;
    left: 0;
    right: 0;
    margin-right: auto;
    margin-left: auto;
    top: -45px;
}
@media (max-width: 1020px) {
    .welcome__panel__title {
        font-size: 44px;
        -webkit-text-stroke: 12px #6B3E1E;
        line-height: 46px;
        padding: 20px 0;
    }

}
@media (max-width: 905px) {
    .welcome__panel__title { 
        font-size: 40px;
        -webkit-text-stroke: 11px #6B3E1E; 
        line-height: 42px;
        padding: 18px 0;
    }
}
@media (max-width: 768px) {
    .welcome__panel__title { 
        font-size: 36px;
        -webkit-text-stroke: 10px #6B3E1E;
        line-height: 40px;
        padding: 16px 0;

    }
}
@media (max-width: 575px) {
    .welcome__panel__title { 
        font-size: 32px;
        -webkit-text-stroke: 8px #6B3E1E;
        line-height: 36px;
        padding: 14px 0;
    }
}

@media (max-width: 480px) {
    .welcome__panel__title { 
        font-size: 28px; 
        -webkit-text-stroke: 6px #6B3E1E;
        line-height: 30px;
    }
}

@media (max-width: 415px) {
    .welcome__panel__title { 
        font-size: 22px; 
        -webkit-text-stroke: 4px #6B3E1E;
        line-height: 24px;
    }
}



.welcome__content {
    border-radius: 22px;
    background-color: #FEEDCE;
    border: 3px solid #E7C99A;
    z-index: 5;
    position: relative;
    padding: 40px;
}
@media (max-width: 905px) {
    .welcome__content {
        padding: 20px;
    }
}

.welcome__content__text {
    color: var(--ink);
    max-width: 635px;
    font-size: 30px;
    margin: auto;
}
@media (max-width: 905px) {
    .welcome__content__text {
        font-size: 26px;
    }
}
@media (max-width: 768px) {
    .welcome__content__text {
        font-size: 24px;
    }
}
@media (max-width: 640px) {
    .welcome__content__text {
        font-size: 22px;
    }
}
@media (max-width: 520px) {
    .welcome__content__text {
        font-size: 20px;
    }
}





.welcome__content__row {
    display: flex;
    margin-top: 60px;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
@media (max-width: 1240px) {
    .welcome__content__row {
        gap: 24px;
        margin-top: 28px;
    }
}
@media (max-width: 768px) {
    .welcome__content__row {
        flex-wrap: wrap;
        margin-top: 16px;
        gap: 16px;
    }
}

.welcome__content__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    font-size: 28px;
    font-weight: bold;
    color: var(--ink);
    font-family: var(--font-display);
}
@media (max-width: 1240px) {
    .welcome__content__badge {
        gap: 12px;
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    .welcome__content__badge {
        gap: 8px;
        font-size: 18px;
    }
}

.welcome__content__badge-img {
    width: 150px;
    height: 150px;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: solid 6px #FFFFFF;
    box-shadow: 0 6px 0 #A0612F, 0 8px 14px rgba(58, 42, 29, 0.2);
    border-radius: var(--radius-full);
}

@media (max-width: 1040px) {
    .welcome__content__badge-img {
        width: 130px;
        height: 130px;
    }
}
@media (max-width: 905px) {
    .welcome__content__badge-img {
        width: 90px;
        height: 90px;
        border: solid 4px #FFFFFF;
        box-shadow: 0 4px 0 #A0612F, 0 6px 14px rgba(58, 42, 29, 0.2);
    }
}

.badge-panda {
    background-color: #F2D9A8;
}
.badge-coral {
    background-color: #A8DDE4;
}
.badge-palmaria {
    color: #E0662E;
}
.welcome__content__badge-sign {
    color: #FFC93C;
    font-size: 80px;
    font-weight: bold;
    font-family: var(--font-other);
    -webkit-text-stroke: 14px #A0612F;
    paint-order: stroke fill;
    filter: drop-shadow(0px 5px 0px #A0612F);
    margin-top: -70px;
}
@media (max-width: 1240px) {
    .welcome__content__badge-sign {
        font-size: 60px;
        -webkit-text-stroke: 10px #A0612F;
    }
}
@media (max-width: 905px) {
    .welcome__content__badge-sign {
        font-size: 45px;
        -webkit-text-stroke: 7px #A0612F;
        margin-top: -51px;
    }
}
@media (max-width: 768px) {
    .welcome__content__badge-sign {
        margin-top: -45px;
    }
}

.build__section__number-badge {
    width: 84px;
    height: 84px;
    border-radius: var(--radius-full);
    background-color: var(--yellow);
    border: solid 5px #A0612F;
    box-shadow: 0 5px 0 0 #A0612F;
    position: absolute;
    color: #6B3E1E;
    font-family: var(--font-other);
    font-size: 34px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: -40px;
}

@media (max-width: 1150px) {
    .build__section__number-badge {
        font-size: 30px;
        width: 70px;
        height: 70px;
    }
}
@media screen and (max-width: 480px) {
    .build__section__number-badge {
        font-size: 24px;
        width: 60px;
        height: 60px;
        border: solid 4px #A0612F;
        box-shadow: 0 3px 0 0 #A0612F;
    }
}

.build__section {
    margin-top: 280px;
    background-color: var(--cream);
    border-radius: var(--radius-lg);
    border: 8px solid var(--white);
    box-shadow: 0 12px 0 0 var(--blue);
    width: 100%;
    max-width: 1220px;
    padding: 87px 0 36px 64px;
    z-index: 5;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 48px;
    flex-wrap: wrap;
}

@media screen and (max-width: 1320px) {
    .build__section {
        width: calc(100% - 100px);
        margin-left: 50px;
        margin-right: 50px;
        gap: 32px;
        padding: 70px 0 32px 40px;
    }
}
@media screen and (max-width: 1150px) {
    .build__section {
        gap: 20px;
        padding: 44px 0 28px 32px;
        margin-top: 200px;
    }
}
@media screen and (max-width: 1020px) {
    .build__section {
        gap: 20px;
        padding: 44px 32px 28px 32px;
    }
}
@media screen and (max-width: 905px) {
    .build__section {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
    }
}
@media screen and (max-width: 650px) {
    .build__section {
        margin-top: 120px;
        padding: 44px 28px 32px 28px;
    }
}
@media screen and (max-width: 480px) {
    .build__section {
        margin-top: 120px;
        padding: 44px 20px 32px 20px;
    }
}

.build__section__left {
    width: 40%;
}
@media screen and (max-width: 1020px) {
    .build__section__left {
        width: 100%;
    }
}
.build__section__right {
    width: calc(60% - 48px);
}

@media screen and (max-width: 1320px) {
    .build__section__right {
        width: calc(60% - 32px);
    }
}
@media screen and (max-width: 1150px) {
    .build__section__right {
        width: calc(60% - 20px);
    }
}
@media screen and (max-width: 1020px) {
    .build__section__right {
        width: 100%;
        max-width: 650px;
        margin: auto;
    }
}

.build__section__title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 54px;
    font-style: normal;
    font-weight: 900;
    text-align: left;
    max-width: 350px;
    line-height: 50px;
    margin-top: 0;
    margin-bottom: 20px;
}
@media (max-width: 1150px) {
    .build__section__title {
        font-size: 44px;
    }
}
@media (max-width: 905px) {
    .build__section__title { 
        font-size: 40px;
        line-height: 42px;
    }
}
@media (max-width: 768px) {
    .build__section__title { 
        font-size: 36px;
        line-height: 40px;
    }
}
@media (max-width: 575px) {
    .build__section__title { 
        font-size: 32px;
    }
}

@media (max-width: 480px) {
    .build__section__title { 
        font-size: 28px; 
        line-height: 30px;
    }
}

.build__section__text {
    color: var(--ink);
    font-size: 28px;
    text-align: left;
    margin-bottom: 20px;
}
@media (max-width: 1150px) {
    .build__section__text {
        font-size: 24px;
    }
}
@media (max-width: 768px) {
    .build__section__text {
        font-size: 24px;
    }
}
@media (max-width: 640px) {
    .build__section__text {
        font-size: 22px;
    }
}
@media (max-width: 520px) {
    .build__section__text {
        font-size: 20px;
    }
}

.build__section-tags {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.build__section-tag {
    padding: 8px 18px;
    color: var(--white);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    border-radius: var(--radius-full);
}

@media screen and (max-width: 1320px) {
    .build__section-tag {
        padding: 4px 16px;
        font-size: 16px;
    }
}


.tag-hotels {
    background-color: var(--green);
}

.tag-markets {
    background-color: var(--orange);
}

.tag-landmarks {
    background-color: var(--blue);
}

.tag-activities {
    background-color: var(--pink);
}

.tag-decoration {
    background-color: var(--purple);
}
.build__section__screen {
    border-radius: 30px;
    border: 6px solid var(--green-dark);
    background: var(--green);
    box-shadow: 0 10px 0 0 var(--green-dark);
    transform: rotate(2deg);
    padding: 20px 20px 16px 20px;
    position: relative;
    margin-top: -90px;
}

@media screen and (max-width: 1320px) {
    .build__section__screen {
        margin-top: -64px;
        padding: 16px 16px 12px 16px;
        border: 4px solid var(--green-dark);
        box-shadow: 0 6px 0 0 var(--green-dark);
    }
}

@media screen and (max-width: 1150px) {
    .build__section__screen {
        margin-top: -52px;
    }
}

@media screen and (max-width: 1020px) {
    .build__section__screen {
        margin-top: 36px;
    }
}

@media screen and (max-width: 650px) {
    .build__section__screen {
        border-radius: 20px;
        padding: 14px 14px 9px 14px;
        border: 3px solid var(--green-dark);
        box-shadow: 0 4px 0 0 var(--green-dark);
    }
}

@media screen and (max-width: 5200px) {
    .build__section__screen {
        border-radius: 12px;
        padding: 10px 10px 5px 10px;
        border: 2px solid var(--green-dark);
        box-shadow: 0 2px 0 0 var(--green-dark);
    }
}



.build__section__screen-title {
    display: inline-flex;
    padding: 2px 20px;
    align-items: flex-start;
    border-radius: 12px;
    background: var(--green-dark);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: bold;
    position: absolute;
    top: -31px;
}
@media screen and (max-width: 1320px) {
    .build__section__screen-title {
        padding: 0px 16px;
        font-size: 16px;
        top: -20px;
    }
}

.build__section__screen-img {
    width: 100%;
    height: auto;
    border: 4px solid var(--green-dark);
}

@media screen and (max-width: 1320px) {
    .build__section__screen-img {
        border: 3px solid var(--green-dark);
    }
}


.build__section__screen-flowers {
    position: absolute;
    width: 35%;
    bottom: -31%;
    right: 20%;
}
@media screen and (max-width: 1020px) {
    .build__section__screen-flowers {
        bottom: -27%;
    }
}
@media screen and (max-width: 725px) {
    .build__section__screen-flowers {
        bottom: -31%;
    }
}



.presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--teal-100);
    overflow: hidden;
    padding-bottom: 40px;
    padding-top: 40px;
    /* Anchors the bubbles and keeps them behind the content */
    position: relative;
    isolation: isolate;
}

.presentation__row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 30px;
    max-width: 1220px;
}
@media (max-width: 1320px) {
    .presentation__row {
        width: calc(100% - 100px);
        margin-left: 50px;
        margin-right: 50px;
    }
}
@media (max-width: 1020px) {
    .presentation__row {
        flex-wrap: wrap;
        gap: 70px;
    }
}
@media (max-width: 905px) {
    .presentation__row {
        width: calc(100% - 40px);
        margin-left: 20px;
        margin-right: 20px;
    }
}


.presentation__section__number-badge {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-full);
    background-color: var(--yellow);
    border: solid 5px #A0612F;
    box-shadow: 0 5px 0 0 #A0612F;
    position: absolute;
    color: #6B3E1E;
    font-family: var(--font-other);
    font-size: 30px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    top: -40px;
}

@media (max-width: 1150px) {
    .presentation__section__number-badge {
        font-size: 26px;
        width: 60px;
        height: 60px;
    }
}
@media screen and (max-width: 480px) {
    .presentation__section__number-badge {
        font-size: 22px;
        width: 52px;
        height: 52px;
        border: solid 4px #A0612F;
        box-shadow: 0 3px 0 0 #A0612F;
    }
}

.presentation__section {
    background-color: var(--cream);
    border-radius: var(--radius-lg);
    border: 8px solid var(--white);
    box-shadow: 0 12px 0 0 var(--blue);
    width: 100%;
    max-width: 1220px;
    padding: 54px 40px 36px 64px;
    z-index: 5;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

@media screen and (max-width: 1320px) {
    .presentation__section {
        padding: 50px 40px 32px 40px;
    }
}
@media screen and (max-width: 1150px) {
    .presentation__section {
        padding: 32px 32px 28px 32px;
    }
}
@media screen and (max-width: 1020px) {
    .presentation__section {
        padding: 28px 32px 28px 32px;
        gap: 32px;
    }
}
@media screen and (max-width: 650px) {
    .presentation__section {
        padding: 28px 28px 32px 28px;
        gap: 28px;
    }
}
@media screen and (max-width: 480px) {
    .presentation__section {
        padding: 28px 20px 32px 20px;
        gap: 10px;
    }
}

.presentation__section__left {
    width: calc(100% - 142px);
}
@media (max-width: 1020px) {
    .presentation__section__left {
        width: calc(100% - 182px);
    }
}
@media (max-width: 650px) {
    .presentation__section__left {
        width: calc(100% - 148px);
    }
}
@media (max-width: 480px) {
    .presentation__section__left {
        width: calc(100% - 130px);
    }
}
@media (max-width: 440px) {
    .presentation__section__left {
        width: calc(100% - 100px);
    }
}



.presentation__section__right {
    width: 130px;
}
@media (max-width: 1020px) {
    .presentation__section__right {
        width: 150px;
    }
}
@media (max-width: 650px) {
    .presentation__section__right {
        width: 120px;
    }
}
@media (max-width: 440px) {
    .presentation__section__right {
        width: 90px;
    }
}

.presentation__section__title {
    color: var(--ink);
    font-family: var(--font-display);
    font-size: 40px;
    font-style: normal;
    font-weight: 900;
    text-align: left;
    max-width: 350px;
    line-height: 50px;
    margin-top: 0;
    margin-bottom: 8px;
}
@media (max-width: 1150px) {
    .presentation__section__title {
        font-size: 36px;
        line-height: 40px;
    }
}
@media (max-width: 905px) {
    .presentation__section__title { 
        font-size: 32px;
        line-height: 36px;
    }
}
@media (max-width: 768px) {
    .presentation__section__title { 
        font-size: 28px;
        line-height: 36px;
    }
}
@media (max-width: 575px) {
    .presentation__section__title { 
        font-size: 24px;
    }
}

@media (max-width: 480px) {
    .presentation__section__title { 
        font-size: 24px; 
        line-height: 30px;
    }
}

.presentation__section__text {
    color: var(--ink);
    font-size: 24px;
    text-align: left;
    margin-bottom: 0px;
    margin-top: 0;
}
@media (max-width: 1150px) {
    .presentation__section__text {
        font-size: 22px;
        max-width: 470px;
    }
}
@media (max-width: 768px) {
    .presentation__section__text {
        font-size: 20px;
    }
}
@media (max-width: 640px) {
    .presentation__section__text {
        font-size: 18px;
    }
}
@media (max-width: 520px) {
    .presentation__section__text {
        font-size: 16px;
    }
}

.presentation__section__badge-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border: solid 6px #FFFFFF;
    box-shadow: 0 6px 0 #A0612F, 0 8px 14px rgba(58, 42, 29, 0.2);
    border-radius: 75px;
}

@media (max-width: 905px) {
    .presentation__section__badge-img {
        border: solid 4px #FFFFFF;
        box-shadow: 0 4px 0 #A0612F, 0 6px 14px rgba(58, 42, 29, 0.2);
    }
}

.presentation__islands {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Keeps the plank clear of the wave below */
    margin-bottom: var(--wave-height);
}

.presentation__islands__title {
    color: var(--yellow);
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: bold;
    margin-bottom: 10px;
    line-height: 70px;
    margin-top: 140px;
    text-align: center;
    -webkit-text-stroke: 13px #6B3E1E;
    paint-order: stroke fill;
}

.presentation__islands__text {
    text-align: center;
    color: var(--white);
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 30px;
}

/* Carousel settings: number of visible islands and their size per breakpoint */
.presentation__islands__plank {
    --islands-visible: 6;
    --island-size: 150px;
    --island-gap: 26px;
    --island-index: 0;
    --arrow-size: 64px;

    display: flex;
    align-items: center;
    gap: 20px;
    max-width: 100%;
    padding: 30px 26px 56px;
    background: url("../plank.svg") center / 100% 100% no-repeat;
}

.presentation__islands__arrow-circle {
    flex-shrink: 0;
    width: var(--arrow-size);
    height: var(--arrow-size);
    padding: 0 0 6px;
    border-radius: var(--radius-full);
    background-color: var(--yellow);
    border: solid 4px #A0612F;
    box-shadow: 0 4px 0 0 #A0612F;
    color: #6B3E1E;
    font-family: var(--font-other);
    font-size: calc(var(--arrow-size) * 0.75);
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.presentation__islands__arrow-circle:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #A0612F;
}

.presentation__islands__arrow-circle:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #A0612F;
}

.presentation__islands__arrow-circle:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

.presentation__islands__viewport {
    width: calc(var(--islands-visible) * var(--island-size) + (var(--islands-visible) - 1) * var(--island-gap));
    overflow: hidden;
    /* Leaves room for the badge drop shadow */
    padding-bottom: 8px;
}

.presentation__islands__track {
    display: flex;
    gap: var(--island-gap);
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateX(calc(var(--island-index) * (var(--island-size) + var(--island-gap)) * -1));
    transition: transform 0.6s ease-in-out;
}

.presentation__islands__track li {
    flex-shrink: 0;
}

.presentation__islands__badge {
    display: block;
    width: var(--island-size);
    height: var(--island-size);
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border: solid 6px var(--cream);
    box-shadow: 0 6px 0 #A0612F;
    border-radius: var(--radius-full);
}

@media (max-width: 1320px) {
    .presentation__islands__plank {
        --islands-visible: 4;
        --island-size: clamp(84px, 15vw, 150px);
        --island-gap: clamp(12px, 2vw, 26px);
    }
}

@media (max-width: 1020px) {
    .presentation__islands__plank {
        --arrow-size: 48px;
        gap: 12px;
        padding: 24px 16px 44px;
    }
}

@media (max-width: 640px) {
    .presentation__islands__plank {
        --islands-visible: 2;
        --island-size: clamp(84px, 25vw, 140px);
        --island-gap: 14px;
        --arrow-size: 44px;
        gap: 8px;
        padding: 20px 12px 36px;
    }

    .presentation__islands__badge {
        border-width: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .presentation__islands__track {
        transition: none;
    }
}


/* ==========================================================================
   DISCOVER (wildlife, eco-projects, quests)
   ========================================================================== */
.wildlife__title,
.eco__title,
.quests__title,
.waitlist__title {
    color: var(--white);
    font-family: var(--font-display);
    font-size: 64px;
    font-weight: bold;
    line-height: 70px;
    margin-top: 0;
    margin-bottom: 10px;
    text-align: center;
    -webkit-text-stroke: 13px #6B3E1E;
    paint-order: stroke fill;
}

.quests__title {
    color: var(--yellow);
}

@media (max-width: 1020px) {
    .wildlife__title,
    .eco__title,
    .quests__title,
    .waitlist__title {
        font-size: 54px;
        line-height: 60px;
        -webkit-text-stroke: 12px #6B3E1E;
    }
}
@media (max-width: 768px) {
    .wildlife__title,
    .eco__title,
    .quests__title,
    .waitlist__title {
        font-size: 44px;
        line-height: 50px;
        -webkit-text-stroke: 10px #6B3E1E;
    }
}
@media (max-width: 480px) {
    .wildlife__title,
    .eco__title,
    .quests__title,
    .waitlist__title {
        font-size: 34px;
        line-height: 40px;
        -webkit-text-stroke: 8px #6B3E1E;
    }
}

.wildlife__text,
.quests__text,
.waitlist__text {
    color: var(--cream);
    font-size: 30px;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
}

.quests__text {
    color: var(--white);
}

@media (max-width: 768px) {
    .wildlife__text,
    .quests__text,
    .waitlist__text {
        font-size: 24px;
    }
}
@media (max-width: 480px) {
    .wildlife__text,
    .quests__text,
    .waitlist__text {
        font-size: 20px;
    }
}

.discover {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 110px;
    background: var(--teal-200);
    padding: 90px var(--gutter) calc(var(--wave-height) + 50px);
    isolation: isolate;
}

@media (max-width: 768px) {
    .discover {
        gap: 80px;
        padding-top: 70px;
    }
}


/* Bubbles
   Decoration on the sides of the sea, always behind the content.
   ========================================================================== */
.bubbles {
    /* Size unit of the cluster: every bubble size/position is a multiple of it */
    --s: 1px;
    position: absolute;
    z-index: -1;
    width: calc(56 * var(--s));
    height: calc(132 * var(--s));
    pointer-events: none;
}

.bubble {
    position: absolute;
    border-radius: var(--radius-full);
    border: calc(2 * var(--s)) solid rgba(255, 255, 255, 0.55);
    background-color: rgba(255, 255, 255, 0.12);
}

/* Small white highlight on the two main bubbles */
.bubble-xl::after,
.bubble-lg::after {
    content: "";
    position: absolute;
    border-radius: var(--radius-full);
    background-color: rgba(255, 255, 255, 0.7);
}

.bubble-xl {
    left: 0;
    top: 0;
    width: calc(34 * var(--s));
    height: calc(34 * var(--s));
    border-width: calc(2.43 * var(--s));
}
.bubble-xl::after {
    left: calc(5 * var(--s));
    top: calc(4.4 * var(--s));
    width: calc(7.5 * var(--s));
    height: calc(7.5 * var(--s));
}

.bubble-md {
    left: calc(38 * var(--s));
    top: calc(46 * var(--s));
    width: calc(18 * var(--s));
    height: calc(18 * var(--s));
}

.bubble-lg {
    left: calc(8 * var(--s));
    top: calc(82 * var(--s));
    width: calc(24 * var(--s));
    height: calc(24 * var(--s));
}
.bubble-lg::after {
    left: calc(3.3 * var(--s));
    top: calc(2.8 * var(--s));
    width: calc(5.3 * var(--s));
    height: calc(5.3 * var(--s));
}

.bubble-sm {
    left: calc(44 * var(--s));
    top: calc(120 * var(--s));
    width: calc(12 * var(--s));
    height: calc(12 * var(--s));
}

/* Mirrored cluster (right side). "scale" leaves "transform" free for the animations */
.reverse {
    scale: -1 1;
}

/* Biomes (from the bottom of the presentation section) */
.bubbles.bubbles-01 { left: 40px; bottom: 478px; }
.bubbles.bubbles-02 { right: 54px; bottom: 258px; }

/* Wildlife, eco-projects and quests (spread along the discover section) */
.bubbles.bubbles-03 { left: 60px; top: 12%; }
.bubbles.bubbles-04 { right: 44px; top: 23%; }
.bubbles.bubbles-05 { left: 30px; top: 51%; }
.bubbles.bubbles-06 { right: 24px; top: 64%; }
.bubbles.bubbles-07 { left: 50px; top: 85%; }
.bubbles.bubbles-08 { right: 34px; top: 93%; }

@media (max-width: 768px) {
    .bubbles {
        --s: 0.71px;
    }

    .bubbles.bubbles-01,
    .bubbles.bubbles-03,
    .bubbles.bubbles-05,
    .bubbles.bubbles-07 { left: 8px; }

    .bubbles.bubbles-02,
    .bubbles.bubbles-04,
    .bubbles.bubbles-06,
    .bubbles.bubbles-08 { right: 8px; }
}


/* Wildlife
   ========================================================================== */
.wildlife {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 4 cards per row, or 2: never 3 + 1. On small screens the cards shrink
   (--card-zoom) to keep 2 per row */
.wildlife__cards {
    --cols: 4;
    --card-zoom: 1;
    display: grid;
    grid-template-columns: repeat(var(--cols), max-content);
    justify-content: center;
    gap: 40px;
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

@media (max-width: 1216px) {
    .wildlife__cards { --cols: 2; }
}
@media (max-width: 640px) {
    .wildlife__cards {
        --card-zoom: 0.8;
        gap: 28px 24px;
    }
}
@media (max-width: 520px) {
    .wildlife__cards {
        --card-zoom: 0.62;
        gap: 24px 16px;
    }
}
@media (max-width: 370px) {
    .wildlife__cards {
        --card-zoom: 0.56;
        gap: 22px 12px;
    }
}

.wildlife__card {
    position: relative;
    width: 250px;
    height: 330px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--white);
    border-radius: 20px;
    filter: drop-shadow(0 10px 0 #145A6E);
    zoom: var(--card-zoom, 1);
    /* Offset and tilt live in variables so hover effects can build on them */
    transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotate, 0deg));
}

.wildlife__card.card-panda {
    --photo-bg: #F2D9A8;
    --card-rotate: 3deg;
}
.wildlife__card.card-elephant {
    --photo-bg: #CFE8B8;
    --card-y: -9px;
    --card-rotate: -2deg;
}
.wildlife__card.card-macaw {
    --photo-bg: #BFE3EA;
    --card-rotate: 2deg;
}
.wildlife__card.card-otter {
    --photo-bg: #F7D2C4;
    --card-y: -13px;
    --card-rotate: -3deg;
}

.wildlife__card-tape {
    position: absolute;
    top: -14px;
    left: 50%;
    width: 96px;
    height: 28px;
    background-color: rgba(255, 224, 138, 0.85);
    transform: translateX(-50%) rotate(4deg);
}

.wildlife__card-photo {
    position: relative;
    width: 222px;
    height: 222px;
    flex-shrink: 0;
    overflow: hidden;
    border-radius: 14px;
    background-color: var(--photo-bg);
}

.wildlife__card-photo img {
    position: absolute;
    left: 6px;
    top: 14px;
    width: 210px;
    height: 210px;
    object-fit: cover;
}

.wildlife__card-name {
    color: var(--ink);
    font-family: var(--font-other);
    font-size: 28px;
    font-weight: bold;
    line-height: 34px;
    white-space: nowrap;
    margin: 12px 0 6px;
}

.wildlife__card-status {
    color: var(--white);
    background-color: var(--green);
    font-family: var(--font-other);
    font-size: 16px;
    font-weight: bold;
    padding: 4px 14px;
    border-radius: var(--radius-full);
}


/* Eco-projects
   ========================================================================== */
.eco {
    position: relative;
    width: 100%;
    max-width: 1200px;
    padding: 40px 0;
}

/* Wooden posts holding the board */
.eco::before,
.eco::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 24px;
    background-color: var(--wood-dark);
    border-radius: 6px;
}
.eco::before { left: 70px; }
.eco::after { right: 70px; }

.eco__board {
    position: relative;
    z-index: 1;
    padding: 22px 54px 36px;
    text-align: center;
    background:
        repeating-linear-gradient(180deg, transparent 0, transparent 98px, #8A5428 98px, #8A5428 102px, transparent 102px, transparent 104px),
        #A86A34;
    border: 6px solid #6B3E1E;
    border-radius: 24px;
    box-shadow: 0 12px 0 0 #145A6E;
}

.eco__board__nail {
    position: absolute;
    width: 14px;
    height: 14px;
    border-radius: var(--radius-full);
    background-color: #5A3418;
}
.eco__board__nail.nail-top-left { top: 10px; left: 10px; }
.eco__board__nail.nail-top-right { top: 10px; right: 10px; }
.eco__board__nail.nail-middle-left { top: calc(50% - 7px); left: 10px; }
.eco__board__nail.nail-middle-right { top: calc(50% - 7px); right: 10px; }
.eco__board__nail.nail-bottom-left { bottom: 10px; left: 10px; }
.eco__board__nail.nail-bottom-right { bottom: 10px; right: 10px; }

.eco__title {
    font-size: 56px;
    margin-bottom: 14px;
}

.eco__text {
    display: inline-block;
    color: var(--cream);
    background-color: rgba(90, 52, 24, 0.7);
    font-size: 24px;
    padding: 8px 32px;
    border-radius: var(--radius-full);
    margin: 0 0 40px;
}

/* 5 cards per row, then 3 + 2, then 2 + 2 + 1: never 4 + 1.
   The list width is capped to --cols cards so they wrap the right way;
   on small screens the cards shrink (--card-zoom) to keep 2 per row */
.eco__projects {
    --cols: 5;
    --card-zoom: 1;
    --gap-x: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 36px var(--gap-x);
    max-width: calc(var(--cols) * 200px * var(--card-zoom) + (var(--cols) - 1) * var(--gap-x));
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

@media (max-width: 1296px) {
    .eco__projects { --cols: 3; }
}
@media (max-width: 860px) {
    .eco__projects { --cols: 2; }
}
@media (max-width: 560px) {
    .eco__projects {
        --card-zoom: 0.8;
        --gap-x: 16px;
        row-gap: 30px;
    }
}
@media (max-width: 440px) {
    .eco__projects {
        --card-zoom: 0.66;
        --gap-x: 12px;
        row-gap: 26px;
    }
}
@media (max-width: 350px) {
    .eco__projects {
        --card-zoom: 0.56;
        --gap-x: 10px;
    }
}

.eco__project {
    position: relative;
    width: 200px;
    height: 300px;
    padding: 16px 8px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #FFF8EA;
    border: 3px solid #E7C99A;
    border-radius: 16px;
    filter: drop-shadow(0 6px 0 #5A3418);
    zoom: var(--card-zoom, 1);
    transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotate, 0deg));
}

.eco__project-tape {
    position: absolute;
    top: -17px;
    left: 50%;
    width: 70px;
    height: 22px;
    background-color: rgba(255, 224, 138, 0.9);
    transform: translateX(-50%) rotate(-3deg);
}

.eco__project-art {
    width: 172px;
    height: 150px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DDF1F3;
    border-radius: 12px;
}

.eco__project-art img {
    width: 150px;
    height: 134px;
    object-fit: contain;
}

.eco__project-name {
    color: var(--ink);
    font-family: var(--font-other);
    font-size: 24px;
    font-weight: bold;
    white-space: nowrap;
    margin: 14px 0 0;
}

.eco__project-btn {
    align-self: stretch;
    margin-top: auto;
    padding: 8px 0;
    color: var(--white);
    background-color: #E0662E;
    border: 3px solid #9A3B12;
    border-radius: 10px;
    box-shadow: 0 4px 0 0 #9A3B12;
    font-family: var(--font-other);
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.eco__project-btn:hover,
.eco__project-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 0 #9A3B12;
}

.eco__project-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #9A3B12;
}

@media (max-width: 768px) {
    .eco::before { left: 30px; }
    .eco::after { right: 30px; }

    .eco__board {
        padding: 22px 24px 32px;
    }
}

@media (max-width: 480px) {
    .eco__board {
        padding: 20px 12px 28px;
    }

    .eco__text {
        font-size: 20px;
        padding: 8px 20px;
        border-radius: var(--radius-md);
    }
}


/* Quests & achievements
   ========================================================================== */
.quests {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quests__trail-card {
    width: 100%;
    max-width: 1240px;
    margin-top: 10px;
    padding: 32px 42px 70px;
    background-color: var(--cream);
    border: 8px solid var(--white);
    border-radius: 165px;
    box-shadow: 0 12px 0 0 #145A6E;
}

.quests__list {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Dotted trail linking the badges */
.quests__list::before {
    content: "";
    position: absolute;
    top: 40px;
    left: 40px;
    right: 40px;
    height: 80px;
    background: url("../quest_trail.svg") 0 0 / 100% 100% no-repeat;
}

.quests__item {
    position: relative;
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.quests__badge {
    position: relative;
    display: block;
    width: 150px;
    height: 150px;
}

.quests__badge img {
    position: absolute;
    inset: 8px;
    width: calc(100% - 16px);
    height: calc(100% - 16px);
    object-fit: cover;
    border-radius: var(--radius-full);
}

/* Golden ring around each badge */
.quests__badge::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("../quest_frame.png") center / contain no-repeat;
}

.quests__name {
    width: 150px;
    margin-top: 14px;
    color: var(--ink);
    font-family: var(--font-other);
    font-size: 19px;
    font-weight: bold;
    line-height: 1.1;
    text-align: center;
}

@media (max-width: 1320px) {
    .quests__trail-card {
        padding: 32px 24px 36px;
        border-radius: var(--radius-lg);
    }

    .quests__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 28px 20px;
    }

    .quests__list::before {
        display: none;
    }
}

@media (max-width: 480px) {
    .quests__trail-card {
        padding: 24px 12px 28px;
    }

    .quests__list {
        gap: 20px 12px;
    }

    .quests__item {
        flex-basis: 120px;
    }

    .quests__badge,
    .quests__name {
        width: 120px;
    }

    .quests__badge {
        height: 120px;
    }

    .quests__name {
        font-size: 16px;
    }
}


/* ==========================================================================
   WAITLIST
   ========================================================================== */
.waitlist {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 40px var(--gutter) 130px;
    background: url("../waitlist_glow.svg") center top / 900px 600px no-repeat, var(--teal-300);
    overflow-x: clip;
}

.waitlist__flowers {
    position: absolute;
    transform: scaleX(-1);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.25));
    pointer-events: none;
}
.waitlist__flowers.flowers-right {
        width: 240px;
        top: auto;
        bottom: 80px;
        right: -30px;
}

.waitlist__logo {
    width: 300px;
    height: 300px;
    object-fit: cover;
}

.waitlist__text {
    margin-bottom: 40px;
}

.waitlist__text {
    max-width: 900px;
}

/* Discord button: yellow like the other main buttons, Discord logo in brown */
.discord-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 18px 40px;
    color: #6B3E1E;
    background-color: var(--yellow);
    border: 4px solid #A0612F;
    border-radius: var(--radius-full);
    box-shadow: 0 6px 0 0 #A0612F;
    font-family: var(--font-other);
    font-size: 28px;
    font-weight: bold;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.discord-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 0 #A0612F;
}

.discord-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 0 #A0612F;
}

.discord-btn:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 3px;
}

.discord-btn__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
}

/* Perks as chips between the text and the button */
.discord-perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin: 0 0 36px;
    padding: 0;
    list-style: none;
}

.discord-perk {
    padding: 8px 18px;
    color: var(--cream);
    /* Darker tint keeps the cream text readable (contrast above 4.5:1) */
    background-color: rgba(0, 0, 0, 0.12);
    border: 2px solid rgba(254, 237, 206, 0.5);
    border-radius: var(--radius-full);
    font-family: var(--font-other);
    font-size: 18px;
    font-weight: bold;
}

.waitlist__note {
    color: var(--cream);
    font-size: 22px;
    text-align: center;
    margin: 28px 0 0;
}

@media (max-width: 1020px) {
    .waitlist__flowers.flowers-right {
        width: 150px;
        top: auto;
        bottom: 160px;
        right: -30px;
    }
}

@media (max-width: 550px) {
    .waitlist__flowers.flowers-right {
        bottom: 210px;
        right: -40px;
    }
}

@media (max-width: 480px) {
        .waitlist__flowers.flowers-right {
        display: none;
    }
}

@media (max-width: 768px) {


    .waitlist__logo {
        width: 220px;
        height: 220px;
    }

    .discord-btn {
        padding: 14px 28px;
        font-size: 22px;
    }

    .discord-btn__icon {
        width: 28px;
        height: 28px;
    }

    .discord-perk {
        font-size: 16px;
    }

    .waitlist__note {
        font-size: 18px;
    }
}

@media (max-width: 640px) {
    .discord-btn {
        gap: 10px;
        padding: 12px 24px;
        font-size: 19px;
    }

    .discord-btn__icon {
        width: 24px;
        height: 24px;
    }
}

@media (max-width: 480px) {
    .discord-btn {
        gap: 8px;
        padding: 10px 18px;
        font-size: 16px;
    }

    .discord-btn__icon {
        width: 22px;
        height: 22px;
    }
}


/* ==========================================================================
   CARD HOVER
   Eco-projects swing from their tape, animals hop inside their frame.
   The animation runs when JS adds .is-playing on mouseenter, and the class
   stays until the animation ends: hovering again meanwhile (cursor sitting
   on the card edge) cannot restart it.
   ========================================================================== */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {

    /* Swing from the tape, slowing down until it settles */
    .hover-swing {
        transform-origin: 50% 0;
    }
    .hover-swing.is-playing {
        animation: card-swing 1s ease-out;
    }

    /* Animal hop inside its frame, with a light squash on landing */
    .hover-hop.is-playing .wildlife__card-photo img {
        transform-origin: 50% 100%;
        animation: animal-hop 0.6s ease-out;
    }
}

@keyframes card-swing {
    0%   { transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotate, 0deg)); }
    20%  { transform: translateY(var(--card-y, 0px)) rotate(calc(var(--card-rotate, 0deg) + 2.5deg)); }
    45%  { transform: translateY(var(--card-y, 0px)) rotate(calc(var(--card-rotate, 0deg) - 1.8deg)); }
    70%  { transform: translateY(var(--card-y, 0px)) rotate(calc(var(--card-rotate, 0deg) + 0.8deg)); }
    100% { transform: translateY(var(--card-y, 0px)) rotate(var(--card-rotate, 0deg)); }
}

@keyframes animal-hop {
    0%   { transform: translateY(0) scale(1, 1); }
    15%  { transform: translateY(0) scale(1.03, 0.97); }
    45%  { transform: translateY(-10px) scale(0.98, 1.02); }
    75%  { transform: translateY(0) scale(1.04, 0.96); }
    100% { transform: translateY(0) scale(1, 1); }
}


/* ==========================================================================
   BUBBLES ANIMATION
   Each bubble drifts up and fades out, then starts again from its place.
   Every bubble has its own speed and starting point, so a cluster never
   moves as one block.
   ========================================================================== */
.bubble-xl { --rise: 7s;   --delay: -1.2s; }
.bubble-md { --rise: 5.5s; --delay: -3.4s; }
.bubble-lg { --rise: 8s;   --delay: -5.1s; }
.bubble-sm { --rise: 6.2s; --delay: -0.6s; }

@media (prefers-reduced-motion: no-preference) {
    .bubble {
        animation: bubble-rise var(--rise) linear var(--delay) infinite;
    }
}

@keyframes bubble-rise {
    0%   { transform: translateY(0);      opacity: 0; }
    12%  { opacity: 1; }
    75%  { opacity: 1; }
    100% { transform: translateY(-180px); opacity: 0; }
}