:root {
  color-scheme: dark;
  font-family: 'DM Sans', sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #f8f7fc;
  --muted: #aaa8ba;
  --bg: #11111b;
  --pink: #ff5c92;
  --orange: #ff9a55;
  --yellow: #ffd66b;
  --blue: #747cff;
  --mint: #75e5ca;
}

* { box-sizing: border-box; }

html { min-width: 320px; min-height: 100%; background: var(--bg); }

body { min-width: 320px; min-height: 100vh; margin: 0; color: var(--ink); }

a { color: inherit; }

.page-shell {
  position: relative;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  min-height: 100vh;
  overflow: hidden;
  padding: 32px clamp(24px, 7vw, 112px) 24px;
  background:
    radial-gradient(ellipse at 51% 43%, rgba(71, 49, 110, .22), transparent 36%),
    linear-gradient(135deg, #11111b 0%, #14131f 48%, #11111b 100%);
}

.ambient { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.ambient--pink { top: -190px; left: 12%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(247, 69, 133, .13), transparent 70%); }
.ambient--blue { right: -180px; bottom: 4%; width: 440px; height: 440px; background: radial-gradient(circle, rgba(89, 106, 255, .15), transparent 70%); }
.ambient--yellow { right: 29%; top: 17%; width: 180px; height: 180px; background: radial-gradient(circle, rgba(255, 195, 84, .08), transparent 70%); }

.topbar, .footer { display: flex; align-items: center; justify-content: space-between; }
.topbar { min-height: 38px; }
.wordmark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: Manrope, sans-serif; font-size: 18px; font-weight: 800; letter-spacing: -.8px; }
.wordmark__dot { color: var(--pink); }
.wordmark__mark { display: flex; align-items: center; gap: 2px; width: 22px; height: 22px; }
.wordmark__mark i { display: block; width: 5px; border-radius: 5px; background: var(--mint); transform: rotate(30deg); }
.wordmark__mark i:nth-child(1) { height: 11px; opacity: .75; }
.wordmark__mark i:nth-child(2) { height: 19px; background: var(--pink); }
.wordmark__mark i:nth-child(3) { height: 14px; background: var(--yellow); }
.status { display: inline-flex; align-items: center; gap: 9px; color: #c1bfcd; font-size: 10px; font-weight: 700; letter-spacing: 1.6px; }
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 13px rgba(117, 229, 202, .85); }

