:root{
  --bg:#000000;
  --bg-alt:#111111;
  --text:#f3f3f3;
  --muted:#cfcfcf;
  --gold:#D4AF37;
  --card:#0d0d0d;
  --maxw:1100px;
  --radius:18px;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.6}
a{color:var(--gold);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:var(--maxw);margin:0 auto;padding:0 20px}
header{
  position:sticky;top:0;background:rgba(0,0,0,.7);backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid rgba(212,175,55,.25); z-index:10;
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:12px}
.logo img{height:36px;width:auto;display:block}
.brand{font-weight:700;letter-spacing:.4px}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{padding:8px 10px;border-radius:10px}
nav a:hover{background:rgba(212,175,55,.12)}
.btn{
  display:inline-block;padding:12px 20px;border-radius:12px;background:var(--gold);color:#000;
  font-weight:700;border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)
}
.btn:hover{filter:brightness(1.05)}
.hero{
  padding:80px 0 60px;background:linear-gradient(180deg, rgba(212,175,55,.06), transparent 40%);
}
.hero h1{font-size: clamp(28px, 5vw, 48px);line-height:1.15;margin:0 0 10px}
.hero p{font-size: clamp(16px, 2.2vw, 20px);color:var(--muted);margin:0 0 26px}
.grid{display:grid;gap:22px}
.cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:26px}
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);padding:20px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card h3{margin:0 0 8px}
.section{padding:60px 0;border-top:1px solid rgba(255,255,255,.06)}
.section h2{font-size: clamp(22px, 3.2vw, 32px);margin:0 0 16px}
.section p.lead{color:var(--muted);margin-top:0}
.framework{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.framework .pill{background:#0b0b0b;border:1px solid rgba(212,175,55,.25);border-radius:16px;padding:18px}
.pill h3{margin:0 0 8px;color:var(--gold)}
.cta{background:var(--bg-alt);text-align:center;padding:70px 0}
footer{padding:40px 0;color:#bbb;border-top:1px solid rgba(255,255,255,.08)}
.small{font-size:14px;color:#b7b7b7}
hr.sep{border:none;border-top:1px solid rgba(255,255,255,.08);margin:24px 0}
/* Responsive nav */
.burger{display:none}
@media (max-width: 800px){
  nav ul{display:none}
  .burger{display:block;padding:8px 10px;border:1px solid rgba(212,175,55,.35);border-radius:10px;background:transparent;color:var(--gold)}
}