/* Celyus Theme */

/* ── Layer order ─────────────────────────────────────── */
@layer reset, base, layout, components, sections, utilities;

/* ── Tokens — outside layers, always available ───────── */
:root {
	/* Colors */
	--color-primary: #216295;
	--color-secondary: #00acab;
	--color-accent: #bd2126;
	--color-text: #1a1a1a;
	--color-bg: #efeeed;
	--color-white: #ffffff;
	--color-border: #e0e0e0;

	/* Gradient */
	--gradient-brand: linear-gradient(to right, var(--color-primary), var(--color-secondary));

	/* Typography */
	--font-primary: 'Roboto', system-ui, sans-serif;
	--font-secondary: 'PT Serif', Georgia, serif;
	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;
	--font-extrabold: 800;

	/* Type scale */
	--text-xs: 0.75rem;
	--text-sm: 0.875rem;
	--text-base: 1rem;
	--text-lg: 1.125rem;
	--text-xl: 1.25rem;
	--text-2xl: 1.5rem;
	--text-3xl: 1.875rem;
	--text-4xl: 2.25rem;
	--text-5xl: 3rem;

	/* Spacing (8px rhythm) */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;
	--space-24: 6rem;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;
	--radius-xl: 20px;
	--radius-full: 9999px;

	/* Shadows */
	--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

	/* Transitions */
	--transition-fast: 0.15s ease;
	--transition-base: 0.25s ease;
	--transition-slow: 0.35s ease;

	/* Z-index */
	--z-header: 100;
	--z-overlay: 199;
	--z-drawer: 200;
	--z-modal: 300;
	--z-toast: 400;

	/* Section backgrounds */
	--color-bg-light: #f3f9fd;

	/* Logo widths */
	--logo-footer-width: 140px;

	/* Layout */
	--container-max: 1280px;
	--container-padding: 2rem;
	--header-height: 70px;
}

@media (max-width: 768px) {
	:root {
		--header-height: 60px;
		--container-padding: 1.25rem;
	}
}

/* ── Reset ───────────────────────────────────────────── */
@layer reset {

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

	body {
		margin: 0;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0;
		font-size: inherit;
		font-weight: inherit;
	}

	p {
		margin: 0;
	}

	ul,
	ol {
		list-style: none;
		padding: 0;
		margin: 0;
	}

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

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

	button {
		cursor: pointer;
		border: none;
		background: none;
		font: inherit;
		padding: 0;
	}

	input,
	textarea,
	select {
		font: inherit;
	}
}

/* ── Base ────────────────────────────────────────────── */
@layer base {
	body {
		font-family: var(--font-primary);
		font-size: var(--text-base);
		font-weight: var(--font-regular);
		color: var(--color-text);
		line-height: 1.2;
		-webkit-font-smoothing: antialiased;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--font-primary);
		line-height: 1.2;
	}

	h1 {
		font-size: var(--text-5xl);
		font-weight: var(--font-extrabold);
	}

	h2 {
		font-size: var(--text-4xl);
		font-weight: var(--font-bold);
	}

	h3 {
		font-size: var(--text-2xl);
		font-weight: var(--font-semibold);
	}

	h4 {
		font-size: var(--text-xl);
		font-weight: var(--font-semibold);
	}

	p {
		margin-bottom: var(--space-4);
	}

	p:last-child {
		margin-bottom: 0;
	}

	p a {
		color: var(--color-secondary);
		text-decoration: underline;
		transition: color var(--transition-fast);
	}

	p a:hover {
		color: var(--color-primary);
	}

	blockquote {
		font-family: var(--font-secondary);
		font-style: italic;
		font-weight: var(--font-bold);
		font-size: var(--text-xl);
		color: var(--color-primary);
		margin: 0;
	}

	@media (max-width: 768px) {
		h1 {
			font-size: var(--text-3xl);
		}

		h2 {
			font-size: var(--text-3xl);
		}

		h3 {
			font-size: var(--text-xl);
		}
	}
}

/* ── Layout ──────────────────────────────────────────── */
@layer layout {
	.container {
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-padding);
	}
}

