/* ============================================================
   COMMON
   ============================================================ */

:root {
    --pink: #d81b60;
    --pink2: #ff3d81;
    --light: #fff1f6;
    --ink: #202124;
    --muted: #70757d;
    --line: #e9e9ed;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Helvetica,
        Arial,
        sans-serif,
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Segoe UI Symbol";

    font-feature-settings: normal;
    font-variation-settings: normal;

    -webkit-tap-highlight-color: transparent;

    overflow-x: hidden;
}

body {
    width: 100%;
    max-width: 100%;

    margin: 0;
    padding: 0;

    background: #fff8fa;

    color: var(--ink);

    font-size: 14px;
    line-height: 1.5;

    overflow-x: hidden;
}


/* ============================================================
   COMMON ELEMENT SAFETY
   ============================================================ */

img,
svg,
video,
canvas {
    max-width: 100%;
}

button,
input,
select,
textarea {
    box-sizing: border-box;
    max-width: 100%;
    font-family: inherit;
}

a {
    -webkit-tap-highlight-color: transparent;
}


/* ============================================================
   HEADER
   ============================================================ */

.site-header {
    width: 100%;
    height: 72px;

    background: #fff;

    border-bottom:
        1px solid
        #f0e5e9;

    position: sticky;

    top: 0;

    z-index: 1000;
}

.header-inner {
    width: 100%;
    max-width: 1180px;

    height: 100%;

    margin: 0 auto;

    padding:
        0
        24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    min-width: 0;
}


/* ============================================================
   LOGO
   ============================================================ */

.logo {
    display: inline-flex;

    align-items: center;

    min-width: 0;

    font-size: 26px;

    font-weight: 800;

    letter-spacing: -1.5px;

    color: #202124;

    text-decoration: none;

    white-space: nowrap;

    flex-shrink: 0;
}

.logo span {
    color: var(--pink);
}


/* ============================================================
   DESKTOP NAV
   ============================================================ */

nav {
    display: flex;

    align-items: center;

    gap: 8px;

    min-width: 0;
}

nav a {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 40px;

    padding:
        8px
        14px;

    border-radius: 9px;

    color: #555;

    background: transparent;

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

    white-space: nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        box-shadow .2s ease;
}

nav a:hover {
    color: var(--pink);
}

nav a.active {
    color: var(--pink);
}


/* ============================================================
   HEADER BUTTON
   ============================================================ */

.header-btn {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    background: var(--pink);

    color: #fff;

    text-decoration: none;

    padding:
        10px
        18px;

    border-radius: 22px;

    font-size: 13px;

    font-weight: 700;
}


/* ============================================================
   MOBILE MENU BUTTON
   ============================================================ */

.nav-toggle {
    display: none;

    width: 42px;
    height: 42px;

    flex:
        0 0
        42px;

    padding: 0;

    border:
        1px solid
        #f0dfe5;

    border-radius: 10px;

    background: #fff;

    cursor: pointer;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    gap: 5px;

    box-shadow:
        0 2px 8px
        rgba(0, 0, 0, .04);

    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    display: block;

    width: 20px;
    height: 2px;

    background: #333;

    border-radius: 10px;

    transition:
        transform .2s ease,
        opacity .2s ease;
}


/* ============================================================
   HAMBURGER ACTIVE
   ============================================================ */

.nav-toggle.active {
    background: var(--light);

    border-color: #f3cbd9;
}

.nav-toggle.active span:nth-child(1) {
    transform:
        translateY(7px)
        rotate(45deg);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform:
        translateY(-7px)
        rotate(-45deg);
}


/* ============================================================
   FOOTER
   ============================================================ */

footer {
    width: 100%;

    background: #fff;

    border-top:
        1px solid
        #f1e5e9;

    padding:
        28px
        24px;
}

.footer-inner {
    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding:
        0
        24px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    color: #999;

    font-size: 12px;

    min-width: 0;
}

.footer-inner > * {
    min-width: 0;
}


/* ============================================================
   GLOBAL BUTTON
   ============================================================ */

