/* PLIK GENEROWANY przez _build/build.py — nie edytuj recznie,
   zmiany zostana nadpisane przy najblizszym budowaniu.
   Zrodla: assets/ds/tokens/*.css oraz assets/ds/components.css.
   Sklejone w calosc dla cache busting i jednego zadania — patrz build.py. */

/* ======================== tokens/fonts.css ======================== */
/* Inter Tight — font zmienny (variable), hostowany lokalnie.
   Licencja: SIL Open Font License 1.1.

   Wcześniej krój przychodził z fonts.googleapis.com przez @import w tym pliku,
   a ten plik był @import-owany ze styles.css, który dopiero wisiał w <link>.
   Dawało to łańcuch trzech żądań blokujących renderowanie, zanim przeglądarka
   w ogóle poprosiła o plik fontu — i przy każdej wizycie wysyłało adres IP
   użytkownika do Google (kłopot pod RODO, bez zgody i bez polityki prywatności).

   Jeden plik na podzbiór pokrywa całą oś wag 400–700 (strona używa 500 i 600).
   Podzbiór latin-ext zawiera polskie znaki: ą ć ę ł ń ó ś ź ż.
   Kursywy nie ma — nigdzie na stronie nie występuje. Gdyby była potrzebna,
   dociągnij wariant italic i dopisz drugą parę @font-face z font-style:italic. */

/* latin-ext */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/ds/fonts/inter-tight-var-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}

