/*
	IT-alkatrész B2B one-page — fő stíluslap
	----------------------------------------
	Felépítés:
	  01. Design tokenek
	  02. Reset és alap tipográfia
	  03. Segédosztályok (skip-link, visually-hidden, focus)
	  04. Gombok
	  05. Fejléc (lebegő pill + mobil menü)
	  06. Hero (mesh háttér + illusztráció)
	  07. Bizalmi sáv
	  08. Szekciók és szekciófejek
	  09. Bento kategóriadobozok
	  10. Sötét „Miért minket” szekció
	  11. Folyamat idővonal
	  12. Kinek dolgozunk chipek
	  13. Kapcsolat és űrlapkártya
	  14. Űrlapmezők, hiba/siker, flash
	  15. Lábléc
	  16. Reveal animáció
	  17. Reszponzív finomítások
	  18. Mozgáscsökkentés
	  19. Nyomtatás
*/

/* ==========================================================================
   01. Design tokenek
   ========================================================================== */
:root {
	/* Színek */
	--bg: #FAFAF8; --surface: #FFFFFF; --surface-2: #F3F2EE; --ink: #12111A;
	--muted: #5E5B6B; --line: #E7E5EE;
	--brand: #4F46E5; --brand-strong: #3730A3; --brand-soft: #EEF0FF; --accent: #FF5A36;
	--accent-soft: #FFE9E3;
	--dark: #0E0D17; --dark-2: #171626; --on-dark: #EDEBFA; --on-dark-muted: #A19EBB;
	--ok: #0F7B54; --ok-bg: #E8F7F0; --err: #B42318; --err-bg: #FEF1EF;
	/* Átlátszó segédtónusok (a paletta származtatott értékei) */
	--header-bg: rgba(255, 255, 255, 0.82); --header-bg-solid: rgba(255, 255, 255, 0.96); --overlay: rgba(14, 13, 23, 0.62); --brand-glow: rgba(79, 70, 229, 0.28);
	--accent-glow: rgba(255, 90, 54, 0.18); --on-dark-line: rgba(237, 235, 250, 0.14); --on-dark-fill: rgba(237, 235, 250, 0.06);
	/* Forma és árnyék */
	--radius-sm: 14px; --radius-md: 22px; --radius-lg: 32px; --pill: 999px;
	--shadow-sm: 0 1px 2px rgba(18, 17, 26, 0.04); --shadow-md: 0 18px 45px -28px rgba(18, 17, 26, 0.35); --shadow-lg: 0 30px 80px -36px rgba(18, 17, 26, 0.45);
	/* Layout */
	--container: 1180px; --gutter: clamp(1rem, 4vw, 2.5rem); --header-h: 68px;
	--page-max: 1400px; --page-gutter: clamp(12px, 3vw, 40px);
	--panel-radius: 32px; --panel-pad: clamp(20px, 4vw, 56px);
	--content-max: calc(var(--page-max) - 2 * var(--panel-pad));
	/* Tipográfia */
	--font-body: system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* ==========================================================================
   02. Reset és alap tipográfia
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 28px);
}
body {
	margin: 0; min-height: 100vh; overflow-x: clip; background: var(--bg);
	color: var(--ink); font-family: var(--font-body); font-size: 1rem; line-height: 1.65;
	text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
body.cookie-modal-open {
	overflow: hidden;
}
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure {
	margin: 0;
}
ul,
ol {
	padding: 0;
}
img,
svg {
	display: block; max-width: 100%;
}
img {
	height: auto;
}
a {
	color: var(--brand-strong); text-decoration-thickness: 1px; text-underline-offset: 3px;
}
a:hover {
	color: var(--brand);
}
button,
input,
select,
textarea {
	font: inherit;
}
button {
	cursor: pointer;
}
h1,
h2,
h3 {
	font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; overflow-wrap: break-word; text-wrap: balance;
}
h1 {
	font-size: clamp(2.3rem, 7.5vw, 4.5rem); line-height: 1.03;
}
h2 {
	font-size: clamp(1.8rem, 4.6vw, 3rem); line-height: 1.08;
}
h3 {
	font-size: clamp(1.12rem, 2.2vw, 1.35rem); line-height: 1.2; letter-spacing: -0.02em;
}
p {
	max-width: 68ch;
}
strong {
	font-weight: 700;
}
::selection {
	background: var(--brand); color: var(--surface);
}

/* ==========================================================================
   03. Segédosztályok
   ========================================================================== */
.visually-hidden {
	position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important;
	margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important;
	border: 0 !important;
}
.skip-link {
	position: fixed; top: 0.75rem; left: 0.75rem; z-index: 300;
	display: inline-flex; align-items: center; min-height: 44px; padding: 0.65rem 1.1rem;
	border-radius: var(--pill); background: var(--brand); color: var(--surface); font-weight: 600;
	text-decoration: none; box-shadow: var(--shadow-md); transform: translateY(-180%); transition: transform 0.2s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
	transform: translateY(0); color: var(--surface);
}
.icon-sprite {
	position: absolute; width: 0; height: 0; overflow: hidden;
}

/* Látható fókuszgyűrű minden interaktív elemen */
a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--brand); outline-offset: 3px;
}
.section-dark a:focus-visible,
.section-contact a:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible {
	outline-color: var(--on-dark);
}

