/* =========================================================
   PD Ingatlan Média — stíluslap
   Paletta: fehér + tengerkék-zöld (teal/aqua) + homokarany
   ========================================================= */

/* ---------- 1. Tokenek ---------- */
:root{
  /* színek */
  --ink:#08222B;
  --ink-70:rgba(8,34,43,.70);
  --ink-55:rgba(8,34,43,.55);
  --ink-40:rgba(8,34,43,.40);

  --deep:#06323C;
  --deep-2:#0A4450;
  --teal:#0E8B93;
  --teal-dark:#0B5A66;
  --aqua:#1FBFB0;
  --aqua-light:#5AD6C6;
  --sand:#E3B778;
  --sand-dark:#C89855;

  /* akció-akcent: meleg korall — a teal komplementere, ezért kiugrik,
     de nem harsog úgy, mint egy sima piros */
  --akcio:#E2604A;
  --akcio-dark:#BE3D29;
  --akcio-halvany:rgba(226,96,74,.09);

  /* az akciósáv magassága — akció nélkül 0, így semmi nem tolódik el */
  --promo-h:0px;
}
html.akcio-aktiv{--promo-h:46px}
@media (max-width:860px){html.akcio-aktiv{--promo-h:42px}}
:root{

  --paper:#FFFFFF;
  --mist:#F3F8F8;
  --mist-2:#E8F1F1;
  --line:rgba(8,34,43,.10);
  --line-strong:rgba(8,34,43,.18);

  --grad-deep:linear-gradient(140deg,#06323C 0%,#0B5A66 45%,#0E8B93 100%);
  --grad-aqua:linear-gradient(135deg,#0E8B93 0%,#1FBFB0 100%);
  --grad-sheen:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.35) 50%,rgba(255,255,255,0) 70%);

  /* árnyékok */
  --sh-sm:0 2px 8px rgba(8,34,43,.06);
  --sh-md:0 12px 30px -12px rgba(8,34,43,.18);
  --sh-lg:0 30px 70px -28px rgba(8,34,43,.34);
  --sh-teal:0 22px 45px -20px rgba(14,139,147,.55);

  /* méretek */
  --wrap:1200px;
  --wrap-narrow:860px;
  --r-sm:12px;
  --r-md:18px;
  --r-lg:26px;
  --r-xl:34px;
  --pad:clamp(20px,5vw,40px);
  --sec:clamp(72px,9vw,132px);

  --ease:cubic-bezier(.22,.68,.34,1);
  --fast:.22s var(--ease);
  --slow:.55s var(--ease);
}

/* ---------- 2. Alapok ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden;scroll-padding-top:calc(var(--promo-h) + 80px)}
body{
  margin:0;
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.7;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* 'clip' — a 'hidden' görgetőkonténerré tenné a body-t, és elromlana a window.scrollY */
  overflow-x:clip;
}
body.is-locked{overflow:hidden}
img,svg,video{max-width:100%;display:block}
/* FONTOS: a képek width/height attribútuma CSS-magasságként érvényesülne, ami
   szétfeszítené a képarányt. A height:auto ezt megelőzi; ahol tényleg kell fix
   magasság (.svc__media, .ba__layer), ott az osztályos szabály felülírja. */
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
ul{margin:0;padding:0;list-style:none}
h1,h2,h3,h4{margin:0;line-height:1.08;letter-spacing:-.025em;font-weight:800}
p{margin:0}
:focus-visible{outline:3px solid var(--aqua);outline-offset:3px;border-radius:6px}
::selection{background:var(--aqua);color:#fff}

h1{font-size:clamp(2.55rem,6.4vw,4.7rem)}
h2{font-size:clamp(2rem,4.3vw,3.35rem)}
h3{font-size:clamp(1.2rem,1.9vw,1.5rem);letter-spacing:-.015em}

.serif{font-family:'Playfair Display',Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.01em;line-height:1.2}
/* A background-clip:text a háttérdobozra vág — a szoros sormagasság levágná a
   lelógó szárakat (g, y, j, á). A padding-bottom kitolja a festett területet. */
.grad-text{
  background:var(--grad-aqua);-webkit-background-clip:text;background-clip:text;color:transparent;
  padding-bottom:.16em;
}

/* ---------- 3. Elrendezés ---------- */
.wrap{width:min(100% - (var(--pad) * 2),var(--wrap));margin-inline:auto}
.wrap-narrow{width:min(100% - (var(--pad) * 2),var(--wrap-narrow));margin-inline:auto}
.section{padding-block:var(--sec);position:relative}
.section--mist{background:var(--mist)}
.section--deep{background:var(--deep);color:#fff}
.center{text-align:center}

.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-size:.76rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);margin-bottom:20px;
}
.eyebrow::before{content:"";width:30px;height:2px;background:var(--grad-aqua);border-radius:2px}
.section--deep .eyebrow{color:var(--aqua-light)}

.lead{font-size:clamp(1.02rem,1.35vw,1.19rem);color:var(--ink-70);max-width:62ch}
.section--deep .lead{color:rgba(255,255,255,.78)}
.head{max-width:720px;margin-bottom:clamp(40px,5vw,64px)}
.head.center{margin-inline:auto}
.head .lead{margin-top:20px}
.head.center .lead{margin-inline:auto}

/* ---------- 4. Gombok ---------- */
.btn{
  --bg:var(--grad-aqua);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:15px 30px;border-radius:100px;
  font-weight:800;font-size:.96rem;letter-spacing:-.005em;
  background:var(--bg);color:#fff;
  box-shadow:var(--sh-teal);
  transition:transform var(--fast),box-shadow var(--fast),background var(--fast);
  position:relative;overflow:hidden;white-space:nowrap;
}
.btn::after{
  content:"";position:absolute;inset:0;background:var(--grad-sheen);
  transform:translateX(-120%);transition:transform .7s var(--ease);
}
.btn:hover{transform:translateY(-2px);box-shadow:0 26px 50px -18px rgba(14,139,147,.7)}
.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px;flex:none}

.btn--ghost{background:transparent;color:var(--ink);box-shadow:none;border:1.5px solid var(--line-strong)}
.btn--ghost:hover{background:var(--ink);color:#fff;box-shadow:var(--sh-md)}
.btn--light{background:#fff;color:var(--deep);box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
.btn--light:hover{background:#fff;color:var(--teal)}
.btn--onDark{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.35);box-shadow:none}
.btn--onDark:hover{background:rgba(255,255,255,.12)}
.btn--sand{background:linear-gradient(135deg,var(--sand-dark),var(--sand));box-shadow:0 22px 45px -20px rgba(200,152,85,.7)}
.btn--block{width:100%}
.btn--sm{padding:11px 22px;font-size:.88rem}

.link-arrow{
  display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--teal);
  font-size:.95rem;transition:gap var(--fast),color var(--fast);
}
.link-arrow:hover{gap:14px;color:var(--aqua)}

/* ---------- 5. Fejléc ---------- */
.header{
  position:fixed;top:var(--promo-h);left:0;right:0;z-index:900;
  padding-block:18px;
  transition:padding var(--fast),background var(--fast),box-shadow var(--fast),backdrop-filter var(--fast);
}
.header::before{
  content:"";position:absolute;inset:0;
  background:rgba(255,255,255,.86);backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity var(--fast);pointer-events:none;
}
.header.is-stuck{padding-block:11px}
.header.is-stuck::before{opacity:1}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative}

