html, body {
  margin: 0;
  padding: 0;
  font-family: 'Inter', Arial, sans-serif;
  background: radial-gradient(circle at 80% 10%, #01252a 0%, #174151 50%, #0a1720 100%);
  color: #e8f5fa;
  min-height: 100vh;
}

.container {
  max-width: 480px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 7rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 2.2rem;
  align-items: center;
  text-align: center;
}

.logo {
  width: 100%;
  max-width: 500px;
  height: 90px;
  margin: 0 auto 1.4rem auto;
  background: url('https://check.reifegrad.digital/logo_white.png') no-repeat center center / contain;
  border-radius: 18px;
  filter: drop-shadow(0 2px 18px #48ffdf66) drop-shadow(0 1px 20px #00c3ff33);
}

.glass-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
}

.hero-tagline {
  font-size: 1.34rem;
  font-weight: 900;
  background: linear-gradient(90deg, #48ffdf 20%, #00c3ff 80%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 1.13rem;
  font-weight: 400;
  line-height: 1.6;
  max-width: 360px;
}

.cta-btn {
  display: inline-block;
  margin-top: 1.2rem;
  background: linear-gradient(90deg, #48ffdf 20%, #00c3ff 80%);
  color: #002529;
  font-size: 1.16rem;
  font-weight: 700;
  border: none;
  border-radius: 2rem;
  padding: 0.85rem 2.2rem;
  box-shadow: 0 2px 24px 0 #48ffdf66;
  cursor: pointer;
  text-align: center;
}

.section {
  margin-top: 1.8rem;
  border-radius: 1.5rem;
  background: #0e2b34d4;
  box-shadow: 0 3px 24px 0 #003e476e;
  padding: 1.5rem 1.2rem;
  width: 100%;
  text-align: left;
}

.section-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  color: #5df6d7;
}

.section-list {
  display: flex;
  flex-direction: column;
  gap: 0.32rem;
}

.service-card {
  background: #12323b99;
  border-radius: 1rem;
  padding: 0.8rem 1.2rem;
  font-size: 1.08rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 500;
}

.section-steps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.step {
  font-size: 1.04rem;
  color: #c5f6fa;
  font-weight: 500;
  display: flex;
  gap: 0.65rem;
}

.step-number {
  color: #5df6d7;
  font-weight: 700;
}

.trust-section {
  margin-top: 1.3rem;
  text-align: left;
  color: #b2e6e0;
  font-size: 1.03rem;
  background: #0c2530a8;
  border-radius: 1.2rem;
  padding: 1.2rem 1.1rem;
}

.footer {
  margin-top: 3.2rem;
  text-align: center;
  font-size: 1.02rem;
  color: #7bf7c8;
  opacity: 0.7;
}

@media (max-width: 400px) {
  .container { padding: 1.2rem 0.3rem 5.5rem 0.3rem; }
  .logo { height: 56px; }
  .hero-tagline { font-size: 1rem; }
  .hero-description { font-size: 0.99rem; }
}