/* latin */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400 700;font-display:swap;src:url("/assets/ds/fonts/inter-tight-var-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{--font-core:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;--font-weight-regular:500;--font-weight-strong:600}

/* ======================== tokens/colors.css ======================== */
/* MasażPiła.pl — Brand Color System V3 (authoritative). */
:root{
/* brand */
--color-primary-dark:#1F6474;--color-primary:#3D97AC;--color-primary-hover:#2B7E92;--color-primary-active:#1A5A69;
--color-accent:#53C0D6;--color-accent-hover:#3D97AC;--color-accent-soft:#DDF4F8;
/* surfaces */
--color-background:#F7FAFB;--color-surface:#FFFFFF;--color-surface-soft:#EEF7F9;--color-surface-dark:#1F6474;--color-surface-accent:#53C0D6;
/* text */
--color-text-primary:#111516;--color-text-body:#3F4E52;--color-text-secondary:#5F7074;--color-text-muted:#8CA2A7;--color-text-inverse:#FFFFFF;
--color-text-inverse-soft:rgba(255,255,255,0.72);--color-text-inverse-faint:rgba(255,255,255,0.6);--color-text-inverse-quiet:rgba(255,255,255,0.5);
--color-text-on-accent:#111516;
/* borders */
--color-border:#DCEAEC;--color-border-strong:#BDD8DE;--color-border-subtle:#EEF7F9;--color-border-hover:#9CC3CC;
--color-border-dark:rgba(255,255,255,0.16);--color-border-dark-strong:rgba(255,255,255,0.32);
/* semantic transparencies — each serves one repeatable system role */
--color-surface-sticky:rgba(255,255,255,0.96);
--color-surface-inverse-subtle:rgba(255,255,255,0.12);
--color-surface-inverse-hover:rgba(255,255,255,0.08);
--color-border-inverse-hover:rgba(255,255,255,0.6);
--color-accent-transparent:rgba(83,192,214,0.45);
--color-primary-transparent:rgba(31,100,116,0.18);
/* neutral dark surface hover (Button / Dark) */
--color-neutral-dark:#111516;--color-neutral-dark-hover:#10262B;
/* status — never brand colours */
--color-error:#C94242;--color-error-text:#B03A3A;--color-error-strong:#A03636;--color-error-surface:#FBF0F0;--color-error-border:#F0D3D3;--color-error-field:#FFFBFB;
--color-success:#357A5B;--color-success-text:#2A6049;--color-success-surface:#EEF6F1;--color-success-border:#CFE2D7;
/* focus */
--color-focus:#1F6474;--color-focus-inverse:#53C0D6;--color-focus-shadow:rgba(31,100,116,0.16)
}

/* ======================== tokens/typography.css ======================== */
/* Fluid clamp() scale — identical proportion from 390 to 1920 px. */
:root{
--type-display-size:clamp(42px,5.4vw,78px);--type-display-lh:1.02;--type-display-ls:-0.035em;
--type-h1-size:clamp(40px,4.6vw,68px);--type-h1-lh:1.05;--type-h1-ls:-0.03em;
--type-h2-size:clamp(34px,3.6vw,52px);--type-h2-lh:1.08;--type-h2-ls:-0.025em;
--type-h3-size:clamp(28px,2.6vw,38px);--type-h3-lh:1.15;--type-h3-ls:-0.02em;
--type-h4-size:clamp(26px,2vw,30px);--type-h4-lh:1.25;--type-h4-ls:-0.015em;
--type-h5-size:clamp(20px,1.6vw,24px);--type-h5-lh:1.3;--type-h5-ls:-0.01em;
--type-h6-size:19px;--type-h6-lh:1.35;--type-h6-ls:0;
--type-body-large-size:19px;--type-body-large-lh:30px;
--type-body-medium-size:17px;--type-body-medium-lh:28px;
--type-body-size:16px;--type-body-lh:26px;
--type-body-compact-size:15px;--type-body-compact-lh:24px;
--type-body-small-size:14px;--type-body-small-lh:22px;
--type-subtitle-size:18px;--type-subtitle-lh:28px;
--type-button-size:16px;--type-button-lh:26px;
--type-nav-size:16px;--type-nav-lh:24px;
--type-link-size:16px;--type-link-lh:26px;
--type-label-size:13px;--type-label-lh:16px;--type-label-ls:0.12em;
--type-tag-size:12px;--type-tag-lh:16px;--type-tag-ls:0.1em;
--type-caption-size:13px;--type-caption-lh:20px;
--type-statistic-size:clamp(44px,5vw,72px);--type-statistic-lh:1;--type-statistic-ls:-0.04em;
--type-form-label-size:14px;--type-form-label-lh:20px;
--type-form-input-size:16px;--type-form-input-lh:26px
}

/* ======================== tokens/spacing.css ======================== */
/* Base unit 4px. Section rhythm stays generous — the system does not tolerate compression. */
:root{
--space-2xs:4px;--space-xs:8px;--space-3:12px;--space-sm:16px;--space-5:20px;--space-md:24px;--space-7:28px;--space-8:32px;
--space-lg:40px;--space-12:48px;--space-xl:64px;--space-20:80px;--space-2xl:96px;--space-30:120px;--space-36:144px;
--space-section:clamp(56px,8vw,120px);--space-section-large:clamp(72px,10vw,144px);
--space-heading-to-body:24px;--space-section-header-to-content:40px;
/* semantic composition spacing — the repeated shell paddings of cards and patterns */
--space-card:32px;--space-card-compact:28px;--space-shell:20px;
--space-pattern:clamp(24px,3.5vw,56px);--space-pattern-large:clamp(24px,3.5vw,64px);--space-cta:clamp(32px,5vw,80px)
}

/* ======================== tokens/radius.css ======================== */
/* The larger the surface, the larger the radius. */
:root{--radius-sm:8px;--radius-md:14px;--radius-lg:24px;--radius-xl:40px;--radius-pill:999px;
/* radius.card — the shared shell radius of pattern surfaces and image-card shells */
--radius-card:32px}

/* ======================== tokens/borders.css ======================== */
/* Borders before shadows — the system uses no shadows. */
:root{--border-subtle:1px solid var(--color-border-subtle);--border-default:1px solid var(--color-border);--border-strong:1px solid var(--color-border-strong);--border-dark:1px solid var(--color-border-dark);--border-dark-strong:1px solid var(--color-border-dark-strong);
--focus-ring-width:2px;--focus-ring-offset:3px;--focus-ring-color:var(--color-focus);--focus-ring-color-inverse:var(--color-focus-inverse)}

/* ======================== tokens/motion.css ======================== */
/* Calm, fast, natural. No parallax, no bounce, no large rotations. */
:root{--motion-ease:cubic-bezier(0.2,0.7,0.3,1);
--motion-fast:180ms;
--motion-default:260ms;
--motion-slow:400ms;
--motion-image-hover-scale:1.03;
--motion-arrow-hover-shift:3px
}

/* ======================== tokens/layout.css ======================== */
:root{
--container-max:1360px;--container-narrow:720px;--container-gutter:clamp(20px,4vw,64px);

--grid-columns:12;
--grid-gap:24px;--grid-gap-tablet:20px;--grid-gap-mobile:16px;
--text-width-small:480px;--text-width-body:640px;--text-width-long:720px;
--breakpoint-xl:1920px;--breakpoint-lg:1440px;--breakpoint-desktop:1280px;--breakpoint-tablet-lg:1024px;--breakpoint-tablet:768px;--breakpoint-mobile-lg:430px;--breakpoint-mobile:390px;
--ratio-hero:4 / 5;
--ratio-portrait:3 / 4;
--ratio-card:16 / 10;
--ratio-wide:16 / 9;
--ratio-square:1 / 1;
--ratio-editorial:21 / 9;

--tap-target-min:44px
}

/* ======================== tokens/base.css ======================== */
*{box-sizing:border-box}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{margin:0;background:var(--color-background);color:var(--color-text-primary);font-family:var(--font-core);font-weight:var(--font-weight-regular);font-size:var(--type-body-size);line-height:var(--type-body-lh)}
a{color:var(--color-primary-dark);text-decoration:none;transition:color var(--motion-fast) var(--motion-ease)}
a:hover{color:var(--color-primary-hover)}
h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
h1,h2,h3,h4,h5,h6{font-weight:var(--font-weight-strong)}
ul,ol{margin:0;padding:0;list-style:none}
input,textarea,select,button{font:inherit;color:inherit}
summary::-webkit-details-marker{display:none}
::selection{background:var(--color-accent);color:var(--color-text-primary)}
:focus-visible{outline:var(--focus-ring-width) solid var(--focus-ring-color);outline-offset:var(--focus-ring-offset)}
p{text-wrap:pretty}

/* ======================== components.css ======================== */
/* MasażPiła.pl — design-system components.
   Static CSS port of the Claude Design component bundle
   (_ds/masa-pi-a-pl-design-system/_ds_bundle.js). Values are 1:1 with the source
   components: Button, ArrowBadge, IconCircle, Eyebrow, Tag, TextLink, ImageFrame,
   Brandmark, Card, ImageCardShell, ServiceCard, ServiceCardFeatured,
   ServiceFeaturePanel, ProcessStep, TestimonialCard, TestimonialFeatured,
   NavigationDesktop, NavigationMobile, FaqAccordion. */

/* ---------- Icon ---------- */
.ds-sprite{position:absolute;width:0;height:0;overflow:hidden}
.ds-icon{display:block;flex:0 0 auto}

/* ---------- Eyebrow / Tag ---------- */
.ds-eyebrow{font-size:var(--type-label-size);line-height:var(--type-label-lh);font-weight:var(--font-weight-strong);letter-spacing:var(--type-label-ls);text-transform:uppercase;color:var(--color-primary-dark)}
.ds-eyebrow--on-dark{color:var(--color-accent-soft)}
.ds-eyebrow--dot{display:inline-flex;align-items:center;gap:var(--space-xs)}
.ds-eyebrow--dot::before{content:"";width:7px;height:7px;border-radius:var(--radius-pill);background:var(--color-accent)}

.ds-tag{display:inline-flex;align-self:flex-start;font-size:var(--type-tag-size);line-height:var(--type-tag-lh);font-weight:var(--font-weight-strong);letter-spacing:var(--type-tag-ls);text-transform:uppercase;border-radius:var(--radius-pill);padding:6px 12px;background:var(--color-surface-soft);color:var(--color-primary-dark)}
.ds-tag--accent{background:var(--color-accent);color:var(--color-text-on-accent)}

/* ---------- ArrowBadge ---------- */
.ds-arrow-badge{width:26px;height:26px;flex:0 0 auto;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--color-accent);border:1px solid var(--color-accent);color:var(--color-text-primary);transition:transform var(--motion-fast) var(--motion-ease),background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.ds-arrow-badge--28{width:28px;height:28px}
.ds-arrow-badge--outline{background:transparent;border:1px solid var(--color-border-strong);color:var(--color-primary-dark)}
.ds-arrow-badge--outline-dark{background:transparent;border:1px solid var(--color-accent-transparent);color:var(--color-accent-soft)}
.ds-arrow-badge--on-dark{background:var(--color-primary-dark);border:1px solid var(--color-primary-dark);color:var(--color-accent)}
/* hover is driven by the interactive ancestor */
.ds-hover-host:hover .ds-arrow-badge--outline,
.ds-hover-host:hover .ds-arrow-badge--outline-dark{background:var(--color-accent);border:1px solid var(--color-accent);color:var(--color-text-primary)}
.ds-hover-host:hover .ds-arrow-badge--shift{transform:translateX(var(--motion-arrow-hover-shift))}
/* the arrow is drawn at 45° (up-right); hovering an arrow button, a service card
   or a text link swings it level so it points straight right */
.ds-arrow-badge .ds-icon{transition:transform var(--motion-default) var(--motion-ease)}
.ds-btn--arrow:hover .ds-arrow-badge .ds-icon,
.ds-service-card:hover .ds-arrow-badge .ds-icon,
.ds-featured-card:hover .ds-arrow-badge .ds-icon,
.ds-text-link:hover .ds-arrow-badge .ds-icon{transform:rotate(45deg)}
@media (prefers-reduced-motion:reduce){.ds-arrow-badge .ds-icon{transition:none}}

/* ---------- IconCircle ---------- */
.ds-icon-circle{width:44px;height:44px;flex:0 0 auto;border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--color-background);border:var(--border-default);color:var(--color-primary-dark)}
.ds-icon-circle--40{width:40px;height:40px}
.ds-icon-circle--48{width:48px;height:48px}
.ds-icon-circle--accent{background:var(--color-accent);border:none;color:var(--color-text-primary)}
.ds-icon-circle--dark{background:var(--color-primary-dark);border:none;color:var(--color-accent)}
.ds-icon-circle--outline-dark{background:transparent;border:var(--border-dark-strong);color:var(--color-text-inverse)}

