/*
 * Theme Name:        Hello Elementor Child
 * Theme URI:         https://vikingo.studio/
 * Description:       A Vikingo Studio Hello Elementor gyermek témája, saját admin és bejelentkezési testreszabással.
 * Author:            Vikingo Studio
 * Author URI:        https://vikingo.studio/
 * Template:          hello-elementor
 * Version:           1.3.0
 * Requires at least: 6.0
 * Tested up to:      7.0
 * Requires PHP:      7.4
 * Text Domain:       hello-vikingo-studio
 * License:           GNU General Public License v3 or later
 * License URI:       https://www.gnu.org/licenses/gpl-3.0.html
 */

/* === GLOBÁLIS EGYEDISÉGEK === */
/* Utolsó bekezdés alsó térköze (főleg text widgetek miatt) */
p:last-child {
    margin-bottom: 0 !important;
}
table{
	margin-bottom: 0px !important;
}

.align{
	margin-top:auto !important;
}

/*Mobil rejtés*/

.mobile-hide{
	content-visibility:hidden !important;
	display: none !important;
}

/* === Globális változók === */

@font-face {
	font-family: 'Clash Display';
	src: url('/wp-content/uploads/2026/06/ClashDisplay-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Clash Display';
	src: url('/wp-content/uploads/2026/06/ClashDisplay-Medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Clash Display';
	src: url('/wp-content/uploads/2026/06/ClashDisplay-Semibold.woff2') format('woff2');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

:root{
	/* === BRAND COLORS === */
	--color-primary:   rgb(178, 106, 62);
	--color-secondary: #070B16;
	--color-text:      #AEB7C2;
	--color-light:     #11192C;
	--color-white:     #ffffff;
	--color-border:    rgba(255,255,255,0.1);
	--color-green:     #12E09B;
	--color-sand:      #EDE5DC;
	--color-bg:        #0C1322;
	--color-gold:      #d7b079;
	--accent-weak:     rgba(190, 124, 73, .13);

	/* === GRADIENT === */
	--gradient-cta: linear-gradient(
		135deg,
		#D7B079 0%,
		#BE7C49 34%,
		#9A6336 60%,
		#6F4428 82%,
		#3A2417 100%
	);

	/* === FONT FAMILIES === */
	--font-display: 'Clash Display', 'Space Grotesk', system-ui, sans-serif;
	--font-body:    'Inter', system-ui, sans-serif;

	/* === TYPOGRAPHY SCALE === */
	--fs-h1:           clamp(2.4rem, 4.6vw, 4.4rem);
	--fs-h1-sec: clamp(2.2rem, 4.2vw, 4rem);
	--fs-h2:           clamp(1.8rem, 5.6vw, 4.3rem);
	--fs-h3:           clamp(1.4rem, 3vw, 1.75rem);
	--fs-h4:           clamp(0.5rem, 1.5vw + 0.8rem, 1.1rem);
	--fs-h5:           1.25rem;
	--fs-h6:           1.125rem;

	--fs-body:    clamp(1rem, 0.92rem + 0.25vw, 1.125rem);
	--fs-body-l:  clamp(1.125rem, 1rem + 0.4vw, 1.25rem);
	--fs-body-s:  clamp(0.75rem, 0.725rem + 0.1vw, 0.8125rem);
	--fs-body-sm: clamp(0.875rem, 0.825rem + 0.25vw, 1rem);

	/* === SPACING SCALE === */
	--space-0:  0;
	--space-1:  0.25rem;  /* 4px */
	--space-2:  0.5rem;   /* 8px */
	--space-3:  0.75rem;  /* 12px */
	--space-4:  1rem;     /* 16px */
	--space-5:  1.5rem;   /* 24px */
	--space-6:  2rem;     /* 32px */
	--space-7:  2.5rem;   /* 40px */
	--space-8:  3rem;     /* 48px */
	--space-9:  4rem;     /* 64px */
	--space-10: 5rem;     /* 80px */
	--space-11: 6rem;     /* 96px */
	--space-12: 7.5rem;   /* 120px */

	/* === SECTION PADDING === */
	--section-py: clamp(4rem, 2rem + 6vw, 7.5rem);
	--section-px: 1.25rem;

	/* === CONTAINER === */
	--container-max: 1260px;
}

/* ========================================
   GLOBAL BACKGROUND
   ======================================== */
body{
  background: var(--color-bg);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text);
}

.dark{
	background: var(--color-secondary);
}
/* ========================================
   HEADINGS (H1–H6) — homok színű
   ======================================== */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  font-family: var(--font-display) !important;
  color: var(--color-sand);
  margin: 0;
}

h1, .h1,
h2, .h2{
  font-weight: 600;
}

h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6{
  font-weight: 500;
}

h1, .h1{
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.h1-sec h1{
  font-size: var(--fs-h1-sec);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

h2, .h2{
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

h3, .h3{
  font-size: var(--fs-h3);
  line-height: 1.12;
}

h4, .h4{
  font-size: var(--fs-h4);
  line-height: 1.2;
}

h5, .h5{
  font-size: var(--fs-h5);
  line-height: 1.3;
}

h6, .h6{
  font-size: var(--fs-h6);
  line-height: 1.4;
}
/* ========================================
   BODY VARIÁNSOK
   ======================================== */
.body-l{ font-size: var(--fs-body-l); line-height: 1.55; color: var(--color-text); }
.body-s{ font-size: var(--fs-body-s); line-height: 1.5; color: var(--color-text); }
.body-sm{ font-size: var(--fs-body-sm); line-height: 1.5; color: var(--color-text); }

/* ========================================
FONT SIZE UTILITIES

A class magára az elemre és a benne lévő
h1-h6, p és span elemekre is érvényes.
======================================== */


/* =========================================================
   HEADING
   ========================================================= */

.fs-h1,
.fs-h1 h1,
.fs-h1 h2,
.fs-h1 h3,
.fs-h1 h4,
.fs-h1 h5,
.fs-h1 h6,
.fs-h1 p,
.fs-h1 span {
	font-size: var(--fs-h1) !important;
}


.fs-h1-sec,
.fs-h1-sec h1,
.fs-h1-sec h2,
.fs-h1-sec h3,
.fs-h1-sec h4,
.fs-h1-sec h5,
.fs-h1-sec h6,
.fs-h1-sec p,
.fs-h1-sec span {
	font-size: var(--fs-h1-sec) !important;
}


.fs-h2,
.fs-h2 h1,
.fs-h2 h2,
.fs-h2 h3,
.fs-h2 h4,
.fs-h2 h5,
.fs-h2 h6,
.fs-h2 p,
.fs-h2 span {
	font-size: var(--fs-h2) !important;
}


.fs-h3,
.fs-h3 h1,
.fs-h3 h2,
.fs-h3 h3,
.fs-h3 h4,
.fs-h3 h5,
.fs-h3 h6,
.fs-h3 p,
.fs-h3 span {
	font-size: var(--fs-h3) !important;
}


.fs-h4,
.fs-h4 h1,
.fs-h4 h2,
.fs-h4 h3,
.fs-h4 h4,
.fs-h4 h5,
.fs-h4 h6,
.fs-h4 p,
.fs-h4 span {
	font-size: var(--fs-h4) !important;
}


.fs-h5,
.fs-h5 h1,
.fs-h5 h2,
.fs-h5 h3,
.fs-h5 h4,
.fs-h5 h5,
.fs-h5 h6,
.fs-h5 p,
.fs-h5 span {
	font-size: var(--fs-h5) !important;
}


.fs-h6,
.fs-h6 h1,
.fs-h6 h2,
.fs-h6 h3,
.fs-h6 h4,
.fs-h6 h5,
.fs-h6 h6,
.fs-h6 p,
.fs-h6 span {
	font-size: var(--fs-h6) !important;
}


/* =========================================================
   BODY
   ========================================================= */

.fs-body,
.fs-body h1,
.fs-body h2,
.fs-body h3,
.fs-body h4,
.fs-body h5,
.fs-body h6,
.fs-body p,
.fs-body span {
	font-size: var(--fs-body) !important;
}


.fs-body-l,
.fs-body-l h1,
.fs-body-l h2,
.fs-body-l h3,
.fs-body-l h4,
.fs-body-l h5,
.fs-body-l h6,
.fs-body-l p,
.fs-body-l span {
	font-size: var(--fs-body-l) !important;
}


.fs-body-s,
.fs-body-s h1,
.fs-body-s h2,
.fs-body-s h3,
.fs-body-s h4,
.fs-body-s h5,
.fs-body-s h6,
.fs-body-s p,
.fs-body-s span {
	font-size: var(--fs-body-s) !important;
}


.fs-body-sm,
.fs-body-sm h1,
.fs-body-sm h2,
.fs-body-sm h3,
.fs-body-sm h4,
.fs-body-sm h5,
.fs-body-sm h6,
.fs-body-sm p,
.fs-body-sm span {
	font-size: var(--fs-body-sm) !important;
}

/* ========================================
   LINE HEIGHT UTILITIES

   Használat:
   lh-1
   lh-1-3
   lh-1-4
   lh-1-6
   lh-2
   ======================================== */

.lh-1,
.lh-1 :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	line-height: 1 !important;
}

.lh-1-3,
.lh-1-3 :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	line-height: 1.3 !important;
}

.lh-1-4,
.lh-1-4 :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	line-height: 1.4 !important;
}

.lh-1-6,
.lh-1-6 :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	line-height: 1.6 !important;
}

.lh-2,
.lh-2 :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	line-height: 2 !important;
}

/* ========================================
   TAGS — elsődleges színnel
   ======================================== */

/* Tag 1 — hero badge (pill, háttér + szegély + lekerekítés) */
.tag-1{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: 0.78rem;                          /* 14px - hero domináns */
  font-weight: 600;
  line-height: 1.3em;
  letter-spacing: 0.02em;
  color: var(--color-gold);
  background: var(--accent-weak);
  border: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);       /* 12px 24px */
  border-radius: 100px;
  margin-bottom: var(--space-5);
}

/* Tag 2 — eyebrow (címsor feletti kicsi cognac szöveg) */
.tag-2{
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.7rem;                         /* 13px */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: var(--space-3);
}

/* Tag 2 — alert */


.alert-tag{
    border: 1px solid var(--color-border);
    padding: 5px 20px 5px 15px;
    border-radius: 100px;
}

.alert-tag:before{
    content: '•';
    color: var(--color-green);
    font-size: 20px;
    margin-top: -2px;
    line-height: 1;
}

.alert-tag{
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ========================================
   GOMBOK
   ======================================== */

/* === ALAP GOMB === */
/* Minden Elementor Button automatikusan ezt kapja */
.elementor-button{
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;                              /* 16px */
  line-height: 1.3em;
  padding: 16px 30px !important;
  border: 0;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-white);
  background: var(--gradient-cta);
  transition: 0.3s !important;
}

.elementor-button:hover,
.elementor-button:focus{
  transform: translateY(-2px);
  color: var(--color-white);
	box-shadow: 0 0 0 1px rgba(207,155,92,.20),0 14px 40px -4px rgba(190,124,73,.30);
}

.elementor-button:active{
  transform: translateY(1px) scale(0.99);
}

.elementor-button:focus-visible{
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* === BTN-SM (menüben) === */
/* Szülő class: .btn-sm — felülírja a méreteket */
.btn-sm .elementor-button{
  font-size: 0.875rem;                          /* 14px */
  padding: var(--space-3) var(--space-5) !important;       /* 12px 24px */
  gap: var(--space-2);
}

/* === BTN-LG (hero, főoldali záró CTA) === */
.btn-lg .elementor-button{
  font-size: 1.125rem;                          /* 18px */
  padding: var(--space-5) var(--space-8) !important;       /* 24px 48px */
  gap: var(--space-3);
}

/* === BTN-LG (hero, főoldali záró CTA) === */
.button-full .elementor-button, .button-full span.elementor-button-content-wrapper{
    width: 100%;
}

/* === Arrow right gomb === */
.btn-arrow-right span.elementor-button-text::after {
    content: '→';
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

/* Hoverre a nyíl menjen jobbra 5px-et */
.btn-arrow-right .elementor-button:hover span.elementor-button-text::after {
    transform: translateX(5px);
}

/* === MÁSODLAGOS GOMB === */

.btn-secondary .elementor-button {
  position: relative;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  box-shadow: none;
}

/* Átmenetes szegély */
.btn-secondary .elementor-button::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: var(--gradient-cta);
  pointer-events: none;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;

  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}

/* 80%-os fehér szöveg */
.btn-secondary .elementor-button-text {
  color: rgba(255, 255, 255, 0.8);
  -webkit-text-fill-color: rgba(255, 255, 255, 0.8);
}

/* Ikon */
.btn-secondary .elementor-button-icon {
  color: rgba(255, 255, 255, 0.8);
}

/* Hover */
.btn-secondary .elementor-button:hover,
.btn-secondary .elementor-button:focus {
  color: var(--color-white);
  background: rgba(190, 124, 73, 0.08);
}

/* Hoverkor a szöveg és ikon legyen teljesen fehér */
.btn-secondary .elementor-button:hover .elementor-button-text,
.btn-secondary .elementor-button:focus .elementor-button-text {
  color: var(--color-white);
  -webkit-text-fill-color: var(--color-white);
}

.btn-secondary .elementor-button:hover .elementor-button-icon,
.btn-secondary .elementor-button:focus .elementor-button-icon {
  color: var(--color-white);
}

/* Linkelések színei */

a{
    color: var(--color-primary);
    transition: 0.3s !important;
}

a:hover{
    color: var(--color-text);
}

.link-rev a{
    color: var(--color-text);
    transition: 0.3s !important;
}

.link-rev a:hover{
    color: var(--color-primary);
}

/* ========================================
   SZÍN-KIEMELÉSEK
   ======================================== */
/* Címsoron belüli gradient szó/szakasz */
.grad-text{
  background: var(--gradient-cta);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline;
}

/* Szövegen belüli cognac kiemelés */
.highlight{
  color: var(--color-gold);
  font-weight: 600;
}

.highlight-white{F
  color: var(--color-white);
  font-weight: 600;
}

/* ========================================
   1) Idézetes / szöveges kiemelés
   Használat: class="highlight-quote"
   ======================================== */

.highlight-quote {
    position: relative;
    padding-inline: clamp(1.25rem, 0.5rem + 0.5vw, 1rem);
    font-style: italic;
    border-inline-start: 2px solid var(--color-primary);
}

.highlight-quote strong,
.highlight-quote b {
    color: var(--color-white);
    font-style: normal;
    font-weight: 800;
}


/* ========================================
   2) Címsor aláhúzás / marker kiemelés
   Használat: class="highlight-mark"
   ======================================== */

.highlight-mark {
    position: relative;
    display: inline;
    padding-inline: 0.04em;

    background-image: linear-gradient(
        90deg,
        var(--color-primary),
        var(--color-gold)
    );
    background-repeat: no-repeat;
    background-size: 100% 0.38em;
    background-position: 0 92%;

    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

/*HR elválasztó*/
hr{
    margin: 20px 0px 20px 0px !important;
    
}

/* ========================================
   SZÖVEG IGAZÍTÁSOK
   ======================================== */

.text-start,
.text-start :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	text-align: start;
}

.text-center,
.text-center :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	text-align: center;
}

.text-end,
.text-end :where(p, span, h1, h2, h3, h4, h5, h6, li) {
	text-align: end;
}

/* === SZEKCIÓK === */
html,body{
	overflow-x: hidden !important;
}

.e-con{
	display: flex;
	flex-direction: column;
	gap: 24px;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: nowrap;
}
.e-parent{
	padding-block: clamp(4rem, 2rem + 6vw, 7.5rem) !important; 
	padding-inline: 1.25rem !important; 	
}
.e-con.e-flex>.e-con-inner{
	max-width: min(100%,1260px) !important;
}

.e-con.full-width > .e-con-inner {
    width: 100% !important;
    max-width: none !important;
}

.base-con.e-con{
	padding-block: 0px !important; 
	padding-inline: 1.25rem !important; 
}

/*  Display  */
.flex, .flex .e-con-inner{
	display: flex !important;
}
.none, .none .e-con-inner{
	display: none !important;
}

/*  Align  */
.items-start .e-con-inner, .items-start{
	align-items:flex-start !important;
}
.items-center .e-con-inner, .items-center{
	align-items:center !important;
}
.items-end .e-con-inner, .items-end{
	align-items:flex-end !important;
}
.items-stretch .e-con-inner, .items-stretch{
	align-items:stretch !important;
}

/* Align-self*/
.self-start{
	align-self: flex-start !important;
}
.self-center{
	align-self: center !important;
}
.self-end{
	align-self: flex-end !important;
}


/* Justify */
.justify-start .e-con-inner, .justify-start{
	justify-content:flex-start !important;
}
.justify-center .e-con-inner, .justify-center{
	justify-content:center !important;
}
.justify-end .e-con-inner, .justify-end{
	justify-content:flex-end !important;
}
.justify-between .e-con-inner, .justify-between{
	justify-content:space-between !important;
}
.justify-around .e-con-inner, .justify-around{
	justify-content:space-around !important;
}

/*Flex-direction*/
.row .e-con-inner, .row{
  flex-direction: row !important;
}

.row-reverse .e-con-inner, .row-reverse{
  flex-direction: row-reverse !important;
}

@media (max-width: 767px){
  .column-mobile .e-con-inner, .column-mobile{
    flex-direction: column !important;
  }
}
.column-reverse .e-con-inner, .column-reverse {
	flex-direction: row !important;
}

/* Gapek */

.no-gap .e-con-inner,
.no-gap {
	gap: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
}

.gap-5 .e-con-inner,
.gap-5 {
	gap: 5px !important;
}

.gap-10 .e-con-inner,
.gap-10 {
	gap: 10px !important;
}

.gap-15 .e-con-inner,
.gap-15 {
	gap: 15px !important;
}

.gap-20 .e-con-inner,
.gap-20 {
	gap: 20px !important;
}

.gap-40 .e-con-inner,
.gap-40 {
	gap: 40px !important;
}

.gap-80 .e-con-inner,
.gap-80 {
	gap: 80px !important;
}

.gap-2-24 .e-con-inner,
.gap-2-24 {
	column-gap: 2% !important;
	row-gap: 24px !important;
}

.gap-3-24 .e-con-inner,
.gap-3-24 {
	column-gap: 3% !important;
	row-gap: 24px !important;
}

.gap-2-40 .e-con-inner,
.gap-2-40 {
	column-gap: 2% !important;
	row-gap: 40px !important;
}

.gap-3-40 .e-con-inner,
.gap-3-40 {
	column-gap: 3% !important;
	row-gap: 40px !important;
}


/* Laptop */
@media (max-width: 1366px) {
	.gap-80 .e-con-inner,
	.gap-40 .e-con-inner,
	.gap-2-40 .e-con-inner,
	.gap-3-40 .e-con-inner,
	.gap-80,
	.gap-40,
	.gap-2-40,
	.gap-3-40 {
		gap: 44px !important;
		row-gap: 40px !important;
		column-gap: 40px !important;
	}
}


/* Tablet */
@media (max-width: 1024px) {
	.gap-80 .e-con-inner,
	.gap-40 .e-con-inner,
	.gap-2-40 .e-con-inner,
	.gap-3-40 .e-con-inner,
	.gap-80,
	.gap-40,
	.gap-2-40,
	.gap-3-40 {
		gap: 24px !important;
		row-gap: 24px !important;
		column-gap: 24px !important;
	}
}

/*Tartalom szélességek*/
.content-w-1920.e-con.e-flex>.e-con-inner {
    max-width: min(100%, 1920px) !important;
}

/*Wrap*/
.wrap .e-con-inner, .wrap{
	flex-wrap: wrap !important;
}
@media(max-width:767px){
.no-mobile-wrap .e-con-inner, .no-mobile-wrap{
	flex-wrap: nowrap !important;
}
}

/* ========================================
   Szélességek
   Használat:
   width-10, width-17-6, width-18-4, width-20, width-22-75,
   width-23-5, width-25, width-30, width-32, width-33-1, width-33-3,
   width-40, width-48-5, width-49, width-50, width-60,
   width-70, width-80, width-90, width-100, width-fit

   Mobilon automatikusan 100%
   ======================================== */

:where(
  .width-10,
  .width-17-6,
  .width-18-4,
  .width-20,
  .width-22-75,
  .width-23-5,
  .width-25,
  .width-30,
  .width-32,
  .width-33-1,
  .width-33-3,
  .width-40,
  .width-48-5,
  .width-49,
  .width-50,
  .width-60,
  .width-70,
  .width-80,
  .width-90,
  .width-100,
  .width-fit
){
  width: var(--width);
  max-width: 100%;
  flex-basis: var(--width);
}

.width-10{ --width: 10%; }
.width-17-6{ --width: 17.6%; }
.width-18-4{ --width: 18.4%; }
.width-20{ --width: 20%; }
.width-22-75{ --width: 22.75%; }
.width-23-5{ --width: 23.5%; }
.width-25{ --width: 25%; }
.width-30{ --width: 30%; }
.width-32{ --width: 32%; }
.width-33-1{ --width: 33.1%; }
.width-33-3{ --width: 33.3%; }
.width-40{ --width: 40%; }
.width-48-5{ --width: 48.5%; }
.width-49{ --width: 49%; }
.width-50{ --width: 50%; }
.width-60{ --width: 60%; }
.width-70{ --width: 70%; }
.width-80{ --width: 80%; }
.width-90{ --width: 90%; }
.width-100{ --width: 100%; }
.width-fit{ --width: fit-content; }

@media (max-width: 767px){
  :is(
    .width-10,
    .width-17-6,
    .width-18-4,
    .width-20,
    .width-22-75,
    .width-23-5,
    .width-25,
    .width-30,
    .width-32,
    .width-33-1,
    .width-33-3,
    .width-40,
    .width-48-5,
    .width-49,
    .width-50,
    .width-60,
    .width-70,
    .width-80,
    .width-90,
    .width-100,
    .width-fit
  ){
    --width: 100%;
    width: 100%;
    flex-basis: 100%;
  }
}

/* ========================================
SPACING UTILITIES
Margók és paddingek

Méretek:
0px, 5px, 10px, 20px, 32px, 40px, 48px, 60px, 64px,
80px, 100px, 120px, 140px, 160px, 180px,
200px, 220px, 240px

MARGIN:
m-20
mt-20
mr-20
mb-20
ml-20

PADDING:
p-20
pt-20
pr-20
pb-20
pl-20

NULLÁZÁS:
m-0
mt-0
mr-0
mb-0
ml-0

p-0
pt-0
pr-0
pb-0
pl-0

Több class kombinálható:
p-40 pt-80
m-20 mb-0
======================================== */


/* =========================================================
   MARGIN – ALL SIDES
   ========================================================= */

:is(
	.m-0,
	.m-5,
	.m-10,
	.m-20,
	.m-32,
	.m-40,
	.m-48,
	.m-60,
	.m-64,
	.m-80,
	.m-100,
	.m-120,
	.m-140,
	.m-160,
	.m-180,
	.m-200,
	.m-220,
	.m-240
) {
	margin: var(--m) !important;
}

.m-0   { --m: 0; }
.m-5   { --m: 5px; }
.m-10  { --m: 10px; }
.m-20  { --m: 20px; }
.m-32  { --m: 32px; }
.m-40  { --m: 40px; }
.m-48  { --m: 48px; }
.m-60  { --m: 60px; }
.m-64  { --m: 64px; }
.m-80  { --m: 80px; }
.m-100 { --m: 100px; }
.m-120 { --m: 120px; }
.m-140 { --m: 140px; }
.m-160 { --m: 160px; }
.m-180 { --m: 180px; }
.m-200 { --m: 200px; }
.m-220 { --m: 220px; }
.m-240 { --m: 240px; }


/* =========================================================
   MARGIN TOP
   ========================================================= */

:is(
	.mt-0,
	.mt-5,
	.mt-10,
	.mt-20,
	.mt-32,
	.mt-40,
	.mt-48,
	.mt-60,
	.mt-64,
	.mt-80,
	.mt-100,
	.mt-120,
	.mt-140,
	.mt-160,
	.mt-180,
	.mt-200,
	.mt-220,
	.mt-240
) {
	margin-top: var(--mt) !important;
}

.mt-0   { --mt: 0; }
.mt-5   { --mt: 5px; }
.mt-10  { --mt: 10px; }
.mt-20  { --mt: 20px; }
.mt-32  { --mt: 32px; }
.mt-40  { --mt: 40px; }
.mt-48  { --mt: 48px; }
.mt-60  { --mt: 60px; }
.mt-64  { --mt: 64px; }
.mt-80  { --mt: 80px; }
.mt-100 { --mt: 100px; }
.mt-120 { --mt: 120px; }
.mt-140 { --mt: 140px; }
.mt-160 { --mt: 160px; }
.mt-180 { --mt: 180px; }
.mt-200 { --mt: 200px; }
.mt-220 { --mt: 220px; }
.mt-240 { --mt: 240px; }


