/* =============================================================
   MANROPE — helyben kiszolgálva
   Korábban a Google Fonts CDN-jéről jött: két külön külső kapcsolat
   (fonts.googleapis.com + fonts.gstatic.com) DNS+TLS költséggel, ami
   lassú mobilhálózaton érezhetően késleltette az első kirajzolást.
   Ez egyben adatvédelmi előny is: a látogató IP-címe nem jut ki
   harmadik félhez. A Manrope OFL licencű, a helyi kiszolgálás
   engedélyezett. Variábilis betű: egy fájl fedi a 400-800 súlyt.
   ============================================================= */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* =============================================================
   Kerticsobogók.hu — style.css
   Szögletes, editorial, komoly. Nincs sablon landing page.

   A vizuális rendszer (térköz, tipográfia, komponensfelépítés,
   reszponzív viselkedés, mozgás) a tulajdonos saját, korábbi
   designrendszerét követi. A SZÍNEK viszont kizárólag a
   kerticsobogok.hu jóváhagyott márkapalettájából származnak:
   a forrásrendszer borostyán akcentusa termékeredetű márkajel
   volt, ezért itt a vízzöld tölti be ugyanazt a szerepet.

   JÓVÁHAGYOTT MÁRKASZÍNEK (csak ez a négy):
     #234A3A  mély erdőzöld    — elsődleges sötét felület, gombok
     #287A78  vízzöld / petrol — elsődleges interaktív akcentus
     #F5F2E9  meleg törtfehér  — fő háttér
     #E7E2D7  természetes kő   — váltakozó szekciók és kártyák

   Minden további érték ezekből származtatott állapotszín
   (hover / focus / hiba / sötét téma). Ötödik márkaszín nincs.
   Nyers színkód a stíluslapban csak itt, a tokenblokkban szerepel.
   ============================================================= */

/* ---- Custom properties ---- */
:root {
  color-scheme: light;

  /* ---- Márkaalap (jóváhagyott) ---- */
  --brand-forest: #234A3A;
  --brand-water:  #287A78;
  --brand-sand:   #F5F2E9;
  --brand-stone:  #E7E2D7;

  --bg:          var(--brand-sand);
  --surface:     var(--brand-stone);
  --text:        #101A15;   /* mély, zöldes fekete */
  --muted:       #46554C;
  --green:       var(--brand-forest);
  --green-dk:    #16311F;   /* sötétebb zöld panel */
  --green-lt:    #DDE9E1;   /* levegős világoszöld */
  --accent:      var(--brand-water);
  --accent-lt:   #DEEBEA;

  /* A forrásrendszer borostyán akcentusának szerepét itt a vízzöld
     tölti be: navigáció, hover, kiemelők, fókusz, számozás. */
  --water:       var(--brand-water);
  --water-lt:    #DEEBEA;   /* halvány vízzöld tint */
  --water-text:  #1F6360;   /* WCAG AA szövegszín világos háttéren */
  --water-bright:#4FB8B5;   /* vízzöld sötét felületen */
  --water-glow:  #7FD4D0;   /* AA kis szöveg sötét erdőzöld panelen */
  --on-dark-accent: var(--water-glow);

  /* Gomb-előtér: az erdőzöld kitöltésen álló szöveg/ikon színe.
     Sötét témában a zöld világosabbra vált, ezért ott a fehér már
     nem érné el az AA-t — a token gondoskodik a párosításról. */
  --btn-fg:      #FFFFFF;   /* 9,9:1 a #234A3A kitöltésen */
  --btn-bg-hover:#16311F;   /* mélyebb erdőzöld */
  --btn-fg-hover:#FFFFFF;   /* 14,1:1 a #16311F kitöltésen */

  --rule:        #D5CFC1;   /* vékony vonalas elválasztó */
  --rule-strong: #6E7D73;
  --card-bg:     #FBF8F1;   /* melegebb, krémes kártyaháttér */
  --media-glow:  radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.95) 0%, rgba(255,255,255,.4) 45%, rgba(255,255,255,0) 78%);

  --error:       #B3261E;
  --error-bg:    #FBEBE9;

  --font: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Radius: minimal — max 2-3px */
  --r: 2px;

  --max-w: 1200px;
  --header-h: 68px;
  --cta-bar-h: 80px;   /* mobil alsó CTA sáv (mért: 75,7px) + puffer */
  --pad-x: clamp(1.25rem, 5vw, 2.5rem);

  /* Teljes szélességű ("bleed") szekciók kiszélesítése a konténeren túl. */
  --bleed: max(0px, (100vw - var(--max-w)) / 2);

  /* Lightbox: a nagy nézet háttere mindkét témában sötét marad. */
  --lightbox-backdrop:   rgba(12, 22, 17, .92);
  --lightbox-control-bg: rgba(12, 22, 17, .55);
}

/* Dark mode — éjszakai kert */
[data-theme="dark"] {
  color-scheme: dark;

  --bg:          #0B140F;
  --surface:     #16241D;
  --text:        var(--brand-stone);
  --muted:       #A3B0A6;
  --green:       #4FA86A;
  --green-dk:    #1D3B2F;   /* emelt sötét panel */
  --green-lt:    #132018;
  --accent:      var(--water-bright);
  --accent-lt:   #10241F;
  --btn-fg:      #06140D;   /* 9,1:1 a világosabb #4FA86A kitöltésen */
  /* Sötét témában a hover NEM mélyít, hanem világosít — a mélyítés itt
     beleolvadna a háttérbe, és a gombfelirat kontrasztja elveszne. */
  --btn-bg-hover:#7FD199;   /* világosabb erdőzöld */
  --btn-fg-hover:#06140D;   /* 12,4:1 a #7FD199 kitöltésen */

  --water:       var(--water-bright);
  --water-lt:    rgba(79,184,181,.13);
  --water-text:  var(--water-bright);
  --on-dark-accent: var(--water-glow);

  --rule:        #1F2E26;
  --rule-strong: #3C4E43;
  --card-bg:     #13221B;
  --media-glow:  radial-gradient(ellipse at 50% 45%, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 78%);

  --error:       #FF8A80;
  --error-bg:    #2A1615;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
  transition: background .35s, color .35s;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
input, textarea, select { font-family: inherit; }
p { max-width: 68ch; }

/* ---- Typography ---- */
h1 { font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; }
h3 { font-size: clamp(1rem, 2vw, 1.2rem); font-weight: 700; line-height: 1.3; }
h4 { font-size: .95rem; font-weight: 700; }

/* ---- Layout ---- */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}
.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.page-home .section { padding-block: clamp(2rem, 5vw, 3.5rem); }

