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

.hero{

    position: relative;

    display: flex;

    align-items: center;

    min-height: calc(100svh - var(--header-height, 90px));

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(circle at top right,
        rgba(37,99,235,.18),
        transparent 45%),
        radial-gradient(circle at bottom left,
        rgba(6,182,212,.12),
        transparent 45%),
        var(--bg-page);

}

.hero-label{

    align-self:center;

    margin-bottom:1.5rem;

}

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

.hero-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

    pointer-events:none;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:

        linear-gradient(

            rgba(5,10,20,.55),

            rgba(5,10,20,.70)

        );

    z-index:1;

}

.hero-background{

    position:absolute;

    inset:0;

    overflow:hidden;

    pointer-events:none;

    z-index:2;

}

.hero-glow{

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    filter:blur(140px);

    opacity:.35;

    animation:floatGlow 14s ease-in-out infinite;

}

.hero-glow.one{

    top:-180px;

    right:-150px;

    background:#2563eb;

}

.hero-glow.two{

    bottom:-220px;

    left:-180px;

    background:#06b6d4;

    animation-delay:4s;

}

.hero-gradient{

    opacity:.35;

}

.hero-grid{

    position:absolute;

    inset:0;

    display:none;

    opacity:.12;

    background-image:

        linear-gradient(

            rgba(255,255,255,.03) 1px,

            transparent 1px

        ),

        linear-gradient(

            90deg,

            rgba(255,255,255,.03) 1px,

            transparent 1px

        );

    background-size:50px 50px;

    mask-image:

        radial-gradient(circle,

        rgba(0,0,0,1),

        transparent 80%);

}

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

.hero .container{

    position: relative;

    z-index: 3;

    display: grid;

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

    gap: clamp(2rem, 5vw, 5rem);

    align-items: center;

    min-height: inherit;

}

/* ==========================================================
   Hero Image
========================================================== */

.hero-glass{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    height:100%;

    background:transparent;

    border:none;

    box-shadow:none;

    overflow:visible;

}

.hero-glass::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:

        radial-gradient(circle,

            rgba(37,99,235,.18),

            rgba(6,182,212,.10),

            transparent 75%);

    filter:blur(60px);

    z-index:-1;

}

.hero-glass img{

    display:block;

    width:100%;

    transform:scale(1.15) translateX(30px);

    max-width:760px;

    height:auto;

    object-fit:contain;

    filter:

        drop-shadow(0 40px 80px rgba(0,0,0,.45))

        drop-shadow(0 0 80px rgba(37,99,235,.22));

    mask-image:

        radial-gradient(circle at center,

            rgba(0,0,0,1) 62%,

            rgba(0,0,0,.92) 72%,

            rgba(0,0,0,.55) 82%,

            transparent 100%);

    -webkit-mask-image:

        radial-gradient(circle at center,

            rgba(0,0,0,1) 62%,

            rgba(0,0,0,.92) 72%,

            rgba(0,0,0,.55) 82%,

            transparent 100%);

}

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

.hero .container{

    position:relative;

    z-index:3;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

}

.hero-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

    gap:1.5rem;

    align-items:center;

    text-align:center;

    max-width:900px;

    margin:0 auto;

    position: absolute;

    bottom: 46px;

}

.hero-title{

    margin:1rem 0 1.75rem;

    max-width:760px;

    font-size:clamp(2.4rem,4vw,4.2rem);

    font-weight:800;

    line-height:1.3;

    letter-spacing:-0.02em;

    color:#ffffff;

}

.hero-title span{

    display:block;

    margin:.3rem 0;

    background:var(--gradient-primary);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

    background-clip:text;

}

.hero-description{

    max-width:620px;

    margin-bottom:2.5rem;

    font-size:1.05rem;

    line-height:2;

    color:var(--text-secondary);

}

.hero-subtitle{

    max-width:700px;

    font-size:1.45rem;

    font-weight:500;

    line-height:1.8;

    color:var(--text-primary);

}

