.hero { position: relative; display: flex; align-items: center; min-height: calc(100svh - var(--nav-h)); overflow: hidden; color: var(--text); background: radial-gradient(circle at 78% 42%, rgb(25 82 232 / 18%), transparent 38%), radial-gradient(circle at 72% 68%, rgb(0 200 229 / 8%), transparent 30%), var(--navy-0); }
.hero-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: center; gap: 48px; padding-block: 88px 104px; }
.hero-copy { position: relative; z-index: 2; }
.hero-eyebrow { color: var(--human); }
.hero h1 { max-width: 720px; font-size: clamp(2.8rem, 5.7vw, 5.25rem); letter-spacing: -0.055em; }
.hero-lead { max-width: 630px; margin: 28px 0 0; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.16rem); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 34px 0 0; }
.hero-visual { position: relative; display: grid; place-items: center; min-width: 0; min-height: 500px; isolation: isolate; }
.hero-visual::before, .hero-visual::after { position: absolute; z-index: -1; width: 74%; height: 1px; content: ""; background: linear-gradient(90deg, transparent, rgb(0 200 229 / 55%), transparent); transform: rotate(45deg); }
.hero-visual::after { background: linear-gradient(90deg, transparent, rgb(143 167 255 / 48%), transparent); transform: rotate(-45deg); }
.hero-mark { position: relative; z-index: 2; width: min(90%, 440px); height: auto; filter: drop-shadow(0 24px 60px rgb(25 82 232 / 24%)); }
#stage { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; max-width: none; pointer-events: none; }
#stage[data-ready="true"] ~ .hero-mark { display: none; }
html.stage-failed #stage { display: none; }
html.stage-failed .hero-mark { display: block; }
.flow-label { position: absolute; z-index: 3; padding: 5px 9px; border: 1px solid currentcolor; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.68rem; letter-spacing: 0.14em; }
.flow-human { top: 15%; left: 2%; color: var(--human); }
.flow-agent { right: 0; bottom: 17%; color: var(--cyan); }
.hero-hint { position: absolute; right: 32px; bottom: 24px; margin: 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.66rem; letter-spacing: 0.16em; writing-mode: vertical-rl; }

@media (max-width: 960px) {
  .hero { min-height: auto; }
  .hero-in { grid-template-columns: 1fr; gap: 24px; padding-block: 72px 84px; }
  .hero-copy { max-width: 760px; }
  .hero-visual { min-height: 380px; }
  .hero-mark { width: min(72vw, 360px); }
  .flow-human { left: 12%; }
  .flow-agent { right: 12%; }
}

@media (max-width: 520px) {
  .hero-in { padding-block: 56px 70px; }
  .hero h1 { font-size: clamp(2.55rem, 12vw, 3.65rem); }
  .hero-lead { margin-top: 22px; }
  .hero-cta { margin-top: 28px; }
  .hero-cta .btn { flex: 1 1 150px; }
  .hero-visual { min-height: 290px; }
  .hero-mark { width: min(76vw, 290px); }
  .hero-hint { display: none; }
  .flow-human { top: 8%; left: 0; }
  .flow-agent { right: 0; bottom: 8%; }
}