/* Warstwa marki CROSSFADE nad szablonem z paczki (styles.css zostaje nietknięty).
   Kolory i kroje z raw/design/DESIGN.md: ink-deep, sapphire-light, gold, cream; Archivo + Inter + IBM Plex Mono. */

:root { --bg: #060912; --surface: #0b1322; --white: #ECE8E0; --muted: #a3adbf; --blue: #3B82F6; --gold: #D9B775; --line: #1d2a3d; }
h1, h2, h3, h4 { font-family: Archivo, Inter, Arial, sans-serif; letter-spacing: -.035em; }
h1 { font-weight: 900; }
h2 { font-weight: 800; }
h3, h4 { font-weight: 700; }
.eyebrow { font-family: 'IBM Plex Mono', Consolas, monospace; font-weight: 500; letter-spacing: .16em; }
.unlock-note p, .byline { font-family: 'IBM Plex Mono', Consolas, monospace; }

/* znak: CROSS pełną bryłą, FADE konturem (design/znak-marki) */
.wordmark { font-family: Archivo, Inter, Arial, sans-serif; font-size: 17px; letter-spacing: .01em; font-weight: 800; }
.wordmark b { font-weight: 800; }
.wordmark i { font-style: normal; font-weight: 800; color: transparent; -webkit-text-stroke: 1.2px var(--white); }

/* menu jak na stronie głównej */
.header nav { gap: 28px; }
.nav-line { width: 1px; height: 16px; background: #ffffff2e; }
.nav-right { display: flex; align-items: center; gap: 14px; }
.soc { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #ffffff1f; }
.soc svg { width: 17px; height: 17px; fill: none; stroke: #c9d2e0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.soc .dot { fill: #c9d2e0; stroke: none; }
.soc:hover { border-color: var(--gold); }

/* hero: prawdziwe nagranie w miejscu podglądu */
.hero-preview.has-video { padding: 0; background: none; width: 100%; transform: none; }
.hero-preview video { width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff1f, 0 30px 80px #000a; }

/* ---------- „Co ci to daje”: jedna duża para naraz ---------- */
.benefit { --x: 0; --t: 0; height: 330vh; min-height: 0; padding: 0; overflow: clip; }
.benefit-sticky { position: sticky; top: 0; height: 100vh; min-height: 640px; overflow: hidden; display: flex; align-items: center; padding: 70px 0 60px; isolation: isolate; }
.benefit-sticky > .wrap { width: calc(100% - var(--gutter) * 2); }
.benefit-dim { position: absolute; top: 0; bottom: 0; width: 60%; z-index: -2; pointer-events: none; transition: opacity .35s; }
.benefit-dim.left { left: 0; background: linear-gradient(90deg, #060912 30%, #06091200); opacity: calc(var(--t) * .88); }
.benefit-dim.right { right: 0; background: linear-gradient(270deg, #060912 30%, #06091200); opacity: calc((1 - var(--t)) * .88); }
.benefit.done .benefit-dim.left { opacity: .7; }
.benefit.done .benefit-dim.right { opacity: .15; }
.benefit-shade { background: linear-gradient(180deg, var(--bg), #06091233 26%, #06091233 60%, var(--bg) 96%) !important; }

.stage { position: relative; min-height: 250px; margin-top: 46px; }
.pair { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 8vw, 160px); align-items: start; opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .45s; pointer-events: none; }
.pair.on { opacity: 1; transform: none; }
.pair .s { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.pair .txt { font-family: Archivo, Inter, Arial, sans-serif; font-weight: 700; font-size: clamp(26px, 2.6vw, 42px); line-height: 1.15; letter-spacing: -.025em; color: var(--white); max-width: 16ch; }
.pair .bez-s { opacity: calc(1 - var(--t) * .78); }
.pair .z-s { opacity: calc(.22 + var(--t) * .78); text-align: right; align-items: flex-end; }
.pair .z-s .txt { color: #fff6df; }
.badge { font-size: 15px; padding: 4px 16px; align-self: flex-start; }
.pair .z-s .badge { align-self: flex-end; }

.takeaway { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; margin: 0; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity .6s, transform .6s; font-family: Archivo, Inter, Arial, sans-serif; font-weight: 800; font-size: clamp(34px, 4.2vw, 68px); line-height: 1.05; letter-spacing: -.035em; color: var(--gold); pointer-events: none; }
.benefit.done .takeaway { opacity: 1; transform: none; }

.track { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; max-width: 900px; margin: 44px auto 0; }
.track .end { font: 600 13px 'IBM Plex Mono', Consolas, monospace; letter-spacing: .16em; color: #9fb4e0; }
.track .end.zl { color: var(--gold); }
.crossfade-line { width: auto; height: 5px; margin: 0; border-radius: 5px; }
.crossfade-line span { left: calc(var(--x) * 100%); width: 26px; height: 26px; box-shadow: 0 0 22px #d9b775aa; }
.crossfade-line i { position: absolute; top: 50%; width: 2px; height: 14px; translate: -50% -50%; background: #ffffff55; border-radius: 2px; }
.byline { text-align: center; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 18px 0 0; }

/* bez ruchu (ustawienie telefonu): wszystkie pary jedna pod drugą */
.benefit.static { height: auto; }
.benefit.static .benefit-sticky { position: relative; height: auto; min-height: 640px; }
.benefit.static .stage { min-height: 0; }
.benefit.static .pair { position: relative; opacity: 1; transform: none; margin-bottom: 34px; }
.benefit.static .pair .bez-s, .benefit.static .pair .z-s { opacity: 1; }
.benefit.static .takeaway { position: relative; opacity: 1; transform: none; margin-top: 10px; }
.benefit.static .benefit-dim { opacity: .3; }
.benefit.static .crossfade-line span { left: 50%; }

/* pliki w Instagramie / TikToku */
.inapp-note { margin: 16px 0 0; padding: 10px 14px; border-radius: 9px; background: #d9b77514; border: 1px solid #d9b77555; color: var(--gold); font-size: 13px; }

@media (max-width: 700px) {
  .soc { display: none; }
  .benefit { height: 320vh; }
  .benefit-sticky { padding: 70px 0 34px; align-items: flex-start; }
  .stage { margin-top: 190px; min-height: 290px; }
  .pair { grid-template-columns: 1fr; gap: 26px; }
  .pair .txt { font-size: 25px; max-width: none; }
  .pair .z-s { text-align: left; align-items: flex-start; }
  .pair .z-s .badge { align-self: flex-start; }
  .takeaway { font-size: 34px; }
  .track { margin-top: 26px; gap: 12px; }
}

/* ---------- Większe kroje (uwaga Franka 02.10: „wszystko jest trochę za małe”) ---------- */
body { font-size: 17px; }
p { font-size: 17px; }
h1 { font-size: clamp(50px, 5.8vw, 92px); }
h2 { font-size: clamp(36px, 4vw, 60px); }
h3 { font-size: 26px; }
h4 { font-size: 23px; }
.eyebrow { font-size: 13.5px; margin-bottom: 26px; }
.header { height: 84px; }
.header nav { font-size: 16px; gap: 30px; }
.wordmark { font-size: 20px; }
.button { font-size: 16px; min-height: 52px; padding: 13px 26px; }
.button.small { font-size: 14px; min-height: 42px; padding: 9px 20px; }
.breadcrumb { font-size: 15px; }
.project-label { font-size: 13px; }
.project-label img { width: 42px; height: 42px; }
.intro { font-size: 19px; max-width: 470px; line-height: 1.55; }
.package-icons span { font-size: 16px; gap: 11px; }
.package-icons img { width: 30px; height: 30px; }
.facts { font-size: 15.5px; }
.micro { font-size: 14px; }
.hero-cta { min-width: 280px; }
.hero-copy > .micro { max-width: 280px; }
.hero-preview { font-size: 16px; }
.hero-preview > span:last-child { font-size: 14px; }
.fit li { font-size: 19px; gap: 20px; margin-bottom: 20px; }
.check { width: 34px; height: 34px; font-size: 20px; }
.exclusion { font-size: 16px; }
.subtitle { font-size: 18px; }
.screenshot { height: 270px; font-size: 15px; }
.preview-grid figcaption { font-size: 15.5px; }
.author-content p { font-size: 18px; }
.portrait { width: 240px; min-height: 290px; font-size: 15px; }
.email p { font-size: 18px; }
.email-row input { font-size: 16px; padding: 15px 0; }
.email-card .micro { font-size: 14px; }
.consent { font-size: 14.5px; }
.mail-next { font-size: 14.5px !important; }
.unlock-note p { font-size: 12px; }
.start-layout > div:first-child > p:last-child { font-size: 18px; }
.step-number { font-size: 28px; }
.step h3 { font-size: 27px; }
.step p { font-size: 16.5px; }
.path h4 { font-size: 23px; }
.path p { font-size: 16px; }
.path .button { font-size: 15px; min-height: 48px; }
.tip p { font-size: 17px; }
.instruction-reminder p, .instruction-reminder button { font-size: 15.5px; }
.project-card > span { font-size: 15px; padding: 15px 14px; }
.project-card > img { height: 170px; }
.next-actions .button { font-size: 15px; min-height: 46px; }
.footer p, .footer nav, .footer .text-link { font-size: 14px; }
.toast { font-size: 15px; }

@media (max-width: 700px) {
  h1 { font-size: 50px; }
  h2 { font-size: 36px; }
  .header { height: 70px; }
  .wordmark { font-size: 17px; }
  .intro { font-size: 17px; }
  .package-icons span { font-size: 14.5px; }
  .facts { font-size: 14px; }
  .fit li { font-size: 17px; }
  .author-content p { font-size: 16px; }
  .portrait { width: 130px; min-height: 190px; }
  .email p { font-size: 16px; }
  .step p, .path p { font-size: 16px; }
  .project-card > span { font-size: 15px; }
  .unlock-note p { font-size: 9.5px; }
}

/* ---------- „Jak zacząć”: kroki jako rozwijane karty (uwaga Franka 02.10) ---------- */
.steps-hint { font: 500 12.5px 'IBM Plex Mono', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; }
.steps-hint::before { content: '↓ '; color: var(--gold); }
.steps.accordion .step { display: block; margin: 0 0 14px; border: 1px solid #22314a; border-radius: 14px; background: linear-gradient(145deg, #0d1729e6, #070d18e6); transition: border-color .25s, box-shadow .25s; }
.steps.accordion .step:hover { border-color: #3b4f72; }
.steps.accordion .step.open { border-color: #8e7949; box-shadow: 0 0 0 1px #d9b77522, 0 18px 50px #0007; }
.steps.accordion .step .step-head { margin: 0; font-size: inherit; }
.step-toggle { width: 100%; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 22px 24px; background: none; border: 0; border-radius: 14px; text-align: left; color: var(--white); cursor: pointer; }
.step-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.step-num { font: 700 26px Archivo, Inter, sans-serif; color: var(--gold); letter-spacing: -.03em; }
.step-title { font: 700 clamp(22px, 2vw, 28px) Archivo, Inter, sans-serif; letter-spacing: -.025em; }
.step-more { display: inline-flex; align-items: center; gap: 8px; font: 500 12.5px 'IBM Plex Mono', Consolas, monospace; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 8px 12px; border: 1px solid #d9b77544; border-radius: 999px; }
.step-more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s; }
.step.open .step-more svg { transform: rotate(180deg); }
.step-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s cubic-bezier(.4, 0, .2, 1); }
.step.open .step-wrap { grid-template-rows: 1fr; }
.step-body { overflow: hidden; min-height: 0; padding: 0 24px 0 92px; }
.step.open .step-body { padding-bottom: 26px; }
.steps.accordion .step > div { border-top: 0; padding-top: 0; }
.step-body > :first-child { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .step-wrap, .step-more svg { transition: none; } }
@media (max-width: 700px) {
  .step-toggle { grid-template-columns: 38px minmax(0, 1fr) auto; padding: 18px 16px; gap: 8px; }
  .step-num { font-size: 21px; }
  .step-title { font-size: 20px; }
  .step-more .lbl { display: none; }
  .step-more { padding: 8px; }
  .step-body { padding: 0 16px; }
  .step.open .step-body { padding-bottom: 20px; }
}

/* ---------- Krok 3: można do mnie napisać ---------- */
.ask-me { display: flex; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.ask-me > img { width: 26px; height: 26px; flex: none; margin-top: 3px; }
.ask-me p { margin: 0 0 14px; font-size: 16.5px; color: #c7d0de; }
.ask-me p strong { color: var(--white); font-weight: 650; }
.ask-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.ask-actions .button { min-height: 44px; font-size: 14.5px; padding: 10px 18px; }
@media (max-width: 700px) { .ask-me { gap: 12px; } .ask-actions .button { width: 100%; } }

/* ---------- Prawdziwe zrzuty w „Zobacz w środku” i w hero ---------- */
.screenshot.has-img { padding: 0; overflow: hidden; background: #0b1322; }
.screenshot.has-img img.shot { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.hero-preview.has-video img { width: 100%; border-radius: 12px; box-shadow: 0 0 0 1px #ffffff1f, 0 30px 80px #000a; }
.screenshot.has-img img.shot.fit { object-fit: contain; object-position: center; background: #27392f; padding: 0 6%; }
.author-content p { max-width: 600px; }

/* ---------- Hero: projekt w ekranie laptopa, z perspektywą (narożniki w data-screen) ---------- */
.hero-screen { position: absolute; left: 0; top: 0; z-index: -3; transform-origin: 0 0; overflow: hidden; pointer-events: none; background: #0b1120; border-radius: 3px; }
.hero-screen img, .hero-screen video { display: block; width: 100%; height: 100%; object-fit: fill; filter: brightness(.9) saturate(1.05); }
.hero-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 38%), radial-gradient(ellipse at 50% 125%, rgba(0, 0, 0, .35), transparent 60%); }
.hero.has-screen .hero-preview { visibility: hidden; }
@media (max-width: 700px) { .hero-screen { display: none; } }

/* ---------- „Co ci to daje”: suwak na dole sekcji, pary na środku wolnego miejsca (uwaga Franka 02.10) ---------- */
.benefit-sticky { align-items: stretch; padding: 96px 0 52px; }
.benefit-sticky > .wrap { display: flex; flex-direction: column; height: 100%; }
.stage { flex: 1; margin-top: 30px; min-height: 230px; }
.pair { align-content: center; }
.track { margin-top: 28px; width: 100%; max-width: 900px; align-self: center; }
.benefit.static .benefit-sticky > .wrap { height: auto; }
@media (max-width: 700px) {
  .benefit-sticky { padding: 76px 0 30px; }
  .stage { margin-top: 170px; min-height: 260px; }
  .pair { align-content: start; }
}
/* suwak trochę wyżej — bliżej zdań, nie przyklejony do dołu (02.10) */
.benefit-sticky { padding-bottom: clamp(80px, 10.5vh, 120px); }
@media (max-width: 700px) { .benefit-sticky { padding-bottom: 8vh; } .stage { max-height: none; } }

/* ---------- Pusty ekran laptopa (brak prawdziwego zrzutu) ---------- */
.hero-preview.empty { visibility: hidden; }
@media (max-width: 700px) { .hero-preview.empty { display: none; } }

/* ---------- Instrukcja: mapa kroków zamiast zrzutów ---------- */
.step-map { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.step-map li { border: 1px solid #22314a; border-radius: 12px; padding: 18px 16px; background: linear-gradient(145deg, #0d1729e6, #070d18e6); font: 700 17px/1.3 Archivo, Inter, sans-serif; color: var(--white); letter-spacing: -.01em; }
.step-map li span { display: block; font: 600 13px 'IBM Plex Mono', Consolas, monospace; color: var(--gold); margin-bottom: 10px; letter-spacing: .1em; }
.need-line { margin-top: 22px; font-size: 16px; }
.need-line b { color: var(--white); }
@media (max-width: 1000px) { .step-map { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .step-map { grid-template-columns: 1fr; } }

/* ---------- Wariant bez maila (darmowe demo) ---------- */
.free-card .free-lead { font: 700 22px Archivo, Inter, sans-serif; color: var(--white); letter-spacing: -.02em; margin: 0 0 12px; }
.free-card .button { margin: 6px 8px 0 0; }
.get-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin-left: auto; }
@media (max-width: 1000px) { .get-buttons { margin-left: 0; } }

/* GÓRNY PASEK JAK NA STRONIE GŁÓWNEJ (Franek 02.10): granatowe półprzezroczyste tło z rozmyciem, na całą szerokość,
   przyklejony do góry przy przewijaniu. Gęstszy niż .nav w index.html (.72), bo tu pod paskiem jest jasne zdjęcie —
   Franek 02.10: „tamten nie jest tak przezroczysty”. Hero zaczyna się POD paskiem, nie pod nim schowane. */
.header { position: fixed; inset: 0 0 auto 0; z-index: 50; height: 64px; display: block;
  background: rgba(6, 9, 18, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(236, 232, 224, .07); }
.header-in { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
html { scroll-padding-top: 88px; }
.hero { margin-top: 64px; padding-top: 48px; }
@media (max-width: 700px) { .hero { padding-top: 28px; } }
.skip { z-index: 60; }

/* ŚWIETLÓWKA W MENU — ta sama co na stronie głównej (Franek 02.10). Tubelight Navbar, 21st.dev/@ayushmxxn/components/tubelight-navbar.
   Pigułkę .tuba wstawia ../menu.js (wspólny z index.html i biblioteka.html); wartości jak w index.html. Świeci też sekcja „O mnie” / „Jak to działa”, kiedy jesteś w niej. */
.header nav { align-self: stretch; display: flex; }
.header nav ul { position: relative; isolation: isolate; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; height: 100%; }
.header nav ul a { position: relative; display: inline-block; padding: 8px 16px; border-radius: 999px; white-space: nowrap; transition: color .2s; }
.header nav ul a:hover, .header nav ul a.tuba-aktywny { color: var(--white); }
.header .nav-kreska { flex: none; width: 1px; height: 18px; margin: 0 4px; background: rgba(236, 232, 224, .16); }
.header .tuba { position: absolute; left: 0; top: 50%; z-index: -1; height: 38px; width: 0; translate: 0 -50%; border-radius: 999px; pointer-events: none;
  background: rgba(59, 130, 246, .10); border: 1px solid rgba(59, 130, 246, .22); opacity: 0;
  transition: transform .45s cubic-bezier(.3, 1.25, .45, 1), width .45s cubic-bezier(.3, 1.25, .45, 1), opacity .25s ease; }
.header .tuba::before { content: ""; position: absolute; left: 50%; top: -6px; width: 30px; height: 3px; translate: -50% 0; border-radius: 3px 3px 0 0;
  background: #3B82F6; box-shadow: 0 0 8px 1px rgba(59, 130, 246, .9), 0 0 22px 6px rgba(59, 130, 246, .35), 0 6px 18px 4px rgba(59, 130, 246, .25); }
@media (prefers-reduced-motion: reduce) { .header .tuba { transition: none; } }

/* ZDJĘCIE FRANKA w „Kto za tym stoi” (Franek 02.10) — jedno, wspólne dla wszystkich stron projektów */
.portrait.has-photo { position: relative; padding: 0; overflow: hidden; border-color: #6b5a3a; box-shadow: 0 18px 50px #0008; }
.portrait.has-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }

/* PRZYCISK W PASKU — ten sam „shiny” co „Darmowa powtórka” na stronie głównej (Franek 02.10).
   Skopiowane 1:1 z index.html (sekcja PRZYCISKI „SHINY”; wzór 21st.dev @designali-in/shiny-button, CSS Ryana Mulligana):
   granatowe tło, szafirowe światło obiega ramkę, po najechaniu światło się wydłuża, a od dołu oddycha poświata. */
@property --gradient-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-angle-offset { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@property --gradient-percent { syntax: "<percentage>"; initial-value: 5%; inherits: false; }
@property --gradient-shine { syntax: "<color>"; initial-value: white; inherits: false; }
.nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 18px; white-space: nowrap;
  font: 700 14px/1.2 Archivo, Inter, Arial, sans-serif; transition: transform .2s; }
.cta-shiny {
  --shiny-cta-bg: #0A0F1C; --shiny-cta-bg-subtle: #1c2436; --shiny-cta-fg: #fff;
  --shiny-cta-highlight: #3B82F6; --shiny-cta-highlight-subtle: #9cc0ff;
  --animation: cta-gradient-angle linear infinite; --duration: 3s; --shadow-size: 2px;
  --transition: 800ms cubic-bezier(.25, 1, .5, 1);
  position: relative; isolation: isolate; overflow: hidden; cursor: pointer; outline-offset: 4px;
  border: 1px solid transparent; border-radius: 360px; color: var(--shiny-cta-fg);
  background: linear-gradient(var(--shiny-cta-bg), var(--shiny-cta-bg)) padding-box,
    conic-gradient(from calc(var(--gradient-angle) - var(--gradient-angle-offset)), transparent,
      var(--shiny-cta-highlight) var(--gradient-percent), var(--gradient-shine) calc(var(--gradient-percent) * 2),
      var(--shiny-cta-highlight) calc(var(--gradient-percent) * 3), transparent calc(var(--gradient-percent) * 4)) border-box;
  box-shadow: inset 0 0 0 1px var(--shiny-cta-bg-subtle);
  transition: var(--transition); transition-property: --gradient-angle-offset, --gradient-percent, --gradient-shine; }
.cta-shiny:hover { color: var(--shiny-cta-fg); }
.cta-shiny::before, .cta-shiny::after, .cta-shiny .cta-shiny-blask { content: ""; pointer-events: none; position: absolute;
  inset-inline-start: 50%; inset-block-start: 50%; translate: -50% -50%; z-index: -1; }
.cta-shiny:active { translate: 0 1px; }
.cta-shiny::before { --size: calc(100% - var(--shadow-size) * 3); --position: 2px; --space: calc(var(--position) * 2);
  width: var(--size); height: var(--size);
  background: radial-gradient(circle at var(--position) var(--position), white calc(var(--position) / 4), transparent 0) padding-box;
  background-size: var(--space) var(--space); background-repeat: space;
  -webkit-mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  mask-image: conic-gradient(from calc(var(--gradient-angle) + 45deg), black, transparent 10% 90%, black);
  border-radius: inherit; opacity: .4; z-index: -1; }
.cta-shiny::after { --animation: cta-shimmer linear infinite; width: 100%; aspect-ratio: 1;
  background: linear-gradient(-50deg, transparent, var(--shiny-cta-highlight), transparent);
  -webkit-mask-image: radial-gradient(circle at bottom, transparent 40%, black); mask-image: radial-gradient(circle at bottom, transparent 40%, black);
  opacity: .6; }
.cta-shiny .cta-shiny-blask { --size: calc(100% + 1rem); width: var(--size); height: var(--size);
  box-shadow: inset 0 -1ex 2rem 4px var(--shiny-cta-highlight); opacity: 0;
  transition: opacity var(--transition); animation: calc(var(--duration) * 1.5) cta-breathe linear infinite; }
.cta-shiny, .cta-shiny::before, .cta-shiny::after {
  animation: var(--animation) var(--duration), var(--animation) calc(var(--duration) / .4) reverse paused;
  animation-composition: add; }
.cta-shiny:is(:hover, :focus-visible) { --gradient-percent: 20%; --gradient-angle-offset: 95deg; --gradient-shine: var(--shiny-cta-highlight-subtle); }
.cta-shiny:is(:hover, :focus-visible), .cta-shiny:is(:hover, :focus-visible)::before, .cta-shiny:is(:hover, :focus-visible)::after { animation-play-state: running; }
.cta-shiny:is(:hover, :focus-visible) .cta-shiny-blask { opacity: 1; }
@keyframes cta-gradient-angle { to { --gradient-angle: 360deg; } }
@keyframes cta-shimmer { to { rotate: 360deg; } }
@keyframes cta-breathe { from, to { scale: 1; } 50% { scale: 1.2; } }
@media (prefers-reduced-motion: reduce) { .cta-shiny, .cta-shiny::before, .cta-shiny::after, .cta-shiny .cta-shiny-blask { animation: none; } }
@media (max-width: 700px) { .nav-cta { padding: 8px 14px; font-size: 13px; } }
/* Telefon: bez sekcji „Tak to wygląda" (03 / ZOBACZ W ŚRODKU) — decyzja Franka 03.10; komputer bez zmian */
@media (max-width: 700px) { .previews { display: none; } }

/* Brama mailowa — zamazany podgląd „Jak zacząć” (Franek 04.10: zamiast napisu „dalsza część po linku z maila”).
   Wstawia go wydanie/zbuduj.mjs w miejsce prawdziwej sekcji; pod rozmyciem są ATRAPY, nie treść projektu —
   prawdziwa sekcja przychodzi dopiero z /api/projekt po kliknięciu linku z maila. */
.start-zakryte { position: relative; padding: 48px 0; }
.start-zakryte-tlo { filter: blur(5px); opacity: .8; pointer-events: none; user-select: none; }
.kres { display: block; height: 12px; width: 92%; margin: 0 0 12px; border-radius: 999px; background: linear-gradient(90deg, #2a3650, #3b4864); }
.kres-h { height: 40px; width: 82%; margin-bottom: 16px; background: linear-gradient(90deg, #d8d2c6, #9da6b8); }
.kres-k { width: 58%; }
.kres-t { height: 22px; width: 46%; margin-bottom: 18px; background: linear-gradient(90deg, #8a7446, #d9b775); }
.zk-kroki { display: grid; gap: 14px; }
.zk-krok { display: grid; grid-template-columns: 48px 1fr; gap: 12px; padding: 24px 22px; border: 1px solid #34486a; border-radius: 14px; background: linear-gradient(145deg, #12203a, #0a1222); }
.zk-krok b { color: var(--gold); font: 800 22px/1.1 'Archivo', Arial, sans-serif; }
.start-zakryte-karta { position: absolute; z-index: 3; left: 50%; top: 50%; translate: -50% -50%; width: min(460px, calc(100% - 32px));
  padding: 30px 26px 26px; text-align: center; border: 1px solid #b69a5d; border-radius: var(--radius);
  background: linear-gradient(150deg, #111c30f2, #060c15f5); box-shadow: 0 24px 70px #000b, 0 -5px 24px #dbb96d1f; }
.start-zakryte-karta img { width: 30px; height: 30px; margin: 0 auto 12px; }
.start-zakryte-karta h2 { font-size: clamp(24px, 2.6vw, 32px); margin: 0 0 10px; }
.start-zakryte-karta p { margin: 0 0 20px; font-size: 15px; }
.start-zakryte-karta .button { min-width: 200px; }
@media (max-width: 700px) {
  .start-zakryte { padding: 36px 0; }
  .start-zakryte-karta { padding: 24px 18px 20px; }
  .zk-krok { padding: 18px 16px; grid-template-columns: 36px 1fr; }
}

/* Widz z dostępem (klucz z maila w przeglądarce) nie widzi już formularza „Weź projekt na maila” (Franek 04.10). Klasę stawia app.js. */
html.ma-dostep #paczka { display: none; }

/* Po wysłaniu formularza: duży panel „Sprawdź skrzynkę” zamiast małego napisu (Franek 04.10). Wstawia go app.js → pokazWyslane(). */
.email-card.wyslano > :not(.wyslane) { display: none; }
.wyslane { text-align: center; padding: 6px 4px; outline: none; animation: wyslane-wejscie .35s ease-out; }
.wyslane img { width: 44px; height: 44px; margin: 0 auto 12px; }
.wyslane h3 { margin: 0 0 12px; font-size: clamp(26px, 2.6vw, 34px); color: var(--gold); }
.wyslane p { margin: 0 0 12px; font-size: 16px; color: #e2e8f3; }
.wyslane b { color: #fff; word-break: break-all; }
.wyslane .wyslane-drobne { font-size: 13px; color: var(--muted); }
.wyslane-popraw { margin-top: 4px; text-decoration: underline; }
@keyframes wyslane-wejscie { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { .wyslane { animation: none; } }
/* „Ważne: projekt otworzy się na urządzeniu, na którym klikniesz link” (Franek 04.10 — wpisał na komputerze, kliknął na telefonie) */
.wyslane .wyslane-wazne { margin: 4px auto 14px; max-width: 520px; padding: 12px 16px; border: 1px solid #b69a5d; border-radius: 10px; background: #dbb96d14; font-size: 14px; line-height: 1.5; }
.wyslane .wyslane-wazne b { color: var(--gold); }

/* Telefon: linki menu nie mieszczą się w pasku („Nowe proj…” ucięte, „Weź za darmo” poza ekranem — test 04.10).
   Jak na stronie głównej: zostaje znak CROSSFADE + przycisk. Do biblioteki prowadzi okruszek „← Biblioteka” pod paskiem. */
@media (max-width: 700px) {
  .header nav { display: none; }
  .header .nav-right .soc { display: none; }
}