:root{

--bg:#070b12;
--card:#141b24;
--gold:#d4af37;
--text:#f5f5f5;
--muted:#9ea7b3;
--border:#242c37;

}

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

background:var(--bg);
color:var(--text);
font-family:Inter,-apple-system,BlinkMacSystemFont,sans-serif;
line-height:1.6;

}

.container{

width:min(1200px,92%);
margin:auto;

}

/* Navbar */

header{

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

}

.navbar{

display:flex;
justify-content:space-between;
align-items:center;
padding:24px 0;

}

.logo{

font-size:32px;
font-weight:700;
color:var(--gold);
letter-spacing:2px;

}

nav{

display:flex;
gap:28px;

}

nav a{

color:var(--text);
text-decoration:none;
opacity:.8;
transition:.2s;

}

nav a:hover{

opacity:1;

}

/* Hero */

.hero{

padding:140px 0;
text-align:center;

}

.badge{

display:inline-block;
padding:8px 18px;
background:#1b2430;
border-radius:999px;
color:var(--gold);
margin-bottom:24px;

}

.hero h1{

font-size:72px;
line-height:1.1;
margin-bottom:24px;

}

.hero p{

font-size:22px;
color:var(--muted);
margin-bottom:40px;

}

/* Buttons */

.actions{

display:flex;
justify-content:center;
gap:18px;
flex-wrap:wrap;

}

.btn{

padding:15px 28px;
border-radius:14px;
text-decoration:none;
font-weight:600;
transition:.25s;

}

.btn:hover{

transform:translateY(-4px);

}

.btn-primary{

background:var(--gold);
color:#111;

}

.btn-secondary{

background:var(--card);
color:white;

}

/* Cards */

.features{

padding:80px 0;

}

.cards{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:28px;

}

.card{

background:var(--card);
padding:36px;
border-radius:18px;
border:1px solid var(--border);
transition:.25s;

}

.card:hover{

transform:translateY(-8px);

}

.card h2{

margin-bottom:16px;

}

.card p{

color:var(--muted);

}

/* Framework */

.framework{

padding:100px 0;
text-align:center;

}

.framework h2{

font-size:48px;
margin-bottom:40px;

}

.grid{

display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;

}

.grid div{

background:var(--card);
padding:34px;
border-radius:18px;
border:1px solid var(--border);
transition:.25s;

}

.grid div:hover{

transform:translateY(-6px);

}

/* Footer */

footer{

margin-top:100px;
border-top:1px solid var(--border);

}

.footer{

display:flex;
justify-content:space-between;
padding:30px 0;
color:var(--muted);

}

/* Responsive */

@media(max-width:900px){

.cards{

grid-template-columns:1fr;

}

.grid{

grid-template-columns:1fr;

}

.hero h1{

font-size:48px;

}

}

@media(max-width:640px){

.navbar{

flex-direction:column;
gap:20px;

}

nav{

flex-wrap:wrap;
justify-content:center;

}

.hero{

padding:90px 0;

}

.hero h1{

font-size:38px;

}

.hero p{

font-size:18px;

}

.footer{

flex-direction:column;
gap:12px;
text-align:center;

}

}