/* =========================================================
   Energotrend Kft. – aloldalak
   A közös alapokat a style.css adja (tokenek, navbar, toast,
   reveal, a skálázó modell). Ez a fájl csak az aloldal-specifikus
   szekciókat és a lábléc „pill” változatát tartalmazza – az
   asztali rajz (1920) az alapszabályokban és a `min-width: 1280px`
   blokkokban, a telefonos rajz (390) a fájl végén, egyetlen
   `max-width: 1279px` blokkban.
   Betöltési sorrend: style.css → pages.css
   ========================================================= */

/* =========================================================
   OLDALTÖRZS
   Alapból a navbar ráúszik a tartalomra (mint a főoldalon).
   A --offset változat azoknak az oldalaknak szól, amelyek
   világos szekcióval kezdődnek, és ki kell kerülniük a navbart.
   ========================================================= */
.page { background: var(--light); }

.page--offset { padding-top: var(--nav-h); }

/* csak képernyőolvasónak szánt cím */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* =========================================================
   VILÁGOS NAVBAR
   A világos hátterű aloldalakon (ISO, Pályázatok) a navbar
   nem úszik a tartalom fölé, hanem tömör világos sáv.
   A Figmában képként exportált vetett árnyék CSS-ben.
   ========================================================= */
/* A `:hover` is szerepel: a sötét fejléc kurzorra tömör sötétre vált
   (style.css), a világos sáv viszont világos marad.                  */
.nav--light,
.nav--light.is-scrolled,
.nav--light:hover {
  background: var(--light);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 17px rgba(30, 30, 30, .10);
}

.nav--light .nav__list a { color: #1e1e1e; }
.nav--light .nav__list a:hover  { color: var(--blue); }
.nav--light .nav__list a:active { color: var(--orange); }

/* nyelvváltó világos sávon: a lenyíló sáv NEM áttetsző, csak valamivel
   szürkébb a fejlécnél (megrendelői kérés, 2026-09-03)               */
.nav--light .lang { color: rgba(30, 30, 30, .55); }
.nav--light .lang__btn { color: #1e1e1e; }
.nav--light .lang__btn:hover  { color: var(--blue); }
.nav--light .lang__btn:active { color: var(--orange); }
.nav--light .lang__flag { box-shadow: 0 0 0 1px rgba(30, 30, 30, .20); }

@media (hover: hover) {
  .nav--light .lang:hover,
  .nav--light .lang:focus-within { color: #1e1e1e; }

  .nav--light .lang__btn:not(.is-active) {
    background: #d5d5de;
    box-shadow: 0 5px 12px rgba(30, 30, 30, .16);
  }
}

.nav--light .nav__toggle span { background: #1e1e1e; }

/* =========================================================
   TERMÉKEINK – három teljes magasságú hasáb
   A Figma `1` / `2` / `3` komponensei (112:697 frame), mindkét
   állapotukkal: `Default` és `Variant2` (= hover).

   | | Default | hover (Variant2) |
   |---|---|---|
   | alapszín | `#000` | `#031526` |
   | fotó | 69 / 76 % | az 1–2. csempén MÁSIK fotó, a 3.-on ugyanaz 69 %-kal |
   | réteg a fotón | `#000`, `hue` keverés | `rgba(3,21,38,.5)`, csempénként más keverés |
   | üveglap | blur 6px, `rgba(0,0,0,.5)` | blur 1px, `rgba(0,0,0,.01)` |
   | cím | `#f2f2f7`, doboz közepe 527 | `#36a9e1`, doboz közepe 488 |
   | „TOVÁBB” gomb | – | x=227, y=620, 164×42 |
   | alcím | – | doboz közepe 928, 21px, 60 % |

   A Figmában **nincs rögzített prototípus-animáció** (`motionSummary: null`),
   ezért az átmenet időzítése a projekt saját konvenciója (`--ease`).
   ========================================================= */
.products {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--dark);
}

.product-tile {
  position: relative;
  /* A Figma csempéje 1054px magas. Megrendelői kérés, hogy 16:9-es
     kijelzőn ne látszódjon ki alul a Kapcsolatfelvétel: ezért a viewport
     magassága az alsó határ – ennél a csempe csak nyúlni tud.        */
  min-height: max(calc(100 * var(--vhu)), 1054px);
  padding: 80px 48px;
  background: #000;
  overflow: hidden;
  isolation: isolate;          /* a mix-blend-mode ne szivárogjon ki a csempéből */
  transition: background-color .35s var(--ease);
}

/* a fotó – a Figmában feketével keverve, ezért szürkés tónusú */
.product-tile__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* A fotó a megrendelő eredeti képéből, a designbeli kivágással már
   kivágva (lásd README), ezért a `cover` nagy kijelzőn sem vág bele.  */
.product-tile__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: bottom;
  opacity: var(--tile-opacity, .72);
  transition: opacity .35s var(--ease);
}

/* fekete réteg „hue” keveréssel → a fotó telítetlenné válik */
.product-tile__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #000;
  mix-blend-mode: hue;
  transition: opacity .35s var(--ease);
}

/* a hover-állapot rétege: `rgba(3,21,38,.5)`, csempénként más keveréssel.
   A `z-index: 1` emeli a fotók és a `hue`-réteg fölé (a `::before`
   alapból az elem gyerekei ALÁ kerülne).                            */
.product-tile__bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(3, 21, 38, .5);
  mix-blend-mode: var(--tile-blend, normal);
  opacity: 0;
  transition: opacity .35s var(--ease);
}

/* a teljes csempét fedő sötét, elmosott üveglap */
.product-tile__glass {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: background-color .35s var(--ease),
              backdrop-filter .35s var(--ease),
              -webkit-backdrop-filter .35s var(--ease);
}

/* --- cím: a doboz közepe alapból 527 (= 1054/2), hoverre 488 --- */
.product-tile__label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(432px, calc(100% - 40px));   /* a Figma szövegdoboza 432px */
  margin: 0;
  color: var(--on-dark);
  font-size: 48px;
  font-weight: 700;
  font-style: italic;
  line-height: normal;
  text-align: center;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color .35s var(--ease), top .35s var(--ease);
}

/* --- alcím: csak hoverre, a doboz közepe 928,5 --- */
.product-tile__sub {
  position: absolute;
  left: 50%;
  top: 88.09%;                  /* 928,5 / 1054 */
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 40px));
  margin: 0;
  color: var(--on-dark);
  font-size: 21px;
  line-height: normal;
  text-align: center;
  opacity: 0;
  transition: opacity .35s var(--ease);
}

/* --- „TOVÁBB” gomb (Figma `tovább button`, 164×42) ---
   A nyíl ugyanaz az ív, mint a „Bővebben” gombon, csak függőlegesen
   tükrözve. A két állapot a Figma két exportált nyila: `Default`
   (#F2F2F7) és `Variant2` (#36A9E1); a kettő egymáson fekszik és
   áttűnéssel vált. (A `Variant3` narancs állapotot – a „Bővebben”
   gombhoz hasonlóan – nem használjuk.)                              */
.product-tile__cta {
  position: absolute;
  left: 35.469%;                /* 227 / 640 */
  top: 58.87%;                  /* 620,5 / 1054 */
  display: inline-flex;
  align-items: center;
  gap: 17px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--on-dark);
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s,
              color .22s var(--ease), gap .25s var(--ease);
}

.product-tile__cta-icon {
  position: relative;
  width: 52px;
  height: 42px;
  flex: none;
}

.product-tile__cta-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: scaleY(-1);        /* a Figmában a nyíl függőlegesen tükrözött */
  transition: opacity .22s var(--ease), transform .25s var(--ease);
}

.product-tile__cta-icon .is-hover { opacity: 0; }

/* --- hover-állapot (csak egérrel; érintőn nincs értelme) --- */
@media (hover: hover) {
  .product-tile:hover { background: #031526; }

  .product-tile:hover .product-tile__photo {
    opacity: var(--tile-opacity-hover, var(--tile-opacity));
  }

  .product-tile:hover .product-tile__bg::after  { opacity: 0; }
  .product-tile:hover .product-tile__bg::before { opacity: 1; }

  .product-tile:hover .product-tile__glass {
    background: rgba(0, 0, 0, .01);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
  }

  .product-tile:hover .product-tile__label {
    top: 46.35%;                /* 488,5 / 1054 */
    color: var(--blue);
  }

  .product-tile:hover .product-tile__sub { opacity: .6; }

  .product-tile:hover .product-tile__cta { opacity: 1; visibility: visible; }

  /* a gomb saját hover-állapota (Variant2): kék szöveg és kék nyíl.
     A 4px-es nyílmozgás a projekt konvenciója, mint a „Bővebben”-nél. */
  .product-tile__cta:hover,
  .product-tile__cta:focus-visible { color: var(--blue); gap: 24px; }

  .product-tile__cta:hover .product-tile__cta-icon .is-hover,
  .product-tile__cta:focus-visible .product-tile__cta-icon .is-hover { opacity: 1; }

  .product-tile__cta:hover .product-tile__cta-icon img,
  .product-tile__cta:focus-visible .product-tile__cta-icon img {
    transform: scaleY(-1) translateX(4px);
  }
}

/* érintőképernyőn nincs hover, ezért a gomb ott végig látszik –
   különben a céloldal elérhetetlen lenne                          */
@media (hover: none) {
  .product-tile__cta { opacity: 1; visibility: visible; }
}

/* billentyűzetes fókusz: a gomb akkor is látszódjon */
.product-tile__cta:focus-visible { opacity: 1; visibility: visible; }

/* csökkentett mozgás: az állapotok váltása maradjon, az átmenet ne */
@media (prefers-reduced-motion: reduce) {
  .product-tile,
  .product-tile__photo,
  .product-tile__glass,
  .product-tile__label,
  .product-tile__sub,
  .product-tile__cta,
  .product-tile__cta-icon img,
  .product-tile__bg::before,
  .product-tile__bg::after { transition: none; }
}

/* a Figmában csempénként eltér a fotó fedettsége és a hover-réteg keverése */
.product-tile--hvac {
  --tile-opacity: .69;
  --tile-opacity-hover: .69;
  --tile-blend: hard-light;
}
.product-tile--cabinet {
  --tile-opacity: .76;
  --tile-opacity-hover: .76;
  --tile-blend: normal;
}
.product-tile--outdoor {
  --tile-opacity: .76;
  --tile-opacity-hover: .69;
  --tile-blend: plus-lighter;
}

/* =========================================================
   DOKUMENTUM-OLDAL – közös váz a világos, szöveges
   aloldalakhoz (ISO Tanúsítvány, Pályázatok)
   ========================================================= */
.doc {
  padding: 119px var(--gutter) 160px;
  background: var(--light);
}

.doc__inner {
  max-width: var(--container);
  margin: 0 auto;
}

.doc__title {
  max-width: 1250px;
  color: var(--blue);
  font-size: 48px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.25;
}

.doc__rule {
  height: 1.5px;
  margin: 90px 0 56px;
  border: 0;
  background: var(--rule);
}

/* =========================================================
   ISO TANÚSÍTVÁNY
   ========================================================= */

/* bevezető: szöveg balra, TÜV logók jobbra */
.iso__intro {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(0, 618px);
  justify-content: space-between;
  gap: 64px;
  align-items: start;
}

.iso__text p { color: var(--body-text); }
.iso__text p + p { margin-top: 1.5em; }

.iso__logos {
  display: flex;
  justify-content: flex-end;
  /* ugyanaz, mint a gépfotóknál: a keverés alá kell a sáv színe */
  background: var(--light);
}

.iso__logos img {
  width: 309px;
  height: auto;
  mix-blend-mode: darken;
}

/* a két tanúsítvány egymás mellett */
.iso__certs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 620px));
  justify-content: space-between;
  gap: 96px;
  margin-top: 124px;
}

