@font-face {
    font-family: 'Gabarito';
    src: url('../font/Gabarito-Regular.eot');
    src: url('../font/Gabarito-Regular.eot') format('embedded-opentype'),
         url('../font/Gabarito-Regular.woff2') format('woff2'),
         url('../font/Gabarito-Regular.woff') format('woff');
	font-style:normal;
	font-weight:400;
}

@font-face {
    font-family: 'Gabarito';
    src: url('../font/Gabarito-Medium.eot');
    src: url('../font/Gabarito-Medium.eot') format('embedded-opentype'),
         url('../font/Gabarito-Medium.woff2') format('woff2'),
         url('../font/Gabarito-Medium.woff') format('woff');
	font-style:normal;
	font-weight:500;
}

@font-face {
    font-family: 'Gabarito';
    src: url('../font/Gabarito-SemiBold.eot');
    src: url('../font/Gabarito-SemiBold.eot') format('embedded-opentype'),
         url('../font/Gabarito-SemiBold.woff2') format('woff2'),
         url('../font/Gabarito-SemiBold.woff') format('woff');
	font-style:normal;
	font-weight:600;
}

@font-face {
    font-family: 'Gabarito';
    src: url('../font/Gabarito-Bold.eot');
    src: url('../font/Gabarito-Bold.eot') format('embedded-opentype'),
         url('../font/Gabarito-Bold.woff2') format('woff2'),
         url('../font/Gabarito-Bold.woff') format('woff');
	font-style:normal;
	font-weight:700;
}

@font-face {
    font-family: 'Gabarito';
    src: url('../font/Gabarito-ExtraBold.eot');
    src: url('../font/Gabarito-ExtraBold.eot') format('embedded-opentype'),
         url('../font/Gabarito-ExtraBold.woff2') format('woff2'),
         url('../font/Gabarito-ExtraBold.woff') format('woff');
	font-style:normal;
	font-weight:800;
}

@font-face {
    font-family: 'Gabarito';
    src: url('../font/Gabarito-Black.eot');
    src: url('../font/Gabarito-Black.eot') format('embedded-opentype'),
         url('../font/Gabarito-Black.woff2') format('woff2'),
         url('../font/Gabarito-Black.woff') format('woff');
	font-style:normal;
	font-weight:900;
}



/* ==== Telefon szekció (S2) =============================================== */


:root{
  /* Háttérképek */
  --bg1: url("../img/sec_01_bg.jpg");
  --bg2: url("../img/sec_01_02_bg-v2.jpg");
  --bg3: url("../img/sec_03_bg.jpg");

  /* Hero és telefon függőleges pozíciói */
  --hero-top-gap-vh: 16;  /* hero indulása: a közép és a teteje között */
  --phone-gap-vh: 5;     /* hero és telefon közti távolság */

  /* Telefon keret + kijelző ablak insete (px) */
  --phone-frame: url("../img/iPhone_case.png");
  --screen-inset: 28px 24px 32px 24px; /* top right bottom left */

  /* Tartalomszélesség */
  --container-max: 1100px;
  --screen-bleed: 1.5px;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  /* padding-top: 68px; */
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e8edf2;
  background: #000; /* háttérképek takarják */
}
.hb_lap {
  width:100%;
	max-width:1488px;
	padding: 0px 24px;
	margin:0 auto;
	position:relative;
}

section > .hb_lap,
section > .s4-inner,
section > .s5-inner,
section > .s6__inner,
section > .s7-inner,
section > .s8-inner,
section > .s9-inner {
  min-height: 100%;
  box-sizing: border-box;
  padding-inline: var(--section-px);
  /* ha középre szeretnéd rendezni a tartalmat: 
     display:flex; align-items:center; -> csak ott kapcsold be, ahol kell */
}


/* Fix háttérréteg */
.bg-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: 50% 50%;
  will-change: opacity, clip-path, transform;
}
.bg1 { background-image: var(--bg1); }
.bg2 { background-image: var(--bg2); opacity: 0; clip-path: circle(0% at 50% 55%); }

