:root{

--primary:#2563EB;
--text:#0F172A;
--muted:#64748B;
--line:#E2E8F0;
--bg:#F8FAFC;

}

body{

font-family:'Plus Jakarta Sans',sans-serif;

background:var(--bg);

}

.hero{

min-height:100vh;

display:flex;

align-items:center;

justify-content:center;

padding:60px 20px;

position:relative;

overflow:hidden;

}

/* Background */

.hero::before{

content:"";

position:absolute;

width:700px;

height:700px;

background:#DBEAFE;

border-radius:50%;

top:-300px;

right:-220px;

filter:blur(120px);

opacity:.6;

}

.hero::after{

content:"";

position:absolute;

width:500px;

height:500px;

background:#E0F2FE;

border-radius:50%;

bottom:-220px;

left:-180px;

filter:blur(120px);

opacity:.6;

}

.container{

max-width:820px;

text-align:center;

position:relative;

z-index:2;

}

.hero-top{

letter-spacing:2px;

text-transform:uppercase;

color:#94A3B8;

font-weight:600;

margin-bottom:45px;

}

.hero-logo img{

width:130px;

margin-bottom:30px;

filter:drop-shadow(0 15px 25px rgba(0,0,0,.08));

transition:.5s;

}

.hero-logo img:hover{

transform:translateY(-5px);

}

h1{

font-size:58px;

font-weight:800;

color:var(--text);

margin-bottom:18px;

}

.description{

font-size:22px;

line-height:1.8;

color:var(--muted);

max-width:700px;

margin:auto;

}

.feature-list{

display:flex;

justify-content:center;

flex-wrap:wrap;

gap:15px;

margin:50px 0;

}

.feature-list div{

background:#fff;

padding:14px 24px;

border-radius:50px;

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

font-weight:600;

color:#334155;

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

transition:.3s;

}

.feature-list div:hover{

transform:translateY(-4px);

box-shadow:0 15px 35px rgba(15,23,42,.08);

}

.feature-list i{

color:var(--primary);

margin-right:10px;

}

.btn-start{

background:var(--primary);

border:none;

padding:18px 42px;

border-radius:50px;

font-size:18px;

font-weight:700;

color:white;

transition:.35s;

box-shadow:0 15px 35px rgba(37,99,235,.25);

}

.btn-start:hover{

transform:translateY(-4px);

box-shadow:0 25px 50px rgba(37,99,235,.35);

}

.btn-start i{

margin-left:15px;

transition:.3s;

}

.btn-start:hover i{

transform:translateX(6px);

}

.footer-title{

margin-top:70px;

font-size:15px;

font-weight:600;

letter-spacing:1px;

color:#94A3B8;

}

@media(max-width:768px){

h1{

font-size:40px;

}

.description{

font-size:18px;

}

.feature-list{

flex-direction:column;

align-items:center;

}

.hero-logo img{

width:100px;

}

}