/* =========================================================
   MARGIN RIGHT
   ========================================================= */

:is(
	.mr-0,
	.mr-5,
	.mr-10,
	.mr-20,
	.mr-32,
	.mr-40,
	.mr-48,
	.mr-60,
	.mr-64,
	.mr-80,
	.mr-100,
	.mr-120,
	.mr-140,
	.mr-160,
	.mr-180,
	.mr-200,
	.mr-220,
	.mr-240
) {
	margin-right: var(--mr) !important;
}

.mr-0   { --mr: 0; }
.mr-5   { --mr: 5px; }
.mr-10  { --mr: 10px; }
.mr-20  { --mr: 20px; }
.mr-32  { --mr: 32px; }
.mr-40  { --mr: 40px; }
.mr-48  { --mr: 48px; }
.mr-60  { --mr: 60px; }
.mr-64  { --mr: 64px; }
.mr-80  { --mr: 80px; }
.mr-100 { --mr: 100px; }
.mr-120 { --mr: 120px; }
.mr-140 { --mr: 140px; }
.mr-160 { --mr: 160px; }
.mr-180 { --mr: 180px; }
.mr-200 { --mr: 200px; }
.mr-220 { --mr: 220px; }
.mr-240 { --mr: 240px; }


/* =========================================================
   MARGIN BOTTOM
   ========================================================= */

:is(
	.mb-0,
	.mb-5,
	.mb-10,
	.mb-20,
	.mb-32,
	.mb-40,
	.mb-48,
	.mb-60,
	.mb-64,
	.mb-80,
	.mb-100,
	.mb-120,
	.mb-140,
	.mb-160,
	.mb-180,
	.mb-200,
	.mb-220,
	.mb-240
) {
	margin-bottom: var(--mb) !important;
}

.mb-0   { --mb: 0; }
.mb-5   { --mb: 5px; }
.mb-10  { --mb: 10px; }
.mb-20  { --mb: 20px; }
.mb-32  { --mb: 32px; }
.mb-40  { --mb: 40px; }
.mb-48  { --mb: 48px; }
.mb-60  { --mb: 60px; }
.mb-64  { --mb: 64px; }
.mb-80  { --mb: 80px; }
.mb-100 { --mb: 100px; }
.mb-120 { --mb: 120px; }
.mb-140 { --mb: 140px; }
.mb-160 { --mb: 160px; }
.mb-180 { --mb: 180px; }
.mb-200 { --mb: 200px; }
.mb-220 { --mb: 220px; }
.mb-240 { --mb: 240px; }


/* =========================================================
   MARGIN LEFT
   ========================================================= */

:is(
	.ml-0,
	.ml-5,
	.ml-10,
	.ml-20,
	.ml-32,
	.ml-40,
	.ml-48,
	.ml-60,
	.ml-64,
	.ml-80,
	.ml-100,
	.ml-120,
	.ml-140,
	.ml-160,
	.ml-180,
	.ml-200,
	.ml-220,
	.ml-240
) {
	margin-left: var(--ml) !important;
}

.ml-0   { --ml: 0; }
.ml-5   { --ml: 5px; }
.ml-10  { --ml: 10px; }
.ml-20  { --ml: 20px; }
.ml-32  { --ml: 32px; }
.ml-40  { --ml: 40px; }
.ml-48  { --ml: 48px; }
.ml-60  { --ml: 60px; }
.ml-64  { --ml: 64px; }
.ml-80  { --ml: 80px; }
.ml-100 { --ml: 100px; }
.ml-120 { --ml: 120px; }
.ml-140 { --ml: 140px; }
.ml-160 { --ml: 160px; }
.ml-180 { --ml: 180px; }
.ml-200 { --ml: 200px; }
.ml-220 { --ml: 220px; }
.ml-240 { --ml: 240px; }


/* =========================================================
   PADDING – ALL SIDES
   ========================================================= */

:is(
	.p-0,
	.p-5,
	.p-10,
	.p-20,
	.p-32,
	.p-40,
	.p-48,
	.p-60,
	.p-64,
	.p-80,
	.p-100,
	.p-120,
	.p-140,
	.p-160,
	.p-180,
	.p-200,
	.p-220,
	.p-240
) {
	padding: var(--p) !important;
}

.p-0   { --p: 0; }
.p-5   { --p: 5px; }
.p-10  { --p: 10px; }
.p-20  { --p: 20px; }
.p-32  { --p: 32px; }
.p-40  { --p: 40px; }
.p-48  { --p: 48px; }
.p-60  { --p: 60px; }
.p-64  { --p: 64px; }
.p-80  { --p: 80px; }
.p-100 { --p: 100px; }
.p-120 { --p: 120px; }
.p-140 { --p: 140px; }
.p-160 { --p: 160px; }
.p-180 { --p: 180px; }
.p-200 { --p: 200px; }
.p-220 { --p: 220px; }
.p-240 { --p: 240px; }


/* =========================================================
   PADDING TOP
   ========================================================= */

:is(
	.pt-0,
	.pt-5,
	.pt-10,
	.pt-20,
	.pt-32,
	.pt-40,
	.pt-48,
	.pt-60,
	.pt-64,
	.pt-80,
	.pt-100,
	.pt-120,
	.pt-140,
	.pt-160,
	.pt-180,
	.pt-200,
	.pt-220,
	.pt-240
) {
	padding-top: var(--pt) !important;
}

.pt-0   { --pt: 0; }
.pt-5   { --pt: 5px; }
.pt-10  { --pt: 10px; }
.pt-20  { --pt: 20px; }
.pt-32  { --pt: 32px; }
.pt-40  { --pt: 40px; }
.pt-48  { --pt: 48px; }
.pt-60  { --pt: 60px; }
.pt-64  { --pt: 64px; }
.pt-80  { --pt: 80px; }
.pt-100 { --pt: 100px; }
.pt-120 { --pt: 120px; }
.pt-140 { --pt: 140px; }
.pt-160 { --pt: 160px; }
.pt-180 { --pt: 180px; }
.pt-200 { --pt: 200px; }
.pt-220 { --pt: 220px; }
.pt-240 { --pt: 240px; }


/* =========================================================
   PADDING RIGHT
   ========================================================= */

:is(
	.pr-0,
	.pr-5,
	.pr-10,
	.pr-20,
	.pr-32,
	.pr-40,
	.pr-48,
	.pr-60,
	.pr-64,
	.pr-80,
	.pr-100,
	.pr-120,
	.pr-140,
	.pr-160,
	.pr-180,
	.pr-200,
	.pr-220,
	.pr-240
) {
	padding-right: var(--pr) !important;
}

.pr-0   { --pr: 0; }
.pr-5   { --pr: 5px; }
.pr-10  { --pr: 10px; }
.pr-20  { --pr: 20px; }
.pr-32  { --pr: 32px; }
.pr-40  { --pr: 40px; }
.pr-48  { --pr: 48px; }
.pr-60  { --pr: 60px; }
.pr-64  { --pr: 64px; }
.pr-80  { --pr: 80px; }
.pr-100 { --pr: 100px; }
.pr-120 { --pr: 120px; }
.pr-140 { --pr: 140px; }
.pr-160 { --pr: 160px; }
.pr-180 { --pr: 180px; }
.pr-200 { --pr: 200px; }
.pr-220 { --pr: 220px; }
.pr-240 { --pr: 240px; }


/* =========================================================
   PADDING BOTTOM
   ========================================================= */

:is(
	.pb-0,
	.pb-5,
	.pb-10,
	.pb-20,
	.pb-32,
	.pb-40,
	.pb-48,
	.pb-60,
	.pb-64,
	.pb-80,
	.pb-100,
	.pb-120,
	.pb-140,
	.pb-160,
	.pb-180,
	.pb-200,
	.pb-220,
	.pb-240
) {
	padding-bottom: var(--pb) !important;
}

.pb-0   { --pb: 0; }
.pb-5   { --pb: 5px; }
.pb-10  { --pb: 10px; }
.pb-20  { --pb: 20px; }
.pb-32  { --pb: 32px; }
.pb-40  { --pb: 40px; }
.pb-48  { --pb: 48px; }
.pb-60  { --pb: 60px; }
.pb-64  { --pb: 64px; }
.pb-80  { --pb: 80px; }
.pb-100 { --pb: 100px; }
.pb-120 { --pb: 120px; }
.pb-140 { --pb: 140px; }
.pb-160 { --pb: 160px; }
.pb-180 { --pb: 180px; }
.pb-200 { --pb: 200px; }
.pb-220 { --pb: 220px; }
.pb-240 { --pb: 240px; }


/* =========================================================
   PADDING LEFT
   ========================================================= */

:is(
	.pl-0,
	.pl-5,
	.pl-10,
	.pl-20,
	.pl-32,
	.pl-40,
	.pl-48,
	.pl-60,
	.pl-64,
	.pl-80,
	.pl-100,
	.pl-120,
	.pl-140,
	.pl-160,
	.pl-180,
	.pl-200,
	.pl-220,
	.pl-240
) {
	padding-left: var(--pl) !important;
}

.pl-0   { --pl: 0; }
.pl-5   { --pl: 5px; }
.pl-10  { --pl: 10px; }
.pl-20  { --pl: 20px; }
.pl-32  { --pl: 32px; }
.pl-40  { --pl: 40px; }
.pl-48  { --pl: 48px; }
.pl-60  { --pl: 60px; }
.pl-64  { --pl: 64px; }
.pl-80  { --pl: 80px; }
.pl-100 { --pl: 100px; }
.pl-120 { --pl: 120px; }
.pl-140 { --pl: 140px; }
.pl-160 { --pl: 160px; }
.pl-180 { --pl: 180px; }
.pl-200 { --pl: 200px; }
.pl-220 { --pl: 220px; }
.pl-240 { --pl: 240px; }


/* =========================================================
   LEGACY NO-PADDING ALIASES
   ========================================================= */

.no-tp {
	padding-top: 0 !important;
}

.no-rp {
	padding-right: 0 !important;
}

.no-bp {
	padding-bottom: 0 !important;
}

.no-lp {
	padding-left: 0 !important;
}

.no-p {
	padding: 0 !important;
}


/* =========================================================
   LEGACY NO-MARGIN ALIASES
   ========================================================= */

.no-tm {
	margin-top: 0 !important;
}

.no-rm {
	margin-right: 0 !important;
}

.no-bm {
	margin-bottom: 0 !important;
}

.no-lm {
	margin-left: 0 !important;
}

.no-m {
	margin: 0 !important;
}


/* ========================================
   Border, szegélyek
   ======================================== */

/* Border-box*/
.border-box{
    border: 1px solid var(--color-border);
    border-radius: 20px;
}




/* ========================================
BORDER UTILITIES

FORMÁTUM:

Teljes border:
border-{style}-{width}

Oldalanként:
border-{side}-{style}-{width}


SIDE:
t   = top
r   = right
b   = bottom
l   = left

STYLE:
s   = solid
d   = dashed
dot = dotted

WIDTH:
1 = 1px
2 = 2px
3 = 3px


PÉLDÁK:

border-s-1
border-d-2
border-dot-3

border-b-s-1
border-t-d-2
border-l-dot-3


SZÍNEK:

border-border
border-primary


INNER:

inner-border-s-1
inner-border-b-s-1
inner-border-t-d-2
inner-border-l-dot-3

inner-border-border
inner-border-primary
======================================== */


/* =========================================================
   BORDER – minden oldal
   ========================================================= */

/* Solid */

.border-s-1 {
	border: 1px solid currentColor !important;
}

.border-s-2 {
	border: 2px solid currentColor !important;
}

.border-s-3 {
	border: 3px solid currentColor !important;
}


/* Dashed */

.border-d-1 {
	border: 1px dashed currentColor !important;
}

.border-d-2 {
	border: 2px dashed currentColor !important;
}

.border-d-3 {
	border: 3px dashed currentColor !important;
}


/* Dotted */

.border-dot-1 {
	border: 1px dotted currentColor !important;
}

.border-dot-2 {
	border: 2px dotted currentColor !important;
}

.border-dot-3 {
	border: 3px dotted currentColor !important;
}


/* =========================================================
   BORDER TOP
   ========================================================= */

/* Solid */

.border-t-s-1 {
	border-top: 1px solid currentColor !important;
}

.border-t-s-2 {
	border-top: 2px solid currentColor !important;
}

.border-t-s-3 {
	border-top: 3px solid currentColor !important;
}


/* Dashed */

.border-t-d-1 {
	border-top: 1px dashed currentColor !important;
}

.border-t-d-2 {
	border-top: 2px dashed currentColor !important;
}

.border-t-d-3 {
	border-top: 3px dashed currentColor !important;
}


/* Dotted */

.border-t-dot-1 {
	border-top: 1px dotted currentColor !important;
}

.border-t-dot-2 {
	border-top: 2px dotted currentColor !important;
}

.border-t-dot-3 {
	border-top: 3px dotted currentColor !important;
}


/* =========================================================
   BORDER RIGHT
   ========================================================= */

/* Solid */

.border-r-s-1 {
	border-right: 1px solid currentColor !important;
}

.border-r-s-2 {
	border-right: 2px solid currentColor !important;
}

.border-r-s-3 {
	border-right: 3px solid currentColor !important;
}


/* Dashed */

.border-r-d-1 {
	border-right: 1px dashed currentColor !important;
}

.border-r-d-2 {
	border-right: 2px dashed currentColor !important;
}

.border-r-d-3 {
	border-right: 3px dashed currentColor !important;
}


/* Dotted */

.border-r-dot-1 {
	border-right: 1px dotted currentColor !important;
}

.border-r-dot-2 {
	border-right: 2px dotted currentColor !important;
}

.border-r-dot-3 {
	border-right: 3px dotted currentColor !important;
}


/* =========================================================
   BORDER BOTTOM
   ========================================================= */

/* Solid */

.border-b-s-1 {
	border-bottom: 1px solid currentColor !important;
}

.border-b-s-2 {
	border-bottom: 2px solid currentColor !important;
}

.border-b-s-3 {
	border-bottom: 3px solid currentColor !important;
}


/* Dashed */

.border-b-d-1 {
	border-bottom: 1px dashed currentColor !important;
}

.border-b-d-2 {
	border-bottom: 2px dashed currentColor !important;
}

.border-b-d-3 {
	border-bottom: 3px dashed currentColor !important;
}


/* Dotted */

.border-b-dot-1 {
	border-bottom: 1px dotted currentColor !important;
}

.border-b-dot-2 {
	border-bottom: 2px dotted currentColor !important;
}

.border-b-dot-3 {
	border-bottom: 3px dotted currentColor !important;
}


/* =========================================================
   BORDER LEFT
   ========================================================= */

/* Solid */

.border-l-s-1 {
	border-left: 1px solid currentColor !important;
}

.border-l-s-2 {
	border-left: 2px solid currentColor !important;
}

.border-l-s-3 {
	border-left: 3px solid currentColor !important;
}


/* Dashed */

.border-l-d-1 {
	border-left: 1px dashed currentColor !important;
}

.border-l-d-2 {
	border-left: 2px dashed currentColor !important;
}

.border-l-d-3 {
	border-left: 3px dashed currentColor !important;
}


/* Dotted */

.border-l-dot-1 {
	border-left: 1px dotted currentColor !important;
}

.border-l-dot-2 {
	border-left: 2px dotted currentColor !important;
}

.border-l-dot-3 {
	border-left: 3px dotted currentColor !important;
}


/* =========================================================
   BORDER COLORS
   ========================================================= */

.border-border {
	border-color: var(--color-border) !important;
}

.border-primary {
	border-color: var(--color-primary) !important;
}

.border-text {
	border-color: var(--color-text) !important;
}


/* =========================================================
   INNER BORDER – minden oldal
   ========================================================= */

/* Solid */

.inner-border-s-1 .e-con-inner {
	border: 1px solid currentColor !important;
}

.inner-border-s-2 .e-con-inner {
	border: 2px solid currentColor !important;
}

.inner-border-s-3 .e-con-inner {
	border: 3px solid currentColor !important;
}


/* Dashed */

.inner-border-d-1 .e-con-inner {
	border: 1px dashed currentColor !important;
}

.inner-border-d-2 .e-con-inner {
	border: 2px dashed currentColor !important;
}

.inner-border-d-3 .e-con-inner {
	border: 3px dashed currentColor !important;
}


/* Dotted */

.inner-border-dot-1 .e-con-inner {
	border: 1px dotted currentColor !important;
}

.inner-border-dot-2 .e-con-inner {
	border: 2px dotted currentColor !important;
}

.inner-border-dot-3 .e-con-inner {
	border: 3px dotted currentColor !important;
}


/* =========================================================
   INNER BORDER TOP
   ========================================================= */

.inner-border-t-s-1 .e-con-inner {
	border-top: 1px solid currentColor !important;
}

.inner-border-t-s-2 .e-con-inner {
	border-top: 2px solid currentColor !important;
}

.inner-border-t-s-3 .e-con-inner {
	border-top: 3px solid currentColor !important;
}

.inner-border-t-d-1 .e-con-inner {
	border-top: 1px dashed currentColor !important;
}

.inner-border-t-d-2 .e-con-inner {
	border-top: 2px dashed currentColor !important;
}

.inner-border-t-d-3 .e-con-inner {
	border-top: 3px dashed currentColor !important;
}

.inner-border-t-dot-1 .e-con-inner {
	border-top: 1px dotted currentColor !important;
}

.inner-border-t-dot-2 .e-con-inner {
	border-top: 2px dotted currentColor !important;
}

.inner-border-t-dot-3 .e-con-inner {
	border-top: 3px dotted currentColor !important;
}


/* =========================================================
   INNER BORDER RIGHT
   ========================================================= */

.inner-border-r-s-1 .e-con-inner {
	border-right: 1px solid currentColor !important;
}

.inner-border-r-s-2 .e-con-inner {
	border-right: 2px solid currentColor !important;
}

.inner-border-r-s-3 .e-con-inner {
	border-right: 3px solid currentColor !important;
}

.inner-border-r-d-1 .e-con-inner {
	border-right: 1px dashed currentColor !important;
}

.inner-border-r-d-2 .e-con-inner {
	border-right: 2px dashed currentColor !important;
}

.inner-border-r-d-3 .e-con-inner {
	border-right: 3px dashed currentColor !important;
}

.inner-border-r-dot-1 .e-con-inner {
	border-right: 1px dotted currentColor !important;
}

.inner-border-r-dot-2 .e-con-inner {
	border-right: 2px dotted currentColor !important;
}

.inner-border-r-dot-3 .e-con-inner {
	border-right: 3px dotted currentColor !important;
}


/* =========================================================
   INNER BORDER BOTTOM
   ========================================================= */

.inner-border-b-s-1 .e-con-inner {
	border-bottom: 1px solid currentColor !important;
}

.inner-border-b-s-2 .e-con-inner {
	border-bottom: 2px solid currentColor !important;
}

.inner-border-b-s-3 .e-con-inner {
	border-bottom: 3px solid currentColor !important;
}

.inner-border-b-d-1 .e-con-inner {
	border-bottom: 1px dashed currentColor !important;
}

.inner-border-b-d-2 .e-con-inner {
	border-bottom: 2px dashed currentColor !important;
}

.inner-border-b-d-3 .e-con-inner {
	border-bottom: 3px dashed currentColor !important;
}

.inner-border-b-dot-1 .e-con-inner {
	border-bottom: 1px dotted currentColor !important;
}

.inner-border-b-dot-2 .e-con-inner {
	border-bottom: 2px dotted currentColor !important;
}

.inner-border-b-dot-3 .e-con-inner {
	border-bottom: 3px dotted currentColor !important;
}


/* =========================================================
   INNER BORDER LEFT
   ========================================================= */

.inner-border-l-s-1 .e-con-inner {
	border-left: 1px solid currentColor !important;
}

.inner-border-l-s-2 .e-con-inner {
	border-left: 2px solid currentColor !important;
}

.inner-border-l-s-3 .e-con-inner {
	border-left: 3px solid currentColor !important;
}

.inner-border-l-d-1 .e-con-inner {
	border-left: 1px dashed currentColor !important;
}

.inner-border-l-d-2 .e-con-inner {
	border-left: 2px dashed currentColor !important;
}

.inner-border-l-d-3 .e-con-inner {
	border-left: 3px dashed currentColor !important;
}

.inner-border-l-dot-1 .e-con-inner {
	border-left: 1px dotted currentColor !important;
}

.inner-border-l-dot-2 .e-con-inner {
	border-left: 2px dotted currentColor !important;
}

.inner-border-l-dot-3 .e-con-inner {
	border-left: 3px dotted currentColor !important;
}


/* =========================================================
   INNER BORDER COLORS
   ========================================================= */

.inner-border-border .e-con-inner {
	border-color: var(--color-border) !important;
}

.inner-border-primary .e-con-inner {
	border-color: var(--color-primary) !important;
}

/* =========================================================
   BORDER RADIUS
   ========================================================= */

.radius-3 {
	border-radius: 3px !important;
}

.radius-5 {
	border-radius: 5px !important;
}

.radius-8 {
	border-radius: 8px !important;
}

.radius-10 {
	border-radius: 10px !important;
}

.radius-12 {
	border-radius: 12px !important;
}

.radius-16 {
	border-radius: 16px !important;
}

.radius-20 {
	border-radius: 20px !important;
}

.radius-32 {
	border-radius: 32px !important;
}

.radius-40 {
	border-radius: 40px !important;
}

.radius-60 {
	border-radius: 60px !important;
}

.radius-80 {
	border-radius: 80px !important;
}

.radius-100 {
	border-radius: 100px !important;
}


/* =========================================================
   INNER BORDER RADIUS
   ========================================================= */

.inner-radius-3 .e-con-inner {
	border-radius: 3px !important;
}

.inner-radius-5 .e-con-inner {
	border-radius: 5px !important;
}

.inner-radius-8 .e-con-inner {
	border-radius: 8px !important;
}

.inner-radius-10 .e-con-inner {
	border-radius: 10px !important;
}

.inner-radius-12 .e-con-inner {
	border-radius: 12px !important;
}

.inner-radius-16 .e-con-inner {
	border-radius: 16px !important;
}

.inner-radius-20 .e-con-inner {
	border-radius: 20px !important;
}

.inner-radius-32 .e-con-inner {
	border-radius: 32px !important;
}

.inner-radius-40 .e-con-inner {
	border-radius: 40px !important;
}

.inner-radius-60 .e-con-inner {
	border-radius: 60px !important;
}

.inner-radius-80 .e-con-inner {
	border-radius: 80px !important;
}

.inner-radius-100 .e-con-inner {
	border-radius: 100px !important;
}

/* =========================================================
   BORDER – eltávolítás
   ========================================================= */

/* Minden oldal */
.border-0 {
	border: 0 !important;
}

/* Oldalanként */
.border-t-0 {
	border-top: 0 !important;
}

.border-r-0 {
	border-right: 0 !important;
}

.border-b-0 {
	border-bottom: 0 !important;
}

.border-l-0 {
	border-left: 0 !important;
}


/* =========================================================
   INNER BORDER – eltávolítás
   ========================================================= */

/* Minden oldal */
.inner-border-0 .e-con-inner {
	border: 0 !important;
}

/* Oldalanként */
.inner-border-t-0 .e-con-inner {
	border-top: 0 !important;
}

.inner-border-r-0 .e-con-inner {
	border-right: 0 !important;
}

.inner-border-b-0 .e-con-inner {
	border-bottom: 0 !important;
}

.inner-border-l-0 .e-con-inner {
	border-left: 0 !important;
}


/* =========================================================
   BORDER RADIUS – eltávolítás
   ========================================================= */

/* Minden sarok */
.radius-0 {
	border-radius: 0 !important;
}

/* Sarkonként */
.radius-tl-0 {
	border-top-left-radius: 0 !important;
}

.radius-tr-0 {
	border-top-right-radius: 0 !important;
}

.radius-br-0 {
	border-bottom-right-radius: 0 !important;
}

.radius-bl-0 {
	border-bottom-left-radius: 0 !important;
}


/* =========================================================
   INNER BORDER RADIUS – eltávolítás
   ========================================================= */

/* Minden sarok */
.inner-radius-0 .e-con-inner {
	border-radius: 0 !important;
}

/* Sarkonként */
.inner-radius-tl-0 .e-con-inner {
	border-top-left-radius: 0 !important;
}

.inner-radius-tr-0 .e-con-inner {
	border-top-right-radius: 0 !important;
}

.inner-radius-br-0 .e-con-inner {
	border-bottom-right-radius: 0 !important;
}

