/* ════════════════════════════════════════════════════════════════
   épXPERT landing — Figma: OHZu7CKxabzCtxbbC9hQOS
   Desktop frame: 18:254 (1512×3831) · Mobile frame: 1:2 (402×3041)
   Minden érték a Figmából kiolvasva (node-id kommentekben).
   ════════════════════════════════════════════════════════════════ */

/* ── TOKENEK (Figmából) ── */
:root {
  --blue:        #00385A;  /* brand kék (gomb, címek, footer) */
  --green:       #5F8B65;  /* brand zöld (szalagok) */
  --text:        #5B5C5D;  /* folyószöveg */
  --light:       #EDEDED;  /* hero szövegek */
  --ribbon-text: #EEEEEE;  /* szalag feliratok */
  --footer-text: #F0F0F0;
  --placeholder: #A4A4A4;
  --input-border:#B3B3B3;
  --ph-grey:     #D9D9D9;  /* hero placeholder */
  --about-bg:    #EFF3EF;  /* 48:333 világos sáv a Rólunk blokk mögött */
  --red:         #DD1B1E;  /* kiemelt mondat (48:306) */
  --card-grey:   #CECECE;  /* galéria placeholder */
  --shadow-card: 1.881px 1.881px 37.619px 0 rgba(95,139,101,0.23);  /* 20:406 */
  --shadow-input:1.347px 1.347px 26.933px 0 rgba(95,139,101,0.23);  /* 18:374 */
  --frame-max:   1512px;
  --margin:      30px;     /* desktop külső margó */
  --content:    1452px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
/* a fix fejléc helye — a hero így ugyanott kezdődik, mint a tervben (y=137) */
body { padding-top: 137px; }
body {
  font-family: 'Inter', sans-serif;
  background: #fff;
  color: var(--text);
  overflow-x: hidden;
}
img { display: block; }
a { text-decoration: none; color: inherit; }

/* Tartalmi konténer: max 1452, 30px margó (Figma: x=30 … 1482) */
.container {
  width: 100%;
  max-width: var(--frame-max);
  margin: 0 auto;
  padding-left: var(--margin);
  padding-right: var(--margin);
}

/* ── HEADER (Figma: logo 18:264 230×79 @30,28 · nav 19:393) ── */
/* ── FEJLÉC ─────────────────────────────────────────────────────
   Alap: a Figma 137 px-es fehér sávja. Görgetéskor tapadóvá válik:
   kisebb margó, kisebb logó, áttetsző fehér háttér.
   ──────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;                  /* nem sticky: így a magasságváltás nem tördeli újra a lapot */
  top: 0; left: 0; right: 0;
  z-index: 60;
  background: #fff;
  transition: background .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
}
.site-header .container {
  height: 137px;                    /* hero teteje y=137 */
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  transition: height .3s ease;
}
.logo-row {
  display: flex;
  align-items: flex-end;
  gap: clamp(10px, 1vw, 15px);       /* fő logó → első alárendelt: 275-260 */
  padding-top: 28px;                 /* logó y=28 */
  transition: padding-top .3s ease;
}
.site-header .logo img {
  width: clamp(150px, 15.2vw, 230px);
  height: auto;
  transition: width .3s ease;
}
/* Alárendelt márkalogók: mind 40 magas, a fő logó aljától 10 px-re (65:195/199/222) */
.logo-subs {
  display: flex;
  align-items: flex-end;
  gap: clamp(14px, 1.6vw, 24px);
  margin-bottom: clamp(6px, .66vw, 10px);
}
.logo-subs img {
  height: clamp(24px, 2.65vw, 40px);
  width: auto;
  transition: height .3s ease;
}
.main-nav {
  display: flex;
  gap: 40px;                        /* linkek köze Figma: 40px */
  padding-top: 71px;                /* nav y=70.9 */
  transition: padding-top .3s ease;
}
.main-nav a {
  font-weight: 700;
  font-size: 16px;
  color: var(--blue);
  transition: color .2s;
}
.main-nav a:hover, .main-nav a:focus-visible { color: var(--green); }   /* épXPERT zöld #5F8B65 */

/* Görgetett állapot */
.is-scrolled .site-header {
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow: 0 1px 20px rgba(0,56,90,.08);
}
.is-scrolled .site-header .container {
  height: 72px;
  align-items: center;              /* összehúzott sávban függőlegesen középen */
}
.is-scrolled .logo-row { padding-top: 0; }
.is-scrolled .site-header .logo img { width: clamp(120px, 10.6vw, 160px); }
.is-scrolled .logo-subs img { height: clamp(18px, 1.85vw, 28px); }
.is-scrolled .main-nav { padding-top: 0; }

/* Ugrócélok: a tapadó sáv magassága + 10 px, hogy a fejléc ne takarja a szekció tetejét */
:root { --header-offset: 82px; }        /* 72 + 10 */
main [id], section[id] { scroll-margin-top: var(--header-offset); }
/* a fejléc saját rétegen animál, hogy a görgetés sima maradjon */
.site-header { will-change: height; }

.menu-btn { display: none; }

