/* ==========================================================================
   Custom Garage Autókozmetika — stíluslap
   Vizuális irány: hűvös grafit + ezüst/platina króm akcent, kék másodlagos.
   Tipográfia: Archivo (fejléc) + Hanken Grotesk (törzs).
   ========================================================================== */

:root{
  --bg:#0D0F12;
  --surface:#14171C;
  --surface-2:#171B21;
  --line:#222730;
  --line-soft:#1E2229;
  --accent:#C9CDD2;        /* ezüst / platina króm */
  --accent-dim:#6E7682;
  --blue:#6FA8DC;          /* másodlagos kék */
  --blue-dim:#3E6E9E;
  --text:#ECEEF1;
  --muted:#8C93A0;
  --faint:#565C66;
}

*{margin:0;padding:0;box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Hanken Grotesk',sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;display:block}

.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.display{font-family:'Archivo',sans-serif}

/* Képernyőolvasónak látható, vizuálisan rejtett címsor */
.visually-hidden{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ========================= NAV ========================= */
/* Áttetsző "frosted" sáv, a hero tetejére úszik — a hero kép finoman átdereng mögötte.
   A blur + enyhe sötét tint biztosítja, hogy a nav-szöveg olvasható maradjon. */
.topbar{
  position:absolute;top:0;left:0;right:0;z-index:20;
  /* Lágy, felülről-lefelé halványuló átmenet — nincs vonal, nincs egyenletes tint-sáv,
     nincs blur: a header beleolvad a hero-ba (a nav a sötétebb felső zónában olvasható). */
  background:linear-gradient(to bottom,
    rgba(13,15,18,0.85) 0%,
    rgba(13,15,18,0.45) 55%,
    rgba(13,15,18,0) 100%);
}
/* A header a hero szövegével azonos szélességű sávban: a logó a hero bal élére, a telefon-pill a
   hero jobb élére igazodik (1360px, mint a .hero-inner). */
.topbar > .wrap{max-width:1360px}
nav{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;padding:18px 0;
}
/* Header logó = ikon + név egy egységként, vízszintesen igazítva */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand-logo{height:46px;width:auto}            /* arányos a navval, cserélhető <img> */
.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-name{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:18px;
  letter-spacing:0.02em;color:var(--text);
}
.brand-sub{
  font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:10px;
  letter-spacing:0.24em;color:var(--accent);margin-top:4px;text-transform:uppercase;
}
/* "by Bronx" attribúció a logó alatt — diszkrét, muted, normál betűközzel/kisbetűvel */
.brand-by{
  letter-spacing:0.04em;color:var(--muted);text-transform:none;font-weight:500;
}

.nav-links{display:flex;gap:26px;font-size:12px;letter-spacing:0.14em;color:var(--muted)}
.nav-links a{color:inherit;text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--text)}

.phone-pill{
  font-family:'Archivo',sans-serif;font-weight:600;font-size:13px;
  color:var(--bg);background:var(--accent);padding:10px 16px;
  border-radius:100px;text-decoration:none;transition:transform .2s;white-space:nowrap;
}
.phone-pill:hover{transform:translateY(-1px)}

/* Mobil-elemek (hamburger, lenyíló menü, alsó hívás-sáv) — alapból (desktopon) rejtve.
   A tényleges megjelenítés és viselkedés a ≤780px blokkban. */
.nav-toggle{display:none}
.mobile-menu{display:none}
.mobile-callbar{display:none}
.pkgs-hint{display:none}

/* ========================= HERO (full-bleed) ========================= */
.hero{
  position:relative;
  min-height:100vh;                /* teljes képernyő-magasság */
  min-height:100svh;               /* mobil: a tényleges látható magasság (cím-/eszköztár nélkül) */
  display:flex;align-items:center;
  overflow:hidden;
  background:var(--bg);            /* fallback, ha a kép nem tölt be → nem törik el */
}
/* Háttérkép — a TELJES hero-t kitölti (absolute + inset:0 + cover), nem a tartalom
   magasságára zsugorodik.
   A kép: autó középen-jobbra, sötét üres tér balra, meleg fény jobbról. object-position:center
   → a bal sötét rész megmarad a szövegnek, és az autó is jól látszik. (right center levágná
   a bal sötét teret.)
   Nincs fényerő-emelés: az új kép eleve jól megvilágított, így a mély feketék megmaradnak.
   Ha mégis kellene egy hajszálnyi emelés: filter:brightness(1.05). */
.hero .hero-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center center;
  z-index:0;
}
/* Ha a kép nem tölthető be, halvány felület-szín derengjen a fallback fölött */
.hero .hero-img:not([src]),
.hero .hero-img[src=""]{display:none}

/* Scrim: olvashatóságot adó sötét átmenet. A szövegblokk beljebb tolódott (a bal-középső
   zónába), ezért a sötétítés is kitart középig, és csak ~80%-tól lesz teljesen átlátszó —
   így a fehér szöveg a kép sötét részén marad, a jobb oldali autó + meleg fény viszont átüt. */
.hero-scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,
    rgba(13,15,18,0.95) 0%,
    rgba(13,15,18,0.88) 36%,
    rgba(13,15,18,0.64) 58%,
    rgba(13,15,18,0.28) 78%,
    rgba(13,15,18,0.10) 100%);
}
/* Szöveg a scrim fölött. A bal éle PONTOSAN a .wrap bal élére igazodik (mint a többi szekció) —
   nincs egyedi vízszintes margó. Függőlegesen középre igazodik (.hero align-items:center).
   A max-width 720px tartja a "Custom Garage"-t egy sorban; a vége átlóghat a sötét bal részre. */
