/* ============================================================
   SZOBORGYÁR — elegáns, parallax egyoldalas
   Ihlet: Wix "Vintage Car Garage" (Jade & Andy) sablon felépítése.
   Krém + faszén + visszafogott sárgaréz. Playfair Display + Jost.
   ============================================================ */

:root {
    --cream:    #F0EADE;
    --cream-2:  #E7DED0;
    --charcoal: #1A1813;
    --ink:      #33261A;
    /* a korábbi #776F5F csak 4,15:1 kontrasztot adott a krém háttéren, ami a WCAG AA
       4,5:1-es minimuma ALATT van normál szövegre — innen jött a "túl halvány" érzet.
       Ez az érték 6,39:1, tehát kényelmesen AA, de még jól elkülönül a teli --ink-től (12,2:1). */
    --muted:    #5C5243;
    --brass:    #A07C3F;
    --brass-d:  #876732;
    --line:     rgba(26,24,19,0.16);
    --line-lt:  rgba(240,234,222,0.28);
    --over:     rgba(18,16,12,0.55);
    --over-d:   rgba(18,16,12,0.72);

    --maxw: 1240px;
    --pad:  clamp(4.5rem, 9vw, 9rem);
    /* a tartalmi szekciók egységes függőleges belső margója (felül és alul) */
    --pad-sec: clamp(3.125rem, 4.5vw, 4rem);
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --ease: cubic-bezier(0.33, 0, 0.1, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    background: var(--cream);
    color: var(--ink);
    font-family: 'Jost', system-ui, sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 1.05vw, 1.1rem);
    line-height: 1.75;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,h2,h3,h4 { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; line-height: 1.1; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
::selection { background: var(--brass); color: #fff; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.center { text-align: center; }

/* apró sárgaréz címke */
.eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem;
    letter-spacing: 0.32em; text-transform: uppercase; color: var(--brass); }
.eyebrow__hi { color: var(--ink); font-weight: 700; }

/* elegáns szekciócím */
.s-title { font-size: clamp(2.1rem, 4.6vw, 3.7rem); font-weight: 500; margin-top: 1rem; letter-spacing: 0.01em; }
.s-sub { color: var(--muted); max-width: 54ch; margin: 1.2rem auto 0; font-size: 1.08rem; }
.rule { width: 54px; height: 1px; background: var(--brass); margin: 1.6rem auto 0; }

/* gombok */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: 'Jost', sans-serif; font-weight: 400;
    font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 1rem 2rem;
    border: 1px solid currentColor; cursor: pointer; background: transparent; transition: .3s var(--ease); }
.btn--brass { background: var(--brass); color: #fff; border-color: var(--brass); }
.btn--brass:hover { background: var(--brass-d); border-color: var(--brass-d); }
.btn--ghost { color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--cream); }
.btn--light { color: #fff; }
.btn--light:hover { background: #fff; color: var(--ink); }
/* Elsődleges CTA sötét (fotós) háttéren: NEM tömör sárgaréz tégla — az olcsó
   "vedd meg most" hatást kelt. Helyette sárgaréz keret + épphogy érzékelhető
   sárgaréz derengés, ami a márka hajszálvonalas nyelvét viszi tovább.
   A hangsúlyt a SZÍN adja, nem a tömeg; hoverre tölt ki teljesen. */
.btn--brass-o { color: #fff; border-color: var(--brass); border-width: 2px;
    /* GEPEN a hero hattere homogen szurke (a hero-kep szandekosan nem tolt be ott),
       ezert erosebb kitoltes kell, kulonben a gomb elveszik. Mobilon fotó van
       mogotte, ott a halkabb derenges a jo — ld. a 620px-es blokkot. */
    background: rgba(160,124,63,0.78); }
.btn--brass-o:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
.btn--icon-only { padding: 0.8rem 1rem; font-size: 1.1rem; line-height: 1; }

/* ============================================================
   HEADER
   ============================================================ */
.hdr { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; transition: background .4s var(--ease), border-color .4s; border-bottom: 1px solid transparent; }
.hdr__in { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); height: 82px;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.brand { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 1.4rem; letter-spacing: 0.16em; color: #fff; transition: color .4s; }
.brand__line { display: block; width: 58px; height: 1.25px; background: var(--brass); margin: 6px auto 0; }
.nav { display: flex; align-items: center; gap: 2.1rem; }
.nav a { font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.96); transition: color .3s; position: relative; }
/* clip-path, NEM transform: scaleX — ld. a CTA-aláhúzásnál írt indoklást
   lentebb. A scaleX külön kompozit rétegre teszi az 1px-es vonalat, egyszer
   raszterizálja, majd nyújtja: animáció közben vastagabbra mosódik, a végén
   pedig visszaugrik élesre. Itt is ugyanaz a javítás. */
/* 2px, nem 1px: 1.5-ös pixelarányú kijelzőn (a legtöbb laptop) az 1px CSS-vonal
   1.5 eszközpixelre esik, tehát mindig félig áttetsző élsimításba mosódik —
   emiatt tűnt el. A 2px pontosan 3 eszközpixel, tömör és jól látható. */
.nav a::after { content: ''; position: absolute; left: 0; bottom: -6px; width: 100%; height: 2px; background: var(--brass);
    clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); }
.nav a:hover::after { clip-path: inset(0 0 0 0); }
.nav a:hover { color: #fff; }
/* Projectindítás — kiemelt CTA a navban, nem sima szöveglink */
/* font-weight 400 a nav-linkek örökölt 300-a helyett: a CTA 12,5 px-es,
   ritkított nagybetűs felirat, és a krém fejlécen sárgaréz színnel csak
   3,22:1 kontrasztot ad — Light súllyal ez erőtlenül vékonynak látszott.
   MINDEN ÁLLAPOTBAN érvényes, nem csak a krém fejlécben: a súly a szöveg
   szélességét is megváltoztatja, tehát ha csak a `.hdr.solid` állapot kapná
   meg, a gomb megugrana, valahányszor a látogató átgörget a küszöbön. */
.nav__cta { border: 1px solid rgba(255,255,255,0.6); padding: 0.55rem 1.15rem; font-weight: 400;
    transition: background .3s, border-color .3s, color .3s; }
.nav__cta::after { content: none; }
.nav__cta:hover { background: var(--brass); border-color: var(--brass); color: #fff; }
/* `a.nav__cta` és nem `.nav__cta`: a fenti `.hdr.solid .nav a` szabály (3 osztály
   + elem) ERŐSEBB, mint egy sima `.hdr.solid .nav__cta` (3 osztály), ezért a
   sárgaréz szövegszín némán elveszett, és a CTA ugyanolyan barna betűs volt,
   mint a többi menüpont — pedig a keret sárgaréz maradt. Az elemtípus
   hozzáadásával a szabály erősebb lesz, és érvényre jut a szándék. */
.hdr.solid .nav a.nav__cta { border-color: var(--brass); color: var(--brass); }
.hdr.solid .nav a.nav__cta:hover { background: var(--brass); color: #fff; }
.burger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 6px; }
.burger span { width: 26px; height: 2px; background: #fff; transition: .3s; }

/* solid állapot (görgetés után) */
.hdr.solid { background: var(--cream); border-bottom-color: var(--line); }
.hdr.solid .brand { color: var(--ink); }
.hdr.solid .nav a { color: #5A4E3D; }
.hdr.solid .nav a:hover { color: var(--ink); }
.hdr.solid .burger span { background: var(--ink); }

/* ============================================================
   HERO — teljes képernyős parallax
   ============================================================ */
.hero { position: relative; height: 100vh; min-height: 620px; display: grid; place-items: center; text-align: center; overflow: hidden; }
.hero__bg { position: absolute; inset: 0;   /* a kép a HTML-ben, inline stílusban */
    background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; }
.hero__bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,16,12,0.55), rgba(18,16,12,0.35) 40%, rgba(18,16,12,0.7)); }
.hero__c { position: relative; z-index: 2; color: #fff; padding: 0 var(--gutter);
    /* a .hero grid + place-items:center miatt ez a blokk a TARTALOMHOZ igazodna,
       es a nagy cim tulnyulhat a kepernyon (375px-en 39px-t levagott a bal/jobb szelbol) */
    max-width: 100%; }
.hero__eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.42em; text-transform: uppercase; color: rgba(255,255,255,0.86); }
.hero__title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: clamp(2.6rem, 9vw, 8rem); letter-spacing: 0.06em; margin: 1.2rem 0; line-height: 1; }
.hero__line { width: clamp(70px, 20.8vw, 220px); height: 1.5px; background: var(--brass); margin: 0 auto 1.5rem; }
.hero__sub { font-size: 1.1rem; letter-spacing: 0.05em; color: rgba(255,255,255,0.9); max-width: 46ch; margin: 0 auto 2rem; }
/* hero gombpár EGYMÁS ALATT — felül a Projektindítás (sárgaréz kitöltés, ez a
   hero üzleti célja), alatta a Munkáink (kontúros, másodlagos: bizonyíték annak,
   aki még nem áll készen). A megjelenés így egyezik a DOM-sorrenddel is, tehát
   a képernyőolvasó és a billentyűzetes tabolás ugyanezt a sorrendet kapja. */
.hero__btns { display: flex; flex-direction: column; align-items: center;
    gap: 0.8rem; margin-top: clamp(2.6rem, 5vh, 3.6rem); }
.hero__cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255,255,255,0.7); font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; }
.hero__cue span { display: block; width: 1px; height: 34px; background: rgba(255,255,255,0.5); margin: 0.6rem auto 0; }

