/* =========================================================
   helpme.pl — design system
   Editorial + Swiss precision + Warm soft-tech
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700&family=Geist+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap');

/* --- 1. Design tokens ------------------------------------ */
:root {
  /* Colors — warm paper palette */
  --paper: #F6F2EA;
  --paper-soft: #EFEAE0;
  --paper-deep: #E7E1D3;
  --ink: #151311;
  --ink-90: #2A2824;
  --ink-70: #4C4740;
  --ink-50: #7A7468;
  --ink-30: #B0A99C;
  --ink-15: #DDD6C7;
  --rule: #E3DDD0;
  --rule-strong: #CFC7B5;

  --accent: #1D3A8A;
  --accent-ink: #132762;
  --accent-wash: #E4EAF5;
  --accent-wash-2: #F0F3FA;

  --sun: #E8BD48;
  --sun-wash: #F7EDCC;

  --forest: #2E4F43;
  --forest-wash: #DDE7E0;

  --glass: rgba(246, 242, 234, 0.78);
  --glass-edge: rgba(21, 19, 17, 0.06);

  /* Typography */
  --font-display: 'Instrument Serif', ui-serif, Georgia, serif;
  --font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* Scale (type) */
  --fs-xs: 0.75rem;      /* 12 */
  --fs-sm: 0.875rem;     /* 14 */
  --fs-base: 1rem;       /* 16 */
  --fs-md: 1.125rem;     /* 18 */
  --fs-lg: 1.25rem;      /* 20 */
  --fs-xl: 1.5rem;       /* 24 */
  --fs-2xl: 2rem;        /* 32 */
  --fs-3xl: 2.5rem;      /* 40 */
  --fs-4xl: 3.5rem;      /* 56 */
  --fs-5xl: 4.5rem;      /* 72 */
  --fs-6xl: 6rem;        /* 96 */
  --fs-hero: clamp(3rem, 7.5vw, 7.5rem);
  --fs-sub-hero: clamp(2rem, 4vw, 4rem);

  /* Spacing */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --sp-11: 10rem;

  /* Layout */
  --max-w: 1360px;
  --max-w-narrow: 1160px;
  --max-w-text: 680px;
  --gutter: clamp(1.25rem, 3vw, 2.25rem);

  /* Radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 24px;
  --r-2xl: 32px;

  /* Shadows — warm, colored */
  --sh-xs: 0 1px 0 rgba(21, 19, 17, 0.04);
  --sh-sm: 0 2px 6px -1px rgba(21, 19, 17, 0.06), 0 1px 2px rgba(21, 19, 17, 0.04);
  --sh-md: 0 8px 24px -6px rgba(21, 19, 17, 0.08), 0 2px 6px rgba(21, 19, 17, 0.05);
  --sh-lg: 0 24px 48px -12px rgba(29, 58, 138, 0.14), 0 8px 16px rgba(21, 19, 17, 0.06);
  --sh-accent: 0 20px 40px -16px rgba(29, 58, 138, 0.35);

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 280ms;
  --dur-slow: 560ms;
}

/* --- 2. Reset ------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body { line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* --- 3. Base ------------------------------------------- */
body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  color: var(--ink);
  background: var(--paper);
  position: relative;
  min-height: 100vh;
  font-feature-settings: 'ss01', 'cv11';
}

/* Grain overlay — subtle paper texture, site-wide */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.075 0 0 0 0 0.07 0 0 0 0.18 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
}

::selection { background: var(--accent); color: var(--paper); }

/* --- 4. Typography utilities --------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.display em, .display i { font-style: italic; }

.kicker {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
}

.section-num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  color: var(--ink-50);
}

.mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; }

.dim { color: var(--ink-70); }
.muted { color: var(--ink-50); }

/* --- 5. Layout primitives ------------------------------ */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin: 0 auto;
  padding-inline: var(--gutter);
}
.container-narrow {
  width: 100%;
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(4rem, 9vw, 7.5rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 4.5rem); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule-strong { border: 0; border-top: 1px solid var(--rule-strong); }

.section-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}
@media (min-width: 900px) {
  .section-header {
    grid-template-columns: minmax(0, 0.5fr) minmax(0, 1fr);
    gap: var(--sp-7);
    align-items: end;
  }
}
.section-header h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.section-header h2 em { font-style: italic; color: var(--ink-70); }
.section-header p { color: var(--ink-70); max-width: 46ch; }

.section-header__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  color: var(--ink-50);
}

