/* =====================================================================
   Lőrincz Benjámin Ev. — Ács · Tetőfedő · Bádogos · Generálkivitelezés
   Színvilág: antracit/grafit + réz/bronz (a logóból vezetve), krém alap.
   Font: Sora (headline) + Inter (body) — Google Fonts.
   Mobile-first, vanilla CSS. Könnyen bővíthető / szerkeszthető.
   ===================================================================== */

/* ------------------------------ Tokens ------------------------------ */
:root {
  /* sötét tónusok */
  --ink:            #12181d;
  --anthracite:     #1c242b;
  --anthracite-2:   #26313a;
  --surface-dark:   #232e37;

  /* réz / bronz akcent */
  --copper:         #c17a45;
  --copper-2:       #dd9c63;   /* rose-gold highlight */
  --copper-deep:    #9a5e30;
  --copper-soft:    rgba(193,122,69,.14);
  --copper-line:    rgba(193,122,69,.30);

  /* világos tónusok */
  --cream:          #f6f2ea;
  --cream-2:        #efe7da;
  --paper:          #ffffff;

  /* szöveg */
  --text:           #1e262c;
  --text-soft:      #4c5760;
  --muted:          #79838d;
  --on-dark:        #eef1f3;
  --on-dark-soft:   #aeb8c0;

  /* vonalak */
  --line:           #e6ddce;
  --line-dark:      rgba(255,255,255,.10);

  /* forma */
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 100px;

  /* árnyék */
  --sh-sm: 0 4px 14px rgba(18,24,29,.06);
  --sh:    0 20px 44px -20px rgba(18,24,29,.30);
  --sh-lg: 0 34px 80px -30px rgba(18,24,29,.48);
  --sh-copper: 0 22px 50px -22px rgba(154,94,48,.55);

  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 40px);
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-head: 'Sora', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
}

/* ------------------------------ Reset ------------------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
}
body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--cream);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg,video { display:block; max-width:100%; }
img { height:auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border:0; background:none; color:inherit; }
input,select,textarea { font: inherit; color: inherit; }
ul { list-style: none; padding:0; }
h1,h2,h3,h4 { font-family: var(--font-head); font-weight:700; line-height:1.12; letter-spacing:-.02em; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; border-radius: 4px; }
.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ------------------------------ Layout ------------------------------ */
.container { width:100%; max-width: var(--maxw); margin-inline:auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 6vw, 90px); position: relative; }
.section--tight { padding-block: clamp(44px, 4.5vw, 66px); }
.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-dark { background: var(--anthracite); color: var(--on-dark); }
.bg-paper { background: var(--paper); }

/* finom rácstextúra a világos szekciókhoz */
.grid-tex { position: relative; }
.grid-tex::before {
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(154,94,48,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(154,94,48,.05) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
}

/* ------------------------------ Typo utils ------------------------- */
.eyebrow {
  display:inline-flex; align-items:center; gap:10px;
  font-family: var(--font-head); font-weight:600;
  font-size:.78rem; letter-spacing:.16em; text-transform:uppercase;
  color: var(--copper-deep);
}
.bg-dark .eyebrow { color: var(--copper-2); }
.eyebrow::before {
  content:""; width:26px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--copper), var(--copper-2));
}
.eyebrow--center::after {
  content:""; width:26px; height:2px; border-radius:2px;
  background: linear-gradient(90deg, var(--copper-2), var(--copper));
}
.h-xl { font-size: clamp(2.15rem, 6vw, 4rem); }
.h-lg { font-size: clamp(1.9rem, 4.6vw, 3rem); }
.h-md { font-size: clamp(1.4rem, 3vw, 2rem); }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--text-soft); }
.bg-dark .lead { color: var(--on-dark-soft); }
.copper { color: var(--copper); }
.bg-dark .copper { color: var(--copper-2); }

.section-head { max-width: 720px; }
.section-head--center { margin-inline:auto; text-align:center; }
.section-head p { margin-top: 18px; }
.section-head .eyebrow { margin-bottom: 18px; }

/* ------------------------------ Buttons ----------------------------- */
.btn {
  --btn-fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family: var(--font-head); font-weight:600; font-size:.98rem;
  padding: 15px 26px; border-radius: var(--r-pill);
  position: relative; isolation:isolate;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
  will-change: transform;
}
.btn svg { width:18px; height:18px; }
.btn--primary {
  color:#fff;
  background: linear-gradient(135deg, var(--copper) 0%, var(--copper-deep) 100%);
  box-shadow: var(--sh-copper);
}
.btn--primary:hover { transform: translateY(-3px); box-shadow: 0 28px 60px -20px rgba(154,94,48,.7); }
.btn--ghost {
  color: var(--on-dark); background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.22); backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.14); transform: translateY(-3px); border-color: var(--copper-2); }
