* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #eaeaea;
  background: radial-gradient(1200px 600px at 50% -10%, #1f2a44 0%, #0b0f1a 55%, #05070c 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.wrap {
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 48px 32px;
  backdrop-filter: blur(14px);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
}

.logo {
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.5px;
  color: #fff;
  margin-bottom: 28px;
}
.logo span { color: #6ea8fe; }

h1 {
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 14px;
  background: linear-gradient(90deg, #ffffff 0%, #a7c1ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sub {
  font-size: 16px;
  color: #a7b0c2;
  margin-bottom: 32px;
  line-height: 1.5;
}

.progress {
  height: 6px;
  width: 100%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 28px;
}

.bar {
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: linear-gradient(90deg, #6ea8fe, #8e7dff);
  animation: slide 2.4s ease-in-out infinite alternate;
}

@keyframes slide {
  from { width: 20%; }
  to   { width: 85%; }
}

.contact {
  font-size: 14px;
  color: #8892a6;
}
.contact a {
  color: #6ea8fe;
  text-decoration: none;
  border-bottom: 1px dashed rgba(110, 168, 254, 0.4);
}
.contact a:hover {
  border-bottom-color: #6ea8fe;
}

footer {
  margin-top: 24px;
  font-size: 13px;
  color: #58617a;
}

@media (max-width: 480px) {
  .card { padding: 36px 22px; }
}