/* --- 6. Buttons ---------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.875rem 1.375rem;
  border-radius: 999px;
  font-weight: 500;
  font-size: var(--fs-sm);
  letter-spacing: -0.005em;
  transition: transform var(--dur) var(--ease-out), background var(--dur) var(--ease-out), color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--sh-sm);
}
.btn--primary:hover {
  background: var(--accent-ink);
  box-shadow: var(--sh-accent);
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  padding-inline: 0.25rem;
}
.btn--ghost .btn-arrow {
  display: inline-block;
  transition: transform var(--dur) var(--ease-out);
}
.btn--ghost:hover .btn-arrow { transform: translateX(4px); }

.btn--outline {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
}
.btn--outline:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.btn--accent {
  background: var(--accent);
  color: var(--paper);
}
.btn--accent:hover { background: var(--accent-ink); }

.btn--sm { padding: 0.55rem 0.95rem; font-size: var(--fs-xs); }

/* --- 7. Tags / pills ----------------------------------- */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.3rem 0.65rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-70);
  background: var(--paper);
}
.tag--filled { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag--accent { background: var(--accent-wash); color: var(--accent-ink); border-color: transparent; }
.tag--sun { background: var(--sun-wash); color: #7B5D14; border-color: transparent; }
.tag--live::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(29, 58, 138, 0.6);
  animation: pulse 1.8s var(--ease-out) infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(29, 58, 138, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(29, 58, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(29, 58, 138, 0); }
}

/* --- 8. Placeholders (image replacements) -------------- */
.placeholder {
  position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(29, 58, 138, 0.06), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(232, 189, 72, 0.10), transparent 50%),
    linear-gradient(135deg, var(--paper-soft), var(--paper-deep));
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--sp-5);
  color: var(--ink-70);
  min-height: 200px;
}
.placeholder::before {
  content: attr(data-glyph);
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(3rem, 6vw, 5rem);
  color: var(--ink-30);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.placeholder::after {
  content: attr(data-ratio);
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: var(--ink-50);
  background: var(--paper);
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  border: 1px solid var(--rule);
}
.placeholder__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 0.5rem;
}
.placeholder__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-sm);
  line-height: 1.4;
  max-width: 32ch;
  color: var(--ink-70);
}
.placeholder--tall { aspect-ratio: 3 / 4; }
.placeholder--wide { aspect-ratio: 16 / 9; }
.placeholder--square { aspect-ratio: 1; }
.placeholder--hero { aspect-ratio: 5 / 6; min-height: 420px; }
.placeholder--icon { min-height: 56px; aspect-ratio: 1; border-radius: var(--r-md); padding: 0.5rem; }
.placeholder--icon::before { font-size: 2rem; margin: 0; }
.placeholder--icon::after { display: none; }
.placeholder--icon .placeholder__label,
.placeholder--icon .placeholder__desc { display: none; }
.placeholder--logo {
  aspect-ratio: 3 / 1;
  min-height: 64px;
  padding: 1rem;
  background: var(--paper-soft);
  border-radius: var(--r-sm);
}
.placeholder--logo::before { font-size: 1.4rem; font-style: normal; font-family: var(--font-sans); font-weight: 600; color: var(--ink-50); letter-spacing: -0.03em; }
.placeholder--logo::after { display: none; }
.placeholder--logo .placeholder__label,
.placeholder--logo .placeholder__desc { display: none; }

.placeholder--accent {
  background:
    radial-gradient(circle at 30% 20%, rgba(29, 58, 138, 0.14), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(29, 58, 138, 0.06), transparent 50%),
    linear-gradient(135deg, var(--accent-wash-2), var(--accent-wash));
  border-color: #C7D2E8;
}
.placeholder--sun {
  background:
    radial-gradient(circle at 25% 25%, rgba(232, 189, 72, 0.2), transparent 55%),
    linear-gradient(135deg, #F4EDD5, #EADFB6);
  border-color: #D9C98A;
}
.placeholder--forest {
  background:
    radial-gradient(circle at 30% 20%, rgba(46, 79, 67, 0.12), transparent 55%),
    linear-gradient(135deg, var(--forest-wash), #CDD9D2);
  border-color: #A7BDB1;
}
.placeholder--ink {
  background:
    radial-gradient(circle at 30% 20%, rgba(29, 58, 138, 0.45), transparent 55%),
    linear-gradient(135deg, #1C1A16, #2A2722);
  border-color: rgba(255, 255, 255, 0.1);
  color: var(--paper);
}
.placeholder--ink::before { color: rgba(246, 242, 234, 0.35); }
.placeholder--ink .placeholder__label { color: rgba(246, 242, 234, 0.45); }
.placeholder--ink .placeholder__desc { color: rgba(246, 242, 234, 0.85); }
.placeholder--ink::after {
  background: rgba(255, 255, 255, 0.1);
  color: rgba(246, 242, 234, 0.55);
  border-color: rgba(255, 255, 255, 0.12);
}

/* --- 9. Header / Nav ----------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: transparent;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: var(--glass);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom-color: var(--glass-edge);
}

.nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--sp-5);
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.brand__dot {
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  display: inline-block;
  transform: translateY(-2px);
  box-shadow: 0 0 0 3px var(--accent-wash);
}
.brand__tld { color: var(--ink-50); font-style: italic; }

.nav__links {
  display: none;
  gap: 0.25rem;
  justify-content: center;
  align-items: center;
}
@media (min-width: 1000px) {
  .nav__links { display: flex; }
}

.nav__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  font-size: var(--fs-sm);
  color: var(--ink-90);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
  font-weight: 450;
}
.nav__item:hover,
.nav__item[aria-expanded="true"] { background: var(--paper-deep); color: var(--ink); }
.nav__item[aria-current="page"] { color: var(--ink); }
.nav__item[aria-current="page"]::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0.15rem;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  transform: translateX(-50%);
}
.nav__item .chev {
  width: 10px; height: 10px;
  transition: transform var(--dur) var(--ease-out);
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
}
.nav__item[aria-expanded="true"] .chev { transform: rotate(180deg); }

.nav__cta {
  display: none;
  align-items: center;
  gap: 0.5rem;
}
@media (min-width: 1000px) { .nav__cta { display: inline-flex; } }

.nav__mobile-toggle {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  color: var(--ink);
}
@media (min-width: 1000px) { .nav__mobile-toggle { display: none; } }
.nav__mobile-toggle svg { width: 18px; height: 18px; }

/* Dropdown mega menu */
.dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 420px;
  padding: 0.9rem;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
  z-index: 70;
}
.nav__item[aria-expanded="true"] + .dropdown,
.dropdown:hover,
.nav__dd-wrap:hover .dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.nav__dd-wrap { position: relative; }

.dropdown__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  padding: 0.5rem 0.75rem 0.75rem;
}

.dropdown__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  padding: 0.75rem;
  border-radius: var(--r-md);
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.dropdown__item:hover { background: var(--paper-soft); }
.dropdown__item:hover .dropdown__arrow { transform: translateX(4px); color: var(--accent); }

.dropdown__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--accent-wash);
  color: var(--accent);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
}
.dropdown__text { line-height: 1.3; }
.dropdown__title {
  display: block;
  font-weight: 500;
  font-size: var(--fs-sm);
}
.dropdown__sub {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-50);
  margin-top: 0.15rem;
}
.dropdown__arrow {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--ink-30);
  transition: transform var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}

