/* Rozdroze dumpli.pl v5 (26.09.2026). Neutralna noc, zeby oba wejscia swiecily: niebieskie Agentownia
   (Archivo, #0031FD) i pomaranczowe Gry (Bungee, #F08A3C). Odwaznie tylko w jednym miejscu: w drzwiach. */

:root {
  --noc: #0c0b1a;
  --szary: #b9b6d6;           /* podbarwiona szarosc */
  --tekst: #f4f3ff;
  --niebieski: #0031fd;
  --pomarancz: #f08a3c;
  --zielen: #15e914;          /* znak marki: focus */
  --font-agentownia: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-gry: 'Bungee', 'Arial Black', Impact, sans-serif;
  --font-tekst: 'Figtree', 'Segoe UI', system-ui, Arial, sans-serif;
}

* { box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
body { margin: 0; background: var(--noc); color: var(--tekst); font-family: var(--font-tekst); font-size: 18px; line-height: 1.5; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--zielen); outline-offset: 4px; border-radius: 10px; }

.rozdroze { max-width: 1200px; margin: 0 auto; padding: 36px 20px 40px; display: grid; gap: 28px; }
h1 {
  margin: 0; text-align: center; text-wrap: balance;
  font-family: var(--font-agentownia); font-weight: 850; font-stretch: 112%;
  font-size: clamp(30px, 4.4vw, 52px); line-height: 1.05; letter-spacing: -0.02em;
}

.drzwi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.wejscie {
  position: relative; display: block; min-height: 480px; border-radius: 28px; overflow: hidden;
  text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.wejscie:hover { transform: translateY(-6px); }
.agentownia { background: var(--niebieski); }
.agentownia:hover { box-shadow: 0 24px 60px rgba(0, 49, 253, 0.45); }
.gry { background: var(--pomarancz); }
.gry:hover { box-shadow: 0 24px 60px rgba(240, 138, 60, 0.45); }
.tlo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.gry .tlo { object-position: 20% 40%; }
.tresc {
  position: absolute; left: 16px; right: 16px; bottom: 16px;
  display: grid; gap: 10px; padding: 22px; border-radius: 20px;
}
.agentownia .tresc { background: rgba(0, 32, 170, 0.9); }
.gry .tresc { background: rgba(240, 138, 60, 0.95); color: #1a0e08; }
.logo { display: flex; align-items: center; gap: 12px; line-height: 1.05; }
.logo img { border-radius: 12px; }
.agentownia .logo { font-family: var(--font-agentownia); font-weight: 850; font-stretch: 112%; font-size: clamp(26px, 3vw, 36px); }
.gry .logo { font-family: var(--font-gry); font-size: clamp(22px, 2.6vw, 30px); }
.gry .logo img { border-radius: 50%; }
.opis { font-size: 18px; }
.agentownia .opis { color: #e6ecff; }
.gry .opis { color: #2a1509; }
.przycisk { justify-self: start; padding: 12px 20px; border-radius: 12px; font-weight: 800; }
.agentownia .przycisk { background: #fff; color: #0a1236; }
.gry .przycisk { background: #1a0e08; color: #fff; }

.socjale { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.socjale a { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: transform .15s; }
.socjale a:hover { transform: translateY(-2px); }
.socjale .fb { padding: 11px 18px; border-radius: 999px; background: #0866ff; color: #fff; font-weight: 800; }
.socjale .fb img { filter: brightness(0) invert(1); }
.socjale .krotko { display: none; font-style: normal; }
.socjale .ikona { padding: 8px 14px 8px 10px; border-radius: 999px; background: #fff; color: #14122b; font-size: 15px; font-weight: 800; }
.stopka { margin: 0; text-align: center; font-size: 13px; color: var(--szary); }

@media (max-width: 760px) {
  .drzwi { grid-template-columns: 1fr; }
  .wejscie { min-height: 400px; }
  .socjale .fb { width: 100%; justify-content: center; }
  /* telefon: dwa takie same logo YouTube, wiec krotka etykieta (ceo-strona 26.09) */
  .socjale .ikona span { display: none; }
  .socjale .krotko { display: inline; font-size: 13px; }
  .socjale .ikona { flex: 1 1 0; justify-content: center; padding: 9px 6px; }
}