/* =====================================================
   MS-PROGRESS — design tokens & global styles
   ===================================================== */

:root {
  /* Neutrals — derived from brand navy #0B2545 (księga znaku) */
  --ink-950: #050f1c;
  --ink-900: #0b2545;   /* MS-PROGRESS navy */
  --ink-800: #14314f;
  --ink-700: #1e3d5e;
  --ink-600: #33526f;
  --ink-500: #52708c;
  --ink-400: #8d99a8;   /* brand grey (deskryptor) */
  --ink-300: #a9b4c2;
  --ink-200: #cad2db;
  --ink-100: #e6eaf0;
  --ink-50:  #f1f4f8;
  --canvas:  #f4f6f9;   /* cool off-white */
  --paper:   #ffffff;

  /* Accent — brand blue #168FCA (księga znaku) */
  --accent:        #168fca;
  --accent-strong: #0f6f9f;
  --accent-soft:   #e8f3fa;
  --accent-ink:    #0a3f5c;

  /* Type — Space Grotesk (display) + Archivo (tekst) */
  --font-display: "Space Grotesk", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    "Archivo", -apple-system, BlinkMacSystemFont, sans-serif;

  /* Layout */
  --max-w: 1360px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(64px, 9vw, 140px);

  /* Misc */
  --rule: 1px solid var(--ink-100);
  --rule-dark: 1px solid rgba(255,255,255,0.08);
  --ease: cubic-bezier(0.2, 0.7, 0.1, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
a:not([class]) { color: var(--accent-strong); text-decoration: underline; text-underline-offset: 3px; }
a:not([class]):hover { color: var(--accent-ink); }
.mono, .eyebrow, .btn, .nav a { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
img { max-width: 100%; display: block; }

/* Reusable atoms ------------------------------------------------- */

.msp-container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
  display: inline-block;
}
.eyebrow .num {
  color: var(--ink-400);
}
.dark .eyebrow { color: var(--ink-200); }
.dark .eyebrow .num { color: var(--ink-300); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink-900);
  text-wrap: balance;
}
.dark h1, .dark h2, .dark h3, .dark h4 { color: var(--paper); }

h1 { font-size: clamp(40px, 6.4vw, 96px); letter-spacing: -0.035em; }
h2 { font-size: clamp(32px, 4.2vw, 60px); letter-spacing: -0.028em; }
h3 { font-size: clamp(22px, 2.2vw, 32px); letter-spacing: -0.02em; }
h4 { font-size: 18px; letter-spacing: -0.01em; }

p.lead {
  font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.5;
  color: var(--ink-700);
  text-wrap: pretty;
  max-width: 60ch;
}

.mono { font-family: var(--font-mono); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 22px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--ink-900);
  color: var(--paper);
  border-radius: 2px;
  transition: background 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover { background: var(--ink-700); transform: translateY(-1px); }
.btn .arrow, .btn > span:not([class]) { font-family: var(--font-body); font-size: 18px; line-height: 1; }
.btn--ghost {
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-200);
}
.btn--ghost:hover { background: var(--ink-900); color: var(--paper); border-color: var(--ink-900); }
.btn--accent { background: var(--accent-strong); color: var(--paper); }
.btn--accent:hover { background: var(--accent); }
.dark .btn { background: var(--paper); color: var(--ink-900); }
.dark .btn:hover { background: var(--ink-100); }
.dark .btn--ghost { background: transparent; color: var(--paper); border-color: rgba(255,255,255,0.2); }
.dark .btn--ghost:hover { background: var(--paper); color: var(--ink-900); }

.section {
  padding: var(--section-y) 0;
  position: relative;
}
.section--dark { background: var(--ink-900); color: var(--ink-100); }
.section--accent { background: var(--accent-soft); }
.section--paper { background: var(--paper); }

.section-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 5vw, 80px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.section-head .label { display: flex; flex-direction: column; gap: 18px; }
.section-head h2 { text-wrap: balance; }
@media (max-width: 760px) {
  .section-head { grid-template-columns: 1fr; align-items: start; }
}

.rule { height: 1px; background: var(--ink-100); border: 0; }
.dark .rule { background: rgba(255,255,255,0.08); }

/* Image placeholder per house style ----------------------------- */
.placeholder {
  position: relative;
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(11,37,69,0.09) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(11,37,69,0.09) 50%, transparent calc(50% + 0.5px)),
    repeating-linear-gradient(135deg, rgba(10,20,33,0.04) 0 1px, transparent 1px 8px),
    var(--ink-50);
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  border-radius: 2px;
  overflow: hidden;
  min-height: 96px;
}
.placeholder::before {
  content: "";
  position: absolute; inset: 0;
  border: 1px dashed rgba(22,143,202,0.55);
  border-radius: 2px;
  pointer-events: none;
}
.placeholder::after {
  content: "Brak zdjęcia";
  position: absolute; top: 0; left: 0;
  padding: 5px 9px 6px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  z-index: 3;
  pointer-events: none;
}
.placeholder span { position: relative; z-index: 2; padding: 8px 12px; background: var(--canvas); max-width: 80%; }
.placeholder.is-dark,
.dark .placeholder, .section--dark .placeholder {
  background:
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(255,255,255,0.10) 50%, transparent calc(50% + 0.5px)),
    linear-gradient(to bottom right, transparent calc(50% - 0.5px), rgba(255,255,255,0.10) 50%, transparent calc(50% + 0.5px)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 1px, transparent 1px 8px),
    var(--ink-800);
  color: var(--ink-300);
}
.dark .placeholder::before, .section--dark .placeholder::before { border-color: rgba(255,255,255,0.28); }
.dark .placeholder span, .section--dark .placeholder span { background: var(--ink-900); }

/* Hero / header photo slots ------------------------------------- */
.hero-media { background: var(--canvas); }
.hero-media .msp-container { padding-top: 0; padding-bottom: clamp(40px, 5vw, 72px); }
.hero-media--paper { background: var(--paper); }
.placeholder--hero { aspect-ratio: 21 / 9; min-height: 260px; font-size: 12px; }
.placeholder--hero span { font-size: 12px; }
@media (max-width: 760px) { .placeholder--hero { aspect-ratio: 4 / 3; } }

/* Card -------------------------------------------------------- */
.card {
  background: var(--paper);
  border: 1px solid var(--ink-100);
  border-radius: 2px;
  transition: border-color 200ms var(--ease), transform 200ms var(--ease);
}
.card:hover { border-color: var(--ink-300); }

.tweaks-note{font-family:var(--font-mono);font-size:11px;line-height:1.5;letter-spacing:0.02em;color:var(--ink-400)}