/* Főoldal: finomított, kevésbé "ordító" kiemelt címméretek */
body.page-home h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); line-height: 1.18; }
@media (min-width: 769px) {
  body.page-home h1 { font-size: clamp(2.2rem, 6vw, 3.5rem); line-height: 1.1; }
}
.section--tight { padding-block: clamp(2rem, 4vw, 3.25rem); }
.section--flush { padding-block: 0; }
.section--no-top { padding-block-start: 0; }
.text-center { text-align: center; }
.text-muted { color: var(--muted); }
.text-white { color: #fff; }

/* Görgetéscél: sticky fejléc alá ne csússzon a horgonyzott szekció */
.anchor-target { scroll-margin-top: calc(var(--header-h) + 1rem); }
.anchor-target:focus { outline: none; }

/* Csak képernyőolvasónak */
.visually-hidden {
  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;
}

/* ---- Buttons — szögletes, komoly ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .78rem 1.5rem;
  border-radius: var(--r);
  font-weight: 700;
  font-size: .92rem;
  letter-spacing: .01em;
  transition: background .15s, color .15s, border-color .15s;
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
}
.btn:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; }

.btn--primary {
  background: var(--green);
  color: var(--btn-fg);
  border-color: var(--green);
}
.btn--primary:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-bg-hover); }

.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,.45);
}
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.1); }

.btn--outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn--outline:hover { background: var(--green); color: var(--btn-fg); }

.btn--outline-dark {
  background: transparent;
  color: var(--text);
  border-color: var(--rule-strong);
}
.btn--outline-dark:hover { border-color: var(--text); }

/* btn--accent → primary alias (belső oldalak régi neve) */
.btn--accent { background: var(--green); color: var(--btn-fg); border-color: var(--green); }
.btn--accent:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--btn-bg-hover); }
/* ghost-light alias */
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); border-width: 1.5px; }
.btn--ghost-light:hover { border-color: #fff; background: rgba(255,255,255,.08); }

.btn--lg { padding: .9rem 1.8rem; font-size: .86rem; }
.btn--sm { padding: .55rem 1rem; font-size: .78rem; }

/* Sötét panelen a gombok fókuszgyűrűje a világos vízzöld — a szokásos
   #287A78 gyűrű a mély erdőzöldön nem lenne elég kontrasztos. */
.hero__panel .btn:focus-visible,
.page-hero .btn:focus-visible,
.cta-block--green .btn:focus-visible,
.product-band__text .btn:focus-visible,
.cta-band .btn:focus-visible { outline-color: var(--water-glow); }

.product-band__text .btn--ghost,
.cta-block--green .btn--ghost { color: #fff; }

/* ================================================================
   HEADER / NAVIGATION
   Flex: logo (shrink 0) | nav (flex-1, középen) | akciók (shrink 0)
   ================================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(245,242,233,.97);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: background .3s;
}
[data-theme="dark"] .site-header { background: rgba(11,20,15,.97); }

.header-inner {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 1.5rem;
}

/* ---- Logo ---- */
.site-logo {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--green);
  transition: opacity .2s;
}
.site-logo:hover { opacity: .8; }

.site-logo svg,
.site-logo img {
  height: 32px;
  width: auto;
  display: block;
  flex-shrink: 0;
}

.site-logo__text {
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--green);
  white-space: nowrap;
}
[data-theme="dark"] .site-logo,
[data-theme="dark"] .site-logo__text { color: var(--text); }

/* ---- Nav — flex-1, tényleg középre ---- */
.site-nav {
  flex: 1;
  align-self: stretch;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}
/* Nav-link méretezés — minden breakpointon azonos, az aktív linket is beleértve.
   Csak az alsó border/szín jelzi az aktív állapotot, méret/súly nem változik. */
.site-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  padding-inline: 1.65rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .18s, border-color .18s;
}
.site-nav a:hover {
  color: var(--text);
  border-bottom-color: var(--water);
}
.site-nav a[aria-current="page"] {
  color: var(--text);
  font-weight: 600;
  border-bottom-color: var(--water);
}

/* ---- Akciók — jobb oldal, nem préseli a navot ---- */
.header-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
}

/* Telefon: kompakt, de olvasható */
.phone-link {
  display: flex;
  align-items: center;
  gap: .35rem;
  font-weight: 600;
  font-size: .8rem;
  color: var(--text);
  letter-spacing: .01em;
  padding: .35rem .5rem;
  white-space: nowrap;
  transition: color .18s;
  border-radius: var(--r);
}
.phone-link:hover { color: var(--text); }
.phone-link svg { color: var(--water-text); flex-shrink: 0; }
/* A telefonszám szövege alapból rejtve (csak ikon) — 1200px-től megjelenik. */
.phone-link span { display: none; }
/* Asztali gépen a telefonszám nem hívógomb (nincs tárcsázó), ezért ott
   nem kattintható — a href attribútum viszont megmarad a DOM-ban. */
@media (min-width: 769px) {
  .phone-link { pointer-events: none; cursor: default; }
}

.header-cta {
  flex-shrink: 0;
  white-space: nowrap;
}

/* ================================================================
   THEME TOGGLE — fix pozíció, scroll-top gomb fölött
   ================================================================ */
.theme-toggle {
  position: fixed;
  right: 1.5rem;
  bottom: calc(1.5rem + 40px + 12px);
  z-index: 990;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--green);
  color: var(--btn-fg);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: background .15s, border-color .15s;
}
.theme-toggle:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--water); }
.theme-toggle:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; }
.theme-toggle svg {
  position: absolute;
  top: 50%; left: 50%;
  width: 16px; height: 16px;
  pointer-events: none;
  color: currentColor;
  transition: transform .3s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
/* Világos módban: hold látható, nap elrejtve */
.icon-moon { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; }
.icon-sun  { transform: translate(-50%,-50%) rotate(45deg) scale(.6); opacity: 0; }
/* Sötét módban: nap látható, hold elrejtve */
[data-theme="dark"] .icon-moon { transform: translate(-50%,-50%) rotate(-45deg) scale(.6); opacity: 0; }
[data-theme="dark"] .icon-sun  { transform: translate(-50%,-50%) rotate(0deg) scale(1); opacity: 1; }

/* Hamburger */
.hamburger {
  display: none;
  width: 36px; height: 36px;
  flex-direction: column; justify-content: center; align-items: center;
  gap: 5px;
  border-radius: var(--r);
  border: 1px solid var(--rule);
  flex-shrink: 0;
  transition: border-color .18s;
}
.hamburger:hover { border-color: var(--water); }
.hamburger:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.hamburger span {
  display: block; width: 17px; height: 1.5px;
  background: var(--text); border-radius: 1px;
  transition: transform .18s, opacity .18s;
}
.hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ---- Mobil nav drawer ---- */
.mobile-nav {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: var(--bg);
  z-index: 999;
  padding: 0 var(--pad-x) 8rem;
  overflow-y: auto;
  border-top: 2px solid var(--water);   /* vízzöld felső csík a mobilmenün */
}
.mobile-nav.is-open { display: flex; flex-direction: column; }
.mobile-nav a {
  display: flex;
  align-items: center;
  padding: .95rem 0;
  font-weight: 700; font-size: 1rem;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text);
  border-bottom: 1px solid var(--rule);
  transition: color .15s, padding-left .15s;
  position: relative;
}
.mobile-nav a::before {
  content: '';
  display: block;
  width: 0; height: 2px;
  background: var(--water);
  position: absolute;
  left: 0; bottom: -1px;
  transition: width .2s ease;
}
.mobile-nav a:hover { color: var(--text); padding-left: .5rem; }
.mobile-nav a:hover::before { width: 24px; }
.mobile-nav a[aria-current="page"] { color: var(--green); }
[data-theme="dark"] .mobile-nav a[aria-current="page"] { color: var(--water); }
.mobile-nav .mobile-ctas {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}

/* Mobil menü CTA gombok — egységes méret/padding/keret, és explicit szín
   alap- és hover/focus állapotban. */
.mobile-ctas .btn {
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  padding: .85rem 1.75rem;
  border-width: 2px;
  border-radius: var(--r);
  justify-content: center;
}
.mobile-ctas .btn--outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.mobile-ctas .btn--outline:hover,
.mobile-ctas .btn--outline:focus-visible {
  background: var(--green);
  color: var(--btn-fg);
  border-color: var(--green);
}
.mobile-ctas .btn--primary {
  background: var(--green);
  color: var(--btn-fg);
  border-color: var(--green);
}
.mobile-ctas .btn--primary:hover,
.mobile-ctas .btn--primary:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-bg-hover);
}