.inner-radius-bl-0 .e-con-inner {
	border-bottom-left-radius: 0 !important;
}
/* ========================================
HEIGHT UTILITIES

PIXEL ÉRTÉKEK:
20, 40, 60, 80,
100, 120, 140, 160, 180,
200, 220, 240, 280,
300, 400, 500, 600, 700, 800, 900, 1000

FIX:
h-20 ... h-1000

MINIMUM:
min-h-20 ... min-h-1000

MAXIMUM:
max-h-20 ... max-h-1000


VIEWPORT HEIGHT:
10vh – 100vh, 10-esével

h-vh-10 ... h-vh-100
min-h-vh-10 ... min-h-vh-100
max-h-vh-10 ... max-h-vh-100


SZÁZALÉK:
10% – 100%, 10-esével

h-pct-10 ... h-pct-100
min-h-pct-10 ... min-h-pct-100
max-h-pct-10 ... max-h-pct-100


OVERFLOW:
overflow-auto
overflow-hidden
======================================== */


/* =========================================================
   FIX HEIGHT – PX
   ========================================================= */

.h-20 { height: 20px !important; }
.h-40 { height: 40px !important; }
.h-60 { height: 60px !important; }
.h-80 { height: 80px !important; }

.h-100 { height: 100px !important; }
.h-120 { height: 120px !important; }
.h-140 { height: 140px !important; }
.h-160 { height: 160px !important; }
.h-180 { height: 180px !important; }

.h-200 { height: 200px !important; }
.h-220 { height: 220px !important; }
.h-240 { height: 240px !important; }
.h-280 { height: 280px !important; }

.h-300 { height: 300px !important; }
.h-400 { height: 400px !important; }
.h-500 { height: 500px !important; }
.h-600 { height: 600px !important; }
.h-700 { height: 700px !important; }
.h-800 { height: 800px !important; }
.h-900 { height: 900px !important; }
.h-1000 { height: 1000px !important; }


/* =========================================================
   MIN HEIGHT – PX
   ========================================================= */

.min-h-20 { min-height: 20px !important; }
.min-h-40 { min-height: 40px !important; }
.min-h-60 { min-height: 60px !important; }
.min-h-80 { min-height: 80px !important; }

.min-h-100 { min-height: 100px !important; }
.min-h-120 { min-height: 120px !important; }
.min-h-140 { min-height: 140px !important; }
.min-h-160 { min-height: 160px !important; }
.min-h-180 { min-height: 180px !important; }

.min-h-200 { min-height: 200px !important; }
.min-h-220 { min-height: 220px !important; }
.min-h-240 { min-height: 240px !important; }
.min-h-280 { min-height: 280px !important; }

.min-h-300 { min-height: 300px !important; }
.min-h-400 { min-height: 400px !important; }
.min-h-500 { min-height: 500px !important; }
.min-h-600 { min-height: 600px !important; }
.min-h-700 { min-height: 700px !important; }
.min-h-800 { min-height: 800px !important; }
.min-h-900 { min-height: 900px !important; }
.min-h-1000 { min-height: 1000px !important; }


/* =========================================================
   MAX HEIGHT – PX
   ========================================================= */

.max-h-20 { max-height: 20px !important; }
.max-h-40 { max-height: 40px !important; }
.max-h-60 { max-height: 60px !important; }
.max-h-80 { max-height: 80px !important; }

.max-h-100 { max-height: 100px !important; }
.max-h-120 { max-height: 120px !important; }
.max-h-140 { max-height: 140px !important; }
.max-h-160 { max-height: 160px !important; }
.max-h-180 { max-height: 180px !important; }

.max-h-200 { max-height: 200px !important; }
.max-h-220 { max-height: 220px !important; }
.max-h-240 { max-height: 240px !important; }
.max-h-280 { max-height: 280px !important; }

.max-h-300 { max-height: 300px !important; }
.max-h-400 { max-height: 400px !important; }
.max-h-500 { max-height: 500px !important; }
.max-h-600 { max-height: 600px !important; }
.max-h-700 { max-height: 700px !important; }
.max-h-800 { max-height: 800px !important; }
.max-h-900 { max-height: 900px !important; }
.max-h-1000 { max-height: 1000px !important; }


/* =========================================================
   FIX HEIGHT – VH
   ========================================================= */

.h-vh-10 { height: 10vh !important; }
.h-vh-20 { height: 20vh !important; }
.h-vh-30 { height: 30vh !important; }
.h-vh-40 { height: 40vh !important; }
.h-vh-50 { height: 50vh !important; }
.h-vh-60 { height: 60vh !important; }
.h-vh-70 { height: 70vh !important; }
.h-vh-80 { height: 80vh !important; }
.h-vh-90 { height: 90vh !important; }
.h-vh-100 { height: 100vh !important; }


/* =========================================================
   MIN HEIGHT – VH
   ========================================================= */

.min-h-vh-10 { min-height: 10vh !important; }
.min-h-vh-20 { min-height: 20vh !important; }
.min-h-vh-30 { min-height: 30vh !important; }
.min-h-vh-40 { min-height: 40vh !important; }
.min-h-vh-50 { min-height: 50vh !important; }
.min-h-vh-60 { min-height: 60vh !important; }
.min-h-vh-70 { min-height: 70vh !important; }
.min-h-vh-80 { min-height: 80vh !important; }
.min-h-vh-90 { min-height: 90vh !important; }
.min-h-vh-100 { min-height: 100vh !important; }


/* =========================================================
   MAX HEIGHT – VH
   ========================================================= */

.max-h-vh-10 { max-height: 10vh !important; }
.max-h-vh-20 { max-height: 20vh !important; }
.max-h-vh-30 { max-height: 30vh !important; }
.max-h-vh-40 { max-height: 40vh !important; }
.max-h-vh-50 { max-height: 50vh !important; }
.max-h-vh-60 { max-height: 60vh !important; }
.max-h-vh-70 { max-height: 70vh !important; }
.max-h-vh-80 { max-height: 80vh !important; }
.max-h-vh-90 { max-height: 90vh !important; }
.max-h-vh-100 { max-height: 100vh !important; }


/* =========================================================
   FIX HEIGHT – %
   ========================================================= */

.h-pct-10 { height: 10% !important; }
.h-pct-20 { height: 20% !important; }
.h-pct-30 { height: 30% !important; }
.h-pct-40 { height: 40% !important; }
.h-pct-50 { height: 50% !important; }
.h-pct-60 { height: 60% !important; }
.h-pct-70 { height: 70% !important; }
.h-pct-80 { height: 80% !important; }
.h-pct-90 { height: 90% !important; }
.h-pct-100 { height: 100% !important; }


/* =========================================================
   MIN HEIGHT – %
   ========================================================= */

.min-h-pct-10 { min-height: 10% !important; }
.min-h-pct-20 { min-height: 20% !important; }
.min-h-pct-30 { min-height: 30% !important; }
.min-h-pct-40 { min-height: 40% !important; }
.min-h-pct-50 { min-height: 50% !important; }
.min-h-pct-60 { min-height: 60% !important; }
.min-h-pct-70 { min-height: 70% !important; }
.min-h-pct-80 { min-height: 80% !important; }
.min-h-pct-90 { min-height: 90% !important; }
.min-h-pct-100 { min-height: 100% !important; }


/* =========================================================
   MAX HEIGHT – %
   ========================================================= */

.max-h-pct-10 { max-height: 10% !important; }
.max-h-pct-20 { max-height: 20% !important; }
.max-h-pct-30 { max-height: 30% !important; }
.max-h-pct-40 { max-height: 40% !important; }
.max-h-pct-50 { max-height: 50% !important; }
.max-h-pct-60 { max-height: 60% !important; }
.max-h-pct-70 { max-height: 70% !important; }
.max-h-pct-80 { max-height: 80% !important; }
.max-h-pct-90 { max-height: 90% !important; }
.max-h-pct-100 { max-height: 100% !important; }


/* =========================================================
   OVERFLOW
   ========================================================= */

