/* ============================================================
   ZMIENNE
   ============================================================ */
:root {
  --bg:         #09090f;
  --bg2:        #0e0e18;
  --bg-card:    #12121e;
  --bg-card-h:  #1a1a2a;
  --border:     #1e1e32;
  --text:       #e8e8f0;
  --text-dim:   #8888a8;
  --text-soft:  #c0c0d8;
  --accent:     #4af0c0;
  --accent2:    #60eaff;
  --accent-dim: #2a9070;
  --accent-glow:rgba(74,240,192,0.14);
  --warm:       #f0c040;
  --red:        #ff6b6b;
  --purple:     #a58cff;
  --font:       'DM Sans', sans-serif;
  --mono:       'Space Mono', monospace;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body {
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
.container { max-width:1060px; margin:0 auto; padding:0 2rem; }

/* ============================================================
   TLO CANVAS
   ============================================================ */
#canvas-bg {
  position:fixed; top:0; left:0;
  width:100vw; height:100vh;
  z-index:0; pointer-events:none;
}
nav, main, footer { position:relative; z-index:1; }

/* ============================================================
   SCROLL REVEAL - wejscia sekcji
   ============================================================ */
.reveal {
  opacity:0;
  transform:translateY(28px);
  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; }

/* ============================================================
   NAWIGACJA
   ============================================================ */
.nav {
  position:fixed; top:0; left:0; right:0;
  z-index:50;
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  background:rgba(9,9,15,0.78);
  border-bottom:1px solid rgba(255,255,255,0.055);
}
.nav-inner {
  max-width:1180px; margin:0 auto;
  padding:0.85rem 2rem;
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
}
.brand {
  display:flex; align-items:center; gap:0.75rem;
  font-weight:700; font-size:1.05rem; letter-spacing:-0.02em;
}
.brand-mark {
  width:34px; height:34px;
  flex-shrink:0; display:block;
  /* subtelna poswiatą pod logo w nav */
  filter:drop-shadow(0 0 6px rgba(74,240,192,0.18));
}

/* ============================================================
   OWIJACZ AVATARA NAD KARTA HUD
   ============================================================ */
.hud-wrapper {
  position:relative;
  /* padding-top robi miejsce na avatar wystajacy nad karta */
  padding-top:100px;
  animation:card-appear 0.9s ease-out both;
}

.hero-avatar {
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:190px; height:190px;
  object-fit:contain;
  /* delikatna poswiatą pod helme */
  filter:
    drop-shadow(0 0 18px rgba(74,240,192,0.22))
    drop-shadow(0 8px 32px rgba(0,0,0,0.7));
  animation:avatar-float 5s ease-in-out infinite;
  z-index:10;
  pointer-events:none;
}

@keyframes avatar-float {
  0%,100% { transform:translateX(-50%) translateY(0px);   }
  50%      { transform:translateX(-50%) translateY(-10px); }
}
.nav-links { display:flex; align-items:center; gap:0.25rem; }
.nav-links a {
  font-size:0.9rem; color:var(--text-dim);
  padding:0.45rem 0.85rem; border-radius:8px;
  transition:color 0.2s, background 0.2s;
}
.nav-links a:hover { color:var(--text); background:rgba(255,255,255,0.05); }
.nav-cta {
  font-weight:600 !important; color:var(--bg) !important;
  background:var(--accent) !important;
  padding:0.45rem 1.1rem !important; border-radius:8px !important;
  transition:opacity 0.2s, transform 0.2s !important;
}
.nav-cta:hover { opacity:0.9 !important; transform:translateY(-1px) !important; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  padding:9rem 0 6rem; position:relative; overflow:hidden;
}
.hero::before {
  content:''; position:absolute; top:-200px; left:50%;
  transform:translateX(-50%);
  width:900px; height:900px;
  background:radial-gradient(circle,rgba(74,240,192,0.07) 0%,transparent 65%);
  pointer-events:none;
}
.hero-grid {
  display:grid; grid-template-columns:1fr 460px;
  gap:4rem; align-items:center;
}
.hero-copy { position:relative; z-index:2; }
.badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-family:var(--mono); font-size:0.71rem;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent);
  border:1px solid rgba(74,240,192,0.3);
  padding:0.38rem 0.9rem; border-radius:100px;
  margin-bottom:1.8rem;
  background:rgba(74,240,192,0.05);
}
.badge-dot {
  width:6px; height:6px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
  animation:pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%,100%{ opacity:1; transform:scale(1); }
  50%    { opacity:0.5; transform:scale(0.75); }
}
h1 {
  font-size:clamp(1.75rem,3.4vw,2.9rem);
  font-weight:700; line-height:1.12;
  margin-bottom:1.6rem; letter-spacing:-0.03em;
}
h1 .hl {
  background:linear-gradient(130deg,var(--accent) 0%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.hero-sub {
  font-size:1.05rem; color:var(--text-soft);
  max-width:560px; margin-bottom:1.4rem; line-height:1.8;
}
.hero-sub strong { color:var(--text); }

/* MANIFEST BOX - twarda definicja KreionAI */
.manifest-box {
  display:flex; align-items:center; flex-wrap:wrap;
  gap:0.7rem;
  margin:1.6rem 0 1.4rem;
  padding:1.1rem 1.5rem;
  background:linear-gradient(135deg,
    rgba(74,240,192,0.08) 0%,
    rgba(96,234,255,0.05) 100%);
  border:1px solid rgba(74,240,192,0.35);
  border-left:3px solid var(--accent);
  border-radius:10px;
  position:relative;
  overflow:hidden;
  box-shadow:0 0 24px rgba(74,240,192,0.08);
}
.manifest-box::before {
  content:''; position:absolute; top:0; right:0;
  width:60px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent));
}
.manifest-brand {
  font-family:var(--mono); font-size:1.05rem;
  font-weight:700; color:var(--text);
  letter-spacing:-0.01em;
}
.manifest-eq {
  font-family:var(--mono); font-size:1.4rem;
  font-weight:700; color:var(--accent);
  text-shadow:0 0 12px rgba(74,240,192,0.4);
}
.manifest-def {
  font-family:var(--mono); font-size:0.92rem;
  color:var(--text-soft);
  line-height:1.5;
  flex:1; min-width:200px;
  letter-spacing:0.01em;
}
.manifest-def strong {
  color:var(--accent);
  font-weight:700;
  text-shadow:0 0 8px rgba(74,240,192,0.3);
}