/* ── Components ──────────────────────────────────────── */
@layer components {

	/* Header */
	.site-header {
		position: relative;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-border);
		z-index: var(--z-header);
	}

	.header-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-padding);
		height: var(--header-height);
	}

	.site-logo img {
		width: var(--logo-width, 120px);
		height: auto;
	}

	@media (max-width: 768px) {
		.site-logo img {
			width: var(--logo-mobile-width, 110px);
		}
	}

	.mobile-nav-logo img {
		width: var(--logo-mobile-width, 110px);
		height: auto;
	}

	/* Desktop nav */
	.primary-nav ul {
		display: flex;
		align-items: center;
	}

	.primary-nav li+li::before {
		content: '|';
		color: var(--color-border);
		padding: 0 0.75rem;
		pointer-events: none;
		user-select: none;
	}

	.primary-nav a {
		position: relative;
		color: var(--color-text);
		font-size: var(--text-base);
		font-weight: var(--font-medium);
		padding: 0.25rem 0;
		transition: color var(--transition-fast);
	}

	.primary-nav a::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		right: 0;
		height: 2px;
		background: var(--color-primary);
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--transition-base);
	}

	.primary-nav a:hover { color: var(--color-secondary); }
	.primary-nav a:hover::after { transform: scaleX(1); background: var(--color-secondary); }

	.primary-nav .current-menu-item a        { color: var(--color-secondary); }
	.primary-nav .current-menu-item a::after { transform: scaleX(1); background: var(--color-secondary); }

	/* Hamburger */
	.nav-toggle {
		display: none;
		flex-direction: column;
		justify-content: center;
		gap: 5px;
		padding: 6px;
		width: 36px;
		height: 36px;
	}

	.nav-toggle span {
		display: block;
		width: 24px;
		height: 2px;
		background: var(--color-text);
		border-radius: var(--radius-full);
		transform-origin: center;
		transition: transform var(--transition-base), opacity var(--transition-fast);
	}

	.nav-toggle.is-open span:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.nav-toggle.is-open span:nth-child(2) {
		opacity: 0;
		transform: scaleX(0);
	}

	.nav-toggle.is-open span:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Mobile drawer */
	.mobile-nav {
		display: none;
		position: fixed;
		top: 0;
		right: 0;
		height: 100%;
		width: min(320px, 85vw);
		background: var(--color-white);
		box-shadow: var(--shadow-lg);
		transform: translateX(100%);
		transition: transform var(--transition-slow);
		z-index: var(--z-drawer);
		padding: var(--space-8) var(--space-6);
		flex-direction: column;
		overflow-y: auto;
	}

	.mobile-nav.is-open {
		transform: translateX(0);
	}

	.mobile-nav-close {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
		width: 32px;
		height: 32px;
		opacity: 0.45;
		transition: opacity var(--transition-fast);
	}

	.mobile-nav-close:hover {
		opacity: 0.75;
	}

	.mobile-nav-close::before,
	.mobile-nav-close::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 18px;
		height: 2px;
		background: var(--color-text);
		border-radius: var(--radius-full);
	}

	.mobile-nav-close::before {
		transform: translate(-50%, -50%) rotate(45deg);
	}

	.mobile-nav-close::after {
		transform: translate(-50%, -50%) rotate(-45deg);
	}

	.mobile-nav ul {
		margin-top: var(--space-6);
		display: flex;
		flex-direction: column;
	}

	.mobile-nav a {
		display: block;
		padding: var(--space-3) 0;
		border-bottom: 1px solid var(--color-border);
		color: var(--color-text);
		font-size: var(--text-base);
		font-weight: var(--font-medium);
		transition: color var(--transition-fast);
	}

	.mobile-nav a:hover {
		color: var(--color-primary);
	}

	/* Overlay */
	.nav-overlay {
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.4);
		opacity: 0;
		visibility: hidden;
		transition: opacity var(--transition-slow), visibility var(--transition-slow);
		z-index: var(--z-overlay);
	}

	.nav-overlay.is-open {
		opacity: 1;
		visibility: visible;
	}

	@media (max-width: 768px) {
		.primary-nav {
			display: none;
		}

		.nav-toggle {
			display: flex;
		}

		.mobile-nav {
			display: flex;
		}
	}
}