.iso__certs figure { margin: 0; }

.iso__certs img {
  width: 100%;
  height: auto;
  box-shadow: 0 18px 50px rgba(30, 30, 30, .12);
}

/* =========================================================
   PÁLYÁZATOK
   ========================================================= */
/* A megrendelő 2026-09-22-i szövege: bekezdésenként egy félkövér címke,
   utána az érték vagy a leírás. A címke a sötét szövegszín, a többi a
   szokásos törzsszöveg.                                              */
.tender__body {
  color: var(--body-text);
  max-width: 1493px;           /* a Figma szövegoszlopa */
}

.tender__body p + p { margin-top: 1.5em; }

.tender__body strong { color: #1e1e1e; font-weight: 700; }

/* a megrendelő dokumentumában a „tervezett befejezési dátum" és a záró
   mondat előtt egy üres sor áll: a bekezdésköz egy sorral (1,5em) több */
.tender__body p + .tender__spaced { margin-top: 3em; }

/* =========================================================
   PORFESTÉS
   ========================================================= */

/* --- hero: teljes szélességű fotó, sötét sugaras átmenettel ---
   A designban a hero `sticky top-0`: görgetéskor a helyén marad,
   a mögötte jövő tartalom fölécsúszik. A rétegsorrend:
   hero (0) < üveg adatsáv (1) < világos tartalom (2).          */
.coating-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  display: grid;
  align-items: center;
  min-height: min(calc(100 * var(--vhu)), 1080px);
  padding: calc(var(--nav-h) + 40px) var(--gutter) 60px;
  background: var(--dark);
  overflow: hidden;
}

.coating-hero__bg { position: absolute; inset: 0; }

.coating-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* A sugaras sötétítés CSAK a Porfestés hero-ján van a designban
   (a Szolgáltatásokén nincs) – ezért külön módosítóhoz kötve.
   A Figmában SVG-ként exportált átmenet CSS-ben újraépítve.      */
.coating-hero--radial .coating-hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 96% 54% at 50% 50%,
              rgba(4, 1, 36, .27) 0%,
              rgba(6, 1, 28, 1) 100%);
  opacity: .35;
}

/* A Szolgáltatások hero-ja: sötét alap, rajta a fotó 90%-os
   átlátszatlansággal – sugaras átmenet nélkül.
   A kép a Figmából már a hero kerethez (1920×1080) vágva érkezik,
   ezért középre igazítjuk: a kivágást nem itt kell elvégezni.   */
.coating-hero--services .coating-hero__bg { background: var(--dark); }

.coating-hero--services .coating-hero__bg img {
  opacity: .9;
  object-position: center;
}

.coating-hero__title {
  position: relative;
  max-width: 1078px;
  margin-left: max(0px, calc((100% - var(--container)) / 2));
  color: #fff;
  font-size: 80px;
  font-weight: 700;
  font-style: italic;
  line-height: 1.125;
  text-transform: uppercase;
  text-wrap: balance;
}

/* --- adatsáv: sötét üveghatású panel ---
   Szintén `sticky top-0`. A háttere szándékosan átlátszó: az
   üveglapon átlátszik a mögötte rögzített hero fotója.        */
.coating-specs {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 0;                  /* a panel a kijelző széléig ér */
}

/* Az üveglap MINDEN képarányban kifut a kijelző két széléig, és csak a
   FELSŐ két sarka lekerekített (megrendelői kérés, 2026-09-07).
   Korábban 1744px-es, középre zárt doboz volt, körben 50px sugárral –
   így a szélein kilátszott a mögötte rögzített hero.

   A hasábokat és a belső margót a két rajz adja: asztali nézetben a
   Figma koordinátái (lentebb, oldalanként), telefonon egy hasáb a
   tartalom oszlopában (a fájl végén). A szövege így mindkét rajzban a
   lenti tartalommal egy vonalban marad.                              */
.coating-specs__panel {
  display: grid;
  border-radius: 50px 50px 0 0;
  background: rgba(12, 22, 31, .7);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  color: var(--on-dark);
  font-size: 21px;
}

.coating-specs h2 {
  margin-bottom: 30px;
  font-size: inherit;
  font-weight: 700;
}

.coating-specs ul { margin: 0; padding-left: 1.4em; }
.coating-specs li + li { margin-top: 10px; }
.coating-specs p + p { margin-top: 1.2em; }

/* --- fő rész: ragadós oldalsáv + szekciók ---
   A legfelső réteg: görgetéskor ez csúszik rá a rögzített
   hero-ra és adatsávra, ezért átlátszatlan háttere van.      */
/* A rács oszlopait, a keretet és a belső margót a két rajz adja:
   asztali nézetben 620px oldalsáv + 1300px tartalom a Figma szerint
   (lentebb, oldalanként), telefonon egy oszlop, fölötte a vízszintes
   horgonysávval (a fájl végén).                                      */
.coating-main {
  position: relative;
  z-index: 2;
  display: grid;
  background: var(--light);
}

/* A világos tartalomsáv MINDEN képarányban kifut a kijelző széléig
   (megrendelői kérés, 2026-09-07) – korábban csak 1920px fölött.
   E nélkül a rajznál szélesebb ablakban (1920, illetve a telefonos
   rajznál 600px fölött) a széleken átlátszott a mögötte rögzített
   sötét hero és üveg adatsáv.

   A `.coating-main` z-index:2-vel saját rétegkontextust nyit, ezért a
   -1 a tartalom mögé, de a hero/adatsáv elé teszi a sávot. A valódi
   ablakszélesség (`--vwr`) a görgetősáv szélességével túlnyúlna; ezt a
   lapon vágjuk le (`overflow-x: clip` – a `hidden`-nel ellentétben nem
   hoz létre görgetődobozt, így a ragadós oldalsáv működik tovább).  */
.page--services,
.page--coating,
.page--detail { overflow-x: clip; }

.page--services .coating-main::before,
.page--coating  .coating-main::before,
.page--detail   .coating-main::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - calc(50 * var(--vwr)));
  width: calc(100 * var(--vwr));
  z-index: -1;
  background: var(--light);
}

/* oldalsáv – görgetés közben a helyén marad */
.coating-nav {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  align-self: start;
}

.coating-nav__list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- oldalsáv-elem = a Figma `oldalsáv` komponense (blue1/2/3) ---
   A három állapot a designból:

   | | blue1 (alap) | blue2 (hover) | blue3 (aktív) |
   |---|---|---|---|
   | nyíl   | a dobozon KÍVÜL | left: 13px | left: 13px |
   | szöveg | left: 48px      | left: 60px | left: 60px |
   | szín   | rgba(30,30,30,.75) | #1e1e1e | #36a9e1 |

   Az elem 318×54, a betű teteje 16px-nél. A nyíl a dobozon kívül parkol,
   az `overflow: hidden` vágja le – hoverre onnan csúszik be. A Figmában
   nincs rögzített prototípus-animáció (`motionSummary: null`), ezért az
   időzítés a projekt saját mozgás-konvenciója.                        */
.coating-nav__link {
  position: relative;
  display: block;
  height: 54px;
  /* a 10px felső belsőmargó teszi a betű tetejét 16px-re (21px-es DM
     Sansnál a sordoboz teteje és a betű teteje közt ~6px van)        */
  padding: 10px 15px 0 48px;
  overflow: hidden;
  color: var(--body-text);
  font-size: 21px;
  font-weight: 900;
  line-height: normal;
  white-space: nowrap;
  text-transform: uppercase;
  transition: padding-left .28s var(--ease), color .22s var(--ease);
}

/* a nyíl a Figmából exportált ív (29×23, #1A57D1) */
.coating-nav__link::before {
  content: '';
  position: absolute;
  left: -29px;                  /* teljesen a dobozon kívül, balra */
  top: 15px;
  width: 29px;
  height: 23px;
  background: url(../assets/icon-nav-arrow.svg) center / contain no-repeat;
  transition: left .28s var(--ease);
}

/* A designhoz képest a kék és a sötétszürke szerepe fel van cserélve
   (megrendelői kérés, 2026-09-02): a kurzor alatti elem kap színt, az
   aktuális szekciót jelölő pedig a sötétszürkét. Az animáció – a nyíl
   becsúszása és a behúzás – változatlan.

   Az aktív állapot ezért a hover ELŐTT áll: a két szabály fajsúlya
   azonos (osztály + attribútum, illetve osztály + álosztály), így a
   későbbi nyer – az éppen olvasott szekció pontja is színt vált, ha a
   kurzor rákerül.                                                     */
