/* ===== style.css ===== */
/* =========================================================================
   ICF Karting — style główne
   Sport, czerń + akcent czerwony, typografia Inter.
   Strukturyzowane: design tokens → reset → typografia → layout → komponenty.
   ========================================================================= */

/* ----- Design tokens ----- */
:root {
	--c-bg:           #0a0a0c;
	--c-bg-2:         #111114;
	--c-bg-3:         #17171b;
	--c-line:         #25252a;
	--c-text:         #f3f3f5;
	--c-text-2:       #b6b6bd;
	--c-text-3:       #80808a;
	--c-accent:       #ff2d20;
	--c-accent-2:     #ff5640;
	--c-accent-soft:  rgba(255, 45, 32, 0.12);
	--c-success:      #36c46c;
	--c-error:        #ff5b5b;

	--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--container:    1240px;
	--container-narrow: 880px;
	--gutter:       clamp(16px, 4vw, 32px);

	--radius-sm: 6px;
	--radius:    12px;
	--radius-lg: 20px;

	--shadow-sm: 0 2px 6px rgba(0,0,0,.4);
	--shadow:    0 8px 32px rgba(0,0,0,.5);

	--ease: cubic-bezier(.2,.8,.2,1);
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-decoration: none; transition: color .2s var(--ease); }
a:hover { color: var(--c-accent-2); }
button { font: inherit; cursor: pointer; }

/* Skip link */
.skip-link {
	position: absolute; top: -100px; left: 16px;
	background: var(--c-accent); color: #fff; padding: 12px 16px; z-index: 9999;
	border-radius: var(--radius-sm);
}
.skip-link:focus { top: 16px; color: #fff; }

/* ----- Typografia ----- */
h1, h2, h3, h4 { font-weight: 700; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
h4 { font-size: 1.1rem; }
p  { margin: 0 0 1em; }
strong { font-weight: 600; color: var(--c-text); }

/* ----- Layout ----- */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
	padding: clamp(48px, 7vw, 96px) 0;
}
.section--alt { background: var(--c-bg-2); }
.section--faq { background: var(--c-bg-2); }

.section__header {
	text-align: center;
	max-width: 720px;
	margin: 0 auto clamp(32px, 5vw, 56px);
}
.section__title { margin-bottom: 12px; }
.section__lead  { color: var(--c-text-2); font-size: 1.1rem; }
.section__footer {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: clamp(32px, 5vw, 56px);
}
.section__note {
	color: var(--c-text-3);
	font-size: .92rem;
	margin-top: 16px;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	width: 1px; height: 1px;
	overflow: hidden;
}

/* ----- Buttons ----- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: .95rem;
	border: 2px solid transparent;
	cursor: pointer;
	transition: transform .15s var(--ease), background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
	text-align: center;
	white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary {
	background: var(--c-accent);
	color: #fff;
}
.btn--primary:hover { background: var(--c-accent-2); color: #fff; }

.btn--ghost {
	background: transparent;
	color: var(--c-text);
	border-color: var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-accent); color: var(--c-text); background: var(--c-accent-soft); }

.btn--sm { padding: 8px 14px; font-size: .85rem; }
.btn--lg { padding: 16px 28px; font-size: 1.05rem; }

/* ----- Header ----- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(10, 10, 12, .85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--c-line);
}
.site-header__inner {
	display: flex; align-items: center; justify-content: space-between;
	min-height: 72px;
	gap: 24px;
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo__text { font-size: 1.4rem; font-weight: 800; letter-spacing: -.02em; color: var(--c-text); }
.site-logo__accent { color: var(--c-accent); margin-left: 4px; }
.site-logo img { max-height: 56px; width: auto; }

.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; gap: 4px;
}
.site-nav__list li a {
	display: inline-block;
	padding: 8px 14px;
	color: var(--c-text);
	font-weight: 500;
	border-radius: var(--radius-sm);
	transition: background .2s var(--ease);
}
.site-nav__list li a:hover,
.site-nav__list li.current-menu-item > a {
	background: rgba(255,45,32,0.12);
	color: #fff;
	box-shadow: inset 0 -2px 0 var(--c-accent, #ff2d20);
}
.site-nav__list li a {
	position: relative;
}
.site-nav__cta { display: flex; align-items: center; gap: 12px; }
.site-nav__phone {
	color: var(--c-text);
	font-weight: 600;
	font-size: .95rem;
	white-space: nowrap;
}
.site-nav__phone:hover { color: var(--c-accent); }

.nav-toggle {
	display: none;
	background: transparent;
	border: 0; padding: 8px;
	width: 44px; height: 44px;
	flex-direction: column; gap: 5px; justify-content: center; align-items: center;
}
.nav-toggle span {
	display: block; width: 26px; height: 2px;
	background: var(--c-text);
	transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 960px) {
	.nav-toggle { display: flex; }
	.site-nav {
		position: fixed;
		inset: 72px 0 auto 0;
		flex-direction: column;
		align-items: stretch;
		background: var(--c-bg-2);
		padding: 24px var(--gutter);
		gap: 20px;
		border-bottom: 1px solid var(--c-line);
		transform: translateY(-120%);
		transition: transform .25s var(--ease);
		max-height: calc(100vh - 72px);
		overflow-y: auto;
	}
	.site-nav.is-open { transform: translateY(0); }
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list li a { padding: 14px 16px; font-size: 1.05rem; }
	.site-nav__cta { flex-direction: column; align-items: stretch; }
	.site-nav__phone { padding: 12px; text-align: center; border: 1px solid var(--c-line); border-radius: var(--radius-sm); }
}

/* ----- Hero (front page) ----- */
.hero {
	position: relative;
	min-height: 76vh;
	display: flex; align-items: center;
	overflow: hidden;
	isolation: isolate;
}
.hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: -2;
}
.hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,10,12,.45) 0%, rgba(10,10,12,.85) 100%);
	z-index: -1;
}
.hero__inner { padding: 120px 0; max-width: 800px; }
.hero__eyebrow {
	display: inline-block;
	background: var(--c-accent-soft);
	color: var(--c-accent-2);
	padding: 6px 14px;
	border-radius: 999px;
	font-size: .85rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 20px;
}
.hero__title {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	font-weight: 800;
	letter-spacing: -.025em;
	line-height: 1.05;
	margin-bottom: 20px;
}
.hero__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.25rem);
	color: var(--c-text-2);
	max-width: 600px;
	margin-bottom: 32px;
}
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- Page hero (podstrony) ----- */
.page-hero {
	position: relative;
	padding: clamp(60px, 9vw, 120px) 0 clamp(40px, 6vw, 72px);
	background: var(--c-bg-2);
	border-bottom: 1px solid var(--c-line);
	overflow: hidden;
}
.page-hero__bg {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; opacity: .35;
	z-index: 0;
}
.page-hero__overlay {
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(10,10,12,.4) 0%, rgba(10,10,12,.9) 100%);
	z-index: 0;
}
.page-hero__inner { position: relative; z-index: 1; max-width: 800px; }
.page-hero__eyebrow {
	color: var(--c-accent);
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: .85rem;
	margin-bottom: 12px;
}
.page-hero__title { margin-bottom: 16px; }
.page-hero__lead {
	color: var(--c-text-2);
	font-size: clamp(1rem, 1.4vw, 1.2rem);
	max-width: 640px;
	margin-bottom: 28px;
}
.page-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* ----- Segmentacja (kafelki) ----- */
.segm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
}
.segm-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 28px 24px 24px;
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	color: var(--c-text);
	transition: border-color .2s var(--ease), transform .2s var(--ease), background .2s var(--ease);
	position: relative;
}
.segm-card:hover {
	border-color: var(--c-accent);
	transform: translateY(-2px);
	background: var(--c-bg-3);
	color: var(--c-text);
}
.segm-card__icon { font-size: 2rem; margin-bottom: 8px; }
.segm-card__label { font-weight: 700; font-size: 1.15rem; }
.segm-card__desc  { color: var(--c-text-2); font-size: .95rem; }
.segm-card__arrow {
	position: absolute; top: 24px; right: 24px;
	color: var(--c-text-3);
	transition: transform .2s var(--ease), color .2s var(--ease);
}
.segm-card:hover .segm-card__arrow { color: var(--c-accent); transform: translateX(4px); }

/* ----- Bestsellery ----- */
.best-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
}
.best-card {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.best-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.best-card__media { aspect-ratio: 4/3; overflow: hidden; background: var(--c-bg-3); }
.best-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.best-card:hover .best-card__media img { transform: scale(1.05); }
.best-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; gap: 8px; }
.best-card__name { font-size: 1.25rem; margin: 0 0 4px; }
.best-card__lead { color: var(--c-text-2); font-size: .95rem; flex: 1; }
.best-card__meta { color: var(--c-accent); font-size: .85rem; font-weight: 600; }
.best-card__cta { color: var(--c-text); margin-top: 8px; font-weight: 600; }
.best-card__cta:hover { color: var(--c-accent); }

/* ----- Why ICF ----- */
.why-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
}
.why-item {
	display: flex; gap: 16px;
	padding: 24px;
	border-left: 3px solid var(--c-accent);
	background: var(--c-bg-2);
	border-radius: 0 var(--radius) var(--radius) 0;
}
.why-item__icon { font-size: 1.8rem; flex-shrink: 0; }
.why-item__label { margin: 0 0 4px; font-size: 1.05rem; }
.why-item__desc  { color: var(--c-text-2); font-size: .92rem; margin: 0; }

/* ----- Testimonials ----- */
.testimonials {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.testimonial {
	background: var(--c-bg-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 28px;
	margin: 0;
}
.testimonial__rating { color: var(--c-accent); font-size: 1.1rem; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial__text p { margin: 0; font-size: 1.02rem; line-height: 1.55; color: var(--c-text); }
.testimonial__author {
	margin-top: 18px; padding-top: 18px;
	border-top: 1px solid var(--c-line);
	display: flex; flex-direction: column; gap: 2px;
}
.testimonial__author strong { color: var(--c-text); font-size: .95rem; }
.testimonial__author span { color: var(--c-text-3); font-size: .85rem; }

/* ----- IG / aktualności ----- */
.ig-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.ig-card {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--c-bg-3);
}
.ig-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.ig-card:hover img { transform: scale(1.05); }
.ig-card__caption {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 12px 14px;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.85) 100%);
	color: #fff; font-size: .85rem;
	transform: translateY(20%);
	opacity: 0;
	transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.ig-card:hover .ig-card__caption { transform: translateY(0); opacity: 1; }

/* ----- Cennik table ----- */
.cennik-group { margin-bottom: clamp(40px, 5vw, 64px); }
.cennik-group__header { margin-bottom: 24px; }
.cennik-group__header h2 { margin-bottom: 8px; }
.cennik-group__header p { color: var(--c-text-2); }

.cennik-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--c-bg-2);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--c-line);
}
.cennik-table thead {
	background: var(--c-bg-3);
}
.cennik-table th, .cennik-table td {
	padding: 16px 18px;
	text-align: left;
	border-bottom: 1px solid var(--c-line);
}
.cennik-table th { font-weight: 600; font-size: .9rem; color: var(--c-text-2); text-transform: uppercase; letter-spacing: .03em; }
.cennik-table tbody tr:last-child td { border-bottom: 0; }
.cennik-table tbody tr:hover { background: var(--c-bg-3); }

@media (max-width: 720px) {
	.cennik-table thead { display: none; }
	.cennik-table tr { display: block; padding: 16px; border-bottom: 1px solid var(--c-line); }
	.cennik-table tr:last-child { border-bottom: 0; }
	.cennik-table td {
		display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
		padding: 6px 0;
		border: 0;
		font-size: .95rem;
	}
	.cennik-table td::before {
		content: attr(data-th);
		color: var(--c-text-3);
		font-size: .8rem;
		text-transform: uppercase;
		letter-spacing: .04em;
		flex-shrink: 0;
	}
}

/* ----- Cennik info boxes ----- */
.cennik-info {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	margin-top: 40px;
}
.cennik-info__box {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 24px;
}
.cennik-info__box h3 { margin-top: 0; }
.cennik-info__box--promo { border-color: var(--c-accent); background: var(--c-accent-soft); }

/* ----- B2B Sprinter ----- */
.sprinter-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.pkg-card {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 28px;
}
.pkg-card__name { margin: 0 0 8px; }
.pkg-card__lead { color: var(--c-text-2); margin-bottom: 16px; }
.pkg-card__meta {
	list-style: none;
	margin: 0 0 20px;
	padding: 16px 0;
	border-top: 1px solid var(--c-line);
	border-bottom: 1px solid var(--c-line);
}
.pkg-card__meta li { padding: 4px 0; font-size: .95rem; color: var(--c-text-2); }
.pkg-card__meta li strong { color: var(--c-text); }

/* ----- Tor specs ----- */
.specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 0;
	margin: 0;
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.specs__row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid var(--c-line);
}
.specs__row dt { color: var(--c-text-2); font-weight: 500; }
.specs__row dd { margin: 0; color: var(--c-text); font-weight: 600; text-align: right; }

/* ----- Galeria ----- */
.gallery {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 12px;
}
.gallery__item {
	display: block;
	aspect-ratio: 4/3;
	overflow: hidden;
	border-radius: var(--radius-sm);
	background: var(--c-bg-3);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease); }
.gallery__item:hover img { transform: scale(1.05); }

/* ----- Flota ----- */
.fleet-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
}
.fleet-card {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
}
.fleet-card__media { aspect-ratio: 4/3; background: var(--c-bg-3); }
.fleet-card__media img { width: 100%; height: 100%; object-fit: cover; }
.fleet-card__body { padding: 24px; }
.fleet-card__body h3 { margin-top: 0; }
.fleet-card__meta { color: var(--c-accent); font-weight: 600; font-size: .9rem; }

/* ----- Content blocks (uniwersalne) ----- */
.content-blocks { display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.content-block {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}
.content-block--alt { direction: rtl; }
.content-block--alt > * { direction: ltr; }
@media (max-width: 720px) {
	.content-block { grid-template-columns: 1fr; }
	.content-block--alt { direction: ltr; }
}
.content-block__media img {
	border-radius: var(--radius);
	width: 100%;
}
.content-block__body h2 { margin-top: 0; }

/* ----- Prose (treść WYSIWYG, single post, page) ----- */
.prose { color: var(--c-text); }
.prose h2, .prose h3, .prose h4 { margin-top: 1.6em; }
.prose p, .prose ul, .prose ol { font-size: 1.05rem; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .4em; }
.prose a { color: var(--c-accent); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--c-accent-2); }
.prose img { border-radius: var(--radius); margin: 1.4em 0; }
.prose blockquote {
	border-left: 3px solid var(--c-accent);
	padding-left: 20px;
	margin: 1.4em 0;
	font-style: italic;
	color: var(--c-text-2);
}
.prose code {
	background: var(--c-bg-2);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: .9em;
}

/* ----- FAQ ----- */
.faq {
	max-width: 800px;
	margin: 0 auto;
	display: flex; flex-direction: column;
	gap: 8px;
}
.faq__item {
	background: var(--c-bg-3);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	transition: border-color .2s var(--ease);
}
.faq__item[open] { border-color: var(--c-accent); }
.faq__q {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	padding: 18px 22px;
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	color: var(--c-text);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__icon {
	flex-shrink: 0;
	width: 24px; height: 24px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-bg);
	color: var(--c-accent);
	font-weight: 700;
	transition: transform .2s var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(45deg); }
.faq__a { padding: 0 22px 18px; color: var(--c-text-2); }
.faq__a > div > p:first-child { margin-top: 0; }
.faq__a > div > p:last-child { margin-bottom: 0; }

/* ----- Form ----- */
.icf-form {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: clamp(24px, 4vw, 40px);
}
.icf-form__heading { margin-top: 0; }
.icf-form__lead    { color: var(--c-text-2); margin-bottom: 24px; }
.icf-form__hp { display: none; }
.icf-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 640px) { .icf-form__grid { grid-template-columns: 1fr; } }
.icf-form__field { display: flex; flex-direction: column; gap: 6px; }
.icf-form__field--full { grid-column: 1 / -1; }
.icf-form__field span {
	font-size: .85rem;
	color: var(--c-text-2);
	font-weight: 500;
}
.icf-form__field input,
.icf-form__field select,
.icf-form__field textarea {
	width: 100%;
	background: var(--c-bg);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 12px 14px;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color .2s var(--ease);
}
.icf-form__field input:focus,
.icf-form__field select:focus,
.icf-form__field textarea:focus {
	outline: 0;
	border-color: var(--c-accent);
}
.icf-form__consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 10px;
	font-size: .9rem;
	color: var(--c-text-2);
}
.icf-form__consent input {
	width: auto !important;
	margin-top: 4px;
}
.icf-form__consent a { color: var(--c-accent); text-decoration: underline; }

.icf-form__submit { margin-top: 24px; }
.icf-form__submit:disabled { opacity: .6; cursor: progress; }

.icf-form__feedback { margin-top: 16px; min-height: 24px; font-size: .95rem; }
.icf-form__feedback.is-success { color: var(--c-success); }
.icf-form__feedback.is-error   { color: var(--c-error); }

/* ----- Contact page ----- */
.kontakt-grid {
	display: grid;
	grid-template-columns: 360px 1fr;
	gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 880px) { .kontakt-grid { grid-template-columns: 1fr; } }
.kontakt-info__list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 18px;
}
.kontakt-info__list li {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	padding: 18px 20px;
}
.kontakt-info__list strong {
	display: block;
	font-size: .8rem;
	color: var(--c-text-3);
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: 4px;
}
.kontakt-info__list address { font-style: normal; color: var(--c-text); }
.kontakt-info__list a { color: var(--c-text); font-weight: 500; }
.kontakt-info__list a:hover { color: var(--c-accent); }

.kontakt-map { margin-top: clamp(40px, 5vw, 64px); }
.kontakt-map iframe {
	width: 100%;
	min-height: 400px;
	border: 0;
	border-radius: var(--radius);
	display: block;
}

/* ----- Blog ----- */
.post-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 24px;
}
.post-card {
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius);
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.post-card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.post-card__media { aspect-ratio: 16/9; overflow: hidden; background: var(--c-bg-3); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: 22px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.post-card__meta { color: var(--c-text-3); font-size: .85rem; margin: 0; }
.post-card__title { font-size: 1.2rem; margin: 0; }
.post-card__title a { color: var(--c-text); }
.post-card__title a:hover { color: var(--c-accent); }
.post-card__excerpt { color: var(--c-text-2); font-size: .95rem; flex: 1; }
.post-card__link { color: var(--c-accent); font-weight: 600; margin-top: auto; font-size: .9rem; }

.post-tags { color: var(--c-text-3); font-size: .9rem; margin-top: 32px; }
.post-tags a { color: var(--c-accent); }

.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.post-nav__next { text-align: right; }
.post-nav a { color: var(--c-text); font-weight: 500; }
.post-nav a:hover { color: var(--c-accent); }

/* Pagination */
.pagination, .nav-links {
	display: flex; justify-content: center; gap: 6px;
	margin-top: 40px;
	flex-wrap: wrap;
}
.pagination a, .pagination span,
.nav-links a, .nav-links span {
	display: inline-flex;
	min-width: 40px; height: 40px;
	align-items: center; justify-content: center;
	padding: 0 12px;
	background: var(--c-bg-2);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	color: var(--c-text);
	font-weight: 500;
}
.pagination .current, .nav-links .current {
	background: var(--c-accent); color: #fff; border-color: var(--c-accent);
}
.pagination a:hover, .nav-links a:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* Search results */
.search-results { display: flex; flex-direction: column; gap: 24px; margin-top: 24px; }
.search-result { padding: 20px; background: var(--c-bg-2); border-radius: var(--radius); border: 1px solid var(--c-line); }
.search-result h2 { margin: 0 0 4px; font-size: 1.15rem; }
.search-result h2 a { color: var(--c-text); }
.search-result h2 a:hover { color: var(--c-accent); }
.search-result__meta { color: var(--c-text-3); font-size: .85rem; margin: 0 0 8px; }

.searchform {
	display: flex; gap: 8px;
	margin: 0 0 24px;
}
.searchform input {
	flex: 1;
	background: var(--c-bg-2);
	color: var(--c-text);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	padding: 10px 14px;
	font: inherit;
}
.searchform input:focus { outline: 0; border-color: var(--c-accent); }

/* ----- CTA Band (przed stopką) ----- */
.cta-band {
	background: linear-gradient(135deg, var(--c-accent) 0%, #c81f12 100%);
	color: #fff;
	padding: clamp(40px, 5vw, 64px) 0;
}
.cta-band__inner {
	display: flex; align-items: center; justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
}
.cta-band__text h2 { color: #fff; margin: 0 0 8px; }
.cta-band__text p  { color: rgba(255,255,255,.92); margin: 0; }
.cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cta-band .btn--primary {
	background: #fff;
	color: var(--c-bg);
	border-color: #fff;
}
.cta-band .btn--primary:hover { background: var(--c-bg); color: #fff; }
.cta-band .btn--ghost {
	color: #fff; border-color: rgba(255,255,255,.7);
}
.cta-band .btn--ghost:hover { background: rgba(255,255,255,.15); border-color: #fff; color: #fff; }

/* ----- Footer ----- */
.site-footer {
	background: var(--c-bg-2);
	border-top: 1px solid var(--c-line);
	padding-top: clamp(48px, 6vw, 72px);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr 1fr;
	gap: 32px;
	padding-bottom: clamp(32px, 4vw, 48px);
}
@media (max-width: 880px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .site-footer__grid { grid-template-columns: 1fr; } }

.site-footer__logo { margin-bottom: 16px; }
.site-footer__tagline { color: var(--c-text-2); font-size: .95rem; }
.site-footer__socials { display: flex; gap: 8px; margin-top: 16px; }
.site-footer__socials a {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	color: var(--c-text);
	font-size: .8rem;
	font-weight: 700;
}
.site-footer__socials a:hover { border-color: var(--c-accent); color: var(--c-accent); }

.site-footer__col h3 { font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-text); margin: 0 0 16px; }
.site-footer__col h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--c-text-3); margin: 18px 0 8px; }
.site-footer__col address { font-style: normal; color: var(--c-text-2); line-height: 1.7; }
.site-footer__col a { color: var(--c-text-2); }
.site-footer__col a:hover { color: var(--c-accent); }
.site-footer__hours { color: var(--c-text-2); }
.site-footer__menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.site-footer__menu a { color: var(--c-text-2); }
.site-footer__menu a:hover { color: var(--c-accent); }

.site-footer__bar { border-top: 1px solid var(--c-line); padding: 18px 0; }
.site-footer__bar-inner { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__bar small { color: var(--c-text-3); font-size: .85rem; }

/* ----- Reduced motion ----- */
@media (prefers-reduced-motion: reduce) {
	* {
		animation-duration: .001s !important;
		transition-duration: .001s !important;
	}
}

/* ===== style-v2.css ===== */
/* =========================================================================
   ICF Karting — v2 (Apple-grade)
   Wczytywany PO style.css. Dodaje:
   - skalę typograficzną premium
   - reveal-on-scroll
   - hero-mega, marquee, stats-strip, story-pin, big-quote, split
   - smooth easing dla wszystkiego
   ========================================================================= */

:root {
	--ease-apple: cubic-bezier(.16, 1, .3, 1);
	--ease-soft:  cubic-bezier(.4, 0, .2, 1);
	--c-bg-deep:  #060608;
}

html { scroll-behavior: smooth; }
body { background: var(--c-bg-deep); }

/* ----- Premium typografia (override h1/h2) ----- */
.hero-mega h1,
.hero-mega .hero-mega__title {
	font-size: clamp(3rem, 11vw, 9.5rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 0.92;
	margin: 0 0 0.4em;
}
.hero-mega .hero-mega__title em {
	font-style: normal;
	color: var(--c-accent);
	font-weight: 800;
}
.section--xl h2,
.section-title-xl {
	font-size: clamp(2.4rem, 7vw, 5.2rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 0.95;
	max-width: 14ch;
	margin: 0 0 0.4em;
}
.section-title-xl--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-eyebrow {
	display: inline-block;
	color: var(--c-accent);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.lead-xl {
	font-size: clamp(1.1rem, 1.6vw, 1.45rem);
	color: var(--c-text-2);
	max-width: 56ch;
	line-height: 1.45;
	font-weight: 400;
}

/* Section sizing — Apple oddycha */
.section--xl { padding: clamp(80px, 12vw, 200px) 0; }
.section--xxl { padding: clamp(120px, 16vw, 280px) 0; }

/* ===========================================================
   HERO MEGA — Apple-style full bleed, slow zoom
   =========================================================== */
.hero-mega {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-bottom: clamp(48px, 8vh, 120px);
	isolation: isolate;
	background: var(--c-bg-deep);
}
.hero-mega__media {
	position: absolute; inset: 0;
	overflow: hidden;
	z-index: -2;
}
.hero-mega__media img,
.hero-mega__media video {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.08);
	animation: heroZoom 14s var(--ease-apple) forwards;
}
@keyframes heroZoom {
	from { transform: scale(1.18); }
	to   { transform: scale(1);    }
}
.hero-mega__overlay {
	position: absolute; inset: 0;
	background:
		radial-gradient(ellipse at 30% 100%, rgba(0,0,0,.85) 0%, transparent 60%),
		linear-gradient(180deg, rgba(6,6,8,.3) 0%, rgba(6,6,8,.55) 60%, rgba(6,6,8,.95) 100%);
	z-index: -1;
}
.hero-mega__inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); }
.hero-mega__eyebrow {
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,.85);
	font-size: 0.85rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin-bottom: 24px;
	padding: 8px 16px 8px 12px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.14);
	border-radius: 999px;
	backdrop-filter: blur(10px);
}
.hero-mega__eyebrow::before {
	content: '';
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 12px var(--c-accent);
	animation: heroPulse 2s ease-in-out infinite;
}
@keyframes heroPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.4); opacity: 0.6; }
}
.hero-mega__lead {
	font-size: clamp(1.05rem, 1.5vw, 1.4rem);
	color: rgba(255,255,255,.78);
	max-width: 560px;
	line-height: 1.45;
	margin: 0 0 36px;
}
.hero-mega__ctas { display: flex; gap: 14px; flex-wrap: wrap; }

/* Scroll hint */
.hero-mega__scroll {
	position: absolute; left: 50%; bottom: 28px;
	transform: translateX(-50%);
	color: rgba(255,255,255,.6);
	font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	font-weight: 500;
}
.hero-mega__scroll::after {
	content: '';
	width: 1px; height: 36px;
	background: linear-gradient(180deg, rgba(255,255,255,.6), transparent);
	animation: scrollHint 1.8s ease-in-out infinite;
}
@keyframes scrollHint {
	0%, 100% { transform: translateY(0);   opacity: 0.6; }
	50%      { transform: translateY(8px); opacity: 1;   }
}

/* Big premium buttons */
.btn-pill {
	display: inline-flex; align-items: center; gap: 10px;
	padding: 16px 28px;
	border-radius: 999px;
	font-weight: 600; font-size: 1rem;
	border: 1px solid transparent;
	transition: transform .16s var(--ease-apple), background .3s var(--ease-soft), color .3s var(--ease-soft), border-color .3s var(--ease-soft);
	white-space: nowrap;
	letter-spacing: -0.01em;
}
.btn-pill:hover { transform: translateY(-2px); }
/* Emil design-eng: press-feedback — "Buttons must feel responsive". scale(.97) bije inline transform magnetycznego JS. */
.btn-pill:active { transform: scale(.97) !important; }
.btn-pill--primary {
	background: var(--c-accent);
	color: #fff;
	box-shadow: 0 10px 40px -10px var(--c-accent);
}
.btn-pill--primary:hover { background: var(--c-accent-2); color: #fff; box-shadow: 0 14px 50px -10px var(--c-accent); }
.btn-pill--ghost {
	background: rgba(255,255,255,.08);
	color: #fff;
	border-color: rgba(255,255,255,.18);
	backdrop-filter: blur(10px);
}
.btn-pill--ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); color: #fff; }
.btn-pill__arrow { transition: transform .25s var(--ease-apple); display: inline-block; }
.btn-pill:hover .btn-pill__arrow { transform: translateX(4px); }

/* ===========================================================
   REVEAL on scroll
   =========================================================== */
.reveal {
	opacity: 0;
	transform: translateY(48px);
	transition: opacity .9s var(--ease-apple), transform 1s var(--ease-apple);
	will-change: opacity, transform;
}
.reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.reveal--soft {
	transform: translateY(20px);
	transition-duration: .7s;
}
.reveal--scale {
	transform: scale(0.96);
}
.reveal--scale.is-visible {
	transform: scale(1);
}
.reveal--right { transform: translateX(-40px); }
.reveal--right.is-visible { transform: translateX(0); }

/* Stagger children */
.stagger > * {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .8s var(--ease-apple), transform .8s var(--ease-apple);
}
.stagger.is-visible > *:nth-child(1)  { opacity: 1; transform: translateY(0); transition-delay: 0ms;   }
.stagger.is-visible > *:nth-child(2)  { opacity: 1; transform: translateY(0); transition-delay: 90ms;  }
.stagger.is-visible > *:nth-child(3)  { opacity: 1; transform: translateY(0); transition-delay: 180ms; }
.stagger.is-visible > *:nth-child(4)  { opacity: 1; transform: translateY(0); transition-delay: 270ms; }
.stagger.is-visible > *:nth-child(5)  { opacity: 1; transform: translateY(0); transition-delay: 360ms; }
.stagger.is-visible > *:nth-child(6)  { opacity: 1; transform: translateY(0); transition-delay: 450ms; }
.stagger.is-visible > *:nth-child(7)  { opacity: 1; transform: translateY(0); transition-delay: 540ms; }
.stagger.is-visible > *:nth-child(8)  { opacity: 1; transform: translateY(0); transition-delay: 630ms; }

/* ===========================================================
   MARQUEE — auto-scrolling tag strip
   =========================================================== */
.marquee {
	display: flex;
	overflow: hidden;
	width: 100%;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	padding: 8px 0;
}
.marquee__track {
	display: flex;
	flex-shrink: 0;
	gap: 16px;
	padding-right: 16px;
	animation: marqueeScroll 80s linear infinite;
	will-change: transform;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marqueeScroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}