/* ── Footer ──────────────────────────────────────────── */
@layer components {

	/* color és font-size örökölnek innen — nem kell ismételni a gyerekekben */
	.site-footer {
		background: var(--color-primary);
		color: var(--color-white);
		font-size: var(--text-base);
	}

	.footer-main {
		padding: var(--space-12) 0;
	}

	.footer-grid {
		display: grid;
		grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
		gap: var(--space-8);
		align-items: start;
	}

	.footer-logo {
		display: inline-block;
		margin-bottom: var(--space-1);
	}

	.footer-logo img {
		width: var(--logo-footer-width, 140px);
		height: auto;
	}

	@media (max-width: 768px) {
		.footer-logo img {
			width: var(--logo-mobile-width, 110px);
		}
	}

	.footer-col .widget-title {
		display: none;
	}

	.footer-col p {
		line-height: 1.2;
		margin-bottom: 0;
	}

	.footer-col ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-2);
	}

	.footer-col a {
		text-decoration: underline;
		text-underline-offset: 3px;
		transition: color var(--transition-fast);
	}

	.footer-col a:hover {
		color: var(--color-secondary);
	}

	/* Bottom bar */
	.footer-bottom {
		background: var(--color-secondary);
		padding: var(--space-4) 0;
	}

	.footer-bottom .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-wrap: wrap;
		gap: var(--space-3);
	}

	.footer-copyright {
		font-weight: var(--font-semibold);
		margin: 0;
	}

	.footer-legal ul {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.footer-legal li + li::before {
		content: '-';
		padding: 0 var(--space-2);
		opacity: 0.6;
	}

	.footer-legal a {
		position: relative;
		transition: color var(--transition-fast);
		font-weight: var(--font-semibold);
	}

	.footer-legal a::after {
		content: '';
		position: absolute;
		bottom: -2px;
		left: 0;
		right: 0;
		height: 1px;
		background: currentColor;
		transform: scaleX(0);
		transform-origin: center;
		transition: transform var(--transition-base);
	}

	.footer-legal a:hover::after {
		transform: scaleX(1);
	}

	@media (max-width: 768px) {
		.footer-grid {
			grid-template-columns: 1fr 1fr;
		}

		.footer-col--brand {
			grid-column: 1 / -1;
		}

		.footer-bottom .container {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-2);
		}

		.footer-copyright {
			margin-bottom: 10px;
		}

		.footer-legal ul {
			flex-direction: column;
			align-items: flex-start;
		}

		.footer-legal li + li::before {
			display: none;
		}
	}
}

/* ── Buttons ─────────────────────────────────────────── */
@layer components {

	.btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-3) var(--space-8);
		font-weight: var(--font-bold);
		font-size: var(--text-xl);
		border-radius: var(--radius-md);
		border: 2px solid transparent;
		transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
		white-space: wrap;
	}

	.btn--accent {
		background: var(--color-accent);
		color: var(--color-white);
	}

	.btn--accent:hover {
		background: var(--color-white);
		color: var(--color-accent);
		border: 2px solid var(--color-accent);
	}

	.btn--accent-bordered {
		background: var(--color-accent);
		color: var(--color-white);
		border-color: var(--color-white);
	}

	.btn--accent-bordered:hover {
		background: var(--color-white);
		color: var(--color-accent);
		border-color: var(--color-accent);
	}

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

	.btn--outline:hover {
		background: var(--color-white);
		color: var(--color-primary);
	}

	.btn--secondary {
		background: var(--color-secondary);
		color: var(--color-white);
	}

	.btn--secondary:hover {
		background: var(--color-white);
		color: var(--color-secondary);
		border-color: var(--color-secondary);
	}

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

	.btn--secondary-outline:hover {
		background: var(--color-secondary);
		color: var(--color-white);
	}

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

	.btn--outline-dark:hover {
		background: var(--color-text);
		color: var(--color-white);
	}

	.btn--white {
		background: var(--color-white);
		color: var(--color-primary);
		border-color: var(--color-secondary);
	}

	.btn--white:hover {
		background: var(--color-secondary);
		color: var(--color-white);
		border-color: var(--color-secondary);
	}

	@media (max-width: 768px) {
		.btn {
			width: 100%;
			justify-content: center;
		}
	}
}