/* ============================================================
   SZEKCIÓ + PARALLAX SÁV
   ============================================================ */
.section { padding-top: var(--pad); padding-bottom: var(--pad); scroll-margin-top: 55px; }
/* A tartalmi szekciók FELÜL ÉS ALUL is ezt a — a `--pad`-nál szűkebb — méretet
   kapják. Korábban csak a felső volt átállítva, az alsó maradt a 115px-es
   `--pad`-en, ezért minden szekció alja fölöslegesen tátongott. */
#szolgaltatasok, #munkak, #rolunk {
    padding-top: var(--pad-sec); padding-bottom: var(--pad-sec); }
.section--cream2 { background: var(--cream-2); }
.section__head { max-width: 720px; margin: 0 auto clamp(3rem, 6vw, 5rem); }

.band { position: relative; height: clamp(300px, 46vh, 480px); display: grid; place-items: center; text-align: center; overflow: hidden; }
.band__bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-attachment: fixed; z-index: 0; }
.band__bg::after { content: ''; position: absolute; inset: 0; background: var(--over-d); }
.band__bg--xeno { background-position: center 22%; }
/* Munkáink-sáv (óriáshangya): négyzetes forráskép, a széles sávban csak egy vízszintes
   csík látszik belőle — 55%-ra tolva a hangya feje/teste kerül a képbe, kevesebb csarnok-tetővel */
.band__bg--hangya { background-position: center 55%; }
.band__c { position: relative; z-index: 2; color: #fff; padding: 0 var(--gutter); }
/* csak az alkotók sávja gördül (parallax) — a többi háttér fix.
   Nincs felnagyítás: a kép cover-ben marad, a háttér-POZÍCIÓT csúsztatjuk (mint a Wix-sablon). */
.band__bg.roll { inset: auto 0 auto 0; top: -25%; height: 150%; background-attachment: scroll; will-change: transform; }
.band--people { height: clamp(400px, 58vh, 580px); }        /* magasabb sáv, hogy több látszódjon a képből */
.band--people .band__bg::after { background: linear-gradient(180deg, rgba(18,16,12,0.28), rgba(18,16,12,0.52)); }
.band__eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.8rem; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.82); }
.band__title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 3rem); margin-top: 0.8rem; }
.band__note { margin-top: 1rem; color: rgba(255,255,255,0.72); font-size: 0.95rem; }
.band__ph { display: inline-block; margin-top: 1.2rem; border: 1px dashed rgba(255,255,255,0.5); padding: 0.4rem 0.9rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.8); }

/* ============================================================
   SZOLGÁLTATÁSOK — 3 hasáb
   ============================================================ */
.svcs { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(2rem, 4vw, 4rem); }
.svc { text-align: center; }
.svc__no { font-family: 'Playfair Display', serif; font-style: italic; color: var(--brass); font-size: 1.4rem; }
.svc__t { font-size: clamp(1.4rem, 2.2vw, 1.9rem); margin: 0.8rem 0 1rem; }
.svc__d { color: var(--muted); }
.svc + .svc { position: relative; }
.svc + .svc::before { content: ''; position: absolute; left: calc(clamp(2rem,4vw,4rem) / -2); top: 10%; height: 80%; width: 1px; background: var(--line); }

