/* ==========================================================================
   ebartnet.pl — system wizualny GRID
   Tokeny i techniki przeniesione z theme-tokens.css w EBARTNET-UI.

   Ładowany jako OSTATNI element <head>, po blokach <style> podstron —
   dzięki temu wygrywa kaskadą bez podbijania specyficzności.

   Zasada porządkująca całość:
     Tron jest ramą, nie treścią. Ciężar dekoracji jest odwrotnie
     proporcjonalny do wagi informacji. Im bliżej "zadzwoń", tym mniej Trona.
   ========================================================================== */

:root {
  /* --- Grunty --- */
  --bg-black:  #000000;
  --bg-panel:  #02080a;
  --bg-raised: #0a1014;
  --edge:      #132329;

  /* --- Akcenty --- */
  --cyan:        #00e5ff;
  --cyan-bright: #8ff8ff;
  --cyan-dim:    #087f9c;
  --amber:       #ff9f1c;

  /* Semantyka. Świadomie poza skalą akcentu: błąd MUSI być czerwony —
     to konwencja, której nie łamie się dla estetyki. Klient nie przeczyta
     komunikatu przy polu, które ma kolor reszty interfejsu. */
  --danger: #ff6b52;   /* 7.48:1 na czerni */
  --ok:     var(--cyan-bright);

  /* Triplety RGB do składania przezroczystości: rgb(var(--cyan-rgb) / .35).
     Dzięki nim podmiana czterech zmiennych przemalowuje cały serwis. */
  --cyan-rgb:        0 229 255;
  --cyan-bright-rgb: 143 248 255;
  --cyan-dim-rgb:    8 127 156;
  --amber-rgb:       255 159 28;

  /* --- Tekst. Czysta biel na czerni męczy — stąd lekko chłodna. --- */
  --text:        #c8d8dc;
  --text-bright: #e8f6f8;
  --text-dim:    #7a8f95;

  /* --- Fonty --- */
  --f-display: "Orbitron", "Arial Black", sans-serif;
  --f-label:   "Chakra Petch", "Rajdhani", Verdana, sans-serif;
  --f-body:    "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* --- Glow "tight + wide": ciasny jasny rdzeń + szeroki słaby ambient.
         Maksymalnie 3 warstwy, nigdy biel w rdzeniu. --- */
  --glow-title: 0 0 2px rgb(var(--cyan-bright-rgb) / .55),
                0 0 6px rgb(var(--cyan-rgb) / .18);
  --glow-amber: 0 0 3px rgb(var(--amber-rgb) / .80),
                0 0 14px rgb(var(--amber-rgb) / .30);

  /* --- Ramka panelu: outset + inset naraz = neonowa rurka,
         a nie rozmazana plama. --- */
  --panel-border: 1px solid rgb(var(--cyan-rgb) / .28);
  --panel-glow:   0 0 3px rgb(var(--cyan-rgb) / .12),
                  inset 0 0 3px rgb(var(--cyan-rgb) / .035);

  --bracket-size: 15px;
  /* Jeden promień dla całego serwisu — karty, pola, przyciski. */
  --radius: 6px;
}

/* ==========================================================================
   1. Baza
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  background: var(--bg-black);
  color: var(--text);
  font-family: var(--f-body);
  font-size: 1.0625rem;   /* 17 px */
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* Siatka GRID — statyczna, wygaszana ku dołowi. Zastępuje aurora blobs. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgb(var(--cyan-dim-rgb) / .055) 1px, transparent 1px) 0 0 / 76px 76px,
    linear-gradient(to bottom, rgb(var(--cyan-dim-rgb) / .055) 1px, transparent 1px) 0 0 / 76px 76px,
    radial-gradient(ellipse at 50% 0%, rgb(var(--cyan-dim-rgb) / .06), transparent 60%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 6%, #000 6%, transparent 68%);
          mask-image: radial-gradient(ellipse at 50% 6%, #000 6%, transparent 68%);
}

/* Vignette globalny, na granicy percepcji. Scanlines NIE są globalne —
   to jedyny token kładący teksturę na treści, więc siedzi tylko w hero. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 58%, rgb(0 0 0 / .45) 100%);
}

/* Treść ponad tłem. nav ma własny, wyższy stacking. */
body > *:not(nav) { position: relative; z-index: 1; }

::selection { background: rgb(var(--cyan-rgb) / .3); color: var(--text-bright); }

:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ==========================================================================
   2. Typografia — ~10% tekstu niesie charakter, 90% jest nudno czytalne
   ========================================================================== */

/* Orbitron wyłącznie w krótkich, wersalikowych nagłówkach.
   W dłuższych frazach robi się nieczytelny i gamingowy. */
.eb-display {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-bright);
  text-shadow: var(--glow-title);
  /* 1.2 obcina ogonki w Ą i Ę — na polskiej stronie to widać od razu. */
  line-height: 1.28;
  padding-bottom: .08em;
  text-wrap: balance;
}

