/* WSPÓLNE STYLE — Gefert Language (index, metoda, ksiazka). Wydzielone 02.10.2026. */


/* ══════════════════════════════════════
   ROOT & RESET
══════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --bg:     #0a0f0a;
  --bg2:    #0d140d;
  --bg3:    #111911;
  --green:  #6dbb45;
  --green2: #8fd476;
  --green3: rgba(109,187,69,0.12);
  --gold:   #f5c842;
  --gold2:  rgba(245,200,66,0.15);
  --text:   #e8e4da;
  --text2:  rgba(232,228,218,0.55);
  --text3:  rgba(232,228,218,0.25);
  --border: rgba(255,255,255,0.07);
  --border-green: rgba(109,187,69,0.25);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', sans-serif;
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
}



/* ══════════════════════════════════════
   NOISE OVERLAY
══════════════════════════════════════ */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.022;
  pointer-events: none;
  z-index: 1000;
}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
nav {
  position: fixed;
  top: 0; left: 0; right: 0; /* top:0 bo lang-bar tymczasowo ukryty; przy przywróceniu lang-bara wrócić na 2.8rem */
  z-index: 500;
  padding: 1.4rem 3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.4s, backdrop-filter 0.4s, border-color 0.4s;
  background: rgba(10,15,10,0.8); /* ciemniejsze tło = mniejszy blur wystarcza; pełnoekranowy backdrop-blur to główny koszt scrolla */
  backdrop-filter: blur(9px);
  border-bottom: 1px solid var(--border);
}

nav.scrolled {
  background: rgba(10,15,10,0.93);
  backdrop-filter: blur(11px);
  border-bottom-color: var(--border);
}

.nav-logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--text);
  letter-spacing: 0.15em;
  text-decoration: none;
  text-transform: uppercase;
}

.nav-logo span { color: var(--green); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  list-style: none;
  align-items: center;
}

.nav-links a {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text2);
  text-decoration: none;
  transition: color 0.2s;
}

.nav-links a:hover { color: var(--text); }

.nav-cta {
  padding: 0.5rem 1.3rem;
  background: transparent;
  border: 1px solid var(--border-green);
  border-radius: 2px;
  color: var(--green2);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.2s;
}

.nav-cta:hover {
  background: var(--green3);
  border-color: var(--green);
  color: var(--green);
}

.nav-mobile-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-mobile-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  transition: all 0.3s;
}

/* ══════════════════════════════════════
   LANGUAGE BAR
══════════════════════════════════════ */
.lang-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.2rem;
  padding: 0.4rem 2rem;
  background: rgba(7,10,7,0.95);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  height: 2.8rem;
}

.lang-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.18rem;
  padding: 0.25rem 0.7rem;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.lang-btn:hover { background: rgba(255,255,255,0.04); border-color: var(--border); }

.lang-btn.active { background: var(--green3); border-color: var(--border-green); }

.lang-map {
  width: 32px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lang-map svg {
  width: 100%;
  height: 100%;
  fill: var(--text3);
  transition: fill 0.2s;
}

.lang-btn:hover .lang-map svg { fill: var(--text2); }
.lang-btn.active .lang-map svg { fill: var(--green); }

.lang-code {
  font-family: 'DM Mono', monospace;
  font-size: 0.52rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
  transition: color 0.2s;
}
.lang-btn:hover .lang-code { color: var(--text2); }
.lang-btn.active .lang-code { color: var(--green); }

.lang-soon { opacity: 0.35; cursor: not-allowed !important; }
.lang-soon:hover { background: transparent !important; border-color: transparent !important; }
.lang-soon:hover .lang-map svg { fill: var(--text3) !important; }
.lang-soon:hover .lang-code { color: var(--text3) !important; }

/* ══════════════════════════════════════
   HERO
══════════════════════════════════════ */
#hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 11rem 2rem 6rem;
}

.hero-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-gradient {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(15,50,10,0.7) 0%, transparent 65%),
    radial-gradient(ellipse 50% 40% at 10% 90%, rgba(10,35,6,0.5) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(10,35,6,0.5) 0%, transparent 55%);
}


/* Orbs */
.orb {
  position: absolute;
  border-radius: 50%;
  /* ZERO filter:blur — miękkość robi sam gradient (dodatkowy próg pośredni); filtr kosztował najwięcej */
  pointer-events: none;
  opacity: 0.55;
  will-change: transform; /* animacja idzie na GPU */
}

.orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(60,140,30,0.5) 0%, rgba(60,140,30,0.24) 38%, transparent 72%);
  top: -15%; left: -10%;
  animation: orbDrift1 18s ease-in-out infinite alternate;
}

.orb-2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(40,110,20,0.4) 0%, rgba(40,110,20,0.19) 38%, transparent 72%);
  bottom: -20%; right: -8%;
  animation: orbDrift2 22s ease-in-out infinite alternate;
}

.orb-3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(80,170,40,0.25) 0%, rgba(80,170,40,0.12) 38%, transparent 72%);
  top: 30%; right: 15%;
  animation: orbDrift3 15s ease-in-out infinite alternate;
}

.orb-4 {
  width: 280px; height: 280px;
  background: radial-gradient(circle, rgba(30,90,15,0.35) 0%, rgba(30,90,15,0.17) 38%, transparent 72%);
  bottom: 10%; left: 20%;
  animation: orbDrift4 20s ease-in-out infinite alternate;
}

@keyframes orbDrift1 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(80px, 60px) scale(1.15); }
}
@keyframes orbDrift2 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-70px, -50px) scale(1.1); }
}
@keyframes orbDrift3 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(-40px, 70px) scale(0.9); }
}
@keyframes orbDrift4 {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(50px, -40px) scale(1.2); }
}

/* Particles */
.particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
  position: absolute;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  animation: floatUp linear infinite;
}
@keyframes floatUp {
  0%   { transform: translateY(100vh) scale(0); opacity: 0; }
  10%  { opacity: 0.5; }
  90%  { opacity: 0.2; }
  100% { transform: translateY(-20vh) scale(1); opacity: 0; }
}

/* ── Latające niemieckie słówka (mgła ze słów) ── */
.word-fog {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
.fog-word {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-weight: 400;
  white-space: nowrap;
  color: var(--green);
  opacity: 0;
  user-select: none;
  will-change: transform, opacity;
  animation: fogDrift linear infinite;
}
.fog-word .fw-pl {
  color: var(--text3);
  opacity: 0.65;
  font-size: 0.78em;
  margin-left: 0.3em;
}
@keyframes fogDrift {
  0%   { transform: translateY(50px) translateX(0); opacity: 0; }
  14%  { opacity: var(--fog-op, 0.14); }
  86%  { opacity: var(--fog-op, 0.14); }
  100% { transform: translateY(-130px) translateX(var(--fog-x, 20px)); opacity: 0; }
}

/* hero poza ekranem = jego animacje stoją (niewidoczne i tak, a mieliły w tle przez całą stronę) */
#hero.anims-off .orb,
#hero.anims-off .particle,
#hero.anims-off .fog-word,
#hero.anims-off .code-caret { animation-play-state: paused; }

/* sekcje pod ekranem nie są renderowane, dopóki użytkownik nie podjedzie (duża oszczędność pierwszego malowania) */
#jak-dziala, #pobierz, #ebook, footer {
  content-visibility: auto;
  contain-intrinsic-size: auto 900px;
}

/* ── Akcent programistyczny: eyebrow jako linijka kodu ── */
.hero-eyebrow .code-prefix { color: var(--text3); opacity: 0.6; }
.hero-eyebrow .code-caret {
  display: inline-block;
  width: 0.55em;
  height: 0.95em;
  background: var(--green);
  margin-left: 0.25em;
  vertical-align: -0.1em;
  animation: caretBlink 1.05s steps(1) infinite;
}
@keyframes caretBlink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }

/* ── Efekt dekodowania tagline ── */
.hero-tagline .decoding {
  color: var(--green);
  opacity: 0.9;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 10;
  text-align: center;
  max-width: 860px;
}

.hero-eyebrow {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.8rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.3s forwards;
}

.hero-logo {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.8rem, 8vw, 7rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 0.9;
  margin-bottom: 1.2rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.5s forwards;
}

.hero-logo .green { color: var(--green); }

.hero-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.2rem, 3vw, 2rem);
  font-weight: 300;
  font-style: italic;
  color: var(--text2);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.7s forwards;
}

.hero-desc {
  font-size: clamp(0.9rem, 1.5vw, 1.05rem);
  color: var(--text2);
  line-height: 1.85;
  max-width: 560px;
  margin: 0 auto 0.7rem;
  font-weight: 300;
  opacity: 0;
  animation: fadeUp 0.9s ease 0.9s forwards;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.1s forwards;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2.2rem;
  background: var(--green);
  color: #0a0f0a;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  transition: all 0.25s;
  border: 1px solid var(--green);
}

.btn-primary:hover {
  background: var(--green2);
  border-color: var(--green2);
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(109,187,69,0.3);
}

.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2.2rem;
  background: transparent;
  color: var(--text2);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--border);
  transition: all 0.25s;
}

.btn-secondary:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.2);
  transform: translateY(-2px);
}

.hero-scroll {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.4s forwards;
}

.hero-scroll span {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text3);
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, var(--green), transparent);
  animation: scrollPulse 2s ease-in-out infinite;
}

@keyframes scrollPulse {
  0%, 100% { opacity: 0.4; transform: scaleY(1); }
  50%       { opacity: 1; transform: scaleY(1.2); }
}

/* ══════════════════════════════════════
   SECTION BASE
══════════════════════════════════════ */
section { position: relative; }

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.section-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1rem;
}

.section-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 5vw, 3.8rem);
  font-weight: 300;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.section-title strong {
  font-weight: 700;
  font-style: italic;
  color: var(--green2);
}

.section-title .gold { color: var(--gold); }

/* ══════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   FILOZOFIA
══════════════════════════════════════ */
#filozofia {
  padding: 8rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.filozofia-grid {
  /* tekst metody na pełnej szerokości sekcji; karty przechodzą pod spód */
  display: grid;
  grid-template-columns: 1fr;
  gap: 3.5rem;
}

.filozofia-text {
  /* pełna sekcja była za szeroka do czytania — umiarkowany limit, wyśrodkowany */
  max-width: 920px;
  margin: 0 auto;
}

.filozofia-text .section-title {
  margin-bottom: 1.8rem;
}

.filozofia-text p {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 1.2rem;
}

.filozofia-text p strong {
  color: var(--text);
  font-weight: 600;
}

.filozofia-quote {
  margin-top: 2.5rem;
  padding: 1.5rem 2rem;
  border-left: 2px solid var(--green);
  background: var(--green3);
  border-radius: 0 4px 4px 0;
}

.filozofia-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}

.filozofia-visual {
  /* karty metody w rzędzie na komputerze, zawijają się na mniejszych ekranach */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1rem;
}

.method-card {
  padding: 1.4rem 1.8rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: border-color 0.3s, transform 0.3s;
  cursor: default;
}

.method-card:hover {
  border-color: var(--border-green);
  transform: translateX(6px);
}

.method-card-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.method-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.3rem;
}

.method-card-desc {
  font-size: 0.85rem;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.6;
}

/* ══════════════════════════════════════
   JAK TO DZIAŁA
══════════════════════════════════════ */
#jak-dziala {
  padding: 8rem 0;
  background: var(--bg);
}

.jak-dziala-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 5rem;
}

.jak-dziala-header p {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.8;
  font-weight: 300;
}

.steps-flow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 260px));
  gap: 0;
  justify-content: center;
  position: relative;
  margin-bottom: 5rem;
}

.steps-flow::before {
  content: '';
  position: absolute;
  top: 2.5rem;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-green), var(--green), var(--border-green), transparent);
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 1rem;
  position: relative;
}

.step-icon {
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--bg3);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 1.2rem;
  position: relative;
  z-index: 1;
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}

.step:hover .step-icon {
  border-color: var(--green);
  background: var(--green3);
  transform: scale(1.1);
}

.step-num {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  color: var(--green);
  margin-bottom: 0.4rem;
}

.step-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.step-desc {
  font-size: 0.78rem;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.6;
}

/* Miejsca grid */
.miejsca-title {
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.miejsca-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 0.6rem;
}

.miejsce-item {
  padding: 0.8rem 1rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.82rem;
  color: var(--text2);
  font-weight: 400;
  transition: all 0.25s;
  cursor: default;
}

.miejsce-item:hover {
  border-color: var(--border-green);
  color: var(--text);
  background: var(--green3);
  transform: translateY(-2px);
}

.miejsce-icon { font-size: 1.1rem; flex-shrink: 0; }

.poziomy-bar {
  margin-top: 3.5rem;
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  flex-wrap: wrap;
}

.poziom-badge {
  padding: 0.4rem 1rem;
  border: 1px solid var(--border);
  border-radius: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--text3);
  transition: all 0.25s;
  cursor: default;
}

.poziom-badge:hover, .poziom-badge.active {
  border-color: var(--green);
  color: var(--green);
  background: var(--green3);
}

/* ══════════════════════════════════════
   UNIKALNE CECHY
══════════════════════════════════════ */
#unikalne {
  padding: 8rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.unikalne-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 5rem;
}

.unikalne-header p {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.8;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 5rem;
}

.feature-card {
  padding: 2rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  transition: all 0.3s;
  cursor: default;
}

.feature-card:hover {
  border-color: var(--border-green);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}

.feature-icon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

/* Wyróżniony kafelek — INNOWACYJNY PODZIAŁ */
.feature-card.featured {
  position: relative;
  grid-column: span 2; /* flagowy kafelek na 2 kolumny — przy 7 kartach siatka wychodzi równa */
  background: linear-gradient(160deg, rgba(109,187,69,0.10), var(--bg3) 55%);
  border-color: var(--border-green);
  box-shadow: 0 0 28px rgba(109,187,69,0.10);
}

/* szeroki kafelek (2 kolumny) — do domykania rzędów siatki */
.feature-card.wide { grid-column: span 2; }

@media (max-width: 600px) {
  .feature-card.featured { grid-column: auto; }
  .feature-card.wide { grid-column: auto; }
}

/* Scena kafelka GRAMATYKA — klamra Perfekt + trzy czasy */
.gram-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
.gram-sentence {
  font-family: 'DM Mono', monospace;
  font-size: 1.05rem;
  color: var(--text2);
  letter-spacing: 0.04em;
}
.gram-hl {
  color: var(--green);
  font-weight: 700;
  animation: gramPulse 2.6s ease-in-out infinite;
}
.gram-hl.g2 { animation-delay: 1.3s; color: var(--gold); }
@keyframes gramPulse {
  0%, 100% { opacity: 0.65; text-shadow: none; }
  50%      { opacity: 1; text-shadow: 0 0 12px currentColor; }
}
.gram-times { display: flex; gap: 0.5rem; }
.gram-time {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.25rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text3);
  animation: gramTime 5.4s ease-in-out infinite;
}
.gram-time.t2 { animation-delay: 1.8s; }
.gram-time.t3 { animation-delay: 3.6s; }
@keyframes gramTime {
  0%, 28%, 100% { color: var(--text3); border-color: var(--border); }
  8%, 20%       { color: var(--green); border-color: var(--green); }
}

/* Scena kafelka MINDSET — łańcuch DUCH→UMYSŁ→CIAŁO, puls od góry */
.mind-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mind-chain { display: flex; align-items: center; gap: 0.5rem; }
.mind-node {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  padding: 0.35rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--text3);
  animation: mindFlow 4.8s ease-in-out infinite;
}
.mind-node.m2 { animation-delay: 1.6s; }
.mind-node.m3 { animation-delay: 3.2s; }
@keyframes mindFlow {
  0%, 30%, 100% { color: var(--text3); border-color: var(--border); box-shadow: none; }
  8%, 22%       { color: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px rgba(245,200,66,0.25); }
}
.mind-node.m1 { color: var(--text2); } /* góra lekko wyróżniona — od niej wszystko się zaczyna */
.mind-arrow { color: var(--text3); font-size: 0.8rem; }

/* pulsujący glow jako opacity (GPU) zamiast animacji box-shadow (przemalowanie co klatkę) */
.feature-card.featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 6px;
  box-shadow: 0 0 46px rgba(109,187,69,0.18);
  opacity: 0;
  animation: featuredGlow 4.5s ease-in-out infinite;
  pointer-events: none;
  will-change: opacity;
}

/* wirująca obwódka: obrót elementu na GPU zamiast animowania kąta gradientu
   (animacja --featured-ang przemalowywała cały kafelek co klatkę) */
.featured-ring {
  position: absolute;
  inset: -1px;
  border-radius: 6px;
  padding: 1px;
  overflow: hidden;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.featured-ring span {
  position: absolute;
  inset: -80%;
  background: conic-gradient(from 0deg,
    transparent 0%, rgba(109,187,69,0.9) 10%, transparent 25%,
    transparent 55%, rgba(109,187,69,0.45) 68%, transparent 82%);
  animation: featuredSpin 6s linear infinite;
  will-change: transform;
}

@keyframes featuredSpin {
  to { transform: rotate(360deg); }
}

@keyframes featuredGlow {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}

.feature-card.featured:hover {
  border-color: var(--green);
}

/* Pytajnik na kafelku flagowym + modal „Dlaczego według miejsc?" */
.why-places-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-left: 0.55rem;
  padding: 0.22rem 0.75rem 0.22rem 0.28rem;
  vertical-align: middle;
  background: rgba(109,187,69,0.08);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--text2);
  cursor: pointer;
  text-align: left;
  transition: all 0.25s;
}
.why-places-btn .why-q {
  flex: 0 0 auto;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--green);
  color: var(--bg);
  font-weight: 700;
  font-size: 0.8rem;
}
.why-places-btn:hover {
  border-color: var(--green);
  background: rgba(109,187,69,0.16);
  color: var(--text);
}

.auth-modal.why-modal { /* podwójna klasa: musi przebić .auth-modal (max-width 420px), który stoi niżej w pliku */
  max-width: 880px;
  width: 100%; /* flexbox zetnie do ekranu na telefonie */
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
@media (max-width: 600px) {
  .why-modal-title { font-size: 1.35rem; padding: 1.3rem 2.8rem 0.9rem 1.2rem; }
  .why-modal-body { padding: 1.1rem 1.2rem 1.4rem; }
}
.why-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  line-height: 1.2;
  color: var(--text);
  padding: 1.6rem 3.2rem 1.1rem 2rem;
  border-bottom: 1px solid var(--border);
}
.why-modal-body {
  padding: 1.4rem 2rem 1.8rem;
  overflow-y: auto;
  color: var(--text2);
  font-size: 0.95rem;
  line-height: 1.75;
}
.why-modal-body p + p { margin-top: 1em; }
.why-modal-body p { margin-top: 1em; }
.why-modal-body strong { color: var(--green); font-weight: 600; }
.why-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--text);
  margin-top: 1.6em;
  padding-top: 1.3em;
  border-top: 1px solid var(--border);
}

/* Holo-scena miejsc — kafelek INNOWACYJNY PODZIAŁ */
.holo-stage {
  position: relative;
  height: 158px;
  margin: -1rem -1rem 1.2rem;
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.25s ease;
  will-change: transform;
  background:
    radial-gradient(ellipse at 50% 10%, rgba(109,187,69,0.10), transparent 65%),
    rgba(0,0,0,0.25);
  border: 1px solid rgba(109,187,69,0.18);
}

.holo-grid {
  position: absolute;
  left: -40%; right: -40%; bottom: -12%;
  height: 75%;
  background:
    linear-gradient(rgba(109,187,69,0.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(109,187,69,0.30) 1px, transparent 1px);
  background-size: 26px 26px;
  transform: perspective(200px) rotateX(63deg);
  transform-origin: 50% 0%;
  animation: holoGridMove 2.2s linear infinite;
  -webkit-mask-image: linear-gradient(transparent, #fff 45%);
  mask-image: linear-gradient(transparent, #fff 45%);
}

@keyframes holoGridMove {
  to { background-position: 0 26px, 0 0; }
}

.holo-icon {
  position: absolute;
  left: 50%; top: 44%;
  width: 76px; height: 76px;
  transform: translate(-50%, -55%);
  filter: drop-shadow(0 0 9px rgba(109,187,69,0.75));
  animation: holoFloat 4.2s ease-in-out infinite;
  transition: opacity 0.35s ease;
  z-index: 2;
}

.holo-icon path {
  fill: none;
  stroke: var(--green2);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: holoFlicker 6.5s steps(1) infinite;
}

/* nieregularne migotanie jak w prawdziwym hologramie */
@keyframes holoFlicker {
  0%, 100% { opacity: 1; }
  7%       { opacity: 0.75; }
  8%       { opacity: 1; }
  31%      { opacity: 0.85; }
  32%      { opacity: 1; }
  54%      { opacity: 0.65; }
  55.5%    { opacity: 1; }
  56.5%    { opacity: 0.85; }
  57%      { opacity: 1; }
  83%      { opacity: 0.9; }
  84%      { opacity: 1; }
}

@keyframes holoFloat {
  0%, 100% { transform: translate(-50%, -55%); }
  50%      { transform: translate(-50%, -62%); }
}

.holo-base {
  position: absolute;
  left: 50%; top: 72%;
  width: 96px; height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse, rgba(109,187,69,0.40), transparent 70%);
  filter: blur(3px);
  animation: holoBasePulse 4.2s ease-in-out infinite;
}

@keyframes holoBasePulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scaleX(1); }
  50%      { opacity: 1;   transform: translateX(-50%) scaleX(0.82); }
}

.holo-scan {
  position: absolute;
  left: 6%; right: 6%;
  top: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(143,212,118,0.85), transparent);
  box-shadow: 0 0 14px rgba(109,187,69,0.65);
  opacity: 0;
  pointer-events: none;
  z-index: 3;
}

/* skan przelatuje tylko przy zmianie miejsca — materializuje nową ikonę */
.holo-stage.scanning .holo-scan {
  animation: holoScanSweep 0.8s ease-in-out;
}

@keyframes holoScanSweep {
  0%   { top: 8%;  opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 84%; opacity: 0; }
}

.place-counter {
  position: absolute;
  right: 10px; bottom: 10px;
  z-index: 4;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  color: var(--text3);
}

.place-counter b {
  color: var(--green2);
  font-weight: 500;
}

/* ── Intro: wybór kodów ── */
.code-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(6,10,6,0.92);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease;
}

.code-intro.hidden { opacity: 0; pointer-events: none; }

.code-intro-logo {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(2.8rem, 8vw, 6.5rem);
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 0.9;
  text-align: center;
  color: var(--text);
  opacity: 0;
  animation: introLogoIn 0.8s ease 0.2s forwards;
  text-shadow: 0 0 40px rgba(109,187,69,0.25);
}

.code-intro-logo .green { color: var(--green); }

.code-intro-logo.out {
  animation: introLogoOut 0.5s ease forwards;
}

@keyframes introLogoIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes introLogoOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); }
}

.code-intro-box { animation: introLogoIn 0.5s ease forwards; }

.code-intro-box {
  width: min(480px, 92vw);
  background: var(--bg3);
  border: 1px solid var(--border-green);
  border-radius: 8px;
  padding: 2.2rem;
  box-shadow: 0 0 60px rgba(109,187,69,0.15);
  font-family: 'DM Mono', monospace;
}

.code-intro-title {
  font-size: 0.95rem;
  color: var(--text);
  letter-spacing: 0.05em;
  margin-bottom: 1.6rem;
  min-height: 1.4em;
}

.code-intro-title .green { color: var(--green); }

.code-option {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 5px;
  color: var(--text2);
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.25s;
  text-align: left;
}

.code-option:hover:not(:disabled) {
  border-color: var(--green);
  color: var(--green2);
  background: var(--green3);
}

.code-option:disabled { opacity: 0.45; cursor: not-allowed; }

.code-option .code-tag { color: var(--green); font-weight: 500; }

.code-option .code-status {
  margin-left: auto;
  font-size: 0.6rem;
  color: var(--text3);
  letter-spacing: 0.12em;
}

.code-option.code-ready { border-color: var(--border-green); animation: codePulse 2.4s ease-in-out infinite; }
.code-option.code-ready .code-status { color: var(--gold); }

@keyframes codePulse {
  50% { box-shadow: 0 0 18px rgba(109,187,69,0.25); }
}

.code-intro-skip {
  margin-top: 1.2rem;
  background: none;
  border: none;
  color: var(--text3);
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  cursor: pointer;
}

.code-intro-skip:hover { color: var(--text2); }

/* flaga kodów — stały skrót do zmiany języków */
.code-flag {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--green2);
  background: rgba(17,25,17,0.85);
  border: 1px solid var(--border-green);
  border-radius: 999px;
  padding: 0.45rem 0.85rem;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: all 0.25s;
}

.code-flag:hover {
  border-color: var(--green);
  background: var(--green3);
  box-shadow: 0 0 16px rgba(109,187,69,0.25);
}

.code-flag .code-flag-prefix { color: var(--text3); }

.holo-particle {
  position: absolute;
  bottom: 18%;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(143,212,118,0.75);
  box-shadow: 0 0 6px rgba(109,187,69,0.8);
  animation: holoParticleRise 5.2s linear infinite;
  opacity: 0;
}

@keyframes holoParticleRise {
  0%   { transform: translate(0, 0) scale(var(--ps, 1)); opacity: 0; }
  12%  { opacity: 0.8; }
  100% { transform: translate(var(--px, 0px), -95px) scale(var(--ps, 1)); opacity: 0; }
}

.holo-stage .place-code {
  position: absolute;
  left: 10px; bottom: 10px;
  z-index: 4;
}

/* scanlines CRT na całej scenie */
.holo-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px,
    transparent 1px, transparent 3px);
  pointer-events: none;
  z-index: 5;
  border-radius: 6px;
}

/* niemieckie słówka wypływające przy materializacji miejsca */
.holo-word {
  position: absolute;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  color: var(--green2);
  text-shadow: 0 0 8px rgba(109,187,69,0.7);
  opacity: 0;
  animation: holoWordFloat 2.6s ease-out forwards;
  pointer-events: none;
  white-space: nowrap;
  z-index: 3;
}

@keyframes holoWordFloat {
  0%   { opacity: 0; transform: translateY(8px); }
  18%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-16px); }
}

/* glitch hologramu przy zmianie miejsca */
.holo-stage.glitching .holo-icon {
  animation: holoGlitch 0.32s steps(1) forwards;
}

@keyframes holoGlitch {
  0%   { transform: translate(-50%, -55%);              clip-path: inset(0 0 0 0); opacity: 1; }
  15%  { transform: translate(calc(-50% + 3px), -55%);  clip-path: inset(8% 0 55% 0); }
  30%  { transform: translate(calc(-50% - 4px), -55%);  clip-path: inset(45% 0 18% 0); }
  45%  { transform: translate(calc(-50% + 2px), -55%);  clip-path: inset(68% 0 5% 0); opacity: 0.85; }
  60%  { transform: translate(calc(-50% - 3px), -55%);  clip-path: inset(18% 0 60% 0); opacity: 0.7; }
  80%  { transform: translate(calc(-50% + 5px), -55%);  clip-path: inset(50% 0 28% 0); opacity: 0.45; }
  100% { transform: translate(-50%, -55%);              clip-path: inset(0 0 100% 0); opacity: 0; }
}

/* rozbłysk siatki w momencie materializacji nowej ikony */
.holo-stage.flash .holo-grid {
  animation: holoGridMove 2.2s linear infinite, holoGridFlash 0.9s ease-out;
}

@keyframes holoGridFlash {
  0%   { filter: brightness(2.4); }
  100% { filter: brightness(1); }
}

.place-code {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--green2);
  background: var(--green3);
  border: 1px solid var(--border-green);
  border-radius: 4px;
  padding: 0.35rem 0.65rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.place-prefix { color: var(--text3); }

.place-caret {
  width: 6px;
  height: 0.85em;
  background: var(--green);
  display: inline-block;
  animation: placeCaretBlink 1.1s steps(1) infinite;
}

@keyframes placeCaretBlink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

/* statusy scen (prawy dolny róg) */
.place-counter.warn { color: var(--gold); }
.place-counter.ok   { color: var(--green2); }
/* wariant w prawym górnym rogu — żeby nie zderzał się z napisem // na dole */
.place-counter.top  { top: 10px; bottom: auto; }

/* ══════════════════════════════════════
   SCENA SORTOWANIA — kafelek SENSOWNA KOLEJNOŚĆ
   (baza wyglądu wzięta z .holo-stage; ruch przez translate/rotate = GPU)
══════════════════════════════════════ */
.sort-item {
  position: absolute;
  left: 14px; right: 14px; top: 0;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--green2);
  white-space: nowrap;
  opacity: 0;
  transition: translate 0.8s cubic-bezier(0.22,1,0.36,1), rotate 0.8s cubic-bezier(0.22,1,0.36,1), opacity 0.45s ease;
  will-change: translate, opacity;
  z-index: 2;
}
.sort-item.on { opacity: 1; }

.si-rank {
  flex: none;
  width: 16px;
  font-size: 0.55rem;
  color: var(--gold);
  opacity: 0;
  transition: opacity 0.35s ease 0.35s;
}
.sort-item.locked .si-rank { opacity: 1; }

.si-word {
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 8px rgba(109,187,69,0.55);
}

.si-bar {
  flex: 1;
  max-width: 74px;
  margin-left: auto;
  height: 3px;
  border-radius: 2px;
  background: rgba(109,187,69,0.14);
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.3s ease 0.3s;
}
.sort-item.locked .si-bar { opacity: 1; }

.si-bar i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(109,187,69,0.55), var(--green2));
  box-shadow: 0 0 7px rgba(109,187,69,0.6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.9s cubic-bezier(0.22,1,0.36,1) 0.4s;
  will-change: transform;
}
.sort-item.locked .si-bar i { transform: scaleX(var(--w, 0.5)); }

/* glitchowe zejście wiersza (transform składa się z translate — pozycja zostaje) */
.sort-item.out { animation: sortItemOut 0.34s steps(2) forwards; }
@keyframes sortItemOut {
  25%  { transform: translateX(4px);  opacity: 0.7; }
  55%  { transform: translateX(-5px); opacity: 0.4; }
  100% { transform: translateX(2px);  opacity: 0; }
}

/* ══════════════════════════════════════
   SCENA ANTY-PUNKTOWA — kafelek ŻADNEGO ZBIERANIA PUNKTÓW
══════════════════════════════════════ */
.pt-chip {
  position: absolute;
  padding: 3px 9px;
  border: 1px solid rgba(245,200,66,0.45);
  border-radius: 999px;
  background: rgba(245,200,66,0.07);
  color: var(--gold);
  font-family: 'DM Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(245,200,66,0.35);
  opacity: 0;
  transform: scale(0.5);
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease,
              color 0.2s, border-color 0.2s, background 0.2s;
  will-change: transform, opacity;
  z-index: 2;
}
.pt-chip.on {
  opacity: 1;
  transform: scale(1);
  animation: ptBob 3.4s ease-in-out 0.6s infinite alternate;
}
@keyframes ptBob {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1) translateY(-5px); }
}

/* zestrzelenie chipa: czerwony flash, przekreślenie, upadek */
.pt-chip.zap {
  color: #e06060;
  border-color: rgba(224,96,96,0.65);
  background: rgba(224,96,96,0.08);
  text-decoration: line-through;
  text-shadow: 0 0 8px rgba(224,96,96,0.5);
  animation: ptZap 0.65s ease-in forwards;
}
@keyframes ptZap {
  0%   { transform: scale(1) rotate(0); opacity: 1; }
  18%  { transform: scale(1.1) translateX(-3px) rotate(-2deg); }
  34%  { transform: scale(0.98) translateX(3px) rotate(2deg); }
  100% { transform: scale(0.9) translateY(78px) rotate(10deg); opacity: 0; }
}

/* werdykt po oczyszczeniu sceny */
.pt-verdict {
  position: absolute;
  left: 50%; top: 42%;
  translate: -50% -50%;
  text-align: center;
  font-family: 'DM Mono', monospace;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
  pointer-events: none;
  z-index: 3;
}
.pt-verdict.on { opacity: 1; transform: scale(1); }
.pt-verdict .ptv-check {
  display: block;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--green);
  text-shadow: 0 0 18px rgba(109,187,69,0.8);
  margin-bottom: 6px;
}
.pt-verdict .ptv-txt {
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--green2);
}

.place-counter.alert { color: #e06060; }

/* ══════════════════════════════════════
   SCENA PAMIĘCI — kafelek TECHNIKI PAMIĘCIOWE ZAMIAST POWTÓREK
   (spam powtórek → skan → konstelacja skojarzenia słowo-obraz-miejsce)
══════════════════════════════════════ */
.memo-ghost {
  position: absolute;
  left: 0; right: 0;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--text3);
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: opacity;
  z-index: 2;
}
.memo-ghost.on { opacity: var(--go, 0.6); }
.memo-ghost.out { animation: sortItemOut 0.3s steps(2) forwards; }