.marquee__item {
	display: inline-flex; align-items: center; gap: 14px;
	padding: 14px 28px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 999px;
	font-size: clamp(1.1rem, 2vw, 1.5rem);
	font-weight: 600;
	letter-spacing: -0.02em;
	white-space: nowrap;
	color: var(--c-text);
}
.marquee__item--accent { color: var(--c-accent); border-color: rgba(255,45,32,0.3); background: rgba(255,45,32,0.08); }
.marquee__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--c-accent); flex-shrink: 0; }

/* ===========================================================
   STATS — duże liczby
   =========================================================== */
.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(24px, 4vw, 56px);
	padding: clamp(48px, 6vw, 96px) 0;
	border-top: 1px solid rgba(255,255,255,.08);
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.stat {
	display: flex; flex-direction: column; gap: 8px;
}
.stat__num {
	font-size: clamp(3rem, 7vw, 5.6rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
	color: var(--c-text);
	background: linear-gradient(180deg, #fff 0%, #888 130%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.stat__num em { font-style: normal; color: var(--c-accent); -webkit-text-fill-color: var(--c-accent); font-size: 0.7em; vertical-align: super; margin-left: 2px; }
.stat__label {
	color: var(--c-text-3);
	font-size: 0.95rem;
	font-weight: 500;
	letter-spacing: 0.02em;
}

/* ===========================================================
   STORY PIN — sticky scroll narrative (3 karty)
   =========================================================== */
.story-pin {
	position: relative;
	background: var(--c-bg-deep);
}
.story-pin__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(48px, 8vw, 120px);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.story-pin__sticky {
	position: sticky; top: 12vh;
	height: 76vh;
	display: flex; align-items: center; justify-content: center;
	z-index: 1;
}
.story-pin__media {
	position: relative;
	width: 100%; height: 100%;
	border-radius: 24px;
	overflow: hidden;
	background: var(--c-bg-2);
}
.story-pin__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .8s var(--ease-apple), transform 1.4s var(--ease-apple);
	transform: scale(1.05);
}
.story-pin__media img.is-active {
	opacity: 1;
	transform: scale(1);
}
.story-pin__steps { display: flex; flex-direction: column; gap: 0; }
.story-pin__step {
	min-height: 88vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.story-pin__step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 8px;
}
.story-pin__step h3 {
	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
}
.story-pin__step p {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	color: var(--c-text-2);
	line-height: 1.55;
	max-width: 44ch;
	margin: 0;
}
.story-pin__step-meta {
	display: flex; gap: 18px; flex-wrap: wrap;
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid rgba(255,255,255,.08);
}
.story-pin__step-meta span { color: var(--c-text-3); font-size: 0.9rem; font-weight: 500; }
.story-pin__step-meta strong { color: var(--c-text); font-weight: 600; display: block; font-size: 1.05rem; margin-top: 2px; }
@media (max-width: 880px) {
	.story-pin__inner { grid-template-columns: 1fr; }
	.story-pin__sticky { position: relative; top: auto; height: 60vh; }
	.story-pin__step { min-height: auto; padding: 60px 0; }
	.story-pin__media img:first-child { opacity: 1; transform: scale(1); }
}

/* ===========================================================
   BIG QUOTE — full bleed pull quote
   =========================================================== */
.big-quote {
	padding: clamp(120px, 16vw, 240px) 0;
	background: var(--c-bg-deep);
	position: relative;
	overflow: hidden;
}
.big-quote::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 80vmax; height: 80vmax;
	background: radial-gradient(circle, rgba(255,45,32,0.12) 0%, transparent 50%);
	z-index: 0;
}
.big-quote__inner {
	position: relative; z-index: 1;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	text-align: center;
}
.big-quote__mark {
	font-size: clamp(4rem, 10vw, 8rem);
	color: var(--c-accent);
	line-height: 0.5;
	margin-bottom: 32px;
	font-family: Georgia, serif;
	font-weight: 700;
}
.big-quote__text {
	font-size: clamp(1.6rem, 4vw, 3.2rem);
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.2;
	color: var(--c-text);
	margin: 0 0 32px;
}
.big-quote__text em { color: var(--c-accent); font-style: normal; }
.big-quote__author {
	font-size: 0.95rem;
	color: var(--c-text-3);
	letter-spacing: 0.04em;
}

/* ===========================================================
   SPLIT — image + text two col, premium
   =========================================================== */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 96px);
	align-items: center;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.split--reverse { direction: rtl; }
.split--reverse > * { direction: ltr; }
@media (max-width: 880px) {
	.split { grid-template-columns: 1fr; }
	.split--reverse { direction: ltr; }
}
.split__media {
	position: relative;
	aspect-ratio: 4/5;
	overflow: hidden;
	border-radius: 24px;
	background: var(--c-bg-2);
}
.split__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease-apple);
}
.split:hover .split__media img { transform: scale(1.03); }
.split__body { padding: 20px 0; }

/* ===========================================================
   CARD-XL — premium product card
   =========================================================== */
.cards-xl {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}
.card-xl {
	position: relative;
	padding: 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--c-bg-2);
	border: 1px solid rgba(255,255,255,.06);
	transition: transform .4s var(--ease-apple), border-color .3s var(--ease-soft);
	min-height: 460px;
	display: flex; flex-direction: column;
	isolation: isolate;
}
.card-xl:hover { transform: translateY(-6px); border-color: rgba(255,255,255,.18); }
.card-xl__media {
	position: relative;
	aspect-ratio: 4/3;
	overflow: hidden;
}
.card-xl__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease-apple);
}
.card-xl:hover .card-xl__media img { transform: scale(1.06); }
.card-xl__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(6,6,8,.6) 100%);
}
.card-xl__body {
	padding: 28px 28px 32px;
	display: flex; flex-direction: column; gap: 8px;
	flex: 1;
}
.card-xl__name {
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0;
	color: var(--c-text);
}
.card-xl__lead {
	color: var(--c-text-2);
	font-size: 0.98rem;
	line-height: 1.5;
	margin: 0;
	flex: 1;
}
.card-xl__meta {
	display: inline-flex;
	color: var(--c-accent);
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	margin-top: 4px;
}
.card-xl__cta {
	display: inline-flex; align-items: center; gap: 6px;
	margin-top: 16px;
	color: var(--c-text);
	font-size: 0.95rem;
	font-weight: 600;
	transition: gap .25s var(--ease-apple), color .25s;
}
.card-xl__cta:hover { gap: 12px; color: var(--c-accent); }

/* ===========================================================
   FEATURE ROW — 3-col atut
   =========================================================== */
.features {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: clamp(28px, 4vw, 56px);
}
.feature {
	display: flex; flex-direction: column; gap: 10px;
}
.feature__icon {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--c-accent-soft), rgba(255,255,255,.04));
	border: 1px solid rgba(255,45,32,0.2);
	color: var(--c-accent);
	font-size: 1.6rem;
	margin-bottom: 12px;
}
.feature h3 {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 4px;
}
.feature p { color: var(--c-text-2); margin: 0; line-height: 1.55; }

/* ===========================================================
   CTA-FINAL — wielki finalny call
   =========================================================== */
.cta-final {
	position: relative;
	padding: clamp(120px, 14vw, 200px) 0;
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #1a0808 100%);
	overflow: hidden;
	text-align: center;
}
.cta-final::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 100vmax; height: 100vmax;
	background: radial-gradient(circle at center, rgba(255,45,32,0.22) 0%, transparent 45%);
}
.cta-final__inner { position: relative; z-index: 1; max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }
.cta-final h2 {
	font-size: clamp(2.4rem, 7vw, 5rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	line-height: 1;
	margin: 0 0 24px;
}
.cta-final p {
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	color: var(--c-text-2);
	margin: 0 0 40px;
}
.cta-final__actions { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ===========================================================
   TESTIMONIALS v2 (premium)
   =========================================================== */
.testimonials-v2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
}
.testimonial-v2 {
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 24px;
	padding: 36px;
	margin: 0;
	display: flex; flex-direction: column;
	transition: border-color .3s var(--ease-soft), transform .4s var(--ease-apple);
}
.testimonial-v2:hover { border-color: rgba(255,45,32,0.3); transform: translateY(-4px); }
.testimonial-v2__rating { color: var(--c-accent); font-size: 1rem; letter-spacing: 4px; margin-bottom: 20px; }
.testimonial-v2__text {
	font-size: 1.15rem;
	line-height: 1.5;
	color: var(--c-text);
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.01em;
	flex: 1;
}
.testimonial-v2__author {
	margin-top: 28px; padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.08);
	display: flex; flex-direction: column; gap: 2px;
}
.testimonial-v2__author strong { color: var(--c-text); font-weight: 600; font-size: 0.98rem; }
.testimonial-v2__author span { color: var(--c-text-3); font-size: 0.88rem; }

/* ===========================================================
   HEADER v2 — minimal, blur, shrink on scroll
   =========================================================== */
.site-header {
	background: rgba(6, 6, 8, 0.72);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom-color: rgba(255,255,255,.06);
	transition: padding .3s var(--ease-soft);
}
.site-header.is-scrolled { background: rgba(6, 6, 8, 0.92); }

/* ===========================================================
   Reduced motion
   =========================================================== */
@media (prefers-reduced-motion: reduce) {
	.reveal, .stagger > * { opacity: 1 !important; transform: none !important; }
	.marquee__track, .hero-mega__media img, .hero-mega__eyebrow::before, .hero-mega__scroll::after {
		animation: none !important;
	}
}

/* ===== style-v3.css ===== */
/* =========================================================================
   ICF Karting — v3 (the masterpiece pass)
   Wczytywany PO style.css i style-v2.css.
   Dodaje: bento, magazine-gallery, persona-stories, leaderboard, faq-premium,
   map-section, sticky-booking-bar, magnetic, timeline, badges, hero refinements.
   ========================================================================= */

:root {
	--c-warm:        #1a0e0d;          /* warm dark */
	--c-glass:       rgba(255,255,255,.05);
	--c-glass-line:  rgba(255,255,255,.10);
	--c-glass-line-2:rgba(255,255,255,.18);
	--ease-spring:   cubic-bezier(.34, 1.56, .64, 1);
	--blur-glass:    saturate(160%) blur(20px);
}

/* Smoother selection */
::selection { background: var(--c-accent); color: #fff; }

/* Body now uses warm-tinged background */
body {
	background: radial-gradient(ellipse at top, #0a0a0c 0%, var(--c-bg-deep) 60%);
}

/* Refined scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--c-bg-deep); }
::-webkit-scrollbar-thumb { background: #25252a; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #35353a; }

/* ===========================================================
   STICKY BOOKING BAR — pojawia się po hero
   =========================================================== */
.booking-bar {
	position: fixed;
	left: 16px; right: 16px; bottom: 16px;
	z-index: 90;
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 14px 14px 14px 24px;
	background: rgba(15, 15, 18, .85);
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 999px;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,.7);
	transform: translateY(160%);
	transition: transform .5s var(--ease-apple);
	max-width: 920px;
	margin: 0 auto;
}
.booking-bar.is-visible { transform: translateY(0); }
.booking-bar__text {
	display: flex; flex-direction: column;
	min-width: 0;
}
.booking-bar__title {
	font-size: 0.95rem; font-weight: 600;
	color: var(--c-text); letter-spacing: -0.01em;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.booking-bar__sub {
	font-size: 0.78rem; color: var(--c-text-3);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.booking-bar__actions { display: flex; gap: 8px; flex-shrink: 0; }
.booking-bar .btn-pill { padding: 12px 20px; font-size: 0.9rem; }
@media (max-width: 640px) {
	.booking-bar { left: 8px; right: 8px; bottom: 8px; padding: 10px 10px 10px 16px; }
	.booking-bar__text { display: none; }
	.booking-bar__actions { width: 100%; justify-content: space-between; }
}

/* ===========================================================
   HERO TITLE LETTER REVEAL
   =========================================================== */
.hero-mega__title .word {
	display: inline-block;
	overflow: hidden;
	vertical-align: top;
}
.hero-mega__title .word > span {
	display: inline-block;
	transform: translateY(110%);
	transition: transform 1s var(--ease-apple);
}
.hero-mega__title.is-revealed .word > span {
	transform: translateY(0);
}
.hero-mega__title .word > span { transition-delay: 0ms; }
.hero-mega__title .word:nth-child(2) > span { transition-delay: 80ms; }
.hero-mega__title .word:nth-child(3) > span { transition-delay: 160ms; }
.hero-mega__title .word:nth-child(4) > span { transition-delay: 240ms; }
.hero-mega__title .word:nth-child(5) > span { transition-delay: 320ms; }
.hero-mega__title .word:nth-child(6) > span { transition-delay: 400ms; }
.hero-mega__title .word:nth-child(7) > span { transition-delay: 480ms; }
.hero-mega__title .word:nth-child(8) > span { transition-delay: 560ms; }

/* Top tag w hero — Google rating */
.hero-mega__rating {
	position: absolute;
	top: 50%; right: clamp(16px, 4vw, 64px);
	transform: translateY(-50%);
	display: none; /* Pokazuje się tylko na desktopie */
	flex-direction: column; align-items: flex-end; gap: 8px;
	padding: 18px 22px;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 18px;
	backdrop-filter: var(--blur-glass);
	z-index: 1;
}
@media (min-width: 1100px) { .hero-mega__rating { display: flex; } }
.hero-mega__rating-num {
	font-size: 2.4rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1;
	color: #fff;
}
.hero-mega__rating-stars { color: var(--c-accent); font-size: 1rem; letter-spacing: 2px; }
.hero-mega__rating-label { font-size: 0.78rem; color: rgba(255,255,255,.7); letter-spacing: 0.02em; }

/* ===========================================================
   BENTO GRID — Apple style mosaic
   =========================================================== */
.bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(220px, auto);
	gap: 16px;
}
@media (max-width: 880px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
}
.bento-cell {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	background: var(--c-bg-2);
	border: 1px solid var(--c-glass-line);
	transition: transform .5s var(--ease-apple), border-color .3s var(--ease-soft);
	min-height: 220px;
	isolation: isolate;
}
.bento-cell:hover { transform: translateY(-4px); border-color: var(--c-glass-line-2); }
.bento-cell--feature   { grid-column: span 2; grid-row: span 2; }
.bento-cell--wide      { grid-column: span 2; }
.bento-cell--tall      { grid-row: span 2; }
@media (max-width: 880px) {
	.bento-cell--feature { grid-column: span 2; grid-row: span 2; }
	.bento-cell--wide    { grid-column: span 2; }
	.bento-cell--tall    { grid-column: span 1; grid-row: span 2; }
}
.bento-cell__media {
	position: absolute; inset: 0;
	z-index: -1;
	overflow: hidden;
}
.bento-cell__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1s var(--ease-apple);
}
.bento-cell:hover .bento-cell__media img { transform: scale(1.06); }
.bento-cell__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(6,6,8,.85) 100%);
}
.bento-cell__body {
	position: relative;
	padding: clamp(20px, 2.6vw, 32px);
	height: 100%;
	display: flex; flex-direction: column;
	justify-content: flex-end;
	gap: 4px;
}
.bento-cell__eyebrow {
	color: var(--c-accent);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	margin-bottom: 4px;
}
.bento-cell__title {
	font-size: clamp(1.2rem, 2vw, 1.8rem);
	font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
	color: #fff; margin: 0;
}
.bento-cell--feature .bento-cell__title {
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	max-width: 18ch;
}
.bento-cell__lead {
	color: rgba(255,255,255,.78);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 6px 0 0;
}
.bento-cell--feature .bento-cell__lead {
	font-size: 1.05rem;
	max-width: 36ch;
}
.bento-cell__cta {
	display: inline-flex; align-items: center; gap: 6px;
	color: #fff; font-weight: 600; font-size: 0.92rem;
	margin-top: 14px;
	transition: gap .25s var(--ease-apple);
}
.bento-cell:hover .bento-cell__cta { gap: 12px; }
.bento-cell__cta::after { content: '→'; }

/* Bento-cell: variant bez obrazka — solid card */
.bento-cell--solid { background: var(--c-bg-2); }
.bento-cell--solid .bento-cell__media { display: none; }
.bento-cell--solid .bento-cell__body { justify-content: space-between; }

/* Bento — leaderboard variant */
.bento-cell--board { padding: 0; }
.bento-cell--board .bento-cell__body { justify-content: flex-start; padding-bottom: 16px; }
.lb-list {
	list-style: none; margin: 16px 0 0; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.lb-row {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
}
.lb-row:last-child { border-bottom: 0; }
.lb-row__pos {
	font-weight: 700; font-size: 0.9rem;
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}
.lb-row--top1 .lb-row__pos { color: var(--c-accent); }
.lb-row__name { font-weight: 500; font-size: 0.95rem; color: #fff; }
.lb-row__name small { display: block; color: var(--c-text-3); font-size: 0.78rem; font-weight: 400; }
.lb-row__time {
	font-variant-numeric: tabular-nums;
	font-weight: 700; font-size: 1rem; color: #fff;
	letter-spacing: -0.01em;
}
.lb-row--top1 .lb-row__time { color: var(--c-accent); }

/* Bento — testimonial variant */
.bento-cell--quote .bento-cell__media { display: none; }
.bento-cell--quote {
	background: linear-gradient(135deg, rgba(255,45,32,0.18) 0%, rgba(20,20,24,1) 70%);
}
.bento-cell--quote .bento-cell__body { justify-content: space-between; }
.bento-cell--quote blockquote {
	font-size: 1.05rem; line-height: 1.5;
	font-weight: 500; letter-spacing: -0.01em;
	margin: 0; color: #fff;
}
.bento-cell--quote cite {
	font-style: normal;
	color: rgba(255,255,255,.7);
	font-size: 0.85rem;
}

/* Bento — slot widget variant */
.bento-cell--slot .bento-cell__media { display: none; }
.bento-cell--slot { background: linear-gradient(180deg, #0f0f12 0%, #16161b 100%); }
.bento-cell--slot .bento-cell__body { justify-content: space-between; }
.slot-pills {
	display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px;
}
.slot-pill {
	padding: 8px 14px;
	border: 1px solid var(--c-glass-line);
	border-radius: 999px;
	font-size: 0.85rem; font-weight: 500;
	color: var(--c-text);
	background: rgba(255,255,255,.04);
	transition: border-color .25s var(--ease-soft), color .25s var(--ease-soft);
	cursor: pointer;
}
.slot-pill:hover { border-color: var(--c-accent); color: var(--c-accent); }
.slot-pill--unavail { opacity: 0.4; pointer-events: none; text-decoration: line-through; }

/* ===========================================================
   PROCESS TIMELINE — "Twoja wizyta krok po kroku"
   =========================================================== */
.timeline {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	position: relative;
	margin-top: 60px;
}
@media (max-width: 880px) { .timeline { grid-template-columns: 1fr; gap: 24px; } }

.timeline::before {
	content: '';
	position: absolute;
	top: 28px; left: 5%; right: 5%;
	height: 2px;
	background: linear-gradient(90deg, var(--c-accent) 0%, rgba(255,45,32,0.25) 100%);
	z-index: 0;
}
@media (max-width: 880px) { .timeline::before { display: none; } }

.timeline__step {
	position: relative;
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
	padding: 0 16px;
	z-index: 1;
}
@media (max-width: 880px) { .timeline__step { align-items: flex-start; text-align: left; padding: 0; } }
.timeline__num {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-bg-deep);
	border: 2px solid var(--c-accent);
	color: var(--c-accent);
	font-weight: 700; font-size: 1.1rem;
	margin-bottom: 20px;
	font-variant-numeric: tabular-nums;
}
.timeline__step h3 {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: #fff;
}
.timeline__step p {
	color: var(--c-text-2);
	font-size: 0.95rem;
	line-height: 1.5;
	margin: 0;
	max-width: 28ch;
}

/* ===========================================================
   PERSONA STORIES — duże bloki dla każdego segmentu
   =========================================================== */
.personas {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
@media (max-width: 720px) { .personas { grid-template-columns: 1fr; } }

.persona {
	position: relative;
	min-height: 460px;
	border-radius: 24px;
	overflow: hidden;
	display: flex; flex-direction: column; justify-content: flex-end;
	padding: clamp(28px, 3.5vw, 48px);
	transition: transform .5s var(--ease-apple);
	isolation: isolate;
	color: #fff;
	border: 1px solid var(--c-glass-line);
}
.persona:hover { transform: translateY(-4px); }
.persona__media {
	position: absolute; inset: 0; z-index: -1;
	overflow: hidden;
}
.persona__media img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1s var(--ease-apple);
}
.persona:hover .persona__media img { transform: scale(1.06); }
.persona__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(6,6,8,.85) 70%, rgba(6,6,8,.97) 100%);
}
.persona__eyebrow {
	color: var(--c-accent);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 12px;
}
.persona__title {
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700; letter-spacing: -0.025em; line-height: 1.1;
	margin: 0 0 12px;
}
.persona__lead {
	color: rgba(255,255,255,.85);
	font-size: 1rem;
	line-height: 1.55;
	margin: 0 0 20px;
	max-width: 40ch;
}
.persona__chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.persona__chip {
	font-size: 0.78rem;
	padding: 6px 12px;
	border-radius: 999px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.16);
	color: #fff;
	font-weight: 500;
}
.persona__cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 22px;
	border-radius: 999px;
	background: rgba(255,255,255,.95);
	color: #0a0a0c;
	font-weight: 600; font-size: 0.92rem;
	transition: gap .25s var(--ease-apple), background .3s;
	align-self: flex-start;
}
.persona__cta:hover { gap: 14px; background: #fff; color: #0a0a0c; }

/* ===========================================================
   MAGAZINE GALLERY — asymmetric mosaic
   =========================================================== */
.gallery-mag {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 180px;
	gap: 12px;
}
@media (max-width: 880px) { .gallery-mag { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; } }

.gallery-mag__item {
	position: relative;
	overflow: hidden;
	border-radius: 16px;
	background: var(--c-bg-3);
	cursor: pointer;
}
.gallery-mag__item img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1s var(--ease-apple), filter .4s;
}
.gallery-mag__item:hover img { transform: scale(1.06); filter: brightness(1.1); }
.gallery-mag__item::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.6) 100%);
	opacity: 0;
	transition: opacity .3s;
}
.gallery-mag__item:hover::after { opacity: 1; }
.gallery-mag__caption {
	position: absolute; left: 16px; bottom: 16px;
	color: #fff; font-size: 0.85rem; font-weight: 500;
	letter-spacing: -0.01em;
	opacity: 0; transform: translateY(8px);
	transition: opacity .3s var(--ease-apple), transform .3s var(--ease-apple);
	z-index: 1;
}
.gallery-mag__item:hover .gallery-mag__caption { opacity: 1; transform: translateY(0); }

/* Spany dla różnych pozycji w siatce — magazine feel */
.gallery-mag__item--w2 { grid-column: span 2; }
.gallery-mag__item--w3 { grid-column: span 3; }
.gallery-mag__item--h2 { grid-row: span 2; }
.gallery-mag__item--h3 { grid-row: span 3; }
@media (max-width: 880px) {
	.gallery-mag__item--w3 { grid-column: span 2; }
	.gallery-mag__item--h3 { grid-row: span 2; }
}

/* ===========================================================
   FAQ PREMIUM
   =========================================================== */
.faq-premium {
	max-width: 880px; margin: 0 auto;
	display: flex; flex-direction: column; gap: 12px;
}
.faq-premium details {
	background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 18px;
	transition: border-color .3s var(--ease-soft), background .3s;
	overflow: hidden;
}
.faq-premium details[open] {
	border-color: rgba(255,45,32,0.4);
	background: linear-gradient(180deg, rgba(255,45,32,0.06) 0%, rgba(255,255,255,.01) 100%);
}
.faq-premium summary {
	display: flex; justify-content: space-between; align-items: center;
	gap: 16px;
	padding: 22px 26px;
	cursor: pointer;
	font-weight: 600; font-size: 1.05rem;
	letter-spacing: -0.01em;
	color: #fff;
	list-style: none;
}
.faq-premium summary::-webkit-details-marker { display: none; }
.faq-premium__icon {
	flex-shrink: 0;
	width: 32px; height: 32px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,.08);
	color: #fff;
	font-weight: 300;
	font-size: 1.4rem;
	transition: transform .3s var(--ease-spring), background .25s;
	position: relative;
}
.faq-premium__icon::before, .faq-premium__icon::after {
	content: '';
	position: absolute;
	background: currentColor;
	border-radius: 1px;
	transition: transform .3s var(--ease-spring);
}
.faq-premium__icon::before { width: 12px; height: 2px; }
.faq-premium__icon::after { width: 2px; height: 12px; }
.faq-premium details[open] .faq-premium__icon { background: var(--c-accent); color: #fff; }
.faq-premium details[open] .faq-premium__icon::after { transform: rotate(90deg); opacity: 0; }
.faq-premium__answer {
	padding: 0 26px 24px;
	color: var(--c-text-2);
	font-size: 1rem;
	line-height: 1.6;
	max-width: 70ch;
}
.faq-premium__answer p:first-child { margin-top: 0; }
.faq-premium__answer p:last-child { margin-bottom: 0; }

/* ===========================================================
   MAP SECTION — dark-themed map + contact card
   =========================================================== */
.map-section {
	position: relative;
	min-height: 540px;
	background: var(--c-bg-deep);
	overflow: hidden;
}
.map-section__embed {
	position: absolute; inset: 0;
}
.map-section__embed iframe {
	width: 100%; height: 100%;
	border: 0;
	filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.9) saturate(0.7);
}
.map-section__embed::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(135deg, rgba(6,6,8,.9) 0%, rgba(6,6,8,.5) 50%, transparent 100%);
	pointer-events: none;
}
.map-card {
	position: relative;
	max-width: 1240px; margin: 0 auto;
	padding: clamp(60px, 8vw, 120px) var(--gutter);
	display: flex; align-items: center;
	min-height: 540px;
	z-index: 1;
}
.map-card__inner {
	max-width: 460px;
	padding: clamp(28px, 3vw, 40px);
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	backdrop-filter: var(--blur-glass);
	-webkit-backdrop-filter: var(--blur-glass);
}
.map-card__eyebrow {
	color: var(--c-accent);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.14em; text-transform: uppercase;
	margin-bottom: 12px;
}
.map-card h2 {
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	font-weight: 700; letter-spacing: -0.025em;
	margin: 0 0 16px;
	color: #fff;
}
.map-card__addr {
	font-style: normal;
	font-size: 1.05rem;
	color: var(--c-text);
	margin-bottom: 20px;
	line-height: 1.5;
}
.map-card__items {
	list-style: none;
	margin: 0 0 24px;
	padding: 18px 0;
	border-top: 1px solid var(--c-glass-line);
	border-bottom: 1px solid var(--c-glass-line);
	display: flex; flex-direction: column; gap: 8px;
}
.map-card__items li {
	display: flex; justify-content: space-between; gap: 16px;
	font-size: 0.95rem;
}
.map-card__items strong { color: var(--c-text-3); font-weight: 500; }
.map-card__items a { color: var(--c-text); font-weight: 500; }
.map-card__items a:hover { color: var(--c-accent); }
.map-card__actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ===========================================================
   COMPARISON / "Co wybrać"
   =========================================================== */
.compare {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 880px) { .compare { grid-template-columns: 1fr; } }
.compare__col {
	background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	padding: 32px;
	display: flex; flex-direction: column;
	transition: border-color .3s, transform .4s var(--ease-apple);
}
.compare__col:hover { border-color: rgba(255,255,255,.18); transform: translateY(-4px); }
.compare__col--accent {
	border-color: var(--c-accent);
	background: linear-gradient(180deg, rgba(255,45,32,0.08) 0%, rgba(255,255,255,.01) 100%);
	position: relative;
}
.compare__col--accent::before {
	content: 'Najczęściej wybierane';
	position: absolute; top: -12px; left: 50%;
	transform: translateX(-50%);
	background: var(--c-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 4px 12px;
	border-radius: 999px;
	white-space: nowrap;
}
.compare__name {
	font-size: 0.85rem; color: var(--c-text-3);
	letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500;
	margin-bottom: 8px;
}
.compare__title {
	font-size: 1.6rem; font-weight: 700; letter-spacing: -0.025em;
	margin: 0 0 16px; color: #fff;
}
.compare__price {
	font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em;
	color: var(--c-accent); margin-bottom: 4px;
}
.compare__price-note { color: var(--c-text-3); font-size: 0.85rem; margin-bottom: 24px; }
.compare__list {
	list-style: none; margin: 0 0 28px; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
	flex: 1;
}
.compare__list li {
	display: flex; align-items: flex-start; gap: 10px;
	font-size: 0.95rem; color: var(--c-text);
}
.compare__list li::before {
	content: '✓';
	color: var(--c-accent);
	font-weight: 700;
	flex-shrink: 0;
}

/* ===========================================================
   STAT/BADGE STRIP — premium
   =========================================================== */
.badges-strip {
	display: flex; gap: 12px; flex-wrap: wrap;
	justify-content: center;
	margin-top: 32px;
}
.badge {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 999px;
	font-size: 0.88rem;
	color: var(--c-text);
	backdrop-filter: var(--blur-glass);
}
.badge__icon { color: var(--c-accent); }

/* ===========================================================
   Premium card (fix to v2 cards-xl)
   =========================================================== */
.card-xl { min-height: 480px; }
.card-xl__media { aspect-ratio: 16/11; }
.card-xl__name { font-size: 1.55rem; }

/* ===========================================================
   SECTION DIVIDER — fancy gradient line
   =========================================================== */
.divider-grad {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.18) 50%, transparent 100%);
	margin: 0 auto;
	max-width: 600px;
}

/* ===========================================================
   Tweaki finalne
   =========================================================== */
.section--xl { padding: clamp(96px, 13vw, 220px) 0; }
.hero-mega { padding-bottom: clamp(80px, 12vh, 160px); }