.btn--dark {
  color:#fff; background: var(--anthracite); border:1px solid var(--anthracite);
  box-shadow: var(--sh);
}
.btn--dark:hover { transform: translateY(-3px); background:#000; }
.btn--outline {
  color: var(--text); background: transparent; border:1.5px solid var(--line);
}
.btn--outline:hover { border-color: var(--copper); color: var(--copper-deep); transform: translateY(-3px); }
.btn--block { width:100%; }
.btn--lg { padding: 18px 30px; font-size:1.02rem; }

/* nyíl mikroanimáció */
.btn .arw { transition: transform .35s var(--ease); }
.btn:hover .arw { transform: translate(3px,-3px); }

/* ============================= HEADER ============================== */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), padding .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
  padding-block: 16px;
}
.header::before { /* halvány sötétítés a hero fölött az olvashatóságért */
  content:""; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(18,24,29,.55), rgba(18,24,29,0));
  opacity:1; transition: opacity .4s var(--ease);
}
.header.scrolled {
  background: rgba(20,26,31,.82);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 10px 30px -12px rgba(0,0,0,.5);
  border-bottom-color: rgba(255,255,255,.08);
  padding-block: 10px;
}
.header.scrolled::before { opacity:0; }
.header__inner { display:flex; align-items:center; justify-content:space-between; gap:20px; }

