/* ==========================================================================
   ORWAK – ORWAK 3110 bálázógép (termékoldal)
   Figma: node 678:2405 (1440 × 6528)
   Betöltési sorrend: style.css → pages.css → ez a fájl

   A terv függőleges ritmusa végig egyenletes 78px, ezért minden szekció a
   pages.css `.psec`-ét használja, felülírás nélkül. Amit ez a fájl hozzátesz:
   a teljes szélességű fotó-hero, a narancs sávos kiemelt blokk, az előnyök
   ikonsora, a műszaki adatok kéthasábos táblája és a kapcsolat-blokk
   (térkép + űrlap) elrendezése.

   Két narancs a terven: a kitöltött sávok #df5129 (--orange), a szövegblokkok
   előtti hajszálvonalak viszont a világosabb #ff5e15. Mindkettőt a Figma-render
   pixelmintája adja (lede-vonal és a műszaki adatok elválasztója egyaránt
   rgb(255,94,21)). A #ff5e15 időközben közös tokenné vált a style.css
   :root-jában `--rule` néven, ezért itt már nem kap saját definíciót.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero

   A terven 1440×850 teljes szélességű fotó, 40%-os fekete fátyollal; a szöveg
   a fotó alján ül, nem sötét panelben (ezért nem a pages.css `.phero`-ja).

   Figma-koordináták, amikhez igazodik:
     cím vizuális közepe   639  (80px)
     bevezető              694 – 719
     gombok                752 – 798
     hero alja             850
   A blokk alulról épül: 52px alsó térköz + a tartalom magassága adja vissza
   ezeket. A fotó kivágása a Figma fill-transzformja (h 115.91%, top -15.91%),
   százalékban, hogy minden szélességen ugyanaz a képkivágás maradjon.
   -------------------------------------------------------------------------- */
.p3110-hero {
  position: relative;
  height: 850px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 52px;
  background: #55606b;
  overflow: hidden;
}

.p3110-hero__media { position: absolute; inset: 0; overflow: hidden; }
.p3110-hero__media img {
  position: absolute;
  left: 0;
  top: -15.91%;
  width: 100%;
  height: 115.91%;
  max-width: none;
  object-fit: cover;
}
/* a terv 40%-os fekete fátyla – a fotó fölött, a szöveg alatt */
.p3110-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
}

/* ---- „showcase” hero: a szerkesztőségi irány (C) -------------------------
   A terv hero-ja egy FEKVŐ jelenetfotó, 40%-os fátyollal. A migrált gépek
   többségéhez nincs ilyen fotó — ezért a generátor `photo` helyett EZT adja,
   ha nincs ≥1400px-es fekvő jelenetfotó.

   Az ügyfél a négy bemutatott irányból a szerkesztőségit választotta: világos
   alap, a modellszám óriási körvonalas típusként a háttérben, a kivágott render
   RÁÜL a betűkre, kemény eltolt árnyékkal. Nincs fátyol, nincs elmosás.
   A szöveg, a gombok és a 850-es magasság ugyanaz, mint a photo változatnál. */
.p3110-hero--showcase,
.p3110-hero--showcase .p3110-hero__media { background: #f3f2f2; }
.p3110-hero--showcase .p3110-hero__media::after { display: none; }
.p3110-hero--showcase .p3110-hero__media .p3110-hero__bg { display: none; }

/* a modellszám: körvonalas, a render mögött. A `.p3110-model` az alapon rejtett
   (a photo-hero nem használja); itt jelenik meg. */
.p3110-hero--showcase .p3110-model {
  display: block;
  position: absolute;
  right: calc(var(--gut) - .06em);
  top: 50%;
  transform: translateY(-56%);
  font: 700 clamp(220px, 34vw, 520px)/1 var(--ff);
  letter-spacing: -.05em;
  color: transparent;
  -webkit-text-stroke: 2px var(--orange);
  opacity: .9;
  pointer-events: none;
  z-index: 0;
}
.p3110-hero--showcase .p3110-hero__media { z-index: 0; }
.p3110-hero--showcase .p3110-hero__media .p3110-hero__fg {
  position: absolute;
  top: 8%;
  left: auto;
  right: calc(var(--gut) + 6%);
  width: min(38%, 520px);
  height: 84%;
  object-fit: contain;
  object-position: right center;
  filter: drop-shadow(18px 22px 0 rgba(44,44,44,.12));
  z-index: 2;
}

.p3110-hero--showcase .p3110-hero__title { color: var(--text); font-size: 72px; letter-spacing: -.01em; }
.p3110-hero--showcase .p3110-hero__lead  { color: var(--text); font-weight: 400; max-width: 520px; }

/* az ACF „lebegő kártya” két szava (pl. Mini · max): aláhúzott felirat a cím fölött */
.p3110-hero--showcase .p3110-badge {
  display: inline-flex; gap: .5em; align-items: baseline;
  margin: 0 0 22px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--orange);
  font: 500 13px/1 var(--ff);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--orange);
}
.p3110-hero--showcase .p3110-badge span { color: var(--text); }

