@import url('https://fonts.googleapis.com/css2?family=Bitcount+Prop+Single:wght@100..900&display=swap');

/* Page base so fades match perfectly */
:root { color-scheme: dark; }
html, body { background:#0b1020; margin:0; padding:0; }

/* ==== HERO BG: gradient wash + subtle subject glyphs ==== */
.mp-hero-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(1400px 700px at 78% -18%, rgba(90,161,255,.20), transparent 62%),
    radial-gradient(1200px 700px at -10% 22%, rgba(124,246,214,.16), transparent 65%),
    #0b1020;
  overflow:hidden;
  z-index:0;
  pointer-events:none;
}

/* Soft halos for presence */
.mp-hero-bg::before,
.mp-hero-bg::after{
  content:"";
  position:absolute; inset: -15% -10% auto -10%;
  height:65%;
  background:
    radial-gradient(600px 400px at 15% 30%, rgba(124,246,214,.18), transparent 65%),
    radial-gradient(700px 450px at 85% 25%, rgba(90,161,255,.18), transparent 70%);
  filter: blur(8px);
  opacity:.8;
  mix-blend-mode: screen;
}
.mp-hero-bg::after{
  inset:auto -10% -20% -10%;
  height:60%;
  background:
    radial-gradient(520px 360px at 25% 80%, rgba(90,161,255,.14), transparent 70%),
    radial-gradient(620px 380px at 75% 70%, rgba(124,246,214,.14), transparent 75%);
}

/* New darker overlay */
.mp-hero-bg::marker { display:none } /* reset unused pseudo */
/* Dark overlay ABOVE the glyph layers, BELOW hero content */
.mp-hero-bg > .bg-dark {
  position: absolute;
  inset: 0;                 /* gives it full width/height */
  background: rgba(0,0,0,0.65); /* <— increase this to darken more */
  z-index: 3;
  pointer-events: none;
}

/* ensure stacking order */
.mp-hero-center { position: relative; z-index: 5; }
.mp-hero::after { z-index: 4; }  /* the bottom fade */

/* Parallax layers */
.bg-layer{ position:absolute; inset:0; }
.bg-mid{ z-index:1; }
.bg-front{ z-index:2; }

/* Glyph styling */
/* .bg-sprite{
  position:absolute;
  color: rgba(200,230,255,.85);
  text-shadow:
    0 0 10px rgba(90,161,255,.55),
    0 0 22px rgba(90,161,255,.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
  will-change: transform, opacity;
  mix-blend-mode: screen;
} */
.bg-sprite{
  position:absolute;
  color: rgba(124,246,214,.78);
  text-shadow:
    0 0 10px rgba(124,246,214,.55),
    0 0 22px rgba(124,246,214,.35);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  white-space: nowrap;
  will-change: transform, opacity;
  mix-blend-mode: screen;
}
.bg-mid .bg-sprite{
  color: rgba(124,246,214,.78);
  text-shadow:
    0 0 10px rgba(124,246,214,.55),
    0 0 22px rgba(124,246,214,.35);
  filter: blur(.2px);
}

/* Calm, premium motion */
@keyframes drift {
  0%   { transform: translate3d(var(--x), var(--y), 0) rotate(0deg); }
  50%  { transform: translate3d(calc(var(--x) + 2vw), calc(var(--y) - 1vh), 0) rotate(6deg); }
  100% { transform: translate3d(var(--x), var(--y), 0) rotate(0deg); }
}
@keyframes orbit {
  0%   { transform: translate3d(var(--x), var(--y), 0) rotate(0deg) scale(var(--scale)); }
  25%  { transform: translate3d(calc(var(--x) + 1.5vw), calc(var(--y) + 1vh), 0) rotate(90deg) scale(var(--scale)); }
  50%  { transform: translate3d(var(--x), calc(var(--y) + 2vh), 0) rotate(180deg) scale(var(--scale)); }
  75%  { transform: translate3d(calc(var(--x) - 1.5vw), calc(var(--y) + 1vh), 0) rotate(270deg) scale(var(--scale)); }
  100% { transform: translate3d(var(--x), var(--y), 0) rotate(360deg) scale(var(--scale)); }
}

/* Hero container & overlay fade to #0b1020 at the bottom */
.mp-hero{ position:relative; overflow:hidden; }
.mp-hero-center{ position:relative; z-index:4; }

.mp-hero::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px;
  height:18vh;                 /* tweak 12–22vh as desired */
  pointer-events:none;
  z-index:3;
  background: linear-gradient(
    to bottom,
    rgba(11,16,32,0) 0%,
    rgba(11,16,32,.35) 45%,
    #0b1020 100%
  );
}

/* Smooth color transition between sections */
.section--seam-top{
  position:relative;
  background: var(--section-bg, #0b1020);
}
.section--seam-top::before{
  content:"";
  position:absolute; left:0; right:0; top:-10vh;
  height:10vh;
  pointer-events:none;
  background: linear-gradient(
    to bottom,
    #0b1020 0%,
    rgba(11,16,32,0) 100%
  );
}

/* CTA card centered */
.cta-card {
  display: block;
  max-width: 480px;
  margin: 2rem auto;
  background: rgba(55, 55, 55, 0.6);
  padding: 1.5rem 2rem;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Respect user setting: reduce motion */
@media (prefers-reduced-motion: reduce){
  .bg-sprite{ animation: none !important; }
}