/* =========================================================================
   AlbiDev - warstwa tokenów i komponentów front-endu.
   Ciemny motyw, jedna paleta, jeden radius (4px). Złoto = akcent
   interakcji i marki. Czerwień = stan zarezerwowany (live / pilne / błąd
   / ikony oferty WP). VARIANCE 7 / MOTION 5 / DENSITY 4.
   ========================================================================= */

:root {
  --ab-bg:            #16171A;
  --ab-surface:       #1C1E21;
  --ab-surface-2:     #232529;
  --ab-text:          #F1F0EE;
  --ab-text-dim:      #9A9BA1;
  --ab-text-faint:    #83848C;
  --ab-gold:          #EBA13A;
  --ab-gold-hover:    #F1B056;
  --ab-gold-soft:     rgba(235,161,58,0.14);
  --ab-gold-border:   rgba(235,161,58,0.40);
  --ab-red:           #E5484D;
  --ab-red-soft:      rgba(229,72,77,0.14);
  --ab-border:        rgba(255,255,255,0.08);
  --ab-border-strong: rgba(255,255,255,0.14);
  --ab-radius:        4px;
  --ab-radius-lg:     6px;
  --ab-max:           1320px;
  --ab-ease:          cubic-bezier(.16,1,.3,1);
}

/* ---- Baza ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* RESET RENDEROWANIA TEKSTU
   Blocksy/WP dokłada headingom text-shadow i -webkit-text-fill-color, które na
   ciemnym tle wychodzą przygaszone (getComputedStyle raportuje wartości OK, ale
   render jest szary). Zerujemy jawnie i ustawiamy fill-color = color. */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.entry-content :is(h1, h2, h3, h4, h5, h6),
p, li, .abp-hero__sub, .abp-shead p,
.abp-proj__name, .abp-lane h3, .abp-role__h, .ab-brand__word,
.ab-footer__h, .ab-footer__mail {
  text-shadow: none !important;
  -webkit-text-stroke: 0 !important;
}
body :is(h1, h2, h3, h4, h5, h6),
body .wp-block-heading,
body .entry-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--ab-text) !important;
  -webkit-text-fill-color: var(--ab-text) !important;
}
/* Akcent złoty w nagłówku (span.g) i linki prozy muszą wygrać z resetem wyżej. */
:is(h1, h2, h3, h4, h5, h6) .g,
.wp-block-heading .g {
  color: var(--ab-gold) !important;
  -webkit-text-fill-color: var(--ab-gold) !important;
}

/* Blocksy maluje body/kontener na jasno z własnej palety - dobijamy ciemnym.
   To był powód "wyblakłych" nagłówków: biały tekst na białym tle. */
html, body,
body.ct-loading,
#main-container, #primary, .site-main,
.ct-container, .ct-container-full,
[data-content-area], .ct-content-block,
article.page, .entry-content {
  background-color: var(--ab-bg) !important;
}
.ct-container, .ct-container-full, #primary, .site-main,
[data-content-area], .ct-content-block, article.page, .entry-content {
  background-color: transparent !important;
}

body {
  color: var(--ab-text);
  font-family: 'Switzer', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}

/* Tylko h1 + wordmarki na Cabinet - niższy x-height, poniżej ~20px robi się mydlany. */
h1, .is-style-display, .ab-display {
  font-family: 'Cabinet Grotesk', 'Switzer', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.06;
}
h2, h3, h4, h5, h6 {
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.24;
  color: var(--ab-text);
}

/* Liczby, kursy, logi, skróty, etykiety mono. Switzer ma cyfry tabelaryczne
   domyślnie; Commit Mono wymuszamy tam, gdzie liczy się rytm znaków. */
code, kbd, samp, pre, .ab-mono {
  font-family: 'Commit Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  font-variant-numeric: tabular-nums;
}

p { color: var(--ab-text); max-width: 68ch; }
.entry-content p, .ab-prose p { color: var(--ab-text); }
a { color: var(--ab-gold); text-decoration: none; text-underline-offset: 3px; }
a:hover { text-decoration: underline; }
/* Linki w prozie potrafią renderować się przygaszone (ten sam błąd co nagłówki).
   Wymuszamy fill-color TYLKO na linkach wewnątrz akapitów i list, nie na kartach-linkach. */
.entry-content p > a,
.entry-content li > a {
  -webkit-text-fill-color: var(--ab-gold);
}
/* Karty-linki: fill-color dziedziczony z rodzica nie może przebić kolorów dzieci. */
.abp-proj, .abr-proj, .abr-proof__main, .abp-role {
  -webkit-text-fill-color: currentColor;
}
.abr-proj *, .abr-proof__main *, .abp-proj * { -webkit-text-fill-color: currentColor; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--ab-gold);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--ab-gold-soft); color: var(--ab-text); }

