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

.hero{

position:relative;

padding:180px 0 100px;

overflow:hidden;

background:

radial-gradient(circle at top right,#DBEAFE 0%,transparent 35%),

radial-gradient(circle at bottom left,#D1FAE5 0%,transparent 35%),

linear-gradient(180deg,#FFFFFF 0%,#F8FAFC 100%);

}

/* Decorative Blur */

.hero::before{

content:"";

position:absolute;

top:-180px;

right:-180px;

width:420px;

height:420px;

border-radius:50%;

background:rgba(37,99,235,.10);

filter:blur(80px);

z-index:0;

}

.hero::after{

content:"";

position:absolute;

bottom:-180px;

left:-180px;

width:380px;

height:380px;

border-radius:50%;

background:rgba(16,185,129,.10);

filter:blur(80px);

z-index:0;

}

.hero .container{

position:relative;

z-index:2;

}

/* ==========================================
   GRID
========================================== */

.hero-grid{

display:grid;

grid-template-columns:45% 55%;

align-items:center;

gap:70px;

}

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

.hero-left{

max-width:620px;

}

.hero-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:10px 18px;

border-radius:999px;

background:#EFF6FF;

color:#2563EB;

font-size:14px;

font-weight:600;

margin-bottom:30px;

}

.hero-badge::before{

content:"";

width:10px;

height:10px;

border-radius:50%;

background:#10B981;

}

.hero h1{

font-size:72px;

font-weight:800;

line-height:1.05;

letter-spacing:-2px;

margin-bottom:25px;

}

.hero h1 span{

color:#2563EB;

}

.hero p{

font-size:20px;

line-height:1.8;

color:#64748B;

margin-bottom:40px;

}

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

.hero-buttons{

display:flex;

flex-wrap:wrap;

gap:18px;

margin-bottom:40px;

}

/* ==========================================
   FEATURES
========================================== */

.hero-features{

display:flex;

flex-wrap:wrap;

gap:18px;

}

.hero-features div{

display:flex;

align-items:center;

gap:8px;

padding:10px 18px;

background:#fff;

border-radius:999px;

box-shadow:0 10px 25px rgba(15,23,42,.06);

font-size:15px;

font-weight:600;

}

.hero-features i{

color:#10B981;

}

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

.hero-right{

display:flex;

justify-content:flex-end;

align-items:center;

position:relative;

}

.hero-right img{

width:100%;

max-width:900px;

height:auto;

object-fit:contain;

filter:drop-shadow(0 30px 60px rgba(37,99,235,.18));

}