:root {
  color-scheme: dark;
  --bg: #081720;
  --panel: #0d202b;
  --text: #f4f8fb;
  --muted: #a5c0d0;
  --faint: #648093;
  --mint: #43ffc4;
  --purple: #a987ff;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
a { color: var(--mint); text-underline-offset: 3px; }
a:hover { color: #d8ff35; }
.top {
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  padding:16px clamp(16px, 4vw, 42px); border-bottom:1px solid #18313e;
}
.top .user { color:#7fb4e7; font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.nav { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.nav a {
  color:var(--text); text-decoration:none; border:1px solid #28414e;
  padding:7px 10px; font-size:12px; transition:background .15s,border-color .15s;
}
.nav a:hover, .nav a[aria-current="page"] { background:#142b37; border-color:#6a8b9b; }
header.hero { text-align:center; padding:clamp(44px, 8vw, 78px) 14px 0; }
.logo {
  font-family:Arial,Helvetica,sans-serif; font-weight:200;
  font-size:clamp(40px, 9vw, 84px); letter-spacing:-.1em; line-height:1.2;
}
.logo span { display:inline-block; -webkit-text-stroke:1px currentColor; text-shadow:0 0 2px currentColor; }
.c1{color:#d8ff35}.c2{color:#37ff65}.c3{color:#19f5c3}.c4{color:#27c9ff}
.c5{color:#4768ff}.c6{color:#ad45ff}.c7{color:#ff39c7}.c8{color:#ff3659}.c9{color:#ff9d35}
.tag { color:var(--muted); font-size:12px; margin:35px 0 0; }
.ticker { overflow:hidden; white-space:nowrap; color:var(--muted); font-size:12px; margin:50px auto 0; max-width:850px; }
.ticker span { display:inline-block; padding-left:100%; animation:scroll 23s linear infinite; }
@keyframes scroll { to { transform:translateX(-100%); } }
.grid {
  display:grid; grid-template-columns:repeat(5,minmax(80px,1fr)); gap:36px 18px;
  max-width:1120px; margin:65px auto 42px; padding:0 22px;
}
.service {
  display:flex; align-items:center; flex-direction:column; text-align:center;
  text-decoration:none; color:var(--text); padding:5px;
}
.icon { height:64px; width:64px; margin-bottom:12px; display:grid; place-items:center; color:var(--c); transition:transform .18s; }
.icon svg { width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.service:hover .icon { transform:translateY(-5px) scale(1.06); }
.label { font-size:15px; line-height:1.35; }
.dot { width:10px; height:10px; border-radius:50%; background:#00f52b; margin-top:10px; }
.dot.soon { background:#ffb52e; }
.page {
  max-width:800px; margin:clamp(42px,8vw,88px) auto 60px; padding:0 22px;
  min-height:45vh;
}
.eyebrow { color:var(--faint); text-transform:uppercase; letter-spacing:.12em; font-size:11px; margin:0 0 14px; }
h1 { font-size:clamp(26px,5vw,42px); font-weight:500; line-height:1.2; margin:0 0 26px; }
h2 { font-size:19px; font-weight:500; color:var(--purple); margin:36px 0 14px; }
p, li { color:#c2d2dc; font-size:14px; line-height:1.9; }
p { margin:0 0 18px; }
strong { color:#ff8abf; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-top:28px; }
.card { display:block; background:var(--panel); border:1px solid #203a47; padding:18px; text-decoration:none; color:var(--text); }
.card:hover { border-color:var(--mint); }
.card h2 { margin:0 0 8px; font-size:16px; color:var(--text); }
.card p { margin:0; font-size:12px; line-height:1.7; }
.back { display:inline-block; color:var(--mint); margin-bottom:26px; font-size:12px; text-decoration:none; }
.back:hover { text-decoration:underline; }
footer { text-align:center; color:var(--faint); font-size:11px; padding:28px 16px; border-top:1px solid #18313e; }
@media(max-width:720px) {
  .top { align-items:flex-start; flex-direction:column; }
  .nav { justify-content:flex-start; }
  .grid { grid-template-columns:repeat(3,minmax(80px,1fr)); gap:32px 10px; margin-top:50px; padding:0 12px; }
  .icon { width:56px; height:56px; }
  .label { font-size:13px; }
  .tag { margin-top:26px; }
  .ticker { margin-top:42px; }
}
@media(max-width:380px) { .grid { grid-template-columns:repeat(2,minmax(80px,1fr)); } }
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .ticker span { animation:none; padding-left:0; white-space:normal; }
  .icon { transition:none; }
}