/* A hero szöveg középre igazított konténerben, de a szekciók .wrap-jénél (1180) szélesebben (1360)
   → mindenhol fix kb. 90px-szel kezdődik kijjebb, nagy desktopon sem ragad a képernyő széléhez. */
.hero-inner{position:relative;z-index:2;width:100%;max-width:1360px;margin:0 auto;padding:0 clamp(20px,4vw,40px)}
.hero-content{
  max-width:860px;                     /* nagyobb cím is elfér egy sorban ("Custom Garage") */
  padding:clamp(40px,8vh,80px) 0;
}

/* Diszkrét lefelé-görgetés jel a hero alján (finoman mozog, a Csomagokhoz görget) */
.hero-scroll{
  position:absolute;left:50%;bottom:clamp(16px,4vh,30px);transform:translateX(-50%);
  z-index:3;display:flex;align-items:center;justify-content:center;width:48px;height:48px;
  color:var(--text);opacity:.92;text-decoration:none;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.6));
  animation:heroScrollBounce 2.2s ease-in-out infinite;
  transition:opacity .2s ease;
}
.hero-scroll:hover{opacity:1}
.hero-scroll svg{width:40px;height:40px;stroke-width:2}
@keyframes heroScrollBounce{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,7px)}}

.eyebrow{font-size:11px;letter-spacing:0.28em;color:var(--blue);margin-bottom:24px}

h1{
  font-family:'Archivo',sans-serif;font-weight:900;
  font-size:clamp(46px,8.4vw,104px);line-height:0.92;letter-spacing:-0.028em;
}
h1 .sub{
  display:block;color:var(--blue);font-weight:700;
  font-size:clamp(29px,4.6vw,56px);letter-spacing:-0.01em;margin-top:8px;
}
/* Diszkrét helyszín-jelölés a sub-sor mellett — kisebb, muted, de jól olvasható;
   nem versenyez a nagy "Autókozmetika" címmel */
h1 .loc{
  font-size:0.5em;font-weight:600;color:var(--muted);
  letter-spacing:0.01em;vertical-align:baseline;
}
/* Szlogen: feszesen a cím-csoporthoz tapad; alatta szorosan a helyszín-sor */
.slogan{font-size:clamp(16px,1.6vw,19px);line-height:1.55;color:var(--muted);margin:14px 0 16px;max-width:36ch}
/* Diszkrét, kattintható helyszín-sor — a térkép-szekcióra ugrik. Ezüst, monoline pinnel. */
.hero-loc{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 clamp(44px,8vh,88px);
  font-family:'Hanken Grotesk',sans-serif;font-weight:500;font-size:15px;letter-spacing:0.01em;
  color:var(--accent);text-decoration:none;transition:color .2s;
}
.hero-loc:hover{color:var(--text)}
.hero-loc-icon{width:17px;height:17px;flex-shrink:0}   /* stroke=currentColor → ezüst, hoverre világos */

.ctas{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
/* Elsődleges CTA: hangsúlyos gomb telefon-ikonnal */
.btn-call{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;
  color:var(--bg);background:var(--accent);padding:16px 32px;
  border-radius:100px;text-decoration:none;transition:transform .2s;
  display:inline-flex;align-items:center;gap:10px;
}
.btn-call:hover{transform:translateY(-2px)}
.btn-icon{width:18px;height:18px;flex-shrink:0}
/* Másodlagos blokk: látható szám felül, "Csomagok & árak" alatta */
.cta-aside{display:flex;flex-direction:column;gap:6px}
/* Jól látható, kattintható telefonszám a heróban */
.hero-phone{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;
  color:var(--text);text-decoration:none;letter-spacing:0.01em;transition:color .2s;
}
.hero-phone:hover{color:var(--accent)}
.btn-ghost{
  font-size:13px;letter-spacing:0.06em;color:var(--text);text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,0.22);padding-bottom:4px;transition:border-color .2s;
}
.btn-ghost:hover{border-color:var(--accent)}
/* Körvonalas, MÁSODLAGOS gomb (átlátszó + vékony keret) — nem versengl a tömör ezüst CTA-kkal */
.btn-outline{
  display:inline-flex;align-items:center;gap:9px;
  font-family:'Archivo',sans-serif;font-weight:600;font-size:15px;
  color:var(--text);background:transparent;border:1px solid var(--accent-dim);
  padding:13px 24px;border-radius:100px;text-decoration:none;
  transition:border-color .2s, color .2s, background .2s;
}
.btn-outline:hover{border-color:var(--accent);background:rgba(255,255,255,0.04)}

/* ========================= SZEKCIÓ FEJLÉC ========================= */
.sec{padding:clamp(40px,7vw,80px) 0;border-top:1px solid var(--line)}
/* Al-szekció: az előző szekció folytatása — nincs elválasztó vonal, szűkebb felső térköz */
.sec--sub{border-top:none;padding-top:0}
/* Kisebb al-cím (pl. "Extrák") — nem versenyez a fő szekciócímekkel */
.sub-h{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(22px,3vw,32px);line-height:1.05;letter-spacing:-0.01em;margin-bottom:10px;
}
.sec-tag{font-size:11px;letter-spacing:0.24em;color:var(--blue);margin-bottom:16px}
.sec-h{
  font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(30px,4.5vw,52px);line-height:1.0;letter-spacing:-0.02em;margin-bottom:10px;
}
.sec-lead{font-size:15px;color:var(--muted);max-width:42ch;line-height:1.55}

