/* ================================================================
   CO BILLING - PREMIUM SPLASH SCREEN
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');


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

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


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


body {
    font-family: "Manrope", sans-serif;
    background: #061525;
    overflow: hidden;
}


/* ================================================================
   MAIN SCREEN
   ================================================================ */

.splash-screen {

    position: fixed;
    inset: 0;

    width: 100%;
    height: 100dvh;

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

    overflow: hidden;

    color: #ffffff;

    background:

        radial-gradient(
            circle at 50% 45%,
            rgba(20, 121, 209, 0.22) 0%,
            rgba(20, 121, 209, 0.08) 22%,
            transparent 48%
        ),

        linear-gradient(
            135deg,
            #040d18 0%,
            #061525 45%,
            #092541 100%
        );

    transition:
        opacity 0.5s ease,
        transform 0.5s ease;
}


/* ================================================================
   MOVING LIGHT
   ================================================================ */

.ambient {

    position: absolute;

    width: 450px;
    height: 450px;

    border-radius: 50%;

    filter: blur(100px);

    pointer-events: none;

    opacity: 0.5;

    animation:
        floatLight 10s ease-in-out infinite alternate;
}


.ambient-one {

    top: -260px;
    left: -160px;

    background:
        rgba(13, 94, 166, 0.55);
}


.ambient-two {

    right: -220px;
    bottom: -250px;

    background:
        rgba(36, 148, 232, 0.35);

    animation-delay: -4s;
}


.ambient-three {

    width: 250px;
    height: 250px;

    left: 50%;
    top: 40%;

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

    background:
        rgba(20, 121, 209, 0.12);

    animation-delay: -7s;
}


@keyframes floatLight {

    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(50px, 25px) scale(1.1);
    }

    100% {
        transform: translate(-20px, 60px) scale(0.95);
    }

}


/* ================================================================
   GRID
   ================================================================ */

.grid-background {

    position: absolute;
    inset: 0;

    opacity: 0.08;

    background-image:

        linear-gradient(
            rgba(255, 255, 255, 0.5) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.5) 1px,
            transparent 1px
        );

    background-size: 55px 55px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 10%,
            transparent 75%
        );

    animation:
        gridMove 20s linear infinite;
}


@keyframes gridMove {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 55px 55px;
    }

}


/* ================================================================
   SIDE LINES
   ================================================================ */

.vertical-line {

    position: absolute;

    top: 0;

    width: 1px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(36, 148, 232, 0.35),
            transparent
        );

    opacity: 0.7;
}


.line-left {
    left: 8%;
}


.line-right {
    right: 8%;
}


/* ================================================================
   TOP COMPANY NAME
   ================================================================ */

.top-brand {

    position: absolute;

    top: 42px;
    left: 50%;

    transform: translateX(-50%);

    display: flex;
    align-items: center;

    gap: 12px;

    white-space: nowrap;

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 0.24em;

    color:
        rgba(255, 255, 255, 0.72);

    animation:
        topReveal 1s ease both;
}


.brand-line {

    width: 28px;
    height: 1px;

    background: #2494e8;

    box-shadow:
        0 0 10px
        rgba(36, 148, 232, 0.7);
}


.brand-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: #2494e8;

    box-shadow:
        0 0 12px
        rgba(36, 148, 232, 0.9);

    animation:
        pulseDot 2s ease-in-out infinite;
}


@keyframes topReveal {

    from {
        opacity: 0;
        transform:
            translate(-50%, -20px);
    }

    to {
        opacity: 1;
        transform:
            translate(-50%, 0);
    }

}


@keyframes pulseDot {

    0%,
    100% {
        box-shadow:
            0 0 5px
            rgba(36, 148, 232, 0.5);
    }

    50% {
        box-shadow:
            0 0 18px
            rgba(36, 148, 232, 1);
    }

}


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

.splash-content {

    position: relative;

    z-index: 10;

    width: min(800px, 90%);

    text-align: center;

}


/* ================================================================
   SYSTEM LABEL
   ================================================================ */

.system-label {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 15px;

    margin-bottom: 22px;

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 0.32em;

    color:
        rgba(255, 255, 255, 0.38);

    animation:
        fadeUp 0.8s ease 0.15s both;
}


.label-line {

    width: 35px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #2494e8
        );
}


.label-line:last-child {

    background:
        linear-gradient(
            90deg,
            #2494e8,
            transparent
        );
}


/* ================================================================
   MAIN TITLE
   ================================================================ */

