:root {
    /* colors */
    --neutral-900: rgb(23, 35, 57);
    --neutral-500: rgb(73, 86, 109);
    --neutral-200: rgb(243, 237, 231);
    --neutral-0: rgb(250, 248, 246);
    --purple-500: rgb(203, 48, 227);
    --light-gradient: linear-gradient(135deg, #a060ff 0%, #cb30e3 49.21%, #ffa84e 100%);

    /* font-size */
    --fs-1-desktop: 4.5rem; /* 72 px */
    --fs-1-tablet: 3.5rem; /* 56px */
    --fs-1-mobile: 2.375rem; /* 38px */
    --fs-2: 3rem; /* 48px */
    --fs-3: 1.25rem; /* 20px */
    --fs-4: 1.125rem; /* 18px */
    --fs-5: 1.125rem; /* 18px */
    --fs-6: 1rem; /* 16px */
    --fs-7: 1rem; /* 16px */
    --fs-8: 0.9375rem; /* 15px */

    /* font-weight */
    --fw-reg: 400;
    --fw-bold: 700;

    /* line-height */
    --lh-1: 110%;
    --lh-2: 120%;
    --lh-3: 160%;
    --lh-4: 160%;
    --lh-5: 160%;
    --lh-6: 150%;
    --lh-7: 150%;
    --lh-8: 160%;

    /* letter-spacing */
    --ls-1-desktop: -0.0625rem; /* -1px */
    --ls-1-tablet: -0.04875rem; /* -0.78px */
    --ls-1-mobile: -0.033125rem; /* -0.53px */
    --ls-2: -0.03125rem; /* -0.5px */
    --ls-3: 0.006875rem; /* 0.11px */
    --ls-4: -0.01125rem; /* -0.18px */
    --ls-5: 0.00625rem; /* 0.1px */
    --ls-6: -0.01rem; /* -0.16px */
    --ls-7: 0.15625rem; /* 2.5px */
    --ls-8: 0; 

    /* spacings */
    --spacing-0: 0;
    --spacing-2: 0.125rem;
    --spacing-4: 0.25rem;
    --spacing-6: 0.375rem;
    --spacing-8: 0.5rem;
    --spacing-10: 0.625rem;
    --spacing-12: 0.75rem;
    --spacing-16: 1rem;
    --spacing-20: 1.25rem;
    --spacing-24: 1.5rem;
    --spacing-32: 2rem;
    --spacing-40: 2.5rem;
    --spacing-48: 3rem;
    --spacing-64: 4rem;
    --spacing-80: 5rem;

    /* radius */
    --radius-0: 0;
    --radius-4: 0.25rem;
    --radius-6: 0.375rem;
    --radius-8: 0.5rem;
    --radius-10: 0.625rem;
    --radius-12: 0.75rem;
    --radius-16: 1rem;
    --radius-20: 1.25rem;
    --radius-24: 1.5rem;
    --radius-full: 999px;
}

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

body {
    font-family: 'Epilogue', sans-serif;
}

/* header mobile */
main, header {
    max-inline-size: 27rem;
    margin: 0 auto;
}

.header-container {
    display: flex;
    padding: var(--spacing-32) var(--spacing-16);
    justify-content: space-between;
    align-items: center;
}

.header-container .header-btn {
    padding: var(--spacing-16) var(--spacing-20) var(--spacing-12);
    border: 0.15rem solid var(--neutral-900);
    border-radius: var(--radius-6);
    text-decoration: none;
    color: var(--neutral-900);
    font-size: var(--fs-6);
    font-weight: var(--fw-bold);
    line-height: var(--lh-6);
    letter-spacing: var(--ls-6);
    text-align: center;
    cursor: pointer;
}

.header-container .header-btn:hover {
    background-color: var(--neutral-900);
    border: 0.15rem solid transparent;
    color: var(--neutral-0);
}

.header-container .header-btn:active {
    background-color: transparent;
    border: 0.15rem solid var(--neutral-900);
    outline: 0.15rem solid var(--neutral-900);
    outline-offset: 0.15rem;
    color: var(--neutral-900);
}

/* hero mobile */
.hero-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-64);
    padding: var(--spacing-40) var(--spacing-16);
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-64);
}