/* ---------- Button ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-xs);padding:13px 26px;min-height:var(--tap-target-min);border-radius:var(--radius-pill);font-size:var(--type-button-size);line-height:var(--type-button-lh);font-weight:var(--font-weight-strong);cursor:pointer;text-align:center;transition:background var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease);background:var(--color-primary-dark);color:var(--color-text-inverse);border:1px solid var(--color-primary-dark)}
.ds-btn:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-text-inverse)}
.ds-btn:active{background:var(--color-primary-active);border-color:var(--color-primary-active);transform:translateY(1px)}
.ds-btn--arrow{gap:var(--space-3);padding:13px 14px 13px 26px}
.ds-btn--full{display:flex;width:100%}

.ds-btn--secondary{background:var(--color-surface);color:var(--color-text-primary);border:1px solid var(--color-border-strong)}
.ds-btn--secondary:hover{background:var(--color-background);border-color:var(--color-primary-dark);color:var(--color-text-primary)}
.ds-btn--secondary:active{background:var(--color-background);border-color:var(--color-primary-dark)}

.ds-btn--on-dark{background:var(--color-accent);color:var(--color-text-on-accent);border:1px solid var(--color-accent)}
.ds-btn--on-dark:hover,.ds-btn--on-dark:active{background:var(--color-accent-hover);border-color:var(--color-accent-hover);color:var(--color-text-on-accent)}

/* ---------- TextLink / arrow ---------- */
.ds-text-link{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--type-link-size);line-height:var(--type-link-lh);font-weight:var(--font-weight-strong);color:var(--color-primary-dark)}