/* Footer refinement */
.site-footer { background: linear-gradient(180deg, var(--c-bg-deep) 0%, #050507 100%); border-top: 1px solid rgba(255,255,255,.06); }
.cta-band { display: none; } /* w v3 mamy własny cta-final */

/* Chip tags w hero */
.hero-mega__features {
	display: flex; gap: 18px; flex-wrap: wrap;
	margin-top: 32px;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,.12);
	max-width: 600px;
}
.hero-mega__feature {
	display: inline-flex; align-items: center; gap: 8px;
	color: rgba(255,255,255,.78);
	font-size: 0.85rem;
	font-weight: 500;
}
.hero-mega__feature::before {
	content: '';
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--c-accent);
}

/* Section bg variants */
.section--bg-warm { background: linear-gradient(180deg, var(--c-bg-deep) 0%, #0d0709 100%); }
.section--bg-flat { background: #0a0a0c; }
.section--bg-deeper { background: var(--c-bg-deep); }

/* Hero rating mobile fallback */
@media (max-width: 1099px) {
	.hero-mega__inner { padding-bottom: 8px; }
}

/* ===== style-v4.css ===== */
/* =========================================================================
   ICF Karting — v4 (the masterpiece, final pass)
   Wczytywany PO style.css, style-v2.css, style-v3.css.
   Dodaje: logo branding, video hero, kinetic typography, card spotlight,
   sticky chapter nav, live indicator, top scroll progress bar,
   refined motion choreography.
   ========================================================================= */

:root {
	--c-live: #2ee06b;
	--ease-fluid: cubic-bezier(.22, 1, .36, 1);
	--ease-luxe:  cubic-bezier(.6, 0, .2, 1);
}

/* Smoother body baseline */
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body { overscroll-behavior-y: none; }

/* ===========================================================
   TOP PROGRESS BAR — page scroll indicator
   =========================================================== */
.scroll-progress {
	position: fixed;
	top: 0; left: 0;
	height: 2px;
	width: 0%;
	background: linear-gradient(90deg, var(--c-accent), var(--c-accent-2));
	z-index: 1000;
	transition: width .08s linear;
	pointer-events: none;
	box-shadow: 0 0 12px var(--c-accent);
}

/* ===========================================================
   LOGO refinements
   =========================================================== */
.site-logo img {
	height: 38px; width: auto;
	display: block;
	transition: opacity .3s var(--ease-soft);
}
.site-logo--hero img { height: 48px; }
.site-header.is-scrolled .site-logo img { height: 32px; }

/* Hide text fallback when img is present */
.site-logo:has(img) .site-logo__text { display: none; }

/* ===========================================================
   LIVE INDICATOR — "otwarte teraz" w headerze
   =========================================================== */
.live-pill {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 6px 12px 6px 10px;
	background: rgba(46, 224, 107, .12);
	border: 1px solid rgba(46, 224, 107, .35);
	border-radius: 999px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--c-live);
	letter-spacing: -0.005em;
	white-space: nowrap;
}
.live-pill__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-live);
	box-shadow: 0 0 8px var(--c-live);
	animation: livePulse 2s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes livePulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50%      { transform: scale(1.5); opacity: 0.5; }
}

@media (max-width: 880px) {
	.live-pill { display: none; }
}

/* ===========================================================
   HERO — VIDEO version, full bleed
   =========================================================== */
.hero-mega--video .hero-mega__media {
	background: #000;
}
.hero-mega--video video {
	width: 100%; height: 100%;
	object-fit: cover;
	transform: scale(1.05);
	animation: heroVideoFade 1.6s var(--ease-fluid) forwards;
}
@keyframes heroVideoFade {
	from { opacity: 0; transform: scale(1.12); }
	to   { opacity: 1; transform: scale(1.05); }
}

/* Kinetic background type — wielki napis "ICF" w tle hero */
.hero-mega__kinetic {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: -1;
	pointer-events: none;
	overflow: hidden;
}
.hero-mega__kinetic-text {
	font-size: clamp(20rem, 36vw, 44rem);
	font-weight: 900;
	letter-spacing: -0.06em;
	line-height: 0.8;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.08);
	text-stroke: 1px rgba(255,255,255,.08);
	white-space: nowrap;
	user-select: none;
	transform: translateY(20%);
}

/* Hero overlay refinement — ciemniejszy gradient */
.hero-mega--video .hero-mega__overlay {
	background:
		radial-gradient(ellipse at 25% 100%, rgba(0,0,0,.92) 0%, transparent 65%),
		linear-gradient(180deg, rgba(6,6,8,.45) 0%, rgba(6,6,8,.65) 50%, rgba(6,6,8,.95) 100%);
}

/* ===========================================================
   STICKY CHAPTER NAV — boczny indicator po lewej
   =========================================================== */
.chapter-nav {
	position: fixed;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: none;
}
@media (min-width: 1280px) { .chapter-nav { display: flex; flex-direction: column; gap: 14px; } }

.chapter-nav__dot {
	display: block;
	width: 10px; height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.18);
	border: 0;
	cursor: pointer;
	padding: 0;
	transition: background .25s var(--ease-soft), transform .25s var(--ease-spring);
	position: relative;
}
.chapter-nav__dot:hover {
	background: rgba(255,255,255,.4);
	transform: scale(1.3);
}
.chapter-nav__dot.is-active {
	background: var(--c-accent);
	transform: scale(1.4);
}
.chapter-nav__label {
	position: absolute;
	left: 22px; top: 50%;
	transform: translateY(-50%);
	background: rgba(15,15,18,.92);
	color: #fff;
	padding: 6px 12px;
	border-radius: 8px;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity .2s var(--ease-soft), transform .2s var(--ease-spring);
	backdrop-filter: blur(12px);
	border: 1px solid rgba(255,255,255,.12);
}
.chapter-nav__dot:hover .chapter-nav__label {
	opacity: 1;
	transform: translateY(-50%) translateX(4px);
}

/* ===========================================================
   CARD SPOTLIGHT — Linear-style cursor follow
   =========================================================== */
.spotlight {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.spotlight::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 45, 32, 0.18) 0%,
		transparent 50%);
	opacity: 0;
	transition: opacity .35s var(--ease-soft);
	pointer-events: none;
	z-index: 0;
}
.spotlight:hover::before { opacity: 1; }

/* Apply to bento and persona cards by default */
.bento-cell, .persona, .compare__col, .testimonial-v2, .feature, .timeline__step {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.bento-cell::before, .persona::before, .compare__col::before, .testimonial-v2::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 45, 32, 0.16) 0%,
		transparent 55%);
	opacity: 0;
	transition: opacity .35s var(--ease-soft);
	pointer-events: none;
	z-index: 0;
}
.bento-cell:hover::before, .persona:hover::before, .compare__col:hover::before, .testimonial-v2:hover::before {
	opacity: 1;
}
.bento-cell > *, .persona > *, .compare__col > *, .testimonial-v2 > * { position: relative; z-index: 1; }
.bento-cell__media, .persona__media { z-index: -1 !important; }

/* ===========================================================
   VIDEO TILE — w bento i innych miejscach
   =========================================================== */
.bento-cell--video {
	background: #000;
}
.bento-cell--video .bento-cell__media video {
	width: 100%; height: 100%;
	object-fit: cover;
}
.bento-cell--video .bento-cell__media::after {
	background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.85) 100%);
}

/* Mini "▶" badge na video tile */
.video-badge {
	position: absolute;
	top: 16px; left: 16px;
	display: inline-flex; align-items: center; gap: 6px;
	padding: 5px 10px 5px 8px;
	background: rgba(0,0,0,.55);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 600;
	color: #fff;
	letter-spacing: 0.04em;
	backdrop-filter: blur(8px);
	z-index: 1;
	text-transform: uppercase;
}
.video-badge::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 6px var(--c-accent);
	animation: livePulse 2s ease-in-out infinite;
}

/* ===========================================================
   AMBIENT VIDEO SECTION — pełnoekranowy między-przerywnik
   =========================================================== */
.ambient {
	position: relative;
	height: 70vh;
	min-height: 480px;
	overflow: hidden;
	background: #000;
}
.ambient video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.85;
}
.ambient::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, transparent 30%, transparent 70%, var(--c-bg-deep) 100%);
	pointer-events: none;
}
.ambient__quote {
	position: absolute;
	left: 0; right: 0; bottom: 12%;
	z-index: 2;
	text-align: center;
	padding: 0 var(--gutter);
}
.ambient__quote h2 {
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 800;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0;
	color: #fff;
	max-width: 18ch;
	margin-inline: auto;
	text-shadow: 0 4px 30px rgba(0,0,0,.5);
}
.ambient__quote h2 em { color: var(--c-accent); font-style: normal; }

/* ===========================================================
   FLEET SHOWCASE — refinement (3 karty z głębią)
   =========================================================== */
.fleet-counter {
	display: inline-flex; align-items: baseline; gap: 12px;
	font-family: var(--font-sans);
	margin-bottom: 16px;
}
.fleet-counter__big {
	font-size: clamp(4rem, 8vw, 6.4rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
	background: linear-gradient(180deg, #fff, #888);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.fleet-counter__label {
	font-size: 1rem;
	color: var(--c-text-2);
	font-weight: 500;
	letter-spacing: -0.01em;
}
.fleet-breakdown {
	display: flex; gap: 14px; flex-wrap: wrap;
	margin-top: 24px;
}
.fleet-breakdown span {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 8px 14px;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 999px;
	font-size: 0.88rem;
	color: var(--c-text);
	font-weight: 500;
}
.fleet-breakdown strong { color: var(--c-accent); font-weight: 700; }

/* ===========================================================
   KARNETY/PASS — nowa sekcja z pakietami przejazdów
   =========================================================== */
.passes {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 40px;
}
@media (max-width: 880px) { .passes { grid-template-columns: 1fr; } }
.pass {
	padding: 32px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	display: flex; flex-direction: column;
	transition: border-color .3s, transform .4s var(--ease-apple);
	position: relative;
}
.pass:hover { border-color: rgba(255,45,32,0.3); transform: translateY(-4px); }
.pass--feat {
	background: linear-gradient(180deg, rgba(255,45,32,0.1) 0%, rgba(255,255,255,.01) 100%);
	border-color: rgba(255,45,32,0.3);
}
.pass__num {
	font-size: 3.6rem; font-weight: 800;
	letter-spacing: -0.045em; line-height: 1;
	color: #fff;
	margin: 0 0 4px;
}
.pass__num em {
	color: var(--c-text-3); font-style: normal; font-size: 1.4rem;
	font-weight: 600; margin-left: 4px;
}
.pass__name { color: var(--c-text-2); font-size: 0.95rem; margin-bottom: 18px; }
.pass__price { font-size: 1.6rem; font-weight: 700; color: var(--c-accent); margin: 0 0 4px; letter-spacing: -0.02em; }
.pass__per { color: var(--c-text-3); font-size: 0.85rem; margin-bottom: 24px; font-variant-numeric: tabular-nums; }
.pass__save {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid rgba(255,255,255,.08);
	font-size: 0.85rem;
	color: var(--c-live);
	font-weight: 600;
}
.pass__save::before { content: '↓ '; }

/* ===========================================================
   STAT REFINEMENT — bigger, more impact
   =========================================================== */
.stat__num {
	font-size: clamp(3.6rem, 8vw, 6.4rem);
}

/* ===========================================================
   HERO refinements — eyebrow with live indicator
   =========================================================== */
.hero-mega__eyebrow--live::before {
	background: var(--c-live);
	box-shadow: 0 0 12px var(--c-live);
}

/* Hero title — better legibility on video */
.hero-mega--video .hero-mega__title {
	text-shadow: 0 4px 40px rgba(0,0,0,.5);
}

/* ===========================================================
   PRICING TABLE LE MANS — polished
   =========================================================== */
.lemans-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 720px) { .lemans-grid { grid-template-columns: 1fr; } }
.lemans-card {
	padding: 32px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	transition: border-color .3s, transform .4s var(--ease-apple);
}
.lemans-card:hover { border-color: rgba(255,45,32,0.3); transform: translateY(-4px); }
.lemans-card__time {
	font-size: 3rem; font-weight: 800;
	letter-spacing: -0.04em;
	color: #fff;
	margin: 0 0 8px;
}
.lemans-card__time em { color: var(--c-accent); font-style: normal; }
.lemans-card__row {
	display: flex; justify-content: space-between; padding: 10px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	font-size: 0.95rem;
}
.lemans-card__row:last-child { border-bottom: 0; }
.lemans-card__row strong { color: var(--c-text-3); font-weight: 500; }

/* ===========================================================
   Final spacing tweaks
   =========================================================== */
.hero-mega__features { gap: 24px; }
.hero-mega__feature { font-size: 0.88rem; }
.hero-mega__lead { font-weight: 400; line-height: 1.5; }

/* Smoother transition on header */
.site-header { transition: padding .35s var(--ease-fluid), background .3s var(--ease-soft); }
.site-header.is-scrolled { padding: 4px 0; }
.site-header__inner { min-height: 64px; }

/* Card-XL refinement w v4 — less padding, more elegant */
.card-xl { background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%); }
.card-xl__name { font-size: 1.45rem; font-weight: 700; }

/* Big quote refinement */
.big-quote::before {
	background: radial-gradient(circle, rgba(255,45,32,0.16) 0%, transparent 45%);
}
.big-quote__text {
	font-weight: 500;
}

/* CTA Final — bigger */
.cta-final {
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #200a0a 100%);
}

/* Footer w v4 */
.site-footer { padding-top: clamp(60px, 8vw, 100px); }
.site-footer__logo img { height: 44px; width: auto; }

/* ===== style-v5.css ===== */
/* =========================================================================
   ICF Karting — v5 (audit fixes pass)
   Wczytywany ostatni. Naprawia: typografię hero, header, overlay, spotlight,
   mobile responsive, focus styles, dodaje voucher-hero, szkoly card,
   pakiet-startowy, urgency, sezonowe.
   ========================================================================= */

/* ===========================================================
   FIX: Hero typografia — mniej agresywny clamp
   =========================================================== */
.hero-mega__title {
	font-size: clamp(2.6rem, 8vw, 7rem) !important;
	letter-spacing: -0.035em !important;
	line-height: 0.96 !important;
	max-width: 14ch;
}
.hero-mega__lead {
	font-size: clamp(1rem, 1.4vw, 1.25rem) !important;
	max-width: 540px;
}
@media (max-width: 640px) {
	.hero-mega__title { font-size: clamp(2.2rem, 11vw, 3.4rem) !important; max-width: 12ch; }
	.hero-mega__lead { font-size: 1rem !important; }
}

/* FIX: Hero overlay — lżejszy, video bardziej widoczne */
.hero-mega--video .hero-mega__overlay {
	background:
		radial-gradient(ellipse at 25% 100%, rgba(0,0,0,.85) 0%, transparent 70%),
		linear-gradient(180deg, rgba(6,6,8,.25) 0%, rgba(6,6,8,.35) 50%, rgba(6,6,8,.92) 100%) !important;
}

/* FIX: Kinetic ICF — schowaj na mobile, słabsze na tablet */
.hero-mega__kinetic-text {
	color: transparent;
	-webkit-text-stroke: 1px rgba(255,255,255,.06);
}
@media (max-width: 880px) {
	.hero-mega__kinetic { display: none; }
}

/* ===========================================================
   FIX: Header — kompaktowy, lepiej zorganizowany
   =========================================================== */
.site-nav__list { gap: 2px !important; }
.site-nav__list li a {
	padding: 8px 12px !important;
	font-size: 0.95rem;
	white-space: nowrap;
}
.site-nav__cta { gap: 10px !important; }
@media (max-width: 1180px) {
	/* Hide phone display on smaller desktop, keep CTA */
	.site-nav__phone { display: none; }
}
@media (max-width: 1080px) {
	/* Hide some menu items on tablet-ish */
	.site-nav__list { gap: 0; }
	.site-nav__list li a { padding: 8px 10px !important; font-size: 0.9rem; }
	.live-pill { display: none; }
}

/* ===========================================================
   FIX: Spotlight — subtelniejszy i tylko na duże karty
   =========================================================== */
.feature::before, .timeline__step::before, .lemans-card::before, .pass::before {
	display: none !important;
}
/* Bento, persona, compare keep spotlight ale subtelniej */
.bento-cell::before, .persona::before, .compare__col::before, .testimonial-v2::before {
	background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%),
		rgba(255, 45, 32, 0.10) 0%,
		transparent 55%) !important;
}

/* ===========================================================
   FIX: Bento media — mniej agresywny gradient overlay
   =========================================================== */
.bento-cell__media::after {
	background: linear-gradient(180deg,
		rgba(0,0,0,.12) 0%,
		rgba(0,0,0,.4) 55%,
		rgba(6,6,8,.92) 100%) !important;
}

/* FIX: Persona media gradient — softer */
.persona__media::after {
	background: linear-gradient(180deg,
		rgba(0,0,0,.08) 0%,
		rgba(0,0,0,.55) 60%,
		rgba(6,6,8,.95) 100%) !important;
}

/* ===========================================================
   FIX: Story-pin mobile — zamień na akkordeon styl
   =========================================================== */
@media (max-width: 880px) {
	.story-pin__inner { display: block !important; }
	.story-pin__sticky { display: none !important; }
	.story-pin__steps { display: flex; flex-direction: column; gap: 24px; }
	.story-pin__step {
		min-height: auto !important;
		padding: 0 !important;
		background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.01) 100%);
		border: 1px solid var(--c-glass-line);
		border-radius: 24px;
		padding: 28px !important;
	}
	.story-pin__step h3 { font-size: 1.6rem; }
}

/* ===========================================================
   FIX: Map filter — subtelniejszy
   =========================================================== */
.map-section__embed iframe {
	filter: invert(0.92) hue-rotate(180deg) saturate(0.5) brightness(0.95) !important;
}

/* ===========================================================
   FIX: Focus visible — accessibility
   =========================================================== */
:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 4px;
}
.btn-pill:focus-visible, .btn:focus-visible, .segm-card:focus-visible,
.persona:focus-visible, .bento-cell:focus-visible, .card-xl:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
}
a:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ===========================================================
   FIX: Booking bar — nie pokazuj przy footer
   =========================================================== */
.booking-bar.is-hidden { transform: translateY(160%) !important; }

/* ===========================================================
   NEW: Pakiet startowy / "co dostajesz" — info ribbon
   =========================================================== */
