:root {
  --bg: #ffffff;
  --ink: #0f1b3d;
  --muted: #5b6785;
  --green: #10b981;
  --yellow: #fcd34d;
  --purple: #8b5cf6;
}

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

html, body { background: var(--bg); }

body {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.blob { position: absolute; border-radius: 50%; filter: blur(80px); z-index: -1; }
.blob-a { width: 460px; height: 460px; background: var(--yellow); top: -140px; right: -100px; opacity: .4; }
.blob-b { width: 400px; height: 400px; background: var(--green); bottom: -120px; left: -140px; opacity: .22; }
.blob-c { width: 320px; height: 320px; background: var(--purple); top: 40%; left: 55%; opacity: .14; }

main {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; padding: 32px 16px; text-align: center;
}

.brand { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 24px; }
.logo { width: 42px; height: 42px; color: var(--green); }
.logo svg { width: 100%; height: 100%; display: block; }

h1 {
  font-size: clamp(52px, 12vw, 128px);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  animation: rise .8s ease-out both;
}
.hl {
  background: linear-gradient(transparent 60%, var(--yellow) 60%, var(--yellow) 90%, transparent 90%);
}

footer { text-align: center; padding: 24px 16px; font-size: 13px; font-weight: 600; color: var(--muted); }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { h1 { animation: none; } }