/* ========================= CSOMAGOK ========================= */
.pkgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:42px}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:28px;display:flex;flex-direction:column;
}
.card.feat{border-color:var(--blue)}
/* A badge fix magasságú címke-sáv a név fölött (~26px) — flow-ban, átfedés nélkül */
.feat-tag{font-size:10px;letter-spacing:0.18em;color:var(--blue);line-height:14px;height:14px;margin:0 0 12px}
.p-name{font-family:'Archivo',sans-serif;font-weight:700;font-size:22px}
/* A nem-kiemelt kártyákon ugyanennyi tartalék a név fölött → mind a 4 ár/név egy vonalban */
.card:not(.feat) .p-name{margin-top:26px}
.p-price{font-family:'Archivo',sans-serif;font-weight:800;font-size:34px;color:var(--accent);margin:8px 0 20px}
.p-price small{font-size:15px;color:var(--accent-dim);font-weight:500}
.grp{font-size:10px;letter-spacing:0.16em;color:var(--muted);margin:14px 0 8px}
.li{font-size:13px;color:#79808D;padding:5px 0;line-height:1.5}   /* öröklött tételek: halvány hűvös szürke */
.li-base{color:#A9AFBA}                                           /* Alap saját tartalma: semleges, jól olvasható */
.li-new{color:var(--blue);font-weight:600}                        /* az adott szinten ÚJ (plusz) tételek: kék */
.disclaimer{margin-top:22px;color:var(--faint)}

/* ========================= EXTRÁK ========================= */
.extra-grid{margin-top:42px}
.extra-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:22px 0;border-top:1px solid var(--line-soft);
}
/* Csupasz monoline ikon (Lucide) — csak az Extrák szekcióban. Nincs doboz/kör/háttér. */
.extra-icon{
  width:26px;height:26px;display:block;margin-bottom:14px;
  color:var(--accent);          /* a stroke="currentColor" ezt veszi fel */
  stroke-width:1.5;
  transition:transform .28s ease, color .28s ease;
}
.extra-name{font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(18px,2vw,24px)}
/* Sor-hover: a bal infó-blokk finoman jobbra moccan, az ikon elcsúszik + kivilágosodik */
.extra-row > div{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.extra-row:hover > div{transform:translateX(8px)}
.extra-row:hover .extra-icon{transform:translateX(2px) scale(1.06);color:var(--text)}
.extra-desc{font-size:13px;color:var(--muted);margin-top:4px}
.extra-price{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(17px,2vw,22px);
  color:var(--accent);white-space:nowrap;text-align:right;
}
.extra-price small{display:block;font-size:11px;color:var(--accent-dim);font-weight:500;letter-spacing:0.04em}
/* Önálló (csomag nélküli) ár külön sorban, kis elválasztással */
.extra-price small.alt{margin-top:5px;color:var(--muted)}

/* ========================= GALÉRIA (editorial mozaik) ========================= */
.gal{
  display:grid;gap:14px;margin-top:42px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(120px,13vw,190px);
  grid-auto-flow:dense;          /* sok kép + load-more mellett kitölti a mozaik-lyukakat */
}
/* Élesítés előtti átmenet: ha csak EGY munka-kép van, ne fél-üres mozaik legyen, hanem egy
   korlátozott szélességű, balra igazított kép (a mozaik visszaáll, amint több kép kerül be). */
.gal:has(.gal-tile:only-child){display:block}
.gal-tile:only-child{max-width:620px;height:auto;aspect-ratio:4/3}
/* Load-more: a batch fölötti tile-ok rejtve, amíg a "Továbbiak" gomb elő nem hozza */
.gal-tile.is-hidden{display:none}
.gal-more-wrap{display:flex;justify-content:center;margin-top:22px}
.gal-more-wrap[hidden]{display:none}
.gal-tile{
  position:relative;height:100%;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
/* Mozaik: 1. nagy (2×2), 4–6. széles (2×1) — a többi 1×1 */
.gal-tile:nth-child(1){grid-column:span 2;grid-row:span 2}
.gal-tile:nth-child(4),
.gal-tile:nth-child(5),
.gal-tile:nth-child(6){grid-column:span 2}
/* A tile képe: csak akkor látszik, ha van src (üres src-t elrejtjük) */
.gal-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.gal-tile img:not([src]),
.gal-tile img[src=""]{display:none}
.gal-tile figcaption{font-size:10px;letter-spacing:0.16em;color:var(--faint)}
/* Ha a tile-on van kép, a "KÉP" felirat eltűnik, és kattintható (lightbox) */
.gal-tile.filled figcaption{display:none}
.gal-tile.filled{cursor:pointer}
.gal-tile.filled:hover img{transform:scale(1.05)}
/* Hover overlay + „nagyítás" ikon — jelzi, hogy a kép kattintható (lightbox) */
.gal-tile.filled::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:rgba(13,15,18,0) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ECEEF1'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='11'%20cy='11'%20r='8'/%3E%3Cline%20x1='21'%20y1='21'%20x2='16.65'%20y2='16.65'/%3E%3Cline%20x1='11'%20y1='8'%20x2='11'%20y2='14'/%3E%3Cline%20x1='8'%20y1='11'%20x2='14'%20y2='11'/%3E%3C/svg%3E") center / 30px no-repeat;
  transition:opacity .3s ease, background-color .3s ease;
}
.gal-tile.filled:hover::after{opacity:1;background-color:rgba(13,15,18,0.38)}

/* Lightbox — teljes képernyős nagyítás */
.lightbox{
  position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  background:rgba(8,9,11,0.93);padding:clamp(16px,4vw,48px);
}
.lightbox.open{display:flex}
.lb-img{max-width:90vw;max-height:88vh;border-radius:8px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox button{
  position:absolute;background:none;border:0;color:var(--text);cursor:pointer;
  opacity:.7;transition:opacity .2s;line-height:1;
}
.lightbox button:hover{opacity:1}
.lb-close{top:18px;right:24px;font-size:36px}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);font-size:52px;padding:0 18px}
.lb-prev{left:6px}
.lb-next{right:6px}
/* Galéria reszponzív: tableten 2 oszlop uniform (mozaik-spans visszavonva), mobilon 1 oszlop */
@media(max-width:900px){
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:clamp(140px,30vw,210px)}
  .gal-tile{grid-column:auto !important;grid-row:auto !important}
}
/* Kis mobil: marad a 2 oszlop (rövidebb, mint 6 egymás alatt), tömörebb sorokkal */
@media(max-width:560px){ .gal{gap:10px;grid-auto-rows:clamp(120px,38vw,168px)} }

