/* =========================================================================
   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;
	}
}