.starter-pack {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1100px;
	margin: 40px auto 0;
}
@media (max-width: 880px) { .starter-pack { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .starter-pack { grid-template-columns: 1fr; } }

.starter-item {
	display: flex; flex-direction: column; gap: 6px;
	padding: 24px;
	background: var(--c-glass);
	border: 1px solid var(--c-glass-line);
	border-radius: 18px;
	text-align: left;
}
.starter-item__icon {
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	font-size: 1.2rem;
	margin-bottom: 6px;
}
.starter-item__name { font-weight: 700; font-size: 1.05rem; color: #fff; }
.starter-item__desc { color: var(--c-text-2); font-size: 0.9rem; line-height: 1.5; }
.starter-item__price { color: var(--c-text-3); font-size: 0.85rem; font-weight: 600; margin-top: auto; padding-top: 8px; }

/* ===========================================================
   NEW: Voucher / Gift hero block — bigger emphasis
   =========================================================== */
.voucher-hero {
	display: grid;
	grid-template-columns: 1.25fr 1fr;
	gap: 0;
	border-radius: 24px;
	overflow: hidden;
	background: linear-gradient(135deg, #1f0707 0%, #0a0a0c 100%);
	border: 1px solid rgba(255,45,32,0.25);
	max-width: 1240px;
	margin: 0 auto;
}
@media (max-width: 880px) { .voucher-hero { grid-template-columns: 1fr; } }

.voucher-hero__body {
	padding: clamp(36px, 4vw, 64px);
	display: flex; flex-direction: column; justify-content: center;
}
.voucher-hero__eyebrow {
	color: var(--c-accent);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 16px;
}
.voucher-hero__title {
	font-size: clamp(2rem, 4vw, 3.4rem);
	font-weight: 800; letter-spacing: -0.035em; line-height: 1.05;
	margin: 0 0 16px;
}
.voucher-hero__title em { color: var(--c-accent); font-style: normal; }
.voucher-hero__lead {
	color: var(--c-text-2); font-size: 1.05rem; line-height: 1.55;
	margin: 0 0 28px; max-width: 44ch;
}
.voucher-hero__chips {
	display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px;
}
.voucher-hero__chips span {
	padding: 6px 12px; background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.1); border-radius: 999px;
	font-size: 0.85rem; color: var(--c-text);
}
.voucher-hero__media {
	position: relative;
	min-height: 360px;
	background: var(--c-bg-3);
}
.voucher-hero__media img {
	width: 100%; height: 100%; object-fit: cover;
}
.voucher-hero__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(90deg, rgba(31,7,7,.6) 0%, transparent 50%);
}
@media (max-width: 880px) { .voucher-hero__media { min-height: 280px; } }

/* ===========================================================
   NEW: Szkoły i grupy zorganizowane — dla nauczycieli
   =========================================================== */
.schools-band {
	display: flex; align-items: center; gap: 24px;
	padding: clamp(28px, 3vw, 40px);
	background: linear-gradient(135deg, rgba(46,224,107,0.06) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(46,224,107,0.2);
	border-radius: 24px;
	max-width: 1100px;
	margin: 0 auto;
}
@media (max-width: 720px) { .schools-band { flex-direction: column; align-items: flex-start; text-align: left; } }
.schools-band__icon {
	width: 64px; height: 64px;
	flex-shrink: 0;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: rgba(46,224,107,0.1);
	border: 1px solid rgba(46,224,107,0.3);
	font-size: 1.8rem;
}
.schools-band__body { flex: 1; }
.schools-band__title { font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 6px; color: #fff; }
.schools-band__lead { color: var(--c-text-2); margin: 0 0 16px; font-size: 0.98rem; line-height: 1.55; }
.schools-band__cta { display: inline-flex; align-items: center; gap: 6px; }

/* ===========================================================
   NEW: Sezonowe baner-strip (dynamiczne)
   =========================================================== */
.season-strip {
	background: linear-gradient(135deg, var(--c-accent) 0%, #c81f12 100%);
	color: #fff;
	padding: 14px 24px;
	display: flex; align-items: center; justify-content: center; gap: 16px;
	font-weight: 600; font-size: 0.92rem;
	letter-spacing: -0.01em;
	flex-wrap: wrap;
}
.season-strip__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px;
	background: rgba(255,255,255,.2);
	border-radius: 50%;
	font-size: 0.9rem;
}
.season-strip a {
	color: #fff;
	text-decoration: underline;
	font-weight: 700;
}

/* ===========================================================
   NEW: Demo badge dla mock'ów (slot widget, leaderboard)
   =========================================================== */
.demo-badge {
	display: inline-flex; align-items: center; gap: 4px;
	padding: 3px 8px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 999px;
	font-size: 0.65rem;
	color: var(--c-text-3);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: 8px;
	vertical-align: middle;
}

/* ===========================================================
   FIX: Letter-spacing softer na małym ekranie
   =========================================================== */
@media (max-width: 480px) {
	h1, h2, .section-title-xl, .hero-mega__title {
		letter-spacing: -0.02em !important;
	}
}

/* ===========================================================
   FIX: Bento na tablecie — single column dla feature, lepsze stackowanie
   =========================================================== */
@media (min-width: 481px) and (max-width: 880px) {
	.bento { grid-template-columns: repeat(2, 1fr); }
	.bento-cell--feature { grid-column: span 2; }
	.bento-cell--wide    { grid-column: span 2; }
	.bento-cell--tall    { grid-row: span 1; }
}
@media (max-width: 480px) {
	.bento { grid-template-columns: 1fr; }
	.bento-cell { grid-column: span 1 !important; grid-row: span 1 !important; min-height: 260px; }
}

/* ===========================================================
   FIX: Card-XL min-height fluid
   =========================================================== */
.card-xl { min-height: auto; }

/* ===========================================================
   FIX: Big quote responsywność
   =========================================================== */
.big-quote__text {
	font-size: clamp(1.3rem, 3.5vw, 2.6rem) !important;
}

/* ===========================================================
   FIX: Marquee — slower on mobile (czytelność)
   =========================================================== */
@media (max-width: 720px) {
	.marquee__track { animation-duration: 70s !important; }
	.marquee__item { font-size: 1rem !important; padding: 10px 18px !important; }
}

/* ===========================================================
   FIX: Hero CTA primary — link target fix przez data-action
   =========================================================== */
.hero-mega__ctas .btn-pill[href="#"] {
	cursor: pointer;
}

/* ===========================================================
   FIX: Stat number contrast on mobile
   =========================================================== */
@media (max-width: 480px) {
	.stat__num {
		font-size: 3rem !important;
		background: none !important;
		-webkit-text-fill-color: #fff !important;
		color: #fff !important;
	}
}

/* ===========================================================
   FIX: Footer mobile padding
   =========================================================== */
@media (max-width: 540px) {
	.site-footer__col h3 { margin-top: 8px; }
	.site-footer__bar-inner { gap: 8px; }
}

/* ===========================================================
   FIX: Hero rating glass card — lepsze pozycjonowanie
   =========================================================== */
.hero-mega__rating {
	bottom: clamp(20px, 4vh, 60px);
	top: auto !important;
	right: clamp(16px, 4vw, 64px);
	transform: none !important;
	padding: 14px 18px;
}
.hero-mega__rating-num { font-size: 2rem; }

/* ===========================================================
   FIX: Skip link visible focus
   =========================================================== */
.skip-link:focus, .skip-link:focus-visible {
	top: 16px;
	background: var(--c-accent);
	color: #fff;
	z-index: 9999;
}

/* ===========================================================
   FIX: Headers tighter on tablet
   =========================================================== */
@media (max-width: 720px) {
	.section-title-xl { font-size: clamp(1.8rem, 6vw, 2.6rem) !important; max-width: 18ch; }
	.section-eyebrow { font-size: 0.75rem; letter-spacing: 0.12em; }
}

/* ===========================================================
   FIX: Lemans card mobile
   =========================================================== */
@media (max-width: 720px) {
	.lemans-card { padding: 24px; }
	.lemans-card__time { font-size: 2.2rem; }
}

/* ===========================================================
   FIX: Compare na mobile
   =========================================================== */
@media (max-width: 880px) {
	.compare__col--accent::before { font-size: 0.65rem; padding: 3px 10px; }
}

/* ===========================================================
   FIX: Map card mobile
   =========================================================== */
@media (max-width: 720px) {
	.map-card { min-height: 600px; padding: 60px 20px; }
	.map-card__inner { padding: 24px; }
}

/* ===========================================================
   FIX: Sticky chapter nav — disable below 1280
   =========================================================== */
@media (max-width: 1279px) {
	.chapter-nav { display: none !important; }
}

/* ===========================================================
   FIX: Live pill — only show when actually open (JS will toggle .is-open)
   =========================================================== */
.live-pill { transition: opacity .3s, background .3s, border-color .3s, color .3s; }
.live-pill.is-closed {
	background: rgba(255, 91, 91, .1);
	border-color: rgba(255, 91, 91, .35);
	color: var(--c-error);
}
.live-pill.is-closed .live-pill__dot {
	background: var(--c-error);
	box-shadow: 0 0 8px var(--c-error);
}

/* ===========================================================
   FIX: Logo refinements — proper contrast
   =========================================================== */
.site-logo img {
	filter: drop-shadow(0 0 12px rgba(0,0,0,.5));
}

/* ===========================================================
   AUTHOR CREDIT — wewnątrz pasek stopki (zamiast standalone strip)
   =========================================================== */
/* Hide stary standalone credit (został w innych preview pages) */
body > .author-credit { display: none; }

/* Ulepszony footer-bar: 2 sloty (left: © + tor, right: credit) */
.site-footer__bar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.site-footer__bar small {
	font-size: 0.78rem;
	color: var(--c-text-3);
}

/* Credit inline w footer bar */
.author-credit-inline {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 0.78rem;
	color: var(--c-text-3);
	letter-spacing: 0.02em;
	flex-wrap: wrap;
}
.author-credit-inline__label {
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 0.06em;
	font-size: 0.7rem;
	color: var(--c-text-3);
}
.author-credit-inline__name {
	color: var(--c-text);
	font-weight: 700;
	letter-spacing: 0.04em;
	background: linear-gradient(90deg, #fff 0%, var(--c-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	transition: opacity .25s var(--ease-soft);
	text-decoration: none;
}
.author-credit-inline__name:hover { opacity: 0.85; }
.author-credit-inline__role {
	color: var(--c-text-3);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.7rem;
}
.author-credit-inline__sep { color: rgba(255,255,255,.2); }

@media (max-width: 720px) {
	.site-footer__bar-inner { flex-direction: column; text-align: center; gap: 10px; }
	.author-credit-inline { justify-content: center; }
}

/* ===========================================================
   INSTAGRAM FEED — live posts from @icfkarting
   (preview = mock; production = Smash Balloon plugin)
   =========================================================== */
.ig-feed {
	max-width: 1240px; margin: 0 auto;
	padding: 0 var(--gutter);
}
.ig-feed__head {
	display: flex; align-items: center; justify-content: space-between;
	gap: 24px; flex-wrap: wrap;
	margin-bottom: 32px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.ig-feed__handle {
	display: flex; align-items: center; gap: 16px;
}
.ig-feed__avatar {
	width: 64px; height: 64px;
	border-radius: 50%;
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	padding: 3px;
	flex-shrink: 0;
}
.ig-feed__avatar-inner {
	width: 100%; height: 100%;
	background: #0a0a0c;
	border-radius: 50%;
	padding: 3px;
	display: flex; align-items: center; justify-content: center;
}
.ig-feed__avatar-inner img {
	width: 100%; height: 100%;
	object-fit: cover;
	border-radius: 50%;
}
.ig-feed__name {
	display: flex; flex-direction: column; gap: 2px;
}
.ig-feed__name-handle {
	font-weight: 700; font-size: 1.1rem;
	color: #fff; letter-spacing: -0.01em;
}
.ig-feed__name-stats {
	font-size: 0.85rem;
	color: var(--c-text-3);
}
.ig-feed__follow {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px;
	background: linear-gradient(135deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
	color: #fff;
	border-radius: 999px;
	font-weight: 600; font-size: 0.9rem;
	transition: transform .25s var(--ease-apple), box-shadow .25s;
	letter-spacing: -0.01em;
}
.ig-feed__follow:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 40px -10px rgba(220,39,67,0.6);
	color: #fff;
}
.ig-feed__follow svg, .ig-feed__follow .ig-icon {
	width: 18px; height: 18px;
	display: inline-block;
}

.ig-feed__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 6px;
}
@media (max-width: 1100px) { .ig-feed__grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px)  { .ig-feed__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 420px)  { .ig-feed__grid { grid-template-columns: repeat(2, 1fr); } }

.ig-post {
	position: relative;
	display: block;
	aspect-ratio: 1;
	overflow: hidden;
	background: var(--c-bg-3);
	border-radius: 4px;
}
.ig-post img, .ig-post video {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .8s var(--ease-apple), filter .3s;
}
.ig-post:hover img, .ig-post:hover video { transform: scale(1.05); filter: brightness(.7); }
.ig-post__type {
	position: absolute; top: 8px; right: 8px;
	background: rgba(0,0,0,.4); backdrop-filter: blur(8px);
	padding: 4px 6px; border-radius: 4px;
	font-size: 0.7rem;
	color: #fff;
	z-index: 1;
}
.ig-post__overlay {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	gap: 16px;
	background: rgba(0,0,0,.6);
	color: #fff;
	font-weight: 700;
	font-size: 0.9rem;
	opacity: 0;
	transition: opacity .25s var(--ease-soft);
	z-index: 1;
}
.ig-post:hover .ig-post__overlay { opacity: 1; }
.ig-post__overlay span {
	display: inline-flex; align-items: center; gap: 4px;
}

/* Live indicator strip */
.ig-feed__live {
	display: inline-flex; align-items: center; gap: 6px;
	padding: 4px 10px;
	background: rgba(46,224,107,.1);
	border: 1px solid rgba(46,224,107,.3);
	border-radius: 999px;
	font-size: 0.7rem;
	color: var(--c-live);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	margin-left: 8px;
}
.ig-feed__live::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: var(--c-live);
	box-shadow: 0 0 6px var(--c-live);
	animation: livePulse 2s ease-in-out infinite;
}

/* ===== style-v6.css ===== */
/* =========================================================================
   ICF Karting — v6 (final polish)
   - Mobile bottom nav (zamiast booking bar)
   - Newsletter capture
   - Trust band
   - Space Grotesk display
   - Custom SVG icons
   - Film grain overlay
   - Page enter animation
   ========================================================================= */

/* ===========================================================
   FIX: booking bar — body padding + smarter hide
   =========================================================== */
@media (max-width: 720px) {
	body { padding-bottom: 88px; }
	/* Mobile: ukryj sticky booking bar, zastąp bottom-nav */
	.booking-bar { display: none !important; }
}

/* Desktop: większy threshold, hide kiedy footer już zaczyna się pokazywać */
@media (min-width: 721px) {
	body { padding-bottom: 0; }
}

/* ===========================================================
   MOBILE BOTTOM NAV — 4 ikony glass (zamiast booking bar)
   =========================================================== */
.bottom-nav {
	display: none;
}
@media (max-width: 720px) {
	.bottom-nav {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		position: fixed;
		left: 0; right: 0; bottom: 0;
		z-index: 90;
		background: rgba(8, 8, 10, 0.85);
		backdrop-filter: saturate(180%) blur(24px);
		-webkit-backdrop-filter: saturate(180%) blur(24px);
		border-top: 1px solid rgba(255,255,255,.08);
		padding: 8px 4px calc(8px + env(safe-area-inset-bottom)) 4px;
		gap: 2px;
	}
	.bottom-nav__item {
		display: flex; flex-direction: column; align-items: center; justify-content: center;
		gap: 2px;
		padding: 6px 4px;
		color: var(--c-text-2);
		text-decoration: none;
		font-size: 0.65rem;
		font-weight: 500;
		letter-spacing: 0.02em;
		border-radius: 12px;
		transition: background .2s var(--ease-soft), color .2s;
		min-height: 56px;
	}
	.bottom-nav__item:active {
		background: rgba(255,255,255,.06);
		color: #fff;
	}
	.bottom-nav__item--cta {
		background: linear-gradient(135deg, var(--c-accent) 0%, #c81f12 100%);
		color: #fff !important;
	}
	.bottom-nav__item--cta:active { transform: scale(0.96); }
	.bottom-nav__icon {
		width: 22px; height: 22px;
		display: flex; align-items: center; justify-content: center;
	}
	.bottom-nav__icon svg { width: 100%; height: 100%; fill: currentColor; }
}

/* ===========================================================
   TYPOGRAPHY UPGRADE — Space Grotesk dla headlines
   =========================================================== */
:root {
	--font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
h1, h2, h3,
.hero-mega__title,
.section-title-xl,
.cta-final h2,
.big-quote__text,
.bento-cell__title,
.persona__title,
.compare__title,
.voucher-hero__title,
.lemans-card__time,
.pass__num,
.ambient__quote h2,
.fleet-counter__big {
	font-family: var(--font-display);
	font-feature-settings: 'ss01', 'ss02', 'cv01';
}
.section-eyebrow, .hero-mega__eyebrow, .bento-cell__eyebrow,
.persona__eyebrow, .voucher-hero__eyebrow, .map-card__eyebrow,
.author-credit-inline__label, .author-credit-inline__role {
	font-family: 'Inter', system-ui, sans-serif;
	font-feature-settings: 'ss01';
}

/* ===========================================================
   FILM GRAIN OVERLAY — premium cinema feel
   =========================================================== */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	z-index: 999;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' /></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
	mix-blend-mode: overlay;
}

@media (prefers-reduced-motion: reduce) {
	body::before { opacity: 0.02; }
}

/* ===========================================================
   PAGE ENTER FADE — branded boot-up
   =========================================================== */
body { animation: pageEnter .8s var(--ease-fluid) both; }
@keyframes pageEnter {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* ===========================================================
   LOGO refined hover — subtle glow pulse
   =========================================================== */
.site-logo {
	transition: transform .3s var(--ease-spring);
}
.site-logo:hover {
	transform: scale(1.04);
}
.site-logo:hover img {
	filter: drop-shadow(0 0 16px rgba(255, 45, 32, 0.6));
}

/* ===========================================================
   TRUST BAND — social proof bar
   =========================================================== */
.trust-band {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: clamp(20px, 4vw, 60px);
	flex-wrap: wrap;
	padding: clamp(36px, 5vw, 64px) clamp(20px, 4vw, 48px);
	max-width: 1240px;
	margin: 0 auto;
	background: linear-gradient(180deg, rgba(255,255,255,.025) 0%, rgba(255,255,255,.008) 100%);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 24px;
}
.trust-item {
	display: flex; align-items: center; gap: 14px;
	min-width: 0;
}
.trust-item__icon {
	width: 44px; height: 44px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 12px;
	background: rgba(255,45,32,0.08);
	border: 1px solid rgba(255,45,32,0.18);
	color: var(--c-accent);
	flex-shrink: 0;
}
.trust-item__icon svg { width: 22px; height: 22px; }
.trust-item__num {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.trust-item__label {
	font-size: 0.85rem;
	color: var(--c-text-3);
	letter-spacing: -0.005em;
}
.trust-item__sep {
	width: 1px;
	height: 36px;
	background: rgba(255,255,255,.08);
}
@media (max-width: 880px) {
	.trust-band { gap: 24px; }
	.trust-item__sep { display: none; }
}
@media (max-width: 540px) {
	.trust-band { padding: 24px; gap: 16px; flex-direction: column; align-items: stretch; }
	.trust-item { justify-content: flex-start; }
}

/* ===========================================================
   NEWSLETTER section
   =========================================================== */
.newsletter {
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #100808 100%);
	padding: clamp(72px, 10vw, 140px) 0;
	position: relative;
	overflow: hidden;
}
.newsletter::before {
	content: '';
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 80vmax; height: 80vmax;
	background: radial-gradient(circle, rgba(255,45,32,.07) 0%, transparent 50%);
	pointer-events: none;
}
.newsletter__inner {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	text-align: center;
	position: relative;
	z-index: 1;
}
.newsletter__eyebrow {
	color: var(--c-accent);
	font-size: 0.78rem; font-weight: 600;
	letter-spacing: 0.16em; text-transform: uppercase;
	margin-bottom: 16px;
	display: inline-block;
}
.newsletter__title {
	font-family: var(--font-display);
	font-size: clamp(1.8rem, 4.5vw, 3rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 18px;
	color: #fff;
}
.newsletter__title em { color: var(--c-accent); font-style: normal; }
.newsletter__lead {
	color: var(--c-text-2);
	font-size: 1.1rem;
	line-height: 1.55;
	margin: 0 0 32px;
}
.newsletter__form {
	display: flex; gap: 8px;
	max-width: 480px; margin: 0 auto;
	flex-wrap: wrap;
}
.newsletter__input {
	flex: 1;
	min-width: 240px;
	padding: 16px 22px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 999px;
	color: #fff;
	font-size: 1rem;
	font-family: inherit;
	transition: border-color .2s var(--ease-soft), background .2s;
}
.newsletter__input::placeholder { color: var(--c-text-3); }
.newsletter__input:focus {
	outline: 0;
	border-color: var(--c-accent);
	background: rgba(255,255,255,.06);
}
.newsletter__btn {
	padding: 16px 28px;
	border-radius: 999px;
	background: var(--c-accent);
	color: #fff;
	font-weight: 600;
	border: 0;
	cursor: pointer;
	transition: background .25s var(--ease-soft), transform .2s var(--ease-apple);
	white-space: nowrap;
}
.newsletter__btn:hover { background: var(--c-accent-2); transform: translateY(-2px); }
.newsletter__consent {
	margin-top: 18px;
	font-size: 0.78rem;
	color: var(--c-text-3);
	display: inline-flex; align-items: center; gap: 6px;
}
.newsletter__consent input { width: auto; margin-right: 4px; }
.newsletter__consent a { color: var(--c-text-2); text-decoration: underline; }
.newsletter__perks {
	display: flex; gap: 18px; flex-wrap: wrap; justify-content: center;
	margin-top: 32px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.06);
}
.newsletter__perks span {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 0.85rem;
	color: var(--c-text-2);
}
.newsletter__perks span::before {
	content: '✓';
	color: var(--c-accent);
	font-weight: 700;
}

@media (max-width: 540px) {
	.newsletter__form { flex-direction: column; }
	.newsletter__input, .newsletter__btn { width: 100%; }
	.newsletter__btn { padding: 14px 24px; }
}

/* ===========================================================
   FEATURE icons — custom SVG container (zamiast emoji)
   =========================================================== */
.feature__icon-svg {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--c-accent-soft), rgba(255,255,255,.04));
	border: 1px solid rgba(255,45,32,0.2);
	color: var(--c-accent);
	margin-bottom: 12px;
}
.feature__icon-svg svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.starter-item__icon-svg {
	width: 42px; height: 42px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-accent-soft);
	color: var(--c-accent);
	margin-bottom: 6px;
}
.starter-item__icon-svg svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; }

/* ===========================================================
   FIX: hide preview-banner on mobile — too distracting
   =========================================================== */
@media (max-width: 540px) {
	.preview-banner { font-size: 0.75rem; padding: 8px 12px; }
}

/* ===========================================================
   FIX: scroll progress bar — bigger on mobile
   =========================================================== */
@media (max-width: 720px) {
	.scroll-progress { height: 3px; }
}

/* ===========================================================
   FIX: footer kontakt items spacing on mobile
   =========================================================== */
@media (max-width: 540px) {
	.author-credit-inline { font-size: 0.7rem; }
	.author-credit-inline__label, .author-credit-inline__role { font-size: 0.65rem; }
}

/* ===========================================================
   Live pill — refinements
   =========================================================== */
.live-pill { padding: 6px 12px 6px 10px; }

/* ===========================================================
   Hero — small refinements
   =========================================================== */
.hero-mega__lead { color: rgba(255,255,255,.85); }

/* ===== style-v7.css ===== */
/* =========================================================================
   ICF Karting — v7 (consolidation pass / Oscar-grade)
   - Design system uniform (radius, hover, padding)
   - Hero refinement (1 primary CTA, sharper lead, hero rating always visible)
   - Live-now widget (sticky pod nav)
   - Brand strip (Zaufali nam)
   - Hide duplicate sections (story-pin, compare, pakiet startowy duplicate)
   - Marketing micro-elements (urgency, badges)
   ========================================================================= */

/* ===========================================================
   DESIGN SYSTEM normalization
   =========================================================== */
:root {
	--radius-card: 24px;
	--radius-pill: 999px;
	--radius-input: 14px;
	--card-bg: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	--card-border: 1px solid rgba(255,255,255,.08);
	--card-border-hover: 1px solid rgba(255,255,255,.18);
	--card-padding: clamp(28px, 3vw, 40px);
}

/* Unified hover for all premium cards */
.bento-cell, .persona, .pass, .lemans-card, .testimonial-v2, .compare__col, .card-xl,
.feature, .timeline__step, .voucher-hero, .map-card__inner {
	transition: transform .25s var(--ease-fluid), border-color .25s var(--ease-soft),
	            background .25s var(--ease-soft), box-shadow .25s var(--ease-fluid);
}

/* Single hover treatment — translateY + border accent (no more tilt for bento) */
.bento-cell:hover { transform: translateY(-4px) !important; }
.persona:hover { transform: translateY(-4px) !important; }
.pass:hover, .lemans-card:hover, .testimonial-v2:hover, .compare__col:hover { transform: translateY(-4px) !important; }

/* ===========================================================
   HIDE duplicate sections (saving ~7000px page height)
   =========================================================== */
.story-pin,                       /* duplikuje "Tor i flota" */
section[data-chapter="Trzy gokarty"],
.compare,                         /* duplikuje karnety + LeMans */
section[data-chapter="Wybierz format"],
.starter-pack,                    /* duplikuje timeline */
.starter-pack + header { display: none !important; }
/* Zostawiamy timeline, karnety, lemans-grid, persony, voucher-hero, IG, gallery, FAQ */

/* ===========================================================
   HERO refinement
   =========================================================== */
.hero-mega__lead {
	font-size: clamp(1.05rem, 1.4vw, 1.3rem) !important;
	max-width: 480px;
	color: rgba(255,255,255,.88) !important;
	font-weight: 400;
}

/* Single primary CTA emphasis */
.hero-mega__ctas .btn-pill--primary {
	padding: 18px 32px !important;
	font-size: 1.05rem !important;
	box-shadow: 0 10px 50px -10px var(--c-accent), 0 0 0 0 rgba(255,45,32,.5);
	animation: heroCtaPulse 2.5s var(--ease-soft) infinite;
}
@keyframes heroCtaPulse {
	0%, 100% { box-shadow: 0 10px 50px -10px var(--c-accent), 0 0 0 0 rgba(255,45,32,.4); }
	50%      { box-shadow: 0 10px 50px -10px var(--c-accent), 0 0 0 12px rgba(255,45,32,0); }
}

/* Google rating — always visible, even on smaller desktop */
.hero-mega__rating {
	display: flex !important;
	bottom: clamp(20px, 4vh, 60px);
	right: clamp(16px, 4vw, 64px);
	padding: 16px 20px !important;
	background: rgba(15,15,18,.7);
	border: 1px solid rgba(255,255,255,.12);
}
@media (max-width: 880px) {
	.hero-mega__rating { display: none !important; }
}

/* ===========================================================
   LIVE-NOW widget — sticky pod headerem (urgency)
   =========================================================== */
.live-now {
	position: sticky;
	top: 88px; /* under preview banner + header */
	z-index: 80;
	display: flex; align-items: center; justify-content: center; gap: 14px;
	padding: 10px 20px;
	background: rgba(8, 8, 10, 0.85);
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	border-bottom: 1px solid rgba(255,255,255,.08);
	font-size: 0.85rem;
	color: var(--c-text);
	flex-wrap: wrap;
	transition: opacity .3s var(--ease-soft);
}
.live-now__group {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 4px 14px;
	background: rgba(46,224,107,.08);
	border: 1px solid rgba(46,224,107,.25);
	border-radius: 999px;
}
.live-now__group--accent {
	background: rgba(255,45,32,.08);
	border-color: rgba(255,45,32,.25);
	color: var(--c-accent-2);
}
.live-now__dot {
	width: 8px; height: 8px;
	border-radius: 50%;
	background: var(--c-live);
	box-shadow: 0 0 8px var(--c-live);
	animation: livePulse 2s ease-in-out infinite;
	flex-shrink: 0;
}
.live-now__group--accent .live-now__dot { background: var(--c-accent); box-shadow: 0 0 8px var(--c-accent); }
.live-now strong { color: #fff; font-weight: 700; }
.live-now a {
	color: var(--c-accent-2);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 540px) {
	.live-now { font-size: 0.75rem; padding: 8px 12px; gap: 8px; flex-wrap: nowrap; overflow-x: auto; }
	.live-now::-webkit-scrollbar { display: none; }
	.live-now__group { padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }
	.live-now a { white-space: nowrap; }
}

/* ===========================================================
   BRAND STRIP — "Zaufali nam"
   =========================================================== */
.brand-strip {
	padding: clamp(40px, 5vw, 72px) 0;
	background: var(--c-bg-deep);
	border-top: 1px solid rgba(255,255,255,.05);
	border-bottom: 1px solid rgba(255,255,255,.05);
	overflow: hidden;
}
.brand-strip__label {
	display: block;
	text-align: center;
	color: var(--c-text-3);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 28px;
}
.brand-strip__list {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: clamp(24px, 4vw, 60px);
	flex-wrap: wrap;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--gutter);
	opacity: 0.5;
}
.brand-strip__item {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(1rem, 1.6vw, 1.4rem);
	letter-spacing: -0.02em;
	color: rgba(255,255,255,.85);
	transition: opacity .3s, transform .25s var(--ease-spring);
	white-space: nowrap;
	cursor: default;
}
.brand-strip__item:hover { opacity: 1; transform: scale(1.05); }
.brand-strip__item span { color: var(--c-accent); }

/* ===========================================================
   "NAJCZĘŚCIEJ WYBIERANE" badge dla Sprintera + Karnetu 5×
   =========================================================== */
.popular-badge {
	position: absolute;
	top: -10px; right: 16px;
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff6b3d 100%);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 2;
	box-shadow: 0 6px 20px -4px rgba(255,45,32,0.5);
	white-space: nowrap;
}
.popular-badge::before {
	content: '🔥 ';
}

.bento-cell, .pass, .persona { position: relative; }

/* ===========================================================
   URGENCY counter — "Najbliższy wolny termin: ..."
   =========================================================== */
.urgency-line {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 16px;
	padding: 10px 16px;
	background: rgba(255,180,0,.08);
	border: 1px solid rgba(255,180,0,.25);
	border-radius: 999px;
	font-size: 0.85rem;
	color: #ffb400;
	font-weight: 500;
}
.urgency-line::before {
	content: '⚡';
	font-size: 0.95rem;
}

/* ===========================================================
   FOOTER — 3 columns instead of 4 (cleaner)
   =========================================================== */
.site-footer__grid {
	grid-template-columns: 1.6fr 1fr 1fr !important;
}
@media (max-width: 880px) {
	.site-footer__grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 540px) {
	.site-footer__grid { grid-template-columns: 1fr !important; }
}
/* Hide the 4th column "Informacje" — link items moved to col 3 */
.site-footer__col:nth-child(4) { display: none; }

/* ===========================================================
   MOBILE MENU — premium overhaul (tylko style, nie display!)
   =========================================================== */
@media (max-width: 960px) {
	/* Reset siatki — fixed full-screen, hidden via transform domyślnie */
	.site-nav {
		position: fixed !important;
		top: 60px !important; left: 0 !important; right: 0 !important; bottom: auto !important;
		max-height: calc(100vh - 60px) !important;
		height: auto !important;
		background: rgba(8, 8, 10, 0.96) !important;
		backdrop-filter: saturate(180%) blur(30px) !important;
		-webkit-backdrop-filter: saturate(180%) blur(30px) !important;
		padding: 32px var(--gutter) !important;
		gap: 24px !important;
		overflow-y: auto !important;
		transform: translateY(-110%) !important;
		visibility: hidden;
		transition: transform .35s var(--ease-fluid), visibility 0s linear .35s;
	}
	.site-nav.is-open {
		transform: translateY(0) !important;
		visibility: visible;
		transition: transform .35s var(--ease-fluid), visibility 0s linear 0s;
	}
	.site-nav.is-open .site-nav__list li a,
	.site-nav.is-open .site-nav__cta {
		font-size: 1.3rem;
		font-weight: 600;
		letter-spacing: -0.02em;
	}
	.site-nav__list li a {
		font-family: var(--font-display);
		padding: 14px 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.06);
	}
	.site-nav__list li a::after {
		content: '→';
		float: right;
		color: var(--c-accent);
		opacity: 0;
		transition: opacity .25s, transform .25s;
	}
	.site-nav__list li:hover a::after { opacity: 1; transform: translateX(4px); }
	.site-nav__cta { margin-top: auto; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.08); }
	.site-nav__cta .live-pill { display: inline-flex !important; }
}

/* ===========================================================
   Better focus states (a11y)
   =========================================================== */
*:focus-visible { outline-offset: 4px; }
.btn-pill:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

/* ===========================================================
   Section padding — uniform rhythm
   =========================================================== */
.section--xl { padding: clamp(72px, 9vw, 140px) 0 !important; }

/* ===========================================================
   Map filter — softer
   =========================================================== */
.map-section__embed iframe {
	filter: invert(0.88) hue-rotate(180deg) saturate(0.4) brightness(0.95) contrast(0.92) !important;
}

/* ===========================================================
   Bento — cleaner, 4 main cards instead of 7
   =========================================================== */
.bento {
	grid-template-columns: repeat(2, 1fr) !important;
}
@media (min-width: 880px) {
	.bento { grid-template-columns: repeat(3, 1fr) !important; grid-auto-rows: minmax(280px, 1fr); }
	.bento-cell--feature { grid-column: span 2 !important; grid-row: span 1 !important; }
	.bento-cell--wide    { grid-column: span 1 !important; }
	.bento-cell--tall    { grid-row: span 1 !important; }
}
@media (max-width: 720px) {
	.bento { grid-template-columns: 1fr !important; }
	.bento-cell--feature, .bento-cell--wide, .bento-cell--tall {
		grid-column: span 1 !important; grid-row: span 1 !important;
	}
}
/* Hide Demo widgets dla cleaner bento */
.bento-cell--slot, .bento-cell--quote, .bento-cell--board { display: none !important; }

/* Bento overlay znacznie lżejszy — obrazy widoczne */
.bento-cell__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 40%,
		rgba(0,0,0,.55) 75%,
		rgba(6,6,8,.92) 100%) !important;
}

/* Persona overlay też lżejszy */
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 35%,
		rgba(0,0,0,.55) 70%,
		rgba(6,6,8,.95) 100%) !important;
}

/* Voucher hero media gradient */
.voucher-hero__media::after {
	background: linear-gradient(90deg, rgba(31,7,7,.4) 0%, transparent 60%) !important;
}

/* Bento media z większą min-height żeby wyświetlać obraz w środku, nie tylko górę */
.bento-cell__media img {
	object-position: center 40% !important;
}

/* Card-XL media gradient */
.card-xl__media::after {
	background: linear-gradient(180deg, transparent 50%, rgba(6,6,8,.45) 100%) !important;
}

/* ===========================================================
   Hero CTA secondary — bardziej widoczny
   =========================================================== */
.hero-mega__ctas .btn-pill--ghost {
	border-color: rgba(255,255,255,.3) !important;
	background: rgba(255,255,255,.08) !important;
}

/* ===========================================================
   Trust-item icon glow on visible
   =========================================================== */
.trust-item:hover .trust-item__icon {
	background: rgba(255,45,32,0.15);
	border-color: rgba(255,45,32,0.4);
	transform: scale(1.05);
	transition: background-color .3s var(--ease-spring), border-color .3s var(--ease-spring), transform .3s var(--ease-spring);
}

/* ===========================================================
   Big quote — softer mark, better proportion
   =========================================================== */
.big-quote { padding: clamp(80px, 12vw, 160px) 0 !important; }
.big-quote__mark { font-size: clamp(3rem, 6vw, 5rem) !important; }

/* ===========================================================
   Voucher-hero — bardziej kompaktowy
   =========================================================== */
.voucher-hero { min-height: auto; }
.voucher-hero__media { min-height: 320px; }

/* ===========================================================
   Newsletter container w container layout (lepsza ramka)
   =========================================================== */
.newsletter__inner {
	background: rgba(255,255,255,.02);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 32px;
	padding: clamp(48px, 6vw, 80px) clamp(24px, 4vw, 64px);
	max-width: 880px;
}

/* ===========================================================
   Magazine gallery — uniform cells na mobile
   =========================================================== */
@media (max-width: 720px) {
	.gallery-mag { grid-auto-rows: 200px; }
	.gallery-mag__item--w3 { grid-column: span 2 !important; }
	.gallery-mag__item--h3 { grid-row: span 2 !important; }
	.gallery-mag__item--w2 { grid-column: span 1 !important; }
	.gallery-mag__item--h2 { grid-row: span 1 !important; }
}

/* ===========================================================
   Footer credit centered on smaller (lepsza struktura)
   =========================================================== */
@media (max-width: 540px) {
	.author-credit-inline { width: 100%; justify-content: center; }
}

/* ===========================================================
   Section eyebrow — mocniejszy contrast
   =========================================================== */
.section-eyebrow {
	background: rgba(255,45,32,.1);
	padding: 6px 14px;
	border-radius: 999px;
	border: 1px solid rgba(255,45,32,.25);
	color: var(--c-accent-2);
}

/* ===========================================================
   Marquee — krótszy + animacja smoother
   =========================================================== */
.marquee__track { animation-duration: 95s !important; will-change: transform; }
@media (max-width: 720px) { .marquee__track { animation-duration: 70s !important; } }

/* ===========================================================
   Section bg — usuń niektóre warianty (mniej szumu)
   =========================================================== */