.logo{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:-.03em;font-size:1.06rem;color:#fff}
.logo__mark{
  width:42px;height:42px;border-radius:13px;flex:none;
  background:var(--grad-aqua);display:grid;place-items:center;
  box-shadow:var(--sh-teal);
}
.logo__mark span{font-size:.95rem;font-weight:800;color:#fff;letter-spacing:-.04em}
.logo__txt small{display:block;font-size:.63rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.7;line-height:1.4}
.header.is-stuck .logo{color:var(--ink)}

.nav{display:flex;align-items:center;gap:34px}
.nav a{
  font-size:.93rem;font-weight:700;color:rgba(255,255,255,.86);
  position:relative;padding-block:6px;transition:color var(--fast);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--grad-aqua);border-radius:2px;transition:width var(--fast);
}
.nav a:hover,.nav a.is-active{color:#fff}
.nav a:hover::after,.nav a.is-active::after{width:100%}
.header.is-stuck .nav a{color:var(--ink-70)}
.header.is-stuck .nav a:hover,.header.is-stuck .nav a.is-active{color:var(--ink)}

.header__cta{display:flex;align-items:center;gap:14px}
.header__tel{font-weight:800;font-size:.93rem;color:rgba(255,255,255,.9);display:inline-flex;align-items:center;gap:8px}
.header.is-stuck .header__tel{color:var(--ink)}
.header__tel:hover{color:var(--aqua-light)}
.header.is-stuck .header__tel:hover{color:var(--teal)}

.burger{
  display:none;width:46px;height:46px;border-radius:14px;
  border:1px solid rgba(255,255,255,.28);place-items:center;
}
.header.is-stuck .burger{border-color:var(--line-strong)}
.burger span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;position:relative;transition:all var(--fast)}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:inherit;border-radius:2px;transition:all var(--fast)}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.header.is-stuck .burger span,.header.is-stuck .burger span::before,.header.is-stuck .burger span::after{background:var(--ink)}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{top:0;transform:rotate(45deg);background:var(--ink)}
body.nav-open .burger span::after{top:0;transform:rotate(-45deg);background:var(--ink)}

/* mobil menü */
.mobile-nav{
  position:fixed;inset:0;z-index:890;background:#fff;
  padding:calc(104px + var(--promo-h)) var(--pad) 40px;
  display:flex;flex-direction:column;gap:6px;
  opacity:0;visibility:hidden;transform:translateY(-12px);
  transition:opacity var(--fast),transform var(--fast),visibility var(--fast);
}
body.nav-open .mobile-nav{opacity:1;visibility:visible;transform:none}
.mobile-nav a{
  font-size:1.5rem;font-weight:800;letter-spacing:-.03em;
  padding-block:15px;border-bottom:1px solid var(--line);
  flex:none;
}
.mobile-nav .btn{margin-top:26px;flex:none;border-bottom:0}
.mobile-nav{overflow-y:auto}
.mobile-nav__foot{margin-top:auto;color:var(--ink-55);font-size:.9rem;font-weight:600}

/* ---------- 6. Hero ---------- */
.hero{
  position:relative;color:#fff;overflow:hidden;
  padding:calc(clamp(108px,12vw,158px) + var(--promo-h)) 0 clamp(54px,6.5vw,88px);
  background:var(--grad-deep);
  isolation:isolate;
}
.hero__bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero__orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.hero__orb--1{width:min(52vw,620px);aspect-ratio:1;background:#1FBFB0;top:-16%;right:-10%;opacity:.42}
.hero__orb--2{width:min(40vw,480px);aspect-ratio:1;background:#E3B778;bottom:-22%;left:-8%;opacity:.20}
.hero__grid{
  position:absolute;inset:0;z-index:-1;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 25%,transparent 78%);
}
.hero__inner{display:grid;grid-template-columns:1.06fr .94fr;gap:clamp(36px,5vw,72px);align-items:center}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:6px 6px 6px 14px;border-radius:100px;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);
  font-size:.82rem;font-weight:700;letter-spacing:.01em;backdrop-filter:blur(8px);
  margin-bottom:20px;
}
.pill b{
  background:var(--grad-aqua);padding:4px 12px;border-radius:100px;
  font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--aqua-light);box-shadow:0 0 0 0 rgba(90,214,198,.7);animation:pulse 2.4s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(90,214,198,0)}100%{box-shadow:0 0 0 0 rgba(90,214,198,0)}}

.hero h1{font-size:clamp(2.1rem,5.2vw,3.85rem);margin-bottom:18px}
.hero h1 .serif{
  display:block;line-height:1.18;padding-bottom:.1em;
  background:linear-gradient(120deg,#5AD6C6,#E3B778);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{font-size:clamp(.98rem,1.2vw,1.1rem);color:rgba(255,255,255,.80);max-width:52ch}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

.hero__stats{
  display:flex;flex-wrap:wrap;gap:clamp(16px,3vw,38px);
  margin-top:clamp(28px,3.5vw,42px);padding-top:clamp(20px,2.4vw,28px);
  border-top:1px solid rgba(255,255,255,.16);
}
.stat b{display:block;font-size:clamp(1.45rem,2.4vw,1.95rem);font-weight:800;letter-spacing:-.04em;line-height:1;
  background:linear-gradient(120deg,#fff,#5AD6C6);-webkit-background-clip:text;background-clip:text;color:transparent}
.stat span{display:block;margin-top:6px;font-size:.74rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.60)}

/* hero vizuál */
.hero__visual{position:relative}
.hero__card{
  border-radius:var(--r-xl);overflow:hidden;position:relative;
  box-shadow:0 50px 90px -40px rgba(0,0,0,.75);
  border:1px solid rgba(255,255,255,.16);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);
  transition:transform var(--slow);
}
.hero__visual:hover .hero__card{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.hero__card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.hero__card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,50,60,.6))}

.hero__float{
  position:absolute;background:rgba(255,255,255,.94);color:var(--ink);
  border-radius:var(--r-md);padding:14px 18px;box-shadow:var(--sh-lg);
  display:flex;align-items:center;gap:12px;backdrop-filter:blur(10px);
  animation:float 6s ease-in-out infinite;
}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-11px)}}
.hero__float--rating{left:-6%;bottom:12%;animation-delay:-1.4s}
.hero__float--time{right:-4%;top:9%}
.hero__float b{display:block;font-size:1.02rem;font-weight:800;letter-spacing:-.02em;line-height:1.2}
.hero__float small{font-size:.74rem;font-weight:700;color:var(--ink-55);letter-spacing:.04em}
.hero__float .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--mist-2);color:var(--teal);flex:none}
.hero__float .ico svg{width:19px;height:19px}
.stars{color:var(--sand-dark);letter-spacing:2px;font-size:.85rem}

.scroll-cue{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-size:.68rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5);
}
.scroll-cue i{display:block;width:1px;height:44px;background:linear-gradient(rgba(255,255,255,.6),transparent);animation:cue 2.2s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.25;transform:scaleY(.55);transform-origin:top}50%{opacity:1;transform:scaleY(1)}}

/* ---------- 7. Kinek dolgozom ---------- */
.clients{
  background:var(--ink);color:#fff;
  padding-block:clamp(44px,5.5vw,66px);
  position:relative;overflow:hidden;
}
.clients::before{      /* halvány tengerkék derengés a bal felső sarokban */
  content:"";position:absolute;width:620px;height:620px;border-radius:50%;
  background:var(--teal);filter:blur(150px);opacity:.22;
  top:-70%;left:-6%;pointer-events:none;
}
.clients>*{position:relative}

