:root {
	/* fonts */
	--ff-body: 'DM Sans', sans-serif;
	--ff-heading: 'DM Sans', sans-serif;

	/* colors — neutral scale */
	--color-white: #ffffff;
	--color-black: #1e1e1e;
	--color-neutral-0: #fefefe;
	--color-neutral-50: #f2f2f2;
	--color-neutral-100: #dfdfdf;
	--color-neutral-200: #cdcccc;
	--color-neutral-300: #b7b7b7;
	--color-neutral-500: #585959;
	--color-neutral-700: #303030;
	--color-neutral-800: #212121;
	--color-neutral-900: #1d1d1d;
	--color-neutral-950: #0f0f0f;

	/* motion */
	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* layout — globalny kontener i rynna, skalują się aż do bardzo szerokich ekranów (np. 3140px) */
	--container-max: min(1600px, 92vw);
	--gutter: clamp(20px, 4vw, 64px);

	/* spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 40px;
	--space-8: 48px;
	--space-9: 64px;
	--space-10: 80px;
	--space-11: 100px;
	--space-12: 120px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

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

body {
	overflow-x: hidden;
	font-family: var(--ff-body);
	color: var(--color-neutral-900);
	background-color: var(--color-neutral-0);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ff-heading);
}

/* ---------- eyebrow (label nad nagłówkiem sekcji) ---------- */

.eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-5);
	color: var(--color-black);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.eyebrow--invert {
	color: var(--color-white);
}

.eyebrow-mark {
	width: 7px;
	height: 7px;
	flex-shrink: 0;
	background: var(--color-black);
}

.eyebrow--invert .eyebrow-mark {
	background: var(--color-white);
}

:focus-visible {
	outline: 2px solid var(--color-black);
	outline-offset: 3px;
}

/* ---------- wspólna mechanika hover dla przycisków CTA ---------- */
/* Jedna fizyka ruchu dla wszystkich przycisków-akcji w serwisie (header, kontakt, jak działam) —
   każdy zachowuje własne tło/obramowanie w spoczynku, ale hover zawsze wypełnia się czernią tym samym tempem. */
.btn-sweep {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	cursor: pointer;
	transition: color 0.45s var(--ease, ease);
}

.btn-sweep::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-black);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--ease, ease);
}

.btn-sweep:hover,
.btn-sweep:focus-visible {
	color: var(--color-white);
}

.btn-sweep:hover::before,
.btn-sweep:focus-visible::before {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.btn-sweep,
	.btn-sweep::before {
		transition-duration: 0.01ms !important;
	}
}

/* wariant na ciemnym tle (np. sekcje odwrócone) — ta sama fizyka, odwrócone wartości */
.btn-sweep--invert {
	color: var(--color-white);
	border-color: var(--color-white);
}

.btn-sweep--invert::before {
	background: var(--color-white);
}

.btn-sweep--invert:hover,
.btn-sweep--invert:focus-visible {
	color: var(--color-black);
}

/* ---------- reveal na scrollu — globalny system ---------- */
/* Dwukierunkowe — klasa .is-visible przełącza się w obie strony wraz ze scrollem (IntersectionObserver, bez unobserve). */

/* nagłówki / teksty display — litery (JS dzieli tekst na .reveal-char), TYLKO tonacja + bardzo delikatna skala,
   celowo BEZ translateY — pionowy ruch dawał wrażenie "fali"; bardzo mały stagger (0.015s/literę) daje wrażenie
   płynnego "przejścia światła" po tekście zamiast efektu falowania. */
/* każde słowo to atomowa, nierozdzielna jednostka — przeglądarka może łamać wiersz
   tylko na prawdziwej spacji MIĘDZY .reveal-word, nigdy między literami w środku słowa */
[data-reveal="display"] .reveal-word {
	display: inline-block;
	white-space: nowrap;
}

[data-reveal="display"] .reveal-char {
	display: inline-block;
	opacity: 0.3;
	transform: scale(0.94);
	transition: opacity 0.5s var(--ease, ease), transform 0.5s var(--ease, ease);
	transition-delay: calc(var(--char-index, 0) * 0.015s);
}

[data-reveal="display"].is-visible .reveal-char {
	opacity: 1;
	transform: scale(1);
}

/* body / listy / statyczne elementy — cały blok naraz, bez podziału na litery, subtelniej */
[data-reveal="fade"] {
	opacity: 0.5;
	transform: scale(0.99);
	transition: opacity 0.6s var(--ease, ease), transform 0.6s var(--ease, ease);
}

[data-reveal="fade"].is-visible {
	opacity: 1;
	transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
	[data-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}