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

.hero-section {

    position: relative;
    min-height: 100vh;

    display: flex;
    align-items: center;

    overflow: hidden;

    background:
        radial-gradient(circle at 15% 20%, rgba(139,92,246,.18), transparent 35%),
        radial-gradient(circle at 85% 75%, rgba(6,182,212,.15), transparent 35%),
        var(--background);

}

/* Overlay */

.hero-overlay{

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.02),
            rgba(255,255,255,0)
        );

    pointer-events:none;

}

/* Hero Content */

.hero-section .container{

    position:relative;
    z-index:2;

}

/* Badge */

.hero-badge{

    display:inline-flex;
    align-items:center;

    padding:10px 18px;

    border-radius:999px;

    background:rgba(245,158,11,.12);

    border:1px solid rgba(245,158,11,.30);

    color:#FFD166;

    font-size:.90rem;
    font-weight:600;

}

/* Headline */

.hero-headline{

    margin-top:20px;

    font-size:clamp(1.8rem,3vw,2.8rem);

    font-weight:600;

    color:white;

    line-height:1.3;

}

/* Buttons */

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

/* Description */

.hero-note{

    max-width:540px;

    color:var(--muted);

    line-height:1.8;

    font-size:.95rem;

}

/* ===========================
   STATUS CARD
=========================== */

.status-card{

    padding:38px;

    border-radius:28px;

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

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:var(--shadow);

}

.status-title{

    font-size:1.2rem;

    font-weight:700;

    margin-bottom:28px;

}

.status-card ul{

    list-style:none;

    margin:0;
    padding:0;

}

.status-card li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 0;

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

}

.status-card li:last-child{

    border-bottom:none;

}

.status-online{

    color:#22C55E;

}

.status-progress{

    color:#F59E0B;

}

/* ===========================
   SCROLL
=========================== */

.hero-scroll{

    position:absolute;

    bottom:35px;

    left:50%;

    transform:translateX(-50%);

}

.hero-scroll a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:8px;

    color:var(--muted);

    font-size:.9rem;

    transition:.3s;

}

.hero-scroll a:hover{

    color:white;

}

.scroll-arrow{

    font-size:1.5rem;

    animation:heroBounce 2s infinite;

}

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

.hero-section::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    border-radius:50%;

    background:rgba(139,92,246,.14);

    filter:blur(120px);

    top:-250px;
    left:-180px;

}

.hero-section::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

    background:rgba(6,182,212,.12);

    filter:blur(120px);

    right:-120px;
    bottom:-180px;

}

/* ===========================
   RESPONSIVE
=========================== */

@media (max-width:991px){

    .hero-section{

        text-align:center;

        padding-top:120px;

    }

    .hero-buttons{

        justify-content:center;

    }

    .hero-note{

        margin-left:auto;
        margin-right:auto;

    }

    .status-card{

        margin-top:60px;

    }

}

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

@keyframes heroBounce{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(8px);

    }

}

@media (max-width:576px){

    .hero-buttons{

        flex-direction:column;

        gap:14px;

    }

    .hero-buttons a{

        width:100%;
        justify-content:center;

    }

}

@media (max-width:576px){

    .status-card{

        padding:28px;

    }

}

@media (max-width:576px){

    .display-title{

        font-size:2.6rem;

    }

}

@media (max-width:991px){

    .hero-section{

        min-height:auto;

    }

    .hero-section .row{

        min-height:auto !important;

        padding:70px 0 40px;

    }

}

@media (max-width:576px){

    .hero-scroll{

        display:none;

    }

}