.p3110-hero--showcase .p3110-hero__btn--file { border-color: var(--text); color: var(--text); }
.p3110-hero--showcase .p3110-hero__btn--file img { filter: invert(.3); }

.p3110-hero__inner { position: relative; z-index: 1; }

/* ---- „fit” képhely: a jellemző-blokkok képei kivágás nélkül ------------
   A terv képhelyei fix arányúak (625×408, 733×412), és a `cover` bármit
   belevágott: álló fotóból fej nélküli ember, kivágott renderből félbevágott
   gép lett. Az elmosott-háttér változat nem tetszett az ügyfélnek; a négy
   bemutatott kezelésből a „kilógó render”-t (K2) választotta:

   A doboz egy meleg szürke lap. A KIVÁGOTT gép nagyobb a lapnál — a teteje
   kilóg fölé, az alja talaj-árnyékkal áll rajta. Így nem „kép a dobozban”,
   hanem tárgy, amit a lapra tettek. A narancs sávon a lap sötét, hogy a
   narancs gép elváljon tőle. Fotó (nem kivágott) egészben, a lapon belül.

   A generátor `data-cutout`-tal jelöli az átlátszó PNG-t. Figyelem: a
   WP-galéria terméklapjai PALETTÁS PNG-k tRNS chunkkal — a felismerés a
   tRNS-t is nézi, nem csak a 4/6-os színtípust. */
