/* ══════════════════════════════════════════════════════════════════
   GleboMap Pro — identyfikacja z ulotki, rozwinięta na stronę.
   Kolory pobrane pipetą z renderu PDF ulotki: grafit #1B2629, złoto #DEA43D.

   Wariant stylu ustawia się atrybutami na <html>:
     data-zloto="klasyczne|jasne"      — odcień akcentu
     data-hero="grafit|foto"           — tło hero
     data-produkt="kremowa|ciemna"     — sekcja „Co zobaczysz w aplikacji"
   Dzięki temu warianty do oceny różnią się jednym atrybutem, a nie osobnym plikiem.

   Zasady, które trzymamy twardo:
   • złoto wyłącznie jako tło albo akcent NA CIEMNYM — nigdy jako tekst na jasnym;
   • żaden tekst nie schodzi poniżej 4,5:1 (na ulotce drobne szarości schodziły ~3:1);
   • bez czystej czerni i czystej bieli;
   • łuki tylko w hero i w sekcji złotej.
   ══════════════════════════════════════════════════════════════════ */
:root{
  --grafit:#1B2629;
  --grafit-2:#223034;
  --grafit-3:#2E3D42;
  --krem:#F5F1E8;
  --krem-2:#FAF7F0;
  --atrament:#1B2629;        /* tekst na jasnym */
  --atrament-2:#4A565A;      /* 7,2:1 na kremie */
  --jasny:#F2EFE8;           /* tekst na ciemnym — zamiast czystej bieli */
  --tekst:#D7DEDC;           /* 10,1:1 na graficie */
  --tekst-2:#AEB9B7;         /* 6,6:1 na graficie */
  --zloto:#DEA43D;
  --zloto-ciemne:#C68D2B;
  --zloto-tekst-na:#15201F;  /* tekst na złotym tle */
}
html[data-zloto="jasne"]{
  --zloto:#E9BB64;
  --zloto-ciemne:#D3A24A;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--grafit); color:var(--tekst);
  font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.kontener{max-width:1180px;margin:0 auto;padding:0 28px;position:relative;z-index:2;}

/* ── koncentryczne łuki — czysty CSS, zero JS, zero opóźnienia treści ── */
.luki{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.luki::before{
  content:'';position:absolute;top:-40vw;right:-26vw;width:98vw;height:98vw;border-radius:50%;
  background:
    radial-gradient(circle, transparent 0 38%,   rgba(222,164,61,.10) 38% 38.35%,   transparent 38.35%),
    radial-gradient(circle, transparent 0 50%,   rgba(222,164,61,.08) 50% 50.3%,    transparent 50.3%),
    radial-gradient(circle, transparent 0 62%,   rgba(222,164,61,.06) 62% 62.28%,   transparent 62.28%),
    radial-gradient(circle, transparent 0 74%,   rgba(222,164,61,.045) 74% 74.25%,  transparent 74.25%),
    radial-gradient(circle, transparent 0 86%,   rgba(222,164,61,.03) 86% 86.22%,   transparent 86.22%);
}
.luki.ciemne::before{
  background:
    radial-gradient(circle, transparent 0 38%, rgba(27,38,41,.16) 38% 38.35%, transparent 38.35%),
    radial-gradient(circle, transparent 0 50%, rgba(27,38,41,.13) 50% 50.3%,  transparent 50.3%),
    radial-gradient(circle, transparent 0 62%, rgba(27,38,41,.10) 62% 62.28%, transparent 62.28%),
    radial-gradient(circle, transparent 0 74%, rgba(27,38,41,.07) 74% 74.25%, transparent 74.25%);
}

/* ── typografia ── */
.etykieta{display:inline-block;font-size:.76rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--zloto);margin-bottom:16px;}
.etykieta.na-jasnym{color:var(--atrament-2);}
.etykieta.na-zlotym{color:var(--zloto-tekst-na);opacity:.9;}
/* 2,2rem zamiast 3,3rem — nagłówek, podtytuł i oba przyciski mają się zmieścić
   w pierwszym ekranie 1440x900 bez przewijania. */
h1{font-size:2.2rem;line-height:1.18;margin:0;color:var(--jasny);font-weight:600;letter-spacing:-.02em;}
h2{font-size:2.25rem;line-height:1.2;margin:0;color:var(--jasny);font-weight:600;letter-spacing:-.01em;}
h2.na-jasnym{color:var(--atrament);}
h2.na-zlotym{color:var(--zloto-tekst-na);}
.zloty{color:var(--zloto);display:block;}
.lead{font-size:1.1rem;color:var(--tekst);margin:20px 0 30px;max-width:34em;font-weight:300;}
.lead.na-jasnym{color:var(--atrament-2);}

/* ── przyciski ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;
  border-radius:6px;font-weight:600;font-size:1rem;text-decoration:none;border:2px solid transparent;
  cursor:pointer;font-family:inherit;}
.btn-glowny{background:var(--zloto);color:var(--zloto-tekst-na);}
.btn-glowny:hover{background:var(--zloto-ciemne);}
.btn-obrys{background:transparent;color:var(--zloto);border-color:var(--zloto);}
.btn-ciemny{background:var(--grafit);color:var(--jasny);}
.btn-maly{padding:10px 18px;font-size:.9rem;}

/* ── pasek górny ── */
/* padding-top/bottom, nie skrót — skrót wyzerowałby boczny margines z .kontener
   i logo z menu dotykałoby krawędzi okna na szerokich ekranach. */
.pasek{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-top:18px;padding-bottom:18px;}
.logo{font-weight:700;font-size:1.2rem;color:var(--jasny);letter-spacing:-.01em;}
.logo span{color:var(--zloto);}
.logo small{display:block;font-size:.65rem;font-weight:300;color:var(--tekst-2);letter-spacing:.04em;margin-top:-3px;}
.pasek nav{display:flex;gap:26px;font-size:.93rem;}
.pasek nav a{color:var(--tekst);text-decoration:none;}

/* ── hero ── */
.hero{position:relative;padding:28px 0 62px;background:var(--grafit);}
html[data-hero="foto"] .hero{background:
  linear-gradient(rgba(27,38,41,.80), rgba(27,38,41,.86)),
  var(--hero-foto) center/cover no-repeat;}
html[data-hero="foto"] .hero .luki{opacity:.5;}
.hero-siatka{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center;}
html[data-hero="foto"] .hero-foto-obok{display:none;}
html[data-hero="foto"] .hero-siatka{grid-template-columns:1fr;max-width:40em;}
.akcje{display:flex;gap:12px;flex-wrap:wrap;}
.pod-akcjami{margin-top:18px;font-size:.92rem;color:var(--tekst-2);}
.foto{border-radius:12px;overflow:hidden;border:1px solid var(--grafit-3);}
.foto img{display:block;width:100%;height:auto;}

/* ── sekcje ── */
.sekcja{padding:64px 0;position:relative;}
.sekcja-grafit{background:var(--grafit);border-top:1px solid var(--grafit-3);}
.sekcja-krem{background:var(--krem);}
.sekcja-zlota{background:var(--zloto);color:var(--zloto-tekst-na);position:relative;overflow:hidden;}

/* ── kroki 01–04 ── */
.kroki{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:36px;}
.krok{background:var(--grafit-2);border:1px solid var(--grafit-3);border-radius:12px;padding:26px 24px;}
.krok-gora{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.krok-nr{font-size:1.5rem;font-weight:700;color:var(--zloto);line-height:1;}
.znacznik{font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;background:var(--zloto);color:var(--zloto-tekst-na);}
.znacznik.ja{background:transparent;color:var(--zloto);border:1px solid var(--zloto);}
.krok h3{margin:0 0 8px;font-size:1rem;font-weight:600;color:var(--jasny);letter-spacing:.06em;text-transform:uppercase;}
.krok p{margin:0;font-size:.97rem;color:var(--tekst);font-weight:300;}

/* ── „Co zobaczysz w aplikacji" ── */
html[data-produkt="ciemna"] .sekcja-produkt{background:var(--grafit);border-top:1px solid var(--grafit-3);}
html[data-produkt="ciemna"] .sekcja-produkt .etykieta{color:var(--zloto);}
html[data-produkt="ciemna"] .sekcja-produkt h2{color:var(--jasny);}
html[data-produkt="ciemna"] .sekcja-produkt .lead{color:var(--tekst);}
html[data-produkt="ciemna"] .karta-podpis h3{color:var(--jasny);}
html[data-produkt="ciemna"] .karta-podpis p{color:var(--tekst);}
.galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:38px;}
.karta{display:flex;flex-direction:column;gap:14px;}
/* Ramka laptopa — czysty CSS, bez dodatkowych obrazów do pobrania. */
.laptop{position:relative;}
.laptop-ekran{background:var(--grafit);border:7px solid var(--grafit);border-radius:10px 10px 2px 2px;
  box-shadow:0 10px 26px rgba(27,38,41,.22);overflow:hidden;cursor:zoom-in;}
.laptop-ekran img{display:block;width:100%;height:auto;}
.laptop-podstawa{height:9px;margin:0 -9%;border-radius:0 0 9px 9px;
  background:linear-gradient(var(--grafit-3), var(--grafit));}
.laptop-podstawa::after{content:'';display:block;width:14%;height:3px;margin:0 auto;
  background:rgba(242,239,232,.22);border-radius:0 0 3px 3px;}
.karta-podpis h3{margin:0 0 4px;font-size:1.06rem;font-weight:600;color:var(--atrament);}
.karta-podpis p{margin:0;font-size:.93rem;color:var(--atrament-2);font-weight:300;}

/* ── cena: grafit ze złotą pionową linią, jak w ulotce ── */
.sekcja-cena{background:var(--grafit);border-top:1px solid var(--grafit-3);}
.cena-blok{border-left:4px solid var(--zloto);padding-left:28px;max-width:46em;}

/* ── kontakt: złote tło, ciemny tekst — dół ulotki ── */
.kontakt-tresc{text-align:center;position:relative;z-index:2;}
.numer{font-size:3rem;font-weight:700;letter-spacing:-.01em;margin:8px 0 2px;display:inline-block;
  color:var(--zloto-tekst-na);text-decoration:none;}
.mail{color:#2B2517;font-weight:500;}

/* ── stopka ── */
.stopka{background:var(--grafit);padding:34px 0 40px;border-top:1px solid var(--grafit-3);}
.stopka .zastrzezenie{font-size:.86rem;color:var(--tekst-2);max-width:60em;margin:0 0 16px;font-weight:300;}
.stopka .dane{font-size:.9rem;color:var(--tekst);}
.stopka .dane b{color:var(--jasny);font-weight:600;letter-spacing:.06em;}

/* ── powiększenie zrzutu ── */
.lupa{position:fixed;inset:0;background:rgba(27,38,41,.94);display:none;align-items:center;
  justify-content:center;z-index:200;padding:24px;cursor:zoom-out;}
.lupa.on{display:flex;}
.lupa img{max-width:100%;max-height:88vh;border-radius:8px;border:1px solid var(--grafit-3);}
.lupa-opis{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:var(--tekst);font-size:.95rem;}

/* ── telefon ── */
.tel-pasek{display:none;}
@media (max-width:880px){
  body{font-size:16px;padding-bottom:74px;}
  .kontener{padding:0 20px;}
  .pasek{padding-top:12px;padding-bottom:12px;}
  /* na telefonie nazwa marki ma zostać w jednej linii, a nie łamać się na trzy */
  .logo{font-size:1.05rem;white-space:nowrap;}
  .logo small{white-space:normal;font-size:.6rem;}
  .pasek .btn-maly{padding:8px 14px;font-size:.84rem;}
  .pasek nav{display:none;}
  .hero{padding:14px 0 30px;}
  .hero-siatka{grid-template-columns:1fr;gap:22px;}
  /* Nagłówek, podtytuł i przycisk muszą być widoczne bez przewijania —
     dlatego zdjęcie idzie POD treść i maleją stopnie pisma oraz odstępy. */
  .hero-tresc{order:1;} .hero-foto-obok{order:2;}
  h1{font-size:1.95rem;line-height:1.16;}
  h2{font-size:1.58rem;}
  .etykieta{margin-bottom:9px;font-size:.66rem;letter-spacing:.18em;}
  .lead{font-size:.98rem;margin:13px 0 18px;}
  .btn{width:100%;}
  .pod-akcjami{margin-top:11px;font-size:.85rem;}
  .sekcja{padding:40px 0;}
  .kroki{grid-template-columns:1fr;gap:14px;margin-top:24px;}
  .krok{padding:19px 17px;}
  /* Galeria jako karuzela z zatrzaskiem — bez biblioteki. */
  .galeria{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:26px -20px 0;padding:0 20px 10px;scrollbar-width:none;}
  .galeria::-webkit-scrollbar{display:none;}
  .karta{flex:0 0 78%;scroll-snap-align:center;}
  /* Na telefonie ramka telefonu zamiast laptopa. */
  .laptop-ekran{border-width:9px;border-radius:18px;}
  .laptop-podstawa{display:none;}
  .cena-blok{padding-left:18px;}
  .numer{font-size:2.1rem;}
  .tel-pasek{display:block;position:fixed;left:0;right:0;bottom:0;z-index:100;
    background:var(--zloto);padding:13px 16px;box-shadow:0 -4px 18px rgba(0,0,0,.45);}
  .tel-pasek a{display:block;text-align:center;color:var(--zloto-tekst-na);font-weight:700;
    font-size:1.06rem;text-decoration:none;}
}

/* ══════════ SEKCJE DOBUDOWANE W KROKU 2 ══════════ */

/* ── problem ── */
.problem-siatka{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:34px;}
.problem-karta{background:var(--grafit-2);border:1px solid var(--grafit-3);border-radius:12px;padding:26px 24px;}
.problem-karta.zle{border-left:4px solid #C9584A;}
.problem-karta.dobrze{border-left:4px solid var(--zloto);}
.problem-karta h3{margin:0 0 8px;font-size:1.05rem;color:var(--jasny);font-weight:600;}
.problem-karta p{margin:0;color:var(--tekst);font-weight:300;font-size:.97rem;}

/* ── co dostajesz ── */
/* Pięć kart w jednym rzędzie na desktopie — auto-fit łamał je na 4 + 1. */
.rdzen{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin-top:34px;}
.poz{background:var(--krem-2);border:1px solid #E4DECF;border-radius:12px;padding:20px 17px;}
.poz h3{margin:0 0 6px;font-size:1.03rem;color:var(--atrament);font-weight:600;}
.poz p{margin:0;font-size:.93rem;color:var(--atrament-2);font-weight:300;}
.poz .znak{display:inline-block;width:34px;height:34px;border-radius:8px;background:var(--grafit);
  color:var(--zloto);font-weight:700;text-align:center;line-height:34px;margin-bottom:12px;font-size:.95rem;}
.dodatkowo{margin-top:34px;padding-top:24px;border-top:1px solid #E4DECF;}
.dodatkowo h3{margin:0 0 4px;font-size:1rem;color:var(--atrament);font-weight:600;letter-spacing:.04em;text-transform:uppercase;}
.dodatkowo .male{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-top:14px;}
.dodatkowo .male div{font-size:.92rem;color:var(--atrament-2);font-weight:300;
  background:var(--krem-2);border:1px solid #E8E2D4;border-radius:9px;padding:13px 15px;}
.dodatkowo .male b{color:var(--atrament);font-weight:600;display:block;font-size:.95rem;margin-bottom:2px;}
/* Pierwsza kafelka wyróżniona — to najważniejsza z „dodatkowo", nie kolejna z listy. */
.dodatkowo .male .wyroz{border-color:var(--zloto);border-left-width:4px;background:#FBF4E6;}
.dodatkowo .male .wyroz b{display:flex;align-items:center;gap:7px;}
.wykrzyknik{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:19px;height:19px;border-radius:50%;background:var(--zloto);color:var(--zloto-tekst-na);
  font-size:.78rem;font-weight:700;line-height:1;}

/* ── przykład z pola ── */
.przyklad{background:var(--grafit-2);border:1px solid var(--grafit-3);border-left:4px solid var(--zloto);
  border-radius:12px;padding:26px 26px;margin-top:28px;}
.do-uzupelnienia{border:1px dashed var(--zloto);border-radius:10px;padding:18px 20px;
  color:var(--tekst-2);font-size:.92rem;font-weight:300;}

/* ── o mnie ── */
.omnie{display:grid;grid-template-columns:300px 1fr;gap:34px;align-items:start;margin-top:30px;}
.omnie .portret{border-radius:12px;overflow:hidden;border:1px solid var(--grafit-3);background:var(--grafit-2);
  aspect-ratio:3/4;display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--tekst-2);font-size:.88rem;padding:18px;font-weight:300;}
.omnie .portret img{display:block;width:100%;height:100%;object-fit:cover;}

/* ── FAQ ── */
.faq{margin-top:30px;max-width:56em;}
.faq details{border-bottom:1px solid #E4DECF;padding:4px 0;}
.faq summary{cursor:pointer;list-style:none;padding:15px 30px 15px 0;font-weight:600;
  color:var(--atrament);font-size:1.02rem;position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:'+';position:absolute;right:4px;top:13px;font-size:1.4rem;
  color:var(--zloto-ciemne);font-weight:400;line-height:1;}
.faq details[open] summary::after{content:'–';}
.faq p{margin:0 0 16px;color:var(--atrament-2);font-weight:300;font-size:.97rem;max-width:52em;}

/* ── formularz ── */
.form-siatka{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:26px;max-width:46em;
  margin-left:auto;margin-right:auto;text-align:left;}
.form-siatka .pelny{grid-column:1/-1;}
.pole-etykieta{display:block;font-size:.84rem;font-weight:600;color:var(--zloto-tekst-na);margin-bottom:5px;}
.form-siatka input,.form-siatka textarea,.form-siatka select{
  width:100%;padding:13px 14px;border-radius:7px;border:2px solid rgba(21,32,31,.28);
  background:#FDFBF6;color:var(--atrament);font-family:inherit;font-size:1rem;}
.form-siatka input:focus,.form-siatka textarea:focus{outline:3px solid var(--grafit);outline-offset:1px;}
.zgoda{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;color:var(--zloto-tekst-na);
  line-height:1.5;text-align:left;}
.zgoda input{width:20px;height:20px;flex:0 0 20px;margin-top:2px;accent-color:var(--grafit);}
.zgoda a{color:var(--zloto-tekst-na);font-weight:600;}
.pod-forma{font-size:.86rem;color:#2B2517;margin-top:14px;}
.pod-forma a{color:var(--zloto-tekst-na);font-weight:600;}

/* ── stopka ── */
.stopka-siatka{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:28px;margin-bottom:26px;}
.stopka h4{margin:0 0 10px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--zloto);font-weight:600;}
.stopka a{color:var(--tekst);text-decoration:none;display:block;margin-bottom:6px;font-size:.93rem;}
.stopka a:hover{color:var(--jasny);}
.stopka .prawa{border-top:1px solid var(--grafit-3);padding-top:18px;font-size:.86rem;color:var(--tekst-2);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}

/* ── polityka prywatności ── */
.dokument{background:var(--krem);color:var(--atrament);padding:48px 0 60px;}
.dokument h1{color:var(--atrament);font-size:2.1rem;margin-bottom:8px;}
.dokument h2{color:var(--atrament);font-size:1.25rem;margin:30px 0 8px;}
.dokument p,.dokument li{color:var(--atrament-2);font-weight:300;font-size:1rem;}
.dokument a{color:var(--grafit);font-weight:600;}

@media (max-width:880px){
  .problem-siatka{grid-template-columns:1fr;gap:14px;margin-top:24px;}
  /* mobile: patrz niżej — pięć kart w słupku */
  .rdzen{grid-template-columns:1fr;gap:14px;}
  .omnie{grid-template-columns:1fr;gap:20px;}
  .omnie .portret{max-width:260px;}
  .form-siatka{grid-template-columns:1fr;}
  .stopka-siatka{grid-template-columns:1fr;gap:22px;}
  .dokument h1{font-size:1.6rem;}
}

/* ── rdzeń usługi: 3 + 2 wyśrodkowane na średnich ekranach ──
   Pięć równych kolumn mieści się dopiero od ~1100 px; niżej siatka sześciu
   kolumn, karty po 2 — ostatni rząd przesunięty o jedną kolumnę, żeby
   dwie pozostałe stały pośrodku, a nie przy lewej krawędzi. */
@media (min-width:881px) and (max-width:1099px){
  .rdzen{grid-template-columns:repeat(6,minmax(0,1fr));gap:18px;}
  .rdzen .poz{grid-column:span 2;}
  .rdzen .poz:nth-child(4){grid-column:2 / span 2;}
  .rdzen .poz:nth-child(5){grid-column:4 / span 2;}
}
/* ── przykład z pola: dwa widoki z aplikacji obok siebie ── */
.przyklad-pary{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:30px;}
.przyklad{background:var(--grafit-2);border:1px solid var(--grafit-3);border-left:4px solid var(--zloto);
  border-radius:12px;padding:22px 22px 18px;margin:0;}
.przyklad figcaption{color:var(--tekst);font-size:.95rem;font-weight:300;margin-bottom:16px;}
.przyklad figcaption b{display:block;color:var(--jasny);font-weight:600;margin-bottom:6px;}
.przyklad figcaption b.zloty{display:inline;color:var(--zloto);margin:0;}
.przyklad img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--grafit-3);}
.przyklad-stopka{margin:22px 0 0;font-size:.92rem;color:var(--tekst-2);font-weight:300;max-width:62em;}
@media (max-width:880px){
  .przyklad-pary{grid-template-columns:1fr;gap:14px;margin-top:22px;}
  .przyklad{padding:18px 16px 14px;}
}