/* Mobile menu */
.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--paper);
  z-index: 80;
  padding: var(--sp-5);
  padding-top: 4.5rem;
  overflow-y: auto;
  transform: translateY(-100%);
  transition: transform var(--dur) var(--ease-io);
}
.mobile-menu.is-open { transform: translateY(0); }
.mobile-menu__close {
  position: absolute;
  top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid var(--rule-strong);
  background: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu__section { margin-bottom: var(--sp-6); }
.mobile-menu__title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--sp-3);
}
.mobile-menu a {
  display: block;
  padding: 0.75rem 0;
  font-size: var(--fs-lg);
  border-bottom: 1px solid var(--rule);
}
.mobile-menu a:last-child { border-bottom: 0; }

/* --- 10. Hero ------------------------------------------ */
.hero {
  position: relative;
  padding-block: clamp(3rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5rem);
  overflow: hidden;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-7);
  align-items: end;
}
@media (min-width: 1000px) {
  .hero__grid {
    grid-template-columns: 7fr 5fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.hero__meta {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.hero__meta hr {
  flex: 1 1 auto;
  min-width: 40px;
  border: 0;
  border-top: 1px solid var(--rule-strong);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-hero);
  line-height: 0.94;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}
.hero__title em { font-style: italic; color: var(--ink); position: relative; }
.hero__title em::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  bottom: 0.08em;
  height: 0.08em;
  background: var(--sun);
  z-index: -1;
  opacity: 0.7;
}
.hero__title .pm-dot {
  display: inline-block;
  width: 0.15em; height: 0.15em;
  border-radius: 50%;
  background: var(--accent);
  vertical-align: baseline;
  margin-left: 0.05em;
  transform: translateY(-0.05em);
}

.hero__lead {
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
  color: var(--ink-70);
  max-width: 54ch;
  line-height: 1.55;
  margin-bottom: var(--sp-6);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-7);
}

.hero__visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
}
.hero__visual .placeholder { width: 100%; }

.hero__stats {
  margin-top: var(--sp-7);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.hero__stat-num {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.hero__stat-label {
  font-size: var(--fs-xs);
  color: var(--ink-50);
  margin-top: 0.35rem;
  letter-spacing: 0.02em;
}

/* decorative badge floating near visual */
.hero__badge {
  position: absolute;
  top: -16px;
  left: -16px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  box-shadow: var(--sh-md);
  z-index: 2;
}
.hero__badge-sun {
  position: absolute;
  bottom: 1rem;
  right: -14px;
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  box-shadow: var(--sh-md);
  font-weight: 500;
  z-index: 2;
}

/* Ticker */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--rule);
  padding-block: 1rem;
  background: var(--paper-soft);
}
.ticker__track {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  animation: scroll 32s linear infinite;
  width: max-content;
}
.ticker__item {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  color: var(--ink-70);
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 3rem;
}
.ticker__item em { color: var(--ink); font-style: italic; }
.ticker__item::after {
  content: '✦';
  color: var(--accent);
  font-size: 0.8em;
}
@keyframes scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* --- 11. Services directory (homepage) ---------------- */
.services-dir { position: relative; }

.service-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  border-top: 1px solid var(--rule);
  align-items: start;
}
.service-row:last-of-type { border-bottom: 1px solid var(--rule); }
.service-row__num {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-50);
  padding-top: 0.75rem;
  min-width: 2.5rem;
}
.service-row__body {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) {
  .service-row__body {
    grid-template-columns: 1.2fr 1fr auto;
    gap: var(--sp-6);
    align-items: start;
  }
}
.service-row__main h3 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.75rem);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.02em;
  margin-bottom: 0.75rem;
  transition: color var(--dur) var(--ease-out);
}
.service-row:hover .service-row__main h3 { color: var(--accent); }
.service-row__main h3 em { font-style: italic; color: var(--ink-70); }
.service-row__tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}
.service-row__desc {
  color: var(--ink-70);
  line-height: 1.55;
  max-width: 50ch;
}
.service-row__features {
  display: grid;
  gap: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}