/* ==========================================================
   Actions
========================================================== */

.hero-actions{

    display:flex;

    gap:1.25rem;

    margin-top:3rem;

    flex-wrap:wrap;

    justify-content:center;

}

/* ==========================================================
   Stats
========================================================== */

.hero-stats{

    display:flex;

    gap:3rem;

    margin-top:4rem;

    flex-wrap:wrap;

}

.hero-stat{

    display:flex;

    flex-direction:column;

}

.hero-stat strong{

    font-size:2.3rem;

    font-weight:800;

    color:#fff;

}

.hero-stat span{

    margin-top:.4rem;

    color:var(--text-muted);

    font-size:.95rem;

}

/* ==========================================================
   Visual
========================================================== */

.hero-visual{

    position:relative;

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    min-height:650px;

}

.hero-image{

    width:100%;

    max-width:560px;

    border-radius:32px;

    overflow:hidden;

    background:var(--gradient-card);

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

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

    backdrop-filter:blur(20px);

    transform:perspective(1200px)
              rotateY(-8deg)
              rotateX(5deg);

    transition:.5s;

}

.hero-image:hover{

    transform:

        perspective(1200px)

        rotateY(0)

        rotateX(0)

        scale(1.02);

}

.hero-image img{

    width:100%;

    display:block;

}

/* ==========================================================
   Floating Cards
========================================================== */

.hero-card{

    position:absolute;

    background:rgba(16,26,43,.88);

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

    border-radius:18px;

    backdrop-filter:blur(20px);

    padding:1rem 1.25rem;

    min-width:180px;

    box-shadow:0 20px 40px rgba(0,0,0,.35);

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

}

.hero-card h4{

    font-size:1rem;

    margin-bottom:.5rem;

    font-weight:700;

}

.hero-card p{

    font-size:.9rem;

    color:var(--text-secondary);

    line-height:1.7;

}

.hero-card.card-one{

    top:8%;

    left:-40px;

}

.hero-card.card-two{

    bottom:12%;

    right:-45px;

    animation-delay:2s;

}

/* ==========================================================
   Scroll Indicator
========================================================== */

.hero-scroll{

    position:absolute;

    left:50%;

    bottom:2rem;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:.8rem;

    color:var(--text-muted);

    font-size:.85rem;

}

.hero-scroll::after{

    content:"";

    width:2px;

    height:60px;

    background:linear-gradient(

        transparent,

        var(--color-primary),

        transparent

    );

    animation:scrollLine 2s infinite;

}

/* ==========================================================
   Animations
========================================================== */

@keyframes floating{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0);

    }

}

@keyframes floatGlow{

    0%{

        transform:translateY(0)
                  scale(1);

    }

    50%{

        transform:translateY(-40px)
                  scale(1.08);

    }

    100%{

        transform:translateY(0)
                  scale(1);

    }

}

@keyframes scrollLine{

    0%{

        opacity:.2;

        transform:scaleY(.2);

    }

    50%{

        opacity:1;

        transform:scaleY(1);

    }

    100%{

        opacity:.2;

        transform:scaleY(.2);

    }

}

/* ==========================================================
   Responsive
========================================================== */

@media(max-width:1100px){

    .hero .container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .hero-content{

        max-width:none;

    }

    .hero-description{

        margin-inline:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-stats{

        justify-content:center;

    }

    .hero-card{

        display:none;

    }

    .hero-image{

        transform:none;

    }

}

@media(max-width:768px){

    .hero{

        min-height: calc(100svh - var(--header-height, 72px));

        padding-block: 2rem;

        text-align: center;

    }

    .hero-title{

        font-size:2.4rem;

        line-height:1.4;

    }

    .hero-description{

        font-size:1rem;

        margin-inline:auto;

    }

    .hero-actions{

        justify-content:center;

    }

    .hero-stats{

        gap:2rem;

    }

    .hero-stat strong{

        font-size:1.8rem;

    }

    .hero-scroll{

        display:none;

    }

}