.clients__head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;
  padding-bottom:clamp(26px,3vw,34px);
  border-bottom:1px solid rgba(255,255,255,.13);
}
.clients__head .eyebrow{margin-bottom:0;color:var(--aqua-light)}
.clients__head p{
  font-size:clamp(1rem,1.35vw,1.15rem);color:rgba(255,255,255,.68);
  letter-spacing:-.01em;margin:0;
}
.clients__head strong{color:#fff;font-weight:800}

.clients__grid{
  display:grid;grid-template-columns:repeat(6,1fr);
  margin-top:clamp(24px,3vw,34px);
}
.clients__item{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:13px;
  padding:8px clamp(8px,1.4vw,18px);
  border-left:1px solid rgba(255,255,255,.11);
  min-width:0;   /* hogy a hosszú szavak ne feszítsék szét az oszlopokat */
}
.clients__item:first-child{border-left:0}

.clients__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:var(--aqua-light);
  transition:background var(--fast),border-color var(--fast),color var(--fast),transform var(--fast);
}
.clients__ico svg{width:22px;height:22px}
.clients__item:hover .clients__ico{
  background:var(--grad-aqua);border-color:transparent;color:#fff;
  transform:translateY(-3px);box-shadow:var(--sh-teal);
}
.clients__label{
  font-size:.83rem;font-weight:700;line-height:1.4;
  color:rgba(255,255,255,.74);transition:color var(--fast);
  text-wrap:balance;
}
.clients__item:hover .clients__label{color:#fff}

/* ---------- 8. Szolgáltatások ---------- */
.services{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.9vw,24px)}
.svc{
  position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,32px);overflow:hidden;
  transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast);
}
.svc::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-aqua);opacity:0;transition:opacity var(--fast);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent}
.svc:hover::before{opacity:1}
.svc--wide{grid-column:span 2;padding:0;display:flex;flex-direction:column}
.svc__media{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--mist-2)}
.svc__media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.svc--wide:hover .svc__media img{transform:scale(1.06)}
.svc__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,50,60,0) 45%,rgba(6,50,60,.55))}
.svc__body{padding:clamp(24px,2.6vw,32px);flex:1;display:flex;flex-direction:column}
.svc__num{
  position:absolute;top:20px;right:22px;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  color:var(--ink-40);
}
.svc--wide .svc__num{color:rgba(255,255,255,.8);z-index:2}
.svc__ico{
  width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  background:linear-gradient(140deg,var(--mist-2),#fff);color:var(--teal);
  border:1px solid var(--line);transition:all var(--fast);
}
.svc__ico svg{width:24px;height:24px}
.svc:hover .svc__ico{background:var(--grad-aqua);color:#fff;border-color:transparent;box-shadow:var(--sh-teal)}
.svc h3{margin-bottom:11px}
.svc p{color:var(--ink-70);font-size:.95rem}
.svc:not(.svc--wide){display:flex;flex-direction:column}
.svc__list{
  margin-top:auto;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:8px 18px;
  border-top:1px solid var(--line);
}
.svc__list li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.73rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--teal-dark);
}
.svc__list li::before{
  content:"";width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--grad-aqua);
}
.svc__foot{margin-top:auto;padding-top:20px}

/* ---------- 9. ELŐTTE–UTÁNA CSÚSZKA ---------- */
/* A csúszka mérete szándékosan visszafogott: így a böngészőnek kicsinyítenie
   kell a fotókat (nem nagyítani), amitől érezhetően élesebbek lesznek. */
/* A kép mérete marad — csak a szekció fölötti és alatti tér lett szűkebb. */
#elotte-utana{padding-block:clamp(40px,4.6vw,64px)}
#elotte-utana .head{margin-bottom:clamp(22px,2.6vw,32px)}
.ba-wrap{position:relative;max-width:720px;margin-inline:auto}
.ba{
  --pos:50%;
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  box-shadow:0 44px 90px -40px rgba(8,34,43,.6);
  background:var(--mist-2);
  touch-action:pan-y;
  user-select:none;-webkit-user-select:none;
  cursor:ew-resize;
}
.ba__stage{position:relative;aspect-ratio:3/2;width:100%}
.ba__layer{position:absolute;inset:0;overflow:hidden}
.ba__layer img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* Képpár-igazítás: ha a két fotó nem azonos nézőpontból/méretaránnyal készült,
   ezekkel a változókkal lehet egymásra hangolni őket (lásd README 3. pont). */
.ba__layer--before img{object-position:var(--fit-b,50% 50%);transform:scale(var(--zoom-b,1))}
.ba__layer--after  img{object-position:var(--fit-a,50% 50%);transform:scale(var(--zoom-a,1))}
.ba__layer--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}

/* elválasztó vonal + fogantyú */
.ba__divider{
  position:absolute;top:0;bottom:0;left:var(--pos);width:3px;
  background:#fff;transform:translateX(-50%);
  box-shadow:0 0 22px rgba(0,0,0,.35);pointer-events:none;
}
.ba__handle{
  position:absolute;top:50%;left:var(--pos);
  width:62px;height:62px;transform:translate(-50%,-50%);
  border-radius:50%;background:#fff;color:var(--teal-dark);
  display:grid;place-items:center;
  box-shadow:0 12px 34px rgba(0,0,0,.35);
  cursor:grab;z-index:3;transition:transform var(--fast),box-shadow var(--fast);
}
.ba__handle:hover{transform:translate(-50%,-50%) scale(1.08)}
.ba.is-dragging .ba__handle{cursor:grabbing;transform:translate(-50%,-50%) scale(1.05)}
.ba__handle svg{width:26px;height:26px}
.ba__handle::after{
  content:"";position:absolute;inset:-10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.55);
  animation:ring 2.6s var(--ease) infinite;
}
@keyframes ring{0%{transform:scale(.9);opacity:.9}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
.ba.is-touched .ba__handle::after{display:none}

.ba__tag{
  position:absolute;top:20px;z-index:2;
  padding:8px 17px;border-radius:100px;
  font-size:.73rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity var(--fast);
}
.ba__tag--before{left:20px;background:rgba(8,34,43,.62);color:#fff;border:1px solid rgba(255,255,255,.24)}
.ba__tag--after{right:20px;background:rgba(31,191,176,.88);color:#04333a;border:1px solid rgba(255,255,255,.35)}

.ba__hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);z-index:2;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:100px;white-space:nowrap;
  background:rgba(8,34,43,.58);border:1px solid rgba(255,255,255,.22);
  color:#fff;font-size:.78rem;font-weight:700;letter-spacing:.02em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  transition:opacity var(--fast),transform var(--fast);
}
.ba.is-touched .ba__hint{opacity:0;transform:translate(-50%,10px)}
.ba__hint svg{width:16px;height:16px}

/* választó fülek */
.ba-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;justify-content:center}
.ba-tab{
  display:flex;align-items:center;gap:12px;padding:8px 18px 8px 8px;
  border-radius:100px;border:1.5px solid var(--line);background:#fff;
  font-weight:800;font-size:.88rem;color:var(--ink-70);
  transition:all var(--fast);
}
.ba-tab img{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.ba-tab:hover{border-color:var(--aqua);color:var(--ink);transform:translateY(-2px)}
.ba-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:var(--sh-md)}
.ba-caption{margin-top:16px;text-align:center;color:var(--ink-55);font-size:.9rem;font-weight:600}
.ba-caption b{color:var(--ink);font-weight:800}