.service-row__features li {
  padding-left: 1.25rem;
  position: relative;
}
.service-row__features li::before {
  content: '—';
  position: absolute;
  left: 0; top: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}
.service-row__cta {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--ink-30);
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  align-self: start;
}
.service-row__cta:hover { color: var(--accent); border-color: var(--accent); }

.service-row--featured {
  background: linear-gradient(180deg, var(--paper-soft), transparent 60%);
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  border-radius: var(--r-lg);
  border-top-color: transparent;
}
.service-row--featured + .service-row { border-top-color: var(--rule); }

/* Services interlude — big placeholder between rows */
.services-interlude {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding-block: var(--sp-6);
  align-items: center;
}
@media (min-width: 800px) {
  .services-interlude { grid-template-columns: 1fr 1fr; }
}
.services-interlude blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--ink);
  max-width: 24ch;
}
.services-interlude blockquote em { font-style: italic; color: var(--ink-70); }
.services-interlude cite {
  display: block;
  margin-top: var(--sp-4);
  font-style: normal;
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  color: var(--ink-50);
}

/* --- 12. Process (homepage) --------------------------- */
.process {
  background: var(--ink);
  color: var(--paper);
  padding-block: clamp(4rem, 9vw, 7rem);
  border-radius: var(--r-2xl);
  margin-inline: var(--gutter);
  position: relative;
  overflow: hidden;
}
.process::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 20%, rgba(29, 58, 138, 0.45), transparent 55%),
    radial-gradient(circle at 85% 80%, rgba(232, 189, 72, 0.1), transparent 45%);
}
.process > * { position: relative; z-index: 1; }
.process .kicker { color: rgba(246, 242, 234, 0.55); }
.process h2 { color: var(--paper); }
.process h2 em { color: rgba(246, 242, 234, 0.6); }

.process-steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  counter-reset: step;
}
@media (min-width: 800px) {
  .process-steps { grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); }
}
.process-step {
  position: relative;
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid rgba(246, 242, 234, 0.08);
  background: rgba(246, 242, 234, 0.02);
}
.process-step::before {
  counter-increment: step;
  content: "0" counter(step);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  color: var(--sun);
  display: block;
  margin-bottom: var(--sp-5);
}
.process-step h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 0.5rem;
  line-height: 1.1;
}
.process-step p {
  font-size: var(--fs-sm);
  color: rgba(246, 242, 234, 0.7);
  line-height: 1.55;
}

/* --- 13. Pricing (homepage) --------------------------- */
.pricing {
  position: relative;
}
.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
@media (min-width: 700px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); gap: 0; } }

.price-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
  position: relative;
}
@media (min-width: 1100px) {
  .price-card { border-radius: 0; border-right-width: 0; }
  .price-card:first-child { border-top-left-radius: var(--r-lg); border-bottom-left-radius: var(--r-lg); }
  .price-card:last-child { border-radius: 0 var(--r-lg) var(--r-lg) 0; border-right-width: 1px; }
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--sh-md); z-index: 2; }

.price-card__name {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.price-card__price {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
}
.price-card__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 4.5vw, 4rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum';
}
.price-card__unit {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  color: var(--ink-50);
}
.price-card__net {
  font-size: 0.75rem;
  color: var(--ink-50);
  letter-spacing: 0.01em;
}
.price-card__features {
  display: grid;
  gap: 0.55rem;
  font-size: var(--fs-sm);
  color: var(--ink-70);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}
.price-card__features li {
  position: relative;
  padding-left: 1.35rem;
  line-height: 1.55;
}
.price-card__features li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
  line-height: 1.55;
}
.price-card__features li.dim-feat { color: var(--ink-30); }
.price-card__features li.dim-feat::before { content: '—'; color: var(--ink-30); }

/* Inline footnote markers — gwiazdki OBOK tekstu, nigdy pod spodem */
.price-card__features .note {
  display: inline;
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
  margin-left: 0.2em;
  font-size: 0.85em;
  letter-spacing: 0.02em;
  vertical-align: baseline;
  line-height: inherit;
}
.price-card__features .note-label {
  display: inline;
  font-size: 0.82em;
  color: var(--ink-50);
  font-style: italic;
  margin-left: 0.25em;
}
.price-card--feat .price-card__features .note { color: var(--sun); }
.price-card--feat .price-card__features .note-label { color: rgba(246, 242, 234, 0.55); }
.price-card__cta {
  margin-top: auto;
  padding-top: var(--sp-4);
}