/* ==========================================================================
   04. Gombok
   ========================================================================== */
.button {
	display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
	min-height: 50px; padding: 0.8rem 1.4rem; border: 1px solid transparent; border-radius: var(--pill);
	background: var(--surface); color: var(--ink); font-size: 0.96rem; font-weight: 650;
	line-height: 1.1; text-align: center; text-decoration: none; white-space: nowrap;
	cursor: pointer; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.button:hover {
	transform: translateY(-1px);
}
.button:active {
	transform: translateY(0);
}
.button-primary {
	background: var(--brand); border-color: var(--brand); color: var(--surface); box-shadow: 0 12px 26px -16px var(--brand);
}
.button-primary:hover {
	background: var(--brand-strong); border-color: var(--brand-strong); color: var(--surface);
}
.button-secondary {
	background: transparent; border-color: var(--line); color: var(--ink);
}
.button-secondary:hover {
	background: var(--brand-soft); border-color: var(--brand); color: var(--brand-strong);
}
.button-pill {
	border-radius: var(--pill);
}
.button:disabled,
.button[aria-disabled="true"] {
	opacity: 0.65; cursor: wait; transform: none;
}

/* ==========================================================================
   05. Fejléc — lebegő pill navigáció
   ========================================================================== */
.site-header {
	position: fixed; top: max(0.75rem, env(safe-area-inset-top)); left: 0; right: 0;
	z-index: 100; padding-inline: var(--page-gutter); pointer-events: none;
}
.header-inner {
	position: relative; display: flex; align-items: center; justify-content: space-between;
	gap: 1rem; width: min(100%, var(--page-max)); min-height: var(--header-h); margin-inline: auto;
	padding: 0.55rem 0.6rem 0.55rem 0.95rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--header-bg);
	box-shadow: var(--shadow-sm); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); pointer-events: auto;
	transition: background-color 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Fallback: backdrop-filter nélkül is olvasható, tömör háttér */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.header-inner {
		background: var(--header-bg-solid);
	}
}
.site-header.is-scrolled .header-inner {
	background: var(--header-bg-solid); border-color: var(--line); box-shadow: var(--shadow-md);
}
.brand {
	display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; min-height: 44px;
	color: var(--ink); font-weight: 700; letter-spacing: -0.025em; text-decoration: none;
}
.brand:hover {
	color: var(--brand-strong);
}
.brand img {
	width: 32px; height: 32px; border-radius: 10px; box-shadow: var(--shadow-sm);
}
.brand-name {
	overflow: hidden; font-size: 1.02rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap;
}

/* Hamburger */
.nav-toggle {
	display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px;
	padding: 0.45rem 0.9rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface-2);
	color: var(--ink); font-size: 0.85rem; font-weight: 650; transition: background-color 0.18s ease, border-color 0.18s ease;
}
.nav-toggle:hover {
	background: var(--brand-soft); border-color: var(--brand);
}
.nav-toggle-box {
	position: relative; display: inline-flex; flex-direction: column; justify-content: space-between;
	width: 20px; height: 14px;
}
.nav-toggle-bar {
	display: block; width: 100%; height: 2px; border-radius: 2px;
	background: currentColor; transition: transform 0.22s ease, opacity 0.18s ease;
}
.nav-toggle-text {
	letter-spacing: -0.01em; white-space: nowrap;
}
.site-header.nav-open .nav-toggle-bar:nth-child(1) {
	transform: translateY(6px) rotate(45deg);
}
.site-header.nav-open .nav-toggle-bar:nth-child(2) {
	opacity: 0;
}
.site-header.nav-open .nav-toggle-bar:nth-child(3) {
	transform: translateY(-6px) rotate(-45deg);
}

/* Mobil navigációs panel */
.site-nav {
	position: absolute; top: calc(100% + 0.55rem); left: 0; right: 0;
	visibility: hidden; opacity: 0; pointer-events: none; transform: translateY(-8px); border: 1px solid var(--line);
	border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-md); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}
