/* Intro 3D: przypięta scena na pełny ekran zamiast osi montażowej.
   Wspólne dla obu wersji (model z kodu i sekwencja klatek). */
.intro { position: relative; height: 760vh; }
.intro__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.intro__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.intro__shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(6, 10, 22, .92) 0%, rgba(6, 10, 22, .55) 34%, rgba(6, 10, 22, 0) 58%),
    linear-gradient(0deg, var(--paper) 0%, rgba(6, 10, 22, 0) 18%);
}

.intro__hero { position: absolute; left: 0; right: 0; bottom: clamp(70px, 12vh, 130px); }
.intro__hero .hero__title { max-width: 11ch; font-size: min(clamp(42px, 6.6vw, 104px), 10.5vh); }
.intro__hero .hero__side { max-width: 460px; margin-top: 28px; }

.intro__acts { position: absolute; inset: 0; pointer-events: none; }
.intro__acts .wrap { height: 100%; display: grid; align-items: center; }
.act { grid-area: 1 / 1; max-width: 440px; display: grid; gap: 16px; opacity: 0; visibility: hidden; will-change: opacity, transform; }
.act.is-on { pointer-events: auto; }
.act .h2 { font-size: clamp(34px, 4.4vw, 60px); }
.act p { color: var(--ink-2); font-size: 18px; max-width: 38ch; }
.act__price { font: 700 26px/1 var(--display); letter-spacing: -0.02em; color: var(--ink) !important; }
.act__price small { font: 500 15px/1 var(--body); color: var(--ink-3); margin-right: 6px; }

.intro__steps { position: absolute; left: 0; right: 0; bottom: 28px; pointer-events: none; }
.intro__steps ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; max-width: 440px; }
.intro__steps li { flex: 1; display: grid; gap: 8px; font-size: 13px; color: var(--ink-3); transition: color .3s; }
.intro__steps li::before { content: ""; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-hi) calc(var(--f, 0) * 100%), var(--line-hi) 0); }
.intro__steps li.is-on { color: var(--ink); }

.intro__hud { position: absolute; right: max(16px, env(safe-area-inset-right, 0px)); bottom: 28px; margin: 0; font: 500 12px/1.4 var(--mono); color: var(--ink-3); text-align: right; font-variant-numeric: tabular-nums; pointer-events: none; }
.intro__hud b { color: var(--blue-hi); font-weight: 500; }

.intro.no-webgl .intro__canvas { background: radial-gradient(50% 50% at 70% 45%, rgba(47, 107, 255, .45), transparent 70%); }

@media (max-width: 900px) {
  .intro { height: 720vh; }
  .intro__shade { background: linear-gradient(0deg, var(--paper) 0%, rgba(6, 10, 22, .9) 34%, rgba(6, 10, 22, 0) 62%); }
  .intro__hero { bottom: 64px; }
  .intro__hero .hero__title { max-width: none; }
  .intro__hero .hero__side { margin-top: 18px; gap: 16px; }
  .intro__hero .hero__lead { font-size: 16px; }
  .intro__hero .hero__note { display: none; }
  .intro__acts .wrap { align-items: end; padding-bottom: 76px; }
  .act { gap: 10px; }
  .act p { font-size: 16px; }
  .intro__steps { bottom: 22px; }
  .intro__hud { bottom: auto; top: calc(var(--nav-h) + 8px); }
}