.overflow-auto {
	overflow: auto !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

/* Scrollbar elrejtése, görgetés megtartásával */

.scrollbar-hidden {
	-ms-overflow-style: none !important;
	scrollbar-width: none !important;
}

.scrollbar-hidden::-webkit-scrollbar {
	display: none !important;
}


/* ========================================
   Hero
   ======================================== */
/* a hero maga is legyen valós magasságú, ne csak a belső inner */
.hero{ 
	min-height: min(100svh, 1000px);
	background: linear-gradient(to right,var(--color-secondary) 0%,var(--color-secondary) 80%,rgb(from var(--color-primary) r g b / 0.4) 100%);
    overflow: hidden !important;
    position: relative !important;
	padding-top: 100px !important;
}
@media(max-width:767px){
  .hero{
  background: linear-gradient(to right,var(--color-secondary) 0%,var(--color-secondary) 50%,rgb(from var(--color-primary) r g b / 0.2) 100%);
}
}
.hero > .e-con-inner{justify-content: center !important;}

/* a splash-réteg magát a .hero-t tölti ki */
.hero > .bm-splash{
  position:absolute; inset:0; z-index:0; overflow:hidden;
  pointer-events:none; background:#000;
}
.hero > .bm-splash .splash-canvas{
  position:absolute; inset:0; width:100%; height:100%; display:block; opacity:.3;
}
/* a tartalom a splash fölé */
/* a data-splash elem legyen a pozicionáló kontextus és legyen valós magassága */
[data-splash]{ position:relative; overflow:hidden; }

/* a canvas MINDIG abszolút, bárhová is injektálja a script */
[data-splash] > canvas.splash-canvas{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  display:block;
  opacity:.3;
  z-index:0;
  pointer-events:none;
}

/* a hero tartalma a canvas fölé */
.hero > .e-con-inner{ position:relative; z-index:1; }



/* KOMPONENS - WEBGL szemcsés kép */

/* Önméretező: pozicionáló kontextus + valós magasság a portré arányából */
.bm-hero-fx{
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;         /* felső korlát; heróban a szülő oszlop szabja meg */
  aspect-ratio: 2 / 3;      /* 1000×1500 → ebből jön a magasság */
  margin-inline: auto;      /* jobbra igazításhoz: margin:0 0 0 auto; */
  pointer-events: none;
  filter: drop-shadow(0 12px 40px rgba(1,3,8,.55));
}
.bm-hero-fx img,
.bm-hero-fx canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.bm-hero-fx img{object-fit:contain;object-position:center;transition:opacity .45s ease}
.bm-hero-fx canvas{opacity:0;transition:opacity .45s ease}
.bm-hero-fx.is-ready img{opacity:0}
.bm-hero-fx.is-ready canvas{opacity:1}

.hero-webgl {
    position: absolute;
    width: 55%;
    bottom: calc(clamp(5rem, 2rem + 6vw, 7.5rem) * -1);
    right: max(-500px, -18vw)
}
@media (max-width: 767px) {
    .hero-webgl {
        position: relative;
        width: calc(100% + 2.5rem);
        right: 0;
        margin-inline: -1.25rem;
        max-width: none !important;
		margin-top: -40px;
    }
}

/* KOMPONENS - Marquee */
.marquee {
	position: relative;
	z-index: 2;
	overflow-x: clip;
	margin-block-start: -50px;
	background: linear-gradient(
		180deg,
		transparent 0%,
		#0C1322 40%
	) !important;
}

/* FIGYELEM: a will-change: transform szándékosan NINCS itt.
   A JS kapcsolja fel, amikor ténylegesen animál, és leveszi, amikor nem.
   Fixen hagyva állandó compositor layer maradna életben olyan szekción is,
   ami épp nem látszik — felesleges GPU-memória és kompozitálási költség. */
.marquee .e-con-inner {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: max-content;
	max-width: none;
}

.marquee-item {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	height: clamp(80px, 7vw, 102px);
	padding-inline: clamp(32px, 4.5vw, 80px);
	font-family: var(--font-display);
	font-size: clamp(24px, 2.2vw, 32px);
	font-weight: 500 !important;
	line-height: 1;
	letter-spacing: clamp(-1px, -0.08vw, -0.5px);
	border: 2px solid var(--color-border);
	border-radius: 999px;
	max-width: none !important;
	flex: 1 0 auto !important;
	flex-shrink: 0;
	transition:
		transform 0.3s ease,
		border-color 0.3s ease,
		background-color 0.3s ease,
		color 0.3s ease;
}

/* KOMPONENS - Keskeny egyoszlopos szöveg */
.indent-left-120 {
  margin-inline-start: 120px;
}

@media (max-width: 767px) {
  .indent-left-120 {
    margin-inline-start: 0;
  }
}

.full-width-img{
    max-width: none !important;
    width: 120vw;
    align-self: center !important;
    margin-top: clamp(-120px, -10vw, -40px);
}
@media(max-width:767px){
    .full-width-img{
    width: 180vw;
}
}

/* KOMPONENS - Scrolltext bg */

/* ── Boltmotor: scroll-vezérelt óriás háttérszöveg (4 sor, váltott irány) ── */

/* A szekció maga a pozicionálási kontextus */
.bm-has-scrolltext { position: relative; }

/* A HTML widget, ami a réteget hordozza, ne legyen pozicionálva,
   így a háttér a teljes szekcióra feszül, nem a widgetre */
.bm-has-scrolltext .elementor-widget:has(.bm-scrolltext) { position: static; }

/* A szekció többi tartalma a háttérréteg fölött */
.bm-has-scrolltext .elementor-element:not(:has(.bm-scrolltext)) { z-index: 2; }

.bm-scrolltext {
  --bm-scrolltext-top: clamp(80px, 8vw, 200px); /* ennyire tart el a szekció tetejétől */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;                  /* center helyett fentre igazítva */
  padding-top: var(--bm-scrolltext-top);
  gap: clamp(2px, 1.4vh, 18px);
}

.bm-scrolltext-row {
  white-space: nowrap;
  width: max-content;
  font-family: 'Clash Display', sans-serif;
  font-weight: 600;
  font-size: clamp(5rem, 56vw, 25rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.02);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

/* a jobbra tartó sorok: borostyán árnyalat + JS előtt is helyes kezdőpozíció */
.bm-scrolltext-row[data-dir="1"] {
  transform: translate3d(-50vw, 0, 0);
}
@media(max-width:767px){
    .bm-scrolltext-row {
        color: rgba(255, 255, 255, 0.05);
    }
}

/* KOMPONENS - Boltmotor-phone */

/* ── Boltmotor: mobil mockup jelenet — görgetésre beúszó kép + telefon-váltás ── */
.bm-mockup-scene-html{
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* A jelenet a tartalomszélességből kilógva a képernyő két széléig ér
   (a bevált .full-width-img logika) */
.bm-mockup-scene {
  position: relative;
  width: min(120vw, 3000px);
  margin-top: -5vw;
  margin-bottom: -15vw;
}
@media(min-width:3001px){
    .bm-mockup-scene {
        margin-top: 0vw;
  margin-bottom: 0vw;
    }
}

/* ── mobilon: statikusan az eredeti kép, semmilyen animáció ── */
@media (max-width: 767px) {
  .bm-mockup-scene {
    width: 180vw;
    margin-top: 0vw;
  margin-bottom: 0vw;
  }
  .bm-mockup-full {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  .bm-mockup-phone { display: none !important; }
}

/* ── 3000px felett: szintén statikusan az eredeti kép, semmilyen animáció ── */
@media (min-width: 3001px) {
  .bm-mockup-full {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
  .bm-mockup-phone { display: none !important; }
}

/* a teljes kép (kéz + telefon) — görgetésre úszik be és zsugorodik 1-re, a JS vezérli */
.bm-mockup-full {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0;
  will-change: opacity, transform;
}

/* a telefon-kép: pontosan a teljes képen lévő telefonra illesztve
   (canvas-méréssel bemérve), magasabb rétegen */
.bm-mockup-phone {
  position: absolute;
  left: 33.77%;
  top: 23.45%;
  width: 31.64%;
  height: auto;
  z-index: 2;
  opacity: 0;
  transition: opacity 250ms ease; /* csak az opacity — a méretet a görgetés viszi képkockáról képkockára */
  will-change: opacity, transform;
  pointer-events: none;
}

/* csökkentett mozgás: a teljes kép statikusan látszik, animáció nélkül */
@media (prefers-reduced-motion: reduce) {
  .bm-mockup-full { opacity: 1 !important; }
  .bm-mockup-phone { opacity: 0 !important; }
}

/* KOMPONENS - boltmotor-scrollbar.js */

/* KOMPONENS - boltmotor-scrollbar.css */


/* ── Gyári scrollbar elrejtése ── */
html {
  scrollbar-width: none;      /* Firefox */
  -ms-overflow-style: none;   /* régi Edge / IE */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;              /* Chrome / Safari / új Edge */
}


/* ── Egyedi függőleges scrollbar ── */
.bm-scrollbar {

  /* ─────────────────────────────────────
   * ÁLLÍTHATÓ ÉRTÉKEK
   * ───────────────────────────────────── */

  /* Milyen közel kell érnie az egérnek,
     hogy kiszélesedjen a scrollbar. */
  --bm-scrollbar-proximity: 24px;

  /* Alap szélesség. */
  --bm-scrollbar-width: 1px;

  /* Kiszélesített szélesség. */
  --bm-scrollbar-expanded-width: 12px;

  /* Kiszélesedés sebessége. */
  --bm-scrollbar-expand-duration: 220ms;


  position: fixed;
  right: 40px;
  bottom: 40px;
  z-index: 999999999;

  height: 20vh;
  width: var(--bm-scrollbar-width);

  background: transparent;

  opacity: 0;

  /* Betöltéskor ne fogjon el semmilyen pointer eseményt. */
  pointer-events: none;

  transition:
    width var(--bm-scrollbar-expand-duration) ease,
    opacity 600ms ease;
}


/* ── Láthatatlan közelségi hover-zóna ──
 *
 * Nem kell hozzá JS-es mousemove figyelés.
 * A scrollbar két oldalán ennyivel nagyobb
 * terület érzékeli az egeret.
 */
.bm-scrollbar::before {
  content: "";
  position: absolute;

  top: 0;
  bottom: 0;

  left: calc(-1 * var(--bm-scrollbar-proximity));
  right: calc(-1 * var(--bm-scrollbar-proximity));

  z-index: 0;
}


/* ── Scrollbar háttér / track ── */
.bm-scrollbar::after {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 0;

  background: rgba(255, 255, 255, .85);
  box-shadow: 0 0 4px rgba(0, 0, 0, .25);

  border-radius: 999px;

  transition:
    background-color var(--bm-scrollbar-expand-duration) ease;
}


/* ── Betöltés után aktív ── */
.bm-scrollbar.is-visible {
  opacity: 1;
  pointer-events: auto;
}


/* ── Hover / drag állapot ── */
.bm-scrollbar:hover,
.bm-scrollbar.is-dragging {
  width: var(--bm-scrollbar-expanded-width);
}


/* Kiszélesedett track kicsit visszafogottabb. */
.bm-scrollbar:hover::after,
.bm-scrollbar.is-dragging::after {
  background: rgba(255, 255, 255, .20);
}


/* ── Thumb ── */
.bm-scrollbar__thumb {
  position: absolute;

  left: 0;
  top: 0;

  z-index: 1;

  width: 100%;
  height: 3vh;

  background: #BE7C49;

  border-radius: 999px;

  will-change: transform;

  transform: translate3d(0, 0, 0);

  cursor: grab;

  /*
   * Pointer drag során ne próbálja a böngésző
   * saját touch/pan viselkedését használni.
   */
  touch-action: none;
}


/* Aktív húzás. */
.bm-scrollbar.is-dragging .bm-scrollbar__thumb {
  cursor: grabbing;
}


/* Húzás alatt ne lehessen véletlenül szöveget kijelölni. */
html.bm-scrollbar-dragging,
html.bm-scrollbar-dragging body {
  user-select: none;
}


/*
 * Ha az oldalon globálisan smooth scroll van beállítva,
 * drag alatt kikapcsoljuk, különben lemaradna a scrollbar
 * az egér mögött.
 */
html.bm-scrollbar-dragging {
  scroll-behavior: auto !important;
}


/* ── Mobilon egyáltalán nem létezik ── */
@media (max-width: 767px) {
  .bm-scrollbar {
    display: none !important;
  }
}


/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .bm-scrollbar {
    transition: none;
  }

  .bm-scrollbar::after {
    transition: none;
  }
}

/* KOMPONENS - Horizontal scroll section */

.horizontal-scroll-section .elementor-widget-image {
    width: 100%;
    aspect-ratio: 1200 / 900;
    object-fit: cover;
    object-position: top;
  }

  .elementor-wrapper {
    --video-aspect-ratio: 1200 / 900 !important;
  }

  .horizontal-scroll-section .elementor-widget-image,
  .horizontal-scroll-section .elementor-widget-video {
    width: 80%;
    margin-left: auto;
    z-index: 2;
    border-radius: 30px;
    overflow: hidden;
  }


  .small-img {
    width: 50% !important;
    min-width: 0 !important;
    margin-right: auto;
    margin-left: 0px !important;
    margin-top: -30%;
}

  .reverse .small-img {
    margin-left: auto !important;
    margin-right: 0px;
}

/* ========================================
   Horizontal scroll section
   Csak tablet / desktop: 768px-től felfelé
   ======================================== */

@media (min-width: 768px) {
	.horizontal-scroll-section .elementor-widget-video {
	width: 80% !important; /*Muszáj duplán specifikálni, mert felülírja különben csak a videót*/
}

  .horizontal-scroll-section {
    overflow: auto;
  }

  .horizontal-scroll-section .e-con-inner {
    min-height: min(100svh, 1000px);
  }

  .horizontal-scroll-section .e-con-inner > .e-con {
    flex-grow: 1 !important;
    flex-shrink: 0 !important;
    width: calc(50% - 40px);
  }

  .reverse .elementor-widget-image,
  .reverse .elementor-widget-video {
    margin-left: 0;
  }

  .horizontal-scroll-section .e-con-inner > .e-con:last-of-type {
    padding-right: min(20vw, 200px);
    width: 60%;
  }

  .margin-text {
    margin-left: -10vw;
    margin-bottom: 5vw !important;
  }

  .reverse .margin-text {
    margin-top: 5vw !important;
    margin-bottom: 0 !important;
  }

  .masked-heading {
    display: grid;
    margin: 0;
  }

  .masked-heading__text {
    grid-area: 1 / 1;
  }

  .masked-heading__text--base {
    z-index: 1;
    color: #fff;
  }

  .masked-heading__text--outline {
    z-index: 3;
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    text-stroke: 1px #fff;
    pointer-events: none;
  }
}

  /* ── Boltmotor: pinned horizontal scroll (03 — néma pénzszivárgás) ──
 *
 * A pin-mód CSS-e KIZÁRÓLAG akkor él, ha a JS ráteszi a .bm-hscroll-on osztályt
 * a szekcióra (asztali gépen, első interakció után). Előtte / mobilon / JS nélkül
 * a szekció a natív (overflow) viselkedést tartja — így semmi nem "fut" fölöslegesen.
 *
 * Fontos: a vízszintes túlcsordulást overflow-x: CLIP vágja le (nem hidden),
 * mert a clip — a hiddennel ellentétben — NEM ront el a position: sticky-t.
 */

@media (min-width: 768px) {

  /* A body-n overflow-x:hidden + overflow-y:auto van (téma/kit), amitől a body
     saját scroll-konténer lesz — az pedig ELTÖRI a position:sticky-t (a track a
     bodyhoz próbálna tapadni, ami sosem görög). A clip ugyanúgy vág, de NEM
     csinál scroll-konténert, így a sticky a viewporthoz tapad. */
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* pin aktív: a szekció a függőleges "hajtómű", a magasságát a JS állítja be */
    .horizontal-scroll-section.bm-hscroll-on {
    overflow: visible;
    overflow-x: clip;
    overflow-y: visible;
    padding-block: 0 !important;
  }

  .horizontal-scroll-section.bm-hscroll-on > .e-con-inner {
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    min-height: 0;
    width: 100vw;
    max-width: none !important;
    margin: 0;
    flex: none;
    flex-wrap: nowrap;
    align-items: center;
    will-change: transform;
    transform: translate3d(0, 0, 0);
  }

  /* a képek/videó középből nagyíthatók — a widget (overflow: hidden) levágja a
     kilógást, így a JS scale()-je szép "zoom a kereten belül" hatást ad */
  .horizontal-scroll-section .elementor-widget-image img,
  .horizontal-scroll-section .elementor-widget-video video {
    transform-origin: center center;
    backface-visibility: hidden;
  }
  .horizontal-scroll-section.bm-hscroll-on .elementor-widget-image img,
  .horizontal-scroll-section.bm-hscroll-on .elementor-widget-video video {
    will-change: transform;
  }
}


/* KOMPONENS - Fade section */

/* ── Boltmotor: fade-section — mobilon is aktív verzió ── */

/*
  Fontos sticky fix:
  Az overflow-x:hidden sok esetben scroll-konténert csinál, ami megtörheti
  a position: sticky működését. A clip vág, de nem csinál külön scroll-konténert.
*/
body {
  overflow-x: clip !important;
  overflow-y: visible !important;
}

/* Pin aktív állapot */
.fade-section.bm-fade-on {
  display: block;
}

.fade-section.bm-fade-on > .e-con-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
}

/* A két címsor pontosan egymásra kerül */
.fade-section.bm-fade-on .fade-1,
.fade-section.bm-fade-on .fade-2 {
  grid-area: 1 / 1;
  width: 100%;
  margin: 0;
  opacity: 0;
  will-change: opacity, transform;
  backface-visibility: hidden;
  transform-origin: center center;
}

/* KOMPONENS - feat-image-pan */

.kep-doboz {
	padding: 0 20px 20px;
	border-radius: 30px;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-light);
}

.kep-doboz .feat-img {
	position: relative;
	aspect-ratio: 1200 / 830;
	overflow: hidden;
}

.kep-doboz .feat-img img {
	display: block;
	height: auto;
	max-width: none;
	width: calc(100% + 40px);
	margin: 0 -20px;
	transform: translate3d(0, var(--feat-img-y, 0px), 0);
	backface-visibility: hidden;
}

.kep-doboz .feat-img::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 10%;
	pointer-events: none;
	z-index: 2;
	background: linear-gradient(
		to bottom,
		rgba(17, 25, 44, 0) 0%,
		var(--color-light) 100%
	);
}

.kep-doboz .feat-img.is-feat-img-active img {
	will-change: transform;
}

.kep-doboz .elementor-widget-image:not(.feat-img) {
	width: 40px;
}

@media (prefers-reduced-motion: reduce) {
	.kep-doboz .feat-img img {
		transform: none !important;
	}
}

.icon-section{
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

@media(max-width:767px){
.icon-section .elementor-widget-image{
    width: 60px !important;
}
}

/* KOMPONENS - boltmotor-glow-cards.js */

.glow-box {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	border: 1px solid var(--color-border);
	background: var(--color-light);
	--glow-x: 50%;
	--glow-y: 50%;
	--glow-opacity: 0;
	--glow-color: var(--color-primary);
	--glow-strength: 0.6;
}

.glow-box::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	border-radius: inherit;
	opacity: calc(var(--glow-opacity) * var(--glow-strength));
	background:
		radial-gradient(
			circle 360px at var(--glow-x) var(--glow-y),
			color-mix(in srgb, var(--glow-color) 38%, transparent) 0%,
			color-mix(in srgb, var(--glow-color) 16%, transparent) 34%,
			transparent 68%
		);
}

.glow-box::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	border-radius: inherit;
	padding: 1px;
	opacity: calc(var(--glow-opacity) * var(--glow-strength));
	background:
		radial-gradient(
			circle 320px at var(--glow-x) var(--glow-y),
			color-mix(in srgb, #ffffff 65%, transparent) 0%,
			color-mix(in srgb, var(--glow-color) 55%, transparent) 28%,
			transparent 62%
		);

	-webkit-mask:
		linear-gradient(#000 0 0) content-box,
		linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}

.glow-box > * {
	position: relative;
	z-index: 1;
}

@media (max-width: 767px), (prefers-reduced-motion: reduce) {
	.glow-box::before,
	.glow-box::after {
		display: none !important;
	}
}

/* KOMPONENS - nested tabs */

/* FONTOS: ide (és a szekció egyik ősére sem) kerülhet overflow:hidden —
   az scroll-konténerré tenné az őst, ami ELTÖRI a widget belső
   position:sticky pinjét (átgörgethetővé válna a szakasz).
   Ha vágni kell, az overflow-x: clip a sticky-biztos megoldás. */
.sticky-tab-section .e-con-inner{
    min-height: min(100svh, 1000px);
}

/* a kitapadó belső konténerben a tabs widget a teljes szélességet töltse ki
   (az Elementor fit-content-re engedné, amitől a rács ~fele szélesre esne össze) */
.sticky-tab-section-inner .elementor-widget-vgo-fast-tabs{
    width: 100%;
}
.vgo-ft.vgo-ft--scroll {
  --vgo-ft-sc-active: var(--color-primary);
  --vgo-ft-sc-inactive: var( --color-border);
  --vgo-ft-sc-card-bg: var(--color-bg); 
  --vgo-ft-sc-gap: 0px;                      
}

@media (min-width: 768px) {
  .vgo-ft.vgo-ft--scroll .vgo-ft-sc-grid {
    grid-template-columns: 30% 1fr;
  }
}

.vgo-ft.vgo-ft--scroll .vgo-ft-sc-tab {
  padding: 0px 20px;
}

.vgo-ft.vgo-ft--scroll .vgo-ft-sc-text {
  font-size: clamp(1.4rem, 3vw, 1.75rem);
  white-space: normal;
  overflow-wrap: break-word;
  word-break: normal;
}

.vgo-ft-titles.vgo-ft-sc-titles {
    gap: 60px !important;
}

.vgo-ft-sc-card {
    background: var(--color-bg) !important;
}

.sticky-tab-section img{
    border-radius: 30px !important;
}

.sticky-tab-section{
    padding-bottom: 0px !important;
}

/* A kártya-nézőke magassága a plugin --vgo-ft-sc-cards-h változójával
   hangolható (alap: clamp(380px,58svh,640px)) — height:auto TILOS rá,
   mert a kártyák abszolút pozíciójúak, és 0-ra esne össze.
   A bal cím-oszlopra sem kell fix magasság: a grid nyújtja a kártya-
   nézőkéhez (100vh itt fölöslegesen felfújná a pin-stage-et). */


/* ========================================
   Horizontal review accordion - smooth flex version
   ======================================== */

@media (min-width: 768px) {
	.horizontal-acc-section {
		--ha-closed-width: clamp(64px, 6vw, 82px);
		--ha-gap: 12px;
		--ha-height: clamp(300px, 31vw, 340px);
		--ha-radius: 24px;

		/* Lassabb, videósabb átmenet */
		--ha-speed: 920ms;
		--ha-ease: cubic-bezier(.16, 1, .3, 1);

		display: flex !important;
		flex-direction: row !important;
		align-items: stretch !important;
		gap: var(--ha-gap) !important;

		width: 100%;
		min-height: var(--ha-height);
		overflow: hidden;
	}

	.horizontal-acc-section > .horizontal-acc-item {
		position: relative;
		box-sizing: border-box;

		flex-grow: 0;
		flex-shrink: 0;
		flex-basis: var(--ha-closed-width);

		min-width: 0 !important;
		width: auto !important;
		height: var(--ha-height);
		min-height: var(--ha-height);

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

		overflow: hidden !important;
		border-radius: var(--ha-radius);
		border: 1px solid rgba(255, 255, 255, .09);

		background:
			linear-gradient(180deg, rgba(17, 25, 44, .98) 0%, rgba(12, 19, 34, .98) 100%);

		cursor: pointer;
		isolation: isolate;
		contain: layout paint;

		transition:
			flex-grow var(--ha-speed) var(--ha-ease),
			flex-basis var(--ha-speed) var(--ha-ease),
			background 520ms ease,
			border-color 520ms ease,
			box-shadow 520ms ease;

		will-change: flex-grow, flex-basis;
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active {
		flex-grow: 1;
		flex-shrink: 1;
		flex-basis: 0;

		cursor: default;

		background:
			radial-gradient(circle at 92% 108%, rgba(18, 224, 155, .24) 0%, rgba(18, 224, 155, 0) 46%),
			radial-gradient(circle at 0% 100%, rgba(190, 124, 73, .24) 0%, rgba(190, 124, 73, 0) 44%),
			linear-gradient(180deg, #121b31 0%, #0d1526 100%);

		border-color: rgba(255, 255, 255, .13);
		box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
	}

	/* Szöveges tartalom */
	.horizontal-acc-section > .horizontal-acc-item > .rating,
	.horizontal-acc-section > .horizontal-acc-item > .review {
		position: absolute !important;
		z-index: 2;

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

		opacity: 0;
		visibility: hidden;
		transform: translateY(12px);

		pointer-events: none;

		transition:
			opacity 280ms ease,
			transform 360ms var(--ha-ease),
			visibility 0s linear 280ms;
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active > .rating,
	.horizontal-acc-section > .horizontal-acc-item.is-active > .review {
		opacity: 1;
		visibility: visible;
		transform: translateY(0);

		/*
		   Fontos: késleltetve jelenik meg,
		   így nem akkor villan be, amikor a kártya még keskeny.
		*/
		transition-delay: 330ms, 330ms, 0s;
	}

	.horizontal-acc-section > .horizontal-acc-item > .rating {
		top: 30px;
		left: 30px;
	}

	.horizontal-acc-section > .horizontal-acc-item > .review {
		top: 88px;
		left: 30px;

		width: min(520px, calc(100% - 60px));
		max-width: calc(100% - 60px);
	}

	.horizontal-acc-section > .horizontal-acc-item > .rating p,
	.horizontal-acc-section > .horizontal-acc-item > .review p,
	.horizontal-acc-section > .horizontal-acc-item > .person p {
		margin: 0 !important;
	}

	/* Person blokk */
	.horizontal-acc-section > .horizontal-acc-item > .person {
		position: absolute !important;
		z-index: 3;

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

		display: flex !important;
		box-sizing: border-box;

		/*
		   Itt direkt nincs rotation animation,
		   hogy a belső szöveg/kép ne forogjon átmenettel.
		*/
		transition:
			opacity 220ms ease,
			filter 360ms ease !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person * {
		transition: none !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person .elementor-widget-image {
		margin: 0 !important;
		padding: 0 !important;
		line-height: 0;
		flex: 0 0 auto;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person img {
		display: block;
		width: 42px !important;
		height: 42px !important;
		border-radius: 999px;
		object-fit: cover;
	}

	/* Nyitott állapot: person lent, normál irányban */
	.horizontal-acc-section > .horizontal-acc-item.is-active > .person {
		left: 30px !important;
		right: auto !important;
		top: auto !important;
		bottom: 30px !important;

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

		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;

		opacity: 1;
		filter: blur(0);
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active > .person .name {
		writing-mode: horizontal-tb !important;
		transform: none !important;

		white-space: normal !important;
		text-align: left !important;
	}

	/* Csukott állapot: csak a person látszik */
	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .person {
		left: 0 !important;
		right: 0 !important;
		top: 18px !important;
		bottom: 18px !important;

		width: 100% !important;
		height: auto !important;

		flex-direction: column !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 18px !important;

		opacity: .92;
	}

	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .person img {
		width: 38px !important;
		height: 38px !important;
	}

	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .person .name {
		writing-mode: vertical-rl !important;
		transform: rotate(180deg) !important;

		white-space: nowrap !important;
		text-align: left !important;

		margin-top: auto !important;
		margin-bottom: auto !important;

		max-height: calc(var(--ha-height) - 96px);
	}

	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .person .name p {
		white-space: nowrap !important;
		line-height: 1.1 !important;
	}

	/* Hover közbeni védelem: ne legyen text-selection / villanás */
	.horizontal-acc-section,
	.horizontal-acc-section * {
		-webkit-tap-highlight-color: transparent;
	}

	.horizontal-acc-section.ha-ready > .horizontal-acc-item {
		backface-visibility: hidden;
		transform: translateZ(0);
	}
}


/* ========================================
   Horizontal review accordion - mobile smooth
   ======================================== */

@media (max-width: 767px) {
	.horizontal-acc-section {
		--ha-mobile-speed: 620ms;
		--ha-mobile-ease: cubic-bezier(.16, 1, .3, 1);

		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 14px !important;

		width: 100%;
		overflow: visible !important;
	}

	.horizontal-acc-section > .horizontal-acc-item {
		position: relative !important;

		display: flex !important;
		flex-direction: column !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		gap: 0 !important;
		row-gap: 0 !important;
		column-gap: 0 !important;

		width: 100% !important;
		height: auto !important;
		min-height: 0 !important;

		flex: none !important;
		flex-basis: auto !important;
		flex-grow: 0 !important;
		flex-shrink: 0 !important;

		padding: 18px !important;
		margin: 0 !important;

		overflow: hidden !important;

		border-radius: 22px;
		border: 1px solid rgba(255, 255, 255, .09);

		background:
			linear-gradient(180deg, rgba(17, 25, 44, .98) 0%, rgba(12, 19, 34, .98) 100%);

		cursor: pointer;
		touch-action: manipulation;
		contain: layout paint;

		transition:
			background 420ms ease,
			border-color 420ms ease,
			box-shadow 420ms ease;
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active {
		background:
			radial-gradient(circle at 92% 108%, rgba(18, 224, 155, .22) 0%, rgba(18, 224, 155, 0) 46%),
			radial-gradient(circle at 0% 100%, rgba(190, 124, 73, .22) 0%, rgba(190, 124, 73, 0) 44%),
			linear-gradient(180deg, #121b31 0%, #0d1526 100%);

		border-color: rgba(255, 255, 255, .13);
		box-shadow: 0 22px 55px rgba(0, 0, 0, .20);
	}

	.horizontal-acc-section > .horizontal-acc-item > .rating,
	.horizontal-acc-section > .horizontal-acc-item > .review,
	.horizontal-acc-section > .horizontal-acc-item > .person {
		position: static !important;

		width: 100% !important;
		max-width: 100% !important;
		height: auto;

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

		transform: none !important;
	}

	/*
		Fontos:
		Nincs display:none.
		A display none nem animálható, ezért okozott ugrást.
	*/
	.horizontal-acc-section > .horizontal-acc-item > .rating,
	.horizontal-acc-section > .horizontal-acc-item > .review {
		display: block !important;

		max-height: 0;
		opacity: 0;
		visibility: hidden;
		overflow: hidden;
		pointer-events: none;

		transform: translateY(-8px) !important;

		transition:
			max-height var(--ha-mobile-speed) var(--ha-mobile-ease),
			opacity 260ms ease,
			transform 420ms var(--ha-mobile-ease),
			margin-bottom var(--ha-mobile-speed) var(--ha-mobile-ease),
			visibility 0s linear var(--ha-mobile-speed);
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active > .rating,
	.horizontal-acc-section > .horizontal-acc-item.is-active > .review {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;

		transform: translateY(0) !important;

		transition:
			max-height var(--ha-mobile-speed) var(--ha-mobile-ease),
			opacity 300ms ease 120ms,
			transform 460ms var(--ha-mobile-ease) 80ms,
			margin-bottom var(--ha-mobile-speed) var(--ha-mobile-ease),
			visibility 0s linear 0s;
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active > .rating {
		margin-bottom: 24px !important;
	}

	.horizontal-acc-section > .horizontal-acc-item.is-active > .review {
		margin-bottom: 30px !important;
	}

	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .rating,
	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .review {
		margin-bottom: 0 !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .rating p,
	.horizontal-acc-section > .horizontal-acc-item > .review p,
	.horizontal-acc-section > .horizontal-acc-item > .person p {
		margin: 0 !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person {
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-start !important;
		gap: 12px !important;

		opacity: 1 !important;
		transform: none !important;

		margin-top: 0 !important;
		padding-top: 0 !important;

		transition: none !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person * {
		transition: none !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person .elementor-widget-image {
		width: auto !important;
		max-width: none !important;

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

		line-height: 0;
		flex: 0 0 auto;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person img {
		display: block;

		width: 42px !important;
		height: 42px !important;

		border-radius: 999px;
		object-fit: cover;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person .name {
		width: auto !important;
		max-width: none !important;

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

		writing-mode: horizontal-tb !important;
		transform: none !important;

		white-space: normal !important;
		text-align: left !important;
	}

	.horizontal-acc-section > .horizontal-acc-item > .person .name p {
		margin: 0 !important;
		white-space: normal !important;
		line-height: 1.2 !important;
	}

	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) {
		padding-top: 18px !important;
		padding-bottom: 18px !important;
	}

	.horizontal-acc-section > .horizontal-acc-item:not(.is-active) > .person {
		align-self: flex-start !important;
		margin-top: 0 !important;
	}

	.horizontal-acc-section,
	.horizontal-acc-section * {
		-webkit-tap-highlight-color: transparent;
	}

	.horizontal-acc-section.ha-ready > .horizontal-acc-item {
		backface-visibility: hidden;
		transform: translateZ(0);
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   KOMPONENS — 08 · AZ INGYENES FELMÉRÉS  (videó-maszk intro)
   ───────────────────────────────────────────────────────────────────────────
   HTML : Elementor „HTML" widget → #bm-felmeres
   JS   : /js/boltmotor-felmeres.js  (functions.php, csak ≥1025px töltődik be)
   Hozzáadva: 2026-07-08

   RESZPONZÍV VISELKEDÉS:
   • ≥1025px : scroll-vezérelt videó-maszk (.bm-felmeres__desktop) — videó + JS.
   • <1025px : statikus, könnyű szöveg-változat (.bm-felmeres__mobile) —
               se videó, se JS, se plusz kérés; az „Ingyen. Pont." gradientes.
   ═══════════════════════════════════════════════════════════════════════════ */
.sticky-video-mask-section{
    padding: 0px !important;
}

.sticky-video-mask-section.e-con.e-flex>.e-con-inner {
    max-width: 100% !important;
}

#bm-felmeres {
	/* A szakaszhoz tartozó változók, amelyek a globális :root-ban még nincsenek.
	   Öröklődnek a leszármazottakra, így az inline var(--…) hivatkozások feloldódnak. */
	--amber:       #CF9B5C;
	--success:     #12E09B;
	--accent-line: rgba(207, 155, 92, .32);
	--font-mono:   'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;

	position: relative;
	background: #05080F;
	border-top: 1px solid rgba(255, 255, 255, .07);
	font-family: var(--font-body);
}

/* A scroll-vezérelt réteg mindig a widget teljes szélességét töltse ki. */
#bm-felmeres [data-videomask] {
	width: 100%;
}

/* Alapból (≥1025px) a mobil szöveg-változat rejtve, a videó-maszk látszik. */
#bm-felmeres .bm-felmeres__mobile {
	display: none;
}

/* Biztonsági háló: ha a JS bármiért nem futna le (asztali gépen), a felirat akkor
   is olvasható maradjon (a címsor + alcím alapból opacity:0 az inline stílusban). */
#bm-felmeres.no-js [data-vm-line1],
#bm-felmeres.no-js [data-vm-sub] {
	opacity: 1 !important;
}

/* ── <1025px: videó-maszk teljesen KI, statikus szöveg BE ─────────────────── */
@media (max-width: 1024px) {

	/* A teljes videó-maszk réteg eltűnik: a videó (data-src) el sem indul, a
	   320vh magas scroll-konténer sem foglal helyet. */
	#bm-felmeres .bm-felmeres__desktop {
		display: none !important;
	}

	/* Statikus szöveg-változat. DOM-sorrend: Előbb bizonyítok. → Ingyen. Pont. → alcím.
	   A méretek CSAK szélesség-alapúak (nem magasságfüggők). */
	#bm-felmeres .bm-felmeres__mobile {
		display: block;
		padding: clamp(64px, 13vw, 120px) 24px;
		text-align: center;
	}

	#bm-felmeres .bm-felmeres__mline {
		margin: 0 0 18px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(1.8rem, 7vw, 2.6rem);
		line-height: 1.05;
		letter-spacing: -.02em;
		color: #fff;
	}

	#bm-felmeres .bm-felmeres__mword {
		margin: 0 0 18px;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(2.6rem, 12vw, 4.4rem);
		line-height: 1;
		letter-spacing: -.02em;
	}

	/* A .grad-text belső span kapja a gradientet. */
	#bm-felmeres .bm-felmeres__mword .grad-text {
		display: inline;
	}

	#bm-felmeres .bm-felmeres__msub {
		margin: 0 auto;
		max-width: 60ch;
		color: #C4CDDB;
		font-size: clamp(1rem, 4vw, 1.15rem);
		line-height: 1.6;
	}

	#bm-felmeres .bm-felmeres__msub strong {
		color: #fff;
	}
}
/* KOMPONENS — 08 · Az ingyenes felmérés — VÉGE */

/* KOMPONENS — masonry-img-section */


/* ── Boltmotor: masonry-galéria → fullscreen reveal (09 — Godfather-ajánlat) ──
 *
 * A kollázs-elrendezés + pin CSS-e KIZÁRÓLAG akkor él, ha a JS ráteszi a
 * .bm-masonry-on osztályt a szekcióra (asztali gépen, első interakció után).
 * Előtte / mobilon / JS nélkül a szekció a natív Elementor-flow-t tartja.
 *
 * Működés (a JS-sel együtt):
 *   1) beúszáskor a páratlan oszlopok (+16vh-ról) és a párosak (−16vh-ról)
 *      középre konvergálnak; a galéria-sor a képernyő tetejére érve kitapad
 *   2) pin alatt a KÖZÉPSŐ doboz fullscreenre nő, a szélsők elhalványulnak,
 *      majd sötétítő overlay (scrim) úszik rá
 *   3) az ajánlat-szöveg (.masonry-img-content-section) NATÍV görgetéssel
 *      úszik fel a kitapadt kép fölött (−100vh margó + spacer-paddingok) —
 *      ehhez NEM fut JS, a böngésző görgeti
 *   4) a szekció alján a pin elenged, a kép kigörög, megy tovább az oldal
 *
 * A JS osztályozza fel a sort: .bm-mrow (galéria-sor), .bm-col + .bm-c0..c4
 * (oszlopok), .bm-center (középső), .bm-down/.bm-up (kezdő eltolás iránya),
 * és ő szúrja be a .bm-scrim / .bm-cue elemeket is.
 */

/* a JS által beszúrt overlay/jelző CSAK aktív modulnál látszódjon —
   mobilra szűkülésnél / kikapcsolt modulnál se maradjon ott */
.bm-scrim, .bm-cue { display: none; }

/* A videós fő-doboz (HTML-widget): a beágyazott videó abszolút (inset:0) tölti
   ki, ezért kell rá pozicionált kontextus — MINDEN állapotban (pin előtt/után,
   mobilon is). Pin-módban a .bm-col úgyis abszolút, az is megteszi. */
.masonry-img-section-item.main-box { position: relative; }

@media (min-width: 768px) {

  /* A body-n overflow-x:hidden + overflow-y:auto van (téma/kit), amitől a body
     saját scroll-konténer lesz — az pedig ELTÖRI a position:sticky-t. A clip
     ugyanúgy vág, de NEM csinál scroll-konténert. (A hscroll-modul is beteszi —
     duplán nem árt.) */
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  .masonry-img-section.bm-masonry-on {
    position: relative;
    padding-block: 0 !important;   /* az .e-parent utility-padding holtjátékot adna a pin elején/végén */
    background: #05080F;           /* ▶ szekció-háttér (a terv szerint) */
    /* Az Elementorban a szekción Overflow: Hidden van — az a szekciót
       scroll-konténerré teszi, ami ELTÖRI a belső sticky-t (nem áll meg a
       görgetés, a content is elcsúszik). Pin-módban feloldjuk; a vízszintes
       kilógást úgyis a .bm-mrow saját overflow:hidden-je vágja le. */
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* a boxed belső wrappert teljes szélesre engedjük (a galéria full-bleed) —
     a tartalmi rész boxed-max-width-jét lentebb a content-section kapja vissza */
  .masonry-img-section.bm-masonry-on > .e-con-inner {
    display: flex;
    flex-direction: column;
    gap: 0 !important;
    width: 100%;
    max-width: none !important;    /* a .e-con.e-flex>.e-con-inner utility !important ellen */
    margin: 0;
    padding: 0 !important;
    overflow: visible !important;  /* scroll-konténer itt se keletkezzen (sticky!) */
  }

  /* ── 1) A GALÉRIA-SOR: kitapadó 100vh "színpad" ── */
  .bm-masonry-on .bm-mrow {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    min-height: 0;
    width: 100%;
    max-width: none !important;
    margin: 0;
    padding: 0 !important;
    flex: none;                    /* e nélkül a flex-grow kitöltené a szekciót, és a sticky-nek nincs útja */
    align-self: stretch;
    overflow: hidden;
    background: #05080F;           /* ▶ a "színpad" háttere */
  }

  /* ── oszlopok: abszolút kollázs (a terv koordinátái) ── */
  .bm-masonry-on .bm-col {
    position: absolute;
    top: 50%;
    width: 26vw;                   /* ▶ oszlop-szélesség */
    margin: 0;
    padding: 0;
    z-index: 4;
    will-change: transform, opacity;
  }
  .bm-masonry-on .bm-c0 { left: -17.4vw; }  /* ▶ bal szélső (kilóg) */
  .bm-masonry-on .bm-c1 { left:   9.8vw; }
  .bm-masonry-on .bm-c2 { left:    50%;  }  /* középső */
  .bm-masonry-on .bm-c3 { left:  64.2vw; }
  .bm-masonry-on .bm-c4 { left:  91.4vw; }  /* ▶ jobb szélső (kilóg) */

  /* kezdő fel/le eltolás — a 16vh a JS BASE_VH-jával legyen szinkronban! */
  .bm-masonry-on .bm-col.bm-down { transform: translateY(-50%) translateY( 16vh); }
  .bm-masonry-on .bm-col.bm-up   { transform: translateY(-50%) translateY(-16vh); }

  /* egyképes (álló) oszlopok: a kép-widget maga az oszlop */
  .bm-masonry-on .bm-col.elementor-widget-image {
    height: 78vh;                  /* ▶ álló oszlop magassága */
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px -16px rgba(2, 4, 10, .72);
  }

  /* kétképes oszlopok: konténer, benne 2 négyzetes kép */
  .bm-masonry-on .bm-col.e-con {
    display: flex;
    flex-direction: column;
    gap: 1.4vh;                    /* ▶ a két kép köze */
    height: auto;
    min-height: 0;
  }
  .bm-masonry-on .bm-col.e-con > .elementor-widget-image {
    width: 100%;
    aspect-ratio: 1 / 1;           /* ▶ négyzetes csempék */
    flex: none;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px -16px rgba(2, 4, 10, .72);
  }

  /* KÖZÉPSŐ doboz: ebből lesz a fullscreen (w/h/radius/transformot a JS írja).
     A keret/overflow itt van (nem inline), hogy a videós HTML-widgetnél is
     megjelenjen — a JS csak a width/height/border-radius/transform-ot írja. */
  .bm-masonry-on .bm-center {
    z-index: 6;
    height: 78vh;                  /* JS írja felül inline; ez a JS előtti alap */
    border-radius: 14px;
    overflow: hidden;              /* a növekvő videó sarkait levágja */
    border: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 24px 60px -16px rgba(2, 4, 10, .72);
    transform: translate(-50%, -50%) translateY(16vh); /* = .bm-down, csak középre húzva */
  }

  /* a képek/videó töltsék ki a keretüket; a sötétítés a terv szerinti alap
     (a középső fényerejét zoom közben a JS emeli 0.6 → 0.94-re) */
  .bm-masonry-on .bm-col img,
  .bm-masonry-on .bm-col video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.82) brightness(.6);   /* ▶ csempék tompítása */
  }

  /* ── 2) sötétítő overlay + görgetés-jelző (a JS szúrja be a sorba) ── */
  .bm-masonry-on .bm-scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 7;
    opacity: 0;
    pointer-events: none;
    /* balra sötétebb — ott úszik fel a szöveg (a terv gradiense) */
    background:
      linear-gradient(90deg, rgba(4,7,14,.96) 0%, rgba(4,7,14,.90) 32%, rgba(5,8,15,.60) 56%, rgba(5,8,15,.18) 100%),
      linear-gradient(180deg, rgba(4,7,14,.7) 0%, transparent 15%, transparent 80%, rgba(4,7,14,.85) 100%);
  }

  .bm-masonry-on .bm-cue {
    display: flex;
    position: absolute;
    left: 50%;
    bottom: 34px;
    transform: translateX(-50%);
    z-index: 8;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: .72rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .74);
    text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
    opacity: 0;
    pointer-events: none;
  }
  .bm-masonry-on .bm-cue span { font-size: 1.1rem; line-height: 1; }

  /* ── 3) AZ AJÁNLAT-SZÖVEG: natív görgetéssel a pinelt kép FÖLÖTT ── */
  .bm-masonry-on .masonry-img-content-section {
    position: relative;
    z-index: 2;                            /* a sticky sor (z:1) fölött */
    margin: -100vh auto 0 !important;      /* visszahúzzuk a pinelt sor alá/fölé */
    /* ▶ felső spacer = MIKOR ússzon be a szöveg: a szöveg akkor ér a képernyő
         aljára, amikor a pin-görgetés = (spacer − 100vh). A doboz-nyílás 0.95
         képernyőnyi görgetésnél ér véget (JS ZOOM_TO), így a 200vh-val a szöveg
         CSAK a TELJES kinyílás után indul el. (Kisebb érték = korábban.)
       ▶ alsó spacer = a szöveg kigörgése UTÁN meddig maradjon még a kép */
    padding: 200vh 24px 120vh !important;
    max-width: min(100%, 1140px);          /* a feloldott boxed-szélesség pótlása (utility-tükör) */
    pointer-events: none;                  /* a spacer-sávok ne fogják el a kattintást... */
  }
  .bm-masonry-on .masonry-img-content-section > * {
    pointer-events: auto;                  /* ...de a tényleges tartalom igen */
  }
}



/* ═══════════════════════════════════════════════════════════════════════════
   SAJÁT / ALAP STÍLUSOK (a user CSS-e) — a NEM-PIN (natív + mobil) megjelenés.
   A modul fenti pin-szabályai [.bm-masonry-on ...] nagyobb specificitással /
   !important-tal felülírják ezeket, amikor a JS aktiválja az animációt.
   ═══════════════════════════════════════════════════════════════════════════ */

.masonry-img-section {
  padding: 0px !important;
  overflow: hidden;
}

.masonry-img-section.e-con.e-flex > .e-con-inner {
  max-width: 100% !important;
}

.masonry-img-section-item,
.masonry-img-section-inner {
  width: 26vw;
  border-radius: 15px;
  overflow: hidden;
  flex-grow: 1 !important;
  flex-shrink: 0 !important;
}

.masonry-img-section-item.outer {
  height: 60vh;
}

@media (max-width: 767px) {
  .masonry-img-section-item.outer {
    height: 30vh;
  }
  .masonry-img-opener {
    gap: 5px !important;
  }
  .masonry-img-section-inner {
    gap: 5px !important;
    padding: 0px !important;
  }
}

.masonry-img-section-item.inner {
  aspect-ratio: 1;
  object-fit: cover;
}

.masonry-img-section-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.masonry-img-content-section {
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  padding: 0px 20px;
}

.masonry-img-section-icon {
  width: 40px;
  flex-grow: 1;
  flex-shrink: 0;
}

.masonry-img-section-icon-section {
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(5px);
}

@media(max-width:767px){
	.main-box{
		display: none !important;
	}
}



/* KOMPONENS - Scale section */

/* =========================================================
   VIKINGO STUDIO – SCALE + TABLE SECTION v4

   Desktop:
   - egyetlen sticky scroll-idővonal;
   - opener megjelenés/eltűnés;
   - kártyák váltakozó oldalirányú kifutása;
   - az utolsó kártya után a .table-section scale + fade-in;
   - a sticky működés csak a táblázat teljes megjelenése után old fel.

   Mobil:
   - nincs sticky vagy scroll-animáció;
   - nincs JavaScript-runtime;
   - minden elem statikusan, egymás alatt jelenik meg;
   - a táblázat vízszintesen görgethető.
   ========================================================= */

.scale-section {
  background: radial-gradient(
    50% 50% at 50% 50%,
    rgba(18, 224, 155, 0.07) 0%,
    rgba(190, 124, 73, 0.05) 38%,
    transparent 72%
  ) !important;
}

/* =========================================================
   MOBIL – TELJESEN STATIKUS ELRENDEZÉS
   ========================================================= */

@media (max-width: 767px) {
  .scale-section {
    --display: block;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .scale-section > .e-con-inner {
    position: relative !important;
    inset: auto !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
    transform: none !important;
  }

  .scale-section .scale-section-opener,
  .scale-section .scale-section-item,
  .scale-section .table-section {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    margin-inline: 0 !important;
    flex: 0 0 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    will-change: auto !important;
  }
}

/* =========================================================
   DESKTOP – KÖZÖS STICKY SCROLL-IDŐVONAL
   ========================================================= */

@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  body:not(.elementor-editor-active) .scale-section.is-scale-ready {
    --display: block;
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: var(--scale-section-height, 880vh) !important;
    min-height: var(--scale-section-height, 880vh) !important;
    padding: 0 !important;
    overflow: visible !important;
    isolation: isolate;
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  /* Egy viewport magas sticky színpad. */
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready > .e-con-inner {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    inset-block-start: 0 !important;
    z-index: 1;
    display: block !important;
    align-self: flex-start !important;
    width: 100% !important;
    max-width: none !important;
    height: var(--scale-viewport-height, 100vh) !important;
    min-height: var(--scale-viewport-height, 100vh) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    isolation: isolate;
    contain: paint;
  }

  /*
   * A táblázat teljes megjelenése után a szakasz kilép a sticky állapotból,
   * és normál dokumentumfolyamban folytatódik tovább. Így ha a táblázat
   * magasabb a viewportnál, a teljes magasságával lenyomja az alatta lévő
   * tartalmat, és nem csúszik rá a következő szakaszra.
   */
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready.is-scale-table-complete {
    height: auto !important;
    min-height: 0 !important;
    padding-top: var(--scale-pinned-distance, 0px) !important;
  }

  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready.is-scale-table-complete > .e-con-inner {
    position: relative !important;
    top: auto !important;
    inset: auto !important;
    display: block !important;
    align-self: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: var(--scale-table-flow-height, var(--scale-viewport-height, 100vh)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    contain: none;
  }

  /* A háttér-aura a sticky színpad közepén marad. */
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready > .e-con-inner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: min(1100px, 120vw);
    height: min(760px, 105vh);
    transform: translate3d(-50%, -50%, 0);
    background: radial-gradient(
      50% 50% at 50% 50%,
      rgba(18, 224, 155, 0.07) 0%,
      rgba(190, 124, 73, 0.05) 38%,
      transparent 72%
    );
    pointer-events: none;
  }

  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready .scale-section-opener,
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready .scale-section-item,
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready .table-section {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    opacity: var(--scale-opacity, 0) !important;
    visibility: hidden;
    pointer-events: none;
    transition: none !important;
    animation: none !important;
    backface-visibility: hidden;
  }

  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready .scale-section-opener {
    z-index: 7;
    width: 100% !important;
    max-width: none !important;
    transform:
      translate3d(-50%, -50%, 0)
      scale(var(--scale-size, 0.985)) !important;
    transform-origin: 50% 50%;
  }

  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready .scale-section-item {
    z-index: 10;
    width: clamp(258px, 23vw, 320px) !important;
    max-width: 320px !important;
    min-width: 0 !important;
    flex-basis: auto !important;
    transform:
      translate3d(calc(-50% + var(--scale-x, 0px)), -50%, 0)
      scale(var(--scale-size, 0.16)) !important;
    transform-origin: 50% 50%;
  }

  /*
   * A táblázatos szakasz ugyanabban a sticky színpadban jelenik meg,
   * de nem kap oldalirányú elmozdulást.
   */
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready .table-section {
    z-index: 20;
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    min-width: 0 !important;
    padding-inline: clamp(16px, 3vw, 40px) !important;
    transform:
      translate3d(
        -50%,
        calc(-50% + var(--scale-table-y, 0px)),
        0
      )
      scale(var(--scale-size, 0.16)) !important;
    transform-origin: 50% 50%;
  }

  /* GPU-réteg csak a ténylegesen viewportban lévő szakaszban. */

  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready.is-scale-table-complete .scale-section-opener,
  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready.is-scale-table-complete .scale-section-item {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body:not(.elementor-editor-active)
    .scale-section.is-scale-ready.is-scale-table-complete .table-section {
    top: var(--scale-table-static-top, 0px) !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
  }

  body:not(.elementor-editor-active)
    .scale-section.is-scale-active .scale-section-opener,
  body:not(.elementor-editor-active)
    .scale-section.is-scale-active .scale-section-item,
  body:not(.elementor-editor-active)
    .scale-section.is-scale-active .table-section {
    will-change: transform, opacity;
  }
}

/* =========================================================
   ÉRTÉK-ÖSSZEHASONLÍTÓ TÁBLÁZAT
   ========================================================= */

.value-table-scroll {
  --vt-bg-top: #101b30;
  --vt-bg-bottom: #0b1322;
  --vt-text: #d6deea;
  --vt-muted: #8c99ad;
  --vt-heading: #eef1f6;
  --vt-accent: #be7c49;
  --vt-accent-soft: rgba(190, 124, 73, 0.14);
  --vt-accent-line: rgba(190, 124, 73, 0.38);
  --vt-success: #12e09b;
  --vt-success-bg: rgba(18, 224, 155, 0.07);
  --vt-success-head: rgba(18, 224, 155, 0.12);
  --vt-danger: #c98b86;
  --vt-danger-bg: rgba(240, 65, 62, 0.03);
  --vt-border: rgba(255, 255, 255, 0.06);

  width: 100%;
  max-width: 920px;
  margin-inline: auto;
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  background: linear-gradient(
    180deg,
    var(--vt-bg-top) 0%,
    var(--vt-bg-bottom) 100%
  );
  box-shadow: 0 28px 70px rgba(1, 3, 8, 0.42);
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color:
    rgba(190, 124, 73, 0.82)
    rgba(255, 255, 255, 0.045);
}

.value-table-scroll:focus-visible {
  outline: 1px solid rgba(18, 224, 155, 0.7);
  outline-offset: 4px;
}

.value-table-scroll::-webkit-scrollbar {
  height: 4px;
}

.value-table-scroll::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 999px;
}

.value-table-scroll::-webkit-scrollbar-thumb {
  min-width: 44px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    #be7c49 0%,
    #d7b079 52%,
    #12e09b 100%
  );
}

.value-table-scroll::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(
    90deg,
    #d7b079 0%,
    #12e09b 100%
  );
}

.value-table {
  width: 100%;
  min-width: 880px;
  border: 0;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  color: var(--vt-text);
  background: transparent;
  font-family: inherit;
}

.value-table__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.value-table__col--feature {
  width: 36.75%;
}

.value-table__col--mine {
  width: 20.4%;
}

.value-table__col--freelancer,
.value-table__col--agency {
  width: 21.425%;
}

.value-table th,
.value-table td {
  box-sizing: border-box;
  height: 58px;
  padding: 15px 18px;
  border: 0;
  border-top: 1px solid var(--vt-border);
  vertical-align: middle;
  text-align: left;
}

.value-table thead th {
  height: auto;
  padding-block: 16px;
  border-top: 0;
  color: var(--vt-heading);
  font-family:
    var(
      --font-mono,
      "JetBrains Mono",
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Consolas,
      monospace
    );
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: normal;
}

.value-table thead th:first-child {
  background: linear-gradient(
    90deg,
    rgba(190, 124, 73, 0.14),
    rgba(190, 124, 73, 0.03)
  );
}

.value-table thead th:nth-child(2) {
  color: var(--vt-success);
  background: var(--vt-success-head);
  box-shadow: inset 2px 0 0 var(--vt-success);
}

.value-table thead th:nth-child(3) {
  color: #9aa6b8;
}

.value-table thead th:nth-child(4) {
  color: var(--vt-danger);
  background: rgba(240, 65, 62, 0.06);
}

.value-table tbody th {
  color: var(--vt-text);
  font-size: 0.98rem;
  font-weight: 400;
  line-height: 1.35;
}

.value-table__label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-width: 0;
}

.value-table__label-text {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.35;
}

.value-table__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--vt-accent-line);
  border-radius: 50%;
  color: #d7b079;
  background: var(--vt-accent-soft);
  font-size: 0.7rem;
  line-height: 1;
}

.value-table tbody td {
  color: var(--vt-muted);
  font-family:
    var(
      --font-mono,
      "JetBrains Mono",
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Consolas,
      monospace
    );
  font-size: 0.94rem;
  font-weight: 400;
  line-height: 1.35;
  white-space: nowrap;
}

.value-table tbody td:nth-child(2) {
  color: var(--vt-success);
  background: var(--vt-success-bg);
  box-shadow: inset 2px 0 0 var(--vt-success);
  font-size: 0.96rem;
  font-weight: 700;
}

.value-table tbody td:nth-child(4) {
  color: var(--vt-danger);
  background: var(--vt-danger-bg);
}

.value-table tbody tr:nth-child(even) th,
.value-table tbody tr:nth-child(even) td:nth-child(3) {
  background-color: rgba(255, 255, 255, 0.018);
}

.value-table tbody tr:nth-child(even) td:nth-child(2) {
  background: var(--vt-success-bg);
}

.value-table tbody tr:nth-child(even) td:nth-child(4) {
  background: rgba(240, 65, 62, 0.05);
}

/* Mobilon az első oszlop 70vw, a többi fit-content jellegű. */
@media (max-width: 767px) {
  .value-table-scroll {
    border-radius: 18px;
    padding-bottom: 2px;
  }

  .value-table {
    width: max-content;
    min-width: 100%;
    table-layout: auto;
  }

  .value-table__col--feature {
    width: 70vw;
  }

  .value-table th:first-child,
  .value-table td:first-child {
    width: 70vw;
    min-width: 70vw;
    max-width: 70vw;
  }

  .value-table__col--mine,
  .value-table__col--freelancer,
  .value-table__col--agency {
    width: auto;
  }

  .value-table th:not(:first-child),
  .value-table td:not(:first-child) {
    width: 1%;
    white-space: nowrap;
  }

  .value-table th,
  .value-table td {
    padding-inline: clamp(14px, 4vw, 20px);
  }
}


/* KOMPONENS - Price comparison */

.price-comp-section{
    border-radius: 20px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
	background: var(--color-light);
}

.justify-around .e-con-inner, .justify-around{
	justify-content:space-around !important;
}

.feature-list {
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.feature-list__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.feature-list__icon {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	line-height: 0;
	color: var(--color-primary);
	margin-top: 5px;
}

.feature-list__icon svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.feature-list__text {
	display: block;
	min-width: 0;
	line-height: 1.45;
}

/* KOMPONENS - Szaggatott vonalas kiemeles text box */

.dotted-border-text-box{
    border: 1px dashed rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    padding: 14px 20px;
    margin: 0px 0px 22px;
    font-style: italic;
}

/* KOMPONENS - CTA box */

.cta-box{
    border-radius: 32px;
    border: 1px solid rgba(190, 124, 73, 0.28);
    background: radial-gradient(120% 130% at 50% -12%, rgba(190, 124, 73, 0.34) 0%, rgba(190, 124, 73, 0.11) 40%, rgb(14, 22, 38) 78%);
    padding: clamp(56px, 8vw, 104px) 28px;
    box-shadow: 0 0 0 1px rgba(207,155,92,.32),0 10px 44px -6px rgba(178,106,62,.42), 0 30px 80px rgba(1, 3, 8, .6);
}

.small-cta-box{
    background: linear-gradient(rgb(16, 27, 48) 0%, rgb(12, 20, 38) 100%);
    border: 1px solid rgba(190, 124, 73, 0.28);
    border-radius: 32px;
    padding: 42px 36px 36px;
    box-shadow: var(--glow-accent), 0 26px 64px -26px rgba(190, 124, 73, .5);
}

/*
Sticky Rotate Stack

Működési classok:

Szülő:
.sticky-rotate-text-section

Kisebb térközű változat:
.sticky-rotate-text-section-small

Elemek:
.sticky-rotate-text

Opcionális vizuális stílus:

Szülő:
.sticky-rotate-text-section--dark

Kártya:
.sticky-rotate-text-card
*/


/* =========================================================
1. MŰKÖDÉSI RÉTEG – dizájntól független
========================================================= */

.sticky-rotate-text-section {
	/* JavaScript nélkül használt alapértékek */
	--srt-sticky-top: 260px;
	--srt-card-gap: clamp(140px, 20vh, 260px);
	--srt-mobile-gap: 20px;

	/*
	 * A JS ezeket számként olvassa.
	 * Ne adj meg utánuk deg vagy px mértékegységet.
	 */
	--srt-angle-start: 12;
	--srt-angle-step: 2;
	--srt-angle-min: 3;
	--srt-min-top: 80;
	--srt-center-offset: 0;
	--srt-trigger-offset: 2;

	counter-reset: stickyRotateText;
}


/* Kisebb térközű változat */
.sticky-rotate-text-section-small {
	--srt-card-gap: 80px;
}


/* A class kizárólag a sticky/forgatási működést adja. */
.sticky-rotate-text {
	position: relative;
	z-index: var(--srt-z, 1);

	transform: rotateZ(0.02deg);
	transform-origin: 50% 50%;
	transition: transform 0.5s var(
		--ease,
		cubic-bezier(.22, 1, .36, 1)
	);
}


/* Sticky csak akkor aktív, amikor a szakasz a megfigyelt zónában van. */
.sticky-rotate-text-section.srt-ready.srt-active .sticky-rotate-text {
	position: sticky;
	top: var(
		--srt-card-top,
		var(--srt-sticky-top, 260px)
	);
}


/* GPU-réteg csak az aktív animáció idejére. */
.sticky-rotate-text-section.srt-active:not(.srt-last-reached) .sticky-rotate-text {
	will-change: transform;
}

.sticky-rotate-text-section.srt-last-reached .sticky-rotate-text {
	will-change: auto;
}


/* A következő elem beérkezésekor aktivált forgatás. */
.sticky-rotate-text.srt-tilted {
	transform: rotateZ(var(--srt-angle, 8deg));
}


/* A scroll-teret az egymást követő elemek közti felső margó adja. */
.sticky-rotate-text-section .sticky-rotate-text {
	margin-bottom: 0 !important;
}


@media (min-width: 768px) {

	.sticky-rotate-text-section .sticky-rotate-text + .sticky-rotate-text {
		margin-top: var(
			--srt-card-gap,
			clamp(140px, 20vh, 260px)
		) !important;
	}

}


/* Mobilon nincs sticky és nincs forgatás. */
@media (max-width: 767px) {

	.sticky-rotate-text-section .sticky-rotate-text {
		position: relative !important;
		top: auto !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

	.sticky-rotate-text-section .sticky-rotate-text + .sticky-rotate-text {
		margin-top: var(--srt-mobile-gap, 20px) !important;
	}

}


/* Csökkentett mozgás esetén nincs animáció. */
@media (prefers-reduced-motion: reduce) {

	.sticky-rotate-text {
		position: relative !important;
		top: auto !important;
		transform: none !important;
		transition: none !important;
		will-change: auto !important;
	}

}


/* =========================================================
   2. OPCIONÁLIS VIZUÁLIS RÉTEG
   A korábbi szöveges kártyák eredeti megjelenése.
   Az új elemekre ezt a class-t nem kötelező rátenni.
   ========================================================= */

/* A korábbi szakasz sötét háttere külön opcionális class. */
.sticky-rotate-text-section--dark {
	background: var(--color-secondary) !important;
}

/* A korábbi szöveges kártyák vizuális stílusa. */
.sticky-rotate-text-card {
	counter-increment: stickyRotateText;

	display: flex;
	align-items: center;
	gap: 26px;

	padding: clamp(26px, 3vw, 40px) 32px;
	background: var(--color-light);
	border: 1px solid var(--color-border);
	border-radius: 30px;
	box-shadow: 0 26px 70px rgba(1, 3, 8, 0.42);
}

/* Elementor text widget belső tartalma. */
.sticky-rotate-text-card > .elementor-widget-container,
.sticky-rotate-text-card > div {
	flex: 1 1 0;
}

/* Automatikus sorszám. */
.sticky-rotate-text-card::before {
	content: counter(stickyRotateText, decimal-leading-zero);

	flex: 0 0 auto;
	margin-top: -10px;

	font-family: var(--font-display);
	font-size: clamp(2.6rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-primary);
	opacity: 0.25;
}

/* Cím. */
.sticky-rotate-text-card h3 {
	margin: 0 0 10px;
	color: var(--color-white);
}

/* Bekezdés és Elementor belső szövegtartalom. */
.sticky-rotate-text-card p,
.sticky-rotate-text-card > .elementor-widget-container,
.sticky-rotate-text-card > div {
	color: var(--color-text);
	line-height: 1.62;
}

@media (max-width: 767px) {
	.sticky-rotate-text-card {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;

		padding: 28px 24px;
		border-radius: 24px;
	}

	.sticky-rotate-text-card::before {
		margin-top: 0;
		margin-bottom: 6px;
	}
}


/* =========================================================
   3. ÁLTALÁNOS SEGÉDCLASS
   ========================================================= */

.self-center {
	align-self: center !important;
}

/* KOMPONENS - Mockup text */
.mockup-text{
    font-weight: 600;
    font-size: clamp(1.2rem, 3.2vw, 2.7rem);
    line-height: 1.6;
    letter-spacing: -0.02em;
    color: rgb(244, 246, 250);
    text-shadow: rgba(0, 0, 0, 0.5) 0px 2px 30px;
}
	
/* KOMPONENS - mockup.js */

/* ── Boltmotor: P.S. mockup-jelenet (15 — "Olvasd el ezt, mielőtt bezárod...") ──
 *
 * A pin-mód CSS-e KIZÁRÓLAG akkor él, ha a JS ráteszi a .bm-mockup-on osztályt
 * a .mockup-text-section szekcióra (asztali gépen, első interakció után), és a
 * .bm-mock-pin osztályt a jelenet HTML-widgetjére. Előtte / mobilon / JS nélkül
 * a widget egy STATIKUS laptop-mockup, a szöveg + gomb a natív flow-ban marad.
 *
 * Működés (a boltmotor-mockup.js-sel együtt):
 *   1) a jelenet-widget teljes képernyős képként áll a flow-ban; a viewport
 *      tetejére érve kitapad (sticky), és sötétítő overlayt kap (JS)
 *   2) a .mockup-text NATÍV görgetéssel úszik fel a kitapadt kép fölött
 *      (−100vh margó + spacer-paddingok — ehhez NEM fut JS; ugyanaz a minta,
 *      mint a masonry-modul ajánlat-szövegénél)
 *   3) amikor a szöveg kigördült, a kép laptop-mockuppá zsugorodik (JS írja a
 *      width/height/border értékeket), a CTA-gomb a laptop alatt úszik be
 *   4) az alsó spacer végén a pin elenged, a laptop + gomb együtt görög tovább
 */

/* ═══ ALAP (JS nélkül / mobilon): statikus laptop-mockup a tartalom szélességében ═══ */

.bm-mock { width: 100%; }
.bm-mock__stage { position: relative; }

.bm-mock__screen {
  position: relative;
  width: 100%;
  margin: 0 auto;
  aspect-ratio: 16 / 10;               /* ▶ statikus kijelző-arány */
  border: clamp(4px, 0.55vw, 8px) solid #0B0B0D;
  border-radius: clamp(10px, 1.1vw, 16px);
  overflow: hidden;
  box-sizing: border-box;
  background: #04070E;
}
.bm-mock__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.bm-mock__dim {
  position: absolute;
  inset: 0;
  background: #04060C;                 /* ▶ sötétítő overlay színe */
  opacity: 0;                          /* az erősségét görgetésre a JS írja */
  pointer-events: none;
}

/* laptop alsó deck — statikusan a kijelző alatt, nála kicsit szélesebb */
.bm-mock__base {
  position: relative;
  width: 104.5%;                       /* a JS DECK_W-jével szinkronban */
  margin: 0 0 0 -2.25%;
  pointer-events: none;
}
.bm-mock__deck {
  position: relative;
  height: clamp(10px, 1.6vw, 18px);
  background: linear-gradient(180deg, #42474F 0%, #23262C 60%, #191B20 100%);
  border-radius: 3px 3px 14px 14px;
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7);
}
.bm-mock__hinge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 18%;
  height: 42%;
  background: linear-gradient(180deg, #1A1C21, #26282E);
  border-radius: 0 0 10px 10px;
}
.bm-mock__shadow {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  width: 120%;
  height: 46px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(0, 0, 0, .55), transparent 72%);
  filter: blur(6px);
}

/* a gomb-slot csak pin-módban él (a JS költözteti bele a gomb-widgetet) */
.bm-mock__btnslot { display: none; }


/* ═══ MOBIL (≤767px): SEMMI JS nem fut — csak egy EGYSZERŰ, statikus laptop a
      végállapotában, a szélességen belül tartva; a szöveg + gomb alatta a natív
      flow-ban (a HTML-ben a widget a címsor után, a szöveg előtt áll) ═══ */
@media (max-width: 767px) {
  /* a laptop-deck és az árnyék ne lógjon ki a kép szélén (letisztult, egyszerű) */
  .bm-mock__base { width: 100%; margin: 0; }
  .bm-mock__shadow { width: 84%; height: 30px; }
}


/* ═══ PIN-MÓD (csak asztalon, csak .bm-mockup-on alatt) ═══ */

@media (min-width: 768px) {

  /* A body-n overflow-x:hidden + overflow-y:auto van (téma/kit), amitől a body
     saját scroll-konténer lesz — az pedig ELTÖRI a position:sticky-t. A clip
     ugyanúgy vág, de NEM csinál scroll-konténert. (A többi pinned modul is
     beteszi — duplán nem árt.) */
  body {
    overflow-x: clip !important;
    overflow-y: visible !important;
  }

  /* Ha az Elementorban a szekción Overflow: Hidden van, a szekció
     scroll-konténer lesz és a belső sticky nem tapad ki — pin-módban feloldjuk.
     A 100vw-s kép vízszintes kilógását az overflow-x:clip így is levágja. */
  .mockup-text-section.bm-mockup-on {
    position: relative;
    overflow-x: clip !important;
    overflow-y: visible !important;
  }
  .mockup-text-section.bm-mockup-on > .e-con-inner {
    overflow: visible !important;      /* scroll-konténer itt se keletkezzen (sticky!) */
  }

  /* ── 1) A JELENET-WIDGET: kitapadó 100vh "színpad" ──
     (a .bm-mock-pin osztályt a JS teszi a HTML-widget wrapperére) */
  .bm-mockup-on .bm-mock-pin {
    position: sticky;
    top: 0;
    z-index: 1;
    height: 100vh;
    min-height: 0;
    width: 100%;
    max-width: none !important;        /* a szélesség-utilityk ellen */
    margin: 0;
    padding: 0 !important;
    flex: none;                        /* e nélkül a flex-grow elvenné a sticky útját */
    align-self: stretch;               /* az items-center utility ellen */
    overflow: visible;                 /* a 100vw-s kép kilóghasson a boxed wrapperből */
  }
  .bm-mockup-on .bm-mock,
  .bm-mockup-on .bm-mock__stage {
    position: relative;
    height: 100%;
  }

  /* a kijelző: kezdetben teljes képernyő — a méreteit görgetésre a JS írja */
  .bm-mockup-on .bm-mock__screen {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 100vh;
    margin: 0;
    aspect-ratio: auto;
    border: 0 solid #0B0B0D;           /* ▶ bezel színe (vastagságát a JS írja) */
    border-radius: 0;
    z-index: 3;
    overflow: hidden;
    will-change: transform;            /* csak a transform kompozitálható; a w/h-t hagyjuk ki */
  }

  /* laptop deck: pin-módban abszolút, a kijelző alá a JS pozicionálja */
  .bm-mockup-on .bm-mock__base {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    width: auto;
    margin: 0;
    opacity: 0;                        /* a zsugorodással úszik be (JS) */
    will-change: opacity, transform;
  }
  .bm-mockup-on .bm-mock__deck { height: auto; }

  /* ── 2) A SZÖVEG: natív görgetéssel a pinelt kép FÖLÖTT ── */
  .mockup-text-section.bm-mockup-on .mockup-text {
    position: relative;
    z-index: 2;                        /* a sticky színpad (z:1) fölött */
    margin: -100vh auto 0 !important;  /* visszahúzzuk a pinelt kép fölé */
    /* ▶ felső spacer = MIKOR ússzon be a szöveg: 100vh = pont a pin kezdetén
         ér a képernyő aljára; nagyobb érték = később (kis levegő a sötétedésnek)
       ▶ alsó spacer = a pin hossza a szöveg kigörgése UTÁN — legalább
         100vh + ZOOM_GAP_VH + ZOOM_VH + tartás legyen (JS-szinkron!),
         különben a zsugorodás vége előtt elenged a pin */
    padding: 110vh 0 200vh !important;
    pointer-events: none;              /* a spacer-sávok ne fogják el a kattintást */
  }
  /* olvashatóság a kép fölött (a terv szerinti árnyék) */
  .bm-mockup-on .mockup-text p {
    text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
  }

  /* ── 3) A CTA-GOMB a laptop alatt (a JS költözteti be, ő is mozgatja) ── */
  .bm-mockup-on .bm-mock__btnslot {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;
    width: min(1100px, calc(100vw - 48px));  /* ▶ a gomb-sáv szélessége a végállapotban */
    opacity: 0;
    pointer-events: none;              /* amíg nem látszik — a JS kapcsolja be */
    will-change: opacity, transform;
  }
  .bm-mockup-on .bm-mock__btnslot .elementor-widget-button {
    width: 100% !important;            /* a width-70 utility ellen */
    max-width: none !important;
    margin: 0 !important;
  }
}

/* KOMPONENS - footer */

.footer-section{
    padding: clamp(40px, 5vw, 80px) 20px !important;
    background: var(--color-secondary);
}

.footer-section:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(207, 155, 92, 0.45) 28%, rgba(18, 224, 155, 0.45) 72%, transparent);
    pointer-events: none;
    z-index: 1;
}

.footer-section{
	padding-bottom:0px !important;
}

.footer-bottom, .footer-particle-section{
    padding: 0px !important;
    background: var(--color-secondary);
}

.footer-bottom > .e-con-inner{
    border-top: 1px solid var(--color-border);
	padding: clamp(20px, 5vw, 40px) 20px !important;
}

/* KOMPONENS - header */


.header-section{
    padding: 0px 20px !important;
    z-index: 999;
}

.header-section > .e-con-inner{
    padding: 7px 10px 7px 30px;
    border: 1px solid var(--color-border);
    border-radius: 100px;
	backdrop-filter: blur(18px) saturate(1.2);
}

.menu-list.elementor-element, .menu-list .elementor-text-editor{
    display: flex;
    align-items: center;
    gap: 30px;
}

.menu-list p{
    margin-bottom: 0px !important;
}

/* KOMPONENS - boltmotor-particle.js */

/* ═══════════ Boltmotor — Lábléc particle wordmark ═══════════
   A terv lábléc-wordmarkjának kerete: a canvas maga üres elem,
   a rajzot a boltmotor-particle.js végzi (csak asztalon, lustán).
   A [boltmotor_particle] shortcode ezt a .bm-pword > canvas markupot írja ki.

   Ha nem külön fájlként töltöd be (boltmotor-particle.php register-e), hanem a
   child style.css-be teszed, csak másold be az alábbi szabályokat. */

.bm-pword {
  line-height: .82;
  overflow: hidden;
}

.bm-pword__canvas {
  display: block;
  width: 100%;
  height: clamp(64px, 16vw, 236px); /* a terv méretezése */
  opacity: .8;        /* a terv particleOpacity=0.4 — itt hangolható (0..1) */
	margin-left: -60px;
    margin-right: -60px;
    max-width: none !important;
    width: calc(100% + 120px) !important;
}

/* Mobilon SEMMI: nem jelenik meg, helyet sem foglal
   (a JS már betöltéskor kilépett, ide rajzolás sosem történik) */
@media (max-width: 767px) {
  .bm-pword { display: none; }
}

.footer-particle-section{
	margin-bottom: -40px !important;
}

/* KOMPONENS - boltmotor-header.js */


/* ══════════════════════════════════════════════════════════════════
   Boltmotor — FEJLÉC (lebegő, görgetést lustán követő "bob")
   ------------------------------------------------------------------
   Ez CSAK az effekthez szükséges vázat adja: a .header-section fixen a
   viewport tetején lebeg, a JS pedig transform-mal finoman mozgatja.
   A VIZUÁLIS stílust (háttér, blur/glass, pill-forma, keret, színek,
   belső padding) NE ide írd — az a Te saját CSS-ed marad.
   ══════════════════════════════════════════════════════════════════ */

.header-section{
  position: fixed;             /* a lebegéshez kötelező (a terv: fixed) */
  top: 20px;                   /* HANGOLHATÓ: távolság a viewport tetejétől (terv: 22px) */
  left: 0;
  right: 0;
  z-index: 999;         /* minden fölött (a terv szerint) */
  will-change: transform;      /* a JS translateY-ját kompozitált (GPU) rétegen mozgassa */
  backface-visibility: hidden; /* tisztább GPU-rajz, subpixel-remegés ellen */

  /* FONTOS: az Elementor a konténerre alapból tesz egy `transform .4s`
     transitiont (--e-con-transform-transition-duration). Ez ELRONTANÁ a
     bobot: minden JS-transform 0.4s-en át interpolálódna → lomha, késleltetett
     mozgás, és a FOLLOW-hangolás sem érvényesülne. Ezért CSAK a
     transform-transitiont nullázzuk — a háttér/keret/árnyék hover-transition
     érintetlen marad. */
  --e-con-transform-transition-duration: 0s;
}

/* A .header-section fixed → kikerül a flow-ból, és a hero fölé lebeg
   (pontosan mint a tervben). Ha NEM akarod, hogy a tartalom alá csússzon,
   a hero/első szekció kapjon annyi felső paddinget, amennyi a fejléc
   magassága + a fenti `top`. */

/* Rendszer-szintű "kevesebb mozgás": a fejléc marad fixen, nem bobol
   (a JS is kilép ilyenkor — ez csak biztosíték egy esetleges maradék
   transform ellen). */
@media (prefers-reduced-motion: reduce){
  .header-section{ transform: none !important; }
}

/* KOMPONENS - GYIK */

/* =========================================================
   BOLTMOTOR – GYIK ACCORDION
   ========================================================= */

.bm-faq {
	--bm-faq-ease: cubic-bezier(.2, .7, .2, 1);

	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}


/* Kártya */

.bm-faq__item {
	position: relative;
	overflow: hidden;

	width: 100%;

	border: 1px solid var(--color-border);
	border-radius: 18px;

	background: var(--color-light);

	transition: border-color .3s ease;
}

.bm-faq__item:hover {
	border-color: rgba(255,255,255,.14);
}

.bm-faq__item.is-active {
	border-color: rgba(190,124,73,.2);
}


/* Kérdés */

.bm-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;

	width: 100%;
	min-height: 72px;

	padding: 22px 26px;

	color: var(--color-sand);

	font-family: var(--font-display);
	font-size: clamp(1rem, .92rem + .2vw, 1.125rem);
	font-weight: 500;
	line-height: 1.3;
	text-align: left;

	cursor: pointer;
	user-select: none;
}