/* logó */
.brand { display:flex; align-items:center; gap:13px; z-index:2; }
.brand__mark {
  width:52px; height:52px; flex:0 0 auto; border-radius:50%;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.4));
  transition: width .4s var(--ease), height .4s var(--ease);
}
.header.scrolled .brand__mark { width:46px; height:46px; }
.brand__text { display:flex; flex-direction:column; line-height:1.05; }
.brand__name { font-family: var(--font-head); font-weight:700; font-size:1.05rem; color:#fff; letter-spacing:-.01em; }
.brand__sub { font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color: var(--copper-2); font-weight:600; }

/* desktop nav */
.nav { display:none; align-items:center; gap: clamp(12px, 1.4vw, 24px); }
.nav a { color: rgba(255,255,255,.82); font-weight:500; font-size:.92rem; position:relative; padding-block:6px; white-space:nowrap; transition: color .25s var(--ease); }
.nav a::after {
  content:""; position:absolute; left:0; bottom:0; height:2px; width:0; border-radius:2px;
  background: linear-gradient(90deg,var(--copper),var(--copper-2)); transition: width .3s var(--ease);
}
.nav a:hover { color:#fff; }
.nav a:hover::after { width:100%; }

.header__actions { display:flex; align-items:center; gap:14px; }
.callbtn {
  display:none; align-items:center; gap:11px; padding:10px 18px 10px 12px;
  border-radius: var(--r-pill); background: linear-gradient(135deg,var(--copper),var(--copper-deep));
  color:#fff; font-family:var(--font-head); font-weight:600;
  box-shadow: var(--sh-copper); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.callbtn:hover { transform: translateY(-2px); box-shadow: 0 26px 54px -20px rgba(154,94,48,.7); }
.callbtn__ic { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background: rgba(255,255,255,.18); }
.callbtn__ic svg { width:17px; height:17px; }
.callbtn small { display:block; font-size:.66rem; font-weight:500; opacity:.85; letter-spacing:.04em; }
.callbtn span b { font-size:.98rem; letter-spacing:.01em; }

/* hamburger */
.burger {
  width:46px; height:46px; display:grid; place-items:center; z-index:2;
  border-radius: 12px; background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(6px);
}
.burger span { display:block; width:22px; height:2px; background:#fff; border-radius:2px; transition: transform .35s var(--ease), opacity .25s var(--ease); }
.burger span + span { margin-top:5px; }
body.menu-open .burger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
body.menu-open .burger span:nth-child(2){ opacity:0; }
body.menu-open .burger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

/* mobil menü — oldalról becsúszó, teljes magasság */
.mobile-menu {
  position: fixed; inset:0; z-index:99;
  background: linear-gradient(160deg, var(--anthracite) 0%, var(--ink) 100%);
  display:flex; flex-direction:column; justify-content:center;
  padding: 96px var(--gutter) 40px;
  transform: translateX(100%);
  /* záráskor a visibility csak a csúszás UTÁN vált hidden-re (0s delay .5s),
     így bezárásnál is látszik a visszatolódás animáció */
  transition: transform .5s var(--ease), visibility 0s linear .5s;
  visibility:hidden;
}
body.menu-open .mobile-menu { transition: transform .5s var(--ease), visibility 0s linear 0s; }
.mobile-menu::after { /* halvány réz dekor */
  content:""; position:absolute; right:-60px; bottom:-60px; width:260px; height:260px; border-radius:50%;
  background: radial-gradient(circle, var(--copper-soft), transparent 70%);
}
body.menu-open .mobile-menu { transform: translateX(0); visibility:visible; }
.mobile-menu nav { display:flex; flex-direction:column; gap:6px; }
.mobile-menu nav a {
  font-family: var(--font-head); font-weight:600; font-size:1.6rem; color:#fff;
  padding-block:12px; border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:center; justify-content:space-between;
  opacity:0; transform: translateX(24px);
}
.mobile-menu nav a .idx { font-size:.8rem; color: var(--copper-2); font-family:var(--font-body); }
body.menu-open .mobile-menu nav a { animation: slideIn .5s var(--ease) forwards; }
body.menu-open .mobile-menu nav a:nth-child(1){ animation-delay:.12s; }
body.menu-open .mobile-menu nav a:nth-child(2){ animation-delay:.18s; }
body.menu-open .mobile-menu nav a:nth-child(3){ animation-delay:.24s; }
body.menu-open .mobile-menu nav a:nth-child(4){ animation-delay:.30s; }
body.menu-open .mobile-menu nav a:nth-child(5){ animation-delay:.36s; }
body.menu-open .mobile-menu nav a:nth-child(6){ animation-delay:.42s; }
@keyframes slideIn { to { opacity:1; transform: translateX(0); } }
.mobile-menu .callbtn { display:flex; margin-top:34px; align-self:flex-start; font-size:1.05rem; padding:14px 24px 14px 14px; }
.mobile-menu .callbtn span b { font-size:1.12rem; }
.mobile-menu__meta { margin-top:22px; color: var(--on-dark-soft); font-size:.9rem; display:flex; flex-direction:column; gap:6px; }
.mobile-menu__meta a { color: var(--on-dark-soft); }

/* ============================= HERO =============================== */
.hero { position:relative; min-height: 100svh; display:flex; align-items:center; color:#fff; overflow:hidden; }
.hero__bg { position:absolute; inset:0; z-index:-2; }
.hero__bg img { width:100%; height:100%; object-fit:cover; object-position:center 40%; }
.hero__bg::after {
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(105deg, rgba(18,24,29,.92) 0%, rgba(18,24,29,.72) 42%, rgba(18,24,29,.30) 75%, rgba(18,24,29,.55) 100%),
    linear-gradient(0deg, rgba(18,24,29,.85) 0%, transparent 34%);
}
.hero__deco { /* finom tetőcserép/chevron SVG dekor */
  position:absolute; right:-4%; top:12%; width:min(46vw,560px); z-index:-1; color: var(--copper-2); opacity:.16;
  pointer-events:none;
}
/* a hero tartalom a header tartalmával azonos szélességű (teljes .container),
   nincs külön szűkítő max-width — így a jobb széle a headerével egy vonalban van */
.hero__inner { padding-top: 112px; padding-bottom: 52px; }
.hero .eyebrow { color: var(--copper-2); margin-bottom:22px; }
.hero .eyebrow::before { background: linear-gradient(90deg,var(--copper-2),transparent); }
.hero h1 { font-size: clamp(2.35rem, 6.4vw, 4.4rem); margin-bottom: 22px; }
.hero h1 .accent {
  background: linear-gradient(120deg, var(--copper-2), var(--copper));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero__sub { font-size: clamp(1.05rem, 1.7vw, 1.28rem); color: rgba(255,255,255,.86); max-width: 620px; margin-bottom: 34px; }
.hero__cta { display:flex; flex-wrap:wrap; gap:14px; }
.hero__trust {
  display:flex; flex-wrap:wrap; gap: 14px 28px; margin-top: 40px; padding-top:30px;
  border-top:1px solid rgba(255,255,255,.14);
}
.hero__trust li { display:flex; align-items:center; gap:10px; font-size:.94rem; color: rgba(255,255,255,.9); font-weight:500; }
.hero__trust svg { width:20px; height:20px; color: var(--copper-2); flex:0 0 auto; }
.scroll-cue {
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  display:none; flex-direction:column; align-items:center; gap:8px; color:rgba(255,255,255,.6); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
}
.scroll-cue .mouse { width:24px; height:38px; border:2px solid rgba(255,255,255,.4); border-radius:14px; position:relative; }
.scroll-cue .mouse::after { content:""; position:absolute; left:50%; top:7px; width:3px; height:7px; border-radius:3px; background:#fff; transform:translateX(-50%); animation: scrollDot 1.6s infinite; }
@keyframes scrollDot { 0%{opacity:0;transform:translate(-50%,0)} 40%{opacity:1} 80%{opacity:0;transform:translate(-50%,10px)} }

/* ====================== ELŐNYÖK MARQUEE ======================= */
.marquee-band {
  background: var(--anthracite); overflow:hidden;
  border-top:1px solid rgba(255,255,255,.07); border-bottom:1px solid rgba(255,255,255,.07);
  padding-block: 18px;
}
.marquee {
  overflow:hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee__track {
  display:flex; align-items:center; gap:14px; width:max-content;
  animation: marquee 38s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
.chip {
  display:inline-flex; align-items:center; gap:10px; white-space:nowrap;
  padding:11px 20px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.11);
  color: var(--on-dark); font-family: var(--font-head); font-weight:600; font-size:.95rem;
}
.chip svg { width:20px; height:20px; color: var(--copper-2); flex:0 0 auto; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap:wrap; justify-content:center; width:auto; }
  .marquee { -webkit-mask-image:none; mask-image:none; }
}

/* ========================= MIÉRT ÉN ============================== */
.about__grid { display:grid; gap: 44px; align-items:center; }
.about__media { position:relative; }
.about__media img { width:100%; border-radius: var(--r-lg); box-shadow: var(--sh-lg); aspect-ratio: 4/5; object-fit:cover; }
.about__frame { position:absolute; inset:-14px; border:1.5px solid var(--copper-line); border-radius: calc(var(--r-lg) + 10px); z-index:-1; }
.about__badge {
  position:absolute; left:-6px; bottom:26px; background: linear-gradient(135deg,var(--copper),var(--copper-deep));
  color:#fff; padding:18px 22px; border-radius: var(--r); box-shadow: var(--sh-copper); max-width:190px;
}
.about__badge b { font-family:var(--font-head); font-size:2rem; display:block; line-height:1; }
.about__badge span { font-size:.82rem; opacity:.92; }
.about__body p + p { margin-top:16px; }
.about__body .lead { margin-top:20px; }
/* kisebb cím, hogy desktopon 2 sorba férjen */
.about__title { font-size: clamp(1.7rem, 3.6vw, 2.1rem); }
.feature-grid { display:grid; grid-template-columns:1fr; gap:14px; margin-top:34px; }
.feature {
  display:flex; gap:15px; padding:18px; border-radius: var(--r);
  background: var(--paper); border:1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.feature:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: var(--copper-line); }
.feature__ic { flex:0 0 auto; width:48px; height:48px; border-radius:14px; display:grid; place-items:center;
  background: var(--copper-soft); color: var(--copper-deep); }
.feature__ic svg { width:26px; height:26px; }
.feature h4 { font-size:1.02rem; margin-bottom:3px; }
.feature p { font-size:.9rem; color: var(--muted); line-height:1.5; }
.about__actions { margin-top:34px; display:flex; flex-wrap:wrap; align-items:center; gap:20px; }

/* minőség-checklist (a Minőség szekcióhoz) */
.checklist { margin-top:28px; display:flex; flex-direction:column; gap:16px; }
.checklist li { display:flex; gap:14px; align-items:flex-start; }
.checklist__ic { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background: var(--copper-soft); color: var(--copper-deep); margin-top:1px; }
.checklist__ic svg { width:16px; height:16px; }
.checklist b { font-family: var(--font-head); font-weight:600; font-size:1.02rem; display:block; }
.checklist span { color: var(--muted); font-size:.92rem; line-height:1.5; }

/* ========================= SZOLGÁLTATÁSOK ======================== */
.services__grid { display:grid; grid-template-columns:1fr; gap:20px; margin-top: 40px; }
.svc {
  position:relative; padding: 34px 30px; border-radius: var(--r-lg); overflow:hidden;
  background: var(--surface-dark); border:1px solid rgba(255,255,255,.08);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.svc::before {
  content:""; position:absolute; inset:0; z-index:0; opacity:0;
  background: radial-gradient(120% 90% at 100% 0%, var(--copper-soft), transparent 60%);
  transition: opacity .4s var(--ease);
}
.svc:hover { transform: translateY(-8px); border-color: var(--copper-line); box-shadow: var(--sh-lg); }
.svc:hover::before { opacity:1; }
.svc > * { position:relative; z-index:1; }
.svc__num { position:absolute; top:22px; right:26px; font-family:var(--font-head); font-weight:700; font-size:2.6rem; color: rgba(255,255,255,.06); z-index:0; }
.svc__ic {
  width:64px; height:64px; border-radius:18px; display:grid; place-items:center; margin-bottom:22px;
  background: linear-gradient(135deg, rgba(221,156,99,.18), rgba(193,122,69,.08));
  border:1px solid var(--copper-line); color: var(--copper-2);
  transition: transform .4s var(--ease);
}
.svc:hover .svc__ic { transform: translateY(-3px) rotate(-4deg); }
.svc__ic svg { width:34px; height:34px; }
.svc h3 { font-size:1.28rem; color:#fff; margin-bottom:12px; }
.svc p { color: var(--on-dark-soft); font-size:.96rem; }
.svc__link { display:inline-flex; align-items:center; gap:8px; margin-top:20px; color: var(--copper-2); font-family:var(--font-head); font-weight:600; font-size:.9rem; }
.svc__link svg { width:16px; height:16px; transition: transform .3s var(--ease); }
.svc:hover .svc__link svg { transform: translate(3px,-3px); }

/* ========================= MUNKA MENETE ========================== */
.process__grid { display:grid; grid-template-columns:1fr; gap:22px; margin-top:44px; position:relative; }
.step {
  position:relative; padding: 30px 26px; border-radius: var(--r-lg);
  background: var(--paper); border:1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.step:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.step__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.step__num {
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--font-head); font-weight:700; font-size:1.1rem; color:#fff;
  background: linear-gradient(135deg,var(--copper),var(--copper-deep)); box-shadow: var(--sh-copper);
}
.step__ic { width:42px; height:42px; color: var(--copper-deep); }
.step__ic svg { width:100%; height:100%; }
.step h4 { font-size:1.12rem; margin-bottom:8px; }
.step p { font-size:.93rem; color: var(--muted); }
.step__line { display:none; }

/* ========================= REFERENCIÁK =========================== */
/* mobil: vízszintesen lapozható carousel (swipe), a következő kártya kikandikál.
   Kattintásra ugyanúgy lightbox nyílik. Tableten/desktopon rács (lentebb). */
.gallery {
  display:flex; gap:14px; margin-top:40px;
  overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
  scroll-padding-left: var(--gutter); padding-bottom:6px;
  scrollbar-width:none;
}
.gallery::-webkit-scrollbar { display:none; height:0; }
.gallery .tile { flex:0 0 84%; scroll-snap-align:center; aspect-ratio:4/3; }
/* utolsó kártya után is legyen kis levegő a görgetés végén */
.gallery::after { content:""; flex:0 0 1px; }
.tile {
  position:relative; overflow:hidden; border-radius: var(--r-lg); cursor:pointer;
  box-shadow: var(--sh-sm); background: var(--anthracite);
}
.tile img { width:100%; height:100%; object-fit:cover; transition: transform .7s var(--ease); }
.tile::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(18,24,29,.82) 0%, rgba(18,24,29,.1) 45%, transparent 70%);
  opacity:.55; transition: opacity .4s var(--ease);
}
.tile__cap {
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding: 22px;
  transform: translateY(12px); opacity:0; transition: transform .4s var(--ease), opacity .4s var(--ease);
}
.tile__cap .tag { display:inline-flex; align-items:center; gap:7px; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color: var(--copper-2); font-weight:600; margin-bottom:6px; }
.tile__cap h4 { color:#fff; font-size:1.05rem; line-height:1.25; }
.tile__zoom {
  position:absolute; top:16px; right:16px; z-index:2; width:42px; height:42px; border-radius:50%;
  background: rgba(255,255,255,.16); backdrop-filter: blur(6px); display:grid; place-items:center;
  color:#fff; transform: scale(.6); opacity:0; transition: transform .4s var(--ease), opacity .4s var(--ease), background-color .3s;
}
.tile__zoom svg { width:18px; height:18px; }
.tile:hover img { transform: scale(1.08); }
.tile:hover::after { opacity:.9; }
.tile:hover .tile__cap { transform: translateY(0); opacity:1; }
.tile:hover .tile__zoom { transform: scale(1); opacity:1; }
.tile:hover .tile__zoom:hover { background: var(--copper); }
/* "+X kép" overlay a jobb alsó csempén — alapból (mobil/tablet) rejtve, csak a
   desktop masonry rácson jelenik meg (ott vannak elrejtve az extra csempék). */
.tile__more { display:none; }
.tile--extra { }

/* lightbox */
.lightbox {
  position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding: 20px;
  background: rgba(12,16,20,.92); backdrop-filter: blur(8px);
  opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.open { opacity:1; visibility:visible; }
.lightbox__img { max-width: min(94vw, 1100px); max-height: 82vh; border-radius: var(--r); box-shadow: var(--sh-lg);
  transform: scale(.94); transition: transform .35s var(--ease); }
.lightbox.open .lightbox__img { transform: scale(1); }
.lightbox__cap { color:#fff; text-align:center; margin-top:16px; font-family:var(--font-head); font-weight:600; }
.lb-btn { position:absolute; top:50%; transform:translateY(-50%); width:54px; height:54px; border-radius:50%;
  background: rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; transition: background-color .3s, transform .3s; }
.lb-btn:hover { background: var(--copper); }
.lb-prev { left: max(16px, 3vw); } .lb-next { right: max(16px, 3vw); }
.lb-close { position:absolute; top:22px; right:22px; width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2); color:#fff; display:grid; place-items:center; transition: background-color .3s, transform .3s; }
.lb-close:hover { background: var(--copper); transform: rotate(90deg); }
.lb-btn svg,.lb-close svg { width:22px; height:22px; }

/* ========================= KAPCSOLAT ============================= */
.contact__grid { display:grid; grid-template-columns:1fr; gap:34px; }
/* mobil overflow-fix: a grid-elemek ne feszüljenek szélesebbre a konténernél
   (hosszú, nem törhető e-mail cím miatt csúszott jobbra minden mobilon) */
.contact__grid > * { min-width: 0; }
.contact__aside { position:relative; }
.contact__media { position:relative; border-radius: var(--r-lg); overflow:hidden; box-shadow: var(--sh); }
.contact__media img { width:100%; height:100%; object-fit:cover; aspect-ratio: 4/3; }
.contact__media::after { content:""; position:absolute; inset:0; background: linear-gradient(160deg, transparent 40%, rgba(18,24,29,.55)); }
.contact-cards { display:grid; gap:14px; margin-top:20px; }
.ccard {
  display:flex; align-items:center; gap:15px; padding:18px 20px; border-radius: var(--r);
  background: var(--paper); border:1px solid var(--line); box-shadow: var(--sh-sm);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  color: var(--text); /* fehér kártya sötét szekcióban — sötét szöveg kell */
}
.ccard:hover { transform: translateX(4px); border-color: var(--copper-line); }
.ccard__ic { width:46px; height:46px; flex:0 0 auto; border-radius:13px; display:grid; place-items:center; background: var(--copper-soft); color: var(--copper-deep); }
.ccard__ic svg { width:22px; height:22px; }
.ccard span { min-width: 0; }
.ccard small { display:block; color: var(--muted); font-size:.78rem; letter-spacing:.04em; text-transform:uppercase; }
.ccard b { font-family:var(--font-head); font-size:1.02rem; overflow-wrap: anywhere; }

/* form */
.form-wrap {
  background: var(--paper); border:1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(24px, 4vw, 40px); box-shadow: var(--sh);
  color: var(--text); /* a form fehér kártyán van, sötét szekción belül — kell a sötét szövegszín */
}
.form-wrap h3 { font-size:1.5rem; margin-bottom:6px; }
.form-wrap > p { color: var(--muted); margin-bottom:26px; font-size:.95rem; }
.field { margin-bottom:18px; }
.field label { display:block; font-family:var(--font-head); font-weight:600; font-size:.86rem; margin-bottom:8px; }
.field label .req { color: var(--copper); }
.control {
  width:100%; padding: 14px 16px; font-size:16px; /* iOS zoom-fix: min 16px */
  background: var(--cream); border:1.5px solid var(--line); border-radius: var(--r-sm);
  color: var(--text); transition: border-color .25s var(--ease), background-color .25s var(--ease), box-shadow .25s var(--ease);
}
.control::placeholder { color: var(--muted); opacity: 1; }
.control:focus { outline:none; border-color: var(--copper); background:#fff; box-shadow: 0 0 0 4px var(--copper-soft); }
textarea.control { resize: vertical; min-height: 118px; }
select.control { appearance:none; -webkit-appearance:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%239a5e30' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right 14px center; padding-right:44px; cursor:pointer; }
.field-row { display:grid; grid-template-columns:1fr; gap:0; }
.field.invalid .control { border-color:#d64545; background:#fdf3f3; }
.field .err { display:none; color:#d64545; font-size:.82rem; margin-top:6px; font-weight:500; }
.field.invalid .err { display:block; }

/* toggle (adatkezelés) */
.consent { display:flex; align-items:flex-start; gap:14px; margin: 8px 0 6px; padding:16px; border-radius: var(--r-sm); background: var(--cream); border:1.5px solid var(--line); transition: border-color .25s, background-color .25s; }
.toggle { position:relative; flex:0 0 auto; width:52px; height:30px; }
.toggle input { position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.toggle__track { position:absolute; inset:0; border-radius:100px; background:#cfc6b6; transition: background-color .3s var(--ease); }
.toggle__track::after { content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.25); transition: transform .3s var(--ease); }
.toggle input:checked + .toggle__track { background: linear-gradient(135deg,var(--copper),var(--copper-deep)); }
.toggle input:checked + .toggle__track::after { transform: translateX(22px); }
.toggle input:focus-visible + .toggle__track { box-shadow:0 0 0 4px var(--copper-soft); }
.consent__text { font-size:.9rem; color: var(--text-soft); line-height:1.5; }
.consent__text a { color: var(--copper-deep); font-weight:600; text-decoration: underline; text-underline-offset:2px; }
.consent__err { display:none; color:#d64545; font-size:.84rem; font-weight:600; margin-top:8px; }
.consent.show-err { border-color:#d64545; background:#fdf3f3; }
.consent.show-err .consent__err { display:block; }
.consent.shake { animation: shake .5s var(--ease); }
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-7px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
.hp { position:absolute; left:-5000px; } /* honeypot */
.form-submit { margin-top:20px; }
/* form visszajelző üzenetek (a gomb alatt): piros hiba / zöld siker */
.form-msg { display:none; margin-top:14px; padding:13px 16px; border-radius: var(--r-sm);
  font-size:.92rem; font-weight:500; text-align:center; }
.form-msg.show { display:block; }
.form-msg--error { background:#fdf3f3; border:1px solid #f0c4c4; color:#c0392b; }
.form-msg--error.show { animation: shake .5s var(--ease); }
.form-msg--error a { color:#c0392b; font-weight:700; text-decoration:underline; }
.form-msg--success { background:#edf7ee; border:1px solid #bfe0c1; color:#2e7d32; }
.form-msg--success strong { color:#256b2a; }
.form-note { font-size:.8rem; color: var(--muted); margin-top:14px; text-align:center; }

/* success modal */
.modal { position:fixed; inset:0; z-index:210; display:grid; place-items:center; padding:20px;
  background: rgba(12,16,20,.7); backdrop-filter: blur(6px); opacity:0; visibility:hidden; transition: opacity .35s var(--ease), visibility .35s; }
.modal.open { opacity:1; visibility:visible; }
.modal__card { background: var(--paper); border-radius: var(--r-lg); padding: clamp(30px,5vw,44px); max-width:440px; text-align:center; box-shadow: var(--sh-lg); transform: translateY(16px) scale(.96); transition: transform .4s var(--ease); }
.modal.open .modal__card { transform: translateY(0) scale(1); }
.modal__ic { width:80px; height:80px; margin:0 auto 22px; border-radius:50%; display:grid; place-items:center; background: var(--copper-soft); color: var(--copper-deep); }
.modal__ic svg { width:40px; height:40px; }
.modal__card h3 { font-size:1.5rem; margin-bottom:12px; }
.modal__card p { color: var(--text-soft); margin-bottom:26px; }

/* ============================== FAQ ============================== */
.faq { max-width: 820px; margin-inline:auto; margin-top:36px; display:flex; flex-direction:column; gap:14px; }
.acc { background: var(--paper); border:1px solid var(--line); border-radius: var(--r); overflow:hidden; transition: border-color .3s var(--ease), box-shadow .3s var(--ease); }
.acc.open { border-color: var(--copper-line); box-shadow: var(--sh-sm); }
.acc__q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:18px; padding: 20px 22px; text-align:left; font-family:var(--font-head); font-weight:600; font-size:1.04rem; }
.acc__q:hover { color: var(--copper-deep); }
.acc__sign { flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background: var(--copper-soft); color: var(--copper-deep); position:relative; transition: background-color .3s, color .3s; }
.acc.open .acc__sign { background: var(--copper); color:#fff; }
.acc__sign::before,.acc__sign::after { content:""; position:absolute; background: currentColor; border-radius:2px; }
.acc__sign::before { width:12px; height:2px; }
.acc__sign::after { width:2px; height:12px; transition: transform .3s var(--ease); }
.acc.open .acc__sign::after { transform: rotate(90deg) scaleX(0); }
.acc__a { max-height:0; overflow:hidden; transition: max-height .4s var(--ease); }
.acc__a p { padding: 0 22px 22px; color: var(--text-soft); font-size:.96rem; }

/* ============================= FOOTER =========================== */
.footer { background: var(--ink); color: var(--on-dark-soft); padding-top: clamp(56px,8vw,88px); position:relative; overflow:hidden; }
.footer::before { content:""; position:absolute; top:0; left:0; right:0; height:3px; background: linear-gradient(90deg, var(--copper-deep), var(--copper-2), var(--copper-deep)); }
/* mobil: a két linklista egymás mellett, az elérhetőség alattuk középen */
.footer__grid { display:grid; grid-template-columns:1fr 1fr; gap:34px 22px; padding-bottom:44px; }
.footer__about { grid-column: 1 / -1; }
.footer__col--contact { grid-column: 1 / -1; text-align:center; }
.footer__col--contact .footer__contact li { justify-content:center; }
.footer__col--contact .footer__social { justify-content:center; }
.footer__social { display:flex; gap:12px; margin-top:18px; }
.footer__social a {
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); color: var(--on-dark);
  transition: background-color .3s var(--ease), color .3s var(--ease), transform .3s var(--ease);
}
.footer__social a:hover { background: var(--copper); color:#fff; transform: translateY(-3px); border-color: var(--copper); }
.footer__social svg { width:20px; height:20px; }
.footer .brand__name { font-size:1.15rem; }
.footer__about p { margin-top:18px; font-size:.94rem; max-width:340px; }
.footer__col h5 { font-family:var(--font-head); color:#fff; font-size:1.02rem; margin-bottom:18px; }
.footer__col ul { display:flex; flex-direction:column; gap:11px; }
.footer__col a { font-size:.94rem; transition: color .25s, padding-left .25s; }
.footer__col a:hover { color: var(--copper-2); padding-left:5px; }
.footer__contact li { display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:.94rem; }
.footer__contact svg { width:19px; height:19px; color: var(--copper-2); flex:0 0 auto; margin-top:3px; }
.footer__bottom { border-top:1px solid rgba(255,255,255,.08); padding-block:22px; display:flex; flex-direction:column; gap:12px; align-items:center; text-align:center; font-size:.86rem; }
.footer__bottom a:hover { color: var(--copper-2); }
.footer__bottom .legal { display:flex; gap:18px; flex-wrap:wrap; justify-content:center; }
.footer__credit a { color: var(--on-dark); font-weight:600; }
.footer__credit a:hover { color: var(--copper-2); }

/* ===================== VISSZA A TETEJÉRE ====================== */
.to-top {
  --tt-b: clamp(16px, 3vw, 28px);
  position: fixed; right: var(--tt-b); bottom: var(--tt-b); z-index: 90;
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  color:#fff; background: linear-gradient(135deg, var(--copper), var(--copper-deep));
  box-shadow: var(--sh-copper);
  opacity: 0; visibility: hidden; transform: translateY(16px) scale(.9);
  transition: opacity .35s var(--ease), transform .35s var(--ease), box-shadow .3s var(--ease), bottom .35s var(--ease);
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); box-shadow: 0 26px 54px -20px rgba(154,94,48,.7); }
.to-top svg { width: 24px; height: 24px; }
/* ha a cookie sáv látszik, a gomb fölé emelkedik, hogy ne takarják egymást */
body.cc-visible .to-top { bottom: calc(var(--tt-b) + var(--cc-h, 88px) + 14px); }

/* ===================== COOKIE / SÜTI SÁV ====================== */
.cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: rgba(20,26,31,.97); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,.1); color: var(--on-dark);
  transform: translateY(110%); transition: transform .5s var(--ease);
}
.cookie.show { transform: none; }
.cookie__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 15px var(--gutter);
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: space-between;
}
.cookie__text { font-size: .88rem; line-height: 1.5; color: var(--on-dark-soft); max-width: 760px; }
.cookie__text a { color: var(--copper-2); text-decoration: underline; text-underline-offset: 2px; }
.cookie__actions { display: flex; gap: 12px; flex-shrink: 0; }
.cookie__btn { padding: 11px 22px; font-size: .9rem; }
.cookie .btn--outline { color: var(--on-dark); border-color: rgba(255,255,255,.28); }
.cookie .btn--outline:hover { border-color: var(--copper-2); color: #fff; }
@media (max-width: 620px) {
  .cookie__inner { flex-direction: column; align-items: stretch; gap: 12px; }
  .cookie__actions { justify-content: stretch; }
  .cookie__btn { flex: 1; }
}

/* ===================== SCROLL REVEAL ANIM =======================
   A rejtett kezdőállapot a `js` osztályhoz kötött (a <head> inline scriptje
   teszi rá a <html>-re). Így ha a JS bármiért nem fut le, a tartalom
   akkor is látható marad — nincs "láthatatlan oldal". */
html.js .reveal { opacity:0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
html.js .reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; }
.reveal.d3 { transition-delay:.24s; } .reveal.d4 { transition-delay:.32s; }

/* ============================ BREAKPOINTS ======================= */
@media (min-width: 600px) {
  .feature-grid { grid-template-columns:1fr 1fr; }
  /* tableten/desktopon vissza rácsra (nincs carousel) */
  .gallery { display:grid; grid-template-columns:1fr 1fr; overflow:visible; scroll-snap-type:none; }
  .gallery .tile { flex:none; scroll-snap-align:none; aspect-ratio:auto; }
  .gallery::after { display:none; }
  .field-row { grid-template-columns:1fr 1fr; gap:18px; }
  .footer__bottom { flex-direction:row; justify-content:space-between; text-align:left; }
}
@media (min-width: 760px) {
  .services__grid { grid-template-columns:1fr 1fr; }
  .process__grid { grid-template-columns:1fr 1fr; }
}
@media (min-width: 900px) {
  .hero__trust { justify-content: center; }
  .about__grid { grid-template-columns: 0.9fr 1.1fr; gap: clamp(34px,4vw,60px); align-items: start; }
  /* a kép sticky: teteje a szöveg tetejével egy vonalban indul, majd görgetéskor
     finoman lecsúszik a szekció aljáig, kitöltve a magasabb szövegoszlop melletti űrt */
  .about__media { position: sticky; top: 92px; align-self: start; }
  /* tükrözött változat (Minőség szekció): balra szöveg, jobbra a sticky kép */
  .about__grid--rev { grid-template-columns: 1.1fr 0.9fr; }
  .contact__grid { grid-template-columns: 0.85fr 1.15fr; gap:40px; }
  .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap:44px; }
  /* desktopon visszaáll a normál soros elrendezés */
  .footer__about { grid-column: auto; }
  .footer__col--contact { grid-column: auto; text-align:left; }
  .footer__col--contact .footer__contact li { justify-content:flex-start; }
  .footer__col--contact .footer__social { justify-content:flex-start; }
  /* referencia galéria — variált "masonry" jellegű elrendezés */
  .gallery { grid-template-columns: repeat(6,1fr); grid-auto-rows: 200px; }
  .tile:nth-child(1){ grid-column: span 4; grid-row: span 2; }
  .tile:nth-child(2){ grid-column: span 2; grid-row: span 1; }
  .tile:nth-child(3){ grid-column: span 2; grid-row: span 1; }
  .tile:nth-child(4){ grid-column: span 3; grid-row: span 1; }
  .tile:nth-child(5){ grid-column: span 3; grid-row: span 1; }
  /* extra képek desktopon rejtve (a lightbox így is mind tartalmazza őket) */
  .gallery .tile--extra { display: none; }
  /* "+X kép" overlay a jobb alsó (5.) csempén */
  .tile__more {
    display: flex; position: absolute; inset: 0; z-index: 4;
    flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    background: rgba(18,24,29,.60); color: #fff; text-align: center;
    transition: background-color .4s var(--ease);
  }
  .tile:hover .tile__more { background: rgba(18,24,29,.72); }
  .tile__more-num { font-family: var(--font-head); font-weight: 700; font-size: 2rem; line-height: 1; }
  .tile__more span { font-size: .82rem; font-weight: 500; letter-spacing: .04em; opacity: .92; }
}
@media (min-width: 1040px) {
  .services__grid { grid-template-columns: repeat(4,1fr); }
  .process__grid { grid-template-columns: repeat(4,1fr); }
  /* összekötő vonal a lépések közt */
  .step__line { display:block; position:absolute; top:52px; right:-11px; width:22px; height:2px; z-index:2;
    background: repeating-linear-gradient(90deg, var(--copper) 0 6px, transparent 6px 12px); }
  .step:last-child .step__line { display:none; }
}

/* Desktop navigáció csak ~1100px-től (6 menüpont kényelmesen elfér);
   alatta a hamburger menü marad (tablet-en is rendezett). */
@media (min-width: 1100px) {
  .nav { display:flex; }
  .callbtn { display:flex; }
  .burger { display:none; }
  .scroll-cue { display:flex; left:auto; right: clamp(24px, 5vw, 96px); transform:none; }
}