/* ── HERO (Figma 18:278: 1512×581 @y137 · szalag 18:279 @641,401 871×152) ── */
.hero {
  position: relative;
  height: clamp(300px, 38.4vw, 581px);
  background: var(--ph-grey);
  overflow: hidden;
}
.hero-img,
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-ribbon { z-index: 2; }
.hero-ribbon {
  position: absolute;
  right: 0;
  top: 45.4%;                        /* (401-137)/581 = 264/581 */
  width: clamp(480px, 57.6vw, 871px);
  aspect-ratio: 871 / 152;
  background: url('../assets/img/hero-ribbon.svg') no-repeat right center / 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(150px, 18.45vw, 279px);  /* headline x=920 → 279px a szalagon belül
                                                  (FIGYELEM: %-os padding a szülőhöz számolna!) */
}
.hero-ribbon h1 {
  font-weight: 900;                  /* Inter Black 18:281 */
  font-size: clamp(26px, 3.04vw, 45.93px);
  line-height: 0.875;                /* 40.19/45.93 */
  color: var(--light);
  margin-bottom: clamp(8px, 1.4vw, 21px);   /* 486-432.7-40 */
}
.hero-ribbon .sub {
  font-weight: 400;                  /* 18:282 */
  font-size: clamp(16px, 1.9vw, 28.707px);
  line-height: 1.2;
  color: var(--light);
}

/* ── BENEFIT KÁRTYÁK (20:444/403/424: 474 széles, 15 gap, hero-ra -67 átfedés) ── */
.benefits .container {
  display: grid;
  grid-template-columns: repeat(6, 1fr);   /* 6 sav: 3 kártya = 2-2 sáv, a 4-5. kártya középre */
  gap: 15px;
  margin-top: -67px;                 /* kártya y=651, hero alja 718 */
  position: relative;
  z-index: 2;
  align-items: start;
}
/* 2 / 1 / 2 elrendezés: a magas „Komplett befejező…” kártya a blokk közepén */
.benefits .benefit-card { grid-column: span 2; }
.benefits .benefit-card:nth-child(1) { grid-column: 2 / span 2; grid-row: 1; }
.benefits .benefit-card:nth-child(2) { grid-column: 4 / span 2; grid-row: 1; }
.benefits .benefit-card:nth-child(3) { grid-column: 3 / span 2; grid-row: 2; }
.benefits .benefit-card:nth-child(4) { grid-column: 2 / span 2; grid-row: 3; }
.benefits .benefit-card:nth-child(5) { grid-column: 4 / span 2; grid-row: 3; }
.benefit-card {
  background: #fff;
  box-shadow: var(--shadow-card);
  min-height: 134px;                 /* 20:446 */
  position: relative;
  padding: 30px 13px 26px 124px;     /* cím top 30.2 · szöveg x=154.1 → 124.1 · jobb oldalon 13 (474-124-337) */
}
/* Ikon: abszolút, függőlegesen középen — NEM növeli a kártya magasságát (Figma fix magasságok) */
.benefit-card .icon {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 124px;
  display: flex;
  justify-content: center;
}
/* Ikononkénti pontos méretek (Figma 20:450 / 20:410 / 20:431) */
.icon--fest img   { width: clamp(48px, 5.1vw, 77.1px);  height: auto; }
.icon--szaraz img { width: clamp(40px, 4.23vw, 63.95px); height: auto; }
.icon--iroda img  { width: clamp(55px, 5.85vw, 88.4px);  height: auto; }
.icon--haz img    { width: clamp(46px, 4.9vw, 74px);     height: auto; }
.icon--sip img    { width: clamp(46px, 4.9vw, 74px);     height: auto; }
.benefit-card h3 {
  font-weight: 700;                  /* 20:448 */
  font-size: clamp(18px, 2vw, 30.095px);
  line-height: 1.2;
  color: var(--blue);
}
.benefit-card p {
  font-weight: 400;                  /* 20:449 */
  font-size: clamp(15px, 1.74vw, 26.333px);
  line-height: 1.2;
  color: var(--text);
  margin-top: 5.4px;                 /* 722.7-681.2-36.1 */
}
.benefit-card p sup { font-size: 64.5%; }   /* 16.985/26.333 */
/* 3. kártya (20:427): magasabb (188), cím feljebb-pozíciója más (690.5 → 39.5) */
.benefit-card--tall { min-height: 188px; padding-top: 39.5px; }
.benefit-card--tall p { margin-top: 9.3px; }   /* 769.4-690.5-69.6 */

/* ── GOMB (18:339 Kapcsolat gomb: 387.2×73.45, Inter Bold 33.578, FA nyíl) ── */
.btn-slant {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, .75vw, 11.3px);
  width: clamp(200px, 20.8vw, 315px);
  aspect-ratio: 315 / 60;
  background: url('../assets/img/btn-bg.svg') no-repeat center / 100% 100%;
  border: 0;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(16px, 1.81vw, 27.368px);
  color: #fff;
  transition: filter .25s ease, transform .15s ease;
}
/* Auto-szélességű változat hosszabb felirathoz: a btn-bg.svg helyett azonos
   dőlésű clip-path (46.6279 / 73.4517 = a szalag vízszintes eltolása). */
.btn-slant--auto {
  --btn-h: clamp(44px, 4.86vw, 73.45px);
  --btn-slant: calc(var(--btn-h) * 0.635);
  width: auto;
  max-width: 100%;
  aspect-ratio: auto;
  height: var(--btn-h);
  padding: 0 calc(var(--btn-slant) + 22px);
  background: var(--blue);
  clip-path: polygon(var(--btn-slant) 0, 0 100%, calc(100% - var(--btn-slant)) 100%, 100% 0);
  white-space: nowrap;
  font-size: clamp(16px, 1.72vw, 26px);
  gap: 16px;
}
.btn-slant--auto .arrow { width: clamp(15px, 1.5vw, 22px); }
.btn-slant:hover { filter: brightness(1.18); }
.btn-slant:active { transform: translateY(1px); }
.btn-slant .arrow { width: clamp(15px, 1.39vw, 21px); height: auto; fill: currentColor; }
.btn-row { display: flex; justify-content: center; }
.btn-row--hero { margin-top: clamp(50px, 5.75vw, 87px); }   /* 1251 - 1199 (kártyák alja) */   /* 921-839 (magas kártya alja) */