.bm-faq__question:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: -4px;
	border-radius: 18px;
}


/* + / − ikon */

.bm-faq__icon {
	position: relative;

	flex: 0 0 22px;

	width: 22px;
	height: 22px;

	color: var(--color-gold);
}

.bm-faq__icon::before,
.bm-faq__icon::after {
	content: "";

	position: absolute;
	top: 50%;
	left: 50%;

	width: 11px;
	height: 1.5px;

	border-radius: 2px;

	background: currentColor;

	transform: translate(-50%, -50%);

	transition:
		transform .35s var(--bm-faq-ease),
		opacity .35s var(--bm-faq-ease);
}

.bm-faq__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.bm-faq__item.is-active .bm-faq__icon::after {
	opacity: 0;
	transform: translate(-50%, -50%) rotate(180deg);
}


/* Válasz */

.bm-faq__answer {
	height: 0;
	overflow: hidden;
}

.bm-faq__item.is-active .bm-faq__answer {
	height: auto;
}

.bm-faq__answer-inner {
	padding: 0 70px 25px 26px;
	transform-origin: top center;
}

.bm-faq__answer p {
	margin: 0;

	color: var(--color-text);

	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.7;
	margin-bottom: 15px;
}

.bm-faq__answer p:last-of-type {
	margin-bottom: 0px;
}


