/* ==========================
   7S. HERO
========================== */

.hero{

    position:relative;

    overflow:hidden;

    min-height:calc(100vh - 90px);

    display:flex;

    align-items:center;

    padding:4rem 0;

}

.hero-background{

    position:absolute;

    inset:0;

    pointer-events:none;

    overflow:hidden;

}

.hero-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(90px);

    opacity:.08;

}

.hero-circle-1{

    width:380px;

    height:380px;

    background:var(--color-accent);

    top:-120px;

    right:-100px;

}

.hero-circle-2{

    width:280px;

    height:280px;

    background:#4F46E5;

    bottom:-120px;

    left:-80px;

}

.hero .container{

    position:relative;

    z-index:2;

}

.hero-content{

    max-width:650px;

}

.hero-grid{

    display:grid;

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

    gap:4rem;

    align-items:center;

}

.hero-image{

    position:relative;

    height:650px;

    overflow:hidden;

    border-radius:24px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.08);

}

.hero-image img{

    transition:transform .6s ease;

}

.hero-image:hover img{

    transform:scale(1.03);

}