/* ---------- ImageFrame ---------- */
.ds-image-frame{position:relative;aspect-ratio:var(--ratio-card);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-surface-soft)}
.ds-image-frame--hero{aspect-ratio:var(--ratio-hero)}
.ds-image-frame--portrait{aspect-ratio:var(--ratio-portrait)}
.ds-image-frame--wide{aspect-ratio:var(--ratio-wide)}
.ds-image-frame--square{aspect-ratio:var(--ratio-square)}
.ds-image-frame--radius-md{border-radius:var(--radius-md)}
.ds-image-frame--radius-xl{border-radius:var(--radius-xl)}
.ds-image-frame>img{width:100%;height:100%;object-fit:cover;object-position:var(--img-pos,center);display:block;transition:transform var(--motion-slow) var(--motion-ease)}
.ds-image-frame__placeholder{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-5);text-align:center}
.ds-image-frame__placeholder>span{font-size:var(--type-caption-size);line-height:var(--type-caption-lh);color:var(--color-text-secondary)}

/* ---------- Brandmark ---------- */
.ds-brandmark{display:block;height:40px;width:auto;max-width:100%}
.ds-brandmark--34{height:34px}

/* ---------- Card ---------- */
.ds-card{background:var(--color-surface);border:var(--border-default);color:var(--color-text-primary);border-radius:var(--radius-lg);padding:var(--space-card);display:flex;flex-direction:column;gap:var(--space-3);min-width:0;transition:border-color var(--motion-default) var(--motion-ease),background var(--motion-default) var(--motion-ease)}
.ds-card--light{background:var(--color-background)}
.ds-card--soft{background:var(--color-surface-soft);border:none}
.ds-card--accent{background:var(--color-surface-accent);border:none;color:var(--color-text-on-accent)}
.ds-card--dark{background:var(--color-surface-dark);border:none;color:var(--color-text-inverse)}