/* ---- Galéria al-fejlécek (Előtte/utána, Munkáink) ---- */
.gal-subhead{margin-top:clamp(36px,5vw,56px)}

/* ---- Előtte / utána — 2-oszlopos RÁCS húzható csúszkákból; sok képnél "Továbbiak" gomb ---- */
.ba-grid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)}
.ba{
  position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:12px;
  border:1px solid var(--line);background:var(--surface-2);
  --pos:50%;touch-action:pan-y;cursor:ew-resize;user-select:none;   /* pan-y: a függőleges görgetés marad */
}
/* Fade-peek: a felső sor látszik, a többi elhalványulva kandikál (alsó maszk-fade); gomb kibontja */
.ba-collapse{position:relative;overflow:hidden;transition:max-height .55s cubic-bezier(.22,.61,.36,1)}
.ba-collapse.is-clamped{
  -webkit-mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 60%,transparent 100%);
}
.ba-more-wrap{display:flex;justify-content:center;margin-top:22px}
.ba-more-wrap[hidden]{display:none}
@media(max-width:780px){ .ba-grid{grid-template-columns:1fr} }
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;-webkit-user-drag:none}
.ba .ba-after{z-index:1}
.ba .ba-before{z-index:2;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba img:not([src]),.ba img[src=""]{opacity:0}                 /* placeholder: ne legyen törött ikon */
.ba-divider{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:rgba(255,255,255,0.9);transform:translateX(-50%);z-index:3;pointer-events:none}
/* Fogantyú: kisebb korong, benne kétirányú nyíl (‹ ›) — jelzi, hogy húzható */
.ba-divider::after{
  content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:32px;height:32px;border-radius:50%;
  border:1.5px solid rgba(255,255,255,0.9);
  background:rgba(13,15,18,0.5) url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23ECEEF1'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='m10%208-4%204%204%204'/%3E%3Cpath%20d='m14%208%204%204-4%204'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  box-shadow:0 2px 8px rgba(0,0,0,0.45);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.ba-tag{position:absolute;bottom:12px;z-index:3;font-size:10px;letter-spacing:0.16em;color:var(--text);background:rgba(13,15,18,0.6);padding:4px 9px;border-radius:5px;pointer-events:none}
.ba-tag-before{left:12px}
.ba-tag-after{right:12px}
.ba-hint{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;font-size:11px;letter-spacing:0.16em;color:var(--faint);pointer-events:none;text-align:center;padding:0 12px}
.ba.filled .ba-hint{display:none}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;z-index:4;pointer-events:none}

/* ========================= RÓLUNK ========================= */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
/* A fejléc-oszlop a szekción belül fent marad, amíg a jobb oldali szöveg elgördül */
.about-head{position:sticky;top:clamp(90px,12vh,130px);align-self:start}
.about-h{font-size:clamp(26px,3.5vw,40px)}
.about p{font-size:15px;line-height:1.7;color:var(--muted);margin-bottom:18px}
/* Lead-bekezdés: nagyobb, világosabb; benne a kulcsmondat ferde accent-aláhúzással */
.about p.about-lead{font-size:clamp(18px,2vw,22px);color:var(--text);line-height:1.5;font-weight:500;margin-bottom:20px}
/* Ferde, megrajzolódó aláhúzás: kissé megdöntött vonal, ami belépéskor balról jobbra rajzolódik.
   A frázist egy sorban tartjuk, hogy a ferde vonal tiszta legyen. */
.accent-underline{position:relative;display:inline-block;white-space:nowrap}
.accent-underline::after{
  content:"";position:absolute;left:0;right:0;bottom:-5px;height:3px;border-radius:2px;
  background:var(--blue);transform-origin:left center;transform:rotate(-1.6deg) scaleX(0);
  transition:transform .8s cubic-bezier(.22,.61,.36,1) .35s;
}
.js .reveal.is-visible .accent-underline::after{transform:rotate(-1.6deg) scaleX(1)}
html:not(.js) .accent-underline::after{transform:rotate(-1.6deg) scaleX(1)}  /* JS nélkül látszik */
/* "Miért vagyunk mások?" alcím a szövegben */
.about-sub{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(17px,2vw,20px);color:var(--text);margin:26px 0 14px}
/* A 3 érték felsorolásként — monoline ikon + félkövér kezdés */
.about-list{list-style:none;display:flex;flex-direction:column;gap:16px;margin-bottom:4px}
.about-list li{display:flex;gap:12px;align-items:flex-start;font-size:15px;line-height:1.65;color:var(--muted)}
.about-list .li-ic{width:20px;height:20px;flex-shrink:0;margin-top:3px;color:var(--accent)}
.about-list strong{color:var(--text);font-weight:600}
/* Záró rész — nem doboz: felül finom vonal, a gombot függőleges vonal választja el a szövegtől */
.about-close{
  margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,4vw,44px);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:clamp(28px,5vw,56px);flex-wrap:wrap;
}
.about-close-text{
  flex:1 1 380px;font-family:'Archivo',sans-serif;font-weight:600;font-size:clamp(19px,2.2vw,26px);
  color:var(--text);line-height:1.3;letter-spacing:-0.01em;max-width:46ch;margin:0;
}
/* Finom függőleges elválasztó a gomb előtt */
.about-close-sep{display:inline-flex;padding-left:clamp(28px,5vw,56px);border-left:1px solid var(--line)}
.about-close .btn-outline{flex-shrink:0}
@media(max-width:640px){
  .about-close{flex-direction:column;align-items:flex-start}
  /* oszlop-flexnél a flex-basis MAGASSÁG lenne → nyújtaná a szöveget; tartalom-magasságra állítjuk */
  .about-close-text{flex:0 0 auto;max-width:100%}
  .about-close-sep{padding-left:0;border-left:none;padding-top:22px;border-top:1px solid var(--line);width:100%}
}