.bg2 .rings{
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-radial-gradient(
    circle at 50% 55%,
    rgba(255,255,255,.38) 0 2px,
    rgba(255,255,255,0) 10px 18px
  );
  mix-blend-mode: overlay;
  opacity: 0;         /* induláskor rejtve */
  transform: scale(.35);
  will-change: opacity, transform;
}

/* Tartalom */
main { position: relative; z-index: 1; }
/* section {
  min-height: 140vh; 
  display: block;
  padding: clamp(16px, 4vw, 48px);
} */
#spacer { min-height: 120vh; }

#s1 {
  min-height: 100vh;
  min-height: 100dvh;
  min-height: 100svh;
  padding: var(--section-px) 0;   /* kis függőleges puffer */
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate; /* biztosítja, hogy a hero és telefon fölé rétegződjön */
}

/* Hero blokk — nem középről indul: feljebb toljuk */
#s1 .hero {
  width: min(92vw, var(--container-max));
  margin-inline: auto;
  margin-top: calc(var(--hero-top-gap-vh) * 1vh);
  text-align: center;
  will-change: transform, opacity;
  transform-origin: 50% 0%;
  backface-visibility: hidden;
}

.hero h1 { 
  margin: 0 0 12px; 
  font-size: clamp(48px, 8vw, 100px);
  line-height: 1.06; 
  font-weight: 800;
  color: #212E3D;
}
.hero p  { 
  margin: 0; 
  font-size: clamp(16px, 2vw, 20px); 
  opacity: .9; 
}

/* .s1-bg-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0; pointer-events: none;
  opacity: 0;                
  will-change: opacity;
  filter: saturate(115%) contrast(105%) brightness(105%);
} */

/* Telefon blokk a szöveg alatt */
.phone-wrap{
  position: relative;
  width: min(76vw, 360px);
  margin-inline: auto;
  margin-top: calc(var(--phone-gap-vh) * 1vh);
  z-index: 2;
}

/* Telefon */
.phone {
  position: relative;
  width: 100%;
  max-width: 360px;
  background-image: var(--phone-frame);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  aspect-ratio: 9/19.5;
  filter: drop-shadow(0 14px 48px rgba(0,0,0,.35));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  backface-visibility: hidden;
}

.phone::after {
  content: "";
  position: absolute; inset: 0;
  background-image: var(--phone-frame);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  z-index: 2;
  pointer-events: none;
}

.screen {
  position: absolute;
  inset: var(--screen-inset);
  border-radius: 24px;
  overflow: hidden;
  z-index: 1;
}

/* A kijelzőn induláskor a globális BG1 látszik (felül) */
.screen-bg{
  position: absolute; inset: 0;
  background-image: var(--bg1);
  background-size: 800%;
  background-position: center;
  transform: translateY(0%);
  will-change: transform;
  z-index: 2;
}

/* Alatta fehér réteg a tartalommal – a „lapozódás” ezt fedi fel */
.screen-under{
  position: absolute; 
  inset: 0;
  background: #fff; 
  color: #111;
  display: flex; 
  align-items: start; 
  justify-content: center;
  text-align: center; 
  padding: 72px 24px 24px;
  z-index: 1;
}
.screen-under h3{
  font-size: clamp(32px, 8vw, 56px);
  line-height: 100%; 
  font-weight: 800;
  text-align: left; 
  color: #212E3D; 
  margin: 0 0 12px;
}
.screen-under p{
  margin: 0; 
  opacity: .8; 
  text-align: left;
  font-size: 18px; 
  line-height: 28px;
  font-weight: 500;
}
.screen-under h3.highlight{
  background-color: #212E3D; 
  border-radius: 8px; 
  padding: 4px;
  color: #fff; 
  font-size: clamp(32px, 8vw, 40px);
  font-size: 40px; 
  font-weight: 800; 
  text-align: center;
  margin: 12px auto;
}

/* prefers-reduced-motion: statikusabb élmény */
@media (prefers-reduced-motion: reduce){
  .bg2 { opacity: 1; clip-path: circle(150% at 50% 55%); }
  .bg2 .rings{ display: none; }
}

