/**
*/

/*--------------------------------------------------------------
--------------------------------------------------------------*/

*/
:root{
  --bg:#03111c;
  --surface:#071d2e;
  --surface-light:#0d2d45;
  --primary:#00c8ff;
  --secondary:#00ff8f;
  --white:#ffffff;
  --text:#c5d4df;
  --border:rgba(255,255,255,.08);
}

/* ===================== */

html,
body{
  overflow-x:hidden;
}

body{

    background:var(--bg);
    color:var(--white);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    position:relative;
}

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

.grid-bg{

    position:fixed;

    inset:0;

    z-index:-3;

    background:
    linear-gradient(
        rgba(0,255,180,.05),
        rgba(0,255,180,.02)
    ),
    repeating-linear-gradient(
        0deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.04) 1px,
        transparent 1px,
        transparent 70px
    ),
    repeating-linear-gradient(
        90deg,
        rgba(255,255,255,.04),
        rgba(255,255,255,.04) 1px,
        transparent 1px,
        transparent 70px
    );

}

/* ===================== */
/* NAVBAR */
/* ===================== */

.navbar-blur{

    background:rgba(0,10,18,.82);

    backdrop-filter:blur(20px);

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

}

.brand-title{

    color:#18d5ff;

    letter-spacing:4px;

    font-weight:700;

}

.brand-subtitle{

    color:#7f93a5;

    font-size:.75rem;

}

.nav-link{

    color:#d4e5f1 !important;

    margin-inline:.75rem;

}

.nav-link:hover{

    color:var(--secondary) !important;

}

.btn-cta{

    padding-inline:2rem;
}

/* ===================== */
/* HERO */
/* ===================== */

.hero-section{

    min-height:100vh;

    display:flex;

    align-items:center;

    position:relative;

    padding-top:120px;

    padding-bottom:100px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

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

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

    border-radius:50px;

    padding:10px 18px;

    color:#9cb4c5;

    font-size:.85rem;

    margin-bottom:2rem;
}

.dot{

    width:10px;

    height:10px;

    border-radius:50%;

    background:var(--secondary);

    box-shadow:0 0 15px var(--secondary);
}

.hero-title{

    font-family:'Orbitron',sans-serif;

    font-size:clamp(3rem,7vw,6.5rem);

    line-height:.95;

    font-weight:800;

    margin-bottom:2rem;

}

.text-gradient{

    display:block;

    background:linear-gradient(
        90deg,
        #00bfff,
        #00ff8f
    );

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.hero-text{

    font-size:1.2rem;

    color:var(--text);

    max-width:700px;

    line-height:1.8;

}

/* ===================== */
/* HERO CARD */
/* ===================== */

.hero-card{

    position:relative;

    border-radius:28px;

    overflow:hidden;

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

    background:rgba(10,20,30,.6);

    backdrop-filter:blur(20px);

    box-shadow:
        0 0 50px rgba(0,255,255,.12);

}

.hero-status{

    position:absolute;

    top:14px;

    left:14px;

    z-index:10;

    padding:8px 14px;

    border-radius:10px;

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

    color:#00ff9d;

    font-family:'Orbitron',sans-serif;

    font-size:.8rem;

    letter-spacing:2px;
}

.status-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    background:#00ff8f;

    display:inline-block;

    margin-right:8px;

}

.hero-image{

    width:100%;

    display:block;
}

/* ===================== */
/* GLOW */
/* ===================== */

.hero-glow{

    position:absolute;

    border-radius:50%;

    filter:blur(140px);

    z-index:-1;
}

.hero-glow-1{

    width:500px;

    height:500px;

    background:#00ff8f;

    top:20%;

    right:-100px;

    opacity:.18;
}

.hero-glow-2{

    width:400px;

    height:400px;

    background:#00c8ff;

    bottom:0;

    left:-120px;

    opacity:.15;
}

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

@media (max-width:991px){

    .hero-section{

        text-align:center;

        padding-top:140px;
    }

    .hero-badge{

        justify-content:center;
    }

    .hero-title{

        font-size:clamp(2.5rem,12vw,5rem);
    }

    .hero-text{

        margin:auto;
    }

}