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

.hero{
    position: relative;
    overflow: hidden;
    padding-top: calc(var(--header-height) + 60px);
    padding-bottom: 120px;
}

.hero-grid{
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    align-items: center;
    gap: 60px;
    min-height: calc(100vh - var(--header-height));
}

/* ==========================================================
   LEFT CONTENT
========================================================== */

.hero-content{
    position: relative;
    z-index: 2;
}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

margin-bottom:30px;

padding:10px 20px;

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

}
.hero-badge span{

width:8px;

height:8px;

border-radius:50%;

background:var(--accent);

box-shadow:

0 0 10px var(--accent);

}

.hero h1{

font-size:96px;

line-height:.92;

letter-spacing:-4px;

margin-bottom:12px;

}
.hero-subtitle{

font-size:28px;

font-weight:600;

line-height:1.4;

margin-bottom:24px;

color:#fff;

max-width:580px;

font-family:'Poppins',sans-serif;

}

.hero h1 span{

    color:var(--accent);
}

.hero p{

max-width:560px;

font-size:18px;

line-height:1.9;

margin-bottom:42px;

}

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

.hero-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;
}

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

.hero-phones{

    position:relative;

    height:760px;

    display:flex;

    justify-content:center;

    align-items:center;
}

/* ==========================================================
   PHONE
========================================================== */

.phone{

    position:absolute;

    width:260px;

    transition:
        transform .4s ease,
        filter .4s ease;

    user-select:none;

    pointer-events:none;
}

.phone-center{

    z-index:5;
top:20px;
    width:320px;
}

.phone-left{

    left:-10px;
    top:120px;

    transform:
        rotate(-13deg)
        translateY(45px)
        scale(.92);

    opacity:.96;
}

.phone-right{

    right:-10px;
top:90px;   
    transform:
        rotate(13deg)
        translateY(45px)
        scale(.92);

    opacity:.96;
}

/* ==========================================================
   PHONE GLOW
========================================================== */

.hero-phones::before{

    content:"";

    position:absolute;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(255,87,34,.22),
        transparent 70%);

    filter:blur(40px);

    z-index:0;
}

.hero-phones::after{

    content:"";

    position:absolute;

    width:560px;

    height:560px;

    border-radius:50%;

    background:

        radial-gradient(circle,
        rgba(42,82,152,.25),
        transparent 70%);

    filter:blur(90px);

    z-index:-1;
}

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

.hero::before{

    content:"";

    position:absolute;

    top:-120px;

    right:-120px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

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

    filter:blur(90px);
}

.hero::after{

    content:"";

    position:absolute;

    left:-150px;

    bottom:-180px;

    width:420px;

    height:420px;

    border-radius:50%;

    background:

        rgba(255,87,34,.05);

    filter:blur(90px);
}

/* ==========================================================
   PHONE HOVER
========================================================== */

.hero-phones:hover .phone-left{

    transform:
        rotate(-11deg)
        translateY(35px)
        scale(.94);
}

.hero-phones:hover .phone-right{

    transform:
        rotate(11deg)
        translateY(35px)
        scale(.94);
}

.hero-phones:hover .phone-center{

    transform:translateY(-8px);
}

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

.scroll-down{

    position:absolute;

    left:50%;

    bottom:20px;

    transform:translateX(-50%);

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:10px;

    color:var(--muted);

    font-size:13px;

    letter-spacing:2px;

    text-transform:uppercase;
}

.scroll-mouse{

    width:28px;

    height:46px;

    border:2px solid rgba(255,255,255,.25);

    border-radius:50px;

    position:relative;
}

.scroll-mouse span{

    position:absolute;

    width:5px;

    height:9px;

    border-radius:10px;

    background:#fff;

    left:50%;

    top:8px;

    transform:translateX(-50%);
}