/* apteki.adsy.pl - 1:1 z makietą Claude Design (tablice apteki-adsy.dc.html i apteki-adsy-telefon.dc.html, 20.10.2026).
   Inter, czerń na bieli, akcenty adsy: #f5004f / #3fa2f6 / #ffaf00. Telefon (do 640 px) wg tablicy 390 px. */
:root {
  --czarny: #000000; --bialy: #ffffff; --szary1: #1f1f1f; --szary2: #505050; --szary3: #8a8a8a; --linia: #cfcfcf; --linia2: #e6e6e6;
  --tlo2: #fafafa; --czerwien: #f5004f; --blekit: #3fa2f6; --bursztyn: #ffaf00;
  --maxw: 1414px; /* makieta: max-width 1350px bez border-box + padding 2x32px */
  --grad-tekst: linear-gradient(90deg, #ffaf00, #f5004f 50%, #3fa2f6);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bialy); color: var(--czarny); font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; overflow-x: hidden; }
a { color: var(--czerwien); }
a:hover { color: #b8003b; }
img, svg { max-width: 100%; }
h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }
.m-only { display: none; }
.pomin { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 10px 16px; z-index: 50; }
.pomin:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--blekit); outline-offset: 2px; }

.testowa { background: var(--bursztyn); color: #000; text-align: center; font-size: 13px; padding: 7px 16px; line-height: 1.4; }

/* przyciski */
.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; border-radius: 999px; min-height: 44px; font: inherit; font-weight: 600; cursor: pointer; }
.btn-czarny { background: var(--czarny); color: var(--bialy); padding: 12px 22px; border: 0; }
.btn-czarny:hover { background: #262626; color: var(--bialy); }
.btn-obrys { border: 1.5px solid var(--czarny); color: var(--czarny); padding: 12px 22px; background: transparent; }
.btn-obrys:hover { background: var(--czarny); color: var(--bialy); }
.btn-duzy.btn-czarny { padding: 15px 26px; }
.btn-duzy.btn-obrys { padding: 14px 26px; }

/* nagłówek */
.nagl { max-width: var(--maxw); margin: 0 auto; padding: 20px 32px; display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; }
.logo { text-decoration: none; color: var(--czarny); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; line-height: 1.2; }
.logo span { font-weight: 600; font-size: 16px; color: var(--szary2); letter-spacing: -0.01em; }
.logo:hover { color: var(--czarny); }
.menu { display: flex; flex-wrap: wrap; gap: 26px; font-weight: 500; font-size: 15px; }
.menu a { color: var(--szary1); text-decoration: none; }
.menu a:hover { color: var(--czerwien); }
.menu .menu-cta { display: none; }
.menu-btn { display: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linia); background: var(--bialy); align-items: center; justify-content: center; padding: 0; cursor: pointer; }