.price-card--feat {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  z-index: 3;
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--sh-lg);
}
@media (min-width: 1100px) {
  .price-card--feat {
    border-radius: var(--r-xl);
    border-right-width: 1px;
  }
  .price-card--feat + .price-card { border-top-left-radius: 0; border-bottom-left-radius: 0; }
}
.price-card--feat .price-card__name { color: var(--sun); }
.price-card--feat .price-card__unit { color: rgba(246, 242, 234, 0.6); }
.price-card--feat .price-card__net { color: rgba(246, 242, 234, 0.55); }
.price-card--feat .price-card__features { color: rgba(246, 242, 234, 0.85); border-color: rgba(246, 242, 234, 0.12); }
.price-card--feat .price-card__features li::before { color: var(--sun); }
.price-card--feat .price-card__features li.dim-feat { color: rgba(246, 242, 234, 0.4); }
.price-card--feat .price-card__features li.dim-feat::before { color: rgba(246, 242, 234, 0.35); }
.price-card--feat .btn--outline { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.price-card--feat .btn--outline:hover { background: var(--sun); color: var(--ink); border-color: var(--sun); }

.price-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sun);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  white-space: nowrap;
}

.pricing-footnote {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  font-size: var(--fs-sm);
  color: var(--ink-50);
  padding: var(--sp-5);
  background: var(--paper-soft);
  border-radius: var(--r-md);
}
.pricing-footnote strong { color: var(--ink); font-weight: 500; }

/* --- 14. Social proof -------------------------------- */
.proof-logos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
@media (min-width: 700px) { .proof-logos { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px) { .proof-logos { grid-template-columns: repeat(7, 1fr); } }

.testimonial {
  margin-top: var(--sp-8);
  padding: var(--sp-7);
  background: var(--paper-soft);
  border-radius: var(--r-xl);
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: 1fr;
}
@media (min-width: 800px) { .testimonial { grid-template-columns: 1fr 2fr; gap: var(--sp-7); align-items: center; } }
.testimonial__quote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.8vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
}
.testimonial__quote::before {
  content: '„';
  font-style: italic;
  color: var(--accent);
  margin-right: 0.1em;
}
.testimonial__cite {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  font-size: var(--fs-sm);
  color: var(--ink-70);
}
.testimonial__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-wash), var(--paper-deep));
  border: 1px solid var(--rule);
}
.testimonial__cite strong { color: var(--ink); font-weight: 500; }

/* --- 15. Blog cards ---------------------------------- */
.blog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-7);
}
@media (min-width: 800px) { .blog-grid { grid-template-columns: repeat(3, 1fr); } }

.blog-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: transform var(--dur) var(--ease-out);
}
.blog-card:hover { transform: translateY(-4px); }
.blog-card:hover .blog-card__title { color: var(--accent); }
.blog-card__media .placeholder { aspect-ratio: 4 / 3; min-height: 0; }
.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.blog-card__meta span + span::before { content: '•'; margin-right: 0.75rem; color: var(--ink-30); }
.blog-card__title {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.15;
  font-weight: 400;
  letter-spacing: -0.015em;
  transition: color var(--dur) var(--ease-out);
}
.blog-card__excerpt {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  line-height: 1.55;
}
.blog-card__read {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
}
.blog-card__read::after { content: '→'; transition: transform var(--dur) var(--ease-out); }
.blog-card:hover .blog-card__read::after { transform: translateX(4px); }

/* --- 16. FAQ accordion ------------------------------- */
.faq {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: var(--sp-7);
  border-top: 1px solid var(--rule);
}
.faq-item { border-bottom: 1px solid var(--rule); }
.faq-item__trigger {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--sp-5);
  align-items: center;
  padding: 1.25rem 0;
  text-align: left;
  color: var(--ink);
  transition: color var(--dur) var(--ease-out);
}
.faq-item__trigger:hover { color: var(--accent); }
.faq-item__num {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--ink-50);
}
.faq-item__q {
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  font-weight: 400;
}
.faq-item__toggle {
  width: 32px; height: 32px;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  display: grid;
  place-items: center;
  position: relative;
  transition: background var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.faq-item__toggle::before, .faq-item__toggle::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform var(--dur) var(--ease-out);
}
.faq-item__toggle::before { width: 10px; height: 1.5px; }
.faq-item__toggle::after { width: 1.5px; height: 10px; }
.faq-item[open] .faq-item__toggle { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.faq-item[open] .faq-item__toggle::after { transform: scaleY(0); }
.faq-item__a {
  padding: 0 0 var(--sp-5);
  padding-left: calc(2.5rem + var(--sp-5));
  color: var(--ink-70);
  line-height: 1.65;
  max-width: 72ch;
}
.faq-item__a p + p { margin-top: 0.75rem; }
.faq-item__a a { color: var(--accent); border-bottom: 1px solid currentColor; }

/* details/summary animation */
.faq-item summary { list-style: none; cursor: pointer; }
.faq-item summary::-webkit-details-marker { display: none; }

/* --- 17. CTA banner --------------------------------- */
.cta-banner {
  position: relative;
  padding: clamp(3rem, 6vw, 5rem) var(--gutter);
  background:
    radial-gradient(circle at 20% 20%, rgba(29, 58, 138, 0.25), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(232, 189, 72, 0.18), transparent 55%),
    linear-gradient(135deg, #1C1A16, #2A2722);
  color: var(--paper);
  border-radius: var(--r-2xl);
  margin-inline: var(--gutter);
  overflow: hidden;
}
.cta-banner__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 900px) {
  .cta-banner__grid { grid-template-columns: 1.3fr 1fr; gap: var(--sp-8); }
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  font-weight: 400;
}
.cta-banner h2 em { font-style: italic; color: var(--sun); }
.cta-banner p {
  color: rgba(246, 242, 234, 0.75);
  max-width: 52ch;
  margin-top: var(--sp-4);
}
.cta-banner__actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.cta-banner__actions .btn--primary {
  background: var(--paper); color: var(--ink);
}
.cta-banner__actions .btn--primary:hover { background: var(--sun); color: var(--ink); }
.cta-banner__actions .btn--ghost { color: var(--paper); }

.cta-banner__contact {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: rgba(246, 242, 234, 0.05);
  border: 1px solid rgba(246, 242, 234, 0.1);
  border-radius: var(--r-lg);
}
.cta-banner__contact dt {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(246, 242, 234, 0.5);
  margin-bottom: 0.15rem;
}
.cta-banner__contact dd {
  font-family: var(--font-display);
  font-size: 1.35rem;
  letter-spacing: -0.01em;
}
.cta-banner__contact dd em { color: var(--sun); font-style: italic; }

/* --- 18. Footer ------------------------------------- */
.site-footer {
  padding-block: var(--sp-8) var(--sp-5);
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
}
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--sp-5); } }