.section--bg-deeper { background: var(--c-bg-deep) !important; }
.section--bg-flat { background: #0a0a0c !important; }

/* ===========================================================
   Better card borders w bento (consistent)
   =========================================================== */
.bento-cell { border: var(--card-border) !important; border-radius: var(--radius-card) !important; }
.bento-cell:hover { border: var(--card-border-hover) !important; }

/* ===========================================================
   Persona card padding (uniform)
   =========================================================== */
.persona { padding: var(--card-padding) !important; min-height: 420px; }

/* ===========================================================
   Le Mans karta — better typography
   =========================================================== */
.lemans-card { padding: var(--card-padding) !important; border-radius: var(--radius-card) !important; }

/* ===========================================================
   Pass karta — refinement
   =========================================================== */
.pass { padding: var(--card-padding) !important; border-radius: var(--radius-card) !important; }

/* ===== style-v8.css ===== */
/* =========================================================================
   ICF Karting — v8 (Oscar-grade pass)
   - Bottom-nav: 3 buttons, no hamburger
   - Real Google Maps satellite embed
   - Cinema photo color grading
   - Section diagonal dividers
   - Branded loader + page intro
   - Custom cursor (pointer-fine devices)
   - Sezonowy banner mobile fix
   - Live-now mobile stacked
   - Hero rhythm refinement
   - Better CTA hover states
   ========================================================================= */

/* ===========================================================
   BRANDED LOADER — first paint moment
   =========================================================== */
.brand-loader {
	position: fixed;
	inset: 0;
	background: var(--c-bg-deep);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	animation: loaderOut 1.2s var(--ease-fluid) .35s forwards;
}
.brand-loader__logo {
	width: clamp(140px, 18vw, 240px);
	opacity: 0;
	transform: scale(0.92);
	animation: loaderLogo 1.4s var(--ease-fluid) forwards;
	filter: drop-shadow(0 0 30px rgba(255,45,32,0.4));
}
.brand-loader__bar {
	position: absolute;
	bottom: 22%;
	left: 50%;
	transform: translateX(-50%);
	width: 160px;
	height: 2px;
	background: rgba(255,255,255,.06);
	overflow: hidden;
	border-radius: 2px;
}
.brand-loader__bar::before {
	content: '';
	position: absolute; inset: 0;
	width: 100%;
	background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
	animation: loaderBar 1.2s var(--ease-soft) infinite;
}
@keyframes loaderLogo {
	0%   { opacity: 0; transform: scale(0.92); }
	30%  { opacity: 1; transform: scale(1); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes loaderBar {
	from { transform: translateX(-100%); }
	to   { transform: translateX(100%); }
}
@keyframes loaderOut {
	to { opacity: 0; visibility: hidden; transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
	.brand-loader { display: none; }
}

/* Page enter delayed by loader */
body { animation: pageEnter 1s var(--ease-fluid) .8s both !important; }

/* ===========================================================
   CUSTOM CURSOR — premium on hover devices only
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	.cursor-dot {
		position: fixed;
		top: 0; left: 0;
		width: 8px; height: 8px;
		background: var(--c-accent);
		border-radius: 50%;
		pointer-events: none;
		z-index: 9998;
		mix-blend-mode: exclusion;
		transition: width .25s var(--ease-spring), height .25s var(--ease-spring), opacity .2s;
		transform: translate(-50%, -50%);
		opacity: 0;
		will-change: transform;
	}
	.cursor-dot.is-active { opacity: 1; }
	.cursor-dot.is-hover { width: 40px; height: 40px; background: rgba(255,45,32,0.4); mix-blend-mode: normal; }

	/* Don't show on input/text fields */
	body:has(input:focus, textarea:focus) .cursor-dot { opacity: 0; }
}

/* ===========================================================
   BOTTOM NAV — 3 buttons, no hamburger (cleaner)
   =========================================================== */
@media (max-width: 720px) {
	.bottom-nav {
		grid-template-columns: 1fr 1.4fr 1fr !important;
		padding: 10px 8px calc(10px + env(safe-area-inset-bottom)) 8px !important;
		gap: 6px !important;
	}
	.bottom-nav__item {
		min-height: 60px !important;
		font-size: 0.7rem !important;
		font-weight: 600 !important;
		gap: 4px !important;
	}
	.bottom-nav__item--cta {
		font-size: 0.85rem !important;
		font-weight: 700 !important;
		letter-spacing: -0.01em;
	}
	.bottom-nav__icon { width: 24px !important; height: 24px !important; }
	/* Hide menu (4th) — header hamburger covers this */
	.bottom-nav__item--menu { display: none !important; }
}

/* ===========================================================
   SEZONOWY banner — mobile fix (jedna linia + button kompakt)
   =========================================================== */
.season-strip {
	flex-wrap: nowrap !important;
	overflow-x: auto;
	white-space: nowrap;
	font-size: 0.85rem !important;
	padding: 12px 18px !important;
	-webkit-overflow-scrolling: touch;
}
.season-strip::-webkit-scrollbar { display: none; }
.season-strip > * { flex-shrink: 0; }
.season-strip a { white-space: nowrap; }
@media (max-width: 540px) {
	.season-strip { font-size: 0.75rem !important; padding: 10px 14px !important; gap: 10px !important; }
	.season-strip__icon { width: 20px !important; height: 20px !important; font-size: 0.8rem !important; }
}

/* ===========================================================
   LIVE-NOW widget — mobile better readability
   =========================================================== */
.live-now {
	top: 88px !important; /* uniform pod headerem */
}
@media (max-width: 720px) {
	.live-now {
		top: 60px !important; /* mobile preview-banner is hidden, only banner remains */
		padding: 8px 14px !important;
		gap: 8px !important;
		font-size: 0.78rem !important;
	}
	.live-now__group { padding: 3px 9px !important; font-size: 0.72rem !important; }
	.live-now__group strong { font-size: 0.78rem; }
	.live-now a { font-size: 0.75rem; }
}

/* ===========================================================
   PHOTO COLOR GRADING — cinema look
   =========================================================== */
.hero-mega__media img,
.hero-mega__media video,
.bento-cell__media img,
.bento-cell__media video,
.persona__media img,
.voucher-hero__media img,
.split__media img,
.gallery-mag__item img,
.fleet-card__media img {
	filter: contrast(1.06) saturate(0.94) brightness(0.96);
}

/* IG posts — subtle Instagram-style filter */
.ig-post img { filter: contrast(1.02) saturate(1.05); }

/* ===========================================================
   SECTION DIVIDERS — diagonal cuts between sections
   =========================================================== */
.section--bg-deeper, .section--bg-flat {
	position: relative;
}
.divider-cut {
	position: relative;
	height: 1px;
	margin: 0;
	background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.08) 50%, transparent 100%);
}

/* ===========================================================
   MAP — refined dark theme + fade edges
   =========================================================== */
.map-section {
	min-height: 600px !important;
}
.map-section__embed iframe {
	filter: invert(0.9) hue-rotate(180deg) saturate(0.5) brightness(0.95) contrast(0.92) !important;
	min-height: 600px;
}
.map-card {
	min-height: 600px !important;
}

/* ===========================================================
   HERO — better rhythm + slight floating
   =========================================================== */
.hero-mega__inner {
	padding-bottom: clamp(80px, 10vh, 140px);
}
.hero-mega__title {
	margin-bottom: 24px !important;
}
.hero-mega__features {
	margin-top: 36px !important;
	padding-top: 32px !important;
}

/* CTA primary — refined glow */
.btn-pill--primary {
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff5640 100%) !important;
	border: 1px solid rgba(255,255,255,.1);
}
.btn-pill--primary:hover {
	background: linear-gradient(135deg, #ff5640 0%, var(--c-accent) 100%) !important;
	border-color: rgba(255,255,255,.2);
}

/* ===========================================================
   TYPOGRAPHY refinement — tighter Space Grotesk
   =========================================================== */
.hero-mega__title em {
	background: linear-gradient(180deg, #ff5640 0%, var(--c-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ===========================================================
   CARD hover refinement — subtle red border glow
   =========================================================== */
.bento-cell:hover, .persona:hover, .pass:hover, .lemans-card:hover,
.testimonial-v2:hover, .compare__col:hover, .card-xl:hover {
	border-color: rgba(255, 45, 32, 0.35) !important;
	box-shadow: 0 24px 60px -20px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,45,32,0.1);
}

/* ===========================================================
   IG follow button — bardziej prominent
   =========================================================== */
.ig-feed__follow {
	font-size: 0.95rem !important;
	padding: 14px 24px !important;
	box-shadow: 0 10px 30px -8px rgba(220,39,67,.5);
}
.ig-feed__follow:hover {
	transform: translateY(-2px) !important;
	box-shadow: 0 18px 50px -10px rgba(220,39,67,.7) !important;
}

/* ===========================================================
   FOOTER refinement
   =========================================================== */
.site-footer { padding-top: clamp(72px, 9vw, 120px) !important; }
.site-footer__col h3 {
	font-family: var(--font-display);
	font-size: 0.88rem;
	letter-spacing: 0.04em;
	color: rgba(255,255,255,.95);
}

/* Footer logo z poświatą */
.site-footer__logo img {
	filter: drop-shadow(0 0 20px rgba(255,45,32,0.25));
}

/* ===========================================================
   PAGE-HERO subpages — better size
   =========================================================== */
.page-hero { padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px) !important; }

/* ===========================================================
   Trust band — tightened
   =========================================================== */
.trust-band {
	padding: clamp(28px, 4vw, 44px) clamp(20px, 3vw, 36px) !important;
	background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%) !important;
	border-radius: 32px !important;
}
.trust-item { gap: 12px !important; }
.trust-item__icon { width: 44px !important; height: 44px !important; }
.trust-item__num { font-size: clamp(1.4rem, 2.2vw, 1.85rem) !important; }
.trust-item__label { font-size: 0.82rem !important; }

/* ===========================================================
   Subtle scroll behavior
   =========================================================== */
html {
	scroll-padding-top: 120px; /* Sticky header + live-now */
}

/* ===========================================================
   Bento — show video tile better
   =========================================================== */
.bento-cell--video .bento-cell__media::after {
	background: linear-gradient(180deg,
		transparent 0%, transparent 60%,
		rgba(0,0,0,.4) 80%,
		rgba(6,6,8,.85) 100%) !important;
}

/* ===========================================================
   Card-XL refinement
   =========================================================== */
.card-xl {
	background: var(--card-bg) !important;
	border: var(--card-border) !important;
	border-radius: var(--radius-card) !important;
}
.card-xl:hover {
	border-color: rgba(255,45,32,0.3) !important;
}

/* ===========================================================
   Section eyebrow — uniform tighter
   =========================================================== */
.section-eyebrow {
	background: rgba(255,45,32,.1);
	padding: 6px 14px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(255,45,32,.25) !important;
	color: var(--c-accent-2) !important;
	font-size: 0.72rem !important;
}

/* ===========================================================
   Reveal animation — bardziej cinematic
   =========================================================== */
.reveal {
	transform: translateY(60px) !important;
}
.reveal.is-visible {
	transform: translateY(0) !important;
}

/* ===========================================================
   FAQ premium — better animation
   =========================================================== */
.faq-premium details summary { cursor: pointer; }
.faq-premium details[open] {
	background: linear-gradient(180deg, rgba(255,45,32,0.08) 0%, rgba(255,255,255,.01) 100%) !important;
	box-shadow: 0 20px 50px -20px rgba(255,45,32,0.15);
}

/* ===========================================================
   Newsletter input/btn refinement
   =========================================================== */
.newsletter__btn {
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff5640 100%) !important;
	box-shadow: 0 10px 30px -8px var(--c-accent);
}
.newsletter__btn:hover {
	box-shadow: 0 14px 40px -10px var(--c-accent) !important;
}

/* ===========================================================
   Hero CTA scroll arrow — refined
   =========================================================== */
.hero-mega__scroll {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.7rem;
	letter-spacing: 0.16em;
}

/* ===== style-v9.css ===== */
/* =========================================================================
   ICF Karting — v9 (Oscar-grade, the masterpiece)
   - Hero scramble + EST badge + cinematic vignette
   - Dynamic ranking ticker
   - Magnetic CTA + ripple
   - Persona hover takeover
   - Section divider brand strokes
   - Stat hover micro
   - Newsletter input premium
   - Voucher hero refined gradient
   - Horizontal sticky scroll for timeline
   ========================================================================= */

/* ===========================================================
   HERO refinements — premium first impression
   =========================================================== */

/* Hero EST badge — bottom-left mocno marker */
.hero-mega__est {
	position: absolute;
	left: clamp(16px, 4vw, 64px);
	bottom: clamp(72px, 8vh, 120px);
	display: flex; align-items: center; gap: 14px;
	z-index: 2;
	font-family: var(--font-display);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	pointer-events: none;
}
.hero-mega__est::before, .hero-mega__est::after {
	content: '';
	width: 24px; height: 1px;
	background: rgba(255,255,255,.4);
}
.hero-mega__est-dot {
	width: 4px; height: 4px;
	border-radius: 50%;
	background: var(--c-accent);
	box-shadow: 0 0 8px var(--c-accent);
}
@media (max-width: 880px) { .hero-mega__est { display: none; } }

/* Hero cinematic vignette */
.hero-mega::after {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at center, transparent 30%, rgba(0,0,0,0.45) 100%);
	pointer-events: none;
	z-index: 1;
}

/* Letterbox bars optional toggle — disabled by default
.hero-mega::before {
	content: ''; position: absolute; left:0; right:0; top:0; height: 4vh;
	background: var(--c-bg-deep); z-index: 1;
}
*/

/* Hero text scramble container */
.scramble-char {
	display: inline-block;
	transition: opacity .15s, color .15s;
}

/* Hero corner brackets — premium frame */
.hero-mega__corner {
	position: absolute;
	width: 32px; height: 32px;
	border: 2px solid rgba(255,255,255,.3);
	z-index: 2;
	pointer-events: none;
}
.hero-mega__corner--tl { top: 24px; left: 24px; border-right: 0; border-bottom: 0; }
.hero-mega__corner--tr { top: 24px; right: 24px; border-left: 0; border-bottom: 0; }
.hero-mega__corner--bl { bottom: 24px; left: 24px; border-right: 0; border-top: 0; }
.hero-mega__corner--br { bottom: 24px; right: 24px; border-left: 0; border-top: 0; }
@media (max-width: 880px) {
	.hero-mega__corner { width: 18px; height: 18px; border-width: 1.5px; }
	.hero-mega__corner--tl, .hero-mega__corner--tr { top: 12px; }
	.hero-mega__corner--bl, .hero-mega__corner--br { bottom: 12px; }
	.hero-mega__corner--tl, .hero-mega__corner--bl { left: 12px; }
	.hero-mega__corner--tr, .hero-mega__corner--br { right: 12px; }
}

/* ===========================================================
   STATS — hover micro-interaction
   =========================================================== */
.stat {
	cursor: default;
	transition: transform .35s var(--ease-spring);
}
.stat:hover { transform: translateY(-4px); }
.stat:hover .stat__num {
	background: linear-gradient(180deg, #fff 0%, var(--c-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.stat:hover .stat__label {
	color: var(--c-text);
}
.stat__num, .stat__label {
	transition: color .25s var(--ease-soft), transform .25s var(--ease-soft);
}

/* ===========================================================
   BUTTONS — ripple effect on click
   =========================================================== */
.btn-pill {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.btn-pill::before {
	content: '';
	position: absolute;
	top: var(--ripple-y, 50%);
	left: var(--ripple-x, 50%);
	width: 0; height: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.3);
	transform: translate(-50%, -50%);
	pointer-events: none;
	z-index: -1;
}
.btn-pill.is-rippling::before {
	animation: ripple .6s var(--ease-fluid) forwards;
}
@keyframes ripple {
	from { width: 0; height: 0; opacity: 1; }
	to   { width: 600px; height: 600px; opacity: 0; }
}

/* ===========================================================
   PERSONA — hover takeover (premium)
   =========================================================== */
.persona__media img {
	transition: transform 1s var(--ease-fluid), filter .5s !important;
	filter: contrast(1.06) saturate(.7) brightness(.7);
}
.persona:hover .persona__media img {
	filter: contrast(1.06) saturate(1.05) brightness(1);
	transform: scale(1.05);
}
.persona__title, .persona__lead, .persona__chips, .persona__cta {
	transition: transform .5s var(--ease-fluid);
}
.persona:hover .persona__title,
.persona:hover .persona__lead,
.persona:hover .persona__chips,
.persona:hover .persona__cta {
	transform: translateY(-4px);
}

/* ===========================================================
   SECTION dividers — brand strokes
   =========================================================== */
.section--divider-top {
	position: relative;
}
.section--divider-top::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: clamp(60px, 8vw, 120px);
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--c-accent), transparent);
}

/* ===========================================================
   NEWSLETTER input — premium glass
   =========================================================== */
.newsletter__form {
	position: relative;
	max-width: 520px !important;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 999px;
	padding: 6px;
	transition: border-color .25s var(--ease-soft), background .25s;
}
.newsletter__form:focus-within {
	border-color: var(--c-accent);
	background: rgba(255,45,32,.05);
	box-shadow: 0 0 0 4px rgba(255,45,32,.1);
}
.newsletter__input {
	background: transparent !important;
	border: 0 !important;
	padding: 14px 22px !important;
}
.newsletter__input:focus {
	outline: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}
.newsletter__btn {
	border-radius: 999px;
	padding: 14px 24px !important;
}

/* ===========================================================
   VOUCHER hero — refined gradient
   =========================================================== */
.voucher-hero {
	background: linear-gradient(135deg, #260a08 0%, #0d0708 60%, #0a0a0c 100%) !important;
	border: 1px solid rgba(255,45,32,0.3) !important;
	box-shadow: 0 30px 80px -30px rgba(255,45,32,0.3);
}
.voucher-hero__media::after {
	background: linear-gradient(90deg, rgba(38,10,8,.7) 0%, rgba(38,10,8,.2) 50%, transparent 100%) !important;
}

/* ===========================================================
   TIMELINE — horizontal sticky scroll (desktop)
   =========================================================== */
@media (min-width: 1100px) {
	.timeline {
		display: flex !important;
		gap: 24px;
		grid-template-columns: none !important;
		overflow: visible;
	}
	.timeline::before {
		left: 4%; right: 4%;
		top: 38px;
	}
	.timeline__step {
		flex: 1;
		padding: 0 12px;
	}
	.timeline__step:hover .timeline__num {
		background: var(--c-accent);
		color: #fff;
		transform: scale(1.1);
		transition: background-color .3s var(--ease-spring), color .3s var(--ease-spring), transform .3s var(--ease-spring);
	}
}
.timeline__num { transition: transform .3s var(--ease-spring), color .3s var(--ease-spring); }

/* ===========================================================
   BENTO video — better fallback poster
   =========================================================== */
.bento-cell--video {
	background: linear-gradient(135deg, #1a0a0a 0%, #0a0a0c 100%) !important;
}

/* ===========================================================
   SECTION breathing — better rhythm
   =========================================================== */
.section--xl + .section--xl {
	border-top: 1px solid rgba(255,255,255,.04);
}

/* ===========================================================
   FOOTER polish
   =========================================================== */
.site-footer__col h3 {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 20px !important;
}
.site-footer__col h3::before {
	content: '';
	width: 4px; height: 14px;
	background: var(--c-accent);
	border-radius: 2px;
}

/* ===========================================================
   Prevent CLS — reserve hero space
   =========================================================== */
.hero-mega { min-height: 100vh; }

/* ===========================================================
   Bigger, more dramatic eyebrows
   =========================================================== */
.section-eyebrow {
	margin-bottom: 16px !important;
	font-weight: 700 !important;
}

/* ===========================================================
   Trust band item hover refinement
   =========================================================== */
.trust-item__num {
	transition: color .3s, transform .3s var(--ease-spring);
}
.trust-item:hover .trust-item__num {
	color: var(--c-accent);
	transform: scale(1.05);
}

/* ===========================================================
   Karta XL details on hover (refined)
   =========================================================== */
.card-xl__name { transition: color .25s; }
.card-xl:hover .card-xl__name { color: var(--c-accent-2); }

/* ===========================================================
   Brand strip — premium hover
   =========================================================== */
.brand-strip__item {
	transition: opacity .3s, transform .3s var(--ease-spring), color .3s;
	cursor: default;
	padding: 8px 4px;
	border-radius: 8px;
}
.brand-strip__item:hover {
	opacity: 1;
	color: #fff;
	transform: translateY(-2px);
}

/* ===========================================================
   Bottom-nav — glass refinement
   =========================================================== */
.bottom-nav {
	background: rgba(8, 8, 10, 0.92) !important;
}
.bottom-nav__item--cta {
	box-shadow: 0 8px 24px -8px var(--c-accent), inset 0 1px 0 rgba(255,255,255,.15);
}

/* ===========================================================
   Live-now widget — bardziej premium glass
   =========================================================== */
.live-now {
	background: rgba(8, 8, 10, 0.92) !important;
	box-shadow: 0 4px 30px -10px rgba(0,0,0,.5);
}

/* ===========================================================
   Sezonowy banner — bardziej dramatyczny
   =========================================================== */
.season-strip {
	background: linear-gradient(135deg, var(--c-accent) 0%, #d61c0e 50%, var(--c-accent) 100%) !important;
	background-size: 200% 100%;
	animation: seasonShine 8s ease-in-out infinite;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
}
@keyframes seasonShine {
	0%, 100% { background-position: 0% 50%; }
	50%      { background-position: 100% 50%; }
}

/* ===========================================================
   Marquee — fade gradient w pioniach
   =========================================================== */
.marquee {
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

/* ===========================================================
   IG feed — refinement
   =========================================================== */
.ig-feed__head {
	margin-bottom: 32px !important;
}
.ig-feed__name-handle {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-display);
}

/* ===========================================================
   FAQ — refinement
   =========================================================== */
.faq-premium summary {
	font-family: var(--font-display);
	font-size: 1.08rem !important;
	letter-spacing: -0.015em;
}

/* ===========================================================
   Page enter — smoother
   =========================================================== */
@keyframes pageEnter {
	from { opacity: 0; transform: translateY(20px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ===========================================================
   Focus-visible refinement
   =========================================================== */
:focus-visible {
	outline: 2px solid var(--c-accent) !important;
	outline-offset: 4px !important;
	border-radius: 6px;
}

/* ===========================================================
   CTA Final — even more dramatic
   =========================================================== */
.cta-final h2 {
	background: linear-gradient(180deg, #fff 0%, rgba(255,255,255,.7) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
.cta-final::before {
	background: radial-gradient(circle at center, rgba(255,45,32,0.3) 0%, transparent 50%) !important;
}

/* ===========================================================
   Magazine gallery — better hover
   =========================================================== */
.gallery-mag__item {
	cursor: zoom-in;
}
.gallery-mag__item:hover {
	box-shadow: 0 24px 60px -16px rgba(0,0,0,.5);
	z-index: 2;
}

/* ===========================================================
   Big quote — more premium
   =========================================================== */
.big-quote__text em {
	background: linear-gradient(180deg, #ff5640 0%, var(--c-accent) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ===========================================================
   Selection style refined
   =========================================================== */
::selection {
	background: var(--c-accent);
	color: #fff;
	text-shadow: none;
}

/* ===== style-v10.css ===== */
/* =========================================================================
   ICF Karting — v10 (final fixes pass)
   - Persona desaturate fix (only on hover)
   - Bento + persona object-position better cropping
   - Vignette softer
   - Cursor STRONGER (dual-ring premium)
   - Photo grading lżejszy (default, mocniejszy tylko na hover)
   ========================================================================= */

/* ===========================================================
   FIX: Persona images JASNE — dobrze widoczne
   =========================================================== */
.persona__media img {
	transition: transform 1s var(--ease-fluid), filter .5s !important;
	filter: contrast(1.05) saturate(1.05) brightness(1.1) !important;
}
.persona:hover .persona__media img {
	filter: contrast(1.08) saturate(1.1) brightness(1.15) !important;
	transform: scale(1.06) !important;
}

/* Persona overlay — bardziej wyższy stop transparent (zostaw więcej widocznego image) */
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 45%,
		rgba(0,0,0,.55) 75%,
		rgba(6,6,8,.95) 100%) !important;
}

/* ===========================================================
   FIX: Object-position — różne dla różnych zdjęć (wartości właściwe)
   =========================================================== */
.bento-cell__media img,
.card-xl__media img,
.fleet-card__media img {
	object-position: center 40% !important;
}

/* Persona — pokaż akcję w środku-dolnej części (gdzie zwykle jest motion) */
.persona__media img {
	object-position: center center !important;
}

/* Voucher hero — twarz kierowcy w prawej górnej części */
.voucher-hero__media img {
	object-position: 70% 30% !important;
}

/* Hero video object-position default center */
.hero-mega__media video,
.hero-mega__media img,
.bento-cell--video video,
.ambient video {
	object-position: center center !important;
}

/* ===========================================================
   FIX: Photo grading — default lżejszy, mocniej tylko hero
   =========================================================== */
.bento-cell__media img,
.bento-cell__media video,
.persona__media img,
.split__media img,
.gallery-mag__item img,
.fleet-card__media img,
.voucher-hero__media img {
	filter: contrast(1.03) saturate(1.02) brightness(1) !important;
}

/* Hero zostaje cinematic */
.hero-mega__media img,
.hero-mega__media video {
	filter: contrast(1.05) saturate(.95) brightness(.95) !important;
}

/* ===========================================================
   FIX: Vignette w hero — łagodniejszy
   =========================================================== */
.hero-mega::after {
	background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.3) 100%) !important;
}

/* ===========================================================
   FIX: Bento overlay nawet jaśniejsza
   =========================================================== */
.bento-cell__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 50%,
		rgba(0,0,0,.5) 78%,
		rgba(6,6,8,.92) 100%) !important;
}

/* ===========================================================
   FIX: Persona overlay też lżejszy
   =========================================================== */
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 30%,
		rgba(0,0,0,.5) 65%,
		rgba(6,6,8,.95) 100%) !important;
}

/* ===========================================================
   CURSOR — premium DUAL RING design (mocniejszy, bardziej widoczny)
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	.cursor-dot {
		position: fixed;
		top: 0; left: 0;
		width: 8px; height: 8px;
		background: var(--c-accent);
		border-radius: 50%;
		pointer-events: none;
		z-index: 9998;
		transform: translate(-50%, -50%);
		opacity: 0;
		mix-blend-mode: normal !important;
		box-shadow: 0 0 12px rgba(255,45,32,.8), 0 0 24px rgba(255,45,32,.4);
		transition: width .3s var(--ease-spring), height .3s var(--ease-spring),
		            opacity .25s, background .25s;
		will-change: transform;
	}
	.cursor-dot.is-active { opacity: 1; }
	.cursor-dot.is-hover {
		width: 50px;
		height: 50px;
		background: transparent;
		border: 2px solid var(--c-accent);
		box-shadow: 0 0 20px rgba(255,45,32,.6);
	}

	/* Outer ring follow */
	.cursor-ring {
		position: fixed;
		top: 0; left: 0;
		width: 36px; height: 36px;
		border: 1.5px solid rgba(255,45,32,.5);
		border-radius: 50%;
		pointer-events: none;
		z-index: 9997;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: opacity .3s, width .3s var(--ease-spring), height .3s var(--ease-spring),
		            background .3s, border-color .3s;
		will-change: transform;
	}
	.cursor-ring.is-active { opacity: 1; }
	.cursor-ring.is-hover {
		width: 0; height: 0;
		border-color: transparent;
	}

	/* Hide native cursor only on certain hover targets */
	a, button, .btn-pill, .bento-cell, .persona, .pass, .card-xl, .ig-post, .gallery-mag__item, .segm-card, summary { cursor: pointer; }
}

/* ===========================================================
   FIX: Zostaw wszystkie obrazy dobrej jakości (filter na max LIGHT)
   =========================================================== */
.gallery-mag__item img { filter: contrast(1.05) saturate(1.05) !important; }
.gallery-mag__item:hover img { filter: contrast(1.05) saturate(1.1) brightness(1.05) !important; }

/* ===========================================================
   FIX: Hero EST badge widocznerzy
   =========================================================== */
.hero-mega__est {
	color: rgba(255,255,255,.85) !important;
}
.hero-mega__est::before, .hero-mega__est::after {
	background: rgba(255,255,255,.5) !important;
}

/* ===========================================================
   FIX: Hero corner brackets bardziej widoczne
   =========================================================== */
.hero-mega__corner {
	border-color: rgba(255,255,255,.45) !important;
	border-width: 2px !important;
}

/* ===========================================================
   FIX: Bento min-height żeby brak pustych miejsc
   =========================================================== */
.bento-cell { min-height: 280px !important; }
.bento-cell--feature { min-height: 380px !important; }
@media (max-width: 720px) {
	.bento-cell { min-height: 240px !important; }
	.bento-cell--feature { min-height: 300px !important; }
}

/* Bento media full coverage */
.bento-cell__media {
	position: absolute;
	inset: 0 !important;
	z-index: -1;
}
.bento-cell__media img,
.bento-cell__media video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* ===========================================================
   FIX: video poster fallback — czarne tło ale subtle
   =========================================================== */
.bento-cell--video {
	background: linear-gradient(135deg, #1a0a0a 0%, #0a0a0c 100%) !important;
}
.bento-cell--video .bento-cell__media {
	background: linear-gradient(135deg, #1a0a0a 0%, #0a0a0c 100%);
}

/* ===========================================================
   Dark frame around hero (subtle border accent)
   =========================================================== */
.hero-mega { border-bottom: 1px solid rgba(255,255,255,.06); }

/* ===========================================================
   Persona min-height fix
   =========================================================== */
.persona { min-height: 460px !important; }
@media (max-width: 720px) {
	.persona { min-height: 380px !important; }
}

/* ===== style-v11.css ===== */
/* =========================================================================
   ICF Karting — v11 (cleanup pass — usuwam halucynacje + cursor)
   - Custom cursor REMOVED (problematyczny przy scrollu)
   - Hide hallucinated stats (replace with real data)
   - Brand strip → placeholder
   - Live-now liczby → simple status
   - Leaderboard → hidden (mock data)
   - Testimonials → placeholder mode
   - Hero rating → simple "Sprawdź opinie w Google" link
   ========================================================================= */

/* ===========================================================
   USUŃ custom cursor (user feedback: znika przy scrollu, gorszy)
   =========================================================== */
.cursor-dot, .cursor-ring { display: none !important; }
* { cursor: auto; }
a, button, .btn-pill, .bento-cell, .persona, .pass, .compare__col, .testimonial-v2,
.ig-post, .gallery-mag__item, .segm-card, .card-xl, .bottom-nav__item, summary {
	cursor: pointer;
}

/* ===========================================================
   USUŃ live-now widget z fake liczbami (zostawiam pod headerem statys ale prosty)
   =========================================================== */
.live-now { display: none !important; }

/* ===========================================================
   USUŃ urgency line (dziś o 16:30 — fake)
   =========================================================== */
.urgency-line { display: none !important; }

/* ===========================================================
   USUŃ brand strip (fake klienci) — zostaje neutralny placeholder
   =========================================================== */
.brand-strip__list {
	opacity: 0.4 !important;
}
.brand-strip__item {
	color: rgba(255,255,255,.55) !important;
	font-style: italic;
	font-size: 0.95rem !important;
	font-weight: 500 !important;
}
.brand-strip__item span { color: rgba(255,255,255,.4) !important; }
.brand-strip__label::after {
	content: ' (przykład — tu trafią logo prawdziwych klientów)';
	color: var(--c-text-3);
	font-style: italic;
	letter-spacing: 0;
	font-size: 0.65rem;
	text-transform: none;
	font-weight: 400;
}

/* ===========================================================
   USUŃ trust band (fake stats) — zachować ale tylko verified data
   =========================================================== */
/* Nie usuwam całej sekcji — zmieniam wyświetlane liczby przez HTML edits */

/* ===========================================================
   USUŃ Google rating w hero — replace text z linkiem
   =========================================================== */
.hero-mega__rating { display: none !important; }

/* ===========================================================
   Leaderboard w bento — oznaczyć jako Demo wyraźnie
   =========================================================== */
.bento-cell--board, .bento-cell--quote { display: none !important; }

/* ===========================================================
   IG feed — usun fake liczby followersów/postów
   =========================================================== */
.ig-feed__name-stats { display: none !important; }
.ig-feed__live { display: none !important; }

/* Stats w hero features — verified only */
.hero-mega__features { gap: 18px !important; }

/* Persona images — final brightness override (v10 conflict) */
.persona__media img {
	filter: contrast(1.08) saturate(1.1) brightness(1.15) !important;
	object-position: center 30% !important;
}
.persona:hover .persona__media img {
	filter: contrast(1.1) saturate(1.15) brightness(1.2) !important;
	transform: scale(1.06) !important;
}

/* Persona overlay jeszcze lżejsze — image musi być widoczne */
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 50%,
		rgba(0,0,0,.5) 78%,
		rgba(6,6,8,.95) 100%) !important;
}

/* Badges-strip ukryć (były fake liczby) */
.badges-strip { display: none !important; }

/* ===========================================================
   Stat numbers — only verified data shown
   =========================================================== */
/* Stats sekcja: 600m, 2000 m², 17 gokartów, 1600 m² otwarta — verified */

/* ===========================================================
   Sezonowy banner — generic version (bez konkretnych cen)
   =========================================================== */
/* Zostawiam jak jest bo treść z briefu */

/* ===========================================================
   EST. 2013 hero badge — usuń (nie verified)
   =========================================================== */
.hero-mega__est { display: none !important; }

/* ===========================================================
   Trust band — make smaller (mniej wymyślonych liczb)
   =========================================================== */
.trust-item__num { font-family: var(--font-display); font-weight: 600 !important; }

/* ===========================================================
   Bento — better layout bez quote/board
   =========================================================== */
.bento { grid-template-columns: repeat(3, 1fr) !important; }
@media (max-width: 880px) {
	.bento { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 720px) {
	.bento { grid-template-columns: 1fr !important; }
}

/* ===========================================================
   Slot widget — clearly mark as Demo
   =========================================================== */
.bento-cell--slot::before {
	content: 'WIDŻET PRZYKŁADOWY — w produkcji łączy się z systemem rezerwacji';
	position: absolute;
	bottom: 8px; left: 12px; right: 12px;
	font-size: 0.55rem;
	color: var(--c-text-3);
	letter-spacing: 0.04em;
	font-weight: 500;
	z-index: 5;
	text-align: center;
	opacity: 0.7;
}

/* ===========================================================
   Cleanup section spacing
   =========================================================== */
body { padding-bottom: 0 !important; }
@media (max-width: 720px) {
	body { padding-bottom: 88px !important; } /* keep room for bottom-nav */
}

/* ===== style-v12.css ===== */
/* =========================================================================
   ICF Karting — v12 (real data + USP focus + clean cursor)
   - Real Google data: 1081 opinii / 4,4★
   - Hybrid track USP highlighted
   - Better cursor (no glitch, no scroll disappearing)
   - USP banner section
   ========================================================================= */

/* ===========================================================
   CURSOR v12 — clean, działa przy scrollu, no mix-blend chaos
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	/* Activate cursor (override v11 disable) */
	.cursor-dot, .cursor-ring { display: block !important; }

	html, body {
		cursor: none;
	}

	.cursor-dot {
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 6px !important; height: 6px !important;
		background: var(--c-accent) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 99999 !important;
		transform: translate3d(-50%, -50%, 0);
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		box-shadow: 0 0 6px rgba(255,45,32,.9) !important;
		transition: width .25s var(--ease-spring), height .25s var(--ease-spring),
		            background .2s, opacity .2s;
		will-change: transform;
	}
	.cursor-dot.is-hover {
		width: 12px !important; height: 12px !important;
		background: #fff !important;
		box-shadow: 0 0 8px rgba(255,255,255,.7), 0 0 16px var(--c-accent) !important;
	}

	.cursor-ring {
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 32px !important; height: 32px !important;
		border: 1.5px solid rgba(255,45,32,.55) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 99998 !important;
		transform: translate3d(-50%, -50%, 0);
		opacity: 1 !important;
		transition: width .35s var(--ease-spring), height .35s var(--ease-spring),
		            border-color .25s, background .25s;
		will-change: transform;
	}
	.cursor-ring.is-hover {
		width: 56px !important; height: 56px !important;
		border-color: rgba(255,255,255,.8) !important;
		background: rgba(255,45,32,.08);
	}

	/* Use native cursor on inputs and form fields */
	input, textarea, select {
		cursor: text !important;
	}
	body:has(input:focus, textarea:focus) {
		cursor: auto;
	}

	/* No native cursor anywhere else */
	a, button, .btn-pill, summary, [role="button"], .bento-cell, .persona,
	.pass, .compare__col, .testimonial-v2, .ig-post, .gallery-mag__item,
	.segm-card, .card-xl, .bottom-nav__item, label, [onclick] {
		cursor: none !important;
	}
}

/* ===========================================================
   HYBRID USP BANNER — wyróżnik w sekcji stats
   =========================================================== */
.usp-banner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 24px;
	align-items: center;
	padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px);
	background: linear-gradient(135deg, rgba(255,45,32,0.08) 0%, rgba(255,255,255,0.02) 100%);
	border: 1px solid rgba(255,45,32,0.25);
	border-radius: var(--radius-card);
	max-width: 1240px;
	margin: 32px auto 0;
}
@media (max-width: 720px) {
	.usp-banner { grid-template-columns: 1fr; gap: 14px; text-align: left; padding: 20px; }
	.usp-banner__cta { width: 100%; }
}

.usp-banner__icon {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--c-accent) 0%, #ff5640 100%);
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 10px 30px -10px var(--c-accent);
}
.usp-banner__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }

.usp-banner__text {
	display: flex; flex-direction: column; gap: 4px;
}
.usp-banner__eyebrow {
	color: var(--c-accent);
	font-size: 0.72rem; font-weight: 700;
	letter-spacing: 0.16em; text-transform: uppercase;
}
.usp-banner__title {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
	line-height: 1.25;
}
.usp-banner__title em { color: var(--c-accent); font-style: normal; }

.usp-banner__cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 12px 20px;
	border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.12);
	color: #fff;
	font-weight: 600; font-size: 0.88rem;
	white-space: nowrap;
	transition: background-color .25s var(--ease-soft), border-color .25s var(--ease-soft), color .25s var(--ease-soft);
}
.usp-banner__cta:hover {
	background: rgba(255,45,32,.15);
	border-color: var(--c-accent);
	color: #fff;
}

/* ===========================================================
   GOOGLE RATING bar — real data display
   =========================================================== */
.google-rating {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 14px 22px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 999px;
	transition: border-color .25s var(--ease-soft);
}
.google-rating:hover { border-color: rgba(255,45,32,.4); }
.google-rating__logo {
	width: 22px; height: 22px;
	background: conic-gradient(from 90deg, #4285f4 0deg 90deg, #ea4335 90deg 180deg, #fbbc04 180deg 270deg, #34a853 270deg 360deg);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
}
.google-rating__logo::after {
	content: 'G';
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	font-weight: 700;
	font-size: 0.85rem;
	font-family: var(--font-display);
}
.google-rating__stars {
	color: #fbbc04;
	letter-spacing: 1px;
	font-size: 0.95rem;
}
.google-rating__num {
	font-family: var(--font-display);
	font-weight: 700;
	color: #fff;
	font-size: 1rem;
	font-variant-numeric: tabular-nums;
}
.google-rating__count {
	color: var(--c-text-3);
	font-size: 0.82rem;
}

/* Hide the brand-strip disclaimer suffix - placeholder text strip can stay clean */
.brand-strip__label::after { display: none !important; }

/* Brand strip — neutral font (placeholder is obvious enough already) */
.brand-strip__item {
	font-style: italic;
	opacity: 0.4;
}
.brand-strip__list { opacity: 1 !important; }

/* ===========================================================
   Better fleet breakdown chip
   =========================================================== */
.fleet-breakdown span { font-family: var(--font-display); }

/* ===========================================================
   Photo grading — even brighter for personas (force override)
   =========================================================== */
.persona__media img {
	filter: contrast(1.05) saturate(1.1) brightness(1.2) !important;
}
.persona:hover .persona__media img {
	filter: contrast(1.08) saturate(1.15) brightness(1.25) !important;
}
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 55%,
		rgba(0,0,0,.5) 80%,
		rgba(6,6,8,.95) 100%) !important;
}

/* ===== style-v13.css ===== */
/* =========================================================================
   ICF Karting — v13 (CONSOLIDATION + cursor master fix)
   - Bulletproof cursor (działa wszędzie, animowany, czerwony)
   - Mniej szumu wizualnego (grain, vignette, multiple gradients)
   - Lepsze filtry fotek (jaśniejsze)
   - Persona personas refined
   - Section spacing rytmu
   ========================================================================= */

/* ===========================================================
   CURSOR MASTER FIX — bulletproof, działa zawsze, wszędzie
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	/* Override v11 `* { cursor: auto }` — cursor: none na WSZYSTKIM */
	* { cursor: none !important; }

	/* Wyjątki: inputs i textareas pokazują native text cursor */
	input, textarea, select, [contenteditable] { cursor: text !important; }

	/* Cursor dot — zawsze widoczny, żaden mix-blend, żaden conflict */
	.cursor-dot {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 8px !important;
		height: 8px !important;
		background: #ff2d20 !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999999 !important;
		opacity: 1 !important;
		visibility: visible !important;
		mix-blend-mode: normal !important;
		box-shadow:
			0 0 8px rgba(255,45,32,.9),
			0 0 16px rgba(255,45,32,.5) !important;
		transition: width .25s cubic-bezier(.34,1.56,.64,1),
		            height .25s cubic-bezier(.34,1.56,.64,1),
		            background .2s !important;
		will-change: transform;
		transform: translate3d(-50%, -50%, 0);
	}

	.cursor-ring {
		display: block !important;
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		width: 36px !important;
		height: 36px !important;
		border: 1.5px solid rgba(255, 45, 32, 0.5) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999998 !important;
		opacity: 1 !important;
		visibility: visible !important;
		mix-blend-mode: normal !important;
		transition: width .35s cubic-bezier(.34,1.56,.64,1),
		            height .35s cubic-bezier(.34,1.56,.64,1),
		            border-color .25s,
		            background-color .25s !important;
		will-change: transform;
		transform: translate3d(-50%, -50%, 0);
	}

	.cursor-dot.is-hover {
		width: 0 !important; height: 0 !important;
	}

	.cursor-ring.is-hover {
		width: 60px !important;
		height: 60px !important;
		border-color: rgba(255, 45, 32, 0.9) !important;
		background: rgba(255, 45, 32, 0.12);
		border-width: 2px !important;
	}
}

/* Mobile/touch — usuń cursor elementy */
@media (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring { display: none !important; }
	* { cursor: auto !important; }
	a, button, .btn-pill, summary { cursor: pointer !important; }
}

/* ===========================================================
   USUŃ FILM GRAIN — distractant
   =========================================================== */
body::before { display: none !important; opacity: 0 !important; }

/* ===========================================================
   USUŃ HERO VIGNETTE — robi za ciemno
   =========================================================== */
.hero-mega::after { display: none !important; }

/* ===========================================================
   PHOTO GRADING — JAŚNIEJSZE wszędzie (default)
   =========================================================== */
.bento-cell__media img,
.bento-cell__media video,
.persona__media img,
.split__media img,
.gallery-mag__item img,
.fleet-card__media img,
.voucher-hero__media img,
.card-xl__media img {
	filter: contrast(1.05) saturate(1.05) brightness(1.05) !important;
}

/* Hero zostaje cinematic ale lżejszy */
.hero-mega__media img,
.hero-mega__media video {
	filter: contrast(1.05) saturate(1) brightness(1) !important;
}

/* ===========================================================
   PERSONAS — final brightness + better gradient
   =========================================================== */
.persona__media img {
	filter: contrast(1.05) saturate(1.1) brightness(1.15) !important;
}
.persona:hover .persona__media img {
	filter: contrast(1.08) saturate(1.15) brightness(1.2) !important;
	transform: scale(1.05) !important;
}
.persona__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 50%,
		rgba(0,0,0,.55) 78%,
		rgba(6,6,8,.95) 100%) !important;
}

/* ===========================================================
   BENTO overlay — jaśniejsze
   =========================================================== */
.bento-cell__media::after {
	background: linear-gradient(180deg,
		transparent 0%,
		transparent 50%,
		rgba(0,0,0,.45) 75%,
		rgba(6,6,8,.92) 100%) !important;
}

/* ===========================================================
   SECTION SPACING — bardziej oddychające
   =========================================================== */
.section--xl { padding: clamp(64px, 8vw, 120px) 0 !important; }

/* ===========================================================
   SEZONOWY banner — mniej intrusive
   =========================================================== */
.season-strip { padding: 10px 16px !important; font-size: 0.82rem !important; }

/* ===========================================================
   USP banner — mocniejszy bg
   =========================================================== */
.usp-banner {
	background: linear-gradient(135deg, rgba(255,45,32,0.15) 0%, rgba(255,86,64,0.05) 100%) !important;
	border: 1px solid rgba(255,45,32,0.4) !important;
	box-shadow: 0 20px 60px -20px rgba(255,45,32,0.3);
}

/* ===========================================================
   SECTION dividers gone (mniej szumu)
   =========================================================== */
.section--xl + .section--xl { border-top: 0 !important; }

/* ===========================================================
   CARD hover — clean, jeden hover style
   =========================================================== */
.bento-cell:hover, .persona:hover, .pass:hover, .lemans-card:hover,
.testimonial-v2:hover, .compare__col:hover, .card-xl:hover {
	border-color: rgba(255, 45, 32, 0.5) !important;
	transform: translateY(-4px) !important;
	box-shadow: 0 30px 60px -20px rgba(0,0,0,0.6),
	            0 0 0 1px rgba(255,45,32,0.15) !important;
}

/* ===========================================================
   Sticky chapter nav refinement (lepsze widoczne)
   =========================================================== */
.chapter-nav__dot {
	width: 12px !important;
	height: 12px !important;
	background: rgba(255,255,255,.25) !important;
}
.chapter-nav__dot.is-active {
	background: var(--c-accent) !important;
	box-shadow: 0 0 12px var(--c-accent);
	transform: scale(1.5) !important;
}

/* ===========================================================
   Hero CTA primary — pulse mniej intensywne
   =========================================================== */
.hero-mega__ctas .btn-pill--primary {
	animation: heroCtaPulse 3.5s var(--ease-soft) infinite !important;
}

/* ===========================================================
   Body — usuń padding-bottom na desktop (causing weird gaps)
   =========================================================== */
body { padding-bottom: 0 !important; }
@media (max-width: 720px) {
	body { padding-bottom: 88px !important; }
}

/* ===========================================================
   Hero corner brackets — bardziej widoczne
   =========================================================== */
.hero-mega__corner {
	border-color: rgba(255, 255, 255, 0.5) !important;
	width: 36px !important;
	height: 36px !important;
}

/* ===========================================================
   Newsletter — better contrast
   =========================================================== */
.newsletter__inner {
	background: rgba(255,255,255,.03) !important;
	border-color: rgba(255,255,255,.08) !important;
}

/* ===========================================================
   Testimonials — wyraźniejszy disclaimer
   =========================================================== */
.testimonial-v2 { background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%) !important; }

/* ===========================================================
   Footer — clean
   =========================================================== */
.site-footer__col h3::before { background: var(--c-accent); }

/* ===========================================================
   FAQ — refinement
   =========================================================== */
.faq-premium summary { padding: 24px 28px !important; }
.faq-premium__answer { padding: 0 28px 26px !important; }

/* ===========================================================
   Page enter — subtle
   =========================================================== */
@keyframes pageEnter {
	from { opacity: 0; }
	to   { opacity: 1; }
}
body { animation: pageEnter .6s ease-out both !important; }

/* ===========================================================
   Section eyebrow — more elegant
   =========================================================== */
.section-eyebrow {
	background: rgba(255,45,32,.12) !important;
	color: var(--c-accent-2) !important;
	border: 1px solid rgba(255,45,32,.3) !important;
	padding: 6px 16px !important;
	font-size: 0.7rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
}

/* ===========================================================
   Reveal — smoother (transition !important, transform delegowany do .reveal w style-v2.css
   żeby .is-visible mogło nadpisać translateY(0))
   =========================================================== */
.reveal {
	transition: opacity 1s var(--ease-fluid), transform 1s var(--ease-fluid) !important;
}

/* ===== style-v14.css ===== */
/* =========================================================================
   ICF Karting — v14 (Apple-grade + Rankings + Randka fix)
   - Rankings/Leaderboard premium section (podium + top 10)
   - Randka persona: heart overlay + couple treatment
   - Apple-style: cinematic section transitions, big reveal moments
   ========================================================================= */

/* ===========================================================
   RANKINGS — premium leaderboard section
   =========================================================== */
.rankings {
	background: linear-gradient(180deg, #0a0a0c 0%, #060608 100%);
	position: relative;
	overflow: hidden;
}
.rankings::before {
	content: '';
	position: absolute; inset: 0;
	background: radial-gradient(ellipse at 50% 0%, rgba(255,45,32,0.08) 0%, transparent 50%);
	pointer-events: none;
}

.rankings__head {
	display: flex; justify-content: space-between; align-items: end;
	gap: 32px; flex-wrap: wrap;
	margin-bottom: 48px;
	max-width: 1240px; margin-inline: auto;
	padding: 0 var(--gutter);
}
.rankings__head h2 { margin: 0; }
.rankings__source {
	display: inline-flex; align-items: center; gap: 12px;
	padding: 12px 20px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.1);
	border-radius: 999px;
	font-size: 0.88rem;
	color: var(--c-text-2);
	text-decoration: none;
	transition: border-color .25s var(--ease-soft), color .25s var(--ease-soft);
}
.rankings__source:hover { border-color: rgba(255,45,32,.4); color: #fff; }
.rankings__source-logo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	background: var(--c-accent);
	border-radius: 4px;
	color: #fff;
	font-weight: 800;
	font-size: 0.7rem;
	font-family: var(--font-display);
}

/* Podium — top 3 */
.rankings__podium {
	display: grid;
	grid-template-columns: 1fr 1.2fr 1fr;
	gap: 16px;
	align-items: end;
	max-width: 920px;
	margin: 0 auto 56px;
	padding: 0 var(--gutter);
}
@media (max-width: 720px) { .rankings__podium { grid-template-columns: 1fr; gap: 12px; } }

.podium-card {
	position: relative;
	padding: 28px 24px 24px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	transition: transform .35s var(--ease-spring), border-color .25s;
	text-align: center;
}
.podium-card:hover { transform: translateY(-6px); border-color: rgba(255,45,32,.4); }
.podium-card--gold {
	padding-top: 40px;
	background: linear-gradient(180deg, rgba(255,180,0,.12) 0%, rgba(255,255,255,.02) 100%);
	border-color: rgba(255,180,0,.45);
	box-shadow: 0 30px 80px -20px rgba(255,180,0,.25);
}
.podium-card--gold:hover { border-color: rgba(255,180,0,.7); }
.podium-card--silver { background: linear-gradient(180deg, rgba(192,192,192,.1) 0%, rgba(255,255,255,.02) 100%); border-color: rgba(192,192,192,.3); }
.podium-card--bronze { background: linear-gradient(180deg, rgba(205,127,50,.1) 0%, rgba(255,255,255,.02) 100%); border-color: rgba(205,127,50,.3); }

.podium-rank {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 1.4rem;
	margin-bottom: 16px;
	font-variant-numeric: tabular-nums;
}
.podium-card--gold .podium-rank { background: linear-gradient(135deg, #ffd700 0%, #ff8c00 100%); color: #1a1a1a; box-shadow: 0 8px 24px -8px rgba(255,180,0,.6); }
.podium-card--silver .podium-rank { background: linear-gradient(135deg, #e8e8e8 0%, #a8a8a8 100%); color: #1a1a1a; }
.podium-card--bronze .podium-rank { background: linear-gradient(135deg, #cd9d6f 0%, #cd7f32 100%); color: #1a1a1a; }

.podium-name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: #fff;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.podium-meta { font-size: 0.78rem; color: var(--c-text-3); margin-bottom: 16px; }
.podium-time {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 800;
	letter-spacing: -0.04em;
	color: #fff;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.podium-card--gold .podium-time { color: #ffd700; }
.podium-card--silver .podium-time { color: #d8d8d8; }
.podium-card--bronze .podium-time { color: #cd7f32; }

.podium-card__crown {
	position: absolute;
	top: -16px; left: 50%;
	transform: translateX(-50%);
	font-size: 1.6rem;
	filter: drop-shadow(0 4px 12px rgba(255,180,0,.5));
}

/* Rankings table — top 10 */
.rankings__table {
	max-width: 920px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.rankings__tabs {
	display: flex; gap: 4px;
	margin-bottom: 16px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.06);
	border-radius: 14px;
	padding: 4px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.rankings__tabs::-webkit-scrollbar { display: none; }
.rankings__tab {
	flex: 1; min-width: 130px;
	padding: 10px 16px;
	background: transparent;
	border: 0;
	border-radius: 10px;
	color: var(--c-text-2);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: color .2s var(--ease-soft), background-color .2s var(--ease-soft);
	white-space: nowrap;
	text-align: center;
}
.rankings__tab:hover { color: #fff; }
.rankings__tab.is-active {
	background: var(--c-accent);
	color: #fff;
	box-shadow: 0 6px 20px -6px var(--c-accent);
}

.rankings__list {
	background: linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.005) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 18px;
	overflow: hidden;
}
.ranking-row {
	display: grid;
	grid-template-columns: 50px 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-bottom: 1px solid rgba(255,255,255,.05);
	transition: background .2s var(--ease-soft);
}
.ranking-row:last-child { border-bottom: 0; }
.ranking-row:hover { background: rgba(255,255,255,.03); }
.ranking-row--top { background: rgba(255,45,32,.04); }
.ranking-row__pos {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--c-text-3);
	font-variant-numeric: tabular-nums;
}
.ranking-row--top .ranking-row__pos { color: var(--c-accent); }
.ranking-row__name {
	font-weight: 600;
	color: #fff;
	font-size: 0.98rem;
	letter-spacing: -0.01em;
}
.ranking-row__name small { display: block; color: var(--c-text-3); font-size: 0.78rem; font-weight: 400; margin-top: 2px; }
.ranking-row__class {
	display: inline-flex;
	padding: 4px 10px;
	background: rgba(255,255,255,.06);
	border-radius: 999px;
	font-size: 0.7rem;
	color: var(--c-text-2);
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.ranking-row__time {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}
.ranking-row--top .ranking-row__time { color: var(--c-accent); }

@media (max-width: 540px) {
	.ranking-row { grid-template-columns: 36px 1fr auto; padding: 14px 16px; gap: 10px; }
	.ranking-row__class { display: none; }
	.ranking-row__name { font-size: 0.92rem; }
	.ranking-row__time { font-size: 0.95rem; }
}

.rankings__cta {
	text-align: center; margin-top: 32px;
}

/* ===========================================================
   RANDKA persona fix — heart overlay + romantic feel
   =========================================================== */
.persona--couple .persona__media::after {
	background:
		radial-gradient(circle at 80% 20%, rgba(255,45,32,0.25) 0%, transparent 40%),
		linear-gradient(180deg, transparent 0%, transparent 50%, rgba(0,0,0,.55) 78%, rgba(6,6,8,.95) 100%) !important;
}
.persona--couple::after {
	content: '❤';
	position: absolute;
	top: 18px; right: 22px;
	font-size: 1.8rem;
	color: var(--c-accent);
	z-index: 2;
	filter: drop-shadow(0 0 12px rgba(255,45,32,.6));
	animation: heartBeat 2s ease-in-out infinite;
}
@keyframes heartBeat {
	0%, 100% { transform: scale(1); }
	15%      { transform: scale(1.15); }
	30%      { transform: scale(1); }
	45%      { transform: scale(1.1); }
	60%      { transform: scale(1); }
}
.persona--couple .persona__chips span {
	background: rgba(255,45,32,0.12) !important;
	border-color: rgba(255,45,32,0.3) !important;
}

/* ===========================================================
   APPLE-style: stronger reveal animation z color shift
   =========================================================== */
.section-reveal-bg {
	position: relative;
}
.section-reveal-bg::before {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, transparent 30%);
	pointer-events: none;
	z-index: 1;
}

/* Big number reveal effect */
.stat__num {
	background: linear-gradient(180deg, #fff 30%, rgba(255,255,255,.4) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* ===========================================================
   Apple-style hero CTA — subtle continuous shine
   =========================================================== */
.hero-mega__ctas .btn-pill--primary {
	position: relative;
	overflow: hidden;
}
.hero-mega__ctas .btn-pill--primary::after {
	content: '';
	position: absolute;
	top: 0; left: -100%;
	width: 100%; height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
	transform: skewX(-20deg);
	animation: ctaShine 4s ease-in-out infinite;
	pointer-events: none;
}
@keyframes ctaShine {
	0% { left: -100%; }
	60%, 100% { left: 200%; }
}

/* ===========================================================
   Smooth scroll snap optional na sekcjach
   =========================================================== */
html { scroll-behavior: smooth; }

/* ===========================================================
   Apple-style section transitions: dark fade
   =========================================================== */
.section--xl + .section--xl::before {
	content: '';
	position: absolute; top: 0; left: 0; right: 0;
	height: 100px;
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, transparent 100%);
	pointer-events: none;
	z-index: 0;
}
.section--xl { position: relative; }
.section--xl > * { position: relative; z-index: 1; }

/* ===========================================================
   Hero ending fade — smooth transition to next
   =========================================================== */
.hero-mega::before {
	content: '';
	position: absolute;
	bottom: 0; left: 0; right: 0;
	height: 120px;
	background: linear-gradient(180deg, transparent 0%, var(--c-bg-deep) 100%);
	pointer-events: none;
	z-index: 1;
}

/* ===========================================================
   Section bg colorshift — alternate
   =========================================================== */
.section--bg-warm {
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #100808 50%, var(--c-bg-deep) 100%) !important;
}

/* ===========================================================
   Better divider between sections
   =========================================================== */
.divider-grad {
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255,45,32,.5) 50%, transparent 100%);
	margin: 0 auto;
	max-width: 800px;
}

/* ===========================================================
   Add nav menu link for Blog (responsive)
   =========================================================== */
.site-nav__list .has-blog { display: list-item; }

/* ===========================================================
   Article — blog single page styles
   =========================================================== */
.article-hero {
	min-height: 70vh;
	display: flex;
	align-items: flex-end;
	padding: clamp(80px, 12vw, 160px) 0 clamp(60px, 8vw, 100px);
	background: linear-gradient(180deg, transparent 0%, var(--c-bg-deep) 100%);
	position: relative;
	overflow: hidden;
}
.article-hero__bg {
	position: absolute; inset: 0;
	z-index: -1;
	overflow: hidden;
}
.article-hero__bg img {
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0.45;
}
.article-hero__bg::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 0%, var(--c-bg-deep) 100%);
}
.article-hero__inner {
	max-width: 880px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.article-meta {
	display: flex; gap: 20px; flex-wrap: wrap;
	margin-bottom: 16px;
	font-size: 0.85rem;
	color: var(--c-text-3);
	letter-spacing: 0.02em;
}
.article-meta__cat {
	color: var(--c-accent);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-size: 0.72rem;
}
.article-title {
	font-family: var(--font-display);
	font-size: clamp(2rem, 5vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.035em;
	line-height: 1.05;
	margin: 0 0 24px;
	color: #fff;
}
.article-lead {
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	line-height: 1.5;
	color: var(--c-text-2);
	max-width: 56ch;
	margin: 0;
}

.article-body {
	max-width: 760px;
	margin: 0 auto;
	padding: clamp(48px, 6vw, 88px) var(--gutter);
}
.article-body p {
	font-size: 1.15rem;
	line-height: 1.7;
	color: var(--c-text);
	margin: 0 0 1.5em;
}
.article-body p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-size: 4em;
	font-weight: 700;
	float: left;
	line-height: 0.9;
	margin: 0.05em 0.12em 0 0;
	color: var(--c-accent);
}
.article-body h2 {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 2.5vw, 2.1rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 2.5em 0 0.6em;
	color: #fff;
}
.article-body h3 {
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 600;
	margin: 2em 0 0.5em;
	color: #fff;
}
.article-body ul, .article-body ol {
	font-size: 1.1rem;
	line-height: 1.7;
	color: var(--c-text);
	padding-left: 1.6em;
	margin-bottom: 1.5em;
}
.article-body li { margin-bottom: 0.6em; }
.article-body strong { color: #fff; font-weight: 700; }
.article-body blockquote {
	border-left: 3px solid var(--c-accent);
	background: rgba(255,45,32,.06);
	padding: 24px 28px;
	margin: 2em 0;
	border-radius: 0 16px 16px 0;
	font-size: 1.2rem;
	color: #fff;
	font-style: italic;
}
.article-body img {
	width: 100%;
	border-radius: 16px;
	margin: 2em 0;
}
.article-body figure {
	margin: 2em 0;
}
.article-body figcaption {
	color: var(--c-text-3);
	font-size: 0.88rem;
	text-align: center;
	margin-top: 8px;
}
.article-body a { color: var(--c-accent); border-bottom: 1px solid currentColor; }
.article-body a:hover { color: var(--c-accent-2); }

.article-callout {
	background: linear-gradient(135deg, rgba(255,45,32,.08) 0%, rgba(255,255,255,.02) 100%);
	border: 1px solid rgba(255,45,32,.25);
	border-radius: 18px;
	padding: 28px 32px;
	margin: 2.5em 0;
}
.article-callout h4 {
	color: var(--c-accent);
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 8px;
}
.article-callout p { font-size: 1.05rem; margin: 0; }

/* Blog list — articles grid */
.article-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 24px;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.article-card {
	display: flex; flex-direction: column;
	background: var(--c-bg-2);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	overflow: hidden;
	transition: transform .35s var(--ease-fluid), border-color .25s;
	text-decoration: none;
}
.article-card:hover { transform: translateY(-4px); border-color: rgba(255,45,32,.4); }
.article-card__media { aspect-ratio: 16/10; overflow: hidden; }
.article-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-fluid); }
.article-card:hover .article-card__media img { transform: scale(1.05); }
.article-card__body { padding: 24px; flex: 1; display: flex; flex-direction: column; }
.article-card__cat {
	color: var(--c-accent);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 700;
	margin-bottom: 8px;
}
.article-card__title {
	font-family: var(--font-display);
	font-size: 1.3rem;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: #fff;
	margin: 0 0 10px;
}
.article-card__lead {
	color: var(--c-text-2);
	font-size: 0.92rem;
	line-height: 1.5;
	flex: 1;
	margin: 0 0 16px;
}
.article-card__meta {
	display: flex; gap: 12px;
	font-size: 0.78rem;
	color: var(--c-text-3);
}

/* ===== style-v15.css ===== */
/* =========================================================================
   ICF Karting — v15 (Apple Newsroom + Sticky Storytelling)
   - Blog Featured section na FP (Apple Newsroom style)
   - Sticky scroll storytelling (revive story-pin)
   - Apple-grade breathing space
   - Premium section transitions
   ========================================================================= */

/* ===========================================================
   STORY-PIN — przywrócić! (override v7 hide)
   =========================================================== */
.story-pin,
section[data-chapter="Trzy gokarty"] {
	display: block !important;
}

/* ===========================================================
   STORY PIN refinement (Apple-style sticky scroll)
   =========================================================== */
.story-pin {
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #0a0a0c 50%, var(--c-bg-deep) 100%);
	padding: clamp(80px, 12vw, 160px) 0 !important;
}

.story-pin__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(60px, 8vw, 120px);
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.story-pin__sticky {
	position: sticky;
	top: 18vh;
	height: 64vh;
	align-self: start;
}
.story-pin__media {
	position: relative;
	width: 100%; height: 100%;
	border-radius: 28px;
	overflow: hidden;
	background: var(--c-bg-3);
	box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
}
.story-pin__media img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .9s var(--ease-fluid), transform 1.5s var(--ease-fluid);
	transform: scale(1.08);
}
.story-pin__media img.is-active {
	opacity: 1;
	transform: scale(1);
}

.story-pin__steps {
	display: flex; flex-direction: column;
	padding-top: 8vh;
}
.story-pin__step {
	min-height: 92vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 20px;
}
.story-pin__step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: rgba(255,45,32,.12);
	border: 1px solid rgba(255,45,32,.4);
	color: var(--c-accent);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 12px;
	font-variant-numeric: tabular-nums;
}
.story-pin__step h3 {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5vw, 3.6rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.04em !important;
	line-height: 1.0 !important;
	margin: 0 !important;
	color: #fff;
}
.story-pin__step p {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	color: var(--c-text-2);
	line-height: 1.55;
	max-width: 48ch;
	margin: 0;
}
.story-pin__step-meta {
	display: flex; gap: 32px; flex-wrap: wrap;
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid rgba(255,255,255,.1);
}
.story-pin__step-meta span {
	display: flex; flex-direction: column; gap: 4px;
	color: var(--c-text-3);
	font-size: 0.85rem;
}
.story-pin__step-meta strong {
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	font-family: var(--font-display);
	letter-spacing: -0.01em;
}

@media (max-width: 880px) {
	.story-pin__inner { grid-template-columns: 1fr; gap: 40px; }
	.story-pin__sticky { position: relative; top: auto; height: 70vh; max-height: 500px; }
	.story-pin__steps { padding-top: 0; gap: 24px; }
	.story-pin__step {
		min-height: auto !important;
		padding: 32px !important;
		background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
		border: 1px solid var(--c-glass-line);
		border-radius: 24px;
	}
	.story-pin__step h3 { font-size: 1.8rem !important; }
	.story-pin__media img:first-child { opacity: 1; transform: scale(1); }
	.story-pin__media img:not(:first-child) { display: none; }
}

/* ===========================================================
   BLOG FEATURED — Apple Newsroom style
   =========================================================== */
.blog-featured {
	padding: clamp(80px, 12vw, 160px) 0;
	background: var(--c-bg-deep);
	position: relative;
}

.blog-featured__head {
	display: flex; justify-content: space-between; align-items: end;
	gap: 32px; flex-wrap: wrap;
	max-width: 1320px;
	margin: 0 auto 60px;
	padding: 0 var(--gutter);
}
.blog-featured__head h2 {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5vw, 4rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.0;
	margin: 0;
	color: #fff;
}
.blog-featured__link {
	display: inline-flex; align-items: center; gap: 8px;
	color: var(--c-accent);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: gap .25s var(--ease-apple);
}
.blog-featured__link:hover { gap: 14px; color: var(--c-accent-2); }

/* Layout: featured + 3 cards */
.blog-featured__grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 24px;
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
@media (max-width: 880px) { .blog-featured__grid { grid-template-columns: 1fr; } }

/* Hero featured article — duża karta po lewej */
.blog-feat-hero {
	position: relative;
	display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 540px;
	border-radius: 32px;
	overflow: hidden;
	padding: clamp(36px, 4vw, 56px);
	color: #fff;
	background: var(--c-bg-3);
	transition: transform .4s var(--ease-fluid);
	text-decoration: none;
	isolation: isolate;
}
.blog-feat-hero:hover { transform: translateY(-6px); color: #fff; }
.blog-feat-hero::before {
	content: '';
	position: absolute; inset: 0;
	background-image: var(--bg-img);
	background-size: cover;
	background-position: center;
	z-index: -2;
	transition: transform 1s var(--ease-fluid);
	filter: contrast(1.05) saturate(1.05) brightness(0.95);
}
.blog-feat-hero:hover::before { transform: scale(1.04); }
.blog-feat-hero::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(6,6,8,.85) 100%);
	z-index: -1;
}
.blog-feat-hero__cat {
	display: inline-block;
	padding: 6px 14px;
	background: var(--c-accent);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 6px;
	margin-bottom: 18px;
	width: max-content;
}
.blog-feat-hero__title {
	font-family: var(--font-display);
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.1;
	margin: 0 0 12px;
	max-width: 22ch;
}
.blog-feat-hero__lead {
	font-size: 1.05rem;
	color: rgba(255,255,255,.85);
	line-height: 1.55;
	margin: 0 0 20px;
	max-width: 50ch;
}
.blog-feat-hero__meta {
	display: flex; gap: 16px; align-items: center;
	font-size: 0.82rem;
	color: rgba(255,255,255,.7);
}
.blog-feat-hero__cta {
	display: inline-flex; align-items: center; gap: 8px;
	margin-top: 24px;
	color: #fff;
	font-weight: 600;
	font-size: 0.95rem;
	transition: gap .25s var(--ease-apple);
}
.blog-feat-hero:hover .blog-feat-hero__cta { gap: 14px; color: var(--c-accent); }
.blog-feat-hero__cta::after { content: '→'; }

/* Side stack — 3 mniejsze karty */
.blog-feat-side {
	display: grid;
	grid-template-rows: repeat(3, 1fr);
	gap: 20px;
}
@media (max-width: 880px) { .blog-feat-side { grid-template-rows: none; grid-template-columns: 1fr; } }

.blog-feat-side__card {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 20px;
	padding: 18px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 20px;
	text-decoration: none;
	transition: transform .35s var(--ease-fluid), border-color .25s;
	min-height: 0;
	overflow: hidden;
}
.blog-feat-side__card:hover { transform: translateX(4px); border-color: rgba(255,45,32,.35); }
.blog-feat-side__media {
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 1;
}
.blog-feat-side__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-fluid); }
.blog-feat-side__card:hover .blog-feat-side__media img { transform: scale(1.06); }
.blog-feat-side__body { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; }
.blog-feat-side__cat {
	color: var(--c-accent);
	font-size: 0.65rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
}
.blog-feat-side__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.015em;
	line-height: 1.25;
	color: #fff;
	margin: 0;
}
.blog-feat-side__meta {
	color: var(--c-text-3);
	font-size: 0.78rem;
}