/* ========================= ELÉRHETŐSÉG ========================= */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.ci-label{font-size:11px;letter-spacing:0.18em;color:var(--muted);margin-bottom:6px}
.ci-val{font-size:18px;margin-bottom:4px}
.ci-sub{font-size:13px;color:var(--muted);margin-bottom:22px}
.contact-call{display:inline-block;margin-bottom:18px}
.note{font-size:13px;color:var(--muted);border-left:2px solid var(--accent);padding-left:14px;line-height:1.5;margin-top:8px;max-width:42ch}
/* Követés-blokk: label + Facebook-link egy szövegoszlop, mellette a QR — rendezett egység */
.follow{display:flex;align-items:center;gap:18px;margin-top:28px;flex-wrap:wrap}
.follow-text{display:flex;flex-direction:column;gap:8px}
.follow-text .ci-label{margin-bottom:0}
.social-link{display:inline-flex;align-items:center;gap:9px;color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s}
.social-link:hover{color:var(--accent)}
.social-icon{width:20px;height:20px;flex-shrink:0}
/* Kis QR a Facebook-oldalhoz — modern, lekerekített fehér csempe (csak desktopon) */
.fb-qr{
  display:inline-flex;padding:5px;background:#fff;border-radius:8px;line-height:0;
  box-shadow:0 4px 12px rgba(0,0,0,0.28);transition:transform .2s, box-shadow .2s;
}
.fb-qr:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,0.36)}
.fb-qr img{width:52px;height:52px;display:block;border-radius:3px}

/* Beágyazott térkép */
.map-embed{
  aspect-ratio:16/11;background:var(--surface-2);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;
}
.map-embed iframe{width:100%;height:100%;border:0;display:block;filter:grayscale(0.2)}

/* ========================= FOOTER (teljes szélességű sáv) ========================= */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:clamp(40px,4.5vw,60px) 0 26px}
.foot-main{display:grid;grid-template-columns:1.5fr 0.8fr 1fr 1.5fr;gap:clamp(24px,3.5vw,52px);align-items:start}
/* Impresszum 4. oszlop — fine-print */
.foot-imp{gap:8px}
.foot-imp-line{font-size:13px;color:var(--faint);line-height:1.6;max-width:34ch}
.foot-imp-line strong{color:var(--muted);font-weight:600}
.foot-brand .brand{margin-bottom:16px}
/* "by Bronx" a cégnév-sor mellett (a header-rel megegyező .brand-by stílus érvényes) */
.foot-tagline{font-size:14px;color:var(--muted);line-height:1.6;max-width:34ch;margin-bottom:16px}
.foot-social{display:inline-flex;align-items:center;gap:9px;color:var(--muted);text-decoration:none;font-size:14px;transition:color .2s}
.foot-social:hover{color:var(--accent)}
.foot-social svg{width:20px;height:20px}
.foot-col{display:flex;flex-direction:column;align-items:flex-start;gap:11px;text-align:left}
.foot-col-title{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.foot-col a{color:var(--muted);text-decoration:none;font-size:14px;width:fit-content;transition:color .2s}
.foot-col a:hover{color:var(--text)}
.foot-addr{font-size:14px;color:var(--muted)}
.foot-col .foot-phone{font-family:'Archivo',sans-serif;font-weight:700;font-size:18px;color:var(--accent)}
.foot-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
  margin-top:clamp(28px,3.5vw,44px);padding-top:22px;border-top:1px solid var(--line-soft);
  font-size:12px;color:var(--faint);
}
/* Adatkezelési tájékoztató — lenyitható, az Impresszum-oszlopban */
.foot-doc{font-size:13px;color:var(--faint);max-width:36ch;margin-top:6px}
.foot-doc > summary{
  cursor:pointer;color:var(--muted);list-style:none;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;transition:color .2s;
}
.foot-doc > summary::-webkit-details-marker{display:none}
.foot-doc > summary::after{content:" +";color:var(--faint)}
.foot-doc[open] > summary::after{content:" –"}
.foot-doc > summary:hover{color:var(--text)}
.foot-doc-body{margin-top:12px;line-height:1.7}
.foot-doc-body p{margin-bottom:10px}
.foot-doc-body strong{color:var(--muted);font-weight:600}
/* Személyes kredit + backlink a footer alján */
.foot-credit a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line);transition:color .2s,border-color .2s}
.foot-credit a:hover{color:var(--text);border-color:var(--accent)}
@media(max-width:780px){
  .foot-main{grid-template-columns:1fr;gap:30px}
  .foot-bottom{flex-direction:column;gap:6px}
}

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

