:root{
  --bg: #070a12;
  --fg: #e6eaff;
  --muted:#9aa3b2;
  --card:#0e1424;
  --edge:#1d2336;
  --accent:#7c3aed;
  --accent2:#22c55e;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, "Helvetica Neue", Arial;
  color:var(--fg);
  background: var(--bg);
  overflow-x:hidden;
}

/* Animated gradient "nebula" background */
.bg{
  position:fixed;
  inset:-20vh -20vw -20vh -20vw;
  z-index:-1;
  filter: blur(40px) saturate(110%);
  opacity:.75;
}
.bg::before,
.bg::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(35% 40% at 20% 30%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(45% 50% at 80% 25%, rgba(34,197,94,.30), transparent 60%),
    radial-gradient(30% 30% at 60% 75%, rgba(59,130,246,.28), transparent 60%);
  animation: drift 32s linear infinite;
}
.bg::after{
  mix-blend-mode: screen;
  filter: hue-rotate(30deg) contrast(105%);
  animation: drift2 46s linear infinite reverse;
  opacity:.9;
}

@keyframes drift{
  0%   { transform: translate3d(-3%, -2%, 0) rotate(0deg) scale(1.03); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(180deg) scale(1.08); }
  100% { transform: translate3d(-3%, -2%, 0) rotate(360deg) scale(1.03); }
}
@keyframes drift2{
  0%   { transform: translate3d(2%, 3%, 0) rotate(0deg) scale(1.06); }
  50%  { transform: translate3d(-2%, -3%, 0) rotate(180deg) scale(1.00); }
  100% { transform: translate3d(2%, 3%, 0) rotate(360deg) scale(1.06); }
}

.container{max-width:1100px;margin:0 auto;padding:24px}
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit}
.brand .name{font-weight:700;letter-spacing:.4px}
.badge{font-size:12px;padding:4px 8px;border:1px solid var(--edge);border-radius:999px;color:var(--muted);background:rgba(255,255,255,.02)}
.hero{padding:64px 0 36px; display:grid; grid-template-columns:1.2fr .8fr; gap:32px}
@media (max-width: 900px){ .hero{grid-template-columns:1fr} }
h1{font-size: clamp(34px, 4vw, 56px); margin:10px 0 6px}
.lead{color:var(--muted);font-size: clamp(16px, 1.6vw, 20px);line-height:1.6}
.card{background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), var(--card);
  border:1px solid var(--edge); border-radius:18px; padding:18px; backdrop-filter: blur(4px)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width: 900px){ .grid{grid-template-columns:1fr} }
.kicker{letter-spacing:.4px;text-transform:uppercase;font-size:12px;color:var(--muted)}
footer{color:var(--muted);border-top:1px solid var(--edge);padding:24px 0;margin-top:36px}
.logo{width:40px;height:40px}
pre{white-space:pre-wrap;word-wrap:break-word}
.sep{height:1px;background:linear-gradient(90deg,transparent,var(--edge),transparent);margin:18px 0}
.note{font-size:13px;color:var(--muted)}