@media (max-width: 480px) {
	.blog-feat-side__card { grid-template-columns: 100px 1fr; gap: 14px; padding: 14px; }
	.blog-feat-side__title { font-size: 0.95rem; }
}

/* ===========================================================
   APPLE-grade section breathing
   =========================================================== */
.section--xl { padding: clamp(80px, 11vw, 160px) 0 !important; }

/* ===========================================================
   Better section eyebrow — Apple-style minimal
   =========================================================== */
.section-eyebrow {
	font-size: 0.72rem !important;
	letter-spacing: 0.18em !important;
}

/* ===========================================================
   Section titles — bigger Apple-grade
   =========================================================== */
.section-title-xl {
	font-size: clamp(2.4rem, 6vw, 4.4rem) !important;
	font-weight: 700 !important;
	letter-spacing: -0.04em !important;
	line-height: 1.0 !important;
	color: #fff;
}

/* ===========================================================
   Hero refinement — bigger paddings
   =========================================================== */
.hero-mega {
	min-height: 100vh !important;
	padding-bottom: clamp(80px, 12vh, 160px) !important;
}

/* ===== style-v16.css ===== */
/* =========================================================================
   ICF Karting — v16 (FINAL AUDIT FIX)
   - Logo: zatrzymaj w fixed width, nie pozwól flexowi squashować
   - Footer: 5 kolumn z WSZYSTKIMI podstronami
   - Drobne layout fixes
   ========================================================================= */

/* ===========================================================
   LOGO FIX — bulletproof, nigdy nie znika
   =========================================================== */
.site-logo {
	display: inline-flex !important;
	align-items: center !important;
	flex-shrink: 0 !important;
	flex-grow: 0 !important;
	flex-basis: auto !important;
	width: auto !important;
	min-width: 140px !important;
	max-width: none !important;
}
.site-logo img {
	display: block !important;
	height: 38px !important;
	width: auto !important;
	max-width: 240px !important;
	min-width: 130px !important;
	object-fit: contain !important;
	flex-shrink: 0 !important;
}
.site-logo img,
.site-logo:hover img { transition: none !important; }
.site-logo:hover { transform: none !important; }
.site-header.is-scrolled .site-logo img { height: 32px !important; }

/* Footer logo bigger */
.site-footer__logo img {
	display: block !important;
	height: 48px !important;
	width: auto !important;
	max-width: 280px !important;
	object-fit: contain !important;
}

/* ===========================================================
   HEADER inner: zapewnij że logo nie jest squashowany
   =========================================================== */
.site-header__inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	min-height: 72px !important;
}

/* ===========================================================
   FOOTER — 5 kolumn (wszystkie podstrony)
   =========================================================== */
.site-footer__grid {
	display: grid !important;
	grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
	gap: 32px !important;
}
@media (max-width: 1100px) {
	.site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr !important; }
	.site-footer__col:nth-child(5) { display: none; }
}
@media (max-width: 880px) {
	.site-footer__grid { grid-template-columns: repeat(2, 1fr) !important; }
	.site-footer__col:nth-child(5) { display: block !important; }
}
@media (max-width: 540px) {
	.site-footer__grid { grid-template-columns: 1fr !important; }
}

/* Pokaż wszystkie kolumny stopki (override v7 hide) */
.site-footer__col:nth-child(4) { display: block !important; }

/* Footer kolumny — refinement */
.site-footer__menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex; flex-direction: column;
	gap: 10px;
}
.site-footer__menu a {
	color: var(--c-text-2);
	font-size: 0.92rem;
	transition: color .2s var(--ease-soft);
	text-decoration: none;
	display: inline-block;
	padding: 2px 0;
}
.site-footer__menu a:hover { color: var(--c-accent); }

/* H3 nagłówki w stopce — uniform */
.site-footer__col h3 {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--font-display);
	font-size: 0.78rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: rgba(255,255,255,.95) !important;
	margin: 0 0 18px !important;
}
.site-footer__col h3::before {
	content: '';
	width: 4px; height: 14px;
	background: var(--c-accent);
	border-radius: 2px;
	flex-shrink: 0;
}

/* ===========================================================
   STORY-PIN sticky — fix media position
   =========================================================== */
.story-pin__sticky { z-index: 1; }
.story-pin__media {
	background: linear-gradient(135deg, #1a0a0a 0%, #0a0a0c 100%);
}

/* ===========================================================
   MOBILE menu fix — żeby logo na mobile było widoczne mimo szukania flex
   =========================================================== */
@media (max-width: 960px) {
	.site-header__inner { gap: 16px !important; }
	.site-logo { min-width: 130px !important; }
}
@media (max-width: 540px) {
	.site-logo { min-width: 110px !important; }
	.site-logo img { height: 34px !important; min-width: 110px !important; }
}

/* ===========================================================
   Site-logo img filter remove (drop-shadow could affect rendering)
   =========================================================== */
.site-logo img { filter: none !important; }
.site-footer__logo img { filter: drop-shadow(0 0 16px rgba(255,45,32,.3)) !important; }

/* ===== style-v17.css ===== */
/* =========================================================================
   ICF Karting — v17 (Parallax Apple-style + Registration page)
   - Parallax na obrazach hero/page-hero/big quote
   - Registration page (rejestracja.html) styles
   - Photo upload zone (drag & drop)
   - Step progress indicator
   ========================================================================= */

/* ===========================================================
   PARALLAX containers
   =========================================================== */
.parallax-bg {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.parallax-bg__media {
	position: absolute;
	inset: -10% 0;
	z-index: -1;
	will-change: transform;
}
.parallax-bg__media img,
.parallax-bg__media video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: translate3d(0, var(--parallax-y, 0), 0);
	transition: transform .15s linear;
}

/* Page-hero parallax — subtle */
.page-hero {
	overflow: hidden;
}
.page-hero__bg {
	position: absolute;
	inset: -15% 0;
	height: 130% !important;
	will-change: transform;
	transform: translate3d(0, var(--parallax-y, 0), 0);
}

/* Hero video parallax */
.hero-mega__media {
	will-change: transform;
}
.hero-mega__media video,
.hero-mega__media img {
	transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.05);
	transition: transform .1s linear;
}

/* Big quote parallax */
.big-quote { overflow: hidden; }
.big-quote__inner {
	transform: translate3d(0, var(--parallax-y, 0), 0);
	transition: transform .1s linear;
}

/* Voucher hero media parallax */
.voucher-hero__media img {
	transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.06);
	transition: transform .1s linear;
}

/* Split media parallax */
.split__media img {
	transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.04);
	transition: transform .15s linear;
}

/* Bento large feature parallax */
.bento-cell--feature .bento-cell__media img {
	transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.08);
	transition: transform .15s linear;
}

/* Article hero parallax */
.article-hero__bg img {
	transform: translate3d(0, var(--parallax-y, 0), 0) scale(1.05);
	transition: transform .15s linear;
}

/* Disable parallax on touch / reduced motion */
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
	.page-hero__bg,
	.hero-mega__media video,
	.hero-mega__media img,
	.big-quote__inner,
	.voucher-hero__media img,
	.split__media img,
	.bento-cell--feature .bento-cell__media img,
	.article-hero__bg img {
		transform: none !important;
	}
}

/* ===========================================================
   REGISTRATION PAGE — premium online form
   =========================================================== */
.reg-hero {
	background: linear-gradient(180deg, var(--c-bg-deep) 0%, #0a0a0c 100%);
	padding: clamp(80px, 12vw, 160px) 0 clamp(40px, 6vw, 80px);
	text-align: center;
	position: relative;
	overflow: hidden;
}
.reg-hero::before {
	content: '';
	position: absolute;
	top: 0; left: 50%;
	transform: translateX(-50%);
	width: 80vmax; height: 80vmax;
	background: radial-gradient(circle, rgba(255,45,32,.1) 0%, transparent 50%);
	pointer-events: none;
}
.reg-hero__inner {
	position: relative; z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
.reg-hero h1 {
	font-family: var(--font-display);
	font-size: clamp(2.4rem, 5.5vw, 4.4rem);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1.0;
	margin: 0 0 24px;
	color: #fff;
}
.reg-hero h1 em { color: var(--c-accent); font-style: normal; }
.reg-hero__lead {
	font-size: clamp(1.1rem, 1.6vw, 1.4rem);
	color: var(--c-text-2);
	line-height: 1.5;
	max-width: 56ch;
	margin: 0 auto 32px;
}

/* Steps progress — 3 step layout */
.reg-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	max-width: 720px;
	margin: 40px auto 0;
	padding: 24px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--c-glass-line);
	border-radius: 24px;
	position: relative;
}
.reg-steps::before {
	content: '';
	position: absolute;
	top: 56px;
	left: 18%; right: 18%;
	height: 2px;
	background: linear-gradient(90deg, var(--c-accent) 0%, rgba(255,45,32,.3) 100%);
	z-index: 0;
}
@media (max-width: 540px) {
	.reg-steps { grid-template-columns: 1fr; padding: 20px; }
	.reg-steps::before { display: none; }
}
.reg-step {
	display: flex; flex-direction: column; align-items: center;
	text-align: center;
	gap: 10px;
	position: relative;
	z-index: 1;
	padding: 0 8px;
}
@media (max-width: 540px) {
	.reg-step { flex-direction: row; align-items: center; text-align: left; }
}
.reg-step__num {
	width: 64px; height: 64px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--c-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.4rem;
	box-shadow: 0 10px 30px -8px var(--c-accent);
	flex-shrink: 0;
}
.reg-step--done .reg-step__num { background: var(--c-live); box-shadow: 0 10px 30px -8px var(--c-live); }
.reg-step--done .reg-step__num::after { content: '✓'; }
.reg-step--done .reg-step__num span { display: none; }
.reg-step__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.98rem;
	color: #fff;
	margin: 0;
}
.reg-step__desc {
	color: var(--c-text-3);
	font-size: 0.82rem;
	margin: 0;
}

/* Form section */
.reg-form-section {
	padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px);
	background: #0a0a0c;
}
.reg-form {
	max-width: 760px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.reg-form__step {
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 28px;
	padding: clamp(32px, 4vw, 56px);
	margin-bottom: 24px;
}
.reg-form__step-head {
	display: flex; align-items: center; gap: 16px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,.08);
}
.reg-form__step-num {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,45,32,.15);
	border: 1px solid rgba(255,45,32,.4);
	color: var(--c-accent);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	flex-shrink: 0;
}
.reg-form__step-title {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 2vw, 1.7rem);
	font-weight: 700;
	letter-spacing: -0.025em;
	margin: 0;
	color: #fff;
}

.reg-form__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 18px;
}
@media (max-width: 540px) { .reg-form__grid { grid-template-columns: 1fr; } }
.reg-form__field { display: flex; flex-direction: column; gap: 8px; }
.reg-form__field--full { grid-column: 1 / -1; }
.reg-form__field label {
	font-size: 0.78rem;
	color: var(--c-text-2);
	font-weight: 600;
	letter-spacing: 0.02em;
}
.reg-form__field input,
.reg-form__field select,
.reg-form__field textarea {
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: 12px;
	color: #fff;
	padding: 14px 18px;
	font-family: inherit;
	font-size: 1rem;
	transition: border-color .25s var(--ease-soft), background .2s;
}
.reg-form__field input:focus,
.reg-form__field select:focus,
.reg-form__field textarea:focus {
	outline: 0;
	border-color: var(--c-accent);
	background: rgba(255,45,32,.04);
}
.reg-form__field-help {
	font-size: 0.78rem;
	color: var(--c-text-3);
	font-style: italic;
}

/* Photo upload zone */
.photo-upload {
	display: flex; gap: 24px;
	align-items: center;
	padding: 28px;
	background: rgba(255,255,255,.04);
	border: 2px dashed rgba(255,255,255,.18);
	border-radius: 20px;
	transition: border-color .25s var(--ease-soft), background .2s;
}
.photo-upload:hover { border-color: var(--c-accent); background: rgba(255,45,32,.04); }
@media (max-width: 540px) { .photo-upload { flex-direction: column; text-align: center; } }

.photo-upload__avatar {
	width: 120px; height: 120px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--c-bg-3) 0%, var(--c-bg-2) 100%);
	border: 2px solid rgba(255,255,255,.1);
	display: flex; align-items: center; justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
	color: var(--c-text-3);
	position: relative;
}
.photo-upload__avatar::after {
	content: '';
	position: absolute;
	width: 60px; height: 60px;
	background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23606060' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>") center/contain no-repeat;
}

.photo-upload__body { flex: 1; }
.photo-upload__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.05rem;
	color: #fff;
	margin: 0 0 6px;
}
.photo-upload__desc {
	color: var(--c-text-2);
	font-size: 0.92rem;
	margin: 0 0 14px;
}
.photo-upload__buttons { display: flex; gap: 10px; flex-wrap: wrap; }
.photo-upload__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.15);
	color: #fff;
	border-radius: 999px;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .2s, border-color .2s;
}
.photo-upload__btn:hover { background: rgba(255,45,32,.15); border-color: var(--c-accent); }
.photo-upload__btn--primary { background: var(--c-accent); border-color: var(--c-accent); }
.photo-upload__btn--primary:hover { background: var(--c-accent-2); border-color: var(--c-accent-2); }
.photo-upload__rules {
	margin-top: 14px;
	display: flex; gap: 12px; flex-wrap: wrap;
	font-size: 0.78rem; color: var(--c-text-3);
}
.photo-upload__rules span::before {
	content: '✓';
	color: var(--c-live);
	font-weight: 700;
	margin-right: 4px;
}

/* Consent block */
.reg-consent {
	display: flex; flex-direction: column; gap: 14px;
	padding-top: 14px;
}
.reg-consent label {
	display: grid; grid-template-columns: 24px 1fr; gap: 12px;
	align-items: flex-start;
	font-size: 0.92rem;
	color: var(--c-text-2);
	cursor: pointer;
	line-height: 1.5;
}
.reg-consent label input { width: 22px; height: 22px; margin-top: 2px; cursor: pointer; }
.reg-consent label a { color: var(--c-accent); text-decoration: underline; }

/* Submit button */
.reg-submit {
	display: flex; gap: 16px; flex-wrap: wrap;
	margin-top: 24px;
	justify-content: center;
}

/* Why online section */
.reg-why {
	background: var(--c-bg-deep);
	padding: clamp(60px, 8vw, 120px) 0;
}
.reg-why__head {
	text-align: center;
	max-width: 720px;
	margin: 0 auto 48px;
	padding: 0 var(--gutter);
}
.reg-why__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 var(--gutter);
}
@media (max-width: 880px) { .reg-why__grid { grid-template-columns: 1fr; } }
.reg-why__card {
	padding: 28px;
	background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.01) 100%);
	border: 1px solid var(--c-glass-line);
	border-radius: 20px;
	text-align: left;
}
.reg-why__icon {
	width: 48px; height: 48px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 14px;
	background: rgba(255,45,32,.1);
	border: 1px solid rgba(255,45,32,.3);
	color: var(--c-accent);
	margin-bottom: 18px;
}
.reg-why__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; }
.reg-why__card h3 {
	font-family: var(--font-display);
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0 0 8px;
	color: #fff;
}
.reg-why__card p {
	color: var(--c-text-2);
	font-size: 0.92rem;
	line-height: 1.55;
	margin: 0;
}

