:root { --bg:#0b0f14; --ink:#e6edf3; --muted:#9aa4ae; --brand:#6ae3ff; --accent:#98ff6a; }
* { box-sizing:border-box } body { margin:0; font:16px/1.6 ui-sans-serif,system-ui,Segoe UI,Roboto,Arial; color:var(--ink); background:linear-gradient(180deg,#0b0f14,#0e141b 35%,#0b0f14); }
header { padding:28px 20px; border-bottom:1px solid rgba(255,255,255,.06); position:sticky; top:0; backdrop-filter:saturate(150%) blur(8px); background:rgba(11,15,20,.7) }
nav a { color:var(--muted); text-decoration:none; margin-right:16px }
nav a:hover { color:var(--ink) } .brand { color:var(--brand); font-weight:700; margin-right:18px }
main { max-width:980px; margin:40px auto; padding:0 20px }
.hero h1 { font-size:38px; margin:8px 0 } .hero p { color:var(--muted); max-width:760px }
.cta { display:inline-block; margin-top:14px; padding:10px 14px; border-radius:12px; border:1px solid rgba(255,255,255,.12); text-decoration:none; color:var(--ink) }
.kicker { color:var(--accent); font-weight:600; letter-spacing:.3px }
.card { border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:18px; margin:16px 0; background:rgba(255,255,255,.02) }
footer { color:var(--muted); padding:40px 20px; border-top:1px solid rgba(255,255,255,.06); text-align:center }
code { background:rgba(255,255,255,.06); padding:2px 6px; border-radius:6px }

/* logo in brand */
header .brand{display:inline-flex;align-items:center;gap:.5rem;font-weight:700}
header .brand img{height:24px;width:24px;display:block}

/* brand logo size */
header .brand img{height:48px;width:48px;display:block}

  
/* --- brand logo size & spacing --- */
header .brand{display:inline-flex;align-items:center;gap:.65rem}
header .brand img, header .brand .brand-logo{height:48px;width:48px;display:block}
@media (max-width: 480px){
  header .brand img, header .brand .brand-logo{height:36px;width:36px}
}
@media (min-width: 1280px){
  header .brand img, header .brand .brand-logo{height:56px;width:56px}
}