@charset "utf-8";
/* oraclelights.pl
   ---------------
   PALETA JEST WYNIKIEM POMIARU, NIE GUSTU.
   Logo Oracle to chrom z ciemnoczerwoną obwódką na bieli. Czerwień ze znaku
   (#6e3031) ma 9,76:1 na bieli i 1,78:1 na graficie — na ciemnym tle znika.
   Dlatego serwis jest JASNY, a ciemne są tylko pasy pod zdjęcia zapalonych
   lamp. Żaden kolor nie jest ten sam w obu trybach:

     akcent   jasne #9b1c21 (7,42:1)   ciemne #ef6a6c (5,87:1)
     bursztyn jasne #8a5200 (5,83:1)   ciemne #ffa51f (9,00:1)

   Przycisk wypełniony czerwienią ma na jasnym tle biały napis (8,13:1),
   a na ciemnym grafitowy (5,87:1) — biel na #ef6a6c dałaby 3,02:1.

   Bursztyn nie jest ozdobą: to kolor kierunkowskazu, o którym mówi ta
   strona. Pojawia się wyłącznie tam, gdzie tekst dotyczy modułu
   amber/white. */

:root {
  color-scheme: light;

  --tlo: #f6f4f3;
  --tlo-2: #ffffff;
  --tekst: #1a1b1e;
  --tekst-cichy: #5d5f66;
  --kreska: #e2dedb;
  --akcent: #9b1c21;
  --akcent-tekst: #ffffff;
  --bursztyn: #8a5200;
  --cien: 0 1px 2px rgba(26,27,30,.06), 0 8px 24px rgba(26,27,30,.06);

  --display: 'Saira', 'Arial Narrow', Arial, sans-serif;
  --body: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --srodek: 1180px;
  --gutter: 20px;
}

.ciemna {
  --tlo: #17181c;
  --tlo-2: #1f2127;
  --tekst: #ece9e6;
  --tekst-cichy: #9b9ba2;
  --kreska: #32343b;
  --akcent: #ef6a6c;
  --akcent-tekst: #17181c;
  --bursztyn: #ffa51f;
  --cien: none;
  background: var(--tlo);
  color: var(--tekst);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--tlo);
  color: var(--tekst);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--akcent); }

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: .92em;
  background: var(--tlo-2);
  border: 1px solid var(--kreska);
  border-radius: 3px;
  padding: 1px 6px;
  white-space: nowrap;
}

.srodek { max-width: var(--srodek); margin-inline: auto; padding-inline: var(--gutter); }
.waski { max-width: 720px; }
.sek { padding-block: clamp(44px, 6.5vw, 86px); }
.pas { background: var(--tlo-2); border-block: 1px solid var(--kreska); }

.nad {
  font-family: var(--display);
  text-wrap: balance;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--akcent);
  margin-bottom: 10px;
}
.lead {
  color: var(--tekst-cichy);
  font-size: 1.1rem;
  max-width: 64ch;
  margin-block: 14px 0;
}
h2 + .lead { margin-top: 12px; }
.wiecej { margin-top: 26px; font-weight: 600; }
.wiecej a { text-decoration-thickness: 2px; text-underline-offset: 4px; }

.uwaga {
  border-left: 3px solid var(--bursztyn);
  padding: 2px 0 2px 16px;
  color: var(--tekst-cichy);
  margin-top: 22px;
}

.cytat {
  font-family: var(--display);
  font-size: clamp(1.3rem, 3vw, 1.8rem);
  font-weight: 600;
  line-height: 1.25;
  border-left: 3px solid var(--akcent);
  padding-left: 20px;
  margin-top: 30px;
}
.cytat small {
  display: block;
  font-family: var(--body);
  font-size: .95rem;
  font-weight: 400;
  color: var(--tekst-cichy);
  margin-top: 8px;
}