/* Chakra Petch — etykiety, liczby, wszystko co dłuższe niż 3 słowa,
   a nadal ma nieść charakter. */
.eb-label {
  font-family: var(--f-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.eb-eyebrow {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .72rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  /* Jaśniejszy niż --cyan-dim: ten sam token na tekście .72rem daje 4.53:1,
     czyli AA z zapasem 0.03. Tu 6.6:1. --cyan-dim zostaje do linii i ramek. */
  color: #149dbe;
}

.eb-num {
  font-family: var(--f-label);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--cyan-bright);
  text-shadow: var(--glow-title);
}

/* Akapity ofertowe — czysto, bez efektów. To je czyta klient. */
.eb-prose { font-size: 1.0625rem; line-height: 1.75; max-width: 65ch; }

code, kbd, samp, pre, .font-mono { font-family: var(--f-mono); }

/* ==========================================================================
   3. Rama HUD
   Rogi 2px w pełnym cyjanie, ramka 1px przygaszona.
   Kontrast grubości to cały motyw z GRID — nie zmieniać proporcji.
   ========================================================================== */

.hud-frame {
  position: relative;
  border: var(--panel-border);
  border-radius: 0;
  background: rgb(var(--cyan-dim-rgb) / .03);
  box-shadow: var(--panel-glow);
}

.hud-frame::before,
.hud-frame::after {
  content: "";
  position: absolute;
  width: var(--bracket-size);
  height: var(--bracket-size);
  pointer-events: none;
  border-color: var(--cyan);
  border-style: solid;
  border-width: 0;
  filter: drop-shadow(0 0 2px rgb(var(--cyan-rgb) / .3));
}
.hud-frame::before { top: -1px;    left: -1px;  border-top-width: 2px;    border-left-width: 2px; }
.hud-frame::after  { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }

/* Wariant bez tła — do opasania zdjęcia albo grafiki. */
.hud-frame.is-bare { background: none; box-shadow: none; }

/* ==========================================================================
   4. Neutralizatory — sygnały "wygenerowane przez AI"
   Te klasy żyją w blokach <style> podstron. Zamiast wycinać je z sześciu
   plików, wygaszamy je tutaj; przy pełnym liftingu podstron znikną u źródła.
   ========================================================================== */

/* gradient blue → purple → pink na tekście */
.ai-gradient-text {
  background: none;
  -webkit-background-clip: border-box;
          background-clip: border-box;
  color: var(--cyan);
}

/* glassmorphism → solidna czerń z linią w przygaszonym cyjanie */
.glass-nav {
  background: rgb(0 0 0 / .96);
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  border-bottom: 1px solid rgb(var(--cyan-rgb) / .22);
}

/* gradientowe pigułki nawigacji → płaskie linki, hover podkreśla */
.grad-nav-pill {
  border-radius: 0;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  padding: .3rem 0;
  margin-right: 1.1rem;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.grad-nav-pill::before,
.grad-nav-pill::after { display: none; }
.grad-nav-pill:hover {
  color: var(--cyan-bright);
  border-bottom-color: var(--cyan);
  transform: none;
}

/* poświata za kursorem, animowane tła, przycisk uciekający za myszą */
#cursor-glow,
#falling-bg,
#falling-overlay,
#aurora { display: none !important; }

.magnetic-btn { transform: none !important; }

/* pastylki kompetencji → płaskie znaczniki */
.soft-skill-badge {
  background: rgb(var(--cyan-dim-rgb) / .1);
  border: 1px solid rgb(var(--cyan-rgb) / .25);
  border-radius: var(--radius);
  color: var(--cyan-bright);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .06em;
}

/* hover kart — poświata zamiast uniesienia i cienia */
.card-hover-glow { transition: border-color .2s, box-shadow .2s; }
.card-hover-glow:hover {
  transform: none;
  border-color: rgb(var(--cyan-rgb) / .5);
  box-shadow: 0 0 0 1px rgb(var(--cyan-rgb) / .12), var(--panel-glow);
}

/* Drobny tekst z podstron: slate-500/600 dają 3.4:1 i 2.4:1 na czerni.
   Podnosimy do tokenu opisu — 5.5:1, czyli AA także dla 14 px. */
.text-slate-500, .text-slate-600 { color: var(--text-dim) !important; }

/* kursor terminala — zostaje, ale w cyjanie */
.terminal-cursor::after { color: var(--cyan); }

/* ==========================================================================
   5. Komponenty GRID
   ========================================================================== */

/* --- Nawigacja --- */
.eb-nav {
  background: rgb(0 0 0 / .96);
  border-bottom: 1px solid rgb(var(--cyan-rgb) / .22);
}
.eb-brand {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--cyan-bright);
  text-shadow: var(--glow-title);
  text-decoration: none;
}
.eb-navlink {
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
  white-space: nowrap;
}
.eb-navlink:hover,
.eb-navlink:focus-visible { color: var(--cyan-bright); border-bottom-color: var(--cyan); }
.eb-navlink.is-active { color: var(--cyan-bright); border-bottom-color: rgb(var(--cyan-rgb) / .5); }

/* --- Hero --- */
.eb-hero { position: relative; background: var(--bg-black); overflow: hidden; }

.eb-hero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right,  rgb(var(--cyan-dim-rgb) / .16) 1px, transparent 1px) 0 0 / 58px 58px,
    linear-gradient(to bottom, rgb(var(--cyan-dim-rgb) / .16) 1px, transparent 1px) 0 0 / 58px 58px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 100%);
          mask-image: linear-gradient(to bottom, transparent 4%, #000 100%);
}