.memo-net {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
.memo-link {
  stroke: rgba(143,212,118,0.75);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.memo-node {
  position: absolute;
  translate: -50% -50%;
  padding: 3px 8px;
  border: 1px solid rgba(109,187,69,0.4);
  border-radius: 4px;
  background: rgba(8,16,7,0.85);
  font-family: 'DM Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  color: var(--green2);
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease, box-shadow 0.5s ease;
  will-change: transform, opacity;
  z-index: 2;
}
.memo-node.on { opacity: 1; transform: scale(1); }
.memo-node.mn-word {
  font-size: 0.62rem;
  color: #fff;
  border-color: rgba(245,200,66,0.5);
  text-shadow: 0 0 10px rgba(109,187,69,0.7);
}

/* rozbłysk po spięciu skojarzenia */
.memo-stage.linked .memo-node {
  border-color: rgba(109,187,69,0.85);
  box-shadow: 0 0 14px rgba(109,187,69,0.35);
}
.memo-stage.linked .memo-link {
  filter: drop-shadow(0 0 3px rgba(109,187,69,0.8));
}

/* ══════════════════════════════════════
   SCENA PRZYGOTOWANIA — kafelek PRZYGOTOWANIE PRZED NAUKĄ
   (ściana mentalnych blokad → skan → kruszenie → umysł odblokowany)
══════════════════════════════════════ */
.psy-brick {
  position: absolute;
  padding: 4px 9px;
  border: 1px solid rgba(224,96,96,0.45);
  border-radius: 3px;
  background: rgba(224,96,96,0.07);
  color: #d98080;
  font-family: 'DM Mono', monospace;
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-shadow: 0 0 8px rgba(224,96,96,0.3);
  opacity: 0;
  transform: scale(0.7);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  will-change: transform, opacity;
  z-index: 2;
}
.psy-brick.on { opacity: 1; transform: scale(1); }

/* kruszenie blokady: rozbłysk i rozpad w dół */
.psy-brick.crush { animation: psyCrush 0.6s ease-in forwards; }
@keyframes psyCrush {
  0%   { transform: scale(1) rotate(0); opacity: 1; filter: brightness(1); }
  16%  { transform: scale(1.12) rotate(-2deg); filter: brightness(2.2); }
  32%  { transform: scale(0.96) rotate(2deg); filter: brightness(1.4); }
  100% { transform: scale(0.85) translateY(72px) rotate(-9deg); opacity: 0; filter: brightness(0.6); }
}

/* ══════════════════════════════════════
   SCENA PAR — kafelek RZECZOWNIK + CZASOWNIK ZAWSZE W PARZE
   (słowa wlatują z boków i magnesują się w parę, potem całe zdanie)
══════════════════════════════════════ */
.pair-row {
  position: absolute;
  left: 50%; top: 36%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 7px;
  z-index: 2;
}
.pair-chip {
  padding: 4px 10px;
  border: 1px solid rgba(109,187,69,0.45);
  border-radius: 5px;
  background: rgba(109,187,69,0.07);
  color: var(--green2);
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(var(--from, 0));
  transition: transform 0.7s cubic-bezier(0.22,1,0.36,1), opacity 0.4s ease,
              box-shadow 0.4s ease, border-color 0.4s ease;
  will-change: transform, opacity;
}
.pair-chip.on { opacity: 1; transform: translateX(var(--apart, 0)); }
.pair-chip.snap {
  transform: translateX(0);
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1), opacity 0.4s ease,
              box-shadow 0.4s ease, border-color 0.4s ease;
}
.pair-plus {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  color: var(--gold);
  opacity: 0;
  transform: scale(0);
  transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
}
.pair-row.joined .pair-plus { opacity: 1; transform: scale(1); }
.pair-row.joined .pair-chip {
  border-color: rgba(109,187,69,0.85);
  box-shadow: 0 0 14px rgba(109,187,69,0.35);
}
.pair-sentence {
  position: absolute;
  left: 12px; right: 12px;
  top: 62%;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  color: #fff;
  text-shadow: 0 0 10px rgba(109,187,69,0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2;
}
.pair-sentence.on { opacity: 1; }

/* ══════════════════════════════════════
   SCENA MYŚLENIA — kafelek ZACZYNASZ MYŚLEĆ W OBCYM JĘZYKU
   (góra: powolny łańcuch tłumaczenia w głowie → przekreślony;
    dół: obraz → od razu słowo w obcym języku, z błyskiem)
══════════════════════════════════════ */
.think-row {
  position: absolute;
  left: 50%;
  translate: -50% -50%;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  z-index: 2;
}
.think-row.slow { top: 30%; }
.think-row.fast { top: 68%; }
.think-chip {
  padding: 4px 10px;
  border: 1px solid rgba(109,187,69,0.45);
  border-radius: 5px;
  background: rgba(109,187,69,0.07);
  color: var(--green2);
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  opacity: 0;
  transform: scale(0.75);
  transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  will-change: transform, opacity;
}
.think-chip.on { opacity: 1; transform: scale(1); }
.think-chip.img { font-size: 0.85rem; background: transparent; border-color: rgba(255,255,255,0.18); }
.think-chip.native { color: #c8cbd4; border-color: rgba(255,255,255,0.22); background: rgba(255,255,255,0.04); }
.think-chip.trans {
  color: #d98080;
  border-color: rgba(224,96,96,0.5);
  background: rgba(224,96,96,0.07);
}
.think-chip.trans.on { animation: thinkPonder 1.1s ease-in-out infinite; }
@keyframes thinkPonder {
  0%, 100% { box-shadow: 0 0 0 rgba(224,96,96,0); }
  50%      { box-shadow: 0 0 12px rgba(224,96,96,0.45); }
}
.think-chip.target.big { font-size: 0.72rem; padding: 5px 14px; }
.think-chip.target.flash {
  border-color: rgba(109,187,69,0.9);
  box-shadow: 0 0 18px rgba(109,187,69,0.55);
  color: #fff;
  text-shadow: 0 0 10px rgba(109,187,69,0.8);
}
.think-arr {
  font-family: 'DM Mono', monospace;
  font-size: 0.66rem;
  color: rgba(255,255,255,0.35);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.think-arr.on { opacity: 1; }
.think-arr.zap { color: var(--gold); }
.think-row.slow::after {
  content: "";
  position: absolute;
  left: -4px; right: -4px; top: 50%;
  height: 2px;
  background: rgba(224,96,96,0.85);
  box-shadow: 0 0 10px rgba(224,96,96,0.6);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.45s ease-in;
}
.think-row.slow.strike::after { transform: scaleX(1); }
.think-row.slow.strike .think-chip { opacity: 0.45; }
.think-row.slow.strike .think-chip.trans { animation: none; }

/* ══════════════════════════════════════
   SCENA KŁÓDEK — kafelek OTWARTY DOSTĘP DO MATERIAŁÓW
   (poziomy A1–C2 zablokowane → skan → wszystkie pękają naraz)
══════════════════════════════════════ */
.lock-chip {
  position: absolute;
  top: 30%;
  translate: -50% -50%;
  padding: 4px 8px;
  border: 1px solid rgba(224,96,96,0.45);
  border-radius: 5px;
  background: rgba(224,96,96,0.06);
  color: #d98080;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
  opacity: 0;
  transform: scale(0.7);
  transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease,
              color 0.35s, border-color 0.35s, background 0.35s, box-shadow 0.35s;
  will-change: transform, opacity;
  z-index: 2;
}
.lock-chip.on { opacity: 1; transform: scale(1); }
.lock-chip.open {
  color: var(--green2);
  border-color: rgba(109,187,69,0.65);
  background: rgba(109,187,69,0.08);
  box-shadow: 0 0 12px rgba(109,187,69,0.3);
  animation: lockPop 0.45s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lockPop {
  0%   { transform: scale(1); }
  45%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

.pt-verdict.lock-verdict { top: 64%; }

/* ══════════════════════════════════════
   SCENA FABUŁY — kafelek WCIĄGAJĄCA FABUŁA
   (log misji łamacza kodu + przechwycony szyfr, który pęka na oczach)
══════════════════════════════════════ */
.story-line {
  position: absolute;
  left: 14px; right: 14px;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  color: var(--green2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 2;
}
.story-line.on { opacity: 1; }
.story-line.out { animation: sortItemOut 0.3s steps(2) forwards; }

.story-cipher {
  position: absolute;
  left: 12px; right: 12px;
  top: 66%;
  text-align: center;
  font-family: 'DM Mono', monospace;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(245,200,66,0.4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transition: opacity 0.35s ease, color 0.5s ease, text-shadow 0.5s ease;
  z-index: 2;
}
.story-cipher.on { opacity: 1; }
.story-cipher.cracked { color: #fff; text-shadow: 0 0 14px rgba(109,187,69,0.9); }
.story-cipher.out { animation: sortItemOut 0.3s steps(2) forwards; }

/* ══════════════════════════════════════
   BROŃ — sekcja POBIERZ (blueprint jak holo-ikony)
   BASE: goła broń + puste sloty; UZBROJENIA: moduły wskakują i klikają
══════════════════════════════════════ */
.weapon-stage {
  position: relative;
  height: 120px;
  margin: 0 0 1.4rem;
  border-radius: 6px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(109,187,69,0.08), transparent 65%),
    rgba(0,0,0,0.25);
  border: 1px solid rgba(109,187,69,0.16);
}
/* scanlines CRT jak w scenach kafelków */
.weapon-stage::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg,
    rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px,
    transparent 1px, transparent 3px);
  pointer-events: none;
  z-index: 5;
  border-radius: 6px;
}
.weapon-svg {
  position: absolute;
  left: 50%; top: 50%;
  width: 260px; height: 100px;
  max-width: 92%;
  translate: -50% -50%;
  overflow: visible;
  filter: drop-shadow(0 0 8px rgba(109,187,69,0.55));
  animation: holoFloat2 4.6s ease-in-out infinite;
  z-index: 2;
}
@keyframes holoFloat2 {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
/* wstrząs przy kliknięciu modułu i strzale testowym */
.weapon-svg.kick {
  animation: holoFloat2 4.6s ease-in-out infinite, weaponKick 0.2s ease-out;
}
@keyframes weaponKick {
  25%  { transform: translate(-4px, 1px); }
  100% { transform: translate(0, 0); }
}
.weapon-svg path, .weapon-svg rect, .weapon-svg line {
  fill: none;
  stroke: var(--green2);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.weapon-svg .w-hud {
  stroke: rgba(109,187,69,0.28);
  stroke-width: 1;
  animation: slotPulse 3.4s ease-in-out infinite;
}
/* wiązka lasera — pojawia się po uzbrojeniu modułu */
.weapon-svg .w-beam {
  stroke: rgba(245,200,66,0.75);
  stroke-width: 1.1;
  stroke-dasharray: 5 4;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.weapon-svg .w-beam.on { opacity: 1; }
/* błysk z lufy — strzał testowy po pełnym dozbrojeniu */
.weapon-svg .w-fire {
  stroke: #fff;
  stroke-width: 2;
  opacity: 0;
}
.weapon-svg .w-fire.burst { animation: fireBurst 0.5s steps(1) forwards; }
@keyframes fireBurst {
  0%   { opacity: 1; }
  22%  { opacity: 0; }
  40%  { opacity: 1; }
  62%  { opacity: 0; }
  100% { opacity: 0; }
}
/* wersja GOLD — karta uzbrojeń */
.weapon-stage.gold {
  background:
    radial-gradient(ellipse at 50% 20%, rgba(245,200,66,0.08), transparent 65%),
    rgba(0,0,0,0.25);
  border-color: rgba(245,200,66,0.2);
}
.weapon-stage.gold .weapon-svg {
  filter: drop-shadow(0 0 8px rgba(245,200,66,0.45));
}
.weapon-stage.gold .weapon-svg path,
.weapon-stage.gold .weapon-svg rect,
.weapon-stage.gold .weapon-svg line {
  stroke: var(--gold);
}
.weapon-stage.gold .weapon-svg .w-hud { stroke: rgba(245,200,66,0.3); }
.weapon-stage.gold .weapon-svg .w-fire { stroke: #fff; }
/* puste sloty w wersji BASE — przerywana kreska, delikatny puls */
.weapon-svg .w-slot {
  stroke: rgba(245,200,66,0.55);
  stroke-dasharray: 3 3;
  stroke-width: 1.1;
  animation: slotPulse 2.6s ease-in-out infinite;
}
@keyframes slotPulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 0.9; }
}
/* moduły uzbrojenia — wjeżdżają transformem i klikają */
.weapon-svg .w-mod {
  opacity: 0;
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1), opacity 0.3s ease;
  will-change: transform, opacity;
}
.weapon-svg .w-mod.armed { opacity: 1; transform: translate(0, 0) !important; }
.weapon-svg .w-mod.flash path,
.weapon-svg .w-mod.flash rect { animation: modFlash 0.5s ease-out; }
/* biały błysk gaśnie sam — kolor wraca do bazowego (zielony/złoty wg karty) */
@keyframes modFlash {
  0%, 55% { stroke: #fff; filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)); }
}
.weapon-tag {
  position: absolute;
  left: 10px; bottom: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--text3);
  z-index: 4;
}
.weapon-tag b { color: var(--green2); font-weight: 500; }
.weapon-status {
  position: absolute;
  right: 10px; top: 8px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  z-index: 4;
}
.weapon-status.ok { color: var(--green2); }

/* ═══════════════════════════════════
   SCENA EBOOK — okładka jako odtajniany dokument
   skan przejeżdża po okładce, tytuł się dekoduje, stempel ODTAJNIONO
   ═══════════════════════════════════ */
.eb-scan {
  position: absolute;
  left: 0; right: 0; top: -12%;
  height: 34px;
  background: linear-gradient(to bottom, transparent, rgba(109,187,69,0.16), transparent);
  border-bottom: 1px solid rgba(109,187,69,0.5);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.eb-scan.run { animation: ebScan 1.8s ease-in-out forwards; }
@keyframes ebScan {
  0%   { top: -12%; opacity: 0; }
  10%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}
.eb-status {
  position: absolute;
  top: 10px; left: 12px;
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  color: var(--text3);
  text-transform: uppercase;
  z-index: 3;
}
.eb-status.ok { color: var(--green2); }
.eb-stamp {
  position: absolute;
  bottom: 17%; left: 50%;
  transform: translateX(-50%) rotate(-8deg);
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--gold);
  border: 1.5px solid var(--gold);
  border-radius: 3px;
  padding: 0.35rem 0.7rem 0.35rem 0.95rem;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
  z-index: 3;
}
.eb-stamp.on {
  opacity: 0.92;
  animation: ebStampIn 0.3s ease-out;
}
@keyframes ebStampIn {
  0%   { transform: translateX(-50%) rotate(-8deg) scale(1.7); }
  100% { transform: translateX(-50%) rotate(-8deg) scale(1); }
}

/* ═══════════════════════════════════
   SEKCJA MINDSET — kaskada duch→umysł→nauka + piedestał hierarchii
   detronizacja: bloki BÓG/JĘZYK zamieniają się miejscami z błyskiem
   ═══════════════════════════════════ */
.mindset-wiz {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1000px;
  margin: 0 auto;
  align-items: stretch;
}
@media (max-width: 860px) { .mindset-wiz { grid-template-columns: 1fr; } }

/* kaskada: fala pulsu spływa z góry na dół */
.mnd-cascade {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.6rem 1.4rem;
  background: rgba(0,0,0,0.2);
  display: flex; flex-direction: column; align-items: center;
}
.mnd-level {
  width: 100%;
  border: 1px solid var(--border-green);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  text-align: center;
  animation: mndLvl 3.6s ease-in-out infinite;
}
.mnd-level.mid { animation-delay: 0.6s; }
.mnd-level.dol { animation-delay: 1.2s; }
@keyframes mndLvl {
  0%, 40%, 100% { box-shadow: none; border-color: var(--border-green); }
  14% { box-shadow: 0 0 20px rgba(109,187,69,0.22); border-color: var(--green2); }
}
.mnd-level-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  color: var(--green2);
}
.mnd-level.gora .mnd-level-name { color: var(--gold); }
.mnd-level-desc {
  font-size: 0.78rem;
  color: var(--text2);
  margin-top: 0.3rem;
  font-weight: 300;
  line-height: 1.5;
}
.mnd-arrow {
  color: var(--green);
  font-size: 0.68rem;
  margin: 0.4rem 0;
  animation: mndArr 3.6s ease-in-out infinite;
}
.mnd-arrow.a2 { animation-delay: 0.9s; }
.mnd-arrow.a1 { animation-delay: 0.3s; }
@keyframes mndArr {
  0%, 40%, 100% { opacity: 0.3; transform: translateY(-2px); }
  14% { opacity: 1; transform: translateY(2px); }
}
.mnd-cascade-cap {
  margin-top: 1.2rem;
  font-size: 0.78rem;
  color: var(--text3);
  text-align: center;
  line-height: 1.7;
  font-weight: 300;
}
.mnd-cascade-cap b { color: var(--green2); font-weight: 500; }

/* scena piedestału */
.mnd-stage-wrap {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.4rem 1.4rem 1.6rem;
  background: rgba(0,0,0,0.2);
  display: flex; flex-direction: column;
}
.mnd-toggle { display: flex; gap: 0.6rem; justify-content: center; margin-bottom: 0.6rem; flex-wrap: wrap; }
.mnd-btn {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.9rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.25s ease;
}
.mnd-btn:hover { color: var(--text); }
.mnd-stage-wrap[data-mode="wrong"] .mnd-btn[data-mode="wrong"] { border-color: rgba(224,96,96,0.55); color: #e06060; }
.mnd-stage-wrap[data-mode="right"] .mnd-btn[data-mode="right"] { border-color: var(--border-green); color: var(--green2); }

.mnd-stage { position: relative; height: 250px; }
.mnd-flash {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 55%, rgba(255,255,255,0.22), transparent 60%);
  opacity: 0;
  pointer-events: none;
  z-index: 5;
}
.mnd-flash.burst { animation: mndFlash 0.55s ease-out; }
@keyframes mndFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

.mnd-pedestal {
  position: absolute;
  left: 50%; bottom: 56px;
  transform: translateX(-50%);
  width: 132px; height: 36px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.07), rgba(255,255,255,0.015));
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}
.mnd-pedestal::before {
  content: '';
  position: absolute; top: 0; left: 10%; right: 10%;
  height: 2px;
  background: var(--green);
  opacity: 0.5;
}

/* bloki BÓG / JĘZYK — pozycjoner przesuwa, box świeci i się trzęsie */
.mnd-blok {
  position: absolute;
  left: 50%;
  z-index: 3;
  transition: bottom 0.9s cubic-bezier(0.34, 1.3, 0.5, 1), transform 0.9s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.mnd-box {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 1.2rem;
  text-align: center;
  background: rgba(6,10,6,0.85);
  transition: border-color 0.5s ease, box-shadow 0.5s ease, opacity 0.5s ease;
  white-space: nowrap;
}
.mnd-blok-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
  letter-spacing: 0.28em;
  transition: color 0.5s ease;
}
.mnd-blok-sub {
  font-size: 0.66rem;
  color: var(--text3);
  margin-top: 0.2rem;
  font-weight: 300;
}
.mnd-stage-wrap[data-mode="wrong"] .sub-right { display: none; }
.mnd-stage-wrap[data-mode="right"] .sub-wrong { display: none; }

/* POMYLONA: język na piedestale (trzęsie się ze stresu), Bóg zepchnięty */
.mnd-stage-wrap[data-mode="wrong"] .mnd-blok.jezyk { bottom: 96px; transform: translateX(-50%) rotate(0deg); }
.mnd-stage-wrap[data-mode="wrong"] .mnd-blok.jezyk .mnd-box {
  border-color: rgba(224,96,96,0.55);
  box-shadow: 0 0 24px rgba(224,96,96,0.2);
  animation: mndShake 0.55s ease-in-out infinite;
}
.mnd-stage-wrap[data-mode="wrong"] .mnd-blok.jezyk .mnd-blok-name { color: #e06060; }
.mnd-stage-wrap[data-mode="wrong"] .mnd-blok.bog { bottom: 2px; transform: translateX(-158%) rotate(-3deg) scale(0.92); }
.mnd-stage-wrap[data-mode="wrong"] .mnd-blok.bog .mnd-box { opacity: 0.55; }
.mnd-stage-wrap[data-mode="wrong"] .mnd-blok.bog .mnd-blok-name { color: var(--text3); }
@keyframes mndShake {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  20% { transform: translate(-1.5px, 0.5px) rotate(-0.6deg); }
  40% { transform: translate(1.5px, -0.5px) rotate(0.5deg); }
  60% { transform: translate(-1px, 1px) rotate(0.3deg); }
  80% { transform: translate(1px, -1px) rotate(-0.4deg); }
}

/* WŁAŚCIWA: Bóg na piedestale (złota poświata), język na swoim miejscu */
.mnd-stage-wrap[data-mode="right"] .mnd-blok.bog { bottom: 96px; transform: translateX(-50%) rotate(0deg) scale(1); }
.mnd-stage-wrap[data-mode="right"] .mnd-blok.bog .mnd-box {
  border-color: rgba(245,200,66,0.55);
  box-shadow: 0 0 28px rgba(245,200,66,0.25);
  animation: mndHalo 4s ease-in-out infinite;
}
.mnd-stage-wrap[data-mode="right"] .mnd-blok.bog .mnd-blok-name { color: var(--gold); }
.mnd-stage-wrap[data-mode="right"] .mnd-blok.jezyk { bottom: 2px; transform: translateX(28%) rotate(2deg); }
.mnd-stage-wrap[data-mode="right"] .mnd-blok.jezyk .mnd-box { border-color: var(--border-green); }
.mnd-stage-wrap[data-mode="right"] .mnd-blok.jezyk .mnd-blok-name { color: var(--green2); }
@keyframes mndHalo {
  0%, 100% { box-shadow: 0 0 28px rgba(245,200,66,0.25); }
  50% { box-shadow: 0 0 40px rgba(245,200,66,0.4); }
}

/* skutki: ✗ wchodzą przy pomylonej, ✓ przy właściwej — jeden po drugim */
.mnd-effects {
  list-style: none;
  padding: 0;
  margin: 0.4rem auto 0;
  min-height: 84px;
}
.mnd-effects li {
  font-size: 0.8rem;
  line-height: 1.9;
  font-weight: 300;
  color: var(--text2);
  padding-left: 1.4rem;
  position: relative;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  display: none;
}
.mnd-effects li.w::before { content: '✗'; position: absolute; left: 0; color: #e06060; }
.mnd-effects li.r::before { content: '✓'; position: absolute; left: 0; color: var(--green2); }
.mnd-stage-wrap[data-mode="wrong"] .mnd-effects li.w,
.mnd-stage-wrap[data-mode="right"] .mnd-effects li.r { display: block; }
.mnd-stage-wrap.fx .mnd-effects li.w:nth-of-type(1), .mnd-stage-wrap.fx .mnd-effects li.r:nth-of-type(4) { transition-delay: 0.55s; }
.mnd-stage-wrap.fx .mnd-effects li.w:nth-of-type(2), .mnd-stage-wrap.fx .mnd-effects li.r:nth-of-type(5) { transition-delay: 0.75s; }
.mnd-stage-wrap.fx .mnd-effects li.w:nth-of-type(3), .mnd-stage-wrap.fx .mnd-effects li.r:nth-of-type(6) { transition-delay: 0.95s; }
.mnd-stage-wrap.fx .mnd-effects li { opacity: 1; transform: translateX(0); }

.feature-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

.feature-desc {
  font-size: 0.85rem;
  color: var(--text2);
  line-height: 1.7;
  font-weight: 300;
}

/* Tabela porównawcza */
.comparison-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.3em;
  color: var(--text3);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2rem;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.comparison-table th {
  padding: 0.8rem 1.2rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
}

.comparison-table th:first-child { color: var(--text); }

.comparison-table th.our {
  color: var(--green);
  border-bottom-color: var(--green);
}

.comparison-table td {
  padding: 0.85rem 1.2rem;
  border-bottom: 1px solid var(--border);
  color: var(--text2);
  font-weight: 300;
}

.comparison-table tr:hover td { background: rgba(255,255,255,0.02); }

.comparison-table td:first-child { color: var(--text); font-weight: 400; }

.check { color: var(--green); font-size: 1.1rem; }
.cross { color: var(--text3); font-size: 1.1rem; }
.partial { color: var(--gold); font-size: 0.85rem; }

/* ══════════════════════════════════════
   TIER TABLES BASE / GOLD
══════════════════════════════════════ */
.tiers-tables {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 3rem;
}

.tier-table {
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid;
}

.tier-table-base { border-color: var(--border-green); background: var(--bg3); }
.tier-table-gold { border-color: rgba(245,200,66,0.3); background: linear-gradient(160deg, rgba(245,200,66,0.04) 0%, var(--bg3) 60%); }

.tier-table-header {
  display: flex;
  align-items: baseline;
  gap: 0.8rem;
  padding: 1.4rem 1.8rem;
  border-bottom: 1px solid;
}
.tier-table-base .tier-table-header { border-bottom-color: var(--border-green); background: rgba(109,187,69,0.06); }
.tier-table-gold .tier-table-header { border-bottom-color: rgba(245,200,66,0.2); background: rgba(245,200,66,0.05); }

.tier-table-label {
  font-family: 'Outfit', sans-serif;
  font-size: 1.2rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
}

.tier-table-label.gold { color: var(--gold); }

.tier-table-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text3);
}

.tier-table-list {
  list-style: none;
  padding: 1.2rem 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.tier-table-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.5;
}

.tier-check {
  flex-shrink: 0;
  font-size: 0.85rem;
  margin-top: 0.05rem;
}

.tier-check.green { color: var(--green); }
.tier-check.gold  { color: var(--gold); }

@media (max-width: 700px) {
  .tiers-tables { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════
   POBIERZ APLIKACJĘ
══════════════════════════════════════ */
#pobierz {
  padding: 8rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.pobierz-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 5rem;
}

/* mniejszy tytuł tylko tutaj — dwie linijki z <br> muszą się mieścić bez łamania */
.pobierz-header .section-title {
  font-size: clamp(1.7rem, 3.4vw, 2.8rem);
}

.pobierz-header p {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.8;
}

.pobierz-cards {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

/* BASE card */
.card-base {
  background: var(--bg3);
  border: 1px solid var(--border-green);
  border-radius: 8px;
  padding: 2.5rem;
  position: relative;
  overflow: hidden;
}

.card-base::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--green), var(--green2));
}

.card-badge {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border-radius: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.badge-base {
  background: var(--green3);
  color: var(--green);
  border: 1px solid var(--border-green);
}

.badge-gold {
  background: var(--gold2);
  color: var(--gold);
  border: 1px solid rgba(245,200,66,0.3);
}

.card-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.card-title-sub {
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  color: var(--text3);
  margin-bottom: 1.8rem;
}

.card-features-list {
  list-style: none;
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.card-features-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  font-size: 0.88rem;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.5;
}

.card-features-list li::before {
  content: '→';
  color: var(--green);
  flex-shrink: 0;
  font-size: 0.8rem;
  margin-top: 0.05rem;
}

.card-cta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.9rem 2rem;
  background: var(--green);
  color: #0a0f0a;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  border: 1px solid var(--green);
  width: 100%;
  justify-content: center;
  transition: all 0.25s;
}

.card-cta:hover {
  background: var(--green2);
  border-color: var(--green2);
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(109,187,69,0.25);
}

/* Uzbrojenia */
.card-uzbrojenia {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.card-uzbrojenia::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--gold), rgba(245,200,66,0.3));
}

.uzbrojenie-item {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.uzbrojenie-item:last-child { border-bottom: none; }

.uzbrojenie-info {
  flex: 1;
}

.uzbrojenie-name {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.2rem;
}

.uzbrojenie-desc {
  font-size: 0.78rem;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.5;
}

.uzbrojenie-status {
  flex-shrink: 0;
}

.status-available {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: var(--green3);
  border: 1px solid var(--border-green);
  color: var(--green);
  border-radius: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.2s;
  cursor: pointer;
}

.status-available:hover {
  background: var(--gold2);
  border-color: rgba(245,200,66,0.4);
  color: var(--gold);
}

.status-soon {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  color: var(--text3);
  border-radius: 2px;
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ══════════════════════════════════════
   BASE / GOLD
══════════════════════════════════════ */
#base-gold {
  padding: 8rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.base-gold-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
  margin-bottom: 4rem;
}

.base-gold-text .section-title {
  margin-bottom: 1.5rem;
}

.base-gold-text p {
  font-size: 1rem;
  color: var(--text2);
  line-height: 1.9;
  font-weight: 300;
  margin-bottom: 1rem;
}

.base-gold-visual {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.tier-card {
  padding: 1.8rem 2rem;
  border-radius: 6px;
  border: 1px solid;
  position: relative;
  overflow: hidden;
}

.tier-base {
  background: var(--bg3);
  border-color: var(--border-green);
}

.tier-base::before {
  content: 'BASE';
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 4rem;
  letter-spacing: 0.1em;
  color: rgba(109,187,69,0.05);
  pointer-events: none;
}

.tier-gold {
  background: linear-gradient(135deg, rgba(245,200,66,0.04) 0%, var(--bg3) 100%);
  border-color: rgba(245,200,66,0.3);
}

.tier-gold::before {
  content: 'GOLD';
  position: absolute;
  top: -0.5rem;
  right: 1rem;
  font-family: 'Outfit', sans-serif;
  font-weight: 900;
  font-size: 4rem;
  letter-spacing: 0.1em;
  color: rgba(245,200,66,0.05);
  pointer-events: none;
}

.tier-label {
  font-family: 'Outfit', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.tier-base .tier-label { color: var(--green); }
.tier-gold .tier-label { color: var(--gold); }

.tier-desc {
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.6;
  font-weight: 300;
}

.uzbrojenia-concept {
  text-align: center;
  padding: 3rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
}

.uzbrojenia-concept h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 300;
  font-style: italic;
  margin-bottom: 1rem;
}

.uzbrojenia-concept h3 strong {
  font-weight: 700;
  color: var(--gold);
}

.uzbrojenia-concept p {
  font-size: 0.9rem;
  color: var(--text2);
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.8;
}

/* ══════════════════════════════════════
   ARSENAL
══════════════════════════════════════ */
.arsenal {
  background: var(--bg3);
  border: 1px solid rgba(245,200,66,0.2);
  border-radius: 6px;
  padding: 1.6rem;
}

.arsenal-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 1rem;
}

.arsenal-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.arsenal-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.9rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.25s;
  user-select: none;
}

.arsenal-item:hover {
  border-color: rgba(245,200,66,0.3);
  background: rgba(245,200,66,0.03);
}

.arsenal-item.armed {
  border-color: rgba(245,200,66,0.5);
  background: rgba(245,200,66,0.07);
  animation: armedPulse 0.4s ease;
}

@keyframes armedPulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.03); box-shadow: 0 0 16px rgba(245,200,66,0.2); }
  100% { transform: scale(1); }
}