/* Mobil */

@media (max-width: 767px) {

	.bm-faq {
		gap: 10px;
	}

	.bm-faq__question {
		min-height: 64px;
		padding: 19px 18px;
		gap: 18px;
		font-size: 1rem;
	}

	.bm-faq__answer-inner {
		padding: 0 48px 20px 18px;
	}

}


/* Accessibility */

@media (prefers-reduced-motion: reduce) {

	.bm-faq__item,
	.bm-faq__icon::before,
	.bm-faq__icon::after {
		transition: none;
	}

}

/* =========================================================
   BOLTMOTOR – GYIK / TOVÁBBI KÉRDÉSEK
   ========================================================= */


/* Az 5. kérdés utáni rejtett rész */

.bm-faq__extra {
	--bm-faq-preview-height: 118px;

	position: relative;

	height: var(--bm-faq-preview-height);
	overflow: hidden;

	contain: paint;

	-webkit-mask-image: linear-gradient(
		to bottom,
		#000 0%,
		rgba(0, 0, 0, .9) 25%,
		rgba(0, 0, 0, .45) 65%,
		transparent 100%
	);

	mask-image: linear-gradient(
		to bottom,
		#000 0%,
		rgba(0, 0, 0, .9) 25%,
		rgba(0, 0, 0, .45) 65%,
		transparent 100%
	);
}


/* A további FAQ elemek belső konténere */

.bm-faq__extra-inner {
	display: flex;
	flex-direction: column;
	gap: 12px;

	opacity: .48;

	filter: blur(2px);

	transform: scale(.995);
	transform-origin: top center;

	transition:
		opacity .5s var(--bm-faq-ease),
		filter .5s var(--bm-faq-ease),
		transform .5s var(--bm-faq-ease);
}


/*
 * Progresszíven erősödő blur.
 * Csak a kb. 118px magas előnézeten működik,
 * ezért minimális a renderelési költsége.
 */

.bm-faq__extra::after {
	content: "";

	position: absolute;
	z-index: 2;
	inset: 0;

	pointer-events: none;

	-webkit-backdrop-filter: blur(7px);
	backdrop-filter: blur(7px);

	-webkit-mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 0, 0, .08) 15%,
		rgba(0, 0, 0, .35) 45%,
		rgba(0, 0, 0, .75) 72%,
		#000 100%
	);

	mask-image: linear-gradient(
		to bottom,
		transparent 0%,
		rgba(0, 0, 0, .08) 15%,
		rgba(0, 0, 0, .35) 45%,
		rgba(0, 0, 0, .75) 72%,
		#000 100%
	);

	opacity: 1;

	transition:
		opacity .5s var(--bm-faq-ease);
}


/* Összecsukva ne legyen kattintható a blur mögötti FAQ */

.bm-faq__extra:not(.is-expanded) .bm-faq__item {
	pointer-events: none;
}


/* Nyitott állapot */

.bm-faq__extra.is-expanded {
	height: auto;
	overflow: visible;

	contain: none;

	-webkit-mask-image: none;
	mask-image: none;
}

.bm-faq__extra.is-expanded .bm-faq__extra-inner {
	opacity: 1;

	filter: blur(0);

	transform: scale(1);
}

.bm-faq__extra.is-expanded::after {
	opacity: 0;
}


/* =========================================================
   TOVÁBBIAK GOMB
   ========================================================= */

.bm-faq__more-wrap {
	position: relative;
	z-index: 3;

	display: flex;
	justify-content: center;

	width: 100%;

	margin-top: 2px;
}


/* Gomb */

.bm-faq__more, .bm-faq__more:focus, .bm-faq__more:hover {
	appearance: none;
	-webkit-appearance: none;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;

	min-height: 46px;

	padding: 11px 20px;

	border: 1px solid var(--color-border);
	border-radius: 999px;

	background: var(--color-light);

	color: var(--color-sand);

	font-family: var(--font-body);
	font-size: .9375rem;
	font-weight: 500;
	line-height: 1;

	cursor: pointer;

	transition:
		border-color .3s ease,
		color .3s ease,
		background-color .3s ease,
		transform .3s var(--bm-faq-ease);
}

.bm-faq__more:hover {
	border-color: rgba(190,124,73,.35);

	color: var(--color-gold);
}

.bm-faq__more:active {
	transform: scale(.98);
}

.bm-faq__more:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}


/* Nyíl */

.bm-faq__more-icon {
	position: relative;

	display: block;

	width: 14px;
	height: 14px;

	flex: 0 0 14px;

	transition:
		transform .4s var(--bm-faq-ease);
}

.bm-faq__more-icon::before {
	content: "";

	position: absolute;
	top: 3px;
	left: 3px;

	width: 6px;
	height: 6px;

	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;

	transform: rotate(45deg);
}

.bm-faq__more.is-expanded .bm-faq__more-icon {
	transform: rotate(180deg);
}


/* =========================================================
   MOBIL
   ========================================================= */

@media (max-width: 767px) {

	.bm-faq__extra {
		--bm-faq-preview-height: 100px;
	}

	.bm-faq__extra-inner {
		gap: 10px;
	}

	.bm-faq__more {
		min-height: 44px;

		padding: 10px 18px;

		font-size: .9rem;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.bm-faq__extra-inner,
	.bm-faq__extra::after,
	.bm-faq__more,
	.bm-faq__more-icon {
		transition: none;
	}

}

/* KOMPONENS - Menü */

/* =========================================================
   BOLTMOTOR NAVIGATION
   Desktop + glass mobile menu
   ========================================================= */

.bm-nav {
	position: relative;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* Elementor Text Editor esetleges automatikus <p> tagek */
.bm-nav p {
	margin: 0;
}


/* =========================================================
   DESKTOP NAV
   ========================================================= */

.bm-nav__desktop {
	display: flex;
	align-items: center;
	gap: clamp(24px, 2.2vw, 42px);
}


/* Menülink */
.bm-nav__link {
	position: relative;
	display: inline-flex;
	align-items: center;

	padding: 13px 2px;

	font-family: inherit;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;

	color: #ffffff !important;
	text-decoration: none !important;

	white-space: nowrap;

	opacity: .82;

	transform: translateY(0);

	transition:
		opacity .25s ease,
		transform .25s cubic-bezier(.2,.8,.2,1);
}


/* Arany fénycsík */
.bm-nav__link::before {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 4px;

	width: calc(100% + 12px);
	height: 1px;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			#b26a3e 20%,
			#d7b079 50%,
			#b26a3e 80%,
			transparent 100%
		);

	transform:
		translateX(-50%)
		scaleX(0);

	transform-origin: center;

	opacity: 0;

	transition:
		transform .32s cubic-bezier(.2,.8,.2,1),
		opacity .25s ease;
}


/* Apró fény-pont */
.bm-nav__link::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 2px;

	width: 4px;
	height: 4px;

	border-radius: 50%;

	background: #d7b079;

	box-shadow:
		0 0 8px rgba(215,176,121,.65),
		0 0 18px rgba(178,106,62,.35);

	transform:
		translate(-50%, 7px)
		scale(0);

	opacity: 0;

	transition:
		transform .32s cubic-bezier(.2,.8,.2,1),
		opacity .2s ease;
}


@media (hover: hover) and (pointer: fine) {

	.bm-nav__link:hover {
		color: #ffffff !important;
		opacity: 1;

		transform: translateY(-2px);
	}

	.bm-nav__link:hover::before {
		transform:
			translateX(-50%)
			scaleX(1);

		opacity: 1;
	}

	.bm-nav__link:hover::after {
		transform:
			translate(-50%, 0)
			scale(1);

		opacity: 1;
	}
}


/* billentyűzet */
.bm-nav a:focus-visible,
.bm-nav button:focus-visible {
	outline: 1px solid #d7b079;
	outline-offset: 5px;
}


/* =========================================================
   HAMBURGER
   ========================================================= */

.bm-nav__toggle {
	display: none;

	position: relative;

	width: 50px;
	height: 50px;

	padding: 0;

	border: 1px solid rgba(255,255,255,.12);
	border-radius: 15px;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,.055),
			rgba(255,255,255,.018)
		);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.05),
		0 10px 35px rgba(0,0,0,.18);

	color: #fff;

	cursor: pointer;

	-webkit-tap-highlight-color: transparent;
}


/* enyhe cognac sarokfény */
.bm-nav__toggle::before {
	content: "";

	position: absolute;
	inset: -1px;

	border-radius: inherit;

	background:
		radial-gradient(
			circle at 100% 0,
			rgba(215,176,121,.24),
			transparent 44%
		);

	pointer-events: none;
}


/* =========================================================
   HAMBURGER VONALAK
   ========================================================= */

.bm-nav__toggle-lines {
	position: absolute;
	left: 50%;
	top: 50%;

	width: 23px;
	height: 18px;

	transform: translate(-50%, -50%);
}


.bm-nav__toggle-lines span {
	position: absolute;
	left: 0;

	height: 1.5px;

	border-radius: 999px;

	background: #ffffff;

	transform-origin: center;

	transition:
		top .28s cubic-bezier(.2,.8,.2,1),
		bottom .28s cubic-bezier(.2,.8,.2,1),
		width .28s cubic-bezier(.2,.8,.2,1),
		opacity .18s ease,
		transform .32s cubic-bezier(.2,.8,.2,1);
}


/* szándékosan asszimetrikus */
.bm-nav__toggle-lines span:nth-child(1) {
	top: 1px;
	width: 23px;
}


.bm-nav__toggle-lines span:nth-child(2) {
	top: 8px;
	width: 15px;
}


.bm-nav__toggle-lines span:nth-child(3) {
	bottom: 1px;
	width: 20px;
	left: 3px;
}


/* apró cognac "szikra" */
.bm-nav__toggle-spark {
	position: absolute;

	right: 8px;
	top: 8px;

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: #d7b079;

	box-shadow: 0 0 11px rgba(215,176,121,.6);

	transition:
		transform .4s cubic-bezier(.2,.8,.2,1),
		opacity .25s ease;
}


/* =========================================================
   NYITOTT HAMBURGER
   ========================================================= */

.bm-nav.is-open .bm-nav__toggle {
	border-color: rgba(215,176,121,.34);

	background:
		linear-gradient(
			145deg,
			rgba(178,106,62,.15),
			rgba(255,255,255,.025)
		);
}


.bm-nav.is-open .bm-nav__toggle-lines span:nth-child(1) {
	top: 8px;
	width: 23px;

	transform: rotate(45deg);
}


.bm-nav.is-open .bm-nav__toggle-lines span:nth-child(2) {
	width: 0;
	opacity: 0;
}


.bm-nav.is-open .bm-nav__toggle-lines span:nth-child(3) {
	bottom: 8px;
	left: 0;

	width: 23px;

	transform: rotate(-45deg);
}


.bm-nav.is-open .bm-nav__toggle-spark {
	transform:
		translate(-26px, 26px)
		scale(.7);

	opacity: .45;
}


/* =========================================================
   MOBILE GLASS PANEL
   ========================================================= */

