/* =========================================
   RESET
========================================= */

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

html,
body {
    width: 100%;
    min-height: 100%;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #333333;
}


/* =========================================
   VARIABLES
========================================= */

:root {
    --pink: #f3498b;
    --pink-dark: #e8387d;
    --pink-light: #fff0f6;

    --text: #333333;
    --text-light: #777777;

    --white: #ffffff;
}


/* =========================================
   PAGE
========================================= */

.page-wrapper {
    min-height: 100vh;
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;

    background:
        radial-gradient(
            circle at 10% 20%,
            rgba(243, 73, 139, 0.04),
            transparent 350px
        ),
        radial-gradient(
            circle at 90% 85%,
            rgba(243, 73, 139, 0.05),
            transparent 400px
        ),
        #ffffff;
}


/* =========================================
   TOP LINE
========================================= */

.top-line {
    width: 100%;
    height: 7px;
    background: var(--pink);
}


/* =========================================
   DECORATIVE CIRCLES
========================================= */

.circle {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(243, 73, 139, 0.12);
    pointer-events: none;
}

.circle-1 {
    width: 400px;
    height: 400px;

    left: -220px;
    top: 20%;
}

.circle-2 {
    width: 550px;
    height: 550px;

    right: -300px;
    bottom: -150px;
}

.circle-3 {
    width: 150px;
    height: 150px;

    right: 12%;
    top: 14%;

    border-width: 25px;
    border-color: rgba(243, 73, 139, 0.025);
}


/* =========================================
   MAIN CONTAINER
========================================= */

.construction-container {

    flex: 1;

    width: 100%;

    max-width: 850px;

    margin: 0 auto;

    padding:
        clamp(35px, 6vh, 80px)
        25px
        40px;

    display: flex;

    flex-direction: column;

    justify-content: center;
    align-items: center;

    text-align: center;

    position: relative;
    z-index: 2;
}


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

.logo-wrapper {
    margin-bottom: 38px;
}

.logo {
    display: block;

    width: clamp(190px, 25vw, 280px);

    max-width: 100%;

    height: auto;

    margin: auto;
}


/* =========================================
   CONSTRUCTION ICON
========================================= */

.icon-wrapper {
    margin-bottom: 28px;
}

.construction-icon {

    width: 100px;
    height: 85px;

    position: relative;

    margin: auto;
}


/* simple decorative gears */

.gear {
    position: absolute;

    border-radius: 50%;

    border: 7px solid var(--pink);

    animation: rotateGear 10s linear infinite;
}

.gear::before,
.gear::after,
.gear span::before,
.gear span::after {

    content: "";

    position: absolute;

    background: var(--pink);

    border-radius: 2px;
}


/* Large gear */

.gear-large {

    width: 58px;
    height: 58px;

    left: 5px;
    top: 5px;
}

.gear-large::before {

    width: 14px;
    height: 70px;

    left: 15px;
    top: -13px;
}

.gear-large::after {

    width: 70px;
    height: 14px;

    left: -13px;
    top: 15px;
}

.gear-large span::before {

    width: 14px;
    height: 70px;

    left: 15px;
    top: -13px;

    transform: rotate(45deg);
}

.gear-large span::after {

    width: 14px;
    height: 70px;

    left: 15px;
    top: -13px;

    transform: rotate(-45deg);
}


/* Small gear */

.gear-small {

    width: 38px;
    height: 38px;

    right: 5px;
    bottom: 0;

    border-width: 5px;

    animation-direction: reverse;
    animation-duration: 7s;
}

.gear-small::before {

    width: 10px;
    height: 48px;

    left: 9px;
    top: -10px;
}

.gear-small::after {

    width: 48px;
    height: 10px;

    left: -10px;
    top: 9px;
}

.gear-small span::before {

    width: 10px;
    height: 48px;

    left: 9px;
    top: -10px;

    transform: rotate(45deg);
}

.gear-small span::after {

    width: 10px;
    height: 48px;

    left: 9px;
    top: -10px;

    transform: rotate(-45deg);
}


/* Gear center circles */

.gear span {
    position: absolute;

    width: 18px;
    height: 18px;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    background: #ffffff;

    z-index: 5;
}

.gear-small span {

    width: 12px;
    height: 12px;
}


/* Keep center clean */

.gear span::before,
.gear span::after {
    z-index: -1;
}


/* Animation */

@keyframes rotateGear {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}


/* =========================================
   CONTENT
========================================= */

.content {
    max-width: 720px;
}

.small-title {

    display: block;

    color: var(--pink);

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 2.5px;

    margin-bottom: 14px;
}

h1 {

    font-size: clamp(34px, 5vw, 58px);

    line-height: 1.1;

    color: var(--text);

    font-weight: 700;

    margin-bottom: 22px;
}

.description {

    max-width: 620px;

    margin: 0 auto;

    font-size: clamp(16px, 2vw, 19px);

    line-height: 1.7;

    color: var(--text-light);
}


/* =========================================
   DIVIDER
========================================= */

.divider {

    width: 100%;

    display: flex;

    justify-content: center;

    margin: 28px 0 22px;
}

.divider span {

    width: 55px;

    height: 3px;

    border-radius: 10px;

    background: var(--pink);
}


/* =========================================
   THANK YOU
========================================= */

.thank-you {

    color: #555555;

    font-size: 15px;

    margin-bottom: 18px;
}


/* =========================================
   WEBSITE LINK
========================================= */

.website-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 46px;

    padding: 0 28px;

    border-radius: 30px;

    color: var(--pink);

    border: 1px solid var(--pink);

    text-decoration: none;

    font-size: 15px;

    font-weight: 600;

    transition: 0.25s ease;
}

.website-link:hover {

    color: #ffffff;

    background: var(--pink);

    box-shadow:
        0 10px 25px
        rgba(243, 73, 139, 0.18);

    transform: translateY(-2px);
}


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

footer {

    position: relative;

    z-index: 2;

    width: 100%;

    padding: 20px 25px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 15px;

    flex-wrap: wrap;

    border-top: 1px solid #eeeeee;

    color: #999999;

    font-size: 12px;

    text-align: center;
}

.footer-separator {

    width: 1px;

    height: 12px;

    background: #dddddd;
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 768px) {

    .construction-container {

        padding-left: 22px;
        padding-right: 22px;
    }

    .logo-wrapper {
        margin-bottom: 32px;
    }

    h1 {

        font-size: 38px;
    }

    .description {

        font-size: 16px;
    }

    .circle-1 {

        width: 250px;
        height: 250px;

        left: -170px;
    }

    .circle-2 {

        width: 350px;
        height: 350px;

        right: -220px;
    }
}


@media (max-width: 480px) {

    .top-line {
        height: 5px;
    }

    .construction-container {

        padding-top: 35px;
        padding-bottom: 35px;
    }

    .logo {

        width: 200px;
    }

    .icon-wrapper {

        transform: scale(0.85);

        margin-bottom: 18px;
    }

    .small-title {

        font-size: 11px;

        letter-spacing: 1.8px;
    }

    h1 {

        font-size: 32px;

        margin-bottom: 17px;
    }

    .description {

        font-size: 15px;

        line-height: 1.6;
    }

    .website-link {

        width: 100%;

        max-width: 260px;
    }

    footer {

        flex-direction: column;

        gap: 5px;

        padding: 15px 20px;
    }

    .footer-separator {

        display: none;
    }
}


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

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

    .gear {
        animation: none;
    }

    .website-link {
        transition: none;
    }
}