/* ---- Mobil alsó CTA sáv ---- */
.mobile-cta-bar {
  display: none;
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 998;
  background: var(--bg);
  border-top: 1px solid var(--rule);
  padding: .6rem var(--pad-x);
  gap: .5rem;
}
.mobile-cta-bar .btn {
  flex: 1;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  min-height: 48px;
  padding: .85rem 1.75rem;
  border-width: 2px;
  border-radius: var(--r);
}
.mobile-cta-bar .btn--outline {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.mobile-cta-bar .btn--outline:hover,
.mobile-cta-bar .btn--outline:focus-visible {
  background: var(--green);
  color: var(--btn-fg);
  border-color: var(--green);
}
.mobile-cta-bar .btn--primary,
.mobile-cta-bar .btn--accent {
  background: var(--green);
  color: var(--btn-fg);
  border-color: var(--green);
}
.mobile-cta-bar .btn--primary:hover,
.mobile-cta-bar .btn--primary:focus-visible,
.mobile-cta-bar .btn--accent:hover,
.mobile-cta-bar .btn--accent:focus-visible {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  border-color: var(--btn-bg-hover);
}

/* ---- HERO — split layout, nem overlay gradient ---- */
.hero {
  display: grid;
  grid-template-columns: 42% 58%;
  min-height: min(88vh, 664px);
  overflow: hidden;
}

.hero__panel {
  background: var(--green-dk);
  color: #fff;
  padding: clamp(3rem, 6vw, 5.5rem) var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.6rem;
}

/* Felső info sor */
.hero__location {
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .05em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: .5rem;
}

.hero h1 { color: #fff; }
.hero-title--fit { font-size: clamp(2rem, 3.4vw, 2.7rem); }
/* A víz színe jelenik meg a hero fő frázisán — visszafogott, de prémium */
.hero h1 strong { color: var(--on-dark-accent); display: block; }

.hero__sub {
  font-size: clamp(.9rem, 1.6vw, 1.05rem);
  color: #fff;
  line-height: 1.72;
  max-width: 42ch;
  border-left: 2px solid rgba(127,212,208,.34);   /* finom vízzöld akcentusvonal */
  padding-left: 1rem;
}
.hero__sub--secondary { border-left-color: rgba(127,212,208,.18); }

.hero__ctas { display: flex; gap: .75rem; flex-wrap: wrap; }

.hero__visual {
  position: relative;
  overflow: hidden;
  background: var(--green-dk);
}
.hero__visual img {
  position: absolute;
  inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
}
/* Enyhe sötét vignett a kép bal szélén — éles átmenettel illeszkedik a panelhoz */
.hero__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(13,36,24,.25) 0%, transparent 30%);
  pointer-events: none;
}

/* ---- Section label — kevés dekoráció, erős hierarchia ---- */
.overline,
.section-label {
  display: block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--water-text);   /* WCAG AA vízzöld világos háttéren */
  margin-bottom: .6rem;
}

.section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section-header p {
  margin-top: .7rem;
  color: var(--text);
  font-size: 1.02rem;
  max-width: 60ch;
}
.section-header.text-center p { margin-inline: auto; }

/* Hosszabb bevezető a "Miért jó a kerti csobogó?" szekcióban */
.benefit-intro { font-size: 1.02rem; line-height: 1.75; max-width: 68ch; }

/* ---- Two-col ---- */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: center;
}

/* ---- Layout komponens osztályok ---- */

/* Statement band — teljes szélességű, erős állítás */
.statement-band {
  background: var(--green);
  padding: 2rem var(--pad-x);
}
.statement-band .container { max-width: var(--max-w); margin-inline: auto; }
.statement-band p {
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
  font-weight: 800;
  color: #fff;
  max-width: none;
  line-height: 1.35;
  text-align: center;
}

/* Product band — kép + sötétzöld szövegpanel */
.product-band {
  display: grid;
  grid-template-columns: 55% 45%;
  min-height: 400px;
  overflow: hidden;
}
.product-band__photo {
  overflow: hidden;
  position: relative;
  min-height: 300px;
}
.product-band__photo img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 55%;
  display: block;
  transition: filter .35s ease;
}
.product-band__text {
  background: var(--green-dk);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(1.5rem, 3.5vw, 2.8125rem);
}
.product-band__text .overline { color: var(--on-dark-accent); }
.product-band__text h2 { color: #fff; margin-top: .5rem; margin-bottom: 1rem; }
.product-band__text p { color: #fff; max-width: 42ch; }
.product-band__text .feature-item { color: #fff; }

/* Kiegyensúlyozottabb, kevésbé kép-domináns variáns */
.product-band--balanced { grid-template-columns: 55% 45%; min-height: 460px; }
.product-band--balanced .product-band__text { padding: clamp(1.5rem, 3.5vw, 2.8125rem); }

/* Egységes kép- és szövegmagasság a három egymást követő bemutatóblokkban. */
@media (min-width: 901px) {
  .page-home .product-band,
  .page-home .split-band:not(.personal-intro) {
    height: 460px;
    min-height: 460px;
  }
  .page-home .product-band__text,
  .page-home .split-band:not(.personal-intro) .split-band__panel {
    padding-block: 2rem;
  }
  .page-home .product-band__text h2,
  .page-home .split-band:not(.personal-intro) .split-band__panel h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.1rem);
  }
}

/* Szöveg-elöl variáns: a kép aránya (55%) marad a domináns */
.product-band--text-first { grid-template-columns: 45% 55%; }

/* ---- Split band — világos szövegpanel + kép (product-band világos párja) ---- */
.split-band {
  display: grid;
  grid-template-columns: 45% 55%;
  min-height: 400px;
  overflow: hidden;
}
.split-band__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.75rem) var(--pad-x);
  background: var(--surface);
}
.split-band__panel > .container { padding-inline: 0; }
.split-band--light .split-band__panel { background: var(--surface); }
.split-band__panel h2 { margin-bottom: 0; }
.split-band__panel p { color: var(--text); max-width: 46ch; line-height: 1.8; }
.split-band__media {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  background: var(--rule);
}
.split-band__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 50%;
  transition: transform .5s ease, filter .35s ease;
}
.split-band__media:hover img { transform: scale(1.025); }
/* Szöveg elöl a DOM-ban — a panel kapja a keskenyebb oszlopot */
.split-band--text-first { grid-template-columns: 45% 55%; }

/* Személyes bemutatkozó blokk */
.personal-intro .split-band__panel { padding-block: clamp(1.5rem, 3vw, 2.25rem); }

/* ---- Benefit grid — számozott, vonalas kártyák ---- */
.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0;
  border-top: 2px solid var(--water);
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}
.benefit-card {
  padding: 1.5rem 1.4rem 1.6rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--card-bg);
  transition: background .15s, border-color .15s;
}
.benefit-card:hover { background: var(--green-lt); }
.benefit-card__n {
  display: block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--water-text);
  font-variant-numeric: tabular-nums;
  margin-bottom: .5rem;
}
.benefit-card h3 { margin-bottom: .35rem; font-size: 1.05rem; }
.benefit-card p { color: var(--text); font-size: .9rem; line-height: 1.7; max-width: none; }

.page-home #miert-jo .section-header { text-align: center; }
.page-home #miert-jo .section-header p { margin-inline: auto; }
@media (min-width: 901px) {
  .benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---- Área szekció ---- */
.area-section { background: var(--surface); }
.area-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.area-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.4rem; }
.area-tag {
  background: transparent;
  border: 1px solid var(--text);
  border-radius: var(--r);
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--text);
  transition: border-color .15s, color .15s, background .15s;
}
.area-tag:hover { border-color: var(--text); color: var(--bg); background: var(--text); }
.area-tag--primary { border-color: var(--water-text); color: var(--water-text); font-weight: 800; }
.area-line { font-size: 1rem; line-height: 1.8; }