/* ── BEMUTATKOZÓ SZÖVEG (18:336 @30,1076 1452 széles, Inter 20) ── */
.intro-text {
  margin-top: clamp(48px, 5.4vw, 81.5px);   /* 1076-994.5 (gomb alja) */
}
.intro-text p {
  font-size: clamp(14px, 1.32vw, 20px);
  line-height: 1.2;
  color: var(--text);
}
.intro-text p + p { margin-top: 1.2em; }

/* ── STATISZTIKA (28:619 @31,1301 548.7×214 · 28:640 @445 · 28:657 szöveg) ── */
.stats { margin-top: clamp(40px, 5.4vw, 82px); }   /* 1301-1219 */
.stats .container {
  display: flex;
  align-items: center;
}
.stats .stat-graphics {
  display: flex;
  flex: 0 0 auto;
  width: 66.3%;                       /* (445+548.7-31)/1452 = 962.7/1452 */
}
.stats .stat-graphics img { width: 57%; height: auto; }    /* 548.7/962.7 */
.stats .stat-graphics img + img { margin-left: -14%; }     /* átfedés 134.7/962.7 (Figma: 445-579.7) */
.stats h2 {
  font-weight: 900;                   /* Inter Black 28:657 */
  font-size: clamp(22px, 2.65vw, 40px);
  line-height: 1.2;
  color: var(--blue);
  max-width: 427px;
  margin-left: auto;
  margin-right: 1.7%;                 /* szöveg x=1008..1435 */
}

/* ── SZALAG (18:255 PROJEKTJEINK: 1452×56.56, szöveg Inter Bold 26.93) ── */
.ribbon {
  margin-top: clamp(46px, 5.4vw, 82px);   /* 1597-1515 */
  width: min(var(--content), calc(100% - 2 * var(--margin)));
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 1452 / 56.5586;
  background: url('../assets/img/ribbon.svg') no-repeat left center / 100% 100%;
  display: flex;
  align-items: center;
}
.ribbon h2 {
  font-weight: 200;                   /* Inter Extra Light (47:26/47:28) */
  font-size: clamp(20px, 2.65vw, 40px);
  color: var(--ribbon-text);
  padding-left: 6.06%;                /* szöveg x=118 → 88/1452 */
  line-height: 1.2;
}

/* ── RÓLUNK (58:3 · 2 hasáb × 2 sor, ikonpárral) ── */
.about {
  /* a felső hajszálvonal a sáv FÖLÖTT, fehéren fut (58:4 sáv 1425-től, vonal 1424) */
  background: linear-gradient(to bottom, #fff 0 1px, var(--about-bg) 1px);
  padding: 0 0 clamp(44px, 4.7vw, 71px);   /* 2417 - 2346 */
  margin-top: clamp(60px, 7.5vw, 114px);   /* 1425 - 1311 (gomb alja) */
}
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 1.033%;                 /* 15/1452 → 718 széles hasábok (30 · 764) */
  row-gap: clamp(40px, 5vw, 73px);    /* 1887 - 1814 */
}
.about-cell {
  border-top: 1px solid var(--green);  /* 58:269 · 58:391 hajszálvonal */
  padding-top: clamp(12px, 1.4vw, 20px);   /* ikon y = vonal + 20 */
}
/* Ikonsor a blokk tetején (rolunk-ikonsor.svg, natív 291×76) */
.about-icons { margin-bottom: clamp(14px, 1.6vw, 24px); }
.about-icons img {
  width: clamp(160px, 19.2vw, 291px);
  height: auto;
}
.about-cell h3 {
  font-weight: 700;
  font-size: clamp(18px, 1.72vw, 26px);
  line-height: 1.2;
  color: var(--blue);
  margin-bottom: clamp(9px, 1vw, 15px);      /* 1608 - 1595 */
}
.about-cell p {
  font-size: clamp(14px, 1.26vw, 19px);
  line-height: 1.21;
  color: var(--text);
}
.about-cell p + p { margin-top: 1.15em; }    /* a bekezdések közti üres sor */

