/* Design tokens */
:root {
	--color-primary: #031867;
	--color-accent: #22d8ff;
	--color-accent-pressed: #00c4fc;
	--color-bg: #00205e;
	--color-bg-elevated: #00276f;
	--color-bg-deep: #001543;
	--color-gradient-light: #02f65c;
	--color-gradient-mid: #00f8f0;
	--color-text: #FFFFFF;
	--color-text-muted: #bdbdbd;
	--color-rg-banner: #dc2626;
	--color-border: rgba(255,255,255,0.12);
	--font-display: "Montserrat", system-ui, -apple-system, sans-serif;
	--font-body: "Montserrat", Arial, sans-serif;
	--container-site: 1140px;
	--container-readable: 710px;
	--container-padding: 24px;
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--header-height-desktop: 88px;
	--header-height-mobile: 72px;
	--space-xs: 6px;
	--space-sm: 12px;
	--space-md: 20px;
	--space-lg: 32px;
	--space-xl: 56px;
	--space-2xl: 88px;
	--motion-fast: 160ms ease;
	--motion-base: 240ms ease;
}

* { box-sizing: border-box; }

html, body { overflow-x: clip; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text);
	background: linear-gradient(180deg, #00205e 0%, #001543 100%);
	min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--color-accent); text-decoration: none; transition: color var(--motion-fast); }
a:hover { color: var(--color-accent-pressed); }

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.18;
	margin: 0 0 var(--space-md);
	color: #fff;
	letter-spacing: -0.01em;
}
h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
h2 { font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin-top: var(--space-xl); }
h3 { font-size: clamp(1.15rem, 1.6vw, 1.35rem); margin-top: var(--space-lg); }

p { margin: 0 0 var(--space-md); color: var(--color-text); }

main { padding-bottom: var(--space-2xl); }

main section { padding: var(--space-xl) 0; }
main section + section { padding-top: 0; }

/* Accessibility */
.skip-link {
	position: fixed; left: 12px; z-index: 200;
	background: var(--color-accent); color: var(--color-primary);
	padding: 8px 14px; border-radius: var(--radius-sm); font-weight: 700;
}
.skip-link:not(:focus) { top: -200px !important; }
.skip-link:focus { top: 12px; }

.sr-only {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); border: 0;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ----- Header (HEAD-08) ----- */
.sivul {
	background: rgba(0,21,67,0.92);
	border-bottom: 1px solid var(--color-border);
	backdrop-filter: blur(8px);
}
.sivul-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 12px var(--container-padding);
	display: flex; align-items: center; gap: var(--space-lg);
	min-height: var(--header-height-desktop);
}
.sivul-brand { display: inline-flex; align-items: center; flex-shrink: 0; }
.sivul-logo-pill {
	display: inline-flex; align-items: center;
	background: #fff;
	padding: 6px 14px;
	border-radius: var(--radius-md);
}
.sivul-logo, .sivul-logo-img {
	flex-shrink: 0;
	height: 88px;
	width: auto;
}
.sivul-nav { flex: 1; }
.sivul-nav-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: nowrap; gap: 4px;
	justify-content: flex-end; align-items: center;
}
.sivul-nav-list a {
	display: inline-block;
	padding: 10px 12px;
	color: var(--color-text);
	font-size: 0.95rem;
	font-weight: 500;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: background var(--motion-fast), color var(--motion-fast);
}
.sivul-nav-list a:hover { background: rgba(34,216,255,0.12); color: var(--color-accent); }
.sivul-nav-list a[aria-current="page"] {
	color: var(--color-accent);
	background: rgba(34,216,255,0.15);
}
.sivul-toggle {
	display: none;
	background: transparent;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	width: 44px; height: 44px;
	cursor: pointer;
	flex-shrink: 0;
	margin-left: auto !important;
	padding: 10px;
	flex-direction: column; justify-content: space-between;
}
.sivul-toggle span {
	display: block; height: 2px; width: 100%;
	background: var(--color-text); border-radius: 1px;
}
.sivul-mobile { display: none; }
.sivul-mobile-list {
	list-style: none; margin: 0; padding: 0;
}
.sivul-mobile-list a {
	display: block;
	padding: 14px var(--container-padding);
	color: var(--color-text);
	border-top: 1px solid var(--color-border);
}
.sivul-mobile-list a[aria-current="page"] { color: var(--color-accent); }

@media (max-width: 1100px) {
	.sivul-nav { display: none; }
	.sivul-toggle { display: flex; }
	.sivul-mobile.is-open {
		display: block;
		background: rgba(0,21,67,0.98);
		border-top: 1px solid var(--color-border);
	}
}
@media (max-width: 720px) {
	.sivul-inner { min-height: var(--header-height-mobile); }
	.sivul-logo, .sivul-logo-img { height: 60px; }
	.sivul-logo-pill { padding: 4px 10px; }
}

