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

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


/* =========================================
   HTML + BODY
   SINGLE SCREEN / NO SCROLL
========================================= */

html,
body {
    width: 100%;
    height: 100%;

    min-height: 100%;
    max-width: 100%;

    overflow: hidden;
}


/* =========================================
   BODY
========================================= */

body {
    display: flex;

    justify-content: center;

    align-items: center;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    background:
        radial-gradient(circle at 15% 20%,
            rgba(255, 190, 70, 0.12),
            transparent 30%),

        radial-gradient(circle at 85% 80%,
            rgba(80, 130, 255, 0.14),
            transparent 30%),

        #080b12;

    color: white;
}


/* =========================================
   ANIMATED BACKGROUND CIRCLE
========================================= */

.background-circle {
    position: fixed;

    top: 50%;
    left: 50%;

    width: min(500px, 90vw);
    height: min(500px, 90vw);

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

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 50%;

    animation:
        rotate 25s linear infinite;

    pointer-events: none;
}


.background-circle::before,
.background-circle::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(255, 255, 255, 0.06);
}


.background-circle::before {
    inset: 10%;
}


.background-circle::after {
    inset: 22%;
}


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

.container {
    position: relative;

    z-index: 2;

    width: min(90vw, 720px);

    max-width: 720px;

    max-height: 96dvh;

    padding: clamp(20px,
            5vh,
            60px) clamp(20px,
            5vw,
            40px);

    text-align: center;

    overflow: hidden;

    background: rgba(255, 255, 255, 0.06);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 28px;

    backdrop-filter: blur(18px);

    box-shadow:
        0 25px 80px rgba(0, 0, 0, 0.4);
}


/* =========================================
   HALOVIA LABS LOGO
========================================= */

.brand-logo {
    display: flex;

    justify-content: center;

    align-items: center;

    margin-bottom: clamp(12px,
            3vh,
            30px);

    text-decoration: none;
}


.brand-logo img {
    display: block;

    width: min(24%,
            380px);

    min-width: 90px;

    max-width: 180px;

    height: auto;

    border-radius: 6%;

    object-fit: contain;

    transition:
        transform 0.3s ease;
}


.brand-logo:hover img {
    transform: scale(1.03);
}


/* =========================================
   BADGE
========================================= */

.badge {
    display: inline-block;

    max-width: 100%;

    padding: 8px 18px;

    border-radius: 30px;

    background:
        rgba(255, 209, 102, 0.12);

    border:
        1px solid rgba(255, 209, 102, 0.35);

    color: #ffd166;

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;

    margin-bottom: clamp(12px,
            2.5vh,
            25px);
}


/* =========================================
   MAIN HEADING
========================================= */

h1 {
    font-size:
        clamp(24px,
            6vw,
            39px);

    line-height: 1.05;

    margin-bottom: clamp(12px,
            2.5vh,
            22px);
}


h1 span {
    background:
        linear-gradient(90deg,
            #ffd166,
            #ffffff,
            #8ab4ff);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =========================================
   DESCRIPTION
========================================= */

p {
    width: 100%;

    max-width: 560px;

    margin: 0 auto;

    color: #b8bfce;

    font-size:
        clamp(14px,
            2.5vw,
            18px);

    line-height: 1.5;
}


/* =========================================
   PROGRESS BAR
========================================= */

.progress {
    width: 100%;

    max-width: 420px;

    height: 6px;

    margin:
        clamp(18px,
            4vh,
            35px) auto 0;

    background:
        rgba(255, 255, 255, 0.1);

    border-radius: 10px;

    overflow: hidden;
}


.progress-bar {
    width: 68%;

    height: 100%;

    background:
        linear-gradient(90deg,
            #ffd166,
            #ffffff);

    border-radius: 10px;

    animation:
        loading 3s ease-in-out infinite alternate;
}


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

.footer {
    margin-top:
        clamp(15px,
            3vh,
            35px);

    font-size: 13px;

    color: #737b8c;
}


/* =========================================
   ANIMATIONS
========================================= */

@keyframes rotate {

    from {
        transform:
            translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }

}


@keyframes loading {

    from {
        width: 45%;
    }

    to {
        width: 82%;
    }

}


/* =========================================
   MOBILE DEVICES
========================================= */

@media (max-width: 600px) {

    .container {
        width: 92vw;

        max-height: 94dvh;

        padding:
            22px 18px;
    }


    .brand-logo img {
        width: 24%;

        min-width: 75px;

        max-width: 120px;
    }


    .badge {
        font-size: 10px;

        padding:
            6px 12px;

        letter-spacing: 0.5px;
    }


    p {
        font-size: 14px;

        line-height: 1.45;
    }


    .footer {
        font-size: 11px;
    }

}


/* =========================================
   SHORT HEIGHT SCREENS
========================================= */

@media (max-height: 700px) {

    .container {
        padding-top: 16px;

        padding-bottom: 16px;
    }


    .brand-logo {
        margin-bottom: 10px;
    }


    .badge {
        margin-bottom: 10px;
    }


    h1 {
        margin-bottom: 10px;
    }


    .progress {
        margin-top: 16px;
    }


    .footer {
        margin-top: 12px;
    }

}


/* =========================================
   VERY SHORT SCREENS
========================================= */

@media (max-height: 550px) {

    .container {
        padding:
            12px 18px;
    }


    .brand-logo img {
        max-width: 90px;
    }


    .badge {
        display: none;
    }


    h1 {
        font-size: 26px;
    }


    p {
        font-size: 13px;
    }


    .progress {
        margin-top: 12px;
    }


    .footer {
        margin-top: 10px;
    }

}