.coating-nav__link[aria-current="true"] { padding-left: 60px; color: #1e1e1e; }
.coating-nav__link[aria-current="true"]::before { left: 13px; }

.coating-nav__link:hover,
.coating-nav__link:focus-visible { padding-left: 60px; color: var(--blue); }

.coating-nav__link:hover::before,
.coating-nav__link:focus-visible::before { left: 13px; }

/* A Porfestés oldalon és a részletoldalain a kurzor alatti elem nem kék,
   hanem narancssárga, és a nyíl is az (megrendelői kérés, 2026-09-02).
   A nyílhoz külön SVG tartozik – CSS-maszkot nem használunk, mert az
   bizonyos böngészőkben nem jelenik meg.                               */
.page--coating .coating-nav__link:hover,
.page--coating .coating-nav__link:focus-visible,
.page--detail  .coating-nav__link:hover,
.page--detail  .coating-nav__link:focus-visible { color: var(--orange); }

.page--coating .coating-nav__link::before,
.page--detail  .coating-nav__link::before {
  background-image: url(../assets/icon-nav-arrow-orange.svg);
}

/* csökkentett mozgás: a nyíl és a szöveg ugorjon, ne csússzon */
@media (prefers-reduced-motion: reduce) {
  .coating-nav__link,
  .coating-nav__link::before { transition: none; }
}

/* egy szekció – a belső elrendezést a két rajz adja: asztali nézetben a
   Figma koordinátái (lentebb), telefonon egy oszlop, elöl a fotóval    */
.coating-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  border-bottom: 1.5px solid var(--rule);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.coating-section:last-child { border-bottom: 0; }

.coating-section__title {
  margin-bottom: 22px;
  color: #1e1e1e;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}

.coating-section__text {
  color: var(--body-text);
  font-size: 21px;
}

.coating-section__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 690 / 461;
  object-fit: cover;
  border-radius: 25px;
}

/* „BŐVEBBEN” gomb */
.btn-more {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  margin-top: 40px;
  color: #1e1e1e;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  transition: color .2s var(--ease), gap .25s var(--ease);
}

/* A nyílnak két színe van (sötét alap + narancssárga hover), ezért két
   külön SVG egymáson – CSS-maszkot nem használunk, mert az bizonyos
   böngészőkben nem jelenik meg.                                       */
.btn-more__icon {
  position: relative;
  width: 52px;
  height: 42px;
  flex: none;
  transition: transform .25s var(--ease);
}

.btn-more__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .22s var(--ease);
}

.btn-more__icon .is-hover { opacity: 0; }

/* hoverre a felirat és a nyíl is narancssárga (megrendelői kérés,
   2026-09-02)                                                    */
.btn-more:hover { color: var(--orange); gap: 24px; }
.btn-more:hover .btn-more__icon { transform: translateX(4px); }
.btn-more:hover .btn-more__icon .is-hover { opacity: 1; }

/* =========================================================
   SZOLGÁLTATÁSOK
   A Porfestés oldal vázát használja (hero, adatsáv, oldalsáv,
   szekciók), kiegészítve a gépadat-táblázatokkal.
   ========================================================= */
.services-section__lead {
  max-width: 1052px;
  margin-bottom: 1.4em;
  color: var(--body-text);
  font-size: 21px;
}

.services-list {
  max-width: 1052px;
  margin: 28px 0 1.6em;
  padding-left: 1.4em;
  color: var(--body-text);
  font-size: 21px;
}
.services-list li { margin-bottom: 10px; }

.services-list__title {
  margin: 56px 0 32px;
  color: rgba(30, 30, 30, .9);
  font-size: 21px;
  font-weight: 700;
}

/* --- egy gép: gépadatok + fotó ---
   A designban az adatoszlop 401px – pontosan a táblázat szélessége –,
   a fotó pedig ettől jobbra, a táblázatot függőlegesen átfedve áll:
   asztali nézetben mindkét elem a Figma koordinátáin ül (lentebb, a
   `.page--services` blokkban), a `.spec` ott csak logikai csoport.
   Telefonon egy oszlop: a fotó a gépadatok fölött (a fájl végén).   */
.spec {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.spec__name {
  margin-bottom: 20px;
  color: var(--blue-deep);
  font-size: 24px;
  font-weight: 700;
}

/* két gép egy adatoszlopban (Élhajlítás): a Figma szerint a második
   gépnév 55px-el a fölötte lévő táblázat alatt kezdődik            */
.spec__name--second { margin-top: 55px; }

.spec__label {
  margin: 38px 0 23px;
  color: var(--body-text);
  font-size: 17px;
  font-weight: 700;
}

.spec__table {
  width: 100%;
  max-width: 401px;
  border-collapse: collapse;
  /* fix elrendezés: enélkül a böngésző a tartalom szerint osztja újra
     az oszlopokat, és a hosszabb értékek (4000 x 2000 mm) két sorba
     törnek – a designban egysorosak                                */
  table-layout: fixed;
  color: var(--body-text);
  font-size: 17px;
  text-align: left;
}

.spec__table th,
.spec__table td {
  height: 53px;
  border: 1px solid var(--rule);
  font-weight: 400;
}

/* a bal oszlop a megnevezés, halvány kitöltéssel (Figma: 216px, a
   szöveg 24px behúzással); az érték oszlopa 185px, 20px behúzással */
.spec__table th {
  width: 53.87%;               /* 216 / 401 – arányosan, nem fixen */
  padding: 8px 14px 8px 24px;
  background: rgba(116, 116, 128, .08);
}

.spec__table td { padding: 8px 10px 8px 20px; }

.spec__note {
  margin-top: 36px;
  padding-left: 6px;
  color: var(--body-text);
  font-size: 15px;
}

/* A gépfotó sosem lehet szélesebb, mint amit a 2x-es export elbír
   (a legkisebb 1630px széles → 815px). Asztali nézetben a Figma
   dobozmérete a mérvadó, ott ezt feloldjuk.                      */
/* A világos szekció színe a kép ALÁ. A `.reveal` animáció közben (opacity /
   transform) az elem önálló festési csoport lesz, és a `mix-blend-mode` csak
   a csoporton belülre lát – háttér nélkül a fotó FEHÉR alapja villanna fel,
   amíg a felfedés tart. Az azonos színű háttérrel a multiply mindig a sáv
   színét adja, akár izolált a csoport, akár nem.                        */
.spec__media { margin: 0; max-width: 815px; background: var(--light); }

/* A gépfotók fehér hátterű termékfotók. A multiply keveréssel a fehér
   beleolvad a világos szekcióhátterbe, a contain pedig garantálja,
   hogy a gépből semmi ne essen le. Ez minden kijelzőméreten kell –
   nem csak asztali nézetben, különben fehér téglalapként ülnek a
   világoslila háttéren.                                          */
.spec__media img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
  mix-blend-mode: multiply;
}

/* =========================================================
   PORFESTÉS – részletes aloldalak
   Ugyanaz a rács, mint a Porfestés oldalon, de az oldalsáv
   itt lapok közti navigáció, nyíl nélkül.
   ========================================================= */
/* A részletoldalak oldalsávja ugyanaz az `oldalsáv` komponens, mint a
   Porfestés oldalon: a szöveg 48px-nél kezdődik, a nyíl hoverre csúszik
   be. (Korábban egy `--plain` változat 15px-re húzta be a szöveget.)   */

/* Egyetlen eltérés a Porfestés oldaltól: itt az oldalsáv NEM ragadós,
   hanem a mellette lévő szöveggel együtt görög (megrendelői kérés,
   2026-09-01). Minden más – a nyíl becsúszása, az aktív állapot – azonos. */
.page--detail .coating-nav { position: static; }

.detail__title {
  margin-bottom: 26px;
  line-height: normal;
  color: #1e1e1e;
  font-size: 36px;
  font-weight: 700;
  text-transform: uppercase;
}

.detail__body {
  max-width: 1052px;                        /* Figma */
  color: var(--body-text);
  font-size: 21px;                          /* a projekt törzsszöveg-mérete */
}

.detail__body p + p { margin-top: 1.33em; } /* a designban 28px 21px-nél */

/* „VISSZA” gomb – a nyíl balra fordítva */
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 17px;
  margin-top: 56px;
  color: #1e1e1e;
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
  transition: color .2s var(--ease), gap .25s var(--ease);
}

/* A nyílnak itt is két színe van (sötét alap + narancssárga hover), ezért
   két külön SVG egymáson, a tükrözés a befoglaló elemen.               */
.btn-back__icon {
  position: relative;
  width: 52px;
  height: 42px;
  flex: none;
  transform: scaleX(-1);
  transition: transform .25s var(--ease);
}

.btn-back__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .22s var(--ease);
}

.btn-back__icon .is-hover { opacity: 0; }

/* hoverre a felirat és a nyíl is narancssárga – ugyanaz, mint a
   „Bővebben” gombon (megrendelői kérés, 2026-09-02)              */
.btn-back:hover { color: var(--orange); gap: 24px; }
/* A mozgás pontosan ugyanaz, mint a „Bővebben” gombon (megrendelői kérés):
   a nyíl a szöveg felé, jobbra lép 4px-et. A `scaleX(-1)` tükrözi az
   elemet, ezért ehhez itt −4px kell.                                   */
.btn-back:hover .btn-back__icon { transform: scaleX(-1) translateX(-4px); }
.btn-back:hover .btn-back__icon .is-hover { opacity: 1; }

/* =========================================================
   LÁBLÉC – „pill” változat (4 másolható mező, 2×2 rácsban)
   ========================================================= */
/* (az `object-position` a lentebbi KAPCSOLATFELVÉTEL szakaszban van –
   itt korábban egy fölösleges második példány állt)                 */

.footer--pills .footer__lead { color: var(--on-dark-70); }

.copygrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 396px));
  gap: 37px 36px;              /* a Figma rácsköze */
  margin-top: auto;
  padding-top: 130px;
}

.copygrid__label {
  display: block;
  margin-bottom: 25px;
  color: var(--on-dark);
  font-size: 24px;
  font-weight: 700;
  text-transform: uppercase;
}

/* egy másolható mező – ugyanaz a nyelv, mint a főoldal .mailbox eleme */
.copyfield {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-height: 62px;
  padding: 0 18px 0 31px;
  /* a kék keret 1pt-vel vastagabb (megrendelői kérés); az alapállapotban
     is 2px, csak átlátszó – így az állapotváltás nem mozdítja a szöveget */
  border: 2px solid transparent;
  border-radius: 35px;
  background: rgba(90, 166, 219, .15);
  color: var(--on-dark);
  font: inherit;
  font-size: 17px;
  text-align: left;
  cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}

/* Hoverre a mező sokkal sötétebb, feketés kékre vált, de áttetsző marad,
   így a háttérfotó továbbra is átdereng. A kék keret 2026-09-03 óta egyik
   állapotban sem látszik (megrendelői kérés) – a 2px-es átlátszó keret
   viszont marad, hogy a szöveg ne mozduljon el.                        */