.hero-text h1 {
    font-size: var(--fs-1-mobile);
    letter-spacing: var(--ls-1-mobile);
    line-height: var(--lh-1);
    font-weight: var(--fw-reg);
    color: var(--neutral-900);
    padding-bottom: var(--spacing-40);
}

.hero-text span.bold {
    font-weight: var(--fw-bold);
}

.hero-text img.curve {
    position: relative;
    inline-size: 9rem;
    left: 10rem;
    top: -0.1rem;
}

.hero-text p {
    font-size: var(--fs-5);
    letter-spacing: var(--ls-5);
    line-height: var(--lh-5);
    color: var(--neutral-500);
    padding-bottom: var(--spacing-40);
}

.hero-text .hero-btn {
    background-color: var(--neutral-900);
    border-radius: var(--radius-8);
    inline-size: 14.6875rem;
    padding: var(--spacing-20) var(--spacing-32) var(--spacing-16);
    text-decoration: none;
    color: var(--neutral-0);
    font-size: var(--fs-6);
    font-weight: var(--fw-bold);
    line-height: var(--lh-6);
    letter-spacing: var(--ls-6);
    cursor: pointer;
    border: 0.15rem solid transparent;
}

.hero-text .hero-btn:hover {
    background-image: var(--light-gradient);
    border: 0.15rem solid transparent;
}

.hero-text .hero-btn:active {
    border: 0.15rem solid var(--neutral-900);
    outline: 0.15rem solid var(--neutral-900);
    outline-offset: 0.15rem;
    background-image: none;
}

.hero-img img.portrait-img {
    display: none;
}

.hero-img img.landscape-img {
    inline-size: 100%;
}

.stats-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--spacing-40);
}

.stats h2 {
    font-size: var(--fs-2);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-2);
    line-height: var(--lh-2);
    color: var(--neutral-900);
}

.stats p {
    font-size: var(--fs-7);
    letter-spacing: var(--ls-7);
    line-height: var(--lh-7);
    color: var(--neutral-500);
    text-transform: uppercase;
}

/* hero tablet */
@media only screen and (min-width: 768px) {
    main, header {
        max-inline-size: 44rem;
    }

    .header-container {
        padding: var(--spacing-32) var(--spacing-40);
    }

    .hero-content {
        flex-direction: row;
    }

    .hero-img img.landscape-img {
        display: none;
    }

    .hero-img img.portrait-img {
        display: block;
        inline-size: 17.5rem;
    }

    .hero-text h1 {
        font-size: var(--fs-1-tablet);
        letter-spacing: var(--ls-1-tablet);
    }

    .hero-text p {
        padding-bottom: var(--spacing-48);
    }

    .hero-text img.curve {
        inline-size: 17rem;
        left: 13rem;
    }

    .hero-text {
        align-self: flex-end;
    }

    .hero-img {
        align-self: flex-start;
    }

    .stats-container {
        flex-direction: row;
        justify-content: space-between;
        padding: var(--spacing-12) var(--spacing-64);
    }
}

/* hero desktop */
@media only screen and (min-width: 1024px) {
    main, header {
        max-inline-size: 70rem;
    }

    .header-container {
        padding: var(--spacing-32) var(--spacing-64);
    }

    .hero-container {
        flex-direction: row;
        padding: var(--spacing-40) var(--spacing-64);
    }

    .hero-text, .hero-img {
        align-self: center;
    }

    .hero-text {
        inline-size: 40rem;
        z-index: 1;
    }

    .hero-text p {
        inline-size: 21rem;
    }

    .hero-text h1 {
        font-size: var(--fs-1-desktop);
        letter-spacing: var(--ls-1-desktop);
    }

    .stats-container {
        flex-direction: column;
        justify-content: center;
        gap: var(--spacing-80);
    }

    .hero-img, .stats-container {
        position: relative;
    }

    .hero-img {
        left: -16rem;
    }

    .stats-container {
        left: -20rem;
    }

    .hero-img img.portrait-img {
        inline-size: 20rem;
    }
}

