/* ==========================================================================
   ZÁKLAD — reset, typografia, kontajner, tlačidlá, pozadie

   Všetko ostatné stojí na tomto súbore. Sekcie ho majú ako závislosť,
   takže sa načíta vždy ako prvý.
   ========================================================================== */

/* ---- Reset -------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;

	/*
	 * Hlavička je fixná — bez tohto by kotva („O nás") priskrolovala
	 * nadpis presne pod ňu a nadpis by nebolo vidieť.
	 */
	scroll-padding-top: calc(var(--cpx-header-height) + var(--cpx-space-26));
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	position: relative;
	margin: 0;
	font-family: var(--cpx-font);
	font-size: var(--cpx-fs-base);
	line-height: var(--cpx-lh-base);
	color: var(--cpx-text);
	background: var(--cpx-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	text-decoration: none;
}

button {
	font: inherit;
}

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--cpx-font-display);
	font-weight: var(--cpx-weight-bold);
	line-height: var(--cpx-lh-tight);
	color: var(--cpx-text-strong);
}

p {
	margin: 0;
}

::selection {
	background: var(--cpx-accent);
	color: var(--cpx-text-on-accent);
}

/* Zameranie musí byť vidieť — myš ho nezobrazí, klávesnica áno. */
:focus-visible {
	outline: 2px solid var(--cpx-accent);
	outline-offset: 2px;
}

/* ---- Svetelné pozadie --------------------------------------------------- */

/*
 * Rozptýlené svetlo cez celú stránku — to isté, čo v dizajne drží
 * sekcie pokope. Je `fixed`, aby pri rolovaní neputovalo s obsahom
 * a aby jeho výška nezávisela od dĺžky stránky.
 *
 * `z-index: -1` je tu podmienkou, nie ozdobou: pozadie `body` sa
 * v CSS prenáša na plátno okna, takže samotné `body` nič nevykresľuje
 * a svetlo skončí presne medzi plátnom a obsahom. Preto sa farba
 * pozadia NIKDY nesmie presunúť na `html` — svetlo by zmizlo pod ním.
 */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(1000px 620px at 78% 6%, rgba(0, 174, 239, 0.30), transparent 62%),
		radial-gradient(820px 560px at 4% 24%, rgba(25, 230, 210, 0.16), transparent 64%),
		radial-gradient(900px 620px at 92% 42%, rgba(52, 211, 153, 0.13), transparent 62%),
		radial-gradient(880px 600px at 10% 62%, rgba(0, 174, 239, 0.16), transparent 64%),
		radial-gradient(1000px 640px at 70% 84%, rgba(25, 230, 210, 0.16), transparent 62%);
}


/* ---- Prístupnosť -------------------------------------------------------- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--cpx-space-16);
	z-index: 1000;
	padding: var(--cpx-space-12) var(--cpx-space-16);
	border: 1px solid var(--cpx-accent);
	border-radius: var(--cpx-radius-sm);
	background: var(--cpx-surface);
	color: var(--cpx-text-strong);
	font-size: var(--cpx-fs-small);
}

.skip-link:focus {
	top: var(--cpx-space-16);
}

/* ---- Kontajner ---------------------------------------------------------- */

.cpx-container {
	width: 100%;
	max-width: calc(var(--cpx-container) + 2 * var(--cpx-gutter));
	margin-inline: auto;
	padding-inline: var(--cpx-gutter);
}

/*
 * Šablóny so sekciami si odsadenie riešia samy (sekcia je na celú šírku
 * a odsadenie patrí do nej). Šablóny s bežným obsahom ho dostanú tu.
 * Horné odsadenie počíta s fixnou hlavičkou.
 */
.cpx-main--flow {
	padding-block: calc(var(--cpx-header-height) + var(--cpx-space-64)) var(--cpx-space-section);
	padding-inline: var(--cpx-gutter);
}

.cpx-main--sections {
	padding-block: 0;
}

/* ---- Typografické pomôcky ----------------------------------------------- */

.cpx-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--cpx-space-12);
	font-family: var(--cpx-font-mono);
	font-size: var(--cpx-fs-eyebrow);
	font-weight: var(--cpx-weight-semibold);
	letter-spacing: var(--cpx-ls-eyebrow);
	text-transform: uppercase;
	color: var(--cpx-text-faint);
}

/* Bodka pri nadtitulku dýcha — jediný opakujúci sa pohyb na stránke. */
.cpx-eyebrow__dot {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: var(--cpx-radius-pill);
	background: var(--cpx-accent);
	animation: cpx-drift var(--cpx-duration-signal) var(--cpx-ease) infinite;
}

