.page-section{
  position:relative;
  padding-block:var(--mr-space-7);
}

.page-section--compact{
  padding-block:var(--mr-space-6);
}

.page-section__heading{
  max-width:54rem;
  margin:0 auto var(--mr-space-5);
  text-align:center;
}

.page-section__heading h2{
  margin-top:1rem;
}

.page-section__heading h2 em{
  color:var(--mr-color-primary);
  font-style:italic;
}

.page-section__heading p{
  max-width:44rem;
  margin:1rem auto 0;
  color:var(--mr-color-text-muted);
}

.page-hero{
  position:relative;
  min-height:calc(100vh - var(--mr-header-height));
  overflow:hidden;
  padding:5rem 0 4.5rem;
}

.page-hero .c-breadcrumb{
  margin-bottom:var(--mr-space-4);
}

.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 8% 15%,var(--mr-color-primary) 0 1px,transparent 2px),
    radial-gradient(circle at 18% 39%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 12%,var(--mr-color-accent) 0 1.5px,transparent 2px),
    radial-gradient(circle at 91% 31%,rgba(255,255,255,.85) 0 1px,transparent 2px),
    radial-gradient(circle at 59% 46%,rgba(255,255,255,.65) 0 1px,transparent 2px),
    radial-gradient(circle at 36% 27%,rgba(183,255,42,.8) 0 1px,transparent 2px);
}

.page-hero[data-hero-form="terminal"] .page-hero__copy{
  position:relative;
  z-index:2;
  max-width:68rem;
  margin-inline:auto;
  text-align:center;
}

.page-hero__title{
  margin:1.4rem 0 1.25rem;
  letter-spacing:-.065em;
}

.page-hero__title em{
  display:inline-block;
  color:var(--mr-color-primary);
  font-style:italic;
  text-shadow:0 .22rem 0 rgba(117,83,255,.72);
  transform:rotate(-2deg);
}

.page-hero__lead{
  max-width:47rem;
  margin-inline:0;
  color:#F1ECF6;
  font-size:1.1rem;
}

.page-hero__lead strong{
  color:var(--mr-color-accent);
}

.page-hero__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
  gap:.875rem;
  margin-top:1.75rem;
}
.page-hero[data-hero-form="terminal"] .page-hero__title,
.page-hero[data-hero-form="terminal"] .page-hero__lead{
  margin-inline:auto;
}
.page-hero[data-hero-form="terminal"] .page-hero__actions,
.page-cta .page-hero__actions,
.page-cta .mr-cluster,
.page-cta .mr-blog-cta__actions{
  justify-content:center;
}

.page-hero__stage{
  position:relative;
  z-index:1;
  width:min(100%,73.75rem);
  min-height:31rem;
  margin:3.5rem auto 0;
}

.page-hero__scene{
  position:absolute;
  inset:.25rem 21% 1rem;
  display:grid;
  place-items:center;
  filter:drop-shadow(0 2rem 2.2rem rgba(7,3,16,.42));
  animation:mr-float 5s ease-in-out infinite;
}

.page-hero__scene img{
  width:100%;
  max-height:28rem;
  object-fit:contain;
}

.terminal-mock{
  position:absolute;
  left:6.5%;
  bottom:0;
  width:min(29.5rem,54%);
  overflow:hidden;
  border:1px solid rgba(228,255,112,.28);
  border-radius:var(--mr-radius-md);
  background:var(--mr-color-dark-deep);
  box-shadow:var(--mr-shadow-md),var(--mr-shadow-glow);
}

.terminal-mock__head{
  min-height:2.45rem;
  display:flex;
  align-items:center;
  gap:.45rem;
  padding:.55rem .8rem;
  border-bottom:1px solid rgba(255,255,255,.09);
  background:#261A3B;
}

.terminal-mock__dot{
  width:.55rem;
  height:.55rem;
  flex:0 0 auto;
  border-radius:50%;
}

.terminal-mock__dot--red{background:var(--mr-color-danger)}
.terminal-mock__dot--yellow{background:var(--mr-color-warning)}
.terminal-mock__dot--green{background:var(--mr-color-success)}

.terminal-mock__title{
  min-width:0;
  margin-left:.35rem;
  overflow:hidden;
  color:#AFA5BD;
  font:var(--mr-fs-0)/1.2 var(--mr-font-mono);
  text-overflow:ellipsis;
  white-space:nowrap;
}

.terminal-mock__control{
  margin-left:auto;
  padding:.2rem .45rem;
  color:#B8AEC5;
  border:1px solid rgba(255,255,255,.13);
  border-radius:.25rem;
  background:transparent;
  font:600 .62rem/1 var(--mr-font-mono);
}