.btn {
    display: block;

    width: 100%;
    max-width: 100%;

    margin-top: 20px;

    padding: 14px;

    border: 0;

    border-radius: 11px;

    font: inherit;

    font-weight: 700;

    cursor: pointer;

    box-sizing: border-box;
}

.btn-primary {
    background:
        linear-gradient(
            135deg,
            var(--pink2),
            var(--pink)
        );

    color: #fff;

    box-shadow:
        0 7px 18px
        #d81b6030;
}

.btn:hover {
    opacity: .95;
}

.btn:disabled {
    opacity: .6;

    cursor: not-allowed;
}

.btn span {
    font-size: 18px;
}


/* ============================================================
   MOBILE NAV
   ============================================================ */

@media (max-width: 800px) {

    .site-header {
        height: 64px;
    }

    .header-inner {
        padding:
            0
            16px;
    }

    .logo {
        font-size: 23px;

        letter-spacing: -1.2px;
    }

    .nav-toggle {
        display: flex;
    }


    /* --------------------------------------------------------
       DROPDOWN
       -------------------------------------------------------- */

    nav {
        display: none;

        position: absolute;

        top:
            calc(100% + 8px);

        left: 12px;
        right: 12px;

        width: auto;

        padding: 8px;

        background: #fff;

        border:
            1px solid
            #f1e5e9;

        border-radius: 14px;

        box-shadow:
            0 12px 35px
            rgba(0, 0, 0, .10);

        flex-direction: column;

        align-items: stretch;

        gap: 3px;

        animation:
            mobileMenu .18s ease;

        z-index: 1100;
    }

    nav.open {
        display: flex;
    }


    /* --------------------------------------------------------
       MOBILE LINK
       -------------------------------------------------------- */

    nav a {
        width: 100%;

        min-height: 48px;

        padding:
            12px
            14px;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        border-radius: 10px;

        color: #333;

        background: transparent;

        font-size: 14px;

        font-weight: 600;

        text-decoration: none;

        white-space: normal;

        transition:
            background .15s ease,
            color .15s ease;
    }

    nav a:hover {
        color: var(--pink);

        background: var(--light);
    }

    nav a.active {
        color: var(--pink);

        background: var(--light);
    }

    nav a.active::after {
        content: "";

        width: 5px;
        height: 5px;

        margin-left: auto;

        border-radius: 50%;

        background: var(--pink);

        flex-shrink: 0;
    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    .footer-inner {
        padding: 0;
    }

}


/* ============================================================
   MOBILE MENU ANIMATION
   ============================================================ */

@keyframes mobileMenu {

    from {
        opacity: 0;

        transform:
            translateY(-6px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 520px) {

    .header-inner {
        padding:
            0
            14px;
    }

    .logo {
        font-size: 22px;

        letter-spacing: -1.2px;
    }

    .nav-toggle {
        width: 40px;
        height: 40px;

        flex-basis: 40px;
    }

    nav {
        left: 10px;
        right: 10px;

        top:
            calc(100% + 7px);

        padding: 7px;

        border-radius: 13px;
    }

    nav a {
        min-height: 46px;

        padding:
            11px
            13px;

        font-size: 14px;
    }


    /* --------------------------------------------------------
       FOOTER
       -------------------------------------------------------- */

    footer {
        padding:
            28px
            16px;
    }

    .footer-inner {
        width: 100%;

        padding: 0;

        display: flex;

        flex-direction: column;

        justify-content: center;

        align-items: center;

        text-align: center;

        gap: 6px;
    }

    .footer-inner span {
        display: block;

        width: 100%;

        margin: 0;

        text-align: center;
    }

}


/* ============================================================
   VERY SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {

    .header-inner {
        padding:
            0
            12px;
    }

    .logo {
        font-size: 21px;

        letter-spacing: -1px;
    }

    .nav-toggle {
        width: 38px;
        height: 38px;

        flex-basis: 38px;
    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior: auto !important;

        transition-duration:
            .01ms !important;

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;
    }

}