.main-title {

    display: flex;

    align-items: baseline;

    justify-content: center;

    gap: 14px;

    line-height: 0.95;

    letter-spacing: -0.06em;

}


.title-co {

    font-size:
        clamp(70px, 11vw, 115px);

    font-weight: 800;

    color: #ffffff;

    text-shadow:
        0 0 50px
        rgba(36, 148, 232, 0.15);

    animation:
        titleLeft 1s
        cubic-bezier(.16,1,.3,1)
        0.2s both;
}


.title-billing {

    font-size:
        clamp(52px, 8vw, 82px);

    font-weight: 400;

    color: #2494e8;

    text-shadow:
        0 0 35px
        rgba(36, 148, 232, 0.35);

    animation:
        titleRight 1s
        cubic-bezier(.16,1,.3,1)
        0.35s both;
}


@keyframes titleLeft {

    from {
        opacity: 0;
        transform:
            translateX(-50px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }

}


@keyframes titleRight {

    from {
        opacity: 0;
        transform:
            translateX(50px);
    }

    to {
        opacity: 1;
        transform:
            translateX(0);
    }

}


/* ================================================================
   UNDERLINE
   ================================================================ */

.title-underline {

    position: relative;

    width: 300px;
    max-width: 65%;

    height: 2px;

    margin: 25px auto 0;

    overflow: hidden;

    background:
        rgba(255, 255, 255, 0.08);
}


.title-underline span {

    position: absolute;

    left: -40%;

    width: 40%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            #1479d1,
            #56b9f5,
            transparent
        );

    box-shadow:
        0 0 15px
        rgba(36, 148, 232, 0.8);

    animation:
        underlineMove 2.5s ease-in-out infinite;
}


@keyframes underlineMove {

    0% {
        left: -40%;
    }

    50% {
        left: 100%;
    }

    100% {
        left: 100%;
    }

}


/* ================================================================
   QUOTES
   ================================================================ */

.quote-container {

    position: relative;

    height: 65px;

    margin-top: 35px;

}


.quote {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    font-size:
        clamp(13px, 1.8vw, 16px);

    font-weight: 500;

    line-height: 1.7;

    letter-spacing: 0.02em;

    color:
        rgba(255, 255, 255, 0.58);

    opacity: 0;

    transform:
        translateY(15px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}


.quote.active {

    opacity: 1;

    transform:
        translateY(0);
}


/* ================================================================
   ACTIONS
   ================================================================ */

.action-area {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 15px;

    margin-top: 32px;

    animation:
        fadeUp 0.8s ease 0.7s both;
}


/* ================================================================
   INSTALL BUTTON
   ================================================================ */

.install-button {

    position: relative;

    width: 250px;
    height: 52px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 13px;

    border: 1px solid
        rgba(74, 178, 245, 0.55);

    border-radius: 8px;

    background:

        linear-gradient(
            135deg,
            #0d5ea6,
            #1479d1
        );

    color: #ffffff;

    font-family: inherit;

    font-size: 13px;

    font-weight: 700;

    letter-spacing: 0.02em;

    cursor: pointer;

    overflow: hidden;

    box-shadow:

        0 12px 35px
        rgba(13, 94, 166, 0.28),

        inset 0 1px 0
        rgba(255, 255, 255, 0.15);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}


.install-button::before {

    content: "";

    position: absolute;

    top: 0;
    left: -100%;

    width: 70%;
    height: 100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,0.2),
            transparent
        );

    transform:
        skewX(-20deg);

    animation:
        shine 3s ease-in-out infinite;
}


.install-button:hover {

    transform:
        translateY(-3px);

    box-shadow:

        0 18px 45px
        rgba(20, 121, 209, 0.4),

        inset 0 1px 0
        rgba(255, 255, 255, 0.2);
}


.install-button:active {

    transform:
        translateY(0);
}


.install-button:disabled {

    opacity: 0.7;

    cursor: wait;
}


.install-icon {

    font-size: 20px;

    line-height: 1;
}


.install-arrow {

    font-size: 18px;

    transition:
        transform 0.25s ease;
}


.install-button:hover
.install-arrow {

    transform:
        translateX(5px);
}


@keyframes shine {

    0% {
        left: -100%;
    }

    40% {
        left: 140%;
    }

    100% {
        left: 140%;
    }

}


/* ================================================================
   SKIP
   ================================================================ */

.skip-button {

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 8px 12px;

    border: none;

    background: transparent;

    color:
        rgba(255, 255, 255, 0.38);

    font-family: inherit;

    font-size: 11px;

    font-weight: 600;

    cursor: pointer;

    transition:
        color 0.25s ease;
}


