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

.hero{

    position:relative;

    display:flex;

    align-items:center;

    min-height:100vh;

    padding:80px 0;

    overflow:hidden;

    background:

        radial-gradient(
            circle at top right,
            rgba(56,189,248,.16),
            transparent 34%
        ),

        radial-gradient(
            circle at bottom left,
            rgba(10,147,150,.14),
            transparent 34%
        ),

        linear-gradient(
            135deg,
            #F8FAFC,
            #F1F8FF
        );

}


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

.hero-content{

    display:grid;

    grid-template-columns:1fr 520px;

    align-items:center;

    gap:80px;

}


/*==========================================
  Left
==========================================*/

.hero-left{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

}


/*==========================================
  Badge
==========================================*/

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:10px 18px;

    border-radius:999px;

    background:#E0F2FE;

    color:#0284C7;

    font-size:.95rem;

    font-weight:600;

}


/*==========================================
  Title
==========================================*/

.hero-title{

    margin-top:24px;

    font-size:72px;

    line-height:1.1;

    font-weight:800;

    color:var(--primary);

}


/*==========================================
  Subtitle
==========================================*/

.hero-subtitle{

    margin-top:18px;

    font-size:30px;

    font-weight:600;

    color:var(--secondary);

}


/*==========================================
  Description
==========================================*/

.hero-description{

    max-width:620px;

    margin-top:24px;

    line-height:1.9;

    color:var(--text-light);

    font-size:18px;

}


/*==========================================
  Buttons
==========================================*/

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:40px;

}


/*==========================================
  Primary Button
==========================================*/

.btn-primary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:56px;

    padding:0 32px;

    border-radius:14px;

    background:var(--primary);

    color:#fff;

    font-weight:700;

    transition:var(--transition);

}


.btn-primary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


/*==========================================
  Secondary Button
==========================================*/

.btn-secondary{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    height:56px;

    padding:0 32px;

    border-radius:14px;

    background:#fff;

    border:1px solid var(--border);

    color:var(--text);

    font-weight:700;

    transition:var(--transition);

}


.btn-secondary:hover{

    transform:translateY(-3px);

    box-shadow:var(--shadow-md);

}


/*==========================================
  Right
==========================================*/

.hero-right{

    display:flex;

    justify-content:flex-end;

}


/*==========================================
  Glass Card
==========================================*/

.hero-card{

    width:100%;

    max-width:460px;

    padding:50px;

    border-radius:28px;

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

    backdrop-filter:blur(20px);

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

    box-shadow:var(--shadow-lg);

}


.hero-card h3{

    font-size:34px;

    color:var(--primary);

}


.hero-card p{

    margin-top:18px;

    line-height:1.8;

    color:var(--text-light);

}


/*==========================================
  Desktop
==========================================*/

@media (min-width:1200px){

}



/*==========================================
  Mobile + Tablet
==========================================*/

@media (max-width:1199.98px){

    .hero{

        padding:70px 0;

    }

    .hero-content{

        grid-template-columns:1fr;

        gap:50px;

        text-align:center;

    }

    .hero-left{

        align-items:center;

    }

    .hero-title{

        font-size:48px;

    }

    .hero-subtitle{

        font-size:24px;

    }

    .hero-description{

        font-size:16px;

    }

    .hero-buttons{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-right{

        justify-content:center;

    }

}