.arsenal-icon { font-size: 1.1rem; }

.arsenal-name {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text2);
  font-weight: 300;
  transition: color 0.25s;
}

.arsenal-item.armed .arsenal-name { color: var(--gold); font-weight: 500; }

.arsenal-avail {
  font-family: 'DM Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  border: 1px solid var(--border-green);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
  transition: all 0.2s;
}

.arsenal-avail.arsenal-soon { color: var(--text3); border-color: var(--border); }
.arsenal-item.armed .arsenal-avail { color: var(--gold); border-color: rgba(245,200,66,0.4); }

.dialekt-historia {
  margin-top: 1rem;
  padding: 1.2rem 1.4rem;
  background: rgba(109,187,69,0.04);
  border-left: 2px solid var(--border-green);
  border-radius: 0 4px 4px 0;
}

.dialekt-historia-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.8rem;
}

.dialekt-historia p {
  font-size: 0.82rem;
  color: var(--text2);
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 0.7rem;
}

.dialekt-historia p:last-child { margin-bottom: 0; }
.dialekt-historia em { color: var(--text); font-style: italic; }

.arsenal-bolt {
  font-size: 0.9rem;
  opacity: 0;
  transition: opacity 0.3s;
}

.arsenal-item.armed .arsenal-bolt { opacity: 1; }

.arsenal-bar {
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 0.8rem;
  overflow: hidden;
}

.arsenal-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--green), var(--gold));
  border-radius: 2px;
  transition: width 0.4s ease;
}

.arsenal-status {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text3);
  text-align: center;
  transition: color 0.3s;
}

.arsenal-status.full { color: var(--gold); }

/* ══════════════════════════════════════
   DIALEKTY
══════════════════════════════════════ */
#dialekty {
  padding: 6rem 0;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.dialekty-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3.5rem;
}

.dialekt-card {
  padding: 2rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 6px;
  text-align: center;
  transition: all 0.3s;
  cursor: default;
}

.dialekt-card:hover {
  border-color: var(--border-green);
  transform: translateY(-4px);
}

.dialekt-flag { font-size: 2.5rem; margin-bottom: 1rem; }

.dialekt-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.dialekt-full {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.dialekt-desc {
  font-size: 0.8rem;
  color: var(--text2);
  line-height: 1.6;
  font-weight: 300;
}

/* ══════════════════════════════════════
   NAUKA O JĘZYKU
══════════════════════════════════════ */
#gramatyka {
  padding: 8rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}

.gramatyka-grid {
  /* jedna kolumna — druga była pusta i tekst wyglądał jak wciśnięty w pół ekranu; limit szerokości dla wygody czytania */
  display: grid;
  grid-template-columns: 1fr;
  gap: 4rem;
  max-width: 920px;
  margin: 0 auto;
}

.gramatyka-visual {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.grammar-pill {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.4rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  transition: all 0.25s;
  cursor: default;
}

.grammar-pill:hover {
  border-color: var(--border-green);
  transform: translateX(6px);
}

.grammar-pill-de {
  font-family: 'DM Mono', monospace;
  font-size: 0.9rem;
  color: var(--text);
  flex: 1;
}

.grammar-pill-pl {
  font-size: 0.82rem;
  color: var(--text2);
  font-weight: 300;
}

.grammar-pill-tag {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  color: var(--green);
  letter-spacing: 0.15em;
  border: 1px solid var(--border-green);
  padding: 0.15rem 0.5rem;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer {
  padding: 5rem 0 3rem;
  background: var(--bg);
  border-top: 1px solid var(--border);
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 4rem;
  gap: 3rem;
}

.footer-brand .logo {
  font-family: 'Outfit', sans-serif;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.8rem;
}

.footer-brand .logo span { color: var(--green); }

.footer-brand p {
  font-size: 0.85rem;
  color: var(--text2);
  max-width: 280px;
  line-height: 1.7;
  font-weight: 300;
}

.footer-domain {
  font-family: 'DM Mono', monospace;
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  color: var(--green);
  margin-top: 1rem;
}

.footer-links {
  display: flex;
  gap: 4rem;
}

.footer-col h4 {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  color: var(--text3);
  text-transform: uppercase;
  margin-bottom: 1.2rem;
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.footer-col ul a {
  font-size: 0.85rem;
  color: var(--text2);
  text-decoration: none;
  font-weight: 300;
  transition: color 0.2s;
}

.footer-col ul a:hover { color: var(--text); }

.footer-bottom {
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-copyright {
  font-family: 'DM Mono', monospace;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--text3);
}

.footer-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text3);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
  nav { padding: 1.2rem 1.5rem; }
  .nav-links { display: none; }
  .nav-mobile-btn { display: flex; }

  .filozofia-grid,
  .base-gold-grid,
  .gramatyka-grid,
  .pobierz-cards { grid-template-columns: 1fr; }

  .steps-flow {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
  .steps-flow::before { display: none; }

  .features-grid { grid-template-columns: 1fr 1fr; }
  .dialekty-grid { grid-template-columns: 1fr; gap: 1rem; }

  .footer-top { flex-direction: column; }
  .footer-links { gap: 2.5rem; flex-wrap: wrap; }
}

@media (max-width: 600px) {
  .features-grid { grid-template-columns: 1fr; }
  .steps-flow { grid-template-columns: 1fr; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .hero-logo { letter-spacing: 0.04em; }

  .comparison-table { font-size: 0.78rem; }
  .comparison-table th, .comparison-table td { padding: 0.65rem 0.8rem; }
}

/* ══════════════════════════════════════
   HERO WHY LINK
══════════════════════════════════════ */
.hero-why-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(109,187,69,0.4);
  color: var(--green2);
  font-family: 'Outfit', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  padding: 0.1rem 0;
  margin-bottom: 2.5rem;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
  opacity: 0;
  animation: fadeUp 0.9s ease 1.05s forwards;
}
.hero-why-link:hover {
  color: var(--green);
  border-bottom-color: var(--green);
}

/* ══════════════════════════════════════
   WHY MODAL
══════════════════════════════════════ */
.why-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(10px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
.why-overlay.open {
  opacity: 1;
  pointer-events: all;
}
.why-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  transform: translateY(24px);
  transition: transform 0.3s;
  position: relative;
}
.why-overlay.open .why-modal { transform: translateY(0); }

.why-modal::-webkit-scrollbar { width: 3px; }
.why-modal::-webkit-scrollbar-thumb { background: var(--border-green); border-radius: 2px; }

.why-modal-header {
  padding: 2rem 2rem 1.2rem;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg2);
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.why-modal-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--text);
}
.why-modal-header h2 em {
  font-style: italic;
  color: var(--green2);
}
.why-close {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.5rem;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.2s;
}
.why-close:hover { color: var(--text); }

.why-modal-body {
  padding: 1.8rem 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.why-block {}
.why-block-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.55rem;
}
.why-block p {
  font-size: 0.92rem;
  color: var(--text2);
  line-height: 1.85;
  font-weight: 300;
}
.why-block p strong {
  color: var(--text);
  font-weight: 600;
}

.why-divider {
  height: 1px;
  background: var(--border);
}

.why-example {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-left: 2px solid var(--green);
  border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.4rem;
}
.why-example-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 0.5rem;
}
.why-example p {
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.75;
  font-weight: 300;
}
.why-example p strong { color: var(--text); font-weight: 600; }

/* ══════════════════════════════════════
   AUTH MODAL
══════════════════════════════════════ */
.auth-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.84); /* bez backdrop-filter: blur — zabijał płynność */
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}

.auth-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}

/* zamknięte okno nie mieli animacji w tle */
.auth-overlay:not(.open) * { animation-play-state: paused !important; }

.auth-modal {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  transform: translateY(20px);
  transition: transform 0.3s;
  position: relative;
}

.auth-overlay.open .auth-modal {
  transform: translateY(0);
}

.auth-modal-close {
  position: absolute;
  top: 1rem; right: 1rem;
  background: none;
  border: none;
  color: var(--text3);
  font-size: 1.4rem;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
  z-index: 10;
}
.auth-modal-close:hover { color: var(--text); }

.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  padding: 1.1rem;
  background: none;
  border: none;
  font-family: 'DM Mono', monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
  cursor: pointer;
  transition: all 0.2s;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.auth-tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
}