.copyfield:hover {
  background: rgba(3, 21, 38, .55);
  border-color: transparent;
}

/* egérrel lenyomva a szöveg és a másoló ikon kékre vált, keret nélkül */
.copyfield:active {
  border-color: transparent;
  color: var(--blue);
}

.copyfield__text { flex: 1 1 auto; }

/* Az ikonnak két színe van (világos alap + kék lenyomva), ezért két külön
   SVG egymáson – CSS-maszkot nem használunk, mert az bizonyos böngészőkben
   nem jelenik meg.                                                       */
.copyfield__icon {
  position: relative;
  width: 30px;
  height: 30px;
  flex: none;
  opacity: .8;
  transition: opacity .25s var(--ease);
}

.copyfield__icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity .22s var(--ease);
}

.copyfield__icon .is-press { opacity: 0; }

.copyfield:hover .copyfield__icon { opacity: 1; }
.copyfield:active .copyfield__icon .is-press { opacity: 1; }

/* sikeres másolás: a kék keret itt sem jelenik meg (megrendelői kérés,
   2026-09-03) – csak a háttér és a szöveg jelzi vissza                */
.copyfield.is-copied {
  background: rgba(54, 169, 225, .3);
  border-color: transparent;
  color: #fff;
}

/* =========================================================
   SZOLGÁLTATÁSOK – hero és szekció-eltérések
   ========================================================= */
.coating-hero__content {
  position: relative;
  max-width: 1078px;
  margin-left: max(0px, calc((100% - var(--container)) / 2));
}

.coating-hero__content .coating-hero__title {
  max-width: none;
  margin-left: 0;
}

.coating-hero__lead {
  margin-top: 40px;
  color: rgba(255, 255, 255, .57);
  font-size: 21px;
}

/* A designban a főcím „PRECÍZIÓ A LEGMAGASABB / SZINTEN" tördeléssel áll:
   az első sor 1058px a 1078px-es dobozban, a „SZINTEN" alá kerül. A
   `balance` ezt „PRECÍZIÓ A / LEGMAGASABB SZINTEN"-re rendezné át, ezért
   itt a természetes tördelés a helyes.                                  */
.page--services .coating-hero__title,
.page--coating .coating-hero__title {
  text-wrap: wrap;
  /* a doboz a betűmérethez kötve (1078 / 80 = 13.5em), nem fix px-ben:
     így a törés kisebb kijelzőn is ugyanott marad, ahol a designban.
     Mindkét hero szövegdoboza 1078px széles a Figmában.               */
  max-width: 13.5em;
}

/* A Porfestés angol hero-címe 2026-10-06 óta „Long-lasting protection,"
   kezdetű (a megrendelő javított fordítása). Az első sora 1081,3px –
   1,3px-el szélesebb a designbeli doboznál –, ezért a kézi törés fölött
   még egyszer megtört, és a cím három sorba állt. A doboz angolul ezért
   13,75em (1100px); a magyar geometria érintetlen marad.              */
html[lang="en"] .page--coating .coating-hero__title { max-width: 13.75em; }

.services-band__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}

/* =========================================================
   FŐOLDAL – „Cégünkről” szekció
   ========================================================= */
.about__text .about__p { margin-top: 1.5em; }

/* a lábléc a rögzített rétegek fölött zárja az oldalt */
.footer--pills { z-index: 3; }

/* =========================================================
   SZOLGÁLTATÁSOK – a Figma pontos geometriája (1920×9415)
   Az asztali rajz (1280px-től, a `zoom`-mal kicsinyítve): a designban
   abszolút pozícionált elrendezés van, ami a telefonos rajzban nem
   működne – ott az egyoszlopos elrendezés fut (a fájl végén).
   ========================================================= */
@media (min-width: 1280px) {

  /* --- üveg adatsáv: y=991, azaz 89px-el a hero-ba lóg, teljes szélesség --- */
  .page--services .coating-specs {
    margin-top: -89px;
    padding: 0;
    height: 907px;                /* 991 → 1898, ahol a tartalom kezdődik */
  }

  /* a Figma üveglapja 944px magas: 37px-el túllóg, azt a
     mögé kerülő világos tartalom fedi le                     */
  .page--services .coating-specs__panel {
    max-width: none;              /* a sáv teljes szélességű a designban */
    margin: 0;
    height: 944px;
    border-radius: 50px 50px 0 0;
    /* A százalékok a belső dobozhoz (1472px) viszonyulnak, nem 1920-hoz:
       817/1472 = 55.5% és 617/1472 = 41.9%                            */
    grid-template-columns: 55.5% 41.9%;
    justify-content: space-between;
    gap: 0;
    /* A sáv átér a teljes szélességen, de a szövege a tartalommal egy
       vonalban marad: 1920px fölött a behúzás nő, a belső doboz 1472px.
       (Figma: bal 231px, jobb 217px.)                                 */
    /* 213 = 223 (a Figma betűteteje) − 10 (a 36px-es címsor cap-eltolása) */
    padding: 213px max(11.302%, calc((100% - 1920px) / 2 + 217px))
                 0 max(12.031%, calc((100% - 1920px) / 2 + 231px));
  }

  /* A jobb hasáb 21px-es szövegének cap-eltolása 6px, a bal 36px-es címéé
     10px: a 4px különbséggel hozzuk a két első sort egy vonalba.        */
  .page--services .coating-specs__panel > *:last-child { margin-top: 4px; }

  /* --- fő rész: 620px oldalsáv + 1300px tartalom, teljes szélesség --- */
  .page--services .coating-main {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    grid-template-columns: 32.29% 67.71%;   /* 620 / 1300 a 1920-ból */
    background: var(--light);
  }

  /* 1920px fölött a rajz középre zárva marad (különben a sorhosszak és a
     fotóméretek elszaladnának); a világos háttér a kijelző széléig
     futtatását az alapszabályok intézik (lásd `.coating-main::before`). */

  /* az oldalsáv linkjei x=188-nál, 318px szélesen, y=2063-tól.
     Az alsó margó állítja meg, hogy ne érjen le a Kapcsolatfelvételig.
     A felső határa itt 227px: ennél nagyobbnál a Hegesztés szekcióra
     ugorva az oldalsáv már nem maradna kitűzve, és a „LÉZERVÁGÁS"
     feljebb csúszna a szekció címénél (716 − 489 = 227).             */
  .page--services .coating-nav {
    padding: 165px 0 0 30.32%;    /* 2063-1898 fent, 188/620 balra */
    margin-bottom: 227px;
  }

  .page--services .coating-nav__link {
    width: 100%;
    max-width: 318px;
    min-height: 54px;
  }

  /* --- szekciók: pontos magasság és belső margók ---
     Mind a hatnál egyforma: a címsor a szekció tetejétől +181px-en,
     x=651-en (31px-el a 620-as oszlopszéltől). A 171px azért kisebb,
     mert a Figma a betű tetejét adja meg, a böngésző a sordobozét –
     36px-es címsornál ez ~10px különbség.                          */
  .page--services .coating-section {
    position: relative;
    padding: 171px 0 0 2.38%;     /* 31 / 1300 */
    border-bottom: 0;
    /* itt a cím fix 181px-el a szekció teteje alatt van, az oldalsáv
       pedig 165px-el lejjebb kezdődik: 99+165+16−181−75 = 24         */
    scroll-margin-top: 24px;
  }

  /* A szekciók azonosítója az angol oldalon angol (eszkozok/angol-
     oldalak.tsv) – ahol egy szabály azonosítóra épül, mindkettő áll. */
  .page--services #lezervagas,
  .page--services #laser-cutting          { height: 1874px; }
  .page--services #stancolas,
  .page--services #punching               { height: 1047px; }
  .page--services #kombi,
  .page--services #combined-technologies  { height:  763px; }
  .page--services #elhajlitas,
  .page--services #press-brake-bending    { height: 1046px; }
  .page--services #panelhajlitas,
  .page--services #panel-bending          { height: 1108px; }
  .page--services #hegesztes,
  .page--services #welding                { height:  716px; }

  /* --- gépadat-oszlop és gépfotó a Figma koordinátáival ---
     A designban a kettő egymástól függetlenül, a szekcióhoz képest
     van pozicionálva (a fotó átfedi az adatoszlop sávját), ezért a
     .spec itt csak logikai csoport, saját doboz nélkül.          */
  .page--services .spec {
    position: static;
    display: block;
    margin: 0;
  }

  /* gépadatok: x=31 (2.3846%), szélesség 401px (30.8462%) */
  .page--services .spec__data {
    position: absolute;
    left: 2.3846%;
    width: 30.8462%;
  }

  /* A függőleges értékek a Figma gépnév-koordinátái, 7px-el feljebb:
     a Figma a 24px-es betű tetejét adja meg, a böngésző a sordobozét. */
  .page--services .spec--trulaser .spec__data { top:  721px; }   /* Figma  728 */
  .page--services .spec--amada    .spec__data { top: 1270px; }   /* Figma 1277 */
  .page--services .spec--trupunch .spec__data { top:  713px; }   /* Figma  720 */
  .page--services .spec--combi    .spec__data { top:  439px; }   /* Figma  446 */
  .page--services .spec--trubend  .spec__data { top:  548px; }   /* Figma  555 */
  .page--services .spec--ras      .spec__data { top:  704px; }   /* Figma  711 */

  /* --- gépfotók ---
     A dobozok a Figma képkereteiből, a tartalomoszlop 1300px-es
     szélességéhez viszonyítva. A magasságot NEM írjuk elő: a kép
     saját aránya adja, így pontosan akkora, mint a designban –
     nincs se torzulás, se üres sáv a dobozban.                   */
  .page--services .spec__media {
    position: absolute;
    margin: 0;
    max-width: none;              /* itt a Figma dobozmérete érvényes */
  }


  /* Rétegsorrend. A gépfotó doboza világos hátteret kap (a fehér felvillanás
     elleni javítás miatt), a szomszédos fotók keretei viszont – a designhoz
     híven – ÁTFEDIK egymást: a Lézervágás két fotója 43px-en. Ezért a doboz
     háttere nem takarhatja ki az előző gépet:

       doboz háttere      z-index: auto   (legalul)
       a fotó maga        z-index: 1      (a szomszéd doboza fölött)
       szöveges blokkok   z-index: 2      (mindkettő fölött)

     A dobozon ezért NINCS `z-index` – különben saját festési csoportot nyitna,
     és a benne lévő kép nem tudna a szomszéd doboza fölé kerülni.
     (Megrendelői hibajelzés, 2026-09-03: a gép talpa hiányzott.)         */
  .page--services .spec__media img { position: relative; z-index: 1; }
  .page--services .spec__data  { z-index: 2; }
  .page--services .coating-section__title,
  .page--services .services-section__lead,
  .page--services .services-list__title,
  .page--services .services-list { position: relative; z-index: 2; }

  .page--services .spec--trulaser .spec__media { left: 31.5385%; top:  546px; width: 68.4615%; }
  .page--services .spec--amada    .spec__media { left: 31.2308%; top: 1170px; width: 68.3077%; }
  .page--services .spec--trupunch .spec__media { left: 35.3077%; top:  316px; width: 64.6923%; }
  .page--services .spec--combi    .spec__media { left: 36.3846%; top:   92px; width: 63.6154%; }
  .page--services .spec--trubend  .spec__media { left: 37.3077%; top:  390px; width: 62.6923%; }
  .page--services .spec--ras      .spec__media { left: 34.0000%; top:  396px; width: 66.0000%; }

  /* a gépnév és a táblázat közti tér a Figma szerint */
  .page--services .spec__name { margin-bottom: 35px; }
  .page--services .spec__table { max-width: 401px; }
}

