:root{
  --c1:#253848; /* brand dark */
  --c2:#a9cae9; /* brand light */
  --c3:#ffffff;
  --bg1:#0f1a22;
  --bg2:#17232d;
}

*{box-sizing:border-box}
html,body{
  height:100%;
  margin:0;
  padding:0;
  background: radial-gradient(1200px 800px at 20% 10%, var(--bg2), transparent 60%),
              radial-gradient(1200px 800px at 80% 90%, var(--c1), transparent 60%),
              linear-gradient(180deg, var(--bg1), #0b141a 60%, var(--bg1));
  overflow:hidden;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--c3);
}

#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Centered logo */
.logo-wrap{
  position:fixed;
  inset:0;
  display:grid;
  place-items:center;
  pointer-events:none;
  mix-blend-mode:screen;
}

.logo{
  width:min(38vmin, 420px);
  height:auto;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.45)) brightness(1.05) contrast(1.05);
  animation: float 10s ease-in-out infinite;
  user-select:none;
}

@keyframes float{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(0,-1.5vmin,0) scale(1.015); }
  100%{ transform: translate3d(0,0,0) scale(1); }
}

/* Subtle vignette */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(120vmax 120vmax at 50% 50%, transparent 60%, rgba(0,0,0,.25) 100%);
}