/* ==========================================================================
   Hero — front page eyebrow on dark background
   ========================================================================== */
.hero-slide__content .eyebrow { color: var(--color-gold); }
.hero-slide__content h1,
.hero-slide__content h2 { font-size: clamp(1.8rem, 3.1vw, 2.75rem); }
.hero-slide__content { padding-block: 30px; }
.hero-slide__bg::after {
	background: linear-gradient(90deg, rgba(0,0,0,0.425) 0%, rgba(0,0,0,0.3) 35%, rgba(0,0,0,0.075) 65%, rgba(0,0,0,0.15) 100%);
}
.hero-slide__bg--dark::after {
	background: linear-gradient(90deg, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.6) 35%, rgba(0,0,0,0.25) 65%, rgba(0,0,0,0.4) 100%);
}

@media (max-width: 720px) {
	.hero-slide-nav {
		position: absolute;
		z-index: 3;
		inset: auto 0 0 0;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 14px;
		padding-bottom: 16px;
	}
	.hero-slide-nav .hero-arrow,
	.hero-slide-nav .hero-dots {
		position: static;
		inset: auto;
		transform: none;
	}
}

/* ==========================================================================
   Intro block
   ========================================================================== */
.intro-section { position: relative; overflow: hidden; }
.intro-section > .container { position: relative; z-index: 1; }
.intro-split { display: grid; gap: clamp(32px, 5vw, 64px); align-items: center; }
@media (min-width: 880px) {
	.intro-split { grid-template-columns: 1fr 1fr; }
}
.intro-block { max-width: 780px; }
.intro-block p:not(.eyebrow) { font-size: 1.05rem; }
.intro-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}
.intro-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--radius);
	cursor: zoom-in;
}
.intro-gallery__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	transition: transform 0.6s var(--ease), filter 0.4s var(--ease);
	filter: brightness(0.94);
}
.intro-gallery__item:hover img,
.intro-gallery__item:focus-visible img { transform: scale(1.06); filter: brightness(1); }
.intro-gallery__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: rgba(20, 36, 51, 0.32);
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}
.intro-gallery__item:hover .intro-gallery__overlay,
.intro-gallery__item:focus-visible .intro-gallery__overlay { opacity: 1; }

.section-lead { font-size: 1.05rem; margin-bottom: 2.5rem; }

/* ==========================================================================
   Featured cards (Kolekcje / Meble na wymiar / Dla architektów)
   ========================================================================== */
.featured-grid { margin-top: clamp(28px, 4vw, 48px); }

.featured-card {
	display: flex;
	flex-direction: column;
	color: inherit;
	position: relative;
	z-index: 0;
	overflow: visible;
}
.featured-card::before {
	content: '';
	position: absolute;
	inset: -3px;
	z-index: -1;
	border-radius: calc(var(--radius) + 3px);
	background: repeating-linear-gradient(90deg,
		var(--color-gold-dark) 0%,
		#f0c04a 25%,
		#ffdf85 50%,
		#f0c04a 75%,
		var(--color-gold-dark) 100%);
	background-size: 200% 100%;
	opacity: 0;
	transition: opacity 0.25s var(--ease);
}
.featured-card:hover::before {
	opacity: 1;
	animation: melbex-shimmer 1.75s linear infinite;
}
.featured-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--radius) var(--radius) 0 0;
	background: var(--color-bg-soft);
}
.featured-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--ease);
}
.featured-card:hover .featured-card__media img { transform: scale(1.06); }

.featured-card__body { padding: clamp(20px, 2.5vw, 32px); background: #fff; border-radius: 0 0 var(--radius) var(--radius); }
.featured-card__body h3 { margin-bottom: 0.5em; }
.featured-card__link {
	display: inline-block;
	margin-top: 0.75em;
	font-weight: 700;
	font-size: 0.9rem;
	color: var(--color-blue);
	transition: transform 0.25s var(--ease);
}
.featured-card:hover .featured-card__link { transform: translateX(4px); }

/* ==========================================================================
   Benefit grid (blok melbex/benefit-grid — sekcja "Dlaczego Melbex")
   Bazowy wygląd karty (tło/border/radius/hover transform+shadow) pochodzi
   z .card w main.css — tu tylko właściwości unikalne dla tej strony
   (padding, delikatne usunięcie obramowania na hover, kolorystyka ikon
   i typografia), żeby nie dublować reguł już pokrytych globalnie.
   ========================================================================== */
.benefit-grid-section {
	background-size: cover;
	background-position: center;
}
.benefit-grid-section .section-intro { margin-bottom: clamp(28px, 4vw, 48px); }
.benefit-card {
	padding: clamp(24px, 2.5vw, 30px);
	transition: border-color 0.3s var(--ease);
}
.benefit-card:hover { border-color: transparent; }
.benefit-card__icon-wrap { display: inline-flex; width: 60px; height: 60px; margin-bottom: 1.1em; }
.benefit-card__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: linear-gradient(145deg, var(--color-ink) 0%, var(--color-blue-dark) 100%);
	color: var(--color-gold);
	box-shadow: 0 10px 22px -10px rgba(20, 36, 51, 0.45);
}
.benefit-card h3 { font-size: 1.15rem; margin-bottom: 0.4em; }
.benefit-card p { font-size: 0.95rem; margin-bottom: 0; }

/* ==========================================================================
   Salony (shop teaser)
   ========================================================================== */
.salony-section { position: relative; overflow: hidden; }
.salony-section > .container { position: relative; z-index: 1; }
.sklepy-grid { margin-bottom: clamp(28px, 4vw, 40px); }
.sklep-card {
	border-color: rgba(20, 36, 51, 0.12);
	border-bottom: 3px solid var(--color-blue);
	box-shadow: 0 10px 24px -18px rgba(20, 36, 51, 0.4);
}
.sklep-card__photo {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}
.sklep-card__body { padding: clamp(20px, 2.5vw, 26px); }
.sklep-card h3 { margin-bottom: 0.5em; font-size: 1.1rem; }
.sklep-card__row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 0.7em;
	font-size: 0.92rem;
	color: var(--color-body);
	transition: color 0.2s var(--ease);
}
.sklep-card__row:hover { color: var(--color-blue); }
.sklep-card__row--address { align-items: flex-start; }
.sklep-card__row--address .sklep-card__icon { margin-top: calc(0.15em + 2px); }
.sklep-card__address { display: flex; flex-direction: column; min-width: 0; }
.sklep-card__address-line { display: block; }
.sklep-card__icon { flex: none; width: 18px; color: var(--color-blue); }
.sklep-card__row--phone { font-weight: 700; color: var(--color-blue); }
.sklep-card__row--phone:hover { color: var(--color-blue-dark); }
.sklepy-cta { text-align: center; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band {
	background: var(--color-blue);
	background-image: linear-gradient(135deg, var(--color-blue) 0%, var(--color-blue-dark) 100%);
	color: #fff;
}
.cta-band--photo {
	position: relative;
	background-size: cover;
	background-position: center;
}
.cta-band--photo::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-ink);
	opacity: 0.8;
}
.cta-band--photo .cta-band__inner { position: relative; z-index: 1; }
.cta-band__inner { max-width: 900px; text-align: center; margin-inline: auto; }
.cta-band .eyebrow { color: var(--color-gold); }
.cta-band h2 { color: #fff; margin-bottom: 0.5em; }
.cta-band p { color: #dce6ef; font-size: 1.05rem; }
.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin-top: 2rem;
}
.cta-band__outline { color: #fff; }
.cta-band__outline:hover { background: #fff; color: var(--color-blue-dark); }

@media (max-width: 720px) {
	.cta-band__actions { flex-direction: column; align-items: stretch; }
	.cta-band__actions .btn { justify-content: center; }
}

/* ==========================================================================
   Mobile: wyśrodkowanie tekstów/nagłówków/ikon/przycisków (nie dotyczy hero-sliderа)
   ========================================================================== */
@media (max-width: 720px) {
	.section .container,
	.intro-block { text-align: center; }
	.sklep-card__row { justify-content: center; }
}

/* ==========================================================================
   Akcent — okręgi napędzane scrollem (nie myszką): sekcja "O firmie" (prawy
   górny róg, animacja a1 — pulsacja z przekątnym przesuwem) i "Salony
   stacjonarne" (lewy dolny róg, animacja a2 — wychylenie po łuku z
   opóźnieniem fazowym). JS w front-page.js. Kolory zamienione względem
   pierwotnej mouse-follow wersji (duże kółko niebieskie, małe żółte), bez
   opacity.
   ========================================================================== */
.intro-accent,
.salony-accent {
	position: absolute;
	width: clamp(253px, 34.5vw, 529px);
	height: clamp(253px, 34.5vw, 529px);
	z-index: 0;
	pointer-events: none;
}
.intro-accent { top: 0; right: 0; }
.salony-accent { bottom: 0; left: 0; }

.intro-accent__circle,
.salony-accent__circle {
	position: absolute;
	display: block;
	will-change: transform;
	--tx: 0px;
	--ty: 0px;
	--scale: 1;
	transition: none;
	transform: translate(var(--tx), var(--ty)) scale(var(--scale));
}
.intro-accent__circle--gold {
	width: 75%;
	height: 75%;
	top: -18%;
	right: -12%;
}
.salony-accent__circle--gold {
	width: 75%;
	height: 75%;
	bottom: -18%;
	left: -12%;
}
.intro-accent__circle--gold circle,
.salony-accent__circle--gold circle { fill: var(--color-blue); fill-opacity: 0.9; }

.intro-accent__circle--blue {
	width: 46%;
	height: 46%;
	top: 26%;
	right: 30%;
}
.salony-accent__circle--blue {
	width: 46%;
	height: 46%;
	bottom: 26%;
	left: 30%;
}
.intro-accent__circle--blue circle,
.salony-accent__circle--blue circle { fill: var(--color-gold); fill-opacity: 0.85; }

@media (max-width: 1680px) {
	.intro-accent__circle--blue { top: 30%; right: 15%; }
	.salony-accent__circle--blue { bottom: 30%; left: 15%; }
}
@media (max-width: 1440px) {
	.intro-accent__circle--blue { top: 30px; right: calc(15% + 140px); }
	.salony-accent__circle--blue { bottom: 30px; left: calc(15% + 140px); }
}
@media (max-width: 1024px) {
	.intro-accent__circle--blue { right: calc(15% + 90px); }
	.salony-accent__circle--blue { left: calc(15% + 90px); }
}

/* Mobile — tekst i galeria "O firmie" stoją jedno pod drugim (tekst pierwszy),
   więc akcent przypięty u góry nachodził na nagłówek. Przenosimy go na dół
   sekcji (pod galerię) — JS dostaje flipYMobile:false, żeby ruch po łuku
   szedł w tę samą stronę co referencyjny dół z /test. */
@media (max-width: 720px) {
	.intro-accent { top: auto; bottom: 0; }
	.intro-accent__circle--gold { top: auto; bottom: -18%; }
	.intro-accent__circle--blue { top: auto; bottom: 26%; right: 30%; }
}