:root{
  --bg:#0f1115;
  --fg:#e7e9ee;
  --muted:#a9afbf;
  --accent:#e53935;
  --card:rgba(255,255,255,.06);
  --stroke:rgba(255,255,255,.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--fg);
  background: radial-gradient(1500px 900px at 10% -10%, rgba(229,57,53,.18), transparent 60%),
              radial-gradient(1200px 700px at 110% 30%, rgba(255,255,255,.06), transparent 60%),
              radial-gradient(900px 600px at 40% 120%, rgba(229,57,53,.14), transparent 60%),
              var(--bg);
  overflow-x:hidden;
}

.bg.deco::before,
.bg.deco::after{
  content:"";
  position:fixed;
  inset:auto;
  width:50vmax;height:50vmax;
  border-radius:50%;
  filter: blur(70px);
  opacity:.25;
  z-index:-1;
}
.bg.deco::before{ background:linear-gradient(45deg, var(--accent), #ff7a73); left:-15vmax; top:-10vmax; }
.bg.deco::after{ background:linear-gradient(45deg, #ffffff, #c7ccd8); right:-20vmax; bottom:-15vmax; }

.wrap{
  min-height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:72px 20px 40px;
  gap:18px;
}

.logo{
  width:min(64vw, 360px);
  height:auto;
  user-select:none;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.45));
  animation: float 6s ease-in-out infinite;
}
@keyframes float{
  0%,100%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
}

h1{
  margin:6px 0 6px;
  font-weight:800;
  letter-spacing:-.02em;
  font-size:clamp(28px, 5.8vw, 52px);
  line-height:1.08;
}

p{
  margin:0;
  color:var(--muted);
  font-size:clamp(16px, 2.4vw, 18px);
  max-width:70ch;
  line-height:1.7;
}

.foot{
  position:fixed;
  bottom:14px; left:0; right:0;
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

/* Light scheme if system prefers */
@media (prefers-color-scheme: light){
  :root{ --bg:#f7f7f9; --fg:#0f1115; --muted:#4b5563; --card:#ffffff; --stroke:#e5e7eb; }
  body{ background: radial-gradient(1500px 900px at 10% -10%, rgba(229,57,53,.12), transparent 60%),
                 radial-gradient(1200px 700px at 110% 30%, rgba(0,0,0,.05), transparent 60%),
                 radial-gradient(900px 600px at 40% 120%, rgba(229,57,53,.08), transparent 60%),
                 var(--bg); }
}