/* kakaki.pl — wygląd „Blueprint” (2026) */
:root {
  --tlo: #071530;
  --tlo-karta: rgba(7, 21, 48, 0.8);
  --tekst: #eaf0ff;
  --tekst-2: #c9d5ee;
  --szary: #a9b8d9;
  --linia: rgba(234, 240, 255, 0.5);
  --akcent: #ff7a1a;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace;
  --display: 'Unbounded', 'Arial Black', sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: var(--tlo);
  background-image:
    linear-gradient(rgba(170, 195, 255, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 195, 255, 0.07) 1px, transparent 1px),
    linear-gradient(rgba(170, 195, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(170, 195, 255, 0.03) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
  color: var(--tekst);
  font-family: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--tekst); }
a:hover { color: #ff8a33; }
a:focus-visible { outline: 2px solid var(--akcent); outline-offset: 3px; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }
.mono { font-family: var(--mono); }

/* nagłówek */
.naglowek { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; padding: 24px 0; }
.marka { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.marka-znak {
  width: 34px; height: 34px; border: 2px solid var(--akcent); display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--akcent);
}
.marka-nazwa { font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: 0.02em; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; font-family: var(--mono); font-size: 14px; }
.menu a { text-decoration: none; padding: 10px 0; }
.menu .menu-kontakt { padding: 10px 16px; background: var(--akcent); color: var(--tlo); font-weight: 500; }
.menu .menu-kontakt:hover { background: #ff8a33; color: var(--tlo); }

/* hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr)); gap: 48px; align-items: center; padding: 56px 0 88px; }
.etykieta { margin: 0 0 24px; font-family: var(--mono); font-size: 13px; color: var(--szary); }
h1 { margin: 0 0 28px; font-family: var(--display); font-weight: 800; font-size: clamp(36px, 5vw, 68px); line-height: 1.04; letter-spacing: -0.02em; text-wrap: balance; }
h1 .akcent { color: var(--akcent); }
.hero-opis { margin: 0 0 32px; max-width: 520px; font-size: 19px; color: var(--tekst-2); }
.przyciski { display: flex; flex-wrap: wrap; gap: 14px; }
.btn { display: inline-block; text-decoration: none; padding: 15px 24px; font-weight: 600; }
.btn-glowny { background: var(--akcent); color: var(--tlo); }
.btn-glowny:hover { background: #ff8a33; color: var(--tlo); }
.btn-drugi { border: 1px dashed var(--szary); }

/* rysunek telefonu z wymiarami */
.rysunek { margin: 0; position: relative; height: 460px; }
.rysunek * { position: absolute; }
.tel { left: 14%; top: 20px; width: 210px; height: 420px; border: 2px solid var(--tekst); border-radius: 34px; }
.tel-glosnik { left: 50%; top: 12px; width: 60px; height: 8px; margin-left: -30px; border: 1.5px solid var(--tekst); border-radius: 6px; }
.tel-ekran { left: 18px; right: 18px; top: 44px; height: 110px; border: 1.5px dashed var(--akcent); }
.tel-linia { left: 18px; height: 10px; border-top: 1.5px solid var(--szary); }
.tel-przycisk { left: 18px; right: 18px; bottom: 26px; height: 44px; border: 1.5px solid var(--tekst); border-radius: 12px; }
.wym-poz { left: 14%; top: 0; width: 210px; border-top: 1px solid var(--akcent); }
.wym-pion { left: calc(14% - 22px); top: 20px; height: 420px; border-left: 1px solid var(--akcent); }
.wym-txt { font-family: var(--mono); font-size: 12px; color: var(--akcent); }
.opis-linia { left: calc(14% + 210px); width: 90px; border-top: 1px solid var(--szary); }
.opis-txt { left: calc(14% + 308px); font-family: var(--mono); font-size: 13px; color: var(--tekst); white-space: nowrap; }

/* sekcje */
.sekcja { padding: 24px 0 72px; }
h2 { margin: 0 0 28px; font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1.15; }
.oferta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); border: 1px solid var(--linia); }
.oferta a { text-decoration: none; padding: 32px; display: flex; flex-direction: column; gap: 14px; background: var(--tlo-karta); border-right: 1px solid var(--linia); }
.oferta a:last-child { border-right: 0; }
.oferta a:hover { background: rgba(255, 122, 26, 0.08); color: var(--tekst); }
.spec { font-family: var(--mono); font-size: 13px; color: var(--akcent); }
.oferta h3, .gry h3 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 24px; }
.oferta p, .gry p { margin: 0; color: var(--tekst-2); }

.gry { text-decoration: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding: 28px 32px; border: 1.5px dashed var(--akcent); background: var(--tlo-karta); }
.gry:hover { background: rgba(255, 122, 26, 0.08); color: var(--tekst); }
.gry-tekst { flex: 1 1 480px; display: flex; flex-direction: column; gap: 6px; }

.studio { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); gap: 0 32px; }
.studio p { margin: 0; font-size: 22px; line-height: 1.45; }
.studio .szary { color: var(--szary); }

.kontakt { padding: 56px 0; border-top: 1px solid var(--linia); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; }
.kontakt h2 { margin: 0; font-weight: 800; font-size: clamp(28px, 4vw, 52px); line-height: 1.08; }
.kontakt .btn { font-size: 20px; padding: 18px 28px; }

/* NaszeAuto — wyraźnie widoczne */
.dotacja { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; padding: 24px 28px; background: #fff; color: var(--tlo); }
.dotacja img { width: min(760px, 100%); height: auto; display: block; }
.dotacja p { margin: 0; font-weight: 600; font-size: 18px; }

.stopka { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; padding: 28px 0 40px; font-family: var(--mono); font-size: 13px; color: var(--szary); }
.stopka a { color: var(--szary); }

/* telefon: rysunek mniejszy, opisy pod spodem */
@media (max-width: 640px) {
  .hero { padding: 32px 0 56px; gap: 32px; }
  .rysunek { height: 320px; }
  .rysunek .wym-poz, .rysunek .wym-pion, .rysunek .wym-txt, .rysunek .opis-linia, .rysunek .opis-txt { display: none; }
  .tel { left: 50%; top: 0; margin-left: -80px; width: 160px; height: 320px; border-radius: 28px; }
  .tel-ekran { top: 36px; height: 84px; }
  .oferta a { border-right: 0; border-bottom: 1px solid var(--linia); }
  .oferta a:last-child { border-bottom: 0; }
  .gry { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }