/* ==========================================================================
   MAXIMAX s.c. — design system
   Brand: #00599d / #009bdd · Type: Montserrat (display) + system (body)
   ========================================================================== */

:root {
	--brand:        #00599d;
	--brand-dark:   #023f70;
	--brand-light:  #009bdd;
	--brand-50:     #eef7fc;
	--brand-100:    #d6ecf8;
	--accent:       #0ea5a4;

	--ink:    #0f1f3a;   /* headings */
	--body:   #344056;   /* body text  (~9:1 on white) */
	--muted:  #475467;   /* secondary  (~7.4:1 on white) */
	--line:   #d6e1f2;
	--bg:     #ffffff;
	--bg-soft:#f5f8fc;

	--focus:  #3b82f6;

	--container: 1160px;
	--radius:    3px;
	--radius-sm: 2px;
	--radius-lg: 4px;
	--header-h:  92px;
	--control-line: #6b7585;   /* 4.66:1 on #fff — meets 1.4.11 */

	--shadow-sm: 0 1px 2px rgba(15,31,58,.06), 0 1px 3px rgba(15,31,58,.05);
	--shadow:    0 10px 30px rgba(15,31,58,.08);
	--shadow-lg: 0 24px 60px rgba(15,31,58,.14);

	--ff-display: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ff-body: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ----- reset / base ----- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 12px); }
body {
	font-family: var(--ff-body);
	color: var(--body);
	/* Page background — soft blue + mint radial glow (matches ewsp.pl). */
	background:
		radial-gradient(1100px 620px at 100% -8%, rgba(0,89,157,.10), transparent 60%),
		radial-gradient(760px 520px at 6% 4%, rgba(16,185,164,.11), transparent 58%),
		radial-gradient(820px 560px at 92% 110%, rgba(64,206,170,.10), transparent 55%),
		radial-gradient(900px 520px at -8% 112%, rgba(0,155,221,.07), transparent 55%),
		#f4f8fd;
	background-attachment: fixed;
	line-height: 1.65;
	font-size: 1rem;
	overflow-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
/* Zaznaczanie tekstu wyłączone na całej stronie — poza polami formularza. */
body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
input, textarea, select, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text; }
img, svg, iframe { display: block; max-width: 100%; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
ul { list-style: none; padding: 0; }
address { font-style: normal; }
[hidden] { display: none !important; }
:focus:not(:focus-visible) { outline: none; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px rgba(255,255,255,.85); }

h1, h2, h3 { font-family: var(--ff-display); color: var(--ink); line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }

/* ----- layout ----- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1.1rem, 4vw, 2rem); }
.section { padding-block: clamp(3.5rem, 7vw, 6rem); }
.section--soft { background: var(--brand-50); }
.section--dark { background: var(--brand-dark); color: #fff; }

.section-head { max-width: 720px; margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-title { font-size: clamp(1.7rem, 3.4vw, 2.5rem); }
.section-lead { margin-top: .85rem; font-size: 1.075rem; color: var(--muted); }

.eyebrow {
	display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--ff-display); font-weight: 700; font-size: .8rem;
	letter-spacing: .08em; text-transform: uppercase; color: var(--brand);
	margin-bottom: .9rem;
}
.eyebrow .icon { width: 1.05rem; height: 1.05rem; }
.eyebrow--light { color: #aecbff; }
.eyebrow--center { justify-content: center; }
.section-head:not(.section-head--left) .eyebrow { justify-content: center; }

.icon { width: 1.25rem; height: 1.25rem; flex: none; }

/* ----- buttons ----- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	font-family: var(--ff-display); font-weight: 600; font-size: .98rem; line-height: 1;
	padding: .8rem 1.3rem; border: 1.5px solid transparent;
	cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
	text-decoration: none; white-space: nowrap; border-radius: 3px;
}
.btn:hover { text-decoration: none; }
.btn .icon { width: 1.1em; height: 1.1em; }
.btn--lg { padding: .95rem 1.6rem; font-size: 1.02rem; }
.btn--primary { background: linear-gradient(135deg, var(--brand-light), var(--brand-dark)); color: #fff; box-shadow: 0 8px 20px rgba(0,89,157,.28); }
.btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,89,157,.36); }
.btn--outline { border-color: var(--brand); color: var(--brand); background: #fff; }
.btn--outline:hover { background: var(--brand-50); transform: translateY(-2px); }
.btn--light { background: #fff; color: var(--brand); box-shadow: var(--shadow); }
.btn--light:hover { transform: translateY(-2px); background: var(--brand-50); }
.btn--ghost-light { border-color: rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.06); }
.btn--ghost-light:hover { background: rgba(255,255,255,.16); border-color: #fff; transform: translateY(-2px); }
.btn--primary:hover .icon, .link-arrow:hover .icon { transform: translateX(3px); }
.btn .icon { transition: transform .15s ease; }

.link-arrow { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--ff-display); font-weight: 600; color: var(--brand); }
.link-arrow .icon { width: 1.05rem; height: 1.05rem; transition: transform .15s ease; }
.link-arrow:hover { text-decoration: none; }

.text-nowrap { white-space: nowrap; }

/* ----- skip link ----- */
.skip-link {
	position: fixed; top: -4rem; left: .75rem; z-index: 200;
	background: #fff; color: var(--brand); font-weight: 600;
	padding: .6rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--brand);
}
.skip-link:focus { top: .75rem; text-decoration: none; }