/* hero */
.hero { max-width: var(--maxw); margin: 0 auto; padding: 64px 32px 40px; text-align: center; }
.pigulka { margin: 0 0 18px; display: inline-block; font-size: 14px; font-weight: 600; border: 1px solid var(--linia); border-radius: 999px; padding: 6px 16px; line-height: 1.6; }
.hero h1 { margin: 0 auto; font-size: 76px; line-height: 1.04; letter-spacing: -0.04em; font-weight: 800; max-width: 1050px; }
.grad { background: var(--grad-tekst); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { margin: 22px auto 30px; font-size: 19px; color: var(--szary2); max-width: 720px; }
.hero-btn { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* panel w hero (zamiast zrzutu z makiety) */
.panel { margin: 48px auto 0; max-width: 1100px; height: 420px; border-radius: 28px; background: var(--tlo2); border: 1px solid var(--linia2); display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; padding: 22px; text-align: left; overflow: hidden; }
.panel-l, .panel-p { background: var(--bialy); border: 1px solid var(--linia2); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.panel-g { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; }
.chip { font-size: 12px; font-weight: 600; border: 1px solid var(--linia); border-radius: 999px; padding: 2px 10px; color: var(--szary2); white-space: nowrap; }
.chip-ciemny { background: var(--czarny); color: var(--bialy); border-color: var(--czarny); }
.kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.kafel { border: 1px solid var(--linia2); border-radius: 14px; padding: 10px 12px; display: grid; gap: 8px; font-size: 12px; color: var(--szary2); line-height: 1.3; }
.kafel svg { width: 100%; height: 30px; display: block; }
.wykres { flex: 1; border: 1px solid var(--linia2); border-radius: 14px; padding: 10px 12px 0; display: flex; flex-direction: column; font-size: 12px; color: var(--szary2); min-height: 0; }
.wykres svg { flex: 1; width: 100%; height: 100%; min-height: 80px; display: block; }
.panel-st { margin: 0; font-size: 12px; color: var(--szary2); }
.lista12 { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.lista12 li { display: flex; align-items: center; gap: 8px; line-height: 1.3; }
.lista12 svg { flex-shrink: 0; color: #0b7a3b; }
.panel-akc { margin: auto 0 0; font-size: 12px; font-weight: 600; background: var(--tlo2); border-radius: 10px; padding: 8px 10px; }

/* sekcje */
.sek { max-width: var(--maxw); margin: 0 auto; }
.sek h2 { font-size: 46px; letter-spacing: -0.03em; font-weight: 700; line-height: 1.6; }
.sek-liczby { padding: 60px 32px; }
.liczby-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 48px; align-items: center; }
.sek-liczby h2 { margin: 0 0 14px; line-height: 1.15; }
.lead { margin: 0; color: var(--szary2); font-size: 18px; }
.staty { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--linia); border-left: 1px solid var(--linia); }
.stat { padding: 24px; border-right: 1px solid var(--linia); border-bottom: 1px solid var(--linia); }
.stat-l { font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.6; }
.stat-o { color: var(--szary2); }
.stat-o a { color: var(--szary2); }

.sek-oferta { padding: 40px 32px 80px; }
.sek-oferta h2 { margin: 0 0 28px; }
.karty4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 16px; }
.karta { border: 1px solid var(--linia2); border-radius: 24px; padding: 26px; }
.karta-n { font-weight: 700; color: #767676; }
.karta h3 { margin: 10px 0 8px; font-size: 22px; line-height: 1.6; }
.karta p { margin: 0; color: var(--szary2); }

.sek-wolno { background: var(--czarny); color: var(--bialy); }
.wolno-in { max-width: var(--maxw); margin: 0 auto; padding: 80px 32px; }
.wolno-in h2 { margin: 0 0 28px; font-size: 46px; letter-spacing: -0.03em; font-weight: 700; line-height: 1.6; }
.wolno-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; }
.wolno-k { background: var(--szary1); border-radius: 24px; padding: 28px; }
.wolno-k h3 { margin: 0 0 14px; font-size: 22px; line-height: 1.6; }
.niebieski { color: var(--blekit); }
.bursztyn { color: var(--bursztyn); }
.wolno-k ul { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--linia2); }
.wolno-st { margin: 20px 0 0; color: #b5b5b5; font-size: 14px; }
.wolno-st a { color: #d9d9d9; }
.wolno-st a:hover { color: var(--bialy); }

.sek-pakiety { padding: 80px 32px; }
.sek-pakiety h2 { margin: 0 0 6px; color: var(--czarny); }
.pk-pod { margin: 0 0 30px; color: var(--szary1); }
.pakiety { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.pk { border: 1px solid var(--linia2); border-radius: 28px; padding: 30px; display: grid; gap: 12px; align-content: start; }
.pk-wyr { background: radial-gradient(circle at 20% 0%, rgba(255,175,0,0.35), transparent 55%), radial-gradient(circle at 100% 60%, rgba(245,0,79,0.25), transparent 50%), radial-gradient(circle at 0% 100%, rgba(63,162,246,0.30), transparent 55%), var(--bialy); }
.pk-nazwa { display: flex; justify-content: space-between; align-items: center; font-weight: 700; }
.pk-znak { background: var(--czarny); color: var(--bialy); font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; line-height: 1.6; }
.pk-cena { font-size: 46px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.6; }
.pk-cena span { font-size: 16px; font-weight: 500; color: var(--szary2); letter-spacing: 0; }
.pk-wyr .pk-cena span, .pk-wyr .pk-wdr { color: var(--szary1); }
.pk-wiecej { display: grid; gap: 12px; }
.pk-wdr { color: var(--szary2); }
.pk ul { margin: 0; padding-left: 20px; color: var(--szary1); }
.pk-wyr ul { color: var(--czarny); }
.pk-btn { padding: 12px; width: 100%; }
.pk { position: relative; }
.pk-rozwin { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--linia); background: var(--bialy); cursor: pointer; color: var(--czarny); padding: 0; }
.pk-rozwin svg { transition: transform .2s; }
.pk.otwarte .pk-rozwin svg { transform: rotate(45deg); }
.wolno-det summary { cursor: pointer; font-weight: 600; color: #d9d9d9; min-height: 44px; display: flex; align-items: center; }
.wolno-det p { margin: 4px 0 0; }
.pk-st { margin: 16px 0 0; color: var(--szary2); font-size: 14px; }

.sek-katalog { padding: 0 32px 80px; }
.katalog { border: 1px solid var(--linia2); border-radius: 28px; padding: 32px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 28px; align-items: center; }
.katalog h2 { margin: 0 0 10px; font-size: 38px; }
.katalog p { margin: 0; color: var(--szary2); }
.profil { height: 220px; border-radius: 20px; background: var(--tlo2); border: 1px solid var(--linia2); padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.profil-g { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 18px; }
.chip-otw { color: #0b6b34; border-color: #9fd4b3; background: #effaf3; }
.profil-w { display: grid; gap: 4px; font-size: 14px; color: var(--szary1); }
.profil-w span { background: var(--bialy); border: 1px solid var(--linia2); border-radius: 10px; padding: 6px 10px; }
.profil-b { display: flex; flex-wrap: wrap; gap: 8px; }
.pb { font-size: 13px; font-weight: 600; border: 1.5px solid var(--czarny); border-radius: 999px; padding: 5px 12px; }
.pb-c { background: var(--czarny); color: var(--bialy); }
.profil .panel-st { margin-top: auto; }

.sek-audyt { padding: 0 32px 90px; }
.audyt { border-radius: 40px; padding: 48px; background: radial-gradient(circle at 10% 10%, rgba(255,175,0,0.30), transparent 50%), radial-gradient(circle at 90% 20%, rgba(245,0,79,0.22), transparent 45%), radial-gradient(circle at 50% 100%, rgba(63,162,246,0.28), transparent 55%), var(--tlo2); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 32px; }
.audyt h2 { margin: 0 0 12px; font-size: 44px; line-height: 1.1; letter-spacing: -0.03em; font-weight: 800; }
.audyt-pkt span, .audyt .pole { line-height: 1.6; }
.audyt-pkt { display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 24px; font-weight: 500; }
.form { display: grid; gap: 12px; }
.pole { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
.pole input { font: inherit; font-weight: 400; font-size: 16px; padding: 13px 16px; border: 1px solid var(--linia); border-radius: 999px; min-height: 44px; background: var(--bialy); color: var(--czarny); width: 100%; }
.pole input[aria-invalid="true"] { border-color: var(--czerwien); box-shadow: 0 0 0 2px rgba(245,0,79,0.15); }
.zgoda { display: flex; gap: 10px; font-size: 13px; align-items: flex-start; line-height: 1.5; }
.zgoda input { width: 20px; height: 20px; flex-shrink: 0; margin: 0; accent-color: #000; }
.zgoda[aria-invalid="true"] span { color: #b8003b; }
.zgoda a { color: var(--czarny); }
.btn-form { font: inherit; font-weight: 700; padding: 15px; border-radius: 999px; border: 0; background: var(--czarny); color: var(--bialy); min-height: 48px; cursor: pointer; }
.btn-form:hover { background: #262626; }
.btn-form[disabled] { opacity: .6; cursor: progress; }
.form-bledy:empty { display: none; }
.form-bledy { background: #fff0f4; border: 1px solid #ffc2d3; color: #8a0030; border-radius: 16px; padding: 10px 14px; font-size: 14px; }
.form-bledy ul { margin: 0; padding-left: 18px; }
.form-ok { margin: 0; background: #effaf3; border: 1px solid #9fd4b3; color: #0b4d27; border-radius: 16px; padding: 14px 16px; font-weight: 600; }
.form-pakiet { margin: 0; font-size: 14px; background: var(--bialy); border: 1px solid var(--linia2); border-radius: 999px; padding: 6px 14px; justify-self: start; }
.form.wyslany .pole, .form.wyslany .zgoda, .form.wyslany .btn-form, .form.wyslany .form-pakiet { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.stopka { border-top: 1px solid var(--linia2); }
.stopka-in { max-width: var(--maxw); margin: 0 auto; padding: 26px 32px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; color: var(--szary2); font-size: 14px; }
.stopka-d { padding-top: 0; font-size: 13px; }
.stopka a { color: var(--szary2); }
.stopka a:hover { color: var(--czarny); }

/* strony tekstowe */
.tekst { max-width: 820px; margin: 0 auto; padding: 48px 32px 80px; }
.tekst h1 { font-size: 46px; letter-spacing: -0.03em; font-weight: 800; line-height: 1.15; margin: 0 0 8px; }
.tekst h2 { font-size: 22px; margin: 32px 0 8px; }
.tekst p, .tekst li { color: var(--szary1); }
.tekst .maly { color: var(--szary2); font-size: 14px; }
.tekst .cytat { background: var(--tlo2); border: 1px solid var(--linia2); border-radius: 16px; padding: 12px 16px; font-size: 14px; }

/* tablet: panel hero w jednej kolumnie */
@media (max-width: 980px) {
  .hero h1 { font-size: 60px; }
  .panel { grid-template-columns: 1fr; height: auto; }
  .lista12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wykres svg { height: 120px; flex: none; }
}
@media (max-width: 860px) {
  .menu { gap: 18px; }
}

/* telefon: wg tablicy apteki-adsy-telefon (390 px) */
@media (max-width: 640px) {
  body { font-size: 15px; line-height: 1.55; }
  .d-only { display: none !important; }
  .m-only { display: revert; }
  span.m-only { display: inline; }
  div.m-only { display: block; }
  button.m-only { display: inline-flex; align-items: center; justify-content: center; }

  .nagl { padding: 14px 18px; gap: 12px; flex-wrap: wrap; }
  .logo { font-size: 22px; }
  .logo span { font-size: 14px; }
  .nagl-cta { display: none; }
  .menu-btn { display: inline-flex; }
  .menu { display: none; order: 3; width: 100%; flex-direction: column; gap: 0; font-size: 16px; border-top: 1px solid var(--linia2); }
  .menu a { padding: 12px 2px; border-bottom: 1px solid var(--linia2); min-height: 44px; display: flex; align-items: center; }
  .menu .menu-cta { display: flex; justify-content: center; margin-top: 12px; background: var(--czarny); color: var(--bialy); border-radius: 999px; border: 0; font-weight: 600; }
  .nagl.otwarte .menu { display: flex; }

  main { display: flex; flex-direction: column; }
  main > * { width: 100%; }
  .hero { order: 1; } .sek-liczby { order: 2; } .sek-wolno { order: 3; } .sek-pakiety { order: 4; } .sek-audyt { order: 5; } .sek-oferta { order: 6; } .sek-katalog { order: 7; }
  .hero { padding: 22px 18px; }
  .pigulka { margin: 0 0 12px; font-size: 12px; padding: 4px 12px; }
  .hero h1 { font-size: 38px; line-height: 1.08; letter-spacing: -0.04em; }
  .hero-lead { margin: 14px 0 18px; font-size: 15px; }
  .hero-btn { display: block; }
  .hero-btn .btn-czarny { display: flex; width: 100%; padding: 14px; }
  .panel { display: none; }

  .sek h2 { font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; }
  .sek-liczby { padding: 0 18px; width: 100%; }
  .liczby-g { display: block; }
  .liczby-tekst, .stat-zb { display: none; }
  .stat { padding: 14px; }
  .stat-l { font-size: 26px; line-height: 1.4; }
  .stat-o { font-size: 12px; line-height: 1.55; }

  .sek-oferta { padding: 0 18px 22px; }
  .sek-oferta h2 { margin: 0 0 12px; }
  .karty4 { gap: 12px; }
  .karta { border-radius: 22px; padding: 18px; }
  .karta-n { font-size: 13px; }
  .karta h3 { font-size: 18px; margin: 6px 0 4px; }
  .karta p { font-size: 14px; }

  .sek-wolno { background: transparent; color: var(--bialy); padding: 22px 18px; }
  .wolno-in { background: var(--czarny); border-radius: 22px; padding: 18px; }
  .wolno-in h2 { font-size: 22px; margin: 0 0 10px; letter-spacing: -0.01em; line-height: 1.3; }
  .wolno-g { gap: 0; }
  .wolno-k { background: transparent; padding: 0; border-radius: 0; }
  .wolno-k:first-child h3 { display: none; }
  .wolno-k h3 { font-size: 22px; margin: 0 0 10px; }
  .wolno-k ul { padding-left: 18px; font-size: 14px; gap: 0; line-height: 1.55; }
  .wolno-k:first-child ul { margin-bottom: 14px; }
  li.d-only { display: none !important; }
  .wolno-det { font-size: 12px; color: #b5b5b5; margin-top: 6px; }
  .wolno-det a { color: #d9d9d9; }

  .sek-pakiety { padding: 0 18px; width: 100%; }
  .sek-pakiety h2 { display: none; }
  .pk-pod { margin: 0 0 8px; font-size: 13px; color: var(--szary2); }
  .pk-znak { display: none; }
  .pakiety { gap: 12px; }
  .pk { border-radius: 22px; padding: 18px; gap: 4px; }
  .pk-cena { font-size: 32px; line-height: 1.3; }
  .pk-cena span { font-size: 13px; }
  .pk-skrot { font-size: 13px; color: var(--szary2); }
  .pk-wyr .pk-skrot { color: var(--szary1); }
  .pk-wyr { background: radial-gradient(circle at 20% 0%, rgba(255,175,0,0.35), transparent 55%), radial-gradient(circle at 0% 100%, rgba(63,162,246,0.30), transparent 55%), var(--bialy); }
  .js .pk-wiecej { display: none; }
  .js .pk.otwarte .pk-wiecej { display: grid; margin-top: 8px; font-size: 14px; }
  .bez-js .pk-rozwin { display: none; }
  .pk-st { font-size: 13px; margin-top: 10px; }

  .sek-katalog { padding: 0 18px 22px; }
  .katalog { border-radius: 22px; padding: 18px; gap: 14px; }
  .katalog h2 { font-size: 22px; }
  .katalog p { font-size: 14px; }
  .profil { height: auto; padding: 14px; }

  .sek-audyt { padding: 22px 18px; width: 100%; }
  .audyt-pkt { display: none !important; }
  .audyt { border-radius: 28px; padding: 20px; gap: 10px; background: radial-gradient(circle at 10% 10%, rgba(255,175,0,0.30), transparent 50%), radial-gradient(circle at 90% 90%, rgba(63,162,246,0.28), transparent 55%), var(--tlo2); }
  .audyt h2 { font-size: 22px; margin: 0; line-height: 1.55; }
  .form { gap: 10px; }
  .pole { font-size: 13px; }
  .pole input { padding: 12px 14px; }
  .btn-form { padding: 14px; }

  .stopka-in { padding: 18px; flex-direction: column; gap: 6px; font-size: 13px; }
  .stopka-d { padding-top: 0; font-size: 12px; }
  .tekst { padding: 24px 18px 48px; }
  .tekst h1 { font-size: 30px; }
}