:root{
--bg:#0b0f1a;
--card:#12172a;
--border:#1e2647;
--primary:#4f9cff;
--secondary:#7dd3fc;
--text:#e5e7eb;
--muted:#9ca3af;
}

*{
box-sizing:border-box;
font-family:Segoe UI,Roboto,Arial,sans-serif;
}

body{
margin:0;
background:radial-gradient(circle at top,#111936,#070a14);
color:var(--text);
}

/* HEADER */
header{
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 40px;
background:linear-gradient(180deg,#0f152b,#0a0e1d);
border-bottom:1px solid var(--border);
}

.logo{
display:flex;
align-items:center;
gap:10px;
font-weight:700;
font-size:18px;
}

.logo img{
height:32px;
}

.nav a{
margin-left:12px;
padding:10px 18px;
border-radius:14px;
background:#1b2242;
color:var(--text);
text-decoration:none;
font-weight:600;
font-size:14px;
}

.nav a.primary{
background:linear-gradient(135deg,#4f9cff,#38bdf8);
color:#020617;
}

/* HERO */
.hero{
text-align:center;
padding:110px 20px 90px;
}

.hero h1{
font-size:44px;
margin:0;
background:linear-gradient(90deg,#8ab4ff,#5eead4);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.hero p{
max-width:700px;
margin:20px auto 0;
font-size:18px;
color:var(--muted);
}

/* ACTIONS */
.actions{
margin-top:55px;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:20px;
}

.action{
background:var(--card);
border:1px solid var(--border);
border-radius:20px;
padding:30px 28px;
width:260px;
text-decoration:none;
color:var(--text);
transition:.25s;
}

.action:hover{
transform:translateY(-6px);
box-shadow:0 20px 50px rgba(0,0,0,.45);
border-color:#3b82f6;
}

.action h3{
margin:0 0 10px;
font-size:18px;
}

.action span{
font-size:14px;
color:var(--muted);
}

/* FOOTER */
footer{
text-align:center;
padding:30px 15px;
font-size:13px;
color:var(--muted);
border-top:1px solid var(--border);
background:#070a14;
}

/* MOBILE */
@media (max-width:768px){

header{
flex-direction:column;
gap:15px;
padding:15px;
text-align:center;
}

.nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
}

.nav a{
margin:0;
padding:10px 14px;
font-size:13px;
}

.hero{
padding:70px 15px 60px;
}

.hero h1{
font-size:30px;
}

.hero p{
font-size:16px;
}

.action{
width:100%;
max-width:320px;
}
}