hr, .wp-block-separator { border-color: var(--ab-border); color: var(--ab-border); }

/* ---- Eyebrow / mono label (używać oszczędnie: max 1 na 3 sekcje) ---- */
.ab-eyebrow {
  font-family: 'Commit Mono', ui-monospace, monospace;
  font-size: 0.74rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ab-gold);
  -webkit-text-fill-color: var(--ab-gold);
}

/* ---- Przyciski ---- */
.wp-block-button__link,
.wp-element-button,
button.ab-btn,
a.ab-btn {
  --wp--custom--radius: var(--ab-radius);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--ab-radius);
  font-family: 'Switzer', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1;
  text-decoration: none;
  transition: transform .18s var(--ab-ease), background-color .18s var(--ab-ease), border-color .18s var(--ab-ease);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
a.ab-btn--primary {
  background: var(--ab-gold);
  color: var(--ab-bg);
  -webkit-text-fill-color: var(--ab-bg);
  border: 1px solid var(--ab-gold);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
a.ab-btn--primary:hover {
  background: var(--ab-gold-hover);
  border-color: var(--ab-gold-hover);
  color: var(--ab-bg);
  text-decoration: none;
}
.wp-block-button.is-style-outline .wp-block-button__link,
a.ab-btn--ghost {
  background: transparent;
  color: var(--ab-text);
  -webkit-text-fill-color: var(--ab-text);
  border: 1px solid var(--ab-border-strong);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
a.ab-btn--ghost:hover {
  border-color: var(--ab-gold);
  background: var(--ab-gold-soft);
  color: var(--ab-gold);
  text-decoration: none;
}
.wp-block-button__link:active, a.ab-btn:active { transform: translateY(1px); }
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link, a.ab-btn { transition: none; }
  .wp-block-button__link:active, a.ab-btn:active { transform: none; }
}

/* ---- Karty / powierzchnie ---- */
.ab-card {
  background: var(--ab-surface);
  border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  transition: border-color .25s var(--ab-ease), transform .25s var(--ab-ease);
}
.ab-card:hover { border-color: var(--ab-border-strong); }
.ab-card--link:hover { transform: translateY(-4px); border-color: var(--ab-gold-border); }
@media (prefers-reduced-motion: reduce) { .ab-card, .ab-card--link:hover { transform: none; transition: border-color .2s; } }

/* ---- Rytm sekcji (DENSITY 4) ---- */
.ab-section { padding-block: clamp(4rem, 9vw, 6.5rem); }
.ab-wrap { max-width: var(--ab-max); margin-inline: auto; padding-inline: 5vw; }

/* ---- Blocksy chrome off (własny header/footer) ---- */
.ct-header, #masthead.ct-header, .ct-footer, #colophon.ct-footer { display: none !important; }
[data-prefix="single_page"] .entry-content, .ct-container { color: var(--ab-text); }

/* ---- Skip link ---- */
.ab-skip { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--ab-gold); color: var(--ab-bg);
  padding: .75rem 1.25rem; font-weight: 600; border-radius: 0 0 var(--ab-radius) 0; }
.ab-skip:focus { left: 0; }

/* ---- Header ---- */
.ab-header { position: sticky; top: 0; z-index: 50;
  background: rgba(22,23,26,.92); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--ab-border); }
@supports not (backdrop-filter: blur(1px)) { .ab-header { background: #17181B; } }
.ab-header__inner { max-width: var(--ab-max); margin-inline: auto; padding: .9rem 5vw;
  display: flex; align-items: center; gap: 1.75rem; min-height: 62px; }
.ab-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; margin-right: auto; }
.ab-brand__mark { width: 32px; height: 32px; display: block; }
.ab-brand__word { font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; font-weight: 800;
  font-size: 1.18rem; letter-spacing: -.02em; color: var(--ab-text); }
.ab-brand:hover .ab-brand__word { color: var(--ab-gold); }

.ab-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 1.6rem; }
.ab-nav__list a { color: var(--ab-text-dim); font-weight: 500; font-size: .95rem; text-decoration: none;
  transition: color .18s var(--ab-ease); }
.ab-nav__list a:hover, .ab-nav__list .current-menu-item > a { color: var(--ab-text); }
.ab-nav__list .sub-menu { display: none; }

.ab-header__cta { font-size: .86rem; padding: .6rem 1.15rem; }