/* =========================================================
   TIPOGRÁFIA – a Figma szerint
   A designban a sorköz a betűtípus alapértelmezett értéke
   ("auto"), nem a projekt 1.5-ös alapja. DM Sansnál ez ~1.3,
   és a szövegblokkok magassága is ehhez igazodik.
   ========================================================= */
.coating-hero__lead,
.coating-specs__panel p,
.coating-specs__panel li,
.services-section__lead,
.services-list,
.services-list__title,
.coating-section__text,
.spec__table th,
.spec__table td,
.spec__label,
.spec__note,
.detail__body p {
  line-height: normal;
}

.coating-section__title,
.spec__name,
.services-band__title {
  line-height: normal;
}

/* A Szolgáltatások sávcímsora 36px – a Porfestésé viszont 21px,
   ezért nem elég a .services-band__title, felül kell írni a
   .coating-specs h2 { font-size: inherit } szabályt.          */
.page--services .coating-specs .services-band__title {
  font-size: 36px;
}

/* A Figma renderjéből mért térközök. A mért érték a betűk TETEJE
   közti távolság; a CSS-margó ennél ~8px-el kisebb (a sordoboz alja
   és a betűtest között marad hely):
     bekezdés → bekezdés         23–28px  →  18px margó
     utolsó bekezdés → listacím  64–65px  →  56px
     listacím → első pont        39–42px  →  32px
     bekezdés → pont (cím nélkül)   36px  →  28px
   A designban több szövegblokkban kézi sortörés van, ezért az első
   sor alatti sorok pozíciója szándékosan nem másolt: folyó szövegnél
   a természetes tördelés a helyes.                                  */
@media (min-width: 1280px) {
  .page--services .services-section__lead { margin-bottom: 18px; }
  .page--services .services-list__title   { margin: 56px 0 32px; }
  .page--services .services-list          { margin-top: 28px; }

  /* A Stancolás záró bekezdése mellett kezdődik a TruPunch fotója,
     ezért a designban is keskenyebb (x 31…463): teljes szélességen
     belefutna a gépbe.                                             */
  .page--services .services-section__lead--narrow { max-width: 432px; }

  /* A Kombi fotója magasan kezdődik (y=92), és a gép árboca x=916-nál
     áll. A designban a bekezdés utolsó sora kézi töréssel rövid; folyó
     szövegnél ezt szélességkorlát helyettesíti.                      */
  .page--services #kombi .services-section__lead,
  .page--services #combined-technologies .services-section__lead { max-width: 870px; }
}

/* =========================================================
   SZEKCIÓ-ELVÁLASZTÓ VONALAK (Figma: „Line 14”)
   x=620-tól 1114px szélesen, a szekcióhatár fölött.
   A hegesztés után nincs vonal – ott a lábléc következik.
   ========================================================= */
@media (min-width: 1280px) {
  .page--services .coating-section:not(#hegesztes, #welding)::after {
    content: '';
    position: absolute;
    left: 0;
    width: 85.69%;          /* 1114 / 1300 */
    height: 1.5px;
    background: var(--rule);
  }

  .page--services #lezervagas::after,
  .page--services #laser-cutting::after          { bottom: 30px; }
  .page--services #stancolas::after,
  .page--services #punching::after               { bottom: 56px; }
  .page--services #kombi::after,
  .page--services #combined-technologies::after  { bottom: 38px; }
  .page--services #elhajlitas::after,
  .page--services #press-brake-bending::after    { bottom: 38px; }
  .page--services #panelhajlitas::after,
  .page--services #panel-bending::after          { bottom: 38px; }
}

/* =========================================================
   HERO-CÍM – a Figma szövegdoboza mindkét oldalon x=214-nél
   kezdődik. A hero vízszintes belsőmargóját ezért elhagyjuk, és a
   címet közvetlenül pozicionáljuk; a `max()` miatt 1920px alatt
   arányosan szűkül, fölötte a középre zárt tartalomhoz igazodik.
   ========================================================= */
@media (min-width: 1280px) {
  /* a cím függőlegesen sem középre kerül, hanem a Figma szerinti helyre:
     a betűteteje Szolgáltatásokon 382, Porfestésen 428. A sordoboz teteje
     ennél 11px-el feljebb van (80px-es DM Sans, 90px sorköz).          */
  .page--services .coating-hero,
  .page--coating .coating-hero {
    align-items: start;
    padding: 0;
    /* a cím fix pozíción ül, ezért a hero nem lehet olyan alacsony,
       hogy az `overflow: hidden` levágja a bevezetőt (682px-ig ér)  */
    min-height: clamp(700px, calc(100 * var(--vhu)), 1080px);
  }

  .page--services .coating-hero__content,
  .page--coating .coating-hero__title {
    margin-left: max(11.1458%, calc((100% - 1920px) / 2 + 214px));
  }

  .page--services .coating-hero__content { margin-top: 366px; }   /* a betűteteje 382-re esik */
  .page--coating  .coating-hero__title   { margin-top: 412px; }   /* a betűteteje 428-ra esik */

  /* a hero bevezetője a Figmában 603-nál kezdődik */
  .page--services .coating-hero__lead { margin-top: 52px; }
}

/* =========================================================
   PORFESTÉS – a Figma pontos geometriája (1920×6325)
   Ugyanaz a rétegzés, mint a Szolgáltatásoknál: az asztali rajzban a
   design koordinátái, a telefonos rajzban egy oszlop.
   Figma node: 112:635
   ========================================================= */
@media (min-width: 1280px) {

  /* --- üveg adatsáv: y=1002, azaz 78px-el a hero-ba lóg --- */
  .page--coating .coating-specs {
    margin-top: -78px;
    padding: 0;
    height: 729px;                /* 1002 → 1731, ahol a tartalom kezdődik */
  }

  /* A Figma üveglapja 746px magas: 17px-el túllóg, azt a mögé kerülő
     világos tartalom fedi le. A belső doboz 1485px (bal 218, jobb 217),
     a két hasáb 868 és 617 széles – köztük nincs rés.               */
  .page--coating .coating-specs__panel {
    max-width: none;
    margin: 0;
    height: 746px;
    border-radius: 50px 50px 0 0;
    grid-template-columns: 58.45% 41.55%;
    justify-content: space-between;
    gap: 0;
    /* a `max()` miatt a behúzás 1920px alatt arányosan szűkül (mint a
       többi elem), fölötte a középre zárt tartalommal marad egy vonalban */
    padding: 188px max(11.302%, calc((100% - 1920px) / 2 + 217px))
                 0 max(11.354%, calc((100% - 1920px) / 2 + 218px));
  }

  /* A designban a jobb hasáb 25px-el lejjebb kezdődik (194 vs 219); a két
     hasáb első sorát egy vonalba hozzuk, ezért ez az eltolás elmarad.    */
  .page--coating .coating-specs__panel > *:last-child { margin-top: 0; }

  /* a bal hasáb címe is a betűtípus alapértelmezett sorközét kapja (mint a
     jobb hasáb szövege), különben a sordoboz eltolása miatt 1-2px-el
     lejjebb ülne az első sora                                          */
  .page--coating .coating-specs h2 { line-height: normal; }

  /* --- fő rész: 620px oldalsáv + 1300px tartalom --- */
  .page--coating .coating-main {
    max-width: 1920px;
    margin: 0 auto;
    /* a Figmában az utolsó szekció (3560) és a lábléc (3631) között
       71px üres tér van a tartalomkereten belül                    */
    padding: 0 0 71px;
    gap: 0;
    grid-template-columns: 32.29% 67.71%;   /* 620 / 1300 a 1920-ból */
    background: var(--light);
  }

  /* az oldalsáv linkjei x=188-nál, y=1911-től.
     Az alsó margó a horgonyzás felső határán áll (megrendelői kérés):
     az oldalsáv pontosan ott áll meg, ahol az „A PORFESTÉSRŐL" (korábban „MI IS EZ?", majd „PORFESTÉS RÖVIDEN") a
     MINŐSÉGELLENŐRZÉS címmel egy vonalba kerül – onnan már együtt
     görög a tartalommal. Mivel az oldalsáv ragadós teteje (99) és az
     utolsó szekció horgonyzott teteje (75+24) ugyanaz, a margó az
     utolsó szekció magassága mínusz az oldalsáv magassága:
     712 − (165 + 5×54) = 277.                                     */
  .page--coating .coating-nav {
    /* A Figmában az oldalsáv doboza 1911-nél kezdődik (padding 180), így
       az első eleme 15px-el a szekció címe ALATT állna – a Szolgáltatásoknál
       viszont pontosan egy vonalban van. Mivel a horgonyzáshoz az első
       elemnek a címmel egy magasságban kell lennie (különben a legelső
       szekció nem tud beállni), 165-öt használunk: így az elem betűteteje
       1912-re, a cím betűtetejével egy vonalba kerül.                   */
    padding: 165px 0 0 30.32%;    /* 188/620 balra */
    margin-bottom: 277px;
  }

  /* --- szekciók: mind 712px magas, a tartalom abszolút pozícióban.
         A `.reveal` maga is abszolút, így a benne lévő „Bővebben”
         gomb hozzá képest pozicionálható – a felfedő animáció
         transformja különben elmozdítaná a viszonyítási pontot.   */
  .page--coating .coating-section {
    position: relative;
    display: block;
    height: 712px;
    padding: 0;
    border-bottom: 0;
    /* minden szekció címe a legfelső oldalsáv-elemmel egy vonalban:
       280 (az elem betűteteje: 99+165+16) − 181 (a cím eltolása) − 75 */
    scroll-margin-top: 24px;
  }

  .page--coating .coating-section > .reveal:first-child {
    position: absolute;
    left: 2.3846%;                /*  31 / 1300 */
    top: 171px;                   /* a 36px-es cím teteje 181-nél */
    width: 30.8462%;              /* 401 / 1300 */
  }

  .page--coating .coating-section__title { margin-bottom: 22px; }

  .page--coating .btn-more {
    position: absolute;
    left: 0;
    top: 424px;                   /* 595 − 171 */
    margin: 0;
  }

  /* --- kép: x=463, y=181, 690×461 --- */
  .page--coating .coating-section__media {
    position: absolute;
    left: 35.6154%;               /* 463 / 1300 */
    top: 181px;
    width: 53.0769%;              /* 690 / 1300 */
  }

  /* --- elválasztó vonal (Figma „Line 14”): x=0, y=682.
         A Figmában 1114px széles; megrendelői kérésre jobbra kihúzzuk
         addig, hogy a kép jobb szélén (1153) ugyanannyival (31px) lógjon
         túl, mint amennyivel balra a „Bővebben” gomb alatt (a gomb 31-nél
         kezdődik, a vonal 0-nál): 1153 + 31 = 1184.
         Az utolsó szekció után nincs vonal – ott a lábléc következik.  */
  .page--coating .coating-section:not(#minosegellenorzes, #quality-control)::after {
    content: '';
    position: absolute;
    left: 0;
    top: 682px;
    width: 91.0769%;              /* 1184 / 1300 */
    height: 1.5px;
    background: var(--rule);
  }
}