/* ---------- ServiceCard ---------- */
.ds-service-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-card-compact);display:flex;flex-direction:column;gap:14px;color:var(--color-text-primary);min-width:0;transition:border-color var(--motion-default) var(--motion-ease),background var(--motion-default) var(--motion-ease)}
.ds-service-card:hover{border-color:var(--color-primary-dark);color:var(--color-text-primary)}
.ds-service-card__title{font-size:23px;line-height:1.28;letter-spacing:-0.02em;font-weight:var(--font-weight-strong)}
.ds-service-card__desc{font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-text-secondary)}
.ds-service-card__link{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--type-link-size);line-height:var(--type-link-lh);font-weight:var(--font-weight-strong);color:var(--color-primary-dark);margin-top:6px}
.ds-service-card--dark{background:var(--color-surface-dark);border-color:var(--color-primary-dark);color:var(--color-text-inverse)}
.ds-service-card--dark:hover{background:var(--color-primary-hover);border-color:var(--color-primary-hover);color:var(--color-text-inverse)}
.ds-service-card--dark .ds-service-card__desc{color:var(--color-text-inverse-soft)}
.ds-service-card--dark .ds-service-card__link{color:var(--color-accent-soft)}
/* strona główna: keep the "Dowiedz się więcej" row aligned across a card row */
[data-offer-cards] .ds-service-card__link{margin-top:auto;padding-top:6px}

/* ---------- ImageCardShell + ServiceCardFeatured (grid) ---------- */
.ds-featured-card{background:var(--color-background);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-shell);display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-md);align-items:center;color:var(--color-text-primary);min-width:0;transition:border-color var(--motion-default) var(--motion-ease)}
.ds-featured-card:hover{border-color:var(--color-primary-dark);color:var(--color-text-primary)}
.ds-featured-card__body{padding:var(--space-xs) var(--space-3) var(--space-xs) 4px;display:flex;flex-direction:column;gap:var(--space-3);min-width:0}
.ds-featured-card__title{font-size:clamp(22px,2.2vw,28px);line-height:1.24;letter-spacing:-0.025em;font-weight:var(--font-weight-strong)}
.ds-featured-card__desc{font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-text-secondary);max-width:38ch}
.ds-featured-card__link{display:inline-flex;align-items:center;gap:var(--space-3);font-size:var(--type-link-size);line-height:var(--type-link-lh);font-weight:var(--font-weight-strong);color:var(--color-primary-dark);margin-top:4px}

/* ---------- ServiceFeaturePanel ---------- */
.ds-feature-panel{background:var(--color-background);border:var(--border-default);border-radius:var(--radius-lg);padding:var(--space-card-compact);display:flex;flex-direction:column;gap:var(--space-sm)}
.ds-feature-panel__title{font-size:var(--type-h6-size);line-height:1.3;letter-spacing:-0.015em;font-weight:var(--font-weight-strong)}
.ds-feature-panel__list{display:flex;flex-direction:column;gap:var(--space-3)}
.ds-feature-panel__list li{display:flex;gap:var(--space-3);font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-text-body)}
.ds-feature-panel__check{flex:0 0 auto;width:22px;height:22px;margin-top:2px;border-radius:var(--radius-pill);background:var(--color-accent);display:grid;place-items:center;color:var(--color-primary-dark)}