/* a telefon biztosan felül legyen minden szekción */
.phone-wrap{ z-index: 2; }
/* ===== S3 (3. hátteres szekció, szétválasztva PIN és FLOW részre) ===== */
#s3{
  position: relative;
  display: block;
  padding: 0;
  z-index: 5;
  overflow: clip;
}

/* háttér külön rétegen, ne a #s3 kapjon backgroundot */
#s3 .s3-bg{
  position: absolute; inset: 0;
  background-image: var(--bg3);
  background-position: center center;
  background-size: cover;
  transform-origin: 50% 50%;
  will-change: transform;
  z-index: 0;
}

/* színpad (csak a díszlet belépő anim és a pin) */
#s3 .s3-pin{
  position: relative;
  min-height: 0;          /* nincs extra „színpad” */
  display: block;          /* teljesen ki is veheted */
}

#s3 .s3-flow{
  position: relative;
  min-height: 100vh;
}

/* A felső blokk ne legyen túl magas, hogy a két szöveg együtt elférjen */
#s3 .s3-inner{
  height: 68vh;          /* 65–72vh között állítható */
  min-height: 68vh;
  display: flex;
  align-items: flex-start;
}




/* felső és alsó szöveg közelebb a szélekhez, kisebb tipó */
#s3 .s3-top,
#s3 .s3-bottom{
  position: absolute;
  left: 0;
  width: min(92vw, var(--container-max));
  margin: 0;
  opacity: 0;             /* JS fade-eli be */
  transform: translateX(0);
  will-change: transform, opacity;
  text-shadow: 0 4px 18px rgba(0,0,0,.2);
}

/* FELSŐ szöveg – nagy és erős */
#s3 .s3-top{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: clamp(12px, 5vh, 56px);
  width: min(92vw, var(--container-max));
  margin: 0;
  font-size: clamp(36px, 8vw, 100px);   /* <<< NAGYOBB */
  line-height: 1.04;
  font-weight: 800;
  opacity: 0; /* JS hozza be */
  text-shadow: 0 4px 18px rgba(0,0,0,.2);
  z-index: 2;
}

/* ALSÓ szöveg – a SZEKCIÓ aljához rögzítve, nagyobbra véve */
#s3 .s3-bottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, 5vh, 56px);      /* valódi szekció alja */
  width: min(92vw, var(--container-max));
  margin: 0;
  font-size: clamp(36px, 8vw, 80px);   /* <<< NAGYOBB */
  font-weight: 800;
  opacity: 0;  /* JS hozza be */
  text-align: center;
  text-shadow: 0 4px 18px rgba(0,0,0,.2);
}

#s3 .s3-bottom-small-txt {
   font-size: clamp(30px, 7vw, 60px);   /* <<< NAGYOBB */
  font-weight: 600;
}

@media (max-width: 767px){
  #s3 .s3-pin   { min-height: 80vh; }
  #s3 .s3-flow  { min-height: 130vh; }
  #s3 .s3-inner { height: 72vh; min-height: 72vh; }

  #s3 .s3-top   { top: clamp(14px, 5vh, 64px); font-size: clamp(24px, 8vw, 56px); }
  #s3 .s3-bottom{ bottom: clamp(14px, 5vh, 64px); font-size: clamp(15px, 3.6vw, 18px); }
}

/* ===== S3 – extra függőleges tér a top és bottom között ===== */
#s3 .s3-flow {
  min-height: 120vh;        /* volt 100vh → kicsit nagyobb, hogy legyen mozgástér */
}

#s3 .s3-inner {
  height: 75vh;             /* volt 68vh → több távolság a két szöveg között */
  min-height: 75vh;
}

/* FELSŐ szöveg – marad ugyanott */
#s3 .s3-top {
  top: clamp(12px, 5vh, 56px);
}

/* ALSÓ szöveg – lejjebb visszük, így nagyobb távolság alakul ki köztük */
#s3 .s3-bottom {
  bottom: clamp(24px, 12vh, 100px);   /* <<< nagyobb alsó offset */
}

