:root {
  --bg0: #05060b;
  --bg1: #0a0e1a;
  --bg2: #0f1a2b;
  --indigo: #6366f1;
  --violet: #7c3aed;
  --cyan: #22d3ee;
  --slate: #94a3b8;
  --text: #e5e7eb;
  --muted: #9aa3b2;
  --accent: #a78bfa;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font: 16px/1.6 ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, #121a31 0%, #0a0e1a 45%, #05060b 100%);
  overflow-x: hidden;
}

/* Animated starfield-ish background */
.bg::before, .bg::after {
  content: "";
  position: fixed; inset: -10vmax;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.15) 50%, transparent 55%) repeat,
    radial-gradient(1px 1px at 70% 60%, rgba(255,255,255,.08) 50%, transparent 55%) repeat;
  background-size: 140px 140px, 100px 100px;
  mix-blend-mode: screen;
  animation: drift 120s linear infinite;
}
.bg::after { animation-duration: 180s; opacity: .5; }
@keyframes drift { to { transform: translate3d(2%, -2%, 0); } }

.site-header { text-align:center; padding: 3rem 1rem 0; }
.site-header h1 {
  margin: 0;
  font-size: clamp(2rem, 3vw + 1rem, 3.4rem);
  letter-spacing: 1px;
  text-shadow: 0 0 20px rgba(124,58,237,.25);
}
.site-header .accent {
  color: var(--accent);
  text-shadow: 0 0 24px rgba(99,102,241,.35);
}
.tag { margin-top:.4rem; color: var(--muted); font-size:.95rem; }

.hero {
  display:grid; place-items:center; gap: 1.5rem;
  min-height: 62vh; padding: 1.5rem;
}
.helm {
  width: min(520px, 72vw);
  filter: drop-shadow(0 30px 80px rgba(99,102,241,.25));
  transform: translateZ(0);
  animation: float 10s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-8px) }
}
.helm-base { fill: #0d1428; stroke: #223058; stroke-width: 2; }
.crest { fill: #131c35; stroke: #2b3b6b; stroke-width: 1.5; }
.glow { fill: url(#glow); filter: url(#soft); opacity:.35 }

.cta { display:flex; gap: .8rem; }
.button, .ghost {
  display:inline-block; padding: .8rem 1.1rem; border-radius: 12px;
  text-decoration:none; font-weight:600; letter-spacing:.4px;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}
.button {
  background: linear-gradient(135deg, var(--indigo), var(--violet));
  color: white;
  box-shadow: 0 10px 30px rgba(124,58,237,.25);
}
.button:hover { transform: translateY(-1px); box-shadow: 0 14px 40px rgba(124,58,237,.35); }
.ghost {
  color: var(--slate); border: 1px solid rgba(148,163,184,.25); background: rgba(15,26,43,.4);
}
.ghost:hover { color:#fff; border-color: rgba(148,163,184,.5); transform: translateY(-1px); }

.site-footer { text-align:center; color: var(--muted); padding: 2.5rem 1rem 3rem; font-size:.9rem; }