.loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 22px;
  background: #050611;
  transition: opacity .6s ease, visibility .6s ease;
}

.loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.loader p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
}

.loader__cube {
  position: relative;
  width: 62px;
  aspect-ratio: 1;
  transform: rotateX(58deg) rotateZ(45deg);
  transform-style: preserve-3d;
}

.loader__cube span {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(135deg, rgba(103,255,179,.9), rgba(82,168,255,.6));
  box-shadow: var(--glow-green);
}

.loader__cube span:nth-child(2) {
  transform: translateZ(-28px);
  filter: brightness(.6);
}

.loader__cube span:nth-child(3) {
  transform: rotateY(90deg) translateZ(31px);
  filter: brightness(.8);
}

.site-header {
  position: fixed;
  top: 18px;
  left: 0;
  right: 0;
  z-index: 50;
  padding-inline: clamp(16px, 4vw, 40px);
}

.navbar {
  width: min(1180px, 100%);
  min-height: 70px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 22px;
  background: rgba(9, 13, 31, .58);
  box-shadow: 0 14px 54px rgba(0, 0, 0, .28);
  backdrop-filter: blur(22px);
  transition: transform .35s ease, background .35s ease, border-color .35s ease;
}

.site-header.is-scrolled .navbar {
  background: rgba(9, 13, 31, .82);
  border-color: rgba(255, 255, 255, .14);
  transform: translateY(-4px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  letter-spacing: 0;
  white-space: nowrap;
}

.brand__mark {
  display: grid;
  place-items: center;
  width: 42px;
  aspect-ratio: 1;
  border: 1px solid rgba(103,255,179,.32);
  border-radius: 12px;
  color: var(--green);
  background: linear-gradient(135deg, rgba(103,255,179,.16), rgba(82,168,255,.08));
  box-shadow: var(--glow-green);
}

.nav-panel,
.nav-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.nav-panel a {
  padding: 12px 13px;
  border-radius: 12px;
  color: var(--muted);
  font-size: .94rem;
  transition: color .25s ease, background .25s ease;
}

.nav-panel a:hover,
.nav-panel a.is-active {
  color: var(--white);
  background: rgba(255,255,255,.06);
}

.nav-toggle {
  display: none;
  width: 44px;
  aspect-ratio: 1;
  border-radius: 12px;
  color: var(--white);
  background: rgba(255,255,255,.07);
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 5px auto;
  border-radius: 99px;
  background: currentColor;
  transition: transform .3s ease, opacity .3s ease;
}

.nav-toggle.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle.is-open span:nth-child(2) {
  opacity: 0;
}

.nav-toggle.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 18px;
  border: 1px solid var(--border);
  border-radius: 14px;
  color: var(--white);
  overflow: hidden;
  white-space: nowrap;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.btn--xl {
  min-height: 58px;
  padding-inline: 24px;
  border-radius: 16px;
  font-weight: 800;
}

.btn--primary {
  border-color: rgba(103,255,179,.32);
  color: #04130d;
  background: linear-gradient(135deg, var(--green), var(--blue));
  box-shadow: var(--glow-green);
}

.btn--ghost,
.btn--glass {
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(16px);
}

.btn:hover {
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.24);
}

.ripple {
  position: absolute;
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(255,255,255,.55);
  transform: translate(-50%, -50%) scale(0);
  animation: ripple .7s ease forwards;
  pointer-events: none;
  z-index: -1;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  color: var(--green);
  font-size: .92rem;
  font-weight: 800;
}

.eyebrow span {
  width: 26px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--green), var(--blue));
}

.glass-card,
.feature-card,
.stat-card,
.price-card,
.testimonial-card,
.timeline article,
.roadmap-track article {
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(20px);
}

.glass-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-radius: 18px;
  padding: 16px;
}

.glass-card span,
.mode-card span,
.price-card span,
.trailer-copy span,
.roadmap-track span {
  color: var(--muted);
  font-size: .86rem;
}

.glass-card strong {
  display: block;
  margin-top: 3px;
}

.status-dot {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 8px rgba(103,255,179,.12), var(--glow-green);
}

.copy-btn,
.play-fab,
.newsletter button {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 46px;
  aspect-ratio: 1;
  border-radius: 14px;
  color: var(--white);
  background: rgba(255,255,255,.08);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform .25s ease, color .25s ease, background .25s ease;
}

.copy-btn:hover,
.newsletter button:hover {
  color: var(--green);
  transform: translateY(-2px);
}

.feature-card {
  position: relative;
  min-height: 240px;
  padding: clamp(22px, 3vw, 34px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transform-style: preserve-3d;
}

.feature-card::before,
.price-card::before,
.testimonial-card::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), rgba(103,255,179,.17), transparent 34%);
  transition: opacity .3s ease;
}

.feature-card:hover::before,
.price-card:hover::before,
.testimonial-card:hover::before {
  opacity: 1;
}

.feature-card i {
  color: var(--green);
  font-size: 1.55rem;
}

.feature-card h3,
.mode-card h3,
.timeline h3,
.price-card h3,
.testimonial-card h3,
.roadmap-track h3 {
  margin: 16px 0 10px;
  font-size: clamp(1.2rem, 1.7vw, 1.65rem);
}

.feature-card p,
.mode-card p,
.timeline p,
.price-card li,
.testimonial-card p,
.roadmap-track p {
  margin: 0;
  color: var(--muted);
  line-height: 1.9;
}

.card-orbit {
  position: absolute;
  left: 26px;
  bottom: 24px;
  width: 130px;
  aspect-ratio: 1;
  border: 1px solid rgba(103,255,179,.18);
  border-radius: 50%;
}

.card-orbit::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: var(--glow-blue);
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.feature-card--large {
  grid-column: span 2;
  grid-row: span 2;
}

.feature-card--wide {
  grid-column: span 2;
}

.mode-grid,
.pricing-grid,
.testimonial-grid,
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.stats-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}