/* ============================================================
   applemdm.pl - arkusz stylow
   Mobile first. Testowane dla 360 / 414 / 768 / 1180 px.
   Konwencja: jedna regula = jedna linia.
   ============================================================ */

/* ---------- 1. ZMIENNE ---------- */
:root { --ink:#1d1d1f; --ink2:#424245; --mut:#6e6e73; --line:#d2d2d7; --bg:#ffffff; --bg2:#f5f5f7; --acc:#0071e3; --acc2:#0077ed; --ok:#1d8a4a; --no:#b42318; --rad:18px; --radSm:12px; --max:1080px; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Segoe UI",Roboto,Helvetica,Arial,sans-serif; }

/* ---------- 2. RESET ---------- */
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body { margin:0; font-family:var(--font); font-size:17px; line-height:1.55; color:var(--ink); background:var(--bg); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--acc); text-decoration:none; }
a:hover { text-decoration:underline; }
ul { margin:0; padding:0; list-style:none; }
summary::-webkit-details-marker { display:none; }

/* ---------- 3. UKLAD ---------- */
.wrap { width:100%; max-width:var(--max); margin:0 auto; padding:0 16px; }
.narrow { max-width:760px; }
section { padding:56px 0; }
.band { background:var(--bg2); }
.mt { margin-top:28px; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:16px; top:16px; z-index:100; background:var(--ink); color:#fff; padding:10px 16px; border-radius:8px; }

/* ---------- 4. TYPOGRAFIA ---------- */
h1 { font-size:34px; line-height:1.12; letter-spacing:-0.02em; font-weight:700; margin:0 0 16px; text-align:center; }
h2 { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px; font-size:27px; line-height:1.18; letter-spacing:-0.015em; font-weight:700; margin:0 0 16px; text-align:center; }
h3 { font-size:18px; line-height:1.3; font-weight:600; margin:0 0 8px; letter-spacing:-0.01em; }
h4 { font-size:14px; font-weight:600; margin:0 0 10px; letter-spacing:0.01em; }
p { margin:0 0 14px; color:var(--ink2); }
strong { color:var(--ink); font-weight:600; }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--acc); text-transform:none; margin:0 0 8px; text-align:center; }
.lead { font-size:18px; line-height:1.5; color:var(--ink2); }
.center { text-align:center; }
.fine { font-size:13px; line-height:1.6; color:var(--mut); margin:0 0 10px; }
.fine.center { margin-top:24px; }
.brDesk { display:none; }
.narrow h2 { justify-content:flex-start; text-align:left; }
.narrow .eyebrow { text-align:left; }
.cta h2 { justify-content:center; text-align:center; }
.cta .eyebrow { text-align:center; }
.tm { font-size:0.5em; font-weight:400; vertical-align:1em; line-height:0; margin-left:-8px; }

/* ---------- 5. PRZYCISKI ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; padding:13px 22px; border-radius:980px; font-size:16px; font-weight:500; line-height:1.2; text-align:center; border:1px solid transparent; transition:background .18s ease,color .18s ease,border-color .18s ease; cursor:pointer; }
.btn:hover { text-decoration:none; }
.btnPrimary { background:var(--acc); color:#fff; }
.btnPrimary:hover { background:var(--acc2); }
.btnGhost { background:transparent; color:var(--acc); border-color:var(--acc); }
.btnGhost:hover { background:rgba(0,113,227,.07); }
.btnSm { padding:8px 16px; font-size:14px; background:var(--acc); color:#fff; }
.btnSm:hover { background:var(--acc2); }
.btnFull { width:100%; margin-top:16px; }
.ctaRow { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:24px 0 0; }

/* ---------- 6. NAWIGACJA ---------- */
.nav { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(20px); -webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line); }
.navIn { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; min-height:52px; padding-top:8px; padding-bottom:8px; }
.brand { font-size:17px; font-weight:600; color:var(--ink); letter-spacing:-0.01em; }
.brand:hover { text-decoration:none; }
.brand span { color:var(--mut); font-weight:400; }
.navLinks { display:none; flex-wrap:wrap; gap:26px; }
.navLinks a { font-size:14px; color:var(--ink2); }
.navLinks a:hover { color:var(--ink); text-decoration:none; }

/* ---------- 7. HERO ---------- */
.hero { padding:44px 0 40px; }
.hero .lead { text-align:center; max-width:660px; margin:0 auto; }
.chips { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin:26px 0 0; }
.chips li { font-size:13px; font-weight:500; color:var(--ink2); background:var(--bg2); border:1px solid var(--line); border-radius:980px; padding:6px 14px; }
.heroFig { margin:34px 0 0; }
.heroFig img { margin:0 auto; max-width:260px; border-radius:28px; }
.heroFig figcaption { margin-top:14px; font-size:13px; color:var(--mut); text-align:center; }