/* ---- Intro two-col: szöveg + highlight lista ---- */
.intro-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* ---- Media split — kép + szöveg sor (ajánlatkérés oldal) ---- */
.media-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.media-split + .media-split { margin-top: clamp(2.5rem, 5vw, 4rem); }
.media-split--media-last .media-split__media { order: 2; }
.media-split__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--rule);
  border-radius: var(--r);
}
.media-split__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: var(--media-focus, center 45%);
  display: block;
  transition: transform .5s ease, filter .35s ease;
}
.media-split__media:hover img { transform: scale(1.025); }
.media-split__body h3 { margin-bottom: .35rem; }
.media-split__body h2 + p { margin-top: .85rem; }

/* ---- Teljes szélességű ("bleed") képsávok ----
   A kép a konténer helyett a viewport széléig fut. A --bleed a
   konténeren kívüli sáv szélessége; szűk nézeten 0, ilyenkor a
   szabály önmagától semlegessé válik. */
.section--media-bleed-left,
.section--media-bleed-right,
.section--form-bleed-left { overflow: hidden; }

.section--media-bleed-left > .container,
.section--form-bleed-left > .container { padding-left: 0; }
.section--media-bleed-right > .container { padding-right: 0; }

.section--media-bleed-left .media-split,
.section--media-bleed-right .media-split {
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3rem);
}
.section--media-bleed-left .media-split__media {
  margin-left: calc(-1 * var(--bleed));
  width: calc(100% + var(--bleed));
}
.section--media-bleed-right .media-split__media {
  width: calc(100% + var(--bleed));
}
.section--media-bleed-left .media-split__media,
.section--media-bleed-right .media-split__media {
  aspect-ratio: auto;
  height: var(--bleed-h, clamp(420px, 38vw, 480px));
  min-height: 0;
  border-radius: 0;
}
.section--form-bleed-left .form-split__photo {
  margin-left: calc(-1 * var(--bleed));
  width: calc(100% + var(--bleed));
  border-radius: 0;
}

.offer-process-intro { padding-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.offer-process-steps { padding-block-end: clamp(1.5rem, 3vw, 2.25rem); }

/* ---- Photo block / frame ---- */
.photo-block,
.photo-frame {
  position: relative;
  overflow: hidden;
  background: var(--rule);
}
.photo-block { aspect-ratio: 4/3; }
.photo-block img,
.photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transition: transform .5s ease, filter .35s ease;
}
.photo-block:hover img { transform: scale(1.025); filter: saturate(1.24) contrast(1.08) brightness(1.04); }

/* ---- CTA band — full width, dark, no rounded ---- */
.cta-band {
  background: var(--green-dk);
  color: #fff;
  padding-block: clamp(3rem, 6vw, 5rem);
  border-top: 2px solid rgba(255,255,255,.05);
}
.cta-band h2 { color: #fff; margin-bottom: .75rem; }
.cta-band p { color: #fff; max-width: 56ch; margin-bottom: 2rem; }
.cta-band__actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.cta-band .overline { color: #fff; }

/* ---- Highlight list ---- */
.highlight-list {
  border-top: 1px solid var(--rule);
}
.highlight-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .92rem; font-weight: 600;
}
.highlight-row svg { color: var(--water-text); flex-shrink: 0; }

/* ---- Feature list ---- */
.feature-list { display: flex; flex-direction: column; gap: .65rem; }
.feature-item { display: flex; align-items: flex-start; gap: .7rem; font-size: .92rem; }
.feature-item svg { flex-shrink: 0; margin-top: .15rem; color: var(--green); }
[data-theme="dark"] .feature-item svg { color: var(--water); }

/* ---- Steps / process ---- */
.steps { border-top: 2px solid var(--text); }
.step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 1.5rem;
  align-items: start;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.step__num {
  font-size: 2.4rem; font-weight: 800;
  color: var(--water-text);
  line-height: 1;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
.step__content h4 { padding-top: .25rem; margin-bottom: .35rem; font-size: 1.05rem; font-weight: 700; }
.step__content h3 { padding-top: .25rem; margin-bottom: .35rem; font-size: 1.05rem; }
.step__content p { color: var(--text); font-size: .9rem; }

/* ---- Galéria (referenciák) ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: var(--rule);
  border-top: 2px solid var(--water);
}
.gallery-item {
  display: block;
  /* A képernyőn kívüli kártyák elrendezését/festését a böngésző
     kihagyhatja — 27 elemnél ez érdemi renderelési megtakarítás.
     A contain-intrinsic-size tartja a helyet, így a görgetősáv
     és az elrendezés nem ugrál. */
  content-visibility: auto;
  contain-intrinsic-size: auto 280px;
}
.gallery-card__trigger {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background: var(--surface);
  cursor: pointer;
  aspect-ratio: 4/3;
}
.gallery-card__trigger img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 45%;
  display: block;
  transition: transform .5s ease, filter .35s ease;
}
.gallery-card__trigger:hover img,
.gallery-card__trigger:focus-visible img { transform: scale(1.04); filter: saturate(1.24) contrast(1.08) brightness(1.05); }
.gallery-card__trigger:focus-visible { outline: 2px solid var(--water); outline-offset: -2px; }
.gallery-card__zoom {
  position: absolute;
  right: .75rem; bottom: .75rem;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lightbox-control-bg);
  color: #fff;
  border-radius: var(--r);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.gallery-card__zoom svg { width: 16px; height: 16px; }
.gallery-card__trigger:hover .gallery-card__zoom,
.gallery-card__trigger:focus-visible .gallery-card__zoom { opacity: 1; transform: translateY(0); }

/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
}
.lightbox[hidden] { display: none; }
.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--lightbox-backdrop);
}
.lightbox__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  width: 100%;
  max-width: 1100px;
}
.lightbox__figure {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.lightbox__figure img {
  max-width: 100%;
  max-height: min(78vh, 820px);
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--r);
  box-shadow: 0 24px 64px rgba(0,0,0,.45);
}
.lightbox__caption {
  color: rgba(255,255,255,.82);
  font-size: .85rem;
  line-height: 1.5;
  text-align: center;
  max-width: 62ch;
}
.lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: -1.9rem;
  transform: translateX(-50%);
  margin: 0;
  color: rgba(255,255,255,.7);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.lightbox__close,
.lightbox__nav {
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lightbox-control-bg);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: var(--r);
  color: #fff;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lightbox__close:hover,
.lightbox__nav:hover { background: var(--green); border-color: var(--water); }
.lightbox__close:focus-visible,
.lightbox__nav:focus-visible { outline: 2px solid var(--water-glow); outline-offset: 2px; }
.lightbox__close svg,
.lightbox__nav svg { width: 20px; height: 20px; }
.lightbox__close {
  position: absolute;
  top: -3.25rem; right: 0;
  z-index: 2;
}
.lightbox__nav[hidden] { display: none; }

/* Görgetészár — a JS ezeket az osztályokat teszi a <body>-ra */
body.lightbox-open,
body.mobile-nav-open { overflow: hidden; }

/* ---- Vélemények ---- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 0;
  border-top: 2px solid var(--water);
}
.testimonial-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 215px;
  padding: 1.6rem 1.5rem;
  border-bottom: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  background: var(--card-bg);
}
.testimonial-card blockquote p {
  font-size: .92rem;
  line-height: 1.75;
  color: var(--text);
  max-width: none;
}
.testimonial-card__name {
  margin-top: .85rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--water-text);
}

/* ---- Form split — kép + űrlap arányos kétoszlopos elrendezés ---- */
.form-split {
  display: grid;
  grid-template-columns: .95fr 1.05fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: stretch;
}
.form-split__photo {
  aspect-ratio: auto;
  height: 100%;
  min-height: 480px;
  border-radius: var(--r);
}
.form-split__content .section-header { margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); }