.site-header.nav-open .site-nav {
	visibility: visible; opacity: 1; pointer-events: auto; transform: translateY(0); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0s;
}
.site-nav ul {
	display: grid; gap: 0.25rem; margin: 0; padding: 0.65rem;
	list-style: none;
}
.site-nav a {
	display: flex; align-items: center; min-height: 44px; padding: 0.55rem 0.9rem;
	border-radius: var(--pill); color: var(--ink); font-size: 0.95rem; font-weight: 600;
	text-decoration: none; transition: background-color 0.16s ease, color 0.16s ease;
}
.site-nav a:hover {
	background: var(--surface-2); color: var(--brand-strong);
}
.site-nav a.is-active:not(.nav-cta) {
	background: var(--brand-soft); color: var(--brand-strong);
}
.site-nav .nav-cta {
	justify-content: center; margin-top: 0.25rem; color: var(--surface);
}
.site-nav .nav-cta:hover {
	background: var(--brand-strong); color: var(--surface);
}

/* JS nélkül a mobil navigáció statikusan, nyitva marad (fokozatos fejlesztés) */
@media screen and (max-width: 959px) {
	html:not(.js) .header-inner {
		flex-wrap: wrap;
	}
	html:not(.js) .nav-toggle {
		display: none;
	}
	html:not(.js) .site-nav {
		position: static; visibility: visible; opacity: 1; pointer-events: auto; transform: none;
		width: 100%; margin-top: 0.35rem; border: 1px solid var(--line);
		background: var(--surface); box-shadow: none;
	}
	html:not(.js) .site-nav ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ==========================================================================
   06. Hero
   ========================================================================== */
.hero {
	position: relative; isolation: isolate; padding: clamp(7.5rem, 15vw, 11rem) calc(var(--page-gutter) + var(--panel-pad)) clamp(3.5rem, 7vw, 6rem); background: radial-gradient(42% 38% at 82% 12%, var(--accent-glow), transparent 72%), radial-gradient(52% 48% at 8% 8%, var(--brand-soft), transparent 74%), radial-gradient(45% 45% at 50% 100%, var(--brand-soft), transparent 78%), var(--bg);
	overflow: clip;
}
.hero-inner {
	display: grid; gap: clamp(2rem, 5vw, 4rem); width: min(100%, var(--content-max)); margin-inline: auto;
}
.hero-copy {
	position: relative; z-index: 1; align-self: center;
}
.eyebrow {
	display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem;
	padding: 0.4rem 0.85rem; border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface);
	color: var(--muted); font-size: 0.76rem; font-weight: 650; letter-spacing: 0.08em;
	line-height: 1.2; text-transform: uppercase;
}
.eyebrow-dot {
	width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.hero h1 {
	max-width: 14ch; margin-bottom: 1.15rem;
}
.hero-lead {
	max-width: 56ch; margin-bottom: 1.9rem; color: var(--muted); font-size: clamp(1.02rem, 2.1vw, 1.16rem);
	line-height: 1.7;
}
.hero-actions {
	display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.hero-actions .button {
	flex: 1 1 auto;
}
.hero-visual {
	position: relative; z-index: 0; align-self: center;
}
.hero-visual::before {
	content: ""; position: absolute; inset: 8% 4% 2%; z-index: -1;
	border-radius: 50%; background: radial-gradient(circle, var(--accent-soft), transparent 68%); filter: blur(8px); opacity: 0.85;
}
.hero-visual img {
	width: 100%; height: auto; filter: drop-shadow(0 30px 50px rgba(18, 17, 26, 0.16));
}

/* ==========================================================================
   07. Bizalmi sáv
   ========================================================================== */
.trust-strip {
	padding: 0 calc(var(--page-gutter) + var(--panel-pad)) clamp(2rem, 4vw, 3rem);
}
.trust-grid {
	display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(100%, var(--content-max)); margin-inline: auto;
	list-style: none; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
	box-shadow: var(--shadow-sm); overflow: hidden;
}
.trust-grid li {
	display: flex; flex-direction: column; gap: 0.25rem; padding: clamp(1.1rem, 3vw, 1.75rem);
	border-top: 1px solid var(--line);
}
.trust-grid li:nth-child(-n + 2) {
	border-top: 0;
}
.trust-grid li:nth-child(even) {
	border-left: 1px solid var(--line);
}
.trust-value {
	color: var(--brand-strong); font-size: clamp(1.4rem, 3.6vw, 2.15rem); font-weight: 700; font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em; line-height: 1.05;
}
.trust-label {
	color: var(--muted); font-size: 0.82rem; font-weight: 550; line-height: 1.4;
}

/* ==========================================================================
   08. Szekciók és szekciófejek
   ========================================================================== */
.section {
	padding: clamp(3.5rem, 8vw, 6.5rem) calc(var(--page-gutter) + var(--panel-pad));
}
.section > * {
	width: min(100%, var(--content-max)); margin-inline: auto;
}
.section-categories {
	background: var(--bg);
}
.section-head {
	margin-bottom: clamp(1.8rem, 4vw, 3rem);
}
.section-head .eyebrow {
	margin-bottom: 0.9rem;
}
.section-head h2 {
	max-width: 20ch; margin-bottom: 0.8rem;
}
.section-head p {
	color: var(--muted); font-size: clamp(0.98rem, 1.8vw, 1.08rem);
}
.section-note {
	margin-top: clamp(1.5rem, 3vw, 2.25rem); padding-left: 1rem; border-left: 3px solid var(--accent); color: var(--muted);
	font-size: 0.95rem;
}

/* ==========================================================================
   09. Bento kategóriadobozok
   ========================================================================== */
.bento-grid {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.85rem, 2vw, 1.25rem);
}
.category-card {
	position: relative; display: flex; isolation: isolate; min-height: 210px;
	overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
	box-shadow: var(--shadow-sm); transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.category-card:hover {
	transform: translateY(-4px); border-color: var(--brand); box-shadow: var(--shadow-md);
}
.card-pattern {
	position: absolute; right: -8%; bottom: -12%; z-index: -1;
	width: min(70%, 320px); height: auto; opacity: 0.9; pointer-events: none;
	user-select: none;
}
.bento-large .card-pattern {
	right: -8%; bottom: -10%; width: min(70%, 320px);
}
/* Visszafogott, alacsony hangsúlyú kártya (szerver-komponensek) */
.category-card--subtle {
	background: color-mix(in srgb, var(--surface) 40%, var(--surface-2) 60%);
	border-color: var(--line);
}
.category-card--subtle:hover {
	transform: none; border-color: var(--line); box-shadow: var(--shadow-sm);
}
.category-card--subtle .card-body {
	gap: 0.55rem; padding-block: clamp(1rem, 2.4vw, 1.35rem);
}
.category-card--subtle .card-icon {
	width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--muted);
}
.category-card--subtle .card-icon svg {
	width: 20px; height: 20px;
}
.category-card--subtle h3 {
	font-size: clamp(1.02rem, 1.8vw, 1.15rem); color: var(--muted);
}
.category-card--subtle p {
	font-size: 0.9rem;
}
.category-card--subtle .card-link {
	color: var(--muted); font-size: 0.85rem;
}
.category-card--subtle .card-pattern {
	right: 3%; bottom: -18%; width: min(30%, 200px); opacity: 0.3;
}
.card-body {
	position: relative; z-index: 1; display: flex; flex-direction: column;
	align-items: flex-start; gap: 0.75rem; width: 100%; padding: clamp(1.25rem, 3vw, 1.85rem);
}
.card-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 48px;
	height: 48px; border: 1px solid var(--line); border-radius: 16px; background: var(--brand-soft);
	color: var(--brand-strong);
}
.card-icon svg {
	width: 24px; height: 24px;
}
.category-card h3 {
	max-width: 22ch;
}
.category-card p {
	color: var(--muted); font-size: 0.94rem; line-height: 1.6;
}
.card-tags {
	display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.1rem 0 0; padding: 0;
	list-style: none;
}
.card-tags li {
	padding: 0.28rem 0.6rem; border: 1px solid var(--line); border-radius: var(--pill);
	background: var(--surface-2); color: var(--muted); font-size: 0.72rem; font-weight: 650;
	letter-spacing: 0.01em; line-height: 1.2;
}
.card-link {
	display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto;
	padding-top: 0.35rem; color: var(--brand-strong); font-size: 0.9rem; font-weight: 650;
	text-decoration: none;
}
.card-link svg {
	width: 18px; height: 18px; transition: transform 0.18s ease;
}
.card-link:hover {
	color: var(--accent);
}
.card-link:hover svg {
	transform: translate(2px, -2px);
}