/* Tablet: a 2 oszlopos blokkok megtartják az arányt, de kicsit szűkebb sávban */
@media(max-width:980px){
  .about{gap:32px}
  .contact{gap:28px}
}
/* 2×2 footer-oszlop CSAK tableten (781–980); mobilon a ≤780 szabály ad 1 oszlopot */
@media(min-width:781px) and (max-width:980px){
  .foot-main{grid-template-columns:1fr 1fr;gap:32px 40px}
}

/* Mobil: egy oszlop, nav-linkek elrejtve (a telefon-pill marad elsődleges CTA) */
@media(max-width:780px){
  .about,.contact{grid-template-columns:1fr}
  .about-head{position:static}   /* mobilon ne ragadjon (egy oszlop, egymás alatt) */
  .nav-links{display:none}
  .extra-row{flex-direction:column;align-items:flex-start;gap:10px}
  .extra-price{text-align:left}

  /* Full-bleed hero mobilon is teljes magasságú (svh: stabil, cím-/eszköztár nélküli magasság) */
  .hero{min-height:100vh;min-height:100svh}
  /* A kép balrább (X) és kicsit FELJEBB — NEM nagyítva: ugyanaz a méret, csak feljebb tolva
     (a kép alját elemeljük; alatta a hero sötét háttere látszik, beleolvad az alsó scrimbe) */
  .hero .hero-img{object-position:62% center;top:auto;bottom:clamp(56px,9vh,96px);height:100%}
  /* Kétvégű scrim: FELÜL (cím) és ALUL (akciók) sötét, középen világos (a kocsi látszik) */
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(13,15,18,0.80) 0%,
      rgba(13,15,18,0.34) 26%,
      rgba(13,15,18,0.30) 50%,
      rgba(13,15,18,0.92) 84%,
      var(--bg) 100%);
  }
  /* A QR csak desktopon hasznos — mobilon a link úgyis tappintható */
  .fb-qr{display:none}
  /* FELOSZTÁS: a cím (h1) felül, a slogan/helyszín/CTA-k alul; közte a kocsi */
  .hero{align-items:stretch}
  .hero-inner{display:flex;flex-direction:column}
  .hero-content{
    display:flex;flex-direction:column;flex:1;max-width:none;margin:0;
    padding-top:clamp(120px,19vh,170px);     /* a cím lejjebb, a fix header alatt levegővel */
    padding-bottom:clamp(26px,6vh,52px);
  }
  .hero-content .slogan{margin-top:auto}    /* a slogan + helyszín + CTA-k leúsznak az aljára */
  /* A tartalom a hero alján ül → a görgetés-jel ütközne, ezért elrejtjük */
  .hero-scroll{display:none}
}

/* Kis mobil: ne lógjon szét a nav */
@media(max-width:380px){
  .brand-logo{height:30px}
}

/* ============ MOBIL UX (≤780px): fix frosted header + hamburger menü,
   alsó ragadós hívás-sáv, Csomagok swipe, használható térkép ============ */
