/* Weboldal-készítés (3.6) – Figma 002 - OnlineBiznisz - Weboldal, landing (29:4). 1920-as vásznon a tartalom 1170px (375–1545). */

.wo { overflow-x: clip; --wo-w: 1170px; --wo-szurke: var(--contrast-3); }
.wo p, .wo h1, .wo h2, .wo h3, .wo ul { margin: 0; }
.wo .serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.wo-szurke, .wo-szurke-span { color: var(--wo-szurke); }
.wo-szurke strong, .wo-szurke .wo-feher { color: var(--contrast); }
.wo-feher { color: var(--contrast); }
.wo-zold { color: var(--accent); }
.wo :is(.wo-szurke, .wo-feher, .wo-zold, .wo-eros) { font-size: 16px; line-height: 27px; }
.wo strong, .wo-eros { font-weight: 700; }
.wo-eros { color: var(--contrast); }
.wo-h3 { color: var(--contrast); font-weight: 500; font-size: clamp(20px, 1.25vw, 24px); line-height: 1.375; }

/* Közös két oszlop és képtartók: a keret a Figma-keret méretét tartja, a kép (árnyékkal együtt exportálva) kilóg belőle */
.wo-sav { position: relative; background: var(--base); padding-left: max(var(--gutter), calc((100% - var(--wo-w)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wo-w)) / 2)); }
.wo-racs { display: grid; align-items: start; }
.wo-txt { display: flex; flex-direction: column; gap: 16px; min-width: 0; position: relative; z-index: 2; }
/* Nincs z-index: a mix-blend-mode csak így keveredik a szekció hátterével (glow). */
.wo-kep { position: relative; }
.wo-kep img { position: absolute; max-width: none; height: auto; mix-blend-mode: lighten; pointer-events: none; }
.wo-serif-cim { color: var(--yellow); font-size: clamp(36px, 2.97vw, 57px); line-height: 1.123; text-wrap: balance; }

/* ---------- Hero (127:101) ---------- */
.wo-hero { position: relative; background: var(--base); padding-top: calc(var(--header-h) + max(24px, 1.4vw)); padding-bottom: 98px; padding-left: max(var(--gutter), calc((100% - var(--wo-w)) / 2)); padding-right: max(var(--gutter), calc((100% - var(--wo-w)) / 2)); }
.wo-hero.glow { --glow-opacity: .45; }
.wo-hero.glow::after { display: none; }
.wo-hero.glow::before { -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 65%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 65%, transparent 100%); }
.wo-hero-racs { display: grid; grid-template-columns: minmax(0, 671fr) minmax(0, 499fr); align-items: start; position: relative; }
.wo-hero-txt { display: flex; flex-direction: column; align-items: flex-start; margin-top: 56px; position: relative; z-index: 2; }
.wo-hero-idezet { color: var(--accent) !important; font-size: clamp(24px, 1.67vw, 32px); line-height: 1.23; }
.wo-hero-cim { margin-top: 10px !important; color: var(--contrast); font-weight: 700; font-size: clamp(32px, 2.24vw, 43px); line-height: 1.163; max-width: 667px; }
.wo-hero-kerdes { margin-top: 30px !important; color: var(--contrast) !important; font-size: clamp(24px, 1.67vw, 32px); line-height: 1.23; }
.wo .wo-hero-kerdes + .wo-eros { margin-top: 14px; }
.wo-hero-szoveg { margin-top: 16px !important; }
.wo-hero-zaro { margin-top: 16px !important; color: var(--contrast) !important; font-size: 26px; line-height: 26px; }
.wo-hero-gomb { margin-top: 40px; }
.wo-kep-hero { width: 128.46%; aspect-ratio: 641 / 538; margin-left: -1.4%; }
.wo-kep-hero img { left: -15.13%; top: -11.56%; width: 125.46%; }

/* ---------- A hiba (127:100) ---------- */
.wo-hiba { padding-bottom: 98px; }
.wo-racs-kep-bal { grid-template-columns: minmax(0, 470fr) minmax(0, 670fr); column-gap: 30px; }
.wo-kep-hiba { width: 114.45%; aspect-ratio: 538 / 713; margin-left: -13.83%; }
.wo-kep-hiba img { left: -12.33%; top: -8.74%; width: 124.58%; }
.wo-hiba .wo-txt { margin-top: 58px; }
.wo-hiba .wo-serif-cim { margin-bottom: 14px; }