/* testimonial mobile */
.testimonial-content {
    background-color: var(--neutral-900);
    border-radius: var(--radius-8);
    padding: var(--spacing-40) var(--spacing-24) 0;
    margin-top: 15rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-height: 46.5rem;
    z-index: 10;
    margin-bottom: -10rem;
}

.testimonial-img {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-img img.jeremy-desktop {
    display: none;
}

.testimonial-img img.jeremy-mobile {
    position: absolute;
    z-index: 2;
    inline-size: 15.75rem;
    top: -11rem;
}

.testimonial-img img.blur {
    inline-size: 100%;
    position: relative;
    top: -9em;
}

.testimonial-text, .curve-img {
    position: relative;
    top: -10rem;
}

.curve-img {
    padding-bottom: var(--spacing-16);
}

.testimonial-text h2 {
    font-size: var(--fs-2);
    line-height: var(--lh-2);
    letter-spacing: var(--ls-2);
    color: var(--neutral-0);
    font-weight: var(--fw-reg);
    padding-bottom: var(--spacing-32);
}

.testimonial-text span.bold {
    font-weight: var(--fw-bold);
}

.testimonial-text p.text {
    font-size: var(--fs-3);
    line-height: var(--lh-3);
    letter-spacing: var(--ls-3);
    color: var(--neutral-200);
    padding-bottom: var(--spacing-24);
}

.testimonial-text p.name {
    font-size: var(--fs-4);
    line-height: var(--lh-4);
    letter-spacing: var(--ls-4);
    font-weight: var(--fw-bold);
    color: var(--neutral-0);
    text-transform: uppercase;
}

.testimonial-text p.role {
    font-size: var(--fs-7);
    letter-spacing: var(--ls-7);
    line-height: var(--lh-7);
    font-weight: var(--fw-reg);
    color: var(--neutral-200);
    text-transform: uppercase;
}

/* testimonial tablet */
@media only screen and (min-width: 768px) {
    .testimonial-img img.jeremy-mobile {
        top: -15rem;
    }

    .testimonial-img img.blur {
        inline-size: 100%;
        top: -14rem;
    }

    .testimonial-content {
        margin-top: 14rem;
        max-height: 37rem;
    }

    .testimonial-text, .curve-img {
        top: -23rem;
    }
}

/* testimonial desktop */
@media only screen and (min-width: 1024px) {
    .testimonial-container {
        margin-top: var(--spacing-24);
        padding: var(--spacing-40);        
    }

    .testimonial-content {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        margin-top: 0;
        padding: var(--spacing-80);
    }

    .testimonial-img img.jeremy-mobile {
        display: none;
    }

    .testimonial-img img.jeremy-desktop {
        display: block;
        position: relative;
        z-index: 1;
        width: 80%;
        top: 6.8rem;
        margin-bottom: -13.7rem;
    }

    .testimonial-text, .curve-img {
        top: 0;
    }

    .curve-img {
        left: -2rem;
        top: -5rem;
    }

    .testimonial-text {
        inline-size: 21rem;
    }

}

/* footer mobile */
.footer-container {
    background-color: var(--neutral-200);
    position: relative;
    padding-top: 13rem;
    padding-bottom: var(--spacing-24);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-32);
    max-inline-size: 70rem;
    margin: 0 auto;
}

.socials-container ul {
    display: inline-flex;
    list-style: none;
    gap: var(--spacing-24);
    align-items: center;
}

.footer-container p {
    font-size: var(--fs-8);
    line-height: var(--lh-8);
    letter-spacing: var(--ls-8);
    color: var(--neutral-500);
}

/* footer tablet */
@media only screen and (min-width: 768px) {
    .footer-container {
        padding: 23rem var(--spacing-40) var(--spacing-32);
        flex-direction: row;
        justify-content: space-between;
    }

    .testimonial-container {
        margin-bottom: -20rem;
    }
}

/* footer desktop */
@media only screen and (min-width: 1024px) {
    .testimonial-container {
        margin-bottom: 0;
    }

    .footer-container {
        margin-top: -10rem;
        padding-top: 25rem;
    }
}