/* ==========================================================================
   10. Sötét „Miért minket” szekció
   ========================================================================== */
.section-dark {
	position: relative; width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max)); margin-inline: auto;
	padding-inline: var(--panel-pad); border-radius: var(--panel-radius);
	background: radial-gradient(60% 80% at 88% 0%, var(--brand-glow), transparent 58%), radial-gradient(45% 60% at 0% 100%, var(--accent-glow), transparent 60%), var(--dark); color: var(--on-dark);
}
.section-dark > * {
	width: 100%;
}
.section-dark .eyebrow {
	background: var(--dark-2); border-color: var(--on-dark-line); color: var(--on-dark-muted);
}
.section-dark .section-head h2 {
	color: var(--on-dark);
}
.section-dark .section-head p {
	color: var(--on-dark-muted);
}
.feature-grid {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(0.85rem, 2vw, 1.15rem);
}
.feature-card {
	padding: clamp(1.25rem, 3vw, 1.65rem); border: 1px solid var(--on-dark-line); border-radius: var(--radius-md); background: var(--dark-2);
	transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}
.feature-card:hover {
	transform: translateY(-3px); border-color: var(--brand); background: color-mix(in srgb, var(--dark-2) 86%, var(--brand) 14%);
}
.feature-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 46px;
	height: 46px; margin-bottom: 1rem; border-radius: 50%; background: var(--brand);
	color: var(--on-dark);
}
.feature-card:nth-child(even) .feature-icon {
	background: var(--accent); color: var(--dark);
}
.feature-icon svg {
	width: 22px; height: 22px;
}
.feature-card h3 {
	margin-bottom: 0.5rem; color: var(--on-dark);
}
.feature-card p {
	color: var(--on-dark-muted); font-size: 0.93rem; line-height: 1.62;
}