.footer-brand p {
  color: var(--ink-70);
  max-width: 36ch;
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.footer-col h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--sp-4);
  font-weight: 500;
}
.footer-col ul { display: grid; gap: 0.5rem; }
.footer-col a {
  font-size: var(--fs-sm);
  color: var(--ink-90);
  transition: color var(--dur) var(--ease-out);
}
.footer-col a:hover { color: var(--accent); }

.footer-bar {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: var(--ink-50);
  text-transform: uppercase;
}
@media (min-width: 700px) { .footer-bar { grid-template-columns: 1fr auto; } }
.footer-bar__meta { display: flex; gap: var(--sp-5); flex-wrap: wrap; }

/* --- 19. Breadcrumbs -------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: var(--ink-50);
  padding-block: var(--sp-5);
}
.breadcrumbs a { transition: color var(--dur) var(--ease-out); }
.breadcrumbs a:hover { color: var(--ink); }
.breadcrumbs__sep { color: var(--ink-30); }
.breadcrumbs [aria-current="page"] { color: var(--ink); }

/* --- 20. Service page specifics --------------------- */
.svc-hero {
  padding-block: var(--sp-7) var(--sp-8);
}
.svc-hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: end;
}
@media (min-width: 1000px) { .svc-hero__grid { grid-template-columns: 1.6fr 1fr; gap: var(--sp-7); } }

.svc-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-sub-hero);
  line-height: 1;
  letter-spacing: -0.025em;
  font-weight: 400;
  margin-bottom: var(--sp-5);
}
.svc-hero__title em { font-style: italic; color: var(--ink-70); }
.svc-hero__lead {
  font-size: var(--fs-lg);
  color: var(--ink-70);
  max-width: 54ch;
  line-height: 1.55;
}
.svc-hero__meta {
  margin-top: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 1px solid var(--rule);
  padding-top: var(--sp-5);
  gap: var(--sp-4);
}
.svc-hero__meta dt {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: 0.25rem;
}
.svc-hero__meta dd {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  line-height: 1.1;
}

/* Scope cards (what we do) */
.scope-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-top: var(--sp-7);
}
@media (min-width: 700px) { .scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .scope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.scope-card {
  padding: var(--sp-5);
  background: var(--paper-soft);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  transition: background var(--dur) var(--ease-out);
}
.scope-card:hover { background: var(--paper-deep); }
.scope-card__image {
  width: 100%;
  height: auto;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--r-md);
  display: block;
  background: var(--paper);
}
.scope-card__image--accent { box-shadow: inset 0 0 0 1px rgba(29, 58, 138, 0.08); }
.scope-card__image--forest { box-shadow: inset 0 0 0 1px rgba(45, 90, 61, 0.08); }
.scope-card__image--sun    { box-shadow: inset 0 0 0 1px rgba(232, 189, 72, 0.12); }
.scope-card__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
  font-size: var(--fs-sm);
}
.scope-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-xl);
  line-height: 1.15;
}
.scope-card p {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  line-height: 1.55;
}

/* Siblings — differentiation cards */
.siblings-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
}
@media (min-width: 700px) { .siblings-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .siblings-grid { grid-template-columns: repeat(5, 1fr); } }

.sibling-card {
  padding: var(--sp-5);
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  transition: all var(--dur) var(--ease-out);
  min-height: 240px;
}
.sibling-card:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: translateY(-4px);
}
.sibling-card[data-active="true"] {
  background: var(--accent-wash);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.sibling-card[data-active="true"]:hover { background: var(--accent); color: var(--paper); }
.sibling-card__num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: var(--ink-50);
}
.sibling-card:hover .sibling-card__num { color: rgba(246, 242, 234, 0.45); }
.sibling-card[data-active="true"] .sibling-card__num { color: var(--accent); }
.sibling-card[data-active="true"]:hover .sibling-card__num { color: rgba(246, 242, 234, 0.7); }
.sibling-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.sibling-card p {
  font-size: 0.82rem;
  line-height: 1.5;
  color: inherit;
  opacity: 0.7;
  flex: 1;
}
.sibling-card__link {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
}
.sibling-card__link::after { content: '→'; transition: transform var(--dur) var(--ease-out); }
.sibling-card:hover .sibling-card__link::after { transform: translateX(4px); }

