@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');

:root {
  --ink: #f1f0f9;
  --muted: #8c8b9a;
  --accent: #d895f5;
  --blue: #6f7cff;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #05060e; color: var(--ink); font-family: 'DM Sans', sans-serif; }
a { color: inherit; text-decoration: none; }

.hero {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 27px clamp(24px, 5vw, 76px) 30px;
  background: radial-gradient(ellipse 62% 44% at 50% 103%, #2c39c5 0%, #13142d 42%, #05060e 75%);
}
.hero__glow { position: absolute; left: 50%; z-index: -1; border-radius: 50%; pointer-events: none; transform: translateX(-50%); }
.hero__glow--top { top: -52%; width: 112%; height: 90%; background: radial-gradient(ellipse, #05060e 41%, #9a3ab0 57%, transparent 70%); opacity: .95; }
.hero__glow--bottom { bottom: -44%; width: 85%; height: 57%; background: radial-gradient(ellipse, #687aff 0%, #17216d 38%, transparent 69%); filter: blur(14px); opacity: .8; }

.site-nav { width: min(1280px, 100%); height: 59px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid rgba(244,241,251,.14); position: relative; z-index: 1; animation: appear .7s ease both; }
.brand { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 500; }
.brand__mark { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; overflow: hidden; }
.brand__mark img { width: 22px; height: 22px; object-fit: contain; }

.site-nav nav { display: flex; gap: clamp(18px, 2.6vw, 38px); color: var(--muted); font-size: 10px; }
.site-nav nav a, .nav-cta { transition: color .2s ease; }
.site-nav nav a:hover, .site-nav nav .is-active, .nav-cta:hover { color: var(--ink); }
.nav-cta { display: inline-flex; align-items: center; gap: 18px; border: 1px solid #a45bc6; border-radius: 99px; padding: 10px 12px 10px 17px; font-size: 10px; }
.nav-cta span { display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; color: #24142a; background: var(--accent); }

.hero__content { z-index: 2; width: 100%; text-align: center; margin: auto 0 0; padding: 8vh 0 31vh; animation: rise .9s .1s ease both; }
h1 { margin: 0 0 13px; font-size: clamp(42px, 6vw, 76px); font-weight: 400; line-height: .96; letter-spacing: -.075em; }
h1 em { display: block; color: var(--ink); font-style: normal; }
.hero__intro { margin: 0 auto 24px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.hero__button { display: inline-flex; align-items: center; gap: 24px; border: 1px solid #9d58c2; border-radius: 99px; padding: 9px 9px 9px 17px; font-size: 10px; transition: background .25s, color .25s; }
.hero__button span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #d796f5; color: #20162c; font-size: 14px; }
.hero__button:hover { background: #d796f5; color: #20162c; }
.balance-card { position: absolute; z-index: 3; left: 50%; bottom: 9%; width: min(248px, 52vw); transform: translateX(-50%); padding: 14px 15px 12px; border: 1px solid rgba(172, 186, 255, .65); border-radius: 12px; background: linear-gradient(135deg, rgba(42, 52, 126, .94), rgba(67, 58, 152, .9)); box-shadow: 0 15px 55px rgba(89, 105, 255, .7), inset 0 1px 1px rgba(255,255,255,.3); }
.balance-card > span, .balance-card__stats { color: #9aa3dc; font-size: 8px; }
.balance-card small { margin-left: 4px; color: #bac2ff; }
.balance-card strong { display: block; margin: 2px 0 13px; font-size: 25px; font-weight: 400; letter-spacing: -.05em; }
.balance-card__stats { display: flex; gap: 32px; }
.balance-card__stats b { display: block; margin-top: 4px; color: #dce0ff; font-weight: 400; }
.dashboard { position: absolute; z-index: 1; bottom: 14%; width: 140px; height: 110px; padding: 15px; border: 1px solid rgba(121, 128, 198, .15); border-radius: 12px; color: rgba(176, 181, 234, .4); font-size: 8px; background: rgba(20, 21, 57, .28); }
.dashboard--left { left: 13%; }.dashboard--right { right: 13%; }
.dashboard strong { display: block; margin-top: 22px; color: rgba(224, 225, 255, .5); font-size: 14px; font-weight: 400; }.dashboard i { display: block; width: 45px; height: 45px; margin: 10px auto; border: 1px solid rgba(149, 148, 255, .35); border-radius: 50%; }.dashboard b { display: block; height: 5px; margin-top: 12px; border-radius: 5px; background: rgba(157, 164, 229, .25); }
.hero__footer { display: flex; justify-content: center; gap: 12px; color: rgba(180, 183, 220, .5); font-size: 9px; }
.footer__dots { color: #838de0; letter-spacing: 3px; }

@keyframes appear { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 650px) {
  .hero { padding: 22px 20px 24px; }
  .site-nav { width: 100%; height: 50px; }.site-nav nav { display: none; }.nav-cta { font-size: 10px; }
  .hero__content { padding-bottom: 34vh; } h1 { font-size: clamp(40px, 11vw, 66px); }
  .hero__intro { font-size: 10px; }.dashboard { display: none; }.balance-card { bottom: 13%; }
  .hero__footer { font-size: 8px; }.desktop-only { display: none; }
}