/* Canonical Divi 5 global design foundation. */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('../fonts/CormorantGaramond-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('../fonts/Inter-Light.ttf') format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/Inter-Regular.ttf') format('truetype');
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/Inter-Medium.ttf') format('truetype');
}

@font-face {
	font-family: 'Cormorant Infant';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/CormorantInfant-Regular.ttf') format('truetype');
}

:root {
	--msv-d5-color-deep-indigo: #1E2238;
	--msv-d5-color-secondary-indigo: #262B45;
	--msv-d5-color-warm-ivory: #F2EEE6;
	--msv-d5-color-primary-light: #F2EEE6;
	--msv-d5-color-secondary-text: #CFCAC1;
	--msv-d5-color-silver: #C9CED6;
	--msv-d5-color-focus: #E6EBF2;

	--msv-d5-font-display: 'Cormorant Garamond', serif;
	--msv-d5-font-body: 'Inter', sans-serif;
	--msv-d5-font-brand: 'Cormorant Infant', serif;

	--msv-d5-space-4: 4px;
	--msv-d5-space-8: 8px;
	--msv-d5-space-12: 12px;
	--msv-d5-space-16: 16px;
	--msv-d5-space-24: 24px;
	--msv-d5-space-32: 32px;
	--msv-d5-space-48: 48px;
	--msv-d5-space-64: 64px;
	--msv-d5-space-80: 80px;
	--msv-d5-space-96: 96px;
	--msv-d5-space-128: 128px;
	--msv-d5-space-144: 144px;

	--msv-d5-container-width: 1200px;
	--msv-d5-reading-width: 680px;
	--msv-d5-quote-width: 1000px;
	--msv-d5-gutter: 48px;

	--msv-d5-section-space: 128px;
	--msv-d5-section-space-emphatic: 144px;
	--msv-d5-component-gap: 32px;

	--msv-d5-button-padding-y: 14px;
	--msv-d5-button-padding-x: 28px;
	--msv-d5-transition: 180ms ease;

	/* Canonical intensity for every silver geometry on Deep Indigo. */
	--gz-geometry-dark-opacity: 0.06;

}

/* =========================================================
   GLOBAL VIEWPORT — HORIZONTAL OVERFLOW GUARD

   Cél:
   - a szándékosan túlméretezett / átlógó háttérgeometriák
     NE növeljék meg a dokumentum vízszintes görgetési tartományát;
   - iOS Safari függőleges görgetés közben ne tudja a teljes oldalt
     jobbra-balra elcsúsztatni;
   - a sticky header működése maradjon érintetlen.

   overflow-x: clip NEM hoz létre új scroll containert, ezért
   biztonságosabb sticky elemek mellett, mint az overflow-x: hidden.
   ========================================================= */

html,
body,
#page-container,
#et-boc,
#et-main-area,
#et-boc .et-l--body,
#et-boc .et-l--body .et_builder_inner_content {
    max-width: 100% !important;
    overflow-x: clip !important;
}


/* ---------------------------------------------------------
   GLOBAL FONT FOUNDATION
   --------------------------------------------------------- */

body.et_divi_theme,
body.et_divi_theme button,
body.et_divi_theme input,
body.et_divi_theme select,
body.et_divi_theme textarea {
	font-family: var(--msv-d5-font-body) !important;
}

body.et_divi_theme h1,
body.et_divi_theme .et_pb_text h1 {
	font-family: var(--msv-d5-font-display) !important;
	letter-spacing: -0.02em;
}

body.et_divi_theme h2,
body.et_divi_theme .et_pb_text h2 {
	font-family: var(--msv-d5-font-display) !important;
	letter-spacing: -0.015em;
}

body.et_divi_theme h3,
body.et_divi_theme .et_pb_text h3 {
	font-family: var(--msv-d5-font-display) !important;
	letter-spacing: -0.01em;
}

body.et_divi_theme h4,
body.et_divi_theme .et_pb_text h4 {
	font-family: var(--msv-d5-font-display) !important;
}

body.et_divi_theme p,
body.et_divi_theme .et_pb_text {
	font-family: var(--msv-d5-font-body) !important;
}

/* ---------------------------------------------------------
   OPTIONAL TYPOGRAPHIC UTILITY CLASSES
   --------------------------------------------------------- */

.msv-d5-lead {
	font-family: var(--msv-d5-font-body) !important;
	font-size: 21px !important;
	font-weight: 400 !important;
	line-height: 1.55 !important;
}

.msv-d5-small {
	font-family: var(--msv-d5-font-body) !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}

.msv-d5-section-label {
	color: var(--msv-d5-color-silver);
	font-family: var(--msv-d5-font-body) !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
}

.msv-d5-brand-line {
	font-family: var(--msv-d5-font-brand) !important;
	font-size: 26px !important;
	font-weight: 400 !important;
	line-height: 1.2 !important;
}

/* ---------------------------------------------------------
   LAYOUT UTILITIES
   --------------------------------------------------------- */

.msv-d5-container {
	margin-inline: auto;
	max-width: var(--msv-d5-container-width);
	padding-inline: var(--msv-d5-gutter);
}

.msv-d5-reading-width {
	max-width: var(--msv-d5-reading-width);
}

.msv-d5-wide-text {
	max-width: var(--msv-d5-quote-width);
}

/* ---------------------------------------------------------
   BUTTON SYSTEM
   --------------------------------------------------------- */