/* ----- brand ----- */
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand__logo { width: 46px; height: 46px; border-radius: 0; box-shadow: var(--shadow-sm); }
.brand__mark { width: 54px; height: 54px; flex: none; border-radius: 50%; box-shadow: 0 6px 16px rgba(0,89,157,.45); }

@media (prefers-reduced-motion: no-preference) {
	.brand__mark .logo-arcs {
		transform-origin: 32px 32px;
		transform-box: view-box;
		animation: logo-intro 4s cubic-bezier(.3,0,0,1) both;
	}
	@keyframes logo-intro {
		from { transform: rotate(0deg); }
		to   { transform: rotate(1080deg); }
	}
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--ff-display); font-weight: 600; font-size: 1.18rem; letter-spacing: .01em; color: var(--ink); }
.brand__sub { font-size: .74rem; color: var(--muted); letter-spacing: .01em; }
.brand__sub--short { display: none; }
/* Header carries no logo mark — clean, professional MAXIMAX s.c. wordmark. */
.site-header .brand__name { font-size: 1.4rem; letter-spacing: -.005em; color: var(--brand); line-height: 1; }
.site-header .brand__suffix { font-size: .8em; font-weight: 600; color: var(--brand-light); }
/* Brand — bez chipu i bez linii pod logo/napisem. */
.site-header .brand { padding: .6rem .25rem .4rem 0; background: none; border: none; border-radius: 0; box-shadow: none; }
.site-header .brand__name { color: var(--brand); }
.site-header .brand__suffix { color: var(--muted); }
.site-header .brand__sub { color: var(--muted); }

/* ----- header / nav ----- */
.site-header {
	position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.92);
	backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line); transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(8,37,75,.09); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--header-h); }

.primary-nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.75rem); }
.primary-nav__list { display: flex; align-items: center; gap: clamp(.25rem, 1.5vw, 1rem); }
.primary-nav__link {
	display: inline-block; font-family: var(--ff-display); font-weight: 600; font-size: 1.08rem;
	color: var(--body); padding: .55rem .5rem; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease;
}
.primary-nav__link:hover { color: var(--brand); text-decoration: none; }
/* Aktywna opcja — pasek z gradientem od stonowanej czerwieni do bieli. */
.primary-nav__link.is-active { color: var(--brand); position: relative; }
.primary-nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 5px; border-radius: 1px; background: linear-gradient(180deg, #009bdd 0 40%, transparent 40% 60%, #00599d 60% 100%); }
.primary-nav__cta .icon { width: 1.05em; height: 1.05em; }
/* Przycisk "Wsparcie techniczne" tylko w menu mobilnym — ukryty na desktopie. */
.primary-nav__support { display: none; }

/* Header call button — styled like the floating phone (round, gradient, pulsing). */
.nav-call { display: inline-flex; align-items: center; gap: .6rem; color: var(--brand); font-family: var(--ff-display); font-weight: 700; }
.nav-call:hover { text-decoration: none; }
.nav-call__icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 6px 16px rgba(0,89,157,.45); animation: fabPulse 2.4s ease-in-out infinite; transition: transform .15s ease; }
.nav-call__icon .icon { width: 1.25rem; height: 1.25rem; }
.nav-call:hover .nav-call__icon { transform: scale(1.06); }
.nav-call__num { font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .nav-call__icon { animation: none; } }