/* ── REFERENCIA KÁRTYÁK (a 18:343 galéria-kártya arányából + 20:406 árnyék) ── */
.refs { margin-top: clamp(8px, .9vw, 13.5px); }   /* 1667-1653.6, mint a galériánál */
.ref-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;                          /* Figma kártyaköz */
}
.ref-card {
  background: #fff;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.ref-card.is-hidden { display: none; }
.ref-grid.is-open .ref-card.is-hidden { display: flex; }
/* Fotó a kártya tetején, ráúszó típusfelirattal */
.ref-photo {
  position: relative;
  aspect-ratio: 474 / 300;
  width: 100%;
  overflow: hidden;
  background: var(--card-grey);
}
.ref-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
.ref-card:hover .ref-photo img { transform: scale(1.04); }
/* valódi fotó nélküli kártya: a képhely fehér, csak a címkesáv látszik rajta */
.ref-card.nincs-kep .ref-photo { background: #fff; }
/* Típusfelirat a design-módosítás szerint: teljes szélességű, áttetsző világos
   sáv a fotó TETEJÉN, bal szélén 5 px zöld csík, zöld betűkkel. A mintán 47 px
   magas egy 475 px széles kártyán; fehér alapon #EDEDED, a fotón átüt. */
.ref-tag {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 15.7%;                         /* 47 / 300 (a fotó magassága) */
  display: flex;
  align-items: center;
  padding: 0 16px 0 22px;                /* a szöveg a kártya szélétől 27 px */
  border-left: 5px solid var(--green);
  background: rgba(233, 233, 233, .82);
  color: var(--green);
  font-weight: 700;
  font-size: clamp(12px, 1.06vw, 16px);
  line-height: 1;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 1;
}

.ref-body { padding: 24px 26px 28px; }
.ref-card h3 {
  font-weight: 700;
  font-size: clamp(17px, 1.45vw, 22px);
  line-height: 1.2;
  color: var(--blue);
}
.ref-desc {
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.35;
  color: var(--text);
  margin-top: 10px;
}
.ref-time {
  font-weight: 700;
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.2;
  color: var(--green);
  margin-top: 14px;
}
.ref-nums {
  list-style: none;
  margin-top: 12px;
  border-top: 1px solid var(--light);
  padding-top: 12px;
}
.ref-nums li {
  font-size: clamp(13px, 1.06vw, 16px);
  line-height: 1.5;
  color: var(--text);
  padding-left: 16px;
  position: relative;
}
.ref-nums li::before {
  content: "";
  position: absolute;
  left: 0; top: .62em;
  width: 6px; height: 6px;
  background: var(--green);
}
.ref-nums sup { font-size: 64.5%; }
.btn-row--refs { margin-top: clamp(30px, 3.2vw, 48px); }
.btn-row--refs.is-done { display: none; }

/* ── BESZÁLLÍTÓINK (47:3 szalag + 352×140 kártyák, egy sávban úsztatva) ── */
.partners { margin-top: clamp(8px, .9vw, 13.5px); }
.partner-wrap { position: relative; }
.partner-viewport {
  position: relative;
  overflow: hidden;
  margin: 0 clamp(36px, 3.6vw, 52px);   /* a nyilaknak hagyott sáv */
}
/* a széleken a logók elhalványodnak, nem vágódnak el */
.partner-viewport::before,
.partner-viewport::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(26px, 2.8vw, 42px);
  z-index: 2;
  pointer-events: none;
}
.partner-viewport::before { left: 0;  background: linear-gradient(to right, #fff 15%, rgba(255,255,255,0)); }
.partner-viewport::after  { right: 0; background: linear-gradient(to left,  #fff 15%, rgba(255,255,255,0)); }
.partner-track {
  display: flex;
  gap: 15px;
  will-change: transform;
}
.partner-logo {
  flex: 0 0 24.24%;                   /* 352/1452 */
  aspect-ratio: 352 / 140;            /* kártyaháttér és árnyék nélkül, ahogy a tervben */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(14px, 1.8vw, 26px);
}
.partner-logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }

/* Lapozó nyilak: háttér nélkül, zölden, a sáv két oldalán */
.partner-nav {
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(28px, 2.6vw, 38px);
  padding: 0;
  border: 0;
  background: none;
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
  transition: opacity .2s, transform .2s;
  opacity: .75;
}
.partner-nav:hover { opacity: 1; }
.partner-nav:active { transform: scale(.94); }
.partner-nav .arrow { width: 60%; height: auto; }
.partner-prev { left: 0; }
.partner-prev .arrow { transform: scaleX(-1); }
.partner-next { right: 0; }

/* ── TÉRKÉP (18:347 @30,2355 1452×404 — Google Maps beágyazva) ── */
.map-section { margin-top: clamp(8px, .9vw, 13.5px); }   /* 2355-2341.6 */
.map-section .map-embed {
  width: 100%;
  aspect-ratio: 1452 / 404;
  border: 0;
  display: block;
}

/* ── ELÉRHETŐSÉG KÁRTYÁK (18:349/354/359 @y2716: 472.3×112.46) ── */
.contact-cards .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: -43px;                  /* kártya y=2716, térkép alja 2759 */
  position: relative;
  z-index: 2;
}
.contact-card {
  background: #fff;
  box-shadow: var(--shadow-card);
  min-height: 150px;                  /* 18:349/18:354/18:359 */
  display: flex;
  align-items: center;
  padding: 10px 20px 10px 24px;       /* ikon x=54.4-30 */
}
.contact-text { display: flex; flex-direction: column; }
.contact-label {
  font-weight: 400;
  font-size: clamp(12px, 1.06vw, 16px);
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 4px;
}
.contact-label--2 { margin-top: 10px; }     /* második címke a két e-mail közt (48:331) */
.contact-label { line-height: 1.15; }
.contact-card .icon {
  flex: 0 0 96px;                     /* szöveg x=150 → 120-24 */
  display: flex;
  justify-content: flex-start;
}
/* Ikononkénti pontos méretek (Figma 26:471 pin / 26:472 telefon / 18:364 email) */
.icon--pin img   { width: clamp(31px, 3.47vw, 52.5px); height: auto; }
.icon--tel img   { width: clamp(40px, 4.46vw, 67.5px); height: auto; }
.icon--mail img  { width: clamp(39px, 4.34vw, 65.6px); height: auto; }
.contact-card p, .contact-card a {
  font-weight: 700;                   /* 18:352 */
  font-size: clamp(16px, 1.72vw, 26px);
  line-height: 1.2;
  color: var(--blue);
}
.contact-card a:hover { opacity: .75; }

/* ── ALSÓ BLOKK: szöveg + űrlap (18:337 · 18:372) ── */
.contact-bottom { margin-top: clamp(46px, 5.4vw, 81.5px); }  /* 2910-2828.5 */
.contact-bottom .container {
  display: grid;
  /* Figma: szöveg 30..502 (472) | köz 139 | űrlap 641..1359 (718) | üres 123 a jobb margóig */
  grid-template-columns: 472fr 139fr 718fr 123fr;
  align-items: start;
}
.contact-bottom .lead {
  font-size: clamp(13px, 1.25vw, 18.853px);
  line-height: 1.2;
  color: var(--text);
  grid-column: 1;
}
.contact-form { grid-column: 3; display: flex; flex-direction: column; gap: 13.1px; }  /* 2977-2963.9 */
.contact-form input,
.contact-form textarea {
  width: 100%;
  height: 53.87px;                    /* 18:374 */
  background: #fff;
  border: 1.347px solid var(--input-border);
  box-shadow: var(--shadow-input);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.25vw, 18.853px);
  color: var(--text);
  padding: 0 18.8px;                  /* placeholder x=659.8-641 */
}
.contact-form textarea {
  height: 162px;                      /* 18:386 */
  padding-top: 16.5px;                /* 3195.5-3179 */
  resize: vertical;
}
.contact-form ::placeholder { color: var(--placeholder); opacity: 1; }
.contact-form input:focus,
.contact-form textarea:focus { outline: 2px solid var(--green); outline-offset: -1px; }
.btn-row--form {
  grid-column: 3;
  justify-content: flex-start;
  margin-top: clamp(40px, 5vw, 76px);   /* 3417-3341 */
}

/* ── ALOLDAL FEJLÉC (fejléckép nélkül) ── */
.page-head {
  padding: clamp(34px, 4.3vw, 65px) 0 clamp(20px, 2.4vw, 36px);
  border-bottom: 1px solid var(--green);
}
.page-head h1 {
  font-weight: 700;
  font-size: clamp(28px, 4.2vw, 64px);
  line-height: 1.15;
  color: var(--blue);
}

/* ── ALOLDAL SZÖVEGBLOKK (palyazatok.html) ── */
.page-body { padding: clamp(30px, 3.6vw, 55px) 0 clamp(50px, 6.5vw, 98px); }
.page-text { max-width: 74ch; }
.page-text .lead {
  font-size: clamp(16px, 1.59vw, 24px);
  line-height: 1.35;
  color: var(--blue);
  font-weight: 700;
  margin-bottom: 1em;
}
.page-text p {
  font-size: clamp(14px, 1.32vw, 20px);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: 1em;
}
.page-text h2 {
  font-weight: 700;
  font-size: clamp(19px, 1.99vw, 30px);
  line-height: 1.2;
  color: var(--blue);
  margin: 1.6em 0 .6em;
}
.page-text ul { margin: 0 0 1.4em; padding-left: 0; list-style: none; }
.page-text li {
  position: relative;
  padding-left: 22px;
  font-size: clamp(14px, 1.32vw, 20px);
  line-height: 1.5;
  color: var(--text);
  margin-bottom: .35em;
}
.page-text li::before {
  content: "";
  position: absolute;
  left: 0; top: .6em;
  width: 8px; height: 8px;
  background: var(--green);
}

/* A lenyíló mobilmenüben a cégcsoport logói (asztali nézetben a fejlécben vannak) */
.nav-logos { display: none; }

/* ── FOOTER (26:489: 1512×258 #00385a) ── */
.site-footer {
  margin-top: clamp(48px, 5.4vw, 81.5px);   /* 3572-3490.5 */
  background: var(--blue);
  color: var(--footer-text);
}
.site-footer .container {
  padding-top: 41px;                  /* logo y=3613-3572 */
  padding-bottom: 21px;               /* 258 össz-magassághoz */
  display: grid;
  grid-template-columns: 489fr 368fr 595fr;  /* logók 30..364 | cím 519.. | linkek 887.. */
  row-gap: 0;
}
/* 2×2 logórács: bal hasáb x=30, jobb x=222; sorok y=5145 és 5214 (24 px köz) */
.footer-logos {
  display: grid;
  grid-template-columns: 39.3% auto;   /* a jobb hasáb 192 px-re kezdődik (222-30) */
  gap: 24px 0;                         /* sorok: 5145 → 5214 */
  align-content: start;                /* felülre pakolva, ne nyúljon szét */
  align-items: start;
  justify-items: start;
}
.footer-logos img { height: clamp(30px, 2.98vw, 45px); width: auto; }
.footer-address {
  font-size: clamp(13px, 1.25vw, 18.853px);
  line-height: 1.5;
  padding-top: 7px;                   /* 3620-3613 */
}
.footer-address strong { display: block; font-weight: 700; line-height: 1.2; margin-bottom: 1.2em; }
.footer-nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 7px;
}
.footer-nav a {
  font-weight: 700;                   /* 26:511 */
  font-size: clamp(13px, 1.25vw, 18.853px);
  line-height: 2;
  transition: opacity .2s;
}
.footer-nav a:hover { opacity: .75; }
.footer-nav .fb { margin-top: 11px; }  /* 3738-3727 */
.footer-nav .fb img { width: 30px; height: 30px; }
.footer-bottom {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 17px;                   /* 3785-3768 (fb alja) */
  font-size: 13px;                    /* 26:508/510 */
}
.footer-bottom .legal a:hover { text-decoration: underline; }

/* ── 1200–1459px: a vízszintes menü elfér, de szorosabb szedéssel ── */
@media (min-width: 1200px) and (max-width: 1459px) {
  .main-nav { gap: 20px; }
  .main-nav a { font-size: 14px; }
  .logo-subs { gap: clamp(12px, 1.4vw, 20px); }
}

/* ════════════════════════════════════════════════════════════════
   KÖZTES NÉZET (≤1199px): a 6 pontos vízszintes menü nem fér ki a
   négy logó mellé, ezért itt már hamburger + lenyíló panel van.
   A logósor viszont marad a sávban.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .menu-btn {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: none; border: 0; cursor: pointer;
  }
  .menu-btn img { width: 27px; height: 18px; }
  .main-nav {
    display: none;
    position: absolute;
    top: 137px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 8px 20px rgba(0,56,90,.12);
    z-index: 50;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px var(--margin); }
  .is-scrolled .main-nav { top: 72px; }
  .logo-subs { gap: clamp(10px, 1.4vw, 18px); }
}

/* ════════════════════════════════════════════════════════════════
   MOBIL (Figma frame 1:2, 402 széles, margó 10) — töréspont: 767px
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  :root { --margin: 10px; }

  /* Header: logo 181×62 @13,8 · hamburger 36 @346,22 (8:263) */
  .site-header .container { height: 77px; align-items: center; }
  .logo-row { padding-top: 0; gap: 10px; }
  .logo-subs { display: none; }       /* a mobil terven csak a fő logó szerepel */
  .site-header .logo img { width: 181px; }
  .is-scrolled .site-header .container { height: 60px; }
  .is-scrolled .site-header .logo img { width: 140px; }
  .is-scrolled .main-nav { padding-top: 0; top: 60px; }
  :root { --header-offset: 70px; }      /* 60 + 10 */
  .main-nav {
    display: none;
    position: absolute;
    top: 77px; left: 0; right: 0;
    background: #fff;
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
    box-shadow: 0 8px 20px rgba(0,56,90,.12);
    z-index: 50;
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 10px; }
  .nav-logos {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    padding: 16px 10px 14px;
    margin-top: 4px;
    border-top: 1px solid var(--light);
  }
  .nav-logos img { height: 26px; width: auto; }
  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    background: none; border: 0; cursor: pointer;
  }
  .menu-btn img { width: 27px; height: 18px; }
  body { padding-top: 77px; }        /* mobil fejlécmagasság */

  /* Hero: 383 magas · szalag 424.8×96 @43,282 · headline 32/28 · sub 20 */
  .hero { height: 383px; }
  .hero-ribbon {
    top: 205px;                       /* 282-77 */
    left: clamp(24px, 10.7vw, 43px); right: auto;    /* 402-n 43, kisebb kijelzőn arányos */
    width: calc(100% - clamp(24px, 10.7vw, 43px) + 66px);  /* jobbra kifut (424.8 a 402-ből) */
    max-width: none;
    aspect-ratio: 424.818 / 96;
    padding-left: clamp(38px, 15.7vw, 63px);  /* szöveg x=106 → 63px a szalagon belül (fix, nem %!) */
    /* A szalag 66px-rel kilóg a viewportból jobbra: ennyi + tartalék jobb padding,
       hogy a SZÖVEG soha ne fusson a képernyő szélén túlra. */
    padding-right: 76px;
  }
  .hero-ribbon h1 { font-size: clamp(19px, 6.6vw, 28px); line-height: 0.95; margin-bottom: 7px; }
  .hero-ribbon .sub { font-size: clamp(13px, 4.5vw, 18px); }

  /* Kártyák: 252 széles középen, gap 18, cím 16/sub 14 */
  .benefits .container {
    grid-template-columns: 1fr;
    gap: 18px;
    /* a desktop 6-sávos elhelyezést is vissza kell állítani, különben a 4-5. kártya
       implicit oszlopba kerül és vízszintes görgetést okoz */
    margin-top: -38px;                /* kártya y=422, hero alja 460 */
    justify-items: center;
  }
  .benefits .benefit-card,
  .benefits .benefit-card:nth-child(1),
  .benefits .benefit-card:nth-child(2),
  .benefits .benefit-card:nth-child(3),
  .benefits .benefit-card:nth-child(4),
  .benefits .benefit-card:nth-child(5) { grid-column: auto; grid-row: auto; }
  .benefit-card {
    width: 252px;
    min-height: 71px;
    padding: 16px 0 14px 66px;        /* cím y=438-422 · szöveg x=141 → 66 */
  }
  .benefit-card .icon { width: 66px; }
  /* Mobil ikonméretek (Figma 12:72 / 8:209 / 8:223) */
  .icon--fest img   { width: 41px; }
  .icon--szaraz img { width: 34px; }
  .icon--iroda img  { width: 47px; }
  .icon--haz img    { width: 39px; }
  .icon--sip img    { width: 39px; }
  .benefit-card h3 { font-size: 16px; }
  .benefit-card p { font-size: 14px; margin-top: 3px; }
  .benefit-card--tall { min-height: 100px; padding-top: 21px; }  /* 8:247: h=100, cím y=621 */
  .benefit-card--tall p { margin-top: 5px; }                      /* 663-621-37 */

  /* Gomb: 184.5×35, szöveg 16, nyíl 14 */
  .btn-slant { width: 184.5px; font-size: 16px; gap: 10px; }
  .btn-slant .arrow { width: 14px; }
  .btn-row--hero { margin-top: 45px; }   /* 745-700 */

  .intro-text { margin-top: 45px; }      /* 825-780 */
  .intro-text p { font-size: 14px; }

  /* Statisztika: grafikák egymáson (218/217×85), szöveg 20 középre alattuk */
  .stats { margin-top: 45px; }           /* 1074-1029 */
  .stats .container { flex-direction: column; align-items: stretch; }
  .stats .stat-graphics { width: 100%; }
  .stats .stat-graphics img { width: 57%; }        /* 218/382 */
  .stats .stat-graphics img + img { margin-left: -13.9%; }  /* 175-(10+218) */
  .stats h2 {
    font-size: 20px;
    text-align: center;
    max-width: none;
    margin: 18px auto 0;               /* 1177-1159 */
  }

  /* Szalag: full-bleed (x=-27, 419 széles), szöveg 20 @x10 */
  .ribbon {
    margin-top: 45px;                  /* 1245-1200 */
    width: calc(100% + 17px);          /* Figma: -27 → 392 (10px a jobb széltől) */
    margin-left: -27px;
    margin-right: 0;
    aspect-ratio: 419 / 42;
  }
  .ribbon h2 { font-size: 20px; padding-left: 37px; }   /* 10+27 */

  /* Rólunk: egy oszlop */
  .about { margin-top: 45px; padding: 0 0 36px; }
  .about-grid { grid-template-columns: 1fr; row-gap: 30px; }
  .about-cell { padding-top: 14px; }
  .about-icons { margin-bottom: 14px; }
  .about-icons img { width: 190px; }
  .about-cell h3 { font-size: 18px; }
  .about-cell p { font-size: 14px; }
  .ref-tag { padding-left: 18px; font-size: 13px; }
  .btn-slant--auto { width: auto; font-size: 15px; gap: 10px; padding: 0 calc(var(--btn-slant) + 14px); }
  .btn-slant--auto .arrow { width: 13px; }

  /* Referenciák: egy oszlop, a mobil kártyaszélesség (327/402) szerint */
  .refs { margin-top: 10px; }
  .ref-grid { grid-template-columns: 1fr; gap: 15px; }
  .ref-body { padding: 18px 18px 20px; }
  .ref-card h3 { font-size: 17px; }
  .ref-desc, .ref-time, .ref-nums li { font-size: 14px; }
  .btn-row--refs { margin-top: 28px; }

  /* Beszállítók: 2 oszlop */
  .partners { margin-top: 10px; }
  .partner-track { gap: 12px; }
  .partner-logo { flex: 0 0 calc(50% - 6px); padding: 14px; }
  .partner-nav { width: 24px; }
  .partner-viewport { margin: 0 26px; }
  .partner-logo span { font-size: 18px; }

  /* Térkép: full-bleed 402×233 */
  .map-section { margin-top: 10px; }
  .map-section .container { padding: 0; }
  .map-section .map-embed { aspect-ratio: 402 / 233; }

  /* Elérhetőség kártyák: 252×60 középen, gap 15, szöveg 16 */
  .contact-cards .container {
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: -28px;                 /* 1969-1997 */
    justify-items: center;
  }
  .contact-card { width: 252px; min-height: 60px; padding: 14px 12px 14px 15px; }  /* ikon x≈90-75 */
  .contact-label { font-size: 12px; }
  .contact-card .icon { flex: 0 0 51px; }
  /* Mobil ikonméretek (Figma 10:58 / 10:61 / 10:56) */
  .icon--pin img  { width: 28px; }
  .icon--tel img  { width: 36px; }
  .icon--mail img { width: 35px; }
  .contact-card p, .contact-card a { font-size: 16px; }

  /* Alsó blokk: egymás alatt */
  .contact-bottom { margin-top: 45px; }   /* 2224-2179 */
  .contact-bottom .container { grid-template-columns: 1fr; }
  .contact-bottom .lead { font-size: 14px; }
  .contact-form { grid-column: 1; margin-top: 23px; gap: 10px; }  /* 2315-2292 */
  .contact-form input, .contact-form textarea {
    height: 40px;                      /* 16:207 */
    border-width: 1px;
    font-size: 14px;
    padding: 0 10px;
    box-shadow: 1px 1px 20px 0 rgba(95,139,101,0.23);
  }
  .contact-form textarea { height: 120px; padding-top: 12px; }   /* 16:242 */
  .btn-row--form { grid-column: 1; justify-content: center; margin-top: 32px; }  /* 2667-2635 */

  /* Footer: 276 magas, logók sorban, 12px szövegek */
  .site-footer { margin-top: 63px; }      /* 2765-2702 */
  .site-footer .container {
    grid-template-columns: 261fr 121fr;   /* Figma: cím x10 w215 | linkek x271 w81 */
    padding-top: 25px;                    /* 2790-2765 */
    padding-bottom: 14px;
  }
  .footer-logos { grid-column: 1 / -1; grid-template-columns: auto auto; gap: 18px 25px; justify-content: start; }
  .footer-logos img { height: 30px; }
  .footer-address { font-size: 12px; padding-top: 32px; }   /* 2858-2826 */
  .footer-address strong { margin-bottom: 1.2em; }
  .footer-nav { padding-top: 27px; }       /* 2853-2826 */
  .footer-nav a { font-size: 12px; }
  .footer-nav .fb { margin-top: 8px; }
  .footer-nav .fb img { width: 25px; height: 25px; }   /* 28:737 */
  .footer-bottom { margin-top: 29px; font-size: 10px; flex-direction: column; gap: 10px; }  /* 2987 */
}