/* ----- Hero (HERO-08) ----- */
.rovom { padding: var(--space-2xl) 0 var(--space-xl); }
.rovom-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: var(--space-xl);
	align-items: center;
}
.rovom-eyebrow {
	font-size: 0.85rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--color-accent);
	font-weight: 600;
	margin: 0 0 var(--space-md);
}
.rovom-title { font-size: clamp(2rem, 4vw, 3.2rem); margin-bottom: var(--space-md); }
.rovom-subtitle { font-size: 1.05rem; max-width: 480px; color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.rovom-actions { display: flex; gap: var(--space-sm); }
.rovom-cta {
	display: inline-block;
	padding: 14px 32px;
	background: linear-gradient(120deg, var(--color-accent), var(--color-gradient-light));
	color: var(--color-bg-deep);
	font-weight: 700;
	border-radius: var(--radius-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
	box-shadow: 0 8px 24px rgba(34,216,255,0.28);
}
.rovom-cta:hover {
	background: linear-gradient(120deg, var(--color-accent-pressed), var(--color-gradient-mid));
	color: var(--color-bg-deep);
}
.rovom-media img {
	border-radius: var(--radius-lg);
	box-shadow: 0 24px 60px rgba(0,12,40,0.45);
	width: 100%; height: auto;
}

@media (max-width: 960px) {
	.rovom-inner { grid-template-columns: 1fr; }
	.rovom { padding: var(--space-xl) 0; }
}

/* ----- Page header (PHEAD-01) ----- */
.lutelav { padding: var(--space-xl) 0 var(--space-md); }
.lutelav-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.lutelav h1 {
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	border-left: 4px solid var(--color-accent);
	padding-left: var(--space-md);
}

/* ----- Inline CTA (INLINE-CTA-03) ----- */
.xobaf {
	max-width: var(--container-site);
	margin: var(--space-md) auto;
	padding: 0 var(--container-padding);
}
.xobaf-inner {
	background: rgba(34,216,255,0.08);
	border: 1px solid rgba(34,216,255,0.3);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
	display: flex; align-items: center; gap: var(--space-md);
	flex-wrap: wrap;
}
.xobaf-text { flex: 1; margin: 0; color: var(--color-text); min-width: 260px; }
.xobaf-btn {
	display: inline-block;
	background: var(--color-accent);
	color: var(--color-bg-deep);
	padding: 10px 20px;
	border-radius: var(--radius-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	flex-shrink: 0;
}
.xobaf-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg-deep); }

/* ----- Prose (PROSE-01) ----- */
.loxados { padding: var(--space-lg) 0; }
.loxados-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.loxados-inner h2 { margin-top: var(--space-xl); }
.loxados-inner p { color: var(--color-text); }
.loxados-inner a { text-decoration: underline; text-decoration-color: rgba(34,216,255,0.5); }

/* ----- Items grid (GRID-02) ----- */
.kanyp { padding: var(--space-xl) 0; }
.kanyp-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.kanyp-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--space-md);
}
.kanyp-card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
	transition: transform var(--motion-base), border-color var(--motion-base);
}
.kanyp-card:hover { transform: translateY(-3px); border-color: rgba(34,216,255,0.4); }
.kanyp-card h3 { color: var(--color-accent); margin-top: 0; margin-bottom: var(--space-sm); }
.kanyp-card p { margin: 0; color: var(--color-text-muted); }

/* ----- Reviews (REV-06) ----- */
.mipi { padding: var(--space-xl) 0; }
.mipi-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.mipi-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: var(--space-md);
}
.mipi-card {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-lg);
}
.mipi-card header {
	display: flex; justify-content: space-between; align-items: center;
	margin-bottom: var(--space-sm);
}
.mipi-author { font-weight: 700; color: var(--color-text); }
.mipi-rating { color: var(--color-accent); font-size: 0.95rem; }
.mipi-rating span { color: var(--color-text-muted); margin-left: 4px; }
.mipi-card p { margin: 0; color: var(--color-text-muted); }

/* ----- FAQ (FAQ-02) ----- */
.kunoz { padding: var(--space-xl) 0; }
.kunoz-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.kunoz-list { display: flex; flex-direction: column; gap: var(--space-sm); }
.kunoz-item {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
}
.kunoz-item summary {
	list-style: none;
	cursor: pointer;
	display: flex; justify-content: space-between; align-items: center;
	font-weight: 600;
	color: var(--color-text);
	gap: var(--space-md);
}
.kunoz-item summary::-webkit-details-marker { display: none; }
.kunoz-icon {
	font-size: 1.5rem; color: var(--color-accent);
	transition: transform var(--motion-base);
}
.kunoz-item[open] .kunoz-icon { transform: rotate(45deg); }
.kunoz-answer { padding-top: var(--space-md); color: var(--color-text-muted); }
.kunoz-answer p { margin: 0; }