@keyframes cpx-drift {
	0%,
	100% {
		opacity: 0.5;
	}

	50% {
		opacity: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cpx-eyebrow__dot {
		animation: none;
	}
}

.cpx-section__title {
	font-size: var(--cpx-fs-h2);
	font-weight: var(--cpx-weight-bold);
	letter-spacing: var(--cpx-ls-heading);
}

.cpx-section__lead {
	max-width: 52ch;
	font-size: var(--cpx-fs-base);
	line-height: var(--cpx-lh-loose);
	color: var(--cpx-text-faint);
}

/* Zvýraznené slovo v nadpise — prechod cez tri značkové farby. */
.cpx-gradient {
	background: linear-gradient(96deg, var(--cpx-accent), var(--cpx-data) 58%, var(--cpx-positive));
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
}

/* ---- Tlačidlá ----------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--cpx-space-8);
	min-height: var(--cpx-control-height);
	padding-inline: var(--cpx-space-26);
	border: 1px solid transparent;
	border-radius: var(--cpx-radius-sm);
	font-family: var(--cpx-font);
	font-size: var(--cpx-fs-body);
	font-weight: var(--cpx-weight-semibold);
	line-height: 1;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--cpx-duration-fast) var(--cpx-ease),
		border-color var(--cpx-duration-fast) var(--cpx-ease),
		color var(--cpx-duration-fast) var(--cpx-ease),
		box-shadow var(--cpx-duration-fast) var(--cpx-ease);
}

.btn:hover,
.btn:focus-visible {
	text-decoration: none;
}

.btn:active {
	transform: scale(0.985);
}

.btn--primary {
	background: var(--cpx-accent);
	border-color: var(--cpx-accent);
	color: var(--cpx-text-on-accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
	background: var(--cpx-accent-hover);
	border-color: var(--cpx-accent-hover);
	color: var(--cpx-text-on-accent);
}

.btn--outline {
	background: transparent;
	border-color: var(--cpx-border);
	color: var(--cpx-text);
}

.btn--outline:hover,
.btn--outline:focus-visible {
	border-color: var(--cpx-accent);
	color: var(--cpx-text-strong);
}

/*
 * Textový odkaz so šípkou — druhé CTA vedľa tlačidla. Nemá výplň ani
 * rám, takže tlačidlo ostáva jediným ťažiskom.
 */
.btn--ghost {
	min-height: var(--cpx-control-height);
	padding-inline: 0;
	border: 0;
	background: none;
	color: var(--cpx-text);
	font-weight: var(--cpx-weight-regular);
}

.btn--ghost .btn__arrow {
	display: inline-flex;
	width: 16px;
	height: 16px;
	color: var(--cpx-accent);
	transition: transform var(--cpx-duration-fast) var(--cpx-ease);
}

.btn--ghost:hover .btn__arrow,
.btn--ghost:focus-visible .btn__arrow {
	transform: translateX(4px);
}

.btn__arrow svg {
	width: 100%;
	height: 100%;
}

/* ---- Sekcie ------------------------------------------------------------- */

/*
 * Odstup rieši sekcia sama (`padding-block`), nie medzery medzi nimi —
 * inak by sa farebné pozadia nedotýkali a vznikali by pruhy.
 */
/*
 * `isolation` drží dekoratívne vrstvy sekcie (napr. rozptýlené svetlo
 * za nadpisom) vo vnútri sekcie. Bez toho by ich `z-index: -1` prepadol
 * až za svetlo na pozadí stránky.
 */
.cpx-section {
	position: relative;
	isolation: isolate;
	padding-block: var(--cpx-space-section);
}

/*
 * Prvá sekcia na stránke musí uhnúť fixnej hlavičke. Hero to má
 * vyriešené vo vlastnom CSS, lebo si hlavičku podchádza zámerne.
 */
.cpx-main--sections > .cpx-section:first-child {
	padding-top: calc(var(--cpx-header-height) + var(--cpx-space-section));
}

/* ---- Bežný obsah (WYSIWYG, jednoduchá podstránka) ----------------------- */

.cpx-prose {
	max-width: 68ch;
}

.cpx-prose > * + * {
	margin-top: var(--cpx-space-20);
}

.cpx-prose h2 {
	margin-top: var(--cpx-space-44);
	font-size: var(--cpx-fs-h2);
	letter-spacing: var(--cpx-ls-heading);
}

.cpx-prose h3 {
	margin-top: var(--cpx-space-34);
	font-size: var(--cpx-fs-h3);
	letter-spacing: var(--cpx-ls-h3);
}

.cpx-prose p,
.cpx-prose li {
	line-height: var(--cpx-lh-loose);
	color: var(--cpx-text-muted);
}

.cpx-prose a {
	color: var(--cpx-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cpx-prose ul,
.cpx-prose ol {
	padding-left: var(--cpx-space-20);
}

.cpx-prose strong {
	color: var(--cpx-text-strong);
	font-weight: var(--cpx-weight-semibold);
}