/* ===== 4. SECTION ===== */
#s4{
  position: relative;
  /* min-height: 100vh; */
  background: #249DD6;              /* a csatolt képen látott kék alap */
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 128px 0px 460px;
}

#s4 .s4-inner{
  width: min(92vw, var(--container-max));
  margin-inline: auto;
  padding: clamp(24px, 6vw, 64px);
}
#s4 .title-wrapper {
  margin-bottom: 64px;
}
#s4 h2.title {
  font-weight: 700;
  font-size: clamp(26px, 4vw, 64px);
  line-height: 1.08;
  text-align: center;
  margin: 0px auto 32px;
}

.s4-title-black {
  color: #212e3d;
}
.s4-title-white {
  color: #ffffff;
}
.s4-grid{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}

/* BAL oldal – választók */
.s4-choices{
  display: grid;
  gap: clamp(12px, 2.2vw, 18px);
}

.s4-choice{
  appearance: none;
  border: none;
  background: transparent;
  color: #212e3d4d;
  font-weight: 800;
  font-size: clamp(26px, 4vw, 48px);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-align: left;
  cursor: pointer;
  padding: .5em 0;
  transition: color .25s ease;
  transition: ease-in-out 0.2s;
}
.s4-choice:hover{ scale: 1.05; }
.s4-choice.is-active{
  color: #fff;
  font-size: clamp(32px, 6vw, 64px);
}

/* JOBB oldal – képkeret */
.s4-visual{
  display: grid;
  place-items: center;
}
.s4-imgwrap{
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 640px;
  border-radius: 18px;
  overflow: hidden;
  background: rgba(0,0,0,.08);
  box-shadow: 0 10px 34px rgba(0,0,0,.22);
  isolation: isolate;
}

/* minden kép azonos szinten van */
.s4-img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1);
  pointer-events: none;
  transition: none;
  will-change: transform, opacity;
}

.s4-img.is-active{
  opacity: 1;
  pointer-events: auto;
}

.s4-imgwrap .s4-img:first-child{
  opacity: 1;
  pointer-events: auto;
}
/* responsív */
@media (max-width: 920px){
  .s4-grid{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .s4-visual .s4-imgwrap{
    width: 100%;
  }
}


/* idézetdoboz */
.s4-quote-box-outer {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0px auto;
  bottom: -820px;
  z-index: 3;
  width: 100%;
}
.s4-quote-box{
  position: relative;
  overflow: hidden;
  width: 100%;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.08);
  padding: 32px 0px;
  gap: 24px;
}



/* nyilak */
.s4-nav{
  background: none;
  border: none;
  color: #212E3D;
  font-size: 48px;
  font-weight: 300;
  cursor: pointer;
  transition: opacity .2s ease;
}
.s4-nav:hover{ opacity: 0.6; }

.s4-quote-content {
  padding: clamp(24px, 8vw, 100px) clamp(24px, 10vw, 240px);
}
.s4-quote{
  font-size: clamp(18px, 2vw, 32px);
  line-height: 1.6;
  color: #536472;
  position: relative;
  font-weight: 500;
}
.s4-quote::before,
.s4-quote::after{
  content: "“";
  position: absolute;
  font-size: 90px;
  color: rgba(16,144,207,0.1);
  font-family: serif;
}
.s4-quote::before{ top: -20px; left: -40px; content: "“"; }
.s4-quote::after{ content: "”"; bottom: -40px; right: -20px; }

.s4-author{
  display: flex;
  align-items: center;
  gap: 18px;
}
.s4-author-photo{
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
}
.s4-author-name{
  font-weight: 700;
  font-size: 30px;
  margin: 0;
  color: #111;
}
.s4-author-role{
  font-size: 30px;
  margin: 2px 0 0;
  color: #1090CF;
}


