:root{
--bg:#0b1220;
--bg2:#111827;
--text:#e2e8f0;
--muted:#94a3b8;
--accent:#60a5fa;
--border:rgba(255,255,255,0.08);
}

*{box-sizing:border-box;}

html,body{
height:100%;
margin:0;
}

body{
font-family:system-ui;
background:linear-gradient(180deg,#0b1220,#111827);
color:var(--text);
}

.page{
min-height:100vh;
display:flex;
flex-direction:column;
}

nav{
display:flex;
justify-content:center;
gap:28px;
padding:22px;
border-bottom:1px solid var(--border);
}

nav a{
color:var(--muted);
text-decoration:none;
font-size:14px;
}

nav a:hover{color:var(--accent);}

.hero{
flex:1;
max-width:1100px;
width:100%;
margin:auto;
padding:60px 20px 30px;
display:grid;
grid-template-columns:1.3fr 0.7fr;
gap:40px;
align-items:center;
}

.small{
color:var(--accent);
font-size:13px;
letter-spacing:2px;
margin:0;
}

h1{
font-size:58px;
margin:10px 0;
line-height:1.1;
}

h2{
margin:0;
font-size:22px;
font-weight:400;
color:var(--muted);
}

.desc{
margin-top:22px;
line-height:1.8;
color:var(--muted);
max-width:540px;
}

.buttons{
margin-top:28px;
display:flex;
gap:14px;
flex-wrap:wrap;
}

.btn{
padding:12px 20px;
border:1px solid var(--accent);
border-radius:8px;
text-decoration:none;
color:var(--accent);
}

.primary{
background:var(--accent);
color:#08111f;
}

.card{
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
padding:28px;
border-radius:14px;
}

.card h3{
margin-top:0;
margin-bottom:18px;
}

.card p{
color:var(--muted);
margin:12px 0;
}

.bottom-box{
max-width:1100px;
width:100%;
margin:0 auto 50px;
padding:0 20px;
display:flex;
justify-content:center;
}

.bottom-box-content{
width:100%;
max-width:800px;
background:rgba(255,255,255,0.03);
border:1px solid var(--border);
border-radius:14px;
padding:28px;
text-align:center;
}

.bottom-box h3{
margin:0 0 12px;
font-size:24px;
}

.bottom-box p{
margin:0;
color:var(--muted);
line-height:1.8;
}

footer{
margin-top:auto;
text-align:center;
padding:24px;
border-top:1px solid var(--border);
color:var(--muted);
}

@media(max-width:900px){
.hero{
grid-template-columns:1fr;
text-align:center;
}

.desc{
margin-left:auto;
margin-right:auto;
}

.buttons{
justify-content:center;
}

h1{
font-size:44px;
}
}