body.teaser { min-height: 100svh; display: flex; flex-direction: column; overflow-x: hidden; }

.bg-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -4; filter: saturate(.9); }
.bg-shade { position: fixed; inset: 0; z-index: -3; background:
  radial-gradient(ellipse at 50% 38%, rgba(17, 23, 29, .35) 0%, rgba(17, 23, 29, .82) 62%, rgba(11, 16, 20, .97) 100%); }
.bg-grid { position: fixed; inset: 0; z-index: -2; opacity: .5; pointer-events: none;
  background-image:
    linear-gradient(rgba(237, 240, 237, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(237, 240, 237, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 40%, #000 0%, transparent 72%); }
.scan { position: fixed; left: 0; right: 0; top: -20%; height: 18%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(245, 217, 40, .06), transparent); animation: scan 7s linear infinite; }
@keyframes scan { to { transform: translateY(700%); } }

.teaser .nav-cta { margin-left: auto; }

.stage { flex: 1; padding: 108px 0 32px; }
.center { display: flex; flex-direction: column; align-items: center; text-align: center; }
.center .eyebrow { margin-bottom: 8px; }

.logo3d { position: relative; width: 200px; height: 190px; display: grid; place-items: center; perspective: 900px; margin: 6px 0 4px; }
.logo3d img { position: relative; width: 190px; height: auto; filter: drop-shadow(0 22px 26px rgba(0, 0, 0, .55)); }
.logo3d .glow { position: absolute; inset: 18% 12% 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(245, 217, 40, .22), transparent); filter: blur(14px); animation: breathe 3.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; transform: scale(1.12); } }

.teaser h1 { font-size: clamp(2.8rem, 9.5vw, 6.4rem); margin: 6px 0 14px; text-shadow: 0 6px 40px rgba(0, 0, 0, .5); }
.soon { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; font-size: clamp(.95rem, 2.4vw, 1.25rem); letter-spacing: .5em; color: var(--volt); text-indent: .5em; }
.cursor { display: inline-block; width: 10px; height: 1.15em; background: var(--volt); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.center .lead { max-width: 620px; margin: 0 0 30px; }

.when { margin-bottom: 30px; min-height: 76px; display: grid; place-items: center; }
.tba { --notch: 12px; display: flex; align-items: center; gap: 16px; padding: 18px 26px; text-align: left; background: rgba(32, 41, 48, .8); backdrop-filter: blur(6px); box-shadow: inset 0 0 0 1px var(--line); }
.tba .live { flex: none; width: 10px; height: 10px; margin: 0; background: var(--volt); }
.tba b { display: block; font-size: .8rem; font-weight: 500; letter-spacing: .14em; }
.tba small { color: var(--muted); font-size: .88rem; }
.count { display: grid; grid-template-columns: repeat(4, minmax(74px, 1fr)); gap: 12px; }
.cell { --notch: 12px; padding: 14px 10px 12px; background: rgba(32, 41, 48, .85); backdrop-filter: blur(6px); }
.cell b { display: block; font: 700 clamp(1.9rem, 5vw, 2.8rem)/1 var(--display); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.cell small { display: block; margin-top: 6px; font-size: .62rem; letter-spacing: .2em; color: var(--muted); }
.count[hidden], .tba[hidden] { display: none; }

.status-wrap { margin-top: 84px; }
.board { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pstep { --notch: 14px; position: relative; padding: 24px 22px 26px; background: rgba(32, 41, 48, .82); backdrop-filter: blur(6px); }
.pstep::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 3px; background: var(--line); }
.pstep.done::before { background: var(--lime); }
.pstep.doing::before { background: var(--volt); animation: pulse 1.6s ease-in-out infinite; }
.pstep.next::before { background: var(--cyan); opacity: .5; }
.pstep .state { font-size: .68rem; letter-spacing: .18em; }
.pstep.done .state { color: var(--lime); }
.pstep.doing .state { color: var(--volt); }
.pstep.next .state { color: var(--cyan); }
.pstep h3 { margin: 10px 0 8px; font-size: 1.12rem; }
.pstep p { margin: 0; color: var(--muted); font-size: .92rem; }

.teaser .footer { margin-top: 56px; background: rgba(11, 16, 20, .9); }

@media (max-width: 900px) {
  .board { grid-template-columns: repeat(2, 1fr); }
  .stage { padding-top: 92px; }
}
@media (max-width: 520px) {
  .board { grid-template-columns: 1fr; }
  .soon { letter-spacing: .3em; text-indent: .3em; }
  .count { gap: 8px; grid-template-columns: repeat(4, 1fr); }
  .tba { padding: 14px 16px; }
  .nav-cta .btn-ghost { display: none; }
  .center .cta .btn { width: 100%; }
  .teaser .brand-sub { display: none; }
  .teaser .brand { letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  .bg-video { display: none; }
  body.teaser { background: var(--bg) url("../assets/hero-poster.jpg") center / cover fixed; }
  .scan, .logo3d img, .logo3d .glow, .cursor, .pstep.doing::before { animation: none; }
}