:root{

--bg:#0f172a;
--surface:#172033;
--surface2:#1e293b;

--text:#e5e7eb;
--muted:#94a3b8;

--primary:#60a5fa;
--accent:#2dd4bf;

--border:#334155;

--shadow:0 10px 25px rgba(0,0,0,.35);

}

*{
box-sizing:border-box;
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:Inter,system-ui,sans-serif;
line-height:1.7;
font-size:18px;
}

.container{
width:min(1400px,96vw);
margin:auto;
padding:0 20px;
}

/* HEADER */

.site-header{
background:#020617;
border-bottom:1px solid var(--border);
position:sticky;
top:0;
z-index:100;
}

.site-header .container{
padding:18px 20px;
}

.brand a{
color:white;
font-size:2rem;
font-weight:800;
text-decoration:none;
}

.brand-subtitle{
color:var(--muted);
margin-top:4px;
}

nav{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:16px;
}

nav a{
color:white;
text-decoration:none;
padding:8px 12px;
border-radius:10px;
}

nav a:hover{
background:var(--surface2);
}

/* MAIN */

main{
padding:24px 0 60px 0;
}

/* HERO */

.hero{

background:linear-gradient(
135deg,
#172033,
#1e293b
);

padding:24px;

border-radius:20px;

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

margin-bottom:24px;

box-shadow:var(--shadow);
}

.hero h1{
margin:0 0 12px 0;
font-size:clamp(2.6rem,5vw,4.5rem);
line-height:1.05;
color:white;
}

.hero-text{
font-size:1.15rem;
max-width:900px;
color:#cbd5e1;
}

/* SECTIONS */

section{
margin-bottom:24px;
}

h2{
display:inline-block;
margin-bottom:18px;
font-size:1.8rem;
color:white;
border-bottom:3px solid var(--accent);
padding-bottom:6px;
}

h3{
margin-top:0;
}

/* CARDS */

.cards{
display:grid;
grid-template-columns:
repeat(auto-fit,minmax(280px,1fr));
gap:12px;
}

.card{
background:var(--surface);

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

border-radius:16px;

padding:20px;

transition:.15s;

box-shadow:var(--shadow);
}

.card:hover{
transform:translateY(-2px);
border-color:var(--primary);
}

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

.card a{
text-decoration:none;
color:var(--primary);
}

/* LINKS */

a{
color:var(--primary);
}

/* CONTENT PAGES */

.hero + section,
article{
max-width:1000px;
}

/* FOOTER */

footer{
margin-top:60px;
background:#020617;
border-top:1px solid var(--border);
}

.footer-content{
padding:24px 0;
}



/* FOOTER LAYOUT FIX */

.footer-content{
display:flex;
justify-content:space-between;
align-items:flex-start;
flex-wrap:wrap;
gap:24px;
padding:24px 0;
}

.footer-links{
display:flex;
flex-wrap:wrap;
gap:18px;
}

.footer-links a{
display:inline-block;
white-space:nowrap;
text-decoration:none;
}

.footer-links a:hover{
text-decoration:underline;
}

/* MOBILE */

@media (max-width:768px){

body{
font-size:16px;
}

.hero{
padding:24px;
}

.cards{
grid-template-columns:1fr;
}

nav{
gap:8px;
}

}