.et_pb_button.msv-d5-button,
.msv-d5-button {
	align-items: center;
	background: transparent !important;
	border: 1px solid var(--msv-d5-color-silver) !important;
	border-radius: 4px !important;
	box-shadow: none !important;
	color: var(--msv-d5-color-warm-ivory) !important;
	display: inline-flex;
	font-family: var(--msv-d5-font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	justify-content: center;
	letter-spacing: 0.02em;
	line-height: 1.2 !important;
	min-height: 48px;
	padding: var(--msv-d5-button-padding-y) var(--msv-d5-button-padding-x) !important;
	text-decoration: none;
	transition:
		border-color var(--msv-d5-transition),
		color var(--msv-d5-transition),
		background-color var(--msv-d5-transition);
}

.et_pb_button.msv-d5-button:hover,
.msv-d5-button:hover {
	background-color: rgba(201, 206, 214, 0.08) !important;
	border-color: var(--msv-d5-color-focus) !important;
	color: var(--msv-d5-color-warm-ivory) !important;
}

.msv-d5-button--secondary {
	align-items: center;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: var(--msv-d5-color-silver) !important;
	display: inline-flex;
	font-family: var(--msv-d5-font-body) !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	gap: 12px;
	letter-spacing: 0.02em;
	line-height: 1.2 !important;
	min-height: 44px;
	padding: 0 !important;
	text-decoration: none;
}

.msv-d5-button--secondary::after {
	background: currentColor;
	content: '';
	display: block;
	height: 1px;
	transition: width var(--msv-d5-transition);
	width: 18px;
}

.msv-d5-button--secondary:hover::after,
.msv-d5-button--secondary:focus-visible::after {
	width: 26px;
}

.msv-d5-button:focus-visible,
.msv-d5-button--secondary:focus-visible,
a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--msv-d5-color-focus);
	outline-offset: 4px;
}

/* ---------------------------------------------------------
   QA / FOUNDATION COMPONENTS
   --------------------------------------------------------- */

.msv-d5-qa {
	background: var(--msv-d5-color-deep-indigo);
	color: var(--msv-d5-color-primary-light);
	padding-block: var(--msv-d5-section-space);
}

.msv-d5-qa__surface {
	margin-top: var(--msv-d5-component-gap);
	padding: var(--msv-d5-space-48);
}

.msv-d5-qa__surface--secondary {
	background: var(--msv-d5-color-secondary-indigo);
}

.msv-d5-qa__surface--light {
	background: var(--msv-d5-color-warm-ivory);
	color: var(--msv-d5-color-deep-indigo);
}

.msv-d5-qa__stack {
	display: grid;
	gap: var(--msv-d5-component-gap);
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 980px) {
	:root {
		--msv-d5-section-space: 96px;
		--msv-d5-component-gap: 28px;
	}

	.msv-d5-lead {
		font-size: 20px !important;
	}

	.msv-d5-brand-line {
		font-size: 24px !important;
	}
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 767px) {
	:root {
		--msv-d5-gutter: 24px;
		--msv-d5-section-space: 72px;
		--msv-d5-section-space-emphatic: 88px;
		--msv-d5-component-gap: 24px;
	}

	.msv-d5-lead {
		font-size: 19px !important;
	}

	.msv-d5-brand-line {
		font-size: 22px !important;
	}

	.msv-d5-qa__surface {
		padding: var(--msv-d5-space-24);
	}
}

/* ---------------------------------------------------------
   G3 — DIFFUSE PASS
   --------------------------------------------------------- */

.gz-motion-g3-track {
	position: relative;
	height: 1px;
	overflow: hidden;
	background: rgba(201, 206, 214, 0.42);
}

.gz-motion-g3-light {
	position: absolute;
	inset: 0 auto 0 0;
	width: 54px;
	background: linear-gradient(
		90deg,
		transparent,
		rgba(242, 238, 230, 0.98) 50%,
		transparent
	);
	filter: blur(0.3px);
	opacity: 0;
	pointer-events: none;
	transform: translateX(-54px);
}

.gz-motion-g3-track.is-motion-active .gz-motion-g3-light {
	animation: gz-g3-diffuse-pass 1160ms cubic-bezier(.3, 0, .16, 1) 1 both;
}

@keyframes gz-g3-diffuse-pass {
	0% {
		left: 0;
		opacity: 0;
		transform: translateX(-54px);
	}

	14% {
		opacity: 0.92;
	}

	84% {
		opacity: 0.92;
	}

	100% {
		left: 100%;
		opacity: 0;
		transform: translateX(0);
	}
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}

	.gz-motion-g3-light {
		display: none !important;
		animation: none !important;
	}
}

/* Keep the canonical brand line above the global paragraph font rule. */
body.et_divi_theme .msv-d5-brand-line {
	font-family: var(--msv-d5-font-brand) !important;
}

/* ---------------------------------------------------------
   SECONDARY CTA SYSTEM
   --------------------------------------------------------- */

.et_pb_button.msv-secondary-cta {
	background-color: transparent !important;
	background-image: linear-gradient(
		to right,
		currentColor,
		currentColor
	) !important;
	background-position: right 8px center !important;
	background-repeat: no-repeat !important;
	background-size: 18px 1px !important;

	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;

	color: var(--msv-d5-color-silver) !important;

	font-family: var(--msv-d5-font-body) !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	letter-spacing: 0.01em;
	line-height: 1.2 !important;

	padding: 14px 34px 14px 0 !important;

	text-decoration: none;

	transition:
		background-position var(--msv-d5-transition),
		background-size var(--msv-d5-transition),
		color var(--msv-d5-transition) !important;
}

.et_pb_button.msv-secondary-cta:hover,
.et_pb_button.msv-secondary-cta:focus-visible {
	background-color: transparent !important;
	background-image: linear-gradient(
		to right,
		currentColor,
		currentColor
	) !important;

	background-position: right 0 center !important;
	background-repeat: no-repeat !important;
	background-size: 26px 1px !important;

	color: var(--msv-d5-color-warm-ivory) !important;

	padding: 14px 34px 14px 0 !important;
}

.et_pb_button.msv-secondary-cta::before,
.et_pb_button.msv-secondary-cta::after {
	content: none !important;
	display: none !important;
}

/* ---------------------------------------------------------
   SECONDARY CTA — LIGHT SURFACE VARIANT
   --------------------------------------------------------- */

.et_pb_button.msv-secondary-cta.msv-secondary-cta--light {
	color: var(--msv-d5-color-deep-indigo) !important;
}

.et_pb_button.msv-secondary-cta.msv-secondary-cta--light:hover,
.et_pb_button.msv-secondary-cta.msv-secondary-cta--light:focus-visible {
	color: var(--msv-d5-color-secondary-indigo) !important;
}

/* =========================================================
   GLOBAL HEADER — STICKY ON SCROLL
   Divi 5 Theme Builder header

   A teljes header a dokumentumfolyamban marad, de görgetéskor
   a viewport tetején rögzül. Így nincs layout-jump, mint fixed
   pozicionálásnál, és a dropdownok továbbra is szabadon
   kilóghatnak.
   ========================================================= */

#et-boc .et-l--header {
    position: sticky !important;
    top: 0 !important;
    z-index: 30000 !important;

    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

/* Bejelentkezett WordPress nézetben az admin bar alatt maradjon. */
body.admin-bar #et-boc .et-l--header {
    top: 32px !important;
}

@media (max-width: 782px) {
    body.admin-bar #et-boc .et-l--header {
        top: 46px !important;
    }
}

/* =========================================================
   HEADER NAVIGATION — DROPDOWN / MOBILE MENU
   DIVI-NATIVE POSITIONING + BRAND VISUAL TREATMENT

   FONTOS:
   A desktop submenu és a tablet/mobile panel pozicionálását
   Divi kezeli. Ezen a blokkon belül NEM írjuk felül a
   position / top / left / right / width értékeket.

   Csak:
   - megszüntetjük a clippinget;
   - rögzítjük a z-indexet;
   - 1px felső ezüst vonalat adunk;
   - Deep Indigo hátteret adunk;
   - megtartjuk a micrograint;
   - a belső Tréningek submenu nem kap második vonalat.
   ========================================================= */

/* ---------------------------------------------------------
   HEADER ANCESTORS — dropdown clipping tiltása
   --------------------------------------------------------- */

#et-boc .et-l--header,
#et-boc .et-l--header .et_pb_section,
#et-boc .et-l--header .et_pb_row,
#et-boc .et-l--header .et_pb_column,
#et-boc .et-l--header .et_pb_menu,
#et-boc .et-l--header .et_pb_menu_inner_container,
#et-boc .et-l--header .et_pb_menu__wrap {
    overflow: visible !important;
    clip-path: none !important;
    contain: none !important;
}

#et-boc .et-l--header .et_pb_menu {
    z-index: 9998 !important;
}


/* ---------------------------------------------------------
   DESKTOP — 981px+
   Divi natív submenu-pozicionálása érintetlen marad.
   --------------------------------------------------------- */

@media (min-width: 981px) {

    /* Csak a top-level desktop dropdown panel vizuális kezelése. */
    #et-boc .et-l--header
    .et_pb_menu__menu > nav > ul > li > ul.sub-menu {
        overflow: visible !important;
        max-height: none !important;

        background-color: var(--msv-d5-color-deep-indigo) !important;

        border-top: 1px solid var(--msv-d5-color-silver) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        box-shadow: none !important;

        clip-path: none !important;
        contain: none !important;

        z-index: 9999 !important;
        isolation: isolate !important;
    }

    /* A Tréningek alatti esetleges további desktop submenu
       ne rajzoljon újabb felső vonalat. */
    #et-boc .et-l--header
    .et_pb_menu__menu .sub-menu .sub-menu {
        background-color: var(--msv-d5-color-deep-indigo) !important;

        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        box-shadow: none !important;
    }

    /* Micrograin kizárólag a fő dropdown panelen. */
    #et-boc .et-l--header
    .et_pb_menu__menu > nav > ul > li > ul.sub-menu::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;

        background-image:
            url("https://varazsige.hu/wp-content/uploads/2026/09/Gyori_Zsuzsanna_Micrograin_Master_512_Lossless11.webp");
        background-repeat: repeat;
        background-size: 512px 512px;

        opacity: 0.034;
        mix-blend-mode: hard-light;
    }

    #et-boc .et-l--header
    .et_pb_menu__menu > nav > ul > li > ul.sub-menu > li {
        position: relative !important;
        z-index: 1 !important;
    }
}


/* ---------------------------------------------------------
   TABLET + MOBILE — max 980px
   Divi natív et_mobile_menu pozicionálása érintetlen marad.
   --------------------------------------------------------- */

@media (max-width: 980px) {

    #et-boc .et-l--header
    .et_pb_menu .et_mobile_menu {
        /*
         A header ősei továbbra is overflow: visible állapotban maradnak,
         hogy a teljes mobilmenüt ne vágja le semmilyen wrapper.

         Maga a mobilmenü-panel viszont overflow: hidden:
         nyitás közben a menüpontok így nem tudnak a még animálódó
         Deep Indigo háttér elé / alá kilógni.
        */
        overflow: hidden !important;
        max-height: none !important;

        background-color: var(--msv-d5-color-deep-indigo) !important;

        border-top: 1px solid var(--msv-d5-color-silver) !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        box-shadow: none !important;

        clip-path: none !important;
        contain: none !important;

        z-index: 9999 !important;
        isolation: isolate !important;
    }

    /* A Tréningek → TAG I / TAG II belső submenu ugyanazon
       panel része: nincs második vonal, nincs külön háttérdoboz. */
    #et-boc .et-l--header
    .et_pb_menu .et_mobile_menu .sub-menu {
        background: transparent !important;

        border-top: 0 !important;
        border-right: 0 !important;
        border-bottom: 0 !important;
        border-left: 0 !important;

        box-shadow: none !important;
    }

    /* Micrograin kizárólag a teljes mobil/tablet panelen. */
    #et-boc .et-l--header
    .et_pb_menu .et_mobile_menu::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;

        background-image:
            url("https://varazsige.hu/wp-content/uploads/2026/09/Gyori_Zsuzsanna_Micrograin_Master_512_Lossless11.webp");
        background-repeat: repeat;
        background-size: 512px 512px;

        opacity: 0.034;
        mix-blend-mode: hard-light;
    }

    #et-boc .et-l--header
    .et_pb_menu .et_mobile_menu > li {
        position: relative !important;
        z-index: 1 !important;
    }
}

/* ---------------------------------------------------------
   MICRO-GRAIN SURFACES
   --------------------------------------------------------- */

.gz-grain-surface {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.gz-grain-surface::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;

	background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/Gyori_Zsuzsanna_Micrograin_Master_512_Lossless11.webp");
	background-repeat: repeat;
	background-size: 512px 512px;

	mix-blend-mode: hard-light;
}

.gz-grain-primary::before {
	opacity: 0.034;
}

/* ---------------------------------------------------------
   G-21 BACKGROUND GEOMETRY
   Analógiás szemlélet
   --------------------------------------------------------- */

@media (min-width: 981px) {

	.gz-geo-g21-bg::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 1050px;
		height: 707px;

		top: calc(50% + 72px);
		right: -165px;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g21-double-outer-ellipse-silver.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		opacity: var(--gz-geometry-dark-opacity);

		transform:
			translateY(-50%)
			rotate(90deg);

		transform-origin: center center;
	}
}

@media (min-width: 768px) and (max-width: 980px) {

	.gz-geo-g21-bg::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 900px;
		height: 606px;

		top: 500px;
		right: -230px;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g21-double-outer-ellipse-silver.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		opacity: var(--gz-geometry-dark-opacity);

		transform: rotate(90deg);
		transform-origin: center center;
	}
}

@media (max-width: 767px) {

	.gz-geo-g21-bg::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 720px;
		height: 485px;

		top: 320px;
		left: -20px;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g21-double-outer-ellipse-silver.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		opacity: var(--gz-geometry-dark-opacity);

		transform: rotate(90deg);
		transform-origin: center center;
	}
}

/* ---------------------------------------------------------
   G-06 BACKGROUND GEOMETRY
   Tarot — opening section
   Very large, quiet background treatment
   --------------------------------------------------------- */

.gz-grain-surface.gz-tarot-g06-bg {
	position: relative;
	overflow: hidden;
}

.gz-tarot-g06-bg > .et_pb_row {
	position: relative;
	z-index: 2;
}


/* Desktop */
@media (min-width: 981px) {

	.gz-tarot-g06-bg::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 1450px;
		height: 1450px;

		top: -200px;
		left: 62%;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g06-inner-circle-point-axis-silver.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		/* ugyanaz a halk ezüst intenzitás, mint a G13-nál */
		opacity: var(--gz-geometry-dark-opacity);

		transform: translateX(-50%);
		transform-origin: center center;

		filter: none;
		box-shadow: none;
		transition: none;
	}
}


/* Tablet */
@media (min-width: 768px) and (max-width: 980px) {

	.gz-tarot-g06-bg::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 1180px;
		height: 1180px;

		top: -130px;
		left: 72%;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g06-inner-circle-point-axis-silver.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		opacity: var(--gz-geometry-dark-opacity);

		transform: translateX(-50%);
		transform-origin: center center;

		filter: none;
		box-shadow: none;
		transition: none;
	}
}


/* Mobile */
@media (max-width: 767px) {

	.gz-tarot-g06-bg::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 900px;
		height: 900px;

		top: -70px;
		left: 78%;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g06-inner-circle-point-axis-silver.png");
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;

		opacity: var(--gz-geometry-dark-opacity);

		transform: translateX(-50%);
		transform-origin: center center;

		filter: none;
		box-shadow: none;
		transition: none;
	}
}

/* Keep actual Divi content above grain and geometry. */
.gz-grain-surface > .et_pb_row {
	position: relative;
	z-index: 2;
}

/* ---------------------------------------------------------
   G-06 MOBILE SECTION DIVIDER
   Perfectly centered on the light / dark section boundary
   --------------------------------------------------------- */

@media (max-width: 767px) {

	.gz-work-g20-divider::after {
		content: "";
		position: absolute;
		z-index: 1;
		pointer-events: none;

		width: 180px;
		height: 180px;

		top: 0;
		left: 50%;

		background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g06-inner-circle-point-axis-silver.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;

		opacity: 0.48;

		transform: translate(-50%, -50%);
		transform-origin: center center;
	}
}
/* =========================================================
   SÖI — PRICING / G-03 CIRCLES
   Havi + éves tagság
   ========================================================= */

.gz-soi-price-circle {
    position: relative;

    width: max-content !important;
    max-width: 100%;

    margin-left: auto !important;
    margin-right: auto !important;
    padding: 0 !important;

    overflow: visible !important;
}

.gz-soi-price-circle .et_pb_text_inner {
    position: relative;
    isolation: isolate;

    width: max-content;
    max-width: 100%;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex;
    flex-direction: column;
    align-items: center;

    text-align: center !important;
}

.gz-soi-price-circle .et_pb_text_inner::before {
    content: "";
    position: absolute;
    z-index: -1;

    left: 50%;
    top: 120%;

    width: 240%;
    aspect-ratio: 1 / 1;

    background-image: url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: 0.48;

    transform: translate(-50%, -50%);
    pointer-events: none;
}

.gz-soi-price-circle .et_pb_text_inner > * {
    position: relative;
    z-index: 1;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
}
/* =========================================================
   SÖI — A KÖZÖSSÉG SZEREPE
   Light section + two cropped G-03 geometries
   ========================================================= */

.gz-soi-community-g03-v2 {
    position: relative !important;
    overflow: hidden !important;

    background-image:
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png"),
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png") !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    /* felső nagyobb kör / alsó kisebb kör */
    background-size:
        980px 980px,
        720px 720px !important;

    /* felső belóg felülről / alsó belóg alulról */
    background-position:
        left -170px top -650px,
        right -210px bottom -315px !important;

    transition: none !important;
}

.gz-soi-community-g03-v2:hover {
    background-size:
        980px 980px,
        720px 720px !important;

    background-position:
        left -170px top -650px,
        right -210px bottom -315px !important;

    transition: none !important;
}
/* =========================================================
   SÖI — KÖZÖSSÉG
   CONTINUOUS G-03 GEOMETRY SYSTEM

   Canonical rule:
   every silver geometry segment on Deep Indigo uses
   --gz-geometry-dark-opacity (Hero intensity).

   Felső sötét    → nagy G-03 folytatása, canonical dark opacity
   Középső világos → mindkét G-03, eredeti light treatment
   Alsó sötét     → kisebb G-03 folytatása, canonical dark opacity
   ========================================================= */


/* ---------------------------------------------------------
   1. FELSŐ SÖTÉT SECTION
   A nagy felső kör előző szakasza
   --------------------------------------------------------- */

.gz-soi-community-arc-top {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: none !important;
}

.gz-soi-community-arc-top::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image:
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png") !important;
    background-repeat: no-repeat !important;
    background-size: 980px 980px !important;
    background-position: left -170px bottom -330px !important;

    opacity: var(--gz-geometry-dark-opacity);

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    animation: none !important;
}

.gz-soi-community-arc-top > .et_pb_row {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   2. KÖZÉPSŐ VILÁGOS SECTION
   Itt egyszerre látszik a két kör.
   A világos felület intenzitását nem változtatjuk.
   --------------------------------------------------------- */

.gz-soi-community-arc-middle {
    position: relative !important;
    overflow: hidden !important;

    background-image:
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png"),
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png") !important;

    background-repeat:
        no-repeat,
        no-repeat !important;

    background-size:
        980px 980px,
        720px 720px !important;

    background-position:
        left -170px top -650px,
        right -210px bottom -315px !important;

    background-blend-mode: normal;
    transition: none !important;
}


/* ---------------------------------------------------------
   3. ALSÓ SÖTÉT SECTION
   A kisebb alsó kör következő szakasza
   --------------------------------------------------------- */

.gz-soi-community-arc-bottom {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
    transition: none !important;
}

.gz-soi-community-arc-bottom::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image:
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png") !important;
    background-repeat: no-repeat !important;
    background-size: 720px 720px !important;
    background-position: right -210px top -405px !important;

    opacity: var(--gz-geometry-dark-opacity);

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    animation: none !important;
}

.gz-soi-community-arc-bottom > .et_pb_row {
    position: relative;
    z-index: 2;
}


/* ---------------------------------------------------------
   NO HOVER
   --------------------------------------------------------- */

.gz-soi-community-arc-top:hover::after {
    background-size: 980px 980px !important;
    background-position: left -170px bottom -330px !important;
    opacity: var(--gz-geometry-dark-opacity);
}

.gz-soi-community-arc-middle:hover {
    background-size:
        980px 980px,
        720px 720px !important;

    background-position:
        left -170px top -650px,
        right -210px bottom -315px !important;
}

.gz-soi-community-arc-bottom:hover::after {
    background-size: 720px 720px !important;
    background-position: right -210px top -405px !important;
    opacity: var(--gz-geometry-dark-opacity);
}

/* =========================================================
   HOGYAN DOLGOZHATUNK EGYÜTT?
   G-31 — SINGLE CONTINUOUS GEOMETRY
   Desktop + Tablet + Mobile

   Egyetlen G-31 példány él a középső világos sectionön.
   Ugyanez az egy kép lóg át fizikailag a felső és alsó sötét
   sectionökbe. A három nézetben csak a méret, a horizontális
   pozíció és a felső/alsó túlnyúlás változik.

   A sötét sectionökben a geometria alpha értéke a Hero canonical intenzitása: 0.06.
   A váltás pontosan a sectionhatárokon történik.
   ========================================================= */