/* Process timeline on service page */
.svc-process {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  margin-top: var(--sp-7);
  counter-reset: svcstep;
}
@media (min-width: 800px) { .svc-process { grid-template-columns: repeat(4, 1fr); position: relative; } }
.svc-process::before {
  content: '';
  display: none;
}
@media (min-width: 800px) {
  .svc-process::before {
    display: block;
    position: absolute;
    top: 22px;
    left: 5%;
    right: 5%;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--rule-strong) 0, var(--rule-strong) 4px, transparent 4px, transparent 10px);
  }
}

.svc-step {
  position: relative;
  text-align: left;
}
.svc-step__dot {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--ink);
  margin-bottom: var(--sp-4);
  z-index: 1;
}
.svc-step__dot::before {
  counter-increment: svcstep;
  content: "0" counter(svcstep);
  font-size: 0.8rem;
}
.svc-step h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-lg);
  letter-spacing: -0.01em;
  margin-bottom: 0.35rem;
  line-height: 1.2;
}
.svc-step p {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  line-height: 1.55;
}

/* Pricing block on service page */
.svc-pricing {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
  padding: var(--sp-7);
  background: var(--paper-soft);
  border-radius: var(--r-xl);
  margin-top: var(--sp-7);
}
@media (min-width: 900px) { .svc-pricing { grid-template-columns: 1fr 1.1fr; gap: var(--sp-8); align-items: center; } }
.svc-pricing__num {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin-bottom: var(--sp-3);
}
.svc-pricing__num em { font-style: italic; color: var(--ink-70); font-size: 0.4em; }
.svc-pricing__unit {
  font-family: var(--font-mono);
  font-size: 1rem;
  letter-spacing: 0.02em;
  color: var(--ink-50);
}
.svc-pricing h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.5vw, 2.25rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: var(--sp-3);
}
.svc-pricing p { color: var(--ink-70); line-height: 1.55; }
.svc-pricing__note {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--ink-50);
  padding-top: var(--sp-3);
  margin-top: var(--sp-4);
  border-top: 1px solid var(--rule);
}

/* --- 21. Article (blog post) ------------------------ */
.article-hero {
  padding-block: var(--sp-7) var(--sp-7);
}
.article-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-50);
  margin-bottom: var(--sp-5);
}
.article-hero__meta .tag { text-transform: uppercase; }
.article-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.25rem, 5.5vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.03em;
  font-weight: 400;
  max-width: 22ch;
  margin-bottom: var(--sp-5);
}
.article-hero__title em { font-style: italic; color: var(--ink-70); }
.article-hero__sub {
  font-size: var(--fs-lg);
  line-height: 1.5;
  color: var(--ink-70);
  max-width: 58ch;
}
.article-hero__byline {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--rule);
}
.article-hero__avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-wash), var(--paper-deep));
  border: 1px solid var(--rule);
  flex-shrink: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--accent);
  font-size: 1.1rem;
}
.article-hero__author-name {
  font-size: var(--fs-sm);
  font-weight: 500;
}
.article-hero__author-role {
  font-size: 0.75rem;
  color: var(--ink-50);
}

.article-hero__cover {
  margin-top: var(--sp-6);
}

/* Article body */
.article-body {
  max-width: var(--max-w-text);
  margin: var(--sp-6) auto;
  font-size: var(--fs-md);
  line-height: 1.72;
  color: var(--ink-90);
}
.article-body > * + * { margin-top: var(--sp-4); }
.article-body p { color: var(--ink-90); }
.article-body strong { color: var(--ink); font-weight: 600; }
.article-body em { font-style: italic; }

.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--ink);
  margin-top: var(--sp-7);
  margin-bottom: var(--sp-4);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--rule);
  scroll-margin-top: 5rem;
}
.article-body h2 em { color: var(--ink-70); }
.article-body h2 + p { margin-top: 0; }

.article-body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 400;
  line-height: 1.2;
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-3);
}

/* Drop cap on first paragraph */
.article-body > p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 5.5em;
  float: left;
  line-height: 0.85;
  padding-top: 0.1em;
  padding-right: 0.12em;
  color: var(--ink);
}

/* Lists */
.article-body ul, .article-body ol {
  padding-left: var(--sp-5);
  margin-block: var(--sp-4);
  display: grid;
  gap: 0.5rem;
}
.article-body ul li { list-style: none; position: relative; padding-left: 1.25rem; }
.article-body ul li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-family: var(--font-mono);
}
.article-body ol { list-style: decimal; color: var(--ink-70); }
.article-body ol li { padding-left: 0.25rem; }
.article-body ol li::marker { color: var(--accent); font-family: var(--font-mono); font-size: 0.9em; }

/* Blockquote */
.article-body blockquote {
  margin-block: var(--sp-6);
  padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-6);
  border-left: 2px solid var(--accent);
  background: linear-gradient(90deg, var(--accent-wash-2), transparent 60%);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
  letter-spacing: -0.005em;
}
.article-body blockquote cite {
  display: block;
  margin-top: var(--sp-3);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: 0.85rem;
  color: var(--ink-50);
  letter-spacing: 0.01em;
}