.ab-burger { display: none; background: none; border: 0; width: 40px; height: 40px; padding: 8px; cursor: pointer; }
.ab-burger span { display: block; height: 2px; background: var(--ab-text); margin: 5px 0; transition: .2s var(--ab-ease); }

.ab-mobile { display: none; }
@media (max-width: 880px) {
  .ab-nav, .ab-header__cta { display: none; }
  .ab-burger { display: block; }
  .ab-mobile { display: block; padding: 1rem 5vw 1.75rem; border-top: 1px solid var(--ab-border);
    background: var(--ab-bg); }
  .ab-mobile[hidden] { display: none; }
  .ab-mobile__list { list-style: none; margin: 0 0 1rem; padding: 0; }
  .ab-mobile__list a { display: block; padding: .75rem 0; color: var(--ab-text); text-decoration: none;
    border-bottom: 1px solid var(--ab-border); font-size: 1.05rem; }
  .ab-mobile .sub-menu { padding-left: 1rem; }
  .ab-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .ab-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .ab-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ---- Footer ---- */
.ab-footer { background: var(--ab-bg); border-top: 1px solid var(--ab-border);
  padding: clamp(4rem, 9vw, 6.5rem) 5vw 2.5rem; margin-top: clamp(4rem, 10vw, 7rem); }
.ab-footer__inner { max-width: var(--ab-max); margin-inline: auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: start; }
.ab-footer__h { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0 0 1.1rem; }
.ab-footer__mail { display: inline-block; font-size: clamp(1.25rem, 3.4vw, 1.9rem); font-weight: 700;
  color: var(--ab-text); text-decoration: none; border-bottom: 2px solid var(--ab-gold); padding-bottom: 3px;
  word-break: break-word; }
.ab-footer__mail { -webkit-text-fill-color: currentColor; }
.ab-footer__mail:hover { color: var(--ab-gold); }
.ab-footer__meta { margin: 1.1rem 0 0; color: var(--ab-text-dim); font-size: .9rem; }
.ab-footer__meta a { color: var(--ab-text-dim); }
.ab-footer__meta a:hover { color: var(--ab-gold); }
.ab-footer__repos .ab-eyebrow { display: block; margin-bottom: 1rem; }
.ab-footer__repos ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ab-border); }
.ab-footer__repos li a { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem 0; border-bottom: 1px solid var(--ab-border); text-decoration: none; color: var(--ab-text);
  font-weight: 600; transition: color .18s var(--ab-ease); }
.ab-footer__repos li a:hover { color: var(--ab-gold); }
.ab-footer__repos small { color: var(--ab-text-faint); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 400; }
.ab-footer__fine { max-width: var(--ab-max); margin: 3rem auto 0; color: var(--ab-text-faint); font-size: .78rem; }
@media (max-width: 720px) { .ab-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; } }

/* Reveal-on-scroll wyłączony na razie - strona statyczna, bez FOIC */

/* =========================================================================
   STRONA GŁÓWNA
   ========================================================================= */
.ab-front .ct-container,
.ab-front #main-container,
.ab-front .entry-content > .alignfull { max-width: none; padding: 0; }
.ab-front .entry-content { margin: 0; max-width: none; }
/* Tytuł strony / hero Blocksy na froncie precz - sekcje robią własny nagłówek */
.ab-front .entry-header,
.ab-front .page-title,
.ab-front .ct-page-title,
.ab-front .page-header,
.ab-front .hero-section,
.ab-front .ct-hero-section { display: none !important; }

/* Kolor tekstu: dobicie palety Blocksy (jego domyślny motyw jest jasny,
   a selektory typu .ct-container .entry-content h2 mają wyższą specyficzność) */
.ab-front .entry-content { color: var(--ab-text); }
.ab-front .entry-content :is(h1, h2, h3, h4, h5, h6) { color: var(--ab-text) !important; -webkit-text-fill-color: var(--ab-text) !important; opacity: 1; }
.ab-front .abp-hero h1 { color: var(--ab-text) !important; -webkit-text-fill-color: var(--ab-text) !important; }
.ab-front .abp-hero h1 .g { color: var(--ab-gold) !important; -webkit-text-fill-color: var(--ab-gold) !important; }
.ab-front .ab-eyebrow,
.ab-front .abp-hero__eyebrow { color: var(--ab-gold) !important; -webkit-text-fill-color: var(--ab-gold) !important; }
.ab-front .abp-hero__sub,
.ab-front .abp-shead p,
.ab-front .abp-lane p,
.ab-front .abp-proj__desc,
.ab-front .abp-role__d { color: var(--ab-text-dim) !important; -webkit-text-fill-color: var(--ab-text-dim) !important; }
.ab-front .abp-hero__rule { color: var(--ab-text-faint); }
.ab-front .abp-proj__stack { color: var(--ab-text-faint); }
.ab-front .abp-lane__go,
.ab-front .abp-proj__link { color: var(--ab-gold) !important; -webkit-text-fill-color: var(--ab-gold) !important; }
.ab-front .abp-role__go { color: var(--ab-text); }
/* Ghost CTA czytelny na ciemnym */
.ab-front .ab-btn--ghost { border-color: var(--ab-border-strong); color: var(--ab-text); }
.ab-front .ab-btn--ghost:hover { border-color: var(--ab-gold); color: var(--ab-gold); background: var(--ab-gold-soft); }