.hero { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) minmax(340px, .9fr); align-items: center; gap: clamp(30px, 7vw, 110px); width: min(1180px, 100%); margin: 12px auto 24px; }
.hero__copy { position: relative; z-index: 1; padding: 30px 0; }
.eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 25px; color: #c6c1d2; font-size: 10px; font-weight: 700; letter-spacing: 2.2px; }
.eyebrow__line { width: 27px; height: 1px; background: linear-gradient(90deg, var(--pink), var(--yellow)); }
h1 { max-width: 650px; margin: 0; font-family: Manrope, sans-serif; font-size: clamp(56px, 7.5vw, 102px); font-weight: 700; line-height: .99; letter-spacing: -.075em; }
h1 span { color: transparent; background: linear-gradient(100deg, #ff689b 4%, #ffbd69 51%, #ffe27b 95%); background-clip: text; -webkit-background-clip: text; }
.hero__text { max-width: 440px; margin: 27px 0 0; color: var(--muted); font-size: 16px; line-height: 1.8; }
.hero__text strong { color: #e9e6f0; font-weight: 600; }
.hero__actions { display: flex; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 34px; }
.button { display: inline-flex; min-height: 50px; align-items: center; gap: 21px; padding: 0 19px 0 22px; border: 1px solid rgba(255,255,255,.16); border-radius: 8px; background: linear-gradient(105deg, #ff668f, #ff9a69 55%, #ffc96c); box-shadow: 0 9px 32px rgba(255, 102, 143, .19); color: #20131f; font-size: 13px; font-weight: 700; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); box-shadow: 0 13px 38px rgba(255, 102, 143, .3); }
.button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.button__arrow { font-size: 19px; line-height: 1; }
.quiet-note { display: inline-flex; align-items: center; gap: 9px; color: #aaa6b9; font-size: 12px; }
.quiet-note__spark { color: var(--yellow); font-size: 17px; }

.art { position: relative; width: min(100%, 490px); aspect-ratio: 1; justify-self: center; }
.art__halo { position: absolute; inset: 7%; border: 1px solid rgba(210, 190, 255, .14); border-radius: 50%; }
.art__halo--outer { inset: 2%; border-style: dashed; opacity: .48; transform: rotate(-21deg); }
.art__halo--inner { inset: 15%; border-color: rgba(255, 255, 255, .13); box-shadow: 0 0 90px rgba(133, 103, 255, .11), inset 0 0 60px rgba(255, 255, 255, .025); }
.art__orbit { position: absolute; z-index: 1; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; transform: translate(-50%, -50%) rotate(-28deg); }
.art__orbit--one { width: 112%; height: 36%; border-color: rgba(255, 119, 162, .56); }
.art__orbit--two { width: 108%; height: 47%; border-color: rgba(119, 222, 216, .45); transform: translate(-50%, -50%) rotate(45deg); }
.art__sun { position: absolute; top: 50%; left: 50%; display: grid; width: 47%; aspect-ratio: 1; place-items: center; overflow: hidden; border-radius: 50%; background: radial-gradient(circle at 36% 28%, #fff0a4 0, #ffc968 22%, #ff8e71 60%, #ff5c92 100%); box-shadow: 0 0 35px rgba(255, 144, 108, .42), 0 0 110px rgba(255, 94, 153, .18); transform: translate(-50%, -50%); }
.art__sun::after { position: absolute; right: 0; bottom: 0; left: 0; height: 48%; background: linear-gradient(180deg, rgba(204, 63, 138, 0), rgba(204, 63, 138, .36)); content: ''; }
.art__sunshine { margin-top: -7px; color: rgba(255, 255, 255, .85); font-size: clamp(56px, 8vw, 100px); line-height: 1; text-shadow: 0 3px 20px rgba(255, 255, 255, .4); }
.art__spark { position: absolute; z-index: 2; color: var(--ink); text-shadow: 0 0 18px currentColor; }
.art__spark--one { top: 17%; left: 22%; color: #ffe180; font-size: 28px; }
.art__spark--two { top: 25%; right: 15%; color: #83e8d4; font-size: 34px; }
.art__spark--three { right: 19%; bottom: 18%; color: #ff78a5; font-size: 25px; }
.art__pill { position: absolute; z-index: 2; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 20px currentColor; }
.art__pill--one { top: 32%; left: 8%; color: #75e5ca; background: currentColor; }
.art__pill--two { right: 9%; bottom: 34%; width: 8px; height: 8px; color: #ffc86a; background: currentColor; }
.art__caption { position: absolute; right: 0; bottom: 5%; display: flex; align-items: center; gap: 9px; color: #b5b0c3; font-size: 9px; font-weight: 700; letter-spacing: 1.8px; }
.art__caption-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 10px var(--pink); }

.footer { min-height: 38px; border-top: 1px solid rgba(255,255,255,.09); color: #8c899c; font-size: 11px; }
.footer__message { color: #aaa6b7; }
.footer__message span { margin-left: 5px; color: var(--mint); }

@media (max-width: 760px) {
  .page-shell { padding: 24px 24px 18px; }
  .hero { grid-template-columns: 1fr; gap: 0; margin: 0 auto 20px; }
  .hero__copy { padding: 70px 0 4px; }
  .eyebrow { margin-bottom: 20px; font-size: 9px; }
  h1 { font-size: clamp(56px, 13vw, 82px); }
  .hero__text { margin-top: 21px; font-size: 15px; }
  .hero__actions { margin-top: 26px; }
  .art { width: min(82vw, 360px); margin: 8px auto 14px; }
  .art__caption { right: -1%; bottom: 1%; }
  .footer { gap: 12px; font-size: 10px; }
}

@media (max-width: 420px) {
  .status { font-size: 8px; letter-spacing: 1.1px; }
  .hero__actions { align-items: flex-start; flex-direction: column; gap: 16px; }
  .art { width: min(88vw, 330px); }
  .footer__message { text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}