/* Köztes nézet (768–1023): 3 oszlop marad, de kисebb betűk már clamp-elve */
@media (min-width: 768px) and (max-width: 1023px) {
  .benefit-card { padding-left: 90px; padding-right: 13px; }
  .benefit-card .icon { width: 90px; }
  .contact-card .icon { flex: 0 0 70px; }
  .benefits .container { grid-template-columns: repeat(2, 1fr); }
  .benefits .benefit-card,
  .benefits .benefit-card:nth-child(1),
  .benefits .benefit-card:nth-child(2),
  .benefits .benefit-card:nth-child(3),
  .benefits .benefit-card:nth-child(4),
  .benefits .benefit-card:nth-child(5) { grid-column: auto; grid-row: auto; }
  /* az 5. kártya a két oszlop között középen, PONTOSAN egy oszlop szélességben
     (a justify-self: center miatt magától tartalom-szélességű lenne) */
  .benefits .benefit-card:nth-child(5) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 7.5px);        /* fél konténer mínusz a 15 px köz fele */
  }
  .ref-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-logo { flex: 0 0 calc(33.333% - 10px); }

}

/* ════════════════════════════════════════════════════════════════
   KIS MOBIL (≤379px, pl. 320) — a 402-es terv alá skálázás:
   a footer két oszlopa itt már összeérne → egymás alá rendezzük.
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 379px) {
  .site-footer .container {
    grid-template-columns: 1fr;        /* egy oszlop: logók / cím / linkek egymás alatt */
  }
  .footer-logos { flex-wrap: wrap; }
  .footer-address { padding-top: 24px; }
  .footer-nav { padding-top: 18px; }
  .footer-bottom { margin-top: 22px; }

  /* Statisztika-szöveg és szalag-felirat kicsit kisebb, hogy ne törjön csúnyán */
  .stats h2 { font-size: clamp(17px, 6vw, 20px); }
  .ribbon h2 { font-size: clamp(16px, 6vw, 20px); }

  /* Hero felirat kis kijelzőn: nagyobb tartalékkal, hogy a szélesebb tartalék-betűtípussal
     (amíg az Inter betölt) se fusson ki a képernyőről. */
  .hero-ribbon h1 { font-size: clamp(16px, 5.4vw, 20px); }
  .hero-ribbon .sub { font-size: clamp(11px, 3.7vw, 14px); }
  .ref-card h3 { font-size: 16px; }
  .ref-desc, .ref-time, .ref-nums li { font-size: 13px; }
  .partner-logo { flex: 0 0 calc(70% - 6px); }
  .ref-tag { font-size: 12px; padding-left: 14px; border-left-width: 4px; }
  .btn-slant--auto { width: auto; font-size: 13.5px; padding: 0 calc(var(--btn-slant) + 10px); }
}

