:root {

  --hs-hatter: #0b5cd5;
  --hs-tinta: #fff;
  --hs-halk: rgba(255, 255, 255, 0.78);
  --hs-ki: cubic-bezier(0.22, 1, 0.36, 1);

  --sugar: 72px;
  --also-ter: 6%;
  --kep-x: 11%;
  --kep-y: 41%;
  --kep-mod: cover;
  --fejlec-ter: 112px;

  --kep-doboz: 465px;
  --hero-sugar: 72px;
  --doboz-ki: 0px;
}

@media (min-width: 1600px) {
  :root {
    --kep-doboz: 585px;
    --hero-sugar: 60px;
    --doboz-ki: 4px;
  }
}

.fx,
#fejlec-v10 {
  --logo-magas: 44px;
}
.fx,
#fejlec-v10,
:root {
  --tartalom: calc(100vw - 32px);
  --oldal-ter: 0px;
}
@media (min-width: 600px) {
  .fx,
  #fejlec-v10,
  :root {
    --tartalom: calc(100vw - 48px);
  }
}
@media (min-width: 900px) {
  .fx,
  #fejlec-v10,
  :root {
    --tartalom: calc(100vw - 64px);
  }
}
@media (min-width: 1280px) {
  .fx,
  #fejlec-v10,
  :root {
    --tartalom: min(1200px, 100vw - 80px);
  }
}
@media (min-width: 1440px) {
  .fx,
  #fejlec-v10,
  :root {
    --tartalom: min(1340px, 100vw - 80px);
  }
}
@media (min-width: 1600px) {
  .fx,
  #fejlec-v10,
  :root {
    --tartalom: min(1700px, 100vw - 64px);
  }
}

@font-face {
  font-family: 'HarmonyOS Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../fonts/harmonyos-sans-latin_latin-ext-regular.woff2') format('woff2');
}
@font-face {
  font-family: 'HarmonyOS Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../../fonts/harmonyos-sans-latin_latin-ext-500.woff2') format('woff2');
}
@font-face {
  font-family: 'HarmonyOS Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../../fonts/harmonyos-sans-latin_latin-ext-600.woff2') format('woff2');
}

:root {
  --betu-v10: 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body,
.hs,
.fx,
#fejlec-v10,
.hatk,
.iksav {
  font-family: var(--betu-v10);

  letter-spacing: -0.011em;
}

.hs {
  position: relative;
  overflow: hidden;
  background: var(--hs-hatter);
  color: var(--hs-tinta);
  padding: var(--fejlec-ter) 0 var(--also-ter);
  border-radius: 0 0 var(--hero-sugar) var(--hero-sugar);
}
.hs-in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  max-width: var(--tartalom);
  margin: 0 auto;
  padding-left: var(--oldal-ter);
  padding-right: var(--oldal-ter);
}
@media (min-width: 900px) {
  .hs-in {
    grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.2fr);
  }
}

.hs-szoveg {
  padding-right: clamp(0px, 2vw, 32px);
}
.hs-marka {
  margin: 0 0 10px;
  letter-spacing: -0.016em;
  font-size: 17px;
  font-weight: 500;
  color: var(--hs-halk);
}
.hs h1 {
  margin: 0;

  max-width: var(--cim-hero-szeles);
  text-wrap: balance;
  font-size: var(--cim-hero);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--hs-tinta);
}
.hs-lead {
  margin: clamp(16px, 1.6vw, 24px) 0 0;
  letter-spacing: -0.016em;
  max-width: var(--lead-szeles, ch);
  font-size: clamp(15.5px, 1.1vw, 18px);
  line-height: 1.55;
  color: var(--hs-halk);
}
.hs-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 2.4vw, 36px);
}
.hs-cta a {
  display: inline-flex;
  align-items: center;

  height: var(--cta-magas, 60px);
  padding: 0 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 0.2s,
    transform 0.2s;
}

.hs-cta .fo {
  background: #fff;
  color: var(--cta-tinta-kek, #0b4fbe);
}
.hs-cta .fo:hover {
  transform: translateY(-1px);
}

.hs-cta .masodik {
  background: none;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.45);
}
.hs-cta .masodik:hover {
  background: rgba(255, 255, 255, 0.1);
}

.hs-kepek {
  display: flex;
  gap: clamp(10px, 1.2vw, 18px);

  margin-right: calc(var(--doboz-ki) * -1);
}
.hs-kep {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;

  height: clamp(220px, var(--kep-doboz), 86vh);
  border-radius: var(--sugar);
  background: rgba(255, 255, 255, 0.08);
}
.hs-kep img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--kep-mod);
  object-position: var(--kep-x) var(--kep-y);
}

.hs-szoveg > *,
.hs-kep {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.7s var(--hs-ki),
    transform 0.7s var(--hs-ki);
}
.hs.lathato .hs-szoveg > *,
.hs.lathato .hs-kep {
  opacity: 1;
  transform: none;
}
.hs.lathato .hs-szoveg > *:nth-child(2) {
  transition-delay: 0.06s;
}
.hs.lathato .hs-szoveg > *:nth-child(3) {
  transition-delay: 0.12s;
}
.hs.lathato .hs-szoveg > *:nth-child(4) {
  transition-delay: 0.18s;
}
.hs.lathato .hs-kep {
  transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .hs-szoveg > *,
  .hs-kep {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

@media (max-width: 899px) {
  .hs-in {
    padding-left: max(var(--oldal-ter), 20px);
    padding-right: max(var(--oldal-ter), 20px);
  }
  .hs-kepek {
    margin-right: 0;
  }
  .hs-kep {
    height: clamp(200px, 56vw, 420px);
    border-radius: clamp(24px, 8vw, var(--sugar));
  }

  .hs {
    border-radius: 0 0 clamp(24px, 8vw, var(--hero-sugar))
      clamp(24px, 8vw, var(--hero-sugar));
  }
}

@media (min-width: 1280px) {
  .hs-in {
    padding-left: clamp(16px, 3vw, 32px);
    padding-right: clamp(16px, 3vw, 32px);
  }
}