/* ---------------------------------------------------------
   KÖZÖS SZERKEZET — MINDEN NÉZET
   --------------------------------------------------------- */

.gz-work-g31-top,
.gz-work-g31-middle,
.gz-work-g31-bottom {
    position: relative !important;
    overflow: visible !important;

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
}

.gz-work-g31-top,
.gz-work-g31-bottom {
    z-index: 1;
}

.gz-work-g31-middle {
    z-index: 2;
    isolation: isolate;
}

/* Divi tartalom mindig a geometria fölött. */
.gz-work-g31-top > .et_pb_row,
.gz-work-g31-middle > .et_pb_row,
.gz-work-g31-bottom > .et_pb_row {
    position: relative;
    z-index: 3;
}

/* A régi külön felső/alsó geometria tiltása. */
.gz-work-g31-top::after,
.gz-work-g31-bottom::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
}

/* Hover lock a sectionökön. */
.gz-work-g31-top:hover,
.gz-work-g31-middle:hover,
.gz-work-g31-bottom:hover {
    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
}


/* ---------------------------------------------------------
   DESKTOP — 981px+
   --------------------------------------------------------- */

@media (min-width: 981px) {

    .gz-work-g31-middle {
        --gz-g31-size: 1450px;
        --gz-g31-right: -612px;
        --gz-g31-overhang-top: 360px;
        --gz-g31-overhang-bottom: 500px;
        --gz-g31-dark-alpha: var(--gz-geometry-dark-opacity);
    }

    .gz-work-g31-middle::after {
        content: "";
        position: absolute;
        z-index: 1;
        pointer-events: none;

        top: calc(0px - var(--gz-g31-overhang-top)) !important;
        right: 0 !important;
        bottom: calc(0px - var(--gz-g31-overhang-bottom)) !important;
        left: 0 !important;

        width: auto !important;
        height: auto !important;

        background-image:
            url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g31-double-inner-circle-point-silver.png") !important;
        background-repeat: no-repeat !important;
        background-size:
            var(--gz-g31-size) var(--gz-g31-size) !important;
        background-position:
            right var(--gz-g31-right) top 0 !important;

        opacity: 1 !important;

        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 0,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 100%
        ) !important;

        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 0,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 100%
        ) !important;

        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;

        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}


/* ---------------------------------------------------------
   TABLET — 768–980px

   Arányosan kisebb G-31.
   A középpont még látható lehet, de jobbra húzva marad.
   --------------------------------------------------------- */

@media (min-width: 768px) and (max-width: 980px) {

    .gz-work-g31-middle {
        --gz-g31-size: 1100px;
        --gz-g31-right: -460px;
        --gz-g31-overhang-top: 275px;
        --gz-g31-overhang-bottom: 380px;
        --gz-g31-dark-alpha: var(--gz-geometry-dark-opacity);
    }

    .gz-work-g31-middle::after {
        content: "";
        position: absolute;
        z-index: 1;
        pointer-events: none;

        top: calc(0px - var(--gz-g31-overhang-top)) !important;
        right: 0 !important;
        bottom: calc(0px - var(--gz-g31-overhang-bottom)) !important;
        left: 0 !important;

        width: auto !important;
        height: auto !important;

        background-image:
            url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g31-double-inner-circle-point-silver.png") !important;
        background-repeat: no-repeat !important;
        background-size:
            var(--gz-g31-size) var(--gz-g31-size) !important;
        background-position:
            right var(--gz-g31-right) top 0 !important;

        opacity: 1 !important;

        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 0,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 100%
        ) !important;

        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 0,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 100%
        ) !important;

        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;

        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}


/* ---------------------------------------------------------
   MOBILE — max 767px

   A G-31 tovább zsugorodik és erősebben jobbra tolódik.
   A körök középpontja / pontja már a viewporton kívül marad;
   mobilon csak a nagy koncentrikus ívek dolgoznak.
   --------------------------------------------------------- */

@media (max-width: 767px) {

    .gz-work-g31-middle {
        --gz-g31-size: 900px;
        --gz-g31-right: -570px;
        --gz-g31-overhang-top: 225px;
        --gz-g31-overhang-bottom: 310px;
        --gz-g31-dark-alpha: var(--gz-geometry-dark-opacity);
    }

    .gz-work-g31-middle::after {
        content: "";
        position: absolute;
        z-index: 1;
        pointer-events: none;

        top: calc(0px - var(--gz-g31-overhang-top)) !important;
        right: 0 !important;
        bottom: calc(0px - var(--gz-g31-overhang-bottom)) !important;
        left: 0 !important;

        width: auto !important;
        height: auto !important;

        background-image:
            url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g31-double-inner-circle-point-silver.png") !important;
        background-repeat: no-repeat !important;
        background-size:
            var(--gz-g31-size) var(--gz-g31-size) !important;
        background-position:
            right var(--gz-g31-right) top 0 !important;

        opacity: 1 !important;

        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 0,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 100%
        ) !important;

        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 0,
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) var(--gz-g31-overhang-top),
            rgba(0, 0, 0, 1) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) calc(100% - var(--gz-g31-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-g31-dark-alpha)) 100%
        ) !important;

        -webkit-mask-repeat: no-repeat !important;
        mask-repeat: no-repeat !important;
        -webkit-mask-size: 100% 100% !important;
        mask-size: 100% 100% !important;

        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }
}


/* ---------------------------------------------------------
   PSEUDO-ELEMENT HOVER LOCK — MINDEN NÉZET
   --------------------------------------------------------- */

.gz-work-g31-middle:hover::after {
    opacity: 1 !important;

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    animation: none !important;
}