/* ── Sections ────────────────────────────────────────── */
@layer sections {

	/* Hero */
	.hero {
		--hero-min-height: 560px;
		position: relative;
		overflow: hidden;
		min-height: var(--hero-min-height);
		background: var(--color-primary);
	}

	.hero-image {
		position: absolute;
		inset: 0;
	}

	.hero-image .celyus-img-wrap {
		width: 50%;
		min-height: var(--hero-min-height);
		height: 100%;
	}

	.hero-content {
		position: relative;
		z-index: 1;
		width: 62%;
		min-height: 560px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-6);
		padding: var(--space-20) var(--space-12);
		padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		color: var(--color-white);
	}

	.hero-content::before {
		content: '';
		position: absolute;
		inset: 0;
		background: var(--color-primary);
		clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
		z-index: -1;
	}

	.hero-content p {padding-right: 5%;}

	.hero-actions {
		display: flex;
		gap: var(--space-4);
		flex-wrap: wrap;
	}

	@media (max-width: 768px) {
		.hero {
			display: flex;
			flex-direction: column;
			min-height: auto;
		}

		.hero-image {
			position: relative;
			inset: auto;
			height: 350px;
			flex-shrink: 0;
			float: none;
		}

		.hero-image .celyus-img-wrap {
			width: 100%;
			float: none;
		}
		.hero-image .celyus-img { --cimg-pos-m: center top; }

		.hero-content {
			width: 100%;
			min-height: auto;
			padding: var(--space-10) var(--container-padding);
		}

		.hero-content::before {
			clip-path: none;
		}
	}
	@media (min-width: 1920px) {
		.hero-content p,
		.hero-content h1 {padding-right: 10%;}
	}

	/* Features */
	.features {
		background: var(--color-white);
		padding: var(--space-12) 0;
	}

	.features-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		max-width: var(--container-max);
		margin: 0 auto;
		padding: 0 var(--container-padding);
	}

	.features-item {
		position: relative;
		padding: var(--space-6) var(--space-8);
		text-align: center;
	}

	.features-item:not(:first-child)::before {
		content: '';
		position: absolute;
		left: 0;
		top: var(--space-12);
		bottom: var(--space-12);
		width: 2px;
		background: #d2dfe9;
	}

	.features-icon {
		margin: 0 auto var(--space-4);
	}

	.features-icon img {
		width: 72px;
		height: 72px;
		object-fit: contain;
		margin: 0 auto;
	}

	.features-item h3 {
		color: var(--color-primary);
		font-size: var(--text-xl);
		font-weight: var(--font-extrabold);
		line-height: 1.3;
		margin-bottom: var(--space-3);
	}

	.features-item p {
		color: var(--color-text);
		font-size: var(--text-base);
		margin-bottom: 0;
	}

	@media (max-width: 768px) {
		.features-grid {
			display: flex;
			flex-direction: column;
		}

		.features-item {
			padding: var(--space-6) var(--space-4);
		}

		.features-item:not(:first-child)::before {
			top: 0;
			bottom: auto;
			left: var(--space-4);
			right: var(--space-4);
			width: auto;
			height: 1px;
		}
	}

	/* imgtext / textimg — reusable image+text section layouts */
	.imgtext,
	.textimg {
		--section-min-height: 560px;
		position: relative;
		overflow: hidden;
		min-height: var(--section-min-height);
		background: var(--color-white);
	}

	.imgtext-video {
		position: relative;
		aspect-ratio: 16 / 9;
		border-radius: var(--radius-md);
		overflow: hidden;
	}

	.imgtext-video iframe {
		width: 100%;
		height: 100%;
		display: block;
	}

	.imgtext-image,
	.textimg-image {
		position: absolute;
		inset: 0;
	}

	.imgtext-image .celyus-img-wrap,
	.textimg-image .celyus-img-wrap {
		width: 52%;
		min-height: var(--section-min-height);
		height: 100%;
	}

	.imgtext-content,
	.textimg-content {
		position: relative;
		z-index: 1;
		width: 60%;
		min-height: 560px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: var(--space-4);
		padding-top: var(--space-20);
		padding-bottom: var(--space-20);
	}

	.imgtext-actions {
		display: flex;
		gap: var(--space-4);
		flex-wrap: wrap;
	}

	/* imgtext: image left, content right */
	.imgtext-content {
		margin-left: auto;
		padding-left: 11%;
		padding-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		background: linear-gradient(to left, var(--color-white) 82%, transparent);
	}

	/* textimg: content left, image right */
	.textimg-content {
		margin-right: auto;
		padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		padding-right: 11%;
		background: linear-gradient(to right, var(--color-white) 82%, transparent);
	}

	/* ── Split layout (2-column grid, no overlap/gradient) ── */
	.imgtext--split,
	.textimg--split {
		min-height: 0;
		overflow: visible;
		display: grid;
		grid-template-columns: var(--split-cols, 1fr 1fr);
		align-items: var(--split-align, center);
		gap: var(--split-gap, var(--space-8));
		padding-top: var(--space-16);
		padding-bottom: var(--space-16);
		padding-left: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
		padding-right: max(var(--container-padding), calc((100vw - var(--container-max)) / 2 + var(--container-padding)));
	}

	.imgtext--split .imgtext-image,
	.textimg--split .textimg-image {
		position: relative;
		inset: auto;
	}

	.imgtext--split .imgtext-image .celyus-img-wrap,
	.textimg--split .textimg-image .celyus-img-wrap {
		width: 100%;
		height: auto;
		min-height: 0;
	}
	.imgtext--split .imgtext-image .celyus-img,
	.textimg--split .textimg-image .celyus-img {
		height: auto;
		border-radius: var(--radius-md);
	}

	.imgtext--split .imgtext-content,
	.textimg--split .textimg-content {
		position: static;
		width: auto;
		min-height: 0;
		margin: 0;
		padding: 0;
		background: none;
	}

	/* textimg--split: image right (swap column order) */
	.textimg--split .textimg-image {
		order: 2;
	}

	.textimg--split .textimg-content {
		order: 1;
	}

	/* Typography */
	.imgtext-content h2,
	.textimg-content h2 {
		color: var(--color-primary);
		font-weight: var(--font-extrabold);
	}

	/* Bullet list — styled for both layouts */
	.imgtext-body ul,
	.textimg-body ul {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
		padding: 0;
		margin: 0;
		margin-top: 25px;
		line-height: 0.8em;
		margin-bottom: 20px;
	}

	.imgtext-body ul li,
	.textimg-body ul li {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.imgtext-body ul li::before,
	.textimg-body ul li::before {
		content: '';
		flex-shrink: 0;
		width: 14px;
		height: 14px;
		border-radius: var(--radius-full);
		background: var(--color-secondary);
	}

	@media (max-width: 768px) {
		.imgtext,
		.textimg {
			display: flex;
			flex-direction: column;
			min-height: auto;
		}

		.imgtext-image,
		.textimg-image {
			position: relative;
			inset: auto;
			height: 350px;
			flex-shrink: 0;
		}

		.imgtext-image .celyus-img-wrap,
		.textimg-image .celyus-img-wrap {
			width: 100%;
		}

		.imgtext-content,
		.textimg-content {
			width: 100%;
			min-height: auto;
			margin: 0;
			padding: var(--space-10) var(--container-padding);
			background: var(--color-white);
		}

		.imgtext--split,
		.textimg--split {
			display: grid;
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}

		.imgtext--split .imgtext-image,
		.textimg--split .textimg-image {
			height: auto;
		}

		.textimg--split .textimg-image,
		.textimg--split .textimg-content {
			order: unset;
		}
	}

	/* Showcase 3 icons */
	.showcase-3icons {
		background: var(--color-bg-light);
		padding: var(--space-16) 0;
	}

	.showcase-3icons-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		text-align: center;
		margin-bottom: var(--space-12);
	}

	.showcase-3icons-header h2 {
		color: var(--color-primary);
	}

	.showcase-3icons-header h2 .text-accent {
		color: var(--color-accent);
	}

	.showcase-3icons-subtitle {
		font-size: var(--text-xl);
		font-weight: var(--font-regular);
		color: var(--color-primary);
	}

	.showcase-3icons-grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: var(--space-8);
		justify-content: center;
	}

	.icon-box {
		display: flex;
		align-items: flex-start;
		gap: var(--space-6);
	}

	.icon-box-icon {
		flex-shrink: 0;
	}

	.icon-box-icon img {
		width: 80px;
		height: 80px;
		object-fit: contain;
	}

	.icon-box-body {
		border-left: 2px solid #2b6a99;
		padding-left: var(--space-6);
	}

	.icon-box-title {
		display: flex;
		flex-direction: column;
		gap: var(--space-1);
		margin-bottom: var(--space-3);
	}

	.icon-box-title-top {
		font-size: var(--text-3xl);
		font-weight: var(--font-extrabold);
		color: var(--color-primary);
		line-height: 1;
	}

	.icon-box-title-bottom {
		font-size: var(--text-base);
		font-weight: var(--font-bold);
		color: var(--color-primary);
	}

	.icon-box-body > p {
		color: var(--color-text);
		font-size: var(--text-base);
	}

	/* showcase-3icons — optional stat boxes + mid/footer text (e.g. "Comment renouveler") */
	.showcase-3icons-stats {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: var(--space-4);
		margin: 0 auto var(--space-6);
	}

	.stat-box {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-2);
		width: 210px;
		padding: var(--space-6) var(--space-12);
		background: var(--color-white);
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-lg);
		text-align: center;
	}

	.stat-box-value {
		font-size: var(--text-3xl);
		font-weight: var(--font-extrabold);
		color: var(--color-secondary);
		line-height: 1;
	}

	.stat-box-label {
		font-size: var(--text-base);
		font-weight: var(--font-bold);
		color: var(--color-text);
	}

	.stat-box-sep {
		color: var(--color-text);
		font-size: var(--text-sm);
	}

	.showcase-3icons-midtext,
	.showcase-3icons-footer {
		text-align: center;
		color: var(--color-primary);
		font-weight: var(--font-bold);
		font-size: var(--text-xl);
		margin-bottom: var(--space-10);
	}

	.showcase-3icons-footer {
		max-width: 750px;
		margin: var(--space-10) auto 0;
		text-align: center;
	}

	@media (max-width: 768px) {
		.showcase-3icons-grid {
			grid-template-columns: 1fr;
			gap: var(--space-6);
		}

		.icon-box-title-top {
			font-size: var(--text-2xl);
		}
	}

	/* Plans 3col */
	.plans-3col {
		padding: var(--space-20) 0;
		background: var(--color-bg-light);
	}

	.plans-header {
		text-align: center;
		margin-bottom: var(--space-12);
	}

	.plans-header h2 {
		color: var(--color-primary);
		margin-bottom: var(--space-1);
	}

	.plans-header h2 .text-accent {
		color: var(--color-accent);
	}

	.plans-subtitle {
		color: var(--color-primary);
		font-size: var(--text-lg);
		font-weight: var(--font-semibold);
	}

	.plans-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-6);
	}

	.plan-card {
		background: var(--color-white);
		border: 2px solid var(--color-secondary);
		border-radius: var(--radius-lg);
		overflow: hidden;
		display: flex;
		flex-direction: column;
	}

	.plan-card-badge {
		display: flex;
		justify-content: center;
		padding: var(--space-6) var(--space-6) 0;
	}

	.plan-card-badge img {
		width: auto;
		height: auto;
		max-width: var(--badge-size, 100%);
	}

	.plan-card-body {
		padding: var(--space-6);
		display: flex;
		flex-direction: column;
		flex: 1;
		text-align: center;
	}

	.plan-card-title {
		color: var(--color-primary);
		margin-bottom: var(--space-3);
		text-align: center;
		font-weight: var(--font-extrabold);
		font-size: var(--text-3xl);
	}

	.plan-card-text {
		color: var(--color-text);
		font-size: var(--text-base);
		flex: 1;
		margin-bottom: var(--space-4);
	}

	.plan-card-price {
		font-size: var(--text-3xl);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}

	@media (max-width: 768px) {
		.plans-grid {
			grid-template-columns: 1fr;
		}
	}

	/* Sessions list */
	.sessions-list {
		padding: var(--space-16) 0;
		background: var(--color-white);
	}

	.sessions-inner {
		display: grid;
		grid-template-columns: 280px 1fr;
		gap: var(--space-8);
		align-items: start;
	}

	.sessions-left {
		background: var(--color-secondary);
		border-radius: var(--radius-lg);
		padding: var(--space-8);
		display: flex;
		flex-direction: column;
		gap: var(--space-6);
	}

	.sessions-left-text {
		color: var(--color-white);
		font-size: var(--text-base);
	}

	.sessions-table {
		border-top: 1px solid var(--color-border);
	}

	.session-row {
		display: grid;
		grid-template-columns: 1fr auto auto;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-4) 0;
		border-bottom: 1px solid var(--color-border);
	}

	.session-name {
		font-weight: var(--font-medium);
		color: var(--color-text);
		font-size: var(--text-sm);
	}

	.session-meta {
		font-size: var(--text-sm);
		color: var(--color-text);
		white-space: nowrap;
	}

	.session-meta-sep {
		margin: 0 var(--space-1);
		color: var(--color-border);
	}

	.session-cta {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: var(--radius-full);
		background: var(--color-secondary);
		color: var(--color-white);
		font-size: var(--text-lg);
		transition: background var(--transition-fast);
		flex-shrink: 0;
	}

	.session-cta:hover {
		background: var(--color-primary);
	}

	.sessions-view-all {
		display: inline-block;
		margin-top: var(--space-4);
		color: var(--color-secondary);
		font-size: var(--text-sm);
		text-decoration: underline;
		transition: color var(--transition-fast);
	}

	.sessions-view-all:hover {
		color: var(--color-primary);
	}

	@media (max-width: 768px) {
		.sessions-inner {
			grid-template-columns: 1fr;
		}

		.session-row {
			grid-template-columns: 1fr auto;
			grid-template-rows: auto auto;
		}

		.session-meta {
			grid-column: 1;
			color: var(--color-text);
			opacity: 0.7;
		}

		.session-cta {
			grid-column: 2;
			grid-row: 1 / 3;
		}
	}

	/* CelyusImage — egységes kép-megjelenítés (object-fit/position) */
	.celyus-img-wrap { display: block; }
	.celyus-img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: var(--cimg-fit, cover);
		object-position: var(--cimg-pos, center);
	}
	.celyus-img-fill {
		position: absolute;
		inset: 0;
		z-index: 0;
	}
	.celyus-img-fill .celyus-img-wrap,
	.celyus-img-fill .celyus-img { height: 100%; }
	@media (max-width: 768px) {
		.celyus-img {
			object-fit: var(--cimg-fit-m, var(--cimg-fit, cover));
			object-position: var(--cimg-pos-m, var(--cimg-pos, center));
		}
	}

	/* CTA banner */
	.cta-banner {
		position: relative;
		overflow: hidden;
		background: var(--gradient-brand);
		padding: var(--space-20) 0;
		text-align: center;
	}
	.cta-banner > .container { position: relative; z-index: 1; }

	.cta-banner h2 {
		color: var(--color-white);
		margin-bottom: var(--space-1);
	}

	.cta-banner-subtitle {
		color: var(--color-white);
		font-size: var(--text-xl);
		max-width: 640px;
		margin: 0 auto var(--space-8);
		font-weight: var(--font-semibold);
	}

	/* CTA banner — split layout (szöveg balra, gomb jobbra) */
	.cta-banner--split {
		text-align: left;
	}

	.cta-banner--split .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-12);
	}

	.cta-banner--split .cta-banner-subtitle {
		margin: var(--space-2) 0 0;
		max-width: none;
	}

	.cta-banner--split .btn {
		flex-shrink: 0;
	}

	/* CTA banner — dark téma (állítható navy) */
	.cta-banner--dark {
		background: #0e3550;
	}

	/* CTA banner — light téma (világoskék háttér, navy szöveg) */
	.cta-banner--light {
		background: var(--color-bg-light);
	}

	.cta-banner--light h2 {
		color: var(--color-primary);
	}

	.cta-banner--light .cta-banner-subtitle {
		color: var(--color-primary);
	}

	@media (max-width: 768px) {
		.cta-banner--split .container {
			flex-direction: column;
			align-items: flex-start;
			gap: var(--space-6);
		}
	}

	/* Quote banner */
	.quote-banner {
		position: relative;
		overflow: hidden;
		background-color: var(--color-primary);
	}
	.quote-banner-inner { position: relative; z-index: 1; }

	.quote-banner-inner {
		padding: var(--space-24) 0;
		text-align: center;
	}

	.quote-banner blockquote {
		color: var(--color-white);
		font-size: var(--text-4xl);
		max-width: 820px;
		margin: 0 auto;
	}

	@media (max-width: 768px) {
		.quote-banner blockquote {
			font-size: var(--text-2xl);
		}
	}

	/* Page head */
	.page-head {
		position: relative;
		overflow: hidden;
	}
	.page-head > .container { position: relative; z-index: 1; }

	/* Text CTA */
	.text-cta {
		padding: var(--space-20) 0;
		background: var(--color-white);
	}

	.text-cta-content {
		margin: 0 auto;
		text-align: center;
	}

	.text-cta h2 {
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}

	.text-cta h2 .text-accent {
		color: var(--color-accent);
	}

	.text-cta-body {
		margin-bottom: var(--space-8);
	}

	/* Text + logos */
	.text-logos {
		background: var(--color-bg-light);
		border-top: 4px solid var(--color-secondary);
		padding: var(--space-20) 0 var(--space-16) 0;
	}

	.text-logos-content {
		margin: 0 auto;
		text-align: center;
	}

	.text-logos h2 {
		color: var(--color-primary);
		margin-bottom: var(--space-6);
	}

	.text-logos h2 .text-accent {
		color: var(--color-accent);
	}

	.text-logos-body {
		margin-bottom: var(--space-10);
	}

	.logo-row {
		display: flex;
		gap: var(--space-8);
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x mandatory;
		padding-bottom: var(--space-2);
		margin-top: 80px;
		justify-content: space-between;
	}

	.logo-row::-webkit-scrollbar {
		display: none;
	}

	.logo-row-item {
		flex-shrink: 0;
		scroll-snap-align: start;
		display: flex;
		align-items: center;
	}

	.logo-row-item img {
		height: auto;
		width: 210px;
		object-fit: contain;
	}

	/* Legal Page */
	.legal-header {
		position: relative;
		background-color: var(--color-primary);
		background-image: var(--gradient-brand);
		background-size: cover;
		background-position: center;
		color: var(--color-white);
		padding: var(--space-16) 0;
		min-height: 180px;
		display: flex;
		align-items: center;
		overflow: hidden;
	}

	.legal-header-overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(33, 99, 149, 0.4);
		z-index: 1;
	}

	.legal-header .container {
		position: relative;
		z-index: 2;
		width: 100%;
	}

	.legal-header-inner {
		text-align: center;
	}

	.legal-header h1 {
		font-size: var(--text-4xl);
		font-weight: var(--font-extrabold);
		line-height: 1.2;
		color: var(--color-white);
		margin: 0;
		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
	}


	.legal-body {
		padding: var(--space-16) 0;
		background-color: var(--color-white);
	}

	.legal-content {
		max-width: 800px;
		margin: 0 auto;
		line-height: 1.6;
		font-size: var(--text-base);
		color: var(--color-text);
	}

	.legal-content h2 {
		font-size: var(--text-2xl);
		font-weight: var(--font-bold);
		color: var(--color-primary);
		margin-top: var(--space-12);
		margin-bottom: var(--space-4);
	}

	.legal-content h2:first-child {
		margin-top: 0;
	}

	.legal-content h3 {
		font-size: var(--text-xl);
		font-weight: var(--font-semibold);
		color: var(--color-primary);
		margin-top: var(--space-8);
		margin-bottom: var(--space-3);
	}

	.legal-content p {
		margin-bottom: var(--space-4);
	}

	.legal-content ul {
		list-style-type: disc;
		padding-left: var(--space-6);
		margin-bottom: var(--space-4);
	}

	.legal-content ol {
		list-style-type: decimal;
		padding-left: var(--space-6);
		margin-bottom: var(--space-4);
	}

	.legal-content li {
		margin-bottom: var(--space-2);
	}

	.legal-content li::marker {
		color: var(--color-secondary);
	}

	.legal-content table {
		width: 100%;
		border-collapse: collapse;
		margin: var(--space-8) 0;
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.legal-content th,
	.legal-content td {
		padding: var(--space-3) var(--space-4);
		text-align: left;
		border-bottom: 1px solid var(--color-border);
		vertical-align: top;
	}

	.legal-content th {
		font-weight: var(--font-bold);
		color: var(--color-primary);
		border-bottom: 2px solid var(--color-primary);
		background-color: var(--color-bg-light);
	}

	.legal-content tr:nth-child(even) {
		background-color: rgba(0, 0, 0, 0.01);
	}

	@media (max-width: 768px) {
		.legal-header {
			padding: var(--space-12) 0;
			min-height: 140px;
		}

		.legal-header h1 {
			font-size: var(--text-2xl);
		}


		.legal-body {
			padding: var(--space-10) 0;
		}

		.legal-content h2 {
			font-size: var(--text-xl);
			margin-top: var(--space-8);
		}

		.legal-content h3 {
			font-size: var(--text-lg);
			margin-top: var(--space-6);
		}
	}
}

/* ── Utilities ───────────────────────────────────────── */
@layer utilities {
	.text-primary    { color: var(--color-primary); }
	.text-accent     { color: var(--color-accent); }
	.text-secondary  { color: var(--color-secondary); }
}