.bm-nav__panel {
	position: absolute;

	top: calc(100% + 14px);
	right: 0;

	width: min(390px, calc(100vw - 24px));

	padding: 14px;

	border: 1px solid rgba(255,255,255,.105);
	border-radius: 22px;

	background:
		radial-gradient(
			circle at 100% 0,
			rgba(18,224,155,.07),
			transparent 32%
		),
		radial-gradient(
			circle at 0 100%,
			rgba(178,106,62,.12),
			transparent 42%
		),
		rgba(7,11,22,.82);

	box-shadow:
		0 30px 80px rgba(0,0,0,.48),
		inset 0 1px 0 rgba(255,255,255,.055);

	-webkit-backdrop-filter: blur(20px) saturate(135%);
	backdrop-filter: blur(20px) saturate(135%);

	opacity: 0;

	visibility: hidden;
	pointer-events: none;

	transform:
		translateY(-8px)
		scale(.975);

	transform-origin: top right;

	transition:
		opacity .22s ease,
		transform .32s cubic-bezier(.2,.8,.2,1),
		visibility 0s linear .32s;
}


/* megnyitás */
.bm-nav.is-open .bm-nav__panel {
	opacity: 1;

	visibility: visible;
	pointer-events: auto;

	transform:
		translateY(0)
		scale(1);

	transition:
		opacity .22s ease,
		transform .32s cubic-bezier(.2,.8,.2,1),
		visibility 0s;
}


/* =========================================================
   PANEL FEJLÉC
   ========================================================= */

.bm-nav__panel-head {
	display: flex;
	align-items: center;
	justify-content: space-between;

	padding: 5px 7px 12px;

	font-size: 10px;
	font-weight: 600;

	letter-spacing: .16em;
	text-transform: uppercase;

	color: rgba(215,176,121,.8);
}


.bm-nav__panel-head span:last-child {
	color: rgba(255,255,255,.38);
}


/* =========================================================
   MOBIL MENÜPONTOK
   ========================================================= */

.bm-nav__mobile-links {
	display: grid;
	gap: 6px;
}


.bm-nav__mobile-link {
	position: relative;

	display: grid;
	grid-template-columns: 38px 1fr auto;
	align-items: center;

	min-height: 64px;

	padding: 0 15px 0 13px;

	overflow: hidden;

	border: 1px solid rgba(255,255,255,.075);
	border-radius: 14px;

	background:
		linear-gradient(
			110deg,
			rgba(255,255,255,.038),
			rgba(255,255,255,.012)
		);

	color: #ffffff !important;
	text-decoration: none !important;

	transition:
		border-color .25s ease,
		background-color .25s ease,
		transform .28s cubic-bezier(.2,.8,.2,1);
}


/* futurisztikus fénycsík */
.bm-nav__mobile-link::before {
	content: "";

	position: absolute;

	left: 0;
	top: 10px;
	bottom: 10px;

	width: 2px;

	border-radius: 100px;

	background:
		linear-gradient(
			to bottom,
			transparent,
			#d7b079,
			#b26a3e,
			transparent
		);

	transform: scaleY(0);

	transition: transform .3s cubic-bezier(.2,.8,.2,1);
}


/* háttérfény */
.bm-nav__mobile-link::after {
	content: "";

	position: absolute;

	width: 100px;
	height: 100px;

	right: -45px;
	top: 50%;

	border-radius: 50%;

	background: rgba(215,176,121,.08);

	transform:
		translateY(-50%)
		scale(.25);

	opacity: 0;

	pointer-events: none;

	transition:
		transform .38s cubic-bezier(.2,.8,.2,1),
		opacity .25s ease;
}


.bm-nav__mobile-index {
	font-size: 10px;
	font-weight: 600;

	letter-spacing: .08em;

	color: #b26a3e;
}


.bm-nav__mobile-label {
	position: relative;
	z-index: 2;

	font-size: 16px;
	font-weight: 600;
	line-height: 1.15;

	color: #ffffff;
}


.bm-nav__mobile-arrow {
	position: relative;
	z-index: 2;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 30px;
	height: 30px;

	border: 1px solid rgba(255,255,255,.09);
	border-radius: 9px;

	font-size: 13px;
	font-weight: 400;

	color: #d7b079;

	transition:
		transform .3s cubic-bezier(.2,.8,.2,1),
		border-color .25s ease;
}


@media (hover: hover) {

	.bm-nav__mobile-link:hover {
		transform: translateX(3px);

		border-color: rgba(215,176,121,.22);

		background-color: rgba(255,255,255,.025);
	}

	.bm-nav__mobile-link:hover::before {
		transform: scaleY(1);
	}

	.bm-nav__mobile-link:hover::after {
		transform:
			translateY(-50%)
			scale(1);

		opacity: 1;
	}

	.bm-nav__mobile-link:hover .bm-nav__mobile-arrow {
		transform:
			translate(2px, -2px)
			rotate(8deg);

		border-color: rgba(215,176,121,.25);
	}
}


/* =========================================================
   PANEL LÁBLÉC
   ========================================================= */

.bm-nav__panel-footer {
	display: flex;
	align-items: center;
	gap: 8px;

	margin-top: 11px;
	padding: 5px 7px 1px;

	font-size: 10px;
	font-weight: 500;

	letter-spacing: .06em;

	color: rgba(255,255,255,.38);
}


.bm-nav__status-dot {
	flex: 0 0 auto;

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: #12e09b;

	box-shadow: 0 0 9px rgba(18,224,155,.55);
}


/* =========================================================
   TABLET / MOBILE
   ========================================================= */

@media (max-width: 1024px) {

	.bm-nav {
		justify-content: flex-end;
	}

	.bm-nav__desktop {
		display: none;
	}

	.bm-nav__toggle {
		display: block;
	}

}


/* =========================================================
   KISEBB MOBIL
   ========================================================= */

@media (max-width: 480px) {

	.bm-nav__toggle {
		width: 46px;
		height: 46px;

		border-radius: 13px;
	}

	.bm-nav__panel {
		top: calc(100% + 10px);

		width: min(360px, calc(100vw - 20px));

		padding: 10px;

		border-radius: 18px;
	}

	.bm-nav__mobile-link {
		min-height: 60px;

		grid-template-columns: 34px 1fr auto;

		padding-left: 11px;
		padding-right: 11px;
	}

	.bm-nav__mobile-label {
		font-size: 15px;
	}

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	.bm-nav *,
	.bm-nav *::before,
	.bm-nav *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}

}

/* KOMPONENS - Free spot progress bar*/

/* ========================================
   KAPACITÁS / SZABAD HELYEK
   ======================================== */

.capacity-bars {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);

	width: 100%;
	max-width: 900px;
	margin-inline: auto;
}


/* ========================================
   EGY KAPACITÁS SOR
   ======================================== */

.capacity-bar {
	display: flex;
	align-items: center;
	gap: var(--space-5);

	width: 100%;
	padding: var(--space-4) var(--space-5);

	box-sizing: border-box;

	border: 1px solid var(--color-border);
	border-radius: 12px;

	background: linear-gradient(
		90deg,
		rgba(178, 106, 62, 0.035),
		rgba(178, 106, 62, 0)
	);
}


/* ========================================
   IKON
   ======================================== */

.capacity-bar__icon {
	flex: 0 0 54px;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 54px;
	height: 54px;

	color: var(--color-gold);

	border: 1px solid var(--color-border);
	border-radius: 50%;

	background: var(--accent-weak);
}

.capacity-bar__icon svg {
	display: block;

	width: 27px;
	height: 27px;
}


/* ========================================
   TARTALOM
   ======================================== */

.capacity-bar__content {
	flex: 1;
	min-width: 0;
}

.capacity-bar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);

	margin-bottom: var(--space-2);
}


/* ========================================
   LABEL
   ======================================== */

.capacity-bar__label {
	font-family: var(--font-body);

	font-size: var(--fs-body-s);
	font-weight: 600;
	line-height: 1.3;

	letter-spacing: 0.1em;
	text-transform: uppercase;

	color: var(--color-primary);
}


/* ========================================
   ÉRTÉK
   ======================================== */

.capacity-bar__value {
	flex-shrink: 0;

	display: flex;
	align-items: baseline;
	gap: var(--space-1);

	font-family: var(--font-display);
	font-size: var(--fs-body);
	font-weight: 500;
	line-height: 1;

	color: var(--color-text);
}

.capacity-bar__value strong {
	font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.25rem);
	font-weight: 600;
	line-height: 1;

	color: var(--color-gold);
}


/* ========================================
   PROGRESS TRACK
   ======================================== */

.capacity-bar__track {
	position: relative;

	width: 100%;
	height: 14px;

	overflow: hidden;

	border: 1px solid var(--color-border);
	border-radius: 100px;

	background: var(--color-bg);
}


/* ========================================
   PROGRESS FILL
   ======================================== */

.capacity-bar__fill {
	position: absolute;
	inset: 0;

	/*
	 * Fontos:
	 * a shimmer kizárólag a kitöltött
	 * területen belül jelenhet meg.
	 */
	overflow: hidden;

	border-radius: inherit;

	background: var(--gradient-cta);

	transform: scaleX(0);
	transform-origin: left center;
}


/*
 * Betöltéskor csak transform animálódik,
 * tehát nincs width alapú layout recalculation.
 */