/* ---- Form ---- */
.form-wrapper {
  background: var(--card-bg);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(1.5rem, 4vw, 2.75rem);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.form-full { grid-column: 1 / -1; }
.form-group { display: flex; flex-direction: column; gap: .35rem; }
.form-group label { font-size: .78rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--text); }
.form-group label .req,
.consent-text .req { color: var(--error); margin-left: .1em; }
.form-optional { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: 1; }
.form-control {
  width: 100%; padding: .72rem .9rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r);
  background: var(--bg);
  color: var(--text); font-size: .93rem;
  transition: border-color .15s, box-shadow .15s;
}
/* A mezőfókusz ugyanazt a jól látható vízzöld gyűrűt kapja, mint a
   többi vezérlő — a korábbi halvány tintes glow alig vált el a laptól. */
.form-control:focus {
  outline: 2px solid var(--water);
  outline-offset: 1px;
  border-color: var(--water);
}
.form-control::placeholder { color: var(--text); opacity: .68; }
textarea.form-control { resize: vertical; min-height: 96px; }

/* Jelölőnégyzet-csoport */
.field-group { border: none; padding: 0; margin: 0; min-width: 0; }
.field-group__legend {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--text);
  padding: 0;
  margin-bottom: .5rem;
}
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .9rem; }
/* A .form-group label (0,1,1) felülírná a .check-option-t (0,1,0), ezért
   a jelölőnégyzet-címkéknél azonos súlyú szelektorral írjuk vissza. */
.form-group .check-option,
.check-option {
  display: flex; align-items: center; gap: .55rem;
  cursor: pointer;
  font-size: .88rem; font-weight: 500;
  text-transform: none; letter-spacing: 0;
  color: var(--text);
  padding: .35rem .5rem .35rem 0;
  min-height: 40px;
}
.check-option input[type="checkbox"] {
  width: 17px; height: 17px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.check-option input:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }

.form-hint { font-size: .75rem; color: var(--text); }
.form-error { font-size: .75rem; color: var(--error); font-weight: 600; display: none; }
.form-group.has-error .form-control { border-color: var(--error); }
.form-group.has-error .form-control:focus { outline-color: var(--error); border-color: var(--error); }
.form-group.has-error .form-error { display: block; }

/* Kliensoldali hibaösszegző + szerveroldali hibasáv */
.form-summary,
.form-alert {
  border: 1px solid var(--error);
  border-left-width: 3px;
  background: var(--error-bg);
  color: var(--text);
  padding: .9rem 1.1rem;
  margin-bottom: 1.25rem;
  font-size: .88rem;
  border-radius: var(--r);
}
.form-summary[hidden],
.form-alert[hidden] { display: none; }
.form-summary:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }
.form-summary__title { font-weight: 800; margin-bottom: .4rem; max-width: none; }
.form-summary ul { list-style: disc; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.form-summary a,
.form-alert a { color: var(--water-text); text-decoration: underline; font-weight: 700; }
[data-theme="dark"] .form-summary a,
[data-theme="dark"] .form-alert a { color: var(--water-glow); }

/* consent-label: felülírja a .form-group label text-transform: uppercase-ét. */
.form-group .consent-label,
.consent-label {
  display: flex; align-items: flex-start; gap: .65rem;
  font-size: .86rem; color: var(--text); cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 400;
}
.consent-label input {
  margin-top: 2px; flex-shrink: 0;
  width: 17px; height: 17px;
  accent-color: var(--green);
}
.consent-label input:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; }
.consent-label .consent-text { min-width: 0; flex: 1 1 auto; }
.consent-label a { color: var(--water-text); text-decoration: underline; }
[data-theme="dark"] .consent-label a { color: var(--water); }
.hp-field { display: none !important; }
.form-submit { margin-top: 1.4rem; }
.form-submit .btn { width: 100%; justify-content: center; }
.form-submit .btn[disabled] { opacity: .65; cursor: progress; }

/* ---- Contact ---- */
.contact-rows { border-top: 2px solid var(--text); }
.contact-row {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1.5rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.contact-row__label {
  font-size: .70rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--text);
  padding-top: .15rem;
}
.contact-row__val { font-weight: 600; font-size: .9rem; color: var(--text); }
.contact-row__val.phone-highlight,
.contact-row__val.phone-highlight a { color: var(--water-text); }
[data-theme="dark"] .contact-row__val.phone-highlight,
[data-theme="dark"] .contact-row__val.phone-highlight a { color: var(--water); }
.contact-row__sub { font-size: .85rem; color: var(--text); margin-top: .2rem; }
.phone-highlight { font-size: 1.1rem; }
.contact-row__val.phone-highlight a { font-weight: 700; }

/* ---- Info note / info box ---- */
.info-note {
  border-left: 3px solid var(--water);
  padding: .85rem 1.1rem;
  font-size: .88rem;
  color: var(--text);
  background: var(--water-lt);
}
.info-note p { color: var(--text); max-width: none; }
.info-note strong { color: var(--water-text); }
[data-theme="dark"] .info-note strong { color: var(--water); }

.info-box { background: var(--green-lt); border-left: 3px solid var(--green); padding: .85rem 1.1rem; font-size: .9rem; }
.info-box strong { color: var(--green); }
.info-box p { color: var(--text); max-width: none; }
[data-theme="dark"] .info-box { border-left-color: var(--water); }
[data-theme="dark"] .info-box strong { color: var(--water); }

/* ---- Page hero (belső oldalak) ---- */
.page-hero {
  background: var(--green-dk);
  color: #fff;
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-bottom: 3px solid var(--water);   /* vízzöld alsó határoló */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 21.25rem;
  overflow: hidden;
}
.page-hero--tall { height: 26rem; }
/* A belső oldalak főcíme ugyanazt a vízzöldet kapja, mint a főoldali
   hero kiemelt címe — egységes címhierarchia az egész oldalon. */
.page-hero h1 { color: var(--on-dark-accent); margin-bottom: .65rem; }
.page-hero p { color: #fff; font-size: 1.02rem; max-width: 60ch; }
.page-hero .overline, .page-hero .section-label { color: var(--on-dark-accent); }
.breadcrumb {
  display: flex; align-items: center; gap: .4rem;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255,255,255,.4); margin-bottom: .9rem;
}
.breadcrumb a { color: rgba(255,255,255,.6); transition: color .15s; }
.breadcrumb a:hover { color: var(--on-dark-accent); }
.breadcrumb span { opacity: .4; }
/* Aktív oldal: ne legyen elnyomva — WCAG AA sötét page-hero háttéren */
.breadcrumb [aria-current="page"] { color: rgba(255,255,255,.9); opacity: 1; }

/* ---- Scroll reveal — finomabb easing ---- */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .45s cubic-bezier(.4,0,.2,1), transform .45s cubic-bezier(.4,0,.2,1); }
.reveal.is-visible { opacity: 1; transform: none; }
/* Failsafe: ha JS nem tölt be, a tartalom látható marad */
html:not(.js-active) .reveal { opacity: 1; transform: none; }