/* ---------- 10. Folyamat ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.2vw,28px);position:relative}
.steps::before{
  content:"";position:absolute;top:38px;left:8%;right:8%;height:2px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.28) 0 10px,transparent 10px 20px);
}
.step{position:relative;z-index:1}
.step__n{
  width:76px;height:76px;border-radius:24px;display:grid;place-items:center;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.20);
  font-size:1.28rem;font-weight:800;color:#fff;margin-bottom:24px;
  backdrop-filter:blur(10px);transition:all var(--fast);
}
.step:hover .step__n{background:var(--grad-aqua);border-color:transparent;transform:translateY(-6px);box-shadow:var(--sh-teal)}
.step h3{margin-bottom:10px}
.step p{color:rgba(255,255,255,.72);font-size:.94rem}
.step__meta{display:inline-block;margin-top:14px;font-size:.75rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--aqua-light)}

/* ---------- 11. Galéria ---------- */
/* Egységes rács: minden csempe azonos méretű és 4:3 arányú, így a sorok
   rendezettek maradnak és a galéria jóval kevesebb helyet foglal.
   A teljes, vágatlan kép a nagyításban látszik. */
.gal{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(10px,1.2vw,16px);
}
.gal__item{
  margin:0;aspect-ratio:4/3;
  position:relative;border-radius:var(--r-md);overflow:hidden;cursor:zoom-in;
  box-shadow:var(--sh-sm);background:var(--mist-2);
  transition:transform var(--fast),box-shadow var(--fast);
}
/* itt a fix magasság szándékos: a csempe adja az arányt, a kép kitölti */
.gal__item img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.gal__item::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,50,60,0) 45%,rgba(6,50,60,.75));
  opacity:0;transition:opacity var(--fast);
}
.gal__item:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
.gal__item:hover img{transform:scale(1.07)}
.gal__item:hover::after{opacity:1}
.gal__cap{
  position:absolute;left:14px;right:14px;bottom:12px;z-index:2;color:#fff;
  opacity:0;transform:translateY(10px);transition:all var(--fast);
}
.gal__cap b{display:block;font-size:.92rem;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.gal__cap small{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.75);line-height:1.3;display:block;margin-top:2px}
.gal__item:hover .gal__cap{opacity:1;transform:none}

/* „További képek" gomb */
.gal-more{display:flex;justify-content:center;margin-top:clamp(20px,2.4vw,28px)}
.gal-more .btn[hidden]{display:none}

/* szűrő chipek */
.gal-filter{
  display:flex;flex-wrap:wrap;gap:10px;
  margin:0 0 clamp(24px,3vw,34px);
}
.gal-chip{
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:100px;
  border:1.5px solid var(--line);background:#fff;
  font-size:.88rem;font-weight:800;color:var(--ink-70);
  transition:all var(--fast);
}
.gal-chip span{
  font-size:.72rem;font-weight:800;color:var(--ink-40);
  background:var(--mist);border-radius:100px;padding:2px 8px;min-width:24px;text-align:center;
  transition:all var(--fast);
}
.gal-chip:hover{border-color:var(--aqua);color:var(--ink);transform:translateY(-2px)}
.gal-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:var(--sh-md)}
.gal-chip.is-active span{background:rgba(255,255,255,.18);color:#fff}

.gal__item.is-hidden{display:none}

/* lightbox */
.lb{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;
  background:rgba(4,20,26,.94);backdrop-filter:blur(8px);padding:var(--pad);
  opacity:0;visibility:hidden;transition:opacity var(--fast),visibility var(--fast);
}
.lb.is-open{opacity:1;visibility:visible}
.lb img{max-width:min(1100px,92vw);max-height:84vh;border-radius:var(--r-lg);box-shadow:var(--sh-lg)}
.lb__close,.lb__nav{
  position:absolute;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);color:#fff;
  display:grid;place-items:center;transition:all var(--fast);
}
.lb__close:hover,.lb__nav:hover{background:#fff;color:var(--ink)}
.lb__close{top:24px;right:24px}
.lb__nav--prev{left:24px;top:50%;transform:translateY(-50%)}
.lb__nav--next{right:24px;top:50%;transform:translateY(-50%)}
.lb__cap{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.8);font-weight:700;font-size:.9rem}

/* ---------- 12. Csomagok ---------- */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,20px);align-items:stretch}
.plan{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.3vw,28px);position:relative;
  display:flex;flex-direction:column;
  transition:transform var(--fast),box-shadow var(--fast);
}
.plan:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.plan--best{
  background:var(--grad-deep);color:#fff;border-color:transparent;
  box-shadow:var(--sh-lg);transform:scale(1.035);z-index:2;
}
.plan--best:hover{transform:scale(1.035) translateY(-6px)}
.plan__badge{
  position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,var(--sand-dark),var(--sand));color:#3a2a10;
  padding:6px 18px;border-radius:100px;white-space:nowrap;
  font-size:.71rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  box-shadow:0 10px 24px -10px rgba(200,152,85,.9);
}
.plan__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:6px}
.plan h3{font-size:1.14rem;margin:0}
.plan__tier{display:flex;gap:4px;flex:none}
.plan__tier i{width:15px;height:4px;border-radius:2px;background:var(--line-strong)}
.plan__tier i.on{background:var(--teal)}
.plan--best .plan__tier i{background:rgba(255,255,255,.24)}
.plan--best .plan__tier i.on{background:var(--aqua-light)}
.plan__desc{font-size:.85rem;color:var(--ink-55);min-height:38px}
.plan--best .plan__desc{color:rgba(255,255,255,.72)}
.plan__price{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px;flex-wrap:wrap}
.plan__price b{font-size:clamp(1.7rem,2.7vw,2.15rem);font-weight:800;letter-spacing:-.045em;line-height:1}
.plan__price span{font-size:.86rem;font-weight:700;color:var(--ink-55)}
.plan--best .plan__price span{color:rgba(255,255,255,.7)}
.plan__from{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--teal)}
.plan--best .plan__from{color:var(--aqua-light)}
.plan hr{border:0;border-top:1px solid var(--line);margin:18px 0}
.plan--best hr{border-color:rgba(255,255,255,.18)}
.plan__feat li{display:flex;gap:10px;align-items:flex-start;padding-block:5px;font-size:.87rem;font-weight:600}
.plan__feat svg{width:17px;height:17px;flex:none;margin-top:3px;color:var(--teal)}
.plan--best .plan__feat svg{color:var(--aqua-light)}
.plan__feat li.is-off{color:var(--ink-40);font-weight:500}
.plan__feat li.is-off svg{color:var(--ink-40)}
.plan__inc{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  padding:10px 13px;border-radius:var(--r-sm);
  background:var(--mist);border:1px solid var(--line);
  font-size:.83rem;font-weight:700;color:var(--ink-70);line-height:1.35;
}
.plan__inc svg{width:17px;height:17px;flex:none;color:var(--teal)}
.plan__inc b{font-weight:800;color:var(--ink)}
.plan--best .plan__inc{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.82)}
.plan--best .plan__inc svg{color:var(--aqua-light)}
.plan--best .plan__inc b{color:#fff}
.plan__feat{margin-bottom:22px}
.plan .btn{margin-top:auto}
/* 80 m² feletti felár */
.plans-size{
  margin-top:clamp(22px,2.6vw,32px);
  display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(20px,3vw,40px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,32px);
}
.plans-size__intro h3{font-size:1.08rem;margin-bottom:8px}
.plans-size__intro p{font-size:.9rem;color:var(--ink-70);max-width:46ch}
.plans-size__intro strong{color:var(--ink);font-weight:800}
.plans-size__list{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px}
.plans-size__list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:10px 14px;border-radius:var(--r-sm);
  background:var(--mist);border:1px solid var(--line);
}
.plans-size__list span{font-size:.84rem;font-weight:700;color:var(--ink-70)}
.plans-size__list b{font-size:.92rem;font-weight:800;color:var(--teal-dark);white-space:nowrap}