/* Scanlines — TYLKO tutaj i w przerywnikach graficznych.
   Krycie dobrane tak, żeby nie konkurowało z tekstem: powyżej .05
   akapit zaczyna się "sypać". */
.eb-scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 1) 3px);
  opacity: .04;
}

/* --- Pasek statusu: prawdziwe liczby zamiast udawanego terminala --- */
.eb-status {
  border-top: 1px solid rgb(var(--cyan-rgb) / .22);
  background: rgb(var(--cyan-dim-rgb) / .05);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cyan-dim);
}
.eb-status b {
  color: var(--cyan-bright);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.eb-status .is-live { color: var(--amber); }

/* --- CTA. Amber jest jedynym kontra-akcentem i tylko tu. --- */
.eb-cta {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-label);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--amber);
  text-decoration: none;
  border: 1px solid rgb(var(--amber-rgb) / .55);
  border-radius: var(--radius);
  padding: .8rem 1.5rem;
  background: transparent;
  transition: background .18s, box-shadow .18s;
}
.eb-cta:hover,
.eb-cta:focus-visible { background: rgb(var(--amber-rgb) / .1); box-shadow: var(--glow-amber); }

/* Wariant główny — jeden na ekran: "Umów konsultację" i "Wyślij wiadomość".
   Pełne wypełnienie amber z ciemnym tekstem: 8.9:1, czyli AAA. */
.eb-cta.is-primary {
  background: var(--amber);
  color: #140b02;
  border-color: var(--amber);
}
.eb-cta.is-primary:hover,
.eb-cta.is-primary:focus-visible {
  background: #ffb135;
  border-color: #ffb135;
  box-shadow: var(--glow-amber);
}

.eb-cta-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-dim);
  text-decoration: none;
  border: 1px solid rgb(var(--cyan-rgb) / .3);
  border-radius: var(--radius);
  padding: .8rem 1.5rem;
  transition: color .18s, border-color .18s;
}
.eb-cta-ghost:hover,
.eb-cta-ghost:focus-visible { color: var(--cyan-bright); border-color: rgb(var(--cyan-rgb) / .6); }

/* --- Timeline: lista z pionową linią, nie rząd kart --- */
.eb-timeline { border-left: 1px solid rgb(var(--cyan-rgb) / .28); padding-left: 1.75rem; }
.eb-timeline > li { position: relative; }
.eb-timeline > li::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem - 4px);
  top: .6rem;
  width: 7px;
  height: 7px;
  background: var(--cyan);
  box-shadow: 0 0 6px rgb(var(--cyan-rgb) / .5);
}

/* --- Rząd technologii w monospace zamiast siatki kafelków --- */
.eb-techrow {
  font-family: var(--f-mono);
  font-size: .82rem;
  color: var(--text-dim);
  letter-spacing: .02em;
}
.eb-techrow span { color: var(--text); }
.eb-techrow span::after { content: " ·"; color: var(--cyan-dim); }
.eb-techrow span:last-child::after { content: ""; }

/* --- Przerywnik graficzny --- */
.eb-break { position: relative; overflow: hidden; border-block: 1px solid var(--edge); }
.eb-break img { width: 100%; height: 100%; object-fit: cover; opacity: .42; }
.eb-break::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, var(--bg-black), transparent 22%, transparent 78%, var(--bg-black)),
    repeating-linear-gradient(to bottom, transparent 0 2px, rgb(0 0 0 / 1) 3px);
  background-blend-mode: normal;
}

/* ==========================================================================
   6. Stany formularza
   ========================================================================== */

.eb-field {
  background: var(--bg-panel);
  border: 1px solid rgb(var(--cyan-rgb) / .25);
  border-radius: var(--radius);
  color: var(--text-bright);
  font-family: var(--f-body);
  transition: border-color .18s, box-shadow .18s;
}
.eb-field::placeholder { color: var(--text-dim); }
.eb-field:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 1px rgb(var(--cyan-rgb) / .35);
}

/* :user-invalid, nie :invalid — inaczej pole świeci na czerwono,
   zanim klient zdąży cokolwiek wpisać. */
.eb-field:user-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 1px rgb(255 107 82 / .3);
}

.eb-error {
  color: var(--danger);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
}
.eb-ok {
  color: var(--ok);
  font-family: var(--f-label);
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .04em;
}