/* ==========================================================================
   Duguláselhárítás Eger – Bozó Attila e.v.
   Design: grafit alap, egyetlen jelzőszín, serif címek.
   Vezérmotívum: robbantott szerelési ábra – az elemek görgetésre állnak össze.
   ========================================================================== */

/* ============================ 1. Alapok ================================= */
:root {
  --ink:      #0c0d0f;
  --surface:  #131519;
  --raised:   #1a1d22;
  --line:     #24282f;
  --line-2:   #343943;
  --muted:    #8f949d;
  --muted-2:  #62676f;
  --text:     #eceef1;
  --white:    #ffffff;

  --signal:     #ff5c1a;
  --signal-2:   #ff7c45;
  --signal-dim: rgba(255, 92, 26, 0.10);

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans:  "Instrument Sans", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

  --wrap: 1240px;
  --gut: clamp(20px, 4vw, 40px);
  --r: 2px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.34, 1.4, 0.5, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.62;
  color: var(--text);
  background: var(--ink);
  overflow-x: hidden;
  position: relative;   /* a háttér-csőhálózat igazodási pontja */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; display: block; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
svg { display: block; }
::selection { background: var(--signal); color: #140600; }

:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }

/* ============================ 2. Tipográfia ============================= */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.018em;
  line-height: 1.08;
  color: var(--white);
  text-wrap: balance;
}

h1 { font-size: clamp(2.6rem, 6.2vw, 5rem); font-variation-settings: "opsz" 72; line-height: 1.02; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.9rem, 3.8vw, 3.1rem); font-variation-settings: "opsz" 48; letter-spacing: -0.024em; }
h3 { font-size: clamp(1.15rem, 1.7vw, 1.4rem); font-variation-settings: "opsz" 24; line-height: 1.24; letter-spacing: -0.012em; }
h4 { font-size: 1.02rem; font-variation-settings: "opsz" 18; }

p { text-wrap: pretty; }

/* Kiemelés a címben: nem gradiens, hanem tipográfiai kontraszt */
.accent-text { font-style: italic; color: var(--signal); font-weight: 400; }

/* Szemöldök: apró kapitális, jelzőszínű pont – jelölés nélkül */
.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--muted-2);
  margin-bottom: 18px;
}

.lead-link { color: var(--signal); border-bottom: 1px solid rgba(255,92,26,.35); transition: border-color .2s; }
.lead-link:hover { border-bottom-color: var(--signal); }

/* ============================ 3. Szekciók =============================== */
.section { padding: clamp(76px, 10vw, 140px) 0; position: relative; }
.section--tint { background: var(--surface); }

.section-head { max-width: 640px; margin-bottom: clamp(44px, 5vw, 72px); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head h2 { margin-bottom: 20px; }
.section-head p { color: var(--muted); font-size: 1.05rem; line-height: 1.66; }

.grid { display: grid; gap: 1px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(36px, 5vw, 72px); align-items: start; }

/* ============================ 4. Gombok ================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--sans); font-size: .93rem; font-weight: 600;
  letter-spacing: -0.005em;
  padding: 15px 26px;
  border-radius: var(--r);
  border: 1px solid transparent;
  transition: background .18s, color .18s, border-color .18s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--primary { background: var(--signal); color: #150600; }
.btn--primary:hover { background: var(--signal-2); }

.btn--ghost, .btn--outline, .btn--soft {
  border-color: var(--line-2); color: var(--text); background: transparent;
}
.btn--ghost:hover, .btn--outline:hover, .btn--soft:hover { border-color: var(--muted); background: var(--raised); }

.btn--lg { padding: 18px 32px; font-size: 1rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ============================ 5. Fejléc ================================= */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(12,13,15,.86);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 76px; }

.brand { display: flex; align-items: center; gap: 12px; flex: none; }
.brand-mark {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  background: var(--signal); border-radius: var(--r);
}
.brand-mark svg { width: 20px; height: 20px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-text b {
  font-family: var(--serif); font-weight: 600; font-size: 1.06rem;
  font-variation-settings: "opsz" 20; letter-spacing: -0.015em; color: var(--white);
}
.brand-text span { font-size: .73rem; color: var(--muted-2); letter-spacing: .01em; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav > a, .nav-drop__trigger {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 14px; border-radius: var(--r);
  font-size: .93rem; font-weight: 500; color: var(--muted);
  transition: color .18s, background .18s;
}
.nav > a:hover, .nav-drop__trigger:hover { color: var(--text); background: var(--raised); }
.nav > a.active, .nav-drop__trigger.active { color: var(--white); }
.nav > a.active { position: relative; }
.nav > a.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 3px;
  height: 2px; background: var(--signal);
}

.header-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.nav-toggle { display: none; width: 42px; height: 42px; place-items: center; border: 1px solid var(--line-2); border-radius: var(--r); }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 1.5px; background: var(--text); position: relative; transition: .25s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }
body.nav-open .nav-toggle span { background: transparent; }
body.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
body.nav-open .nav-toggle span::after { top: 0; transform: rotate(-45deg); }
.nav-scrim { display: none; }

/* Lenyíló települések menü */
.nav-drop { position: relative; }
.nav-drop__chev { width: 12px; height: 12px; transition: transform .22s var(--ease); }
.nav-drop.open .nav-drop__chev { transform: rotate(180deg); }
/* A panel alapjai. A lebegő elhelyezés KIZÁRÓLAG asztali méretben él
   (lásd lentebb a min-width lekérdezést) – így mobilon nincs abszolút
   pozicionálás, amit felül kellene írni. */
.nav-drop__menu { padding: 18px; }

@media (min-width: 1001px) {
  .nav-drop__menu {
    position: absolute; top: calc(100% + 10px); left: 50%;
    transform: translateX(-50%) translateY(-8px);
    min-width: 340px;
    background: var(--raised); border: 1px solid var(--line-2); border-radius: var(--r);
    box-shadow: 0 28px 70px -24px rgba(0,0,0,.9);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .2s, transform .24s var(--ease), visibility .2s;
  }
  .nav-drop.open .nav-drop__menu {
    opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }
  .nav-drop__grid { grid-template-columns: 1fr 1fr; }
  /* Áthidaló sáv a gomb és a panel közti hézagon: enélkül az egér
     "kilép" a menüből lefelé haladva, és a panel bezárul. */
  .nav-drop::after {
    content: ""; position: absolute; top: 100%; left: -24px; right: -24px; height: 16px;
  }
}

.nav-drop__label {
  display: block; font-size: .7rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted-2);
  padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 12px;
}
.nav-drop__grid { display: grid; grid-template-columns: 1fr; gap: 2px 8px; }
.nav-drop__grid a {
  display: block; padding: 8px 10px; border-radius: var(--r);
  font-size: .9rem; color: var(--muted); transition: color .16s, background .16s;
}
.nav-drop__grid a:hover { color: var(--text); background: var(--surface); }
.nav-drop__grid a.active { color: var(--signal); }
.nav-drop__all {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
  font-size: .86rem; font-weight: 600; color: var(--muted); transition: color .16s;
}
.nav-drop__all:hover { color: var(--signal); }


/* ============================ 6. Hero =================================== */
.hero {
  position: relative; overflow: hidden;
  padding: clamp(150px, 17vw, 210px) 0 clamp(70px, 8vw, 110px);
}
.hero__grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: clamp(40px, 5vw, 80px); align-items: center; position: relative; z-index: 2; }
.hero__content { max-width: 42ch; }

.hero__tag {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 500; color: var(--muted);
  margin-bottom: 26px;
}
.hero__tag .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal); flex: none; animation: livedot 2.4s ease-in-out infinite; }
@keyframes livedot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