.plans-note{margin-top:20px;text-align:center;font-size:.86rem;color:var(--ink-55)}
.plans-note b{color:var(--ink)}

/* ---------- 13. Kártyák (jelenleg nincs használatban) ----------
   Az "Amit vállalok" szekciót kivettük az oldalról. A stílus megmaradt,
   így egy HTML-blokkal bármikor visszatehető — pl. valódi véleményekhez. */
.promises{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.8vw,22px)}
.promise{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.6vw,30px);
  transition:transform var(--fast),box-shadow var(--fast),border-color var(--fast);
}
.promise:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:transparent}
.promise__ico{
  width:48px;height:48px;border-radius:15px;display:grid;place-items:center;margin-bottom:18px;
  background:linear-gradient(140deg,var(--mist-2),#fff);color:var(--teal);
  border:1px solid var(--line);transition:all var(--fast);
}
.promise__ico svg{width:22px;height:22px}
.promise:hover .promise__ico{background:var(--grad-aqua);color:#fff;border-color:transparent;box-shadow:var(--sh-teal)}
.promise h3{font-size:1.04rem;margin-bottom:9px}
.promise p{font-size:.9rem;color:var(--ink-70)}

/* ---------- 14. Rólam ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,72px);align-items:center}
.about__media{position:relative}
.about__media img{border-radius:var(--r-xl);box-shadow:var(--sh-lg);aspect-ratio:4/5;object-fit:cover;width:100%}
.about__badge{
  position:absolute;right:-18px;bottom:32px;background:#fff;border-radius:var(--r-md);
  padding:18px 22px;box-shadow:var(--sh-lg);text-align:center;
}
.about__badge b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.04em;line-height:1;color:var(--teal)}
.about__badge small{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-55)}
.about__points{display:grid;gap:18px;margin-top:32px}
.point{display:flex;gap:16px;align-items:flex-start}
.point__ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;background:var(--mist-2);color:var(--teal)}
.point__ico svg{width:21px;height:21px}
.point b{display:block;font-size:1rem;font-weight:800;margin-bottom:3px}
.point p{font-size:.92rem;color:var(--ink-70)}

/* ---------- 15. GYIK ---------- */
.faq{display:grid;gap:12px}
.faq__item{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:box-shadow var(--fast),border-color var(--fast)}
.faq__item.is-open{box-shadow:var(--sh-md);border-color:var(--aqua)}
.faq__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px clamp(20px,2.4vw,28px);text-align:left;
  font-weight:800;font-size:1.02rem;letter-spacing:-.015em;
}
.faq__q i{
  width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--mist);color:var(--teal);font-style:normal;font-size:1.15rem;font-weight:700;
  transition:transform var(--fast),background var(--fast),color var(--fast);
}
.faq__item.is-open .faq__q i{transform:rotate(45deg);background:var(--grad-aqua);color:#fff}
.faq__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--slow)}
.faq__item.is-open .faq__a{grid-template-rows:1fr}
.faq__a>div{overflow:hidden}
.faq__a p{padding:0 clamp(20px,2.4vw,28px) 24px;color:var(--ink-70);font-size:.96rem;max-width:74ch}

/* ---------- 16. Kapcsolat ---------- */
.contact{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,68px);align-items:start}
.contact__list{display:grid;gap:14px;margin-top:36px}
.cline{
  display:flex;gap:16px;align-items:center;min-height:87px;padding:16px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:all var(--fast);
}
a.cline:hover{background:rgba(255,255,255,.13);transform:translateX(5px)}
.cline__ico{width:44px;height:44px;border-radius:13px;flex:none;display:grid;place-items:center;background:var(--grad-aqua);color:#fff}
.cline__ico svg{width:20px;height:20px}
.cline b{display:block;font-size:1rem;font-weight:800}
.cline small{font-size:.79rem;color:rgba(255,255,255,.6);font-weight:700;letter-spacing:.06em;text-transform:uppercase}

.form{background:#fff;color:var(--ink);border-radius:var(--r-xl);padding:clamp(26px,3.2vw,40px);box-shadow:var(--sh-lg)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1 / -1}
.field label{font-size:.79rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-55)}
.field input,.field select,.field textarea{
  font:inherit;font-size:.96rem;color:var(--ink);
  padding:14px 16px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--mist);
  transition:border-color var(--fast),background var(--fast),box-shadow var(--fast);
  width:100%;
}
.field textarea{resize:vertical;min-height:118px}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--aqua);
  background-color:#fff;   /* FIGYELEM: nem `background`, mert az törölné a legördülő nyilat */
  box-shadow:0 0 0 4px rgba(31,191,176,.15)}
.field input:user-invalid,.field textarea:user-invalid{border-color:#D9534F}
/* Az időpont-blokk elválasztója az űrlapon belül */
.field__sep{
  display:flex;align-items:center;gap:14px;margin:10px 0 -2px;
  font-size:.79rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);
}
.field__sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* Tájékoztató sor a legkorábbi választható napról */
.field__hint{
  display:flex;gap:10px;align-items:flex-start;
  font-size:.85rem;font-weight:600;color:var(--ink-70);
  background:var(--mist);border:1px solid var(--line);border-left:3px solid var(--aqua);
  border-radius:var(--r-sm);padding:12px 14px;
}
.field__hint svg{width:17px;height:17px;flex:none;margin-top:2px;color:var(--teal)}
.field__hint b{color:var(--ink);font-weight:800}

