/* =============================================================
   SplitWater — wlasne reguly ponad Tailwinda.
   OSOBNY PLIK CELOWO. Wczesniej dopisywalem te reguly na koniec
   tailwind.css, a proces przebudowy arkusza ucinal plik od znacznika
   w dol — i kasowal je razem z nim. Tutaj sa bezpieczne.
   ============================================================= */

/* ---- Skala typografii i rytm ---------------------------------------- */
html.sw-root .heading-section {
	font-size: clamp(1.75rem, 2.6vw, 2.5rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
html.sw-root .heading-hero { font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1.05; }
html.sw-root .section-padding { padding-top: 5.5rem; padding-bottom: 5.5rem; }
@media (max-width: 640px) {
	html.sw-root .section-padding { padding-top: 3.5rem; padding-bottom: 3.5rem; }
}

/* ---- Etykieta sekcji ------------------------------------------------- */
html.sw-root .sw-etykieta {
	display: flex;
	align-items: center;
	gap: .85rem;
	font-family: var(--font-jetbrains-mono);
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #6b6b6b;
	margin-bottom: 1.25rem;
}
html.sw-root .sw-etykieta b { font-weight: 500; color: #1e3a8a; }
html.sw-root .sw-etykieta span { white-space: nowrap; }
html.sw-root .sw-etykieta::after {
	content: "";
	flex: 1;
	height: 1px;
	background: #00000014;
}
html.sw-root .sw-etykieta--ciemna { color: rgba(255,255,255,.55); }
html.sw-root .sw-etykieta--ciemna b { color: #93c5fd; }
html.sw-root .sw-etykieta--ciemna::after { background: rgba(255,255,255,.16); }

html.sw-root .sw-kapitalik::first-letter { text-transform: uppercase; }

/* ---- Tlo mesh --------------------------------------------------------
   Plamy sa mocno rozmyte. Na ciemnym tle rozmycie rozlewalo sie poza
   sekcje i tworzylo srebrzysta smuge przy gornej krawedzi. Przycinamy je
   do sekcji i sciagamy krycie tam, gdzie tlo jest ciemne.
   --------------------------------------------------------------------- */
html.sw-root .water-mesh { z-index: 0; clip-path: inset(0); }
html.sw-root .water-mesh + * { position: relative; z-index: 1; }
html.sw-root .bg-\[\#1a1a1a\] .water-mesh,
html.sw-root .bg-\[\#1e3a8a\] .water-mesh { opacity: .22; }
@media (max-width: 640px) { html.sw-root .water-mesh { display: none; } }

/* ---- Karty ----------------------------------------------------------- */
html.sw-root .grid > .glass-card { height: 100%; }
html.sw-root a.glass-card { display: flex; flex-direction: column; }
html.sw-root .hover-lift:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -20px rgba(30, 58, 138, .28);
}

/* ---- Klasy z projektu v0, ktorych nie ma w skompilowanym Tailwindzie ----
   Arkusz tailwind.css powstal ze skanu wczesniejszej wersji markupu, wiec
   nie zawiera tych trzech regul. Dopisujemy je tutaj zamiast przebudowywac
   caly arkusz. --color-accent-light jest zdefiniowany w :root tailwind.css. */
html.sw-root .bg-accent-light { background-color: var(--accent-light); }
html.sw-root .text-accent-light { color: var(--accent-light); }
html.sw-root .py-24 { padding-top: 6rem; padding-bottom: 6rem; }