/* ==========================================================================
   11. Folyamat idővonal
   ========================================================================== */
.section-process {
	background: var(--bg);
}
.timeline {
	--tl-gap: clamp(1.4rem, 3vw, 2rem);
	position: relative; display: grid; gap: var(--tl-gap); margin: 0 auto;
	list-style: none;
}
.timeline::before {
	content: ""; position: absolute; top: 24px; bottom: 24px;
	left: 23px; width: 2px; border-radius: 2px; background: linear-gradient(var(--brand-soft), var(--line));
}
.timeline-step {
	position: relative; min-width: 0; padding-left: 4.25rem; overflow-wrap: break-word;
}
.timeline-num {
	position: absolute; top: 0; left: 0; z-index: 1;
	display: inline-flex; align-items: center; justify-content: center; width: 48px;
	height: 48px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface);
	color: var(--brand-strong); font-weight: 700; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-sm);
}
.timeline-step h3 {
	margin-bottom: 0.35rem;
}
.timeline-step p {
	color: var(--muted); font-size: 0.94rem; line-height: 1.6;
}

/* ==========================================================================
   12. Kinek dolgozunk — chipek
   ========================================================================== */
.section-audience {
	width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max)); margin-inline: auto;
	padding-inline: var(--panel-pad); border: 1px solid var(--line); border-radius: var(--panel-radius);
	background: var(--surface-2);
}
.section-audience > * {
	width: 100%;
}
.section-audience .section-head h2 {
	max-width: 24ch;
}
.chip-list {
	display: flex; flex-wrap: wrap; gap: 0.7rem; list-style: none;
}
.chip {
	display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.62rem 1.05rem;
	border: 1px solid var(--line); border-radius: var(--pill); background: var(--surface); color: var(--ink);
	font-size: 0.92rem; font-weight: 600; box-shadow: var(--shadow-sm); transition: border-color 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}
.chip:hover {
	transform: translateY(-2px); border-color: var(--brand); background: var(--brand-soft);
}
.chip-icon {
	display: inline-flex; color: var(--brand-strong);
}
.chip-icon svg {
	width: 18px; height: 18px;
}

/* ==========================================================================
   13. Kapcsolat és űrlapkártya
   ========================================================================== */
.section-contact {
	width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max)); margin: clamp(16px, 2vw, 24px) auto 0;
	padding-inline: var(--panel-pad); border-radius: var(--panel-radius);
	background: radial-gradient(65% 80% at 100% 0%, var(--brand-glow), transparent 62%), radial-gradient(50% 70% at 0% 100%, var(--accent-glow), transparent 60%), linear-gradient(155deg, var(--brand-strong), var(--dark) 72%); color: var(--on-dark);
}
.section-contact > * {
	width: 100%;
}
.section-contact .eyebrow {
	border-color: var(--on-dark-line); background: var(--on-dark-fill); color: var(--on-dark-muted);
}
.section-contact .contact-copy h2 {
	max-width: 16ch; margin-bottom: 0.9rem; color: var(--on-dark);
}
.contact-inner {
	display: grid; gap: clamp(2rem, 5vw, 3.5rem);
}
.contact-copy > p {
	margin-bottom: 1.75rem; color: var(--on-dark-muted); font-size: clamp(0.98rem, 1.8vw, 1.08rem);
}
.contact-meta {
	display: grid; gap: 0.9rem; margin: 0; list-style: none;
}
.contact-meta li {
	display: flex; align-items: flex-start; gap: 0.8rem; min-width: 0; color: var(--on-dark);
	font-size: 0.95rem; overflow-wrap: anywhere;
}
.contact-meta-icon {
	display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
	width: 40px; height: 40px; border: 1px solid var(--on-dark-line); border-radius: 12px;
	background: var(--on-dark-fill); color: var(--on-dark);
}
.contact-meta-icon svg {
	width: 19px; height: 19px;
}
.contact-meta-label {
	display: block; margin-bottom: 0.1rem; color: var(--on-dark-muted); font-size: 0.7rem;
	font-weight: 650; letter-spacing: 0.09em; text-transform: uppercase;
}
.contact-meta a {
	color: var(--on-dark); text-decoration-color: var(--on-dark-muted);
}
.contact-meta a:hover {
	color: var(--accent);
}
.contact-form-card {
	padding: clamp(1.25rem, 3.5vw, 2rem); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
	color: var(--ink); box-shadow: var(--shadow-lg);
}