.auth-body {
  padding: 2rem;
}

.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-form.hidden { display: none; }

.auth-panel { display: none; }
.auth-panel.active { display: block; }

.auth-panel-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 0.4rem;
}

.auth-panel-sub {
  font-size: 0.82rem;
  color: var(--text2);
  font-weight: 300;
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.auth-field label {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
}

.auth-field input {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.75rem 1rem;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.9rem;
  font-weight: 300;
  outline: none;
  transition: border-color 0.2s;
  cursor: text;
}

.auth-field input:focus {
  border-color: var(--border-green);
}

.auth-field input::placeholder { color: var(--text3); }

.auth-submit {
  padding: 0.85rem;
  background: var(--green);
  color: #0a0f0a;
  border: none;
  border-radius: 3px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 0.5rem;
}

.auth-submit:hover {
  background: var(--green2);
  transform: translateY(-1px);
}

.auth-submit:disabled {
  opacity: 0.5;
  transform: none;
  cursor: not-allowed;
}

.auth-msg {
  font-size: 0.8rem;
  padding: 0.65rem 0.9rem;
  border-radius: 3px;
  font-weight: 300;
  display: none;
}

.auth-msg.error {
  display: block;
  background: rgba(220,50,50,0.1);
  border: 1px solid rgba(220,50,50,0.25);
  color: #f87171;
}

.auth-msg.success {
  display: block;
  background: var(--green3);
  border: 1px solid var(--border-green);
  color: var(--green2);
}

/* User panel (logged in) */
.user-panel {
  padding: 2rem;
  display: none;
  flex-direction: column;
  gap: 1.5rem;
}

.user-panel.active { display: flex; }

.user-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--green3);
  border: 2px solid var(--border-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--green);
  font-weight: 700;
  font-family: 'Outfit', sans-serif;
}

.user-info-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.user-email {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 500;
}

.user-since {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  color: var(--text3);
  margin-top: 0.15rem;
}

.progress-section h4 {
  font-family: 'DM Mono', monospace;
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text3);
  margin-bottom: 1rem;
}

.progress-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-height: 200px;
  overflow-y: auto;
}

.progress-list::-webkit-scrollbar { width: 3px; }
.progress-list::-webkit-scrollbar-thumb { background: var(--border-green); }

.progress-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.8rem;
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 0.82rem;
}

.progress-item-name { color: var(--text2); font-weight: 300; }

.progress-levels {
  display: flex;
  gap: 3px;
}

.lvl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--border);
  border: 1px solid var(--border);
  font-size: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
}

.lvl-dot.done { background: var(--green3); border-color: var(--green); }

.no-progress {
  font-size: 0.82rem;
  color: var(--text3);
  font-weight: 300;
  line-height: 1.6;
  padding: 0.8rem 0;
}

.user-logout {
  padding: 0.65rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text3);
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  width: 100%;
}

.user-logout:hover {
  border-color: rgba(220,50,50,0.4);
  color: #f87171;
}

/* Nav user indicator */
.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--green3);
  border: 1px solid var(--border-green);
  border-radius: 2px;
  color: var(--green);
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-user-btn:hover {
  background: rgba(109,187,69,0.2);
}

.nav-user-dot {
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
}

/* ══════════════════════════════════════
   SCROLLBAR
══════════════════════════════════════ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(109,187,69,0.3); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(109,187,69,0.6); }

/* ══════════════════════════════════════
   SELECTION
══════════════════════════════════════ */
::selection { background: rgba(109,187,69,0.2); color: var(--text); }

/* fix overflow od orbów */
#hero { overflow: hidden; }
html, body { max-width: 100%; overflow-x: hidden; }

@media (max-width: 1024px) {
  .orb-1 { width: 400px; height: 400px; }
  .orb-2 { width: 350px; height: 350px; }
  .orb-3 { width: 250px; height: 250px; }
  .orb-4 { width: 200px; height: 200px; }
}

@media (max-width: 900px) {
  nav { padding: 1.2rem 1.5rem; top: 0; }
  .nav-links { display: none; }
  .nav-mobile-btn { display: flex; }

  .filozofia-grid,
  .gramatyka-grid,
  .pobierz-cards,
  .base-gold-grid { grid-template-columns: 1fr; gap: 2rem; }

  .steps-flow {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    justify-content: center;
  }
  .steps-flow::before { display: none; }

  .features-grid { grid-template-columns: 1fr 1fr; }

  .footer-top { flex-direction: column; }
  .footer-links { gap: 2rem; flex-wrap: wrap; }

  .tiers-tables { grid-template-columns: 1fr; }

  section { padding: 5rem 0 !important; }
  #hero { padding: 9rem 1.5rem 4rem !important; }
}

@media (max-width: 600px) {
  .lang-bar { gap: 0; padding: 0.3rem 0.5rem; }
  .lang-btn { padding: 0.2rem 0.4rem; }
  .lang-map { width: 26px; height: 22px; }
  .lang-code { font-size: 0.45rem; }

  nav { padding: 1rem 1.2rem; }
  .nav-logo { font-size: 0.95rem; }

  .hero-logo { font-size: clamp(2.2rem, 10vw, 4rem); letter-spacing: 0.04em; }
  .hero-tagline { font-size: clamp(1rem, 4vw, 1.4rem); }

  .features-grid { grid-template-columns: 1fr; }
  .steps-flow { grid-template-columns: 1fr; max-width: 320px; margin: 0 auto 3rem; }

  .section-title { font-size: clamp(1.6rem, 6vw, 2.5rem); }

  .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }
  .footer-links { flex-direction: column; gap: 1.5rem; }

  .orb-1, .orb-2 { width: 280px; height: 280px; filter: blur(50px); }
  .orb-3, .orb-4 { display: none; }

  .comparison-table { font-size: 0.75rem; }
  .comparison-table th, .comparison-table td { padding: 0.5rem 0.6rem; }

  .tier-table-list li { font-size: 0.82rem; }
  .card-base, .card-uzbrojenia { padding: 1.5rem; }

  .why-modal { margin: 0.5rem; }
  .auth-modal { margin: 0.5rem; }

  .arsenal-items .arsenal-item { flex-wrap: wrap; }

  .section-inner { padding: 0 1.2rem; }

  .method-card { padding: 1rem 1.2rem; }
  .filozofia-quote { padding: 1rem 1.2rem; }

  .pobierz-cards { gap: 1rem; }
}

@media (max-width: 400px) {
  .hero-logo { font-size: 2rem; }
  .lang-bar { height: 2.4rem; }
  nav { top: 0; }
  #hero { padding-top: 8rem !important; }
  .orb-1, .orb-2, .orb-3, .orb-4 { display: none; }
}

@media (max-width: 700px) { .tiers-tables { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════
   FILOZOFIA — bloki dodatkowe
══════════════════════════════════════ */
.filozofia-extra {
  margin-top: 4rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}
.filozofia-extra-card {
  padding: 2rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.filozofia-extra-card .fec-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.2rem;
}
.filozofia-extra-card p {
  font-size: 0.97rem;
  color: var(--text2);
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 0.9rem;
}
.filozofia-extra-card p:last-child { margin-bottom: 0; }
.filozofia-extra-card p strong { color: var(--text); font-weight: 600; }
@media (max-width: 900px) { .filozofia-extra { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════
   MITY
══════════════════════════════════════ */
#mity {
  padding: 8rem 0;
  border-top: 1px solid var(--border);
}
.mity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}
.mit-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-top: 2px solid #c04040;
  border-radius: 8px;
  padding: 2rem;
}
.mit-label {
  font-family: 'DM Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #c04040;
  margin-bottom: 0.8rem;
}
.mit-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.mit-tekst {
  font-size: 0.88rem;
  color: var(--text2);
  line-height: 1.85;
  font-weight: 300;
}
.mity-odpowiedz {
  background: linear-gradient(135deg, rgba(109,187,69,0.07), rgba(109,187,69,0.02));
  border: 1px solid var(--border-green);
  border-radius: 8px;
  padding: 2.5rem 3rem;
  text-align: center;
}
.mity-odpowiedz p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.65;
  font-weight: 400;
  margin: 0;
}
@media (max-width: 900px) { .mity-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .mity-odpowiedz { padding: 1.5rem; } }

/* ══════════════════════════════════════
   DIALEKTY
══════════════════════════════════════ */
#dialekty {
  padding: 8rem 0;
  background: var(--bg2);
  border-top: 1px solid var(--border);
}
.dialekty-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.dialekty-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 2.5rem;
}
.dialekt-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.1rem 1.5rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.dialekt-item .di-icon { font-size: 1.5rem; }
.dialekt-item .di-name {
  font-family: 'DM Mono', monospace;
  font-size: 0.82rem;
  color: var(--text);
  letter-spacing: 0.05em;
}
.dialekt-item .di-desc {
  font-size: 0.82rem;
  color: var(--text3);
  font-weight: 300;
  margin-top: 0.15rem;
}
@media (max-width: 900px) { .dialekty-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* EBOOK — dwie kolumny na komputerze, jedna na telefonie (wcześniej sztywny inline grid, nie składał się na mobile) */
.ebook-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
@media (max-width: 900px) { .ebook-grid { grid-template-columns: 1fr; gap: 3rem; } }

/* METODA GEFERTA — rozwijane panele (jeden temat = jedno miejsce, czytelnik klika to, co go ciekawi) */
.metoda-acc {
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.metoda-acc-item {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
}
.metoda-acc-item.open { border-color: var(--border-green); }
.metoda-acc-head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: none;
  border: none;
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s;
}
.metoda-acc-head:hover { color: var(--green2); }
.metoda-acc-znak {
  font-family: 'DM Mono', monospace;
  color: var(--green);
  font-size: 1.15rem;
  flex-shrink: 0;
}
.metoda-acc-body { display: none; padding: 0 1.4rem 1.3rem; }
.metoda-acc-item.open .metoda-acc-body { display: block; }
.metoda-acc-body p {
  font-size: 0.95rem;
  color: var(--text2);
  line-height: 1.85;
  font-weight: 300;
  margin-bottom: 1rem;
}
.metoda-acc-body p:last-child { margin-bottom: 0; }
.metoda-acc-body strong { color: var(--text); font-weight: 600; }

/* Dwie półkule mózgu — klikalna wizualizacja (animowany mózg SVG) */
.mozg-wiz { margin: 1.2rem 0; }
.mozg-head {
  font-size: 0.95rem;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.4rem;
}
.mozg-brain {
  display: flex;
  justify-content: center;
  margin: 0.4rem 0 0.7rem;
}
.mozg-brain svg {
  width: 100%;
  max-width: 460px;
  height: auto;
  overflow: visible;
  /* bez ciągłego skalowania całego SVG — przerysowywało wszystko co klatkę */
}

/* półkule */
.hemi {
  cursor: pointer;
  transition: filter 0.3s, opacity 0.3s;
}
.hemi.lewa  { color: var(--green); }
.hemi.prawa { color: var(--gold); }
.hemi-shape {
  fill: rgba(109,187,69,0.05);
  stroke: rgba(109,187,69,0.45);
  stroke-width: 1.6;
  transition: all 0.3s;
}
.hemi.prawa .hemi-shape {
  fill: rgba(245,200,66,0.05);
  stroke: rgba(245,200,66,0.45);
}
/* dekoracje: lewa = równe linie (porządek), prawa = pofalowane zwoje (wyobraźnia);
   spoczynek = statyczne kreski (ciągły dash-flow zamulał), życie wraca przy kliknięciu */
.hemi-deco path {
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  opacity: 0.38;
  stroke-dasharray: 5 8;
  transition: opacity 0.3s;
}
.hemi-deco circle { fill: currentColor; opacity: 0.38; transition: opacity 0.3s; }
/* aktywacja: linie/zwoje rysują się po kolei, kropki i iskry wyskakują */
.hemi.active .hemi-deco path:not(.spark) {
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: hemiDraw 0.55s ease-out forwards;
}
.hemi.active .hemi-deco path:not(.spark):nth-of-type(2) { animation-delay: 0.12s; }
.hemi.active .hemi-deco path:not(.spark):nth-of-type(3) { animation-delay: 0.24s; }
.hemi.active .hemi-deco path:not(.spark):nth-of-type(4) { animation-delay: 0.36s; }
@keyframes hemiDraw { to { stroke-dashoffset: 0; } }
.hemi.active .hemi-deco circle:not(.spark) {
  animation: dotPop 0.35s ease-out both;
}
.hemi.active .hemi-deco circle:not(.spark):nth-of-type(2) { animation-delay: 0.12s; }
.hemi.active .hemi-deco circle:not(.spark):nth-of-type(3) { animation-delay: 0.24s; }
.hemi.active .hemi-deco circle:not(.spark):nth-of-type(4) { animation-delay: 0.36s; }
@keyframes dotPop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.6); }
  100% { opacity: 0.9; transform: scale(1); }
}
.hemi.active .hemi-deco .spark { animation: sparkBurst 0.6s ease-out both; }
.hemi.active .hemi-deco path.spark:nth-of-type(6) { animation-delay: 0.15s; }
.hemi.active .hemi-deco path.spark:nth-of-type(7) { animation-delay: 0.3s; }
.hemi.active .hemi-deco circle.spark:nth-of-type(1) { animation-delay: 0.45s; }
.hemi.active .hemi-deco circle.spark:nth-of-type(2) { animation-delay: 0.55s; }
@keyframes sparkBurst {
  0%   { opacity: 0; transform: scale(0); }
  60%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0.8; transform: scale(1); }
}
.hemi-deco .spark {
  fill: currentColor;
  stroke: none;
  opacity: 0.3;
  animation: sparkTw 3.2s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes sparkTw {
  0%, 100% { opacity: 0.12; transform: scale(0.7); }
  50%      { opacity: 0.75; transform: scale(1.2); }
}

/* interakcja — bez filter/drop-shadow (za ciężkie przy animacjach); glow = gradientowa elipsa */
.hemi-glow { opacity: 0; transition: opacity 0.35s; }
.hemi:hover .hemi-shape { fill: rgba(109,187,69,0.11); }
.hemi.prawa:hover .hemi-shape { fill: rgba(245,200,66,0.11); }
.hemi.active .hemi-shape { fill: rgba(109,187,69,0.14); stroke: currentColor; stroke-width: 2.4; }
.hemi.prawa.active .hemi-shape { fill: rgba(245,200,66,0.14); }
.hemi.active .hemi-glow { opacity: 0.6; }
.hemi.active .hemi-deco path,
.hemi.active .hemi-deco circle { opacity: 0.9; }
.mozg-brain svg.has-active .hemi:not(.active) { opacity: 0.35; }

/* synapsy na środku */
.syn {
  fill: var(--text2);
  opacity: 0.25;
  animation: synPulse 2.6s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes synPulse {
  0%, 100% { opacity: 0.1; transform: scale(0.6); }
  50%      { opacity: 0.85; transform: scale(1.35); }
}

/* podpisy pod mózgiem */
.mozg-polkule {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.mozg-btn {
  flex: 0 1 195px;
  padding: 0.6rem 0.9rem;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text2);
  font-family: 'Outfit', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  cursor: pointer;
  transition: all 0.25s;
}
.mozg-btn small {
  display: block;
  font-family: 'DM Mono', monospace;
  font-size: 0.55rem;
  font-weight: 400;
  letter-spacing: 0.28em;
  margin-top: 0.3rem;
  opacity: 0.7;
}
.mozg-btn.lewa { border-radius: 90px 6px 6px 90px; }
.mozg-btn.prawa { border-radius: 6px 90px 90px 6px; }
.mozg-btn.lewa.active { border-color: var(--green); color: var(--green); background: rgba(109,187,69,0.08); }
.mozg-btn.prawa.active { border-color: var(--gold); color: var(--gold); background: rgba(245,200,66,0.08); }
.mozg-opis {
  border: 1px dashed var(--border);
  border-radius: 4px;
  padding: 1rem 1.2rem;
  font-size: 0.92rem;
  color: var(--text2);
  line-height: 1.8;
  font-weight: 300;
}
.mozg-opis.pop { animation: opisPop 0.35s ease; }
@keyframes opisPop {
  0%   { transform: translateY(6px); opacity: 0.3; }
  100% { transform: translateY(0);   opacity: 1; }
}

/* przy otwartym oknie „Dlaczego" tło strony nie mieli animacji */
body.why-open .orb, body.why-open .word-fog { visibility: hidden; }

/* ═══ PAŁAC PAMIĘCI — klikalna scena ═══ */
.pal-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.8rem 0 0.9rem;
  cursor: pointer;
}
.pal-stage svg {
  width: 100%;
  max-width: 440px;
  height: auto;
  overflow: visible;
}
.pal-struct {
  fill: rgba(245,200,66,0.04);
  stroke: rgba(245,200,66,0.5);
  stroke-width: 1.6;
  transition: all 0.3s;
}
.pal-stage:hover .pal-struct { stroke: var(--gold); fill: rgba(245,200,66,0.08); }
.pal-door {
  fill: rgba(245,200,66,0.07);
  stroke: rgba(245,200,66,0.35);
  stroke-width: 1.3;
  animation: palDoorIdle 4s ease-in-out infinite;
}
.pal-door.d2 { animation-delay: 1s; }
.pal-door.d3 { animation-delay: 2s; }
.pal-door.d4 { animation-delay: 3s; }
@keyframes palDoorIdle {
  0%, 100% { fill: rgba(245,200,66,0.05); }
  50%      { fill: rgba(245,200,66,0.14); }
}
.pal-item { fill: var(--gold); opacity: 0; }
.pal-orb  { fill: var(--gold); opacity: 0; }
/* aktywacja po kliknięciu: kula światła wędruje przez komnaty, każda zapala się po kolei */
.pal-stage svg.active .pal-door { animation: palDoorLight 0.9s ease-out both; }
.pal-stage svg.active .pal-door.d2 { animation-delay: 0.4s; }
.pal-stage svg.active .pal-door.d3 { animation-delay: 0.8s; }
.pal-stage svg.active .pal-door.d4 { animation-delay: 1.2s; }
@keyframes palDoorLight {
  0%   { fill: rgba(245,200,66,0.05); }
  40%  { fill: rgba(245,200,66,0.45); stroke: var(--gold); }
  100% { fill: rgba(245,200,66,0.18); stroke: rgba(245,200,66,0.7); }
}
.pal-stage svg.active .pal-item { animation: palItemPop 0.5s ease-out both; }
.pal-stage svg.active .pal-item.i2 { animation-delay: 0.55s; }
.pal-stage svg.active .pal-item.i3 { animation-delay: 0.95s; }
.pal-stage svg.active .pal-item.i4 { animation-delay: 1.35s; }
@keyframes palItemPop {
  0%   { opacity: 0; transform: scale(0); }
  70%  { opacity: 1; transform: scale(1.5); }
  100% { opacity: 0.9; transform: scale(1); }
}
.pal-item { animation-delay: 0.15s; transform-origin: center; transform-box: fill-box; }
.pal-stage svg.active .pal-orb { animation: palOrbTravel 1.7s ease-in-out forwards; }
@keyframes palOrbTravel {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(195px); }
}
.pal-hint {
  font-family: 'DM Mono', monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text3);
  margin-top: 0.5rem;
  transition: color 0.25s;
}
.pal-hint .green { color: var(--green); }
.pal-stage:hover .pal-hint { color: var(--text2); }
.pal-opis { margin-bottom: 1.2rem; }
@media (max-width: 600px) {
  .mozg-polkule { flex-direction: column; align-items: stretch; }
  .mozg-btn.lewa, .mozg-btn.prawa { border-radius: 6px; flex-basis: auto; }
}