/* Zeruj górny odstęp treści na froncie + spójny rytm sekcji */
.ab-front .wp-site-blocks,
.ab-front main,
.ab-front .ct-container,
.ab-front .entry-content { padding-top: 0; margin-top: 0; }
/* WAŻNE: tylko margin-block, nie `margin`. `margin:0` zabija boczne margin:auto,
   którym WP centruje sekcje w layout-constrained - wtedy hero jest po środku,
   a reszta leci do lewej. */
.ab-front .abp-section,
.ab-front .abp-section--tight { margin-block: 0 !important; padding-block: clamp(3rem, 7vw, 5rem) !important; }
.ab-front .abp-section + .abp-section { border-top: 1px solid var(--ab-border); }
.ab-front .abp-hero { padding-top: clamp(2.5rem, 7vw, 4.5rem) !important; padding-bottom: clamp(2.5rem, 6vw, 4rem) !important; margin-block: 0 !important; }
.ab-front .ab-footer { margin-top: 0 !important; padding-top: clamp(3rem, 6vw, 4rem) !important; }
.ab-front .abp-section > .abp-wrap > .abp-shead:first-child { margin-bottom: clamp(1.25rem, 3vw, 2rem); }
.ab-front .abp-hero h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); }
.ab-front .abp-hero__sub { margin-block: 1.25rem 1.75rem; }
.ab-front .abp-proj__name,
.ab-front .abp-lane h3,
.ab-front .abp-role__h { color: var(--ab-text) !important; -webkit-text-fill-color: var(--ab-text) !important; }
.ab-front .ab-btn--ghost { border-color: rgba(255,255,255,0.3) !important; color: var(--ab-text) !important; }
.ab-front .ab-btn--ghost:hover { border-color: var(--ab-gold) !important; color: var(--ab-gold) !important; }

.abp-section { padding-block: clamp(3.5rem, 8vw, 6rem); }
.abp-section--tight { padding-block: clamp(2.5rem, 5vw, 3.5rem); }
.abp-wrap { max-width: var(--ab-max); margin-inline: auto; padding-inline: 5vw; }

.abp-shead { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); max-width: 46ch; }
.abp-shead h2 { font-size: clamp(1.75rem, 3.6vw, 2.5rem); font-weight: 700; letter-spacing: -0.015em; }
.abp-shead p { color: var(--ab-text-dim); margin-top: 0.6rem; font-size: 1.02rem; }

/* ---- Hero (asymetryczny, wyrównany do lewej) ---- */
.abp-hero { padding-top: clamp(3rem, 8vw, 5.5rem); padding-bottom: clamp(3.5rem, 9vw, 6rem); }
.abp-hero__inner { max-width: var(--ab-max); margin-inline: auto; padding-inline: 5vw;
  display: grid; grid-template-columns: minmax(0, 60ch) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.abp-hero__eyebrow { display: inline-block; margin-bottom: 1.35rem; }
.abp-hero h1 { font-size: var(--wp--preset--font-size--huge, clamp(2.6rem, 6vw, 4.4rem));
  font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.05; margin: 0; }
.abp-hero h1 .g { color: var(--ab-gold); }
.abp-hero__sub { color: var(--ab-text-dim); font-size: clamp(1.05rem, 2vw, 1.22rem);
  line-height: 1.55; max-width: 52ch; margin: 1.5rem 0 2rem; }
.abp-hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }
.abp-hero__rule { align-self: start; border-left: 1px solid var(--ab-border);
  padding-left: 1.5rem; margin-top: 0.35rem; color: var(--ab-text-faint); font-family: 'Commit Mono', monospace;
  font-size: 0.78rem; line-height: 1.9; }