.hero h1 { font-size: clamp(2.3rem, 3.9vw, 3.6rem); margin-bottom: 18px; }

.hero__signature {
  display: flex; align-items: center; gap: 12px;
  font-size: .92rem; color: var(--muted); margin-bottom: 20px;
}
.hero__signature .line { width: 32px; height: 1px; background: var(--line-2); flex: none; }

.hero__lead { color: var(--muted); font-size: 1.08rem; line-height: 1.68; margin-bottom: 28px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 30px; }

.hero__mini { display: flex; flex-direction: column; gap: 11px; }
.hero__mini div { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
.hero__mini svg { width: 15px; height: 15px; color: var(--signal); flex: none; }

/* Hero kártya */
/* Áttetsző kártya, hogy a mögötte lévő szerelvény átderengjen – ettől
   rétegzett a kép, nem pedig egy tömör doboz a semmiben. */
.hero__card {
  background: rgba(19, 21, 25, .80);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line-2); border-radius: var(--r); padding: 30px;
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hero__card-title, .hero__card h3 { margin-bottom: 10px; }
.hero__card > p { color: var(--muted); font-size: .93rem; margin-bottom: 26px; }
.hero__stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.stat-tile { background: var(--surface); padding: 18px 16px; }
.stat-tile b { display: block; font-family: var(--serif); font-size: 1.7rem; font-weight: 500; font-variation-settings: "opsz" 32; color: var(--white); line-height: 1.1; letter-spacing: -0.02em; }
.stat-tile b .u { font-size: .8rem; color: var(--muted); font-family: var(--sans); font-weight: 500; letter-spacing: 0; }
.stat-tile > span { display: block; font-size: .78rem; color: var(--muted-2); margin-top: 5px; line-height: 1.4; }


/* ============================ 7. Bizalmi sáv ============================ */
.trustbar { border-block: 1px solid var(--line); background: var(--surface); }
.trustbar__inner { display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 20px 0; }
.trustbar__item { display: flex; align-items: center; gap: 10px; font-size: .88rem; color: var(--muted); }
.trustbar__item svg { width: 17px; height: 17px; color: var(--signal); flex: none; }

/* ============================ 8. Kártyák ================================ */
/* Hajszálvonalas rács – dobozok helyett osztott felület */
.grid-3 { background: var(--line); border: 1px solid var(--line); }
.card {
  background: var(--ink); padding: 36px 32px 40px;
  position: relative; transition: background .25s;
}
.section--tint .card { background: var(--surface); }
.card:hover { background: var(--raised); }
.card__icon {
  width: 68px; height: 68px; margin-bottom: 26px;
  display: grid; place-items: center;
  color: var(--signal);
  border: 1px solid var(--line-2);
  background: var(--signal-dim);
  position: relative;
  transition: border-color .3s, background .3s, transform .45s var(--ease-snap);
}
.card__icon svg { width: 34px; height: 34px; }
/* Sarokjelek – szerelvény-érzet, hoverre kitágulnak */
.card__icon::before, .card__icon::after {
  content: ""; position: absolute; width: 9px; height: 9px;
  border: 1px solid var(--signal); opacity: .55;
  transition: transform .4s var(--ease), opacity .3s;
}
.card__icon::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.card__icon::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.card:hover .card__icon { border-color: var(--signal); background: rgba(255,92,26,.16); transform: translateY(-4px); }
.card:hover .card__icon::before { transform: translate(-4px, -4px); opacity: 1; }
.card:hover .card__icon::after  { transform: translate(4px, 4px);  opacity: 1; }
.card h3 { margin-bottom: 10px; }
.card p { color: var(--muted); font-size: .94rem; line-height: 1.62; }
/* Jelzőszínű él megjelenik hoverre – balról kinő */
.card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--signal); transform: scaleY(0); transform-origin: top;
  transition: transform .35s var(--ease);
}
.card:hover::before { transform: scaleY(1); }