/* Hero CTA banner — link na rejestrację z FP */
.reg-cta-banner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 24px;
	align-items: center;
	padding: clamp(20px, 3vw, 32px) clamp(24px, 4vw, 40px);
	background: linear-gradient(135deg, rgba(46,224,107,.08) 0%, rgba(255,255,255,.02) 100%);
	border: 1px solid rgba(46,224,107,.3);
	border-radius: var(--radius-card);
	max-width: 1240px;
	margin: 32px auto 0;
}
@media (max-width: 720px) {
	.reg-cta-banner { grid-template-columns: 1fr; text-align: left; }
}
.reg-cta-banner__icon {
	width: 56px; height: 56px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--c-live) 0%, #1ea954 100%);
	color: #fff;
	flex-shrink: 0;
	box-shadow: 0 10px 30px -10px rgba(46,224,107,.5);
}
.reg-cta-banner__icon svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 2; }
.reg-cta-banner__text {
	display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.reg-cta-banner__title {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 1.8vw, 1.4rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0;
}
.reg-cta-banner__title em { color: var(--c-live); font-style: normal; }
.reg-cta-banner__cta {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 14px 24px;
	border-radius: 999px;
	background: var(--c-live);
	color: #0a0a0c;
	font-weight: 700;
	font-size: 0.95rem;
	white-space: nowrap;
	transition: background-color .25s var(--ease-soft), color .25s var(--ease-soft), transform .25s var(--ease-soft);
}
.reg-cta-banner__cta:hover { background: #1ea954; color: #0a0a0c; transform: translateY(-2px); }

/* ===== style-v18.css ===== */
/* =========================================================================
   ICF Karting — v18 (Damian credit highlight + mobile menu fix)
   ========================================================================= */

/* ===========================================================
   AUTHOR CREDIT — subtelny gradient highlight (Damian's marketing!)
   =========================================================== */
.author-credit-inline {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 8px 18px 8px 14px;
	background: linear-gradient(135deg,
		rgba(46, 224, 107, 0.12) 0%,
		rgba(255, 215, 0, 0.10) 50%,
		rgba(255, 45, 32, 0.08) 100%);
	border: 1px solid rgba(46, 224, 107, 0.25);
	border-radius: 999px;
	transition: border-color .25s var(--ease-soft), transform .25s var(--ease-spring), box-shadow .3s;
}
.author-credit-inline:hover {
	border-color: rgba(46, 224, 107, 0.5);
	transform: translateY(-1px);
	box-shadow: 0 8px 24px -8px rgba(46, 224, 107, 0.3);
}

.author-credit-inline__label {
	color: rgba(255, 255, 255, 0.7) !important;
	font-size: 0.7rem !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em !important;
}

.author-credit-inline__name {
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 0.88rem !important;
	letter-spacing: 0.02em !important;
	background: linear-gradient(90deg, #fff 0%, var(--c-live) 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	text-decoration: none !important;
}
.author-credit-inline__name:hover {
	background: linear-gradient(90deg, var(--c-live) 0%, #fff 100%) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
}

.author-credit-inline__role {
	color: rgba(255, 255, 255, 0.65) !important;
	font-size: 0.7rem !important;
	font-weight: 500 !important;
	letter-spacing: 0.06em !important;
}

.author-credit-inline__sep {
	color: rgba(255, 255, 255, 0.25) !important;
}

@media (max-width: 720px) {
	.author-credit-inline {
		padding: 10px 16px;
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}
}

/* ===========================================================
   FOOTER bar layout (po dodaniu pill-a, lepsze proporcje)
   =========================================================== */
.site-footer__bar { padding: 22px 0 !important; }
.site-footer__bar-inner {
	gap: 24px !important;
	align-items: center !important;
}

/* ===========================================================
   MOBILE MENU — pełne menu z wszystkimi podstronami
   =========================================================== */
@media (max-width: 960px) {
	/* Style zostały z v7 — list a teraz każdy item jako duży link */
	.site-nav__list {
		flex-direction: column !important;
		gap: 0 !important;
		align-items: stretch !important;
	}
	.site-nav__list li {
		display: block;
	}
	.site-nav__list li a {
		display: block !important;
		padding: 16px 0 !important;
		font-size: 1.2rem !important;
		font-family: var(--font-display);
		font-weight: 600;
		letter-spacing: -0.02em;
		color: #fff !important;
		border-bottom: 1px solid rgba(255,255,255,.06);
		text-decoration: none;
	}
	/* Active link highlight */
	.site-nav__list li.current-menu-item a {
		color: var(--c-accent) !important;
	}
	/* Plus arrow on hover */
	.site-nav__list li a::after {
		content: '→';
		float: right;
		opacity: 0.4;
		transition: opacity .25s, transform .25s var(--ease-apple);
	}
	.site-nav__list li a:hover::after {
		opacity: 1;
		color: var(--c-accent);
		transform: translateX(4px);
	}
	/* Special highlight for "Rejestracja online" jako CTA */
	.site-nav__list li.menu-cta a {
		background: linear-gradient(135deg, rgba(46,224,107,0.1) 0%, rgba(255,255,255,0.02) 100%);
		border: 1px solid rgba(46,224,107,0.3);
		border-radius: 14px;
		padding: 14px 18px !important;
		margin: 8px 0 0;
		font-size: 1rem !important;
	}
	.site-nav__list li.menu-cta a::after {
		opacity: 1;
		color: var(--c-live);
	}

	/* Site-nav__cta na mobile — duże buttony */
	.site-nav__cta {
		flex-direction: column !important;
		gap: 12px !important;
		margin-top: 24px !important;
		padding-top: 24px !important;
	}
	.site-nav__cta .btn-pill {
		width: 100%;
		justify-content: center;
		font-size: 1rem !important;
		padding: 16px !important;
	}
	.site-nav__phone {
		text-align: center;
		font-size: 1.05rem !important;
		padding: 12px 0;
	}
}

/* ===== style-v19.css ===== */
/* =========================================================================
   ICF Karting — v19 (Apple-style desktop hamburger + parallax mobile)
   - Desktop: zredukowane menu (5 main items) + hamburger zawsze widoczny
   - Animowana strzałka wskazująca hamburger (subtle, znika po użyciu)
   - Rejestracja CTA usunięta z headera (jest na FP banner)
   - Parallax: enable na mobile (lower speeds)
   ========================================================================= */

/* ===========================================================
   DESKTOP NAV — uproszczone do 5 itemów + hamburger
   =========================================================== */
@media (min-width: 961px) {
	/* Pokaż tylko 5 najważniejszych na desktopie */
	.site-nav__list li:nth-child(n+6) {
		display: none !important;
	}
	/* Wyjątek: jeśli current page jest w "ukrytych" — pokaż go */
	.site-nav__list li.current-menu-item { display: list-item !important; }

	/* Hamburger zawsze widoczny na desktopie */
	.nav-toggle {
		display: flex !important;
		flex-direction: column;
		gap: 5px;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		padding: 0;
		cursor: pointer;
		position: relative;
		flex-shrink: 0;
	}
	.nav-toggle span {
		display: block;
		width: 26px;
		height: 2px;
		background: var(--c-text);
		transition: transform .25s var(--ease-soft), opacity .2s;
	}
	.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
	.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* Site-nav na desktop też ma full overlay teraz */
	.site-nav.is-open .site-nav__list li {
		display: list-item !important; /* przywróć ukryte itemy w overlay */
	}
}

/* Header inner — przebuduj layout: Logo | Main 5 nav | Right (Otwarte/Tel/CTA/Hamburger) */
.site-header__inner {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 24px !important;
	min-height: 72px !important;
}

/* Site-nav i navtoggle to dwie sekcje po prawej */
.site-header__inner > .nav-toggle {
	order: 99; /* hamburger zawsze last */
}

/* Reduce/improve desktop nav-list i CTA */
@media (min-width: 961px) {
	.site-nav {
		display: contents !important; /* pozwól flex'owi rozłożyć children naturalnie */
	}
	.site-nav.is-open {
		display: flex !important;
		position: fixed !important;
		top: 88px !important; left: 0 !important; right: 0 !important; bottom: auto !important;
		max-height: calc(100vh - 88px) !important;
		flex-direction: column !important;
		background: rgba(8,8,10,.96) !important;
		backdrop-filter: saturate(180%) blur(30px) !important;
		-webkit-backdrop-filter: saturate(180%) blur(30px) !important;
		padding: 40px clamp(24px, 6vw, 80px) !important;
		overflow-y: auto !important;
		gap: 12px !important;
		z-index: 90;
	}
	.site-nav.is-open .site-nav__list {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0 !important;
		max-width: 720px;
		margin: 0 auto;
		width: 100%;
	}
	.site-nav.is-open .site-nav__list li a {
		display: block !important;
		font-size: 1.6rem !important;
		font-family: var(--font-display);
		font-weight: 600;
		letter-spacing: -0.025em;
		padding: 18px 0 !important;
		color: #fff !important;
		border-bottom: 1px solid rgba(255,255,255,.06);
		text-decoration: none;
	}
	.site-nav.is-open .site-nav__list li a::after {
		content: '→';
		float: right;
		opacity: 0.4;
		transition: opacity .25s, transform .25s var(--ease-apple), color .25s;
	}
	.site-nav.is-open .site-nav__list li a:hover::after {
		opacity: 1; color: var(--c-accent); transform: translateX(6px);
	}
	.site-nav.is-open .site-nav__list li.menu-cta a {
		background: linear-gradient(135deg, rgba(46,224,107,0.12) 0%, rgba(255,255,255,0.02) 100%);
		border: 1px solid rgba(46,224,107,0.4);
		border-radius: 16px;
		padding: 18px 22px !important;
		margin-top: 16px;
		font-size: 1.2rem !important;
	}

	.site-nav.is-open .site-nav__cta {
		flex-direction: column !important;
		max-width: 720px;
		margin: 28px auto 0 !important;
		padding-top: 28px !important;
		border-top: 1px solid rgba(255,255,255,.08);
		gap: 16px !important;
		width: 100%;
	}
	.site-nav.is-open .site-nav__cta .btn-pill { width: 100%; justify-content: center; padding: 16px !important; font-size: 1rem !important; }
	.site-nav.is-open .site-nav__phone { font-size: 1.1rem !important; padding: 12px 0; text-align: center; }

	/* When closed — site-nav components flow normalnie w header */
	.site-nav .site-nav__list {
		display: flex !important;
		gap: 4px;
	}
	.site-nav .site-nav__list li a {
		padding: 8px 12px !important;
		font-size: 0.95rem !important;
		font-family: 'Inter', sans-serif;
		font-weight: 500;
	}
	.site-nav .site-nav__cta {
		display: flex;
		align-items: center;
		gap: 12px;
	}
}

/* ===========================================================
   ANIMATED ARROW pointing to hamburger
   =========================================================== */
.nav-arrow-hint {
	display: none;
}
@media (min-width: 961px) {
	.nav-arrow-hint {
		display: inline-flex;
		position: absolute;
		right: 70px; /* obok hamburger */
		top: 50%;
		transform: translateY(-50%);
		font-size: 0.78rem;
		color: var(--c-accent);
		font-weight: 600;
		letter-spacing: 0.04em;
		gap: 8px;
		align-items: center;
		pointer-events: none;
		animation: arrowHint 2s ease-in-out infinite;
		opacity: 0;
		animation-delay: 2s;
	}
	.nav-arrow-hint::after {
		content: '→';
		font-size: 1.1rem;
		color: var(--c-accent);
		font-weight: 700;
		animation: arrowBounce 1.2s ease-in-out infinite;
		display: inline-block;
	}
	/* Show only when hamburger nie był jeszcze użyty */
	body.nav-used .nav-arrow-hint { display: none !important; }
}
@keyframes arrowHint {
	0%   { opacity: 0; transform: translateY(-50%) translateX(8px); }
	30%  { opacity: 1; transform: translateY(-50%) translateX(0); }
	70%  { opacity: 1; transform: translateY(-50%) translateX(0); }
	100% { opacity: 0; transform: translateY(-50%) translateX(8px); }
}
@keyframes arrowBounce {
	0%, 100% { transform: translateX(0); }
	50%      { transform: translateX(6px); }
}

/* Hide na mobile (już mamy hamburger) */
@media (max-width: 960px) {
	.nav-arrow-hint { display: none !important; }
}

/* ===========================================================
   USUŃ Rejestracja online z desktop nav (jest na FP banner)
   ale zostaw w mobile menu i overlay full
   =========================================================== */
@media (min-width: 961px) {
	/* Hide menu-cta unless overlay otwarty */
	.site-nav:not(.is-open) .site-nav__list li.menu-cta { display: none !important; }
}

/* Site-header relative for arrow positioning */
.site-header { position: sticky; top: 0; z-index: 100; }
.site-header__inner { position: relative; }

/* ===== style-v20.css ===== */
/* =========================================================================
   ICF Karting — v20 (News Ticker animowany)
   - Sezonowy banner jako rolujący news ticker
   - Pauza na hover
   - Desktop + mobile, smooth scroll
   ========================================================================= */

/* ===========================================================
   NEWS TICKER — sezonowy banner z auto-przewijaniem
   =========================================================== */
.season-strip {
	display: flex !important;
	align-items: center !important;
	overflow: hidden !important;
	position: relative;
	padding: 12px 0 !important;
	gap: 0 !important;
	white-space: nowrap !important;
	background: linear-gradient(135deg, var(--c-accent) 0%, #d61c0e 50%, var(--c-accent) 100%) !important;
	background-size: 200% 100%;
	animation: seasonShine 8s ease-in-out infinite;
	box-shadow: inset 0 -1px 0 rgba(0,0,0,.2);
	min-height: 44px;
}

/* Track wrapper — zawiera kopiowane wewnątrz news items */
.season-strip__track {
	display: flex;
	align-items: center;
	gap: 0;
	flex-shrink: 0;
	animation: tickerScroll 45s linear infinite;
	will-change: transform;
}

/* News item — pojedyncze "newsy" */
.season-strip__item {
	display: inline-flex !important;
	align-items: center !important;
	gap: 10px;
	padding: 0 28px;
	color: #fff;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: -0.005em;
	flex-shrink: 0;
	white-space: nowrap;
}

.season-strip__item strong {
	color: #fff;
	font-weight: 800;
}

.season-strip__item a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700;
}
.season-strip__item a:hover { color: rgba(255,255,255,.85); }

.season-strip__sep {
	display: inline-flex;
	color: rgba(255,255,255,.55);
	font-weight: 700;
	padding: 0 4px;
	font-size: 0.95rem;
	flex-shrink: 0;
}

.season-strip__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px;
	background: rgba(255,255,255,.22);
	border-radius: 50%;
	font-size: 0.78rem;
	flex-shrink: 0;
}

/* Pause na hover (UX) */
.season-strip:hover .season-strip__track {
	animation-play-state: paused;
}

/* Marquee scroll keyframes */
@keyframes tickerScroll {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}

/* Mobile: szybciej i mniejszy padding */
@media (max-width: 720px) {
	.season-strip { padding: 10px 0 !important; min-height: 38px; }
	.season-strip__item { font-size: 0.78rem; padding: 0 20px; }
	.season-strip__icon { width: 18px; height: 18px; font-size: 0.7rem; }
	.season-strip__track { animation-duration: 38s; }
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
	.season-strip__track { animation: none !important; }
	.season-strip { background: var(--c-accent) !important; animation: none !important; }
}

/* ===== style-v21.css ===== */
/* =========================================================================
   ICF Karting — v21 (Apple Scale-on-Scroll + Smart Cursor)
   - Scale-on-scroll: obrazy rosną gdy scrollujesz w nie (Apple iPhone style)
   - Smart cursor: różny dla różnych typów elementów (button/image/video/text)
   - Reveal-on-scroll fade+slide (mocniejszy)
   ========================================================================= */

/* ===========================================================
   SCALE-ON-SCROLL — Apple iPhone product page effect
   =========================================================== */
.zoom-on-scroll {
	overflow: hidden;
	position: relative;
}
.zoom-on-scroll img,
.zoom-on-scroll video {
	transition: transform .4s var(--ease-fluid);
	will-change: transform;
}

/* Pomoc — przygotuj parent containers do zoom */
.bento-cell, .persona, .card-xl, .voucher-hero,
.split__media, .gallery-mag__item, .article-card,
.fleet-card, .blog-feat-hero, .blog-feat-side__media {
	overflow: hidden;
	position: relative;
}

/* Dodatkowo bg na hero parallax — wymuś przygotowanie do scroll-zoom */
.hero-mega__media,
.page-hero,
.article-hero {
	overflow: hidden;
}

/* ===========================================================
   IMAGE STACK / Pinned reveal — Apple-style overlap
   =========================================================== */
.stack-pin {
	position: relative;
	min-height: 200vh;
	background: var(--c-bg-deep);
}
.stack-pin__sticky {
	position: sticky;
	top: 0;
	height: 100vh;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
.stack-pin__layer {
	position: absolute;
	inset: 0;
	display: flex; align-items: center; justify-content: center;
	transition: opacity .9s var(--ease-fluid), transform 1.2s var(--ease-fluid);
}
.stack-pin__layer img {
	max-width: 80%;
	max-height: 80%;
	object-fit: contain;
	border-radius: 24px;
	box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6);
}

/* ===========================================================
   SMART CURSOR v21 — kontekstowy
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	* { cursor: none !important; }
	input, textarea, select, [contenteditable] { cursor: text !important; }

	.cursor-dot {
		display: block !important;
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 8px !important; height: 8px !important;
		background: var(--c-accent) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999999 !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		box-shadow: 0 0 8px rgba(255,45,32,.9), 0 0 16px rgba(255,45,32,.4) !important;
		transform: translate3d(-50%, -50%, 0);
		transition: width .25s var(--ease-spring), height .25s var(--ease-spring),
		            background .2s, opacity .2s !important;
		will-change: transform;
	}

	.cursor-ring {
		display: block !important;
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 36px !important; height: 36px !important;
		border: 1.5px solid rgba(255, 45, 32, 0.55) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999998 !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		transform: translate3d(-50%, -50%, 0);
		transition: width .35s var(--ease-spring), height .35s var(--ease-spring),
		            border-color .25s, background-color .25s !important;
		will-change: transform;
		display: flex !important;
		align-items: center;
		justify-content: center;
		font-size: 0.65rem;
		font-weight: 700;
		font-family: var(--font-display);
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: transparent;
	}

	/* HOVER STATES — kontekstowe */

	/* CTA / Buttons — ring rośnie */
	.cursor-ring.is-cta {
		width: 64px !important; height: 64px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.18);
		border-width: 2px !important;
	}
	.cursor-dot.is-cta {
		width: 0 !important; height: 0 !important;
	}

	/* Image / Photo — pokaż ikonę powiększenia */
	.cursor-ring.is-image {
		width: 70px !important; height: 70px !important;
		border-color: rgba(255, 255, 255, 0.7) !important;
		background: rgba(0, 0, 0, 0.35);
		color: #fff !important;
		backdrop-filter: blur(8px);
	}
	.cursor-ring.is-image::before {
		content: 'Zoom';
		color: #fff;
	}
	.cursor-dot.is-image { width: 0 !important; height: 0 !important; }

	/* Video — pokaż "PLAY" */
	.cursor-ring.is-video {
		width: 80px !important; height: 80px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.25);
		color: #fff !important;
	}
	.cursor-ring.is-video::before {
		content: '▶ Live';
		color: #fff;
	}
	.cursor-dot.is-video { width: 0 !important; height: 0 !important; }

	/* Card / Persona — "Czytaj" */
	.cursor-ring.is-card {
		width: 70px !important; height: 70px !important;
		border-color: rgba(255,255,255,.6) !important;
		background: rgba(255, 45, 32, 0.12);
		color: #fff !important;
	}
	.cursor-ring.is-card::before {
		content: 'Wejdź';
		color: #fff;
	}
	.cursor-dot.is-card { width: 0 !important; height: 0 !important; }

	/* Article / Blog cards */
	.cursor-ring.is-article::before { content: 'Czytaj'; }

	/* Map */
	.cursor-ring.is-map::before { content: 'Trasa'; }

	/* Phone */
	.cursor-ring.is-phone::before { content: 'Zadzwoń'; }

	/* Email */
	.cursor-ring.is-email::before { content: 'Napisz'; }

	/* Form input fields — schowaj cursor (native text) */
	.cursor-dot.is-text, .cursor-ring.is-text {
		opacity: 0 !important;
	}

	/* Drag/scroll hint */
	.cursor-ring.is-scroll {
		width: 64px !important; height: 64px !important;
		border-color: rgba(255,255,255,.5) !important;
		color: rgba(255,255,255,.85) !important;
	}
	.cursor-ring.is-scroll::before { content: 'Przewiń'; }
}

/* Mobile/touch — none */
@media (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring { display: none !important; }
}

/* ===========================================================
   REVEAL-ON-SCROLL stronger (Apple-style fade+slide)
   =========================================================== */
.reveal-strong {
	opacity: 0;
	transform: translateY(80px) scale(0.94);
	transition: opacity 1.1s var(--ease-fluid), transform 1.2s var(--ease-fluid);
	will-change: opacity, transform;
}
.reveal-strong.is-visible {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* ===========================================================
   IMAGE GROW — Apple-style scroll-triggered scale up
   =========================================================== */
.scroll-grow {
	overflow: hidden;
	position: relative;
}
.scroll-grow img,
.scroll-grow video {
	transform: scale(1.18);
	transition: transform 1.5s var(--ease-fluid);
	will-change: transform;
}
.scroll-grow.in-view img,
.scroll-grow.in-view video {
	transform: scale(1);
}
.scroll-grow.in-view-passed img,
.scroll-grow.in-view-passed video {
	transform: scale(1.08);
}

/* ===========================================================
   FORCE PARALLAX — silniejszy efekt na elementach
   =========================================================== */
.parallax-strong {
	will-change: transform;
}

/* ===========================================================
   Sticky scroll moments — overlap effect (Apple-style)
   =========================================================== */
.overlap-section {
	position: relative;
	margin-top: -10vh; /* nieco nakłada się na poprzednią sekcję */
	border-top-left-radius: 32px;
	border-top-right-radius: 32px;
	overflow: hidden;
	z-index: 2;
}
@media (max-width: 720px) {
	.overlap-section { margin-top: -5vh; border-top-left-radius: 24px; border-top-right-radius: 24px; }
}

/* ===== style-v22.css ===== */
/* =========================================================================
   ICF Karting — v22 (fixes + cursor v3)
   - Fix scale-on-scroll w bento feature (był popsuty)
   - News ticker: wolniej + spokojniejsze tło
   - Cursor v3: gładszy, breathing pulse, contextual
   ========================================================================= */

/* ===========================================================
   FIX: Scale-on-scroll w bento — wyłączamy żeby nie psuł
   =========================================================== */
.bento-cell .scroll-grow img,
.bento-cell .scroll-grow video,
.bento-cell--feature .bento-cell__media img,
.bento-cell--feature .bento-cell__media video {
	transform: scale(1) !important;
	transition: transform 1s var(--ease-fluid) !important;
}
.bento-cell:hover .bento-cell__media img,
.bento-cell:hover .bento-cell__media video {
	transform: scale(1.04) !important;
}

/* Sprinter feature card — image bardziej widoczne, mniej overflow */
.bento-cell--feature .bento-cell__media {
	overflow: hidden;
}
.bento-cell--feature .bento-cell__media img {
	object-position: center 45% !important;
}

/* Persona też subtelniej (były full crops) */
.persona__media.scroll-grow img {
	transform: scale(1.05) !important;
}
.persona__media.scroll-grow.in-view img {
	transform: scale(1) !important;
}
.persona__media.scroll-grow.in-view-passed img {
	transform: scale(1.03) !important;
}

/* Pozostałe scroll-grow softer (1.18 → 1.08 base) */
.scroll-grow img,
.scroll-grow video {
	transform: scale(1.08) !important;
	transition: transform 1.4s var(--ease-fluid) !important;
}
.scroll-grow.in-view img,
.scroll-grow.in-view video {
	transform: scale(1) !important;
}
.scroll-grow.in-view-passed img,
.scroll-grow.in-view-passed video {
	transform: scale(1.03) !important;
}

/* ===========================================================
   NEWS TICKER v2 — wolniej + spokojniejsze tło
   =========================================================== */
.season-strip {
	background: linear-gradient(135deg,
		rgba(15,15,18,0.95) 0%,
		rgba(20,10,10,0.95) 50%,
		rgba(15,15,18,0.95) 100%) !important;
	background-size: 100% 100% !important;
	animation: none !important; /* Wyłącz shine na background */
	border-bottom: 1px solid rgba(255,45,32,0.25) !important;
	border-top: 1px solid rgba(255,45,32,0.15);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* Delikatny czerwony "live" pip po lewej */
.season-strip::before {
	content: '';
	position: absolute;
	top: 0; left: 0; bottom: 0;
	width: 4px;
	background: linear-gradient(180deg, var(--c-accent) 0%, transparent 100%);
}

.season-strip__track {
	animation-duration: 90s !important; /* desktop wolniej (było 45s) */
}

.season-strip__item {
	color: rgba(255,255,255,.85) !important;
	font-weight: 500 !important;
	font-size: 0.85rem !important;
}
.season-strip__item strong {
	color: #fff !important;
	font-weight: 700 !important;
}
.season-strip__item a {
	color: var(--c-accent-2) !important;
	text-decoration: underline;
	text-underline-offset: 3px;
	font-weight: 700 !important;
}
.season-strip__item a:hover {
	color: #fff !important;
}

.season-strip__sep {
	color: rgba(255,255,255,.18) !important;
}

.season-strip__icon {
	background: rgba(255,45,32,.15) !important;
	border: 1px solid rgba(255,45,32,.3);
	color: var(--c-accent) !important;
}

@media (max-width: 720px) {
	.season-strip__track { animation-duration: 110s !important; }
	.season-strip__item { font-size: 0.76rem !important; }
}

/* ===========================================================
   CURSOR v3 — gładszy, breathing, smarter contextual
   =========================================================== */
@media (hover: hover) and (pointer: fine) {
	* { cursor: none !important; }
	input, textarea, select, [contenteditable] { cursor: text !important; }

	.cursor-dot {
		display: block !important;
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 6px !important; height: 6px !important;
		background: var(--c-accent) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999999 !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		box-shadow:
			0 0 6px rgba(255,45,32,.95),
			0 0 14px rgba(255,45,32,.5),
			0 0 22px rgba(255,45,32,.25) !important;
		transform: translate3d(-50%, -50%, 0);
		transition: width .3s cubic-bezier(.34,1.56,.64,1),
		            height .3s cubic-bezier(.34,1.56,.64,1),
		            background .25s, opacity .25s !important;
		will-change: transform;
		animation: cursorPulse 2.4s ease-in-out infinite;
	}

	@keyframes cursorPulse {
		0%, 100% { box-shadow: 0 0 6px rgba(255,45,32,.95), 0 0 14px rgba(255,45,32,.5), 0 0 22px rgba(255,45,32,.25); }
		50%      { box-shadow: 0 0 8px rgba(255,45,32,1), 0 0 18px rgba(255,45,32,.7), 0 0 32px rgba(255,45,32,.4); }
	}

	.cursor-ring {
		display: flex !important;
		align-items: center;
		justify-content: center;
		position: fixed !important;
		top: 0 !important; left: 0 !important;
		width: 32px !important; height: 32px !important;
		border: 1.5px solid rgba(255, 45, 32, 0.5) !important;
		border-radius: 50% !important;
		pointer-events: none !important;
		z-index: 999998 !important;
		opacity: 1 !important;
		mix-blend-mode: normal !important;
		transform: translate3d(-50%, -50%, 0);
		transition: width .4s cubic-bezier(.34,1.56,.64,1),
		            height .4s cubic-bezier(.34,1.56,.64,1),
		            border-color .3s, background-color .3s,
		            border-width .3s !important;
		will-change: transform;
		font-size: 0.62rem;
		font-weight: 700;
		font-family: var(--font-display);
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: transparent;
		backdrop-filter: blur(2px);
		-webkit-backdrop-filter: blur(2px);
	}

	/* Dot disappear przy "expanded" stanach */
	.cursor-dot.is-expanded {
		width: 0 !important; height: 0 !important;
		opacity: 0 !important;
		animation: none !important;
	}

	/* CTA / Button — czerwony, rośnie do 56px */
	.cursor-ring.is-cta {
		width: 56px !important; height: 56px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.12) !important;
		border-width: 1.5px !important;
		box-shadow: 0 0 20px rgba(255,45,32,.3);
	}

	/* Image — ring biały + Zoom text */
	.cursor-ring.is-image {
		width: 64px !important; height: 64px !important;
		border-color: rgba(255, 255, 255, 0.85) !important;
		background: rgba(0, 0, 0, 0.45) !important;
		color: #fff !important;
		border-width: 1.5px !important;
	}
	.cursor-ring.is-image::before { content: 'Zoom'; color: #fff; }

	/* Video — czerwony big z PLAY */
	.cursor-ring.is-video {
		width: 72px !important; height: 72px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.2) !important;
		color: #fff !important;
		border-width: 2px !important;
		box-shadow: 0 0 24px rgba(255,45,32,.4);
	}
	.cursor-ring.is-video::before { content: '▶ Live'; color: #fff; }

	/* Card — Wejdź */
	.cursor-ring.is-card {
		width: 64px !important; height: 64px !important;
		border-color: rgba(255, 255, 255, 0.6) !important;
		background: rgba(255, 45, 32, 0.08) !important;
		color: #fff !important;
	}
	.cursor-ring.is-card::before { content: 'Wejdź'; color: #fff; }

	.cursor-ring.is-article::before { content: 'Czytaj'; color: #fff; }
	.cursor-ring.is-map::before { content: 'Trasa'; color: #fff; }
	.cursor-ring.is-phone::before { content: 'Zadzwoń'; color: #fff; }
	.cursor-ring.is-email::before { content: 'Napisz'; color: #fff; }
	.cursor-ring.is-form::before { content: 'Wyślij'; color: #fff; }

	/* Default: Klik */
	.cursor-ring.is-link {
		width: 50px !important; height: 50px !important;
		border-color: var(--c-accent) !important;
		background: rgba(255, 45, 32, 0.08) !important;
	}

	.cursor-ring.is-text { opacity: 0 !important; }
	.cursor-dot.is-text { opacity: 0 !important; animation: none !important; }
}

@media (hover: none), (pointer: coarse) {
	.cursor-dot, .cursor-ring { display: none !important; }
}

/* ===== style-v23.css ===== */
/* =========================================================================
   ICF Karting — v23 (BENTO + PERSONA aspect-ratio fix)
   - Explicit aspect-ratio per cell type (zero "podłużnych" obrazów)
   - object-fit: cover wymuszone wszędzie
   - Scale-on-scroll wyłączony dla bento i persona
   ========================================================================= */

/* ===========================================================
   BENTO — explicit aspect ratios
   =========================================================== */
.bento {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	grid-auto-rows: auto !important;
	gap: 16px !important;
}
@media (max-width: 880px) {
	.bento { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 540px) {
	.bento { grid-template-columns: 1fr !important; }
}

/* Reset */
.bento-cell {
	aspect-ratio: 4 / 3 !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
}

.bento-cell--feature {
	grid-column: span 2 !important;
	aspect-ratio: 16 / 9 !important;
}
.bento-cell--wide {
	grid-column: span 2 !important;
	aspect-ratio: 16 / 9 !important;
}
.bento-cell--tall {
	grid-row: span 2 !important;
	aspect-ratio: 4 / 5 !important;
}

@media (max-width: 880px) {
	.bento-cell--feature, .bento-cell--wide {
		grid-column: span 2 !important;
		aspect-ratio: 16 / 9 !important;
	}
	.bento-cell--tall {
		grid-row: span 2 !important;
		aspect-ratio: 4 / 5 !important;
	}
}
@media (max-width: 540px) {
	.bento-cell { aspect-ratio: 16 / 11 !important; }
	.bento-cell--feature, .bento-cell--wide, .bento-cell--tall {
		grid-column: span 1 !important;
		grid-row: span 1 !important;
		aspect-ratio: 16 / 11 !important;
	}
}

/* Solid cells (slot widget, leaderboard) — auto height */
.bento-cell--solid, .bento-cell--quote {
	aspect-ratio: auto !important;
	min-height: 280px !important;
}
@media (max-width: 540px) {
	.bento-cell--solid, .bento-cell--quote { min-height: 240px !important; }
}

/* ===========================================================
   FORCE object-fit cover na media wewnątrz bento
   =========================================================== */
.bento-cell__media {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	z-index: -1;
}
.bento-cell__media img,
.bento-cell__media video {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	max-width: none !important;
	max-height: none !important;
	transform: scale(1) !important;
	transition: transform .6s var(--ease-fluid) !important;
}
.bento-cell:hover .bento-cell__media img,
.bento-cell:hover .bento-cell__media video {
	transform: scale(1.04) !important;
}

/* Specific object-position dla rodzajów cells (zachowaj akcję) */
.bento-cell--feature .bento-cell__media img { object-position: center 35% !important; }
.bento-cell--video .bento-cell__media video { object-position: center center !important; }
.bento-cell--tall .bento-cell__media img { object-position: center 35% !important; }

/* ===========================================================
   PERSONA — explicit aspect ratio
   =========================================================== */
.personas {
	display: grid !important;
	grid-template-columns: repeat(2, 1fr) !important;
	gap: 20px !important;
}
@media (max-width: 720px) { .personas { grid-template-columns: 1fr !important; } }

.persona {
	aspect-ratio: 4 / 5 !important;
	min-height: 0 !important;
	max-height: none !important;
	height: auto !important;
}

.persona__media {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	overflow: hidden !important;
	z-index: -1;
}
.persona__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center 30% !important;
	transform: scale(1) !important;
	transition: transform 1s var(--ease-fluid), filter .5s !important;
}
.persona:hover .persona__media img {
	transform: scale(1.05) !important;
}

/* Per-persona object-position (4 different images need different framings) */
.persona:nth-child(1) .persona__media img { object-position: center 45% !important; } /* lineup-cones */
.persona:nth-child(2) .persona__media img { object-position: center 40% !important; } /* hero-kart-empty */
.persona:nth-child(3) .persona__media img { object-position: center 30% !important; } /* child-driver */
.persona:nth-child(4) .persona__media img { object-position: center 30% !important; } /* kart-detail */

/* ===========================================================
   CARD-XL, FLEET — same fix
   =========================================================== */
.card-xl__media {
	aspect-ratio: 16 / 10 !important;
	overflow: hidden;
}
.card-xl__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: center center !important;
	transform: scale(1) !important;
	transition: transform .6s var(--ease-fluid) !important;
}
.card-xl:hover .card-xl__media img { transform: scale(1.04) !important; }

.fleet-card__media { aspect-ratio: 4 / 3 !important; overflow: hidden; }
.fleet-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transform: scale(1) !important;
}

/* ===========================================================
   VOUCHER HERO media — aspect ratio
   =========================================================== */
.voucher-hero {
	display: grid !important;
	grid-template-columns: 1.25fr 1fr !important;
}
@media (max-width: 880px) { .voucher-hero { grid-template-columns: 1fr !important; } }

.voucher-hero__media {
	min-height: 360px !important;
	max-height: 600px !important;
	overflow: hidden !important;
}
.voucher-hero__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	object-position: 70% 30% !important;
	transform: scale(1) !important;
}

/* ===========================================================
   IG posts — square
   =========================================================== */
.ig-post {
	aspect-ratio: 1 / 1 !important;
}
.ig-post img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transform: scale(1) !important;
}

/* ===========================================================
   Article / Blog cards
   =========================================================== */
.article-card__media {
	aspect-ratio: 16 / 10 !important;
	overflow: hidden;
}
.article-card__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	transform: scale(1) !important;
	transition: transform .6s var(--ease-fluid) !important;
}
.article-card:hover .article-card__media img { transform: scale(1.04) !important; }

.blog-feat-side__media { aspect-ratio: 1 / 1 !important; }
.blog-feat-side__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

/* ===========================================================
   USUŃ wszystkie pozostałe scroll-grow transforms w bento/persona/cards
   =========================================================== */
.scroll-grow { transform: scale(1) !important; }
.bento-cell .scroll-grow,
.persona .scroll-grow,
.bento-cell__media,
.persona__media { transform: scale(1) !important; }
.scroll-grow img, .scroll-grow video {
	/* Zostaw subtle scale tylko na specyficznych typach (split, voucher, article) */
}

/* Zostaw zoom tylko dla split + voucher + article */
.split__media.scroll-grow img,
.voucher-hero__media.scroll-grow img,
.article-card__media.scroll-grow img,
.blog-feat-hero.scroll-grow,
.article-hero__bg.scroll-grow img {
	transform: scale(1.05) !important;
}
.split__media.scroll-grow.in-view img,
.voucher-hero__media.scroll-grow.in-view img,
.article-card__media.scroll-grow.in-view img,
.blog-feat-hero.scroll-grow.in-view,
.article-hero__bg.scroll-grow.in-view img {
	transform: scale(1) !important;
}

/* ===========================================================
   Bento body — overlay na image
   =========================================================== */
.bento-cell__body {
	padding: clamp(20px, 2.6vw, 32px) !important;
	height: 100%;
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	gap: 4px !important;
	position: relative;
	z-index: 1;
}

/* Slot pills + leaderboard (solid cells) — body justify-between */
.bento-cell--solid .bento-cell__body,
.bento-cell--quote .bento-cell__body { justify-content: space-between !important; }

/* ===========================================================
   PERSONA body — text overlay
   =========================================================== */
.persona {
	display: flex !important;
	flex-direction: column !important;
	justify-content: flex-end !important;
	padding: clamp(28px, 3.5vw, 48px) !important;
	color: #fff !important;
	overflow: hidden !important;
	border-radius: var(--radius-card) !important;
	border: 1px solid var(--c-glass-line) !important;
	transition: transform .5s var(--ease-apple) !important;
	isolation: isolate;
	position: relative !important;
	text-decoration: none;
}

/* ============================================================
   Emil design-eng audit — touch: brak sticky-hover (lift/scale)
   Touch wywołuje :hover na tap → element zostaje "podniesiony" po dotknięciu.
   Neutralizujemy transform-hover na kluczowych komponentach na urządzeniach bez prawdziwego hovera.
   (Emil: "Touch devices trigger hover on tap, causing false positives.")
   ============================================================ */
@media (hover: none), (pointer: coarse) {
	.btn-pill:hover,
	.bento-cell:hover,
	.persona:hover,
	.pass:hover,
	.lemans-card:hover,
	.testimonial-v2:hover,
	.compare__col:hover,
	.card-xl:hover,
	.segm-card:hover,
	.training-tile:hover,
	.voucher-card:hover,
	.feature:hover,
	.ig-post:hover,
	.gallery-mag__item:hover,
	.support-card:hover,
	.article-card:hover,
	.fleet-card:hover,
	.blog-feat-side__card:hover,
	.brand-strip__item:hover,
	.podium-card:hover {
		transform: none !important;
	}
}