/* ---------- 8. SIATKA I KARTY ---------- */
.grid { display:grid; grid-template-columns:1fr; gap:16px; margin-top:26px; }
.card { background:var(--bg); border:1px solid var(--line); border-radius:var(--rad); padding:22px; }
.band .card { background:#fff; }
.card p:last-child { margin-bottom:0; }
.cardList h3 { margin-bottom:12px; }
.cardBefore h3 { color:var(--no); }
.cardAfter h3 { color:var(--ok); }
.split { display:grid; grid-template-columns:1fr; gap:20px; margin-top:24px; }
.splitTxt p:last-child { margin-bottom:0; }

/* ---------- 9. LISTY ---------- */
.list li { position:relative; padding-left:26px; margin-bottom:10px; color:var(--ink2); font-size:16px; line-height:1.5; }
.list li:last-child { margin-bottom:0; }
.list li::before { content:"–"; position:absolute; left:0; top:0; color:var(--mut); font-weight:600; }
.listPos li::before { content:"✓"; color:var(--ok); }
.listNeg li::before { content:"✕"; color:var(--no); }
.listNeu { margin:0 0 16px; }
.listNeu li::before { content:"•"; color:var(--acc); }

/* ---------- 10. PAKIETY ---------- */
.pack { display:flex; flex-direction:column; position:relative; }
.pack .list { flex:1; }
.packHi { border-color:var(--acc); box-shadow:0 0 0 1px var(--acc); }
.badge { position:absolute; top:-11px; left:50%; transform:translateX(-50%); white-space:nowrap; display:inline-block; font-size:12px; font-weight:600; color:#fff; background:var(--acc); border-radius:980px; padding:4px 14px; margin:0; }
.price { font-size:26px; font-weight:700; color:var(--ink); letter-spacing:-0.02em; margin:0; }
.priceNote { font-size:13px; color:var(--mut); margin:0 0 16px; }
#pakiety .fine.center { margin-top:26px; }
#pakiety h2.mt { margin-top:48px; }

/* ---------- 11. FAQ ---------- */
.faq { border-bottom:1px solid var(--line); padding:0; }
.faq:first-of-type { border-top:1px solid var(--line); }
.faq summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:18px 0; font-size:17px; font-weight:500; color:var(--ink); cursor:pointer; list-style:none; }
.faq summary::after { content:"+"; font-size:22px; font-weight:400; color:var(--acc); line-height:1; }
.faq[open] summary::after { content:"–"; }
.faq p { padding:0 0 18px; margin:0; font-size:16px; }

/* ---------- 12. CTA ---------- */
.cta { background:var(--bg2); text-align:center; }
.cta .lead { margin:0 auto; max-width:560px; }


/* ---------- 13. STOPKA ---------- */
.foot { background:var(--bg); border-top:1px solid var(--line); padding:40px 0 28px; }
.footGrid { display:grid; grid-template-columns:1fr; gap:26px; }
.footBrand { font-size:16px; font-weight:600; color:var(--ink); margin:0 0 8px; }
.footBrand span { color:var(--mut); font-weight:400; }
.footCol a { color:var(--mut); }
.footCol a:hover { color:var(--acc); }
.footLegal { margin-top:30px; padding-top:22px; border-top:1px solid var(--line); }
.footLegal .fine { font-size:12px; line-height:1.65; }
.footBar { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); }
.footBar .fine { margin:0; }
.footLinks { display:flex; flex-wrap:wrap; gap:18px; }
.footLinks a { color:var(--mut); }

/* ---------- 14. BREAKPOINT 480 ---------- */
@media (max-width:480px) {
  .btn { width:100%; }
  .ctaRow { flex-direction:column; align-items:stretch; }
  .navIn .btnSm { width:auto; }
  .packHi { margin-top:8px; }
}

/* ---------- 15. BREAKPOINT 768 ---------- */
@media (min-width:768px) {
  .wrap { padding:0 24px; }
  section { padding:76px 0; }
  h1 { font-size:46px; }
  h2 { font-size:34px; }
  .lead { font-size:19px; }
  .heroFig img { max-width:420px; }
  .grid2 { grid-template-columns:1fr 1fr; }
  .grid3 { grid-template-columns:1fr 1fr; }
  .split { grid-template-columns:1.15fr 1fr; align-items:start; gap:32px; }
  .footGrid { grid-template-columns:1fr 1fr; gap:30px; }
}

/* ---------- 16. BREAKPOINT 980 ---------- */
@media (min-width:980px) {
  .navLinks { display:flex; }
  .grid3 { grid-template-columns:repeat(3,1fr); gap:20px; }
  .footGrid { grid-template-columns:1.4fr 1fr 1fr 1fr; }
  .brDesk { display:inline; }
  h1 { font-size:54px; }
  section { padding:88px 0; }
}

/* ---------- 17. TRYB CIEMNY ---------- */
@media (prefers-color-scheme:dark) {
  :root { --ink:#f5f5f7; --ink2:#c7c7cc; --mut:#8e8e93; --line:#38383c; --bg:#000000; --bg2:#1c1c1e; --acc:#2997ff; --acc2:#4aa8ff; --ok:#32d74b; --no:#ff6961; }
  .nav { background:rgba(0,0,0,.78); }
  .band .card { background:#000; }
  .btnPrimary { color:#000; }
  .badge { color:#000; }
}

/* ---------- 18. DOSTEPNOSC ---------- */
@media (prefers-reduced-motion:reduce) {
  * { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}