/* ============================================================
   TECHNOLÓGIÁK — egysoros folyamat-idővonal
   Szándékosan visszafogott: a célközönségnek nem a HOGYAN, hanem a MIT számít,
   ezért ez csak gyors szakmai hitelesítés, nem önálló fejezet.
   Folyamat-idővonal: a sárgaréz vonal végigfut a római számokon, így a négy lépés
   egy ÚTVONAL (ötlettől a kész szoborig), nem négy különálló doboz.
   ============================================================ */
#technologia { padding-top: clamp(3rem, 5.5vw, 4.5rem); padding-bottom: clamp(3rem, 5.5vw, 4.5rem); }
#technologia .section__head { margin-bottom: clamp(2rem, 4vw, 3rem); }
#technologia .s-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
.techs { --node: 46px; display: grid; grid-template-columns: repeat(5, 1fr);
    gap: clamp(1.6rem, 3vw, 2.8rem); position: relative; }
/* A vezetővonal SZAKASZOKBÓL áll: minden lépés a KÖVETKEZŐ lépésig húz vonalat.
   Így az utolsó pont (Helyszíni telepítés) után nincs vonalvég, ami a semmibe fut —
   a folyamat láthatóan lezárul, nem sugall további, meg nem nevezett lépéseket.
   A szakasz hossza = egy oszlop + egy köz, ezért pontosan a szomszéd pont közepéig ér. */
.tech { text-align: center; position: relative; }
.tech:not(:last-child)::after { content: ''; position: absolute; top: calc(var(--node) / 2);
    left: 50%; width: calc(100% + clamp(1.6rem, 3vw, 2.8rem)); height: 1px; background: var(--line); }
/* bevezető szakasz az ELSŐ pont előtt: a vonal a semmiből úszik be (mint korábban) */
.tech:first-child::before { content: ''; position: absolute; top: calc(var(--node) / 2);
    left: 0; width: 50%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--line)); }
/* FONTOS: a körnek a vonalszakaszok FÖLÖTT kell lennie, különben a vonal áthúzza a számot.
   A szakaszok ::after-ek, amik a .tech__no UTÁN festődnek — ezt a z-index fordítja meg. */
.tech__no { position: relative; z-index: 1;
    width: var(--node); height: var(--node); margin: 0 auto; border: 1px solid var(--brass);
    border-radius: 50%; background: var(--cream); color: var(--brass);
    display: flex; align-items: center; justify-content: center;
    font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; line-height: 1;
    /* OPTIKAI középre igazítás. A flexbox a betű ELŐREHALADÁSI DOBOZÁT centrálja,
       nem a látható tintát — dőlt betűnél a kettő nem esik egybe: a Playfair
       italic tintája mérve 0.09em-mel jobbra ül a doboz közepétől. Függőlegesen
       pedig a sordoboz a leszárak helyét is beleszámolja, a római számoknak
       viszont nincs leszáruk, ezért ~0.06em-mel lejjebb látszanak.
       A padding border-box mellett nem növeli a kört, csak a tartalomdobozt
       szűkíti — a szöveg a padding felével mozdul el az ellenkező irányba. */
    padding-right: 0.18em; padding-bottom: 0.12em;
    transition: background .3s var(--ease), color .3s var(--ease); }
/* A fenti korrekció az I, II, III, IV számokra pontos (maradék eltérés 0,3 px
   alatt), a V-nél viszont a betű saját jobb oldali térköze nagyobb, ezért az
   még ~1,25 px-rel jobbra ülne. Ez az ötödik körre szóló ráadás.
   FIGYELEM: ha az idővonal lépéseinek SZÁMA vagy SORRENDJE változik, ezt a
   nth-child(5)-öt is felül kell vizsgálni — a szabály a "V" jelhez tartozik,
   nem az ötödik pozícióhoz mint olyanhoz. */
.tech:nth-child(5) .tech__no { padding-right: 0.32em; }
.tech:hover .tech__no { background: var(--brass); color: var(--cream); }
/* A lépésnevek egy része két sorba tördel (pl. "Digitális formakészítés"), másik része
   egysoros — ezért KÉT SORNYI helyet foglalunk le mindegyiknek, így a kisbetűs felsorolás
   minden állomásnál azonos magasságban kezdődik. (h3 sormagasság = 1.1, tehát 2 sor = 2.2em.) */
.tech__t { font-size: clamp(1.2rem, 1.6vw, 1.45rem); margin: 1rem 0 0.6rem; min-height: 2.2em; }
/* gépen a technikai tételek EGYMÁS ALATT állnak (nem a tördelés tagolja őket
   véletlenszerű helyeken) — mobilon egy sorba fűzve, ponttal elválasztva, ld. lentebb */
.tech__k { list-style: none; color: var(--muted); font-size: 1rem; line-height: 1.55; }

/* ============================================================
   MUNKÁINK — galéria
   ============================================================ */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.2vw, 1rem); }
/* A nagyon enyhe lekerekítés a RÁCS-kártyákra vonatkozik, a lightboxban
   megnyitott képekre nem. Az overflow:hidden miatt elég a .cell-re tenni:
   a kép és a hover-overlay is ehhez vágódik. */
.cell { position: relative; overflow: hidden; cursor: pointer; aspect-ratio: 3 / 4; background: var(--cream-2);
    border-radius: 3px; }
.cell img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease), filter .5s; }
.cell:hover img { transform: scale(1.06); }
/* kézzel finomhangolt rács-kivágások (a user visszajelzése alapján) */
.cell[data-project="xenomorph"] img,
.cell[data-project="predator"] img,
.cell[data-project="facehugger"] img { object-position: center 22%; }
.cell[data-project="hr-giger-tron"] img { object-position: center 8%; }
.cell[data-project="pincerhal"] img { object-position: center 10%; }
.cell[data-project="vizilo"] img { transform: scaleX(-1); }
.cell[data-project="xenomorph"] img,
.cell[data-project="facehugger"] img { transform: scale(1.08); }
/* HOVER EZEKEN A KÁRTYÁKON IS.
   A fenti keretezési transzformok pontosan olyan erősek, mint a `.cell:hover img`
   szabály (1 osztály + 1 attribútum/pszeudo-osztály + 1 elem), viszont KÉSŐBB
   jönnek a stíluslapon — ezért a Xenomorph, a Facehugger és a Viziló kártyán a
   hover-nagyítás némán elmaradt. A transform egyetlen tulajdonság: nem
   „hozzáadódik" a meglévőhöz, hanem felülírja, ezért a hover-értékbe bele kell
   építeni az adott kártya saját alaptranszformját is.
   1.08 × 1.06 ≈ 1.145, a Vizilónál pedig a tükrözés után jön a nagyítás. */
