:root {
  --night: #061a21;
  --night-deep: #041318;
  --glass: rgba(15, 47, 55, 0.62);
  --glass-strong: rgba(18, 57, 65, 0.86);
  --glass-soft: rgba(23, 67, 73, 0.42);
  --aqua: #72f4dc;
  --aqua-bright: #b2fff1;
  --gold: #f5d477;
  --violet-glow: #9b7cff;
  --radiant-text: #eefcf9;
  --radiant-muted: #9bb8b6;
  --radiant-border: rgba(202, 255, 244, 0.12);
  --radiant-shadow: 0 30px 80px -38px rgba(0, 0, 0, 0.85);
  --radiant-glow: 0 0 0 1px rgba(114, 244, 220, 0.16), 0 20px 60px -28px rgba(114, 244, 220, 0.48);
}

html { background: var(--night-deep); }
body {
  color: var(--radiant-text);
  background:
    radial-gradient(55rem 42rem at 84% 5%, rgba(43, 216, 192, 0.17), transparent 68%),
    radial-gradient(46rem 38rem at 7% 25%, rgba(139, 106, 255, 0.13), transparent 70%),
    radial-gradient(44rem 34rem at 52% 100%, rgba(245, 212, 119, 0.08), transparent 72%),
    var(--night-deep);
  background-attachment: scroll;
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  opacity: 0.14;
  background-image: linear-gradient(rgba(179,255,240,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(179,255,240,.15) 1px, transparent 1px);
  background-size: 72px 72px;
  -webkit-mask-image: radial-gradient(70% 48% at 50% 17%, #000, transparent);
  mask-image: radial-gradient(70% 48% at 50% 17%, #000, transparent);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(110% 82% at 50% 22%, transparent 42%, rgba(2, 12, 16, 0.7) 100%);
}
.site-shell { max-width: none; background: transparent; overflow: clip; }
.header {
  height: 68px;
  width: min(calc(100% - 32px), 1180px);
  margin-inline: auto;
  padding: 0 18px;
  top: 14px;
  border: 1px solid var(--radiant-border);
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(22, 62, 70, .82), rgba(7, 30, 37, .78));
  box-shadow: var(--radiant-shadow);
  backdrop-filter: blur(20px);
}
.brand { color: var(--radiant-text); }
.brand img { filter: drop-shadow(0 10px 22px rgba(20, 239, 214, 0.16)); }
.desktop-nav a { color: var(--radiant-muted); border-radius: 11px; padding: 7px 10px; transition: .22s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: var(--radiant-text); background: rgba(255,255,255,.05); }
.header-cta {
  color: #08252b;
  background: linear-gradient(135deg, var(--aqua-bright), var(--aqua));
  box-shadow: var(--radiant-glow);
}
.menu-button { color: var(--radiant-text); }
.mobile-nav { background: rgba(7, 31, 38, .96); border: 1px solid var(--radiant-border); color: var(--radiant-text); }
.mobile-nav a { color: var(--radiant-text); }

.hero {
  min-height: 760px;
  padding-top: 155px;
  background: transparent;
}
.hero::before {
  content: "";
  position: absolute;
  width: 680px;
  height: 680px;
  left: -250px;
  top: 80px;
  border-radius: 50%;
  border: 1px solid rgba(114,244,220,.12);
  box-shadow: 0 0 0 72px rgba(114,244,220,.025), 0 0 0 144px rgba(114,244,220,.018);
  pointer-events: none;
}
.eyebrow {
  width: fit-content;
  color: var(--aqua-bright);
  border: 1px solid var(--radiant-border);
  border-radius: 999px;
  background: rgba(24, 65, 72, .46);
  padding: 5px 13px;
  backdrop-filter: blur(10px);
}
.pulse { background: var(--aqua); box-shadow: 0 0 0 5px rgba(114,244,220,.12), 0 0 18px var(--aqua); }
.hero h1, .section h2, .audience h2, .roadmap h2, .waitlist h2 { color: var(--radiant-text); }
.hero h1 { font-size: clamp(48px, 5.5vw, 82px); text-shadow: 0 18px 70px rgba(0,0,0,.35); }
.hero h1 em {
  color: transparent;
  background: linear-gradient(100deg, var(--aqua-bright), var(--aqua), var(--gold));
  background-size: 180% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  animation: radiant-sheen 6s ease-in-out infinite;
}
.hero h1 em::after { border-color: var(--aqua); box-shadow: 0 4px 20px rgba(114,244,220,.3); }
.hero-text, .section-heading>p:not(.eyebrow), .roadmap-copy p:not(.eyebrow), .waitlist>div>p:not(.eyebrow) { color: var(--radiant-muted); }
.button-primary { color: #08252b; background: linear-gradient(135deg, var(--aqua-bright), var(--aqua)); box-shadow: var(--radiant-glow); }
.button-quiet { color: var(--radiant-text); border: 1px solid var(--radiant-border); background: rgba(255,255,255,.025); }
.play { border-color: rgba(114,244,220,.35); color: var(--aqua); }
.trust-row { color: var(--radiant-muted); }
.trust-row b { color: var(--aqua-bright); }
.trust-row i { background: var(--radiant-border); }
.orbit { border-color: rgba(114,244,220,.14); box-shadow: 0 0 60px rgba(114,244,220,.035); }
.orbit-two { border-color: rgba(155,124,255,.12); }
.voice-card, .transaction-card, .floating-note {
  color: var(--radiant-text);
  background: linear-gradient(145deg, rgba(25, 70, 77, .82), rgba(8, 31, 38, .82));
  border-color: var(--radiant-border);
  box-shadow: var(--radiant-shadow), inset 0 1px rgba(255,255,255,.05);
  backdrop-filter: blur(20px);
}
.voice-card { animation: radiant-float 7s ease-in-out infinite; }
.transaction-card { animation: radiant-float 9s ease-in-out .7s infinite reverse; box-shadow: var(--radiant-shadow), var(--radiant-glow); }
.floating-note { animation: radiant-float 8s ease-in-out 1.2s infinite; }
.mini-mark, .card-actions .confirm { background: linear-gradient(135deg, var(--aqua-bright), var(--aqua)); color: #06252a; }
.wave b { background: linear-gradient(var(--aqua-bright), var(--aqua)); box-shadow: 0 0 12px rgba(114,244,220,.28); }
.voice-card p, .transaction-main small, .transaction-main>b span, .card-actions button { color: var(--radiant-muted); }
.check, .note-icon { background: rgba(114,244,220,.14); color: var(--aqua-bright); }
.transaction-icon { background: rgba(114,244,220,.11); color: var(--aqua); }
.card-actions { border-color: var(--radiant-border); }
.card-actions button { background: rgba(255,255,255,.03); border-color: var(--radiant-border); }
.floating-note b { color: var(--aqua); }

.voice-strip, .steps li, .feature-card, .plan, .roadmap li, .budget-meter {
  background: linear-gradient(145deg, rgba(24, 66, 73, .62), rgba(7, 30, 37, .72));
  border-color: var(--radiant-border);
  box-shadow: var(--radiant-shadow), inset 0 1px rgba(255,255,255,.04);
  backdrop-filter: blur(18px);
}
.voice-strip { color: var(--radiant-text); }
.voice-strip span { background: rgba(255,255,255,.035); border-color: var(--radiant-border); color: #c7dcda; }
.section { position: relative; }
.steps { gap: 16px; }
.steps::before { border-color: rgba(114,244,220,.18); }
.steps li { padding: 22px; border: 1px solid var(--radiant-border); border-radius: 22px; transition: .35s cubic-bezier(.22,1,.36,1); }
.steps li:hover, .feature-card:hover, .plan:hover { transform: translateY(-6px); border-color: rgba(114,244,220,.32); box-shadow: var(--radiant-shadow), var(--radiant-glow); }
.step-icon, .feature-icon { background: rgba(114,244,220,.12); border-color: rgba(114,244,220,.14); color: var(--aqua-bright); }
.step-icon.accent { background: rgba(245,212,119,.12); color: var(--gold); border-color: rgba(245,212,119,.2); }
.steps h3, .feature-card h3, .feature-large h3, .plan h3 { color: var(--radiant-text); }
.steps p, .feature-card p, .feature-large p { color: var(--radiant-muted); }
.features { background: transparent; }
.feature-large { background: linear-gradient(145deg, rgba(21, 65, 72, .9), rgba(6, 27, 34, .96)); border: 1px solid rgba(114,244,220,.22); box-shadow: var(--radiant-glow); }
.feature-large::after { background: rgba(114,244,220,.07); box-shadow: 0 0 0 55px rgba(114,244,220,.025); }
.feature-card { transition: .35s cubic-bezier(.22,1,.36,1); }
.feature-card.violet .feature-icon { background: rgba(155,124,255,.13); color: #c2b0ff; }
.feature-card.teal .feature-icon { background: rgba(114,244,220,.12); color: var(--aqua); }
.feature-card.amber .feature-icon { background: rgba(245,212,119,.12); color: var(--gold); }
.budget-meter { background: rgba(4, 26, 32, .5); }
.budget-meter i { background: rgba(255,255,255,.08); }
.budget-meter i b { background: linear-gradient(90deg, var(--aqua), var(--gold)); box-shadow: 0 0 20px rgba(114,244,220,.3); }

.audience {
  background: linear-gradient(145deg, rgba(24, 68, 75, .75), rgba(7, 29, 36, .88));
  border: 1px solid var(--radiant-border);
  box-shadow: var(--radiant-shadow);
}
.audience::after { color: rgba(114,244,220,.04); }
.audience-tabs { background: rgba(4, 25, 31, .58); border: 1px solid var(--radiant-border); }
.audience-tab { color: var(--radiant-muted); }
.audience-tab.active { background: linear-gradient(135deg, var(--aqua-bright), var(--aqua)); color: #06242a; box-shadow: var(--radiant-glow); }
.audience-kicker, .audience-content a { color: var(--aqua-bright); }
.audience-content h3, .audience-content li { color: var(--radiant-text); }
.audience-content li::before { color: var(--aqua); }

.plan-grid { gap: 16px; }
.plan { color: var(--radiant-text); transition: .35s cubic-bezier(.22,1,.36,1); }
.plan>p, .plan .price span, .plan li { color: var(--radiant-muted); }
.plan ul { border-color: var(--radiant-border); }
.plan a { border-color: var(--radiant-border); color: var(--radiant-text); }
.plan.featured { background: linear-gradient(150deg, rgba(28, 77, 82, .9), rgba(7, 29, 35, .96)); border-color: rgba(114,244,220,.35); box-shadow: var(--radiant-glow); }
.plan.featured a, .popular { background: linear-gradient(135deg, var(--aqua-bright), var(--aqua)); border-color: transparent; color: #06242a; }

.roadmap { background: transparent; border-color: var(--radiant-border); }
.roadmap ol { border-color: rgba(114,244,220,.18); }
.roadmap li { padding: 22px 28px; margin-bottom: 12px; border: 1px solid var(--radiant-border); border-radius: 18px; }
.roadmap li::before { right: -6px; background: var(--night); border-color: var(--aqua); }
.roadmap li.done::before { background: var(--aqua); border-color: var(--aqua); box-shadow: 0 0 0 5px rgba(114,244,220,.12), 0 0 20px rgba(114,244,220,.45); }
.roadmap b { color: var(--aqua); }
.roadmap span { color: var(--radiant-text); }
.roadmap small { color: var(--radiant-muted); }

.waitlist {
  background: linear-gradient(145deg, rgba(28, 77, 82, .88), rgba(7, 29, 36, .94));
  border: 1px solid rgba(114,244,220,.22);
  box-shadow: var(--radiant-glow), var(--radiant-shadow);
}
.waitlist::after { border-color: rgba(114,244,220,.14); box-shadow: 0 0 0 40px rgba(114,244,220,.035), 0 0 0 80px rgba(114,244,220,.02); }
.waitlist .eyebrow { color: var(--aqua-bright); }
.phone-field { background: rgba(4, 25, 31, .62); border-color: var(--radiant-border); box-shadow: none; }
.phone-field span { color: var(--radiant-muted); }
.phone-field input { color: var(--radiant-text); }
.phone-field input::placeholder { color: #78928f; }
.phone-field button { background: linear-gradient(135deg, var(--aqua-bright), var(--aqua)); color: #06242a; }
footer { border-color: var(--radiant-border); color: var(--radiant-muted); }

.radiant-reveal { opacity: 0; transform: translateY(18px); transition: opacity .45s ease-out, transform .45s ease-out; }
.radiant-reveal.is-visible { opacity: 1; transform: none; filter: none; }

@keyframes radiant-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes radiant-sheen { 0%,100% { background-position: 160% 50%; } 50% { background-position: -20% 50%; } }

@media (max-width: 900px) {
  .header { width: calc(100% - 24px); }
  .hero { padding-top: 125px; }
}
@media (max-width: 590px) {
  .header { top: 8px; height: 62px; }
  .mobile-nav { top: 78px; margin: 0 12px; border-radius: 16px; }
  .hero { padding-top: 112px; }
  .hero h1 { font-size: 43px; }
  .steps li { padding: 16px; }
  .voice-card, .transaction-card { backdrop-filter: blur(14px); }
}
@media (prefers-reduced-motion: reduce) {
  .voice-card, .transaction-card, .floating-note, .hero h1 em { animation: none; }
  .radiant-reveal { opacity: 1; transform: none; filter: none; }
}