:root {
  --ink: #f8f8ff;
  --muted: #c8c9dc;
  --cyan: #25d9ff;
  --lime: #b8f122;
  --pink: #ff3da7;
  --orange: #ff9d16;
  --violet: #8f5cff;
  --glass: rgba(12, 11, 30, .58);
  --line: rgba(255, 255, 255, .13);
  --shadow: 0 30px 90px rgba(0, 0, 0, .42);
}

* { box-sizing: border-box; }

html { min-height: 100%; color-scheme: dark; }

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 8% 12%, rgba(37, 217, 255, .22), transparent 30rem),
    radial-gradient(circle at 89% 17%, rgba(255, 61, 167, .22), transparent 30rem),
    radial-gradient(circle at 62% 90%, rgba(143, 92, 255, .22), transparent 34rem),
    linear-gradient(145deg, #080713 0%, #0e0b22 46%, #080716 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .42;
  background-image:
    linear-gradient(rgba(255,255,255,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.026) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: radial-gradient(circle at center, #000, transparent 78%);
}

body::after {
  content: "";
  position: fixed;
  width: 34rem;
  height: 34rem;
  left: calc(var(--pointer-x, 50%) - 17rem);
  top: calc(var(--pointer-y, 50%) - 17rem);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.075), transparent 66%);
  transition: left .12s ease-out, top .12s ease-out;
}

.aurora, .aurora::before, .aurora::after {
  position: fixed;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  opacity: .38;
  animation: drift 15s ease-in-out infinite alternate;
}

.aurora { width: 18rem; height: 18rem; left: -5rem; bottom: 4%; background: var(--cyan); }
.aurora::before { content: ""; width: 16rem; height: 16rem; left: 72vw; top: -55vh; background: var(--pink); animation-delay: -5s; }
.aurora::after { content: ""; width: 14rem; height: 14rem; left: 40vw; top: -5vh; background: var(--violet); animation-delay: -9s; }

.page {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: clamp(1.25rem, 4vw, 3.5rem);
}

.shell { width: min(100%, 1060px); }

.brandbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 0 1.2rem;
  padding: 0 .5rem;
}

.brand-logo {
  display: block;
  width: clamp(205px, 29vw, 320px);
  height: auto;
  filter: drop-shadow(0 9px 28px rgba(255, 61, 167, .22));
}

.live-pill, .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #ebeaff;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  backdrop-filter: blur(14px);
}

.live-pill { padding: .62rem .85rem; }
.eyebrow { padding: .55rem .78rem; margin-bottom: 1.4rem; }
.live-dot { width: .52rem; height: .52rem; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 .3rem rgba(184,241,34,.12), 0 0 18px var(--lime); }

.glass {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(1.5rem, 4vw, 2.4rem);
  padding: clamp(1.7rem, 5vw, 4.7rem);
  background:
    linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.025) 48%),
    var(--glass);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(26px) saturate(145%);
}

.glass::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 70%;
  height: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--lime), var(--orange), var(--pink), transparent);
  opacity: .9;
}

.content { position: relative; max-width: 760px; }

.code {
  margin: -.28em 0 -.12em;
  font-size: clamp(6.4rem, 23vw, 13.5rem);
  font-weight: 950;
  line-height: .96;
  letter-spacing: -.085em;
  background: linear-gradient(102deg, var(--cyan) 2%, var(--lime) 28%, var(--orange) 57%, var(--pink) 82%, var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 16px 34px rgba(143,92,255,.18));
}

h1 {
  max-width: 800px;
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.052em;
  text-wrap: balance;
}

.accent {
  background: linear-gradient(100deg, var(--cyan), var(--lime) 34%, var(--orange) 66%, var(--pink));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  max-width: 680px;
  margin: 1.35rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 2vw, 1.18rem);
  line-height: 1.75;
}

.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 3.2rem;
  padding: .86rem 1.18rem;
  border: 1px solid var(--line);
  border-radius: 1rem;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
  background: rgba(255,255,255,.065);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease;
}

.button.primary {
  border-color: transparent;
  color: #090713;
  background: linear-gradient(100deg, var(--cyan), var(--lime) 52%, #eaff81);
  box-shadow: 0 12px 32px rgba(37,217,255,.17);
}

.button:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.3); background-color: rgba(255,255,255,.11); }
.button.primary:hover { box-shadow: 0 16px 42px rgba(184,241,34,.22); }
.button:focus-visible { outline: 3px solid rgba(37,217,255,.72); outline-offset: 4px; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .8rem;
  margin-top: 2.4rem;
}

.feature {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 1.1rem;
  padding: 1rem;
  background: rgba(255,255,255,.035);
}

.feature b { display: block; margin-bottom: .3rem; font-size: .9rem; }
.feature span { color: #aeadc5; font-size: .8rem; }
.feature i { display: block; width: 1.7rem; height: 3px; margin-bottom: .75rem; border-radius: 1rem; background: linear-gradient(90deg, var(--cyan), var(--pink)); }

.meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 0 .45rem;
  color: #8f8fa9;
  font-size: .74rem;
  letter-spacing: .06em;
}

.mote {
  position: fixed;
  z-index: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 0 10px rgba(255,255,255,.8);
  opacity: 0;
  animation: rise var(--duration) linear infinite;
  animation-delay: var(--delay);
}

@keyframes rise {
  0% { transform: translate3d(0, 10vh, 0) scale(.5); opacity: 0; }
  14% { opacity: .62; }
  86% { opacity: .38; }
  100% { transform: translate3d(var(--drift), -110vh, 0) scale(1.6); opacity: 0; }
}

@keyframes drift { to { transform: translate3d(3rem, -2rem, 0) scale(1.18); } }

@media (max-width: 680px) {
  .brandbar { align-items: flex-start; flex-direction: column; }
  .glass { border-radius: 1.55rem; }
  .features { grid-template-columns: 1fr; }
  .meta { flex-direction: column; }
  .code { font-size: clamp(6rem, 39vw, 10rem); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  body::after { display: none; }
}