#s4 .slick-next, #s4 .slick-prev {
	font-size: 0;
	line-height: 0;
	position: absolute;
	z-index: 999;
	top: 50%;
	margin-top: -24px;
	display: block;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	padding: 0;
	cursor: pointer;
	color: transparent;
	outline: none;
	cursor: pointer;
  border: none;
}

#s4 .slick-prev.slick-disabled, #s4 .slick-next.slick-disabled {
	display: none !important;
}


#s4 .slick-next{
	background: url(../img/slick_icon_next.svg);
	background-size: contain;
	background-repeat: no-repeat;
	right: 32px;
}
#s4  .slick-prev {
	background: url(../img/slick_icon_prev.svg);
	background-size: contain;
	background-repeat: no-repeat;
	left: 32px;
}

@media (max-width: 960px){
  #s4 {
    padding: 128px 0px;
  }
.s4-quote-box-outer {
  position: relative;
   bottom: 0px;
}
}
@media (max-width: 768px){
  .s4-quote-box{
    flex-direction: column;
  }
  .s4-nav{
    font-size: 36px;
  }
  .s4-author-name {
    font-size: 24px;
  }
  .s4-author-role {
    font-size: 20px;
  }
}
@media (max-width: 575px) {
  .s4-author {
    flex-direction: column;
  }
}


/* === Meet our brands térképes szekció === */
.s10 {
  position: relative;
  background: #f5f9fc;
  padding: 360px 0 128px;
  overflow: hidden;
}

@media (max-width: 960px) {
  /* a 360px felső padding a desktopon átfedő #s4 idézetdoboznak hagy helyet;
     mobilon az idézetdoboz már normál dokumentumfolyásban van, nincs átfedés */
  .s10 {
    padding: 64px 0 96px;
  }
}

.s10-title {
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 800;
  margin-bottom: 40px;
  color: #212e3d;
}
.s10-title .brand-blue {
  color: #1090cf;
}

.s10-layout {
  display: flex;
  flex-wrap: nowrap;
  gap: 48px;
  align-items: flex-start;
}

.s10-map-area,
.s10-info-area {
  flex: 1 1 50%;
  max-width: 50%;
}

.s10-map-area {
  flex: 1 1 45%;
  position: relative;
}
.s10-map-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 875 / 1041;  /* a térkép PNG-k valódi mérete (mind egyforma) */
  overflow: hidden;
}
.s10-map-base,
.map-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.map-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

.s10-info-area {
  flex: 1 1 45%;
  display: flex;
  flex-direction: column;
  text-align: right;
  gap: 24px;
}

.s10-tagline {
  font-size: clamp(20px, 2.5vw, 28px);
  font-weight: 700;
  color: #1090cf;
  margin-bottom: 12px;
}

.s10-country-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
.s10-country-list li {
  cursor: pointer;
  font-size: clamp(20px, 2vw, 42px);
  margin: 4px 0;
  font-weight: 800;
  color: #212e3d;
  transition: color 0.3s ease, font-weight 0.3s ease;
  text-align: right;
}
.s10-country-list li.is-active {
  font-weight: 800;
  color: #1090cf;
  text-decoration: underline;
}