.terminal-mock__body{
  height:11.2rem;
  overflow:hidden;
  padding:.8rem 1rem;
  color:#D9D2E6;
  font:var(--mr-fs-0)/var(--mr-lh-code) var(--mr-font-mono);
}

.terminal-mock__scroll{
  animation:mr-terminal-scroll 9s ease-in-out infinite;
}

.terminal-mock.is-paused .terminal-mock__scroll{
  animation-play-state:paused;
}

.terminal-mock__prompt,
.terminal-mock__ok{
  color:var(--mr-color-primary);
}

.terminal-mock__dim{
  color:#8F829F;
}

.terminal-mock__violet{
  color:#A891FF;
}

.hero-metric{
  position:absolute;
  z-index:2;
  width:12.75rem;
  padding:1rem;
  border:1px solid var(--mr-line-purple);
  border-radius:var(--mr-radius-md);
  background:rgba(43,32,68,.95);
  box-shadow:var(--mr-shadow-sm);
}

.hero-metric--left{
  left:0;
  top:2rem;
  transform:rotate(-2deg);
}

.hero-metric--right{
  right:0;
  top:6rem;
  transform:rotate(2deg);
}

.hero-metric__label{
  color:#AFA3C1;
  font:600 .65rem/1.2 var(--mr-font-mono);
  letter-spacing:.06em;
  text-transform:uppercase;
}

.hero-metric__value{
  margin:.3rem 0;
  color:var(--mr-color-primary);
  font:800 1.5rem/1.2 var(--mr-font-mono);
  font-variant-numeric:tabular-nums;
}

.hero-metric__sub{
  color:var(--mr-color-text-muted);
  font-size:var(--mr-fs-0);
}

.page-cta{
  position:relative;
  display:grid;
  min-height:24rem;
  place-items:center;
  overflow:hidden;
  padding:var(--mr-space-4);
  text-align:center;
  border:1px solid rgba(183,255,42,.35);
  border-radius:var(--mr-radius-lg);
  background:
    radial-gradient(circle at 50% 112%,rgba(183,255,42,.18),transparent 46%),
    var(--mr-color-surface);
  box-shadow:8px 9px 0 rgba(183,255,42,.13);
}

.page-cta::before,
.page-cta::after{
  content:"";
  position:absolute;
  width:14rem;
  height:14rem;
  border:1px dashed rgba(183,255,42,.35);
  border-radius:50%;
}

.page-cta::before{
  top:-6rem;
  left:-6rem;
}

.page-cta::after{
  right:-6rem;
  bottom:-6rem;
}

.page-cta__content{
  position:relative;
  z-index:1;
  max-width:48rem;
}

.page-cta h2{
  margin:1rem auto;
}

.page-cta p{
  color:var(--mr-color-text-muted);
}

@keyframes mr-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-.65rem)}
}

@keyframes mr-terminal-scroll{
  0%,16%{transform:translateY(0)}
  32%,48%{transform:translateY(-2rem)}
  64%,82%{transform:translateY(-4.1rem)}
  100%{transform:translateY(0)}
}

@media(max-width:900px){
  .page-hero{
    min-height:auto;
  }

  .page-hero__stage{
    min-height:34rem;
  }

  .page-hero__scene{
    inset:1rem 12% 7rem;
  }

  .hero-metric--left{
    left:1rem;
  }

  .hero-metric--right{
    right:1rem;
  }

  .terminal-mock{
    left:50%;
    width:min(31rem,86%);
    transform:translateX(-50%);
  }
}

@media(max-width:640px){
  .page-section{
    padding-block:var(--mr-space-6);
  }

  .page-section__heading{
    margin-bottom:var(--mr-space-4);
  }

  .page-hero{
    padding:3.5rem 0 3rem;
  }

  .page-hero__title{
    letter-spacing:-.055em;
  }

  .page-hero__lead{
    font-size:var(--mr-fs-2);
  }

  .page-hero__actions{
    align-items:stretch;
    flex-direction:column;
    padding-inline:.5rem;
  }

  .page-hero__actions .c-btn{
    width:100%;
  }

  .page-hero__stage{
    min-height:30rem;
    margin-top:2.5rem;
  }

  .page-hero__scene{
    inset:2.5rem 2% 8rem;
  }

  .hero-metric{
    width:9.25rem;
    padding:.7rem;
  }

  .hero-metric--left{
    left:.25rem;
    top:0;
  }

  .hero-metric--right{
    right:.25rem;
    top:2.75rem;
  }

  .hero-metric__value{
    font-size:1.05rem;
  }

  .terminal-mock{
    width:calc(100% - 1rem);
  }

  .terminal-mock__body{
    height:10.25rem;
    padding:.7rem;
    font-size:.66rem;
  }

  .page-cta{
    min-height:23rem;
    padding:var(--mr-space-3);
  }
}
