:root {
  --bg:#080808;
  --panel:#151515;
  --text:#f4f4f4;
  --muted:#c9c9c9;
  --line:#303030;
  --accent:#00aeef;
}
* { box-sizing:border-box; }
body {
  margin:0; font-family:Arial, sans-serif; background:var(--bg); color:var(--text);
  line-height:1.6;
}
a { color:inherit; }
.site-header {
  min-height:72px; padding:12px clamp(18px,4vw,56px); display:flex; align-items:center;
  justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); background:#111;
}
.site-header img { height:52px; width:auto; display:block; }
nav { display:flex; gap:16px; flex-wrap:wrap; font-weight:700; font-size:14px; text-transform:uppercase; }
nav a, footer a { color:var(--muted); text-decoration:none; }
nav a:hover, footer a:hover { color:var(--accent); }
main { max-width:1120px; margin:0 auto; padding:clamp(28px,6vw,76px) clamp(18px,4vw,42px); }
.hero {
  min-height:360px; display:flex; flex-direction:column; justify-content:center; gap:18px;
  border-bottom:1px solid var(--line); margin-bottom:44px; padding-bottom:36px;
}
.hero.split {
  display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:center;
}
.hero img { max-width:260px; width:100%; justify-self:end; background:#fff; border-radius:8px; padding:20px; }
.eyebrow { color:var(--accent); text-transform:uppercase; font-weight:800; letter-spacing:1px; margin:0; }
h1 { font-size:clamp(36px,6vw,64px); line-height:0.95; margin:0; text-transform:uppercase; }
h2 { font-size:24px; line-height:1.15; margin:0 0 12px; }
p { color:var(--muted); margin:0 0 16px; max-width:760px; }
.actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:6px; }
.actions a {
  background:var(--accent); color:#050505; padding:12px 18px; border-radius:6px;
  text-decoration:none; font-weight:800;
}
.actions a + a { background:transparent; color:var(--text); border:1px solid var(--line); }
.content-grid { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:28px; }
article, aside {
  background:var(--panel); border:1px solid var(--line); border-radius:8px; padding:24px;
}
strong { color:#fff; }
footer {
  border-top:1px solid var(--line); padding:22px clamp(18px,4vw,56px); display:flex;
  gap:18px; flex-wrap:wrap; background:#111; font-weight:700;
}
@media (max-width:760px) {
  .site-header, .hero.split, .content-grid { display:block; }
  nav { margin-top:12px; }
  .hero img { margin-top:24px; justify-self:start; }
}