/* Ikonmozgás – visszafogott, nem cirkusz */
.anim-float  { animation: drift1 6s ease-in-out infinite; }
.anim-float2 { animation: drift2 7s ease-in-out infinite; }
.anim-swing  { animation: drift3 6.5s ease-in-out infinite; transform-origin: 60% 30%; }
.anim-spin   { animation: drift1 8s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes drift2 { 0%,100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
@keyframes drift3 { 0%,100% { transform: rotate(0); } 50% { transform: rotate(5deg); } }

/* ============================ 9. Folyamat =============================== */
.process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.pstep { background: var(--ink); padding: 34px 26px 38px; position: relative; }
.section--tint .pstep { background: var(--surface); }
.pstep { counter-increment: pstepnum; }
.process { counter-reset: pstepnum; }
.pstep__orb {
  width: 74px; height: 74px; margin-bottom: 24px;
  display: grid; place-items: center;
  border: 1px solid var(--line-2); border-radius: 50%;
  color: var(--signal); position: relative;
  background: var(--signal-dim);
  transition: border-color .3s, background .3s;
}
.pstep__orb svg { width: 34px; height: 34px; }
/* Forgó szaggatott gyűrű – folyamatosan él, de nem tolakodó */
.pstep__orb::before {
  content: ""; position: absolute; inset: -7px; border-radius: 50%;
  border: 1px dashed rgba(255,92,26,.4);
  animation: orbSpin 16s linear infinite;
}
@keyframes orbSpin { to { transform: rotate(360deg); } }
.pstep:hover .pstep__orb { border-color: var(--signal); background: rgba(255,92,26,.16); }
.pstep h3 { margin-bottom: 9px; }
.pstep p { color: var(--muted); font-size: .92rem; }

/* ============================ 10. Statisztika sáv ======================= */
.stat-strip-section { padding: clamp(50px, 6vw, 76px) 0; }
.stat-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 46px; justify-content: center; }
.stat-strip__item { display: flex; align-items: center; gap: 15px; }
.stat-strip__icon { color: var(--signal); flex: none; }
.stat-strip__icon svg { width: 26px; height: 26px; }
.stat-strip__label { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 3px; }
.stat-strip__line { font-family: var(--serif); font-size: 1.18rem; font-variation-settings: "opsz" 24; color: var(--text); line-height: 1.3; }
.stat-strip__line b { font-weight: 600; color: var(--white); }
.stat-strip__div { width: 1px; height: 40px; background: var(--line-2); }

/* ============================ 11. Média-blokk =========================== */
.media-split { display: grid; grid-template-columns: .95fr 1.05fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.media-split.reverse .media-wrap { order: 2; }
.media-figure {
  position: relative; border: 1px solid var(--line); overflow: hidden;
  animation: floaty 11s ease-in-out infinite;
}
.media-split.reverse .media-figure { animation-delay: -5.5s; }
/* Egységes vágás: a portré és fekvő fotók így egyforma arányban jelennek meg. */
.media-figure img { width: 100%; aspect-ratio: 4/3; object-fit: cover; object-position: center 38%; }
.media-figure figcaption {
  position: absolute; inset: auto 0 0 0; padding: 16px 18px;
  background: linear-gradient(transparent, rgba(12,13,15,.94));
  font-size: .84rem; color: var(--muted);
}
.media-figure figcaption b { color: var(--white); font-weight: 600; }
.media-split h2 { margin-bottom: 18px; }
.media-split p { color: var(--muted); margin-bottom: 16px; }

/* ============================ 12. Galéria =============================== */
/* Fix sormagasság: a 2 oszlopot átfogó cella különben kétszer olyan magas
   lenne, mint a normál – ettől esett szét a rács. */
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 300px; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.ph { position: relative; overflow: hidden; height: 100%; }
.ph.wide { grid-column: span 2; }
.ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.ph:hover img { transform: scale(1.05); }
.ph__cap {
  position: absolute; inset: auto 0 0 0; padding: 14px 16px;
  background: linear-gradient(transparent, rgba(12,13,15,.92));
  font-size: .82rem; color: var(--muted);
}

/* ============================ 13. Vélemények ============================ */
.reviews-widget { min-height: 420px; }
.reviews-note { text-align: center; margin-top: 30px; }

/* ============================ 14. Települések =========================== */
.town-cloud { display: flex; flex-wrap: wrap; gap: 8px; }
.town-cloud a, .town-chip {
  display: inline-block; padding: 10px 16px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: .88rem; color: var(--muted);
  transition: color .16s, border-color .16s, background .16s;
}
.town-cloud a:hover { color: var(--white); border-color: var(--signal); background: var(--signal-dim); }

/* ============================ 15. Kapcsolódó ============================ */
.related { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.related a { display: flex; align-items: center; gap: 16px; padding: 26px 24px; background: var(--ink); transition: background .2s; }
.section--tint .related a { background: var(--surface); }
.related a:hover { background: var(--raised); }
.related .ri { color: var(--signal); flex: none; }
.related .ri svg { width: 24px; height: 24px; }
.related a > span:nth-child(2) { display: flex; flex-direction: column; flex: 1; font-weight: 600; font-size: .98rem; }
.related small { font-weight: 400; font-size: .84rem; color: var(--muted-2); margin-top: 2px; }
.related .arr { color: var(--muted-2); flex: none; transition: transform .25s var(--ease), color .2s; }
.related a:hover .arr { transform: translateX(4px); color: var(--signal); }

/* ============================ 16. GYIK ================================== */
.faq { max-width: 860px; margin-inline: auto; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item:first-child { border-top: 1px solid var(--line); }
.faq__q {
  position: relative; width: 100%; text-align: left;
  padding: 28px 52px 28px 0;
  font-family: var(--serif); font-size: 1.16rem; font-weight: 500;
  font-variation-settings: "opsz" 24; letter-spacing: -0.012em; color: var(--text);
  transition: color .2s;
}
.faq__q:hover { color: var(--signal); }
.faq__q .ico { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; }
.faq__q .ico::before, .faq__q .ico::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: transform .3s var(--ease), opacity .25s;
}
.faq__q .ico::before { width: 14px; height: 1.5px; }
.faq__q .ico::after  { width: 1.5px; height: 14px; }
.faq__item.open .faq__q { color: var(--signal); }
.faq__item.open .ico::after { opacity: 0; transform: translate(-50%, -50%) scaleY(0); }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .4s var(--ease); }
.faq__a p { color: var(--muted); font-size: .99rem; padding-bottom: 28px; max-width: 72ch; }

/* ============================ 17. Árlista =============================== */
.price-cols { border-top: 1px solid var(--line); }
.price-row {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
  padding: 20px 0; border-bottom: 1px solid var(--line);
  transition: padding-left .25s var(--ease);
}
.price-row:hover { padding-left: 10px; }
.price-row .name { display: flex; align-items: center; gap: 13px; font-size: .97rem; }
.price-row .di { color: var(--muted-2); flex: none; }
.price-row .di svg { width: 19px; height: 19px; }
.price-row.feat .di, .price-row:hover .di { color: var(--signal); }
.price-row.feat { border-left: 2px solid var(--signal); padding-left: 16px; }
.amount { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; font-variation-settings: "opsz" 28; color: var(--white); white-space: nowrap; letter-spacing: -0.02em; }
.amount small { font-family: var(--sans); font-size: .74rem; font-weight: 500; color: var(--muted-2); letter-spacing: 0; }
.price-note { color: var(--muted-2); font-size: .88rem; margin-top: 22px; }

/* ============================ 18. Panel, próza ========================== */
.panel { background: var(--surface); border: 1px solid var(--line); padding: 32px 30px; }
.section--tint .panel { background: var(--ink); }
.panel h3 { margin-bottom: 20px; }

.prose h2 { margin-bottom: 20px; }
.prose h3 { margin: 32px 0 12px; }
.prose p { color: var(--muted); margin-bottom: 18px; }
.prose strong { color: var(--text); font-weight: 600; }
.prose ul { list-style: none; margin-bottom: 20px; }
.prose ul li { position: relative; padding-left: 20px; color: var(--muted); font-size: .96rem; margin-bottom: 9px; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1.5px; background: var(--signal); }
.prose a:not(.btn) { color: var(--signal); border-bottom: 1px solid rgba(255,92,26,.3); }

.checklist { list-style: none; display: flex; flex-direction: column; gap: 13px; }
.checklist li { display: flex; align-items: flex-start; gap: 11px; font-size: .94rem; color: var(--muted); line-height: 1.5; }
.checklist svg { width: 16px; height: 16px; color: var(--signal); flex: none; margin-top: 3px; }

.info-item { display: flex; align-items: flex-start; gap: 15px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.info-item .ic { color: var(--signal); flex: none; }
.info-item .ic svg { width: 21px; height: 21px; }
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(34px, 5vw, 68px); align-items: start; }

/* ============================ 19. Űrlap ================================= */
.form-card { background: var(--surface); border: 1px solid var(--line); padding: clamp(26px, 3.5vw, 40px); }
.field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 18px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
label { font-size: .84rem; font-weight: 600; color: var(--muted); }
input, select, textarea {
  font-family: var(--sans); font-size: .96rem; color: var(--text);
  background: var(--ink); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 13px 15px; width: 100%;
  transition: border-color .18s;
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--signal); }
textarea { min-height: 130px; resize: vertical; }
select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 19px) center, calc(100% - 14px) center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.form-consent { display: flex; align-items: flex-start; gap: 11px; margin: 22px 0; font-size: .88rem; color: var(--muted); font-weight: 400; }
.form-consent input { width: 17px; height: 17px; flex: none; margin-top: 2px; accent-color: var(--signal); }
.form-consent a { color: var(--signal); }
.form-note { font-size: .87rem; color: var(--muted-2); text-align: center; margin-top: 16px; }
.form-status { font-size: .9rem; margin-bottom: 16px; }
.form-status.ok { color: var(--signal); }
.form-status.err { color: #ff6b6b; }

/* ============================ 20. CTA =================================== */
.cta-band { padding: clamp(64px, 8vw, 110px) 0; }
.cta-box {
  background: var(--surface); border: 1px solid var(--line);
  padding: clamp(38px, 5vw, 68px); text-align: center;
  position: relative; overflow: hidden;
}
.cta-box::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--signal);
}
.cta-box h2 { margin-bottom: 16px; }
.cta-box p { color: var(--muted); max-width: 54ch; margin: 0 auto 30px; }
.cta-box .btn-row { justify-content: center; }

/* ============================ 21. Belső fejléc ========================== */
.page-hero { position: relative; overflow: hidden; padding: clamp(130px, 15vw, 180px) 0 clamp(48px, 6vw, 72px); border-bottom: 1px solid var(--line); }
.breadcrumb { font-size: .86rem; color: var(--muted-2); margin-bottom: 22px; }
.breadcrumb a { color: var(--muted); transition: color .18s; }
.breadcrumb a:hover { color: var(--signal); }
.page-hero h1 { font-size: clamp(2.1rem, 4.6vw, 3.5rem); margin-bottom: 20px; max-width: 20ch; }
.page-hero > .wrap > p { color: var(--muted); font-size: 1.06rem; max-width: 62ch; line-height: 1.66; }