/* ---------- ProcessStep / numbered ---------- */
.ds-process-step{background:var(--color-surface);border:var(--border-default);border-radius:var(--radius-lg);padding:var(--space-md);min-width:0}
.ds-process-step__number{font-size:clamp(32px,3vw,44px);line-height:var(--type-statistic-lh);letter-spacing:-0.035em;font-weight:var(--font-weight-strong);color:var(--color-primary-dark);margin-bottom:var(--space-5)}
.ds-process-step__title{font-size:var(--type-h6-size);line-height:1.3;font-weight:var(--font-weight-strong);color:var(--color-text-primary);margin-bottom:var(--space-xs)}
.ds-process-step__desc{font-size:var(--type-body-compact-size);line-height:var(--type-body-compact-lh);color:var(--color-text-secondary)}
.ds-process-step--accent{background:var(--color-accent);border:none}
.ds-process-step--accent .ds-process-step__number,
.ds-process-step--accent .ds-process-step__title,
.ds-process-step--accent .ds-process-step__desc{color:var(--color-text-primary)}

/* ---------- Testimonials ---------- */
.ds-testimonial-card{background:var(--color-background);border:var(--border-default);border-radius:var(--radius-lg);padding:var(--space-md);display:flex;flex-direction:column;gap:var(--space-sm);min-width:0}
.ds-testimonial-card blockquote{font-size:var(--type-body-medium-size);line-height:var(--type-body-medium-lh);color:var(--color-text-body)}
.ds-testimonial-card figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;font-size:var(--type-body-small-size);line-height:var(--type-body-small-lh);color:var(--color-text-secondary)}

.ds-testimonial-featured{background:var(--color-surface-dark);border-radius:var(--radius-lg);padding:clamp(28px,3vw,40px);min-width:0;display:grid;grid-template-columns:7fr 5fr;gap:var(--space-8);align-items:end}
.ds-testimonial-featured blockquote{font-size:clamp(24px,2.6vw,36px);line-height:1.32;letter-spacing:-0.02em;color:var(--color-text-inverse);max-width:34ch;min-width:0}
.ds-testimonial-featured figcaption{display:flex;align-items:center;gap:14px;margin-top:auto;min-width:0}
.ds-testimonial-featured__avatar{width:52px;height:52px;flex:0 0 auto;border-radius:var(--radius-pill);overflow:hidden;background:var(--color-surface-inverse-subtle);border:var(--border-dark);display:grid;place-items:center;font-size:var(--type-body-compact-size);font-weight:var(--font-weight-strong);color:var(--color-accent-soft)}
.ds-testimonial-featured__author{display:block;font-size:var(--type-nav-size);line-height:var(--type-nav-lh);font-weight:var(--font-weight-strong);color:var(--color-text-inverse)}
.ds-testimonial-featured__meta{display:block;font-size:var(--type-body-small-size);line-height:var(--type-body-small-lh);color:var(--color-text-inverse-faint)}
@media (max-width:900px){.ds-testimonial-featured{grid-template-columns:1fr}}