/* ----- CTA block (CTA-05) ----- */
.fedi { padding: var(--space-xl) 0; }
.fedi-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: var(--space-xl) var(--container-padding);
	background: linear-gradient(135deg, rgba(34,216,255,0.12), rgba(2,246,92,0.06));
	border: 1px solid rgba(34,216,255,0.3);
	border-radius: var(--radius-lg);
	text-align: center;
}
.fedi-inner h2 { margin-top: 0; }
.fedi-inner p { max-width: 720px; margin: 0 auto var(--space-lg); color: var(--color-text-muted); }
.fedi-btn {
	display: inline-block;
	padding: 14px 32px;
	background: var(--color-accent);
	color: var(--color-bg-deep);
	font-weight: 700;
	border-radius: var(--radius-md);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.fedi-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg-deep); }

/* ----- Table (TABLE-05) ----- */
.dazev { padding: var(--space-lg) 0; }
.dazev-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.dazev-wrap { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--color-border); }
.dazev table { width: 100%; border-collapse: collapse; }
.dazev th, .dazev td {
	padding: 12px var(--space-md);
	text-align: left;
	border-bottom: 1px solid var(--color-border);
}
.dazev th { background: var(--color-bg-elevated); color: var(--color-accent); font-weight: 600; }
.dazev tbody tr:hover { background: rgba(34,216,255,0.04); }

/* ----- Legal (LEGAL-01) ----- */
.renid { padding: var(--space-xl) 0; }
.renid-inner {
	max-width: 820px;
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.renid-intro {
	color: var(--color-text-muted);
	font-size: 1.05rem;
	border-left: 3px solid var(--color-accent);
	padding-left: var(--space-md);
	margin-bottom: var(--space-xl);
}
.renid section h2 { color: var(--color-accent); }
.renid-disclaimer {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	color: var(--color-text-muted);
	font-size: 0.95rem;
	margin-top: var(--space-xl);
}

/* ----- Contact form (FORM-03) ----- */
.venuvy { padding: var(--space-xl) 0; }
.venuvy-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.venuvy-intro { color: var(--color-text-muted); margin-bottom: var(--space-lg); }
.venuvy-form { display: flex; flex-direction: column; gap: var(--space-md); }
.venuvy-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
.venuvy-form input, .venuvy-form textarea {
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	color: var(--color-text);
	padding: 12px;
	font: inherit;
}
.venuvy-form input:focus, .venuvy-form textarea:focus {
	outline: 2px solid var(--color-accent);
	border-color: var(--color-accent);
}
.venuvy-submit {
	background: var(--color-accent);
	color: var(--color-bg-deep);
	border: 0;
	padding: 14px 24px;
	border-radius: var(--radius-md);
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.venuvy-submit:hover { background: var(--color-accent-pressed); color: var(--color-bg-deep); }
.venuvy-success {
	background: rgba(2,246,92,0.12);
	border: 1px solid rgba(2,246,92,0.4);
	color: var(--color-gradient-light);
	border-radius: var(--radius-sm);
	padding: var(--space-md);
}

/* ----- Author card (AUTH-07) ----- */
.xozy { padding: var(--space-xl) 0; }
.xozy-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: var(--space-xl);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: var(--space-xl);
	align-items: start;
}
.xozy-portrait {
	width: 160px; height: 160px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--color-accent);
}
.xozy-name { margin-top: 0; }
.xozy-role { color: var(--color-accent); font-weight: 600; margin-bottom: var(--space-md); }
.xozy-bio { color: var(--color-text-muted); }
.xozy-expertise-heading { font-size: 1.05rem; margin-top: var(--space-lg); }
.xozy-expertise { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xozy-expertise li {
	background: rgba(34,216,255,0.12);
	border: 1px solid rgba(34,216,255,0.3);
	color: var(--color-text);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 0.88rem;
}

@media (max-width: 720px) {
	.xozy-inner { grid-template-columns: 1fr; text-align: center; }
	.xozy-portrait { margin: 0 auto; }
	.xozy-expertise { justify-content: center; }
}

/* ----- Byline (BYLINE-07) ----- */
.nykonu {
	max-width: var(--container-site);
	margin: var(--space-xl) auto var(--space-md);
	padding: 0 var(--container-padding);
}
.nykonu-inner {
	display: flex; align-items: center; gap: var(--space-md);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: var(--space-md) var(--space-lg);
}
.nykonu-portrait {
	width: 56px; height: 56px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--color-accent);
	flex-shrink: 0;
}
.nykonu-meta p { margin: 0; }
.nykonu-by { font-weight: 600; color: var(--color-text); }
.nykonu-by a { color: var(--color-accent); text-decoration: none; }
.nykonu-by a:hover { color: var(--color-accent-pressed); }
.nykonu-role { color: var(--color-text-muted); font-size: 0.9rem; }