/* ============================ 22. Lábléc =============================== */
.site-footer { background: var(--surface); border-top: 1px solid var(--line); padding: clamp(56px, 7vw, 88px) 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; margin-bottom: 48px; }
.footer-about .brand { margin-bottom: 18px; }
.footer-about p { color: var(--muted); font-size: .91rem; max-width: 38ch; }
.footer-col h4 { font-family: var(--sans); font-size: .76rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted-2); margin-bottom: 18px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.footer-col a { color: var(--muted); font-size: .92rem; transition: color .18s; }
.footer-col a:hover { color: var(--signal); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--muted); font-size: .92rem; }
.footer-contact svg { width: 16px; height: 16px; color: var(--muted-2); flex: none; margin-top: 4px; }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 26px; border-top: 1px solid var(--line); font-size: .85rem; color: var(--muted-2); }
.footer-bottom a { color: var(--muted); }
.footer-bottom a:hover { color: var(--signal); }

/* ============================ 23. Sütisáv =============================== */
.cookie {
  position: fixed; left: 20px; bottom: 20px; z-index: 120; max-width: 400px;
  background: var(--raised); border: 1px solid var(--line-2); padding: 24px;
  transform: translateY(140%); transition: transform .5s var(--ease);
}
.cookie.show { transform: translateY(0); }
.cookie h4 { margin-bottom: 9px; }
.cookie p { font-size: .88rem; color: var(--muted); margin-bottom: 18px; }
.cookie p a { color: var(--signal); }
.cookie__actions { display: flex; gap: 10px; }
.cookie__actions .btn { flex: 1; padding: 11px 14px; font-size: .87rem; }

/* ============================ 24. Összeépülés =========================== */
/* Az elemek részekből állnak össze belépéskor – ez az oldal vezérmotívuma.
   A hero és a telefonszám AZONNAL látszik, azt nem animáljuk. */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.d1 { transition-delay: .09s; }
.d2 { transition-delay: .18s; }
.d3 { transition-delay: .27s; }
.d4 { transition-delay: .36s; }

/* Rácsos blokkok cellái külön-külön csúsznak a helyükre */
.grid-3 .card, .process .pstep, .related a {
  opacity: 0; transform: translateY(20px) scale(.985);
  transition: opacity .55s var(--ease), transform .65s var(--ease-snap), background .25s;
}
.grid-3.assembled .card, .process.assembled .pstep, .related.assembled a { opacity: 1; transform: none; }
.grid-3.assembled .card:nth-child(1), .process.assembled .pstep:nth-child(1), .related.assembled a:nth-child(1) { transition-delay: 0s; }
.grid-3.assembled .card:nth-child(2), .process.assembled .pstep:nth-child(2), .related.assembled a:nth-child(2) { transition-delay: .07s; }
.grid-3.assembled .card:nth-child(3), .process.assembled .pstep:nth-child(3), .related.assembled a:nth-child(3) { transition-delay: .14s; }
.grid-3.assembled .card:nth-child(4), .process.assembled .pstep:nth-child(4) { transition-delay: .21s; }
.grid-3.assembled .card:nth-child(5) { transition-delay: .28s; }
.grid-3.assembled .card:nth-child(6) { transition-delay: .35s; }

/* Szekció-elválasztó: két csővég összekattan, majd folyik a víz */
.joint { display: flex; justify-content: center; padding: 0; }
.joint svg { width: 200px; height: 40px; overflow: visible; }
.joint .jl, .joint .jr { transition: transform .8s var(--ease-snap); }
.joint .jl { transform: translateX(-56px); }
.joint .jr { transform: translateX(56px); }
.joint.assembled .jl, .joint.assembled .jr { transform: translateX(0); }
.joint .jflow { stroke: var(--signal); stroke-dasharray: 10 150; opacity: 0; transition: opacity .4s .5s; }
.joint.assembled .jflow { opacity: 1; animation: flow 3s linear infinite .6s; }

/* ============================ 25. Mozgáscsökkentés ====================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .reveal, .grid-3 .card, .process .pstep, .related a { opacity: 1; transform: none; }
  .joint .jl, .joint .jr { transform: none; }
}

/* ============================ 26. Reszponzív ============================ */
@media (max-width: 1100px) {
  .hero__grid { grid-template-columns: 1fr; gap: 46px; }
  .hero__content { max-width: 100%; }
  .hero__card { max-width: 480px; }
  .split, .contact-grid, .media-split { grid-template-columns: 1fr; }
  .media-split.reverse .media-wrap { order: 0; }
  .process { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 1000px) {
  .nav-toggle { display: grid; }
  .nav-scrim { display: block; position: fixed; inset: 0; z-index: 98; background: rgba(6,7,9,.7); opacity: 0; pointer-events: none; transition: opacity .3s; }
  body.nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  body.nav-open { overflow: hidden; }
  .nav {
    position: fixed; inset: 76px 14px auto 14px; z-index: 99;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--raised); border: 1px solid var(--line-2); padding: 10px;
    max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden;
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: transform .3s var(--ease), opacity .3s;
  }
  body.nav-open .nav { transform: none; opacity: 1; pointer-events: auto; }
  .nav > a, .nav-drop__trigger { padding: 14px; font-size: 1rem; border-radius: var(--r); }
  .nav > a + a, .nav > .nav-drop + a, .nav-drop { border-top: 1px solid var(--line); }
  .nav > a:first-child { border-top: 0; }
  .nav > a.active::after { display: none; }
  .nav > a.active, .nav-drop__trigger.active { color: var(--signal); }
  .nav-drop { position: static; }
  .nav-drop__trigger { width: 100%; justify-content: space-between; }
  /* Mobilon a panel egyszerű, folyamban lévő blokk – nincs lebegés. */
  .nav-drop__menu {
    background: transparent; border: 0; box-shadow: none;
    padding: 0 0 12px 10px; display: none;
  }
  .nav-drop.open .nav-drop__menu { display: block; }
  .header-cta .btn .lbl { display: none; }
  .header-cta .btn--primary { width: 42px; height: 42px; padding: 0; }
  .gallery { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .section { padding: 64px 0; }
  .grid-3, .process, .related, .gallery { grid-template-columns: 1fr; }
  .ph.wide { grid-column: span 1; }
  .card { padding: 30px 24px 34px; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .stat-strip__div { display: none; }
  .stat-strip { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cookie { left: 12px; right: 12px; bottom: 12px; max-width: none; }
  .faq__q { font-size: 1.04rem; padding: 24px 44px 24px 0; }
  .price-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .reviews-widget { min-height: 520px; }
}

/* ============================ 27. Kiegészítők =========================== */
/* A telefonos főgomb nem villog, csak finoman jelzi magát a heroban. */
.btn--pulse { position: relative; }
.btn--pulse::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--signal);
  border-radius: var(--r); opacity: 0; animation: ping 3.2s var(--ease) infinite;
  pointer-events: none;
}
@keyframes ping {
  0%   { opacity: .7; transform: scale(1); }
  55%  { opacity: 0;  transform: scale(1.06); }
  100% { opacity: 0;  transform: scale(1.06); }
}

/* Kapcsolat oldal – elérhetőségi lista */
.contact-info { display: flex; flex-direction: column; }
.contact-info .info-item:last-child { border-bottom: 0; }

/* Statisztika sáv szövegoszlopa */
.stat-strip__text { display: flex; flex-direction: column; }

/* ---- A hero nem vár JavaScriptre ----------------------------------------
   Ez egy sürgősségi szolgáltatás: a cím és a telefonszám az első festéskor
   látszik. A belépő mozgás tisztán CSS-animáció (backwards kitöltéssel),
   így akkor is megjelenik a tartalom, ha a JS lassan tölt vagy elhasal. */
.hero .reveal,
.page-hero .reveal {
  opacity: 1; transform: none;
  animation: heroIn .65s var(--ease) backwards;
}
.hero .reveal.d1, .page-hero .reveal.d1 { animation-delay: .05s; }
.hero .reveal.d2, .page-hero .reveal.d2 { animation-delay: .11s; }
.hero .reveal.d3, .page-hero .reveal.d3 { animation-delay: .17s; }
.hero .reveal.d4, .page-hero .reveal.d4 { animation-delay: .23s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } }


/* ==========================================================================
   28. HÁTTÉR-CSŐHÁLÓZAT
   Elágazó vezetékrendszer az egész oldal mögött. Görgetésre folyik benne a
   víz, útközben dugulásokat old fel, az oldal aljára érve minden szabad.
   Visszafelé görgetve visszaáll az eredeti, víztelen állapot.
   Oldalanként más hálózat generálódik (az URL-ből származó magszámmal).
   ========================================================================== */
.pipenet {
  position: absolute; top: 0; left: 0; width: 100%;
  z-index: -1; pointer-events: none; overflow: hidden;
}
.pipenet svg { width: 100%; height: 100%; display: block; }

/* Csőfal: sötét, alig kivehető – nem vonja el a figyelmet a szövegről */
.pn-wall  { stroke: #1b1f26; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.pn-edge  { stroke: #2b313b; stroke-linecap: round; stroke-linejoin: round; fill: none; }
/* Víz: ez az egyetlen élénk elem, de vékony */
.pn-water { stroke: var(--signal); stroke-linecap: round; stroke-linejoin: round; fill: none; opacity: .85; }
.pn-glow  { stroke: var(--signal); stroke-linecap: round; fill: none; opacity: .16; filter: blur(5px); }

/* Karimák a vezetéken */
.pn-flange { stroke: #333a45; fill: #14171d; }

/* Dugulás: sötét dugó a csőben, halvány figyelmeztető gyűrűvel */
.pn-clog      { fill: #3a2418; stroke: #6b3a1c; stroke-width: 1.5; }
.pn-clog-ring { fill: none; stroke: var(--signal); opacity: .5; }

/* A hálózat mögötti finom fénylés – mélységet ad a fekete háttérnek */
.pipenet::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(80% 40% at 50% 0%, rgba(255,92,26,.05), transparent 60%);
}

/* --- Áttetsző felületek, hogy a hálózat átderengjen ------------------- */
/* A rácsok háttere átlátszó lesz, az elválasztó vonalat a cellák
   szegélye adja – különben a rács takarná el a csöveket. */
.grid-3, .process, .related { background: transparent; border: 0; }
.grid-3 .card, .process .pstep, .related a { box-shadow: 0 0 0 1px var(--line); }

.card, .section--tint .card { background: rgba(12, 13, 15, .58); backdrop-filter: blur(7px); }
.pstep, .section--tint .pstep { background: rgba(12, 13, 15, .58); backdrop-filter: blur(7px); }
.related a, .section--tint .related a { background: rgba(12, 13, 15, .58); backdrop-filter: blur(7px); }
.card:hover, .pstep:hover, .related a:hover { background: rgba(26, 29, 34, .72); }

.section--tint { background: rgba(19, 21, 25, .58); }
.panel, .section--tint .panel { background: rgba(19, 21, 25, .62); backdrop-filter: blur(7px); }
.form-card { background: rgba(19, 21, 25, .68); backdrop-filter: blur(8px); }
.cta-box { background: rgba(19, 21, 25, .66); backdrop-filter: blur(8px); }
.hero__card { background: rgba(19, 21, 25, .62); backdrop-filter: blur(9px); }
.hero__stats { background: transparent; border-color: var(--line-2); }
.stat-tile { background: rgba(12, 13, 15, .45); }
.trustbar { background: rgba(19, 21, 25, .62); backdrop-filter: blur(7px); }
.site-footer { background: rgba(19, 21, 25, .78); backdrop-filter: blur(8px); }
.page-hero { background: transparent; }

@media (max-width: 760px) {
  /* Mobilon halványabb hálózat, hogy a szöveg biztosan olvasható maradjon */
  .pn-wall { stroke: #171a20; }
  .pn-edge { stroke: #232830; }
  .card, .pstep, .related a { background: rgba(12, 13, 15, .72); }
  .section--tint { background: rgba(19, 21, 25, .7); }
}

@media (prefers-reduced-motion: reduce) {
  .pipenet { opacity: .5; }
}

/* --- A vízfront lágy követése ------------------------------------------
   A törzs vízszintes szakaszain a vízfront egy lépésben haladna át; a rövid
   átmenet ezt folyékony áramlássá simítja. */
.pn-water, .pn-glow { transition: stroke-dashoffset .24s cubic-bezier(0.4, 0, 0.2, 1); }
.pn-clog, .pn-clog-ring { transition: opacity .25s ease, transform .35s cubic-bezier(0.34, 1.4, 0.5, 1); }

/* --- Hero: nagyobb jelenlét ------------------------------------------- */
/* Mobilon marad a levegős, görgethető elrendezés. */
@media (max-width: 900px) {
  .hero { padding-top: clamp(160px, 18vw, 230px); }
}

/* Asztali nézetben a teljes hero pontosan egy képernyőbe fér.
   FONTOS: ennek a blokknak a fájl végén kell állnia, mert a fenti
   „nagyobb jelenlét" felülírás korábban visszaállította a nagy
   felső térközt, és emiatt lógott ki a tartalom a képernyőből. */
@media (min-width: 901px) {
  .hero {
    min-height: 100vh; box-sizing: border-box;
    display: flex; align-items: center;
    padding-top: clamp(104px, 9vw, 132px);
    padding-bottom: clamp(28px, 3vw, 44px);
  }
  .hero__grid { width: 100%; }
  /* Szélesebb szövegoszlop, hogy a főcím két sorban maradjon. */
  .hero__content { max-width: 54ch; }
  .hero h1 { font-size: clamp(2.4rem, 3.4vw, 3.3rem); }
  .hero__lead { max-width: 46ch; }
  /* A három pipa egy sorba kerül – így jelentős függőleges hely szabadul fel. */
  .hero__mini { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; }
}

/* Alacsony (pl. 13"-os laptop) képernyőn még egy fokozattal tömörebb. */
@media (min-width: 901px) and (max-height: 860px) {
  .hero h1 { font-size: clamp(2.1rem, 2.9vw, 2.7rem); margin-bottom: 14px; }
  .hero__tag { margin-bottom: 18px; }
  .hero__signature { margin-bottom: 16px; }
  .hero__lead { font-size: 1rem; margin-bottom: 22px; }
  .hero__actions { margin-bottom: 22px; }
  .hero__card { padding: 24px; }
  .stat-tile { padding: 14px 14px; }
}
/* Fénylő aura a hero mögött – a hálózat így mélységet kap, nem lóg a semmiben */
.hero::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 30%; transform: translate(-50%, -50%);
  width: min(1400px, 130vw); height: 720px;
  background:
    radial-gradient(45% 55% at 30% 40%, rgba(255,92,26,.12), transparent 65%),
    radial-gradient(40% 50% at 78% 55%, rgba(255,124,69,.08), transparent 65%);
  pointer-events: none;
}
.hero__tag {
  border: 1px solid var(--line-2); padding: 8px 15px; border-radius: 999px;
  background: rgba(19,21,25,.6); backdrop-filter: blur(6px);
}
.hero__signature .line { width: 46px; background: var(--signal); }

/* A hero kártya stat-mezői jobban elváljanak */
.hero__stats { border: 1px solid var(--line-2); }
.stat-tile { background: rgba(12,13,15,.5); }

/* ============================ 29. Olvashatóság =========================

   A címsorok fehérek és nagyok – azok a csövön is jól olvashatók, ezért
   HOZZÁJUK NEM NYÚLUNK: minden árnyék rontana az élességükön.

   A gond a szürke kenyérszöveg: alacsony a kontrasztja, és a világos cső
   mögötte elnyeli. Csak ezekre kerül árnyék – tisztán elmosódó sötét
   fény, eltolás nélkül, hogy ne "domború" hatást keltsen, hanem úgy
   nézzen ki, mintha a háttér sötétedne be a betűk körül.               */

/* Nagy címek: éles, árnyék nélkül. */
h1, h2, h3, h4, .amount, .stat-tile b,
.btn, .btn *, .brand-mark, .brand-text b { text-shadow: none; }

/* Szürke szövegek: erős, lágy sötétítés a betűk körül. */
p, li,
.hero__lead, .hero__mini div, .hero__signature,
.section-head p, .prose p, .prose ul li,
.checklist li, .faq__a p, .faq__q,
.breadcrumb, .eyebrow, .price-row .name, .price-note,
.stat-tile > span, .stat-strip__line, .stat-strip__label,
.trustbar__item, .town-cloud a,
.footer-about p, .footer-col a, .footer-contact li, .footer-bottom,
.media-split p, .related small, .reviews-note {
  text-shadow:
    0 0 16px rgba(9, 10, 13, .95),
    0 0 34px rgba(9, 10, 13, .85);
}

/* Saját hátterű felületeken (kártya, panel, űrlap, lábléc-doboz) nincs
   rá szükség – ott a szöveg amúgy is tömör alapon ül. */
.card p, .pstep p, .panel p, .panel li, .form-card p, .form-card label,
.nav-drop__menu *, .cookie p, .hero__card > p {
  text-shadow: none;
}

/* A víz és a fény visszafogása, hogy a szöveg mögött ne égjen ki */
.pn-water { opacity: .62; }
.pn-glow  { opacity: .10; }

/* ============================ 30. Üres terek ===========================
   A vélemény-widget saját magassága kisebb volt, mint a foglalt hely,
   ezért tátongott alatta a semmi. */
/* Csak annyi alsó korlát, hogy a widget betöltése ne rántsa meg az
   elrendezést – a fölösleges tátongó rész így eltűnik. */
.reviews-widget { min-height: 200px; }
.reviews-note { margin-top: 14px; }
@media (max-width: 760px) {
  .reviews-widget { min-height: 280px; }
}

/* ============================ 31. Narancs kiemelés ======================
   Az egybefüggő fehér szövegtömböt megtöri: minden szekciócímke és
   kis címsor jelzőszínt kap. A nagy címek maradnak fehérek, hogy a
   hierarchia egyértelmű legyen. */
.eyebrow { color: var(--signal); }
h3, .prose h3, .card h3, .pstep h3 { color: var(--signal); }
/* A hero-kártya és a lábléc címei nem – ott a fehér a helyes */
.hero__card h3, .hero__card-title, .panel h3 { color: var(--white); }
.media-figure figcaption b { color: var(--signal); }

/* ============================ 32. Képfeliratok =========================
   A cím és a leírás elválasztás nélkül összefolyt egy sorban; külön
   sorba kerülnek, és a sötétedés is erősebb a világos fotók miatt. */
.ph__cap {
  display: flex; flex-direction: column; gap: 2px;
  padding: 18px 18px 16px;
  background: linear-gradient(transparent, rgba(12,13,15,.5) 34%, rgba(12,13,15,.97));
}
.ph__cap b {
  color: var(--signal); font-size: .86rem; font-weight: 600;
  letter-spacing: .01em; line-height: 1.3;
}
.ph__cap > span {
  color: rgba(236,238,241,.88); font-size: .82rem; line-height: 1.4;
}
.ph__cap b, .ph__cap > span,
.media-figure figcaption {
  text-shadow: 0 1px 4px rgba(0,0,0,.9), 0 0 12px rgba(0,0,0,.6);
}
.media-figure figcaption {
  background: linear-gradient(transparent, rgba(12,13,15,.5) 34%, rgba(12,13,15,.97));
  padding: 20px 18px 16px;
}

/* ============================ 33. Mobil finomítás ======================
   Érintőfelületek és beviteli mezők – valós eszközön mért hiányosságok. */

/* iOS Safari belenagyít a mezőbe, ha a betű 16px alatt van. Ezt kerüljük. */
input, select, textarea { font-size: 16px; }

/* Hamburger és sütigombok a 44px-es ajánlott minimumra */
.nav-toggle { width: 44px; height: 44px; }
.cookie__actions .btn { padding: 13px 14px; }

@media (max-width: 1000px) {
  /* Lenyíló településlista: nagyobb érintőfelület */
  .nav-drop__grid a { padding: 13px 12px; }
  .nav-drop__all { padding: 14px 10px; }
}

@media (max-width: 760px) {
  /* Lábléc-linkek: sorközből érintőfelületté */
  .footer-col ul { gap: 0; }
  .footer-col li { display: block; }
  .footer-col ul a { display: block; padding: 13px 0; }
  .footer-contact li { padding: 10px 0; }

  /* Hosszú gombfeliratok törhessenek, ne lógjanak ki */
  .btn { white-space: normal; text-align: center; }
  .btn--lg { padding: 16px 22px; }

  /* Fejléc-magasság és a hozzá igazodó görgetési eltolás */
  .header-inner { height: 68px; }
  html { scroll-padding-top: 84px; }
  .nav { inset: 70px 12px auto 12px; }
}

/* ============================ 34. Mobil hibajavítások ==================
   Valós eszközön (iOS Safari) mért problémák javítása. */

/* --- Oldalirányú elhúzás megszüntetése --------------------------------
   Az iOS Safarin a body overflow-x önmagában nem elég; a html elemre is
   kell, különben a nézeten túlnyúló díszelemek oldalra húzhatóvá teszik
   az oldalt. */
html { overflow-x: hidden; max-width: 100%; }
body { max-width: 100%; }
.pipenet { max-width: 100%; }

/* --- Tartalom soha ne függjön a JavaScripttől -------------------------
   A .reveal elemek korábban átlátszóan indultak, és csak JS hatására
   jelentek meg. Lassú mobilon ezért látszott a csőhálózat, miközben a
   szöveg még hiányzott. Mostantól alapból láthatóak; a beúszó animációt
   csak akkor kapcsoljuk be, ha a JS ténylegesen fut (html.js osztály). */
.reveal { opacity: 1; transform: none; }
html.js .reveal:not(.in) { opacity: 0; transform: translateY(26px); }
html.js .grid-3:not(.assembled) .card,
html.js .process:not(.assembled) .pstep,
html.js .related:not(.assembled) a { opacity: 0; transform: translateY(20px) scale(.985); }
html:not(.js) .grid-3 .card,
html:not(.js) .process .pstep,
html:not(.js) .related a { opacity: 1; transform: none; }

@media (max-width: 900px) {
  /* --- Teljesítmény: az elmosás (backdrop-filter) mobilon nagyon drága,
     ez okozta a szaggatott görgetést. Helyette tömörebb háttér. --- */
  .card, .pstep, .related a, .panel, .form-card, .cta-box,
  .hero__card, .trustbar, .site-footer, .cookie, .site-header {
    backdrop-filter: none !important;
  }
  .card, .pstep, .related a { background: rgba(12, 13, 15, .88); }
  .panel, .form-card, .cta-box, .hero__card { background: rgba(19, 21, 25, .9); }
  .trustbar { background: rgba(19, 21, 25, .92); }
  .site-header { background: rgba(12, 13, 15, .96); }
  .site-footer { background: rgba(19, 21, 25, .96); }
  .section--tint { background: rgba(19, 21, 25, .8); }

  /* Az SVG életlenítő szűrő is költséges – mobilon elhagyjuk */
  .pn-glow { display: none; }
}

/* ============================ 35. Utolsó javítások =====================

   1) Oldalirányú elhúzás – biztonsági háló
   A díszelemek (fényudvarok, szöveg-alátétek) nem nyúlhatnak ki a
   nézetből. A "clip" a "hidden"-nel szemben nem hoz létre görgetési
   konténert, így nem befolyásol semmi mást.                            */
.section, .page-hero, .hero, .cta-band, .stat-strip-section,
.trustbar, .site-footer { overflow-x: clip; }

/* 2) Hero-számok jelzőszínnel */
.stat-tile b { color: var(--signal); }
.stat-tile b .u { color: var(--muted); }

/* ============================ 36. Menü: megyei kiemelés ================
   A lenyíló élén álló megyei oldal külön kiemelést kap – ez a legerősebb
   területi kulcsszó, érdemes hangsúlyozni. */
.nav-drop__county {
  display: block; padding: 11px 12px; margin-bottom: 4px;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font-size: .9rem; font-weight: 600; color: var(--text);
  background: var(--signal-dim);
  transition: border-color .16s, color .16s, background .16s;
}
.nav-drop__county:hover { border-color: var(--signal); color: var(--signal); }
.nav-drop__county[data-active] { border-color: var(--signal); color: var(--signal); }
.nav-drop__label + .nav-drop__label,
.nav-drop__county + .nav-drop__label { margin-top: 12px; }

@media (min-width: 1001px) {
  /* 15 település két oszlopban – szélesebb panel kell hozzá */
  .nav-drop__menu { min-width: 400px; }
}
@media (max-width: 1000px) {
  /* Mobilon két oszlop, hogy ne legyen túl hosszú a lista */
  .nav-drop__grid { grid-template-columns: 1fr 1fr; }
  .nav-drop__county { margin-bottom: 8px; }
}
/* ============================ 37. Hero-animáció ========================
   A belső oldalak fejlécében a szakma legjellemzőbb művelete játszódik le:
   a gépi spirál behatol a csőbe, feloldja a dugulást, majd megindul a víz.
   Egyetlen 7 másodperces ciklus, minden elem ugyanarra a ritmusra jár. */

.hero-anim {
  position: absolute; right: 3%; top: 50%; transform: translateY(-50%);
  width: min(430px, 34vw); pointer-events: none; z-index: 1;
}
/* FONTOS: a rajzterületen kívülre semmi nem lóghat ki. Az animált elemek
   (a spirál -150 egységről indul, a kamera -70-ről) szándékosan a képen
   kívülről csúsznak be – ezt a vágás teszi lehetővé. Korábban itt
   "overflow: visible" állt, ettől a spirál a fél oldalra kifutott. */
.hero-anim svg { width: 100%; height: auto; display: block; overflow: hidden; }
.page-hero > .wrap { position: relative; z-index: 2; }

/* Csőfal és karimák */
.ha-wall   { stroke: #2b313b; stroke-linecap: round; fill: none; }
.ha-inner  { stroke: #14171d; fill: none; }
.ha-flange { fill: #1b1f26; stroke: #333a45; stroke-width: 1; }

/* Víz: a dugulás feloldása után indul meg */
.ha-water {
  stroke: var(--signal); fill: none; stroke-linecap: round;
  stroke-dasharray: 22 26; opacity: 0;
  animation: haWater 7s linear infinite;
}
@keyframes haWater {
  0%, 46%   { opacity: 0; stroke-dashoffset: 0; }
  54%       { opacity: .9; }
  92%       { opacity: .9; }
  100%      { opacity: 0; stroke-dashoffset: -192; }
}

/* Dugulás: megremeg, majd szétesik, amikor a spirál odaér */
.ha-clog {
  fill: #3a2418; stroke: #7a4220; stroke-width: 1.5;
  transform-origin: 152px 100px;
  animation: haClog 7s ease-in-out infinite;
}
@keyframes haClog {
  0%, 30%   { transform: scale(1); opacity: 1; }
  34%       { transform: scale(1.06) translateX(-2px); }
  38%       { transform: scale(1.06) translateX(2px); }
  50%       { transform: scale(0); opacity: 0; }
  90%       { transform: scale(0); opacity: 0; }
  100%      { transform: scale(1); opacity: 1; }
}

/* Spirál: befelé halad, dolgozik, majd visszahúzódik */
.ha-coil { animation: haCoil 7s cubic-bezier(0.5, 0, 0.3, 1) infinite; }
@keyframes haCoil {
  0%        { transform: translateX(-150px); }
  30%       { transform: translateX(0); }
  46%       { transform: translateX(14px); }
  62%       { transform: translateX(-150px); }
  100%      { transform: translateX(-150px); }
}
/* A spirál menetei "forognak" – a szaggatás elcsúsztatásával */
.ha-coil path {
  stroke: #6c7686; stroke-width: 5; fill: none; stroke-linecap: round;
  animation: haSpin 0.7s linear infinite;
}
.ha-coil .ha-head { stroke: var(--signal-2); stroke-width: 6; }
@keyframes haSpin { to { stroke-dashoffset: -28; } }

/* Jelzőgyűrű a feloldás pillanatában */
.ha-burst {
  fill: none; stroke: var(--signal); stroke-width: 2;
  transform-origin: 152px 100px; opacity: 0;
  animation: haBurst 7s ease-out infinite;
}
@keyframes haBurst {
  0%, 40%  { transform: scale(.4); opacity: 0; }
  46%      { opacity: .85; }
  58%      { transform: scale(1.9); opacity: 0; }
  100%     { transform: scale(.4); opacity: 0; }
}

@media (max-width: 1000px) {
  /* Mobilon a szöveg alatt, önálló, keretezett sávban – így nem keveredik
     össze a háttér-csőhálózattal, és nem takar semmit. */
  .hero-anim {
    position: relative; z-index: 1; transform: none; inset: auto;
    width: 100%; max-width: 440px; margin: 30px auto 0;
    border: 1px solid var(--line); border-radius: var(--r);
    background: rgba(12, 13, 15, .55);
    overflow: hidden;
  }
  .page-hero { padding-bottom: clamp(36px, 6vw, 56px); }

  /* A fejléc mögötti hálózat halkabb, hogy a két csőrendszer ne feleseljen */
  .page-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0;
    background: rgba(12, 13, 15, .5); pointer-events: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Mozgás nélkül a végállapot látszik: tiszta cső, folyó víz. */
  .ha-coil, .ha-clog, .ha-burst { display: none; }
  .ha-water { opacity: .9; animation: none; }
}

/* ============================ 38. Hero-animáció változatok =============
   Oldaltípusonként más jelenet, hogy ne ismételje magát az oldal.
   A .ha--spiral marad a településeknél; a többi oldal saját változatot kap. */

/* -------- Közös elemek minden változathoz -------- */
.ha-pipe   { stroke: #2b313b; stroke-linecap: round; fill: none; }
.ha-dark   { fill: #14171d; }
.ha-metal  { fill: #1b1f26; stroke: #333a45; stroke-width: 1; }
.ha-tick   { stroke: #3d4552; stroke-linecap: round; }
.ha-accent { stroke: var(--signal); fill: none; stroke-linecap: round; }

/* ======================= B) CSŐKAMERA – /csokamerazas ==================
   A kamerafej végigmegy a csőben, a fénykúp bevilágít, és a végén
   megmutatja a repedést. */
.ha--camera .ha-cam { animation: haCamMove 8s cubic-bezier(0.45,0,0.35,1) infinite; }
@keyframes haCamMove {
  0%       { transform: translateX(-70px); }
  55%      { transform: translateX(150px); }
  70%      { transform: translateX(150px); }
  100%     { transform: translateX(-70px); }
}
.ha--camera .ha-cone {
  fill: var(--signal); opacity: .13;
  animation: haCone 8s ease-in-out infinite;
}
@keyframes haCone { 0%,4% { opacity: 0; } 12%,68% { opacity: .13; } 78%,100% { opacity: 0; } }
.ha--camera .ha-lens { fill: var(--signal-2); animation: haLens 1.6s ease-in-out infinite; }
@keyframes haLens { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
.ha--camera .ha-crack {
  stroke: #6c7686; stroke-width: 2.5; fill: none; stroke-linecap: round;
  animation: haCrack 8s ease-in-out infinite;
}
@keyframes haCrack {
  0%,48%   { stroke: #6c7686; }
  58%,70%  { stroke: var(--signal); }
  80%,100% { stroke: #6c7686; }
}
.ha--camera .ha-cable { stroke: #4a5260; stroke-width: 3; fill: none; }

/* ======================= C) NYOMÁSMÉRŐ – /arak =========================
   A műszer mutatója felfut és beáll: mért, pontos érték – ez a hangulat
   illik az árlistához. Közben a cső megtelik. */
.ha--gauge .ha-dial { fill: #12151a; stroke: #333a45; stroke-width: 2; }
.ha--gauge .ha-arc  { stroke: #262c36; stroke-width: 7; fill: none; stroke-linecap: round; }
.ha--gauge .ha-arc-fill {
  stroke: var(--signal); stroke-width: 7; fill: none; stroke-linecap: round;
  stroke-dasharray: 210; stroke-dashoffset: 210;
  animation: haArc 6.5s cubic-bezier(0.3,0,0.2,1) infinite;
}
@keyframes haArc {
  0%       { stroke-dashoffset: 210; }
  45%      { stroke-dashoffset: 78; }
  55%      { stroke-dashoffset: 92; }
  62%, 88% { stroke-dashoffset: 84; }
  100%     { stroke-dashoffset: 210; }
}
.ha--gauge .ha-needle {
  stroke: var(--signal-2); stroke-width: 3.5; stroke-linecap: round;
  transform-origin: 160px 112px;
  animation: haNeedle 6.5s cubic-bezier(0.3,0,0.2,1) infinite;
}
@keyframes haNeedle {
  0%       { transform: rotate(-118deg); }
  45%      { transform: rotate(24deg); }
  55%      { transform: rotate(10deg); }
  62%, 88% { transform: rotate(16deg); }
  100%     { transform: rotate(-118deg); }
}
.ha--gauge .ha-hub { fill: var(--signal-2); }
.ha--gauge .ha-feed {
  stroke: var(--signal); stroke-width: 8; fill: none; stroke-linecap: round;
  stroke-dasharray: 90; stroke-dashoffset: 90; opacity: .85;
  animation: haFeed 6.5s cubic-bezier(0.3,0,0.2,1) infinite;
}
@keyframes haFeed {
  0%       { stroke-dashoffset: 90; }
  45%,88%  { stroke-dashoffset: 0; }
  100%     { stroke-dashoffset: 90; }
}

/* ======================= D) CSEPEGŐ CSAP – /kapcsolat ==================
   Lassú, nyugodt ritmus: leesik a csepp, gyűrűk futnak szét. */
.ha--drip .ha-drop {
  fill: var(--signal); animation: haDrop 3.2s cubic-bezier(0.5,0,0.75,0) infinite;
}
@keyframes haDrop {
  0%       { transform: translateY(0) scaleY(.75); opacity: 0; }
  12%      { opacity: 1; }
  70%      { transform: translateY(74px) scaleY(1.25); opacity: 1; }
  78%      { transform: translateY(78px) scaleY(.4); opacity: 0; }
  100%     { transform: translateY(0) scaleY(.75); opacity: 0; }
}
.ha--drip .ha-ring {
  fill: none; stroke: var(--signal); stroke-width: 2;
  transform-origin: 160px 152px; opacity: 0;
  animation: haRing 3.2s ease-out infinite;
}
.ha--drip .ha-ring2 { animation-delay: .22s; }
@keyframes haRing {
  0%, 74%  { transform: scale(.2); opacity: 0; }
  80%      { opacity: .8; }
  100%     { transform: scale(2.6); opacity: 0; }
}
.ha--drip .ha-surface { stroke: #333a45; stroke-width: 2; }

/* ======================= E) TÖRT CSŐ – /404 ============================
   A két csővég nem illeszkedik, spriccel a víz – majd összeáll. */
.ha--break .ha-right { animation: haJoin 6s cubic-bezier(0.34,1.4,0.5,1) infinite; }
@keyframes haJoin {
  0%, 40%  { transform: translate(26px, 16px); }
  62%, 88% { transform: translate(0, 0); }
  100%     { transform: translate(26px, 16px); }
}
.ha--break .ha-spray {
  stroke: var(--signal); stroke-width: 3; stroke-linecap: round; fill: none;
  animation: haSpray 6s ease-in-out infinite;
}
@keyframes haSpray {
  0%, 38%  { opacity: .85; }
  50%, 100%{ opacity: 0; }
}
.ha--break .ha-flow {
  stroke: var(--signal); stroke-width: 26; fill: none; stroke-linecap: round;
  stroke-dasharray: 20 24; opacity: 0;
  animation: haBreakFlow 6s linear infinite;
}
@keyframes haBreakFlow {
  0%, 60%  { opacity: 0; stroke-dashoffset: 0; }
  68%, 90% { opacity: .85; }
  100%     { opacity: 0; stroke-dashoffset: -176; }
}

@media (prefers-reduced-motion: reduce) {
  .ha--camera .ha-cam, .ha--camera .ha-cone,
  .ha--gauge .ha-needle, .ha--gauge .ha-arc-fill, .ha--gauge .ha-feed,
  .ha--drip .ha-drop, .ha--drip .ha-ring,
  .ha--break .ha-right, .ha--break .ha-spray, .ha--break .ha-flow { animation: none; }
  .ha--camera .ha-cone { opacity: .13; }
  .ha--gauge .ha-arc-fill { stroke-dashoffset: 84; }
  .ha--gauge .ha-needle { transform: rotate(16deg); }
  .ha--gauge .ha-feed { stroke-dashoffset: 0; }
  .ha--break .ha-right { transform: none; }
  .ha--break .ha-flow { opacity: .85; }
  .ha--break .ha-spray { opacity: 0; }
}

/* A 404 fejléce: korábban beágyazott flex-stílus volt rajta, ami mobilon
   a hiba-animációt a szöveg MELLÉ tette volna. Osztállyal váltottuk ki. */
.page-hero--404 { min-height: 68vh; display: grid; align-content: center; }
@media (max-width: 1000px) { .page-hero--404 { min-height: 0; } }

/* ============================ 39. Hero aláírás =========================
   A név a bizalom legfontosabb eleme egy egyszemélyes vállalkozásnál:
   nem szürke lábjegyzet, hanem aláírás. A név a címsorok talpas
   betűjével, világosan; a szerepkör alatta, halkan. */
.hero__signature {
  display: flex; align-items: center; gap: 16px;
  margin: 4px 0 30px; font-size: 1rem;
}
.hero__signature .line {
  width: 40px; height: 2px; background: var(--signal); flex: none;
  align-self: center;
}
.hero__signature-txt { display: flex; flex-direction: column; gap: 2px; }
.hero__signature b {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.25rem, 1.9vw, 1.5rem);
  font-variation-settings: "opsz" 28;
  letter-spacing: -0.018em; line-height: 1.1;
  color: var(--white);
}
.hero__signature .role {
  font-family: var(--sans); font-size: .84rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--signal-2);
}