:root{
  --bg:#0b0b0c;
  --ink:#e8e8ea;
  --muted:#a2a2a8;
  --card:#141417;
  --line:rgba(255,255,255,.06);
  --brand:#6ee7ff;
  --accent:#8a7bff;
  --radius:16px;
  --wrap:1040px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family: system-ui, sans-serif; color:var(--ink); background:var(--bg); line-height:1.6;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:22px}
.topbar{position:sticky; top:0; background:#111}
.topbar .wrap{display:flex; justify-content:space-between; align-items:center}
.topbar nav a{color:var(--ink); margin-left:16px; text-decoration:none}
.brand span{font-size:26px; font-weight:700; color:#fff}
.brand{text-decoration:none}
.hero{padding:72px 0; text-align:left}
.hero h1{font-size:42px; margin:0 0 12px}
.hero .sub{color:var(--muted)}
.button{background:linear-gradient(135deg,var(--brand),var(--accent)); color:#000; padding:12px 16px; border-radius:10px; text-decoration:none; font-weight:bold}
.section{padding:40px 0; border-top:1px solid var(--line)}
.services .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; list-style:none; padding:0}
.card{background:var(--card); padding:16px; border-radius:var(--radius)}
.contact-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px}
.footer{border-top:1px solid var(--line); text-align:center; padding:20px; color:var(--muted)}