.hero-kicker {
  font-family:var(--mono); font-size:0.82rem;
  color:var(--warm); margin-bottom:0.7rem; letter-spacing:0.02em;
}
.hero-powered {
  font-size:0.82rem; color:var(--text-dim);
  margin-bottom:2.2rem;
}
.hero-powered strong { color:var(--text-soft); }
.cta-row { display:flex; gap:0.9rem; flex-wrap:wrap; }
.btn {
  font-family:var(--font); font-size:1rem; font-weight:600;
  padding:0.85rem 1.9rem; border-radius:10px;
  cursor:pointer; text-decoration:none;
  transition:transform 0.2s,box-shadow 0.2s,opacity 0.2s,border-color 0.2s,background 0.2s;
  display:inline-block;
}
.btn-primary { background:var(--accent); color:#06100d; border:none; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 10px 36px rgba(74,240,192,0.32); }
.btn-secondary { background:transparent; color:var(--text); border:1px solid var(--border); }
.btn-secondary:hover { border-color:var(--accent-dim); background:var(--bg-card); }

/* ============================================================
   KARTA HUD
   ============================================================ */
.memory-card {
  background:linear-gradient(180deg,rgba(74,240,192,0.06),transparent 28%),rgba(13,14,24,0.85);
  border:1px solid rgba(74,240,192,0.2); border-radius:24px; padding:1.4rem;
  box-shadow:0 32px 96px rgba(0,0,0,0.5),inset 0 0 0 1px rgba(255,255,255,0.025),0 0 60px rgba(74,240,192,0.06);
  position:relative;
}
@keyframes card-appear {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.memory-card::before {
  content:''; position:absolute; inset:-1px;
  background:radial-gradient(circle at 50% 0,rgba(74,240,192,0.12),transparent 45%);
  pointer-events:none;
}
.hud-top {
  display:flex; align-items:center; justify-content:space-between;
  color:var(--text-dim); font-family:var(--mono); font-size:0.7rem;
  margin-bottom:1rem; position:relative; z-index:1;
}
.led { display:inline-flex; align-items:center; gap:0.45rem; color:var(--accent); }
.led::before {
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 14px var(--accent);
  animation:led-blink 2.4s ease-in-out infinite;
}
@keyframes led-blink { 0%,90%,100%{opacity:1;} 95%{opacity:0.2;} }

.ring {
  height:270px; border-radius:20px;
  background:
    radial-gradient(circle at center,rgba(96,234,255,0.18) 0 2px,transparent 3px),
    repeating-radial-gradient(circle at center,transparent 0 33px,rgba(74,240,192,0.07) 34px,transparent 35px),
    linear-gradient(135deg,rgba(255,255,255,0.03),rgba(255,255,255,0.004));
  border:1px solid rgba(255,255,255,0.055);
  position:relative; overflow:hidden;
}
.ring::before {
  content:''; position:absolute; width:200px; height:200px; left:50%; top:50%;
  transform:translate(-50%,-50%); border-radius:50%;
  background:conic-gradient(
    from 20deg, var(--accent) 0 48deg, transparent 48deg 72deg,
    var(--purple) 72deg 120deg, transparent 120deg 152deg,
    var(--accent2) 152deg 210deg, transparent 210deg 250deg,
    var(--warm) 250deg 294deg, transparent 294deg 360deg
  );
  opacity:0.7;
  mask:radial-gradient(circle,transparent 0 76px,#000 77px 82px,transparent 83px);
  -webkit-mask:radial-gradient(circle,transparent 0 76px,#000 77px 82px,transparent 83px);
  animation:spin 10s linear infinite;
}
.ring::after {
  content:''; position:absolute; width:140px; height:140px; left:50%; top:50%;
  transform:translate(-50%,-50%); border-radius:50%;
  border:1px solid rgba(96,234,255,0.25);
  box-shadow:0 0 50px rgba(96,234,255,0.14),inset 0 0 44px rgba(74,240,192,0.09);
}
@keyframes spin { to { transform:translate(-50%,-50%) rotate(360deg); } }
.ring-label {
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; pointer-events:none; z-index:2;
}
.ring-title {
  font-size:2.1rem; font-weight:700; letter-spacing:0.1em;
  animation:title-glow 4s ease-in-out infinite;
}
@keyframes title-glow {
  0%,100%{ text-shadow:0 0 28px rgba(96,234,255,0.6); }
  50%    { text-shadow:0 0 48px rgba(96,234,255,0.9),0 0 80px rgba(74,240,192,0.4); }
}
.ring-sub {
  font-family:var(--mono); font-size:0.65rem;
  color:var(--accent); letter-spacing:0.15em; margin-top:0.5rem;
}
.hud-lines { margin-top:1rem; display:grid; gap:0.55rem; position:relative; z-index:1; }
.hud-line {
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--mono); font-size:0.73rem; color:var(--text-dim);
  padding:0.7rem 0.9rem;
  border:1px solid rgba(255,255,255,0.055); border-radius:10px;
  background:rgba(255,255,255,0.022);
  transition:background 0.3s,border-color 0.3s;
}
.hud-line:hover { background:rgba(74,240,192,0.05); border-color:rgba(74,240,192,0.18); }
.hud-line strong { color:var(--accent); font-weight:400; }
/* flash efekt przy odswiezaniu wartosci w HUD */
.hud-line strong.flash {
  animation:val-flash 0.4s ease;
}
@keyframes val-flash {
  0%  { color:var(--text); opacity:0.3; }
  50% { color:#fff; opacity:1; }
  100%{ color:var(--accent); opacity:1; }
}

/* ============================================================
   SEKCJE
   ============================================================ */
.section { padding:7rem 0; }
.section.alt { background:var(--bg2); }
.section-label {
  font-family:var(--mono); font-size:0.7rem;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--accent); margin-bottom:1rem; display:block;
}
h2 {
  font-size:clamp(1.7rem,3vw,2.3rem);
  font-weight:700; line-height:1.18;
  margin-bottom:1.3rem; letter-spacing:-0.02em;
}
h2 .hl {
  background:linear-gradient(130deg,var(--accent) 0%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-body {
  font-size:1.05rem; color:var(--text-dim); max-width:680px; line-height:1.8;
}
.section-body + .section-body { margin-top:1.1rem; }
.section-body strong { color:var(--text-soft); }

/* ============================================================
   EKG separator
   ============================================================ */
.ekg-wrap { width:100%; height:28px; margin:2.2rem 0 2.8rem; overflow:hidden; }
.ekg-wrap canvas { display:block; width:100%; height:100%; }

/* ============================================================
   VS CARDS - z licznikami sesji
   ============================================================ */
.vs-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:1.5rem;
}
.vs-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:2.2rem; position:relative; overflow:hidden;
}
.vs-card.old { border-color:#2a1420; }
.vs-card.new { border-color:var(--accent-dim); }

/* mini-header z licznikiem */
.vs-counter-bar {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.2rem;
  padding:0.5rem 0.7rem; border-radius:8px;
  font-family:var(--mono); font-size:0.68rem;
}
.vs-card.old .vs-counter-bar {
  background:rgba(255,107,107,0.07); border:1px solid rgba(255,107,107,0.15);
}
.vs-card.new .vs-counter-bar {
  background:rgba(74,240,192,0.06); border:1px solid rgba(74,240,192,0.18);
}
.vs-counter-label { color:var(--text-dim); letter-spacing:0.08em; text-transform:uppercase; }
.vs-counter-val {
  font-weight:700; letter-spacing:0.05em;
}
.vs-card.old .vs-counter-val { color:var(--red); }
.vs-card.new .vs-counter-val { color:var(--accent); }

.vs-tag {
  font-family:var(--mono); font-size:0.68rem; letter-spacing:0.12em; text-transform:uppercase;
  margin-bottom:0.8rem; display:inline-block; padding:0.22rem 0.65rem; border-radius:4px;
}
.vs-card.old .vs-tag { color:var(--red); background:rgba(255,107,107,0.08); }
.vs-card.new .vs-tag { color:var(--accent); background:rgba(74,240,192,0.08); }
.vs-card h3 { font-size:1.15rem; font-weight:700; margin-bottom:1.2rem; }
.vs-card ul { list-style:none; display:grid; gap:0.65rem; }
.vs-card ul li {
  font-size:0.95rem; color:var(--text-dim);
  padding-left:1.3rem; position:relative; line-height:1.55;
}
.vs-card.old ul li::before { content:'✗'; position:absolute; left:0; color:var(--red); }
.vs-card.new ul li::before { content:'✓'; position:absolute; left:0; color:var(--accent); }

/* ============================================================
   REKALL - radar deco
   ============================================================ */
.rekall-layout {
  display:grid; grid-template-columns:1fr 160px;
  gap:3rem; align-items:start; max-width:900px;
}
.radar-deco { width:150px; height:150px; position:relative; flex-shrink:0; margin-top:0.5rem; }
.radar-deco canvas { display:block; }

/* ============================================================
   CYTAT - typewriter
   ============================================================ */
.quote-section {
  padding:5rem 0; text-align:center;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:var(--bg2);
}
.quote-text {
  font-size:clamp(1.25rem,2.4vw,1.65rem);
  font-weight:400; line-height:1.65;
  color:var(--text-soft); max-width:820px;
  margin:0 auto; font-style:italic;
  min-height:4em;
}
.quote-text .hl {
  background:linear-gradient(130deg,var(--accent) 0%,var(--accent2) 100%);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; font-style:normal;
}
/* kursor typewritera */
.tw-cursor {
  display:inline-block; width:2px; height:1em;
  background:var(--accent); vertical-align:text-bottom;
  animation:tw-blink 0.75s step-end infinite;
  margin-left:2px;
}
@keyframes tw-blink { 0%,100%{opacity:1;} 50%{opacity:0;} }

/* ============================================================
   SPLIT + PANEL + DNA
   ============================================================ */
.split {
  display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start;
}
.panel {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:2rem;
}
.panel.highlight {
  border-color:rgba(74,240,192,0.22);
  background:linear-gradient(160deg,rgba(74,240,192,0.04),transparent 60%),var(--bg-card);
}
/* mini naglowek panelu */
.panel-header {
  display:flex; align-items:center; gap:0.6rem;
  margin-bottom:1.2rem;
  padding-bottom:0.8rem;
  border-bottom:1px solid rgba(255,255,255,0.055);
  font-family:var(--mono); font-size:0.68rem;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--text-dim);
}
.panel-header-dot {
  width:6px; height:6px; border-radius:50%;
  animation:pulse-dot 2s ease-in-out infinite;
}
.panel-header-dot.teal  { background:var(--accent); box-shadow:0 0 8px var(--accent); }
.panel-header-dot.sky   { background:var(--accent2); box-shadow:0 0 8px var(--accent2); }
.panel-header-dot.warm  { background:var(--warm); box-shadow:0 0 8px var(--warm); }
.panel-header-dot.purp  { background:var(--purple); box-shadow:0 0 8px var(--purple); }
.panel-header-label { color:var(--accent); }

.panel ul { list-style:none; display:grid; gap:0.8rem; }
.panel ul li {
  font-size:0.95rem; color:var(--text-dim);
  padding-left:1.4rem; position:relative; line-height:1.55;
  opacity:0; transform:translateX(-8px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.panel ul li.li-visible {
  opacity:1; transform:translateX(0);
}
.panel ul li::before { content:'→'; position:absolute; left:0; color:var(--accent); font-size:0.85rem; }

.dna-wrap {
  width:100%; height:44px; margin-bottom:0.8rem;
  position:relative; overflow:hidden; border-radius:8px;
  background:rgba(0,0,0,0.25); border:1px solid rgba(74,240,192,0.1);
}
.dna-wrap canvas { display:block; width:100%; height:100%; }

/* code block z terminalem */
.code-block {
  margin-top:2.5rem; padding:0; border-radius:14px;
  background:#07080e; border:1px solid rgba(74,240,192,0.15);
  font-family:var(--mono); font-size:0.86rem; overflow:hidden;
}
.code-titlebar {
  display:flex; align-items:center; gap:0.6rem;
  padding:0.6rem 1rem;
  background:rgba(255,255,255,0.03);
  border-bottom:1px solid rgba(74,240,192,0.1);
}
.code-dot {
  width:8px; height:8px; border-radius:50%;
}
.cd-r { background:#ff6b6b; }
.cd-y { background:#f0c040; }
.cd-g { background:var(--accent); animation:led-blink 2.4s ease-in-out infinite; }
.code-titlebar-label {
  font-size:0.68rem; color:var(--text-dim);
  letter-spacing:0.1em; text-transform:uppercase; margin-left:auto;
}
.code-inner {
  padding:1.4rem 1.6rem; color:#b8ffec; line-height:1.75;
  overflow:hidden;
}
.code-block .code-label {
  color:var(--text-dim); font-size:0.72rem;
  letter-spacing:0.1em; text-transform:uppercase;
  margin-bottom:0.8rem; display:block;
}
.code-block .cu { color:var(--warm); }
.code-block .ca { color:var(--accent2); }
/* migajacy kursor terminala */
.term-cursor {
  display:inline-block; width:8px; height:0.9em;
  background:var(--accent); vertical-align:text-bottom;
  animation:tw-blink 0.9s step-end infinite; margin-left:1px;
}

/* ============================================================
   FEATURES z progress ring i hex bg
   ============================================================ */
.features-wrap { position:relative; }
.hex-stream-bg {
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; opacity:0.06;
  display:flex; gap:2rem; padding:0 1rem;
  user-select:none;
}
.hs-col-bg {
  display:flex; flex-direction:column; gap:4px;
  font-family:var(--mono); font-size:7px;
  line-height:1.6; letter-spacing:0.06em; flex:1; overflow:hidden;
}

.features {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:1.3rem; margin-top:3rem; position:relative; z-index:1;
}
.feature {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:1.6rem; position:relative; overflow:hidden;
  transition:border-color 0.25s,background 0.25s,transform 0.2s;
}
.feature:hover { border-color:rgba(74,240,192,0.22); background:var(--bg-card-h); transform:translateY(-3px); }
/* mini progress ring w rogu */
.feat-ring {
  position:absolute; top:1rem; right:1rem;
  width:28px; height:28px;
}
.feat-ring svg { display:block; }
.feat-ring-track { fill:none; stroke:rgba(255,255,255,0.06); stroke-width:2.5; }
.feat-ring-fill  { fill:none; stroke-width:2.5; stroke-linecap:round;
  transform-origin:50% 50%; transform:rotate(-90deg);
  transition:stroke-dashoffset 1.2s ease;
}
.feature-icon {
  width:44px; height:44px; display:grid; place-items:center;
  border-radius:12px; background:rgba(74,240,192,0.08);
  border:1px solid rgba(74,240,192,0.16);
  margin-bottom:1.1rem; font-size:1.2rem; position:relative; z-index:1;
}
.feature h3 { font-size:1rem; font-weight:700; margin-bottom:0.55rem; }
.feature p  { font-size:0.93rem; color:var(--text-dim); line-height:1.6; }

/* ============================================================
   USE CARDS z hover tagiem
   ============================================================ */
.use-grid {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:1.3rem; margin-top:2.5rem;
}
.use-card {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:1.7rem; position:relative; overflow:hidden;
  transition:border-color 0.25s,background 0.25s;
}
.use-card:hover { border-color:rgba(74,240,192,0.2); background:var(--bg-card-h); }
/* hover tag komentarz */
.use-tag {
  position:absolute; top:0.9rem; right:0.9rem;
  font-family:var(--mono); font-size:0.65rem;
  letter-spacing:0.1em; color:var(--accent);
  opacity:0; transform:translateY(-4px);
  transition:opacity 0.25s,transform 0.25s;
  padding:0.2rem 0.5rem; border-radius:4px;
  background:rgba(74,240,192,0.08);
  border:1px solid rgba(74,240,192,0.2);
}
.use-card:hover .use-tag { opacity:1; transform:translateY(0); }
.use-card h3 { font-size:1.05rem; font-weight:700; margin-bottom:0.6rem; }
.use-card p  { font-size:0.93rem; color:var(--text-dim); line-height:1.65; }

/* ============================================================
   STATYSTYKI z animowanymi licznikami
   ============================================================ */
.stats-row {
  display:grid; grid-template-columns:repeat(4,1fr);
  gap:1.2rem; margin-top:3rem;
}
.stat-item {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:18px; padding:1.7rem 1.4rem; text-align:center;
  position:relative; overflow:hidden;
}
/* delikatna glow linia na dole statystyki przy hover */
.stat-item::after {
  content:''; position:absolute; bottom:0; left:10%; right:10%; height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  opacity:0; transition:opacity 0.3s;
}
.stat-item:hover::after { opacity:1; }
.stat-item h3 {
  font-family:var(--mono); font-size:2.2rem;
  color:var(--accent); line-height:1; margin-bottom:0.5rem; font-weight:400;
}
.stat-item p { font-size:0.88rem; color:var(--text-dim); line-height:1.4; }

.vbars-wrap {
  display:flex; gap:3px; align-items:flex-end;
  height:36px; margin-top:2rem; padding:0 4px; overflow:hidden;
}
.vbar {
  flex:1; border-radius:2px 2px 0 0; transition:height 0.6s ease; min-width:4px;
}

/* ============================================================
   EARLY ACCESS z obracajacym sie border glow
   ============================================================ */
.ea-section { padding:8rem 0; text-align:center; }
.ea-outer {
  max-width:700px; margin:0 auto; position:relative; border-radius:28px;
  padding:2px; /* miejsce na glow border */
}
/* obracajacy sie gradient border - wolno, z poswiatą */
.ea-outer::before {
  content:''; position:absolute; inset:-6px; border-radius:32px;
  background:conic-gradient(
    from 0deg,
    rgba(74,240,192,0.00)  0deg,
    rgba(74,240,192,0.32)  55deg,
    rgba(96,234,255,0.42) 110deg,
    rgba(165,140,255,0.28) 175deg,
    rgba(240,192,64,0.20)  235deg,
    rgba(74,240,192,0.08)  290deg,
    rgba(74,240,192,0.00)  360deg
  );
  filter:blur(8px);
  animation:border-spin 28s linear infinite;
  z-index:0;
}
/* cienka twarda linia bordera */
.ea-outer::after {
  content:''; position:absolute; inset:0; border-radius:28px;
  background:conic-gradient(
    from 0deg,
    rgba(74,240,192,0.00)  0deg,
    rgba(74,240,192,0.22)  55deg,
    rgba(96,234,255,0.30) 110deg,
    rgba(165,140,255,0.18) 175deg,
    rgba(240,192,64,0.12)  235deg,
    rgba(74,240,192,0.04)  290deg,
    rgba(74,240,192,0.00)  360deg
  );
  animation:border-spin 28s linear infinite;
  z-index:0;
}
@keyframes border-spin { to { transform:rotate(360deg); } }
.ea-box {
  position:relative; z-index:2;
  background:radial-gradient(circle at 50% 0,rgba(74,240,192,0.1),transparent 44%),var(--bg-card);
  border-radius:27px; padding:3.2rem;
}
.ea-box h2 { margin-bottom:0.8rem; }
.ea-box > p {
  color:var(--text-dim); font-size:1.05rem;
  max-width:540px; margin:0 auto 2rem; line-height:1.75;
}
.ea-form {
  display:flex; gap:0.8rem; justify-content:center;
  flex-wrap:wrap; margin-bottom:1.2rem;
}
.ea-form input {
  min-width:260px; flex:1; font-family:var(--font);
  font-size:1rem; padding:0.9rem 1.2rem; border-radius:10px;
  border:1px solid var(--border); background:#08090e;
  color:var(--text); outline:none; transition:border-color 0.2s;
}
.ea-form input:focus { border-color:rgba(74,240,192,0.4); }
.ea-form button {
  font-family:var(--font); font-size:1rem; font-weight:700;
  padding:0.9rem 1.6rem; border-radius:10px;
  border:none; background:var(--accent); color:#06100d;
  cursor:pointer; transition:opacity 0.2s,transform 0.2s;
}
.ea-form button:hover { opacity:0.9; transform:translateY(-1px); }
.ea-note { font-size:0.83rem; color:var(--text-dim); }

/* --- Panel sukcesu po zapisie (swiezy zapis w tej sesji) --- */
.ea-success-panel {
  margin-top:1.6rem;
  padding:2.2rem 1.8rem;
  background:linear-gradient(180deg,
    rgba(74,240,192,0.08) 0%,
    rgba(74,240,192,0.03) 100%);
  border:1px solid rgba(74,240,192,0.35);
  border-radius:14px;
  text-align:center;
  opacity:0;
  transform:translateY(14px);
  transition:opacity 0.5s ease, transform 0.5s ease;
}
.ea-success-panel.ea-success-visible {
  opacity:1;
  transform:translateY(0);
}
.ea-success-icon {
  width:58px; height:58px;
  margin:0 auto 1.1rem;
  color:var(--accent);
}
.ea-success-icon svg { width:100%; height:100%; }
.ea-check {
  stroke-dasharray:40;
  stroke-dashoffset:40;
  animation:ea-check-draw 0.5s ease 0.35s forwards;
}
@keyframes ea-check-draw {
  to { stroke-dashoffset:0; }
}
.ea-success-title {
  font-size:1.3rem; font-weight:700;
  color:var(--text);
  margin-bottom:0.6rem;
  letter-spacing:-0.01em;
}
.ea-success-text {
  font-size:0.96rem;
  color:var(--text-soft);
  line-height:1.7;
  max-width:420px;
  margin:0 auto;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top:1px solid var(--border);
  padding:2.5rem 0; color:var(--text-dim); font-size:0.87rem;
}
.footer-inner {
  display:flex; justify-content:space-between;
  align-items:center; gap:1rem; flex-wrap:wrap;
}
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-links a { color:var(--accent); transition:opacity 0.2s; }
.footer-links a:hover { opacity:0.75; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* ============================================================
   HAMBURGER MENU
   ============================================================ */
.hamburger {
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:38px; height:38px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; cursor:pointer; padding:0 9px;
  transition:border-color 0.2s, background 0.2s;
}
.hamburger:hover {
  border-color:rgba(74,240,192,0.4);
  background:rgba(74,240,192,0.06);
}
.hamburger span {
  display:block; width:100%; height:2px;
  background:var(--text-dim); border-radius:2px;
  transition:transform 0.3s ease, opacity 0.3s ease, background 0.2s;
  transform-origin:center;
}
.hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); background:var(--accent); }
.hamburger.open span:nth-child(2) { opacity:0; transform:scaleX(0); }
.hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); background:var(--accent); }


/* ============================================================
   TWO ENGINES - Claude + GPT
   ============================================================ */
.engines-visual {
  display:flex; align-items:center; justify-content:center;
  gap:1.5rem; flex-wrap:wrap;
  margin:3rem 0;
}
.engine-card {
  display:flex; flex-direction:column; align-items:center;
  gap:0.7rem;
  padding:2rem 2.4rem;
  background:linear-gradient(180deg, rgba(74,240,192,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border:1px solid rgba(74,240,192,0.2);
  border-radius:16px;
  min-width:200px;
  transition:transform 0.3s, border-color 0.3s, box-shadow 0.3s;
}
.engine-card:hover {
  transform:translateY(-4px);
  box-shadow:0 10px 30px rgba(74,240,192,0.15);
}
.engine-gpt {
  background:linear-gradient(180deg, rgba(96,234,255,0.05) 0%, rgba(255,255,255,0.015) 100%);
  border-color:rgba(96,234,255,0.25);
}
.engine-gpt:hover { box-shadow:0 10px 30px rgba(96,234,255,0.18); }
.engine-icon { width:56px; height:56px; }
.engine-name {
  font-size:1.2rem; font-weight:700; color:var(--text);
  letter-spacing:-0.01em;
}
.engine-tag {
  font-family:var(--mono); font-size:0.74rem;
  letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent);
}
.engine-gpt .engine-tag { color:var(--accent2); }

.engine-switch {
  flex-shrink:0;
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  background:rgba(96,234,255,0.06);
  border:1px solid rgba(96,234,255,0.25);
}
.engine-switch svg {
  width:30px; height:30px;
  animation:engine-pulse 2.4s ease-in-out infinite;
}
@keyframes engine-pulse {
  0%,100% { opacity:0.55; }
  50%     { opacity:1; }
}

.engines-text {
  max-width:760px; margin:0 auto;
}
.engines-text p { margin-bottom:1.1rem; }
.engines-text strong { color:var(--accent); font-weight:600; }

.engines-closer {
  text-align:center; margin:2.5rem auto 0;
  max-width:720px;
  font-style:italic; font-size:1.18rem;
  color:var(--text); letter-spacing:-0.005em;
  padding:1.2rem 0;
  position:relative;
}
.engines-closer::before, .engines-closer::after {
  content:''; position:absolute; left:50%;
  width:90px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:translateX(-50%);
}
.engines-closer::before { top:0; }
.engines-closer::after  { bottom:0; }

@media (max-width:600px){
  .engine-switch { transform:rotate(90deg); }
  .engine-card   { min-width:unset; width:100%; max-width:280px; }
}

/* ============================================================
   BEYOND SOFTWARE - sekcja embedded (przebudowana)
   ============================================================ */
.beyond-section {
  position:relative;
  padding-top:5rem; padding-bottom:5rem;
  background:linear-gradient(180deg,
    transparent 0%,
    rgba(74,240,192,0.025) 50%,
    transparent 100%);
}

.beyond-lead {
  font-size:1.2rem; color:var(--text);
  margin:1rem 0 3rem;
  line-height:1.6;
  max-width:780px;
}

/* Dwa bloki side-by-side */
.beyond-grid {
  display:grid; grid-template-columns:1fr 1fr;
  gap:1.8rem; margin-bottom:3.5rem;
}
.beyond-block {
  background:linear-gradient(180deg,
    rgba(74,240,192,0.05) 0%,
    rgba(255,255,255,0.015) 100%);
  border:1px solid rgba(74,240,192,0.2);
  border-radius:14px; padding:2rem 2.2rem;
  position:relative; overflow:hidden;
  transition:border-color 0.3s, transform 0.3s;
}
.beyond-block:hover {
  border-color:rgba(74,240,192,0.4);
  transform:translateY(-3px);
}
.beyond-block::before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.7;
}
.beyond-block-embedded {
  background:linear-gradient(180deg,
    rgba(240,196,64,0.05) 0%,
    rgba(255,156,122,0.02) 100%);
  border-color:rgba(240,196,64,0.22);
}
.beyond-block-embedded:hover { border-color:rgba(240,196,64,0.45); }
.beyond-block-embedded::before {
  background:linear-gradient(90deg, transparent, var(--warm), transparent);
}

.beyond-block-head {
  display:flex; align-items:center; gap:1rem;
  margin-bottom:1rem;
}
.beyond-block-svg { width:48px; height:48px; flex-shrink:0; }
.beyond-block h3 {
  font-size:1.3rem; margin:0;
  color:var(--text); letter-spacing:-0.01em;
  line-height:1.2;
}
.beyond-block p {
  color:var(--text-dim); line-height:1.8;
  font-size:1rem; margin:0;
}
.beyond-block p strong {
  color:var(--text); font-weight:600;
}
.beyond-block p em {
  color:var(--accent); font-style:normal; font-weight:600;
}
.beyond-block-embedded p strong { color:var(--warm); }
.beyond-block-embedded p em     { color:var(--warm); font-style:italic; }

/* Petla embedded - 4 ikony + opis */
.beyond-loop {
  margin:0 0 3rem;
  padding:2.5rem 2rem;
  background:linear-gradient(180deg,
    rgba(9,9,15,0.5) 0%,
    rgba(74,240,192,0.03) 100%);
  border:1px solid rgba(74,240,192,0.15);
  border-radius:16px;
  position:relative;
}
.beyond-loop::before, .beyond-loop::after {
  content:''; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.5;
}
.beyond-loop::before { top:-1px; }
.beyond-loop::after  { bottom:-1px; }

.beyond-loop-icons {
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:1.5rem; margin-bottom:2.5rem;
}
.bl-cell {
  display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:0.7rem;
  padding:1.4rem 0.8rem 1.2rem;
  background:rgba(74,240,192,0.04);
  border:1px solid rgba(74,240,192,0.18);
  border-radius:12px;
  position:relative;
  transition:border-color 0.3s, transform 0.3s, box-shadow 0.3s;
}
.bl-cell:hover {
  border-color:var(--accent);
  transform:translateY(-3px);
  box-shadow:0 8px 24px rgba(74,240,192,0.15);
}
.bl-cell svg {
  width:72px; height:72px;
  transition:transform 0.4s ease;
}
.bl-cell:hover svg {
  transform:scale(1.08);
}
/* Strzałka między ikonami na desktop */
.bl-cell:not(:last-child)::after {
  content:'›';
  position:absolute; right:-1.1rem; top:50%;
  transform:translateY(-50%);
  font-size:2rem; color:var(--accent);
  opacity:0.4;
  font-family:var(--mono); font-weight:700;
  z-index:2;
}
.bl-label {
  font-family:var(--mono); font-size:1rem;
  font-weight:700; letter-spacing:0.16em;
  color:var(--accent);
  text-transform:uppercase;
}
.bl-desc {
  font-size:0.92rem; color:var(--text-dim);
  line-height:1.5;
  min-height:2.4em;
}

.beyond-loop-text {
  color:var(--text); line-height:1.85;
  font-size:1.02rem; margin:0;
  padding:1.4rem 1.6rem;
  background:rgba(74,240,192,0.04);
  border-left:3px solid var(--accent);
  border-radius:0 10px 10px 0;
}
.beyond-loop-text strong { color:var(--accent); font-weight:600; }
.beyond-loop-text em     { color:var(--warm); font-style:italic; font-weight:600; }

/* Platformy mikrokontrolerów - chipy */
.beyond-platforms {
  margin:0 0 3rem;
  text-align:center;
}
.beyond-platforms-label {
  display:block; font-family:var(--mono);
  font-size:0.85rem; letter-spacing:0.22em;
  color:var(--text-dim); text-transform:uppercase;
  margin-bottom:1.4rem;
}
.beyond-platforms-row {
  display:flex; flex-wrap:wrap; gap:0.6rem;
  justify-content:center;
}
.beyond-chip {
  display:inline-flex; align-items:center;
  padding:0.7rem 1.5rem;
  background:rgba(20,40,80,0.35);
  border:1.5px solid rgba(74,240,192,0.4);
  border-radius:24px;
  font-family:var(--mono); font-size:1rem;
  font-weight:700; letter-spacing:0.12em;
  color:#2ec4ff; /* mocny electric cyan - intensywny, cyfrowy */
  text-shadow:
    0 0 8px  rgba(46,196,255,0.7),
    0 0 16px rgba(46,196,255,0.4),
    0 0 2px  rgba(46,196,255,0.9);
  transition:transform 0.2s, border-color 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
}
.beyond-chip:hover {
  transform:translateY(-3px);
  border-color:var(--accent);
  background:rgba(46,196,255,0.12);
  box-shadow:0 6px 20px rgba(74,240,192,0.3), 0 0 30px rgba(46,196,255,0.4);
  color:#5ed8ff;
  text-shadow:
    0 0 10px rgba(94,216,255,0.9),
    0 0 20px rgba(46,196,255,0.6),
    0 0 3px  rgba(255,255,255,0.8);
}
.beyond-chip-more {
  color:var(--text-dim);
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.15);
  text-shadow:none;
  font-style:italic;
  font-weight:400;
}
.beyond-chip-more:hover {
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.25);
  color:var(--text);
  text-shadow:none;
  box-shadow:none;
}

/* Zdanie zamykające */
.beyond-closer {
  text-align:center; margin:0 auto;
  font-style:italic; font-size:1.25rem;
  color:var(--text); max-width:820px;
  letter-spacing:-0.005em;
  padding:1.6rem 0;
  position:relative;
  line-height:1.5;
}
.beyond-closer::before,
.beyond-closer::after {
  content:''; position:absolute; left:50%;
  width:100px; height:1px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  transform:translateX(-50%);
}
.beyond-closer::before { top:0;    }
.beyond-closer::after  { bottom:0; }

/* ============================================================
   AUTOR - sekcja z zdjeciem (na całą szerokość)
   ============================================================ */
.author-section {
  padding:4rem 0 5rem;
}
.author-wrap {
  display:grid; grid-template-columns:auto 1fr;
  align-items:center; gap:3rem;
  padding:3rem;
  border-radius:20px;
  background:linear-gradient(135deg,
    rgba(74,240,192,0.05) 0%,
    rgba(96,234,255,0.03) 50%,
    rgba(240,196,64,0.025) 100%);
  border:1px solid rgba(74,240,192,0.15);
  position:relative; overflow:hidden;
}
.author-wrap::before {
  content:''; position:absolute; top:-30%; right:-20%;
  width:50%; height:160%;
  background:radial-gradient(ellipse, rgba(74,240,192,0.08) 0%, transparent 65%);
  pointer-events:none;
}

/* Zdjecie - duze, na maksymalna szerokosc karty */
.author-photo {
  width:100%; max-width:520px;
  height:auto; object-fit:cover;
  border-radius:14px;
  border:1px solid rgba(74,240,192,0.3);
  cursor:zoom-in !important;
  box-shadow:0 12px 36px rgba(0,0,0,0.5);
  transition:transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position:relative; z-index:1;
  display:block;
}
.author-photo:hover {
  transform:scale(1.015);
  border-color:var(--accent);
  box-shadow:0 16px 48px rgba(74,240,192,0.3);
}
.author-meta { position:relative; z-index:1; }
.author-name {
  font-size:1.75rem; font-weight:700;
  color:var(--text); margin-bottom:0.4rem;
  letter-spacing:-0.015em;
}
.author-title {
  font-family:var(--mono); font-size:0.8rem;
  color:var(--accent); letter-spacing:0.12em;
  text-transform:uppercase; margin-bottom:1.6rem;
}
.author-quote {
  font-style:italic; color:var(--text-dim);
  line-height:1.85; font-size:1.05rem;
  margin:0; padding-left:1.2rem;
  border-left:2px solid rgba(74,240,192,0.4);
}

/* ============================================================
   TIMELINE - 45 LAT PROJEKTU (easter egg)
   ============================================================ */
.timeline-section {
  padding:1rem 0 5rem;
}

/* Divider "45 LAT PROJEKTU" */
.timeline-divider {
  display:flex; align-items:center; justify-content:center;
  gap:1.2rem;
  margin:0 auto 3rem;
  max-width:700px;
}
.timeline-divider-line {
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(74,240,192,0.4), transparent);
}
.timeline-divider-text {
  font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.25em; text-transform:uppercase;
  color:var(--accent);
  white-space:nowrap;
  text-shadow:0 0 12px rgba(74,240,192,0.35);
}

/* Główny wrapper timeline */
.timeline-wrap {
  max-width:900px; margin:0 auto;
  position:relative;
}

/* Pojedynczy punkt timeline */
.tl-item {
  display:grid; grid-template-columns:48px 1fr;
  gap:1.2rem;
  position:relative;
  padding-bottom:3rem;
}
.tl-item:last-child { padding-bottom:1.5rem; }

/* Oś pionowa z kropką */
.tl-axis {
  display:flex; flex-direction:column; align-items:center;
  padding-top:0.4rem;
}
.tl-dot {
  width:14px; height:14px; border-radius:50%;
  background:var(--accent);
  box-shadow:
    0 0 0 4px rgba(74,240,192,0.15),
    0 0 14px rgba(74,240,192,0.6);
  flex-shrink:0;
  position:relative;
  z-index:2;
}
.tl-line {
  flex:1; width:2px; margin-top:0.6rem;
  background:linear-gradient(180deg,
    rgba(74,240,192,0.5) 0%,
    rgba(74,240,192,0.15) 100%);
}

/* Kontent obok osi */
.tl-content {
  padding-bottom:1rem;
}
.tl-date {
  font-family:var(--mono); font-size:0.78rem;
  letter-spacing:0.18em; text-transform:uppercase;
  color:var(--accent);
  margin-bottom:0.4rem;
  text-shadow:0 0 8px rgba(74,240,192,0.3);
}
.tl-title {
  font-size:1.35rem; font-weight:700;
  color:var(--text); margin:0 0 0.5rem;
  letter-spacing:-0.01em;
}
.tl-desc {
  color:var(--text-dim); line-height:1.7;
  font-size:1rem; margin:0 0 1.3rem;
  font-style:italic;
}

/* Zdjęcia w timeline - polaroid-style pochylone */
.tl-photo {
  display:block;
  width:280px; max-width:100%;
  height:auto;
  border-radius:8px;
  padding:10px 10px 14px;
  background:#f5f5f0;
  box-shadow:
    0 10px 28px rgba(0,0,0,0.5),
    0 0 0 1px rgba(74,240,192,0.15);
  cursor:zoom-in !important;
  transition:transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
             box-shadow 0.35s ease;
  position:relative;
}
.tl-photo-left  { transform:rotate(-3deg); margin-left:0.5rem; }
.tl-photo-right { transform:rotate(3deg);  margin-left:0.5rem; }

.tl-photo:hover {
  transform:rotate(0deg) scale(1.04);
  box-shadow:
    0 14px 40px rgba(0,0,0,0.6),
    0 0 0 1px rgba(74,240,192,0.4),
    0 0 30px rgba(74,240,192,0.2);
}

/* Stopka BTTF */
.timeline-footer {
  max-width:780px; margin:2rem auto 0;
  padding:1.2rem 1.6rem;
  font-family:var(--mono); font-size:0.92rem;
  color:var(--accent);
  text-align:center;
  background:rgba(74,240,192,0.04);
  border:1px dashed rgba(74,240,192,0.3);
  border-radius:8px;
  letter-spacing:0.02em;
  line-height:1.5;
  text-shadow:0 0 10px rgba(74,240,192,0.25);
}

.lightbox {
  display:none; position:fixed; inset:0;
  background:rgba(5,5,10,0.94);
  z-index:9999;
  align-items:center; justify-content:center;
  padding:2rem;
  cursor:zoom-out;
  animation:lightbox-in 0.25s ease;
}
.lightbox.open { display:flex; }
.lightbox-img {
  max-width:95%; max-height:95vh;
  object-fit:contain; border-radius:8px;
  box-shadow:0 20px 60px rgba(0,0,0,0.8);
  border:1px solid rgba(74,240,192,0.25);
  animation:lightbox-img-in 0.3s ease;
  cursor:pointer;
}
.lightbox-close {
  position:absolute; top:1rem; right:1rem;
  width:56px; height:56px; border-radius:50%;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.25);
  color:var(--text); font-size:2rem;
  cursor:pointer; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:background 0.2s, border-color 0.2s, transform 0.2s;
  z-index:10000;
  -webkit-tap-highlight-color:transparent;
}
.lightbox-close:hover,
.lightbox-close:active {
  background:rgba(255,255,255,0.22);
  border-color:var(--accent);
  transform:scale(1.1);
}
@keyframes lightbox-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes lightbox-img-in {
  from { opacity:0; transform:scale(0.96); }
  to   { opacity:1; transform:scale(1); }
}


@media (max-width:960px){
  .hero-grid { grid-template-columns:1fr; }
  .hero-copy { text-align:center; }
  .hero-sub  { max-width:unset; }
  .cta-row   { justify-content:center; }
  .memory-card { max-width:480px; margin:0 auto; }
  .hud-wrapper  { max-width:480px; margin:0 auto; }
  .split     { grid-template-columns:1fr; gap:2rem; }
  .vs-grid   { grid-template-columns:1fr; }
  .features  { grid-template-columns:1fr 1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .rekall-layout { grid-template-columns:1fr; }
  .radar-deco { display:none; }
  .lang-select-wrap { display:flex; }

  /* hamburger widoczny */
  .hamburger { display:flex; }

  /* nav-links schowane domyslnie - rozwijane przez hamburger */
  .nav-links {
    display:none;
    position:fixed; top:58px; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(9,9,15,0.97);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(74,240,192,0.15);
    padding:0.5rem 0 1rem;
    z-index:49;
    animation:menu-drop 0.22s ease;
  }
  .nav-links.open { display:flex; }

  .nav-links a {
    padding:0.85rem 1.8rem;
    font-size:1rem;
    border-radius:0;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .nav-links a:last-child { border-bottom:none; }
  .nav-links .nav-cta {
    margin:0.8rem 1.8rem 0;
    border-radius:8px !important;
    text-align:center;
    padding:0.85rem 1.8rem !important;
  }

  /* animacja otwierania */
  @keyframes menu-drop {
    from { opacity:0; transform:translateY(-8px); }
    to   { opacity:1; transform:translateY(0); }
  }

  /* animacja prostokąta wylaczona */
  .ea-outer::before, .ea-outer::after {
    animation:none;
    opacity:0.5;
  }

  /* Beyond Software - mobile */
  .beyond-grid        { grid-template-columns:1fr; gap:1.2rem; }
  .beyond-loop-icons  { grid-template-columns:1fr 1fr; gap:1rem; }
  .bl-cell:not(:last-child)::after { display:none; } /* na mobile strzałki znikają */
  .beyond-closer      { font-size:1.05rem; }

  /* Autor - mobile (kolumna zamiast 2 kolumn) */
  .author-wrap        { grid-template-columns:1fr; text-align:center; gap:2rem; padding:2rem 1.5rem; }
  .author-photo       { max-width:100%; margin:0 auto; }
  .author-quote       { padding-left:0; border-left:none; padding-top:1.2rem; border-top:2px solid rgba(74,240,192,0.3); text-align:left; }

  /* Timeline - mobile */
  .timeline-divider        { gap:0.8rem; margin-bottom:2rem; }
  .timeline-divider-text   { font-size:0.72rem; letter-spacing:0.2em; }
  .tl-item                 { grid-template-columns:32px 1fr; gap:0.9rem; padding-bottom:2.2rem; }
  .tl-photo                { width:240px; margin-left:0; }
  .tl-title                { font-size:1.15rem; }
  .timeline-footer         { font-size:0.82rem; padding:1rem 1.2rem; }
}
@media (max-width:600px){
  /* Manifest box na mobile - układ pionowy */
  .manifest-box  { padding:1rem 1.2rem; gap:0.4rem; }
  .manifest-eq   { font-size:1.2rem; }
  .manifest-def  { font-size:0.85rem; flex-basis:100%; }
  .hero      { padding:7rem 0 4rem; }
  .features  { grid-template-columns:1fr; }
  .use-grid  { grid-template-columns:1fr; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .ea-form   { flex-direction:column; }
  .ea-form input { min-width:unset; width:100%; }
  .ring      { height:230px; }
  .ring-title{ font-size:1.55rem; }
  .ea-box    { padding:2rem 1.2rem; }
  .footer-inner { flex-direction:column; text-align:center; }
  .hero-avatar  { width:110px; height:110px; }
  .hud-wrapper  { padding-top:60px; }
  /* Beyond - bardzo wąskie ekrany */
  .beyond-loop-icons { grid-template-columns:1fr 1fr; }
  .bl-cell           { padding:1rem 0.5rem; }
  .bl-cell svg       { width:60px; height:60px; }
  .beyond-loop       { padding:1.8rem 1.2rem; }
  .beyond-block      { padding:1.6rem 1.4rem; }
  .author-name       { font-size:1.4rem; }
  .author-title      { font-size:0.72rem; }
}


/* ============================================================
   DROPDOWN JEZYKOW
   ============================================================ */
.lang-select-wrap {
  display:flex; align-items:center; gap:0.4rem;
  margin-right:0.5rem; position:relative;
}
.lang-select-label {
  font-family:var(--mono); font-size:0.62rem;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dim);
}
.lang-dropdown { position:relative; }

/* Przycisk pokazujacy aktualny jezyk */
.lang-dropdown-btn {
  display:flex; align-items:center; gap:0.5rem;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:8px; padding:0.35rem 0.6rem;
  cursor:pointer; font-family:var(--mono);
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; color:var(--text);
  transition:border-color 0.2s, background 0.2s;
  white-space:nowrap;
}
.lang-dropdown-btn:hover {
  border-color:rgba(74,240,192,0.4);
  background:rgba(74,240,192,0.06);
}
.lang-dropdown.open .lang-dropdown-btn {
  border-color:var(--accent);
  background:rgba(74,240,192,0.08);
}

/* Miniaturka flagi w przycisku */
.lang-drop-flag {
  width:22px; height:15px; border-radius:2px;
  overflow:hidden; flex-shrink:0; display:block;
  box-shadow:0 1px 3px rgba(0,0,0,0.5);
}
.lang-drop-flag svg { width:100%; height:100%; display:block; }

/* Strzalka */
.lang-drop-arrow {
  width:10px; height:6px; color:var(--text-dim);
  transition:transform 0.2s;
  flex-shrink:0;
}
.lang-dropdown.open .lang-drop-arrow { transform:rotate(180deg); }

/* Lista rozwijana */
.lang-dropdown-list {
  position:absolute; top:calc(100% + 6px); right:0;
  background:var(--bg-card);
  border:1px solid rgba(74,240,192,0.2);
  border-radius:10px; padding:0.3rem;
  min-width:150px;
  box-shadow:0 12px 32px rgba(0,0,0,0.5);
  display:none; flex-direction:column; gap:2px;
  z-index:100;
}
.lang-dropdown.open .lang-dropdown-list { display:flex; }

/* Pozycja na liscie */
.lang-drop-item {
  display:flex; align-items:center; gap:0.55rem;
  padding:0.45rem 0.65rem; border-radius:7px;
  background:transparent; border:none;
  cursor:pointer; font-family:var(--mono);
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; color:var(--text-dim);
  text-align:left; width:100%;
  transition:background 0.15s, color 0.15s;
}
.lang-drop-item:hover:not(:disabled) {
  background:rgba(74,240,192,0.08);
  color:var(--text);
}
.lang-drop-item.lang-drop-active {
  color:var(--accent);
  background:rgba(74,240,192,0.06);
}
.lang-drop-item.lang-drop-soon {
  opacity:0.35; cursor:not-allowed;
}
.lang-drop-name {
  font-weight:400; font-size:0.7rem;
  color:var(--text-dim); margin-left:auto;
  letter-spacing:0.02em; font-family:var(--font);
}
.lang-drop-item.lang-drop-active .lang-drop-name { color:var(--accent-dim); }

@media (max-width:960px){
  .lang-select-label { display:none; }
  .lang-dropdown-list { right:0; left:auto; }
}