/* POZIOMY A1–C1 — przekreślenie na najechanie (odrzucamy tradycyjny podział) */
/* kafelek Przewodnik — trzy niepewne wymowy vs jedno pewne brzmienie */
.guide-box { position: absolute; inset: 0 0 26px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; }
.guide-q { display: flex; gap: 8px; }
.guide-chip { padding: 4px 10px; border: 1px solid rgba(232,228,218,0.18); border-radius: 5px; font-family: 'DM Mono', monospace; font-size: 0.8rem;
  color: var(--text2); text-decoration: line-through; text-decoration-color: rgba(192,64,64,0.75); }
.guide-ok { display: flex; align-items: center; gap: 10px; padding: 6px 14px; border: 1px solid rgba(109,187,69,0.45); border-radius: 6px;
  background: rgba(109,187,69,0.07); color: var(--green2); font-family: 'DM Mono', monospace; font-size: 0.85rem; }
.guide-wave { display: flex; align-items: center; gap: 3px; height: 18px; }
.guide-wave i { display: block; width: 3px; border-radius: 2px; background: var(--green2); animation: guideWave 1.4s ease-in-out infinite; }
.guide-wave i:nth-child(1){ height: 6px; } .guide-wave i:nth-child(2){ height: 14px; animation-delay: .15s; }
.guide-wave i:nth-child(3){ height: 18px; animation-delay: .3s; } .guide-wave i:nth-child(4){ height: 11px; animation-delay: .45s; }
.guide-wave i:nth-child(5){ height: 7px; animation-delay: .6s; }
@keyframes guideWave { 0%,100% { transform: scaleY(.45); } 50% { transform: scaleY(1); } }
@media (prefers-reduced-motion: reduce) { .guide-wave i { animation: none; } }


/* Uszanuj systemowe "ogranicz animacje": strona staje sie statyczna,
   a tresc pojawia sie od razu (reveal bez wjazdu). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}


/* ── ROZMIARY I ODSTĘPY (2026-09-26): równe rzędy na komputerze, tablecie i telefonie ── */
/* 1. tablet (2 kolumny): 7 pojedynczych kafelków = dziura — „Sensowna kolejność" na całą szerokość */
@media (min-width: 601px) and (max-width: 900px) {
  .features-grid > .feature-card:nth-child(7) { grid-column: span 2; } /* Gramatyka w treści (po usunięciu kafelka umysłu 02.10) */
}
/* 2. szerokie kafelki: wyższa scenka — lepsze proporcje i brak pustego dołu karty */
@media (min-width: 601px) {
  .feature-card.wide .holo-stage, .feature-card.featured .holo-stage { height: 210px; }
}
/* 3. siatka miejsc: 24 miejsca = pełne rzędy (6 / 4 / 2 kolumny) */
.miejsca-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 900px) { .miejsca-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .miejsca-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* 4. mniejsze przerwy między sekcjami na komputerze (telefon/tablet: bez zmian, 5rem) */
@media (min-width: 901px) {
  #unikalne, #jak-dziala, #pobierz, #ebook { padding: 5.5rem 0 !important; }
}
.features-grid { margin-bottom: 0; }
/* 5. „Wersja podstawowa" i „Uzbrojenia" — równa wysokość kart */
.pobierz-cards { align-items: stretch; }


/* ── ZJAWISKOWA (2026-09-26): telefon, nagłówki, cytaty, pasy miejsc, kolory sekcji ── */
/* hero: tekst + telefon */
.hero-split { position: relative; z-index: 10; width: 100%; max-width: 1180px; display: flex; flex-direction: column; align-items: center; gap: 3rem; }
.hero-phone { position: relative; display: flex; flex-direction: column; align-items: center; opacity: 0; animation: fadeUp 1s ease 1.3s forwards; }
.phone-glow { position: absolute; inset: 8% -18%; background: radial-gradient(closest-side, rgba(109,187,69,0.30), transparent 72%); pointer-events: none; }
.phone { position: relative; width: 230px; padding: 9px; border-radius: 38px; background: linear-gradient(160deg, #1c261c, #070a07 60%);
  border: 1px solid rgba(109,187,69,0.35); box-shadow: 0 30px 80px rgba(0,0,0,0.65), 0 0 0 1px rgba(255,255,255,0.04) inset;
  animation: phoneFloat 6s ease-in-out infinite; }
.phone-notch { position: absolute; top: 3px; left: 50%; width: 46px; height: 4px; margin-left: -23px; border-radius: 3px; background: rgba(255,255,255,0.10); z-index: 3; } /* głośnik w ramce — nie zasłania ekranu */
.phone-screen { position: relative; aspect-ratio: 390 / 844; border-radius: 30px; overflow: hidden; background: #0a0a0a; }
.phone-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; transform: translateX(100%); transition: transform 0.85s cubic-bezier(0.7, 0, 0.2, 1); }
.phone-screen img.on { transform: none; }
.phone-screen img.out { transform: translateX(-100%); }
.phone-screen img.reset { transition: none; }
@keyframes phoneFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@media (min-width: 1000px) {
  .hero-split { flex-direction: row; justify-content: space-between; gap: 4rem; }
  .hero-split .hero-content { text-align: left; max-width: 700px; }
  .hero-split .hero-actions { justify-content: flex-start; }
  .hero-split .hero-logo { font-size: clamp(3rem, 6.4vw, 6.4rem); }
  .phone { width: 280px; }
  .hero-phone { perspective: 1400px; }
  .hero-phone .phone { transform-style: preserve-3d; animation: phoneFloat3d 7s ease-in-out infinite; }
}
@keyframes phoneFloat3d { 0%, 100% { transform: rotateY(-14deg) rotateX(4deg) translateY(0); } 50% { transform: rotateY(-8deg) rotateX(2deg) translateY(-12px); } }
@media (max-width: 600px) { .phone { width: 210px; } .hero-split { gap: 2.4rem; } }

/* nagłówki sekcji */
.sec-head { text-align: center; max-width: 760px; margin: 0 auto 3.2rem; }
.sec-head .section-title { margin-bottom: 0.9rem; }
.sec-sub { color: var(--text2); font-weight: 300; font-size: 1rem; line-height: 1.7; margin: 0; }

/* cytaty z książki — pasy na całą szerokość siatki */
.features-grid { grid-auto-flow: row dense; }
.quote-band { grid-column: 1 / -1; margin: 1.6rem 0; padding: 2.6rem 1rem 2.4rem; text-align: center; position: relative; }
.quote-band::before, .quote-band::after { content: ''; position: absolute; left: 50%; width: min(420px, 70%); height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(109,187,69,0.5), transparent); }
.quote-band::before { top: 0; } .quote-band::after { bottom: 0; }
.q-text { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(1.7rem, 3.8vw, 3rem); line-height: 1.25; color: var(--text); margin: 0 0 1.1rem; }
.q-text em { font-style: italic; font-weight: 600; color: var(--green2); }
.q-src { font-family: 'DM Mono', monospace; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text3); }
.q-text .qw { display: inline-block; opacity: 0.08; filter: blur(6px); transform: translateY(8px); transition: opacity 0.7s ease, filter 0.7s ease, transform 0.7s ease; }
.q-text.in .qw { opacity: 1; filter: none; transform: none; }

