/* Podstrona /projekty/ — projekty pokazowe. Ładowana po style.css (pasek, stopka, tokeny).
   Makiety mają WŁASNE identyfikacje (kolory, kroje), celowo inne niż grafit tej strony:
   pokazują, że każda firma dostaje swój wygląd, a nie wariant szablonu. */

/* Kroje makiet: OFL, przycięte do znaków używanych w makietach (latin + polskie znaki).
   Aliasy „pk-*” zamiast oryginalnych nazw — licencje DM Serif Display i IBM Plex
   zastrzegają nazwy dla zmienionych (przyciętych) wersji. Licencje obok plików. */
@font-face { font-family: "pk-a"; font-weight: 400; font-display: swap; src: url("/assets/fonts/pk-a-dmserif.woff2") format("woff2"); }
@font-face { font-family: "pk-b"; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/pk-b-nunito.woff2") format("woff2"); }
@font-face { font-family: "pk-c"; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/pk-c-cormorant.woff2") format("woff2"); }
@font-face { font-family: "pk-d"; font-weight: 400 600; font-display: swap; src: url("/assets/fonts/pk-d-plex.woff2") format("woff2"); }

/* ---------- układ podstrony ---------- */
.pintro {
  display: grid; gap: 1.25rem; justify-items: start;
  padding: calc(var(--bar-h) + env(safe-area-inset-top, 0px) + clamp(48px, 10svh, 120px)) var(--gutter) clamp(56px, 10svh, 110px);
}
.pintro__back {
  display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin-bottom: .5rem;
  font-size: .94rem; color: var(--szary); text-decoration: none; transition: color .18s ease;
}
.pintro__back:hover { color: var(--biel); }
.pintro__back:hover .arr { transform: translateX(-3px); }
.pintro h1 { margin: 0; font-size: clamp(2.8rem, 7vw, 7rem); font-weight: 600; line-height: .95; letter-spacing: -.058em; }
.pintro__lead { margin: .5rem 0 0; max-width: 58ch; font-size: clamp(1.02rem, 1.25vw, 1.15rem); color: var(--srebro); }
.pintro__list { display: grid; width: 100%; margin: clamp(24px, 5svh, 56px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--linia); }
.pintro__list a {
  display: grid; gap: .3rem; min-height: 44px; padding: 1.1rem 0;
  border-bottom: 1px solid var(--linia); text-decoration: none;
  font-size: 1.2rem; font-weight: 600; letter-spacing: -.03em; transition: color .18s ease;
}
.pintro__list span { font-family: var(--mono); font-size: .7rem; font-weight: 450; letter-spacing: .14em; text-transform: uppercase; color: var(--szary); }
.pintro__list a:hover { color: var(--srebro); }
@media (min-width: 760px) {
  .pintro__list { grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--linia); }
  .pintro__list a { padding: 1.3rem 1.5rem 1.4rem 0; border-bottom: 0; }
  .pintro__list li + li a { padding-inline-start: 1.5rem; border-inline-start: 1px solid var(--linia); }
}

.proj { display: grid; gap: clamp(36px, 6vw, 72px); padding: clamp(72px, 13svh, 150px) var(--gutter); border-top: 1px solid var(--linia); }
.proj__meta { display: grid; gap: 1.1rem; align-content: start; }
.proj__meta h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 3.8rem); font-weight: 600; line-height: .98; letter-spacing: -.055em; }
.proj__desc { margin: 0; max-width: 46ch; color: var(--srebro); }
.proj__points { display: grid; gap: .55rem; margin: .3rem 0 0; padding: 0; list-style: none; }
.proj__points li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .4rem; max-width: 46ch; font-size: .98rem; line-height: 1.5; color: var(--srebro); }
.proj__points li::before { content: ""; width: 5px; height: 5px; margin-top: .62em; background: var(--szary); }
.proj__spec { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin: .5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--linia); }
.proj__spec div { display: grid; gap: .45rem; }
.proj__spec dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--szary); }
.proj__spec dd { display: flex; gap: .35rem; align-items: center; min-height: 22px; margin: 0; font-size: .95rem; }
.proj__spec i { width: 22px; height: 22px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.proj__tags { margin: 0; font-family: var(--mono); font-size: .76rem; line-height: 1.6; color: var(--szary); }
.proj__visual { position: relative; padding: 0 7% 9% 0; }
@media (min-width: 1100px) {
  .proj { grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr); align-items: center; }
  .proj:nth-of-type(odd) { grid-template-columns: minmax(0, 1.6fr) minmax(0, .72fr); }
  .proj:nth-of-type(odd) .proj__meta { order: 2; }
}