.s10-partners-container {
  position: relative;
  min-height: 224px;
  overflow-x: auto;
  overflow-y: hidden;
}
.s10-partners-carousel {
  display: flex;
  gap: 16px;
}
.partner-card {
  position: relative;
  width: 224px;
  height: 224px;
  min-width: 224px;
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid #212e3d;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px;
  overflow: hidden;
  cursor: pointer;
  margin-right: 16px;
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.partner-card img {
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

/* Részletes partnerdoboz */
.s10-partner-details {
  position: absolute;
  top: 0;
  right: 0;
  width: 0;
  opacity: 0;
  background: #ffffff;
  border: 1px solid #dfe7f0;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: width 0.5s ease, opacity 0.5s ease;
  z-index: 5;
  color: #212e3d;
}
.partner-card .partner-logo {
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.partner-card .partner-info {
  position: absolute;
  inset: 0;
  padding: 40px 20px 20px;
  color: #212e3d;
  text-align: left;
  overflow: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.partner-card .close-card {
  position: absolute;
  top: 8px;
  right: 8px;
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.partner-info .partner-country {
  font-size: 16px;
  font-weight: 800;
  color: #1090cf;
  margin: 0 0 4px 0;
}
.partner-card.is-expanded {
  width: 420px;
}
.partner-card.is-expanded .partner-logo {
  opacity: 0;
  pointer-events: none;
}
.partner-card.is-expanded .partner-info,
.partner-card.is-expanded .close-card {
  opacity: 1;
  pointer-events: auto;
}

.s10-partner-details.is-open {
  width: 360px;
  opacity: 1;
}
.s10-details-close {
  position: absolute;
  top: 12px;
  right: 12px;
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}
.s10-partner-info h3 {
  margin: 0 0 8px;
  color: #212e3d;
  font-size: 24px;
  font-weight: 700;
}
.s10-partner-info p,
.s10-partner-info a {
  margin: 4px 0;
  font-size: 16px;
  color: #536472;
}
.s10-partner-info a {
  color: #1090cf;
  text-decoration: underline;
}

/* Responsive: egymás alá rendezés kis képernyőn */
@media (max-width: 960px) {
  .s10-layout {
    flex-direction: column;
  }
  .s10-map-area,
  .s10-info-area {
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
  }
  .s10-info-area {
    text-align: left;
  }
  .s10-country-list li {
    text-align: left;
  }
  .s10-partner-details {
    position: static;
    width: 100% !important;
    margin-top: 16px;
  }
}





/* ===== SECTION 6 ===== */
#s6{
  background:#1e9bd0;
  color:#e8edf2;
  padding:clamp(56px,8vh,96px) 0;
  position: relative;
 
}

#s6 .s6-title-black {
  color: #212e3d;
  font-size: clamp(32px, 6vw, 72px);
}
#s6 .s6-title-white {
  color: #ffffff;
   font-size: clamp(24px, 4vw, 36px);
}
.s6__inner{
  width:min(1100px, 92vw);
  margin:0 auto;
  width: 100%;
  max-width: 1440px;
  
}
.s6__title{
  font-size:clamp(28px,3.6vw,48px);
  line-height:1.1;
  margin:0 0 16px 0;
  font-weight:800;
}
.s6__lead{
  font-size:clamp(16px,1.6vw,20px);
  margin:0 0 28px 0;
  font-weight:700;
}

.s6__list{
  list-style:none;
  padding:0;
  margin:28px 0 0 0;
  display:flex;
  flex-direction:column;
  gap:0; 
}

.s6__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  padding: 12px 0px 12px 64px;
  border-top: 1px solid rgba(33, 46, 61, 0.35);
  border-bottom: 1px solid rgba(33, 46, 61, 0.35);
  opacity: .35;
  transition: opacity .25s ease, transform .25s ease, border-color .25s ease;
  will-change: opacity, transform, border-color;
  background: url(../img/sec_06_arrow.png) no-repeat left center / 32px auto;
  position: relative;
  min-height: 182px;
}

.s6__item:hover,
.s6__item:focus-within {
  opacity: 1;
  border-top-color: rgba(33, 46, 61, 1);
  border-bottom-color: rgba(33, 46, 61, 1);
}


.s6__item::before{
  content:"";
  grid-column:1 / -1;
  grid-row:1 / -1;
  z-index:-1;
  background:var(--stripe-bg);
  border-radius:8px;
  inset:0;
  position:absolute;
  transform:translateY(-2px);
}
.s6__item{ position:relative; }

.s6__text{
  font-size:clamp(24px,1.35vw,32px);
  line-height:1.45;
  font-weight: 700;
  color:var(--stripe-fg);
}

.s6__item a,
.s6__item button{
  color:inherit;
}
.black-hilight {
  color: #212e3d;
}

.white-box {
  margin: 128px auto 64px;
  width: 100%;
  max-width: 1440px;
  background-color: #ffffff;
  border-radius: 32px;
  padding: 105px 100px;
}

.white-box-text-container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
}
.white-box-text-container > div {
  width: 50%;
}
.white-box-text-container > div:first-of-type {
  margin-right: 64px;
}
.white-box h3 {
  font-size: 42px;
  line-height: 52px;
  font-weight: 700;
  color: #212E3D;
  text-align: center;
}
.white-box-text-container p {
  font-size: 32px;
  line-height: 36px;
  font-weight: 500;
  color: #5e7896;
}