/* =========================================================
   PORFESTÉS RÉSZLETOLDALAK – a Figma pontos geometriája
   Mind az öt oldal ugyanarra a `Frame 31` komponensre épül
   (nodeok: 297:1549, 329:1274, 329:1461, 329:1609, 329:1791).
   Az asztali rajzban a design koordinátái, a telefonos rajzban egy oszlop.
   ========================================================= */
@media (min-width: 1280px) {

  /* --- 620px oldalsáv + 1300px tartalom ---
     A lábléc a designban 1048-nál kezdődik (a 2. oldalon 1267-nél, mert
     ott hosszabb a szöveg): a `min-height` tartja a rövidebb oldalakon,
     a hosszabbnál a tartalom nő túl rajta.                            */
  .page--detail .coating-main {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0;
    gap: 0;
    grid-template-columns: 32.29% 67.71%;   /* 620 / 1300 a 1920-ból */
    min-height: 973px;                      /* 1048 − a 75px-es navbar */
    background: var(--light);
  }

  /* az oldalsáv doboza y=222-nél, x=188-nál (mint a Porfestés oldalon).
     Mivel itt nem ragadós, a rácsterülete tetejétől (75) mérünk:
     222 − 75 = 147. (Ragadós állapotban 123 kellett, mert a `top: 99`
     már nulla görgetésnél megemelte.)                              */
  .page--detail .coating-nav {
    padding: 147px 0 0 30.32%;    /* 222 − 75 fent, 188/620 balra */
  }

  /* --- tartalom: a cím betűteteje 232, a szöveg 296 ---
     Az alsó belsőmargó a designbeli 77px (a 2. oldalon a gomb alja 1190,
     a lábléc 1267).                                                    */
  .page--detail .coating-main > article {
    padding: 147px 0 69px 2.3846%;   /* 222 − 75 fent, 31 / 1300 balra */
  }

  /* a cím és a szöveg közti tér: 268.9 → 290 (a betűtetők 232 és 296) */
  .page--detail .detail__title { margin-bottom: 21px; }

  /* a szöveg és a „Vissza” gomb közti tér a Figma szerint */
  .page--detail .btn-back { margin-top: 75px; }
}

/* =========================================================
   ISO TANÚSÍTVÁNY – a Figma pontos geometriája (406:1530)
   A frame 1920×2736. A tartalom egy 1546px-es sávban ül
   (x=187), azon belül a cím és a blokkok ~30px-el beljebb;
   az elválasztó vonal viszont a teljes sávot átéri.
   ========================================================= */
@media (min-width: 1280px) {

  .page--iso .doc {
    /* a cím betűteteje 194-nél, a lábléc 1773-nál */
    padding: 105px var(--gutter) 140px;
  }

  .page--iso .doc__title {
    margin-left: 30px;            /* 217 − 187 */
    line-height: normal;          /* a projekt tipográfiai szabálya */
  }

  .page--iso .doc__rule {
    margin: 94px 0 50px;          /* vonal 337-nél, a szöveg 393-nál */
  }

  /* a szöveg 218-nál kezdődik, a logók 1702-nél érnek véget */
  .page--iso .iso__intro {
    padding: 0 31px;
    gap: 0;
    justify-content: space-between;
  }

  /* a Figmában a két bekezdés egy szövegdoboz, kézi sortöréssel:
     a sorköz a betűtípus alapértelmezése, a bekezdésköz ~12px    */
  .page--iso .iso__text p { line-height: normal; }
  .page--iso .iso__text p + p { margin-top: 9px; }

  .page--iso .iso__logos { margin-top: 3px; }   /* 391 vs 388 */

  /* a két tanúsítvány 757-nél, 218 és 1084 x-en, 620×876 */
  .page--iso .iso__certs {
    margin-top: 205px;
    padding: 0 29px 0 31px;
    gap: 0;
  }
}

/* =========================================================
   MELEGVIZES SUGÁRZÓERNYŐ – termékoldal (Figma 223:1618)
   A frame 1920×4292: hero 1174, a világos tartalomsáv 1002-nél
   kezdődik (tehát 172px-el a hero-ba lóg), a lábléc 3329-nél.
   ========================================================= */
/* A hero szövege a Figma szerinti helyen kezdődik (x=219), nem a
   tartalomsáv szélénél: a `max()` miatt 1920px alatt arányosan szűkül
   (219/1920 = 11,40625%), fölötte a középre zárt 1920px-es sávhoz
   igazodik – ugyanaz a minta, mint a Szolgáltatások/Porfestés hero-ján. */
/* A hero legalább egy képernyőnyi: megrendelői kérés, hogy alul ne
   látszódjon ki a világos tartalomsáv az első képernyőn. (Az alap
   `.coating-hero` 1080px-nél megállna, ezért itt felülírjuk.)        */
.page--radiant .coating-hero {
  min-height: calc(100 * var(--vhu));
  padding-left: 0;
  padding-right: 0;
}

.radiant-hero__text {
  position: relative;
  margin-left: max(11.40625%, calc((100% - 1920px) / 2 + 219px));
  margin-right: var(--gutter);
}

.radiant-hero__lead {
  margin-top: 26px;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

/* --- világos tartalomsáv --- */
.radiant-body {
  position: relative;
  z-index: 2;                    /* a ragadós hero fölé kerül */
  padding: 110px var(--gutter) 120px;
  background: var(--light);
}

.radiant-body__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px 68px;
  align-items: start;
  max-width: var(--container);
  margin: 0 auto;
}

/* teljes szélességű elemek */
.radiant-lead,
.radiant-rule,
.radiant-text--wide,
.radiant-uses__title,
.radiant-uses__lead { grid-column: 1 / -1; }

