:root{

--bg:#050816;
--card:#0f172a;
--text:#f8fafc;
--muted:#94a3b8;
--border:rgba(255,255,255,.12);
--blue:#2563eb;
--cyan:#38bdf8;

}


*{

margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial, sans-serif;

}



body{

background:
radial-gradient(circle at top,#10245c,var(--bg));

color:var(--text);

min-height:100vh;

}



a{

text-decoration:none;

}



.hero{

text-align:center;

padding:120px 25px;

}



.hero h1{

font-size:60px;
font-weight:900;

}



.hero span{

display:block;

background:linear-gradient(90deg,var(--cyan),var(--blue));

-webkit-background-clip:text;

color:transparent;

}



.hero p{

margin:30px auto;

max-width:700px;

font-size:20px;

color:var(--muted);

}



.main-button{

display:inline-block;

padding:16px 35px;

background:linear-gradient(
135deg,
var(--blue),
var(--cyan)
);

color:white;

border-radius:14px;

font-weight:800;

margin-top:15px;

}



.features{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:25px;

padding:40px;

max-width:1200px;

margin:auto;

}



.card{

background:rgba(15,23,42,.9);

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

border-radius:22px;

padding:30px;

}



.card p{

color:var(--muted);

margin-top:15px;

line-height:1.5;

}



.dashboard{

max-width:1200px;

margin:auto;

padding:40px;

}



.muted{

color:var(--muted);

}



.grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:25px;

margin-top:40px;

}



.buttons{

display:flex;

gap:15px;

flex-wrap:wrap;

}



.buttons .main-button{

flex:1;

text-align:center;

}



.danger{

margin-top:20px;

padding:14px 25px;

border:none;

border-radius:12px;

background:#dc2626;

color:white;

font-weight:800;

cursor:pointer;

}



@media(max-width:700px){


.hero h1{

font-size:40px;

}


.dashboard{

padding:20px;

}


}