/* ---- Footer ---- */
.site-footer {
  background: var(--green-dk);
  color: #fff;
  border-top: 2px solid rgba(255,255,255,.08);
  padding-block: clamp(1.5rem, 3vw, 2.25rem) clamp(1.75rem, 4vw, 2.5rem);
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 2.5rem;
  margin-bottom: 2.75rem;
}
.footer-grid--simple { grid-template-columns: 1.3fr 1fr 1.05fr; gap: 3rem 2.5rem; }
.footer-col__title {
  color: var(--on-dark-accent);
  font-size: .68rem; font-weight: 800;
  letter-spacing: .04em; text-transform: none;
  padding-bottom: .65rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(255,255,255,.1);
}
.footer-col p { font-size: .87rem; line-height: 1.75; max-width: 34ch; color: #fff; }
.footer-col p.footer-col__title { color: var(--on-dark-accent); }
.footer-col ul { display: flex; flex-direction: column; gap: .6rem; }
.footer-col ul li { line-height: 1.4; color: #fff; font-size: .87rem; }
.footer-col ul a { font-size: .87rem; color: #fff; transition: color .15s; }
.footer-col ul a:hover { color: var(--on-dark-accent); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: .75rem 1.5rem;
  font-size: .78rem; color: #fff;
}
.footer-bottom p { margin: 0; max-width: none; }
.footer-bottom a { color: #fff; transition: color .15s; }
.footer-bottom a:hover { color: var(--on-dark-accent); }
.site-footer a:focus-visible,
.page-hero a:focus-visible,
.hero__panel a:focus-visible { outline: 2px solid var(--water-glow); outline-offset: 2px; }

/* ---- Köszönő / 404 oldal ---- */
.thanks-section { min-height: calc(100vh - var(--header-h) - 120px); display: flex; align-items: center; }
.thanks-card {
  border: 1px solid var(--rule);
  border-top: 3px solid var(--water);
  border-radius: var(--r);
  padding: clamp(2rem, 5vw, 4rem);
  max-width: 560px; margin-inline: auto; text-align: center;
  background: var(--card-bg);
}
.thanks-card p { margin-inline: auto; }
.thanks-icon {
  width: 60px; height: 60px;
  background: var(--green-lt);
  border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.4rem;
  color: var(--green);
}
[data-theme="dark"] .thanks-icon { color: var(--water); }
.thanks-body-text { margin-inline: auto; font-size: 1.02rem; }
.thanks-card .cta-block__actions { margin-top: 1.75rem; }

/* ---- CTA block — belső oldalak ---- */
.cta-block {
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.cta-block--accent { border-color: var(--water); border-width: 2px; }
.cta-block--green {
  background: var(--green-dk);
  border-color: transparent;
  color: #fff;
}
.cta-block--green h2 { color: #fff; }
.cta-block--green p { color: #fff; max-width: 54ch; margin-inline: auto; }
.cta-block__actions { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.75rem; }

/* ---- Legal ---- */
.section--legal { padding-block-start: .5rem; }
.legal-content { max-width: 740px; }
.legal-content h2 { margin-top: 2.5rem; margin-bottom: .6rem; font-size: 1.2rem; padding-top: .5rem; border-top: 1px solid var(--rule); }
.legal-content h3 { margin-top: 1.75rem; margin-bottom: .4rem; font-size: 1rem; }
.legal-content p { margin-bottom: .85rem; color: var(--text); }
.legal-content ul { list-style: disc; padding-left: 1.5rem; margin-bottom: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.legal-content ul li { color: var(--text); font-size: .93rem; }
.legal-content a { color: var(--water-text); text-decoration: underline; }
[data-theme="dark"] .legal-content a { color: var(--water); }

/* ---- Skip navigation link ---- */
.skip-link {
  position: absolute;
  top: -50px;
  left: 1rem;
  background: var(--green);
  color: var(--btn-fg);
  padding: .55rem 1.2rem;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  z-index: 9999;
  border-radius: 0 0 var(--r) var(--r);
  transition: top .2s ease;
}
.skip-link:focus { top: 0; outline: 2px solid var(--water); }

/* ---- Utility osztályok ---- */
.mt-xs  { margin-top: .4rem; }
.mt-sm  { margin-top: .65rem; }
.mt-md  { margin-top: .85rem; }
.mt-lg  { margin-top: 1.5rem; }
.mt-xl  { margin-top: 2.5rem; }
.mt-2xl { margin-top: 2.5rem; }
.mb-sm  { margin-bottom: 1rem; }
.mb-md  { margin-bottom: 2rem; }
.bg-surface { background: var(--surface); }
.btn--self-start { align-self: flex-start; margin-top: 1.5rem; }
.flex-cta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.5rem; }
.flex-cta--center { justify-content: center; }
.max-w-text { max-width: 60ch; }
.text-center-auto { text-align: center; margin-inline: auto; }
.w-max-560 { max-width: 560px; }
.w-max-640 { max-width: 640px; margin-inline: auto; }
.w-max-700 { max-width: 700px; }
.aspect-4-3 { aspect-ratio: 4/3; }
.text-sm { font-size: .85rem; }

/* ---- Főoldal: tartalmi bekezdések sötét szöveggel (nem halvány muted) ---- */
body.page-home .section-header p,
body.page-home .split-band__panel p,
body.page-home .area-section p {
  color: var(--text);
}

/* ================================================================
   MIKROINTERAKCIÓK
   ================================================================ */
.btn {
  transform: translateY(0);
  transition: background .15s, color .15s, border-color .15s,
              transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1);
}
.btn--primary:hover,
.btn--accent:hover,
.btn--outline:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(35,74,58,.20); }
.btn--ghost:hover,
.btn--ghost-light:hover { transform: none; }
.btn:active { transform: translateY(0) !important; }

/* ---- Link focus (nem gomb) ---- */
a:focus-visible { outline: 2px solid var(--water); outline-offset: 2px; border-radius: var(--r); }
.site-nav a:focus-visible { outline-offset: -2px; }

/* ---- Mobil nav slide-in animáció ---- */
@keyframes navSlideIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.mobile-nav.is-open { animation: navSlideIn .2s cubic-bezier(.4,0,.2,1) forwards; }

/* ================================================================
   BACK-TO-TOP GOMB
   ================================================================ */
.scroll-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  z-index: 990;
  width: 40px; height: 40px;
  border-radius: var(--r);
  background: var(--green);
  color: var(--btn-fg);
  border: 2px solid transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease,
              background .15s, border-color .15s;
}
.scroll-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.scroll-top:hover { background: var(--btn-bg-hover); color: var(--btn-fg-hover); border-color: var(--water); }
.scroll-top:focus-visible { outline: 2px solid var(--water); outline-offset: 3px; }
.scroll-top svg { width: 18px; height: 18px; pointer-events: none; }

/* ================================================================
   PAGE LOADER
   ================================================================ */
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transition: opacity .25s ease;
}
#page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
#page-loader img {
  height: 72px;
  width: auto;
  display: block;
  animation: loader-enter .4s ease-out both;
}
.loader-name {
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--green);
  animation: loader-enter .4s ease-out .1s both;
}
[data-theme="dark"] .loader-name { color: var(--text); }
.loader-bar {
  width: 80px;
  height: 2px;
  background: var(--rule);
  border-radius: 1px;
  overflow: hidden;
  position: relative;
}
.loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--water);
  transform: scaleX(0);
  transform-origin: left;
  animation: loader-fill .7s ease-out .1s both;
}
@keyframes loader-enter {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes loader-fill {
  to { transform: scaleX(1); }
}
/* JS nélkül ne takarja az oldalt */
html:not(.js-active) #page-loader { display: none; }

/* ================================================================
   DARK MODE KÉPKORREKCIÓ ÉS FINOMÍTÁSOK
   ================================================================ */
[data-theme="dark"] .photo-block img,
[data-theme="dark"] .photo-frame img,
[data-theme="dark"] .product-band__photo img,
[data-theme="dark"] .split-band__media img,
[data-theme="dark"] .media-split__media img,
[data-theme="dark"] .gallery-card__trigger img {
  filter: saturate(1.1) contrast(1.08) brightness(.9);
}
[data-theme="dark"] .hero__visual img {
  filter: saturate(1.08) contrast(1.06) brightness(.88);
}
[data-theme="dark"] .form-control {
  background: var(--surface);
  border-color: var(--rule-strong);
  color: var(--text);
}
[data-theme="dark"] .form-control::placeholder { color: var(--text); opacity: .72; }
[data-theme="dark"] .form-control:focus { border-color: var(--water); }
[data-theme="dark"] .contact-row { border-bottom-color: var(--rule-strong); }
[data-theme="dark"] .contact-rows { border-top-color: var(--text); }
[data-theme="dark"] .statement-band { background: var(--green-dk); border-left: 3px solid var(--water); }
[data-theme="dark"] .check-option input[type="checkbox"],
[data-theme="dark"] .consent-label input { accent-color: var(--water); }

/* ---- Responsive ---- */

/* 1440px+: nagy desktop — a telefonszám szövege is látható. */
@media (min-width: 1440px) {
  .header-inner { max-width: 1300px; }
}

/* 1200px-től felfelé: a telefonszám szövege is látható a fejben. */
@media (min-width: 1200px) {
  .phone-link span { display: inline; }
}

/* 1024px–1199px: hamburger felett, de még szűkebb hely — kompaktabb nav. */
@media (max-width: 1199px) {
  .site-nav a { padding-inline: .75rem; font-size: .8rem; }
  .header-inner { gap: .75rem; }
}

/* 1024px: hamburger + telefon ikon + toggle */
@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-grid--simple { grid-template-columns: 1fr 1fr; gap: 2.75rem 2rem; }
  .footer-grid--simple .footer-col:first-child { grid-column: 1 / -1; }
  .hero { grid-template-columns: 50% 50%; }
  .site-nav { display: none; }
  .header-cta { display: none; }
  .hamburger { display: flex; }
  .header-inner { gap: .6rem; }
  /* Nav eltűnik → margin-left: auto tolja jobbra az akciókat */
  .header-actions { margin-left: auto; gap: .45rem; }
  .split-band,
  .split-band--text-first { grid-template-columns: 50% 50%; }
  .product-band { grid-template-columns: 50% 50%; }
  .product-band--text-first { grid-template-columns: 50% 50%; }
}