.radiant-lead {
  margin: 0;
  color: var(--blue);
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.radiant-rule {
  width: 100%;
  height: 1.5px;
  margin: 0;
  border: 0;
  background: var(--rule);
}

.radiant-illust {
  margin: 0;
  /* a kép alja a mellette lévő szöveg utolsó sorával egy vonalban
     (megrendelői kérés) – az asztali rajzban a Figma koordinátái adják,
     a telefonos rajzban a kép a szöveg fölött áll, egy oszlopban        */
  align-self: end;
}

.radiant-illust img {
  width: 100%;
  height: auto;
}

.radiant-text p {
  margin: 0;
  color: var(--body-text);
  font-size: 21px;
  line-height: normal;
}

/* a Figmában a bekezdések közt egy üres sor van */
.radiant-text p + p { margin-top: 1em; }

.radiant-text strong { font-weight: 700; }

.radiant-uses__title {
  margin: 0;
  color: var(--blue);
  font-size: 36px;
  font-weight: 700;
  line-height: normal;
  text-transform: uppercase;
}

.radiant-uses__lead {
  margin: 0;
  color: var(--body-text);
  font-size: 17px;
  line-height: normal;
}

.radiant-uses__label {
  margin: 0 0 1em;
  color: var(--body-text);
  font-size: 21px;
  font-weight: 700;
  line-height: normal;
}

.radiant-uses__list {
  margin: 0;
  padding-left: 31.5px;          /* a Figma behúzása */
  color: var(--body-text);
  font-size: 21px;
  line-height: normal;
  list-style: disc;
}

.radiant-uses__list li + li { margin-top: 10px; }

/* --- YouTube-videó a tartalomsáv alján (megrendelői kérés, 2026-09-19) ---
   A lejátszó a két szélső margó közötti teljes szélességet kapja (asztali
   rajz: a tartalomsáv 1546px-es kerete, 187–1733; telefon: a 310px-es
   oszlop), 16:9 képaránnyal. A fekete alap addig látszik, amíg a YouTube
   lejátszója betölt. A távolságok a design blokkban, illetve a telefonos
   blokkban vannak.                                                       */
.radiant-video {
  grid-column: 1 / -1;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: #000;
}

.radiant-video iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =========================================================
   MELEGVIZES SUGÁRZÓERNYŐ – a Figma pontos geometriája
   Minden koordináta a tartalomsáv (Frame 35) tetejétől.
   ========================================================= */
@media (min-width: 1280px) {

  .page--radiant { overflow-x: clip; }

  /* A Figma hero-ja 1174 magas, és a tartalomsáv 172px-el belelóg, tehát
     a világos rész 1002-nél kezdődik. Ha a képernyő ennél magasabb, a
     világos sáv kilátszana alul – ezért a hero legalább a képernyő
     magassága + 172px (megrendelői kérés).                           */
  .page--radiant .coating-hero {
    height: max(1174px, calc(calc(100 * var(--vhu)) + 172px));
    min-height: 0;
    padding: 0;
  }

  /* a fotó kivágása már az exportban benne van */
  .page--radiant .coating-hero__bg img { object-position: center; }

  /* a Figma sötétítése: rgba(0,4,62,.2) */
  .page--radiant .coating-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 4, 62, .2);
  }

  /* a szövegblokk a hero tetejéhez igazodik, a cím betűteteje 545-re
     esik (80px-es DM Sansnál 90px-es sorközzel a sordoboz teteje
     15,5px-el feljebb van)                                          */
  .page--radiant .coating-hero { align-items: start; }

  .page--radiant .radiant-hero__text {
    margin-top: 529.5px;
    margin-right: 0;
  }

  /* cím: x=219, betűteteje 545, 80px/90px */
  .page--radiant .coating-hero__title {
    max-width: none;
    margin: 0;
    font-size: 80px;
    line-height: 90px;
    text-transform: uppercase;
  }

  /* alcím: betűteteje 641 (a cím sordoboza 619,5-nél ér véget) */
  .page--radiant .radiant-hero__lead {
    margin-top: 11.5px;
    font-size: 36px;
  }

  /* --- tartalomsáv: 1002-nél kezdődik; a Figmában 2327 magas, a videóval
         (2026-09-19) 3511: a jobb lista utolsó sora 2163-nál ér véget, alatta
         80 a szürke elválasztó (2243), 152 a videó (2395–3265), majd 246 a
         lábléc – a 164 másfélszerese, ami a Figmában a szöveg utolsó sora
         és a lábléc között volt (megrendelői kérés)                     */
  .page--radiant .radiant-body {
    margin-top: -172px;           /* 1174 − 1002 */
    padding: 0;
    height: 3511px;
  }

  .page--radiant .radiant-body__inner {
    display: block;
    position: relative;
    max-width: 1920px;
    height: 100%;
    margin: 0 auto;
  }

  .page--radiant .radiant-body__inner > * { position: absolute; margin: 0; }

  /* a szövegdobozok betűteteje a Figma szerint (36px-nél ~10px,
     21px-nél ~6px, 17px-nél ~5px a sordoboz és a betűteteje közt) */
  .page--radiant .radiant-lead {
    left: 217px;
    top: 149px;                   /* betűteteje 159 */
    width: 1491px;
    font-size: 36px;
  }

  .page--radiant .radiant-rule--top    { left: 187px; top: 315px; width: 1546px; }
  .page--radiant .radiant-rule--bottom { left: 187px; top: 1585px; width: 1546px; }

  /* a képek alja a szomszédos szöveg utolsó sorának alapvonalára esik:
     760, illetve 1492 (a Figmában 761 és 1506 – a másodikat a megrendelő
     kérésére 14px-el feljebb húztuk)                                  */
  .page--radiant .radiant-illust--1 { left: 219px; top: 473px; width: 833px; }
  .page--radiant .radiant-illust--2 { left: 872px; top: 1147px; width: 836px; }

  /* Angolul a bal hasáb utolsó sora 28px-el feljebb ér véget (mérve), ezért
     ott az ábra is ennyivel feljebb ül – így az alja ugyanúgy a szomszédos
     szöveg utolsó sorára esik (megrendelői kérés, 2026-09-03).          */
  html[lang="en"] .page--radiant .radiant-illust--2 { top: 1119px; }

  .page--radiant .radiant-text--side { left: 1086px; top: 443px; width: 614px; }
  .page--radiant .radiant-text--wide { left: 219px; top: 806px; width: 1481px; }
  .page--radiant .radiant-text--left { left: 219px; top: 1099px; width: 632px; }

  .page--radiant .radiant-text p { font-size: 21px; }

  .page--radiant .radiant-uses__title {
    left: 219px;
    top: 1727px;                  /* betűteteje 1737 */
    font-size: 36px;
  }

  .page--radiant .radiant-uses__lead {
    left: 219px;
    top: 1797px;                  /* betűteteje 1802 */
    width: 1265px;
    font-size: 17px;
  }

  .page--radiant .radiant-uses__col--1 { left: 219px; top: 1929px; width: 622px; }
  .page--radiant .radiant-uses__col--2 { left: 1059px; top: 1983px; width: 695px; }

  .page--radiant .radiant-uses__label,
  .page--radiant .radiant-uses__list { font-size: 21px; }

  /* --- a szürke elválasztó a szöveg és a videó között, ugyanolyan
         térközökkel, mint a „Felhasználási területek" fölötti vonal: 80px a
         szöveg utolsó sora alatt (ott 1505 → 1585), és 152px-re alatta a
         következő elem (ott a cím betűteteje: 1585 → 1737)             */
  .page--radiant .radiant-rule--video {
    left: 187px;
    top: 2243px;                  /* 2163 (a jobb lista alja) + 80 */
    width: 1546px;
  }

  /* --- a videó: a két vonal (187 / 1733) közötti 1546px, 16:9-ben 870px
         magas; alatta 246px üres tér a láblécig (megrendelői kérés,
         2026-09-19)                                                    */
  .page--radiant .radiant-video {
    left: 187px;
    top: 2395px;                  /* 2243 + 152 */
    width: 1546px;
    height: 870px;
  }
}

/* =========================================================
   KAPCSOLATFELVÉTEL – a Figma `endnote` / `Variant5` komponense
   (504:1516, 1920×963). Ez áll mind a 12 oldal alján.
   ========================================================= */

/* A háttér a megrendelő 2026-09-03-i exportja: a teljes `endnote` frame
   2x-ben (3840x1926 -> 2560x1284), ezért 1920px-en pontosan kitölti a
   láblécet, vágás nélkül. Szélesebb/keskenyebb ablaknál a `cover` középről
   vág.                                                                  */
.footer--pills .footer__bg img { object-position: center; }

@media (min-width: 1280px) {
  .footer--pills { min-height: 963px; padding: 0; display: block; }

  /* a tartalom a középre zárt 1920px-es sávban, a Figma koordinátáival */
  .footer--pills .footer__inner {
    display: block;
    position: relative;
    max-width: 1920px;
    min-height: 963px;
    margin: 0 auto;
  }

  .footer--pills .footer__brand { position: absolute; left: 155px; top: 102px; }
  .footer--pills .footer__logo  { width: 446px; }

  /* cím: x=921, betűteteje 127 */
  .footer--pills .footer__title {
    position: absolute;
    left: 921px;
    top: 111.5px;
    margin: 0;
    font-size: 80px;
    letter-spacing: 0;            /* a Figmában nincs betűköz-szűkítés */
  }

  /* bevezető: x=926, betűteteje 211, 821px széles */
  .footer--pills .footer__lead {
    position: absolute;
    left: 926px;
    top: 202px;
    width: 821px;
    max-width: none;
    margin: 0;
    font-size: 24px;
  }

  /* a 2×2 rács: mezők x=926 és 1358, y=650 és 797, 396×62;
     a feliratok betűteteje 602 és 749, 11px-el beljebb        */
  .footer--pills .copygrid {
    position: absolute;
    left: 926px;
    top: 593px;
    grid-template-columns: repeat(2, 396px);
    gap: 28px 36px;
    margin: 0;
    padding: 0;
  }

  .footer--pills .copygrid__label { margin: 0 0 21px 11px; }

  /* copyright: x=155, betűteteje 839 */
  .footer--pills .footer__copy {
    position: absolute;
    left: 155px;
    top: 833.5px;
    margin: 0;
  }
}

/* =========================================================
   TELEFONOS RAJZ – 390px, 1280px alatt (az aloldalak)
   A modell leírása a style.css elején („KÉT RAJZ, KÖZTES ÁLLAPOT
   NÉLKÜL"), a közös részek (fejléc, főoldal, lábléc) a style.css
   végén. Minden méret a 390px-es rajz terében, fix px-ben; a
   tartalom 310px-es oszlopban (--container), 40px-es margóval
   (--gutter). A teljes szélességű sávok belső margója
   `max(var(--gutter), calc(50% - var(--container) / 2))`, ami a 390-es
   rajzban 40px, 600px fölött pedig középre zárja az oszlopot.
   ========================================================= */