/* =========================================================
   HOGYAN DOLGOZHATUNK EGYÜTT?
   MOBILE — FULL G-03 LEFT ARC

   Egyetlen, teljes méretű G-03 dolgozik a középső világos
   sectionön, és fizikailag átlóg az alsó sötét sectionbe.

   FONTOS:
   az opacity-váltás NEM pixelesen belőtt ponton történik.
   A pseudo-element alsó túlnyúlása adja a sötét szakaszt,
   ezért a maszk váltása matematikailag pontosan a középső
   világos section alsó határához kötődik.

   Világos section: 0.48
   Sötét section: canonical Hero intensity = 0.06
   ========================================================= */

@media (max-width: 767px) {

    .gz-work-g31-middle {
        position: relative !important;
        overflow: visible !important;

        /*
         Ez NEM az opacity-váltás helyét állítja.
         Csak azt mondja meg, hogy a G-03 milyen messz
         folytatódjon fizikailag az alsó sötét sectionben.
         Az opacity-váltás ettől függetlenül mindig pontosan
         a sectionhatáron történik.
        */
        --gz-mobile-leftarc-overhang-bottom: 345px;
        --gz-mobile-leftarc-light-alpha: 0.48;
    }

    .gz-work-g31-middle::before {
        content: "";
        position: absolute;
        z-index: 1;
        pointer-events: none;

        /*
         A jóváhagyott G-03 méret és pozíció változatlan.
         A háttérben továbbra is a teljes 1500 × 1500 px-es
         kör dolgozik; csak a pseudo-element látható ablaka
         igazodik a valódi sectionhatárhoz.
        */
        width: 1500px;
        height: auto;

        left: -1260px;
        top: 455px;
        bottom: calc(0px - var(--gz-mobile-leftarc-overhang-bottom));

        background-image:
            url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g03-inner-circle-silver.png");
        background-repeat: no-repeat;
        background-position: left top;
        background-size: 1500px 1500px;

        /*
         Maga a layer 1 marad.
         Az intenzitást a mask szabályozza.
        */
        opacity: 1;

        /*
         A pseudo-element a világos sectionből indul,
         és pontosan --gz-mobile-leftarc-overhang-bottom
         értékkel lóg túl a section alján.

         Emiatt:
         calc(100% - overhang)
         = PONTOSAN a világos/sötét sectionhatár.
        */
        -webkit-mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-mobile-leftarc-light-alpha)) 0,
            rgba(0, 0, 0, var(--gz-mobile-leftarc-light-alpha))
                calc(100% - var(--gz-mobile-leftarc-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-geometry-dark-opacity))
                calc(100% - var(--gz-mobile-leftarc-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-geometry-dark-opacity)) 100%
        );

        mask-image: linear-gradient(
            to bottom,
            rgba(0, 0, 0, var(--gz-mobile-leftarc-light-alpha)) 0,
            rgba(0, 0, 0, var(--gz-mobile-leftarc-light-alpha))
                calc(100% - var(--gz-mobile-leftarc-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-geometry-dark-opacity))
                calc(100% - var(--gz-mobile-leftarc-overhang-bottom)),
            rgba(0, 0, 0, var(--gz-geometry-dark-opacity)) 100%
        );

        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: 100% 100%;
        mask-size: 100% 100%;

        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        mix-blend-mode: normal !important;
        transition: none !important;
        animation: none !important;
    }

    .gz-work-g31-middle:hover::before {
        width: 1500px;
        height: auto;

        left: -1260px;
        top: 455px;
        bottom: calc(0px - var(--gz-mobile-leftarc-overhang-bottom));

        background-position: left top;
        background-size: 1500px 1500px;

        opacity: 1;

        transform: none !important;
        filter: none !important;
        box-shadow: none !important;
        transition: none !important;
        animation: none !important;
    }
}

/* =========================================================
   ANALÓGIÁS SZEMLÉLET
   G-21 — NAGY, FÜGGŐLEGES VESICA JOBBRA
   ========================================================= */

.gz-analogia-g21-right {
    position: relative !important;
    overflow: visible !important;
    isolation: isolate;
    z-index: 1;
}

.gz-analogia-g21-right::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;

    /*
     A forrás G21 fekvő formátumú.
     A 90°-os forgatásból lesz a KÉRT FÜGGŐLEGES vesica.
    */
    width: 1500px;
    height: 1010px;

    top: 300px;
    right: -700px;

    background-image:
        url("https://varazsige.hu/wp-content/uploads/2026/09/gz-geo-g21-double-outer-ellipse-silver.png");

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    opacity: var(--gz-geometry-dark-opacity);

    transform: rotate(90deg) !important;
    transform-origin: center center;

    filter: none !important;
    box-shadow: none !important;
    mix-blend-mode: normal !important;
    transition: none !important;
    animation: none !important;
}

.gz-analogia-g21-right > .et_pb_row {
    position: relative;
    z-index: 2;
}

