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

.hero-right{

    position:relative;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:35px;

}

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

.hero-image{

    position:relative;

    width:75%;

    max-width:550px;

    animation:floating 6s ease-in-out infinite;

    z-index:2;

}

.hero-image img{

    width:100%;

    display:block;

    border-radius:28px;

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

}

/* Premium Glow */

.hero-image::before{

    content:"";

    position:absolute;

    inset:-30px;

    border-radius:35px;

    background:radial-gradient(circle,
        rgb(56,189,248,.18),
        transparent 70%);

    filter:blur(50px);

    z-index:-1;

}


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

.hero-stats{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:24px;

    flex-wrap:wrap;

    margin-top:10px;

}

.stat{

    min-width:170px;

    padding:22px 20px;

    border-radius:20px;

    background:rgb(241, 241, 241);

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

    backdrop-filter:blur(20px);

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

    text-align:center;

    transition:.35s;

    box-shadow:
        0 20px 45px rgba(0,0,0,.28);

}

.stat:hover{

    transform:translateY(-10px);

    border-color:#38BDF8;

    box-shadow:
        0 25px 60px rgb(56,189,248,.22);

}

.stat h3{

    font-size:38px;

    font-weight:800;

    color:#38BDF8;

    margin-bottom:8px;

    line-height:1;

}

.stat span{

    display:block;

    font-size:15px;

    color:#94A3B8;

    line-height:1.5;

}

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

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:1100px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

gap:70px;

}

.hero-content{

align-items:center;

}

.hero-content p{

margin:auto auto 40px;

}

.hero-right{

margin-top:20px;

}

.hero-stats{

position:relative;

top:auto;

margin-bottom:30px;

justify-content:center;

gap:18px;

flex-wrap:wrap;

}

}

@media(max-width:768px){

.hero{

padding:130px 0 80px;

min-height:auto;

}

.hero-content h1{

font-size:44px;

}

.hero-content p{

font-size:16px;

}

.hero-buttons{

justify-content:center;

}

.btn-primary,
.btn-secondary{

width:100%;

}

.hero-image{

max-width:100%;

}

.stat{

min-width:140px;

}

}

@media(max-width:480px){

.hero-content h1{

font-size:34px;

}

.hero-tag{

font-size:13px;

padding:10px 18px;

}

.hero-buttons{

flex-direction:column;

}

.stat{

width:100%;

}

}

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

.hero{

    position:relative;

    min-height:100vh;

    display:flex;

    align-items:center;

    overflow:hidden;

    padding:160px 0 100px;

}

/* Background Glow */

.hero::before{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-200px;
    top:-200px;

    background:radial-gradient(circle,
    rgba(124,58,237,.15),
    transparent 70%);

    filter:blur(0px);

}

.hero::after{

    content:"";

    position:absolute;

    width:600px;
    height:600px;

    left:-200px;
    bottom:-250px;

    background:radial-gradient(circle,
    rgb(124,58,237,.15),
    transparent 70%);

    filter:blur(80px);

}

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

.hero-container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

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

.hero-content{

    display:flex;

    flex-direction:column;

}

/* Small Badge */

.hero-tag{

    display:inline-flex;

    align-items:center;

    width:max-content;

    padding:12px 20px;

    border-radius:50px;

    margin-bottom:28px;

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

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

    backdrop-filter:blur(15px);

    color:var(--primary);

    font-size:15px;

    font-weight:600;

}

/* Heading */

.hero-content h1{

    font-size:68px;

    font-weight:800;

    line-height:1.15;

    margin-bottom:28px;

    color:#ffffff;

}

.hero-content h1 span{

    color:var(--primary);

}

/* Paragraph */

.hero-content p{

    max-width:620px;

    color:var(--text-gray);

    font-size:18px;

    line-height:1.9;

    margin-bottom:40px;

}

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

.hero-buttons{

    display:flex;

    gap:20px;

    flex-wrap:wrap;

}

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 34px;

    border-radius:50px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

    box-shadow:

    0 15px 35px rgba(56,189,248,.35);

}

.btn-primary:hover{

    transform:translateY(-6px);

    background:var(--primary-dark);

}

.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    padding:16px 34px;

    border-radius:50px;

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

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

    backdrop-filter:blur(14px);

    color:#ffffff;

    font-weight:700;

    transition:var(--transition);

}

.btn-secondary:hover{

    transform:translateY(-6px);

    border-color:var(--primary);

    background:rgba(56,189,248,.12);

}

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

.hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Canvas */

#constellation-canvas {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    z-index: -2;

    pointer-events: none;
}

/* Dark cinematic overlay */

.hero::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 45%,
            rgba(56, 189, 248, .10),
            transparent 35%
        ),
        linear-gradient(
            90deg,
            rgba(5, 8, 22, .96),
            rgba(5, 8, 22, .72)
        );

    z-index: -1;

    pointer-events: none;
}

/* Content above canvas */

.hero-container {
    position: relative;
    z-index: 5;
}

/* =====================================================
   HERO BRAND STATEMENT
===================================================== */

.hero-statement {
    position: relative;

    width: 100%;
    max-width: 620px;

    margin-top: 22px;
    margin-left: auto;

    padding: 22px 28px;

    border-radius: 22px;

    background: rgba(255, 255, 255, 0.055);

    border: 1px solid rgba(255, 255, 255, 0.12);

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

    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

    overflow: hidden;

    box-sizing: border-box;

    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        box-shadow 0.35s ease;
}


/* LEFT ACCENT LINE */

.hero-statement::before {

    content: "";

    position: absolute;

    left: 0;
    top: 18px;
    bottom: 18px;

    width: 3px;

    border-radius: 10px;

    background: var(--primary);

    box-shadow:
        0 0 15px var(--primary),
        0 0 30px rgba(56, 189, 248, 0.25);
}


/* TEXT */

.hero-statement p {

    margin: 0;

    padding-left: 12px;

    font-size: 16px;

    line-height: 1.8;

    font-weight: 400;

    color: rgba(255, 255, 255, 0.78);

    letter-spacing: 0.1px;
}


/* HOVER */

.hero-statement:hover {

    transform: translateY(-4px);

    border-color: rgba(56, 189, 248, 0.30);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.30),
        0 0 30px rgba(56, 189, 248, 0.08);
}


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

@media (max-width: 768px) {

    .hero-statement {

        margin-top: 18px;

        padding: 18px 20px;

        border-radius: 18px;

    }

    .hero-statement p {

        padding-left: 10px;

        font-size: 14px;

        line-height: 1.65;

    }

    .hero-statement::before {

        top: 15px;
        bottom: 15px;

    }

}

.hero-right {
    display: flex;
    flex-direction: column;
}

.hero-image {
    position: relative;
}

.hero-statement {
    position: relative;
}