/* ---- 768px: teljes mobil nézet ---- */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .hamburger { display: flex; }
  .header-actions .btn { display: none; }
  .mobile-cta-bar { display: flex; }
  body { padding-bottom: var(--cta-bar-h); }

  /* Logó kisebb mobilon */
  .site-logo svg, .site-logo img { height: 26px; }
  .site-logo__text { font-size: .82rem; }

  /* ---- Hero mobilon: kép felül, szöveg lent ---- */
  .hero {
    display: block;
    min-height: auto;
  }
  .hero__visual {
    position: relative;
    height: min(58vw, 250px);
    overflow: hidden;
  }
  .hero__visual img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center 50%;
  }
  .hero__visual::after { display: none; }
  .hero__panel {
    justify-content: flex-start;
    padding: 1.25rem var(--pad-x) 1.75rem;
    gap: .85rem;
  }
  .hero h1 { font-size: clamp(1.4rem, 7.5vw, 1.85rem); }
  .hero__sub { font-size: .83rem; line-height: 1.6; }

  .two-col { grid-template-columns: 1fr; }

  .page-hero { height: auto; min-height: 0; display: block; overflow: visible; }

  .form-split { grid-template-columns: 1fr; }
  .form-split__photo { aspect-ratio: 16/9; height: auto; min-height: 0; }

  /* Mobilon kisebb section padding */
  .section { padding-block: clamp(2.5rem, 6vw, 4rem); }
  .section--tight { padding-block: clamp(1.5rem, 4vw, 2.5rem); }

  .form-grid { grid-template-columns: 1fr; }
  .check-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-grid--simple { gap: 2.25rem; margin-bottom: 2.25rem; }
  .footer-grid--simple .footer-col:first-child { grid-column: auto; }
  .site-footer { padding-block: 2.5rem 1.75rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .85rem; padding-top: 1.25rem; }
  .contact-row { grid-template-columns: 1fr; gap: .2rem; }

  /* Kép + szövegsávok mobilon: egymás alatt */
  .product-band,
  .product-band--balanced,
  .product-band--text-first { grid-template-columns: 1fr; min-height: auto; }
  .product-band__photo { min-height: 52vw; max-height: 240px; }
  .product-band__text { padding: 2rem var(--pad-x); }
  /* A DOM-sorrendtől függetlenül a kép kerüljön felülre */
  .product-band--balanced .product-band__photo { order: -1; }

  .split-band,
  .split-band--text-first { grid-template-columns: 1fr; min-height: auto; }
  .split-band__media { min-height: 52vw; max-height: 240px; }
  .split-band__media img { position: absolute; }
  .split-band--text-first .split-band__media { order: -1; }
  .split-band__panel { padding: 2rem var(--pad-x); }

  .media-split { grid-template-columns: 1fr; gap: 1.5rem; }
  .media-split--media-last .media-split__media { order: 0; }

  /* Bleed visszaállítás mobilon: a kép megint a konténerben marad */
  .section--media-bleed-left > .container,
  .section--form-bleed-left > .container { padding-left: var(--pad-x); }
  .section--media-bleed-right > .container { padding-right: var(--pad-x); }
  .section--media-bleed-left .media-split__media,
  .section--media-bleed-right .media-split__media {
    margin-left: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    border-radius: var(--r);
  }
  .section--form-bleed-left .form-split__photo {
    margin-left: 0;
    width: 100%;
    border-radius: var(--r);
  }

  .intro-split { grid-template-columns: 1fr; }
  .area-inner { grid-template-columns: 1fr; }

  .benefit-grid { grid-template-columns: 1fr; }
  .benefit-card { border-right: none; }
  .testimonial-grid { grid-template-columns: 1fr; }
  .testimonial-card { border-right: none; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  .lightbox__content { gap: .35rem; }
  .lightbox__close { top: -3rem; }
  .lightbox__close, .lightbox__nav { width: 40px; height: 40px; }

  .step { grid-template-columns: 44px 1fr; gap: 1rem; padding: 1.25rem 0; }
  .step__num { font-size: 1.9rem; }
}