/* ——— pasek górny ——— */
.pasek {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(19, 20, 24, .94);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #2b2d33;
  --tlo-2: #24262c;
  --kreska: #32343b;
}
.pasek nav a { color: #b9b6b2; }
.pasek nav a:hover { color: #ece9e6; background: #24262c; }
.pasek nav a.tu { color: #ef6a6c; }
.burger i { background: #ece9e6; }
.js .pasek nav.otwarte { background: #131418; }
.pasek-in { display: flex; align-items: center; gap: 18px; min-height: 68px; }
.znak { flex: none; line-height: 0; }
.znak img { width: 134px; height: auto; }
.pasek nav { display: none; margin-left: auto; gap: 4px; }
.pasek nav a {
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--tekst-cichy);
  padding: 8px 11px;
  border-radius: 4px;
  white-space: nowrap;
}
.pasek nav a:hover { color: var(--tekst); background: var(--tlo-2); }
.pasek nav a.tu { color: var(--akcent); }
.burger {
  margin-left: auto; display: flex; flex-direction: column; gap: 4px;
  background: none; border: 0; padding: 10px; cursor: pointer;
}
.burger i { display: block; width: 22px; height: 2px; background: var(--tekst); }
@media (min-width: 1040px) { .pasek nav { display: flex; } .burger { display: none; } }
/* BEZ JAVASCRIPTU MENU MA DZIAŁAĆ.
   Nawigacja jest widoczna domyślnie — rozwinięta listą na wąskim ekranie.
   Dopiero skrypt dokłada klasę `js` na <html> i wtedy menu chowa się pod
   przycisk. Odwrotna kolejność (ukryj w CSS, pokaż skryptem) daje stronę
   bez żadnej nawigacji, gdy skrypt nie dojdzie. */
@media (max-width: 1039px) {
  .pasek nav {
    display: flex; flex-direction: column; gap: 0;
    width: 100%; order: 3; padding-bottom: 10px;
  }
  .pasek-in { flex-wrap: wrap; }
  .pasek nav a { padding: 11px 0; border-bottom: 1px solid var(--kreska); border-radius: 0; }
  .pasek nav a:last-child { border-bottom: 0; }
}
.js .pasek nav.otwarte {
  display: flex; flex-direction: column; gap: 0;
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--tlo); border-bottom: 1px solid var(--kreska);
  padding: 8px var(--gutter) 16px; width: auto;
}
.js .pasek nav.otwarte a { padding: 12px 0; border-bottom: 1px solid var(--kreska); border-radius: 0; }

/* ——— przyciski ——— */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 600; font-size: .92rem;
  letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  padding: 14px 24px; border-radius: 4px; border: 1px solid transparent;
}
.btn-glowny { background: var(--akcent); color: var(--akcent-tekst); }
.btn-glowny:hover { filter: brightness(1.08); }
.btn-obrys { border-color: var(--kreska); color: var(--tekst); background: var(--tlo-2); }
.btn-obrys:hover { border-color: var(--akcent); color: var(--akcent); }
.hero-guziki { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ——— nagłówek strony ——— */
.hero, .naglowek { position: relative; overflow: hidden; background: #17181c; }
.hero { min-height: min(76vh, 620px); display: flex; align-items: flex-end; }
.naglowek { display: flex; align-items: flex-end; min-height: 340px; }
.hero-foto, .naglowek-foto { position: absolute; inset: 0; }
.hero-foto img, .naglowek-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
@media (max-width: 700px) {
  .hero { min-height: min(72vh, 540px); }
  .hero-foto img, .naglowek-foto img { object-position: center 80%; }
}
/* Przyciemnienie kadru. Zdjęcia ze studia mają jasne tło i przy słabszym
   przyciemnieniu świeci ono jasnym pasem nad nagłówkiem — widać to przede
   wszystkim na telefonie, gdzie kadr jest ciaśniejszy. */
.hero-foto::after, .naglowek-foto::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(23,24,28,.62) 0%, rgba(23,24,28,.48) 38%, rgba(23,24,28,.94) 100%);
}
@media (max-width: 700px) {
  .hero-foto::after, .naglowek-foto::after {
    background: linear-gradient(180deg, rgba(23,24,28,.72) 0%, rgba(23,24,28,.6) 34%, rgba(23,24,28,.96) 100%);
  }
}
.hero-in, .naglowek-in { position: relative; width: 100%; padding-block: clamp(34px, 5vw, 64px); color: #ece9e6; }
.hero-in .lead, .naglowek-in .lead { color: #cfccc8; }
.hero-in .nad, .naglowek-in .nad { color: #ef6a6c; }
.hero-in .btn-obrys, .naglowek-in .btn-obrys {
  background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3); color: #ece9e6;
}
.hero-in .btn-obrys:hover, .naglowek-in .btn-obrys:hover { border-color: #ef6a6c; color: #ef6a6c; }
.hero-in .btn-glowny, .naglowek-in .btn-glowny { background: #ef6a6c; color: #17181c; }

.naglowek-bez-foto {
  background: var(--tlo-2);
  border-bottom: 1px solid var(--kreska);
  min-height: 0;
}
.naglowek-bez-foto .naglowek-in { color: var(--tekst); }
.naglowek-bez-foto .naglowek-in .lead { color: var(--tekst-cichy); }
.naglowek-bez-foto .naglowek-in .nad { color: var(--akcent); }
.naglowek-bez-foto .naglowek-in .btn-glowny { background: var(--akcent); color: var(--akcent-tekst); }
.naglowek-bez-foto .naglowek-in .btn-obrys {
  background: var(--tlo); border-color: var(--kreska); color: var(--tekst);
}

/* ——— kafle aut ——— */
.auta-siatka { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
@media (min-width: 560px) { .auta-siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .auta-siatka { grid-template-columns: repeat(4, 1fr); } }
.auto-kafel {
  position: relative; display: block; overflow: hidden; border-radius: 6px;
  text-decoration: none; color: #ece9e6; background: #17181c; min-width: 0;
}
.auto-kafel img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .45s ease; }
.auto-kafel:hover img { transform: scale(1.05); }
.auto-kafel-tresc {
  position: absolute; inset: auto 0 0 0; padding: 16px 18px;
  background: linear-gradient(180deg, rgba(23,24,28,0), rgba(23,24,28,.92) 62%);
}
.auto-kafel-tresc b { display: block; font-family: var(--display); font-size: 1.22rem; font-weight: 700; }
.auto-kafel-tresc small { display: block; color: #b9b6b2; font-size: .86rem; }
.auto-kafel-ile {
  display: inline-block; margin-top: 8px; font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #ef6a6c;
}

/* ——— karty produktów ——— */
.siatka { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 30px; }
@media (min-width: 520px) { .siatka { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .siatka { grid-template-columns: repeat(3, 1fr); } }
.karta {
  display: flex; flex-direction: column; min-width: 0;
  background: var(--tlo-2); border: 1px solid var(--kreska); border-radius: 6px;
  overflow: hidden; text-decoration: none; color: inherit; box-shadow: var(--cien);
  transition: border-color .2s ease, transform .2s ease;
}
.karta:hover { border-color: var(--akcent); transform: translateY(-2px); }
.karta-foto { display: block; background: #fff; }
.karta-foto img { width: 100%; aspect-ratio: 1/1; object-fit: contain; padding: 14px; }
.karta-tresc { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; flex: 1; }
.karta-ref {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: .74rem; letter-spacing: .04em; color: var(--tekst-cichy);
}
.karta-nazwa { font-weight: 600; line-height: 1.35; font-size: 1rem; }
.karta-cena {
  font-family: var(--display); font-weight: 700; font-size: 1.4rem;
  margin-top: auto; padding-top: 10px; font-variant-numeric: tabular-nums;
}
.karta-cena small {
  font-family: var(--body); font-size: .72rem; font-weight: 400;
  color: var(--tekst-cichy); margin-left: 6px; letter-spacing: .06em;
  text-transform: uppercase;
}
.karta-cta {
  font-size: .8rem; font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--akcent);
}

/* ——— kafle treściowe ——— */
.kafle { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 30px;
         background: var(--kreska); border: 1px solid var(--kreska); border-radius: 6px; overflow: hidden; }
@media (min-width: 620px) { .kafle { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kafle { grid-template-columns: repeat(4, 1fr); } }
.kafle-2 { grid-template-columns: 1fr; }
@media (min-width: 620px) { .kafle-2 { grid-template-columns: repeat(2, 1fr); } }
.kafel { background: var(--tlo-2); padding: 22px 20px; min-width: 0; }
.kafel b { display: block; font-family: var(--display); font-size: 1.05rem; font-weight: 600; margin-bottom: 7px; }
.kafel p { color: var(--tekst-cichy); font-size: .95rem; margin: 0; }

/* ——— tabela, listy ——— */
.tabela { width: 100%; border-collapse: collapse; margin-top: 22px; font-size: .98rem; }
.tabela th, .tabela td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--kreska); }
.tabela th {
  font-family: var(--display); font-size: .78rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--tekst-cichy);
}
.tabela tbody tr:last-child td { border-bottom: 0; }

.odznaki { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.odznaki li {
  background: var(--tlo-2); border: 1px solid var(--kreska); border-radius: 100px;
  padding: 8px 16px; font-size: .9rem; color: var(--tekst-cichy);
}
.odznaki-pion { flex-direction: column; align-items: flex-start; }

.lista-ptaszki { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 680px) { .lista-ptaszki { grid-template-columns: repeat(2, 1fr); } }
.lista-ptaszki li { position: relative; padding-left: 26px; }
.lista-ptaszki li::before {
  content: ''; position: absolute; left: 0; top: .62em;
  width: 10px; height: 10px; border-radius: 2px; background: var(--akcent);
}

.katy { display: grid; grid-template-columns: 1fr; gap: 1px; margin-top: 30px;
        background: var(--kreska); border: 1px solid var(--kreska); border-radius: 6px; overflow: hidden; }
@media (min-width: 560px) { .katy { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .katy { grid-template-columns: repeat(3, 1fr); } }
.kat { background: var(--tlo-2); padding: 16px 18px; min-width: 0; }
.kat b { display: block; font-weight: 600; font-size: .98rem; }
.kat span { color: var(--tekst-cichy); font-size: .88rem; }

/* ——— sekcja dwukolumnowa ——— */
.dwie { display: grid; grid-template-columns: 1fr; gap: 30px; align-items: center; }
@media (min-width: 900px) { .dwie { grid-template-columns: 1fr 1fr; gap: 50px; } }
.foto-pas { border-radius: 6px; width: 100%; aspect-ratio: 4/3; object-fit: cover; }

/* ——— FAQ ——— */
.faq { border-bottom: 1px solid var(--kreska); }
.faq summary {
  cursor: pointer; list-style: none; padding: 20px 36px 20px 0; position: relative;
  font-family: var(--display); font-weight: 600; font-size: 1.1rem; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+'; position: absolute; right: 4px; top: 16px;
  font-size: 1.6rem; font-weight: 400; color: var(--akcent); line-height: 1;
}
.faq[open] summary::after { content: '–'; }
.faq > div { padding-bottom: 22px; color: var(--tekst-cichy); max-width: 68ch; }

/* ——— artykuł ——— */
.artykul h2 { margin-top: 42px; margin-bottom: 14px; }
.artykul h2:first-child { margin-top: 0; }
.dalej-siatka { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 28px; }
@media (min-width: 760px) { .dalej-siatka { grid-template-columns: repeat(2, 1fr); } }
.dalej {
  display: block; padding: 22px 24px; border: 1px solid var(--kreska); border-radius: 6px;
  background: var(--tlo); text-decoration: none; color: inherit; min-width: 0;
}
.dalej:hover { border-color: var(--akcent); }
.dalej b { display: block; font-family: var(--display); font-size: 1.1rem; font-weight: 600; margin-bottom: 6px; }
.dalej span { color: var(--tekst-cichy); font-size: .94rem; }

/* ——— stopka ——— */
.stopka {
  background: #17181c; color: #ece9e6; padding-block: 56px 28px; margin-top: 0;
}
.stopka a { color: #b9b6b2; text-decoration: none; }
.stopka a:hover { color: #ef6a6c; }
.stopka-siatka { display: grid; grid-template-columns: 1fr; gap: 32px; }
@media (min-width: 760px) { .stopka-siatka { grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; } }
.stopka h2 {
  font-size: .78rem; font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; color: #8d8b88; margin-bottom: 14px;
}
.stopka ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: .94rem; }
.stopka-znak { width: 150px; height: auto; margin-bottom: 16px; }
.stopka-o { color: #b9b6b2; font-size: .94rem; margin-bottom: .6em; }
.mail { margin-top: 14px; }
.mail a {
  font-weight: 600; color: #ef6a6c; text-decoration: underline;
  text-underline-offset: 4px; word-break: break-word;
}
.mail-duzy { margin-top: 28px; font-family: var(--display); font-size: clamp(1.2rem, 3.4vw, 1.8rem); }
.mail-duzy a { color: var(--akcent); }
.stopka-dol {
  margin-top: 40px; padding-top: 20px; border-top: 1px solid #32343b;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between;
  font-size: .84rem; color: #8d8b88;
}

/* Ze skryptem: menu chowa się pod przycisk. */
@media (max-width: 1039px) {
  .js .pasek nav:not(.otwarte) { display: none; }
  .js .pasek-in { flex-wrap: nowrap; }
  .js .pasek nav.otwarte { flex-wrap: wrap; }
}