/* ============================================================================
   alphasec.css — wspólny arkusz strony
   ----------------------------------------------------------------------------
   Do tej pory tokeny motywu były wklejone osobno w każdą stronę (index, en/index,
   forge, powershell, 404, regulamin, privacy), a układ siedział w atrybutach
   style="". Efekt: zmiana koloru albo szerokości oznaczała siedem edycji.
   Ten plik jest jedynym źródłem tokenów i powtarzalnych komponentów.

   Strony, które go już używają: index.html, en/index.html, lab/**.
   Pozostałe (forge, powershell, 404, regulamin, privacy) nadal mają własne
   kopie tokenów — do przeniesienia w kolejnym kroku.
   ============================================================================ */

/* ------------------------------- 1 · TOKENY ------------------------------- */
[data-theme] {
  --bg:          #f7f4ee;
  --surface:     #fbf9f4;
  --card:        #ffffff;
  --ink:         #14171b;
  --strong:      #3c4350;
  --muted:       #5d6470;
  --muted2:      #6f7886;
  --faint:       #9a9384;
  --quote:       #2b2f35;
  --line:        #e6e1d6;
  --line2:       #ece7dc;
  --line3:       #e1dccf;
  --inputborder: #d8d2c4;
  --acc:         #0F4C81;
  --navbg:       rgba(247,244,238,0.85);
  --logofilter:  none;
  --logoblend:   multiply;

  /* tekst na tle akcentu (przyciski) */
  --acc-fg:      #ffffff;
  /* stopka */
  --foot-bg:     #14171b;
  --foot-fg:     #aab3bf;
  --foot-dim:    #5b6472;
  --foot-hi:     #dfe5ec;
  --foot-line:   #232830;
  /* obwódki papieru */
  --dashed:      #c9c2b2;
  --hairline:    #b9b3a7;
  /* terminal CRT: protipy, modal gier */
  --crt-bg:      #0a0e0a;
  --crt-bar:     #0d130d;
  --crt-fg:      #00ff66;
  --crt-dim:     #1f9d57;
  --crt-faint:   #4d7a5f;
  --mint:        #5ee0a0;
  --mint-ink:    #06231a;
  /* ciemny pas z zapisem na protipy */
  --band-bg:     #0e1116;
  --band-input:  #161b21;
  --band-line:   #2a313a;
  --band-fg:     #f3f6f9;
  --band-dim:    #9aa3b1;
}
[data-theme="dark"] {
  --bg:          #0b0e12;
  --surface:     #11161c;
  --card:        #161c24;
  --ink:         #f1f4f8;
  --strong:      #c7d0db;
  --muted:       #9aa3b1;
  --muted2:      #828c99;
  --faint:       #727b87;
  --quote:       #dde3ea;
  --line:        #262e38;
  --line2:       #1f262e;
  --line3:       #2c343e;
  --inputborder: #30373f;
  --acc:         #5b9ce6;
  --navbg:       rgba(11,14,18,0.82);
  --logofilter:  brightness(0) invert(1);
  --logoblend:   normal;
  /* akcent w ciemnym jest jasny, więc tekst na nim musi być ciemny */
  --acc-fg:      #08131f;
  --foot-bg:     #06090d;
  --dashed:      #3a424c;
  --hairline:    #3a424c;
}

/* --------------------------- 2 · SZEROKOŚĆ STRONY -------------------------- */
/* Zamiast max-width:1180px — margines rosnący z ekranem, ale zatrzymany, żeby
   wiersz tekstu nie zrobił się nieczytelny. Na 2000 px treść wypełnia stronę
   zamiast siedzieć w słupku pośrodku. */
:root { --pad: clamp(20px, 4.5vw, 96px); }
.wrap { width: min(1720px, 100% - var(--pad) * 2); margin-inline: auto; }

/* Węższa miara tam, gdzie liczy się czytelność ciągłego tekstu. */
.wrap-narrow { width: min(980px, 100% - var(--pad) * 2); margin-inline: auto; }

/* ---------------------------- 3 · DROBNE ELEMENTY -------------------------- */
.mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* Liczba-dowód: wartość wpleciona w zdanie zamiast kafelka w pasku statystyk. */
.num {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700; font-size: 1.24em; letter-spacing: -0.03em;
  color: var(--ink);
}

/* Zdanie o klientach — zastępuje ścianę logotypów. */
.trusted-line { font-size: 18px; line-height: 1.6; color: var(--muted); max-width: 105ch; margin: 0; }
.trusted-line b { color: var(--ink); font-weight: 600; }

/* Referencje bez karuzeli: wszystkie naraz, każda pod grubą kreską. */
.refs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 0 clamp(28px, 3vw, 56px); }
.refs-grid .ref { padding: 22px 0; border-top: 2px solid var(--ink); }
.refs-grid .ref p { font-size: 15.5px; line-height: 1.6; color: var(--quote); margin: 0; }
.refs-grid .ref .who { margin-top: 16px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted2); }
.refs-grid .ref .who b { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }

/* Wiersz oferty — trzecia waga obok karty wiodącej i zwykłego tekstu. */
.offer-rows { border-top: 1px solid var(--line); }
.offer-row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 24rem) 12rem;
  gap: 10px 36px; align-items: baseline;
  padding: 22px 12px 22px 0; border-bottom: 1px solid var(--line2);
  transition: background .14s;
}
.offer-row:hover { background: var(--surface); }
.offer-row h3 { font-family: 'Space Grotesk', sans-serif; font-size: 21px; font-weight: 600; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.offer-row p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.offer-row .meta { font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1.7; color: var(--muted2); margin: 0; }
.offer-row .price { font-family: 'JetBrains Mono', monospace; font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; color: var(--ink); margin: 0; }
.offer-row .price small { display: block; color: var(--faint); font-size: 12px; font-weight: 400; }
.offer-row .go { display: inline-block; margin-top: 8px; color: var(--acc); font-family: 'JetBrains Mono', monospace; font-size: 13px; }
@media (max-width: 980px) {
  .offer-row { grid-template-columns: 1fr; }
  .offer-row .price { text-align: left; }
}

/* Ściana wystąpień — trzy kolumny na szerokim ekranie. */
.talks-wall { columns: 3 300px; column-gap: clamp(28px, 3vw, 64px); }
.talks-wall .talk { break-inside: avoid; padding: 12px 0; border-bottom: 1px solid var(--line2); }
.talks-wall .talk b { display: block; font-weight: 500; font-size: 15.5px; line-height: 1.35; color: var(--ink); }
.talks-wall .talk span { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--muted2); }
.talks-wall .talk a { color: var(--acc); }

/* --------------------------- 4 · EASTER EGG Z GRAMI ------------------------ */
/* Mały ekran z prawdziwego zrzutu gry, w stopce. Bez podpisu i bez strzałki —
   kto wypatrzy, ten kliknie. To samo otwiera wpisanie `adv`. */
.egg {
  display: block; width: 176px; height: 92px; padding: 0;
  border: 1px solid #2a3138; border-radius: 5px; overflow: hidden;
  background: #4357cc; cursor: pointer; position: relative; line-height: 0;
  transition: border-color .18s, transform .18s;
}
.egg:hover, .egg:focus-visible { border-color: #5ee0a0; transform: translateY(-2px); }
.egg img { width: 430px; max-width: none; height: auto; margin: -6px 0 0 -8px; opacity: .92; filter: none; }
.egg::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,.2) 2px 3px);
}
.egg .hint {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 16px 9px 6px;
  background: linear-gradient(transparent, rgba(6,10,22,.9));
  font-family: 'JetBrains Mono', monospace; font-size: 10.5px; line-height: 1.3;
  color: #8ff0bd; opacity: 0; transition: opacity .18s;
}
.egg:hover .hint, .egg:focus-visible .hint { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .egg { transition: none; }
  .egg:hover, .egg:focus-visible { transform: none; }
}

/* ------------------- 5 · ŻYWY PROTIP W HERO ------------------- */
/* Pisanie zrobione czystym CSS-em, nie JS-em: runtime dc przerysowuje
   szablon cyklicznie (mountTS co 300 ms), więc mutacje DOM-u albo setState
   co kilkanaście milisekund by tu nie przeżyły ani nie były wydajne. */
.hero-term {
  background: #0a1016; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 18px 44px rgba(15,76,129,.16);
}
.hero-term .bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hero-term .bar i { width: 9px; height: 9px; border-radius: 99px; display: block; }
.hero-term .bar span { margin-left: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6d8497; letter-spacing: .05em; }
.hero-term .body { padding: 20px 18px 24px; font-family: 'JetBrains Mono', monospace; font-size: 12.5px; line-height: 1.85; color: #d6e3ee; overflow: hidden; }
/* Maszyna do pisania: każdy znak to osobny <span> z własnym opóźnieniem, więc
   litery pojawiają się po kolei i zawijają jak zwykły tekst. Czysty CSS —
   przetrwa cykliczne przerysowania runtime'u dc (nic tu nie dotyka DOM z JS). */
.hero-term .cmd { white-space: pre-wrap; overflow-wrap: anywhere; }   /* zawija się jak w konsoli */
.hero-term .ch { opacity: 0; animation: hero-ch 0s linear forwards; animation-delay: calc(var(--i) * 18ms); }
.hero-term .p { color: #4ec98a; }   /* prompt */
.hero-term .s { color: #ffd479; }   /* łańcuchy */
.hero-term .o { color: #8fb0c9; }   /* operatory: -join, -split, |, % */
.hero-term .f { color: #63d2bd; }   /* polecenia i metody */
.hero-term .v { color: #8fbaea; }   /* zmienne */
.hero-term .c { color: #6d8497; }   /* komentarz */
.hero-term .caret {
  display: inline-block; width: .55em; height: 1em; background: #4ec98a;
  vertical-align: -.16em; opacity: 0;
  animation: hero-show 0s var(--end, 3s) forwards, hero-blink 1.1s var(--end, 3s) steps(1) infinite;
}
@keyframes hero-ch    { to { opacity: 1; } }
@keyframes hero-show  { to { opacity: 1; } }
@keyframes hero-blink { 0%,55% { opacity: 1 } 56%,100% { opacity: 0 } }

/* Kto wyłączył animacje, dostaje od razu cały listing. */
@media (prefers-reduced-motion: reduce) {
  .hero-term .ch { opacity: 1; animation: none; }
  .hero-term .caret { opacity: 1; animation: none; }
}

.hero-term-foot { margin-top: 14px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); }
.hero-term-foot a { color: var(--acc); font-weight: 600; }