.nav-toggle { position: relative; display: none; width: 46px; height: 46px; border: none; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,89,157,.45); animation: fabPulse 2.4s ease-in-out infinite; transition: transform .15s ease; }
.nav-toggle:hover { transform: scale(1.06); }
.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }
/* Hamburger <-> X: crossfade + obrot zamiast natychmiastowego display swap. */
.nav-toggle__open, .nav-toggle__close { position: absolute; top: 50%; left: 50%; transition: opacity .25s ease, transform .25s ease; }
.nav-toggle__open { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
.nav-toggle__close { opacity: 0; transform: translate(-50%, -50%) rotate(-90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { opacity: 1; transform: translate(-50%, -50%) rotate(0); }
/* Otwarte menu — wyróżnij przycisk menu ciemniejszym tłem i zatrzymaj puls. */
.nav-toggle[aria-expanded="true"] { background: var(--brand-dark); animation: none; }
@media (prefers-reduced-motion: reduce) { .nav-toggle__open, .nav-toggle__close { transition: none; } }

/* Header actions group: phone + menu (mobile), same round style/size. */
.header-actions { display: flex; align-items: center; gap: .6rem; }
.header-call { display: none; width: 46px; height: 46px; flex: none; border-radius: 50%; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 6px 16px rgba(0,89,157,.45); animation: fabPulse 2.4s ease-in-out infinite; transition: transform .15s ease; }
.header-call:hover { transform: scale(1.06); text-decoration: none; }
.header-call .icon { width: 1.4rem; height: 1.4rem; }

@media (max-width: 899px) {
	/* Toggle + off-canvas panel only exist when JS is active; otherwise the
	   nav stays in normal flow, stacked and fully reachable (no dead button). */
	.js .nav-toggle { display: inline-flex; }
	.header-call { display: inline-flex; }
	.primary-nav { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
	.js .primary-nav {
		/* The header has backdrop-filter, so it is the containing block for this
		   fixed panel. top:100% = the header's real rendered height, so the panel
		   always sits flush under the header — self-correcting for logo size and
		   a11y font scaling. Height uses an explicit viewport height, not bottom:0
		   (which would resolve against the header height and collapse the panel). */
		position: fixed; top: 100%; left: 0; width: min(82vw, 300px);
		height: calc(100vh - var(--header-h)); height: calc(100dvh - var(--header-h));
		background: #fff; border-right: 1px solid var(--line); box-shadow: var(--shadow-lg);
		--nav-pad: clamp(1.1rem, 4vw, 1.5rem);
		padding: 0 var(--nav-pad) 1.5rem;
		transform: translateX(-110%); transition: transform .28s ease; visibility: hidden; overflow-y: auto;
	}
	.js .primary-nav.is-open { transform: translateX(0); visibility: visible; }
	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	/* Full-bleed rows: break the list out of the panel padding so each option
	   spans the whole menu width; keep text indented via the link's own padding. */
	.js .primary-nav .primary-nav__list { margin-left: calc(var(--nav-pad) * -1); margin-right: calc(var(--nav-pad) * -1); }
	.primary-nav__link { display: block; padding: .9rem var(--nav-pad, 1.25rem); border-bottom: 1px solid var(--line); }
	.primary-nav__list li:first-child .primary-nav__link { border-top: 1px solid var(--line); }
	.primary-nav__link:hover,
	.primary-nav__link:focus-visible { background: var(--brand-50); }
	.primary-nav__link.is-active { border-bottom-color: var(--line); background: var(--brand-50); }
	/* Aktywna pozycja: podwojna linia pionowa przy lewej krawedzi, ciemny kolor pierwszy. */
	.primary-nav__link.is-active::after {
		left: 0; right: auto; top: 0; bottom: 0; width: 5px; height: auto;
		background: linear-gradient(90deg, #00599d 0 40%, transparent 40% 60%, #009bdd 60% 100%);
	}
	.primary-nav__cta { margin-top: 1rem; width: 100%; }
	.primary-nav__cta.nav-call { width: auto; }
	.primary-nav__support { display: inline-flex; }
	.nav-call__num { display: none; }
	/* Shorten the brand slogan on the mobile layout. */
	.brand__sub--full { display: none; }
	.brand__sub--short { display: inline; }
}

/* ----- hero ----- */
.hero { position: relative; color: #fff; background: var(--brand-dark); overflow: hidden; }
.hero__bg {
	position: absolute; inset: 0; z-index: 0;
	background:
		radial-gradient(900px 520px at 82% -12%, rgba(0,155,221,.45), transparent 60%),
		linear-gradient(150deg, rgba(6,37,90,.94) 0%, rgba(9,52,120,.80) 55%, rgba(6,37,90,.90) 100%),
		url('../img/photo-1.jpg') center / cover no-repeat;
}
.hero .mesh-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: center; padding-block: clamp(3rem, 7vw, 5.5rem); }
.hero__title { font-size: clamp(1.7rem, 4.4vw, 3rem); color: #fff; letter-spacing: -.02em; }
.hero__lead { margin-top: 1.2rem; font-size: clamp(1.05rem, 2vw, 1.22rem); color: rgba(255,255,255,.82); max-width: 38ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 1.8rem; }
.hero__actions--center { justify-content: center; }

.hero__panel { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2rem); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: var(--shadow-lg); }
.hero__panel-title { font-family: var(--ff-display); font-weight: 700; font-size: 1.15rem; color: #fff; margin-bottom: 1.1rem; }
.hero__panel-list { display: grid; gap: .65rem; }
.hero__panel-list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-sm); padding: .7rem .85rem; color: #fff; }
.hero__panel-icon { display: inline-flex; }
.hero__panel-icon .icon { width: 1.35rem; height: 1.35rem; color: #aecbff; }
.hero__panel-check { width: 1.15rem; height: 1.15rem; color: var(--accent); }
.hero__panel-foot { display: flex; align-items: center; gap: .55rem; margin-top: 1.1rem; font-size: .9rem; color: rgba(255,255,255,.78); }
.hero__panel-foot .icon { width: 1.15rem; height: 1.15rem; color: #aecbff; }

/* ----- stats ----- */
.stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; margin-top: clamp(1.5rem, 4vw, 2.75rem); padding-bottom: clamp(2rem, 5vw, 3rem); }
.stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.5rem 1rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform .2s ease, background .2s ease, border-color .2s ease; }
.stat:hover { transform: translateY(-3px); background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.stat__icon { display: inline-flex; color: #aecbff; margin-bottom: .6rem; }
.stat__icon .icon { width: 1.5rem; height: 1.5rem; }
.stat__num { display: block; font-family: var(--ff-display); font-weight: 600; font-size: clamp(1.7rem, 4.4vw, 2.5rem); line-height: 1; color: #fff; background: linear-gradient(180deg, #ffffff 0%, #cfe0fb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.stat__label { display: block; margin-top: .45rem; font-size: .85rem; color: rgba(255,255,255,.75); }

/* ----- trust strip ----- */
.trust { background: transparent; border-bottom: 1px solid var(--line); }
.trust__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.5rem; padding-block: 1.6rem; text-align: center; }
.trust__label { font-size: .9rem; color: var(--muted); font-weight: 600; }
.trust__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; }
.chip { font-family: var(--ff-display); font-weight: 600; font-size: .85rem; color: var(--ink); background: var(--brand-50); border: 1px solid var(--line); border-radius: 3px; padding: .45rem .95rem; }
.chip--lg { font-size: .95rem; padding: .6rem 1.2rem; }
.chip--link { display: inline-flex; align-items: center; gap: .45rem; color: var(--brand); }
.chip--link .icon { width: 1.05rem; height: 1.05rem; }
.chip--link:hover { background: var(--brand-100); text-decoration: none; }

/* Brand logo wall + compact strip (icons in assets/img/tech/*.svg, greyscale → colour on hover) */
.logo-wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: .9rem; list-style: none; padding: 0; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.logo-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem; padding: 1.5rem 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.logo-item:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cdddf6; }
.logo-item__mark { width: 44px; height: 44px; filter: none; opacity: .92; transition: filter .25s ease, opacity .25s ease; }
.logo-item:hover .logo-item__mark { filter: none; opacity: 1; }
.logo-item__name { font-family: var(--ff-display); font-weight: 600; font-size: .9rem; color: var(--ink); text-align: center; line-height: 1.25; }
@media (min-width: 640px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .logo-wall { grid-template-columns: repeat(4, 1fr); } }
/* Wordmark partner logos: real logos sized by height, full available width, no caption. */
.logo-wall--wordmark .logo-item { min-height: 96px; padding: 1.25rem; }
.logo-wall--wordmark .logo-item__mark { width: auto; height: 38px; max-width: 100%; object-fit: contain; }

.logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 1.6rem; list-style: none; padding: 0; margin: 0; }
.logo-strip li { display: inline-flex; align-items: center; gap: .5rem; }
.logo-strip img { width: 26px; height: 26px; filter: none; opacity: .92; transition: filter .25s ease, opacity .25s ease; }
.logo-strip li:hover img { filter: none; opacity: 1; }
.logo-strip span { font-family: var(--ff-display); font-weight: 600; font-size: .9rem; color: var(--muted); }

/* ----- pillars ----- */
.pillars { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.pillar { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.pillar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--brand-light), var(--brand) 55%, var(--accent)); }
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cdddf6; }
.pillar__icon { display: inline-flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 3px; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; margin-bottom: 1.25rem; }
.pillar__icon .icon { width: 1.75rem; height: 1.75rem; }
.pillar__title { font-size: 1.35rem; margin-bottom: .6rem; }
.pillar__text { color: var(--muted); margin-bottom: 1.1rem; }

/* ----- features (values) ----- */
.features { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.feature { display: flex; gap: 1rem; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; }
.feature__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex: none; border-radius: 3px; background: var(--brand-100); color: var(--brand); }
.feature__icon .icon { width: 1.4rem; height: 1.4rem; }
.feature__title { font-size: 1.12rem; margin-bottom: .3rem; }
.feature__text { color: var(--muted); font-size: .96rem; }

/* ----- steps ----- */
.steps { display: grid; grid-template-columns: 1fr; gap: 1.25rem; list-style: none; padding: 0; margin: 0; }
.step { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem 1.5rem; }
.step__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 3px; background: var(--brand-100); color: var(--brand); margin-bottom: 1rem; }
.step__icon .icon { width: 1.6rem; height: 1.6rem; }
.step__title { font-size: 1.15rem; margin-bottom: .35rem; }
.step__text { color: var(--muted); font-size: .96rem; }

/* ----- cards (services) ----- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 1.25rem; }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: #cdddf6; }
.card__icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 3px; background: var(--brand-100); color: var(--brand); margin-bottom: 1rem; }
.card__icon .icon { width: 1.55rem; height: 1.55rem; }
.card__title { font-size: 1.18rem; margin-bottom: .45rem; }
.card__text { color: var(--muted); font-size: .96rem; }

/* ----- page hero (inner pages) ----- */
.page-hero { position: relative; background: transparent; border-bottom: 1px solid var(--line); padding-block: clamp(2.6rem, 6vw, 4.5rem); }
.page-hero--center { text-align: center; }
.page-hero__title { font-size: clamp(2rem, 4.5vw, 3rem); }
.page-hero__lead { margin-top: 1rem; max-width: 60ch; font-size: 1.1rem; color: var(--muted); }
.page-hero--center .page-hero__lead { margin-inline: auto; }
.page-hero__jump { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

/* ----- story (about) ----- */
.story { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
.story__text > p { margin-top: 1rem; color: var(--body); }
.story__text > p:first-of-type::first-letter { font-family: var(--ff-display); font-size: 3.2em; font-weight: 700; line-height: .78; float: left; margin: .06em .18em 0 0; color: var(--brand); }
.story__text .section-title { margin-bottom: .5rem; }

/* Karta faktów */
.story__facts {
	background: linear-gradient(145deg, var(--brand-dark) 0%, #012f56 100%);
	color: #fff;
	border-radius: var(--radius-lg);
	padding: 2rem;
	box-shadow: var(--shadow-lg);
	display: flex;
	flex-direction: column;
	position: relative;
	overflow: hidden;
}
.story__facts::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 70% 50% at 110% -10%, rgba(0,155,221,.25), transparent),
		radial-gradient(ellipse 60% 40% at -10% 110%, rgba(14,165,164,.18), transparent);
	pointer-events: none;
}
.story__facts dl { display: grid; gap: 0; flex: 1; position: relative; }
.story__facts dl > div {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 1rem 0;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.story__facts dl > div:last-child { border-bottom: 0; }
.story__facts .fact-icon {
	flex-shrink: 0;
	width: 32px; height: 32px;
	border-radius: 7px;
	background: rgba(255,255,255,.1);
	display: flex; align-items: center; justify-content: center;
}
.story__facts .fact-icon svg { width: 15px; height: 15px; stroke: rgba(255,255,255,.8); }
.story__facts .fact-body { flex: 1; min-width: 0; display: flex; justify-content: space-between; align-items: baseline; gap: .25rem .5rem; flex-wrap: wrap; }
.story__facts .fact-body dt { flex-basis: auto; }
.story__facts .fact-body dd { flex-basis: auto; }
.story__facts dt { color: rgba(255,255,255,.62); font-size: .85rem; letter-spacing: .01em; flex-shrink: 0; }
.story__facts dd { font-family: var(--ff-display); font-weight: 800; font-size: 1.05rem; color: #fff; text-align: right; min-width: 0; line-height: 1.2; }

/* Etykieta nad kartą */
.story__badge {
	display: inline-flex; align-items: center; gap: .5rem;
	font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
	color: var(--brand-light);
	background: rgba(0,155,221,.12);
	border: 1px solid rgba(0,155,221,.28);
	border-radius: 100px;
	padding: .3rem .9rem;
	margin-bottom: 1.25rem;
}
.story__badge svg { width: 13px; height: 13px; stroke: var(--brand-light); }

.story__side { display: grid; gap: 1.25rem; align-content: stretch; align-self: stretch; }
.story__media { width: 100%; height: 220px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); }

/* ----- team ----- */
.team { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1.75rem; text-align: center; box-shadow: var(--shadow-sm); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; font-family: var(--ff-display); font-weight: 700; font-size: 1.3rem; margin-bottom: 1rem; }
.team-card__name { font-size: 1.18rem; }
.team-card__role { color: var(--muted); font-size: .92rem; margin: .3rem 0 1rem; min-height: 2.6em; }
.team-card__contact { display: grid; gap: .5rem; text-align: left; border-top: 1px solid var(--line); padding-top: 1rem; }
.team-card__contact li { display: flex; align-items: center; gap: .55rem; font-size: .92rem; }
.team-card__contact .icon { width: 1.05rem; height: 1.05rem; color: var(--brand); flex: none; }

/* ----- partners ----- */
.partners__chips { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }

/* Partner "logo wall" (name placeholders, ready to swap for real logos) */
.partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.partner { display: flex; align-items: center; justify-content: center; min-height: 92px; padding: 1rem; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); font-family: var(--ff-display); font-weight: 700; font-size: 1.2rem; letter-spacing: .02em; color: var(--ink); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.partner:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #cdddf6; }
@media (min-width: 640px) { .partners-grid { grid-template-columns: repeat(4, 1fr); } }

/* ----- contact ----- */
.contact { display: grid; grid-template-columns: 1fr; gap: clamp(1.75rem, 4vw, 2.5rem); align-items: start; }
.contact__heading { font-size: 1.4rem; margin-bottom: 1.2rem; }
.contact__form-wrap { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem); box-shadow: var(--shadow); }
.form { display: grid; gap: 1.1rem; }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
.field__label { font-family: var(--ff-display); font-weight: 600; font-size: .92rem; color: var(--ink); }
.req { color: #c81e1e; }
.control { width: 100%; font: inherit; color: var(--ink); background: #fff; border: 1.5px solid var(--control-line); border-radius: var(--radius-sm); padding: .75rem .9rem; transition: border-color .15s ease, box-shadow .15s ease; }
.control:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0,89,157,.15); }
.control:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
textarea.control { resize: vertical; min-height: 130px; }
.control.is-invalid { border-color: #c81e1e; }
.control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(200,30,30,.16); }
.field__error { color: #c81e1e; font-size: .86rem; }
.field__error:empty { display: none; }
.form__note { color: var(--muted); font-size: .86rem; margin-top: .25rem; }

.alert { display: flex; align-items: flex-start; gap: .6rem; border-radius: var(--radius-sm); padding: .9rem 1.1rem; font-size: .96rem; margin-bottom: 1.1rem; }
.alert .icon { flex: none; margin-top: .1rem; }
.alert--success { background: #e7f7ee; border: 1px solid #b6e6cb; color: #16633a; }
.alert--error { background: #fdeced; border: 1px solid #f4c2c5; color: #a4161a; }

/* honeypot — visually & aurally hidden, still in tab-flow off-screen */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact__info { padding-top: .25rem; }
.contact__list { display: grid; gap: 1.2rem; }
.contact__list li { display: flex; gap: .9rem; }
.contact__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 3px; background: var(--brand-100); color: var(--brand); }
.contact__ico .icon { width: 1.35rem; height: 1.35rem; }
.contact__list a { color: var(--body); }
.contact__list a:hover { color: var(--brand); }

.map-section { line-height: 0; }
.map { width: 100%; height: clamp(320px, 45vw, 460px); border: 0; }

/* ----- CTA band ----- */
.cta { background: linear-gradient(135deg, rgba(2,63,112,.93), rgba(0,89,157,.82)), url('../img/hero-1.jpg') center / cover; color: #fff; }
.cta__inner { display: grid; gap: 1.75rem; align-items: center; padding-block: clamp(3rem, 6vw, 4.5rem); }
.cta__title { color: #fff; font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
.cta__text { margin-top: .75rem; color: rgba(255,255,255,.85); max-width: 52ch; }
.cta__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

/* ----- footer ----- */
.site-footer { background: #0a1b35; color: #c4cede; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-block: clamp(2.75rem, 5vw, 4rem); }
.brand--footer .brand__name, .brand--footer .brand__sub { color: #fff; }
.brand--footer .brand__sub { color: #9fb0c8; }
.site-footer__about { margin-top: 1rem; font-size: .94rem; color: #9fb0c8; max-width: 38ch; }
.site-footer__addr { margin-top: .85rem; font-style: normal; color: #c4cede; font-size: .94rem; }
.site-footer__title { font-family: var(--ff-display); font-size: 1rem; color: #fff; margin-bottom: 1rem; }
.site-footer__col ul { display: grid; gap: .6rem; }
.site-footer__col a { color: #c4cede; font-size: .94rem; }
.site-footer__col a:hover { color: #fff; }
.site-footer__contact li { display: flex; align-items: center; gap: .55rem; }
.site-footer__contact .icon { width: 1.05rem; height: 1.05rem; color: #7fa8e6; flex: none; }
.site-footer__contact a, .site-footer__contact span { color: #c4cede; }
.site-footer__bar { border-top: 1px solid rgba(255,255,255,.1); }
.site-footer__bar-inner { display: flex; flex-wrap: wrap; gap: .6rem 1.5rem; align-items: center; justify-content: space-between; padding-block: 1.4rem; font-size: .88rem; color: #9fb0c8; }
.site-footer__bar strong { color: #fff; font-weight: 600; }
.site-footer__bar a { color: #c4cede; display: inline-flex; align-items: center; gap: .35rem; }
.site-footer__bar a:hover { color: #fff; }
.site-footer__bar .icon { width: .95rem; height: .95rem; }

/* ----- floating action buttons: call (top-right) + back-to-top (bottom-right) ----- */
.fab { position: fixed; right: 1rem; z-index: 90; width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, opacity .25s ease; }
.fab .icon { width: 1.55rem; height: 1.55rem; }
.fab--call { top: calc(var(--header-h) + 14px); background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 10px 26px rgba(0,89,157,.5); animation: fabPulse 2.4s ease-in-out infinite; }
.fab--call:hover { transform: scale(1.08); text-decoration: none; box-shadow: 0 14px 34px rgba(0,89,157,.6); }
.fab--top { bottom: 1rem; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 10px 26px rgba(0,89,157,.5); opacity: 0; transform: translateY(12px); pointer-events: none; animation: fabPulse 2.4s ease-in-out infinite; }
.fab--top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.fab--top:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 14px 34px rgba(0,89,157,.6); }
@keyframes logoPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0,155,221,0); }
	50%      { box-shadow: 0 0 0 6px rgba(0,155,221,.12); }
}
@keyframes fabPulse {
	0%, 100% { box-shadow: 0 10px 26px rgba(0,89,157,.5); }
	50%      { box-shadow: 0 10px 26px rgba(0,89,157,.5), 0 0 0 12px rgba(0,155,221,.14); }
}
@media (prefers-reduced-motion: reduce) { .fab--top, .nav-toggle, .header-call { animation: none; } }

/* ----- reveal on scroll (progressive enhancement) ----- */
.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s ease; }
.js [data-reveal].in-view { opacity: 1; transform: none; }

/* ==========================================================================
   Appearance & accessibility — theme, text size, contrast, grayscale + panel.
   Controls set data-* on <html>; an inline head script restores them (no flash).
   ========================================================================== */
:root { --surface: #fff; --header-bg: rgba(255,255,255,.92); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ----- Dark theme ----- */
:root[data-theme="dark"] {
	--bg: #0d1626; --bg-soft: #121d31; --surface: #18223b;
	--ink: #eef3fb; --body: #c6d3e7; --muted: #9aa9c1; --line: #2a3750;
	--brand-50: #0e2a3d; --brand-100: #133849; --control-line: #6075a0;
	--header-bg: rgba(13,22,38,.9);
	--shadow-sm: 0 1px 2px rgba(0,0,0,.45);
	--shadow: 0 12px 32px rgba(0,0,0,.5);
	--shadow-lg: 0 24px 60px rgba(0,0,0,.62);
}
:root[data-theme="dark"] body {
	background:
		radial-gradient(1100px 620px at 100% -8%, rgba(0,155,221,.16), transparent 60%),
		radial-gradient(900px 520px at -8% 112%, rgba(0,89,157,.16), transparent 55%),
		var(--bg);
}
/* Surfaces hardcoded as #fff in light mode → themed surface token in dark. */
:root[data-theme="dark"] .logo-item,
:root[data-theme="dark"] .pillar,
:root[data-theme="dark"] .feature,
:root[data-theme="dark"] .step,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .team-card,
:root[data-theme="dark"] .partner,
:root[data-theme="dark"] .contact__form-wrap,
:root[data-theme="dark"] .control,
:root[data-theme="dark"] .btn--outline,
:root[data-theme="dark"] .skip-link { background: var(--surface); }
/* Off-canvas mobile nav: js + data-theme sit on the SAME <html>, so the dark
   surface override must be a compound (no descendant space before .js). */
:root[data-theme="dark"].js .primary-nav { background: var(--surface); }
:root[data-theme="dark"] .site-header { background: var(--header-bg); }
/* Brand pill: keep the wordmark readable on the faint dark-mode tint. */
:root[data-theme="dark"] .site-header .brand__name { color: var(--ink); }
:root[data-theme="dark"] .site-header .brand__suffix,
:root[data-theme="dark"] .site-header .brand__sub { color: var(--muted); }
/* Opcje menu (hover + aktywna) — mocniejszy kontrast w trybie ciemnym. */
:root[data-theme="dark"] .primary-nav__link:hover { color: #8ad4f8; }
:root[data-theme="dark"] .primary-nav__link.is-active { color: #6cc6f5; }
:root[data-theme="dark"] .primary-nav__link.is-active::after { background: linear-gradient(180deg, #5fc4f5 0 40%, transparent 40% 60%, #2aa3e6 60% 100%); }
:root[data-theme="dark"] .logo-item__mark,
:root[data-theme="dark"] .logo-strip img { filter: none; opacity: .92; }
/* Partner wordmarki są przeważnie ciemne — w trybie ciemnym karta zostaje biała, by logo było widoczne. */
:root[data-theme="dark"] .logo-wall--wordmark .logo-item { background: #fff; border-color: #d7e3f5; }
:root[data-theme="dark"] .logo-wall--wordmark .logo-item__mark { opacity: 1; }
/* Off-canvas mobile nav rows in dark: subtle light hover + brand-tinted active
   row with a bright accent bar (the light-mode --brand-50/--brand read too dark
   on the dark panel). Scoped to the mobile breakpoint where the panel exists. */
@media (max-width: 899px) {
	:root[data-theme="dark"] .primary-nav__link:hover,
	:root[data-theme="dark"] .primary-nav__link:focus-visible { background: rgba(255,255,255,.06); }
	:root[data-theme="dark"] .primary-nav__link.is-active { background: rgba(95,196,245,.12); }
	:root[data-theme="dark"] .primary-nav__link.is-active::after { background: linear-gradient(90deg, #2aa3e6 0 40%, transparent 40% 60%, #5fc4f5 60% 100%); }
}

/* ----- High contrast (takes precedence over the theme) ----- */
:root[data-contrast="high"] {
	--bg: #fff; --bg-soft: #fff; --surface: #fff; --header-bg: #fff;
	--ink: #000; --body: #000; --muted: #1b1b1b; --line: #000; --control-line: #000;
	--brand: #003a63; --brand-light: #003a63; --brand-dark: #000;
}
:root[data-contrast="high"] body { background: #fff; }
:root[data-contrast="high"] .site-header { background: #fff; }
:root[data-contrast="high"] a:not(.btn):not(.brand):not(.fab):not(.a11y__toggle) { text-decoration: underline; }

/* ----- Text size ----- */
:root[data-fontsize="lg"] { font-size: 112.5%; }
:root[data-fontsize="xl"] { font-size: 125%; }

/* ----- Grayscale (only non-fixed containers, so fixed UI keeps positioning) ----- */
:root[data-grayscale="on"] .site-header,
:root[data-grayscale="on"] main,
:root[data-grayscale="on"] .site-footer,
:root[data-grayscale="on"] .fab { filter: grayscale(1); }

/* ----- Header actions row + accessibility panel ----- */
.header-actions { display: inline-flex; align-items: center; gap: .5rem; order: 1; }
/* Phone: icon by default; on desktop the number slides out to the right on hover. */
.phone-cta { display: inline-flex; align-items: center; color: var(--brand); text-decoration: none; }
.phone-cta__icon { width: 46px; height: 46px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 6px 16px rgba(0,89,157,.45); transition: transform .15s ease; }
.phone-cta:hover .phone-cta__icon { transform: scale(1.06); }
.phone-cta__icon .icon { width: 1.4rem; height: 1.4rem; }
/* Ikona wsparcia technicznego w nagłówku — ten sam okrągły, gradientowy styl co telefon. */
.support-cta { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; box-shadow: 0 6px 16px rgba(0,89,157,.45); transition: transform .15s ease; }
.support-cta:hover { transform: scale(1.06); text-decoration: none; }
.support-cta .icon { width: 1.4rem; height: 1.4rem; }
.a11y { position: relative; display: inline-flex; }
.a11y__toggle { width: 46px; height: 46px; flex: none; border: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-light), var(--brand)); color: #fff; cursor: pointer; box-shadow: 0 6px 16px rgba(0,89,157,.45); transition: transform .15s ease; }
.a11y__toggle:hover { transform: scale(1.06); }
.a11y__toggle .icon { width: 1.4rem; height: 1.4rem; }
.a11y-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 130; width: 264px; max-width: calc(100vw - 24px); display: grid; gap: 1.1rem; padding: 1.1rem; background: var(--surface); color: var(--body); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.a11y-panel[hidden] { display: none; }
.a11y-group { display: grid; gap: .55rem; }
.a11y-group__label { font-family: var(--ff-display); font-weight: 700; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.a11y-seg { display: flex; gap: .4rem; }
.a11y-seg__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .35rem; font: inherit; font-weight: 600; font-size: .9rem; color: var(--body); background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.a11y-seg__btn .icon { width: 1.05em; height: 1.05em; }
.a11y-row { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem; font: inherit; font-weight: 600; font-size: .92rem; color: var(--body); background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.a11y-row .icon { width: 1.15em; height: 1.15em; color: var(--brand); }
.a11y-seg__btn:hover, .a11y-row:hover { border-color: var(--brand); }
.a11y-seg__btn[aria-pressed="true"], .a11y-row[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; }
.a11y-row[aria-pressed="true"] .icon { color: #fff; }
.a11y-reset { justify-self: start; padding: .1rem 0; font: inherit; font-size: .85rem; font-weight: 600; color: var(--brand); background: none; border: none; text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .a11y__toggle { transition: none; } }
/* Narrow phones: brand + three action buttons must fit without pushing the
   hamburger off-screen, so tighten the wordmark, gaps and button sizes. */
@media (max-width: 899px) {
	/* Keep brand + action buttons on one line; brand shrinks via text only —
	   the mark (SVG) stays fixed-size, only the wordmark gets squeezed. */
	.js .site-header__inner { flex-wrap: nowrap; }
	.site-header .brand { flex: 1 1 auto; min-width: 0; }
	.site-header .brand__mark { flex: none; }
	.site-header .brand__text { flex: 1 1 auto; min-width: 0; overflow: hidden; }
	.header-actions { flex: 0 0 auto; }
}
@media (max-width: 560px) {
	/* Małe ekrany: tylko logo (ikona) — bez wordmarku. */
	.brand__text { display: none; }
	.site-header .brand { padding: .3rem; }
	.brand__mark { width: 48px; height: 48px; }
	.header-actions { gap: .3rem; }
	.a11y__toggle, .phone-cta__icon, .support-cta, .nav-toggle { width: 42px; height: 42px; }
	.a11y__toggle .icon, .phone-cta__icon .icon, .support-cta .icon, .nav-toggle .icon { width: 1.25rem; height: 1.25rem; }
}

/* ----- responsive ----- */
@media (min-width: 640px) {
	.field-row { grid-template-columns: 1fr 1fr; }
	.features { grid-template-columns: repeat(2, 1fr); }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.team { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(3, 1fr); }
	.site-footer__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
	.hero__inner { grid-template-columns: 1.15fr .85fr; }
	.pillars { grid-template-columns: repeat(3, 1fr); }
	.features { grid-template-columns: repeat(3, 1fr); }
	.steps { grid-template-columns: repeat(4, 1fr); }
	.story { grid-template-columns: 1fr 340px; }
	.contact { grid-template-columns: 1.25fr .85fr; }
	.cta__inner { grid-template-columns: 1.3fr auto; }
	.site-footer__grid { grid-template-columns: 1.8fr 1fr 1fr 1.2fr; }
	/* Number is visible in the header on desktop — hide the floating phone. */
	.fab--call { display: none; }
}
@media (min-width: 1000px) {
	.team { grid-template-columns: repeat(4, 1fr); }
}

/* ----- reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
	.js [data-reveal] { opacity: 1; transform: none; }
}