*{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg1:#0d152b; --bg2:#070b16; --fg:#f5f6fa;
  --muted:#b2bec3; --accent:#6c5ce7; --accent2:#a29bfe; --card:#0e1222cc;
}
html,body{height:100%}
body{
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color:var(--fg);
  background:radial-gradient(1200px 800px at 50% 30%, var(--bg1), var(--bg2));
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.container{
  width:min(920px, 95vw);
  background:var(--card);
  border:1px solid #1f2747;
  border-radius:24px;
  padding:36px 28px;
  box-shadow:0 10px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.02);
  backdrop-filter: blur(3px);
}
.brand{display:flex; align-items:center; gap:16px; justify-content:center}
.logo{
  width:54px; height:54px; flex:0 0 54px;
  filter: drop-shadow(0 0 12px rgba(108,92,231,.45));
  animation:float 5s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
h1{
  font-size:clamp(28px, 3.5vw, 40px);
  letter-spacing:.06em; font-weight:700;
  color:var(--accent);
  text-shadow:0 0 14px var(--accent), 0 0 28px var(--accent2);
  animation:glow 3s ease-in-out infinite alternate;
}
@keyframes glow{from{opacity:.95} to{opacity:1}}
.subtitle{
  margin-top:6px; color:var(--muted); text-align:center;
  font-size:clamp(14px, 1.8vw, 16px)
}
.grid{
  margin-top:24px; display:grid; gap:14px;
  grid-template-columns:repeat(4, minmax(0,1fr));
}
.card{
  padding:16px; border-radius:16px; border:1px solid #222b52;
  background:linear-gradient(180deg, rgba(20,28,56,.55), rgba(10,13,26,.55));
  text-align:center;
}
.card h3{font-size:15px; margin-bottom:6px}
.card p{font-size:13px; color:#98a0b3}
.footer{
  margin-top:22px; text-align:center; color:#6d7486; font-size:13px
}
@media (max-width:780px){ .grid{grid-template-columns:repeat(2,1fr)} }