/* ===================================================
   VSPL Coming Soon v2
   Premium Glass Dashboard
=================================================== */

:root{

    --bg:#07090d;
    --surface:rgba(18,22,28,.72);

    --border:rgba(255,255,255,.08);

    --text:#eef2f7;
    --muted:#9ca7b5;

    --red:#d71920;
    --red2:#ff4d55;

    --green:#2ecc71;
    --orange:#ffb648;

    --shadow:
        0 30px 80px rgba(0,0,0,.45),
        0 70px 140px rgba(0,0,0,.55);

}

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

html{

    scroll-behavior:smooth;

}

body{

    font-family:Inter,sans-serif;

    background:var(--bg);

    color:var(--text);

    overflow-x:hidden;

    min-height:100vh;

}

/* =====================
Background
===================== */

.background{

    position:fixed;

    inset:0;

    overflow:hidden;

    z-index:-10;

    background:
        radial-gradient(circle at 15% 15%,rgba(215,25,32,.15),transparent 35%),
        radial-gradient(circle at 80% 80%,rgba(255,255,255,.04),transparent 40%),
        linear-gradient(135deg,#050608,#0a0e13);

}

#particles{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

}

.noise{

    position:absolute;

    inset:0;

    opacity:.025;

    background-image:
    radial-gradient(circle,#fff 1px,transparent 1px);

    background-size:4px 4px;

}

.grid{

    position:absolute;

    inset:-40%;

    opacity:.04;

    background-image:
    linear-gradient(rgba(255,255,255,.12) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 1px);

    background-size:70px 70px;

    transform:perspective(1200px) rotateX(70deg);

}

.red-glow{

    position:absolute;

    width:600px;

    height:600px;

    border-radius:50%;

    filter:blur(130px);

    background:rgba(215,25,32,.18);

}

.glow-1{

    top:-250px;

    left:-200px;

}

.glow-2{

    bottom:-220px;

    right:-180px;

}

/* =====================
Watermark
===================== */

.watermark{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:18vw;

    font-weight:800;

    letter-spacing:18px;

    opacity:.025;

    pointer-events:none;

}

/* =====================
Layout
===================== */

.hero{

    width:min(1100px,90%);

    margin:auto;

    min-height:calc(100vh - 70px);

    min-height:calc(100svh - 70px);

    display:flex;

    justify-content:center;

    align-items:center;

    padding:42px 0 105px;

}

/* =====================
Hero Content
===================== */

.hero-content{

    width:100%;

    max-width:900px;

    display:flex;

    flex-direction:column;

    align-items:center;

    text-align:center;

}

.logo{

    width:160px;

    margin-bottom:24px;

}

.badge{

    display:inline-flex;

    padding:10px 20px;

    border-radius:999px;

    border:1px solid rgba(255,255,255,.08);

    background:rgba(255,255,255,.03);

    color:#c7d0db;

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;

}

.hero h1{

    font-size:clamp(78px,8vw,128px);

    line-height:.84;

    margin-top:26px;

    font-weight:800;

    letter-spacing:-.055em;

}

.hero h1 span{

    color:var(--red);

    display:block;

}

.hero h2{

    margin-top:28px;

    font-size:clamp(24px,2.15vw,34px);

    font-weight:600;

    max-width:780px;

    line-height:1.25;

}

.hero p{

    margin-top:22px;

    color:var(--muted);

    font-size:18px;

    line-height:1.9;

    max-width:730px;

}

.launch-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:32px;

    padding:16px 32px;

    border-radius:999px;

    color:#fff;

    background:linear-gradient(90deg,var(--red),var(--red2));

    font-weight:700;

    box-shadow:0 10px 35px rgba(215,25,32,.35);

    cursor:default;

}

/* =====================
Footer
===================== */

footer{

    position:fixed;

    bottom:0;

    width:100%;

    display:flex;

    justify-content:center;

    gap:60px;

    padding:22px;

    border-top:1px solid rgba(255,255,255,.05);

    background:rgba(0,0,0,.15);

    backdrop-filter:blur(12px);

}

footer div{

    color:#97a1ae;

    font-size:14px;

}

/* ==========================
Spotlight
========================== */

.spotlight{

    position:fixed;

    width:600px;

    height:600px;

    border-radius:50%;

    pointer-events:none;

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

    background:radial-gradient(circle,
        rgba(255,255,255,.05),
        transparent 70%);

    filter:blur(20px);

    z-index:-2;

}