@media(max-width:780px){
  /* Biztonsági: semmilyen elem ne okozzon oldal-szintű vízszintes görgetést.
     A gyökéren is clip kell (a body-n önmagában nem mindig vág, mert a html a görgető). */
  html,body{overflow-x:clip}

  /* Fix header — lefelé halványuló gradiens (felül sötét: logó/hamburger olvasható; lent áttetsző,
     beleolvad a hero-ba/tartalomba). Nincs tömör sáv és vonal. */
  .topbar{
    position:fixed;
    background:linear-gradient(180deg,
      rgba(13,15,18,0.92) 0%,
      rgba(13,15,18,0.55) 52%,
      rgba(13,15,18,0) 100%);
    border-bottom:0;
  }
  nav{padding:12px 0}
  .brand-logo{height:34px}
  .brand-name{font-size:16px}
  .phone-pill{display:none}          /* a hívás az alsó sávban + a menüben */

  /* Hamburger gomb (3 vonal → X) */
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;
    width:44px;height:44px;margin-right:-8px;background:none;border:0;cursor:pointer;color:var(--text)}
  .nav-toggle-box{position:relative;width:24px;height:16px}
  .nav-toggle-bar,.nav-toggle-bar::before,.nav-toggle-bar::after{
    position:absolute;left:0;width:24px;height:2px;border-radius:2px;background:currentColor;
    transition:transform .3s ease,background .2s ease}
  .nav-toggle-bar{top:7px}
  .nav-toggle-bar::before{content:"";top:-7px}
  .nav-toggle-bar::after{content:"";top:7px}
  .menu-open .nav-toggle-bar{background:transparent}
  .menu-open .nav-toggle-bar::before{transform:translateY(7px) rotate(45deg)}
  .menu-open .nav-toggle-bar::after{transform:translateY(-7px) rotate(-45deg)}

  /* Teljes képernyős menü-overlay */
  .mobile-menu{
    position:fixed;inset:0;z-index:19;display:flex;flex-direction:column;justify-content:space-between;
    padding:calc(80px + env(safe-area-inset-top)) clamp(24px,7vw,40px) calc(28px + env(safe-area-inset-bottom));
    background:rgba(13,15,18,0.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .menu-open .mobile-menu{opacity:1;pointer-events:auto}
  .menu-open .mobile-callbar{display:none}   /* nyitott menünél a menü saját hívás-gombja a CTA */

  /* Ritkított nagybetűs linkek, finom sorelválasztókkal + lépcsőzött belépő */
  .mm-links{list-style:none;display:block;width:100%;margin:auto 0;
    border-top:1px solid var(--line-soft)}
  .mm-links a{display:block;text-align:left;text-decoration:none;color:var(--text);
    font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:16px;
    letter-spacing:0.2em;text-transform:uppercase;
    padding:20px 2px;border-bottom:1px solid var(--line-soft);transition:color .2s}
  .mm-links a:active{color:var(--accent)}
  .mm-links li{opacity:0;transform:translateY(16px);
    transition:opacity .45s ease, transform .45s cubic-bezier(.22,.61,.36,1)}
  .menu-open .mm-links li{opacity:1;transform:none}
  .menu-open .mm-links li:nth-child(1){transition-delay:.10s}
  .menu-open .mm-links li:nth-child(2){transition-delay:.16s}
  .menu-open .mm-links li:nth-child(3){transition-delay:.22s}
  .menu-open .mm-links li:nth-child(4){transition-delay:.28s}
  .menu-open .mm-links li:nth-child(5){transition-delay:.34s}

  /* Lenti kapcsolat-blokk */
  .mm-foot{border-top:1px solid var(--line);padding-top:22px;display:flex;flex-direction:column;gap:14px}
  .mm-call{display:inline-flex;align-items:center;justify-content:center;gap:10px;
    background:var(--accent);color:var(--bg);border-radius:100px;padding:15px 20px;text-decoration:none;
    font-family:'Archivo',sans-serif;font-weight:700;font-size:18px}
  .mm-call svg{width:19px;height:19px}
  .mm-meta{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--muted)}
  .mm-meta a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}

  /* Lebegő „Hívj most" pill — különálló, elemelt; a hero fölött rejtve, görgetésre úszik fel */
  .mobile-callbar{
    display:inline-flex;align-items:center;gap:9px;
    position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom));z-index:90;
    transform:translateX(-50%) translateY(18px);
    background:var(--accent);color:var(--bg);
    font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;text-decoration:none;
    padding:14px 26px;border-radius:100px;box-shadow:0 12px 30px rgba(0,0,0,0.45);
    opacity:0;pointer-events:none;
    transition:opacity .3s ease, transform .35s cubic-bezier(.22,.61,.36,1);
  }
  .callbar-show .mobile-callbar{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
  .menu-open .mobile-callbar{display:none}
  .mobile-callbar svg{width:19px;height:19px}
  .site-footer{padding-bottom:calc(92px + env(safe-area-inset-bottom))}   /* a pill ne takarja a kreditet */
  section[id]{scroll-margin-top:64px}    /* a fix header miatt az ugrás ne csússzon alá */

  /* Hero: redundáns telefonsor el (a padding-bottom-ot a felosztás-blokk adja) */
  .hero-phone{display:none}

  /* Csomagok: vízszintes swipe (scroll-snap), a következő kártya kikukucskál */
  .pkgs-hint{display:block;font-size:12px;letter-spacing:0.04em;color:var(--faint);
    margin-top:18px;margin-bottom:-8px;text-align:center}
  .pkgs{
    display:flex;gap:14px;margin-top:18px;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(-1*clamp(20px,4vw,40px));margin-right:calc(-1*clamp(20px,4vw,40px));
    padding:4px clamp(20px,4vw,40px) 8px;scroll-padding:0 clamp(20px,4vw,40px);
  }
  .pkgs::-webkit-scrollbar{display:none}
  .pkgs .card{flex:0 0 84%;scroll-snap-align:center}

  /* Elérhetőség: a térkép NE az aspect-ratióból számolja a szélességet (keskeny telefonon kilógna),
     hanem fix magasság + teljes szélesség → mindig befér */
  .map-embed{aspect-ratio:auto;width:100%;max-width:100%;height:300px;min-height:0}
}

/* ============ SCROLL-REVEAL + BELÉPŐ ANIMÁCIÓK (csak .js mellett) ============ */
/* Rejtett kezdőállapot */
.js .reveal .sec-tag, .js .reveal .sec-h, .js .reveal .sec-lead, .js .reveal .sub-h,
.js .reveal .disclaimer, .js .reveal .card, .js .reveal .extra-row, .js .reveal .gal-subhead,
.js .reveal .ba, .js .reveal .gal-tile, .js .reveal .about > div, .js .reveal .usp,
.js .reveal .contact > div, .js .reveal .foot-main > *, .js .reveal .foot-bottom{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1);
}
/* a térkép jobbról csúszik be — CSAK desktopon (mobilon a vízszintes eltolás kilógna,
   ezért ott a sima translateY-os belépő marad) */