@media (max-width: 900px) {
  .abp-hero__inner { grid-template-columns: 1fr; }
  .abp-hero__rule { display: none; }
}

/* ---- Co robię: dwa tory (karty, jak reszta strony) ---- */
.abp-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.abp-lane { background: var(--ab-surface); border: 1px solid var(--ab-border);
  border-radius: var(--ab-radius); padding: clamp(1.5rem, 3vw, 2rem);
  display: flex; flex-direction: column; }
.abp-lane h3 { font-size: 1.2rem; font-weight: 700; margin-bottom: 0.6rem; }
.abp-lane p { color: var(--ab-text-dim); font-size: 0.98rem; margin-bottom: 1rem; flex-grow: 1; }
.abp-lane__go { font-weight: 600; font-size: 0.9rem; color: var(--ab-gold); align-self: flex-start; }
.abp-lane__go:hover { text-decoration: underline; }
@media (max-width: 760px) { .abp-lanes { grid-template-columns: 1fr; } }

/* ---- Projekty: równa siatka 2x2 ---- */
.abp-projects__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.abp-proj { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; height: 100%;
  transition: border-color .25s var(--ab-ease), transform .25s var(--ab-ease); text-decoration: none; color: inherit; }
a.abp-proj:hover { border-color: var(--ab-gold-border); transform: translateY(-4px); }
.abp-proj--static { cursor: default; }
.abp-proj__name { font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; font-weight: 800;
  font-size: clamp(1.35rem, 2.6vw, 1.7rem); letter-spacing: -0.02em; }
.abp-proj__desc { color: var(--ab-text-dim); font-size: 0.98rem; flex-grow: 1; }
.abp-proj__stack { font-family: 'Commit Mono', monospace; font-size: 0.72rem; color: var(--ab-text-faint);
  letter-spacing: 0.04em; }
.abp-proj__link { font-size: 0.85rem; font-weight: 600; color: var(--ab-gold); }
@media (prefers-reduced-motion: reduce) { a.abp-proj:hover { transform: none; } }
@media (max-width: 720px) { .abp-projects__grid { grid-template-columns: 1fr; } }

/* ---- Poza tym: gry i rynki (lekka lista, bez ramki) ---- */
.abp-more { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 3.5rem); }
.abp-more__cat { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ab-gold); margin: 0 0 0.2rem; padding-bottom: 0.6rem; }
.abp-more__item { display: block; padding: 0.9rem 0; border-top: 1px solid var(--ab-border);
  text-decoration: none; color: inherit; transition: padding-left .18s var(--ab-ease); }
a.abp-more__item:hover { padding-left: 0.4rem; }
.abp-more__n { display: block; font-weight: 700; font-size: 1rem; color: var(--ab-text); }
a.abp-more__item:hover .abp-more__n { color: var(--ab-gold); }
.abp-more__d { display: block; margin-top: 0.2rem; font-size: 0.9rem; color: var(--ab-text-dim); }
@media (max-width: 720px) { .abp-more { grid-template-columns: 1fr; gap: 0; } }

/* ---- Role: pasek wayfinding do podstron ---- */
.abp-roles__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.abp-role { --rc: var(--ab-text-dim); display: flex; flex-direction: column; gap: 0.5rem;
  background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: 1.75rem; text-decoration: none; color: inherit;
  transition: border-color .25s var(--ab-ease), transform .25s var(--ab-ease); }