@media (max-width: 480px) {
  .hero__ctas { flex-direction: column; }
  .hero__ctas .btn { width: 100%; justify-content: center; }
  .cta-band__actions { flex-direction: column; }
  .cta-band__actions .btn { width: 100%; justify-content: center; }
  .mobile-cta-bar .btn--outline { display: none; }
  .mobile-cta-bar .btn--primary,
  .mobile-cta-bar .btn--accent { flex: 1; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }

  /* ================================================================
     FORM MOBIL OVERFLOW FIX — 480px alatt
     ================================================================ */
  .form-wrapper {
    padding: 1.25rem .875rem;
    overflow-x: clip;
  }
  .form-grid,
  .form-group { min-width: 0; max-width: 100%; }
  .form-control,
  textarea.form-control {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
  .check-option { overflow-wrap: break-word; word-break: break-word; }
  .consent-label {
    overflow-wrap: break-word;
    font-size: .82rem;
    line-height: 1.55;
  }
  .form-submit .btn { min-width: 0; width: 100%; justify-content: center; }
  .cta-block__actions .btn { width: 100%; justify-content: center; }
}

/* 390px és kisebb: extra szűkítés */
@media (max-width: 390px) {
  .form-wrapper { padding: 1rem .75rem; }
}

/* Mobilon az alsó CTA sáv FÖLÉ kerüljön a két lebegő gomb */
@media (max-width: 768px) {
  .scroll-top {
    bottom: calc(var(--cta-bar-h) + .75rem);
    right: .85rem;
    width: 36px; height: 36px;
  }
  .scroll-top svg { width: 16px; height: 16px; }
  .theme-toggle {
    bottom: calc(var(--cta-bar-h) + .75rem + 36px + 12px);
    right: .85rem;
    width: 36px; height: 36px;
  }
  .theme-toggle svg { width: 14px; height: 14px; }
}

/* ================================================================
   SÜTI-HOZZÁJÁRULÁS
   Az adatkezelési tájékoztató szerint analitikai süti kizárólag
   előzetes hozzájárulással működhet, és a döntés visszavonható.
   A sáv addig marad rejtve és fókuszálhatatlan, amíg meg nem
   jelenik — így nem lóg bele a billentyűzetes bejárásba.
   ================================================================ */
.cookie-banner {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 2000;
  background: var(--card-bg);
  border-top: 2px solid var(--water);
  padding: 1rem var(--pad-x);
  transform: translateY(100%);
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
  transition: transform .35s ease, visibility 0s linear .35s;
}
.cookie-banner.is-visible {
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition: transform .35s ease, visibility 0s;
}
.cookie-banner__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; max-width: var(--max-w); margin-inline: auto; flex-wrap: wrap;
}
.cookie-banner p { font-size: .85rem; color: var(--text); max-width: 62ch; }
.cookie-banner p a { color: var(--water-text); text-decoration: underline; }
[data-theme="dark"] .cookie-banner p a { color: var(--water); }
.cookie-banner__actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-banner[inert] { pointer-events: none; }

/* A lábléci visszavonó link csak akkor jelenik meg, ha van mit visszavonni. */
.cookie-revoke { display: none; }
.cookie-revoke.is-available { display: inline; }

@media (max-width: 768px) {
  /* A mobil CTA sáv fölé kerül, hogy ne takarja el egymást a kettő. */
  .cookie-banner { bottom: var(--cta-bar-h); padding: .7rem var(--pad-x); }
  .cookie-banner p { font-size: .8rem; }
  .cookie-banner__inner { gap: .7rem; }
  .cookie-banner__actions { width: 100%; }
  .cookie-banner__actions .btn { flex: 1; justify-content: center; min-height: 44px; }
}

/* ---- Reduced motion — egységes blokk ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  .reveal { opacity: 1; transform: none; }
  .btn { transform: none !important; box-shadow: none !important; }
  .photo-block:hover img,
  .split-band__media:hover img,
  .media-split__media:hover img,
  .gallery-card__trigger:hover img { transform: none; }
  .scroll-top { transition: opacity .01ms, pointer-events 0s; }
  .cookie-banner { transition: visibility 0s; }
  #page-loader { display: none !important; }
}

/* ================================================================
   NYOMTATÁS / PDF-BE MENTÉS
   Enélkül a sötét panelek, a rácsok és a fix pozíciójú vezérlők
   szétesnek: a kártyák kettévágódnak az oldalhatárokon, üres sávok
   maradnak, és a lapszám elszáll. Itt világos, tömör, lapokra
   tördelhető változatot adunk.
   ================================================================ */
@media print {

  /* Világos alap — a sötét téma nyomtatásban olvashatatlan és
     rengeteg festéket vinne. A témaváltozót is felülírjuk, hogy a
     data-theme="dark" állapotból se maradjon sötét felület. */
  :root,
  :root[data-theme="dark"] {
    --bg:        #FFFFFF;
    --surface:   #FFFFFF;
    --card-bg:   #FFFFFF;
    --text:      #101A15;
    --muted:     #3F4C44;
    --green:     #234A3A;
    --green-dk:  #234A3A;
    --green-lt:  #FFFFFF;
    --water:     #1F6360;
    --water-text:#1F6360;
    --on-dark-accent: #1F6360;
    --rule:      #B9B3A6;
    --rule-strong: #6E7D73;
  }

  html, body {
    background: #fff !important;
    color: #101A15 !important;
    overflow: visible !important;
    padding-bottom: 0 !important;
  }

  /* Csak a valóban képi elemeknél kérjük a színek pontos nyomtatását. */
  img { print-color-adjust: exact; -webkit-print-color-adjust: exact; }

  /* Képernyőre való vezérlők — papíron értelmetlenek */
  .site-header,
  .mobile-nav,
  .mobile-cta-bar,
  .theme-toggle,
  .scroll-top,
  .hamburger,
  .skip-link,
  .lightbox,
  #page-loader,
  .cookie-banner,
  .breadcrumb,
  .gallery-card__zoom { display: none !important; }

  /* Animációk kikapcsolva, minden tartalom látható */
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }

  /* Sötét sávokból világos, keretes blokk lesz */
  .page-hero,
  .hero__panel,
  .product-band__text,
  .cta-block--green,
  .cta-band,
  .statement-band,
  .site-footer {
    background: #fff !important;
    color: #101A15 !important;
    border: none !important;
    height: auto !important;
    min-height: 0 !important;
    padding-block: 0 0 1rem !important;
  }
  .page-hero h1,
  .page-hero p,
  .hero__panel *,
  .product-band__text *,
  .cta-block--green *,
  .cta-band *,
  .statement-band p,
  .site-footer * { color: #101A15 !important; }
  .page-hero { border-bottom: 2px solid #234A3A !important; margin-bottom: 1rem; }

  /* Egy oszlop: a többoszlopos rácsok papíron csak tördelési gondot
     okoznak, kivéve a galériát, ami lentebb kap saját rácsot. */
  .hero, .product-band, .split-band, .media-split,
  .intro-split, .two-col, .area-inner, .form-split,
  .footer-grid, .footer-grid--simple {
    display: block !important;
  }

  /* Galéria: fix 3 oszlop, kártyánként egyben tartva */
  .gallery-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6pt !important;
    background: none !important;
    border-top: none !important;
  }
  .gallery-item,
  .gallery-card__trigger {
    break-inside: avoid;
    page-break-inside: avoid;
  }
  .gallery-card__trigger {
    aspect-ratio: 4 / 3 !important;
    background: none !important;
    border: 1px solid #B9B3A6;
  }
  .gallery-card__trigger img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  /* Vélemények, kártyák, lépések: ne vágódjanak ketté */
  .testimonial-card,
  .benefit-card,
  .step,
  .contact-row,
  .info-box,
  .info-note,
  .cta-block,
  .thanks-card,
  figure, blockquote, li { break-inside: avoid; page-break-inside: avoid; }
  .testimonial-grid { grid-template-columns: repeat(2, 1fr) !important; }

  /* Címsor ne maradjon a lap alján a tartalma nélkül */
  h1, h2, h3, h4 { break-after: avoid; page-break-after: avoid; }

  /* Nagy képsávok papíron mértéktartó magassággal */
  .hero__visual, .product-band__photo, .split-band__media,
  .media-split__media, .form-split__photo, .photo-block, .photo-frame {
    position: relative !important;
    height: auto !important;
    max-height: 90mm !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden;
  }
  .hero__visual img, .product-band__photo img, .split-band__media img,
  .media-split__media img, .form-split__photo img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: none !important;
  }

  /* Tömörebb függőleges ritmus, kisebb betű */
  body { font-size: 10pt; line-height: 1.45; }
  .section { padding-block: .5rem !important; }
  h1 { font-size: 20pt; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12pt; }
  p  { max-width: none; }

  @page { margin: 14mm; }
}