/* ---------- FAQ item ---------- */
.ds-faq-item{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:background var(--motion-default) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.ds-faq-item__trigger{width:100%;background:none;border:none;text-align:left;padding:22px 24px;min-height:64px;display:flex;align-items:center;gap:20px;cursor:pointer;font-family:inherit;font-size:19px;line-height:1.35;font-weight:var(--font-weight-strong);color:var(--color-text-primary);transition:color var(--motion-fast) var(--motion-ease)}
.ds-faq-item__trigger>span:first-child{flex:1 1 auto}
.ds-faq-item__badge{flex:0 0 auto;width:32px;height:32px;border-radius:var(--radius-pill);background:var(--color-background);border:1px solid var(--color-border);color:var(--color-text-primary);display:grid;place-items:center;transition:background var(--motion-fast) var(--motion-ease),color var(--motion-fast) var(--motion-ease),border-color var(--motion-fast) var(--motion-ease)}
.ds-faq-item__badge .ds-icon--minus{display:none}
/* visibility:hidden na zwiniętej odpowiedzi — bez tego czytnik ekranu odczytuje
   wszystkie odpowiedzi naraz, mimo że wizualnie panel ma max-height:0.
   visibility w transition działa krokowo: przy rozwijaniu wraca od razu,
   przy zwijaniu znika dopiero na końcu animacji. */
.ds-faq-item__panel{overflow:hidden;max-height:0;opacity:0;visibility:hidden;transform:translateY(-6px);transition:max-height var(--motion-slow) var(--motion-ease),opacity var(--motion-default) var(--motion-ease),transform var(--motion-slow) var(--motion-ease),visibility var(--motion-slow) var(--motion-ease)}
.ds-faq-item__panel>p{padding:0 24px 24px;font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--color-text-secondary);max-width:62ch}
.ds-faq-item.is-open{background:var(--color-background)}
.ds-faq-item.is-open .ds-faq-item__trigger{color:var(--color-primary-dark)}
.ds-faq-item.is-open .ds-faq-item__badge{background:var(--color-primary-dark);border-color:transparent;color:var(--color-accent)}
.ds-faq-item.is-open .ds-faq-item__badge .ds-icon--plus{display:none}
.ds-faq-item.is-open .ds-faq-item__badge .ds-icon--minus{display:block}
.ds-faq-item.is-open .ds-faq-item__panel{opacity:1;visibility:visible;transform:translateY(0)}

/* ---------- Navigation / Desktop ---------- */
.ds-nav-desktop{position:relative}
.ds-nav-desktop__bar{background:var(--color-surface);border:var(--border-default);border-radius:var(--radius-pill);padding:12px 12px 12px var(--space-md);display:flex;align-items:center;gap:var(--space-md);flex-wrap:wrap;transition:padding var(--motion-default) var(--motion-ease),background var(--motion-default) var(--motion-ease)}
.ds-nav-desktop__brand{display:inline-flex;border-radius:8px;outline-offset:3px}
.ds-nav-desktop__links{display:flex;align-items:center;gap:22px;margin-left:auto;flex-wrap:wrap}
.ds-nav-desktop__link{font-size:var(--type-nav-size);line-height:var(--type-nav-lh);font-weight:var(--font-weight-regular);color:var(--color-text-primary);transition:color var(--motion-fast) var(--motion-ease)}
.ds-nav-desktop__link:hover{color:var(--color-primary-dark)}
.ds-nav-desktop__link.is-active{font-weight:var(--font-weight-strong);color:var(--color-primary-dark)}
.ds-nav-desktop__item{position:static;display:inline-flex;align-items:center}
.ds-nav-desktop__trigger{display:inline-flex;align-items:center;gap:7px}
.ds-nav-desktop__chevron{transition:transform 400ms var(--motion-ease)}
.ds-nav-desktop__item.is-open .ds-nav-desktop__chevron{transform:rotate(180deg)}
/* Rozwiniete submenu podswietla "Oferte" kolorem — pogrubienie zostaje
   zarezerwowane wylacznie dla aktywnej podstrony (.is-active). */
.ds-nav-desktop__trigger[aria-expanded="true"]{color:var(--color-primary-dark)}
/* Kontener etykiety o stalej szerokosci: ukryta kopia tekstu (data-label) jest
   zawsze pogrubiona, wiec pozycja menu zajmuje tyle samo miejsca niezaleznie od
   tego, czy jest aktywna — sasiednie linki nie przeskakuja. */
.ds-nav-label{display:inline-grid;justify-items:center}
.ds-nav-label::after{content:attr(data-label);height:0;overflow:hidden;visibility:hidden;font-weight:var(--font-weight-strong);pointer-events:none}
.ds-nav-desktop__cta{padding:11px 14px 11px 22px}
/* Panel jest stale w DOM, a stan trzyma visibility — dzieki temu wejscie i wyjscie
   da sie animowac (display:none nie da sie przejsc plynnie), a zamkniete submenu
   i tak wypada z kolejnosci Tab i z odczytu czytnika ekranu. */