/* a csomagkártyáról érkező választás rövid kiemelése */
@keyframes kiemel{
  0%,100%{box-shadow:0 0 0 0 rgba(31,191,176,0)}
  20%,70%{box-shadow:0 0 0 5px rgba(31,191,176,.28)}
}
.dd__btn.is-kiemelve{border-color:var(--aqua);background-color:#fff;animation:kiemel 2.2s var(--ease)}

/* hivatkozás a felkészülési listára a folyamat-lépésben */
.step__link{
  display:inline-block;margin-top:8px;font-weight:800;color:var(--aqua-light);
  border-bottom:1px solid rgba(90,214,198,.45);transition:all var(--fast);
}
.step__link:hover{color:#fff;border-bottom-color:#fff}

.form__consent{display:flex;gap:11px;align-items:flex-start;font-size:.83rem;color:var(--ink-55);margin-top:6px}
.form__consent input{width:19px;height:19px;flex:none;accent-color:var(--teal);margin-top:2px}
.form__note{margin-top:16px;font-size:.8rem;color:var(--ink-40);text-align:center}
.form__ok{
  display:none;gap:14px;align-items:center;padding:16px 18px;border-radius:var(--r-sm);
  background:rgba(31,191,176,.12);border:1px solid rgba(31,191,176,.4);
  font-weight:700;font-size:.92rem;margin-bottom:20px;
}
.form__ok.is-on{display:flex}

.form__hiba{
  display:none;gap:14px;align-items:flex-start;padding:16px 18px;border-radius:var(--r-sm);
  background:rgba(217,83,79,.10);border:1px solid rgba(217,83,79,.42);
  font-weight:700;font-size:.92rem;margin-bottom:20px;color:#8E2F2B;
}
.form__hiba.is-on{display:flex}
.form__hiba svg{width:22px;height:22px;color:#C0392B;flex:none;margin-top:1px}
.form__hiba a{color:#8E2F2B;text-decoration:underline;font-weight:800}
.btn:disabled{opacity:.6;cursor:wait;transform:none}
/* Spam-csapda: a képernyőről levéve, de a botok kitöltik */
.csapda{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__ok svg{width:22px;height:22px;color:var(--teal);flex:none}

/* ---------- 17. CTA sáv + Lábléc ---------- */
.cta-band{
  background:var(--grad-deep);color:#fff;border-radius:var(--r-xl);
  padding:clamp(32px,4vw,52px);text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:"";position:absolute;width:520px;height:520px;border-radius:50%;
  background:#1FBFB0;filter:blur(110px);opacity:.35;top:-50%;right:-8%;
}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin-bottom:12px}
.cta-band .lead{margin-inline:auto;color:rgba(255,255,255,.8)}
.cta-band .hero__actions{justify-content:center}

.footer{background:var(--ink);color:rgba(255,255,255,.72);padding-block:clamp(50px,6vw,72px) 30px;font-size:.92rem}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:clamp(28px,4vw,48px);padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.12)}
.footer h4{font-size:.79rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;margin-bottom:20px}
.footer li{padding-block:5px}
.footer a:hover{color:var(--aqua-light)}
.footer__brand p{margin-top:18px;max-width:38ch;font-size:.9rem}
.socials{display:flex;gap:10px;margin-top:22px}
.socials a{
  width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  transition:all var(--fast);
}
.socials a:hover{background:var(--grad-aqua);border-color:transparent;transform:translateY(-3px)}
.socials svg{width:19px;height:19px}
.footer__bot{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;padding-top:26px;font-size:.83rem;color:rgba(255,255,255,.5)}
.footer__bot ul{display:flex;gap:20px;flex-wrap:wrap}

/* ---------- 18. Animációk ---------- */
/* A rejtés CSAK akkor él, ha a JS betöltött (html.js) — így JS nélkül is olvasható az oldal. */
.js [data-anim]{opacity:0;transform:translateY(26px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
.js [data-anim].is-in{opacity:1;transform:none}
.js [data-anim="fade"]{transform:none}
.js [data-anim="left"]{transform:translateX(-30px)}
.js [data-anim="right"]{transform:translateX(30px)}
.js [data-anim="zoom"]{transform:scale(.95)}
.js [data-anim].is-in{transform:none}

.to-top{
  position:fixed;right:22px;bottom:22px;z-index:800;
  width:50px;height:50px;border-radius:50%;display:grid;place-items:center;
  background:var(--ink);color:#fff;box-shadow:var(--sh-lg);
  opacity:0;visibility:hidden;transform:translateY(14px);transition:all var(--fast);
}
.to-top.is-on{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--teal)}
.to-top svg{width:20px;height:20px}

/* ---------- 19. Reszponzív ---------- */
@media (max-width:1180px){
  .clients__grid{grid-template-columns:repeat(3,1fr);gap:26px 0}
  .clients__item:nth-child(3n+1){border-left:0}
  .services{grid-template-columns:repeat(2,1fr)}
  .svc--wide{grid-column:span 2}
  .gal{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .nav,.header__tel{display:none}
  .burger{display:grid}
  .hero__inner{grid-template-columns:1fr;gap:40px}
  .hero__visual{max-width:470px;margin-inline:auto;width:100%}
  .hero__card{transform:none}
  .hero__float--rating{left:-10px}
  .hero__float--time{right:-10px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps::before{display:none}
  .plans{grid-template-columns:1fr;max-width:560px;margin-inline:auto}
  .plans-size{grid-template-columns:1fr;max-width:560px;margin-inline:auto;gap:20px}
  .plan--best{transform:none}
  .plan--best:hover{transform:translateY(-6px)}
  .plan__desc{min-height:0}
  .promises{grid-template-columns:repeat(2,1fr)}
  .about,.contact{grid-template-columns:1fr}
  .about__media{max-width:420px}
  .footer__top{grid-template-columns:1fr 1fr}
  .scroll-cue{display:none}
}
@media (max-width:720px){
  .promises{grid-template-columns:1fr}
  /* Hero mobilon: tömörebb, hogy ne foglaljon másfél képernyőt */
  .hero{padding:94px 0 44px}
  .hero__inner{gap:30px}
  .pill{font-size:.76rem;margin-bottom:16px;padding:5px 5px 5px 12px}
  .hero h1{font-size:1.95rem;margin-bottom:14px}
  .hero__lead{font-size:.95rem;line-height:1.6}
  .hero__actions{margin-top:22px;gap:10px}
  .hero__stats{margin-top:24px;padding-top:18px;gap:16px 22px}
  .stat b{font-size:1.35rem}
  .stat span{font-size:.68rem;margin-top:4px}
  .hero__float{padding:10px 13px}
  .hero__float .ico{width:32px;height:32px;border-radius:9px}
  .hero__float .ico svg{width:16px;height:16px}

  .plans-size__list{grid-template-columns:1fr}
  .gal-filter{gap:8px}
  .gal-chip{padding:8px 14px;font-size:.81rem}
  .clients__grid{grid-template-columns:repeat(2,1fr);gap:24px 0}
  .clients__item{border-left:0;flex-direction:row;text-align:left;gap:12px;justify-content:flex-start}
  .clients__ico{width:40px;height:40px;border-radius:12px;flex:none}
  .clients__ico svg{width:19px;height:19px}
  .clients__label{font-size:.79rem;padding-right:4px}
  body{line-height:1.65}
  /* a fejlécben nem fér el a logó + CTA + menügomb — a CTA a mobil menüben van */
  .header__cta .btn{display:none}
  .services{grid-template-columns:1fr}
  .svc--wide{grid-column:span 1}
  .gal{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .footer__top{grid-template-columns:1fr;gap:34px}
  .footer__bot{justify-content:center;text-align:center}
  .hero__stats{gap:26px 34px}
  .stat{min-width:calc(50% - 20px)}
  .ba__handle{width:54px;height:54px}
  .ba__tag{top:14px;font-size:.66rem;padding:6px 13px;letter-spacing:.12em}
  .ba__tag--before{left:14px}.ba__tag--after{right:14px}
  .ba-tab{font-size:.8rem;padding:6px 14px 6px 6px}
  .ba-tab img{width:36px;height:36px}
  .about__badge{right:12px;bottom:12px;padding:14px 16px}
  .btn{padding:14px 24px;font-size:.92rem}
  .lb__nav{width:44px;height:44px}
  .lb__nav--prev{left:10px}.lb__nav--next{right:10px}
}
@media (max-width:420px){
  .hero__actions .btn{width:100%}
  .hero__float{padding:11px 14px}
  .hero__float b{font-size:.92rem}
}

/* ---------- 20. Hozzáférhetőség ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .js [data-anim]{opacity:1 !important;transform:none !important}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{
  position:absolute;top:-100px;left:16px;z-index:1200;background:#fff;color:var(--ink);
  padding:12px 20px;border-radius:0 0 12px 12px;font-weight:800;box-shadow:var(--sh-md);
  transition:top var(--fast);
}
.skip:focus{top:0}

@media print{
  .header,.mobile-nav,.to-top,.scroll-cue,.lb,.ba__hint{display:none !important}
  body{color:#000}
  .section{padding-block:24px}
  .js [data-anim]{opacity:1 !important;transform:none !important}
}

/* =========================================================
   21. Felkészülési checklist (felkeszules.html)
   ========================================================= */
.cl-page{background:var(--mist)}

.cl-header{background:#fff;border-bottom:1px solid var(--line);padding-block:16px}
.cl-header__inner{display:flex;align-items:center;justify-content:space-between;gap:20px}
.cl-header .logo{color:var(--ink)}

.cl-main{padding-block:clamp(36px,5vw,64px)}
.cl-intro{margin-bottom:clamp(28px,3.4vw,40px)}
.cl-intro h1{font-size:clamp(2rem,4.4vw,3.1rem);margin-bottom:18px}
.cl-intro .lead{max-width:60ch}

/* haladásjelző */
.cl-progress{
  position:sticky;top:12px;z-index:10;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  padding:14px 18px;box-shadow:var(--sh-sm);margin-bottom:clamp(24px,3vw,34px);
}
.cl-progress__bar{height:7px;border-radius:100px;background:var(--mist-2);overflow:hidden}
.cl-progress__bar span{display:block;height:100%;width:0;background:var(--grad-aqua);border-radius:100px;transition:width .35s var(--ease)}
.cl-progress p{
  display:flex;align-items:center;gap:10px;margin-top:10px;
  font-size:.85rem;font-weight:700;color:var(--ink-55);
}
.cl-progress b{color:var(--ink);font-size:1rem}
#cl-reset{
  margin-left:auto;font-size:.78rem;font-weight:800;color:var(--teal);
  border-bottom:1px solid rgba(14,139,147,.35);transition:color var(--fast)
}
#cl-reset:hover{color:var(--ink)}

/* csoportok */
.cl-group{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2.4vw,28px);margin-bottom:clamp(14px,1.8vw,20px);
}
.cl-group h2{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;
  font-size:1.12rem;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--line);
}
.cl-count{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-40)}
.cl-group ul{display:grid;gap:2px}

.cl-item{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  padding:9px 10px;border-radius:var(--r-sm);
  transition:background var(--fast);
}
.cl-item:hover{background:var(--mist)}
.cl-item input{position:absolute;opacity:0;width:0;height:0}
.cl-box{
  width:23px;height:23px;border-radius:7px;flex:none;margin-top:1px;
  border:2px solid var(--line-strong);background:#fff;
  display:grid;place-items:center;color:#fff;
  transition:all var(--fast);
}
.cl-box svg{width:14px;height:14px;opacity:0;transform:scale(.6);transition:all var(--fast)}
.cl-item input:checked + .cl-box{background:var(--grad-aqua);border-color:transparent}
.cl-item input:checked + .cl-box svg{opacity:1;transform:none}
.cl-item input:focus-visible + .cl-box{outline:3px solid var(--aqua);outline-offset:3px}
.cl-text{font-size:.95rem;font-weight:600;color:var(--ink);transition:color var(--fast)}
.cl-item input:checked ~ .cl-text{color:var(--ink-40);text-decoration:line-through}

.cl-outro{
  background:var(--grad-deep);color:#fff;border-radius:var(--r-xl);
  padding:clamp(26px,3vw,38px);margin-top:clamp(22px,2.6vw,32px);text-align:center;
}
.cl-outro h2{font-size:1.3rem;margin-bottom:12px}
.cl-outro p{color:rgba(255,255,255,.78);max-width:56ch;margin:0 auto 24px;font-size:.96rem}

.cl-footer{background:#fff;border-top:1px solid var(--line);padding-block:24px;text-align:center;font-size:.86rem;color:var(--ink-55)}
.cl-footer a{color:var(--teal);font-weight:700}

@media (max-width:620px){
  .cl-header__inner .btn{display:none}
  .cl-progress{top:8px;padding:12px 14px}
  .cl-text{font-size:.9rem}
}

@media print{
  .cl-header,.cl-progress,.cl-outro,.cl-footer,.to-top{display:none!important}
  .cl-page{background:#fff}
  .cl-group{border:1px solid #ccc;box-shadow:none;break-inside:avoid;margin-bottom:12px}
  .cl-box{border-color:#666}
  .cl-item input:checked ~ .cl-text{color:#000;text-decoration:none}
}


/* =========================================================
   22. Saját legördülő és naptár (natív select / date helyett)
   ========================================================= */
.dd,.dp{position:relative}

.dd__btn{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;
  font:inherit;font-size:.96rem;color:var(--ink);text-align:left;
  padding:14px 16px;min-height:54px;border-radius:var(--r-sm);
  border:1.5px solid var(--line);background:var(--mist);
  transition:border-color var(--fast),background var(--fast),box-shadow var(--fast);
  cursor:pointer;
}
.dd__btn:hover{border-color:var(--line-strong)}
.dd__btn:focus-visible{outline:none;border-color:var(--aqua);background:#fff;box-shadow:0 0 0 4px rgba(31,191,176,.15)}
.dd.is-nyitva .dd__btn,.dp.is-nyitva .dd__btn{border-color:var(--aqua);background:#fff;box-shadow:0 0 0 4px rgba(31,191,176,.15)}
.dd__val{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dd__ikon{width:19px;height:19px;flex:none;color:var(--teal-dark);transition:transform var(--fast)}
.dd.is-nyitva .dd__ikon{transform:rotate(180deg)}
.dp__ures{color:var(--ink-40)}

/* legördülő lista */
.dd__lista{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:6px;max-height:280px;overflow-y:auto;
}
.dd__lista li{
  padding:11px 14px;border-radius:var(--r-sm);cursor:pointer;
  font-size:.94rem;font-weight:600;color:var(--ink-70);
  transition:background var(--fast),color var(--fast);
}
.dd__lista li:hover,.dd__lista li.is-fokusz{background:var(--mist);color:var(--ink)}
.dd__lista li[aria-selected="true"]{background:var(--mist-2);color:var(--ink);font-weight:800}

/* naptár */
.dp__pop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:60;
  width:min(320px,calc(100vw - 48px));
  background:#fff;border:1px solid var(--line);border-radius:var(--r-md);
  box-shadow:var(--sh-lg);padding:14px;
}
.dp__fej{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.dp__ho{font-size:.98rem;font-weight:800;letter-spacing:-.02em;text-align:center;flex:1}
.dp__nav{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  border:1px solid var(--line);background:#fff;color:var(--teal-dark);
  transition:all var(--fast);
}
.dp__nav svg{width:17px;height:17px}
.dp__nav:hover:not(:disabled){background:var(--grad-aqua);border-color:transparent;color:#fff}
.dp__nav:disabled{opacity:.3;cursor:not-allowed}

.dp__fejlec,.dp__racs{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dp__fejlec{margin-bottom:6px}
.dp__fejlec span{
  text-align:center;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-40);padding-block:4px;
}
.dp__nap{
  aspect-ratio:1;display:grid;place-items:center;border-radius:9px;
  font-size:.88rem;font-weight:700;color:var(--ink);
  border:1px solid transparent;background:none;cursor:pointer;
  transition:all var(--fast);
}
.dp__nap:hover:not(:disabled){background:var(--mist-2)}
.dp__nap:disabled{color:var(--ink-40);opacity:.45;cursor:not-allowed}
.dp__nap.is-ma:not(.is-valasztott){border-color:var(--aqua)}
.dp__nap.is-valasztott{background:var(--grad-aqua);color:#fff;box-shadow:var(--sh-teal)}
.dp__ures-cella{aspect-ratio:1}
.dp__labjegyzet{
  margin-top:12px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.74rem;font-weight:600;color:var(--ink-55);text-align:center;
}

/* hibajelzés */
.dp.is-hibas .dd__btn,.dd.is-hibas .dd__btn{border-color:#D9534F}
.mezo-hiba{
  display:flex;align-items:center;gap:7px;margin-top:7px;
  font-size:.8rem;font-weight:700;color:#C0392B;
}
.mezo-hiba svg{width:15px;height:15px;flex:none}

@media (max-width:520px){
  .dp__pop{left:50%;transform:translateX(-50%);width:min(330px,calc(100vw - 40px))}
}

/* =========================================================
   23. Jogi oldalak (adatkezeles.html, impresszum.html)
   ========================================================= */
.jogi{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,3vw,40px);
}
.jogi h2{
  font-size:1.12rem;margin:32px 0 12px;padding-top:22px;
  border-top:1px solid var(--line);
}
.jogi h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.jogi p{font-size:.95rem;color:var(--ink-70);margin-bottom:12px;max-width:70ch}
.jogi ul{margin:0 0 14px;padding-left:0;display:grid;gap:8px}
.jogi li{
  position:relative;padding-left:22px;font-size:.95rem;color:var(--ink-70);
}
.jogi li::before{
  content:"";position:absolute;left:6px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--aqua);
}
.jogi b{color:var(--ink);font-weight:800}
.jogi a{color:var(--teal);font-weight:700;text-decoration:underline}

/* kitöltendő helyek kiemelése */
.jogi mark{
  background:#FFF3CD;color:#6B4E00;font-weight:700;
  padding:1px 6px;border-radius:5px;
}

.jogi__figyelem{
  background:#FFF8E6;border:1px solid #F0DCA0;border-left:3px solid #E3B778;
  border-radius:var(--r-sm);padding:14px 16px;margin-bottom:26px;
}
.jogi__figyelem b{display:block;margin-bottom:5px;color:#6B4E00;font-size:.92rem}
.jogi__figyelem p{margin:0;font-size:.88rem;color:#6B4E00}

.jogi__tabla{
  width:100%;border-collapse:collapse;margin:0 0 18px;
  font-size:.92rem;
}
.jogi__tabla td,.jogi__tabla th{
  padding:10px 12px;border:1px solid var(--line);text-align:left;vertical-align:top;
}
.jogi__tabla th{background:var(--mist);font-weight:800;font-size:.82rem;color:var(--ink)}
.jogi__tabla td:first-child{background:var(--mist);font-weight:700;color:var(--ink);width:34%}
.jogi__tabla--fejlec td:first-child{background:none;font-weight:600;color:var(--ink-70);width:auto}

.jogi__megjegyzes{font-size:.85rem;color:var(--ink-55);font-style:italic}
.jogi__datum{
  margin-top:28px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.88rem;color:var(--ink-55);
}

@media (max-width:620px){
  .jogi__tabla,.jogi__tabla tbody,.jogi__tabla tr,.jogi__tabla td,.jogi__tabla th{display:block;width:auto}
  .jogi__tabla tr{border:1px solid var(--line);border-radius:var(--r-sm);margin-bottom:10px;overflow:hidden}
  .jogi__tabla td,.jogi__tabla th{border:0;border-bottom:1px solid var(--line)}
  .jogi__tabla tr td:last-child{border-bottom:0}
  .jogi__tabla td:first-child{width:auto}
}

/* ---------- 20. Szeptemberi akció ----------
   Alapállapot: NINCS akció. A jelölőt (html.akcio-aktiv) a fejlécbe tett
   pár soros szkript teszi ki, és csak a határidő előtt. Így ha lejár —
   vagy ha valakinél nem fut a JS — az oldal a rendes árakat mutatja.  */
.csak-akcio{display:none}
html.akcio-aktiv .csak-akcio{display:inline}
html.akcio-aktiv .nincs-akcio{display:none}

/* akciósáv a lap tetején */
.promo{display:none}
html.akcio-aktiv .promo{
  display:flex;align-items:center;
  position:fixed;top:0;left:0;right:0;z-index:920;
  height:var(--promo-h);
  background:linear-gradient(100deg,var(--akcio-dark),var(--akcio));
  color:#fff;box-shadow:0 6px 24px -14px rgba(190,61,41,.9);
}
.promo__inner{display:flex;align-items:center;justify-content:center;gap:14px;width:100%}
.promo__tag{
  flex:none;font-size:.67rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  background:rgba(255,255,255,.2);padding:5px 11px;border-radius:100px;
}
.promo__txt{margin:0;font-size:.87rem;font-weight:700;color:rgba(255,255,255,.9)}
.promo__txt b{font-weight:800;color:#fff}
.promo__ido{
  flex:none;font-size:.79rem;font-weight:800;font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.22);padding:5px 11px;border-radius:100px;white-space:nowrap;
}
.promo__ido:empty{display:none}
.promo__btn{
  flex:none;font-size:.8rem;font-weight:800;color:#fff;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;
}
.promo__btn:hover{opacity:.8}

/* hero — egy visszafogott sor a gombok alatt */
html.akcio-aktiv .hero__akcio{
  display:flex;gap:8px;margin:22px 0 0;max-width:52ch;
  font-size:.88rem;font-weight:600;color:rgba(255,255,255,.72);line-height:1.5;
}
.hero__akcio b{color:#fff;font-weight:800}

/* csomagok fejléce: a határidő visszaszámlálva */
html.akcio-aktiv .head__akcio{
  display:inline-flex;align-items:center;gap:0;margin:20px 0 0;
  border-radius:100px;overflow:hidden;box-shadow:var(--sh-sm);
}
.head__akcio-cim{
  background:var(--akcio);color:#fff;padding:9px 15px;
  font-size:.73rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.head__akcio-ido{
  background:#fff;color:var(--akcio-dark);padding:9px 16px;
  font-size:.84rem;font-weight:800;font-variant-numeric:tabular-nums;
  border:1px solid var(--line);border-left:0;
}
.head__akcio-ido:empty{display:none}

/* csomagkártya: áthúzott régi ár + megtakarítás */
html.akcio-aktiv s.plan__old{
  display:block;margin-top:14px;
  font-size:.95rem;font-weight:700;color:var(--ink-55);
  text-decoration-color:var(--akcio);text-decoration-thickness:2px;
}
html.akcio-aktiv .plan--best s.plan__old{color:rgba(255,255,255,.6)}
html.akcio-aktiv .plan__old + .plan__price{margin-top:2px}
/* Figyelem: a .plan--best .plan__price span szabály erősebb, mint egy sima
   .plan--best .plan__save — ezért itt ugyanolyan mély szelektor kell,
   különben a pirula szövege fehér marad a fehér háttéren. */
.plan .plan__price .plan__save{
  font-size:.72rem;font-weight:800;letter-spacing:.03em;white-space:nowrap;
  background:var(--akcio-dark);color:#fff;padding:5px 10px;border-radius:100px;
  align-self:center;
}
.plan--best .plan__price .plan__save{background:#fff;color:var(--akcio-dark)}

/* árlábjegyzet az akció feltételével */
html.akcio-aktiv .plans-note--akcio{
  display:block;max-width:none;margin:22px auto 0;padding:14px 20px;
  background:var(--akcio-halvany);border:1px solid rgba(226,96,74,.24);
  border-radius:var(--r-md);color:var(--ink-70);
}
.plans-note--akcio b{color:var(--akcio-dark)}

/* űrlap: emlékeztető a küldés gomb fölött */
html.akcio-aktiv .form__akcio{
  display:flex;gap:10px;align-items:flex-start;margin:20px 0 0;padding:13px 15px;
  background:var(--akcio-halvany);border:1px solid rgba(226,96,74,.24);
  border-radius:var(--r-sm);font-size:.85rem;font-weight:600;color:var(--ink-70);line-height:1.45;
}
.form__akcio svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--akcio)}
.form__akcio b{color:var(--akcio-dark);font-weight:800}

@media (max-width:860px){
  .promo__tag,.promo__btn{display:none}
  .promo__inner{gap:10px}
  .promo__txt{font-size:.8rem}
  .promo__ido{font-size:.74rem;padding:4px 9px}
}
@media (max-width:560px){
  /* keskeny kijelzőn csak a lényeg fér ki egy sorba */
  .promo__hosszu{display:none}
}