:root{
  --bg:#0b1020;
  --fg:#e8ebf7;
  --muted:#a9b0c4;
  --card:#121933;
  --accent:#6366f1;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji, Noto Color Emoji;
  color:var(--fg);
  background:radial-gradient(1200px 800px at 80% -10%, #1e294f, transparent 60%),
             radial-gradient(800px 600px at -10% 10%, #0f1530, transparent 60%),
             var(--bg);
  line-height:1.5;
}

.wrap{
  min-height:calc(100% - 64px);
  display:grid;
  place-items:center;
  padding:48px 20px 16px;
  text-align:center;
}

h1{
  margin:0 0 8px;
  font-size:clamp(28px, 5vw, 48px);
  letter-spacing:0.2px;
}

.tagline{
  margin:0 0 24px;
  color:var(--muted);
}

.hero{max-width:860px;margin:20px auto}
.hero svg{width:100%;height:auto;display:block;border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.hero figcaption{margin-top:8px;color:#c4cae3;font-size:14px}

.meta{display:flex;gap:10px;align-items:center;justify-content:center;margin-top:18px;color:#c4cae3}
.link{color:#b9c0ff;text-decoration:none}
.link:hover{color:white;text-decoration:underline}

.footer{
  height:64px;
  display:grid;
  place-items:center;
  color:#c4cae3;
  font-size:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

@media (prefers-reduced-motion: no-preference) {
  .hero svg{transition:transform .3s ease}
  .hero svg:hover{transform:translateY(-2px)}
}

/* Background video layout */
.bg-video{position:fixed; inset:0; z-index:0; overflow:hidden}
.bg-video::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, rgba(30,41,79,.5), transparent 40%), rgba(0,0,0,.45)}
.bg-video iframe{
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:100vw; height:56.25vw; /* 16:9 based on viewport width */
  min-height:100vh; min-width:177.78vh; /* cover when viewport taller */
  pointer-events:none; /* prevent interactions */
}

/* Ensure content overlays video */
.wrap, .footer{position:relative; z-index:1}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce){
  .bg-video{display:none}
}