@media (max-width: 1279px) {

  /* --- világos fejléc: a hamburger-panel színei --- */
  .nav--light .nav__menu {
    background: rgba(242, 242, 247, .98);
    border-bottom-color: rgba(30, 30, 30, .12);
  }
  .nav--light .nav__list li + li { border-top-color: rgba(30, 30, 30, .10); }

  /* a hamburger-panelben nincs lenyíló sáv */
  .nav--light .lang__btn:not(.is-active) {
    background: transparent;
    box-shadow: none;
  }

  /* --- Termékeink: a három csempe egymás alatt ---
     A csempén belül minden elem a magasság százalékában ül (a Figma
     arányai szerint), ezért a magasságot csökkentjük, az elrendezést
     nem bontjuk meg. Érintőn a „TOVÁBB" gomb végig látszik (fentebb). */
  .products { grid-template-columns: minmax(0, 1fr); }
  .product-tile { min-height: max(calc(58 * var(--vhu)), 440px); padding: 32px 20px; }
  /* a cím, az alcím és a gomb a 390-es rajz szerinti helyén marad akkor
     is, ha a csempe 600px fölött szélesebb a rajznál: a szövegdoboz a
     rajz 350px-e, a gomb pedig a csempe közepéhez képest ül (a Figma
     35,469%-a a 390-es rajzban 138px, azaz 57px-el a közép előtt)      */
  .product-tile__label { width: min(350px, calc(100% - 40px)); font-size: 26px; }
  .product-tile__sub { width: min(350px, calc(100% - 40px)); font-size: 15px; }
  .product-tile__cta { left: calc(50% - 56.7px); font-size: 18px; }

  /* --- dokumentum-oldalak (ISO Tanúsítvány, Pályázatok) --- */
  .doc { padding: 64px var(--gutter) 72px; }
  .doc__title { font-size: 28px; }
  .doc__rule { margin: 40px 0 32px; }

  .iso__intro { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .iso__logos { justify-content: flex-start; gap: 8px; }
  /* a két TÜV-logó az oszlop felét kapja (2 × 151px) – a korábbi
     `clamp(180px, …)` szélesség kilógott a 310px-es oszlopból, és a lap
     390px-en 408px széles lett                                        */
  .iso__logos img { width: calc(50% - 4px); }
  .iso__certs { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-top: 56px; }

  /* --- hero (Lemezmegmunkálás, Porfestés, sugárzóernyő) ---
     A cím doboza a tartalom oszlopa – 600px fölött is, ahol a hero
     szélesebb a rajznál (a 13,5em-es doboz ott kilógna az oszlopból). */
  .coating-hero__content,
  .page--services .coating-hero__title,
  .page--coating  .coating-hero__title { max-width: var(--container); }
  .coating-hero__title { font-size: 32px; }
  /* a designból örökölt kézi sortörés a Porfestés hero-címében itt
     elmarad: a keskeny oszlopban a természetes tördelés a helyes     */
  .coating-hero__title br { display: none; }
  .coating-hero__lead { margin-top: 20px; font-size: 16px; }

  /* A hero fotói 1920×1080-ra vannak vágva; álló telefonképernyőn a
     `cover` a kép közepét mutatja, és a lényeg kimarad.  Ezért a
     kivágást jobbra toljuk (a kép balra csúszik), a `cover` miatt
     hézag nélkül – a kép mindig kitölti a dobozt (megrendelői kérés,
     2026-09-07). Lemezmegmunkálás: a lézerfej és a szikrák a kép jobb
     harmadában vannak (~65–95%), középre igazítva teljesen kimaradnak. */
  .coating-hero--services .coating-hero__bg img { object-position: 72% center; }

  /* A jobbra tolt kivágással a szikrák a szöveg mögé kerülnek, és a
     fehér felirat elveszne bennük.  Ezért egy ferde sötétítés fut a bal
     oldal (szöveg) felől a jobb oldal (lézer) felé – a fotó lényege így
     is tiszta marad.  Asztali nézetben nincs rá szükség, ott a szöveg a
     kép sötét bal felén ül.                                           */
  .coating-hero--services .coating-hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(102deg,
                rgba(16, 26, 36, .78) 0%,
                rgba(16, 26, 36, .58) 45%,
                rgba(16, 26, 36, .12) 78%,
                rgba(16, 26, 36, 0) 100%);
  }

  /* --- üveg adatsáv: egy hasáb, a kijelző széléig ---
     A szövege a lenti tartalom oszlopában marad (középre zárva).    */
  .coating-specs__panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: 40px max(var(--gutter), calc(50% - var(--container) / 2));
    border-radius: 32px 32px 0 0;
    font-size: 17px;
  }
  .services-band__title,
  .page--services .coating-specs .services-band__title { font-size: 22px; }

  /* Az üvegsáv itt az ALJÁVAL ragad meg, nem a tetejével (hibajelzés,
     2026-10-08). A telefonos rajzban a sáv magasabb lehet a képernyőnél
     (Lemezmegmunkálás: 793–810px, egy 375×548-as iPhone-on a képernyő a
     rajzban 570), és `top: 0`-val az alsó sorai sosem kerültek a
     képernyőre – mire odaértek volna, a fölé csúszó világos sáv már
     takarta őket (mérve 375×548-on 183px, 1024×690-es táblán 310px).
     A negatív `top` (képernyő − sáv) annyival később ragasztja meg, hogy
     minden sora átfusson a képernyőn, és a világos sáv csak utána
     csússzon rá; ha a sáv kifér, a `min()` 0-t ad, mint eddig. A sáv
     magasságát (`--uveg-h`, a rajz terében) a js/main.js írja; JS nélkül
     a sáv nem ragad, csak görög – a szöveg így is végig olvasható.     */
  .coating-specs { top: min(0px, calc(100 * var(--vhu) - var(--uveg-h, 0px))); }
  html:not(.js) .coating-specs { position: relative; }

  /* --- tartalom: horgonysáv fölül, a szekciók alatta egy oszlopban --- */
  .coating-main {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    max-width: calc(var(--container) + 2 * var(--gutter));
    margin: 0 auto;
    padding: 56px var(--gutter) 64px;
  }

  /* Az oldalsáv vízszintes, ragadós sávvá válik a tartalom fölött. A
     sáv a KIJELZŐ széléig ér (negatív margó a valódi ablakszélig), a
     vízszintes belsőmargó pedig a LISTÁN van: így a görgető doboz a
     képernyő széléig fut, a levágott elem a szélen látszik (ez jelzi,
     hogy van még), az első és az utolsó elem viszont a tartalom
     oszlopára áll be.                                                 */
  .coating-nav {
    top: var(--nav-h);
    z-index: 10;
    margin: 0 calc(50% - 50 * var(--vwr));
    padding: 10px 0;
    background: var(--light);
    box-shadow: 0 8px 16px -8px rgba(30, 30, 30, .18);
  }

  /* A sáv vízszintesen görgethető – hat elem sosem fér ki egy telefon
     szélességébe.  A két szélén ÖNMAGÁT ELREJTŐ árnyék jelzi, merre van
     még tartalom (megrendelői kérés, 2026-09-07).
     A trükk: a `local` hátterek a tartalommal EGYÜTT görögnek, ezért a
     sáv szélére érve rácsúsznak a `scroll` (helyben maradó) árnyékokra
     és eltakarják őket. JS nélkül, magától kapcsol ki-be.           */
  .coating-nav__list {
    flex-direction: row;
    gap: 8px;
    padding-inline: max(var(--gutter), calc(50% - var(--container) / 2));
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    background:
      linear-gradient(to right,  var(--light) 40%, rgba(242, 242, 247, 0)) left  / 28px 100% no-repeat local,
      linear-gradient(to left,   var(--light) 40%, rgba(242, 242, 247, 0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0    50%, rgba(30, 30, 30, .20), rgba(30, 30, 30, 0)) left  / 12px 100% no-repeat,
      radial-gradient(farthest-side at 100% 50%, rgba(30, 30, 30, .20), rgba(30, 30, 30, 0)) right / 12px 100% no-repeat;
  }
  .coating-nav__list::-webkit-scrollbar { display: none; }

  .coating-nav__link {
    height: auto;
    min-height: 44px;
    padding: 5px 14px;
    border-radius: 88px;
    background: rgba(30, 30, 30, .05);
    font-size: 14px;
    line-height: 34px;
    white-space: nowrap;
  }
  /* a vízszintes sávban a nyíl és a behúzás elmarad */
  .coating-nav__link:hover,
  .coating-nav__link:focus-visible,
  .coating-nav__link[aria-current="true"] { padding-left: 14px; }
  .coating-nav__link::before { display: none; }
  .coating-nav__link[aria-current="true"] { background: rgba(30, 30, 30, .12); }

  /* --- szekciók: a fotó a szöveg elé kerül, hogy ne szakadjon el a
         témájától --- */
  .coating-section { gap: 28px; padding: 40px 0; }
  .coating-section__media { order: -1; }
  .coating-section__title { font-size: 24px; }
  .coating-section__text { font-size: 17px; }
  .btn-more { margin-top: 24px; font-size: 19px; }

  /* --- Lemezmegmunkálás: a gépadatok a fotó alatt ---
     A designban a fotó teteje a gépnév fölött kezdődik, ezért
     egyoszlopos nézetben is a fotó megy előre.                       */
  .services-section__lead { font-size: 17px; }
  .services-list { margin: 20px 0 1.6em; font-size: 17px; }
  .services-list__title { margin: 32px 0 24px; font-size: 17px; }

  .spec { gap: 24px; margin-top: 36px; }
  .spec__media { order: -1; margin-bottom: 12px; }
  .spec__name { font-size: 20px; }
  .spec__name--second { margin-top: 32px; }

  /* a táblázat a keskeny oszlopban is olvasható maradjon */
  .spec__table { font-size: 15px; }
  .spec__table th { height: 46px; width: 52%; padding: 6px 10px 6px 14px; }
  .spec__table td { height: 46px; padding: 6px 8px 6px 12px; }

  /* --- Porfestés részletoldalak --- */
  .detail__title { font-size: 24px; }
  .detail__body { font-size: 17px; }
  .btn-back { margin-top: 32px; font-size: 19px; }

  /* --- Melegvizes sugárzóernyő --- */
  .radiant-hero__text { margin: 0 max(var(--gutter), calc(50% - var(--container) / 2)); }
  .radiant-hero__lead { margin-top: 12px; font-size: 19px; }
  .radiant-body { padding: 56px var(--gutter) 64px; }
  .radiant-body__inner { grid-template-columns: minmax(0, 1fr); gap: 28px 32px; }
  .radiant-lead { font-size: 24px; }
  .radiant-text p { font-size: 17px; }
  .radiant-uses__title { font-size: 24px; }
  .radiant-uses__lead { font-size: 15px; }
  .radiant-uses__label,
  .radiant-uses__list { font-size: 17px; }
  .radiant-uses__col--2 .radiant-uses__list { margin-top: 10px; }
  /* az elválasztó és a videó a rács 28px-es sorközére ül (mint a másik két
     vonal); a videó alatt a lábléc előtti hely másfélszeres: a sáv 64px-es
     alsó belsőmargója + 32                                             */
  .radiant-video { margin-bottom: 32px; }

  /* --- lábléc: a másolható mezők egy oszlopban --- */
  .copygrid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-top: 48px; }
  .copygrid__label { margin-bottom: 14px; font-size: 18px; }
  /* A leghosszabb érték („3527 Miskolc, Várközi Lajos utca 16.") 14px-en
     225px, és a 310px-es mezőben az ikon és a margók mellett 240px jut
     neki – így egy sorban marad. (15px-en 241px kellene: a régi, 337px-es
     – a „KAPCSOLATFELVÉTEL" szó által szélesre feszített – lábléc ezt
     elrejtette, 360px-es kijelzőn viszont már le is vágta a mezőt.)   */
  .copyfield { gap: 12px; padding: 0 12px 0 16px; font-size: 14px; }

  /* Álló telefonképernyőn a középső kivágás a kép sötét, üres részét
     mutatja – a világos kék ív a jobb oldalon van. Ezért a kivágás jobbra
     tolódik (a kép balra csúszik), a `cover` miatt hézag nélkül
     (megrendelői kérés, 2026-09-07).                                  */
  .footer--pills .footer__bg img { object-position: 82% center; }
}