/* Podstrony /realizacje i /produkty + efekty Motion na stronie głównej.
   Kolory i szkło z motywu strony (zmienne z index-*.css). */

.psx-container { position: relative; z-index: 1; max-width: 48rem; margin: 0 auto; }
.psx-container-wide { max-width: 72rem; margin: 0 auto; }

/* Nagłówek */
.psx-header { position: relative; overflow: hidden; padding-top: 9rem; padding-bottom: 4rem; }
@media (min-width: 768px) { .psx-header { padding-top: 11rem; padding-bottom: 5rem; } }
.psx-crumbs { font-size: .75rem; letter-spacing: .025em; color: hsl(var(--muted-foreground)); margin-bottom: 2.5rem; }
.psx-crumb-link { transition: color .2s; }
.psx-crumb-link:hover { color: hsl(var(--primary)); }
.psx-crumb-sep { margin: 0 .5rem; color: hsl(var(--border)); }
.psx-title { margin-bottom: 1.5rem; }
@media (min-width: 768px) { .psx-title { font-size: 3.75rem; line-height: 1; } }
.psx-lead { max-width: 38rem; font-size: 1rem; }
@media (min-width: 768px) { .psx-lead { font-size: 1.125rem; line-height: 1.7; } }
.psx-meta { margin-top: 1.5rem; font-size: .75rem; letter-spacing: .25em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }

/* „Obrotomierz” pod nagłówkiem */
.psx-rev { position: relative; margin-top: 2.5rem; height: 3px; width: min(100%, 22rem); border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(90deg, hsl(var(--border)) 0 10px, transparent 10px 14px); }
.psx-rev-fill { position: absolute; inset: 0; transform-origin: left; border-radius: inherit;
  background: linear-gradient(90deg, hsl(var(--primary) / .35), hsl(var(--primary)) 70%, hsl(0 84% 60%)); }

/* Sylwetka auta przejeżdżająca przy przewijaniu */
.psx-car-wrap { position: absolute; inset: auto 0 -1rem 0; height: 100%; pointer-events: none; z-index: 0; }
.psx-car { position: absolute; right: 0; bottom: 0; width: min(92vw, 720px); max-width: none; opacity: .13; mix-blend-mode: multiply; user-select: none; }

.psx-section { padding-top: 4rem; }
@media (min-width: 768px) { .psx-section { padding-top: 5rem; } }

/* Filtry z przesuwaną pigułką (layoutId) */
.psx-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.5rem; }
.psx-tab { position: relative; display: inline-flex; align-items: center; gap: .6rem; min-height: 2.75rem; padding: 0 1.1rem;
  border-radius: 999px; border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .6);
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--muted-foreground));
  cursor: pointer; transition: color .25s, border-color .25s; }
.psx-tab:hover { color: hsl(var(--foreground)); border-color: hsl(var(--primary) / .4); }
.psx-tab-on { color: hsl(var(--primary-foreground)); border-color: transparent; }
.psx-tab-on:hover { color: hsl(var(--primary-foreground)); }
.psx-tab-pill { position: absolute; inset: -1px; border-radius: 999px; background: hsl(var(--primary));
  box-shadow: 0 4px 14px hsl(var(--glow-strong)); }
.psx-tab-label, .psx-tab-count { position: relative; }
.psx-tab-count { font-size: .75rem; letter-spacing: 0; opacity: .7; }

/* Siatka kart */
.psx-grid { position: relative; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .psx-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }
@media (min-width: 1200px) { .psx-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.psx-card-li { list-style: none; }
.psx-card { display: flex; flex-direction: column; height: 100%; border-radius: 1rem; overflow: hidden;
  transition: box-shadow .35s ease, border-color .35s ease; }
.psx-card:hover, .psx-card:focus-visible { border-color: hsl(var(--primary) / .35);
  box-shadow: 0 18px 40px -18px hsl(var(--primary) / .35), 0 2px 6px #0000000f; }
.psx-card:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 3px; }

.psx-shot { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: hsl(var(--muted)); }
.psx-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.psx-shot-empty { display: flex; height: 100%; align-items: center; justify-content: center; font-weight: 700;
  font-size: 1.5rem; letter-spacing: -.02em; color: hsl(var(--muted-foreground)); }
.psx-shot-shade { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, hsl(222 47% 11% / .45), transparent 45%); }
.psx-chip { position: absolute; left: 1rem; top: 1rem; padding: .35rem .7rem; border-radius: 999px;
  background: hsl(0 0% 100% / .9); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: hsl(var(--primary)); }
.psx-chip-ok { color: hsl(142 70% 30%); }
.psx-year { position: absolute; right: 1rem; bottom: .85rem; font-size: .75rem; font-weight: 600;
  letter-spacing: .2em; color: #fff; }

.psx-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
@media (min-width: 768px) { .psx-card-body { padding: 1.75rem; } }
.psx-card-kicker { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .5rem; }
.psx-card-title { margin-bottom: .75rem; }
.psx-card-text { font-size: .9rem; margin-bottom: 1.25rem; }
.psx-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.psx-tags li { list-style: none; padding: .25rem .6rem; border-radius: 999px; border: 1px solid hsl(var(--border));
  font-size: .75rem; color: hsl(var(--muted-foreground)); }
/* Podstrona produktu */
.psp-first-sec.section-padding { padding-top: 8rem; }
@media (min-width: 768px) { .psp-first-sec.section-padding { padding-top: 9.5rem; } }
.psp-intro { display: grid; gap: 1.5rem 4rem; align-items: end; }
@media (min-width: 1024px) { .psp-intro { grid-template-columns: 1fr 1fr; } }
.psp-intro .psp-p:last-child { margin-bottom: 0; }
.psp-mock { position: relative; margin-top: 3.5rem; }
.psp-mock img { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.psp-mock::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: -4%; height: 40%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, hsl(221 83% 53% / .16), transparent); filter: blur(10px); }
/* Sekcje z urządzeniem obok tekstu */
.psp-show { display: grid; gap: 3rem; align-items: center; perspective: 1600px; }
@media (min-width: 1024px) {
  .psp-show { grid-template-columns: 1fr 1fr; gap: 5rem; }
  .psp-intro2 { grid-template-columns: .9fr 1.1fr; }
  .psp-show.is-flip .psp-show-dev { order: 2; }
}
@media (max-width: 1023px) { .psp-show-text { order: -1; } }
.psp-show-dev { display: flex; justify-content: center; }
.psp-show-text .psp-for-list { margin-top: 1.5rem; }

