.graphics-section {
  display: grid;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.graphics-stage {
  position: relative;
  min-height: 24rem;
  overflow: hidden;
  perspective: 70rem;
  transform-style: preserve-3d;
}

.graphics-stage::before {
  position: absolute;
  inset: 10%;
  background: radial-gradient(circle, rgba(56, 189, 248, 0.18), transparent 62%);
  content: "";
  filter: blur(2rem);
}

.graphics-plane {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 52%;
  aspect-ratio: 1.35;
  border: 1px solid rgba(125, 211, 252, 0.28);
  border-radius: 1.2rem;
  background: linear-gradient(145deg, rgba(30, 41, 59, 0.84), rgba(8, 15, 27, 0.72));
  box-shadow: 0 1.8rem 3.8rem rgba(0, 0, 0, 0.25);
  transform-style: preserve-3d;
}

.graphics-plane-back {
  transform: translate(-62%, -66%) rotateX(62deg) rotateZ(-24deg) translateZ(-4rem);
  opacity: 0.44;
}

.graphics-plane-middle {
  transform: translate(-50%, -50%) rotateX(62deg) rotateZ(-24deg);
  opacity: 0.72;
}

.graphics-plane-front {
  transform: translate(-38%, -34%) rotateX(62deg) rotateZ(-24deg) translateZ(4rem);
}

.graphics-copy {
  max-width: 35rem;
}

@container (max-width: 50rem) {
  .hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-visual {
    width: min(82vw, 27rem);
  }
}

@container (min-width: 50.01rem) {
  .hero {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
  }

  .adaptive-section {
    grid-template-columns: minmax(0, 0.9fr) minmax(20rem, 1.1fr);
  }
}

@container (max-width: 42rem) {
  .feature-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@container (max-width: 25rem) {
  .feature-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 56rem) {
  .graphics-section {
    grid-template-columns: minmax(22rem, 1.05fr) minmax(0, 0.95fr);
  }
}

@media (max-width: 44rem) {
  .app-header {
    align-items: flex-start;
  }

  .app-brand-name {
    display: none;
  }

  .app-nav a {
    min-height: 2.85rem;
    padding-inline: 0.75rem;
  }

  .hero-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .button {
    width: 100%;
  }

  .graphics-stage {
    min-height: 19rem;
  }
}

@media (orientation: landscape) and (max-height: 36rem) {
  .hero {
    min-height: auto;
    padding-block: 2rem;
  }

  .hero-visual {
    max-height: 18rem;
  }
}

@media (hover: none) and (pointer: coarse) {
  .app-nav a,
  .button {
    min-height: 3rem;
  }

  .feature-card:hover,
  .button:hover,
  .app-nav a:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --surface-border: rgba(226, 232, 240, 0.42);
    --text-muted: #cbd5e1;
  }
}

@keyframes core-float {
  0%,
  100% {
    transform: translate(-50%, -50%) rotateX(58deg) rotateZ(35deg) translateZ(0);
  }

  50% {
    transform: translate(-50%, -54%) rotateX(58deg) rotateZ(42deg) translateZ(1.2rem);
  }
}

@keyframes orbit-one {
  to {
    transform: translate(-50%, -50%) rotateX(67deg) rotateY(-12deg) rotateZ(360deg);
  }
}

@keyframes orbit-two {
  to {
    transform: translate(-50%, -50%) rotateX(72deg) rotateY(38deg) rotateZ(360deg);
  }
}

@view-transition {
  navigation: auto;
}