/*
 * DANCE11 — strona marketingowa. Ten sam język co apka i panel: białe tło, czarny tekst,
 * wersaliki z rozstrzeleniem, cienkie linie, lekka waga przy dużych rozmiarach.
 * Bez kolorów statusu i bez fontów z sieci — masa z rozmiaru, nie z wagi.
 */
:root {
  --bg: #ffffff;
  --text: #000000;
  --muted: #8a8a8a;
  --line: #e8e8e8;
  --band: #fafafa;
  --font: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 1080px;
  --gutter: 24px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --text: #ffffff;
    --muted: #8c8c8c;
    --line: #262626;
    --band: #0a0a0a;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* Sizes are drawn for a ~1280px window; wider desktops scale the whole page, as browser zoom would,
   instead of leaving 15px text in a narrow column. Media queries still see the real width. */
@media (min-width: 1400px) { body { zoom: 1.125; --z: 1.125; } html { scroll-padding-top: 81px; } }
@media (min-width: 1700px) { body { zoom: 1.25; --z: 1.25; } html { scroll-padding-top: 90px; } }
@media (min-width: 2200px) { body { zoom: 1.5; --z: 1.5; } html { scroll-padding-top: 108px; } }

a { color: inherit; text-decoration: none; }
strong { font-weight: 500; }
h1, h2, h3, p { margin: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.muted { color: var(--muted); }
.small { font-size: 13px; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

.skip {
  position: absolute; left: 16px; top: -48px; padding: 8px 12px;
  background: var(--text); color: var(--bg); font-size: 12px; z-index: 10;
}
.skip:focus { top: 12px; }

:focus-visible { outline: 1px solid var(--text); outline-offset: 3px; }

/* Nagłówek */
.top {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line);
}
.top-row { display: flex; align-items: center; justify-content: space-between; height: 60px; }

.brand { font-size: 13px; letter-spacing: 6px; font-weight: 400; }

.nav { display: flex; align-items: center; gap: 22px; }
.nav a, .aud a, .langs a { white-space: nowrap; }
.top-row .nav { margin-left: auto; }
/* Dla kogo: szkoły (B2B) i tancerze (B2C) — dwie strony, przełącznik zaraz przy marce. */
.aud { display: flex; gap: 16px; margin: 0 32px 0 24px; padding-left: 22px; border-left: 1px solid var(--line); }
.aud a { font-size: 11px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--muted); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .2s, border-color .2s; }
.aud a:hover { color: var(--text); }
.aud a.on { color: var(--text); border-bottom-color: var(--text); }
/* Przełącznik języka: obok menu, ciszej od niego; kolejne języki to kolejne linki. */
.langs { display: flex; gap: 10px; margin-left: 24px; padding-left: 20px; border-left: 1px solid var(--line); }
.langs a { font-size: 11px; letter-spacing: 1.6px; font-weight: 500; color: var(--muted); padding: 6px 0; transition: color .2s; }
.langs a:hover, .langs a.on { color: var(--text); }
.nav a {
  font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase;
  color: var(--muted); transition: color .2s;
}
.nav a:hover { color: var(--text); }
.nav { position: relative; }
.nav a { padding: 6px 0; }
.nav .nav-cta { color: var(--text); }
.nav a.on { color: var(--text); }
/* Podkreślenie jak zakładki w apce: jedno, przeskakuje płynnie do sekcji, którą właśnie widać. */
.nav-ink { position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--text); opacity: 0; pointer-events: none;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s; }
.nav-ink.on { opacity: 1; }

/* Typografia sekcji */
.eyebrow, .label {
  font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase;
  color: var(--muted);
}

h1 {
  font-size: clamp(36px, 6.4vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.5px;
  font-weight: 300;
  max-width: 16ch;
  margin-top: 20px;
}

h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  line-height: 1.12;
  letter-spacing: 0.2px;
  font-weight: 300;
  margin-top: 14px;
  max-width: 22ch;
}

h3, .h3 { font-size: 16px; letter-spacing: 0.4px; font-weight: 400; line-height: 1.35; }

.lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--muted); max-width: 46ch; margin-top: 24px; line-height: 1.5; }
.text { font-size: 15px; line-height: 1.6; max-width: 52ch; }

/* Przyciski */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 24px;
  background: var(--text); color: var(--bg); border: 1px solid var(--text);
  font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase;
  transition: opacity .2s, background .2s, color .2s;
}
.btn:hover { opacity: .82; }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { opacity: 1; background: var(--text); color: var(--bg); }

/* Hero */
/* Tyle samo nad treścią (do nagłówka) co pod nią — telefon, najwyższy w hero, stoi pośrodku. */
.hero { padding: clamp(64px, 10vw, 120px) 0; border-bottom: 1px solid var(--line); }
/* Na desktopie hero wypełnia pierwszy ekran, a jego dolna kreska stoi tuż pod krawędzią okna: na dzień dobry
   sama czerń. 61px to nagłówek; vh nie zna powiększenia body, stąd dzielenie przez --z. */
@media (min-width: 981px) {
  .hero { min-height: calc(100svh / var(--z, 1) - 61px + 2px); display: flex; flex-direction: column; justify-content: center; }
  .hero > .wrap { width: 100%; }
}
.hero-note { margin-top: 20px; font-size: 12px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--muted); }

/* Sekcje */
.section { padding: clamp(64px, 9vw, 112px) 0; border-bottom: 1px solid var(--line); }
/* Skok z menu pomija górny odstęp sekcji: etykieta staje tuż pod paskiem menu, a treść mieści się w oknie. */
.section[id] { scroll-margin-top: calc(16px - clamp(64px, 9vw, 112px)); }
.band { background: var(--band); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px 64px; align-items: start; }
.split-top { margin-top: 64px; }
/* Nagłówek sekcji z akapitem obok: akapit stoi na środku wysokości etykiety z nagłówkiem. */
.split-head { align-items: center; }
.split .text { margin-top: 0; }
.split h2 + .text, .split h2 + .text.muted { margin-top: 20px; }

/* Karty oferty */
.grid {
  list-style: none; padding: 0; margin: 48px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
}
.card { padding: 28px 24px 8px 0; display: flex; flex-direction: column; gap: 10px; }
.card + .card { padding-left: 24px; border-left: 1px solid var(--line); }
.card p { font-size: 14px; color: var(--muted); line-height: 1.55; }
.num { font-size: 11px; letter-spacing: 1px; color: var(--muted); }

/* Przepływ pieniędzy */
.flow {
  list-style: none; padding: 0; margin: 32px 0 0;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase;
}
.flow li { padding: 12px 16px; border: 1px solid var(--line); color: var(--muted); }
.flow li + li { margin-left: 28px; position: relative; }
.flow li + li::before {
  content: ""; position: absolute; left: -24px; top: 50%; width: 20px; height: 1px; background: var(--text);
}
.flow li:last-child { border-color: var(--text); color: var(--text); }
.flow strong { font-weight: 500; }

/* Lista korzyści */
.list { list-style: none; padding: 0; margin: 48px 0 0; border-top: 1px solid var(--line); }
.list li {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px;
  padding: 22px 0; border-bottom: 1px solid var(--line);
}
.list strong { font-size: 18px; font-weight: 300; letter-spacing: 0.2px; }
.list span { color: var(--muted); font-size: 15px; }