/* ==========================================================================
   14. Űrlapmezők
   ========================================================================== */
.fields {
	display: grid; gap: 1rem;
}
.field {
	grid-column: 1 / -1;
}
.field label {
	display: block; margin-bottom: 0.4rem; color: var(--ink); font-size: 0.88rem;
	font-weight: 650;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field select,
.field textarea {
	display: block; width: 100%; min-height: 50px; padding: 0.75rem 0.95rem;
	border: 1px solid var(--line); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--ink);
	font-size: 1rem; line-height: 1.45; transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease;
}
.field textarea {
	min-height: 150px; resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder {
	color: var(--muted); opacity: 0.72;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
	border-color: var(--muted);
}
.field input:focus,
.field select:focus,
.field textarea:focus {
	border-color: var(--brand); outline: 2px solid var(--brand); outline-offset: 1px; box-shadow: 0 0 0 4px var(--brand-soft);
}
.field select {
	appearance: none; -webkit-appearance: none; padding-right: 2.6rem; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
	background-position: calc(100% - 1.18rem) calc(50% + 1px), calc(100% - 0.82rem) calc(50% + 1px); background-repeat: no-repeat; background-size: 0.38rem 0.38rem; cursor: pointer;
}
.field select:focus {
	background-image: linear-gradient(45deg, transparent 50%, var(--brand-strong) 50%), linear-gradient(135deg, var(--brand-strong) 50%, transparent 50%);
}

/* Honeypot: vizuálisan és tabulátorral is elrejtve */
.hp-field {
	position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important;
	overflow: hidden !important; opacity: 0 !important; pointer-events: none !important;
}

/* Egyedi, de akadálymentes checkbox */
.consent-label {
	display: flex; align-items: flex-start; gap: 0.7rem; color: var(--muted);
	font-size: 0.9rem; font-weight: 400; line-height: 1.55; cursor: pointer;
}
.consent-label input[type="checkbox"] {
	position: relative; flex: 0 0 auto; width: 1.35rem; height: 1.35rem;
	margin: 0.2em 0 0; appearance: none; -webkit-appearance: none; border: 1px solid var(--line);
	border-radius: 7px; background: var(--surface); cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease;
}
.consent-label input[type="checkbox"]::after {
	content: ""; position: absolute; top: 0.16rem; left: 0.44rem;
	width: 0.36rem; height: 0.68rem; border: solid var(--surface); border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0); transform-origin: center; transition: transform 0.14s ease;
}
.consent-label input[type="checkbox"]:checked {
	border-color: var(--brand); background: var(--brand);
}
.consent-label input[type="checkbox"]:checked::after {
	transform: rotate(45deg) scale(1);
}
.consent-label input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--brand); outline-offset: 3px;
}
.consent-label a {
	color: var(--brand-strong);
}

/* Hibaállapot */
.field-error input,
.field-error select,
.field-error textarea,
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"] {
	border-color: var(--err); background-color: var(--err-bg);
}
.field-error input:focus,
.field-error select:focus,
.field-error textarea:focus,
.field input[aria-invalid="true"]:focus,
.field select[aria-invalid="true"]:focus,
.field textarea[aria-invalid="true"]:focus {
	outline-color: var(--err); box-shadow: 0 0 0 4px var(--err-bg);
}
.field-message {
	margin: 0.35rem 0 0; color: var(--err); font-size: 0.82rem; font-weight: 550;
	line-height: 1.45;
}
.field-message:empty {
	display: none;
}
.form-actions {
	margin-top: 1.25rem;
}
.form-actions .button {
	width: 100%;
}

/* Flash és AJAX státusz */
.flash {
	margin-bottom: 1.25rem; padding: 0.9rem 1.05rem; border: 1px solid var(--line); border-left-width: 4px;
	border-radius: var(--radius-sm); font-size: 0.92rem;
}
.flash p {
	margin: 0;
}
.flash-success {
	border-color: var(--ok); background: var(--ok-bg); color: var(--ok);
}
.flash-error {
	border-color: var(--err); background: var(--err-bg); color: var(--err);
}
.flash-info {
	border-color: var(--brand); background: var(--brand-soft); color: var(--brand-strong);
}
.form-status {
	margin-top: 0.9rem; padding: 0; border-radius: var(--radius-sm); font-size: 0.9rem;
	font-weight: 550; line-height: 1.5;
}
.form-status:empty {
	display: none;
}
.form-status.success {
	padding: 0.8rem 1rem; border: 1px solid var(--ok); background: var(--ok-bg); color: var(--ok);
}
.form-status.error {
	padding: 0.8rem 1rem; border: 1px solid var(--err); background: var(--err-bg); color: var(--err);
}

