:root {
  --ink: #0b1f33;
  --muted: #4a6278;
  --sky: #e8f3fb;
  --sky-deep: #b7d8f0;
  --brand: #1a7fd4;
  --brand-press: #1366ad;
  --disabled: #b8c4d0;
  --disabled-text: #6f7f8f;
  --card: rgba(255, 255, 255, 0.72);
  --shadow: 0 18px 50px rgba(26, 80, 130, 0.12);
}

* {
  box-sizing: border-box;
}

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

body {
  font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--ink);
  background:
    linear-gradient(165deg, #f4f9fd 0%, var(--sky) 42%, #d7ebf8 100%);
  overflow-x: hidden;
}

.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  opacity: 0.55;
}

.glow-a {
  width: min(70vw, 520px);
  height: min(70vw, 520px);
  top: -12%;
  right: -8%;
  background: radial-gradient(circle, #8ec8f2 0%, transparent 68%);
  animation: drift 14s ease-in-out infinite alternate;
}

.glow-b {
  width: min(55vw, 420px);
  height: min(55vw, 420px);
  bottom: 8%;
  left: -10%;
  background: radial-gradient(circle, #c5e4f8 0%, transparent 70%);
  animation: drift 18s ease-in-out infinite alternate-reverse;
}

.bird-mark {
  position: absolute;
  right: max(6vw, 24px);
  top: 18vh;
  width: min(42vw, 280px);
  height: min(42vw, 280px);
  border-radius: 48% 52% 44% 56%;
  background:
    radial-gradient(circle at 35% 35%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(145deg, #5aaeeb 0%, #1a7fd4 55%, #0f5f9e 100%);
  opacity: 0.22;
  transform: rotate(-18deg);
  animation: floaty 9s ease-in-out infinite;
}

@media (max-width: 720px) {
  .bird-mark {
    top: 8vh;
    opacity: 0.16;
    width: min(58vw, 220px);
    height: min(58vw, 220px);
  }
}

.hero {
  position: relative;
  z-index: 1;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 8vw, 96px) clamp(20px, 6vw, 80px) 96px;
  max-width: 920px;
}

.brand {
  margin: 0;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  font-weight: 800;
  font-size: clamp(3.4rem, 12vw, 6.5rem);
  letter-spacing: 0.04em;
  line-height: 0.95;
  color: var(--brand);
  text-shadow: 0 10px 40px rgba(26, 127, 212, 0.18);
}

.tagline {
  margin: 18px 0 0;
  font-family: "Outfit", "Noto Sans SC", sans-serif;
  font-weight: 700;
  font-size: clamp(1.35rem, 3.6vw, 2rem);
  line-height: 1.25;
  color: var(--ink);
  max-width: 16em;
}

.lead {
  margin: 14px 0 0;
  max-width: 28em;
  font-size: clamp(0.95rem, 2.2vw, 1.08rem);
  line-height: 1.65;
  color: var(--muted);
}

.cta {
  margin-top: clamp(28px, 5vw, 40px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  box-shadow: var(--shadow);
}

.btn-ready {
  background: var(--brand);
  color: #fff;
}

.btn-ready:hover {
  background: var(--brand-press);
  transform: translateY(-1px);
}

.btn-ready:active {
  transform: translateY(0);
}

.btn-disabled,
.btn[aria-disabled="true"] {
  background: var(--disabled);
  color: var(--disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

.version-hint {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  min-height: 1.2em;
}

.foot {
  position: relative;
  z-index: 1;
  padding: 20px clamp(20px, 6vw, 80px) 28px;
  color: var(--muted);
  font-size: 0.85rem;
}

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: rise 0.7s ease forwards;
}

.delay-1 { animation-delay: 0.08s; }
.delay-2 { animation-delay: 0.16s; }
.delay-3 { animation-delay: 0.26s; }

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

@keyframes drift {
  from { transform: translate(0, 0); }
  to { transform: translate(-18px, 22px); }
}

@keyframes floaty {
  0%, 100% { transform: rotate(-18deg) translateY(0); }
  50% { transform: rotate(-14deg) translateY(-12px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .glow,
  .bird-mark {
    animation: none !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
  }
}