.ds-nav-desktop__dropdown{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:max-content;max-width:520px;background:var(--color-surface);border:var(--border-default);border-radius:var(--radius-lg);padding:var(--space-5);display:grid;grid-template-columns:repeat(2,1fr);gap:6px;box-shadow:0 18px 48px -24px rgba(16,40,46,0.28);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
  transition:opacity 400ms var(--motion-ease),transform 450ms var(--motion-ease),visibility 450ms var(--motion-ease)}
/* Niewidzialny mostek domykajacy 10 px przerwy miedzy paskiem a panelem: kursor
   jadacy z „Oferty” w dol nie wypada po drodze poza obszar submenu. */
.ds-nav-desktop__dropdown::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.ds-nav-desktop__item.is-open>.ds-nav-desktop__dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
/* Bez JS zostaje czysty hover/focus — submenu dalej dziala, tylko bez zwloki. */
.ds-nav-desktop:not(.is-js) .ds-nav-desktop__item:hover>.ds-nav-desktop__dropdown,
.ds-nav-desktop:not(.is-js) .ds-nav-desktop__item:focus-within>.ds-nav-desktop__dropdown{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
.ds-nav-desktop__dropdown[hidden]{display:none}
@media (prefers-reduced-motion:reduce){
.ds-nav-desktop__dropdown{transition:none}
.ds-nav-desktop__chevron{transition:none}
}
.ds-nav-desktop__dropdown a{padding:10px var(--space-3);border-radius:12px;font-size:var(--type-nav-size);line-height:var(--type-nav-lh);color:var(--color-text-primary);transition:background var(--motion-fast) var(--motion-ease)}
.ds-nav-desktop__dropdown a:hover{background:var(--color-surface-soft);color:var(--color-primary-dark)}

/* ---------- Navigation / Mobile ---------- */
.ds-nav-mobile{max-width:390px;background:var(--color-surface);border:var(--border-default);border-radius:var(--radius-lg);overflow:hidden}
.ds-nav-mobile__bar{padding:14px var(--space-sm);display:flex;align-items:center;justify-content:space-between}
.ds-nav-mobile__toggle{width:var(--tap-target-min);height:var(--tap-target-min);border-radius:var(--radius-pill);background:var(--color-background);border:var(--border-default);display:grid;place-items:center;cursor:pointer;color:var(--color-text-primary)}
/* hamburger ⇄ X — both icons share one grid cell and cross-fade with a quarter turn */
.ds-nav-mobile__icon{grid-area:1 / 1;transition:opacity var(--motion-fast) var(--motion-ease),transform var(--motion-default) var(--motion-ease)}
.ds-nav-mobile__icon--close{opacity:0;transform:rotate(-90deg) scale(0.6)}
.ds-nav-mobile__toggle[aria-expanded="true"]{color:var(--color-primary-dark)}
.ds-nav-mobile__toggle[aria-expanded="true"] .ds-nav-mobile__icon--menu{opacity:0;transform:rotate(90deg) scale(0.6)}
.ds-nav-mobile__toggle[aria-expanded="true"] .ds-nav-mobile__icon--close{opacity:1;transform:rotate(0) scale(1)}
@media (prefers-reduced-motion:reduce){.ds-nav-mobile__icon{transition:none}}
.ds-nav-mobile__panel{border-top:var(--border-default);padding:12px var(--space-sm) var(--space-5);display:flex;flex-direction:column;gap:2px}
.ds-nav-mobile__panel[hidden]{display:none}
.ds-nav-mobile__panel a:not(.ds-btn){padding:12px 4px;font-size:var(--type-subtitle-size);line-height:var(--type-subtitle-lh);font-weight:var(--font-weight-regular);color:var(--color-text-primary);border-bottom:1px solid var(--color-surface-soft)}
.ds-nav-mobile__panel a:not(.ds-btn).is-active{font-weight:var(--font-weight-strong);color:var(--color-primary-dark)}
.ds-nav-mobile__panel a.is-last{border-bottom:none}
.ds-nav-mobile__cta{margin-top:var(--space-sm);padding:15px var(--space-md)}

/* Ograniczenie ruchu: rozwijanie FAQ bez animacji wysokości. */
@media (prefers-reduced-motion:reduce){
  .ds-faq-item__panel{transition:none}
  .ds-image-frame>img{transition:none}
}