.hero-section{

    position:relative;

    min-height:100vh;

    overflow:hidden;
   isolation:isolate;
    display:flex;

    align-items:center;

    padding-top:110px;
    padding-bottom:80px;
    background:
        radial-gradient(
            circle at top right,
            rgba(0,209,255,.12),
            transparent 30%
        ),
        radial-gradient(
            circle at bottom left,
            rgba(0,255,178,.08),
            transparent 30%
        ),
        #050505;

}

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

.hero-section::before{

    content:"";

    position:absolute;

    width:1200px;
    height:1200px;

    border-radius:50%;

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

    top:-45%;
    right:-15%;

    z-index:0;

    animation:floatGlow 12s ease-in-out infinite;
}

.hero-section::after{

    content:"";

    position:absolute;

    width:900px;
    height:900px;

    border-radius:50%;

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

    bottom:-35%;
    left:-10%;

    z-index:0;

}

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

.hero-grid{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1.1fr .9fr;

    gap:80px;

    align-items:center;
}

/* =========================
   BADGE
========================= */

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:12px 22px;

    border-radius:999px;

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

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

    backdrop-filter:blur(20px);

    color:#fff;

    font-size:14px;

    margin-bottom:28px;

    box-shadow:
        0 0 30px rgba(0,209,255,.08);

}

/* =========================
   TITLE
========================= */
.hero-content h1{

  font-size:clamp(3.4rem,6vw,5.8rem);

    line-height:.95;

    letter-spacing:-4px;

    max-width:900px;

    margin-bottom:32px;

}

.hero-content h1 span{

    background:linear-gradient(
        135deg,
        var(--electric-blue),
        var(--emerald)
    );
background-clip:text;
    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

/* =========================
   TEXT
========================= */

.hero-content p{

    font-size:1.2rem;

    max-width:720px;

    line-height:1.8;

    margin-bottom:40px;

}
.hero-content{

    position:relative;

    z-index:2;

}
/* =========================
   BUTTONS
========================= */

.hero-buttons{

    display:flex;

    gap:20px;

    margin-bottom:40px;

}

.btn-primary{

    position:relative;

    overflow:hidden;

    padding:18px 34px;

    border-radius:16px;

    font-weight:700;

    color:#000;

    background:linear-gradient(
        135deg,
        var(--electric-blue),
        var(--emerald)
    );

    box-shadow:
        0 10px 40px rgba(0,209,255,.25);

    transition:.4s ease;
}

.btn-primary:hover{

    transform:
        translateY(-4px)
        scale(1.02);

    box-shadow:
        0 20px 60px rgba(0,209,255,.35);

}

.btn-secondary{

    padding:18px 34px;

    border-radius:16px;

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

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

    backdrop-filter:blur(20px);

    transition:.4s ease;
}

.btn-secondary:hover{

    border-color:rgba(0,209,255,.3);

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

}

/* =========================
   FEATURES
========================= */

.hero-features{

    display:flex;

    flex-wrap:wrap;

    gap:30px;

    color:#d9d9d9;

    font-size:15px;

}

/* =========================
   RIGHT SIDE
========================= */

.hero-visual{

    position:relative;

}

.dashboard-card{

    position:relative;

    padding:40px;

    border-radius:32px;

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

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

    backdrop-filter:blur(30px);

    overflow:hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.45);

}

/* =========================
   CARD HEADER
========================= */

.card-header{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:30px;

    font-weight:600;

}

.status-dot{

    width:12px;
    height:12px;

    border-radius:50%;

    background:var(--emerald);

    box-shadow:
        0 0 20px var(--emerald);

}

/* =========================
   METRICS
========================= */

.metrics-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:20px;

}

.metric-item{

    padding:30px;

    border-radius:24px;

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

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

    transition:.4s ease;
}

.metric-item:hover{

    transform:translateY(-8px);

    border-color:rgba(0,209,255,.18);

}

.metric-item h3{

    font-size:38px;

    margin-bottom:10px;

    color:var(--electric-blue);

}

.metric-item p{

    margin:0;

    font-size:15px;

}

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

@keyframes floatGlow{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(30px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:1100px){

    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-content{
        text-align:center;
    }

    .hero-buttons{
        justify-content:center;
    }

    .hero-features{
        justify-content:center;
    }

}

@media(max-width:768px){

    .hero-content h1{
        letter-spacing:-2px;
    }

    .hero-buttons{
        flex-direction:column;
    }

    .metrics-grid{
        grid-template-columns:1fr;
    }

}
/* =========================
   CYBER GRID
========================= */

.hero-grid::before{

    content:"";

    position:absolute;

    inset:0;

    background-image:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:80px 80px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 85%
        );

    pointer-events:none;

    z-index:-1;

    opacity:.45;

}

/* =========================
   NOISE TEXTURE
========================= */

.hero-section .noise{

    position:absolute;

    inset:0;

    opacity:.035;

    background-image:
        url("https://grainy-gradients.vercel.app/noise.svg");

    mix-blend-mode:soft-light;

    pointer-events:none;

}

/* =========================
   FLOATING LIGHT
========================= */

.hero-light{

    position:absolute;

    width:500px;
    height:500px;

    border-radius:50%;

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

    filter:blur(60px);

    top:20%;
    right:5%;

    z-index:0;

    animation:
        floatingLight 10s ease-in-out infinite;

}

@keyframes floatingLight{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(40px);
    }

    100%{
        transform:translateY(0px);
    }

}