/* Cennik */
.prices {
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-top: 48px; border: 1px solid var(--line); background: var(--bg);
}
.price { padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; }
.price + .price { border-left: 1px solid var(--line); }
.price-name { font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; color: var(--muted); }
.price-value { font-size: clamp(32px, 3.6vw, 44px); font-weight: 300; letter-spacing: 0.5px; line-height: 1.1; }
.price-value small { font-size: 14px; color: var(--muted); letter-spacing: 0.2px; }
.price-note { font-size: 13px; color: var(--muted); }

.offer {
  margin-top: 24px; padding: 28px; border: 1px solid var(--text);
  display: grid; grid-template-columns: 180px 1fr; gap: 8px 32px; align-items: baseline; background: var(--bg);
}
.offer .label { color: var(--text); }
.offer-text { font-size: clamp(20px, 2.2vw, 26px); font-weight: 300; line-height: 1.25; }
.offer .text { grid-column: 2; }

.bullets { margin: 16px 0 0; padding: 0; list-style: none; }
.bullets li { position: relative; padding: 10px 0 10px 20px; font-size: 15px; line-height: 1.55; border-bottom: 1px solid var(--line); }
.bullets li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 1px; background: var(--text); }
.split .h3 + .text { margin-top: 8px; font-size: 14px; }
/* Cennik: dwie listy na wspólnych wierszach (subgrid), żeby ich kreski stały w jednej linii. */
.pair { grid-template-rows: auto repeat(3, auto); row-gap: 0; }
.pair-col { grid-row: span 4; display: grid; grid-template-rows: subgrid; }
.pair .fees, .pair .bullets { display: contents; }
.pair-head { padding-bottom: 16px; }
.fees { margin: 0; }
.fees div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.fees dt, .fees dd { margin: 0; }
.fees dd { font-variant-numeric: tabular-nums; }
.pair .bullets li { padding: 14px 0 14px 20px; }
.pair .bullets li::before { top: 25px; }
.pair .fees div:first-child, .pair .bullets li:first-child { border-top: 1px solid var(--line); }

/* Tabele */
.table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 15px; }
.table th, .table td { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; font-weight: 400; }
.table td { text-align: right; font-variant-numeric: tabular-nums; }
.table tfoot th, .table tfoot td { border-bottom: 0; border-top: 1px solid var(--text); padding-top: 18px; }
.table tfoot strong { font-size: 22px; font-weight: 300; }
.table tr.off { color: var(--muted); }
.result { margin-top: 0; }

/* Kalkulator */
.calc { margin-top: 32px; display: flex; flex-direction: column; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 10px; border: 0; padding: 0; margin: 0; min-width: 0; }
.field > span:first-child, .field legend {
  font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; color: var(--muted); padding: 0;
}
.input-wrap { display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--text); max-width: 220px; }
.input-wrap input {
  width: 100%; border: 0; background: transparent; color: var(--text);
  font: 300 32px/1.2 var(--font); padding: 4px 0; outline: none; -moz-appearance: textfield;
}
.input-wrap input::-webkit-outer-spin-button,
.input-wrap input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-wrap span { color: var(--muted); }

.seg { display: inline-flex; border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; }
.seg span {
  display: block; padding: 12px 16px; cursor: pointer;
  font-size: 11px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--muted);
  transition: background .2s, color .2s;
}
.seg label + label span { border-left: 1px solid var(--line); }
.seg input:checked + span { background: var(--text); color: var(--bg); }
.seg input:focus-visible + span { outline: 1px solid var(--text); outline-offset: 2px; }

.check { display: flex; gap: 12px; align-items: center; font-size: 14px; cursor: pointer; }
.check input { appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid var(--text); margin: 0; flex: none; cursor: pointer; display: grid; place-content: center; }
.check input:checked { background: var(--text); }
.check input:checked::after { content: ""; width: 8px; height: 4px; border: solid var(--bg); border-width: 0 0 1.5px 1.5px; transform: translateY(-1px) rotate(-45deg); }

.split > div > .table + .text { margin-top: 20px; }

/* FAQ */
.faq { margin-top: 40px; border-top: 1px solid var(--line); max-width: 760px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 22px 40px 22px 0; position: relative;
  font-size: 17px; font-weight: 300; letter-spacing: 0.2px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  font-size: 20px; font-weight: 300; color: var(--muted); transition: transform .2s;
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 40px 24px 0; color: var(--muted); font-size: 15px; max-width: 60ch; }

/* Kontakt */
.cta { text-align: left; padding-bottom: clamp(80px, 12vw, 144px); }
.cta:not(:last-child) { padding-bottom: clamp(64px, 9vw, 112px); }
main > .section:last-child { border-bottom: 0; }
.cta .btn { min-height: 56px; padding: 0 32px; font-size: 12px; letter-spacing: 1.6px; text-transform: none; }

/* Stopka */
.foot { border-top: 1px solid var(--line); padding: 32px 0; font-size: 12px; }
.foot-row { display: flex; flex-wrap: wrap; gap: 12px 32px; align-items: center; justify-content: space-between; }
.foot .muted { letter-spacing: 0.4px; }

/* Wejście sekcji */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in { opacity: 1; transform: none; }
}

/* Węższy laptop: menu sekcji nie mieści się obok przełączników — zostaje sam Kontakt. */
@media (max-width: 1180px) {
  .nav a:not(.nav-cta) { display: none; }
  .nav-ink { display: none; }
  .nav .nav-cta { border-bottom: 1px solid var(--text); padding: 0 0 2px; }
}

/* Tablet */
@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr 1fr; }
  .card:nth-child(3) { padding-left: 0; border-left: 0; }
  .card:nth-child(n+3) { border-top: 1px solid var(--line); }
  .card { padding-bottom: 28px; }
  .prices { grid-template-columns: 1fr; }
  .price + .price { border-left: 0; border-top: 1px solid var(--line); }
}

