:root{
--primary:#111827;
--accent:#7c3aed;
--light:#f3f4f6;
--text:#1f2937;
--muted:#6b7280;
--max:1050px;
}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif;background:#fff;color:var(--text);line-height:1.7}
.container{max-width:var(--max);margin:0 auto;padding:0 20px}
.narrow{max-width:800px}

.topbar{background:var(--primary);color:#fff;padding:14px 0}
.logo{font-weight:bold;font-size:18px;margin-bottom:10px}
.menu{display:flex;flex-wrap:wrap;gap:8px}
.menu a{color:#fff;text-decoration:none;font-size:13px;padding:4px 6px;background:rgba(255,255,255,0.08);border-radius:4px}
.menu a:hover{background:rgba(255,255,255,0.18)}

.hero{background:linear-gradient(120deg,#7c3aed,#4f46e5);color:#fff;padding:80px 0}
.hero h1{margin:0 0 15px;font-size:36px}
.intro{max-width:820px}

.section{padding:70px 0}
.section.alt{background:var(--light)}
h2{margin-top:0;font-size:28px;color:var(--primary)}
ul{padding-left:20px}
ul li{margin-bottom:6px}

.footer{background:var(--primary);color:#fff;padding:25px 0;text-align:center;font-size:14px;margin-top:40px}

@media(max-width:768px){
.hero h1{font-size:28px}
.menu{gap:6px}
}