/* ════════════════════════════════════════════════════════════════
   REFERENCIA-GALÉRIA (képnagyító)
   A borítókép a kártya tetején kattintható; a nagyító a terv
   „Projektjeink” blokkjának vékony fehér chevronját használja
   (assets/img/gallery-arrow.svg, 3 px-es vonal).
   ════════════════════════════════════════════════════════════════ */
.ref-card.has-galeria .ref-photo { cursor: zoom-in; }
.ref-nagyit {                       /* az egész borítót lefedő, láthatatlan gomb */
  position: absolute;
  inset: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.ref-nagyit:focus-visible { outline: 3px solid var(--green); outline-offset: -3px; }
.lb {
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: transparent;
  overflow: hidden;
}
.lb[open] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(8px, 2vw, 40px);
  padding: clamp(16px, 3vw, 48px);
}
.lb::backdrop { background: rgba(0, 20, 33, .92); }

.lb-szinpad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.lb-kep {
  max-width: 100%;
  max-height: 78vh;
  object-fit: contain;
  display: block;
}
.lb-lab {
  display: flex;
  align-items: baseline;
  gap: 16px;
  color: #fff;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.3;
  text-align: center;
  flex-wrap: wrap;
  justify-content: center;
}
.lb-szamlalo { opacity: .7; white-space: nowrap; }

