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

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

:root{
    --primary:#c00000;
    --primary-hover:#a00000;
    --text:#222;
}

body{
    font-family: Arial, Helvetica, sans-serif;
    min-height:100vh;
    overflow:hidden;
    background:#f8f8f8;
}

/* ==========================
   BACKGROUND
========================== */

.background{
    position:fixed;
    inset:0;
    background:url("bg.webp") center center / cover no-repeat;
    opacity:.75;
    animation: floatBackground 18s ease-in-out infinite;
}

.background::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.35);
}

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

.container{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:2rem;
    position:relative;
    z-index:10;
}

.content{
    text-align:center;
    max-width:900px;
    animation: fadeUp 1.4s ease forwards;
}

h1{
    color:var(--text);
    font-size:clamp(2rem,5vw,4.5rem);
    line-height:1.15;
    margin-bottom:1.5rem;
    font-weight:700;
}

p{
    color:#555;
    font-size:clamp(1rem,2vw,1.3rem);
    margin-bottom:2rem;
}

.btn{
    display:inline-block;
    background:var(--primary);
    color:#fff;
    text-decoration:none;
    padding:16px 34px;
    border-radius:8px;
    font-weight:700;
    font-size:1rem;
    transition:all .3s ease;
    box-shadow:0 10px 25px rgba(192,0,0,.25);
}

.btn:hover{
    background:var(--primary-hover);
    transform:translateY(-3px);
    box-shadow:0 14px 30px rgba(192,0,0,.35);
}

.btn:active{
    transform:translateY(0);
}

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

@keyframes fadeUp {

    from{
        opacity:0;
        transform:translateY(40px);
    }

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

}

@keyframes floatBackground {

    0%{
        transform:scale(1) translateY(0);
    }

    50%{
        transform:scale(1.05) translateY(-15px);
    }

    100%{
        transform:scale(1) translateY(0);
    }

}

.status{
    margin-top:30px;
    color:#666;
    font-size:.9rem;
}

.status span{
    width:10px;
    height:10px;
    background:#00b050;
    border-radius:50%;
    display:inline-block;
    margin-right:8px;
    animation:pulse 1.5s infinite;
}

@keyframes pulse{
    0%{transform:scale(1);opacity:1;}
    50%{transform:scale(1.6);opacity:.4;}
    100%{transform:scale(1);opacity:1;}
}

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

@media (max-width:768px){

    body{
        overflow:auto;
    }

    .btn{
        width:100%;
        max-width:320px;
    }

}