/* Blok „Start” – sekcja główna (1:1 z makiety) */
/* przycinamy tylko na boki (trójkąt wychodzi poza ekran); w dół poświata i cień auta przechodzą do następnej sekcji */
.st { position: relative; overflow-x: clip; overflow-y: visible; padding: 170px 0 120px; min-height: 780px; }
.st .kropki { top: 120px; }
.st .etykieta { margin-bottom: 24px; }
.st__tresc { position: relative; z-index: 2; max-width: min(680px, 47vw); }
.st__tresc .h { max-width: none; font-size: clamp(32px, 3.5vw, 58px); font-weight: 600; }
/* wyróżnienie tytułu – gradient czerwieni; na wierzchu jasny pas połysku (stoi poza napisem, co kilka sekund przelatuje – animacja niżej) */
.st__tresc .h em { --em-polysk: linear-gradient(105deg, rgba(255, 236, 228, 0) 42%, rgba(255, 236, 228, .8) 50%, rgba(255, 236, 228, 0) 58%);
	display: block; width: fit-content; padding-right: .12em; color: transparent; -webkit-background-clip: text; background-clip: text;
	background-image: var(--em-polysk), linear-gradient(95deg, #ff5a3c 0%, #e3262b 45%, #a50606 100%);
	background-size: 300% 100%, 100% 100%; background-position: 200% 0, 0 0; background-repeat: no-repeat; }
html[data-theme="light"] .st__tresc .h em { background-image: var(--em-polysk), linear-gradient(95deg, #f0402a 0%, #d01e23 45%, #8a0303 100%); }
.st__lead { margin: 36px 0 8px; font-size: 18px; font-weight: 500; line-height: 1.5; }
.st__tekst { margin: 0 0 44px; max-width: 31em; color: var(--tekst-3); font-size: 16px; line-height: 1.7; }
.st__przyciski { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; }

/* duży konturowy napis w tle za autem; lekko odjeżdża w bok przy przewijaniu (--np z widok.js) */
.st__napis { position: absolute; z-index: 0; right: 2vw; top: 96px; margin: 0; padding: 0 .18em; font: italic 700 clamp(140px, 13.5vw, 270px)/1 var(--font-h); letter-spacing: -.01em; white-space: nowrap;
	color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .1); pointer-events: none; user-select: none;
	-webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 95%); mask-image: linear-gradient(180deg, #000 45%, transparent 95%);
	transform: translateX(calc(var(--np, 0) * -90px)); }
html[data-theme="light"] .st__napis { -webkit-text-stroke-color: rgba(9, 19, 27, .09); }
/* podświetlenie napisu po najechaniu – wspólne ze stronami (motyw: baza.css + wspolne.js) */

/* grafika: trójkąt z obrysem i błyskiem, cień, auto */
.st__grafika { position: absolute; z-index: 1; left: 50vw; top: 52%; width: 66vw; max-width: calc(1300px * var(--zoom, 1)); aspect-ratio: 1925 / 1079; transform: translateY(-45%); pointer-events: none; }
.st__trojkat { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.st__krawedz { fill: none; stroke: rgba(255, 120, 100, .35); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.st__blysk { fill: none; stroke: #ffd3c7; stroke-width: 2.5px; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 90 410; }
.st__blysk--halo { stroke: #ff3b2a; stroke-width: 10px; opacity: .9; }
.st__auto { position: absolute; left: 6%; bottom: 9%; width: 70%; height: auto; filter: drop-shadow(0 30px 24px rgba(0, 0, 0, .5)); }
.st__cien { position: absolute; left: 11%; width: 62%; bottom: 8%; height: 7%; border-radius: 50%; background: rgba(0, 0, 0, .6); filter: blur(16px); }
html[data-theme="light"] .st__cien { background: rgba(9, 19, 27, .35); }
/* białe auto w jasnym wyglądzie */
.st__auto--jasny { display: none; }
html[data-theme="light"] .st__auto--jasny { display: block; }
html[data-theme="light"] .st__auto:not(.st__auto--jasny) { display: none; }
/* kolorystyka „Czerń”: własne auto (jest w HTML przed ciemnym tylko, gdy ustawione) */
.st__auto--czern { display: none; }
html[data-paleta="czern"][data-theme="dark"] .st__auto--czern { display: block; }
html[data-paleta="czern"][data-theme="dark"] .st__auto--czern ~ .st__auto--ciemny { display: none; }

/* „Przewiń”: kreska; po najechaniu napis i spływająca strzałka (na telefonie ukryty) */
.st__przewin { position: absolute; left: 50%; bottom: 16px; z-index: 2; display: grid; justify-items: center; gap: 10px; padding: 12px 24px 4px; color: var(--tekst-2); font-size: 11px; letter-spacing: 3px; text-transform: uppercase; text-decoration: none; transform: translateX(-50%); }
.st__przewin span { opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
.st__przewin i { position: relative; width: 1px; height: 46px; background: linear-gradient(var(--czerwony), transparent); }
.st__przewin i::after { content: ""; position: absolute; left: 50%; bottom: 1px; width: 9px; height: 9px; margin-left: -5px; border: solid #ff3b2a; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: 0; transition: opacity .3s; }
.st__przewin:hover span, .st__przewin:focus-visible span { opacity: 1; transform: none; }
.st__przewin:hover i, .st__przewin:focus-visible i { background: linear-gradient(rgba(255, 59, 42, 0), #ff3b2a); box-shadow: 0 6px 12px -4px rgba(255, 59, 42, .8); }
.st__przewin:hover i::after, .st__przewin:focus-visible i::after { opacity: 1; }

/* animacje (bez ruchu – wyłączone); błysk na trójkącie stoi, gdy sekcji prawie nie widać (.spi z widok.js) */
@media (prefers-reduced-motion: no-preference) {
	.st__napis { animation: napis-wejscie 1.6s cubic-bezier(.2, .8, .2, 1) .2s both; }
	.st__auto { animation: st-wjazd 1.1s cubic-bezier(.2, .8, .2, 1) both .2s; }
	.st__trojkat { animation: pojaw 1.4s ease-out both; }
	.st__blysk { animation: obwod 7s linear 2; } /* 2 okrążenia i stoi (poświata z rozmyciem jest kosztowna); po powrocie na górę strony gra znowu (widok.js) */
	.st.spi .st__blysk { animation-play-state: paused; }
	.st.od-nowa .st__blysk { animation-name: none; }
	/* połysk na czerwonym wyróżnieniu tytułu: 3 razy co 7 s (jak ikonki w „Dlaczego my”), stoi, gdy sekcji nie widać; po powrocie na górę od nowa */
	.st__tresc .h em { animation: st-em-polysk 7s ease-in-out 2.2s 3; }
	.st.spi .st__tresc .h em { animation-play-state: paused; }
	.st.od-nowa .st__tresc .h em { animation-name: none; }
	.st__tresc > * { animation: wgore .9s cubic-bezier(.2, .8, .2, 1) both; }
	.st__tresc > :nth-child(2) { animation-delay: .08s; } .st__tresc > :nth-child(3) { animation-delay: .16s; }
	.st__tresc > :nth-child(4) { animation-delay: .24s; } .st__tresc > :nth-child(5) { animation-delay: .32s; } .st__tresc > :nth-child(6) { animation-delay: .4s; }
	.st__przewin:hover i, .st__przewin:focus-visible i { animation: przewin-strzalka 1.5s cubic-bezier(.5, 0, .5, 1) infinite; }
}
@keyframes st-em-polysk { 0% { background-position: 90% 0, 0 0; } 24%, 100% { background-position: 10% 0, 0 0; } }
@keyframes st-wjazd { from { opacity: 0; transform: translateX(10%); } to { opacity: 1; transform: none; } }
@keyframes przewin-strzalka { 0% { transform: translateY(-10px); opacity: 0; } 30% { opacity: 1; } 75% { transform: translateY(8px); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }

@media (max-width: 1000px) {
	.st { padding: 120px 0 40px; min-height: 0; }
	.st__napis, .st__przewin { display: none; }
	.st__tresc { max-width: none; }
	.st__grafika { position: relative; left: auto; top: auto; width: auto; margin: 10px 0 0 20px; transform: none; }
	.st__auto { left: 22%; bottom: 3%; width: 74%; }
	.st__cien { left: 28%; width: 66%; bottom: 2%; }
}
@media (max-width: 640px) {
	.st__przyciski .przycisk { width: 100%; }
}

/* wariant „Zamów samochód” (strona pod reklamy): mniejszy tytuł, plakietka oceny Google pod przyciskami */
.st.st--zam { min-height: 720px; }
.st--zam .st__tresc .h { font-size: clamp(32px, 3.4vw, 56px); font-weight: 600; }
.st--zam .st__lead { margin: 30px 0 8px; font-size: 18px; font-weight: 500; }
.st--zam .st__tekst { max-width: 31em; margin-bottom: 40px; font-size: 16px; color: var(--tekst-3); }
.zam-ocena { display: inline-flex; align-items: center; gap: 12px; margin-top: 38px; padding: 10px 16px; border: 1px solid var(--karta-b); background: var(--karta); color: var(--tekst-2); font-size: 14px; text-decoration: none; transition: border-color .3s; }
.zam-ocena:hover { border-color: rgba(227, 38, 43, .5); }
.zam-ocena b { color: var(--tekst); font: 600 26px/1 var(--font-h); }
.zam-ocena .gwiazdki { color: #f5a623; font-size: 16px; letter-spacing: 2px; }
.zam-ocena strong { color: var(--tekst); }