/* lapozó nyilak és bezárás: a terv 3 px-es fehér vonalvastagságával */
.lb-lep, .lb-bezar {
  border: 0;
  background: none;
  cursor: pointer;
  padding: 10px;
  line-height: 0;
}
.lb-lep svg, .lb-bezar svg { display: block; fill: none; stroke: #fff; stroke-width: 3; }
.lb-lep svg { width: clamp(16px, 2vw, 26px); height: clamp(50px, 6.4vw, 84px); }
.lb-bezar { position: fixed; top: clamp(10px, 2vw, 26px); right: clamp(10px, 2vw, 26px); }
.lb-bezar svg { width: clamp(20px, 2vw, 28px); height: clamp(20px, 2vw, 28px); stroke-linecap: round; }
.lb-lep, .lb-bezar { transition: opacity .2s ease; opacity: .85; }
.lb-lep:hover, .lb-lep:focus-visible, .lb-bezar:hover, .lb-bezar:focus-visible { opacity: 1; }
.lb-lep:focus-visible, .lb-bezar:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }

@media (max-width: 700px) {
  .lb[open] { grid-template-columns: minmax(0, 1fr); padding: 56px 12px 76px; }
  .lb-kep { max-height: 66vh; }
  .lb-lep { position: fixed; bottom: 14px; padding: 8px; }
  .lb-elozo { left: 18%; }
  .lb-kovetkezo { right: 18%; }
  .lb-lep svg { width: 18px; height: 56px; }
}