/* miejsca w ruchu — dwa pasy w przeciwnych kierunkach */
#jak-dziala.has-marquee .miejsca-grid { display: none; }
.mq { display: flex; flex-direction: column; gap: 0.9rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.mq-row { overflow: hidden; }
.mq-track { display: flex; gap: 0.9rem; width: max-content; animation: mqMove 55s linear infinite; }
.mq-row.rev .mq-track { animation-direction: reverse; animation-duration: 62s; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq .miejsce-item { flex: none; padding: 0.95rem 1.4rem; border-radius: 999px; font-size: 0.95rem; color: var(--text); white-space: nowrap;
  border-color: color-mix(in srgb, var(--mq-c) 35%, transparent); background: color-mix(in srgb, var(--mq-c) 7%, var(--bg3)); }
.mq .miejsce-item:hover { background: color-mix(in srgb, var(--mq-c) 20%, var(--bg3)); border-color: var(--mq-c); color: #fff;
  box-shadow: 0 0 26px color-mix(in srgb, var(--mq-c) 40%, transparent); transform: translateY(-2px); }
.mq .miejsce-icon { font-size: 1.15rem; }
@keyframes mqMove { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* kolory sekcji */
#unikalne { background: radial-gradient(1000px 460px at 50% 0%, rgba(109,187,69,0.11), transparent 70%), var(--bg2); }
#jak-dziala { background: radial-gradient(900px 420px at 50% 0%, rgba(245,200,66,0.12), transparent 70%), var(--bg); }
#jak-dziala .section-label { color: var(--gold); }
#jak-dziala .section-title strong { color: #6ee7d8; }
#pobierz { background: radial-gradient(1100px 480px at 50% 0%, rgba(245,200,66,0.10), transparent 70%), var(--bg); }
#pobierz .section-label { color: var(--gold); }
#ebook { background: radial-gradient(900px 520px at 22% 50%, rgba(214,160,90,0.13), transparent 70%), linear-gradient(180deg, #15120b, #0f0d09) !important; }
#ebook .section-label { color: #d9a45b; }
#ebook .section-title strong { color: #e6b877; }

/* stopka i rejestracja */
.footer-privacy { font-family: 'DM Mono', monospace; font-size: 0.7rem; letter-spacing: 0.12em; color: var(--text3); text-decoration: none; }
.footer-privacy:hover { color: var(--green); }
.auth-legal { margin: 0.8rem 0 0; font-size: 0.78rem; color: var(--text3); text-align: center; line-height: 1.5; }
.auth-legal a { color: var(--green); }

@media (prefers-reduced-motion: reduce) {
  .phone, .hero-phone .phone { animation: none; }
  .q-text .qw { opacity: 1; filter: none; transform: none; transition: none; }
}

/* ── TELEFON I TABLET (2026-09-29): pola dotyku min. ~44 px + drobny tekst min. 12 px ── */
.card-title-sub { color: var(--text2); }
@media (max-width: 1024px), (pointer: coarse) {
  .hero-eyebrow, .section-label, .q-src, .card-badge, .footer-privacy, .place-counter, .place-code,
  .why-places-btn, .card-title-sub, .arsenal-label, .arsenal-avail, .arsenal-status { font-size: 0.75rem; }
  .nav-mobile-btn { min-width: 44px; min-height: 44px; justify-content: center; align-items: center; padding: 10px; margin-right: -10px; }
  .why-places-btn { min-height: 40px; padding-top: 0.4rem; padding-bottom: 0.4rem; }
  .footer-privacy { display: inline-block; padding: 0.8rem 0; }
}
/* podpisy w scenach kafelków: nigdy poza kafelek — za długi łamie się do 2. linii */
.holo-stage .place-code { max-width: calc(100% - 20px); white-space: normal; flex-wrap: wrap; line-height: 1.35; }
@media (max-width: 400px) {
  .hero-eyebrow { letter-spacing: 0.18em; }
  .card-cta { letter-spacing: 0.06em; padding-left: 1rem; padding-right: 1rem; }
}

/* ── ZŁAM KOD (2026-09-29): interaktywne demo metody — klimat terminala/włamania ── */
#zlam-kod { padding: 4.5rem 0 2rem; }
.zk { max-width: 880px; margin: 0 auto; }
.zk-places { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.1rem; }
.zk-place {
  display: inline-flex; align-items: center; gap: 0.55rem; min-height: 46px; padding: 0.55rem 1.1rem;
  background: var(--bg3); border: 1px solid var(--border); border-radius: 4px;
  font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.06em; color: var(--text2);
  cursor: pointer; transition: border-color .25s, color .25s, background .25s, transform .25s, box-shadow .25s;
}
.zk-place::before { content: '>'; color: var(--text3); margin-right: 0.1rem; transition: color .25s; }
.zk-place:hover { border-color: var(--border-green); color: var(--text); transform: translateY(-2px); }
.zk-place:hover::before, .zk-place.active::before { color: var(--green); }
.zk-place.active { border-color: var(--green); color: var(--green2); background: var(--green3); box-shadow: 0 0 22px rgba(109,187,69,0.2), inset 0 0 12px rgba(109,187,69,0.08); }
.zk-ico { font-size: 1.1rem; line-height: 1; }

.zk-term {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(109,187,69,0.10), transparent 60%), #070b07;
  border: 1px solid var(--border-green); border-radius: 6px;
  box-shadow: 0 0 40px rgba(109,187,69,0.07), inset 0 0 60px rgba(0,0,0,0.6);
  font-family: 'DM Mono', monospace;
}
/* linie CRT + delikatne migotanie */
.zk-term::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.22) 0 1px, transparent 1px 3px);
  animation: zkFlicker 5s infinite steps(1);
}
@keyframes zkFlicker { 0%,100% { opacity: 1; } 47% { opacity: 0.85; } 48% { opacity: 1; } 83% { opacity: 0.9; } }
.zk-top {
  position: relative; z-index: 2; display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0.9rem;
  border-bottom: 1px solid rgba(109,187,69,0.18); font-size: 0.75rem; letter-spacing: 0.06em; background: rgba(109,187,69,0.04);
}
.zk-led { width: 8px; height: 8px; border-radius: 50%; background: var(--text3); flex: 0 0 auto; }
.zk-term.live .zk-led { background: #e5484d; box-shadow: 0 0 8px #e5484d; animation: zkBlink 1.2s steps(1) infinite; }
.zk-term.cracked .zk-led { background: var(--green); box-shadow: 0 0 10px var(--green); animation: none; }
.zk-where { color: var(--green2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.zk-where b { color: var(--text3); font-weight: 400; }
.zk-count { color: var(--green); margin-left: auto; white-space: nowrap; }
.zk-sound {
  min-width: 40px; min-height: 36px; background: none; border: 1px solid rgba(109,187,69,0.25); border-radius: 4px;
  font-size: 0.95rem; cursor: pointer; color: var(--text); transition: border-color .2s, opacity .2s;
}
.zk-sound:hover { border-color: var(--green); }
.zk-sound[aria-pressed="false"] { opacity: 0.45; }

.zk-body { position: relative; z-index: 2; min-height: 280px; padding: 1.4rem 1.4rem 1rem; display: flex; flex-direction: column; justify-content: center; gap: 1.1rem; }
.zk-idle { color: var(--text2); text-align: center; font-size: 0.9rem; }
.zk-caret { display: inline-block; width: 0.55em; height: 1em; margin-left: 3px; vertical-align: -2px; background: var(--green); box-shadow: 0 0 8px var(--green); animation: zkBlink 1s steps(1) infinite; }
@keyframes zkBlink { 50% { opacity: 0; } }

/* log włamania */
.zk-log { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; color: var(--green2); text-shadow: 0 0 6px rgba(109,187,69,0.45); }
.zk-log .dim { color: var(--text3); text-shadow: none; }
.zk-log .ok { color: var(--green); }
.zk-log .warn { color: var(--gold); text-shadow: 0 0 6px rgba(245,200,66,0.35); }
.zk-bar { letter-spacing: 0; }

.zk-pair { display: flex; align-items: stretch; justify-content: center; gap: 0.9rem; }
.zk-plus { align-self: center; color: var(--gold); font-size: 1.2rem; text-shadow: 0 0 8px rgba(245,200,66,0.5); }
.zk-word {
  position: relative; flex: 0 1 270px; display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
  padding: 1.35rem 1rem 0.9rem; background: rgba(109,187,69,0.03); border: 1px solid rgba(109,187,69,0.16); border-radius: 4px;
  cursor: pointer; color: var(--text); text-align: center; font-family: 'DM Mono', monospace; transition: border-color .25s, box-shadow .25s;
}
.zk-word:hover { border-color: var(--border-green); }
.zk-word.speaking { border-color: var(--green); box-shadow: 0 0 18px rgba(109,187,69,0.3), inset 0 0 14px rgba(109,187,69,0.08); }
.zk-tag { position: absolute; top: 0.4rem; left: 0.6rem; font-size: 0.68rem; letter-spacing: 0.08em; color: var(--text3); }
.zk-word.done .zk-tag { color: var(--green); }
.zk-de { font-weight: 500; font-size: 1.15rem; color: var(--green2); letter-spacing: 0.02em; min-height: 1.4em; text-shadow: 0 0 10px rgba(109,187,69,0.5); }
.zk-ph { font-style: normal; font-size: 0.75rem; color: var(--text3); }
.zk-pl { font-family: 'Outfit', sans-serif; font-size: 0.9rem; color: var(--text2); }
.zk-ph, .zk-pl { opacity: 0; transition: opacity .4s; }
.zk-word.done .zk-ph, .zk-word.done .zk-pl { opacity: 1; }
.zk-s { flex-basis: 100%; max-width: 580px; margin: 0 auto; border-color: rgba(245,200,66,0.28); background: rgba(245,200,66,0.03); }
.zk-s .zk-tag { color: rgba(245,200,66,0.5); }
.zk-s.done .zk-tag { color: var(--gold); }
.zk-s .zk-de { color: var(--text); font-size: 1.25rem; text-shadow: 0 0 10px rgba(232,228,218,0.25); }
.zk-dec { color: var(--green); opacity: 0.75; }
.zk-hide { opacity: 0; }

.zk-foot { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: 0 1rem 1rem; min-height: 3.2rem; }
.zk-next, .zk-btn {
  min-height: 44px; padding: 0.6rem 1.3rem; border-radius: 3px; cursor: pointer;
  font-family: 'DM Mono', monospace; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green); color: #0a0f0a; border: 1px solid var(--green); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; transition: filter .2s, transform .2s, box-shadow .2s;
  box-shadow: 0 0 16px rgba(109,187,69,0.25);
}
.zk-next:hover, .zk-btn:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 0 24px rgba(109,187,69,0.4); }
.zk-btn.ghost { background: none; color: var(--green2); border-color: var(--border-green); box-shadow: none; }
.zk-next[hidden], .zk-sound[hidden] { display: none; }

/* finał */
.zk-end { text-align: center; display: flex; flex-direction: column; gap: 0.9rem; align-items: center; }
.zk-glitch { position: relative; font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 500; letter-spacing: 0.18em; color: var(--green); text-shadow: 0 0 14px rgba(109,187,69,0.7); }
.zk-glitch::before, .zk-glitch::after { content: attr(data-text); position: absolute; inset: 0; opacity: 0.8; }
.zk-glitch::before { color: #ff2d55; transform: translate(-2px, 0); clip-path: inset(0 0 55% 0); animation: zkGl1 1.6s infinite steps(2); mix-blend-mode: screen; }
.zk-glitch::after { color: #2de2ff; transform: translate(2px, 0); clip-path: inset(50% 0 0 0); animation: zkGl2 1.9s infinite steps(2); mix-blend-mode: screen; }
@keyframes zkGl1 { 0%,86% { transform: translate(0); opacity: 0; } 88% { transform: translate(-3px, -1px); opacity: .8; } 92% { transform: translate(2px, 1px); } 96%,100% { opacity: 0; } }
@keyframes zkGl2 { 0%,80% { transform: translate(0); opacity: 0; } 83% { transform: translate(3px, 1px); opacity: .8; } 88% { transform: translate(-2px, 0); } 92%,100% { opacity: 0; } }
.zk-end-sub { font-size: 0.78rem; color: var(--text3); letter-spacing: 0.08em; }
.zk-end-list { list-style: none; margin: 0.2rem 0 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; text-align: left; }
.zk-end-list li { font-size: 0.92rem; color: var(--text); }
.zk-end-list li::before { content: '[✓] '; color: var(--green); }
.zk-end-list li small { display: block; margin-left: 2.6em; font-family: 'Outfit', sans-serif; font-size: 0.8rem; color: var(--text3); }
.zk-end-p { font-family: 'Outfit', sans-serif; color: var(--text2); font-size: 0.95rem; margin: 0.3rem 0 0; }
.zk-end-btns { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; }

@media (max-width: 600px) {
  #zlam-kod { padding-top: 3rem; }
  .zk-places { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.45rem; }
  .zk-place { flex-direction: column; gap: 0.3rem; padding: 0.6rem 0.3rem; font-size: 0.75rem; letter-spacing: 0.02em; text-align: center; line-height: 1.2; }
  .zk-place::before { display: none; }
  .zk-ico { font-size: 1.3rem; }
  .zk-body { padding: 1.2rem 0.9rem 0.8rem; min-height: 320px; }
  .zk-pair { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .zk-word { flex-basis: auto; }
  .zk-de { font-size: 1.05rem; }
  .zk-s .zk-de { font-size: 1.1rem; }
  .zk-log { font-size: 0.78rem; }
  .zk-where b { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .zk-caret, .zk-term::after, .zk-term.live .zk-led { animation: none; }
  .zk-glitch::before, .zk-glitch::after { display: none; }
}
/* obraz rzeczownika — kreska jak w holo-scenie */
.zk-img { width: 64px; height: 64px; margin: 0.1rem 0 0.2rem; filter: drop-shadow(0 0 8px rgba(109,187,69,0.7)); }
.zk-img path { fill: none; stroke: var(--green2); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 600px) { .zk-img { width: 52px; height: 52px; } }


/* ── METODA GEFERTA — jeden przycisk, kafelki rozwijają się pod nim (02.10) ── */
.metoda-toggle { text-decoration: none; position: relative; display: flex; flex-direction: column; align-items: center; gap: .45rem; width: 100%; max-width: 720px; margin: 0 auto; padding: 2.2rem 3.5rem; background: linear-gradient(180deg, rgba(109,187,69,0.10), rgba(109,187,69,0.03)); border: 1px solid var(--border-green); border-radius: 18px; color: var(--text); cursor: pointer; font-family: 'Outfit', sans-serif; transition: border-color .25s, box-shadow .25s, background .25s; }
.metoda-toggle:hover .metoda-toggle-arrow { transform: translate(4px, -50%); }
.metoda-toggle:hover, .metoda-toggle:focus-visible { border-color: var(--green); box-shadow: 0 0 40px rgba(109,187,69,0.18); outline: none; }
.metoda-toggle-label { font-size: clamp(1.5rem, 3.2vw, 2.1rem); font-weight: 700; letter-spacing: .02em; }
.metoda-toggle-sub { font-family: 'DM Mono', monospace; font-size: .8rem; color: var(--green2); letter-spacing: .04em; }
.metoda-toggle-arrow { position: absolute; right: 1.6rem; top: 50%; transform: translateY(-50%); font-size: 1.4rem; color: var(--green); transition: transform .35s ease; }
.metoda-toggle[aria-expanded="true"] .metoda-toggle-arrow { transform: translateY(-50%) rotate(180deg); }
.metoda-toggle[aria-expanded="true"] .metoda-toggle-sub { visibility: hidden; }
.metoda-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s ease; }
.metoda-wrap.open { grid-template-rows: 1fr; }
.metoda-wrap-in { min-height: 0; overflow: hidden; }
.metoda-wrap:not(.open) .metoda-wrap-in { visibility: hidden; transition: visibility 0s .6s; }
.metoda-wrap.open .features-grid { padding-top: 1.6rem; }
@media (max-width: 600px) { .metoda-toggle { padding: 1.8rem 2.8rem; } .metoda-toggle-arrow { right: 1.1rem; } }
@media (prefers-reduced-motion: reduce) { .metoda-wrap, .metoda-toggle-arrow { transition: none; } }

/* aktywna pozycja w menu (podstrony) */
.nav-links a[aria-current="page"] { color: var(--green); }

.eb-soon { display: none; margin-top: 1rem; padding: 0.7rem 1.1rem; border: 1px solid rgba(245,200,66,0.45); border-radius: 8px;
  background: var(--gold2); color: var(--gold); font-family: 'DM Mono', monospace; font-size: 0.85rem; letter-spacing: 0.05em; width: fit-content; }
.eb-soon.show { display: block; animation: ebSoonIn .35s ease both; }
@keyframes ebSoonIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }