/* The supplied PNG is unchanged. Clip its natural diagonal seams FIRST.
   A separate outer element applies depth and glow AFTER clipping, so no
   shadow from another face gets cut into a visible rectangular tile. */
.symbol-assembly {
  position: relative;
  width: min(38vw, 48svh, 530px);
  aspect-ratio: 1269 / 1239;
  perspective: 1100px;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform;
}
.symbol-complete, .symbol-face, .symbol-face img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.symbol-complete { object-fit: fill; opacity: 1; }
.symbol-face {
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  filter: drop-shadow(0 0 8px rgba(0, 239, 165, .12));
}
.symbol-face img {
  object-fit: fill;
  filter: none;
  mix-blend-mode: normal;
  backface-visibility: hidden;
}
.face-nw img { clip-path: polygon(0 0, 50% 0, 50% 49.65%, 0 19.55%); }
.face-ne img { clip-path: polygon(50% 0, 100% 0, 100% 79.75%, 50% 49.65%); }
.face-sw img { clip-path: polygon(0 19.55%, 50% 49.65%, 50% 100%, 0 100%); }
.face-se img { clip-path: polygon(50% 49.65%, 100% 79.75%, 100% 100%, 50% 100%); }
.explosion { height: 320vh; }
.explosion-copy {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  width: min(76vw, 1100px);
  max-width: none;
  text-align: center;
  transform: translate(-50%, -50%) scale(.45);
  transform-origin: 50% 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  text-shadow: 0 2px 12px #020504, 0 0 32px rgba(2,5,4,.9);
}
.explosion-copy h2 { font-size: clamp(1.5rem, 5.4vw, 5rem); line-height: 1.08; letter-spacing: -.05em; }
.explosion-copy span { display: block; font-size: clamp(.75rem, 1.1vw, 1rem); margin-bottom: 1rem; letter-spacing: .18em; }
.explosion-note { bottom: 1.5rem; font-size: .75rem; }

/* Separate tracks: copy, symbol, then scroll cue. No overlay can sit over
   the headline, description or primary buttons. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(360px, .94fr);
  grid-template-rows: auto auto;
  column-gap: clamp(24px, 4vw, 68px);
  row-gap: 38px;
  padding-top: 124px;
  padding-bottom: 28px;
  align-items: center;
}
.hero-copy { min-width: 0; max-width: 100%; }
.hero h1 {
  font-size: clamp(3.2rem, 4.65vw, 6rem);
  line-height: .94;
  letter-spacing: -.068em;
  margin: 28px 0 24px;
}
.hero-lead { max-width: 36rem; font-size: 1.0625rem; line-height: 1.7; }
.hero-actions { flex-wrap: wrap; gap: 18px 28px; margin-top: 28px; }
.hero .eyebrow { font-size: .75rem; letter-spacing: .12em; line-height: 1.6; }
.hero-symbol {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  right: auto;
  top: auto;
  transform: none;
  opacity: 1;
}
.hero-symbol img { width: 82%; }
.scroll-cue {
  position: relative;
  grid-row: 2;
  grid-column: 1 / -1;
  left: auto;
  bottom: auto;
  transform: none;
  font-size: .75rem;
  letter-spacing: .12em;
  min-height: 28px;
  padding-right: 100px;
}
.hero-index { bottom: 34px; }
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr); padding-top: 108px; }
  .hero-copy { grid-column: 1; grid-row: 1; }
  .hero h1 { font-size: clamp(2.7rem, 8.7vw, 4.8rem); }
  .hero-symbol { grid-column: 1; grid-row: 2; width: min(70vw, 360px); justify-self: center; }
  .scroll-cue { grid-row: 3; }
  .symbol-assembly { width: min(61vw, 43svh); }
  .exp-right { display: block; }
}
@media (max-width: 560px) {
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .hero h1 { font-size: clamp(2.25rem, 10vw, 3.5rem); letter-spacing: -.06em; }
  .hero .button { padding: 16px 18px; gap: 18px; }
  .hero-symbol { width: min(64vw, 260px); }
  .explosion-copy { width: 76vw; }
  .explosion-copy h2 { font-size: clamp(1.5rem, 5.4vw, 5rem); }
  .explosion-copy span { font-size: .75rem; letter-spacing: .1em; margin-bottom: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .symbol-face { display: none; }
  .symbol-complete { opacity: 1; }
  .explosion { height: 100svh; }
  .explosion-copy { opacity: 1; }
  .symbol-assembly { opacity: .3; will-change: auto; }
  .explosion-copy { transform: translate(-50%, -50%); filter: none; will-change: auto; }
  .exp-left { top: 36%; }
  .exp-right { top: 65%; }
}