@media(min-width:781px){
  .js .reveal .contact > .map-embed{transform:translateX(28px)}
}
/* Látható állapot (a plusz .is-visible specificitása felülírja a rejtettet) */
.js .reveal.is-visible .sec-tag, .js .reveal.is-visible .sec-h, .js .reveal.is-visible .sec-lead,
.js .reveal.is-visible .sub-h, .js .reveal.is-visible .disclaimer, .js .reveal.is-visible .card,
.js .reveal.is-visible .extra-row, .js .reveal.is-visible .gal-subhead, .js .reveal.is-visible .ba,
.js .reveal.is-visible .gal-tile, .js .reveal.is-visible .about > div, .js .reveal.is-visible .usp,
.js .reveal.is-visible .contact > div, .js .reveal.is-visible .foot-main > *, .js .reveal.is-visible .foot-bottom{
  opacity:1;transform:none;
}
/* A záró CTA SAJÁT trigger-rel animál (a szekció alján van, külön figyeljük, hogy a képernyőre
   érkezéskor játszódjon le, ne korábban a szekció-szintű reveal-lel) */
.js .about-close.reveal{
  opacity:0;transform:translateY(22px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
.js .about-close.reveal.is-visible{opacity:1;transform:none}
/* Lépcsőzés (stagger) */
.js .reveal.is-visible .sec-h{transition-delay:.06s}
.js .reveal.is-visible .sec-lead{transition-delay:.12s}
.js .reveal.is-visible .pkgs .card{transition-delay:.14s}
.js .reveal.is-visible .pkgs .card:nth-child(2){transition-delay:.22s}
.js .reveal.is-visible .pkgs .card:nth-child(3){transition-delay:.30s}
.js .reveal.is-visible .pkgs .card:nth-child(4){transition-delay:.38s}
.js .reveal.is-visible .extra-row{transition-delay:.14s}
.js .reveal.is-visible .extra-row:nth-child(2){transition-delay:.22s}
.js .reveal.is-visible .extra-row:nth-child(3){transition-delay:.30s}
.js .reveal.is-visible .ba{transition-delay:.14s}
.js .reveal.is-visible .ba-grid .ba:nth-child(2){transition-delay:.22s}
.js .reveal.is-visible .gal .gal-tile:nth-child(2){transition-delay:.06s}
.js .reveal.is-visible .gal .gal-tile:nth-child(3){transition-delay:.12s}
.js .reveal.is-visible .gal .gal-tile:nth-child(4){transition-delay:.18s}
.js .reveal.is-visible .gal .gal-tile:nth-child(5){transition-delay:.24s}
.js .reveal.is-visible .gal .gal-tile:nth-child(6){transition-delay:.30s}
.js .reveal.is-visible .about > div:nth-child(2){transition-delay:.10s}
.js .reveal.is-visible .usps .usp:nth-child(2){transition-delay:.10s}
.js .reveal.is-visible .usps .usp:nth-child(3){transition-delay:.20s}
.js .reveal.is-visible .contact > div:nth-child(2){transition-delay:.10s}
.js .reveal.is-visible .foot-main > *:nth-child(2){transition-delay:.08s}
.js .reveal.is-visible .foot-main > *:nth-child(3){transition-delay:.16s}
.js .reveal.is-visible .foot-bottom{transition-delay:.24s}

/* Hero belépő (betöltéskor) */
.js .hero-content > *{opacity:0;transform:translateY(20px);
  transition:opacity .65s cubic-bezier(.22,.61,.36,1), transform .65s cubic-bezier(.22,.61,.36,1)}
.js body.hero-in .hero-content > *{opacity:1;transform:none}
.js body.hero-in .hero-content > .slogan{transition-delay:.10s}
.js body.hero-in .hero-content > .hero-loc{transition-delay:.20s}
.js body.hero-in .hero-content > .ctas{transition-delay:.30s}
/* Hero háttér: lassú Ken Burns ráközelítés (egyszer) */
.js .hero-img{animation:heroKen 9s ease-out both}
@keyframes heroKen{from{transform:scale(1.08)}to{transform:scale(1)}}

/* Kártya hover-lift */
.card{transition:transform .25s ease, border-color .25s ease}
.card:hover{transform:translateY(-4px);border-color:var(--accent-dim)}
.card.feat:hover{border-color:var(--blue)}

/* Előtte/utána belépő „sweep" (csak a sweep alatt van átmenet — húzáskor azonnali) */
.ba.sweeping .ba-before{transition:clip-path .45s ease}
.ba.sweeping .ba-divider{transition:left .45s ease}

/* Lightbox belépő */
.lightbox.open{animation:lbFade .2s ease}
.lightbox.open .lb-img{animation:lbZoom .28s cubic-bezier(.22,.61,.36,1)}
@keyframes lbFade{from{opacity:0}to{opacity:1}}
@keyframes lbZoom{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}

/* Mozgáscsökkentés kérése esetén minden animáció/átmenet ki, tartalom azonnal látható */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none !important;animation:none !important}
}