.abp-role:hover { border-color: var(--rc); transform: translateY(-4px); }
.abp-role--qa { --rc: #FF8A3D; }
.abp-role--it { --rc: #3FC2B0; }
.abp-role--data { --rc: #E5484D; }
.abp-role__tag { font-family: 'Commit Mono', monospace; font-size: 0.72rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--rc); }
.abp-role__h { font-size: 1.15rem; font-weight: 700; }
.abp-role__d { color: var(--ab-text-dim); font-size: 0.95rem; flex-grow: 1; }
.abp-role__go { font-weight: 600; font-size: 0.88rem; color: var(--ab-text); }
@media (prefers-reduced-motion: reduce) { .abp-role:hover { transform: none; } }
@media (max-width: 760px) { .abp-roles__grid { grid-template-columns: 1fr; } }

/* ---- Formularze (Fluent Forms) ---- */
.fluentform .ff-el-input--content input:not([type=checkbox]):not([type=radio]),
.fluentform .ff-el-input--content textarea,
.fluentform select {
  background: var(--ab-surface) !important;
  border: 1px solid var(--ab-border-strong) !important;
  color: var(--ab-text) !important;
  border-radius: var(--ab-radius) !important;
}
.fluentform .ff-el-input--label label { color: var(--ab-text) !important; font-weight: 600; }
.fluentform input::placeholder, .fluentform textarea::placeholder { color: var(--ab-text-faint) !important; }
.fluentform .ff-btn-submit { background: var(--ab-gold) !important; color: var(--ab-bg) !important; border-radius: var(--ab-radius) !important; font-weight: 600 !important; }
.fluentform .ff-el-is-error input, .fluentform .ff-el-is-error textarea { border-color: var(--ab-red) !important; }
.fluentform .error-text, .fluentform .ff-el-is-error .text-danger { color: var(--ab-red) !important; }

.ab-footer__hint { margin: .9rem 0 0; color: var(--ab-text-faint); font-size: .82rem; max-width: 42ch; }

/* =========================================================================
   PODSTRONY TREŚCIOWE - wspólny układ (oferta + role)
   ========================================================================= */
.abo-wrap, .abr-wrap { max-width: var(--ab-max); margin-inline: auto; padding-inline: 5vw; }
.abo-section, .abr-section { padding-block: clamp(3rem, 7vw, 5rem); }
/* Bez pełnowymiarowych szarych pasów - wszystkie sekcje w tej samej kolumnie,
   rozdzielone tylko włoskową linią. Każda strona ma ten sam rytm. */
.abo-section + .abo-section,
.abr-section + .abr-section,
.abo-cta, .abr-cta {
  border-top: 1px solid var(--ab-border);
}
.abo-section--care, .abr-section--alt { background: none; }
.abo-shead { max-width: 46ch; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.abo-shead h2, .abr-section > .abr-wrap > h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.35rem); font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.abo-shead p { color: var(--ab-text-dim); margin-top: .7rem; font-size: 1.02rem; }
.abr-section > .abr-wrap > h2 { margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem); }

/* ---- Oferta: hero ---- */
.abo-hero { padding: clamp(2.5rem, 7vw, 4.5rem) 5vw clamp(2.5rem, 6vw, 4rem); }
.abo-hero__inner { max-width: var(--ab-max); margin-inline: auto;
  display: grid; grid-template-columns: minmax(0, 60ch) 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: end; }
.abo-hero h1 { font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; font-weight: 800;
  letter-spacing: -0.02em; line-height: 1.05; font-size: clamp(2.3rem, 5.2vw, 3.6rem); margin: 1rem 0 0; }
.abo-hero__sub { color: var(--ab-text-dim); font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.55; max-width: 54ch; margin: 1.35rem 0 1.75rem; }
.abo-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.abo-hero__note { margin: 1.35rem 0 0; color: var(--ab-text-faint); font-size: .8rem; }
.abo-hero__facts { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ab-border); }
.abo-hero__facts li { display: flex; flex-direction: column; gap: .15rem;
  padding: .9rem 0; border-bottom: 1px solid var(--ab-border); }
.abo-hero__k { font-family: 'Commit Mono', monospace; font-size: .7rem; text-transform: uppercase;
  letter-spacing: .1em; color: var(--ab-gold); }
.abo-hero__v { color: var(--ab-text-dim); font-size: .92rem; }
@media (max-width: 900px) { .abo-hero__inner { grid-template-columns: 1fr; align-items: start; } }

/* ---- Oferta: siatka usług jednorazowych ---- */
.abo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.abo-card { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: .6rem;
  transition: border-color .25s var(--ab-ease); }
.abo-card:hover { border-color: var(--ab-border-strong); }
.abo-card__icon { width: 52px; height: 52px; object-fit: contain; margin-bottom: .35rem; }
.abo-card h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.abo-card p { color: var(--ab-text-dim); font-size: .96rem; margin: 0; max-width: none; }
@media (max-width: 900px) { .abo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .abo-grid { grid-template-columns: 1fr; } }

/* ---- Oferta: pakiety opieki (środkowy wyróżniony) ---- */
.abo-tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; align-items: start; }
.abo-tier { background: var(--ab-bg); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .6rem; }
.abo-tier--mid { border-color: var(--ab-gold-border); box-shadow: 0 0 0 1px var(--ab-gold-border) inset; }
.abo-tier__icon { width: 44px; height: 44px; object-fit: contain; }
.abo-tier h3 { font-size: 1.2rem; font-weight: 700; margin: .2rem 0 0; }
.abo-tier__lead { color: var(--ab-text-dim); font-size: .96rem; margin: 0 0 .4rem; max-width: none; }
.abo-tier__list { list-style: none; margin: 0; padding: .6rem 0 0; border-top: 1px solid var(--ab-border);
  display: flex; flex-direction: column; gap: .55rem; }
