.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: center; padding-top: 3rem; padding-bottom: 4rem; min-height: 650px; }
.hero h1 { font-size: clamp(2.5rem, 5vw, 4rem); letter-spacing: -.04em; line-height: 1.04; margin: 1.5rem 0 2rem; color: var(--cyan); text-shadow: 0 0 5px rgba(0,255,255,.3); }
.hero h1 span { color: var(--txt); text-shadow: none; }
.lede { font-size: 1.125rem; max-width: 48ch; }
.acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 2rem; }
.hero-tail { margin: 1.5rem 0 0; color: var(--muted); font-size: 1rem; }
.bracket { color: var(--cyan); }
.geo { position: relative; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: linear-gradient(135deg, rgba(0,128,255,.05), transparent 65%); }
.geo-stage { height: 375px; position: relative; overflow: hidden; background-image: linear-gradient(rgba(51,51,51,.65) 1px, transparent 1px), linear-gradient(90deg, rgba(51,51,51,.65) 1px, transparent 1px); background-size: 48px 48px; background-position: center; perspective: 600px; }
.geo-stage::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 70px 40px #000; pointer-events: none; }
.geo-axis { position: absolute; top: 50%; left: 0; width: 100%; border-top: 1px solid rgba(0,255,255,.2); transform: rotate(-30deg); }
.ring { position: absolute; inset: 45px 55px; border-radius: 50%; border: 1px solid var(--cyan); box-shadow: 0 0 14px rgba(0,255,255,.15), inset 0 0 14px rgba(0,255,255,.1); }
.ring-a { transform: rotate(-32deg) scaleY(.43); }
.ring-b { transform: rotate(43deg) scaleY(.5); border-color: var(--blue); }
.ring-c { transform: rotate(86deg) scaleY(.7) scale(.75); }
.ring-d { transform: rotate(-20deg) scale(.45); border-style: dashed; border-color: rgba(0,255,255,.7); }
.geo-core { position: absolute; inset: 41% 43%; border: 1px solid var(--cyan); border-radius: 8px; transform: rotate(45deg); box-shadow: 0 0 40px rgba(0,128,255,.3); background: rgba(0,128,255,.06); }
.geo-point { position: absolute; width: 8px; height: 8px; border: 1px solid var(--cyan); background: #000; border-radius: 50%; box-shadow: 0 0 12px var(--cyan); }
.point-a { top: 27%; left: 33%; }
.point-b { bottom: 28%; right: 18%; }
.cross { position: absolute; color: var(--cyan); background: var(--bg); font-size: 1.5rem; z-index: 1; }
.cross-a { left: 1rem; top: .5rem; }
.cross-b { right: 1rem; bottom: .5rem; }
.scan { position: absolute; inset: 0 0 auto; height: 1px; background: rgba(0,255,255,.25); box-shadow: 0 0 24px rgba(0,255,255,.3); z-index: 1; }
.geo figcaption { display: flex; flex-direction: column; background: var(--bg); padding: 1.25rem .5rem .25rem; border-top: 1px solid var(--grid); gap: .25rem; }
.geo figcaption .tag { margin: 0; color: var(--cyan); }
.ticker { border-block: 1px solid var(--grid); overflow: hidden; }
.ticker .wrap { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding-block: 1rem; }
.ticker p { color: var(--muted); margin: 0; font-family: Archivo, sans-serif; letter-spacing: .02em; }
.ticker span { color: var(--cyan); }
.page-h { padding-block: 3rem 4rem; display: grid; grid-template-columns: 1.4fr 1fr; align-items: center; gap: 4rem; border-bottom: 1px solid var(--line); }
.page-h h1 { max-width: 23ch; text-shadow: 0 0 5px rgba(0,255,255,.22); }
.crumb { color: var(--muted); display: flex; gap: 1rem; align-items: center; min-height: 44px; width: fit-content; margin-bottom: 1rem; }
.crumb span { color: var(--cyan); }
.page-cue { border: 1px solid var(--line); border-radius: 8px; background: var(--panel); padding: 1.5rem; display: flex; align-items: center; gap: 1.5rem; }
.page-cue p { margin: 0; max-width: 25ch; }
.cue-art { height: 72px; width: 72px; position: relative; flex: 0 0 72px; }
.cue-art i { position: absolute; inset: 4px; border: 1px solid var(--cyan); transform: rotate(45deg); }
.cue-art i:nth-child(2) { inset: 15px; border-color: var(--blue); }
.cue-art i:nth-child(3) { inset: 26px; background: var(--cyan); }
@media (max-width: 900px) {
  .hero { gap: 2rem; grid-template-columns: 1fr 1fr; }
  .acts { align-items: stretch; flex-direction: column; }
  .hero .tag { letter-spacing: .03em; }
  .geo-stage { height: 330px; }
  .ring { inset: 40px 20px; }
  .page-h { gap: 2rem; grid-template-columns: 1.25fr 1fr; }
  .page-cue { padding: 1rem; gap: 1rem; flex-direction: column; align-items: flex-start; }
}
@media (max-width: 640px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 2rem; padding-bottom: 3rem; gap: 2.5rem; }
  .hero h1 { font-size: clamp(2.5rem, 10vw, 4rem); }
  .hero-copy .tag { letter-spacing: .01em; }
  .acts { gap: .75rem; margin-top: 1.5rem; }
  .geo-stage { height: 275px; }
  .ring { inset: 30px 20px; }
  .geo-core { inset: 40% 41%; }
  .ticker .wrap { gap: 1rem; }
  .ticker p { max-width: 25ch; }
  .page-h { grid-template-columns: 1fr; gap: 1.5rem; padding-block: 1.5rem 2.5rem; }
  .page-h h1 { max-width: 20ch; margin-bottom: 0; }
  .page-cue { flex-direction: row; align-items: center; }
  .cue-art { width: 56px; height: 56px; flex-basis: 56px; }
  .cue-art i:nth-child(3) { inset: 23px; }
}