.capacity-bar.is-loaded .capacity-bar__fill {
	transform: scaleX(var(--progress));

	transition:
		transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ========================================
   FOLYAMATOS FÉNY / SHIMMER
   ======================================== */

.capacity-bar__fill::after {
	content: "";

	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;

	width: 42%;

	pointer-events: none;

	background:
		linear-gradient(
			90deg,
			transparent 0%,
			rgba(255, 255, 255, 0.04) 22%,
			rgba(255, 255, 255, 0.30) 48%,
			rgba(255, 255, 255, 0.10) 58%,
			transparent 100%
		);

	transform:
		translate3d(-170%, 0, 0)
		skewX(-18deg);
}


/*
 * Csak akkor fut, amikor az elem
 * ténylegesen viewportban van.
 */

.capacity-bar.is-inview .capacity-bar__fill::after {
	will-change: transform;

	animation:
		capacity-shine 2.2s linear infinite;
}


/*
 * NINCS megállás a ciklus végén.
 *
 * A fény teljesen a progress baron kívül
 * indul és teljesen azon kívül ér véget.
 *
 * Emiatt az infinite animáció resetje
 * vizuálisan nem észrevehető.
 */

@keyframes capacity-shine {

	from {
		transform:
			translate3d(-170%, 0, 0)
			skewX(-18deg);
	}

	to {
		transform:
			translate3d(360%, 0, 0)
			skewX(-18deg);
	}

}


/* ========================================
   TABLET / MOBIL
   ======================================== */

@media (max-width: 767px) {

	.capacity-bars {
		gap: var(--space-3);
	}

	.capacity-bar {
		gap: var(--space-3);

		padding: var(--space-4);
	}

	.capacity-bar__icon {
		flex-basis: 46px;

		width: 46px;
		height: 46px;
	}

	.capacity-bar__icon svg {
		width: 23px;
		height: 23px;
	}

	.capacity-bar__top {
		gap: var(--space-2);
	}

	.capacity-bar__label {
		font-size: var(--fs-body-s);
	}

	.capacity-bar__value {
		font-size: var(--fs-body-s);
	}

	.capacity-bar__value strong {
		font-size: 1.75rem;
	}

	.capacity-bar__track {
		height: 12px;
	}

}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {

	.capacity-bar__fill,
	.capacity-bar.is-loaded .capacity-bar__fill {
		transform: scaleX(var(--progress));

		transition: none;
	}

	.capacity-bar__fill::after {
		display: none;
	}

}


/* =========================================================
   BOLTMOTOR – PROJEKT FORM (a te CSS-ed, változatlanul)
   ========================================================= */
.bmf{
  --bg:var(--color-secondary,#070B16);
  --bg-soft:var(--color-bg,#0C1322);
  --panel:var(--color-light,#11192C);
  --panel-2:#1A2640;
  --line:var(--color-border,rgba(255,255,255,.08));
  --line-strong:rgba(255,255,255,.20);
  --text:var(--color-sand,#EDE5DC);
  --muted:var(--color-text,#AEB7C2);
  --accent:var(--color-primary,rgb(178,106,62));
  --gold:var(--color-gold,#D7B079);
  --accent-hover:var(--color-gold,#D7B079);
  --accent-soft:var(--accent-weak,rgba(190,124,73,.13));
  --gradient-brand:var(--gradient-cta,linear-gradient(135deg,#D7B079 0%,#BE7C49 34%,#9A6336 60%,#6F4428 82%,#3A2417 100%));
  --positive:var(--color-green,#12E09B);
  --warning:#CF9B5C;
  --danger:#F0413E;
  --radius-sm:10px;
  --radius:18px;
  --radius-lg:28px;
  --shadow:0 24px 80px rgba(1,3,8,.55);
  --glow-accent:0 0 0 1px rgba(207,155,92,.32),0 14px 50px -8px rgba(178,106,62,.45);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font-mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  width:100%;
  min-width:0;
  color:var(--muted);
  font-family:var(--font-body,'Inter',system-ui,sans-serif);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  color-scheme:dark;
}
.bmf,.bmf *,.bmf *::before,.bmf *::after{box-sizing:border-box}
.bmf button,.bmf input,.bmf textarea,.bmf select{font:inherit;font-size:14px;}
.bmf button{color:inherit}
.bmf a{color:inherit}
.bmf .bmf-hp{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;pointer-events:none!important}
.bmf .estimator-card{backdrop-filter:none;-webkit-backdrop-filter:none}
.bmf .estimator-card{contain:paint}
.bmf[data-bmf-ready="0"] .mode-btn,.bmf[data-bmf-ready="0"] .button{touch-action:manipulation}

.bmf .estimator-layout {
      display: flex;
      align-items: flex-start;
      gap: clamp(10px, 1.5vw, 16px);
    }
    .bmf .estimator-layout > .estimator-card { flex: 1 1 auto; min-width: 0; }

    .bmf .mode-switch {
      position: relative;
      display: flex;
      flex-direction: column;
      flex: 0 0 auto;
      width: 60px;
      padding: 5px;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgba(12, 19, 34, .8);
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }
    .bmf .mode-thumb {
      position: absolute;
      left: 5px; right: 5px; top: 5px;
      height: calc(50% - 5px);
      border-radius: 999px;
      background: var(--gradient-brand);
      box-shadow: var(--glow-accent);
      transition: transform .5s var(--ease);
      z-index: 0;
    }
    .bmf .mode-switch.is-quote .mode-thumb { transform: translateY(100%); }
    .bmf .mode-btn {
      position: relative;
      z-index: 1;
      flex: 0 0 auto;
      min-height: 200px;
      display: grid;
      place-items: center;
      border: 0;
      background: transparent;
      color: var(--muted);
      font-family: var(--font-body);
      font-weight: 700;
      font-size: .96rem;
      border-radius: 999px;
      cursor: pointer;
      transition: color .35s var(--ease);
    }
    .bmf .mode-btn-t { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); white-space: nowrap; letter-spacing: .01em; }
    .bmf .mode-btn.is-active { color: #fff; }
    .bmf .mode-btn:focus-visible { outline: 3px solid rgba(207,155,92,.35); outline-offset: 2px; }

    .bmf .mode-panels { position: relative; transition: height .32s var(--ease); }
    .bmf .mode-panel { display: none; }
    .bmf .mode-panel.is-active { display: block; }

    .bmf .contact-done { text-align: center; padding: clamp(12px, 3vw, 34px) 0; }
    .bmf .contact-done .done-emoji {
      width: 62px; height: 62px; margin: 0 auto 18px;
      display: grid; place-items: center;
      border-radius: 50%;
      background: rgba(18,224,155,.14);
      border: 1px solid rgba(18,224,155,.32);
      color: var(--positive);
      font-size: 1.7rem; font-weight: 800;
    }
    .bmf .contact-done .done-title {
      font-family: var(--font-display);
      font-size: clamp(1.4rem, 3vw, 2rem);
      text-transform: uppercase; letter-spacing: -.03em; margin-bottom: 10px;
    }
    .bmf .contact-done .done-text { color: var(--muted); max-width: 440px; margin: 0 auto; }
    .bmf .contact-done { animation: step-in .45s var(--ease) both; }
    .bmf .contact-done .reset-link { margin-top: 20px; }

    .bmf .result-table-title {
      margin: 26px 0 12px;
      font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    }
    .bmf .result-table-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
    .bmf .result-table-scroll { height: 340px; max-height: 340px; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .bmf .result-table { width: 100%; border-collapse: collapse; font-size: 14px; }
    .bmf .result-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
    .bmf .result-table tr:last-child td { border-bottom: 0; }
    .bmf .result-table td:first-child { color: var(--muted); width: 34%; }
    .bmf .result-table td:last-child { color: var(--text); font-weight: 600; }
    .bmf .result-table-total { display: grid; grid-template-columns: 34% minmax(0,1fr); border-top: 1px solid var(--line-strong); background: var(--accent-soft); }
    .bmf .result-table-total > span, .bmf .result-table-total > strong { padding: 14px 16px; }
    .bmf .result-table-total > span { color: var(--gold); font-size: 14px; font-weight: 700; }
    .bmf .result-table-total > strong { color: var(--gold); font-family: var(--font-mono); font-size: 14px; font-weight: 700; }

    .bmf .estimator-topbar {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 24px;
      align-items: center;
      padding: 22px clamp(20px, 4vw, 42px);
      border-bottom: 1px solid var(--line);
    }

    .bmf .progress-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .bmf #progress-percent { font-family: var(--font-mono); }

    .bmf .progress-segments { display: flex; gap: 7px; margin-top: 2px; }
    .bmf .progress-seg { position: relative; flex: 1; min-width: 0; padding: 7px 0; border: 0; background: transparent; color: inherit; cursor: default; }
    .bmf .progress-seg:not(:disabled) { cursor: pointer; }
    .bmf .progress-seg:disabled { opacity: 1; }
    .bmf .progress-seg:not(:disabled):focus-visible { outline: 2px solid rgba(207,155,92,.45); outline-offset: 2px; border-radius: 999px; }
    .bmf .seg-fill { display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; position: relative; }
    .bmf .seg-fill::after {
      content: ""; position: absolute; inset: 0; border-radius: inherit;
      background: var(--gradient-brand);
      transform: scaleX(0); transform-origin: left; transition: transform .32s ease;
    }
    .bmf .progress-seg.is-done .seg-fill::after { transform: scaleX(1); }
    .bmf .progress-seg.is-active .seg-fill::after { transform: scaleX(.55); }
    .bmf .progress-seg:hover .seg-fill { background: rgba(255,255,255,.16); }

    .bmf .seg-tip {
      position: absolute; bottom: calc(100% + 9px); left: 50%;
      transform: translateX(-50%) translateY(5px);
      white-space: nowrap; padding: 7px 11px; border-radius: 9px;
      background: var(--panel-2); border: 1px solid var(--line-strong);
      color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .01em;
      box-shadow: var(--shadow); opacity: 0; pointer-events: none;
      transition: opacity .16s ease, transform .16s ease; z-index: 8;
    }
    .bmf .seg-tip::after {
      content: ""; position: absolute; top: 100%; left: 50%;
      width: 9px; height: 9px; background: var(--panel-2);
      border-right: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong);
      transform: translate(-50%, -55%) rotate(45deg);
    }
    .bmf .progress-seg:hover .seg-tip, .bmf .progress-seg:focus-within .seg-tip { opacity: 1; transform: translateX(-50%) translateY(0); }

    .bmf .estimate-preview { text-align: right; }
    .bmf .estimate-preview small {
      display: block; margin-bottom: 3px; color: var(--muted);
      font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    }
    .bmf .estimate-preview strong {
      display:block; color: var(--gold); font-family: var(--font-mono);
      font-size: clamp(15px, 2vw, 20px); letter-spacing: -.02em; white-space: nowrap;
    }
    .bmf .estimate-coupon {
      display:block; max-width:260px; margin-top:5px; margin-left:auto;
      color:var(--gold); font-size:10px; font-weight:800; line-height:1.35;
    }

    .bmf .estimator-body { padding: clamp(26px, 5vw, 56px); transition: height .32s var(--ease); }
    .bmf .step { display: none; }
    .bmf .step.is-active { display: block; }

    @keyframes step-in {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .bmf html { scroll-behavior: auto; }
      .bmf .step { animation: none; }
      .bmf .estimator-body { transition: none; }
      .bmf .seg-fill::after, .bmf .seg-tip, .bmf .select-menu, .bmf .select-caret { transition: none; }
    }

    .bmf .step-heading { display: grid; grid-template-columns: 66px minmax(0, 1fr); gap: 18px; align-items: start; margin-bottom: 34px; }
    .bmf .step-number {
      display: grid; width: 58px; height: 58px; place-items: center;
      border: 1px solid var(--line-strong); border-radius: 50%;
      color: var(--gold); font-family: var(--font-mono); font-weight: 600; letter-spacing: -.02em;
    }
    .bmf .step-title {
      margin: 0; font-family: var(--font-display);
      font-size: clamp(28px, 4vw, 50px); font-weight: 700; line-height: .98;
      letter-spacing: -.035em; text-transform: uppercase;
    }
    .bmf .step-description { max-width: 720px; margin: 12px 0 0; color: var(--muted); font-size: 16px; }

    .bmf .section-label { display: block; margin: 28px 0 12px; color: #d9d6ce; font-size: 13px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }

    .bmf .option-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: stretch; }
    .bmf .option-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bmf .option-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .bmf .option-grid > *, .bmf .compact-options > * { height:100%; }

    .bmf .option-card { position: relative; display: block; min-height: 128px; cursor: pointer; }
    .bmf .option-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .bmf .option-inner {
      display: flex; height: 100%; min-height: inherit; flex-direction: column;
      justify-content: space-between; gap: 18px; padding: 18px;
      border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel);
      transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
    }
    .bmf .option-card:hover .option-inner { border-color: var(--line-strong); transform: translateY(-2px); }
    .bmf .option-card input:focus-visible + .option-inner { outline: 3px solid rgba(207,155,92,.35); outline-offset: 3px; }
    .bmf .option-card input:checked + .option-inner {
      border-color: var(--accent);
      background: linear-gradient(145deg, var(--accent-soft), var(--panel));
      box-shadow: inset 0 0 0 1px var(--accent);
    }
    .bmf .option-card input:checked + .option-inner .choice-mark { color: #120a07; border-color: var(--accent); background: var(--gold); }

    .bmf .option-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
    .bmf .choice-mark {
      display: grid; flex: 0 0 auto; width: 26px; height: 26px; place-items: center;
      border: 1px solid var(--line-strong); border-radius: 50%; color: transparent; font-size: 14px; font-weight: 800;
    }
    .bmf .option-icon {
      display: grid; width: 38px; height: 38px; place-items: center;
      border: 1px solid var(--line); border-radius: 10px; color: var(--gold);
      background: rgba(255,255,255,.025); font-size: 18px;
    }
    .bmf .option-title { display: block; color: var(--text); font-size: 16px; font-weight: 700; line-height: 1.22; }
    .bmf .option-price { display: block; margin-top: 8px; color: var(--muted); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
    .bmf .option-card input:checked + .option-inner .option-price { color: var(--gold); }
    .bmf .option-copy { display: block; margin-top: 6px; color: var(--muted); font-size: 13px; line-height: 1.42; }


    .bmf .option-card-wrap { position: relative; min-width: 0; }
    .bmf .option-card-wrap .option-card { height: 100%; }
    .bmf .option-info {
      position: absolute; z-index: 3; top: 18px; right: 54px;
      display: grid; width: 26px; height: 26px; place-items: center;
      padding: 0; border: 1px solid var(--line-strong); border-radius: 50%;
      color: var(--gold); background: rgba(7,11,22,.72); cursor: pointer;
      font-family: var(--font-mono); font-size: 12px; font-weight: 800; line-height: 1;
      transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
    }
    .bmf .option-info:hover { border-color: var(--gold); background: var(--accent-soft); transform: translateY(-1px); }
    .bmf .option-info:focus-visible { outline: 3px solid rgba(207,155,92,.35); outline-offset: 2px; }

    .bmf .system-help-dialog {
      width: min(540px, calc(100vw - 32px)); max-width: none;
      margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: var(--radius);
      color: var(--text); background: var(--panel-2); box-shadow: var(--shadow);
    }
    .bmf .system-help-dialog::backdrop { background: rgba(2,5,12,.74); }
    .bmf .system-help-inner { position: relative; padding: 28px; }
    .bmf .system-help-kicker { display: block; margin: 0 42px 8px 0; color: var(--gold); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
    .bmf .system-help-title { margin: 0 42px 12px 0; color: var(--text); font-family: var(--font-display); font-size: clamp(24px, 4vw, 34px); line-height: 1.05; letter-spacing: -.03em; }
    .bmf .system-help-copy { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.65; }
    .bmf .system-help-close {
      position: absolute; top: 18px; right: 18px; display: grid; width: 34px; height: 34px; place-items: center;
      padding: 0; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: transparent;
      cursor: pointer; font-size: 20px; line-height: 1;
    }
    .bmf .system-help-close:hover { border-color: var(--line-strong); color: var(--text); background: rgba(255,255,255,.035); }
    .bmf .system-help-close:focus-visible { outline: 3px solid rgba(207,155,92,.35); outline-offset: 2px; }

    .bmf .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
    .bmf .field { min-width: 0; }
    .bmf .form-grid > .field { height:100%; }
    .bmf .field.full { grid-column: 1 / -1; }
    .bmf .field label, .bmf .field legend { display: block; margin-bottom: 8px; color: #ddd9d0; font-size: 13px; font-weight: 700; }
    .bmf .field input, .bmf .field textarea, .bmf .field select {
      width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); outline: 0;
      color: var(--text); background: var(--panel); padding: 12px 15px;
      transition: border-color .16s ease, box-shadow .16s ease;
    }
    .bmf .field textarea { min-height: 130px; resize: vertical; }
    .bmf .field input::placeholder, .bmf .field textarea::placeholder { color: #6f7683; }
    .bmf .field input:focus, .bmf .field textarea:focus, .bmf .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(190,124,73,.16); }
    .bmf .field-help { display: block; margin-top: 7px; color: #7f8894; font-size: 12px; }
    .bmf .field-help.before-input { margin: -1px 0 9px; }
    .bmf .required-mark { color: var(--gold); }
    .bmf .actions-left { display: inline-flex; align-items: center; gap: 16px; flex-wrap: wrap; }
    .bmf .actions .reset-form-link { margin: 0; }
    .bmf .development-complexity-panel .option-card { min-height: 150px; }

    .bmf select.is-enhanced {
      position: absolute !important; width: 1px; height: 1px; opacity: 0; pointer-events: none;
      margin: 0; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%);
    }
    .bmf .c-select { position: relative; width: 100%; }
    .bmf .select-trigger {
      display: flex; width: 100%; min-height: 52px; align-items: center; justify-content: space-between; gap: 12px;
      border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel); color: var(--text);
      padding: 13px 15px; cursor: pointer; text-align: left; font-weight: 600;
      transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
    }
    .bmf .select-trigger:hover { border-color: var(--line-strong); transform: translateY(-1px); }
    .bmf .select-trigger:focus-visible { outline: 3px solid rgba(207,155,92,.35); outline-offset: 2px; }
    .bmf .c-select.is-open .select-trigger { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(190,124,73,.16); }
    .bmf .select-value {
      display: flex; min-width: 0; flex: 1 1 auto; align-items: center; gap: 12px;
      overflow: hidden; white-space: nowrap;
    }
    .bmf .select-value.is-placeholder { color: #6f7683; font-weight: 500; }
    .bmf .select-label-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bmf .select-price-text {
      flex: 0 0 auto; margin-left: auto; color: var(--gold);
      font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1.2; white-space: nowrap;
    }
    .bmf .select-caret { flex: 0 0 auto; color: var(--gold); font-size: 12px; transition: transform .2s ease; }
    .bmf .c-select.is-open .select-caret { transform: rotate(180deg); }
    .bmf .select-menu {
      position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; right: 0; margin: 0; padding: 6px;
      list-style: none; background: var(--panel-2); border: 1px solid var(--line-strong); border-radius: 14px;
      box-shadow: var(--shadow); max-height: 300px; overflow: auto; opacity: 0;
      transform: translateY(-6px) scale(.99); transform-origin: top; pointer-events: none;
      transition: opacity .16s ease, transform .16s ease;
    }
    .bmf .c-select.is-open .select-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
    .bmf .select-option {
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      padding: 11px 12px; border-radius: 9px; color: #d7d4cc; font-size: 14px; font-weight: 600; line-height: 1.3;
      cursor: pointer; transition: background-color .12s ease, color .12s ease;
    }
    .bmf .select-option .select-label-text { white-space: normal; }
    .bmf .select-option .select-price-text { font-size: 11px; }
    .bmf .select-option + .select-option { margin-top: 2px; }
    .bmf .select-option:hover { background: var(--accent-soft); color: var(--text); }
    .bmf .select-option[aria-selected="true"] { background: linear-gradient(145deg, var(--accent-soft), transparent); color: var(--gold); box-shadow: inset 0 0 0 1px rgba(207,155,92,.35); }

    .bmf .conditional-panel { display: none; margin-top: 28px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.022); }
    .bmf .conditional-panel.is-visible { display: block; }
    .bmf .conditional-title { margin: 0 0 4px; font-size: 18px; font-weight: 700; letter-spacing: -.02em; }
    .bmf .conditional-copy { margin: 0 0 18px; color: var(--muted); font-size: 14px; }

    .bmf .compact-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
    .bmf .compact-choice { position: relative; display: block; cursor: pointer; }
    .bmf .compact-choice input { position: absolute; opacity: 0; pointer-events: none; }
    .bmf .compact-choice > span {
      display: flex; height:100%; min-height: 58px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; padding: 11px 13px;
      border: 1px solid var(--line); border-radius: 10px; color: #cfcdc7; background: var(--panel);
      font-size: 13px; font-weight: 600; line-height: 1.25;
      transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
    }
    .bmf .compact-choice .choice-label { display: block; }
    .bmf .compact-choice .choice-price { display: block; color: var(--muted); font-family: var(--font-mono); font-size: 11px; font-weight: 600; line-height: 1.25; }
    .bmf .compact-choice:hover > span { border-color: var(--line-strong); transform: translateY(-2px); }
    .bmf .compact-choice input:checked + span { border-color: var(--accent); color: var(--text); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
    .bmf .compact-choice input:checked + span .choice-price { color: var(--gold); }
    .bmf .compact-choice input:focus-visible + span { outline: 3px solid rgba(207,155,92,.35); outline-offset: 2px; }

    .bmf .system-field-hidden { display: none !important; }
    .bmf .shop-feature-wizard { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
    .bmf .shop-feature-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
    .bmf .shop-feature-title { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; }
    .bmf .shop-feature-controls { display: flex; flex: 0 0 auto; align-items: center; gap: 10px; }
    .bmf .shop-feature-nav { display: flex; align-items: center; gap: 7px; }
    .bmf .shop-feature-nav-btn {
      display: grid; width: 40px; height: 40px; min-width: 40px; place-items: center; padding: 0;
      border: 1px solid var(--line); border-radius: 10px; color: #cfcdc7; background: var(--panel);
      font-size: 17px; font-weight: 700; line-height: 1; cursor: pointer;
      transition: border-color .16s ease, background-color .16s ease, transform .16s ease, opacity .16s ease;
    }
    .bmf .shop-feature-nav-btn:hover:not(:disabled) { border-color: var(--line-strong); transform: translateY(-2px); }
    .bmf .shop-feature-nav-btn:focus-visible { outline: 3px solid rgba(207,155,92,.35); outline-offset: 2px; }
    .bmf .shop-feature-nav-btn:disabled { opacity: .32; cursor: default; }
    .bmf .shop-feature-progress { flex: 0 0 auto; min-width: 34px; color: var(--gold); font-family: var(--font-mono); font-size: 12px; font-weight: 700; white-space: nowrap; text-align: right; }
    .bmf .shop-feature-page, .bmf .booking-feature-page, .bmf .membership-feature-page { display: none; }
    .bmf .shop-feature-page.is-active, .bmf .booking-feature-page.is-active, .bmf .membership-feature-page.is-active { display: block; }
    .bmf .booking-shop-optin .compact-choice, .bmf .membership-shop-optin .compact-choice { max-width: 430px; }

    .bmf .notice { display: flex; gap: 12px; align-items: flex-start; margin-top: 20px; padding: 15px 16px; border: 1px solid rgba(207,155,92,.28); border-radius: 12px; color: #e6ddcb; background: rgba(190,124,73,.07); font-size: 13px; }
    .bmf .notice strong { color: var(--gold); }
    .bmf .notice.speed { border-color: rgba(18,224,155,.26); background: rgba(18,224,155,.06); color: #cfeede; }
    .bmf .notice.speed strong { color: var(--positive); }

    .bmf .actions { display: flex; justify-content: space-between; gap: 14px; align-items: center; margin-top: 38px; padding-top: 24px; border-top: 1px solid var(--line); }
    .bmf .button {
      display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 10px;
      border: 0; border-radius: 999px; padding: 13px 24px; cursor: pointer; font-weight: 700; letter-spacing: -.01em;
      transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .bmf .button:hover { transform: translateY(-2px); }
    .bmf .button:active { transform: translateY(0); }
    .bmf .button-primary { color: #fff; background: var(--gradient-brand); box-shadow: var(--glow-accent); }
    .bmf .button-primary:hover { box-shadow: 0 0 0 1px rgba(207,155,92,.46), 0 18px 60px -6px rgba(190,124,73,.55); }
    .bmf .button-secondary { border: 1px solid var(--line-strong); color: #dbd8d0; background: transparent; }
    .bmf .button-secondary:hover { border-color: rgba(207,155,92,.4); }
    .bmf .button[disabled] { cursor: not-allowed; opacity: .5; transform: none; box-shadow: none; }

    .bmf .validation-message { display: none; margin: 14px 0 0; color: var(--danger); font-size: 13px; font-weight: 600; }
    .bmf .validation-message.is-visible { display: block; }

    .bmf .consent { position: relative; display: flex; gap: 11px; align-items: center; margin-top: 16px; color: var(--muted); font-size: 12px; cursor: pointer; }
    .bmf .consent input { width: 18px; min-height: 18px; flex: 0 0 auto; margin: 1px 0 0; accent-color: var(--accent); }
    .bmf .consent a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }

    .bmf .result-wrap { display: none; padding: clamp(26px, 5vw, 56px); animation: step-in .32s ease both; }
    .bmf .result-wrap.is-visible { display: block; }
    .bmf .estimator-body.is-hidden { display: none; }

    .bmf .result-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
    .bmf .result-main, .bmf .result-side { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
    .bmf .result-main { padding: clamp(24px, 4vw, 42px); position: relative; overflow: hidden; }
    .bmf .result-main::before {
      content: ""; position: absolute; inset: 0; pointer-events: none;
      background: radial-gradient(60% 60% at 12% 0%, rgba(215,176,121,.10), transparent 70%),
                  radial-gradient(50% 50% at 100% 100%, rgba(18,224,155,.06), transparent 70%);
    }
    .bmf .result-main > * { position: relative; }
    .bmf .result-side { padding: 24px; }
    .bmf .result-kicker { margin: 0 0 14px; color: var(--gold); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
    .bmf .result-price { margin: 0; font-family: var(--font-mono); font-size: clamp(30px, 5vw, 48px); font-weight: 700; line-height: 1.02; letter-spacing: -.03em; }
    .bmf .result-coupon {
      max-width:720px; margin-top:18px; padding:14px 16px; border:1px solid rgba(215,176,121,.36);
      border-radius:12px; background:rgba(215,176,121,.09); color:#EDE5DC; font-size:13px; font-weight:600; line-height:1.55;
    }
    .bmf .result-coupon strong { color:var(--gold); }
    .bmf .result-price small { display: block; margin-top: 12px; color: var(--muted); font-family: var(--font-body); font-size: 13px; font-weight: 500; letter-spacing: 0; line-height: 1.4; text-transform: none; }
    .bmf .confidence { display: inline-flex; align-items: center; gap: 7px; margin-top: 22px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; color: #d5d2ca; font-size: 12px; font-weight: 700; }
    .bmf .confidence-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warning); box-shadow: 0 0 0 4px rgba(207,155,92,.10); }
    .bmf .confidence-explanation { max-width: 720px; margin-top: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.018); }
    .bmf .confidence-explanation summary { padding: 11px 14px; color: var(--muted); font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; }
    .bmf .confidence-explanation summary:hover { color: var(--text); }
    .bmf .confidence-explanation-body { display: grid; gap: 7px; padding: 0 14px 13px; color: var(--muted); font-size: 12px; line-height: 1.5; }
    .bmf .confidence-explanation-body strong { color: var(--text); }
    .bmf .result-summary { margin: 26px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
    .bmf .result-summary h3, .bmf .result-side h3 { margin: 0 0 13px; font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
    .bmf .summary-list, .bmf .risk-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
    .bmf .summary-list li, .bmf .risk-list li { position: relative; padding-left: 20px; color: #c9c7c0; font-size: 14px; }
    .bmf .summary-list li::before, .bmf .risk-list li::before { position: absolute; left: 0; top: .15em; color: var(--accent); content: "→"; font-weight: 800; }
    .bmf .result-note { margin: 22px 0 0; color: var(--muted); font-size: 12px; }
    .bmf .price-impact { display: block; margin-top: 4px; color: var(--gold); font-family: var(--font-mono); font-size: 11px; font-weight: 700; line-height: 1.35; }
    .bmf .result-table td:last-child { white-space: normal; }
    @media (max-width: 640px) {
      .bmf .actions-left { gap: 12px; }
    }
    .bmf .result-cta { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
    .bmf .result-cta p { margin: 0 0 14px; color: var(--muted); font-size: 13px; }
    .bmf .reset-link { margin-top: 18px; border: 0; padding: 0; color: var(--muted); background: none; cursor: pointer; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; }

    .bmf .import-option-card { width: 100%; padding: 0; border: 0; background: transparent; text-align: left; }
    .bmf .import-panel { margin-top: 14px; padding: 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); }
    .bmf .import-panel[hidden] { display: none; }
    .bmf .import-panel .field-help { margin-top: 8px; }
    .bmf .import-file-input { cursor: pointer; }
    .bmf .import-file-input::file-selector-button { margin-right: 12px; border: 1px solid var(--line-strong); border-radius: 999px; padding: 8px 13px; color: var(--text); background: transparent; cursor: pointer; font-weight: 700; }
    .bmf .import-file-input::file-selector-button:hover { border-color: rgba(207,155,92,.4); }
    .bmf .import-status { display: none; margin: 10px 0 0; font-size: 13px; font-weight: 600; }
    .bmf .import-status.is-visible { display: block; }
    .bmf .import-status.is-error { color: var(--danger); }
    .bmf .import-status.is-success { color: var(--positive); }
    .bmf .result-export { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255,255,255,.018); }
    .bmf .result-export-copy { min-width: 0; }
    .bmf .result-export-title { display: block; color: var(--text); font-size: 13px; font-weight: 700; }
    .bmf .result-export-text { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.45; }
    .bmf .result-export .button { flex: 0 0 auto; min-height: 44px; padding: 10px 18px; font-size: 13px; }

    @media (max-width: 920px) {
      .bmf .intro, .bmf .result-grid { grid-template-columns: 1fr; }
      .bmf .option-grid, .bmf .option-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .bmf .compact-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (max-width: 760px) {
      .bmf .estimator-topbar { grid-template-columns:1fr; gap:14px; }
      .bmf .estimate-preview { text-align:left; }
      .bmf .estimate-preview strong { white-space:normal; }
      .bmf .estimate-coupon { max-width:none; margin-left:0; }
    }
    @media (max-width: 640px) {
      .bmf .estimator-shell { padding-inline: 10px; }
      .bmf .estimator-layout { flex-direction:column; align-items:stretch; }
      .bmf .mode-switch { order:-1; width:100%; flex-direction:row; padding:5px; border-radius:999px; }
      .bmf .mode-thumb { top:5px; bottom:5px; left:5px; right:auto; width:calc(50% - 5px); height:auto; }
      .bmf .mode-switch.is-quote .mode-thumb { transform:translateX(100%); }
      .bmf .mode-btn { flex:1 1 50%; min-height:46px; }
      .bmf .mode-btn-t { position:static; transform:none; white-space:nowrap; }
      .bmf .intro { margin-bottom: 28px; }
      .bmf .intro h1 { font-size: clamp(38px, 13vw, 58px); }
      .bmf .estimator-card { border-radius: 18px; }
      .bmf .estimator-topbar { grid-template-columns: 1fr; }
      .bmf .estimate-preview { display:block; text-align:left; }
      .bmf .estimate-coupon { max-width:none; margin-left:0; font-size:9px; }
      .bmf .estimator-body, .bmf .result-wrap { padding: 23px 16px; }
      .bmf .step-heading { grid-template-columns: 46px minmax(0, 1fr); gap: 12px; }
      .bmf .step-number { width: 42px; height: 42px; font-size: 13px; }
      .bmf .step-title { font-size: 30px; }
      .bmf .option-grid, .bmf .option-grid.two, .bmf .option-grid.four, .bmf .form-grid, .bmf .compact-options { grid-template-columns: 1fr; }
      .bmf .option-card { min-height: 108px; }
      .bmf .actions { align-items: stretch; flex-direction:column; }
      .bmf .actions-left { width:100%; align-items:stretch; }
      .bmf .actions > .button, .bmf .actions-left > .button { width:100%; }
      .bmf .button { flex: 1; padding-inline: 16px; }
      .bmf .result-price { font-size: 40px; }
      .bmf .result-table-scroll { height: 320px; max-height: 320px; }
      .bmf .result-table td:first-child, .bmf .result-table-total { width: auto; }
      .bmf .result-table-total { grid-template-columns: 1fr; }
      .bmf .result-table-total > span { padding-bottom: 3px; }
      .bmf .result-table-total > strong { padding-top: 3px; }
      .bmf .result-export { align-items: stretch; flex-direction: column; }
      .bmf .result-export .button { width: 100%; }
      .bmf .select-option { align-items: flex-start; }
      .bmf .select-option .select-price-text { max-width: 44%; text-align: right; white-space: normal; }
      .bmf .select-value .select-price-text { font-size: 10px; }
    }


/* Performance: nincs backdrop blur / üveg-elmosás. */
.bmf .estimator-card,.bmf .mode-switch{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.bmf .contact-heading { grid-template-columns: 1fr; }

.bmf{
  --font-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-display:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.bmf .estimator-card{ background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }

.bmf-wrap{width:100%;margin:0 auto;min-width:0;}


/* Komponens - Ár doboz pop-up ikonlista */

/* ========================================
   SZOLGÁLTATÁS POPUP – KALKULÁCIÓ CTA
   ======================================== */

.bm-detail-cta-content {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}


/* Ikon */

.bm-detail-cta-icon {
	flex: 0 0 auto;

	width: 42px;
	height: 42px;

	margin-top: 2px;

	object-fit: contain;
}

.bm-detail-note__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	color: var(--color-primary);
	margin-top: 5px;
	margin-bottom: -5px;;
}

/* Cím + szöveg */

.bm-detail-cta-copy {
	display: flex;
	flex-direction: column;
	gap: 5px;

	min-width: 0;
}


/* Cím */

.bm-detail-cta-title {
	margin: 0;

	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.3;

	color: var(--color-sand);
}


/* Leírás */

.bm-detail-cta-text {
	margin: 0;

	line-height: 1.6;
	color: var(--color-text);
}


/* ========================================
   SZOLGÁLTATÁS POPUP – RÉSZLET BLOKKOK
   ======================================== */


/* Címsor */

.bm-detail-title {
	display: flex;
	align-items: center;
	gap: 10px;

	margin: 0 0 18px;

	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.3;

	color: var(--color-sand);
}


/* Címsor ikon */

.bm-detail-title__icon {
	flex: 0 0 auto;

	width: 22px;
	height: 22px;

	color: var(--color-primary);
}


/* ========================================
   ÁLTALÁNOS LISTA
   ======================================== */

.bm-detail-list {
	display: flex;
	flex-direction: column;
	gap: 5px;

	margin: 0;
	padding: 0;

	list-style: none;
}


/* Listaelem */

.bm-detail-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	margin: 0;
	padding: 0;

	line-height: 1.45;
	color: var(--color-text);
}


/* Listaelemek ikonja */

.bm-detail-list li > svg {
	flex: 0 0 auto;

	width: 17px;
	height: 17px;

	margin-top: 3px;

	color: var(--color-primary);
}


/* ========================================
   HOGYAN KÉSZÜL – SZÁMOZOTT LISTA
   ======================================== */

.bm-detail-list--steps {
	counter-reset: none;
}


/* Számozás */

.bm-detail-step {
	flex: 0 0 auto;

	min-width: 24px;

	font-family: var(--font-display);
	font-weight: 600;
	line-height: 1.45;

	color: var(--color-primary);
}


/* ========================================
   SZÖVEGES BLOKK
   ======================================== */

.bm-detail-text {
	margin: 0;

	line-height: 1.6;
	color: var(--color-text);
}


/* Több bekezdés közötti térköz */

.bm-detail-text + .bm-detail-text {
	margin-top: 14px;
}


/* ========================================
   POPUP BAL OLDALI OSZLOP
   ======================================== */

.bm-detail-sidebar {
	position: relative;
	overflow: hidden;

	background:
		radial-gradient(
			circle at 10% 100%,
			rgba(178, 106, 62, 0.32) 0%,
			rgba(178, 106, 62, 0.12) 30%,
			transparent 60%
		),
		radial-gradient(
			circle at 100% 0%,
			rgba(215, 176, 121, 0.13) 0%,
			transparent 46%
		),
		linear-gradient(
			145deg,
			#172238 0%,
			#0D1628 52%,
			#060A14 100%
		);

	border-right: 1px solid rgba(215, 176, 121, 0.12);
}


/* ========================================
   POP-UP SZAKASZOK
   ======================================== */

/* Alapállapot */

.pop-up-section {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;

	align-items: safe center;
	justify-content: center;

	padding: 64px 20px;

	overflow-y: auto;
	overscroll-behavior: contain;

	background: #0c132269;

	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(3px);

	opacity: 0;

	transition:
		opacity .25s ease,
		display .25s allow-discrete;
}


/* Nyitott állapot */

.pop-up-section.is-open {
	display: flex;
	opacity: 1;
}


/* Fade-in kiindulópont */

@starting-style {
	.pop-up-section.is-open {
		opacity: 0;
	}
}


/* ========================================
   POPUP DETAILS
   ======================================== */

.popup-details {
	position: relative;

	background: var(--color-bg);
}


/* ========================================
   BEZÁRÁS GOMB
   ======================================== */

.popup-details .pop-up-close {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 2;

	display: grid;
	width: 34px;
	height: 34px;
	place-items: center;

	margin: 0;
	padding: 0;
	border: 0;

	color: var(--color-text);
	background: transparent;

	font-family: inherit;
	font-size: 26px;
	font-weight: 300;
	line-height: 1;

	cursor: pointer;
	user-select: none;

	opacity: .65;

	transition:
		opacity .2s ease,
		color .2s ease,
		transform .2s ease;
}


.popup-details .pop-up-close:hover {
	color: var(--color-sand);
	opacity: 1;
}


.popup-details .pop-up-close:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;

	opacity: 1;
}


/* ========================================
   HÁTTÉRGÖRGETÉS ZÁROLÁSA
   ======================================== */

html.pop-up-open,
html.pop-up-open body {
	overflow: hidden;
}


/* ========================================
   MOZGÁSCSÖKKENTÉS
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	.pop-up-section,
	.popup-details .pop-up-close {
		transition: none;
	}
}


/* =======================================
   KOMPONENS – OPT-IN ELŐNYLISTA
   ======================================== */

.bm-benefit-list {
	display: flex;
	flex-direction: column;
	gap: 12px;

	width: 100%;
	margin: 0;
	padding: 0;

	list-style: none;
}


/* ========================================
   Listaelem
   ======================================== */

.bm-benefit-list__item {
	display: flex;
	align-items: center;
	gap: 18px;

	width: 100%;

	padding: 17px 22px;

	border: 1px solid var(--color-border);
	border-radius: 12px;

	background: rgba(255, 255, 255, .015);

	transition:
		border-color .25s ease,
		background-color .25s ease;
}


/* Finom hover */

.bm-benefit-list__item:hover {
	border-color: rgba(178, 106, 62, .45);
	background: rgba(178, 106, 62, .035);
}


/* ========================================
   Check ikon
   ======================================== */

.bm-benefit-list__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 28px;

	width: 28px;
	height: 28px;

	border: 1px solid rgb(178, 106, 62);
	border-radius: 50%;

	color: rgb(178, 106, 62);
}


.bm-benefit-list__icon svg {
	display: block;

	width: 19px;
	height: 19px;
}


/* ========================================
   Szöveg
   ======================================== */

.bm-benefit-list__text {
	min-width: 0;

	font-size: 16px;
	font-weight: 400;
	line-height: 1.55;

	color: var(--color-text);
}


/* ========================================
   Mobil
   ======================================== */

@media (max-width: 767px) {

	.bm-benefit-list {
		gap: 10px;
	}

	.bm-benefit-list__item {
		align-items: flex-start;
		gap: 14px;

		padding: 16px;
	}

	.bm-benefit-list__icon {
		flex-basis: 34px;

		width: 34px;
		height: 34px;
	}

	.bm-benefit-list__icon svg {
		width: 17px;
		height: 17px;
	}

	.bm-benefit-list__text {
		padding-top: 4px;

		font-size: 15px;
		line-height: 1.5;
	}

}

.cta-head h2, .cta-head h1{
    font-size: clamp(1.8rem, 2.5vw, 2.5rem)
}