:root{
  --bg:#0b0b0c;
  --fg:#f5f5f5;
  --muted:rgba(245,245,245,.68);
  --line:rgba(245,245,245,.14);
  --glass:rgba(12,12,13,.32);
  --glassStrong:rgba(12,12,13,.72);
  --gold:#b79a5a;
}

/* Step 4A – emphasize primary 1:1 option */
#callPrimary{width:100%;padding:14px 16px;font-size:16px}

*{box-sizing:border-box}
html,body{
  -webkit-text-size-adjust:100%;
height:100%}
body{
  -webkit-text-size-adjust:100%;

  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;
  background:var(--bg);
  color:var(--fg);
  overflow-x:hidden;
}

/* iOS/Safari safety: never allow horizontal drift */
html,body{width:100%;overflow-x:hidden}

/* --- Subpages: enforce clean links & readable layout (iOS tends to underline aggressively) --- */
.page--blog a,
.page--faq a,
.page--legal a{
  text-decoration: none !important;
  -webkit-text-decoration-skip: none;
}
.page--blog a:active,
.page--faq a:active,
.page--legal a:active{ opacity:.85; }

/* Footer credit alignment */
.siteCredit{ text-align:center; }

/* ===== Pages (blog/faq/legal) =====
   Na stronie głównej działamy jak "deck" (overflow hidden). Na podstronach musi być normalny scroll.
*/
html.page--blog, body.page--blog,
html.page--faq,  body.page--faq,
html.page--legal,body.page--legal{
  height:auto !important;
  min-height:100%;
  overflow:auto !important;
}

/* Wspólny wrapper pod fixed header (żeby header nie przykrywał treści) */
.pageMain{
  padding-top: calc(var(--topbar, 64px) + 18px + env(safe-area-inset-top));
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(26px + env(safe-area-inset-bottom));
  width: min(100%, 860px);
  margin: 0 auto;
}

/* Blog: wymuś karty jako blok (na iOS anchor bywa "inline" i wygląda jak podkreślony tekst) */
.postList{ display:grid; gap:12px; }
.postCard{ display:block; text-decoration:none; }
.postCard *{ text-decoration:none; }
.postCard__top{ display:flex; justify-content:space-between; gap:12px; }
.postTitleLink{ display:block; }

/* Stopka (copyright) */
.siteCopyright{ text-align:center; }
.siteCredit{ text-align:center; }


/* ===== Topbar ===== */
.topbar{
  position:fixed;top:0;left:0;right:0;height:64px;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 14px;
  background:rgba(0,0,0,.22);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(245,245,245,.10);
  z-index:30;
}
.brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.brandMain{font-weight:900;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brandAlt{opacity:.78;font-weight:800}
.brandSub{font-size:12px;color:rgba(245,245,245,.62);letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.topbarRight{display:flex;align-items:center;gap:10px}
.topIcon{
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(245,245,245,.10);
  background:rgba(0,0,0,.12);
  display:grid;place-items:center;
  color:rgba(245,245,245,.92);
  text-decoration:none;
}
.topIcon svg{width:18px;height:18px;fill:currentColor}
.topCta{
  height:36px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(183,154,90,.26);
  background:rgba(183,154,90,.18);
  color:rgba(245,245,245,.92);
  font-weight:900;
  letter-spacing:.06em;
  cursor:pointer;
}
.topCta:active{transform:scale(.98);opacity:.9}

.right{display:flex;gap:10px;align-items:center}
.icon{
  width:36px;height:36px;border-radius:999px;
  border:1px solid rgba(245,245,245,.10);
  background:rgba(0,0,0,.12);
  display:grid;place-items:center;
  color:rgba(245,245,245,.92);
  text-decoration:none;
}
.icon svg{width:18px;height:18px;fill:currentColor}
.icon:hover{background:rgba(245,245,245,.08)}
.icon:active{transform:scale(.98)}
.btnIcon{cursor:pointer}