@media (max-width: 960px){
  #s6 .s6__item.is-at-top {
    opacity: 1;                 /* amikor a teteje a viewport tetejéhez ér */
    transition: opacity .25s ease;
  }
  .white-box-text-container {
    flex-direction: column;
  }
.white-box-text-container > div {
  width: 100%;
}
}
@media (max-width: 768px) {
  .white-box {
    padding: 56px 36px;
  }
  .white-box h3 {
    font-size: 32px;
    line-height: 36px;
  }
  .white-box-text-container p {
    font-size: 24px;
    line-height: 28px;
    text-align: center;
  }
  /* .s6__item {
    opacity: 1; 
  } */
}


/* ====== SECTION 7 ====== */
.s7 {
  position: relative;
  height: 2150px; /* fix magasság */
  background: #0f1115 url("../img/sec_07_bg.jpg") no-repeat center/cover;
  color: #e8edf2;
  overflow: hidden;
  z-index: 10;
}

.s7-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding-top: 160px;
  padding-inline: 64px;
  box-sizing: border-box;
}

.s7-bg {
  position: absolute;
  inset: 0;
  opacity: 0.85;
  z-index: 0;
}

.s7-title {
  font-size: clamp(36px, 3.8vw, 72px);
  color: #212e3d;
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 96px 0;
  position: relative;
  padding-top: 128px;
  z-index: 2;
}



.s7-rail {
  display: flex;
  flex-direction: row;
  gap: 64px;
  position: relative;
  z-index: 3;
  overflow: visible;
  will-change: transform;
  padding-right: 120px;
}

.s7-card {
  flex: 0 0 760px;
  height: 644px;
  background: #e8edf2;
  color: #0f1115;
  border-radius: 32px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.35);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.s7-card-number {
  color: #249dd6;
  font-size: 172px;
  text-align: center;
  line-height: 18px;
}
.s7-card-title {
  font-size: 45px;
  font-weight: 800;
  margin: 24px 32px 12px 32px;
  text-align: center;
  color: #212E3D;
}

.s7-card-text {
  font-size: 32px;
  line-height: 1.5;
  margin: 0 32px;
  text-align: center;
  color: #5e7896;
}

.s7-card--right {
  margin-right: -120px;
}

.s7-card-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  display: block;
}



/* Finom responsive */
@media (max-width: 1280px) {
  .s7-card {
    flex: 0 0 600px;
    height: 520px;
  }
}

@media (max-width: 768px) {
  .s7 {
    height: 1600px;
    padding-bottom: 160px;
  }
  .s7-card {
    width: 100%;
    height: auto;
    margin-right: 0;
    transform: none !important;
    max-width: 420px;
  }
  
  .s7-card--right {
    margin-right: 0;
  }

  .s7-card-number {
  font-size: 82px;
  line-height: 18px;
}
.s7-card-title {
  font-size: 24px;
}
.s7-card-text {
  font-size: 18px;
}
}



/* ====== SECTION 8 ====== */
#s8 {
  position: relative;
  background: #1e9bd0;
 
}

.s8-inner {
  position: relative;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 160px 0px;
  box-sizing: border-box;
}

.s8-title {
  font-size: clamp(32px, 6vw, 72px);
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 164px 60px;
  border-top: 1px solid #212e3d;
  border-bottom: 1px solid #212e3d;
}




#s8 .s8-title {
  text-align: left;
  color: #ffffff;
}
#s8 .black-hilight {
  color: #212e3d;
}

.s8 .logo-container {
  text-align: right;
}

@media (max-width: 768px) {
  .s8-inner {
    padding: 80px 0px;
  }
  .s8-title {
    padding: 82px 30px;
}

}