/* ----- Error block (ERR-06) ----- */
.xery { padding: var(--space-2xl) 0; text-align: center; }
.xery-inner {
	max-width: 600px;
	margin: 0 auto;
	padding: 0 var(--container-padding);
}
.xery-btn {
	display: inline-block;
	margin-top: var(--space-md);
	background: var(--color-accent);
	color: var(--color-bg-deep);
	padding: 14px 28px;
	border-radius: var(--radius-md);
	font-weight: 700;
}
.xery-btn:hover { background: var(--color-accent-pressed); color: var(--color-bg-deep); }

/* ----- Cookie banner (COOK-01) ----- */
.katub {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	background: rgba(0,21,67,0.96);
	border-top: 1px solid var(--color-border);
	box-shadow: 0 -8px 30px rgba(0,0,0,0.35);
	z-index: 150;
}
.katub-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: var(--space-md) var(--container-padding);
	display: flex; align-items: center; gap: var(--space-md);
	flex-wrap: wrap;
}
.katub-message { flex: 1; margin: 0; color: var(--color-text); min-width: 240px; font-size: 0.95rem; }
.katub-actions { display: flex; gap: var(--space-sm); flex-shrink: 0; }
.katub-button {
	border: 0; cursor: pointer; font: inherit; font-weight: 600;
	padding: 10px 18px; border-radius: var(--radius-sm);
}
.katub-accept { background: var(--color-accent); color: var(--color-bg-deep); }
.katub-accept:hover { background: var(--color-accent-pressed); color: var(--color-bg-deep); }
.katub-decline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border); }
.katub-decline:hover { background: rgba(255,255,255,0.08); color: var(--color-text); }

@media (max-width: 720px) {
	.katub, .katub-inner {
		padding: 12px 14px !important;
		gap: 8px !important;
		font-size: 13px !important;
		line-height: 1.35 !important;
	}
	.katub-title, .katub-heading { display: none !important; }
	.katub-button, .katub button {
		padding: 8px 14px !important;
		font-size: 12px !important;
		min-height: 36px !important;
	}
}

/* ----- Footer (FOOT-04) ----- */
.xaso {
	background: var(--color-bg-deep);
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-2xl);
	padding-top: var(--space-xl);
}
.xaso-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: var(--space-xl);
}
.xaso-brand { display: flex; flex-direction: column; gap: var(--space-md); }
.xaso-logo-pill {
	display: inline-flex; align-items: center;
	background: #fff;
	padding: 6px 14px;
	border-radius: var(--radius-md);
	width: max-content;
}
.xaso-logo, .xaso-logo-img {
	flex-shrink: 0;
	height: 54px;
	width: auto;
}
.xaso-tagline { color: var(--color-text-muted); font-size: 0.9rem; }
.xaso-col h3 {
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--color-accent);
	margin-bottom: var(--space-md);
}
.xaso-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.xaso-col a { color: var(--color-text-muted); }
.xaso-col a:hover { color: var(--color-accent); }
.xaso-rg { color: var(--color-text-muted); font-size: 0.85rem; }
.xaso-age { margin-top: var(--space-md); }
.xaso-age span {
	display: inline-block;
	background: var(--color-rg-banner);
	color: #fff; font-weight: 700;
	padding: 6px 12px; border-radius: var(--radius-sm);
	font-size: 0.95rem;
}
.xaso-bottom {
	border-top: 1px solid var(--color-border);
	margin-top: var(--space-xl);
	padding: var(--space-md) var(--container-padding);
	text-align: center;
	color: var(--color-text-muted);
	font-size: 0.85rem;
}
.xaso-bottom p { margin: 0; }

@media (max-width: 960px) {
	.xaso-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.xaso-inner { grid-template-columns: 1fr; }
}

/* ----- Per-page images ----- */
.page-images { padding: var(--space-lg) 0; }
.page-images-inner {
	max-width: var(--container-site);
	margin: 0 auto;
	padding: 0 var(--container-padding);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	gap: var(--space-md);
}
.page-images figure { margin: 0; border-radius: var(--radius-md); overflow: hidden; }
.page-images img { width: 100%; height: auto; display: block; }