.skip-button:hover {

    color:
        rgba(255, 255, 255, 0.85);
}


.skip-arrow {

    transition:
        transform 0.25s ease;
}


.skip-button:hover
.skip-arrow {

    transform:
        translateX(5px);
}


/* ================================================================
   LOADING
   ================================================================ */

.loading-area {

    width: 160px;

    margin:
        42px auto 0;

    animation:
        fadeUp 0.8s ease 0.9s both;
}


.loading-track {

    width: 100%;

    height: 2px;

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

    overflow: hidden;
}


.loading-progress {

    width: 0;

    height: 100%;

    background:
        linear-gradient(
            90deg,
            #0d5ea6,
            #2494e8
        );

    box-shadow:
        0 0 10px
        rgba(36,148,232,0.8);

    transition:
        width 2s
        cubic-bezier(.16,1,.3,1);
}


.loading-status {

    margin-top: 9px;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.3em;

    color:
        rgba(255,255,255,0.22);
}


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

.bottom-footer {

    position: absolute;

    bottom: 30px;

    left: 50%;

    transform:
        translateX(-50%);

    display: flex;

    align-items: center;

    gap: 10px;

    white-space: nowrap;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.2em;

    color:
        rgba(255,255,255,0.2);
}


.footer-separator {

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        #1479d1;
}


/* ================================================================
   CORNERS
   ================================================================ */

.corner {

    position: absolute;

    width: 30px;
    height: 30px;

    opacity: 0.5;
}


.corner-tl {

    top: 25px;
    left: 25px;

    border-top:
        1px solid #1479d1;

    border-left:
        1px solid #1479d1;
}


.corner-tr {

    top: 25px;
    right: 25px;

    border-top:
        1px solid #1479d1;

    border-right:
        1px solid #1479d1;
}


.corner-bl {

    bottom: 25px;
    left: 25px;

    border-bottom:
        1px solid #1479d1;

    border-left:
        1px solid #1479d1;
}


.corner-br {

    bottom: 25px;
    right: 25px;

    border-bottom:
        1px solid #1479d1;

    border-right:
        1px solid #1479d1;
}


/* ================================================================
   GENERAL ANIMATION
   ================================================================ */

@keyframes fadeUp {

    from {

        opacity: 0;

        transform:
            translateY(20px);

    }

    to {

        opacity: 1;

        transform:
            translateY(0);

    }

}


/* ================================================================
   EXIT
   ================================================================ */

.splash-exit {

    opacity: 0;

    transform:
        scale(1.025);

    pointer-events: none;
}


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

@media (max-width: 600px) {

    .top-brand {

        top: 28px;

        font-size: 7px;

        letter-spacing: 0.18em;

        gap: 8px;

    }


    .brand-line {

        width: 17px;

    }


    .brand-dot {

        width: 3px;
        height: 3px;

    }


    .system-label {

        gap: 8px;

        margin-bottom: 18px;

        font-size: 6.5px;

        letter-spacing: 0.2em;

    }


    .label-line {

        width: 20px;

    }


    .main-title {

        gap: 8px;

    }


    .title-co {

        font-size: 62px;

    }


    .title-billing {

        font-size: 47px;

    }


    .title-underline {

        width: 220px;

        margin-top: 19px;

    }


    .quote-container {

        height: 68px;

        margin-top: 28px;

    }


    .quote {

        font-size: 12px;

    }


    .action-area {

        margin-top: 28px;

    }


    .install-button {

        width: 225px;

        height: 49px;

    }


    .loading-area {

        margin-top: 32px;

    }


    .bottom-footer {

        bottom: 17px;

        font-size: 5px;

        letter-spacing: 0.12em;

        gap: 6px;

    }


    .corner {

        width: 20px;

        height: 20px;

    }


    .corner-tl,
    .corner-tr {

        top: 17px;

    }


    .corner-bl,
    .corner-br {

        bottom: 17px;

    }


    .corner-tl,
    .corner-bl {

        left: 17px;

    }


    .corner-tr,
    .corner-br {

        right: 17px;

    }

}


/* ================================================================
   SMALL HEIGHT DEVICES
   ================================================================ */

@media (max-height: 650px) {

    .top-brand {

        top: 18px;

    }


    .system-label {

        margin-bottom: 12px;

    }


    .quote-container {

        margin-top: 20px;

    }


    .action-area {

        margin-top: 20px;

    }


    .loading-area {

        margin-top: 22px;

    }


    .bottom-footer {

        display: none;

    }

}