/* ==========================================================================
   hero.css – sekcja hero (Figma y 0–900) + pionowe „szyny" z napisami
   ========================================================================== */

/* ---------- telefon (bazowo) ---------- */
.hero { isolation: isolate; padding: 112px 20px 56px 52px; min-height: 620px; overflow: clip; }
.hero__media { position: absolute; top: 0; z-index: -1; pointer-events: none; }
.hero__media img { width: 100%; height: auto; }
.hero__media--purple  { right: -16%; width: 62%; top: 56px; }
.hero__media--emerald { right: -8%;  width: 52%; top: 56px; }
.hero .stage, .about .stage { position: static; }

.hero__heading { font: inherit; }
.hero__title { display: block; font-weight: 600; font-size: clamp(64px, 19vw, 88px); line-height: 1; letter-spacing: var(--ls-semi); }
.hero__subtitle { display: block; max-width: 11em; margin-top: 14px; font-weight: 300; font-size: 24px; line-height: 1.08; letter-spacing: .03em; }
.hero__lead { max-width: 24em; margin-top: 22px; color: var(--font-2); font-size: 14px; line-height: 1.5; }
.hero__facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 36px; font-size: 18px; line-height: 1.2; }
.hero__facts strong { font-weight: 700; }
.hero__fact-dash { font-weight: 700; font-size: 1.4em; }
.hero__cta { margin-top: 24px; }

/* szyny pionowe: tekst + linia */
.rail { position: absolute; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.rail--left  { left: 12px; top: 126px; }
.rail--right { right: 12px; top: 90px; }
.rail__text { writing-mode: vertical-rl; font-weight: 700; font-size: 14px; line-height: 1.2; white-space: nowrap; letter-spacing: var(--ls); }
.rail--left .rail__text { transform: rotate(180deg); }
.rail__line { display: block; flex: none; width: 2px; height: 36px; background: #fff; }

/* ---------- tablet ---------- */
@media (min-width: 700px) {
  .hero { padding: 150px 0 80px clamp(88px, 10vw, 128px); min-height: clamp(660px, 76vw, 860px); overflow: visible; }
  .hero__media--purple  { left: 42.25%; right: auto; width: 57.75%; top: 0; }
  .hero__media--emerald { left: 51%;    right: auto; width: 47.8%; top: 0; }
  .hero__title { font-size: clamp(100px, 13.2vw, 150px); }
  .hero__subtitle { margin-top: 18px; font-size: clamp(26px, 3.1vw, 32px); }
  .hero__lead { margin-top: 28px; max-width: 21em; font-size: 16px; }
  .hero__facts { margin-top: 56px; font-size: clamp(20px, 2.2vw, 24px); }
  .hero__cta { margin-top: 28px; }
  .rail { gap: 14px; }
  .rail--left  { left: clamp(22px, 4vw, 52px); top: 150px; }
  .rail--right { right: clamp(18px, 3vw, 44px); top: 120px; }
  .rail__text { font-size: clamp(18px, 2.2vw, 24px); }
  .rail__line { width: 3px; height: clamp(48px, 6vw, 78px); }
}

/* ---------- desktop (Figma 1728) ---------- */
@media (min-width: 1280px) {
  .hero .stage, .about .stage { position: relative; }
  .hero { --h: 900; padding: 0; min-height: 0; overflow: visible; }
  .hero .stage { position: relative; }
  .hero__media--purple, .hero__media--emerald { left: calc(var(--x) * var(--u)); right: auto; width: calc(var(--w) * var(--u)); }
  .hero__title { font-size: calc(150 * var(--u)); letter-spacing: calc(3 * var(--u)); white-space: nowrap; }
  .hero__subtitle { font-size: calc(32 * var(--u)); line-height: 1; margin: 0; max-width: none; letter-spacing: calc(.96 * var(--u)); }
  .hero__lead { margin: 0; max-width: none; font-size: max(11px, calc(13 * var(--u))); line-height: 1; color: var(--font-2); }
  .hero__facts { display: flex; flex-wrap: nowrap; gap: 0; margin: 0; width: auto; font-size: calc(24 * var(--u)); white-space: nowrap; line-height: 1; }
  .hero__fact-num { min-width: calc(93 * var(--u)); }
  .hero__fact-dash { min-width: calc(42 * var(--u)); font-size: calc(40 * var(--u)); }
  .hero__cta { margin: 0; transform: none; }

  .rail { position: static; display: contents; }
  .rail__text { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); font-size: calc(24 * var(--u)); transform: translate(-50%, -50%); line-height: 1; }
  .rail--left .rail__text { transform: translate(-50%, -50%) rotate(180deg); }
  .rail__line { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(3 * var(--u)); height: calc(78 * var(--u)); }
}