.abo-tier__list li { position: relative; padding-left: 1.35rem; color: var(--ab-text); font-size: .93rem; }
.abo-tier__list li::before { content: "+"; position: absolute; left: 0; top: -1px;
  font-family: 'Commit Mono', monospace; color: var(--ab-gold); font-weight: 700; }
@media (max-width: 900px) { .abo-tiers { grid-template-columns: 1fr; } }

/* ---- Oferta: kroki ---- */
.abo-steps { list-style: none; margin: 0; padding: 0; counter-reset: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--ab-border);
  border: 1px solid var(--ab-border); border-radius: var(--ab-radius); overflow: hidden; }
.abo-step { background: var(--ab-bg); padding: clamp(1.4rem, 3vw, 2rem); display: flex; gap: 1rem; }
.abo-step__n { font-family: 'Commit Mono', monospace; color: var(--ab-gold); font-size: .8rem; padding-top: .2rem; }
.abo-step__b h3 { font-size: 1.1rem; font-weight: 700; margin: 0 0 .35rem; }
.abo-step__b p { color: var(--ab-text-dim); font-size: .95rem; margin: 0; max-width: none; }
@media (max-width: 720px) { .abo-steps { grid-template-columns: 1fr; } }

/* ---- Oferta: FAQ ---- */
.abo-faq { border-top: 1px solid var(--ab-border); }
.abo-q { border-bottom: 1px solid var(--ab-border); }
.abo-q > summary { cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
  font-weight: 600; font-size: 1.02rem; color: var(--ab-text); }
.abo-q > summary::-webkit-details-marker { display: none; }
.abo-q > summary::after { content: "+"; position: absolute; right: .25rem; top: 50%; transform: translateY(-50%);
  font-family: 'Commit Mono', monospace; color: var(--ab-gold); font-size: 1.2rem; }
.abo-q[open] > summary::after { content: "\2013"; }
.abo-q > p { color: var(--ab-text-dim); font-size: .97rem; margin: 0 0 1.1rem; max-width: 68ch; }

/* ---- Oferta: CTA końcowe ---- */
.abo-cta { padding-block: clamp(3rem, 7vw, 5rem); }
.abo-cta > .abo-wrap { }
.abo-cta__box { max-width: none; margin: 0; text-align: left;
  background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.75rem, 4vw, 2.75rem); }
.abo-cta__box h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); font-weight: 700; margin: 0 0 .75rem; }
.abo-cta__box > p { color: var(--ab-text-dim); margin: 0 0 1.5rem; max-width: 58ch; }
.abo-cta__mail { font-size: clamp(.95rem, 2.2vw, 1.05rem); }
.abo-cta__meta { color: var(--ab-text-faint); font-size: .82rem; margin: 1.1rem 0 0; }
.abo-cta__note { color: var(--ab-text-faint); font-size: .82rem; margin: .5rem 0 0; }

/* =========================================================================
   PODSTRONY RÓL (QA / IT / Data Analyst)
   ========================================================================= */