.gz-analogia-g21-right:hover::after {
    width: 1500px;
    height: 1010px;

    top: 300px;
    right: -700px;

    opacity: var(--gz-geometry-dark-opacity);

    transform: rotate(90deg) !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

/* =========================================================
   TWO-COLUMN COMPARISON
   RESPONSIVE CTA BASELINE ALIGNMENT — NO FIXED HEIGHTS

   Érintett body classok:
   - gz-equal-copy           → Egyéni konzultáció / Fókuszált folyamat
   - gz-equal-copy-training  → TAG I / TAG II

   Működés:
   - nincs fix min-height;
   - desktopon és tableten a két oszlop azonos magasságú;
   - a CTA-modul az oszlop aljára kerül;
   - a magasabb tartalmú oszlop természetes szöveg–CTA távolsága
     marad a referencia, a rövidebb oszlop csak a szükséges
     különbséget veszi fel;
   - mobilon (767px alatt) nincs kényszerített igazítás.
   ========================================================= */

@media (min-width: 768px) {

    /* A comparison row két oszlopa valódi függőleges flex-konténer.
       A :has() csak azokra a row-kra korlátozza a szabályt,
       amelyekben a kijelölt body classok ténylegesen jelen vannak. */
    .et_pb_row:has(.gz-equal-copy) > .et_pb_column,
    .et_pb_row:has(.gz-equal-copy-training) > .et_pb_column {
        display: flex !important;
        flex-direction: column !important;
        align-self: stretch !important;
        height: auto !important;
    }

    /* Minden korábbi fix magasság semlegesítése. */
    .gz-equal-copy,
    .gz-equal-copy-training {
        min-height: 0 !important;
        height: auto !important;
        flex: 0 0 auto !important;
    }

    /* A CTA a saját oszlopa aljára ül.
       Nem a body-t nyújtjuk, így a szöveg és CTA között csak
       annyi plusz tér keletkezik, amennyi az egyvonalba
       rendezéshez ténylegesen szükséges. */
    .et_pb_row:has(.gz-equal-copy) > .et_pb_column > .et_pb_button_module_wrapper:last-child,
    .et_pb_row:has(.gz-equal-copy-training) > .et_pb_column > .et_pb_button_module_wrapper:last-child {
        margin-top: auto !important;
        margin-bottom: 0 !important;
    }
}

/* =========================================================
   HERO — FULL EMBLEM GEOMETRY
   FINAL DIVI 5 OVERFLOW / HOVER / STACKING LOCK

   Required section classes:
   Hero section:          gz-hero-emblem-overflow
   Following section:     gz-hero-following-section

   A geometria mérete, pozíciója és opacityje változatlan.
   Az embléma alsó része kilóghat a következő sectionre.
   A Divi hover-stílusai ezt sem desktopon, sem tableten,
   sem mobilon nem vághatják le és nem takarhatják el.
   ========================================================= */


/* ---------------------------------------------------------
   PAGE / BUILDER STACKING CONTEXT
   A két érintett section ugyanabban a normál stacking
   rendszerben maradjon.
   --------------------------------------------------------- */

#et-boc .et-l .et_builder_inner_content:has(.gz-hero-emblem-overflow) {
    overflow-x: clip !important;
    overflow-y: visible !important;
    isolation: auto !important;
    contain: none !important;
}


/* ---------------------------------------------------------
   HERO SECTION
   A #et-boc + .et-l selector szándékosan erősebb, mint a
   Divi által generált modul-hover selectorok.
   --------------------------------------------------------- */

#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:hover,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:focus,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:focus-within {
    position: relative !important;

    overflow-x: clip !important;
    overflow-y: visible !important;
    z-index: 10000 !important;

    isolation: auto !important;
    clip-path: none !important;
    contain: none !important;
    will-change: auto !important;

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}


/* ---------------------------------------------------------
   HERO BELSŐ DIVI WRAPPEREK
   Row / column / image wrapper sem vághatja le az emblémát.
   --------------------------------------------------------- */

#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow > .et_pb_row,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:hover > .et_pb_row,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow .et_pb_column,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:hover .et_pb_column,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow .et_pb_image,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:hover .et_pb_image,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow .et_pb_image_wrap,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow:hover .et_pb_image_wrap {
    overflow: visible !important;

    clip-path: none !important;
    contain: none !important;
    will-change: auto !important;
}

/* A hero dekoratív képei ne hozzanak létre egérre külön
   hover-interakciót. A CTA-k és a szövegek ettől érintetlenek. */
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow .et_pb_image,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow .et_pb_image_wrap,
#et-boc .et-l .et_pb_section.gz-hero-emblem-overflow .et_pb_image img {
    pointer-events: none !important;
}


/* ---------------------------------------------------------
   HERO ALATTI SECTION
   Hoverkor sem kerülhet a hero fölé, és sem section-, sem
   wrapper-szinten nem hozhat létre clippinget.
   --------------------------------------------------------- */

#et-boc .et-l .et_pb_section.gz-hero-following-section,
#et-boc .et-l .et_pb_section.gz-hero-following-section:hover,
#et-boc .et-l .et_pb_section.gz-hero-following-section:focus,
#et-boc .et-l .et_pb_section.gz-hero-following-section:focus-within {
    position: relative !important;

    overflow-x: clip !important;
    overflow-y: visible !important;
    z-index: 1 !important;

    isolation: auto !important;
    clip-path: none !important;
    contain: none !important;
    will-change: auto !important;

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}

#et-boc .et-l .et_pb_section.gz-hero-following-section > .et_pb_row,
#et-boc .et-l .et_pb_section.gz-hero-following-section:hover > .et_pb_row,
#et-boc .et-l .et_pb_section.gz-hero-following-section .et_pb_column,
#et-boc .et-l .et_pb_section.gz-hero-following-section:hover .et_pb_column {
    overflow: visible !important;

    clip-path: none !important;
    contain: none !important;
    will-change: auto !important;

    transform: none !important;
    filter: none !important;
    box-shadow: none !important;
    transition: none !important;
    animation: none !important;
}