*{margin:0;padding:0;box-sizing:border-box}
body{position:relative;min-height:100vh;font-family:Inter,sans-serif;color:#fff;overflow-x:hidden;overflow-y:auto}
.bg{position:fixed;inset:0;background:url('background.jpg') center/cover no-repeat;animation:zoom 30s ease-in-out infinite alternate}
.overlay{position:fixed;inset:0;background:linear-gradient(90deg,rgba(7,12,20,.88),rgba(7,12,20,.72)40%,rgba(7,12,20,.28))}
.card{position:relative;max-width:530px;margin:4vh 0 0 7vw;padding:52px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);backdrop-filter:blur(20px);border-radius:24px;box-shadow:0 25px 60px rgba(0,0,0,.45)}
.card:before{content:'';position:absolute;left:0;right:0;top:0;height:82px;background:linear-gradient(to bottom,rgba(255,255,255,.09),transparent);border-radius:24px 24px 0 0;pointer-events:none}
.logo{width:280px;margin-bottom:55px}
h1{font-family:'Cormorant Garamond',serif;font-size:72px;line-height:.95;font-weight:500}
.line{width:70px;height:3px;background:#2ea9ff;margin:28px 0}
p{font-size:20px;line-height:1.7;color:#e9eef4}
.services{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:36px}
.services span{width:340px;max-width:100%;text-align:center;padding:12px 18px;border:1px solid rgba(255,255,255,.25);border-radius:999px;background:rgba(255,255,255,.05);text-transform:uppercase;font-size:13px;letter-spacing:2px;transition:.25s}
.services span:hover{border-color:#2ea9ff;background:rgba(46,169,255,.08);transform:translateY(-2px)}
.launch{margin-top:34px;color:#57bbff;font-size:14px}
.email{margin-top:12px}.email a{color:#fff;text-decoration:none}.email a:hover{color:#57bbff;text-decoration:underline}
footer{position:absolute;left:50%;transform:translateX(-50%);bottom:80px;max-width:820px;width:100%;padding:0 20px;text-align:center;color:rgba(255,255,255,.60);font-size:9px;line-height:1.3}
.footer-divider{width:240px;height:2px;background:#2ea9ff;opacity:.55;margin:0 auto 16px;border-radius:2px}
footer strong{color:#fff;font-size:10px;font-weight:500}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.06)}}


/* MOOVIO PAGE LOADER — CSS ONLY */
.page-loader{
    position:fixed;
    inset:0;
    z-index:9999;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#07101a;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    animation:pageLoaderHide .7s ease 1.35s forwards;
}

.loader-inner{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transform:translateY(-2vh);
    animation:loaderEnter 1s ease both;
}

.loader-mark{
    width:82px;
    height:82px;
    object-fit:contain;
    filter:drop-shadow(0 0 12px rgba(46,169,255,.22));
    animation:loaderMark 1.8s ease-in-out infinite;
}

.loader-line{
    position:relative;
    width:120px;
    height:1px;
    margin-top:24px;
    overflow:hidden;
    background:rgba(255,255,255,.13);
}

.loader-line span{
    position:absolute;
    top:0;
    left:-45%;
    width:45%;
    height:100%;
    background:#2ea9ff;
    box-shadow:0 0 8px rgba(46,169,255,.55);
    animation:loaderLine 1.25s ease-in-out infinite;
}

@keyframes pageLoaderHide{
    0%{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }
    99%{
        opacity:0;
        visibility:visible;
        pointer-events:none;
    }
    100%{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }
}

@keyframes loaderEnter{
    from{
        opacity:0;
        transform:translateY(8px) scale(.96);
    }
    to{
        opacity:1;
        transform:translateY(-2vh) scale(1);
    }
}

@keyframes loaderMark{
    0%,100%{
        transform:scale(1);
        opacity:.82;
    }
    50%{
        transform:scale(1.06);
        opacity:1;
    }
}

@keyframes loaderLine{
    0%{left:-45%}
    100%{left:100%}
}

@media(prefers-reduced-motion:reduce){
    .page-loader{
        animation:none;
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    .loader-inner,
    .loader-mark,
    .loader-line span{
        animation:none;
    }
}


/* =========================================================
   COMPACT DESKTOP VIEWPORTS
   Keeps the complete card visible at 100% browser zoom
   on common 1366x768 / 1440x800 screens.
   ========================================================= */

@media (max-height:800px) and (min-width:901px){

    .card{
        margin-top:18px;
        padding:28px 32px 25px;
    }

    .logo{
        width:205px;
        margin-bottom:24px;
    }

    h1{
        font-size:52px;
        line-height:.9;
    }

    .line{
        margin:15px 0;
    }

    .intro{
        font-size:15px;
        line-height:1.42;
    }

    .services{
        margin-top:18px;
        gap:7px;
    }

    .services span{
        padding:8px 16px;
        font-size:10px;
        letter-spacing:1.5px;
    }

    .launch{
        margin-top:17px;
    }

    .email{
        margin-top:5px;
    }

    footer{
        bottom:17px;
        font-size:7px;
        line-height:1.2;
    }

    footer strong{
        font-size:7px;
    }

    .footer-divider{
        margin-bottom:8px;
        width:150px;
    }
}

/* Extra compression only for genuinely short desktop screens. */
@media (max-height:720px) and (min-width:901px){

    .card{
        margin-top:10px;
        padding:22px 30px 20px;
    }

    .logo{
        width:180px;
        margin-bottom:17px;
    }

    h1{
        font-size:45px;
    }

    .line{
        margin:11px 0;
    }

    .intro{
        font-size:13px;
        line-height:1.35;
    }

    .services{
        margin-top:13px;
        gap:5px;
    }

    .services span{
        padding:6px 14px;
        font-size:9px;
    }

    .launch{
        margin-top:13px;
        font-size:12px;
    }

    .email{
        margin-top:3px;
    }

    .email a{
        font-size:13px;
    }

    footer{
        bottom:10px;
        font-size:6.5px;
    }

    footer strong{
        font-size:6.5px;
    }

    .footer-divider{
        margin-bottom:6px;
        width:130px;
    }
}


/* =========================================================
   MOBILE / SMALL-SCREEN LAYOUT
   Restores independent mobile scrolling so every element
   remains readable regardless of device height.
   ========================================================= */

@media (max-width:900px){

    html{
        min-height:100%;
        overflow-x:hidden;
    }

    body{
        min-height:100svh;
        height:auto;
        overflow-x:hidden;
        overflow-y:auto;
    }

    .bg{
        position:fixed;
        inset:0;
    }

    .overlay{
        position:fixed;
        inset:0;
    }

    .card{
        position:relative;
        width:auto;
        max-width:none;
        margin:24px;
        padding:32px;
        border-radius:22px;
    }

    .logo{
        width:200px;
        max-width:100%;
        margin-bottom:38px;
    }

    h1{
        font-size:48px;
        line-height:.95;
    }

    .line{
        margin:22px 0;
    }

    p{
        font-size:17px;
        line-height:1.55;
    }

    .services{
        margin-top:27px;
        gap:10px;
    }

    .services span{
        width:100%;
        padding:11px 16px;
        font-size:11px;
        letter-spacing:1.6px;
    }

    .launch{
        margin-top:26px;
    }

    .email{
        margin-top:8px;
    }

    footer{
        position:relative;
        left:auto;
        bottom:auto;
        transform:none;
        width:auto;
        max-width:900px;
        margin:26px 24px 18px;
        padding:0 8px;
        font-size:8px;
        line-height:1.45;
    }

    footer strong{
        font-size:8px;
    }

    .footer-divider{
        width:150px;
        height:1px;
        margin:0 auto 10px;
    }
}

/* Very narrow phones */
@media (max-width:430px){

    .card{
        margin:16px;
        padding:26px 22px 25px;
        border-radius:20px;
    }

    .logo{
        width:175px;
        margin-bottom:30px;
    }

    h1{
        font-size:42px;
    }

    .line{
        margin:18px 0;
    }

    p{
        font-size:16px;
    }

    .services{
        margin-top:22px;
        gap:8px;
    }

    .services span{
        padding:10px 12px;
        font-size:10px;
        letter-spacing:1.35px;
    }

    .launch{
        margin-top:22px;
    }

    footer{
        margin:22px 16px 16px;
        font-size:7px;
    }

    footer strong{
        font-size:7px;
    }
}

/* Short mobile screens: keep the layout compact, but still scrollable. */
@media (max-width:900px) and (max-height:700px){

    .card{
        margin:16px;
        padding:24px 26px;
    }

    .logo{
        width:170px;
        margin-bottom:24px;
    }

    h1{
        font-size:40px;
    }

    .line{
        margin:15px 0;
    }

    p{
        font-size:15px;
        line-height:1.45;
    }

    .services{
        margin-top:20px;
        gap:7px;
    }

    .services span{
        padding:9px 12px;
    }

    .launch{
        margin-top:19px;
    }

    footer{
        margin-top:20px;
        margin-bottom:14px;
    }
}