.cell[data-project="xenomorph"]:hover img,
.cell[data-project="facehugger"]:hover img { transform: scale(1.145); }
.cell[data-project="vizilo"]:hover img { transform: scaleX(-1) scale(1.06); }
/* landscape (4:3) kártya — a hover.txt utolsó sora (#landscape) kapcsolja be,
   ld. js/site.js render() (cell--landscape class) */
.cell--landscape { aspect-ratio: 4 / 3; }
/* A kártya felirata MINDIG LÁTHATÓ — gépen is, nem csak hoverre.
   Korábban asztali nézetben `opacity: 0` volt, és csak hoverre úszott be egy
   teljes felületű sötétítéssel; mobilon viszont — ahol nincs hover — végig
   kint volt egy alulról induló színátmenettel. A mobil megoldás lett a közös:
   a látogató így a rács átfutásakor is tudja, mit lát, és a keresőnek/
   képernyőolvasónak sem rejtett tartalom.
   A hover így nem MEGJELENÍT, hanem csak megerősít: mélyebb lesz a sötétítés
   (a kép nagyítása külön, a `.cell:hover img` szabályban van). */
.cell__ov { position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: flex-start; justify-content: flex-end; text-align: left;
    padding: 1.2rem; color: #fff;
    /* a sötétedés a kártya ~1/3-ánál indul: onnantól fut le a felirat mögé */
    background: linear-gradient(180deg, transparent 32%, rgba(18,16,12,0.82));
    transition: background .4s var(--ease); }
.cell:hover .cell__ov { background: linear-gradient(180deg, rgba(18,16,12,0.14) 15%, rgba(18,16,12,0.92)); }
/* A három elem szorosan egy blokként olvasódjon — a line-height itt azért
   kap külön értéket, mert az örökölt 1.7 a többsoros címeknél szétnyitná. */
.cell__t { font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 1.9vw, 1.6rem); line-height: 1.18; }
/* a kategória a nagy felirat FÖLÖTT ül, ezért alsó térköz kell, nem felső */
.cell__cat { font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.82); margin-bottom: 0.2rem; }
/* balra zárt margó: `auto` esetén a flex-elem a rugalmas helyet elnyelve
   középre húzódna, holott a fölötte lévő szöveg balra zárt */
.cell__line { width: 28px; height: 1px; background: var(--brass); margin: 0.5rem 0 0; }
.cell.is-hidden { display: none; }
.work-more { text-align: center; margin-top: clamp(2rem, 4vw, 3rem); }

/* ============================================================
   RÓLUNK
   ============================================================ */
.about { max-width: 760px; margin: 0 auto; text-align: center; }
/* Középre zárt szövegnél a 82 karakteres sorhossz túl sok volt, és a bekezdések
   "teli sor + árva csonk" mintában törtek. Szűkebb szövegoszlop + text-wrap: balance,
   ami közel egyenlő hosszúságú sorokra osztja a bekezdést (a régebbi böngészők
   egyszerűen a normál tördelést használják, tehát nem törik el semmi). */
/* A törzsszöveg ugyanazt a halvány tónust kapja, mint az oldal összes többi
   body-szövege (.svc__d, .s-sub, .tech__k) — korábban teli tónusú volt, ezért
   ez a szekció nehezebbnek hatott az egész oldalnál.
   A hangsúlyt SZÁNDÉKOSAN a nyitó- és a zárómondat viszi, nem sorszám-alapú
   szabályok (a régi nth-of-type-os megoldás el is csúszott, amikor bekezdés került bele). */
.about p { margin: 1.15rem auto 0; max-width: 58ch; color: var(--muted); text-wrap: balance; }
.about p:first-of-type { margin-top: 0; color: var(--ink); font-size: 1.08rem; }
/* a halvány bekezdésből ez a mondat üt ki — ezért is van félkövéren */
.about .about__hit { color: var(--ink); font-weight: 500; }
/* záró blokk: több levegő maga előtt és teli tónus, hogy lezárja a szekciót */
.about p.about__close { margin-top: clamp(2.4rem, 5vw, 3.4rem); color: var(--ink); }
.about .about__big { font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 2.4rem); letter-spacing: 0.06em; color: var(--ink); margin-top: 1.5rem; }
.info__note { display: block; color: var(--muted); font-size: 0.85rem; margin-top: 0.15rem; }

/* ============================================================
   KAPCSOLAT / FIND US + MONDD EL SZÓBAN
   ============================================================ */
.contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
.info__row { padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.info__row:first-of-type { border-top: 1px solid var(--line); }
.info__k { font-family: 'Jost', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); }
.info__v { margin-top: 0.25rem; }
.info__v a:hover { color: var(--brass); }

/* mondd el szóban */
.voice { margin-top: 1.97rem; margin-bottom: 2.2rem; padding: 1.8rem; background: var(--charcoal); color: var(--cream); }
.voice__t { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff; }
.voice__d { color: rgba(240,234,222,0.72); margin: 0.6rem 0 1.3rem; font-size: 0.96rem; }
.voice__btns { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem; }
.voice__or { align-self: center; color: rgba(240,234,222,0.6); font-size: 0.85rem; font-style: italic; }
/* A WhatsApp-gomb hoverkor teljesen invertál: sötét háttér + világos szöveg ->
   világos háttér + sötét szöveg. Ha a hátteret ÉS a szöveget is 0.3 mp-en át
   kevertük, félúton mindkettő ugyanabba a közepes szürkébe ért — a felirat egy
   pillanatra eltűnt, és ez látszott villogásnak. A háttér és a szöveg ezért
   most gyorsan (0.12 mp) vált, csak a keret marad lassú: az átfedés így ~40 ms,
   nem érzékelhető. */
.vbtn { display: inline-flex; flex-direction: column; gap: 0.1rem; border: 1px solid rgba(240,234,222,0.4); padding: 0.7rem 1.15rem;
    transition: background .12s var(--ease), color .12s var(--ease), border-color .3s var(--ease); }
.vbtn b { font-family: 'Jost', sans-serif; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; font-size: 0.82rem; }
.vbtn small { color: rgba(240,234,222,0.6); font-size: 0.78rem; transition: color .12s var(--ease); }
.vbtn:hover { background: var(--cream); color: var(--ink); border-color: var(--cream); }
.vbtn:hover small { color: var(--muted); }
.vbtn--pri { background: var(--brass); border-color: var(--brass); color: #fff; }
.vbtn--pri small { color: rgba(255,255,255,0.75); }
.vbtn--pri:hover { background: var(--brass-d); border-color: var(--brass-d); color: #fff; }
/* A "Hívj itt" gombnál a telefonszám hoverkor halványabb lett: a fenti
   .vbtn:hover small erősebb szelektor, ezért a sötét --muted színt adta rá,
   sárgaréz háttéren. Itt marad a fehér. */
.vbtn--pri:hover small { color: rgba(255,255,255,0.75); }

/* űrlap — kiemelt kártya, jól látható mezőkkel */
.form-eyebrow { font-family: 'Jost', sans-serif; font-weight: 500; font-size: 0.78rem;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--brass); margin-bottom: 0.9rem; }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem 1.3rem;
    background: #FCFAF5; border: 1px solid var(--line); border-top: 3px solid var(--brass);
    box-shadow: 0 16px 44px rgba(26,24,19,0.12); padding: clamp(1.5rem, 3vw, 2.5rem); }
.form .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field label { font-family: 'Jost', sans-serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.field label i { color: var(--brass); font-style: normal; }
.field input, .field select, .field textarea { background: #fff; border: 1px solid #CFC6B2; border-radius: 3px;
    padding: 0.82rem 0.9rem; font-family: 'Jost', sans-serif; font-weight: 300; font-size: 1rem; color: var(--ink);
    transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .field textarea::placeholder { color: #A79D8B; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brass); box-shadow: 0 0 0 3px rgba(160,124,63,0.16); }
.field textarea { min-height: 120px; resize: vertical; }
.field select { appearance: none; cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23A07C3F' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 0.9rem center; padding-right: 2.2rem; }
/* "Nagyobb fájlod van?" — EDGE CASE: csak akkor kell, ha a fájl nem fér el a
   feltöltésben. Ezért szándékosan NINCS kerete/háttere: korábban ez volt az
   egyetlen dobozolt elem az űrlapon, és emiatt majdnem akkora súlyt kapott,
   mint maga a projektleírás. Most halk kiegészítő sor a feltöltő doboz alatt. */
.biglink { grid-column: 1 / -1; margin-top: -0.35rem; }
/* a nyitó sor: sárgaréz +/− jelzi az állapotot */
.biglink__sum { display: inline-flex; align-items: baseline; gap: 0.45rem; cursor: pointer;
    background: none; border: 0; padding: 0.15rem 0; font-family: 'Jost', sans-serif;
    font-size: 0.86rem; font-weight: 500; color: var(--ink); text-align: left; }
.biglink__sum::before { content: '–'; color: var(--brass); font-weight: 400; }
.biglink__sum[aria-expanded="false"]::before { content: '+'; }
.biglink__sum:hover { color: var(--brass); }
.biglink__sum:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Nyílás-animáció: a 0fr → 1fr rács-sor a bevált módszer ismeretlen magasságú
   tartalom animálására (a height:auto nem animálható). A .biglink--js osztályt a
   JS teszi rá — enélkül a tartalom egyszerűen látszik, tehát JS nélkül sem vész el. */
.biglink--js .biglink__body { display: grid; grid-template-rows: 1fr;
    transition: grid-template-rows .32s var(--ease); }
.biglink--js.is-closed .biglink__body { grid-template-rows: 0fr; }
.biglink--js .biglink__inner { overflow: hidden; }

/* a kinyíló rész: kisebb, visszafogottabb, mint a fő űrlapmezők */
.biglink .field { margin-top: 0.5rem; gap: 0.3rem; }
.biglink .field label { text-transform: none; letter-spacing: 0; font-weight: 300;
    font-size: 0.86rem; color: var(--muted); }
.biglink .field input { padding: 0.6rem 0.75rem; font-size: 0.92rem; }

/* hiányzó mezők visszajelzése — az oldal sárgaréz akcentjével, nem piros riasztással */
.form__msg { grid-column: 1 / -1; margin-top: 0.2rem; padding: 0.85rem 1rem;
    border-left: 3px solid var(--brass); background: rgba(160,124,63,0.09);
    font-family: 'Jost', sans-serif; font-size: 0.92rem; color: var(--ink); }
.field.is-missing input, .field.is-missing select, .field.is-missing textarea {
    border-color: var(--brass); background: rgba(160,124,63,0.05); }

.drop { grid-column: 1 / -1; position: relative; border: 1.5px dashed #C6BCA4; background: #fff;
    padding: 1.4rem; display: flex; align-items: center; gap: 1rem; cursor: pointer; transition: .2s; }
.drop:hover { border-color: var(--brass); background: rgba(160,124,63,0.06); }
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop__ic { width: 36px; height: 36px; border: 1px solid var(--brass); color: var(--brass); display: grid; place-items: center; flex: none; font-size: 1.1rem; }
.drop__rec { font-family: 'Jost', sans-serif; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brass); }
.drop__t { display: block; font-family: 'Playfair Display', serif; font-size: 1.05rem; }
.drop__s { color: var(--muted); font-size: 0.85rem; }
.drop__files { color: var(--ink); font-size: 0.9rem; margin-top: 0.3rem; }
.form__sub { grid-column: 1/-1; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; }
.form__fine { color: var(--muted); font-size: 0.8rem; max-width: 44ch; }

/* Ajánlatkérő: férjen el egy 16:9 képernyőn görgetés nélkül */
/* A kapcsolat-szekció ugyanazt a függőleges belső margót kapja, mint a többi
   tartalmi szekció (korábban 18px volt, feltűnően szűkebb mindennél).
   A HORGONY LANDOLÁSA viszont nem mozdulhat: a `#kapcsolat`-ra mutató linkek
   (fejléc, hero CTA, galéria CTA, mobil sticky CTA) eddig úgy értek le, hogy a
   szekció tartalma ~92px-re került a képernyő tetejétől (74px scroll-margin +
   18px padding). Ha a padding nő, ugyanennyivel kevesebb hely kell a horgony
   fölé — ezt fejezi ki a calc(). */
#kapcsolat { padding-top: var(--pad-sec); padding-bottom: var(--pad-sec);
    scroll-margin-top: calc(92px - var(--pad-sec)); }
#kapcsolat .section__head { margin-bottom: clamp(0.5rem, 1.2vh, 1rem); }
#kapcsolat .s-title { font-size: clamp(1.8rem, 3.4vw, 2.8rem); }
#kapcsolat .rule { margin-top: 0.6rem; }
#kapcsolat .contact { gap: clamp(1.4rem, 3.2vw, 3.2rem); align-items: stretch; }
#kapcsolat .contact > .rv { display: flex; flex-direction: column; }
#kapcsolat .form { flex: 1; }
#kapcsolat .info__row { padding: 0.65rem 0; }
#kapcsolat .info__k { color: var(--brass); font-size: 0.7rem; letter-spacing: 0.22em; }
#kapcsolat .info__v { font-size: 1.14rem; font-weight: 400; color: var(--ink); }
/* A fekete doboz kitölti a bal oszlopot (alja a fehér kártyáéhoz igazodik), DE a
   tartalma FELÜLRE horgonyzott. Korábban középre volt igazítva, ezért amikor az
   üzenet-mező megnőtt, a doboz vele nyúlt, és a szöveg elmászott a doboz közepére. */
/* A flex:1-et SZÁNDÉKOSAN kivettük: azzal a doboz felszívta a bal oszlop maradék
   magasságát, ami az űrlap magasságától függ. Amióta a "Nagyobb fájlod van?" blokk
   nyitható, az űrlap magassága VÁLTOZIK — és minden nyitás/csukás 32px-t ugrasztott
   a alatta lévő elérhetőség-sorokon. Tartalomhoz igazodó magassággal a bal oszlop
   minden pontja fix marad. */
#kapcsolat .voice { display: flex; flex-direction: column; justify-content: flex-start;
    padding: 1.15rem 1.3rem; }
#kapcsolat .voice__d { margin: 0.5rem 0 1rem; }
#kapcsolat .form-eyebrow { margin-bottom: 0.6rem; }
#kapcsolat .form { gap: 0.75rem 1.1rem; padding: clamp(1.1rem, 2.2vw, 1.7rem); }
#kapcsolat .field { gap: 0.3rem; }
#kapcsolat .field input, #kapcsolat .field select, #kapcsolat .field textarea { padding: 0.6rem 0.8rem; }
#kapcsolat .field textarea { min-height: 98px; }
#kapcsolat .drop { padding: 0.9rem 1rem; }
#kapcsolat .form__sub { gap: 0.8rem 1.1rem; margin-top: 0.2rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { background: var(--charcoal); color: var(--cream); text-align: center; padding: clamp(3rem, 6vw, 5rem) var(--gutter); }
.foot__brand { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 2rem; letter-spacing: 0.16em; color: #fff; }
.foot__sub { font-family: 'Jost', sans-serif; font-size: 0.7rem; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(240,234,222,0.6); margin-top: 0.5rem; }
.foot__line { width: 54px; height: 1px; background: var(--brass); margin: 1.6rem auto; }
.foot__contact { color: rgba(240,234,222,0.8); font-size: 0.95rem; line-height: 2; }
.foot__contact a:hover { color: #fff; }
.foot__cr { margin-top: 2rem; font-size: 0.78rem; color: rgba(240,234,222,0.45); letter-spacing: 0.06em; }
.foot__cr a { color: rgba(240,234,222,0.72); }
.foot__cr a:hover { color: #fff; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb { position: fixed; inset: 0; z-index: 1000; display: none; }
.lb.open { display: block; }
.lb__bg { position: absolute; inset: 0; background: rgba(14,12,9,0.95); }
.lb__panel { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(1rem,2.5vw,2rem); }
.lb__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; color: var(--cream); }
.lb__t { font-family: 'Playfair Display', serif; font-size: clamp(1.3rem,2.4vw,2rem); }
.lb__c { font-family: 'Jost', sans-serif; font-size: 0.78rem; letter-spacing: 0.16em; color: rgba(240,234,222,0.6); margin-top: 0.3rem; }
.lb__x { background: none; border: 1px solid rgba(240,234,222,0.4); color: var(--cream); width: 46px; height: 46px; cursor: pointer; font-size: 1.2rem; transition: .25s; }
.lb__x:hover { background: var(--cream); color: var(--ink); }
.lb__stage { flex: 1; display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 0; }
.lb__coverflow { position: relative; flex: 1; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.lb__slide { position: absolute; max-height: 84%; max-width: 56%; object-fit: contain; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transition: transform .15s var(--ease), opacity .12s linear; will-change: transform, opacity; }
.lb__slide.is-c { cursor: default; }
.lb__slide:not(.is-c) { cursor: pointer; }

.lb__arr { background: none; border: 1px solid rgba(240,234,222,0.4); color: var(--cream); width: 50px; height: 64px; cursor: pointer; font-size: 1.5rem; flex: none; transition: .25s; }
.lb__arr:hover { background: var(--cream); color: var(--ink); }
.lb__foot { display: flex; justify-content: center; gap: 0.5rem; overflow-x: auto; margin-top: 1rem; }
.lb__foot img { height: 54px; opacity: 0.4; cursor: pointer; border: 1px solid transparent; transition: .25s; flex: none; }
.lb__foot img.active, .lb__foot img:hover { opacity: 1; border-color: var(--brass); }

/* ============================================================
   GALÉRIA-CTA (a rács alatt)
   ============================================================ */
.work-cta { text-align: center; margin-top: clamp(2.5rem, 5vw, 4rem);
    padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); }
.work-cta__t { font-family: 'Playfair Display', serif; font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.2; }
.work-cta__s { color: var(--muted); margin: 0.8rem auto 1.7rem; max-width: 48ch; text-wrap: balance; }
/* Dinamikus aláhúzás a fő CTA-kon (galéria alatti + hero): ugyanaz a balról
   kinövő vonal, mint a fejléc nav-linkjeinél, azonos ütemben (.3s, azonos easing).
   A vonal krém színű, mert mindkét gomb sárgaréz alapon/keretben ül. */
.work-cta .btn,
.hero__btns .btn--brass-o { position: relative; }
/* A vonal NEM transform: scaleX-szel nő, hanem clip-path-tal tárul fel.
   Miért: a scaleX a pszeudoelemet külön kompozit rétegre teszi, azt EGYSZER
   raszterizálja, majd nyújtja — egy 1px magas réteg így az animáció alatt
   lágyabbra, vastagabbra mosódik, és a végén ugrik vissza élesre. Ez látszott
   úgy, hogy "az animáció vastagabb, mint a befejezett állapot".
   A clip-path a végleges geometriájú, éles vonalat vágja ki fokozatosan:
   a vastagság az első képkockától az utolsóig pontosan ugyanaz. */
.work-cta .btn::after,
.hero__btns .btn--brass-o::after { content: ''; position: absolute; left: 2rem; right: 2rem;
    bottom: 0.7rem; height: 2px; background: var(--cream);
    clip-path: inset(0 100% 0 0); transition: clip-path .3s var(--ease); }
.work-cta .btn:hover::after,
.hero__btns .btn--brass-o:hover::after { clip-path: inset(0 0 0 0); }

/* ============================================================
   MOBIL STICKY CTA — csak ≤620px, a hero után csúszik be
   ============================================================ */
.mcta { display: none; }

/* ============================================================
   REVEAL
   ============================================================ */
.rv { opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.rv.in { opacity: 1; transform: none; }

/* ============================================================
   CSÖKKENTETT MOZGÁS (rendszerbeállítás)
   Az oldalon egyszerre van parallax sáv, reveal-animáció és coverflow-lapozás.
   Aki a rendszerében kérte a mozgás csökkentését (vesztibuláris panasz, vagy
   egyszerűen zavarja), annak mindezt kikapcsoljuk — a tartalom teljes marad,
   csak azonnal a végállapotában jelenik meg.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* a reveal ne "úsztasson be", hanem eleve látszódjon */
    .rv { opacity: 1 !important; transform: none !important; }
    /* nagyítás/eltolás hoveren és a lapozó kártyákon.
       A KERETEZÉSI transzformoknak itt is meg kell maradniuk: a `transform:
       none` egyébként nemcsak a hover-nagyítást venné el, hanem a Viziló
       tükrözését és a Xenomorph/Facehugger szorosabb vágását is — vagyis
       mozgáscsökkentésnél elcsúszna a kép kivágása. */
    .cell:hover img { transform: none; }
    .cell[data-project="vizilo"]:hover img { transform: scaleX(-1); }
    .cell[data-project="xenomorph"]:hover img,
    .cell[data-project="facehugger"]:hover img { transform: scale(1.08); }
    /* a fix hátterű sávok mozgásérzetet keltenek görgetés közben */
    .hero__bg, .band__bg { background-attachment: scroll; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 900px) {
    .svcs { grid-template-columns: 1fr; gap: 2.5rem; }
    .svc + .svc::before { display: none; }
    /* mobilon az idővonal FÜGGŐLEGESEN fut: a vonal balra kerül, a számok rajta ülnek,
       a szöveg mellettük — így a "lépésről lépésre" olvasat megmarad keskeny kijelzőn is */
    .techs { grid-template-columns: 1fr; gap: 1.9rem; }
    /* ugyanaz a szakaszos logika függőlegesen: az utolsó pont alatt nem folytatódik a vonal */
    .tech:not(:last-child)::after { top: calc(var(--node) / 2); left: calc(var(--node) / 2);
        width: 1px; height: calc(100% + 1.9rem); }
    /* mobilon az első kör a lista LEGTETEJÉN ül (y=0), ezért a bevezető szakasz oda nem fér el —
       a listaelem FÖLÉ nyúlik, a szekciócím alatti üres sávba, és a kör alá fut be */
    .tech:first-child::before { top: -1.6rem; left: calc(var(--node) / 2); width: 1px;
        height: calc(1.6rem + var(--node) / 2);
        background: linear-gradient(180deg, transparent, var(--line)); }
    .tech { text-align: left; padding-left: calc(var(--node) + 1.1rem); min-height: var(--node); }
    .tech__no { position: absolute; left: 0; top: 0; margin: 0; }
    /* mobilon egymás alatt futnak az állomások, ott nincs mihez igazítani — nem kell a foglalt hely */
    .tech__t { margin: 0.15rem 0 0.4rem; min-height: 0; }
    /* mobilon a függőleges idővonal mellett bőven van vízszintes hely, ezért a tételek
       egy sorba fűzve futnak, ponttal elválasztva — így nem nyúlik feleslegesen a szekció */
    .tech__k li { display: inline; }
    .tech__k li:not(:last-child)::after { content: ' · '; }
    .grid { grid-template-columns: 1fr 1fr; }
    .contact { grid-template-columns: 1fr; }
}
/* ============================================================
   FEJLÉC — a hamburger menü töréspontja
   ============================================================
   A vízszintes menü tényleges helyigénye 945px: márkajel 184 + menüsor 641
   + a kettő közti köz 24 + belső margók 96. A hamburger korábban csak 620px
   alatt jelent meg, így 621–945px között a menü egyszerűen kifutott a
   fejlécből — ez látszott ~927px alatt szétesésként.
   A váltás ezért 960px-en történik. Ha ÚJ MENÜPONT kerül be, ezt a számot
   újra meg kell mérni (a menüsor scrollWidth-je + 304px). */
@media (max-width: 960px) {
    /* A lenyíló panel és a fejlécsáv EGYSZERRE sötétedjen — ezért mindkettő
       .12s. Korábban a panel .25s-en úszott be, a fejléc viszont .12s alatt
       váltott hátteret, így előbb a sáv lett sötét, majd utána a panel: két
       lépcsőben mozdult, ami egyben látszó felületnél szétesik.
       Miért éppen a rövidebb ütem a közös? A fejléc krémről faszénre vált, a
       felirata pedig sötétről világosra: hosszú áttűnésnél félúton mindkettő
       ugyanabba a közepes tónusba ér, és a szöveg egy pillanatra eltűnik.
       A panelnek nincs ilyen gondja (végig fehér szöveg faszénen), ezért őt
       lehetett a fejléchez igazítani, fordítva nem. */
    .nav { display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
        position: absolute; top: 82px; left: 0; width: 100%; background: var(--charcoal); padding: 2rem 0;
        opacity: 0; visibility: hidden; pointer-events: none;
        transition: opacity .12s var(--ease), visibility 0s .12s; }
    .nav.open { opacity: 1; visibility: visible; pointer-events: auto;
        transition: opacity .12s var(--ease), visibility 0s; }
    .nav a { color: rgba(255,255,255,0.96); }
    .burger { display: flex; }
    /* menü nyitva: a fejléc sáv is sötét legyen, ne látszódjon mögötte a hero-kép */
    .hdr.menu-open { background: var(--charcoal); border-bottom-color: transparent;
        transition: background .25s var(--ease), border-color .25s; }
    .hdr.menu-open .brand { color: #fff; }
    .hdr.menu-open .nav a { color: rgba(255,255,255,0.96); }
    .hdr.menu-open .burger span { background: #fff; }
    /* Görgetés után a fejléc "solid", és a `.hdr.solid .nav a:hover` szabály
       (3 osztály + pszeudo-osztály) ERŐSEBB, mint a fenti `.hdr.menu-open .nav a`
       (3 osztály). Nyitott mobilmenüben ezért a linkek érintésre/hoverre a sötét
       `--ink` színt kapták a faszén háttéren — gyakorlatilag eltűnt a szöveg.
       Ez a szabály azonos erősségű ÉS később jön, tehát felülírja.
       A :focus és az :active a tapintós eszközök miatt kell. */
    .hdr.menu-open .nav a:hover,
    .hdr.menu-open .nav a:focus,
    .hdr.menu-open .nav a:active { color: #fff; }
    /* A kiemelt CTA a lenyíló menüben: SÁRGARÉZ KERET, FEHÉR SZÖVEG, majd
       hoverre/érintésre teli sárgaréz — ugyanaz a viselkedés, mint a főoldal
       fejlécében.
       Miért `.nav a.nav__cta` és nem `.nav__cta`? Mert a jogi oldalakon a
       fejléc egyszerre `solid` ÉS `menu-open`, és a `.hdr.solid .nav a.nav__cta`
       szabály (3 osztály + elem) különben elvinné a színt sárgarézre. Ez a
       szelektor azonos erősségű, de később jön, ezért ez érvényesül. */
    .hdr.menu-open .nav a.nav__cta { border-color: var(--brass); color: #fff; }
    .hdr.menu-open .nav a.nav__cta:hover,
    .hdr.menu-open .nav a.nav__cta:focus,
    .hdr.menu-open .nav a.nav__cta:active {
        background: var(--brass); border-color: var(--brass); color: #fff; }
    /* A menü nyitásakor a fejléc krémről faszénre, a feliratok sötétről
       világosra váltanak. Ha ez a két áttűnés 0.3-0.4 mp-ig tart, félúton
       mindkettő ugyanabba a közepes tónusba ér, és a felirat egy pillanatra
       eltűnik — ugyanaz a jelenség, mint a WhatsApp-gombnál. Gyors váltással
       az átfedés ~50 ms, nem érzékelhető. */
    .hdr.menu-open,
    .hdr.menu-open .brand,
    .hdr.menu-open .nav a,
    .hdr.menu-open .nav__cta,
    .hdr.menu-open .burger span { transition-duration: .12s; }
}

@media (max-width: 620px) {
    .grid { grid-template-columns: 1fr; }
    .cell { aspect-ratio: 16/10; }
    /* A felirat mobilon is, gépen is ugyanígy néz ki — az alapszabály már ezt
       adja, itt nincs mit felülírni. (2026.08.24-ig ez volt a mobil-kivétel.) */
    .form { grid-template-columns: 1fr; }
    /* parallax fixed háttér mobilon akadhat */
    .hero__bg, .band__bg { background-attachment: scroll; }
    /* mobilon a keskeny, majdnem négyzetes sáv "cover"-ben a teljes (álló) képet mutatná —
       a sávmagasságot arányosan lecsökkentjük, hogy a kép ugyanúgy szorosan vágva látszódjon, mint gépen */
    .band { height: clamp(220px, 32vh, 300px); }
    .band--people { height: clamp(300px, 42vh, 420px); }
    /* első (xenomorph) sáv: 0.25cm-nyivel lejjebb tolva, hogy a kép aljából is látszódjon több */
    .band__bg--xeno { background-position: center 26%; }
    /* mobilon is a tartalomhoz igazodó, rövid gombok (mint eredetileg a Munkáink) */
    .hero__btns { gap: 0.7rem; }
    /* mobilon fotó van a gomb mögött, ott halkabb kitöltés kell */
    .btn--brass-o { background: rgba(160,124,63,0.28); }
    /* mobilon a Predator-kép látszik a hero mögött, gépen marad a homogén sötét háttér */
    .hero__bg { background-image: url('../assets/predator-hero.jpg'); }
    .hero__bg::after { background: linear-gradient(180deg, rgba(18,16,12,0.25), rgba(18,16,12,0.15) 40%, rgba(18,16,12,0.45)); }
    /* a hero-szöveg mögé sötét kiemelő panel, hogy a Predator-kép ne nyelje el */
    /* a margokat is bele kell szamitani, kulonben a blokk par pixellel
       szelesebb lehet a rendelkezesre allo helynel es elcsuszik a kozeprol */
    /* A blokk szelesseget a torhetetlen "SZOBORGYAR" szo hatarozza meg (min-content),
       es racs-elemnel a min-width:auto FELULIRJA a max-width-et — ezert kell a min-width:0,
       plusz szukebb belso margo, hogy a cim + margo befarjon a kepernyobe. */
    .hero__c { background: rgba(18,16,12,0.55); padding: 2.2rem 1rem; margin: 0 var(--gutter);
        min-width: 0; max-width: calc(100% - 2 * var(--gutter)); }
    /* diszkrét sticky CTA: alacsony sáv, krém alap, egy hívás + egy fő gomb.
       Alapból elrejtve (lecsúsztatva), a JS teszi rá a .show-t a hero után. */
    .mcta { display: flex; gap: 0.55rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 0.55rem var(--gutter);
        padding-bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px));
        background: rgba(240,234,222,0.97); border-top: 1px solid var(--line);
        transform: translateY(115%); transition: transform .35s var(--ease); }
    .mcta.show { transform: none; }
    .mcta a { flex: 1; text-align: center; font-family: 'Jost', sans-serif; font-weight: 400;
        font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase;
        padding: 0.85rem 0.4rem; border: 1px solid var(--brass); }
    .mcta__ghost { color: var(--brass); }
    .mcta__btn { background: var(--brass); color: #fff; }
    /* lightbox mobilon: nincs bal/jobb kép-előnézet, a középső kép legyen nagy */
    .lb__slide:not(.is-c) { display: none; }
    .lb__slide.is-c { max-width: 90%; max-height: 90%; }
}

/* A ket egymas alatti hero-gomb miatt a szovegpanel 121px-szel magasabb lett,
   es mivel a .hero kozepre igazit, a TETEJE 61px-szel feljebb csuszott a V33-hoz
   kepest. Kozepre igazitasnal a margo fele annyival tol, ezert 15vh (~122px)
   adja vissza a regi kezdomagassagot (227px egy 812px magas kepernyon).
   Csak eleg magas kijelzon alkalmazzuk, kulonben a panel raerne a "Gorgess" jelre. */
@media (max-width: 620px) and (min-height: 760px) {
    /* a teljes 15vh tul sokat tolt rajta; a kulonbseg fele + egy hajszal a jo arany */
    .hero__c { margin-top: 10vh; }
}