/* ---------- Nem neked készítek (29:236) ---------- */
.wo-vevok { padding-bottom: 157px; }
.wo-racs-kep-jobb { grid-template-columns: minmax(0, 670fr) minmax(0, 500fr); }
.wo-vevok .wo-txt { margin-top: 133px; }
.wo .wo-vevok-cim { margin-top: -6px; margin-bottom: 14px; }
.wo-vevok-persze + .wo-zold-serif { margin-top: -16px; }
.wo-zold-serif { color: var(--accent) !important; font-size: clamp(26px, 1.67vw, 32px); line-height: 1.34; }
.wo-kep-vevok { width: 131.2%; aspect-ratio: 1; margin-left: -13.2%; }
.wo-kep-vevok img { left: -7.95%; top: -7.35%; width: 115.91%; }

/* ---------- Munkamenet (29:437) ---------- */
.wo-munka { padding-bottom: 145px; overflow: hidden; isolation: isolate; }
.wo-munka::before { content: ""; position: absolute; z-index: -1; left: calc(50% - 921px); top: 301px; width: 1881px; height: 1469px; background: url(/wp-content/uploads/ob/weboldal/munkamenet-hatter.webp) no-repeat center / 100% 100%; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 12%, #000 88%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 12%, #000 88%, transparent 100%); mask-composite: intersect; }
.wo-munka-belso { position: relative; }
.wo-munka-cim { max-width: 938px; margin: 0 auto !important; text-align: center; color: var(--contrast); font-weight: 700; font-size: clamp(34px, 3.02vw, 58px); line-height: 1.103; }
.wo-grad { background: linear-gradient(142.61deg, #12D488 7.58%, #6E4ADA 95.13%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wo-lepesek { margin-top: 60px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: start; }
.wo-oszlop { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.wo-lepes { background: var(--base-2); padding: 50px; display: flex; flex-direction: column; gap: 40px; }
.wo-lepes-ikon { display: block; width: 117px; height: 117px; }
.wo-lepes-tart { display: flex; flex-direction: column; gap: 16px; max-width: 470px; }
.wo-lepes-cim { font-family: var(--font-serif); font-style: italic; font-weight: 600; color: var(--accent); font-size: clamp(30px, 2.19vw, 42px); line-height: 1.024; margin-bottom: 4px !important; }
.wo-lepes-lead { color: var(--contrast); font-weight: 500; font-size: 20px; line-height: 28px; }
.wo-lista { list-style: none; padding: 0 0 0 10px; display: flex; flex-direction: column; gap: 10px; }
.wo-lista li { position: relative; margin: 0; padding-left: 22px; color: var(--contrast); font-size: 16px; line-height: 27px; }
.wo-lista li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 10px; height: 10px; background: url(/wp-content/uploads/ob/weboldal/pont.svg) no-repeat center / 10px 10px; }
.wo-munka-cta { margin-top: 60px; display: flex; flex-direction: column; align-items: center; gap: 40px; text-align: center; }
.wo-munka-cta-szoveg { max-width: 938px; color: var(--contrast) !important; font-size: clamp(30px, 2.5vw, 48px); line-height: 1.167; }

/* ---------- Foglaló a végén (29:70) ---------- */
.wo .konz { padding-top: 0; }

/* ---------- Tablet, mobil ---------- */
@media (max-width: 1024px) {
	.wo-hero-racs, .wo-racs-kep-bal, .wo-racs-kep-jobb { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
	.wo-hero-txt, .wo-hiba .wo-txt, .wo-vevok .wo-txt { margin-top: 0; }
	.wo-kep-hero, .wo-kep-hiba, .wo-kep-vevok { width: min(100%, 520px); margin: 0 auto; }
	.wo-kep-hiba { width: min(80%, 420px); }
	.wo-racs-kep-bal .wo-kep { order: 2; }
	.wo-hero, .wo-hiba { padding-bottom: 72px; }
	.wo-vevok { padding-bottom: 96px; }
	.wo-lepesek { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.wo-oszlop { gap: 24px; }
	.wo-munka { padding-bottom: 96px; }
}
@media (max-width: 640px) {
	.wo-lepes { padding: 28px 22px; gap: 24px; }
	.wo-lepes-ikon { width: 88px; height: 88px; }
	.wo-hero-zaro { font-size: 22px; line-height: 26px; }
}

/* A Figma tördelése: itt nem kell a globális balance */
.wo .wo-hero-cim, .wo .wo-munka-cim, .wo .wo-munka-cta-szoveg, .wo .wo-lepes-cim { text-wrap: wrap; }

/* ---------- GYIK a foglaló előtt (3.6–3.8) ---------- */
.wo-gyik { padding-top: 40px; padding-bottom: 157px; }
.wo-gyik-racs { grid-template-columns: minmax(0, 470fr) minmax(0, 670fr); column-gap: 30px; }
.wo-gyik .wo-serif-cim { text-wrap: wrap; }
.wo-gyik-lista .faq-item:last-child { border-bottom: 1px solid var(--border); }
.wo-gyik-lista .faq-item a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 1024px) {
	.wo-gyik { padding-top: 24px; padding-bottom: 96px; }
	.wo-gyik-racs { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
}