@charset "UTF-8";
/* CSS Document */
:root{
  --brand:#0f172a;
  --accent:#85bf25;
  --accent-hover:#93e305;
  --ink:#0b0b0b;
  --muted:#6b7280;
  --bg:#ffffff;
  --bg-soft:#f6f7f9;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.08);
  --container:1160px;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font:16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Inter, "Helvetica Neue", Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--ink); background:var(--bg);
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* Alap elemek */
.brand img { height:36px; width:auto; display:block; }
@media (max-width:640px){ .brand img{ height:32px; } }

a{color:var(--accent); text-decoration:none}
a:hover, a:focus{color:var(--accent-hover)}
a:active{opacity:.9}
img,video,canvas,svg{max-width:100%; height:auto}
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}
section{padding:64px 0}
.section-title{font-size:clamp(22px, 3vw, 32px); margin:0 0 16px}
.section-lead{color:var(--muted); margin:0 0 28px}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); clip-path:inset(50%); white-space:nowrap; border:0}
.sr-only:focus{position:static!important; width:auto; height:auto; margin:0; clip:auto; clip-path:none; padding:8px 10px; background:#000; color:#fff; border-radius:8px}

/* Fejléc és navigáció */
header{position:sticky; top:0; z-index:50; background:rgba(255,255,255,.95); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid #e5e7eb}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; height:64px; position:relative}
.brand{display:flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.2px}
.brand-logo{width:36px; height:36px; border-radius:50%; background:radial-gradient(60% 60% at 40% 35%, #d8b971 0, #b48c3c 45%, #8b6a29 100%)}
.nav-links{display:flex; gap:20px}
.nav-links a{color:#111827; font-weight:600; padding:.5rem .4rem; border-radius:10px}
.nav-links a:hover{background:#f8fafc}

/* Mobil menü gomb */
.menu-toggle{display:none; align-items:center; gap:.5rem; padding:.6rem .9rem; border-radius:999px; border:2px solid var(--accent); background:transparent; color:var(--accent); font-weight:700; cursor:pointer}
.menu-toggle:hover{color:var(--accent-hover); border-color:var(--accent-hover)}
.menu-icon{position:relative; width:20px; height:2px; background:currentColor; display:inline-block}
.menu-icon::before,.menu-icon::after{content:""; position:absolute; left:0; width:20px; height:2px; background:currentColor; transition:transform .2s ease, top .2s ease}
.menu-icon::before{top:-6px}
.menu-icon::after{top:6px}
body.menu-open .menu-icon{background:transparent}
body.menu-open .menu-icon::before{top:0; transform:rotate(45deg)}
body.menu-open .menu-icon::after{top:0; transform:rotate(-45deg)}

/* Gombok */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; padding:.9rem 1.2rem; border-radius:999px; font-weight:700; border:0; cursor:pointer; transition:transform .08s ease, box-shadow .2s ease, background-color .15s ease, color .15s ease, border-color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--accent); color:white; box-shadow:var(--shadow)}
.btn-primary:hover{background:var(--accent-hover)}
.btn-outline{border:2px solid var(--accent); color:var(--accent); background:transparent}
.btn-outline:hover{background:var(--accent); color:#fff; border-color:var(--accent-hover)}
.btn-row{display:flex; gap:12px; flex-wrap:wrap}

/* Hero */
.hero{position:relative; color:#f8fafc; background:transparent}
.hero .content{display:grid; grid-template-columns:1.15fr .85fr; gap:40px; padding:72px 0}
.hero h1{font-size:clamp(28px, 4vw, 52px); line-height:1.1; margin:0 0 16px}
.hero p{color:#d1d5db; margin:0 0 24px}
.badge{display:inline-flex; align-items:center; gap:10px; padding:6px 12px; border-radius:999px; background:rgba(133,191,37,.18); color:#e9ffd0; font-weight:700; letter-spacing:.2px}

/* Kártyák és rácsok */
.card{background:var(--bg); border:1px solid #eef0f3; border-radius:var(--radius); box-shadow:var(--shadow)}
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}

/* Galéria */
.gallery{display:grid; grid-template-columns:repeat(6,1fr); gap:10px}
.gallery .ph{aspect-ratio:1/1; border-radius:12px; background:linear-gradient(135deg,#eaeef5,#f8fafc); display:flex; align-items:center; justify-content:center; color:#9aa3b2; font-weight:700; border:1px dashed #d7dce3}
.gallery .ph{ position: relative; overflow: hidden; }
.gallery .ph img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block; border-radius: 12px;
}

/* Fehér hátteres szekciók */
#szolgaltatasok,
#galeria,
#prefooter {
  background: var(--bg);
  position: relative;
  z-index: 1;
}

/* Kapcsolat */
.contact{background:var(--bg-soft)}
.map-frame{border:0; width:100%; height:auto; aspect-ratio:16/9}

/* Lábléc */
footer{padding:36px 0; border-top:1px solid #e5e7eb; color:#6b7280}
.pill{padding:.25rem .6rem; font-size:.85rem; background:#f1f5f9; border-radius:999px}

/* Utility */
.p-20{padding:20px}
.p-0{padding:0}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.overflow-hidden{overflow:hidden}
.footer-flex{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.muted{color:var(--muted)}
.socials{display:flex; gap:12px}

/* --- Mobil fix alsó CTA sáv --- */
.sticky-cta{position:fixed; left:0; right:0; bottom:0; display:none; align-items:center; justify-content:center; gap:12px; padding:12px clamp(12px, 4vw, 24px); padding-bottom:calc(12px + env(safe-area-inset-bottom)); background:rgba(15,23,42,.92); backdrop-filter:saturate(160%) blur(8px); border-top:1px solid rgba(255,255,255,.12); z-index:60}
.btn-sticky-cta{min-width:220px}

/* --- Árak szekció --- */
.pricing{background:transparent;}

/* --- Prefooter szekció --- */
.prefooter {
  background: var(--bg);
  position: relative;
  z-index: 1;
}
.pricing .pricing-grid{display:grid; gap:20px; grid-template-columns:repeat(4,1fr)}
.pricing .price-card{padding:20px; display:flex; flex-direction:column; gap:14px; background-color: rgba(255, 255, 255, 0.7) !important;}
.pricing .price-card header{display:flex; flex-direction:column; gap:8px; background-color: rgba(255, 255, 255, 0.0) !important;}
.pricing .price{font-size:clamp(24px, 4vw, 36px); font-weight:800; line-height:1}
.pricing .price .from{font-size:.9rem; font-weight:600; color:var(--muted); margin-right:6px}
.pricing .feat-list{list-style:none; padding:0; margin:0 0 6px 0; display:grid; gap:8px}
.pricing .feat-list li{display:flex; align-items:flex-start; gap:8px}
.pricing .feat-list li::before{content:"✓"; font-weight:900; color:var(--accent)}
.pricing .popular{outline:2px solid var(--accent)}
.pricing .price-note{margin-top:10px; color:var(--muted); font-size:.95rem}

/* --- Reszponzív töréspontok --- */
@media (max-width : 1343px ) and ( min-width : 961px ){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .pricing .pricing-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .hero .content{grid-template-columns:1fr; padding:48px 0}
  .grid-3,.grid-2,.grid-4{grid-template-columns:1fr}
  .menu-toggle{display:inline-flex}
  .nav-links{position:absolute; top:64px; right:20px; left:20px; display:none; flex-direction:column; gap:8px; background:#fff; border:1px solid #eef0f3; border-radius:12px; padding:12px; box-shadow:var(--shadow)}
  body.menu-open .nav-links{display:flex}
  .btn-row .btn{flex:1 1 100%}
  .sticky-cta{display:flex}
  body{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (max-width:640px){
  section{padding:48px 0}
  .hero .content{padding:40px 0}
  .gallery{grid-template-columns:repeat(2,1fr)}
  .pricing .pricing-grid{grid-template-columns:1fr}
}

/* Kevesebb mozgás */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important}
}

/* Hero: fehér logó blokk arányos kitöltése */
.hero .content .grid.grid-2{
  align-self: stretch;
  min-height: clamp(260px, 35vw, 520px);
}
.hero .content .grid.grid-2 > *{ grid-column: 1 / -1; }
.hero .content .grid.grid-2 > .p-20{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 2vw, 24px);
}
.hero .content .grid.grid-2 > .p-20 img{
  width: 100%; height: 100%; max-width: 100%;
  object-fit: contain; display: block;
}
@media (max-width: 960px){
  .hero .content .grid.grid-2{ min-height: clamp(200px, 50vw, 420px); }
}

/* === EGYEDI FIX HÁTTÉR MINDEN SZEKCIÓHOZ === */
/* Alapbeállítások minden hátteres szekcióhoz */
.has-fixed-bg {
  position: relative;
  background: transparent;
  min-height: 100vh;
}

/* Képes háttérű szekciók tartalmának mobil margói */
@media (max-width: 960px) {
  .has-fixed-bg .container {
    padding-inline: 20px;
  }
}

@media (max-width: 640px) {
  .has-fixed-bg .container {
    padding-inline: 18px;
  }
}

@media (max-width: 480px) {
  .has-fixed-bg .container {
    padding-inline: 16px;
  }
}

@media (max-width: 375px) {
  .has-fixed-bg .container {
    padding-inline: 14px;
  }
}

/* Modern böngészők - CSS megoldás minden szekcióhoz külön háttér */
.has-fixed-bg::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  /* Teljesítmény optimalizálás */
  will-change: transform, opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Aktív szekció háttérképe látható */
.has-fixed-bg.bg-active::before {
  opacity: 1;
}

/* Mobil képek */
@media (max-width: 960px) {
  .has-fixed-bg::before {
    background-image: var(--bg-mobile, var(--bg-desktop));
  }
}

/* JavaScript kontrollált fix háttér - iOS és problémás böngészőkhöz */
.has-fixed-bg.js-fixed-bg::before {
  display: none;
}

/* JavaScript által létrehozott fix háttér elemek */
.js-bg-fixed {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  z-index: -1 !important;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
  will-change: transform, opacity;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Aktív JavaScript háttér */
.js-bg-fixed.bg-active {
  opacity: 1;
}

/* Fallback statikus háttér régi böngészőkhöz */
.no-js .has-fixed-bg,
.has-fixed-bg.fallback-bg {
  background-image: var(--bg-desktop);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: scroll;
}

@media (max-width: 960px) {
  .no-js .has-fixed-bg,
  .has-fixed-bg.fallback-bg {
    background-image: var(--bg-mobile, var(--bg-desktop));
  }
}

/* Modern böngészők megerősítése */
@supports (position: fixed) and (background-attachment: fixed) {
  .has-fixed-bg::before {
    position: fixed;
    background-attachment: fixed;
  }
}

/* iOS Safari specifikus CSS fallback */
@supports (-webkit-overflow-scrolling: touch) {
  .has-fixed-bg::before {
    background-attachment: scroll !important;
    position: fixed !important;
    will-change: opacity;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
  }
}

/* iOS specifikus JavaScript háttér stílusok */
.js-bg-fixed {
  -webkit-overflow-scrolling: touch;
}

/* iOS viewport fix */
@media screen and (max-device-width: 768px) {
  .has-fixed-bg {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
}

/* iPhone Safari egyszerű háttér kezelés */
.has-fixed-bg.iphone-bg {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
  position: relative !important;
}

.has-fixed-bg.iphone-bg::before {
  display: none !important;
}

.has-fixed-bg.iphone-bg .container {
  position: relative !important;
  z-index: 2 !important;
}

/* === KÜLÖN, FIX LOGÓ A MENÜSÁV BAL SZÉLÉN === */
#fixed-logo{
  position: fixed;
  top: calc((110px - 240px) / 2);
  left: 16px;
  width: 240px;
  height: 240px;
  z-index: 1000;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transform: translateX(120vw);
  will-change: transform, opacity;
}
#fixed-logo img{ width:240px; height:240px; object-fit:contain; display:block; }
@media (min-width: 961px){
  header .container.nav{
    padding-left: calc(240px + 32px);
    height: 64px; min-height: 64px;
  }
}
@media (max-width: 960px){
  header .container.nav{ padding-left: calc(240px + 20px); }
  #fixed-logo{ transform: translateX(100vw); left:12px; top: calc((110px - 240px) / 2); }
}
.brand-logo-big{ display: none !important; }

/* Felső fehér nyelvsáv */
:root{ --langbar-h: 36px; }
.lang-bar{
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 999;
  height: var(--langbar-h);
  display: flex; gap: 8px; justify-content: flex-end; align-items: center;
  padding: 6px 12px;
  background: ;
  backdrop-filter: saturate(160%) blur(8px);
  border-bottom: ;
}
.lang-bar a{
  width: 34px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: var(--shadow);
  transition: transform .08s ease, border-color .15s ease, box-shadow .15s ease;
}
.lang-bar svg{ display:block; border-radius:0; }
.lang-bar a:hover, .lang-bar a:focus-visible{
  outline: none; transform: translateY(-1px); border-color: var(--accent);
}
.lang-bar a.active, .lang-bar a[aria-current="true"]{
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(133,191,37,.25);
}
header{ margin-top: var(--langbar-h); }
@media (max-width: 960px){
  :root{ --langbar-h: 34px; }
  .lang-bar a{ width: 32px; height: 24px; }
  .lang-bar svg{ width: 22px; height: 14px; }
}

/* Braid Bar logó beúszás */
#fixed-logo.enter{ animation: bb-logo-in .7s cubic-bezier(.22,.8,.36,1) .15s forwards; }
@keyframes bb-logo-in{ to{ opacity:1; transform:translateX(0); } }

/* Mobil menü CTA */
@media (max-width: 960px){
  header .btn-row{ display:none; }
  .btn-mobile-cta{ display:flex; width:100%; margin-top:8px; }
  .nav-links{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* Vissza a tetejére gomb */
.to-top{
  position: fixed;
  right: 16px;
  bottom: 24px;
  z-index: 70;
  width: 44px; height: 44px;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  border: 2px solid var(--accent);
  box-shadow: var(--shadow);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease, border-color .15s ease;
}
.to-top.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top:hover, .to-top:focus-visible{ border-color: var(--accent-hover); }
.to-top::before{
  content:""; position:absolute; left:50%; top:10px; transform:translateX(-50%);
  width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:12px solid var(--accent);
}
.to-top::after{
  content:""; position:absolute; left:50%; top:23px; transform:translateX(-50%);
  width:2px; height:10px; background:var(--accent); border-radius:1px;
}
@media (max-width: 960px){
  .to-top{ bottom: calc(76px + env(safe-area-inset-bottom) + 16px); right:12px; }
}
@media (prefers-reduced-motion: reduce){
  .to-top{ transition:none; }
}