.p3110-fit {
  position: relative;
  overflow: visible;
  background: linear-gradient(160deg, #ecebea 0%, #e2e0df 100%);
  border-radius: 4px;
}
.p3110-fit img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
/* az elmosott másolat a markupban marad (a variánsok használhatják), itt rejtve */
.p3110-fit .p3110-fit__bg { display: none; }

/* (0,2,1) fajsúly: a `.split__media img` és a `.p3110-hl__media img` (0,1,1)
   cover-je különben felülírná a contain-t. */
.p3110-fit img.p3110-fit__fg {
  object-fit: contain;
  transition: transform var(--d-slow) var(--ease-out);
}
/* kivágott render: 116% magas, a lap aljához igazítva → felül kilóg */
.p3110-fit[data-cutout] img.p3110-fit__fg {
  object-position: center bottom;
  top: auto; bottom: 4%;
  height: 116%;
  padding: 0 6%;
  box-sizing: border-box;
  filter: drop-shadow(0 26px 30px rgba(30,20,10,.28));
  z-index: 1;
}
/* talaj-árnyék a lap alján */
.p3110-fit[data-cutout]::after {
  content: ''; position: absolute;
  left: 18%; right: 18%; bottom: 2%;
  height: 26px; border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(30,20,10,.28) 0%, rgba(30,20,10,0) 70%);
  filter: blur(4px);
  pointer-events: none;
}
/* a narancs sávon sötét lap */
.p3110-hl .p3110-fit { background: linear-gradient(160deg, #3a3a3a 0%, #262626 100%); }
/* hely a kilógó gépnek a blokk fölött */
.split__media.p3110-fit { margin-top: 12%; }
.p3110-hl__media.p3110-fit { margin-top: calc(var(--media-top) + 40px); }

/* hover-nagyítás csak az éles képre */
.zoom-media.p3110-fit:hover .p3110-fit__fg { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) { .p3110-fit__fg { transition: none; } }

.p3110-hero__title {
  font-size: 80px;
  line-height: 1.12;         /* magyar padló; a terv 123px-e egysoros esetre szól */
  font-weight: 500;
  /* A terven a cím 70%-os fehér. NEM `opacity`-vel: a `.js [data-reveal]`
     szelektora (0,2,0) erősebb, mint ez az osztály (0,1,0), tehát az opacity
     deklaráció hatástalan volt — a belépő animáció végén a cím teljes fehérré
     vált, a terv 70%-a helyett. Alfás színnel ugyanaz az eredmény, viszont a
     mozgásrétegtől független. */
  color: rgba(255,255,255,.7);
  /* A hero KÉT szövegcsomópontján a tervben nincs betűköz — a Figma-kimenetben
     sehol nincs `tracking-[…]` (678:2409, 678:2410), miközben pl. a műszaki
     adatok sorain (678:2486) ott van a 0.2px. A body 0.2px-es alapját tehát itt
     vissza kell venni, különben a betűkép hosszabb a tervbelinél.
     Mérve, 1440-en: cím betűkép 838.9 → 835.1 px (Figma render bounds 835),
     bevezető 603.0 → 589.6 (Figma 591). */
  letter-spacing: 0;
  max-width: 20ch;
}
/* A terven a cím szövegdoboza 123px sormagasságú (578→701), tehát ÁTFED a
   694-en kezdődő bevezetővel: a dobozok köze negatív, mérni csak a betűképet
   lehet. A renderben a cím alsó éle 682, a bevezetőé 700 — 18px betűkép-köz.
   A magyar padló miatti 1.12-es sormagasság (89.6px) mellett ezt 5px margó
   adja vissza; 10px-nél a cím 6px-cel a tervbeli helye fölé csúszott. */
.p3110-hero__lead {
  margin-top: 5px;
  font-size: 20px;
  line-height: 25px;
  font-weight: 500;
  color: rgba(255,255,255,.7);   /* ugyanaz az ok, mint a címnél */
  letter-spacing: 0;             /* ugyanaz az ok, mint a címnél */
  max-width: 640px;
}

.p3110-hero__actions {
  margin-top: 33px;
  display: flex;
  flex-wrap: wrap;
  gap: 23px;
}
/* A terven mindkét gomb 193×46, középre zárt felirattal — ezt a közös
   `.btn--wide` adja (min-width 193, középre zárás). Itt csak a PDF-gomb
   ikon–felirat köze marad. */
.p3110-hero__btn { gap: 8px; }
.p3110-hero__btn--file {
  background: #fff;
  color: var(--text);
  box-shadow: var(--shadow-btn);
}
.p3110-hero__btn--file:hover { background: #f1efee; }
.p3110-hero__btn--file img { width: 11px; height: 13px; flex: none; }

/* --------------------------------------------------------------------------
   2. Szövegblokk narancs hajszálvonallal

   A pages.css `.lede`-jét használja, két eltéréssel: a cím és a törzsszöveg
   köze 17px (a közös alap 30), a törzsszöveg pedig 18/24-es 400-as (a `.prose`
   300-asa helyett). A vonal színe a közös `--rule` (#ff5e15) — a Figma-render
   ezt adja mind a négy szövegblokknál.
   -------------------------------------------------------------------------- */
/* A vonal színét már a közös `.lede::before` adja (var(--rule) = #ff5e15),
   itt csak a függőleges kifutás más: a terven a vonal pontosan a címsor
   tetejétől a bekezdés aljáig tart, nem 4px-cel beljebb. */
.p3110-lede { --lede-gap: 17px; }
.p3110-lede::before { top: 0; bottom: 0; }

/* A terven a képsorok szövegblokkja nem egységesen igazodik: a 408px magas
   képhez mérve az „Egykamrás…” blokk 112-nél, az „Automatikus indítás” 145-nél
   kezdődik (mindkettő 13px-cel a függőleges közép fölött), a „Csendes
   működés…” viszont pontosan középen, 159-nél. A rácsközépre igazítás a
   harmadikat adja vissza pontosan; az első kettő a tervbeli helyére ezzel a
   13px-es emeléssel kerül (a rács a MARGÓdobozt centrálja, ezért 26px alsó
   margó = 13px emelés). 1400px alatt a sor amúgy is átméretezik, ott kikapcsol. */
.p3110-split--raise > .split__body { margin-bottom: 26px; }

/* A terv négy bekezdésében kézi sortörés van (a Figma szövegcsomópontja két
   bekezdésre bomlik: „…azonnal ⏎ indítja…”, „…bálázó ⏎ is a…”,
   „…tömegűek, ⏎ és az…”, „…tömör ⏎ formában…”). Ezek a törések a tervbeli
   608px / 392px széles szövegdobozra szólnak, ami csak 1400px fölött áll fenn
   — alatta a böngésző saját tördelése a helyes, ott a `.p3110-nb` eltűnik. */
.p3110-lede__text {
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: .2px;
  max-width: 608px;
}

/* --------------------------------------------------------------------------
   3. Üres képhely

   A Figma-frame négy képdoboza kitöltő téglalap, nincs mögötte fotó. A terv
   állapotát tartjuk meg — a fotók a tartalomfeltöltéskor kerülnek be —, de a
   doboz mérete, pozíciója és színe is a tervbeli. A terv KÉT szürkét használ:
   a narancs sávra lógó nagy képek #c4c4c4-esek, a két split-képhely #d9d9d9-es
   (a Figma-render pixelmintája: rgb(196,196,196) ill. rgb(217,217,217)).
   -------------------------------------------------------------------------- */
.p3110-ph { background: #d9d9d9; }
.p3110-hl__media.p3110-ph { background: #c4c4c4; }

/* --------------------------------------------------------------------------
   4. Narancs sávos kiemelt blokk

   Két példánya van a terven, ugyanazzal a rácssal, csak a sáv és a kép
   függőleges eltolása más:

     „Állítható bálaméret”      sáv 149-től 346 magas, kép 0-tól 412 magas
     „Bálakötözés kereszt…”     sáv 0-tól 346 magas,   kép 137-től 412 magas

   A sáv jobbra csonkolt: szélessége mindig `100% - --gut`, így a jobb széle
   pontosan a tartalomoszlop jobb szélén ér véget 1440-en, 1920-on és 2560-on
   is. A rács 733fr / 541fr — a tartalomoszlop (1274) ugyanolyan arányban
   oszlik, mint a terven (733 + 541), tehát a szövegoszlop vonala 1440-en a
   tervbeli 840px-re esik.
   -------------------------------------------------------------------------- */
.p3110-hl {
  --band-top: 0px;
  --media-top: 0px;
  --body-top: 0px;
  position: relative;
  padding-bottom: var(--hl-tail, 0px);
}
.p3110-hl__band {
  position: absolute;
  left: 0;
  top: var(--band-top);
  width: calc(100% - var(--gut));
  height: 346px;
  background: var(--orange);
}
.p3110-hl .container { position: relative; }

.p3110-hl__grid {
  display: grid;
  grid-template-columns: 733fr 541fr;
  align-items: start;
}
.p3110-hl__media {
  margin-top: var(--media-top);
  width: 100%;
  aspect-ratio: 733 / 412;
  overflow: hidden;
}
.p3110-hl__media img { width: 100%; height: 100%; object-fit: cover; }

.p3110-hl__body {
  margin-top: var(--body-top);
  position: relative;
  padding-left: 41px;        /* 24px oszlopköz + 17px a vonaltól a szövegig */
  max-width: 433px;          /* 17 + 392 + 24 */
}
.p3110-hl__body::before {
  content: '';
  position: absolute;
  left: 24px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #fff;
}
.p3110-hl__title {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: #fff;
  letter-spacing: .2px;
}
.p3110-hl__text {
  margin-top: 17px;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: #fff;
  letter-spacing: .2px;
}

/* „Állítható bálaméret”: a sáv 149px-cel a blokk teteje alatt kezdődik, és a
   blokk alja a sáv alja (149 + 346 = 495) — a kép csak 412, ezért a maradék
   83px-et alul kell hozzátenni. */
.p3110-hl--band-low { --band-top: 149px; --body-top: 193px; --hl-tail: 83px; }

/* „Bálakötözés kereszt irányban is”: a sáv a blokk tetején ül, a kép 137px-cel
   lejjebb kezdődik és 549-ig ér — ez adja a blokk magasságát. */
.p3110-hl--band-top { --band-top: 0px; --media-top: 137px; --body-top: 28px; }

/* --------------------------------------------------------------------------
   5. Világosabb hátterű sáv (a kiemelt blokk + az előnyök együtt)

   A terven egy 1440×920-as #efeeee téglalap fogja össze a kettőt.
   -------------------------------------------------------------------------- */
.p3110-alt { background: var(--bg-alt); padding-bottom: 63px; }

/* A terv itt megtöri a saját 78px-es ritmusát: a „Bálázógép előnyei:” cím
   szövegdoboza 28px sormagasságú (Figma 678:2445, `leading-[28px]`), miközben
   minden más 50px-es szekciócím 48.8-as. A doboz teteje 78px-re van a kép
   aljától, de a betűkép a doboznál MAGASABB, tehát 14px-cel feljebb ül, mint
   egy 1.12-es sormagasságnál. A sormagasságot nem vesszük 28-ra (magyar padló:
   ha a cím kisebb szélességen két sorba fut, az Ő/Ű ékezete egymásba érne),
   hanem a különbözetet térközzel adjuk vissza: 78 − 11 fent, 22 + 11 lent.
   Mérve, 1440-en: a cím alapvonala 3625 → 3614 (Figma-render 3614), az
   ikonsor teteje marad 3662 (Figma 3664). */
.p3110-benefits-wrap { margin-top: 67px; }

/* --------------------------------------------------------------------------
   6. Bálázógép előnyei

   Négy oszlop, mindegyik középre zárva; az ikonok alsó éle egy vonalban,
   fölöttük 88px-es doboz (a legmagasabb ikon mérete).
   -------------------------------------------------------------------------- */
.p3110-benefits__title {
  font-size: 50px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}

.p3110-benefits {
  margin-top: 33px;          /* 22 + 11, lásd a .p3110-benefits-wrap megjegyzését */
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px;
  max-width: 840px;
}
.p3110-benefit {
  display: grid;
  grid-template-rows: 88px auto;   /* a legmagasabb ikon adja a sor magasságát */
  justify-items: center;
  text-align: center;
}
/* Az ikonok a saját (Figmából örökölt) méretükben állnak — a magasságuk 75 és
   88 között szór, felnagyítva hamis lenne. A terven a 88px-es sávban
   FÜGGŐLEGESEN KÖZÉPEN ülnek, nem alsó élre igazítva: a négy ikon teteje
   78 / 84 / 84 / 84, alja 166 / 161 / 160 / 162 — mind a négy közepe 122. */
.p3110-benefit__icon {
  align-self: center;
  width: auto;
  height: auto;
  max-height: 88px;
  max-width: 100%;
}
.p3110-benefit__label {
  margin-top: 18px;
  font-size: 18px;
  line-height: 23px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: .2px;
  /* A terv a hosszú összetételt kézzel töri: „Idő- és munka-” / „erőmegtakarítás”.
     Ezt a markupban lévő lágy elválasztójel (­) adja vissza pontosan; a
     hyphens:auto helyette három sorra tördelné. */
  overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   7. Műszaki adatok

   Két hasáb, közöttük narancs függőleges vonal. A sorok mindkét hasábban
   pontosan a blokk tetejétől 118px-re kezdődnek (a terv szerint), ezért a
   címsor fix magasságú rácssorban ül: így a kétsoros jobb oldali cím nem
   tolja el a sorokat a bal oldaliakhoz képest.
   -------------------------------------------------------------------------- */
.p3110-tech {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 146px;
  max-width: 1156px;
}
.p3110-tech__col {
  display: grid;
  grid-template-rows: 118px auto;
  align-content: start;
}
.p3110-tech__col--ruled { position: relative; }
.p3110-tech__col--ruled::before {
  content: '';
  position: absolute;
  left: -26px;
  top: 8px;
  width: 2px;
  height: 406px;
  background: var(--rule);
}

.p3110-tech__title {
  font-size: 50px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
  align-self: start;
}

/* A sorok `display: contents`-szel olvadnak bele a listarácsba, így a
   megnevezés- és az érték-oszlop MINDEN sorban egy vonalban áll — soronkénti
   rácsokkal az „auto” oszlopszélesség soronként más lenne. */
.p3110-tech__list {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 325px) minmax(0, 1fr);
  align-items: baseline;
  row-gap: 15px;
}
.p3110-tech__row { display: contents; }
.p3110-tech__row dt {
  font-size: 18px;
  line-height: 24px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}
.p3110-tech__row dd {
  margin: 0;
  font-size: 18px;
  line-height: 24px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: .2px;
}

/* ---- „Alkalmas hulladékok” — töltődő sávok ----------------------------
   A terven ez sima címke–százalék lista. Az ügyfél kérte, hogy legyen belőle
   animált diagram; fekvő sáv lett, mert az megtartja a lista két oszlopát
   (címke | érték), és tíz sornál a körök rácsba szóródnának.

   Amire vigyázni kell — ugyanaz a szabály, mint a belépő animációnál:
   a sáv VÉGÁLLAPOTA nem függhet attól, hogy fut-e az animáció. Ezért:
   · a szélesség mindig `var(--pct)`, az animáció csak `scaleX` 0→1;
   · a 0-ra húzás CSAK `.js` alatt és CSAK amíg nincs `.is-in` — JS nélkül,
     vagy ha a söprés bármiért kimarad, a sáv tele van;
   · a szám mindig látszik, nem a sávból kell kiolvasni.
   A `data-reveal` a <dd>-n van, nem a soron: a sor `display: contents`, nincs
   doboza, a söprés nulla méretűnek látná és azonnal beengedné. */
/* A műszaki oszlop 325px-es címke-oszlopa itt túl sok: az értékek ott
   hosszúak („1000 x 700 x 800 mm”), itt viszont a sávnak kell a hely. A címke
   a saját tartalmához méretezik, legfeljebb 260px-ig — a leghosszabb 230. Így
   a sáv 505-ös oszlopban ~245px, nem 108. */
.p3110-tech__col--ruled .p3110-tech__list {
  grid-template-columns: fit-content(260px) minmax(0, 1fr);
  column-gap: 20px;
}

.p3110-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  /* a rács alapvonalra igazít; a sáv középre, a címkével egy magasságban */
  align-self: center;
}
.p3110-bar__track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: #e3e1e1;
  overflow: hidden;
}
.p3110-bar__fill {
  display: block;
  height: 100%;
  width: calc(var(--pct, 100) * 1%);
  border-radius: inherit;
  background: var(--orange);
  transform-origin: left center;
}
.p3110-bar__val {
  flex: 0 0 3.2em;
  text-align: right;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.js .p3110-bar .p3110-bar__fill { transform: scaleX(0); }
.js .p3110-bar.is-in .p3110-bar__fill {
  transform: none;
  transition: transform .9s var(--ease-out) calc(var(--i, 0) * 70ms + .15s);
}
@media (prefers-reduced-motion: reduce) {
  .js .p3110-bar .p3110-bar__fill { transform: none; transition: none; }
}

/* --------------------------------------------------------------------------
   8. CTA sáv

   A főoldal `.cta-band`-je pontosan ez a komponens; itt csak a saját felső
   térközét kell levenni, mert a `.psec` már megadta a 78px-et.
   -------------------------------------------------------------------------- */
.p3110-cta-sec .cta-band { margin-top: 0; }

/* --------------------------------------------------------------------------
   9. Hasonló termékek

   A kártyák a főoldal `.prod`-jai (225px széles, 30px behúzás, 195×214-es
   kép) — a terven pontosan ugyanaz a raszter, 300px osztásban, amit a
   `.products__track` 75px-es köze ad vissza. Csak a függőleges térközök
   térnek el a főoldalitól.
   -------------------------------------------------------------------------- */
.p3110-similar__title {
  font-size: 50px;
  line-height: 1.12;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}
.p3110-similar .products { margin-top: 36px; padding-bottom: 0; }
/* A js/main.js Carouselje időközben a szülő TARTALOMdobozával számol (levonja
   a paddingot), ezért a korábbi köztes sín, ami a .products__viewport
   oldalpaddingját semlegesítette, feleslegessé vált — kikerült a markupból. */
.p3110-similar .products .nav-arrows { margin-top: 39px; }

/* --------------------------------------------------------------------------
   10. Kapcsolat

   A cím a széles tartalomoszlopban ül, alatta minden a szűkebb (1058px)
   oszlopban: elérhetőségek 2×2-ben, majd térkép + űrlap egymás mellett.
   -------------------------------------------------------------------------- */
.p3110-contact__title {
  font-size: 50px;
  line-height: 61px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .2px;
}

.p3110-contact__info {
  margin-top: 49px;
  padding-top: 0;
  display: grid;
  grid-template-columns: 658fr 400fr;
  column-gap: 0;
  row-gap: 27px;
}

.p3110-contact__grid {
  margin-top: 51px;
  display: grid;
  grid-template-columns: 623fr 410fr;
  column-gap: 25px;
  align-items: start;
}
.p3110-contact__map {
  display: block;
  width: 100%;
  aspect-ratio: 623 / 494;
  background: var(--bg-alt);
}
.p3110-contact__map img { width: 100%; height: 100%; object-fit: cover; }

/* A terven a mezők köze 27px (input alja 416 → következő felirat 443), a
   jelölőnégyzet és a gomb köze viszont 40 (felirat alja 753 → gomb teteje 793).
   Az Effra megérkezéséig itt egységes 27 volt: a Figtree szélesebb, a
   jelölőnégyzet felirata két sorba futott, és a különbözet kiegyenlítette a
   hiányzó 13px-et. Effrával a felirat egy sor (mérve 373px, a tervbeli 373),
   ezért a kompenzáció kikerült, és a 40px a tervbeli módon áll össze. */
.p3110-form { grid-template-columns: minmax(0, 1fr); row-gap: 27px; }
.p3110-form__submit { margin-top: 13px; }

/* ==========================================================================
   RESZPONZÍV

   A terv 1440-es artboardról jön; minden vízszintes méret a --gut-ból vagy
   arányból származik, ezért 1920-on és 2560-on magától helyes. Lefelé viszont
   a fix magasságú, egymásra rétegzett blokkok (hero, narancs sáv) folyó
   elrendezésre váltanak, különben levágnák a hosszabb magyar szövegeket.
   ========================================================================== */
@media (max-width: 1400px) {
  .p3110-tech { column-gap: 96px; }
  .p3110-tech__col--ruled::before { left: -49px; }
  /* a tervbeli kézi sortörések és a 13px-es blokkemelés csak az 1440-es
     artboard-geometriára érvényesek */
  .p3110-nb { display: none; }
  .p3110-split--raise > .split__body { margin-bottom: 0; }
}

@media (max-width: 1200px) {
  .p3110-hero { height: 720px; }
  .p3110-hero__title { font-size: 58px; }
  /* a cím 50→40px-re vált, a 11px-es félsor-korrekció itt már nem a tervbeli
     geometriát adja vissza — vissza a sima 78 / 22-es ritmusra */
  .p3110-benefits-wrap { margin-top: 78px; }
  .p3110-benefits { margin-top: 22px; }
  .p3110-benefits__title,
  .p3110-tech__title,
  .p3110-similar__title { font-size: 40px; }
  .p3110-contact__title { font-size: 40px; line-height: 1.15; }
  .p3110-tech__col { grid-template-rows: 104px auto; }
  .p3110-tech__col--ruled::before { height: 100%; top: 0; }
  /* szűkebb hasábban a megnevezés kapja a maradékot, az érték csak amennyi kell */
  .p3110-tech__list { grid-template-columns: minmax(0, 1fr) max-content; column-gap: 24px; }
  .p3110-hl__body { padding-left: 33px; }
  .p3110-hl__body::before { left: 16px; }
}

@media (max-width: 992px) {
  .p3110-hero { height: 640px; }

  /* A narancs sáv és a rá lógó kép fix magasságú rétegek: egymás alá kerülve
     a sáv a szövegblokk saját háttere lesz, teljes szélességben — világos
     háttéren a fehér szöveg olvashatatlan lenne. */
  .p3110-hl { padding-bottom: 0; }
  .p3110-hl__band { display: none; }
  .p3110-hl__grid { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .p3110-hl__media { margin-top: 0; }
  .p3110-hl--band-top .p3110-hl__body { order: -1; }
  .p3110-hl__body {
    margin-top: 0;
    max-width: none;
    width: calc(100% + var(--gut) * 2);
    margin-inline: calc(var(--gut) * -1);
    padding: 32px var(--gut) 36px calc(var(--gut) + 17px);
    background: var(--orange);
  }
  .p3110-hl__body::before { left: var(--gut); top: 32px; bottom: 36px; }
  .p3110-hl--band-top .p3110-hl__media { margin-top: 0; }

  .p3110-alt { padding-bottom: 48px; }
  .p3110-benefits-wrap { margin-top: 56px; }

  .p3110-tech { column-gap: 56px; }
  .p3110-tech__col { grid-template-rows: auto auto; }
  .p3110-tech__title { margin-bottom: 24px; }
  .p3110-tech__col--ruled::before { left: -29px; }
  .p3110-tech__list { column-gap: 20px; }

  .p3110-contact__info { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .p3110-contact__grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}

@media (max-width: 768px) {
  .p3110-hero {
    height: auto;
    min-height: 560px;
    padding-top: 120px;
    padding-bottom: 40px;
  }
  .p3110-hero__title { font-size: 36px; overflow-wrap: break-word; hyphens: auto; }
  .p3110-hero__lead { font-size: 17px; line-height: 24px; }
  .p3110-hero__actions { gap: 14px; }
  .p3110-hero__btn { width: 100%; max-width: 260px; }
  .p3110-hero__btn.btn--wide { padding-inline: 20px; }

  .p3110-benefits__title,
  .p3110-tech__title,
  .p3110-similar__title,
  .p3110-contact__title { font-size: 30px; }
  .p3110-contact__title br { display: none; }

  .p3110-benefits { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .p3110-benefit { grid-template-rows: 68px auto; }
  .p3110-benefit__icon { max-height: 68px; }

  /* showcase mobilon: a modellszám fent középen, a render alatta, a cím fölött */
  .p3110-hero--showcase .p3110-model { top: 6%; transform: none; right: 0; left: 0; text-align: center; font-size: 42vw; }
  .p3110-hero--showcase .p3110-hero__media .p3110-hero__fg {
    top: 7%; right: 0; left: 0; margin: 0 auto;
    width: 62%; height: 34%;
    object-position: center top;
  }
  .p3110-hero--showcase .p3110-hero__title { font-size: 40px; }

  .p3110-tech { grid-template-columns: minmax(0, 1fr); row-gap: 44px; column-gap: 0; }
  .p3110-tech__col--ruled::before { display: none; }
  .p3110-tech__list { column-gap: 16px; }

  /* A sávos lista mobilon egy oszlop: címke fölül, alatta a teljes szélességű
     sáv. Két oszlopban a sáv 38px-es csonk lett — a 205px-es címke mellett
     nem maradt neki hely. A sor itt saját rácsot kap (nem `contents`), hogy a
     címke–sáv köz szűk legyen (6px), a sorok köze pedig maradjon 15. */
  .p3110-tech__col--ruled .p3110-tech__list { grid-template-columns: minmax(0, 1fr); }
  .p3110-tech__col--ruled .p3110-tech__row { display: grid; row-gap: 6px; }
  .p3110-bar__track { height: 8px; border-radius: 4px; }

  .p3110-lede__text,
  .p3110-hl__text { font-size: 17px; }
  .p3110-hl__title,
  .p3110-lede .lede__title { font-size: 21px; line-height: 26px; }

  .p3110-form__btn { width: 100%; max-width: 260px; }
}

@media (max-width: 420px) {
  .p3110-benefits { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

/* --------------------------------------------------------------------------
   Mozgáscsökkentés — ez a lap a style.css és a pages.css UTÁN tölt be, ezért
   a padlót itt is ki kell tenni.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- horgok — az alapon rejtve; a showcase-hero és a variánsok mutatják ---- */
.p3110-model, .p3110-badge, .p3110-chips { display: none; }

/* ---- előnyök és műszaki adatok: a szerkesztőségi irányból (ügyféldöntés) ----
   Az ikonsor felsorolás-szerű: erős vonal fölötte, vékony alatta, az ikonok
   kisebbek. A két adattábla vonalazott, a számok tabulárisak. */
.p3110-benefits { gap: 0; border-top: 2px solid var(--text); }
.p3110-benefit { padding: 22px 16px 22px 0; border-bottom: 1px solid #d8d6d5; }
.p3110-benefit__icon { width: 56px; height: 56px; }
.p3110-tech__list { row-gap: 0; }
.p3110-tech__row dt, .p3110-tech__row dd { padding: 11px 0; border-bottom: 1px solid #d8d6d5; }
.p3110-tech__row dd { font-variant-numeric: tabular-nums; }
/* a sávos sorok is kapják a vonalat, de a dd-n a padding a sáv köré */
.p3110-tech__row dd.p3110-bar { padding: 11px 0; }