.pcta { display: grid; gap: 1.25rem; justify-items: start; padding: clamp(80px, 14svh, 160px) var(--gutter); background: var(--mgla); color: var(--noc); }
.pcta h2 { margin: 0; max-width: 18em; font-size: clamp(2rem, 4.2vw, 4rem); font-weight: 600; line-height: 1; letter-spacing: -.05em; }
.pcta p { margin: 0 0 .75rem; max-width: 52ch; color: var(--tekst-na-mgle); }
.pcta .btn--light { background: var(--noc); color: var(--biel); }
.pcta .btn--light:hover { background: #000; }
.pcta :focus-visible { outline-color: var(--noc); }

/* ---------- ramka przeglądarki ---------- */
/* Makiety to HTML w jednostkach cqw: skalują się z ramką jak zrzut ekranu, ale zostają ostre. */
.pm { position: relative; z-index: 1; container-type: inline-size; overflow: hidden; border: 1px solid var(--linia); border-radius: 10px; background: #1C1E22; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.pm--jasny { border-color: transparent; background: #D9DCE1; }
.pm__bar { display: flex; align-items: center; gap: .9cqw; height: 4cqw; padding-inline: 1.8cqw; }
.pm__bar i { width: 1cqw; height: 1cqw; border-radius: 50%; background: #3A3E45; }
.pm--jasny .pm__bar i { background: #B4B9C1; }
.pm__url { width: 34cqw; height: 2.3cqw; margin-inline: auto; border-radius: .6cqw; background: #2A2D32; }
.pm--jasny .pm__url { background: #EEF0F3; }
.pm__view { height: 58cqw; overflow: hidden; }
/* --page-h: wysokość całej strony w makiecie; najechanie przewija o tyle, ile nie mieści się w oknie */
.pm__page { display: flex; flex-direction: column; height: var(--page-h, 100cqw); overflow: hidden; transition: transform 1.1s var(--ease); }
.pm__page > :last-child { flex: 1; }
.pm__page :where(p), .pp :where(p) { margin: 0; }
@media (hover: hover) and (pointer: fine) {
  html.motion .proj__visual:hover .pm__page { transform: translateY(calc(58cqw - var(--page-h, 100cqw))); transition: transform 3.4s cubic-bezier(.45, 0, .3, 1) .15s; }
}

/* ---------- ramka telefonu ---------- */
.pp {
  position: absolute; z-index: 2; right: 0; bottom: 0; width: 23%;
  container-type: inline-size; aspect-ratio: 9 / 19; padding: 3.2%;
  border: 1px solid #2E3136; border-radius: 16% / 7.6%; background: #08090A;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .6), 0 0 0 1px rgba(0, 0, 0, .4);
}
@media (max-width: 759px) { .pp { width: 30%; } }
.pp__screen { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 13% / 6%; background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 4.6cqw; line-height: 1.4; }
.pp__status { display: flex; justify-content: space-between; align-items: center; padding: 4cqw 7cqw 2cqw; font-size: 4cqw; font-weight: 600; }
.pp__status i { width: 9cqw; height: 3.6cqw; border-radius: 1cqw; border: .5cqw solid currentColor; opacity: .7; }
.pp__nav { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 7cqw 4cqw; }
.pp__nav b { display: flex; align-items: center; gap: 2.4cqw; font-size: 4.8cqw; }
.pp__burger { width: 7cqw; height: 4.4cqw; background: linear-gradient(currentColor, currentColor) 0 0 / 100% .7cqw no-repeat, linear-gradient(currentColor, currentColor) 0 50% / 100% .7cqw no-repeat, linear-gradient(currentColor, currentColor) 0 100% / 70% .7cqw no-repeat; }
.pp__body { display: grid; gap: 4cqw; align-content: start; padding: 2cqw 7cqw 6cqw; }
.pp__kicker { font-size: 3.4cqw; letter-spacing: .16em; color: var(--muted); }
.pp__h { font-family: var(--fh); font-weight: var(--fhw, 600); font-size: 10cqw; line-height: 1.02; letter-spacing: var(--fhl, -.03em); }
.pp__p { color: var(--muted); }
.pp__btn { display: block; padding: 4cqw; border-radius: var(--r); background: var(--acc); color: var(--on-acc); font-weight: 600; text-align: center; }

/* ================= 1. biuro rachunkowe: granat, zieleń, szeryf ================= */
.ma, .ta {
  --bg: #F5F7F6; --ink: #13294B; --acc: #1E7B5C; --on-acc: #fff; --muted: #5B6B7F; --line: #DDE3E8; --soft: #E4EFEA;
  --fh: "pk-a", "DM Serif Display", Georgia, serif; --fhw: 400; --fhl: -.01em;
  --fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --r: .6cqw;
}
.ma { background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 1.3cqw; line-height: 1.45; }
.ma__nav { display: flex; align-items: center; gap: 2.4cqw; height: 7.6cqw; padding-inline: 5cqw; border-bottom: 1px solid var(--line); color: var(--muted); }
.ma__logo, .ta__logo { display: flex; align-items: center; gap: 1cqw; margin-inline-end: auto; font: 400 1.9cqw/1 var(--fh); color: var(--ink); }
.ma__logo i, .ta__logo i { width: 2.3cqw; height: 2.3cqw; border-radius: 50%; background: radial-gradient(circle, var(--acc) 34%, transparent 36%), var(--bg); box-shadow: inset 0 0 0 .28cqw var(--acc); }
.ma__cta { padding: .9cqw 1.6cqw; border-radius: .4cqw; background: var(--acc); color: #fff; }
.ma__hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 5cqw; align-items: center; padding: 5.5cqw 5cqw; }
.ma__kicker { font-size: 1cqw; font-weight: 600; letter-spacing: .18em; color: var(--acc); }
.ma__h { margin-block: 1.4cqw 1.6cqw; font: 400 4.8cqw/1.02 var(--fh); letter-spacing: -.01em; }
.ma__p { max-width: 34ch; font-size: 1.45cqw; line-height: 1.5; color: var(--muted); }
.ma__btns { display: flex; gap: 1cqw; margin-top: 2.6cqw; }
.ma__btns span { padding: 1.1cqw 1.8cqw; border: 1px solid var(--ink); border-radius: .4cqw; }
.ma__btns span:first-child { border-color: var(--acc); background: var(--acc); color: #fff; }
.ma__card { padding: 2.4cqw; border: 1px solid var(--line); border-radius: 1cqw; background: #fff; box-shadow: 0 1.5cqw 4cqw rgba(19, 41, 75, .1); }
.ma__card-h { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 1.3cqw; border-bottom: 1px solid var(--line); }
.ma__card-h b { font: 400 1.9cqw/1.1 var(--fh); }
.ma__card-h span { font-size: 1cqw; color: var(--muted); }
.ma__card ul { list-style: none; margin: 0; padding: .4cqw 0 1.6cqw; }
.ma__card li { display: flex; justify-content: space-between; align-items: center; padding-block: 1cqw; border-bottom: 1px solid #EEF1F3; }
.ma__card em, .ta__card em { display: inline-flex; align-items: center; gap: .7cqw; padding: .3cqw .9cqw; border-radius: 2cqw; background: var(--soft); font-style: normal; font-size: 1.05cqw; color: var(--acc); }
.ma__card .is-open em, .ta__card .is-open em { background: #FDF1DC; color: #9A6212; }
.ma__card-btn { display: block; padding: 1.1cqw; border-radius: .4cqw; background: var(--ink); color: #fff; text-align: center; }
.ma__feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; padding: 4cqw 5cqw; border-top: 1px solid var(--line); }
.ma__feats div { display: grid; gap: .9cqw; align-content: start; }
.ma__feats i { width: 3.4cqw; height: 3.4cqw; margin-bottom: .6cqw; border-radius: .7cqw; background: var(--soft); box-shadow: inset 0 0 0 1.1cqw var(--soft), inset 0 0 0 3cqw var(--acc); }
.ma__feats b { font: 400 2cqw/1.15 var(--fh); }
.ma__feats span, .ma__steps li span, .ma__foot span { display: block; height: .8cqw; border-radius: .4cqw; background: var(--line); }
.ma__feats span:last-child { width: 70%; }
.ma__steps { display: grid; gap: 2cqw; padding: 4cqw 5cqw; background: var(--soft); }
.ma__steps ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3cqw; margin: 0; padding: 0; list-style: none; counter-reset: k; }
.ma__steps li { display: grid; gap: 1cqw; padding-top: 1.4cqw; border-top: .22cqw solid var(--acc); counter-increment: k; }
.ma__steps li b::before { content: "0" counter(k) "  "; font-weight: 400; color: var(--acc); white-space: pre; }
.ma__steps li b { font-size: 1.4cqw; font-weight: 600; }
.ma__steps li span { width: 80%; background: #CFE0D8; }
.ma__foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3cqw; padding: 4cqw 5cqw; background: var(--ink); color: #fff; }
.ma__foot b { font: 400 1.9cqw/1.2 var(--fh); }
.ma__foot div { display: grid; gap: 1cqw; align-content: start; }
.ma__foot span { background: #2A4066; }
.ma__foot span:last-child { width: 60%; }
.ta .pp__nav { border-bottom: 1px solid var(--line); }
.ta__logo { font-size: 5.4cqw; }
.ta__logo i { width: 6cqw; height: 6cqw; box-shadow: inset 0 0 0 .8cqw var(--acc); }
.ta .pp__kicker { font-weight: 600; color: var(--acc); }
.ta__card { display: grid; gap: 2cqw; padding: 5cqw; border: 1px solid var(--line); border-radius: 3cqw; background: #fff; }
.ta__card b { font: 400 5.6cqw/1.1 var(--fh); }
.ta__card ul { display: grid; list-style: none; margin: 0; padding: 0; }
.ta__card li { display: flex; justify-content: space-between; align-items: center; padding-block: 2.2cqw; border-top: 1px solid #EEF1F3; font-size: 4cqw; }
.ta__card em { font-size: 3.4cqw; padding: .8cqw 2.4cqw; border-radius: 4cqw; }

/* ================= 2. gabinet fizjoterapii: morski, koral, zaokrąglenia ================= */
.mb, .tb {
  --bg: #EEF6F6; --ink: #12343B; --acc: #FF7F5C; --on-acc: #fff; --teal: #0B7F84; --muted: #5E7A80; --line: #D5E4E5;
  --fh: "pk-b", "Nunito", system-ui, sans-serif; --fb: "pk-b", "Nunito", system-ui, sans-serif; --fhw: 800; --fhl: -.03em; --r: 8cqw;
}
.mb { --page-h: 92cqw; background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 1.35cqw; line-height: 1.45; }
.mb__nav { display: flex; align-items: center; gap: 2.4cqw; height: 7.6cqw; padding-inline: 5cqw; color: var(--muted); font-weight: 600; }
.mb__logo, .tb__logo { display: flex; align-items: center; gap: 1cqw; margin-inline-end: auto; font-size: 1.7cqw; font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.mb__logo i, .tb__logo i { position: relative; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: var(--teal); }
.mb__logo i::before, .mb__logo i::after, .tb__logo i::before, .tb__logo i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 46%; height: 11%; border-radius: 1cqw; background: #fff; translate: -50% -50%; }
.mb__logo i::after, .tb__logo i::after { rotate: 90deg; }
.mb__cta { padding: .9cqw 1.9cqw; border-radius: 3cqw; background: var(--acc); color: #fff; font-weight: 700; }
.mb__hero { display: grid; grid-template-columns: 1fr 1fr; gap: 4cqw; align-items: center; padding: 3.5cqw 5cqw 4.5cqw; }
.mb__pill, .tb__pill { display: inline-flex; align-items: center; gap: .8cqw; padding: .6cqw 1.4cqw; border-radius: 3cqw; background: #fff; font-size: 1.15cqw; font-weight: 700; color: var(--teal); }
.mb__pill::before, .tb__pill::before { content: ""; width: .8cqw; height: .8cqw; border-radius: 50%; background: var(--acc); box-shadow: 0 0 0 .4cqw rgba(255, 127, 92, .25); }
.mb__h { margin-block: 1.8cqw 1.4cqw; font-size: 4.8cqw; font-weight: 800; line-height: 1; letter-spacing: -.035em; }
.mb__p { max-width: 32ch; font-size: 1.5cqw; line-height: 1.5; color: var(--muted); }
.mb__btns { display: flex; gap: 1cqw; margin-top: 2.4cqw; font-weight: 700; }
.mb__btns span { padding: 1.1cqw 2cqw; border-radius: 3cqw; background: #fff; color: var(--teal); }
.mb__btns span:first-child { background: var(--acc); color: #fff; }
.mb__book { display: grid; gap: 1.6cqw; padding: 2.4cqw; border-radius: 2cqw; background: #fff; box-shadow: 0 2cqw 5cqw rgba(11, 127, 132, .14); }
.mb__book-h b { display: block; font-size: 1.7cqw; font-weight: 800; }
.mb__book-h span { font-size: 1.15cqw; color: var(--muted); }
.mb__days, .tb__days { display: grid; grid-template-columns: repeat(5, 1fr); gap: .8cqw; }
.mb__days span, .tb__days span { display: grid; justify-items: center; gap: .2cqw; padding-block: 1cqw; border-radius: 1.2cqw; background: var(--bg); font-size: 1.05cqw; color: var(--muted); }
.mb__days b, .tb__days b { font-size: 1.7cqw; font-weight: 800; color: var(--ink); }
.mb__days .is-on, .tb__days .is-on { background: var(--teal); color: #CDECEC; }
.mb__days .is-on b, .tb__days .is-on b { color: #fff; }
.mb__slots, .tb__slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8cqw; }
.mb__slots span, .tb__slots span { padding-block: .9cqw; border: 1px solid var(--line); border-radius: 3cqw; font-size: 1.15cqw; font-weight: 700; text-align: center; color: var(--teal); }
.mb__slots .is-taken, .tb__slots .is-taken { border-style: dashed; color: #A9BDBF; text-decoration: line-through; }
.mb__slots .is-on, .tb__slots .is-on { border-color: var(--teal); background: var(--teal); color: #fff; }
.mb__confirm { padding: 1.2cqw; border-radius: 3cqw; background: var(--acc); color: #fff; font-weight: 800; text-align: center; }
.mb__list { display: grid; gap: 2cqw; padding: 3cqw 5cqw 5cqw; }
.mb__list-h { font-size: 2.6cqw; font-weight: 800; letter-spacing: -.03em; }
.mb__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.mb__cards div { display: grid; gap: .9cqw; padding: 2.2cqw; border-radius: 1.8cqw; background: #fff; }
.mb__cards i { width: 3.6cqw; height: 3.6cqw; margin-bottom: .6cqw; border-radius: 50%; background: radial-gradient(circle, var(--teal) 30%, #D8EEEE 32%); }
.mb__cards b { font-size: 1.6cqw; font-weight: 800; }
.mb__cards em { font-style: normal; font-size: 1.1cqw; font-weight: 700; color: var(--acc); }
.mb__cards span, .mb__foot div span { display: block; height: .8cqw; border-radius: .4cqw; background: #E3EEEF; }
.mb__cards span:last-child { width: 65%; }
.mb__foot { display: flex; align-items: center; gap: 5cqw; padding: 4cqw 5cqw; background: var(--teal); }
.mb__foot .mb__logo { margin: 0; color: #fff; }
.mb__foot .mb__logo i { background: #fff; }
.mb__foot .mb__logo i::before, .mb__foot .mb__logo i::after { background: var(--teal); }
.mb__foot div { display: grid; flex: 1; gap: 1cqw; }
.mb__foot div span { background: rgba(255, 255, 255, .22); }
.mb__foot div span:last-child { width: 55%; }
.tb__logo { font-size: 5cqw; }
.tb__logo i { width: 7cqw; height: 7cqw; }
.tb__pill { justify-self: start; padding: 1.6cqw 3.6cqw; border-radius: 6cqw; font-size: 3.6cqw; gap: 2cqw; }
.tb__pill::before { width: 2.2cqw; height: 2.2cqw; }
.tb__book { display: grid; gap: 3cqw; padding: 5cqw; border-radius: 5cqw; background: #fff; box-shadow: 0 4cqw 10cqw rgba(11, 127, 132, .14); }
.tb__book > b { font-size: 5cqw; font-weight: 800; }
.tb__days { grid-template-columns: repeat(3, 1fr); gap: 2cqw; }
.tb__days span { gap: .5cqw; padding-block: 2.4cqw; border-radius: 3cqw; font-size: 3.2cqw; }
.tb__days b { font-size: 5cqw; }
.tb__slots { grid-template-columns: repeat(2, 1fr); gap: 2cqw; }
.tb__slots span { padding-block: 2.4cqw; border-radius: 6cqw; font-size: 3.8cqw; }

/* ================= 3. pracownia stolarska: orzech, dąb, Cormorant ================= */
.mc, .tc {
  --bg: #17110C; --ink: #F3EADF; --acc: #C69C6D; --on-acc: #17110C; --muted: #A89684; --line: rgba(243, 234, 223, .14);
  --fh: "pk-c", "Cormorant Garamond", Georgia, serif; --fhw: 600; --fhl: -.01em;
  --fb: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --r: .6cqw;
  --wood: repeating-linear-gradient(94deg, rgba(255, 226, 190, .05) 0 .35cqw, rgba(0, 0, 0, .08) .35cqw .9cqw, rgba(255, 226, 190, .03) .9cqw 2.1cqw), linear-gradient(115deg, #8B6240, #5C3F28 55%, #3A2819);
}
.mc { background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 1.3cqw; line-height: 1.45; }
.mc__hero {
  position: relative; display: grid; align-content: space-between; height: 44cqw; padding: 0 5cqw 5cqw; overflow: hidden;
  background: linear-gradient(90deg, rgba(23, 17, 12, .95) 0%, rgba(23, 17, 12, .6) 42%, rgba(23, 17, 12, 0) 72%), linear-gradient(0deg, rgba(23, 17, 12, .75), rgba(23, 17, 12, 0) 45%), var(--wood);
}
.mc__nav { position: relative; z-index: 1; display: flex; align-items: center; gap: 2.4cqw; height: 7.6cqw; color: var(--muted); }
.mc__logo, .tc__logo { display: flex; align-items: center; gap: 1cqw; margin-inline-end: auto; font-size: 1.1cqw; font-weight: 600; letter-spacing: .24em; color: var(--ink); }
.mc__logo i, .tc__logo i { width: 2.2cqw; height: 2.2cqw; border: .25cqw solid var(--acc); background: linear-gradient(135deg, transparent 46%, var(--acc) 46% 54%, transparent 54%); }
.mc__cta { padding: .9cqw 1.6cqw; border: 1px solid var(--acc); color: var(--acc); }
.mc__text { position: relative; z-index: 1; max-width: 48%; }
.mc__kicker { font-size: 1cqw; letter-spacing: .22em; color: var(--acc); }
.mc__h { margin-block: 1.2cqw 2.2cqw; font: 600 5.2cqw/.98 var(--fh); letter-spacing: -.01em; }
.mc__btns { display: flex; gap: 1cqw; }
.mc__btns span { padding: 1.1cqw 1.8cqw; border: 1px solid rgba(243, 234, 223, .5); }
.mc__btns span:first-child { border-color: var(--acc); background: var(--acc); color: var(--on-acc); }
.mc__table { position: absolute; right: 7cqw; bottom: 7cqw; width: 34cqw; height: 15cqw; }
.mc__table::before { content: ""; position: absolute; inset: 0 0 auto; height: 2cqw; border-radius: .3cqw; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .1) 0 1.4cqw, rgba(255, 226, 190, .08) 1.4cqw 3.1cqw), linear-gradient(#E1BE93, #A87C52); box-shadow: 0 2.2cqw 3cqw rgba(0, 0, 0, .55); }
.mc__table::after { content: ""; position: absolute; left: -3cqw; right: -3cqw; bottom: -1.2cqw; height: 2.4cqw; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.mc__table i { position: absolute; top: 2cqw; bottom: 0; width: 1.4cqw; background: linear-gradient(90deg, #B98D62, #7E5A3A); }
.mc__table i:first-child { left: 3cqw; }
.mc__table i:last-child { right: 3cqw; }
.mc__cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; padding: 4cqw 5cqw 3cqw; }
.mc__cat {
  position: relative; display: flex; justify-content: space-between; align-items: end; aspect-ratio: 3 / 3.4; padding: 1.4cqw; border-radius: .3cqw;
  background: linear-gradient(0deg, rgba(23, 17, 12, .88), rgba(23, 17, 12, 0) 55%), repeating-linear-gradient(var(--a), rgba(255, 226, 190, .06) 0 .3cqw, rgba(0, 0, 0, .09) .3cqw .8cqw, rgba(255, 226, 190, .03) .8cqw 1.9cqw), linear-gradient(160deg, var(--t), #241910);
}
.mc__ico { position: absolute; left: 50%; top: 18%; width: 52%; translate: -50% 0; fill: none; stroke: rgba(243, 234, 223, .75); stroke-width: 1.3; stroke-linejoin: round; }
.mc__cat b { font: 600 2cqw/1 var(--fh); }
.mc__cat span { color: var(--acc); }
.mc__form { display: grid; gap: 2cqw; margin: 0 5cqw; padding: 3cqw; border: 1px solid var(--line); background: #1E1711; }
.mc__form-h b { display: block; font: 600 2.6cqw/1.05 var(--fh); }
.mc__form-h span { color: var(--muted); }
.mc__fields { display: grid; grid-template-columns: 1fr 1fr 1.2fr auto; gap: 1.2cqw; align-items: end; }
.mc__fields div { display: grid; gap: .6cqw; }
.mc__fields em { font-style: normal; font-size: .95cqw; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mc__fields div > span { padding: 1cqw 1.2cqw; border: 1px solid var(--line); }
.mc__fields .mc__chips { display: flex; gap: .6cqw; padding: 0; border: 0; }
.mc__chips i { padding: 1cqw 1.2cqw; border: 1px solid var(--line); font-style: normal; }
.mc__chips .is-on { border-color: var(--acc); background: var(--acc); color: var(--on-acc); }
.mc__send { padding: 1.05cqw 1.6cqw; background: var(--acc); color: var(--on-acc); font-weight: 600; }
.mc__foot { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 3cqw; align-items: start; margin-top: 4cqw; padding: 4cqw 5cqw; border-top: 1px solid var(--line); }
.mc__foot div { display: grid; gap: 1cqw; }
.mc__foot span { display: block; height: .8cqw; border-radius: .4cqw; background: #2E231A; }
.mc__foot span:last-child { width: 60%; }
.tc__hero { display: grid; align-content: space-between; min-height: 52%; padding-bottom: 6cqw; background: linear-gradient(0deg, rgba(23, 17, 12, .95), rgba(23, 17, 12, .2) 60%), var(--wood); }
.tc__hero > div:last-child { display: grid; gap: 3cqw; padding-inline: 7cqw; }
.tc__logo { font-size: 3.4cqw; }
.tc__logo i { width: 5cqw; height: 5cqw; border-width: .6cqw; }
.tc .pp__kicker { color: var(--acc); }
.tc .pp__h { font-size: 11.5cqw; line-height: .95; }
.tc .pp__body { padding-top: 5cqw; }
.tc__cats { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw; }
.tc__cats span { display: flex; align-items: end; aspect-ratio: 1.2; padding: 3cqw; background: linear-gradient(0deg, rgba(23, 17, 12, .85), rgba(23, 17, 12, 0) 60%), linear-gradient(160deg, var(--t), #241910); font: 600 5cqw/1 var(--fh); }
.tc .pp__btn { font-weight: 600; letter-spacing: .02em; }

/* ================= 4. firma instalacyjna: grafit granatowy, pomarańcz, Plex ================= */
.md, .td {
  --bg: #F4F6F9; --ink: #0F172A; --acc: #F2711C; --on-acc: #fff; --muted: #64748B; --line: #E2E8F0; --side: #0F172A;
  --fh: "pk-d", "IBM Plex Sans", system-ui, sans-serif; --fb: "pk-d", "IBM Plex Sans", system-ui, sans-serif; --fhw: 600; --r: 2cqw;
}
.md { --page-h: 84cqw; display: grid; grid-template-columns: 17cqw minmax(0, 1fr); background: var(--bg); color: var(--ink); font-family: var(--fb); font-size: 1.15cqw; line-height: 1.4; }
.md__side { display: flex; flex-direction: column; gap: .4cqw; padding: 2.6cqw 1.6cqw; background: var(--side); color: #94A3B8; }
.md__brand { display: flex; align-items: center; gap: .9cqw; margin-bottom: 2.4cqw; padding-inline: 1cqw; font-size: 1.4cqw; font-weight: 600; color: #fff; }
.md__brand i { width: 2.2cqw; height: 2.2cqw; border-radius: .5cqw; background: linear-gradient(135deg, var(--acc) 50%, #FDBA74 50%); }
.md__side > span { position: relative; display: flex; align-items: center; gap: 1cqw; padding: 1cqw; border-radius: .5cqw; }
.md__side > span::before { content: ""; width: 1.2cqw; height: 1.2cqw; border: .18cqw solid currentColor; border-radius: .25cqw; }
.md__side > .is-on { background: #1E293B; color: #fff; }
.md__side > .is-on::after { content: ""; position: absolute; left: -1.6cqw; top: 20%; bottom: 20%; width: .35cqw; border-radius: 0 .3cqw .3cqw 0; background: var(--acc); }
.md__side > .md__user { margin-top: auto; }
.md__side > .md__user::before { display: none; }
.md__user i { display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #334155; font-style: normal; font-size: .9cqw; font-weight: 600; color: #fff; }
.md__main { display: grid; gap: 2cqw; align-content: start; padding: 2.6cqw 3cqw; }
.md__top { display: flex; align-items: center; gap: 1.2cqw; }
.md__top b { font-size: 2.2cqw; font-weight: 600; letter-spacing: -.02em; }
.md__sub { margin-inline-end: auto; color: var(--muted); }
.md__search { width: 16cqw; height: 2.8cqw; border: 1px solid var(--line); border-radius: .5cqw; background: #fff; }
.md__new { padding: .8cqw 1.4cqw; border-radius: .5cqw; background: var(--acc); color: #fff; font-weight: 600; }
.md__kpi { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2cqw; }
.md__kpi div { display: grid; gap: .3cqw; padding: 1.4cqw 1.6cqw; border: 1px solid var(--line); border-radius: .7cqw; background: #fff; }
.md__kpi div:nth-child(2) { box-shadow: inset 0 .3cqw 0 var(--acc); }
.md__kpi span { color: var(--muted); }
.md__kpi b { font-size: 2.6cqw; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.md__table { overflow: hidden; border: 1px solid var(--line); border-radius: .7cqw; background: #fff; }
.md__row { display: grid; grid-template-columns: 6cqw minmax(0, 1.7fr) minmax(0, 1fr) 5cqw 3.6cqw 10cqw; align-items: center; gap: 1cqw; padding: 1.05cqw 1.6cqw; border-top: 1px solid #F1F5F9; white-space: nowrap; }
.md__row > span { overflow: hidden; text-overflow: ellipsis; }
.md__row--head { border-top: 0; background: #F8FAFC; font-size: .95cqw; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.md__nr { color: var(--muted); font-variant-numeric: tabular-nums; }
.md__row i { display: grid; place-items: center; width: 2.4cqw; height: 2.4cqw; border-radius: 50%; background: #E2E8F0; font-style: normal; font-size: .9cqw; font-weight: 600; }
.st { justify-self: start; padding: .4cqw 1cqw; border-radius: 3cqw; font-size: 1cqw; font-style: normal; font-weight: 600; }
.st--run { background: #FFEDD5; color: #C2410C; }
.st--new { background: #DBEAFE; color: #1D4ED8; }
.st--inv { background: #FEF3C7; color: #92400E; }
.st--done { background: #DCFCE7; color: #15803D; }
.md__low { display: grid; grid-template-columns: 1.25fr 1fr; gap: 1.2cqw; align-items: start; }
.md__chart, .md__team { display: grid; gap: 1.4cqw; padding: 2cqw; border: 1px solid var(--line); border-radius: .7cqw; background: #fff; }
.md__chart-h { display: flex; justify-content: space-between; align-items: baseline; }
.md__chart-h b { font-weight: 600; }
.md__chart-h span { color: var(--muted); }
.md__bars { display: flex; align-items: flex-end; gap: .8cqw; height: 13cqw; border-bottom: 1px solid var(--line); }
.md__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: .3cqw .3cqw 0 0; background: #CBD5E1; }
.md__bars i:last-child { background: var(--acc); }
.md__tech { display: grid; grid-template-columns: 2.6cqw minmax(0, 1fr) 7cqw; align-items: center; gap: 1.1cqw; padding-top: 1.1cqw; border-top: 1px solid #F1F5F9; color: var(--muted); }
.md__tech i { display: grid; place-items: center; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #E2E8F0; font-style: normal; font-size: .9cqw; font-weight: 600; color: var(--ink); }
.md__tech span { display: grid; gap: .2cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.md__tech b { font-weight: 500; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
.md__tech em { height: .6cqw; border-radius: .3cqw; background: linear-gradient(var(--acc), var(--acc)) 0 0 / calc(var(--p) * 100%) 100% no-repeat, #E2E8F0; }
.td__head { display: grid; gap: 1cqw; padding: 4cqw 7cqw 3cqw; }
.td__head b { font-size: 9cqw; font-weight: 600; letter-spacing: -.03em; }
.td__head span { color: var(--muted); }
.td__job { display: flex; justify-content: space-between; align-items: center; gap: 3cqw; padding: 4cqw; border: 1px solid var(--line); border-radius: 3cqw; background: #fff; }
.td__job div { display: grid; gap: .6cqw; min-width: 0; }
.td__job b { font-size: 4.2cqw; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.td__job div span { font-size: 3.6cqw; color: var(--muted); }
.td__job .st { flex: none; padding: 1cqw 2.4cqw; border-radius: 4cqw; font-size: 3.2cqw; }
.td .pp__btn { margin-top: 1cqw; }
.td__tabs { display: flex; justify-content: space-around; margin-top: auto; padding: 4cqw 7cqw 6cqw; border-top: 1px solid var(--line); background: #fff; }
.td__tabs i { width: 6cqw; height: 6cqw; border: .6cqw solid #CBD5E1; border-radius: 1.6cqw; }
.td__tabs .is-on { border-color: var(--acc); }