/* ==========================================================================
   15. Lábléc
   ========================================================================== */
.site-footer {
	width: min(calc(100% - 2 * var(--page-gutter)), var(--page-max)); margin: clamp(16px, 2vw, 24px) auto;
	padding: clamp(3rem, 7vw, 5rem) var(--panel-pad) clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--panel-radius); background: var(--dark); color: var(--on-dark);
}
.footer-grid {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 2.5rem); width: 100%;
	margin-inline: auto;
}
.footer-about p {
	margin-top: 1rem; max-width: 44ch; color: var(--on-dark-muted); font-size: 0.93rem;
	line-height: 1.65;
}
.footer-brand {
	color: var(--on-dark);
}
.footer-brand:hover {
	color: var(--on-dark);
}
.footer-brand .brand-name {
	color: var(--on-dark);
}
.footer-nav h3,
.footer-contact h3,
.footer-legal h3 {
	margin-bottom: 0.9rem; color: var(--on-dark-muted); font-size: 0.72rem; font-weight: 650;
	letter-spacing: 0.1em; line-height: 1.3; text-transform: uppercase;
}
.footer-nav ul,
.footer-contact ul,
.footer-legal ul {
	display: grid; gap: 0.55rem; margin: 0; list-style: none;
}
.footer-nav a,
.footer-contact a,
.footer-legal a,
.site-footer .cookie-settings-link {
	color: var(--on-dark); font-size: 0.93rem; text-decoration: none; transition: color 0.16s ease;
}
.footer-nav a:hover,
.footer-contact a:hover,
.footer-legal a:hover,
.site-footer .cookie-settings-link:hover {
	color: var(--accent);
}
.footer-contact li {
	color: var(--on-dark-muted); font-size: 0.93rem; overflow-wrap: anywhere;
}
.footer-contact li a {
	color: var(--on-dark);
}
.site-footer .cookie-settings-link {
	padding: 0; border: 0; background: none; font: inherit;
	font-size: 0.93rem; text-align: left;
}
.footer-bottom {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 0.5rem 1.5rem; width: 100%; margin: clamp(2rem, 4vw, 3rem) auto 0; padding-top: 1.25rem;
	border-top: 1px solid var(--on-dark-line); color: var(--on-dark-muted); font-size: 0.82rem;
}
.footer-bottom p {
	margin: 0;
}
.footer-bottom a {
	color: var(--on-dark);
}
.footer-bottom a:hover {
	color: var(--accent);
}

/* ==========================================================================
   16. Reveal animáció
   JS nélkül (html.js hiányában) minden tartalom látható marad.
   ========================================================================== */
