:root{
  --max-width: 1100px;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#fff;color:#111;font-family:system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial}
a{color:inherit;text-decoration:none}

.nav-wrap{position:sticky;top:0;background:#fff;z-index:50;border-bottom:1px solid rgba(0,0,0,0.04)}
.nav{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:center;padding:12px;gap:12px;position:relative}
.brand{font-weight:700;position:absolute;left:16px;top:12px}
.nav-toggle{position:absolute;right:16px;top:10px}
.nav-toggle{display:none;background:none;border:0;font-size:20px}
.nav-links{list-style:none;display:flex;gap:18px;margin:0;padding:0}
.nav-links a{padding:8px 6px;border-radius:6px}

.home-only-image{max-width:var(--max-width);margin:36px auto;padding:24px;display:flex;justify-content:center}
.home-only-image img{max-width:100%;height:auto;border-radius:8px}

.section{max-width:var(--max-width);margin:0 auto;padding:32px 24px;border-top:1px solid rgba(0,0,0,0.04)}

.site-footer{max-width:var(--max-width);margin:24px auto 32px;padding:0 24px;text-align:center;font-weight:700}

@media (max-width:800px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:56px;right:12px;background:#fff;flex-direction:column;padding:12px;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,0.08);display:none}
  .nav-links.open{display:flex}
  .hero{flex-direction:column;padding:16px;margin:20px 12px}
  .hero h1{font-size:1.5rem}
}