:root {
  color-scheme: dark;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; background: #080611; color: #f8f4ff; }

.hero {
  align-items: center;
  background:
    radial-gradient(circle at 10% 12%, rgba(188, 44, 235, .32), transparent 28rem),
    radial-gradient(circle at 91% 48%, rgba(114, 49, 216, .28), transparent 33rem),
    radial-gradient(circle at 50% 100%, rgba(29, 100, 181, .2), transparent 32rem),
    #080611;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

nav { align-items: center; display: flex; justify-content: space-between; max-width: 1200px; padding: 24px 42px; width: 100%; z-index: 1; }
.brand { color: #f8f4ff; font-size: 20px; font-weight: 700; letter-spacing: 0; text-decoration: none; }
.brand span { color: #d745fd; }
.login, .cta { background: linear-gradient(100deg, #d543fa, #8e6cff); border-radius: 8px; color: white; font-weight: 700; padding: 11px 20px; text-decoration: none; }
.content { margin: auto; max-width: 850px; padding: 84px 24px 136px; text-align: center; z-index: 1; }
.eyebrow { border: 1px solid rgba(232, 170, 255, .33); border-radius: 20px; color: #eaa9ff; display: inline-block; font-size: 14px; margin: 0 0 26px; padding: 7px 13px; }
h1 { font-size: clamp(52px, 8vw, 104px); letter-spacing: 0; line-height: 1.08; margin: 0; }
h1::first-line { color: #fbf7ff; }
.subtitle { color: #bdb6ca; font-size: 17px; margin: 24px 0 36px; }
.cta { box-shadow: 0 10px 34px rgba(210, 67, 250, .35); display: inline-block; padding: 15px 28px; }
.footer-note { bottom: 44px; color: #9c95aa; font-size: 14px; margin: 0; position: absolute; }

@media (max-width: 600px) {
  nav { padding: 20px 22px; }
  .content { padding-bottom: 116px; }
  .subtitle { font-size: 16px; }
}