html.js .reveal {
	opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html.js .reveal.is-visible {
	opacity: 1; transform: translateY(0);
}

/* ==========================================================================
   17. Reszponzív finomítások
   ========================================================================== */

/* --- ≤640px: telefon --- */
@media screen and (max-width: 640px) {
	:root {
		--panel-radius: 24px;
	}
}

/* --- 640px: nagyobb telefon / kisméretű tablet --- */
@media screen and (min-width: 640px) {
	.hero-actions .button {
		flex: 0 0 auto;
	}
	.fields {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.field.half {
		grid-column: span 1;
	}
	.feature-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bento-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.bento-large {
		grid-column: span 2;
	}
	.bento-grid > .category-card--subtle {
		grid-column: 1 / -1;
	}
	.category-card {
		min-height: 240px;
	}
	.footer-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.footer-about {
		grid-column: 1 / -1;
	}
	.form-actions .button {
		width: auto; min-width: 240px;
	}
}

/* --- 960px: tablet fekvő / kis desktop --- */
@media screen and (min-width: 960px) {
	:root {
		--header-h: 72px;
	}
	.nav-toggle {
		display: none;
	}
	.site-nav {
		position: static; visibility: visible; opacity: 1; pointer-events: auto; transform: none;
		margin-left: auto; border: 0; background: transparent; box-shadow: none;
	}
	.site-nav ul {
		display: flex; align-items: center; gap: 0.15rem; padding: 0;
	}
	.site-nav a {
		padding: 0.55rem 0.8rem; font-size: 0.9rem;
	}
	.site-nav .nav-cta {
		margin-top: 0; margin-left: 0.5rem; padding-inline: 1.2rem; min-height: 44px;
	}
	.header-inner {
		padding: 0.5rem 0.6rem 0.5rem 1.1rem;
	}
	.hero-inner {
		grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr); align-items: center;
	}
	.hero h1 {
		max-width: 12ch;
	}
	.hero-visual {
		justify-self: end; width: 100%; max-width: 620px;
	}
	.trust-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.trust-grid li {
		border-top: 0; border-left: 1px solid var(--line);
	}
	.trust-grid li:first-child {
		border-left: 0;
	}
	.section-head h2 {
		max-width: 22ch;
	}
	.bento-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: repeat(2, minmax(230px, auto));
	}
	/* Notebook: 2×2 nagy kártya a bal felső sarokban */
	.bento-grid > .category-card:nth-child(1) {
		grid-area: 1 / 1 / 3 / 3;
	}
	/* Processzor: 1×1 a jobb felső sarokban */
	.bento-grid > .category-card:nth-child(2) {
		grid-area: 1 / 3 / 2 / 4;
	}
	/* Memória: 1×1 mellette */
	.bento-grid > .category-card:nth-child(3) {
		grid-area: 1 / 4 / 2 / 5;
	}
	/* Adattárolás: 1×1 a jobb oldali blokk második sorában */
	.bento-grid > .category-card:nth-child(4) {
		grid-area: 2 / 3 / 3 / 4;
	}
	/* Hálózat: 1×1 mellette */
	.bento-grid > .category-card:nth-child(5) {
		grid-area: 2 / 4 / 3 / 5;
	}
	/* Szerver: alacsony, széles, visszafogott kártya a harmadik sorban */
	.bento-grid > .category-card:nth-child(6) {
		grid-area: 3 / 1 / 4 / 5; min-height: 160px;
	}
	.bento-large .card-body {
		max-width: 40ch;
	}
	.bento-large .card-pattern {
		right: -6%; bottom: -10%; width: min(88%, 500px);
	}
	.feature-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	.timeline {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
	.timeline::before {
		top: 24px; right: calc(12.5% - 0.375 * var(--tl-gap)); bottom: auto;
		left: calc(12.5% - 0.375 * var(--tl-gap));
		width: auto; height: 2px; background: linear-gradient(90deg, var(--brand-soft), var(--line));
	}
	.timeline-step {
		padding-top: 4.15rem; padding-left: 0; padding-inline: 0.25rem; text-align: center;
	}
	.timeline-num {
		left: 50%; transform: translateX(-50%);
	}
	.timeline-step p {
		margin-inline: auto; max-width: 100%;
	}
	.contact-inner {
		grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); align-items: start;
	}
	.contact-form-card {
		padding: clamp(1.5rem, 3vw, 2.25rem);
	}
	.footer-grid {
		grid-template-columns: 1.5fr 1fr 1.2fr 1fr;
	}
	.footer-about {
		grid-column: auto;
	}
}

/* --- 1200px: nagy desktop --- */
@media screen and (min-width: 1200px) {
	.hero {
		padding-top: clamp(9rem, 12vw, 12rem);
	}
	.hero-lead {
		font-size: 1.16rem;
	}
	.category-card {
		min-height: 250px;
	}
	.feature-card {
		padding: 1.8rem;
	}
	.site-nav a {
		padding-inline: 0.95rem;
	}
}

/* ==========================================================================
   18. Mozgáscsökkentés
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
	}
	html.js .reveal,
	html.js .reveal.is-visible {
		opacity: 1; transform: none; transition: none;
	}
	.category-card:hover,
	.feature-card:hover,
	.chip:hover,
	.button:hover {
		transform: none;
	}
}

/* ==========================================================================
   19. Nyomtatás
   ========================================================================== */
@media print {
	:root {
		--bg: #FFFFFF; --surface: #FFFFFF; --ink: #000000; --muted: #333333;
		--line: #CCCCCC;
	}
	body {
		background: #FFFFFF; color: #000000;
	}
	.site-header,
	.skip-link,
	.nav-toggle,
	.cookie-banner,
	.cookie-modal,
	.hero-actions,
	.card-link,
	.form-actions,
	.cookie-settings-link {
		display: none !important;
	}
	.hero,
	.section,
	.site-footer {
		padding: 1rem 0; background: #FFFFFF !important; color: #000000 !important;
	}
	.section-dark,
	.section-contact {
		background: #FFFFFF !important; color: #000000 !important;
	}
	.section-dark .section-head h2,
	.section-dark .feature-card h3,
	.section-contact .contact-copy h2,
	.contact-meta li,
	.footer-brand,
	.footer-brand .brand-name {
		color: #000000 !important;
	}
	.section-dark .feature-card {
		border-color: #CCCCCC; background: #FFFFFF;
	}
	html.js .reveal,
	html.js .reveal.is-visible {
		opacity: 1 !important; transform: none !important;
	}
	.hero-visual,
	.card-pattern {
		display: none !important;
	}
	.category-card,
	.feature-card,
	.trust-grid,
	.contact-form-card {
		box-shadow: none; break-inside: avoid;
	}
}