.abr { --rc: var(--ab-gold); }
.abr--qa  { --rc: #FF8A3D; }
.abr--it  { --rc: #3FC2B0; }
.abr--data { --rc: #E5484D; }
.abr .ab-eyebrow, .abr .abr-panel__title { color: var(--rc); -webkit-text-fill-color: var(--rc); }

.abr-hero { max-width: var(--ab-max); margin-inline: auto; padding: clamp(2.5rem, 7vw, 4.5rem) 5vw clamp(2rem, 5vw, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
.abr-hero h1 { font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; font-weight: 800; letter-spacing: -0.02em;
  line-height: 1.06; font-size: clamp(2.2rem, 5vw, 3.5rem); margin: 1rem 0 0; }
.abr-hero__sub { color: var(--ab-text-dim); font-size: clamp(1.03rem, 2vw, 1.18rem); line-height: 1.55;
  max-width: 54ch; margin: 1.35rem 0 1.75rem; }
.abr-hero__cta { display: flex; flex-wrap: wrap; gap: .9rem; }
.abr-panel { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: 1.5rem; }
.abr-panel__title { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; margin: 0 0 1rem; }
.abr-panel__list { margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.abr-panel__list > div { display: flex; flex-direction: column; gap: .1rem; padding-bottom: .85rem;
  border-bottom: 1px solid var(--ab-border); }
.abr-panel__list > div:last-child { border-bottom: 0; padding-bottom: 0; }
.abr-panel__list dt { font-family: 'Commit Mono', monospace; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .08em; color: var(--ab-text-faint); }
.abr-panel__list dd { margin: 0; color: var(--ab-text); font-size: .92rem; }
@media (max-width: 880px) { .abr-hero { grid-template-columns: 1fr; } }

.abr-about { display: grid; grid-template-columns: minmax(0, 62ch) 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.abr-about p { color: var(--ab-text-dim); font-size: 1.02rem; line-height: 1.6; margin: 0; max-width: none; }
.abr-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; align-content: start; }
.abr-tags li { font-family: 'Commit Mono', monospace; font-size: .76rem; color: var(--ab-text-dim);
  border: 1px solid var(--ab-border); border-radius: var(--ab-radius); padding: .35rem .6rem; }
@media (max-width: 820px) { .abr-about { grid-template-columns: 1fr; } }

.abr-timeline { list-style: none; margin: 0; padding: 0; }
.abr-timeline > li { display: flex; gap: 1.25rem; padding: 1.25rem 0; border-top: 1px solid var(--ab-border); }
.abr-timeline > li:last-child { border-bottom: 1px solid var(--ab-border); }
.abr-timeline__n { font-family: 'Commit Mono', monospace; color: var(--rc); font-size: .8rem; padding-top: .2rem; flex-shrink: 0; }
.abr-timeline h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .3rem; }
.abr-timeline h3 span { font-family: 'Commit Mono', monospace; font-weight: 400; font-size: .76rem;
  color: var(--ab-text-faint); margin-left: .5rem; }
.abr-timeline p { color: var(--ab-text-dim); font-size: .95rem; margin: 0; max-width: 72ch; }

.abr-projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.abr-proj { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.4rem, 3vw, 1.9rem); display: flex; flex-direction: column; gap: .55rem;
  text-decoration: none; color: inherit; transition: border-color .25s var(--ab-ease), transform .25s var(--ab-ease); }
a.abr-proj:hover { border-color: var(--rc); transform: translateY(-4px); }
.abr-proj__n { font-family: 'Cabinet Grotesk', 'Switzer', sans-serif; font-weight: 800; font-size: 1.25rem;
  letter-spacing: -0.02em; }
.abr-proj__d { color: var(--ab-text-dim); font-size: .95rem; flex-grow: 1; }
.abr-proj__go { font-family: 'Commit Mono', monospace; font-size: .78rem; color: var(--rc); }
@media (max-width: 720px) { .abr-projects { grid-template-columns: 1fr; } }

.abr-proof { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1rem; }
.abr-proof__main { background: var(--ab-surface); border: 1px solid var(--ab-border); border-left: 3px solid var(--rc);
  border-radius: var(--ab-radius); padding: clamp(1.6rem, 3.5vw, 2.25rem); display: flex; flex-direction: column; gap: .7rem;
  text-decoration: none; color: inherit; transition: border-color .25s var(--ab-ease); }
.abr-proof__main:hover { border-color: var(--rc); }
.abr-proof__main h3, .abr-proof__card h3 { font-size: 1.2rem; font-weight: 700; margin: 0; }
.abr-proof__main p, .abr-proof__card p { color: var(--ab-text-dim); font-size: .95rem; margin: 0; max-width: none; }
.abr-proof__tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--rc); }
.abr-proof__go { font-family: 'Commit Mono', monospace; font-size: .78rem; color: var(--rc); }
.abr-proof__side { display: flex; flex-direction: column; gap: 1rem; }
.abr-proof__card { background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.4rem, 3vw, 1.75rem); display: flex; flex-direction: column; gap: .5rem; }
@media (max-width: 820px) { .abr-proof { grid-template-columns: 1fr; } }

.abr-crosslink { margin: 1.75rem 0 0; color: var(--ab-text-faint); font-size: .9rem; }
.abr-crosslink a { color: var(--rc); -webkit-text-fill-color: var(--rc); }

.abr-cta { padding-block: clamp(3rem, 7vw, 4.5rem); }
.abr-cta__box { max-width: none; margin: 0; text-align: left;
  background: var(--ab-surface); border: 1px solid var(--ab-border); border-radius: var(--ab-radius);
  padding: clamp(1.75rem, 4vw, 2.75rem); }
.abr-cta__box h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); font-weight: 700; margin: 0 0 1.1rem; }
.abr-cta__box .ab-mono { color: var(--ab-text-faint); font-size: .84rem; margin: 1rem 0 0; }
.abr-cta__note { color: var(--ab-text-faint); font-size: .82rem; margin: .5rem 0 0; }