/* Ramki urządzeń */
.dev { width: 100%; transform-style: preserve-3d; }
.dev-tablet { max-width: 22rem; }
.dev-phone { max-width: 15.5rem; }
.dev-body { position: relative; background: #0b0d12; }
.dev-screen { position: relative; overflow: hidden; background: #f6f8fc; }
.dev-screen img { display: block; width: 100%; height: auto; }
.dev-laptop .dev-body { padding: 1.7% 1.7% 2.4%; border-radius: 1.1rem 1.1rem .45rem .45rem;
  box-shadow: 0 0 0 2px #c6cbd3, 0 40px 70px -40px hsl(222 47% 11% / .45); }
.dev-laptop .dev-screen { border-radius: .35rem; }
.dev-laptop .dev-screen::before { content: ""; position: absolute; z-index: 1; top: 0; left: 50%; translate: -50% 0; width: 11%; height: 3.4%;
  background: #0b0d12; border-radius: 0 0 .5rem .5rem; }
.dev-base { position: relative; width: 114%; margin-left: -7%; height: clamp(.7rem, 1.4vw, 1.15rem);
  background: linear-gradient(#eef0f3, #c3c8cf 55%, #9aa0a8); border-radius: .15rem .15rem 1.1rem 1.1rem / .15rem .15rem 100% 100%;
  box-shadow: 0 22px 30px -18px hsl(222 47% 11% / .5); }
.dev-base::before { content: ""; position: absolute; top: 0; left: 50%; translate: -50% 0; width: 15%; height: 42%;
  background: linear-gradient(#b5bac2, #d5d9de); border-radius: 0 0 .6rem .6rem; }
.dev-tablet .dev-body { padding: 4.4%; border-radius: 1.9rem; box-shadow: 0 0 0 3px #d3d7dd, 0 0 0 4px #aeb4bc, 0 40px 70px -35px hsl(222 47% 11% / .45); }
.dev-tablet .dev-screen { border-radius: .9rem; }
.dev-phone .dev-body { padding: 3.6%; border-radius: 2.6rem; box-shadow: 0 0 0 3px #cfd3da, 0 0 0 4px #a9afb8, 0 45px 70px -30px hsl(222 47% 11% / .5); }
.dev-phone .dev-screen { border-radius: 2.15rem; }
.dev-phone .dev-screen::before { content: ""; position: absolute; z-index: 1; top: 2.2%; left: 50%; translate: -50% 0; width: 31%; height: 3.6%;
  background: #0b0d12; border-radius: 99px; }
/* refleks szkła */
.dev-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, hsl(0 0% 100% / .18), transparent 38%); }

.psp-split { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 1024px) { .psp-split { grid-template-columns: 1.1fr 1fr; gap: 4rem; } }
.psp-shot { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 0; }
.psp-shot img { display: block; width: 100%; height: auto; }
.psp-p { margin-bottom: 1rem; max-width: 38rem; }
.psp-meta { margin-top: 1.5rem; font-size: .85rem; color: hsl(var(--foreground)); font-weight: 600; }
.psp-meta span { display: inline-block; margin-right: .6rem; font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: hsl(var(--muted-foreground)); font-weight: 500; }
.psp-features { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin-top: 2rem; }
.psp-feature { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; border-radius: 1rem; font-weight: 600; color: hsl(var(--foreground)); }
.psp-feature-num { font-size: .75rem; letter-spacing: .15em; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; }
/* Ilustracja panelu produktu (DashboardVisual) */
.ppv { position: relative; padding: 0 2.5rem 2.5rem 0; }
.ppv-win { border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid hsl(var(--border));
  box-shadow: 0 30px 60px -30px hsl(222 47% 11% / .35), 0 10px 24px -12px hsl(221 83% 53% / .18); }
.ppv-bar { display: flex; align-items: center; gap: .35rem; padding: .6rem .85rem; background: hsl(var(--secondary)); border-bottom: 1px solid hsl(var(--border)); }
.ppv-bar i { width: .55rem; height: .55rem; border-radius: 50%; background: hsl(var(--border)); }
.ppv-bar i:nth-child(1) { background: #ff6159; } .ppv-bar i:nth-child(2) { background: #ffbd2e; } .ppv-bar i:nth-child(3) { background: #28c941; }
.ppv-url { margin-left: .75rem; flex: 1; max-width: 14rem; padding: .2rem .7rem; border-radius: 999px; background: #fff; font-size: .75rem; color: hsl(var(--muted-foreground)); letter-spacing: .02em; }
.ppv-body { display: grid; grid-template-columns: 3.2rem 1fr; min-height: 19rem; }
@media (min-width: 640px) { .ppv-body { grid-template-columns: 8.5rem 1fr; } }
.ppv-side { display: flex; flex-direction: column; gap: .35rem; padding: .9rem .55rem; border-right: 1px solid hsl(var(--border)); background: hsl(210 40% 98.5%); }
.ppv-logo { width: 100%; height: auto; margin: 0 0 .8rem; display: none; }
@media (min-width: 640px) { .ppv-logo { display: block; } }
.ppv-nav { display: flex; align-items: center; gap: .5rem; padding: .4rem .45rem; border-radius: .5rem; color: hsl(var(--muted-foreground)); }
.ppv-nav svg { width: .95rem; height: .95rem; flex: none; }
.ppv-nav b { display: none; height: .4rem; flex: 1; border-radius: 99px; background: hsl(var(--muted)); }
@media (min-width: 640px) { .ppv-nav b { display: block; } }
.ppv-nav.is-on { background: hsl(221 83% 53% / .1); color: hsl(var(--primary)); }
.ppv-nav.is-on b { background: hsl(221 83% 53% / .35); }
.ppv-main { display: grid; gap: .7rem; padding: .9rem; align-content: start; }
.ppv-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.ppv-kpi, .ppv-card { border: 1px solid hsl(var(--border)); border-radius: .7rem; padding: .6rem .7rem; background: #fff; }
.ppv-kpi-l, .ppv-card-l, .ppv-ph-l { display: block; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .4rem; }
.ppv-kpi-v { display: flex; align-items: center; gap: .4rem; }
.ppv-kpi-v b { height: .7rem; width: 60%; border-radius: 99px; background: hsl(var(--foreground) / .8); }
.ppv-kpi-v em, .ppv-row em { font-style: normal; font-size: .75rem; font-weight: 700; color: hsl(158 64% 38%); background: hsl(158 64% 45% / .14); border-radius: 99px; padding: .05rem .35rem; }
.ppv-panels { display: grid; grid-template-columns: 1.7fr 1fr; gap: .6rem; }
.ppv-chart svg { width: 100%; height: 4.6rem; display: block; }
.ppv-audit svg { width: 4.6rem; height: 4.6rem; display: block; margin: 0 auto; }
.ppv-row { display: flex; align-items: center; gap: .4rem; margin-top: .4rem; }
.ppv-row b { display: block; height: .45rem; border-radius: 99px; background: hsl(var(--muted)); transform-origin: left; }
.ppv-row:nth-of-type(odd) b { background: hsl(221 83% 53% / .3); }
.ppv-bars-in { display: flex; align-items: flex-end; gap: .25rem; height: 4.2rem; }
.ppv-bars-in b { flex: 1; border-radius: .2rem .2rem 0 0; background: linear-gradient(hsl(221 83% 60%), hsl(221 83% 48%)); transform-origin: bottom; }
.ppv-bars-in b:last-child { background: linear-gradient(hsl(45 96% 60%), hsl(40 90% 48%)); }
.ppv-phone { position: absolute; right: 0; bottom: 0; width: 8.6rem; padding: 1.2rem .7rem .8rem; border-radius: 1.4rem; background: #fff;
  border: 5px solid hsl(222 47% 11%); box-shadow: 0 24px 48px -18px hsl(222 47% 11% / .5); }
@media (min-width: 640px) { .ppv-phone { width: 10rem; } }
.ppv-notch { position: absolute; top: .3rem; left: 50%; translate: -50% 0; width: 2.4rem; height: .35rem; border-radius: 99px; background: hsl(222 47% 11%); }
.ppv-ph-ring { width: 4.4rem; height: 4.4rem; display: block; margin: .1rem auto .4rem; }
.ppv-toast { display: block; margin-top: .65rem; padding: .35rem .5rem; border-radius: .55rem; font-size: .75rem; font-weight: 600; text-align: center;
  color: hsl(158 64% 30%); background: hsl(158 64% 45% / .14); }

@media (max-width: 639px) { .ppv-kpi:nth-child(3) { display: none; } .ppv-kpis { grid-template-columns: 1fr 1fr; } .ppv-phone { width: 7.2rem; } }
.ppv-kpi-v b { flex: 1; min-width: 1.5rem; max-width: 5rem; }
/* Podstrona produktu: ciaśniejsze odstępy między sekcjami */
.psp-sec.section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }
@media (min-width: 768px) { .psp-sec.section-padding { padding-top: 4.5rem; padding-bottom: 4.5rem; } }

/* Dla kogo */
.psp-for { display: grid; gap: 1.25rem; margin-top: 2rem; }
@media (min-width: 900px) { .psp-for { grid-template-columns: 1fr 1fr; } }
.psp-for-card { position: relative; padding: 2rem; border-radius: 1.25rem; overflow: hidden; }
.psp-for-card h3 { margin-bottom: .75rem; }
.psp-for-num { position: absolute; top: 1.1rem; right: 1.4rem; font-size: 3.2rem; font-weight: 800; line-height: 1; letter-spacing: -.04em;
  color: hsl(221 83% 53% / .08); }
.psp-for-list { margin-top: 1.25rem; }

/* Moduły */
.psp-modules { display: grid; gap: 1rem; margin-top: 2rem; grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr)); }
.psp-module { list-style: none; padding: 1.5rem; border-radius: 1.1rem; }
.psp-module-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: .8rem;
  color: hsl(var(--primary)); background: hsl(221 83% 53% / .1); transition: background-color .3s, color .3s; }
.psp-module:hover .psp-module-icon { background: hsl(var(--primary)); color: #fff; }
.psp-module-icon svg { width: 1.35rem; height: 1.35rem; }
.psp-module-title { font-size: 1.05rem; font-weight: 700; color: hsl(var(--foreground)); margin-bottom: .45rem; }
.psp-module-text { font-size: .9rem; }
.psp-faq { margin-top: 4.5rem; }

.psp-price { display: grid; gap: 1.75rem; padding: 2.25rem; border-radius: 1.25rem; }
@media (min-width: 768px) { .psp-price { grid-template-columns: 1fr auto; align-items: center; padding: 2.75rem 3rem; } }
.psp-price-label { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .35rem; }
.psp-price-value { font-size: clamp(1.75rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)); margin-bottom: .75rem; }
.psp-price-text { max-width: 34rem; }
.psp-price-actions { display: flex; flex-wrap: wrap; gap: 1rem; }
.psx-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.psx-price { font-weight: 600; color: hsl(var(--foreground)); font-size: .9rem; }
.psx-visit { margin-top: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 600; color: hsl(var(--primary)); }
.psx-card-foot .psx-visit { margin-top: 0; }
.psx-arrow { display: inline-block; }

/* Produkty w przygotowaniu */
.psx-slot { pointer-events: none; }
.psx-slot-shot { background: linear-gradient(135deg, hsl(var(--muted)), hsl(var(--secondary))); }
.psx-slot-scan { position: absolute; top: 0; bottom: 0; width: 40%;
  background: linear-gradient(90deg, transparent, hsl(var(--primary) / .14), transparent); }
.psx-slot-num { position: absolute; right: 1.25rem; bottom: .75rem; font-size: 3.5rem; font-weight: 700;
  letter-spacing: -.04em; color: hsl(var(--foreground) / .07); }
.psx-skel { display: block; height: .6rem; border-radius: 999px; background: hsl(var(--muted)); margin-bottom: .75rem; }
.psx-skel-s { width: 30%; } .psx-skel-l { width: 75%; height: .9rem; } .psx-skel-m { width: 55%; }
.psx-slot-label { margin-top: auto; padding-top: .5rem; font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.psx-garage-note { margin-top: 2rem; padding: 2rem; border-radius: 1rem; display: flex; flex-direction: column; gap: 1.5rem; }
@media (min-width: 768px) { .psx-garage-note { flex-direction: row; align-items: center; justify-content: space-between; padding: 2.5rem; } }
.psx-garage-lead { margin-top: .5rem; max-width: 34rem; }

/* Meta */
.psx-cta { padding-top: 5rem; padding-bottom: 6rem; }
.psx-cta-card { position: relative; overflow: hidden; max-width: 56rem; margin: 0 auto; padding: 3rem 1.75rem; border-radius: 1.25rem; text-align: center; }
@media (min-width: 768px) { .psx-cta-card { padding: 4rem; } }
.psx-flag { position: absolute; left: 0; right: 0; top: 0; height: 10px; opacity: .16;
  background-image: repeating-conic-gradient(hsl(var(--foreground)) 0% 25%, transparent 0% 50%); background-size: 10px 10px; }
.psx-cta-title { margin-bottom: 1rem; }
.psx-cta-lead { max-width: 34rem; margin: 0 auto 2rem; }
.psx-cta-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; }
.psx-btn { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; }
.psx-call { min-height: 2.75rem; display: inline-flex; align-items: center; font-size: .875rem; font-weight: 500;
  color: hsl(var(--muted-foreground)); transition: color .2s; }
.psx-call:hover { color: hsl(var(--primary)); }

/* Strona główna: refleks światła na kartach usług (sterowany przez motion-home.js) */
.psm-spot { position: relative; }
.psm-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(420px circle at var(--psm-x, 50%) var(--psm-y, 50%), hsl(var(--primary) / .10), transparent 60%); }
/* Magnetyczne przyciski CTA */
.psm-spot.psm-on::after { opacity: 1; transition-duration: .35s; }
.psm-mag { translate: var(--psm-tx, 0px) var(--psm-ty, 0px); }

@media (prefers-reduced-motion: reduce) {
  .psm-mag { translate: none; }
  .psm-spot::after { display: none; }
}

/* Przycisk „magnetyczny”: przesunięcie robi sprężyna Motion, więc CSS nie może go dodatkowo wygładzać */
.psm-mag { transition-property: color, background-color, border-color, box-shadow, opacity, transform; }

/* Klasy Tailwinda użyte w menu, których nie było w skompilowanym CSS strony */
.ml-8 { margin-left: 2rem; }
.gap-5 { gap: 1.25rem; }
@media (min-width: 1024px) {
  .lg\:flex { display: flex; }
  .lg\:hidden { display: none; }
}
@media (min-width: 1536px) { .\32xl\:gap-10 { gap: 2.5rem; } }
@media (min-width: 1280px) { .xl\:gap-7 { gap: 1.75rem; } }
.psx-nav-phone { display: none; white-space: nowrap; }
@media (min-width: 1440px) { .psx-nav-phone { display: flex; } }

/* Stopka: odstępy między nazwami miast (klasy nie trafiły do skompilowanego CSS) */
.gap-x-4 { column-gap: 1rem; }
.gap-y-2 { row-gap: .5rem; }

/* ================= Sekcje dodatkowe na stronie głównej (home-extras.js) ================= */
.pse-section { position: relative; overflow: hidden; }
.pse-wrap { position: relative; z-index: 1; max-width: 72rem; margin: 0 auto; }
.pse-center { margin-top: 3rem; display: flex; justify-content: center; }
.pse-title { margin-bottom: 1.5rem; }
.pse-lead { max-width: 36rem; margin-bottom: 2.5rem; }
.pse-kicker { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--muted-foreground)); margin-bottom: .4rem; }
.pse-car { position: absolute; bottom: -1rem; width: min(90vw, 700px); opacity: .12; mix-blend-mode: multiply; pointer-events: none; user-select: none; }
.pse-car-left { left: -4rem; transform: scaleX(-1); }

/* Tekst: słowa wjeżdżające z maski */
.pse-word-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.pse-word { display: inline-block; will-change: transform; }

/* Rotujące branże */
.pse-rot-title { margin-bottom: 1.5rem; }
.pse-rotator { display: inline-grid; vertical-align: bottom; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.pse-rotator-word { grid-area: 1 / 1; color: hsl(var(--primary)); white-space: nowrap; }

/* Przyciski */
/* wygląd .btn-primary: assets/buttons.css */
.pse-btn { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; }
.pse-btn-arrow { display: inline-block; }
.pse-btn-ghost { display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 2rem; border-radius: 999px;
  border: 1px solid hsl(var(--border)); font-size: .875rem; font-weight: 500; color: hsl(var(--foreground));
  background: hsl(var(--card) / .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: border-color .3s, color .3s, box-shadow .3s; }
.pse-btn-ghost:hover { border-color: hsl(var(--primary) / .5); color: hsl(var(--primary)); box-shadow: 0 8px 24px -12px hsl(var(--primary) / .4); }

/* 1. Ticker */
.pse-ticker { position: relative; overflow: hidden; padding: 1.1rem 0; background: #0a1628; color: hsl(0 0% 100% / .75);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.pse-ticker-track { display: flex; width: max-content; gap: 3rem; }
.pse-ticker-track li { list-style: none; display: inline-flex; align-items: center; gap: .9rem; white-space: nowrap;
  font-size: .75rem; letter-spacing: .28em; text-transform: uppercase; }
.pse-ticker-dot { width: 6px; height: 6px; border-radius: 999px; background: #ffd700; box-shadow: 0 0 10px #ffd70099; }

/* 2. Realizacje */
.pse-work-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pse-work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.pse-work-grid li { list-style: none; }
.pse-work-card { display: block; height: 100%; border-radius: 1rem; overflow: hidden; transition: box-shadow .35s, border-color .35s; }
.pse-work-card:hover { border-color: hsl(var(--primary) / .35); box-shadow: 0 18px 40px -18px hsl(var(--primary) / .35); }
.pse-work-shot { aspect-ratio: 16 / 10; overflow: hidden; background: hsl(var(--muted)); }
.pse-work-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
.pse-work-body { padding: 1.4rem 1.5rem 1.6rem; }
.pse-link { margin-top: 1rem; display: inline-flex; gap: .4rem; font-size: .85rem; font-weight: 600; color: hsl(var(--primary)); }

/* 3. Pit Stop */
.pse-split { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 1024px) { .pse-split { grid-template-columns: 1.1fr .9fr; gap: 5rem; } }
.pse-checks { display: grid; gap: .9rem; margin: -1rem 0 2.5rem; }
.pse-checks li { list-style: none; display: flex; align-items: center; gap: .8rem; color: hsl(var(--foreground)); font-size: .95rem; }
.pse-check { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 999px; display: grid; place-items: center;
  background: hsl(var(--primary) / .1); color: hsl(var(--primary)); }
.pse-check svg { width: .95rem; height: .95rem; }
.pse-panel { border-radius: 1.25rem; padding: 1.75rem; }
.pse-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem;
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.pse-live { display: inline-flex; align-items: center; gap: .45rem; color: hsl(142 70% 32%); }
.pse-live i { width: 7px; height: 7px; border-radius: 999px; background: hsl(142 70% 42%); display: inline-block; }
.pse-panel ul { display: grid; gap: .25rem; }
.pse-panel li { list-style: none; display: flex; justify-content: space-between; padding: .9rem 0; border-top: 1px solid hsl(var(--border)); font-size: .9rem; color: hsl(var(--foreground)); }
.pse-ok { display: inline-flex; align-items: center; gap: .45rem; color: hsl(var(--muted-foreground)); font-size: .82rem; }
.pse-ok i { width: 6px; height: 6px; border-radius: 999px; background: hsl(142 70% 42%); display: inline-block; }
.pse-gauge { margin-top: 1.25rem; height: 4px; border-radius: 999px; overflow: hidden;
  background: repeating-linear-gradient(90deg, hsl(var(--border)) 0 10px, transparent 10px 14px); }
.pse-gauge span { display: block; height: 100%; transform-origin: left;
  background: linear-gradient(90deg, hsl(var(--primary) / .4), hsl(var(--primary)) 70%, hsl(142 70% 45%)); }

/* 4. Tor współpracy zdalnej */
.pse-track { position: relative; margin-top: 1rem; }
.pse-track-line { display: none; }
@media (min-width: 900px) {
  .pse-track-line { display: block; position: relative; height: 4px; margin: 3.5rem 2.5rem 2.5rem; border-radius: 999px;
    background: repeating-linear-gradient(90deg, hsl(var(--border)) 0 14px, transparent 14px 22px); }
}
.pse-track-fill { position: absolute; inset: 0; transform-origin: left; border-radius: inherit;
  background: linear-gradient(90deg, hsl(var(--primary) / .35), hsl(var(--primary))); }
.pse-track-car { position: absolute; bottom: 2px; width: 120px; translate: -50% 0; opacity: .55; mix-blend-mode: multiply; pointer-events: none; }
.pse-car-body { position: relative; transform: scaleX(-1); }
.pse-car-img { display: block; width: 100%; height: auto; }
.pse-car-wheel { position: absolute; border-radius: 50%; background-repeat: no-repeat; will-change: transform; }
.pse-flag { position: absolute; right: -10px; top: -10px; width: 24px; height: 24px; border-radius: 4px; opacity: .5;
  background-image: repeating-conic-gradient(hsl(var(--foreground)) 0% 25%, transparent 0% 50%); background-size: 8px 8px; }
.pse-steps { display: grid; gap: 1.5rem; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 640px) { .pse-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .pse-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; } }
.pse-steps li { list-style: none; padding: 1.5rem; border-radius: 1rem; border: 1px solid hsl(var(--border));
  background: hsl(var(--card) / .5); transition: border-color .4s, box-shadow .4s, background .4s; }
.pse-steps li.is-on { border-color: hsl(var(--primary) / .4); background: hsl(var(--card)); box-shadow: 0 14px 30px -18px hsl(var(--primary) / .45); }
.pse-step-dot { display: inline-grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: .75rem; margin-bottom: 1rem;
  font-size: .75rem; font-weight: 700; color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border)); transition: all .4s; }
.pse-steps li.is-on .pse-step-dot { background: hsl(var(--primary)); color: #fff; border-color: transparent; box-shadow: 0 4px 14px hsl(var(--glow-strong)); }
.pse-step-title { font-weight: 600; font-size: 1.05rem; color: hsl(var(--foreground)); margin-bottom: .4rem; }
.pse-step-text { font-size: .875rem; }

/* 5. Audyt */
.pse-audit { position: relative; overflow: hidden; max-width: 72rem; margin: 0 auto; border-radius: 1.5rem;
  background: radial-gradient(120% 140% at 0% 0%, #12264a 0%, #0a1628 60%); color: #fff; padding: 3rem 1.5rem; }
@media (min-width: 768px) { .pse-audit { padding: 4.5rem 4rem; } }
.pse-audit-flag { position: absolute; left: 0; right: 0; top: 0; height: 12px; opacity: .22;
  background-image: repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%); background-size: 12px 12px; }
.pse-audit-car { position: absolute; right: -3rem; bottom: -1.5rem; width: min(70vw, 560px); opacity: .1; filter: invert(1); pointer-events: none; }
.pse-audit-inner { position: relative; max-width: 40rem; }
.pse-audit-eyebrow { font-size: .75rem; letter-spacing: .3em; text-transform: uppercase; color: #ffd700; margin-bottom: 1rem; }
.pse-audit-title { color: #fff; margin-bottom: 1.25rem; }
.pse-audit-text { color: hsl(0 0% 100% / .7); line-height: 1.7; margin-bottom: 2rem; }
.pse-audit-form { display: grid; gap: .75rem; }
@media (min-width: 768px) { .pse-audit-form { grid-template-columns: 1fr 1fr auto; } }
.pse-field input { width: 100%; min-height: 3.25rem; padding: 0 1.1rem; border-radius: 999px; border: 1px solid hsl(0 0% 100% / .18);
  background: hsl(0 0% 100% / .06); color: #fff; font-size: .9rem; outline: none; transition: border-color .25s, background .25s; }
.pse-field input::placeholder { color: hsl(0 0% 100% / .45); }
.pse-field input:focus { border-color: hsl(var(--primary)); background: hsl(0 0% 100% / .1); }
.pse-audit-ok { font-size: 1.05rem; color: #9ef0b4; }
.pse-audit-err { margin-top: .75rem; color: #ffb4b4; font-size: .9rem; }
.pse-audit-note { margin-top: 1rem; font-size: .75rem; color: hsl(0 0% 100% / .45); }
.pse-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::after { display: none; }
}

/* ================= Podstrona /o-nas ================= */
.psa-h2 { margin-bottom: 2.5rem; }
.psa-rules { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .psa-rules { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1200px) { .psa-rules { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.psa-rule { list-style: none; position: relative; border-radius: 1rem; padding: 1.75rem; overflow: hidden; }
.psa-rule h3 { margin: 1.25rem 0 .6rem; }
.psa-rule p { font-size: .9rem; }
.psa-rule-num { font-size: .75rem; font-weight: 700; letter-spacing: .2em; color: hsl(var(--primary)); }
.psa-rule::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(to bottom, hsl(var(--primary) / .5), transparent); }

.psa-me { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 1024px) { .psa-me { grid-template-columns: minmax(0, 420px) 1fr; gap: 5rem; } }
.psa-photo { position: relative; overflow: hidden; border-radius: 1.25rem; aspect-ratio: 3 / 4; max-width: 420px;
  box-shadow: 0 30px 60px -30px hsl(222 47% 11% / .45); background: hsl(var(--muted)); }
.psa-photo-wrap { max-width: 420px; }
@media (min-width: 1024px) { .psa-photo-wrap { position: sticky; top: 7rem; } }
.psa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psa-photo-flag { position: absolute; left: 0; right: 0; bottom: 0; height: 10px; opacity: .35;
  background-image: repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%); background-size: 10px 10px; }
.psa-name { position: relative; display: inline-block; margin-bottom: .75rem; }
.psa-underline { position: absolute; left: 0; right: 0; bottom: -.55rem; width: 100%; height: .8rem; color: hsl(var(--primary)); overflow: visible; }
.psa-role { margin: 1.25rem 0 2rem; font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.psa-bio { margin-bottom: 1rem; max-width: 40rem; }
@media (min-width: 768px) { .psa-bio { font-size: 1.05rem; line-height: 1.75; } }
.psa-sub { margin: 2.5rem 0 1rem; font-size: .75rem; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: hsl(var(--foreground)); }
.psa-awards { display: grid; gap: .75rem; }
.psa-award { list-style: none; display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-radius: 1rem;
  border: 1px solid hsl(var(--border)); background: hsl(var(--card) / .7); }
.psa-award strong { display: block; font-weight: 600; color: hsl(var(--foreground)); font-size: .95rem; }
.psa-award small { display: block; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.psa-award-icon { flex: none; width: 3.5rem; height: 3.5rem; border-radius: .8rem; display: grid; place-items: center;
  color: #b8860b; background: linear-gradient(135deg, #fff7d1, #ffe58a); box-shadow: 0 6px 16px -8px #b8860b; }
.psa-award-icon svg { width: 1.6rem; height: 1.6rem; }
.psa-award-logo { padding: 0; overflow: hidden; background: #1a0306; box-shadow: 0 6px 18px -8px hsl(355 80% 40% / .55); }
.psa-award-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.psa-award-link { display: block; flex: 1; color: inherit; text-decoration: none; }
.psa-award-link small { transition: color .2s; }
.psa-award-link:hover small, .psa-award-link:focus-visible small { color: hsl(var(--primary)); }
.psa-award-link:hover strong { text-decoration: underline; text-decoration-color: hsl(var(--primary) / .5); text-underline-offset: 3px; }
.psa-award:has(.psa-award-link) { cursor: pointer; }
.psa-skills { margin-bottom: 2.5rem; }
.psa-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.psa-company { display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border-radius: 1rem; }
@media (min-width: 768px) { .psa-company { flex-direction: row; align-items: center; justify-content: space-between; padding: 2.5rem; } }
.psa-company-text { margin-top: .5rem; font-size: .9rem; }
.psa-company-link { margin-top: 0; white-space: nowrap; }

/* === Audyt: sylwetki aut nie wchodzą na tekst ===
   Auta zostają przy dolnej krawędzi sekcji, górna część (gdzie bywa tekst) zanika. */
#root img[src*="/cars/"][aria-hidden="true"] {
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 28%, rgba(0,0,0,.35) 58%, transparent 92%);
          mask-image: linear-gradient(to top, #000 0%, #000 28%, rgba(0,0,0,.35) 58%, transparent 92%);
}

/* Karty realizacji: równa wysokość, link zawsze na dole */
.pse-work-grid > li { display: flex; }
.pse-work-card { display: flex; flex-direction: column; width: 100%; }
.pse-work-body { flex: 1; display: flex; flex-direction: column; }
.pse-work-body .pse-link { margin-top: auto; padding-top: .75rem; }
@media (min-width: 768px) { .pse-work-body .pse-kicker { min-height: 2.9em; } }

/* ===== Formularz kontaktowy: przejścia kroków, pasek jak obrotomierz, flaga po wysłaniu ===== */
.ps-step { animation: psStepIn .45s cubic-bezier(.22,1,.36,1) both; }
@keyframes psStepIn { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
.ps-rpm { background: linear-gradient(90deg, hsl(var(--primary)) 0%, hsl(var(--primary)) 55%, #facc15 80%, #ef4444 100%); background-size: 400px 100%; height: 3px !important; top: -1px !important; box-shadow: 0 0 10px hsl(var(--primary) / .5); border-radius: 2px; }
.ps-done { position: relative; animation: psDone .7s cubic-bezier(.34,1.56,.64,1) both; }
.ps-done::after { content: ""; position: absolute; left: 50%; top: -34px; width: 120px; height: 14px; translate: -50% 0; border-radius: 3px;
  background-image: repeating-conic-gradient(hsl(var(--foreground)) 0% 25%, transparent 0% 50%); background-size: 14px 14px; opacity: .8;
  animation: psFlag 1.2s ease-in-out .3s both; transform-origin: left center; }
@keyframes psDone { from { opacity: 0; transform: scale(.4) rotate(-20deg); } to { opacity: 1; transform: none; } }
@keyframes psFlag { 0% { opacity: 0; transform: scaleX(0); } 60% { opacity: .8; transform: scaleX(1) skewY(-4deg); } 100% { opacity: .8; transform: scaleX(1) skewY(0); } }
@media (prefers-reduced-motion: reduce) { .ps-step, .ps-done, .ps-done::after { animation: none; } }

/* ===== Konfigurator wyceny ===== */
.pse-cfg { display: grid; gap: 0; margin-top: 2.5rem; border-radius: 1.25rem; overflow: hidden; }
@media (min-width: 900px) { .pse-cfg { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.pse-cfg-main { padding: 1.5rem; }
@media (min-width: 768px) { .pse-cfg-main { padding: 2.25rem; } }
.pse-cfg-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .3rem; padding: .35rem; border: 1px solid hsl(var(--border)); border-radius: 1.1rem; margin-bottom: 1.75rem; background: hsl(var(--background) / .6); }
.pse-cfg-tab { position: relative; padding: .6rem 1rem; border-radius: 999px; font-size: .85rem; color: hsl(var(--muted-foreground)); transition: color .25s; white-space: nowrap; }
.pse-cfg-tab.is-on { color: #fff; }
.pse-cfg-pill { position: absolute; inset: 0; border-radius: 999px; background: hsl(var(--primary)); box-shadow: 0 8px 20px -10px hsl(var(--primary) / .8); }
.pse-cfg-tab-label { position: relative; }
.pse-cfg-range { display: block; margin-bottom: 1.5rem; }
.pse-cfg-range-head { display: flex; justify-content: space-between; align-items: baseline; font-size: .95rem; color: hsl(var(--foreground)); margin-bottom: .6rem; }
.pse-cfg-range-head strong { font-size: 1.15rem; color: hsl(var(--primary)); font-variant-numeric: tabular-nums; }
.pse-cfg-hint { display: block; font-size: .75rem; color: hsl(var(--muted-foreground)); margin-top: .35rem; }
.pse-cfg-range input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(90deg, hsl(var(--primary)) var(--pse-pct), hsl(var(--border)) var(--pse-pct)); }
.pse-cfg-range input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 3px solid hsl(var(--primary)); box-shadow: 0 4px 12px hsl(var(--primary) / .35); transition: transform .2s; }
.pse-cfg-range input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid hsl(var(--primary)); }
.pse-cfg-range input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.2); }
.pse-cfg-range input[type="range"]:focus-visible { outline: 2px solid hsl(var(--primary)); outline-offset: 4px; }
.pse-cfg-extras { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .5rem; }
.pse-cfg-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .95rem .55rem .55rem; border-radius: 999px; border: 1px solid hsl(var(--border)); font-size: .85rem; color: hsl(var(--foreground)); background: hsl(var(--card)); transition: border-color .25s, background .25s; text-align: left; }
.pse-cfg-chip:hover { border-color: hsl(var(--primary) / .5); }
.pse-cfg-chip.is-on { border-color: hsl(var(--primary)); background: hsl(var(--primary) / .08); }
.pse-cfg-chip-box { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; font-size: .75rem; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); transition: background .25s, color .25s; }
.pse-cfg-chip.is-on .pse-cfg-chip-box { background: hsl(var(--primary)); color: #fff; }
.pse-cfg-side { padding: 1.75rem 1.5rem; background: linear-gradient(160deg, #0f1f3d, #0a1428); color: #fff; display: flex; flex-direction: column; position: relative; }
@media (min-width: 768px) { .pse-cfg-side { padding: 2.25rem; } }
.pse-cfg-side::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; opacity: .35;
  background-image: repeating-conic-gradient(#fff 0% 25%, transparent 0% 50%); background-size: 8px 8px; }
.pse-cfg-side .pse-kicker { color: rgba(255,255,255,.6); }
.pse-cfg-price { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; margin: .35rem 0 .25rem; }
.pse-cfg-dash { opacity: .5; margin: 0 .15em; }
.pse-cfg-cur { font-size: .5em; font-weight: 600; opacity: .7; }
.pse-cfg-eur { font-size: .85rem; color: rgba(255,255,255,.6); }
.pse-cfg-rpm { height: 6px; border-radius: 999px; background: rgba(255,255,255,.12); overflow: hidden; margin: 1.1rem 0; }
.pse-cfg-rpm span { display: block; height: 100%; transform-origin: left; background: linear-gradient(90deg, hsl(var(--primary)), #facc15 75%, #ef4444); }
.pse-cfg-time { font-size: .9rem; color: rgba(255,255,255,.75); margin-bottom: 1.5rem; }
.pse-cfg-time strong { color: #fff; }
.pse-cfg-send { justify-content: center; margin-top: auto; }
.pse-cfg-form { display: block; text-align: center; font-size: .85rem; color: rgba(255,255,255,.7); margin-top: .8rem; text-decoration: underline; text-underline-offset: 3px; }
.pse-cfg-form:hover { color: #fff; }
.pse-cfg-note { font-size: .75rem; color: rgba(255,255,255,.45); margin-top: 1rem; text-align: center; }

/* ===== Opinie ===== */
.pse-rev-sum { display: flex; align-items: center; gap: .6rem; margin: 1rem 0 2rem; color: hsl(var(--muted-foreground)); }
.pse-rev-sum strong { font-size: 1.6rem; color: hsl(var(--foreground)); }
.pse-stars { display: inline-flex; gap: 2px; color: hsl(var(--border)); }
.pse-stars .is-on { color: #f5b301; }
.pse-rev-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .pse-rev-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pse-rev-grid li { list-style: none; }
.pse-rev-card { padding: 1.5rem; border-radius: 1rem; height: 100%; display: flex; flex-direction: column; gap: .8rem; }
.pse-rev-text { flex: 1; }
.pse-rev-who { font-size: .85rem; color: hsl(var(--muted-foreground)); }

/* ===== Światła startowe ===== */
.pse-lights { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 3rem 1rem 0; }
.pse-lights-gantry { display: flex; gap: .6rem; padding: .7rem .9rem; border-radius: .9rem; background: #0b1324; box-shadow: 0 18px 40px -20px rgba(0,0,0,.5); }
.pse-lights-pod { display: flex; flex-direction: column; gap: .45rem; padding: .45rem; border-radius: .6rem; background: #141d31; }
.pse-light { width: 22px; height: 22px; border-radius: 50%; background: #2a1215; box-shadow: inset 0 2px 4px rgba(0,0,0,.6); transition: background .12s, box-shadow .12s; }
.pse-light.is-on { background: radial-gradient(circle at 35% 35%, #ff8a80, #ef1d1d 55%, #a40000); box-shadow: 0 0 14px 3px rgba(239,29,29,.65); }
@media (min-width: 768px) { .pse-light { width: 28px; height: 28px; } }
.pse-lights-text { min-height: 1.6em; font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; color: hsl(var(--muted-foreground)); }
.pse-lights-go { color: hsl(var(--primary)); font-weight: 600; }

/* ===== Poradnik i branże na stronie głównej ===== */
.pse-guides { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2rem; }
@media (min-width: 768px) { .pse-guides { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.pse-guides > li { list-style: none; display: flex; }
.pse-guide { display: flex; flex-direction: column; gap: .8rem; width: 100%; padding: 1.6rem; border-radius: 1rem; transition: border-color .3s, box-shadow .3s; }
.pse-guide:hover { border-color: hsl(var(--primary) / .35); box-shadow: 0 18px 40px -18px hsl(var(--primary) / .35); }
.pse-guide .pse-link { margin-top: auto; }
.pse-guide-num { font-size: .75rem; letter-spacing: .2em; color: hsl(var(--primary)); }
.pse-branze { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 2rem; }
.pse-branza { padding: .4rem .85rem; border-radius: 999px; border: 1px solid hsl(var(--border)); font-size: .82rem; color: hsl(var(--foreground)); transition: border-color .25s, color .25s, background .25s; }
.pse-branza:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); background: hsl(var(--primary) / .06); }

/* ===== Podstrony: branże, poradnik ===== */
.psb-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .psb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } }
@media (min-width: 1100px) { .psb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.psb-grid > li { display: flex; }
.psb-card { position: relative; display: flex; flex-direction: column; gap: .6rem; width: 100%; padding: 1.75rem; border-radius: 1rem; transition: border-color .3s, box-shadow .3s; }
.psb-card:hover { border-color: hsl(var(--primary) / .35); box-shadow: 0 18px 40px -18px hsl(var(--primary) / .35); }
.psb-num { position: absolute; top: 1.2rem; right: 1.4rem; font-size: .75rem; letter-spacing: .2em; color: hsl(var(--muted-foreground)); }
.psb-kicker { font-size: .75rem; letter-spacing: .22em; text-transform: uppercase; color: hsl(var(--primary)); }
.psb-card-title { padding-right: 2rem; }
.psb-card-text { font-size: .92rem; }
.psb-link, .psb-inline { color: hsl(var(--primary)); font-weight: 500; }
.psb-link { display: inline-flex; gap: .4rem; margin-top: auto; padding-top: .5rem; font-size: .9rem; }
.psb-inline:hover { text-decoration: underline; text-underline-offset: 3px; }
.psb-split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 900px) { .psb-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; } }
.psb-checks { display: grid; gap: .85rem; margin-top: 1.5rem; }
.psb-checks li { list-style: none; display: flex; gap: .75rem; align-items: flex-start; color: hsl(var(--foreground)); line-height: 1.55; }
.psb-check { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: .75rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); margin-top: .1rem; }
.psb-ref .psb-kicker { margin-bottom: .75rem; }
.psb-ref-card { display: block; border-radius: 1rem; overflow: hidden; transition: box-shadow .3s, transform .3s; }
.psb-ref-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -18px hsl(var(--primary) / .35); }
.psb-ref-card img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; }
.psb-ref-body { display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.25rem 1.25rem; }
.psb-faq { margin-top: 1.5rem; border-top: 1px solid hsl(var(--border)); }
.psb-faq-item { border-bottom: 1px solid hsl(var(--border)); }
.psb-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.25rem 0; text-align: left; font-weight: 500; color: hsl(var(--foreground)); }
.psb-faq-icon { font-size: 1.4rem; line-height: 1; color: hsl(var(--primary)); flex: none; }
.psb-faq-a { padding-bottom: 1.25rem; }
.psb-more { margin-top: 2.5rem; font-size: .92rem; }
.psb-article > section { margin-bottom: 2.5rem; }
.psb-article h2 { margin-bottom: 1rem; }
.psb-article p { margin-bottom: 1rem; }
.psb-author { display: flex; gap: 1.25rem; align-items: flex-start; padding: 1.5rem; border-radius: 1rem; margin-top: 3rem; }
.psb-author img { width: 72px; height: 96px; object-fit: cover; border-radius: .6rem; flex: none; }
.psb-author .text-body { font-size: .9rem; margin: .3rem 0 .5rem; }

/* Przejście przy wejściu na podstronę */
.psb-wipe { position: fixed; inset: 0; z-index: 90; pointer-events: none; background: hsl(var(--background));
  background-image: repeating-conic-gradient(hsl(var(--foreground) / .9) 0% 25%, transparent 0% 50%); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent 18%, transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 18%, transparent 18%, transparent 100%); }
@media (prefers-reduced-motion: reduce) { .psb-wipe { display: none; } }
@media (min-width: 640px) { .pse-cfg-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); border-radius: 999px; } }
.pse-cfg-list { display: grid; gap: .45rem; margin: 0 0 1.5rem; font-size: .85rem; color: rgba(255,255,255,.78); }
.pse-cfg-list li { list-style: none; display: flex; gap: .55rem; }
.pse-cfg-list li::before { content: "✓"; color: #facc15; }

/* Strony usług */
.psb-price { padding: 1.75rem; border-radius: 1rem; }
.psb-price-val { font-size: clamp(1.8rem, 3.5vw, 2.4rem); font-weight: 700; letter-spacing: -.02em; color: hsl(var(--foreground)); margin: .3rem 0 .6rem; }
.psb-price .text-body { margin-bottom: .8rem; }
.psb-steps { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: s; }
@media (min-width: 768px) { .psb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .psb-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.psb-steps li { list-style: none; padding: 1.5rem; border-radius: 1rem; border: 1px solid hsl(var(--border)); background: hsl(var(--card)); }
.psb-step-num { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: .7rem; background: hsl(var(--primary)); color: #fff; font-size: .8rem; font-weight: 600; margin-bottom: 1rem; }
.psb-steps .heading-md { margin-bottom: .5rem; }
.psb-branze { margin-top: 2rem; }