/* Telefon */
@media (max-width: 680px) {
  :root { --gutter: 16px; }
  .nav { gap: 18px; }
  .nav a:not(.nav-cta) { display: none; }
  .nav .nav-cta { border-bottom: 1px solid var(--text); padding: 0 0 2px; }
  .langs { margin-left: 18px; padding-left: 14px; gap: 8px; }
  .top-row { flex-wrap: wrap; height: auto; padding-top: 14px; padding-bottom: 0; row-gap: 6px; }
  .aud { order: 3; width: 100%; margin: 0 0 0 -2px; padding: 4px 0 10px; border-left: 0; gap: 22px; }
  html { scroll-padding-top: 108px; }
  .nav-ink { display: none; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split-top { margin-top: 48px; }
  .pair { row-gap: 0; }
  .pair-col + .pair-col { margin-top: 40px; }
  .grid { grid-template-columns: 1fr; }
  .card, .card + .card { padding: 24px 0; border-left: 0; }
  .card + .card { border-top: 1px solid var(--line); }
  .list li { grid-template-columns: 1fr; gap: 4px; }
  .offer { grid-template-columns: 1fr; padding: 24px 20px; }
  .offer .text { grid-column: 1; }
  .price { padding: 24px 20px; }
  .actions .btn { flex: 1 1 100%; }
  .cta-strip .btn { flex: 1 1 100%; }
  .flow li + li::before { left: -18px; width: 16px; }
  .seg span { padding: 12px; }
}

/* Dokument (polityka prywatności) */
.doc { padding: clamp(56px, 8vw, 96px) 0 clamp(64px, 9vw, 112px); }
.doc .wrap { max-width: 760px; }
.doc h1 { font-size: clamp(32px, 4.4vw, 48px); max-width: none; margin-top: 14px; }
.doc .lead { max-width: none; }
.doc-date { margin-top: 20px; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.doc section { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.doc h2 { font-size: 20px; letter-spacing: .3px; margin: 0 0 14px; max-width: none; }
.doc p, .doc li { font-size: 15px; line-height: 1.65; }
.doc p + p { margin-top: 12px; }
.doc ul { margin: 12px 0 0; padding: 0; list-style: none; }
.doc li { position: relative; padding: 8px 0 8px 20px; }
.doc li::before { content: ""; position: absolute; left: 0; top: 20px; width: 8px; height: 1px; background: var(--text); }
.doc strong { font-weight: 500; }
.doc a { border-bottom: 1px solid var(--text); }
.foot a { color: var(--muted); }
.list a.inline { border-bottom: 1px solid currentColor; }
.foot a:hover { color: var(--text); }

/* ───────── Makiety ekranów i animacje ───────── */

.hero { overflow: hidden; }
.hero-grid h1 { font-size: clamp(36px, 5.2vw, 64px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 48px; align-items: center; }
.btn .arrow { display: inline-block; margin-left: 10px; transition: transform .25s ease; }
.btn:hover .arrow { transform: translateX(4px); }

.hero-device { margin: 0; position: relative; justify-self: center; }

/*
 * Telefon. Treść stoi w punktach iPhone'a Pro Max (430 × 932 pt), z rozmiarami pisma z apki
 * (dance11-app/src/theme.ts) i odstępami zmierzonymi na zrzutach ekranu. Cały telefon skaluje
 * się jednym transformem (--s), więc proporcje są te same co na prawdziwym urządzeniu.
 */
.fit { --s: .7; position: relative; width: calc(430px * var(--s)); height: calc(932px * var(--s)); flex: none; }
.fit-hero { --s: .7; }
/* A laptop window is no taller for being zoomed: the hero phone still has to fit above the fold. */
@media (min-width: 1400px) and (max-height: 1100px) { .hero { padding: 64px 0; } .fit-hero { --s: .64; } }
.fit-stage { --s: .62; }
.fit-mini { --s: .52; }
.fit > .phone { position: absolute; top: 0; left: 0; transform: scale(var(--s)); transform-origin: 0 0; }

.phone {
  --pad: 24px;
  --faint: color-mix(in srgb, var(--text) 16%, var(--bg));
  width: 430px; height: 932px; overflow: hidden; isolation: isolate;
  border-radius: 68px; background: var(--bg); color: var(--text);
  box-shadow: 0 0 0 2px var(--line), 0 0 0 14px var(--band), 0 0 0 16px var(--line), 0 70px 120px -50px rgba(0, 0, 0, .35);
  font-size: 15px; line-height: 1.33; letter-spacing: .2px;
}
.ph-status { position: absolute; top: 0; left: 0; right: 0; height: 54px; display: flex; justify-content: space-between; align-items: center; padding: 8px 44px 0 52px; font-size: 17px; font-weight: 600; letter-spacing: 0; z-index: 4; }
.ph-island { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.ph-icons { display: flex; gap: 7px; align-items: center; }
.ph-icons .sig { width: 18px; height: 11px; background: linear-gradient(90deg, var(--text) 0 3px, transparent 3px 5px, var(--text) 5px 8px, transparent 8px 10px, var(--text) 10px 13px, transparent 13px 15px, var(--text) 15px); clip-path: polygon(0 75%, 25% 75%, 25% 50%, 50% 50%, 50% 25%, 75% 25%, 75% 0, 100% 0, 100% 100%, 0 100%); }
.ph-icons .batt { width: 26px; height: 12px; border: 1.5px solid var(--text); border-radius: 4px; position: relative; opacity: .9; }
.ph-icons .batt::after { content: ""; position: absolute; inset: 1.5px 6px 1.5px 1.5px; background: var(--text); border-radius: 1.5px; }

.ph-screen { position: absolute; top: 54px; left: 0; right: 0; bottom: 70px; padding: 0 var(--pad); overflow: hidden; }
.ph-brand { font-size: 13px; line-height: 16px; letter-spacing: 6px; margin-top: 20px; }
.ph-h { font-size: 22px; line-height: 26px; letter-spacing: 2.4px; font-weight: 300; text-transform: uppercase; margin-top: 34px; }
.ph-tabs { display: flex; gap: 26px; margin: 24px calc(-1 * var(--pad)) 0; padding: 0 var(--pad); border-bottom: 1px solid var(--line); }
.ph-tabs span { font-size: 11px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--muted); padding: 0 0 16px; border-bottom: 1.5px solid transparent; margin-bottom: -1px; }
.ph-tabs .on { color: var(--text); border-bottom-color: var(--text); }

/* Siatka miesiąca: wiersze co 38 pt, wybrany dzień w czarnym polu, kropki = zajęcia */
.ph-month { font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; margin-top: 20px; }
.ph-wd, .ph-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.ph-wd { margin-top: 18px; }
.ph-wd span { font-size: 10px; letter-spacing: 1px; color: var(--muted); text-transform: uppercase; }
.ph-grid { margin: 6px calc(-1 * var(--pad)) 0; padding: 0 var(--pad) 10px; border-bottom: 1px solid var(--line); }
.ph-grid .d { position: relative; height: 38px; display: grid; place-items: center; font-size: 15px; font-weight: 300; font-variant-numeric: tabular-nums; }
.ph-grid .f { color: var(--faint); }
.ph-grid .on { color: var(--bg); background: var(--text); margin: 2px 1px; height: 34px; font-weight: 500; }
.ph-grid i { position: absolute; bottom: 4px; left: 0; right: 0; display: flex; justify-content: center; gap: 2px; }
.ph-grid i b { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }

.ph-day { font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; margin-top: 18px; }
.ph-sec { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 24px; }

/* Wiersze zajęć: godzina, nazwa, prowadzący · szkoła, serce albo stan */
.ph-list { list-style: none; padding: 0; margin: 4px 0 0; }
.ph-list li { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; align-items: center; padding: 10px 0; min-height: 58px; transition: background .15s; }
.r-t { font-size: 15px; line-height: 20px; align-self: start; font-variant-numeric: tabular-nums; }
.r-n { font-size: 15px; line-height: 20px; display: flex; flex-direction: column; min-width: 0; }
.r-n small { font-size: 12px; line-height: 17px; color: var(--muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r-s { padding-left: 12px; }
.ph-list-2 li { min-height: 80px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.ph-list-2 li:last-child { border-bottom: 0; }
.tag { font-style: normal; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ph-list li.press { background: var(--band); }
.buy { position: relative; display: block; width: 76px; height: 32px; overflow: hidden; background: var(--text); color: var(--bg); font-size: 11px; letter-spacing: 1.2px; font-weight: 500; text-transform: uppercase; transition: background .15s, color .15s; }
.buy span { position: absolute; inset: 0; display: grid; place-items: center; transition: transform .2s cubic-bezier(.2, .8, .2, 1), opacity .15s; }
.buy-done { transform: translateY(100%); opacity: 0; }
.buy.done { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.buy.done .buy-idle { transform: translateY(-100%); opacity: 0; }
.buy.done .buy-done { transform: none; opacity: 1; }
.heart { width: 22px; height: 22px; display: block; fill: none; stroke: var(--muted); stroke-width: 1.5; transition: fill .15s, stroke .15s; }
.heart.on { fill: var(--text); stroke: var(--text); }
.heart.pop { animation: bump .5s ease; }

.ph-tabbar { position: absolute; left: 0; right: 0; bottom: 0; height: 70px; display: flex; justify-content: space-between; padding: 22px 26px 0; border-top: 1px solid var(--line); background: var(--bg); font-size: 11px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.ph-tabbar .on { color: var(--text); }

/* Odkrywaj: wyszukiwarka, miasto i promień, arkusz z dołu */
.ph-search { font-size: 16px; color: var(--muted); margin-top: 34px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ph-loc { display: flex; justify-content: space-between; font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; margin: 0 calc(-1 * var(--pad)); padding: 22px var(--pad); border-bottom: 1px solid var(--line); }
.ph-loc b { font-weight: 500; }
.scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .25); z-index: 2; opacity: 0; transition: opacity .18s ease; }
.scrim.show { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 2px var(--pad) 34px; background: var(--bg); display: flex; flex-direction: column; transform: translateY(100%); transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.sheet.show { transform: none; }
.sheet-tall { top: 400px; }
.opt { font-size: 16px; color: var(--muted); padding: 13px 0; display: flex; justify-content: space-between; }
.opt.on { color: var(--text); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chips span { height: 36px; padding: 0 14px; display: grid; place-items: center; border: 1px solid var(--line); font-size: 15px; transition: background .15s, color .15s, border-color .15s; }
.chips .on { background: var(--text); color: var(--bg); border-color: var(--text); }
.sheet .ph-btn { margin-top: auto; }
.js-style-count { display: inline-block; margin-left: 6px; }

/* Ekrany zakupu: szczegóły zajęć, płatność, bilet */
.scr { position: absolute; top: 54px; left: 0; right: 0; bottom: 70px; padding: 0 var(--pad) 24px; background: var(--bg); display: flex; flex-direction: column; opacity: 0; transform: translateX(12px); transition: opacity .2s ease, transform .2s cubic-bezier(.2, .8, .2, 1); }
.scr.on { opacity: 1; transform: none; }
.ph-nav { display: flex; justify-content: space-between; align-items: center; height: 32px; margin-top: 12px; }
.ph-nav .back { font-size: 34px; font-weight: 300; line-height: 1; }
.ph-nav .heart { width: 18px; height: 18px; }
.scr .ph-h { margin-top: 30px; }
.ph-date { font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-top: 32px; }
.ph-time { font-size: 28px; line-height: 32px; letter-spacing: .5px; font-weight: 300; margin-top: 10px; }
.ph-fields { margin: 30px 0 0; padding-top: 10px; border-top: 1px solid var(--line); }
.ph-fields div { padding: 16px 0 6px; }
.ph-fields dt { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.ph-fields dd { margin: 12px 0 0; font-size: 16px; display: flex; justify-content: space-between; }
.ph-btn { margin-top: auto; height: 54px; display: flex; align-items: center; justify-content: center; background: var(--text); color: var(--bg); border: 1px solid var(--text); font-size: 12px; letter-spacing: 2.4px; font-weight: 500; text-transform: uppercase; transition: transform .15s ease; }
.ph-btn.press, .send.press { transform: scale(.96); }

.ph-btn-inline { margin-top: 30px; }
.scr .ph-fields { padding-bottom: 24px; border-bottom: 1px solid var(--line); }

/* Płatność: przeglądarka w arkuszu nad przyciemnionymi zajęciami, bez marki operatora */
.scr-pay {
  top: 70px; bottom: 0; z-index: 4; padding: 0 28px 40px; border-radius: 40px 40px 0 0;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, .38); transform: translateY(100%);
  transition: transform .26s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.scr-pay.on { transform: none; }
.pay-bar { display: flex; justify-content: space-between; align-items: center; height: 64px; margin: 10px -12px 0; }
.pay-bar .x { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 30px; font-weight: 300; background: var(--band); }
.pay-bar span:last-child { width: 46px; }
.pay-url { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 500; letter-spacing: 0; }
.lock { width: 11px; height: 9px; border-radius: 2px; background: var(--text); position: relative; margin-top: 4px; }
.lock::before { content: ""; position: absolute; left: 2px; top: -6px; width: 5px; height: 6px; border: 1.5px solid var(--text); border-bottom: 0; border-radius: 4px 4px 0 0; }
.pay-merchant { display: flex; align-items: center; gap: 12px; font-size: 16px; margin-top: 22px; }
.pay-merchant i { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--band); }
.pay-what { text-align: center; color: var(--muted); font-size: 16px; margin-top: 40px; }
.pay-amount { text-align: center; font-size: 34px; font-weight: 500; letter-spacing: 0; margin-top: 6px; }
.pay-h { font-size: 16px; margin-top: 42px; }
.pay-methods { display: flex; flex-direction: column; margin-top: 14px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.pay-methods span { position: relative; padding: 18px 18px 18px 54px; font-size: 16px; color: var(--muted); }
.pay-methods span + span { border-top: 1px solid var(--line); }
.pay-methods span::before { content: ""; position: absolute; left: 18px; top: 50%; width: 20px; height: 20px; margin-top: -10px; border: 1.5px solid var(--line); border-radius: 50%; }
.pay-methods .on { color: var(--text); }
.pay-methods .on::before { border-color: var(--text); background: radial-gradient(var(--text) 0 5px, transparent 5.5px); }
.pay-btn { position: relative; margin-top: auto; height: 58px; border-radius: 10px; background: var(--text); color: var(--bg); font-size: 17px; font-weight: 500; letter-spacing: 0; overflow: hidden; transition: transform .15s ease; }
.pay-btn.press { transform: scale(.97); }
.pay-btn > span { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity .12s; }
.pay-spin, .pay-ok { opacity: 0; }
.pay-spin::after { content: ""; width: 24px; height: 24px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.pay-btn.busy .pay-idle, .pay-btn.paid .pay-idle, .pay-btn.paid .pay-spin { opacity: 0; }
.pay-btn.busy .pay-spin, .pay-btn.paid .pay-ok { opacity: 1; }

.ap-btn { margin-top: 34px; height: 58px; border-radius: 10px; background: var(--text); color: var(--bg); display: grid; place-items: center; font-size: 21px; font-weight: 600; letter-spacing: -.2px; box-shadow: 0 0 0 1px var(--line); transition: transform .15s ease; }
.ap-btn.press { transform: scale(.97); }
.pay-or { display: flex; align-items: center; gap: 14px; margin-top: 22px; color: var(--muted); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.scr-pay .pay-h { display: none; }
.pay-btn-off { opacity: .35; }

/* Arkusz Apple Pay: zawsze ciemny, jak w iOS */
.apay {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 7; padding: 24px 22px 26px;
  border-radius: 44px; background: #1c1c1e; color: #fff; letter-spacing: 0;
  box-shadow: 0 0 0 999px rgba(0, 0, 0, 0);
  transform: translateY(115%); transition: transform .26s cubic-bezier(.2, .8, .2, 1), box-shadow .2s ease;
}
.apay.show { transform: none; box-shadow: 0 0 0 999px rgba(0, 0, 0, .35); }
.apay p { margin: 0; }
.apay-head { display: flex; justify-content: space-between; align-items: center; }
.apay-head b { font-size: 28px; font-weight: 600; }
.apay-head .x { width: 44px; height: 44px; border-radius: 50%; background: #3a3a3c; display: grid; place-items: center; font-size: 26px; font-weight: 300; }
.apay-card { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding: 16px; border-radius: 22px; background: #2c2c2e; font-size: 16px; }
.apay-card i { width: 48px; height: 32px; border-radius: 5px; background: linear-gradient(135deg, #5b5b60, #2a2a2d); box-shadow: inset 0 0 0 1px #6b6b70; }
.apay-card span { flex: 1; display: flex; flex-direction: column; }
.apay-card small { font-size: 13px; color: #98989d; }
.apay-card em { font-style: normal; font-size: 15px; color: #d1d1d6; }
.apay-sum { margin-top: 22px; padding: 0 4px; display: flex; flex-direction: column; gap: 4px; }
.apay-sum small { font-size: 14px; color: #98989d; text-transform: uppercase; letter-spacing: .4px; }
.apay-sum b { font-size: 32px; font-weight: 600; }
.apay-state { position: relative; height: 92px; margin-top: 18px; display: grid; place-items: center; }
.apay-state > span { position: absolute; transition: opacity .15s ease, transform .15s ease; }
.apay-hint { font-size: 15px; color: #d1d1d6; }
.apay-spin, .apay-ok, .apay-done { opacity: 0; }
.apay-spin { width: 46px; height: 46px; border: 3px solid #0a84ff; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
.apay-ok { width: 54px; height: 54px; border: 3px solid #0a84ff; border-radius: 50%; display: grid; place-items: center; color: #0a84ff; font-size: 26px; font-weight: 600; top: 6px; transform: scale(.6); }
.apay-done { font-size: 15px; bottom: 0; }
.apay.busy .apay-hint, .apay.done .apay-hint, .apay.done .apay-spin { opacity: 0; }
.apay.busy .apay-spin { opacity: 1; }
.apay.done .apay-ok { opacity: 1; transform: scale(1); }
.apay.done .apay-done { opacity: 1; }
/* Przycisk boczny iPhone’a stoi wysoko na prawej krawędzi (ok. ¼ wysokości), nie przy arkuszu: liczone od dołu arkusza. */
.apay-side { position: absolute; right: -10px; bottom: 637px; width: 4px; height: 70px; border-radius: 2px; background: #fff; opacity: 0; }
.apay.confirm .apay-side { animation: side .45s ease-in-out 2; }
@keyframes side { 0%, 100% { opacity: 0; transform: translateX(0); } 50% { opacity: .9; transform: translateX(-4px); } }

/* Nowy bilet w Moim kalendarzu */
.tag.tag-on { color: var(--text); }
.ph-list li.fresh { animation: fresh 1.8s ease; }
@keyframes fresh { 0%, 30% { background: var(--band); } 100% { background: transparent; } }

/* Po powrocie: ZAKUP — MASZ JUŻ BILET */
.ph-nav-c { position: relative; }
.ph-navt { position: absolute; left: 0; right: 0; text-align: center; font-size: 13px; letter-spacing: 3px; font-weight: 300; text-transform: uppercase; pointer-events: none; }
.t-what { font-size: 15px; letter-spacing: 1.8px; text-transform: uppercase; margin-top: 34px; }
.t-when { margin-top: 10px; }
.t-price { font-size: 16px; margin-top: 22px; }
.t-note { font-size: 14px; color: var(--muted); margin-top: 18px; padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.t-act { text-align: center; font-size: 12px; letter-spacing: 3px; font-weight: 500; text-transform: uppercase; margin-top: 44px; }
.t-act + .t-act { margin-top: 32px; }
.t-act.muted { color: var(--muted); }
.scr.on .ph-h { animation: fade-down .2s ease both; }

/* Odkrywaj: lista zawęża się po filtrach */
.ph-list li { max-height: 120px; transition: background .15s, opacity .16s ease, max-height .2s ease, min-height .2s ease, padding .2s ease; }
.ph-list li.out { opacity: 0; max-height: 0; min-height: 0; padding-top: 0; padding-bottom: 0; border-bottom-width: 0; overflow: hidden; }
.ph-loc b { font-weight: 500; }
.ph-loc .press { opacity: .35; }
.chips span.press { transform: scale(.94); }

/* Mój kalendarz: stan zapisu i kolejne dni */
.st3 { font-size: 12px !important; letter-spacing: .8px; margin-top: 4px !important; }
.ph-sub { font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.scr .ph-brand { margin-top: 20px; }
.scr .ph-brand + .ph-h { margin-top: 34px; }

/* Zajęcia z komunikatem i muzyką */
.lvl { font-size: 15px; color: var(--muted); margin-top: 8px; }
.ph-fields-tight { margin-top: 26px; padding-top: 4px; border-bottom: 0 !important; padding-bottom: 0 !important; }
.ph-fields-tight div { padding: 14px 0 4px; }
.ph-fields-tight dd { margin-top: 10px; }
.chev { color: var(--muted); }
.track { display: flex; align-items: center; gap: 12px; }
.eq { display: flex; align-items: flex-end; gap: 2px; width: 16px; height: 14px; }
.eq b { flex: 1; height: 30%; background: var(--text); }
.js-m-music.play .eq b { animation: eq .9s ease-in-out infinite; }
.js-m-music.play .eq b:nth-child(2) { animation-delay: .2s; }
.js-m-music.play .eq b:nth-child(3) { animation-delay: .4s; }
.ann { margin-top: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--line); transition: opacity .2s ease, transform .2s ease; }
.ann .ph-sec { margin-top: 0; }
.ann-who { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 16px; }
.ann-msg { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; margin-top: 10px; }
.ann-msg .muted { font-size: 13px; color: var(--muted); white-space: nowrap; }
.ann.hide { opacity: 0; transform: translateY(8px); }
.own { font-size: 14px; color: var(--muted); margin-top: 22px; }
.scr .own + .ph-btn { margin-top: 16px; }
@keyframes eq { 0%, 100% { height: 30%; } 50% { height: 100%; } }

/* Powiadomienie jak w iOS */
.push {
  position: absolute; left: 12px; right: 12px; top: 58px; z-index: 5; padding: 16px 18px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 28px;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35);
  transform: translateY(-130%); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .25, 1.1), opacity .15s;
}
.push.show { transform: none; opacity: 1; }
.push.press { transform: scale(.97); }
/* Ekran blokady: przykrywa też pasek zakładek, powiadomienie stoi pod godziną. */
.scr-lock { top: 0; bottom: 0; z-index: 3; align-items: center; padding-top: 96px; text-align: center; }
.lock-date { font-size: 20px; font-weight: 500; }
.lock-time { font-size: 104px; font-weight: 200; line-height: 1; letter-spacing: -2px; margin-top: 4px; }
.push-lock { top: 330px; }
/* Starsze powiadomienie zjeżdża pod nowe, jak w stosie iOS. */
.push.show.older { transform: translateY(var(--below, 118px)); }
/* Jak w iOS: na ekranie blokady godzina tylko duża, nie w pasku stanu. */
.phone:has(.scr-lock.on) .ph-status > span:first-child { opacity: 0; }
.push-app { display: flex; justify-content: space-between; align-items: center; font-size: 13px; letter-spacing: .4px; color: var(--muted); margin-bottom: 6px; }
.push-app span:first-child { display: flex; align-items: center; gap: 8px; }
.push-app img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px var(--line); }
.push-title { font-size: 15px; font-weight: 600; letter-spacing: 0; }
.push-body { font-size: 15px; line-height: 1.35; letter-spacing: 0; }

.toast {
  position: absolute; right: -56px; bottom: 84px;
  display: flex; align-items: center; gap: 10px; padding: 12px 16px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .25);
  font-size: 12px; letter-spacing: .3px; white-space: nowrap;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .18s ease, transform .18s ease;
}
.toast.show { opacity: 1; transform: none; }
.toast strong { font-weight: 500; }
.toast-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text); animation: pulse 1.6s ease-out infinite; }

/* Jak to działa: kroki */
.steps { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.steps li { position: relative; padding: 18px 24px 0 0; font-size: 14px; color: var(--muted); transition: color .4s; }
.steps li span { display: block; font-size: 11px; letter-spacing: 1px; margin-bottom: 6px; }
.steps li::before { content: ""; position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--text); }
.steps li.on { color: var(--text); }
/* Pasek postępu pod aktywnym krokiem; czas daje skrypt (--dur), żeby skończył się razem z krokiem. */
.steps li.on::before { width: calc(100% - 24px); transition: width var(--dur, 3.6s) linear; }

/* Scena */
.stage { margin: 40px 0 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 40px; align-items: stretch; }
/* Telefon jest niższy od panelu: stoi na środku jego wysokości, podpisy nad nimi zostają w jednej linii. */
.stage-phone { display: flex; flex-direction: column; }
.stage-phone .fit { margin: auto 0; }
.stage-tag { font-size: 10px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }

/* Panel recepcji */
.desk { border: 1px solid var(--line); background: var(--bg); box-shadow: 0 50px 100px -50px rgba(0, 0, 0, .28); }
.desk-bar { display: flex; align-items: center; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.desk-bar span { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--line); }
.desk-bar em { font-style: normal; font-size: 11px; color: var(--muted); letter-spacing: .4px; margin: 0 auto; padding-right: 40px; }
.desk-body { padding: 22px 0 0 24px; }
.desk-head { display: flex; flex-direction: column; gap: 6px; padding: 0 24px 14px 0; border-bottom: 1px solid var(--line); }
.desk-head .brand { font-size: 10px; letter-spacing: 5px; }
.desk-title { font-size: 18px; letter-spacing: 2px; font-weight: 300; text-transform: uppercase; margin-top: 4px; }
.desk-school { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); }
.desk-nav { display: flex; gap: 16px; margin-top: 4px; overflow: hidden; white-space: nowrap; }
.desk-nav span { font-size: 9px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--muted); padding-bottom: 3px; border-bottom: 1px solid transparent; }
.desk-nav .on { color: var(--text); border-bottom-color: var(--text); }

.desk-main { display: grid; grid-template-columns: minmax(0, 1fr) 248px; }
.week { display: grid; grid-template-columns: 1fr 1fr; padding: 16px 20px 20px 0; gap: 0 16px; }
.day + .day { border-left: 1px solid var(--line); padding-left: 16px; }
.day-head { font-size: 15px; padding-bottom: 8px; border-bottom: 1px solid var(--line); text-transform: uppercase; }
.day-head small { display: block; font-size: 9px; letter-spacing: 1px; color: var(--muted); }
.day:first-child .day-head { border-bottom-color: var(--text); font-weight: 500; }
.day:first-child .day-head small { color: var(--text); }
.tile { display: flex; flex-direction: column; padding: 10px 8px 10px; margin: 0 -8px; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.35; transition: background .4s; }
.tile b { font-size: 11px; font-weight: 500; letter-spacing: .4px; font-variant-numeric: tabular-nums; }
.tile small { font-size: 11px; color: var(--muted); }
.tile strong { font-weight: 500; color: var(--text); display: inline-block; }
.tile-on { background: var(--band); }
.tile.flash { animation: flash 1.4s ease; }
.occ { display: block; height: 2px; background: var(--line); margin-top: 7px; overflow: hidden; }
.occ em { display: block; height: 100%; background: var(--text); width: 0; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.o50 { width: 50%; } .o56 { width: 56%; } .o70 { width: 70%; } .o90 { width: 90%; } .o100 { width: 100%; }
/* Paski rosną przy wejściu w widok; bez skryptu stoją od razu. */
.stage.armed:not(.in) .occ em { width: 0; }

.insp { border-left: 1px solid var(--line); padding: 16px 20px 20px; display: flex; flex-direction: column; font-size: 13px; }
.insp p { margin: 0; }
.insp-title { font-size: 12px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; }
.insp-sub { font-size: 11px; color: var(--muted); margin-top: 4px !important; line-height: 1.5; }
.insp-sub strong { color: var(--text); font-weight: 400; text-transform: uppercase; letter-spacing: .6px; }
.insp-block { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 10px; }
.meta-s { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px !important; }
.meta-row { display: flex; justify-content: space-between; }
.meta-row strong { color: var(--text); font-weight: 500; letter-spacing: .6px; }
.js-d-count, .js-d-seats { display: inline-block; font-variant-numeric: tabular-nums; }
.bump { animation: bump .5s ease; }

.att { list-style: none; padding: 0; margin: 4px 0 0; }
.att li { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.att li:last-child { border-bottom: 0; }
.att li.new { animation: slide-in .6s cubic-bezier(.2, .8, .2, 1); }
.who { font-size: 12px; display: flex; flex-direction: column; line-height: 1.3; }
.who small { font-size: 10px; color: var(--muted); }
.st { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.tag-new { color: var(--text); border: 1px solid var(--text); padding: 2px 5px; }

.msg { min-height: 52px; padding: 4px 0 6px; margin-bottom: 10px !important; border-bottom: 1px solid var(--text); font-size: 12px; line-height: 1.45; }
.msg:empty::before { content: attr(data-placeholder); color: var(--muted); }
.msg.typing::after { content: ""; display: inline-block; width: 1px; height: 13px; margin-left: 1px; vertical-align: -2px; background: var(--text); animation: caret .9s steps(1) infinite; }
.reach { display: flex; gap: 14px; }
.reach span { font-size: 10px; letter-spacing: .6px; color: var(--muted); padding-bottom: 2px; border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.reach .on { color: var(--text); border-bottom-color: var(--text); font-weight: 500; }
.reach-note { font-size: 10px; line-height: 15px; color: var(--muted); min-height: 15px; margin: 6px 0 10px !important; }
.send {
  height: 36px; display: grid; place-items: center; background: var(--muted); color: var(--bg);
  font-size: 9px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; transition: background .3s, transform .15s;
}
.send.ready { background: var(--text); }
.send.sent { background: var(--bg); color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }

@keyframes flash { 0% { box-shadow: inset 2px 0 0 var(--text); } 70% { box-shadow: inset 2px 0 0 var(--text); } 100% { box-shadow: inset 0 0 0 var(--text); } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Aplikacja dla tancerzy: trzy małe telefony */
.apps { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.apps > li { display: flex; flex-direction: column; align-items: center; text-align: center; }
.apps .phone { text-align: left; }
.apps h3 { margin-top: 28px; }
.apps li > p { font-size: 14px; color: var(--muted); margin-top: 8px; max-width: 30ch; }
.mini { margin: 0; display: flex; justify-content: center; padding: 16px 0; }
@media (max-width: 900px) {
  .apps { grid-template-columns: 1fr; gap: 56px; max-width: 360px; margin-left: auto; margin-right: auto; }
}

/* Tancerze z innych miast i krajów: ten sam ekran w trzech językach */
.travel { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 48px 64px; align-items: center; margin-top: 96px; padding-top: 56px; border-top: 1px solid var(--line); }
.travel-h { font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; line-height: 1.2; letter-spacing: .2px; margin-top: 14px; max-width: 22ch; }
.travel-copy .text { margin-top: 18px; }
.travel-list { margin-top: 28px; }
.travel-list li { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); padding: 16px 0; }
.travel-list strong { font-size: 16px; }
.travel-list span { font-size: 14px; }
.lang-card { margin: 0; justify-self: center; width: min(100%, 340px); }
.lang-chips { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; }
.lang-chips span { font-size: 11px; letter-spacing: 1.6px; font-weight: 500; padding: 7px 12px; border: 1px solid var(--line); color: var(--muted); transition: background .2s, color .2s, border-color .2s; }
.lang-chips .on { background: var(--text); color: var(--bg); border-color: var(--text); }
.lang-screen { position: relative; height: 440px; border: 1px solid var(--line); border-radius: 28px; background: var(--bg); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .25); overflow: hidden; isolation: isolate; }
.lang-screen [data-pl] { transition: opacity .15s ease; }
.lang-card.swap .lang-screen [data-pl] { opacity: 0; }
.lc-brand { font-size: 10px; letter-spacing: 5px; }
.lc-h { font-size: 20px; letter-spacing: 2.2px; font-weight: 300; text-transform: uppercase; margin-top: 22px; }
.lc-sec { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--line); }
.lc-row { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0; padding: 14px 0 18px; border-bottom: 1px solid var(--line); }
.lc-row .r-t, .lc-row .r-n { font-size: 15px; line-height: 20px; }
.lc-btn { margin-top: 18px; height: 46px; display: grid; place-items: center; background: var(--text); color: var(--bg); font-size: 11px; letter-spacing: 2px; font-weight: 500; text-transform: uppercase; }
.lc-tabs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 28px; padding: 16px 24px 20px; border-top: 1px solid var(--line); background: var(--bg); font-size: 10px; letter-spacing: 1.4px; font-weight: 500; text-transform: uppercase; color: var(--muted); }
.lc-tabs .on { color: var(--text); }
/* Widoki karty: Odkrywaj (w trzech językach) i zajęcia z nagraniem (po angielsku) */
.lv { position: absolute; top: 26px; left: 24px; right: 24px; bottom: 60px; opacity: 0; transform: translateX(10px); transition: opacity .2s ease, transform .2s ease; }
.lv.on { opacity: 1; transform: none; }
.lc-back { font-size: 26px; font-weight: 300; line-height: 1; margin-top: -4px; }
.lv[data-v="class"] .lc-h { margin-top: 14px; }
.lc-date { font-size: 10px; letter-spacing: .8px; text-transform: uppercase; color: var(--muted); margin-top: 18px; }
.lc-time { font-size: 22px; font-weight: 300; margin-top: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.lc-field { padding-top: 12px; }
.lc-field small { display: block; font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); }
.lc-field span { display: flex; justify-content: space-between; font-size: 14px; margin-top: 5px; }
.lc-field em { font-style: normal; color: var(--muted); }
.lc-rec { margin-top: 12px; border-top: 1px solid var(--line); transition: background .3s; }
.lc-rec span em { color: var(--text); }
.lc-rec span b { font-weight: 400; }
.lang-card.swap .lang-screen [data-en] { opacity: 0; }
.lang-screen [data-en] { transition: opacity .15s ease; }
.lc-rec p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.lc-rec.fresh { animation: fresh 1.8s ease; }
.lc-push {
  position: absolute; left: 10px; right: 10px; top: 10px; z-index: 3; padding: 11px 13px; border-radius: 18px;
  background: var(--bg); border: 1px solid var(--line); box-shadow: 0 20px 40px -16px rgba(0, 0, 0, .3);
  transform: translateY(-140%); opacity: 0; transition: transform .28s cubic-bezier(.2, .9, .25, 1.1), opacity .15s;
}
.lc-push.show { transform: none; opacity: 1; }
.lc-push.press { transform: scale(.97); }
.lc-push p { margin: 0; }
.lc-push-app { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: var(--muted); margin-bottom: 4px !important; }
.lc-push-app span:first-child { display: flex; align-items: center; gap: 6px; }
.lc-push-app img { width: 18px; height: 18px; border-radius: 5px; box-shadow: 0 0 0 1px var(--line); }
.lc-push-t { font-size: 12px; font-weight: 600; }
.lc-push-b { font-size: 12px; line-height: 1.35; }
.lang-cap { text-align: center; font-size: 12px; color: var(--muted); margin-top: 16px; min-height: 18px; transition: opacity .15s; }

@media (max-width: 900px) {
  .travel { grid-template-columns: 1fr; margin-top: 72px; }
}
@media (max-width: 680px) {
  .travel-list li { grid-template-columns: 1fr; }
}

/* Problem · rozwiązanie · efekt */
.pse { margin-top: 48px; border-top: 1px solid var(--line); }
.pse-row { display: grid; grid-template-columns: 1fr 1.25fr .9fr; gap: 0 40px; padding: 22px 0; border-bottom: 1px solid var(--line); align-items: start; }
.pse-row p { margin: 0; font-size: 15px; line-height: 1.55; }
.pse-head { padding: 14px 0; }
.pse-head p { font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; color: var(--muted); }
.pse-p { color: var(--muted); }
.pse-e { font-size: 17px !important; font-weight: 300; line-height: 1.4 !important; }
.pse-k { display: none; }
@media (max-width: 680px) {
  .pse-head { display: none; }
  .pse-row { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
  .pse-k { display: block; font-size: 10px; letter-spacing: 1.6px; font-weight: 500; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
}
.more { margin-top: 32px; }
.more a, .cta-link { font-size: 11px; letter-spacing: 1.8px; font-weight: 500; text-transform: uppercase; border-bottom: 1px solid var(--text); padding-bottom: 3px; }
.more a span, .cta-link span { display: inline-block; transition: transform .25s ease; }
.more a:hover span, .cta-link:hover span { transform: translateX(4px); }
.travel-top { margin-top: 0; padding-top: 0; border-top: 0; }
.travel-top .travel-h { font-size: clamp(26px, 3.6vw, 40px); line-height: 1.12; }

/* Pasek z jednym przyciskiem w środku strony: kto doczytał do tego miejsca, od razu może umówić demo. */
.cta-strip { margin-top: 48px; padding: 22px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; border-top: 1px solid var(--text); }
.cta-strip p { margin: 0; font-size: 17px; font-weight: 300; max-width: 46ch; }
.cta-strip .btn { flex: none; }
/* W środku strony: to samo zaproszenie, ale cicho — linkiem, nie przyciskiem. */
.cta-quiet { border-top-color: var(--line); }
.cta-quiet p { font-size: 15px; color: var(--muted); }
/* Pierwsze szkoły: pomoc we wdrożeniu */
.pilot-label { margin-top: 40px; color: var(--text); }
.pilot-list { margin-top: 14px; max-width: 760px; }
.split-head .flow { margin-top: 28px; }

/* Mikro-ruch w treści */
.card { transition: transform .3s ease; }
.card h3 { transition: letter-spacing .3s ease; }
.card:hover { transform: translateY(-3px); }
.num { transition: color .3s; }
.card:hover .num { color: var(--text); }
/* Przesunięcie, nie margines: szerokość tekstu się nie zmienia, więc nic się nie przełamuje. */
.list li strong { transition: transform .3s ease; }
.list li:hover strong { transform: translateX(6px); }
.price { transition: background .3s; }
.price:hover { background: var(--band); }
.flow li + li::after {
  content: ""; position: absolute; left: -24px; top: calc(50% - 2px); width: 4px; height: 4px; border-radius: 50%;
  background: var(--text); animation: travel 2.4s ease-in-out infinite;
}
.flow li:nth-child(3)::after { animation-delay: 1.2s; }
.faq details p { animation: none; }
.faq details[open] p { animation: fade-down .35s ease; }

@keyframes bump { 0% { transform: none; } 40% { transform: translateY(-3px) scale(1.12); } 100% { transform: none; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--text) 40%, transparent); } 100% { box-shadow: 0 0 0 8px transparent; } }
@keyframes slide-in { from { opacity: 0; transform: translateY(-10px); background: var(--band); } to { opacity: 1; transform: none; } }
@keyframes travel { 0% { transform: translateX(0); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateX(16px); opacity: 0; } }
@keyframes fade-down { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (prefers-reduced-motion: no-preference) {
  .rise { animation: rise .8s cubic-bezier(.2, .8, .2, 1) both; }
  .hero-copy .rise:nth-child(2) { animation-delay: .08s; }
  .hero-copy .rise:nth-child(3) { animation-delay: .16s; }
  .hero-copy .rise:nth-child(4) { animation-delay: .24s; }
  .hero-copy .rise:nth-child(5) { animation-delay: .32s; }
  .hero-device.rise { animation-delay: .2s; animation-duration: 1s; }
  .hero .fit { animation: float 6s ease-in-out 1.2s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .flow li + li::after { display: none; }
  .nav-ink { transition: none; }
  .occ em { transition: none; }
}

/*
 * Panel recepcji to okno przeglądarki z komputera. Gdy brakuje miejsca, skrypt zmniejsza je w całości
 * (szerokość bazowa w data-base), zamiast układać panel jak na telefonie — tak wygląda u recepcji.
 */
.win { position: relative; overflow: hidden; contain: inline-size; }
.win > .desk { transform-origin: 0 0; }

/* Hero dla szkół: zakup w telefonie, potem ten sam bilet w oknie panelu — w jednym miejscu, na zmianę. */
.hero-b2b { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
.hero-b2b > .hero-view { grid-area: 1 / 1; align-self: center; transition: opacity .35s ease, visibility .35s, transform .35s ease; }
.hero-b2b .hero-view-phone { justify-self: center; }
.hero-b2b .hero-view-desk { position: relative; opacity: 0; visibility: hidden; transform: translateY(10px); }
.hero-b2b.desk-on .hero-view-desk { opacity: 1; visibility: visible; transform: none; }
.hero-b2b.desk-on .hero-view-phone { opacity: 0; visibility: hidden; }
.desk-hero .att { min-height: 124px; }
/* Okno w hero rysowane węższe (520 zamiast 760), więc po zmniejszeniu na telefonie tekst zostaje czytelny. */
.desk-hero .desk-main { grid-template-columns: minmax(0, 1fr) 210px; }
.hero-b2b .toast { right: auto; top: auto; left: 50%; bottom: -64px; transform: translate(-50%, 8px); }
.hero-b2b .toast.show { transform: translate(-50%, 0); }

@media (max-width: 980px) {
  /* One column: headline and lead, then the animation, and only then the button — it asks after showing. */
  .hero-grid { grid-template-columns: 1fr; gap: 0; }
  .hero-copy { display: contents; }
  .hero-device { justify-self: center; order: 1; margin-top: 48px; }
  /* Pod wyśrodkowaną animacją przycisk i dopisek też na środku. */
  .hero-copy .actions, .hero-copy .hero-note { order: 2; justify-self: center; justify-content: center; text-align: center; }
  .hero-copy .actions { margin-top: 48px; }
  /* Here the ticket toast hangs below the B2B figure; on a phone it sits inside it. */
  .hero-grid:has(.hero-b2b) .actions { margin-top: 88px; }
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage-phone { justify-self: center; }
  /* Jak to działa bez przewijania: telefon (01), panel (02, początek 03), znów telefon z powiadomieniem (03). */
  .stage.armed > * { grid-area: 1 / 1; align-self: center; transition: opacity .35s ease, visibility .35s; }
  .stage.armed.desk-on .stage-phone, .stage.armed:not(.desk-on) .stage-desk { opacity: 0; visibility: hidden; }
}
@media (max-width: 680px) {
  .hero { padding-top: 28px; }
  /* „Dla szkół” / „Dla tancerzy” stoi już w nagłówku. */
  .hero .eyebrow { display: none; }
  .hero-copy h1 { margin-top: 0; }
  .fit-hero { --s: .64; }
  .hero-grid:has(.hero-b2b) .actions { margin-top: 48px; }
  /* Panel prawie na całą szerokość ekranu: zjada połowę marginesów. */
  .hero-b2b .hero-view-desk { margin: 0 -10px; }
  .fit-stage { --s: .6; }
  .toast { right: auto; left: 50%; top: auto; bottom: 96px; transform: translate(-50%, 8px); }
  .toast.show { transform: translate(-50%, 0); }
  .steps { gap: 10px; }
  /* „Zobacz, jak to działa” z hero: kroki tuż pod nagłówkiem, a cała animacja pod nimi mieści się na ekranie. */
  .steps { scroll-margin-top: -12px; }
  .steps li { padding: 12px 0 0; font-size: 12px; line-height: 1.3; }
  /* Przepływ pieniędzy w jednym rzędzie: trzy równe pola zamiast zawijania. */
  .flow { display: grid; grid-template-columns: 1fr 1.25fr 1fr; letter-spacing: 1.2px; font-size: 10px; line-height: 1.3; }
  .flow li { display: grid; place-items: center; text-align: center; padding: 10px 6px; height: 100%; }
  .flow li + li { margin-left: 20px; }
  /* Czego dziś brakuje: na telefonie tylko „dziś” i efekt, bez opisu rozwiązania. */
  .pse { margin-top: 32px; }
  .pse-s, .pse-k { display: none !important; }
  .pse-row { gap: 6px; padding: 18px 0; }
  .pse-p { font-size: 13px !important; line-height: 1.45 !important; }
  .pse-e::before { content: "→ "; }
  .flow li + li::after { left: -18px; }
}