:root {
  --ink: #0b2a55;
  --muted: #5a7394;
  --paper: #f4f8fc;
  --accent: #1289d8;
  --accent-deep: #0a4f9c;
  --line: rgba(11, 42, 85, 0.12);
}

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

html,
body {
  min-height: 100%;
}

body {
  font-family: "Noto Sans SC", "Outfit", sans-serif;
  color: var(--ink);
  background: var(--paper);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
}

.bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(1100px 680px at 8% -8%, rgba(18, 137, 216, 0.18), transparent 55%),
    radial-gradient(900px 560px at 100% 0%, rgba(10, 79, 156, 0.14), transparent 52%),
    linear-gradient(165deg, #f7fbff 0%, #eef5fb 46%, #e7f0f8 100%);
}

.grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.28;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(18, 137, 216, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 137, 216, 0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 35%, transparent 78%);
}

.stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1.5rem 3rem;
  animation: rise 900ms ease-out both;
}

.logo {
  width: min(360px, 72vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 36px rgba(10, 79, 156, 0.14));
  animation: fade 1s ease-out both;
}

.headline {
  margin-top: 1.5rem;
  font-weight: 500;
  font-size: clamp(1.15rem, 2.8vw, 1.5rem);
  letter-spacing: 0.34em;
  color: var(--accent);
}

.lede {
  margin-top: 0.9rem;
  max-width: 28rem;
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.75;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.beian {
  padding: 1.25rem 1rem 1.75rem;
  text-align: center;
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(8px);
}

.company {
  margin-bottom: 0.45rem;
  color: var(--ink);
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.beian a {
  color: var(--muted);
  text-decoration: none;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  transition: color 200ms ease;
}

.beian a:hover,
.beian a:focus-visible {
  color: var(--accent-deep);
  outline: none;
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 640px) {
  .headline {
    letter-spacing: 0.2em;
  }

  .stage {
    padding-top: 3.25rem;
  }
}