/* ====== SECTION 8 ====== */
#s9 {
  position: relative;
  background: #ededed;
 
}

.s9-inner {
  position: relative;
  width: 100%;
  margin: 0 auto;
  padding: 80px 0px;
  box-sizing: border-box;
}


.s9-title {
  font-size: clamp(32px, 8vw, 72px);
  line-height: 100%;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding: 164px 0px;
}

#s9 .s9-title {
  text-align: left;
  color: #212e3d;
}
#s9 .blue-hilight {
  color: #1e9bd0;
}

.footer-logo-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
}

.footer-logo-container .flex-txt-right {
  text-align: right;
}

.footer-logo-container .flex-txt-right h3 {
  font-size: 32px;
  line-height: 36px;
  font-weight: 800;
  color: #212e3d;
  letter-spacing: -0.02em;
  margin: 0px;
}
.footer-logo-container .flex-txt-right p {
  font-size: 24px;
  line-height: 28px;
  font-weight: 500;
  color: #212e3d;
  letter-spacing: -0.02em;
  margin: 0px;
}

@media (max-width: 768px) {
  .s9-title {
    padding: 82px 0px;

  }
.footer-logo-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer-logo-container .flex-txt-right {
  text-align: left;
  margin-top: 32px;
}
}

/* ============================================================
   NINCS ANIMÁCIÓ MOBILON/TABLETEN (<= 960px)
   Minden GSAP/ScrollTrigger/Lenis animáció (hero+telefon, S3 pin-flow,
   S7 vízszintes húzás) kizárólag desktopon fut (ld. app.js isDesktopAnim).
   Itt minden érintett elem statikus, egymás alatti, normál dokumentum-
   folyású elrendezést kap. A S10 partnerkártyák nyitása/zárása
   (CSS-átmenet) minden nézetben animált marad.
   ============================================================ */
@media (max-width: 960px) {

  /* --- Hero + telefon: nincs pin/parallax/entry-anim, minden statikusan
         látszik; a telefon képernyőjének fedőrétege véglegesen félrehúzva,
         hogy a statisztika-szöveg azonnal látszódjon. --- */
  .hero {
    opacity: 1 !important;
    transform: none !important;
  }
  .phone {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .screen-bg {
    transform: translateY(-100%) !important;
  }

  /* --- S3: "Saving €150 000 000" szöveg-blokk --- */
  #s3 { overflow: visible; }
  #s3 .s3-pin { display: none; }
  #s3 .s3-flow {
    position: relative;
    z-index: 1;
    min-height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 72px 0;
  }
  #s3 .s3-inner {
    position: static;
    height: auto !important;
    min-height: auto !important;
    display: block;
  }
  #s3 .s3-top,
  #s3 .s3-bottom {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    text-align: center;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  }
  #s3 .s3-bottom {
    font-size: 18px !important;
    line-height: 1.4;
  }
  #s3 .s3-bottom-small-txt {
    font-size: 24px !important;
  }

  /* --- S6: a sorok mindig teljesen látszanak --- */
  .s6__item { opacity: 1 !important; }

  /* --- S7: kártyák egymás alatt, középre igazítva, saját
         tartalmukhoz igazodó (nem egyenlő) magassággal --- */
  .s7 { height: auto !important; padding-bottom: 64px; }
  .s7-inner { position: static; padding-top: 64px; }
  .s7-rail {
    flex-direction: column;
    align-items: center;
    transform: none !important;
    padding-right: 0;
    will-change: auto;
  }
  .s7-card {
    flex: 0 0 auto !important; /* a 600/760px flex-basis column-irányban magasságként érvényesült */
    height: auto !important;
    width: 100%;
    max-width: 480px;
    margin: 0 auto !important;
    transform: none !important;
  }
  .s7-card-text { padding-bottom: 32px; }

  /* A partnerkártyák (logó dobozok) kinyitása/bezárása mobilon/tableten is
     animált marad — ld. .partner-card CSS-transition a fájl elején. */
}