:root {
  --navy: #070b1c;
  --navy-soft: #0d132a;
  --white: #ffffff;
  --muted: #a9b2ca;
  --purple: #8244ff;
  --violet: #b24cf2;
  --mint: #2ad4a3;
  --line: rgba(255,255,255,.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--white);
  background: var(--navy);
  font-family: "DM Sans", sans-serif;
  line-height: 1.55;
}
img { display: block; max-width: 100%; }
button, input { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

.page-shell {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 70% 20%, rgba(124,60,255,.12), transparent 28%),
    radial-gradient(circle at 5% 65%, rgba(43,113,255,.09), transparent 25%),
    linear-gradient(145deg, #080c20 0%, #070b1c 58%, #0d0920 100%);
}
.grid-lines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, black, transparent 80%);
}
.ambient { position: absolute; border-radius: 50%; filter: blur(12px); pointer-events: none; }
.ambient-one { width: 420px; height: 420px; right: -150px; top: 10%; background: radial-gradient(circle, rgba(176,68,255,.3), transparent 68%); }
.ambient-two { width: 350px; height: 350px; left: -180px; top: 40%; background: radial-gradient(circle, rgba(45,126,255,.22), transparent 68%); }

.site-header,
.hero,
.preview-bar,
.sneak-peek,
footer {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
.site-header {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { padding: 8px 12px; border-radius: 9px; background: var(--white); }
.brand img { width: 190px; }
.status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #c8cfe0;
  background: rgba(255,255,255,.045);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.status i { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(42,212,163,.12); animation: pulse 2.2s infinite; }

.hero {
  min-height: 680px;
  padding: 70px 0 90px;
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  align-items: center;
  gap: 45px;
}
.hero-copy { position: relative; z-index: 4; }
.eyebrow {
  margin: 0 0 18px;
  color: #b9c2d8;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.eyebrow span {
  margin-right: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  color: var(--white);
  background: linear-gradient(135deg, var(--purple), var(--violet));
  letter-spacing: .09em;
}
h1, h2 {
  margin-top: 0;
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -.045em;
  line-height: 1.04;
}
h1 { max-width: 680px; margin-bottom: 24px; font-size: clamp(3.4rem, 6.5vw, 6rem); }
h1 em { color: transparent; background: linear-gradient(110deg, #9e66ff, #e28bff); background-clip: text; font-style: normal; }
h2 { margin-bottom: 20px; font-size: clamp(2.2rem, 4.4vw, 4.3rem); }
.lead { max-width: 630px; margin-bottom: 32px; color: var(--muted); font-size: 1.08rem; }

.signup-form { max-width: 610px; }
.input-wrap {
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255,255,255,.17);
  border-radius: 15px;
  background: rgba(255,255,255,.075);
  box-shadow: 0 20px 60px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
}
.input-wrap:focus-within { border-color: rgba(166,105,255,.75); box-shadow: 0 0 0 4px rgba(130,68,255,.12), 0 20px 60px rgba(0,0,0,.22); }
.input-wrap svg { flex: 0 0 21px; width: 21px; margin-left: 13px; fill: none; stroke: #929db8; stroke-width: 1.5; }
.input-wrap input {
  min-width: 0;
  flex: 1;
  padding: 14px 4px;
  border: 0;
  outline: 0;
  color: var(--white);
  background: transparent;
}
.input-wrap input::placeholder { color: #828ca7; }
.input-wrap button {
  flex: 0 0 auto;
  padding: 16px 20px;
  border: 0;
  border-radius: 10px;
  color: var(--white);
  background: linear-gradient(135deg, #6e38f5, #ad43ee);
  box-shadow: 0 9px 25px rgba(125,59,244,.3);
  cursor: pointer;
  font-weight: 700;
  transition: transform .2s, box-shadow .2s;
}
.input-wrap button:hover { transform: translateY(-2px); box-shadow: 0 13px 32px rgba(125,59,244,.45); }
.input-wrap button:disabled { cursor: wait; opacity: .7; }
.form-message { min-height: 20px; margin: 8px 5px 0; color: #ff9ca8; font-size: .76rem; }
.form-message.success { color: var(--mint); }
.privacy-note { display: flex; align-items: center; gap: 7px; margin: 2px 0 34px; color: #7f89a3; font-size: .72rem; }
.privacy-note svg { width: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; }

.value-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.value-points > div { padding: 13px 11px; display: flex; align-items: center; gap: 10px; border-top: 1px solid var(--line); }
.value-icon { display: grid; place-items: center; flex: 0 0 29px; width: 29px; height: 29px; border-radius: 8px; color: #c9b3ff; background: rgba(130,68,255,.14); font-weight: 700; }
.value-points p, .value-points strong, .value-points small { display: block; margin: 0; }
.value-points strong { color: #e2e6f0; font-size: .72rem; }
.value-points small { color: #77819b; font-size: .62rem; }

.hero-product { min-height: 570px; display: grid; place-items: center; position: relative; }
.product-image { width: min(720px, 112%); max-width: none; position: relative; z-index: 2; filter: drop-shadow(0 38px 35px rgba(0,0,0,.43)); transform: translateX(4%); animation: float 6s ease-in-out infinite; }
.orbit { position: absolute; border: 1px solid rgba(174,111,255,.22); border-radius: 50%; }
.orbit-one { width: 490px; height: 490px; animation: spin 32s linear infinite; }
.orbit-two { width: 375px; height: 375px; border-style: dashed; animation: spin 26s linear reverse infinite; }
.orbit::before, .orbit::after { content: ""; width: 8px; height: 8px; position: absolute; border-radius: 50%; background: #b061ff; box-shadow: 0 0 18px #a64dff; }
.orbit::before { top: 13%; left: 15%; }
.orbit::after { right: 7%; bottom: 26%; }
.floating-pill {
  padding: 9px 13px 9px 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  background: rgba(15,18,42,.78);
  box-shadow: 0 15px 35px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.floating-pill b { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--purple), var(--violet)); font-size: 1rem; }
.floating-pill span { color: #c4cbdd; font-size: .62rem; font-weight: 700; line-height: 1.15; text-transform: uppercase; letter-spacing: .06em; }
.pill-one { left: 3%; top: 15%; }
.pill-two { right: 1%; top: 36%; }
.pill-three { left: 13%; bottom: 12%; }

.preview-bar {
  min-height: 88px;
  padding: 18px 28px;
  display: flex;
  align-items: center;
  gap: 32px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
.preview-bar p { flex: 0 0 auto; margin: 0; color: #717c98; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.preview-items { width: 100%; display: flex; justify-content: space-between; gap: 14px; }
.preview-items span { display: flex; align-items: center; gap: 8px; color: #c8cede; font-size: .77rem; font-weight: 600; }
.preview-items i { width: 5px; height: 5px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 10px var(--purple); }

.sneak-peek {
  padding: 140px 0 110px;
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  align-items: center;
  gap: 75px;
}
.sneak-copy > p:not(.eyebrow) { color: var(--muted); }
.sneak-copy ul { margin: 26px 0 0; padding: 0; list-style: none; }
.sneak-copy li { padding: 8px 0 8px 25px; position: relative; color: #c4cbdd; font-size: .84rem; }
.sneak-copy li::before { content: "✓"; position: absolute; left: 0; color: #aa76ff; font-weight: 700; }
.app-preview { padding: 8px; position: relative; border: 1px solid rgba(255,255,255,.16); border-radius: 17px; background: #10152b; box-shadow: 0 35px 80px rgba(0,0,0,.34); transform: perspective(1100px) rotateY(-5deg) rotateX(2deg); }
.window-bar { height: 30px; padding: 0 6px; display: flex; align-items: center; gap: 5px; color: #7f89a3; font-size: .57rem; }
.window-bar i { width: 7px; height: 7px; border-radius: 50%; background: #ff6a67; }
.window-bar i:nth-child(2) { background: #f6c15b; }
.window-bar i:nth-child(3) { background: #41ca83; }
.window-bar span { margin-left: 7px; }
.app-preview img { max-height: 510px; width: 100%; border-radius: 9px; object-fit: cover; object-position: top; }
.preview-shade { position: absolute; inset: 38px 8px 8px; border-radius: 9px; pointer-events: none; background: linear-gradient(to top, rgba(7,11,28,.65), transparent 45%); }
.peek-label { padding: 7px 10px; position: absolute; right: 22px; bottom: 22px; border: 1px solid rgba(255,255,255,.15); border-radius: 7px; background: rgba(7,11,28,.82); color: #cab6ff; font-size: .63rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }

footer {
  padding: 28px 0 38px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--line);
  color: #68738e;
  font-size: .68rem;
}
footer p { margin: 0; }

.thanks-shell { min-height: 100vh; display: flex; flex-direction: column; }
.thanks-main {
  width: min(760px, calc(100% - 40px));
  margin: auto;
  padding: 70px 0 100px;
  position: relative;
  z-index: 2;
}
.thanks-card {
  padding: 58px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 28px;
  background: linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.035));
  box-shadow: 0 35px 90px rgba(0,0,0,.32);
  backdrop-filter: blur(18px);
  text-align: center;
}
.success-mark {
  width: 78px;
  height: 78px;
  margin: 0 auto 28px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(42,212,163,.4);
  border-radius: 50%;
  background: rgba(42,212,163,.11);
  box-shadow: 0 0 0 14px rgba(42,212,163,.045), 0 0 55px rgba(42,212,163,.16);
}
.success-mark svg { width: 38px; fill: none; stroke: var(--mint); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.thanks-card h1 { margin-bottom: 18px; font-size: clamp(3.2rem, 8vw, 5.7rem); }
.thanks-lead { max-width: 590px; margin: 0 auto 38px; color: var(--muted); font-size: 1.02rem; }
.next-steps { display: grid; gap: 9px; text-align: left; }
.next-steps > div {
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 15px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}
.next-steps b { display: grid; place-items: center; flex: 0 0 33px; width: 33px; height: 33px; border-radius: 8px; color: #d6c3ff; background: rgba(130,68,255,.18); font-size: .68rem; }
.next-steps span, .next-steps strong, .next-steps small { display: block; }
.next-steps strong { color: #e7eaf2; font-size: .8rem; }
.next-steps small { margin-top: 2px; color: #818ba5; font-size: .68rem; }
.back-link {
  margin-top: 34px;
  padding: 14px 19px;
  display: inline-flex;
  gap: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 10px;
  color: #d7c5ff;
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
  transition: background .2s, transform .2s;
}
.back-link:hover { transform: translateY(-2px); background: rgba(130,68,255,.12); }

@keyframes float { 0%, 100% { transform: translateX(4%) translateY(0); } 50% { transform: translateX(4%) translateY(-10px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(42,212,163,0); } }

@media (max-width: 950px) {
  .hero { padding-top: 45px; grid-template-columns: 1fr; text-align: center; }
  .lead, .signup-form { margin-inline: auto; }
  .privacy-note { justify-content: center; }
  .value-points { max-width: 650px; margin-inline: auto; }
  .hero-product { min-height: 470px; }
  .product-image { width: min(720px, 100%); transform: none; }
  .sneak-peek { grid-template-columns: 1fr; gap: 45px; }
  .sneak-copy { max-width: 650px; text-align: center; margin-inline: auto; }
  .sneak-copy li { display: inline-block; margin-inline: 8px; }
  .app-preview { transform: none; }
}

@media (max-width: 680px) {
  .site-header, .hero, .preview-bar, .sneak-peek, footer { width: min(100% - 28px, 1180px); }
  .site-header { height: 78px; }
  .brand img { width: 150px; }
  .status { font-size: .6rem; }
  .hero { padding: 45px 0 65px; }
  h1 { font-size: clamp(2.8rem, 14vw, 4.3rem); }
  .lead { font-size: .94rem; }
  .input-wrap { padding: 5px; display: grid; grid-template-columns: auto 1fr; }
  .input-wrap button { grid-column: 1 / -1; width: 100%; }
  .value-points { grid-template-columns: 1fr; text-align: left; }
  .value-points > div { justify-content: center; }
  .hero-product { min-height: 310px; }
  .orbit-one { width: 300px; height: 300px; }
  .orbit-two { width: 230px; height: 230px; }
  .floating-pill { display: none; }
  .preview-bar { display: block; }
  .preview-bar p { margin-bottom: 14px; text-align: center; }
  .preview-items { flex-wrap: wrap; justify-content: center; }
  .sneak-peek { padding: 90px 0 75px; }
  .sneak-copy li { display: block; text-align: left; }
  footer { display: block; text-align: center; }
  footer p + p { margin-top: 7px; }
  .thanks-main { width: min(100% - 28px, 760px); padding: 45px 0 70px; }
  .thanks-card { padding: 38px 19px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto !important; }
}