/* Inline code */
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--paper-deep);
  padding: 0.12em 0.4em;
  border-radius: 4px;
  color: var(--accent-ink);
  border: 1px solid var(--rule);
}

/* Table */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--sp-6);
  font-size: var(--fs-sm);
}
.article-body th, .article-body td {
  padding: 0.9rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}
.article-body th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-50);
  border-bottom: 1px solid var(--rule-strong);
  background: var(--paper-soft);
}
.article-body tr:nth-child(2n) td { background: var(--paper-soft); }

/* Inline image / figure */
.article-body figure {
  margin-block: var(--sp-6);
}
.article-body figure .placeholder { min-height: 260px; }
.article-body figcaption {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink-50);
  margin-top: 0.75rem;
  padding-left: var(--sp-3);
  border-left: 1px solid var(--rule-strong);
}

/* Article CTA inline box */
.article-cta {
  margin-block: var(--sp-7);
  padding: var(--sp-6);
  background: linear-gradient(135deg, var(--accent-wash) 0%, #F3EBD3 100%);
  border-radius: var(--r-xl);
  border: 1px solid #D9D3C2;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  align-items: center;
  position: relative;
  overflow: hidden;
}
@media (min-width: 700px) { .article-cta { grid-template-columns: auto 1fr auto; } }
.article-cta__mark {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 3rem;
  color: var(--accent);
  line-height: 1;
}
.article-cta__text { }
.article-cta__text strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 0.4rem;
  letter-spacing: -0.01em;
}
.article-cta__text strong em { font-style: italic; color: var(--accent-ink); }
.article-cta__text p {
  font-size: var(--fs-sm);
  color: var(--ink-70);
  line-height: 1.5;
}
.article-cta__text p code {
  background: rgba(29, 58, 138, 0.1);
  color: var(--accent-ink);
}

/* TOC sidebar */
.article-toc {
  display: none;
}
@media (min-width: 1200px) {
  .article-wrapper { position: relative; }
  .article-toc {
    display: block;
    position: sticky;
    top: 6rem;
    padding-top: var(--sp-6);
    max-width: 220px;
    font-size: 0.82rem;
    color: var(--ink-50);
    line-height: 1.45;
  }
  .article-toc h4 {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: var(--sp-3);
    color: var(--ink-50);
    font-weight: 500;
  }
  .article-toc ol { display: grid; gap: 0.55rem; counter-reset: tocn; }
  .article-toc li { counter-increment: tocn; position: relative; padding-left: 2rem; }
  .article-toc li::before {
    content: "0" counter(tocn);
    position: absolute; left: 0; top: 0.1rem;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--ink-30);
  }
  .article-toc a { transition: color var(--dur) var(--ease-out); color: var(--ink-70); }
  .article-toc a:hover { color: var(--accent); }
  .article-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--sp-7);
    align-items: start;
  }
  .article-grid .article-body { margin-top: 0; }
}

/* Related posts */
.related {
  padding-block: var(--sp-8);
  border-top: 1px solid var(--rule);
}

/* --- 22. Reveal animations --------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

.stagger > * { --d: 0ms; }
.stagger > *:nth-child(1) { --reveal-delay: 0ms; }
.stagger > *:nth-child(2) { --reveal-delay: 80ms; }
.stagger > *:nth-child(3) { --reveal-delay: 160ms; }
.stagger > *:nth-child(4) { --reveal-delay: 240ms; }
.stagger > *:nth-child(5) { --reveal-delay: 320ms; }
.stagger > *:nth-child(6) { --reveal-delay: 400ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .ticker__track { animation: none; }
}

/* --- 23. Misc utilities ------------------------------ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.section-intro {
  max-width: 32ch;
  color: var(--ink-70);
  margin-top: var(--sp-3);
}

/* Inline labeled data */
.data-list {
  display: grid;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-50);
}
.data-list span + span::before { content: '—'; margin-right: 0.5rem; color: var(--ink-30); }

/* ── Realne grafiki (fallback z placeholderów) ── */
.hero__visual .hero__img,
.hero__visual img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 18px 48px -16px rgba(29, 58, 138, 0.28), 0 4px 14px -8px rgba(0, 0, 0, 0.12);
  display: block;
}
.article-hero__cover img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg, 16px);
  box-shadow: 0 18px 48px -16px rgba(29, 58, 138, 0.22);
  display: block;
}
.blog-card__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md, 12px);
  display: block;
  transition: transform var(--dur) var(--ease-out);
}
.blog-card:hover .blog-card__media img { transform: scale(1.03); }
.blog-card__media { overflow: hidden; border-radius: var(--radius-md, 12px); }

.interlude-photo {
  width: 100%;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow: 0 18px 48px -16px rgba(29, 58, 138, 0.22);
}
.interlude-photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
}

.service-row__icon-img {
  width: clamp(120px, 14vw, 180px);
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md, 12px);
  overflow: hidden;
  background: var(--surface-soft, #EDE6D3);
  box-shadow: 0 8px 24px -12px rgba(29, 58, 138, 0.18);
  margin-left: auto;
}
.service-row__icon-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur) var(--ease-out);
}
.service-row:hover .service-row__icon-img img { transform: scale(1.04); }
@media (max-width: 800px) {
  .service-row__icon-img { width: 96px; margin-left: 0; }
}